.foz-page{max-width:1400px;margin:auto}.foz-heading{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:8px 0 20px}.foz-heading span{font-size:10px;letter-spacing:.18em}.foz-stage{--foz-gold:#f1d18a;position:relative;isolation:isolate;min-height:780px;min-height:min(880px,calc(100svh - 70px));border:1px solid #bd99634d;border-radius:28px;overflow:hidden;color:#fff5dc;background:#101e2d;display:flex;flex-direction:column;justify-content:space-between;padding:24px;box-shadow:0 24px 80px #07122133}.foz-world{position:absolute;inset:0;z-index:-2;background:linear-gradient(#07131d22,#07131d66 45%,#07131df5),url('/living-city.webp') center/cover;transition:background 2s}.foz-stage[data-scene=river] .foz-world{background:linear-gradient(#08282d22,#08232a77 45%,#061b22f5),url('/art-crystal-sea.webp') center/cover}.foz-stage[data-scene=stars] .foz-world{background:linear-gradient(#13142b22,#13142b77 45%,#0c1221f5),url('/art-stars.webp') center/cover}.foz-stage[data-scene=river]{--foz-gold:#b9e4dd}.foz-stage[data-scene=stars]{--foz-gold:#d2c6ff}.foz-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 35%,transparent 0deg 12deg,#fff6c412 15deg 18deg,transparent 22deg 30deg);animation:foz-rays 100s linear infinite}.foz-horizon{position:absolute;inset:15% -15% 30%;background:radial-gradient(ellipse,#fff8da99,transparent 60%);opacity:.5;filter:blur(22px);animation:foz-breathe 9s ease-in-out infinite}.foz-orbit{position:absolute;top:35%;left:50%;width:min(65vw,500px);aspect-ratio:1;border:1px solid #ffe5ad55;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 35px #e9cd8c15;animation:foz-breathe 12s ease-in-out infinite}.orbit-two{width:min(80vw,620px);border-color:#fff3}.orbit-three{width:min(95vw,740px);border-style:dotted}.foz-dust{position:absolute;inset:0;background-image:radial-gradient(circle,#fff8 1px,transparent 2px),radial-gradient(circle,#f2d19c77 1px,transparent 2px);background-size:83px 117px,129px 173px;background-position:15px 20px,40px 70px;opacity:.3;animation:foz-drift 35s linear infinite}.foz-stage-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:.16em}.foz-stage button{color:#fff5dc;background:#10202eaa;border:1px solid #e9d3a45e;border-radius:24px;min-height:44px;padding:10px 18px}.foz-stage button:hover{background:#354555cc}.foz-centre{text-align:center;max-width:720px;margin:60px auto 25px}.foz-kicker{font-size:10px;letter-spacing:.3em;color:var(--foz-gold)}.foz-centre h1{font:clamp(45px,7.5vw,88px)/1.06 Georgia,serif;letter-spacing:-.04em;color:#fff9e9;margin:20px 0;text-shadow:0 0 35px #ffebc36e}.foz-centre h1 em{color:var(--foz-gold);font-weight:normal}.foz-centre p{font-size:15px;line-height:1.8;color:#fff0d6}.foz-stage .foz-primary{background:#e6cb8b;color:#17232b;border-color:#f6e2b5;box-shadow:0 0 35px #f1dba344;margin-top:16px}.foz-scripture{text-align:center;max-width:720px;margin:24px auto}.foz-scripture>span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--foz-gold)}.foz-scripture blockquote{font:clamp(19px,2.5vw,26px)/1.65 Georgia,serif;margin:15px 0}.foz-scripture p{font-size:11px;letter-spacing:.07em}.foz-transport{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;background:#07141b99;border:1px solid #ffe7b526;padding:14px;border-radius:20px}.foz-transport label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}.foz-transport input{width:110px;accent-color:#ddc17d}.foz-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.foz-scenes button{text-align:left;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:130px}.foz-scenes button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 25px #cba45c18}.foz-scenes small{display:block;font-size:9px;letter-spacing:.12em;color:var(--gold)}.foz-scenes strong{display:block;font:22px Georgia,serif;margin:10px 0}.foz-scenes span{font-size:12px;color:var(--muted)}.foz-bottom{padding:20px 0}.foz-note{font-size:11px;color:var(--muted);max-width:850px}.foz-launch{display:block;padding:30px;margin:20px 0;border:1px solid #b89b6555;border-radius:18px;background:linear-gradient(100deg,#0e2030ee,#152c38cc),url('/living-city.webp') center/cover;color:#fff2da!important;text-decoration:none}.foz-launch>span{font-size:10px;letter-spacing:.14em;color:#e8d2a1}.foz-launch>strong{display:block;font:36px Georgia,serif;margin:12px 0}.foz-launch p{max-width:600px;margin:0;font-size:14px;color:#d4dbe0}.foz-launch b{float:right;font-weight:normal}.foz-stage.foz-still .foz-world *,.reduced-motion .foz-world *{animation:none!important}.foz-stage:fullscreen{border-radius:0;width:100vw;height:100dvh;min-height:100dvh;overflow:auto;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}@keyframes foz-rays{to{transform:rotate(360deg)}}@keyframes foz-breathe{50%{opacity:.35}}@keyframes foz-drift{to{background-position:15px -97px,40px -103px}}@media(prefers-reduced-motion:reduce){.foz-world *{animation:none!important}.foz-world{transition:none}}@media(max-width:650px){.foz-scenes{grid-template-columns:1fr}.foz-scenes button{min-height:100px;padding:18px}.foz-stage{padding:18px;min-height:790px}.foz-centre{margin:42px auto 20px}.foz-stage-top{letter-spacing:.05em}.foz-transport label{width:100%;justify-content:center}.foz-transport input{width:160px}.foz-heading>span{font-size:9px}.foz-launch>strong{font-size:29px}}@media(max-height:600px) and (min-width:651px){.foz-stage{min-height:760px}}
.foz-world,.foz-stage[data-scene=deep] .foz-world,.foz-stage[data-scene=roar] .foz-world,.foz-stage[data-scene=accord] .foz-world{background:radial-gradient(ellipse at 50% 48%,#6b4b294d,transparent 56%),linear-gradient(150deg,#080f20,#151a2c 60%,#10242e)}.foz-stage[data-scene=deep]{--foz-gold:#abc9e6}.foz-stage[data-scene=roar]{--foz-gold:#f8c987}.foz-stage[data-scene=accord]{--foz-gold:#d9ccf4}#foz-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}.foz-rays{opacity:.35}.foz-centre{pointer-events:none}.foz-centre button{pointer-events:auto}.foz-voices{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:10px 0}.foz-voices button{font-size:11px;border-color:#e6c58e55;box-shadow:0 0 14px #f7d78b0d}.foz-voices button:active{background:#ddbb78!important;color:#121c27;box-shadow:0 0 30px #f6ce8c66}.foz-scenes{grid-template-columns:repeat(4,1fr)}.foz-scenes strong{font-size:20px}.foz-research{padding:20px;border:1px solid var(--line);border-radius:14px;margin:20px 0}.foz-research p,.foz-research li{font-size:13px;line-height:1.8}.foz-stage:focus-visible{outline:3px solid var(--gold);outline-offset:5px}@media(max-width:900px){.foz-scenes{grid-template-columns:repeat(2,1fr)}}@media(max-width:550px){.foz-scenes{grid-template-columns:1fr}.foz-stage{min-height:950px}.foz-centre h1{font-size:54px}.foz-voices button{padding:8px 13px}.foz-transport button{font-size:12px}}
/* Responsive layers added above the original world; existing scenes and controls stay intact. */
.foz-response-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.foz-response{min-height:2.4em;max-width:700px;margin:0 auto 8px;text-align:center;font-size:11px;line-height:1.7;font-family:inherit;letter-spacing:.035em;color:var(--foz-gold);pointer-events:none}.foz-voices button.foz-voice-lit{border-color:var(--foz-gold);background:#f3d39624;box-shadow:0 0 24px #f3d39666,inset 0 0 16px #f3d3961a;text-shadow:0 0 14px #ffe4a28c}
.foz-touch{position:absolute;inset:0;--voice-colour:241,209,138;animation:foz-touch-fade 3.2s ease-out both}.foz-touch i{position:absolute;pointer-events:none}
.foz-touch-foundation i{left:50%;top:68%;width:140px;height:50px;border:1px solid rgba(var(--voice-colour),.6);border-radius:50%;box-shadow:0 0 18px rgba(var(--voice-colour),.18);animation:foz-ground-wave 3s calc(var(--voice-ray)*.13s) ease-out both}
.foz-touch-answer i{left:calc(15% + var(--voice-ray)*17%);top:38%;width:90px;height:90px;border:1px solid rgba(var(--voice-colour),.5);border-radius:50%;box-shadow:0 0 26px rgba(var(--voice-colour),.2);animation:foz-answer-wave 2.7s calc(var(--voice-ray)*.12s) ease-out both}
.foz-touch-harmony i{left:calc(18% + var(--voice-ray)*15%);top:25%;width:1px;height:55%;background:linear-gradient(transparent,rgba(var(--voice-colour),.8),transparent);box-shadow:0 0 18px rgba(var(--voice-colour),.6);animation:foz-weave 2.9s calc(var(--voice-ray)*.09s) ease-in-out both;transform-origin:center}
.foz-touch-radiance i{left:50%;bottom:10%;height:100%;width:12%;transform-origin:50% 100%;background:linear-gradient(0deg,rgba(var(--voice-colour),.2),rgba(var(--voice-colour),.08) 55%,transparent);filter:blur(6px);animation:foz-rising-ray 2.9s calc(var(--voice-ray)*.04s) ease-out both}
.foz-touch-accord i{left:calc(15% + var(--voice-ray)*17%);top:40%;width:8px;height:8px;border-radius:50%;background:#fff8e2;box-shadow:0 0 15px 5px rgba(var(--voice-colour),.65),0 0 80px 25px rgba(var(--voice-colour),.2);animation:foz-unite 2.9s calc(var(--voice-ray)*.09s) ease-out both}
.foz-woven{position:absolute;inset:18% 8% 28%;border:1px solid #fff0c64d;border-radius:50%;background:radial-gradient(ellipse,#fff2cc22,transparent 68%);box-shadow:0 0 70px #f7d79d33,inset 0 0 70px #d2c2ff26;animation:foz-woven 4.5s ease-in-out both}
@keyframes foz-touch-fade{0%{opacity:0}10%,55%{opacity:1}100%{opacity:0}}@keyframes foz-ground-wave{from{transform:translate(-50%,-50%) scale(.25);opacity:0}25%{opacity:.7}to{transform:translate(-50%,-50%) scale(7);opacity:0}}@keyframes foz-answer-wave{from{transform:translate(-50%,-50%) scale(.2);opacity:0}30%{opacity:.8}to{transform:translate(-50%,-50%) scale(3.5);opacity:0}}@keyframes foz-weave{0%{transform:translateY(30%) rotate(-35deg);opacity:0}40%{opacity:.8}100%{transform:translateY(-15%) rotate(35deg);opacity:0}}@keyframes foz-rising-ray{from{transform:rotate(calc((var(--voice-ray) - 2)*18deg)) scaleY(.15);opacity:0}30%{opacity:1}to{transform:rotate(calc((var(--voice-ray) - 2)*23deg)) scaleY(1.2);opacity:0}}@keyframes foz-unite{from{transform:scale(.2) translateY(35px);opacity:0}45%{transform:scale(1.4) translateY(0);opacity:1}to{transform:scale(.8) translateY(-15px);opacity:0}}@keyframes foz-woven{from{transform:scale(.6);opacity:0}35%{opacity:.8}to{transform:scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.foz-response-layer{display:none}.foz-voices button{transition:none}}.foz-still .foz-response-layer,.reduced-motion .foz-response-layer{display:none}

.foz-touch-accord i:nth-child(2n){top:49%}
.foz-unison-control{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px auto 10px;font-size:12px;color:#f3d99f;line-height:1.6;text-align:center}.foz-unison-control input{width:19px;height:19px;accent-color:#dbb86e}.foz-voices button.foz-voice-held{background:#e4bf7030;border-color:#ffe1a0;box-shadow:0 0 28px #efcd7970,inset 0 0 20px #fff0bd1a}.foz-touch.foz-held{animation:none;opacity:.65}.foz-held i{animation-iteration-count:infinite!important;animation-duration:6s!important}.foz-united .foz-orbit{box-shadow:0 0 40px #f5d38a44}.foz-still .foz-response-layer,.reduced-motion .foz-response-layer{display:none}@media(prefers-reduced-motion:reduce){.foz-held,.foz-held i{animation:none!important}}

/* Keep the instrument readable over the living geometry without changing its behaviour. */
.foz-instrument{position:relative;width:100%;max-width:680px;box-sizing:border-box;margin:8px auto 16px;padding:18px;border:1px solid #e9d3a42b;border-radius:22px;background:linear-gradient(145deg,#0c192bd9,#132333cc);box-shadow:0 12px 36px #02081226}
.foz-instrument .foz-voices{margin:0;gap:10px}
.foz-instrument .zg-controls{margin:20px auto 0;gap:12px}
.foz-instrument .zg-controls label{gap:10px}
.foz-instrument .zg-controls span{font-size:11px;line-height:1.75;overflow-wrap:anywhere}
.foz-instrument .foz-unison-control{margin:20px auto 12px;gap:12px}
.foz-instrument .foz-unison-control input{flex:0 0 20px;width:20px;height:20px;margin:0}
.foz-instrument .foz-response{margin:0 auto;letter-spacing:.015em}
@media(max-width:650px){
 .foz-centre{margin:32px auto 24px;width:100%}
 .foz-centre h1{font-size:clamp(38px,11.5vw,54px);margin:18px 0;line-height:1.08}
 .foz-kicker{display:block;line-height:1.8;letter-spacing:.2em}
 .foz-centre p{font-size:14px;line-height:1.75}
 .foz-stage .foz-primary{max-width:100%;font-size:14px;padding:12px 16px}
 .foz-instrument{padding:16px 12px;margin:4px auto 12px;border-radius:18px}
 .foz-instrument .foz-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
 .foz-instrument .foz-voices button{min-width:0;min-height:46px;padding:9px 5px;font-size:11px;line-height:1.4}
 .foz-instrument .zg-controls label{display:grid;width:100%;font-size:12px}
 .foz-instrument .zg-controls select{box-sizing:border-box;width:100%;max-width:100%;min-width:0;font-size:16px}
 .foz-instrument .foz-unison-control{justify-content:flex-start;text-align:left;font-size:12px}
 .foz-instrument .foz-response{font-size:12px;line-height:1.7}
 .foz-scripture{margin:24px auto}
}
@media(max-width:390px){.foz-instrument .foz-voices{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The visual owns its own space; controls follow it in normal document flow. */
.foz-stage{justify-content:flex-start;background:radial-gradient(ellipse at 50% 15%,#242739,transparent 55%),linear-gradient(150deg,#080f20,#151a2c 60%,#10242e)}
.foz-visual{position:relative;isolation:isolate;flex:none;width:100%;height:clamp(320px,42vw,500px);overflow:hidden;border-radius:20px;margin:0 auto 24px}
.foz-visual .foz-world{z-index:0;overflow:hidden}
.foz-visual .foz-world>canvas{z-index:1}
.foz-visual .foz-response-layer{z-index:2}
.foz-instrument{flex:none;margin:0 auto 16px;background:#101e2d}
.foz-centre{flex:none;margin:32px auto 24px}
@media(max-width:650px){.foz-visual{height:340px;margin-bottom:24px;border-radius:14px}.foz-centre{margin:28px auto 22px}}

.foz-stage.foz-expanded{position:fixed;inset:0;z-index:10010;width:100%;height:100dvh;min-height:100dvh;max-width:none;box-sizing:border-box;overflow:auto;border-radius:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.foz-stage:is(.foz-expanded,:fullscreen) .foz-centre{display:none}.foz-stage:is(.foz-expanded,:fullscreen) .foz-visual{height:70dvh;min-height:340px;margin-top:16px}.sol-zion-expanded{overflow:hidden}
