@media (min-width: 768px){main:has(>aside){flex-direction:row;align-items:flex-start}main:has(>aside)>section{flex:3 1 0}main:has(>aside[data-collapsed=true])>section{flex:3 1 0;max-width:none}main:has(>aside)>aside{flex:1 1 0;min-width:16rem}}main>section{margin:0;position:relative;width:100%;overflow:hidden}main .controls-toggle{position:absolute;top:0;right:0;bottom:0;border:0;background:color-mix(in srgb,var(--paper) 99%,var(--ink));color:var(--ink);cursor:pointer}main .controls-toggle:hover{background:color-mix(in srgb,var(--paper) 96%,var(--ink))}main>section[data-stage~=square]{aspect-ratio:1 / 1;touch-action:none}main>section[data-stage~=grab]{touch-action:none;overscroll-behavior:contain;cursor:grab}main>section[data-stage~=grab]:active{cursor:grabbing}main>section canvas{display:block;width:100%;height:100%}main :is(section,aside) :is(ul,ol){list-style:none;margin:0;display:grid;gap:.2rem;padding:1px}main>aside{display:flex;flex-direction:column;gap:.5rem}main>aside[data-collapsed=true]{display:none}main fieldset{border:1px solid rgba(128,128,128,.3);border-radius:.35rem;padding:.5rem .75rem .6rem;margin:0;display:grid;gap:.4rem}main legend{padding:0 .4rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7}main legend button{font-size:.75rem;opacity:.75;margin-left:.4rem}main fieldset fieldset{border:0;padding:0}main fieldset label{display:grid;grid-template-columns:6rem 1fr 3rem;align-items:center;gap:.5rem;font-size:.9rem}main fieldset label:has(input[type=checkbox]){grid-template-columns:auto 1fr}main fieldset label:has(input[type=color]){grid-template-columns:6rem 1fr}main fieldset>select,main fieldset>textarea{width:100%}main input[type=range]{width:100%}main menu{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}main menu li{display:contents}main aside small{font-size:.8rem;opacity:.7}main :is(ul,ol) li:has(>label){display:flex;align-items:center;gap:.25rem}main :is(ul,ol) li>label{flex:1;display:flex;align-items:center;gap:.4rem;padding:.15rem .4rem;cursor:pointer;border-radius:.25rem}main :is(ul,ol) li>label:hover{background:color-mix(in srgb,currentColor 8%,transparent)}main :is(ul,ol) li>label:has(:checked){outline:1px solid color-mix(in srgb,currentColor 40%,transparent);font-weight:600}main :is(ul,ol) li>label>span:empty{flex:none;width:.8rem;height:.8rem;border-radius:.2rem;border:1px solid color-mix(in srgb,currentColor 30%,transparent)}main :is(ul,ol) li>label~button{opacity:.6}main :is(ul,ol) li>label~button:disabled{opacity:.25}main li>label em{font-style:normal;font-size:.7rem;opacity:.5}main [role=group]:has(input[type=radio]){display:flex;gap:0;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:.35rem;overflow:hidden;background:color-mix(in srgb,currentColor 5%,transparent)}main [role=group] label{flex:1;display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.25rem .4rem;opacity:.7;cursor:pointer}main [role=group] li:not(:first-child)>label,main [role=group]>label+label{border-left:1px solid color-mix(in srgb,currentColor 18%,transparent)}main [role=group] input[type=radio]{position:absolute;opacity:0;pointer-events:none}main [role=group] label:hover{background:color-mix(in srgb,currentColor 10%,transparent);opacity:1}main [role=group] label:has(:checked){opacity:1;font-weight:600;background:var(--accent, #2850dc);color:#fff}main [role=group] label:has(:focus-visible){outline:2px solid var(--accent, #2850dc);outline-offset:-2px}main [role=group] em{font-style:normal;font-size:.55rem;vertical-align:super;opacity:.7}main>section>svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}main>section>menu{position:absolute;z-index:2;gap:.35rem}main>section>menu :is(button,output){height:32px;margin:0;border:1px solid rgba(0,0,0,.18);border-radius:6px;background:#ffffffd9;color:#333;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 2px #00000014}main>section>menu button{width:32px;padding:0;cursor:pointer}main>section>menu output{min-width:3rem;padding:0 .5rem;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}main>section>menu button:hover{background:#fff}main>section>menu button[aria-pressed=true]{background:#2850dceb;color:#fff;border-color:#2850dc}main>section>footer{position:absolute;left:0;right:1.5rem;bottom:0;display:flex;flex-direction:column;gap:.4rem;padding:.6rem .8rem .7rem;background:linear-gradient(to top,color-mix(in srgb,var(--paper) 70%,transparent),transparent);color:var(--ink);font-size:.75rem;pointer-events:none}main>section>footer>menu{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;pointer-events:auto}main>section>footer label{display:flex;align-items:center;gap:.35rem;flex:1 1 8rem}main>section>footer label span{opacity:.8}main>section>footer input[type=range]{flex:1}main>section>footer output{min-width:2.6rem;text-align:right;opacity:.85}main>section>footer button{white-space:nowrap;font-weight:600;padding:.2rem .6rem}main>article{width:100%;display:flex;flex-direction:column;gap:3rem}main article .hero{display:flex;flex-direction:column;gap:.75rem;max-width:60rem}main article .num{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:999px;background:var(--link);color:#fff;font-size:.8rem;font-weight:700}main article .chapter{display:flex;flex-direction:column;gap:1rem;padding-top:1rem;border-top:1px dashed var(--color-neutral-500)}main article .chapter h2{display:flex;align-items:center;gap:.6rem;font-size:1.6rem}main article .concept{max-width:52rem}main article .math-block{text-align:center;font-size:1.2rem}main article .math-block .katex-display{margin:.35rem 0}main article .math-inline .katex{font-size:1em}main article .playground-wrap{display:flex;flex-direction:column;gap:.5rem}main article .playground-wrap .intro{font-size:.9rem;opacity:.5}main article .playground{display:grid;gap:1rem;grid-template-columns:1fr;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:.5rem;padding:1rem;background:color-mix(in srgb,var(--paper) 55%,transparent)}main article .side{display:flex;flex-direction:column;gap:.9rem;min-width:0}main article .controls{display:flex;flex-direction:column;gap:.6rem}main article .readout label{grid-template-columns:1fr auto}main article .readout output{font-weight:700}main article .note{margin:0;font-size:.9rem;line-height:1.55;opacity:.85}main article .closing{border-top:1px dashed var(--color-neutral-500);padding-top:1rem;margin-bottom:10rem}main article .closing p{margin:0;font-size:1.05rem;line-height:1.6}main:has(>article){max-width:1280px}