@font-face { font-family: "Fusion Pixel Local"; src: url("fonts/fusion-pixel-12px-proportional-latin.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fusion Pixel Local"; src: url("fonts/fusion-pixel-12px-proportional-zh_hans.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3200-32FF, U+3300-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "DotGothic16"; src: url("fonts/dotgothic16.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("fonts/press-start-2p.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("fonts/silkscreen-bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "PixelFallback"; src: local("monospace"); }

:root {
  --night: #090b12;
  --night-2: #101525;
  --ink: #ecf4e8;
  --muted: #8f9ba7;
  --line: rgba(176, 205, 196, .22);
  --cyan: #7cf7d4;
  --pink: #ff6b9c;
  --yellow: #f5d76e;
  --purple: #9d8cff;
  --scene-sky: #14162b;
  --scene-haze: #293d5c;
  --scene-ground: #1c2a37;
  --pixel-display: "Press Start 2P", "Silkscreen", "Fusion Pixel Local", "DotGothic16", monospace;
  --pixel-text: "Fusion Pixel Local", "DotGothic16", "PixelFallback", monospace;
  --body-text: "Fusion Pixel Local", "DotGothic16", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html, body, button, a { -webkit-font-smoothing: none; text-rendering: geometricPrecision; font-synthesis: none; }
html { scroll-behavior: smooth; background: var(--night); scrollbar-color: var(--pink) var(--night); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 9px; height: 9px; }
html::-webkit-scrollbar-track { background: var(--night); border-left: 1px solid rgba(124,247,212,.12); }
html::-webkit-scrollbar-thumb { background: var(--pink); border: 2px solid var(--night); box-shadow: 2px 0 0 var(--cyan); }
html::-webkit-scrollbar-thumb:hover { background: var(--yellow); }
body { margin: 0; color: var(--ink); background: var(--night); font-family: var(--body-text); overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .095; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 3px 4px); mix-blend-mode: screen; }
html[data-motion="reduced"] .scanlines { opacity: .045; }
.scanlines::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: radial-gradient(rgba(255,255,255,.22) .55px, transparent .7px); background-size: 4px 4px; }
.cursor-dot { position: fixed; z-index: 50; width: 8px; height: 8px; pointer-events: none; background: var(--cyan); box-shadow: 4px 4px 0 var(--pink); transform: translate(-50%, -50%); opacity: 0; }

.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(72px + env(safe-area-inset-top)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: env(safe-area-inset-top) clamp(18px, 4vw, 60px) 0; border-bottom: 1px solid rgba(170, 208, 198, .16); background: rgba(9,11,18,.72); backdrop-filter: blur(11px); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; background: rgba(124,247,212,.08); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pink), var(--cyan)); transform: scaleX(0); transform-origin: left center; }
.chapter-readout { position: fixed; z-index: 16; top: 31%; right: clamp(18px, 3.5vw, 56px); display: grid; gap: 7px; justify-items: center; color: var(--cyan); font: 7px var(--pixel-display); letter-spacing: .08em; writing-mode: vertical-rl; pointer-events: none; opacity: .54; transition: color .35s steps(4), opacity .35s steps(4); }
.chapter-readout::before, .chapter-readout::after { content: ""; width: 1px; height: 28px; background: currentColor; opacity: .55; }
.chapter-readout::after { height: 44px; opacity: .24; }
.chapter-readout span:first-child { color: var(--pink); font-size: 9px; }
.chapter-readout.is-shifting { animation: chapter-shift .45s steps(4) both; }
body[data-chapter="02"] .chapter-readout { color: var(--yellow); }
body[data-chapter="03"] .chapter-readout { color: var(--pink); opacity: .66; }
.brand, .topbar-index { color: var(--ink); text-decoration: none; }
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 29px; color: var(--night); background: var(--cyan); font: 9px/1 var(--pixel-display); box-shadow: 4px 4px 0 var(--pink); }
.brand-name { font: 10px var(--pixel-text); letter-spacing: .14em; }
.topbar-status, .topbar-index { font: 9px var(--pixel-display); letter-spacing: .08em; }
.topbar-status { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.status-light { width: 7px; height: 7px; background: var(--pink); box-shadow: 0 0 0 3px rgba(255,107,156,.15); }
.status-light.live { background: var(--cyan); box-shadow: 0 0 0 3px rgba(124,247,212,.15); }
.status-light.pulse { animation: sensor-pulse .72s steps(4) both; }
.topbar-immersive { margin-left: 12px; padding: 6px 8px; color: var(--cyan); border: 1px solid rgba(124,247,212,.38); background: rgba(9,11,18,.35); font: 7px var(--pixel-display); letter-spacing: .04em; cursor: pointer; transition: color .18s, background .18s, transform .18s; }
.topbar-immersive:hover, .topbar-immersive:focus-visible { color: var(--night); background: var(--cyan); transform: translate(-1px,-1px); }
.topbar-immersive[aria-pressed="true"] { color: var(--night); background: var(--cyan); box-shadow: 3px 3px 0 var(--pink); }
.topbar-sound { margin-left: 8px; padding: 6px 7px; color: var(--yellow); border: 1px solid rgba(245,215,110,.3); background: rgba(9,11,18,.28); font: 7px var(--pixel-display); letter-spacing: .03em; cursor: pointer; transition: color .18s, background .18s, transform .18s; }
.topbar-sound:hover, .topbar-sound:focus-visible { color: var(--night); background: var(--yellow); transform: translate(-1px,-1px); }
.topbar-sound[aria-pressed="true"] { color: var(--night); background: var(--yellow); box-shadow: 3px 3px 0 var(--pink); }
.topbar-index { justify-self: end; color: var(--cyan); }
.topbar-index span { color: var(--pink); font-size: 15px; }

.portal { min-height: max(780px, 100svh); position: relative; display: grid; grid-template-columns: minmax(230px, .88fr) minmax(300px, 1.12fr); grid-template-rows: 1fr auto; align-items: center; gap: 4vw; padding: calc(118px + env(safe-area-inset-top)) clamp(24px, 9vw, 150px) calc(56px + env(safe-area-inset-bottom)); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 72% 39%, color-mix(in srgb, var(--scene-haze) 27%, transparent), transparent 37%), color-mix(in srgb, var(--scene-sky) 35%, var(--night)); transition: background .65s steps(6); }
.portal-curtain { position: absolute; z-index: 12; inset: 0; pointer-events: none; background: var(--night); animation: curtain-open 1.25s steps(9) .12s both; }
.portal-curtain::before { content: "GDA / SIGNAL 001"; position: absolute; top: 50%; left: 50%; color: var(--cyan); font: 8px var(--pixel-display); letter-spacing: .14em; transform: translate(-50%, -50%); animation: curtain-label .5s steps(3) .18s both; }
.portal-curtain span { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--pink); box-shadow: 6px 0 0 var(--cyan), -6px 0 0 var(--cyan); transform: translateX(-50%); animation: curtain-line 1.1s steps(8) .18s both; }
.portal::before { content: ""; position: absolute; inset: 72px 0 0; z-index: -2; opacity: .32; background-image: linear-gradient(rgba(124,247,212,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,247,212,.08) 1px, transparent 1px); background-position: calc(var(--tilt-x, 0) * -.55px) calc(var(--tilt-y, 0) * -.55px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, transparent, black 22%, black 70%, transparent); transition: background-position .18s steps(3); }
.portal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--cyan) 0 16px, transparent 16px 31px); opacity: .45; }
.portal-grid { position: absolute; z-index: -1; width: 560px; height: 280px; right: -110px; bottom: 42px; opacity: .26; transform: perspective(420px) rotateX(62deg) rotateZ(-7deg); background: linear-gradient(rgba(124,247,212,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(124,247,212,.4) 1px, transparent 1px); background-position: calc(var(--tilt-x, 0) * -1px) calc(var(--tilt-y, 0) * -.65px); background-size: 32px 32px; animation: grid-breathe 13s steps(8) infinite; transition: background-position .18s steps(3); }
.portal-orbit { position: absolute; border: 1px solid rgba(255,107,156,.35); pointer-events: none; }
.orbit-a { width: 52vw; height: 16vw; top: 20%; right: -9%; border-radius: 50%; animation: orbit-a-drift 18s steps(12) infinite; }
.orbit-b { width: 40vw; height: 12vw; top: 27%; right: 1%; border-radius: 50%; border-color: rgba(124,247,212,.24); animation: orbit-b-drift 23s steps(14) -4s infinite; }
.portal-copy { align-self: center; max-width: 530px; position: relative; z-index: 2; }
.portal-copy { animation: boot-copy .72s steps(5) both; transition: opacity .32s steps(4), filter .32s steps(4); }
.micro-label, .nav-label, .story-top, .story-subtitle, .sources h3, .stage-caption, .portal-hint, .portal-corner, footer { font-family: var(--pixel-display); }
.micro-label { margin: 0 0 25px; color: var(--cyan); font-size: 9px; line-height: 1.7; letter-spacing: .11em; }
.portal h1 { margin: 0; max-width: 580px; color: var(--ink); font: 400 clamp(37px, 6vw, 78px)/1.33 var(--pixel-display); letter-spacing: -.09em; text-transform: uppercase; text-shadow: calc(5px + var(--tilt-x, 0) * .08px) calc(5px + var(--tilt-y, 0) * .08px) 0 rgba(255,107,156,.34); transition: text-shadow .18s steps(3); }
.portal h1 span { color: var(--pink); text-shadow: calc(5px - var(--tilt-x, 0) * .06px) calc(5px - var(--tilt-y, 0) * .06px) 0 rgba(124,247,212,.3); }
.portal-intro { max-width: 440px; margin: 30px 0 0; color: #b9c5c8; font: 15px/2.05 var(--body-text); letter-spacing: .035em; }
.world-stage { width: min(100%, 500px); height: min(72vh, 620px); min-height: 440px; align-self: center; justify-self: center; position: relative; display: grid; place-items: center; transform: translateZ(0); transition: filter .32s steps(4); }
.world-stage { animation: boot-stage .95s steps(6) .12s both; }
.world-stage::before { content: ""; position: absolute; width: 86%; height: 35%; bottom: 4%; border: 1px solid rgba(124,247,212,.16); transform: perspective(440px) rotateX(63deg) rotateZ(-9deg); box-shadow: 0 0 38px rgba(124,247,212,.09); }
#world-canvas { width: min(100%, 410px); height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 18px 17px rgba(0,0,0,.4)); transform: perspective(900px) rotateX(calc(var(--tilt-y, 0) * -.13deg)) rotateY(calc(var(--tilt-x, 0) * .16deg)); transform-origin: center center; transition: transform .18s steps(3); cursor: grab; touch-action: none; }
#world-canvas:focus-visible { outline: 1px solid var(--yellow); outline-offset: 5px; box-shadow: 5px 5px 0 rgba(255,107,156,.48); }
#world-canvas:active { cursor: grabbing; }
.calibration-reticle { position: absolute; z-index: 3; left: 50%; top: 50%; width: 72px; height: 72px; border: 1px solid var(--yellow); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.72); transition: opacity .22s steps(4), transform .22s steps(4); }
.calibration-reticle::before, .calibration-reticle::after { content: ""; position: absolute; background: var(--yellow); }
.calibration-reticle::before { top: 50%; left: -13px; right: -13px; height: 1px; }
.calibration-reticle::after { left: 50%; top: -13px; bottom: -13px; width: 1px; }
.calibration-reticle span { position: absolute; left: 50%; bottom: -19px; color: var(--yellow); font: 6px var(--pixel-display); letter-spacing: .1em; white-space: nowrap; transform: translateX(-50%); }
.world-stage[data-sensor-state="calibrating"] .calibration-reticle { opacity: .9; transform: translate(-50%, -50%) scale(1); animation: reticle-breathe 1.1s steps(4) infinite; }
.world-stage[data-sensor-state="live"] .calibration-reticle { opacity: .12; transform: translate(-50%, -50%) scale(1.12); }
.stage-caption { position: absolute; bottom: 12px; left: 5%; right: 5%; display: flex; justify-content: space-between; color: rgba(222,244,230,.62); font-size: 8px; letter-spacing: .08em; }
.stage-console { position: absolute; top: 15px; left: 5%; right: 5%; display: flex; justify-content: space-between; color: rgba(197,220,214,.6); font: 7px var(--pixel-display); letter-spacing: .08em; }
.stage-console::after { content: ""; position: absolute; top: 14px; left: 0; width: calc(var(--field-energy, 0) * 1%); height: 2px; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 3px 0 0 var(--cyan); opacity: .82; transition: width .18s steps(3), background .3s steps(4); }
.field-compass { position: absolute; top: -2px; right: 33px; width: 17px; height: 12px; border: 1px solid rgba(124,247,212,.32); background: rgba(9,11,18,.36); transform: translate(var(--compass-x, 0px), var(--compass-y, 0px)); transition: transform .18s steps(3), border-color .25s steps(3); }
.field-compass::before { content: ""; position: absolute; inset: 2px 7px; border-left: 1px solid rgba(236,244,232,.34); box-shadow: -5px 4px 0 -4px rgba(236,244,232,.55), 5px 4px 0 -4px rgba(236,244,232,.55); }
.field-compass::after { content: ""; position: absolute; left: 6px; top: 4px; width: 3px; height: 3px; background: var(--pink); box-shadow: 2px 0 0 var(--cyan); }
.stage-console[data-field-state="tilted"] .field-compass, .stage-console[data-field-state="signal"] .field-compass { border-color: var(--pink); }
.stage-console > span:last-of-type { color: var(--yellow); }
.stage-zero { position: absolute; z-index: 4; top: 34px; right: 5%; padding: 3px 5px; color: var(--yellow); border: 1px solid rgba(245,215,110,.28); background: rgba(9,11,18,.34); font: 5px var(--pixel-display); letter-spacing: .06em; cursor: pointer; opacity: .48; transition: color .2s steps(3), border-color .2s steps(3), opacity .2s steps(3), transform .2s steps(3); }
.stage-zero:hover, .stage-zero:focus-visible { color: var(--night); border-color: var(--yellow); background: var(--yellow); opacity: 1; transform: translate(-1px, -1px); outline: none; }
.world-stage[data-observer-state="attending"] .stage-zero,
.world-stage[data-observer-state="motion"] .stage-zero { opacity: .9; }
.stage-console[data-field-state="breathing"] span:first-child { color: var(--yellow); }
.stage-console[data-field-state="tilted"] span:first-child { color: var(--pink); }
.stage-console[data-field-state="signal"] span:first-child { color: var(--cyan); text-shadow: 2px 0 0 rgba(255,107,156,.55); }
.stage-console[data-field-state="calibrating"] span:first-child { color: var(--yellow); animation: pulse .9s steps(3) infinite; }
.stage-ident { position: absolute; top: 39px; left: 5%; right: 5%; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; color: rgba(197,220,214,.48); font: 7px var(--pixel-display); letter-spacing: .06em; }
.stage-ident strong { overflow: hidden; color: var(--cyan); font: 7px var(--pixel-display); font-weight: 400; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.stage-plaque { position: absolute; z-index: 2; left: max(-160px, -25vw); bottom: 83px; width: min(160px, 25vw); padding: 8px 9px 7px; border-left: 2px solid var(--pink); background: rgba(9,11,18,.48); opacity: .82; transform: translateX(0); transition: opacity .28s steps(4), transform .28s steps(4), border-color .4s steps(4), background .4s steps(4); }
.stage-plaque::after { content: ""; position: absolute; right: -5px; top: 0; width: 4px; height: 4px; background: var(--cyan); box-shadow: 0 18px 0 var(--pink); }
.stage-plaque > span { display: block; color: var(--yellow); font: 6px/1.4 var(--pixel-display); letter-spacing: .07em; }
.stage-plaque p { margin: 5px 0 0; color: rgba(236,244,232,.82); font: 10px/1.55 var(--body-text); }
.stage-plaque em { display: block; margin-top: 7px; color: var(--cyan); font: 5px/1.35 var(--pixel-display); font-style: normal; letter-spacing: .07em; opacity: .7; }
.stage-plaque.is-switching { animation: plaque-arrive .42s steps(4) both; }
.stage-frame { position: absolute; z-index: 1; inset: 7% 8% 11%; pointer-events: none; border: 1px solid rgba(124,247,212,.13); opacity: .56; transition: opacity .28s steps(4), border-color .28s steps(4), box-shadow .28s steps(4); background: linear-gradient(var(--cyan), var(--cyan)) left top/28px 1px no-repeat, linear-gradient(var(--cyan), var(--cyan)) left top/1px 28px no-repeat, linear-gradient(var(--pink), var(--pink)) right bottom/28px 1px no-repeat, linear-gradient(var(--pink), var(--pink)) right bottom/1px 28px no-repeat; }
.stage-frame::before { content: "FIELD / 8-BIT SPECIMEN"; position: absolute; top: 28px; left: 9px; padding: 0 4px; color: rgba(197,220,214,.54); background: var(--scene-sky); font: 6px var(--pixel-display); letter-spacing: .08em; }
.stage-frame::after { content: "↗"; position: absolute; right: -5px; top: 27px; color: var(--pink); font: 10px var(--pixel-display); }
.stage-frame span { position: absolute; right: 7px; bottom: -11px; padding-left: 5px; color: rgba(245,215,110,.72); background: var(--scene-ground); font: 6px var(--pixel-display); letter-spacing: .08em; }
.world-stage:has(.stage-console[data-field-state="signal"]) .stage-frame { opacity: .98; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,107,156,.08), inset 0 0 26px rgba(255,107,156,.06); }
.stage-observer { position: absolute; z-index: 3; left: 5%; bottom: 32px; display: flex; align-items: center; gap: 6px; color: rgba(197,220,214,.52); font: 6px var(--pixel-display); letter-spacing: .08em; transition: color .25s steps(3), opacity .25s steps(3); }
.observer-pip { width: 5px; height: 5px; background: var(--cyan); box-shadow: 3px 0 0 var(--pink); transition: background .25s steps(3), box-shadow .25s steps(3), transform .25s steps(3); }
.world-stage[data-observer-state="attending"] .stage-observer { color: var(--pink); }
.world-stage[data-observer-state="attending"] .observer-pip { background: var(--pink); box-shadow: 3px 0 0 var(--yellow); transform: translateY(-1px); }
.world-stage[data-observer-state="motion"] .stage-observer { color: var(--cyan); }
.world-stage[data-observer-state="motion"] .observer-pip { background: var(--cyan); box-shadow: 3px 0 0 var(--yellow); animation: observer-pulse 1.2s steps(4) infinite; }
.world-stage[data-observer-state="attract"] .stage-observer { color: var(--yellow); opacity: .65; }
.world-stage[data-observer-state="attract"] .observer-pip { background: var(--yellow); box-shadow: 3px 0 0 var(--pink); animation: observer-pulse 2.2s steps(4) infinite; }
.world-stage[data-observer-state="attending"] .stage-frame { opacity: .98; border-color: rgba(255,107,156,.48); box-shadow: 0 0 0 3px rgba(255,107,156,.1), inset 0 0 30px rgba(255,107,156,.08); }
.world-stage[data-observer-state="motion"] .stage-frame { opacity: .82; border-color: rgba(124,247,212,.42); }
.world-stage[data-observer-state="attract"] .stage-frame { animation: attract-frame 3.2s steps(6) infinite; }
.world-stage.is-contacting .stage-frame { animation: contact-frame .52s steps(4) both; }
.world-stage[data-observer-state="resting"] .stage-plaque { opacity: .46; transform: translateX(-5px); }
.world-stage[data-observer-state="attract"] .stage-plaque { opacity: .62; }
.world-stage[data-observer-state="attending"] .stage-plaque,
.world-stage[data-observer-state="motion"] .stage-plaque { opacity: 1; transform: translateX(0); }
.portal-actions { align-self: end; display: flex; flex-wrap: wrap; gap: 13px; z-index: 3; }
.portal-actions { animation: boot-copy .72s steps(5) .22s both; }
.pixel-button { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 17px; color: var(--night); border: 0; background: var(--cyan); font: 10px var(--pixel-display); letter-spacing: .02em; text-decoration: none; cursor: pointer; box-shadow: 5px 5px 0 var(--pink); transition: transform .16s, box-shadow .16s, filter .16s; }
.pixel-button:hover, .pixel-button:focus-visible { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--pink); filter: brightness(1.08); }
.pixel-button:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--pink); }
.pixel-button.is-live { filter: saturate(.8) brightness(1.04); }
.pixel-button-ghost { color: var(--cyan); background: transparent; border: 1px solid var(--cyan); box-shadow: 5px 5px 0 var(--pink); }
.pixel-button-ghost:hover, .pixel-button-ghost:focus-visible { color: var(--night); background: var(--cyan); }
.button-arrow { color: var(--pink); font-size: 16px; line-height: 1; }
.pixel-button-ghost .button-arrow { color: var(--yellow); }
.portal-hint { grid-column: 1 / -1; display: flex; align-items: center; gap: 13px; color: rgba(197,220,214,.58); font-size: 8px; letter-spacing: .08em; }
.portal-hint { animation: boot-copy .72s steps(5) .35s both; }
.hint-icon { color: var(--yellow); font-size: 16px; animation: pulse 2.2s steps(3) infinite; }
.tilt-gesture { position: relative; display: inline-block; flex: 0 0 auto; width: 13px; height: 21px; border: 1px solid var(--cyan); background: rgba(124,247,212,.06); box-shadow: 3px 3px 0 rgba(255,107,156,.35); transform: rotate(-10deg); animation: tilt-device 2.8s steps(6) infinite; }
.tilt-gesture::before { content: ""; position: absolute; left: 2px; top: 3px; right: 2px; bottom: 4px; background: repeating-linear-gradient(0deg, rgba(124,247,212,.5) 0 1px, transparent 1px 3px); }
.tilt-gesture::after { content: ""; position: absolute; left: 5px; bottom: 1px; width: 2px; height: 2px; background: var(--pink); }
.portal.is-attending .tilt-gesture, .portal:has(.world-stage[data-sensor-state="live"]) .tilt-gesture { opacity: .2; animation-play-state: paused; }
html[data-motion="reduced"] .tilt-gesture { opacity: .42; animation: none; transform: rotate(-8deg); }
.hint-line { width: 58px; height: 1px; background: var(--pink); opacity: .55; }
.portal-ritual { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; margin-top: -11px; color: rgba(197,220,214,.38); font: 7px var(--pixel-display); letter-spacing: .09em; animation: boot-copy .72s steps(5) .45s both; }
.ritual-step { display: inline-flex; align-items: center; gap: 7px; opacity: .48; transition: color .2s, opacity .2s; }
.ritual-step b { display: grid; place-items: center; width: 20px; height: 17px; color: var(--pink); border: 1px solid rgba(255,107,156,.42); font: 7px var(--pixel-display); font-weight: 400; }
.ritual-step.active { color: var(--cyan); opacity: 1; }
.ritual-step.active b { color: var(--night); background: var(--pink); border-color: var(--pink); }
.portal-ritual i { width: 28px; height: 1px; background: var(--line); }
.portal-corner { position: absolute; bottom: 42px; color: rgba(197,220,214,.42); font-size: 7px; line-height: 1.7; letter-spacing: .08em; }
.corner-left { left: clamp(24px, 4vw, 60px); }
.corner-right { right: clamp(24px, 4vw, 60px); text-align: right; }
.portal.is-attending .portal-copy { opacity: .62; filter: saturate(.7); }
.portal.is-attending .portal-hint, .portal.is-attending .portal-ritual, .portal.is-attending .portal-corner { opacity: .38; }
.portal.is-attending .portal-grid { opacity: .12; }
.portal.is-attending .portal-orbit { opacity: .1; }
.portal.is-attending .world-stage { filter: drop-shadow(0 20px 22px rgba(0,0,0,.54)) brightness(1.08); }
.portal.is-attending .stage-frame { opacity: .92; border-color: rgba(124,247,212,.34); }
body.is-idle[data-chapter="01"] .topbar { opacity: .56; }
body.is-idle[data-chapter="01"] .portal-copy { opacity: .58; filter: saturate(.65); }
body.is-idle[data-chapter="01"] .portal-actions,
body.is-idle[data-chapter="01"] .portal-hint,
body.is-idle[data-chapter="01"] .portal-ritual,
body.is-idle[data-chapter="01"] .portal-corner { opacity: .16; transition: opacity .6s steps(5); animation: none !important; }
body.is-idle[data-chapter="01"] .portal-copy { animation: none !important; }
body.is-idle[data-chapter="01"] .portal-grid,
body.is-idle[data-chapter="01"] .portal-orbit { opacity: .08; animation: none !important; }
body.is-idle[data-chapter="01"] .world-stage { animation: none !important; filter: drop-shadow(0 22px 26px rgba(0,0,0,.56)) brightness(1.04); }
body.is-idle[data-chapter="01"] .portal.is-idle-shift .world-stage { animation: idle-object-shift .9s steps(6) both !important; }
body.is-idle[data-chapter="01"] .world-stage::before { animation: idle-plinth 4.8s steps(8) infinite; }
.portal.is-departing .portal-copy, .portal.is-departing .portal-actions, .portal.is-departing .portal-hint, .portal.is-departing .portal-ritual, .portal.is-departing .portal-corner { animation: portal-depart .78s steps(6) both; }
.portal.is-departing .world-stage { animation: stage-depart .84s steps(7) both; }
.archive.is-arriving { animation: archive-arrive .9s steps(7) both; }
.portal.is-returning { animation: portal-return .9s steps(7) both; }
.closing.is-departing { animation: closing-depart .74s steps(6) both; }

