*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#1a1a1a;font-family:Inter,sans-serif;color:#e0e0e0}#topbar{position:fixed;top:0;left:0;right:0;height:48px;background:#111;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:4px;padding:0 12px;z-index:100;-webkit-user-select:none;user-select:none;flex-shrink:0;transition:transform .3s ease}.brand{color:#4dd0e1;font-weight:700;font-size:13px;letter-spacing:.3px;padding-right:6px;white-space:nowrap;flex-shrink:0}.divider{width:1px;height:20px;background:#2a2a2a;margin:0 5px;flex-shrink:0}.tool-pair{display:flex;background:#1e1e1e;border-radius:5px;padding:2px;gap:2px;flex-shrink:0}.tool-btn{background:transparent;border:none;color:#777;width:30px;height:28px;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s;padding:0;flex-shrink:0}.tool-btn:hover:not(.active){color:#ccc;background:#ffffff0f}.tool-btn.active{background:#4dd0e1;color:#111}.topbar-btn{background:transparent;border:1px solid transparent;color:#999;height:30px;padding:0 9px;border-radius:4px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;font-family:inherit;font-weight:500;transition:background .1s,color .1s,border-color .1s}.topbar-btn:hover{background:#1e1e1e;border-color:#333;color:#ccc}.topbar-btn:active{background:#181818}.status-area{margin-left:auto;display:flex;align-items:center;gap:12px;flex-shrink:0}.mic-indicator{display:flex;align-items:center;gap:6px;color:#555;font-size:12px;flex-shrink:0}.mic-dot{width:7px;height:7px;border-radius:50%;background:#444;flex-shrink:0;transition:background .2s,box-shadow .2s}.mic-indicator.active .mic-dot{background:#4ade80;box-shadow:0 0 6px #4ade8099}.mic-indicator.active{color:#4ade80}.mic-label{white-space:nowrap}#pitchReadout{font-family:SF Mono,ui-monospace,Cascadia Code,monospace;font-size:13px;color:#4dd0e1;min-width:110px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}#pitchReadout.in-tune,#pitchReadout.sharp{color:#66bb6a}#pitchReadout.flat{color:#ef5350}#pitchSliderTrack{position:fixed;left:0;top:48px;bottom:52px;width:14px;background:#0d0d0d;border-right:1px solid #222;z-index:20;-webkit-user-select:none;user-select:none;touch-action:none}#pitchSliderThumb{position:absolute;left:2px;right:2px;background:#2a2a2a;border-radius:4px;cursor:grab;touch-action:none;min-height:20px;transition:background .12s}#pitchSliderThumb:hover{background:#333}#pitchSliderThumb.ps-dragging{cursor:grabbing;background:#3a3a3a}.ps-handle{position:absolute;left:0;right:0;height:5px;background:#4dd0e1;border-radius:2px;cursor:ns-resize;opacity:.55;transition:opacity .1s}.ps-handle:hover{opacity:1}.ps-handle-top{top:0;border-radius:4px 4px 2px 2px}.ps-handle-bot{bottom:0;border-radius:2px 2px 4px 4px}#board{position:fixed;inset:48px 0 52px;cursor:crosshair;display:block}body.practice-mode #board{cursor:default}body.erase-mode #board{cursor:cell}#pitchLabel{position:fixed;pointer-events:none;z-index:200;background:#4dd0e12e;border:1px solid rgba(77,208,225,.55);color:#4dd0e1;font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.5px;opacity:0;transition:opacity .08s;white-space:nowrap}#pitchLabel.visible{opacity:1}#bottombar{position:fixed;bottom:0;left:0;right:0;height:52px;background:#111;border-top:1px solid #2a2a2a;display:flex;align-items:center;gap:6px;padding:0 12px;z-index:100;-webkit-user-select:none;user-select:none;flex-shrink:0;transition:transform .3s ease}.playback-btn{background:#1e1e1e;border:1px solid #2e2e2e;color:#bbb;height:32px;padding:0 12px;border-radius:4px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;font-family:inherit;font-weight:500;transition:background .1s,border-color .1s,color .1s}.playback-btn:hover:not(:disabled){background:#2a2a2a;border-color:#3a3a3a;color:#ddd}.playback-btn:disabled{opacity:.35;cursor:not-allowed}.playback-btn.primary{background:#1a3d2a;border-color:#2d6b44;color:#66bb6a;font-weight:600;padding:0 16px}.playback-btn.primary:hover:not(:disabled){background:#1f4d32;border-color:#3d8a55;color:#81c784}.playback-btn.primary.active{background:#4ade80;border-color:#4ade80;color:#0a1a10}.playback-btn.primary.active:hover:not(:disabled){background:#5ae890;border-color:#5ae890}.divider-v{width:1px;height:24px;background:#2a2a2a;margin:0 4px;flex-shrink:0}.speed-control{display:flex;align-items:center;gap:7px;flex-shrink:0}.speed-label{color:#666;font-size:12px;white-space:nowrap}#speedSlider{width:100px;accent-color:#4dd0e1;cursor:pointer}.speed-value{color:#aaa;font-size:12px;font-family:SF Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums;min-width:34px}.time-readout{margin-left:auto;color:#555;font-size:12px;font-family:SF Mono,ui-monospace,Cascadia Code,monospace;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .15s}.status-toast{position:fixed;bottom:62px;left:50%;transform:translate(-50%);background:#1e1e1ef2;border:1px solid #333;color:#4dd0e1;font-size:12px;font-family:inherit;font-weight:500;padding:5px 14px;border-radius:5px;z-index:300;pointer-events:none;white-space:nowrap;box-shadow:0 4px 16px #0006}.status-toast[hidden],.score-panel[hidden],.history-modal-overlay[hidden]{display:none}.files-modal-overlay{position:fixed;inset:0;background:#000000a6;z-index:500;display:flex;align-items:center;justify-content:center}.files-modal-overlay[hidden]{display:none}.files-modal{background:#181818;border:1px solid #2e2e2e;border-radius:10px;width:420px;max-width:calc(100vw - 48px);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px #0009}.files-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 12px;border-bottom:1px solid #2a2a2a;font-size:13px;font-weight:600;color:#4dd0e1;letter-spacing:.3px;flex-shrink:0}.files-modal-close-btn{width:24px;height:24px;padding:0;font-size:13px;border-radius:4px;flex-shrink:0;background:#242424;border:1px solid #333;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .1s,color .1s}.files-modal-close-btn:hover{background:#2e2e2e;color:#ccc}.files-save-row{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #222;flex-shrink:0}.files-save-row input{flex:1;background:#242424;border:1px solid #333;border-radius:5px;color:#ddd;font-family:inherit;font-size:12px;padding:5px 10px;outline:none;min-width:0}.files-save-row input:focus{border-color:#4dd0e1}.files-save-row button{background:#1a3d2a;border:1px solid #2d6b44;color:#66bb6a;font-weight:600;padding:0 14px;border-radius:5px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .1s,border-color .1s}.files-save-row button:hover:not(:disabled){background:#1f4d32;border-color:#3d8a55}.files-save-row button:disabled{opacity:.4;cursor:not-allowed}.files-list{overflow-y:auto;flex:1;padding:6px 0}.files-empty{display:block;text-align:center;color:#444;font-size:12px;padding:24px 0}.files-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid #1e1e1e;transition:background .1s}.files-item:last-child{border-bottom:none}.files-item:hover{background:#1e1e1e}.files-item-info{display:flex;flex-direction:column;gap:2px;min-width:0}.files-item-name{font-size:12.5px;font-weight:500;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.files-item-meta{font-size:10.5px;color:#555}.files-item-actions{display:flex;gap:5px;flex-shrink:0}.files-item-actions button{height:24px;padding:0 10px;font-size:11px;border-radius:3px;cursor:pointer;font-family:inherit;font-weight:500;transition:background .1s,border-color .1s;white-space:nowrap}.files-load-btn{background:#1a2e3d;border:1px solid #2a5060;color:#4dd0e1}.files-load-btn:hover:not(:disabled){background:#1e3a4d;border-color:#3a7080}.files-del-btn{background:#2d1414;border:1px solid #5a2020;color:#ef5350}.files-del-btn:hover:not(:disabled){background:#3d1a1a;border-color:#7a2a2a}.score-panel{position:fixed;bottom:62px;left:50%;transform:translate(-50%);width:252px;background:#222222f5;border:1px solid #4dd0e1;border-radius:10px;padding:10px 12px 8px;z-index:200;box-shadow:0 4px 24px #0000008c;font-family:inherit;color:#e0e0e0}.score-panel-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.score-panel-title{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4dd0e1}.score-panel-btns{display:flex;gap:4px}.score-icon-btn{background:none;border:none;color:#888;cursor:pointer;padding:2px 4px;border-radius:3px;display:flex;align-items:center;font-size:12px;line-height:1;transition:color .15s}.score-icon-btn:hover{color:#e0e0e0}.score-overall-row{display:flex;align-items:baseline;gap:3px;margin-bottom:8px;justify-content:center}.score-big{font-size:42px;font-weight:700;line-height:1;letter-spacing:-1px}.score-denom{font-size:15px;color:#888}.score-subs-row{display:flex;gap:4px;margin-bottom:7px}.score-sub{flex:1;background:#ffffff0a;border-radius:6px;padding:5px 4px 4px;text-align:center;cursor:default}.score-sub-label{display:block;font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.score-sub-val{display:block;font-size:15px;font-weight:700}.score-footer{text-align:center}.score-history-link{font-size:11px;color:#4dd0e1;text-decoration:none;opacity:.75;transition:opacity .15s}.score-history-link:hover{opacity:1}.history-modal-overlay{position:fixed;inset:0;background:#0000008c;z-index:500;display:flex;align-items:center;justify-content:center}.history-modal{background:#1e1e1e;border:1px solid #2e2e2e;border-radius:10px;width:320px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #0009;font-family:inherit;color:#e0e0e0}.history-modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 10px;border-bottom:1px solid #2a2a2a;font-size:13px;font-weight:600;color:#4dd0e1;flex-shrink:0}.history-close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:14px;padding:0 2px;transition:color .15s}.history-close-btn:hover{color:#e0e0e0}.history-list{flex:1;overflow-y:auto;padding:6px 8px}.history-empty{display:block;padding:18px;text-align:center;color:#555;font-size:12px}.history-item{padding:8px 8px 7px;border-radius:6px;border-bottom:1px solid #272727;margin-bottom:2px}.history-item:last-child{border-bottom:none}.history-item-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px}.history-name{font-size:12px;font-weight:600;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.history-overall{font-size:18px;font-weight:700;flex-shrink:0}.history-item-subs{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.history-item-subs span{font-size:11px}.history-time{color:#555!important;margin-left:auto}.history-modal-footer{padding:10px 12px;border-top:1px solid #2a2a2a;display:flex;justify-content:flex-end;flex-shrink:0}.history-clear-btn{background:#2d1414;border:1px solid #5a2020;color:#ef5350;font-size:12px;padding:4px 12px;border-radius:5px;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}.history-clear-btn:hover{background:#3d1a1a;border-color:#7a2a2a}.history-clear-btn.confirm{background:#ef5350;border-color:#ef5350;color:#fff}.lyrics-track{position:fixed;left:80px;right:0;bottom:52px;height:36px;background:#141414d9;border-top:1px solid #2a2a2a;overflow:hidden;display:none;pointer-events:none;z-index:5}.lyrics-inner{position:absolute;top:0;left:0;height:100%}.lyric-word{position:absolute;top:0;bottom:0;display:flex;align-items:center;color:#888;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif;white-space:nowrap;will-change:transform;transition:color .12s ease,text-shadow .12s ease}.lyric-word.active{color:#4dd0e1;font-weight:500;text-shadow:0 0 8px rgba(77,208,225,.4)}.lyrics-now-line{position:absolute;top:0;bottom:0;width:1px;background:#4dd0e14d;pointer-events:none;display:none}.files-import-bar{border-top:1px solid #2a2a2a;padding:8px 12px 10px;display:flex;flex-direction:column;gap:6px}.files-import-btn{background:none;border:1px dashed #3a3a3a;color:#666;font-size:11px;font-family:inherit;padding:5px 10px;border-radius:5px;cursor:pointer;text-align:left;transition:border-color .15s,color .15s}.files-import-btn:hover{border-color:#4dd0e1;color:#4dd0e1}.import-error{font-size:11px;color:#ef5350;line-height:1.4}#deepTrainBtn.active{background:#a0454540;color:#d97070;border-color:#a04545}body.deep-training #topbar{transform:translateY(-100%)}body.deep-training #bottombar{transform:translateY(100%)}body.deep-training #pitchSliderTrack{display:none}body.deep-training #board{top:0;bottom:0;transition:top .3s ease,bottom .3s ease}body.deep-training #lyricsTrack{bottom:0;transition:bottom .3s ease}.dt-status{position:fixed;top:10px;right:14px;font-size:11px;color:#555;font-family:Inter,sans-serif;letter-spacing:.2px;z-index:200;pointer-events:none;display:none}body.deep-training .dt-status{display:block}.dt-advisory{position:fixed;bottom:88px;left:50%;transform:translate(-50%);background:#141414e0;border:1px solid #333;color:#aaa;font-size:11px;font-family:Inter,sans-serif;padding:6px 14px;border-radius:8px;z-index:210;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dt-stop-btn{position:fixed;bottom:24px;left:50%;transform:translate(-50%);width:52px;height:52px;border-radius:50%;background:#a0454580;border:none;color:#fff;cursor:pointer;z-index:200;opacity:.5;display:none;align-items:center;justify-content:center;transition:opacity .2s,background .2s}.dt-stop-btn:hover{opacity:1;background:#a04545}body.deep-training .dt-stop-btn{display:flex}.dt-controls-bar{position:fixed;bottom:30px;right:14px;display:none;align-items:center;gap:6px;z-index:200;opacity:.45;transition:opacity .2s}.dt-controls-bar:hover{opacity:1}body.deep-training .dt-controls-bar{display:flex}.dt-volume-slider{width:80px;height:3px;accent-color:#4dd0e1;cursor:pointer}.dt-gear-btn{background:none;border:none;color:#666;cursor:pointer;padding:3px;line-height:0;border-radius:4px;transition:color .15s}.dt-gear-btn:hover{color:#aaa}.dt-gear-btn.active{color:#4dd0e1}.dt-settings-panel{position:fixed;bottom:62px;right:14px;background:#111111eb;border:1px solid #2a2a2a;border-radius:8px;padding:10px 12px;z-index:210;display:flex;flex-direction:column;gap:8px;min-width:180px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dt-settings-panel[hidden]{display:none}.dt-settings-row{display:flex;align-items:center;gap:8px}.dt-settings-label{font-size:11px;color:#666;font-family:Inter,sans-serif;width:38px;flex-shrink:0}.dt-settings-row input[type=range]{flex:1;height:3px;accent-color:#4dd0e1;cursor:pointer}.dt-settings-val{font-size:11px;color:#888;font-family:Inter,sans-serif;width:32px;text-align:right;flex-shrink:0}