/* Lunarpad v3: real space, quiet glass, one clear path through the page.
   Loaded last. It sets the palette (always deep space; the time of day only tints the light), restyles
   the globe's controls and the side menu, and adds the motion. Older layers remain for the sections below. */

/* ---- Palette ------------------------------------------------------------------------------------ */
/* Palette: near-black with chrome. Matches the logo (silver on black); nothing blue except the Earth itself. */
:root,
html[data-phase="night"],
html[data-phase="dawn"],
html[data-phase="day"],
html[data-phase="dusk"] {
  --sky1: #020203; --sky2: #060607; --sky3: #0e0e0f;
  --glow: rgba(214, 220, 232, 0.07);
  --star-opacity: 1;
  --text: #f1f2f5; --muted: #a0a4ae; --dim: #6f737e;
  --glass: rgba(11, 11, 12, 0.66); --glass-solid: rgba(8, 8, 8, 0.96);
  --glass-line: rgba(214, 220, 232, 0.12); --line: rgba(214, 220, 232, 0.09);
  --field: rgba(255, 255, 255, 0.035); --field-2: rgba(255, 255, 255, 0.065);
  --accent: #dfe3ea; --accent-2: #a9afbb; --accent-ink: #0a0a0b;
  --brand: #c4cad6; --brand-2: #eceff4; --brand-ink: #09090a; --brand-line: rgba(214, 220, 232, 0.24); --brand-glow: rgba(214, 220, 232, 0.26);
  --link: #cfd5e0; --live: #9fe3c9; --danger: #ff8f80;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.2, 1.35, .4, 1);
  --rail-w: 392px;
  --bar: 64px;
  color-scheme: dark;
}

/* ---- Space -------------------------------------------------------------------------------------- */
body { background: var(--sky1); }
.sky-bg {
  background:
    radial-gradient(55vmax 45vmax at 66% 46%, var(--glow), transparent 70%),
    radial-gradient(120vmax 70vmax at 50% 130%, color-mix(in srgb, var(--sky3) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 62%, var(--sky3) 140%);
}
.sky-bg::before, .sky-bg::after { content: none; }
#stars { opacity: var(--star-opacity); }
.vignette { background: radial-gradient(120% 90% at 60% 45%, transparent 45%, rgba(1, 1, 2, 0.7) 100%); }

/* ---- Top bar ------------------------------------------------------------------------------------ */
.topbar {
  height: var(--bar); padding: 0 22px; gap: 10px;
  background: linear-gradient(180deg, rgba(7, 7, 8, 0.82), rgba(7, 7, 8, 0.55));
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.topbar::after { opacity: 0.25; }
.brand { gap: 12px; }
.brand-patch { width: 40px; height: 40px; box-shadow: 0 0 0 1.5px rgba(206, 212, 224, 0.75), 0 0 18px var(--brand-glow); }
.brand-patch::before { inset: -4px; }
.brand-word { font-size: 15px; letter-spacing: 0.24em; }
.topbar nav { gap: 2px; margin-right: 10px; }
.topbar nav a { font-size: 13.5px; padding: 8px 12px; color: var(--muted); }
.topbar nav a:hover, .topbar nav a[aria-current="page"] { color: var(--text); background: var(--field-2); }
.topbar nav a::after { left: 14px; right: 14px; bottom: 3px; height: 1.5px; }
.topbar .btn { min-height: 38px; border-radius: 11px; font-size: 13.5px; }
.topbar .icon-btn { width: 38px; }

/* ---- Buttons ------------------------------------------------------------------------------------ */
.btn { border-color: var(--glass-line); transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.25s, color 0.2s; }
.btn:hover { border-color: var(--brand-line); background: var(--field-2); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary { box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-wide { min-height: 46px; border-radius: 13px; }

/* ---- Globe controls ------------------------------------------------------------------------------- */
.stage-tabs, .legend, .stage-status, .hud {
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(4, 4, 4, 0.35);
}
.stage-tabs { position: absolute; padding: 4px; border-radius: 13px; }
.stage-tabs::before {
  content: ''; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--ind-w, 0px); border-radius: 9px;
  transform: translateX(var(--ind-x, 0px)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform 0.5s var(--spring), width 0.5s var(--spring); opacity: var(--ind-o, 0);
}
.stage-tabs button { position: relative; z-index: 1; padding: 7px 14px; border-radius: 9px; font-size: 12.5px; transition: color 0.3s; }
.stage-tabs.has-ind button[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--accent-ink); }
.stage-tabs button:not([aria-selected="true"]):hover { color: var(--text); }

.legend { padding: 10px 12px; gap: 7px; border-radius: 13px; font-size: 11.5px; }
.legend li { gap: 9px; }
.legend i { width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tier) 18%, transparent); }
.legend li { opacity: 0; transform: translateX(6px); animation: slide-in 0.6s var(--ease) forwards; }
.legend li:nth-child(2) { animation-delay: 0.05s; } .legend li:nth-child(3) { animation-delay: 0.1s; } .legend li:nth-child(4) { animation-delay: 0.15s; }
.legend li:nth-child(5) { animation-delay: 0.2s; } .legend li:nth-child(6) { animation-delay: 0.25s; }

.stage-status { padding: 7px 14px 7px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; }
.stage-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: live-ping 2.4s ease-out infinite; flex: none; }
.stage-status.is-error::before { background: var(--danger); animation: none; }

