@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-cyrillic-ext-wght-normal-EocZY2iu.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-cyrillic-wght-normal-D73BlboJ.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-greek-wght-normal-Bw9x6K1M.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-vietnamese-wght-normal-Bt-aOZkq.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-ext-wght-normal-DBQx-q_a.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:JetBrains Mono Variable;font-style:normal;font-display:swap;font-weight:100 800;src:url(/assets/jetbrains-mono-latin-wght-normal-B9CIFXIH.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@layer reset{*,:before,:after{box-sizing:border-box}:where(body,h1,h2,h3,p,ol,ul,figure,pre,fieldset){margin:0}:where(ol,ul)[class]{padding:0;list-style:none}:where(fieldset){border:0;min-inline-size:0;padding:0}:where(input,select,textarea,button){font:inherit;color:inherit}:where(img,svg,video,iframe){max-inline-size:100%;display:block}}@layer tokens{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--violet-400:oklch(72% .17 285);--violet-500:oklch(60% .22 285);--violet-600:oklch(52% .22 285);--violet-700:oklch(45% .2 285);--amber-400:oklch(78% .15 60);--amber-500:oklch(72% .17 55);--amber-ink:oklch(22% .05 50);--rose-500:oklch(62% .2 350);--rose-400:oklch(74% .15 350);--red-500:oklch(58% .2 28);--red-400:oklch(72% .16 28);--green-500:oklch(58% .14 160);--green-400:oklch(76% .13 160);--ink-950:oklch(15.5% .016 285);--ink-900:oklch(18.5% .018 285);--ink-850:oklch(21.5% .02 285);--ink-800:oklch(25% .022 285);--ink-700:oklch(32% .024 285);--ink-600:oklch(40% .024 285);--ink-400:oklch(70% .02 285);--ink-200:oklch(88% .012 285);--ink-150:oklch(91.5% .01 285);--ink-100:oklch(95% .008 285);--ink-50:oklch(97.5% .006 285);--white:oklch(100% 0 0);--color-bg:var(--lightningcss-light,var(--ink-100))var(--lightningcss-dark,var(--ink-950));--color-surface:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--ink-900));--color-surface-sunken:var(--lightningcss-light,var(--ink-50))var(--lightningcss-dark,var(--ink-950));--color-surface-hover:var(--lightningcss-light,var(--ink-100))var(--lightningcss-dark,var(--ink-850));--color-border:var(--lightningcss-light,var(--ink-150))var(--lightningcss-dark,var(--ink-800));--color-border-strong:var(--lightningcss-light,var(--ink-200))var(--lightningcss-dark,var(--ink-700));--color-text:var(--lightningcss-light,oklch(22% .02 285))var(--lightningcss-dark,oklch(95% .008 285));--color-text-muted:var(--lightningcss-light,oklch(47% .02 285))var(--lightningcss-dark,var(--ink-400));--color-text-subtle:var(--lightningcss-light,oklch(55% .018 285))var(--lightningcss-dark,oklch(62% .02 285));--color-accent:var(--lightningcss-light,var(--violet-600))var(--lightningcss-dark,var(--violet-400));--color-accent-hover:var(--lightningcss-light,var(--violet-700))var(--lightningcss-dark,oklch(78% .14 285));--color-on-accent:var(--lightningcss-light,var(--white))var(--lightningcss-dark,var(--ink-950));--color-accent-soft:color-mix(in oklch, var(--color-accent) 12%, transparent);--color-accent-line:color-mix(in oklch, var(--color-accent) 45%, transparent);--color-anchor:var(--lightningcss-light,var(--amber-500))var(--lightningcss-dark,var(--amber-400));--color-on-anchor:var(--amber-ink);--color-focus:var(--color-accent);--color-status-base:var(--lightningcss-light,var(--green-500))var(--lightningcss-dark,var(--green-400));--color-status-fallback:var(--lightningcss-light,var(--rose-500))var(--lightningcss-dark,var(--rose-400));--color-status-warn:var(--lightningcss-light,var(--red-500))var(--lightningcss-dark,var(--red-400));--color-code-bg:var(--ink-950);--color-code-chrome:var(--ink-900);--color-code-border:var(--ink-800);--color-code-text:oklch(90% .01 285);--color-code-comment:oklch(62% .025 285);--color-code-selector:oklch(83% .12 70);--color-code-prop:oklch(80% .11 250);--color-code-value:oklch(86% .09 160);--color-code-ident:oklch(80% .14 340);--color-code-fn:oklch(82% .11 205);--color-code-num:oklch(85% .12 95);--color-code-at:oklch(78% .15 300);--color-code-punct:oklch(70% .02 285);--color-banner-bg:var(--lightningcss-light,oklch(94% .06 75))var(--lightningcss-dark,oklch(30% .06 60));--color-banner-text:var(--lightningcss-light,oklch(30% .07 55))var(--lightningcss-dark,oklch(92% .05 75));--font-sans:"Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, monospace;--text-2xs:.6875rem;--text-xs:.75rem;--text-s:.8125rem;--text-m:.875rem;--text-field:1rem;--text-l:1.0625rem;--leading-tight:1.2;--leading-normal:1.45;--leading-code:1.65;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--tracking-label:.06em;--tracking-tight:-.015em;--space-3xs:2px;--space-2xs:4px;--space-xs:6px;--space-s:8px;--space-m:12px;--space-l:16px;--space-xl:20px;--space-2xl:28px;--gutter:clamp(var(--space-m), 2.5vw, var(--space-xl));--size-target-min:24px;--size-control:36px;--size-control-small:30px;--size-icon:18px;--size-icon-small:16px;--size-mark:28px;--size-area-picker:9.5rem;--size-mini-cell:7px;--size-check:1.125rem;--size-controls-panel:22rem;--size-controls-bar:3rem;--size-code-panel:32rem;--size-stage-min:26rem;--size-code-min:15rem;--size-toast-max:18rem;--size-tip-max:16rem;--size-swatch:1.5rem;--size-picker:17rem;--size-channel:.875rem;--size-channel-thumb:1.125rem;--size-token-value:2.5rem;--size-token-preview:1.75rem;--size-token-preview-block:1.125rem;--size-token-select:7rem;--size-hint-max:17rem;--border-thin:1px;--border-thick:2px;--focus-width:2px;--focus-offset:2px;--size-field-min:8rem;--size-pattern-art:4.5rem;--size-stage-readout:6.5em;--size-frame-min-inline:240px;--size-frame-min-block:200px;--stroke-icon:1.6;--stroke-art:2;--stroke-handle:1.5;--text-code-inline:.92em;--tab-size-code:2;--opacity-disabled:.5;--opacity-faint:.35;--opacity-detail:.7;--blur-glass:6px;--radius-xs:4px;--radius-s:6px;--radius-m:9px;--radius-l:14px;--radius-pill:999px;--shadow-raised:0 1px 2px oklch(20% .03 285/.08), 0 4px 14px oklch(20% .03 285/.08);--shadow-frame:0 1px 2px oklch(20% .03 285/.06), 0 12px 40px oklch(20% .03 285/.12);--shadow-pop:0 8px 28px oklch(15% .03 285/.28);--shadow-accent:0 1px 0 oklch(100% 0 0/.18) inset, 0 2px 8px color-mix(in oklch, var(--color-accent) 35%, transparent);--z-stage-overlay:1;--z-resize-handle:2;--z-sticky-bar:3;--duration-fast:.12s;--duration-medium:.2s;--ease-out:cubic-bezier(.2, .8, .2, 1);--ease-spring:linear(0, .38 9%, .79 20%, 1.02 31%, 1.08 39%, 1.04 52%, .99 67%, 1)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-contrast:more){:root{--color-border:var(--color-border-strong);--color-text-muted:var(--color-text);--color-text-subtle:var(--color-text)}}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0s;--duration-medium:0s}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}@layer base{html{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:100%;line-height:var(--leading-normal);font-feature-settings:"cv11", "ss01"}body{font-size:var(--text-m)}:where(a){color:var(--color-accent);text-underline-offset:.2em}:where(code,kbd,pre,output){font-family:var(--font-mono);font-variant-ligatures:none}:where(kbd){border:var(--border-thin) solid var(--color-border-strong);border-block-end-width:var(--border-thick);border-radius:var(--radius-xs);padding-inline:var(--space-2xs);font-size:var(--text-2xs)}:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}:where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--color-accent)}::selection{background:color-mix(in oklch, var(--color-accent) 30%, transparent)}}@layer layout{.app{grid-template-columns:minmax(0,1fr);grid-template-areas:"header""stage""controls""code";min-block-size:100dvh;display:grid}.app-header{grid-area:header}.controls{grid-area:controls}.stage-panel{block-size:72dvh;min-block-size:var(--size-stage-min);grid-area:stage}.code-panel{grid-area:code}@media (width>=60rem){.app{grid-template-columns:var(--size-controls-panel) minmax(0, 1fr);grid-template-rows:auto minmax(0, 1fr) minmax(var(--size-code-min), 36%);grid-template-areas:"header header""controls stage""controls code";block-size:100dvh}.controls{scrollbar-width:thin;scrollbar-gutter:stable;scroll-padding-block-start:var(--size-controls-bar);overflow-y:auto}.controls-bar{z-index:var(--z-sticky-bar);position:sticky;inset-block-start:0}.stage-panel{block-size:auto;min-block-size:0}.code-panel{min-block-size:0}}@media (width>=100rem){.app{grid-template-columns:var(--size-controls-panel) minmax(0, 1fr) var(--size-code-panel);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"header header header""controls stage code"}}}@layer components{.button{justify-content:center;align-items:center;gap:var(--space-xs);block-size:var(--size-control);min-inline-size:var(--size-target-min);border:var(--border-thin) solid transparent;border-radius:var(--radius-s);padding-inline:var(--space-m);color:var(--color-text);font-size:var(--text-m);font-weight:var(--weight-medium);line-height:var(--leading-tight);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;background:0 0;text-decoration:none;display:inline-flex}.button:disabled{cursor:not-allowed;opacity:var(--opacity-disabled)}.button--small{block-size:var(--size-control-small);padding-inline:var(--space-s);font-size:var(--text-s)}.button--icon{inline-size:var(--size-control);padding-inline:0}.button--block{inline-size:100%}.button--primary{background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-accent)}.button--secondary{border-color:var(--color-border-strong);background:var(--color-surface)}.button--ghost{color:var(--color-text-muted)}.icon-button{inline-size:var(--size-target-min);block-size:var(--size-target-min);border-radius:var(--radius-xs);color:var(--color-text-subtle);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:inline-grid}.icon-button:disabled{opacity:var(--opacity-faint);cursor:default}.icon-button .icon{inline-size:var(--size-icon-small);block-size:var(--size-icon-small)}.icon{inline-size:var(--size-icon);block-size:var(--size-icon);fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;flex:none}.segmented{gap:var(--space-3xs);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-s);padding:var(--space-3xs);background:var(--color-surface-sunken);display:inline-flex}.segmented button{min-block-size:var(--size-target-min);border-radius:var(--radius-xs);padding-inline:var(--space-s);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);cursor:pointer;background:0 0;border:0}.segmented :where(button)[aria-pressed=true]{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-raised)}@media (hover:hover){.button--primary:hover{background:var(--color-accent-hover)}.button--secondary:hover{border-color:var(--color-accent-line)}.button--ghost:where(:not([aria-disabled=true])):hover,.icon-button:where(:not(:disabled)):hover{background:var(--color-surface-hover);color:var(--color-text)}.segmented :where(button):hover{color:var(--color-text)}}.field{gap:var(--space-2xs);min-inline-size:0;display:grid}.field-label{justify-content:space-between;gap:var(--space-s);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-medium);display:flex}.field-value{color:var(--color-text);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.field-row{grid-template-columns:repeat(auto-fit, minmax(var(--size-field-min), 1fr));gap:var(--space-s);display:grid}.select,.input{inline-size:100%;block-size:var(--size-control);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-s);padding-inline:var(--space-s);background-color:var(--color-surface-sunken);color:var(--color-text);font-size:var(--text-field);transition:border-color var(--duration-fast) ease}.input{font-variant-numeric:tabular-nums}.range{inline-size:100%;margin:0}.check{align-items:start;gap:var(--space-s);cursor:pointer;grid-template-columns:auto minmax(0,1fr);display:grid}.check input{inline-size:var(--size-check);block-size:var(--size-check);cursor:inherit;margin:0;margin-block-start:var(--space-3xs)}.check:has(:disabled){cursor:not-allowed}:where(.check:has(:disabled)) .check-label{color:var(--color-text-subtle)}.check-label{font-weight:var(--weight-medium)}.check-label code{font-size:var(--text-code-inline)}.check-note{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-regular);display:block}@media (hover:hover){.select:hover,.input:hover{border-color:var(--color-accent-line)}}.app-header{align-items:center;gap:clamp(var(--space-s), 2vw, var(--space-l));border-block-end:var(--border-thin) solid var(--color-border);padding-block:var(--space-s);padding-inline:var(--gutter);background:var(--color-surface);display:flex}.brand{align-items:center;gap:var(--space-s);color:var(--color-text);text-decoration:none;display:inline-flex}.brand-mark{inline-size:var(--size-mark);block-size:var(--size-mark)}.brand-mark-target{fill:var(--color-accent)}.brand-mark-anchor{fill:var(--color-anchor)}.brand-mark-link{fill:none;stroke:var(--color-text-subtle);stroke-width:var(--stroke-art);stroke-dasharray:2 2}.brand-name{font-size:clamp(var(--text-m), 3vw + var(--text-2xs) * .35, var(--text-l));white-space:nowrap;font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}.brand-tagline{border-inline-start:var(--border-thin) solid var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-s);padding-inline-start:var(--space-l)}.header-actions{align-items:center;gap:var(--space-2xs);margin-inline-start:auto;display:flex}[data-action=theme] .icon{display:none}[data-pref=system] .icon--system,[data-pref=light] .icon--sun,[data-pref=dark] .icon--moon{display:block}.support-banner{padding-block:var(--space-s);padding-inline:var(--gutter);background:var(--color-banner-bg);color:var(--color-banner-text);font-size:var(--text-s);font-weight:var(--weight-medium);text-align:center;text-wrap:balance;display:none}@supports not (position-anchor:--a){.support-banner{display:block}}@media (width<48rem){.brand-tagline{display:none}}@media (width<30rem){[data-action=share] span{display:none}}.controls{border-inline-end:var(--border-thin) solid var(--color-border);background:var(--color-surface)}.controls-bar{justify-content:space-between;align-items:center;gap:var(--space-s);border-block-end:var(--border-thin) solid var(--color-border);padding-block:var(--space-xs);padding-inline:var(--gutter) calc(var(--gutter) - var(--space-s));background:var(--color-surface);display:flex}.controls-title{color:var(--color-text);font-size:var(--text-s);font-weight:var(--weight-semibold)}.controls-bar-actions{gap:var(--space-3xs);display:flex}.controls-bar-actions [aria-disabled=true]{opacity:var(--opacity-disabled);cursor:default}.control-group{border-block-end:var(--border-thin) solid var(--color-border)}.control-group:last-child{border-block-end:0}.control-summary{justify-content:space-between;align-items:center;gap:var(--space-s);min-block-size:var(--size-control);padding-block:var(--space-xs);padding-inline:var(--gutter);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.control-summary::-webkit-details-marker{display:none}.control-summary:focus-visible{outline-offset:calc(var(--focus-width) * -1)}.control-chevron{inline-size:var(--size-icon-small);block-size:var(--size-icon-small);fill:none;stroke:var(--color-text-subtle);stroke-width:var(--stroke-icon);stroke-linecap:round;stroke-linejoin:round;transition:rotate var(--duration-medium) var(--ease-out);flex:none;rotate:-90deg}:where(.control-group[open]) .control-chevron{rotate:0deg}.control-body{gap:var(--space-m);padding-block:var(--space-2xs) var(--space-l);padding-inline:var(--gutter);grid-template-columns:minmax(0,1fr);display:grid}.control-heading{color:var(--color-text-subtle);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);line-height:var(--leading-tight);text-transform:uppercase}.control-hint{color:var(--color-text-muted);font-size:var(--text-xs);text-wrap:pretty}.pattern-picker{gap:var(--space-s);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.pattern-option{justify-items:center;gap:var(--space-2xs);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-m);padding-block:var(--space-s) var(--space-xs);padding-inline:var(--space-xs);background:var(--color-surface-sunken);cursor:pointer;transition:border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;display:grid;position:relative}.pattern-option input{opacity:0;cursor:inherit;margin:0;position:absolute;inset:0}.pattern-option:has(:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}.pattern-option:has(:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.pattern-art{inline-size:100%;max-inline-size:var(--size-pattern-art);aspect-ratio:64/40}.art-target{fill:var(--color-accent)}.art-anchor{fill:var(--color-anchor)}.art-detail{fill:none;stroke:var(--color-on-accent);stroke-width:var(--stroke-art);stroke-linecap:round;opacity:var(--opacity-detail)}.pattern-label{font-size:var(--text-xs);font-weight:var(--weight-semibold)}@media (prefers-reduced-motion:no-preference){.control-group::details-content{opacity:0;transition:opacity var(--duration-medium) var(--ease-out), content-visibility var(--duration-medium) allow-discrete}.control-group:where([open])::details-content{opacity:1}}@media (hover:hover){:where(.control-summary:hover) .control-heading{color:var(--color-text)}:where(.control-summary:hover) .control-chevron{stroke:var(--color-text)}.pattern-option:where(:not(:has(:checked))):hover{border-color:var(--color-accent-line)}}.area-editor{align-items:center;gap:var(--space-m);grid-template-columns:auto minmax(0,1fr);display:grid}.area-picker{gap:var(--space-2xs);inline-size:var(--size-area-picker);aspect-ratio:1;border-radius:var(--radius-m);padding:var(--space-2xs);background:var(--color-surface-sunken);box-shadow:inset 0 0 0 var(--border-thin) var(--color-border);touch-action:none;grid-template-columns:repeat(3,1fr);display:grid}.area-cell{min-inline-size:var(--size-target-min);min-block-size:var(--size-target-min);border:var(--border-thin) dashed var(--color-border-strong);border-radius:var(--radius-s);background:var(--color-surface);cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;place-items:center;padding:0;display:grid}.area-cell[aria-pressed=true]{border-style:solid;border-color:var(--color-accent);background:color-mix(in oklab, var(--color-accent) 22%, var(--color-surface))}.area-cell[aria-pressed=true]:where([data-draft]){background:var(--color-accent-soft);border-style:dashed}.area-anchor{border-radius:var(--radius-pill);padding-block:var(--space-3xs);padding-inline:var(--space-2xs);background:var(--color-anchor);color:var(--color-on-anchor);font-size:var(--text-2xs);font-weight:var(--weight-semibold);line-height:var(--leading-tight);pointer-events:none}.area-meta{gap:var(--space-s);display:grid}.area-caption{color:var(--color-text-subtle);font-family:var(--font-mono);font-size:var(--text-2xs);margin-block-end:var(--space-3xs);display:block}.area-value{border-radius:var(--radius-s);padding-block:var(--space-xs);padding-inline:var(--space-s);background:var(--color-accent-soft);color:var(--color-accent);font-size:var(--text-s);font-weight:var(--weight-semibold);display:block}.area-value span{white-space:nowrap}@media (hover:hover){.area-cell:where(:not([aria-pressed=true])):hover{border-color:var(--color-accent-line);background:var(--color-surface-hover)}}.fallback-list{gap:var(--space-2xs);display:grid}.fallback-item{align-items:center;gap:var(--space-s);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-m);padding-block:var(--space-xs);padding-inline:var(--space-s);background:var(--color-surface);transition:background-color var(--duration-medium) ease, border-color var(--duration-medium) ease;display:flex}.fallback-item[data-base]{background:var(--color-surface-sunken)}.fallback-item[data-active]{border-color:var(--color-accent);background:var(--color-accent-soft)}.fallback-step{min-inline-size:var(--size-target-min);border-radius:var(--radius-pill);padding-block:var(--space-3xs);padding-inline:var(--space-2xs);background:var(--color-surface-hover);color:var(--color-text-muted);font-size:var(--text-2xs);font-weight:var(--weight-semibold);line-height:var(--leading-tight);text-align:center;font-variant-numeric:tabular-nums;transition:background-color var(--duration-medium) ease, color var(--duration-medium) ease;flex:none}:where(.fallback-item[data-active]) .fallback-step{background:var(--color-accent);color:var(--color-on-accent)}.fallback-text{flex:1;grid-template-columns:minmax(0,1fr);min-inline-size:0;display:grid}.fallback-text code{font-size:var(--text-xs);font-weight:var(--weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:clip}.fallback-hint{color:var(--color-text-muted);font-size:var(--text-2xs);text-overflow:ellipsis;white-space:nowrap;overflow:clip}.fallback-badge{border-radius:var(--radius-pill);padding-block:var(--space-3xs);padding-inline:var(--space-xs);background:var(--color-accent);color:var(--color-on-accent);font-size:var(--text-2xs);font-weight:var(--weight-semibold);line-height:var(--leading-tight);flex:none;display:none}:where(.fallback-item[data-active]) .fallback-badge{display:block}.fallback-actions{flex:none;display:inline-flex}.mini-grid{grid-template-columns:repeat(3, var(--size-mini-cell));gap:var(--space-3xs);flex:none;display:grid}.mini-grid>*{aspect-ratio:1;border-radius:var(--space-3xs);background:var(--color-border-strong)}.mini-grid [data-anchor]{box-shadow:inset 0 0 0 var(--border-thin) var(--color-anchor);background:color-mix(in oklch, var(--color-anchor) 35%, transparent)}.mini-grid [data-on]{background:var(--color-accent)}.fallback-add{gap:var(--space-s);display:flex}.fallback-add .select{flex:1;min-inline-size:0}.stage-panel{grid-template-rows:auto minmax(0,1fr);min-inline-size:0;display:grid}.toolbar{justify-content:space-between;align-items:center;gap:var(--space-s);border-block-end:var(--border-thin) solid var(--color-border);padding-block:var(--space-s);padding-inline:var(--gutter);background:var(--color-surface);flex-wrap:wrap;display:flex}.toolbar-actions{align-items:center;gap:var(--space-2xs);flex-wrap:wrap;display:flex}.status{--status-color:var(--color-status-base);align-items:center;gap:var(--space-s);border:var(--border-thin) solid color-mix(in oklch, var(--status-color) 40%, transparent);border-radius:var(--radius-pill);padding-block:var(--space-2xs);padding-inline:var(--space-s) var(--space-m);background:color-mix(in oklch, var(--status-color) 10%, transparent);font-size:var(--text-s);font-weight:var(--weight-medium);transition:background-color var(--duration-medium) ease, border-color var(--duration-medium) ease;display:inline-flex}.status[data-state=fallback]{--status-color:var(--color-status-fallback)}.status[data-state=warn]{--status-color:var(--color-status-warn)}.status[data-state=closed]{--status-color:var(--color-text-subtle)}.status-dot{inline-size:var(--space-s);block-size:var(--space-s);border-radius:var(--radius-pill);background:var(--status-color);box-shadow:0 0 0 var(--space-2xs) color-mix(in oklch, var(--status-color) 25%, transparent)}.stage-size{min-inline-size:var(--size-stage-readout);color:var(--color-text-subtle);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;text-align:end}.stage-well{min-block-size:0;padding:var(--gutter);place-items:center;display:grid;overflow:clip}.stage-frame{inline-size:var(--frame-width,100%);block-size:var(--frame-height,100%);min-inline-size:var(--size-frame-min-inline);min-block-size:var(--size-frame-min-block);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-l);background:var(--color-surface-sunken);max-block-size:100%;max-inline-size:100%;box-shadow:var(--shadow-frame);position:relative;overflow:clip}.stage-frame[data-resizing]{-webkit-user-select:none;user-select:none}.stage-frame:where([data-resizing]) .stage-iframe{pointer-events:none}.stage-iframe{border:0;block-size:100%;inline-size:100%}.stage-resize{z-index:var(--z-resize-handle);inline-size:var(--size-target-min);block-size:var(--size-target-min);background:var(--color-surface);color:var(--color-text-subtle);cursor:nwse-resize;box-shadow:inset var(--border-thin) var(--border-thin) 0 var(--color-border-strong);border:0;border-start-start-radius:var(--radius-s);place-items:center;padding:0;display:grid;position:absolute;inset-block-end:0;inset-inline-end:0}.stage-resize svg{inline-size:var(--space-m);block-size:var(--space-m);fill:none;stroke:currentColor;stroke-width:var(--stroke-handle);stroke-linecap:round}.stage-hint{z-index:var(--z-stage-overlay);max-inline-size:min(var(--size-hint-max), calc(100% - var(--space-2xl)));border-radius:var(--radius-m);padding-block:var(--space-s);padding-inline:var(--space-m);background:color-mix(in oklch, var(--color-text) 88%, transparent);color:var(--color-bg);font-size:var(--text-s);text-wrap:balance;box-shadow:var(--shadow-pop);pointer-events:none;-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));position:absolute;inset-block-end:var(--space-l);inset-inline-start:var(--space-l)}@media (hover:hover){.stage-resize:hover{color:var(--color-accent)}}.code-panel{border-block-start:var(--border-thin) solid var(--color-code-border);background:var(--color-code-bg);min-inline-size:0;color:var(--color-code-text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;grid-template-rows:auto minmax(0,1fr);display:grid}.code-panel .toolbar{border-block-end-color:var(--color-code-border);background:var(--color-code-chrome)}@media (width>=100rem){.code-panel{border-block-start:0;border-inline-start:var(--border-thin) solid var(--color-code-border)}}.tabs{gap:var(--space-3xs);display:inline-flex}.tab{min-block-size:var(--size-control-small);border-radius:var(--radius-s);padding-inline:var(--space-m);color:var(--color-code-comment);font-size:var(--text-s);font-weight:var(--weight-semibold);cursor:pointer;transition:color var(--duration-fast) ease, background-color var(--duration-fast) ease;background:0 0;border:0}.tab[aria-selected=true]{background:var(--color-code-border);color:var(--color-code-text)}.code{padding-block:var(--space-l);padding-inline:var(--gutter);font-size:var(--text-s);line-height:var(--leading-code);tab-size:var(--tab-size-code);scrollbar-width:thin;scrollbar-color:var(--color-code-border) transparent;overflow:auto}.code:focus-visible{outline-offset:calc(var(--focus-width) * -1)}.tok-comment{color:var(--color-code-comment);font-style:italic}.tok-selector,.tok-tag{color:var(--color-code-selector)}.tok-prop,.tok-attr{color:var(--color-code-prop)}.tok-value,.tok-string{color:var(--color-code-value)}.tok-ident{color:var(--color-code-ident)}.tok-fn{color:var(--color-code-fn)}.tok-num{color:var(--color-code-num)}.tok-at{color:var(--color-code-at)}.tok-punct{color:var(--color-code-punct)}@media (hover:hover){.tab:where(:not([aria-selected=true])):hover{color:var(--color-code-text)}}.toast{inset:auto 0 var(--space-2xl);max-inline-size:var(--size-toast-max);border-radius:var(--radius-s);padding-block:var(--space-xs);padding-inline:var(--space-m);background:var(--color-text);color:var(--color-bg);font-size:var(--text-s);font-weight:var(--weight-medium);text-align:center;box-shadow:var(--shadow-pop);opacity:1;transition:opacity var(--duration-medium) var(--ease-out), translate var(--duration-medium) var(--ease-spring), display var(--duration-medium) allow-discrete, overlay var(--duration-medium) allow-discrete;border:0;margin-inline:auto;translate:0}.toast:not(:popover-open){opacity:0}@starting-style{.toast{opacity:0;translate:0 calc(var(--space-s) * -1)}}.tip{max-inline-size:var(--size-tip-max);border-radius:var(--radius-s);padding-block:var(--space-2xs);padding-inline:var(--space-s);background:var(--color-text);color:var(--color-bg);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-tight);text-align:center;text-wrap:balance;box-shadow:var(--shadow-pop);pointer-events:none;opacity:1;transition:opacity var(--duration-fast) var(--ease-out), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;border:0;margin:0}.tip:not(:popover-open){opacity:0}@starting-style{.tip{opacity:0}}.token-count{border-radius:var(--radius-pill);padding-block:var(--space-3xs);padding-inline:var(--space-xs);background:var(--color-accent-soft);color:var(--color-accent);font-size:var(--text-2xs);letter-spacing:0;text-transform:none;margin-inline-start:var(--space-2xs)}.token-count:empty{display:none}.token-editor{gap:var(--space-l)}.token-editor:where([data-enabled=false])>:not(.token-off),.token-editor:where([data-enabled=true])>.token-off{display:none}.token-group{gap:var(--space-2xs) var(--space-xs);grid-template-columns:minmax(0,1fr) auto auto auto;display:grid}.token-group-title{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-semibold);grid-column:1/-1;margin:0}.token-row{grid-column:1/-1;grid-template-columns:subgrid;min-block-size:var(--size-control);align-items:center;display:grid}.token-row[data-kind=length]{grid-template-areas:"label preview value reset""range range range range"}.token-label{align-items:center;column-gap:var(--space-2xs);grid-template-columns:auto minmax(0,1fr);min-inline-size:0;display:grid}:where(.token-row[data-kind=length]) .token-label{grid-area:label}.token-dot{inline-size:var(--space-xs);block-size:var(--space-xs);border-radius:var(--radius-pill);background:var(--color-accent);visibility:hidden}:where(.token-row[data-changed]) .token-dot{visibility:visible}.token-name{font-size:var(--text-s);font-weight:var(--weight-medium);text-overflow:ellipsis;white-space:nowrap;overflow:clip}.token-var{color:var(--color-text-subtle);font-size:var(--text-2xs);text-overflow:ellipsis;white-space:nowrap;grid-column:2;overflow:clip}.token-reset{grid-area:1/4}:where(.token-row[data-kind=length]) .token-reset{grid-area:reset}:where(.token-row:not([data-changed])) .token-reset{visibility:hidden}.token-swatches{border-radius:var(--radius-s);box-shadow:0 0 0 var(--border-thin) var(--color-border-strong);grid-area:1/3;justify-self:end;display:inline-flex}.swatch{inline-size:var(--size-swatch);block-size:var(--size-target-min);background:var(--swatch);cursor:pointer;border:0;padding:0}.swatch:first-child{border-start-start-radius:var(--radius-s);border-end-start-radius:var(--radius-s)}:is(.swatch:last-child,.swatch:first-child:has(+[hidden])){border-start-end-radius:var(--radius-s);border-end-end-radius:var(--radius-s)}.swatch[aria-expanded=true]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.token-contrast{border-radius:var(--radius-pill);padding-block:var(--space-3xs);padding-inline:var(--space-xs);background:color-mix(in oklch, var(--color-status-base) 14%, transparent);color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-2xs);font-variant-numeric:tabular-nums;white-space:nowrap;grid-area:1/2;justify-self:end}.token-contrast[data-pass=false]{background:color-mix(in oklch, var(--color-status-warn) 16%, transparent)}.token-range{grid-area:range}.token-value{min-inline-size:var(--size-token-value);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-2xs);font-variant-numeric:tabular-nums;text-align:end;grid-area:value}.token-preview{inline-size:var(--size-token-preview);block-size:var(--size-token-preview-block);grid-area:preview;place-items:center;display:grid}.token-preview[data-group=shape]{border:var(--border-thick) solid var(--color-accent);border-radius:min(var(--size), var(--size-token-preview-block));background:var(--color-accent-soft)}.token-preview[data-token=--ui-border-width]{border-width:var(--size);border-radius:var(--radius-xs)}.token-preview[data-group=spacing]{background:linear-gradient(var(--color-accent), var(--color-accent)) center / var(--size) 100% no-repeat;box-shadow:inset 0 0 0 var(--border-thin) var(--color-border-strong)}.token-preview[data-group=type]{color:var(--color-text);font-size:var(--size);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}.token-select{inline-size:auto;min-inline-size:var(--size-token-select);grid-column:2/4}.token-reset-all{justify-self:start}.color-picker{inline-size:var(--size-picker);border:var(--border-thin) solid var(--color-border-strong);border-radius:var(--radius-l);padding:var(--space-m);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-pop);margin:0}.color-picker:popover-open{gap:var(--space-s);display:grid}.picker-head{align-items:center;gap:var(--space-s);display:flex}.picker-swatch{inline-size:var(--size-control);block-size:var(--size-control);border-radius:var(--radius-s);background:var(--picker-color);box-shadow:inset 0 0 0 var(--border-thin) color-mix(in oklch, var(--color-text) 15%, transparent);flex:none}.picker-title{font-size:var(--text-s)}.picker-channel{gap:var(--space-2xs);font-size:var(--text-xs);grid-template-columns:minmax(0,1fr) auto;display:grid}.picker-channel[data-channel=l]{--track:var(--track-l)}.picker-channel[data-channel=c]{--track:var(--track-c)}.picker-channel[data-channel=h]{--track:var(--track-h)}.picker-channel-name{color:var(--color-text-muted);font-weight:var(--weight-medium)}.picker-channel-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.channel{appearance:none;inline-size:100%;block-size:var(--size-channel);border-radius:var(--radius-pill);background:var(--track);box-shadow:inset 0 0 0 var(--border-thin) color-mix(in oklch, var(--color-text) 12%, transparent);cursor:pointer;grid-column:1/-1;margin:0}.channel::-webkit-slider-thumb{appearance:none;inline-size:var(--size-channel-thumb);block-size:var(--size-channel-thumb);border:var(--border-thick) solid var(--white);border-radius:var(--radius-pill);background:var(--picker-color);box-shadow:0 0 0 var(--border-thin) oklch(0% 0 0/.35), var(--shadow-raised)}.channel::-moz-range-thumb{inline-size:var(--size-channel-thumb);block-size:var(--size-channel-thumb);border:var(--border-thick) solid var(--white);border-radius:var(--radius-pill);background:var(--picker-color);box-shadow:0 0 0 var(--border-thin) oklch(0% 0 0/.35), var(--shadow-raised)}.channel::-moz-range-track{background:0 0}.picker-text{font-family:var(--font-mono)}.picker-text[aria-invalid=true]{border-color:var(--color-status-warn)}.picker-note{color:var(--color-text-muted);font-size:var(--text-2xs);text-wrap:pretty;margin:0}.picker-gamut{color:var(--color-status-warn)}}@layer utilities{[hidden]{display:none}.visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:clip}}@layer overrides;@supports (position-anchor:--a){@layer components{.toast{position-anchor:--toast-source;position-area:bottom;position-try-fallbacks:flip-block;margin:0;margin-block-start:var(--space-s);inset:auto}.tip{position-anchor:--tip-source;position-area:top;position-try-fallbacks:flip-block, flip-inline, --tip-left;margin-block-end:var(--space-xs);inset:auto}@position-try --tip-left{position-area:left;margin:0;margin-inline-end:var(--space-xs)}}}@supports not (position-anchor:--a){@layer components{.tip{display:none}}}@supports (position-anchor:--a){@layer components{.color-picker{position-anchor:--picker-source;position-area:right span-bottom;position-try-fallbacks:--picker-below, --picker-above;margin-inline-start:var(--space-s);inset:auto}@position-try --picker-below{position-area:bottom span-left;margin:0;margin-block-start:var(--space-s)}@position-try --picker-above{position-area:top span-left;margin:0;margin-block-end:var(--space-s)}}}