.lab{border-top:1px solid var(--line)}.lab-header{justify-content:space-between;align-items:center;height:59px;display:flex}.tabs{gap:23px;display:flex;position:relative}.tabs button{color:#79796f;padding:8px 0;font-size:12px;transition:color .14s;position:relative}.tabs button[aria-pressed=true]{color:#ecece6}.tab-highlight{background:var(--accent);pointer-events:none;height:1px;position:absolute;bottom:0;left:0}.workbench{display:block}.canvas{background:#10100f;border:1px solid #0000;height:360px;position:relative;overflow:hidden}.canvas[data-mode=bounds]{border:1px dashed #ffffff42}.canvas-label{color:#6b6b60;font:12px var(--mono);align-items:center;gap:12px;display:flex;position:absolute;top:22px;left:25px}.corner-mark{color:#aaa99a;font-size:16px}.canvas-bottom{font:12px var(--mono);color:#63635b;justify-content:space-between;align-items:center;gap:10px;display:flex;position:absolute;bottom:26px;left:26px;right:26px}.canvas-bottom>div{gap:14px;display:flex}.canvas-bottom button{color:#aaa99a;align-items:center;gap:5px;padding:0;font-size:12px;display:flex}.canvas-bottom svg{width:10px;height:10px}.scene-title{font:italic 160px var(--serif);letter-spacing:-12px;color:#ffffff04;pointer-events:none;position:absolute;top:10%;right:10%}.toolbar{background:#262620;border:1px solid #ffffff1e;border-radius:16px;align-items:center;gap:7px;padding:10px;display:flex;position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);box-shadow:0 14px 30px #0003,inset 0 1px #ffffff08}.toolbar button{color:#a5a59a;min-width:57px;transition:transform .16s var(--ease-out), background .14s, color .14s;border-radius:8px;flex-direction:column;align-items:center;gap:9px;padding:13px 12px 8px;display:flex}.toolbar button svg{width:22px;height:22px;transition:transform .16s var(--ease-out)}.toolbar button kbd{font:12px var(--mono);color:#646458}.toolbar button[data-active]{background:var(--accent-soft);color:var(--accent)}.toolbar button[data-active] kbd{color:var(--accent)}.toolbar button:active{transform:scale(.95)}.toolbar-divider{background:#ffffff12;width:1px;height:28px;margin:0 1px}.anchor{width:82px;height:38px;font:12px var(--mono);cursor:grab;user-select:none;touch-action:none;background:#272721;border:1px solid #ffffff30;border-radius:7px;justify-content:center;align-items:center;gap:10px;transition:border-color .14s,background .14s;display:flex;position:absolute}.anchor svg{color:#73736a;width:11px;height:11px}.anchor-dot{background:var(--accent);width:4px;height:4px;transition:transform .16s var(--ease-out);border-radius:50%}.anchor[data-active]{border-color:var(--accent-line)}.anchor[data-dragging]{cursor:grabbing;border-color:var(--accent);background:#332b3d}.anchor[data-dragging] .anchor-dot{transform:scale(1.6)}.content-trigger{background:#282821;border:1px solid #ffffff25;border-radius:7px;align-items:center;gap:14px;padding:13px 16px;font-size:12px;display:flex;position:absolute;top:61%;left:50%;transform:translate(-50%,-50%)}.content-trigger span{color:var(--accent);transition:transform .16s var(--ease-out)}.telemetry{display:none}.telemetry>span:first-child{align-items:center;gap:8px;display:flex}.status-dot{background:#4a4a43;border-radius:50%;width:4px;height:4px;display:inline-block}.telemetry[data-active] .status-dot{background:var(--accent)}.controls{grid-template-columns:.8fr 1fr 1.2fr 1.1fr;gap:34px;margin:0;padding:15px 0 30px;display:grid}.control-heading{flex-wrap:wrap;grid-column:1/-1;align-items:baseline;gap:16px;margin-bottom:17px;display:flex}.control-heading .eyebrow{width:100%;margin-bottom:0}.control-heading>span{font:12px var(--mono);color:#69695e;margin-left:auto}.control-group{min-width:0}.tune-disclosure{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.tune-disclosure>summary{padding:20px 0;font-size:12px}.tune-disclosure>summary>span{color:#b6b6a4;margin:0}.tune-disclosure>summary:after{margin-left:auto}.lab-foot{display:none!important}.lab{margin-bottom:105px}.switches{flex-direction:column;gap:17px;padding:2px 14px 0 0;display:flex}.switches label{cursor:pointer;color:#b2b2a5;justify-content:space-between;align-items:center;font-size:12px;display:flex;position:relative}.switches input:not(.motion-control input){opacity:0;width:30px;height:18px;margin:0;position:absolute;right:0}.switch{border:1px solid #77776a;border-radius:20px;width:27px;height:15px;transition:background .14s,border-color .14s;position:relative}.switch:after{content:"";width:7px;height:7px;transition:transform .16s var(--ease-out), background .14s;background:#868679;border-radius:50%;position:absolute;top:3px;left:3px}.switches input:checked+.switch{background:var(--accent);border-color:var(--accent)}.switches input:checked+.switch:after{background:#292132;transform:translate(11px)}.switches input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:4px}.switches .motion-control{font:12px var(--mono);color:#626257;justify-content:start;gap:7px;margin-top:3px}.motion-control input{accent-color:var(--accent);width:10px;height:10px;margin:0}.slider-label,.angle-fields label{color:#aaa99d;justify-content:space-between;align-items:center;font-size:12px;display:flex}output{font:12px var(--mono);color:#d0d0bc}input[type=range]{appearance:none;background:linear-gradient(to right, var(--accent) 0 var(--range-fill,50%), #3f3f34 var(--range-fill,50%) 100%);cursor:pointer;border:0;border-radius:0;width:100%;height:2px;margin:17px 0 11px;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);width:10px;height:10px;box-shadow:0 0 0 1px var(--accent-line);transition:transform .12s var(--ease-out);border:2px solid #10100f;border-radius:50%}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #10100f;border-radius:50%;width:7px;height:7px}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3)}.neck-labels{font:12px var(--mono);color:#58584d;justify-content:space-between;display:flex}.neck-control{margin-bottom:31px}.selects{grid-template-columns:1fr 1fr;gap:15px;margin-top:26px;display:grid}.selects label{color:#6f6f61;flex-direction:column;gap:8px;font-size:12px;display:flex}select{color:#b6b6a7;cursor:pointer;background:#10100f;border:0;border-bottom:1px solid #ffffff25;border-radius:0;width:100%;padding:6px 0 7px;font-size:12px}.preview-motion{font:12px var(--mono);color:#929284;align-items:center;gap:7px;margin-top:20px;padding:0;display:flex}.preview-motion svg{width:10px;height:10px}.preview-motion span{color:var(--accent);transition:transform .16s var(--ease-out);margin-left:auto}.angle-row{align-items:start;gap:16px;display:flex}.compass{cursor:grab;touch-action:none;border:1px solid #ffffff25;border-radius:50%;flex-shrink:0;width:73px;height:73px;position:relative}.compass[data-dragging]{cursor:grabbing;border-color:var(--accent)}.dial-ticks{background:repeating-conic-gradient(#626255 0deg 1deg,#0000 1deg 30deg);border-radius:50%;position:absolute;inset:5px;mask:radial-gradient(#0000 65%,#000 68%)}.dial-north{font:12px var(--mono);color:#7d7d6c;position:absolute;top:7px;left:50%;transform:translate(-50%)}#compass-needle{background:var(--accent);transform-origin:0;width:22px;height:1px;position:absolute;top:36px;left:36px;transform:rotate(-90deg)}#compass-needle:after{content:"";border-top:1px solid var(--accent);border-right:1px solid var(--accent);width:5px;height:5px;position:absolute;top:-2px;right:-1px;transform:rotate(45deg)}.compass-center{background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;top:34.5px;left:34.5px}.angle-fields{flex:1;min-width:0;padding-top:3px}.tiny-label{font:12px/1.8 var(--mono);color:#555548}.lab-foot{font:12px var(--mono);color:#505047;border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:15px;padding:14px 0;display:flex}#text-control{grid-column:1/-1;max-width:650px;margin-top:0}#text-control textarea{color:#b4b4a5;border:0;border-bottom:1px solid var(--line);width:100%;font:12px/1.8 var(--mono);resize:vertical;background:0 0;min-height:90px;max-height:200px;padding:12px 0;display:block}#long-sample{margin-top:12px}.playground-tips{--tg-background:#f2f1ed;--tg-color:#28282b;--tg-border:#ffffff20;--tg-radius:10px;--tg-padding:10px 13px;--tg-font:500 12px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--tg-max-width:280px;--tg-max-height:230px;--tg-fuse-color:var(--accent);--tg-shadow:0 6px 24px #0003;z-index:100}.geometry-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.geometry-overlay ellipse{stroke:#ffffff15;stroke-width:1px;stroke-dasharray:2 6;fill:none}#desired-vector{stroke:var(--accent-line);stroke-dasharray:3 4;stroke-width:1px;fill:none}#actual-vector{stroke:#ffffff28;stroke-width:1px;fill:none}#guide-origin{fill:var(--accent);stroke:none}.edge-glow{pointer-events:none;background:var(--accent);transition:opacity .14s;position:absolute}.edge-top,.edge-bottom{height:1px;left:20px;right:20px}.edge-top{opacity:var(--edge-top,0);top:0}.edge-bottom{opacity:var(--edge-bottom,0);bottom:0}.edge-left,.edge-right{width:1px;top:20px;bottom:20px}.edge-left{opacity:var(--edge-left,0);left:0}.edge-right{opacity:var(--edge-right,0);right:0}.canvas:not([data-mode=bounds]) .edge-glow{opacity:0}@media (hover:hover) and (pointer:fine){.toolbar button:hover{color:var(--accent);transform:translateY(-3px)}.toolbar button:hover svg{transform:rotate(-4deg)}.anchor:hover{border-color:var(--accent)}.preview-motion:hover span,.content-trigger:hover span{transform:translate(2px,-2px)}}@media (width<=900px){.controls{grid-template-columns:1fr 1fr;gap:34px 40px}.control-heading>span{width:100%;margin-left:0}.angle-row{align-items:center}}@media (width<=720px){.lab-header{height:54px}.tabs{gap:18px}.tabs button{font-size:12px}.canvas{height:360px}.canvas-label{font-size:12px;top:20px;left:0}.canvas-bottom{font-size:12px;left:0;right:0}.canvas-bottom button{font-size:12px}.canvas-bottom>div{gap:10px}.toolbar{border-radius:13px;gap:4px;padding:7px}.toolbar button{min-width:43px;padding:12px 8px 7px}.toolbar button svg{width:20px;height:20px}.telemetry{font-size:12px}.controls{gap:30px 28px;padding-top:37px}.control-heading{gap:12px;margin-bottom:6px}.control-heading>span{font-size:12px}.switches{gap:17px;padding-right:0}.switches label,.slider-label,.angle-fields label{font-size:12px}.angle-row{gap:11px}.compass{width:60px;height:60px}#compass-needle{width:18px;top:29px;left:29px}.compass-center{top:27.5px;left:27.5px}.dial-north{top:5px}.angle-fields .tiny-label{max-width:80px;display:block}.lab-foot{font-size:12px}.desktop-only{display:none}.lab-foot .text-button{font-size:12px}.playground-tips{--tg-font:500 12px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--tg-max-width:255px}}@media (prefers-reduced-motion:reduce){.toolbar button:hover,.toolbar button:hover svg{transform:none}}:root[data-reduced] .toolbar button:hover,:root[data-reduced] .toolbar button:hover svg{transform:none}.usage,.reference{max-width:860px;margin:0 auto 100px;scroll-margin-top:35px}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px;display:flex}.section-heading .eyebrow{margin-bottom:13px}.code-tabs{border-bottom:1px solid var(--line);flex-wrap:wrap;gap:21px;display:flex;position:relative}.code-tabs button{color:#a0a09a;font:12px var(--mono);border-bottom:1px solid #0000;flex-shrink:0;padding:14px 0;transition:color .14s,border-color .14s}.code-tabs button[aria-pressed=true]{color:#f0f0ec}.code-tab-highlight{background:var(--accent);transform-origin:0;pointer-events:none;width:1px;height:1px;position:absolute;top:0;left:0}.code-meta{font:12px var(--mono);letter-spacing:.7px;color:#999994;justify-content:space-between;padding:18px 0 10px;display:flex}.code-meta>span:first-child{align-items:center;gap:7px;display:flex}.code-meta .status-dot{background:var(--accent);width:3px;height:3px}pre{box-sizing:border-box;font:13px/1.8 var(--mono);tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;border-bottom:1px solid var(--line);color:#ddddda;margin:0;padding:15px 0 23px;overflow:clip}#usage-code{overflow-wrap:anywhere;display:block;white-space:pre-wrap!important;width:100%!important}#usage-code>[aria-hidden=true]:not(br){max-width:100%}.code-keyword{color:#919183}.code-string{color:#d1bdec}.code-comment{color:#92928b}.code-value{color:var(--code-accent)}.usage-note{color:var(--muted);margin:20px 0;font-size:14px;line-height:1.9}.usage-note code,.reference code{font-family:var(--mono);color:#b8b8a7;font-size:.94em}details{border-top:1px solid var(--line)}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;align-items:center;gap:20px;padding:22px 0;font-size:12px;list-style:none;display:flex}summary::-webkit-details-marker{display:none}summary>span{color:#6f6f61;margin-left:auto;font-size:12px}summary:after{content:"+";font:17px var(--mono);color:#aaa994;width:14px;transition:transform .18s var(--ease-out);display:inline-block}details[open] summary:after{transform:rotate(45deg)}details p{color:#848475;max-width:700px;margin:0 30px 24px 0;font-size:12px;line-height:1.9}.details-content{overflow:hidden}@media (hover:hover) and (pointer:fine){.code-tabs button:hover{color:#ecece4}summary:hover:after{color:var(--accent)}summary:hover code{color:#e0e0d2}}@media (width<=720px){.usage,.reference{margin-bottom:65px}.section-heading{align-items:end;margin-bottom:24px}.section-heading .eyebrow,.section-heading .text-button{font-size:12px}.code-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px;display:grid}.code-tabs button{font-size:12px}pre{font-size:13px}.code-meta,.usage-note{font-size:12px}summary{gap:12px;padding:20px 0}summary code,summary>span{font-size:12px}details p{margin-right:0;font-size:12px}}:root{color-scheme:dark;color:#eeeeea;font-synthesis:none;--muted:#a0a09b;--line:#ffffff1b;--accent:#bca4ee;--accent-ink:var(--accent);--code-accent:var(--accent);--accent-soft:#bca4ee1a;--accent-line:#bca4ee70;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-glide:cubic-bezier(.77, 0, .175, 1);--mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;--serif:Georgia, "Times New Roman", serif;background:#10100f;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,summary,textarea{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;background:0 0;border:0}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:20px;height:20px}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:#10100f}.icon-library{width:0;height:0;position:absolute;overflow:hidden}.site{width:min(100% - 90px,1180px);margin:auto}.skip-link{background:var(--accent);color:#10100f;z-index:1001;padding:12px;position:fixed;top:12px;left:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}.header{height:86px;font:12px var(--mono);justify-content:space-between;align-items:center;display:flex}.wordmark{letter-spacing:-.8px;align-items:center;font:650 17px -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:inline-flex}.brand-icon{width:37px;height:37px;color:var(--accent);margin-right:6px}.brand-icon svg{width:100%;height:100%}.brand-body{fill:currentColor;stroke:none}.brand-trail{fill:none;stroke:currentColor;stroke-width:3px}.header-note{color:#777770;margin-left:10px;font-size:12px}.header nav{align-items:center;gap:20px;display:flex}.project-link{isolation:isolate;background:var(--accent);color:#eeeeea;font:12px var(--mono);transition:color .16s, border-color .16s, transform .16s var(--ease-out);border:1px solid #ffffff30;border-radius:5px;align-items:center;gap:9px;padding:10px 12px;display:inline-flex;position:relative;overflow:hidden}.project-link:before,.project-link:after{content:"";z-index:-1;transition:transform .25s var(--ease-glide);background:#1b1c1b;position:absolute;inset:0 50% 0 0}.project-link:after{inset:0 0 0 50%}.project-link-icon{color:#eeeeea;width:16px;height:16px;transition:color .16s, transform .25s var(--ease-out)}.project-link-label{color:inherit!important}.project-link:active{transform:scale(.96)}.project-link:focus-visible{color:#15180c;outline:2px solid var(--accent);outline-offset:4px}.project-link:focus-visible:before,.project-link:focus-visible:after{transition:none;transform:translateY(105%)}.project-link:focus-visible .project-link-icon{color:inherit}footer nav{align-items:center;gap:16px;display:flex}.header nav a:not(.project-link){color:#bbbbaf}.header nav a:not(.project-link) span{color:#6a6a61;transition:transform .16s var(--ease-out), color .14s;display:inline-block}.intro{padding:25px 0 38px;position:relative}.eyebrow{font:12px var(--mono);letter-spacing:1.1px;color:var(--muted);margin:0 0 18px}.intro-kicker{color:#6d6d62;justify-content:space-between;margin-bottom:9px;display:flex}h1{letter-spacing:-.075em;align-items:baseline;gap:.1em;margin:0;font-size:clamp(110px,14vw,180px);font-weight:450;line-height:.95;display:flex}h1 em{color:var(--accent);font:italic 1.1em/.92 var(--serif);letter-spacing:-.075em;font-weight:400}.hero-tip{display:inline-block}.hero-tooltips{--tg-background:#f2f1ed;--tg-color:#28282b;--tg-border:transparent;--tg-font:500 12px/1.5 system-ui, sans-serif;--tg-padding:9px 13px;--tg-radius:12px;--tg-shadow:0 8px 24px #0002}.hero-join{width:.46em;height:.46em;color:var(--accent);align-self:center;margin-left:auto;margin-right:20px;transform:rotate(-18deg)}.hero-join svg{width:100%;height:100%;transition:transform .24s var(--ease-out)}.intro-baseline{justify-content:space-between;align-items:end;gap:30px;margin-top:27px;display:flex}.intro-baseline>p{color:#b4b4a9;margin:0;font-size:13px;line-height:1.5}.intro-caption{font:12px/1.8 var(--mono);color:#717168;text-align:right}.install{font:12px var(--mono);border-bottom:1px solid #ffffff40;align-items:center;gap:16px;padding:13px 0;transition:color .14s,border-color .14s;display:flex}.install svg{color:#828278;width:13px;height:13px;transition:transform .16s var(--ease-out)}.text-button{font:12px var(--mono);color:#85857d;align-items:center;gap:8px;padding:0;transition:color .14s;display:inline-flex}.text-button svg{width:12px;height:12px}.text-button span{display:inline-block}h2{letter-spacing:-1.8px;margin:0;font-size:clamp(28px,4vw,45px);font-weight:450;line-height:1.15}h2 em{font-family:var(--serif);font-size:1.1em;font-weight:400}.facts{font:12px var(--mono);color:#64645b;gap:25px;margin:22px 0 110px;display:flex}.facts span+span:before{content:"/";color:#3f3f38;margin-right:25px}footer{border-top:1px solid var(--line);margin-top:100px;padding:38px 0 26px}.footer-mark{letter-spacing:-.06em;align-items:center;gap:.06em;font-size:clamp(60px,11vw,130px);line-height:1;display:flex}.footer-mark em{font-family:var(--serif);color:var(--accent);font-weight:400}.footer-mark svg{width:.6em;height:.6em;color:var(--accent);transition:transform .24s var(--ease-out);margin-left:auto}footer>div{font:12px var(--mono);color:#707066;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;margin-top:24px;display:flex}[data-copied] svg{color:var(--accent)}#announcement{opacity:0;background:var(--accent);color:#10100f;font:12px var(--mono);pointer-events:none;z-index:200;transition:opacity .16s var(--ease-out), transform .16s var(--ease-out);padding:11px 17px;position:fixed;bottom:24px;left:50%;transform:translate(-50%,6px)}#announcement[data-visible]{opacity:1;transform:translate(-50%)}.reveal{opacity:0;transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);transition-delay:var(--reveal-delay,0s);transform:translateY(14px)}.reveal[data-visible],.reveal:focus-within{opacity:1;transform:none}@media (hover:hover) and (pointer:fine){.project-link:hover{color:#15180c;border-color:var(--accent)}.project-link:hover:before{transform:translate(-105%)}.project-link:hover:after{transform:translate(105%)}.project-link:hover .project-link-icon{color:#15180c;transform:rotate(-12deg)}.project-link:hover .header nav a:not(.project-link):hover>span{color:var(--accent);transform:translate(2px,-2px)}.intro:hover .hero-join svg{transform:translate(7px)rotate(-6deg)}.install:hover{border-color:var(--accent);color:var(--accent)}.install:hover svg{transform:translateY(-2px)}.text-button:hover{color:#eeeeea}.footer-mark:hover svg{transform:translate(6px)rotate(-12deg)}}@media (width<=720px){.header nav{gap:10px}.project-link{gap:4px;padding:6px 7px;font-size:12px}.site{width:calc(100% - 36px)}.header{height:75px}.header-note{display:none}.header nav{gap:10px;font-size:12px}.wordmark{font-size:15px}.brand-icon{width:29px;height:29px}.intro{padding:24px 0 30px}h1{gap:.08em;font-size:clamp(75px,20.6vw,140px)}.hero-join{display:none}.intro-kicker{letter-spacing:.7px;margin-bottom:16px;font-size:12px}.intro-baseline{flex-wrap:wrap;gap:21px 20px;margin-top:22px}.intro-baseline>p{font-size:12px}.intro-caption{display:none}.install{gap:10px;padding:10px 0;font-size:12px}.facts{flex-wrap:wrap;gap:12px 16px;margin:24px 0 69px;font-size:12px}.facts span+span:before{margin-right:16px}h2{letter-spacing:-1.2px;font-size:31px}footer{margin-top:66px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}:root[data-reduced] *,:root[data-reduced] :before,:root[data-reduced] :after{transition:none!important;animation:none!important}:root[data-reduced] .reveal{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.intro:hover .hero-join svg,.footer-mark:hover svg{transform:none}}:root[data-reduced] .intro:hover .hero-join svg,:root[data-reduced] .footer-mark:hover svg{transform:none}@media (width<=720px){.header .project-link-label,.header .header .project-link{padding:8px}}.project-link-icon:has(use[href=\#i-npm]){width:24px}.hero-tooltips .tg-measure{min-width:min(170px,100vw - 24px)}.hero-tooltips .tg-content{text-align:center}.lab-actions{align-items:center;gap:22px;display:flex}.watch-demo{font:12px var(--mono);color:#78786c;align-items:center;gap:7px;padding:0;transition:color .14s;display:flex}.watch-demo svg{width:11px;height:11px}.watch-demo[aria-pressed=true]{color:var(--accent)}.watch-demo:disabled{opacity:.35;cursor:default}.reel-heading{z-index:2;pointer-events:none;display:none;position:absolute;top:26px;left:26px;right:26px}.reel-index{font:12px var(--mono);letter-spacing:1.4px;color:#9b81b7;margin-bottom:11px}.reel-heading strong{font:italic 28px/1.2 var(--serif);letter-spacing:-.8px;max-width:350px;font-weight:400}#reel-detail{font:12px var(--mono);color:#6b6b5c;margin-top:10px}.lab[data-playing] .reel-heading{display:none}.lab[data-playing] .canvas-label,.lab[data-playing] .canvas-bottom,.lab[data-playing] .scene-title{visibility:hidden}.lab[data-playing] .toolbar{top:57%}.reel-cursor{pointer-events:none;z-index:5;transition:transform .35s var(--ease-glide);position:absolute;top:0;left:0}.reel-cursor svg{width:22px;height:27px;fill:var(--accent);stroke:#10100f;stroke-width:1.6px}.reel-cursor>span{border:1px solid var(--accent-line);opacity:0;width:18px;height:18px;transition:opacity .16s, transform .16s var(--ease-out);border-radius:50%;position:absolute;top:-6px;left:-6px;transform:scale(.8)}.reel-cursor[data-pressed]{transition:none}.reel-cursor[data-pressed]>span{opacity:1;transform:scale(1.2)}.reel-fuse{background:var(--accent);transform-origin:0;pointer-events:none;border-radius:2px;height:2px;position:absolute}.reel-controls{z-index:6;grid-template-columns:repeat(4,1fr);gap:10px;width:132px;display:grid;position:absolute;bottom:23px;left:50%;right:auto;transform:translate(-50%)}.reel-controls button{color:#575748;padding:10px 0;font-size:0;transition:color .14s;position:relative}.reel-controls button>span{opacity:.6;padding-right:8px;font-size:12px}.reel-controls button i{background:#ffffff18;height:1px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.reel-controls button i:after{content:"";background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:0;position:absolute;inset:0}.reel-controls button[aria-pressed=true]{color:#e2d5f1}@media (hover:hover) and (pointer:fine){.watch-demo:hover,.reel-controls button:hover{color:#eeeede}}@media (width<=720px){.lab-actions{gap:13px}.lab-actions #reset{padding:5px 0;font-size:0;display:flex}.lab-actions #reset span{font-size:13px}.watch-demo{gap:5px;font-size:12px}.watch-demo svg{width:9px;height:9px}.reel-controls{bottom:19px}.reel-controls button{font-size:0}}@media (prefers-reduced-motion:reduce){.reel-cursor{display:none}}:root[data-reduced] .reel-cursor{display:none}:root{--page:#10100f;--ink:#eeeeea;--hero:#bca4ee;background:var(--page);color:var(--ink)}h1 em,.hero-join,.footer-mark em,.footer-mark svg{color:var(--hero)}.theme-toggle{isolation:isolate;background:var(--accent);width:38px;height:38px;color:var(--ink);transition:color .16s, border-color .16s, transform .16s var(--ease-out);border:1px solid #ffffff30;border-radius:5px;flex-shrink:0;place-items:center;padding:9px;display:grid;position:relative;overflow:hidden}.theme-toggle:before,.theme-toggle:after{content:"";z-index:-1;transition:transform .25s var(--ease-glide);background:#1b1c1b;position:absolute;inset:0 50% 0 0}.theme-toggle:after{inset:0 0 0 50%}.theme-toggle svg{width:16px;height:16px;transition:opacity .16s, transform .2s var(--ease-out);grid-area:1/1}.theme-moon{opacity:0;transform:rotate(-45deg)scale(.85)}[data-theme=light] .theme-sun{opacity:0;transform:rotate(45deg)scale(.85)}[data-theme=light] .theme-moon{opacity:1;transform:none}[data-theme=light] .theme-toggle{color:var(--accent-ink);border-color:#292b2935}[data-theme=light] .theme-toggle:before,[data-theme=light] .theme-toggle:after{background:#fffefa}.theme-toggle:active{transform:scale(.96)}.theme-toggle:focus-visible{outline-color:var(--accent-ink)}::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation:none}::view-transition-new(root){z-index:2}::view-transition-old(root){z-index:1}::view-transition-group(root){animation-duration:0s}:root[data-theme=light]{color-scheme:light;--page:#f5f4ef;--ink:#292b29;--hero:#8f69bd;--accent:#dbcaf5;--accent-ink:#62428b;--code-accent:var(--accent-ink);--accent-soft:#dbcaf566;--accent-line:#a080c4;--muted:#666963;--line:#292b2926}[data-theme=light] .canvas[data-mode=bounds]{border-color:#292b2945}[data-theme=light] .toolbar,[data-theme=light] .anchor,[data-theme=light] .content-trigger{color:#353a32;background:#fffefa;border-color:#292b292b}[data-theme=light] .toolbar button{color:#60665b}[data-theme=light] .toolbar button[data-active]{background:var(--accent);color:var(--accent-ink)}[data-theme=light] .toolbar button kbd,[data-theme=light] .toolbar button[data-active] kbd{color:#5e6b5d}[data-theme=light] .anchor[data-active]{border-color:var(--accent)}[data-theme=light] .anchor[data-dragging]{background:#eee3f8}[data-theme=light] .toolbar-divider,[data-theme=light] .reel-controls button i{background:#292b2920}[data-theme=light] .playground-tips,[data-theme=light] .hero-tooltips{--tg-background:#28282b;--tg-color:#f2f1ed;--tg-border:transparent;--tg-fuse-color:#bca4ee}[data-theme=light] .project-link{background:var(--accent);color:#323a31;border-color:#292b2935}[data-theme=light] .project-link:before,[data-theme=light] .project-link:after{background:#fffefa}[data-theme=light] .header nav a:not(.project-link),[data-theme=light] .intro-baseline>p,[data-theme=light] .text-button,[data-theme=light] footer>div,[data-theme=light] details p,[data-theme=light] summary>span,[data-theme=light] .canvas-label,[data-theme=light] .canvas-bottom,[data-theme=light] .scene-title,[data-theme=light] .watch-demo,[data-theme=light] .reel-controls button,[data-theme=light] .tabs button,[data-theme=light] .code-tabs button,[data-theme=light] .code-meta,[data-theme=light] .neck-labels,[data-theme=light] .switches label,[data-theme=light] .slider-label,[data-theme=light] .angle-fields label,[data-theme=light] output{color:#62665c}[data-theme=light] .tabs button[aria-pressed=true],[data-theme=light] .code-tabs button[aria-pressed=true]{color:#232821}[data-theme=light] pre,[data-theme=light] .reference code,[data-theme=light] textarea{color:#343b30}[data-theme=light] .code-keyword{color:#7d6a92}[data-theme=light] .code-string{color:var(--accent-ink)}[data-theme=light] .code-comment{color:#777c70}[data-theme=light] .code-value{color:var(--code-accent)}[data-theme=light] .switch{background:#dedfd8;border-color:#bbc0b2}[data-theme=light] .switches input:checked+.switch{background:var(--accent);border-color:var(--accent-line)}[data-theme=light] .switches input:checked+.switch:after{background:var(--accent-ink)}[data-theme=light] input[type=range]{background:linear-gradient(to right, var(--accent) 0 var(--range-fill,50%), #d8cde4 var(--range-fill,50%) 100%)}[data-theme=light] .compass-ring{stroke:#5d705b55}[data-theme=light] .install{border-color:#292b2945}[data-theme=light] #announcement{color:#fafbf5;background:#342b40}@media (hover:hover) and (pointer:fine){.theme-toggle:hover{color:#292333;border-color:var(--accent-line)}[data-theme=light] .text-button:hover,[data-theme=light] .code-tabs button:hover,[data-theme=light] .watch-demo:hover{color:#20271c}}@media (width<=720px){.wordmark{white-space:nowrap}.header .project-link-label{display:none}.theme-toggle{width:30px;height:30px;padding:6px}.header nav{gap:8px}}[data-theme=light] .brand-icon,[data-theme=light] .install .prompt,[data-theme=light] .watch-demo[aria-pressed=true],[data-theme=light] .content-trigger span{color:var(--accent-ink)}[data-theme=light] .hero-join,[data-theme=light] .footer-mark svg{color:#a084c9}[data-theme=light] input[type=range]{height:3px}[data-theme=light] input[type=range]::-webkit-slider-thumb{border-color:var(--accent-ink);box-shadow:none}[data-theme=light] input[type=range]::-moz-range-thumb{border-color:var(--accent-ink)}[data-theme=light] .code-value{background:#eee3f8}.compass{width:92px;height:92px;color:var(--accent);background:#ffffff06;border:0}.compass:before{content:"";border:1px solid var(--line);background:var(--page);transition:transform .16s var(--ease-out), border-color .16s;border-radius:50%;position:absolute;inset:15px}.compass[data-dragging]:before{border-color:var(--accent-line);transform:scale(1.05)}.dial-ring{stroke:#ffffff45;stroke-width:1px;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.dial-ring .major-tick{stroke:currentColor;stroke-width:1.5px}#compass-needle{border-radius:2px;width:32%;height:2px;top:50%;left:50%}#compass-needle:after{background:var(--accent);border:0;border-radius:50%;width:7px;height:7px;top:-2.5px;right:-1px;transform:none}.compass-center{border:1px solid var(--accent);background:var(--page);width:6px;height:6px;top:calc(50% - 3px);left:calc(50% - 3px)}.dial-north{color:var(--muted);font-size:10px;top:19px}[data-theme=light] .compass{background:#62428b08}[data-theme=light] .dial-ring{stroke:#62428b50}[data-theme=light] .dial-ring .major-tick{stroke:var(--accent-ink)}@media (hover:hover) and (pointer:fine){.compass:hover:before{border-color:var(--accent-line)}}@media (width<=720px){.compass{width:84px;height:84px}.tabs{gap:14px}.lab-actions{gap:12px}.canvas-bottom{flex-wrap:wrap;gap:12px}.intro-baseline{align-items:start}.angle-row{grid-column:1/-1;align-items:center}.angle-fields .tiny-label{max-width:none}.selects{flex-wrap:wrap}.section-heading .text-button{flex-shrink:0}}@media (width<=420px){.controls{grid-template-columns:1fr}.header nav{gap:7px}.header .project-link{padding:6px}}:root[data-reduced] .compass:before{transition:none}:root[data-theme=light]{--accent-mark:#8055ad}[data-theme=light] .tab-highlight,[data-theme=light] .code-tab-highlight,[data-theme=light] .code-meta .status-dot,[data-theme=light] .reel-controls button i:after{background:var(--accent-mark)}[data-theme=light] .tabs button[aria-pressed=true],[data-theme=light] .code-tabs button[aria-pressed=true]{color:var(--accent-ink);font-weight:650}[data-theme=light] :focus-visible{outline-color:var(--accent-ink)}[data-theme=light] .anchor[data-active],[data-theme=light] .anchor[data-dragging]{border-color:var(--accent-mark)}[data-theme=light] .anchor-dot{background:var(--accent-mark)}[data-theme=light] .switches input:focus-visible+.switch{outline-color:var(--accent-ink)}[data-theme=light] .compass[data-dragging]:before{border-color:var(--accent-mark)}[data-theme=light] .compass-center{border-color:var(--accent-ink)}[data-theme=light] #compass-needle,[data-theme=light] #compass-needle:after{background:var(--accent-mark)}[data-theme=light] .toolbar button[data-active] kbd{color:var(--accent-ink)}[data-theme=light] select{background:var(--page);color:var(--ink);border-color:var(--line)}[data-theme=light] .motion-control input{accent-color:var(--accent-mark)}[data-theme=light] .reel-cursor svg{stroke:var(--accent-ink)}[data-theme=light] .reel-controls button[aria-pressed=true]{color:var(--accent-ink)}[data-theme=light] .reel-cursor>span{border-color:var(--accent-mark)}[data-theme=light] #desired-vector{stroke:var(--accent-mark)}[data-theme=light] #guide-origin{fill:var(--accent-mark)}@media (hover:hover) and (pointer:fine){[data-theme=light] summary:hover:after,[data-theme=light] summary:hover code,[data-theme=light] .install:hover{color:var(--accent-ink)}[data-theme=light] .project-link:hover{color:#352244;border-color:var(--accent-mark)}.theme-toggle:hover:before{transform:translate(-105%)}.theme-toggle:hover:after{transform:translate(105%)}[data-theme=light] .theme-toggle:hover{color:#352244}}:root{--surface:#19191f;--stage:#121217;--surface-raised:#22222a;--page:#101014;--ink:#f3f2f7;--line:#ffffff18;--muted:#aaa8b5}:root[data-theme=light]{--page:#f7f7fb;--surface:#fff;--stage:#eeedf4;--surface-raised:#f3f1f8;--ink:#272330;--line:#30244220;--muted:#716a7c}.site{width:min(100% - 64px,1080px)}.header{height:84px}.header nav{gap:22px}.wordmark{letter-spacing:-.7px;font-size:18px}.header nav a:not(.project-link){color:var(--muted);font-size:13px;line-height:1.4}.intro{text-align:center;max-width:800px;margin:auto;padding:104px 0 42px}h1{letter-spacing:-.065em;justify-content:center;gap:.08em;font-size:clamp(60px,8vw,100px);font-weight:650;line-height:1.05}h1 em{font:inherit;color:var(--hero);font-weight:650}.hero-join{width:62px;height:62px;margin:0;position:absolute;top:23px;left:calc(50% - 31px);transform:rotate(-12deg)}.intro-baseline{flex-direction:column;align-items:center;gap:20px;margin-top:18px}.intro-baseline>p{color:var(--muted);font-size:17px;line-height:1.6}.install{isolation:isolate;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;gap:14px;padding:14px 20px;font-size:13px;position:relative;overflow:hidden}.install svg{width:16px;height:16px}.project-link,.theme-toggle{isolation:isolate;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;position:relative;overflow:hidden}.project-link{padding:11px 16px}.project-link:before,.project-link:after,.theme-toggle:before,.theme-toggle:after{display:none}.theme-toggle{width:40px;height:40px;padding:10px}.theme-toggle svg{width:18px;height:18px}.project-link-icon{color:var(--ink)}[data-theme=light] .project-link,[data-theme=light] .theme-toggle{background:var(--surface);color:var(--ink);border-color:var(--line)}[data-theme=light] .project-link-icon,.project-link:focus-visible,.theme-toggle:focus-visible,.project-link:focus-visible .project-link-icon{color:var(--ink)}.lab{background:var(--surface);border:1px solid var(--line);border-radius:36px;max-width:940px;margin:0 auto 76px;padding:12px}.lab-header{gap:18px;height:auto;min-height:64px;padding:0 12px 10px}.tabs{background:var(--stage);border:1px solid var(--line);border-radius:999px;gap:0;padding:4px}.tabs button{color:var(--muted);border-radius:999px;padding:11px 17px;font-size:13px}.tabs button[aria-pressed=true]{color:var(--ink);background:#ffffff0b}[data-theme=light] .tabs button[aria-pressed=true]{color:var(--accent-ink);background:#fff}.tab-highlight{opacity:.8;bottom:6px}.lab-actions{gap:18px}.watch-demo,.text-button{color:var(--muted);font-size:13px}.canvas{background:var(--stage);border-radius:26px;height:330px}[data-theme=light] .canvas{background:var(--stage)}.canvas[data-mode=bounds]{border-color:var(--accent-line);border-style:solid}.canvas-label{font-size:12px;top:20px;left:22px}.canvas-bottom{font-size:12px;bottom:20px;left:22px;right:22px}.toolbar{background:var(--surface-raised);border-color:var(--line);border-radius:24px;gap:6px;padding:10px;box-shadow:0 18px 35px #0002}.toolbar button{border-radius:16px;min-width:58px;padding:15px 14px 10px}.toolbar button[data-active]{background:var(--accent-soft)}[data-theme=light] .toolbar{background:#fff}[data-theme=light] .toolbar button[data-active]{background:var(--accent)}.anchor,.content-trigger{background:var(--surface-raised);border-color:var(--line);border-radius:18px}.anchor{width:86px;height:44px}.content-trigger{padding:16px 22px}#customize{border:0;padding:4px 18px 8px}#customize>summary{padding:18px 6px 10px;font-size:14px}.controls{gap:30px;padding:28px 6px 16px}.selects{gap:18px}.selects select{border:1px solid var(--line);background:var(--stage);color:var(--ink);border-radius:12px;padding:10px 12px}[data-theme=light] select{background:var(--stage)}.preview-motion{border-color:var(--line);border-radius:999px;padding:10px 14px}#custom-text{background:var(--stage);border:1px solid var(--line);border-radius:16px;padding:14px}input[type=range]{border-radius:999px;height:4px}input[type=range]::-webkit-slider-thumb{width:14px;height:14px}input[type=range]::-moz-range-thumb{width:11px;height:11px}.usage,.reference{max-width:860px;margin:0 auto 68px}.section-heading{margin-bottom:24px}h2{letter-spacing:-1.2px;font-size:32px;font-weight:600}.code-tabs{background:var(--surface);border:0;border-radius:20px;gap:6px;padding:5px}.code-tabs button{border:0;border-radius:15px;flex:1;padding:13px 7px;font-size:13px}.code-tabs button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink)}.code-tab-highlight{border-radius:999px}.code-meta{padding:20px 4px 12px;font-size:12px}pre{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;font-size:13px;line-height:1.8}.reference details{border:1px solid var(--line);background:var(--surface);border-radius:20px;margin-bottom:10px;padding:0 22px}.reference summary{padding:20px 0}.reference summary>span{font-size:12px}.reference details p{color:var(--muted);font-size:14px;line-height:1.8}footer{border-color:var(--line);max-width:940px;margin:24px auto 0;padding:30px 8px}.footer-mark{letter-spacing:-1px;gap:.1em;font-size:32px;font-weight:600}.footer-mark em{font:inherit;color:var(--hero)}.footer-mark svg{width:38px;height:38px}footer>div{margin-top:20px;font-size:12px}footer nav{gap:10px}.ribbon-glow{z-index:-1;pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .18s var(--ease-out);border-radius:inherit;position:absolute;inset:0}.ribbon-glow[data-live]{opacity:1}.glow-button{transition:border-color .16s, transform .16s var(--ease-out), color .16s}.glow-button:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.glow-button:hover,.project-link:hover,.theme-toggle:hover,.install:hover{color:var(--ink);border-color:var(--accent-line)}.project-link:hover .project-link-icon{color:var(--ink);transform:none}[data-theme=light] .project-link:hover,[data-theme=light] .theme-toggle:hover,[data-theme=light] .install:hover{color:var(--ink)}.intro:hover .hero-join svg{transform:rotate(8deg)}}@media (width<=720px){.site{width:calc(100% - 28px)}.header{height:76px}.header nav{gap:10px}.header nav a[href=\#reference]{display:none}.header .project-link{padding:9px}.header .project-link-icon{width:16px;height:16px}.header .project-link-icon:has(use[href=\#i-npm]){width:22px}.theme-toggle{width:36px;height:36px;padding:9px}.brand-icon{width:30px;height:30px}.wordmark{font-size:16px}.intro{padding:85px 0 32px}.hero-join{width:50px;height:50px;display:block;top:16px;left:calc(50% - 25px)}h1{font-size:clamp(54px,15vw,76px)}.intro-baseline{gap:16px;margin-top:14px}.intro-baseline>p{font-size:15px}.install{padding:13px 18px;font-size:12px}.lab{border-radius:28px;margin-bottom:52px;padding:8px}.lab-header{flex-wrap:wrap;gap:10px;padding:4px 4px 12px}.tabs{flex:1;justify-content:space-between}.tabs button{padding:10px 13px;font-size:12px}.lab-actions{justify-content:space-between;width:100%;padding:2px 10px}.canvas{border-radius:21px;height:300px}.toolbar{border-radius:22px;gap:2px;padding:7px}.toolbar button{border-radius:14px;min-width:42px;padding:13px 9px 8px}.canvas-label,.canvas-bottom{font-size:11px;left:14px;right:14px}#customize{padding:0 10px 4px}.controls{grid-template-columns:1fr;padding:22px 0 12px}.usage,.reference{margin-bottom:48px;padding:0 4px}h2{font-size:28px}.code-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px}.code-tabs button{padding:12px 4px;font-size:12px}pre{border-radius:20px;padding:18px 14px;font-size:12px}.reference details{padding:0 16px}.reference summary{flex-wrap:wrap;gap:8px;padding-right:24px;position:relative}.reference summary>span{width:100%;margin:0}.reference summary:after{position:absolute;top:24px;right:0}.reference details p{font-size:13px}footer{padding:25px 4px}footer>div{gap:16px}}@media (width<=380px){.header nav{gap:7px}.wordmark{font-size:14px}.header nav a:not(.project-link){font-size:12px}}#copy-code{isolation:isolate;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:11px 16px;position:relative;overflow:hidden}.hero-tooltips{--tg-radius:16px}.playground-tips{--tg-radius:18px}.canvas[data-mode=bounds] .canvas-bottom{display:none}.tabs,.code-tabs{isolation:isolate;position:relative}.tabs button,.code-tabs button{z-index:1;position:relative}.tabs button[aria-pressed=true],.code-tabs button[aria-pressed=true],[data-theme=light] .tabs button[aria-pressed=true],[data-theme=light] .code-tabs button[aria-pressed=true]{background:0 0}.code-tab-highlight,.demo-tab-highlight{z-index:0;opacity:1;transform-origin:0 0;pointer-events:none;background:#2c2638;border:1px solid #bca4ee24;border-radius:999px;width:1px;height:1px;position:absolute;top:0;bottom:auto;left:0;box-shadow:inset 0 1px #ffffff08}[data-theme=light] .code-tab-highlight,[data-theme=light] .demo-tab-highlight{background:#e9dff6;border-color:#a080c430;box-shadow:inset 0 1px #fff8}@media (hover:hover) and (pointer:fine){.tabs button:not([aria-pressed=true]):hover,.code-tabs button:not([aria-pressed=true]):hover{color:var(--ink)}}.tabs button,.code-tabs button,.tabs button[aria-pressed=true],.code-tabs button[aria-pressed=true],[data-theme=light] .tabs button[aria-pressed=true],[data-theme=light] .code-tabs button[aria-pressed=true]{font-weight:600}.intro{isolation:isolate;padding-top:118px}.hero-orbit{pointer-events:none;position:absolute;inset:0}.orbit-point{pointer-events:auto;background:var(--surface);border:1px solid var(--line);width:48px;height:48px;color:var(--muted);transition:transform .16s var(--ease-out), color .16s, border-color .16s;border-radius:50%;place-items:center;margin:0;padding:12px;display:grid;position:absolute}.orbit-point>svg{width:23px;height:23px}.orbit-point[data-lit]{color:var(--ink);border-color:var(--accent-line)}.orbit-point:active{transform:scale(.96)}.orbit-point:focus-visible{outline:2px solid var(--hero);outline-offset:5px}.orbit-start{top:180px;left:8%;transform:rotate(-12deg)}.orbit-end{top:75px;right:8%;transform:rotate(12deg)}.hero-join.orbit-point{width:62px;height:62px;color:var(--hero);padding:8px;top:0;left:calc(50% - 31px);transform:rotate(-12deg)}.hero-join.orbit-point>svg{width:100%;height:100%}.orbit-rim{opacity:0;pointer-events:none;background:url(/images/orbit-rim.svg) 50%/contain no-repeat;position:absolute;inset:-24%}.hero-aura{opacity:0;z-index:-1;pointer-events:none;object-fit:fill;width:100%;height:240px;position:absolute;top:76px;left:0}@media (hover:hover) and (pointer:fine){.orbit-point:hover{color:var(--ink);border-color:var(--accent-line)}.intro:hover .hero-join svg{transform:none}}@media (width<=720px){.intro{padding-top:118px;padding-bottom:32px}.intro-baseline{margin-top:64px}.orbit-point{width:44px;height:44px;padding:11px}.orbit-start{top:234px;left:0}.orbit-end{top:8px;right:4%}.hero-join.orbit-point{width:50px;height:50px;padding:6px;top:0;left:calc(50% - 25px)}.hero-aura{height:190px;top:86px}.hero-tooltips{--tg-font:500 12px/1.5 system-ui, sans-serif}}@media (prefers-reduced-motion:reduce){.orbit-point{transition:none}}:root[data-reduced] .orbit-point{transition:none}html{overflow-x:clip}.example-picker{color:var(--muted);grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 12px 16px;font-size:13px;display:grid}.example-picker button{background:var(--stage);min-width:0;color:var(--muted);border:1px solid #0000;border-radius:12px;padding:10px 12px;transition:background .14s,color .14s,border-color .14s}.example-picker button[aria-pressed=true]{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}@media (hover:hover) and (pointer:fine){.example-picker button:hover{color:var(--ink);border-color:var(--line)}}@media (width>=720px){.example-picker{grid-template-columns:repeat(6,minmax(0,1fr))}}.switches label:has(input:disabled){cursor:default}.dia-floor{pointer-events:none;width:100%;height:clamp(180px,29vw,350px);overflow:clip;mask-image:linear-gradient(#0000,#000 46%)}.dia-spectrum{--aurora-opacity:.95;width:100%;height:100%;opacity:var(--aurora-opacity);transform-origin:bottom;margin:auto;position:relative}.aurora-source{object-fit:fill;width:100%;height:100%;margin:auto;display:block}.aurora-canvas{visibility:hidden;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}[data-aurora-ready] .aurora-canvas{visibility:visible}[data-aurora-ready] .aurora-source{visibility:hidden}@media (prefers-reduced-motion:reduce){.dia-spectrum{opacity:var(--aurora-opacity);transition:none;transform:none}[data-aurora-ready] .aurora-canvas{display:none}[data-aurora-ready] .aurora-source{visibility:visible}}:root[data-reduced] .dia-spectrum{opacity:var(--aurora-opacity);transition:none;transform:none}:root[data-reduced] .aurora-canvas{display:none}:root[data-reduced] .aurora-source{visibility:visible}:root{--spectrum-blue:#abc9e8;--spectrum-mint:#b7d4c8;--spectrum-pearl:#e8dfc9;--spectrum-peach:#e4bf9e;--spectrum-rose:#e0b1be;--spectrum-lilac:#c8b7e1;--blue-ink:var(--spectrum-blue);--mint-ink:var(--spectrum-mint);--pearl-ink:var(--spectrum-pearl);--peach-ink:var(--spectrum-peach);--rose-ink:var(--spectrum-rose);--lilac-ink:var(--spectrum-lilac);--accent:#d7d4d0;--accent-ink:#d7d4d0;--accent-mark:#d7d4d0;--accent-soft:#d7d4d013;--accent-line:#d7d4d056;--hero:#e8dfd5;--code-accent:var(--peach-ink);--spectrum:linear-gradient(110deg, var(--blue-ink), var(--mint-ink) 22%, var(--pearl-ink) 40%, var(--peach-ink) 58%, var(--rose-ink) 78%, var(--lilac-ink));--spectrum-soft:linear-gradient(110deg, #abc9e819, #b7d4c817 22%, #e8dfc918 40%, #e4bf9e19 58%, #e0b1be18 78%, #c8b7e119);--spectrum-rim:linear-gradient(110deg, #abc9e850, #b7d4c838 22%, #e8dfc950 40%, #e4bf9e45 58%, #e0b1be48 78%, #c8b7e145);--button-face:linear-gradient(110deg, color-mix(in srgb, var(--spectrum-blue) 7%, var(--surface)), color-mix(in srgb, var(--spectrum-pearl) 5%, var(--surface)) 45%, color-mix(in srgb, var(--spectrum-rose) 7%, var(--surface)))}:root[data-theme=light]{--blue-ink:#4c6c89;--mint-ink:#507165;--pearl-ink:#79704f;--peach-ink:#8a6248;--rose-ink:#925e70;--lilac-ink:#75618d;--accent:#dad9d2;--accent-ink:#5e6266;--accent-mark:#67717b;--accent-soft:#d7d4d032;--accent-line:#777f8860;--hero:#606777;--spectrum-soft:linear-gradient(110deg, #abc9e839, #b7d4c835 22%, #e8dfc948 40%, #e4bf9e35 58%, #e0b1be35 78%, #c8b7e135);--spectrum-rim:linear-gradient(110deg, #7e9bbd65, #87a89960 22%, #b0a17d70 40%, #be9a7f60 58%, #b1869660 78%, #9d89b760)}.footer-mark em{background:var(--spectrum);color:#0000;-webkit-background-clip:text;background-clip:text}h1 em{color:var(--hero);background:0 0}h1 em .hero-letter:first-child{color:var(--mint-ink)}h1 em .hero-letter:nth-child(2){color:var(--pearl-ink)}h1 em .hero-letter:nth-child(3){color:var(--peach-ink)}h1 em .hero-letter:nth-child(4){color:var(--rose-ink)}h1 em .hero-letter:nth-child(5){color:var(--lilac-ink)}.hero-aura{--aura-width:100vw;left:calc((100% - var(--aura-width)) / 2);width:var(--aura-width);--aurora-opacity:.7;height:230px;opacity:var(--aurora-opacity);transform-origin:bottom;top:96px}[data-theme=light] .hero-aura{--aurora-opacity:.52}@media (width<=720px){.hero-aura{--aurora-opacity:.42;height:190px;top:110px}[data-theme=light] .hero-aura{--aurora-opacity:.34}}.project-link,.theme-toggle,.install,#copy-code,[data-theme=light] .project-link,[data-theme=light] .theme-toggle{background:var(--button-face) padding-box, var(--spectrum-rim) border-box;color:var(--ink);border:1px solid #0000}.install .prompt,.code-keyword,[data-theme=light] .code-keyword{color:var(--blue-ink)}.code-string,[data-theme=light] .code-string{color:var(--mint-ink)}.code-value,[data-theme=light] .code-value{color:var(--peach-ink)}.code-comment,[data-theme=light] .code-comment{color:var(--muted)}.code-call{color:var(--pearl-ink)}.code-type{color:var(--lilac-ink)}.code-property{color:var(--rose-ink)}.code-tabs button[aria-pressed=true],[data-theme=light] .code-tabs button[aria-pressed=true],.tabs button[aria-pressed=true],[data-theme=light] .tabs button[aria-pressed=true]{color:var(--ink)}.code-tab-highlight,[data-theme=light] .code-tab-highlight,.demo-tab-highlight,[data-theme=light] .demo-tab-highlight{background:var(--spectrum-soft);box-shadow:inset 0 0 0 1px var(--line);border-color:#0000}.toolbar button[data-active],[data-theme=light] .toolbar button[data-active],.switches input:checked+.switch,[data-theme=light] .switches input:checked+.switch{background:var(--spectrum-soft);color:var(--ink);border-color:var(--accent-line)}.switches input:checked+.switch:after,[data-theme=light] .switches input:checked+.switch:after{background:var(--ink)}.code-meta .status-dot,[data-theme=light] .code-meta .status-dot,.reel-controls button i:after,[data-theme=light] .reel-controls button i:after,.anchor-dot,[data-theme=light] .anchor-dot,#compass-needle,[data-theme=light] #compass-needle{background:var(--spectrum)}input[type=range],[data-theme=light] input[type=range]{background:linear-gradient(var(--range-track), var(--range-track)) right / calc(100% - var(--range-fill,50%)) 100% no-repeat, var(--spectrum);--range-track:#38383f}[data-theme=light] input[type=range]{--range-track:#dcdae1}.compass,[data-theme=light] .compass{background:var(--spectrum-soft)}.dial-ring .major-tick{stroke:var(--blue-ink)}.playground-tips,.hero-tooltips,[data-theme=light] .playground-tips,[data-theme=light] .hero-tooltips{--tg-fuse-color:var(--peach-ink)}.anchor[data-dragging],[data-theme=light] .anchor[data-dragging]{background:var(--surface-raised)}[data-theme=light] #actual-vector{stroke:#69788780}.spectrum-stop-blue{stop-color:var(--blue-ink)}.spectrum-stop-mint{stop-color:var(--mint-ink)}.spectrum-stop-pearl{stop-color:var(--pearl-ink)}.spectrum-stop-peach{stop-color:var(--peach-ink)}.spectrum-stop-rose{stop-color:var(--rose-ink)}.spectrum-stop-lilac{stop-color:var(--lilac-ink)}.brand-body{fill:url(#brand-spectrum)}.brand-trail{stroke:url(#brand-spectrum)}.hero-letter{display:inline-block}.hero-grain{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:clip}.hero-grain span{font:12px/1 var(--mono);color:var(--blue-ink);opacity:0;position:absolute}.hero-grain span:nth-child(3n){color:var(--rose-ink)}.hero-grain span:nth-child(3n+1){color:var(--mint-ink)}.hero-bloom{opacity:0;pointer-events:none;z-index:-1;width:320px;height:180px;position:absolute;top:78px;left:calc(50% - 160px)}@media (hover:hover) and (pointer:fine){.project-link:hover,.theme-toggle:hover,.install:hover,#copy-code:hover,[data-theme=light] .project-link:hover,[data-theme=light] .theme-toggle:hover,[data-theme=light] .install:hover{color:var(--ink);border-color:#0000}}@media (width<=720px),(pointer:coarse){.dia-spectrum{--aurora-opacity:.62}}.playground-tips .tg-content{touch-action:pan-y pinch-zoom}.tg-overlay{--tg-background:#25252b;--tg-color:#fafafa;--tg-border:#ffffff18;--tg-radius:12px;--tg-max-width:280px;--tg-max-height:300px;z-index:1000;pointer-events:none;font:var(--tg-font,500 13px/1.45 system-ui, sans-serif);color:var(--tg-color);text-align:left;position:fixed;inset:0;overflow:clip}.tg-position{visibility:hidden;position:absolute;top:0;left:0}.tg-backdrop{border:1px solid var(--tg-border);z-index:0;background:var(--tg-background);border-radius:var(--tg-radius);box-shadow:var(--tg-shadow,0 8px 28px #0003, 0 2px 6px #0002);position:absolute;inset:0}.tg-clip{z-index:2;border-radius:var(--tg-radius);position:absolute;inset:0;overflow:hidden}.tg-content{box-sizing:border-box;padding:var(--tg-padding,10px 14px);overflow-wrap:anywhere;white-space:pre-line;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--tg-scrollbar-thumb,color-mix(in srgb, currentColor 24%, transparent)) var(--tg-scrollbar-track,transparent);position:relative;overflow:auto}.tg-measure{visibility:hidden;pointer-events:none;width:max-content;position:absolute;top:0;left:0}.tg-position[data-open]{visibility:visible;pointer-events:auto}.tg-description[hidden]{display:none}.tg-motion,.tg-surface{width:100%;height:100%;position:relative}.tg-surface{isolation:isolate}.tg-overlay .tg-skin{z-index:1;pointer-events:none;position:absolute;top:-14px;left:-14px;overflow:visible}.tg-overlay .tg-skin path{fill:var(--tg-background);stroke:var(--tg-border);stroke-width:1px}.tg-fuse{background:var(--tg-fuse-color,#a5a1ff);pointer-events:none;border-radius:2px;position:absolute;top:0;left:0}tip-glide-group[data-astro-cid-ccfudsrs]{display:block}