:root{--bg: #fbf7ef;--bg-2: #f5efe3;--panel: #ffffff;--panel-2: #f6f1e8;--line: #e8e0d2;--line-strong: #d3c8b6;--ink: #26292e;--muted: #6b7079;--accent: #14b8b0;--accent-strong: #0f9a93;--accent-ink: #ffffff;--accent-soft: #dcf5f2;--coral: #ff6b57;--coral-strong: #e4533f;--coral-soft: #ffe6e0;--violet: #7c5cd6;--violet-strong: #6446bd;--violet-soft: #ece6fb;--right: #14b8b0;--left: #8b6ee0;--ok: #1f9d5f;--ok-soft: #dcf5e6;--bad: #e5484d;--bad-soft: #fde2e3;--timing: #d98a0b;--timing-soft: #fdf0d5;--unsure: #7e8a97;--unsure-soft: #e9edf1;--shadow: 0 6px 20px rgba(60, 45, 20, .08);--shadow-strong: 0 14px 40px rgba(60, 45, 20, .16);--font-display: "Literata", Georgia, "Times New Roman", serif;--font-body: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}#root,.app{min-height:100%}.app{display:flex;flex-direction:column}.app.practice-mode{height:100vh;height:100dvh;overflow:hidden}a{color:var(--accent-strong)}h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.012em;margin:0;text-wrap:balance}h1{font-size:clamp(28px,4vw,40px);line-height:1.12}h2{font-size:24px;line-height:1.2;margin-top:8px}h3{font-size:19px;line-height:1.25}p{margin:10px 0}.muted{color:var(--muted);font-size:15px}.muted.warn,.warn-text{color:var(--timing);font-size:15px}.small{font-size:14px}.eyebrow{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-strong);font-weight:700;margin:0 0 8px}.lede{font-size:18px;max-width:62ch}.details{border:1px solid var(--line);border-radius:10px;padding:8px 14px;background:var(--panel);font-size:15px}.details summary{cursor:pointer;font-weight:600;color:var(--accent-strong);list-style:none}.details summary:before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s}.details[open] summary:before{transform:rotate(90deg)}.details summary::-webkit-details-marker{display:none}.details>:not(summary){margin-top:8px}.details ul{padding-left:20px;margin:8px 0 4px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;border-bottom:1px solid var(--line);background:#ffffffd9;backdrop-filter:blur(8px)}.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--ink);text-decoration:none}.brand-mark{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--accent) 0 48%,var(--coral) 48% 76%,var(--violet) 76%)}.topbar nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end}.topbar nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:600}.topbar nav a.on,.topbar nav a:hover{color:var(--accent-strong);background:var(--accent-soft)}.foot{margin-top:auto;padding:20px 24px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}.page{width:100%;max-width:1080px;margin:0 auto;padding:28px 24px 60px;display:flex;flex-direction:column;gap:26px}.page-head{display:flex;flex-direction:column;gap:6px}.hero{padding:8px 0 0;max-width:70ch}.hero-actions,.btn-row,.summary-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.panel h2{margin-top:0}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:12px}.card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}.card:hover,.card:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.level{color:var(--coral);letter-spacing:.1em;font-size:12px}.card h3{margin-top:2px}.card .subtitle{margin:0;color:var(--muted);font-size:14px}.card .desc{margin:4px 0 0;color:var(--muted);font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.meta-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:auto;padding-top:8px;color:var(--muted);font-size:13.5px}.badge{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);background:var(--panel)}.badge.passed{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}.badge.started{color:var(--timing);border-color:var(--timing);background:var(--timing-soft)}.badge.mic{color:var(--violet-strong);border-color:var(--violet);background:var(--violet-soft);text-transform:none;letter-spacing:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;min-height:42px;transition:transform .12s,box-shadow .12s,border-color .12s}.btn:hover{border-color:var(--accent);transform:translateY(-1px)}.btn:focus-visible,.seg-btn:focus-visible,.link:focus-visible,.choice-card:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px;border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px #14b8b04d}.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}.btn.coral{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 6px 16px #ff6b574d}.btn.coral:hover{background:var(--coral-strong);border-color:var(--coral-strong)}.btn.violet{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 6px 16px #7c5cd64d}.btn.violet:hover{background:var(--violet-strong);border-color:var(--violet-strong)}.btn.danger{border-color:var(--coral);color:var(--coral-strong)}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);box-shadow:none}.btn.ghost:hover{color:var(--ink);background:var(--panel-2);transform:none}.btn.small{padding:4px 12px;min-height:32px;font-size:15px}.btn.big{min-height:50px;padding:10px 24px;font-size:18px}.btn:disabled,.seg-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.link{background:none;border:none;color:var(--accent-strong);font:inherit;cursor:pointer;padding:0;text-align:left}.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--panel)}.seg-btn{background:transparent;border:none;color:var(--muted);font:inherit;font-weight:600;padding:7px 14px;cursor:pointer;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}.seg-btn+.seg-btn{border-left:1px solid var(--line)}.seg-btn.on{background:var(--accent);color:var(--accent-ink)}.field{display:flex;flex-direction:column;gap:6px;border:none;padding:0;margin:0}.field.inline{flex-direction:row;align-items:center;gap:10px}.field legend{font-weight:600;padding:0;margin-bottom:4px}.radio,.check{display:flex;align-items:center;gap:10px;padding:4px 0}input[type=range]{width:100%;max-width:420px;accent-color:var(--accent)}input[type=radio],input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}select{font:inherit;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px}.input-picker{display:flex;flex-direction:column;gap:10px;margin-top:6px}.status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:15px}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);flex:none}.status-dot.active{background:var(--ok)}.status-dot.starting{background:var(--timing)}.status-dot.error,.status-dot.lost,.status-dot.unsupported{background:var(--bad)}.level-meter{position:relative;display:inline-block;width:120px;height:8px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;vertical-align:middle}.level-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ok),var(--timing) 80%,var(--bad));transition:width .08s linear}.level-noise{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5}.input-check{display:flex;flex-direction:column;gap:8px}.big-note{font-family:var(--font-display);font-size:40px;line-height:1.1;padding:14px 18px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--line);color:var(--accent-strong)}.big-note.unsure{color:var(--unsure);background:var(--unsure-soft)}.event-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:15px}.event-list li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line)}.event-list li.unsure span:first-child{color:var(--unsure)}.dev-tools{display:flex;flex-direction:column;gap:8px}.stat-row,.summary-figures{display:flex;flex-wrap:wrap;gap:18px 36px;margin-top:6px}.stat-row>div,.summary-figures>div{display:flex;flex-direction:column}.figure{font-family:var(--font-display);font-size:30px;line-height:1.1;color:var(--accent-strong)}.figure-label{color:var(--muted);font-size:14px}.figure.warn{color:var(--timing)}.blockers{grid-column:1 / -1;border:1px solid var(--timing);background:var(--timing-soft);border-radius:10px;padding:8px 14px;font-size:15px}.blockers ul{margin:4px 0 0;padding-left:20px}.hands-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.chip{font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);background:var(--panel);white-space:nowrap}.chip.passed{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}.chip.started{color:var(--timing);border-color:var(--timing);background:var(--timing-soft)}.chip.legacy{color:var(--unsure);border-style:dashed}.practice{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;min-height:0;min-width:0;width:100%}.practice-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}.practice-title{display:flex;flex-direction:column;min-width:0;margin-right:auto}.practice-title h1{font-size:20px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-title .muted{font-size:13px}.tempo-control{display:flex;align-items:center;gap:6px}.tempo-control label{display:flex;flex-direction:column;align-items:center;gap:2px}.tempo-control input[type=range]{width:120px}.tempo-value{font-weight:600;font-size:14px}.beat-indicator{display:inline-flex;gap:6px;align-items:center;padding:0 6px}.beat-indicator .dot{width:12px;height:12px;border-radius:50%;background:var(--line-strong);transition:background .05s,transform .05s}.beat-indicator .dot.on{background:var(--accent);transform:scale(1.3)}.beat-indicator.count-in .dot.on{background:var(--timing)}.practice-input{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:6px 14px;border-bottom:1px solid var(--line);font-size:15px;background:var(--bg-2)}.practice-input .input-picker{flex-basis:100%;padding-bottom:4px}.kbd-hint{font-size:13.5px}.dev-inline{display:inline-flex;gap:6px}.stage-area{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.stage-wrap{position:relative;min-height:0;min-width:0;overflow:hidden;background:var(--bg);flex:1 1 auto}.stage-messages{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:6px 12px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink)}.stage-messages .msg-instruction{min-width:0;font-weight:600}.stage-messages .msg-toast{flex:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}.display-sheet .stage-wrap{flex:0 0 128px}.sheet-pane{position:relative;flex:0 0 40%;min-height:110px;min-width:0;background:#fffdf8;border-bottom:1px solid var(--line);overflow:hidden}.display-sheet .sheet-pane{flex:1 1 auto}.sheet-scroll{position:relative;width:100%;height:100%;min-width:0;overflow:hidden}.sheet-inner{position:absolute;top:0;left:0;will-change:transform}.sheet-host{position:relative}.sheet-host svg{display:block}.sheet-cursor{position:absolute;top:0;left:0;width:2px;background:#ff6b57d9;pointer-events:none}.sheet-highlight{position:absolute;border:2px solid rgba(15,154,147,.9);border-radius:6px;background:#14b8b024;pointer-events:none}.sheet-host g.st-correct path,.sheet-host g.st-correct rect{fill:#1f9d5f;stroke:#1f9d5f}.sheet-host g.st-early path,.sheet-host g.st-early rect,.sheet-host g.st-late path,.sheet-host g.st-late rect{fill:#d98a0b;stroke:#d98a0b}.sheet-host g.st-wrong path,.sheet-host g.st-wrong rect,.sheet-host g.st-wrongOctave path,.sheet-host g.st-wrongOctave rect,.sheet-host g.st-missed path,.sheet-host g.st-missed rect,.sheet-host g.st-extra path,.sheet-host g.st-extra rect{fill:#e5484d;stroke:#e5484d}.sheet-host g.st-uncertain path,.sheet-host g.st-uncertain rect{fill:#8a96a3;stroke:#8a96a3}.sheet-host g.st-expected path,.sheet-host g.st-expected rect{fill:#0f9a93;stroke:#0f9a93}.stage{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.toasts{position:absolute;top:10px;right:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none}.toast{background:#fffffff2;border:1.5px solid;border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px;max-width:min(70vw,420px);box-shadow:var(--shadow)}.stage-counter{position:absolute;top:10px;left:12px;z-index:2;display:flex;gap:14px;color:var(--ink);font-size:14px;font-weight:600;background:#ffffffe6;border:1px solid var(--line);padding:4px 12px;border-radius:999px;pointer-events:none}.count-in-overlay{position:absolute;z-index:2;top:28%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(72px,16vh,140px);color:var(--coral);text-shadow:0 4px 24px rgba(255,255,255,.9);pointer-events:none}.stage-hint{position:absolute;z-index:2;left:50%;bottom:calc(28% + 12px);transform:translate(-50%);background:#fffffff0;border:1px solid var(--line);border-radius:12px;padding:8px 16px;font-weight:600;max-width:min(90vw,560px);text-align:center;pointer-events:none;box-shadow:var(--shadow)}.stage-hint.idle{bottom:24%;font-weight:500;color:var(--muted)}.display-sheet .count-in-overlay{top:40%}.pause-overlay{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fbf7efe6;text-align:center;padding:20px}.summary{border-top:1px solid var(--line);background:var(--panel);padding:14px 18px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 28px;max-height:46vh;overflow:auto}.summary-head,.summary-actions,.advice,.summary-awards{grid-column:1 / -1}.summary-head h2{font-size:22px}.summary-awards{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.summary-table{border-collapse:collapse;width:100%;font-size:15px}.summary-table td{padding:4px 0;border-bottom:1px solid var(--line)}.summary-table td.num{text-align:right;font-weight:600}.summary-table tr.zero td{color:var(--muted)}.summary-table tr.ok td.num{color:var(--ok)}.summary-table tr.bad td.num{color:var(--bad)}.summary-table tr.timing td.num{color:var(--timing)}.summary-table tr.unsure td.num{color:var(--unsure)}.advice{margin:4px 0 0;padding-left:20px;color:var(--timing);font-size:15px}.tbl{overflow-x:auto}.tbl table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}.tbl th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 12px 6px 0;border-bottom:1px solid var(--line-strong)}.tbl td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}.help ol,.help ul{padding-left:22px;margin:6px 0}.help li{margin:6px 0}.setup-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--muted)}.setup-steps li{display:flex;align-items:center;gap:6px}.setup-steps .step-num{width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;background:var(--panel)}.setup-steps li.on{color:var(--ink)}.setup-steps li.on .step-num{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.setup-steps li.done .step-num{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}.setup-body{display:flex;flex-direction:column;gap:16px}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.choice-card{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;color:var(--ink);font:inherit;cursor:pointer;min-height:150px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}.choice-card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.choice-card:disabled{cursor:not-allowed;opacity:.7;box-shadow:none}.choice-card.current{border-color:var(--ok)}.choice-title{font-family:var(--font-display);font-size:21px;font-weight:600}.choice-text{color:var(--muted);font-size:15px;line-height:1.45}.choice-note{font-size:14px;line-height:1.4;color:var(--violet-strong)}.choice-avail{margin-top:auto;font-size:13.5px;font-weight:700;line-height:1.4}.choice-avail.ok{color:var(--ok)}.choice-avail.no{color:var(--bad);font-weight:600}.trouble{border:1px solid var(--timing);border-radius:12px;padding:14px 18px;background:var(--timing-soft);display:flex;flex-direction:column;gap:8px}.trouble h2{font-size:20px;margin:0}.trouble p{margin:0}.trouble ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}.sound-meter{display:flex;flex-direction:column;gap:6px}.sound-bar{position:relative;height:22px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}.sound-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ok),var(--timing) 80%,var(--bad));transition:width .08s linear}.sound-noise{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.5}.sound-legend{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--muted)}.sound-legend .ok{color:var(--ok);font-weight:700}.check-line{margin:0;font-weight:600}.check-line.ok{color:var(--ok)}.check-line.warn{color:var(--timing)}.check-line.info{color:var(--muted);font-weight:500}.recent-notes{margin:0}.mini-keyboard{display:flex;gap:4px}.mini-key{flex:1 1 0;min-width:0;min-height:64px;border-radius:0 0 10px 10px;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:flex-end;justify-content:center;padding:0 0 6px;box-shadow:inset 0 -4px 0 var(--line)}.mini-key.down,.mini-key:active{background:var(--accent);color:var(--accent-ink);box-shadow:none}.trial-phases{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}.trial-phases li{padding:4px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel)}.trial-phases li.on{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}.trial-phases li.done{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}.trial-progress{display:flex;align-items:center;gap:8px}.trial-progress .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);background:var(--panel)}.trial-progress .dot.on{background:var(--ok);border-color:var(--ok)}.trial-count{font-family:var(--font-display);font-size:22px;margin-left:6px}.verdict{border-radius:14px;padding:18px 20px;border:1px solid var(--ok);background:var(--ok-soft);display:flex;flex-direction:column;gap:10px}.verdict.warn{border-color:var(--timing);background:var(--timing-soft)}.verdict.neutral{border-color:var(--violet);background:var(--violet-soft)}.verdict h2{font-size:24px;margin:0}.verdict p,.verdict ul{margin:0}.verdict ul{padding-left:20px}.compat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.compat-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--line)}.compat-list li a{font-weight:600}.hero-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.action-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;box-shadow:var(--shadow);overflow:hidden}.action-card:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--accent)}.action-card.mission:before{background:linear-gradient(90deg,var(--violet),var(--coral))}.action-card.mission .eyebrow{color:var(--violet-strong)}.action-card.train:before{background:var(--accent)}.action-card.play:before{background:var(--coral)}.action-card.play .eyebrow{color:var(--coral-strong)}.action-card h2{font-size:24px;margin:0;display:flex;align-items:center;gap:10px}.action-card .goal{margin:0;font-size:17px}.action-card .btn{align-self:flex-start;margin-top:auto}.mission-icon{font-size:26px;line-height:1}.reward-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:14.5px}.xp-pill,.level-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13.5px;background:var(--violet-soft);color:var(--violet-strong)}.level-pill{background:var(--accent-soft);color:var(--accent-strong)}.piece-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.piece-list li a{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;background:var(--panel)}.piece-list li a:hover,.piece-list li a:focus-visible{border-color:var(--coral);outline:none;background:var(--coral-soft)}.setup-status{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:15px;color:var(--muted);margin:4px 0 0}.page-head .seg{align-self:flex-start;margin-top:6px}.entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.rewards-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.xp-bar{position:relative;height:14px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}.xp-fill{position:absolute;inset:0 auto 0 0;border-radius:7px;background:linear-gradient(90deg,var(--violet),var(--coral));transition:width .4s ease-out}.mission-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.mission-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.mission-item.instrument{border-color:var(--ok);background:var(--ok-soft)}.mission-item.discovery{border-color:var(--timing);background:var(--timing-soft)}.mission-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.reward-toast{position:fixed;z-index:20;top:18px;left:50%;transform:translate(-50%);width:min(92vw,460px);pointer-events:none}.reward-card{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--panel);border:2px solid var(--violet);box-shadow:var(--shadow-strong);animation:reward-pop .55s cubic-bezier(.2,1.4,.4,1) both}.reward-card.discovery{border-color:var(--accent)}.reward-icon{font-size:34px;line-height:1;animation:reward-bounce 1.2s ease-in-out .3s 2}.reward-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}.reward-kicker{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--violet-strong)}.reward-card.discovery .reward-kicker{color:var(--accent-strong)}.reward-text strong{font-family:var(--font-display);font-size:19px}.reward-xp{font-weight:700;color:var(--coral-strong)}.reward-confetti{position:absolute;inset:-10px 0 auto;height:0;pointer-events:none}.confetti{position:absolute;top:0;width:9px;height:14px;border-radius:2px;opacity:0;animation:confetti-fall 1.6s ease-out .1s both}.confetti.c1{left:8%;background:var(--coral);animation-delay:.05s}.confetti.c2{left:18%;background:var(--accent);animation-delay:.2s}.confetti.c3{left:28%;background:var(--violet);animation-delay:.1s}.confetti.c4{left:38%;background:var(--timing);animation-delay:.3s}.confetti.c5{left:48%;background:var(--coral);animation-delay:.15s}.confetti.c6{left:58%;background:var(--accent);animation-delay:.25s}.confetti.c7{left:68%;background:var(--violet);animation-delay:.05s}.confetti.c8{left:78%;background:var(--ok);animation-delay:.35s}.confetti.c9{left:88%;background:var(--coral);animation-delay:.2s}.confetti.c10{left:96%;background:var(--timing);animation-delay:.1s}@keyframes reward-pop{0%{transform:translateY(-24px) scale(.85);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes reward-bounce{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-8deg)}}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(150px) rotate(320deg);opacity:0}}@media(max-width:900px){.practice-bar{gap:6px 10px;padding:6px 10px}.practice-title h1{font-size:17px}.tempo-control input[type=range]{width:80px}.summary{grid-template-columns:1fr;max-height:52vh}}@media(max-width:640px){body{font-size:16px}.sheet-pane{flex-basis:46%}.display-sheet .stage-wrap{flex-basis:96px}.page{padding:18px 16px 48px;gap:20px}.topbar{padding:10px 14px;gap:8px}.topbar nav a{padding:5px 9px;font-size:14.5px}.brand{font-size:19px}.practice-bar .back{padding:4px 8px}.practice-title .muted{display:none}.seg-btn{padding:6px 9px;font-size:14px;min-height:34px}.tempo-control input[type=range]{display:none}.beat-indicator .dot{width:9px;height:9px}.toast{font-size:13.5px;padding:4px 10px}.stage-hint{font-size:14px}.choice-card{min-height:0;padding:14px 16px}.btn.big{width:100%}.mini-key{min-height:56px;font-size:14px}.action-card{padding:18px 16px 16px}.action-card h2{font-size:21px}.setup-steps{gap:6px 10px;font-size:13px}.setup-steps .step-label{display:none}.setup-steps li.on .step-label{display:inline}}@media(prefers-reduced-motion:reduce){.beat-indicator .dot,.level-fill,.card,.btn,.choice-card,.xp-fill{transition:none}.reward-card,.reward-icon,.confetti{animation:none}.confetti{display:none}}