@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=JetBrains+Mono:wght@500&display=swap');
:root{--bg:#eceef3;--panel:#fff;--stage:#e0e5ef;--ink:#171a24;--muted:#566176;--line:#cbd2df;--accent:#3549a4;--soft:#e5e9fa;--yellow:#f2c344;--purple:#8574d5;--red:#eb6651;--green:#4baf91;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 'Atkinson Hyperlegible',Verdana,sans-serif}body.dark{--bg:#11151e;--panel:#1b2230;--stage:#101722;--ink:#eef1f8;--muted:#abb8cc;--line:#354255;--accent:#aebcff;--soft:#2b3655;color-scheme:dark}.wrap{max-width:880px;margin:auto;padding-inline:24px}h1,h2,h3,button,.primary,nav{font-family:'Bricolage Grotesque','Avenir Next',system-ui,sans-serif}h1,h2,h3,p{margin:0}h1{font-size:clamp(3.4rem,9vw,5.6rem);line-height:1;letter-spacing:-.055em}h2{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.12;letter-spacing:-.035em}h3{font-size:1.12rem;line-height:1.3}a{color:var(--accent)}button,a,input{touch-action:manipulation}button{cursor:pointer;font-size:.9rem;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:9px 13px;color:var(--ink);background:var(--panel);min-height:42px}button:hover{border-color:var(--accent);background:var(--soft)}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.hero{padding-block:30px 40px;display:grid;gap:23px}.brand{display:flex;align-items:center;gap:12px;font-size:.69rem;font-weight:bold;letter-spacing:.15em;margin-bottom:28px}.brand button{margin-left:auto;font-size:.8rem}.beadmark{display:inline-flex;gap:5px}.beadmark i{width:13px;height:13px;border-radius:50%;background:var(--yellow)}.beadmark i:nth-child(2){background:var(--purple)}.beadmark i:nth-child(3){background:var(--red)}.beadmark i:nth-child(4){background:var(--green)}.eyebrow{text-transform:uppercase;font-size:.7rem;letter-spacing:.14em;font-weight:bold;color:var(--muted)}.dot{color:var(--purple)}.lede{font-size:clamp(1.35rem,4vw,1.9rem);line-height:1.3;letter-spacing:-.02em}.intro{max-width:65ch;color:var(--muted)}.hero-bottom{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.hero-bottom>span{font-size:.77rem;color:var(--muted)}.primary{background:var(--ink);color:var(--panel);border-radius:8px;padding:12px 16px;text-decoration:none;font-weight:bold}.primary span{margin-left:16px}.topnav{position:sticky;top:0;z-index:10;background:var(--bg);border-block:1px solid var(--line)}.topnav .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-block:12px}.topnav a{font-size:.75rem;text-decoration:none;color:var(--muted)}.topnav b{display:block;color:var(--ink);font-size:.85rem}main{display:grid;gap:70px;padding-block:45px 65px}section{display:grid;gap:21px;scroll-margin-top:95px}section>p{max-width:76ch}.step-head{display:flex;gap:16px;align-items:center}.step-head .eyebrow{margin-bottom:5px}.num{display:grid;place-items:center;flex:none;width:49px;height:49px;border-radius:50%;background:var(--ink);color:var(--panel);font:500 1rem 'JetBrains Mono',monospace}.num.yellow{background:var(--yellow);color:#23212a}.num.green{background:var(--green);color:#112b27}.num.purple{background:var(--purple);color:#161126}.tricks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tricks article{border-top:2px solid var(--line);padding-top:12px}.tricks p{font-size:.9rem;color:var(--muted);margin-top:7px}.angle{font:500 .85rem 'JetBrains Mono',monospace;color:var(--accent)}.rule{padding:17px 20px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 9px 9px 0}.rule p{font-size:.95rem;margin-top:5px}details{border-block:1px solid var(--line);padding:15px 0}summary{cursor:pointer;font-weight:bold}details p{margin-top:14px;font-size:.95rem;color:var(--muted)}.widget{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:13px;min-width:0;box-shadow:0 8px 22px #101a3010}.stage{background:var(--stage);border-radius:8px;position:relative;overflow:hidden}.stage canvas{display:block;width:100%;height:340px;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.watch{position:absolute;inset:12px 12px auto;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.watch span{border-radius:20px;background:var(--panel);border:1px solid var(--line);font:500 .67rem 'JetBrains Mono',monospace;padding:4px 8px}.hint{position:absolute;bottom:9px;right:12px;font-size:.68rem;color:var(--muted);pointer-events:none}.controls,.transport{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.controls .label{font-size:.73rem;color:var(--muted);margin-right:3px}.transport{border-top:1px solid var(--line);padding-top:12px}.transport .play{background:var(--accent);color:var(--panel)}.progress{font:500 .72rem 'JetBrains Mono',monospace;color:var(--muted);margin-left:auto}.caption{background:var(--soft);border-radius:8px;padding:12px 15px;min-height:82px;font-size:.95rem}.caption b{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}.map{display:grid;gap:5px}.map-title{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted)}.bead-row{display:grid;grid-template-columns:55px 1fr 16px 1fr;gap:5px;align-items:center}.row-label{font-size:.7rem;color:var(--muted)}.half{display:flex;gap:3px;justify-content:center;padding:3px;border-radius:5px;background:var(--stage)}.bead{padding:0;min-height:0;width:clamp(14px,2.9vw,27px);height:clamp(14px,2.9vw,27px);border-radius:50%;flex:0 1 27px;border:2px solid transparent;color:#141826;background:var(--bead)!important;font:700 clamp(7px,1.7vw,10px) system-ui;position:relative}.bead.selected{border-color:var(--ink)}.bead.tracked:after{content:'';position:absolute;inset:32%;border-radius:50%;background:white;box-shadow:0 0 0 1px #121827}.seam{font-size:.7rem;color:var(--muted);text-align:center}.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.photos img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px}.photos a:hover{outline:3px solid var(--accent);border-radius:8px}footer{padding-block:25px 45px;border-top:1px solid var(--line);display:flex;gap:15px;align-items:center;font-size:.8rem;color:var(--muted)}footer a{margin-left:auto}@media(max-width:600px){.wrap{padding-inline:16px}.brand{margin-bottom:13px}.hero{padding-top:20px}.topnav .wrap{gap:5px}.topnav b{font-size:.68rem}.topnav a{font-size:.65rem}.tricks{grid-template-columns:1fr;gap:14px}.stage canvas{height:290px}.widget{padding:9px}.bead-row{grid-template-columns:42px 1fr 10px 1fr;gap:2px}.half{gap:2px;padding:3px 1px}.photos{grid-template-columns:repeat(2,1fr)}.controls button{font-size:.78rem;padding:7px 9px}.caption{min-height:110px}footer{flex-wrap:wrap}footer p{flex-basis:80%}.progress{font-size:.65rem}.map-title{font-size:.62rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep beads round as the all-bead map contracts on small screens. */
.bead{flex-basis:clamp(14px,2.9vw,27px);height:auto;aspect-ratio:1;min-width:0}