* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--cap-font), system-ui, -apple-system, sans-serif;
color: var(--cap-foreground);
background: var(--cap-bg);
}
.cap-form {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
max-width: 40rem;
margin: 0 auto;
padding: 4rem 1.25rem;
gap: 2rem;
}
.cap-brand {
display: flex;
justify-content: center;
width: 100%;
min-height: 1rem;
}
.cap-brand img {
max-height: var(--cap-brand-max-size, 4rem);
max-width: var(--cap-brand-max-size, 4rem);
object-fit: contain;
}
.cap-screens {
flex: 1;
width: 100%;
min-height: 12rem;
display: flex;
align-items: center;
justify-content: center;
}
.cap-screen {
display: none;
width: 100%;
flex-direction: column;
gap: 1rem;
text-align: center;
}
.cap-screen.cap-active {
display: flex;
}
.cap-step-count {
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.55;
}
.cap-intro-title,
.cap-completion-title {
font-size: 1.75rem;
font-weight: 600;
margin: 0;
}
.cap-intro-description,
.cap-completion-message {
font-size: 1.05rem;
opacity: 0.8;
margin: 0;
}
.cap-label,
.cap-question {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
}
.cap-input {
width: 100%;
padding: 0.625rem 0.875rem;
font-size: 1rem;
font-family: inherit;
color: inherit;
background-color: color-mix(in srgb, var(--cap-foreground) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--cap-foreground) 10%, transparent);
border-radius: var(--cap-radius-input);
outline: none;
transition: border-color 0.15s ease;
}
.cap-input::placeholder {
color: color-mix(in srgb, var(--cap-foreground) 45%, transparent);
}
.cap-input:focus {
border-color: var(--cap-accent);
}
.cap-textarea {
resize: vertical;
min-height: 7rem;
}
/* Type icons, on free-text answers only — choice and scale have no single
field. `mask-image` rather than `background-image` so `background-color`
paints the glyph and it tracks the form's foreground; the mask cannot go on
the input itself, which would clip the field's own fill and text.
Inlined rather than kept as files beside this stylesheet: a relative URL
resolves off the blob but not in the builder, whose bundler rewrites every
.svg to a .js module (the Turbopack rule in next.config.ts), and an absolute
one would resolve against the form's domain. A data URI is the only form
that works from both, which keeps the two copies byte-identical. */
.cap-icon {
display: inline-block;
width: 1.125rem;
height: 1.125rem;
background-color: color-mix(in srgb, var(--cap-foreground) 45%, transparent);
mask-repeat: no-repeat;
mask-size: contain;
}
.cap-field {
position: relative;
}
.cap-field .cap-icon {
position: absolute;
left: 0.875rem;
top: 0.9375rem;
pointer-events: none;
}
.cap-field .cap-input {
padding-left: 2.625rem;
}
.cap-icon[data-cap-type='Name'] {
mask-image: url("data:image/svg+xml,");
}
.cap-icon[data-cap-type='Email'] {
mask-image: url("data:image/svg+xml,");
}
.cap-icon[data-cap-type='Mobile'] {
mask-image: url("data:image/svg+xml,");
}
.cap-icon[data-cap-type='ShortText'] {
mask-image: url("data:image/svg+xml,");
}
.cap-icon[data-cap-type='LongText'] {
mask-image: url("data:image/svg+xml,");
}
.cap-fieldset {
border: 0;
margin: 0;
padding: 0;
}
/* A