/* One Degree typeface: Courier New, the lettering of the original AWAITING INPUT readout and the ARCHIVE / LOG headings.
   A system font (macOS, Windows, iOS), so nothing is downloaded. */

:root {
  color-scheme: dark;
  --void: #03060b;
  --navy: #07101a;
  --hull: #10171d;
  --hull-hi: #273239;
  --metal: #455159;
  --line: rgba(180, 204, 214, .2);
  --ink: #e4e9e7;
  --muted: #869397;
  --dim: #56656b;
  --amber: #dfa858;
  --amber-hot: #ffce80;
  --cyan: #77d2dd;
  --blue: #7ba8ff;
  --green: #a8cf91;
  /* ===== One Degree typography system: one typeface (Courier New), one scale. The wordmark is SVG artwork. ===== */
  --font: 'Courier New', Courier, monospace;
  --stretch-instrument: normal;        /* Courier New has a single width; kept as a token so rules stay unchanged */
  --stretch-text: normal;
  --mono: var(--font);                 /* legacy names: both resolve to the one typeface */
  --sans: var(--font);
  --fs-title: 28px;                    /* main page titles */
  --fs-h2: 18px;                       /* section headings */
  --fs-h3: 15px;                       /* subheadings */
  --fs-body: 13px;                     /* body text, inputs, buttons */
  --fs-small: 11px;                    /* supporting text */
  --fs-micro: 10px;                    /* labels, metadata */
  --fs-nano: 9px;                      /* tiny readouts */
  --ls-body: 0;                        /* letter-spacing: running text (a monospace face is already evenly spaced) */
  --ls-label: .08em;                   /* labels, buttons */
  --ls-caps: .16em;                    /* small capitals */
  --ls-wide: .24em;                    /* widely tracked display caps */
  --lh-tight: 1.2;                     /* headings, labels */
  --lh-body: 1.5;                      /* running text */
  /* The ONE DEGREE brand label keeps its own size and tracking; same typeface (the wordmark itself is SVG). */
  --font-brand: var(--font);           /* renders Courier New, as before; no longer depends on SF Mono being absent */
  --ease: cubic-bezier(.2,.72,.18,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--void); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }

#app { position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100svh; min-height: 610px; overflow: hidden; background: radial-gradient(ellipse at 50% 32%, #111e2a 0, #080e15 45%, #03060b 86%); }
#app::before, #app::after { position: absolute; inset: 0; content: ''; pointer-events: none; }
#app::before { z-index: 0; opacity: .42; background: repeating-linear-gradient(0deg,transparent 0 5px,rgba(189,211,216,.018) 6px),radial-gradient(ellipse at 50% 45%,transparent 48%,rgba(0,0,0,.8) 100%); }
#app::after { z-index: 12; box-shadow: inset 0 0 95px rgba(0,0,0,.7),inset 0 1px rgba(219,231,227,.11),inset 0 -3px rgba(0,0,0,.85); }
#cursor-glow { position: absolute; z-index: 8; left: -500px; top: -500px; width: 310px; height: 310px; pointer-events: none; border-radius: 50%; opacity: .35; transform: translate(-50%,-50%); background: radial-gradient(circle,rgba(95,175,204,.11),rgba(42,99,136,.025) 43%,transparent 72%); }
.site { position: absolute; inset: 0; z-index: 1; }
.cockpit-shell { position: absolute; inset: 0; display: grid; grid-template-rows: 48px minmax(250px,1fr) auto; padding: 0 clamp(10px,2vw,28px); isolation: isolate; }
.cockpit-shell::before { position: absolute; inset: 0; z-index: -1; content: ''; pointer-events: none; background: linear-gradient(180deg,rgba(37,48,53,.32),transparent 14%,transparent 71%,rgba(30,37,40,.2)),linear-gradient(90deg,rgba(64,76,80,.08),transparent 8% 92%,rgba(64,76,80,.08)); }

/* Cabin identification is set into the overhead rail, not a site header. */
.flight-header { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 clamp(9px,1.8vw,27px); border: 1px solid rgba(117,132,136,.26); border-top: 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg,#222c31,#10171c 42%,#080d12); box-shadow: inset 0 1px rgba(255,255,255,.13),inset 0 -4px 8px rgba(0,0,0,.75),0 5px 14px rgba(0,0,0,.46); }
.flight-header::before { position: absolute; inset: 0 8px auto; height: 1px; content: ''; background: linear-gradient(90deg,transparent,rgba(198,215,215,.25),transparent); }
.ship-readout, .pilot-id { display: flex; align-items: center; gap: 9px; }
.ship-readout strong, .pilot-id strong { display: block; color: #dbe2df; font: 500 var(--fs-micro) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ship-readout small, .pilot-id small { display: block; margin-top: 3px; color: var(--muted); font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.status-lamp, .console-status-led { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(168,207,145,.62); }
.header-coordinate { position: absolute; left: 50%; display: flex; gap: 14px; transform: translateX(-50%); color: #6e7d82; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.header-coordinate b { color: #a2b2b2; font-weight: 400; }
.pilot-id { padding: 5px 9px 5px 6px; border-left: 1px solid rgba(173,192,200,.2); background: linear-gradient(90deg,transparent,rgba(30,42,47,.7)); }
.pilot-avatar { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(228,166,78,.5); border-radius: 50%; color: var(--amber-hot); font: var(--fs-nano) var(--mono); box-shadow: 0 0 9px rgba(228,166,78,.06); }
.pilot-id i { width: 5px; height: 5px; margin-left: 5px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg) translateY(-2px); }

/* The outer windshield spans the cabin. Hull ribs create the framing; the glass stays continuous. */
.forward-cabin { position: relative; display: grid; grid-template-rows: 28px minmax(0,1fr) 16px; min-width: 0; min-height: 0; padding: 0 clamp(2px,1.1vw,16px); }
.canopy-arch { position: relative; display: flex; align-items: center; justify-content: center; color: #667479; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.canopy-arch::before, .canopy-arch::after { position: absolute; top: 13px; width: 25%; height: 1px; content: ''; background: linear-gradient(90deg,transparent,rgba(160,178,182,.25)); }
.canopy-arch::before { left: 2%; }.canopy-arch::after { right: 2%; transform: rotate(180deg); }
.canopy-arch i { position: absolute; top: 12px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(168,207,145,.65); }
.canopy-arch b { position: absolute; top: 0; left: 50%; width: 1px; height: 13px; background: linear-gradient(rgba(166,181,183,.2),transparent); }
.windshield-assembly { position: relative; min-width: 0; min-height: 0; perspective: 1250px; transform-style: preserve-3d; }
.windshield-assembly::before { position: absolute; inset: -3px -7px -2px; z-index: 4; content: ''; pointer-events: none; clip-path: polygon(1.8% 0,98.2% 0,100% 12%,99.4% 84%,96.2% 100%,3.8% 100%,.6% 84%,0 12%); border: 1px solid rgba(0,0,0,0); background: linear-gradient(180deg,#38444a 0,#1a2429 8%,#0a1117 18%,#273137 51%,#0a1015 78%,#303b40 100%); box-shadow: 0 22px 38px rgba(0,0,0,.42),inset 0 1px rgba(240,248,243,.2); }
.windshield-assembly::after { position: absolute; inset: 7px 8px 6px; z-index: 5; content: ''; pointer-events: none; clip-path: polygon(2% 0,98% 0,100% 11%,99.4% 84%,96.2% 100%,3.8% 100%,.6% 84%,0 11%); border: 1px solid rgba(186,207,208,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7); }
.viewport-frame { position: absolute; inset: 11px 14px 10px; z-index: 1; overflow: hidden; clip-path: polygon(2% 0,98% 0,100% 11%,99.2% 84%,96% 100%,4% 100%,.8% 84%,0 11%); border: 1px solid rgba(0,0,0,.82); background: #050b12; box-shadow: inset 0 0 0 1px rgba(162,201,213,.17),inset 0 0 85px rgba(8,22,35,.7); transform: translateZ(-8px); }
.viewport-frame::before, .viewport-frame::after { position: absolute; inset: 0; z-index: 1; content: ''; pointer-events: none; }
.viewport-frame::before { opacity: .36; background: linear-gradient(118deg,rgba(206,235,236,.12),transparent 19%,transparent 64%,rgba(81,149,168,.075)),linear-gradient(180deg,rgba(1,4,7,.13),transparent 26% 75%,rgba(1,3,6,.42)); }
.viewport-frame::after { box-shadow: inset 0 0 55px rgba(0,0,0,.56),inset 0 0 0 1px rgba(0,0,0,.8); }
#starfield { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.nebula-layer { position: absolute; inset: -10%; z-index: 0; opacity: .7; pointer-events: none; background: radial-gradient(ellipse at 65% 31%,rgba(48,83,107,.2),transparent 29%),radial-gradient(ellipse at 34% 67%,rgba(57,52,82,.16),transparent 32%),radial-gradient(ellipse at 79% 80%,rgba(100,69,42,.09),transparent 23%); animation: nebula-drift 34s ease-in-out infinite alternate; }
.distant-planet { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; transform: translateZ(-90px); }
.planet-one { top: 14%; right: 23%; width: clamp(90px,13vw,210px); aspect-ratio: 1; opacity: .55; background: radial-gradient(circle at 33% 30%,#52616b 0,#22303b 21%,#111b27 49%,#080e16 72%); box-shadow: inset -24px -10px 35px rgba(0,0,0,.82),inset 9px 3px 14px rgba(144,177,186,.15),0 0 26px rgba(86,135,158,.13); }
.planet-one::before { position: absolute; inset: 12% 4%; content: ''; border-top: 1px solid rgba(126,165,177,.18); border-radius: 50%; transform: rotate(-17deg); }
.planet-one i { position: absolute; left: 4%; top: 27%; width: 24%; height: 9%; border-radius: 50%; background: rgba(104,134,146,.1); filter: blur(2px); }
.planet-two { left: 11%; bottom: 16%; width: clamp(23px,4vw,60px); aspect-ratio: 1; opacity: .44; background: radial-gradient(circle at 32% 29%,#736456,#34373b 44%,#111821 75%); box-shadow: inset -8px -5px 12px #020407,0 0 12px rgba(217,171,113,.06); transform: translateZ(-140px); }
.distant-object { position: absolute; left: -70px; top: 36%; z-index: 2; width: 48px; height: 14px; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 5px rgba(112,201,217,.28)); }
.distant-object::before { position: absolute; left: 10px; top: 3px; width: 29px; height: 8px; content: ''; border: 1px solid rgba(138,193,202,.44); border-radius: 50% 50% 42% 42%; background: linear-gradient(180deg,rgba(131,169,174,.6),rgba(28,48,56,.7)); box-shadow: inset 0 1px rgba(229,244,238,.35),0 1px 4px rgba(0,0,0,.8); }
.distant-object::after { position: absolute; left: 19px; top: 0; width: 12px; height: 5px; content: ''; border: 1px solid rgba(143,190,195,.25); border-radius: 50% 50% 0 0; background: rgba(101,141,148,.35); }
.distant-object i, .distant-object b { position: absolute; top: 7px; z-index: 1; width: 2px; height: 2px; border-radius: 50%; background: #dab675; box-shadow: 0 0 5px currentColor; }
.distant-object i { left: 15px; }.distant-object b { right: 14px; background: #79d5df; }
.distant-object.passing { animation: unidentified-cross 7.6s linear both; }
.window-reflection { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .48; background: linear-gradient(111deg,transparent 0 19%,rgba(196,222,223,.055) 19.15%,transparent 19.6% 72%,rgba(160,206,217,.035) 72.2%,transparent 72.6%),linear-gradient(160deg,rgba(255,255,255,.035),transparent 16% 76%,rgba(255,255,255,.025)); }
.scan-flash { position: absolute; inset: -15% 0; z-index: 7; opacity: 0; pointer-events: none; background: linear-gradient(180deg,transparent 42%,rgba(111,210,223,.28) 49.8%,rgba(111,210,223,.08) 50.2%,transparent 58%); transform: translateY(-65%); }
.viewport-frame.scanning .scan-flash { animation: scan-pass 1.15s var(--ease) both; }
.viewport-frame.scanning { box-shadow: inset 0 0 0 1px rgba(143,225,232,.45),inset 0 0 85px rgba(50,170,192,.18); }
.windshield-topline, .windshield-bottomline { position: absolute; z-index: 8; left: 3.4%; right: 3.4%; display: flex; justify-content: space-between; align-items: center; color: #82949a; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); pointer-events: none; font-stretch: var(--stretch-instrument); }
.windshield-topline { top: 12px; }.windshield-bottomline { bottom: 11px; color: #65757a; font-size: var(--fs-nano); }
.windshield-topline span:first-child { color: #b1c2c3; }
.windshield-topline span i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.windshield-bottomline span:first-child { max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-frame-top, .window-frame-bottom { position: absolute; z-index: 6; left: 4%; right: 4%; height: 9px; pointer-events: none; background: linear-gradient(180deg,#404c51,#202a2f 45%,#0c1217); box-shadow: 0 3px 7px rgba(0,0,0,.68),inset 0 1px rgba(244,249,245,.2); }
.window-frame-top { top: 4px; }.window-frame-bottom { bottom: 3px; height: 12px; background: linear-gradient(0deg,#38444a,#171f24 55%,#0a1014); }
.hull-rib { position: absolute; top: 0; bottom: 0; z-index: 7; width: clamp(12px,2.2vw,30px); pointer-events: none; background: linear-gradient(90deg,#0a0e12,#374349 30%,#1c252b 55%,#090e12); box-shadow: inset 1px 0 rgba(221,231,228,.12),inset -1px 0 rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.6); }
.rib-left { left: 1.2%; clip-path: polygon(35% 0,100% 5%,100% 95%,20% 100%,0 80%,0 18%); }
.rib-right { right: 1.2%; clip-path: polygon(0 5%,65% 0,100% 18%,100% 80%,80% 100%,0 95%); }
.frame-fastener { position: absolute; z-index: 8; width: 6px; height: 6px; border: 1px solid #68777b; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#9ba3a1,#273136 65%); box-shadow: 0 1px 3px #000; }
.fastener-a { left: 2%; top: 8%; }.fastener-b { right: 2%; top: 8%; }.fastener-c { left: 4%; bottom: 8%; }.fastener-d { right: 4%; bottom: 8%; }
.canopy-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(16px,3vw,48px); color: #5d6a6e; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.canopy-footer b { color: var(--green); font-weight: 400; }

/* Readouts sit on the edges of the glass, with no card boundaries. */
.flight-instrument { position: absolute; z-index: 10; top: 17%; width: clamp(135px,17vw,245px); color: #d2dcda; pointer-events: auto; text-shadow: 0 1px 8px #02070c; }
.local-instrument { left: 5%; }
.anomaly-instrument { right: 5%; text-align: right; }
.instrument-caption { display: flex; align-items: center; gap: 8px; color: #8fa4a8; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.instrument-caption i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.anomaly-instrument .instrument-caption { justify-content: flex-end; }
.instrument-caption .amber-indicator { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.flight-instrument h2 { margin: 8px 0 10px; color: #c1cecd; font: 500 var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.sensor-grid { position: relative; width: 82px; height: 46px; margin-bottom: 8px; opacity: .42; background: linear-gradient(90deg,transparent 49.6%,rgba(112,202,211,.28) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(112,202,211,.22) 50%,transparent 50.5%),repeating-radial-gradient(ellipse at 50% 100%,transparent 0 10px,rgba(112,202,211,.2) 10.5px 11px,transparent 11.5px 18px); mask-image: linear-gradient(90deg,transparent,#000 16% 84%,transparent); }
.sensor-grid::after { position: absolute; left: 65%; top: 24%; width: 3px; height: 3px; content: ''; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px 2px rgba(119,210,221,.35); }
.sensor-grid i { position: absolute; left: 20%; bottom: 2px; width: 1px; height: 39px; background: linear-gradient(transparent,rgba(107,203,211,.18),transparent); transform: rotate(34deg); }
.signal-list { display: grid; gap: 3px; max-width: 100%; }
.signal-empty { display: flex; flex-direction: column; gap: 5px; margin: 0; color: #a3b0b1; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.signal-empty small { color: #68777a; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.signal-row { display: grid; grid-template-columns: 5px minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; padding: 5px 0; border: 0; border-bottom: 1px solid rgba(174,208,211,.13); text-align: left; color: inherit; background: linear-gradient(90deg,rgba(5,13,19,.48),transparent); transition: color .18s ease,transform .18s ease; }
.signal-row:hover, .signal-row:focus-visible { color: #fff; transform: translateX(3px); }
.signal-point { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px currentColor; }
.signal-point.amber { background: var(--amber); }.signal-point.blue { background: var(--blue); }.signal-point.green { background: var(--green); }
.signal-row b, .signal-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.signal-row b { color: #b5c6c5; font-size: var(--fs-nano); font-weight: 400; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.signal-row small { margin-top: 3px; color: #67777a; font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.signal-row em { color: #82999c; font: normal var(--fs-nano) var(--mono); }
.instrument-state { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #68787b; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.instrument-state b { width: 4px; height: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(168,207,145,.65); }
.amber-state { justify-content: flex-end; }.amber-state b { background: var(--amber); box-shadow: 0 0 5px rgba(223,168,88,.65); }
.anomaly-scope { position: relative; width: 70px; height: 70px; margin: 9px 0 8px auto; border-radius: 50%; opacity: .57; background: repeating-conic-gradient(from 4deg,rgba(223,168,88,.16) 0deg .5deg,transparent .5deg 30deg); mask-image: radial-gradient(circle,#000 0 50%,transparent 70%); }
.anomaly-scope::before, .anomaly-scope::after { position: absolute; inset: 50% 0 auto; height: 1px; content: ''; background: rgba(223,168,88,.19); }
.anomaly-scope::after { inset: 0 auto 0 50%; width: 1px; height: auto; }
.scope-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(223,168,88,.35); border-radius: 50%; transform: translate(-50%,-50%); }
.ring-one { width: 72%; height: 72%; }.ring-two { width: 34%; height: 34%; }
.scope-object { position: absolute; left: 68%; top: 28%; width: 4px; height: 4px; border-radius: 50%; background: var(--amber-hot); box-shadow: 0 0 8px var(--amber); }
.anomaly-scope span { position: absolute; top: 50%; left: 50%; color: rgba(223,168,88,.65); font: var(--fs-nano) var(--mono); transform: translate(-50%,-50%); }
.anomaly-readout { padding: 0; }
.anomaly-tag { display: block; color: #b99565; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.anomaly-tag b { font: inherit; font-weight: 400; }
.anomaly-tag i { display: inline-block; width: 4px; height: 4px; margin-left: 4px; border-radius: 50%; background: var(--amber); vertical-align: 1px; }
.anomaly-readout p { margin: 6px 0 0; color: #79868a; font-size: var(--fs-nano); }
.skyy-berth { position: absolute; right: 3.5%; bottom: 7%; z-index: 10; display: flex; align-items: flex-end; width: clamp(118px,13vw,190px); height: clamp(98px,13vh,142px); overflow: hidden; pointer-events: none; background: linear-gradient(180deg,transparent 0 54%,rgba(13,17,19,.22) 55%,rgba(17,21,22,.76) 100%); border-bottom: 2px solid #41494a; box-shadow: inset 0 -15px 17px rgba(0,0,0,.36); clip-path: polygon(12% 0,88% 0,100% 15%,97% 100%,3% 100%,0 15%); }
.skyy-berth::before { position: absolute; inset: 8px 6px 4px; content: ''; border-top: 1px solid rgba(210,170,112,.35); background: repeating-linear-gradient(0deg,transparent 0 8px,rgba(198,160,108,.07) 9px 10px); mask-image: linear-gradient(transparent,#000 52%); }
.berth-light { position: absolute; inset: 0 18% auto; height: 1px; background: rgba(223,168,88,.56); box-shadow: 0 0 12px 3px rgba(223,168,88,.21); }
.skyy-copy { position: absolute; z-index: 2; top: 13px; left: 13px; }
.skyy-status { display: block; color: #a1bc9a; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.skyy-status i { display: inline-block; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }
.skyy-copy strong { display: block; margin-top: 5px; color: #f0d9b2; font: 600 var(--fs-small) var(--sans); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.skyy-copy small { display: block; margin-top: 3px; color: #998e7e; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.skyy-portrait { position: relative; z-index: 1; display: block; width: 74%; max-height: 86%; margin: auto auto -8px; filter: drop-shadow(0 4px 7px rgba(0,0,0,.8)); }
.berth-label { position: absolute; right: 8px; bottom: 6px; z-index: 2; color: #8e8170; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }

/* Knowledge map: signals and trails occupy the glass itself. */
.view { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.view.active { opacity: 1; pointer-events: auto; }
.home { position: absolute; left: 50%; top: 48%; z-index: 5; display: flex; width: min(340px,43%); flex-direction: column; align-items: center; text-align: center; transform: translate(-50%,-50%); transition: opacity .45s ease,transform .45s ease; }
.home.fade { opacity: 0; transform: translate(-50%,calc(-50% - 8px)); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: #8ca5aa; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.home .eyebrow { justify-content: center; }
.eyebrow-led { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px rgba(104,200,211,.7); }
.amber-led { background: var(--amber); box-shadow: 0 0 7px rgba(228,166,78,.6); }
.home h1, .trace-ui h2 { margin: 0; color: #cbd5d3; font-weight: 500; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.home h1 { font: 500 var(--fs-h3) var(--mono); }
.home-hint { margin: 7px 0 0; color: #78888b; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.home .status { margin-top: 9px; color: var(--amber-hot); }
.view > #explore-status { position: absolute; left: 50%; top: calc(48% + 69px); z-index: 8; width: min(460px,58%); text-align: center; transform: translateX(-50%); }
.viewport-reticle { position: relative; width: 86px; height: 86px; margin: 0 0 13px; border: 1px solid rgba(119,210,221,.28); border-radius: 50%; box-shadow: 0 0 28px rgba(61,163,183,.07),inset 0 0 18px rgba(61,163,183,.06); animation: reticle-breathe 8s ease-in-out infinite; }
.viewport-reticle::before, .viewport-reticle::after { position: absolute; inset: 8px; border: 1px solid rgba(119,210,221,.16); border-radius: 50%; content: ''; }
.viewport-reticle::after { inset: 19px; border-color: rgba(119,210,221,.14); }
.viewport-reticle i { position: absolute; left: 50%; top: -10%; width: 1px; height: 120%; background: linear-gradient(transparent,rgba(119,210,221,.38) 28% 72%,transparent); }
.viewport-reticle b { position: absolute; left: -10%; top: 50%; width: 120%; height: 1px; background: linear-gradient(90deg,transparent,rgba(119,210,221,.38) 28% 72%,transparent); }
.viewport-reticle span { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border: 1px solid var(--amber); border-radius: 50%; box-shadow: 0 0 8px rgba(228,166,78,.45); transform: translate(-50%,-50%); }
.status { min-height: 12px; margin: 7px 0 0; color: var(--amber-hot); font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.universe { position: absolute; inset: 0; z-index: 3; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .5s ease; perspective: 1000px; }
.universe.live { opacity: 1; pointer-events: auto; }
.universe.dissolving { opacity: 0; }
.camera { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 1.2s var(--ease); }
.cluster { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .08; transform: translateZ(-170px) scale(.83); transform-style: preserve-3d; transition: opacity .8s ease,transform 1.35s var(--ease); pointer-events: none; }
.cluster.current { z-index: 2; opacity: 1; transform: translateZ(0) scale(1); pointer-events: auto; }
.cluster.receding { transform: translate3d(var(--drift-x,0),var(--drift-y,0),-175px) scale(.76); }
.cluster-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.signal-link { fill: none; stroke: rgba(112,205,219,.63); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(86,207,225,.55)); transition: stroke-dashoffset 1.1s var(--ease),opacity .35s ease; opacity: .82; }
.signal-link::after { content: ''; }
.signal-link.visible { stroke-dashoffset: 0; }
.signal-link.back-link { stroke: rgba(105,147,210,.24); stroke-width: .65; opacity: .48; }
.signal-link.back-link.visible { transition-duration: .85s; }
.link-node { fill: #9ee7ef; opacity: 0; filter: drop-shadow(0 0 4px rgba(106,220,234,.9)); transition: opacity .3s ease; }
.link-node.visible { opacity: .8; }
.topic, .main-topic, .trace-topic, .trace-endpoint-anchor { position: absolute; display: block; border: 0; padding: 0; color: inherit; text-align: left; background: transparent; transform-style: preserve-3d; }
.main-topic { left: 50%; top: 48%; z-index: 4; width: 128px; height: 128px; transform: translate(-50%,-50%); text-align: center; }
.topic { z-index: 3; width: 65px; height: 65px; transform: translate(-50%,-50%) translateZ(var(--depth,0px)) scale(var(--scale,1)); transition: opacity .55s ease,filter .3s ease,transform .65s var(--ease); }
.main-topic, .topic, .trace-topic, .trace-endpoint-anchor { cursor: pointer; }
.main-hit, .topic-hit { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; }
.main-hit:active, .topic-hit:active { filter: brightness(1.22); }
.topic.arrived { animation: signal-arrival .65s var(--ease) both; animation-delay: var(--arrival-delay,0ms); }
.topic:hover, .topic:focus-visible, .topic.selected { filter: brightness(1.38); z-index: 7; }
.topic-orb, .main-orb { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; border-radius: 50%; transform: translate(-50%,-50%); }
.topic-orb { width: 18px; height: 18px; border: 1px solid rgba(132,224,232,.85); background: radial-gradient(circle at 32% 28%,#f5ffff 0 4%,#7cd8e0 14%,#2a6471 38%,rgba(10,32,43,.86) 72%); box-shadow: 0 0 7px rgba(90,217,231,.54),0 0 22px rgba(64,168,198,.26),inset -4px -3px 7px rgba(0,0,0,.8); }
.topic-orb::before, .topic-orb::after, .main-orb::before, .main-orb::after { position: absolute; inset: -8px; content: ''; border: 1px solid rgba(132,224,232,.28); border-radius: 50%; transform: rotateX(68deg) rotateZ(-25deg); }
.topic-orb::after { inset: -13px; border-color: rgba(132,224,232,.12); transform: rotateX(68deg) rotateZ(28deg); }
.topic-label, .main-label { position: absolute; top: calc(50% + 17px); left: 50%; display: block; max-width: 190px; padding: 4px 7px; overflow: hidden; border-bottom: 1px solid rgba(146,208,216,.26); color: #c5d9d9; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 7px #02070b; white-space: nowrap; transform: translateX(-50%); background: linear-gradient(180deg,rgba(5,12,18,.14),rgba(4,10,15,.53)); font-stretch: var(--stretch-instrument); }
.topic-info { position: absolute; left: 50%; top: calc(50% + 34px); z-index: 9; width: min(210px,45vw); padding: 8px 10px; border-left: 1px solid rgba(119,210,221,.5); color: #afc1c0; text-align: left; background: linear-gradient(90deg,rgba(4,13,20,.92),rgba(4,13,20,.65),transparent); opacity: 0; visibility: hidden; transform: translate(-50%,4px); transition: opacity .2s ease,transform .2s ease,visibility 0s linear .2s; pointer-events: auto; }
.topic-summary { display: block; max-height: 56px; overflow: hidden; margin-bottom: 7px; color: #b0c1c0; font-size: var(--fs-nano); line-height: var(--lh-body); }
.go-deeper { color: var(--amber-hot); font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); text-decoration: none; font-stretch: var(--stretch-instrument); }
.topic:hover .topic-info, .main-topic:hover .topic-info, .trace-topic:hover .topic-info, .topic.open .topic-info, .main-topic.open .topic-info, .trace-topic.open .topic-info, .topic:focus-within .topic-info, .main-topic:focus-within .topic-info, .trace-topic:focus-within .topic-info { opacity: 1; visibility: visible; transform: translate(-50%,0); transition-delay: 0s; }
.topic:hover .topic-label, .topic.open .topic-label, .topic:focus-within .topic-label { color: #fff; border-color: rgba(255,210,138,.55); }
.main-orb { width: 63px; height: 63px; border: 1px solid rgba(255,205,125,.9); background: radial-gradient(circle at 31% 25%,#fff5d7 0 3%,#f7c86e 10%,#b06c35 29%,#392f2b 60%,#101c24 83%); box-shadow: 0 0 12px rgba(237,177,87,.72),0 0 34px rgba(228,166,78,.36),inset -13px -11px 19px rgba(0,0,0,.78),inset 7px 6px 10px rgba(255,230,168,.28); }
.main-orb::before { inset: -16px; border-color: rgba(249,202,123,.49); transform: rotateX(68deg) rotateZ(-28deg); box-shadow: 0 0 12px rgba(244,183,98,.16); }
.main-orb::after { inset: -28px; border-color: rgba(125,213,221,.21); transform: rotateX(72deg) rotateZ(36deg); }
.main-orb b { position: absolute; inset: -40px; border: 1px dashed rgba(206,224,218,.17); border-radius: 50%; transform: rotateX(72deg) rotateZ(-8deg); animation: orbit-turn 36s linear infinite; }
.main-label { top: calc(50% + 46px); max-width: 245px; color: #fff0ce; border-bottom-color: rgba(244,188,107,.47); font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.main-topic .topic-info { top: calc(50% + 65px); width: min(260px,55vw); }
.main-topic.open { z-index: 9; }
.main-topic.open .main-orb { filter: brightness(1.18); }
.cluster.receding .topic-info, .cluster.receding .main-topic .topic-info { display: none; }
.topic-star, .main-star { display: none; }
.loading-label { animation: text-pulse 1s ease-in-out infinite alternate; }
.back-button { border: 0; color: #97b7bb; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); opacity: 0; pointer-events: none; font-stretch: var(--stretch-instrument); }
.back-button.show { opacity: 1; pointer-events: auto; }
.console-key.back-button { position: relative; inset: auto; }
.status:empty { display: none; }

/* Trace mode remains in the forward field, then draws a luminous spatial route. */
.trace-ui { position: absolute; left: 50%; top: 12%; z-index: 20; width: min(500px,56%); text-align: center; transform: translateX(-50%); transition: opacity .35s ease,transform .35s ease; }
.trace-ui.fade { opacity: 0; transform: translate(-50%,-8px); pointer-events: none; }
.trace-ui h2 { color: #e7e9df; font: 500 var(--fs-h2) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.trace-fields { display: flex; align-items: end; justify-content: center; gap: 14px; margin-top: 15px; }
.trace-fields label { display: block; min-width: 0; text-align: left; }
.trace-fields label span { display: block; margin-bottom: 3px; color: #829699; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.trace-fields input { width: clamp(100px,14vw,180px); height: 30px; border: 0; border-bottom: 1px solid rgba(119,210,221,.44); color: #f2f5ed; background: rgba(3,9,15,.38); font: var(--fs-nano) var(--mono); }
.trace-fields input::placeholder, .search-entry input::placeholder { color: #708084; }
.trace-fields > b { padding-bottom: 9px; color: var(--amber); font: var(--fs-nano) var(--mono); }
.trace-button { margin-top: 13px; padding: 8px 13px; border: 1px solid rgba(228,166,78,.4); color: var(--amber-hot); background: linear-gradient(180deg,rgba(88,58,25,.46),rgba(26,22,17,.67)); font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); box-shadow: inset 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.4); transition: filter .15s ease,transform .15s ease; font-stretch: var(--stretch-instrument); }
.trace-button:hover { filter: brightness(1.3); }.trace-button:active { transform: translateY(2px); }
.trace-world { position: absolute; inset: 0; z-index: 12; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.trace-world.live { opacity: 1; pointer-events: auto; }
#trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#trace-svg path { fill: none; stroke: rgba(126,221,235,.82); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(99,221,236,.72)); transition: stroke-dashoffset 1.2s var(--ease); }
#trace-svg path.visible { stroke-dashoffset: 0; }
.trace-minor { fill: #b9f0f3; filter: drop-shadow(0 0 6px rgba(119,210,221,.8)); opacity: 0; transition: opacity .3s ease; }
.trace-minor.visible { opacity: .9; }
.trace-topic, .trace-endpoint-anchor { z-index: 5; opacity: 0; transform: translate(-50%,-50%) scale(.75); transition: opacity .45s ease,transform .55s var(--ease),left 1.2s var(--ease),top 1.2s var(--ease); pointer-events: auto; }
.trace-topic.show, .trace-endpoint-anchor.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.trace-endpoint-anchor { width: 65px; height: 65px; }
.trace-endpoint-anchor .main-orb { width: 36px; height: 36px; }
.trace-endpoint-anchor .main-label { top: calc(50% + 25px); max-width: 130px; font-size: var(--fs-nano); }
.trace-endpoint-anchor .topic-info { top: calc(50% + 35px); }
.trace-topic { width: 62px; height: 62px; }
.trace-topic .topic-orb { width: 13px; height: 13px; }
.trace-topic .topic-label { top: calc(50% + 15px); max-width: 145px; font-size: var(--fs-nano); }
.trace-world .topic-summary { font-size: var(--fs-nano); }
.trace-world .trace-endpoint-anchor .main-star, .trace-world .trace-topic .topic-star { display: none; }
.trace-back { position: absolute; left: 4%; top: 8%; z-index: 25; }

/* Tactile console: the controls are set into machined sections in the hull. */
.control-console { position: relative; z-index: 9; min-width: 0; padding: 0 clamp(8px,1.25vw,18px) 7px; border: 1px solid #536066; border-bottom-color: #101619; border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#49555a 0,#293338 4%,#121a1f 9%,#242d32 14%,#141a1f 26%,#0c1115 93%,#283238); box-shadow: inset 0 2px rgba(239,248,242,.2),inset 0 -6px 11px rgba(0,0,0,.77),0 -8px 31px rgba(0,0,0,.36),0 18px 32px rgba(0,0,0,.74); transform: perspective(1300px) rotateX(1.1deg); transform-origin: center bottom; }
.control-console::before { position: absolute; top: 0; left: 12%; right: 12%; height: 1px; content: ''; background: linear-gradient(90deg,transparent,rgba(206,225,223,.33),transparent); }
.console-lip, .console-lower-edge { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 20px; color: #829096; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.console-lip { border-bottom: 1px solid rgba(0,0,0,.7); }
.console-lip .console-status-led { width: 5px; height: 5px; margin-right: 5px; }
.console-body { display: grid; grid-template-columns: minmax(190px,1.1fr) minmax(235px,1.3fr) minmax(190px,1.12fr) minmax(145px,.85fr) minmax(84px,.52fr); gap: clamp(5px,.7vw,11px); min-height: clamp(144px,19vh,190px); padding: 8px 0; }
.console-bank { position: relative; min-width: 0; min-height: 0; padding: 8px 8px 7px; overflow: hidden; border: 1px solid rgba(111,126,130,.42); background: linear-gradient(145deg,rgba(42,52,57,.88),rgba(17,23,27,.95) 32%,rgba(9,13,16,.95)); box-shadow: inset 1px 1px rgba(247,250,246,.09),inset -1px -1px rgba(0,0,0,.88),0 2px 5px rgba(0,0,0,.65); }
.console-bank::before { position: absolute; inset: 3px; border: 1px solid rgba(218,229,224,.045); content: ''; pointer-events: none; }
.bank-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(178,197,196,.12); color: #95a3a4; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); white-space: nowrap; font-stretch: var(--stretch-instrument); }
.bank-heading span { color: var(--amber); }.bank-heading b { overflow: hidden; font-weight: 400; text-overflow: ellipsis; }.bank-heading i { width: 4px; height: 4px; margin-left: auto; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(168,207,145,.55); }
.acquisition-row { display: flex; align-items: center; gap: 7px; height: calc(100% - 19px); }
.search-form { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; justify-content: center; }
.search-label { display: block; margin-bottom: 5px; color: #869a9e; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.search-entry { display: flex; align-items: center; height: 34px; min-width: 0; padding: 0 7px; border: 1px solid rgba(104,200,211,.3); background: linear-gradient(180deg,rgba(14,34,42,.84),rgba(5,12,17,.95)); box-shadow: inset 0 2px 6px rgba(0,0,0,.75),inset 0 1px rgba(206,238,238,.08); }
.search-entry:focus-within { border-color: var(--cyan); box-shadow: inset 0 2px 6px rgba(0,0,0,.75),0 0 10px rgba(71,178,193,.18); }
.search-entry > span:first-child { margin-right: 6px; color: var(--cyan); font: var(--fs-small) var(--mono); }
.search-entry input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; color: #e8eeea; background: transparent; font: var(--fs-nano) var(--mono); }
.entry-frequency { color: #64757a; font: var(--fs-nano) var(--mono); }
.channel-note { margin-top: 5px; color: #657378; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.engage-lever { position: relative; display: flex; width: 48px; height: 83px; flex: 0 0 48px; flex-direction: column; align-items: center; justify-content: flex-end; margin-top: 11px; padding: 0 0 4px; border: 1px solid #525d61; border-radius: 2px; color: #c3b38f; background: linear-gradient(90deg,#0c1013,#303a3e 18%,#161d21 45%,#080c0f); box-shadow: inset 1px 0 rgba(250,255,249,.1),inset -2px 0 rgba(0,0,0,.7),0 4px 7px #020405; transform: perspective(260px) rotateY(-6deg); transition: filter .15s ease,transform .18s ease; }
.engage-lever::before { position: absolute; inset: 2px 5px 19px; content: ''; border: 1px solid rgba(206,220,211,.13); background: repeating-linear-gradient(180deg,transparent 0 8px,rgba(0,0,0,.15) 9px 10px); }
.engage-lever:hover { filter: brightness(1.16); }
.engage-lever:active { transform: perspective(260px) rotateY(-6deg) translateY(2px); }
.lever-light { position: absolute; top: 5px; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #4a6251; box-shadow: inset 0 0 2px #030605; }
.engage-lever:hover .lever-light, .engage-lever:active .lever-light { background: var(--amber-hot); box-shadow: 0 0 8px var(--amber); }
.lever-base { position: absolute; top: 28px; left: 50%; z-index: 2; width: 22px; height: 28px; border: 1px solid #667174; border-radius: 8px 8px 3px 3px; background: linear-gradient(90deg,#11171a,#707a7a 30%,#292f31 64%,#080b0d); transform: translateX(-50%); }
.lever-grip { position: absolute; top: 21px; left: 50%; z-index: 3; width: 13px; height: 27px; border: 1px solid #aaa18c; border-radius: 5px 5px 3px 3px; background: linear-gradient(90deg,#3e4543,#b9a980 28%,#655f4e 72%,#242a2a); box-shadow: inset 0 1px rgba(255,255,255,.26),0 2px 4px #000; transform: translateX(-50%) rotate(-7deg); transform-origin: 50% 84%; transition: transform .2s var(--ease); }
.engage-lever:hover .lever-grip { transform: translateX(-50%) rotate(13deg) translateY(1px); }
.engage-lever:active .lever-grip { transform: translateX(-50%) rotate(37deg) translateY(3px); }
.engage-lever.engaged .lever-grip { transform: translateX(-50%) rotate(38deg) translateY(3px); }
.engage-lever.engaged .lever-light { background: var(--amber-hot); box-shadow: 0 0 8px var(--amber); }
.engage-lever b { position: relative; z-index: 4; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.navigation-bank { display: flex; flex-direction: column; }
.control-key-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 9px; }
.console-key { position: relative; display: flex; min-width: 0; height: clamp(42px,5.5vh,58px); flex-direction: column; justify-content: center; padding: 5px 4px 4px 9px; overflow: hidden; border: 1px solid #515d62; border-radius: 2px; text-align: left; background: linear-gradient(160deg,#4a565a 0%,#303a3e 14%,#20292d 50%,#12191c); box-shadow: inset 0 1px rgba(255,255,255,.16),inset 0 -2px rgba(0,0,0,.72),0 4px 5px #050708; transition: transform .12s ease,filter .15s ease,box-shadow .15s ease; }
.console-key::before { position: absolute; inset: 3px; border: 1px solid rgba(217,229,224,.06); content: ''; pointer-events: none; }
.console-key:hover { filter: brightness(1.2); }.console-key:active { transform: translateY(2px); box-shadow: inset 0 3px 5px rgba(0,0,0,.6),0 1px 2px #050708; }
.console-key b { overflow: hidden; color: #d1d9d5; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-body); text-overflow: ellipsis; white-space: nowrap; }
.console-key small { margin-top: 5px; color: #77868a; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.key-lamp { position: absolute; top: 6px; right: 7px; width: 4px; height: 4px; border-radius: 50%; background: #5b7b73; box-shadow: 0 0 5px rgba(168,207,145,.26); }
.drift-key:hover .key-lamp { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.connect-key .key-lamp { background: #80643e; }.connect-key:hover .key-lamp { background: var(--amber-hot); box-shadow: 0 0 7px var(--amber); }
.return-key .key-lamp { background: #57626a; }
.console-archive-row { display: flex; gap: 3px; margin-top: auto; padding-top: 5px; }
.micro-control { display: flex; min-width: 0; flex: 1 1 0; align-items: center; justify-content: center; gap: 4px; padding: 5px 3px; border: 1px solid rgba(105,121,125,.29); color: #879599; background: linear-gradient(180deg,rgba(42,52,56,.82),rgba(12,17,20,.95)); box-shadow: inset 0 1px rgba(255,255,255,.07),0 2px 3px #050708; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-body); white-space: nowrap; transition: filter .15s ease,transform .15s ease; }
.micro-control:active:not(:disabled) { transform: translateY(1px); }.micro-control:hover:not(:disabled) { filter: brightness(1.28); }
.micro-control > span { color: var(--cyan); font-size: var(--fs-nano); }.micro-control small { color: #59686c; font-size: var(--fs-nano); }
.micro-control:disabled { opacity: .47; }
.micro-control.logbook-control { position: relative; color: #c0cdca; border-color: rgba(104,200,211,.34); }
.micro-control.logbook-control .control-icon { color: var(--cyan); }.micro-control.logbook-control b { font: inherit; font-weight: 500; }
.console-insignia { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(218,171,104,.44); background: radial-gradient(ellipse at 50% 38%,rgba(228,166,78,.17),rgba(13,17,19,.94) 68%); box-shadow: inset 0 0 23px rgba(228,166,78,.1),inset 0 1px rgba(255,237,199,.14),0 0 18px rgba(228,166,78,.06); }
.console-insignia::before { position: absolute; inset: 5px; border: 1px solid rgba(219,174,111,.15); content: ''; pointer-events: none; }
.console-insignia::after { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .22; background: repeating-linear-gradient(0deg,transparent 0 4px,rgba(240,212,167,.08) 5px); }
.insignia-overline { position: relative; z-index: 1; color: #c4a06d; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); text-align: center; font-stretch: var(--stretch-instrument); }
.one-degree-mark { position: relative; z-index: 1; width: min(95%,205px); height: auto; margin: 5px 0 2px; filter: drop-shadow(0 0 7px rgba(228,166,78,.5)); }
.insignia-subline { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; color: #9e8965; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.insignia-subline i { width: 4px; height: 4px; border-radius: 50%; background: var(--amber-hot); box-shadow: 0 0 6px var(--amber); }
.insignia-subline b { margin-left: 3px; color: #6d6960; font-weight: 400; }
.insignia-fastener { position: absolute; z-index: 2; top: 50%; width: 5px; height: 5px; border: 1px solid #94784e; border-radius: 50%; background: #332a1f; }
.insignia-fastener.left { left: 6px; }.insignia-fastener.right { right: 6px; }
.orbit-bank { display: flex; flex-direction: column; }
.orbit { position: relative; flex: 1; min-height: 0; margin-top: 5px; }
.orbit-list { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; overflow: auto; padding: 1px; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .18s ease,transform .18s ease; scrollbar-width: thin; scrollbar-color: #475a5f transparent; }
.orbit.open .orbit-list { opacity: 1; pointer-events: auto; transform: none; }
.orbit-list button { min-height: 17px; border: 0; border-left: 1px solid rgba(104,200,211,.38); padding: 3px 5px; overflow: hidden; color: #aabbb9; text-align: left; text-overflow: ellipsis; white-space: nowrap; background: rgba(18,34,39,.57); font: var(--fs-nano) var(--mono); }
.orbit-list button:hover, .orbit-list button.current { color: #fff0cb; border-left-color: var(--amber); background: rgba(54,43,27,.55); }
.orbit-list > i { display: none; }
.logbook-empty { margin: 9px 2px; color: #7c8a8c; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }.logbook-empty[hidden] { display: none; }
.orbit-note { margin-top: 5px; color: #617177; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.audio-bank { display: flex; flex-direction: column; align-items: center; }
.audio-bank .bank-heading { width: 100%; }
.audio-fader-wrap { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 71px; padding-top: 4px; }
.fader-scale { color: #6e7c7f; font: var(--fs-nano) var(--mono); }
.audio-fader { width: 74px; height: 17px; margin: 0 -28px; accent-color: var(--cyan); transform: rotate(-90deg); filter: drop-shadow(0 0 2px rgba(104,200,211,.3)); }
.audio-fader:disabled { opacity: .55; }
.mute-switch { display: flex; align-items: center; gap: 5px; margin-top: auto; padding: 4px 5px; border: 1px solid rgba(105,121,125,.3); background: linear-gradient(180deg,#283237,#101619); box-shadow: inset 0 1px rgba(255,255,255,.08),0 2px 3px #050708; }
.mute-switch > i { position: relative; width: 17px; height: 9px; border: 1px solid #4a565a; border-radius: 8px; background: #0a0e11; box-shadow: inset 0 1px 2px #000; }
.mute-switch > i::after { position: absolute; left: 1px; top: 1px; width: 5px; height: 5px; content: ''; border-radius: 50%; background: #59656a; box-shadow: 0 1px 2px #000; }
.mute-switch > span { color: #a3adae; font: var(--fs-nano) var(--mono); }.mute-switch small { color: #68777b; font: var(--fs-nano) var(--mono); }
.mute-switch:disabled { opacity: .55; }
.console-lower-edge { height: 17px; border-top: 1px solid rgba(180,197,196,.1); color: #647277; font-size: var(--fs-nano); }
.console-lower-edge b { color: var(--green); font-weight: 400; }

/* Functional controls and readable motion. */
.back-button:hover { color: #fff; }
.trace-back { position: absolute; left: 4%; top: 8%; z-index: 25; }
.trace-back.show { opacity: 1; pointer-events: auto; }
.loading-label { animation: text-pulse 1s ease-in-out infinite alternate; }
@keyframes text-pulse { to { opacity: .48; } }
@keyframes reticle-breathe { 50% { box-shadow: 0 0 32px rgba(61,163,183,.12),inset 0 0 21px rgba(61,163,183,.1); } }
@keyframes orbit-turn { to { transform: rotateX(72deg) rotateZ(352deg); } }
@keyframes nebula-drift { to { transform: translate3d(-1.5%,1%,0) scale(1.04); } }
@keyframes scan-pass { 0% { opacity: 0; transform: translateY(-65%); } 12% { opacity: .9; } 80% { opacity: .55; } 100% { opacity: 0; transform: translateY(66%); } }
@keyframes signal-arrival { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
@keyframes unidentified-cross { 0% { opacity: 0; transform: translate3d(0,0,-120px) rotate(-7deg) scale(.78); } 8% { opacity: .42; } 82% { opacity: .32; } 100% { opacity: 0; transform: translate3d(120vw,22px,-120px) rotate(-7deg) scale(.78); } }

/* Smaller screens retain the panoramic viewport and collapse console banks into rows. */
@media (max-width: 1120px) {
  .cockpit-shell { grid-template-rows: 43px minmax(225px,1fr) auto; padding: 0 8px; }
  .console-body { grid-template-columns: minmax(165px,1.05fr) minmax(205px,1.25fr) minmax(160px,1fr) minmax(125px,.75fr); grid-template-rows: minmax(57px,1fr) minmax(57px,1fr); min-height: 132px; gap: 5px; }
  .acquisition-bank { grid-column: 1; grid-row: 1; }.navigation-bank { grid-column: 1 / 3; grid-row: 2; }
  .console-insignia { grid-column: 2; grid-row: 1; }.orbit-bank { grid-column: 3; grid-row: 1 / 3; }.audio-bank { grid-column: 4; grid-row: 1 / 3; }
  .console-archive-row { gap: 2px; }.micro-control { flex-wrap: wrap; }.micro-control small { display: none; }
  .flight-instrument { top: 17%; }.local-instrument { left: 3.3%; }.anomaly-instrument { right: 3.3%; }
  .skyy-berth { right: 4%; bottom: 8%; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  #app { min-height: 760px; height: 100svh; overflow: auto; }
  .cockpit-shell { position: relative; min-height: 760px; grid-template-rows: 43px minmax(390px,1fr) auto; padding: 0 5px; }
  .header-coordinate { display: none; }
  .flight-header { padding: 0 8px; }
  .ship-readout small { max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .forward-cabin { grid-template-rows: 22px minmax(0,1fr) 13px; padding: 0; }
  .canopy-arch { font-size: var(--fs-nano); }
  .windshield-assembly::before { inset: -2px -2px -1px; }.viewport-frame { inset: 8px 8px 7px; }
  .window-frame-top { top: 2px; }.window-frame-bottom { bottom: 2px; }
  .hull-rib { width: 10px; }.rib-left { left: 0; }.rib-right { right: 0; }
  .flight-instrument { top: 10%; width: 29%; }
  .local-instrument { left: 4%; }.anomaly-instrument { right: 4%; }
  .flight-instrument h2 { font-size: var(--fs-nano); }.instrument-caption { font-size: var(--fs-nano); }.signal-row b { font-size: var(--fs-nano); }.signal-row small { font-size: var(--fs-nano); }
  .sensor-grid { width: 56px; height: 33px; }.anomaly-scope { width: 48px; height: 48px; }
  .anomaly-readout p { font-size: var(--fs-nano); }.anomaly-tag { font-size: var(--fs-nano); }
  .skyy-berth { right: 4%; bottom: 9%; width: 102px; height: 87px; }.skyy-copy { top: 7px; left: 8px; }.skyy-copy small { display: none; }.skyy-copy strong { font-size: var(--fs-nano); }.skyy-portrait { width: 68%; }
  .home { top: 48%; width: 52%; }.viewport-reticle { width: 63px; height: 63px; margin-bottom: 9px; }.home h1 { font-size: var(--fs-micro); }.home-hint { font-size: var(--fs-nano); }
  .universe { inset: 0; }.main-topic { width: 100px; height: 100px; }.main-orb { width: 48px; height: 48px; }.main-label { top: calc(50% + 35px); font-size: var(--fs-nano); }.main-orb::before { inset: -12px; }.main-orb::after { inset: -21px; }
  .topic { width: 49px; height: 49px; }.topic-orb { width: 13px; height: 13px; }.topic-label { top: calc(50% + 12px); max-width: 105px; font-size: var(--fs-nano); padding: 3px 4px; }
  .topic-info { width: min(170px,53vw); }.topic-summary { font-size: var(--fs-nano); }
  .windshield-topline, .windshield-bottomline { left: 5%; right: 5%; font-size: var(--fs-nano); }.viewport-coords { display: none; }.windshield-bottomline span:last-child { display: none; }
  .canopy-footer { padding: 0 7px; font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
  .control-console { padding: 0 5px 5px; }.console-lip, .console-lower-edge { font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }.console-lip { height: 17px; }
  .console-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(72px,.55fr); grid-template-rows: 72px 80px; min-height: 0; padding: 5px 0; gap: 4px; }
  .acquisition-bank { grid-column: 1 / 3; grid-row: 1; }.navigation-bank { grid-column: 1 / 3; grid-row: 2; }.console-insignia { grid-column: 3; grid-row: 1; }.orbit-bank { display: none; }.audio-bank { grid-column: 3; grid-row: 2; }
  .console-bank { padding: 5px; }.bank-heading { gap: 4px; padding-bottom: 4px; font-size: var(--fs-nano); }.acquisition-row { height: calc(100% - 15px); }.search-entry { height: 27px; }.search-label { margin-bottom: 3px; font-size: var(--fs-nano); }.channel-note { margin-top: 3px; font-size: var(--fs-nano); }
  .engage-lever { width: 38px; height: 60px; flex-basis: 38px; margin-top: 7px; }.lever-base { top: 21px; width: 18px; height: 20px; }.lever-grip { top: 16px; height: 20px; width: 11px; }.engage-lever b { font-size: var(--fs-nano); }
  .control-key-row { gap: 3px; margin-top: 5px; }.console-key { height: 34px; padding-left: 5px; }.console-key b { font-size: var(--fs-nano); }.console-key small { font-size: var(--fs-nano); margin-top: 3px; }.key-lamp { top: 4px; right: 4px; }
  .console-archive-row { margin-top: 3px; padding-top: 3px; }.micro-control { min-height: 17px; gap: 2px; font-size: var(--fs-nano); }.micro-control > span { font-size: var(--fs-nano); }
  .insignia-overline { font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }.one-degree-mark { width: 98%; margin: 2px 0; }.insignia-subline { gap: 3px; font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }.insignia-subline b { display: none; }.insignia-fastener { display: none; }
  .audio-bank .bank-heading b { font-size: var(--fs-nano); }.audio-fader-wrap { min-height: 42px; gap: 4px; }.audio-fader { width: 53px; margin: 0 -17px; }.fader-scale { font-size: var(--fs-nano); }.mute-switch { gap: 3px; margin-top: 0; padding: 3px; }.mute-switch > i { width: 13px; height: 8px; }.mute-switch > span { font-size: var(--fs-nano); }.mute-switch small { display: none; }
  .console-lower-edge { height: 13px; }.trace-ui { top: 14%; width: 75%; }.trace-fields { gap: 6px; }.trace-fields input { width: 31vw; font-size: var(--fs-nano); }.trace-button { margin-top: 8px; padding: 6px 8px; font-size: var(--fs-nano); }
}

@media (max-height: 720px) and (min-width: 761px) {
  .cockpit-shell { grid-template-rows: 40px minmax(210px,1fr) auto; }
  .console-body { min-height: 124px; padding: 5px 0; }.console-bank { padding-top: 5px; }
  .engage-lever { height: 70px; }.console-key { height: 40px; }.orbit-note { display: none; }
}

/* Immersion and legibility pass: the viewport is a window, and the controls are machinery. */
.cockpit-shell { grid-template-rows: 50px minmax(240px,1fr) auto; }
.forward-cabin { grid-template-rows: 30px minmax(0,1fr) 20px; }
.windshield-assembly { perspective: 1500px; }
.windshield-assembly::before { inset: -9px -12px -4px; clip-path: none; border-radius: 45% 45% 1% 1% / 16% 16% 1% 1%; }
.windshield-assembly::after { inset: 6px 7px 6px; clip-path: none; border-radius: 44% 44% 1% 1% / 15% 15% 1% 1%; background: linear-gradient(180deg,rgba(228,239,230,.045),transparent 20% 86%,rgba(4,8,11,.08)); }
.viewport-frame { inset: 13px 15px 12px; clip-path: none; border-radius: 43% 43% 1% 1% / 14% 14% 1% 1%; transform: none; background: radial-gradient(ellipse at 52% 34%,#0b1824,#050b12 64%,#03070b); }
.viewport-frame::before { opacity: .3; background: linear-gradient(118deg,rgba(206,235,236,.1),transparent 18%,transparent 65%,rgba(81,149,168,.06)),linear-gradient(180deg,rgba(1,4,7,.04),transparent 28% 72%,rgba(1,3,6,.2)); }
#starfield { z-index: 0; }
.nebula-layer { z-index: 1; inset: -14%; opacity: .94; background: radial-gradient(ellipse at 58% 31%,rgba(66,110,140,.32),transparent 32%),radial-gradient(ellipse at 24% 55%,rgba(76,89,122,.24),transparent 39%),radial-gradient(ellipse at 75% 72%,rgba(119,81,57,.15),transparent 24%),radial-gradient(ellipse at 49% 62%,rgba(35,74,104,.2),transparent 47%); }
.galaxy-band { position: absolute; left: -10%; top: 8%; z-index: 1; width: 120%; height: 69%; pointer-events: none; opacity: .7; transform: rotate(-17deg); background: radial-gradient(ellipse at 51% 47%,rgba(92,151,183,.22) 0 8%,rgba(73,116,151,.17) 20%,rgba(63,90,125,.09) 40%,transparent 72%); filter: blur(16px); }
.galaxy-band::before { position: absolute; inset: 14% -3%; content: ''; background: linear-gradient(110deg,transparent 8%,rgba(101,146,178,.045) 30%,rgba(155,180,185,.13) 48%,rgba(92,133,164,.08) 66%,transparent 90%); filter: blur(11px); }
.planet-horizon { position: absolute; left: -14%; bottom: -87%; z-index: 1; width: 128%; height: 145%; overflow: hidden; border: 1px solid rgba(178,224,232,.2); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 54% 5%,#4b6874 0,#243f53 8%,#182e42 22%,#102033 47%,#08111c 76%); box-shadow: 0 -1px 3px rgba(213,246,248,.9),0 -7px 18px rgba(101,211,237,.62),0 -25px 68px rgba(68,160,202,.34),inset 0 15px 40px rgba(116,160,173,.12); transform: rotate(-7deg); animation: horizon-drift 80s ease-in-out infinite alternate; }
.planet-horizon::before { position: absolute; inset: 0; content: ''; opacity: .7; background: radial-gradient(ellipse at 44% 2%,rgba(202,169,127,.45),transparent 17%),linear-gradient(165deg,transparent 5%,rgba(56,91,111,.16) 29%,transparent 50%),repeating-linear-gradient(172deg,transparent 0 39px,rgba(132,175,187,.035) 40px 41px,transparent 42px 72px); }
.distant-planet { z-index: 2; transform: none; }
.planet-one { top: 20%; right: 25%; width: clamp(100px,13vw,205px); opacity: .79; background: radial-gradient(circle at 32% 28%,#8298a0 0,#354b59 17%,#172735 47%,#080e16 75%); box-shadow: inset -24px -10px 35px rgba(0,0,0,.76),inset 9px 3px 14px rgba(188,214,216,.21),0 0 26px rgba(86,135,158,.18); }
.planet-one::before { border-top-color: rgba(171,217,225,.3); }
.planet-two { top: 38%; bottom: auto; left: 13%; width: clamp(28px,4vw,62px); opacity: .76; transform: none; }
.asteroid-field { position: absolute; top: 39%; left: 34%; z-index: 2; width: 30%; height: 17%; pointer-events: none; transform: rotate(-11deg); opacity: .62; animation: asteroid-drift 54s ease-in-out infinite alternate; }
.asteroid-field i { position: absolute; width: 7px; height: 5px; border: 1px solid rgba(160,174,168,.38); border-radius: 42% 56% 48% 35%; background: linear-gradient(135deg,#7a817a,#303b40 65%,#10171b); box-shadow: 0 0 8px rgba(99,148,165,.16); }
.asteroid-field i:nth-child(1) { left: 6%; top: 61%; transform: scale(.8) rotate(21deg); }.asteroid-field i:nth-child(2) { left: 18%; top: 33%; transform: scale(1.2) rotate(-18deg); }.asteroid-field i:nth-child(3) { left: 38%; top: 71%; transform: scale(.65) rotate(31deg); }.asteroid-field i:nth-child(4) { left: 57%; top: 45%; transform: scale(1.45) rotate(-8deg); }.asteroid-field i:nth-child(5) { left: 77%; top: 22%; transform: scale(.72) rotate(12deg); }.asteroid-field i:nth-child(6) { left: 89%; top: 68%; transform: scale(.95) rotate(-24deg); }
.window-reflection { z-index: 3; opacity: .56; }
.view { z-index: 4; }
.home { width: min(430px,48%); }
.home .eyebrow, .eyebrow { font-size: var(--fs-micro); }
.home h1 { font-size: var(--fs-h2); }
.home-hint, .status { font-size: var(--fs-small); }
.viewport-reticle { width: 102px; height: 102px; margin-bottom: 17px; }
.flight-instrument { top: 18%; width: clamp(160px,17vw,250px); }
.instrument-caption { font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.flight-instrument h2 { font-size: var(--fs-body); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.signal-empty { font-size: var(--fs-micro); }
.signal-row b { font-size: var(--fs-small); }.signal-row small { font-size: var(--fs-micro); }.signal-row em { font-size: var(--fs-small); }
.instrument-state { font-size: var(--fs-micro); }.anomaly-tag { font-size: var(--fs-micro); }.anomaly-readout p { font-size: var(--fs-micro); line-height: var(--lh-body); }
.skyy-status { font-size: var(--fs-nano); }.skyy-copy strong { font-size: var(--fs-h3); }.skyy-copy small { font-size: var(--fs-nano); }.berth-label { font-size: var(--fs-nano); }
.universe { z-index: 6; }
.cluster-lines { overflow: visible; }
.signal-link { stroke: rgba(132,224,235,.75); stroke-width: 1.45; filter: drop-shadow(0 0 7px rgba(86,207,225,.62)); }
.signal-link.back-link { stroke: rgba(117,160,207,.34); stroke-width: .9; }
.main-topic { width: 158px; height: 158px; }
.main-orb { width: 78px; height: 78px; }
.topic { width: 78px; height: 78px; }
.topic-orb { width: 21px; height: 21px; box-shadow: 0 0 10px rgba(90,217,231,.68),0 0 27px rgba(64,168,198,.34),inset -4px -3px 7px rgba(0,0,0,.8); }
.topic-label { top: calc(50% + 24px); max-width: 230px; font-size: var(--fs-small); line-height: var(--lh-tight); padding: 5px 8px; }
.main-label { top: calc(50% + 56px); max-width: 290px; font-size: var(--fs-h3); }
.topic-summary { font-size: var(--fs-small); max-height: 70px; }.go-deeper { font-size: var(--fs-micro); }
.topic-info { width: min(260px,46vw); }
.main-topic .topic-info { top: calc(50% + 77px); width: min(300px,54vw); }
.trace-ui { width: min(620px,62%); }
.trace-ui h2 { font-size: var(--fs-h2); }
.trace-fields label span { font-size: var(--fs-micro); }
.trace-fields input { width: clamp(130px,15vw,210px); height: 38px; font-size: var(--fs-body); }
.trace-fields > b { font-size: var(--fs-small); }.trace-button { font-size: var(--fs-body); padding: 10px 16px; }
.trace-topic .topic-label, .trace-endpoint-anchor .main-label { font-size: var(--fs-micro); }
.trace-world .topic-summary { font-size: var(--fs-micro); }
@keyframes horizon-drift { from { transform: rotate(-7deg) translateX(-.35%); } to { transform: rotate(-6.2deg) translateX(.35%); } }
@keyframes asteroid-drift { from { transform: translate3d(-1%,0,0) rotate(-11deg); } to { transform: translate3d(1.4%,-3px,0) rotate(-9.5deg); } }

/* The console gains real working height instead of compressing labels. */
.control-console { padding: 0 clamp(10px,1.4vw,20px) 8px; }
.console-lip, .console-lower-edge { height: 26px; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.console-lip .console-status-led { width: 7px; height: 7px; }
.console-body { grid-template-columns: minmax(245px,1.15fr) minmax(350px,1.55fr) minmax(250px,1.15fr) minmax(180px,.85fr) minmax(150px,.68fr); gap: clamp(8px,.8vw,12px); min-height: clamp(188px,23vh,220px); padding: 10px 0; }
.console-bank { padding: 11px 11px 9px; }
.bank-heading { gap: 8px; padding-bottom: 8px; font-size: var(--fs-body); letter-spacing: var(--ls-label); white-space: normal; font-stretch: var(--stretch-instrument); }
.bank-heading i { width: 6px; height: 6px; }
.acquisition-row { height: calc(100% - 31px); gap: 9px; }
.search-label { margin-bottom: 7px; font-size: var(--fs-small); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.search-entry { height: 42px; padding: 0 9px; }
.search-entry input { font-size: var(--fs-body); }
.entry-frequency { font-size: var(--fs-micro); }
.channel-note { margin-top: 7px; font-size: var(--fs-micro); letter-spacing: var(--ls-body); }
.engage-lever { width: 58px; height: 108px; flex-basis: 58px; margin-top: 8px; }
.lever-base { top: 34px; width: 26px; height: 36px; }.lever-grip { top: 24px; width: 16px; height: 36px; }
.engage-lever b { font-size: var(--fs-body); }
.control-key-row { gap: 8px; margin-top: 12px; }
.console-key { height: clamp(62px,7.5vh,76px); padding: 7px 6px 6px 10px; }
.console-key b { overflow: visible; font-size: var(--fs-body); line-height: var(--lh-tight); letter-spacing: var(--ls-body); white-space: normal; }
.console-key small { margin-top: 7px; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.key-lamp { width: 6px; height: 6px; }
.console-archive-row { gap: 5px; padding-top: 8px; }
.micro-control { min-height: 36px; gap: 5px; padding: 6px 5px; font-size: var(--fs-body); letter-spacing: var(--ls-body); }
.micro-control > span { font-size: var(--fs-body); }.micro-control small { font-size: var(--fs-nano); }
.console-insignia { min-height: 0; }
.insignia-overline { font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.one-degree-mark { width: min(98%,250px); margin: 8px 0 4px; }
.insignia-subline { gap: 7px; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.insignia-subline i { width: 6px; height: 6px; }
.insignia-fastener { width: 7px; height: 7px; }
.orbit { margin-top: 8px; }.orbit-list { gap: 3px; }.orbit-list button { min-height: 25px; padding: 4px 7px; font-size: var(--fs-micro); }
.logbook-empty { margin: 12px 4px; font-size: var(--fs-micro); }.orbit-note { margin-top: 7px; font-size: var(--fs-nano); }
.audio-fader-wrap { min-height: 105px; gap: 10px; }.fader-scale { font-size: var(--fs-micro); }
.audio-fader { width: 98px; height: 19px; margin: 0 -34px; }
.mute-switch { gap: 7px; padding: 6px 8px; }.mute-switch > i { width: 23px; height: 12px; }.mute-switch > i::after { width: 7px; height: 7px; }
.mute-switch > span { font-size: var(--fs-body); }.mute-switch small { font-size: var(--fs-nano); }
.console-lower-edge b { font-size: var(--fs-micro); }

@media (max-width: 1320px) {
  .console-body { grid-template-columns: minmax(190px,1.05fr) minmax(260px,1.35fr) minmax(220px,1.1fr) minmax(165px,.8fr); grid-template-rows: minmax(84px,1fr) minmax(84px,1fr); min-height: 194px; gap: 7px; }
  .acquisition-bank { grid-column: 1; grid-row: 1; }.navigation-bank { grid-column: 1 / 3; grid-row: 2; }
  .console-insignia { grid-column: 2; grid-row: 1; }.orbit-bank { grid-column: 3; grid-row: 1 / 3; }.audio-bank { grid-column: 4; grid-row: 1 / 3; }
  .control-key-row { margin-top: 8px; }.console-key { height: 60px; }
}

@media (max-width: 1120px) {
  .cockpit-shell { grid-template-rows: 46px minmax(225px,1fr) auto; }
  .console-body { grid-template-columns: minmax(145px,.95fr) minmax(235px,1.45fr) minmax(185px,1.1fr) minmax(145px,.85fr); grid-template-rows: minmax(84px,1fr) minmax(84px,1fr); min-height: 194px; gap: 6px; }
  .bank-heading { font-size: var(--fs-small); letter-spacing: var(--ls-body); }
  .acquisition-row { gap: 5px; }.engage-lever { width: 48px; flex-basis: 48px; }
  .console-key b { font-size: var(--fs-body); }.micro-control { font-size: var(--fs-body); }
  .flight-instrument { top: 17%; width: clamp(145px,18vw,205px); }
  .local-instrument { left: 3.3%; }.anomaly-instrument { right: 3.3%; }
}

@media (max-width: 760px) {
  .cockpit-shell { grid-template-rows: 43px minmax(390px,1fr) auto; }
  .forward-cabin { grid-template-rows: 24px minmax(0,1fr) 16px; }
  .windshield-assembly::before { inset: -3px -3px -2px; border-radius: 42% 42% 1% 1% / 10% 10% 1% 1%; }
  .windshield-assembly::after { border-radius: 41% 41% 1% 1% / 9% 9% 1% 1%; }
  .viewport-frame { inset: 9px 8px 8px; border-radius: 40% 40% 1% 1% / 9% 9% 1% 1%; }
  .flight-instrument { top: 11%; width: 31%; }
  .instrument-caption { font-size: var(--fs-nano); }.flight-instrument h2 { font-size: var(--fs-nano); }
  .signal-empty, .signal-row b, .signal-row small, .anomaly-tag, .anomaly-readout p, .instrument-state { font-size: var(--fs-nano); }
  .skyy-berth { width: 102px; height: 87px; }.skyy-status { font-size: var(--fs-nano); }.skyy-copy strong { font-size: var(--fs-small); }.skyy-copy small, .berth-label { display: none; }
  .home { width: 58%; }.home .eyebrow, .eyebrow { font-size: var(--fs-nano); }.home h1 { font-size: var(--fs-h3); }.home-hint, .status { font-size: var(--fs-nano); }
  .main-topic { width: 124px; height: 124px; }.main-orb { width: 62px; height: 62px; }.main-label { top: calc(50% + 45px); max-width: 190px; font-size: var(--fs-body); }
  .topic { width: 63px; height: 63px; }.topic-label { top: calc(50% + 19px); max-width: 145px; font-size: var(--fs-nano); }
  .topic-summary, .go-deeper { font-size: var(--fs-nano); }
  .windshield-topline, .windshield-bottomline { font-size: var(--fs-nano); }.canopy-footer { font-size: var(--fs-nano); }
  .console-lip, .console-lower-edge { font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
  .console-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(112px,auto) minmax(100px,auto) minmax(170px,auto) minmax(116px,auto) minmax(116px,auto); min-height: 0; gap: 6px; }
  .acquisition-bank { grid-column: 1 / 3; grid-row: 1; }.console-insignia { grid-column: 1 / 3; grid-row: 2; }.navigation-bank { grid-column: 1 / 3; grid-row: 3; }.orbit-bank { display: flex; grid-column: 1 / 3; grid-row: 4; }.audio-bank { grid-column: 1 / 3; grid-row: 5; }
  .console-bank { padding: 9px; }.bank-heading { gap: 6px; padding-bottom: 7px; font-size: var(--fs-small); }.acquisition-row { height: calc(100% - 28px); gap: 9px; }.search-label { font-size: var(--fs-micro); }.search-entry { height: 38px; }.search-entry input { font-size: var(--fs-body); }.channel-note { font-size: var(--fs-nano); }
  .engage-lever { width: 54px; height: 88px; flex-basis: 54px; }.lever-base { top: 28px; width: 23px; height: 30px; }.lever-grip { top: 21px; height: 30px; width: 15px; }.engage-lever b { font-size: var(--fs-small); }
  .control-key-row { gap: 6px; margin-top: 8px; }.console-key { height: 70px; padding: 6px 6px 6px 8px; }.console-key b { font-size: var(--fs-body); }.console-key small { font-size: var(--fs-micro); }
  .console-archive-row { gap: 5px; padding-top: 8px; }.micro-control { min-height: 37px; font-size: var(--fs-small); }.micro-control small { font-size: var(--fs-nano); }
  .insignia-overline { font-size: var(--fs-nano); }.one-degree-mark { width: min(78%,300px); margin: 4px 0; }.insignia-subline { font-size: var(--fs-nano); }.insignia-fastener { display: block; }
  .orbit { min-height: 65px; }.orbit-list button, .logbook-empty, .orbit-note { font-size: var(--fs-nano); }.audio-fader-wrap { min-height: 55px; }.audio-fader { width: 75px; margin: 0 -26px; }.fader-scale { font-size: var(--fs-nano); }.mute-switch > span { font-size: var(--fs-nano); }.mute-switch small { font-size: var(--fs-nano); }
  .trace-ui { top: 13%; width: 80%; }.trace-fields { gap: 7px; }.trace-fields label span { font-size: var(--fs-nano); }.trace-fields input { width: 31vw; height: 34px; font-size: var(--fs-small); }.trace-button { font-size: var(--fs-micro); padding: 8px 10px; }
}

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

/* Master-cockpit composition. The reference image is the cabin plate; live UI stays separate. */
.cockpit-shell {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #03070c url("./assets/cockpit/cockpit-new.webp") center center / contain no-repeat;
}
.cockpit-shell::before {
  z-index: 0;
  opacity: .22;
  background: linear-gradient(180deg,rgba(1,4,7,.12),transparent 26% 69%,rgba(1,4,7,.24)),radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.28));
}
.flight-header { position: absolute; inset: 0 2.3% auto; z-index: 8; height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.flight-header::before { display: none; }
.ship-readout, .header-coordinate { display: none; }
.pilot-id { position: absolute; top: 10px; right: 0; padding: 7px 10px; border: 1px solid rgba(151,181,181,.24); background: rgba(3,8,11,.66); box-shadow: inset 0 1px rgba(223,236,230,.08),0 3px 12px rgba(0,0,0,.42); }
.pilot-id strong { font-size: var(--fs-small); }.pilot-id small { font-size: var(--fs-nano); }
.pilot-avatar { width: 27px; height: 27px; font-size: var(--fs-nano); }
.forward-cabin { position: absolute; inset: 0; z-index: 2; display: block; padding: 0; pointer-events: none; }
.canopy-arch, .canopy-footer, .windshield-assembly::before, .windshield-assembly::after,
.hull-rib, .window-frame-top, .window-frame-bottom, .frame-fastener { display: none; }
.windshield-assembly { position: absolute; inset: 7.4% 19.6% 49.6%; perspective: none; transform: none; pointer-events: none; }
.viewport-frame {
  inset: 4.2% 4.4% 1.8%;
  z-index: 1;
  overflow: hidden;
  clip-path: polygon(14% 0,86% 0,100% 75%,96% 100%,4% 100%,0 75%);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  pointer-events: auto;
}
.viewport-frame::before, .viewport-frame::after { display: none; }
#starfield { z-index: 0; opacity: .22; mix-blend-mode: screen; }
.nebula-layer, .galaxy-band, .planet-horizon, .distant-planet, .asteroid-field { display: none; }
.distant-object { z-index: 2; }
.window-reflection { z-index: 3; opacity: .24; }
.scan-flash { z-index: 7; }
.windshield-topline, .windshield-bottomline { left: 8%; right: 8%; z-index: 8; color: rgba(201,218,216,.8); font-size: var(--fs-micro); text-shadow: 0 2px 7px #02070b; }
.windshield-topline { top: 5%; }.windshield-bottomline { bottom: 3%; font-size: var(--fs-nano); }
.view { z-index: 5; }
.home { width: min(380px,60%); }
.home .eyebrow, .eyebrow { font-size: var(--fs-small); }
.home h1 { font-size: var(--fs-title); text-shadow: 0 2px 14px #02070b; }
.home-hint, .status { font-size: var(--fs-small); }
.viewport-reticle { width: 88px; height: 88px; margin-bottom: 12px; }
.universe { z-index: 4; }
.main-topic { width: 145px; height: 145px; }
.main-orb { width: 74px; height: 74px; }
.topic { width: 72px; height: 72px; }
.topic-label { font-size: var(--fs-small); }.main-label { font-size: var(--fs-h3); }
.topic-summary { font-size: var(--fs-small); }.go-deeper { font-size: var(--fs-micro); }
.trace-ui { width: min(570px,76%); }
.flight-instrument { position: absolute; top: 28%; z-index: 6; width: clamp(150px,16vw,235px); color: #e1e5df; text-shadow: 0 1px 8px #020609; pointer-events: auto; }
.local-instrument { left: 2.8%; text-align: left; }
.anomaly-instrument { right: 2.8%; text-align: right; }
.instrument-caption { font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.flight-instrument h2 { margin: 8px 0; font-size: var(--fs-body); }
.signal-empty { font-size: var(--fs-micro); }.signal-row b { font-size: var(--fs-small); }.signal-row small { font-size: var(--fs-micro); }
.instrument-state, .anomaly-tag, .anomaly-readout p { font-size: var(--fs-micro); }
.sensor-grid { width: 94px; height: 50px; }
.anomaly-scope { width: 76px; height: 76px; }
.skyy-berth { position: absolute; right: 3.5%; bottom: 13%; z-index: 6; width: clamp(122px,10vw,155px); height: clamp(96px,13vh,122px); pointer-events: none; }
.skyy-status { font-size: var(--fs-nano); }.skyy-copy strong { font-size: var(--fs-h3); }.skyy-copy small { font-size: var(--fs-nano); }.berth-label { font-size: var(--fs-nano); }
.control-console {
  position: absolute;
  inset: 46.4% 0 0;
  z-index: 9;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.control-console::before, .console-lip, .console-lower-edge { display: none; }
.console-body {
  position: absolute;
  inset: 39% 3.2% 14%;
  display: grid;
  grid-template-columns: 1.05fr 1.15fr .85fr 1.05fr .35fr;
  grid-template-rows: minmax(0,1fr);
  gap: clamp(7px,.75vw,12px);
  min-height: 0;
  padding: 0;
}
.console-bank { min-width: 0; min-height: 0; padding: 8px; overflow: visible; border: 0; background: linear-gradient(160deg,rgba(3,8,11,.16),rgba(3,8,11,.03) 55%,rgba(3,8,11,.12)); box-shadow: none; }
.console-bank::before { display: none; }
.bank-heading { gap: 7px; padding: 3px 0 7px; border-bottom-color: rgba(201,164,93,.28); color: #efd091; font-size: var(--fs-small); letter-spacing: var(--ls-label); white-space: normal; text-shadow: 0 1px 5px #020406; font-stretch: var(--stretch-instrument); }
.bank-heading i { width: 6px; height: 6px; }
.acquisition-row { height: calc(100% - 26px); gap: 8px; }
.search-label { font-size: var(--fs-small); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.search-entry { height: 40px; background: linear-gradient(180deg,rgba(5,19,23,.95),rgba(2,7,10,.97)); border-color: rgba(118,206,217,.45); }
.search-entry input { font-size: var(--fs-body); }
.channel-note { font-size: var(--fs-micro); }
.engage-lever { width: 54px; height: 96px; flex-basis: 54px; margin-top: 7px; }
.lever-base { top: 32px; width: 25px; height: 33px; }.lever-grip { top: 23px; width: 15px; height: 34px; }
.engage-lever b { font-size: var(--fs-body); }
.navigation-bank { display: flex; flex-direction: column; }
.control-key-row { gap: 6px; margin-top: 10px; }
.console-key { min-height: 60px; height: auto; padding: 7px 7px 6px; border-radius: 3px; background: linear-gradient(155deg,#5c6767 0,#394448 16%,#202a2e 56%,#11181c); box-shadow: inset 0 1px rgba(247,250,242,.2),inset 0 -2px rgba(0,0,0,.75),0 4px 5px rgba(0,0,0,.7); }
.console-key::before { inset: 3px; border-color: rgba(227,232,217,.11); }
.console-key b { overflow: visible; color: #eff0e5; font-size: var(--fs-body); line-height: var(--lh-tight); letter-spacing: 0; text-overflow: clip; white-space: normal; }
.console-key small { margin-top: 6px; color: #b9c2bd; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.key-lamp { width: 6px; height: 6px; }
.console-archive-row { gap: 5px; margin-top: auto; padding-top: 8px; }
.micro-control { min-height: 34px; gap: 4px; padding: 5px 4px; border-color: rgba(180,164,118,.34); color: #e4d4a7; background: linear-gradient(180deg,rgba(53,59,54,.92),rgba(15,21,23,.96)); font-size: var(--fs-body); letter-spacing: 0; }
.micro-control > span { font-size: var(--fs-body); }.micro-control small { color: #a9aaa0; font-size: var(--fs-nano); }
.console-insignia { position: absolute; left: 43%; top: 4%; width: 14%; height: 12%; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.console-insignia::before, .console-insignia::after, .insignia-overline, .one-degree-mark, .insignia-subline, .insignia-fastener { visibility: hidden; }
.orbit-bank { display: flex; flex-direction: column; }
.orbit { margin-top: 7px; }
.orbit-list button { min-height: 24px; padding: 4px 6px; background: rgba(3,13,16,.78); font-size: var(--fs-micro); }
.logbook-empty { margin: 10px 2px; color: #dfdfd1; font-size: var(--fs-micro); }
.orbit-note { margin-top: 6px; color: #d3c6a4; font-size: var(--fs-nano); }
.audio-bank { display: flex; flex-direction: column; align-items: center; }
.audio-bank .bank-heading { width: 100%; }
.audio-fader-wrap { min-height: 100px; gap: 10px; }
.fader-scale { color: #e0cf9e; font-size: var(--fs-micro); }
.audio-fader { width: 94px; margin: 0 -32px; }
.mute-switch { min-height: 31px; gap: 7px; padding: 5px 8px; background: linear-gradient(180deg,#465052,#171e21); }
.mute-switch > i { width: 22px; height: 12px; }.mute-switch > i::after { width: 7px; height: 7px; }
.mute-switch > span { font-size: var(--fs-small); }.mute-switch small { color: #b1b4ac; font-size: var(--fs-nano); }
.trace-fields label span { font-size: var(--fs-micro); }.trace-fields input { height: 36px; font-size: var(--fs-body); }
.trace-button { font-size: var(--fs-body); }

@media (max-width: 1100px) and (min-width: 761px) {
  .console-body { inset: 33% 4% 12%; grid-template-columns: minmax(0,1.1fr) minmax(0,1.4fr); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px; }
  .acquisition-bank { grid-column: 1; grid-row: 1; }.navigation-bank { grid-column: 2; grid-row: 1; }
  .orbit-bank { grid-column: 1; grid-row: 2; }.audio-bank { grid-column: 2; grid-row: 2; }
  .console-insignia { left: 42%; width: 16%; }
  .flight-instrument { top: 29%; width: 17%; }.local-instrument { left: 2%; }.anomaly-instrument { right: 2%; }
}

@media (max-width: 760px) {
  body { overflow-x: hidden; overflow-y: auto; }
  #app { height: auto; min-height: 100svh; overflow: visible; }
  .cockpit-shell { position: relative; inset: auto; min-height: calc(56.3vw + 590px); height: auto; overflow: visible; background-size: 100% auto; background-position: center top; }
  .cockpit-shell::before { position: absolute; inset: 0 0 auto; height: 56.3vw; }
  .flight-header { position: absolute; inset: 0 2% auto; height: 42px; }
  .pilot-id { top: 5px; padding: 5px 7px; }.pilot-id strong { font-size: var(--fs-nano); }.pilot-id small { font-size: var(--fs-nano); }.pilot-avatar { width: 23px; height: 23px; }
  .forward-cabin { position: absolute; inset: 0 0 auto; height: 56.3vw; }
  .windshield-assembly { inset: 7.4% 19.6% 49.6%; }
  .viewport-frame { inset: 4.2% 4.4% 1.8%; }
  .flight-instrument { top: 29%; width: 18%; }
  .local-instrument { left: 1.2%; }.anomaly-instrument { right: 1.2%; }
  .instrument-caption { font-size: var(--fs-nano); }.flight-instrument h2 { font-size: var(--fs-nano); }
  .signal-empty, .signal-row b, .signal-row small, .anomaly-tag, .anomaly-readout p, .instrument-state { font-size: var(--fs-nano); }
  .sensor-grid { width: 44px; height: 28px; }.anomaly-scope { width: 40px; height: 40px; }
  .skyy-berth { right: 2%; bottom: 4%; width: 74px; height: 56px; }.skyy-copy { top: 6px; left: 7px; }.skyy-status { font-size: var(--fs-nano); }.skyy-copy strong { font-size: var(--fs-nano); }.skyy-copy small, .berth-label { display: none; }.skyy-portrait { width: 62%; }
  .windshield-topline, .windshield-bottomline { font-size: var(--fs-nano); }.windshield-bottomline { bottom: 1%; }
  .control-console { position: relative; inset: auto; z-index: 9; width: 100%; min-height: 590px; margin-top: 56.3vw; padding: 14px 10px 18px; border: 1px solid #586266; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#3d484b,#202a2e 8%,#0a1014 30%,#171e21); box-shadow: inset 0 2px rgba(237,243,231,.13),0 -10px 24px rgba(0,0,0,.65); }
  .console-body { position: relative; inset: auto; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: 116px 164px 122px 118px; gap: 8px; min-height: 0; padding: 0; }
  .acquisition-bank { grid-column: 1 / 3; grid-row: 1; }.navigation-bank { grid-column: 1 / 3; grid-row: 2; }
  .orbit-bank { grid-column: 1 / 3; grid-row: 3; }.audio-bank { grid-column: 1 / 3; grid-row: 4; }
  .console-insignia { position: absolute; left: 30%; top: -70px; width: 40%; height: 62px; border: 1px solid rgba(223,171,91,.4); background: linear-gradient(180deg,rgba(14,19,20,.96),rgba(5,9,11,.95)); box-shadow: inset 0 0 18px rgba(223,171,91,.13); }
  .console-insignia::before, .console-insignia::after, .insignia-overline, .one-degree-mark, .insignia-subline, .insignia-fastener { visibility: visible; }
  .insignia-overline { font-size: var(--fs-nano); }.one-degree-mark { display: block; width: min(90%,210px); margin: 2px 0; }.insignia-subline { display: flex; font-size: var(--fs-nano); }
  .console-bank { padding: 8px; border: 1px solid rgba(151,165,161,.24); background: linear-gradient(150deg,rgba(43,53,55,.82),rgba(8,13,16,.9)); box-shadow: inset 0 1px rgba(237,243,231,.1),0 3px 6px rgba(0,0,0,.52); }
  .bank-heading { font-size: var(--fs-micro); }.search-label { font-size: var(--fs-micro); }.search-entry { height: 35px; }.channel-note { font-size: var(--fs-nano); }
  .engage-lever { width: 48px; height: 82px; flex-basis: 48px; }.engage-lever b { font-size: var(--fs-micro); }
  .control-key-row { margin-top: 7px; gap: 5px; }.console-key { min-height: 62px; padding: 6px; }.console-key b { font-size: var(--fs-small); }.console-key small { font-size: var(--fs-nano); }
  .console-archive-row { gap: 4px; padding-top: 7px; }.micro-control { min-height: 31px; font-size: var(--fs-nano); }.micro-control small { font-size: var(--fs-nano); }
  .orbit { min-height: 60px; }.orbit-list button, .logbook-empty { font-size: var(--fs-nano); }.orbit-note { font-size: var(--fs-nano); }
  .audio-fader-wrap { min-height: 57px; }.audio-fader { width: 72px; margin: 0 -25px; }.fader-scale { font-size: var(--fs-nano); }.mute-switch > span { font-size: var(--fs-nano); }.mute-switch small { font-size: var(--fs-nano); }
}

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

/* Interactive controls are pinned to the approved cockpit plate's own coordinates. */
.control-console {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: none;
}
.control-console::before { display: none; }
.console-body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(102svh * 1.776833);
  height: 102svh;
  min-height: 0;
  padding: 0;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.console-bank { display: contents; }
.bank-heading, .console-insignia, .console-lip, .console-lower-edge { display: none !important; }
.console-target, .hotspot-label, .ambience-label, .volume-caption, #orbit { position: absolute; }
.console-target { pointer-events: auto; }
.search-form {
  top: 62.1%; left: 6.2%; width: 11.6%; height: 4.2%;
  display: block; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.search-form .search-label { display: none; }
.search-form input {
  width: 100%; height: 100%; padding: 0 10px;
  border: 1px solid rgba(92, 212, 233, .72); border-radius: 1px;
  color: #d9f7f8; background: linear-gradient(180deg, rgba(2, 18, 24, .9), rgba(1, 9, 15, .94));
  box-shadow: inset 0 0 14px rgba(44, 185, 214, .13), 0 0 8px rgba(59, 195, 225, .22);
  font: var(--fs-body)/1 var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.search-form input::placeholder { color: #84b8c1; opacity: .9; }
.search-form.logbook-open { visibility: hidden; }
.engage-lever {
  top: 68.6%; left: 23.8%; width: 2.6%; height: 9.3%;
  display: block; margin: 0; padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  transform: none; filter: none;
}
.engage-lever:hover { filter: none; }
.engage-lever .lever-light {
  top: 2%; left: 50%; width: 8px; height: 8px; transform: translateX(-50%);
  border-radius: 50%; background: #79552a; box-shadow: 0 0 2px rgba(255, 175, 70, .35);
}
.engage-lever .lever-base {
  top: 69%; left: 50%; width: 82%; height: 19%; transform: translateX(-50%);
  border: 1px solid rgba(178, 183, 168, .7); border-radius: 2px;
  background: linear-gradient(180deg, #68706b, #1a2225 35%, #05090c);
  box-shadow: inset 0 1px rgba(247, 241, 212, .28), 0 2px 4px #020405;
}
.engage-lever .lever-grip {
  top: 5%; left: 50%; width: 20%; height: 68%;
  border: 1px solid rgba(192, 197, 178, .68); border-radius: 3px;
  background: linear-gradient(90deg, #151b1d, #8c9185 30%, #333b3b 58%, #101517);
  box-shadow: 0 1px 4px #020405; transform: translateX(-50%) rotate(-5deg); transform-origin: 50% 92%;
  transition: transform .22s cubic-bezier(.2,.72,.18,1), filter .15s ease;
}
.engage-lever .lever-light, .engage-lever .lever-grip, .engage-lever .lever-base { position: absolute; }
.engage-lever:hover .lever-grip { transform: translateX(-50%) rotate(-9deg); }
.engage-lever:active .lever-grip, .engage-lever.engaged .lever-grip { transform: translateX(-50%) rotate(18deg) translateY(3px); filter: brightness(1.35); }
.engage-lever:active .lever-light, .engage-lever.engaged .lever-light { background: #ffc36a; box-shadow: 0 0 12px #ffb23f; }
.engage-lever:focus-visible { outline: 2px solid #f5c771; outline-offset: 3px; }
.hotspot-label {
  left: 50%; top: calc(100% + 5px); z-index: 2;
  width: max-content; max-width: 132px; color: #ffe0a0;
  font: 600 var(--fs-h3)/1.08 var(--mono); letter-spacing: var(--ls-body); text-align: center;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .96);
  pointer-events: none; transform: translateX(-50%);
}
.scan-label { top: 78.2%; left: 25.2%; transform: none; }
.physical-key {
  display: block; min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 2px; color: transparent; background: transparent;
  box-shadow: none; appearance: none; transition: transform .1s ease, filter .12s ease;
}
.physical-key::after {
  position: absolute; inset: 0; content: ''; border: 1px solid transparent; border-radius: 2px;
  background: transparent; box-shadow: none; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  pointer-events: none;
}
.physical-key:hover::after, .physical-key:focus-visible::after {
  border-color: rgba(255, 216, 135, .42); background: rgba(255, 189, 76, .12);
  box-shadow: 0 0 9px rgba(255, 177, 56, .26);
}
.physical-key:active { transform: translateY(2px) scale(.96); filter: brightness(1.25); }
.physical-key:active::after { background: rgba(255, 195, 96, .28); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 11px rgba(255, 175, 56, .34); }
.physical-key:disabled { cursor: not-allowed; opacity: .52; }
.physical-key:disabled .hotspot-label { color: #b6a982; }
.drift-key { top: 75.3%; left: 16.4%; width: 2.7%; height: 2.5%; }
.drift-key .hotspot-label { top: calc(100% + 4px); width: 88px; }
.connect-key { top: 77.7%; left: 27.2%; width: 2.6%; height: 2.4%; }
.connect-key .hotspot-label { top: calc(100% + 4px); width: 106px; }
.return-key { top: 77.7%; left: 33.1%; width: 2.6%; height: 2.4%; }
.return-key .hotspot-label { top: calc(100% + 4px); width: 60px; }
.storage-control { top: 76%; left: 80.8%; width: 2.5%; height: 2.6%; }
.storage-control .hotspot-label { top: calc(100% + 4px); width: 66px; }
.logbook-control { top: 76%; left: 84%; width: 2.5%; height: 2.6%; }
.logbook-control .hotspot-label { top: -52px; width: 76px; }
.atlas-control { top: 76%; left: 87.2%; width: 2.5%; height: 2.6%; }
.atlas-control .hotspot-label { top: calc(100% + 4px); width: 50px; }
.ambience-label {
  top: 69.1%; left: 59.2%; width: 7%; color: #efcf8d;
  font: 600 var(--fs-body)/1.1 var(--mono); letter-spacing: var(--ls-label);
  text-shadow: 0 1px 4px #000, 0 0 7px #000; pointer-events: none; font-stretch: var(--stretch-instrument); }
.audio-fader {
  top: 66.6%; left: 71.3%; width: 30px; height: 13.2%;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  appearance: none; -webkit-appearance: none; writing-mode: vertical-lr; direction: rtl;
  pointer-events: auto; touch-action: none; cursor: ns-resize; accent-color: #70d3df;
}
.audio-fader::-webkit-slider-runnable-track { width: 100%; background: transparent; border: 0; }
.audio-fader::-moz-range-track { width: 100%; background: transparent; border: 0; }
.audio-fader::-webkit-slider-thumb {
  width: 29px; height: 15px; border: 1px solid #a6b5b2; border-radius: 2px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(180deg, #c0c5b5, #505958 28%, #20282a 58%, #080d10);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 2px 5px #020405, 0 0 5px rgba(100,205,220,.3);
}
.audio-fader::-moz-range-thumb {
  width: 27px; height: 13px; border: 1px solid #a6b5b2; border-radius: 2px;
  background: linear-gradient(180deg, #c0c5b5, #505958 28%, #20282a 58%, #080d10);
  box-shadow: inset 0 1px rgba(255,255,255,.38), 0 2px 5px #020405, 0 0 5px rgba(100,205,220,.3);
}
.volume-caption { top: 80.7%; left: 70.1%; width: 7%; color: #e6d39c; font: 600 var(--fs-body)/1.1 var(--mono); text-align: center; text-shadow: 0 1px 4px #000; pointer-events: none; }
.mute-switch {
  top: 72.4%; left: 59.9%; width: 2.5%; height: 3.2%;
  display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; appearance: none;
}
.mute-switch > i {
  position: absolute; top: 4px; left: 50%; width: 8px; height: 8px; border: 1px solid rgba(240,205,140,.8);
  border-radius: 50%; background: #536057; box-shadow: inset 0 1px 2px #111, 0 0 2px #000;
  transform: translateX(-50%); transition: background .12s ease, box-shadow .12s ease;
}
.mute-switch[aria-pressed="true"] > i { background: #ff735c; box-shadow: 0 0 8px rgba(255, 85, 60, .75); }
.mute-switch[aria-pressed="false"] > i { background: #9ac681; box-shadow: 0 0 7px rgba(154, 198, 129, .58); }
.mute-switch .hotspot-label { top: calc(100% + 3px); width: 48px; color: #eddda9; }
.mute-switch:focus-visible { outline: 2px solid #f5c771; outline-offset: 3px; }
#orbit {
  top: 60.4%; left: 5.8%; width: 12.3%; height: 15.4%; z-index: 5;
  display: none; margin: 0; padding: 7px 8px; overflow: auto;
  border: 1px solid rgba(102, 208, 222, .62); border-radius: 1px;
  color: #c4f0f2; background: rgba(2, 13, 19, .94);
  box-shadow: inset 0 0 13px rgba(64, 190, 209, .15), 0 0 8px rgba(63, 185, 207, .22);
  pointer-events: auto; scrollbar-color: rgba(107, 191, 203, .55) transparent;
}
#orbit.open { display: block; }
.logbook-empty { margin: 3px 0 6px; color: #9dc4c7; font: var(--fs-small)/1.3 var(--mono); }
.orbit-list { display: flex; flex-direction: column; gap: 3px; }
.orbit-list button {
  min-height: 24px; padding: 3px 4px; border: 0; border-left: 2px solid rgba(100, 206, 218, .5);
  color: #d8f1ec; background: rgba(41, 119, 134, .16); text-align: left;
  font: var(--fs-body)/1.2 var(--mono); cursor: pointer;
}
.orbit-list button.current { color: #ffd28a; border-left-color: #f0b451; }
.orbit-list button:hover, .orbit-list button:focus-visible { background: rgba(72, 173, 187, .3); }

@media (max-width: 760px) {
  .control-console { position: absolute; inset: 0; overflow: visible; }
  .console-body { top: 0; left: 0; width: 100vw; height: 56.3vw; transform: none; }
  .search-form { top: 62.1%; left: 6.2%; width: 11.6%; height: 4.2%; }
  .search-form input { padding: 0 4px; font-size: var(--fs-body); }
  .hotspot-label, .ambience-label, .volume-caption { font-size: var(--fs-body); }
  .audio-fader { width: 4.5vw; }
  .audio-fader::-webkit-slider-thumb { width: 4.5vw; height: 2.2vw; }
  .audio-fader::-moz-range-thumb { width: 4.3vw; height: 2vw; }
  #orbit { padding: 3px; }
  .logbook-empty, .orbit-list button { font-size: var(--fs-body); }
}

/* Cockpit refinement: keep the approved cabin plate intact and simplify its live controls. */
body {
  min-height: 0;
  overflow: hidden;
}
#app {
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.cockpit-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background-position: center center;
  background-size: contain;
}
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.windshield-topline, .windshield-bottomline { display: none; }
.home { width: min(380px, 70%); }
.home .eyebrow, .home-hint { display: none; }
.home h1 { font-size: var(--fs-h2); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.trace-back { display: none !important; }
.trace-ui { top: 10%; }
.trace-ui h2 { font-size: var(--fs-h2); }
.trace-fields label span { font-size: var(--fs-body); }
.trace-fields input { font-size: var(--fs-body); }
.trace-button { min-height: 40px; font-size: var(--fs-body); }

.flight-instrument { top: 21%; width: clamp(175px, 15vw, 250px); }
.local-instrument { left: 2.7%; }
.anomaly-instrument { right: 2.7%; }
.flight-instrument h2 { margin: 0 0 11px; color: #f0e4c7; font: 600 var(--fs-h3)/1.2 var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.sensor-grid { width: 90px; height: 48px; margin: 8px 0 10px; }
.signal-empty { font-size: var(--fs-body); }
.signal-empty small { display: none; }
.signal-row { min-height: 38px; }
.signal-row b { font-size: var(--fs-body); }
.signal-row small { font-size: var(--fs-small); }
.anomaly-scope { width: 58px; height: 58px; margin: 7px 0; }
.anomaly-tag, .anomaly-readout p { font-size: var(--fs-body); }
.skyy-berth {
  right: 2%;
  bottom: 6.5%;
  width: clamp(94px, 7vw, 128px);
  height: clamp(70px, 9vh, 92px);
}
.skyy-copy { top: 8px; left: 9px; }
.skyy-copy strong { font-size: var(--fs-h3); }
.skyy-copy small, .skyy-status { display: none; }
.berth-label { font-size: var(--fs-micro); }

.control-console {
  inset: 48% 0 0;
  overflow: visible;
}
.console-body {
  position: absolute;
  inset: 33% 12% 23%;
  grid-template-columns: 1.08fr 1.18fr 1.2fr .62fr;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(9px, .9vw, 16px);
  min-height: 0;
  padding: 0;
}
.console-bank {
  display: flex;
  flex-direction: column;
  padding: 11px 12px 10px;
  overflow: hidden;
  border: 1px solid rgba(171, 181, 174, .35);
  background: linear-gradient(160deg, rgba(7, 12, 15, .88), rgba(5, 9, 12, .8));
  box-shadow: inset 0 1px rgba(242, 234, 210, .12), inset 0 -2px rgba(0, 0, 0, .56), 0 4px 12px rgba(0, 0, 0, .38);
}
.console-bank::before { inset: 4px; border-color: rgba(218, 229, 224, .08); }
.bank-heading {
  flex: 0 0 auto;
  gap: 8px;
  padding: 1px 0 8px;
  color: #e9c987;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.bank-heading span, .bank-heading i { display: none; }
.bank-heading b { overflow: visible; text-overflow: clip; }
.acquisition-row { height: calc(100% - 27px); gap: 12px; align-items: stretch; }
.search-form { justify-content: center; }
.search-label { margin-bottom: 8px; color: #c6c9ba; font-size: var(--fs-body); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.search-entry { height: 46px; padding: 0 11px; border-color: rgba(105, 198, 210, .54); }
.search-entry input { font-size: var(--fs-body); }
.search-entry input::placeholder { color: #a8b3b0; opacity: 1; }
.channel-note, .entry-frequency, .search-entry > span:first-child { display: none; }
.engage-lever {
  width: 78px;
  height: clamp(112px, 14vh, 138px);
  flex-basis: 78px;
  margin-top: 0;
  padding-bottom: 7px;
  color: #fff0cb;
  box-shadow: inset 1px 0 rgba(250, 255, 249, .13), inset -2px 0 rgba(0, 0, 0, .7), 0 5px 9px #020405;
}
.lever-base { top: 31px; width: 27px; height: 37px; }
.lever-grip { top: 23px; width: 16px; height: 38px; }
.engage-lever b { font-size: var(--fs-h3); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.engage-lever small { position: relative; z-index: 4; margin-top: 3px; color: #e0c68d; font: var(--fs-body)/1.2 var(--mono); white-space: nowrap; }
.engage-lever:disabled { opacity: .55; }

.navigation-bank { display: flex; flex-direction: column; }
.control-key-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(36px, 1fr));
  gap: 6px;
  flex: 1;
  min-height: 0;
  margin-top: 9px;
}
.console-key {
  display: flex;
  width: 100%;
  min-height: 36px;
  height: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 12px;
  border-color: #68716d;
  background: linear-gradient(180deg, #49504c, #282e2e 35%, #13191b);
}
.console-key b {
  overflow: visible;
  color: #f1ecdc;
  font: 600 var(--fs-h3)/1.15 var(--mono);
  letter-spacing: 0;
  text-overflow: clip;
  white-space: normal;
}
.console-key small { display: none; }
.key-lamp { top: 50%; right: 10px; width: 7px; height: 7px; transform: translateY(-50%); }
.console-key:focus-visible, .micro-control:focus-visible, .engage-lever:focus-visible, .mute-switch:focus-visible, .orbit-list button:focus-visible {
  outline: 2px solid #f0c46d;
  outline-offset: 3px;
}
.console-key.return-key { opacity: 1; pointer-events: auto; }
.console-key:disabled { opacity: .5; cursor: not-allowed; }

/* The cabin image carries the central engraved insignia. Do not duplicate it with an HTML logo. */
.console-insignia { display: none !important; }
.console-archive-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
}
.micro-control {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  border-color: rgba(193, 174, 127, .36);
  color: #eadbb8;
  font: 600 var(--fs-h3)/1.1 var(--mono);
  letter-spacing: 0;
  white-space: normal;
}
.micro-control b { font: inherit; }
.micro-control > span { display: none; }
.micro-control small { color: #c9c5b7; font: var(--fs-body)/1.1 var(--mono); }
.micro-control:disabled { opacity: .52; cursor: not-allowed; filter: saturate(.55); }
.micro-control.logbook-control { color: #f0cf86; }
.micro-control.logbook-control .control-icon { display: none; }
.orbit-bank { display: flex; flex-direction: column; }
.orbit { flex: 1; min-height: 34px; margin-top: 8px; }
.logbook-empty { margin: 8px 3px; color: #d7d3c5; font-size: var(--fs-body); letter-spacing: var(--ls-body); }
.orbit-list { gap: 4px; }
.orbit-list button { min-height: 26px; padding: 5px 8px; font-size: var(--fs-body); }
.orbit-note { display: none; }

.audio-bank { display: flex; flex-direction: column; align-items: stretch; }
.audio-bank .bank-heading { width: 100%; }
.volume-label { margin: 8px 0 0; color: #d5c292; font: var(--fs-body)/1.2 var(--mono); text-align: center; }
.audio-fader-wrap { min-height: 0; flex: 1; gap: 10px; padding: 0; }
.fader-scale { color: #d3c8a9; font-size: var(--fs-small); }
.audio-fader { width: 92px; height: 16px; margin: 0 -33px; }
.audio-fader:disabled { opacity: .48; cursor: not-allowed; }
.mute-switch { min-height: 42px; justify-content: center; margin-top: 0; padding: 6px 8px; }
.mute-switch > i { width: 24px; height: 14px; }
.mute-switch > i::after { width: 8px; height: 8px; }
.mute-switch > span { font-size: var(--fs-h3); }
.mute-switch small { display: none; }
.mute-switch:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 1100px) and (min-width: 761px) {
  .flight-instrument { top: 20%; width: clamp(165px, 18vw, 205px); }
  .local-instrument { left: 2%; }
  .anomaly-instrument { right: 2%; }
  .flight-instrument h2 { font-size: var(--fs-h3); }
  .control-console { inset: 47% 0 0; }
  .console-body {
    inset: 15% 10% 11%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(104px, 1fr));
    gap: 8px;
  }
  .console-bank { padding: 8px; }
  .bank-heading { font-size: var(--fs-body); padding-bottom: 5px; }
  .acquisition-row { height: calc(100% - 22px); gap: 7px; }
  .engage-lever { width: 64px; height: 78px; flex-basis: 64px; }
  .lever-base { top: 23px; width: 23px; height: 28px; }
  .lever-grip { top: 16px; width: 14px; height: 30px; }
  .engage-lever b { font-size: var(--fs-body); }.engage-lever small { font-size: var(--fs-micro); }
  .search-entry { height: 38px; }.search-entry input { font-size: var(--fs-body); }
  .control-key-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 5px; margin-top: 7px; }
  .console-key { min-height: 56px; flex-direction: column; justify-content: center; padding: 5px; text-align: center; }
  .console-key b { font-size: var(--fs-body); }
  .key-lamp { top: 6px; right: 6px; width: 6px; height: 6px; transform: none; }
  .console-archive-row { gap: 5px; margin-top: 7px; }
  .micro-control { min-height: 40px; font-size: var(--fs-body); }
  .micro-control small { font-size: var(--fs-micro); }
  .orbit { min-height: 24px; margin-top: 4px; }
  .logbook-empty { margin: 4px 2px; font-size: var(--fs-small); }
  .audio-bank { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; }
  .audio-bank .bank-heading, .volume-label { grid-column: 1 / -1; }
  .volume-label { margin-top: 4px; }
  .audio-fader-wrap { grid-row: 3 / 5; min-height: 75px; }
  .audio-fader { width: 84px; margin: 0 -29px; }
  .fader-scale { font-size: var(--fs-micro); }
  .mute-switch { min-height: 35px; align-self: center; padding: 4px; }
  .mute-switch > span { font-size: var(--fs-body); }
}

@media (max-width: 760px) {
  .cockpit-shell { background-position: center center; background-size: contain; }
  .control-console { position: relative; inset: auto; min-height: 0; height: auto; margin-top: 56.3vw; padding: 14px 10px 18px; }
  .console-body {
    position: relative;
    inset: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 142px 184px 158px 150px;
    gap: 8px;
    min-height: 0;
    padding: 0;
  }
  .console-bank { padding: 9px; border-color: rgba(151, 165, 161, .32); }
  .bank-heading { font-size: var(--fs-body); padding-bottom: 6px; }
  .acquisition-row { height: calc(100% - 24px); gap: 8px; }
  .search-label { font-size: var(--fs-body); }.search-entry { height: 38px; }.search-entry input { font-size: var(--fs-body); }
  .engage-lever { width: 58px; height: 92px; flex-basis: 58px; }
  .lever-base { top: 28px; width: 23px; height: 30px; }.lever-grip { top: 21px; width: 15px; height: 30px; }
  .engage-lever b { font-size: var(--fs-body); }.engage-lever small { font-size: var(--fs-micro); }
  .control-key-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 5px; margin-top: 7px; }
  .console-key { min-height: 70px; flex-direction: column; justify-content: center; padding: 5px 4px; text-align: center; }
  .console-key b { font-size: var(--fs-body); }
  .key-lamp { top: 6px; right: 6px; width: 6px; height: 6px; transform: none; }
  .console-archive-row { gap: 5px; margin-top: 7px; }
  .micro-control { min-height: 48px; font-size: var(--fs-body); }.micro-control small { font-size: var(--fs-micro); }
  .orbit { min-height: 37px; margin-top: 5px; }.logbook-empty { margin: 6px 2px; font-size: var(--fs-small); }
  .audio-bank { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .audio-bank .bank-heading, .volume-label { grid-column: 1 / -1; }
  .volume-label { margin-top: 4px; }
  .audio-fader-wrap { grid-row: 3 / 5; min-height: 74px; }
  .audio-fader { width: 84px; margin: 0 -29px; }
  .mute-switch { min-height: 36px; align-self: center; }
  .mute-switch > span { font-size: var(--fs-body); }
  .skyy-berth { right: 2%; bottom: 4%; width: 74px; height: 56px; }
  .skyy-copy { top: 6px; left: 7px; }.skyy-copy strong { font-size: var(--fs-nano); }.berth-label { display: none; }
  .flight-instrument { top: 29%; width: 18%; }
  .flight-instrument h2 { font-size: var(--fs-nano); }
  .signal-empty, .signal-row b, .signal-row small, .anomaly-tag, .anomaly-readout p { font-size: var(--fs-nano); }
  .sensor-grid { width: 44px; height: 28px; }.anomaly-scope { width: 40px; height: 40px; }
}

/* Transparent controls share the exact coordinate frame of the cockpit PNG. */
.control-console {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: none;
}
.console-body.cockpit-control-layer {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vw;
  max-width: 177.3885vh;
  max-width: 177.3885svh;
  max-width: 177.3885dvh;
  aspect-ratio: 1670 / 942;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.console-target,
#orbit {
  position: absolute;
  pointer-events: auto;
}

/* The printed prompt remains visible; typing begins in its blank field area. */
.search-form {
  top: 83.7%;
  left: 49.55%;
  width: 13.8%;
  height: 3.9%;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.search-form input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #e5f5f5;
  caret-color: #80e5f1;
  background: transparent;
  box-shadow: none;
  font: var(--fs-body)/1 var(--mono);
  letter-spacing: var(--ls-body);
}
.search-form input:focus-visible {
  outline: 1px solid rgba(119, 210, 221, .8);
  outline-offset: 1px;
}
.coordinate-submit {
  top: 85.5%;
  left: 65.1%;
  width: 3.45%;
  height: 3.75%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  clip-path: polygon(8% 0, 82% 0, 100% 50%, 82% 100%, 8% 100%, 0 72%, 0 28%);
  -webkit-tap-highlight-color: transparent;
}

/* These buttons are hit areas over the artwork's printed controls. */
.physical-key,
.engage-lever,
.mute-switch {
  margin: 0;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease;
}
.physical-key {
  width: 2.7%;
  height: 3.15%;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.drift-key { top: 92.3%; left: 36%; }
.connect-key { top: 92.3%; left: 45.1%; }
.storage-control { top: 92.3%; left: 54.5%; }
.logbook-control { top: 92.3%; left: 63.8%; }

/* The previous RETURN action stays available in the upper-left trim. */
.return-key {
  top: 6.5%;
  left: 4.5%;
  width: 3.5%;
  height: 5%;
  border-radius: 4px;
}

/* Atlas remains unavailable; its hit area follows the right display. */
.atlas-control {
  top: 90.3%;
  left: 85.8%;
  width: 9.5%;
  height: 9%;
  transform: translate(-50%, -50%);
}

/* The source image already contains this lever, so no CSS lever is drawn. */
.engage-lever {
  top: 89.3%;
  left: 75.6%;
  width: 7.7%;
  height: 7.2%;
  min-width: 0;
  min-height: 0;
  display: block;
  border-radius: 0;
  transform: translate(-50%, -50%);
  clip-path: polygon(4% 0, 93% 0, 100% 14%, 95% 39%, 61% 39%, 58% 84%, 53% 100%, 43% 100%, 38% 84%, 38% 39%, 5% 39%, 0 16%);
}
.engage-lever::before,
.engage-lever .lever-light,
.engage-lever .lever-grip,
.engage-lever .lever-base,
.mute-switch > i {
  display: none;
}

/* Range track sits on the engraved horizontal volume scale. */
.audio-fader {
  --volume-fill: 62%;
  top: 93.2%;
  left: 25.25%;
  width: 4.6%;
  height: 2.4%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  writing-mode: horizontal-tb;
  direction: ltr;
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  touch-action: pan-x;
}
.audio-fader::-webkit-slider-runnable-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(to right, rgba(213, 166, 79, .95) 0, rgba(213, 166, 79, .95) var(--volume-fill, 62%), transparent var(--volume-fill, 62%) 100%),
    #62686b;
  box-shadow: 0 0 1px 3px rgba(4, 7, 9, .97), inset 0 1px 1px rgba(0, 0, 0, .85);
}
.audio-fader::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: #62686b;
  box-shadow: 0 0 1px 3px rgba(4, 7, 9, .97), inset 0 1px 1px rgba(0, 0, 0, .85);
}
.audio-fader::-moz-range-progress {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(213, 166, 79, .95);
}
.audio-fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(7px, .48vw, 9px);
  height: clamp(7px, .48vw, 9px);
  border: 1px solid #f1ce81;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f7d98f 0 16%, #d9a640 58%, #a6742c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  cursor: ew-resize;
  transition: filter .12s ease;
}
.audio-fader::-moz-range-thumb {
  width: clamp(7px, .48vw, 9px);
  height: clamp(7px, .48vw, 9px);
  border: 1px solid #f1ce81;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f7d98f 0 16%, #d9a640 58%, #a6742c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  cursor: ew-resize;
  transition: filter .12s ease;
}
.audio-fader::-moz-focus-outer { border: 0; }
.audio-fader:focus-visible { outline: none; outline-offset: 0; }

/* The mute target covers the speaker glyph; its state is exposed accessibly. */
.mute-switch {
  top: 93.2%;
  left: 22%;
  width: 1.4%;
  height: 2.2%;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Glow stays inside each printed control's silhouette; no outline or badge is drawn. */
.physical-key::after { display: none; }
#coordinate-submit::after,
.drift-key::after,
.connect-key::after,
.storage-control::after,
.logbook-control::after,
.engage-lever::after,
.mute-switch::after {
  position: absolute;
  inset: 0;
  content: '';
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .14s ease, filter .14s ease, transform .14s ease;
  pointer-events: none;
}
#coordinate-submit::after {
  clip-path: polygon(8% 0, 82% 0, 100% 50%, 82% 100%, 8% 100%, 0 72%, 0 28%);
  background: radial-gradient(ellipse at 52% 50%, rgba(75, 206, 255, .42), rgba(50, 172, 245, .19) 48%, transparent 80%);
}
.drift-key::after, .connect-key::after, .storage-control::after, .logbook-control::after {
  inset: 2px 2px 4px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 214, 143, .36) 0 20%, rgba(255, 169, 74, .2) 48%, transparent 78%);
}
.engage-lever::after {
  clip-path: polygon(4% 0, 93% 0, 100% 14%, 95% 39%, 61% 39%, 58% 84%, 53% 100%, 43% 100%, 38% 84%, 38% 39%, 5% 39%, 0 16%);
  background: radial-gradient(ellipse at 50% 18%, rgba(255, 213, 147, .32) 0 16%, rgba(255, 171, 82, .18) 45%, transparent 78%);
}
.engage-lever::before {
  position: absolute;
  inset: 0;
  display: block;
  content: '';
  border: 0;
  clip-path: polygon(4% 0, 93% 0, 100% 14%, 95% 39%, 61% 39%, 58% 84%, 53% 100%, 43% 100%, 38% 84%, 38% 39%, 5% 39%, 0 16%);
  background: radial-gradient(ellipse at 50% 48%, rgba(5, 12, 18, .28), transparent 76%);
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity .14s ease;
  pointer-events: none;
}
.mute-switch::after {
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(104, 224, 255, .34), rgba(55, 168, 229, .15) 50%, transparent 80%);
}
#coordinate-submit:hover::after,
.drift-key:hover::after, .connect-key:hover::after, .storage-control:hover::after, .logbook-control:hover::after,
.engage-lever:hover::after, .mute-switch:hover::after,
#coordinate-submit:focus-visible::after,
.drift-key:focus-visible::after, .connect-key:focus-visible::after, .storage-control:focus-visible::after, .logbook-control:focus-visible::after,
.engage-lever:focus-visible::after, .mute-switch:focus-visible::after,
#coordinate-submit:active::after,
.drift-key:active::after, .connect-key:active::after, .storage-control:active::after, .logbook-control:active::after,
.engage-lever:active::after, .engage-lever.engaged::after, .mute-switch:active::after {
  opacity: .78;
}
#coordinate-submit:focus-visible::after,
.drift-key:focus-visible::after, .connect-key:focus-visible::after, .storage-control:focus-visible::after, .logbook-control:focus-visible::after,
.engage-lever:focus-visible::after, .mute-switch:focus-visible::after {
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(94, 208, 255, .8));
}
.drift-key:active, .connect-key:active, .storage-control:active, .logbook-control:active,
.mute-switch:active, #coordinate-submit:active {
  transform: translate(-50%, -50%) translateY(1px) scale(.98);
}
.drift-key:active::after, .connect-key:active::after, .storage-control:active::after, .logbook-control:active::after,
.mute-switch:active::after {
  background-image: radial-gradient(ellipse at 50% 38%, rgba(255, 239, 204, .3) 0 14%, rgba(244, 157, 60, .2) 45%, rgba(0, 0, 0, .2) 77%, transparent 100%);
  filter: drop-shadow(0 0 3px rgba(255, 189, 104, .55));
}
#coordinate-submit:active::after {
  background-image: radial-gradient(ellipse at 52% 42%, rgba(166, 239, 255, .44), rgba(50, 172, 245, .19) 48%, transparent 80%);
  filter: drop-shadow(0 0 4px rgba(67, 193, 255, .62));
}
.engage-lever:active::after, .engage-lever.engaged::after {
  opacity: .94;
  background-image: radial-gradient(ellipse at 50% 16%, rgba(255, 236, 196, .34) 0 14%, rgba(244, 165, 77, .23) 43%, rgba(0, 0, 0, .18) 80%);
  filter: drop-shadow(0 0 3px rgba(255, 179, 93, .55));
}
.engage-lever:active::before, .engage-lever.engaged::before { opacity: .75; }
.mute-switch[aria-pressed="true"]::after {
  opacity: .78;
  background-image: radial-gradient(ellipse at center, rgba(255, 197, 117, .36), rgba(228, 139, 65, .18) 54%, transparent 82%);
}
.physical-key:disabled { cursor: not-allowed; }
.physical-key:focus-visible, .engage-lever:focus-visible, .mute-switch:focus-visible, #coordinate-submit:focus-visible {
  outline: none;
  outline-offset: 0;
}
.engage-lever:active { transform: translate(-50%, -50%); }
#volume-fader:focus-visible { outline: none; outline-offset: 0; }
.audio-fader:focus-visible::-webkit-slider-thumb,
.audio-fader:active::-webkit-slider-thumb,
.audio-fader:focus-visible::-moz-range-thumb,
.audio-fader:active::-moz-range-thumb {
  filter: brightness(1.12);
}

/* The Logbook uses the small left console display as its screen. */
#orbit {
  top: 86.4%;
  left: 8.1%;
  width: 13.2%;
  height: 9%;
  z-index: 12;
  display: none;
  margin: 0;
  padding: 2px 4px;
  overflow: auto;
  border: 0;
  border-radius: 2px;
  color: #c4f0f2;
  background: rgba(2, 13, 19, .93);
  box-shadow: inset 0 0 12px rgba(64, 190, 209, .18);
  scrollbar-color: rgba(107, 191, 203, .55) transparent;
}
#orbit.open { display: block; }
.orbit-list { display: flex; flex-direction: column; gap: 2px; }
.orbit-list button {
  min-height: 18px;
  padding: 2px 4px;
  border: 0;
  border-left: 2px solid rgba(100, 206, 218, .5);
  color: #d8f1ec;
  background: rgba(41, 119, 134, .16);
  text-align: left;
  font: var(--fs-micro)/1.2 var(--mono);
}

/* ARCHIVE is clickable, with a notice while storage remains unimplemented. */
.archive-notice[popover] {
  position: fixed;
  inset: 14px auto auto 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(223, 168, 88, .65);
  border-radius: 3px;
  color: var(--ink);
  background: rgba(5, 12, 17, .96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
  font: var(--fs-body)/1.4 var(--mono);
  text-align: center;
  pointer-events: auto;
}

/* Topic entry uses the artwork's printed coordinate field as a real input. */
.search-form {
  top: 83.55%;
  left: 33.45%;
  width: 29.75%;
  height: 4.2%;
  background: linear-gradient(180deg, #06131b 0%, #020b11 48%, #030d13 100%);
  border-radius: 4px 0 0 4px;
}
.search-form input {
  display: block;
  padding: 0 4.5%;
  color: #e4f5ff;
  text-align: left;
  text-indent: 0;
  background: transparent;
  font: clamp(7px, .91vw, var(--fs-body))/1 var(--mono);   /* sits in the painted console slot: scales with it, capped at the token */
  letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.search-form input::placeholder {
  color: #e6d4b6;
  opacity: .96;
  font-style: italic;
  letter-spacing: var(--ls-caps);
  white-space: nowrap; font-stretch: var(--stretch-instrument); }
.search-form input:focus::placeholder {
  color: transparent;
  opacity: 0;
}

/* Render topic results as a luminous network of small blue signal nodes. */
.signal-link {
  stroke: rgba(50, 164, 255, .68);
  stroke-width: .72;
  filter: drop-shadow(0 0 3px rgba(32, 151, 255, .4));
}
.signal-link.back-link {
  stroke: rgba(55, 133, 221, .3);
  stroke-width: .48;
  filter: drop-shadow(0 0 2px rgba(40, 130, 232, .24));
}
.link-node {
  fill: #b7f3ff;
  filter: drop-shadow(0 0 4px rgba(53, 173, 255, .9));
}
.topic-orb, .main-orb {
  border: 0;
  background: radial-gradient(circle, #efffff 0 10%, #8cecff 22%, #39adff 48%, #0877e8 70%, rgba(0, 73, 171, .2) 100%);
  box-shadow: 0 0 5px rgba(107, 220, 255, .88), 0 0 15px rgba(35, 151, 255, .64), 0 0 30px rgba(18, 104, 231, .27);
}
.topic-orb {
  width: clamp(6px, .58vw, 9px);
  height: clamp(6px, .58vw, 9px);
  box-shadow: 0 0 4px rgba(119, 224, 255, .9), 0 0 11px rgba(35, 151, 255, .65), 0 0 22px rgba(18, 104, 231, .25);
}
.main-orb {
  width: clamp(16px, 1.2vw, 21px);
  height: clamp(16px, 1.2vw, 21px);
}
.topic-orb::before, .topic-orb::after, .main-orb::before, .main-orb::after {
  inset: auto;
  width: 3px;
  height: 3px;
  border: 0;
  border-radius: 50%;
  background: #98eaff;
  box-shadow: 0 0 5px rgba(73, 183, 255, .95), 0 0 10px rgba(29, 126, 247, .65);
  transform: none;
}
.topic-orb::before { left: -6px; top: -4px; }
.topic-orb::after { right: -7px; bottom: -3px; width: 2px; height: 2px; opacity: .75; }
.main-orb::before { right: -8px; top: -6px; }
.main-orb::after { left: -7px; bottom: -5px; width: 2px; height: 2px; opacity: .75; }
.main-orb b { display: none; }
.cluster > .topic:nth-of-type(2) .topic-orb { width: clamp(8px, .72vw, 11px); height: clamp(8px, .72vw, 11px); }
.cluster > .topic:nth-of-type(3) .topic-orb { opacity: .78; filter: brightness(.86); }
.cluster > .topic:nth-of-type(4) .topic-orb { width: clamp(7px, .64vw, 10px); height: clamp(7px, .64vw, 10px); filter: brightness(1.16); }
.cluster > .topic:nth-of-type(5) .topic-orb { opacity: .68; }
.cluster > .topic:nth-of-type(6) .topic-orb { width: clamp(8px, .68vw, 10px); height: clamp(8px, .68vw, 10px); filter: brightness(.94); }
.topic-label, .main-label {
  border-bottom-color: rgba(80, 188, 255, .4);
  color: #c7eaff;
  background: linear-gradient(180deg, rgba(3, 13, 23, .1), rgba(3, 13, 23, .66));
}
.topic-label {
  top: calc(50% + 15px);
  max-width: min(230px, 42vw);
  font-size: var(--fs-nano);
  text-shadow: 0 1px 8px #020914, 0 0 12px rgba(34, 131, 230, .28);
}
.main-label {
  top: calc(50% + 21px);
  max-width: min(290px, 46vw);
  color: #edfbff;
  border-bottom-color: rgba(111, 211, 255, .68);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-label);
  text-shadow: 0 1px 9px #020914, 0 0 16px rgba(35, 154, 255, .58); font-stretch: var(--stretch-instrument); }
.topic-info {
  border-left-color: rgba(66, 174, 255, .62);
  color: #c4d9e9;
  background: linear-gradient(90deg, rgba(3, 12, 23, .94), rgba(3, 12, 23, .72), transparent);
}
.topic-summary { color: #c0d3e6; }
.go-deeper { color: #73cfff; }
.topic:hover .topic-label, .topic.open .topic-label, .topic:focus-within .topic-label {
  color: #f0fbff;
  border-color: rgba(102, 207, 255, .78);
}
.trace-endpoint-anchor .main-orb {
  width: clamp(15px, 1.05vw, 19px);
  height: clamp(15px, 1.05vw, 19px);
}
.trace-endpoint-anchor .main-label { top: calc(50% + 14px); font-size: var(--fs-nano); }
.trace-topic .topic-orb { width: clamp(6px, .52vw, 8px); height: clamp(6px, .52vw, 8px); }
.trace-topic .topic-label { top: calc(50% + 13px); font-size: var(--fs-nano); }

/* The lower-left signal trace lights and sweeps only while a topic scan is active. */
.console-signal-waveform {
  position: absolute;
  z-index: 1;
  top: 88.9%;
  left: 11.35%;
  width: 5.7%;
  height: 2.55%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.console-signal-waveform svg { display: block; width: 100%; height: 100%; overflow: visible; }
.console-signal-waveform .waveform-glow,
.console-signal-waveform .waveform-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.console-signal-waveform .waveform-glow { stroke: rgba(54, 207, 255, .58); stroke-width: 3px; filter: blur(1.2px); }
.console-signal-waveform .waveform-trace { stroke: #b9f8ff; stroke-width: 1.15px; stroke-dasharray: 22 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(67, 214, 255, .9)); }
.console-signal-waveform::after {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 0;
  width: 1px;
  content: '';
  opacity: 0;
  background: linear-gradient(transparent, #c2faff 22% 78%, transparent);
  box-shadow: 0 0 5px 1px rgba(69, 219, 255, .7);
}
.console-signal-waveform.is-scanning { opacity: .94; }
.console-signal-waveform.is-scanning .waveform-trace { animation: waveform-signal 1.1s linear infinite; }
.console-signal-waveform.is-scanning::after { animation: waveform-sweep 1.1s linear infinite; }
@keyframes waveform-signal { to { stroke-dashoffset: -122; } }
@keyframes waveform-sweep { 0% { left: 0; opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { left: 100%; opacity: 0; } }

/* Keep the stage prompt in the same central position without shifting the reticle. */
.home-message {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: min(460px, 72vw);
  margin: 0;
  color: rgba(168, 226, 235, .92);
  font: var(--fs-micro)/1.75 var(--mono);
  letter-spacing: var(--ls-label);
  text-align: center;
  text-shadow: 0 1px 7px rgba(0, 5, 10, .95), 0 0 12px rgba(62, 174, 198, .18);
  white-space: pre-line;
  opacity: 0;
  transform: translate(-50%, 4px); font-stretch: var(--stretch-instrument); }
.home.target-confirmed .home-message,
.home.instruction .home-message { display: block; animation: target-message-arrive .28s ease-out both; }
.home.target-confirmed h1 { color: #d8f4f5; }
.home.instruction .home-message { color: rgba(228, 196, 139, .94); }
@keyframes target-message-arrive {
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Give the printed coordinate field one soft wake pulse; focus cancels it immediately. */
.search-form { animation: coordinate-field-guidance 2.15s ease-in-out 1 both; }
.search-form:focus-within { animation: none; box-shadow: none; }
@keyframes coordinate-field-guidance {
  0%, 100% { box-shadow: none; }
  42% { box-shadow: inset 0 0 15px rgba(230, 178, 91, .2), 0 0 9px rgba(230, 178, 91, .19); }
}

/* A retrofit insert covers the printed lever assembly in the 1670x942 artwork frame. */
.initiate-console-cover {
  position: absolute;
  z-index: 20;
  top: 84.7%;
  left: 69.5%;
  width: 11.55%;
  height: 11.8%;
  clip-path: polygon(0 2%, 100% 0, 100% 88%, 10% 100%);
  border: 1px solid rgba(113, 124, 123, .8);
  background:
    radial-gradient(circle at 4% 8%, #c4a66e 0 1px, #35312a 1.6px, transparent 2.5px),
    radial-gradient(circle at 96% 90%, #c4a66e 0 1px, #35312a 1.6px, transparent 2.5px),
    linear-gradient(145deg, #596164 0%, #232a2d 9%, #101619 28%, #0b1013 68%, #353d3f 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .82), inset 0 1px rgba(255, 255, 255, .18), inset 0 -3px 5px rgba(0, 0, 0, .72);
  pointer-events: none;
}
.engage-lever {
  isolation: isolate;
  z-index: 22;
  top: 88.5%;
  left: 75.6%;
  width: 6.25%;
  height: auto;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid #c4c6bd;
  border-radius: 50%;
  color: transparent;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #e0e1d5 0%, #777e7e 10%, #252d30 23%, #51595a 40%, #171e21 63%, #080c0f 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .84), inset 0 1px 2px rgba(255, 255, 255, .64), inset 0 -4px 5px rgba(0, 0, 0, .82);
  cursor: pointer;
  transition: filter .16s ease, box-shadow .16s ease;
}
.engage-lever::before,
.engage-lever::after {
  position: absolute;
  display: block;
  content: '';
  border-radius: 50%;
  pointer-events: none;
}
.engage-lever::before {
  inset: 10%;
  border: 1px solid #30383a;
  background: linear-gradient(145deg, #9ba09a 0%, #343b3d 22%, #12181b 51%, #89908b 79%, #202729 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .86), 0 1px 2px rgba(0, 0, 0, .75);
}
.initiate-button-face {
  position: absolute;
  z-index: 1;
  inset: 17%;
  border: 1px solid rgba(101, 20, 21, .95);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, #e95a49 0%, #c72625 27%, #8e1118 64%, #4a090e 100%);
  box-shadow: inset 0 2px 2px rgba(255, 196, 174, .46), inset 0 -5px 7px rgba(31, 0, 3, .8), 0 2px 4px rgba(0, 0, 0, .7), 0 0 3px rgba(223, 40, 37, .18);
  transform: translateY(0) scale(1);
  pointer-events: none;
}
.engage-lever::after {
  z-index: 2;
  left: 29%;
  top: 22%;
  width: 29%;
  height: 11%;
  background: linear-gradient(180deg, rgba(255, 227, 206, .72), rgba(255, 186, 165, .08));
  box-shadow: 0 0 5px rgba(255, 194, 173, .24);
  opacity: .74;
  transform: rotate(-28deg);
}
.engage-lever:hover:enabled { filter: brightness(1.06); }
.engage-lever.is-ready .initiate-button-face { animation: initiate-ready-pulse 3.4s ease-in-out infinite; }
.engage-lever.is-scanning .initiate-button-face {
  animation: none;
  box-shadow: inset 0 1px 2px rgba(255, 196, 174, .38), inset 0 -5px 7px rgba(31, 0, 3, .82), 0 0 7px rgba(225, 52, 43, .38);
}
.engage-lever.is-pressing .initiate-button-face { animation: initiate-button-press 560ms both; }
.engage-lever:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(105, 215, 234, .82), 0 0 12px rgba(78, 196, 224, .34), 0 4px 8px rgba(0, 0, 0, .84), inset 0 1px 2px rgba(255, 255, 255, .64), inset 0 -4px 5px rgba(0, 0, 0, .82);
}
.engage-lever:disabled { cursor: wait; }
.engage-lever:active { transform: translate(-50%, -50%); }
.initiate-button-label {
  position: absolute;
  z-index: 24;
  top: 94.65%;
  left: 75.6%;
  color: #d8c28f;
  font: clamp(6px, .63vw, var(--fs-nano))/1 var(--mono);   /* under the painted INITIATE button: scales with it */
  letter-spacing: var(--ls-caps);
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(219, 157, 64, .3);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity .2s ease, color .2s ease;
  pointer-events: none; font-stretch: var(--stretch-instrument); }
.engage-lever.is-ready + .initiate-button-label,
.engage-lever.is-scanning + .initiate-button-label {
  color: #f0d99f;
  opacity: 1;
  visibility: visible;
}
@keyframes initiate-ready-pulse {
  0%, 100% { box-shadow: inset 0 2px 2px rgba(255, 196, 174, .42), inset 0 -5px 7px rgba(31, 0, 3, .8), 0 0 3px rgba(223, 40, 37, .18); }
  50% { box-shadow: inset 0 2px 2px rgba(255, 207, 188, .64), inset 0 -5px 7px rgba(31, 0, 3, .8), 0 0 12px rgba(238, 47, 39, .46), 0 0 20px rgba(213, 31, 29, .17); }
}
@keyframes initiate-button-press {
  0% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.35, 0, .2, 1); }
  22% { transform: translateY(4px) scale(.96); animation-timing-function: linear; }
  39% { transform: translateY(4px) scale(.96); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: translateY(0) scale(1); }
}

/* Live viewport alignment: the windshield shares the cockpit PNG's 1670x942 frame, exactly like the control layer. */
.windshield-assembly {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vw;
  max-width: 177.3885vh;
  max-width: 177.3885svh;
  max-width: 177.3885dvh;
  height: auto;
  aspect-ratio: 1670 / 942;
  transform: translate(-50%, -50%);
}
/* Bounding box of the printed central window glass: x 330-1335, y 94-738 in artwork pixels. */
.viewport-frame {
  inset: 9.979% 20.06% 21.656% 19.76%;
  /* Follows the printed glass: wide rounded top, edges slanting inward to a narrower rounded base. */
  clip-path: polygon(
    0.5% 12.58%, 1.19% 6.37%, 2.99% 2.17%, 5.97% 0.47%,
    94.03% 0.47%, 97.01% 2.17%, 98.81% 6.37%, 99.5% 12.58%,
    85.07% 91%, 84.58% 95.96%, 83.38% 98.45%, 81.59% 99.38%,
    18.41% 99.38%, 16.62% 98.45%, 15.42% 95.96%, 14.93% 91%
  );
}
/* Summaries for nodes in the lower part of the window open upward so the glass edge never clips them. */
.topic.info-above .topic-info,
.trace-topic.info-above .topic-info,
.trace-endpoint-anchor.info-above .topic-info {
  top: auto;
  bottom: calc(50% + 16px);
}

/* INITIATE push button.
   The printed lever plate (a slanted parallelogram plus the cylinder above it, x 1159-1369 / y 797-901
   in the 1670x942 artwork) is hidden by a soft-edged infill painted in the surrounding console tones,
   so no hard panel edge is visible. A compact brushed-metal bezel sits recessed in its place. */
.initiate-console-infill {
  position: absolute;
  z-index: 20;
  top: 84.395%;
  left: 68.862%;
  width: 13.293%;
  height: 11.996%;
  pointer-events: none;
  /* Feathered parallelogram-plus-cylinder outline (artwork px, relative to x 1150 / y 795). */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 222 113' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' fill='%23fff' points='9,27 52,27 53,2 184,2 194,27 219,106 30,106'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 222 113' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.8'/%3E%3C/filter%3E%3Cpolygon filter='url(%23f)' fill='%23fff' points='9,27 52,27 53,2 184,2 194,27 219,106 30,106'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  background:
    radial-gradient(ellipse at 90% -6%, rgba(64, 32, 21, .62), transparent 44%),
    radial-gradient(ellipse at 104% 104%, rgba(74, 36, 18, .62), transparent 42%),
    linear-gradient(0deg, rgba(31, 15, 9, .4), transparent 20%),
    linear-gradient(90deg, #0e1011 0%, #0e0f10 45%, #131112 72%, #171211 100%);
}

/* Bezel: spun, brushed-steel ring seated in a dark groove cut into the console.
   108px diameter in the 1670x942 artwork, centred at x 1264 / y 838 (clear of the window strip above). */
.engage-lever {
  z-index: 22;
  top: 88.96%;
  left: 75.69%;
  width: 6.467%;
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  clip-path: none;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle closest-side, transparent 0 71%, rgba(255, 255, 255, .22) 72.5%, rgba(255, 255, 255, .04) 76%, transparent 79%, transparent 95%, rgba(0, 0, 0, .55) 99%),
    radial-gradient(ellipse at 74% 12%, rgba(255, 160, 100, .18), transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .075) 0 .7px, rgba(0, 0, 0, .08) .7px 1.6px),
    conic-gradient(from 200deg, #2b2f31, #b9bcb6 8%, #44494b 20%, #8d918e 33%, #24282a 48%, #6b6f6d 62%, #d4d6cf 75%, #3c4042 88%, #2b2f31);
  box-shadow:
    0 0 0 2px #040506,
    0 0 0 3.5px rgba(70, 56, 46, .4),
    0 4px 8px rgba(0, 0, 0, .85),
    inset 0 1.5px 1px rgba(255, 255, 255, .6),
    inset 0 -1.5px 2px rgba(0, 0, 0, .8);
  transition: transform .18s ease, box-shadow .25s ease;
}
/* Retire the previous lever-era pseudo-elements and their T-shaped clipping. */
button.engage-lever::before,
button.engage-lever::after { content: none; }
.engage-lever:hover:enabled {
  filter: none;
  transform: translate(-50%, -50%) scale(1.03);
  box-shadow:
    0 0 0 2px #040506,
    0 0 0 3.5px rgba(70, 56, 46, .4),
    0 5px 10px rgba(0, 0, 0, .85),
    0 0 16px rgba(255, 55, 40, .22),
    inset 0 1.5px 1px rgba(255, 255, 255, .75),
    inset 0 -1.5px 2px rgba(0, 0, 0, .8);
}
.engage-lever:active { transform: translate(-50%, -50%); }
.engage-lever:disabled { opacity: 1; cursor: wait; }
.engage-lever:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #040506,
    0 0 0 4px rgba(105, 215, 234, .85),
    0 0 12px rgba(78, 196, 224, .35),
    0 4px 8px rgba(0, 0, 0, .85),
    inset 0 1.5px 1px rgba(255, 255, 255, .6),
    inset 0 -1.5px 2px rgba(0, 0, 0, .8);
}
.engage-lever.is-ready {
  box-shadow:
    0 0 0 2px #040506,
    0 0 0 3.5px rgba(70, 56, 46, .4),
    0 4px 8px rgba(0, 0, 0, .85),
    0 0 18px rgba(255, 45, 32, .22),
    inset 0 1.5px 1px rgba(255, 255, 255, .6),
    inset 0 -1.5px 2px rgba(0, 0, 0, .8);
}

/* Well: the recess the dome travels into. */
.initiate-button-well {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #0e0f10 0 55%, #020303 100%);
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, .95),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    0 -1px 0 rgba(0, 0, 0, .7),
    0 1px 0 rgba(255, 255, 255, .22);
  pointer-events: none;
  transition: filter .2s ease, box-shadow .35s ease;
}
.engage-lever:hover:enabled .initiate-button-well { filter: brightness(1.22) saturate(1.08); }

/* Dome: glossy deep red. Idle = unlit but still polished. */
.engage-lever .initiate-button-face {
  position: absolute;
  inset: 7%;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 62% 34% at 50% 93%, rgba(255, 110, 85, .22), transparent 72%),
    radial-gradient(circle at 50% 36%, #8c1218 0%, #5e070d 45%, #36030a 78%, #1c0105 100%);
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, .55),
    inset 0 2px 3px rgba(255, 170, 150, .18),
    0 2px 3px rgba(0, 0, 0, .9);
  filter: none;
  transform: translateY(0) scale(1);
  transition: filter .3s ease, transform .2s ease, box-shadow .35s ease;
  animation: none;
  pointer-events: none;
}
/* Curved gloss reflection across the top of the dome. */
.initiate-button-face::before {
  position: absolute;
  top: 5%;
  left: 15%;
  right: 15%;
  height: 44%;
  content: '';
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 236, 230, .16) 58%, rgba(255, 255, 255, 0) 100%);
  opacity: .4;
  transition: opacity .25s ease;
}
/* Sharp specular hotspot. */
.initiate-button-face::after {
  position: absolute;
  top: 15%;
  left: 29%;
  width: 18%;
  height: 10%;
  content: '';
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%);
  box-shadow: none;
  opacity: .55;
  transform: rotate(-22deg);
  transition: opacity .25s ease;
}
.engage-lever:hover:enabled .initiate-button-face::before { opacity: .65; }
.engage-lever:hover:enabled .initiate-button-face::after { opacity: .85; }

/* Target confirmed: luminous red with a noticeable, elegant pulse. */
.engage-lever.is-ready .initiate-button-face,
.engage-lever.is-scanning .initiate-button-face,
.engage-lever.is-pressing .initiate-button-face {
  background:
    radial-gradient(ellipse 62% 34% at 50% 93%, rgba(255, 150, 120, .35), transparent 72%),
    radial-gradient(circle at 50% 36%, #ff4a3d 0%, #e01b22 32%, #a8070f 66%, #5a020a 100%);
}
.engage-lever.is-ready .initiate-button-face { animation: od-initiate-pulse 1.8s ease-in-out infinite; }
.engage-lever.is-ready .initiate-button-face::before { opacity: .92; }
.engage-lever.is-ready .initiate-button-face::after { opacity: 1; }
.engage-lever.is-ready .initiate-button-well {
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, .95),
    inset 0 0 9px rgba(255, 45, 32, .38),
    0 -1px 0 rgba(0, 0, 0, .7),
    0 1px 0 rgba(255, 255, 255, .22);
}

/* Scanning: disabled, pulse stopped, held slightly depressed with a steady glow. */
.engage-lever.is-scanning .initiate-button-face {
  filter: brightness(1.02);
  transform: translateY(1.5px) scale(.955);
  box-shadow:
    inset 0 3px 5px rgba(20, 0, 2, .7),
    inset 0 -4px 6px rgba(20, 0, 2, .7),
    0 0 6px rgba(255, 50, 40, .5),
    0 0 14px rgba(220, 30, 25, .22);
  animation: none;
}
.engage-lever.is-scanning .initiate-button-face::before { opacity: .7; }
.engage-lever.is-scanning .initiate-button-face::after { opacity: .8; }

/* Press: the dome travels into its housing, flashes brighter, then settles. */
.engage-lever.is-pressing .initiate-button-face { animation: od-initiate-press 420ms both; }

/* INITIATE label: always visible, identical in every state. */
.initiate-button-label,
.engage-lever.is-ready + .initiate-button-label,
.engage-lever.is-scanning + .initiate-button-label,
.engage-lever:disabled + .initiate-button-label {
  top: 94.8%;
  left: 75.69%;
  color: #eadcc4;
  font: clamp(6px, .63vw, var(--fs-nano))/1 var(--mono);
  letter-spacing: var(--ls-caps);
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(219, 157, 64, .25);
  opacity: 1;
  visibility: visible;
  transition: none; font-stretch: var(--stretch-instrument); }

@keyframes od-initiate-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .5),
      inset 0 0 12px rgba(255, 90, 70, .35),
      0 0 6px rgba(255, 40, 30, .45),
      0 0 14px rgba(255, 30, 20, .2);
  }
  50% {
    filter: brightness(1.28);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .4),
      inset 0 0 16px rgba(255, 120, 95, .55),
      0 0 14px rgba(255, 60, 45, .85),
      0 0 34px rgba(255, 35, 25, .45),
      0 0 56px rgba(255, 30, 20, .18);
  }
}
@keyframes od-initiate-press {
  0% {
    transform: translateY(0) scale(1);
    filter: brightness(1.1);
    animation-timing-function: cubic-bezier(.35, 0, .2, 1);
  }
  25% {
    transform: translateY(3px) scale(.92);
    filter: brightness(1.75) saturate(1.1);
    box-shadow: inset 0 4px 7px rgba(20, 0, 2, .85), 0 0 14px rgba(255, 85, 60, .95), 0 0 32px rgba(255, 45, 30, .6);
  }
  55% {
    transform: translateY(3px) scale(.92);
    filter: brightness(1.4);
    box-shadow: inset 0 4px 7px rgba(20, 0, 2, .85), 0 0 10px rgba(255, 65, 45, .75), 0 0 24px rgba(255, 40, 30, .45);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  100% {
    transform: translateY(1.5px) scale(.955);
    filter: brightness(1.02);
    box-shadow: inset 0 3px 5px rgba(20, 0, 2, .7), inset 0 -4px 6px rgba(20, 0, 2, .7), 0 0 6px rgba(255, 50, 40, .5), 0 0 14px rgba(220, 30, 25, .22);
  }
}

/* Constellation prominence: electric blue/cyan network that reads clearly over the starfield.
   Scoped to .cluster so trace routes and all other UI are unaffected. */

/* Connecting lines: brighter, thicker, with a thin dark edge for contrast over bright sky and a restrained glow. */
.cluster .signal-link {
  stroke: rgba(118, 218, 255, .92);
  stroke-width: 2;
  opacity: 1;
  filter:
    drop-shadow(0 0 1px rgba(0, 8, 20, .9))
    drop-shadow(0 0 3px rgba(64, 186, 255, .75))
    drop-shadow(0 0 9px rgba(28, 128, 255, .32));
}
/* Travelling light: a short bright dash moving outward from the central signal. */
.cluster .signal-pulse {
  fill: none;
  stroke: rgba(226, 249, 255, .95);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: .06 1;
  stroke-dashoffset: .06;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(130, 224, 255, .95)) drop-shadow(0 0 7px rgba(50, 160, 255, .55));
  pointer-events: none;
}
.cluster .signal-link.visible + .signal-pulse {
  animation: od-signal-travel 4.2s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes od-signal-travel {
  0% { stroke-dashoffset: .06; opacity: 0; }
  8% { opacity: 1; }
  52% { opacity: 1; }
  62% { stroke-dashoffset: -1; opacity: 0; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

/* Nodes: a luminous white-cyan core inside a soft electric-blue halo. No rings or satellites. */
.cluster .topic-orb,
.cluster .main-orb {
  border: 0;
  opacity: 1;
  filter: none;
  background: radial-gradient(circle, #ffffff 0 16%, #c9f5ff 26%, #5fd4ff 46%, #1690ff 70%, rgba(10, 90, 220, .35) 100%);
}
.cluster .topic-orb::before,
.cluster .main-orb::before {
  position: absolute;
  inset: -85%;
  width: auto;
  height: auto;
  content: '';
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 190, 255, .34) 0%, rgba(40, 150, 255, .14) 42%, transparent 70%);
  box-shadow: none;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
.cluster .topic-orb::after,
.cluster .main-orb::after { content: none; }
.cluster .main-orb b { display: none; }

.cluster > .topic .topic-orb,
.cluster > .topic:nth-of-type(n) .topic-orb {
  width: clamp(11px, .86vw, 15px);
  height: clamp(11px, .86vw, 15px);
  opacity: 1;
  filter: none;
  box-shadow: 0 0 4px rgba(170, 238, 255, .95), 0 0 12px rgba(60, 185, 255, .75), 0 0 24px rgba(25, 125, 255, .35);
}
.cluster .main-orb {
  width: clamp(26px, 2vw, 36px);
  height: clamp(26px, 2vw, 36px);
  box-shadow: 0 0 7px rgba(190, 243, 255, .95), 0 0 20px rgba(70, 195, 255, .8), 0 0 42px rgba(25, 130, 255, .4);
}
.cluster .main-orb::before { inset: -70%; }
.cluster .topic:hover .topic-orb,
.cluster .topic:focus-within .topic-orb,
.cluster .topic.selected .topic-orb {
  box-shadow: 0 0 6px rgba(200, 245, 255, 1), 0 0 16px rgba(80, 200, 255, .9), 0 0 32px rgba(30, 140, 255, .5);
}

/* Labels: brighter type on a dark backing plate so they stay legible over any part of the sky. */
.cluster .topic-label,
.cluster .main-label {
  padding: 3px 8px 4px;
  border: 0;
  border-bottom: 1px solid rgba(96, 205, 255, .55);
  border-radius: 2px;
  color: #e9f8ff;
  background: rgba(2, 10, 22, .74);
  text-shadow: 0 0 8px rgba(60, 170, 255, .35);
  letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.cluster .topic-label {
  top: calc(50% + 17px);
  max-width: min(200px, 24vw);
  font-size: var(--fs-micro);
}
.cluster .topic.label-above .topic-label {
  top: auto;
  bottom: calc(50% + 15px);
}
.cluster .main-label {
  top: calc(50% + 30px);
  max-width: min(260px, 32vw);
  color: #ffffff;
  border-bottom-color: rgba(120, 220, 255, .8);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-label);
  text-shadow: 0 0 10px rgba(70, 190, 255, .5); font-stretch: var(--stretch-instrument); }
.cluster .topic:hover .topic-label,
.cluster .topic.open .topic-label,
.cluster .topic:focus-within .topic-label {
  color: #ffffff;
  border-bottom-color: rgba(140, 228, 255, .9);
}

/* Summaries sit clear of the enlarged labels. */
.cluster .topic .topic-info { top: calc(50% + 46px); }
.cluster .topic.label-above .topic-info { top: calc(50% + 18px); }
.cluster .topic.info-above .topic-info { top: auto; bottom: calc(50% + 18px); }
.cluster .main-topic .topic-info { top: calc(50% + 62px); }

@media (prefers-reduced-motion: reduce) {
  .cluster .signal-pulse { display: none; }
}

/* Constellation network: luminous filament bundles, orbital node detailing, flowing particles and holographic depth.
   Builds on the previous constellation section; scoped to .cluster. Icy blue / electric cyan / white-blue only. */

/* Holographic depth: the current network tilts gently toward the pointer (eased by the existing cluster transition). */
.cluster.current { transform: translateZ(0) scale(1) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
/* Networks the pilot has moved away from stop animating. */
.cluster.receding *, .cluster.receding *::before, .cluster.receding *::after { animation-play-state: paused !important; }

.cluster .filament { transition: opacity .3s ease; }
.cluster .filament path { fill: none; stroke-linecap: round; }

/* Soft outer glow of each bundle; draws in with the core, then breathes slowly. */
.cluster .filament-halo {
  stroke: rgba(70, 175, 255, .2);
  stroke-width: 8;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: blur(2.5px);
  transition: stroke-dashoffset 1.1s var(--ease), stroke .3s ease;
}
.cluster .filament:has(> .signal-link.visible) .filament-halo {
  stroke-dashoffset: 0;
  animation: od-filament-breathe 6.5s ease-in-out infinite alternate;
}
.cluster .filament:nth-of-type(3n) .filament-halo { animation-delay: -2.2s; }
.cluster .filament:nth-of-type(3n + 1) .filament-halo { animation-delay: -4.1s; }
@keyframes od-filament-breathe { from { opacity: .7; } to { opacity: 1; } }

/* Bright central thread (keeps the existing draw-in via .signal-link.visible). */
.cluster .filament .signal-link {
  stroke: rgba(176, 234, 255, .95);
  stroke-width: 1.35;
  opacity: 1;
  filter: drop-shadow(0 0 2px rgba(110, 210, 255, .85));
}

/* Fine offset strands, varied in weight and opacity for depth; they fade in once the core has drawn. */
.cluster .filament-strand { opacity: 0; transition: opacity .9s ease .45s, stroke-width .3s ease; }
.cluster .strand-0 { stroke: rgb(140, 214, 255); stroke-width: .55; }
.cluster .strand-1 { stroke: rgb(196, 240, 255); stroke-width: .8; }
.cluster .strand-2 { stroke: rgb(96, 192, 255); stroke-width: .7; stroke-dasharray: .006 .011; }
.cluster .strand-3 { stroke: rgb(124, 204, 255); stroke-width: .45; }
.cluster .filament:has(> .signal-link.visible) .strand-0 { opacity: .4; }
.cluster .filament:has(> .signal-link.visible) .strand-1 { opacity: .58; }
.cluster .filament:has(> .signal-link.visible) .strand-2 { opacity: .5; }
.cluster .filament:has(> .signal-link.visible) .strand-3 { opacity: .32; }

/* Secondary (topic-to-topic) links: finer and quieter than the primary bundles. */
.cluster .filament.secondary .filament-halo { stroke: rgba(70, 175, 255, .12); stroke-width: 5; }
.cluster .filament.secondary .signal-link { stroke: rgba(160, 225, 255, .62); stroke-width: .9; filter: drop-shadow(0 0 1.5px rgba(100, 200, 255, .6)); }
.cluster .filament.secondary:has(> .signal-link.visible) .strand-0 { opacity: .24; }
.cluster .filament.secondary:has(> .signal-link.visible) .strand-1 { opacity: .34; }
.cluster .filament.secondary .signal-pulse { stroke-width: 1.9; }
.cluster .filament.secondary .signal-link.visible + .signal-pulse { animation-duration: 6.4s; }

/* Drifting particles. */
.cluster .filament-particles { opacity: 0; transition: opacity .8s ease 1s; }
.cluster .filament:has(> .signal-link.visible) .filament-particles { opacity: 1; }
.cluster .filament-particle { fill: #e2f8ff; filter: drop-shadow(0 0 2px rgba(120, 215, 255, .95)); }
.cluster .filament.secondary .filament-particle { fill: #c6eeff; }

/* Hover: the hovered node's own pathways intensify while the rest of the web recedes slightly. */
.cluster .cluster-lines.focused .filament { opacity: .38; }
.cluster .cluster-lines.focused .filament.lit { opacity: 1; }
.cluster .filament.lit .filament-halo { stroke: rgba(90, 195, 255, .34); }
.cluster .filament.lit .signal-link { stroke: #e9faff; stroke-width: 1.8; }
.cluster .filament.lit.secondary .signal-link { stroke-width: 1.3; }

/* Nodes: compact luminous core; orbital detailing provides presence instead of a large sphere. */
.cluster .main-orb {
  width: clamp(18px, 1.4vw, 24px);
  height: clamp(18px, 1.4vw, 24px);
  animation: od-core-breathe 4.8s ease-in-out infinite;
}
.cluster > .topic .topic-orb,
.cluster > .topic:nth-of-type(n) .topic-orb {
  width: clamp(9px, .72vw, 13px);
  height: clamp(9px, .72vw, 13px);
}
@keyframes od-core-breathe {
  0%, 100% { box-shadow: 0 0 6px rgba(190, 243, 255, .95), 0 0 18px rgba(70, 195, 255, .75), 0 0 36px rgba(25, 130, 255, .35); }
  50% { box-shadow: 0 0 8px rgba(210, 248, 255, 1), 0 0 24px rgba(80, 205, 255, .9), 0 0 48px rgba(30, 140, 255, .45); }
}

/* Concentric rings, tick ring and a hairline geometric frame around each node. */
.cluster .node-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  font-size: var(--fs-micro);
  pointer-events: none;
  transition: filter .3s ease, opacity .3s ease;
}
.cluster .node-rings i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* Primary node: five layers. */
.cluster .main-rings i:nth-child(1) { width: 4.3em; height: 4.3em; border: 1px solid rgba(140, 220, 255, .55); box-shadow: 0 0 8px rgba(70, 180, 255, .18), inset 0 0 8px rgba(70, 180, 255, .14); animation: od-ring-breathe 5s ease-in-out infinite; }
.cluster .main-rings i:nth-child(2) { width: 6.5em; height: 6.5em; border: 1px dashed rgba(130, 210, 255, .36); animation: od-ring-spin 70s linear infinite; }
.cluster .main-rings i:nth-child(3) {
  width: 8.8em; height: 8.8em;
  background: repeating-conic-gradient(rgba(160, 225, 255, .55) 0 1.2deg, transparent 1.2deg 10deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px) calc(100% - .5px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 5px), #000 calc(100% - 5px) calc(100% - .5px), transparent 100%);
  animation: od-ring-spin 110s linear infinite reverse;
}
.cluster .main-rings i:nth-child(4) { width: 11.2em; height: 11.2em; border: 1px solid rgba(110, 195, 255, .13); border-top-color: rgba(170, 230, 255, .5); border-bottom-color: rgba(170, 230, 255, .3); animation: od-ring-spin 46s linear infinite; }
.cluster .main-rings i:nth-child(5) { width: 5.4em; height: 5.4em; border: 1px solid rgba(150, 220, 255, .22); border-radius: 2px; animation: od-diamond-spin 90s linear infinite; }
/* Related nodes: three lighter layers. */
.cluster .topic-rings i:nth-child(1) { width: 2.5em; height: 2.5em; border: 1px solid rgba(140, 220, 255, .5); animation: od-ring-breathe 5.6s ease-in-out infinite; }
.cluster .topic-rings i:nth-child(2) { width: 3.7em; height: 3.7em; border: 1px dashed rgba(130, 210, 255, .3); animation: od-ring-spin 55s linear infinite; }
.cluster .topic-rings i:nth-child(3) {
  width: 5em; height: 5em;
  background: repeating-conic-gradient(rgba(160, 225, 255, .4) 0 1.5deg, transparent 1.5deg 15deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px) calc(100% - .5px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px) calc(100% - .5px), transparent 100%);
  opacity: .7;
  animation: od-ring-spin 90s linear infinite reverse;
}
.cluster > .topic:nth-of-type(2n) .topic-rings i { animation-delay: -1.8s; }
.cluster > .topic:nth-of-type(3n) .topic-rings i { animation-delay: -3.4s; }
.cluster .topic:hover .node-rings,
.cluster .topic:focus-within .node-rings,
.cluster .main-topic:hover .node-rings,
.cluster .main-topic:focus-within .node-rings { filter: brightness(1.55) drop-shadow(0 0 3px rgba(110, 210, 255, .5)); }
.cluster .topic.arrived .node-rings { animation: od-rings-in .9s var(--ease) both; animation-delay: var(--arrival-delay, 0ms); }

@keyframes od-ring-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes od-diamond-spin { from { transform: translate(-50%, -50%) rotate(45deg); } to { transform: translate(-50%, -50%) rotate(405deg); } }
@keyframes od-ring-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes od-rings-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Labels clear the inner ring. */
.cluster .topic-label { top: calc(50% + 19px); }
.cluster .topic.label-above .topic-label { bottom: calc(50% + 17px); }
.cluster .main-label { top: calc(50% + 32px); }

@media (prefers-reduced-motion: reduce) {
  .cluster .filament-particles { display: none; }
  .cluster.current { transform: translateZ(0) scale(1); }
}

/* Knowledge mesh: two tiers of topics, genuine cross-connections, very fine luminous strands.
   Supersedes the filament weights above. Each connection's brightness comes from --w (set per link). */
.cluster .cluster-lines { filter: drop-shadow(0 0 2px rgba(80, 190, 255, .5)); }

/* Core thread: fine, not a cable. Primary links brightest, branches medium, cross-links faint. */
.cluster .filament .signal-link {
  stroke: rgba(196, 240, 255, 1);
  stroke-width: .95;
  opacity: var(--w, 1);
  filter: none;
}
.cluster .filament.branch .signal-link { stroke-width: .75; }
.cluster .filament.cross .signal-link { stroke: rgba(160, 222, 255, 1); stroke-width: .55; }

/* Several very fine strands per connection. */
.cluster .filament-strand { opacity: 0; transition: opacity .9s ease .45s; }
.cluster .strand-0 { stroke: rgb(140, 214, 255); stroke-width: .4; }
.cluster .strand-1 { stroke: rgb(200, 242, 255); stroke-width: .55; }
.cluster .strand-2 { stroke: rgb(100, 194, 255); stroke-width: .5; stroke-dasharray: .006 .011; }
.cluster .strand-3 { stroke: rgb(126, 206, 255); stroke-width: .35; }
.cluster .filament:has(> .signal-link.visible) .strand-0 { opacity: calc(var(--w, 1) * .45); }
.cluster .filament:has(> .signal-link.visible) .strand-1 { opacity: calc(var(--w, 1) * .62); }
.cluster .filament:has(> .signal-link.visible) .strand-2 { opacity: calc(var(--w, 1) * .55); }
.cluster .filament:has(> .signal-link.visible) .strand-3 { opacity: calc(var(--w, 1) * .38); }

/* Travelling light (animated by SMIL on the svg clock; this only styles and gates it). */
.cluster .filament-pulse {
  fill: none;
  stroke: rgba(232, 250, 255, .96);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: .06 1;
  filter: drop-shadow(0 0 3px rgba(130, 224, 255, .95));
  pointer-events: none;
}
.cluster .filament.branch .filament-pulse { stroke-width: 1.6; }
.cluster .filament.cross .filament-pulse { stroke-width: 1.25; stroke: rgba(205, 240, 255, .85); }
.cluster .pulse-wrap { opacity: 0; transition: opacity .6s ease .7s; }
.cluster .filament:has(> .signal-link.visible) .pulse-wrap { opacity: 1; }

/* Hover: the hovered topic's own links light up; the rest of the mesh recedes. */
.cluster .cluster-lines.focused .filament { opacity: .3; }
.cluster .cluster-lines.focused .filament.lit { opacity: 1; --w: 1; }
.cluster .filament.lit .signal-link { stroke: #effcff; stroke-width: 1.3; }
.cluster .filament.lit.cross .signal-link { stroke-width: .95; }

/* Second-level topics: smaller, quieter, still detailed. */
.cluster .topic.tier-2 { width: 46px; height: 46px; }
.cluster > .topic.tier-2 .topic-orb,
.cluster > .topic.tier-2:nth-of-type(n) .topic-orb {
  width: clamp(6px, .5vw, 9px);
  height: clamp(6px, .5vw, 9px);
  box-shadow: 0 0 3px rgba(170, 238, 255, .9), 0 0 9px rgba(60, 185, 255, .6), 0 0 18px rgba(25, 125, 255, .25);
}
.cluster .topic.tier-2 .topic-orb::before { inset: -110%; }
.cluster .topic.tier-2 .topic-label {
  top: calc(50% + 13px);
  max-width: min(150px, 18vw);
  padding: 2px 6px 3px;
  color: #d5efff;
  background: rgba(2, 10, 22, .64);
  border-bottom-color: rgba(96, 205, 255, .35);
  font-size: var(--fs-nano);
  opacity: .88;
}
.cluster .topic.tier-2:hover .topic-label,
.cluster .topic.tier-2:focus-within .topic-label { opacity: 1; color: #fff; }
.cluster .topic.tier-2 .topic-info { top: calc(50% + 34px); }
.cluster .topic.tier-2.info-above .topic-info { top: auto; bottom: calc(50% + 14px); }

/* Second-level orbital detailing: a fine ring and a segmented tick ring. */
.cluster .minor-rings { font-size: var(--fs-nano); }
.cluster .minor-rings i:nth-child(1) { width: 2em; height: 2em; border: 1px solid rgba(140, 220, 255, .42); animation: od-ring-breathe 6.2s ease-in-out infinite; }
.cluster .minor-rings i:nth-child(2) {
  width: 3.3em; height: 3.3em;
  background: repeating-conic-gradient(rgba(160, 225, 255, .42) 0 2deg, transparent 2deg 20deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px) calc(100% - .5px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 3px), #000 calc(100% - 3px) calc(100% - .5px), transparent 100%);
  opacity: .75;
  animation: od-ring-spin 80s linear infinite;
}
.cluster > .topic.tier-2:nth-of-type(2n) .minor-rings i { animation-delay: -2.6s; }

/* DRIFT / CONNECT / ARCHIVE / LOG: stronger warm illumination on hover, brief press-in on click.
   Both layers are positioned relative to each existing hit area (so they scale with the artwork):
   ::after sits on the printed cap (41x18 artwork px, centred 3.5px above the hit-area centre);
   ::before sits on the engraved symbol above it (per-key offset and width below). */
.drift-key { --sym-x: 13%; --sym-w: 125%; --sym-bg-size: 2962.96% 3450.66%; --sym-bg-pos: 35.874% 91.065%; }
.connect-key { --sym-x: 1%; --sym-w: 100%; --sym-bg-size: 3703.70% 3450.66%; --sym-bg-pos: 44.992% 91.065%; }
.storage-control { --sym-x: -4%; --sym-w: 82%; --sym-bg-size: 4516.71% 3450.66%; --sym-bg-pos: 54.491% 91.065%; }
.logbook-control { --sym-x: -15%; --sym-w: 86%; --sym-bg-size: 4306.63% 3450.66%; --sym-bg-pos: 63.713% 91.065%; }

.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control) {
  transition: transform .25s ease, filter .25s ease;
}
/* Cap: inner brightening, a rim highlight ring, then a soft halo that falls off around the control. */
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control)::after {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 38.4%;
  width: 150%;
  height: 100%;
  display: block;
  content: '';
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side,
    rgba(255, 196, 128, .58) 0%,
    rgba(255, 160, 82, .44) 38%,
    rgba(255, 146, 66, .36) 53%,
    rgba(255, 224, 172, .62) 58%,
    rgba(255, 196, 136, .42) 62%,
    rgba(255, 138, 58, .2) 67%,
    rgba(255, 120, 45, .07) 84%,
    transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: none;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, filter .25s ease;
  pointer-events: none;
}
/* Engraved symbol: this layer shows the cockpit artwork itself, pixel-aligned over the symbol (the
   --sym-bg-* values map each layer back onto the 1670x942 frame), blended in screen mode and warmed.
   Bright engraving lines light up strongly while the near-black panel around them barely changes. */
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control)::before {
  position: absolute;
  left: calc(50% + var(--sym-x));
  top: -73%;
  width: var(--sym-w);
  height: 92%;
  display: block;
  content: '';
  border-radius: 0;
  background: url("./assets/cockpit/cockpit-new.webp") var(--sym-bg-pos) / var(--sym-bg-size) no-repeat;
  -webkit-mask: radial-gradient(ellipse closest-side, #000 62%, transparent 100%);
  mask: radial-gradient(ellipse closest-side, #000 62%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: sepia(.35) saturate(1.5) brightness(1.35);
  transform: translateX(-50%);
  transition: opacity .25s ease, filter .25s ease;
  pointer-events: none;
}

.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):is(:hover, :focus-visible):not(:disabled)::after,
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):is(:hover, :focus-visible):not(:disabled)::before {
  opacity: 1;
}
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):is(:hover, :focus-visible):not(:disabled) {
  filter: none;
}

/* Press: the cap sinks slightly and its light flares, then everything eases back on release. */
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):active:not(:disabled) {
  transform: translate(-50%, -50%) translateY(1px) scale(.96);
  transition-duration: .06s;
}
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):active:not(:disabled)::after {
  opacity: 1;
  background-image: radial-gradient(ellipse closest-side,
    rgba(255, 224, 170, .78) 0%,
    rgba(255, 176, 96, .58) 38%,
    rgba(255, 156, 74, .48) 53%,
    rgba(255, 232, 186, .72) 58%,
    rgba(255, 204, 144, .5) 62%,
    rgba(255, 140, 60, .3) 67%,
    rgba(255, 120, 45, .1) 86%,
    transparent 100%);
  filter: brightness(1.15);
  transition-duration: .06s;
}
.physical-key:is(.drift-key, .connect-key, .storage-control, .logbook-control):active:not(:disabled)::before {
  opacity: 1;
  filter: sepia(.35) saturate(1.5) brightness(1.6);
  transition-duration: .06s;
}

/* ===== INITIATE scan: radar pulse + holographic grid (6.7s) =====
   Temporary overlay appended inside .viewport-frame, whose clip-path keeps it on the central glass.
   Phase classes accumulate on .radar-scan:
     phase-activate 0-0.7s | phase-radar 0.7-2.7s | phase-grid 2.7-4.7s | [phase-hold while data loads]
     phase-acquire 4.7-6.2s | phase-clear 6.2-6.7s (fade), then the overlay is removed.
   The overlay never intercepts pointer input. */
@property --rs-reveal { syntax: '<percentage>'; inherits: false; initial-value: -15%; }
@property --rs-band { syntax: '<percentage>'; inherits: false; initial-value: -15%; }

.viewport-frame.radar-scanning #explore-status { opacity: 0; }
.radar-scan {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  color: #bfefff;
  font-family: var(--mono);
  pointer-events: none;
  transition: opacity .5s ease;
}
.radar-scan * { pointer-events: none; }
.radar-scan.phase-clear { opacity: 0; }

/* ---------- Phase 1: activation ---------- */
.rs-glow { position: absolute; inset: 0; }
.phase-activate .rs-glow { animation: rs-activate .9s ease-out both; }
.phase-radar .rs-glow { animation: rs-glow-build 4s ease-in-out both; }
.phase-acquire .rs-glow { animation: rs-glow-flare 1.5s ease-out both; }
@keyframes rs-activate {
  0% { box-shadow: inset 0 0 0 rgba(70, 185, 255, 0); background: rgba(40, 140, 220, 0); }
  40% { box-shadow: inset 0 0 90px rgba(80, 195, 255, .45), inset 0 0 18px rgba(170, 235, 255, .28); background: rgba(40, 140, 220, .06); }
  100% { box-shadow: inset 0 0 60px rgba(70, 180, 255, .22), inset 0 0 10px rgba(150, 225, 255, .14); background: rgba(40, 140, 220, .03); }
}
@keyframes rs-glow-build {
  from { box-shadow: inset 0 0 60px rgba(70, 180, 255, .22), inset 0 0 10px rgba(150, 225, 255, .14); background: rgba(40, 140, 220, .03); }
  to { box-shadow: inset 0 0 110px rgba(80, 195, 255, .38), inset 0 0 18px rgba(170, 235, 255, .22); background: rgba(40, 140, 220, .06); }
}
@keyframes rs-glow-flare {
  0% { box-shadow: inset 0 0 110px rgba(80, 195, 255, .38); background: rgba(40, 140, 220, .06); }
  28% { box-shadow: inset 0 0 150px rgba(120, 215, 255, .6), inset 0 0 30px rgba(210, 248, 255, .4); background: rgba(80, 180, 240, .1); }
  100% { box-shadow: inset 0 0 50px rgba(70, 180, 255, .14); background: rgba(40, 140, 220, .02); }
}

.rs-radar { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transition: filter .3s ease; }
.rs-radar > * { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; transform: translate(-50%, -50%); }

.rs-core {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #ffffff 0 22%, #9be8ff 48%, rgba(40, 150, 255, .35) 100%);
  box-shadow: 0 0 8px rgba(170, 238, 255, .95), 0 0 24px rgba(60, 180, 255, .6);
  opacity: 0;
}
.phase-activate .rs-core { animation: rs-core-ignite .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.phase-radar .rs-core { opacity: 1; animation: rs-core-pulse 1.3s ease-in-out infinite; }
.phase-acquire .rs-core { animation: rs-core-flare 1.2s ease-out both; }
@keyframes rs-core-ignite {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rs-core-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.4); } }
@keyframes rs-core-flare {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(.7); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(3.2); }
  100% { opacity: .35; transform: translate(-50%, -50%) scale(1.3); }
}

/* Targeting brackets. */
.rs-reticle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: calc(var(--R) * .36);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
}
.rs-reticle i { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(175, 238, 255, .9); filter: drop-shadow(0 0 3px rgba(90, 200, 255, .75)); }
.rs-reticle i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.rs-reticle i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.rs-reticle i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.rs-reticle i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.phase-activate .rs-reticle { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.phase-radar .rs-reticle { animation: rs-reticle-breathe 1.8s ease-in-out infinite; }
@keyframes rs-reticle-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(.93); } }

/* Technical readouts at the corners of the glass (inset to stay inside the trapezoid). */
.rs-readout {
  position: absolute;
  color: rgba(175, 232, 255, .86);
  font-size: var(--fs-nano);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
  text-shadow: 0 0 6px rgba(70, 180, 255, .55);
  white-space: pre;
  opacity: 0;
  transition: color .25s ease; font-stretch: var(--stretch-instrument); }
.rs-tl { left: 9%; top: 7%; }
.rs-tr { right: 9%; top: 7%; text-align: right; }
.rs-bl { left: 19%; bottom: 8%; }
.rs-br { right: 19%; bottom: 8%; text-align: right; }
.phase-activate .rs-readout { animation: rs-readout-on .7s steps(1) forwards; }
.phase-activate .rs-tr { animation-delay: .12s; }
.phase-activate .rs-bl { animation-delay: .24s; }
.phase-activate .rs-br { animation-delay: .36s; }
@keyframes rs-readout-on { 0% { opacity: 0; } 20% { opacity: .9; } 32% { opacity: .15; } 46% { opacity: 1; } 100% { opacity: 1; } }

.rs-ruler {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 4%;
  height: 7px;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg, rgba(160, 230, 255, .55) 0 1px, transparent 1px 60px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(160, 230, 255, .35) 0 1px, transparent 1px 12px) top / 100% 4px no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
  mask: linear-gradient(90deg, transparent, #000 15% 85%, transparent);
  transition: opacity .8s ease;
}
.phase-activate .rs-ruler { opacity: .7; }

/* ---------- Phase 2: radar pulse ---------- */
.rs-rings {
  width: calc(var(--R) * 1.6);
  height: calc(var(--R) * 1.6);
  background: repeating-radial-gradient(circle closest-side, rgba(140, 220, 255, .24) 0 1px, transparent 1.5px 16.6%);
  -webkit-mask: radial-gradient(circle closest-side, #000 35%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 35%, transparent 100%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity 1.6s ease, transform 2.4s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.phase-radar .rs-rings { opacity: .8; transform: translate(-50%, -50%) scale(1); }

.rs-ticks {
  width: calc(var(--R) * .9);
  height: calc(var(--R) * .9);
  background: repeating-conic-gradient(rgba(160, 228, 255, .6) 0 .5deg, transparent .5deg 6deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px) calc(100% - 1px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px) calc(100% - 1px), transparent 100%);
  opacity: 0;
  transition: opacity 1s ease .2s;
}
.rs-ticks-outer {
  width: calc(var(--R) * 1.5);
  height: calc(var(--R) * 1.5);
  background: repeating-conic-gradient(rgba(160, 228, 255, .5) 0 .35deg, transparent .35deg 15deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 14px), #000 calc(100% - 14px) calc(100% - 1px), transparent 100%);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 14px), #000 calc(100% - 14px) calc(100% - 1px), transparent 100%);
}
.phase-radar .rs-ticks { opacity: .85; animation: rs-spin 14s linear infinite; }
.phase-radar .rs-ticks-outer { opacity: .6; animation: rs-spin 22s linear infinite reverse; }
@keyframes rs-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Sweep: rotates clockwise with a thin bright leading edge and a faint tail. */
.rs-sweep {
  width: calc(var(--R) * 1.5);
  height: calc(var(--R) * 1.5);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(120, 215, 255, .04) 28deg, rgba(120, 215, 255, .12) 56deg, rgba(185, 240, 255, .42) 60deg, transparent 60.6deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 8%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 8%, transparent 100%);
  opacity: 0;
  transition: opacity .5s ease;
}
.phase-radar .rs-sweep { opacity: .9; animation: rs-spin 2.6s linear infinite; }

/* Signal waves: luminous leading edge with a soft translucent trail; they overlap and build in strength. */
.rs-wave {
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  background: radial-gradient(circle closest-side, transparent 0 72%, rgba(70, 180, 255, .05) 82%, rgba(110, 205, 255, .16) 93%, rgba(205, 245, 255, .92) 98.6%, rgba(120, 215, 255, .3) 99.4%, transparent 100%);
  box-shadow: 0 0 18px rgba(80, 200, 255, .32);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.03);
}
.rs-wave:nth-of-type(1) { filter: brightness(.7); }
.rs-wave:nth-of-type(2) { filter: brightness(.8); }
.rs-wave:nth-of-type(3) { filter: brightness(.9); }
.rs-wave:nth-of-type(5) { filter: brightness(1.12); }
.rs-wave:nth-of-type(6) { filter: brightness(1.25); }
.phase-radar .rs-wave { animation: rs-wave 2.6s cubic-bezier(.22, .6, .3, 1) both; }
.phase-radar .rs-wave:nth-of-type(2) { animation-delay: .32s; }
.phase-radar .rs-wave:nth-of-type(3) { animation-delay: .64s; }
.phase-radar .rs-wave:nth-of-type(4) { animation-delay: .96s; }
.phase-radar .rs-wave:nth-of-type(5) { animation-delay: 1.28s; }
.phase-radar .rs-wave:nth-of-type(6) { animation-delay: 1.6s; }
/* During the grid phase (and any wait for data) the radar keeps pulsing, a little slower. */
.phase-grid .rs-wave { animation: rs-wave-loop 3.3s cubic-bezier(.22, .6, .3, 1) infinite; }
.phase-grid .rs-wave:nth-of-type(1) { animation-delay: .9s; }
.phase-grid .rs-wave:nth-of-type(2) { animation-delay: 1.45s; }
.phase-grid .rs-wave:nth-of-type(3) { animation-delay: 2s; }
.phase-grid .rs-wave:nth-of-type(4) { animation-delay: 2.55s; }
.phase-grid .rs-wave:nth-of-type(5) { animation-delay: 3.1s; }
.phase-grid .rs-wave:nth-of-type(6) { animation-delay: 3.65s; }
@keyframes rs-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  8% { opacity: 1; }
  72% { opacity: .4; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes rs-wave-loop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  8% { opacity: .85; }
  72% { opacity: .3; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.rs-particle, .rs-inbound {
  width: 2px;
  height: 2px;
  background: #e2f8ff;
  box-shadow: 0 0 4px rgba(130, 220, 255, .95);
  opacity: 0;
}
.phase-radar .rs-particle { animation: rs-particle var(--t) ease-out var(--d) infinite; }
@keyframes rs-particle {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--R) * var(--from))); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--R) * var(--to))); }
}

/* ---------- Phase 3: holographic grid ---------- */
.rs-grid {
  position: absolute;
  inset: -12% -8%;
  opacity: 0;
  transform: perspective(900px) rotateX(16deg) translateY(3%);
  transform-origin: 50% 60%;
  background:
    repeating-linear-gradient(0deg, rgba(150, 225, 255, .22) 0 1px, transparent 1px 176px),
    repeating-linear-gradient(90deg, rgba(150, 225, 255, .22) 0 1px, transparent 1px 176px),
    repeating-linear-gradient(0deg, rgba(130, 212, 255, .13) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(130, 212, 255, .13) 0 1px, transparent 1px 44px);
  /* Unfolds from the top as the scan line passes, inside a soft oval so the starfield stays readable. */
  -webkit-mask:
    linear-gradient(180deg, #000 calc(var(--rs-reveal) - 10%), rgba(0, 0, 0, .3) var(--rs-reveal), transparent calc(var(--rs-reveal) + 3%)),
    radial-gradient(ellipse 72% 70% at 50% 52%, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(180deg, #000 calc(var(--rs-reveal) - 10%), rgba(0, 0, 0, .3) var(--rs-reveal), transparent calc(var(--rs-reveal) + 3%)),
    radial-gradient(ellipse 72% 70% at 50% 52%, #000 50%, transparent 100%);
  mask-composite: intersect;
  transition: opacity .6s ease, filter .25s ease;
}
.phase-grid .rs-grid {
  opacity: .9;
  animation: rs-grid-reveal 2s cubic-bezier(.42, 0, .58, 1) forwards, rs-flicker 3.1s steps(1) .4s infinite;
}
@keyframes rs-grid-reveal { from { --rs-reveal: -15%; } to { --rs-reveal: 118%; } }
@keyframes rs-flicker {
  0%, 46%, 50%, 80%, 84%, 100% { filter: brightness(1); }
  47% { filter: brightness(.6); }
  48% { filter: brightness(1.2); }
  82% { filter: brightness(.78); }
}
/* Grid intersections glow as the scan line passes over them. */
.rs-intersections {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(210, 248, 255, .95) 0 1.3px, rgba(120, 215, 255, .4) 2px, transparent 3px) -22px -22px / 44px 44px;
  -webkit-mask: linear-gradient(180deg, transparent calc(var(--rs-band) - 9%), #000 var(--rs-band), transparent calc(var(--rs-band) + 1.5%));
  mask: linear-gradient(180deg, transparent calc(var(--rs-band) - 9%), #000 var(--rs-band), transparent calc(var(--rs-band) + 1.5%));
  opacity: 0;
}
.phase-grid .rs-intersections { opacity: 1; animation: rs-band 2s cubic-bezier(.42, 0, .58, 1) forwards; }
@keyframes rs-band { from { --rs-band: -15%; } to { --rs-band: 118%; } }
.rs-cell {
  position: absolute;
  width: 44px;
  height: 44px;
  background: rgba(120, 215, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(160, 230, 255, .5), inset 0 0 14px rgba(100, 200, 255, .2);
  opacity: 0;
}
.phase-grid .rs-cell { animation: rs-cell 1.2s ease-out var(--d) both; }
@keyframes rs-cell { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: .12; } }
/* Coordinate markers: a crosshair and a grid reference at selected intersections. */
.rs-marker {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0 0 0 8px;
  color: rgba(185, 238, 255, .85);
  font-size: var(--fs-nano);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-shadow: 0 0 5px rgba(80, 190, 255, .7);
  white-space: nowrap;
  opacity: 0; font-stretch: var(--stretch-instrument); }
.rs-marker::before, .rs-marker::after { position: absolute; content: ''; background: rgba(190, 240, 255, .85); }
.rs-marker::before { left: -5px; top: -.5px; width: 10px; height: 1px; }
.rs-marker::after { left: -.5px; top: -5px; width: 1px; height: 10px; }
.phase-grid .rs-marker { animation: rs-marker 1.4s steps(8, end) var(--d) both; }
@keyframes rs-marker { 0% { opacity: 0; } 25% { opacity: 1; } 37% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .65; } }

/* Scan line travelling down through the grid. */
.rs-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -24%;
  height: 24%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(90, 190, 255, .06) 60%, rgba(150, 228, 255, .32) 96%, rgba(235, 252, 255, .95) 99.4%, transparent 100%);
}
.phase-grid .rs-scanline { animation: rs-scanline 2s cubic-bezier(.42, 0, .58, 1) both; }
@keyframes rs-scanline {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(520%); opacity: 0; }
}

/* ---------- Waiting for data: keep scanning, visibly ---------- */
.phase-hold .rs-scanline { animation: rs-scanline 2.2s cubic-bezier(.42, 0, .58, 1) infinite; }
.phase-hold .rs-intersections { animation: rs-band 2.2s cubic-bezier(.42, 0, .58, 1) infinite; }
.phase-hold .rs-cell { animation: rs-cell-loop 2.2s ease-out var(--d) infinite; }
@keyframes rs-cell-loop { 0% { opacity: .12; } 18% { opacity: .9; } 100% { opacity: .12; } }

/* ---------- Phase 4: acquisition (1.5s) ---------- */
/* 0-0.4s: everything converges on the target. */
.phase-acquire .rs-sweep, .phase-acquire .rs-particle { opacity: 0; animation: none; }
.phase-acquire .rs-wave { animation: none; opacity: 0; transition: opacity .25s ease; }
.phase-acquire .rs-rings, .phase-acquire .rs-ticks {
  animation: none;
  transform: translate(-50%, -50%) scale(.5);
  filter: brightness(1.8);
  transition: transform .4s cubic-bezier(.6, 0, .9, .4), filter .3s ease, opacity .4s ease .9s;
}
.phase-acquire .rs-reticle { animation: none; transform: translate(-50%, -50%) scale(.5); filter: brightness(1.7); transition: transform .4s cubic-bezier(.6, 0, .9, .4), filter .3s ease; }
.phase-acquire .rs-inbound { animation: rs-inbound .42s cubic-bezier(.6, 0, .9, .4) var(--d) both; }
@keyframes rs-inbound {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--R) * var(--from))); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0); }
}
.phase-acquire .rs-grid { --rs-reveal: 118%; animation: none; opacity: 1; filter: brightness(2); }
.phase-acquire .rs-cell { animation: rs-cell-flash .7s ease-out calc(.38s - var(--fd)) both; }
@keyframes rs-cell-flash { 0% { opacity: .12; } 25% { opacity: 1; } 100% { opacity: 0; } }
.phase-acquire .rs-marker { animation: none; opacity: 1; transition: opacity .3s ease .5s; }
.phase-acquire .rs-readout { color: #effcff; }
/* 0.38s: the release: a full-strength wave, a controlled flash, and the confirmation (held to the end). */
.rs-final {
  width: calc(var(--R) * 2.1);
  height: calc(var(--R) * 2.1);
  border: 2px solid rgba(225, 250, 255, .95);
  box-shadow: 0 0 26px rgba(120, 220, 255, .85), inset 0 0 44px rgba(120, 220, 255, .4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
}
.phase-acquire .rs-final { animation: rs-final 1s cubic-bezier(.15, .7, .25, 1) .38s both; }
@keyframes rs-final {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.rs-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 48%, rgba(232, 251, 255, .85) 0, rgba(150, 225, 255, .4) 13%, rgba(80, 180, 255, .14) 32%, transparent 56%);
}
.phase-acquire .rs-flash { animation: rs-flash .9s ease-out .38s both; }
@keyframes rs-flash { 0% { opacity: 0; } 14% { opacity: .95; } 100% { opacity: 0; } }
.rs-acquired {
  position: absolute;
  left: 50%;
  top: 59%;
  padding: 7px 4px 7px 20px;
  border-top: 1px solid rgba(150, 230, 255, .55);
  border-bottom: 1px solid rgba(150, 230, 255, .55);
  color: #eefcff;
  background: linear-gradient(90deg, transparent, rgba(4, 18, 32, .55) 18% 82%, transparent);
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 10px rgba(110, 215, 255, .9), 0 0 26px rgba(60, 170, 255, .55);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%); font-stretch: var(--stretch-instrument); }
.phase-acquire .rs-acquired { animation: rs-acquired .55s cubic-bezier(.2, .7, .2, 1) .44s both; }
@keyframes rs-acquired {
  0% { opacity: 0; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
  40% { opacity: 1; }
  100% { opacity: 1; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
}

/* Reduced motion: no movement, a calm fade through to the confirmation. */
.radar-scan.reduced * { animation: none !important; }
.radar-scan.reduced.phase-grid .rs-grid { --rs-reveal: 118%; opacity: .5; }
.radar-scan.reduced.phase-radar .rs-rings, .radar-scan.reduced.phase-radar .rs-core, .radar-scan.reduced .rs-readout { opacity: .8; }
.radar-scan.reduced.phase-acquire .rs-acquired { opacity: 1; }

/* ===== INITIATE ready state: clearly noticeable, refined pulse =====
   Active only while .is-ready (set by a successful coordinate confirmation, cleared on INITIATE,
   on new typing, or on RETURN). Size, position and finish of the button are unchanged.
   Cap and housing ring share one 1.6s rhythm so they brighten and dim together. */
.engage-lever.is-ready {
  animation: od-ready-ring 1.6s ease-in-out infinite;
}
.engage-lever.is-ready .initiate-button-face {
  background:
    radial-gradient(ellipse 62% 34% at 50% 93%, rgba(255, 160, 130, .4), transparent 72%),
    radial-gradient(circle at 50% 36%, #ff6e5c 0%, #ff2b27 30%, #c80d16 64%, #640209 100%);
  animation: od-ready-cap 1.6s ease-in-out infinite;
}
.engage-lever.is-ready .initiate-button-well {
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, .95),
    inset 0 0 11px rgba(255, 50, 36, .5),
    0 -1px 0 rgba(0, 0, 0, .7),
    0 1px 0 rgba(255, 255, 255, .22);
}

/* Hover while ready: immediately brighter, with a stronger glow and ring. */
.engage-lever.is-ready:hover:enabled { animation-name: od-ready-ring-hover; }
.engage-lever.is-ready:hover:enabled .initiate-button-face { animation-name: od-ready-cap-hover; }

/* Pressed: the ready pulse stops and the existing depress-and-flash animation takes over. */
.engage-lever.is-ready.is-pressing { animation: none; }
.engage-lever.is-ready.is-pressing .initiate-button-face { animation: od-initiate-press 420ms both; }

@keyframes od-ready-cap {
  0%, 100% {
    filter: brightness(.92) saturate(1.05);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .5),
      inset 0 0 10px rgba(255, 90, 70, .3),
      0 0 5px rgba(255, 40, 30, .42),
      0 0 12px rgba(255, 30, 20, .18);
  }
  50% {
    filter: brightness(1.5) saturate(1.3);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .32),
      inset 0 0 18px rgba(255, 145, 115, .68),
      0 0 12px rgba(255, 70, 50, .92),
      0 0 26px rgba(255, 40, 30, .5);
  }
}
@keyframes od-ready-cap-hover {
  0%, 100% {
    filter: brightness(1.28) saturate(1.2);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .4),
      inset 0 0 16px rgba(255, 130, 100, .55),
      0 0 10px rgba(255, 60, 45, .8),
      0 0 22px rgba(255, 35, 25, .4);
  }
  50% {
    filter: brightness(1.72) saturate(1.35);
    box-shadow:
      inset 0 -6px 10px rgba(60, 0, 4, .28),
      inset 0 0 22px rgba(255, 170, 140, .8),
      0 0 15px rgba(255, 90, 65, 1),
      0 0 32px rgba(255, 45, 32, .62);
  }
}
/* Housing: a thin illuminated red ring at the outer edge plus a soft glow just beyond the bezel.
   Every keyframe keeps the bezel's own groove, drop shadow and edge highlights. */
@keyframes od-ready-ring {
  0%, 100% {
    box-shadow:
      0 0 0 2px #040506,
      0 0 0 3.5px rgba(255, 55, 40, .28),
      0 0 10px rgba(255, 40, 30, .2),
      0 0 24px rgba(255, 30, 20, 0),
      0 4px 8px rgba(0, 0, 0, .85),
      inset 0 1.5px 1px rgba(255, 255, 255, .6),
      inset 0 -1.5px 2px rgba(0, 0, 0, .8);
  }
  50% {
    box-shadow:
      0 0 0 2px #040506,
      0 0 0 3.5px rgba(255, 82, 62, .85),
      0 0 18px 2px rgba(255, 45, 32, .5),
      0 0 38px rgba(255, 30, 20, .2),
      0 4px 8px rgba(0, 0, 0, .85),
      inset 0 1.5px 1px rgba(255, 255, 255, .6),
      inset 0 -1.5px 2px rgba(0, 0, 0, .8);
  }
}
@keyframes od-ready-ring-hover {
  0%, 100% {
    box-shadow:
      0 0 0 2px #040506,
      0 0 0 3.5px rgba(255, 75, 55, .6),
      0 0 16px 1px rgba(255, 45, 32, .38),
      0 0 32px rgba(255, 30, 20, .12),
      0 5px 10px rgba(0, 0, 0, .85),
      inset 0 1.5px 1px rgba(255, 255, 255, .75),
      inset 0 -1.5px 2px rgba(0, 0, 0, .8);
  }
  50% {
    box-shadow:
      0 0 0 2px #040506,
      0 0 0 3.5px rgba(255, 115, 92, 1),
      0 0 24px 3px rgba(255, 50, 36, .66),
      0 0 48px rgba(255, 30, 20, .28),
      0 5px 10px rgba(0, 0, 0, .85),
      inset 0 1.5px 1px rgba(255, 255, 255, .75),
      inset 0 -1.5px 2px rgba(0, 0, 0, .8);
  }
}
/* Keyboard focus stays visible while the ring animation owns the shadow. */
.engage-lever.is-ready:focus-visible { outline: 2px solid rgba(105, 215, 234, .85); outline-offset: 5px; }

/* Constellation interaction fix: the connection layer is decorative and must never take the pointer.
   Nodes sit at varied depths in the 3D cluster; those slightly behind the line layer (negative --depth),
   and the central topic where every line ends, were being covered by it for hover and click. */
.cluster .cluster-lines,
.cluster .cluster-lines * { pointer-events: none; }

/* Constellation interaction fix (outer and secondary nodes).
   1. Summary popups no longer catch the pointer, so an open popup can never cover and block a
      neighbouring node. Only the hovered node's OPEN SIGNAL link stays clickable (JS keeps the
      node "hovering" for a short grace period so the link can be reached).
   2. Popups are slid/flipped by JS (--info-dx, .info-above) to stay fully on the central glass.
   3. Second-level nodes get a slightly larger invisible hit area; nothing visible changes. */
.cluster .topic .topic-info,
.cluster .main-topic .topic-info {
  pointer-events: none;
  transform: translate(calc(-50% + var(--info-dx, 0px)), 4px);
}
.cluster .topic:is(:hover, :focus-within, .open, .hovering) .topic-info,
.cluster .main-topic:is(:hover, :focus-within, .open, .hovering) .topic-info {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% + var(--info-dx, 0px)), 0);
  transition-delay: 0s;
}
.cluster .topic-info .go-deeper { pointer-events: none; }
.cluster .topic.hovering .topic-info .go-deeper,
.cluster .topic:focus-within .topic-info .go-deeper,
.cluster .main-topic:is(.hovering, .open, :focus-within) .topic-info .go-deeper { pointer-events: auto; }
.cluster .topic.tier-2 .topic-hit::before {
  position: absolute;
  inset: -7px;
  content: '';
  border-radius: 50%;
}

/* ===== Constellation interaction architecture =====
   The 3D constellation is purely visual: it never takes pointer input. A flat .node-hit-layer
   (JS-aligned every frame) holds one target per node orb/rings and one per label, and a single
   shared .node-preview shows the hovered topic. Hover visuals are driven by classes set from that
   one hover state: .is-hovered, .is-linked and .has-focus on the cluster, .focused/.lit on the lines. */
.cluster .topic, .cluster .main-topic,
.cluster .topic *, .cluster .main-topic * { pointer-events: none !important; }

.node-hit-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.node-hit-layer.off,
.view:not(.active) .node-hit-layer,
.view:not(.active) .node-preview { display: none; }
.node-hit {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.node-hit[hidden] { display: none; }
button.node-hit { border-radius: 50%; transform: translate(-50%, -50%); }
button.node-hit:focus-visible { outline: 1.5px solid rgba(140, 225, 255, .9); outline-offset: 2px; }
.node-hit-label { border-radius: 3px; }

/* Hover: the node smoothly enlarges (~1.18x), brightens, and its core and rings intensify. */
.cluster .topic {
  transform: translate(-50%, -50%) translateZ(var(--depth, 0px)) scale(calc(var(--scale, 1) * var(--hover-scale, 1)));
  transition: opacity .35s ease, filter .3s ease, transform .32s cubic-bezier(.2, .7, .2, 1);
}
.cluster .main-topic {
  transform: translate(-50%, -50%) scale(var(--hover-scale, 1));
  transition: opacity .35s ease, filter .3s ease, transform .32s cubic-bezier(.2, .7, .2, 1);
}
.cluster .topic.is-hovered { --hover-scale: 1.18; filter: brightness(1.4); z-index: 8; }
.cluster .main-topic.is-hovered { --hover-scale: 1.15; filter: brightness(1.25); }
.cluster .is-hovered .topic-orb { box-shadow: 0 0 6px rgba(215, 248, 255, 1), 0 0 16px rgba(90, 205, 255, .95), 0 0 34px rgba(35, 145, 255, .55); }
.cluster .is-hovered .main-orb { animation: none; box-shadow: 0 0 9px rgba(220, 250, 255, 1), 0 0 28px rgba(90, 210, 255, .95), 0 0 56px rgba(35, 145, 255, .5); }
.cluster .is-hovered .node-rings { filter: brightness(1.8) drop-shadow(0 0 3px rgba(120, 215, 255, .6)); }
.cluster .is-hovered .topic-label,
.cluster .is-hovered .main-label { color: #fff; border-bottom-color: rgba(150, 230, 255, .95); opacity: 1; }

/* Focus: unrelated topics and links dim slightly (still visible); linked topics stay at full strength.
   Applied to each node's inner element, which no animation touches (the node itself carries the
   arrival animation, whose held opacity some engines let win over the dimming). */
.cluster .topic > .topic-hit,
.cluster .main-topic > .main-hit { transition: opacity .35s ease; }
.cluster.has-focus .topic:not(.is-hovered):not(.is-linked) > .topic-hit,
.cluster.has-focus .main-topic:not(.is-hovered):not(.is-linked) > .main-hit { opacity: .42; }
.cluster .cluster-lines.focused .filament { opacity: .35; }
.cluster .cluster-lines.focused .filament.lit { opacity: 1; --w: 1; filter: drop-shadow(0 0 3px rgba(120, 215, 255, .75)); }
.cluster .cluster-lines.focused .filament.lit .signal-link { stroke: #f0fcff; stroke-width: 1.5; }
.cluster .cluster-lines.focused .filament.lit:has(> .signal-link.visible) .filament-strand { opacity: .9; }
.cluster .cluster-lines.focused .filament.lit .filament-pulse { stroke-width: 2.4; }

/* Shared topic preview. */
.node-preview {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: min(270px, 42%);
  padding: 11px 13px 12px;
  border: 1px solid rgba(110, 205, 255, .32);
  border-left: 2px solid rgba(130, 220, 255, .85);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(4, 16, 30, .95), rgba(2, 9, 18, .93));
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55), 0 0 18px rgba(50, 150, 255, .18);
  color: #cfe7f5;
  font-family: var(--mono);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  pointer-events: none;
}
.node-preview.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; pointer-events: auto; }
.np-kicker { display: block; margin-bottom: 4px; color: rgba(120, 210, 255, .78); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.np-title { display: block; margin-bottom: 6px; color: #f2fbff; font-size: var(--fs-body); line-height: var(--lh-tight); letter-spacing: var(--ls-label); text-shadow: 0 0 8px rgba(80, 190, 255, .4); font-stretch: var(--stretch-instrument); }
.np-summary { max-height: 7.5em; margin: 0 0 10px; overflow: hidden; color: #b9d3e4; font-family: var(--sans); font-size: var(--fs-small); line-height: var(--lh-body); }
.np-actions { display: flex; align-items: center; gap: 12px; }
.np-explore {
  padding: 5px 9px;
  border: 1px solid rgba(120, 215, 255, .6);
  border-radius: 2px;
  background: rgba(40, 140, 220, .16);
  color: #e6f7ff;
  font: 600 var(--fs-micro)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease; font-stretch: var(--stretch-instrument); }
.np-explore:hover, .np-explore:focus-visible { background: rgba(70, 170, 250, .32); border-color: rgba(170, 235, 255, .95); outline: none; }
.np-explore[hidden] { display: none; }
.np-wiki { color: rgba(140, 215, 255, .85); font: var(--fs-nano)/1 var(--mono); letter-spacing: var(--ls-label); text-decoration: none; font-stretch: var(--stretch-instrument); }
.np-wiki:hover, .np-wiki:focus-visible { color: #fff; }

/* ===== DRIFT: Deep-Space Sweep =====
   Temporary overlay used only by DRIFT, appended inside .viewport-frame (clipped to the central glass).
   Phases on .drift-sweep: ds-init > ds-analyse > [ds-hold] > ds-isolate > ds-identified > ds-clear.
   Navy veil, cyan beam and rings, restrained amber for selected signals. Never takes pointer input. */
.viewport-frame.drift-sweeping #explore-status,
.viewport-frame.drift-sweeping .home,
.viewport-frame.drift-sweeping .universe { opacity: 0 !important; transition: opacity .4s ease; }
.drift-sweep {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  color: #bfe9ff;
  font-family: var(--mono);
  pointer-events: none;
  transition: opacity .55s ease;
}
.drift-sweep * { pointer-events: none; }
.drift-sweep.ds-clear { opacity: 0; }

.ds-veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(4, 14, 32, .15), rgba(2, 7, 18, .5) 75%);
  transition: opacity .9s ease;
}
.ds-init .ds-veil { opacity: 1; }

/* Radar: range rings, crosshair and the rotating beam, centred on the window. */
.ds-radar { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transition: opacity .6s ease; }
.ds-radar > * { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.ds-rings { width: 0; height: 0; transform: none; opacity: 0; transition: opacity 1.2s ease; }
.ds-rings i { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.ds-rings i:nth-child(1) { width: calc(var(--R) * .44); height: calc(var(--R) * .44); border: 1px solid rgba(120, 210, 255, .22); }
.ds-rings i:nth-child(2) { width: calc(var(--R) * .88); height: calc(var(--R) * .88); border: 1px dashed rgba(120, 210, 255, .16); }
.ds-rings i:nth-child(3) { width: calc(var(--R) * 1.32); height: calc(var(--R) * 1.32); border: 1px solid rgba(120, 210, 255, .12); }
.ds-rings i:nth-child(4) { width: calc(var(--R) * 1.76); height: calc(var(--R) * 1.76); border: 1px dashed rgba(120, 210, 255, .09); }
.ds-init .ds-rings { opacity: 1; animation: ds-rings-breathe 4s ease-in-out infinite; }
@keyframes ds-rings-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.ds-cross {
  width: calc(var(--R) * 1.8);
  height: calc(var(--R) * 1.8);
  opacity: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(120, 210, 255, .14) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(120, 210, 255, .14) 50%, transparent calc(50% + .5px));
  -webkit-mask: radial-gradient(circle closest-side, #000 20%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 20%, transparent 100%);
  transition: opacity 1s ease .2s;
}
.ds-init .ds-cross { opacity: 1; }
/* Beam: rotates clockwise; thin bright leading edge at 60deg with a long fading wake behind it. */
.ds-beam {
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(110, 210, 255, .025) 16deg, rgba(110, 210, 255, .09) 50deg, rgba(170, 232, 255, .3) 59deg, rgba(225, 248, 255, .78) 60deg, transparent 60.5deg 360deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 4%, rgba(0, 0, 0, .85) 60%, transparent 100%);
  mask: radial-gradient(circle closest-side, #000 4%, rgba(0, 0, 0, .85) 60%, transparent 100%);
  transition: opacity .7s ease;
}
.ds-init .ds-beam { opacity: 1; animation: ds-spin var(--P) linear infinite; }
@keyframes ds-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Scattered signals: each flares as the beam's leading edge passes, then decays. */
.ds-field { position: absolute; inset: 0; }
.ds-blip {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 30%, #9fe4ff 60%, rgba(60, 170, 255, 0) 100%);
  box-shadow: 0 0 6px rgba(120, 215, 255, .8);
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transition: opacity .6s ease, left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1);
}
.ds-blip.amber { background: radial-gradient(circle, #fff6e6 0 30%, #f0c27e 60%, rgba(230, 160, 70, 0) 100%); box-shadow: 0 0 6px rgba(235, 180, 100, .7); }
.ds-analyse .ds-blip { animation: ds-ping var(--P) linear var(--hit) infinite both; }
@keyframes ds-ping {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 1.9)); }
  10% { opacity: .85; transform: translate(-50%, -50%) scale(var(--s, 1)); }
  100% { opacity: .16; transform: translate(-50%, -50%) scale(calc(var(--s, 1) * .9)); }
}

/* Frequency spectrum at the bottom of the glass. */
.ds-spectrum {
  position: absolute;
  left: 50%;
  bottom: 9%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .8s ease;
}
.ds-spectrum i { display: block; width: 2px; height: 100%; background: linear-gradient(0deg, rgba(110, 205, 255, .7), rgba(180, 235, 255, .2)); transform: scaleY(calc(var(--h) * .3)); transform-origin: 50% 100%; }
.ds-spectrum i:nth-child(14), .ds-spectrum i:nth-child(15) { background: linear-gradient(0deg, rgba(235, 180, 100, .8), rgba(240, 205, 150, .25)); }
.ds-init .ds-spectrum { opacity: .8; }
.ds-analyse .ds-spectrum i { animation: ds-bar var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes ds-bar { from { transform: scaleY(calc(var(--h) * .2)); } to { transform: scaleY(var(--h)); } }

/* Status line along the top of the glass, with a slow ellipsis. */
.ds-status {
  position: absolute;
  left: 50%;
  top: 8%;
  color: rgba(185, 235, 255, .92);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 8px rgba(70, 180, 255, .55);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .5s ease; font-stretch: var(--stretch-instrument); }
.ds-status::after { content: ''; display: inline-block; width: 2.2em; text-align: left; animation: ds-dots 1.2s steps(4, end) infinite; }
@keyframes ds-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.ds-init .ds-status { opacity: 1; }

/* Isolation: the beam withdraws, other signals fade, one signal flares amber and is locked. */
.ds-isolate .ds-beam { opacity: 0; }
.ds-isolate .ds-rings, .ds-isolate .ds-cross { opacity: .35; animation: none; }
.ds-isolate .ds-blip:not(.ds-target) { animation: none; opacity: .1; }
.ds-isolate .ds-spectrum i { animation: none; transform: scaleY(.12); transition: transform .5s ease; }
.ds-isolate .ds-spectrum i:nth-child(14), .ds-isolate .ds-spectrum i:nth-child(15) { transform: scaleY(1); }
.ds-isolate .ds-target {
  animation: ds-target-flare 1s ease-out both, ds-target-pulse 1.6s ease-in-out 1s infinite;
  background: radial-gradient(circle, #ffffff 0 28%, #ffe0a8 55%, rgba(235, 170, 80, 0) 100%);
}
@keyframes ds-target-flare {
  0% { opacity: .6; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 6px rgba(235, 180, 100, .6); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(3.2); box-shadow: 0 0 14px rgba(255, 210, 140, .95), 0 0 30px rgba(120, 210, 255, .5); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(2.3); box-shadow: 0 0 10px rgba(255, 205, 135, .9), 0 0 24px rgba(120, 210, 255, .4); }
}
@keyframes ds-target-pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(2.3); }
  50% { opacity: .85; transform: translate(-50%, -50%) scale(2.6); }
}
.ds-lock { position: absolute; width: 0; height: 0; transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1); }
.ds-lock i { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(3); }
.ds-lock i:nth-child(1) { width: 26px; height: 26px; border: 1px solid rgba(240, 200, 140, .85); }
.ds-lock i:nth-child(2) { width: 44px; height: 44px; border: 1px dashed rgba(150, 225, 255, .55); }
.ds-lock i:nth-child(3) { width: 66px; height: 66px; border: 1px solid rgba(150, 225, 255, .22); }
.ds-isolate .ds-lock i { animation: ds-lock-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.ds-isolate .ds-lock i:nth-child(2) { animation: ds-lock-in .7s cubic-bezier(.2, .7, .2, 1) .08s both, ds-lock-spin 9s linear .8s infinite; }
.ds-isolate .ds-lock i:nth-child(3) { animation-delay: .16s; }
@keyframes ds-lock-in { from { opacity: 0; transform: translate(-50%, -50%) scale(3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ds-lock-spin { from { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } to { opacity: 1; transform: translate(-50%, -50%) rotate(360deg); } }

/* Readout and identification beside the isolated signal. */
.ds-tag {
  position: absolute;
  width: max-content;
  max-width: 46%;
  padding-top: 46px;
  text-align: center;
  transform: translateX(-50%);
  transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
}
.ds-tag.above { padding-top: 0; transform: translate(-50%, calc(-100% - 46px)); }
.ds-bearing, .ds-idline, .ds-name { display: block; opacity: 0; transition: opacity .45s ease, letter-spacing .6s cubic-bezier(.2, .7, .2, 1); }
.ds-bearing { margin-bottom: 8px; color: rgba(170, 225, 250, .8); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ds-idline { color: rgba(185, 238, 255, .95); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-shadow: 0 0 8px rgba(80, 190, 255, .6); font-stretch: var(--stretch-instrument); }
.ds-name {
  margin-top: 6px;
  color: #ffe6bd;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 10px rgba(240, 190, 110, .55), 0 0 22px rgba(80, 180, 255, .3);
  white-space: normal;
  overflow-wrap: anywhere; font-stretch: var(--stretch-instrument); }
.ds-isolate .ds-bearing { opacity: 1; transition-delay: .35s; }
.ds-identified .ds-idline { opacity: 1; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.ds-identified .ds-name { opacity: 1; letter-spacing: var(--ls-caps); transition-delay: .15s; font-stretch: var(--stretch-instrument); }
.ds-identified .ds-status { opacity: 0; }
.ds-clear .ds-tag { opacity: 0; }

/* Reduced motion: no movement; phases simply fade in. */
.drift-sweep.reduced * { animation: none !important; }
.drift-sweep.reduced.ds-analyse .ds-blip { opacity: .5; }
.drift-sweep.reduced.ds-isolate .ds-target { opacity: 1; }
.drift-sweep.reduced.ds-isolate .ds-lock i { opacity: 1; transform: translate(-50%, -50%); }

/* ===== CONNECT: Cross-Signal Analysis + connection constellation =====
   Everything lives in .cx-stage inside the CONNECT view (central window). Scan phases on .cx-stage:
   cx-scan > cx-compare > cx-map > cx-meet > cx-scan-out > cx-network > cx-done.
   Fine cyan / electric-blue lines with restrained amber; the network reuses the constellation styles
   via a .cluster container. Only the result panel's button takes pointer input. */
.cx-stage { position: absolute; inset: 0; z-index: 15; pointer-events: none; font-family: var(--mono); color: #c9ecff; }
.cx-stage > * { position: absolute; }

/* Status line */
.cx-status {
  left: 50%;
  top: 8%;
  color: rgba(190, 236, 255, .92);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 8px rgba(70, 180, 255, .55);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .4s ease; font-stretch: var(--stretch-instrument); }
.cx-status:not(:empty)::after { content: ''; display: inline-block; width: 2.2em; text-align: left; animation: ds-dots 1.2s steps(4, end) infinite; }
.cx-status.swap { animation: cx-status-in .45s ease both; }
@keyframes cx-status-in { from { opacity: 0; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); } to { opacity: 1; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); } }
.cx-meet .cx-status { color: #ffe2b3; text-shadow: 0 0 10px rgba(240, 190, 110, .55); }
.cx-meet .cx-status::after { animation: none; content: ''; }

/* Topic names: plain text at opposite ends of the window, with fine corner brackets during the scan. */
.cx-topic {
  z-index: 3;
  top: 44%;
  max-width: 17%;
  color: #eef9ff;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-caps);
  text-align: center;
  text-shadow: 0 0 10px rgba(80, 190, 255, .55), 0 1px 3px #000;
  transform: translate(-50%, -50%);
  animation: cx-fade-in .7s ease both; font-stretch: var(--stretch-instrument); }
.cx-topic.left { left: 15.5%; }
.cx-topic.right { left: 84.5%; }
.cx-topic::before {
  position: absolute;
  inset: -12px -16px;
  content: '';
  background:
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) left top / 10px 1px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) left top / 1px 10px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) right top / 10px 1px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) right top / 1px 10px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) left bottom / 10px 1px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) left bottom / 1px 10px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) right bottom / 10px 1px no-repeat,
    linear-gradient(rgba(140, 220, 255, .8), rgba(140, 220, 255, .8)) right bottom / 1px 10px no-repeat;
  opacity: .85;
  transition: opacity .5s ease;
}
.cx-meet .cx-topic::before { filter: sepia(.6) saturate(1.6) brightness(1.15); }
.cx-scan-out .cx-topic::before { opacity: 0; }
@keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Technical markings around each topic: faint grid patch, sweeping scan line, waveform and readout. */
.cx-grid {
  top: 44%;
  width: 22%;
  height: 44%;
  opacity: 0;
  transform: translate(-50%, -50%);
  background:
    repeating-linear-gradient(0deg, rgba(120, 205, 255, .12) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(120, 205, 255, .12) 0 1px, transparent 1px 16px);
  -webkit-mask: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(ellipse closest-side, #000 25%, transparent 100%);
  transition: opacity 1s ease;
}
.cx-grid.left { left: 15.5%; }
.cx-grid.right { left: 84.5%; }
.cx-scan .cx-grid { opacity: .6; }
.cx-sweep {
  top: 26%;
  height: 36%;
  width: 1px;
  opacity: 0;
  background: linear-gradient(transparent, rgba(170, 232, 255, .75) 30% 70%, transparent);
  box-shadow: 0 0 6px rgba(90, 200, 255, .6);
}
.cx-scan .cx-sweep { opacity: .7; animation: cx-sweep 1.9s ease-in-out infinite alternate; }
.cx-sweep.right { animation-delay: -.95s !important; }
@keyframes cx-sweep { from { transform: translateX(0); } to { transform: translateX(calc(var(--sweep-span, 18vw))); } }
.cx-sweep.left { left: 6.5%; --sweep-span: 17vw; }
.cx-sweep.right { left: 75.5%; --sweep-span: 17vw; }
.cx-wave { top: calc(44% - 58px); width: 13%; height: 22px; overflow: visible; transform: translateX(-50%); opacity: 0; animation: cx-fade-in .6s ease .4s forwards; }
.cx-wave.left { left: 15.5%; }
.cx-wave.right { left: 84.5%; }
.cx-wave path {
  fill: none;
  stroke: rgba(130, 215, 255, .75);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px rgba(90, 200, 255, .8));
  transition: d .9s cubic-bezier(.4, 0, .2, 1), stroke .5s ease;
  animation: cx-wave-flicker 1.6s steps(1) infinite;
}
.cx-compare .cx-wave path { stroke: rgba(185, 238, 255, .95); }
.cx-meet .cx-wave path { stroke: rgba(245, 200, 130, .95); filter: drop-shadow(0 0 3px rgba(240, 180, 100, .8)); animation: none; }
@keyframes cx-wave-flicker { 0%, 100% { opacity: 1; } 43% { opacity: .55; } 45% { opacity: 1; } 78% { opacity: .75; } 80% { opacity: 1; } }
.cx-readout { top: calc(44% + 36px); color: rgba(170, 225, 250, .78); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); white-space: nowrap; transform: translateX(-50%); animation: cx-fade-in .6s ease .5s both; font-stretch: var(--stretch-instrument); }
.cx-readout.left { left: 15.5%; }
.cx-readout.right { left: 84.5%; }
.cx-meet .cx-readout { color: #ffe2b3; }

/* Scanning beams: fine lines travelling from both topics toward the centre, with bright heads. */
.cx-beam {
  top: 44%;
  width: 25%;
  height: 1px;
  opacity: 0;
  transform: scaleX(0);
  box-shadow: 0 0 6px rgba(90, 200, 255, .6);
}
.cx-beam.left { left: 25%; transform-origin: left center; background: linear-gradient(90deg, rgba(90, 190, 255, .1), rgba(150, 225, 255, .7) 85%, #ffffff); }
.cx-beam.right { left: 50%; transform-origin: right center; background: linear-gradient(270deg, rgba(90, 190, 255, .1), rgba(150, 225, 255, .7) 85%, #ffffff); }
.cx-beam.b1 { margin-top: -7px; }
.cx-beam.b2 { margin-top: 7px; }
.cx-scan .cx-beam.b0 { opacity: 1; animation: cx-beam 3.7s cubic-bezier(.5, 0, .25, 1) forwards; }
.cx-scan .cx-beam.b1, .cx-scan .cx-beam.b2 { opacity: .32; animation: cx-beam-trail 3.7s cubic-bezier(.5, 0, .25, 1) .25s forwards; }
@keyframes cx-beam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-beam-trail { from { transform: scaleX(0); } to { transform: scaleX(.94); } }
.cx-head {
  top: 44%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 30%, #a8e8ff 60%, rgba(80, 190, 255, 0) 100%);
  box-shadow: 0 0 8px rgba(150, 225, 255, .95), 0 0 18px rgba(60, 170, 255, .5);
  transform: translate(-50%, -50%);
}
.cx-scan .cx-head { opacity: 1; }
.cx-scan .cx-head.left { animation: cx-head-left 3.7s cubic-bezier(.5, 0, .25, 1) forwards; }
.cx-scan .cx-head.right { animation: cx-head-right 3.7s cubic-bezier(.5, 0, .25, 1) forwards; }
@keyframes cx-head-left { from { left: 25%; } to { left: 50%; } }
@keyframes cx-head-right { from { left: 75%; } to { left: 50%; } }

/* Meeting: a brief, bright pulse at the centre (compact, not a large radar circle). */
.cx-pulse { left: 50%; top: 44%; width: 0; height: 0; }
.cx-pulse::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 34vw;
  height: 1px;
  content: '';
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(220, 248, 255, .95), transparent);
  transform: translate(-50%, -50%) scaleX(.1);
}
.cx-pulse::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 30%, #bfeeff 55%, rgba(80, 190, 255, 0) 100%);
  box-shadow: 0 0 16px rgba(170, 235, 255, 1), 0 0 40px rgba(80, 190, 255, .7);
  transform: translate(-50%, -50%);
}
.cx-pulse i { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); }
.cx-pulse i:nth-child(1) { width: 120px; height: 120px; border: 1px solid rgba(200, 242, 255, .8); }
.cx-pulse i:nth-child(2) { width: 70px; height: 70px; border: 1px solid rgba(245, 205, 140, .7); }
.cx-meet .cx-pulse::before { animation: cx-flare-line .9s ease-out both; }
.cx-meet .cx-pulse::after { animation: cx-core 1.3s ease-out both; }
.cx-meet .cx-pulse i { animation: cx-ring .9s cubic-bezier(.2, .7, .2, 1) both; }
.cx-meet .cx-pulse i:nth-child(2) { animation-delay: .08s; }
@keyframes cx-flare-line { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.1); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); } }
@keyframes cx-core { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(2.2); } 100% { opacity: .0; transform: translate(-50%, -50%) scale(1); } }
@keyframes cx-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* Scan clears; topic names stay. */
.cx-scan-out .cx-beam, .cx-scan-out .cx-head, .cx-scan-out .cx-grid, .cx-scan-out .cx-sweep,
.cx-scan-out .cx-wave, .cx-scan-out .cx-readout, .cx-scan-out .cx-status { opacity: 0 !important; transition: opacity .5s ease; animation-play-state: paused; }

/* Topic names + network share .cx-world; when the result appears it eases up and slightly smaller
   so the whole connected constellation stays visible above the explanation. */
.cx-world { inset: 0; z-index: 2; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.cx-world > * { position: absolute; }

/* Connection constellation (reuses the exploration constellation styles via .cluster). */
.cx-net { z-index: 2; }
.cx-net .topic-label { font-size: var(--fs-nano); opacity: .9; }
.cx-net.cx-surge-on .cluster-lines { filter: brightness(1.9) drop-shadow(0 0 4px rgba(150, 225, 255, .85)); transition: filter .25s ease; }
.cx-net .cluster-lines { transition: filter .8s ease; }
.cx-surge {
  fill: none;
  stroke: rgba(240, 252, 255, .98);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: .16 1;
  stroke-dashoffset: .16;
  filter: drop-shadow(0 0 4px rgba(150, 228, 255, 1)) drop-shadow(0 0 10px rgba(60, 170, 255, .6));
}
.cx-net .topic.cx-centre.cx-flare .topic-orb { animation: cx-centre-flare 1.6s ease-out both; }
.cx-net .topic.cx-centre.cx-flare .node-rings { filter: brightness(1.9) drop-shadow(0 0 4px rgba(245, 205, 140, .6)); transition: filter .4s ease; }
@keyframes cx-centre-flare {
  0% { box-shadow: 0 0 4px rgba(170, 238, 255, .95), 0 0 12px rgba(60, 185, 255, .75); }
  25% { box-shadow: 0 0 10px rgba(255, 240, 210, 1), 0 0 30px rgba(245, 200, 130, .85), 0 0 60px rgba(80, 190, 255, .5); transform: translate(-50%, -50%) scale(1.8); }
  100% { box-shadow: 0 0 6px rgba(220, 248, 255, 1), 0 0 18px rgba(90, 205, 255, .85), 0 0 34px rgba(35, 145, 255, .45); transform: translate(-50%, -50%) scale(1.25); }
}

/* Input panel: charted-pair suggestions. */
.connect-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.connect-suggest:empty { display: none; }
.connect-chip {
  padding: 5px 9px;
  border: 1px solid rgba(120, 205, 255, .35);
  border-radius: 2px;
  background: rgba(10, 30, 50, .55);
  color: #cfeeff;
  font: var(--fs-micro)/1 var(--mono);
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease; font-stretch: var(--stretch-instrument); }
.connect-chip:hover, .connect-chip:focus-visible { border-color: rgba(240, 200, 140, .75); color: #ffe6bd; background: rgba(40, 60, 80, .6); outline: none; }

/* ===== CONNECT refinement: holographic inputs, command controls, research file =====
   All elements sit inside the central window; widths are % of the window and checked against
   the slanted glass edges at the heights they occupy. */

/* Input panel: closer to the centre, no heading or labels above the fields. */
#trace-ui { top: 30%; width: min(560px, 62%); }
#trace-ui .trace-fields { align-items: center; gap: 16px; margin-top: 0; }
#trace-ui .trace-fields > b { padding: 0; color: rgba(240, 200, 140, .7); font: var(--fs-h3)/1 var(--mono); text-shadow: 0 0 8px rgba(240, 180, 100, .45); }

/* Holographic input panels. */
.holo-field { position: relative; display: block; width: clamp(150px, 15vw, 220px); }
.holo-field::before, .holo-field::after {
  position: absolute;
  inset: -4px;
  content: '';
  pointer-events: none;
  transition: opacity .3s ease, inset .3s ease;
}
.holo-field::before {
  background:
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) left top / 9px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) left top / 1px 9px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) right bottom / 9px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) right bottom / 1px 9px no-repeat;
  opacity: .7;
}
.holo-field::after {
  background:
    linear-gradient(rgba(240, 200, 140, .75), rgba(240, 200, 140, .75)) right top / 4px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .5), rgba(150, 228, 255, .5)) left bottom / 4px 1px no-repeat;
  opacity: .8;
}
#trace-ui .holo-field input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(110, 205, 255, .36);
  border-radius: 2px;
  outline: none;
  color: #ecf9ff;
  caret-color: #8fe3ff;
  background:
    linear-gradient(90deg, transparent, rgba(120, 215, 255, .07) 50%, transparent) -120% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, rgba(8, 26, 44, .5), rgba(3, 12, 24, .72));
  box-shadow: inset 0 0 14px rgba(60, 170, 255, .12), inset 0 1px rgba(170, 230, 255, .08);
  font: var(--fs-body)/1 var(--mono);
  letter-spacing: var(--ls-label);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: border-color .25s ease, box-shadow .25s ease, padding .2s ease; font-stretch: var(--stretch-instrument); }
#trace-ui .holo-field input::placeholder { color: rgba(140, 210, 245, .58); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
#trace-ui .holo-field input:not(:placeholder-shown) { padding-top: 11px; }
#trace-ui .holo-field input:focus {
  border-color: rgba(150, 228, 255, .9);
  animation: holo-field-glow 2.4s ease-in-out infinite, holo-field-scan 2.8s linear infinite;
}
.holo-field:focus-within::before { opacity: 1; inset: -6px; }
@keyframes holo-field-glow {
  0%, 100% { box-shadow: inset 0 0 16px rgba(70, 185, 255, .2), 0 0 8px rgba(80, 190, 255, .25); }
  50% { box-shadow: inset 0 0 22px rgba(90, 200, 255, .3), 0 0 16px rgba(80, 190, 255, .42); }
}
@keyframes holo-field-scan { to { background-position: 220% 0, 0 0; } }
.holo-tag {
  position: absolute;
  left: 12px;
  top: 4px;
  color: rgba(140, 215, 250, .72);
  font: var(--fs-nano)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; font-stretch: var(--stretch-instrument); }
.holo-field input:not(:placeholder-shown) + .holo-tag { opacity: 1; transform: none; }

/* SYNCHRONISE SIGNALS: a spacecraft activation control. */
#trace-ui .trace-button {
  position: relative;
  min-height: 0;
  margin-top: 18px;
  padding: 10px 22px 10px 30px;
  border: 1px solid rgba(240, 195, 120, .55);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(70, 46, 16, .5), rgba(22, 15, 8, .68));
  color: #ffe2b3;
  font: 600 var(--fs-small)/1 var(--mono);
  letter-spacing: var(--ls-wide);
  box-shadow: inset 0 0 12px rgba(240, 180, 90, .14), 0 0 10px rgba(240, 180, 90, .1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .1s ease; font-stretch: var(--stretch-instrument); }
#trace-ui .trace-button::before {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 50%;
  background: #ffcf80;
  box-shadow: 0 0 6px rgba(255, 200, 120, .9);
  transform: translateY(-50%);
  animation: holo-cmd-blink 1.8s ease-in-out infinite;
}
#trace-ui .trace-button:hover, #trace-ui .trace-button:focus-visible {
  border-color: rgba(255, 215, 150, .95);
  color: #fff3dc;
  box-shadow: inset 0 0 16px rgba(240, 180, 90, .26), 0 0 16px rgba(240, 180, 90, .25);
  outline: none;
  filter: none;
}
#trace-ui .trace-button:active { transform: translateY(1px); }
@keyframes holo-cmd-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#trace-ui .status { margin-top: 12px; font-size: var(--fs-micro); }

/* Final state: CONNECTION ESTABLISHED (no ellipsis), then compact data commands below the network. */
.cx-status.final { color: #eaf9ff; font-size: var(--fs-body); letter-spacing: var(--ls-wide); text-shadow: 0 0 10px rgba(90, 200, 255, .7); font-stretch: var(--stretch-instrument); }
.cx-status.final::after { content: none; }
.cx-commands {
  left: 50%;
  bottom: 11%;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  pointer-events: auto;
  animation: cx-fade-in .6s ease .2s both;
}
.cx-command {
  position: relative;
  padding: 8px 16px 8px 26px;
  border: 1px solid rgba(120, 215, 255, .55);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 34, 56, .6), rgba(4, 14, 26, .72));
  color: #dff6ff;
  font: 600 var(--fs-micro)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(70, 185, 255, .14), 0 0 10px rgba(70, 185, 255, .14);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease; font-stretch: var(--stretch-instrument); }
.cx-command i {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(150, 228, 255, .9);
  transform: translateY(-50%) rotate(45deg);
  animation: holo-cmd-blink 1.6s ease-in-out infinite;
}
.cx-command.small { padding: 7px 14px; font-size: var(--fs-nano); }
.cx-command:hover, .cx-command:focus-visible { border-color: rgba(170, 235, 255, .95); color: #fff; box-shadow: inset 0 0 16px rgba(80, 195, 255, .26), 0 0 16px rgba(80, 195, 255, .3); outline: none; }
.cx-reset {
  padding: 6px 4px;
  border: 0;
  border-bottom: 1px solid rgba(240, 200, 140, .4);
  background: transparent;
  color: rgba(240, 210, 160, .85);
  font: var(--fs-nano)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  cursor: pointer; font-stretch: var(--stretch-instrument); }
.cx-reset:hover, .cx-reset:focus-visible { color: #ffe6bd; border-bottom-color: rgba(255, 215, 150, .9); outline: none; }

/* Holographic research file. */
.cx-file-open .cx-world { opacity: .28; transition: opacity .4s ease; }
.cx-file-open .cx-commands { visibility: hidden; pointer-events: none; }
.cx-world { transition: opacity .4s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.cx-file {
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(540px, 60%);
  max-height: 72%;
  overflow-y: auto;
  padding: 14px 18px 14px;
  border: 1px solid rgba(110, 205, 255, .34);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(120, 210, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, rgba(6, 22, 40, .9), rgba(2, 10, 20, .88));
  box-shadow: inset 0 0 24px rgba(60, 170, 255, .1), 0 0 26px rgba(50, 150, 255, .2), 0 12px 32px rgba(0, 0, 0, .55);
  color: #c9e4f2;
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 200, 240, .5) transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: cx-file-in .45s cubic-bezier(.2, .7, .2, 1) both;
}
.cx-file::before {
  position: absolute;
  inset: 5px;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(rgba(150, 228, 255, .85), rgba(150, 228, 255, .85)) left top / 12px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .85), rgba(150, 228, 255, .85)) left top / 1px 12px no-repeat,
    linear-gradient(rgba(240, 200, 140, .8), rgba(240, 200, 140, .8)) right bottom / 12px 1px no-repeat,
    linear-gradient(rgba(240, 200, 140, .8), rgba(240, 200, 140, .8)) right bottom / 1px 12px no-repeat;
}
@keyframes cx-file-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.97); filter: brightness(1.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
}
.cx-file-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(110, 205, 255, .2); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.cx-file-id { color: rgba(150, 215, 245, .8); }
.cx-file-state { margin-left: auto; padding: 2px 6px; border: 1px solid rgba(240, 200, 140, .5); color: #ffdba6; }
.cx-file-close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(120, 210, 255, .4);
  border-radius: 0;
  background: rgba(6, 20, 36, .6);
  color: #cfeeff;
  font: var(--fs-small)/1 var(--mono);
  cursor: pointer;
}
.cx-file-close:hover, .cx-file-close:focus-visible { border-color: rgba(170, 235, 255, .95); color: #fff; outline: none; }
.cx-file-title { margin: 11px 0 3px; color: #f0faff; font: 600 var(--fs-h3)/1.3 var(--mono); letter-spacing: var(--ls-caps); text-shadow: 0 0 10px rgba(90, 200, 255, .45); font-stretch: var(--stretch-instrument); }
.cx-file-meta { color: rgba(150, 210, 240, .65); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.cx-file-section { margin: 12px 0 6px; color: rgba(240, 205, 150, .85); font-size: var(--fs-nano); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.cx-file-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 18px; margin: 0; padding: 0; list-style: none; }
.cx-file-chain li { position: relative; padding: 3px 7px; border: 1px solid rgba(110, 205, 255, .3); background: rgba(10, 34, 56, .45); color: #d6f1ff; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.cx-file-chain li.end { border-color: rgba(240, 200, 140, .55); color: #ffe2b3; }
.cx-file-chain li:not(:last-child)::after { position: absolute; right: -14px; top: 50%; content: '\2192'; color: rgba(140, 210, 245, .7); transform: translateY(-50%); }
.cx-file-text { margin: 0; color: #c3dbea; font-family: var(--sans); font-size: var(--fs-small); line-height: var(--lh-body); }
.cx-file-foot { margin-top: 13px; text-align: center; }

/* Scan markings sized to stay inside the slanted glass beside each topic. */
.cx-grid { width: 12%; height: 30%; }
.cx-readout { line-height: var(--lh-body); text-align: center; white-space: pre; }
.cx-readout.left { left: 17%; }
.cx-readout.right { left: 83%; }

/* CONNECT interaction + stacking fix.
   The network container (.cluster.current) took pointer input across the whole window and sat
   above the command row, so ACCESS CONNECTION DATA never received clicks. The network is now
   visual only (its topics are reached through the shared interaction layer), and the stacking
   order inside .cx-stage is explicit: network 2 < node targets 7 / preview 8 < commands 10 < file 11. */
.cluster.cx-net { pointer-events: none; }
.cx-stage > .cx-commands { z-index: 10; }
.cx-stage > .cx-file { z-index: 11; }

/* Feature switching: constellations that are not on screen stop animating. */
.view:not(.active) .cluster *,
.view:not(.active) .cluster *::before,
.view:not(.active) .cluster *::after,
.viewport-frame.drift-sweeping .universe *,
.viewport-frame.drift-sweeping .universe *::before,
.viewport-frame.drift-sweeping .universe *::after { animation-play-state: paused !important; }

/* ===== Standard holographic information panel (shared by every constellation) =====
   One component (.node-preview) serves Coordinates, Drift, CONNECT and reopened archives.
   Only its archive action changes: SAVE CONSTELLATION on a central topic, SAVE TOPIC elsewhere. */
.node-preview {
  width: min(272px, 40%);
  padding: 12px 14px 12px;
  border: 1px solid rgba(110, 205, 255, .34);
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(120, 210, 255, .028) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, rgba(8, 24, 42, .84), rgba(3, 10, 20, .88));
  box-shadow:
    inset 0 0 22px rgba(60, 170, 255, .12),
    inset 0 1px rgba(170, 230, 255, .1),
    0 0 18px rgba(50, 150, 255, .2),
    0 10px 26px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.97);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.node-preview.show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  animation: np-holo-in .34s ease-out both;
}
@keyframes np-holo-in {
  0% { filter: brightness(1.8) saturate(.6); }
  30% { filter: brightness(.85); }
  45% { filter: brightness(1.25); }
  100% { filter: none; }
}
/* Delicate technical corner markings: cyan on two corners, amber ticks on the others. */
.node-preview::before {
  position: absolute;
  inset: 4px;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) left top / 10px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) left top / 1px 10px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) right bottom / 10px 1px no-repeat,
    linear-gradient(rgba(150, 228, 255, .9), rgba(150, 228, 255, .9)) right bottom / 1px 10px no-repeat,
    linear-gradient(rgba(240, 200, 140, .8), rgba(240, 200, 140, .8)) right top / 5px 1px no-repeat,
    linear-gradient(rgba(240, 200, 140, .8), rgba(240, 200, 140, .8)) left bottom / 5px 1px no-repeat;
}
/* A faint scan of light passing down the panel while it is open. */
.node-preview::after {
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  content: '';
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(140, 220, 255, .06) 80%, rgba(180, 236, 255, .16) 100%);
  opacity: 0;
}
.node-preview.show::after { animation: np-scan 3.8s ease-in-out .3s infinite; }
@keyframes np-scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .7; }
  100% { transform: translateY(440%); opacity: 0; }
}
.np-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: rgba(240, 205, 150, .88);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.np-kicker::before {
  width: 5px;
  height: 5px;
  content: '';
  border: 1px solid rgba(240, 205, 150, .85);
  transform: rotate(45deg);
}
.np-title {
  display: block;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(120, 215, 255, .5), rgba(120, 215, 255, .05)) 1;
  color: #f2fbff;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-label);
  text-shadow: 0 0 8px rgba(80, 190, 255, .45); font-stretch: var(--stretch-instrument); }
.np-summary { max-height: 7.5em; margin: 0 0 10px; color: #bcd5e5; font-size: var(--fs-small); line-height: var(--lh-body); }

/* Archive action: an outlined bookmark that turns solid and illuminated once saved. */
.np-archive { display: flex; align-items: center; gap: 10px; min-height: 22px; margin-bottom: 10px; }
.np-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 7px;
  border: 1px solid rgba(120, 210, 255, .42);
  border-radius: 0;
  background: rgba(10, 34, 56, .45);
  color: #d6f1ff;
  font: 600 var(--fs-nano)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; font-stretch: var(--stretch-instrument); }
.np-save svg { width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: fill .25s ease, filter .25s ease; }
.np-save:hover, .np-save:focus-visible { border-color: rgba(170, 235, 255, .9); color: #fff; box-shadow: 0 0 10px rgba(80, 195, 255, .3); outline: none; }
.np-save.saved { border-color: rgba(245, 200, 130, .8); background: rgba(70, 46, 16, .45); color: #ffe2b3; box-shadow: 0 0 10px rgba(240, 180, 90, .25); }
.np-save.saved svg { fill: #ffcf80; stroke: #ffdba3; filter: drop-shadow(0 0 3px rgba(255, 200, 120, .9)); }
.np-save-msg { color: rgba(150, 228, 255, .9); font: var(--fs-nano)/1 var(--mono); letter-spacing: var(--ls-caps); opacity: 0; font-stretch: var(--stretch-instrument); }
.np-save-msg.show { animation: np-msg 2s ease both; }
@keyframes np-msg { 0% { opacity: 0; transform: translateX(-4px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.np-wiki[hidden], .np-explore[hidden] { display: none; }

/* CONNECT: the scan's fade-out rule must not hide the network phase's own status ("CONNECTION ESTABLISHED"). */
.cx-network .cx-status { opacity: 1 !important; animation-play-state: running !important; }
.np-save { flex: none; white-space: nowrap; }
.np-archive { flex-wrap: wrap; row-gap: 6px; }
.np-save-msg { white-space: nowrap; }
.np-summary.clipped { -webkit-mask: linear-gradient(180deg, #000 72%, transparent 100%); mask: linear-gradient(180deg, #000 72%, transparent 100%); }

/* CONNECT: three actions once the connection is established.
   Row 1: ACCESS CONNECTION DATA (primary) + SAVE CONNECTION. Row 2: SCAN NEW SECTOR (quiet). */
.cx-commands { bottom: 8%; flex-direction: column; gap: 12px; }
.cx-command-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cx-save-wrap { position: relative; }
.cx-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgba(240, 200, 140, .5);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(40, 30, 14, .5), rgba(14, 10, 6, .66));
  color: #f6e2c0;
  font: 600 var(--fs-micro)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(240, 180, 90, .1);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, background .2s ease; font-stretch: var(--stretch-instrument); }
.cx-save svg { width: 9px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: fill .25s ease, filter .25s ease; }
.cx-save:hover, .cx-save:focus-visible { border-color: rgba(255, 215, 150, .95); color: #fff3dc; box-shadow: inset 0 0 14px rgba(240, 180, 90, .2), 0 0 12px rgba(240, 180, 90, .22); outline: none; }
.cx-save.saved { border-color: rgba(255, 210, 140, .9); background: linear-gradient(180deg, rgba(80, 52, 18, .6), rgba(30, 20, 8, .7)); color: #ffe2b3; box-shadow: inset 0 0 14px rgba(240, 180, 90, .24), 0 0 14px rgba(240, 180, 90, .28); }
.cx-save.saved svg { fill: #ffcf80; stroke: #ffdba3; filter: drop-shadow(0 0 3px rgba(255, 200, 120, .9)); }
.cx-save-msg {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  color: rgba(255, 220, 160, .92);
  font: var(--fs-nano)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none; font-stretch: var(--stretch-instrument); }
.cx-save-msg.show { animation: np-msg 2.2s ease both; }
.cx-commands .cx-reset { margin-top: 4px; }

/* A suggested pair landing in SIGNAL A and SIGNAL B: a brief confirming glow on each field. */
.holo-field.filled-flash input { animation: holo-filled .9s ease-out; }
@keyframes holo-filled {
  0% { box-shadow: inset 0 0 26px rgba(120, 215, 255, .45), 0 0 18px rgba(100, 205, 255, .5); border-color: rgba(190, 240, 255, 1); }
  100% { box-shadow: inset 0 0 14px rgba(60, 170, 255, .12), inset 0 1px rgba(170, 230, 255, .08); }
}

/* ===== ARCHIVE: full-screen holographic interface =====
   Overlay above the whole cockpit (which stays visible, dimmed, behind it). Chamfered frames are drawn
   as two clipped layers: a bright 1px edge (::before) and the dark panel inset 1px inside it. */
.ar-root {
  --ar-edge: rgba(120, 214, 240, .5);
  --ar-text: #cfe9f2;
  --ar-soft: #7fa3b0;
  --ar-gold: #e9b45e;
  --ar-cut: 34px;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vh, 34px) clamp(10px, 3vw, 46px);
  color: var(--ar-text);
  font-family: var(--mono);
  letter-spacing: var(--ls-label);
  opacity: 0;
  transition: opacity .34s ease; font-stretch: var(--stretch-instrument); }
.ar-root[hidden] { display: none; }
.ar-root.open { opacity: 1; }
.ar-root button, .ar-root input, .ar-root select { font: inherit; letter-spacing: inherit; color: inherit; }
.ar-root button { cursor: pointer; }
.ar-root svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ar-root :focus-visible { outline: 1px solid var(--ar-gold); outline-offset: 2px; }
.ar-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(2, 10, 18, .72), rgba(1, 4, 8, .9));
  -webkit-backdrop-filter: blur(3px) saturate(.8);
  backdrop-filter: blur(3px) saturate(.8);
}
.ar-frame {
  position: relative;
  width: min(1560px, 100%);
  height: 100%;
  max-height: 900px;
  filter: drop-shadow(0 0 14px rgba(70, 180, 230, .22));
  transform: scale(.975) translateY(8px);
  transition: transform .4s var(--ease);
}
.ar-root.open .ar-frame { transform: none; }
.ar-frame::before, .ar-frame-inner {
  clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut));
}
.ar-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(150, 228, 250, .7), rgba(90, 170, 200, .32) 40%, rgba(120, 214, 240, .55));
}
.ar-frame-inner {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.4vh, 26px) clamp(18px, 3vw, 54px) clamp(16px, 2.6vh, 30px);
  background:
    linear-gradient(rgba(120, 210, 240, .035) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(120, 210, 240, .035) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(ellipse at 50% 0%, rgba(30, 80, 110, .45), transparent 60%),
    linear-gradient(180deg, rgba(7, 20, 30, .97), rgba(3, 10, 17, .98));
  box-shadow: inset 0 0 60px rgba(60, 160, 210, .12);
}
.ar-ornament {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  background:
    linear-gradient(var(--ar-gold), var(--ar-gold)) center / 1px 100% no-repeat,
    linear-gradient(var(--ar-gold), var(--ar-gold)) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 190, 90, .9));
}
.ar-ornament::before, .ar-ornament::after {
  content: '';
  position: absolute;
  top: 9px;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 228, 250, .7));
}
.ar-ornament::before { right: 26px; }
.ar-ornament::after { left: 26px; transform: scaleX(-1); }

.ar-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; flex: none; }
.ar-brand, .ar-version { padding-top: 10px; color: var(--ar-soft); font-size: var(--fs-small); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.ar-brand { font-family: var(--font-brand); font-size: clamp(10px, .8vw, 13px); letter-spacing: .26em; }   /* brand mark: original typography */
.ar-head-right { display: flex; justify-content: flex-end; align-items: center; gap: clamp(10px, 1.6vw, 24px); }
.ar-version { padding-top: 0; }
.ar-titlebox { position: relative; padding: 4px clamp(26px, 4vw, 60px) 0; text-align: center; }
.ar-titlebox::before, .ar-titlebox::after {
  content: '';
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border: 0 solid rgba(200, 236, 248, .8);
}
.ar-titlebox::before { left: 0; border-width: 2px 0 0 2px; }
.ar-titlebox::after { right: 0; border-width: 2px 2px 0 0; }
.ar-title { margin: 0; color: #e6f5fa; font-weight: 400; font-size: var(--fs-title); letter-spacing: var(--ls-wide); text-indent: var(--ls-wide); text-shadow: 0 0 18px rgba(120, 214, 240, .45); font-stretch: var(--stretch-instrument); }
.ar-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ar-edge);
  border-radius: 4px;
  background: rgba(20, 50, 66, .5);
  color: #dff4fa;
  box-shadow: inset 0 0 12px rgba(100, 200, 240, .18);
  transition: border-color .18s, background .18s, color .18s;
}
.ar-close svg { width: 22px; height: 22px; }
.ar-close:hover { border-color: var(--ar-gold); color: var(--ar-gold); background: rgba(60, 44, 18, .45); }

.ar-body { display: grid; grid-template-columns: clamp(220px, 19vw, 290px) 1fr; gap: clamp(16px, 2.2vw, 34px); flex: 1; min-height: 0; margin-top: clamp(10px, 2.4vh, 28px); }

/* Sidebar */
.ar-side {
  --ar-cut: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 14px 12px;
  overflow: hidden auto;
  isolation: isolate;
  scrollbar-width: thin;
}
/* Chamfered outline: an edge layer and the panel inset 1px inside it (both behind the content). */
.ar-side::before, .ar-side::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut));
}
.ar-side::before { inset: 0; background: linear-gradient(180deg, rgba(140, 222, 246, .5), rgba(100, 180, 210, .2) 50%, rgba(120, 214, 240, .4)); }
.ar-side::after { inset: 1px; background: linear-gradient(180deg, rgba(12, 32, 44, .96), rgba(6, 18, 27, .96)); }
.ar-side-nav { display: grid; gap: 4px; }
.ar-nav, .ar-col-open {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  color: #b9d6e0;
  font-size: var(--fs-small);
  text-align: left;
  transition: background .16s, border-color .16s, color .16s;
}
.ar-nav:hover, .ar-col-open:hover { background: rgba(90, 180, 220, .09); color: #e8f7fb; }
.ar-nav.active, .ar-col.active .ar-col-open {
  border-color: var(--ar-gold);
  background: linear-gradient(90deg, rgba(233, 180, 94, .16), rgba(233, 180, 94, .05));
  color: #fff3dc;
  box-shadow: 0 0 14px rgba(233, 180, 94, .22), inset 0 0 10px rgba(233, 180, 94, .1);
}
.ar-nav-icon { flex: none; width: 22px; height: 22px; color: var(--ar-soft); }
.ar-nav.active .ar-nav-icon, .ar-col.active .ar-nav-icon { color: var(--ar-gold); }
.ar-nav-label, .ar-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-nav-count { flex: none; color: var(--ar-soft); }
.ar-nav.active .ar-nav-count { color: #fff3dc; }
.ar-col-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; padding: 14px 12px 0; border-top: 1px solid rgba(120, 214, 240, .18); color: var(--ar-soft); font-size: var(--fs-small); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-col-add { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: #cfe9f2; }
.ar-col-add svg { width: 16px; height: 16px; }
.ar-col-add:hover { border-color: var(--ar-edge); color: var(--ar-gold); }
.ar-col-list { display: grid; gap: 2px; }
.ar-col { display: flex; align-items: center; gap: 2px; }
.ar-col-open { min-height: 36px; }
.ar-col-tool { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ar-soft); opacity: 0; transition: opacity .15s, color .15s; }
.ar-col-tool svg { width: 13px; height: 13px; }
.ar-col:hover .ar-col-tool, .ar-col-tool:focus-visible, .ar-col.active .ar-col-tool { opacity: 1; }
.ar-col-tool:hover { color: var(--ar-gold); }
.ar-col-edit { padding: 4px 6px; }
.ar-col-edit input, .ar-menu-new input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--ar-gold);
  border-radius: 2px;
  background: rgba(4, 14, 22, .8);
  font-size: var(--fs-small);
  text-transform: uppercase;
  outline: none;
}
.ar-col-empty { margin: 4px 12px; color: #5f818d; font-size: var(--fs-micro); line-height: var(--lh-body); }
/* Holographic planetary system (decorative, bottom of the sidebar). */
.ar-planet { margin-top: auto; padding-top: 14px; pointer-events: none; }
.ar-planet .arp-svg { width: 100%; max-width: 230px; margin: 0 auto; overflow: visible; fill: none; stroke: none; stroke-linecap: round; }
.ar-planet .arp-beam { opacity: .7; }
.ar-planet .arp-svg * { vector-effect: non-scaling-stroke; }
.ar-planet .arp-orbit-back { opacity: .22; }
.ar-planet .arp-bodies circle { filter: drop-shadow(0 0 2px rgba(150, 228, 255, .9)); }
.ar-planet .arp-bodies circle[fill="#ffcf80"] { filter: drop-shadow(0 0 2px rgba(255, 200, 120, .9)); }
.ar-planet .arp-rim { opacity: .55; filter: drop-shadow(0 0 3px rgba(120, 214, 240, .8)); }
.ar-planet .arp-halo { animation: arp-breathe 7s ease-in-out infinite; transform-origin: 110px 62px; }
.ar-planet .arp-bands { animation: arp-spin 28s linear infinite; }
.ar-planet .arp-scan { animation: arp-scan 9s ease-in-out infinite; }
.ar-planet .arp-stars circle { animation: arp-twinkle 5s ease-in-out infinite; }
.ar-planet .arp-stars circle:nth-child(2n) { animation-duration: 7s; animation-delay: -2s; }
.ar-planet .arp-stars circle:nth-child(3n) { animation-duration: 6s; animation-delay: -4s; }
.ar-planet .arp-glint { animation: arp-twinkle 6s ease-in-out -1s infinite; }
.ar-planet .arp-beam { animation: arp-beam 7s ease-in-out -3.5s infinite; }
@keyframes arp-beam { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
.ar-planet .arp-emitter { opacity: .45; }
@keyframes arp-spin { from { transform: translateX(0); } to { transform: translateX(-50px); } }
@keyframes arp-breathe { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes arp-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes arp-scan { 0%, 55% { transform: translateY(0); opacity: 0; } 62% { opacity: .22; } 90% { opacity: .12; } 100% { transform: translateY(52px); opacity: 0; } }

/* Toolbar */
.ar-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ar-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: none;
  padding: 8px 10px;
  border: 1px solid rgba(120, 214, 240, .24);
  border-radius: 3px;
  background: rgba(8, 24, 34, .55);
  font-size: var(--fs-small);
}
.ar-count { margin-right: auto; padding-left: 4px; color: #d7eef5; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-search { display: flex; align-items: center; gap: 7px; min-width: 150px; padding: 0 9px; border: 1px solid rgba(120, 214, 240, .22); border-radius: 2px; background: rgba(3, 12, 18, .6); color: var(--ar-soft); }
.ar-search svg { flex: none; width: 14px; height: 14px; }
.ar-search input { width: 100%; min-width: 0; padding: 7px 0; border: 0; background: none; outline: none; font-size: inherit; }
.ar-search input::placeholder { color: #5f818d; }
.ar-search:focus-within { border-color: var(--ar-gold); }
/* Custom holographic dropdown control (replaces native selects) */
.ar-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px 6px 9px;
  border: 1px solid rgba(120, 214, 240, .3);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(14, 40, 56, .7), rgba(4, 14, 22, .78));
  color: #d7eef5;
  font-size: inherit;
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  box-shadow: inset 0 0 10px rgba(70, 180, 230, .1);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: border-color .18s, box-shadow .18s, color .18s; font-stretch: var(--stretch-instrument); }
.ar-dd:hover, .ar-dd:focus-visible, .ar-dd.open { border-color: rgba(160, 232, 255, .8); color: #fff; box-shadow: inset 0 0 14px rgba(80, 195, 240, .22), 0 0 10px rgba(80, 195, 240, .18); outline: none; }
.ar-dd-icon { display: grid; place-items: center; flex: none; width: 14px; height: 14px; color: #8fdcf2; }
.ar-dd-icon svg { width: 14px; height: 14px; stroke-width: 1.5; }
.ar-dd-value { overflow: hidden; text-overflow: ellipsis; }
.ar-dd-chev { display: grid; place-items: center; flex: none; width: 10px; height: 10px; margin-left: 2px; color: var(--ar-gold); transition: transform .22s var(--ease); }
.ar-dd-chev svg { width: 10px; height: 7px; stroke-width: 1.6; }
.ar-dd.open .ar-dd-chev { transform: rotate(180deg); }
.ar-layout { display: flex; gap: 4px; }
.ar-layout-btn { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--ar-soft); }
.ar-layout-btn svg { width: 17px; height: 17px; }
.ar-layout-btn.active { border-color: var(--ar-gold); color: var(--ar-gold); box-shadow: 0 0 10px rgba(233, 180, 94, .25); }
.ar-section-title { display: flex; align-items: center; gap: 14px; flex: none; margin: 14px 2px 10px; color: var(--ar-soft); font-size: var(--fs-small); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.ar-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(120, 214, 240, .3), transparent); }
.ar-inline { padding: 2px 8px; border: 1px solid rgba(120, 214, 240, .3); border-radius: 2px; background: none; font-size: var(--fs-micro); color: #b9d6e0; }
.ar-inline:hover { border-color: var(--ar-gold); color: var(--ar-gold); }

/* File grid */
.ar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  align-content: start;
  gap: clamp(14px, 1.8vw, 26px);
  flex: 1;
  min-height: 0;
  padding: 10px 10px 18px 2px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 214, 240, .45) transparent;
}
.ar-grid.list { grid-template-columns: 1fr; gap: 10px; }
.ar-empty { grid-column: 1 / -1; padding: 60px 20px; border: 1px dashed rgba(120, 214, 240, .26); text-align: center; color: var(--ar-soft); }
.ar-empty strong { display: block; color: #d7eef5; font-weight: 400; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.ar-empty p { max-width: 520px; margin: 12px auto 0; font-family: var(--sans); font-size: var(--fs-body); letter-spacing: var(--ls-body); line-height: var(--lh-body); }

/* Folder-tab file card */
.ar-card {
  --tone: #6fd6f0;
  --tab: polygon(0 14px, 12px 0, 38% 0, calc(38% + 14px) 14px, calc(100% - 12px) 14px, 100% 26px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  position: relative;
  min-width: 0;
  animation: ar-card-in .42s var(--ease) both;
  animation-delay: var(--d, 0ms);
  transition: filter .2s;
}
.ar-card.type-constellation { --tone: #6fd6f0; --badge: var(--ar-gold); }
.ar-card.type-topic { --tone: #73c4ff; --badge: #8fd8ff; }
.ar-card.type-connection { --tone: #9fb8ff; --badge: #c9b6ff; }
@keyframes ar-card-in { from { opacity: 0; transform: translateY(10px); } }
.ar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--tab);
  background: linear-gradient(170deg, rgba(150, 228, 250, .6), rgba(80, 150, 180, .25) 50%, rgba(120, 214, 240, .45));
  transition: background .2s;
}
.ar-card.type-connection::before { background: linear-gradient(110deg, rgba(120, 214, 240, .62), rgba(80, 150, 180, .25) 50%, rgba(233, 180, 94, .55)); }
.ar-card:hover { filter: drop-shadow(0 0 10px rgba(90, 200, 240, .28)); }
.ar-card:hover::before { background: linear-gradient(170deg, rgba(190, 240, 255, .85), rgba(110, 190, 220, .4) 50%, rgba(150, 228, 250, .65)); }
.ar-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100% - 2px);
  margin: 1px;
  padding: 22px 16px 12px;
  clip-path: var(--tab);
  background:
    linear-gradient(rgba(120, 210, 240, .03) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(120, 210, 240, .03) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(165deg, rgba(14, 38, 52, .96), rgba(5, 15, 23, .97));
}
.ar-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-badge { padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--badge) 55%, transparent); border-radius: 2px; color: var(--badge); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-mark { width: 22px; height: 28px; margin: -4px -2px 0 0; padding: 3px; border: 0; background: none; color: var(--ar-gold); filter: drop-shadow(0 0 5px rgba(233, 180, 94, .55)); transition: transform .15s, color .15s; }
.ar-mark svg { width: 100%; height: 100%; fill: rgba(233, 180, 94, .85); stroke-width: 1.2; }
.ar-mark:hover { transform: translateY(1px); }
.ar-mark:hover svg { fill: transparent; }
.ar-card-body { display: grid; grid-template-columns: 40% 1fr; gap: 14px; flex: 1; margin-top: 8px; }
.ar-preview { align-self: center; color: var(--tone); }
.ar-preview-svg { width: 100%; height: auto; overflow: visible; }
.ar-preview-svg line { stroke: currentColor; stroke-width: .6; opacity: .55; }
.ar-preview-svg line.cross { stroke-dasharray: 1.4 1.6; opacity: .3; }
.ar-preview-svg line.branch { opacity: .38; }
.ar-preview-svg circle { fill: #bdf2ff; stroke: none; filter: drop-shadow(0 0 1.6px currentColor); }
.ar-preview-svg circle.main { fill: #fff; filter: drop-shadow(0 0 3px currentColor); }
.ar-card.type-connection .ar-preview-svg circle.end { fill: var(--ar-gold); filter: drop-shadow(0 0 2.4px var(--ar-gold)); }
.ar-card-text { min-width: 0; }
.ar-card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; color: #eaf8fc; font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--ls-caps); line-height: var(--lh-body); overflow-wrap: anywhere; font-stretch: var(--stretch-instrument); }
.ar-card-title i { color: var(--ar-gold); font-style: normal; }
.ar-card-meta { display: block; margin-top: 5px; color: var(--tone); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-card-desc { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: #a9c6d1; font-family: var(--sans); font-size: var(--fs-small); letter-spacing: var(--ls-body); line-height: var(--lh-body); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ar-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(120, 214, 240, .18); color: var(--ar-soft); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-src { display: flex; align-items: center; gap: 7px; }
.ar-src svg { width: 14px; height: 14px; }
.ar-src b { color: #cfe9f2; font-weight: 400; }
.ar-card-actions { display: flex; gap: 6px; margin-top: 9px; }
.ar-act { flex: 1; min-width: 0; min-height: 28px; padding: 4px 4px; border: 1px solid rgba(120, 214, 240, .28); border-radius: 2px; background: rgba(40, 110, 140, .12); color: #cfe9f2; font-size: var(--fs-micro); letter-spacing: var(--ls-label); white-space: nowrap; transition: border-color .15s, color .15s, background .15s; font-stretch: var(--stretch-instrument); }
.ar-act:hover { border-color: #9fe8ff; background: rgba(60, 160, 200, .2); color: #fff; }
.ar-act.primary { flex: 1.35 1 0; border-color: rgba(233, 180, 94, .6); color: #ffe3b3; background: rgba(233, 180, 94, .1); }
.ar-act.primary:hover { border-color: var(--ar-gold); background: rgba(233, 180, 94, .22); }
.ar-act.danger:hover { border-color: #ff8d7a; color: #ffc2b6; background: rgba(160, 50, 40, .2); }

/* List layout: one wide row per file */
.ar-grid.list .ar-card { --tab: polygon(0 10px, 10px 0, 22% 0, calc(22% + 10px) 10px, calc(100% - 10px) 10px, 100% 20px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)); }
.ar-grid.list .ar-card-inner { display: grid; grid-template-columns: 110px 1fr auto; grid-template-areas: "top top top" "body body actions" "foot foot actions"; column-gap: 16px; padding: 16px 14px 10px; }
.ar-grid.list .ar-card-top { grid-area: top; }
.ar-grid.list .ar-card-body { grid-area: body; grid-template-columns: 110px 1fr; margin-top: 4px; }
.ar-grid.list .ar-card-foot { grid-area: foot; margin-top: 6px; padding-top: 6px; }
.ar-grid.list .ar-card-actions { grid-area: actions; flex-direction: column; justify-content: center; margin: 0; min-width: 120px; }
.ar-grid.list .ar-card-desc { -webkit-line-clamp: 2; }

/* Floating holographic menus: dropdown option lists and the collection menu share one look. */
.ar-pop {
  position: fixed;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 10px 8px 8px;
  border: 1px solid rgba(120, 214, 240, .5);
  background:
    repeating-linear-gradient(0deg, rgba(120, 210, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, rgba(10, 32, 46, .9), rgba(3, 11, 18, .94));
  box-shadow: inset 0 0 18px rgba(60, 170, 230, .14), 0 0 22px rgba(60, 170, 230, .22), 0 14px 30px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-size: var(--fs-small);
  transform-origin: top right;
  animation: ar-pop-in .2s var(--ease);
}
.ar-pop.from-above { transform-origin: bottom right; }
.ar-pop[hidden] { display: none; }
.ar-pop.closing { opacity: 0; transform: translateY(-4px) scale(.98); transition: opacity .15s ease, transform .15s ease; }
.ar-pop::before {
  position: absolute;
  inset: 4px;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(rgba(160, 232, 255, .9), rgba(160, 232, 255, .9)) left top / 9px 1px no-repeat,
    linear-gradient(rgba(160, 232, 255, .9), rgba(160, 232, 255, .9)) left top / 1px 9px no-repeat,
    linear-gradient(rgba(233, 180, 94, .85), rgba(233, 180, 94, .85)) right bottom / 9px 1px no-repeat,
    linear-gradient(rgba(233, 180, 94, .85), rgba(233, 180, 94, .85)) right bottom / 1px 9px no-repeat;
}
@keyframes ar-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); filter: brightness(1.5); } }
.ar-pop-head { display: flex; align-items: center; gap: 8px; margin: 0 6px 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(120, 214, 240, .16); color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.ar-pop-head::before { width: 5px; height: 5px; content: ''; border: 1px solid rgba(233, 180, 94, .85); transform: rotate(45deg); }
.ar-dd-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid transparent;
  background: none;
  color: #b9d6e0;
  letter-spacing: var(--ls-caps);
  text-align: left;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s; font-stretch: var(--stretch-instrument); }
.ar-dd-opt:hover, .ar-dd-opt:focus-visible { border-color: rgba(120, 214, 240, .3); background: linear-gradient(90deg, rgba(80, 190, 235, .16), rgba(80, 190, 235, .03)); color: #f0fbff; outline: none; }
.ar-dd-text { flex: 1; }
.ar-dd-mark { flex: none; width: 6px; height: 6px; border: 1px solid rgba(160, 220, 240, .35); transform: rotate(45deg); }
.ar-dd-opt.selected { border-color: rgba(233, 180, 94, .5); background: linear-gradient(90deg, rgba(233, 180, 94, .16), rgba(233, 180, 94, .03)); color: #ffe7c0; }
.ar-dd-opt.selected .ar-dd-icon { color: var(--ar-gold); }
.ar-dd-opt.selected .ar-dd-mark { border-color: var(--ar-gold); background: var(--ar-gold); box-shadow: 0 0 6px rgba(233, 180, 94, .8); }
.ar-dd-opt.selected::before { position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; content: ''; background: var(--ar-gold); box-shadow: 0 0 6px rgba(233, 180, 94, .8); }

/* Collection menu */
.ar-menu { width: 240px; }
.ar-menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border: 0; border-radius: 2px; background: none; text-align: left; }
.ar-menu-item:hover { background: rgba(90, 180, 220, .1); }
.ar-menu-item i { flex: none; width: 11px; height: 11px; border: 1px solid rgba(160, 220, 240, .6); border-radius: 1px; }
.ar-menu-item.on i { border-color: var(--ar-gold); background: var(--ar-gold); box-shadow: 0 0 6px rgba(233, 180, 94, .7); }
.ar-menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-menu-new { margin-top: 6px; }
.ar-menu-new input { border-color: rgba(120, 214, 240, .35); }
.ar-menu-new input:focus { border-color: var(--ar-gold); }

/* Responsive */
@media (max-width: 980px) {
  .ar-root { --ar-cut: 22px; padding: 8px; }
  .ar-frame { max-height: none; }
  .ar-frame-inner { padding: 14px 16px 16px; overflow: hidden auto; }
  .ar-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; }
  .ar-side, .ar-side-nav, .ar-col-list { min-width: 0; }
  .ar-side { --ar-cut: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; overflow: visible; }
  .ar-side-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .ar-nav, .ar-col-open { width: auto; min-height: 34px; padding: 4px 10px; gap: 8px; }
  .ar-nav-icon { width: 17px; height: 17px; }
  .ar-col-head { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid rgba(120, 214, 240, .2); gap: 6px; }
  .ar-col-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .ar-col-empty { display: none; }
  .ar-planet { display: none; }
  .ar-main { min-height: 420px; }
}
@media (max-width: 640px) {
  .ar-head { grid-template-columns: 1fr auto; }
  .ar-brand { display: none; }
  .ar-titlebox { justify-self: start; padding: 2px 22px 0; text-align: left; }
  .ar-title { letter-spacing: var(--ls-wide); text-indent: 0; font-stretch: var(--stretch-instrument); }
  .ar-version { display: none; }
  .ar-tools { gap: 8px; }
  .ar-count { flex-basis: 100%; }
  .ar-search { flex: 1 1 100%; }
  .ar-dd { flex: 1; min-width: 0; }
  .ar-grid { grid-template-columns: 1fr; padding-right: 2px; }
  .ar-side { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  .ar-side-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ar-nav { flex: none; }
  .ar-col-head { justify-content: flex-start; padding: 6px 0 0 10px; border-left: 0; }
  .ar-col-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ar-col { flex: none; }
  .ar-dd { padding-right: 8px; font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
  .ar-grid.list .ar-card-inner { grid-template-columns: 1fr; grid-template-areas: "top" "body" "foot" "actions"; }
  .ar-grid.list .ar-card-body { grid-template-columns: 90px 1fr; }
  .ar-grid.list .ar-card-actions { flex-direction: row; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-root, .ar-frame, .ar-card { transition: none; animation: none; }
  .ar-planet * { animation: none !important; }
}

/* ===== Information panel actions: OPEN SIGNAL above the Archive save, stacked vertically ===== */
.node-preview .np-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.np-open {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 7px 11px;
  border: 1px solid rgba(120, 215, 255, .6);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(30, 110, 180, .22), rgba(8, 30, 54, .4));
  color: #e6f7ff;
  font: 600 var(--fs-nano)/1 var(--mono);
  letter-spacing: var(--ls-caps);
  cursor: pointer;
  box-shadow: inset 0 0 10px rgba(70, 185, 255, .12);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; font-stretch: var(--stretch-instrument); }
.np-open b { color: rgba(245, 205, 145, .9); font-weight: 400; transition: transform .18s ease; }
.np-open:hover, .np-open:focus-visible { border-color: rgba(170, 235, 255, .95); background: linear-gradient(180deg, rgba(50, 150, 230, .34), rgba(12, 44, 76, .5)); color: #fff; box-shadow: inset 0 0 14px rgba(80, 195, 255, .24), 0 0 12px rgba(80, 195, 255, .22); outline: none; }
.np-open:hover b, .np-open:focus-visible b { transform: translateX(3px); }
.np-open[hidden] { display: none; }
.node-preview .np-archive { flex-direction: column; align-items: stretch; gap: 5px; min-height: 0; margin: 0; }
.node-preview .np-save { justify-content: center; padding: 6px 10px; }
.node-preview .np-save-msg { min-height: 8px; text-align: center; }
/* A panel carrying a full explanation (CONNECT's meeting point) widens and shows all of its text. */
.node-preview.np-long { width: min(340px, 46%); }
.node-preview.np-long .np-summary { max-height: none; }

/* CONNECT actions: ACCESS CONNECTION DATA + SCAN NEW SECTOR on the first row, SAVE CONNECTION beneath. */
.cx-command-row .cx-reset { margin-top: 0; }

/* Archive buttons inherit the root font (.ar-root button); these controls set their own size and spacing. */
.ar-root .ar-act { font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.ar-root .ar-dd { font-size: var(--fs-small); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-root .ar-dd-opt { font-size: var(--fs-small); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
@media (max-width: 640px) { .ar-root .ar-dd { font-size: var(--fs-micro); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); } }

/* OPEN SIGNAL as a link (hover panel and Archive cards) */
a.np-open { text-decoration: none; }
.np-open b { font-size: var(--fs-micro); }
.np-open:hover b, .np-open:focus-visible b { transform: translate(2px, -2px); }
/* Archive card actions: two rows (EXPLORE/REOPEN + OPEN SIGNAL, then COLLECT + REMOVE). */
.ar-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ar-card-actions.three .primary { grid-column: 1 / -1; }
.ar-root .ar-act { flex: none; }
a.ar-act { display: flex; align-items: center; justify-content: center; gap: 6px; color: #cfe9f2; text-decoration: none; white-space: nowrap; }
a.ar-act b { color: var(--ar-gold); font-weight: 400; }
.ar-grid.list .ar-card-actions { display: grid; grid-template-columns: 1fr 1fr; align-content: center; min-width: 240px; }
@media (max-width: 640px) { .ar-grid.list .ar-card-actions { display: grid; } }

/* Archive sidebar typography: about 12% smaller than before (nav and collection buttons inherited
   16px from the root button rule; the COLLECTIONS heading and empty note scale down to match). */
.ar-root .ar-nav, .ar-root .ar-col-open { font-size: var(--fs-body); gap: 10px; }
.ar-root .ar-col-head { font-size: var(--fs-nano); }
.ar-root .ar-col-empty { font-size: var(--fs-nano); }
.ar-root .ar-col-edit input { font-size: var(--fs-nano); }
/* Collection rows: long names truncate inside the sidebar and their counts line up with the section
   counts; rename/delete tools appear over the count on hover or keyboard focus. */
.ar-col { position: relative; }
.ar-root .ar-col-open { flex: 1; min-width: 0; }
.ar-col .ar-col-tool { position: absolute; top: 50%; transform: translateY(-50%); }
.ar-col .ar-col-tool:nth-of-type(2) { right: 30px; }
.ar-col .ar-col-tool:nth-of-type(3) { right: 6px; }
.ar-col.active .ar-col-tool { opacity: 0; }
.ar-col:hover .ar-col-tool, .ar-col:focus-within .ar-col-tool { opacity: 1; }
.ar-col:hover .ar-nav-count, .ar-col:focus-within .ar-nav-count { visibility: hidden; }
.ar-col-list { grid-template-columns: minmax(0, 1fr); }
.ar-col { min-width: 0; }
.ar-side-nav { grid-template-columns: minmax(0, 1fr); }
/* Minimum sidebar width so the longest label (CONSTELLATIONS + count) fits on smaller laptop screens. */
@media (min-width: 981px) { .ar-body { grid-template-columns: clamp(266px, 19vw, 290px) 1fr; } }
/* Header without a subtitle: a little breathing room under the ARCHIVE heading. */
.ar-titlebox { padding-bottom: clamp(4px, 1vh, 10px); }

/* ===== LOG: full-screen exploration history =====
   Shares the Archive's holographic frame, sidebar, toolbar and dropdowns (.ar-*); adds the timeline. */
.lg-root {
  --lg-coord: #6fd6f0;
  --lg-drift: #e9b45e;
  --lg-connect: #b8a6ff;
}
.lg-root .ar-ornament {
  top: -7px;
  width: 260px;
  height: 14px;
  background: none;
  filter: none;
}
/* A horizontal line of amber light with a small glowing diamond at its centre. */
.lg-root .ar-ornament::after {
  top: 7px;
  left: 0;
  right: 0;
  width: auto;
  background: linear-gradient(90deg, transparent, rgba(233, 180, 94, .85) 35%, rgba(255, 215, 150, .95) 50%, rgba(233, 180, 94, .85) 65%, transparent);
  transform: none;
}
.lg-root .ar-ornament::before {
  top: 2px;
  left: 50%;
  right: auto;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: #ffcf80;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 190, 90, .95);
}

/* Sidebar statistics */
.lg-stats { margin: 16px 0 0; padding: 14px 12px 0; border-top: 1px solid rgba(120, 214, 240, .18); }
.lg-stats-head { margin: 0 0 10px; color: var(--ar-soft); font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-stats-list { display: grid; gap: 8px; margin: 0; }
.lg-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lg-stat dt { color: #9fbfca; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-stat dd { margin: 0; color: #e6f6fb; font-size: var(--fs-micro); letter-spacing: var(--ls-label); white-space: nowrap; font-stretch: var(--stretch-instrument); }
.lg-activity { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 54px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(120, 214, 240, .14); }
.lg-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.lg-bar i { width: 100%; max-width: 12px; min-height: 2px; background: linear-gradient(180deg, rgba(159, 232, 255, .85), rgba(80, 170, 210, .25)); box-shadow: 0 0 6px rgba(110, 210, 245, .35); }
.lg-bar.today i { background: linear-gradient(180deg, #ffcf80, rgba(233, 180, 94, .3)); box-shadow: 0 0 6px rgba(233, 180, 94, .5); }
.lg-bar b { color: #5f818d; font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.lg-bar.today b { color: var(--ar-gold); }

/* Sidebar decoration: a planetary horizon catching amber light */
.lg-horizon { margin-top: auto; padding-top: 12px; pointer-events: none; }
.lg-horizon .lgh-svg { width: 100%; max-width: 240px; margin: 0 auto; fill: none; stroke: none; }
.lg-horizon .lgh-rim { filter: drop-shadow(0 0 4px rgba(255, 200, 120, .6)); animation: arp-breathe 8s ease-in-out infinite; }
.lg-horizon .lgh-orbit { opacity: .25; stroke-dasharray: 3 7; animation: lgh-drift 40s linear infinite; }
.lg-horizon .lgh-stars circle { animation: arp-twinkle 6s ease-in-out infinite; }
.lg-horizon .lgh-stars circle:nth-child(2n) { animation-duration: 8s; animation-delay: -3s; }
.lg-horizon .lgh-spark { filter: drop-shadow(0 0 3px rgba(255, 200, 120, .9)); animation: arp-twinkle 5s ease-in-out infinite; }
@keyframes lgh-drift { to { stroke-dashoffset: -200; } }

@media (max-width: 980px) {
  .lg-stats { flex-basis: 100%; margin: 6px 0 0; padding: 8px 4px 0; }
  .lg-stats-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
  .lg-activity, .lg-horizon { display: none; }
}
@media (max-width: 640px) {
  .lg-stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .lg-entry, .lg-horizon * { animation: none !important; } }
@media (max-width: 640px) {
  .lg-root .ar-side-nav { flex-shrink: 0; }
  .lg-root .ar-dd { flex: 1 1 40%; }
}

/* ===== LOG views =====
   Shared: the scroll area, date groupings, badges, titles and the REOPEN action. */
.lg-timeline {
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  padding: 4px 10px 18px 2px;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 214, 240, .45) transparent;
}
.lg-entry { --tone: var(--lg-coord); }
.lg-entry.mode-drift { --tone: var(--lg-drift); }
.lg-entry.mode-connect { --tone: var(--lg-connect); }
.lg-day { position: relative; margin-bottom: 20px; }
.lg-date { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #cfe9f2; font-weight: 400; font-size: var(--fs-small); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.lg-date i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ar-gold); box-shadow: 0 0 8px rgba(255, 200, 120, .9); }
.lg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); color: var(--tone); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-badge i { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.lg-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; color: #eaf8fc; font-weight: 400; letter-spacing: var(--ls-caps); line-height: var(--lh-tight); overflow-wrap: anywhere; font-stretch: var(--stretch-instrument); }
.lg-title i { color: var(--ar-gold); font-style: normal; }
.lg-dur { display: inline-flex; align-items: center; gap: 6px; color: #b9d6e0; white-space: nowrap; }
.lg-dur svg { width: 13px; height: 13px; color: var(--ar-soft); }
.ar-root .lg-reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(233, 180, 94, .55);
  background: rgba(233, 180, 94, .08);
  color: #ffe3b3;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s; font-stretch: var(--stretch-instrument); }
.lg-reopen svg { width: 7px; height: 11px; stroke-width: 1.6; transition: transform .15s; }
.ar-root .lg-reopen:hover, .ar-root .lg-reopen:focus-visible { border-color: var(--ar-gold); background: rgba(233, 180, 94, .2); color: #fff3dc; outline: none; }
.lg-reopen:hover svg, .lg-reopen:focus-visible svg { transform: translateX(2px); }

/* Log list: full-width rows on the date's timeline, separated by fine illuminated dividers (no boxes) */
.lg-rows { display: grid; }
.lg-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(76px, 7vw, 104px) minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(12px, 1.4vw, 22px);
  min-height: 64px;
  padding: 9px 8px 9px 4px;
  animation: ar-card-in .38s var(--ease) both;
  animation-delay: var(--d, 0ms);
  transition: background .15s;
}
.lg-row + .lg-row::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, rgba(120, 214, 240, .42), rgba(120, 214, 240, .12) 65%, transparent);
  box-shadow: 0 0 4px rgba(120, 214, 240, .3);
}
.lg-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 9%, transparent), transparent 70%); }
.lg-row .lg-marker {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(4, 14, 22, .9), 0 0 9px var(--tone);
}
.lg-thumb { display: grid; place-items: center; height: 46px; padding: 3px 6px; border-left: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 8%, transparent), transparent); color: var(--tone); }
.lg-thumb .ar-preview-svg { width: 100%; height: 100%; }
.lg-thumb .ar-preview-svg line { stroke-width: .7; }
.lg-thumb .ar-preview-svg line.cross { opacity: .2; }
.lg-entry.mode-connect .ar-preview-svg circle.end { fill: var(--ar-gold); filter: drop-shadow(0 0 2.4px var(--ar-gold)); }
.lg-row-main { min-width: 0; }
.lg-row .lg-title { display: block; overflow: hidden; font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; }
.lg-row .lg-title i { margin: 0 8px; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 5px; }
.lg-kind, .lg-when { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-row .lg-badge { padding: 1px 6px; font-size: var(--fs-nano); }
.lg-row .lg-summary { margin: 5px 0 0; overflow: hidden; color: #9fbecb; font-family: var(--sans); font-size: var(--fs-small); letter-spacing: var(--ls-body); line-height: var(--lh-body); text-overflow: ellipsis; white-space: nowrap; }
.lg-row .lg-dur { font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.ar-root .lg-row-reopen { min-height: 28px; padding: 5px 12px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
@media (max-width: 640px) {
  .lg-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .lg-thumb { display: none; }
  .lg-row .lg-dur { grid-column: 1; grid-row: 2; }
  .lg-row-reopen { grid-column: 2; grid-row: 1 / span 2; }
  .lg-row .lg-marker { left: -20px; }
}
@media (prefers-reduced-motion: reduce) { .lg-row { animation: none; } }
/* ===== Holographic system transitions (ARCHIVE and LOG) =====
   .hs-open-seq / .hs-close-seq on the overlay root run one timed sequence; .hs-busy blocks input. */
.ar-root.hs-busy .ar-frame { pointer-events: none; }
.holo-boot, .holo-scan { position: absolute; pointer-events: none; opacity: 0; visibility: hidden; }
.hs-open-seq .holo-boot, .hs-open-seq .holo-scan, .hs-close-seq .holo-scan { visibility: visible; }

/* Stage 1: boot-up readout */
.holo-boot { inset: 0; z-index: 3; display: grid; place-items: center; }
.hb-core { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 16px; text-align: center; }
.hb-ring { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); fill: none; overflow: visible; }
.hb-ring .hb-r1 { stroke: rgba(120, 214, 240, .35); stroke-width: .8; stroke-dasharray: 60 14 4 14; transform-box: fill-box; transform-origin: center; animation: hb-spin 4s linear infinite; }
.hb-ring .hb-r2 { stroke: rgba(233, 180, 94, .4); stroke-width: .6; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: hb-spin 6s linear infinite reverse; }
.hb-ring .hb-ticks { stroke: rgba(160, 232, 255, .6); stroke-width: 1; }
.hb-ring .hb-dot { fill: #9fe8ff; filter: drop-shadow(0 0 4px #7ad8ff); }
.hb-tag { position: relative; color: rgba(233, 180, 94, .85); font-size: var(--fs-nano); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.hb-msg { position: relative; color: #e6f6fb; font-size: var(--fs-h3); letter-spacing: var(--ls-wide); text-shadow: 0 0 12px rgba(120, 214, 240, .55); white-space: nowrap; font-stretch: var(--stretch-instrument); }
.hb-bar { position: relative; width: min(260px, 70vw); height: 2px; background: rgba(120, 214, 240, .16); }
.hb-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(120, 214, 240, .4), #bff1ff); box-shadow: 0 0 8px rgba(140, 225, 255, .8); }
.hb-sub { position: relative; color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.hb-read { position: absolute; color: rgba(150, 210, 230, .55); font-size: var(--fs-nano); line-height: var(--lh-body); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.hb-read.tl { left: 6%; top: 8%; }
.hb-read.tr { right: 6%; top: 8%; text-align: right; }
.hb-read.bl { left: 6%; bottom: 8%; }
.hb-read.br { right: 6%; bottom: 8%; text-align: right; }
@keyframes hb-spin { to { transform: rotate(360deg); } }

/* Stage 2: the scan line that resolves the frame */
.holo-scan {
  z-index: 4;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(150, 230, 255, .9) 12%, #e6f9ff 50%, rgba(150, 230, 255, .9) 88%, transparent);
  box-shadow: 0 0 12px rgba(120, 214, 240, .9), 0 0 34px rgba(80, 190, 240, .45);
}
.holo-scan::after { position: absolute; left: 0; right: 0; bottom: 2px; height: 46px; content: ''; background: linear-gradient(0deg, rgba(120, 214, 240, .12), transparent); }

/* Opening sequence (1.8s) */
.hs-open-seq .ar-veil { animation: hs-veil 4s ease both; }
.hs-open-seq .holo-boot { animation: hs-boot 4.1s ease both; }
.hs-open-seq .hb-bar i { animation: hs-progress 2.6s cubic-bezier(.45, .05, .3, 1) .4s both; }
.hs-open-seq .hb-msg { animation: hs-msg .9s var(--ease) .1s both; }
.hs-open-seq .hb-read { animation: hs-fade .4s ease .15s both; }
.hs-open-seq .hb-read.tr { animation-delay: .3s; }
.hs-open-seq .hb-read.bl { animation-delay: .45s; }
.hs-open-seq .hb-read.br { animation-delay: .6s; }
.hs-open-seq .holo-scan { animation: hs-scan-down .62s cubic-bezier(.45, 0, .25, 1) 3.6s both; }
.hs-open-seq .ar-frame { transform-origin: 50% 100%; animation: hs-frame-in 1.3s cubic-bezier(.2, .7, .2, 1) 3.6s both; }
.hs-open-seq .ar-ornament { animation: hs-fade .4s ease 4.08s both; }
.hs-open-seq .ar-head { animation: hs-head .55s var(--ease) 4.08s both; }
.hs-open-seq .ar-title { animation: hs-title .7s var(--ease) 4.08s both; }
.hs-open-seq .ar-side { transform-origin: 0 50%; animation: hs-side .65s cubic-bezier(.2, .8, .2, 1) 4.13s both; }
.hs-open-seq .ar-main { transform-origin: 50% 0; animation: hs-main .7s cubic-bezier(.2, .8, .2, 1) 4.23s both; }

@keyframes hs-veil { 0% { opacity: 0; } 10% { opacity: .55; } 90% { opacity: .55; } 100% { opacity: 1; } }
@keyframes hs-boot { 0% { opacity: 0; transform: scale(.985); } 10% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes hs-progress { from { width: 0; } to { width: 100%; } }
@keyframes hs-msg { from { opacity: 0; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); } to { opacity: 1; letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); } }
@keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-scan-down { 0% { opacity: 0; top: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes hs-frame-in {
  0% { opacity: 0; transform: perspective(1600px) rotateX(16deg) translateY(36px) scale(.94); filter: brightness(2.1) drop-shadow(0 0 24px rgba(110, 210, 250, .55)); }
  6% { opacity: 1; }
  48% { filter: brightness(1.45) drop-shadow(0 0 22px rgba(110, 210, 250, .45)); }
  100% { opacity: 1; transform: none; filter: brightness(1) drop-shadow(0 0 14px rgba(70, 180, 230, .22)); }
}
@keyframes hs-head { from { opacity: 0; transform: translateY(-10px); } }
@keyframes hs-title { from { letter-spacing: var(--ls-wide); text-shadow: 0 0 30px rgba(140, 225, 255, .9); font-stretch: var(--stretch-instrument); } }
@keyframes hs-side { from { opacity: 0; transform: perspective(900px) rotateY(26deg) translateX(-26px) scaleX(.92); } }
@keyframes hs-main { from { opacity: 0; transform: perspective(1200px) rotateX(-12deg) translateY(22px); } }
@keyframes hs-settle { 0% { filter: brightness(1.18); } 100% { filter: brightness(1); } }

/* Closing sequence (0.52s): retract, collapse behind an upward scan, restore the cockpit */
.hs-close-seq { animation: hs-root-out .52s ease both; }
.hs-close-seq .ar-main { transform-origin: 50% 0; animation: hs-main-out .28s cubic-bezier(.4, 0, 1, 1) both; }
.hs-close-seq .ar-side { transform-origin: 0 50%; animation: hs-side-out .28s cubic-bezier(.4, 0, 1, 1) both; }
.hs-close-seq .ar-head, .hs-close-seq .ar-ornament { animation: hs-fade-out .22s ease both; }
.hs-close-seq .ar-frame { transform-origin: 50% 100%; animation: hs-frame-out .38s cubic-bezier(.5, 0, .75, 0) .12s both; }
.hs-close-seq .holo-scan { animation: hs-scan-up .38s cubic-bezier(.5, 0, .75, 0) .12s both; }
@keyframes hs-root-out { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hs-main-out { to { opacity: 0; transform: perspective(1200px) rotateX(-12deg) translateY(18px); } }
@keyframes hs-side-out { to { opacity: 0; transform: perspective(900px) rotateY(24deg) translateX(-20px) scaleX(.94); } }
@keyframes hs-fade-out { to { opacity: 0; } }
@keyframes hs-frame-out {
  0% { transform: none; filter: brightness(1); }
  100% { transform: perspective(1600px) rotateX(12deg) translateY(24px) scale(.95); filter: brightness(1.6); opacity: .6; }
}
@keyframes hs-scan-up { 0% { opacity: 0; top: 100%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hs-open-seq *, .hs-close-seq, .hs-close-seq * { animation: none !important; }
  .ar-root { transition-duration: .15s; }
}
/* Boot readout sits on its own dark lens so the cockpit text behind never shows through it. */
.hb-core::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(560px, 92vw);
  height: 230px;
  content: '';
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(3, 10, 18, .98) 0 62%, rgba(3, 10, 18, .75) 82%, transparent 100%);
}
.hb-ring { z-index: 0; }
/* The frame's surfaces (edge layer + panel) resolve behind the scan line through a growing mask;
   the scan line lives inside the frame, so it follows the unfolding perspective exactly. */
.hs-open-seq .ar-frame::before, .hs-open-seq .ar-frame-inner,
.hs-close-seq .ar-frame::before, .hs-close-seq .ar-frame-inner {
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top;
  mask-position: top;
}
.hs-open-seq .ar-frame::before { animation: hs-reveal .62s cubic-bezier(.45, 0, .25, 1) 3.6s both; }
.hs-open-seq .ar-frame-inner { animation: hs-reveal .62s cubic-bezier(.45, 0, .25, 1) 3.6s both, hs-settle .4s ease 4.48s both; }
.hs-close-seq .ar-frame::before, .hs-close-seq .ar-frame-inner { animation: hs-conceal .38s cubic-bezier(.5, 0, .75, 0) .12s both; }
@keyframes hs-reveal { from { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; } to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
@keyframes hs-conceal { from { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } to { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; } }
.holo-scan { z-index: 5; }
/* Boot readout: once the progress bar completes, the status line confirms access (the message itself stays). */
.hb-sub { display: grid; }
.hb-sub::after { content: 'ACCESS GRANTED'; grid-area: 1 / 1; color: #bff1ff; opacity: 0; }
.hs-open-seq .hb-sub { animation: hs-sub-swap 4.1s ease both; }
.hs-open-seq .hb-sub::after { animation: hs-sub-in 4.1s ease both; }
@keyframes hs-sub-swap { 0%, 73% { color: var(--ar-soft); } 76%, 100% { color: transparent; } }
@keyframes hs-sub-in { 0%, 73% { opacity: 0; } 77%, 100% { opacity: 1; } }
/* Log grid on the illuminated timeline: each date group hangs from a glowing vertical line with an amber date node. */
.lg-view-grid .lg-day { padding-left: 30px; }
.lg-view-grid .lg-day::before {
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 4px;
  width: 1px;
  content: '';
  background: linear-gradient(180deg, rgba(233, 180, 94, .75), rgba(110, 210, 245, .6) 18%, rgba(110, 210, 245, .18));
  box-shadow: 0 0 6px rgba(110, 210, 245, .5);
}
.lg-view-grid .lg-date { margin-left: -30px; padding-left: 0; }
.lg-view-grid .lg-date i { margin-left: 6.5px; margin-right: 10px; box-shadow: 0 0 0 3px rgba(4, 14, 22, .9), 0 0 10px rgba(255, 200, 120, .9); }
.lg-view-grid .lg-date span { flex: 1; padding-bottom: 8px; border-bottom: 1px solid rgba(120, 214, 240, .14); }
.lg-view-grid .lg-date { border-bottom: 0; padding-bottom: 0; align-items: flex-start; }
.lg-view-grid .lg-date i { margin-top: 4px; }
@media (max-width: 640px) { .lg-view-grid .lg-day { padding-left: 22px; } .lg-view-grid .lg-date { margin-left: -22px; } .lg-view-grid .lg-day::before { left: 6px; } .lg-view-grid .lg-date i { margin-left: 2.5px; } }

/* Log list: larger, more spacious rows (same structure; continuous list, no cards) */
.lg-row {
  grid-template-columns: clamp(120px, 10.5vw, 160px) minmax(0, 1fr) auto auto;
  column-gap: clamp(18px, 2vw, 32px);
  min-height: 104px;
  padding: 18px 12px 18px 6px;
}
.lg-thumb { height: 72px; padding: 4px 10px; }
.lg-thumb .ar-preview-svg line { stroke-width: .6; }
.lg-row .lg-title { font-size: var(--fs-h2); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-row .lg-title i { margin: 0 10px; }
.lg-meta { gap: 6px 16px; margin-top: 8px; }
.lg-kind, .lg-when { font-size: var(--fs-micro); }
.lg-row .lg-badge { padding: 2px 8px; font-size: var(--fs-micro); }
.lg-row .lg-summary { margin-top: 8px; font-size: var(--fs-body); line-height: var(--lh-body); }
.lg-row .lg-dur { gap: 8px; font-size: var(--fs-small); }
.lg-row .lg-dur svg { width: 15px; height: 15px; }
.ar-root .lg-row-reopen { min-height: 38px; padding: 8px 18px; font-size: var(--fs-small); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.lg-row-reopen svg { width: 8px; height: 12px; }
.lg-rows + * , .lg-day { margin-bottom: 26px; }
.lg-row .lg-marker { width: 10px; height: 10px; left: -25px; }
@media (max-width: 640px) {
  .lg-row { min-height: 0; padding: 14px 6px 14px 4px; }
  .lg-row .lg-marker { left: -21px; }
}

/* ===== Auxiliary windows =====
   .aux-stage shares the cockpit PNG's 1670x942 frame (same box as .windshield-assembly), so each panel
   sits exactly on its printed side glass at every screen size. Panel sizes use cqw of the panel itself. */
.aux-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 100vw;
  max-width: 177.3885vh;
  max-width: 177.3885svh;
  max-width: 177.3885dvh;
  aspect-ratio: 1670 / 942;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.aux-window { position: absolute; container-type: inline-size; pointer-events: none; }

/* Left window: NEARBY SIGNALS. Glass bounding box in artwork pixels: x 0-432, y 70-762. */
.aux-left { left: 0; top: 7.431%; width: 25.868%; height: 73.461%; color: #d8f2fb; font-family: var(--sans); }
.aux-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aux-frame path { vector-effect: non-scaling-stroke; fill: none; }
.aux-frame .af-glass { stroke: rgba(120, 214, 240, .16); stroke-width: 1; }
.aux-frame .af-panel { fill: url(#nb-fill); }
.aux-frame .af-edge { stroke: rgba(120, 220, 250, .62); stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(90, 210, 255, .7)); stroke-dasharray: 4000; stroke-dashoffset: 0; }
.aux-frame .af-bracket { stroke: #8fe6ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(110, 220, 255, .9)); }
.aux-frame .af-bracket.dim { stroke: rgba(143, 230, 255, .55); stroke-width: 1.6; }

.nb-head { position: absolute; top: 7.4%; left: 25%; width: 38%; display: flex; align-items: center; gap: 2.4cqw; }
.nb-mark { flex: none; width: max(10px, 5cqw); height: max(10px, 5cqw); fill: none; stroke: #9fe9ff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(110, 220, 255, .8)); }
.nb-head h2 { margin: 0; color: #e8f9ff; font: 500 max(9px, 4.1cqw)/1.1 var(--mono); letter-spacing: var(--ls-label); white-space: nowrap; text-shadow: 0 0 10px rgba(110, 215, 255, .55); font-stretch: var(--stretch-instrument); }
.nb-head::after { position: absolute; left: 0; right: -30%; bottom: -1.6cqw; height: 1px; content: ''; background: linear-gradient(90deg, rgba(140, 225, 255, .55), transparent); }
.nb-status { position: absolute; top: 13.4%; left: 24.5%; width: 46%; display: flex; align-items: center; gap: 2.2cqw; margin: 0; color: #bfe4f0; font-size: max(8px, 3.05cqw); letter-spacing: var(--ls-body); }
.nb-spinner { flex: none; width: max(9px, 4cqw); height: max(9px, 4cqw); border: 1.5px solid rgba(140, 225, 255, .25); border-top-color: #9fe9ff; border-right-color: #9fe9ff; border-radius: 50%; animation: nb-spin 1.1s linear infinite; }
.aux-left:not([data-state="scanning"]) .nb-spinner { animation-duration: 4.5s; opacity: .7; }
.aux-left[data-state="idle"] .nb-spinner { border-top-color: rgba(159, 233, 255, .5); border-right-color: transparent; }
.nb-count { position: absolute; top: 18.6%; left: 27%; padding: .9cqw 3cqw; border: 1px solid rgba(140, 225, 255, .55); border-radius: 1.4cqw; background: rgba(8, 36, 54, .55); color: #e8f9ff; font-size: max(8px, 3cqw); letter-spacing: var(--ls-body); white-space: nowrap; box-shadow: inset 0 0 8px rgba(90, 200, 255, .15), 0 0 6px rgba(90, 200, 255, .15); }

.nb-radar { position: absolute; top: 25.6%; left: 26%; width: 42%; aspect-ratio: 1; transition: opacity .35s ease, transform .35s ease; }
.nb-radar svg { width: 100%; height: 100%; overflow: visible; }
.nb-radar .nr-ring { fill: none; stroke: rgba(120, 214, 240, .3); stroke-width: .5; }
.nb-radar .nr-ring.faint { stroke: rgba(120, 214, 240, .18); }
.nb-radar .nr-cross { stroke: rgba(120, 214, 240, .16); stroke-width: .4; }
.nb-radar .nr-sweep { transform-box: view-box; transform-origin: 50% 50%; animation: nb-spin 6s linear infinite; }
.nb-radar .nr-core { fill: #e9fbff; filter: drop-shadow(0 0 3px #8fe6ff) drop-shadow(0 0 7px rgba(110, 215, 255, .8)); }
.nb-radar .nr-dot { fill: #8fe6ff; filter: drop-shadow(0 0 2px rgba(130, 225, 255, .95)); cursor: pointer; pointer-events: auto; transform-box: fill-box; transform-origin: center; animation: nb-ping 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .2s ease; }
.nb-radar .nr-dot.lv1, .nb-radar .nr-dot.lv2 { fill: rgba(143, 230, 255, .65); }
.nb-radar .nr-dot.hot { transform: scale(1.8); fill: #fff; }

.nb-list { position: absolute; top: 53%; left: 15%; width: 64%; max-height: 35.5%; margin: 0; padding: 0; list-style: none; overflow: hidden; pointer-events: auto; }
.nb-list li + li { border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(120, 214, 240, .28), rgba(120, 214, 240, .05)) 1; }
.nb-row {
  display: grid;
  grid-template-columns: max(6px, 2.6cqw) minmax(0, 1fr) auto;
  align-items: center;
  gap: 3cqw;
  width: 100%;
  min-height: 7cqw;
  padding: 1.5cqw 1cqw 1.5cqw 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: nb-row-in .45s var(--ease) both;
  animation-delay: var(--d, 0ms);
  transition: background .18s ease, transform .18s ease;
}
.nb-row:hover, .nb-row:focus-visible, .nb-row.hot { background: linear-gradient(90deg, rgba(110, 215, 255, .12), transparent 85%); transform: translateX(.8cqw); outline: none; }
.nb-row.opening { opacity: .55; }
.nb-dot { width: max(5px, 2.2cqw); height: max(5px, 2.2cqw); border-radius: 50%; background: #9fe9ff; box-shadow: 0 0 6px rgba(130, 225, 255, .9); }
.nb-text { display: grid; min-width: 0; }
.nb-name { overflow: hidden; color: #eef9ff; font-size: max(8.5px, 3.4cqw); line-height: var(--lh-tight); text-overflow: ellipsis; white-space: nowrap; }
.nb-rel { overflow: hidden; color: rgba(170, 214, 228, .72); font-size: max(7px, 2.55cqw); line-height: var(--lh-tight); text-overflow: ellipsis; white-space: nowrap; }
.nb-bars { display: flex; align-items: flex-end; gap: .7cqw; height: 3.4cqw; }
.nb-bars i { width: .9cqw; min-width: 2px; background: rgba(120, 214, 240, .2); }
.nb-bars i:nth-child(1) { height: 30%; } .nb-bars i:nth-child(2) { height: 48%; } .nb-bars i:nth-child(3) { height: 66%; } .nb-bars i:nth-child(4) { height: 83%; } .nb-bars i:nth-child(5) { height: 100%; }
.nb-bars i.on { background: #8fe6ff; box-shadow: 0 0 4px rgba(130, 225, 255, .8); }
.nb-more { position: absolute; top: 89.6%; left: 25%; display: inline-flex; align-items: center; gap: 2cqw; padding: 1.3cqw 3.4cqw; border: 1px solid rgba(140, 225, 255, .6); border-radius: 1.4cqw; background: rgba(8, 36, 54, .55); color: #e8f9ff; font: 500 max(7.5px, 2.65cqw)/1 var(--mono); letter-spacing: var(--ls-label); cursor: pointer; pointer-events: auto; box-shadow: inset 0 0 8px rgba(90, 200, 255, .15); transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; font-stretch: var(--stretch-instrument); }
.nb-more[hidden] { display: none; }
.nb-more svg { width: max(5px, 1.6cqw); height: max(7px, 2.4cqw); fill: none; stroke: currentColor; stroke-width: 1.6; }
.nb-more:hover, .nb-more:focus-visible { border-color: #bff1ff; background: rgba(20, 70, 100, .6); box-shadow: inset 0 0 10px rgba(110, 215, 255, .25), 0 0 10px rgba(110, 215, 255, .35); outline: none; }

/* VIEW ALL TOPICS: the radar folds away and the full list fills the panel. */
.aux-left.expanded .nb-radar { opacity: 0; transform: scale(.85); pointer-events: none; }
.aux-left.expanded .nb-radar .nr-dot { pointer-events: none; }
.aux-left.expanded .nb-list { top: 25.6%; max-height: 62.5%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(140, 225, 255, .45) transparent; }

/* Scan line when a new set of topics arrives, clipped to the panel. */
.nb-sweep { position: absolute; inset: 0; clip-path: polygon(25% 3%, 58% 4.5%, 62% 7.5%, 95% 91%, 91% 97%, 24% 97%, 5% 78%, 5% 66%, 22.7% 8.7%); pointer-events: none; }
.nb-sweep::before { position: absolute; left: 0; right: 0; top: -2%; height: 1.5px; content: ''; opacity: 0; background: linear-gradient(90deg, transparent, #bff1ff 30%, #bff1ff 70%, transparent); box-shadow: 0 0 10px rgba(130, 225, 255, .9); }
.aux-left.nb-refresh .nb-sweep::before { animation: nb-sweep 1.1s cubic-bezier(.45, 0, .25, 1) both; }

/* Start-up: the frame traces itself, then the readouts arrive. */
.aux-left .aux-frame .af-edge { animation: nb-trace 1.6s ease .3s both; }
.aux-left .aux-frame .af-bracket, .aux-left .aux-frame .af-panel { animation: nb-fade .8s ease 1s both; }
.aux-left .nb-head, .aux-left .nb-status, .aux-left .nb-count, .aux-left .nb-radar { animation: nb-fade .7s ease both; }
.aux-left .nb-head { animation-delay: 1.2s; } .aux-left .nb-status { animation-delay: 1.4s; } .aux-left .nb-count { animation-delay: 1.55s; } .aux-left .nb-radar { animation-delay: 1.7s; }

@keyframes nb-spin { to { transform: rotate(360deg); } }
@keyframes nb-ping { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nb-row-in { from { opacity: 0; transform: translateX(-2cqw); } }
@keyframes nb-sweep { 0% { top: -2%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes nb-trace { from { stroke-dashoffset: 4000; opacity: .3; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nb-fade { from { opacity: 0; } }

/* Narrow panels (small screens): keep the heading, count and radar; the list needs more room. */
@container (max-width: 200px) {
  .nb-status, .nb-list, .nb-more { display: none; }
  .nb-head { left: 24%; width: 44%; }
  .nb-count { top: 15%; }
  .nb-radar { top: 30%; left: 22%; width: 50%; }
}

/* Archive / Log open, or reduced motion: auxiliary animations rest. */
body[data-feature="archive"] .aux-stage *, body[data-feature="log"] .aux-stage * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .aux-stage *, .aux-stage *::before { animation: none !important; transition: none !important; }
}
/* NEARBY SIGNALS: header sized to the narrow top of the glass; the status line may wrap. */
.nb-head { left: 23%; width: auto; }
.nb-head h2 { font-size: max(8.5px, 3.5cqw); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.nb-head::after { right: -18%; }
.nb-status { top: 12.8%; left: 23%; width: 42%; align-items: flex-start; font-size: max(7.5px, 2.8cqw); line-height: var(--lh-tight); }
.nb-spinner { margin-top: .2cqw; }
.nb-count { top: 19.6%; left: 25%; }
.nb-radar { top: 26.4%; left: 25%; width: 41%; }
.nb-sweep { clip-path: polygon(25% 2%, 60% 3%, 66% 6.6%, 95.4% 92%, 92% 98%, 24% 98%, 3% 78.5%, 3% 65.7%, 21.5% 7.8%); }
/* Smaller panels: the heading and status shrink with the glass. */
.nb-head h2 { font-size: max(6.5px, 3.5cqw); }
.nb-status { font-size: max(6.5px, 2.8cqw); }
.nb-count { font-size: max(6.5px, 3cqw); }
.nb-name { font-size: max(7.5px, 3.4cqw); }
.nb-rel { font-size: max(6.5px, 2.55cqw); }
.nb-more { font-size: max(6.5px, 2.65cqw); }
@container (max-width: 200px) {
  .nb-mark { width: 4.6cqw; height: 4.6cqw; }
  .nb-head h2 { font-size: 3.6cqw; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
  .nb-count { font-size: 3.4cqw; }
}
.nb-list li[hidden] { display: none; }
/* Expanded list starts higher, where the glass is narrower: keep it inside both slanted edges. */
.aux-left.expanded .nb-list { left: 18%; width: 53%; }

/* ===== NEARBY SIGNALS: projected onto the angled glass =====
   .nb-plane is a flat 400 x 640 layout mapped onto the window's quadrilateral by a matrix3d homography
   (computed in app.js from the panel size), so text, radar, rows and buttons all follow the glass angle.
   .nb-clip trims anything to the printed glass outline. Sizes inside the plane are in plane units (px). */
.aux-left .nb-clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(25% 2.02%, 59.7% 3.03%, 66.4% 6.65%, 95.4% 91.9%, 93.75% 96%, 91.9% 98%, 24.1% 98%, 21.1% 96.8%, 2.8% 78.5%, 2.8% 65.75%, 21.5% 7.8%);
}
/* The side-window screens are flat planes projected onto the painted glass (perspective homography), so their
   text scales with the cockpit artwork: their sizes stay in plane units, sharing the global typeface and spacing. */
.aux-left .nb-plane { position: absolute; left: 0; top: 0; width: 400px; height: 640px; transform-origin: 0 0; pointer-events: none; }
.aux-left .nb-plane .nb-sweep { inset: 0; clip-path: none; }

.aux-left .nb-plane .nb-head { top: 30px; left: 34px; width: auto; gap: 12px; }
.aux-left .nb-plane .nb-mark { width: 30px; height: 30px; stroke-width: 1.8; }
.aux-left .nb-plane .nb-head h2 { font-size: 30px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-head::after { left: 0; right: -40px; bottom: -12px; }
.aux-left .nb-plane .nb-status { top: 90px; left: 34px; width: 330px; gap: 12px; align-items: center; font-size: 21px; line-height: var(--lh-tight); }
.aux-left .nb-plane .nb-spinner { width: 20px; height: 20px; margin: 0; border-width: 2px; }
.aux-left .nb-plane .nb-count { top: 134px; left: 48px; padding: 6px 16px; border-radius: 8px; font-size: 21px; }
.aux-left .nb-plane .nb-radar { top: 190px; left: 86px; width: 228px; }

.aux-left .nb-plane .nb-list { top: 438px; left: 24px; width: 352px; max-height: 150px; pointer-events: auto; }
.aux-left .nb-plane .nb-row { grid-template-columns: 11px minmax(0, 1fr) auto; gap: 14px; min-height: 30px; padding: 4px 6px 4px 2px; }
.aux-left .nb-plane .nb-row:hover, .aux-left .nb-plane .nb-row:focus-visible, .aux-left .nb-plane .nb-row.hot { transform: translateX(4px); }
.aux-left .nb-plane .nb-dot { width: 10px; height: 10px; }
.aux-left .nb-plane .nb-name { font-size: 21px; line-height: var(--lh-tight); }
.aux-left .nb-plane .nb-bars { gap: 3px; height: 18px; }
.aux-left .nb-plane .nb-bars i { width: 5px; min-width: 0; }
.aux-left .nb-plane .nb-more { top: 598px; left: 96px; gap: 10px; padding: 7px 18px; border-radius: 8px; font-size: 17px; pointer-events: auto; }
.aux-left .nb-plane .nb-more svg { width: 8px; height: 12px; }
.aux-left.expanded .nb-plane .nb-list { top: 186px; left: 24px; width: 352px; max-height: 402px; }

/* The plane is scaled by the projection, so the earlier small-panel rules (written in cqw) no longer apply;
   on very small panels only the heading, count and radar remain. */
@container (max-width: 200px) {
  .aux-left .nb-plane .nb-status, .aux-left .nb-plane .nb-list, .aux-left .nb-plane .nb-more { display: none; }
  .aux-left .nb-plane .nb-count { top: 110px; }
  .aux-left .nb-plane .nb-radar { top: 200px; left: 60px; width: 280px; }
}
/* Projected plane layout (400 x 800 plane units). */
.aux-left .nb-plane { height: 800px; }
.aux-left .nb-plane .nb-head { top: 22px; left: 24px; gap: 14px; }
.aux-left .nb-plane .nb-mark { width: 34px; height: 34px; }
.aux-left .nb-plane .nb-head h2 { font-size: 33px; }
.aux-left .nb-plane .nb-head::after { right: -24px; bottom: -14px; }
.aux-left .nb-plane .nb-status { top: 88px; left: 24px; width: 352px; gap: 14px; font-size: 24px; }
.aux-left .nb-plane .nb-spinner { width: 23px; height: 23px; }
.aux-left .nb-plane .nb-count { top: 138px; left: 30px; padding: 7px 18px; border-radius: 9px; font-size: 24px; }
.aux-left .nb-plane .nb-radar { top: 204px; left: 66px; width: 268px; }
.aux-left .nb-plane .nb-list { top: 494px; left: 14px; width: 372px; max-height: 236px; }
.aux-left .nb-plane .nb-row { grid-template-columns: 12px minmax(0, 1fr) auto; gap: 16px; min-height: 44px; padding: 6px 8px 6px 2px; }
.aux-left .nb-plane .nb-dot { width: 12px; height: 12px; }
.aux-left .nb-plane .nb-name { font-size: 26px; }
.aux-left .nb-plane .nb-bars { gap: 4px; height: 22px; }
.aux-left .nb-plane .nb-bars i { width: 6px; }
.aux-left .nb-plane .nb-more { top: 742px; left: 88px; gap: 12px; padding: 9px 22px; border-radius: 9px; font-size: 20px; }
.aux-left .nb-plane .nb-more svg { width: 9px; height: 14px; }
.aux-left.expanded .nb-plane .nb-list { top: 200px; max-height: 520px; }
@container (max-width: 200px) {
  .aux-left .nb-plane .nb-count { top: 120px; }
  .aux-left .nb-plane .nb-radar { top: 230px; left: 40px; width: 320px; }
}
/* Balance sizes against the projection (the far, narrow top is drawn smaller than the near bottom). */
.aux-left .nb-plane .nb-mark { width: 40px; height: 40px; }
.aux-left .nb-plane .nb-head h2 { font-size: 40px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-status { top: 96px; font-size: 29px; gap: 16px; }
.aux-left .nb-plane .nb-spinner { width: 27px; height: 27px; }
.aux-left .nb-plane .nb-count { top: 150px; font-size: 28px; padding: 8px 20px; }
.aux-left .nb-plane .nb-radar { top: 222px; left: 70px; width: 260px; }
.aux-left .nb-plane .nb-list { top: 504px; max-height: 226px; }
.aux-left .nb-plane .nb-row { min-height: 42px; padding: 5px 8px 5px 2px; }
.aux-left .nb-plane .nb-name { font-size: 23px; }
.aux-left .nb-plane .nb-bars { height: 20px; }
.aux-left .nb-plane .nb-more { top: 744px; font-size: 17px; padding: 8px 20px; }
.aux-left .nb-plane .nb-head h2 { font-size: 35px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-status { font-size: 25px; white-space: nowrap; }
.aux-left .nb-plane .nb-list { max-height: 244px; }
.aux-left .nb-plane .nb-more { top: 756px; }

/* ===== NEARBY SIGNALS fitted to the traced glass =====
   Panel box = artwork x 0-440, y 60-790 (left glass measured from cockpit-new.png, 1670 x 942).
   The clip follows the glass just inside its rim; the projected plane (400 x 850) carries all readouts. */
.aux-left { left: 0; top: 6.369%; width: 26.347%; height: 77.495%; }
.aux-left .nb-clip { clip-path: polygon(0% 36.71%, 11.14% 20.82%, 24.55% 3.29%, 27.27% 1.78%, 30.68% 1.64%, 55.91% 9.32%, 59.55% 10.82%, 60.91% 13.56%, 97.05% 87.81%, 97.5% 89.45%, 95.23% 90.82%, 34.32% 97.4%, 25.68% 97.81%, 21.36% 96.16%, 0% 69.86%); }
.aux-left .nb-plane { height: 850px; }
.aux-left .nb-plane .nb-head { top: 26px; left: 26px; }
.aux-left .nb-plane .nb-mark { width: 38px; height: 38px; }
.aux-left .nb-plane .nb-head h2 { font-size: 36px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-head::after { right: -10px; bottom: -14px; }
.aux-left .nb-plane .nb-status { top: 100px; left: 26px; width: 360px; font-size: 26px; }
.aux-left .nb-plane .nb-spinner { width: 25px; height: 25px; }
.aux-left .nb-plane .nb-count { top: 152px; left: 32px; font-size: 26px; padding: 8px 20px; }
.aux-left .nb-plane .nb-radar { top: 226px; left: 66px; width: 268px; }
.aux-left .nb-plane .nb-list { top: 528px; left: 14px; width: 372px; max-height: 248px; }
.aux-left .nb-plane .nb-row { min-height: 44px; padding: 6px 8px 6px 2px; }
.aux-left .nb-plane .nb-name { font-size: 24px; }
.aux-left .nb-plane .nb-bars { height: 21px; }
.aux-left .nb-plane .nb-more { top: 796px; left: 92px; font-size: 18px; padding: 8px 20px; }
.aux-left.expanded .nb-plane .nb-list { top: 222px; max-height: 556px; }
@container (max-width: 200px) {
  .aux-left .nb-plane .nb-count { top: 130px; }
  .aux-left .nb-plane .nb-radar { top: 250px; left: 40px; width: 320px; }
}
.aux-left .nb-plane .nb-status { top: 108px; }
.aux-left .nb-plane .nb-count { top: 168px; }
.aux-left .nb-plane .nb-radar { top: 246px; left: 70px; width: 260px; }
.aux-left .nb-plane .nb-head { top: 22px; left: 20px; gap: 12px; }
.aux-left .nb-plane .nb-mark { width: 40px; height: 40px; }
.aux-left .nb-plane .nb-head h2 { font-size: 38px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-status { top: 104px; left: 20px; width: 380px; font-size: 27px; }
.aux-left .nb-plane .nb-spinner { width: 27px; height: 27px; }
.aux-left .nb-plane .nb-count { top: 158px; left: 26px; font-size: 28px; }
.aux-left .nb-plane .nb-radar { top: 240px; }
.aux-left.expanded .nb-plane .nb-list { top: 240px; max-height: 538px; }
.aux-left.expanded .nb-plane .nb-list { top: 262px; max-height: 516px; }
.aux-left .nb-plane .nb-head { left: 18px; gap: 11px; }
.aux-left .nb-plane .nb-head h2 { font-size: 35px; letter-spacing: var(--ls-body); }

/* NEARBY SIGNALS: cockpit typography (monospace, uppercase, wide tracking) and a balanced vertical rhythm.
   Horizontal centring is computed per section in app.js (nbLayout) from the traced glass at that height. */
.aux-left, .aux-left .nb-plane, .aux-left .nb-plane * { font-family: var(--mono); }
.aux-left .nb-plane .nb-head { top: 36px; justify-content: center; gap: 12px; }
.aux-left .nb-plane .nb-mark { width: 36px; height: 36px; }
.aux-left .nb-plane .nb-head h2 { font-weight: 500; font-size: 30px; letter-spacing: var(--ls-label); text-transform: uppercase; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-head::after { left: 6%; right: 6%; bottom: -16px; background: linear-gradient(90deg, transparent, rgba(140, 225, 255, .55) 20%, rgba(140, 225, 255, .55) 80%, transparent); }
.aux-left .nb-plane .nb-status { top: 104px; width: auto; justify-content: center; gap: 12px; font-size: 18px; letter-spacing: var(--ls-label); text-transform: uppercase; color: #bfe4f0; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 20px; height: 20px; }
.aux-left .nb-plane .nb-count { top: 150px; padding: 8px 20px; font-size: 18px; letter-spacing: var(--ls-label); text-transform: uppercase; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-radar { top: 226px; }
.aux-left .nb-plane .nb-list { top: 520px; max-height: 236px; }
.aux-left .nb-plane .nb-row { gap: 16px; min-height: 46px; padding: 6px 10px 6px 4px; }
.aux-left .nb-plane .nb-name { font-weight: 400; font-size: 21px; letter-spacing: var(--ls-label); text-transform: uppercase; color: #e6f6fb; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-more { top: 778px; font-weight: 500; font-size: 16px; letter-spacing: var(--ls-caps); padding: 9px 22px; font-stretch: var(--stretch-instrument); }
.aux-left.expanded .nb-plane .nb-list { top: 226px; max-height: 530px; }
@container (max-width: 200px) {
  .aux-left .nb-plane .nb-count { top: 130px; }
  .aux-left .nb-plane .nb-radar { top: 240px; }
}
/* Header sits lower, where the glass is nearer (less compressed by the perspective); even gaps below. */
.aux-left .nb-plane .nb-head { top: 56px; }
.aux-left .nb-plane .nb-mark { width: 38px; height: 38px; }
.aux-left .nb-plane .nb-head h2 { font-size: 33px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-status { top: 132px; font-size: 23px; letter-spacing: var(--ls-label); gap: 14px; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 24px; height: 24px; }
.aux-left .nb-plane .nb-count { top: 186px; font-size: 22px; letter-spacing: var(--ls-label); padding: 8px 22px; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-radar { top: 268px; }
.aux-left .nb-plane .nb-list { top: 534px; max-height: 236px; }
.aux-left .nb-plane .nb-more { top: 786px; }
.aux-left.expanded .nb-plane .nb-list { top: 268px; max-height: 500px; }
/* Perspective squeezes the top of the glass, so the header's gaps are larger in plane units to read evenly. */
.aux-left .nb-plane .nb-head { top: 44px; }
.aux-left .nb-plane .nb-status { top: 146px; }
.aux-left .nb-plane .nb-count { top: 222px; }
.aux-left .nb-plane .nb-radar { top: 306px; }
.aux-left .nb-plane .nb-list { top: 556px; max-height: 230px; }
.aux-left .nb-plane .nb-more { top: 800px; }
.aux-left.expanded .nb-plane .nb-list { top: 306px; max-height: 474px; }
.aux-left .nb-plane .nb-list { max-height: 242px; }
.aux-left .nb-plane .nb-more { top: 806px; }
.aux-left .nb-plane .nb-list { top: 552px; max-height: 252px; }
.aux-left .nb-plane .nb-more { top: 810px; }

/* ===== NEARBY SIGNALS radar: a thin scanning instrument =====
   Concentric rings with ticks, a narrow rotating beam with a fading trailing arc, dots that blip as the beam
   crosses them (delays set in app.js on the beam's clock) and an expanding pulse when topics are identified. */
.nb-radar .nr-ring { stroke: rgba(120, 214, 240, .26); stroke-width: .45; }
.nb-radar .nr-ring.faint { stroke: rgba(120, 214, 240, .16); }
.nb-radar .nr-cross { stroke: rgba(120, 214, 240, .12); stroke-width: .35; }
.nb-radar .nr-ticks { stroke: rgba(150, 228, 255, .55); stroke-width: .5; }
.nb-radar .nr-sweep { animation: nb-spin 6s linear infinite; }
.nb-radar .nr-sweep path { fill: none; }
.nb-radar .nr-beam { stroke: #bff1ff; stroke-width: .6; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(140, 230, 255, .95)); }
.nb-radar .nr-tip { fill: #e9fbff; filter: drop-shadow(0 0 2px #8fe6ff); }
.nb-radar .nr-trail { fill: none; stroke: #8fe6ff; stroke-width: .9; stroke-linecap: round; }
.nb-radar .nr-trail.t0 { opacity: .08; } .nb-radar .nr-trail.t1 { opacity: .18; } .nb-radar .nr-trail.t2 { opacity: .34; } .nb-radar .nr-trail.t3 { opacity: .6; }
.nb-radar .nr-dot { fill: #8fe6ff; opacity: .32; animation: nb-blip 6s linear infinite; animation-delay: var(--d, 0s); }
@keyframes nb-blip {
  0% { opacity: 1; transform: scale(1.7); fill: #f2fdff; }
  6% { opacity: .95; transform: scale(1.25); }
  30% { opacity: .45; transform: scale(1); fill: #8fe6ff; }
  100% { opacity: .32; transform: scale(1); }
}
.nb-radar .nr-dot.hot { animation: none; opacity: 1; transform: scale(1.8); fill: #fff; }
.nb-radar .nr-pulse { fill: none; stroke: #9fe9ff; stroke-width: .8; } /* opacity and radius are animated by SVG */
.aux-left.nb-refresh .nb-radar .nr-pulse { animation: nb-pulse 1.8s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes nb-pulse { 0% { opacity: .9; transform: scale(.06); } 70% { opacity: .25; } 100% { opacity: 0; transform: scale(1); } }
/* Beam and pulse use SVG animation (exact pivot); CSS no longer rotates or scales them. */
.nb-radar .nr-sweep { animation: none !important; transform: none; }
.nb-radar .nr-pulse { transform: none; }
.aux-left.nb-refresh .nb-radar .nr-pulse { animation: none; }
.aux-left .nb-plane .nb-status { font-size: 20px; letter-spacing: var(--ls-label); gap: 12px; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 21px; height: 21px; }

/* ===== NEARBY SIGNALS: compact composition =====
   Smaller, restrained type; a narrower centred list; a smaller radar and button; one compact vertical stack.
   (Plane units; the perspective enlarges the lower part of the glass, so lower items are set smaller.) */
.aux-left .nb-plane .nb-head { top: 116px; gap: 10px; }
.aux-left .nb-plane .nb-mark { width: 26px; height: 26px; stroke-width: 1.6; }
.aux-left .nb-plane .nb-head h2 { font-size: 26px; font-weight: 500; letter-spacing: var(--ls-caps); text-shadow: 0 0 8px rgba(110, 215, 255, .4); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-head::after { bottom: -12px; left: 12%; right: 12%; opacity: .7; }
.aux-left .nb-plane .nb-status { top: 168px; font-size: 15px; letter-spacing: var(--ls-caps); gap: 10px; color: rgba(191, 228, 240, .82); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 15px; height: 15px; border-width: 1.5px; }
.aux-left .nb-plane .nb-count { top: 204px; padding: 5px 14px; border-radius: 6px; font-size: 14px; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-radar { top: 268px; }
.aux-left .nb-plane .nb-list { top: 492px; max-height: 192px; }
.aux-left .nb-plane .nb-row { grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; min-height: 36px; padding: 4px 6px 4px 2px; }
.aux-left .nb-plane .nb-dot { width: 7px; height: 7px; box-shadow: 0 0 5px rgba(130, 225, 255, .8); }
.aux-left .nb-plane .nb-name { font-size: 16px; letter-spacing: var(--ls-label); color: rgba(230, 246, 251, .92); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-bars { gap: 2px; height: 13px; }
.aux-left .nb-plane .nb-bars i { width: 3px; }
.aux-left .nb-plane .nb-more { top: 708px; padding: 6px 15px; gap: 8px; border-radius: 6px; font-size: 12px; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-more svg { width: 6px; height: 9px; }
.aux-left.expanded .nb-plane .nb-list { top: 268px; max-height: 416px; }
@container (max-width: 200px) {
  .aux-left .nb-plane .nb-count { top: 196px; }
  .aux-left .nb-plane .nb-radar { top: 268px; }
}

/* ===== Simple scan for a Nearby Signal selection (central window) ===== */
.nbs-scan { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 14px; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.nbs-scan.show { opacity: 1; }
.nbs-scan.clear { opacity: 0; }
.nbs-radar { width: clamp(90px, 9vw, 130px); height: auto; overflow: visible; fill: none; }
.nbs-radar circle { stroke: rgba(120, 214, 240, .35); stroke-width: .6; }
.nbs-radar circle.faint { stroke: rgba(120, 214, 240, .18); }
.nbs-radar .nbs-beam line { stroke: #bff1ff; stroke-width: .7; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(140, 230, 255, .9)); }
.nbs-radar .nbs-core { fill: #e9fbff; stroke: none; filter: drop-shadow(0 0 3px #8fe6ff); }
.nbs-radar .nbs-ping { stroke: #9fe9ff; stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; }
.nbs-scan.acquired .nbs-ping { animation: nbs-ping .65s ease-out both; }
.nbs-scan.acquired .nbs-core { filter: drop-shadow(0 0 5px #bff1ff) drop-shadow(0 0 10px rgba(140, 225, 255, .7)); }
@keyframes nbs-ping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
.nbs-status { display: grid; justify-items: center; gap: 6px; margin: 0; font-family: var(--mono); text-align: center; }
.nbs-label { color: rgba(150, 220, 245, .75); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); font-stretch: var(--stretch-instrument); }
.nbs-topic { color: #e8f8ff; font-size: var(--fs-body); letter-spacing: var(--ls-caps); text-shadow: 0 0 8px rgba(110, 215, 255, .45); font-stretch: var(--stretch-instrument); }
.nbs-scan.acquired .nbs-label { color: #bff1ff; }
/* The newly acquired centre glows once, gently. */
.cluster .main-topic.nb-acquired { animation: nbs-glow 1.3s ease-out; }
@keyframes nbs-glow { 0% { filter: none; } 30% { filter: brightness(1.3) drop-shadow(0 0 12px rgba(140, 225, 255, .75)); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .nbs-scan.acquired .nbs-ping, .cluster .main-topic.nb-acquired { animation: none; } }
/* Balanced sizes: compact but legible, spread evenly from the top to the bottom of the glass. */
.aux-left .nb-plane .nb-head { top: 64px; gap: 11px; }
.aux-left .nb-plane .nb-mark { width: 30px; height: 30px; }
.aux-left .nb-plane .nb-head h2 { font-size: 30px; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-status { top: 128px; font-size: 19px; letter-spacing: var(--ls-label); gap: 11px; font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 18px; height: 18px; }
.aux-left .nb-plane .nb-count { top: 176px; padding: 6px 16px; font-size: 17px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-radar { top: 252px; }
.aux-left .nb-plane .nb-list { top: 506px; max-height: 222px; }
.aux-left .nb-plane .nb-row { grid-template-columns: 9px minmax(0, 1fr) auto; gap: 13px; min-height: 42px; padding: 5px 6px 5px 2px; }
.aux-left .nb-plane .nb-dot { width: 8px; height: 8px; }
.aux-left .nb-plane .nb-name { font-size: 19px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-bars { gap: 3px; height: 16px; }
.aux-left .nb-plane .nb-bars i { width: 4px; }
.aux-left .nb-plane .nb-more { top: 748px; padding: 7px 18px; font-size: 14px; letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-more svg { width: 7px; height: 10px; }
.aux-left.expanded .nb-plane .nb-list { top: 252px; max-height: 476px; }
.aux-left .nb-plane .nb-head { top: 86px; }
.aux-left .nb-plane .nb-head h2 { font-size: 31px; }
.aux-left .nb-plane .nb-status { top: 152px; font-size: 20px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-spinner { width: 19px; height: 19px; }
.aux-left .nb-plane .nb-count { top: 202px; font-size: 18px; letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.aux-left .nb-plane .nb-radar { top: 280px; }
.aux-left .nb-plane .nb-list { top: 528px; }
.aux-left .nb-plane .nb-more { top: 770px; }
.aux-left.expanded .nb-plane .nb-list { top: 280px; max-height: 470px; }
.aux-left.expanded .nb-plane .nb-list { top: 300px; max-height: 452px; }
.aux-left .nb-plane .nb-list { max-height: 234px; }
.viewport-frame.nbs-scanning #explore-status { visibility: hidden; }

/* Visual hierarchy: the interface layers inside the two side windows sit a touch below full brightness so the
   central constellation window leads. Only the overlays are affected (the glass, frame and artwork are not). */
.aux-left .aux-frame, .aux-left .nb-clip { opacity: .86; }
.anomaly-instrument { opacity: .86; }

/* ===== SKYY BOT (right auxiliary window) =====
   Panel box = artwork x 1225-1670, y 60-790 (right glass traced from cockpit-new.png, 1670 x 942).
   Text and controls sit on a flat 400 x 850 plane projected onto the glass (matrix3d, set in app.js);
   Skyy stands upright in front of it as layered artwork (tail, body, head) animated in app.js. */
.aux-right { left: 73.353%; top: 6.369%; width: 26.647%; height: 77.495%; color: #d8f2fb; font-family: var(--mono); }
.aux-right .aux-frame { transform: none; }
.aux-right .aux-frame .af-panel { fill: url(#sk-fill); }
.aux-right .aux-frame, .aux-right .sk-clip { opacity: .86; }
.aux-right .aux-frame .af-edge { animation: nb-trace 1.6s ease .3s both; }
.aux-right .aux-frame .af-bracket, .aux-right .aux-frame .af-panel { animation: nb-fade .8s ease 1s both; }
.sk-clip {
  position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(98.88% 37.26%, 95.73% 31.51%, 83.15% 12.6%, 79.33% 7.12%, 75.96% 3.84%, 71.46% 2.19%, 68.76% 2.05%, 66.97% 2.88%, 44.04% 10.96%, 40.67% 12.33%, 39.33% 15.34%, 2.7% 88.36%, 2.25% 89.86%, 4.49% 90.96%, 71.01% 97.81%, 75.51% 98.22%, 78.43% 96.44%, 91.69% 80.27%, 98.88% 70.96%, 100% 70.96%, 100% 37.26%);
}
.sk-plane { position: absolute; left: 0; top: 0; width: 400px; height: 850px; transform-origin: 0 0; pointer-events: none; font-family: var(--mono); animation: nb-fade .7s ease 1.2s both; }
.sk-plane > * { position: absolute; left: 0; margin: 0; }
.sk-head { top: 22px; display: flex; align-items: center; gap: 14px; }
.sk-bone { width: 50px; height: 25px; fill: rgba(143, 230, 255, .16); stroke: #9fe9ff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(110, 220, 255, .7)); }
.sk-head h2 { margin: 0; color: #e6f8ff; font: 500 44px var(--mono); letter-spacing: var(--ls-caps); text-shadow: 0 0 10px rgba(110, 215, 255, .45); white-space: nowrap; font-stretch: var(--stretch-instrument); }
.sk-online { top: 88px; display: flex; align-items: center; gap: 12px; color: rgba(160, 236, 210, .92); font-size: 22px; letter-spacing: var(--ls-caps); white-space: nowrap; font-stretch: var(--stretch-instrument); }
.sk-wave { width: 52px; height: 16px; fill: none; stroke: #8ff0d0; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 64; animation: sk-wave 2.4s linear infinite; }
.sk-online span::before { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; content: ''; background: #8ff0d0; box-shadow: 0 0 8px #6fe6c0; vertical-align: 2px; animation: nb-ping 2.6s ease-in-out infinite; }
@keyframes sk-wave { from { stroke-dashoffset: 128; } to { stroke-dashoffset: 0; } }

.sk-bubble {
  top: 136px; width: 340px; height: 214px; box-sizing: border-box; padding: 18px 24px 16px;
  border: 1.5px solid rgba(140, 225, 255, .5); border-radius: 18px;
  background: linear-gradient(160deg, rgba(14, 52, 72, .62), rgba(5, 22, 36, .5));
  box-shadow: inset 0 0 18px rgba(90, 200, 255, .12), 0 0 14px rgba(80, 200, 255, .14);
  pointer-events: auto;
}
.sk-bubble::after { position: absolute; left: 46%; bottom: -13px; width: 22px; height: 22px; content: ''; border-right: 1.5px solid rgba(140, 225, 255, .5); border-bottom: 1.5px solid rgba(140, 225, 255, .5); background: rgba(6, 26, 40, .9); transform: rotate(45deg); }
.sk-hail { min-height: 0; margin: 0 0 6px; color: #8fe6ff; font: 500 20px var(--mono); letter-spacing: var(--ls-caps); text-transform: uppercase; font-stretch: var(--stretch-instrument); }
.sk-hail:empty { display: none; }
.sk-msg { margin: 0; color: #eaf8fd; font: 400 26px/1.32 var(--sans); letter-spacing: var(--ls-body); text-shadow: 0 0 6px rgba(120, 210, 255, .25); }
.sk-msg .sk-you { display: block; margin-bottom: 6px; color: rgba(170, 220, 236, .7); font: 18px var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-stretch: var(--stretch-instrument); }
.sk-bubble .sk-hail, .sk-bubble .sk-msg { transition: opacity .35s ease, transform .35s ease; }
.sk-bubble.swap .sk-hail, .sk-bubble.swap .sk-msg { opacity: 0; transform: translateY(6px); }
.sk-pager { left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 10px; position: absolute; }
.sk-pager i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140, 225, 255, .28); transition: background .3s, box-shadow .3s; }
.sk-pager i.on { background: #bff1ff; box-shadow: 0 0 7px #8fe6ff; }
.sk-nav { position: absolute; right: 18px; bottom: 10px; display: flex; gap: 8px; }
.sk-nav button { padding: 4px 12px; border: 1px solid rgba(140, 225, 255, .5); border-radius: 7px; background: rgba(10, 40, 58, .7); color: #cdefff; font: 500 15px var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; font-stretch: var(--stretch-instrument); }
.sk-nav button:hover, .sk-nav button:focus-visible { border-color: #bff1ff; background: rgba(40, 110, 140, .55); color: #fff; outline: none; }
.sk-bubble.paged .sk-pager { left: 24px; right: auto; bottom: 20px; }

.sk-actions { top: 690px; display: flex; flex-direction: column; gap: 9px; width: 270px; }
.sk-btn {
  height: 34px; border: 1.2px solid rgba(140, 225, 255, .42); border-radius: 9px; background: rgba(8, 34, 50, .55);
  color: #d8f2fb; font: 500 16px var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 0 10px rgba(90, 200, 255, .08); transition: background .2s, border-color .2s, color .2s, box-shadow .2s; font-stretch: var(--stretch-instrument); }
.sk-btn:hover, .sk-btn:focus-visible, .sk-btn.on { border-color: #bff1ff; background: rgba(36, 104, 134, .5); color: #fff; box-shadow: 0 0 10px rgba(110, 220, 255, .35); outline: none; }
.sk-form { top: 806px; display: flex; align-items: center; width: 300px; height: 38px; box-sizing: border-box; padding: 0 6px 0 16px; border: 1.2px solid rgba(140, 225, 255, .4); border-radius: 10px; background: rgba(4, 18, 30, .7); pointer-events: auto; }
.sk-form:focus-within { border-color: #bff1ff; box-shadow: 0 0 10px rgba(110, 220, 255, .3); }
.sk-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: #eaf8fd; font: 16px var(--sans); letter-spacing: var(--ls-body); }
.sk-input::placeholder { color: rgba(170, 215, 230, .55); }
.sk-send { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sk-send svg { width: 16px; height: 16px; fill: none; stroke: #9fe9ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Skyy: box-space position (upright, undistorted), standing on a holographic pedestal in the glass. */
.sk-bot { position: absolute; left: 32.4%; top: 38.4%; width: 40.4%; aspect-ratio: 568 / 692; pointer-events: none; animation: nb-fade 1s ease 1.4s both; }
.sk-pedestal { position: absolute; left: -6%; top: 87%; width: 112%; height: auto; overflow: visible; }
.sk-pedestal .skp-glow { fill: rgba(90, 210, 255, .13); filter: blur(4px); }
.sk-pedestal .skp-ring { fill: none; stroke: rgba(140, 230, 255, .55); stroke-width: 1.2; filter: drop-shadow(0 0 3px rgba(110, 220, 255, .8)); }
.sk-pedestal .skp-ring.inner { stroke: rgba(140, 230, 255, .3); stroke-dasharray: 6 5; animation: sk-ring 18s linear infinite; transform-origin: 100px 20px; transform-box: view-box; }
@keyframes sk-ring { to { stroke-dashoffset: -110; } }
.sk-figure { position: absolute; inset: 0; filter: drop-shadow(0 0 6px rgba(90, 200, 255, .22)); }
.sk-figure img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.sk-tail { transform-origin: 22.89% 81.94%; }
/* Skyy's front paw (his left): the same body artwork, cut along the foreleg from the cuff down, so it can lift (pivoting at the elbow) and hold.
   The body underneath hides just the paw's resting spot (only ever uncovered while the paw is raised). */
.sk-figure .sk-paw { clip-path: polygon(58.89% 71.68%, 58.80% 79.48%, 58.27% 85.26%, 58.36% 88.51%, 59.51% 91.91%, 62.94% 93.35%, 69.10% 93.35%, 72.71% 92.05%, 73.33% 88.87%, 72.18% 86.13%, 69.89% 83.24%, 69.37% 79.48%, 69.98% 71.68%); transform-origin: 64.35% 71.68%; }
.sk-body { -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 568 692' preserveAspectRatio='none'><path fill-rule='evenodd' fill='%23fff' d='M0 0H568V692H0Z M328 598 L346 598 L353 616 L417 616 L414 637 L393 647 L357 647 L337 639 Z'/></svg>") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 568 692' preserveAspectRatio='none'><path fill-rule='evenodd' fill='%23fff' d='M0 0H568V692H0Z M328 598 L346 598 L353 616 L417 616 L414 637 L393 647 L357 647 L337 639 Z'/></svg>") 0 0 / 100% 100% no-repeat; }

.sk-torso { position: absolute; inset: 0; transform-origin: 50% 93%; animation: sk-breathe 4.6s ease-in-out infinite; }
@keyframes sk-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.006, 1.014); } }
.sk-face { position: absolute; inset: 0; transform-origin: 50.53% 43.35%; }
.sk-face img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-lid { position: absolute; border-radius: 50%; transform: scaleY(0); transform-origin: 50% 8%; box-shadow: inset 0 -1.5px 0 rgba(60, 30, 12, .55); }
.sk-lid.lid-l { left: 41.6%; top: 17.1%; width: 7.2%; height: 4.5%; background: linear-gradient(#b5733c, #a46431); rotate: -6deg; }
.sk-lid.lid-r { left: 56.3%; top: 13.1%; width: 7.1%; height: 4.7%; background: linear-gradient(#d1905b, #c78552); rotate: -10deg; }
.sk-light { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: radial-gradient(closest-side, rgba(170, 245, 255, .9), rgba(90, 220, 255, .35) 55%, transparent); }
.sk-chest { left: 53.2%; top: 48.6%; width: 10.2%; aspect-ratio: 1; }
.sk-lamp-l { left: 23.4%; top: 22.4%; width: 6.8%; aspect-ratio: 1; }
.sk-lamp-r { left: 71.8%; top: 17.2%; width: 6.8%; aspect-ratio: 1; }
.sk-glint { position: absolute; left: 60%; top: 6%; width: 9%; aspect-ratio: 1; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #fff, rgba(220, 245, 255, .5) 30%, transparent 70%), linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .8) 50%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .8) 50%, transparent 54%); }
body[data-feature="archive"] .sk-bot *, body[data-feature="log"] .sk-bot * { animation-play-state: paused !important; }

/* TAKE A TOUR: a ring that highlights each console control in turn. */
.sk-spot { position: fixed; z-index: 60; border: 1.5px solid #bff1ff; border-radius: 14px; pointer-events: none; opacity: 0; box-shadow: 0 0 16px rgba(110, 220, 255, .8), inset 0 0 12px rgba(110, 220, 255, .4); transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s; }
.sk-spot.on { opacity: 1; animation: sk-spot 1.8s ease-in-out infinite; }
@keyframes sk-spot { 50% { border-color: rgba(191, 241, 255, .55); box-shadow: 0 0 26px rgba(110, 220, 255, 1), inset 0 0 16px rgba(110, 220, 255, .5); } }

/* PILOT ID: click to set a name; first visit opens this entry automatically. */
.pilot-id { cursor: pointer; }
.pilot-id:hover, .pilot-id:focus-visible { border-color: rgba(143, 230, 255, .55); outline: none; }
.pilot-pop { position: absolute; top: 62px; right: 0; z-index: 70; width: 230px; padding: 14px 16px; border: 1px solid rgba(140, 225, 255, .5); border-radius: 10px; background: rgba(4, 16, 26, .94); box-shadow: 0 0 18px rgba(80, 200, 255, .22), 0 8px 24px rgba(0, 0, 0, .55); color: #d8f2fb; font-family: var(--mono); animation: nb-fade .3s ease both; }
.pilot-pop[hidden] { display: none; }
.pp-title { margin: 0 0 10px; color: #e6f8ff; font-size: var(--fs-body); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.pp-label { display: block; margin-bottom: 6px; color: rgba(170, 215, 230, .7); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.pp-input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid rgba(140, 225, 255, .4); border-radius: 7px; outline: none; background: rgba(8, 30, 44, .8); color: #fff; font: var(--fs-body) var(--mono); letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }
.pp-input:focus { border-color: #bff1ff; box-shadow: 0 0 8px rgba(110, 220, 255, .35); }
.pp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pp-btn { padding: 6px 12px; border: 1px solid rgba(140, 225, 255, .45); border-radius: 7px; background: rgba(8, 34, 50, .6); color: #d8f2fb; font: 500 var(--fs-micro) var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; font-stretch: var(--stretch-instrument); }
.pp-btn.pp-ok { border-color: #9fe9ff; background: rgba(36, 104, 134, .55); color: #fff; }
.pp-btn:hover, .pp-btn:focus-visible { border-color: #bff1ff; outline: none; color: #fff; }
/* SKYY BOT: tuned composition (plane units; the top of the glass is strongly foreshortened). */
.sk-nav[hidden] { display: none; }
.sk-head { top: 26px; gap: 16px; }
.sk-bone { width: 66px; height: 33px; stroke-width: 1.8; }
.sk-online { top: 92px; }
.sk-bubble { top: 132px; width: 372px; height: 246px; padding: 16px 22px 14px; }
.sk-msg { font-size: 23px; line-height: var(--lh-tight); }
.sk-hail { font-size: 19px; margin-bottom: 5px; }
.sk-bot { left: 34.2%; top: 40.6%; width: 38.5%; }
.sk-actions { top: 702px; }
.sk-form { top: 812px; }
.sk-actions { top: 692px; gap: 8px; }
.sk-btn { height: 31px; font-size: 15px; }
.sk-form { top: 810px; height: 37px; }

/* SKYY BOT refinements: two actions (TAKE A TOUR, ASK ME ANYTHING), a plain focused message field with a
   blinking caret, and an upright speaking posture for the bubble (transform set in app.js). */
.sk-actions { top: 712px; }
.sk-input:focus, .sk-input:focus-visible { outline: none; outline-offset: 0; box-shadow: none; }
.sk-input { caret-color: #bff1ff; }
.sk-form:focus-within { border-color: rgba(140, 225, 255, .4); box-shadow: none; }
.sk-btn:focus-visible { outline: none; }
.sk-bubble { transform-origin: 0 0; will-change: transform; }
.aux-right .sk-head, .aux-right .sk-online { transition: opacity .6s ease; }
.aux-right.sk-talking .sk-head, .aux-right.sk-talking .sk-online { opacity: .12; }

/* TAKE A TOUR: while Archive or Log covers the cockpit, Skyy's instruction appears in a small panel above it. */
.sk-toast { position: fixed; right: 24px; bottom: 24px; z-index: 1100; display: flex; align-items: center; gap: 12px; width: min(330px, calc(100vw - 48px)); box-sizing: border-box; padding: 12px 16px 12px 12px; border: 1px solid rgba(140, 225, 255, .5); border-radius: 12px; background: rgba(4, 16, 26, .92); box-shadow: 0 0 18px rgba(80, 200, 255, .25), 0 8px 24px rgba(0, 0, 0, .55); color: #eaf8fd; pointer-events: none; animation: nb-fade .4s ease both; }
.sk-toast[hidden] { display: none; }
.sk-toast-face { flex: none; width: 50px; height: 50px; border: 1px solid rgba(140, 225, 255, .45); border-radius: 50%; background: rgba(10, 40, 58, .8) url('./assets/skyy/skyy-head.webp') no-repeat; background-size: 96px auto; background-position: -23px -3px; box-shadow: 0 0 8px rgba(110, 220, 255, .35); }
.sk-toast b { display: block; margin-bottom: 3px; color: #8fe6ff; font: 500 10px var(--mono); letter-spacing: var(--ls-caps); font-stretch: var(--stretch-instrument); }
.sk-toast p { margin: 0; font: 13px/1.4 var(--sans); }
.sk-nav [data-nav="exit"] { letter-spacing: var(--ls-label); font-stretch: var(--stretch-instrument); }

/* Central window: the same illuminated cyan edge as the auxiliary windows (.aux-frame .af-edge, at .86 opacity),
   drawn just inside the printed glass and layered beneath the viewport (z-index 0 < .viewport-frame 1). */
.cw-border { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: .86; }
.cw-border path { fill: none; stroke: rgba(120, 220, 250, .62); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(90, 210, 255, .7)); }

/* ===== PILOT PROFILE · MEMBERSHIP & ACCESS · SYSTEM SETTINGS =====
   The same overlay, frame, sidebar, tools bar, dropdowns and buttons as ARCHIVE and LOG (.ar-*); what follows only adds
   the panels and controls these interfaces need, in the same palette, chamfers and Courier New. */
.pilot-id { display: none !important; }                     /* the floating Pilot ID gives way to PROFILE on the console */
.os-main { gap: 12px; }
.os-main > [hidden] { display: none !important; }
.os-swap { animation: os-swap .32s var(--ease) both; }
@keyframes os-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.os-side { gap: 10px; }
.os-chev { display: grid; place-items: center; width: 10px; } .os-chev svg { width: 7px; height: 11px; }
.os-side-status { display: grid; gap: 6px; margin-top: 8px; padding: 14px 12px 0; border-top: 1px solid rgba(120, 214, 240, .18); }
.os-mini-head { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.os-side-status b { color: #e6f6fb; font-weight: 400; font-size: var(--fs-small); letter-spacing: var(--ls-caps); }
.os-side-status small { color: var(--ar-gold); font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.os-side-status .ar-inline { justify-self: start; margin-top: 4px; padding: 5px 12px; letter-spacing: var(--ls-caps); }
.os-back { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 12px; border: 0; background: none; color: var(--ar-soft); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.os-back svg { width: 16px; height: 16px; } .os-back:hover { color: var(--ar-gold); }
/* panels: chamfered like the sidebar */
.os-panel { --ar-cut: 14px; position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 14px; isolation: isolate; }
.os-panel::before, .os-panel::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut)); }
.os-panel::before { inset: 0; background: linear-gradient(180deg, rgba(140, 222, 246, .42), rgba(100, 180, 210, .16) 50%, rgba(120, 214, 240, .32)); transition: background .25s; }
.os-panel::after { inset: 1px; background: linear-gradient(180deg, rgba(12, 32, 44, .94), rgba(6, 18, 27, .94)); }
.os-panel.focus::before { background: linear-gradient(180deg, rgba(233, 180, 94, .7), rgba(233, 180, 94, .22) 50%, rgba(233, 180, 94, .5)); }
.os-panel-head { display: flex; align-items: center; gap: 10px; margin: 0; color: #e6f5fa; font-weight: 400; font-size: var(--fs-small); letter-spacing: var(--ls-wide); }
.os-ico { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ar-gold); } .os-ico svg { width: 18px; height: 18px; }
.os-row { display: grid; gap: 6px; min-width: 0; }
.os-label { color: #cfe9f2; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.os-hint { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-label); line-height: 1.4; }
.os-slider-line { display: grid; grid-template-columns: 16px 1fr 44px; align-items: center; gap: 10px; }
.os-slider-ico { color: var(--ar-soft); } .os-slider-ico svg { width: 15px; height: 15px; }
.os-out { color: #e6f6fb; font-size: var(--fs-micro); text-align: right; font-variant-numeric: tabular-nums; }
.os-range { --fill: 50%; width: 100%; height: 16px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.os-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #6fd8f5 var(--fill), rgba(120, 214, 240, .18) var(--fill)); box-shadow: 0 0 6px rgba(110, 210, 245, .35); }
.os-range::-moz-range-track { height: 2px; background: rgba(120, 214, 240, .18); } .os-range::-moz-range-progress { height: 2px; background: #6fd8f5; }
.os-range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; border: 1px solid #ffe3b3; border-radius: 50%; background: var(--ar-gold); box-shadow: 0 0 8px rgba(233, 180, 94, .8); -webkit-appearance: none; }
.os-range::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid #ffe3b3; border-radius: 50%; background: var(--ar-gold); }
.os-range:focus-visible { outline: 1px solid var(--ar-gold); outline-offset: 4px; }
.os-toggle-row { grid-template-columns: 1fr auto; align-items: center; column-gap: 14px; }
.os-toggle-row .os-hint { grid-column: 1; grid-row: 2; }
.os-toggle-row .os-toggle { grid-column: 2; grid-row: 1 / span 2; }
.os-toggle { position: relative; width: 38px; height: 18px; padding: 0; border: 1px solid rgba(120, 214, 240, .35); border-radius: 10px; background: rgba(3, 12, 18, .7); transition: border-color .18s, background .18s; }
.os-toggle i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #5f818d; transition: transform .2s var(--ease), background .2s; }
.os-toggle.on { border-color: #8fe6ff; background: rgba(60, 170, 215, .35); box-shadow: 0 0 10px rgba(110, 210, 245, .3); }
.os-toggle.on i { transform: translateX(20px); background: #e6f9ff; box-shadow: 0 0 6px #8fe6ff; }
.os-select-row .ar-dd { justify-self: stretch; }
.os-state { color: var(--ar-soft); } .os-state.dirty { color: var(--ar-gold); }
.ar-act:disabled { opacity: .45; cursor: default; }
/* notices */
.od-notice { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 1100; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 9px 16px; transform: translate(-50%, -8px); border: 1px solid rgba(120, 214, 240, .5); background: rgba(5, 16, 24, .92); color: #e6f6fb; font: var(--fs-micro) var(--font); letter-spacing: var(--ls-caps); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.od-notice.show { opacity: 1; transform: translate(-50%, 0); }
.od-notice i { width: 6px; height: 6px; border-radius: 50%; background: #8fe6ff; box-shadow: 0 0 6px #8fe6ff; }
.od-notice b { color: #e9b45e; font-weight: 400; }
.od-notice[data-kind="mission"] i { background: #e9b45e; box-shadow: 0 0 6px #e9b45e; }
.od-notice span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pause cockpit animation behind the new interfaces, as behind Archive and Log */
body[data-feature="profile"] .aux-stage *, body[data-feature="settings"] .aux-stage *, body[data-feature="profile"] .sk-bot *, body[data-feature="settings"] .sk-bot * { animation-play-state: paused !important; }

/* ---- Pilot Profile ---- */
.pf-view, .ms-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pf-grid { display: grid; grid-template-columns: minmax(200px, .9fr) minmax(220px, 1.15fr) minmax(280px, 1.25fr); gap: clamp(12px, 1.6vw, 24px); flex: 1; min-height: 0; }
.pf-left, .pf-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.pf-id-list { display: grid; gap: 10px; margin: 0; }
.pf-id-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
.pf-id-row dt { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.pf-id-row dd { margin: 0; min-width: 0; color: #e6f6fb; font-size: var(--fs-small); letter-spacing: var(--ls-caps); }
.pf-input { width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid rgba(120, 214, 240, .22); border-radius: 2px; background: rgba(3, 12, 18, .6); color: #e6f6fb; outline: none; text-transform: uppercase; }
.pf-input:focus { border-color: var(--ar-gold); }
.pf-active { display: flex; align-items: center; gap: 8px; color: #8ff0b4 !important; }
.pf-active i { width: 6px; height: 6px; border-radius: 50%; background: #5fe39a; box-shadow: 0 0 6px #5fe39a; }
.pf-stat-list { display: grid; gap: 10px; }
.pf-stat { display: grid; grid-template-columns: 1fr 70px auto; align-items: center; gap: 10px; }
.pf-stat-label { color: #9fbfca; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.pf-stat-bar { position: relative; height: 2px; background: rgba(120, 214, 240, .16); }
.pf-stat-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: #6fd8f5; box-shadow: 0 0 6px rgba(110, 210, 245, .5); }
.pf-stat-val { color: #e6f6fb; font-weight: 400; font-size: var(--fs-micro); font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.pf-centre { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; min-height: 0; --c: 140, 225, 255; }
.pf-stage { width: 100%; height: 100%; min-height: 300px; max-height: 620px; translate: none; }
.pf-pilot-tag { margin: 0 0 4px; color: var(--ar-soft); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); }
.pf-tabs { display: flex; gap: 4px; flex: none; padding: 5px; border: 1px solid rgba(120, 214, 240, .24); background: rgba(8, 24, 34, .55); }
.pf-tab { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 4px 6px; border: 1px solid transparent; border-radius: 2px; background: none; color: var(--ar-soft); font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.pf-tab svg { width: 15px; height: 15px; }
.pf-tab:hover { color: #e6f6fb; }
.pf-tab.on { border-color: var(--ar-gold); color: #fff3dc; background: linear-gradient(90deg, rgba(233, 180, 94, .16), rgba(233, 180, 94, .05)); box-shadow: 0 0 12px rgba(233, 180, 94, .2); }
.pf-opts { --ar-cut: 14px; position: relative; display: grid; align-content: start; gap: 16px; flex: 1; min-height: 0; padding: 16px; overflow: hidden auto; isolation: isolate; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
.pf-opts::before, .pf-opts::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut)); }
.pf-opts::before { inset: 0; background: linear-gradient(180deg, rgba(140, 222, 246, .42), rgba(100, 180, 210, .16) 50%, rgba(120, 214, 240, .32)); }
.pf-opts::after { inset: 1px; background: linear-gradient(180deg, rgba(12, 32, 44, .94), rgba(6, 18, 27, .94)); }
.pf-group { display: grid; gap: 9px; }
.pf-group-head { margin: 0; color: var(--ar-soft); font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.pf-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pf-choices.swatch { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pf-choice { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 9px 6px 8px; border: 1px solid rgba(120, 214, 240, .22); border-radius: 2px; background: rgba(8, 24, 34, .5); color: #b9d6e0; font-size: var(--fs-nano); letter-spacing: var(--ls-label); text-align: center; transition: border-color .15s, background .15s, color .15s; }
.pf-choice span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-choice:hover { border-color: rgba(160, 232, 255, .7); color: #fff; }
.pf-choice.on { border-color: var(--ar-gold); background: rgba(233, 180, 94, .1); color: #fff3dc; box-shadow: 0 0 12px rgba(233, 180, 94, .22), inset 0 0 10px rgba(233, 180, 94, .08); }
.pf-glyph { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(120, 214, 240, .2); border-radius: 50%; color: #9fe8ff; background: radial-gradient(circle, rgba(80, 190, 240, .14), transparent 70%); }
.pf-glyph svg { width: 22px; height: 22px; }
.pf-choice.on .pf-glyph { color: #ffcf80; border-color: rgba(233, 180, 94, .5); }
.pf-choice.swatch i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 10px var(--sw), inset 0 0 4px rgba(0, 0, 0, .5); }
.pf-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pf-actions .os-state { margin-right: auto; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.pf-actions .ar-act { flex: 0 0 auto; min-height: 34px; padding: 4px 16px; }

/* ---- Membership & Access ---- */
.ms-view { gap: 0; overflow: hidden auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
.ms-status b { color: #fff3dc; font-weight: 400; } .ms-status small { color: var(--ar-soft); }
.ms-billing { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ms-billing-label { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); margin-right: 4px; }
.ms-bill { min-height: 28px; padding: 4px 12px; border: 1px solid rgba(120, 214, 240, .28); border-radius: 2px; background: rgba(3, 12, 18, .6); color: #b9d6e0; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.ms-bill.on { border-color: var(--ar-gold); color: #fff3dc; background: rgba(233, 180, 94, .16); box-shadow: 0 0 10px rgba(233, 180, 94, .25); }
.ms-save-chip { padding: 3px 8px; border: 1px solid rgba(233, 180, 94, .6); color: #ffcf80; font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: stretch; }
.ms-card { --ar-cut: 16px; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 18px 16px; isolation: isolate; transition: transform .25s var(--ease); }
.ms-card::before, .ms-card::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut)); }
.ms-card::before { inset: 0; background: linear-gradient(180deg, rgba(140, 222, 246, .45), rgba(100, 180, 210, .16) 50%, rgba(120, 214, 240, .35)); }
.ms-card::after { inset: 1px; background: linear-gradient(180deg, rgba(12, 32, 44, .95), rgba(6, 18, 27, .95)); }
.ms-card.ms-annual::before { background: linear-gradient(180deg, #e9b45e, rgba(233, 180, 94, .35) 50%, rgba(233, 180, 94, .75)); }
.ms-card.ms-annual::after { background: radial-gradient(ellipse at 50% 0%, rgba(233, 180, 94, .12), transparent 60%), linear-gradient(180deg, rgba(20, 30, 36, .96), rgba(8, 16, 22, .96)); }
.ms-card.ms-annual { filter: drop-shadow(0 0 12px rgba(233, 180, 94, .22)); }
.ms-card.chosen { transform: translateY(-3px); }
.ms-card.ms-monthly.chosen::before { background: linear-gradient(180deg, rgba(180, 236, 255, .85), rgba(120, 214, 240, .35) 50%, rgba(160, 232, 255, .6)); }
.ms-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ms-name { margin: 0; color: #e6f5fa; font-weight: 400; font-size: var(--fs-h3); letter-spacing: var(--ls-wide); }
.ms-tag { padding: 3px 7px; border: 1px solid rgba(120, 214, 240, .45); color: #9fe8ff; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); white-space: nowrap; }
.ms-annual .ms-tag { border-color: rgba(233, 180, 94, .7); color: #1a1206; background: var(--ar-gold); }
.ms-price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; }
.ms-price b { color: #fff; font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); letter-spacing: .02em; }
.ms-price span { color: var(--ar-soft); font-size: var(--fs-micro); }
.ms-annual .ms-price b { color: #ffe3b3; text-shadow: 0 0 14px rgba(233, 180, 94, .4); }
.ms-yearly { display: flex; align-items: center; gap: 8px; margin: 0; color: #9fbfca; font-size: var(--fs-micro); }
.ms-yearly em { padding: 2px 6px; border: 1px solid rgba(233, 180, 94, .7); color: #ffcf80; font-style: normal; font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.ms-note { margin: 0; color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.ms-feats { display: grid; gap: 7px; margin: 4px 0 0; padding: 0; list-style: none; color: #cfe9f2; font-size: var(--fs-micro); line-height: 1.45; }
.ms-feats li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; }
.ms-feats svg { width: 13px; height: 13px; margin-top: 1px; color: #6fd8f5; }
.ms-annual .ms-feats svg { color: var(--ar-gold); }
.ms-extras { display: grid; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(233, 180, 94, .25); }
.ms-extras-head { margin: 0; color: var(--ar-gold); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.ms-extra { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.ms-extra-ico { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(233, 180, 94, .55); color: #ffcf80; }
.ms-extra-ico svg { width: 15px; height: 15px; }
.ms-extra b { display: block; color: #fff3dc; font-weight: 400; font-size: var(--fs-micro); letter-spacing: var(--ls-label); }
.ms-extra small { display: block; margin-top: 2px; color: #9fbfca; font-size: var(--fs-nano); line-height: 1.45; }
.ms-cta { margin-top: auto; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(120, 214, 240, .55); border-radius: 2px; background: rgba(40, 110, 140, .16); color: #dff4fa; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); transition: border-color .15s, background .15s, color .15s; }
.ms-cta:hover { border-color: #9fe8ff; background: rgba(60, 160, 200, .26); color: #fff; }
.ms-cta.gold { border-color: var(--ar-gold); background: linear-gradient(180deg, #f0c06e, #d99c42); color: #1a1206; font-weight: 700; }
.ms-cta.gold:hover { background: linear-gradient(180deg, #ffd38a, #e9ab52); }
.ms-cta.current, .ms-cta:disabled { border-color: rgba(143, 240, 180, .5); background: rgba(40, 120, 80, .12); color: #8ff0b4; font-weight: 400; cursor: default; }
.ms-card.current .ms-name::after { content: ' · CURRENT'; color: #8ff0b4; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.ms-compare-wrap { overflow-x: auto; border: 1px solid rgba(120, 214, 240, .2); background: rgba(6, 18, 27, .6); }
.ms-compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-micro); }
.ms-compare th, .ms-compare td { padding: 8px 12px; border-bottom: 1px solid rgba(120, 214, 240, .12); text-align: left; font-weight: 400; color: #cfe9f2; letter-spacing: var(--ls-label); }
.ms-compare thead th { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.ms-compare tbody th { color: #9fbfca; }
.ms-compare .gold, .ms-compare thead th:last-child { color: #ffcf80; }
.ms-fine { margin: 12px 0 4px; max-width: 90ch; color: var(--ar-soft); font-size: var(--fs-nano); line-height: 1.5; letter-spacing: var(--ls-label); }
.ms-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(2, 8, 14, .66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ms-confirm[hidden] { display: none; }
.ms-confirm-box { --ar-cut: 14px; position: relative; display: grid; gap: 12px; width: min(440px, 100%); padding: 22px; isolation: isolate; }
.ms-confirm-box::before, .ms-confirm-box::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut)), 0 var(--ar-cut)); }
.ms-confirm-box::before { inset: 0; background: linear-gradient(180deg, #e9b45e, rgba(233, 180, 94, .35)); }
.ms-confirm-box::after { inset: 1px; background: linear-gradient(180deg, rgba(14, 30, 40, .98), rgba(6, 16, 24, .98)); }
.ms-confirm-head { margin: 0; color: #fff3dc; font-size: var(--fs-small); letter-spacing: var(--ls-wide); }
.ms-confirm-head.ok { color: #8ff0b4; }
.ms-confirm-text { margin: 0; color: #cfe9f2; font-size: var(--fs-micro); line-height: 1.55; }
.ms-confirm-proto { margin: 0; color: var(--ar-gold); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.ms-confirm-acts { display: flex; gap: 8px; justify-content: flex-end; }
.ms-confirm-acts .ar-act { flex: 0 0 auto; min-height: 32px; padding: 4px 16px; }
.pf-root .ar-main { position: relative; }

/* ---- System Settings ---- */
.st-tools .ar-act { flex: 0 0 auto; min-height: 30px; padding: 4px 16px; }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: clamp(12px, 1.4vw, 20px); flex: 1; min-height: 0; padding: 2px 6px 12px 2px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
.st-grid .os-panel { transition: opacity .4s ease, transform .4s var(--ease); }
.st-grid:not(.lit) .os-panel { opacity: .35; transform: translateY(6px); }
.st-audio { grid-row: span 2; }
.st-test { justify-self: start; padding: 5px 12px; letter-spacing: var(--ls-caps); }
.st-banner { display: flex; align-items: center; gap: 14px; flex: none; padding: 10px 14px; border: 1px solid rgba(233, 180, 94, .4); background: linear-gradient(90deg, rgba(233, 180, 94, .1), rgba(8, 24, 34, .5)); }
.st-banner-ico { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ar-gold); } .st-banner-ico svg { width: 22px; height: 22px; }
.st-banner div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.st-banner b { color: #fff3dc; font-weight: 400; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.st-banner small { color: #9fbfca; font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.st-banner .ar-act { flex: 0 0 auto; min-height: 30px; padding: 4px 14px; }

/* ---- accessibility and display settings (html attributes set by System Settings) ---- */
:root { --od-glow: 1; }
.ar-root .ar-frame { filter: drop-shadow(0 0 calc(14px * var(--od-glow)) rgba(70, 180, 230, calc(.22 * var(--od-glow)))); }
.ar-root .ar-title { text-shadow: 0 0 calc(18px * var(--od-glow)) rgba(120, 214, 240, calc(.45 * var(--od-glow))); }
.home-title, .viewport-state { text-shadow: 0 0 calc(12px * var(--od-glow)) rgba(120, 214, 240, calc(.4 * var(--od-glow))); }
html[data-large-text] { --fs-title: 31px; --fs-h2: 20px; --fs-h3: 17px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 12px; --fs-nano: 11px; }
html[data-high-contrast] .ar-root { --ar-soft: #b8d6e0; --ar-edge: rgba(170, 236, 255, .85); }
html[data-high-contrast] .ar-root .ar-veil { background: rgba(0, 3, 6, .94); }
html[data-high-contrast] .os-hint, html[data-high-contrast] .ms-note, html[data-high-contrast] .ms-fine { color: #c9e3ec; }
html[data-high-contrast] .home-message, html[data-high-contrast] .sk-msg { color: #fff; }
html[data-reduce-motion] *, html[data-reduce-motion] *::before, html[data-reduce-motion] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-simpler] .ar-frame { transition: none; }

@media (max-width: 1180px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; overflow: hidden auto; }
  .pf-centre { grid-row: span 2; }
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-centre { grid-row: auto; order: -1; }
  .pf-stage { min-height: 280px; height: 300px; }
  .pf-opts { overflow: visible; }
  .ms-cards { grid-template-columns: minmax(0, 1fr); }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .st-audio { grid-row: auto; }
  .os-back { display: none; }
  .os-side-status { margin-top: 0; padding-top: 6px; border-top: 0; }
  .st-banner { flex-wrap: wrap; }
}
/* fixes: hologram stage size (wins over the onboarding stage height), no shrinking inside scrolling views, full labels */
.pf-centre .pf-stage { height: 100%; min-height: 320px; max-height: 640px; }
.ms-view > * { flex-shrink: 0; }
.pf-choice span { white-space: normal; overflow: visible; line-height: 1.25; }
.os-root .ar-nav-label { white-space: normal; overflow: visible; line-height: 1.3; }
@media (max-width: 980px) { .pf-centre .pf-stage { height: 300px; min-height: 280px; } }
/* narrower screens: the profile scrolls as one column of panels instead of fitting the frame */
@media (max-width: 1180px) {
  .pf-view { overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
  .pf-grid { flex: none; overflow: visible; align-items: start; }
  .pf-left, .pf-right { min-height: auto; }
  .pf-opts { flex: none; overflow: visible; }
  .pf-centre { min-height: 460px; }
}
@media (max-width: 980px) {
  .pf-grid { display: flex; flex-direction: column; }
  .pf-centre { min-height: 0; }
  .pf-centre .pf-stage { flex: none; }
  .st-grid { flex: none; overflow: visible; }
  .st-root .os-main { overflow: hidden auto; }
}

/* console: six physical buttons on the redrawn console row (assets/cockpit/console-keys.png, placed by app.js) */
.console-keys-art { position: absolute; z-index: 0; display: block; max-width: none; pointer-events: none; user-select: none; }
.physical-key.ck-key { z-index: 2; }
.ck-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + var(--ck-d, 27px))); color: #e6d2a8; font: 700 var(--ck-fs, 10px) var(--font); letter-spacing: .2em; text-indent: .2em; white-space: nowrap; text-shadow: 0 0 4px rgba(255, 196, 110, .55), 0 0 1px rgba(255, 220, 160, .6); pointer-events: none; transition: color .15s, text-shadow .15s; }
.physical-key.ck-key:hover .ck-label, .physical-key.ck-key:focus-visible .ck-label, .physical-key.ck-key.is-active .ck-label { color: #ffe8bf; text-shadow: 0 0 7px rgba(255, 190, 90, .95), 0 0 2px rgba(255, 230, 180, .9); }
.physical-key.ck-key.is-active::after { border-color: rgba(255, 216, 135, .5); background: rgba(255, 189, 76, .16); box-shadow: 0 0 10px rgba(255, 177, 56, .32); }
.physical-key.ck-key:active .ck-label { transform: translate(-50%, calc(-50% + var(--ck-d, 27px))); }

/* ===== System Settings: the systems console (one control surface per system) ===== */
.st-crumb { display: flex; align-items: center; gap: 10px; }
.st-crumb-code { padding: 2px 6px; border: 1px solid rgba(233, 180, 94, .6); color: var(--ar-gold); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.st-led { display: flex; align-items: center; gap: 6px; font-size: var(--fs-nano); letter-spacing: var(--ls-label); color: #5f818d; }
.st-led::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #3f6a78; }
.st-nav.active .st-led::before { background: #8fe6ff; box-shadow: 0 0 6px #8fe6ff; }
.st-nav.changed .st-led::before { background: var(--ar-gold); box-shadow: 0 0 6px var(--ar-gold); }
.st-surface { position: relative; display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.25fr); gap: clamp(16px, 2.4vw, 40px); flex: 1; min-height: 0; padding: clamp(10px, 1.6vh, 20px) 4px 6px; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
.st-surface:not(.lit) > * { opacity: .3; }
.st-surface > * { transition: opacity .45s ease; }
/* instrument well: concentric frame behind the main instrument */
.st-well { position: relative; display: grid; place-items: center; min-height: 300px; isolation: isolate; }
.st-well::before { content: ''; position: absolute; z-index: -1; width: min(100%, 360px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(40, 120, 160, .16), transparent 62%), repeating-radial-gradient(circle, transparent 0 17px, rgba(120, 214, 240, .06) 17px 18px); }
.st-well::after { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(120, 214, 240, .25) 20%, rgba(120, 214, 240, .25) 80%, rgba(233, 180, 94, .6)); }
.st-bays { display: grid; align-content: center; gap: 14px; min-width: 0; }
.st-bay { padding: 14px 16px; }
.st-bay::after { background: linear-gradient(180deg, rgba(10, 28, 39, .94), rgba(5, 15, 23, .94)); }
.st-bay .os-panel-head { font-size: var(--fs-micro); }
.st-code { width: auto; height: auto; padding: 1px 5px; border: 1px solid rgba(120, 214, 240, .45); color: #9fe8ff; font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.st-bays .st-bay { position: relative; }
.st-bays .st-bay > .os-panel-head::before { content: ''; position: absolute; left: calc(-1 * clamp(16px, 2.4vw, 40px)); top: 24px; width: calc(clamp(16px, 2.4vw, 40px) - 4px); height: 1px; background: linear-gradient(90deg, rgba(120, 214, 240, 0), rgba(120, 214, 240, .5)); }
.st-bays .st-bay > .os-panel-head::after { content: ''; position: absolute; left: -6px; top: 21px; width: 6px; height: 6px; border: 1px solid #8fe6ff; transform: rotate(45deg); background: #061019; }
.st-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px 14px; justify-items: center; }
/* dials */
.os-dial { position: relative; display: grid; justify-items: center; width: 118px; cursor: grab; touch-action: none; outline: none; user-select: none; }
.os-dial.drag { cursor: grabbing; }
.os-dial svg { display: block; width: 100%; height: auto; fill: none; overflow: visible; }
.os-dial .dl-ticks path { stroke: rgba(120, 214, 240, .35); stroke-width: 1; }
.dl-track { stroke: rgba(120, 214, 240, .16); stroke-width: 4; stroke-linecap: round; fill: none; }
.dl-val { stroke: #6fd8f5; stroke-width: 4; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 4px rgba(110, 210, 245, .7)); }
.dl-ring { stroke: rgba(120, 214, 240, .22); stroke-width: 1; stroke-dasharray: 2 3; }
.dl-knob { fill: var(--ar-gold); filter: drop-shadow(0 0 4px rgba(233, 180, 94, .9)); }
.dl-read { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 2px; width: 74%; transform: translate(-50%, -54%); text-align: center; pointer-events: none; }
.dl-read b { color: #e6f6fb; font-weight: 400; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.dl-read span { color: var(--ar-soft); font-size: 8px; letter-spacing: .1em; line-height: 1.3; }
.os-dial:focus-visible .dl-track, .os-dial:hover .dl-track { stroke: rgba(160, 232, 255, .3); }
.os-dial:focus-visible .dl-knob { fill: #ffe3b3; }
.os-dial.xl { width: min(100%, 290px); }
.os-dial.xl .dl-read b { font-size: clamp(26px, 2.6vw, 40px); letter-spacing: .04em; text-shadow: 0 0 calc(14px * var(--od-glow)) rgba(120, 214, 240, .5); }
.os-dial.xl .dl-read span { font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.os-dial.xl .dl-track, .os-dial.xl .dl-val { stroke-width: 3; }
/* switches */
.os-switch { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 1px solid rgba(120, 214, 240, .16); background: rgba(3, 12, 18, .5); text-align: left; transition: border-color .15s, background .15s; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.os-switch + .os-switch { margin-top: 6px; }
.os-switch:hover { border-color: rgba(160, 232, 255, .5); }
.sw-led { width: 7px; height: 7px; border-radius: 50%; background: #2c4a55; box-shadow: inset 0 0 2px #000; }
.os-switch.on .sw-led { background: #8fe6ff; box-shadow: 0 0 8px #8fe6ff; }
.sw-text { display: grid; gap: 2px; min-width: 0; }
.sw-text b { color: #d7eef5; font-weight: 400; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.sw-text small { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.sw-state { min-width: 38px; padding: 3px 0; border: 1px solid rgba(120, 214, 240, .25); color: #5f818d; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); text-align: center; }
.os-switch.on .sw-state { border-color: rgba(233, 180, 94, .7); color: #ffcf80; background: rgba(233, 180, 94, .1); }
/* detent selector */
.os-detent { display: grid; gap: 8px; }
.dt-label { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.dt-row { display: flex; gap: 0; border: 1px solid rgba(120, 214, 240, .25); }
.dt-opt { flex: 1; min-height: 32px; padding: 4px 8px; border: 0; border-right: 1px solid rgba(120, 214, 240, .18); background: rgba(3, 12, 18, .5); color: #9fbfca; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.dt-opt:last-child { border-right: 0; }
.dt-opt:hover { color: #fff; background: rgba(60, 160, 200, .14); }
.dt-opt.on { color: #fff3dc; background: rgba(233, 180, 94, .16); box-shadow: inset 0 -2px 0 var(--ar-gold); }
/* instrument rings */
.st-ring, .st-rotary { position: relative; width: min(100%, 300px); aspect-ratio: 1; }
.st-ring svg, .st-rotary svg { display: block; width: 100%; height: 100%; fill: none; overflow: visible; }
.ir-outer { stroke: rgba(120, 214, 240, .3); stroke-width: 1; }
.ir-dash { stroke: rgba(120, 214, 240, .2); stroke-width: 1; stroke-dasharray: 1 5; }
.ir-inner { stroke: rgba(120, 214, 240, .35); stroke-width: 1; fill: rgba(4, 14, 22, .7); }
.ir-seg { stroke: rgba(120, 214, 240, .14); stroke-width: 10; }
.ir-seg.on { stroke: #6fd8f5; filter: drop-shadow(0 0 5px rgba(110, 210, 245, .6)); }
.ir-lab { fill: #7fa3b0; font: 8px var(--font); letter-spacing: .12em; text-anchor: middle; stroke: none; }
.ir-sweep { transform-origin: 110px 110px; animation: st-sweep 9s linear infinite; }
.ir-sweep path { stroke: rgba(160, 232, 255, .18); stroke-width: 1; }
@keyframes st-sweep { to { transform: rotate(360deg); } }
.ir-centre { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 4px; width: 46%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ir-centre b { color: #e6f6fb; font-weight: 400; font-size: clamp(20px, 2vw, 30px); letter-spacing: .06em; text-shadow: 0 0 calc(12px * var(--od-glow)) rgba(120, 214, 240, .45); }
.ir-centre span { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); line-height: 1.4; }
.st-gauge .dl-track, .st-gauge .dl-val { stroke-width: 6; }
.rt-needle { stroke: var(--ar-gold); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(233, 180, 94, .8)); transition: transform .35s var(--ease); }
.rt-pos { position: absolute; padding: 4px 8px; transform: translate(-50%, -50%); border: 1px solid rgba(120, 214, 240, .3); background: rgba(4, 14, 22, .85); color: #9fbfca; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); white-space: nowrap; }
.rt-pos:hover { color: #fff; border-color: rgba(160, 232, 255, .7); }
.rt-pos.on { color: #fff3dc; border-color: var(--ar-gold); box-shadow: 0 0 10px rgba(233, 180, 94, .3); }
/* readout strip */
.st-readout { display: flex; align-items: center; gap: 18px; flex: none; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid rgba(120, 214, 240, .2); color: #7fa3b0; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); font-variant-numeric: tabular-nums; }
.st-readout span + span::before { content: '·'; margin-right: 18px; color: rgba(120, 214, 240, .4); }
.st-blip { width: 6px; height: 6px; border-radius: 50%; background: #8fe6ff; box-shadow: 0 0 6px #8fe6ff; animation: st-blip 2.4s ease-in-out infinite; }
@keyframes st-blip { 50% { opacity: .3; } }
.st-log { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.st-log li { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; color: #cfe9f2; font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.st-log time { color: var(--ar-soft); } .st-log b { color: var(--ar-gold); font-weight: 400; }
.st-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 6px 0 0; }
.st-facts div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px dashed rgba(120, 214, 240, .14); }
.st-facts dt { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-caps); } .st-facts dd { margin: 0; color: #e6f6fb; font-size: var(--fs-nano); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .st-surface { grid-template-columns: minmax(0, 1fr); overflow: visible; flex: none; } .st-well { min-height: 260px; } .st-bays .st-bay > .os-panel-head::before, .st-bays .st-bay > .os-panel-head::after { display: none; } .st-root .os-main { overflow: hidden auto; } }

/* ===== Profile: interests and account ===== */
.in-view, .ac-view { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.in-view > *, .ac-view > * { flex-shrink: 0; }
.in-tools .os-state { font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.in-tools .ar-act { flex: 0 0 auto; min-height: 30px; padding: 4px 14px; }
.in-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(12px, 1.6vw, 22px); flex: 1 1 auto; min-height: 0; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; align-items: start; }
.in-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.in-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 10px; border: 1px solid rgba(120, 214, 240, .25); border-radius: 2px; background: rgba(3, 12, 18, .55); color: #b9d6e0; font-size: var(--fs-nano); letter-spacing: var(--ls-label); transition: border-color .15s, color .15s, background .15s; }
.in-chip:hover { border-color: rgba(160, 232, 255, .7); color: #fff; }
.in-chip.on { border-color: rgba(233, 180, 94, .7); color: #fff3dc; background: rgba(233, 180, 94, .12); }
.in-chip i { display: grid; place-items: center; width: 12px; height: 12px; color: var(--ar-gold); } .in-chip i svg { width: 12px; height: 12px; }
.in-chip.rm:hover i { color: #ff9d8a; }
.in-add { display: flex; gap: 8px; margin-top: 4px; }
.in-add .pf-input { flex: 1; min-width: 0; padding: 7px 9px; }
.in-add .ar-act { flex: 0 0 auto; min-height: 32px; padding: 4px 14px; }
.in-cats { display: grid; gap: 12px; }
.in-group { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed rgba(120, 214, 240, .14); }
.in-group:last-child { border-bottom: 0; }
.in-cathead { justify-self: start; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); }
.in-topics { display: flex; flex-wrap: wrap; gap: 5px; }
.ac-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-content: start; flex: 1 1 auto; min-height: 0; overflow: hidden auto; scrollbar-width: thin; scrollbar-color: rgba(120, 214, 240, .45) transparent; }
.ac-cur { grid-row: span 2; }
.ac-email { margin: 0; color: #fff3dc; font-size: var(--fs-h3); letter-spacing: .06em; word-break: break-all; }
.ac-signout { align-self: start; flex: 0 0 auto; min-height: 32px; padding: 4px 18px; margin-top: 6px; }
.ac-list { display: grid; gap: 8px; }
.ac-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(120, 214, 240, .18); background: rgba(3, 12, 18, .5); }
.ac-row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ac-row-text b { overflow: hidden; color: #e6f6fb; font-weight: 400; font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; }
.ac-row-text small { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.ac-row .ar-act { flex: 0 0 auto; min-height: 28px; padding: 4px 12px; }
.ac-msg { min-height: 1.4em; color: #ffb4a3; }
.ac-note { grid-column: 1 / -1; display: grid; gap: 6px; padding: 12px 14px; border: 1px solid rgba(233, 180, 94, .4); background: rgba(233, 180, 94, .06); }
.ac-note b { color: var(--ar-gold); font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.ac-note p { margin: 0; max-width: 100ch; color: #cfe9f2; font-size: var(--fs-nano); line-height: 1.6; letter-spacing: var(--ls-label); }
@media (max-width: 980px) { .in-grid, .ac-grid { grid-template-columns: minmax(0, 1fr); overflow: visible; } .ac-cur { grid-row: auto; } .in-view, .ac-view { overflow: hidden auto; } }
.dl-cap { display: none; }
.os-dial:not(.xl) .dl-read span { display: none; }
.os-dial:not(.xl) .dl-read { transform: translate(-50%, -62%); }
.os-dial:not(.xl) .dl-cap { display: grid; justify-items: center; gap: 2px; margin-top: -6px; text-align: center; }
.dl-cap b { color: #cfe9f2; font-weight: 400; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.dl-cap small { color: var(--ar-soft); font-size: 8px; letter-spacing: var(--ls-caps); }
.st-rotary .ir-centre b { font-size: clamp(14px, 1.3vw, 19px); letter-spacing: var(--ls-caps); }
.rt-hub { fill: var(--ar-gold); transition: transform .35s var(--ease); filter: drop-shadow(0 0 4px rgba(233, 180, 94, .8)); }
/* Pilot Profile customisation panel: options always inside the panel, scrolling inside it, actions always reachable */
.pf-right { min-height: 0; overflow: hidden; }
.pf-opts { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding-right: 10px; }
.pf-group, .pf-choices { min-width: 0; }
.pf-choices { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); }
.pf-choices.swatch { grid-template-columns: repeat(auto-fill, minmax(min(100%, 82px), 1fr)); }
.pf-choice { overflow: hidden; }
.pf-choice span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.pf-choice.swatch span { letter-spacing: .04em; }
.pf-actions { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1180px) {
  .pf-right { overflow: visible; }
  .pf-opts { max-height: min(56vh, 460px); }
  .pf-actions { padding-top: 4px; }
}

/* ===== Pilot Interests: a chart of the universe ===== */
.in-view { gap: 10px; }
.in-bar { flex-wrap: nowrap; gap: 10px; }
.in-count { flex: none; min-width: 5ch; margin-right: 0; color: var(--ar-gold); font-variant-numeric: tabular-nums; }
.in-sum { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; min-width: 0; max-height: 58px; overflow: hidden auto; scrollbar-width: thin; }
.in-sum .in-chip { min-height: 22px; padding: 2px 7px; font-size: 8.5px; }
.in-bar .in-add { margin: 0; flex: 0 1 150px; }
.in-bar .in-input { padding: 5px 8px; font-size: var(--fs-nano); }
.in-bar .os-state { flex: none; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.in-bar .ar-act { flex: 0 0 auto; min-height: 30px; padding: 4px 12px; }
.in-map { position: relative; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 1.35fr) minmax(170px, 1fr); gap: clamp(18px, 3vw, 54px); flex: 1; min-height: 0; padding: 6px 2px 2px; isolation: isolate; }
.in-leads { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.in-leads path { fill: none; stroke: rgba(120, 214, 240, .18); stroke-width: 1; }
.in-leads path.has { stroke: rgba(233, 180, 94, .4); }
.in-leads path.on { stroke: rgba(160, 232, 255, .75); stroke-dasharray: 4 5; animation: in-flow 1.6s linear infinite; filter: drop-shadow(0 0 3px rgba(110, 210, 245, .6)); }
.in-leads circle { fill: #071621; stroke: rgba(120, 214, 240, .5); stroke-width: 1; }
.in-leads circle.has { stroke: var(--ar-gold); } .in-leads circle.on { fill: #8fe6ff; stroke: #8fe6ff; }
.in-leads .in-hub { fill: #8fe6ff; stroke: none; filter: drop-shadow(0 0 5px #8fe6ff); }
@keyframes in-flow { to { stroke-dashoffset: -18; } }
.in-col { display: flex; flex-direction: column; justify-content: space-around; gap: 12px; min-width: 0; }
.in-col.right { align-items: stretch; }
.in-area { --ar-cut: 12px; position: relative; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto 3px; align-items: center; gap: 4px 12px; width: 100%; padding: 12px 14px 10px; border: 0; background: none; color: #b9d6e0; text-align: left; isolation: isolate; animation: in-float 7s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); transition: transform .25s var(--ease); }
.in-col.right .in-area { grid-template-columns: 1fr 34px; text-align: right; }
.in-col.right .in-area-ico { grid-column: 2; grid-row: 1; } .in-col.right .in-area-text { grid-column: 1; grid-row: 1; }
.in-area::before, .in-area::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, 100% 0, 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, 0 100%, 0 var(--ar-cut)); transition: background .2s; }
.in-col.right .in-area::before, .in-col.right .in-area::after { clip-path: polygon(0 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% 100%, var(--ar-cut) 100%, 0 calc(100% - var(--ar-cut))); }
.in-area::before { inset: 0; background: linear-gradient(135deg, rgba(140, 222, 246, .5), rgba(100, 180, 210, .14) 60%, rgba(120, 214, 240, .3)); }
.in-area::after { inset: 1px; background: linear-gradient(180deg, rgba(10, 30, 42, .9), rgba(5, 16, 24, .92)); }
.in-area:hover::before, .in-area:focus-visible::before { background: linear-gradient(135deg, rgba(170, 236, 255, .85), rgba(110, 200, 235, .3) 60%, rgba(150, 228, 250, .6)); }
.in-area.has::before { background: linear-gradient(135deg, rgba(233, 180, 94, .75), rgba(233, 180, 94, .18) 60%, rgba(233, 180, 94, .5)); }
.in-area.on::before { background: linear-gradient(135deg, #9fe8ff, rgba(120, 214, 240, .45) 60%, #8fe6ff); }
.in-area.on::after { background: radial-gradient(ellipse at 30% 0%, rgba(80, 190, 240, .18), transparent 70%), linear-gradient(180deg, rgba(12, 36, 50, .94), rgba(6, 18, 27, .94)); }
.in-area.on { transform: translateX(var(--nudge, 6px)); }
.in-col.right .in-area.on { --nudge: -6px; }
.in-area:focus-visible { outline: none; }
.in-area-ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(120, 214, 240, .35); border-radius: 50%; color: #9fe8ff; background: radial-gradient(circle, rgba(80, 190, 240, .18), transparent 70%); }
.in-area-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.in-area.has .in-area-ico { color: #ffcf80; border-color: rgba(233, 180, 94, .55); }
.in-area-text { display: grid; gap: 3px; min-width: 0; }
.in-area-text b { color: #e6f5fa; font-weight: 400; font-size: var(--fs-micro); letter-spacing: var(--ls-caps); overflow-wrap: anywhere; }
.in-area-text small { color: var(--ar-soft); font-size: var(--fs-nano); letter-spacing: var(--ls-label); }
.in-area.has .in-area-text small { color: #ffcf80; }
.in-area-meter { grid-column: 1 / -1; position: relative; height: 2px; background: rgba(120, 214, 240, .14); }
.in-area-meter::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--m, 0%); background: var(--ar-gold); box-shadow: 0 0 6px rgba(233, 180, 94, .6); transition: width .3s var(--ease); }
.in-col.right .in-area-meter::after { left: auto; right: 0; }
@keyframes in-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.in-centre { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; --c: 140, 225, 255; }
.in-centre .in-stage { flex: 1; height: auto; min-height: 220px; max-height: none; translate: none; }
.in-deck { --ar-cut: 12px; position: relative; display: grid; gap: 10px; flex: none; padding: 12px 14px; isolation: isolate; animation: os-swap .3s var(--ease) both; }
.in-deck::before, .in-deck::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(var(--ar-cut) 0, calc(100% - var(--ar-cut)) 0, 100% var(--ar-cut), 100% 100%, 0 100%, 0 var(--ar-cut)); }
.in-deck::before { inset: 0; background: linear-gradient(180deg, rgba(160, 232, 255, .7), rgba(120, 214, 240, .2)); }
.in-deck::after { inset: 1px; background: linear-gradient(180deg, rgba(10, 30, 42, .95), rgba(5, 15, 23, .95)); }
.in-deck-head { display: flex; align-items: center; gap: 10px; }
.in-deck-head b { flex: 1; min-width: 0; color: #e6f5fa; font-weight: 400; font-size: var(--fs-micro); letter-spacing: var(--ls-wide); }
.in-deck-ico { display: grid; place-items: center; width: 20px; height: 20px; color: #9fe8ff; } .in-deck-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.in-whole { flex: none; padding: 4px 9px; border: 1px solid rgba(120, 214, 240, .35); background: rgba(3, 12, 18, .6); color: #9fbfca; font-size: var(--fs-nano); letter-spacing: var(--ls-caps); }
.in-whole:hover { color: #fff; border-color: rgba(160, 232, 255, .7); }
.in-whole.on { border-color: var(--ar-gold); color: #fff3dc; background: rgba(233, 180, 94, .14); }
.in-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.in-subjects .in-chip { justify-content: center; min-height: 30px; text-align: center; }
.in-subjects .in-chip span { overflow-wrap: anywhere; }
.in-subjects .in-chip.on { box-shadow: 0 0 10px rgba(233, 180, 94, .22), inset 0 0 8px rgba(233, 180, 94, .1); }
html[data-reduce-motion] .in-area, html[data-reduce-motion] .in-leads path.on { animation: none; }
@media (prefers-reduced-motion: reduce) { .in-area, .in-leads path.on { animation: none; } }
@media (max-width: 1180px) { .in-map { grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.2fr) minmax(150px, 1fr); gap: 16px; } .in-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-bar { flex-wrap: wrap; } .in-sum { flex-basis: 100%; order: 5; } }
@media (max-width: 980px) {
  .in-view { overflow: hidden auto; }
  .in-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; flex: none; }
  .in-centre { grid-column: 1 / -1; grid-row: 1; } .in-centre .in-stage { flex: none; height: 240px; }
  .in-col.left { grid-row: 2; grid-column: 1; } .in-col.right { grid-row: 2; grid-column: 2; }
  .in-col.right .in-area { grid-template-columns: 34px 1fr; text-align: left; } .in-col.right .in-area-ico { grid-column: 1; } .in-col.right .in-area-text { grid-column: 2; }
  .in-leads { display: none; } .in-area { animation: none; padding: 10px; } .in-area-text b { font-size: var(--fs-nano); }
}
@media (min-width: 1181px) { .in-map { grid-template-columns: minmax(160px, 1fr) minmax(300px, 1.7fr) minmax(160px, 1fr); } }
@media (max-width: 980px) { .in-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .in-centre, .in-deck { min-width: 0; } }
.in-subjects { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.in-subjects .in-chip { padding: 5px 8px; font-size: 8.5px; letter-spacing: .06em; }
.in-subjects .in-chip span { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 980px) { .in-subjects { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); } }
/* Skyy's guided tour inside PROFILE and SETTINGS: the toast moves to the bottom-left (clear of each interface's own
   actions) and gains BACK / NEXT; the highlight ring rises above the open interface */
.sk-spot.over { z-index: 1050; }
.sk-toast.guide { left: calc(24px + env(safe-area-inset-left, 0px)); right: auto; width: min(400px, calc(100vw - 48px)); align-items: flex-start; pointer-events: auto; }
.sk-toast.guide p { font-size: 12px; }
.sk-guide-nav { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sk-guide-nav[hidden] { display: none; }
.sk-guide-count { margin-right: auto; color: #7fa3b0; font: 10px var(--font); letter-spacing: var(--ls-caps); }
.sk-guide-nav button { min-height: 26px; padding: 3px 12px; border: 1px solid rgba(140, 225, 255, .45); border-radius: 4px; background: rgba(10, 40, 58, .7); color: #dff4fa; font: 10px var(--font); letter-spacing: var(--ls-caps); cursor: pointer; }
.sk-guide-nav button:hover, .sk-guide-nav button:focus-visible { border-color: #e9b45e; color: #ffe3b3; outline: none; }
.sk-guide-nav button:disabled { opacity: .35; cursor: default; }
.sk-guide-nav button[hidden] { display: none; }

/* ===== EXIT SHIP: the exterior view ===== */
.exit-ship { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border: 0; border-left: 1px solid rgba(173, 192, 200, .2); background: linear-gradient(90deg, transparent, rgba(30, 42, 47, .7)); color: #cfe0e4; font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); cursor: pointer; transition: color .18s, background .18s; }
.exit-ship svg { width: 16px; height: 16px; fill: none; stroke: #8fe6ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(110, 215, 255, .55)); }
.exit-ship:hover, .exit-ship:focus-visible { color: #fff3dc; background: linear-gradient(90deg, transparent, rgba(60, 46, 22, .7)); outline: none; }
.exit-ship:hover svg, .exit-ship:focus-visible svg { stroke: #ffcf80; }
.exit-ship[hidden] { display: none; }
.exit-ship:disabled { opacity: .55; cursor: default; }
.exit-ship.busy span { animation: st-blip 1.2s ease-in-out infinite; }
.xv-stage { position: fixed; z-index: 900; overflow: hidden; background: #000; touch-action: none; cursor: grab; }
.xv-stage.grab { cursor: grabbing; }
.xv-ui { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 950; display: grid; justify-items: center; gap: 12px; transform: translateX(-50%); pointer-events: none; animation: nb-fade .6s ease both; }
.xv-ui[hidden] { display: none; }
.xv-hint { display: flex; align-items: center; gap: 12px; margin: 0; color: rgba(190, 214, 224, .6); font: var(--fs-nano) var(--mono); letter-spacing: var(--ls-caps); white-space: nowrap; }
.xv-hint b { color: #e9b45e; font-weight: 400; }
.xv-enter { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border: 1px solid rgba(140, 225, 255, .45); background: rgba(4, 14, 22, .72); color: #dff4fa; font: var(--fs-micro) var(--mono); letter-spacing: var(--ls-wide); cursor: pointer; pointer-events: auto; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: border-color .18s, color .18s, box-shadow .18s; }
.xv-enter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.xv-enter:hover, .xv-enter:focus-visible { border-color: #e9b45e; color: #ffe3b3; box-shadow: 0 0 14px rgba(233, 180, 94, .3); outline: none; }
.flight-header .exit-ship { margin-left: auto; }

/* ===== The navigation reticle cursor (od-cursor.js) ===== */
html.od-cursor, html.od-cursor * { cursor: none !important; }
html.od-cursor :is(input:not([type=range]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=""], [contenteditable="true"]) { cursor: text !important; }
html.od-cursor select { cursor: default !important; }
html.od-cursor.od-selecting, html.od-cursor.od-selecting * { cursor: text !important; }
.od-reticle { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 0; height: 0; pointer-events: none; will-change: transform; }
.od-reticle[hidden] { display: none; }
.od-reticle svg { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; overflow: visible; fill: none; transition: opacity .15s, transform .18s cubic-bezier(.2, .7, .2, 1); }
.od-reticle .r-dot { fill: #bff1ff; filter: drop-shadow(0 0 2px rgba(120, 220, 255, .9)); transition: fill .15s; }
.od-reticle .r-ring { stroke: rgba(150, 228, 255, .7); stroke-width: 1; transform: scale(.78); transform-origin: center; transform-box: fill-box; transition: transform .18s cubic-bezier(.2, .7, .2, 1), stroke .15s, opacity .15s; filter: drop-shadow(0 0 2px rgba(110, 210, 245, .45)); }
.od-reticle .r-brk path { stroke: rgba(150, 228, 255, .5); stroke-width: 1; stroke-linecap: round; transition: stroke .15s, opacity .15s; }
.od-reticle .r-brk { transform: scale(.62); transform-origin: center; transform-box: fill-box; opacity: .55; transition: transform .18s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.od-reticle[data-state="text"] svg { opacity: .55; }
.od-reticle[data-state="text"] .r-ring { transform: scale(.55); }
.od-reticle[data-state="text"] .r-brk { opacity: 0; }
.od-reticle[data-state="link"] .r-ring { transform: scale(.95); stroke: rgba(190, 240, 255, .95); }
.od-reticle[data-state="link"] .r-brk { opacity: .8; }
.od-reticle[data-state="control"] .r-ring { transform: scale(1.08); stroke: rgba(240, 190, 105, .95); filter: drop-shadow(0 0 3px rgba(233, 180, 94, .55)); }
.od-reticle[data-state="control"] .r-dot { fill: #ffd696; }
.od-reticle[data-state="control"] .r-brk { transform: scale(.82); opacity: .9; }
.od-reticle[data-state="control"] .r-brk path { stroke: rgba(233, 180, 94, .85); }
.od-reticle[data-state="drag"] .r-ring { transform: scale(.7); }
.od-reticle[data-state="drag"] .r-brk { transform: scale(1.05); opacity: 1; }
.od-reticle[data-state="drag"] .r-brk path { stroke: rgba(190, 240, 255, .95); }
.od-reticle[data-state="field"] svg, .od-reticle.out svg { opacity: 0; }
.od-reticle .r-pulse { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1px solid rgba(160, 232, 255, .8); border-radius: 50%; opacity: 0; }
.od-reticle.pulse .r-pulse { animation: od-reticle-pulse .42s ease-out; }
.od-reticle[data-state="control"].pulse .r-pulse { border-color: rgba(240, 190, 105, .9); }
@keyframes od-reticle-pulse { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .od-reticle svg, .od-reticle .r-ring, .od-reticle .r-brk { transition: none; } .od-reticle .r-pulse { display: none; } }
html[data-reduce-motion] .od-reticle svg, html[data-reduce-motion] .od-reticle .r-ring, html[data-reduce-motion] .od-reticle .r-brk { transition: none; }

/* ===== Cockpit floor readouts: EXIT COCKPIT (bottom right) and ACTIVE PILOT (bottom left), placed on the artwork by app.js ===== */
.cockpit-floor-hud { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7em; box-sizing: border-box; height: var(--h, 30px); padding: 0 1em; border: 1px solid rgba(140, 225, 255, .38); background: linear-gradient(180deg, rgba(8, 22, 30, .82), rgba(3, 10, 16, .9)); color: #cfe0e4; font: var(--fs, 10px) var(--font); letter-spacing: .2em; white-space: nowrap; box-shadow: inset 0 0 10px rgba(80, 200, 255, .12), 0 0 8px rgba(60, 170, 220, .14); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: border-color .18s, color .18s, box-shadow .18s; }
.cockpit-floor-hud svg { flex: none; width: 1.5em; height: 1.5em; fill: none; stroke: #8fe6ff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(110, 215, 255, .6)); }
.cockpit-floor-hud:hover, .cockpit-floor-hud:focus-visible { border-color: rgba(233, 180, 94, .8); color: #fff3dc; box-shadow: inset 0 0 12px rgba(233, 180, 94, .16), 0 0 10px rgba(233, 180, 94, .25); outline: none; }
.cockpit-floor-hud:hover svg, .cockpit-floor-hud:focus-visible svg { stroke: #ffcf80; }
.cockpit-floor-hud[hidden] { display: none; }
.exit-ship.cockpit-floor-hud { margin: 0; border-left: 1px solid rgba(140, 225, 255, .38); }
.exit-ship.cockpit-floor-hud::after { content: ''; width: 5px; height: 5px; margin-left: .2em; border-radius: 50%; background: #e9b45e; box-shadow: 0 0 6px rgba(233, 180, 94, .9); }
.active-pilot { border-color: rgba(140, 225, 255, .24); background: linear-gradient(180deg, rgba(6, 18, 26, .66), rgba(3, 10, 16, .78)); color: rgba(190, 214, 224, .78); cursor: pointer; }
.active-pilot b { color: #ffd696; font-weight: 400; letter-spacing: .2em; }
.active-pilot .ap-sep { color: rgba(140, 225, 255, .55); }
.active-pilot i { width: 5px; height: 5px; border-radius: 50%; background: #5fe39a; box-shadow: 0 0 6px #5fe39a; }
.cockpit-floor-hud { pointer-events: auto; cursor: pointer; }
/* Cockpit floor readouts, refined: no box; text readouts that belong to the console, aligned with its outer screens */
.cockpit-floor-hud { gap: .75em; height: var(--h, 24px); padding: 0 .2em; border: 0; background: none; box-shadow: none; clip-path: none; color: rgba(190, 214, 224, .72); text-shadow: 0 0 6px rgba(80, 190, 240, .25); }
.cockpit-floor-hud:hover, .cockpit-floor-hud:focus-visible { border: 0; box-shadow: none; color: #fff3dc; text-shadow: 0 0 8px rgba(233, 180, 94, .45); }
.cockpit-floor-hud:focus-visible { outline: 1px solid rgba(233, 180, 94, .6); outline-offset: 4px; }
.exit-ship.cockpit-floor-hud { border-left: 0; color: #cfe6ec; }
.exit-ship.cockpit-floor-hud svg { width: 1.45em; height: 1.45em; }
.exit-ship.cockpit-floor-hud span { position: relative; padding-bottom: 2px; }
.exit-ship.cockpit-floor-hud span::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: linear-gradient(90deg, rgba(140, 225, 255, .55), rgba(140, 225, 255, 0)); }
.exit-ship.cockpit-floor-hud:hover span::after { background: linear-gradient(90deg, rgba(233, 180, 94, .8), rgba(233, 180, 94, 0)); }
.active-pilot.cockpit-floor-hud { background: none; color: rgba(160, 190, 200, .62); }
.active-pilot.cockpit-floor-hud b { color: #f0cf96; }
.active-pilot.cockpit-floor-hud i { width: 4px; height: 4px; }
.active-pilot.cockpit-floor-hud { color: rgba(176, 204, 214, .82); } .active-pilot.cockpit-floor-hud b { color: #ffd99c; }

/* ===== Circular cockpit HUD controls: CURRENT PILOT (left) and EXIT COCKPIT (right) ===== */
.cockpit-floor-hud.hud-orb { justify-content: center; width: var(--d, 36px); height: var(--d, 36px); padding: 0; gap: 0; border: 1px solid rgba(140, 225, 255, .5); border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(20, 60, 80, .55), rgba(3, 10, 16, .78) 70%); box-shadow: inset 0 0 8px rgba(80, 200, 255, .2), 0 0 8px rgba(80, 200, 255, .16); clip-path: none; color: transparent; text-shadow: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.cockpit-floor-hud.hud-orb::before { content: ''; position: absolute; inset: 3px; border: 1px dashed rgba(140, 225, 255, .18); border-radius: 50%; pointer-events: none; }
.cockpit-floor-hud.hud-orb svg { width: 52%; height: 52%; stroke: #9fe8ff; stroke-width: 1.4; filter: drop-shadow(0 0 3px rgba(110, 215, 255, .6)); transition: stroke .2s, filter .2s; }
.cockpit-floor-hud.hud-orb:hover, .cockpit-floor-hud.hud-orb:focus-visible { border-color: rgba(233, 180, 94, .85); background: radial-gradient(circle at 50% 40%, rgba(70, 52, 24, .55), rgba(3, 10, 16, .8) 70%); box-shadow: inset 0 0 10px rgba(233, 180, 94, .22), 0 0 12px rgba(233, 180, 94, .3); outline: none; }
.cockpit-floor-hud.hud-orb:hover svg, .cockpit-floor-hud.hud-orb:focus-visible svg { stroke: #ffd696; filter: drop-shadow(0 0 4px rgba(233, 180, 94, .7)); }
.cockpit-floor-hud.hud-orb::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); padding: 6px 10px; border: 1px solid rgba(140, 225, 255, .35); background: rgba(3, 12, 18, .92); color: #dff4fa; font: var(--fs-nano) var(--font); letter-spacing: .2em; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.active-pilot.hud-orb::after { left: 0; }
.exit-ship.hud-orb::after { right: 0; }
.cockpit-floor-hud.hud-orb:hover::after, .cockpit-floor-hud.hud-orb:focus-visible::after { opacity: 1; transform: none; }
.active-pilot.hud-orb::after { color: #f0d6a6; }
.exit-ship.hud-orb.busy svg { animation: st-blip 1.2s ease-in-out infinite; }
.exit-ship.cockpit-floor-hud.hud-orb span::after, .exit-ship.cockpit-floor-hud.hud-orb::before { }
.exit-ship.hud-orb > span.sr-only::after { display: none; }
html[data-reduce-motion] .cockpit-floor-hud.hud-orb::after { transition: none; }

/* ===== ENTER COCKPIT: the opening's boarding light and the console coming back online ===== */
.xv-flash { position: fixed; inset: 0; z-index: 960; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 236, 214, .95), rgba(255, 196, 132, .5) 25%, rgba(10, 16, 24, 0) 70%); animation: odi-board 1s ease-in-out both; }
@keyframes od-boot-on { 0% { opacity: 0; } 20% { opacity: .9; } 32% { opacity: .15; } 46% { opacity: 1; } 58% { opacity: .55; } 66% { opacity: 1; } 100% { opacity: 1; } }
html.od-boot #signal-analysis-waveform { animation: od-boot-on .9s steps(1) .5s both; }
html.od-boot .console-keys-art { animation: od-boot-on 1s steps(1) .8s both; }
html.od-boot .ck-label { animation: od-boot-on .8s steps(1) 1.1s both; }
html.od-boot #search-form { animation: od-boot-on .8s steps(1) .65s both; }
html.od-boot .cockpit-floor-hud { animation: od-boot-on .8s steps(1) 1.6s both; }
html.od-boot .home { animation: od-boot-on 1.1s steps(1) 1.3s both; }
html[data-reduce-motion].od-boot *, html.od-boot.reduce-boot * { animation-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { .xv-flash { display: none; } html.od-boot * { animation-duration: .01ms !important; animation-delay: 0s !important; } }
.cockpit-floor-hud.hud-orb::after { width: auto; height: auto; margin: 0; border-radius: 0; box-shadow: none; }
.xv-stage { background: transparent; }   /* the canvas itself is opaque; around the windows the cockpit shows through as it forms or fades */