:root {
  --portrait-scale: .7;
  --ink: #000;
  --paper: #e9e9e7;
  --muted: #929b9f;
  --chat-accent: #b7a8d8;
  --voice-accent: #9cb9d9;
  --orb-light: #e0eaff;
  --orb-mid: #839bc7;
  --orb-dark: #343353;
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--paper);
  background: #000;
  scrollbar-width: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; }
body { overflow-x: clip; }
body.cinema-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, #character canvas:focus-visible { outline: 2px solid #bdd4e5; outline-offset: 7px; }
button:disabled { opacity: .4; cursor: wait; }
a[aria-disabled=true] { cursor: default; }
[hidden] { display: none !important; }
::selection { background: #55677d; }
::-webkit-scrollbar { display: none; }
.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; }
#scroll-track { height: 0; pointer-events: none; }
#next-scene { position: relative; height: 100svh; background: #000; }
#stage { position: fixed; inset: 0; width: 100%; height: 100svh; overflow: clip; background: #000; outline: none; }
.wordmark { font-size: 33px; font-weight: 700; line-height: 1; letter-spacing: -.055em; }
.eyebrow { margin: 0; font-size: 9px; line-height: 1.6; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: #9aa5ae; }

/* Entry opens through a feathered circle into the native video. */
#gateOverlay { position: absolute; inset: 0; z-index: 30; background: #030303; isolation: isolate; }
.gate-grain { position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.gate-header { position: absolute; top: max(30px,env(safe-area-inset-top)); left: 6%; right: 6%; display: flex; justify-content: space-between; align-items: center; }
.edition { color: #7c8287; font-size: 10px; }
.gate-center { position: absolute; left: 6%; right: 6%; top: 32%; }
.gate-title { font-size: clamp(40px,6.6vw,106px); font-weight: 400; line-height: 1.065; letter-spacing: -.055em; margin: 24px 0 27px; }
.gate-title > span { display: block; }
.gate-description { color: #a3a8ac; font-size: 15px; line-height: 1.65; margin: 0; }
.gate-bottom { position: absolute; bottom: max(26px,env(safe-area-inset-bottom)); left: 6%; right: 6%; }
.sound-prompt { display: flex; align-items: center; justify-content: space-between; color: #a7acaf; font-size: 12px; margin: 0 0 18px; }
.sound-bars { display: flex; align-items: center; gap: 3px; height: 22px; }
.sound-bars i { width: 2px; height: 9px; background: #a9b2b8; }
.sound-bars i:nth-child(2) { height: 20px; }
.sound-bars i:nth-child(3) { height: 26px; }
.sound-bars i:nth-child(4) { height: 15px; }
.gate-actions { display: flex; gap: 10px; }
.entry-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; height: 74px; border: 1px solid #d9dde0; background: #e4e7e8; color: #0b1014; border-radius: 4px; padding: 0 22px; font-size: 13px; transition: background .25s,border-color .25s; }
.entry-button:hover:not(:disabled) { background: #fff; }
.entry-button.secondary { background: #0b0d0f; color: #d5dce1; border-color: #393e43; }
.entry-button.secondary:hover:not(:disabled) { background: #171b1f; border-color: #737c84; }
.entry-arrow { font-size: 21px; line-height: 1; }
.gate-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; color: #727b82; font-size: 9px; }
.gate-footer p { margin: 0; line-height: 1.5; }
.gate-load-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 18px; }
.gate-load-status #gate-status { color: #a4b4cb; }
.gate-load-status button { min-height: 32px; padding: 5px 9px; border: 1px solid #495f87; border-radius: 4px; background: #0e1728; color: #cbdcff; font-size: 10px; }
.gate-load-status button:hover { background: #1b2d4b; border-color: #91ace0; }
.intro-spinner { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid #7895c044; border-top-color: #b0c7ec; border-radius: 50%; animation: intro-spin .9s linear infinite; }
.intro-buffering { position: absolute; z-index: 40; left: 50%; bottom: max(28px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: 85%; padding: 10px 15px; border-radius: 20px; background: #02060bbd; color: #cbd9ee; font: 11px/1.5 Arial,Helvetica,sans-serif; pointer-events: none; }
.intro-buffering.is-paused .intro-spinner { display: none; }
@keyframes intro-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .intro-spinner { animation: none; border-style: dotted; } }
.revealing .gate-center,.revealing .gate-bottom,.revealing .gate-header { opacity: 0; transition: opacity .5s; }
#film-layer { position: absolute; inset: 0; z-index: 20; background: #000; }
.film-viewport { position: absolute; inset: 0; overflow: hidden; }
#intro-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Every fragment uses the same captured end frame and the same cover crop. */
#surface-scene { position: absolute; inset: 0; z-index: 10; perspective: 1100px; transform-style: preserve-3d; }
[data-surface-frame], [data-fracture-field], .surface-shade { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-fracture-field] { perspective: 1100px; perspective-origin: 50% 46%; transform-style: preserve-3d; }
.surface-shard { position: absolute; display: block; backface-visibility: hidden; transform-origin: center; will-change: transform,opacity; }
.surface-shade { background: linear-gradient(180deg,#0001 24%,#0000 38%,#0009 69%,#000b 100%); }
.surface-wordmark { position: absolute; top: max(30px,env(safe-area-inset-top)); left: 6%; }
.surface-title { position: absolute; top: 58%; left: 6%; right: 6%; margin: 0; font-size: clamp(40px,6vw,91px); line-height: 1.07; letter-spacing: -.05em; font-weight: 400; perspective: 1100px; }
.surface-line { display: block; }
[data-surface-word] { display: inline-block; transform-origin: 50% 50%; will-change: transform,opacity; }
.surface-accent { color: #adbdc7; }
.scroll-cue { position: absolute; display: flex; align-items: center; gap: 25px; padding: 0 0 0 16px; border: 0; border-left: 1px solid #39474f; background: none; font-size: 11px; line-height: 1.55; text-align: left; color: #cdd5db; }
.scroll-cue svg { width: 16px; height: 34px; fill: none; stroke: #a8bdc9; stroke-width: 1.2; animation: cue-pulse 2.8s ease-in-out infinite; }
.surface-cue { left: 6%; bottom: max(42px,calc(env(safe-area-inset-bottom) + 20px)); min-height: 46px; }

/* Portrait and actions stay on their own plane behind the departing film. */
#portrait-scene { position: absolute; inset: 0; isolation: isolate; opacity: 0; background: #000; }
.portrait-aura { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 48%,#0f20364a,transparent 61%); }
#character { position: absolute; inset: 0; touch-action: pan-y; outline: none; }
#character canvas { display: block; width: 100%; height: 100%; }
#portrait-fallback { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: calc(90% * var(--portrait-scale)); max-width: 94%; width: auto; object-fit: contain; mask-image: linear-gradient(#000 80%,transparent 98%); pointer-events: none; }
.portrait-heading { position: absolute; top: max(33px,env(safe-area-inset-top)); left: 5%; right: 5%; text-align: center; pointer-events: none; }
.portrait-heading .eyebrow { font-size: 8px; letter-spacing: .19em; color: #7e8da1; }
.portrait-heading h2 { font-family: Georgia,'Times New Roman',serif; font-size: clamp(66px,8.5vw,132px); font-weight: 400; letter-spacing: -.055em; line-height: 1.06; margin: 8px 0 0; color: #d4def0; text-shadow: 0 0 36px #61799a38; }
.portrait-aside { position: absolute; left: 7%; top: 47%; margin: 0; font-size: 11px; line-height: 1.8; color: #8d9aac; pointer-events: none; }
.portrait-actions { position: absolute; display: flex; gap: 16px; bottom: max(86px,calc(env(safe-area-inset-bottom) + 65px)); left: 50%; width: min(640px,86%); margin-left: max(-320px,-43%); }
.connection-action { position: relative; display: flex; flex: 1; min-width: 0; align-items: center; gap: 17px; height: 83px; padding: 0 24px; border-radius: 50px; border: 1px solid color-mix(in srgb,var(--action-accent),transparent 40%); background: linear-gradient(120deg,color-mix(in srgb,var(--action-accent),transparent 84%),#060a11e6); box-shadow: inset 0 1px 0 #ffffff0c,0 5px 35px #0006; color: #e0e6f0; transition: border-color .25s,background .25s; }
.chat-action { --action-accent: var(--chat-accent); }
.voice-action { --action-accent: var(--voice-accent); }
.connection-action[href]:hover,button.connection-action:hover { border-color: var(--action-accent); background: color-mix(in srgb,var(--action-accent),#070b14 83%); }
button.connection-action { text-align: left; cursor: pointer; }
.action-copy { display: flex; flex-direction: column; gap: 6px; }
[data-action-label] { font-size: 18px; letter-spacing: -.015em; white-space: nowrap; }
[data-action-status] { color: #8d99aa; font-size: 9px; font-weight: 400; white-space: nowrap; }
.action-arrow { font-size: 23px; margin-left: auto; color: var(--action-accent); }
.chat-symbol { width: 32px; height: 32px; flex-shrink: 0; color: var(--chat-accent); }
.chat-symbol svg { width: 100%; height: 100%; }
.voice-orb { position: relative; width: 40px; height: 40px; flex-shrink: 0; perspective: 120px; animation: orb-float 5s ease-in-out infinite; }
.orb-body { position: absolute; inset: 2px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 28% 25%,var(--orb-light),var(--orb-mid) 30%,var(--orb-dark) 66%,#080b1f 94%); box-shadow: inset -4px -3px 7px #06091688,0 0 20px color-mix(in srgb,var(--orb-mid),transparent 78%); }
.orb-body i { position: absolute; inset: -35%; border-radius: 45%; background: conic-gradient(from 0deg,transparent 0deg,var(--orb-light) 90deg,transparent 143deg,var(--orb-mid) 214deg,var(--orb-dark) 280deg,transparent); mix-blend-mode: soft-light; animation: orb-turn 7s linear infinite; }
.orb-body:after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 1px 1px 3px #e6f0ff65,inset -5px -4px 10px #03061699; background: radial-gradient(ellipse at 32% 23%,#fff7,transparent 36%); }
.orb-ring { position: absolute; inset: -2px; border: 1px solid color-mix(in srgb,var(--orb-light),transparent 52%); border-radius: 50%; transform: rotateX(68deg) rotateY(-22deg); animation: orb-ring 9s ease-in-out infinite; }
.portrait-cue { left: 50%; bottom: max(25px,calc(env(safe-area-inset-bottom) + 10px)); margin-left: -46px; padding: 0; gap: 18px; border: 0; font-size: 10px; min-height: 44px; color: #8190a5; }
.portrait-cue svg { width: 11px; height: 27px; }
.no-script { position: fixed; bottom: 15px; left: 5%; right: 5%; z-index: 50; font-size: 12px; text-align: center; }
@keyframes cue-pulse { 0%,100% { transform: translateY(-3px); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
@keyframes orb-turn { to { transform: rotate(360deg); } }
@keyframes orb-float { 0%,100% { transform: translateY(1px) rotate(-7deg); } 50% { transform: translateY(-2px) rotate(7deg); } }
@keyframes orb-ring { 0%,100% { transform: rotateX(68deg) rotateY(-22deg) rotateZ(0deg); } 50% { transform: rotateX(75deg) rotateY(20deg) rotateZ(90deg); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; scroll-behavior: auto !important; } }
@media(forced-colors:active) { button,.connection-action { border: 1px solid ButtonText; } .gate-grain,.portrait-aura,.portrait-orbit { display: none; } }