.hud { gap: 0; padding: 0; border-radius: 14px; overflow: hidden; flex-wrap: nowrap; }
.hud-item { background: none; border: 0; border-radius: 0; padding: 9px 16px; min-width: 104px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hud-item + .hud-item { border-left: 1px solid var(--line); }
.hud-item::before { content: none; }
.hud-num { font-size: 17px; font-weight: 600; }
.hud-label { font-size: 10px; letter-spacing: 0.09em; color: var(--dim); }

/* ---- The side menu -------------------------------------------------------------------------------- */
.rail {
  padding: 18px; border-radius: 22px; border: 1px solid var(--glass-line);
  background: linear-gradient(180deg, rgba(19, 19, 20, 0.72), rgba(10, 10, 11, 0.78));
  background-image: none;
  box-shadow: 0 30px 80px rgba(4, 4, 4, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25);
  scrollbar-gutter: stable;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--glass-line); border-radius: 6px; }
.view { gap: 14px; }
.view > * { animation: rise 0.7s var(--ease) both; }

.rail-head { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 2px; }
.rail-top { display: flex; align-items: center; justify-content: space-between; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; font: 700 10.5px var(--font-text); letter-spacing: 0.2em; text-transform: uppercase; color: var(--live); background: color-mix(in srgb, var(--live) 10%, transparent); border: 1px solid color-mix(in srgb, var(--live) 28%, transparent); }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: live-ping 2.4s ease-out infinite; }
.rail-clock { font: 600 11px var(--font-mono); letter-spacing: 0.1em; color: var(--dim); font-variant-numeric: tabular-nums; }
.rail-title { font: 600 27px/1.08 var(--font-display); letter-spacing: -0.03em; color: var(--text); margin-top: 2px; }
.rail-title span { display: block; background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff) 45%, var(--accent) 90%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 7s linear infinite; }
.rail-lede { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* the four steps, joined by a line that fills as you go */
.rail-steps { position: relative; list-style: none; margin: 0; padding: 12px 6px 10px; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 16px; background: var(--field); border: 1px solid var(--line); }
.rail-steps::before, .rail-steps::after { content: ''; position: absolute; top: 28px; left: 12.5%; height: 2px; border-radius: 2px; }
.rail-steps::before { right: 12.5%; background: var(--line); }
.rail-steps::after { width: calc(75% * var(--p, 0)); background: linear-gradient(90deg, var(--live), var(--brand)); transition: width 0.9s var(--ease); box-shadow: 0 0 10px color-mix(in srgb, var(--live) 60%, transparent); }
.rail-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; font: 600 10.5px var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); transition: color 0.4s; }
.st-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--dim); background: #0f0f10; border: 1px solid var(--line); transition: all 0.45s var(--ease); }
.st-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-steps li.is-on { color: var(--text); }
.rail-steps li.is-on .st-dot { color: var(--brand-ink); border-color: transparent; background: linear-gradient(180deg, var(--brand-2), var(--brand)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 16%, transparent), 0 6px 20px var(--brand-glow); animation: node-pulse 2.6s ease-in-out infinite; }
.rail-steps li.is-done { color: var(--muted); }
.rail-steps li.is-done .st-dot { color: #0e0e0f; border-color: transparent; background: var(--live); box-shadow: 0 0 14px color-mix(in srgb, var(--live) 45%, transparent); }

/* cards inside the menu */
.rail-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); }
.rc-head { display: flex; align-items: center; gap: 10px; }
.rc-head h2 { font: 600 14px var(--font-text); letter-spacing: 0.01em; color: var(--text); }
.radar { width: 22px; height: 22px; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.rail select { appearance: none; -webkit-appearance: none; padding-right: 34px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); border-color: var(--line); cursor: pointer; }
.rail select:hover { border-color: var(--brand-line); }
#loc-status:empty { display: none; }

