.header-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end }.header-actions .install-button { white-space:nowrap }
.update-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #c6d4b4; border-radius:13px; padding:14px 19px; margin-bottom:26px; background:#e9efdc; color:#304b29 }.update-banner p { margin:0; font-size:12px; line-height:1.5 }.update-banner button { flex-shrink:0; color:inherit; padding:8px 0; min-height:44px }
.chime-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:17px; flex-wrap:wrap }.chime-controls label { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--text); cursor:pointer; min-height:44px }
.chime-controls input { appearance:none; -webkit-appearance:none; width:32px; height:19px; margin:0; background:var(--track); border:1px solid var(--line); border-radius:20px; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0 }.chime-controls input:before { content:''; position:absolute; width:13px; height:13px; top:2px; left:2px; border-radius:50%; background:#fffef5; box-shadow:0 1px 3px #27442920; transition:transform .2s }.chime-controls input:checked { background:var(--accent); border-color:var(--accent) }.chime-controls input:checked:before { transform:translateX(13px) }.chime-controls button { font-size:11px; min-height:44px; padding:8px 11px; background:var(--accent-soft); border:1px solid var(--line); border-radius:8px }
.in-focus-view { --bg:#152c25; --text:#e9ecda; --muted:#a2b69f; --accent:#dee6b9; --accent-soft:#ffffff0c; --panel:#18362b; --thumb:#e3e9bd; --track:#425643; color-scheme:dark; background:#152c25; min-height:100svh }
.in-focus-view .sidebar,.in-focus-view main > :not(#focus-view):not(#update-banner) { display:none!important }.in-focus-view main { margin:0 auto; padding:25px 44px; max-width:1160px; position:relative }
.focus-view { min-height:calc(100svh - 50px); display:flex; flex-direction:column; isolation:isolate }
.focus-view:before { content:''; position:fixed; z-index:-1; pointer-events:none; width:min(86vw,690px); height:min(86vw,690px); top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid #c0d7a70b; border-radius:50%; box-shadow:0 0 0 50px #c0d7a704,0 0 0 100px #c0d7a703 }
.focus-view-header { display:flex; align-items:center; justify-content:space-between; gap:20px }.focus-wordmark { font-size:35px; letter-spacing:-2px; font-weight:550; color:#e3e8ca }.focus-view-header button { white-space:nowrap; color:#b3c4a6; border:1px solid #afc59b22; border-radius:30px; padding:10px 16px; min-height:44px; min-width:44px; font-size:11px }
.focus-center { width:min(100%,680px); margin:auto; padding:55px 0 45px; text-align:center }.focus-center h2 { font-size:9px; font-weight:500; letter-spacing:3px; margin:0 0 17px; color:#96ad8d }
#focus-phase { color:#b1c3a4; font-size:12px; letter-spacing:.4px; margin:0 0 8px; min-height:20px }.focus-time { font-size:clamp(72px,17vw,152px); font-weight:250; font-variant-numeric:tabular-nums; letter-spacing:-.065em; line-height:1.16; color:#e9edce; margin-left:-.065em; transition:color 2.4s cubic-bezier(.45,0,.25,1),filter 2.4s cubic-bezier(.45,0,.25,1),text-shadow 2.4s }.in-flow .focus-time { color:transparent; text-shadow:0 1px 18px #0000; filter:blur(6px); user-select:none }
.focus-center,.focus-view-actions,.in-focus-view .update-banner { transition:opacity .9s ease,visibility 0s }.in-flow :is(.focus-center,.focus-view-actions,.update-banner) { opacity:0; visibility:hidden; transition:opacity 2.4s cubic-bezier(.45,0,.25,1),visibility 0s 2.4s }
.focus-sound { display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:#a9bc9c; margin:18px 0 33px }.focus-sound:before { content:''; width:4px; height:4px; border-radius:50%; background:#a2bd7e }
#focus-play { display:flex; margin:0 auto; width:auto; min-width:190px; min-height:48px; padding:14px 28px; border-radius:30px; background:#e3e9bd; color:#26402e }@media(hover:hover) { #focus-play:hover { background:#f1f4d9 } }
#focus-skip { display:flex; margin:12px auto -12px; color:#b3c4a6; font-size:11px; min-height:44px; align-items:center }#focus-skip[hidden] { display:none }@media(hover:hover) { #focus-skip:hover { color:#e9edce } }
.focus-detail { font-size:11px; color:#97ad90; line-height:1.7; min-height:18px; margin:21px 0 33px }.focus-volume { display:flex; align-items:center; gap:16px; width:min(100%,280px); margin:auto; padding:8px 0; font-size:10px; color:#a3b798 }.focus-volume output { min-width:31px; text-align:right }.focus-volume input { min-width:0 }.focus-volume input::-webkit-slider-thumb { border-color:#29432e }
.focus-stop { display:block; margin:16px auto 0; color:#b3c4a6; font-size:11px; min-height:44px; line-height:44px }.focus-hours-view { font-size:11px; letter-spacing:.4px; color:#97ad90; margin:-12px 0 28px; font-variant-numeric:tabular-nums }.focus-hours-view:empty { display:none }
.in-focus-view .update-banner { background:#283f2b; border-color:#5e75403d; color:#d4e2b9 }
.view-arriving { animation:arrive .55s cubic-bezier(.2,.7,.2,1) both }
@keyframes arrive { from { opacity:0; transform:translateY(9px) } to { opacity:1; transform:translateY(0) } }
body:after { content:''; position:fixed; inset:0; z-index:20; pointer-events:none; background:#152c25; opacity:0; transition:opacity .35s ease-out }.focus-approaching:after { opacity:.32; transition:opacity 1.5s cubic-bezier(.45,0,.25,1) }
::view-transition-old(root) { animation:view-leave .7s cubic-bezier(.4,0,.2,1) both }::view-transition-new(root) { animation:view-enter .9s cubic-bezier(.22,.61,.36,1) both }
@keyframes view-leave { to { opacity:0; transform:scale(.985); filter:blur(4px) } }
@keyframes view-enter { from { opacity:0; transform:scale(1.012); filter:blur(4px) } }
.focus-view:not([hidden]) .focus-center > * { animation:arrive .8s cubic-bezier(.2,.7,.2,1) .45s both }.focus-view:not([hidden]) .focus-center h2 { animation-delay:.2s }.focus-view:not([hidden]) :is(#focus-phase,.focus-time) { animation-delay:.3s }
@media(max-width:760px) { .header-actions { justify-content:flex-start }.in-focus-view main { padding:22px 24px }.focus-view { min-height:calc(100svh - 44px) }.focus-center { padding:40px 0 }.focus-detail { max-width:250px; margin-left:auto; margin-right:auto }.update-banner { flex-wrap:wrap; gap:4px; padding:12px 16px }.focus-view-header :is(button,.world-select) { font-size:11px; padding:9px 12px }.focus-view-header { flex-wrap:wrap; row-gap:10px }.focus-view-actions { gap:6px; margin-left:auto }.focus-view-header .wide-only { display:none } }
@media(prefers-reduced-motion:reduce) { ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root) { animation-duration:.001s!important }.focus-view .focus-center > * { animation:none!important }body:after { transition:none!important }:is(.focus-time,.focus-center,.focus-view-actions,.wallpaper-credit,.update-banner) { transition-duration:.4s!important } }
.rosette { position:fixed; inset:0; width:100%; height:100%; z-index:-1; opacity:0; pointer-events:none; transition:opacity 1.8s ease }
.build-on .rosette { opacity:1 }:is(.photos-on,.window-on) .focus-view:before { opacity:.35 }.build-on .focus-view:before { opacity:0 }
.focus-view-actions { display:flex; align-items:center; gap:8px }.world-select { appearance:none; -webkit-appearance:none; background:transparent; color:#b3c4a6; border:1px solid #afc59b22; border-radius:30px; padding:10px 16px; min-height:44px; font:inherit; font-size:11px; cursor:pointer; width:auto; flex-shrink:0; white-space:nowrap }@media(hover:hover) { .world-select:hover { color:#e9edce } }.world-select[hidden] { display:none }.world-select option { color:#1d2a20; background:#e9edce }#keep-controls[aria-pressed=true] { color:#e9edce; border-color:#dee6b955; background:#ffffff0c }
.wallpaper { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; pointer-events:none; transform:scale(1.04); transition:opacity 2.4s ease,transform 24s linear }
.photos-on .wallpaper.shown { opacity:1; transform:scale(1) }
.photos-on .focus-view:after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center,#00000066 0%,#000000a6 80%) } /* taste-skill-ignore: neutral scrim over the photo */
.wallpaper-credit { position:fixed; left:20px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:2; font-size:10px; letter-spacing:.04em; color:#ffffff8c; text-decoration:none; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media(hover:hover) { .wallpaper-credit:hover { color:#fff } }
body:not(.photos-on,.window-on) .wallpaper-credit { display:none }
/* Window: the film fills the room and drifts closer very slowly, like leaning toward the glass. */
.window-film { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; pointer-events:none; background:#040907; transition:opacity 3s cubic-bezier(.45,0,.25,1) }
.window-on .window-film.shown { opacity:1; animation:window-lean 90s ease-in-out infinite alternate }
@keyframes window-lean { from { transform:scale(1) } to { transform:scale(1.06) } }
.window-on .focus-view:after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; transition:opacity 2.4s cubic-bezier(.45,0,.25,1); background:linear-gradient(#00000052,#0000 22%),radial-gradient(ellipse at center,#00000047 0%,#0000008c 85%) } /* taste-skill-ignore: neutral scrim over the film, a little deeper behind the header */
/* Once the controls fade in flow, the scrim lifts too and the view opens up. */
.in-flow.window-on .focus-view:after { opacity:.6 }
.icon-text svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block }
@media(prefers-reduced-motion:reduce) { .wallpaper { transform:none; transition:opacity .4s }.window-on .window-film.shown { animation:none }.window-film { transition:opacity .4s } }
.scenery-on .focus-center { text-shadow:0 1px 18px #0000004d }
/* Volume rests as a quiet "Volume 55%" and opens into a slider on hover or keyboard focus.
   Touch screens have no hover, so they keep the slider open. */
@media (hover:hover) {
  .focus-volume { width:max-content; max-width:100%; gap:0 }
  .focus-volume input { width:0; margin:0 6px; opacity:0; transition:width .6s cubic-bezier(.2,.7,.2,1), margin .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease }
  .focus-volume:hover input,.focus-volume:focus-within input { width:240px; margin:0 16px; opacity:1 }
}
.dusk { position:fixed; inset:0; z-index:-1; pointer-events:none; background:#040907; opacity:var(--dusk,0); transition:opacity 6s linear }
body:not(.in-flow) .dusk { transition:opacity 1.6s cubic-bezier(.45,0,.25,1) }
/* Taste pass: sentence case, nothing under 11px. */
.focus-sound { font-size:13px; letter-spacing:0; text-transform:none }
/* The pulse now, under the sound's name: it fades with everything else in flow. */
.focus-heart.heart-line { display:flex; justify-content:center; font-size:13px; font-variant-numeric:tabular-nums; color:#a9bc9c; margin:-24px 0 33px }.focus-heart svg { width:13px; height:13px }
.focus-volume { font-size:12px }
.focus-view-header :is(button,.world-select) { font-size:12px }
.wallpaper-credit { font-size:11px; letter-spacing:0; color:#ffffffb3 }
.chime-controls label,.setting-group label,.control-label { font-size:13px }
.chime-controls button { font-size:12px; padding:8px 14px; border-radius:100px }
#focus-exit svg { width:15px; height:15px }
@media(min-width:761px) { #focus-exit .narrow-only { display:none } }
/* On a phone the photo controls take the whole top row, so the painting stands in for the wordmark. */
@media(max-width:760px) { .focus-view-header:has(.world-select:not([hidden])) .focus-wordmark { display:none }.focus-view-header:has(.world-select:not([hidden])) .focus-view-actions { margin:0 auto } }