@layer components{.builder-page{--gutter:1rem;--content:75rem;grid-template-columns:minmax(var(--gutter), 1fr) [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end] minmax(var(--gutter), 1fr);background:var(--surface-alt);align-content:start;row-gap:clamp(1.5rem,4vw,3rem);min-block-size:100dvh;padding-block:clamp(1.5rem,5vw,4rem);display:grid}.builder-page>*{grid-column:content}.builder-page__header{gap:.25rem;max-inline-size:40rem;display:grid}.card-builder{flex-wrap:wrap;align-items:start;gap:2rem 3rem;display:flex}.card-builder__preview{flex-grow:999;flex-basis:0;gap:.75rem;min-inline-size:55%;display:grid}.card-builder__form{flex-grow:1;flex-basis:22rem;gap:1.75rem;display:grid}@media (width>=60rem) and (height>=36rem){.card-builder__preview{position:sticky;inset-block-start:1.5rem}}.segmented{border:1px solid var(--surface-charcoal);justify-self:center;padding:0;display:inline-flex}.segmented__option{cursor:pointer;min-block-size:44px;transition:background-color .16s var(--ease-out), color .16s var(--ease-out);align-items:center;padding-inline:1rem;display:inline-flex;position:relative}.segmented__option+.segmented__option{border-inline-start:1px solid var(--surface-charcoal)}.segmented__option input{opacity:0;pointer-events:none;position:absolute}.segmented__option:has(:checked){background:var(--surface-charcoal);color:var(--ink-inverse)}.segmented__option:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}@media (hover:hover) and (pointer:fine){.segmented__option:not(:has(:checked)):hover{background:var(--surface-white)}}.field{border:0;gap:.5rem;margin:0;padding:0;display:grid}.field__label{font:var(--type-label);letter-spacing:var(--tracking-display);text-transform:uppercase;padding:0}.field__control{border:1px solid var(--surface-gray);background:var(--surface-white)}.field__control:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}.field__control:has([aria-invalid=true]){border:2px solid var(--error);margin:-1px}.field__control input,.field__control textarea{inline-size:100%;font:var(--type-body);background:0 0;border:0;padding:10px 20px;font-size:max(16px,1rem);display:block}.field__control input:focus-visible,.field__control textarea:focus-visible{outline:none}.field__control textarea{field-sizing:content;resize:none;min-block-size:calc(5lh + 20px);max-block-size:calc(14lh + 20px);font:var(--type-body-serif);font-size:max(16px,1.125rem)}.field__meta{justify-content:space-between;align-items:start;gap:1rem;display:flex}.field__count{color:var(--surface-charcoal);font-variant-numeric:tabular-nums;margin-inline-start:auto}.field__error{color:var(--error);font-weight:500}.field__error:before{content:"! ";font-weight:700}.tiles{gap:.5rem;display:grid}.tiles--phrases{grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr))}.tiles--pictures{grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr))}.tile{border:1px solid var(--surface-gray);background:var(--surface-white);cursor:pointer;transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out);gap:.375rem;padding:.625rem;display:grid;position:relative}.tile input{opacity:0;pointer-events:none;position:absolute}.tile:has(:checked){border:2px solid var(--black);background:var(--yellow);padding:calc(.625rem - 1px)}.tile:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}@media (hover:hover) and (pointer:fine){.tile:not(:has(:checked)):hover{border-color:var(--black)}}.tile:active{transform:scale(.98)}@media (prefers-reduced-motion:no-preference){.tile{transition:transform .16s var(--ease-out), background-color .16s var(--ease-out), border-color .16s var(--ease-out)}}.tile__phrase{min-block-size:3.5rem;font:600 1.125rem / 1.05 var(--font-display);letter-spacing:var(--tracking-display);text-transform:uppercase;align-content:center;display:grid}.tile--picture .card-front{border:0}.tile__name{text-align:center}.card-builder__submit{justify-items:start;gap:.75rem;display:grid}.card-builder__summary{color:var(--error)}.turnstile{min-block-size:65px}}