*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #111;--bg-panel: #1a1a1a;--bg-card: #222;--border: #444;--text: #ddd;--text-dim: #888;--accent: #4a8;--accent-dim: #2a5;--btn-bg: #2a2a2a;--btn-hover: #383838;--btn-active-bg: #4a8;--btn-active-text: #111;--btn-toggle-active: #48a}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden;display:grid;grid-template-rows:auto 1fr minmax(44px,auto) auto;grid-template-areas:"header" "main" "playback" "tabstrip"}#home-view{padding:32px;background:var(--bg);color:var(--text);min-height:100vh;overflow-y:auto;grid-column:1 / -1;grid-row:1 / -1}#home-view[hidden]{display:none}.home-title{font-size:1.4rem;margin-bottom:24px}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.song-card{display:flex;flex-direction:row;align-items:center;gap:14px;padding:14px;background:var(--btn-bg);border:1px solid var(--border);border-radius:6px;text-align:left;color:var(--text);cursor:pointer;font-family:inherit;transition:background .15s ease,border-color .15s ease,transform .15s ease}.song-card:hover{background:var(--btn-hover);border-color:#888;transform:translateY(-2px)}.song-card-portrait{flex:0 0 auto;width:72px;height:72px;object-fit:cover;border-radius:4px;border:1px solid var(--border);image-rendering:pixelated;background:#000}.preview-hand{display:block;width:100%;max-width:200px;margin:8px auto 0;image-rendering:pixelated;border:1px solid var(--border);border-radius:4px;background:#000}.preview-hand[hidden]{display:none}.chord-btn .where-icon{display:inline-block;margin-left:4px;opacity:.55;font-size:.7em;cursor:pointer}.chord-btn .where-icon:hover{opacity:1}#home-view{background-image:linear-gradient(#0f0d12eb,#0f0d12eb),url(/titles/title1b.png);background-size:cover;background-position:center;background-attachment:fixed}.home-footer{margin-top:32px;display:flex;align-items:center;gap:16px;font-size:.85rem;color:var(--text-dim)}.home-footer-link{color:var(--text-dim);text-decoration:none}.home-footer-link:hover{color:var(--accent);text-decoration:underline}#lyrics-overlay,#about-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000d1;z-index:1000;padding:24px}#lyrics-overlay[hidden],#about-overlay[hidden]{display:none}.lyrics-panel,.about-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:16px;max-width:900px;max-height:95vh;display:flex;flex-direction:column;gap:12px}.lyrics-header,.about-header{display:flex;align-items:center;gap:12px}.lyrics-header span:first-child,.about-header span:first-child{flex:1;font-weight:600;font-size:1rem}#lyrics-img,#about-img{display:block;max-width:100%;max-height:70vh;margin:0 auto;image-rendering:pixelated;border:1px solid var(--border);background:#000}.lyrics-nav,.about-nav{display:flex;justify-content:center;gap:8px}.about-text{font-size:.85rem;color:var(--text-dim);line-height:1.5;max-width:700px;text-align:center;margin:0 auto}.about-text a{color:var(--accent)}#tuner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000d1;z-index:1000;padding:24px}#tuner-overlay[hidden]{display:none}.tuner-panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:20px;min-width:420px;max-width:600px;color:var(--text);display:flex;flex-direction:column;gap:12px}.tuner-header{display:flex;align-items:center;gap:12px;font-weight:600}.tuner-header span{flex:1}.tuner-strings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tuner-string{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 8px;background:var(--btn-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer;font-family:inherit}.tuner-string:hover{background:var(--btn-hover);border-color:#888}.tuner-string:active{background:var(--accent);color:#111}.tuner-string .ts-label{font-size:1.8rem;font-weight:700}.tuner-string .ts-sub{font-size:.75rem;color:var(--text-dim)}.tuner-hint{font-size:.8rem;color:var(--text-dim);margin:0;text-align:center}#toolkit-view{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:500;padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}#toolkit-view[hidden]{display:none}.toolkit-header{display:flex;align-items:center;gap:12px}.toolkit-header h2{flex:1;font-size:1.1rem;font-weight:600;margin:0}#toolkit-video{width:100%;max-height:60vh;background:#000}.toolkit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.toolkit-btn{padding:12px 8px;background:var(--btn-bg);border:1px solid var(--border);border-radius:4px;color:var(--text);cursor:pointer;font-family:inherit;font-size:.9rem}.toolkit-btn:hover{background:var(--btn-hover);border-color:#888}.toolkit-btn.active{background:var(--accent);color:#111;border-color:var(--accent);font-weight:700}.ex-segments{display:flex;gap:6px;flex-wrap:wrap}.ex-segments[hidden]{display:none}.ex-segment-btn{padding:4px 10px;background:var(--btn-bg);border:1px solid var(--border);border-radius:3px;color:var(--text);font-size:.78rem;font-family:inherit;cursor:pointer}.ex-segment-btn.active{background:var(--accent);color:#111;border-color:var(--accent)}.song-card-text{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.song-card-title{font-size:1.1rem;font-weight:700}.song-card-artist{font-size:.9rem;color:var(--text-dim)}.song-card-meta{font-size:.8rem;color:var(--text-dim);margin-top:6px}#header[hidden],#main[hidden],#playback-controls[hidden],#tab-row[hidden]{display:none}#header{grid-area:header;display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0a0a0a;border-bottom:1px solid var(--border)}#header h1{font-size:1.1rem;font-weight:600;letter-spacing:.02em;flex:1}#back-to-home{flex-shrink:0;white-space:nowrap}#orientation-toggle{display:flex;gap:4px}#orientation-toggle button{padding:6px 14px;background:var(--btn-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:.85rem;border-radius:3px}#orientation-toggle button:hover{background:var(--btn-hover)}#orientation-toggle button.active{background:var(--btn-toggle-active);color:#fff;border-color:#5af}#main{grid-area:main;display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:0;min-height:0;overflow:hidden}@media (max-width: 800px){body{height:auto;overflow:auto}#main{grid-template-columns:1fr;grid-template-rows:auto auto}}#video-pane{padding:16px;display:flex;flex-direction:column;align-items:stretch;min-width:0;height:100%;min-height:0}#video-pane video{display:block;width:100%;flex:1;min-height:0;background:#000;object-fit:contain}#side-panel{padding:16px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:16px;min-width:200px;background:var(--bg-panel);overflow-y:auto}.now-next{display:grid;grid-template-columns:1fr 1fr;gap:12px}.now-next>.preview{display:flex;flex-direction:column;gap:6px}.now-next .preview-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}.now-next .preview-name{font-size:1.1rem;font-weight:700}.now-next canvas{display:block;width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--border);background:#000}.now-next .preview.now canvas{border-width:2px;border-style:solid}.all-chords{display:flex;flex-wrap:wrap;gap:4px}.all-chords .chord-btn{padding:6px 10px;font-size:.85rem}.chord-btn{padding:8px 12px;background:var(--btn-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:.9rem;font-family:inherit;border-radius:3px;min-width:40px;text-align:center}.chord-btn:hover{background:var(--btn-hover);border-color:#666}#tab-row{grid-area:tabstrip;min-width:0;width:100%}.tab-viewport{position:relative;overflow:hidden;width:100%;background:#0f0f0f;border-top:1px solid var(--border);border-bottom:1px solid var(--border);cursor:grab}.tab-viewport:active{cursor:grabbing}.tab-strip{position:relative;will-change:transform;transition:transform .25s ease-out}.tab-strip.dragging{transition:none}.tab-strip img{display:block;image-rendering:pixelated;height:auto;width:auto;-webkit-user-select:none;user-select:none;pointer-events:none}.bar-marker{position:absolute;top:0;bottom:0;width:1px;background:#ffffff2e;pointer-events:none}.tab-cursor{position:absolute;top:0;bottom:0;left:0;width:2px;background:#4aaa88e6;pointer-events:none;will-change:transform}.ab-marker{position:absolute;top:0;bottom:0;width:3px;pointer-events:none;z-index:2}.ab-marker.a{background:#f90}.ab-marker.b{background:#f0a}.loop-region{position:absolute;top:0;bottom:0;background:#ff99001f;pointer-events:none;z-index:1}#playback-controls{grid-area:playback;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:4px 16px;min-width:0;min-height:44px;background:#0a0a0a;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.85rem}.speed-control{display:flex;align-items:center;gap:8px;flex:1;max-width:480px}.speed-control input[type=range]{flex:1;accent-color:var(--accent)}.ctrl-label{color:var(--text-dim);white-space:nowrap}.speed-value{font-family:ui-monospace,SF Mono,Menlo,Monaco,Cascadia Code,monospace;min-width:3.5em;text-align:right;color:var(--text)}.speed-presets{display:flex;gap:4px;margin-left:8px}.preset-btn{padding:4px 8px;font-size:.78rem;background:var(--btn-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;font-family:inherit;border-radius:3px;white-space:nowrap}.preset-btn:hover{background:var(--btn-hover);border-color:#666}.preset-btn.active{background:var(--btn-active-bg);color:var(--btn-active-text);border-color:var(--accent)}.loop-here-btn{padding:6px 10px;background:var(--btn-bg);border:1px solid #5a5;color:var(--text);cursor:pointer;font-size:.85rem;font-family:inherit;border-radius:3px;white-space:nowrap}.loop-here-btn:hover{background:var(--btn-hover);border-color:#6b6}.loop-controls{display:flex;align-items:center;gap:6px;margin-left:auto}.ab-btn,.loop-btn,.loop-clear{padding:6px 10px;background:var(--btn-bg);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:.85rem;font-family:inherit;border-radius:3px}.ab-btn:hover,.loop-btn:hover,.loop-clear:hover{background:var(--btn-hover);border-color:#666}.loop-clear{width:28px;padding:0;text-align:center}.ab-btn.set-a{border-left:3px solid #ff9900}.ab-btn.set-b{border-left:3px solid #ff00aa}.loop-btn[data-on=true]{background:#4a8;color:#111;border-color:#4a8}.loop-btn:disabled{opacity:.5;cursor:not-allowed}.difficulty-hotspot{position:absolute;z-index:1;pointer-events:auto;cursor:pointer;box-sizing:border-box}.all-chords.playing .chord-btn{opacity:.45;pointer-events:none;cursor:not-allowed}#exercise-select{background:var(--btn-bg);color:var(--text);border:1px solid var(--border);padding:6px 10px;border-radius:3px;font-size:.85rem;cursor:pointer;font-family:inherit}#exercise-select:hover{background:var(--btn-hover);border-color:#666}#exercise-pane{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;min-height:0;min-width:0}#exercise-pane[hidden]{display:none}.ex-mini-header{display:flex;align-items:center;gap:12px;padding:4px 0}.ex-title{flex:1;font-weight:600;font-size:.95rem}.ex-nav{display:flex;gap:6px}#ex-video{width:100%;height:100%;min-height:0;background:#000;object-fit:contain;flex:1}.ex-bottom{display:flex;align-items:center;gap:10px;font-size:.85rem}.ex-autoplay{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--text)}body.exercise-mode #playback-controls button,body.exercise-mode #playback-controls input[type=range]{opacity:.4;pointer-events:none;cursor:not-allowed}#exercise-tab-row{display:none;padding:16px;background:#0f0f0f;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center}body.exercise-mode #exercise-tab-row{display:block}body.exercise-mode .tab-viewport{display:none}#exercise-tab-img{display:inline-block;max-width:100%;image-rendering:pixelated;border:1px solid var(--border)}#exercise-tab-row.no-image{display:none!important}.song-card-progress{font-size:.8rem;color:var(--accent);margin-top:2px}.ex-done-btn{margin-left:auto;border-color:var(--border)}.ex-done-btn.done{background:var(--accent-dim);color:#fff;border-color:var(--accent)}#help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:1000}#help-overlay[hidden]{display:none}.help-panel{background:var(--bg-panel);border:1px solid var(--border);padding:24px 32px;border-radius:8px;min-width:420px;color:var(--text)}.help-panel h2{margin-bottom:16px;font-size:1.1rem}.help-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:.9rem}.help-table th,.help-table td{text-align:left;padding:6px 12px;border-bottom:1px solid var(--border)}.help-table th{color:var(--text-dim);font-weight:600}.help-table td:first-child{font-family:ui-monospace,SF Mono,Menlo,Monaco,Cascadia Code,monospace;color:var(--accent)}#help-close{padding:8px 16px;background:var(--btn-bg);color:var(--text);border:1px solid var(--border);border-radius:3px;cursor:pointer;font-family:inherit}#help-close:hover{background:var(--btn-hover)}#settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:1000}#settings-overlay[hidden]{display:none}.settings-panel{background:var(--bg-panel);border:1px solid var(--border);padding:24px 32px;border-radius:8px;min-width:360px;color:var(--text);display:flex;flex-direction:column;gap:16px}.settings-panel h2{font-size:1.1rem}.setting-row{display:flex;align-items:center;gap:10px;font-size:.9rem;cursor:pointer}.setting-row input[type=range]{flex:1;accent-color:var(--accent)}.setting-row span{font-family:ui-monospace,SF Mono,Menlo,Monaco,Cascadia Code,monospace;min-width:3.5em;text-align:right;color:var(--text)}.setting-actions{display:flex;gap:10px;justify-content:flex-end}.chord-btn.danger{border-color:#a44;color:#e88}.chord-btn.danger:hover{background:#3a1212;border-color:#c55}#settings-btn{flex-shrink:0;font-size:1rem}