@font-face{font-family:'Delius';src:url('./assets/fonts/delius-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url('./assets/fonts/figtree-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url('./assets/fonts/figtree-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Figtree;src:url('./assets/fonts/figtree-600.ttf') format('truetype');font-weight:600;font-display:swap}
.room-experience{--ink:#4e5960;--muted:#63727a;--accent:#698779;--panel-height:272px;--panel-bottom:calc(24px + env(safe-area-inset-bottom,0px));background:#cae2e7;color:var(--ink);font-family:Figtree,sans-serif;overflow:hidden}
.room-experience button,.room-experience input,.room-experience .wordmark,.room-experience .cozy-dialog h2{font-family:inherit}
.room-experience button:focus-visible,.room-experience a:focus-visible,.room-experience input:focus-visible{outline:2px solid #5d8170;outline-offset:3px}
.room-experience main{position:relative;width:100%;height:var(--app-height,100dvh);min-height:0;top:var(--app-top,0px);max-width:none;padding:0;overflow:hidden;display:block}
.room-experience .experience{position:absolute;inset:0;display:block}
.room-experience .scene-shell{position:absolute;inset:0;width:100%;max-width:none;border-radius:0;box-shadow:none;overflow:hidden}
.room-experience .scene{width:100%;height:100%;aspect-ratio:auto;pointer-events:auto;background:#cae2e7}
.room-experience .topbar{position:absolute;left:28px;top:20px;z-index:4;min-height:0;margin:0;pointer-events:none}
.room-experience .wordmark{font-size:29px;font-weight:600;letter-spacing:-.06em;color:#595269;text-shadow:0 1px 16px #ffffff80;pointer-events:auto}
.room-experience .wordmark span{font-size:12px;font-weight:400;letter-spacing:.01em;margin-top:5px;color:#716b80}
.room-experience:has([data-period='night']) .wordmark{color:#f6e9ef}
.room-experience:has([data-period='night']) .wordmark span{color:#dbd5e9}
.control-panel{position:absolute;z-index:5;bottom:var(--panel-bottom);left:28px;width:294px;padding:12px 14px;background:#fffaf296;border:1px solid #fffdf77a;border-radius:18px;box-shadow:0 4px 20px #5265740b;backdrop-filter:blur(8px);font-size:14px;overflow:auto;overscroll-behavior:contain;background-clip:padding-box;max-height:calc(var(--app-height,100dvh) - var(--panel-bottom) - 8px)}
.room-experience:has([data-period='night']) .control-panel{--ink:#f5eee3;--muted:#d3dfe2;background:#27384b78;border-color:#cbdcdf29;box-shadow:none}
.room-experience:has([data-period='night']) .weather-summary>span:first-child{color:#b9cddd}
.room-experience:has([data-period='night']) .transport{color:#cbd9dc}
.room-experience:has([data-period='night']) .listen-button{color:#e0ecdf;background:#b7d4c635}
.room-experience:has([data-period='night']) .listen-button[aria-pressed='true']{background:#98bca955}
.room-experience:has([data-period='night']) .chip[aria-pressed='true']{color:#e0eadb;background:#789b7a4d}
.room-experience:has([data-period='night']) .chip:hover,.room-experience:has([data-period='night']) .transport:hover{background:#ffffff12}
.room-experience:has([data-period='night']) .view-switch a[aria-current='page']{color:#f4eee2;background:#ffffff16}
.room-experience:has([data-period='night']) .view-switch,.room-experience:has([data-period='night']) .clock-readout{border-color:#cbdcdf25}
.panel-top{display:flex;align-items:center;gap:6px}
.room-experience .weather-summary{position:static;padding:0;display:flex;align-items:center;gap:8px;background:transparent;text-align:left;min-width:0;flex:1;min-height:44px;color:var(--ink)}
.room-experience .weather-summary>span:first-child{font-size:25px;color:#688896;width:28px;flex-shrink:0}
.room-experience .weather-summary strong{font-size:14px;font-weight:500;display:block;line-height:1.35}
.room-experience .weather-summary small{font-size:12px;color:var(--muted);display:block;margin-top:2px;max-width:158px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{background:transparent;border-radius:10px;font-size:14px;min-height:44px;min-width:44px;padding:0 8px;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}
.chip:hover,.transport:hover{background:#ffffff60}
.chip[aria-pressed='true']{color:#486c5d;background:#d6e3d577}
.sky-choice{padding:0 5px;font-size:12px}
.track-choice{background:transparent;text-align:left;min-height:44px;min-width:0;padding:3px 0;display:flex;align-items:center;gap:10px;width:100%;color:var(--ink)}
.track-choice strong{font-size:17px;font-weight:500;line-height:1.35;display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.picker-mark{font-size:19px;color:var(--muted);padding-right:6px}
.track-choice:hover strong{text-decoration:underline;text-decoration-color:#a5bbb080;text-underline-offset:4px}
.panel-radio{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 7px}
.transport-group{display:flex;align-items:center;gap:4px}
.listen-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;border-radius:50%;background:#b7d4c685;color:#47695b;box-shadow:inset 0 1px 0 #ffffff70}
.listen-button svg{width:20px;height:20px;fill:currentColor}
.listen-button[aria-pressed='true']{background:#a9cbbb}
.transport{background:transparent;border-radius:10px;width:44px;height:44px;min-width:44px;color:#6b7c80;display:grid;place-items:center}
.transport svg,.icon-control svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel-volume{position:relative;width:48px;padding:0 2px 17px;flex-shrink:0;display:block;cursor:ns-resize}
.volume-dial{display:block;width:44px;height:44px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#c9c7b7 0deg 3deg,#f3eedf 3deg 12deg);border:1px solid #c8c5b5;box-shadow:0 2px 4px #67554d0d;position:relative;pointer-events:none}
.volume-dial:before{content:'';position:absolute;inset:4px;border-radius:50%;background:linear-gradient(135deg,#fffced,#ece5d6);box-shadow:inset 0 1px 2px #ffffff}
.volume-dial i{position:absolute;inset:0;transform:rotate(var(--knob-angle,-32deg));pointer-events:none}
.volume-dial i:after{content:'';position:absolute;left:20px;top:7px;width:3px;height:9px;background:#758878;border-radius:2px}
.panel-volume input{position:absolute;top:0;left:2px;width:44px;height:44px;margin:0;opacity:0;cursor:ns-resize;touch-action:none}
.panel-volume:has(input:focus-visible) .volume-dial{outline:2px solid #5d8170;outline-offset:3px}
.panel-volume output{position:absolute;bottom:0;left:0;width:100%;text-align:center;font-size:12px;line-height:17px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.small-controls{display:flex;align-items:center;justify-content:space-between;gap:2px}
.motion-toggle{font-size:17px}
.view-switch{display:flex;gap:2px;margin-top:3px;border-top:1px solid #758b8b22;padding-top:3px}
.view-switch a{font-size:14px;padding:0 10px;min-height:44px;display:flex;align-items:center;justify-content:center;flex:1;border-radius:10px;color:var(--muted)}
.view-switch a[aria-current='page']{color:#486c5d;background:#fffdf762}
.weather-details{font-size:12px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.clock-readout{display:flex;justify-content:center;align-items:center;border-top:1px solid #758b8b22;margin-top:3px;padding-top:3px}
.clock-readout[hidden]{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.room-experience .radio-wrap{display:none!important}
.room-experience .object-hit{display:none;position:absolute;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;z-index:2;padding:0;min-width:44px;min-height:44px;pointer-events:auto}
.room-experience .scene.is-3d .object-hit{display:block}
.room-experience .object-hit:hover{background:#fff3d314}
.room-experience .scene.clock-open .fire-hit{display:none!important}
.room-experience .fire-hit[aria-pressed='true']{box-shadow:0 0 0 2px #ffd39454;background:#ffe0aa0a}
.room-experience .cat-wrap{z-index:2;pointer-events:auto}
.room-experience .scene.is-3d .cat-button{background:transparent}
.view-diorama #lamp-button,.view-diorama #lamp-shortcut{display:none!important}
.room-experience .toast{left:50%;bottom:calc(var(--panel-height) + var(--panel-bottom) + 12px);max-width:calc(100% - 40px);font-family:inherit;font-size:12px;line-height:1.5;background:#fffaf2ed;color:#716580;z-index:10;pointer-events:none;box-shadow:0 4px 18px #55516c13}
.viewport-boundary{position:fixed;inset:0;visibility:hidden;pointer-events:none}
@media(max-width:779px){
 .room-experience{--panel-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 .room-experience .topbar{top:14px;left:16px}
 .room-experience .wordmark{font-size:25px}
 .control-panel{left:14px;width:254px;padding:9px 11px;border-radius:17px}
 .room-experience .weather-summary{gap:6px}
 .room-experience .weather-summary strong{font-size:13px}
 .room-experience .weather-summary small{max-width:128px}
 .track-choice strong{font-size:16px}
 .transport-group{gap:0}
 .panel-radio{gap:6px}
 .small-controls{gap:0}
 .small-controls .chip{padding:0 6px}
}
@media(max-height:460px) and (min-width:780px){.room-experience{--panel-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.room-experience .topbar{top:10px}.control-panel{left:16px}}
.room-experience .cozy-dialog{font-family:Figtree,sans-serif;color:var(--ink);background:#fffaf4;border:1px solid #ffffff;border-radius:26px;box-shadow:0 20px 80px #47435730;padding:24px;width:min(510px,calc(100% - 28px));max-height:85svh;overflow:auto}
.room-experience .cozy-dialog::backdrop{background:#55516c43;backdrop-filter:blur(5px)}
.room-experience .cozy-dialog h2{font-size:23px;font-weight:500;line-height:1.3;letter-spacing:-.035em;margin:0}
.room-experience .cozy-dialog h3{font-size:13px;font-weight:500;color:#908399;margin:20px 0 10px}
.room-experience .icon-button{min-width:44px;height:44px;border-radius:50%;background:#ede6ef;color:#8b7991;font-size:22px}
.room-experience .dialog-heading{gap:16px;margin-bottom:16px}
.room-experience .dialog-note{font-size:12px;line-height:1.6;color:#8a8094}
.room-experience .city-search input{font-size:15px;border-radius:13px;background:#f0ebf3;border-color:#dfd2e6}
.room-experience .search-button{background:#809e8c;border-radius:13px;color:#fffaf0;font-size:13px;padding:10px 15px}
.room-experience .geolocate{font-size:12px;color:#698477;min-height:44px}
.room-experience .city-results button{background:#eee8f2;color:var(--ink);border-radius:12px;font-size:14px}
.room-experience .city-results small{color:var(--muted)}
.room-experience .weather-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.room-experience .weather-options button{background:#eae7f0;border:1px solid transparent;border-radius:16px;min-height:85px;font-size:25px;color:#8796a8;padding:12px}
.room-experience .weather-options span{font-size:12px;margin-top:7px;color:#777182}
.room-experience .weather-options button[aria-pressed='true']{border-color:#91ad9d;background:#e2ebdf}
.music-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.music-list button{min-width:0;background:#f0e9f1;border:1px solid #e0d7e5;border-radius:15px;text-align:left;padding:13px 12px;color:#716480;min-height:80px}
.music-list button strong{display:block;font-size:14px;font-weight:500;line-height:1.35}
.music-list button small{display:block;font-size:12px;line-height:1.5;color:#776f82;margin-top:5px}
.music-list button[aria-pressed='true']{background:#dfebe0;border-color:#9bb8a6;color:#53755f}
.music-list button[data-recommended='true'] small:after{content:' · para este cielo';color:#678774}
.music-credits{font-size:11px;color:#8a8094;margin-top:22px;line-height:1.65}
.music-credits summary{cursor:pointer;min-height:44px;padding:13px 0}
.music-credits a{text-decoration:underline;text-underline-offset:2px;color:#657f71}
.music-credits p{margin:11px 0}
.music-request{margin:16px 0 18px}
.external-piece{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#e8eee5;border:1px solid #cbdcc8;border-radius:15px;padding:13px 12px;min-height:80px;color:#526b60;text-decoration:none}
.external-piece:hover{background:#dee9dc}
.external-piece strong{display:block;font-size:14px;font-weight:500;line-height:1.35}
.external-piece small{display:block;font-size:12px;line-height:1.5;margin-top:5px;color:#63736b}
.external-piece .service-name{font-size:12px;background:#fffaf28c;border-radius:9px;padding:6px 8px;flex-shrink:0}
.music-request .dialog-note{margin:7px 0 0}

@media(max-width:360px){.music-list{grid-template-columns:1fr}}

/* A quiet player: weather, one music group, then optional room controls. */
.room-experience .wordmark{font-family:'Delius',cursive;font-size:36px;font-weight:400;letter-spacing:0;line-height:1.2}
.room-experience .cozy-dialog h2{font-family:'Delius',cursive;font-size:28px;font-weight:400;letter-spacing:0}
.control-panel{width:294px;padding:12px 14px;overflow-x:hidden}
.panel-top{padding-bottom:7px;border-bottom:1px solid #758b8b22;gap:10px}
.room-experience .weather-summary strong{font-size:14px;font-weight:500}
.room-experience .weather-summary small{font-size:13px;max-width:172px}
.sky-choice{font-size:14px;padding:0 8px;border:1px solid #758b8b22;min-height:36px;border-radius:10px}
.music-controls{padding:8px 0 4px}
.track-choice{gap:8px;min-height:58px;padding:2px 0}
.track-copy{display:block;flex:1;min-width:0}
.track-choice strong{font-family:'Figtree',sans-serif;font-size:18px;font-weight:500;line-height:1.35;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.track-meta{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.3}
.track-meta small{font-size:12px}
.choose-label{font-size:13px;color:var(--muted);padding:7px 8px;border:1px solid #758b8b35;border-radius:9px;flex-shrink:0}
.track-choice:hover .choose-label{background:#ffffff40}
.track-choice:hover strong{text-decoration:none}
.panel-radio{padding:8px 0 1px;align-items:center;gap:12px}
.transport-group{gap:6px}
.listen-button{width:48px;height:48px}
.transport{width:40px;min-width:40px}
.transport svg{width:18px;height:18px}
.panel-volume{width:65px;padding:0 0 0 21px;min-height:57px}
.volume-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:12px;line-height:15px;color:var(--muted)}
.panel-volume .volume-dial{width:42px;height:42px}
.panel-volume input{width:44px;height:44px;left:21px;top:0}
.panel-volume output{top:13px;bottom:auto;left:0;width:19px;font-size:12px;line-height:16px}
.volume-dial i:after{left:19px}
.weather-follow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0 2px;min-height:40px;background:transparent;color:var(--muted);font-size:13px;text-align:left;border-radius:7px}
.toggle-track{position:relative;width:28px;height:16px;flex-shrink:0;border-radius:20px;background:#83909355;border:1px solid #83909345}
.toggle-track:after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fffdf4;transition:transform .18s ease}
.weather-follow[aria-pressed='true'] .toggle-track{background:#738e7f}
.weather-follow[aria-pressed='true'] .toggle-track:after{transform:translateX(12px)}
.room-options{border-top:1px solid #758b8b22}
.room-options summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;cursor:pointer;color:var(--muted);font-size:13px;list-style:none;border-radius:7px}
.room-options summary::-webkit-details-marker{display:none}
.room-options summary:focus-visible{outline:2px solid #5d8170;outline-offset:2px}
.details-indicator{font-size:18px;width:28px;text-align:center;transition:transform .2s}
.room-options[open] .details-indicator{transform:rotate(45deg)}
.ambient-controls{display:flex;gap:6px;margin-bottom:4px}
.ambient-controls .chip{flex:1;gap:6px;font-size:14px;border:1px solid #758b8b22}
.small-controls{gap:4px;padding:0 0 6px}
.small-controls .chip{gap:4px;padding:0 4px;font-size:13px;flex:1;min-width:0}
.small-controls svg{width:18px;height:18px;flex-shrink:0}
.motion-symbol{font-size:18px;min-width:16px}
.view-switch{padding-top:5px;margin-top:0}
.view-switch a{font-size:14px;min-height:38px}
.room-experience:has([data-period='night']) .panel-top,.room-experience:has([data-period='night']) .room-options,.room-experience:has([data-period='night']) .sky-choice,.room-experience:has([data-period='night']) .choose-label,.room-experience:has([data-period='night']) .ambient-controls .chip{border-color:#cbdcdf29}
.room-experience:has([data-period='night']) .track-choice:hover .choose-label{background:#ffffff12}
.room-experience .dialog-note{font-size:14px}
.room-experience .cozy-dialog h3{font-size:14px}
.room-experience .weather-options span{font-size:14px}
.music-list button strong{font-size:15px;line-height:1.4}
.music-list button small{font-size:13px}
.music-credits{font-size:12px}
@media(max-width:779px){
 .room-experience .wordmark{font-size:30px}
 .control-panel{width:260px;padding:10px 12px}
 .room-experience .weather-summary small{max-width:145px}
 .track-choice strong{font-size:18px}
 .transport-group{gap:3px}
 .panel-radio{gap:6px}
}
@media(prefers-reduced-motion:reduce){.toggle-track:after,.details-indicator{transition:none}}