:root{color-scheme:dark;--bg:#0b1020;--panel:#121b2e;--line:#2c3951;--text:#f2f5ff;--muted:#a6b4ce;--accent:#a888ff;--good:#5fe1b0;--bad:#ff8ca0}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;white-space:nowrap;min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;background:#202b40;color:var(--text)}button:hover{background:#2b3852}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.44;cursor:not-allowed}button.primary{background:#aa8bff;color:#100f22;border-color:transparent;font-weight:750}button.primary:hover{background:#c1adff}.quiet{background:#182338}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.top,.bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#11192a}.top{padding:8px 20px;border-bottom:1px solid var(--line);min-height:58px}.identity,.header-actions,.transport,.control-group,.mic-group{display:flex;align-items:center;gap:9px;min-width:0}.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#312455;color:#d9ccff;font-size:24px}.title-wrap{display:flex;flex-direction:column;min-width:0}.title-wrap strong{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title-wrap small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection{border:1px solid #365947;background:#173629;color:#83e6b8;border-radius:99px;padding:4px 9px;font-size:11px;white-space:nowrap}.connection.offline{border-color:#5d4a35;background:#392d20;color:#ffca87}.workspace{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) 3px;padding:8px 16px 0}.metrics{display:flex;align-items:center;gap:16px;min-height:48px;padding:0 8px}.metric,.next-note,.heard-note{display:flex;flex-direction:column;min-width:50px}.metrics small{font-size:10px;color:#91a2c1;font-weight:650;letter-spacing:.08em}.metrics b{font-size:16px;font-variant-numeric:tabular-nums}.heard-note{min-width:120px;max-width:220px;border-left:1px solid var(--line);padding-left:12px}.heard-note b{color:#aeead5;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heard-note span{color:var(--muted);font-size:10px;white-space:nowrap}.next-note{margin-left:12px;max-width:35%;min-width:100px}.next-note b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feedback{margin-left:auto;border:1px solid #554779;background:#2b2343;border-radius:10px;color:#d6c6ff;padding:7px 12px;font-size:13px;font-weight:700;text-align:center;white-space:nowrap}.feedback[data-result="perfect"],.feedback[data-result="great"],.feedback[data-result="good"]{color:var(--good);background:#17362c;border-color:#2e765d}.feedback[data-result="miss"],.feedback[data-result="wrong"]{color:var(--bad);background:#3b2532;border-color:#784456}.stage{position:relative;min-height:0;background:#0d1525;border:1px solid #28354c;border-radius:14px;overflow:hidden}.stage canvas{width:100%;height:100%;display:block}.pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#07101baa;backdrop-filter:blur(3px);font-weight:750;font-size:24px}.pause-overlay[hidden]{display:none}.pause-overlay span{border:1px solid #5a678a;border-radius:16px;padding:16px 28px;background:#1b2744}.progress-track{background:#263149;margin:0 14px;height:3px}.progress-track i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s}.bottom{padding:10px 20px;border-top:1px solid var(--line);min-height:66px}.bottom select{max-width:235px;min-width:130px;min-height:40px;border:1px solid var(--line);background:#202b40;border-radius:11px;padding:7px;color:var(--text)}.bpm{font-size:12px;color:var(--muted);white-space:nowrap}.mic-group{justify-content:flex-end;max-width:37%}.mic-group button{flex:none}.meter{width:44px;height:7px;background:#324056;border-radius:99px;overflow:hidden;flex:none}.meter i{display:block;width:0;height:100%;background:var(--good)}.input-level{font-size:11px;color:var(--muted);min-width:40px;text-align:right;font-variant-numeric:tabular-nums}dialog{background:#151e30;color:var(--text);border:1px solid #36445e;border-radius:18px;width:min(720px,calc(100vw - 32px));max-height:min(88dvh,820px);padding:20px 22px;box-shadow:0 28px 80px #000b}dialog::backdrop{background:#050b18d9;backdrop-filter:blur(4px)}.dialog-head,.dialog-footer,.form-actions,.event-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head small{font-size:10px;letter-spacing:.14em;color:var(--accent)}h2{margin:3px 0 16px;font-size:24px}.icon-btn{min-width:40px;padding:7px}.song-list{display:grid;gap:8px;max-height:49dvh;overflow:auto;margin-top:12px}.song{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px;background:#1b273b}.song.selected{border-color:#967bea}.song div{min-width:0;flex:1}.song b,.song small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song small{color:var(--muted);font-size:12px}.dialog-footer{justify-content:flex-start;padding-top:16px}dialog input,dialog select{width:100%;min-height:40px;border:1px solid var(--line);background:#10192a;color:var(--text);padding:8px 10px;border-radius:9px}dialog input[type=search]{appearance:none}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-y:auto;max-height:calc(88dvh - 95px);padding:0 3px 3px}.form label{display:grid;gap:5px;font-size:12px;color:var(--muted)}.wide{grid-column:1/-1}.event-heading{align-items:flex-end}.event-heading strong{color:var(--text)}.event-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}.event-rows{display:grid;gap:7px}.event-row{display:grid;grid-template-columns:70px 95px minmax(0,1fr) 40px;gap:8px;align-items:end}.event-row label{min-width:0}.event-row button{padding:8px}.error{padding:9px;color:#ffb3bf;border:1px solid #8b4c5b;border-radius:9px}.form-actions{justify-content:flex-end;padding-top:12px}@media(max-width:950px){.top{padding:6px 12px}.bottom{padding:7px 12px;gap:7px}.bpm,.connection{display:none}.mic-group{max-width:30%}.mic-group button{font-size:12px;padding:8px}.input-level{display:none}.metrics{gap:10px}.feedback{font-size:12px}}@media(max-width:680px) and (orientation:landscape){.top{min-height:46px}.logo{height:30px;width:30px}.top button{min-height:34px;padding:5px 9px}.workspace{padding:3px 9px 0}.metrics{min-height:35px;gap:10px}.metrics b{font-size:13px}.metrics small{font-size:9px}.next-note{margin-left:0}.feedback{padding:4px 7px}.bottom{min-height:52px}.bottom select,.bottom button{min-height:35px;padding:6px 8px}.bottom select{max-width:138px}.meter{display:none}}@media(max-width:570px){.header-actions button span{display:none}.metric:nth-child(2),.metric:nth-child(4){display:none}.next-note{min-width:85px;max-width:29%}.heard-note{min-width:85px;max-width:30%;padding-left:6px}.metric{min-width:34px}.metrics{gap:8px}.feedback{min-width:0;overflow:hidden;text-overflow:ellipsis}.mic-group{max-width:none}.bottom{flex-wrap:wrap;justify-content:center}.control-group,.transport,.mic-group{justify-content:center}.title-wrap small{display:none}.form{grid-template-columns:1fr}.event-row{grid-template-columns:54px 65px minmax(0,1fr) 36px;gap:4px}}@media(max-height:420px) and (orientation:landscape){.top{min-height:40px;padding-block:3px}.bottom{min-height:45px;padding-block:4px;flex-wrap:nowrap}.metrics{min-height:39px}.metric:nth-child(2),.metric:nth-child(4){display:none}.heard-note{min-width:100px}.workspace{padding-top:1px}.stage{border-radius:10px}.bottom select{max-width:140px}.bottom button{font-size:12px;min-height:34px;padding:4px 8px}.bottom .meter{display:none}.bottom .mic-group{max-width:none}.feedback{max-width:35%}}

.audio-dialog{width:min(820px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}.audio-help,.audio-step p{color:var(--muted);font-size:12px}.audio-monitor{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:12px;background:#0c1628;padding:14px;border-radius:12px}.audio-monitor small,.audio-monitor strong{display:block}.audio-monitor small{color:var(--muted);font-size:10px;letter-spacing:.06em}.audio-monitor strong{font-size:17px;color:#aeead5}.audio-sliders{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.audio-sliders label{display:block}.audio-sliders output{float:right;color:#cfbaff}.audio-sliders input{padding:0;accent-color:var(--accent);min-height:38px}.audio-sliders small{display:block;color:var(--muted);font-size:11px}.audio-step{border-top:1px solid var(--line);padding:12px 0}.audio-step h3{margin:0;font-size:15px}.audio-step input{max-width:230px;margin:8px}.calibration-result{background:#273047;padding:12px;border-radius:10px}#audioHealth{min-height:20px;color:#c0cde4;font-size:12px}#audioLevel{width:100%;height:14px;accent-color:var(--good);margin-top:12px}.audio-dialog .dialog-footer{flex-wrap:wrap}@media(max-width:570px){.audio-sliders{grid-template-columns:1fr}.audio-monitor{grid-template-columns:1fr 1fr}.audio-monitor>div:last-child{grid-column:1/-1}.audio-step input{margin-left:0}.header-actions{gap:4px}.logo{display:none}}