:root{color-scheme:light dark;--page: light-dark(#f5f8fc, #131c2a);--sky: light-dark(#dceaf9, #203653);--wash: linear-gradient(145deg, var(--sky), var(--page) 46rem);--ink: light-dark(#182d49, #eff5ff);--soft: light-dark(#405773, #bdcee3);--panel: light-dark(#fbfdff, #1b2b40);--line: light-dark(#879cb5, #687f9d);--accent: light-dark(#245a9a, #abcfff);--experiment-backdrop: radial-gradient(ellipse at 45% 32%, #284665, #142639 78%);font-family:system-ui,sans-serif}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}:root[data-size="115"]{font-size:115%}:root[data-size="130"],:root[data-comfort=true]{font-size:130%}:root[data-size="150"]{font-size:150%}:root[data-comfort=true]{font-size:130%}:root[data-contrast=true],:root[data-comfort=true]{--wash: none;--experiment-backdrop: none;--ink: light-dark(#000,#fff);--soft:var(--ink);--line:var(--ink);--accent:light-dark(#003d31,#9fffe3)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--wash) var(--page);color:var(--ink);line-height:1.55}a{color:var(--accent);text-underline-offset:.2em}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.skip:not(:focus){position:absolute;clip-path:inset(50%)}.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.65rem;padding:1rem max(1rem,calc((100% - 68rem)/2));border-bottom:1px solid var(--line);background:var(--panel)}.brand{font-weight:760;color:var(--ink)}nav{display:flex;align-items:center;gap:1rem}details{position:relative}summary{cursor:pointer}.settings{position:absolute;z-index:2;right:0;background:var(--panel);border:1px solid var(--line);padding:1rem;width:min(15rem,80vw);display:grid;gap:.6rem;border-radius:.6rem}.settings label{display:flex;gap:.5rem;justify-content:space-between}main{max-width:70rem;margin:auto;padding:clamp(1rem,4vw,3rem)}h1,h2{line-height:1.1;letter-spacing:-.035em}h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(2rem,6vw,4.4rem);margin:.3em 0 .12em;overflow-wrap:anywhere}.intro{font-size:1.15rem;color:var(--soft);margin:0 0 1.2rem}.lab{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:1.1rem}figure{margin:0;padding:1rem;background:var(--experiment-backdrop) #142639;color:#f3f8f8;border-radius:.8rem;display:grid;align-content:center}svg{display:block;width:100%;max-height:25rem}#driver{fill:#61c8df}#driven{fill:#f2b953}#driver>path:first-child,#driven>path:first-child{stroke:#14272d;stroke-width:.15}.pitch{fill:none;stroke:#14272d;stroke-width:.25;stroke-dasharray:1 1}.marker,.hub{fill:none;stroke:#14272d;stroke-width:.8;stroke-linecap:round}figcaption{font-size:.85rem;padding:.25rem}.controls{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;padding:1rem;display:grid;gap:.25rem;align-content:center}.controls label{font-weight:650}input[type=range]{width:100%;margin:0 0 .5rem;min-height:1.7rem;accent-color:var(--accent)}dl{margin:.1rem 0 .6rem;font-size:.85rem;color:var(--soft)}dl div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.1rem .45rem}dd{margin:0;font-variant-numeric:tabular-nums}button,select{font:inherit}button{border:1px solid var(--line);border-radius:.45rem;background:var(--panel);color:var(--ink);min-height:2.65rem;padding:.35rem .65rem;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 -3px var(--accent);font-weight:700}.buttons,.levels{display:flex;flex-wrap:wrap;gap:.4rem}.levels{margin:1.25rem 0 .5rem}.explain{max-width:68ch}.equation{font-size:1.2rem;font-weight:650}#route{border-top:1px solid var(--line);margin-top:2rem;padding-top:.6rem}ol{padding-left:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.55rem 1.65rem}li{border:1px solid var(--line);background:var(--panel);padding:.55rem .7rem;border-radius:.4rem;break-inside:avoid}li span,li a{display:block;font-size:.85rem;color:var(--soft)}:root:is([data-layout=list],[data-comfort=true]) ol{grid-template-columns:1fr}@media(max-width:48rem){.lab{grid-template-columns:1fr}figure{padding:.55rem}.settings{right:auto;left:0}}