@font-face{font-family:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/scales/assets/outfit-latin-ext-wght-normal-DdQaqQDo.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:Outfit Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/scales/assets/outfit-latin-wght-normal-Bc-8i84L.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:Accidentals;src:url(data:font/woff2;base64,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)format("woff2");unicode-range:U+266D-266F,U+1D12A-1D12B;size-adjust:125%;ascent-override:75%;descent-override:20%;line-gap-override:0%;font-display:block}:root{--bg:#1f262f;--bg-sidebar:#1a2028;--surface:#262e38;--border:#36404c;--text:#eef1f4;--text-soft:#c4cbd3;--muted:#8c96a3;--dim:#66707d;--line:#707a87;--gold:#ffd830;--green:#00e19e;--pink:#ff4c7a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-feature-settings:"tnum";color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Accidentals,Outfit Variable,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0}button,select{font:inherit;color:inherit}button{cursor:pointer}a{color:var(--pink);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--pink);outline-offset:2px}html,body,#root{height:100%;overflow:hidden}.app{grid-template-columns:272px 1fr;height:100dvh;display:grid}.sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;gap:20px;min-height:0;padding:24px 16px 20px;display:flex}.stage{flex-direction:column;align-items:center;min-width:0;min-height:0;padding:24px 24px 18px;display:flex;overflow:hidden}.stage>*{flex-shrink:0}.mobile-header{display:none}.brand{color:var(--green);letter-spacing:.01em;align-items:center;gap:10px;padding:0 8px;font-size:1.25rem;font-weight:600;display:inline-flex}.brand:hover{text-decoration:none}.brand svg{width:26px;height:26px}.brand .root{fill:var(--gold)}.brand .in-scale{fill:var(--green)}.brand .out-of-scale{fill:var(--dim)}.credits{color:var(--muted);margin:0;padding:0 8px;font-size:.875rem}.scale-list{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;min-height:0;margin:0 -8px;padding:0 8px;overflow-y:auto}.scale-list section+section{margin-top:18px}.scale-list h2{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px;padding:0 8px;font-size:.75rem;font-weight:500}.scale-list ul{margin:0;padding:0;list-style:none}.scale-list button{width:100%;color:var(--text-soft);text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;padding:6px 8px;font-size:.95rem;display:flex}.scale-list button:hover{color:var(--text);background:#ffffff0d}.scale-list button[aria-current=true]{color:var(--green);background:#00e19e1a}.note-count{color:var(--dim);font-size:.8rem}.scale-list button[aria-current=true] .note-count{color:inherit;opacity:.7}.title-row{grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;width:100%;max-width:640px;display:grid}.title{border-radius:10px;justify-self:center;min-width:0;position:relative}.title h1{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.3em;margin:0;padding:2px 8px;font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:500;line-height:1.15;display:flex}.title-root{color:var(--gold)}.title-name{color:var(--green)}.title-caret{fill:none;width:.6em;height:.6em;stroke:var(--muted);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.title select{opacity:0;cursor:pointer;width:100%;font-size:16px;position:absolute;inset:0}.title:hover .title-caret{stroke:var(--pink)}.title:has(select:focus-visible){outline:2px solid var(--pink);outline-offset:2px}.step-button{border:1px solid var(--border);width:44px;height:44px;color:var(--text-soft);background:0 0;border-radius:50%;place-items:center;padding:0;transition:border-color .15s,color .15s;display:grid}.step-button:hover{border-color:var(--pink);color:var(--pink)}.step-button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.meta{color:var(--muted);text-align:center;margin:8px 0 0;font-size:.95rem}.link{color:var(--pink);background:0 0;border:0;padding:0}.link:hover{text-decoration:underline}.formula{color:var(--text-soft);align-items:baseline;gap:.7em;margin:6px 0 0;font-size:.95rem;display:flex}.formula .root{color:var(--gold)}.circle-area{flex:1 1 0;justify-content:center;width:100%;min-height:0;margin-top:8px;display:flex;position:relative}.sound-hint{border:1px solid var(--border);background:var(--bg);color:var(--text-soft);white-space:nowrap;pointer-events:none;border-radius:999px;margin:0;padding:6px 14px;font-size:.85rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (hover:none){.sound-hint{display:none}}.note-circle{-webkit-user-select:none;user-select:none;width:100%;max-width:620px;height:100%;overflow:visible}.interval-lines path{fill:none;stroke:var(--line);stroke-width:.35px;stroke-linecap:round;stroke-linejoin:round}.interval-labels text{fill:var(--muted);text-anchor:middle;font-size:3.4px}.note{cursor:pointer;transform-box:fill-box;transform-origin:50%;outline:none}.note-ring{fill:#ffffff08;stroke:var(--dim);stroke-width:.5px;transition:stroke .3s,fill .3s}.note.in-scale .note-ring{fill:#00e19e14;stroke:var(--green);stroke-width:.6px}.note.root .note-ring{fill:#ffd8301a;stroke:var(--gold);stroke-width:.6px}.note:hover .note-ring{fill:#ffffff1a}.note:focus-visible .note-ring{stroke:var(--pink);stroke-width:.9px}.note-flash{fill:#fff;opacity:0;pointer-events:none}.note-name{fill:var(--dim);text-anchor:middle;pointer-events:none;font-size:5px;font-weight:500;transition:fill .3s}.note.in-scale .note-name,.note.root .note-name{fill:var(--text)}.note-degree{text-anchor:middle;font-size:3.5px;font-weight:500}.note-degree.in-scale{fill:var(--green)}.note-degree.root{fill:var(--gold)}.keyboard{touch-action:manipulation;-webkit-user-select:none;user-select:none;width:min(100%,320px);margin-top:6px}.key{cursor:pointer;stroke:var(--bg);stroke-width:.5px;transition:fill .25s}.key.white{fill:#3a4450}.key.white:hover{fill:#47525f}.key.black{fill:#12161b}.key.black:hover{fill:#222932}.key.in-scale,.key.in-scale:hover{fill:var(--green)}.key.root,.key.root:hover{fill:var(--gold)}.play-button{border:2px solid var(--pink);color:var(--text);background:0 0;border-radius:999px;justify-self:center;align-items:center;gap:10px;padding:10px 22px 10px 18px;font-size:1rem;font-weight:500;transition:background .15s;display:inline-flex}.play-button:hover,.play-button[aria-pressed=true]{background:#ff4c7a24}.play-button svg{width:18px;height:18px;fill:var(--pink)}.bottom-row{grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;width:100%;max-width:640px;margin-top:16px;display:grid}.line-style-picker{text-align:right;justify-self:end}.control{border:0;min-width:0;margin:0;padding:0}.control legend{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;padding:0;font-size:.75rem;font-weight:500}.root-picker{align-items:center;gap:12px;width:100%;max-width:640px;margin-top:16px;display:flex}.root-picker legend{float:left;margin:0}.segmented{border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;gap:2px;padding:3px;display:inline-flex}.segmented button{min-width:40px;color:var(--text-soft);background:0 0;border:0;border-radius:9px;padding:6px 12px;font-size:.95rem;transition:background .15s,color .15s}.segmented button:hover{color:var(--text);background:#ffffff0f}.segmented button[aria-pressed=true]{color:var(--pink);background:#ff4c7a29}.root-picker .segmented{flex:1;grid-template-columns:repeat(12,minmax(0,1fr));display:grid}.root-picker .segmented button{min-width:0;padding:6px 0}.shortcuts{color:var(--dim);margin:14px 0 0;font-size:.8rem}kbd{border:1px solid var(--border);min-width:1.6em;color:var(--muted);font:inherit;text-align:center;border-radius:5px;padding:1px 5px;display:inline-block}@media (width<=899px){.app{flex-direction:column;display:flex}.sidebar{display:none}.stage{flex:1;padding:12px 16px 16px}.mobile-header{justify-content:space-between;align-items:center;width:100%;margin-bottom:10px;display:flex}.mobile-header .brand{padding:0;font-size:1.05rem}.mobile-header .brand svg{width:22px;height:22px}.mobile-header .credits{padding:0;font-size:.8rem}.title-row{grid-template-columns:40px minmax(0,1fr) 40px}.title h1{font-size:clamp(1.25rem,6vw,1.6rem)}.step-button{width:40px;height:40px}.meta{margin-top:4px;font-size:.85rem}.formula{font-size:.85rem}.root-picker{margin-top:10px}.root-picker legend{display:none}.root-picker .segmented button{padding:6px 0;font-size:.8rem}.bottom-row{grid-template-columns:auto auto;justify-content:space-between;row-gap:12px;margin-top:12px}.play-button{grid-area:1/1/auto/-1;padding:8px 20px 8px 16px}.spelling-picker{grid-area:2/1}.line-style-picker{grid-area:2/2}.segmented button{min-width:0;padding:5px 10px;font-size:.875rem}}@media (width>=900px) and (height<=820px){.shortcuts{display:none}.keyboard{width:min(100%,260px)}}@media (width<=899px) and (height<=760px){.formula{display:none}.keyboard{width:min(100%,240px)}}@media (hover:none){.shortcuts{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}