*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--red: #D42B2B;--red-dim: #B52222;--bg: #F0EDE4;--surface: #E8E4DA;--text: #111111;--text-mid: rgba(0,0,0,1);--text-low: rgba(17,17,17,.4);--border: rgba(17,17,17,.1);--border-hard: rgba(17,17,17,.2);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--font: "Helvetica Neue", Helvetica, Arial, sans-serif;--mono: "Helvetica Neue", Helvetica, Arial, sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}html{height:100%;height:-webkit-fill-available}body{width:100%;height:100%;height:-webkit-fill-available;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}button{border:none;background:none;cursor:pointer;color:inherit;font-family:inherit}button:focus-visible{outline:2px solid var(--red);outline-offset:2px}#app{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:fixed;inset:0;background:var(--bg)}#splash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100;transition:opacity .4s ease}#splash.hidden{opacity:0;pointer-events:none}.splash-logo{font-size:16px;font-weight:800;letter-spacing:2px;color:var(--text);text-transform:uppercase}.view{width:100%;height:100%;display:none;flex-direction:column;overflow:hidden}.view.active{display:flex}#view-login{align-items:flex-start;justify-content:flex-end;background:var(--bg);padding:0}.login-inner{width:100%;padding:36px 28px 40px;border-top:2px solid var(--text)}.login-label{font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-mid);margin-bottom:10px}.login-title{font-size:44px;font-weight:800;letter-spacing:-1.5px;line-height:.92;text-transform:uppercase;margin-bottom:28px}.btn-login{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--red);color:#fff;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;border-radius:0;padding:16px 32px;width:100%;transition:background .15s,transform .12s}.btn-login:active{background:var(--red-dim);transform:scale(.99)}.login-note{margin-top:14px;font-size:10px;color:var(--text-low);text-align:center;letter-spacing:.5px}.player-bg{display:none}.player-content{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden}.art-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 24px;min-height:0;overflow:hidden}.art-container{width:min(65vw,240px);aspect-ratio:1}.art-img{width:100%;height:100%;border-radius:0;object-fit:cover;box-shadow:3px 3px #0000001f;transition:opacity .5s ease}.art-img.loading{opacity:0}.art-placeholder{width:100%;height:100%;background:var(--surface);display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:44px;flex-shrink:0;border-bottom:1px solid var(--border)}.device-pill{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-mid);font-weight:500;letter-spacing:1px;text-transform:uppercase;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .15s}.device-pill:active{color:var(--text)}.device-dot{width:6px;height:6px;background:var(--red);border-radius:50%;flex-shrink:0}.topbar-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-low);transition:color .15s}.topbar-btn:active{color:var(--text)}.track-info{padding:0 20px;flex-shrink:0;margin-bottom:10px}.track-name{font-size:18px;font-weight:800;letter-spacing:-.3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.track-artist{font-size:11px;color:var(--text-mid);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-album{display:none}.progress-section{padding:0 20px;flex-shrink:0;margin-bottom:8px}.progress-bar-wrap{position:relative;height:24px;display:flex;align-items:center;cursor:pointer}.progress-bar-track{width:100%;height:3px;background:#00000026;position:relative;overflow:hidden}.progress-bar-fill{height:100%;background:var(--red);position:absolute;left:0;top:0;transition:width .5s linear}.progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;background:var(--red);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .15s}.progress-bar-wrap:active .progress-thumb,.progress-bar-wrap.active .progress-thumb{opacity:1}.progress-times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-low);letter-spacing:.5px;margin-top:10px;padding:4px 0}.controls{display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0}.ctrl-btn{display:flex;align-items:center;justify-content:center;transition:transform .12s,opacity .12s}.ctrl-btn:active{transform:scale(.88);opacity:.6}.ctrl-btn.sm{width:48px;height:48px;color:var(--text-mid)}.ctrl-btn.lg{width:58px;height:58px;background:var(--red);color:#fff;border-radius:0}.ctrl-btn.lg:active{transform:scale(.93)}.volume-section{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0}.vol-wheel-wrap{position:relative;width:86%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;touch-action:none}.vol-wheel-wrap:active{cursor:grabbing}.vol-wheel-svg{width:100%;height:100%;overflow:visible}.vol-track{fill:none;stroke:#ffffff2e}.vol-center-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.vol-pct{font-size:clamp(40px,10vw,64px);font-weight:800;letter-spacing:-3px;line-height:1;color:#fff}.vol-label{font-size:9px;color:#ffffff80;text-transform:uppercase;letter-spacing:2.5px;margin-top:8px;font-weight:500}.vol-knob{fill:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.25))}.vol-step-btns{display:none}#view-no-device{align-items:flex-start;justify-content:flex-end;padding:0;background:var(--bg)}.no-device-inner{width:100%;padding:36px 28px 40px;border-top:2px solid var(--text)}.no-device-title{font-size:34px;font-weight:800;letter-spacing:-1px;text-transform:uppercase;margin-bottom:8px}.no-device-sub{font-size:12px;color:var(--text-mid);line-height:1.7;max-width:240px;margin-bottom:24px;letter-spacing:.2px}.btn-refresh{display:flex;align-items:center;gap:8px;background:var(--text);color:var(--bg);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;border-radius:0;padding:14px 24px;transition:opacity .15s,transform .12s}.btn-refresh:active{opacity:.8;transform:scale(.98)}.btn-logout-small{margin-top:14px;font-size:10px;color:var(--text-low);text-transform:uppercase;letter-spacing:1px;text-decoration:underline;text-underline-offset:3px}.modal-overlay{position:fixed;inset:0;background:#f0ede4bf;backdrop-filter:blur(16px);z-index:200;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}.modal-overlay.open{opacity:1;pointer-events:all}.modal-sheet{width:100%;max-height:55vh;background:var(--bg);border-top:2px solid var(--text);padding-bottom:var(--safe-bottom);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}.modal-overlay.open .modal-sheet{transform:translateY(0)}.modal-handle{display:none}.modal-title{font-size:10px;font-weight:700;color:var(--text-low);text-transform:uppercase;letter-spacing:2px;padding:14px 20px 8px;border-bottom:1px solid var(--border)}.device-list{padding:0;overflow-y:auto}.device-item{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}.device-item:active{background:#00000008}.device-item.active-device .device-item-name{color:var(--red)}.device-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-mid);flex-shrink:0}.device-item-name{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.device-item-type{font-size:10px;color:var(--text-low);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}.toast{position:fixed;bottom:calc(var(--safe-bottom) + 70px);left:50%;transform:translate(-50%) translateY(10px);background:var(--text);color:var(--bg);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:10px 18px;border-radius:0;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:300;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.landscape-left,.landscape-right{display:none}@media screen and (orientation: landscape){#view-player{flex-direction:row;overflow:hidden;width:100%;height:100%}.player-content{flex-direction:row;width:100%;height:100%;overflow:hidden;padding:0}.landscape-left{display:flex;flex-direction:column;flex:0 0 52%;width:52%;height:100%;overflow:hidden;border-right:2px solid var(--border-hard);background-color:var(--bg);background-image:radial-gradient(circle,rgba(0,0,0,.1) 50%,transparent 20%);background-size:33% 33%;background-position:0 0}.landscape-left .topbar{flex:0 0 38px;height:38px;padding:0 14px;border-bottom:none}.ls-artist{flex:0 0 auto;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-mid);padding:6px 14px 0}.ls-title{flex:0 0 auto;font-size:clamp(13px,4vmin,24px);font-weight:800;letter-spacing:-.5px;line-height:1.05;text-transform:uppercase;padding:2px 14px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ls-art-wrap{flex:1 1 0;min-height:0;padding:8px 14px;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden}.ls-art-container{height:100%;width:auto;aspect-ratio:1;max-height:100%;max-width:100%;min-height:0;overflow:hidden;align-self:flex-start}.ls-art-container .art-img{width:100%;height:100%;object-fit:contain;border-radius:0;box-shadow:none}.ls-art-placeholder{width:100%;height:100%;background:var(--surface);display:flex;align-items:center;justify-content:center}.landscape-left .progress-section{flex:0 0 auto;padding:6px 14px 2px;margin-bottom:0}.landscape-left .progress-bar-wrap{height:16px}.landscape-left .progress-times{margin-top:3px;font-size:9px;padding:0}.landscape-left .controls{flex:0 0 auto;padding:4px 14px 8px;margin-bottom:0;display:flex;align-items:center;justify-content:center;gap:24px}.landscape-left .ctrl-btn.lg{width:46px;height:46px}.landscape-left .ctrl-btn.sm{width:38px;height:38px}.landscape-right{display:flex;flex:1 1 0;height:100%;background:var(--red);align-items:center;justify-content:center;overflow:hidden;padding:10px}.landscape-right .volume-section{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.landscape-right .vol-wheel-wrap{width:min(88vmin,92%);max-height:82%;aspect-ratio:1;flex-shrink:1}.vol-step-btns{display:flex;gap:20px;flex-shrink:0}.vol-step-btn{width:52px;height:10px;background:none;color:#fff;font-size:clamp(50px,8vmin,52px);font-weight:900;display:flex;align-items:center;justify-content:center;border-radius:0;transition:opacity .1s,transform .1s;letter-spacing:-2px}.vol-step-btn:active{opacity:.5;transform:scale(.92)}#portrait-art,#portrait-controls{display:none!important}}