/* Generated from landing.css by tools/build-landing.js — edit the source, not this. */
@font-face {
font-family: 'Russo One';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../images/ui/font-russo-one-latin.woff2') format('woff2');
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: 'Rajdhani';
font-style: normal; font-weight: 500; font-display: swap;
src: url('../images/ui/font-rajdhani-500-latin.woff2') format('woff2');
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: 'Rajdhani';
font-style: normal; font-weight: 600; font-display: swap;
src: url('../images/ui/font-rajdhani-600-latin.woff2') format('woff2');
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: 'Rajdhani';
font-style: normal; font-weight: 700; font-display: swap;
src: url('../images/ui/font-rajdhani-700-latin.woff2') format('woff2');
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: 'Share Tech Mono';
font-style: normal; font-weight: 400; font-display: swap;
src: url('../images/ui/font-share-tech-mono-latin.woff2') format('woff2');
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: 'GoW Display Fallback';
src: local('Segoe UI Semibold'), local('Segoe UI'), local('Arial'), local('Helvetica');
size-adjust: 80%; ascent-override: 108%; descent-override: 27%; line-gap-override: 0%;
}
@font-face {
font-family: 'GoW UI Fallback';
src: local('Segoe UI'), local('Arial'), local('Helvetica');
size-adjust: 88%; ascent-override: 105%; descent-override: 28%; line-gap-override: 0%;
}
@font-face {
font-family: 'GoW Mono Fallback';
src: local('Consolas'), local('Courier New'), local('monospace');
size-adjust: 96%; ascent-override: 100%; descent-override: 24%; line-gap-override: 0%;
}
:root {
--page-sky:    url('../images/ui/page-sky-384.webp');
--void:     #070a10;
--ink:      #05070d;
--steel-hi: #445064;
--steel-2:  #2b3447;
--steel-3:  #1d2433;
--steel-4:  #141a26;
--recess:   #070b12;
--amber:     #f0a233;
--amber-hi:  #ffce80;
--amber-lo:  #9a5d11;
--bronze:    #c79a47;
--bronze-hi: #dcae5a;
--bronze-lo: #7d5f2b;
--danger:    #d24a30;
--ok:        #57bf64;
--ok-hi:     #9af0a0;
--text:  #cdd6e6;
--muted: #a9b3c6;
--faint: #8a94ab;
--legal: #96a1b5;
--rivet-hi:  rgba(214,230,252,0.92);
--rivet-mid: rgba(74,86,108,0.95);
--rivet-lo:  rgba(4,6,10,0.95);
--maxw: 1360px;
--gap: clamp(4rem, 6vw, 6.5rem);
--hud-h: 62px;
--font-display: 'Russo One', 'GoW Display Fallback', 'Segoe UI', sans-serif;
--font-ui: 'Rajdhani', 'GoW UI Fallback', 'Segoe UI', system-ui, sans-serif;
--font-mono: 'Share Tech Mono', 'GoW Mono Fallback', ui-monospace, 'Courier New', monospace;
font-size: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
background-color: var(--void);
}
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-color: var(--void);
background-image:
linear-gradient(90deg, rgba(2,3,6,0.88) 0, rgba(2,3,6,0.34) 10%, rgba(2,3,6,0) 23%),
linear-gradient(270deg, rgba(2,3,6,0.88) 0, rgba(2,3,6,0.34) 10%, rgba(2,3,6,0) 23%),
radial-gradient(132% 110% at 50% 44%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.62) 100%),
var(--page-sky, none),
var(--page-sky, none),
radial-gradient(1200px 700px at 80% -6%, rgba(66,104,158,0.20), transparent 60%),
radial-gradient(900px 600px at 4% 108%, rgba(170,115,55,0.10), transparent 60%),
linear-gradient(180deg, var(--void) 0%, #05070d 46%, var(--void) 100%),
url('../images/spacebak.jpg');
background-size:
auto, auto, auto,
690px 690px, 447px 447px,
auto, auto, auto, 600px 400px;
background-position: 0 0, 0 0, 0 0, 0 0, 137px 61px, 0 0, 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, repeat;
transform: translateZ(0);
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: var(--font-ui);
font-size: 1.05rem;
line-height: 1.52;
letter-spacing: 0.005em;
background: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.console, .hud-foot, .page-tape { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--amber); color: #2a1803; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 0;
left: 50%;
z-index: 61;
transform: translate(-50%, -150%);
padding: 0.62rem 1.5rem;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff6e6;
border: 2px solid #241705;
border-top: 0;
border-radius: 0 0 3px 3px;
background: linear-gradient(180deg, #9d7c40 0%, #75551f 47%, #4b3312 100%);
box-shadow:
inset 0 -2px 0 rgba(30,17,3,0.92),
inset 0 2px 0 rgba(255,236,196,0.30),
0 6px 18px rgba(0,0,0,0.6);
transition: transform .16s ease-out;
}
.skip-link:focus { transform: translate(-50%, 0); }
.skip-link:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
main:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }
main:focus:not(:focus-visible) { outline: none; }
.scanlines, .vignette {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 60;
}
.veil-wait .scanlines, .veil-wait .vignette { opacity: 0; }
.veil-wait.lit .scanlines { opacity: 0.24; transition: opacity .28s linear; }
.veil-wait.lit .vignette  { opacity: 1;    transition: opacity .28s linear; }
@media (prefers-reduced-motion: reduce) {
.veil-wait.lit .scanlines, .veil-wait.lit .vignette { transition: none; }
}
.scanlines {
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0.13) 3px);
opacity: 0.24;
}
.vignette {
background: radial-gradient(120% 100% at 50% 38%, transparent 54%, rgba(0,0,0,0.58) 100%);
z-index: 59;
}
.plate,
.pillar,
.race,
.log__row,
.theatre__frame,
.enlist__inner,
.module__bar,
.chip,
.hero__stats,
.hero__brief,
.theatre__readout,
.enlist__readout,
.hud-foot__plate {
position: relative;
background:
linear-gradient(180deg, rgba(190,214,250,0.05) 0, rgba(190,214,250,0) 72px),
linear-gradient(180deg, #161d29 0%, #121821 100%);
border: 1px solid rgba(150,180,224,0.13);
border-radius: 5px;
box-shadow:
inset 0 1px 0 rgba(214,232,255,0.07),
0 6px 18px rgba(0,0,0,0.38);
}
.pillar, .race, .log__row {
box-shadow:
inset 0 1px 0 rgba(214,232,255,0.09),
0 10px 26px rgba(0,0,0,0.42);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pillar:hover, .race:hover, .log__row:hover {
border-color: rgba(150,180,224,0.26);
box-shadow:
inset 0 1px 0 rgba(214,232,255,0.12),
0 14px 32px rgba(0,0,0,0.5);
}
.pillar:nth-child(9n+1), .race:nth-child(9n+1), .log__row:nth-child(9n+1) { --plate-off: 0 0; }
.pillar:nth-child(9n+2), .race:nth-child(9n+2), .log__row:nth-child(9n+2) { --plate-off: -137px -61px; }
.pillar:nth-child(9n+3), .race:nth-child(9n+3), .log__row:nth-child(9n+3) { --plate-off: -283px -197px; }
.pillar:nth-child(9n+4), .race:nth-child(9n+4) { --plate-off: -71px -331px; }
.pillar:nth-child(9n+5), .race:nth-child(9n+5) { --plate-off: -389px -113px; }
.pillar:nth-child(9n+6), .race:nth-child(9n+6) { --plate-off: -211px -409px; }
.pillar:nth-child(9n+7), .race:nth-child(9n+7) { --plate-off: -457px -269px; }
.race:nth-child(9n+8) { --plate-off: -19px -157px; }
.race:nth-child(9n+9) { --plate-off: -331px -47px; }
.kicker {
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.26em;
color: var(--bronze-hi);
text-transform: uppercase;
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.kicker__tick {
width: 22px; height: 2px;
background: var(--bronze);
box-shadow: 0 1px 0 var(--ink);
}
.led {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 7px var(--ok), inset 0 0 2px #fff;
animation: blink 2.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.32; } }
.module__code, .pillar__code, .log__ver, .race__lock, .readout__code, .enlist__code,
.hero__brief__code, .hud-foot__code, .race::before {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bronze);
padding: 4px 8px;
background: linear-gradient(180deg, #2a3446 0%, #19202d 54%, #0a0e16 100%);
border: 2px solid var(--ink);
box-shadow:
inset 0 1px 0 rgba(214,234,255,0.26),
inset 1px 0 0 rgba(170,196,236,0.13),
inset -1px -1px 0 rgba(0,0,0,0.9),
0 1px 0 rgba(0,0,0,0.75);
white-space: nowrap;
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-display);
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
border: 2px solid var(--ink);
transition: filter .12s ease, transform .07s ease, box-shadow .07s ease;
}
.btn__sub, .btn__chev { font-family: var(--font-mono); letter-spacing: 0.08em; }
.btn__short { display: none; }
.btn--key {
font-size: 0.8rem;
padding: 0.7rem 1.15rem 0.7rem 1.1rem;
color: #f2e2c2;
border-radius: 2px;
border-color: #241705;
background: linear-gradient(180deg, #9d7c40 0%, #75551f 47%, #4b3312 100%);
box-shadow:
inset -2px 0 0 rgba(30,17,3,0.88),
inset 0 -2px 0 rgba(30,17,3,0.92),
inset 0 2px 0 rgba(255,236,196,0.34),
inset 2px 0 0 rgba(255,232,190,0.14),
0 3px 0 #3d2809,
0 4px 0 var(--ink);
text-shadow: 0 1px 0 rgba(20,12,2,0.9);
}
.btn--key .btn__chev { color: #ffe0a8; margin-left: -0.18rem; }
.btn--key:hover { filter: brightness(1.13); color: #fff4de; }
.btn--key:active {
transform: translateY(3px);
box-shadow: inset 0 2px 3px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,236,196,0.12);
}
.btn--primary {
font-size: 1rem;
padding: 1.02rem 1.9rem;
color: #2a1803;
border-radius: 2px;
border-color: #3a2405;
background: linear-gradient(180deg, #ffd894 0%, #f0a93c 46%, #c9822a 100%);
box-shadow:
inset -2px 0 0 rgba(90,52,6,0.95),
inset 0 -2px 0 rgba(90,52,6,0.95),
inset 0 2px 0 rgba(255,247,228,0.85),
inset 2px 0 0 rgba(255,238,200,0.22),
0 3px 0 #6b4a18,
0 5px 0 #2a1c08;
text-shadow: 0 1px 0 rgba(255,238,200,0.55);
}
.btn--primary .btn__sub {
color: #331e02;
font-size: 0.8em;
letter-spacing: 0.1em;
text-shadow: none;
padding-left: 0.7rem;
border-left: 2px solid rgba(24,13,1,0.4);
}
.btn--primary:hover { filter: brightness(1.07); }
.btn--primary:active {
transform: translateY(3px);
box-shadow:
inset 0 2px 3px rgba(0,0,0,0.50),
inset 0 -1px 0 rgba(255,238,200,0.25);
}
.btn--xl { font-size: 1.14rem; padding: 1.2rem 2.5rem; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.hud-bar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem clamp(0.9rem, 2.5vw, 1.5rem);
background:
radial-gradient(circle 4px at 13px 50%, #7d8ca6 0 12%, #46516a 52%, #10151f 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at 14.5px calc(50% + 1.6px), rgba(0,0,0,0.8), rgba(0,0,0,0) 76%),
radial-gradient(circle 4px at calc(100% - 13px) 50%, #7d8ca6 0 12%, #46516a 52%, #10151f 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at calc(100% - 11.5px) calc(50% + 1.6px), rgba(0,0,0,0.8), rgba(0,0,0,0) 76%),
linear-gradient(180deg,
rgba(212,232,255,0.34) 0 1px,
rgba(150,180,224,0.18) 1px 3px,
rgba(0,0,0,0.10) 3px 40%,
rgba(0,0,0,0.40) 46%,
rgba(0,0,0,0.58) 88%,
rgba(0,0,0,0.72) 100%),
linear-gradient(180deg, #2b3548 0%, #1a2130 46%, #0e131d 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-size: auto, auto, auto, auto, auto, auto;
border-bottom: 2px solid var(--ink);
box-shadow:
inset 0 2px 0 rgba(190,212,244,0.14),
inset 0 -3px 0 rgba(0,0,0,0.75),
0 6px 16px rgba(0,0,0,0.55);
}
.hud-vent {
flex: 1 1 auto;
min-width: 0;
align-self: stretch;
display: flex;
align-items: stretch;
gap: 3px;
margin: 0.15rem 0.3rem;
background: linear-gradient(180deg, #10151f, #05070d);
border: 2px solid var(--ink);
box-shadow: inset 0 1px 0 rgba(190,212,244,0.10), inset 0 -1px 0 rgba(0,0,0,0.9);
padding: 2px;
}
.hud-vent__plate {
position: relative;
min-width: 0;
background:
radial-gradient(circle 3.2px at 7px 50%, #c3d2e8 0 18%, #5a6883 56%, #10151f 92%, rgba(0,0,0,0) 100%),
radial-gradient(circle 4px at 8.4px calc(50% + 1.4px), rgba(0,0,0,0.85), rgba(0,0,0,0) 74%),
radial-gradient(circle 3.2px at calc(100% - 7px) 50%, #c3d2e8 0 18%, #5a6883 56%, #10151f 92%, rgba(0,0,0,0) 100%),
radial-gradient(circle 4px at calc(100% - 5.6px) calc(50% + 1.4px), rgba(0,0,0,0.85), rgba(0,0,0,0) 74%),
var(--vent-face, none),
var(--vent-shade, none),
linear-gradient(180deg,
rgba(222,240,255,0.30) 0 1px,
rgba(154,184,226,0.14) 1px 2px,
rgba(0,0,0,0) 46%,
rgba(0,0,0,0.22) 78%,
rgba(0,0,0,0.46) 100%),
var(--plate-metal, none),
linear-gradient(180deg, #46536a 0%, #2c3646 54%, #171e2b 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, repeat, no-repeat;
background-size: auto, auto, auto, auto, auto, auto, auto, 512px 512px, auto;
background-position: 0 0, 0 0, 0 0, 0 0, var(--vent-off, 0 0), 0 0, 0 0, var(--vent-off, 0 0), 0 0;
border: 1px solid var(--ink);
box-shadow:
inset 1px 1px 0 rgba(196,218,252,0.16),
inset -1px -1px 0 rgba(0,0,0,0.88);
}
.hud-vent__plate--flute {
flex: 1 1 30%;
--vent-face: repeating-linear-gradient(90deg,
rgba(0,0,0,0) 0, rgba(0,0,0,0.16) 1.2px, rgba(0,0,0,0.16) 2.6px, rgba(0,0,0,0) 3.8px,
rgba(190,214,250,0.05) 4.6px, rgba(0,0,0,0) 5.6px, rgba(0,0,0,0) 11px);
--vent-shade: linear-gradient(180deg,
rgba(0,0,0,0.34) 0, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0) 58%,
rgba(198,220,255,0.05) 84%, rgba(0,0,0,0.20) 100%);
}
.hud-vent__plate--fine {
flex: 1 1 22%;
--vent-face: repeating-linear-gradient(90deg,
rgba(0,0,0,0) 0, rgba(0,0,0,0.115) 1px, rgba(0,0,0,0.115) 2px, rgba(0,0,0,0) 3px,
rgba(190,214,250,0.04) 3.6px, rgba(0,0,0,0) 4.4px, rgba(0,0,0,0) 8px);
--vent-shade: linear-gradient(180deg,
rgba(0,0,0,0.30) 0, rgba(0,0,0,0.09) 32%, rgba(0,0,0,0) 60%,
rgba(198,220,255,0.04) 86%, rgba(0,0,0,0.18) 100%);
--vent-off: 137px 61px;
}
.hud-vent__plate--wide {
flex: 1 1 38%;
--vent-face: repeating-linear-gradient(90deg,
rgba(0,0,0,0) 0, rgba(0,0,0,0.19) 1.4px, rgba(0,0,0,0.19) 3.6px, rgba(0,0,0,0) 5px,
rgba(190,214,250,0.06) 6px, rgba(0,0,0,0) 7.2px, rgba(0,0,0,0) 16px);
--vent-shade: linear-gradient(180deg,
rgba(0,0,0,0.36) 0, rgba(0,0,0,0.11) 28%, rgba(0,0,0,0) 56%,
rgba(198,220,255,0.06) 84%, rgba(0,0,0,0.22) 100%);
--vent-off: 283px 197px;
}
.hud-vent__plate--code {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0 14px;
--vent-off: 71px 331px;
}
.hud-vent__plate--code i {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.54rem;
letter-spacing: 0.2em;
color: rgba(160,177,204,0.62);
text-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
@media (max-width: 1340px) {
.hud-bar .hud-vent__plate--fine, .hud-bar .hud-vent__plate--code { display: none; }
}
@media (max-width: 1120px) {
.hud-bar .hud-vent__plate--wide { display: none; }
.module__vent .hud-vent__plate--code { display: none; }
}
@media (max-width: 760px) {
.module__vent .hud-vent__plate--fine { display: none; }
}
.hud-bar::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 6px;
background:
radial-gradient(circle 1.6px at 48px 3px, rgba(216,232,255,0.75), rgba(0,0,0,0) 74%),
linear-gradient(180deg, #4a586f 0 1px, #2a3444 1px 3px, #141a27 3px 5px, #04060b 5px 6px);
background-repeat: repeat-x, repeat;
background-size: 96px 6px, auto;
border-bottom: 1px solid var(--ink);
box-shadow: 0 1px 0 rgba(0,0,0,0.9);
}
.hud-veil {
position: fixed;
top: var(--hud-h);
left: 0; right: 0;
height: 28px;
z-index: 48;
pointer-events: none;
background: linear-gradient(180deg, rgba(6,9,15,0.97), rgba(6,9,15,0.52) 40%, rgba(6,9,15,0.16) 74%, rgba(6,9,15,0));
}
.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.brand__sigil {
position: relative;
width: 28px; height: 28px;
display: grid; place-items: center;
flex: none;
}
.brand__sigil span { position: absolute; }
.brand__sigil span:nth-child(1) {
inset: 0; transform: rotate(45deg);
border: 2px solid var(--ink);
background: linear-gradient(135deg, var(--amber-hi), var(--amber) 55%, var(--amber-lo));
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(80,45,5,0.7);
}
.brand__sigil span:nth-child(2) { inset: 8px; transform: rotate(45deg); background: var(--ink); }
.brand__sigil span:nth-child(3) { display: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
font-family: var(--font-display);
font-size: 0.96rem;
letter-spacing: 0.05em;
color: #eef3fb;
text-shadow: 0 1px 0 var(--ink);
}
.brand__sub { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; color: var(--bronze); margin-top: 5px; }
.hud-status {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
color: var(--muted);
padding: 0.42rem 0.75rem;
background: var(--recess);
border: 2px solid var(--ink);
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.78), inset -1px -1px 0 rgba(255,255,255,0.04);
}
.hud-stardate { display: inline-flex; align-items: center; gap: 0.5rem; }
.hud-status__label { color: var(--faint); }
.hud-status__val { color: var(--text); }
.hud-status__val[data-online] { color: var(--ok-hi); }
.hud-divider { width: 2px; height: 13px; background: var(--ink); box-shadow: 1px 0 0 rgba(255,255,255,0.07); }
.hud-links {
display: flex;
align-items: stretch;
gap: 1.35rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 2px 0 4px;
background: none;
border: 0;
box-shadow: none;
}
.hud-links a {
color: #b9c4d8;
padding: 0.34rem 0.2rem;
display: inline-flex;
align-items: center;
white-space: nowrap;
background: none;
box-shadow: none;
border-radius: 0;
transition: color .12s ease, border-color .12s ease;
border-bottom: 1px solid rgba(150,180,224,0.20);
}
.hud-links a:hover,
.hud-links a:focus-visible { color: var(--amber-hi); border-bottom-color: var(--amber); }
.hud-links a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.hero {
position: relative;
z-index: 21;
min-height: min(calc(100svh - 8rem), 900px);
display: flex;
align-items: center;
overflow: hidden;
border-bottom: 2px solid var(--ink);
isolation: isolate;
}
.hero__canvas {
position: absolute;
inset: 0;
width: 100%; height: 100%;
z-index: 1;
display: block;
opacity: 0;
transition: opacity .5s ease;
}
.world-up .hero__canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero__canvas { transition: none; }
}
.hero-static .hero__canvas { display: none; }
.hero__fallback {
position: absolute;
z-index: 0;
inset: 0;
background:
radial-gradient(closest-side at 68% 46%, rgba(110,160,220,0.20), transparent 70%),
radial-gradient(closest-side at 69% 47%, rgba(255,180,90,0.07), transparent 60%);
pointer-events: none;
}
@media (min-width: 761px) {
.hero__fallback {
background:
radial-gradient(circle calc(var(--pl-r, 42vh) * 1.07) at var(--pl-x, 76%) var(--pl-y, 50%),
rgba(0,0,0,0) 0 93%,
rgba(122,168,226,0.20) 97.5%,
rgba(0,0,0,0) 100%),
radial-gradient(circle var(--pl-r, 42vh) at var(--pl-x, 76%) var(--pl-y, 50%),
rgba(0,0,0,0) 0 99.6%, rgba(0,0,0,0) 100%),
radial-gradient(circle calc(var(--pl-r, 42vh) * 1.02) at
calc(var(--pl-x, 76%) + var(--pl-r, 42vh) * 0.50) calc(var(--pl-y, 50%) + var(--pl-r, 42vh) * 0.02),
rgba(78,132,190,0.80) 0%,
rgba(44,84,136,0.70) 30%,
rgba(18,38,66,0.55) 58%,
rgba(0,0,0,0) 82%),
radial-gradient(circle var(--pl-r, 42vh) at var(--pl-x, 76%) var(--pl-y, 50%),
rgba(6,9,16,0.97) 0 97%,
rgba(6,9,16,0.55) 99%,
rgba(0,0,0,0) 100%),
radial-gradient(closest-side at 68% 46%, rgba(110,160,220,0.10), transparent 70%);
}
.hero__fallback::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle var(--pl-r, 42vh) at var(--pl-x, 76%) var(--pl-y, 50%),
rgba(0,0,0,0) 0 90%,
rgba(126,170,224,0.16) 95.5%,
rgba(198,226,255,0.52) 98.4%,
rgba(140,182,232,0.20) 99.6%,
rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(96deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.40) 62%, #000 88%);
mask-image: linear-gradient(96deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.40) 62%, #000 88%);
}
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(72% 108% at 24% 50%,
rgba(4,6,11,0.90) 0%,
rgba(4,6,11,0.72) 40%,
rgba(4,6,11,0.30) 66%,
rgba(4,6,11,0.0) 84%);
}
.hero__grid {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
linear-gradient(rgba(150,180,220,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(150,180,220,0.05) 1px, transparent 1px);
background-size: 58px 58px;
-webkit-mask-image:
linear-gradient(90deg, #000 0 26%, rgba(0,0,0,0.55) 36%, transparent 44%),
radial-gradient(70% 96% at 24% 50%, #000 30%, transparent 100%);
mask-image:
linear-gradient(90deg, #000 0 26%, rgba(0,0,0,0.55) 36%, transparent 44%),
radial-gradient(70% 96% at 24% 50%, #000 30%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
opacity: 0.8;
}
.hero__inner {
position: relative;
z-index: 3;
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
}
.hero__copy { max-width: 37rem; }
.hero__title,
.hero__title span {
text-shadow:
0 -1px 0 var(--wm-lip),
0 1px 0 var(--wm-1),
0 2px 0 var(--wm-2),
0 4px 0 var(--ink),
0 10px 24px rgba(0,0,0,0.85);
}
.hero__title {
position: relative;
width: fit-content;
max-width: 100%;
font-family: var(--font-display);
font-size: clamp(3rem, 8.4vw, 6.1rem);
line-height: 0.96;
margin: 0 0 1.3rem;
letter-spacing: 0.005em;
color: #989da7;
--wm-lip: #d6dbe4;
--wm-1: #5f6473;
--wm-2: #3a4150;
}
.hero__title span {
color: #b4854a;
--wm-lip: #e8cb96;
--wm-1: #7d5824;
--wm-2: #4e3610;
letter-spacing: 0.0388em;
margin-right: -0.0388em;
}
.hero__title::before,
.hero__title::after {
content: '';
position: absolute;
pointer-events: none;
transition: opacity .28s ease;
}
.hero__title::before {
left: 0.15em;
right: 0.185em;
top: calc(0.96em - 0.0575em);
height: 0.115em;
background: linear-gradient(180deg, #9a9c9f 0%, #949597 40%, #7b8089 48%,
#333a48 57%, #1e2532 78%, #2b323f 100%);
}
.hero__title::after {
left: 0.0672em;
right: 0.1022em;
top: calc(0.96em - 0.0828em);
height: 0.1656em;
background-repeat: no-repeat;
background-size: 0.1656em 0.1656em;
background-position: left center, right center;
background-image:
radial-gradient(circle closest-side, #c8cace 0%, #969aa0 46%, #4d5563 78%, #2a3140 99%, transparent 100%),
radial-gradient(circle closest-side, #c8cace 0%, #969aa0 46%, #4d5563 78%, #2a3140 99%, transparent 100%);
}
.hero__title.is-baked::before,
.hero__title.is-baked::after { opacity: 0; }
.hero__title__bake {
position: absolute;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity .28s ease;
}
.hero__title.is-baked .hero__title__bake { opacity: 1; }
.hero__title,
.hero__title span { transition: color .28s ease; }
.hero__title.is-baked,
.hero__title.is-baked span {
color: transparent;
text-shadow: none;
}
.hero__lede {
font-size: clamp(1.06rem, 1.6vw, 1.26rem);
color: var(--text);
max-width: 32rem;
margin: 0 0 1.9rem;
font-weight: 500;
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem 1.3rem; }
.hero__stack {
--stack-gap: 1.25rem;
max-width: 32rem;
margin-top: 1.6rem;
}
.hero__stack > * + * { margin-top: var(--stack-gap); }
.mode-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
width: 100%;
}
.chip {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 0.5rem 1.15rem;
border-radius: 2px;
min-width: 0;
}
.chip b { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--amber-hi); text-shadow: 0 1px 0 var(--ink); }
.chip i {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.82rem;
letter-spacing: 0.07em;
line-height: 1.35;
color: var(--muted);
overflow-wrap: break-word;
}
.hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0.85rem 0.4rem;
border-radius: 2px;
width: 100%;
}
.hero__stats div {
display: flex; flex-direction: column; gap: 0.3rem;
padding: 0.15rem 1.35rem;
min-width: 0;
border-right: 2px solid var(--ink);
box-shadow: 1px 0 0 rgba(255,255,255,0.06);
}
.hero__stats div:last-child { border-right: 0; box-shadow: none; }
.hero__stats dt { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--faint); margin: 0; }
.hero__stats dd {
margin: 0;
font-family: var(--font-display);
font-size: 1.16rem;
color: var(--amber-hi);
text-shadow: 0 1px 0 var(--ink);
}
.hero__brief {
margin: 0;
padding: 0.5rem;
border-radius: 2px;
width: 100%;
}
.hero__brief dl {
margin: 0;
padding: 0.55rem 0.85rem 0.6rem;
background: var(--recess);
border: 2px solid var(--ink);
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.82), inset -1px -1px 0 rgba(255,255,255,0.045);
font-family: var(--font-mono);
font-size: 0.84rem;
letter-spacing: 0.055em;
line-height: 1.45;
display: grid;
grid-template-columns: auto 1fr;
gap: 0.42rem 0.9rem;
}
.hero__brief dt { color: var(--faint); margin: 0; }
.hero__brief dd { color: var(--text); margin: 0; }
.hero__brief dd b { color: var(--amber-hi); font-weight: 400; }
.hero__brief dd i { font-style: normal; color: #e08a72; }
.hero__brief__code {
position: absolute;
top: -9px; left: 12px;
z-index: 3;
}
.ticker {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 4;
overflow: hidden;
display: flex;
align-items: stretch;
border-top: 2px solid var(--ink);
background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.030) 0 1px, transparent 1px 13px),
linear-gradient(180deg, #0a0e17, #06090f);
box-shadow:
inset 0 3px 7px rgba(0,0,0,0.85),
inset 0 1px 0 rgba(0,0,0,0.9),
inset 0 -2px 0 rgba(190,212,244,0.07),
0 -1px 0 rgba(190,212,244,0.10);
}
.ticker__view {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
--ticker-fade: clamp(1.5rem, 4vw, 4.5rem);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--ticker-fade), #000 calc(100% - var(--ticker-fade)), transparent 100%);
}
.ticker__cap {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0 0.55rem;
border-right: 2px solid var(--ink);
background: linear-gradient(180deg, #1a2230, #0c121c);
box-shadow: inset -1px 0 0 rgba(190,212,244,0.10), inset 0 1px 0 rgba(190,212,244,0.13);
}
.ticker__pause {
width: 26px; height: 22px;
display: inline-flex;
align-items: center; justify-content: center;
padding: 0;
cursor: pointer;
color: var(--amber-hi);
border: 1px solid #04060b;
border-radius: 2px;
background: linear-gradient(180deg, #3a465c 0%, #232c3d 52%, #141a26 100%);
box-shadow: inset 0 1px 0 rgba(206,226,255,0.26), inset 0 -1px 0 rgba(0,0,0,0.8), 0 1px 0 rgba(0,0,0,0.75);
}
.ticker__pause:hover { color: #fff; background: linear-gradient(180deg, #47556e, #2b3549 52%, #1a2130 100%); }
.ticker__pause:active { box-shadow: inset 0 2px 5px rgba(0,0,0,0.85); }
.ticker__pause:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ticker__pause__glyph {
width: 9px; height: 11px;
background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.ticker.is-paused .ticker__pause__glyph {
background: currentColor;
clip-path: polygon(1px 0, 9px 50%, 1px 100%);
}
.ticker.is-paused .ticker__track { animation-play-state: paused; }
.ticker__track {
display: inline-flex;
gap: 0;
white-space: nowrap;
padding: 0.5rem 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.15em;
color: var(--muted);
animation: ticker 34s linear infinite;
}
.ticker__track span { display: inline-flex; align-items: center; padding-right: 3.2rem; }
.ticker__track span:nth-child(3n+1) { color: #a6b3c8; }
.ticker__track span:nth-child(3n) { color: var(--bronze); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.console {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 2.5rem);
display: flex;
flex-direction: column;
gap: var(--gap);
}
.module, .theatre, .enlist, .hero {
scroll-margin-top: calc(var(--hud-h) + 2rem);
}
.module { padding: 0; }
.module__head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.module__bar {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 1.2rem;
width: 100%;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0 0 0.55rem;
}
.module__bar::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, rgba(150,180,224,0.22), rgba(150,180,224,0));
}
.module__code { display: inline-flex; align-items: center; }
.module__id {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--amber-hi);
text-shadow: 0 1px 0 var(--ink);
margin: 0;
padding-right: 0.4rem;
}
.module__vent, .enlist__vent {
margin: 0;
padding: 1px;
gap: 2px;
}
.module__vent { min-width: 3rem; }
.enlist__vent {
position: absolute;
top: 17px; left: 12.2rem; right: 52px;
height: 26px;
z-index: 2;
pointer-events: none;
}
@media (max-width: 700px) { .enlist__vent { display: none; } }
.module__title, .theatre__copy h2, .enlist__inner h2 {
text-shadow:
0 -1px 0 rgba(206,224,255,0.34),
1px 1px 0 #0b0f18,
2px 2px 0 #070a11,
0 4px 7px rgba(0,0,0,0.58);
}
.module__title {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3.6vw, 2.7rem);
line-height: 1.06;
margin: 0 0 0.85rem;
color: #f0f5fd;
letter-spacing: 0.005em;
max-width: 48rem;
}
.module__lede { font-size: 1.08rem; color: var(--muted); margin: 0; max-width: 45rem; }
.doctrine-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
}
@media (max-width: 1020px) { .doctrine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar {
padding: 1.5rem 1.4rem 1.6rem;
border-radius: 3px;
transition: filter .16s ease, transform .12s ease, box-shadow .12s ease;
}
.pillar:hover {
transform: translateY(-3px);
filter: brightness(1.07);
box-shadow:
inset 2px 2px 0 rgba(176,198,232,0.22),
inset -2px -2px 0 rgba(0,0,0,0.55),
0 6px 0 var(--ink),
0 16px 30px rgba(0,0,0,0.55);
}
.pillar__code {
position: absolute;
top: -10px; left: 14px;
z-index: 3;
}
.pillar h3 {
font-family: var(--font-display);
font-size: 1.32rem;
margin: 0 0 0.6rem;
color: #eef3fb;
text-transform: uppercase;
letter-spacing: 0.07em;
text-shadow: 0 1px 0 var(--ink);
}
.pillar p { margin: 0; color: var(--muted); font-size: 0.99rem; }
.pillar p b { color: var(--amber-hi); font-weight: 600; }
.pillar__art {
position: relative;
isolation: isolate;
aspect-ratio: 688 / 276;
height: auto;
margin: 0.35rem 0 1.1rem;
display: grid;
place-items: center;
background:
radial-gradient(120% 100% at 50% 40%, #0a1322, #04060b 78%);
border: 2px solid var(--ink);
box-shadow:
inset 3px 3px 10px rgba(0,0,0,0.9),
inset -1px -1px 0 rgba(190,212,244,0.09),
inset 0 -2px 0 rgba(0,0,0,0.7);
overflow: hidden;
}
.pillar__art::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
z-index: 2;
background: linear-gradient(176deg,
rgba(206,226,255,0.24) 0%,
rgba(170,194,238,0.30) 52%,
rgba(138,164,212,0.36) 100%);
mix-blend-mode: multiply;
box-shadow: inset 0 0 46px rgba(0,0,0,0.62);
}
.pillar__bake, .pillar__plate {
position: absolute;
inset: 0;
z-index: 1;
width: 100%; height: 100%;
object-fit: cover;
filter:
saturate(var(--plate-sat, 0.78))
sepia(var(--plate-warm, 0))
brightness(var(--plate-lift, 1))
contrast(var(--plate-contrast, 1));
}
.pillar__bake {
display: block;
opacity: 0;
transition: opacity .45s ease;
}
.pillar__bake.is-baked { opacity: 1; }
.pillar__plate {
transform: scale(var(--plate-zoom, 1));
}
.pillar__tag {
position: absolute;
top: 7px; right: 7px;
z-index: 3;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
color: var(--bronze);
padding: 3px 7px;
background: rgba(4,7,12,0.92);
border: 2px solid var(--ink);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.07);
}
.pillar--danger .pillar__tag { color: #ff9f86; }
.theatre { padding-top: 0; }
.theatre__frame {
display: grid;
grid-template-columns: 1.4fr 0.8fr;
gap: clamp(1.4rem, 3.5vw, 2.8rem);
align-items: center;
padding: clamp(1.8rem, 4vw, 3rem);
min-height: 22rem;
border-radius: 3px;
overflow: hidden;
background: #04060b;
}
.theatre__art {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 34%;
z-index: 0;
pointer-events: none;
}
.theatre__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle 4px at 10px 10px, #7d8ca6 0 12%, #46516a 52%, #10151f 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at 11.5px 11.6px, rgba(0,0,0,0.80), rgba(0,0,0,0) 76%),
radial-gradient(circle 4px at calc(100% - 10px) 10px, #7d8ca6 0 12%, #46516a 52%, #10151f 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at calc(100% - 8.5px) 11.6px, rgba(0,0,0,0.80), rgba(0,0,0,0) 76%),
radial-gradient(circle 4px at 10px calc(100% - 10px), #74829b 0 12%, #414c63 52%, #0e131c 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at 11.5px calc(100% - 8.4px), rgba(0,0,0,0.80), rgba(0,0,0,0) 76%),
radial-gradient(circle 4px at calc(100% - 10px) calc(100% - 10px), #74829b 0 12%, #414c63 52%, #0e131c 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 5px at calc(100% - 8.5px) calc(100% - 8.4px), rgba(0,0,0,0.80), rgba(0,0,0,0) 76%),
linear-gradient(90deg, rgba(4,6,11,0.72) 0%, rgba(4,6,11,0.62) 34%, rgba(4,6,11,0.26) 58%, rgba(4,6,11,0.02) 82%),
linear-gradient(180deg, rgba(4,6,11,0.34) 0%, rgba(4,6,11,0.06) 32%, rgba(4,6,11,0.38) 100%),
radial-gradient(130% 130% at 52% 48%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.46) 100%);
background-repeat: no-repeat;
box-shadow:
inset 0 -3px 0 rgba(0,0,0,0.88),
inset -3px 0 0 rgba(0,0,0,0.74),
inset 0 1px 0 rgba(226,242,255,0.22),
inset 2px 0 0 rgba(160,186,224,0.18);
}
@media (max-width: 760px) {
.theatre__scrim {
background:
linear-gradient(180deg, rgba(4,6,11,0.72) 0%, rgba(4,6,11,0.90) 34%, rgba(4,6,11,0.94) 100%),
radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.60) 100%);
}
}
.theatre__frame { --gusset-inset: 12px; }
.theatre__copy { position: relative; z-index: 2; max-width: 34rem; }
.theatre__copy h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
line-height: 1.08;
margin: 0 0 0.9rem;
color: #f0f5fd;
}
.theatre__copy p { color: #ccd7ea; margin: 0 0 1.6rem; font-size: 1.06rem; text-shadow: 0 2px 7px rgba(3,5,10,0.9); }
.theatre__readout {
position: relative;
z-index: 2;
font-family: var(--font-mono);
padding: 0.5rem;
border-radius: 2px;
}
.readout__code { display: block; text-align: center; margin-bottom: 0.5rem; }
.readout__lines {
background: var(--recess);
border: 2px solid var(--ink);
box-shadow: inset 2px 2px 6px rgba(0,0,0,0.82);
padding: 0.35rem 0.75rem;
}
.readout__line {
display: flex; justify-content: space-between; gap: 1rem;
margin: 0; padding: 0.5rem 0;
border-bottom: 2px solid rgba(0,0,0,0.6);
box-shadow: 0 1px 0 rgba(255,255,255,0.04);
font-size: 0.84rem;
}
.readout__line:last-child { border-bottom: 0; box-shadow: none; }
.readout__line span { color: var(--faint); letter-spacing: 0.12em; }
.readout__line b { color: var(--amber-hi); font-weight: 400; letter-spacing: 0.05em; }
.readout__line b.hot { color: #ff8a6a; }
.dossier {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
counter-reset: fac;
}
@media (max-width: 1300px) { .dossier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .dossier { grid-template-columns: minmax(0, 1fr); } }
.race {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
padding: 1.5rem 1.2rem 1.25rem;
border-radius: 3px;
counter-increment: fac;
transition: filter .16s ease, transform .12s ease, box-shadow .12s ease;
}
.race:hover {
transform: translateY(-3px);
filter: brightness(1.08);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.13),
inset 2px 2px 0 rgba(190,212,244,0.40),
inset -2px -2px 0 rgba(0,0,0,0.80),
0 7px 0 var(--ink),
0 16px 30px rgba(0,0,0,0.55);
}
.race::before {
content: "FAC-" counter(fac, decimal-leading-zero);
position: absolute;
top: -10px; left: 14px;
z-index: 3;
font-size: 0.6rem;
}
.race__emblem {
position: relative;
isolation: isolate;
width: 104px; height: 80px;
display: grid; place-items: stretch;
padding: 3px;
background:
radial-gradient(126% 126% at 40% 30%, #2a3446 0%, #1a2130 46%, #0c111a 78%, #06090f 100%);
border: 2px solid var(--ink);
box-shadow:
inset 3px 3px 7px rgba(0,0,0,0.95),
inset 0 2px 0 rgba(0,0,0,0.8),
inset -1px -1px 0 rgba(190,212,244,0.13),
0 1px 0 rgba(196,218,252,0.16);
overflow: hidden;
flex: none;
}
.race__emblem img {
width: 100%; height: 100%;
object-fit: contain;
padding: 7%;
z-index: 2;
mix-blend-mode: screen;
filter:
url(#crest-key)
grayscale(0.72) sepia(0.62) hue-rotate(-8deg) saturate(2.3)
contrast(1.16) brightness(var(--crest-gain, 1));
}
.race:nth-child(1)  .race__emblem img { --crest-gain: 0.95; }
.race:nth-child(2)  .race__emblem img { --crest-gain: 0.92; }
.race:nth-child(3)  .race__emblem img { --crest-gain: 0.92; }
.race:nth-child(4)  .race__emblem img { --crest-gain: 0.86; }
.race:nth-child(5)  .race__emblem img { --crest-gain: 0.96; }
.race:nth-child(6)  .race__emblem img { --crest-gain: 1.11; }
.race:nth-child(7)  .race__emblem img { --crest-gain: 1.14; }
.race:nth-child(8)  .race__emblem img { --crest-gain: 1.16; }
.race:nth-child(9)  .race__emblem img { --crest-gain: 0.86; }
.race:nth-child(10) .race__emblem img { --crest-gain: 1.18; }
.race:nth-child(11) .race__emblem img { --crest-gain: 1.06; }
.race:nth-child(12) .race__emblem img { --crest-gain: 1.24; }
.race__emblem::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(158deg, rgba(198,220,255,0.11) 0%, rgba(198,220,255,0.02) 34%, rgba(198,220,255,0) 52%);
z-index: 3;
pointer-events: none;
}
.race__body {
min-width: 0;
display: grid;
grid-template-rows: auto auto 1fr auto;
}
.race__name {
font-family: var(--font-display);
font-size: 1.18rem;
margin: 0 0 0.3rem;
color: #eef3fb;
text-transform: uppercase;
letter-spacing: 0.07em;
text-shadow: 0 1px 0 var(--ink);
}
.race__role { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); min-height: 3.05em; }
.race__ability {
font-family: var(--font-ui);
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
margin: 0 0 0.8rem;
line-height: 1.36;
min-height: 2.72em;
}
.race__ability span {
display: inline-block;
font-family: var(--font-mono);
font-weight: 400;
color: var(--faint);
letter-spacing: 0.16em;
font-size: 0.62rem;
margin-right: 0.45rem;
vertical-align: 1px;
}
.race__bars {
display: grid;
gap: 0.38rem;
max-width: 239px;
margin-top: auto;
padding-top: 0.75rem;
border-top: 2px solid rgba(0,0,0,0.55);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.055);
}
.bar { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.bar i { font-family: var(--font-mono); font-style: normal; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--faint); }
.bar span {
--n: 16;
--cell: 12px;
position: relative;
height: 13px;
width: 100%;
width: calc(round(down, 100% - 4px, var(--cell)) + 4px);
max-width: calc(var(--n) * var(--cell) + 4px);
background: linear-gradient(180deg, #020308 0%, #070b13 62%, #0c121c 100%);
border: 2px solid var(--ink);
box-shadow:
inset 2px 2px 6px rgba(0,0,0,0.82),
inset -1px 0 0 rgba(190,212,244,0.07),
inset 0 -1px 0 rgba(190,212,244,0.11);
overflow: hidden;
}
.bar b {
display: block; height: 100%;
width: calc(var(--seg, 8) * var(--cell));
max-width: 100%;
background: linear-gradient(180deg,
#ffeecb 0 1px,
#f5d497 1px 2px,
#e0b264 2px 42%,
var(--bronze) 42% 66%,
#8d6931 66% 92%,
#3f2c0d 92% 100%);
box-shadow: 0 0 7px rgba(240,162,51,0.34);
}
.bar span::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background: repeating-linear-gradient(90deg,
transparent 0 calc(var(--cell) - 2px),
rgba(3,5,10,0.96) calc(var(--cell) - 2px) calc(var(--cell) - 1px),
rgba(196,218,252,0.10) calc(var(--cell) - 1px) var(--cell));
}
.race__lock {
position: absolute;
top: -10px; right: 31px;
z-index: 3;
max-width: calc(100% - 46px);
overflow: hidden;
text-overflow: ellipsis;
color: var(--bronze);
}
.chip--starter { color: var(--amber-hi); }
.chip--premium {
color: #2a1803;
background: linear-gradient(180deg, var(--amber-hi) 0 46%, var(--amber) 46% 100%);
border-color: #3a2405;
box-shadow: inset 0 1px 0 rgba(255,247,228,0.75), inset -1px -1px 0 rgba(90,52,6,0.9), 0 2px 0 var(--ink);
}
.race--premium .race__emblem {
box-shadow:
inset 2px 2px 5px rgba(0,0,0,0.92),
inset -1px -1px 0 rgba(190,212,244,0.10),
inset 0 2px 0 rgba(0,0,0,0.75),
0 0 14px rgba(240,162,51,0.20),
0 1px 0 rgba(190,212,244,0.10);
}
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.log__row {
display: grid;
grid-template-columns: 9px 8rem 1fr;
align-items: start;
gap: 1rem 1.15rem;
padding: 1.15rem 1.6rem;
border-radius: 3px;
transition: filter .16s ease, transform .12s ease;
}
.log__row:hover { transform: translateX(4px); filter: brightness(1.07); }
.log__led {
width: 9px; height: 9px; margin-top: 7px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 8px rgba(240,162,51,0.8), 0 1px 0 var(--ink);
animation: blink 3s steps(2) infinite;
}
.log__ver {
margin-top: 2px;
align-self: start;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.log__copy h3 {
font-family: var(--font-display);
font-size: 1.05rem;
margin: 0 0 0.3rem;
color: #eef3fb;
text-shadow: 0 1px 0 var(--ink);
}
.log__copy p { margin: 0; color: var(--muted); font-size: 0.99rem; max-width: 68ch; }
.enlist { padding: 0; }
.enlist__inner {
--enl-pad-t: clamp(3.4rem, 5vw, 4.2rem);
--enl-pad-x: clamp(1.5rem, 3vw, 2.6rem);
--enl-pad-b: clamp(2.2rem, 3.5vw, 3rem);
display: grid;
grid-template-columns: 13rem minmax(0, 1fr) 16rem;
gap: clamp(1.6rem, 3vw, 2.6rem);
align-items: stretch;
text-align: left;
padding: var(--enl-pad-t) var(--enl-pad-x) var(--enl-pad-b);
border-radius: 3px;
overflow: hidden;
}
.enlist__poster {
position: relative;
z-index: 2;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.enlist__window {
display: block;
position: relative;
aspect-ratio: 1 / 2;
overflow: hidden;
background: #04060b;
border: 2px solid var(--ink);
box-shadow:
inset 3px 3px 9px rgba(0,0,0,0.92),
inset -1px -1px 0 rgba(190,212,244,0.12),
0 2px 0 rgba(0,0,0,0.75),
0 1px 0 rgba(196,218,252,0.14) inset;
}
.enlist__window img {
position: absolute;
inset: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.enlist__window::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
linear-gradient(158deg, rgba(198,220,255,0.10) 0%, rgba(198,220,255,0.02) 30%, rgba(198,220,255,0) 46%),
radial-gradient(120% 120% at 50% 46%, rgba(0,0,0,0) 56%, rgba(0,0,0,0.42) 100%);
}
.enlist__poster figcaption {
margin-top: auto;
padding: 5px 6px 6px;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.13em;
text-align: center;
color: var(--bronze);
background: linear-gradient(180deg, #222b3a 0%, #151b27 54%, #080c14 100%);
border: 2px solid var(--ink);
box-shadow:
inset 0 1px 0 rgba(214,234,255,0.20),
inset -1px -1px 0 rgba(0,0,0,0.88),
0 1px 0 rgba(0,0,0,0.7);
}
.enlist__copy {
position: relative;
z-index: 2;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.4rem;
padding: 0.25rem 0;
}
.enlist__copy > .kicker { margin-bottom: 0; }
.enlist__say {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.enlist__say > .enlist__lede { margin-bottom: 0; }
.enlist__readout {
position: relative;
z-index: 2;
font-family: var(--font-mono);
padding: 0.5rem;
border-radius: 2px;
display: flex;
flex-direction: column;
}
.enlist__readout .readout__lines {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 1180px) {
.enlist__inner { grid-template-columns: 13rem minmax(0, 1fr); }
.enlist__readout { display: none; }
}
@media (max-width: 1040px) {
.enlist__inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
.enlist__poster { display: none; }
}
.enlist__code { position: absolute; top: 16px; left: 52px; z-index: 3; }
.enlist__inner .kicker { justify-content: center; }
.enlist__inner h2 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4.4vw, 3.05rem);
line-height: 1.1;
margin: 0 0 0.9rem;
color: #f2f6fd;
}
.enlist__lede { color: var(--muted); font-size: 1.08rem; max-width: 43rem; margin: 0 0 2rem; }
@media (max-width: 1040px) { .enlist__lede { margin: 0 auto 2rem; } }
.gusset {
position: absolute;
width: 26px; height: 26px;
z-index: 3;
pointer-events: none;
background:
radial-gradient(circle 3.2px at 50% 50%, #9cabc4 0 15%, #4d5872 52%, #0f141e 88%, rgba(0,0,0,0) 100%),
radial-gradient(circle 4px at calc(50% + 1.4px) calc(50% + 1.4px), rgba(0,0,0,0.85), rgba(0,0,0,0) 74%),
linear-gradient(140deg, #3d4860 0%, #29323f 46%, #131924 100%);
background-repeat: no-repeat;
border: 2px solid var(--ink);
box-shadow:
inset 1px 1px 0 rgba(204,226,255,0.22),
inset -1px -1px 0 rgba(0,0,0,0.88),
0 2px 0 rgba(0,0,0,0.7);
}
.gusset--tl { top: var(--gusset-inset, 16px); left: var(--gusset-inset, 16px); }
.gusset--tr { top: var(--gusset-inset, 16px); right: var(--gusset-inset, 16px); }
.gusset--bl { bottom: var(--gusset-inset, 16px); left: var(--gusset-inset, 16px); }
.gusset--br { bottom: var(--gusset-inset, 16px); right: var(--gusset-inset, 16px); }
@media (max-width: 560px) { .gusset { display: none; } }
.hud-foot {
max-width: var(--maxw);
margin: var(--gap) auto 0;
padding: 0 clamp(1.25rem, 4vw, 2.5rem) 1.4rem;
}
.hud-foot__plate {
padding: 1.4rem clamp(1.3rem, 3vw, 2.1rem) 1.2rem;
border-radius: 3px;
}
.hud-foot__line {
height: 12px;
margin-bottom: 1.1rem;
position: relative;
background:
radial-gradient(circle 2.2px at 10px 4px, rgba(208,224,248,0.7), rgba(0,0,0,0) 72%),
radial-gradient(circle 2.2px at calc(100% - 10px) 4px, rgba(208,224,248,0.7), rgba(0,0,0,0) 72%),
repeating-linear-gradient(90deg, rgba(0,0,0,0.34) 0 2px, transparent 2px 26px),
linear-gradient(180deg, #3a465d, var(--steel-3) 52%, var(--steel-4));
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
border: 2px solid var(--ink);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 2px 2px 0 rgba(190,212,244,0.22),
inset -2px -2px 0 rgba(0,0,0,0.8),
0 3px 0 var(--ink);
}
.hud-foot__row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.8rem 2.4rem;
align-items: center;
}
.hud-foot__brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0;
}
.hud-foot__mark {
width: 18px; height: 18px;
flex: none;
transform: rotate(45deg);
border: 2px solid var(--ink);
background: linear-gradient(135deg, var(--amber-hi), var(--amber) 55%, var(--amber-lo));
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.55),
inset -1px -1px 0 rgba(80,45,5,0.75),
0 1px 0 var(--ink);
}
.hud-foot__name {
font-family: var(--font-display);
font-size: 1.25rem;
letter-spacing: 0.05em;
color: #e9f0fb;
text-shadow:
0 -1px 0 rgba(206,224,255,0.32),
1px 1px 0 #0b0f18,
2px 2px 0 #070a11,
0 3px 6px rgba(0,0,0,0.6);
}
.hud-foot__sub { font-family: var(--font-mono); font-size: 0.68rem; color: var(--bronze); letter-spacing: 0.2em; }
.hud-foot__name, .hud-foot__sub, .hud-foot__guide { white-space: nowrap; }
@media (max-width: 1000px) {
.hud-foot__row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1rem; }
.hud-foot__links { justify-content: flex-start; }
.hud-foot__credit { text-align: left; }
}
.hud-foot__credit { font-size: 0.95rem; color: var(--muted); margin: 0; text-align: right; }
.hud-foot__guide {
font-family: var(--font-mono); font-size: 0.74rem;
color: var(--bronze); letter-spacing: 0.12em; text-transform: uppercase;
padding: 0.25rem 0;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
text-decoration-color: rgba(199,154,71,0.45);
}
.hud-foot__guide:hover, .hud-foot__guide:focus-visible { color: var(--amber-hi); text-decoration-color: var(--bronze); }
.hud-foot__guide:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.hud-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; }
.hud-foot__legal {
display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
font-family: var(--font-mono); font-size: 0.72rem;
color: var(--legal); margin: 1.05rem 0 0; letter-spacing: 0.1em;
padding-top: 0.9rem;
border-top: 2px solid rgba(0,0,0,0.55);
box-shadow: inset 0 2px 0 rgba(255,255,255,0.05);
}
.hud-foot__code { color: var(--bronze); }
.page-tape {
height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(150,180,224,0.16) 18%, rgba(150,180,224,0.16) 82%, rgba(0,0,0,0));
}
@media (min-width: 1301px) {
.page-tape {
max-width: calc(var(--maxw) + 6.5rem);
margin: 0 auto;
border-left: 2px solid var(--ink);
border-right: 2px solid var(--ink);
}
.hud-foot__line {
width: 100%;
max-width: var(--maxw);
left: 50%;
transform: translateX(-50%);
}
}
.hull {
position: fixed;
inset: 0;
z-index: 20;
pointer-events: none;
max-width: calc(var(--maxw) + 6.5rem);
margin: 0 auto;
}
.hull__rail {
position: absolute;
top: 0; bottom: 0;
width: 14px;
background:
radial-gradient(circle 2.8px at 6px 22px, rgba(226,238,255,0.95), rgba(0,0,0,0) 68%),
radial-gradient(circle 3.4px at 8px 24px, rgba(0,0,0,0.92), rgba(0,0,0,0) 68%),
linear-gradient(180deg, rgba(0,0,0,0.85) 0 3px, rgba(255,255,255,0.09) 3px 4px, transparent 4px),
linear-gradient(90deg,
#05070d 0 1px,
#6a7893 1px 3px,
#3b4659 3px 45%,
#232b3b 45% 72%,
#0c1119 72% 92%,
#04060b 92%);
background-repeat: repeat-y, repeat-y, repeat-y, no-repeat;
background-size: 14px 84px, 14px 84px, 14px 168px, 100% 100%;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.92),
0 0 20px rgba(0,0,0,0.8);
}
.hull__rail--l { left: 0; }
.hull__rail--r { right: 0; transform: scaleX(-1); }
.hull__rail::before, .hull__rail::after {
content: "";
position: absolute;
left: -3px; right: -3px;
height: 16px;
background: linear-gradient(180deg, #7f8da8 0 2px, #3b4659 2px 7px, #1a2130 7px 12px, #04060b 12px 16px);
border: 1px solid var(--ink);
box-shadow: 0 0 10px rgba(0,0,0,0.9);
}
.hull__rail::before { top: 0; }
.hull__rail::after  { bottom: 0; transform: scaleY(-1); }
.hull__edge {
position: absolute;
top: 0; bottom: 0;
width: 26px;
background:
linear-gradient(90deg,
rgba(0,0,0,0.62) 0 1px,
rgba(158,184,224,0.13) 1px 2px,
rgba(70,86,112,0.06) 2px 10px,
rgba(0,0,0,0.20) 18px,
rgba(0,0,0,0) 100%),
repeating-linear-gradient(180deg,
rgba(0,0,0,0) 0 198px,
rgba(0,0,0,0.55) 198px 199px,
rgba(160,186,226,0.07) 199px 200px,
rgba(0,0,0,0) 200px 400px);
}
.hull__edge--l { left: 14px; }
.hull__edge--r { right: 14px; transform: scaleX(-1); }
.hull__stamps {
position: absolute;
top: 0; bottom: 0;
width: 52px;
display: flex;
flex-direction: column;
justify-content: space-around;
font-family: var(--font-mono);
font-size: 0.52rem;
letter-spacing: 0.22em;
color: rgba(133,144,166,0.30);
text-align: center;
}
.hull__stamps--l { left: 22px; }
.hull__stamps--r { right: 22px; }
.hull__stamps i { font-style: normal; display: block; }
@media (max-width: 1440px) { .hull__stamps { display: none; } }
@media (max-width: 1300px) { .hull { display: none; } }
.js .reveal { opacity: 1; transform: none; }
.js .reveal.in { animation: reveal-rise .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes reveal-rise {
from { transform: translateY(22px); }
to   { transform: none; }
}
@media (max-width: 1120px) {
.hud-stardate { display: none; }
}
@media (max-height: 780px) {
.hero__brief { display: none; }
}
@media (max-width: 880px) {
.hud-status { display: none; }
.theatre__frame { grid-template-columns: 1fr; }
.hero__brief { display: none; }
.hero { min-height: 86vh; padding: 1rem 0 0; }
.hero__inner { padding-top: 3rem; padding-bottom: 6rem; }
.hero__inner::before {
content: "";
position: absolute;
inset: -2rem -1.5rem;
z-index: -1;
background: radial-gradient(120% 75% at 32% 42%, rgba(5,7,13,0.86), rgba(5,7,13,0.45) 58%, transparent 80%);
pointer-events: none;
}
.hero__canvas { -webkit-mask-image: none; mask-image: none; }
.hero__grid {
-webkit-mask-image: linear-gradient(180deg, #000 0 30%, transparent 52%);
mask-image: linear-gradient(180deg, #000 0 30%, transparent 52%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.hud-bar .hud-vent { display: none; }
.hero::after { display: none; }
}
@media (max-width: 560px) {
body { font-size: 1.01rem; }
.hud-bar { gap: 0.7rem; padding: 0.55rem 0.9rem; }
.brand__sub { display: none; }
.brand__name { font-size: 0.8rem; white-space: nowrap; }
.btn--key { font-size: 0.72rem; padding: 0.58rem 0.85rem; }
.btn__full { display: none; }
.btn__short { display: inline; }
.hud-links a:first-child { display: none; }
.hud-links { margin-left: auto; font-size: 0.62rem; }
.hero__title { font-size: clamp(2.7rem, 13.5vw, 3.9rem); }
.hero__stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero__stats div { padding: 0.15rem 0.55rem; }
.hero__stats dt { font-size: 0.55rem; letter-spacing: 0.13em; }
.hero__stats dd { font-size: 0.95rem; }
.hero__actions { gap: 1rem; }
.mode-chips { width: 100%; }
.chip { padding: 0.5rem 0.8rem; }
.btn--primary { width: 100%; justify-content: center; }
.doctrine-grid { grid-template-columns: 1fr; }
.race { grid-template-columns: 1fr; text-align: left; }
.race__emblem { width: 96px; height: 74px; }
.race__bars { max-width: none; }
.log__row { grid-template-columns: 8rem 1fr; padding: 1.1rem 1.15rem; }
.log__led { display: none; }
.module__vent, .enlist__vent { display: none; }
.hud-foot__row { grid-template-columns: 1fr; justify-items: start; }
.hud-foot__links { justify-content: flex-start; }
.hud-foot__credit { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.ticker__track { animation: none; transform: none; }
.led, .log__led { animation: none; }
.js .reveal, .js .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; }
.pillar:hover, .race:hover, .log__row:hover { transform: none; }
}
@media (max-height: 1000px) and (min-width: 761px) {
.hero__brief { display: none; }
.hero__inner { padding-top: 1.4rem; padding-bottom: 1.4rem; }
.hero__title { margin-bottom: 0.7rem; }
.hero__lede { margin-bottom: 1.15rem; }
.hero__stats { margin-top: 0.9rem; }
}
@media (max-height: 780px) and (min-width: 761px) {
.hero__stats { display: none; }
}
.js.motion-on .ticker__track { animation: ticker 34s linear infinite; }
.js.motion-on .led           { animation: blink 2.4s steps(2) infinite; }
.js.motion-on .log__led      { animation: blink 2.4s steps(2) infinite; }
.js.motion-on .reveal.in      { animation: reveal-rise .55s cubic-bezier(.22,.61,.36,1) both; }
.js.motion-on .pillar:hover   { transform: translateY(-3px); }
.js.motion-on .hero__canvas   { transition: opacity .5s ease; }
.js.motion-off .ticker__track { animation: none; transform: none; }
.js.motion-off .led,
.js.motion-off .log__led      { animation: none; }
.js.motion-off .reveal,
.js.motion-off .reveal.in     { opacity: 1 !important; transform: none !important; animation: none !important; }
.js.motion-off .pillar:hover,
.js.motion-off .race:hover,
.js.motion-off .log__row:hover { transform: none; }
.js.motion-off .hero__canvas  { transition: none; }
.js.motion-off .scanlines,
.js.motion-off .vignette      { transition: none; }
.js.motion-off .ticker__cap,
.js.motion-on  .ticker__cap   { display: flex; }