:root{--kb-white:#fffdf9;--kb-white-in:#ddf1e2;--kb-black:#1f1b17;--kb-black-in:#2c6b3d;--kb-edge:#1f1b17;--kb-name:#6b6258;--kb-name-in:#1e6e38;--kb-black-ink:#d8cfc2;--kb-lit:#f7d27a;--kb-lit-black:#e09a12;--kb-down:#f0aa22;--kb-root:#f0aa22;--kb-in-dot:#2f9a4c}:root[data-theme=dark]{--kb-white:#e9e2d6;--kb-white-in:#c4e3cc;--kb-black:#100d0a;--kb-black-in:#24553a;--kb-edge:#050403;--kb-name:#5a5047;--kb-name-in:#1e5c33;--kb-black-ink:#b3a799}.kbwrap{width:100%;min-width:0}.kb{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent;width:100%;height:150px;display:flex;position:relative}@media (width>=720px){.kb{height:200px}}.kb__key{appearance:none;font:inherit;cursor:pointer;box-sizing:border-box;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;margin:0;padding:0;display:flex}.kb__key:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}.kb__key--w{background:var(--kb-white);border:1.5px solid var(--kb-edge);min-width:0;color:var(--kb-name);border-radius:0 0 6px 6px;flex:1 1 0;margin-left:-1.5px;padding-bottom:8px}.kb__key--w:first-child{border-radius:6px 0 6px 6px;margin-left:0}.kb__key--w:last-child{border-radius:0 6px 6px}.kb__key--b{z-index:1;background:var(--kb-black);border:1.5px solid var(--kb-edge);height:60%;color:var(--kb-black-ink);border-top:0;border-radius:0 0 4px 4px;padding-bottom:6px;position:absolute;top:0}.kb__name{font-family:var(--font-mono);white-space:nowrap;pointer-events:none;font-size:10px;font-weight:500;line-height:12px}.kb__hint{font-family:var(--font-mono);opacity:.6;pointer-events:none;font-size:10px;line-height:12px}.kb__dot{pointer-events:none;background:0 0;border-radius:50%;width:7px;height:7px;display:block}@media (hover:none) and (pointer:coarse){.kb__hint{display:none}}@media (width<=479px){.kb__name{font-size:9px}.kb__key--w{padding-bottom:6px}}.kb .is-in .kb__dot{background:var(--kb-in-dot)}.kb .is-root .kb__dot{background:var(--kb-root);box-shadow:0 0 0 1.5px var(--kb-edge)}.kb__key--w.is-lit{background:var(--kb-lit)}.kb__key--b.is-lit{background:var(--kb-lit-black);color:var(--kb-black)}.kb__key--w.is-down{background:var(--kb-down);box-shadow:inset 0 3px #0000001f}.kb__key--b.is-down{background:var(--kb-down);color:var(--kb-black)}.kb--scale{height:130px}@media (width>=720px){.kb--scale{height:150px}}.kb--scale .kb__key--w.is-in{background:var(--kb-white-in);color:var(--kb-name-in);font-weight:700}.kb--scale .kb__key--b.is-in{background:var(--kb-black-in);color:#fff}.kb--scale .kb__key--w.is-lit,.kb--finder .kb__key--w.is-picked{background:var(--kb-lit)}.kb--scale .kb__key--b.is-lit,.kb--finder .kb__key--b.is-picked{background:var(--kb-lit-black);color:var(--kb-black)}.kb--finder{max-width:520px;height:120px}.kb--finder .kb__name{font-size:9px}@media (prefers-reduced-motion:no-preference){.kb__key{transition:background-color 60ms linear}}.chordbtns{flex-wrap:wrap;gap:6px;display:flex}.chordbtn{border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);min-width:60px;height:52px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 12px;display:inline-flex}.chordbtn span{font-family:var(--font-mono);color:var(--ink-muted);letter-spacing:.04em;font-size:11px;line-height:13px}.chordbtn b{font-family:var(--font-display);font-size:18px;line-height:22px}.chordbtn:hover{border-color:var(--line-strong)}.chordbtn[aria-pressed=true]{border-color:var(--keys);background:var(--chords-soft);box-shadow:var(--shadow-hard)}@media (width<=479px){.chordbtn{flex:1 0 calc(25% - 6px);min-width:0;padding:0 8px}}.piano__controls{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.piano__oct{align-items:center;gap:8px;font-size:13px;font-weight:700;display:inline-flex}.piano__oct output{font-family:var(--font-mono);text-align:center;min-width:6ch;font-size:12px;font-weight:500}.piano__now{font-family:var(--font-mono);min-height:18px;color:var(--ink);font-size:13px;line-height:18px}@media (width<=479px){.panel.piano,.panel.scales{padding:16px 12px}}.progbtns{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.progbtns li{flex-wrap:wrap;align-items:center;gap:6px 14px;display:flex}.progbtn{border-radius:var(--radius-sm);min-height:40px;font:inherit;cursor:pointer;background:var(--card);color:var(--ink);border:1.5px solid var(--line);align-items:center;gap:10px;padding:0 14px;font-size:15px;font-weight:700;display:inline-flex}.progbtn:before{content:"";border:5px solid #0000;border-left:8px solid;border-right-width:0;width:0;height:0}.progbtn span{font-family:var(--font-mono);color:var(--ink-muted);font-size:12px;font-weight:500}.progbtn[aria-pressed=true]{border-color:var(--ink);box-shadow:var(--shadow-hard)}.progbtn[aria-pressed=true]:before{box-sizing:border-box;border:0;border-left:3px solid;border-right:3px solid;width:8px;height:10px}.keymap{font-family:var(--font-mono);font-size:12px}.keymap kbd{font-family:var(--font-mono);border:1px solid var(--line-strong);background:var(--card);border-radius:4px;padding:1px 6px;font-size:11.5px}.switcher.switcher--keys{gap:6px}.switcher.switcher--keys button{justify-content:center;min-width:44px;height:40px;padding:0 10px}.scale__head{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.scale__head .sw-btn--play{width:56px;height:56px}.scale__head .sw-btn--play svg{width:22px;height:22px}.scale__title{font-family:var(--font-display);letter-spacing:-.01em;font-size:24px;font-weight:800;line-height:28px}.notestrip{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.notestrip li{border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--card);flex-direction:column;justify-content:center;align-items:center;min-width:48px;height:50px;padding:0 8px;display:inline-flex}.notestrip li b{font-family:var(--font-display);font-size:18px;line-height:22px}.notestrip li span{font-family:var(--font-mono);color:var(--ink-muted);font-size:11px;line-height:13px}.notestrip li.now{border-color:var(--ink);background:var(--amber-soft)}.linkbtn{appearance:none;font:inherit;color:inherit;text-underline-offset:3px;text-decoration:underline 1.5px;text-decoration-color:var(--line-strong);cursor:pointer;background:0 0;border:0;padding:0;font-weight:700}.linkbtn:hover{text-decoration-color:var(--amber)}.finder{gap:14px}.finder .chips .sw-chip{cursor:pointer;font:inherit;font-size:14px}.gen__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.gen .switcher button{height:auto;min-height:40px}.gen-table tr.now td{background:var(--amber-soft)}