:root{--bg: #0a0a0c;--panel: #141418;--accent: #e94e3c;--text: #e6e8ee;--text-dim: #7a8090}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{max-width:1100px;margin:0 auto;padding:18px 18px 40px}.topbar{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}.topbar h1{font-size:22px;letter-spacing:2px;text-transform:uppercase;margin:0}.topbar a{color:var(--text-dim);font-size:13px;text-decoration:none}.topbar a:hover{color:var(--accent)}.subtitle{color:var(--text-dim);font-size:13px;margin:0 0 18px}.section-label{color:var(--text-dim);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:18px 0 8px}.key-row{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}.key-btn{padding:12px 0;background:#1d1f27;color:var(--text);border:1px solid #2b2e38;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .12s ease}.key-btn:hover{border-color:#3a3e4a}.key-btn.is-selected{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 16px #e94e3c8c}.toggle-row{display:flex;align-items:center;gap:8px;margin:14px 0 4px}.toggle-row label{color:var(--text-dim);font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle-row input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}.pad{display:flex;flex-direction:column;gap:10px;touch-action:none;-webkit-user-select:none;user-select:none}.pad-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.pad-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;border:none;border-radius:14px;cursor:pointer;color:#11131a;font-family:inherit;box-shadow:0 4px #00000059,inset 0 2px 4px #ffffff40;transition:transform .06s ease,box-shadow .06s ease,filter .12s ease}.pad-btn .solfege{font-size:22px;font-weight:700;letter-spacing:.5px}.pad-btn .note{font-size:12px;opacity:.7;display:none}.pad-btn .kbd{position:absolute;top:6px;right:9px;font-size:10px;font-weight:700;opacity:.45}.pad.show-notes .pad-btn .note{display:block}.pad-btn.is-active{transform:translateY(4px);box-shadow:0 0 #00000059,inset 0 2px 6px #00000040;filter:brightness(1.12)}.degree-0{background:linear-gradient(180deg,#ff8a5b,#ff6a3c);color:#fff}.degree-1{background:linear-gradient(180deg,#ffd36b,#ffbf3c)}.degree-2{background:linear-gradient(180deg,#f4ed72,#e6db3c)}.degree-3{background:linear-gradient(180deg,#9fe07a,#6fce47)}.degree-4{background:linear-gradient(180deg,#74d6c4,#45c2ab)}.degree-5{background:linear-gradient(180deg,#7db4f0,#4d92e6);color:#fff}.degree-6{background:linear-gradient(180deg,#b69bf0,#9670e6);color:#fff}.hint{color:var(--text-dim);font-size:12px;margin-top:18px;text-align:center}@media(max-width:640px){.key-row{grid-template-columns:repeat(6,1fr)}.pad-btn{min-height:72px}.pad-btn .solfege{font-size:18px}}