@font-face{font-family:"Noto Music";src:url(/fonts/noto-music-clefs.woff2) format("woff2");unicode-range:U+266D-266F,U+1D11E,U+1D122;font-display:block}
:root{--bg:#f7f4ee;--card:#fffdf8;--fg:#1f1d1a;--muted:#6f6a61;--line:#e3ddd1;--accent:#7a3e9d;--accent-fg:#fff;--accent-soft:#efe4f6;
  --good:#1f7a4d;--good-bg:#e1f3e8;--bad:#b23b2e;--bad-bg:#fbe5e1;--mark:#9dd6c2;--mark-strong:#2f8f75;--down:#ffd27a;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#16151a;--card:#201f26;--fg:#ece9f2;--muted:#a29dad;--line:#33313c;--accent:#c79bf0;--accent-fg:#1d1424;--accent-soft:#2f2540;
  --good:#7fd6a6;--good-bg:#173325;--bad:#f39a8e;--bad-bg:#3a1f1c;color-scheme:dark}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:60rem;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:1.25rem;margin:0;flex:1;min-width:10rem}
.top a.home{color:var(--muted);text-decoration:none;font-weight:600}
.top a.home:hover{color:var(--fg)}
button,select{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 13px;cursor:pointer}
button:hover,select:hover{border-color:var(--muted)}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-weight:600}
button.big{padding:12px 20px;font-size:1.05rem}
button:disabled{opacity:.45;cursor:default}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 11px;border-radius:99px;font-size:.92rem}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
label.inline{display:inline-flex;gap:6px;align-items:center;font-size:.95rem;cursor:pointer}
.midi{font-size:.85rem}
.midi.on{background:var(--good-bg);color:var(--good);border-color:transparent}

/* Keyboard */
.kb{position:relative;display:flex;height:clamp(130px,26vw,210px);touch-action:none;user-select:none;-webkit-user-select:none;margin-top:12px}
.key{position:relative;cursor:pointer}
.key.white{flex:1 1 0;min-width:0;background:linear-gradient(#fff 0%,#f4f1ea 100%);border:1px solid #b9b3a7;border-top:none;border-radius:0 0 7px 7px;margin-right:-1px;box-shadow:inset 0 -6px 0 #e7e2d6}
.key.black{position:absolute;top:0;height:61%;z-index:2;background:linear-gradient(#3a3a3e,#111);border-radius:0 0 5px 5px;box-shadow:inset 0 -5px 0 #000,0 2px 3px rgba(0,0,0,.35)}
.key.white.mark{background:linear-gradient(#e6f6ef,var(--mark))}
.key.black.mark{background:linear-gradient(#4fb393,var(--mark-strong))}
.key.white.root{background:linear-gradient(#cdeee1,#5fbf9d)}
.key.black.root{background:linear-gradient(#2fa37f,#16684f)}
.key.white.good{background:linear-gradient(#e1f3e8,#8fd3ad)}
.key.white.bad{background:linear-gradient(#fbe5e1,#f0a59b)}
.key.black.good{background:linear-gradient(#3aa36d,#1f7a4d)}
.key.black.bad{background:linear-gradient(#d0584a,#9b2f24)}
.key.white.down{background:linear-gradient(#fff3d6,var(--down))!important;box-shadow:inset 0 -2px 0 #e7c264}
.key.black.down{background:linear-gradient(#a67c25,#7b5a12)!important;box-shadow:inset 0 -2px 0 #000}
.key .lbl{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;font-weight:600;color:#7d776c;pointer-events:none;line-height:1.15}
.key.black .lbl{color:#c9c4bb;bottom:6px;font-size:10px}
.key .lbl b{display:block;font-size:10px;color:#a8a194;font-weight:500}
.key.mc::after{content:"";position:absolute;left:50%;bottom:30%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#c9a24a;pointer-events:none}