:root{--bg: #0d0d12;--panel: #151821;--panel-strong: #1d2330;--line: rgba(255,255,255,.08);--text: #f3f5ff;--muted: #b5bfd9;--blue: #4b7bf5;--gold: #c8a96e;--green: #2ecc9a;--violet: #9b7fe8;--amber: #ff9f27;--coral: #ff6b8a}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}button{font:inherit}#app{min-height:100vh;padding:32px 20px}.page-shell{max-width:1100px;margin:0 auto;border-radius:18px;background:transparent;padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}.eyebrow{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:11px;margin-bottom:8px}h1{margin:0;font-size:clamp(2rem,5vw,3rem);line-height:1.1}.stat-block{text-align:right}.stat-number{color:var(--blue);font-size:2rem;font-weight:700}.stat-label{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font-size:10px}.controls{margin-top:22px}.key-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.tab-bar{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line)}.panels{margin-top:20px}.slot.cI{border-color:#4b7bf573;background:#4b7bf514}.slot.cII{border-color:#9b7fe873;background:#9b7fe814}.slot.cIII{border-color:#ff6b8a73;background:#ff6b8a14}.slot.cIV{border-color:#2ecc9a73;background:#2ecc9a14}.slot.cV{border-color:#ff9f2773;background:#ff9f2714}.slot.cVI{border-color:#9b7fe873;background:#9b7fe814}.slot.cb7{border-color:#ff6b8a73;background:#ff6b8a14}.slot.cb3{border-color:#2ed8d873;background:#2ed8d814}@media (max-width: 700px){.topbar{flex-direction:column;align-items:flex-start}}.piano-dock{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff05}.piano-dock-label{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:10px;margin-bottom:12px}:root{--icon-stroke-width: 2;--bg: #0d0d12;--p1: #13131a;--p2: #19192280;--p3: #1e1e28;--p4: #252535;--b1: rgba(255, 255, 255, .05);--b2: rgba(255, 255, 255, .08);--b3: rgba(255, 255, 255, .14);--text: #f0f0f8;--muted: #60607a;--dim: #30304a;--blue: #4b7bf5;--green: #2ecc9a;--amber: #ff9f27;--purple: #9b7fe8;--coral: #ff6b8a;--cyan: #2ed8d8;--gold: #c8a96e;--violet: #b87fe8;--blue-bg: rgba(75, 123, 245, .08);--green-bg: rgba(46, 204, 154, .08);--amber-bg: rgba(255, 159, 39, .08);--purple-bg: rgba(155, 127, 232, .08);--coral-bg: rgba(255, 107, 138, .08);--cyan-bg: rgba(46, 216, 216, .08);--gold-bg: rgba(200, 169, 110, .08);--shadow: 0 4px 24px rgba(0, 0, 0, .6);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .7);--radius: 6px;--radius-lg: 10px;--glass: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .07);--glass-shine: rgba(255, 255, 255, .06);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}:root{--cof-wheel-shift: 0px;--cof-wheel-scale: 1;--cof-piano-clearance: 150px;--cof-top-gap: 16px;--cof-gap: 24px;--cof-progs-width: 360px;--cof-wheel-max: 700px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-bottom:200px}body{background:var(--bg);color:var(--text);font-family:-apple-system,Helvetica Neue,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;background-image:radial-gradient(ellipse 80% 50% at 20% 0%,rgba(75,123,245,.04) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(46,204,154,.03) 0%,transparent 60%);background-attachment:fixed}.page{max-width:960px;margin:0 auto;padding:1rem 2rem 0}.sec{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:8px;margin-top:.5rem;display:flex;align-items:center;gap:10px}.sec:first-child{margin-top:0}.sec:after{content:"";flex:1;height:1px;background:var(--b1)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}.header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--b1)}.app-label{font-family:inherit;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.app-title{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1}.app-title em{font-style:normal;color:var(--blue)}.key-section{margin-bottom:.75rem}.row-label{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:10px}.key-row{display:flex;gap:6px;flex-wrap:wrap}.key-btn{padding:7px 15px;border-radius:var(--radius);border:1px solid var(--b2);background:transparent;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}.key-btn:hover{background:var(--p3);border-color:var(--b3);color:var(--text)}.key-btn:active{transform:scale(.96)}.key-btn.active{background:linear-gradient(180deg,#4b7bf538,#4b7bf514);border-color:#4b7bf5b3;color:var(--blue);box-shadow:0 0 14px #4b7bf580,0 0 28px #4b7bf533}.family-panel{margin-bottom:.75rem;background:transparent;border:none;overflow:visible}.family-title{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);padding:10px 18px 6px}.family-body{display:block;padding:0 18px 12px}.family-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.family-cell{padding:10px 4px;border-radius:var(--radius);border:1px solid;text-align:center;cursor:pointer;transition:transform .12s var(--ease-out, ease),box-shadow .12s var(--ease-out, ease);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}.family-cell:hover{transform:translateY(-2px)}.family-cell:hover .rel-tip{display:block}.fc-roman{font-family:inherit;font-size:9px;color:var(--muted);margin-bottom:6px;letter-spacing:.08em}.fc-chord{font-family:-apple-system,Helvetica Neue,sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em}.fc-role{font-size:9px;margin-top:5px;opacity:.8;font-family:inherit;letter-spacing:.05em}.rel-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--p3);border:1px solid var(--b2);border-radius:8px;padding:12px 14px;width:200px;z-index:50;text-align:left;box-shadow:var(--shadow-lg)}.rel-tip-title{font-family:inherit;font-size:10px;color:var(--gold);margin-bottom:6px}.rel-tip-why{font-size:10px;color:var(--text);line-height:1.6;margin-top:6px;padding-top:6px;border-top:1px solid var(--b1)}.rel-tip-dest{font-size:10px;color:var(--muted);margin-top:6px}.rel-tip-dest span{color:var(--gold)}.family-cell.midi-active{box-shadow:0 0 0 1px currentColor,0 0 8px currentColor,0 0 18px currentColor;z-index:10;transition:none}.family-panel--degrees .fc-roman{font-size:20px;font-weight:700;color:inherit;letter-spacing:normal;margin-bottom:4px}.family-panel--degrees .fc-chord{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.85}.family-panel--answered .family-cell.fc-wrong{opacity:.5}.family-cell.fc-correct{box-shadow:0 0 0 1px color-mix(in srgb,currentColor 40%,transparent),0 0 8px color-mix(in srgb,currentColor 22%,transparent),0 0 16px color-mix(in srgb,currentColor 10%,transparent)}.family-cell.fc-correct .fc-roman,.family-cell.fc-wrong .fc-roman{font-weight:600}.family-cell.fc-correct .fc-chord,.family-cell.fc-wrong .fc-chord{font-weight:500}.family-cell--inactive{pointer-events:none;cursor:default;opacity:.32;filter:grayscale(.85)}.cI{border-color:#4b7bf573;color:var(--blue);background:linear-gradient(180deg,#4b7bf52e,#4b7bf50f);box-shadow:0 0 10px #4b7bf54d}.cII{border-color:#b87fe873;color:var(--violet);background:linear-gradient(180deg,#b87fe82e,#b87fe80f);box-shadow:0 0 10px #b87fe84d}.cIII{border-color:#ff6b8a73;color:var(--coral);background:linear-gradient(180deg,#ff6b8a2e,#ff6b8a0f);box-shadow:0 0 10px #ff6b8a4d}.cIV{border-color:#2ecc9a73;color:var(--green);background:linear-gradient(180deg,#2ecc9a2e,#2ecc9a0f);box-shadow:0 0 10px #2ecc9a4d}.cV{border-color:#ff9f2773;color:var(--amber);background:linear-gradient(180deg,#ff9f272e,#ff9f270f);box-shadow:0 0 10px #ff9f274d}.cVI{border-color:#9b7fe873;color:var(--purple);background:linear-gradient(180deg,#9b7fe82e,#9b7fe80f);box-shadow:0 0 10px #9b7fe84d}.cb7{border-color:#ff6b8a73;color:var(--coral);background:linear-gradient(180deg,#ff6b8a2e,#ff6b8a0f);box-shadow:0 0 10px #ff6b8a4d}.cb3{border-color:#2ed8d873;color:var(--cyan);background:linear-gradient(180deg,#2ed8d82e,#2ed8d80f);box-shadow:0 0 10px #2ed8d84d}.tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);margin-bottom:.5rem;position:relative;z-index:1;padding:0}.tab{flex:1;padding:12px 8px 11px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-family:-apple-system,Helvetica Neue,sans-serif;font-size:10px;font-weight:500;cursor:pointer;transition:color .15s,border-color .15s;text-align:center;white-space:nowrap;position:relative;z-index:1;letter-spacing:.01em}.tab:hover{color:var(--text)}.tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--blue);text-shadow:0 0 20px rgba(75,123,245,.5)}.tab-icon{font-size:14px;display:block;margin-bottom:3px}.tab-icon--svg svg{width:17px;height:17px;display:block;margin:0 auto;stroke-width:var(--icon-stroke-width)}.panel{display:none;animation:fadeUp .3s var(--ease-smooth)}.panel.active{display:block}.midi-panel{position:fixed;bottom:185px;right:2rem;width:200px;z-index:100;background:linear-gradient(145deg,#20222ef7,#12131bf7);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:16px;box-shadow:0 1px 0 var(--glass-shine) inset,var(--shadow-lg);opacity:0;transition:opacity .18s var(--ease-smooth);pointer-events:none}.midi-panel.visible{opacity:1;transform:translateY(0);pointer-events:auto}.midi-panel-label{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}.midi-note-name{font-family:inherit;font-size:30px;font-weight:700;line-height:1;margin-bottom:8px;transition:color .15s}.midi-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.midi-fl{font-size:9px;color:var(--muted);font-family:inherit}.midi-fv{font-size:12px;font-weight:600;font-family:inherit}.midi-status{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:9px;color:var(--muted);margin-bottom:.5rem}.midi-dot{width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background .3s}.midi-dot.connected{background:var(--green);box-shadow:0 0 0 1px #2ecc9ab3,0 0 8px #2ecc9a80,0 0 24px #2ecc9a40;animation:midiBlink 2s ease-in-out infinite}.midi-dot.negative{background:var(--coral);box-shadow:0 0 0 1px #ff6b8ab3,0 0 8px #ff6b8a80,0 0 24px #ff6b8a40}@keyframes midiBlink{0%,to{opacity:1}50%{opacity:.5}}.midi-toast-stack{position:fixed;right:2rem;z-index:100;display:flex;flex-direction:column;gap:10px;pointer-events:none;transition:bottom .18s var(--ease-smooth)}.midi-toast{width:200px;background:linear-gradient(145deg,#20222ef7,#12131bf7);border:1px solid var(--glass-border);border-left:3px solid var(--dim);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:0 1px 0 var(--glass-shine) inset,var(--shadow-lg);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease-smooth),transform .2s var(--ease-smooth)}.midi-toast--positive{border-left-color:var(--green)}.midi-toast--negative{border-left-color:var(--coral)}.midi-toast--neutral{border-left-color:var(--blue)}.midi-toast.in{opacity:1;transform:translateY(0)}.midi-toast.out{opacity:0;transform:translateY(-6px)}.midi-toast__label{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:6px}.midi-toast__name{font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;margin-top:2px}.filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:.75rem}.f-btn{padding:5px 13px;border-radius:var(--radius);border:1px solid var(--b1);background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:all .15s;font-family:-apple-system,sans-serif}.f-btn:hover{background:var(--p3);border-color:var(--b2);color:var(--text)}.f-btn.active{background:linear-gradient(180deg,#4b7bf52e,#4b7bf50f);border-color:#4b7bf599;color:var(--blue);box-shadow:0 0 10px #4b7bf54d}.prog-list{display:grid;gap:10px;padding-bottom:20px}.prog-card{background:linear-gradient(145deg,rgba(255,255,255,.04),var(--glass));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:20px;transition:all .25s var(--ease-smooth);position:relative;box-shadow:0 1px 0 var(--glass-shine) inset,0 4px 16px #0006,0 1px #0009}.prog-card:before{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent);margin:-20px -20px 20px}.prog-card:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);border-radius:var(--radius-lg) var(--radius-lg) 0 0;pointer-events:none}.prog-card:hover{border-color:#ffffff1a;box-shadow:0 1px 0 var(--glass-shine) inset,0 8px 32px #00000080,0 2px #0009;transform:translateY(-2px)}.card-head{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;margin-bottom:16px}.card-nums{font-family:inherit;font-size:14px;font-weight:700;color:var(--gold)}.card-roman{font-size:10px;color:var(--muted);margin-top:3px;font-family:inherit}.slots{display:flex;gap:6px}.slot{flex:1;min-width:0;height:62px;border-radius:var(--radius);border:1px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .15s,filter .15s;cursor:default;position:relative;box-shadow:0 2px 8px #0006,0 1px #ffffff0a inset}.slot:after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:#ffffff1a;border-radius:0 0 1px 1px}.slot:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.15);z-index:2;box-shadow:0 6px 20px #00000080,0 1px #ffffff0f inset!important}.s-deg{font-size:8px;font-family:inherit;opacity:.35}.s-func{font-size:7px;font-family:inherit;font-weight:700;letter-spacing:.05em;opacity:.75}.s-name{font-family:inherit;font-size:15px;font-weight:700}.journey{display:flex;align-items:center;gap:5px;margin:12px 0;flex-wrap:wrap}.j-step{font-size:9px;font-family:inherit;padding:3px 9px;border-radius:4px;border:1px solid var(--b1);background:transparent;color:var(--muted);transition:all .3s;cursor:default}.j-arr{color:var(--dim);font-size:9px}.prog-card:hover .j-step{animation:journeyPulse 1.8s ease-in-out infinite}.prog-card:hover .j-step:nth-child(1){animation-delay:0s}.prog-card:hover .j-step:nth-child(3){animation-delay:.4s}.prog-card:hover .j-step:nth-child(5){animation-delay:.8s}.prog-card:hover .j-step:nth-child(7){animation-delay:1.2s}@keyframes journeyPulse{0%,to{color:var(--muted);border-color:var(--b1);background:transparent}30%{color:var(--gold);border-color:#c8a96e59;background:#c8a96e0f}}.tension{margin-top:14px;padding-top:14px;border-top:1px solid var(--b1)}.tension-head{display:flex;justify-content:space-between;margin-bottom:8px}.tension-lbl{font-size:9px;font-family:inherit;color:var(--muted)}.tension-nums{font-size:9px;font-family:inherit;color:var(--dim)}.t-bars{display:flex;gap:4px;align-items:flex-end;height:28px}.t-bar{flex:1;border-radius:2px 2px 0 0;min-height:3px;transition:filter .2s;cursor:pointer;position:relative}.t-bar:hover{filter:brightness(1.5)!important;transform:scaleY(1.1);transform-origin:bottom}.t-bar:hover:before{content:attr(data-val);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);background:var(--p3);border:1px solid var(--b2);color:var(--text);font-size:9px;font-family:inherit;padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:10}.prog-card:hover .t-bar{filter:brightness(1.2)}.card-foot{margin-top:14px;display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{font-size:9px;padding:2px 8px;border-radius:4px;border:1px solid}.tag-genre{border-color:#4b7bf540;color:var(--blue);background:#4b7bf50d}.ftag{font-size:9px;padding:2px 8px;border-radius:4px;background:var(--gold-bg);border:1px solid rgba(200,169,110,.2);color:#c8a96ecc}.card-desc{font-size:12px;color:var(--muted);line-height:1.7}.card-songs{font-size:9px;color:var(--dim);font-style:italic;margin-top:3px}.why-block{margin-top:14px;padding:12px 14px;background:var(--p3);border-radius:var(--radius);border-left:2px solid var(--gold)}.why-label{font-family:inherit;font-size:8px;text-transform:uppercase;letter-spacing:.15em;color:var(--gold);margin-bottom:6px}.why-text{font-size:12px;color:var(--muted);line-height:1.7}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.5rem;padding:14px 16px;background:var(--p1);border:1px solid var(--b1);border-radius:var(--radius)}.li{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--muted)}.ld{width:7px;height:7px;border-radius:50%}.empty-note{text-align:center;color:var(--muted);font-size:12px;padding:3rem;border:1px dashed var(--b1);border-radius:var(--radius-lg)}.feel-grid{display:flex;flex-direction:column;gap:8px}.feel-layout{display:grid;grid-template-columns:minmax(280px,300px) minmax(0,1fr);gap:18px;align-items:start}.feel-sidebar,.feel-results{min-width:0}.feel-results>.sec{margin-top:0}.feel-tile{box-sizing:border-box;width:100%;height:61px;padding:10px 18px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.045);background:linear-gradient(145deg,rgba(255,255,255,.04),var(--glass));color:var(--muted);cursor:pointer;transition:all .22s var(--ease-smooth);display:flex;align-items:center;gap:13px;text-align:left;position:relative;overflow:hidden;box-shadow:0 1px 0 var(--glass-shine) inset,0 2px 8px #00000040}.feel-tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);pointer-events:none}.feel-tile:hover{background:linear-gradient(145deg,#ffffff12,#ffffff05);border-color:#ffffff14;color:var(--text);transform:translateY(-3px);box-shadow:0 1px #ffffff0f inset,0 6px 16px #00000059}.feel-tile:active{transform:scale(.97) translateY(0)}.feel-tile.active{border-color:var(--fc, var(--blue));color:var(--fc, var(--blue));background:linear-gradient(180deg,var(--fb, rgba(75, 123, 245, .22)),var(--fb, rgba(75, 123, 245, .06)));box-shadow:0 0 8px color-mix(in srgb,var(--fc, var(--blue)) 45%,transparent),0 0 16px color-mix(in srgb,var(--fc, var(--blue)) 18%,transparent)}.fi{font-size:22px;flex:0 0 30px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.feel-tile:hover .fi{transform:scale(1.12)}.fi--svg svg{width:22px;height:22px;display:block;margin:0;stroke-width:calc(var(--icon-stroke-width) * .6)}.feel-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}.ft{font-size:13px;font-weight:600;display:block;margin-bottom:4px}.fs{font-size:9px;color:var(--dim)}.feel-empty{text-align:center;color:var(--muted);font-size:12px;padding:3rem;border:1px dashed var(--b1);border-radius:var(--radius-lg)}.feel-harmony{margin-bottom:14px;padding:12px 14px;background:var(--p3);border-radius:var(--radius);border:1px solid var(--b1)}.feel-harmony-label{font-family:inherit;font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:9px}.feel-harmony-chips{display:flex;gap:6px;flex-wrap:wrap}.fhc{padding:3px 10px;border-radius:4px;border:1px solid;font-family:inherit;font-size:10px;font-weight:700}@media (max-width: 760px){.feel-layout{grid-template-columns:minmax(220px,.42fr) minmax(0,.58fr);gap:12px}}@media (max-width: 560px){.feel-layout{grid-template-columns:1fr}}.func-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:1.5rem}.func-card{padding:16px;border-radius:var(--radius);border:1px solid var(--b1);background:var(--p1);cursor:pointer;transition:all .18s}.func-card:hover{background:var(--p3);border-color:var(--b2);transform:translateY(-1px)}.func-card.sel{border-color:#c8a96e80;background:linear-gradient(145deg,#c8a96e1f,#c8a96e0a);box-shadow:0 0 0 1px #c8a96e4d inset,0 0 20px #c8a96e26}.fc-num{font-family:inherit;font-size:13px;font-weight:700;color:var(--gold);margin-bottom:4px}.fc-feel{font-size:10px;color:var(--dim)}.reveal-box{background:linear-gradient(145deg,rgba(255,255,255,.04),var(--glass));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;box-shadow:0 1px 0 var(--glass-shine) inset,0 4px 16px #00000059}.reveal-title{font-size:9px;font-family:inherit;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:20px}.reveal-row{display:flex;gap:8px;margin-bottom:20px}.r-cell{flex:1;min-width:0;padding:14px 6px;border-radius:var(--radius);border:1px solid var(--b1);background:var(--p3);text-align:center;transition:all .35s}.r-lay{font-family:inherit;font-size:12px;font-weight:700;display:block;min-height:18px;opacity:0;transform:translateY(-6px);transition:all .35s cubic-bezier(.34,1.2,.64,1)}.r-lay.v{opacity:1;transform:translateY(0)}.r-lay.l0{font-size:10px}.r-lay.l1{color:var(--muted)}.r-lay.l2{font-size:16px;color:var(--text)}.r-sub{font-size:8px;color:var(--dim);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}.r-role{font-size:9px;font-family:inherit;margin-top:6px;padding:2px 8px;border-radius:4px;background:var(--p3);border:1px solid var(--b1);color:var(--muted);display:none}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.btn{padding:9px 20px;border-radius:var(--radius);border:1px solid;font-family:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:all .15s}.btn-gold{border-color:#c8a96e59;background:var(--gold-bg);color:var(--gold)}.btn-gold:hover{border-color:var(--gold);background:#c8a96e26}.btn-gold:active,.btn-dim:active{transform:scale(.97)}.btn-gold:disabled{opacity:.35;cursor:default;pointer-events:none}.btn-dim{border-color:var(--b1);background:transparent;color:var(--muted)}.btn-dim:hover{border-color:var(--b2);color:var(--text)}.trans-keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem}.trans-keybox{background:var(--p1);border:1px solid var(--b1);border-radius:var(--radius-lg);padding:14px 16px}.trans-keybox__lbl{font-size:9px;font-family:inherit;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:10px}.tkey-row{display:flex;gap:4px;flex-wrap:wrap}.tkey{padding:4px 9px;border-radius:4px;border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:all .12s}.tkey:hover{border-color:var(--b2);color:var(--text)}.tkey.active{background:var(--cyan-bg);border-color:var(--cyan);color:var(--cyan)}.trans-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:.9rem}.trans-navbtn{flex:none;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:all .12s}.trans-navbtn:hover{border-color:var(--b2);color:var(--text)}.trans-progname{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.trans-progname__n{font-size:11px;color:var(--muted);letter-spacing:.04em}.trans-progname__r{font-size:14px;font-weight:700;color:var(--text)}.trans-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trans-col{background:var(--p1);border:1px solid var(--b1);border-radius:var(--radius-lg);padding:18px}.trans-col__key{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px}.trans-col__chips{display:flex;gap:6px}.trans-chip{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--c, var(--muted)) 34%,transparent);background:color-mix(in srgb,var(--c, var(--muted)) 9%,transparent)}.trans-chip__deg{font-size:11px;font-weight:700;letter-spacing:.04em;color:color-mix(in srgb,var(--c, var(--muted)) 75%,var(--text))}.trans-chip__name{font-size:14px;font-weight:700;color:var(--text)}.trans-col__insight{margin-top:14px;padding-top:12px;border-top:1px solid var(--b1);font-size:11px;color:var(--muted)}.trans-chip[data-deg=I]{--c: var(--blue)}.trans-chip[data-deg=II]{--c: var(--violet)}.trans-chip[data-deg=III]{--c: var(--coral)}.trans-chip[data-deg=IV]{--c: var(--green)}.trans-chip[data-deg=V]{--c: var(--amber)}.trans-chip[data-deg=VI]{--c: var(--purple)}.trans-chip[data-deg=b7]{--c: var(--coral)}.trans-chip[data-deg=b3]{--c: var(--cyan)}.trans-play{display:block;width:100%;margin-top:14px;padding:12px;border-radius:var(--radius);border:1px solid var(--cyan);background:var(--cyan-bg);color:var(--cyan);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .12s}.trans-play:hover{background:color-mix(in srgb,var(--cyan) 22%,transparent)}.trans-caption{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}@media (max-width: 640px){.trans-keys,.trans-cols{grid-template-columns:1fr}}.prac-head{margin-bottom:1.5rem}.prac-head__title{font-size:20px;font-weight:700;color:var(--text);margin:0 0 4px}.prac-head__sub{font-size:12px;color:var(--muted);margin:0}.prac-builder{display:block}.prac-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:1rem}.prac-field__label{font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}.prac-key-row{display:flex;flex-wrap:wrap;gap:4px}.prac-key{min-width:34px;padding:5px 9px;border-radius:var(--radius);border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:inherit;font-size:11px;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out)}.prac-key:hover{border-color:var(--b2);color:var(--text)}.prac-key.active{border-color:#9b7fe8b3;color:var(--purple);background:var(--purple-bg)}.prac-fn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}.prac-fn{padding:16px 8px;border-radius:var(--radius-lg);border:1px solid var(--glass-border);background:linear-gradient(145deg,rgba(255,255,255,.04),var(--glass));color:var(--text);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition-property:color,background-color,background-image,border-color,box-shadow,transform;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out)}.prac-fn:hover:not(:disabled){border-color:var(--b2);transform:translateY(-1px)}.prac-fn:active:not(:disabled){transform:scale(.97)}.prac-fn:disabled{opacity:.35;cursor:default}.prac-fn[data-deg=I]{box-shadow:inset 0 -2px 0 var(--blue)}.prac-fn[data-deg=IV]{box-shadow:inset 0 -2px 0 var(--green)}.prac-fn[data-deg=V]{box-shadow:inset 0 -2px 0 var(--amber)}.prac-fn[data-deg=VI]{box-shadow:inset 0 -2px 0 var(--purple)}@media (max-width: 480px){.prac-fn-grid{grid-template-columns:repeat(2,1fr)}}.prac-seq-wrap{display:flex;align-items:center;gap:10px;margin-bottom:1rem}.prac-seq{flex:1;min-height:56px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:var(--radius-lg);border:1px dashed var(--b2);background:var(--p3)}.prac-seq__empty{font-size:11px;color:var(--muted)}.prac-seq__count{font-size:10px;color:var(--muted);white-space:nowrap}.prac-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:var(--radius);border:1px solid var(--b2);background:var(--p1)}.prac-chip__fn{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.prac-chip__chord{font-size:13px;font-weight:700;color:var(--text)}.prac-chip[data-deg=I]{border-color:color-mix(in srgb,var(--blue) 55%,transparent)}.prac-chip[data-deg=IV]{border-color:color-mix(in srgb,var(--green) 55%,transparent)}.prac-chip[data-deg=V]{border-color:color-mix(in srgb,var(--amber) 55%,transparent)}.prac-chip[data-deg=VI]{border-color:color-mix(in srgb,var(--purple) 55%,transparent)}.prac-actions{display:flex;gap:8px}.prac-actions .btn:disabled{opacity:.35;cursor:default;pointer-events:none}.prac-suggest{margin-top:2rem}.prac-suggest__card{padding:16px;border-radius:var(--radius-lg);border:1px solid var(--glass-border);background:var(--gold-bg)}.prac-suggest__text{font-size:12px;color:var(--text);margin:0 0 10px}.prac-suggest__link{padding:7px 14px;border-radius:var(--radius);border:1px solid rgba(200,169,110,.35);background:transparent;color:var(--gold);font-family:inherit;font-size:11px;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out)}.prac-suggest__link:hover{border-color:var(--gold);background:#c8a96e26}.choice{padding:13px 12px;border-radius:var(--radius);border:1px solid var(--b1);background:var(--p1);color:var(--text);font-family:inherit;font-size:11px;cursor:pointer;transition:all .18s;text-align:center}.choice:hover:not(.dis){border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}.choice.ok{border-color:var(--green);background:var(--green-bg);color:var(--green)}.choice.no{border-color:var(--coral);background:var(--coral-bg);color:var(--coral)}.choice.dis{pointer-events:none;opacity:.35}.settings-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#06070c99;display:flex;align-items:center;justify-content:center;padding:24px}.settings-modal{position:relative;width:min(560px,100%);max-height:min(720px,90vh);display:flex;background:var(--panel-strong);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}.settings-modal__close{position:absolute;top:14px;right:14px;z-index:1;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.settings-modal__close:hover{color:var(--text);border-color:#fff3}.settings-modal__close:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.settings-modal__content{flex:1;min-width:0;padding:44px 32px 28px;overflow-y:auto}@media (max-width: 640px){.settings-modal{max-height:85vh}.settings-modal__content{padding:40px 20px 24px}}.settings-section{max-width:480px}.settings-section+.settings-section{margin-top:30px}.settings-segmented{display:inline-flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px}.settings-seg-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:500;padding:8px 16px;border-radius:7px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.settings-seg-btn:hover{color:var(--text)}.settings-seg-btn.active{background:#4b7bf529;color:var(--text);box-shadow:inset 0 0 0 1px #4b7bf559}.settings-seg-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.btn-danger,.btn-ghost{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:13px;font-weight:500;padding:9px 16px;border-radius:8px;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.btn-danger{border:1px solid rgba(255,107,138,.4);background:var(--coral-bg);color:var(--coral)}.btn-danger:hover{background:#ff6b8a29;border-color:var(--coral)}.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--muted)}.btn-ghost:hover{color:var(--text);border-color:#fff3}.btn-danger:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.settings-reset{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.settings-reset__ask{font-size:13px;color:var(--coral)}.settings-hint{color:var(--muted);font-size:13px;line-height:1.6;margin:8px 0 18px}.competency-summary{display:flex;flex-direction:column;gap:18px}.competency-group__label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}.competency-row{display:flex;align-items:baseline;gap:9px;font-size:13px;color:var(--text);padding:3px 0}.competency-row.is-developing{color:var(--muted)}.competency-mark{font-family:inherit;width:14px;flex-shrink:0;text-align:center}.midi-device-list{display:flex;flex-direction:column;gap:8px}.midi-device-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}.midi-device-row:hover{border-color:#fff3}.midi-device-row.is-active{border-color:#2ecc9a80}.midi-device-row input[type=radio]{accent-color:var(--green);margin:0;flex-shrink:0}.midi-device-dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex-shrink:0}.midi-device-dot.is-active{background:var(--green);box-shadow:0 0 8px #2ecc9a99}.midi-device-name{flex:1;font-size:13px;color:var(--text)}.midi-device-state{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.ear-mode-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:1rem}.ear-mode-btn{position:relative;padding:16px 12px;border-radius:var(--radius-lg);border:1px solid var(--b1);background:var(--p1);cursor:pointer;transition:all .2s;text-align:center}.ear-mode-btn:hover{background:var(--p3);border-color:var(--b2);transform:translateY(-1px)}.ear-mode-btn:active{transform:scale(.97)}.ear-mode-btn.active{border-color:#c8a96eb3;background:linear-gradient(180deg,#c8a96e2e,#c8a96e0f);box-shadow:0 0 14px #c8a96e66}.emb-icon{font-size:20px;margin-bottom:6px}.emb-icon--svg svg{width:20px;height:20px;display:block;margin:0 auto;stroke-width:calc(var(--icon-stroke-width) * .6)}.emb-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px}.emb-sub{font-size:9px;color:var(--muted);line-height:1.5}.ear-mode-btn.active .emb-label{color:var(--gold)}.emb-badge{position:absolute;top:6px;right:6px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;line-height:1}.emb-badge.is-passed{background:#2ecc9aeb;color:#06251b}.emb-badge.is-done{background:#ffffff24;color:var(--muted)}.ear-mode-btn.recommended{border-color:#4b7bf58c;box-shadow:0 0 0 1px #4b7bf540}.emb-rec{margin-top:6px;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}.ear-box{background:linear-gradient(145deg,rgba(255,255,255,.04),var(--glass));border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:32px;text-align:center;box-shadow:0 1px 0 var(--glass-shine) inset,0 4px 16px #00000059;position:relative}.ear-box:after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);border-radius:var(--radius-lg) var(--radius-lg) 0 0;pointer-events:none}.ear-q{font-size:17px;font-weight:600;margin-bottom:.5rem;letter-spacing:-.01em}.ear-hint{font-size:12px;color:var(--muted);margin-bottom:1.5rem;min-height:18px;line-height:1.6}.play-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:var(--radius);border:1px solid rgba(200,169,110,.3);background:var(--gold-bg);color:var(--gold);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:all .18s;margin-bottom:1.75rem;text-transform:uppercase;letter-spacing:.1em}.play-btn:hover{background:#c8a96e26;border-color:var(--gold)}.play-btn.pl{border-color:var(--coral);color:var(--coral);background:var(--coral-bg);animation:pp 1s ease-in-out infinite alternate}.degree-input-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.degree-input-tabs .play-btn{margin-bottom:0;background:var(--p2);border-color:var(--b2);color:var(--muted)}.degree-input-tabs .play-btn.active{background:var(--gold-bg);border-color:#c8a96e73;color:var(--gold)}.degree-input-tabs .degree-input-tab--hum.active{background:var(--blue-bg);border-color:#4b7bf58c;color:var(--blue)}.degree-input-tabs .play-btn:disabled{cursor:default;opacity:.5}.hum-pitch-feedback{min-height:42px;margin:-.5rem 0 1rem;padding:10px 14px;border:1px solid var(--b1);border-radius:8px;background:var(--p2);color:var(--muted);font-size:12px;line-height:1.6}.hum-pitch-feedback[data-state=correct]{border-color:var(--green);color:var(--green)}.hum-pitch-feedback[data-state=sharp],.hum-pitch-feedback[data-state=flat]{border-color:var(--gold);color:var(--gold)}.hum-pitch-feedback[data-state=wrong],.hum-pitch-feedback[data-state=error]{border-color:var(--coral);color:var(--coral)}@keyframes pp{0%{box-shadow:0 0 8px #ff6b8a33}to{box-shadow:0 0 24px #ff6b8a80}}.pulse-row{display:flex;gap:8px;justify-content:center;margin-bottom:1.5rem;min-height:56px;align-items:center}.p-cell{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--b1);font-family:inherit;font-size:11px;font-weight:700;color:var(--muted);background:var(--p1);transition:all .25s;min-width:64px;text-align:center}.p-cell .pf{font-size:8px;display:block;margin-bottom:3px;opacity:.5}.p-cell.pulse{color:var(--coral);border-color:#ff6b8a80;background:var(--coral-bg);box-shadow:0 0 14px #ff6b8a33;transform:scale(1.08) translateY(-2px)}.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:1.5rem}.ear-fb{font-size:13px;font-weight:600;min-height:22px;margin-bottom:.75rem}.ear-sc{font-family:inherit;font-size:10px;color:var(--muted)}.ear-next{display:none;margin-top:10px}.ear-next.show{display:inline-block}.ntf-btn{padding:16px 10px;border-radius:var(--radius);border:1px solid var(--b1);background:var(--p1);color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;letter-spacing:.04em}.ntf-btn:hover:not(:disabled){background:var(--p3);border-color:var(--b2);color:var(--text);transform:translateY(-1px)}.ntf-btn.ntf-correct{border-color:var(--green);background:var(--green-bg);color:var(--green);pointer-events:none}.ntf-btn.ntf-wrong{border-color:var(--coral);background:var(--coral-bg);color:var(--coral);pointer-events:none}.ntf-btn.ntf-reveal{border-color:var(--green);background:var(--green-bg);color:var(--green);pointer-events:none}.ntf-btn:disabled{opacity:.35;pointer-events:none}.md-slot{width:44px;height:44px;border-radius:var(--radius);border:1px dashed var(--b2);background:var(--p3);display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:13px;font-weight:700;transition:all .25s}.md-slot.filled{border-style:solid;border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}.md-slot.correct{border-color:var(--green);color:var(--green);background:var(--green-bg)}.md-slot.wrong{border-color:var(--coral);color:var(--coral);background:var(--coral-bg)}.md-slot.active-slot{border-color:var(--gold);animation:slotPulse .8s ease-in-out infinite alternate}@keyframes slotPulse{0%{box-shadow:0 0 #c8a96e4d}to{box-shadow:0 0 0 6px #c8a96e00}}.mk-white{width:28px;height:80px;border-radius:0 0 4px 4px;border:1px solid rgba(255,255,255,.06);border-top:none;background:linear-gradient(180deg,#0e0e18,#080810);flex-shrink:0;position:relative;z-index:1;cursor:pointer;transition:all .15s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.mk-white:hover{background:linear-gradient(180deg,var(--p4),#323244)}.mk-white.mk-lit{animation:mkGlow .45s ease-in-out infinite alternate}.mk-white.mk-correct{background:linear-gradient(180deg,#2ecc9a66,#2ecc9a1a)!important;border-color:var(--green)!important}.mk-white.mk-wrong{background:linear-gradient(180deg,#ff6b8a66,#ff6b8a1a)!important;border-color:var(--coral)!important}.mk-white.mk-home{background:linear-gradient(180deg,#4b7bf56b,#4b7bf524)!important;border-color:#4b7bf599!important;box-shadow:0 0 12px #4b7bf580,0 0 22px #4b7bf533!important}.mk-white.mk-selected{background:linear-gradient(180deg,#c8a96e66,#c8a96e1a)!important;border-color:var(--gold)!important}.mk-black{position:absolute;top:0;width:18px;height:50px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#050508,#020204);border:1px solid rgba(255,255,255,.04);z-index:2;cursor:pointer;transition:all .15s}.mk-black:hover{background:linear-gradient(180deg,#1a1a28,#121218)}.mk-black.mk-lit{background:var(--gold)!important}.mk-lbl{font-size:7px;font-family:inherit;color:var(--dim);pointer-events:none}@keyframes mkGlow{0%{filter:brightness(1.3);box-shadow:inset 0 0 8px currentColor}to{filter:brightness(1.6);box-shadow:inset 0 0 16px currentColor}}.mini-piano-wrap{overflow-x:auto;padding:8px;background:var(--p2);border-radius:10px;border:1px solid var(--b1);margin-bottom:1.25rem}.mini-piano-keys{position:relative;display:flex;height:80px;width:fit-content;margin:0 auto}.ear-feedback-box{min-height:48px;margin-bottom:1rem;padding:10px 14px;border-radius:8px;background:var(--p2);border:1px solid var(--b1);font-size:12px;color:var(--muted);line-height:1.6;transition:all .3s;text-align:left}.exercise-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3rem 2rem;text-align:center}.exercise-complete__score{font-size:3rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.exercise-complete__pct{font-size:1.1rem;color:var(--muted);font-family:inherit}.exercise-complete__label{font-size:.95rem;color:var(--muted)}.exercise-complete__learned{font-size:.9rem;color:var(--blue);font-style:italic}.exercise-complete__actions{display:flex;gap:.75rem;margin-top:1rem}.level-transition{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3rem 2rem;text-align:center;cursor:pointer;animation:levelTransIn .4s ease}@keyframes levelTransIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.level-transition__done{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}.level-transition__proved{font-size:1rem;color:var(--blue)}.level-transition__next{font-size:.95rem;color:var(--muted)}.fh-counter{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.75rem}.fh-badges{display:flex;gap:8px;justify-content:center;margin-bottom:.75rem}.fh-pass,.fh-key:not([hidden]){display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);border:1px solid rgba(75,123,245,.4);background:var(--blue-bg);border-radius:6px;padding:3px 10px}.fh-loop-notice{font-size:11px;color:var(--muted);font-style:italic;margin-bottom:.75rem}.retention-check-banner{font-size:12px;color:var(--violet);border:1px dashed rgba(184,127,232,.4);background:var(--purple-bg);border-radius:var(--radius);padding:8px 14px;margin-bottom:.75rem;line-height:1.5}.retention-badge{color:var(--violet)!important;border-color:#b87fe866!important;background:var(--purple-bg)!important}.fh-octaves{display:flex;gap:8px;justify-content:center;margin-bottom:1.25rem}.fh-octaves span{font-size:10px;letter-spacing:.06em;color:var(--dim);border:1px solid var(--b1);border-radius:6px;padding:6px 12px;transition:color .2s ease,border-color .2s ease,background .2s ease}.fh-octaves span.is-current{color:var(--blue);border-color:#4b7bf580;background:#4b7bf514}.fh-mid{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:1rem}.fh-ready{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.fh-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);transition:background .2s ease,box-shadow .2s ease}.fh-ready.is-ready .fh-dot{background:var(--text);box-shadow:0 0 6px #ffffff80}.fh-hint{font-size:11px;font-style:italic;color:var(--blue);margin-bottom:1rem}.ctx-panel{margin-bottom:1.25rem;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--b1);background:var(--p2);text-align:left}.ctx-hint{font-size:12px;color:var(--blue);font-style:italic;margin-bottom:8px}.ctx-explainer{margin-bottom:8px}.ctx-explainer summary{cursor:pointer;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;list-style:none}.ctx-explainer summary::-webkit-details-marker{display:none}.ctx-explainer summary:before{content:"▸ ";color:var(--gold)}.ctx-explainer[open] summary:before{content:"▾ "}.ctx-explainer p{font-size:11px;color:var(--muted);line-height:1.6;margin:8px 0 0}.drone-btn{font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 12px;border-radius:6px;border:1px solid var(--b1);background:var(--p1);color:var(--muted);cursor:pointer;transition:all .18s}.drone-btn:hover{border-color:var(--b2)}.drone-btn.is-on{border-color:#4b7bf58c;background:#4b7bf51f;color:var(--blue)}.connect-stage{display:flex;flex-direction:row;gap:var(--cof-gap);align-items:stretch;position:relative}.cof-wheel-col{flex:0 1 var(--cof-wheel-max);min-width:240px;display:flex;align-items:center;justify-content:center}#cof-zoom-wrap{aspect-ratio:1 / 1;width:100%;max-width:var(--cof-wheel-max);overflow:visible;display:flex;align-items:center;justify-content:center}#cof-svg-box{width:100%;height:100%;transform:translateY(var(--cof-wheel-shift)) scale(var(--cof-wheel-scale));transform-origin:center center}#cof-svg{width:100%;height:100%;display:block;touch-action:none}#cof-svg path,#cof-svg circle{transition:filter .18s ease,opacity .18s ease}.cof-right{flex:1 1 auto;min-width:var(--cof-progs-width);min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:20px}.cof-sec-lbl{font-family:inherit;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:12px;flex-shrink:0}.cof-progs{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding-right:6px;padding-bottom:3rem}.cof-guided-prompt{position:relative;background:#0d0d128c;border:1px solid var(--blue);border-radius:12px;padding:13px 30px 13px 13px;margin-bottom:2px}.cof-guided-prompt p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}.cof-guided-prompt__group+.cof-guided-prompt__group{margin-top:10px}.cof-guided-prompt__close{position:absolute;top:10px;right:10px;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.cof-guided-prompt__close:hover{color:var(--text);background:#ffffff0f}.cof-prog{background:#ffffff05;border:1px solid var(--line);border-radius:12px;padding:13px 13px 12px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.cof-prog:hover{border-color:#ffffff29;background:#ffffff09}.cof-prog__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}.cof-prog__name{font-family:inherit;font-weight:700;font-size:14px;color:var(--text);letter-spacing:.02em}.cof-prog__play{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#ffffff08;color:var(--muted);font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 0 2px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.cof-prog__play:hover{border-color:#4b7bf580;color:var(--blue);background:#4b7bf51a}.cof-prog__tags{display:flex;gap:4px;flex-shrink:0}.cof-prog__tags span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 6px}.cof-prog__chords{display:flex;gap:5px;margin-bottom:10px}.cof-chip{flex:1;min-width:0;border:1px solid color-mix(in srgb,var(--c) 34%,transparent);background:color-mix(in srgb,var(--c) 9%,transparent);border-radius:7px;padding:7px 4px 6px;text-align:center;display:flex;flex-direction:column;gap:2px}.cof-chip__deg{font-family:inherit;font-size:9px;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 65%,var(--muted))}.cof-chip__name{font-family:inherit;font-size:14px;font-weight:700;color:color-mix(in srgb,var(--c) 75%,var(--text))}.cof-prog__desc{font-family:inherit;font-size:11.5px;line-height:1.5;color:var(--muted);margin:0}.cof-hint-col{position:absolute;top:44px;right:0;width:220px;z-index:30;opacity:0;transform:translate(12px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.cof-hint-col.visible{opacity:1;transform:translate(0);pointer-events:auto}.cof-hint-inner{background:#fff;color:#111;border-radius:10px;padding:14px;box-shadow:0 12px 48px #0000008c}.cof-hint-label{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#4b7bf5;margin-bottom:6px}.cof-hint-prog{font-family:inherit;font-size:13px;font-weight:700;color:#111;margin-bottom:8px}.cof-hint-body{font-size:11px;color:#444;line-height:1.65}.cof-hint-close{margin-top:12px;font-family:inherit;font-size:9px;color:#aaa;cursor:pointer;text-align:right;letter-spacing:.12em;text-transform:uppercase}.cof-hint-close:hover{color:#4b7bf5}@media (max-width: 1024px){.connect-stage{flex-wrap:wrap;align-items:flex-start}.cof-wheel-col{flex-basis:100%;padding-top:16px}#cof-zoom-wrap{width:min(100%,70vh);max-height:none}.cof-right{flex-basis:100%;max-width:none;border-left:none;padding-left:0}.cof-progs{max-height:60vh;flex:none}.cof-hint-col{display:none}}.overlay-wrap{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:2rem;overflow-y:auto}.ob-inner,.l1-inner,.hum-inner{max-width:540px;width:100%;text-align:center}.ob-primary,.ob-ghost{padding:11px 24px;border-radius:8px;font-family:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.ob-primary{border:1px solid rgba(75,123,245,.5);background:var(--blue-bg);color:var(--blue)}.ob-ghost{border:1px solid var(--b2);background:transparent;color:var(--muted)}.ob-key{width:40px;height:130px;border-radius:0 0 7px 7px;border:1px solid var(--b2);background:var(--p3);margin:0 auto 2rem;transition:all .6s;opacity:0}.ob-word{font-family:inherit;font-size:36px;font-weight:700;color:var(--blue);opacity:0;transition:opacity .5s;min-height:52px;letter-spacing:.05em}.ob-lines{max-width:400px;margin:1.5rem auto 0}.ob-l{font-size:17px;font-weight:500;color:var(--text);margin-bottom:.75rem;opacity:0;transition:all .5s;transform:translateY(6px)}.ob-l-dim{color:var(--muted);margin-bottom:2.5rem}.ob-title{font-family:inherit;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);opacity:0;margin-bottom:.4rem;transition:opacity .5s}.ob-sub{font-size:12px;color:var(--muted);opacity:0;margin-bottom:2rem;transition:opacity .5s}.ob-btns{display:flex;gap:10px;justify-content:center;opacity:0;transition:opacity .5s;flex-wrap:wrap}.l1-stage{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:.75rem}.l1-title{font-size:20px;font-weight:600;color:var(--text);margin-bottom:.5rem}.l1-hint{font-size:12px;color:var(--muted);margin-bottom:2rem;line-height:1.6}.l1-choices{display:flex;gap:12px;justify-content:center;margin-bottom:1.75rem}.l1-btn{flex:1;max-width:180px;padding:24px 16px;border-radius:var(--radius-lg);border:1px solid var(--b1);background:var(--p1);cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:10px}.l1-btn:hover{border-color:var(--blue);background:var(--blue-bg);transform:translateY(-2px)}.l1-btn.l1-playing{border-color:var(--gold);background:var(--gold-bg);animation:l1pulse .8s ease-in-out infinite alternate}.l1-btn.l1-correct{border-color:var(--green);background:var(--green-bg);pointer-events:none}.l1-btn.l1-wrong{border-color:var(--coral);background:var(--coral-bg);pointer-events:none}.l1-icon{font-size:24px;color:var(--muted)}.l1-lbl{font-family:inherit;font-size:10px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}@keyframes l1pulse{0%{box-shadow:0 0 #c8a96e4d}to{box-shadow:0 0 0 10px #c8a96e00}}.l1-fb{font-size:13px;font-weight:600;min-height:20px;margin-bottom:1.25rem;transition:color .3s}.l1-prog{margin-bottom:1.5rem}.l1-prog-label{font-size:10px;font-family:inherit;color:var(--muted);margin-bottom:5px}.l1-prog-track{height:3px;background:var(--b1);border-radius:2px}.l1-prog-bar{height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .4s}.l1-home{font-family:inherit;font-size:52px;font-weight:700;color:var(--blue);letter-spacing:.08em;animation:homeReveal 1s ease forwards;margin-bottom:.75rem}@keyframes homeReveal{0%{opacity:0;transform:scale(.7) translateY(10px)}70%{transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}.l1-home-sub{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:2rem}.l1-home-sub strong{color:var(--text)}.l1-exit{margin-top:2rem;font-size:9px;color:var(--dim);background:none;border:none;cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.1em}.hum-wave{width:100%;height:44px;border-radius:8px;background:var(--p1);border:1px solid var(--b1);margin-bottom:1.25rem;display:block}.hum-target{display:grid;grid-template-columns:auto auto;gap:4px 10px;align-items:baseline;max-width:300px;margin:1.25rem auto;padding:10px 14px;border:1px solid var(--b1);border-radius:8px;background:var(--p1);text-align:left}.hum-target__label{grid-column:1 / -1;color:var(--muted);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.hum-target strong{color:var(--gold);font-size:22px}.hum-target span:last-child{color:var(--muted);font-size:11px}.hum-target[data-state=correct]{border-color:var(--green)}.hum-target[data-state=sharp],.hum-target[data-state=flat]{border-color:var(--gold)}.hum-target[data-state=wrong]{border-color:var(--coral)}.hum-target[data-state=complete]{border-color:var(--green);background:var(--green-bg)}.hum-note{font-family:inherit;font-size:44px;font-weight:700;color:var(--muted);min-height:58px;margin-bottom:.4rem;transition:color .15s}.hum-func{font-size:14px;font-weight:600;color:var(--muted);min-height:22px;margin-bottom:.2rem}.hum-feel{font-size:11px;color:var(--dim);min-height:18px;margin-bottom:1.25rem}.hum-explore{padding:9px 14px;background:var(--p2);border-radius:7px;border:1px solid var(--b1);margin-bottom:1.25rem;font-size:11px;color:var(--muted);cursor:pointer}.hum-explore:hover{border-color:var(--blue)}.hum-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.ob2-wrap{flex-direction:column;text-align:center;color:var(--text);-webkit-font-smoothing:antialiased}.ob2-mode{max-width:560px;display:flex;flex-direction:column;gap:2.5rem}.ob2-q{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:600;line-height:1.35;letter-spacing:-.01em}.ob2-mode-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.ob2-choice{font:inherit;font-size:1rem;font-weight:600;color:var(--text);background:#ffffff0a;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1.1rem 1.6rem;cursor:pointer;transition:background .15s ease,border-color .15s ease}.ob2-choice:hover{background:#4b7bf524;border-color:var(--blue)}.ob2-slide{display:flex;flex-direction:column;align-items:center;gap:2rem;animation:ob2FadeIn .5s ease}@keyframes ob2FadeIn{0%{opacity:0}to{opacity:1}}.ob2-lines{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:600;line-height:1.4;letter-spacing:-.015em}.ob2-lines>div+div{color:var(--muted)}.ob2-path{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .9rem;font-size:clamp(1.1rem,3vw,1.7rem);font-weight:600}.ob2-step,.ob2-dot{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}.ob2-step.in,.ob2-dot.in{opacity:1;transform:none}.ob2-dot{color:var(--dim)}.ob2-begin{font:inherit;font-size:1.05rem;font-weight:700;color:#fff;background:var(--blue);border:0;border-radius:12px;padding:1rem 2.5rem;width:min(320px,80vw);cursor:pointer;transition:filter .15s ease}.ob2-begin:hover{filter:brightness(1.1)}.panel{position:relative}.tab-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:2rem;background:#0d0d128c;opacity:0;transition:opacity .22s ease;cursor:pointer}.tab-flash.in{opacity:1}.tab-flash.out{opacity:0}.tab-flash__card{max-width:420px;text-align:center;font-size:1.05rem;font-weight:600;line-height:1.5;color:var(--text)}#tab-host{padding-bottom:170px}.piano-section{position:fixed;bottom:0;left:0;right:0;z-index:50;background:linear-gradient(0deg,#0d0d12fa,#13131af2);padding:12px 0 max(12px,env(safe-area-inset-bottom));box-shadow:0 -1px #ffffff0a inset,0 -8px 40px #000000b3}.piano-inner{max-width:960px;margin:0 auto;padding:0 2rem;position:relative}.piano-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-left:162px}.piano-label{font-family:inherit;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}.piano-bar-svg{position:absolute;left:0;z-index:6;overflow:visible;pointer-events:none}.piano-bar-svg__fill{fill:#12121a}.piano-bar-content{position:absolute;z-index:7;display:flex;align-items:center;gap:12px;padding:14px 23px 6px 18px;box-sizing:border-box}.piano-bar-toggle{-moz-appearance:none;appearance:none;-webkit-appearance:none;font:inherit;display:inline-flex;align-items:center;padding:0;border:none;background:transparent;color:var(--text);cursor:pointer}.piano-bar-toggle:hover .piano-bar-toggle__arrow{color:var(--blue)}.piano-bar-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}.piano-bar-toggle__arrow{width:10px;height:10px;display:block;color:inherit}.piano-bar-toggle__arrow--flipped{transform:scaleY(-1)}.piano-mode-wrap{display:inline-flex;align-items:center}.piano-mode-indicator{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--text);-webkit-user-select:none;user-select:none}.piano-mode-row{display:flex;gap:4px;align-items:center}.piano-mode-row .octave-btn{letter-spacing:.08em}.piano-octave-row{display:flex;gap:5px;align-items:center}.piano-range-label{font-size:10px;color:var(--muted);padding:0 4px;min-width:42px;text-align:center}.octave-btn{padding:3px 10px;border-radius:4px;border:1px solid var(--b1);background:transparent;color:var(--muted);font-family:inherit;font-size:10px;cursor:pointer;transition:all .12s}.octave-btn:hover{border-color:var(--b2);color:var(--text)}.octave-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);box-shadow:0 0 8px #4b7bf54d}.piano-gear-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border-radius:4px;border:1px solid var(--b1);background:transparent;color:var(--muted);font-size:12px;line-height:1;cursor:pointer;transition:all .12s}.piano-gear-btn:hover{border-color:var(--b2);color:var(--text)}.piano-gear-btn[aria-expanded=true]{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);box-shadow:0 0 8px #4b7bf54d}.piano-gear-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.piano-section--expanded .piano-label-row{margin-bottom:0;padding-left:0}.piano-section--expanded .piano-label-row .piano-label,.piano-section--expanded .piano-gear-btn{display:none}.piano-settings-panel{position:fixed;z-index:60;min-width:190px;background:var(--panel-strong, #1d2330);border:1px solid var(--line);border-radius:10px;padding:12px;box-shadow:var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, .7));display:flex;flex-direction:column;gap:10px}.piano-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.piano-settings-row__label{font-size:11px;color:var(--muted);letter-spacing:.02em}.piano-settings-row .piano-octave-row{flex-shrink:0}.piano-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:36px 0;margin:-36px 0}.piano-viewport::-webkit-scrollbar{display:none}.piano-stage{position:relative;display:flex;width:max-content;height:var(--pk-white-h, 104px);-webkit-user-select:none;user-select:none;isolation:isolate}.pk-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pk-glow{z-index:2}.pk-annot{z-index:5}.piano-white{position:relative;z-index:1;width:38px;flex-shrink:0;height:var(--pk-white-h, 104px);border-radius:0 0 4px 4px;border:1px solid rgba(255,255,255,.06);border-top:none;background:linear-gradient(180deg,#0e0e18,#080810);cursor:pointer;transition:background 90ms ease,border-color 90ms ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}.piano-white:hover{background:linear-gradient(180deg,var(--p4),#323244)}.piano-white.pressed{z-index:3}.pk-label{font-size:8px;font-family:inherit;color:var(--dim);pointer-events:none}.pk-mid .pk-label{color:var(--blue);font-weight:700}.pk-mid:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px #4b7bf5b3;pointer-events:none}.pk-home{background:linear-gradient(180deg,#4b7bf56b,#4b7bf524)!important;border-color:#4b7bf599!important;box-shadow:0 0 12px #4b7bf580,0 0 22px #4b7bf533!important}.pk-move{background:linear-gradient(180deg,#2ecc9a6b,#2ecc9a24)!important;border-color:#2ecc9a99!important;box-shadow:0 0 12px #2ecc9a80,0 0 22px #2ecc9a33!important}.pk-tension{background:linear-gradient(180deg,#ff9f276b,#ff9f2724)!important;border-color:#ff9f2799!important;box-shadow:0 0 12px #ff9f2780,0 0 22px #ff9f2733!important}.pk-reflect{background:linear-gradient(180deg,#9b7fe86b,#9b7fe824)!important;border-color:#9b7fe899!important;box-shadow:0 0 12px #9b7fe880,0 0 22px #9b7fe833!important}.pk-prepare{background:linear-gradient(180deg,#b87fe86b,#b87fe824)!important;border-color:#b87fe899!important;box-shadow:0 0 12px #b87fe880,0 0 22px #b87fe833!important}.pk-surprise{background:linear-gradient(180deg,#ff6b8a6b,#ff6b8a24)!important;border-color:#ff6b8a99!important;box-shadow:0 0 12px #ff6b8a80,0 0 22px #ff6b8a33!important}.pk-color{background:linear-gradient(180deg,#2ed8d86b,#2ed8d824)!important;border-color:#2ed8d899!important;box-shadow:0 0 12px #2ed8d880,0 0 22px #2ed8d833!important}.piano-black{position:absolute;top:0;z-index:4;width:26px;height:var(--pk-black-h, 67px);border-radius:0 0 3px 3px;background:linear-gradient(180deg,#050508,#020204);border:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}.piano-black:hover{background:linear-gradient(180deg,#181828,#0e0e18)}.piano-black.near-lit{background:linear-gradient(0deg,color-mix(in srgb,var(--wash),transparent 90%) 0%,transparent 55%),linear-gradient(180deg,#050508,#020204);border-color:color-mix(in srgb,var(--wash),rgba(255,255,255,.04) 88%);box-shadow:inset 0 -6px 8px -5px color-mix(in srgb,var(--wash),transparent 78%),0 0 5px color-mix(in srgb,var(--wash),transparent 88%)}.glow-blob{position:absolute;border-radius:0 0 4px 4px;opacity:0;background:var(--gbg, linear-gradient(180deg, rgba(46, 216, 216, .32), rgba(46, 216, 216, .1)));box-shadow:0 0 0 1px var(--gc, rgba(46, 216, 216, .9)),0 0 9px var(--gc, rgba(46, 216, 216, .9)),0 0 22px var(--gg, rgba(46, 216, 216, .55)),0 0 46px var(--gs, rgba(46, 216, 216, .3));transition:opacity .26s cubic-bezier(.3,0,.15,1)}.glow-blob--black{border-radius:0 0 3px 3px}.glow-blob.on{opacity:1;transition:none}.piano-labels-on .piano-white:after{content:attr(data-note);position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-size:9px;font-family:inherit;color:#ffffff61;pointer-events:none}.piano-labels-on .pk-label{display:none}.piano-exercise-mode .piano-white:not(.answer-correct):not(.answer-wrong){background:linear-gradient(180deg,#0e0e18,#080810)!important;border-color:#ffffff0f!important;box-shadow:none!important}.piano-exercise-mode .piano-black:not(.answer-correct):not(.answer-wrong){background:linear-gradient(180deg,#050508,#020204)!important;border-color:#ffffff0a!important;box-shadow:none!important}.piano-exercise-mode .pk-glow{display:none}.piano-white.answer-correct{background:linear-gradient(180deg,#2ecc9a6b,#2ecc9a24)!important;border-color:#2ecc9a99!important;box-shadow:0 0 12px #2ecc9a80,0 0 22px #2ecc9a33!important;transition:box-shadow .1s ease}.piano-white.answer-wrong{background:linear-gradient(180deg,#ff6b8a6b,#ff6b8a24)!important;border-color:#ff6b8a99!important;box-shadow:0 0 12px #ff6b8a80,0 0 22px #ff6b8a33!important;transition:box-shadow .1s ease}.hint-icon{-moz-appearance:none;appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:13px;line-height:1;vertical-align:middle;cursor:help;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.hint-icon[hidden]{display:none}.hint-icon:hover,.hint-icon[aria-expanded=true]{color:var(--blue);background:#4b7bf51f}.hint-icon:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.hint-panel{position:fixed;z-index:200;background:var(--panel-strong, #1d2330);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg, 0 8px 40px rgba(0, 0, 0, .7));color:var(--text);line-height:1.55}.hint-panel__text{color:var(--muted)}.hint-panel--tip{max-width:240px;padding:9px 12px;font-size:11.5px}.hint-panel--overlay{max-width:320px;padding:16px 18px;font-size:12.5px}.hint-panel--overlay .hint-panel__text{color:var(--text);padding-right:14px}.hint-panel__close{position:absolute;top:8px;right:8px;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:11px;line-height:1;cursor:pointer}.hint-panel__close:hover{color:var(--text);background:#ffffff0f}.hear-help{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-bottom:.9rem;font-size:11px;color:var(--dim)}.hear-help__lead{text-transform:uppercase;letter-spacing:.14em}.hear-help__item{color:var(--muted)}:root{color-scheme:dark;--dur-fast: .12s;--dur-base: .2s;--dur-slow: .36s;--ease-out: cubic-bezier(.16, 1, .3, 1);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--muted: #767692;--dim: #53536d;--muted-strong: #9a9ab6;--focus: var(--blue)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}body{animation:none!important}}:where(button,a,input,select,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}:where(.piano-white,.piano-black,.mk-white,.mk-black,.family-cell,.slot):focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.pth-slot:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 45%,transparent)}.tabs{position:relative}.tab-indicator{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--blue);box-shadow:0 0 12px #4b7bf599;transform:translate(0);transition:transform var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out);pointer-events:none}.tab.active{border-bottom-color:transparent}@media (max-width: 640px){.page{padding:1rem 1rem 0}.header{flex-direction:column;gap:var(--space-md)}.header-right{align-items:flex-start}.app-title{font-size:22px}.family-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:88px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}.family-cell{scroll-snap-align:start}.midi-panel{right:8px;left:auto;bottom:auto;top:8px;width:158px;padding:12px}.midi-note-name{font-size:24px}}@media (max-width: 520px){.tabs{overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;min-width:82px}}.tab,.key-btn,.f-btn,.feel-tile,.choice,.ntf-btn,.lvl-btn,.tprog,.tkey,.octave-btn,.btn,.func-card,.family-cell{transition-property:color,background-color,background-image,border-color,box-shadow,transform,opacity;transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out)}.prog-card,.prac-card,.reveal-box,.ear-box{transition-property:border-color,box-shadow,transform;transition-duration:var(--dur-base);transition-timing-function:var(--ease-out)}.midi-dot.connected{animation:none}:root{--text: #f3f5ff;--muted: #b5bfd9;--dim: #7d84a3;--panel: #151821;--panel-strong: #1d2330;--line: rgba(255, 255, 255, .08);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif}body{font-family:var(--font-sans)}#app{min-height:100vh;padding:32px 20px 0}.page.page-shell{max-width:1100px;margin:0 auto;border:none;border-radius:18px;background:transparent;box-shadow:none;padding:24px 24px 0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:18px;margin-bottom:0;border-bottom:1px solid var(--line)}.header-gear-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.header-gear-btn:hover{color:var(--text);border-color:#fff3}.header-gear-btn.is-active{color:var(--blue);border-color:#4b7bf566;background:var(--blue-bg)}.header-gear-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.topbar h1,.topbar .app-title{margin:0;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.12;letter-spacing:-.02em;font-weight:700}.topbar .app-title em{font-style:normal;color:var(--blue)}.key-section{margin:22px 0 0}.key-section .row-label{font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.mode-switch{display:inline-flex;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px}.mode-switch .key-btn,.mode-btn{background:transparent;border:0;color:var(--muted);padding:10px 18px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;box-shadow:none;transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.mode-switch .key-btn.active,.mode-btn.active{background:#4b7bf529;color:var(--text);box-shadow:inset 0 0 0 1px #4b7bf559}.control-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}.instrument-loading{text-transform:none;letter-spacing:normal;font-style:italic;color:var(--gold);margin-left:4px}.instrument-loading.is-error{color:var(--coral)}.instrument-select-wrap{position:relative;display:inline-block}.instrument-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:inherit;font-size:13px;font-weight:500;padding:10px 34px 10px 14px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.instrument-select:hover{border-color:#fff3}.instrument-select:focus{outline:none;border-color:#4b7bf599;box-shadow:inset 0 0 0 1px #4b7bf559}.instrument-select-wrap:after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none}.key-section .key-row#key-row{gap:8px;margin-top:16px}#key-row .key-btn{border:1px solid var(--line);background:transparent;color:var(--muted);padding:8px 14px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;box-shadow:none;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}#key-row .key-btn:hover{color:var(--text);border-color:#fff3;background:transparent}#key-row .key-btn.active{background:linear-gradient(180deg,#4b7bf540,#4b7bf50f);border-color:#4b7bf5b3;color:var(--blue);box-shadow:none}.family-panel{margin:20px 0 0}.family-title{font-family:inherit;font-size:11px;letter-spacing:.16em;padding:0 0 10px}.family-body{padding:0}.tabs{margin-top:22px;gap:4px}.tabs .tab{font-family:inherit;font-size:13px;font-weight:500;padding:12px 18px 13px;text-shadow:none}.tabs .tab .tab-icon{display:none}.tabs .tab .tab-icon--svg{display:block;margin-bottom:2px}.tabs .tab.active{text-shadow:none}#tab-host{margin-top:20px}@media (max-width: 760px){.topbar{align-items:flex-start}}