:root{--zc-background:#edf0ee;--zc-surface:#fbfdf8;--zc-ink:#273a38;--zc-muted:#70807c;--zc-accent:#356764;--zc-accent-ink:#fffef3;--zc-border:#c9d6ce;--zc-soft:#e0e9e2;--zc-scene-top:#182f48;--zc-scene-bottom:#426b7e;--zc-scene-light:#eaf3dc}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:14px/1.6 system-ui,sans-serif}.sound-space{width:min(1320px,100%);margin:auto;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:0;isolation:isolate}.sound-space>header{grid-column:1;grid-row:1;z-index:1;align-self:start;padding:39px 35px;pointer-events:none;color:#edf4ed}.eyebrow{font:8px/1.7 ui-monospace,monospace;letter-spacing:.12em;color:var(--zc-muted)}header .eyebrow{color:#b3ccd2;font-size:8px}h1{font:300 clamp(40px,5vw,65px)/1.03 system-ui,sans-serif;letter-spacing:-.06em;margin:18px 0}.intro{font-size:11px;color:#c4d7da;line-height:1.8;margin:0}.orb{grid-column:1/-1;grid-row:1/3;position:relative;min-height:590px;overflow:hidden;border-radius:3px;background:var(--zc-scene-top);z-index:0;isolation:isolate}.landscape{position:absolute;inset:0;width:100%;height:100%}.sun{fill:#f4e9c0;opacity:.8}.sky-stars{fill:#c7e6e9;opacity:.3}.mood-wind{--zc-scene-top:#183b3e;--zc-scene-bottom:#788c7a}.mood-stream{--zc-scene-top:#163d53;--zc-scene-bottom:#6da4ac}.mood-wind .sun{fill:#ecdfb1;opacity:.85}.mood-stream .sun{fill:#f7e5a5}.mood-wind .sky-stars,.mood-stream .sky-stars{opacity:.12}.rain-scene,.wind-scene,.stream-scene{display:none}.mood-rain .rain-scene,.mood-wind .wind-scene,.mood-stream .stream-scene{display:block}.rain-mist{stroke:#b4c9c6;stroke-width:16;fill:none;opacity:.055}.rain-lines{fill:none;stroke:#acc8d2;stroke-width:1.1;opacity:.4}.wind-forest{fill:#274a46;stroke:#162f32;stroke-width:1.3;stroke-linejoin:round}.wind-forest g:nth-child(2n){fill:#35584e}.wind-lines{fill:none;stroke:#b9ceb9;stroke-width:1;opacity:.2}.wind-leaves{opacity:.6}.fall-lines{fill:none;stroke:#d7f2de;stroke-width:3;opacity:.45}.stream-ripples{fill:none;stroke:#a6d9d3;stroke-width:1.3;opacity:.45}.orb.playing .rain-lines{animation:rain 2.8s linear infinite}.orb.playing .wind-lines,.orb.playing .wind-leaves{animation:wind 9s ease-in-out infinite}.orb.playing .stream-ripples{animation:water 5s ease-in-out infinite}.orb.playing .fall-lines{animation:water 3s ease-in-out infinite}.scene-label{position:absolute;left:35px;bottom:31px;display:flex;flex-direction:column;gap:8px;color:#e9f1df;pointer-events:none}.scene-label .eyebrow{color:#b1c8c5;font-size:7px}.scene-label strong{display:none;font:300 28px/1.2 system-ui,sans-serif;letter-spacing:-.035em}.scene-label>span:last-child,.playing-label{font:8px ui-monospace,monospace;letter-spacing:.03em;color:#b1c8c5}.mood-rain .rain-name,.mood-wind .wind-name,.mood-stream .stream-name{display:block}.playing-label{display:none}.playing .playing-label{display:block}.playing .resting-label{display:none}.listening-controls{grid-column:2;grid-row:1/3;z-index:1;align-self:center;background:var(--zc-surface);color:var(--zc-ink);border:1px solid var(--zc-border);padding:23px 21px;margin:28px 28px 28px 0;border-radius:7px;box-shadow:0 10px 35px #102b3933}.sound-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:14px 0 9px}button{min-height:46px;border:1px solid var(--zc-border);border-radius:5px;padding:10px 5px;background:var(--zc-background);color:var(--zc-ink);font:10px system-ui,sans-serif;cursor:pointer}button:disabled{opacity:.5;cursor:default}.sound-options button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.sound-options b{align-self:flex-start;font:8px ui-monospace,monospace;color:var(--zc-muted)}.sound-options svg{width:32px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.sound-options button[aria-pressed=true]{background:var(--zc-soft);border-color:var(--zc-accent);box-shadow:inset 0 -2px var(--zc-accent)}.sound-meter{height:47px;display:flex;justify-content:center;align-items:center;gap:3px;margin:10px 0 12px}.sound-meter i{width:3px;height:calc(var(--zc-meter)*36px);border-radius:2px;background:var(--zc-accent);opacity:.32;transform:scaleY(.35);transition:opacity .3s}.sound-space[data-playing=true] .sound-meter i{opacity:.7;animation:meter 2.1s ease-in-out var(--zc-delay) infinite}.play{width:100%;min-height:49px;border-radius:50px;background:var(--zc-accent);color:var(--zc-accent-ink);border-color:var(--zc-accent);font-size:11px}.volume{display:flex;align-items:center;gap:10px;font-size:9px;color:var(--zc-muted);margin:14px 0 8px}.volume input{width:100%;min-width:0;flex:1;min-height:44px;accent-color:var(--zc-accent)}.volume span:last-child{min-width:29px}.rest-settings{border-top:1px solid var(--zc-border);font-size:10px;color:var(--zc-muted)}summary{min-height:44px;padding:12px 0;cursor:pointer}.sleep-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:5px 0 10px}.sleep-options>span{grid-column:1/-1}.sleep-options button{font-size:9px;min-height:44px;padding:6px 3px}.background-choice{display:flex;gap:7px;align-items:center;min-height:44px;font-size:9px}.background-choice input{width:16px;height:16px;accent-color:var(--zc-accent)}#timer,#status{font-size:9px;line-height:1.6;color:var(--zc-muted);margin:7px 0 0}#timer:empty{display:none}footer{grid-column:1/-1;font-size:9px;color:var(--zc-muted);padding-top:15px;letter-spacing:.04em}:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}@keyframes rain{from{transform:translate(6px,-18px)}to{transform:translate(-6px,18px)}}@keyframes wind{50%{transform:translateX(14px);opacity:.4}}@keyframes water{50%{opacity:.25}}@keyframes meter{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media(max-width:700px){.sound-space{padding:14px;grid-template-columns:1fr;gap:15px}.sound-space>header{grid-column:1;grid-row:1;padding:23px 22px;max-width:250px}header .eyebrow{font-size:6px;letter-spacing:.1em}h1{font-size:37px;margin:12px 0}.intro{font-size:9px;line-height:1.7}.orb{grid-column:1;grid-row:1/3;min-height:330px;max-height:330px;border-radius:4px}.landscape{width:165%;max-width:none;left:-20%;height:100%}.scene-label{left:22px;bottom:20px;gap:6px}.scene-label strong{font-size:22px}.scene-label .eyebrow{font-size:6px}.scene-label>span:last-child,.playing-label{font-size:7px}.listening-controls{grid-column:1;grid-row:3;margin:0;padding:0;background:transparent;border:0;box-shadow:none}.listening-controls>.eyebrow{display:none}.sound-options{margin:0 0 10px;gap:7px}.sound-options button{flex-direction:row;flex-wrap:wrap;gap:7px;font-size:9px;min-height:47px;padding:8px 5px}.sound-options b{display:none}.sound-options svg{width:24px;height:20px}.sound-meter{display:none}.play{min-height:47px;font-size:11px}.volume{margin:6px 0 0;font-size:9px}.rest-settings{font-size:10px;margin-top:3px}.sleep-options{margin-top:4px}.sleep-options button{font-size:9px}#status,#timer{font-size:9px}footer{padding-top:0;font-size:8px}.sky-stars{opacity:.18}}
[data-motion=reduced] *,[data-motion=reduced] *::before{animation:none!important;transition:none!important}[data-motion=reduced] .sound-space[data-playing=true] .sound-meter i{transform:scaleY(.7)}@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}.sound-space[data-playing=true] .sound-meter i{transform:scaleY(.7)}}

/* The soundscape takes elastic space; playback stays above the local settings scroll. */
html,body,#app{height:100%;overflow:hidden}
.sound-space{height:100dvh;max-height:100dvh;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;padding-bottom:7px}
.orb{height:100%;min-height:0}
.listening-controls{max-height:calc(100% - 25px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.listening-controls:focus-visible{outline:2px solid var(--zc-accent);outline-offset:-2px}
footer{padding-top:5px}
@media(max-width:700px){.sound-space{grid-template-rows:minmax(0,1fr) minmax(154px,auto) auto;gap:5px;padding:6px 10px 5px}.sound-space>header{padding:13px 16px}.sound-space h1{font-size:clamp(28px,8vw,35px);margin:4px 0}.orb{grid-row:1;min-height:0;max-height:none}.listening-controls{grid-row:2;max-height:min(42dvh,290px);min-height:154px;padding:0 2px}.sound-options{margin-bottom:5px}.sound-options button{min-height:40px}.play{min-height:42px}.volume{margin:2px 0 0}.rest-settings summary{min-height:38px;padding:8px 0}footer{grid-row:3;padding-top:2px}}