:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f6f7f8;background:#111418}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:radial-gradient(ellipse at 52% 44%,#242b34 0%,#171c23 43%,#101317 100%)}button,input{font:inherit}.screen{position:relative;min-height:100vh;height:100dvh;display:grid;grid-template-rows:104px minmax(0,1fr) 78px;overflow:hidden;padding:0 clamp(30px,5vw,88px)}.song-header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff18;min-height:0}.song-identity{display:flex;align-items:center;gap:17px;min-width:0}.song-icon{display:grid;place-items:center;flex:none;width:45px;height:45px;border-radius:12px;background:#ffffff12;color:#dfdedb;font-size:22px}.eyebrow{display:block;font-size:11px;letter-spacing:.16em;color:#a6afb9;margin-bottom:4px}.song-header h1{margin:0;font-size:clamp(22px,2.1vw,31px);line-height:1.13;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-header p{margin:4px 0 0;font-size:13px;color:#a2abb6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.connection{display:flex;align-items:center;gap:9px;color:#abb3bd;font-size:12px;white-space:nowrap}.status-dot{width:7px;height:7px;background:#e0aa68;border-radius:50%;box-shadow:0 0 12px #e0aa68}.lyric-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.lyric-stage:before,.lyric-stage:after{content:"";position:absolute;left:0;right:0;height:19%;z-index:2;pointer-events:none}.lyric-stage:before{top:0;background:linear-gradient(#161b21 0%,transparent 100%)}.lyric-stage:after{bottom:0;background:linear-gradient(transparent,#151a20 100%)}.lyric-guide{position:absolute;left:0;width:3px;height:44px;border-radius:9px;background:#e6a87d;box-shadow:0 0 20px #e6a87d77;z-index:3}.lyrics{width:min(100%,1240px);height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.7vh,31px);overflow:hidden;text-align:center;padding:34px 25px}.lyrics p{margin:0;max-width:100%;font-size:clamp(29px,3.7vw,65px);font-weight:650;letter-spacing:-.045em;line-height:1.2;color:#87909c;opacity:.47;transition:transform .28s,color .28s,opacity .28s,text-shadow .28s;overflow-wrap:anywhere}.lyrics p.near{color:#bec5cd;opacity:.82}.lyrics p.active{color:#fff;opacity:1;transform:scale(1.035);text-shadow:0 0 30px #f2c1a74d}.lyrics p.placeholder{font-size:clamp(30px,3.6vw,53px);color:#d5d9df;opacity:1}.bottom-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #ffffff18;min-height:0}.track-progress{display:flex;align-items:center;gap:12px;min-width:200px;flex:1;color:#a7b1bc;font-size:12px;font-variant-numeric:tabular-nums}.progress-track{height:3px;flex:1;border-radius:5px;background:#68717e66;overflow:hidden}.progress-track>div{height:100%;width:0;background:#e5ad8a;transition:width .1s linear}.preview-toggle{background:transparent;border:1px solid #ffffff36;border-radius:9px;color:#d5d9de;padding:9px 13px;font-size:12px;white-space:nowrap;cursor:pointer}.preview-toggle:hover,.preview-toggle[aria-expanded=true]{background:#ffffff18}.preview-toggle span{display:inline-block;margin-left:5px}.bottom-bar p{position:absolute;left:0;bottom:1px;margin:0;color:#78838f;font-size:10px;white-space:nowrap;pointer-events:none}.preview-panel{position:absolute;z-index:10;right:clamp(30px,5vw,88px);bottom:74px;width:min(620px,calc(100% - 60px));padding:23px;background:#242a32;border:1px solid #ffffff28;border-radius:17px;box-shadow:0 20px 70px #0009}.preview-panel[hidden]{display:none}.panel-title{display:flex;justify-content:space-between;align-items:flex-start}.panel-title div{display:flex;flex-direction:column;gap:5px}.panel-title strong{font-size:18px}.panel-title small{font-size:11px;color:#aab4be}.panel-title button{background:transparent;border:0;color:#c9cfd5;font-size:26px;cursor:pointer;line-height:1}.song-picker{display:flex;gap:10px;margin:20px 0}.song-choice{display:flex;align-items:center;gap:10px;flex:1;border:1px solid #ffffff2b;border-radius:11px;background:#ffffff0a;color:#fff;padding:13px;cursor:pointer}.song-choice:hover,.song-choice.selected{background:#ffffff23;border-color:#e3ab86}.song-choice span{font-size:11px;color:#e5a77f}.song-choice strong{font-size:14px}.song-choice small{font-size:11px;color:#a6b0bc}.demo-controls{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.play{height:42px;width:42px;border:0;border-radius:50%;background:#e8aa84;color:#21252c;cursor:pointer}.play:disabled{opacity:.45;cursor:not-allowed}.demo-controls>input[type=range]{flex:1;min-width:120px;accent-color:#e8aa84}.offset{font-size:12px;color:#b9c2cb;white-space:nowrap}.offset input{width:52px;background:#1a2027;border:1px solid #ffffff37;border-radius:7px;color:#fff;padding:7px;text-align:center}.import{border:1px solid #ffffff40;border-radius:8px;padding:9px 11px;font-size:12px;cursor:pointer;white-space:nowrap}.import:hover{background:#ffffff17}@media(max-width:720px){.screen{grid-template-rows:85px minmax(0,1fr) 78px;padding:0 20px}.song-icon{height:38px;width:38px}.song-header h1{font-size:22px}.song-header p{font-size:11px}.connection{font-size:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis}.lyrics{padding:20px 10px}.lyrics p{font-size:clamp(26px,6vw,40px)}.bottom-bar{gap:10px}.track-progress{min-width:0}.preview-toggle{padding:8px;font-size:11px}.bottom-bar p{font-size:9px}.preview-panel{right:20px;bottom:78px;width:calc(100% - 40px);padding:16px}.song-choice{flex-direction:column;align-items:flex-start;gap:3px}}
.bottom-bar{justify-content:flex-end}.bottom-bar p{position:static;margin:0 auto 0 0;white-space:normal;line-height:1.4}.demo-controls span{color:#aab4be;font-size:12px;font-variant-numeric:tabular-nums}.demo-controls>input[type=range]{min-width:100px}
.connection{gap:12px}.connect-button{border:1px solid #ffffff4a;border-radius:9px;background:#ffffff12;color:#f0f2f4;padding:9px 13px;cursor:pointer;font-size:12px;white-space:nowrap}.connect-button:hover{background:#ffffff22}.auth-backdrop{position:absolute;inset:0;z-index:30;background:#070a0dc9;display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}.auth-backdrop[hidden]{display:none}.auth-card{position:relative;width:min(720px,100%);max-height:95vh;overflow:auto;border:1px solid #ffffff30;border-radius:22px;padding:28px 32px;background:#202730;box-shadow:0 30px 80px #000a;text-align:center}.auth-close{position:absolute;right:18px;top:12px;border:0;background:transparent;color:#bfc6ce;font-size:30px;cursor:pointer}.auth-mark{display:grid;place-items:center;margin:0 auto 13px;width:38px;height:38px;border-radius:9px;background:#da816b;color:#1d242d;font-size:23px;font-weight:750}.auth-eyebrow{margin:0 0 6px;color:#caa894;font-size:10px;font-weight:700;letter-spacing:.18em}.auth-card h2{font-size:clamp(24px,2.8vw,35px);margin:0 0 9px}.auth-intro{color:#b3bdc8;font-size:14px;line-height:1.6;margin:0 auto 18px;max-width:31em}.auth-qr-frame{width:230px;height:230px;display:grid;place-items:center;margin:0 auto;border-radius:14px;background:#fff;padding:13px}.auth-qr-frame img{width:100%;height:100%;object-fit:contain}.auth-qr-placeholder{padding:12px;font-size:15px;line-height:1.5;color:#56616d}.auth-message{color:#e6b296;font-size:13px;min-height:1.5em;margin:15px 0}.auth-steps{display:flex;gap:8px;justify-content:center;list-style:none;padding:0;margin:18px 0}.auth-steps li{flex:1;max-width:190px;text-align:center;border:1px solid #ffffff27;border-radius:9px;padding:10px 5px;color:#cbd1d8;font-size:11px}.auth-security{font-size:11px;color:#8896a5;line-height:1.5;margin:0}@media(max-width:720px){.connection>span:not(.status-dot){display:none}.connect-button{padding:8px;font-size:11px}.auth-card{padding:23px 16px}.auth-qr-frame{width:190px;height:190px}.auth-steps li{font-size:10px;padding:8px 3px}}
.auth-qr-frame[hidden],.auth-setup[hidden],.auth-steps[hidden]{display:none}.auth-setup{margin:14px auto 6px;max-width:540px;padding:20px 24px;text-align:left;border:1px solid #dfaa874b;border-radius:13px;background:#d29b7711}.auth-setup strong{display:block;color:#f1d2bd;font-size:16px;margin-bottom:8px}.auth-setup p{margin:0 0 10px;color:#b5bec8;font-size:13px;line-height:1.65}.auth-setup a{color:#eab18e;font-size:12px;text-decoration:none}.auth-setup a:hover{text-decoration:underline}
.auth-local-link{display:inline-block;margin:12px auto 0;border-radius:10px;background:#e8aa84;color:#202730;padding:13px 20px;text-decoration:none;font-weight:700;font-size:14px}.auth-local-link[hidden]{display:none}.auth-local-link:hover{background:#f4be9c}