*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#75c4df}body{font-family:Arial,Helvetica,sans-serif;color:#fffbea}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;transition:filter 8s}body:after{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,#143a482b,transparent 30%,#143a4855)}button,input,select{font:inherit}button{color:inherit;border:0;background:none;cursor:pointer}button:disabled{opacity:.3;cursor:default}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #e7b784;outline-offset:5px}button{touch-action:manipulation}body{text-transform:lowercase}.topbar{position:fixed;top:24px;left:34px;right:34px;z-index:4;display:flex;align-items:center;justify-content:space-between}.topbar .logo{position:static;font-size:32px;letter-spacing:-1.8px}.quiet-button{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:11px;text-shadow:0 1px 10px #16463a80}.quiet-button svg{width:20px;height:20px}.centerpiece{padding:74px 20px 76px;gap:14px}.vinyl{width:min(36vw,360px,34vh,34dvh);flex-shrink:0}.record-label b{font-size:clamp(32px,4.6vw,58px)}.record-label span{font-size:6px;letter-spacing:.6px}.listening{width:min(300px,85vw);text-align:center;text-shadow:0 1px 12px #143c4c}.track-info{display:flex;justify-content:center;align-items:center;gap:10px;min-height:38px}.track-info>div{min-width:0}#track-name{display:block;font-size:14px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;max-width:260px}#track-name[href]:hover{text-decoration:underline}#track-artist{font-size:10px;opacity:.85;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}#artwork{width:36px;height:36px;object-fit:contain;border-radius:2px}.transport{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px}.transport button{width:34px;height:32px;font-size:16px;padding:0}.transport #play{font-size:17px;border:1px solid #fffbea70;border-radius:50%;width:34px;height:34px}.playback-line{display:flex;align-items:center;gap:10px;font-size:8px;opacity:.8;margin-top:4px;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#f6e7b9;cursor:pointer;min-width:0}#seek{width:100%;height:12px}.focus .modes{gap:16px}.focus .modes button{font-size:10px;min-height:28px;padding:5px 3px}.focus #clock{font-size:38px;letter-spacing:-1.2px;margin:2px 0}.focus .actions{font-size:11px}.focus .actions #toggle{min-width:115px;padding:7px 13px}.focus .actions #reset{font-size:10px}#note{font-size:9px;margin:6px 0 0;min-height:14px}.bottom-bar{position:fixed;z-index:4;bottom:19px;left:34px;right:34px;display:flex;align-items:end;justify-content:space-between}.bottom-bar #mood-open{position:absolute;left:50%;transform:translateX(-50%);gap:9px;white-space:nowrap}.tiny-label{font-size:9px;opacity:.65;letter-spacing:1px}.bottom-bar .quiet-button{font-size:11px}.bottom-bar #settings-open{margin-left:auto}#toast{position:fixed;z-index:6;bottom:72px;left:50%;transform:translateX(-50%);background:#21473eee;border:1px solid #c2d0ac30;color:#fffbea;padding:11px 17px;border-radius:6px;max-width:90vw;width:max-content;font-size:12px;line-height:1.5;text-align:center;box-shadow:0 4px 24px #153b3720}
/* The music library is tucked away until requested. */
dialog{position:fixed;margin:auto;border:1px solid #ffffff18;border-radius:12px;background:#1d3e39f5;color:#fffbea;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:36px;box-shadow:0 20px 80px #0d2d4540;overflow:auto;scrollbar-width:thin;scrollbar-color:#758f7c transparent}dialog::backdrop{background:#163e4650;backdrop-filter:blur(10px)}dialog .close{position:absolute;top:12px;right:15px;width:32px;height:32px;font-size:25px;opacity:.7}dialog .eyebrow{font-size:9px;letter-spacing:1.5px;opacity:.6}dialog h1{font-size:31px;line-height:1.1;letter-spacing:-1.2px;margin:15px 0 23px}dialog p{font-size:12px;line-height:1.8}dialog .muted{color:#bdcdbf;font-size:11px}dialog label{display:block;font-size:11px;margin:20px 0 10px;color:#d4dfcf}dialog input:not([type=range]),dialog select{width:100%;background:transparent;border:0;border-bottom:1px solid #fffbea40;color:#fffbea;padding:12px 0;font-size:12px;border-radius:0}dialog input::placeholder{color:#afc4b7}dialog select option{background:#1d3e39}dialog input[type=range]{width:100%;margin:4px 0 16px}dialog a{font-size:11px;text-underline-offset:4px}dialog button{font-size:12px}dialog details{font-size:11px;margin-top:24px;color:#c0d0c4}dialog summary{cursor:pointer}dialog code{font-size:11px;word-break:break-all}dialog .solid-button{display:block;width:100%;padding:13px 20px;background:#e8ecd7;color:#294a3d;border-radius:24px;margin:20px 0 14px}#disconnect{display:block;text-decoration:underline;margin:16px auto;font-size:11px}#disconnect[hidden]{display:none}.mood-choices{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-bottom:25px}.mood-choices button{text-align:left;padding:13px 0;border-bottom:1px solid #ffffff20;font-size:14px;position:relative}.mood-choices button.selected{border-color:#e7b784;color:#e7b784}.mood-choices button.selected:after{content:'✦';position:absolute;right:0;top:15px;font-size:10px}.mood-choices small{display:block;opacity:.6;font-size:10px;margin-top:5px}.prompt-line{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff40}.prompt-line input{border-bottom:0!important;flex:1;min-width:0}.prompt-line button{flex-shrink:0;font-size:11px;padding:12px 0}.queue-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#bdcdbf;margin:28px 0 10px}.queue-heading button{font-size:10px;color:#e7b784}.track-row{display:grid;width:100%;grid-template-columns:22px 1fr 35px;align-items:center;gap:10px;padding:12px 0;text-align:left;border-bottom:1px solid #ffffff15}.track-row .number{font-size:9px;opacity:.5}.track-row strong{font-size:12px;font-weight:400;display:block}.track-row small{display:block;font-size:10px;opacity:.55;margin-top:3px}.track-row .length{font-size:9px;opacity:.6;text-align:right}.track-row:hover,.track-row.current{color:#e7b784}.empty{opacity:.5;font-size:11px!important;padding:15px 0}.drawer-foot{display:flex;justify-content:space-between;gap:15px;margin-top:27px;padding-top:17px;border-top:1px solid #ffffff20}.drawer-foot button,.drawer-foot a{font-size:10px}.drawer-foot a{opacity:.6}#playlist-link{display:inline-block;margin-top:15px}#playlist-link[hidden]{display:none}#garden-trees{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0;color:#b7cc8d;font-size:30px}body[data-light=dusk] canvas{filter:sepia(.28) hue-rotate(322deg) saturate(.85)}body[data-light=night] canvas{filter:brightness(.52) hue-rotate(25deg) saturate(.8)}@media(max-width:600px){.topbar{top:18px;left:22px;right:22px}.topbar .logo{font-size:27px}.topbar #connect{font-size:10px;gap:5px}.quiet-button svg{width:17px;height:17px}.centerpiece{gap:12px;padding:68px 16px 72px}.vinyl{width:min(66vw,31dvh)}.record-label b{font-size:40px}.record-label span{font-size:5px}.bottom-bar{left:22px;right:22px;bottom:16px}.bottom-bar #garden span,.bottom-bar #settings-open span,.tiny-label{display:none}.bottom-bar #garden,.bottom-bar #settings-open{font-size:22px}.bottom-bar #mood-open{font-size:12px;bottom:4px}.focus #clock{font-size:35px}.listening{width:240px}.transport{margin-top:6px}dialog{padding:30px 24px}.drawer-foot{flex-wrap:wrap}dialog h1{font-size:28px}}@media(max-height:620px) and (min-width:601px){.centerpiece{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;max-width:650px;margin:auto;column-gap:45px;align-content:center;justify-items:center}.vinyl{grid-row:1/3;width:min(40vw,62vh)}.listening,.focus{grid-column:2}.focus{align-self:start}.topbar{top:14px}}@media(max-height:650px) and (max-width:600px){.centerpiece{gap:7px}.vinyl{width:25dvh}.focus #clock{font-size:30px}.focus .modes button{min-height:24px}.focus #note{display:none}.playback-line{margin:0}.track-info{min-height:32px}}@media(prefers-reduced-motion:reduce){canvas{transition:none}}
/* Artwork belongs to the record; typography stays still below it. */
.record-label{width:43%;height:43%;border-width:6px;overflow:hidden;isolation:isolate}.label-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.record-label.has-art{background:#192225;border-color:#202b2e;box-shadow:0 0 0 2px #ffffff12}.record-label.has-art .label-fallback{visibility:hidden}.record-label #artwork{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}.record-label #artwork[hidden]{display:none}.record-label:after{width:7px;height:7px;left:calc(50% - 3.5px);top:calc(50% - 3.5px);background:#152128;box-shadow:0 0 0 2px #ffffff26;z-index:2}.record-label b{font-size:clamp(38px,4.6vw,64px)}.record-label span{font-size:7px;letter-spacing:1px}.track-info{min-height:42px}#track-name{font-size:15px;letter-spacing:-.2px}#track-artist{font-size:11px;margin-top:5px;opacity:.8}.transport{gap:25px;margin-top:8px}.transport button{display:grid;place-items:center;width:36px;height:36px;transition:opacity .18s,background .18s,transform .18s}.transport svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.transport #play{width:42px;height:42px;background:#fffbea0d;border-color:#fffbea90}.transport #play:hover{background:#fffbea25;transform:scale(1.04)}.transport #play svg{width:22px;height:22px}.transport .pause-symbol{display:none;fill:none;stroke-width:3}.transport #play[data-playing=true] .play-symbol{display:none}.transport #play[data-playing=true] .pause-symbol{display:block}.transport #play[aria-busy=true]{border-color:#e9c7a0;opacity:.65}.playback-line{gap:10px;margin-top:9px;font-size:9px}#seek{-webkit-appearance:none;appearance:none;background:transparent;height:18px;margin:0;--seek-fill:0%;outline-offset:3px}#seek::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#fffbea var(--seek-fill),#fffbea45 var(--seek-fill))}#seek::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:7px;margin-top:-2.5px;border-radius:50%;background:#fffbea;transition:transform .15s}#seek:hover::-webkit-slider-thumb,#seek:focus-visible::-webkit-slider-thumb{transform:scale(1.5)}#seek::-moz-range-track{height:2px;background:#fffbea45}#seek::-moz-range-progress{height:2px;background:#fffbea}#seek::-moz-range-thumb{width:7px;height:7px;border:0;background:#fffbea}.focus .modes{gap:17px}.focus .modes button{font-size:10px}.focus #clock{margin:6px 0 4px;font-weight:600}.centerpiece{gap:18px}.custom-input-line{display:flex;align-items:baseline;border-bottom:1px solid #ffffff50;gap:20px}.custom-input-line #custom-minutes{font-size:58px;letter-spacing:-2px;width:150px;border:0;font-weight:600;appearance:textfield;-moz-appearance:textfield}.custom-input-line #custom-minutes::-webkit-inner-spin-button,.custom-input-line #custom-minutes::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-input-line>span{font-size:12px;color:#bdcdbf}#custom-error{color:#f1bc96;font-size:11px;min-height:0}.track-row:disabled{opacity:.55}.transport button:disabled{cursor:wait}.transport #previous:disabled,.transport #next:disabled{cursor:default}@media(max-width:600px){.centerpiece{gap:15px}.record-label b{font-size:43px}.record-label span{font-size:5px}.focus .modes{gap:15px}.focus #clock{font-size:37px}.listening{width:min(270px,80vw)}}@media(max-width:360px){.topbar{left:18px;right:18px}.topbar .logo{font-size:25px}.topbar #connect{font-size:9px}.focus .modes{gap:12px}}@media(max-height:700px){.centerpiece{gap:10px}.vinyl{width:min(60vw,29dvh)}.transport{margin-top:4px}.focus #clock{margin:3px 0;font-size:34px}.playback-line{margin-top:4px}}@media(prefers-reduced-motion:reduce){.transport button{transition:none}}
#youtube-results{display:grid;gap:0;margin:18px 0}.source-choice{padding:12px 0;border-bottom:1px solid #ffffff20;text-align:left;width:100%;display:block}.source-choice strong{display:block;font-size:12px;font-weight:500;line-height:1.5}.source-choice small{display:block;font-size:10px;opacity:.6;margin-top:5px}.source-choice:hover{color:#e7b784}#source-summary{border-left:2px solid #e7b784;padding-left:12px;margin:22px 0;font-size:11px;line-height:1.7}#source-summary a{font-size:12px}#source-summary small{display:block;opacity:.7}.match-item{border-bottom:1px solid #ffffff20;padding:12px 0}.match-item p{margin:0 0 8px;font-size:11px}.match-item select{font-size:11px;max-width:100%}.review-title{font-size:13px;margin:20px 0 10px}#manual-import{margin-top:22px}#tracklist-text{width:100%;resize:vertical;background:#17362f80;color:#fffbea;border:1px solid #ffffff30;border-radius:4px;padding:10px;font:11px/1.8 Arial}#tracklist-text::placeholder{color:#a6bbae}#manual-import .solid-button{font-size:11px}#album-options .muted{color:#e6cba4}
/* Keep small controls legible when bright clouds drift behind them. */
.listening,.focus{color:#fffef2;text-shadow:0 1px 2px #153d40b3,0 2px 10px #173d4552}
#track-name{ text-shadow:0 1px 2px #173c42d9,0 2px 12px #173d4566 }
#track-artist{opacity:.94;text-shadow:0 1px 2px #173c42cc,0 2px 8px #173d4552}
.transport svg{filter:drop-shadow(0 1px 1.2px #173d40b3)}
.transport #play{box-shadow:0 1px 3px #173d4033,inset 0 0 0 1px #163a4024}
.playback-line{opacity:.95;text-shadow:0 1px 2px #173c42d9}
#seek::-webkit-slider-runnable-track{box-shadow:0 1px 2px #173d4073}
#seek::-webkit-slider-thumb{box-shadow:0 1px 2px #173d4073}
#seek::-moz-range-track,#seek::-moz-range-progress,#seek::-moz-range-thumb{box-shadow:0 1px 2px #173d4073}
.focus .modes button{opacity:.82;text-shadow:0 1px 2px #173c42cc,0 2px 7px #173d4552}
.focus .modes button.selected{opacity:1}
.focus #clock{text-shadow:0 1px 2px #173c42a6,0 3px 14px #173d4559}
.focus .actions{ text-shadow:0 1px 2px #173c42b3,0 2px 8px #173d4552 }
#playback-retry[hidden]{display:none}