.archive-field { position: fixed; z-index: 15; right: clamp(18px, 4vw, 56px); bottom: calc(72px + env(safe-area-inset-bottom)); width: 92px; height: 82px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .4s steps(4), transform .4s steps(4); }
body[data-chapter="02"] .archive-field { opacity: .24; transform: translateY(0); }
body[data-chapter="02"] .archive-field[data-gravity-state="breathing"] { opacity: .56; }
body[data-chapter="02"] .archive-field[data-gravity-state="tilted"] { opacity: .86; }
body[data-chapter="03"] .archive-field { opacity: 0; transform: translateY(10px); }
.archive-field-label { position: absolute; top: 0; right: 0; color: var(--cyan); font: 5px var(--pixel-display); letter-spacing: .08em; white-space: nowrap; }
.archive-field-frame { position: absolute; left: 5px; right: 5px; top: 14px; bottom: 12px; border: 1px solid color-mix(in srgb, var(--cyan) 42%, transparent); background: linear-gradient(rgba(124,247,212,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(124,247,212,.1) 1px, transparent 1px); background-size: 14px 14px; transform: perspective(260px) rotateX(55deg) rotateZ(-8deg); box-shadow: 3px 3px 0 color-mix(in srgb, var(--pink) 28%, transparent); }
.archive-field-frame::before, .archive-field-frame::after { content: ""; position: absolute; background: var(--cyan); opacity: .55; }
.archive-field-frame::before { left: 50%; top: -7px; bottom: -7px; width: 1px; }
.archive-field-frame::after { top: 50%; left: -7px; right: -7px; height: 1px; }
.archive-field-trail { position: absolute; z-index: 1; left: 50%; top: 48%; width: var(--field-trail-length, 18px); height: 1px; transform-origin: left center; transform: rotate(var(--field-angle, 0deg)); background: repeating-linear-gradient(90deg, var(--yellow) 0 2px, transparent 2px 5px); opacity: .42; transition: width .18s steps(3), transform .18s steps(3), opacity .25s steps(3); }
.archive-field-trail::after { content: ""; position: absolute; right: -1px; top: -2px; width: 4px; height: 4px; background: var(--pink); opacity: .76; }
.archive-field-crystal { position: absolute; left: 50%; top: 48%; width: 17px; height: 25px; background: var(--yellow); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translate(calc(-50% + var(--tilt-x, 0) * .22px), calc(-50% + var(--tilt-y, 0) * .13px)); transition: transform .18s steps(3), background .3s steps(4); box-shadow: 4px 4px 0 var(--pink); }
.archive-field-crystal::before { content: ""; position: absolute; inset: 0 50% 0 0; background: color-mix(in srgb, var(--pink) 72%, transparent); clip-path: polygon(50% 0, 100% 50%, 50% 100%); }
.archive-field-vector { position: absolute; left: 50%; top: 48%; width: 22px; height: 1px; background: var(--pink); transform-origin: left center; transform: rotate(calc(var(--tilt-x, 0) * 1deg)); opacity: .72; transition: transform .18s steps(3); }
.archive-field-vector::after { content: ""; position: absolute; right: -1px; top: -2px; width: 4px; height: 4px; background: var(--pink); clip-path: polygon(100% 50%, 0 0, 0 100%); }
.archive-field-coordinates { position: absolute; bottom: 0; left: 0; color: var(--yellow); font: 5px var(--pixel-display); letter-spacing: .04em; }

/* Exhibition view: the same scene can become a quiet, full-screen object.
   The fallback class is used when a browser refuses native fullscreen. */
body.is-immersive, :fullscreen { overflow: hidden; }
body.is-immersive .portal, :fullscreen .portal { min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; padding: 88px 5vw 38px; }
body.is-immersive .portal-copy, :fullscreen .portal-copy { position: absolute; z-index: 4; left: 6vw; top: 16vh; max-width: 360px; opacity: .8; }
body.is-immersive .portal-copy .micro-label, :fullscreen .portal-copy .micro-label { margin-bottom: 16px; }
body.is-immersive .portal h1, :fullscreen .portal h1 { font-size: clamp(32px, 4.5vw, 66px); }
body.is-immersive .portal-intro, :fullscreen .portal-intro { max-width: 330px; margin-top: 18px; font-size: 13px; line-height: 1.85; }
body.is-immersive .world-stage, :fullscreen .world-stage { grid-column: 1; grid-row: 1; width: min(84vw, 850px); height: min(86svh, 780px); min-height: 0; justify-self: center; }
body.is-immersive #world-canvas, :fullscreen #world-canvas { width: min(100%, 560px); }
body.is-immersive .portal-actions, :fullscreen .portal-actions { position: absolute; left: 6vw; bottom: 11vh; }
body.is-immersive .portal-hint, :fullscreen .portal-hint { position: absolute; right: 6vw; bottom: 12vh; width: max-content; }
body.is-immersive .portal-ritual, :fullscreen .portal-ritual { position: absolute; left: 6vw; bottom: 5vh; }
body.is-immersive .portal-corner, :fullscreen .portal-corner { opacity: .72; }
body.is-immersive .topbar, :fullscreen .topbar { background: rgba(9,11,18,.86); }

.archive { position: relative; background: color-mix(in srgb, var(--scene-ground) 32%, #111525); border-top: 1px solid rgba(124,247,212,.22); transition: background .65s steps(6); }
.archive::before { content: ""; position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: linear-gradient(90deg, transparent 0 49%, rgba(124,247,212,.08) 50%, transparent 51%); background-size: 64px 64px; }
.archive-heading { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 7vw; padding: 120px clamp(24px, 9vw, 150px) 72px; }
.archive-heading-side { display: grid; gap: 26px; justify-items: end; max-width: 390px; }
.archive h2, .closing h2 { margin: 0; font: 400 clamp(32px, 5.2vw, 72px)/1.36 var(--pixel-display); letter-spacing: -.09em; }
.archive h2 span, .closing h2 span { color: var(--pink); }
.archive-note { max-width: 360px; margin: 0 0 4px; color: #a7b3b9; font: 14px/2.05 var(--body-text); }
.archive-trace { width: min(100%, 390px); display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(124,247,212,.28); }
.trace-label { color: var(--pink); font: 7px var(--pixel-display); letter-spacing: .08em; white-space: nowrap; }
.trace-route { min-width: 0; overflow: hidden; color: var(--cyan); font: 8px var(--pixel-display); letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.archive-layout { position: relative; display: grid; grid-template-columns: minmax(280px, 31%) 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.archive-nav { border-right: 1px solid var(--line); padding: 42px 0; }
.nav-title-row { display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(20px, 3vw, 50px) 20px; }
.nav-label { margin: 0; color: var(--cyan); font-size: 8px; letter-spacing: .1em; }
.filter-button { display: none; color: var(--cyan); background: transparent; border: 1px solid rgba(124,247,212,.5); padding: 10px 12px; font: 9px var(--pixel-text); }
.designer-list { display: flex; flex-direction: column; }
.designer-button { position: relative; width: 100%; display: grid; grid-template-columns: 30px 48px 1fr; gap: 8px; align-items: center; padding: 16px clamp(20px, 3vw, 50px); color: #778892; border: 0; border-left: 4px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: color .2s, background .2s, border .2s; }
.designer-button::after { content: ""; position: absolute; right: clamp(20px, 3vw, 50px); width: 5px; height: 5px; background: var(--pink); opacity: 0; }
.designer-button:hover, .designer-button.active { color: var(--ink); background: rgba(124,247,212,.06); border-left-color: var(--cyan); }
.designer-button.active::after { opacity: 1; }
.designer-glyph { display: grid; grid-template-columns: repeat(5, 4px); grid-auto-rows: 4px; gap: 1px; width: 24px; height: 24px; padding: 2px; border: 1px solid rgba(124,247,212,.22); background: rgba(9,11,18,.48); opacity: .56; transition: border-color .2s, opacity .2s, transform .2s steps(3); }
.designer-glyph i { display: block; width: 3px; height: 3px; background: rgba(124,247,212,.08); }
.designer-glyph i.on { background: var(--glyph-accent, var(--pink)); box-shadow: 1px 0 0 var(--glyph-glow, rgba(124,247,212,.48)); }
.designer-button:hover .designer-glyph, .designer-button.active .designer-glyph { border-color: var(--glyph-glow, var(--cyan)); opacity: 1; transform: translateY(-1px); }
.designer-id { color: var(--pink); font: 9px var(--pixel-display); }
.designer-name { font: 15px var(--pixel-text); letter-spacing: .04em; }
.designer-status { grid-column: 3; color: #526672; font: 8px var(--pixel-display); }
.designer-button[data-visited="true"] .designer-status { color: var(--yellow); }
.designer-button[data-visited="true"] .designer-glyph { opacity: .82; }
.story-panel { position: relative; isolation: isolate; overflow: hidden; min-height: 720px; padding: clamp(40px, 7vw, 100px) clamp(24px, 8vw, 130px); }
.story-panel::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .32; background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--story-glow, var(--cyan)) 18%, transparent), transparent 28%), linear-gradient(90deg, transparent 0 75%, color-mix(in srgb, var(--story-accent, var(--pink)) 5%, transparent) 75% 75.2%, transparent 75.2%); }
.story-panel > :not(.story-sigil) { position: relative; z-index: 1; }
.story-sigil { position: absolute; z-index: 0; top: clamp(54px, 7vw, 108px); right: clamp(26px, 7vw, 112px); width: 126px; height: 156px; color: color-mix(in srgb, var(--story-glow, var(--cyan)) 72%, white); opacity: .28; transform: rotate(45deg); transform-origin: center; pointer-events: none; transition: opacity .35s steps(4), transform .35s steps(4), color .35s steps(4); }
.story-sigil::after { content: ""; position: absolute; left: -28px; top: 54px; width: 194px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--story-accent, var(--pink)) 62%, transparent), transparent); opacity: .45; transform: rotate(-45deg); }
.story-sigil-label, .story-sigil-caption { position: absolute; display: block; color: var(--story-accent, var(--pink)); font: 6px var(--pixel-display); letter-spacing: .08em; white-space: nowrap; transform: rotate(-45deg); }
.story-sigil-label { top: 8px; right: -17px; }
.story-sigil-caption { right: -24px; bottom: 12px; color: var(--story-glow, var(--yellow)); opacity: .62; }
.story-sigil-grid { position: absolute; top: 36px; left: 39px; display: grid; grid-template-columns: repeat(5, 10px); grid-auto-rows: 10px; gap: 3px; width: 62px; height: 62px; padding: 5px; border: 1px solid color-mix(in srgb, var(--story-glow, var(--cyan)) 56%, transparent); background: color-mix(in srgb, var(--scene-sky) 72%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--story-accent, var(--pink)) 42%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--story-accent, var(--pink)) 18%, transparent); }
.story-sigil-grid i { display: block; width: 10px; height: 10px; background: color-mix(in srgb, var(--story-glow, var(--cyan)) 12%, transparent); }
.story-sigil-grid i.on { background: var(--story-accent, var(--pink)); box-shadow: 3px 0 0 color-mix(in srgb, var(--story-glow, var(--cyan)) 72%, transparent); }
.story-panel.is-switching { animation: story-arrive .48s steps(5) both; }
.story-panel.is-switching .story-sigil { animation: sigil-arrive .62s steps(5) both; }
.story-signal { position: absolute; z-index: 4; top: clamp(20px, 4vw, 58px); right: clamp(24px, 8vw, 130px); padding: 4px 7px 3px; color: var(--cyan); border-left: 2px solid var(--pink); background: rgba(9,11,18,.62); font: 6px var(--pixel-display); letter-spacing: .1em; opacity: 0; pointer-events: none; }
.story-signal::after { content: ""; position: absolute; left: -2px; right: -100vw; bottom: -5px; height: 1px; background: linear-gradient(90deg, var(--pink), rgba(124,247,212,.2), transparent); }
.story-panel.is-switching .story-signal { animation: story-signal-flash .74s steps(5) both; }
.story-top { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 24px; color: var(--muted); font-size: 8px; letter-spacing: .08em; }
.story-id { color: var(--pink); }
.story-field-state { margin-left: auto; color: var(--cyan); transition: color .25s steps(3), text-shadow .25s steps(3); }
.story-field-state::before { content: "◈ "; color: var(--yellow); }
.story-panel[data-gravity-state="breathing"] .story-field-state { color: var(--yellow); animation: story-state-breathe 1.9s steps(5) infinite; }
.story-panel[data-gravity-state="tilted"] .story-field-state { color: var(--pink); text-shadow: 3px 0 0 rgba(124,247,212,.42); }
.story-title { margin: 0; color: var(--cyan); font: 400 clamp(31px, 4vw, 59px)/1.25 var(--pixel-display); letter-spacing: -.1em; text-shadow: 4px 4px 0 rgba(255,107,156,.35); }
.story-subtitle { margin: 17px 0 38px; color: #92a7af; font-size: 8px; line-height: 1.8; letter-spacing: .09em; }
.story-progress { max-width: 720px; display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 12px; margin: 0 0 30px; color: #758d94; font: 6px var(--pixel-display); letter-spacing: .08em; }
.story-progress-label { color: var(--pink); white-space: nowrap; }
.story-progress-bar { position: relative; display: block; height: 3px; overflow: hidden; background: rgba(124,247,212,.12); }
.story-progress-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 3px 0 0 var(--yellow); transition: width .35s steps(4); }
.story-progress > span:last-child { color: var(--yellow); min-width: 30px; text-align: right; }
.story-kicker { max-width: 650px; margin: 0 0 39px; padding: 19px 20px 17px; color: var(--night); background: var(--yellow); font: 15px/1.9 var(--body-text); box-shadow: 6px 6px 0 var(--pink); }
.story-body { max-width: 710px; }
.story-beat { position: relative; }
.story-beat + .story-beat { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(124,247,212,.16); }
.story-beat-index { display: block; margin: 0 0 9px; color: var(--story-accent, var(--pink)); font: 6px var(--pixel-display); letter-spacing: .1em; transform: translate(calc(var(--tilt-x, 0) * .08px), calc(var(--tilt-y, 0) * .04px)); transition: color .25s steps(3), transform .18s steps(3); }
.story-beat:nth-child(2) .story-beat-index { color: var(--yellow); }
.story-beat:nth-child(3) .story-beat-index { color: var(--cyan); }
.story-body p { position: relative; margin: 0 0 22px; color: #aebdbe; font: 15px/2.1 var(--body-text); letter-spacing: .025em; transition: color .35s steps(4), transform .35s steps(4); }
.story-beat p { margin-bottom: 0; }
.story-body p::before { content: ""; position: absolute; left: -21px; top: 10px; width: 5px; height: 5px; background: rgba(124,247,212,.24); opacity: .46; transform: translateX(0); transition: background .25s steps(3), box-shadow .25s steps(3), opacity .25s steps(3), transform .25s steps(3); }
.story-body p.is-seen { color: #c9d6d1; transform: translateX(2px); }
.story-body p.is-seen::before { background: var(--pink); box-shadow: 3px 0 0 var(--cyan); opacity: 1; transform: translateX(2px); }
.story-body p:first-child::first-letter { color: var(--pink); font: 400 35px/1 var(--pixel-display); }
.story-insight { max-width: 720px; margin: 44px 0; padding: 21px 0 20px; border-top: 1px solid rgba(124,247,212,.4); border-bottom: 1px solid rgba(124,247,212,.4); }
.story-insight strong { display: block; margin-bottom: 12px; color: var(--pink); font: 8px var(--pixel-display); letter-spacing: .08em; }
.story-insight p { margin: 0; color: var(--cyan); font: 16px/1.8 var(--body-text); }
.sources { max-width: 720px; padding-top: 24px; border-top: 1px solid var(--line); }
.sources h3 { margin: 0 0 15px; color: #768d95; font-size: 8px; letter-spacing: .1em; }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { display: grid; gap: 3px; margin: 11px 0; }
.sources a { color: #a9c6c5; font: 12px/1.7 var(--body-text); text-underline-offset: 4px; text-decoration-color: var(--pink); }
.source-url { color: #5f757d; font: 6px/1.55 var(--pixel-display); letter-spacing: .025em; overflow-wrap: anywhere; opacity: .78; }
.sources a:hover + .source-url, .sources a:focus-visible + .source-url { color: var(--cyan); opacity: 1; }
.story-pager { max-width: 720px; display: grid; grid-template-columns: 1fr max-content 1fr; align-items: end; gap: 16px; margin-top: 34px; padding-top: 17px; border-top: 1px solid rgba(124,247,212,.26); }
.story-pager-button { min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: end; gap: 10px; padding: 0; color: #82949a; border: 0; background: transparent; text-align: left; cursor: pointer; transition: color .2s, transform .2s steps(3); }
.story-pager-copy { min-width: 0; display: grid; gap: 8px; }
.story-pager-direction { color: var(--pink); font: 6px var(--pixel-display); letter-spacing: .08em; }
.story-pager-button strong { overflow: hidden; color: var(--ink); font: 13px var(--pixel-text); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.story-pager-glyph { display: grid; grid-template-columns: repeat(5, 3px); grid-auto-rows: 3px; gap: 1px; width: 21px; height: 21px; padding: 2px; align-self: end; border: 1px solid color-mix(in srgb, var(--story-glow, var(--cyan)) 42%, transparent); background: color-mix(in srgb, var(--scene-sky) 72%, transparent); opacity: .62; }
.story-pager-glyph i { display: block; width: 3px; height: 3px; background: color-mix(in srgb, var(--story-glow, var(--cyan)) 16%, transparent); }
.story-pager-glyph i.on { background: var(--story-accent, var(--pink)); box-shadow: 1px 0 0 var(--story-glow, var(--cyan)); }
.story-pager-button:hover, .story-pager-button:focus-visible { color: var(--cyan); transform: translateY(-2px); }
.story-pager-button:hover strong, .story-pager-button:focus-visible strong { color: var(--cyan); }
.story-pager-next { grid-template-columns: minmax(0, 1fr) 24px; text-align: right; }
.story-pager-next .story-pager-copy { grid-column: 1; grid-row: 1; }
.story-pager-next .story-pager-glyph { grid-column: 2; grid-row: 1; }
.story-pager-index { color: var(--yellow); font: 6px var(--pixel-display); letter-spacing: .08em; white-space: nowrap; }

.closing { position: relative; min-height: 680px; display: grid; justify-items: center; align-content: center; text-align: center; padding: 100px 24px; overflow: hidden; background: #0b0d16; }
.closing > :not(.closing-memory) { position: relative; z-index: 1; }
.closing-memory { position: absolute; z-index: 0; left: 50%; top: 78%; width: min(78vw, 540px); height: min(34vw, 225px); opacity: .55; pointer-events: none; transform: translate(-50%, -50%); }
.closing.is-revealing .closing-memory { animation: memory-reveal .82s steps(6) both; }
.memory-track { position: absolute; inset: 5% 7%; overflow: visible; border: 1px solid rgba(124,247,212,.28); background: linear-gradient(rgba(124,247,212,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(124,247,212,.1) 1px, transparent 1px); background-size: 28px 28px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: inset 0 0 0 1px rgba(255,107,156,.16); }
.memory-track::before, .memory-track::after { content: ""; position: absolute; background: rgba(124,247,212,.18); }
.memory-track::before { left: 50%; top: 7%; bottom: 7%; width: 1px; }
.memory-track::after { top: 50%; left: 7%; right: 7%; height: 1px; }
.memory-label { position: absolute; right: 7%; top: 0; color: var(--cyan); font: 6px var(--pixel-display); letter-spacing: .1em; }
.memory-caption { position: absolute; left: 7%; bottom: 0; color: var(--yellow); font: 6px var(--pixel-display); letter-spacing: .08em; }
.memory-force { position: absolute; left: 50%; top: 50%; width: var(--memory-force-length, 16px); height: 1px; transform-origin: left center; transform: rotate(var(--memory-force-angle, 0deg)); background: repeating-linear-gradient(90deg, var(--memory-force-color, var(--pink)) 0 2px, transparent 2px 5px); opacity: .72; transition: width .2s steps(3), transform .2s steps(3), opacity .25s steps(3); }
.memory-force::after { content: ""; position: absolute; right: -1px; top: -2px; width: 5px; height: 5px; background: var(--memory-force-color, var(--pink)); clip-path: polygon(100% 50%, 0 0, 0 100%); }
.memory-force-label { position: absolute; right: 7%; bottom: 0; color: var(--memory-force-color, var(--pink)); font: 5px var(--pixel-display); letter-spacing: .06em; }
.memory-core { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; border: 1px solid var(--core-color, var(--pink)); background: color-mix(in srgb, var(--core-glow, var(--cyan)) 18%, transparent); box-shadow: 4px 4px 0 var(--core-glow, var(--cyan)), 0 0 18px color-mix(in srgb, var(--core-color, var(--pink)) 24%, transparent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: translate(-50%, -50%); animation: memory-core-pulse 2.8s steps(6) infinite; }
.memory-node { position: absolute; left: var(--node-x); top: var(--node-y); width: 7px; height: 7px; background: var(--node-color, var(--pink)); box-shadow: 3px 0 0 var(--node-glow, var(--cyan)); transform: translate(-50%, -50%); animation: memory-node-blink 2.4s steps(5) var(--node-delay, 0ms) infinite; }
.memory-node.is-current { width: 10px; height: 10px; border: 1px solid var(--node-glow, var(--cyan)); background: transparent; box-shadow: 3px 0 0 var(--node-color, var(--pink)), 0 0 10px color-mix(in srgb, var(--node-glow, var(--cyan)) 46%, transparent); }
.memory-link { position: absolute; left: var(--link-x); top: var(--link-y); width: var(--link-length); height: 1px; background: var(--pink); opacity: .62; transform: rotate(var(--link-angle)); transform-origin: left center; }
.closing::before, .closing::after { content: ""; position: absolute; width: 190px; height: 190px; border: 1px solid rgba(124,247,212,.25); transform: rotate(45deg); }
.closing::before { left: -95px; top: 28%; box-shadow: 14px 14px 0 rgba(255,107,156,.2), 28px 28px 0 rgba(124,247,212,.08); }
.closing::after { right: -95px; bottom: 20%; box-shadow: -14px -14px 0 rgba(255,107,156,.2), -28px -28px 0 rgba(124,247,212,.08); }
.closing-pixel { margin-bottom: 25px; color: var(--yellow); font: 36px var(--pixel-display); animation: float 3.5s steps(5) infinite; }
.closing .micro-label { margin-bottom: 24px; }
.closing h2 { max-width: 820px; margin-bottom: 40px; }
.closing .pixel-button { margin-top: 0; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 4vw, 60px) calc(24px + env(safe-area-inset-bottom)); color: #60757e; font-size: 8px; letter-spacing: .08em; }

@keyframes pulse { 0%, 100% { opacity: .45; transform: translateX(0); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes sensor-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(124,247,212,.15); } 25% { box-shadow: 0 0 0 7px rgba(124,247,212,.28); } 50% { box-shadow: 0 0 0 3px rgba(124,247,212,.15); } 75% { box-shadow: 0 0 0 6px rgba(255,107,156,.22); } }
@keyframes grid-breathe { 0%, 100% { opacity: .2; transform: perspective(420px) rotateX(62deg) rotateZ(-7deg) translate(0, 0); } 50% { opacity: .32; transform: perspective(420px) rotateX(62deg) rotateZ(-7deg) translate(-9px, 4px); } }
@keyframes orbit-a-drift { 0%, 100% { opacity: .24; transform: rotate(-23deg) translate(0, 0); } 50% { opacity: .44; transform: rotate(-18deg) translate(-12px, 5px); } }
@keyframes orbit-b-drift { 0%, 100% { opacity: .2; transform: rotate(12deg) translate(0, 0); } 50% { opacity: .36; transform: rotate(17deg) translate(10px, -4px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes boot-copy { from { opacity: 0; transform: translateY(13px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
@keyframes idle-plinth { 0%, 100% { opacity: .42; transform: perspective(440px) rotateX(63deg) rotateZ(-9deg) scaleX(1); } 50% { opacity: .7; transform: perspective(440px) rotateX(63deg) rotateZ(-9deg) scaleX(1.035); } }
@keyframes idle-object-shift { 0% { opacity: .52; transform: translate(8px, 0) scale(.985); filter: saturate(.7); } 46% { opacity: .9; transform: translate(-5px, 0) scale(1.015); filter: saturate(1.25); } 100% { opacity: 1; transform: translate(0) scale(1); filter: none; } }
@keyframes contact-frame { 0% { opacity: .98; border-color: var(--pink); box-shadow: 0 0 0 0 rgba(255,107,156,.34), inset 0 0 26px rgba(255,107,156,.08); } 45% { opacity: 1; border-color: var(--yellow); box-shadow: 0 0 0 6px rgba(245,215,110,.12), inset 0 0 34px rgba(245,215,110,.1); } 100% { opacity: .78; border-color: rgba(124,247,212,.32); box-shadow: 0 0 0 2px rgba(124,247,212,.05), inset 0 0 20px rgba(124,247,212,.04); } }
@keyframes boot-stage { from { opacity: 0; transform: translate(20px, 7px) scale(.96); filter: brightness(2) saturate(.3); } to { opacity: 1; transform: translate(0) scale(1); filter: none; } }
@keyframes story-arrive { from { opacity: 0; transform: translateY(14px); clip-path: inset(0 0 100% 0); } 55% { opacity: 1; clip-path: inset(0 0 14% 0); } to { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
@keyframes story-signal-flash { from { opacity: 0; transform: translateX(12px); clip-path: inset(0 100% 0 0); } 36% { opacity: .92; clip-path: inset(0); } 68% { opacity: .52; transform: translateX(0); } to { opacity: 0; transform: translateX(-4px); } }
@keyframes curtain-open { from { clip-path: inset(0); opacity: 1; } 65% { clip-path: inset(0 0 0 48%); opacity: .98; } to { clip-path: inset(0 0 0 100%); opacity: 0; } }
@keyframes curtain-line { from { transform: translateX(-50%) scaleY(1); opacity: 1; } to { transform: translateX(52vw) scaleY(.04); opacity: 0; } }
@keyframes curtain-label { from { opacity: 1; letter-spacing: .14em; } to { opacity: 0; letter-spacing: .4em; } }
@keyframes plaque-arrive { from { opacity: 0; transform: translateX(-8px); clip-path: inset(0 100% 0 0); } to { opacity: .82; transform: translateX(0); clip-path: inset(0); } }
@keyframes reticle-breathe { 0%, 100% { opacity: .52; } 50% { opacity: 1; } }
@keyframes portal-depart { from { opacity: 1; transform: translateY(0); filter: none; } to { opacity: .12; transform: translateY(-13px); filter: saturate(.45); } }
@keyframes stage-depart { from { opacity: 1; transform: translateY(0) scale(1); filter: none; } to { opacity: .2; transform: translateY(9px) scale(.96); filter: brightness(1.6) saturate(.4); } }
@keyframes archive-arrive { from { opacity: .42; transform: translateY(16px); filter: saturate(.5); } 55% { opacity: 1; filter: saturate(1.15); } to { opacity: 1; transform: translateY(0); filter: none; } }
@keyframes portal-return { from { opacity: .45; transform: translateY(-12px); filter: saturate(.5); } 55% { opacity: 1; filter: saturate(1.12); } to { opacity: 1; transform: translateY(0); filter: none; } }
@keyframes closing-depart { from { opacity: 1; transform: translateY(0); } to { opacity: .3; transform: translateY(12px); } }
@keyframes chapter-shift { from { opacity: .05; transform: translateY(7px); } 65% { opacity: 1; transform: translateY(-2px); } to { opacity: .54; transform: translateY(0); } }
@keyframes observer-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes tilt-device { 0%, 100% { opacity: .48; transform: rotate(-10deg) translateY(0); } 45% { opacity: 1; transform: rotate(12deg) translateY(-2px); } 68% { opacity: .7; transform: rotate(5deg) translateY(0); } }
@keyframes story-state-breathe { 0%, 100% { opacity: .68; letter-spacing: .08em; } 50% { opacity: 1; letter-spacing: .11em; } }
@keyframes attract-frame { 0%, 100% { opacity: .42; } 50% { opacity: .7; } }
@keyframes sigil-arrive { from { opacity: 0; transform: rotate(35deg) scale(.72) translate(18px, -8px); clip-path: inset(0 100% 0 0); } 55% { opacity: .34; clip-path: inset(0 12% 0 0); } to { opacity: .28; transform: rotate(45deg) scale(1) translate(0, 0); clip-path: inset(0); } }
@keyframes memory-core-pulse { 0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(.86); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes memory-node-blink { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.8); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes memory-reveal { from { opacity: 0; transform: translate(-50%, -42%) scale(.78); clip-path: inset(0 48% 0 48%); } 58% { opacity: .72; clip-path: inset(0 8% 0 8%); } to { opacity: .55; transform: translate(-50%, -50%) scale(1); clip-path: inset(0); } }

@media (min-width: 821px) and (max-height: 760px) {
  .portal { min-height: 100svh; padding-top: 76px; padding-bottom: 14px; }
  .world-stage { height: min(70svh, 420px); min-height: 260px; }
  .portal-intro { margin-top: 12px; line-height: 1.6; }
  .portal-hint { margin-top: -8px; }
  .portal-ritual { margin-top: -18px; }
  .portal-actions { transform: scale(.86); transform-origin: left bottom; }
}

/* A phone held sideways becomes a narrow horizontal vitrine. Keep the
   specimen tall enough to read, while the title and controls stay inside the
   short viewport instead of falling below the first frame. */
@media (min-width: 600px) and (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  .portal { min-height: 100svh; grid-template-columns: minmax(220px, .78fr) minmax(320px, 1.22fr); grid-template-rows: 1fr; gap: 2vw; padding: 68px 28px 12px; }
  .portal-copy { align-self: start; max-width: 330px; padding-top: 4px; }
  .portal-copy .micro-label { margin-bottom: 12px; font-size: 7px; }
  .portal h1 { max-width: 315px; font-size: clamp(25px, 5vw, 45px); line-height: 1.25; letter-spacing: -.12em; }
  .portal-intro { max-width: 300px; margin-top: 10px; font-size: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .world-stage { grid-column: 2; grid-row: 1; width: 100%; height: calc(100svh - 92px); min-height: 0; max-height: 320px; }
  #world-canvas { width: min(100%, 350px); }
  .stage-plaque { left: -145px; bottom: 64px; width: 145px; }
  .portal-actions { position: absolute; left: 28px; bottom: 29px; gap: 8px; transform: scale(.72); transform-origin: left bottom; }
  .portal-hint { position: absolute; left: 28px; bottom: 10px; width: 310px; gap: 8px; font-size: 6px; }
  .portal-hint .hint-line { width: 18px; }
  .portal-ritual { position: absolute; right: 28px; bottom: 10px; margin: 0; gap: 7px; transform: scale(.82); transform-origin: right bottom; }
  .portal-corner { bottom: 10px; font-size: 5px; opacity: .55; }
  .corner-left { display: none; }
  .corner-right { display: none; }
}

@media (max-width: 820px) {
  .topbar { height: calc(62px + env(safe-area-inset-top)); grid-template-columns: 1fr auto; padding-top: env(safe-area-inset-top); }
  .brand-name { display: none; }
  .topbar-status { justify-self: end; margin-right: 8px; font-size: 7px; gap: 6px; }
  .topbar-immersive { width: 27px; height: 22px; margin-left: 4px; padding: 0; font-size: 0; }
  .topbar-immersive::before { content: "◈"; font: 11px/1 var(--pixel-display); }
  .topbar-sound { width: 27px; height: 22px; margin-left: 3px; padding: 0; font-size: 0; }
  .topbar-sound::before { content: "♫"; font: 11px/1 var(--pixel-display); }
  .chapter-readout { top: calc(66px + env(safe-area-inset-top)); right: 8px; display: flex; align-items: center; gap: 5px; font-size: 5px; writing-mode: horizontal-tb; opacity: .4; }
  .chapter-readout::before, .chapter-readout::after { width: 13px; height: 1px; }
  .chapter-readout::after { width: 22px; height: 1px; }
  .chapter-readout span:first-child { font-size: 6px; }
  .cursor-dot { display: none; }
  .portal { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 100svh; padding: calc(82px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); }
  .portal-copy { max-width: 100%; }
  .portal h1 { font-size: clamp(26px, 8.3vw, 42px); line-height: 1.5; }
  .portal-intro { margin-top: 17px; font-size: 13px; line-height: 1.9; }
  .world-stage { width: 100%; height: min(45svh, 380px); min-height: 238px; margin-top: -8px; }
  #world-canvas { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 192 / 300; object-fit: contain; }
  .stage-console { top: 10px; font-size: 6px; }
  .field-compass { right: 27px; transform: scale(.88) translate(var(--compass-x, 0px), var(--compass-y, 0px)); transform-origin: top right; }
  .stage-ident { top: 31px; font-size: 5px; }
  .stage-ident strong { font-size: 5px; }
  .stage-zero { top: 45px; right: 5%; padding: 2px 4px; font-size: 4px; }
  .stage-plaque { left: 5%; top: 58px; bottom: auto; width: 90%; padding: 5px 7px 4px; border-left-width: 1px; }
  .stage-plaque > span { font-size: 5px; }
  .stage-plaque p { overflow: hidden; margin-top: 2px; font-size: 7px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
  .stage-plaque em { margin-top: 3px; font-size: 4px; }
  .stage-frame { inset: 8% 3% 10%; opacity: .5; }
  .stage-frame::before { top: 22px; left: 5px; font-size: 5px; }
  .stage-frame::after { right: -4px; top: 21px; font-size: 8px; }
  .stage-frame span { right: 4px; bottom: -9px; font-size: 5px; }
  .stage-observer { left: 5%; bottom: 25px; font-size: 5px; gap: 5px; }
  .observer-pip { width: 4px; height: 4px; }
  .portal-actions { align-self: stretch; margin-top: 7px; }
  .pixel-button { min-height: 45px; flex: 1 1 auto; justify-content: center; padding: 0 11px; font-size: 8px; }
  .portal-hint { margin-top: 16px; font-size: 7px; gap: 9px; }
  .portal-hint .hint-line { width: 22px; }
  .portal-ritual { justify-content: center; gap: 7px; margin-top: 8px; font-size: 6px; }
  .portal-ritual i { width: 12px; }
  .ritual-step { gap: 4px; }
  .ritual-step b { width: 17px; height: 15px; font-size: 6px; }
  .portal-corner { bottom: 12px; font-size: 5px; }
  .corner-left { left: 22px; }
  .corner-right { right: 22px; }
  body.is-immersive .portal, :fullscreen .portal { min-height: 100svh; padding: calc(78px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom)); }
  body.is-immersive .portal-copy, :fullscreen .portal-copy { position: relative; left: auto; top: auto; max-width: 100%; opacity: .9; }
  body.is-immersive .portal-copy .micro-label, :fullscreen .portal-copy .micro-label { margin-bottom: 10px; }
  body.is-immersive .portal h1, :fullscreen .portal h1 { font-size: clamp(24px, 7vw, 34px); }
  body.is-immersive .portal-intro, :fullscreen .portal-intro { max-width: 100%; margin-top: 10px; font-size: 11px; line-height: 1.7; }
  body.is-immersive .world-stage, :fullscreen .world-stage { width: 100%; height: min(57svh, 470px); min-height: 310px; margin-top: 2px; }
  body.is-immersive #world-canvas, :fullscreen #world-canvas { width: 100%; max-width: 390px; }
  body.is-immersive .portal-actions, :fullscreen .portal-actions { position: relative; left: auto; bottom: auto; margin-top: -1px; }
  body.is-immersive .portal-hint, :fullscreen .portal-hint { position: relative; right: auto; bottom: auto; width: auto; }
  body.is-immersive .portal-ritual, :fullscreen .portal-ritual { position: relative; left: auto; bottom: auto; }
  .archive-heading { display: block; padding: 88px 22px 50px; }
  .archive-heading-side { display: block; max-width: none; }
  .archive-note { margin-top: 31px; font-size: 13px; }
  .archive-trace { width: 100%; margin-top: 26px; gap: 10px; }
  .trace-label { font-size: 6px; }
  .trace-route { font-size: 7px; }
  .archive-layout { display: block; }
  .archive-nav { padding: 25px 0 0; border-right: 0; }
  .nav-title-row { padding: 0 22px 18px; }
  .filter-button { display: block; }
  .designer-list { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .designer-list.open { max-height: 900px; padding-bottom: 13px; }
  .designer-button { grid-template-columns: 26px 36px 1fr; gap: 7px; padding: 12px 22px; }
  .designer-glyph { grid-template-columns: repeat(5, 3px); grid-auto-rows: 3px; gap: 1px; width: 20px; height: 20px; padding: 2px; }
  .designer-glyph i { width: 2px; height: 2px; }
  .story-panel { min-height: 0; padding: 47px 22px 67px; }
  .archive-field { right: 12px; bottom: calc(54px + env(safe-area-inset-bottom)); width: 66px; height: 61px; }
  .archive-field-label { font-size: 4px; }
  .archive-field-frame { top: 11px; bottom: 10px; background-size: 10px 10px; }
  .archive-field-crystal { width: 13px; height: 19px; }
  .archive-field-vector { width: 15px; }
  .archive-field-coordinates { font-size: 4px; }
  .story-sigil { top: 34px; right: 15px; width: 92px; height: 114px; opacity: .2; transform: rotate(45deg) scale(.76); transform-origin: top right; }
  .story-sigil::after { left: -39px; top: 42px; width: 155px; }
  .story-sigil-label, .story-sigil-caption { font-size: 5px; }
  .story-sigil-label { top: 3px; right: -18px; }
  .story-sigil-caption { right: -22px; bottom: 4px; }
  .story-sigil-grid { top: 25px; left: 25px; grid-template-columns: repeat(5, 7px); grid-auto-rows: 7px; gap: 2px; width: 44px; height: 44px; padding: 4px; }
  .story-sigil-grid i { width: 7px; height: 7px; }
  .story-sigil-grid i.on { box-shadow: 2px 0 0 color-mix(in srgb, var(--story-glow, var(--cyan)) 72%, transparent); }
  .story-signal { top: 20px; right: 22px; font-size: 5px; }
  .story-title { font-size: clamp(25px, 7.5vw, 38px); line-height: 1.4; }
  .story-progress { gap: 8px; margin-bottom: 22px; font-size: 5px; }
  .story-progress-bar { height: 2px; }
  .story-pager { gap: 8px; margin-top: 27px; padding-top: 13px; }
  .story-pager-button { gap: 5px; }
  .story-pager-direction, .story-pager-index { font-size: 5px; }
  .story-pager-button strong { font-size: 10px; }
  .story-pager-button { grid-template-columns: 19px minmax(0, 1fr); }
  .story-pager-next { grid-template-columns: minmax(0, 1fr) 19px; }
  .story-pager-glyph { grid-template-columns: repeat(5, 2px); grid-auto-rows: 2px; width: 15px; height: 15px; gap: 1px; padding: 2px; }
  .story-pager-glyph i { width: 2px; height: 2px; }
  .story-body p::before { left: -13px; top: 9px; width: 4px; height: 4px; }
  .story-beat + .story-beat { margin-top: 22px; padding-top: 15px; }
  .story-beat-index { margin-bottom: 7px; font-size: 5px; }
  .story-field-state { margin-left: 0; width: 100%; font-size: 6px; }
  .story-kicker { font-size: 14px; line-height: 1.9; }
  .story-body p { font-size: 14px; line-height: 2; }
  .story-insight p { font-size: 14px; }
  .sources a { font-size: 11px; }
  .source-url { font-size: 5px; }
  .closing { min-height: 560px; padding: 76px 22px; }
  .closing-memory { top: 72%; width: min(94vw, 420px); height: 190px; opacity: .42; }
  .memory-track { background-size: 22px 22px; }
  .memory-label { font-size: 5px; }
  .memory-caption { font-size: 5px; }
  .memory-core { width: 18px; height: 18px; }
  .memory-node { width: 5px; height: 5px; box-shadow: 2px 0 0 var(--node-glow, var(--cyan)); }
  .closing h2 { font-size: 27px; line-height: 1.6; }
  footer { flex-wrap: wrap; font-size: 7px; }
  footer span:last-child { width: 100%; }
}

/* The general phone rules above intentionally describe portrait reading.
   A phone held sideways is a different vitrine: restore the two-column
   composition after those rules so the specimen and the short label can
   share the same frame instead of stacking below the fold. */
@media (min-width: 600px) and (max-width: 1100px) and (max-height: 560px) and (orientation: landscape) {
  .topbar { grid-template-columns: 1fr auto 1fr; }
  .topbar-index { grid-column: 3; grid-row: 1; justify-self: end; }
  .portal { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(320px, 1.22fr); grid-template-rows: 1fr; align-items: center; gap: 2vw; min-height: 100svh; padding: 68px 28px 12px; }
  .portal-copy { align-self: start; max-width: 330px; padding-top: 4px; }
  .portal-copy .micro-label { margin-bottom: 12px; font-size: 7px; }
  .portal h1 { max-width: 315px; font-size: clamp(25px, 5vw, 45px); line-height: 1.25; letter-spacing: -.12em; }
  .portal-intro { max-width: 300px; margin-top: 10px; font-size: 10px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .world-stage { grid-column: 2; grid-row: 1; width: 100%; height: calc(100svh - 92px); min-height: 0; max-height: 320px; margin-top: 0; }
  #world-canvas { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 192 / 300; object-fit: contain; }
  .stage-plaque { left: -145px; bottom: 64px; width: 145px; }
  .portal-actions { position: absolute; left: 28px; bottom: 29px; margin-top: 0; gap: 8px; transform: scale(.72); transform-origin: left bottom; }
  .portal-hint { position: absolute; left: 28px; bottom: 10px; width: 310px; gap: 8px; font-size: 6px; }
  .portal-hint .hint-line { width: 18px; }
  .portal-ritual { position: absolute; right: 28px; bottom: 10px; margin: 0; gap: 7px; transform: scale(.82); transform-origin: right bottom; }
  .portal-corner { bottom: 10px; font-size: 5px; opacity: .55; }
  .corner-left, .corner-right { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}