:root{color-scheme:dark light;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--sky-height: 160px;--clock-font: 12px;--meta-font: 14px;--readout-gap: 8px;--readout-height: 320px;--music-reserve: 72px;background:var(--card-bg);color:var(--card-fg)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{overflow:hidden;background:var(--card-bg)}button{font:inherit}.card{position:relative;width:100vw;height:100svh;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(var(--music-reserve),calc(env(safe-area-inset-bottom) + 44px)) max(16px,env(safe-area-inset-left));display:grid;grid-template-rows:var(--sky-height) minmax(0,var(--readout-height));overflow:hidden;background:var(--card-bg);color:var(--card-fg)}.sky{position:relative;height:var(--sky-height);margin-inline:calc(max(16px,env(safe-area-inset-left))*-1) calc(max(16px,env(safe-area-inset-right))*-1);margin-top:calc(max(12px,env(safe-area-inset-top))*-1);background:var(--card-sky);overflow:hidden}.stars{position:absolute;inset:0}.star{position:absolute;color:var(--card-star);font-weight:800;line-height:1;transform:translate(-50%,-50%);animation:star-pulse 1.9s ease-in-out infinite;animation-delay:var(--star-delay)}.moon{position:absolute;margin:0;color:var(--card-moon);line-height:.86;text-shadow:0 0 10px color-mix(in srgb,var(--card-moon),transparent 42%),0 0 20px color-mix(in srgb,var(--card-moon),transparent 62%)}.readout{display:flex;min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:var(--readout-gap);padding-top:max(6px,var(--readout-gap));padding-bottom:max(4px,var(--readout-gap));overflow:hidden}.clock{margin:0;color:var(--card-accent);font-size:var(--clock-font);font-weight:900;line-height:.92;letter-spacing:0;white-space:pre}.clock-zone{margin-top:2px}.date,.place,.weather,.music-status{color:var(--card-secondary)}.date{margin-top:var(--readout-gap);font-size:var(--meta-font)}.brand{color:var(--card-accent);font-size:calc(var(--meta-font) * 1.12);font-weight:800}.place,.weather{font-size:var(--meta-font)}.weather{max-width:min(36rem,92%);line-height:1.28}.notes-field{position:fixed;left:10vw;right:10vw;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 44px);width:min(22rem,80%);margin-inline:auto;height:42px;pointer-events:none;z-index:2}.note{position:absolute;left:calc(12% + var(--note-index) * 18%);bottom:2px;color:var(--card-ok);font-weight:800;animation:note-rise 1.6s ease-in-out infinite;animation-delay:calc(var(--note-index) * .16s)}.music-bar{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;max-width:calc(100vw - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right)))}.music-button{appearance:none;width:24px;min-width:24px;height:24px;min-height:24px;border:1px solid var(--card-muted);border-radius:2px;padding:0;display:grid;place-items:center;background:transparent;color:var(--card-accent);cursor:pointer}.music-button:before{content:"";width:12px;height:12px;background:transparent}.music-button[data-state=connecting]:before{background:var(--card-secondary);animation:star-pulse .9s steps(2,end) infinite}.music-button[data-state=on]:before{background:var(--card-ok)}.music-button:disabled{cursor:wait}.music-button:focus-visible{outline:2px solid var(--card-ok);outline-offset:3px}.music-status{min-width:88px;font-size:.88rem;text-align:left}@media(min-width:720px){.card{padding-bottom:max(var(--music-reserve),calc(env(safe-area-inset-bottom) + 52px))}}@keyframes star-pulse{50%{opacity:.56}}@keyframes note-rise{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}to{opacity:0;transform:translateY(-24px)}}