:root{--zc-background:#f4f1e9;--zc-surface:#fcfaf4;--zc-ink:#293b32;--zc-muted:#68776b;--zc-accent:#375c47;--zc-accent-ink:#fafcf4;--zc-border:#d8ded2;--zc-soft:#e7ebe0;--zc-radius:12px;--zc-font:Georgia,serif;--zc-night:#040506;--zc-night-line:#1a1f24;--zc-night-ink:#737a82;--zc-night-dim:#4d535a;--zc-night-glow:color-mix(in srgb,var(--zc-accent) 26%,#0b0e11)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--zc-background:#14181a;--zc-surface:#1b2022;--zc-ink:#dfe4dc;--zc-muted:#98a299;--zc-accent:#8fb89c;--zc-accent-ink:#0f1512;--zc-border:#2c3431;--zc-soft:#222a27}}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--zc-background);color:var(--zc-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body[data-stage=night],body[data-stage=dawn]{background:var(--zc-night);color:var(--zc-night-ink)}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--zc-accent);outline-offset:3px}

.preview-note{position:relative;z-index:3;margin:10px auto 0;width:max-content;max-width:calc(100% - 32px);padding:5px 12px;border:1px dashed var(--zc-border);border-radius:999px;font-size:11px;letter-spacing:.3px;color:var(--zc-muted);background:var(--zc-surface);text-align:center}
body[data-stage=dawn] .preview-note{position:absolute;left:0;right:0;top:0;background:transparent;border-color:var(--zc-night-line);color:var(--zc-night-dim)}

/* ---- Setup ---- */
.setup{max-width:440px;margin:0 auto;padding:10px 16px 20px;display:flex;flex-direction:column;gap:12px}
.skyline{display:block;width:100%;max-width:340px;height:auto;margin:2px auto -4px;color:var(--zc-ink)}
.skyline .moon{fill:var(--zc-muted);opacity:.55}.skyline .moon-cut{fill:var(--zc-background)}
.skyline .stars{fill:var(--zc-muted);opacity:.6}
.skyline .roofs.far{fill:var(--zc-ink);opacity:.1}.skyline .roofs.near{fill:var(--zc-ink);opacity:.2}
.skyline .window{fill:var(--zc-accent);opacity:.7}
.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--zc-muted);text-align:center}
.setup h1{font:400 clamp(24px,6.4vw,30px)/1.3 var(--zc-font);margin:-4px 0 0;text-align:center}
.intro{margin:0 auto;max-width:330px;text-align:center;color:var(--zc-muted);font-size:13px;line-height:1.65}
.choice{border:0;margin:0;padding:0;min-width:0}
.choice legend{padding:0;margin-bottom:7px;font-size:12px;color:var(--zc-muted)}
.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:4px;background:var(--zc-soft);border-radius:var(--zc-radius)}
.segments button{min-height:44px;border:1px solid transparent;background:transparent;border-radius:calc(var(--zc-radius) - 3px);font-size:14px;color:var(--zc-muted);padding:6px 4px}
.segments button:hover{color:var(--zc-ink)}
.segments button[aria-pressed=true]{background:var(--zc-surface);color:var(--zc-ink);border-color:var(--zc-border);font-weight:600;box-shadow:0 1px 3px color-mix(in srgb,var(--zc-ink) 12%,transparent)}
.switch{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;border:1px solid var(--zc-border);border-radius:var(--zc-radius);background:var(--zc-surface);cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{flex:none;width:42px;height:24px;border-radius:12px;background:var(--zc-soft);border:1px solid var(--zc-border);position:relative;transition:background .2s}
.switch-track span{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--zc-muted);transition:transform .2s,background .2s}
.switch input:checked+.switch-track{background:var(--zc-accent);border-color:var(--zc-accent)}
.switch input:checked+.switch-track span{transform:translateX(18px);background:var(--zc-accent-ink)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--zc-accent);outline-offset:3px}
.switch-text{display:flex;flex-direction:column;gap:2px;font-size:14px}
.switch-text small{font-size:12px;color:var(--zc-muted)}
.begin{min-height:52px;border:1px solid var(--zc-accent);background:var(--zc-accent);color:var(--zc-accent-ink);border-radius:var(--zc-radius);font-size:16px;letter-spacing:.4px;margin-top:2px}
.begin:hover{filter:brightness(1.06)}
.begin:disabled{opacity:.5;cursor:wait}
.mixer-box{border:1px solid var(--zc-border);border-radius:var(--zc-radius);background:var(--zc-surface)}
.mixer-box summary{min-height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;cursor:pointer;font-size:14px;list-style:none}
.mixer-box summary::-webkit-details-marker{display:none}
.mixer-box summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--zc-muted);border-bottom:1.5px solid var(--zc-muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.mixer-box[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.mixer-box summary span{font-size:12px;color:var(--zc-muted)}
.mixer{display:flex;flex-direction:column;gap:2px;padding:0 14px 10px}
.mix-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,44%) 40px;align-items:center;gap:10px;min-height:44px;font-size:13px}
.mix-row input{width:100%;min-width:0;height:28px;accent-color:var(--zc-accent)}
.mix-row output{font-size:12px;color:var(--zc-muted);text-align:right;font-variant-numeric:tabular-nums}
.status{margin:0;font-size:12px;color:var(--zc-muted);text-align:center;line-height:1.6}
.status:empty{display:none}
.setup-foot{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--zc-muted);text-align:center;line-height:1.6;margin-top:2px}
.setup-foot span:empty{display:none}

