:root{--zc-background:#f4f1e9;--zc-surface:#fcfaf4;--zc-ink:#293b32;--zc-muted:#5f6f63;--zc-accent:#375c47;--zc-accent-ink:#fafcf4;--zc-border:#d8ded2;--zc-soft:#e7ebe0;--zc-radius:12px;--zc-font:Georgia,serif;--zc-globe:260px;--zc-space:#03060d}
@media (prefers-color-scheme:dark){:root:not([data-mode]){--zc-background:#121614;--zc-surface:#1a201d;--zc-ink:#e3e8e2;--zc-muted:#9aa79d;--zc-accent:#8fb89c;--zc-accent-ink:#0f1411;--zc-border:#2c3530;--zc-soft:#222a26}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--zc-background);color:var(--zc-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.ov{height:100vh;height:100dvh;max-width:1180px;margin:0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.where{display:flex;flex-direction:column;gap:3px;min-width:0}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zc-muted)}
#place{font:400 18px/1.3 var(--zc-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter{position:relative;width:48px;height:48px;flex:none}
.meter svg{width:48px;height:48px;transform:rotate(-90deg)}
.meter circle{fill:none;stroke-width:3}
.meter .track{stroke:var(--zc-border)}
.meter .fill{stroke:var(--zc-accent);stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:125.66;transition:stroke-dashoffset 1.2s linear}
.meter span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;color:var(--zc-muted)}
.stage{position:relative;flex:1;min-height:240px;border-radius:calc(var(--zc-radius) * 1.6);overflow:hidden;background:var(--zc-space);isolation:isolate}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pill{position:absolute;top:12px;left:50%;transform:translateX(-50%);margin:0;padding:5px 12px;border-radius:999px;font-size:11px;letter-spacing:.02em;white-space:nowrap;color:#dfe7f2;background:rgba(3,6,13,.7);border:1px solid rgba(255,255,255,.16);z-index:1}
.caption{position:absolute;left:20px;right:20px;bottom:20px;margin:0 auto;max-width:34em;text-align:center;color:#eef2f8;font:400 16px/1.6 var(--zc-font);text-shadow:0 1px 14px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6);opacity:0;transition:opacity 2.4s ease;pointer-events:none}
.caption.show{opacity:.94}
.loading{position:absolute;left:0;right:0;top:50%;margin:0;text-align:center;color:#b9c6d8;font:400 14px/1.4 var(--zc-font);letter-spacing:.04em;transition:opacity 1.2s}
.loading.done{opacity:0;pointer-events:none}
.pacer{position:absolute;left:50%;top:var(--zc-globe-y,50%);width:var(--zc-globe);height:var(--zc-globe);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity 1.6s}
.pacer.on{opacity:1}
.pacer i{position:absolute;inset:-5%;border-radius:50%;border:1.5px solid rgba(206,226,255,.55);box-shadow:0 0 24px rgba(150,190,255,.18);animation:pace 10s ease-in-out infinite}
@keyframes pace{0%{transform:scale(.93);opacity:.3}40%{transform:scale(1.05);opacity:.95}100%{transform:scale(.93);opacity:.3}}
.breath{position:absolute;left:0;right:0;top:14px;height:20px;margin:0;opacity:0;transition:opacity 1.6s;pointer-events:none;color:#dfe8f5;font:400 14px/20px var(--zc-font);letter-spacing:.06em;text-align:center}
.breath.on{opacity:1}
.breath span{position:absolute;left:0;right:0;animation:say-in 10s ease-in-out infinite}
.breath .out{animation-name:say-out}
@keyframes say-in{0%,34%{opacity:.9}42%,94%{opacity:0}100%{opacity:.9}}
@keyframes say-out{0%,38%{opacity:0}46%,90%{opacity:.9}98%,100%{opacity:0}}
.has-pill .breath{top:44px}
.idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:#eef2f8;background:rgba(3,6,13,.62);font:400 16px/1.5 var(--zc-font)}
.idle[hidden]{display:none}
.idle p{margin:0}
.panel{display:flex;flex-direction:column;gap:10px}
.progress{margin:0;text-align:center;font-size:13px;line-height:1.5;color:var(--zc-muted);min-height:1.5em}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
button{font:inherit;cursor:pointer;color:var(--zc-ink);background:var(--zc-surface);border:1px solid var(--zc-border);border-radius:var(--zc-radius);min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s}
.controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 4px;font-size:12.5px;line-height:1.2;min-width:0}
.controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.controls button[aria-pressed=true]{background:var(--zc-soft);border-color:var(--zc-accent)}
.controls button[aria-pressed=true] svg{opacity:1;color:var(--zc-accent)}
#sound[aria-pressed=false] .wave{opacity:.25}
button:hover{border-color:var(--zc-accent)}
.idle button{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35);padding:10px 22px}
:focus-visible{outline:2px solid var(--zc-accent);outline-offset:3px}
.idle button:focus-visible{outline-color:#fff}
.volume{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--zc-muted);min-height:44px;padding:0 4px}
.volume[hidden]{display:none}
.volume input{flex:1;min-width:0;height:44px;accent-color:var(--zc-accent)}
#volume-value{width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.status{margin:0;text-align:center;font-size:11.5px;line-height:1.5;color:var(--zc-muted);min-height:1.5em}
@media (min-width:900px){
  .ov{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);column-gap:20px;row-gap:12px;padding:20px 24px}
  .top{grid-column:1 / -1}
  .stage{grid-row:2}
  .panel{grid-row:2;justify-content:center;gap:14px}
  .controls{grid-template-columns:repeat(2,1fr)}
  .controls button{flex-direction:row;gap:10px;justify-content:flex-start;padding:10px 14px;font-size:14px;min-height:52px}
  .progress{text-align:left;font-size:14px}
  .status{text-align:left}
  .caption{font-size:19px;bottom:28px}
}
@media (max-height:600px){.ov{gap:6px;padding-top:8px}.top{min-height:40px}#place{font-size:16px}.progress{display:none}.pill{left:12px;top:10px;transform:none}.has-pill .breath{top:14px}}
[data-motion=reduced] .pacer i{animation-duration:10s;animation-name:pace-still}
@keyframes pace-still{0%,100%{opacity:.25}40%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.pacer i{animation-name:pace-still}.caption,.loading,.pacer,.breath{transition-duration:.01s}}

/* The planet fills the room. Navigation stays in the quiet margins. */
:root{--zc-orbit-ink:#edf1f5;--zc-orbit-muted:#a9b8c8;--zc-orbit-panel:color-mix(in srgb,var(--zc-space) 80%,transparent);--zc-orbit-border:color-mix(in srgb,var(--zc-orbit-ink) 18%,transparent)}
body{background:var(--zc-space)}.ov{position:relative;isolation:isolate;display:flex;max-width:none;min-height:540px;height:100dvh;padding:32px;gap:0;color:var(--zc-orbit-ink)}
.stage{position:absolute;inset:0;border:0;border-radius:0;z-index:-1;min-height:0}.top{align-items:flex-start;min-height:0}.where{gap:8px;max-width:45%}.where .eyebrow{color:var(--zc-orbit-muted);font-size:9px}.orbit-brand{margin-bottom:20px}.where h1{font:400 clamp(34px,4.2vw,64px)/1.05 var(--zc-font);letter-spacing:-.045em;margin:0 0 24px}.where #place{font-size:18px;white-space:normal}.where #side{font-size:9px;letter-spacing:.13em}.meter{width:52px;height:52px}.meter span{color:var(--zc-orbit-muted)}.meter .track{stroke:var(--zc-orbit-border)}.meter .fill{stroke:var(--zc-orbit-ink)}
.panel{margin-top:auto;max-width:340px;background:var(--zc-orbit-panel);border:1px solid var(--zc-orbit-border);border-radius:calc(var(--zc-radius)*1.5);padding:20px;gap:13px;backdrop-filter:blur(16px)}.orbit-note{margin:0;font:24px/1.3 var(--zc-font);letter-spacing:-.02em}.orbit-note span{display:block;color:var(--zc-orbit-muted);font-size:16px;margin-top:4px}.progress{font-size:11px;line-height:1.7;color:var(--zc-orbit-muted);text-align:left}.controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.controls button{background:transparent;color:var(--zc-orbit-muted);border:1px solid var(--zc-orbit-border);border-radius:calc(var(--zc-radius)*.7);flex-direction:column;font-size:10px;padding:9px 4px;gap:6px;min-height:60px;justify-content:center}.controls button[aria-pressed=true]{background:color-mix(in srgb,var(--zc-orbit-ink) 12%,transparent);border-color:var(--zc-orbit-muted);color:var(--zc-orbit-ink)}.controls button[aria-pressed=true] svg{color:var(--zc-orbit-ink)}.controls button:hover{border-color:var(--zc-orbit-ink)}.status,.volume{color:var(--zc-orbit-muted);font-size:10px}.status:empty{display:none}.caption{max-width:29em;left:43%;right:5%;bottom:12%;font-size:20px}.pacer{left:var(--zc-globe-x,50%)}.pill{left:auto;right:24px;top:100px;transform:none;font-size:9px;border-color:var(--zc-orbit-border);color:var(--zc-orbit-muted);background:var(--zc-orbit-panel)}.breath{left:34%;right:0;top:auto;bottom:22%;font-size:16px}.has-pill .breath{top:auto}.loading{left:35%;top:47%}
@media(max-width:899px){.ov{padding:22px 20px;min-height:560px}.where{max-width:82%;gap:5px}.where h1{font-size:32px;margin:0 0 10px;line-height:1.03}.orbit-brand{margin-bottom:8px;font-size:8px!important}.where #place{font-size:13px}.where #side{font-size:8px}.meter{transform:scale(.85);transform-origin:top right}.panel{max-width:500px;width:100%;align-self:center;padding:12px 14px;gap:10px}.orbit-note{display:none}.progress{font-size:10px;line-height:1.4;text-align:center;min-height:0}.controls button{min-height:52px;font-size:10px;gap:4px}.controls svg{width:18px;height:18px}.caption{bottom:34%;left:24px;right:24px;font-size:15px}.pill{top:185px;left:50%;right:auto;transform:translateX(-50%);padding:4px 9px;max-width:90vw}.breath,.has-pill .breath{left:0;bottom:34%;top:auto;font-size:13px}.loading{left:0;top:47%}.status{font-size:9px;text-align:center}.volume{min-height:32px}.volume input{height:32px}}
@media(max-height:600px) and (min-width:900px){.ov{padding:20px}.where h1{font-size:38px;margin-bottom:12px}.orbit-brand{margin-bottom:8px}.panel{padding:14px}.orbit-note{display:none}.pill{top:80px}}
@media(prefers-reduced-motion:reduce){.meter .fill{transition:none}.pacer i{animation:none;opacity:.5}}
[data-motion=reduced] .meter .fill{transition:none}[data-motion=reduced] .pacer i{animation:none;opacity:.5}