:root{--ink:#2b3048;--paper:#ffffffb8;--paper-strong:#ffffffdb;--accent:#6a8fd8}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#bfe2f7;margin:0;font-family:Nunito,system-ui,sans-serif;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}.panel{background:var(--paper);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-radius:28px;width:min(440px,100% - 32px);padding:36px 32px 28px;transition:opacity 1.2s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #283c6e2e}.panel.fade{opacity:0;pointer-events:none}h1{letter-spacing:.04em;margin:0;font-size:56px;font-weight:300}h2{margin:0 0 12px;font-size:30px;font-weight:300}.sub{opacity:.6;letter-spacing:.12em;text-transform:lowercase;margin:0 0 18px}.lead{margin:0 0 22px;line-height:1.55}.hint,.count{opacity:.55;margin:14px 0 0;font-size:13px}.durations{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px;display:flex}.durations button{background:#fff9;border-radius:999px;padding:8px 14px;font-size:14px}.durations button.on{background:var(--accent);color:#fff}.primary{background:var(--ink);color:#fff;letter-spacing:.05em;border-radius:999px;padding:12px 38px;font-size:17px}#phase{text-shadow:0 1px 12px #fff9;pointer-events:none;max-width:min(420px,100% - 56px);transition:opacity 2s;position:fixed;bottom:44px;left:28px}#phase.fade{opacity:0}#phase .name{letter-spacing:.03em;font-size:26px;font-weight:300}#phase .fact{margin:6px 0 0;font-size:15px;line-height:1.55}body.night #phase{color:#eef0ff;text-shadow:0 1px 12px #00001e99}#controls{gap:8px;display:flex;position:fixed;top:18px;right:18px}#controls button{background:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:50%;width:40px;height:40px;font-size:16px}#controls button.on{background:var(--accent);color:#fff}.card{background:var(--paper-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;width:min(300px,100% - 36px);padding:16px 18px;font-size:14px;position:fixed;top:68px;right:18px}.card label{justify-content:space-between;align-items:center;gap:12px;margin:6px 0;display:flex}.card label.row{justify-content:flex-start}.card input[type=range]{width:160px;accent-color:var(--accent)}#science dl{grid-template-columns:1fr auto;gap:6px 12px;margin:0;display:grid}#science dt,#science dt small{opacity:.7}#science dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:600}#breath{letter-spacing:.2em;color:#fff;text-shadow:0 1px 14px #283c6e80;pointer-events:none;font-size:20px;font-weight:300;position:fixed;top:16%;left:50%;transform:translate(-50%)}#hint{background:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;pointer-events:none;border-radius:999px;max-width:calc(100% - 220px);padding:8px 16px;font-size:14px;transition:opacity 2s;position:fixed;top:22px;left:50%;transform:translate(-50%)}#hint.fade{opacity:0}@media (width<=600px){#hint{border-radius:16px;max-width:calc(100% - 32px);top:70px}}#showcase{background:var(--ink);color:#fff;white-space:pre;pointer-events:none;z-index:5;border-radius:999px;padding:8px 16px;font-size:14px;position:fixed;top:22px;left:50%;transform:translate(-50%)}@media (width<=600px){#showcase{white-space:normal;text-align:center;border-radius:16px;width:calc(100% - 32px);top:auto;bottom:14px}}#note{background:var(--paper-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:left;pointer-events:none;border-radius:18px;width:min(380px,100% - 56px);padding:12px 18px;font-size:14px;line-height:1.5;transition:opacity 2s;position:fixed;bottom:44px;right:28px}#note.fade{opacity:0}@media (width<=600px){#note{width:calc(100% - 32px);top:66px;bottom:auto;right:16px}#breath{top:27%}}.seen{margin:0 0 6px;line-height:1.5}#breath{flex-direction:column;align-items:center;gap:4px;display:flex}#breath .count{letter-spacing:.1em;opacity:.75;font-variant-numeric:tabular-nums;font-size:14px}#timeline{background:#ffffff40;height:4px;position:fixed;bottom:0;left:0;right:0}#progress{background:#fffc;width:0;height:100%}#markers span{background:#ffffff8c;border-radius:1px;width:2px;height:10px;position:absolute;top:-3px}@media (width<=600px){h1{font-size:44px}#phase{max-width:calc(100% - 32px);bottom:28px;left:16px}#phase .fact{font-size:14px}}