.site-header{z-index:20;height:66px;color:var(--paper);background:var(--navy);position:sticky;top:0}.nav{align-items:center;gap:28px;height:100%;padding:0 30px 0 40px;display:flex}.nav a{color:#ffffffb8;font-size:13px;font-weight:650;text-decoration:none}.nav a:hover,.nav a:visited{color:var(--paper)}.brand{align-items:baseline;gap:10px;margin-right:auto;display:flex}.nav a.brand{color:var(--paper)}.brand strong{letter-spacing:-.03em;font-size:31px;font-weight:430;line-height:1}.brand span{color:#ffffff94;font-family:var(--mono);letter-spacing:.03em;text-transform:uppercase;font-size:11px;font-weight:700}#board{color:#fff;background:var(--board);width:100%;height:calc(50vh - 66px);min-height:18rem;position:relative;overflow:hidden}.hero-canvas,.hero-canvas>div{position:absolute;inset:0}.hero-canvas canvas{display:block}.hero-copy{z-index:1;pointer-events:none;max-width:44rem;padding:30vh 30px 0 40px;position:relative}.hero-copy h1{letter-spacing:-.03em;margin:0 0 .35em;font-size:clamp(40px,5.6vw,72px);font-weight:360;line-height:1}.hero-copy p{color:#ffffffb8;max-width:630px;margin:0 0 1em;font-size:18px;line-height:1.3}.hero-copy code{color:#fff}.cta{border:2px solid var(--blue);color:var(--blue);cursor:pointer;background:0 0;margin:20px 0;padding:12px 18px;font-size:1.15em;font-weight:600;line-height:1.2;text-decoration:none;display:inline-block}.cta:hover{background:var(--blue);color:#fff}#menu{float:left;width:var(--menu-width);counter-reset:c;max-height:calc(100vh - 66px);padding:40px 10px 50px 40px;line-height:2.4;position:sticky;top:66px;overflow-y:auto}#menu ol,#menu ul{margin:0;padding:0;list-style:none}#menu ol>li{white-space:nowrap;text-overflow:ellipsis;font-size:1.3em;overflow:hidden}#menu ol>li:before{counter-increment:c;content:counter(c);float:left;min-width:20px;color:var(--blue);padding-right:10px}#menu a{color:var(--ink);text-decoration:none;display:block}#menu a:hover,#menu a[aria-current]{color:var(--blue)}#menu ul{clear:both;margin:-4px 0 8px 30px;line-height:1.9}#menu ul>li{white-space:normal;margin-bottom:8px;padding-right:10px;font-size:.8em;line-height:1.5}#menu ul a{color:var(--muted)}#post{width:var(--post-width);min-width:300px;margin-left:var(--post-left);color:var(--ink);margin-bottom:100px;padding:0 0 30px;font-size:1.3em;position:relative}#post section{scroll-margin-top:30px}#post h2{color:var(--blue);margin:90px 0 30px;font-size:3em;font-weight:500;line-height:1}#post section:first-child h2{margin-top:60px}#post h3{margin:50px 0 15px;font-size:1.6em;font-weight:500;line-height:1.2}#post h4{margin:35px 0 10px;font-size:1.2em;font-weight:600}#post h5{color:var(--faint);margin:-.4em 0 2.5em;font-size:.85em;font-weight:400}#post p,#post li{margin:0 0 1.2em}#post ul{padding-left:1.4em}#post li{margin-bottom:.6em}#post code{font-size:.85em}#post p>code,#post li>code,#post h5>code,#post a>code{border:1px solid var(--line);background:var(--soft);border-radius:4px;padding:0 5px;line-height:1.5;display:inline-block}#post a:hover>code{border-color:var(--blue);color:var(--blue)}.code-panel{max-width:100%;color:var(--paper);background:var(--navy-dark);border-radius:10px;margin:20px 0 40px;overflow:hidden}.example .code-panel{border-top-left-radius:0;border-top-right-radius:0;margin-top:0}.panel-head{color:#ffffff8f;min-height:42px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em;justify-content:space-between;align-items:center;gap:20px;padding:0 8px 0 22px;font-size:10px;font-weight:700;display:flex}.copy-button{color:#ffffffb8;min-height:28px;font-family:var(--mono);text-transform:none;letter-spacing:0;cursor:pointer;background:0 0;border:1px solid #ffffff3d;border-radius:4px;padding:0 10px;font-size:11px;font-weight:700}.copy-button:hover{border-color:var(--paper);color:var(--paper)}.code-panel pre{color:var(--code-text);tab-size:2;margin:0;padding:4px 23px 16px;font-size:13px;line-height:1.85;overflow:auto}.code-panel code{color:inherit;font-size:1em}.tok-key{color:#b7aaff}.tok-string,.tok-prompt{color:var(--green)}.tok-number{color:#efb7c5}.tok-function{color:var(--sky)}.tok-comment{color:#8aa0ad}.api-section h3{padding-top:20px}.table-scroll{max-width:100%;margin:20px 0 40px;overflow-x:auto}#post table{border-collapse:collapse;overflow-wrap:normal;width:100%;min-width:44rem;font-size:.9em;line-height:1.45}#post th,#post td{border-bottom:1px solid var(--code-border);text-align:left;vertical-align:top;padding:8px 12px 8px 0}#post th{color:var(--muted);white-space:nowrap;font-weight:600}#post td:first-child{white-space:nowrap}.canvas-frame{border-top-left-radius:10px;border-top-right-radius:10px;width:100%;height:clamp(18rem,42vw,30rem);margin:20px 0 0;position:relative;overflow:hidden}.canvas-frame>div{position:absolute;inset:0}.canvas-frame canvas{display:block}.quick-start-frame{height:24rem}.example{margin-top:60px}.example .index{color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:.5em;font-weight:600}.example h3{margin-top:5px}.example .cta{margin:0 0 20px}#post label{grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;max-width:24rem;margin:0 0 20px;font-weight:600;display:grid}#post label strong{color:var(--blue);justify-self:end}#post input[type=range]{width:100%;accent-color:var(--blue);grid-column:1/-1}#footer{clear:both;width:var(--post-width);margin-left:var(--post-left);color:var(--footer);padding:0 0 40px;font-size:1.1em}#footer a,#footer a:visited{color:var(--footer)}#footer code{color:inherit}@media screen and (width<=1024px){:root{--post-left:28%;--post-width:66%}}@media screen and (width<=768px){html{scroll-padding-top:112px}.site-header{height:62px}.nav{gap:18px;padding:0 15px}.brand strong{font-size:26px}#board{height:calc(50vh - 62px)}.hero-copy{padding:25vh 16px 0}#menu{z-index:2;float:none;border-bottom:1px solid var(--code-border);background:#fff;width:100%;max-height:none;padding:0 12px;line-height:44px;position:sticky;top:62px}#menu ol{gap:0 18px;display:flex;overflow-x:auto}#menu ol>li{flex:none;font-size:1.1em;display:inline-flex;overflow:visible}#menu ol>li:before{float:none;min-width:0;padding-right:6px}#menu ul{display:none}#post,#footer{overflow-wrap:anywhere;width:auto;min-width:0;margin-left:0;padding-left:24px;padding-right:24px}#post h2{margin-top:60px;font-size:2.4em}.canvas-frame{height:min(70vw,24rem)}.code-panel pre{padding:2px 18px 22px;font-size:11px}}:root{--blue:#42e;--teal:#0ca;--ink:#123;--ink-soft:#234;--muted:#678;--faint:#90959c;--footer:#aeb7c1;--code-bg:#f1f3f7;--code-border:#e2e6ef;--board:#10283a;--navy:#10283a;--navy-dark:#0b1f2e;--paper:#fff;--soft:#f4f7f9;--line:#d8e1e7;--code-text:#dce7ee;--green:#73dca9;--sky:#79c9f5;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--menu-width:min(25%, 300px);--post-left:30%;--post-width:min(60%, 60rem)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px;overflow:hidden auto}body{min-width:320px;color:var(--ink);font-synthesis:none;background:#fff;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:12px;line-height:1.5}a{color:var(--ink);text-decoration:underline}a:visited{color:var(--ink)}a:hover{color:var(--blue)}a:focus-visible,button:focus-visible,pre:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button,input{font:inherit}code,pre{font-family:var(--mono)}code{font-size:.9em}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}