:root{color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#14161c;color:#e8eaf0;font:15px/1.5 ui-sans-serif,system-ui,Segoe UI,sans-serif}#app{min-height:100%;display:flex;flex-direction:column}.topnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;border-bottom:1px solid #23283380;flex-wrap:wrap}.topnav .brand{font-size:15px;font-weight:700;letter-spacing:.04em;color:#e8eaf0}.navlinks{display:flex;gap:8px;flex-wrap:wrap}#screen{flex:1;padding:24px;max-width:1080px;width:100%;margin:0 auto}select,button,input[type=file]{background:#232733;color:#e8eaf0;border:1px solid #39405280;border-radius:7px;padding:8px 14px;font:inherit;cursor:pointer}button:hover:not(:disabled){background:#2d3240}button:disabled{opacity:.45;cursor:default}button.primary{background:#3f6fe0;border-color:#3f6fe0}button.primary:hover:not(:disabled){background:#5480ea}button.danger{background:#5a2530;border-color:#7a3a48}button.danger:hover:not(:disabled){background:#712d3c}button.active,.navlinks button.active{background:#3f6fe0;border-color:#3f6fe0}.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.card{background:#1b1e26;border:1px solid #2a2f3d;border-radius:12px;padding:18px}.card h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#78809a;margin:0 0 14px}.stack{display:flex;flex-direction:column;gap:16px}.grid-2{display:grid;grid-template-columns:minmax(300px,1fr) minmax(280px,1fr);gap:20px;align-items:start}@media(max-width:760px){.grid-2{grid-template-columns:1fr}}.row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #23283380;font-variant-numeric:tabular-nums}.row:last-child{border-bottom:0}.row b{font-weight:600}.muted{color:#78809a}.hidden{display:none!important}.hint{color:#78809a;font-size:13px;margin-top:10px}.err{background:#40222a;border:1px solid #7a3a48;color:#ffc9d2;padding:12px 14px;border-radius:9px;margin-bottom:16px}.ok{background:#1f3a2a;border:1px solid #2f6e4a;color:#bdf0d2;padding:12px 14px;border-radius:9px;margin-bottom:16px}.badge{display:inline-block;padding:2px 9px;border-radius:999px;background:#232733;border:1px solid #39405280;font-size:12.5px;color:#b8bfd2}.step{border-top:1px solid #23283380;padding-top:16px;margin-top:16px}.step:first-child{border-top:0;padding-top:0;margin-top:0}.step h3{margin:0 0 10px;font-size:14px;font-weight:600;color:#e8eaf0}.fretboard .chord-title{display:none}.nut{fill:#cfd4e2}.string-line,.fret-line{stroke:#4b5266;stroke-width:1.6}.fret-dot{fill:#3f6fe0}.finger-number{fill:#fff;font:600 13px ui-sans-serif,system-ui,sans-serif}.marker-open{fill:none;stroke:#cfd4e2;stroke-width:1.8}.marker-mute{fill:#7a8299;font:15px ui-sans-serif,system-ui,sans-serif}.position-label{fill:#a8b0c4;font:600 12px ui-sans-serif,system-ui,sans-serif}.chord-big{font-size:88px;font-weight:700;line-height:1;text-align:center;margin:4px 0 2px;font-variant-numeric:tabular-nums}.chord-diagram{display:flex;justify-content:center;min-height:220px}.chord-diagram svg{width:200px;height:254px}.meter{height:9px;background:#262b36;border-radius:5px;overflow:hidden}.meter>i{display:block;height:100%;background:#45c07a;transition:width .1s linear}.drill-layout{display:grid;grid-template-columns:220px 1fr 220px;gap:20px;align-items:start}@media(max-width:860px){.drill-layout{grid-template-columns:1fr}}.drill-stat{text-align:center}.drill-stat .value{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums}.drill-stat .label{color:#78809a;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.drill-center{text-align:center}.drill-timer{font-size:20px;font-variant-numeric:tabular-nums;color:#78809a;margin-bottom:4px}.drill-feedback{min-height:46px;margin-top:10px;transition:opacity .2s ease}.drill-feedback.fade-out{opacity:0}.drill-feedback .clarity-flash{display:inline-flex;align-items:center;gap:8px;background:#1f3a2a;border:1px solid #2f6e4a;color:#bdf0d2;padding:6px 14px;border-radius:999px;font-weight:600}.drill-feedback .wrong-flash{display:inline-flex;align-items:center;gap:8px;background:#40222a;border:1px solid #7a3a48;color:#ffc9d2;padding:6px 14px;border-radius:999px}.drill-controls{margin-top:18px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.stall-hint{color:#e0b03f;font-size:13px;margin-top:10px}details.diagnostics{margin-top:22px;background:#1b1e26;border:1px solid #2a2f3d;border-radius:12px;padding:4px 18px 18px}details.diagnostics summary{cursor:pointer;padding:14px 0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#78809a;list-style:none}details.diagnostics summary::-webkit-details-marker{display:none}details.diagnostics summary:before{content:"▸ "}details.diagnostics[open] summary:before{content:"▾ "}.diag-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,1fr);gap:20px}@media(max-width:760px){.diag-grid{grid-template-columns:1fr}}#chroma-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;align-items:end;height:108px}#chroma-bars div{background:#2c3242;border-radius:3px 3px 0 0;position:relative}#chroma-bars span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:10px;color:#6e768c}.tuner-display{text-align:center;padding:10px 0 18px}.tuner-note{font-size:72px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.tuner-freq{color:#78809a;font-size:14px;margin-top:6px;font-variant-numeric:tabular-nums}.tuner-cents{font-size:20px;font-weight:600;margin-top:10px;font-variant-numeric:tabular-nums;color:#b8bfd2}.tuner-cents.in-tune{color:#45c07a}.tuner-cents.sharp{color:#e0b03f}.tuner-cents.flat{color:#5aa3e0}.tuner-meter-track{position:relative;height:34px;background:#1b1e26;border:1px solid #2a2f3d;border-radius:9px;margin:0 0 18px;overflow:hidden}.tuner-meter-track .tuner-zone{position:absolute;inset:0 41%;background:#1f3a2a80;border-left:1px solid #2f6e4a;border-right:1px solid #2f6e4a}.tuner-meter-track .tuner-centerline{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#4b5266}.tuner-meter-track .tuner-needle{position:absolute;top:3px;bottom:3px;width:4px;border-radius:2px;background:#e05a5a;left:50%;transform:translate(-50%);transition:left .08s linear,background .12s linear}.tuner-meter-track .tuner-needle.in-tune{background:#45c07a}.tuner-strings{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px}.tuner-string{text-align:center;padding:10px 4px;border:1px solid #2a2f3d;border-radius:9px;background:#1b1e26}.tuner-string.active{border-color:#3f6fe0;background:#232c42}.tuner-string.tuned{border-color:#2f6e4a;background:#1f3a2a}.tuner-string-name{display:block;font-size:22px;font-weight:700}.tuner-string-hz{display:block;color:#78809a;font-size:11px;margin-top:2px;font-variant-numeric:tabular-nums}.stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:20px}.stats-summary .stat{background:#1b1e26;border:1px solid #2a2f3d;border-radius:12px;padding:14px 16px}.stats-summary .stat .value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}.stats-summary .stat .label{color:#78809a;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.grid-wrap{overflow-x:auto}table.transition-grid{border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}table.transition-grid th,table.transition-grid td{padding:6px 9px;text-align:center;border:1px solid #23283380;min-width:40px}table.transition-grid th{color:#b8bfd2;font-weight:600;background:#1b1e26}table.transition-grid th.corner{background:transparent;border:0}table.transition-grid td.empty{color:#3c4254}table.transition-grid td.diag{color:#3c4254;background:#17191f}.legend{display:flex;align-items:center;gap:8px;margin:10px 0 20px;font-size:12.5px;color:#78809a}.legend .swatch-bar{width:140px;height:10px;border-radius:5px;background:linear-gradient(90deg,#45c07a,#e0b03f,#e05a5a)}.confirm-row{display:inline-flex;gap:8px;align-items:center}pre.json-area{background:#14161c;border:1px solid #2a2f3d;border-radius:9px;padding:12px;font:12px/1.5 ui-monospace,Consolas,monospace;max-height:160px;overflow:auto;color:#cfd4e2}textarea#paste{width:100%;background:#14161c;border:1px solid #2a2f3d;border-radius:9px;padding:12px;color:#cfd4e2;font:12.5px/1.5 ui-monospace,Consolas,monospace;resize:vertical;margin-bottom:12px}.play-grid{display:grid;grid-template-columns:minmax(220px,280px) minmax(320px,1fr);gap:16px;align-items:start}@media(max-width:760px){.play-grid{grid-template-columns:1fr}}.play-now{position:sticky;top:16px}pre.sheet{margin:0;max-height:62vh;overflow:auto;font:13px/1.55 ui-monospace,Consolas,monospace;white-space:pre;color:#cfd4e2}.sheet-section{color:#8b93a7;font-weight:600;margin-top:14px;letter-spacing:.04em}.sheet-section:first-child{margin-top:0}.sheet-chords{color:#7f8aa6}.sheet-text{color:#cfd4e2}.sheet-tab{color:#6e768c}.sheet-chord{color:#9fb0d8;font-weight:600;border-radius:3px;padding:0 1px}.sheet-chord.unknown{color:#c98b8b;text-decoration:underline dotted}.sheet-chord.played{color:#5c6478;font-weight:400}.sheet-chord.current{background:#3f6fe0;color:#fff;font-weight:700}