@font-face{font-family:Geist;src:url(../fonts/Geist-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}@font-face{font-family:Geist Mono;src:url(../fonts/GeistMono-Variable.woff2)format("woff2");font-weight:100 900;font-display:swap}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fff;--fg:oklch(20.5% 0 0);--muted:oklch(48% 0 0);--faint:oklch(62% 0 0);--line:oklch(92% 0 0);--soft:oklch(97.5% 0 0);--max:82rem;--sans:"Geist", ui-sans-serif, system-ui, sans-serif;--mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ease-out:cubic-bezier(.23, 1, .32, 1)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:oklch(14.5% 0 0);--fg:oklch(96% 0 0);--muted:oklch(70% 0 0);--faint:oklch(56% 0 0);--line:oklch(26% 0 0);--soft:oklch(18.5% 0 0)}.shiki span{color:var(--shiki-dark)!important}}:root.light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--fg:oklch(20.5% 0 0);--muted:oklch(48% 0 0);--faint:oklch(62% 0 0);--line:oklch(92% 0 0);--soft:oklch(97.5% 0 0)}:root.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:oklch(14.5% 0 0);--fg:oklch(96% 0 0);--muted:oklch(70% 0 0);--faint:oklch(56% 0 0);--line:oklch(26% 0 0);--soft:oklch(18.5% 0 0)}:where(.light){--background:#fff;--foreground:#0a0a0a;--muted-foreground:#737373;--border:#e5e5e5;--accent:#f5f5f5;--ring:#a1a1a1}:where(.dark){--background:#0a0a0a;--foreground:#fafafa;--muted-foreground:#a1a1a1;--border:#ffffff1a;--accent:#262626;--ring:#737373}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{background:var(--bg);color:var(--muted);font:400 .9375rem/1.7 var(--sans);margin:0}::selection{background:var(--fg);color:var(--bg)}.top{z-index:10;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);grid-template-columns:1fr minmax(0,24rem) 1fr;align-items:center;gap:1rem;height:3.5rem;padding:0 1rem 0 1.125rem;font-size:.875rem;display:grid;position:sticky;top:0}.top-end>nav a,.top-start a{color:var(--muted);align-items:center;gap:.5rem;text-decoration:none;transition:color .15s;display:inline-flex}.top .name,.top-end>nav a:hover,.top-start a:hover{color:var(--fg)}.top .name{white-space:nowrap;font-weight:500}.top-start{justify-self:start;align-items:center;gap:2rem;display:flex}.top-links{gap:1.25rem;display:flex}.top-end{grid-column:-2;justify-self:end}.top-end,.top-end>nav{align-items:center;gap:.25rem;display:flex}.top-end .npmx{height:2rem;box-shadow:inset 0 0 0 1px var(--line);font:500 .75rem/1 var(--mono);white-space:nowrap;border-radius:999px;margin-right:.25rem;padding:0 .625rem;transition:color .15s,box-shadow .15s;overflow:hidden}.top-end .npmx:hover{box-shadow:inset 0 0 0 1px var(--faint)}.top-end .npmx svg{width:13px;height:13px}.top-end .github{height:2rem;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;border-radius:999px;padding:0 .75rem;font-size:.8125rem;font-weight:500;transition:color .15s,box-shadow .15s}.top-end .github:hover{box-shadow:inset 0 0 0 1px var(--faint)}.github-stars{border-left:1px solid var(--line);font:500 .75rem/1 var(--mono);align-items:center;gap:.25rem;margin-left:.125rem;padding-left:.625rem;display:inline-flex}html:not([data-mac]) .kbd-mac,html:not([data-search]) .search-open,html[data-mac] .kbd-other{display:none!important}.search-open{background:var(--soft);width:100%;height:2.25rem;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint);font:inherit;cursor:pointer;border:0;border-radius:8px;align-items:center;gap:.5rem;padding:0 .375rem 0 .75rem;transition:box-shadow .15s,color .15s,scale .15s;display:flex}.search-open:hover{box-shadow:inset 0 0 0 1px var(--faint);color:var(--muted)}.search-open:active{scale:.99}.search-label{text-align:left;flex:1}kbd{box-shadow:inset 0 0 0 1px var(--line);color:var(--faint);font:500 .6875rem/1.6 var(--sans);border-radius:4px;padding:.05rem .375rem}.search,kbd{background:var(--bg)}.search{width:min(36rem,100% - 2rem);max-height:min(28rem,100% - 8rem);box-shadow:0 0 0 1px var(--line),0 24px 48px -16px #0000004d;color:var(--muted);transform-origin:top;transition:opacity .15s ease-out,scale .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;border:0;border-radius:12px;margin:4.5rem auto auto;padding:0;overflow:hidden}.search[open]{flex-direction:column;display:flex}@starting-style{.search[open]{opacity:0;scale:.97}}.search::backdrop{background:#0000004d}.search-field{border-bottom:1px solid var(--line);color:var(--faint);flex:none;align-items:center;gap:.625rem;padding:0 .75rem 0 1rem;display:flex}.search-field input{min-width:0;height:3rem;color:var(--fg);font:.9375rem var(--sans);background:0 0;border:0;outline:none;flex:1}.search-results{flex-direction:column;min-height:0;padding:.375rem;display:flex;overflow-y:auto}.search-results:empty{display:none}.search-results a{color:var(--fg);border-radius:8px;flex-direction:column;padding:.5rem .75rem;scroll-margin:.375rem;text-decoration:none;display:flex}.search-results a[aria-selected=true]{background:var(--soft)}.search-results small{color:var(--faint);font-size:.75rem}.search-close{color:var(--fg);font:500 .9375rem var(--sans);cursor:pointer;background:0 0;border:0;padding:.5rem 0 .5rem .5rem;display:none}@media (width<=40rem){.search{width:calc(100% - 1rem);max-height:calc(100dvh - 1rem);margin-top:.5rem}.search-field kbd{display:none}.search-close{display:block}.search-field input{font-size:1rem}}.search-empty{color:var(--faint);text-align:center;margin:0;padding:1.5rem 1rem;font-size:.875rem}.menu{display:none;position:relative}.menu summary{width:2.5rem;height:2.5rem;color:var(--muted);cursor:pointer;border-radius:6px;place-items:center;list-style:none;display:grid}.menu summary::-webkit-details-marker{display:none}.menu summary:hover,.menu[open] summary{background:var(--soft);color:var(--fg)}.menu-panel{overscroll-behavior:contain;border:1px solid var(--line);background:var(--bg);transform-origin:100% 0;width:calc(min(20rem,100vw - 2rem));max-height:calc(100dvh - 5rem);transition:opacity .2s var(--ease-out),scale .2s var(--ease-out);border-radius:10px;flex-direction:column;display:flex;position:absolute;top:calc(100% + .5rem);right:0;overflow-y:auto;box-shadow:0 12px 32px -12px #00000040}@starting-style{.menu[open] .menu-panel{opacity:0;scale:.97}}.menu-search{flex:none;width:auto;height:2.5rem;margin:.5rem .5rem 0}.menu-panel .rail{border-right:0;border-bottom:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem;padding:.5rem;display:grid}.menu-panel .rail hr{display:none}.menu-panel .rail a{height:2.75rem}.menu-panel .rail-label{opacity:1}.menu-panel .pages{flex:none;padding-bottom:.75rem;overflow:visible}.landing{--column:min(100% - 4rem, 70rem);padding-bottom:3rem}.landing main{margin-top:0}.landing main>:not(.canvas),.landing-hero,.landing>footer{width:var(--column);margin-inline:auto}.landing h2{letter-spacing:-.035em;text-wrap:balance;border:0;margin:0;padding:0;font-size:calc(clamp(1.75rem,1.25rem + 1.5vw,2.5rem));line-height:1.08}.landing-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:2rem 4rem;padding:5rem 0 3rem;display:grid}.landing-hero h1{max-width:13ch;color:var(--fg);letter-spacing:-.045em;text-wrap:balance;margin:0 0 1.25rem;font-size:calc(clamp(2.5rem,1.5rem + 3.5vw,4.25rem));font-weight:600;line-height:1}.landing-hero p{max-width:28rem;margin:0;font-size:1.125rem}.landing-hero .installer{max-width:none;margin:0}.canvas{--canvas:oklch(96.5% 0 0);--card:#fff;--dot:oklch(86% 0 0);margin:0 .75rem;position:relative}@media (prefers-color-scheme:dark){.canvas{--canvas:oklch(17.5% 0 0);--card:oklch(21.5% 0 0);--dot:oklch(30% 0 0)}}.canvas-viewport{background:var(--canvas);height:calc(clamp(34rem,80vh,54rem));box-shadow:inset 0 0 0 1px var(--line);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:24px;position:relative;overflow:hidden}.canvas-viewport[data-dragging]{cursor:grabbing}.canvas-viewport:after{content:"";z-index:1;border-radius:inherit;background:linear-gradient(var(--canvas),transparent 4.5rem calc(100% - 7rem),var(--canvas)),linear-gradient(90deg,var(--canvas),transparent 4rem calc(100% - 4rem),var(--canvas));pointer-events:none;position:absolute;inset:0}.canvas-dots{background:radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 0 0/24px 24px;inset:-24px}.canvas-dots,.canvas-stage{will-change:transform;position:absolute}.canvas-stage{inset:0 auto auto 0}.canvas-hint{z-index:2;background:color-mix(in oklch,var(--bg) 80%,transparent);box-shadow:0 0 0 1px var(--line);color:var(--muted);font:500 .75rem/1.5 var(--mono);pointer-events:none;transition:opacity .3s ease,translate .3s var(--ease-out);border-radius:999px;margin:0;padding:.25rem .75rem;position:absolute;top:1.25rem;left:50%;translate:-50%}.canvas[data-dragged] .canvas-hint{opacity:0;translate:-50% -.5rem}.canvas-bar{z-index:2;background:color-mix(in oklch,var(--bg) 82%,transparent);box-shadow:0 0 0 1px var(--line),0 8px 24px -8px #00000040;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px;align-items:center;gap:.375rem;padding:.3125rem;display:flex;position:absolute;bottom:1rem;left:50%;translate:-50%}.canvas-bar .seg{box-shadow:none;background:0 0;padding:0}.canvas-bar .seg button{border-radius:9px;place-items:center;width:2.25rem;height:2.25rem;padding:0;display:grid}.canvas-bar .seg .indicator{border-radius:9px}.canvas[data-view=list] .canvas-viewport{display:none}.canvas[data-view=list] .grid{width:var(--column);margin-inline:auto}.canvas[data-view=canvas] .grid{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.canvas[data-view=list] .canvas-bar{width:fit-content;box-shadow:0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;margin:1rem auto 0;display:flex;position:static;translate:none}.demo{background:var(--card);width:300px;box-shadow:0 0 0 1px var(--line),0 1px 2px #0000000d,0 16px 32px -16px #0000002e;border-radius:18px;flex-direction:column;padding:0 6px 6px;transition:box-shadow .2s;display:flex;position:absolute}.demo-link{height:2.5rem;color:var(--fg);font:500 .8125rem/1 var(--mono);-webkit-user-drag:none;flex:none;align-items:center;gap:.5rem;padding:0 4.5rem 0 .5rem;text-decoration:none;display:flex}.demo-link .ci,.demo-link span{color:var(--faint)}.demo-link .ci:last-child{opacity:0;transition:opacity .2s ease,translate .2s var(--ease-out);translate:-.25rem .25rem}.demo-link:after{content:"";border-radius:inherit;position:absolute;inset:0}.demo-copy,.demo-md{z-index:1;width:2rem;height:2rem;color:var(--faint);cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease,background-color .15s ease,scale .16s var(--ease-out);background:0 0;border:0;border-radius:8px;place-items:center;display:grid;position:absolute;top:.25rem;right:.375rem}.demo-md{right:2.375rem}.demo-copy svg{grid-area:1/1;transition:opacity .2s cubic-bezier(.2,0,0,1),scale .2s cubic-bezier(.2,0,0,1),filter .2s cubic-bezier(.2,0,0,1)}.demo-copy .check,.demo-copy.copied svg:first-child{opacity:0;filter:blur(4px);scale:.25}.demo-copy.copied .check{opacity:1;filter:none;color:#16a34a;scale:1}.demo-copy:hover,.demo-md:hover{background:var(--soft);color:var(--fg)}.demo-copy:active,.demo-md:active{scale:.96}@media (hover:hover){.demo:hover{box-shadow:0 0 0 1px var(--faint),0 1px 2px #0000000d,0 24px 40px -16px #00000042}.demo:hover .demo-copy,.demo:hover .demo-link .ci:last-child,.demo:hover .demo-md{opacity:1;translate:0}}@media (hover:none){.demo-copy,.demo-md{opacity:1}}.demo-screen{pointer-events:none;border-radius:12px;flex:1;min-height:0;position:relative;overflow:hidden}.demo-page{zoom:var(--z,.82);padding:.25rem .625rem .75rem;font-size:.9375rem;line-height:1.6}.demo-page>:first-child,.demo-page>:first-child>:first-child{margin-top:0}.demo-page>:last-child{margin-bottom:0}.demo-page img{-webkit-user-drag:none}.demo-page :is(.ca-copy,.ca-copy-status){display:none}.demo-page :is(.cch,.cd){box-shadow:none;background:0 0;border:0;border-radius:0;margin:0}.demo-page .cch{--cch-padding:0;padding:0}.demo-page .cd figcaption{background:0 0;padding-inline:0}.demo-page svg.marks{max-width:100%;height:auto}.demo:not(:hover) *,.demo:not(:hover) :after,.demo:not(:hover) :before{animation:none!important}.demo-source{background:var(--card);opacity:0;filter:blur(4px);transition:opacity .2s,filter .2s;position:absolute;inset:0;overflow:hidden}.demo-source pre{box-shadow:none;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:0;margin:0;padding:.875rem 1rem;font-size:.6875rem;line-height:1.6;background:0 0!important}@media (hover:hover){.demo:has(.demo-md:hover) .demo-source{opacity:1;filter:none}}.demo-annotate .ca-mark,.demo-carousel .cc-track,.demo-charts .layer_1_marks text,.demo-charts .mark-rect path,.demo-charts-line .mark-line path,.demo-chips .cp,.demo-code .ck-copy,.demo-code .ck-copy svg,.demo-diff ins,.demo-diff tr,.demo-embed .demo-play,.demo-embed .demo-progress,.demo-github .cgc,.demo-github-references a,.demo-icon .ci,.demo-include .ck,.demo-include .ck~*,.demo-include .demo-directive+p,.demo-lint .term-line,.demo-tabs .ct-panel,.demo-tabs .ct-tab,.demo-zoom img{animation-duration:7s;animation-timing-function:var(--ease-out);animation-iteration-count:infinite;animation-fill-mode:both}.demo-annotate .ca-mark{animation-name:demo-draw;animation-timing-function:cubic-bezier(.77,0,.175,1)}.demo-annotate .ca-mark[data-n="2"]{animation-delay:.3s}.demo-annotate .ca-notes li{animation:demo-rise 7s var(--ease-out) infinite both}.demo-annotate .ca-notes li[data-n="2"]{animation-delay:.3s}@keyframes demo-draw{0%,6%{clip-path:inset(-150%)}10%{clip-path:inset(-150% -150% -150% 100%)}11%{clip-path:inset(-150% 100% -150% -150%)}22%,to{clip-path:inset(-150%)}}@keyframes demo-rise{0%,6%{opacity:1;filter:none;translate:0}10%{opacity:0;filter:blur(4px);translate:0 6px}18%{opacity:0;filter:blur(4px);translate:0 6px}26%,to{opacity:1;filter:none;translate:0}}.demo-diff{--z:.72}.demo-diff tr.cd-del{animation-name:demo-strike}.demo-diff tr.cd-add{animation-name:demo-slide}.demo-diff ins{background-size:200% 100%;animation-name:demo-light}@keyframes demo-strike{0%,12%,to{opacity:1}22%,30%{opacity:.35}}@keyframes demo-slide{0%,20%{opacity:1;translate:0}24%{opacity:0;translate:-12px}34%,to{opacity:1;translate:0}}@keyframes demo-light{0%,30%,60%,to{filter:none}40%{filter:brightness(1.35)saturate(1.3)}}.demo-charts{--z:.62}.demo-charts .mark-rect path{transform-box:fill-box;transform-origin:50% 100%;animation-name:demo-grow}.demo-charts .layer_1_marks text{animation-name:demo-fade}.demo-charts .layer_1_marks text:nth-child(2),.demo-charts .mark-rect path:nth-child(2){animation-delay:90ms}.demo-charts .layer_1_marks text:nth-child(3),.demo-charts .mark-rect path:nth-child(3){animation-delay:.18s}.demo-charts .layer_1_marks text:nth-child(4),.demo-charts .mark-rect path:nth-child(4){animation-delay:.27s}.demo-charts .layer_1_marks text:nth-child(5),.demo-charts .mark-rect path:nth-child(5){animation-delay:.36s}@keyframes demo-grow{0%,6%{scale:1}10%,12%{scale:1 0}24%,to{scale:1}}@keyframes demo-fade{0%,6%{opacity:1}20%,9%{opacity:0}28%,to{opacity:1}}.demo-charts-line .mark-line path{stroke-dasharray:1200;animation-name:demo-line;animation-timing-function:cubic-bezier(.77,0,.175,1)}.demo-charts-line .mark-line+.mark-line path,.demo-charts-line .mark-line:nth-of-type(2) path{animation-delay:.25s}@keyframes demo-line{0%,6%{stroke-dashoffset:0}12%,9%{stroke-dashoffset:1200px}40%,to{stroke-dashoffset:0}}.demo-chips .cp,.demo-icon .ci{animation-name:demo-pop}.demo-chips .cp:nth-of-type(2),.demo-icon .ci:nth-of-type(2){animation-delay:.12s}.demo-chips .cp:nth-of-type(3),.demo-icon .ci:nth-of-type(3){animation-delay:.24s}.demo-chips .cp:nth-of-type(4),.demo-icon .ci:nth-of-type(4){animation-delay:.36s}.demo-icon .ci:nth-of-type(5){animation-delay:.48s}@keyframes demo-pop{0%,6%{opacity:1;filter:none;scale:1}12%,9%{opacity:0;filter:blur(4px);scale:.6}20%,to{opacity:1;filter:none;scale:1}}.demo-icon{--z:1}.demo-icon p{flex-wrap:wrap;align-items:center;gap:.875rem 1rem;margin:0;font-size:0;display:flex}.demo-icon .ci{--comark-icon-size:2.25rem;font-size:1rem}.demo-github .cgc{animation-name:demo-rise}.demo-github .cgc+.cgc{animation-delay:.16s}.demo-github-references a{animation-name:demo-pop}.demo-github-references a:nth-of-type(2){animation-delay:.14s}.demo-github-references a:nth-of-type(3){animation-delay:.28s}.demo-tabs .ct .ct-panel[data-inactive]{display:block}.demo-tabs .ct{display:grid}.demo-tabs .ct-list{grid-area:1/1}.demo-tabs .ct-panel{grid-area:2/1;animation-name:demo-panel}.demo-tabs .ct-panel,.demo-tabs .ct-tab{animation-duration:6s;animation-timing-function:ease}.demo-tabs .ct-tab{animation-name:demo-tab}.demo-tabs .ct-panel:nth-child(3),.demo-tabs .ct-tab:nth-child(2){animation-delay:-4s}.demo-tabs .ct-panel:nth-child(4),.demo-tabs .ct-tab:nth-child(3){animation-delay:-2s}@keyframes demo-tab{0%,31%{background:var(--_comark-background);color:var(--_comark-foreground);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_comark-border),var(--_comark-foreground) 8%)}35%,to{color:var(--_comark-muted);background:0 0;box-shadow:inset 0 0 0 1px #0000}}@keyframes demo-panel{0%,31%{opacity:1;filter:none;translate:0}35%,97%{opacity:0;filter:blur(2px);translate:0 4px}to{opacity:1;filter:none;translate:0}}.demo-zoom .demo-page{place-items:center;height:100%;display:grid}.demo-zoom p{width:100%;margin:0}.demo-zoom img{border-radius:6px;max-width:100%;animation-name:demo-zoom;animation-timing-function:cubic-bezier(.32,.72,0,1);display:block}@keyframes demo-zoom{0%,14%,58%,to{scale:1;box-shadow:0 0 #0000}24%,46%{scale:1.28;box-shadow:0 18px 40px -12px #00000073}}.demo-carousel .cc-track{animation-name:demo-slides;animation-duration:9s;animation-timing-function:cubic-bezier(.77,0,.175,1)}.demo-carousel .cc-count{visibility:hidden}@keyframes demo-slides{0%,28%{translate:0}33%,61%{translate:-100%}66%,94%{translate:-200%}to{translate:0}}.demo-code .ck-bar,.demo-include .ck-bar{opacity:1}.demo-code .ck-copy{animation-name:demo-press}.demo-code .ck-copy svg:first-child{animation-name:demo-icon-out}.demo-code .ck-copy svg:last-child{animation-name:demo-icon-in}@keyframes demo-press{0%,20%,26%,to{scale:1}23%{scale:.9}}@keyframes demo-icon-out{0%,23%,60%,to{opacity:1;filter:none;scale:1}27%,56%{opacity:0;filter:blur(4px);scale:.25}}@keyframes demo-icon-in{0%,23%,60%,to{opacity:0;filter:blur(4px);scale:.25}27%,56%{opacity:1;filter:none;scale:1}}.demo-directive{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;margin:0 0 .875rem;padding:.5rem .625rem;font-size:.8125rem}.demo-directive code{white-space:nowrap;background:0 0;padding:0}.demo-include .ck,.demo-include .demo-directive+p{animation-name:demo-unfold}.demo-include .ck{animation-delay:.15s}@keyframes demo-unfold{0%,6%{opacity:1;clip-path:inset(0)}10%,14%{opacity:0;clip-path:inset(0 0 100%)}26%,to{opacity:1;clip-path:inset(0)}}.demo-player{aspect-ratio:16/9;background:radial-gradient(circle at 30% 20%,oklch(62% .19 25/.55),#0000 60%),radial-gradient(circle at 80% 90%,oklch(55% .15 280/.5),#0000 55%),oklch(22% .02 280);position:relative;overflow:hidden}.demo-play,.demo-player{place-items:center;display:grid}.demo-play{color:#fff;background:#e5484d;border-radius:10px;width:3.25rem;height:2.25rem;padding-left:2px;animation-name:demo-pulse;animation-timing-function:ease-in-out}.demo-progress{transform-origin:0;background:#e5484d;height:3px;animation-name:demo-progress;animation-timing-function:linear;position:absolute;inset:auto 0 0}@keyframes demo-pulse{0%,to{scale:1}50%{scale:1.08}}@keyframes demo-progress{0%{scale:0 1}}.demo-lint{--z:.78}.demo-lint .demo-screen{background:oklch(17% 0 0)}.term{color:oklch(82% 0 0);font:.8125rem/1.55 var(--mono);flex-direction:column;gap:.125rem;display:flex}.term-line{animation-name:demo-print;animation-delay:calc(var(--i) * .14s);display:block}.term-cmd{color:oklch(96% 0 0)}.term-cmd span{color:#16a34a}.term-where{color:oklch(65% 0 0);margin-top:.5rem}.term-where span{color:#f5a524}.term-message code{color:oklch(96% 0 0);background:0 0;padding:0}.term-sum{color:#e5484d;margin-top:.5rem;font-weight:600;display:block}@keyframes demo-print{0%,4%{opacity:1}10%,6%{opacity:0}11%,to{opacity:1}}@media (prefers-reduced-motion:reduce){.demo *,.demo :after,.demo :before{animation:none!important}}.grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.grid li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;position:relative}.grid a{color:var(--muted);flex:1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.125rem 1rem;padding:1.5rem;font-size:.875rem;line-height:1.5;text-decoration:none;transition:background-color .15s;display:grid}.grid .ci{color:var(--faint);grid-row:span 2;transition:color .15s}.grid strong{font:500 .875rem/1.4 var(--mono)}.grid a:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}.grid-copy{width:2rem;height:2rem;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;display:grid;position:absolute;bottom:.75rem;right:.75rem}.grid-copy:hover{background:var(--soft);color:var(--fg)}.grid-copy:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}.grid-copy.copied{color:#16a34a}@media (hover:hover){.grid a:hover{background:var(--soft)}.grid a:hover .ci{color:var(--fg)}}.showcase{margin-top:8rem}.split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:1rem 4rem;margin-bottom:2.5rem;display:grid}.split p{max-width:28rem;margin:0;font-size:1.0625rem}.drop{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:2.5rem 4rem;margin-top:8rem;padding:3rem;display:grid}.drop-pitch img{margin-bottom:1.25rem;display:block}.drop-pitch p{max-width:30rem;margin:1rem 0 0;font-size:1.0625rem}.drop ol{counter-reset:step;flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.drop li{background:var(--bg);box-shadow:0 0 0 1px var(--line);color:var(--fg);counter-increment:step;border-radius:12px;align-items:center;gap:.875rem;padding:.875rem 1rem;display:flex}.drop li:before{content:counter(step);background:var(--fg);width:1.75rem;height:1.75rem;color:var(--bg);border-radius:50%;flex:none;place-items:center;font-size:.8125rem;font-weight:600;display:grid}.landing footer{max-width:none;margin-top:6rem}@media (width<=60rem){.landing{--column:calc(100% - 3rem)}.drop,.landing-hero,.split{grid-template-columns:minmax(0,1fr)}.landing-hero{padding-top:3rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drop,.showcase{margin-top:5rem}.drop{padding:2rem 1.5rem}.canvas{margin:0}.canvas-viewport{height:calc(clamp(30rem,72vh,40rem));box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line);border-radius:0}}@media (width<=36rem){.grid{grid-template-columns:minmax(0,1fr)}.demo{width:300px}}.logo,.rail a,.rail hr{flex:none}.layout{grid-template-columns:auto minmax(0,1fr);display:grid}.sidebar{border-right:1px solid var(--line);grid-template-columns:3.25rem 15rem;height:calc(100dvh - 3.5rem);display:grid;position:sticky;top:3.5rem}.sidebar .pages{grid-column:2}.rail{flex-direction:column;gap:.25rem;padding:.75rem .5rem;display:flex}.sidebar .rail{z-index:5;border-right:1px solid var(--line);background:var(--bg);width:3.25rem;transition:width .15s cubic-bezier(.2,0,0,1),box-shadow .15s;position:absolute;inset:0 auto 0 0;overflow:hidden}.sidebar .rail:hover{width:13.5rem;box-shadow:12px 0 32px -16px #0003}.sidebar .rail:has(:focus-visible){width:13.5rem;box-shadow:12px 0 32px -16px #0003}.sidebar .rail:hover{transition-delay:.15s}.sidebar .rail[data-dismissed]{width:3.25rem;box-shadow:none;transition:none}.rail a{height:2.25rem;color:var(--faint);border-radius:8px;align-items:center;gap:.75rem;padding:0 .5625rem;text-decoration:none;transition:color .15s,background-color .15s;display:flex}.rail a:hover,.rail a[aria-current]{background:var(--soft);color:var(--fg)}.rail .rail-drop,.rail a[aria-current]{box-shadow:inset 0 0 0 1px var(--line)}.rail hr{border:0;border-top:1px solid var(--line);margin:.25rem .5rem}.rail .rail-drop{height:2.75rem;margin-top:auto}.rail-drop .rail-label{flex-direction:column;gap:.0625rem;line-height:1.2;display:flex}.rail-drop strong{color:var(--fg);font-weight:600}.rail-drop .rail-label span{font-size:.6875rem;font-weight:400}.menu-panel .rail .rail-drop{grid-column:1/-1}.rail-label{text-overflow:ellipsis;white-space:nowrap;opacity:0;font-size:.8125rem;font-weight:500;transition:opacity .15s;overflow:hidden}.sidebar .rail:is(:hover,:has(:focus-visible)):not([data-dismissed]) .rail-label{opacity:1}.sidebar .rail:not(:hover):not(:has(:focus-visible)) .rail-label{opacity:0}@media (hover:none){.sidebar .rail:hover{width:3.25rem;box-shadow:none}.sidebar .rail:hover:not(:has(:focus-visible)) .rail-label{opacity:0}}.pages{flex-direction:column;min-height:0;padding:.75rem 1rem 2rem;font-size:.8125rem;display:flex;overflow-y:auto}.pages-title{color:var(--fg);margin:.25rem 0 .5rem;font-size:.875rem;font-weight:600;line-height:1.4}.nav-group{color:var(--fg);margin:1rem 0 .25rem;font-size:.75rem;font-weight:500}.pages-foot{margin-top:auto;padding-top:1.5rem}.pages a.pages-play{box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);align-items:center;gap:.5rem;padding:.5rem .625rem;font-weight:500;display:flex}.pages a.pages-play:hover{background:var(--soft);color:var(--fg)}.pages a:not(.preset-page *){color:var(--muted);border-radius:6px;margin:0 -.5rem;padding:.3rem .5rem;text-decoration:none;transition:color .15s,background-color .15s}.pages a:not(.preset-page *):hover,.pages a[aria-current]{color:var(--fg)}.pager a:hover,.pages a[aria-current]{background:var(--soft)}.page{grid-template-columns:minmax(0,48rem) 10rem;justify-content:center;gap:3rem;min-width:0;padding:0 2rem;display:grid}.toc nav{flex-direction:column;max-height:calc(100dvh - 3.5rem);padding:3.5rem 0 2rem;font-size:.8125rem;display:flex;position:sticky;top:3.5rem;overflow-y:auto}nav>.nav-group:first-child{margin-top:0}.pages-title+.nav-group{margin-top:.25rem}.toc a{color:var(--faint);padding:.25rem 0;text-decoration:none;transition:color .15s}.toc a:hover,.toc a[data-active]{color:var(--fg)}.toc .nav-h3{padding-left:.75rem}.content{min-width:0;padding:3.5rem 0 4rem}.hero .eyebrow{color:var(--faint);margin:0 0 .5rem;font-size:.8125rem}.pager{grid-template-columns:1fr 1fr;gap:1rem;margin-top:4rem;display:grid}.pager a{border:1px solid var(--line);color:var(--fg);border-radius:10px;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;font-weight:500;text-decoration:none;transition:border-color .15s,background-color .15s;display:flex}.pager a:hover{border-color:var(--faint)}.pager small{color:var(--faint);font-size:.75rem;font-weight:400}.pager span{align-items:center;gap:.375rem;display:inline-flex}.pager-next{text-align:right;align-items:flex-end}.pager+footer{margin-top:3rem}.hero p{text-wrap:pretty;max-width:34rem;margin:0;font-size:1.0625rem}.installer{max-width:34rem;margin-top:1.75rem}.installer-bar{flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:.5rem;display:flex}.installer .seg button{align-items:center;gap:.4rem;padding:.3rem .7rem;font-size:.8125rem;display:inline-flex}.install{background:var(--bg);width:100%;min-width:0;height:2.75rem;box-shadow:inset 0 0 0 1px var(--line);color:var(--faint);font:.875rem/1 var(--mono);text-align:left;cursor:pointer;transition:box-shadow .15s ease,scale .16s var(--ease-out);border:0;border-radius:10px;align-items:center;gap:.6rem;padding:0 .375rem 0 1rem;display:flex}.copy:active,.install:active,.play-copy:active,.play-reset:active,.play-share:active,.play-theme-actions button:active{scale:.97}.install:hover{box-shadow:inset 0 0 0 1px var(--faint)}.install code{min-width:0;box-shadow:none;color:var(--fg);font-size:inherit;text-overflow:ellipsis;white-space:nowrap;background:0 0;flex:1;padding:0;overflow:hidden}.install-hint{width:2rem;height:2rem;color:var(--muted);border-radius:6px;place-items:center;transition:color .15s,background-color .15s;display:grid}.install:hover .install-hint{background:var(--soft);color:var(--fg)}.card-copy svg,.install-hint svg,.play-copy svg{transition:opacity .2s var(--ease-out),scale .2s var(--ease-out),filter .2s var(--ease-out);grid-area:1/1}.card-copy .check,.card-copy.copied svg:not(.check),.install-hint .check,.install.copied .install-hint svg:not(.check),.play-copy .check,.play-copy.copied svg:not(.check){opacity:0;filter:blur(2px);scale:.25}.card-copy.copied .check,.install.copied .install-hint .check,.play-copy.copied .check{opacity:1;filter:none;color:#16a34a;scale:1}.hero h1{color:var(--fg);letter-spacing:-.025em;margin:0 0 .5rem;font-size:2rem;font-weight:600;line-height:1.15}.actions{flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;display:flex}.button{height:2.5rem;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);transition:box-shadow .15s ease,background-color .15s ease,scale .16s var(--ease-out);border-radius:8px;align-items:center;gap:.5rem;padding:0 1rem;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.button.primary{background:var(--fg);box-shadow:none;color:var(--bg)}.button:active{scale:.97}@media (hover:hover){.button:hover{box-shadow:inset 0 0 0 1px var(--faint)}.button.primary:hover{background:color-mix(in oklch,var(--fg) 86%,var(--bg));box-shadow:none}}.studio{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 24px 48px -24px #00000038;border-radius:16px;overflow:hidden}.studio-bar{border-bottom:1px solid var(--line);background:var(--soft);grid-template-columns:1fr auto auto auto;align-items:center;gap:.75rem;height:2.875rem;padding:0 .375rem 0 1rem;display:grid}.studio-file{color:var(--fg);font:500 .75rem/1 var(--mono);align-items:center;gap:.5rem;display:inline-flex}.studio-file .ci,.studio-steps li{color:var(--faint)}.studio-steps{counter-reset:step;gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.studio-steps li{counter-increment:step;border-radius:999px;align-items:center;gap:.4rem;height:1.75rem;padding:0 .625rem 0 .375rem;font-size:.75rem;font-weight:500;transition:color .2s,background-color .2s,box-shadow .2s;display:inline-flex}.studio-steps li:before{content:counter(step);width:1.125rem;height:1.125rem;box-shadow:inset 0 0 0 1px var(--line);font:600 .625rem/1 var(--mono);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;transition:background-color .2s,color .2s,box-shadow .2s;display:grid}.studio-steps [aria-current]{background:var(--bg);box-shadow:0 0 0 1px var(--line);color:var(--fg)}.studio-steps [aria-current]:before,.studio-steps [data-done]:before,.studio:not([data-phase]) .studio-steps li:before{background:var(--fg);box-shadow:none;color:var(--bg)}.studio-steps [data-done],.studio:not([data-phase]) .studio-steps li{color:var(--muted)}.studio[data-phase=check] .studio-steps [aria-current]:before{background:#e5484d}.studio-bar>:last-child{justify-self:end;align-items:center;display:flex}.studio-replay{color:var(--faint);font:500 .75rem/1 var(--sans);cursor:pointer;transition:color .15s ease,scale .16s var(--ease-out);background:0 0;border:0;border-radius:8px;align-items:center;gap:.375rem;padding:.5rem .625rem;display:inline-flex}.studio-replay svg{width:13px;height:13px}.studio-replay:hover{color:var(--fg)}.studio-replay:active{scale:.96}.studio-steps{justify-self:center}a.window-play{color:var(--faint);align-items:center;gap:.375rem;padding:.5rem .625rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:color .15s;display:inline-flex}a.window-play:hover{color:var(--fg)}.studio-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);display:grid}.studio-source{border-right:1px solid var(--line);background:var(--soft);flex-direction:column;min-width:0;display:flex}.studio-code{flex:1;min-width:0;padding:1.25rem 0 1.5rem;font-size:.8125rem;line-height:1.7;display:flex;overflow-x:auto}.studio-gutter{color:var(--faint);font:.8125rem/1.7 var(--mono);font-variant-numeric:tabular-nums;text-align:right;-webkit-user-select:none;user-select:none;opacity:.6;flex-direction:column;flex:none;padding:0 .75rem 0 1rem;transition:color .2s;display:flex}.studio-code pre{box-shadow:none;border-radius:0;flex:1;margin:0;padding:0 1.25rem 0 0;background:0 0!important}.studio-code pre,.studio-code pre code{font-size:inherit;line-height:inherit}.studio-code pre .line{width:fit-content;min-height:1lh;display:block!important}.studio-fix{border-radius:3px}.studio-fix del{display:none}.studio-fix del,.studio-fix ins{text-decoration:none}.studio-problems{border-top:1px solid var(--line);min-height:4.25rem;padding:.75rem 1rem;font-size:.8125rem;line-height:1.5;display:grid}.studio-problems p{transition:opacity .25s ease,translate .35s var(--ease-out),filter .25s ease;grid-area:1/1;align-items:start;gap:.625rem;margin:0;display:flex}.studio-issue{color:var(--fg)}.studio-issue strong{font-family:var(--mono);font-size:.75rem;font-weight:500}.studio-dot{background:#e5484d;border-radius:50%;flex:none;width:.5rem;height:.5rem;margin-top:.45rem;box-shadow:0 0 0 3px oklch(62.5565% .19334 23.0261/.22)}.studio-ok{color:#16a34a;font-weight:500;align-items:center!important}.studio-issue,.studio:is([data-phase=waiting],[data-phase=write],[data-phase=check]) .studio-ok,.studio:not([data-phase]) .studio-ok,.studio[data-phase]:is([data-phase=fix],[data-phase=render]) .studio-issue{opacity:0;filter:blur(2px);pointer-events:none;translate:0 .5rem}.studio:not([data-phase]) .studio-issue,.studio[data-phase=check] .studio-issue{opacity:1;filter:none;pointer-events:auto;translate:0}.studio-page{background:var(--bg);min-width:0;padding:1.75rem}.studio-page>div{max-width:34rem;margin-inline:auto}.studio-block>:first-child{margin-top:0}.studio-block+.studio-block{margin-top:1.5rem}.studio-block>:last-child{margin-bottom:0}.studio-fixed,.studio-ghost{display:none}.studio:not([data-phase]) .studio-dot{background:#16a34a;box-shadow:0 0 0 3px oklch(62.7052% .169912 149.214/.22)}.studio:not([data-phase]) .studio-fixed{color:#16a34a;margin-right:.5rem;font-weight:500;display:inline}.studio:not([data-phase]) .studio-fix ins{background:oklch(62.7052% .169912 149.214/.18)}.studio:not([data-phase]) .studio-gutter [data-fix]{color:#16a34a;opacity:1}.studio[data-phase=waiting] :is(.studio-code .line,.studio-block,.studio-gutter span){visibility:hidden}.studio[data-phase]:not([data-phase=waiting]) .studio-code .line{animation:type var(--t) steps(var(--n),end) var(--at) both}.studio[data-phase]:not([data-phase=waiting]) .studio-block{animation:block-in .6s var(--ease-out) var(--at) both}.studio[data-phase]:not([data-phase=waiting]) :is(.ca-mark,.ca-arrow){animation:draw .7s cubic-bezier(.77,0,.175,1) var(--at,0s) both}.studio[data-phase]:not([data-phase=waiting]) .ca-notes li{animation:block-in .5s var(--ease-out) var(--at,0s) both}.studio:is([data-phase=waiting],[data-phase=write],[data-phase=check],[data-phase=fix]) [data-fixed]{visibility:hidden;animation:none!important}.studio:is([data-phase=write],[data-phase=check],[data-phase=fix]) .studio-fix del{display:inline}.studio:is([data-phase=waiting],[data-phase=write],[data-phase=check]) .studio-fix ins{display:none}.studio[data-phase]:not([data-phase=waiting]) .studio-ghost{left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:2;animation:block-in .4s var(--ease-out) var(--at,0s) both;background:oklch(62.5565% .19334 23.0261/.1);border:2px dashed #e5484d;border-radius:6px;transition:left .7s cubic-bezier(.77,0,.175,1),border-color .3s,background-color .3s,opacity .3s;display:block;position:absolute}.studio[data-phase=check] .studio-fix del{-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:3px;-webkit-text-decoration:underline wavy #e5484d;text-decoration:underline wavy #e5484d}.studio[data-phase=check] .studio-gutter [data-fix]{color:#e5484d;opacity:1}.studio[data-phase=check] .studio-ghost{animation:.6s ease-in-out 2 nudge}.studio:is([data-phase=fix],[data-phase=render]) .studio-fix ins{animation:type .36s steps(var(--n),end) both,settle 1.6s ease .6s both;background:oklch(62.7052% .169912 149.214/.18);display:inline-block}.studio:is([data-phase=fix],[data-phase=render]) .studio-ghost{left:var(--to-x);background:oklch(62.7052% .169912 149.214/.1);border-color:#16a34a}.studio[data-phase=render] .studio-ghost{opacity:0}.studio[data-phase=render] [data-fixed]{visibility:visible}.studio[data-phase=render] .ca-mark[data-fixed]{animation:.7s cubic-bezier(.77,0,.175,1) both draw}.studio[data-phase=render] .ca-notes li[data-fixed]{animation:block-in .5s var(--ease-out) .25s both}@keyframes type{0%{clip-path:inset(0 100% 0 0)}}@keyframes block-in{0%{opacity:0;filter:blur(4px);translate:0 8px}}@keyframes draw{0%{clip-path:inset(-150% 100% -150% -150%)}to{clip-path:inset(-150%)}}@keyframes nudge{25%{translate:-3px}75%{translate:3px}}@keyframes settle{to{background:0 0}}@media (width<=60rem){.studio-body{grid-template-columns:minmax(0,1fr)}.studio-source{border-right:0;border-bottom:1px solid var(--line)}.studio-steps li{padding-right:.375rem}.studio-steps li:not([aria-current]){gap:0;font-size:0}}@media (width<=36rem){.studio-bar{grid-template-columns:auto 1fr auto;padding-left:.75rem}.studio-file,.studio-replay span,.window-play span{display:none}.studio-steps{justify-self:start}.studio-page{padding:1.25rem}}@media (hover:none){.seg button{padding:.45rem .85rem}}@media (width<=75rem){.page{grid-template-columns:minmax(0,48rem)}.toc{display:none}}@media (width<=60rem){.top{grid-template-columns:minmax(0,1fr) auto}.search-open{width:2.5rem;height:2.5rem;box-shadow:none;background:0 0;justify-content:center;padding:0}.github-label,.search-open :is(.search-label,kbd),.top-end .npmx span,.top-links,.sidebar,.top-end>nav>.link{display:none}.top-end .npmx{width:2.5rem;box-shadow:none;justify-content:center;padding:0}.top-end .github{box-shadow:none;padding:0 .625rem}.github-stars{border-left:0;padding-left:0}.layout{grid-template-columns:minmax(0,1fr)}.menu{display:block}.page{padding:0 1.5rem}}main{margin-top:3rem}main>:first-child{margin-top:0}li,p{text-wrap:pretty}a:where(:not(.ce-card,.ce a,.cp)){color:var(--fg);text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);text-underline-offset:.2em;text-decoration-thickness:1px;transition:text-decoration-color .15s}a:where(:not(.ce-card,.ce a,.cp)):hover{-webkit-text-decoration-color:var(--fg);text-decoration-color:var(--fg)}strong{color:var(--fg);font-weight:500}h2{border-top:1px solid var(--line);letter-spacing:-.01em;margin:3.5rem 0 1rem;padding-top:1.25rem;font-size:1.125rem;font-weight:600;line-height:1.3}h2,h3{color:var(--fg);scroll-margin-top:4.5rem}h3{font:500 .875rem/1.5 var(--mono);margin:2.25rem 0 .5rem}code{color:var(--fg);font:.8125rem/1.6 var(--mono)}:not(pre)>code{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);overflow-wrap:break-word;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px;padding:.1em .35em}.table-scroll{margin:1rem 0;overflow-x:auto}.table-scroll>table:not(.cd-code){margin:0}pre{box-shadow:inset 0 0 0 1px var(--line);border-radius:6px;margin:1.25rem 0;padding:.9rem 1rem;position:relative;overflow-x:auto;background:var(--soft)!important}pre .line{display:inline!important}table:not(.cd-code){border-collapse:collapse;width:100%;margin:1rem 0;font-size:.875rem}th{text-align:left;padding:.6rem 1rem .6rem 0;font-weight:500}.cd{--cd-font:var(--mono)}main thead:not(:has(th:nth-child(3))) th:not(.example-preview th){display:none}td:not(.cd-code td){border-top:1px solid var(--line);vertical-align:baseline;padding:.6rem 1rem .6rem 0}.matrix th,tr:last-child td:not(.cd-code td){border-bottom:1px solid var(--line)}td:first-child:not(.cd-code td){white-space:nowrap;width:9rem}td:first-child code{box-shadow:none;background:0 0;padding:0}.matrix{margin:1.25rem 0;overflow-x:auto}.matrix table{table-layout:fixed;min-width:40rem;margin:0}.matrix th{font-family:var(--mono);vertical-align:bottom;padding:.75rem;font-size:.8125rem}.matrix th a{color:var(--fg);text-decoration:none}.matrix tbody td{color:var(--muted);vertical-align:top;padding:.75rem}.matrix tbody td:first-child{width:14rem;color:var(--fg);white-space:normal;padding-left:0;font-weight:500}.matrix th:first-child{width:14rem}.matrix td:first-child em{color:var(--faint);margin-top:.15rem;font-size:.8125rem;font-style:normal;font-weight:400;display:block}.matrix td:nth-child(2),.matrix th:nth-child(2){background:var(--soft);color:var(--fg)}.matrix tr:has(>td:nth-child(2):empty) td{border-top:none;padding-top:1.5rem;padding-bottom:.5rem}.matrix tr:has(>td:nth-child(2):empty) td:first-child{color:var(--faint);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}.matrix tr:has(>td:nth-child(2):empty) strong{font-weight:500}@media (width<=40rem){.matrix table{min-width:32rem}.matrix tbody td:first-child,.matrix th:first-child{z-index:1;background:var(--bg);width:8.5rem;padding-right:.75rem;position:sticky;left:0}}blockquote{border-left:2px solid var(--line);margin:1.25rem 0;padding-left:1rem}.examples{margin:2.5rem 0 1rem;position:relative}.tablist{gap:1.25rem;margin-bottom:.75rem;display:flex}.tablist button{color:var(--faint);font:500 .875rem/1.5 var(--sans);cursor:pointer;background:0 0;border:0;border-bottom:1px solid #0000;padding:.5rem 0;transition:color .15s,border-color .15s}.tablist [aria-selected=true],.tablist button:hover{color:var(--fg)}.tablist [aria-selected=true]{border-bottom-color:var(--fg)}.seg,.tablist{position:relative}.indicator{pointer-events:none;transition:transform .2s var(--ease-out),width .2s var(--ease-out);position:absolute;left:0}.indicator[data-still]{transition:none}.tablist .indicator{background:var(--fg);height:1px;bottom:0}.tablist[data-indicator] [aria-selected=true]{border-bottom-color:#0000}.seg .indicator{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 1px 2px #0000000f;border-radius:6px;top:2px;bottom:2px}.seg button{z-index:1;position:relative}.seg[data-indicator] [aria-pressed=true]{box-shadow:none;background:0 0}.example{margin:1.25rem 0}.example-bar{justify-content:flex-end;margin-bottom:.5rem;display:flex}.examples .example{margin:0}.examples .example-bar{margin:0;position:absolute;top:.3rem;right:0}.example-body{box-shadow:0 0 0 1px var(--line);border:1px solid #0000;border-radius:6px}.seg{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;padding:2px;display:inline-flex}.seg button{color:var(--muted);font:500 .75rem/1.5 var(--sans);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:.2rem .65rem}.seg [aria-pressed=true]{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 1px 2px #0000000f;color:var(--fg)}.example-preview{padding:1.75rem 1.5rem}.example-preview>:is(.ca,.cd,.ce,.ce-card,.cch){margin:0}.example-body:has(>.example-preview:not([hidden])>:is(.cch,.ce-card,.cd):last-child:not(:not(style,script)~*)){box-shadow:none}.example-preview:has(>:is(.cch,.ce-card,.cd):last-child:not(:not(style,script)~*)){padding:0}.example-code pre{box-shadow:none;border-radius:6px;margin:0;background:0 0!important}[hidden]{display:none!important}.ca{--ca-note-size:1.2rem;--ca-label-size:1.6rem;font-size:.875rem}.ca-label{color:var(--fg);font-weight:500;line-height:1}footer{border-top:1px solid var(--line);max-width:52rem;color:var(--faint);flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;margin-top:6rem;padding-top:1.5rem;font-size:.8125rem;display:flex}footer a{color:var(--muted)}.enter{animation:.6s cubic-bezier(.23,1,.32,1) both enter;animation-delay:calc(var(--i,0) * 70ms)}@keyframes enter{0%{opacity:0;filter:blur(4px);transform:translateY(8px)}}[data-navigated] .enter{animation:.12s ease-out both fade}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.enter,[data-navigated] .enter{animation:none}.card-copy svg,.indicator,.install-hint svg,.play-confirm,.play-copy svg,.search,.sidebar .rail{transition:none}.menu-panel{transition:opacity .15s ease-out}@starting-style{.menu[open] .menu-panel{scale:1}}.copy:active,.install:active,.play-confirm button:active,.play-copy:active,.play-reset:active,.play-share:active,.play-theme-actions button:active{scale:1}}@media (width<=40rem){.examples .example-bar{margin-bottom:.5rem;position:static}.tablist{scrollbar-width:none;overflow-x:auto}.tablist button{flex:none}}main img{max-width:100%;height:auto}.example-bar{align-items:center;gap:.75rem}.example-play{align-items:center;gap:.35rem;font-size:.75rem;font-weight:500;transition:color .15s;display:inline-flex;color:var(--faint)!important;text-decoration:none!important}.example-play:hover{color:var(--fg)!important}.play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:calc(100dvh - 3.5rem);display:grid}.play-editor{border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex;position:relative}.play-bar{border-bottom:1px solid var(--line);height:2.75rem;color:var(--faint);flex:none;justify-content:space-between;align-items:center;padding:0 .5rem;font-size:.8125rem;display:flex}.play-share,.play-theme-actions button{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font:500 .75rem/1.5 var(--sans);cursor:pointer;transition:color .15s ease,scale .16s var(--ease-out);border:0;border-radius:6px;padding:.25rem .625rem}.play-share:hover,.play-theme-actions button:hover{color:var(--fg)}.play-tools{z-index:1;background:var(--soft);border-radius:8px;align-items:center;gap:.25rem;padding:2px;display:flex;position:absolute;top:3.25rem;right:1rem}.play-copy,.play-reset{background:var(--bg);width:1.625rem;height:1.625rem;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);cursor:pointer;transition:color .15s ease,scale .16s var(--ease-out);border:0;border-radius:6px;place-items:center;padding:0;display:grid}.play-copy svg,.play-reset svg{width:.875rem;height:.875rem}.play-copy:hover,.play-reset:hover{color:var(--fg)}.play-reset[hidden],.play-theme-actions [hidden],.play-tools[hidden]{display:none}.play-confirm{background:var(--bg);width:min(22rem,100% - 2rem);box-shadow:0 0 0 1px var(--line),0 24px 48px -16px #0000004d;color:var(--muted);transition:opacity .15s ease-out,scale .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;border:0;border-radius:12px;padding:1.25rem}@starting-style{.play-confirm[open]{opacity:0;scale:.97}}.play-confirm::backdrop{background:#0000004d}.play-confirm h2{letter-spacing:normal;color:var(--fg);font:600 .9375rem/1.4 var(--sans);border:0;margin:0 0 .25rem;padding:0}.play-confirm p{text-wrap:pretty;margin:0 0 1rem;font-size:.8125rem}.play-confirm div{justify-content:flex-end;gap:.5rem;display:flex}.play-confirm button{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);font:500 .8125rem/1.5 var(--sans);cursor:pointer;transition:scale .16s var(--ease-out);border:0;border-radius:6px;padding:.375rem .75rem}.play-confirm button[value=reset]{background:var(--fg);box-shadow:none;color:var(--bg)}.play-confirm button:active{scale:.97}.play-code{background:var(--soft);flex:1;min-height:0;display:grid;overflow:auto}.play-code>*,.play-paint pre{grid-area:1/1}.play-paint{pointer-events:none;display:grid}.play-code textarea,.play-paint pre{box-shadow:none;color:var(--fg);font:.8125rem/1.65 var(--mono);tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;border:0;border-radius:0;margin:0;padding:1rem;overflow:visible;background:0 0!important}.play-paint code{font:inherit}.play-code textarea{color:#0000;caret-color:var(--fg);resize:none;outline:none;overflow:hidden}.play-code textarea::selection{background:color-mix(in oklch,var(--fg) 18%,transparent)}.play-theme{background:var(--soft);min-height:0;color:var(--fg);flex-direction:column;flex:1;gap:1rem;padding:1rem;font-size:.8125rem;display:flex;overflow-y:auto}.play-theme[hidden]{display:none}.play-theme-bar,.play-theme-field{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.play-theme-actions{gap:.375rem;display:flex}.play-theme label,.play-theme-field>span{font-weight:500}.play-tokens{grid-template-columns:minmax(0,9.5rem) 6.5rem minmax(0,1fr);align-items:center;gap:.5rem .75rem;display:grid}.play-tokens label{flex-direction:column;line-height:1.35;display:flex}.play-tokens code{box-shadow:none;color:var(--faint);font:.6875rem/1.4 var(--mono);text-overflow:ellipsis;white-space:nowrap;background:0 0;padding:0;overflow:hidden}.play-theme input[type=color],.play-theme input[type=text],.play-theme textarea{background:var(--bg);height:1.75rem;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg);border:0;border-radius:6px;margin:0}.play-theme input[type=text]{min-width:0;font:.75rem/1 var(--mono);padding:0 .5rem}.play-theme input::-moz-placeholder{color:var(--faint)}.play-theme textarea::-moz-placeholder{color:var(--faint)}.play-theme input::placeholder,.play-theme textarea::placeholder{color:var(--faint)}.play-theme input[type=color]{cursor:pointer;width:100%;padding:3px}.play-theme input[type=color]::-webkit-color-swatch-wrapper{padding:0}.play-theme input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.play-theme input[type=color]::-moz-color-swatch{border:0;border-radius:4px}.play-theme input[type=range]{width:100%;accent-color:var(--fg);margin:0}.play-theme :is(input,textarea):focus-visible{outline:2px solid var(--fg);outline-offset:1px}.play-theme-extra{flex-direction:column;align-items:stretch;gap:.375rem}.play-theme-extra p{color:var(--muted);margin:0;font-size:.75rem}.play-theme textarea{height:auto;min-height:8rem;font:.75rem/1.6 var(--mono);resize:vertical;padding:.5rem}.play-issues{border-top:1px solid var(--line);color:oklch(55% .15 50);flex:none;max-height:30%;margin:0;padding:.75rem 1rem;font-size:.8125rem;list-style:none;overflow-y:auto}.play-issues li+li{margin-top:.375rem}.play-preview{background:var(--bg);border:0;width:100%;height:100%}@media (width<=60rem){.play{grid-template-rows:50% 50%;grid-template-columns:minmax(0,1fr)}.play-editor{border-right:0;border-bottom:1px solid var(--line)}}.pages .nav-group{align-items:center;gap:.5rem;display:flex}.pages .nav-group .ci,.preset-player{color:var(--faint)}.sidebar:has(.presets){grid-template-columns:3.25rem 21rem}.presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;display:grid}.preset{box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;transition:box-shadow .15s,scale .15s;position:relative}.preset:hover{box-shadow:inset 0 0 0 1px var(--faint)}.preset:active{scale:.98}.preset:has(a[aria-current]){box-shadow:inset 0 0 0 1.5px var(--fg)}.preset-thumb{background:var(--bg);pointer-events:none;border-radius:9px 9px 0 0;height:6rem;margin:1px 1px 0;overflow:hidden}.preset-page{transform-origin:0 0;width:40rem;padding:1.5rem;transform:scale(.23)}.preset-page>:first-child{margin-top:0}.preset-player{aspect-ratio:16/9;background:var(--soft);place-items:center;display:grid}.pages .preset>a{text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--line);background:0 0;border-radius:0 0 10px 10px;margin:0;padding:.3rem .625rem .375rem;font-size:.75rem;display:block;overflow:hidden}.pages .preset>a:after{content:"";border-radius:10px;position:absolute;inset:0}.pages .preset>a:focus-visible{outline:none}.preset:has(a:focus-visible){outline:2px solid var(--fg);outline-offset:2px}@media (pointer:coarse){.seg button,.studio-replay,.example-play,.play-confirm button,.play-share,.play-theme input:is([type=text],[type=color]),.play-theme-actions button{min-height:2.5rem}.play-copy,.play-reset{width:2.5rem;height:2.5rem}.copy{padding:.5rem .75rem}.top-end :is(.npmx,.github){height:2.5rem}.play-code textarea,.play-paint pre,.play-theme :is(input,textarea){font-size:1rem}}.tablist[data-overflow]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),#0000)}.app{display:contents}