:root{--bg:#0b0b0d;--card-bg:#ffffff0e;--card-border:#ffffff17;--text:#f5f5f7;--text-dim:#98989d;--accent:#1db954;--market-open:#2ecc71;--market-closed:#e74c3c;--market-unknown:#888;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}.icon{flex-shrink:0;width:1em;height:1em;display:block}html,body{height:100%}body{color:var(--text);-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 18% 15%,#1c1c20 0%,#0b0b0d 55%,#000 100%);justify-content:center;align-items:center;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}#app{width:min(100vw,216.667dvh);height:min(100dvh,46.1538vw);padding:max(clamp(8px, 2vw, 24px), env(safe-area-inset-top)) max(clamp(8px, 2vw, 24px), env(safe-area-inset-right)) max(clamp(8px, 2vw, 24px), env(safe-area-inset-bottom)) max(clamp(8px, 2vw, 24px), env(safe-area-inset-left));container-type:size}.dashboard{grid-template:"clocks spotify"minmax(0,1.3fr)"weather spotify"minmax(0,1fr)/minmax(0,2fr) minmax(0,1fr);gap:clamp(10px,1.6cqw,20px);width:100%;height:100%;display:grid}.clocks-panel{grid-area:clocks;justify-content:space-between;align-items:center;gap:clamp(8px,2cqw,24px);min-height:0;display:flex;position:relative}.weather-panel{grid-area:weather;min-height:0}.spotify-panel{--album-size:clamp(100px, min(44cqw, 38cqh), 290px);grid-area:spotify;min-height:0}.panel{background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(40px)saturate(180%);border-radius:24px;flex-direction:column;min-height:0;padding:clamp(14px,1.8cqw,26px);display:flex;box-shadow:0 20px 50px #00000059}.panel-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 8px;font-size:clamp(.7rem,1.4cqw,1rem);font-weight:600}.clock{text-align:center;flex-direction:column;align-items:center;display:flex}.clock .time{font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(1.8rem,min(6.5cqw,7cqh),3.6rem);font-weight:700;line-height:1.1}.local-clock .time{font-size:clamp(4.8rem,min(18cqw,20cqh),10rem)}.clock .date{color:var(--text-dim);font-size:clamp(.75rem,1.6cqw,1.1rem)}.clock .clock-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:6px;margin-bottom:2px;font-size:clamp(.7rem,1.4cqw,1rem);display:flex}.market-dot{background:var(--market-unknown);border-radius:50%;width:.6em;height:.6em;display:inline-block}.market-dot.open{background:var(--market-open)}.market-dot.closed{background:var(--market-closed)}.weather-content{flex:1;align-items:center;gap:clamp(8px,1.5cqw,16px);min-width:0;display:flex}.weather-icon{flex:none;font-size:clamp(1.6rem,5cqh,3.5rem)}.weather-info{min-width:0}.weather-temp{letter-spacing:-.02em;font-size:clamp(1.2rem,4cqh,2.4rem);font-weight:700}.weather-desc{color:var(--text-dim);text-transform:capitalize;overflow-wrap:break-word;font-size:clamp(.8rem,1.8cqw,1.1rem)}.weather-location,.weather-date{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:clamp(.7rem,1.4cqw,.9rem);overflow:hidden}.weather-forecast{flex:1;align-items:stretch;min-width:0;height:clamp(70px,28cqh,130px);display:flex}.forecast-svg{width:100%;height:100%;display:block}.forecast-label{fill:var(--text-dim);font-family:inherit;font-size:8px}.forecast-temp-label{fill:var(--text);font-family:inherit;font-size:7px;font-weight:600}.volume-row{justify-content:center;width:100%;margin-top:clamp(2px,.6cqh,6px);display:flex}.volume-slider{appearance:none;width:var(--album-size);cursor:pointer;background:0 0;height:14px}.volume-slider:disabled{cursor:default;opacity:.35}.volume-slider::-webkit-slider-runnable-track{background:#ffffff1f;border-radius:3px;height:5px}.volume-slider::-moz-range-track{background:#ffffff1f;border-radius:3px;height:5px}.volume-slider::-moz-range-progress{background:var(--accent);border-radius:3px;height:5px}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--accent);border-radius:50%;width:14px;height:14px;margin-top:-4.5px;box-shadow:0 2px 6px #00000059}.volume-slider::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 6px #00000059}.volume-slider:disabled::-webkit-slider-thumb{background:var(--text-dim)}.volume-slider:disabled::-moz-range-thumb{background:var(--text-dim)}.volume-slider:disabled::-moz-range-progress{background:var(--text-dim)}.np-now{justify-content:center;align-items:center;gap:clamp(2px,.5cqw,5px);width:100%;min-width:0;margin-bottom:clamp(4px,1cqh,10px);display:flex}.np-side-btn{flex:none}.album-art{width:var(--album-size);height:var(--album-size);cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;background:#ffffff14 50%/cover no-repeat;border:none;border-radius:18px;flex:none;padding:0;transition:transform .1s;position:relative;box-shadow:0 16px 40px #00000073}.album-art:active{transform:scale(.97)}.album-art:disabled{cursor:default;transform:none}.album-art-icon{color:#fff;pointer-events:none;background:#00000073;border-radius:50%;justify-content:center;align-items:center;width:clamp(2rem,6cqw,3rem);height:clamp(2rem,6cqw,3rem);margin:auto;font-size:clamp(1rem,3cqw,1.5rem);display:flex;position:absolute;inset:0}.np-details{flex-direction:column;width:100%;min-width:0;min-height:0;display:flex}.np-info{text-align:center;width:100%;min-width:0}.track-title{letter-spacing:-.01em;white-space:nowrap;text-align:center;text-overflow:ellipsis;width:100%;font-size:clamp(1rem,2.2cqw,1.4rem);font-weight:700;overflow:hidden}.track-artist{width:100%;color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:clamp(.8rem,1.6cqw,1.05rem);overflow:hidden}.marquee-active{text-align:left}.marquee-track{width:max-content;animation:marquee-scroll var(--marquee-duration,10s) linear infinite;display:flex}.marquee-item{white-space:nowrap;padding-right:2.5rem}@keyframes marquee-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.progress-bar{background:#ffffff1f;border-radius:3px;width:100%;height:5px;margin-top:clamp(6px,1.2cqh,14px);overflow:hidden}.progress-fill{background:var(--accent);border-radius:3px;width:0%;height:100%;transition:width 1s linear}.progress-time{width:100%;color:var(--text-dim);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:6px;font-size:clamp(.7rem,1.4cqw,.85rem);display:flex}.control-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:clamp(1.6rem,4cqw,2.2rem);height:clamp(1.6rem,4cqw,2.2rem);font-size:clamp(.9rem,2cqw,1.2rem);line-height:1;transition:background .15s,transform .1s;display:flex}@media (hover:hover){.control-btn:hover{background:#ffffff14}}.control-btn:active{transform:scale(.94)}.control-btn:disabled{opacity:.35;cursor:default;background:0 0;transform:none}.queue-section{flex-direction:column;width:100%;min-height:0;margin-top:clamp(3px,.6cqh,8px);display:flex;overflow:hidden}.section-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin:0 0 4px;font-size:clamp(.65rem,1.2cqw,.8rem);font-weight:600}.queue-list{flex-direction:column;gap:clamp(3px,.6cqh,8px);margin:0;padding:0;list-style:none;display:flex;overflow:hidden}.queue-list li:nth-child(n+2){display:none}.queue-list li.queue-track{cursor:pointer;border-radius:14px;align-items:center;gap:12px;min-width:0;margin:0 -6px;padding:6px;transition:background .15s;display:flex}.queue-list li.queue-track:hover{background:#ffffff0f}.queue-art{background:#ffffff14 50%/cover no-repeat;border-radius:10px;flex:none;width:clamp(32px,7cqw,48px);height:clamp(32px,7cqw,48px)}.queue-info{flex:auto;min-width:0}.queue-title{white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.8rem,1.6cqw,1rem);font-weight:600;overflow:hidden}.queue-artist{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.7rem,1.3cqw,.85rem);overflow:hidden}.queue-empty{color:var(--text-dim);font-size:clamp(.8rem,1.6cqw,1rem)}.settings-btn{width:44px;height:44px;color:var(--text);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:1.3rem;display:flex;position:absolute;top:8px;left:8px}.settings-overlay{-webkit-backdrop-filter:blur(6px);z-index:10;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-overlay[hidden]{display:none}.settings-card{border:1px solid var(--card-border);-webkit-backdrop-filter:blur(40px)saturate(180%);background:#1c1c1ed9;border-radius:22px;flex-direction:column;gap:14px;width:min(360px,90cqw);max-height:85cqh;padding:24px;display:flex;overflow-y:auto}.settings-card h2{margin:0}.setting-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.action-btn{border:1px solid var(--card-border);background:var(--accent);color:#0b0b0b;cursor:pointer;border-radius:12px;min-height:44px;padding:0 16px;font-size:.95rem;font-weight:600}.close-btn{color:var(--text);border:1px solid var(--card-border);background:0 0}.status-text{color:var(--text-dim);font-size:.9rem}