/* Uplink: brand layer. Loaded after style.css. It adds the new logo treatment, the loading screen,
   the redesigned launch panel and a few finishing touches. Gold stays the action colour; the logo's
   blue becomes the brand colour. Every colour comes from a token. */

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --brand: #4aa8ff;
  --brand-2: #8fd0ff;
  --brand-ink: #03101f;
  --brand-glow: rgba(74, 168, 255, 0.38);
  --brand-line: rgba(120, 175, 255, 0.28);
}
html[data-phase="dawn"], html[data-phase="dusk"] { --brand: #6db6ff; --brand-line: rgba(255, 214, 190, 0.3); }

/* ---- Logo ------------------------------------------------------------------------------------- */
.brand { gap: 14px; }
.brand-patch {
  position: relative; display: inline-block; width: 58px; height: 58px; flex: none; margin: 0;
  border-radius: 50%; overflow: visible; background: #040d22;
  box-shadow: 0 0 0 2px rgba(143, 208, 255, 0.9), 0 0 0 6px rgba(74, 168, 255, 0.14), 0 0 28px var(--brand-glow);
  transition: transform 0.4s cubic-bezier(.2,1.4,.4,1), box-shadow 0.4s;
}
.brand-patch img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform: scale(1.2); transform-origin: 50% 50%; filter: saturate(1.12) contrast(1.06) brightness(1.08); }
.brand-patch::before { /* a light that circles the logo */
  content: ''; position: absolute; inset: -6px; border-radius: 50%; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0 62%, var(--brand) 82%, #fff 90%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: spin-around 6s linear infinite;
}
@keyframes spin-around { to { --spin: 360deg; } }
.brand:hover .brand-patch { transform: rotate(-6deg) scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(74, 168, 255, 0.2), 0 0 36px var(--brand-glow); }
.brand-word { font: 700 17px var(--font-display); letter-spacing: 0.2em; background: linear-gradient(100deg, var(--text), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-brand .brand-patch { width: 46px; height: 46px; }
@media (max-width: 700px) { .brand-patch { width: 50px; height: 50px; } }

/* ---- Loading screen --------------------------------------------------------------------------- */
.boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; padding: 24px;
  color: #eaf0ff; text-align: center;
  background: radial-gradient(90vmax 70vmax at 50% 46%, #0b1d4d 0%, #060d2a 42%, #01030c 100%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot.is-done .boot-core { transform: scale(1.06); transition: transform 0.9s ease; }
.space { position: absolute; inset: 0; overflow: hidden; }
.space > * { position: absolute; display: block; }

/* galaxies: a bright core and two soft arms that turn slowly */
.galaxy { width: var(--s); aspect-ratio: 1; left: var(--x); top: var(--y); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform: rotate(var(--tilt)) scaleY(var(--sq)); opacity: 0.62; pointer-events: none; }
.galaxy svg { width: 100%; height: 100%; overflow: visible; animation: galaxy-turn var(--gt, 160s) linear infinite; will-change: transform; }
@keyframes galaxy-turn { to { transform: rotate(360deg); } }
.galaxy.g1 { --s: 66vmax; --x: 2%; --y: 30%; --tilt: -24deg; --sq: 0.5; }
.galaxy.g2 { --s: 60vmax; --x: 98%; --y: 90%; --tilt: 18deg; --sq: 0.46; --gt: 200s; }
.galaxy.g2 svg { animation-direction: reverse; }
.galaxy.g3 { --s: 30vmax; --x: 86%; --y: 14%; --tilt: 52deg; --sq: 0.55; opacity: 0.7; --gt: 120s; }

/* stars: two still layers that twinkle, plus one sparse layer that drifts (kept small so it stays smooth) */
.dust { inset: 0; background-repeat: repeat; }
.dust.d1 { background-size: 340px 260px; animation: dust-twinkle 3.6s ease-in-out infinite alternate;
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 90px 140px, #cfe0ff, transparent), radial-gradient(1.4px 1.4px at 160px 70px, #fff, transparent), radial-gradient(1px 1px at 230px 200px, #ffe6c0, transparent), radial-gradient(1px 1px at 300px 110px, #fff, transparent), radial-gradient(1px 1px at 60px 230px, #bcd3ff, transparent); }
.dust.d2 { background-size: 470px 390px; animation: dust-twinkle 5.2s ease-in-out -2s infinite alternate;
  background-image: radial-gradient(1.2px 1.2px at 40px 60px, #fff, transparent), radial-gradient(1px 1px at 180px 250px, #cfe0ff, transparent), radial-gradient(1.6px 1.6px at 320px 120px, #fff, transparent), radial-gradient(1px 1px at 420px 330px, #ffe0b0, transparent), radial-gradient(1px 1px at 250px 40px, #fff, transparent); }
.dust.d3 { inset: -420px; background-size: 420px 420px; will-change: transform; animation: dust-drift 140s linear infinite;
  background-image: radial-gradient(2px 2px at 80px 90px, #fff, transparent), radial-gradient(1.8px 1.8px at 290px 300px, #d6e6ff, transparent), radial-gradient(2px 2px at 360px 60px, #fff, transparent), radial-gradient(1.6px 1.6px at 150px 380px, #ffe9c4, transparent); }
@keyframes dust-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-420px, 420px, 0); } }
@keyframes dust-twinkle { from { opacity: 0.4; } to { opacity: 1; } }

.shoot { left: var(--x); top: var(--y); width: 150px; height: 1.5px; opacity: 0; transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); border-radius: 2px; filter: drop-shadow(0 0 4px #9fcbff);
  animation: shooting 9s ease-in infinite; animation-delay: var(--d); }
.shoot.sh1 { --x: 14%; --y: 12%; --d: 1.2s; } .shoot.sh2 { --x: 52%; --y: 6%; --d: 4.8s; } .shoot.sh3 { --x: 70%; --y: 38%; --d: 7.4s; animation-duration: 11s; }
@keyframes shooting { 0% { opacity: 0; transform: translate(0, 0) rotate(28deg); } 2% { opacity: 1; } 9% { opacity: 0; transform: translate(380px, 202px) rotate(28deg); } 100% { opacity: 0; transform: translate(380px, 202px) rotate(28deg); } }

/* satellites crossing the sky at different depths */
.fly { left: 0; top: var(--y); width: var(--w); height: auto; opacity: var(--o); animation: cross var(--t) linear infinite; animation-delay: var(--d); will-change: transform; }
.fly.f1 { --w: 96px; --y: 16%; --o: 0.95; --t: 46s; --d: -8s; --dy: -6vh; --r: -9deg; }
.fly.f2 { --w: 54px; --y: 72%; --o: 0.65; --t: 64s; --d: -34s; --dy: -16vh; --r: 14deg; }
.fly.f3 { --w: 70px; --y: 40%; --o: 0.75; --t: 54s; --d: -20s; --dy: 10vh; --r: 8deg; animation-name: cross-back; }
.fly.f4 { --w: 34px; --y: 86%; --o: 0.45; --t: 78s; --d: -50s; --dy: -22vh; --r: -4deg; }
.fly.f5 { --w: 44px; --y: 28%; --o: 0.5; --t: 70s; --d: -12s; --dy: 6vh; --r: 18deg; animation-name: cross-back; }
@keyframes cross { from { transform: translate3d(-14vw, 0, 0) rotate(var(--r)); } to { transform: translate3d(114vw, var(--dy), 0) rotate(var(--r)); } }
@keyframes cross-back { from { transform: translate3d(114vw, 0, 0) rotate(var(--r)); } to { transform: translate3d(-14vw, var(--dy), 0) rotate(var(--r)); } }

.boot-grid { inset: 0; pointer-events: none; background: radial-gradient(70% 62% at 50% 48%, transparent 42%, rgba(0, 2, 10, 0.72) 100%); }

.boot-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.boot-stage { position: relative; width: min(390px, 80vw); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 4px; }
.boot-logo {
  position: relative; z-index: 3; width: 52%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #04101c;
  box-shadow: 0 0 0 2px rgba(143, 208, 255, 0.85), 0 0 0 9px rgba(74, 168, 255, 0.12), 0 0 90px rgba(74, 168, 255, 0.5);
  animation: logo-in 1.1s cubic-bezier(.2,.8,.2,1) both, bob 6s ease-in-out 1.1s infinite;
}
.boot-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
@keyframes logo-in { from { opacity: 0; transform: scale(0.6) rotate(-14deg); } to { opacity: 1; transform: none; } }
.beam { position: absolute; inset: 26%; border-radius: 50%; border: 1px solid rgba(120, 195, 255, 0.6); animation: beam-out 3.9s ease-out infinite; }
.beam.b2 { animation-delay: 1.3s; } .beam.b3 { animation-delay: 2.6s; }
@keyframes beam-out { from { transform: scale(1); opacity: 0.75; } to { transform: scale(3.4); opacity: 0; } }
.boot-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.ol { fill: none; stroke: rgba(160, 210, 255, 0.5); stroke-width: 1; stroke-dasharray: 2 7; }
.ol.faint { stroke: rgba(160, 210, 255, 0.28); }

.boot-kicker { font: 600 11px var(--font-text); letter-spacing: 0.42em; text-transform: uppercase; color: var(--brand-2); margin-top: 6px; animation: rise 0.8s 0.2s both; }
.boot-title { font: 600 clamp(26px, 5vw, 44px)/1.1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: #eaf0ff; text-shadow: 0 0 40px rgba(74, 168, 255, 0.45); animation: rise 0.8s 0.3s both; }
.boot-title b { font-weight: 700; background: linear-gradient(100deg, #8fd0ff, #fff 45%, #4aa8ff 70%, #8fd0ff); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 4.5s linear infinite; text-shadow: none; }
.boot-text { font-size: 13.5px; color: #9fb2e0; letter-spacing: 0.05em; min-height: 1.4em; animation: rise 0.8s 0.4s both; }
.boot-bar { width: min(280px, 64vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; position: relative; animation: rise 0.8s 0.45s both; }
.boot-bar span { display: block; height: 100%; width: 8%; border-radius: 3px; background: linear-gradient(90deg, #1c6fd1, #4aa8ff, #cfeaff); box-shadow: 0 0 14px rgba(74, 168, 255, 0.8); transition: width 0.6s ease; }
.boot-mono { display: flex; gap: 16px; font: 600 10px var(--font-mono); letter-spacing: 0.24em; color: #56658f; animation: rise 0.8s 0.5s both; }
.boot-mono span { animation: blip 2.4s ease-in-out infinite; }
.boot-mono span:nth-child(2) { animation-delay: 0.6s; } .boot-mono span:nth-child(3) { animation-delay: 1.2s; } .boot-mono span:nth-child(4) { animation-delay: 1.8s; }
@keyframes blip { 0%, 100% { color: #56658f; } 50% { color: #8fd0ff; text-shadow: 0 0 10px rgba(74, 168, 255, 0.7); } }

.boot-help { max-width: min(460px, 88vw); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--brand-line); background: rgba(4, 10, 28, 0.8); font-size: 13px; line-height: 1.55; color: #c3d0f0; animation: rise 0.5s both; }
.boot-help-actions { display: flex; gap: 8px; }

/* ---- The launch panel ------------------------------------------------------------------------- */
.rail {
  padding: 18px 18px 22px; border-radius: 24px; border: 1px solid var(--brand-line);
  background:
    radial-gradient(130% 36% at 50% 0, rgba(74, 168, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(8, 18, 46, 0.86), rgba(3, 8, 22, 0.9));
  box-shadow: 0 30px 80px rgba(0, 4, 20, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html[data-phase="day"] .rail { background: radial-gradient(130% 36% at 50% 0, rgba(143, 208, 255, 0.2), transparent 70%), linear-gradient(180deg, rgba(6, 20, 52, 0.86), rgba(4, 12, 32, 0.9)); }
.view { gap: 16px; }

.rail-hero {
  position: relative; overflow: hidden; gap: 12px; padding: 18px 18px 16px; border: 1px solid var(--brand-line); border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0, rgba(74, 168, 255, 0.24), transparent 62%),
    radial-gradient(80% 70% at 0 100%, rgba(150, 110, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), rgba(4, 10, 28, 0.55);
}
.rail-hero::before { /* a slow ring of orbit behind the title */
  content: ''; position: absolute; right: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(143, 208, 255, 0.3); animation: spin 70s linear infinite;
}
.rail-hero::after { /* a moving line of light along the top edge */
  content: ''; position: absolute; inset: 0 0 auto 0; width: auto; height: 1px; bottom: auto; transform: translateX(-100%); box-shadow: none;
  background: linear-gradient(90deg, transparent, var(--brand-2), transparent); opacity: 0.8; animation: sweep-x 6s ease-in-out infinite; will-change: transform;
}
.rail-hero > * { position: relative; z-index: 1; }
.rh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eyebrow { color: var(--brand-2); }
.eyebrow i { background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: ping-live 2.2s ease-out infinite; }
@keyframes sweep-x { 0%, 15% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@keyframes ping-live { 0% { box-shadow: 0 0 0 0 rgba(95, 224, 232, 0.7); } 100% { box-shadow: 0 0 0 10px transparent; } }
.rh-clock { font: 600 11px var(--font-mono); letter-spacing: 0.12em; color: var(--muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums; }
.rail h1 { font-size: 32px; line-height: 1.02; letter-spacing: -0.035em; }
.rail h1 em { background: linear-gradient(100deg, var(--brand), #fff 50%, var(--brand-2)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 6s linear infinite; }
.lede-punch { border-left-color: var(--brand); }

.rh-stats { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rh-stats li { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.24); }
.rh-stats li::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--brand), transparent); opacity: 0.8; }
.rh-stats b { font: 600 19px/1.15 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.rh-stats span { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.rh-flow { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rh-flow::before { content: ''; position: absolute; left: 12%; right: 12%; top: 17px; height: 2px; background: repeating-linear-gradient(90deg, var(--brand-line) 0 6px, transparent 6px 12px); }
.rh-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rh-flow i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(6, 14, 36, 0.95); transition: all 0.4s; }
.rh-flow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rh-flow li.is-on { color: var(--text); }
.rh-flow li.is-on i { color: var(--brand-ink); border-color: transparent; background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: 0 0 0 5px rgba(74, 168, 255, 0.16), 0 6px 22px var(--brand-glow); animation: node-pulse 2.6s ease-in-out infinite; }
.rh-flow li.is-done i { color: var(--live); border-color: color-mix(in srgb, var(--live) 60%, transparent); }
@keyframes node-pulse { 50% { box-shadow: 0 0 0 9px rgba(74, 168, 255, 0.06), 0 6px 26px var(--brand-glow); } }

.ca-card { border-color: var(--brand-line); background: linear-gradient(135deg, rgba(74, 168, 255, 0.12), transparent 70%), var(--field); }
.ca-label { color: var(--brand-2); }

.locate { position: relative; border-color: var(--brand-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), rgba(4, 10, 28, 0.5); }
.step-label { color: var(--text); }
.radar { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--brand); flex: none; overflow: hidden; background: radial-gradient(circle, transparent 38%, rgba(74, 168, 255, 0.35) 40% 44%, transparent 46%); }
.radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from var(--sweep), rgba(74, 168, 255, 0.85), transparent 28%); animation: sweep 2.4s linear infinite; }
.radar i { position: absolute; left: 62%; top: 26%; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: blip-dot 2.4s ease-in-out infinite; }
@keyframes sweep { to { --sweep: 360deg; } }
@keyframes blip-dot { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

.list-head h2 { color: var(--text); }
.list-head .hint { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; }

.sat-row { grid-template-columns: auto 1fr auto; gap: 12px; padding: 11px 14px 11px 12px; border-radius: 16px; }
.pip { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; animation: none; box-shadow: none; flex: none;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tier) 34%, transparent), transparent 75%), rgba(4, 10, 28, 0.75);
  border: 1px solid color-mix(in srgb, var(--tier) 60%, transparent); }
.pip svg { width: 28px; height: auto; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tier) 60%, transparent)); animation: bob 4s ease-in-out infinite; }
.pip::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--tier); opacity: 0; animation: ring-ping 2.8s ease-out infinite; }
@keyframes ring-ping { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.sat-row:nth-child(n+11) .pip svg, .sat-row:nth-child(n+11) .pip::after { animation: none; }
.sat-row:nth-child(2n) .pip svg { animation-delay: -1.2s; } .sat-row:nth-child(3n) .pip svg { animation-delay: -2.4s; }
.sat-row:hover .pip { transform: scale(1.05); }

/* mission view */
.mission-head { padding: 16px; border-radius: 18px; border: 1px solid var(--brand-line); background: linear-gradient(135deg, rgba(74, 168, 255, 0.12), transparent 65%), rgba(4, 10, 28, 0.5); }
.catch { position: relative; overflow: hidden; border-color: var(--brand-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), rgba(4, 10, 28, 0.5); }
.catch::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(74, 168, 255, 0.08), transparent); transform: translateY(-100%); animation: scanline 5s linear infinite; will-change: transform; }
@keyframes scanline { to { transform: translateY(280%); } }

.progress { gap: 0; }
.progress li { position: relative; align-items: center; gap: 7px; text-align: center; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.progress li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 11px var(--font-display); letter-spacing: 0; color: var(--muted); border: 1px solid var(--line); background: rgba(6, 14, 36, 0.95); transition: all 0.4s; z-index: 1; }
.progress li:not(:last-child)::after { content: ''; position: absolute; top: 12px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px; border-radius: 2px; background: var(--line); transition: background 0.4s; }
.progress li.is-done::before { content: '\2713'; color: var(--brand-ink); border-color: transparent; background: var(--live); }
.progress li.is-done:not(:last-child)::after { background: var(--live); }
.progress li.is-active::before { color: var(--brand-ink); border-color: transparent; background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: 0 0 0 5px rgba(74, 168, 255, 0.16), 0 4px 18px var(--brand-glow); animation: node-pulse 2.4s ease-in-out infinite; }

.telemetry { position: relative; border-color: var(--brand-line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent), rgba(4, 10, 28, 0.5); padding-top: 34px; }
.telemetry::before { content: 'Live telemetry'; position: absolute; left: 14px; top: 11px; font: 700 10.5px var(--font-text); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-2); }
.telemetry::after { content: ''; position: absolute; right: 14px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); animation: pulse 1.6s ease-in-out infinite; --tier: var(--live); }
.telemetry dt, .telemetry dd { border-top: 1px solid rgba(160, 185, 255, 0.08); }
.telemetry dt:nth-of-type(1), .telemetry dd:nth-of-type(1) { border-top: 0; }
.telemetry.is-locked::before { content: 'Captured snapshot'; color: var(--accent); }
.telemetry.is-locked::after { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: none; }

.art-preview { position: relative; border-color: var(--brand-line); }
.art-preview::before, .art-preview::after { content: ''; position: absolute; z-index: 2; width: 22px; height: 22px; pointer-events: none; border: 2px solid var(--brand-2); opacity: 0.85; }
.art-preview::before { right: 8px; top: 8px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.art-preview::after { left: 8px; bottom: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.field label { letter-spacing: 0.01em; }
.hashbox { border-color: var(--accent); }
.repass { border-color: var(--brand-line); background: rgba(4, 10, 28, 0.5); }

.chip[aria-pressed="true"] { box-shadow: 0 0 16px color-mix(in srgb, var(--tier, var(--brand)) 28%, transparent); }

/* ---- Finishing touches across the site --------------------------------------------------------- */
.sky-bg { background:
  radial-gradient(60vmax 40vmax at 12% 8%, rgba(74, 168, 255, 0.1), transparent 70%),
  radial-gradient(70vmax 46vmax at 78% 6%, var(--glow), transparent 70%),
  linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 130%); }
.topbar { border-bottom-color: var(--brand-line); }
.topbar::after { background: linear-gradient(90deg, transparent, var(--brand), var(--accent), var(--brand), transparent) 0 0 / 200% 100%; opacity: 0.6; }
.topbar nav a { position: relative; }
.topbar nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
.topbar nav a:hover::after { transform: scaleX(1); }

.stage-tabs { border-color: var(--brand-line); box-shadow: 0 10px 30px rgba(0, 4, 20, 0.35); }
.hud-item { position: relative; overflow: hidden; border-color: var(--brand-line); }
.hud-item::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); opacity: 0.7; }
.stage-status { border-color: var(--brand-line); }
.legend { border-color: var(--brand-line); }

.btn:hover { border-color: var(--brand-2); }
.btn-ghost:hover { box-shadow: 0 0 20px rgba(74, 168, 255, 0.18); }
.tl-card:hover, .trust-grid li:hover { border-color: var(--brand-line); }
.trust-grid li, .tl-card, .tier-list li { transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s; }
.trust-grid li:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 4, 20, 0.3); }
main > section:not(.console)::before { background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: 0.5; }
.footer { border-top-color: var(--brand-line); }
.footer-links a:hover { border-color: var(--brand); }
.toast { border-color: var(--brand-line); }

@media (max-width: 960px) {
  .rail { padding: 14px; margin: 10px 12px 24px; }
  .rail h1 { font-size: 28px; }
}
@media (max-width: 960px) {
  .hud { flex-wrap: nowrap; width: 100%; }
  .hud-item { flex: 1 1 0; min-width: 0; }
  .hud-label { font-size: 9.5px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) {
  .rh-stats b { font-size: 16px; }
  .rh-flow li { font-size: 10px; letter-spacing: 0.02em; }
}

@media (prefers-reduced-motion: reduce) {
  .space *, .boot-stage *, .brand-patch::before, .rail-hero::before { animation: none !important; }
  .fly { display: none; }
}

/* ---- Deep space behind the globe ---------------------------------------------------------------
   Slow galaxies, a few far satellites and the odd shooting star. Quiet on purpose: it sits behind
   the Earth and never competes with it. Everything moves with transforms only. */
.deep { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.dg { position: absolute; display: block; aspect-ratio: 1; opacity: 0.34; pointer-events: none; }
.dg svg { width: 100%; height: 100%; overflow: visible; }
.dg1 { width: 74vmax; left: -8%; top: 62%; margin: -37vmax 0 0 -37vmax; transform: rotate(-26deg) scaleY(0.46); }
.dg2 { width: 54vmax; left: 96%; top: 14%; margin: -27vmax 0 0 -27vmax; transform: rotate(22deg) scaleY(0.5); opacity: 0.28; }
.dsat { position: absolute; left: 0; top: var(--y); width: var(--w); height: auto; opacity: var(--o); animation: cross var(--t) linear infinite; animation-delay: var(--d); will-change: transform; }
.ds1 { --w: 62px; --y: 20%; --o: 0.5; --t: 120s; --d: -30s; --dy: -8vh; --r: -8deg; }
.ds2 { --w: 38px; --y: 66%; --o: 0.36; --t: 160s; --d: -90s; --dy: 12vh; --r: 12deg; animation-name: cross-back; }
.ds3 { --w: 28px; --y: 84%; --o: 0.28; --t: 190s; --d: -40s; --dy: -18vh; --r: 6deg; }
.dshoot { position: absolute; left: var(--x); top: var(--y); width: 130px; height: 1.5px; opacity: 0; transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff); filter: drop-shadow(0 0 4px #9fcbff); animation: shooting 16s ease-in infinite; animation-delay: var(--d); }
.dh1 { --x: 62%; --y: 10%; --d: 3s; } .dh2 { --x: 22%; --y: 34%; --d: 11s; animation-duration: 21s; }
html[data-phase="day"] .deep { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .dsat, .dshoot { animation: none; } .dshoot { display: none; } .dsat { transform: translate3d(30vw, 0, 0); } }
@media (max-width: 700px) { .dsat.ds3, .dh2 { display: none; } }

/* ---- How it works: the emblem and scroll motion ------------------------------------------------ */
.how-art { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.emb { --p: var(--fill, 0); position: relative; width: min(340px, 78vw); aspect-ratio: 1; display: grid; place-items: center; }
.emb-logo { position: relative; z-index: 3; width: 56%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #04101c;
  box-shadow: 0 0 0 2px rgba(143, 208, 255, 0.85), 0 0 0 9px rgba(74, 168, 255, 0.12), 0 0 70px rgba(74, 168, 255, 0.45);
  animation: bob 7s ease-in-out infinite; }
.emb-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.emb-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid var(--brand-line); }
.emb-ring.r2 { inset: 4%; border-style: dashed; opacity: 0.7; } .emb-ring.r3 { inset: -6%; opacity: 0.45; }
.emb-ring.r1 { animation: emb-turn 40s linear infinite; border-top-color: var(--brand); border-right-color: transparent; }
.emb-ring.r2 { animation: emb-turn 70s linear infinite reverse; }
@keyframes emb-turn { to { transform: rotate(360deg); } }
.emb-orbit { position: absolute; inset: -8%; width: 116%; height: 116%; z-index: 2; overflow: visible; transform: rotate(calc(var(--fill, 0) * 90deg)); transition: transform 0.5s ease-out; }
.emb-pulse { position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(120, 195, 255, 0.6); animation: beam-out 4.2s ease-out infinite; z-index: 1; }
.emb-cap { display: flex; align-items: baseline; gap: 8px; font: 600 12px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.emb-cap b { font-size: 22px; color: var(--accent); transition: transform 0.3s cubic-bezier(.2,1.5,.4,1); display: inline-block; }
.emb-cap b.pop { transform: scale(1.35); }
.how-art > img { display: none; }

/* scroll-linked motion on the steps */
.tl-step.rv { transition-duration: 0.9s; }
.tl-step:nth-child(even).rv { transform: translate(26px, 18px); }
.tl-step.rv.in { transform: none; }
.tl-num { transition: transform 0.5s cubic-bezier(.2,1.5,.4,1), background 0.4s, box-shadow 0.4s, color 0.4s; }
.tl-step.on .tl-num::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: beam-out 2.6s ease-out 1; }
.tl-step .tl-tag { transition: opacity 0.6s 0.2s, transform 0.6s 0.2s; opacity: 0.5; transform: translateX(-6px); }
.tl-step.on .tl-tag { opacity: 1; transform: none; }
.how-head h2 { background: linear-gradient(100deg, var(--text) 30%, var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 960px) { .emb { width: min(280px, 70vw); } }
@media (prefers-reduced-motion: reduce) { .emb-ring, .emb-logo, .emb-pulse { animation: none; } .emb-orbit { transition: none; } .tl-step .tl-tag { opacity: 1; transform: none; } }

/* ---- Loading screen: same colours as the site ------------------------------------------------- */
.boot { background: radial-gradient(90vmax 70vmax at 50% 46%, #07123a 0%, #02051a 44%, #000106 100%); }
.galaxy { opacity: 0.5; } .galaxy.g3 { opacity: 0.55; }
.boot-kicker { color: var(--accent); }
.boot-bar span { background: linear-gradient(90deg, var(--accent-2), var(--accent), #fff1c9); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent); }
.boot-title b { background-image: linear-gradient(100deg, #8fd0ff, #fff 45%, var(--accent) 75%, #8fd0ff); }
.boot-mono span:last-child { color: var(--accent); }
.beam { border-color: rgba(120, 195, 255, 0.5); }