:root{--dash-bg: #f4f3f0;--dash-surface: #ffffff;--dash-ink: #1e1c26;--dash-ink-dim: #6b6975;--dash-line: #e2e0da;--dash-primary: #2e2a45;--dash-primary-soft: #47415f;--dash-accent: #b8863c;--dash-accent-soft: #f2e4c8;--dash-teal: #2f7d6b;--dash-teal-soft: #dcece7}.dash-shell{width:100%;min-height:100vh;background:var(--dash-bg);color:var(--dash-ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;box-sizing:border-box}.dash-shell *{box-sizing:border-box}.dash-inner{display:grid;grid-template-columns:1fr;grid-template-areas:"topbar" "greeting" "continue" "stats" "path" "songs";gap:20px;width:100%;max-width:1400px;margin:0 auto;padding:16px 16px 48px}.dash-topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between}.dash-brand{font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--dash-primary)}.dash-topbar-right{display:flex;align-items:center;gap:10px}.dash-streak-pill{background:var(--dash-accent-soft);border:1px solid transparent;border-radius:8px;padding:6px 12px;font-weight:600;font-size:12.5px;color:#8a611f}.dash-avatar{width:34px;height:34px;border-radius:50%;background:var(--dash-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}.dash-greeting{grid-area:greeting}.dash-greeting h1{font-size:21px;font-weight:600;margin:0 0 4px}.dash-greeting p{margin:0;color:var(--dash-ink-dim);font-size:14px}.dash-continue-card{grid-area:continue;background:linear-gradient(120deg,var(--dash-primary),var(--dash-primary-soft));border-radius:10px;padding:22px 24px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.dash-continue-info{flex:1;min-width:200px}.dash-continue-eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}.dash-continue-info h2{margin:6px 0 14px;font-size:18px;font-weight:600}.dash-progress-track{height:5px;border-radius:3px;background:#ffffff2e;overflow:hidden;max-width:260px}.dash-progress-fill{height:100%;background:var(--dash-accent);border-radius:3px}.dash-continue-btn{background:transparent;color:#fff;font-weight:600;font-size:14px;padding:9px 16px;border:1px solid rgba(255,255,255,.35);border-radius:8px;text-decoration:none;white-space:nowrap}.dash-stats-row{grid-area:stats;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dash-stat-card{background:var(--dash-surface);border:1px solid var(--dash-line);border-top:3px solid var(--dash-primary);border-radius:8px;padding:14px 8px;text-align:center}.dash-stat-card--accent{border-top-color:var(--dash-accent)}.dash-stat-card--teal{border-top-color:var(--dash-teal)}.dash-stat-value{display:block;font-size:19px;font-weight:700;color:var(--dash-primary)}.dash-stat-card--accent .dash-stat-value{color:var(--dash-accent)}.dash-stat-card--teal .dash-stat-value{color:var(--dash-teal)}.dash-stat-label{font-size:11.5px;color:var(--dash-ink-dim)}.dash-section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--dash-ink-dim);margin:0 0 14px}.dash-path-section{grid-area:path}.dash-path{position:relative;display:flex;flex-direction:column;gap:20px;padding:4px 0;max-width:480px}.dash-path-row{display:flex;align-items:center;gap:14px}.dash-path-row--right{flex-direction:row-reverse;text-align:right;margin-left:auto}.dash-path-node-link{text-decoration:none}.dash-path-node{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0;border:1px solid var(--dash-line);background:var(--dash-surface);color:var(--dash-ink-dim)}.dash-path-node--done{background:var(--dash-teal);border-color:var(--dash-teal);color:#fff}.dash-path-node--current{border:1.5px solid var(--dash-accent);color:var(--dash-accent)}.dash-path-node--locked{border-style:dashed;color:var(--dash-ink-dim);opacity:.6}.dash-path-label{font-size:13.5px;font-weight:500;color:var(--dash-ink)}.dash-songs-section{grid-area:songs;min-width:0}.dash-songs-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.dash-song-card{flex:0 0 130px;background:var(--dash-surface);border:1px solid var(--dash-line);border-radius:8px;padding:14px}.dash-song-thumb{width:32px;height:32px;border-radius:6px;background:var(--dash-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin-bottom:12px}.dash-song-thumb--accent{background:var(--dash-accent)}.dash-song-thumb--teal{background:var(--dash-teal)}.dash-song-title{font-size:13.5px;font-weight:600}.dash-song-artist{font-size:12px;color:var(--dash-ink-dim);margin-bottom:8px}.dash-song-difficulty{font-size:10.5px;font-weight:600;border-radius:6px;padding:2px 8px}.dash-song-difficulty--easy{color:#1f6153;background:var(--dash-teal-soft)}.dash-song-difficulty--medium{color:#8a611f;background:var(--dash-accent-soft)}@media (min-width: 700px){.dash-inner{gap:26px;padding:28px 32px 56px}.dash-greeting h1{font-size:24px}.dash-stat-card{padding:18px 10px}.dash-stat-value{font-size:22px}.dash-songs-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow-x:visible}.dash-song-card{flex:none}}@media (min-width: 1100px){.dash-inner{grid-template-columns:2fr 1fr;grid-template-areas:"topbar   topbar" "greeting greeting" "continue continue" "stats    stats" "path     songs";padding:36px 48px 64px}.dash-path{max-width:none}.dash-songs-row{grid-template-columns:1fr}}.demo-shell{--demo-green: #58cc02;--demo-green-dark: #4caf00;--demo-ink: #3c3c3c;--demo-ink-dim: #6b6f76;--demo-bg: #fbfcf8;--demo-card: #ffffff;--demo-line: #e5e5e5;height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--demo-bg);color:var(--demo-ink);font-family:Nunito,-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif;color-scheme:light}.demo-progress-track{flex-shrink:0;height:10px;background:var(--demo-line);margin:16px 20px 0;border-radius:6px;overflow:hidden}.demo-progress-fill{height:100%;background:var(--demo-green);border-radius:6px;transition:width .35s ease}.demo-step{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:28px 20px 24px}.demo-card{width:100%;max-width:900px;margin:0 auto;animation:demo-fade-in .3s ease}@keyframes demo-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.demo-footer{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--demo-line);background:var(--demo-card)}.demo-btn-primary{flex:1;max-width:420px;padding:15px 20px;font-size:16px;font-weight:700;color:#fff;background:var(--demo-green);border:none;border-bottom:4px solid var(--demo-green-dark);border-radius:14px;cursor:pointer;letter-spacing:.3px;transition:transform .1s ease,opacity .15s ease}.demo-btn-primary:active{transform:translateY(2px);border-bottom-width:2px}.demo-btn-primary:disabled{opacity:.5;cursor:not-allowed}.demo-btn-ghost{padding:15px 18px;font-size:15px;font-weight:700;color:var(--demo-ink-dim);background:transparent;border:none;cursor:pointer}.demo-skip-hint{text-align:center;font-size:12.5px;color:var(--demo-ink-dim);margin-top:8px}.demo-skip-hint button{background:none;border:none;color:var(--demo-green-dark);font-weight:700;cursor:pointer;padding:6px 4px;font-size:12.5px}.demo-hero-emoji{font-size:56px;text-align:center;margin-bottom:12px}.demo-string-badge{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#fff;font-size:26px;font-weight:800;box-shadow:0 3px 10px #00000026}.demo-title{font-size:26px;font-weight:800;text-align:center;margin:0 0 10px;color:#2b2b2b}.demo-subtitle{font-size:15.5px;color:var(--demo-ink-dim);text-align:center;line-height:1.55;max-width:480px;margin:0 auto 4px}.guitar-strings{background:var(--demo-card);border:1px solid var(--demo-line);border-radius:16px;padding:16px 12px 18px;margin-top:18px}.guitar-strings-svg{width:100%;height:auto;display:block}.guitar-string-row circle,.guitar-string-row line{transition:fill .15s ease,stroke .15s ease}.guitar-string-row.is-active circle{filter:drop-shadow(0 0 4px rgba(0,0,0,.15))}.guitar-string-pluck{transform-box:fill-box;transform-origin:center;animation:guitar-pluck .4s ease}@keyframes guitar-pluck{0%{transform:scaleY(1)}25%{transform:scaleY(2.4)}55%{transform:scaleY(.6)}80%{transform:scaleY(1.3)}to{transform:scaleY(1)}}.guitar-strings-detail{min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:10px;padding:8px 12px;animation:demo-fade-in .2s ease}.guitar-strings-detail-word{font-size:19px;font-weight:800}.guitar-strings-detail-desc{font-size:13.5px;color:var(--demo-ink-dim);margin-top:2px}.guitar-strings-detail-hint{font-size:13.5px;color:var(--demo-ink-dim)}.guitar-strings-progress{text-align:center;font-size:12.5px;font-weight:700;color:var(--demo-green-dark);margin-top:6px}.demo-bridge-points{display:flex;flex-direction:column;gap:12px;margin-top:20px}.demo-bridge-point{display:flex;align-items:flex-start;gap:12px;background:var(--demo-card);border:1px solid var(--demo-line);border-radius:12px;padding:14px 16px}.demo-bridge-point-emoji{font-size:22px;line-height:1}.demo-bridge-point-text{font-size:14px;color:var(--demo-ink);line-height:1.5}.demo-player-callout{text-align:center;font-size:14.5px;font-weight:600;color:var(--demo-ink);background:#fff8e1;border:1px solid #ffe082;border-radius:10px;padding:10px 14px;margin:16px 0 12px}.demo-player-box{border:1px solid var(--demo-line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 12px #0000000f;height:clamp(220px,52vh,320px)}.demo-player-note{text-align:center;font-size:13px;color:var(--demo-ink-dim);margin-top:12px}.demo-single-string-player{height:clamp(190px,34vh,240px)}.abc-player-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:#fafafa}.abc-player-placeholder-title{font-size:13px;font-weight:700;color:var(--demo-ink-dim);text-transform:uppercase;letter-spacing:.04em}.abc-player-placeholder-play{width:48px;height:48px;border-radius:50%;border:1px solid var(--demo-line);background:#fff;font-size:18px;color:var(--demo-ink-dim);cursor:not-allowed}.abc-player-placeholder-label{font-size:12.5px;color:var(--demo-ink-dim);max-width:260px}.demo-practice-picker{display:flex;justify-content:center;gap:8px;margin:18px 0 14px;flex-wrap:wrap}.demo-practice-picker button{padding:10px 16px;font-size:14px;font-weight:600;border-radius:20px;cursor:pointer;min-height:40px}.demo-practice-tall-player{height:clamp(260px,58vh,420px)}.demo-tips{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap}.demo-tip-card{flex:1 1 260px;background:var(--demo-card);border:1px solid var(--demo-line);border-radius:10px;padding:16px 18px}.demo-cta{margin-top:28px;padding:22px 24px;border-radius:14px;background:linear-gradient(135deg,var(--demo-green),var(--demo-green-dark));color:#fff;text-align:center}.demo-cta a{display:inline-block;padding:10px 24px;font-size:14px;font-weight:700;background:#fff;color:var(--demo-green-dark);border-radius:8px;text-decoration:none}.demo-restart-link{display:block;text-align:center;margin-top:18px;padding:8px;font-size:12.5px;color:var(--demo-ink-dim)}@media (max-width: 480px){.demo-progress-track{margin:12px 14px 0}.demo-step{padding:20px 14px}.demo-hero-emoji{font-size:44px}.demo-title{font-size:21px}.demo-subtitle{font-size:14px}.demo-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:8px}.demo-btn-primary{padding:13px 16px;font-size:15px}.demo-btn-ghost{padding:13px 10px;font-size:14px}.demo-tips{gap:10px}.demo-cta{padding:18px 16px}}.tuner-hidden-player{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.tuner-status{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px;margin-top:10px;font-size:14px;color:var(--demo-ink-dim);text-align:center}.tuner-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;animation:tuner-pulse 1s ease-in-out infinite}@keyframes tuner-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.tuner-stop-btn{display:block;margin:16px auto 0;padding:8px 22px;border-radius:20px;border:1px solid var(--demo-line);background:#fff;color:var(--demo-ink-dim);font-size:13px;font-weight:600;cursor:pointer}.tab-explainer{background:var(--demo-card);border:1px solid var(--demo-line);border-radius:14px;padding:10px 8px 4px;margin-top:18px}.tab-explainer-svg{width:100%;height:auto;display:block}.tab-explainer-note{cursor:pointer;outline:none}.tab-explainer-note circle{transform-box:fill-box;transform-origin:center;transition:transform .1s ease}.tab-explainer-note:hover circle,.tab-explainer-note:focus-visible circle{filter:brightness(1.15)}.tab-explainer-note:active circle{transform:scale(.92)}.tab-explainer-note.is-active circle{animation:tab-note-pulse .5s ease-in-out}@keyframes tab-note-pulse{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}.tab-explainer-hint{margin:6px 0 8px;font-size:12.5px;font-weight:600;color:var(--demo-ink-dim);text-align:center}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%}body{min-height:100vh}