.rail-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 16px; background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.rail-stats li { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; background: none; border: 0; border-radius: 0; }
.rail-stats li + li { border-left: 1px solid var(--line); }
.rail-stats li::before { content: none; }
.rail-stats b { font: 600 19px/1.15 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
.rail-stats span { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }

.rail-list { display: flex; flex-direction: column; gap: 10px; }
.list-head { margin-top: 2px; align-items: center; }
.list-head h2 { display: flex; align-items: center; gap: 9px; font: 600 14px var(--font-text); letter-spacing: 0.01em; text-transform: none; }
.list-head .hint { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; color: var(--dim); }
.list-head .hint:empty { display: none; }
.chips { gap: 6px; }
.rail-list .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px;
  mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 22px), transparent); }
.rail-list .chips::-webkit-scrollbar { display: none; }
.rail-list .chip { flex: none; }
.chip { padding: 5px 11px; font-size: 12px; border-color: var(--line); background: rgba(0, 0, 0, 0.18); transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.chip:hover { transform: translateY(-1px); border-color: var(--brand-line); }
.chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--tier, var(--accent)) 70%, transparent); background: color-mix(in srgb, var(--tier, var(--accent)) 16%, transparent); box-shadow: none; }

.sat-list { gap: 6px; }
.sat-row {
  position: relative; overflow: hidden; grid-template-columns: auto 1fr auto; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.16);
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.sat-row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--tier); opacity: 0; transform: scaleY(0.4); transition: opacity 0.25s, transform 0.3s var(--ease); }
.sat-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--tier) 45%, transparent); background: color-mix(in srgb, var(--tier) 8%, rgba(0, 0, 0, 0.16)); box-shadow: 0 8px 24px rgba(4, 4, 4, 0.3); }
.sat-row:hover::before, .sat-row[aria-current="true"]::before { opacity: 1; transform: none; }
.sat-row[aria-current="true"] { border-color: color-mix(in srgb, var(--tier) 60%, transparent); background: color-mix(in srgb, var(--tier) 10%, rgba(0, 0, 0, 0.16)); }
.sat-row.is-new { animation: row-in 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.pip { width: 36px; height: 36px; border-radius: 11px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 26%, transparent), transparent 72%), rgba(8, 8, 8, 0.7); border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); }
.pip svg { width: 25px; animation: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tier) 55%, transparent)); transition: transform 0.4s var(--spring); }
.pip::after { animation: none; opacity: 0; }
.sat-row:hover .pip svg { transform: rotate(-10deg) scale(1.08); }
.sat-name { font-size: 13.5px; }
.sat-meta { font-size: 11.5px; color: var(--dim); }
.sat-time { font-size: 13px; }
.empty { border-style: solid; border-color: var(--line); background: rgba(0, 0, 0, 0.14); font-size: 12.5px; color: var(--muted); }

