/* A luminous room of water and warmth. One listening control, no settings. */
:root{color-scheme:light;--ink:#284c5a;--muted:#456470;--room:#e2edf0;--energy:.22;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{background:var(--room)}
body{margin:0;color:var(--ink);background:var(--room);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:3px}
button:focus-visible,a:focus-visible{outline:2px solid #355f70;outline-offset:7px}
.listening-room{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - 46px);padding:clamp(40px,7vh,80px) 24px 22px;text-align:center;background:radial-gradient(ellipse at 72% 7%,#fff8e7aa,transparent 44%),radial-gradient(ellipse at 50% 48%,#f7fbf6bd,transparent 56%),linear-gradient(165deg,#e5eff0,#d7e9ee 55%,#e8ede4)}
.atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.65;transition:opacity 6s}
.atmosphere i{position:absolute;display:block;width:72vw;height:65vh;max-width:1200px;border-radius:50%;filter:blur(80px);opacity:.25;transform:translate3d(0,0,0)}
.atmosphere i:nth-child(1){left:-25%;top:3%;background:#82bdce;animation:drift-one 63s ease-in-out infinite alternate}
.atmosphere i:nth-child(2){right:-26%;top:24%;background:#f2d5a1;animation:drift-two 79s ease-in-out infinite alternate}
.atmosphere i:nth-child(3){left:17%;bottom:-43%;background:#8dc3c5;animation:drift-one 91s ease-in-out infinite alternate-reverse}
.invitation{position:relative;z-index:1;flex:none}
.eyebrow{margin:0 0 16px;font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#456470}
h1{margin:0;font:400 clamp(54px,8vw,86px)/1.12 var(--serif);letter-spacing:-.035em;color:#345766}
h1 span{color:#598494}
.introduction{margin:14px 0 0;font:italic 17px/1.5 var(--serif);color:var(--muted)}
.threshold{position:relative;flex:1 0 auto;display:grid;place-items:center;width:min(500px,86vw);height:clamp(250px,41vh,450px);min-height:250px;margin:0 auto}
.field{position:absolute;left:50%;top:50%;width:min(580px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.7;transition:opacity 5s,filter 5s;filter:saturate(.7)}
.field-halo{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#fff8dd90,transparent 67%);box-shadow:0 0 90px 30px #f6f8e040,inset 0 0 80px #fbf6dc33;animation:breathe 19s ease-in-out infinite alternate}
.contours{display:block;width:100%;height:100%;animation:tide 43s ease-in-out infinite alternate}
.orbit{position:absolute;inset:20% 13%;border:1px solid #79a8b521;border-radius:50%;transform:rotate(-8deg) scaleY(.7)}
.orbit-two{inset:12% 4%;transform:rotate(7deg) scaleY(.75);border-color:#9baaa019}
.enter{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:132px;height:132px;border:1px solid #709aa46b;border-radius:50%;background:linear-gradient(145deg,#fffff5ed,#e1eef0eb);box-shadow:0 0 0 10px #f4f8ed27,0 0 52px #f8f6deaa,inset 0 0 28px #fffff599;color:#365f6e;cursor:pointer;transition:background .5s,border-color .5s,box-shadow 1s,transform .5s}
.enter:hover:not(:disabled){background:#fffff5;border-color:#658e9cb0;box-shadow:0 0 0 13px #fff9e73d,0 0 65px #f6f4dba0}
.enter:active:not(:disabled){transform:scale(.97)}
.enter:disabled{cursor:wait;opacity:.5}
.enter svg{width:23px;height:23px;fill:currentColor}
.enter .play-symbol{margin-left:4px}
.enter .pause-symbol{display:none}
.enter span{font:500 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
body[data-state=playing] .pause-symbol,body[data-state=starting] .pause-symbol{display:block}
body[data-state=playing] .play-symbol,body[data-state=starting] .play-symbol{display:none}
body[data-state=playing] .field{opacity:calc(.72 + var(--energy)*.25);filter:saturate(1)}
body[data-state=playing] .atmosphere{opacity:1}
body[data-state=playing] .field-halo{box-shadow:0 0 110px 45px #fffae680,inset 0 0 80px #fffbde66}
body[data-state=starting] .enter{animation:button-breath 2s ease-in-out infinite alternate}
.listening-copy{position:relative;z-index:1;flex:none;max-width:440px;margin:0 auto 36px;min-height:90px}
.status{min-height:1.6em;margin:0 0 12px;color:#446776;font-size:12px;line-height:1.7;letter-spacing:.01em}
.listening-note{margin:0;color:#456470;font:14px/1.65 var(--serif)}
.headphone-note{display:block;margin-top:12px;color:#456470;font:10px/1.5 var(--sans);letter-spacing:.04em}
.source-note{flex:none;width:100%;margin-top:auto;padding-top:20px;border-top:1px solid #648a931c}
.source-note>p:first-child{margin:0;color:#456470;font:9px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.credits{max-width:760px;margin:12px auto 0;color:#456470;font-size:10px;line-height:1.7}
.credits a{color:#426773}
.no-script{padding:12px 24px;text-align:center;color:var(--ink)}
@keyframes drift-one{from{transform:translate3d(-5%,-8%,0) rotate(-8deg)}to{transform:translate3d(24%,18%,0) rotate(18deg)}}
@keyframes drift-two{from{transform:translate3d(12%,5%,0)}to{transform:translate3d(-16%,-14%,0)}}
@keyframes tide{from{transform:rotate(-5deg) scale(.97)}to{transform:rotate(5deg) scale(1.04)}}
@keyframes breathe{from{transform:scale(.94);opacity:.6}to{transform:scale(1.06);opacity:1}}
@keyframes button-breath{from{border-color:#709aa434}to{border-color:#709aa4a0}}
@media(max-width:640px){.listening-room{min-height:calc(100svh - 44px);padding-top:38px}.eyebrow{font-size:8px;letter-spacing:.2em}.threshold{height:33vh;min-height:265px}.field{width:460px}.enter{width:116px;height:116px}.listening-copy{margin-bottom:30px}.credits{font-size:9px;max-width:370px}.atmosphere i{filter:blur(50px)}}
@media(max-height:750px) and (min-width:641px){.listening-room{padding-top:30px}.threshold{height:280px;min-height:250px}.field{width:460px}.listening-copy{margin-bottom:22px}}
body[data-hidden=true] .atmosphere i,body[data-hidden=true] .contours,body[data-hidden=true] .field-halo,body[data-hidden=true] .enter{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.atmosphere{opacity:.5}.contours{transform:rotate(-4deg)}}