body{background:#030608}.chamber{position:relative;isolation:isolate;min-height:760px;padding:36px 16px 32px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#132b34 0%,#080f16 42%,#030608 78%)}.chamber-intro{position:relative;z-index:2}.chamber-kicker{font-size:9px;letter-spacing:4px;color:#8babb0}.chamber h1{font:400 clamp(30px,5vw,54px)/1.15 "XBAND Rough",monospace;margin:14px 0}.chamber-intro p{font-size:12px;color:#9bb0b6}.room-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.room-window{position:absolute;top:180px;left:50%;transform:translateX(-50%);width:380px;height:330px;border-radius:190px 190px 0 0;overflow:hidden;background:linear-gradient(#091625,#294954);box-shadow:0 0 0 14px #060b10,0 0 0 15px #21313b,0 0 85px #58879724}.moon{position:absolute;width:82px;height:82px;border-radius:50%;background:#d2e5df;left:50%;top:45px;transform:translateX(-50%);box-shadow:0 0 60px #b6e8eb50,inset -13px -4px 18px #6d979c}.mountain{position:absolute;bottom:-8px;width:110%;height:155px;background:#122d36;clip-path:polygon(0 80%,17% 32%,32% 59%,56% 0,77% 44%,90% 25%,100% 70%,100% 100%,0 100%)}.mountain-front{height:100px;background:#071b25;transform:scaleX(-1)}.room-floor{position:absolute;left:-50%;width:200%;height:480px;top:510px;background:repeating-linear-gradient(90deg,transparent 0 119px,#54707618 120px 121px),repeating-linear-gradient(0deg,#0a151a 0 73px,#54707618 74px 75px);transform:perspective(280px) rotateX(57deg);transform-origin:top}.light-pool{position:absolute;top:540px;left:50%;width:360px;height:85px;transform:translateX(-50%);border-radius:50%;background:#789c9d12;filter:blur(18px)}.cushion{position:absolute;left:50%;top:555px;width:170px;height:43px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 10%,#344750,#152630 65%);box-shadow:0 10px 18px #000}.candle{position:absolute;top:510px;width:12px;height:32px;background:linear-gradient(90deg,#786448,#c8a677,#65523c);box-shadow:0 5px 15px #000;left:calc(50% - 230px)}.candle-right{left:calc(50% + 218px)}.candle:before{content:"";position:absolute;left:3px;top:-18px;width:6px;height:18px;border-radius:50% 50% 35% 35%;background:#f2d9a4;box-shadow:0 0 22px 9px #e1b16d24}.breath-guide{position:relative;margin:35px auto 150px;padding:35px 0 0;min-height:240px;z-index:2}.breath-orb{width:132px;height:132px;margin:0 auto 24px;border-radius:50%;background:radial-gradient(circle,#b8e0d520,#b8e0d504 66%,#b8e0d547 69%,transparent 72%);box-shadow:0 0 38px #a1daca12;transform:scale(.75)}.breath-guide p{font-size:14px;letter-spacing:4px;margin:12px 0;color:#e0eeea}.breath-guide span{font-size:10px;color:#9ab0b8}.chamber-controls{position:relative;z-index:3;display:flex;align-items:end;justify-content:center;gap:12px;flex-wrap:wrap}.chamber-controls label{text-align:left;font-size:9px;letter-spacing:2px;color:#9eafb6}.chamber-controls select{display:block;margin-top:7px}.chamber-controls select,.chamber-controls button{font:11px "Courier New",monospace;background:#11222d;color:#dbe7e9;padding:12px;min-height:42px;cursor:pointer}.chamber-controls button:hover{background:#263e49}.chamber-controls button:focus-visible,.chamber-controls select:focus-visible{background:#dbe7e9;color:#11222d}.chamber-controls output{font-size:22px;min-width:85px;padding:4px 0;font-variant-numeric:tabular-nums}.session-status{color:#a0b5bb;font-size:11px;margin:20px 0 10px}.chamber-listen{font-size:9px;color:#8caaaf}.room-dim header,.room-dim footer{opacity:.16;transition:opacity .4s}.room-dim header:hover,.room-dim header:focus-within,.room-dim footer:hover,.room-dim footer:focus-within{opacity:1}@media(max-width:600px){.site{padding:0 14px}.chamber{min-height:850px;padding-left:8px;padding-right:8px}.room-window{width:260px;height:330px}.candle-left{left:calc(50% - 148px)}.candle-right{left:calc(50% + 136px)}.chamber-controls{max-width:330px;margin:auto}.chamber-controls button{flex:1 1 auto}.breath-guide span{font-size:9px}.chamber-intro p{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.chamber-audio{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin:18px auto 0;font-size:9px;color:#9eafb6}.chamber-audio button{background:#11222d;color:#dbe7e9;padding:12px;min-height:42px;font:11px "Courier New",monospace;cursor:pointer}.chamber-audio button:hover{background:#263e49}.chamber-audio button:focus-visible{background:#dbe7e9;color:#11222d}.chamber-audio label{display:flex;align-items:center;gap:10px}.chamber-audio input{width:100px;accent-color:#9bbabf}.chamber-audio span{flex-basis:100%;min-height:15px}

/* A dark room lit by the original animated emblem. */
.chamber{min-height:880px;background:radial-gradient(ellipse at 50% 42%,#0b1922 0%,#03080c 40%,#000 75%);padding-top:28px}
.chamber-intro p{color:#7d959f}.chamber h1{font-size:clamp(28px,4vw,42px)}
.chamber-wall{position:absolute;inset:0 0 22%;background:linear-gradient(90deg,#000 0%,transparent 22% 78%,#000 100%)}
.chamber-floor{position:absolute;inset:68% -20% -20%;background:radial-gradient(ellipse at 50% 0%,#24425138,transparent 55%),linear-gradient(#071018,#000 72%);transform:perspective(500px) rotateX(30deg);transform-origin:top}
.projection-glow{position:absolute;left:50%;top:370px;width:min(600px,90%);height:310px;transform:translateX(-50%);border-radius:50%;background:#78c7ed0d;filter:blur(48px)}
.chamber-projection{position:relative;z-index:1;width:min(330px,75vw);margin:22px auto 0;filter:drop-shadow(0 0 28px #8cc8e315)}
.chamber-projection img{display:block;width:100%;height:auto;object-fit:contain;mask-image:linear-gradient(to bottom,#000 86%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent)}
.breath-guide{margin:0 auto 25px;min-height:0;padding:0}.breath-orb{position:absolute;left:50%;top:0;width:1px;height:1px;margin:0;opacity:0}.breath-guide p{margin:10px 0;color:#c0d8e1}.breath-guide span{color:#6f8994}.chamber-controls select,.chamber-controls button,.chamber-audio button{background:#0a141d}.chamber-controls{margin-top:22px}.session-status{color:#718893}.chamber-audio{margin-bottom:18px}.room-dim .chamber-intro,.room-dim .breath-guide span{opacity:.35}
@media(max-width:600px){.chamber{min-height:900px}.chamber-projection{width:min(290px,75vw);margin-top:28px}.chamber-floor{top:62%}.breath-guide{margin-bottom:22px}.chamber-controls{margin-top:22px}}
.chamber-projection{mix-blend-mode:screen}.chamber-floor{mask-image:linear-gradient(transparent,#000 22%);-webkit-mask-image:linear-gradient(transparent,#000 22%)}

/* Full-width animated atmosphere, with the complete emblem in front. */
.chamber{padding-left:0;padding-right:0}.chamber-intro,.breath-guide,.chamber-controls,.chamber-audio,.session-status{padding-left:16px;padding-right:16px}
.chamber-projection{width:100%;max-width:none;margin:0 auto;isolation:isolate;filter:none;mix-blend-mode:screen}
.chamber-projection::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets--neuro-yin-yang.gif") center 58%/cover no-repeat;filter:blur(28px);opacity:.32;mask-image:linear-gradient(transparent,#000 25% 75%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 25% 75%,transparent)}
.chamber-projection img{width:100%;height:clamp(480px,65vw,780px);object-fit:contain;mix-blend-mode:screen;mask-image:linear-gradient(transparent,#000 12% 84%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12% 84%,transparent)}
.projection-glow{top:30%;width:100%;height:50%}.chamber-floor{top:65%}.breath-guide{margin-top:-20px}.chamber-controls{position:relative}.chamber-audio{padding-bottom:24px}
@media(max-width:600px){.chamber-projection{width:100%;margin:0}.chamber-projection img{height:clamp(430px,125vw,650px)}.chamber-projection::before{filter:blur(16px)}}

/* Fade the actual contained image edges, including its letterboxed sides. */
.chamber-projection img{width:auto;max-width:100%;margin-inline:auto;mask-image:linear-gradient(to right,transparent 0%,#000 17%,#000 83%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 17%,#000 83%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);-webkit-mask-composite:source-in}
.chamber-projection::before{mask-image:linear-gradient(to right,transparent,#000 20% 80%,transparent),linear-gradient(to bottom,transparent,#000 25% 75%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 20% 80%,transparent),linear-gradient(to bottom,transparent,#000 25% 75%,transparent);-webkit-mask-composite:source-in}

/* Place the emblem itself at the viewport center, accounting for navigation. */
.chamber{padding-top:0;min-height:0}.meditation-stage{position:relative;height:calc(100svh - var(--room-offset,140px));min-height:360px;isolation:isolate}.chamber-intro{position:absolute;top:16px;left:0;right:0;z-index:3}.chamber-intro p{margin:8px 0}.chamber h1{margin:10px 0}.chamber-projection{position:absolute;left:50%;top:max(190px,calc(50svh - var(--room-offset,140px)));width:100%;height:0;margin:0;transform:translateX(-50%)}.chamber-projection img{position:absolute;left:50%;top:0;width:auto;max-width:none;height:min(70svh,650px,100vw);transform:translate(-64%,-55%)}.chamber-projection::before{inset:auto;left:0;top:0;width:100%;height:min(75svh,700px);transform:translateY(-50%)}.breath-guide{margin:8px auto 25px}.room-scene{inset:0}.projection-glow{top:30%;height:60%}@media(max-width:600px){.chamber-intro{top:8px}.chamber-kicker{font-size:8px}.chamber h1{font-size:27px}.chamber-intro p{font-size:10px}.chamber-projection{margin:0;width:100%}.chamber-projection img{height:min(65svh,110vw)}}

/* Slow darkness passing through the fog and its reflected glow. */
.chamber-projection::before{animation:chamber-fog-fade 12s ease-in-out infinite}
.projection-glow{animation:chamber-glow-fade 12s ease-in-out infinite}
.chamber-projection img{animation:chamber-emblem-dim 12s ease-in-out infinite}
@keyframes chamber-fog-fade{0%,100%{opacity:.22}45%,60%{opacity:.03}}
@keyframes chamber-glow-fade{0%,100%{opacity:1}45%,60%{opacity:0}}
@keyframes chamber-emblem-dim{0%,100%{filter:brightness(.6)}45%,60%{filter:brightness(.18)}}


/* Immersive session: hover near the bottom to reveal controls. */
.chamber-session-ui{transition:opacity .65s ease}
.chamber-immersive .chamber{position:fixed;inset:0;z-index:1000;width:100%;height:100dvh;overflow:hidden;background-color:#000;padding:0}
.chamber:fullscreen{width:100%;height:100dvh}
.chamber-immersive .meditation-stage{height:100dvh;min-height:0}
.chamber-immersive .chamber-projection{top:50dvh}
.chamber-immersive .chamber-projection img{height:min(80dvh,780px,115vw)}
.chamber-immersive .chamber-intro{opacity:0;pointer-events:none;transition:opacity .8s ease}
.chamber-immersive .chamber-session-ui{position:absolute;left:0;right:0;bottom:0;z-index:10;opacity:0;padding:34px 16px 12px;background:linear-gradient(transparent,#02080ee8 25%);max-height:55dvh;overflow:auto}
.chamber-immersive .chamber-session-ui:hover,.chamber-immersive .chamber-session-ui:focus-within{opacity:1}
.chamber-immersive .chamber-session-ui .breath-guide{margin:0 auto 12px}
.chamber-immersive .chamber-session-ui .chamber-controls{margin-top:10px}
.chamber-immersive .chamber-session-ui .chamber-audio{margin:10px auto 0;padding-bottom:0}
.chamber-immersive .chamber-session-ui .session-status{margin:10px 0}
@media(hover:none){.chamber-immersive .chamber-session-ui{opacity:.2}.chamber-immersive .chamber-session-ui:focus-within{opacity:1}}

.chamber-immersive .chamber-intro,.chamber-immersive .chamber-session-ui{transition:opacity .8s ease!important}

#reveal-controls,#hide-controls{display:none}
.chamber-immersive .breath-guide{position:absolute;top:76dvh;left:0;right:0;z-index:11;margin:0;pointer-events:none}
.chamber-immersive .breath-guide span{display:none}.chamber-immersive .breath-guide p{margin:0;font-size:14px;letter-spacing:3px;text-shadow:0 2px 12px #000}
@media(hover:none),(pointer:coarse),(max-width:600px){
 .chamber-projection{top:calc(50dvh - var(--room-offset,140px))}
 .chamber-immersive .chamber-projection{top:50dvh;left:50%}
 .chamber-immersive .chamber-session-ui,.chamber-immersive .chamber-session-ui:hover,.chamber-immersive .chamber-session-ui:focus-within{opacity:0;pointer-events:none}
 .chamber-immersive .controls-shown .chamber-session-ui{opacity:1;pointer-events:auto}
 .chamber-immersive #reveal-controls{display:block;position:absolute;bottom:0;left:0;width:100%;height:24dvh;background:transparent;padding:0;z-index:12;cursor:pointer}
 .chamber-immersive .controls-shown #reveal-controls{display:none}
 .chamber-immersive .chamber-session-ui{z-index:13;padding-bottom:max(14px,env(safe-area-inset-bottom));max-height:48dvh}
 .chamber-immersive #hide-controls{display:inline-block;background:#11222d;color:#dbe7e9;padding:10px 14px;font:10px "Courier New",monospace;margin-bottom:8px}
 .chamber-immersive .breath-guide{top:72dvh}
 .chamber-immersive .controls-shown .breath-guide{top:46dvh}
}

.chamber[data-breathing] .chamber-projection img{animation:none;filter:brightness(var(--breath-light,.22))}.chamber[data-breathing] .chamber-projection::before{animation:none;opacity:var(--breath-fog,.04)}.chamber[data-breathing] .projection-glow{animation:none;opacity:var(--breath-light,.22)}

/* Stronger aura follows the same eased 5-in / 7-out breath phase. */
.chamber[data-breathing] .chamber-projection::before{filter:blur(28px) brightness(.75) saturate(.8)}
.chamber[data-breathing] .projection-glow{background:radial-gradient(ellipse,#75ceff18, #438bb80c 48%,transparent 75%);filter:blur(38px);opacity:var(--breath-fog,.01)}

#session-reminder{position:absolute;left:50%;top:calc(50dvh - var(--room-offset,140px));transform:translate(-50%,-50%);z-index:15;width:min(85%,720px);margin:0;padding:20px 12px;color:#edf8ff;font:400 clamp(18px,3.4vw,36px)/1.45 "Courier New",monospace;letter-spacing:1px;text-align:center;text-shadow:0 2px 6px #000,0 0 24px #000,0 0 48px #000;opacity:0;pointer-events:none}.chamber-immersive #session-reminder{top:50dvh}
