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