.page_page___cNRq{padding-top:var(--nav-h);max-width:820px;margin:0 auto;padding-left:var(--section-px);padding-right:var(--section-px);padding-bottom:8rem}.page_hero__oDTzj{padding:5rem 0 2.5rem;border-bottom:1px solid var(--border-subtle)}.page_pageNum__kGHg3{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.2rem}.page_heroTitle__oZsRX{font-family:var(--font-display);font-size:clamp(3rem,7vw,6rem);font-weight:300;line-height:.9;letter-spacing:-.03em;color:var(--text-primary)}.page_heroTitle__oZsRX em{font-style:italic;color:var(--violet-400)}.page_heroSub__b3NmJ{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);max-width:520px;margin-top:1rem;line-height:1.8}.page_scoreBand__ClUDq{display:flex;gap:0;border-bottom:1px solid var(--border-subtle)}.page_scoreItem__c0kXR{flex:1;padding:1.2rem 0;text-align:center;border-right:1px solid var(--border-subtle)}.page_scoreItem__c0kXR:last-child{border-right:none}.page_scoreLabel__SVBTt{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}.page_scoreVal__B1Qfo{font-family:var(--font-display);font-size:2.5rem;font-weight:300;color:var(--text-primary);line-height:1;margin-top:.2rem}.page_display__rIUfU{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:2px;padding:3rem 2rem;text-align:center;margin:2rem 0;position:relative;overflow:hidden}.page_display__rIUfU:before{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%) rotateX(70deg);transform-origin:bottom center;width:300%;height:200%;background-image:linear-gradient(var(--border-dim) 1px,transparent 1px),linear-gradient(90deg,var(--border-dim) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;mask-image:radial-gradient(ellipse 80% 60% at 50% 100%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 100%,#000,transparent 80%)}.page_noteDisplay__e5PXH{font-family:var(--font-display);font-size:7rem;font-weight:300;line-height:1;color:var(--violet-300);position:relative;z-index:1;text-shadow:0 0 60px var(--glow-violet);transition:all .3s var(--ease-out);min-height:7rem;display:flex;align-items:center;justify-content:center}.page_noteHint__KFF6o{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);position:relative;z-index:1;margin-top:.5rem}.page_pianoWrap__3hV_E{margin:2rem 0;perspective:400px;overflow:hidden}.page_pianoContainer__tHaXP{display:inline-flex;position:relative;transform:rotateX(12deg);transform-origin:bottom center;left:50%;translate:-50% 0;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}.page_pianoKeys__LzOs3{display:flex;gap:2px;align-items:flex-start;position:relative;background:var(--bg-base);padding:0 2px 2px;border-radius:0 0 4px 4px;border:1px solid var(--border-mid);border-top:none}.page_whiteKey__sFTG0{width:44px;height:110px;background:linear-gradient(180deg,#f0f0f0,#e4e4e4);border:1px solid #bbb;border-radius:0 0 4px 4px;cursor:pointer;transition:all .12s;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-shadow:0 4px 8px rgba(0,0,0,.2),inset 0 -2px 4px rgba(0,0,0,.1)}.page_whiteKey__sFTG0.page_active__o5rht,.page_whiteKey__sFTG0:hover{background:linear-gradient(to bottom,var(--violet-300),var(--violet-400));border-color:var(--violet-500);box-shadow:0 4px 16px var(--glow-violet)}.page_keyLabel__n84qB{font-family:var(--font-mono);font-size:.58rem;color:var(--text-muted);letter-spacing:.04em;pointer-events:none}.page_whiteKey__sFTG0.page_active__o5rht .page_keyLabel__n84qB,.page_whiteKey__sFTG0:hover .page_keyLabel__n84qB{color:#fff}.page_blackKeyWrap__i4wsU{position:absolute;top:0;display:flex;gap:0;pointer-events:none}.page_blackKeySlot__gP9Ro{pointer-events:all}.page_blackKey__BNG7G{width:28px;height:68px;background:linear-gradient(180deg,#222,#111);border:1px solid #000;border-radius:0 0 3px 3px;cursor:pointer;transition:all .12s;box-shadow:0 6px 10px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.3);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}.page_blackKey__BNG7G.page_active__o5rht,.page_blackKey__BNG7G:hover{background:linear-gradient(to bottom,var(--violet-600),var(--violet-700));box-shadow:0 4px 16px var(--glow-violet)}.page_blackKeyLabel__Tp_7D{font-family:var(--font-mono);font-size:.5rem;color:hsla(0,0%,100%,.4);letter-spacing:.02em;pointer-events:none}.page_blackKey__BNG7G.page_active__o5rht .page_blackKeyLabel__Tp_7D,.page_blackKey__BNG7G:hover .page_blackKeyLabel__Tp_7D{color:hsla(0,0%,100%,.9)}.page_guessLabel__iuRKu{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.8rem;margin-top:1.5rem}.page_noteGrid__FjekT{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem}.page_noteBtn__X7tNX{background:var(--bg-3);border:1px solid var(--border-subtle);border-radius:2px;padding:.85rem .3rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;color:var(--text-secondary);cursor:pointer;transition:all .2s var(--ease-out)}.page_noteBtn__X7tNX:hover:not(.page_correct__YHQ6l):not(.page_wrong__eunBU){background:var(--surface-2);border-color:var(--border-mid);color:var(--text-primary);transform:translateY(-2px)}.page_noteBtn__X7tNX.page_correct__YHQ6l{background:rgba(62,207,142,.12);border-color:#3ecf8e;color:#3ecf8e;box-shadow:0 0 16px rgba(62,207,142,.15)}.page_noteBtn__X7tNX.page_wrong__eunBU{background:hsla(0,100%,71%,.1);border-color:#ff6b6b;color:#ff6b6b}.page_status__WsX0q{text-align:center;font-family:var(--font-display);font-size:2rem;font-weight:300;color:var(--text-secondary);min-height:3rem;display:flex;align-items:center;justify-content:center;margin:1.5rem 0;transition:color .3s}.page_status__WsX0q.page_correct__YHQ6l{color:#3ecf8e}.page_status__WsX0q.page_wrong__eunBU{color:#ff6b6b}.page_infoSection__RCotQ{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border-subtle)}.page_infoLabel__cJh9O{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--violet-500);margin-bottom:1rem}.page_infoTitle__3HrQF{font-family:var(--font-display);font-size:2.2rem;font-weight:300;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:1rem}.page_infoTitle__3HrQF em{font-style:italic;color:var(--violet-400)}.page_infoBody__5JnJJ{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary);line-height:1.85;max-width:560px}@media (max-width:600px){.page_noteGrid__FjekT{grid-template-columns:repeat(4,1fr)}.page_noteDisplay__e5PXH{font-size:5rem}.page_pianoContainer__tHaXP{transform:rotateX(6deg) scale(.85)}}