:root{--green: #58cc02;--green-dark: #4caf00;--blue: #1cb0f6;--gold: #ffc800;--red: #ff4b4b;--gray-100: #f7f7f7;--gray-200: #e5e5e5;--gray-400: #afafaf;--gray-700: #4b4b4b;--ink: #3c3c3c;--radius: 16px}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,Noto Sans,sans-serif;background:var(--gray-100);color:var(--ink)}button{font-family:inherit}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;border-bottom:2px solid var(--gray-200);position:sticky;top:0;z-index:10}.brand{font-weight:800;font-size:1.15rem;color:var(--green-dark)}.topbar-stats{display:flex;align-items:center;gap:16px}.stat{font-weight:700;font-size:.95rem;white-space:nowrap}.icon-btn{background:var(--gray-100);border:2px solid var(--gray-200);border-radius:12px;width:40px;height:40px;font-size:1.1rem;cursor:pointer}.icon-btn.midi-status.is-connected{border-color:var(--green);background:#eafce4}.app-main{flex:1;display:flex;justify-content:center;padding:24px 16px 60px}.lesson-map{width:100%;max-width:480px}.unit-block{margin-bottom:36px}.unit-title{text-align:center;font-weight:800;color:#fff;background:var(--blue);padding:10px 16px;border-radius:12px;margin-bottom:24px;box-shadow:0 4px #0c8ec4}.unit-path{display:flex;flex-direction:column;gap:22px}.lesson-node-row{display:flex;align-items:center;gap:14px}.lesson-node-row.align-right{flex-direction:row-reverse;text-align:right;margin-left:auto}.lesson-node-row.align-left{margin-right:auto}.lesson-node-row{width:100%}.lesson-node-row.align-left{justify-content:flex-start}.lesson-node-row.align-right{justify-content:flex-end}.lesson-node{width:68px;height:68px;border-radius:50%;border:none;background:var(--green);box-shadow:0 6px 0 var(--green-dark);font-size:1.8rem;cursor:pointer;flex-shrink:0}.lesson-node:active{box-shadow:0 2px 0 var(--green-dark);transform:translateY(4px)}.lesson-node.is-locked{background:var(--gray-400);box-shadow:0 6px #8f8f8f;cursor:not-allowed}.lesson-node.is-completed{background:var(--gold);box-shadow:0 6px #d9a800}.lesson-node.is-boss{background:var(--blue);box-shadow:0 6px #0c8ec4;width:80px;height:80px;font-size:2.1rem}.lesson-node.is-boss.is-completed{background:var(--gold);box-shadow:0 6px #d9a800}.lesson-node-label{max-width:160px}.lesson-node-title{font-weight:700;font-size:.9rem}.lesson-node-stars{color:var(--gold);font-size:.9rem;letter-spacing:1px}.exercise-screen{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:20px}.exercise-progress{width:100%;display:flex;align-items:center;gap:14px}.progress-bar{flex:1;height:14px;background:var(--gray-200);border-radius:8px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--green);transition:width .3s ease}.exercise-card{width:100%;background:#fff;border-radius:var(--radius);border:2px solid var(--gray-200);padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}.exercise-card h2{margin:0}.exercise-card p{margin:0;color:var(--gray-700)}.exercise-prompt{font-size:1.15rem;font-weight:700;margin:0}.note-target-name{font-size:1.4rem;font-weight:800;color:var(--blue)}.lyrics{font-style:italic;color:var(--gray-700);font-size:.9rem}.hint{font-size:.85rem;color:var(--gray-400)}.success-text{color:var(--green-dark);font-weight:700}.stars-earned{font-size:2.4rem;color:var(--gold);letter-spacing:4px}.celebration h2{font-size:1.6rem}.btn{border:none;border-radius:12px;padding:12px 24px;font-weight:800;font-size:1rem;cursor:pointer}.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)}.btn-primary:active{box-shadow:0 1px 0 var(--green-dark);transform:translateY(3px)}.btn-secondary{background:#fff;color:var(--gray-700);border:2px solid var(--gray-200)}.btn-ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}.btn-choice{background:#fff;color:var(--ink);border:2px solid var(--gray-200);min-width:64px}.btn-choice.is-correct{background:#d7ffb8;border-color:var(--green);color:var(--green-dark)}.btn-choice.is-wrong{background:#ffdfe0;border-color:var(--red);color:#d3232e}.btn:disabled{cursor:default}.choice-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.preview-btn{align-self:center}.staff{max-width:100%;height:auto}.staff-line,.ledger-line{stroke:var(--gray-700);stroke-width:1.5}.clef{font-size:58px;fill:var(--ink);font-family:serif}.notehead{fill:var(--ink);stroke:var(--ink)}.notehead.is-active{fill:var(--blue);stroke:var(--blue)}.notehead.is-correct{fill:var(--green);stroke:var(--green)}.notehead.is-wrong{fill:var(--red);stroke:var(--red)}.piano{position:relative;width:100%;max-width:520px;height:150px;-webkit-user-select:none;user-select:none;touch-action:none}.piano-white-row{display:flex;width:100%;height:100%}.piano-black-row{position:absolute;top:0;left:0;width:100%;height:62%;pointer-events:none}.key{border:1px solid #2a2a2a;cursor:pointer;padding:0;position:relative}.key-white{background:#fff;height:100%;border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.key-white.is-pressed{background:#cdeaff}.key-white.is-target{box-shadow:inset 0 0 0 3px var(--gold)}.key-white.is-correct{background:#d7ffb8}.key-white.is-wrong{background:#ffc3c4}.key-black{position:absolute;background:#222;height:100%;border-radius:0 0 4px 4px;pointer-events:all;z-index:2}.key-black.is-pressed{background:#1cb0f6}.key-black.is-target{box-shadow:inset 0 0 0 3px var(--gold)}.key-black.is-correct{background:var(--green)}.key-black.is-wrong{background:var(--red)}.middle-c-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:block}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}.modal{background:#fff;border-radius:var(--radius);padding:28px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px}.modal h2{margin:0}.modal hr{border:none;border-top:2px solid var(--gray-200);width:100%}.field{display:flex;flex-direction:column;gap:6px;font-weight:700}.field select{padding:10px;border-radius:8px;border:2px solid var(--gray-200);font-size:1rem}.field-row{display:flex;align-items:center;gap:10px}.warning{color:#d3232e;font-weight:600}@media (max-width: 480px){.piano{height:120px}.clef{font-size:44px}}