/* Opening: preserve the designer's fleet, typography and exact Figma wordmark. */
[hidden]{display:none!important}
body[data-stage=signal]{background:#080604}
body[data-stage=signal] .grain{opacity:.035}
.site-header{height:88px;padding-inline:4.4vw;border-bottom:1px solid #eedac21c}
.header-register{display:flex!important;position:absolute;left:50%;transform:translateX(-50%)}
.header-register img{width:108px;height:auto}
.header-actions{min-width:130px;justify-content:flex-end}
.brand img{width:51px;height:25px}.brand span{font-size:21px}
body[data-stage=signal] .site-header{transition:opacity 1.2s ease}
body[data-opening=brand] .site-header{opacity:0;pointer-events:none}
.signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){height:auto;min-height:100svh;padding:122px 4.4vw 124px;display:flex;flex-direction:column;justify-content:center}
.signal-stage>.stage-kicker{position:absolute;top:120px;left:4.4vw;font-size:9px;letter-spacing:.18em}
.signal-art{inset:0;background:none;transform:none;will-change:auto}
.signal-art>img,.signal-art>video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:63% 50%}
.signal-art>video{opacity:0;transition:opacity .65s ease;pointer-events:none}
.signal-art.video-ready>video{opacity:1}
.signal-stage>.horizon-light,.signal-stage>.sea-reflection{display:none}
.scene-motion{position:fixed;top:22px;right:4.4vw;z-index:31;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid #dca26438;border-radius:30px;background:#100b0766;color:#e5cdb0;font:11px var(--bai);transition:background .2s,color .2s}
.scene-motion:hover{background:#24170bd9;color:#fff0db}.scene-motion svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.scene-motion .scene-pause,.scene-motion[data-playing=true] .scene-play{display:none}.scene-motion[data-playing=true] .scene-pause{display:block}
body:not([data-stage=signal]) .scene-motion,body[data-opening=brand] .scene-motion{visibility:hidden;pointer-events:none}
@media(max-width:760px){.scene-motion{top:15px;right:18px;font-size:10px;padding:8px 10px}.signal-art>img,.signal-art>video{object-position:63% 50%}}
@media(prefers-reduced-motion:reduce){.signal-art>video,.scene-motion{transition:none}}
body[data-stage=signal] .signal-art{animation:none;transform:none}
@keyframes fleet-arrival{from{transform:scale(1.07) translate(1%,.25%)}to{transform:scale(1) translate(0,0)}}
.signal-vignette{background:linear-gradient(90deg,#080604ed 0%,#090504b0 24%,#09050435 52%,transparent 78%),linear-gradient(0deg,#080604e0,transparent 47%,#09050460)}
.horizon-light{position:absolute;width:30vw;height:30vw;left:53%;top:8%;border-radius:50%;background:radial-gradient(ellipse,#ffbf6270,transparent 64%);mix-blend-mode:screen;opacity:0;pointer-events:none}
body[data-stage=signal] .fleet-arriving .horizon-light{animation:horizon-breath 22s ease both}
@keyframes horizon-breath{0%{opacity:0;transform:scale(.8)}45%{opacity:.45}100%{opacity:.2;transform:scale(1.12)}}
.sea-reflection{position:absolute;left:53%;top:46%;width:18%;height:60%;opacity:.1;background:linear-gradient(90deg,transparent,#ffc47470,transparent);filter:blur(25px);transform:rotate(12deg);pointer-events:none}
.signal-copy{margin:64px 0 0;max-width:620px}
.signal-copy .eyebrow{font-size:10px;margin-bottom:26px}
.signal-copy h1{font-size:clamp(80px,8.2vw,146px);line-height:.86;letter-spacing:-.065em;margin-left:-.055em}
.signal-copy .outline-word{-webkit-text-stroke:1px #eedccbce}
.hero-subtitle{margin-top:29px;font-size:clamp(17px,1.32vw,23px);line-height:1.5;color:#ebdfd2}
.signal-copy .signal-clue{margin-top:26px;margin-bottom:23px;max-width:380px;padding-left:16px}
.signal-clue p{font-size:12px;color:#c5b4a4;line-height:1.55}
.signal-copy>.micro-copy{max-width:390px;min-height:15px;margin-top:10px}
.transmission-actions{display:flex;gap:19px;align-items:center;flex-wrap:wrap}
.transmission-actions .button{min-width:215px;min-height:53px;padding:15px 22px}
.transmission-fallback{margin:0;padding:10px 0;min-height:44px;border:0;background:transparent;font-size:11px;color:#c4b3a2;display:inline-flex;gap:12px}
.transmission-fallback:hover{color:#ffe0bd}
.signal-bottom{left:4.4vw;right:4.4vw;bottom:32px!important;padding-top:17px;margin-top:0}
.signal-bottom p{font-size:9px;letter-spacing:.16em}
.signal-bottom .unclassified{display:none}
.sighting-label{display:none}
#return-commission{display:none}
body[data-stage=signal] .preview-footer{display:none}
[data-cue]{transition:opacity 1s ease,transform 1s cubic-bezier(.2,.6,.2,1);opacity:1}
body[data-opening=brand] [data-cue],body[data-opening=transmission] [data-cue]:not(.cue-visible){opacity:0;visibility:hidden;transform:translateY(12px)}
body[data-opening=brand] .signal-bottom,body[data-opening=transmission] .signal-bottom{opacity:0}
.signal-bottom{transition:opacity 1.5s}
/* A finite title sequence, never an indefinite loading screen. */
.brand-reveal{position:fixed;inset:0;z-index:80;background:transparent;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:1}
.reveal-wordmark{position:absolute;width:min(58vw,880px);aspect-ratio:824/86;opacity:0;transform:scale(.96);will-change:transform,opacity}
.reveal-curtain{position:absolute;inset:0;overflow:hidden}
.reveal-cutout{opacity:0;transform-box:view-box;transform-origin:0 0}
.reveal-wordmark{transform-origin:48.66% 50%}
.reveal-white{position:absolute;inset:0;width:100%;height:100%}
.reveal-amber{position:absolute;left:-15%;top:-132.67%;width:130%;height:389.46%;max-width:none;opacity:0}
.reveal-signature{position:absolute;bottom:18%;font:clamp(14px,1.15vw,18px) var(--bai);letter-spacing:.22em;color:#cebea9;opacity:0}
.revealing .reveal-wordmark{animation:wordmark-arrival 5s ease both,portal-zoom 5s cubic-bezier(.87,0,.93,.72) both}
.revealing .reveal-cutout{animation:letter-window 5s ease both,portal-zoom 5s cubic-bezier(.87,0,.93,.72) both}
.revealing .reveal-white{animation:white-to-amber 5s ease both}
.revealing .reveal-amber{animation:amber-arrival 5s ease both}
.revealing .reveal-signature{animation:signature-arrival 5s ease both}
@keyframes wordmark-arrival{0%,8%{opacity:0}25%,60%{opacity:1}76%,100%{opacity:0}}
@keyframes portal-zoom{0%,54%{transform:scale(1)}100%{transform:scale(var(--portal-scale,80))}}
@keyframes letter-window{0%,60%{opacity:0}76%,100%{opacity:1}}
@keyframes white-to-amber{0%,33%{opacity:1}60%,100%{opacity:0}}
@keyframes amber-arrival{0%,33%{opacity:0}60%,100%{opacity:1}}
@keyframes signature-arrival{0%,24%,77%,100%{opacity:0}40%,60%{opacity:1}}
/* The gate: the title holds with its tagline and one hot button until the visitor presses in. */
.waiting .reveal-wordmark{animation:wordmark-hold 1.4s ease both}
@keyframes wordmark-hold{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.reveal-gate{position:absolute;left:0;right:0;top:calc(50% + min(58vw,880px) * .0522 + 30px);display:grid;justify-items:center;gap:26px;padding:0 16px;text-align:center;pointer-events:auto;opacity:0}
.reveal-tagline{margin:0;font:clamp(14px,1.15vw,18px) var(--bai);letter-spacing:.22em;color:#cebea9}
.reveal-gate .button{min-height:50px;padding:0 28px}
.waiting .reveal-gate{animation:gate-arrive 1s .5s ease both}
@keyframes gate-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Entered from the gate: the wordmark is already lit, so the zoom starts from it and runs shorter. */
/* Pressed in: the white title stays as it was and goes straight into the zoom; the amber halo belongs to the auto-play sequence only. */
.entered .reveal-wordmark{animation:wordmark-depart 3s ease both,portal-zoom 3s cubic-bezier(.87,0,.93,.72) both}
.entered .reveal-cutout{animation:letter-window 3s ease both,portal-zoom 3s cubic-bezier(.87,0,.93,.72) both}
.entered .reveal-white{animation:none;opacity:1}
.entered .reveal-amber{animation:none;opacity:0}
.entered .reveal-signature{animation:none}
.entered .reveal-gate{animation:gate-depart .45s ease both;pointer-events:none}
@keyframes wordmark-depart{0%,50%{opacity:1}82%,100%{opacity:0}}
@keyframes gate-depart{to{opacity:0}}
/* A tactile, two-channel sound dock; status follows actual media playback. */
.audio-dock{position:fixed;z-index:90;right:4.4vw;bottom:max(26px,calc(env(safe-area-inset-bottom) + 16px));display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:284px;max-width:calc(100vw - 32px)}
.audio-buttons{display:flex;width:100%;padding:5px;border:1px solid #ae855349;border-radius:19px;background:linear-gradient(130deg,#21180fec,#0c0a08f7);box-shadow:0 8px 32px #0005,inset 0 1px #ffe6bc0d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.audio-control{isolation:isolate;position:relative;display:flex;align-items:center;gap:11px;flex:1;min-width:0;min-height:55px;padding:9px 11px;background:transparent;border:0;color:#ddcbb4;border-radius:13px;text-align:left;transition:background .2s ease,color .2s ease,box-shadow .2s ease;touch-action:manipulation}
.audio-control+.audio-control{margin-left:4px}
.audio-control+.audio-control:before{content:"";position:absolute;left:-3px;top:12px;bottom:12px;width:1px;background:#bd925335}
.audio-control:hover{background:#b9893e16;color:#ffebcb}
.audio-control:active{background:#b9893e28}
.audio-control:focus-visible,.sound-invitation:focus-visible{outline:2px solid #ffd298;outline-offset:4px}
.audio-control[aria-pressed=true]{color:#f5d8aa;background:#ba853810;box-shadow:inset 0 1px #ffd6980a}
.audio-icon{position:relative;flex-shrink:0;width:23px;height:25px;display:grid;place-items:center;color:#c9a675}
.audio-icon svg{width:23px;height:23px}
.audio-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.audio-label{font:500 13px/1.1 var(--bai);color:#f3e5d1;letter-spacing:.01em}
.audio-state{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font:400 10px/1.2 var(--bai);color:#bfad96;white-space:nowrap}
.audio-control[data-state=playing] .audio-state,.audio-control[data-state=speaking] .audio-state{color:#e2b87b}
.audio-action{margin-left:auto;width:13px;flex-shrink:0;display:grid;place-items:center;color:#e5c293}
.audio-action svg{width:13px;height:13px}.action-pause{display:none}
.audio-control[data-state=playing] .action-play,.audio-control[data-state=loading] .action-play{display:none}
.audio-control[data-state=playing] .action-pause,.audio-control[data-state=loading] .action-pause{display:block}
.voice-indicator{display:flex;align-items:center;gap:2px;margin-left:auto;height:16px}
.voice-indicator i{display:block;width:2px;height:3px;background:currentColor;border-radius:2px;opacity:.5}
[data-state=speaking] .voice-indicator i{opacity:1;animation:voice-level .85s ease-in-out infinite alternate}
[data-state=speaking] .voice-indicator i:nth-child(2){animation-delay:-.4s}[data-state=speaking] .voice-indicator i:nth-child(3){animation-delay:-.2s}
@keyframes voice-level{from{height:3px}to{height:13px}}
.voice-off-mark{display:none;position:absolute;inset:12px -1px auto;height:1px;background:#dcc2a0;transform:rotate(-45deg);box-shadow:0 1px #120e0a}
[data-state=off] .voice-off-mark{display:block}
.voice-progress{position:absolute;bottom:1px;left:10px;right:10px;height:1px;background:#e6b57b70;transform:scaleX(var(--voice-progress,0));transform-origin:left;opacity:0}
[data-state=speaking] .voice-progress{opacity:1}
.audio-control[data-state=loading] .audio-state{animation:audio-loading 1.2s ease-in-out infinite alternate}
@keyframes audio-loading{to{opacity:.5}}
.sound-invitation{display:flex;gap:9px;align-items:center;min-height:44px;padding:10px 15px;background:#17120eef;border:1px solid #b9966266;border-radius:13px;color:#f0d1a5;font:500 12px/1.2 var(--bai);box-shadow:0 5px 22px #0004;white-space:nowrap}
.sound-invitation svg{width:17px;height:17px}.sound-invitation:hover{background:#302314;color:#fff0d7;border-color:#c69f67}.invitation-arrow{margin-left:8px;color:#bba17b}
.audio-feedback{order:-1;color:#ead4b7;font:11px/1.5 var(--bai);text-align:right;max-width:260px;padding:8px 12px;border-radius:10px;background:#100c09ed}
.audio-feedback:empty{display:none}
body:not([data-stage=signal]) .audio-dock{bottom:max(45px,calc(env(safe-area-inset-bottom) + 16px))}
dialog .audio-dock{position:relative;inset:auto!important;width:100%;max-width:100%;margin:18px 0 24px;z-index:auto}
dialog .audio-control{max-width:none}
.log-dialog .log-context{font-size:13px;color:#ad9783}
#replay-opening{margin-bottom:14px;color:#c4a584}
#captains-log .log-body>.button{margin-top:10px}
@media(min-width:1500px) and (min-height:900px){.signal-copy{margin-top:75px}.signal-copy h1{font-size:min(8.2vw,17svh)}.signal-copy .signal-clue{margin-top:30px;margin-bottom:26px}}
@media(min-width:761px) and (max-height:850px){.signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){padding-top:100px;padding-bottom:92px;min-height:max(650px,100svh)}.site-header{height:75px}.signal-stage>.stage-kicker{top:99px}.signal-copy{margin-top:42px}.signal-copy .eyebrow{margin-bottom:20px}.signal-copy h1{font-size:min(8.2vw,14.5svh)}.hero-subtitle{margin-top:20px}.signal-copy .signal-clue{margin-top:18px;margin-bottom:17px}.signal-bottom{bottom:22px!important;padding-top:12px}}
@media(max-width:760px){
 .site-header{height:72px;padding-inline:24px}.brand img{width:40px;height:22px}.brand span{display:none}.header-register{position:static;transform:none;margin-left:auto}.header-register img{width:96px}.header-actions{min-width:0}.header-actions .log-trigger{display:none}
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){min-height:100svh;padding:112px 26px 121px;justify-content:center}
 .signal-stage>.stage-kicker{top:101px;left:26px;font-size:8px;gap:16px}.stage-kicker .rule{width:42px}
 .signal-art{background-position:62% 48%;background-size:auto 100%}
 .signal-vignette{background:linear-gradient(90deg,#080604aa,#08060418 80%),linear-gradient(0deg,#080604f7 0%,#080604c4 22%,#08060444 62%,#08060475)}
 .signal-copy{max-width:100%;margin-top:48px}.signal-copy .eyebrow{font-size:9px;margin-bottom:23px}
 .signal-copy h1{font-size:clamp(68px,17vw,112px);line-height:.89}.hero-subtitle{font-size:18px;margin-top:24px}
 .signal-copy .signal-clue{margin-top:24px;margin-bottom:22px;padding-left:12px}.signal-clue p{font-size:11px;line-height:1.6}
 .transmission-actions{gap:8px 17px}.transmission-actions .button{min-width:205px}.transmission-fallback{font-size:11px}
 .signal-copy>.micro-copy{font-size:10px}.signal-bottom{left:26px;right:26px;bottom:27px!important;padding-top:18px;height:65px}.signal-bottom p{font-size:8px;max-width:180px;line-height:1.75}

 .reveal-wordmark{width:78vw}.reveal-signature{font-size:14px;letter-spacing:.18em}.reveal-gate{top:calc(50% + 78vw * .0522 + 24px);gap:22px}.reveal-tagline{font-size:14px;letter-spacing:.18em}
 .horizon-light{width:70vw;height:70vw;left:30%;top:15%}
}
@media(max-width:760px) and (max-height:740px){.signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){min-height:740px}.signal-copy{margin-top:40px}.signal-copy h1{font-size:65px}.hero-subtitle{margin-top:20px;font-size:17px}.signal-copy .signal-clue{margin-top:19px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.brand-reveal{display:none!important}.signal-art{animation:none!important;transform:none!important}.horizon-light{animation:none!important;opacity:.2}.reveal-wordmark{animation:none!important}.sea-reflection{display:none}}
/* Keep the composition still while the transmission is revealed. */
/* The curtain stays solid black; only the expanding letter shapes reveal the fleet. */
body[data-opening=brand] .signal-stage{background:#000}
body[data-opening=brand] .audio-dock{opacity:.9}
body[data-opening=brand] .audio-dock:hover,body[data-opening=brand] .audio-dock:focus-within{opacity:1}
.skip-opening{position:fixed;z-index:91;top:27px;right:4.4vw;min-height:44px;background:transparent;color:#ad9d8c;font:11px var(--bai);display:flex;align-items:center;gap:13px;padding:10px 0}
.skip-opening:hover{color:#fff}
#transmission-actions[hidden]{display:flex!important;visibility:hidden;opacity:0;pointer-events:none}
#transmission-actions{min-height:53px;opacity:1;transition:opacity 1.4s ease}
body[data-opening=brand] .signal-copy,body[data-opening=brand] .stage-kicker{pointer-events:none}
body[data-opening=complete] .signal-stage:not(.fleet-arriving) .signal-art{animation-name:none;transform:scale(1)}
body[data-opening=complete] .signal-stage:not(.fleet-arriving) .horizon-light{animation-name:none;opacity:.2}
.hero-subtitle [data-cue]{display:inline-block}
.opening-paused .signal-art,.opening-paused .horizon-light,.opening-paused .brand-reveal,.opening-paused .brand-reveal *{animation-play-state:paused!important}
.no-script-message{position:fixed;bottom:20px;left:24px;z-index:100;font:13px var(--mina);color:#ffe3c7}
body[data-stage=signal] .header-actions{display:none}
body[data-stage=signal] .signal-bottom{padding-right:305px}
.audio-dock{transition:opacity .4s ease}
@media(max-width:760px){
 .skip-opening{top:18px;right:24px;font-size:10px}
 #transmission-actions{min-height:105px;align-content:flex-start;align-items:center;column-gap:16px;row-gap:0}
 .transmission-actions .button{flex-basis:100%;max-width:250px}
 .transmission-fallback{min-height:38px;padding:8px 0;margin:0}
 .signal-copy h1{font-size:clamp(64px,18vw,92px)}


 body[data-stage=signal]{position:relative}
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){min-height:max(760px,100svh);padding-top:125px;padding-bottom:122px;justify-content:center}
 .signal-copy{margin-top:15px}
 .signal-bottom p{max-width:165px}
}
@media(max-width:760px) and (min-height:860px){.signal-copy h1{font-size:clamp(70px,18vw,92px)}.signal-copy{margin-top:24px}.signal-stage{padding-top:146px!important}}
@media(prefers-reduced-motion:reduce){#transmission-actions{transition:none}.skip-opening{display:none}}

@media(max-width:760px){body[data-opening=transmission] .skip-opening{top:81px}}
@media(min-width:761px){body[data-opening=transmission] .skip-opening{top:75px}}
/* A focused control must not scroll the clipped scene internally during a replay. */
.signal-stage{overflow:clip}
@media(max-width:760px) and (max-height:740px){
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){min-height:100svh;padding:116px 24px 100px}
 .signal-stage>.stage-kicker{top:93px;left:24px}
 .signal-copy{margin-top:12px}.signal-copy h1{font-size:clamp(55px,17vw,61px)}
 .signal-copy .eyebrow{margin-bottom:18px;font-size:8px}
 .hero-subtitle{font-size:16px;margin-top:18px;line-height:1.45}
 .signal-copy .signal-clue{margin-top:16px;margin-bottom:16px}.signal-clue p{font-size:10px}
 #transmission-actions{min-height:94px}.transmission-actions .button{min-height:49px;max-width:238px}
 .signal-bottom{height:45px;bottom:18px!important;padding-top:12px}.signal-bottom p{display:none}


 body[data-opening=transmission] .skip-opening{top:75px}
}
@media(min-width:761px) and (max-height:850px){.signal-copy{margin-top:30px}.signal-copy h1{font-size:min(8.2vw,13svh)}}

@media(max-width:760px){
 .audio-dock{width:246px;right:18px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px));gap:8px}
 .audio-buttons{padding:4px;border-radius:17px}.audio-control{min-height:50px;padding:8px;gap:8px}
 .audio-icon,.audio-icon svg{width:20px;height:22px}.audio-label{font-size:12px}.audio-state{font-size:10px}
 .audio-action{width:11px}.audio-action svg{width:11px;height:11px}
 body[data-stage=signal] .signal-bottom{padding-right:250px;left:24px;right:18px;height:65px}
 .signal-bottom p{max-width:90px;letter-spacing:.06em;font-size:7px;line-height:1.65}
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){padding-bottom:132px}
}
@media(max-width:380px){body[data-stage=signal] .signal-bottom p{display:none}.audio-dock{right:16px}}
@media(max-width:760px) and (max-height:740px){.signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){
 .audio-control,.audio-dock{transition:none}.voice-indicator i,.audio-control[data-state=loading] .audio-state{animation:none!important}
 [data-state=speaking] .voice-indicator i:nth-child(2){height:10px}
}
@media(max-width:760px){
 body[data-stage=signal] .header-register{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}
 .scene-motion{width:44px;height:44px;justify-content:center;padding:10px}
 .scene-motion span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

.voyage-brief{margin:16px 0 0;max-width:36ch;font:13px/1.65 var(--mina);color:#b9a58f;transition:opacity .9s ease .3s}
body[data-opening=brand] .voyage-brief,body[data-opening=transmission] .voyage-brief{opacity:0}
@media(max-width:760px){.voyage-brief{font-size:12px;margin-top:12px;max-width:30ch}
 body[data-stage=claim] .audio-dock{position:static;width:auto;max-width:none;margin:0 24px 28px;align-items:stretch}}

/* One screen, whatever its height. The stage already stretches to 100svh; what
   overflowed was the fixed rhythm inside it. On screens up to 950px tall every
   vertical gap, the title's cap and the tagline's offset scale with the viewport
   height, and the empty status line stops reserving room, so the opening lands
   with the tagline still inside the first screen. */
@media(min-width:761px) and (max-height:1100px){
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){padding-top:clamp(84px,10.5svh,122px);padding-bottom:clamp(64px,8svh,124px)}
 .signal-stage>.stage-kicker{top:clamp(90px,10.4svh,120px)}
 .signal-copy{margin-top:clamp(0px,calc((100svh - 860px) * .8),64px)}
 .signal-copy .eyebrow{margin-bottom:clamp(12px,2.4svh,26px)}
 .signal-copy h1{font-size:min(clamp(80px,8.2vw,146px),13svh)}
 .hero-subtitle{margin-top:clamp(12px,2.6svh,29px)}
 .signal-copy .signal-clue{margin-top:clamp(10px,2.4svh,26px);margin-bottom:clamp(10px,2.2svh,23px)}
 .voyage-brief{margin-top:clamp(8px,1.6svh,16px)}
 .signal-copy>.micro-copy:empty{min-height:0;margin-top:0}
 .signal-bottom{bottom:clamp(16px,2.6svh,32px)!important}
}
@media(max-width:760px) and (max-height:760px){
 .signal-stage,.signal-stage:has(.transmission-fallback:not([hidden])){padding-top:100px;padding-bottom:clamp(36px,8svh,121px)}
 .signal-copy{margin-top:clamp(8px,3svh,48px)}.signal-copy .eyebrow{margin-bottom:clamp(10px,2.4svh,23px)}
 .signal-copy h1{font-size:min(clamp(68px,17vw,112px),9svh)}
 .hero-subtitle{margin-top:clamp(10px,2.2svh,24px)}
 .signal-copy .signal-clue{margin-top:clamp(10px,2.2svh,24px);margin-bottom:clamp(8px,1.8svh,22px)}
 .voyage-brief{margin-top:clamp(6px,1.4svh,16px);max-width:180px}
 .signal-copy>.micro-copy:empty{min-height:0;margin-top:0}
}
@media(max-width:760px) and (max-height:700px){.signal-bottom{display:none}}
#transmission-status[data-hint=yes]{color:#e9c9a0;letter-spacing:.04em;animation:hint-breathe 2.6s ease-in-out infinite}
@keyframes hint-breathe{0%,100%{opacity:.5}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#transmission-status[data-hint=yes]{animation:none}}

/* The state line stays inside its tile: a slow slide when it is longer than the tile, with a
   hold at each end, and a plain ellipsis for anyone who prefers reduced motion. */
.audio-copy{overflow:hidden}
.audio-state.audio-state-scroll{overflow:visible;text-overflow:clip;animation:audio-marquee 9s ease-in-out infinite}
@keyframes audio-marquee{0%,14%{transform:translateX(0)}86%,100%{transform:translateX(calc(var(--audio-overflow,0px) * -1))}}
@media(prefers-reduced-motion:reduce){.audio-state.audio-state-scroll{animation:none;overflow:hidden;text-overflow:ellipsis}}