@font-face{font-family:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/tonewheel/assets/quicksand-vietnamese-wght-normal-ei70gACF.woff2)format("woff2-variations");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:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/tonewheel/assets/quicksand-latin-ext-wght-normal-CrJ75Ewg.woff2)format("woff2-variations");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:Quicksand Variable;font-style:normal;font-display:swap;font-weight:300 700;src:url(/tonewheel/assets/quicksand-latin-wght-normal-Buj9m_3d.woff2)format("woff2-variations");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:Tonewheel Accidentals;src:url(data:font/woff2;base64,d09GMgABAAAAAAMwAA0AAAAABdgAAALhAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgADwRCAqCFIFrCwwAATYCJAMUBCAFhCgHIBvCBMgEHvi87P3fZEqus5rCWVAFlKbgaSGeLFzhuZhbXoh6XbTU1bT9BNk8IhpFk1rqhIwnTTsS1zlKojKMXdASuxCAE43ZCdG3/9AYHFAgoc3mGQ2J7tiywHdDsusrSrDm5NboWPMrcouxlmRWlWI1qiuzsXafGnpakbqYhwpyhkxA9pBAJNLQRe9e6axKRVWkxGU7ScZsYL40YMSIAZxEs5qq8b8CLIY8t5UmZIC8DExpOKRgkALL+GDXQPmgEERZUBBpzWpuY1yzGjab7dWjxeN3CoTNhju2VA9xgumQkU5mB0tBlmQq+76iuLs6KI2VdFfFZYyr6pLuLE84z7zGuJNBMWs3+sRvOdFo5UoxfrPTjI0ByYqTiFGdiRUxxIu2ooNwJh7iA+iLOomYX2kr4kUMqZdWXl7Zol1OO6Lzmk3pG6l1DtZif/ftHPl8W9PeK7vPX73DrfEyd4/3Y3jVpUGzu/Na+TS/UX56XGXjsWSEz/2S8/Vss6O93c80O+KU7TrXOd/5aLO9vT3PNDv6JX9e63m9PeZyl7ck54bOL7ic7t71m4O73cey0vPOl78EF18eHHDq39R/XVTDYpyfKwfoNzCmjv839d971UCm2azKBNKEAi+KUHThgy76oXfoVHlDc3rcxBTWbyrlQF4UKI6cXCZCOIGP8OMkbsKBs6MjNzmFVmzlVGJI4Cy0oH3CDV6HAqqoooxKOhNJJOvOpoJCyqjS0AgqEyUwukkF+UQygv4MZTgmVZgMo7pRmk04o8m9XE0JmVQQRy4V1VFMStHQiSCKKNrQBW25Sh6ZVE/wqQIKKaUKjSBqiCaCjkTQlgg6EE47cmhHFsHapsbltKkldjuAEYxgAF22OiMzd5HOPpiUUX8xVv6VwYH+jUJHRyOGAnLRBnWPpAKTInIxdLN6HdQquESrUp157Yl8BI3PqskigmxMDCIpnczKQ/Ag+UiMDVnBf1uVttlWoWMC)format("woff2");unicode-range:U+266D-266F;font-display:block;ascent-override:80%;descent-override:20%;line-gap-override:0%}*,:before,:after{box-sizing:border-box}:root{--font:"Quicksand Variable", "Tonewheel Accidentals", system-ui, sans-serif;font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{min-height:100svh;margin:0}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg-top:#f8f7f5;--bg-bottom:#eeeeef;--panel:#fcfcfb;--panel-bright:#fff;--ink:#4b4a4f;--muted:#9a999b;--faint:#c5c3c1;--line:#e3e2df;--wedge-off:#ebeae7;--wedge-on:#5d5c62;--band:#f1f0ee;--band-active:#e6e4e1;--deg-1:#e15b64;--deg-2:#e58a4e;--deg-3:#cfa018;--deg-4:#57b26a;--deg-5:#4f9fd0;--deg-6:#7178cf;--deg-7:#a86fc9;--accent:var(--deg-1);--handle:#b8b6b2;--kb-white:#fff;--kb-black:#55545a;--shadow-face:drop-shadow(0 2px 5px #4b4a4f12);--shadow-hub:drop-shadow(0 1px 3px #4b4a4f14)}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-top:#1d1d20;--bg-bottom:#161618;--panel:#242428;--panel-bright:#2c2c30;--ink:#d8d7dc;--muted:#8f8e94;--faint:#55545b;--line:#38373d;--wedge-off:#2f2f34;--wedge-on:#cfced4;--band:#2a2a2e;--band-active:#35353a;--deg-1:#e8707a;--deg-2:#ea9a60;--deg-3:#d9b13c;--deg-4:#68c07b;--deg-5:#66aede;--deg-6:#8890dc;--deg-7:#b884d6;--handle:#5a595f;--kb-white:#3a3a40;--kb-black:#1a1a1d;--shadow-face:drop-shadow(0 2px 6px #00000073);--shadow-hub:drop-shadow(0 1px 3px #00000080)}body{background-color:var(--bg-bottom);color:var(--ink);overflow-x:clip}body:before,body:after{content:"";z-index:-1;pointer-events:none;transition:opacity .3s;position:fixed;inset:0}body:before{background:linear-gradient(#f8f7f5,#eeeeef)}body:after{opacity:0;background:linear-gradient(#1d1d20,#161618)}[data-theme=dark] body:before{opacity:0}[data-theme=dark] body:after{opacity:1}html.theme-fading body,html.theme-fading body *{transition:background-color .3s,color .3s,fill .3s,stroke .3s,filter .3s,opacity .3s,transform .22s cubic-bezier(.34,1.3,.5,1)!important}.app{flex-direction:column;justify-content:safe center;align-items:center;gap:24px;min-height:100svh;padding:40px 24px;display:flex}.readout{text-align:center;max-width:100%}.scale-name{letter-spacing:.01em;white-space:nowrap;height:1.25em;margin:0;font-size:clamp(28px,9vw,44px);font-weight:330;line-height:1.25}.scale-notes{color:var(--muted);letter-spacing:.18em;white-space:pre;height:1.4em;margin:8px 0 0;font-size:15px;font-weight:450;line-height:1.4}.wheel{touch-action:none;-webkit-user-select:none;user-select:none;width:min(600px,94vw);height:auto}.gear,.gear text{transition:transform .22s cubic-bezier(.34,1.3,.5,1)}.gear.dragging,.gear.dragging text{transition:none}.hit{fill:none;stroke:#0000;pointer-events:stroke;cursor:grab}.hit:active{cursor:grabbing}.face{fill:var(--panel);stroke:var(--line);stroke-width:1.5px;filter:var(--shadow-face)}.notch{stroke:var(--accent);stroke-width:5px;stroke-linecap:round}.gear text.degree-number{paint-order:stroke;stroke:var(--panel);stroke-width:3.5px;stroke-linejoin:round;opacity:0;font-size:15px;font-weight:550;transition:transform .22s cubic-bezier(.34,1.3,.5,1),opacity .18s,fill .24s}.gear.dragging text.degree-number{transition:opacity .18s,fill .24s}.gear text.degree-number.on{opacity:1}.degree-halo{pointer-events:none;filter:blur(4.5px);animation:.6s ease-out forwards halo-fade}@keyframes halo-fade{0%{opacity:.9}to{opacity:0}}.degree-1{fill:var(--deg-1)}.degree-2{fill:var(--deg-2)}.degree-3{fill:var(--deg-3)}.degree-4{fill:var(--deg-4)}.degree-5{fill:var(--deg-5)}.degree-6{fill:var(--deg-6)}.degree-7{fill:var(--deg-7)}.handle{fill:none;stroke:var(--handle);stroke-width:1.4px;stroke-linecap:round;transition:stroke .16s}.key-ring{fill:none;stroke:var(--band);stroke-width:20px}.key-ring-edge{fill:none;stroke:var(--line);stroke-width:1px}.clutch-pad{stroke:var(--handle);stroke-width:6px;stroke-linecap:round;stroke-dashoffset:43px;transition:stroke-dashoffset .17s cubic-bezier(.34,1.3,.5,1),stroke .16s}.wheel.key-hover .clutch-pad{stroke:var(--muted)}.wheel.key-engaged .clutch-pad{stroke-dashoffset:0;stroke:var(--muted)}.wheel.key-hover .follows .handle{stroke:var(--muted)}.wheel.key-engaged .follows .handle,.wheel.key-engaged .key-handle{stroke:var(--ink)}.wheel.key-engaged .follows{transition:none}.key-rim-knurl,.key-grip-ticks{stroke-width:2.2px}.wheel.key-style-rim.key-hover .key-handle,.wheel.key-style-segments.key-hover .key-handle{stroke:var(--muted)}.key-grip-ticks{transition:stroke .16s,stroke-width .2s cubic-bezier(.34,1.3,.5,1)}.wheel.key-style-segments.key-hover .key-grip-ticks{stroke-width:2.8px}.key-grip{transition:transform .2s cubic-bezier(.34,1.3,.5,1)}.wheel.key-style-segments.key-hover .key-grip{transform:scale(.9965)}.wheel.key-style-segments.key-engaged .key-grip{transform:scale(.9905)}.wheel.key-style-rim.key-hover .follows .root-ring,.wheel.key-style-rim.key-hover .follows .scale-band,.wheel.key-style-rim.key-engaged .follows .root-ring,.wheel.key-style-rim.key-engaged .follows .scale-band,.wheel.key-style-segments.key-hover .follows .root-ring,.wheel.key-style-segments.key-hover .follows .scale-band,.wheel.key-style-segments.key-engaged .follows .root-ring,.wheel.key-style-segments.key-engaged .follows .scale-band{stroke:var(--band-active)}.wheel.key-style-rim.key-hover .follows .capsule:not(.on),.wheel.key-style-rim.key-engaged .follows .capsule:not(.on),.wheel.key-style-segments.key-hover .follows .capsule:not(.on),.wheel.key-style-segments.key-engaged .follows .capsule:not(.on){fill:var(--band-active)}.gear.stays{transition:transform .22s cubic-bezier(.34,1.3,.5,1),opacity .2s}.gear.stays.dragging{transition:opacity .2s}.wheel.key-style-rim.key-engaged .stays,.wheel.key-style-segments.key-engaged .stays{opacity:.6}.wheel.middle-hover .gear-middle .handle,.wheel.root-hover .gear-root .handle{stroke:var(--muted)}.gear-middle.dragging .handle,.gear-root.dragging .handle{stroke:var(--ink)}.wheel.middle-hover .gear-middle .scale-band,.gear-middle.dragging .scale-band{stroke:var(--band-active)}.wheel.middle-hover .gear-middle .capsule:not(.on),.gear-middle.dragging .capsule:not(.on){fill:var(--band-active)}.wheel.root-hover .gear-root .root-ring,.gear-root.dragging .root-ring{stroke:var(--band-active)}.root-ring{fill:none;stroke:var(--band);stroke-width:26px;transition:stroke .16s}.root-dot{fill:var(--line)}.root-pointer{fill:var(--accent)}.root-pointer-dot{fill:var(--panel-bright)}.scale-band{fill:none;stroke:var(--band);stroke-width:14px;transition:stroke .16s}.scale-arc{fill:none;stroke:var(--wedge-on);stroke-width:14px;stroke-linecap:round}.scale-arc-dot{fill:var(--wedge-on)}.slot-dot{fill:var(--line)}.capsule{fill:var(--wedge-off);transition:fill .16s}.capsule.on{fill:var(--wedge-on)}.tonic-dot{fill:var(--panel)}.note-label{fill:var(--faint);font-size:17px;font-weight:330}@keyframes note-label-in{0%{opacity:0}}@keyframes note-label-out{to{opacity:0}}.gear text.note-label{animation:.24s note-label-in}.gear text.note-label.ghost{pointer-events:none;animation:.24s forwards note-label-out}.note-label.in-scale{fill:var(--ink);font-weight:400}.note-label.root{fill:var(--accent)}.hub{fill:var(--panel-bright);stroke:var(--line);stroke-width:1.5px;filter:var(--shadow-hub)}.hub-caption{letter-spacing:.28em;fill:var(--muted);font-size:9px;font-weight:500}.hub-note{fill:var(--ink);font-size:34px;font-weight:420}.keyboard{-webkit-user-select:none;user-select:none;touch-action:manipulation;width:min(470px,92vw);height:auto}.kb-key{cursor:pointer;transition:transform 90ms}.kb-key:active{transform:translateY(1.5px)}.kb-white{fill:var(--kb-white);stroke:var(--line);stroke-width:1px;filter:var(--shadow-hub)}.kb-black{fill:var(--kb-black);filter:var(--shadow-hub)}.kb-coin{pointer-events:none;opacity:0;transition:opacity .18s,transform .26s cubic-bezier(.34,1.5,.5,1),fill .24s;transform:scale(.5)}.kb-coin.on{opacity:1;transform:scale(1)}.kb-coin-cast{fill:none}.kb-coin-numeral{pointer-events:none;fill:#fff;opacity:0;font-size:12px;font-weight:600;transition:opacity .18s}.kb-coin-numeral.black{font-size:10.5px}.kb-coin-numeral.on{opacity:1}.kb-halo{pointer-events:none;filter:blur(6px);animation:.6s ease-out forwards halo-fade}.controls{flex-direction:column;align-items:center;gap:16px;display:flex}.families{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.chip{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500}.chip.active{background:var(--wedge-on);border-color:var(--wedge-on);color:var(--panel-bright)}.hint{text-align:center;max-width:420px;color:var(--muted);margin:0;font-size:13px;line-height:1.5}.theme-dial{cursor:pointer;background:0 0;border:none;border-radius:50%;width:42px;height:42px;padding:0;position:fixed;top:12px;left:12px}.theme-dial:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-dial svg{width:100%;height:100%;display:block}.dial-face{fill:var(--panel);stroke:var(--line);stroke-width:1.5px;filter:var(--shadow-hub)}.dial-rotor{transition:transform .22s cubic-bezier(.34,1.3,.5,1)}.theme-dial:hover .handle{stroke:var(--muted)}.dial-glyph{fill:var(--muted);transition:opacity .18s}.dial-rays{fill:none;stroke:var(--muted);stroke-width:1.4px;stroke-linecap:round}.dial-moon,[data-theme=dark] .dial-sun{opacity:0}[data-theme=dark] .dial-moon{opacity:1}.dev-panel{background:var(--panel);border:1px dashed var(--faint);max-width:min(460px,100vw - 24px);color:var(--muted);border-radius:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding:8px 12px;font-size:12px;display:flex;position:fixed;top:12px;right:12px}.dev-tag{letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600}.dev-field{align-items:center;gap:6px;display:flex}.dev-panel select{font:inherit;color:var(--ink);background:var(--panel-bright);border:1px solid var(--line);border-radius:8px;padding:3px 6px}.dev-panel input[type=range]{width:60px;accent-color:var(--accent)}.dev-value{font-variant-numeric:tabular-nums;min-width:38px;color:var(--ink)}[data-look=monument]{--mv-plate:#d9d7d3;--mv-plate-active:#e2e0dc;--mv-face:#fcfcfb;--mv-track:#f0efec;--mv-track-active:#e5e3e0;--mv-ring:#e2e0dd;--mv-ring-active:#d5d3cf;--mv-solid:#5d5c62;--mv-letter:#c5c3c1;--mv-letter-strong:#4b4a4f;--mv-socket:#4b4a4f1f;--mv-coin-text:#fff;--mv-wedge-alpha:.16;--mv-shadow:#4b4a4f29;--mv-cast:#4b4a4f;--mv-cast-alpha:.16}[data-look=monument][data-theme=dark]{--mv-plate:#3a3a40;--mv-plate-active:#45454b;--mv-face:#242428;--mv-track:#2d2d32;--mv-track-active:#38383e;--mv-ring:#343439;--mv-ring-active:#404046;--mv-solid:#cfced4;--mv-letter:#55545b;--mv-letter-strong:#d8d7dc;--mv-socket:#d8d7dc1f;--mv-coin-text:#fffdf8;--mv-wedge-alpha:.24;--mv-shadow:#00000073;--mv-cast:#000;--mv-cast-alpha:.45}[data-look=monument][data-palette=dawn]{--mv-plate:#ddb897;--mv-plate-active:#e6c7a9;--mv-face:#faf3e6;--mv-track:#efe2cc;--mv-track-active:#e9d7b8;--mv-ring:#cfdccf;--mv-ring-active:#bed3c2;--mv-solid:#55506b;--mv-letter:#8a7d6d;--mv-letter-strong:#55483a;--mv-socket:#7a4f3824;--mv-coin-text:#fffdf8;--mv-wedge-alpha:.16;--mv-shadow:#7a4a3238;--mv-cast:#7a4a32;--mv-cast-alpha:.22;--kb-white:#fffdf6;--kb-black:#55506b;--panel:#f9f2e3;--panel-bright:#fffdf6;--ink:#4f4335;--muted:#9a8875;--faint:#c9b8a2;--line:#e7d6c0;--wedge-on:#55506b;--shadow-face:drop-shadow(0 2px 0 #7a4a322e);--shadow-hub:drop-shadow(0 2px 0 #7a4a322e)}[data-look=monument][data-palette=dawn][data-theme=dark]{--mv-plate:#3b3d68;--mv-plate-active:#474a7c;--mv-face:#2b2c4e;--mv-track:#37385f;--mv-track-active:#424373;--mv-ring:#3d4f4b;--mv-ring-active:#4a635c;--mv-solid:#ece6f4;--mv-letter:#9b95b8;--mv-letter-strong:#e9e4f4;--mv-socket:#e9e4f41f;--mv-coin-text:#fffdf8;--mv-wedge-alpha:.24;--mv-shadow:#00000073;--mv-cast:#000;--mv-cast-alpha:.45;--kb-white:#414272;--kb-black:#191932;--panel:#2b2c4e;--panel-bright:#363764;--ink:#e9e4f4;--muted:#9b95b8;--faint:#5b5c86;--line:#42436f;--wedge-on:#ece6f4;--shadow-face:drop-shadow(0 2px 0 #0006);--shadow-hub:drop-shadow(0 2px 0 #0006)}[data-look=monument][data-palette=dawn] body:before{background:linear-gradient(#f6eee1,#edd5c4)}[data-look=monument][data-palette=dawn] body:after{background:linear-gradient(#272848,#131327)}.mv-cast{pointer-events:none;fill:var(--mv-cast,transparent);stroke:var(--mv-cast,transparent);opacity:var(--mv-cast-alpha,0);transition:transform .22s}.cast-plate{transform:translateY(5px)}.cast-band{transform:translateY(3px)}.mv-plate-cast{stroke-width:8px;stroke-linejoin:round}.mv-root-ring-cast,.mv-scale-track-cast{fill:none;stroke-width:26px}.mv-pointer-cast{stroke-width:5px;stroke-linejoin:round}.mv-face{fill:var(--mv-face);filter:drop-shadow(0 4px 0 var(--mv-shadow))}.mv-plate{fill:var(--mv-plate);stroke:var(--mv-plate);stroke-width:8px;stroke-linejoin:round;transition:fill .16s,stroke .16s}.wheel-monument.key-hover .mv-plate,.wheel-monument.key-engaged .mv-plate{fill:var(--mv-plate-active);stroke:var(--mv-plate-active)}.wheel-monument.key-engaged .cast-band{transform:translateY(7px)}.wheel-monument.key-engaged .stays{opacity:.65}.wheel-monument.key-hover .follows .mv-root-ring,.wheel-monument.key-engaged .follows .mv-root-ring{stroke:var(--mv-ring-active)}.wheel-monument.key-hover .follows .mv-scale-track,.wheel-monument.key-engaged .follows .mv-scale-track,.wheel-monument.middle-hover .gear-middle .mv-scale-track,.wheel-monument .gear-middle.dragging .mv-scale-track{stroke:var(--mv-track-active)}.wheel-monument.root-hover .gear-root .mv-root-ring,.wheel-monument .gear-root.dragging .mv-root-ring{stroke:var(--mv-ring-active)}.mv-root-ring{fill:none;stroke:var(--mv-ring);stroke-width:26px;transition:stroke .16s}.mv-root-dot,.mv-slot-dot,.mv-socket{fill:var(--mv-socket)}.mv-pointer{fill:var(--accent);stroke:var(--accent);stroke-width:5px;stroke-linejoin:round}.mv-scale-track{fill:none;stroke:var(--mv-track);stroke-width:26px;transition:stroke .16s}.mv-scale-arc{fill:none;stroke:var(--mv-solid);stroke-width:26px;stroke-linecap:round}.mv-scale-arc-dot{fill:var(--mv-solid)}.mv-tonic-dot{fill:var(--mv-face);opacity:.85}.mv-wedge{stroke-width:6px;stroke-linejoin:round;opacity:0;transition:opacity .2s,fill .24s,stroke .24s}.mv-wedge.on{opacity:var(--mv-wedge-alpha)}.wheel-monument .note-label{fill:var(--mv-letter);font-size:13px;font-weight:450}.wheel-monument .note-label.in-scale{fill:var(--mv-letter-strong);font-weight:550}.wheel-monument .note-label.root{fill:var(--accent)}.mv-coin{opacity:0;transition:opacity .18s,transform .26s cubic-bezier(.34,1.5,.5,1),fill .24s;transform:scale(.5)}.mv-coin.on{opacity:1;transform:scale(1)}.mv-coin-cast{fill:var(--mv-shadow,transparent)}.wheel-monument .gear text.mv-coin-numeral{fill:var(--mv-coin-text);opacity:0;font-size:19px;font-weight:600;transition:transform .22s cubic-bezier(.34,1.3,.5,1),opacity .18s}.wheel-monument .gear.dragging text.mv-coin-numeral{transition:opacity .18s}.wheel-monument .gear text.mv-coin-numeral.on{opacity:1}.mv-halo{pointer-events:none;filter:blur(7px);animation:.62s ease-out forwards mv-halo-fade}@keyframes mv-halo-fade{0%{opacity:.95;transform:scale(.9)}to{opacity:0;transform:scale(1.5)}}.mv-hub{fill:var(--accent);filter:drop-shadow(0 3px 0 var(--mv-shadow))}.wheel-monument .hub-caption{fill:var(--mv-coin-text);opacity:.7}.wheel-monument .hub-note{fill:var(--mv-coin-text);font-size:32px;font-weight:500}[data-look=monument] .kb-white{stroke:none;filter:drop-shadow(0 3px 0 var(--mv-shadow))}[data-look=monument] .kb-black{filter:drop-shadow(0 2px 0 var(--mv-shadow))}[data-look=monument] .kb-coin-cast{fill:var(--mv-shadow)}[data-look=monument] .kb-coin-numeral{fill:var(--mv-coin-text)}