@layer formulaire{.gf,.gf-popup{--gf-paper:oklch(99.2% .004 90);--gf-paper-2:oklch(97.2% .006 90);--gf-line:oklch(87.5% .01 90);--gf-ink:oklch(23% .015 260);--gf-muted:oklch(50% .015 260);--gf-faint:oklch(53% .012 260);--gf-accent:oklch(50% .16 258);--gf-highlight:oklch(97.4% .04 95);--gf-danger:oklch(54% .19 27);--gf-danger-bg:oklch(97.2% .02 27);--gf-filled-ink:var(--gf-accent);--gf-hover:color-mix(in oklch, var(--gf-highlight) 45%, var(--gf-paper));--gf-font:inherit;--gf-font-label:ui-monospace, "SF Mono", Menlo, monospace;--gf-line-width:1px;--gf-radius:6px;--gf-min-col:8.5rem;--gf-pad-y:.625rem;--gf-pad-x:.75rem;--gf-label-gap:.25rem;--gf-label-size:.6875rem;--gf-input-size:1rem}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) :is(.gf,.gf-popup){--gf-paper:oklch(21% .008 260);--gf-paper-2:oklch(24% .009 260);--gf-line:oklch(33% .01 260);--gf-ink:oklch(94% .005 90);--gf-muted:oklch(71% .01 260);--gf-faint:oklch(66% .01 260);--gf-accent:oklch(76% .12 250);--gf-highlight:oklch(27.5% .045 255);--gf-danger:oklch(73% .15 25);--gf-danger-bg:oklch(26% .04 25)}}[data-theme=dark] :is(.gf,.gf-popup){--gf-paper:oklch(21% .008 260);--gf-paper-2:oklch(24% .009 260);--gf-line:oklch(33% .01 260);--gf-ink:oklch(94% .005 90);--gf-muted:oklch(71% .01 260);--gf-faint:oklch(66% .01 260);--gf-accent:oklch(76% .12 250);--gf-highlight:oklch(27.5% .045 255);--gf-danger:oklch(73% .15 25);--gf-danger-bg:oklch(26% .04 25)}.gf[data-density=compact]{--gf-pad-y:.375rem;--gf-pad-x:.5625rem;--gf-label-gap:.125rem;--gf-label-size:.625rem;--gf-input-size:.9375rem;--gf-min-col:7.5rem}.gf[data-density=roomy]{--gf-pad-y:.875rem;--gf-pad-x:1rem;--gf-label-gap:.375rem;--gf-label-size:.75rem;--gf-input-size:1.0625rem;--gf-min-col:10rem}.gf{gap:var(--gf-line-width);background:var(--gf-line);border:var(--gf-line-width) solid var(--gf-line);border-radius:var(--gf-radius);color:var(--gf-ink);font-family:var(--gf-font);flex-direction:column;display:flex;overflow:clip;container:formulaire/inline-size}.gf-section{gap:var(--gf-line-width);border:0;flex-direction:column;min-inline-size:0;margin:0;padding:0;display:flex}.gf-legend{padding:calc(var(--gf-pad-y) * .9) var(--gf-pad-x);background:var(--gf-paper-2);color:var(--gf-ink);font-family:var(--gf-font-label);font-size:var(--gf-label-size);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.gf-row{gap:var(--gf-line-width);flex-wrap:wrap;display:flex}.gf-field{--gf-span:1;flex:var(--gf-span) 1 calc(var(--gf-span) * var(--gf-min-col));align-content:start;row-gap:var(--gf-label-gap);min-inline-size:0;padding:var(--gf-pad-y) var(--gf-pad-x);background:var(--gf-paper);cursor:text;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label error""control control""description description";column-gap:.5rem;transition:background-color .12s ease-out,box-shadow .12s ease-out;display:grid;position:relative}.gf-field[data-span="2"]{--gf-span:2}.gf-field[data-span="3"]{--gf-span:3}.gf-field[data-span="4"]{--gf-span:4}.gf-field[data-span="5"]{--gf-span:5}.gf-field[data-span="6"]{--gf-span:6}.gf-field{--gf-focus-color:var(--gf-accent)}@media (hover:hover){.gf-field:hover{background:var(--gf-hover)}}.gf-field[data-invalid]{--gf-focus-color:var(--gf-danger);background:var(--gf-danger-bg)}.gf-field:is(:focus-within,:has([data-menu-active])){background:var(--gf-highlight);box-shadow:inset 0 -2px 0 var(--gf-focus-color)}.gf-field[data-invalid]:is(:focus-within,:has([data-menu-active])){background:var(--gf-danger-bg)}.gf[data-focus=ring] .gf-field:is(:focus-within,:has([data-menu-active])){box-shadow:inset 0 0 0 2px var(--gf-focus-color)}.gf[data-focus=underline] .gf-field:is(:focus-within,:has([data-menu-active])){background:var(--gf-paper)}.gf[data-focus=underline] .gf-field[data-invalid]:is(:focus-within,:has([data-menu-active])){background:var(--gf-danger-bg)}.gf-field[data-disabled]{cursor:not-allowed;opacity:.55}.gf-label{min-inline-size:0;color:var(--gf-muted);font-family:var(--gf-font-label);font-size:var(--gf-label-size);letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;cursor:inherit;grid-area:label;font-weight:500;line-height:1.3;overflow:hidden}.gf-field:has(:required,[aria-required=true],[data-required]) .gf-label:after{content:" *";content:" *" / "";color:var(--gf-accent)}.gf-field:is(:focus-within,:has([data-menu-active])) .gf-label{color:var(--gf-ink)}.gf-field[data-invalid] .gf-label,.gf-field[data-invalid] .gf-label:after{color:var(--gf-danger)}.gf-error{color:var(--gf-danger);font-family:var(--gf-font-label);font-size:var(--gf-label-size);letter-spacing:.02em;white-space:nowrap;grid-area:error;font-weight:500;line-height:1.3}.gf-field[data-error-below]{grid-template-areas:"label label""control control""error error""description description"}.gf-field[data-error-below] .gf-error{white-space:normal;text-wrap:pretty;overflow-wrap:anywhere}.gf-error-measure{visibility:hidden;pointer-events:none;position:absolute;inset-block-start:0;inset-inline-start:0}.gf-description{color:var(--gf-muted);font-size:calc(var(--gf-input-size) * .78);grid-area:description;margin:0;line-height:1.4}.gf-control{grid-area:control}.gf-input{appearance:none;inline-size:100%;min-inline-size:0;color:inherit;font:inherit;font-size:var(--gf-input-size);background:0 0;border:0;border-radius:0;outline:none;margin:0;padding:0;line-height:1.4}.gf-input::placeholder{color:var(--gf-faint);opacity:1}.gf-input:-webkit-autofill{-webkit-text-fill-color:currentColor;caret-color:currentColor;transition:background-color 0s 100000s,color 0s 100000s}.gf-input:autofill{-webkit-text-fill-color:currentColor;transition:background-color 0s 100000s,color 0s 100000s}.gf-input:is([data-com-onepassword-filled],[data-lastpass-icon-root],[data-dashlane-rid]){background-color:#0000!important;background-image:none!important}.gf-textarea{resize:vertical;min-block-size:calc(var(--gf-input-size) * 1.4 * 2)}@supports (field-sizing:content){.gf-textarea{field-sizing:content;resize:none}}.gf-select{all:unset;min-inline-size:0;font-size:var(--gf-input-size);cursor:default;grid-area:control;justify-content:space-between;align-items:center;gap:.5rem;line-height:1.4;display:flex}.gf-select-value{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.gf-select-value[data-placeholder]{color:var(--gf-faint)}.gf-select-icon{color:var(--gf-muted);transition:transform .15s ease-out;display:flex}.gf-select[data-popup-open] .gf-select-icon{transform:rotate(180deg)}.gf-select:before{content:"";position:absolute;inset:0}.gf-field:has(.gf-select){cursor:default}.gf-number{display:contents}.gf-scrub{cursor:ew-resize;grid-area:label}.gf-scrub-cursor{color:var(--gf-ink);filter:drop-shadow(0 0 1px var(--gf-paper)) drop-shadow(0 0 1px var(--gf-paper))}.gf-number-group{align-items:center;gap:.125rem;display:flex}.gf-number-group .gf-input{font-variant-numeric:tabular-nums;flex:1}.gf-stepper{all:unset;block-size:1.375rem;inline-size:1.375rem;color:var(--gf-muted);cursor:default;opacity:0;border-radius:4px;flex:none;place-items:center;transition:opacity .12s ease-out,background-color .12s ease-out,color .12s ease-out;display:grid}.gf-field:hover .gf-stepper,.gf-field:focus-within .gf-stepper{opacity:1}@media (hover:none){.gf-stepper{opacity:1}}.gf-stepper:hover{background:color-mix(in oklch, var(--gf-ink) 8%, transparent);color:var(--gf-ink)}.gf-stepper:active{background:color-mix(in oklch, var(--gf-ink) 14%, transparent)}.gf-stepper:focus-visible{outline:2px solid var(--gf-accent)}.gf-field:is(:hover,:focus-within) .gf-stepper[data-disabled]{opacity:.3}.gf-choices{font-size:var(--gf-input-size);white-space:nowrap;gap:.375rem 1rem;line-height:1.4;display:flex}.gf-field:has(>.gf-choices){min-inline-size:max-content}@container formulaire (inline-size<30rem){.gf-field:has(>.gf-choices){min-inline-size:0}.gf-choices{flex-direction:column}}.gf-choice{cursor:default;align-items:center;gap:.4rem;transition:opacity .12s ease-out;display:inline-flex}.gf-radio,.gf-checkbox{all:unset;box-sizing:border-box;border:1.5px solid var(--gf-faint);background:var(--gf-paper);block-size:.9375rem;inline-size:.9375rem;color:var(--gf-paper);flex:none;place-items:center;transition:background-color .12s ease-out,border-color .12s ease-out;display:grid}.gf-radio{border-radius:50%}.gf-checkbox{border-radius:3px}:is(.gf-radio,.gf-checkbox):focus-visible{outline:2px solid var(--gf-accent);outline-offset:2px}:is(.gf-radio,.gf-checkbox)[data-checked]{border-color:var(--gf-accent);background:var(--gf-accent)}.gf-radio-indicator[data-checked]{background:var(--gf-paper);border-radius:50%;block-size:.3125rem;inline-size:.3125rem}.gf-checkbox-indicator{display:flex}.gf-positioner{z-index:50;outline:0}.gf-popup{box-sizing:border-box;min-inline-size:var(--anchor-width);max-block-size:var(--available-height);border:1px solid var(--gf-line);border-radius:var(--gf-radius);background:var(--gf-paper);color:var(--gf-ink);font-family:var(--gf-font);transform-origin:var(--transform-origin);outline:0;padding:.25rem;font-size:.9375rem;transition:opacity .14s ease-out,transform .14s ease-out;overflow-y:auto;box-shadow:0 1px 2px oklch(0% 0 0/.06),0 8px 24px -6px oklch(0% 0 0/.16)}.gf-popup[data-starting-style],.gf-popup[data-ending-style]{opacity:0;transform:scale(.97)translateY(-2px)}.gf-option{border-radius:calc(var(--gf-radius) - 2px);cursor:default;-webkit-user-select:none;user-select:none;outline:0;justify-content:space-between;align-items:center;gap:1rem;padding:.375rem .5rem;display:flex}.gf-option[data-highlighted]{background:var(--gf-highlight)}.gf-option-indicator{color:var(--gf-accent);display:flex}.gf-actions{padding:var(--gf-pad-x);background:var(--gf-paper-2);flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.gf-button{appearance:none;border:var(--gf-line-width) solid var(--gf-line);text-box:trim-both cap alphabetic;border-radius:max(0px, calc(var(--gf-radius) - 2px));background:var(--gf-paper);color:var(--gf-ink);font:inherit;font-size:var(--gf-input-size);cursor:pointer;padding:.75em 1em;font-weight:500;line-height:1.25;transition:background-color .12s ease-out}.gf-button:hover{background:var(--gf-hover)}.gf-button:focus-visible{outline:2px solid var(--gf-accent);outline-offset:2px}.gf-button[data-variant=primary]{border-color:var(--gf-accent);background:var(--gf-accent);color:var(--gf-paper)}.gf-button[data-variant=primary]:hover{background:color-mix(in oklch, var(--gf-accent) 88%, var(--gf-ink))}.gf[data-actions=cells] .gf-actions{align-items:stretch;gap:var(--gf-line-width);background:var(--gf-line);padding:0}.gf[data-actions=cells] .gf-button{padding:calc(var(--gf-pad-y) * 1.4) var(--gf-pad-x);font-family:var(--gf-font-label);font-size:var(--gf-label-size);letter-spacing:.08em;text-align:start;text-transform:uppercase;border:0;border-radius:0;font-weight:600}.gf[data-actions=cells] .gf-button[data-variant=primary]{text-align:end;background:var(--gf-accent);color:var(--gf-paper);flex:1}.gf[data-actions=cells] .gf-button[data-variant=primary]:hover{background:color-mix(in oklch, var(--gf-accent) 88%, var(--gf-ink))}.gf[data-actions=cells] .gf-button:focus-visible{outline-color:var(--gf-paper);outline-offset:-4px}.gf[data-actions=cells] .gf-button[data-variant=secondary]:focus-visible{outline-color:var(--gf-accent)}.gf[data-mode=filled] .gf-field{cursor:default}.gf[data-mode=filled] .gf-field:hover,.gf[data-mode=filled] .gf-field:focus-within{background:var(--gf-paper);box-shadow:none}.gf[data-mode=filled] .gf-field:has(:focus-visible){background:var(--gf-paper-2);box-shadow:inset 0 0 0 2px var(--gf-focus-color)}.gf[data-mode=filled] .gf-label:after{content:none}.gf[data-mode=filled] :is(.gf-input,.gf-select,.gf-choice){color:var(--gf-filled-ink)}.gf[data-mode=filled] .gf-input::placeholder{color:#0000}.gf[data-mode=filled] .gf-textarea{resize:none}.gf[data-mode=filled] .gf-select-icon,.gf[data-mode=filled] .gf-select-value[data-placeholder]{visibility:hidden}.gf[data-mode=filled] .gf-field:has(.gf-input:placeholder-shown,.gf-select[data-placeholder]):after{content:"—";content:"—" / "";color:var(--gf-faint);font-size:var(--gf-input-size);pointer-events:none;grid-area:control;align-self:start;line-height:1.4}.gf[data-mode=filled] .gf-choice:not(:has([data-checked])){color:var(--gf-muted)}.gf[data-mode=filled] :is(.gf-radio,.gf-checkbox){border-color:var(--gf-faint)}.gf[data-mode=filled] :is(.gf-radio,.gf-checkbox)[data-checked]{border-color:var(--gf-filled-ink);background:var(--gf-filled-ink)}.gf[data-mode=filled] .gf-description{display:none}.gf[data-mode=filled] .gf-textarea{field-sizing:content;min-block-size:0}.gf[data-mode=filled] :is(.gf-stepper,.gf-scrub),.gf[data-mode=filled] .gf-select:before{display:none}@media print{.gf,.gf-popup{--gf-paper:#fff;--gf-paper-2:#f2f2f2;--gf-line:#000;--gf-ink:#000;--gf-muted:#333;--gf-faint:#999;--gf-highlight:#fff;--gf-hover:#fff;--gf-danger-bg:#fff}.gf{-webkit-print-color-adjust:exact;print-color-adjust:exact;border-radius:0}.gf-row,.gf-field{break-inside:avoid;box-shadow:none!important}.gf-legend{break-after:avoid}.gf-actions{display:none}.gf-select-icon,.gf-input::placeholder,.gf-select-value[data-placeholder]{visibility:hidden}}@media (prefers-reduced-motion:reduce){.gf *,.gf-popup{transition:none}}}:root{--page:oklch(96.4% .003 106);--ink:oklch(21% .012 135);--muted:oklch(44% .006 110);--faint:oklch(51% .006 110);--rule:oklch(89% .004 106);--well:oklch(93.6% .004 106);--paper:oklch(99.2% .004 90);--on-ink:oklch(97% .003 106);--sans:"Instrument Sans", system-ui, sans-serif;--mono:"Fragment Mono", ui-monospace, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--page:oklch(17.5% .007 260);--ink:oklch(94% .005 90);--muted:oklch(74% .01 260);--faint:oklch(62% .01 260);--rule:oklch(27% .01 260);--well:oklch(21% .008 260);--paper:oklch(21% .008 260);--on-ink:oklch(17.5% .007 260);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--page:oklch(17.5% .007 260);--ink:oklch(94% .005 90);--muted:oklch(74% .01 260);--faint:oklch(62% .01 260);--rule:oklch(27% .01 260);--well:oklch(21% .008 260);--paper:oklch(21% .008 260);--on-ink:oklch(17.5% .007 260);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}body{background:var(--page);color:var(--ink);font-family:var(--sans);letter-spacing:0;-webkit-font-smoothing:antialiased;margin:0;font-size:1.375rem;font-weight:400;line-height:1.34}.gf,.gf-popup{--gf-font:var(--sans);--gf-font-label:var(--mono);letter-spacing:normal}.gf{font-weight:400}a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;-webkit-text-decoration-color:var(--faint);text-decoration-color:var(--faint);text-underline-offset:.2em;transition:text-decoration-color .15s ease-out}a:hover{text-decoration-color:currentColor}code{font-family:var(--mono);letter-spacing:0;font-size:.8em}.page{--col:40rem;--wide:68rem;grid-template-columns:minmax(0, 1fr) min(var(--col), 100%) minmax(0, 1fr);padding:2.5rem 1rem 5rem;display:grid;overflow-x:clip}.page>*{grid-column:2}.page>.wide{width:min(var(--wide), 100%);grid-column:1/-1;justify-self:center}.masthead{justify-content:flex-end;align-items:baseline;display:flex}.hero-mark{color:var(--ink);margin-bottom:1.75rem;display:block}.hero-mark .mark-fill{transition:transform .42s cubic-bezier(.32,.72,0,1)}.masthead-link{color:var(--muted);font-size:1.0625rem;font-weight:400;text-decoration:none}.masthead-link:hover{color:var(--ink)}.masthead-nav{align-items:center;gap:2rem;display:flex}.theme-toggle{width:2.25rem;height:2.25rem;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;place-items:center;margin-block:-.5rem;padding:0;transition:color .12s ease-out,background-color .12s ease-out;display:grid}.theme-toggle:hover{background:var(--well);color:var(--ink)}.theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.intro{margin-top:clamp(4rem,12vw,8rem)}h1{letter-spacing:-.02em;margin:0;font-size:2.25rem;font-weight:500;line-height:1.12}h1 span{color:var(--faint);display:block}.width-tag{font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;font-size:.875rem;font-weight:400;line-height:1.4}.base-ui-link{white-space:nowrap}.base-ui-link svg{vertical-align:baseline;width:auto;height:.7em;margin-right:.25em}.intro p{text-wrap:pretty;margin:2.25rem 0 0}.prose p{text-wrap:pretty;margin:0}.demo{margin:5.5rem 0 0}.demo-layout{grid-template-columns:minmax(0,1fr) 15rem;align-items:start;gap:3rem;display:grid}.controls{gap:1.5rem;display:grid;position:sticky;top:2rem}.control{gap:.5rem;display:grid}.control-note{color:var(--faint);font-size:.875rem;line-height:1.35}.control-inspect{border-top:1px solid var(--rule);padding-top:1.5rem}.control-label{color:var(--faint);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}@media (width<=960px){.demo-layout{grid-template-columns:minmax(0,1fr);gap:2rem}.controls{flex-wrap:wrap;gap:1.25rem 2rem;display:flex;position:static}.control-inspect{border-top:0;padding-top:0}}.seg{background:color-mix(in oklch, var(--ink) 6%, transparent);border-radius:7px;gap:2px;width:fit-content;padding:2px;display:flex}.seg button{all:unset;color:var(--muted);text-transform:capitalize;white-space:nowrap;cursor:pointer;border-radius:5px;padding:.25rem .625rem;font-size:.875rem;line-height:1.3;transition:color .12s ease-out,background-color .12s ease-out,box-shadow .12s ease-out}.seg button:hover{color:var(--ink)}.seg button[aria-checked=true]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--rule), 0 1px 2px oklch(0% 0 0/.06)}:is(.seg,.swatches) button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.swatches{align-items:center;gap:.75rem;min-block-size:1.875rem;padding-inline:.25rem;display:flex}.swatches button{all:unset;background:var(--swatch);cursor:pointer;border-radius:50%;block-size:1rem;inline-size:1rem;transition:box-shadow .15s ease-out,scale .15s ease-out;box-shadow:inset 0 0 0 1px oklch(0% 0 0/.12)}.swatches button:hover{scale:1.1}.swatches button[aria-checked=true]{box-shadow:0 0 0 2px var(--page), 0 0 0 3.5px var(--swatch)}[data-swatch=blue]{--swatch:var(--lightningcss-light,oklch(50% .16 258))var(--lightningcss-dark,oklch(76% .12 250))}[data-swatch=red]{--swatch:var(--lightningcss-light,oklch(54% .19 27))var(--lightningcss-dark,oklch(73% .15 25))}[data-swatch=green]{--swatch:var(--lightningcss-light,oklch(48% .1 160))var(--lightningcss-dark,oklch(76% .11 160))}[data-swatch=graphite]{--swatch:var(--lightningcss-light,oklch(32% .01 260))var(--lightningcss-dark,oklch(86% .005 260))}.stage-track{justify-content:center;display:flex}.stage{min-width:320px;max-width:100%;position:relative}.handle{z-index:2;cursor:ew-resize;touch-action:none;outline:none;place-items:center;width:1.5rem;display:grid;position:absolute;inset-block:0}.handle[data-side=left]{right:100%}.handle[data-side=right]{left:100%}.handle:after{content:"";background:var(--faint);opacity:.6;border-radius:999px;width:4px;height:2.5rem;transition:height .2s cubic-bezier(.2,0,0,1),opacity .15s ease-out,background-color .15s ease-out}.handle:hover:after,.handle:focus-visible:after,.demo[data-dragging] .handle:after{background:var(--ink);opacity:1;height:4rem}.handle:focus-visible:after{outline:2px solid var(--ink);outline-offset:3px}.width-tag{background:var(--ink);color:var(--on-ink);font-variant-numeric:tabular-nums;text-transform:none;white-space:nowrap;opacity:0;pointer-events:none;border-radius:6px;padding:.25rem .5rem;transition:opacity .15s ease-out,translate .15s ease-out;position:absolute;bottom:calc(100% + .75rem);left:50%;translate:-50% 4px}.width-tag span{opacity:.6}.demo[data-dragging] .width-tag{opacity:1;translate:-50%}.stage:has(.handle:hover,.handle:focus-visible) .width-tag{opacity:1;translate:-50%}@media (width<=640px){.handle,.width-tag{display:none}}body.is-resizing{cursor:ew-resize;-webkit-user-select:none;user-select:none}:root[data-accent=red] :is(.gf,.gf-popup){--gf-accent:var(--lightningcss-light,oklch(54% .19 27))var(--lightningcss-dark,oklch(73% .15 25))}:root[data-accent=green] :is(.gf,.gf-popup){--gf-accent:var(--lightningcss-light,oklch(48% .1 160))var(--lightningcss-dark,oklch(76% .11 160))}:root[data-accent=graphite] :is(.gf,.gf-popup){--gf-accent:var(--lightningcss-light,oklch(32% .01 260))var(--lightningcss-dark,oklch(86% .005 260))}.code{background:var(--paper);box-shadow:0 0 0 1px var(--rule);font-family:var(--mono);letter-spacing:0;border-radius:8px;margin:1.25rem 0 0;padding:1rem 1.25rem;font-size:1.0625rem;font-weight:400;line-height:1.6;overflow-x:auto}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.command{background:var(--paper);box-shadow:0 0 0 1px var(--rule);font-family:var(--mono);border-radius:8px;align-items:center;gap:.75rem;margin:1rem 0 1.75rem;padding:.875rem 1.25rem;font-size:1.0625rem;display:flex}.command-prompt{color:var(--faint);-webkit-user-select:none;user-select:none}.command-code{flex:1;min-width:0;overflow-x:auto}.command-code pre{font:inherit;white-space:pre;margin:0;background:0 0!important}.command .code-copy{font-family:var(--sans)}.code-scroll[data-collapsed]{-webkit-mask-image:linear-gradient(#000 calc(100% - 3rem),#0000);mask-image:linear-gradient(#000 calc(100% - 3rem),#0000)}.code-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.code-tabs{background:var(--paper);box-shadow:0 0 0 1px var(--rule);border-radius:8px;overflow:hidden}.source{margin-top:2.5rem}.usage{margin-top:1.25rem}.code-tabs-bar{border-bottom:1px solid var(--rule);align-items:baseline;gap:1.25rem;padding:.75rem 1.25rem;display:flex}.code-tabs-list{gap:1.125rem;display:flex}.code-tabs-list button,.code-copy{color:var(--faint);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:1rem;transition:color .12s ease-out}.code-tabs-list button:hover,.code-tabs-list button[aria-selected=true],.code-copy:hover{color:var(--ink)}.code-tabs-list button:focus-visible,.code-copy:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}.code-tabs-hint{color:var(--muted);font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;margin-left:auto;font-size:.8125rem;overflow:hidden}.code-tabs-hint b{color:var(--ink);font-weight:400}.code-tabs-hint+.code-copy,.code-copy+.code-copy{margin-left:0}.code-copy{text-align:right;min-width:3.25rem;margin-left:auto}.code-scroll{overscroll-behavior-x:contain;position:relative;overflow:auto}.code-scroll[data-collapsed]{overflow-y:hidden}.code-scroll pre{font-family:var(--mono);letter-spacing:0;outline:none;margin:0;padding:1rem 0;font-size:1.0625rem;font-weight:400;line-height:1.65;background:0 0!important}.code-scroll code{min-width:fit-content;display:block}.code-scroll .line{min-height:1.7em;padding-inline:1.25rem;transition:opacity .18s ease-out,background-color .18s ease-out;display:block}.code-scroll pre[data-has-active] .line:not(.is-active){opacity:.32}.code-scroll .line.is-active{background:color-mix(in oklch, var(--ink) 5%, transparent)}.shiki,.shiki span{color:var(--shiki-light)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) :is(.shiki,.shiki span){color:var(--shiki-dark)}}:root[data-theme=dark] :is(.shiki,.shiki span){color:var(--shiki-dark)}.stage[data-xray] .gf-field:before{content:attr(data-field) " · " attr(data-span) / "";white-space:nowrap;background:color-mix(in oklch, var(--gf-accent) 10%, var(--gf-paper));color:color-mix(in oklch, var(--gf-accent) 70%, var(--gf-ink));font-family:var(--gf-font-label);font-size:var(--gf-label-size);letter-spacing:.02em;pointer-events:none;border-radius:4px;grid-area:error;place-self:center end;margin-block:-.125rem;padding:.125rem .375rem;line-height:1.3}.stage[data-xray] .gf-field[data-invalid]:before{content:none}.stage[data-xray] .gf-legend:after{content:"Section";float:right;color:color-mix(in oklch, var(--gf-accent) 70%, var(--gf-ink));letter-spacing:.04em;font-weight:400}.peek{z-index:5;border:1px solid color-mix(in oklch, var(--ink) 14%, transparent);background:var(--paper);pointer-events:none;border-radius:8px;max-width:min(40rem,100%);animation:.16s cubic-bezier(.2,0,0,1) peek-in;position:absolute;overflow:hidden;box-shadow:0 12px 32px -12px oklch(0% 0 0/.3)}.peek[data-placement=above]{translate:0 -100%}.peek-bar{border-bottom:1px solid var(--rule);color:var(--muted);font-family:var(--mono);justify-content:space-between;gap:2rem;padding:.5rem 1rem;font-size:.75rem;display:flex}.peek-bar b{color:var(--ink);font-weight:400}.peek .code-scroll pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:.625rem 0}.peek .code-scroll .line{padding-inline:1rem}@keyframes peek-in{0%{opacity:0;transform:translateY(4px)}}.peek[data-placement=above]{animation-name:peek-in-above}@keyframes peek-in-above{0%{opacity:0;transform:translateY(-4px)}}.prose{margin-top:6rem}.prose h2,.components h2{color:var(--faint);font-size:inherit;margin:2.75rem 0 0;font-weight:500}.prose h2:first-child{margin-top:0}.ways{margin-top:3.5rem}.ways h2{color:var(--faint);font-size:inherit;margin:0 0 1rem;font-weight:500}.ways-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;display:grid}.way{grid-row:span 3;grid-template-rows:subgrid;row-gap:.5rem;min-width:0;display:grid}.way h3{font-size:inherit;margin:0;font-weight:500}.way p,.ways-note{text-wrap:pretty;margin:0}.way .snippet{margin-top:.75rem}.ways-note{max-width:40rem;color:var(--muted);margin-top:1.5rem}.ways-note code{font-family:var(--mono)}@media (width<=52rem){.ways-grid{grid-template-columns:minmax(0,1fr)}.way+.way{margin-top:2rem}}.snippet{background:var(--paper);box-shadow:0 0 0 1px var(--rule);border-radius:8px;margin:0;overflow:hidden}.snippet-bar{border-bottom:1px solid var(--rule);color:var(--muted);justify-content:space-between;align-items:baseline;padding:.75rem 1.25rem;font-size:1rem;display:flex}.components{margin-top:3.5rem}.components h2{margin:0 0 1rem}.bento .gf{--gf-min-col:3.5rem}.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.bento-tile{background:var(--well);border-radius:14px;flex-direction:column;min-width:0;display:flex}.bento-tile[data-size=wide]{grid-column:span 2}.bento-tile[data-size=big]{grid-area:span 2/span 2}.bento-visual{pointer-events:none;flex:1;align-content:center;padding:1.5rem 1.25rem 1rem;display:grid}.bento-visual .gf{box-shadow:0 1px 2px oklch(0% 0 0/.06)}.bento .gf-stepper{opacity:1}.bento-meta{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.75rem;padding:0 1.25rem 1rem;display:flex}.bento-meta code{font-size:.875rem}.bento-meta span{color:var(--faint);font-family:var(--mono);letter-spacing:.02em;font-size:.75rem}@media (width<=52rem){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=34rem){.bento{grid-template-columns:minmax(0,1fr)}.bento-tile[data-size]{grid-area:auto}}.colophon{margin-top:6rem}.colophon .gf{--gf-filled-ink:var(--gf-ink);--gf-paper:var(--page);--gf-line:color-mix(in oklch, var(--ink) 22%, var(--page))}.colophon .gf-row,.colophon .gf-label{margin:0}.colophon dd{color:var(--gf-filled-ink);font-size:var(--gf-input-size);grid-area:control;margin:0;line-height:1.4}.colophon dd a{color:inherit;-webkit-text-decoration-color:color-mix(in oklch, currentColor 40%, transparent);text-decoration-color:color-mix(in oklch, currentColor 40%, transparent);text-underline-offset:.2em}.colophon dd a:hover{text-decoration-color:currentColor}@media (prefers-reduced-motion:reduce){.peek,.code-scroll .line,.seg button,.swatches button,.handle:after,.width-tag,a{transition:none}}@media print{:root{--page:#fff}.page>:not(.demo),.controls,.handle,.width-tag,.source,.demo .code{display:none!important}.page,.demo-layout,.stage-track,.stage{margin:0;padding:0;display:block;width:auto!important}}.pg{max-width:56rem;margin:0 auto;padding:2.5rem 1rem 5rem}.pg h1{margin-bottom:1rem}.pg-scenario{margin-top:3rem}.pg-scenario h2{font-size:inherit;margin:0;font-weight:500}.pg-notes{color:var(--muted);text-wrap:pretty;margin:.25rem 0 1rem;font-size:1.0625rem}.pg-toolbar{gap:.5rem;margin-bottom:.75rem;display:flex}.pg-toolbar button{border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;border-radius:6px;padding:.375rem .75rem;font-size:.9375rem}.pg-narrow{max-width:22rem}.pg-output{background:var(--paper);box-shadow:0 0 0 1px var(--rule);font-family:var(--mono);border-radius:8px;margin:.75rem 0 0;padding:.75rem 1rem;font-size:.875rem}