@font-face { font-family:'FERA Pixel'; src:url('./assets/fera-pixel.woff') format('woff'); font-weight:400 700; font-display:swap; }
:root { --ice:#bfeaff; --ice-dim:#86aec7; --ice-line:#76b8dc55; --terminal-font:'FERA Pixel','Courier New',monospace; }
.camera-finish { position:fixed; inset:0; width:100%; height:100%; z-index:20; pointer-events:none; }
.camera-finish[data-renderer="static"] { opacity:.12; background:repeating-radial-gradient(circle at 32% 39%,#dce9f314 0 .5px,#00000017 .7px 1px,transparent 1.2px 3px); }
.camera-finish[hidden] { display:none; }

/* The same phosphor palette and optical surface follow every terminal view. */
.equipment .fera-crt { color:var(--ice); }
.equipment .fera-boot, .equipment .music-display { font-family:var(--terminal-font); font-weight:400; }
.equipment #screen::before { content:''; position:absolute; inset:0; z-index:15; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 1.5px .5px #d3efff5c,inset 0 -1px 2px #b9e7ff36,inset 8px 0 16px -8px #5aa8ff4d,inset -8px 0 16px -8px #5aa8ff4d,inset 0 0 26px 4px #7cc6ff14,inset 0 0 15px 3px #000c; }
.equipment #screen::after { content:''; position:absolute; inset:-100% 0; z-index:14; pointer-events:none; opacity:.65; background:linear-gradient(180deg,transparent 42%,#b7e3ff03 47%,#ccecff10 49.7%,#e1f5ff0c 50%,transparent 51%); transform:translateY(-28%); }
.equipment[data-cinematic="true"]:not([data-phase="off"]) #screen::after { animation:phosphor-travel 9s linear infinite!important; }
@keyframes phosphor-travel { from { transform:translateY(-30%); } to { transform:translateY(30%); } }
.crt-raster { position:absolute; inset:0; width:100%; height:100%; z-index:13; pointer-events:none; }
.crt-raster-rows { stroke:#010307; opacity:.46; }
.crt-raster-columns { stroke:#010307; opacity:.3; }
.crt-glass-rim { stroke:#a9d8fa; stroke-width:.75; opacity:.18; filter:drop-shadow(0 0 2px #bce9ff) drop-shadow(0 0 5px #70c4ff); }
.crt-glass-catch { stroke:#d5edff; stroke-width:.65; opacity:.22; filter:drop-shadow(0 0 2px #bce9ff); }
/* Film cells are apertures in the picture itself; do not double-mask or shade them. */
.equipment #screen[data-film-view]::before { box-shadow:inset 0 0 2px .5px #d3efff55; }
#screen[data-film-view] .crt-raster-rows, #screen[data-film-view] .crt-raster-columns { opacity:0; }



/* Peripheral annotation: typesetting from a technical plate, not a second dashboard. */
.scene-hud { position:fixed; inset:0; z-index:22; pointer-events:none; color:#c1d2dd; font:400 10px/1.6 var(--terminal-font); letter-spacing:.65px; opacity:.9; }
.hud-top { position:absolute; top:32px; left:36px; right:36px; display:flex; justify-content:space-between; align-items:flex-start; }
.scene-hud button { pointer-events:auto; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.hud-wordmark { text-align:left; font:400 24px/1 var(--terminal-font); letter-spacing:2px; }
.hud-wordmark span { display:block; margin-top:9px; font:400 8px/1.4 'Courier New',monospace; letter-spacing:1.1px; color:#a7bfce; }
.hud-catalogue { text-align:right; font-size:9px; line-height:1.8; }
.hud-catalogue span { color:#93abba; font-size:8px; }
/* The eggs found: a half ring of ticks, one per hidden thing, lit as each turns up. Hidden until the machine is first
   switched on; then it flickers in, its ticks light one by one, and it keeps calling: a glint runs along the ring, the
   next tick to find blinks and the count breathes. */
.hud-side { display:flex; flex-direction:column; align-items:flex-end; gap:16px; }
.hud-eggs { display:flex; align-items:flex-end; gap:12px; font-size:8px; line-height:1; color:#93abba; letter-spacing:1.4px; visibility:hidden; }
.scene-hud[data-eggs] .hud-eggs { visibility:visible; animation:hud-flicker-in 1.6s linear .8s both; }
.hud-eggs svg { width:62px; height:35px; fill:none; stroke:#acccdd33; stroke-width:3; overflow:visible; }
.hud-eggs .egg-tick[data-on] { stroke:#c6ebff; filter:drop-shadow(0 0 2px #81caffaa); }
.hud-eggs .egg-sweep { stroke:#f2fbff; stroke-width:1.4; stroke-linecap:round; stroke-dasharray:10 200; stroke-dashoffset:10; filter:drop-shadow(0 0 3px #9fd8ff); opacity:0; }
.hud-eggs span { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.hud-eggs b { font-weight:400; font-size:20px; letter-spacing:1px; color:#e4f2fa; text-shadow:0 0 6px #81caff66; }
.scene-hud[data-eggs] .egg-tick { animation:hud-egg-boot .6s ease-out calc(1.6s + var(--i) * .14s) both; }
.scene-hud[data-eggs] .egg-tick[data-next] { animation:hud-egg-boot .6s ease-out calc(1.6s + var(--i) * .14s) both, hud-egg-next 1.1s steps(2, jump-none) 2.6s infinite; }
.scene-hud[data-eggs] .egg-sweep { animation:hud-egg-sweep 4.5s ease-in-out 2.8s infinite; }
.scene-hud[data-eggs] .hud-eggs b { animation:hud-egg-count 3s ease-in-out 2.6s infinite; }
@keyframes hud-egg-boot { 0% { stroke:#f2fbff; filter:drop-shadow(0 0 6px #9fd8ff); } }
@keyframes hud-egg-next { 0% { stroke:#acccdd33; filter:none; } 100% { stroke:#8fd2ff; filter:drop-shadow(0 0 4px #81caff); } }
@keyframes hud-egg-sweep { 0% { stroke-dashoffset:10; opacity:0; } 5%, 30% { opacity:1; } 36%, 100% { stroke-dashoffset:-100; opacity:0; } }
@keyframes hud-egg-count { 0%, 100% { text-shadow:0 0 6px #81caff55; } 50% { text-shadow:0 0 12px #9fd8ffdd, 0 0 2px #fff; } }
/* A new egg: the count and the lit ticks flash green. */
.scene-hud[data-eggs] .hud-eggs[data-new] { animation:hud-egg-new 1.6s steps(8) both; }
.scene-hud[data-eggs] .hud-eggs[data-new] .egg-tick[data-on] { animation:hud-egg-glow 1.6s ease-out both; }
@keyframes hud-egg-new { 0%, 50% { color:#59f5a0; } 25%, 75% { color:#93abba; } 100% { color:#93abba; } }
@keyframes hud-egg-glow { 0% { stroke:#59f5a0; filter:drop-shadow(0 0 5px #59f5a0); } 100% { stroke:#c6ebff; filter:drop-shadow(0 0 2px #81caffaa); } }
/* Calm motion still points to it, gently: it fades in, and the next tick and the count breathe, without the flicker. */
:root[data-motion="calm"] .scene-hud[data-eggs] .hud-eggs { animation:hud-egg-fade 1.2s ease-out .8s both !important; }
:root[data-motion="calm"] .scene-hud[data-eggs] .egg-tick[data-next] { animation:hud-egg-next 1.6s ease-in-out 2s infinite alternate !important; }
:root[data-motion="calm"] .scene-hud[data-eggs] .hud-eggs b { animation:hud-egg-count 3s ease-in-out 2s infinite !important; }
:root[data-motion="calm"] .scene-hud[data-eggs] .egg-sweep, :root[data-motion="calm"] .scene-hud[data-eggs] .egg-tick:not([data-next]) { animation:none !important; }
@keyframes hud-egg-fade { 0% { opacity:0; } }
.hud-notes { position:absolute; inset:0; z-index:3; pointer-events:none; font:400 10px/1.6 var(--terminal-font); letter-spacing:.65px; opacity:.9; }
.hud-annotation { position:absolute; width:125px; font-size:8px; color:#9aafbc; }
/* Just outside the case's edges (the case spans 9.4% to 90.7% of the drawing), so the notes stay attached to it. */
.hud-left { right:91.4%; top:calc(50% - 104px); }
.hud-right { left:91.6%; top:calc(50% + 76px); text-align:right; }
/* Entering: the four corners flicker on in turn, then the notes beside the case; all in 2 s. */
.scene-hud .hud-wordmark, .scene-hud .hud-catalogue, .scene-hud .hud-edition, .scene-hud .hud-live, .hud-notes .hud-annotation { animation:hud-flicker-in 1.1s linear both; }
.scene-hud .hud-catalogue { animation-delay:.25s; }
.scene-hud .hud-edition { animation-delay:.5s; }
.scene-hud .hud-live { animation-delay:.75s; }
.hud-notes .hud-annotation { animation-delay:.9s; }
@keyframes hud-flicker-in { 0% { opacity:0; } 8% { opacity:.9; } 12% { opacity:.1; } 20% { opacity:.8; } 26% { opacity:.2; } 34% { opacity:1; } 42% { opacity:.55; } 50%, 100% { opacity:1; } }
/* OFFLINE, in orange, breathing until the power comes on. */
.hud-live[data-state="offline"] .hud-status { color:#ff8a3a; text-shadow:0 0 6px #ff6a1a99; }
.hud-live[data-state="offline"] i { background:#ff7a2a; box-shadow:0 0 6px #ff6a1a; animation:hud-offline 1.8s ease-in-out 2s infinite; }
@keyframes hud-offline { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .scene-hud .hud-wordmark, .scene-hud .hud-catalogue, .scene-hud .hud-edition, .scene-hud .hud-live, .hud-notes .hud-annotation, .hud-live[data-state="offline"] i { animation:none; } }
.hud-annotation strong { display:block; margin:8px 0; font:400 9px/1.7 var(--terminal-font); color:#c0d0da; letter-spacing:1px; }
.hud-index { font:400 8px/1.4 'Courier New',monospace; letter-spacing:1px; }
.hud-annotation svg { display:block; width:100%; height:40px; margin:6px 0; fill:none; stroke:#acccdd; stroke-width:.6; opacity:.48; }
.hud-bottom { position:absolute; bottom:26px; left:36px; right:36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.hud-live { display:grid; grid-template-columns:5px 1fr; column-gap:9px; align-items:center; font-size:9px; }
.hud-live i { width:3px; height:3px; background:#94c9e6; border-radius:50%; box-shadow:0 0 5px #81caff66; }
.hud-hint { grid-column:2; color:#8fa7b7; font-size:7px; margin-top:5px; }
.hud-edition { text-align:right; font-size:8px; color:#9ab1c0; }
.hud-edition span { display:block; font-size:7px; margin-top:5px; }
.hud-corners { position:absolute; inset:0; fill:none; stroke:#9ab3c43a; stroke-width:.6; }
.help-toggle { display:none; }
.scene-hud button:hover { color:#f0faff; }
.scene-hud button:focus-visible { outline:1px solid #c6ebff; outline-offset:7px; }
dialog { color-scheme:light; }
@media (max-width:1200px) and (min-width:801px) {
  .hud-wordmark { font-size:18px; letter-spacing:1px; }
  .hud-wordmark span { max-width:47px; font-size:7px; line-height:1.7; letter-spacing:0; }
  .hud-annotation { width:74px; font-size:6px; }
  .hud-left { right:92%; }
  .hud-right { left:92%; }
  .hud-annotation strong { font-size:7px; letter-spacing:.5px; }
  .hud-index { font-size:6px; letter-spacing:.5px; }
}
@media (max-width:800px) {
  .hud-annotation { display:none; }
  .hud-top { top:19px; left:20px; right:20px; }
  .hud-wordmark { font-size:19px; }
  .hud-wordmark span { font-size:7px; margin-top:6px; }
  .hud-catalogue { font-size:7px; }
  .hud-catalogue span { font-size:6px; }
  .hud-side { gap:10px; }
  .hud-eggs { font-size:6px; gap:8px; }
  .hud-eggs svg { width:44px; height:25px; }
  .hud-eggs b { font-size:14px; }
  .hud-bottom { bottom:13px; left:20px; right:20px; }
  .hud-live { font-size:7px; }
  .hud-hint { font-size:6px; }
  .hud-edition { display:none; }
  .hud-corners { display:none; }
}
@media (max-height:620px) and (min-width:801px) { .hud-top { top:19px; } .hud-bottom { bottom:15px; } .hud-wordmark { font-size:19px; } .hud-annotation { display:none; } }
@media (pointer:coarse) and (max-height:500px) and (min-width:801px) { .hud-top { top:6px; } .hud-bottom { bottom:5px; } .hud-wordmark { font-size:13px; } .hud-wordmark span, .hud-edition, .hud-corners { display:none; } }
.hud-alert { position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; gap:8px; align-items:center; font-size:9px; letter-spacing:1px; color:#ffb08f; opacity:0; transition:opacity .4s; white-space:nowrap; }
.hud-alert b { font-weight:400; padding:1px 5px; color:#0a0b0d; background:#ff6a45; }
.hud-alert em { font-style:normal; color:#ffd2c0; }
.scene-hud[data-signal] .hud-alert { opacity:1; animation:hud-alert-blink 1.6s steps(2) infinite; }
@keyframes hud-alert-blink { 50% { opacity:.55; } }
@media (max-width:800px) { .hud-alert { display:none; } }
.equipment .fera-boot .boot-face, .equipment .music-display .mv-ui, .equipment .archive-display, .equipment .terminal-nav { text-shadow:0 0 1px #dcf4ffb8,0 0 4px #99d5ff8f,0 0 10px #65baff50; }
.equipment .archive-glyph, .equipment .fera-boot .boot-icon svg, .equipment .terminal-nav svg { filter:drop-shadow(0 0 1.2px #c9edff80) drop-shadow(0 0 4px #6fbfff55); }

/* Keep phosphor cores and halos on phones without filtering the whole screen through multiple displaced/blurred copies. */
@media (max-width:800px), (pointer:coarse) {
  .camera-finish[data-renderer="static"] { opacity:.03; }
  /* Local glyph glow and the outer halo supply bloom while the live boot picture changes. */
  .equipment[data-phase="booting"] #screen[data-optics], .equipment[data-phase="revealing"] #screen[data-optics] { filter:none; }
  .equipment #screen::after { inset:0; opacity:.35; }
  .crt-raster-rows { opacity:.3; }
  .crt-raster-columns { opacity:.16; }
  .crt-glass-rim, .crt-glass-catch { filter:none; }
  .equipment .archive-glyph, .equipment .fera-boot .boot-icon svg, .equipment .terminal-nav svg { filter:drop-shadow(0 0 2px #8bd6ff80); }
}