/* 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}}
/* 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{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}
 .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}}
/* 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}
}