/* A city seen through a window, with a small bedside ritual. */
:root{--zc-sleep-sky:#111b2c;--zc-sleep-far:#29394c;--zc-sleep-near:#111e2b;--zc-sleep-moon:#dcd6b8;--zc-sleep-lamp:#cfb47c;--zc-sleep-window-ink:#e8e0c8;--zc-sleep-window-muted:#b5bdc7;--zc-sleep-sill:#111921;--zc-sleep-frame:#485057}
.setup{position:relative;isolation:isolate;max-width:none;width:100%;margin:0;min-height:100dvh;padding:50px 5vw 40px;display:grid;grid-template-columns:minmax(0,1fr) 385px;gap:7vw;align-items:center;background:var(--zc-sleep-sky)}.sleep-intro{position:static;align-self:start;padding:12px 0 0;gap:14px;min-height:0}.skyline,.sleep-intro .skyline{position:absolute;z-index:-1;inset:0;width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none;margin:0}.skyline .city-hill.far{fill:var(--zc-sleep-far);opacity:.42}.skyline .city-hill.near{fill:var(--zc-sleep-far);opacity:.72}.city-distance{fill:var(--zc-sleep-near);opacity:.66}.skyline .city-sill{fill:var(--zc-sleep-sill)}.skyline .city-frame{stroke:var(--zc-sleep-frame);stroke-width:5;fill:none}.skyline>g[transform] .sky-wash,.skyline>g[transform] .moon,.skyline>g[transform] .moon-cut,.skyline>g[transform] .moon-halo,.skyline>g[transform] .stars{display:none}.skyline>g[transform] .far{fill:var(--zc-sleep-far);opacity:.85}.skyline .window{opacity:.65}.skyline .moon-halo{opacity:.035}.skyline .river{fill:var(--zc-sleep-far);opacity:.6}.skyline .river-lines{opacity:.17}.sleep-intro>.eyebrow{font:8px sans-serif;letter-spacing:.24em;color:var(--zc-sleep-window-muted);margin:0}.setup h1{font:400 clamp(36px,4.8vw,67px)/1.04 var(--zc-font);letter-spacing:-.04em;color:var(--zc-sleep-window-ink);max-width:8em;margin:9px 0 0}.sleep-intro .intro{color:var(--zc-sleep-window-muted);font:14px/1.85 var(--zc-font);max-width:25em;margin:4px 0 0;display:block}.sleep-settings{align-self:center;position:relative;z-index:1;background:color-mix(in srgb,var(--zc-surface) 96%,transparent);padding:28px 28px 23px;gap:20px;border:0;border-radius:3px;box-shadow:0 20px 80px #0003}.bedside-title{border-bottom:1px solid var(--zc-border);padding-bottom:19px}.bedside-title>span{font:8px sans-serif;letter-spacing:.18em;color:var(--zc-muted)}.bedside-title h2{font:400 26px/1.2 var(--zc-font);letter-spacing:-.02em;margin:10px 0 0;color:var(--zc-ink)}.choice legend{font:8px sans-serif;letter-spacing:.15em;margin-bottom:9px}.segments{border:0;background:transparent;padding:0;gap:5px}.segments button{min-height:44px;font:15px var(--zc-font);border-radius:0;border:1px solid transparent}.segments button[aria-pressed=true]{border-color:var(--zc-border);background:var(--zc-soft);box-shadow:inset 0 -2px var(--zc-accent)}.switch{padding:0;min-height:41px}.switch-text{font-size:12px}.switch-text small{font-size:10px}.begin{border-radius:0;min-height:51px;font:18px var(--zc-font)}.mixer-box summary{min-height:42px;font-size:11px}.mixer-box summary span{font-size:8px}.setup-foot{font-size:8px}.status:empty{display:none}.preview-note{position:absolute;top:5px;left:50%;transform:translateX(-50%);margin:0;font-size:8px;padding:3px 8px;max-width:90%;width:max-content}.night{z-index:5}.dawn{position:relative;z-index:5}.night .breath .ring{stroke-dasharray:0}.night .breath .ring.inner{stroke-dasharray:1 12}.night .breath svg{filter:drop-shadow(0 0 18px #25312b33)}
@media(max-width:759px){.setup{display:flex;flex-direction:column;padding:0 14px 22px;gap:0;min-height:100dvh}.sleep-intro{min-height:203px;width:100%;padding:23px 10px 16px;gap:7px}.skyline,.sleep-intro .skyline{top:0;height:390px;bottom:auto}.sleep-intro>.eyebrow{font-size:7px;letter-spacing:.15em;margin:0}.setup h1{font-size:38px;max-width:7em;margin:2px 0}.sleep-intro .intro{font-size:11px;max-width:21em;line-height:1.65;margin:0}.sleep-settings{width:100%;padding:19px 20px 18px;gap:13px;align-self:stretch}.bedside-title{padding-bottom:12px}.bedside-title>span{font-size:7px}.bedside-title h2{font-size:21px;margin:6px 0 0}.choice legend{font-size:8px;margin-bottom:6px}.segments button{min-height:44px;font-size:15px}.switch-text{font-size:11px}.switch-text small{font-size:9px}.switch{min-height:35px}.begin{min-height:49px;font-size:17px}.setup-foot{font-size:8px}.mixer-box summary{min-height:40px}.skyline .city-frame{stroke-width:7}.preview-note{top:3px;font-size:7px}.setup .status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.skyline .window{animation:none;opacity:.65}}
[data-motion=reduced] .skyline .window{animation:none;opacity:.65}