@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.390ncx5urfkfu.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.21jp631_3pja2.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_a71539c9-module__T19VSG__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_a71539c9-module__T19VSG__variable{--font-geist-sans:"Geist", "Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.31988l_ccedte.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_8d43a2aa-module__8Li5zG__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_8d43a2aa-module__8Li5zG__variable{--font-geist-mono:"Geist Mono", "Geist Mono Fallback"}
:root{--bg:#f6f1e7;--surface:#fffaf0;--ink:#1d1a16;--muted:#6b6257;--line:#d9cfbf;--amber:#d98a1c;--blue:#2f6fae;--green:#3c8d5a;--red:#c8442b;--violet:#7a4fb0;--teal:#1f8a8a}@media (prefers-color-scheme:dark){:root{--bg:#12110f;--surface:#1c1a17;--ink:#efe8db;--muted:#a39887;--line:#3a352e;--amber:#f2a541;--blue:#5fa3e0;--green:#5fbf7f;--red:#ef6b4f;--violet:#a982e0;--teal:#4cc2c2}}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:var(--font-geist-sans), system-ui, sans-serif;margin:0;line-height:1.55}a{color:var(--amber);text-underline-offset:3px}main{max-width:1080px;margin:0 auto;padding:0 16px 64px}.hero{max-width:720px;padding:72px 0 32px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--amber);margin:0;font-size:.75rem;font-weight:600}h1{letter-spacing:-.02em;margin:8px 0 16px;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05}.lede{color:var(--muted);margin:0 0 20px;font-size:1.15rem}.credit-banner{border-left:3px solid var(--amber);background:var(--surface);margin:0;padding:8px 14px}section{border-top:1px solid var(--line);padding:48px 0}h2{margin:0 0 8px;font-size:1.6rem}.num{font-family:var(--font-geist-mono), monospace;color:var(--amber);margin-right:8px;font-size:1rem}.intro{color:var(--muted);max-width:680px;margin:0 0 24px}.explorer{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:32px;display:grid}@media (max-width:800px){.explorer{grid-template-columns:1fr}}.circle-wrap{width:100%;max-width:520px;margin:0 auto}.panel{flex-direction:column;gap:18px;display:flex}button{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:8px 16px;transition:border-color .15s,background .15s,transform .1s}button:hover{border-color:var(--amber)}button:active{transform:scale(.97)}button.ghost{align-self:flex-start}.key-controls{align-items:center;gap:16px;display:flex}.key-now{flex-direction:column;align-items:center;min-width:64px;display:flex}.key-now strong{font-size:2rem;line-height:1}.shape-buttons{flex-wrap:wrap;gap:8px;display:flex}.shape-buttons button{align-items:center;gap:8px;display:inline-flex}.shape-buttons button.active{border-color:var(--c);background:color-mix(in srgb, var(--c) 18%, var(--surface))}.swatch{background:var(--c);border-radius:50%;width:10px;height:10px}.shape-info{background:var(--surface);border:1px solid var(--line);border-radius:14px;flex-direction:column;gap:8px;padding:16px 18px;display:flex}.shape-info h3{margin:0;font-size:1.05rem}.shape-info p{color:var(--muted);margin:0}.note-list{font-family:var(--font-geist-mono), monospace;color:var(--ink)!important}.tone-circle{-webkit-user-select:none;user-select:none;width:100%;height:auto;display:block}.ring{fill:none;stroke:var(--line);stroke-width:1px}.degree-band{fill:none;stroke:var(--surface);stroke-width:36px}.degree{fill:var(--muted);text-anchor:middle;font-size:12px;font-family:var(--font-geist-mono), monospace}.degree-root{fill:var(--amber);font-weight:700}.center-key{fill:var(--ink);text-anchor:middle;opacity:.85;font-size:34px;font-weight:700}.shape{fill-opacity:.12;stroke-width:2.5px;stroke-linejoin:round;animation:.5s ease-out draw}.shape-vertex{stroke:none}@keyframes draw{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.note{cursor:pointer}.note circle{fill:var(--surface);stroke:var(--line);stroke-width:1px;transition:fill .2s,stroke .2s,r .2s}.note text{text-anchor:middle;fill:var(--ink);pointer-events:none}.note-key text{font-size:16px;font-weight:700}.note-small text{fill:var(--muted);font-size:9px}.note-small circle{fill:var(--bg)}.note:hover circle{stroke:var(--amber)}.note:focus{outline:none}.note:focus-visible circle{stroke:var(--amber);stroke-width:2.5px}.note.on circle{fill:var(--hl);stroke:var(--hl)}.note.on text{fill:#fff}.note.pulse circle{animation:.45s ease-out pulse}@keyframes pulse{0%{stroke-width:10px;stroke-opacity:.8}to{stroke-width:1px;stroke-opacity:1}}.transport{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.play{background:var(--amber);border-color:var(--amber);color:#1d1a16;padding:10px 20px;font-weight:700}.tempo{min-width:180px;color:var(--muted);flex-direction:column;flex:1;gap:4px;display:flex}.tempo input{accent-color:var(--amber);width:100%}.now-playing{min-height:3em;margin:0}.chart{border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.bar{border-right:1px solid var(--line);border-bottom:1px solid var(--line);justify-content:space-around;gap:4px;padding:10px 6px;display:flex}.bar:nth-child(4n){border-right:none}.bar:nth-last-child(-n+4){border-bottom:none}.chord{font-family:var(--font-geist-mono), monospace;white-space:nowrap;border-radius:6px;padding:2px 4px;font-size:.8rem;transition:background .1s}.chord.active{background:var(--amber);color:#1d1a16}@media (max-width:480px){.chord{padding:2px;font-size:.68rem}}.star{fill:none;stroke-width:2.5px;stroke-linejoin:round;stroke-dasharray:1;animation:1.2s ease-out both trace}@keyframes trace{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}.big-stat{margin:0;font-size:1.2rem}.stars .panel>p:not(.big-stat){color:var(--muted);margin:0}footer{border-top:1px solid var(--line);color:var(--muted);max-width:720px;padding-top:24px;font-size:.9rem}