/* ---- Night: near-black, nothing bright ---- */
.night{position:fixed;inset:0;background:var(--zc-night);color:var(--zc-night-ink);display:grid;grid-template-rows:auto 1fr auto auto;padding:max(14px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));--zc-fade:1}
.night-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.4px;color:var(--zc-night-dim);min-height:28px;transition:opacity 1.6s}
.breath{align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:18px;opacity:var(--zc-fade)}
.breath svg{width:min(62vw,40vh,260px);height:auto;overflow:visible}
.breath .ring{fill:none;stroke:var(--zc-night-line);stroke-width:1}
.breath .ring.inner{stroke-dasharray:2 5}
.breath .orb{fill:var(--zc-night-glow);opacity:.9}
.breath p{margin:0;min-height:22px;font:400 16px/1.4 var(--zc-font);letter-spacing:.6px;color:var(--zc-night-ink)}
.night-quiet{align-self:center;justify-self:center;margin:0;font:400 15px/1.6 var(--zc-font);color:var(--zc-night-dim);opacity:var(--zc-fade)}
.night-mixer{background:#07090b;border:1px solid var(--zc-night-line);border-radius:var(--zc-radius);padding:6px 14px;margin:0 auto 12px;width:min(100%,420px);color:var(--zc-night-ink)}
.night-mixer .mix-row output{color:var(--zc-night-dim)}
.night-mixer input{-webkit-appearance:none;appearance:none;background:transparent;height:32px}.night-mixer input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#161b1f}.night-mixer input::-moz-range-track{height:4px;border-radius:2px;background:#161b1f}.night-mixer input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#2f3a36;border:1px solid #445049}.night-mixer input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2f3a36;border:1px solid #445049}
.night-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,420px);margin:0 auto;transition:opacity 1.6s}
.night-controls button{min-height:48px;background:transparent;border:1px solid var(--zc-night-line);border-radius:var(--zc-radius);color:var(--zc-night-ink);font-size:13px;padding:4px}
.night-controls button[aria-pressed=false],.night-controls button[aria-expanded=false]{color:var(--zc-night-dim)}
.night-controls button[aria-pressed=true],.night-controls button[aria-expanded=true]{border-color:#2a3137}
.night :focus-visible{outline:1px solid #5d666d;outline-offset:3px}
.night.resting .night-controls,.night.resting .night-top{opacity:.14}
.night.resting .night-controls:has(:focus-visible){opacity:1}
.night.paused .breath svg{opacity:.35}.night.paused .breath p{color:var(--zc-night-dim)}

/* ---- Dawn: still dark; one optional tap ---- */
.dawn{max-width:440px;min-height:100dvh;margin:0 auto;padding:28px 16px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--zc-night-ink)}
.dawn-moon{width:36px;height:36px}.dawn-moon circle{fill:#2b3136}.dawn-moon .cut{fill:var(--zc-night)}
.dawn h2{margin:0;font:400 26px/1.3 var(--zc-font);color:#8a9097;outline:none}
.dawn>p{margin:0;max-width:320px;line-height:1.7;font-size:14px}
.feelings{border:0;padding:0;margin:14px 0 0;width:100%;min-width:0}
.feelings legend{padding:0;margin:0 auto 12px;font-size:14px}
.feelings legend small{color:var(--zc-night-dim);font-size:12px;margin-left:4px}
.faces{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.faces button{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:84px;padding:8px 2px;background:transparent;border:1px solid transparent;border-radius:var(--zc-radius);color:var(--zc-night-ink)}
.faces button:hover:not(:disabled){border-color:var(--zc-night-line);color:var(--zc-night-ink)}
.faces svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round}
.faces svg .eye{fill:currentColor;stroke:none}
.faces span{font-size:11px;line-height:1.2}
.faces button[aria-pressed=true]{color:#a3aab0;border-color:#2e363c;background:#0a0d10}
.faces button[aria-pressed=true] span{font-weight:600}
.faces button:disabled:not([aria-pressed=true]){opacity:.35;cursor:default}
.dawn :focus-visible{outline:1px solid #5d666d;outline-offset:3px}
.thanks{min-height:22px;font-size:13px;color:var(--zc-night-ink)}
.earned{margin:0;font-size:13px;color:#8d9a93}.earned:empty{display:none}
.again{min-height:48px;padding:0 22px;background:transparent;border:1px solid var(--zc-night-line);border-radius:var(--zc-radius);color:var(--zc-night-ink);font-size:14px}

@media (min-width:720px){
  .setup{padding-top:22px;gap:14px}
  .skyline{max-width:380px}
}
@media (max-height:700px){.skyline{max-width:250px}.intro{display:none}.setup{gap:10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
[data-motion=reduced] *{transition:none!important;animation:none!important}

/* A window over the sleeping city; a small ritual before the lights go out. */
:root{--zc-sleep-sky:color-mix(in srgb,var(--zc-accent) 12%,#101b28);--zc-sleep-moon:color-mix(in srgb,var(--zc-accent) 18%,#d8deca);--zc-sleep-far:color-mix(in srgb,var(--zc-accent) 12%,#263244);--zc-sleep-near:color-mix(in srgb,var(--zc-accent) 8%,#0b131c);--zc-sleep-lamp:#c6b382}
.setup{max-width:1040px;padding:36px 30px;gap:48px;min-height:90dvh}.sleep-intro{display:flex;flex-direction:column;gap:16px;min-width:0}.skyline{width:100%;max-width:none;margin:0 0 10px;border-radius:50% 50% 8px 8px;overflow:hidden;box-shadow:0 18px 70px -48px var(--zc-ink)}.skyline .sky-wash,.skyline .moon-cut{fill:var(--zc-sleep-sky)}.skyline .moon-halo{fill:var(--zc-sleep-moon);opacity:.045}.skyline .moon{fill:var(--zc-sleep-moon);opacity:.9}.skyline .stars{fill:var(--zc-sleep-moon);opacity:.6}.skyline .roofs.far{fill:var(--zc-sleep-far);opacity:1}.skyline .roofs.near{fill:var(--zc-sleep-near);opacity:1}.skyline .window{fill:var(--zc-sleep-lamp);opacity:.65}.skyline .river{fill:var(--zc-sleep-far)}.skyline .river-lines{stroke:var(--zc-sleep-moon);opacity:.18;stroke-width:1;fill:none}.sleep-intro>.eyebrow{text-align:left;font-size:9px}.setup h1{text-align:left;font-size:clamp(35px,4.5vw,55px);line-height:1.08;letter-spacing:-.035em}.intro{max-width:30em;margin:0;text-align:left;font-size:14px;line-height:1.8}.sleep-settings{display:flex;flex-direction:column;gap:23px}.choice legend{font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}.segments{background:transparent;border-bottom:1px solid var(--zc-border);padding:0 0 8px;border-radius:0;gap:8px}.segments button{font-family:var(--zc-font);font-size:20px;min-height:53px;border-radius:99px}.segments button[aria-pressed=true]{background:var(--zc-soft);border-color:var(--zc-accent);font-weight:400;box-shadow:none}.switch{border:0;border-radius:0;padding:8px 0;background:transparent}.switch-text{font-size:13px}.switch-text small{font-size:11px}.begin{min-height:58px;border-radius:99px;font:20px var(--zc-font);margin-top:0}.mixer-box{background:transparent;border-width:1px 0;border-radius:0}.mixer-box summary{padding:0;min-height:50px}.mixer-box summary span{font-size:10px}.mixer-box .mixer{padding-left:0;padding-right:0}.setup-foot{font-size:10px;line-height:1.7}.night-top{text-transform:uppercase;font-size:9px;letter-spacing:.15em}.breath svg{width:min(70vw,46vh,340px)}.breath .ring{stroke-width:.65}.breath .ring.inner{stroke-dasharray:1 8}.night-controls button{border-radius:99px;font-size:11px}.dawn h2{font-size:40px;letter-spacing:-.03em}.dawn-moon{width:58px;height:58px}
@media(min-width:760px){.setup{display:grid;grid-template-columns:1.1fr 1fr;align-items:center}.sleep-settings{padding:20px 0}.sleep-intro .skyline{max-height:330px}}
@media(max-width:759px){.setup{max-width:470px;padding:18px 22px 24px;gap:20px;min-height:0}.sleep-intro{gap:8px;position:relative;padding-right:108px;min-height:136px}.skyline{position:absolute;right:0;top:0;width:96px;height:136px;margin:0;border-radius:50px 50px 6px 6px;object-fit:cover}.sleep-intro>.eyebrow{font-size:8px;letter-spacing:1.3px;margin-top:7px}.setup h1{font-size:31px;line-height:1.1}.intro{font-size:11px;line-height:1.5;display:block}.sleep-settings{gap:15px}.choice legend{font-size:9px;margin-bottom:6px}.segments button{min-height:46px;font-size:17px}.segments{padding-bottom:5px}.switch{min-height:43px;padding:0}.begin{min-height:51px;font-size:18px}.mixer-box summary{min-height:44px}.setup-foot{font-size:9px}.preview-note{font-size:9px;padding:4px 9px}.skyline .stars{opacity:.8}}