#header{z-index:3;font-size:1.5em;line-height:70px;position:relative}#header a{color:var(--ink);text-decoration:none}#header a:hover{color:var(--blue)}#pts{padding-left:30px;display:inline-block}#pts a{font-weight:700;display:inline-block}#pts a>span{color:var(--blue);padding:0 2px;display:inline-block}#topmenu{height:100%;position:absolute;top:0;right:30px}#topmenu>a{vertical-align:middle;padding-left:15px;display:inline-block}#board{color:#fff;background:var(--board);width:100%;height:50vh;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:clamp(2rem,8vh,5rem) 30px 0 50px;position:relative}.hero-copy h1{letter-spacing:-.01em;margin:0 0 .35em;font-size:clamp(2.6em,6vw,4.6em);font-weight:400;line-height:1}.hero-copy p{color:#ffffffd1;margin:0 0 1em;font-size:1.4em;line-height:1.5}.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:100vh;padding:40px 10px 50px 40px;line-height:2.4;position:sticky;top:0;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);border-bottom:2px solid var(--ink);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{color:#60636f;font-size:.85em}#post a>code{border:1px solid var(--code-border);background:var(--code-bg);padding:0 5px}#post a:hover>code{border-color:var(--teal);background:var(--teal);color:#fff}#post pre{border-left:2px solid var(--teal);tab-size:2;max-width:100%;margin:20px 0 40px;padding:5px 0 5px 20px;font-size:.9em;line-height:1.5;overflow-x:auto}#post pre code{color:var(--ink-soft);font-size:1em}.api-section h3{border-top:1px solid var(--code-border);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{outline:1px solid var(--code-border);width:100%;height:clamp(18rem,42vw,30rem);margin:20px 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;margin:30px 0 0;font-size:.8em;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){#header{align-items:center;padding:0 12px;font-size:1.2em;line-height:70px;display:flex}#pts{white-space:nowrap;padding-left:0}#topmenu{white-space:nowrap;height:auto;margin-left:auto;position:static}#topmenu>a{padding:0 6px}#topmenu>a:last-child{padding-right:0}.hero-copy{padding:2rem 24px 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:0}#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)}}:root{--blue:#42e;--teal:#0ca;--ink:#123;--ink-soft:#234;--muted:#678;--faint:#90959c;--footer:#aeb7c1;--code-bg:#f1f3f7;--code-border:#e2e6ef;--board:#123;--menu-width:min(25%, 300px);--post-left:30%;--post-width:min(60%, 60rem)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px;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{font-family:Menlo,Consolas,Monaco,monospace;font-size:.9em}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}