/* the contract, as a quiet line at the end of the menu */
.ca-card { flex-direction: row; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); box-shadow: none; }
.ca-label { flex: none; font-size: 10px; letter-spacing: 0.18em; gap: 6px; }
.ca-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ca-addr { flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ca-actions { flex: none; gap: 4px; }
.ca-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); color: var(--text); cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.ca-icon:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); transform: translateY(-1px); }
.ca-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ca-icon.is-copied { color: #0a0a0b; background: var(--live); border-color: transparent; animation: pop 0.4s var(--spring); }

/* ---- Mission view: the same quiet cards ----------------------------------------------------------------- */
.mission-head, .catch, .telemetry, .repass { border-color: var(--line); background: var(--field); }
.mission-head { padding: 14px 16px; }
.mission-head h2 { font-size: 21px; }
.catch::after { opacity: 0.5; }
.telemetry { padding-top: 32px; }
.back { color: var(--brand-2); }
.back:hover { color: var(--text); }
.art-preview { border-color: var(--glass-line); }
.hashbox { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); }

/* ---- Motion ------------------------------------------------------------------------------------------- */
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 65%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes slide-in { to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.8); } 100% { transform: scale(1); } }
.num-roll { display: inline-block; animation: num-roll 0.5s var(--ease); }
@keyframes num-roll { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the console arrives in layers once the page is ready */
body:not(.is-ready) .rail { opacity: 0; transform: translateX(-24px); }
.rail { transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s; }
body:not(.is-ready) .hud, body:not(.is-ready) .stage-status { opacity: 0; transform: translateY(12px); }
.hud, .stage-status { transition: opacity 0.9s var(--ease) 0.45s, transform 0.9s var(--ease) 0.45s; }

/* ---- Small screens -------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root, html[data-phase] { --rail-w: 100%; }
  .topbar { padding: 0 12px; }
  .rail { padding: 14px; }
  .rail-title { font-size: 24px; }
  .hud { width: 100%; }
  .hud-item { min-width: 0; flex: 1 1 0; padding: 7px 10px; }
  .hud-item:nth-child(n+4) { display: none; }
}
@media (max-width: 420px) {
  .rail-steps li { font-size: 9.5px; letter-spacing: 0.06em; }
  .st-dot { width: 28px; height: 28px; }
  .rail-steps::before, .rail-steps::after { top: 26px; }
  .rail-stats b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .legend li { opacity: 1; transform: none; animation: none; }
  .rail-title span { animation: none; }
  .sat-row.is-new { animation: none; }
}

/* ---- Lunar mark: a chrome monogram on black, set in a soft rounded tile with a silver edge --------- */
.brand-patch {
  border-radius: 11px; background: #060607;
  box-shadow: 0 0 0 1px rgba(200, 214, 240, 0.28), 0 0 20px rgba(206, 212, 224, 0.16);
}
.footer-brand .brand-patch { border-radius: 9px; }

/* ---- Sound button: a speaker that shows waves when the music is on, and a cross when it is off ------ */
.sound-btn svg, .intro-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn .sw, .intro-sound .sw { display: none; }
.sound-btn .sx, .intro-sound .sx { display: block; }
.sound-btn.is-on .sw, .intro-sound.is-on .sw { display: block; }
.sound-btn.is-on .sx, .intro-sound.is-on .sx { display: none; }
.sound-btn.is-on { color: var(--brand-2); }
.intro-sound {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px) + 10px); right: 16px; z-index: 5;
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; appearance: none;
  color: #cfd3da; background: rgba(8, 9, 12, 0.55); border: 1px solid rgba(214, 220, 232, 0.28); border-radius: 999px;
  transition: color 0.2s, border-color 0.2s;
}
.intro-sound:hover, .intro-sound:focus-visible { color: #fff; border-color: rgba(230, 236, 246, 0.7); outline: none; }
.intro.is-going .intro-sound { opacity: 0 !important; pointer-events: none; transition: opacity 0.3s ease; }

/* ---- Contract address beside the globe tabs --------------------------------------------------- */
.stage-top {
  position: absolute; z-index: 6; top: 16px; left: calc(var(--rail-w) + var(--gap) * 2 + 8px);
  right: 200px; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.stage-top .stage-tabs { position: relative; top: auto; left: auto; flex: none; }
.stage-ca {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; height: 42px; padding: 0 14px 0 12px;
  color: var(--text); cursor: pointer; font: inherit; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(4, 4, 4, 0.35);
  transition: border-color 0.25s, transform 0.3s var(--ease), background 0.25s;
}
.stage-ca[hidden] { display: none; }
.stage-ca:hover, .stage-ca:focus-visible { border-color: var(--brand-line); background: color-mix(in srgb, var(--glass) 70%, #fff 8%); transform: translateY(-1px); outline: none; }
.sca-k { color: var(--dim); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; }
.stage-ca code { font: 500 12.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stage-ca svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-ca:hover svg { stroke: var(--text); }
body:not(.is-ready) .stage-top { opacity: 0; }
.stage-top { transition: opacity 1s ease 0.3s; }
@media (max-width: 1180px) { .stage-top { right: auto; } .stage-ca { display: none; } }
@media (max-width: 960px) { .stage-top { left: 12px; top: 12px; } }

/* ---- Seen through the console screen ---------------------------------------------------------------
   A thin bezel, a trace of scanlines, rounded glass with a soft edge shadow and a faint reflection, so the
   launch site feels like the monitor from the intro. All of it is static and sits above the page without
   catching clicks, so it costs nothing while you use the site. */
html::before {
  content: ''; position: fixed; inset: 16px; z-index: 9998; pointer-events: none;
  border-radius: 22px;
  /* from the glass outwards: a black lip, a lit edge, the brushed grey plastic, a darker outer ring */
  box-shadow:
    0 0 0 2px #020203,
    0 0 0 3px rgba(255, 255, 255, 0.2),
    0 0 0 4px #14161a,
    0 0 0 10px #23262d,
    0 0 0 11px rgba(255, 255, 255, 0.13),
    0 0 0 16px #0d0e11,
    0 0 0 70px #040405,
    inset 0 0 0 1px rgba(214, 220, 232, 0.3),
    inset 0 0 70px 6px rgba(0, 0, 0, 0.62),
    inset 0 0 200px 10px rgba(0, 0, 0, 0.28);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.02) 22%, rgba(255, 255, 255, 0) 38%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0, rgba(0, 0, 0, 0.24) 1px, transparent 1px, transparent 3px);
}
html::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
  background: rgba(214, 220, 232, 0.92); transform-origin: 50% 50%;
}
html.intro-open::before, html.gate-open::before, html.intro-open .crt, html.gate-open .crt, html.intro-open .crt-led, html.gate-open .crt-led, html.intro-open .crt-tag, html.gate-open .crt-tag, html.intro-open .crt-screw, html.gate-open .crt-screw { display: none; }
html.crt-on::after { animation: crt-on 1.05s cubic-bezier(.3, .6, .2, 1) both; }
html.crt-on .crt-flick { animation: crt-settle 1.4s steps(1, end) both; }
@keyframes crt-on {
  0% { opacity: 1; transform: scale(0.12, 0.004); }
  34% { opacity: 1; transform: scale(1, 0.004); }
  62% { opacity: 0.9; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}
/* a few quick brightness flickers as the tube settles */
@keyframes crt-settle { 0% { opacity: 0.22; } 12% { opacity: 0; } 22% { opacity: 0.14; } 34% { opacity: 0; } 46% { opacity: 0.07; } 60%, 100% { opacity: 0; } }

/* the screen itself: the layer inside the bezel */
.crt { position: fixed; inset: 16px; z-index: 9997; pointer-events: none; border-radius: 22px; overflow: hidden; }
.crt i { position: absolute; display: block; }
/* a fine pixel grid: faint red, green and blue stripes, like the sub-pixels of a real display */
.crt::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 70, 70, 0.028) 0, rgba(255, 70, 70, 0.028) 1px, rgba(70, 255, 120, 0.024) 1px, rgba(70, 255, 120, 0.024) 2px, rgba(80, 120, 255, 0.03) 2px, rgba(80, 120, 255, 0.03) 3px);
}
/* a soft glow bleeding in from the edges of the glass */
.crt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 26px 2px rgba(214, 220, 232, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.crt-flick { inset: 0; background: #fff; opacity: 0; }
/* a slow, faint bar of light rolling down the screen (transform only, so it stays on the GPU) */
.crt-band {
  left: 0; right: 0; top: -22vh; height: 22vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(214, 220, 232, 0.045) 50%, rgba(255, 255, 255, 0));
  animation: crt-roll 9s linear infinite; will-change: transform;
}
@keyframes crt-roll { from { transform: translateY(0); } to { transform: translateY(150vh); } }
/* the power light and the name on the bezel, outside the glass */
.crt-led { position: fixed; z-index: 9997; pointer-events: none; right: 34px; bottom: 5px; width: 6px; height: 6px; border-radius: 50%; background: #7dffc1; box-shadow: 0 0 8px 1px rgba(125, 255, 193, 0.7); animation: crt-led 3.4s ease-in-out infinite; }
@keyframes crt-led { 50% { opacity: 0.55; } }
.crt-tag { position: fixed; z-index: 9997; pointer-events: none; left: 50%; bottom: 4px; transform: translateX(-50%); font: 600 7px/1 'Unbounded', system-ui, sans-serif; letter-spacing: 0.5em; color: rgba(214, 220, 232, 0.4); padding-left: 0.5em; }
@media (prefers-reduced-motion: reduce) { .crt-band, .crt-led { animation: none; } .crt-band { display: none; } html.crt-on::after, html.crt-on .crt-flick { animation: none; } }
@media (max-width: 700px) {
  html::before { inset: 5px; border-radius: 16px; box-shadow: 0 0 0 40px #040405, inset 0 0 0 1px rgba(214, 220, 232, 0.25), inset 0 0 40px 4px rgba(0, 0, 0, 0.55); }
}


/* click ripple on the globe */
.stage .ripple { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 1.5px solid var(--accent); pointer-events: none; z-index: 6; animation: ripple-out .9s cubic-bezier(.2,.7,.2,1) forwards; }
.stage .ripple::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent); animation: ripple-out .9s .12s cubic-bezier(.2,.7,.2,1) forwards; opacity: 0; }
@keyframes ripple-out { 0% { transform: scale(.4); opacity: .95; } 100% { transform: scale(9); opacity: 0; } }

/* the globe breathes: a slow halo of light behind the planet */
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 50% 52%, rgba(160,190,255,.10), rgba(160,190,255,0) 70%); animation: halo 7s ease-in-out infinite; }
@keyframes halo { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .stage::before, .stage .ripple { animation: none; } }

/* the four screws holding the monitor's frame together */
.crt-screw { position: fixed; z-index: 9997; pointer-events: none; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b7078, #1b1d22 70%); box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.crt-screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: rgba(0,0,0,.7); transform: rotate(35deg); }
.crt-screw.tl { left: 5px; top: 5px; } .crt-screw.tr { right: 5px; top: 5px; }
.crt-screw.bl { left: 5px; bottom: 5px; } .crt-screw.br { right: 5px; bottom: 5px; }
@media (max-width: 700px) { .crt-screw { display: none; } }