body.onde-live{--record-rgb:105,211,161;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background-image:radial-gradient(ellipse at 12% 50%,rgba(var(--record-rgb),.18),transparent 56%);transition:background-color .4s}.onde-live .topbar{width:100%;padding:20px 3vw;flex-wrap:wrap;border-color:color-mix(in srgb,var(--border-color),transparent 55%)}.onde-live .tools{min-width:0;flex-wrap:wrap}.onde-wordmark{font:9px 'DM Mono',monospace;letter-spacing:.22em;color:var(--text-secondary);align-self:center;margin-right:18px}.onde-stage{width:100%;max-width:1900px;margin:auto;flex:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.15fr) minmax(0,.8fr);align-items:center;gap:clamp(24px,3vw,56px);padding:48px 3vw 60px}.turntable{min-width:0;text-align:center;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 52px;column-gap:18px;align-items:center}.record-scene{position:relative;width:100%;max-width:490px;aspect-ratio:1;margin:auto;grid-column:1;grid-row:1;isolation:isolate}.record-halo{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(var(--record-rgb),.8),transparent 70%);filter:blur(32px) saturate(1.8);opacity:.8;pointer-events:none;z-index:-1}.record-art-glow{position:absolute;inset:-5%;background-position:center;background-size:cover;border-radius:50%;filter:blur(46px) saturate(2);opacity:.42;mask-image:radial-gradient(circle,#000 20%,transparent 70%);pointer-events:none;z-index:-1}.onde-live .record{width:100%;max-width:none;position:absolute;inset:0;background:repeating-radial-gradient(circle at center,rgba(var(--record-rgb),.76) 0px,rgba(var(--record-rgb),.42) 1px,rgba(6,25,19,.7) 2px,rgba(var(--record-rgb),.48) 4px),radial-gradient(circle,rgba(var(--record-rgb),1),#102f25);animation:vinyl-turn 24s linear infinite;animation-play-state:paused;box-shadow:0 20px 70px rgba(var(--record-rgb),.27),inset 0 0 0 1px rgba(var(--record-rgb),.8)}.onde-live.is-playing .record{animation-play-state:running}.onde-live .record:before{background:conic-gradient(from 20deg,transparent,#fff4,transparent 24%,rgba(var(--record-rgb),.4),transparent 65%,#fff3,transparent)}.onde-live .record-center{width:54%;height:54%;overflow:hidden;background:rgb(var(--record-rgb));box-shadow:0 0 0 5px #10241d66}.record-center img{display:block;width:100%;height:100%;object-fit:cover}.record-center img[hidden],.record-fallback[hidden]{display:none}.record-fallback{font:clamp(36px,5vw,64px) 'DM Serif Display',serif!important;display:flex;flex-direction:column;align-items:center}.record-fallback small{margin-top:3px}.record-pin{position:absolute;width:10px;height:10px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:#061a14;box-shadow:0 0 0 3px #ffffff40;pointer-events:none}.vinyl-controls{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:14px;align-items:center}.vinyl-controls button{display:grid;place-items:center;border-radius:50%;width:50px;height:50px;padding:0;background:rgba(var(--record-rgb),.1);border-color:rgba(var(--record-rgb),.4)}.vinyl-controls button:first-child{background:rgba(var(--record-rgb),.25)}.vinyl-controls button:disabled{opacity:.4;cursor:not-allowed}.playback-label{grid-column:1;display:flex;align-items:center;justify-content:center;gap:8px;font:9px 'DM Mono',monospace;letter-spacing:.08em;color:var(--text-secondary);margin:28px 0 18px}.playback-dot{width:5px;height:5px;background:var(--text-secondary);border-radius:50%}.is-playing .playback-dot{background:rgb(var(--record-rgb));box-shadow:0 0 12px rgb(var(--record-rgb))}.onde-live .spotify-panel{grid-column:1;min-width:0;background:none;border:0;padding:0}.onde-live .spotify-panel>.panel-title{display:none}.onde-live .spotify-placeholder{padding:0}.onde-live .spotify-placeholder-text{margin:auto;font-size:12px}.onde-live .spotify-card{display:block;text-align:center}.onde-live .spotify-cover{display:none}.onde-live .spotify-info{min-width:0;overflow-wrap:anywhere}.onde-live .spotify-title{font:clamp(22px,2.2vw,34px)/1.15 'DM Serif Display',serif}.onde-live .spotify-artists{margin-top:9px;font-size:12px}.onde-live .spotify-bar{max-width:250px;margin:18px auto 0;height:2px}.onde-live .sp-enter{opacity:0}.onde-live .sp-enter-active{opacity:1;transition:opacity .4s}.onde-live .sp-exit{display:none}.onde-live .clock-panel{min-width:0;padding:0;background:none;border:0;align-items:center;text-align:center}.onde-live .clock-time{font-family:Manrope,sans-serif;font-weight:400;font-size:clamp(44px,6.1vw,110px);letter-spacing:-.065em;line-height:1;margin:0;white-space:nowrap}.onde-live #clockSS{color:var(--accent-color)}.onde-live #pageUptime{font:11px 'DM Mono',monospace;margin-top:30px;color:var(--text-secondary)}.time-tools{min-width:0;padding:28px 0 28px 28px;border-left:1px solid var(--border-color);text-align:left}.time-tools .clock-date{font-family:'DM Serif Display',serif;font-size:clamp(23px,2.2vw,34px);line-height:1.25;color:var(--text-primary);margin:0}.time-tools .clock-day{font:11px 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase;margin-top:12px;color:var(--accent-color)}.time-tools .clock-actions{margin-top:32px}.time-tools .clock-actions>button{background:transparent;border-radius:40px;font-size:11px}.time-tools .time-indicators{display:flex;flex-direction:column;gap:24px;margin-top:38px;width:100%;max-width:270px}.time-tools .indicator-label{font-size:10px;gap:8px}.time-tools .indicator-bar{height:3px;margin-top:10px}.time-tools .info-row{line-height:1.8}.time-tools .info-row button{margin-top:6px}.onde-live .timer-menu{text-align:left}.onde-live .toast{max-width:calc(100vw - 24px)}
@keyframes vinyl-turn{to{transform:rotate(360deg)}}
@media(min-width:1600px){.onde-stage{padding-inline:4vw;gap:70px}}
@media(min-width:701px) and (max-width:1100px){.onde-stage{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;padding:40px 5vw}.turntable{grid-row:1/3}.onde-live .clock-time{font-size:clamp(44px,7vw,78px)}.time-tools{grid-column:2;padding:28px 0 0;border-left:0;border-top:1px solid var(--border-color)}.time-tools .time-indicators{max-width:none;flex-direction:row}.time-tools .clock-date{font-size:28px}.onde-wordmark{display:none}}
@media(max-width:700px){.onde-live .topbar{padding:16px 20px}.onde-wordmark{display:none}.onde-stage{grid-template-columns:minmax(0,1fr);padding:32px 22px;gap:42px}.turntable{width:100%;max-width:500px;margin:auto;column-gap:12px;grid-template-columns:minmax(0,1fr) 46px}.record-scene{max-width:400px}.vinyl-controls button{width:44px;height:44px}.onde-live .clock-panel{padding:8px 0}.onde-live .clock-time{font-size:clamp(44px,14vw,80px)}.onde-live #pageUptime{margin-top:20px;font-size:10px}.time-tools{border-left:0;border-top:1px solid var(--border-color);padding:28px 0 0;text-align:center}.time-tools .clock-actions{justify-content:center;margin-top:24px}.time-tools .time-indicators{margin:28px auto 0;max-width:420px;flex-direction:row;gap:24px}.time-tools .clock-date{font-size:28px}.onde-live .spotify-title{font-size:25px}.playback-label{font-size:8px;letter-spacing:0;margin-top:24px}.onde-live .record-fallback small{font-size:6px}.onde-live .tools button{font-size:11px}}
@media(min-width:701px) and (max-height:500px){.onde-live .topbar{padding:8px 20px}.onde-stage{grid-template-columns:minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.9fr);gap:22px;padding:24px}.turntable{grid-row:auto;grid-template-columns:minmax(0,1fr) 44px;gap:10px}.record-scene{max-width:180px}.vinyl-controls button{width:44px;height:44px}.playback-label{margin:10px 0 6px;font-size:8px}.onde-live .spotify-placeholder-text{font-size:10px;line-height:1.4}.onde-live .spotify-placeholder-text br{display:none}.onde-live .spotify-placeholder-text button{display:block;margin:6px auto 0;font-size:11px}.onde-live .clock-time{font-size:clamp(36px,5.5vw,64px)}.onde-live #pageUptime{font-size:9px;margin-top:18px}.time-tools{grid-column:auto;padding:0 0 0 18px;border-top:0;border-left:1px solid var(--border-color)}.time-tools .clock-date{font-size:22px}.time-tools .clock-day{font-size:9px;margin-top:8px}.time-tools .clock-actions{margin-top:18px}.time-tools .time-indicators{margin-top:20px;gap:18px;flex-direction:column}.onde-live .spotify-title{font-size:19px}.onde-live .spotify-artists{font-size:10px;margin-top:4px}.onde-live .spotify-bar{margin-top:10px}.onde-live .record-fallback{font-size:30px!important}.onde-live .record-fallback small{font-size:5px}}
@media(max-width:360px){.onde-live .topbar{gap:10px}.onde-live .topbar .back{margin-left:0}.onde-live .tools button{font-size:10px}.onde-stage{padding-inline:16px}.onde-live .record-fallback{font-size:30px!important}}
@media(prefers-reduced-motion:reduce){.onde-live .record{animation:none!important}.onde-live *{transition:none!important}}