@font-face{font-family:Shore;src:local("Avenir Next");font-display:swap}
:root{color-scheme:dark;--ink:#061017;--cream:#f8efdb;--sand:#e6bd78;--muted:#bacbd0;--cyan:#5ed8eb}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--ink);font-family:Shore,"Avenir Next",Avenir,"Segoe UI",sans-serif;color:var(--cream)}
button,a,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #a9efff;outline-offset:6px}
button{border:0}
button:disabled{cursor:wait}
.stage{position:relative;width:100%;height:100svh;min-height:700px;overflow:hidden;isolation:isolate;background:#061017}
.landscape{position:absolute;inset:-1px;background:url("assets/shoreline.webp") center center/cover no-repeat;z-index:-3}
.shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(3,14,19,.33),transparent 61%),linear-gradient(0deg,rgba(2,11,16,.87),transparent 27%,transparent 83%,rgba(2,11,16,.24))}
#world{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:35px 5.3%;gap:20px}
.wordmark{font-size:29px;font-weight:600;letter-spacing:.055em;color:var(--cream);text-decoration:none;white-space:nowrap}
.wordmark span{font-weight:450;letter-spacing:-.045em}
.about-link{background:transparent;color:#d1dcdf;font-size:13px;padding:13px 0 13px 18px;letter-spacing:.015em;white-space:nowrap}
.about-link span{color:var(--sand);margin-left:15px}
.introduction{position:absolute;left:7%;top:26%;width:43%;max-width:630px}
.eyebrow{color:#c1d1d4;font-size:10px;text-transform:uppercase;letter-spacing:.21em;line-height:1.6;margin:0 0 23px}
h1{font-size:clamp(64px,6.7vw,106px);font-weight:400;letter-spacing:-.055em;line-height:1.015;margin:0 0 24px;text-wrap:balance}
h1 span{color:var(--sand)}
.dek{font-size:clamp(17px,1.6vw,23px);font-weight:400;line-height:1.5;color:#d6e3e3;margin:0 0 32px;letter-spacing:-.015em}
.mobile-break{display:none}
.gather{display:inline-flex;align-items:center;gap:13px;color:var(--sand);background:rgba(4,20,25,.32);border:1px solid rgba(230,189,120,.44);border-radius:100px;padding:14px 19px;font-size:13px;letter-spacing:.015em;min-height:48px;transition:background .25s,border-color .25s}
.gather svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2}
.gather:hover{background:rgba(230,189,120,.12);border-color:var(--sand)}
.gather-arrow{margin-left:10px;font-size:17px}
.interaction-hint{font-size:11px;color:#afc4c9;margin:14px 0 0;letter-spacing:.015em}
.form-caption{position:absolute;left:72%;top:64%;display:flex;align-items:center;gap:9px;color:#c2dce0;font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 1px 6px #041419}
.state-dot{width:4px;height:4px;border-radius:50%;background:var(--sand)}
.controls{position:absolute;left:5.3%;right:5.3%;bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}
.sound-panel{border:1px solid rgba(174,211,218,.2);border-radius:18px;padding:14px 16px 12px;max-width:470px;width:470px;background:rgba(4,19,25,.79);box-shadow:0 12px 30px rgba(0,0,0,.16);backdrop-filter:blur(16px)}
.sound-top{display:flex;align-items:center;gap:13px;margin-bottom:13px}
.play-button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(230,189,120,.43);background:rgba(230,189,120,.07);display:grid;place-items:center;color:var(--sand);flex-shrink:0}
.play-button:hover{background:rgba(230,189,120,.17)}
.play-button svg{width:19px;height:19px;fill:currentColor}
[hidden]{display:none!important}
.sound-label{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.micro-label{font-size:8px;letter-spacing:.18em;color:#a5c0c6}
.track-title{font-size:13px;white-space:nowrap}
.volume{display:flex;align-items:center;gap:8px}
.volume svg{fill:none;stroke:#b5cbd0;stroke-width:1.4;width:17px;height:17px}
.volume input{width:65px;height:20px;accent-color:var(--sand);cursor:pointer}
.track-options{display:flex;gap:6px}
.track{flex:1;white-space:nowrap;background:transparent;padding:10px 7px;border-radius:8px;color:#b5cbd0;border:1px solid transparent;font-size:10px;min-height:37px}
.track span{margin-right:7px;color:#8da6ad;font-size:9px}
.track.active{background:rgba(230,189,120,.1);border-color:rgba(230,189,120,.25);color:var(--cream)}
.track.active span{color:var(--sand)}
.track:hover{background:rgba(220,240,241,.07)}
.scene-controls{display:flex;flex-direction:column;align-items:flex-end;gap:21px}
.motion-button{display:flex;align-items:center;gap:12px;font-size:12px;background:rgba(3,17,23,.7);padding:10px 16px;border:1px solid rgba(174,211,218,.23);border-radius:30px;min-height:44px}
.motion-glyph{font-size:22px;line-height:1;color:var(--cyan)}
.study-label{font-size:8px;color:#b5c5c9;letter-spacing:.18em}
.study-label span{color:var(--sand);margin-left:12px}
dialog{width:min(520px,calc(100% - 36px));padding:43px;background:#0a2029;color:var(--cream);border:1px solid #35505a;border-radius:22px;box-shadow:0 30px 100px #0008}
dialog::backdrop{background:#020b10b8;backdrop-filter:blur(8px)}
dialog h2{font-size:32px;font-weight:400;letter-spacing:-.04em;margin:0 0 22px}
dialog p:not(.eyebrow){font-size:14px;line-height:1.75;color:#cbdadd}
dialog .study-note{border-top:1px solid #35505a;padding-top:18px;color:#a1bac0!important;font-size:12px!important}
.close{position:absolute;right:14px;top:10px;width:40px;height:40px;background:none;color:#b6ced4;font-size:27px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#audio-error{font-size:11px;color:#f2cb9d;line-height:1.4;margin:10px 0 0}
@media(min-width:1600px){.introduction{top:25%}.header{padding-top:43px}.controls{bottom:38px}}
@media(max-width:760px){
.stage{min-height:740px}
.header{padding:22px 24px}.wordmark{font-size:23px}.about-link{font-size:11px}
.introduction{left:7%;top:16%;width:80%}
.eyebrow{font-size:8px;letter-spacing:.18em;margin-bottom:14px}
h1{font-size:clamp(49px,10vw,72px);margin-bottom:18px;line-height:1.02}
.dek{font-size:16px;margin-bottom:21px}
.gather{padding:10px 15px;font-size:12px;min-height:44px}
.interaction-hint{font-size:10px;max-width:200px}
.form-caption{left:auto;right:7%;top:65%;font-size:8px}
.controls{left:20px;right:20px;bottom:20px;flex-direction:column-reverse;align-items:stretch;gap:14px}
.sound-panel{width:100%;max-width:100%;padding:12px 13px 10px}
.scene-controls{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.motion-button{padding:6px 13px;font-size:11px}.study-label{font-size:7px}
.track{font-size:10px;padding:9px 4px;min-height:42px}.track span{margin-right:4px}
.landscape{background-position:62% center}
.shade{background:linear-gradient(0deg,#020c13ed,transparent 40%,rgba(3,14,19,.1) 70%),linear-gradient(90deg,#03131944,transparent)}
.volume input{width:53px}
dialog{padding:36px 27px}
}
@media(max-height:720px) and (min-width:761px){.stage{min-height:560px}.introduction{top:22%}h1{font-size:70px}.dek{font-size:17px;margin-bottom:20px}.eyebrow{margin-bottom:12px}.header{padding-top:24px}.sound-panel{padding:10px 13px}.controls{bottom:19px}.form-caption{top:58%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:330px){.header{padding:20px 18px;gap:8px}.wordmark{font-size:19px}.about-link{font-size:9px;padding-left:0}.about-link span{margin-left:2px}.introduction{top:15%;width:86%}h1{font-size:38px}.dek{font-size:14px}.volume{display:none}.track{white-space:normal}.form-caption{top:66%}.study-label{max-width:95px;line-height:1.7}}