:root{color-scheme:light dark;--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;--bg: oklch(98.6% .004 260);--surface: oklch(100% 0 0);--surface-2: oklch(96.6% .006 260);--ink: oklch(24% .02 265);--ink-muted: oklch(47% .02 265);--line: oklch(90.5% .01 265);--line-strong: oklch(82% .014 265);--accent: oklch(51% .2 272);--accent-ink: oklch(45% .2 272);--accent-soft: oklch(95% .03 272);--on-accent: oklch(100% 0 0);--focus: oklch(55% .22 272);--shadow: 0 1px 2px oklch(30% .02 265 / .06), 0 4px 16px oklch(30% .02 265 / .05);--radius: 10px;--topbar: 60px}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: oklch(17% .012 265);--surface: oklch(21% .014 265);--surface-2: oklch(24.5% .016 265);--ink: oklch(94% .008 265);--ink-muted: oklch(72% .016 265);--line: oklch(31% .016 265);--line-strong: oklch(40% .02 265);--accent: oklch(72% .15 275);--accent-ink: oklch(80% .12 275);--accent-soft: oklch(30% .06 275);--on-accent: oklch(18% .02 265);--focus: oklch(78% .14 275);--shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 4px 16px oklch(0% 0 0 / .25)}}:root[data-theme=dark]{--bg: oklch(17% .012 265);--surface: oklch(21% .014 265);--surface-2: oklch(24.5% .016 265);--ink: oklch(94% .008 265);--ink-muted: oklch(72% .016 265);--line: oklch(31% .016 265);--line-strong: oklch(40% .02 265);--accent: oklch(72% .15 275);--accent-ink: oklch(80% .12 275);--accent-soft: oklch(30% .06 275);--on-accent: oklch(18% .02 265);--focus: oklch(78% .14 275);--shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 4px 16px oklch(0% 0 0 / .25)}*,*:before,*:after{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:100%;line-height:1.55;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);min-height:100vh}a{color:var(--accent-ink);text-underline-offset:.18em}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}code,kbd{font-family:var(--font-mono);font-size:.86em}code{padding:.1em .35em;border-radius:5px;background:var(--surface-2)}kbd{display:inline-block;min-width:1.6em;padding:.05em .4em;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;background:var(--surface);text-align:center;line-height:1.4}.skip{position:absolute;left:1rem;top:-3rem;z-index:10;padding:.5rem .8rem;border-radius:6px;background:var(--accent);color:var(--on-accent)}.skip:focus{top:.6rem}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.25rem;height:var(--topbar);padding:0 1.25rem;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(var(--surface) 0 0) 50% 33% / 100% 1.5px no-repeat,linear-gradient(var(--surface) 0 0) 50% 66% / 100% 1.5px no-repeat,linear-gradient(var(--surface) 0 0) 50% 50% / 1.5px 100% no-repeat,var(--accent)}.brand-sub{color:var(--ink-muted);font-weight:500}.frameworks{display:flex;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);overflow-x:auto;scrollbar-width:none}.framework{padding:.3rem .85rem;border-radius:999px;color:var(--ink-muted);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}.framework:hover{color:var(--ink)}.framework[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}.topbar-end{display:flex;align-items:center;gap:.9rem;margin-left:auto}.topbar-link{color:var(--ink-muted);font-size:.875rem;text-decoration:none}.topbar-link:hover{color:var(--ink)}.icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);cursor:pointer}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.theme-toggle[data-theme=dark] svg circle{fill:currentColor}.theme-toggle[data-theme=system] svg circle{fill:color-mix(in oklch,currentColor 35%,transparent);stroke-dasharray:2 2}.button{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem;font-weight:500;cursor:pointer}.button:hover{border-color:var(--ink-muted)}.button-primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.button-primary:hover{border-color:var(--accent-ink)}.button-quiet{border-color:var(--line);color:var(--ink-muted)}.button:disabled{opacity:.55;cursor:not-allowed}.menu-toggle{display:none}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1560px;margin:0 auto}.sidebar{position:sticky;top:var(--topbar);align-self:start;height:calc(100vh - var(--topbar));padding:1.5rem 1rem 2rem 1.25rem;overflow-y:auto;border-right:1px solid var(--line)}.nav-group+.nav-group{margin-top:1.4rem}.nav-group h2{margin:0 0 .4rem .6rem;color:var(--ink-muted);font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase}.nav-group ul{margin:0;padding:0;list-style:none}.nav-group a{display:block;padding:.32rem .6rem;border-radius:7px;color:var(--ink);font-size:.9rem;text-decoration:none}.nav-group a:hover{background:var(--surface-2)}.nav-group a[aria-current=page]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}.main{min-width:0;padding:2rem 2.25rem 4rem}.main:focus{outline:none}.main h1{margin:.15rem 0 .35rem;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.02em;line-height:1.2}.main h1:focus{outline:none}.eyebrow{margin:0;color:var(--accent-ink);font-size:.8rem;font-weight:600;letter-spacing:.04em}.summary{max-width:62ch;margin:0 0 1.5rem;color:var(--ink-muted);font-size:1.05rem}.stage{display:grid;grid-template-columns:minmax(0,1fr) 260px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.demo-area{min-width:0;padding:1.25rem}.options{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border-left:1px solid var(--line);background:var(--surface-2)}.options h2{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}.options-empty{margin:0;color:var(--ink-muted);font-size:.875rem}.option{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem}.option label{font-weight:500}.option-head{display:flex;justify-content:space-between;gap:.5rem}.option output{color:var(--ink-muted);font-family:var(--font-mono);font-size:.8rem}.option select{width:100%;padding:.4rem .5rem;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit}.option input[type=range]{width:100%;accent-color:var(--accent)}.option-toggle{flex-direction:row;align-items:center;gap:.6rem}.option-toggle input{appearance:none;position:relative;flex:none;width:36px;height:20px;margin:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);cursor:pointer;transition:background .15s}.option-toggle input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-muted);transition:transform .15s}.option-toggle input:checked{border-color:var(--accent);background:var(--accent)}.option-toggle input:checked:after{background:var(--on-accent);transform:translate(16px)}.option-toggle label{cursor:pointer}.color-field{display:flex;align-items:center;gap:.5rem}.color-field input{width:42px;height:30px;padding:2px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface)}.options .button{align-self:flex-start;margin-top:.25rem}@media(prefers-reduced-motion:reduce){.option-toggle input,.option-toggle input:after{transition:none}}.demo-host opengrid-grid{display:block;height:520px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.demo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.9rem;font-size:.875rem}.demo-note{margin:.9rem 0 0;color:var(--ink-muted);font-size:.875rem}.demo-output{margin:.9rem 0 0;padding:.75rem .9rem;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-family:var(--font-mono);font-size:.8rem;white-space:pre-wrap}.demo-output:empty:before{content:attr(data-empty);color:var(--ink-muted);font-family:var(--font)}.demo-host input[type=text]{padding:.42rem .6rem;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem}.about{max-width:72ch;margin:2rem 0}.about p,.about ul{margin:0 0 .9rem}.about li+li{margin-top:.3rem}.about .keys{border-collapse:collapse;margin:0 0 1rem;font-size:.9rem}.about .keys th,.about .keys td{padding:.4rem 1rem .4rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.about .keys th{font-weight:500;white-space:nowrap}.code{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}.sections-list,.files-list{display:flex;gap:.25rem;overflow-x:auto}.sections-list{padding:0 .75rem;border-bottom:1px solid var(--line)}.sections-tab,.files-tab{position:relative;padding:.75rem .85rem;border:0;background:none;color:var(--ink-muted);font:inherit;font-size:.9rem;font-weight:500;white-space:nowrap;cursor:pointer}.sections-tab[aria-selected=true],.files-tab[aria-selected=true]{color:var(--ink)}.sections-tab[aria-selected=true]:after{content:"";position:absolute;inset:auto .6rem -1px;height:2px;border-radius:2px;background:var(--accent)}.files-list{padding:.5rem .75rem 0;background:var(--surface-2);border-bottom:1px solid var(--line)}.files-tab{padding:.45rem .8rem;border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;font-family:var(--font-mono);font-size:.8rem}.files-tab[aria-selected=true]{border-color:var(--line);background:var(--surface);margin-bottom:-1px}.code-wrap{position:relative}.copy{position:absolute;top:.6rem;right:.8rem;padding:.25rem .6rem;font-size:.78rem}.code-block{overflow:auto;max-height:640px}.code-block pre{margin:0;padding:1rem 1.25rem;font-family:var(--font-mono);font-size:.82rem;line-height:1.6;tab-size:2;background:transparent}.shiki,.shiki span{color:var(--shiki-light)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .shiki,:root:not([data-theme=light]) .shiki span{color:var(--shiki-dark)}}:root[data-theme=dark] .shiki,:root[data-theme=dark] .shiki span{color:var(--shiki-dark)}.dataset{padding:1rem 1.25rem 1.25rem;font-size:.9rem}.dataset>p{max-width:80ch;margin:0 0 .75rem}.dataset-meta{color:var(--ink-muted)}.dataset-meta strong{color:var(--ink);font-family:var(--font-mono)}.dataset h3{margin:1.25rem 0 .5rem;font-size:.9rem}.dataset .code-block{border:1px solid var(--line);border-radius:8px;max-height:360px}.preview{overflow:auto;border:1px solid var(--line);border-radius:8px;color:var(--ink-muted)}.preview table{width:100%;border-collapse:collapse;color:var(--ink);font-size:.8rem;white-space:nowrap}.preview caption{padding:.5rem .75rem;color:var(--ink-muted);text-align:left}.preview th,.preview td{padding:.35rem .75rem;border-top:1px solid var(--line);text-align:left}.preview th{background:var(--surface-2);font-family:var(--font-mono);font-weight:600}.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;max-width:1560px;margin:0 auto;padding:1.5rem 2.25rem 2rem;border-top:1px solid var(--line);color:var(--ink-muted);font-size:.85rem}@media(max-width:1180px){.stage{grid-template-columns:minmax(0,1fr)}.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));align-items:end;border-left:0;border-top:1px solid var(--line)}.options h2{grid-column:1 / -1}}@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}.menu-toggle{display:inline-flex}.topbar-link{display:none}.sidebar{position:fixed;inset:var(--topbar) 0 0 0;z-index:4;display:none;height:auto;border-right:0;background:var(--bg)}.sidebar.open{display:block}.main{padding:1.25rem 1rem 3rem}.footer{padding:1.25rem 1rem 2rem}}@media(max-width:640px){.topbar{flex-wrap:wrap;height:auto;padding:.6rem 1rem;gap:.6rem}.frameworks{order:3;width:100%}.sidebar{top:104px}.demo-area{padding:.75rem}.demo-host opengrid-grid{height:460px}}.loading{padding:1rem 1.25rem;color:var(--ink-muted);font-size:.875rem}ul.demo-bar{padding:0;list-style:none}