:root{color:#f4f7ff;background:#080a0f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#080a0f;min-width:320px;height:100vh;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0}.app-shell{grid-template-rows:auto minmax(0,1fr);gap:20px;height:100vh;min-height:0;padding:clamp(20px,4vw,48px) clamp(20px,4vw,48px) 88px;display:grid;overflow:hidden}header{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.eyebrow{color:#8b9bbd;letter-spacing:.14em;margin:0 0 8px;font-size:.72rem;font-weight:700}h1{max-width:75vw;margin:0;font-size:clamp(1.65rem,4vw,3rem);line-height:1.12}.artist{color:#b8c2d9;margin:7px 0 0;font-size:clamp(1rem,2vw,1.35rem)}.status{color:#b8c2d9;border:1px solid #394158;border-radius:999px;flex:none;padding:8px 10px;font-size:.78rem}.status.playing{color:#50d6a1;border-color:#50d6a1}.lyrics-viewport{overscroll-behavior:contain;scrollbar-width:none;min-height:0;padding:10vh 8px 24vh;overflow-y:auto}.lyrics-viewport::-webkit-scrollbar{display:none}.line{color:#65708a;font-size:calc(clamp(1.3rem, 3.1vw, 2.2rem) * var(--lyrics-scale,1));margin:0 0 24px;font-weight:650;line-height:1.32;transition:color .16s linear,transform .16s linear}.line.active{color:#fff;transform-origin:0;transform:scale(1.018)}.empty{color:#8994ad;text-align:center;font-size:clamp(1.15rem,2.5vw,1.8rem)}.controls{z-index:5;width:fit-content;max-width:calc(100vw - 24px);position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.toolbar{background:#101622f5;border:1px solid #263044;border-radius:16px;justify-content:center;align-items:center;gap:8px;padding:7px 9px;display:flex;box-shadow:0 8px 26px #00000047}.controls p,.control-row{color:#9ea9c0;margin:0}.controls strong{color:#fff}.control-row{justify-content:center;align-items:center;gap:12px;display:flex}.toolbar-label{color:#9ea9c0;font-size:.9rem;font-weight:700}.size-buttons{gap:7px;display:flex}.size-buttons button{color:#eef2ff;background:#1b2231;border-radius:10px;min-width:46px;min-height:42px;padding:0 10px;font-weight:800}.size-buttons button:active{background:#303c55}.lyrics-search-actions{justify-content:center;gap:8px;display:flex}.lyrics-search-actions button,.calibration-toggle{color:#c9d4ec;background:#182132;border-radius:10px;min-height:42px;padding:0 13px;font-weight:700}.calibration-toggle.open{color:#c8f9df;background:#17362d}.calibration-panel{color:#9ea9c0;background:#101622fa;border:1px solid #33415d;border-radius:14px;justify-items:center;gap:8px;min-width:100%;padding:10px 12px;display:grid;position:absolute;bottom:calc(100% + 8px);right:0;box-shadow:0 8px 26px #00000047}.lyrics-picker{z-index:20;background:#030509e0;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.lyrics-picker-card{background:#101622;border:1px solid #33415d;border-radius:18px;gap:12px;width:min(680px,100%);max-height:min(760px,100vh - 32px);padding:20px;display:grid;overflow:auto}.picker-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.picker-heading h2{margin:0;font-size:1.35rem}.picker-close,.picker-search{color:#edf2ff;background:#26334a;border-radius:10px;min-height:44px;padding:0 14px;font-weight:800}.picker-search{color:#08110d;background:#50d6a1}.lyrics-picker label{color:#b9c3d7;gap:6px;font-weight:700;display:grid}.lyrics-picker input{color:#fff;background:#080a0f;border:1px solid #3a465e;border-radius:10px;min-height:48px;padding:0 12px}.search-results{gap:8px;display:grid}.search-result{text-align:left;color:#edf2ff;background:#161e2d;border:1px solid #2c3850;border-radius:12px;grid-template-columns:1fr auto;gap:3px 14px;padding:14px;display:grid}.search-result strong{font-size:1rem}.search-result span,.search-result small{color:#afbad1}.search-result em{color:#6de0ad;grid-area:1/2/span 3;align-self:center;font-style:normal;font-weight:800}.search-result:disabled{opacity:.52}.search-result:disabled em{color:#a7b0c4}.picker-error{color:#ffabab;margin:0}.picker-hint{color:#9ea9c0;text-align:center;margin:4px 0}.compensation-buttons,.mock-controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.compensation-buttons button,.mock-controls button{color:#eef2ff;background:#1b2231;border-radius:12px;min-height:56px;padding:0 18px;font-weight:700}.compensation-buttons button:active,.mock-controls button:active{background:#303c55}.mock-controls button{color:#abf5d3;background:#16382e}.login-shell,.loading{place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#111622;border:1px solid #263044;border-radius:18px;gap:18px;width:min(420px,100%);padding:28px;display:grid}.login-card label{color:#b9c3d7;gap:8px;display:grid}.login-card input{color:#fff;background:#080a0f;border:1px solid #3a465e;border-radius:10px;min-height:48px;padding:0 12px}.primary{color:#08110d;background:#50d6a1;border-radius:12px;min-height:52px;font-weight:800}.connect-card{text-align:center}.connect-copy{color:#b9c3d7;margin:0;line-height:1.55}.connect-link{place-items:center;padding:0 18px;text-decoration:none;display:grid}.error{color:#ff9f9f;margin:0}@media (width<=620px){.toolbar{gap:5px;padding:6px}.toolbar-label{display:none}.control-row{gap:5px}.size-buttons{gap:4px}.size-buttons button{min-width:40px;padding:0 7px}.lyrics-search-actions{gap:5px}.lyrics-search-actions button,.calibration-toggle{padding:0 9px;font-size:.88rem}.compensation-buttons{width:100%}.compensation-buttons button{flex:30%;padding:0 8px;font-size:.88rem}}@media (prefers-reduced-motion:reduce){.line{transition:none}}