/* ═════════════════════════════════════════════════════════
   BASTION 048 — 星寒的超级太空堡垒
   Hard sci-fi · 流浪地球 2 / 2001 / Foundation 致敬
   ═════════════════════════════════════════════════════════ */

:root {
  /* ─── deep space palette ─── */
  --void:        #03060d;
  --abyss:       #07101e;
  --steel:       #121c2e;
  --steel-2:     #1a2740;
  --frame:       #2c3d56;
  --line:        #1f2c42;

  /* ─── HUD luminance ─── */
  --text:        #d6dee8;
  --text-dim:    #7a8aa0;
  --text-mute:   #46556a;

  /* ─── signal colors ─── */
  --amber:       #ffb500;          /* 流浪地球 2 黄 — primary */
  --amber-soft:  #ffce4d;
  --amber-deep:  #c98800;
  --cyan:        #4fd6ff;          /* Foundation 数据 */
  --cyan-soft:   #8ce5ff;
  --red:         #ff2c4a;          /* HAL 9000 警报 */
  --red-soft:    #ff647e;
  --green:       #00ff88;          /* online */
  --magenta:     #ff5be0;          /* signal */

  /* ─── typography ─── */
  --display:     "Big Shoulders Stencil Display", "Saira Stencil One", "Eurostile", sans-serif;
  --mono:        "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", monospace;
  --sans:        "Geist", "Inter", system-ui, sans-serif;
  --cn:          "Noto Sans SC", "PingFang SC", "Source Han Sans", system-ui, sans-serif;

  --pad-x:       clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--amber); color: var(--void); }

html { scroll-behavior: smooth; background: var(--void); }

body {
  background: var(--void);
  color: var(--text);
  font-family: var(--cn);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ─── scanline overlay ─── */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 95;
  opacity: .55;
}

/* ─── starfield + grid floor ─── */
body::after {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, var(--text-dim), transparent),
    radial-gradient(1px 1px at 80% 20%, var(--cyan), transparent),
    radial-gradient(1.5px 1.5px at 60% 75%, var(--text), transparent),
    radial-gradient(1px 1px at 35% 85%, var(--amber), transparent),
    radial-gradient(2px 2px at 90% 60%, var(--text-dim), transparent),
    radial-gradient(1px 1px at 12% 60%, var(--text), transparent),
    radial-gradient(1px 1px at 50% 10%, var(--cyan-soft), transparent),
    radial-gradient(ellipse at 50% 100%, rgba(255, 181, 0, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%,   rgba(79, 214, 255, 0.03) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
  animation: stars-drift 240s linear infinite;
}
@keyframes stars-drift {
  to { background-position: -200px 0, 200px 0, 0 -100px, 100px 50px, -50px 100px, 30px -30px, 0 80px, 0 0, 0 0; }
}

/* ═════════ BOOT SEQUENCE ═════════ */
.boot {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.86), transparent 42%),
    radial-gradient(ellipse at 82% 88%, rgba(27,189,231,.16), transparent 52%),
    linear-gradient(180deg, #eef6fb 0%, #dceaf2 100%);
  z-index: 1000;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: #25536a;
  padding: 32px;
  overflow: hidden;
  pointer-events: none;
}
.boot::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(27,189,231,.38);
  background:
    linear-gradient(90deg, rgba(27,189,231,.32) 0 36px, transparent 36px calc(100% - 36px), rgba(27,189,231,.32) calc(100% - 36px)),
    linear-gradient(0deg, rgba(27,189,231,.32) 0 36px, transparent 36px calc(100% - 36px), rgba(27,189,231,.32) calc(100% - 36px));
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}
.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(19,32,44,.05) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.46) 52%, transparent 100%);
  opacity: .72;
  pointer-events: none;
}
.boot.done {
  animation: boot-fade .8s cubic-bezier(.7,0,.3,1) .2s forwards;
}
@keyframes boot-fade {
  to { opacity: 0; transform: scale(1.02); visibility: hidden; }
}
.boot-line {
  position: relative;
  z-index: 1;
  opacity: 0;
  white-space: pre;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}
.boot-line.in { opacity: 1; }
.boot-line .ok    { color: #0784aa; font-weight: 800; }
.boot-line .warn  { color: #c0761f; font-weight: 800; }
.boot-line .err   { color: var(--red); }
.boot-line .dim   { color: #7b91a3; }
.boot-line .bright { color: #4d7cff; font-weight: 800; }

/* ═════════ CONSOLE BAR (top sticky) ═════════ */
.console-bar {
  position: sticky; top: 0;
  z-index: 60;
  background: rgba(8, 16, 30, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--frame);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 22px;
  padding: 10px var(--pad-x);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cb-mark {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.cb-mark .glyph {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--amber);
  background: var(--abyss);
  color: var(--amber);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  position: relative;
}
.cb-mark .glyph::before,
.cb-mark .glyph::after {
  content: ""; position: absolute;
  width: 4px; height: 4px;
  border: 1px solid var(--amber);
}
.cb-mark .glyph::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.cb-mark .glyph::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.cb-mark b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text);
}
.cb-mark .cn { color: var(--text-dim); margin-left: 6px; font-family: var(--cn); }
.cb-stream {
  display: flex; gap: 18px;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cb-stream span { display: inline-flex; align-items: center; gap: 6px; }
.cb-stream b { color: var(--text); font-weight: 600; }
.cb-stream .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--green);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.cb-stream .dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.cb-stream .dot.cyan  { background: var(--cyan);  box-shadow: 0 0 6px var(--cyan); }
@keyframes pulse-dot {
  50% { opacity: .35; transform: scale(.7); }
}
.cb-meta b { color: var(--amber); font-family: var(--display); font-weight: 700; }
.cb-clock { color: var(--cyan); font-variant-numeric: tabular-nums; }

/* ═════════ MODE SWITCH (top center segmented) ═════════ */
/* hide the decorative top stream so the toggle sits cleanly in the bar center */
.console-bar .cb-stream { display: none; }

.mode-switch {
  position: fixed;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: inline-flex;
  background: rgba(8, 16, 30, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--amber);
  padding: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 0 32px -6px var(--amber), 0 0 0 1px rgba(255, 181, 0, .15);
}
.mode-switch::before, .mode-switch::after {
  content: ""; position: absolute;
  width: 7px; height: 7px;
  border-color: var(--amber);
  border-style: solid;
  border-width: 0;
}
.mode-switch::before { top: -4px; left: -4px;     border-top-width: 1.5px; border-left-width: 1.5px; }
.mode-switch::after  { bottom: -4px; right: -4px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.ms-chip {
  padding: 7px 18px;
  text-decoration: none;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s, background .25s, letter-spacing .25s;
}
.ms-chip:hover {
  color: var(--amber);
  letter-spacing: .26em;
}
.ms-chip.ms-active {
  background: var(--amber);
  color: var(--void);
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, .25);
}
.ms-chip.ms-active::before {
  content: "●";
  color: var(--red);
  font-size: 7px;
  letter-spacing: 0;
  animation: ms-pulse 1.5s ease-in-out infinite;
}
@keyframes ms-pulse { 50% { opacity: .35; transform: scale(.85); } }

@media (max-width: 700px) {
  .mode-switch { top: 8px; font-size: 9px; padding: 2px; }
  .ms-chip { padding: 6px 12px; }
}

/* ═════════ HERO / BASTION CORE ═════════ */
.bastion-hero {
  position: relative;
  min-height: calc(100vh - 44px);
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: stretch;
  padding: 32px var(--pad-x);
  gap: 24px;
  overflow: hidden;
}

/* corner brackets — full viewport HUD frame */
.hud-corner {
  position: absolute;
  width: 36px; height: 36px;
  border-color: var(--amber);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 5;
}
.hud-corner.tl { top: 14px; left: 14px;     border-top-width: 1.5px; border-left-width: 1.5px; }
.hud-corner.tr { top: 14px; right: 14px;    border-top-width: 1.5px; border-right-width: 1.5px; }
.hud-corner.bl { bottom: 14px; left: 14px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud-corner.br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* ─── grid floor ─── */
.grid-floor {
  position: absolute;
  bottom: 0; left: 50%;
  width: 200%;
  height: 50vh;
  transform: translateX(-50%) perspective(600px) rotateX(60deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(transparent 96%, var(--cyan) 100%),
    linear-gradient(90deg, transparent 96%, var(--cyan) 100%);
  background-size: 60px 60px;
  opacity: .15;
  pointer-events: none;
  mask-image: linear-gradient(transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, black 30%, black 70%, transparent 100%);
}

/* ─── LEFT: identity card ─── */
.id-card {
  position: relative;
  z-index: 3;
  align-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 16px;
  background: linear-gradient(180deg, rgba(20, 35, 60, .6), rgba(8, 16, 30, .4));
  border: 1px solid var(--frame);
  border-left: 2px solid var(--amber);
  max-width: 320px;
}
.id-card h3 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--amber);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.id-card h3 small { color: var(--text-mute); font-weight: 400; font-size: 10px; }
.id-card dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
}
.id-card dt { color: var(--text-mute); }
.id-card dd { color: var(--text); font-family: var(--cn); text-transform: none; letter-spacing: 0; font-size: 12px; }
.id-card .cn-name {
  font-family: var(--cn);
  font-weight: 500;
  color: var(--amber-soft);
  font-size: 14px;
}

/* ─── CENTER: the BASTION 048 HUD ─── */
.hud-core {
  position: relative;
  z-index: 3;
  align-self: stretch;
  display: grid;
  place-items: center;
}
.hud-stack {
  position: relative;
  width: clamp(380px, 38vw, 600px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.hud-ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--frame);
  border-radius: 50%;
}
.hud-ring.r2 { inset: 7%;  border-style: dashed; opacity: .6; }
.hud-ring.r3 { inset: 18%; border: 1px solid var(--amber); opacity: .35; }
.hud-ring.r4 { inset: 32%; border: none; }

/* rotating tick ring */
.hud-ticks {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  animation: hud-rotate 80s linear infinite;
}
.hud-ticks svg { width: 100%; height: 100%; display: block; }
@keyframes hud-rotate { to { transform: rotate(360deg); } }

/* radar sweep */
.hud-radar {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 181, 0, 0) 270deg,
    rgba(255, 181, 0, 0.45) 358deg,
    rgba(255, 181, 0, 0) 360deg
  );
  animation: hud-rotate 6s linear infinite;
  mix-blend-mode: screen;
}

/* the central number */
.bastion-num {
  position: relative;
  z-index: 4;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 8vw, 120px);
  letter-spacing: .04em;
  color: var(--text);
  text-align: center;
  line-height: 1;
  text-shadow:
    0 0 18px rgba(255, 181, 0, .35),
    1px 0 0 var(--cyan),
    -1px 0 0 var(--red);
  animation: chroma-flicker 5s ease-in-out infinite;
}
@keyframes chroma-flicker {
  0%, 100% { text-shadow: 0 0 18px rgba(255,181,0,.35), 1px 0 0 var(--cyan), -1px 0 0 var(--red); }
  50%      { text-shadow: 0 0 24px rgba(255,181,0,.5),  1.5px 0 0 var(--cyan), -1.5px 0 0 var(--red); }
}

.bastion-num .lg {
  display: block;
  font-size: clamp(120px, 18vw, 280px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .85;
  color: var(--amber);
  text-shadow:
    0 0 30px rgba(255, 181, 0, .6),
    2px 0 0 rgba(255, 44, 74, .6),
    -2px 0 0 rgba(79, 214, 255, .6);
}
.bastion-num .label {
  display: block;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 400;
  letter-spacing: .42em;
  color: var(--text-dim);
  margin-top: 14px;
  text-transform: uppercase;
  font-family: var(--mono);
}
.bastion-num .cn-name {
  display: block;
  font-family: var(--cn);
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: .8em;
  color: var(--amber-soft);
  margin-top: 12px;
  text-shadow: 0 0 12px rgba(255, 181, 0, .4);
  font-weight: 300;
}

/* status bar under hero number */
.bastion-status {
  position: relative;
  z-index: 4;
  margin-top: clamp(16px, 2vw, 24px);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.bastion-status .pill {
  padding: 4px 10px;
  border: 1px solid var(--frame);
  background: rgba(20, 35, 60, .6);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim);
}
.bastion-status .pill b { color: var(--text); }
.bastion-status .pill.live  b { color: var(--green); }
.bastion-status .pill.alert b { color: var(--red); }
.bastion-status .pill.beam  b { color: var(--amber); }
.bastion-status .pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* ─── RIGHT: telemetry stack ─── */
.telemetry-side {
  position: relative;
  z-index: 3;
  align-self: start;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 16px;
  background: linear-gradient(180deg, rgba(20, 35, 60, .6), rgba(8, 16, 30, .4));
  border: 1px solid var(--frame);
  border-right: 2px solid var(--cyan);
  max-width: 320px;
  margin-left: auto;
}
.telemetry-side h3 {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--cyan);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.telemetry-side h3 small { color: var(--text-mute); font-weight: 400; font-size: 10px; }
.tel-row {
  display: grid;
  grid-template-columns: 70px 1fr 60px;
  gap: 8px;
  padding: 5px 0;
  align-items: center;
  border-bottom: 1px dashed var(--line);
}
.tel-row:last-child { border-bottom: none; }
.tel-bar {
  position: relative;
  height: 4px;
  background: var(--steel);
}
.tel-bar > i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: var(--cyan);
  transition: width 1s ease;
}
.tel-row.amber .tel-bar > i { background: var(--amber); }
.tel-row.red .tel-bar > i   { background: var(--red); }
.tel-row.green .tel-bar > i { background: var(--green); }
.tel-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ═════════ TICKER (between hero and content) ═════════ */
.console-ticker {
  border-top: 1px solid var(--frame);
  border-bottom: 1px solid var(--frame);
  background: var(--abyss);
  padding: 10px 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}
.console-ticker-track {
  display: flex; width: max-content;
  animation: bastion-ticker 90s linear infinite;
  white-space: nowrap;
}
.console-ticker-track > span { padding-right: 56px; }
.console-ticker-track > span b { color: var(--cyan); }
.console-ticker-track > span em { color: var(--red); font-style: normal; }
@keyframes bastion-ticker { to { transform: translateX(-50%); } }

/* ═════════ SECTION HEAD (sci-fi) ═════════ */
.section-head-sci {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: end;
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--frame);
  position: relative;
}
.section-head-sci::before {
  content: ""; position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--amber) 0%, transparent 30%);
}
.sect-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--amber);
  font-weight: 600;
}
.section-head-sci h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: .04em;
  color: var(--text);
  text-transform: uppercase;
  display: flex; align-items: baseline; gap: 18px;
}
.section-head-sci h2 .cn {
  font-family: var(--cn);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--amber-soft);
  font-size: .58em;
}
.section-head-sci .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  text-align: right;
}

/* ═════════ BRIEFING (manifest 替代) ═════════ */
.briefing {
  padding: clamp(48px, 5vw, 64px) var(--pad-x) clamp(64px, 7vw, 88px);
  background:
    linear-gradient(180deg, transparent, rgba(255,181,0,.02) 50%, transparent),
    radial-gradient(ellipse at center, rgba(79,214,255,.04) 0%, transparent 70%);
}
.briefing-inner {
  max-width: 720px;
  margin: clamp(40px, 5vw, 56px) auto 0;
  font-family: var(--cn);
  font-size: 16px;
  line-height: 1.85;
  position: relative;
}
.briefing-inner::before {
  content: ">_";
  position: absolute;
  left: -36px; top: 0;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--amber);
  animation: caret-blink 1.2s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.briefing-inner p { margin-bottom: 22px; color: var(--text); }
.briefing-inner p + p::before {
  content: "│ ";
  color: var(--frame);
  margin-right: 4px;
}
.briefing-inner em {
  font-style: italic;
  color: var(--cyan-soft);
}
.briefing-inner strong {
  color: var(--amber);
  font-weight: 600;
}
.briefing-stamp {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  text-align: right;
  border-top: 1px dashed var(--frame);
  padding-top: 16px;
}

/* ═════════ SERVER MATRIX / OBJECT BAY ═════════ */
.matrix {
  padding-bottom: clamp(56px, 6vw, 84px);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(79,214,255,.055), transparent 52%),
    linear-gradient(180deg, rgba(8,16,30,.16), rgba(3,6,13,.88));
  border-top: 1px solid rgba(44,61,86,.45);
  position: relative;
}
.matrix::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(79,214,255,.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,181,0,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  pointer-events: none;
  opacity: .65;
}
.matrix-console {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(320px, .92fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  margin: clamp(40px, 5vw, 56px) var(--pad-x) 0;
}
.matrix-visual {
  position: relative;
  min-height: clamp(420px, 50vw, 620px);
  border: 1px solid var(--frame);
  border-left: 2px solid var(--amber);
  background:
    linear-gradient(135deg, rgba(18,28,46,.94), rgba(4,10,20,.98)),
    radial-gradient(ellipse at 50% 50%, rgba(255,181,0,.06), transparent 58%);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 1px rgba(255,181,0,.08),
    0 30px 80px rgba(0,0,0,.34);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  font: inherit;
  text-align: left;
}
.matrix-visual:hover,
.matrix-visual:focus-visible {
  border-color: rgba(255,181,0,.85);
  box-shadow:
    inset 0 0 0 1px rgba(255,181,0,.14),
    0 0 44px rgba(255,181,0,.14),
    0 34px 86px rgba(0,0,0,.42);
  outline: none;
}
.matrix-visual:active { transform: scale(.995); }
.matrix-visual::before,
.matrix-visual::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: var(--amber);
  border-style: solid;
  pointer-events: none;
  opacity: .9;
}
.matrix-visual::before {
  left: 14px;
  top: 14px;
  border-width: 1px 0 0 1px;
}
.matrix-visual::after {
  right: 14px;
  bottom: 14px;
  border-width: 0 1px 1px 0;
}
.matrix-scope {
  position: relative;
  width: min(92%, 680px);
  aspect-ratio: 1.12;
  display: block;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.matrix-grid {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(79,214,255,.28);
  background:
    linear-gradient(90deg, rgba(79,214,255,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(79,214,255,.12) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(79,214,255,.16), transparent 58%);
  background-size: 36px 36px, 36px 36px, 100% 100%;
  transform: rotateX(58deg) rotateZ(-2deg);
  box-shadow:
    0 0 34px rgba(79,214,255,.1),
    inset 0 0 50px rgba(79,214,255,.06);
  animation: matrix-grid-drift 10s linear infinite;
}
@keyframes matrix-grid-drift {
  to { background-position: 36px 36px, -36px 36px, 0 0; }
}
.matrix-axis {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,181,0,.8), transparent);
  transform-origin: center;
  opacity: .48;
  filter: drop-shadow(0 0 8px rgba(255,181,0,.5));
}
.matrix-axis.y { transform: translate(-50%, -50%) rotate(90deg); }
.matrix-axis.x { transform: translate(-50%, -50%); }
.matrix-beam {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,.78) 0 2px, rgba(255,181,0,.6) 3px 5px, transparent 6px),
    radial-gradient(circle, rgba(255,181,0,.16), transparent 64%);
  box-shadow: 0 0 60px rgba(255,181,0,.14);
  opacity: .9;
  animation: matrix-core-pulse 2.6s ease-in-out infinite;
}
@keyframes matrix-core-pulse {
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .58; }
}
.server-rack {
  position: absolute;
  width: 20%;
  height: 32%;
  border: 1px solid rgba(122,138,160,.65);
  background:
    linear-gradient(180deg, rgba(18,28,46,.86), rgba(3,6,13,.96)),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(79,214,255,.12) 14px 15px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 20px 42px rgba(0,0,0,.36),
    0 0 28px rgba(79,214,255,.07);
  transform: translateZ(0);
  transition: transform .65s cubic-bezier(.18,.84,.2,1), filter .45s ease, opacity .45s ease;
}
.server-rack::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 10%;
  height: 5px;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--amber));
  box-shadow: 0 0 10px rgba(79,214,255,.45);
}
.server-rack i {
  position: absolute;
  right: 10%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px currentColor;
  color: var(--green);
  animation: matrix-led 1.8s ease-in-out infinite;
}
.server-rack i:nth-child(1) { top: 28%; animation-delay: 0s; }
.server-rack i:nth-child(2) { top: 43%; color: var(--cyan); background: var(--cyan); animation-delay: -.3s; }
.server-rack i:nth-child(3) { top: 58%; color: var(--amber); background: var(--amber); animation-delay: -.7s; }
.server-rack i:nth-child(4) { top: 73%; color: var(--green); background: var(--green); animation-delay: -1.1s; }
@keyframes matrix-led {
  50% { opacity: .35; transform: scale(.72); }
}
.rack-a { left: 15%; top: 18%; transform: rotateY(18deg) rotateZ(-5deg); }
.rack-b { left: 40%; top: 10%; transform: translateY(-6px) rotateY(6deg) rotateZ(2deg); }
.rack-c { right: 15%; top: 20%; transform: rotateY(-18deg) rotateZ(5deg); }
.rack-d { left: 18%; bottom: 12%; transform: rotateY(20deg) rotateZ(4deg); }
.rack-e { left: 41%; bottom: 6%; transform: translateY(8px) rotateY(4deg) rotateZ(-2deg); }
.rack-f { right: 18%; bottom: 12%; transform: rotateY(-20deg) rotateZ(-4deg); }
.matrix-door {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 44%;
  border: 1px solid rgba(255,181,0,.35);
  background:
    linear-gradient(90deg, rgba(255,181,0,.12), rgba(8,16,30,.9)),
    repeating-linear-gradient(0deg, rgba(255,181,0,.05) 0 1px, transparent 1px 18px);
  z-index: 4;
  box-shadow: inset 0 0 40px rgba(255,181,0,.08);
  transition: transform .78s cubic-bezier(.16,.9,.2,1), opacity .5s ease;
}
.door-left {
  left: 5%;
  transform-origin: left center;
}
.door-right {
  right: 5%;
  transform-origin: right center;
}
.matrix-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 128px;
  height: 128px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: rgba(3,6,13,.76);
  box-shadow:
    0 0 0 12px rgba(255,181,0,.035),
    0 0 42px rgba(255,181,0,.24);
  font-family: var(--display);
  color: var(--amber);
}
.matrix-core b {
  font-size: 46px;
  line-height: .8;
  letter-spacing: .04em;
}
.matrix-core small {
  margin-top: -30px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--text-dim);
}
.matrix-callout {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  pointer-events: none;
}
.matrix-callout b {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 42px);
  letter-spacing: .08em;
  color: var(--text);
}
.matrix-callout small {
  color: var(--amber);
  font-size: 10px;
  text-align: right;
}
.matrix.is-open .door-left {
  transform: translateX(-78%) rotateY(-62deg);
  opacity: .35;
}
.matrix.is-open .door-right {
  transform: translateX(78%) rotateY(62deg);
  opacity: .35;
}
.matrix.is-open .server-rack {
  filter: saturate(1.24) brightness(1.08);
}
.matrix.is-open .rack-a { transform: translate(-20px, -10px) rotateY(18deg) rotateZ(-5deg); }
.matrix.is-open .rack-b { transform: translateY(-24px) rotateY(6deg) rotateZ(2deg); }
.matrix.is-open .rack-c { transform: translate(20px, -10px) rotateY(-18deg) rotateZ(5deg); }
.matrix.is-open .rack-d { transform: translate(-18px, 14px) rotateY(20deg) rotateZ(4deg); }
.matrix.is-open .rack-e { transform: translateY(30px) rotateY(4deg) rotateZ(-2deg); }
.matrix.is-open .rack-f { transform: translate(18px, 14px) rotateY(-20deg) rotateZ(-4deg); }
.matrix-items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(300px, .85fr);
  gap: 16px;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    max-height .78s cubic-bezier(.2,.82,.2,1),
    opacity .42s ease,
    transform .58s ease,
    visibility .1s linear .68s;
}
.matrix.is-open .matrix-items {
  max-height: 760px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    max-height .88s cubic-bezier(.2,.82,.2,1),
    opacity .42s ease .14s,
    transform .58s ease .1s,
    visibility 0s;
}
.matrix-item-rail,
.matrix-readout {
  border: 1px solid var(--frame);
  background: rgba(8,16,30,.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.matrix-item-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  padding: 1px;
}
.item-node {
  min-height: 116px;
  padding: 16px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(18,28,46,.6), rgba(3,6,13,.8));
  color: var(--text-dim);
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.item-node::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255,181,0,.12), transparent);
  transform: translateX(-120%);
  transition: transform .45s ease;
}
.item-node:hover,
.item-node:focus-visible {
  background: linear-gradient(180deg, rgba(255,181,0,.08), rgba(8,16,30,.92));
  color: var(--text);
  outline: none;
}
.item-node:hover::after,
.item-node:focus-visible::after,
.item-node.is-active::after { transform: translateX(120%); }
.item-node.is-active {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,181,0,.16), rgba(8,16,30,.9));
  box-shadow: inset 2px 0 0 var(--amber);
}
.item-node b {
  display: block;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--text);
  line-height: 1;
}
.item-node small {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--text-mute);
}
.item-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--amber);
  display: grid;
  place-items: center;
  position: relative;
  background: rgba(255,181,0,.08);
  box-shadow: 0 0 18px rgba(255,181,0,.12);
}
.item-icon i,
.item-icon::before,
.item-icon::after {
  content: "";
  position: absolute;
  display: block;
}
.item-icon.tower i {
  width: 16px;
  height: 28px;
  border: 1px solid currentColor;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(255,181,0,.2), transparent);
}
.item-icon.tower::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  right: 10px;
  bottom: 10px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.item-icon.nas { border-color: var(--cyan); color: var(--cyan); background: rgba(79,214,255,.08); }
.item-icon.nas i {
  width: 28px;
  height: 20px;
  border: 1px solid currentColor;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(79,214,255,.25) 6px 7px);
}
.item-icon.rack { border-color: var(--green); color: var(--green); background: rgba(0,255,136,.08); }
.item-icon.rack i {
  width: 28px;
  height: 26px;
  border: 1px solid currentColor;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,255,136,.24) 6px 7px);
}
.item-icon.gpu { border-color: var(--amber); color: var(--amber); }
.item-icon.gpu i {
  width: 30px;
  height: 16px;
  border: 1px solid currentColor;
}
.item-icon.gpu::after {
  right: 6px;
  width: 8px;
  height: 20px;
  border: 1px solid currentColor;
}
.item-icon.router { border-color: var(--red); color: var(--red); background: rgba(255,44,74,.08); }
.item-icon.router i {
  width: 30px;
  height: 12px;
  border: 1px solid currentColor;
}
.item-icon.router::before,
.item-icon.router::after {
  width: 1px;
  height: 16px;
  background: currentColor;
  top: 8px;
}
.item-icon.router::before { left: 12px; transform: rotate(-22deg); }
.item-icon.router::after { right: 12px; transform: rotate(22deg); }
.item-icon.model { border-color: var(--magenta); color: var(--magenta); background: rgba(255,91,224,.08); }
.item-icon.model i {
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.item-icon.model::before {
  width: 34px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.item-node.cyan.is-active { box-shadow: inset 2px 0 0 var(--cyan); }
.item-node.green.is-active { box-shadow: inset 2px 0 0 var(--green); }
.item-node.amber.is-active { box-shadow: inset 2px 0 0 var(--amber); }
.item-node.red.is-active { box-shadow: inset 2px 0 0 var(--red); }
.item-node.magenta.is-active { box-shadow: inset 2px 0 0 var(--magenta); }
.matrix-readout {
  padding: 22px;
  font-family: var(--mono);
  min-height: 260px;
  position: relative;
  overflow: hidden;
}
.matrix-readout::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(79,214,255,.12), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
  pointer-events: none;
}
.readout-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.readout-kicker {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--amber);
}
.readout-status {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--green);
  border: 1px solid currentColor;
  padding: 3px 8px;
}
.matrix-readout h3 {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 48px);
  line-height: .95;
  letter-spacing: .06em;
  color: var(--text);
  margin-bottom: 20px;
}
.matrix-readout dl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 10px 14px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.matrix-readout dt { color: var(--text-mute); }
.matrix-readout dd { color: var(--text); }
.matrix-readout p {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--frame);
  font-family: var(--cn);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}
.matrix-load {
  display: inline-block;
  width: min(180px, 58%);
  height: 5px;
  background: var(--steel);
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
}
.matrix-readout.is-switching {
  animation: readout-switch .38s ease;
}
@keyframes readout-switch {
  0%   { box-shadow: inset 0 0 0 1px rgba(255,181,0,.42), 0 0 0 rgba(255,181,0,0); }
  50%  { box-shadow: inset 0 0 0 1px rgba(79,214,255,.62), 0 0 34px rgba(79,214,255,.16); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,181,0,0), 0 0 0 rgba(79,214,255,0); }
}
.matrix-load i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  box-shadow: 0 0 10px rgba(255,181,0,.28);
  transition: width .45s ease;
}

/* ═════════ ARCHIVE (terminal records) ═════════ */
.archive {
  padding-bottom: clamp(56px, 6vw, 80px);
}
.archive-table {
  list-style: none;
  font-family: var(--mono);
  border-top: 1px solid var(--frame);
  border-bottom: 1px solid var(--frame);
  margin: 0 var(--pad-x);
  background: rgba(8, 16, 30, .4);
}
.archive-row {
  display: grid;
  grid-template-columns: 60px 80px 90px 1fr auto auto;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--text-dim);
  text-decoration: none;
  transition: background .25s, color .25s;
}
.archive-row:last-child { border-bottom: none; }
.archive-row:hover {
  background: rgba(255, 181, 0, .06);
  color: var(--text);
}
.archive-row .ar-id     { color: var(--amber); font-weight: 700; letter-spacing: .12em; }
.archive-row .ar-cls    { color: var(--cyan); letter-spacing: .12em; }
.archive-row .ar-date   { color: var(--text-mute); }
.archive-row .ar-title  { font-family: var(--cn); font-size: 15px; color: var(--text); letter-spacing: 0; }
.archive-row .ar-title b { color: var(--text); font-weight: 500; display: block; }
.archive-row .ar-title small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.archive-row .ar-size   { font-variant-numeric: tabular-nums; }
.archive-row .ar-status {
  font-size: 10px;
  letter-spacing: .14em;
  padding: 2px 8px;
  border: 1px solid var(--green);
  color: var(--green);
}
.archive-row.draft { color: var(--text-mute); cursor: not-allowed; }
.archive-row.draft .ar-id    { color: var(--text-mute); }
.archive-row.draft .ar-title b { color: var(--text-dim); }
.archive-row.draft .ar-status {
  color: var(--text-mute); border-color: var(--text-mute);
}
.archive-row:hover .ar-arrow { transform: translateX(4px); color: var(--amber); }
.ar-arrow {
  color: var(--text-mute);
  transition: transform .3s, color .3s;
}

/* ═════════ TELEMETRY DECK (desk 替代) ═════════ */
.deck {
  padding-bottom: clamp(56px, 6vw, 80px);
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: clamp(40px, 5vw, 56px) var(--pad-x) 0;
}
.deck-panel {
  position: relative;
  border: 1px solid var(--frame);
  background:
    linear-gradient(180deg, rgba(20, 35, 60, .6), rgba(8, 16, 30, .8));
  padding: 22px;
  font-family: var(--cn);
}
.deck-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--amber);
}
.deck-panel.cyan::before  { background: var(--cyan); }
.deck-panel.green::before { background: var(--green); }
.deck-panel.red::before   { background: var(--red); }
.deck-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.deck-head .tag    { color: var(--amber); font-weight: 700; }
.deck-panel.cyan .deck-head .tag  { color: var(--cyan); }
.deck-panel.green .deck-head .tag { color: var(--green); }
.deck-panel.red .deck-head .tag   { color: var(--red); }
.deck-head .stat {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-mute);
}
.deck-head .stat .dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.deck-panel.red .deck-head .dot   { background: var(--red); }
.deck-panel.amber .deck-head .dot { background: var(--amber); }
.deck-panel h4 {
  font-family: var(--cn);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -.005em;
}
.deck-panel p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ═════════ SPECS (colophon 替代) ═════════ */
.specs {
  border-top: 1px solid var(--frame);
  background: var(--abyss);
  padding-bottom: 28px;
}
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: clamp(40px, 5vw, 56px) var(--pad-x);
}
.specs-grid h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
  font-weight: 700;
  border-left: 2px solid var(--amber);
  padding-left: 8px;
}
.specs-grid p {
  font-family: var(--cn);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}
.specs-grid a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.specs-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px var(--pad-x) 0;
  border-top: 1px solid var(--frame);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.specs-bottom b { color: var(--amber); }

/* ═════════ ARTICLE PAGE ═════════ */
.article-sci {
  padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 96px);
  position: relative;
}
.article-head-sci {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--frame);
  position: relative;
}
.article-head-sci::before {
  content: "";
  position: absolute;
  left: var(--pad-x); right: var(--pad-x);
  top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--amber) 0%, transparent 30%);
}
.article-meta-sci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 28px;
  padding: 14px 0;
  border-top: 1px dashed var(--frame);
  border-bottom: 1px dashed var(--frame);
}
.article-meta-sci dt {
  color: var(--text-mute);
  font-size: 9px;
  margin-bottom: 2px;
}
.article-meta-sci dd { color: var(--text); font-weight: 500; }
.article-meta-sci dd b { color: var(--amber); }
.article-title-sci {
  font-family: var(--cn);
  font-weight: 500;
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 20px;
}
.article-title-sci .en {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .42em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 16px;
}
.article-subtitle-sci {
  font-family: var(--cn);
  font-weight: 300;
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 60ch;
}
.article-body-sci {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) 0;
  font-family: var(--cn);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
}
.article-body-sci p { margin-bottom: 24px; }
.article-body-sci p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 700;
  font-size: 4em;
  float: left;
  line-height: .85;
  margin: 4px 12px 0 0;
  color: var(--amber);
  text-shadow: 0 0 16px rgba(255,181,0,.5);
}
.article-body-sci h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 56px 0 18px;
  position: relative;
  padding-left: 20px;
  border-left: 3px solid var(--amber);
  display: flex; align-items: center; gap: 14px;
}
.article-body-sci h2::before {
  content: attr(data-no);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--amber);
  font-weight: 600;
}
.article-body-sci em {
  color: var(--cyan-soft);
  font-style: normal;
  border-bottom: 1px dashed var(--cyan);
  padding-bottom: 1px;
}
.article-body-sci strong {
  color: var(--amber);
  font-weight: 600;
}
.article-body-sci blockquote {
  font-family: var(--cn);
  font-size: 19px;
  line-height: 1.5;
  color: var(--amber);
  border-left: 2px solid var(--amber);
  padding: 16px 24px;
  margin: 32px 0;
  background: rgba(255, 181, 0, .04);
  position: relative;
}
.article-body-sci blockquote::before {
  content: "▸";
  position: absolute;
  left: -2px; top: 14px;
  background: var(--void);
  color: var(--amber);
  padding: 0 4px;
  font-size: 14px;
}
.article-body-sci code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--steel);
  color: var(--cyan);
  padding: 2px 6px;
  border: 1px solid var(--frame);
}
.article-body-sci pre {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--abyss);
  color: var(--cyan-soft);
  padding: 22px 24px;
  margin: 28px 0;
  overflow-x: auto;
  line-height: 1.6;
  border: 1px solid var(--frame);
  border-left: 3px solid var(--cyan);
  position: relative;
}
.article-body-sci pre::before {
  content: "// FILE.txt";
  position: absolute;
  top: 6px; right: 12px;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--text-mute);
}
.article-body-sci pre code {
  background: none; border: none; color: inherit; padding: 0;
}
.article-body-sci a {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.article-body-sci a:hover { color: var(--amber); }
.article-body-sci hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  margin: 48px 0;
  position: relative;
}
.article-body-sci hr::after {
  content: "◆ ◆ ◆";
  position: absolute;
  left: 50%; top: -10px; transform: translateX(-50%);
  background: var(--void);
  padding: 0 16px;
  color: var(--amber);
  font-size: 10px;
  letter-spacing: .8em;
}
.article-foot-sci {
  max-width: 720px;
  margin: clamp(56px, 6vw, 80px) auto 0;
  padding: 24px var(--pad-x) 0;
  border-top: 1px solid var(--frame);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.article-foot-sci a { color: var(--amber); text-decoration: none; transition: letter-spacing .3s, color .3s; }
.article-foot-sci a:hover { letter-spacing: .2em; color: var(--cyan); }

.article-body-sci .end-line {
  margin-top: 36px;
  font-family: var(--cn);
  text-align: right;
  color: var(--amber);
  letter-spacing: .14em;
  font-size: 14px;
}

/* ═════════ READING PROGRESS ═════════ */
.bastion-prog {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 30;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: flex; align-items: center; gap: 10px;
  background: rgba(8, 16, 30, .85);
  padding: 6px 12px;
  border: 1px solid var(--frame);
}
.bastion-prog span { color: var(--cyan); font-variant-numeric: tabular-nums; }
.bastion-prog .bar {
  width: 90px; height: 1px;
  background: var(--frame);
  position: relative;
}
.bastion-prog .bar::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: var(--p, 0%);
  height: 3px;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
  transition: width .15s;
}

/* ═════════ COSMIC HERO — 黑洞 + 飞船 + plasma ═════════
   致敬 星际穿越 (Gargantua) + 流浪地球 2 (战舰)
   ═══════════════════════════════════════════════════════ */
.cosmic-hero {
  --mx: 0;            /* mouse position normalized -.5 to .5 */
  --my: 0;
  position: relative;
  min-height: calc(100vh - 44px);
  background: var(--void);
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
}

/* black hole as parallax background layer */
.cosmic-bg {
  position: absolute;
  inset: -8%;
  background:
    url("./assets/bh.jpg") 28% center / cover no-repeat,
    var(--void);
  z-index: 0;
  transform:
    translate3d(
      calc(var(--mx, 0) * -90px + var(--scroll, 0) * -80px),
      calc(var(--my, 0) * -54px),
      0
    )
    scale(calc(1.1 + var(--scroll, 0) * 0.08));
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
  animation: bh-breathe 60s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bh-breathe {
  0%   { filter: brightness(.82) saturate(.9)  contrast(1.05); }
  100% { filter: brightness(.9)  saturate(.98) contrast(1.1); }
}

/* dark vignette + chromatic edges for readability */
.cosmic-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,8,16,.62) 0%, rgba(3,8,16,.42) 28%, transparent 54%),
    radial-gradient(ellipse 62% 46% at 17% 32%, rgba(3,8,16,.54) 0%, transparent 64%),
    radial-gradient(ellipse 72% 58% at 80% 78%, rgba(0,0,0,.5) 0%, transparent 68%),
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, transparent 24%, transparent 66%, rgba(3,6,13,.78) 100%);
  pointer-events: none;
  z-index: 1;
}

.cosmic-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 70% 68%, rgba(79,214,255,.14), transparent 68%),
    radial-gradient(ellipse 38% 22% at 23% 28%, rgba(184,240,255,.08), transparent 66%),
    linear-gradient(90deg, rgba(79,214,255,.08), transparent 28%, transparent 74%, rgba(79,214,255,.06)),
    repeating-linear-gradient(0deg, rgba(226,248,255,.045) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  opacity: .7;
}

/* extra starfield drifting on top of the BH bg */
.cosmic-stars {
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 7%  22%, var(--text-dim), transparent),
    radial-gradient(1px 1px     at 14% 65%, var(--text), transparent),
    radial-gradient(1.5px 1.5px at 22% 38%, var(--cyan-soft), transparent),
    radial-gradient(2px 2px     at 33% 12%, var(--text), transparent),
    radial-gradient(1px 1px     at 41% 78%, var(--text-dim), transparent),
    radial-gradient(1px 1px     at 48% 28%, var(--text), transparent),
    radial-gradient(1.5px 1.5px at 56% 90%, var(--text-dim), transparent),
    radial-gradient(1px 1px     at 64% 18%, var(--cyan), transparent),
    radial-gradient(1px 1px     at 71% 56%, var(--text), transparent),
    radial-gradient(2px 2px     at 86% 70%, var(--text-dim), transparent),
    radial-gradient(1px 1px     at 92% 35%, var(--text), transparent),
    radial-gradient(1.5px 1.5px at 96% 88%, var(--cyan-soft), transparent);
  opacity: .55;
  animation: stars-twinkle 14s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes stars-twinkle { 50% { opacity: .35; } }

/* ─── SHIP (transparent PNG, floats over BH; reacts to mouse + scroll) ─── */
.cosmic-ship {
  position: absolute;
  right: 2%;
  bottom: 11%;
  width: clamp(520px, 50.5vw, 940px);
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* scroll-driven flight only; pointer parallax made hover unstable on the ship hitbox */
  transform:
    translate3d(
      calc(var(--scroll, 0) * 1500px),
      calc(var(--scroll, 0) * -800px),
      0
    );
  opacity: calc(1 - var(--scroll, 0) * 1.4);
  transition:
    transform .3s cubic-bezier(.2,.8,.3,1),
    filter .35s ease,
    opacity .35s ease;
  filter:
    drop-shadow(0 30px 54px rgba(0, 0, 0, .88))
    drop-shadow(-8px -3px 10px rgba(255, 196, 112, .16))
    drop-shadow(0 0 26px rgba(79, 200, 255, .22));
  animation: ship-float 9s ease-in-out infinite alternate;
}
.cosmic-ship::before,
.cosmic-ship::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  transform:
    rotate(calc(2deg + var(--scroll, 0) * 14deg))
    scale(calc(1 - var(--scroll, 0) * 0.6));
  transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
}
.cosmic-ship::before {
  background: url("./assets/ship-tech-overlay.svg?v=1777614900") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: .74;
}
.cosmic-ship::after {
  display: none;
}
.cosmic-ship:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 10px;
}
.cosmic-ship:hover::before,
.cosmic-ship:focus-visible::before {
  opacity: .82;
}
.cosmic-ship:hover::after,
.cosmic-ship:focus-visible::after {
  opacity: .32;
}
.cosmic-ship-img {
  width: 100%;
  aspect-ratio: 1600 / 954;
  background: url("./assets/ship.png") center / contain no-repeat;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  /* div carries the flip + tilt + scroll-driven shrink */
  transform:
    rotate(calc(2deg + var(--scroll, 0) * 14deg))
    scale(calc(1 - var(--scroll, 0) * 0.6))
    scaleX(-1);
  filter: brightness(.96) contrast(1.08) saturate(1.08);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), filter .35s ease;
}
@keyframes ship-float {
  0%   { translate: 0 0; }
  100% { translate: 6px -10px; }
}

/* hover state keeps geometry fixed; only glow changes slightly */
.cosmic-ship:hover {
  filter:
    drop-shadow(0 32px 60px rgba(0, 0, 0, .92))
    drop-shadow(-8px -3px 10px rgba(255, 196, 112, .18))
    drop-shadow(0 0 30px rgba(120, 220, 255, .28));
}
.cosmic-ship:hover .cosmic-ship-img {
  transform:
    rotate(calc(2deg + var(--scroll, 0) * 14deg))
    scale(calc(1 - var(--scroll, 0) * 0.6))
    scaleX(-1);
}

.cosmic-ship:hover::before,
.cosmic-ship:hover::after,
.cosmic-ship:focus-visible::before,
.cosmic-ship:focus-visible::after {
  transform:
    rotate(calc(2deg + var(--scroll, 0) * 14deg))
    scale(calc(1 - var(--scroll, 0) * 0.6));
}

.ship-entry-beacon {
  position: absolute;
  left: 13%;
  top: 26%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 9px 4px;
  border: 1px solid rgba(79,214,255,.56);
  background: rgba(3,8,18,.68);
  color: #9ff1ff;
  font: 800 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(79,214,255,.65);
  box-shadow: 0 0 26px rgba(79,214,255,.14), inset 0 0 18px rgba(79,214,255,.08);
  opacity: .78;
  transform: skewX(-8deg);
  pointer-events: none;
}
.ship-entry-beacon::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}
.cosmic-ship:hover .ship-entry-beacon,
.cosmic-ship:focus-visible .ship-entry-beacon {
  opacity: 1;
  color: var(--amber);
  border-color: rgba(255,181,0,.74);
}

/* scroll hint at bottom of hero */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4fd6ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: calc(1 - var(--scroll, 0) * 2.5);
  transition: opacity .3s ease;
  pointer-events: none;
  text-shadow: 0 0 14px rgba(27,189,231,.5);
}
.scroll-hint .hint-arrow {
  font-size: 20px;
  line-height: 1;
  animation: hint-bounce 1.7s ease-in-out infinite;
}
.scroll-hint .hint-line {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, #4fd6ff);
  animation: hint-line 1.7s ease-in-out infinite;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(8px); opacity: .35; }
}
@keyframes hint-line {
  0%, 100% { transform: scaleY(.6); opacity: .5; }
  50%      { transform: scaleY(1);  opacity: 1; }
}
.cosmic-ship:hover .ship-engine-glow { opacity: .68; }

body.landing-mode {
  overflow: hidden;
}

body.landing-mode .console-bar,
body.landing-mode .id-card,
body.landing-mode .telemetry-side,
body.landing-mode .scroll-hint,
body.landing-mode .console-ticker,
body.landing-mode .mode-switch,
body.landing-mode .bastion-prog,
body.landing-mode .hud-corner,
body.landing-mode .briefing,
body.landing-mode .matrix,
body.landing-mode .archive,
body.landing-mode .deck {
  display: none;
}

body.cabin-matrix .briefing,
body.cabin-matrix .cosmic-hero,
body.cabin-matrix .archive,
body.cabin-matrix .deck,
body.cabin-matrix .specs {
  display: none;
}

body.cabin-matrix .matrix {
  min-height: 100svh;
  padding-top: clamp(88px, 9vw, 132px);
}

body.landing-mode .cosmic-hero {
  min-height: 100svh;
  height: 100svh;
}

body.landing-mode .cosmic-ship {
  right: 0;
  bottom: 5vh;
  width: min(84vw, 1340px);
}

body.landing-mode .ship-entry-beacon {
  left: 18%;
  top: 23%;
}

body.landing-mode .bastion-caption {
  left: 4%;
  top: 12%;
  max-width: min(820px, 58%);
}

/* engine afterglow — aligned to flipped engines (visual lower-left of container) */
.ship-engine-glow {
  position: absolute;
  left: -1.5%;
  top: 55%;
  width: 23%;
  height: 26%;
  z-index: 5;            /* above the image */
  pointer-events: none;
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: .58;
  transition: opacity .35s ease, filter .35s ease;
}
.ship-engine-glow .pulse-1,
.ship-engine-glow .pulse-2 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 20% 14% at 56% 24%, rgba(235,250,255,.9) 0%, rgba(120,210,255,.55) 34%, transparent 72%),
    radial-gradient(ellipse 22% 15% at 67% 35%, rgba(235,250,255,.88) 0%, rgba(90,185,255,.52) 36%, transparent 74%),
    radial-gradient(ellipse 24% 17% at 71% 52%, rgba(235,250,255,.86) 0%, rgba(80,170,255,.48) 36%, transparent 76%),
    radial-gradient(ellipse 22% 16% at 62% 68%, rgba(235,250,255,.82) 0%, rgba(70,155,255,.44) 38%, transparent 78%),
    radial-gradient(ellipse 42% 32% at 66% 50%, rgba(68,160,255,.22), transparent 76%);
  animation: ship-engine-pulse 1.3s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.ship-engine-glow .pulse-2 {
  filter: blur(18px);
  opacity: .34;
  animation-duration: 2.3s;
  animation-delay: -.5s;
}
@keyframes ship-engine-pulse {
  from { opacity: .8;  transform: scale(.94); }
  to   { opacity: 1;   transform: scale(1.14); }
}

/* engine-flare overlay (sits over image's engine cluster) */
.engine-flare {
  position: absolute;
  right: 3%;
  top: 56%;
  width: 24%;
  height: 28%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
.ef-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, .85) 0%,
    rgba(190, 235, 255, .6) 22%,
    rgba(80, 180, 255, .35) 50%,
    transparent 80%);
  filter: blur(10px);
  animation: ef-breathe 1.1s ease-in-out infinite alternate;
}
.ef-layer.ef2 {
  filter: blur(28px);
  opacity: .8;
  animation-duration: 2.4s;
  animation-delay: -.4s;
}
.ef-core {
  position: absolute;
  inset: 25% 8% 25% 35%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(220, 245, 255, .9) 30%,
    rgba(110, 205, 255, .5) 65%,
    transparent 100%);
  filter: blur(4px);
  animation: ef-flicker .55s ease-in-out infinite alternate;
}
@keyframes ef-breathe {
  from { opacity: .8;  transform: scale(.96); }
  to   { opacity: 1;   transform: scale(1.08); }
}
@keyframes ef-flicker {
  from { opacity: .85; transform: scale(.95); }
  to   { opacity: 1;   transform: scale(1.12); }
}

/* (.plasma-trail removed — ship.jpg already carries its own engine plume) */

/* ─── SHIP CUTAWAY MODAL ─── */
body.ship-map-open {
  overflow: hidden;
}

.ship-map {
  --cutaway-width: 1420px;
  --ship-map-scale: 1;
  --ship-map-pad: clamp(10px, 1.5vmin, 24px);
  --ship-panel-pad: clamp(14px, 1.7vmin, 30px);
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: var(--ship-map-pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.ship-map.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ship-map-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(79,214,255,.16), transparent 54%),
    rgba(1, 4, 9, .84);
  backdrop-filter: blur(10px) saturate(1.2);
}

.ship-map-panel {
  position: relative;
  z-index: 1;
  width: min(1720px, 98vw);
  max-height: calc(100svh - var(--ship-map-pad) * 2);
  overflow: auto;
  padding: var(--ship-panel-pad);
  border: 1px solid rgba(79,214,255,.5);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(79,214,255,.07) 0),
    linear-gradient(transparent calc(100% - 1px), rgba(79,214,255,.07) 0),
    radial-gradient(ellipse at 18% 8%, rgba(79,214,255,.12), transparent 48%),
    rgba(4, 10, 19, .94);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow:
    inset 2px 0 0 rgba(255,181,0,.68),
    inset 0 -1px 0 rgba(79,214,255,.22),
    0 42px 100px rgba(0,0,0,.7),
    0 0 80px -48px rgba(79,214,255,.85);
}

.ship-map-panel::before,
.ship-map-panel::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  pointer-events: none;
}
.ship-map-panel::before {
  left: 12px;
  top: 12px;
  border-left: 2px solid var(--amber);
  border-top: 2px solid var(--amber);
}
.ship-map-panel::after {
  right: 12px;
  bottom: 12px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
}

.ship-map-panel > * {
  position: relative;
  z-index: 1;
}

.ship-map-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(79,214,255,.48);
  border-radius: 4px;
  background: rgba(3,8,18,.86);
  color: var(--cyan);
  font: 800 20px/1 var(--mono);
  cursor: pointer;
}
.ship-map-close:hover,
.ship-map-close:focus-visible {
  color: var(--amber);
  border-color: rgba(255,181,0,.7);
  outline: none;
}

.ship-map-head {
  padding: 10px 52px 0 0;
  margin-bottom: 14px;
}

.ship-map-head h2 {
  margin: 7px 0 8px;
  color: #e9f8ff;
  font-family: var(--cn);
  font-size: clamp(28px, min(3.5vw, 5.4svh), 48px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.16;
  text-shadow: 0 0 30px rgba(79,214,255,.24);
}

.ship-map-head h2 span {
  color: var(--amber);
  font-family: var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ship-map-head p {
  max-width: 860px;
  margin: 0;
  color: var(--text-dim);
  font: 600 12px/1.7 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ship-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
  justify-items: center;
}

.ship-cutaway {
  position: relative;
  width: min(100%, var(--cutaway-width));
  aspect-ratio: 1400 / 620;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(79,214,255,.36);
  border-radius: 7px;
  background: rgba(3,8,18,.72);
  box-shadow:
    inset 0 0 0 1px rgba(255,181,0,.12),
    inset 0 0 42px rgba(0,0,0,.28);
  contain: layout paint style;
}

.ship-cutaway::before,
.ship-cutaway::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.ship-cutaway::before {
  inset: 12px;
  border: 1px solid rgba(255,181,0,.22);
  background:
    radial-gradient(circle at 18px 18px, rgba(255,181,0,.82) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) 18px, rgba(79,214,255,.82) 0 2px, transparent 3px),
    radial-gradient(circle at 18px calc(100% - 18px), rgba(79,214,255,.6) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(255,181,0,.7) 0 2px, transparent 3px);
}

.ship-cutaway::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,181,0,.55), rgba(79,214,255,.45), transparent);
  box-shadow: 0 0 18px rgba(79,214,255,.3);
}

.ship-cutaway > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  opacity: .95;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.ship-cabin {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  min-width: calc(118px * var(--ship-map-scale));
  padding:
    calc(10px * var(--ship-map-scale))
    calc(12px * var(--ship-map-scale));
  border: 1px solid rgba(79,214,255,.58);
  border-radius: 5px;
  background: rgba(4,12,22,.82);
  color: #e9f8ff;
  font-family: var(--mono);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translate(-50%, -50%) skewX(-5deg);
  transition: border-color .06s linear, color .06s linear;
  contain: layout paint style;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.ship-cabin::after {
  content: "";
  position: absolute;
  right: calc(8px * var(--ship-map-scale));
  top: calc(8px * var(--ship-map-scale));
  width: calc(18px * var(--ship-map-scale));
  height: max(3px, calc(4px * var(--ship-map-scale)));
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: .46;
  transform: scaleX(.72);
  transform-origin: left center;
  transition: opacity .06s linear, transform .06s linear;
}

.ship-cabin span {
  font: 900 max(12px, calc(15px * var(--ship-map-scale)))/1.1 var(--cn);
  letter-spacing: .08em;
}

.ship-cabin small {
  color: var(--cyan);
  font: 800 max(7px, calc(9px * var(--ship-map-scale)))/1 var(--mono);
  letter-spacing: .18em;
}

.ship-cabin::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.ship-cabin:hover,
.ship-cabin:focus-visible,
.ship-cabin.is-focused {
  border-color: rgba(255,181,0,.86);
  color: #fff8d8;
  outline: none;
}

.ship-cabin:hover::after,
.ship-cabin:focus-visible::after,
.ship-cabin.is-focused::after {
  opacity: .9;
  transform: scaleX(1.12);
}

.ship-cabin.is-open small {
  color: var(--green);
}

.ship-cabin.is-locked {
  color: rgba(206,228,238,.68);
  border-color: rgba(120,144,160,.38);
  background: rgba(4,10,18,.72);
}

.ship-cabin.is-locked small {
  color: rgba(255,181,0,.72);
}

.ship-cabin.is-locked.is-denied {
  animation: denied-shake .28s ease;
  border-color: rgba(255,65,88,.78);
}

@keyframes denied-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -3px 0; }
  75% { translate: 3px 0; }
}

.cabin-engine-bay { left: 15%; top: 61%; }
.cabin-inventory  { left: 31%; top: 57%; }
.cabin-workshop   { left: 48%; top: 47%; }
.cabin-archive    { left: 63%; top: 39%; }
.cabin-nav        { left: 75%; top: 30%; }
.cabin-comms      { left: 77%; top: 55%; }

.ship-engine-core {
  position: absolute;
  left: 13.5%;
  top: 78%;
  z-index: 3;
  width: min(calc(380px * var(--ship-map-scale)), 36%);
  padding:
    calc(12px * var(--ship-map-scale))
    calc(14px * var(--ship-map-scale));
  border: 1px solid rgba(255,181,0,.54);
  border-radius: 5px;
  background: rgba(3,8,18,.82);
  box-shadow: 0 0 32px rgba(255,181,0,.12), inset 0 0 24px rgba(255,181,0,.07);
}

.ship-engine-core span {
  display: block;
  color: var(--amber);
  font: 900 max(12px, calc(14px * var(--ship-map-scale)))/1.2 var(--cn);
  letter-spacing: .12em;
}

.ship-engine-core b {
  display: block;
  margin-top: calc(6px * var(--ship-map-scale));
  color: var(--cyan-soft);
  font: 800 max(8px, calc(10px * var(--ship-map-scale)))/1.5 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ship-map-readout {
  width: min(100%, var(--cutaway-width));
  display: grid;
  grid-template-columns: minmax(230px, .48fr) minmax(300px, .82fr) 1.45fr;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(79,214,255,.34);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255,181,0,.08), transparent 18%, rgba(79,214,255,.08) 54%, transparent),
    linear-gradient(180deg, rgba(79,214,255,.08), transparent 34%),
    rgba(3,8,18,.72);
  box-shadow:
    inset 2px 0 0 rgba(255,181,0,.6),
    inset 0 0 36px rgba(79,214,255,.05);
  contain: layout paint style;
}

.ship-readout-title {
  min-width: 0;
  padding: 10px 14px 12px;
  border-left: 2px solid rgba(255,181,0,.7);
  background: rgba(2,8,16,.36);
}

.ship-map-readout h3 {
  margin: 10px 0 5px;
  color: #e9f8ff;
  font: 900 clamp(24px, 2.3vw, 38px)/1.08 var(--cn);
  letter-spacing: .08em;
}

.ship-map-readout [data-ship-readout-en] {
  margin: 0 0 18px;
  color: var(--cyan);
  font: 800 11px/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ship-readout-copy {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(79,214,255,.22);
  background:
    linear-gradient(135deg, rgba(79,214,255,.08), transparent 48%),
    rgba(1,5,11,.34);
  color: rgba(220,241,248,.78);
  font: 600 12px/1.9 var(--cn);
  letter-spacing: .08em;
}

.ship-map-readout dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.ship-map-readout dl > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(79,214,255,.2);
  border-bottom-color: rgba(255,181,0,.18);
  background: rgba(2,8,16,.42);
}

.ship-map-readout dt {
  color: rgba(159,241,255,.58);
  font: 800 10px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ship-map-readout dd {
  margin: 0;
  color: var(--text);
  font: 700 11px/1.55 var(--mono);
  letter-spacing: .04em;
}

@media (min-aspect-ratio: 16 / 9) and (max-height: 900px) {
  .ship-map {
    --ship-map-pad: clamp(8px, 1vmin, 16px);
    --ship-panel-pad: clamp(12px, 1.35vmin, 22px);
  }
  .ship-map-head {
    padding-top: 4px;
    margin-bottom: 10px;
  }
  .ship-map-head h2 {
    margin-bottom: 4px;
    font-size: clamp(26px, min(3vw, 5.2svh), 42px);
    line-height: 1.04;
  }
  .ship-map-head p {
    font-size: 10px;
    line-height: 1.45;
  }
  .ship-map-grid { gap: 12px; }
  .ship-map-readout {
    padding: 12px;
    gap: 12px;
  }
  .ship-readout-title { padding: 8px 12px; }
  .ship-map-readout h3 { font-size: clamp(22px, 2vw, 32px); }
  .ship-readout-copy {
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.62;
  }
  .ship-map-readout dl { gap: 8px; }
  .ship-map-readout dl > div { padding: 8px 9px; }
}

@media (max-aspect-ratio: 4 / 5) {
  .ship-map-readout { grid-template-columns: 1fr; }
  .ship-map-readout dl { grid-template-columns: 1fr; }
}

/* ─── CAPTION (BASTION 048 title overlay) ─── */
.bastion-caption {
  position: absolute;
  left: 4%;
  top: 17%;
  z-index: 6;
  max-width: min(820px, 56%);
  font-family: var(--mono);
  color: var(--text);
  isolation: isolate;
  text-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.bastion-caption::before {
  content: "";
  position: absolute;
  inset: -30px -86px -34px -36px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 42%, rgba(4,12,22,.74), rgba(4,12,22,.42) 42%, transparent 72%),
    linear-gradient(90deg, rgba(4,12,22,.62), transparent 76%);
  filter: blur(12px);
  opacity: .86;
}
.cap-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .22em;
  color: #9feaff;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid rgba(79,214,255,.75);
  background: rgba(5, 18, 32, .58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 24px rgba(27,189,231,.14);
  backdrop-filter: blur(4px);
}
.cap-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 68px);
  letter-spacing: .06em;
  line-height: .98;
  color: #e9f8ff;
  margin-bottom: 10px;
  text-shadow:
    0 0 28px rgba(27,189,231,.38),
    1.5px 0 0 rgba(79,214,255,.62),
    -1.5px 0 0 rgba(77,124,255,.34);
}
.cap-main-cn {
  display: block;
  font-family: var(--cn);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.08;
  white-space: nowrap;
}
.cap-name small {
  display: block;
  width: fit-content;
  margin-top: 12px;
  padding: 5px 12px 4px;
  border: 1px solid rgba(79,214,255,.58);
  background: rgba(5, 18, 32, .52);
  color: #ffcf4a;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: .12em;
  line-height: 1;
  text-shadow:
    0 0 34px rgba(255,181,0,.34),
    1px 0 0 rgba(79,214,255,.45);
}
.cap-name b {
  color: #4fd6ff;
  font-weight: 700;
  text-shadow:
    0 0 34px rgba(27,189,231,.72),
    2px 0 0 rgba(77,124,255,.45),
    -2px 0 0 rgba(233,248,255,.5);
}
.cap-cn {
  display: block;
  font-family: var(--cn);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 300;
  letter-spacing: .38em;
  color: #c8f4ff;
  margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(27,189,231,.42);
}
.cap-line {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cap-status {
  display: inline-flex; align-items: center; gap: 8px;
  color: #9feaff;
  margin-bottom: 4px;
}
.cap-status .dot {
  width: 8px; height: 8px;
  background: #4fd6ff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(79,214,255,.85);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.cap-mission { color: rgba(199,224,237,.62); }

/* corner panels (id-card / telemetry-side) re-used as floating overlay */
.cosmic-hero .id-card {
  position: absolute;
  left: 24px; bottom: 24px;
  z-index: 5;
  background: rgba(8, 16, 30, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 290px;
  font-size: 10px;
}
.cosmic-hero .id-card h3 { font-size: 11px; margin-bottom: 12px; }
.cosmic-hero .id-card dl { grid-template-columns: 80px 1fr; gap: 4px 10px; }
.cosmic-hero .id-card dd { font-size: 11px; }

.cosmic-hero .telemetry-side {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 5;
  background: rgba(8, 16, 30, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 290px;
  margin: 0;
  font-size: 10px;
}
.cosmic-hero .telemetry-side h3 { font-size: 11px; margin-bottom: 12px; }
.cosmic-hero .tel-row { font-size: 10px; padding: 3px 0; }

.cosmic-hero .id-card,
.cosmic-hero .telemetry-side {
  display: none;
}

/* responsive */
@media (max-width: 1100px) {
  .bastion-caption { max-width: 56%; }
  .ship-map { --ship-panel-pad: clamp(12px, 1.8vmin, 22px); }
  .ship-map-grid { grid-template-columns: 1fr; }
  .ship-map-readout { grid-template-columns: 1fr; }
  .ship-map-readout dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ship-cabin {
    min-width: calc(104px * var(--ship-map-scale));
    padding:
      calc(8px * var(--ship-map-scale))
      calc(9px * var(--ship-map-scale));
  }
  .ship-cabin span { font-size: max(11px, calc(13px * var(--ship-map-scale))); }
  .cosmic-hero .id-card,
  .cosmic-hero .telemetry-side { max-width: 220px; padding: 12px; }
  .ship-glow { width: 130vw; left: -25%; bottom: -8%; }
  .black-hole-stage { width: 90vw; right: -16%; top: -8%; }
  .cosmic-hero::after { left: 20%; width: 70%; }
}
@media (max-width: 700px) {
  .cosmic-hero { min-height: 88vh; }
  body.landing-mode .cosmic-hero { min-height: 100svh; height: 100svh; }
  body.landing-mode .cosmic-ship { right: -20vw; bottom: 16vh; width: 128vw; }
  body.landing-mode .ship-entry-beacon { left: 18%; top: 25%; }
  .bastion-caption { left: 16px; right: 16px; top: 14%; max-width: none; }
  .cap-main-cn { white-space: normal; }
  .ship-map { padding: 10px; }
  .ship-map-panel { max-height: calc(100svh - 20px); padding: 18px 14px; }
  .ship-map-head { padding-right: 40px; }
  .ship-map-head h2 { font-size: 26px; }
  .ship-map-head p { font-size: 10px; }
  .ship-cutaway > img { object-position: 42% center; }
  .ship-map-readout { padding: 12px; }
  .ship-map-readout dl { grid-template-columns: 1fr; }
  .ship-readout-copy { font-size: 11px; line-height: 1.75; }
  .ship-cabin {
    min-width: calc(92px * var(--ship-map-scale));
    padding:
      calc(7px * var(--ship-map-scale))
      calc(8px * var(--ship-map-scale));
  }
  .ship-cabin span { font-size: max(10px, calc(12px * var(--ship-map-scale))); }
  .ship-cabin small { font-size: max(7px, calc(8px * var(--ship-map-scale))); }
  .cabin-engine-bay { left: 22%; top: 66%; }
  .cabin-inventory  { left: 36%; top: 56%; }
  .cabin-workshop   { left: 52%; top: 46%; }
  .cabin-archive    { left: 66%; top: 38%; }
  .cabin-nav        { left: 75%; top: 25%; }
  .cabin-comms      { left: 76%; top: 57%; }
  .ship-engine-core { left: 17%; top: 82%; width: 64%; }
  .cosmic-hero .id-card,
  .cosmic-hero .telemetry-side { display: none; }
  .ship-glow { width: 160vw; left: -30%; bottom: -10%; }
  .black-hole-stage { width: 110vw; right: -22%; top: -12%; }
}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width: 1100px) {
  .bastion-hero { grid-template-columns: 1fr; gap: 28px; }
  .id-card, .telemetry-side { max-width: 100%; margin: 0; }
  .matrix-console { grid-template-columns: 1fr; }
  .matrix-items { grid-template-columns: 1fr; }
  .archive-row { grid-template-columns: 60px 1fr auto; }
  .archive-row .ar-cls, .archive-row .ar-date, .archive-row .ar-size { display: none; }
  .deck-grid { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .console-bar { grid-template-columns: 1fr auto; gap: 12px; padding: 8px 14px; }
  .cb-stream, .cb-meta { display: none; }
  .matrix-visual { min-height: 360px; }
  .matrix-scope { width: 112%; }
  .matrix-core { width: 104px; height: 104px; }
  .matrix-core b { font-size: 38px; }
  .matrix-callout {
    align-items: start;
    flex-direction: column;
    letter-spacing: .12em;
  }
  .matrix-callout small { text-align: left; }
  .matrix-item-rail { grid-template-columns: 1fr; }
  .item-node { min-height: 92px; }
  .matrix-readout dl { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .specs-bottom { flex-direction: column; gap: 8px; padding: 16px var(--pad-x); text-align: center; }
  .article-meta-sci { grid-template-columns: 1fr 1fr; }
}

/* ═════════ PRAGMATA-INSPIRED SHELTER CABINET OVERRIDE ═════════
   Cold lunar lab / printed-object locker treatment for the Bastion items.
   ═══════════════════════════════════════════════════════════════ */
.matrix {
  --cabinet-bg: #e6eef4;
  --cabinet-panel: rgba(248, 252, 255, .82);
  --cabinet-ink: #13202c;
  --cabinet-muted: #6d7e8d;
  --cabinet-line: rgba(91, 117, 138, .34);
  --cabinet-cyan: #1bbde7;
  --cabinet-blue: #4d7cff;
  --cabinet-warn: #ff9f2e;
  color: var(--cabinet-ink);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.95) 0%, rgba(230,238,244,.88) 42%, rgba(105,132,150,.28) 74%, rgba(3,6,13,.9) 100%),
    linear-gradient(180deg, #e7f0f6 0%, #c9d7e1 70%, #07101e 100%);
}
.matrix::before {
  background:
    linear-gradient(90deg, rgba(27,189,231,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(19,32,44,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .55;
}
.matrix .section-head-sci {
  border-bottom-color: rgba(19,32,44,.16);
}
.matrix .section-head-sci::before {
  background: linear-gradient(90deg, var(--cabinet-cyan), rgba(77,124,255,.2), transparent 42%);
}
.matrix .section-head-sci h2 {
  color: var(--cabinet-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.matrix .section-head-sci h2 .cn,
.matrix .sect-tag {
  color: #0b8fb6;
}
.matrix .section-head-sci .meta {
  color: rgba(19,32,44,.52);
}
.matrix-console {
  grid-template-columns: 1fr;
  gap: 18px;
}
.matrix-visual {
  grid-column: 1 / -1;
  min-height: clamp(420px, 36vw, 560px);
  border: 1px solid rgba(70, 98, 120, .32);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(218,231,240,.78)),
    radial-gradient(ellipse at 50% 46%, rgba(27,189,231,.18), transparent 56%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -18px 50px rgba(74,100,120,.16),
    0 44px 90px rgba(0,0,0,.26);
}
.matrix-visual:hover,
.matrix-visual:focus-visible {
  border-color: rgba(27,189,231,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -18px 50px rgba(74,100,120,.16),
    0 0 54px rgba(27,189,231,.24),
    0 46px 92px rgba(0,0,0,.3);
}
.matrix-visual::before,
.matrix-visual::after {
  border-color: rgba(27,189,231,.78);
}
.matrix-scope {
  width: min(88%, 880px);
  aspect-ratio: 16 / 9;
  perspective: 1400px;
}
.matrix-grid {
  inset: 4%;
  border: 1px solid rgba(91,117,138,.35);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(19,32,44,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(19,32,44,.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 42%, rgba(27,189,231,.18), transparent 62%),
    rgba(255,255,255,.34);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%;
  transform: rotateX(4deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    inset 0 0 60px rgba(77,124,255,.1),
    0 28px 70px rgba(50,76,98,.16);
}
.matrix-axis {
  background: linear-gradient(90deg, transparent, rgba(27,189,231,.78), transparent);
  opacity: .42;
}
.matrix-beam {
  width: 28%;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 2px, rgba(27,189,231,.55) 3px 5px, transparent 6px),
    radial-gradient(circle, rgba(77,124,255,.2), transparent 62%);
  box-shadow: 0 0 80px rgba(27,189,231,.18);
}
.server-rack {
  width: 25%;
  height: 25%;
  border-radius: 18px;
  border: 1px solid rgba(77, 124, 255, .28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(222,235,244,.42)),
    radial-gradient(ellipse at 50% 0%, rgba(27,189,231,.18), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -14px 22px rgba(76,104,128,.12),
    0 18px 38px rgba(67,95,120,.18);
  transform: none;
}
.server-rack::before {
  left: 12%;
  right: 12%;
  top: auto;
  bottom: 14%;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cabinet-cyan), var(--cabinet-blue), var(--cabinet-warn));
}
.server-rack::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 24%;
  width: 42%;
  height: 36%;
  transform: translateX(-50%);
  border: 1px solid rgba(19,32,44,.28);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(19,32,44,.12), rgba(255,255,255,.22)),
    rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.server-rack i {
  top: auto !important;
  bottom: 12px;
  width: 4px;
  height: 4px;
}
.server-rack i:nth-child(1) { left: 16%; right: auto; }
.server-rack i:nth-child(2) { left: 22%; right: auto; }
.server-rack i:nth-child(3) { right: 22%; }
.server-rack i:nth-child(4) { right: 16%; }
.rack-a { left: 8%; top: 15%; transform: none; }
.rack-b { left: 37.5%; top: 10%; transform: none; }
.rack-c { right: 8%; top: 15%; transform: none; }
.rack-d { left: 8%; bottom: 15%; transform: none; }
.rack-e { left: 37.5%; bottom: 10%; transform: none; }
.rack-f { right: 8%; bottom: 15%; transform: none; }
.matrix-door {
  top: 6%;
  bottom: 6%;
  width: 46%;
  border-color: rgba(255,255,255,.42);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(207,224,236,.72)),
    linear-gradient(135deg, rgba(27,189,231,.16), transparent 58%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 36px rgba(77,124,255,.12);
}
.door-left { left: 4%; }
.door-right { right: 4%; }
.matrix-core {
  width: 118px;
  height: 118px;
  border-color: rgba(27,189,231,.7);
  background: rgba(246,251,255,.72);
  color: #0b8fb6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 14px rgba(27,189,231,.045),
    0 0 44px rgba(27,189,231,.2);
}
.matrix-core b {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
  color: #0784aa;
  text-shadow:
    0 1px 0 rgba(255,255,255,.86),
    0 0 18px rgba(27,189,231,.36);
}
.matrix-core small {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0;
  color: #4d7cff;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.matrix-callout {
  display: none;
  left: 30px;
  right: 30px;
  bottom: 24px;
  color: var(--cabinet-ink);
}
.matrix-callout b {
  color: var(--cabinet-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.82);
}
.matrix-callout small {
  color: #0b8fb6;
}
.matrix.is-open .door-left {
  transform: translateX(-64%) rotateY(-50deg);
  opacity: .38;
}
.matrix.is-open .door-right {
  transform: translateX(64%) rotateY(50deg);
  opacity: .38;
}
.matrix.is-open .server-rack {
  filter: brightness(1.03) saturate(1.1);
}
.matrix.is-open .rack-a { transform: translate(-16px, -10px); }
.matrix.is-open .rack-b { transform: translateY(-18px); }
.matrix.is-open .rack-c { transform: translate(16px, -10px); }
.matrix.is-open .rack-d { transform: translate(-16px, 10px); }
.matrix.is-open .rack-e { transform: translateY(18px); }
.matrix.is-open .rack-f { transform: translate(16px, 10px); }
.matrix-item-rail,
.matrix-readout {
  border: 1px solid rgba(91,117,138,.28);
  border-radius: 22px;
  background: rgba(242,248,252,.92);
  color: var(--cabinet-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 54px rgba(0,0,0,.18);
}
.matrix-item-rail {
  overflow: hidden;
  gap: 0;
  padding: 0;
}
.item-node {
  min-height: 122px;
  border-right: 1px solid rgba(91,117,138,.2);
  border-bottom: 1px solid rgba(91,117,138,.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(226,238,247,.64));
  color: var(--cabinet-muted);
}
.item-node:hover,
.item-node:focus-visible {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(219,241,250,.82));
}
.item-node.is-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(211,238,248,.94));
  box-shadow: inset 0 0 0 2px rgba(27,189,231,.5);
}
.item-node b {
  color: var(--cabinet-ink);
  font-size: 20px;
}
.item-node small {
  color: var(--cabinet-muted);
}
.item-icon {
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(45,80,105,.12);
}
.matrix-readout {
  background:
    linear-gradient(180deg, rgba(248,252,255,.96), rgba(226,238,247,.9));
}
.matrix-readout::before {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(27,189,231,.14), transparent 55%),
    repeating-linear-gradient(0deg, rgba(19,32,44,.04) 0 1px, transparent 1px 9px);
}
.readout-kicker {
  color: #0b8fb6;
}
.readout-status {
  color: #0b8fb6;
  background: rgba(255,255,255,.58);
}
.matrix-readout h3,
.matrix-readout dd,
.matrix-readout dt,
.matrix-readout p {
  color: var(--cabinet-ink);
}
.matrix-readout dt,
.matrix-readout p {
  color: var(--cabinet-muted);
}
.matrix-load {
  background: rgba(98,123,143,.18);
  border-radius: 99px;
  overflow: hidden;
}
.matrix-load i {
  background: linear-gradient(90deg, var(--cabinet-cyan), var(--cabinet-blue), var(--cabinet-warn));
  box-shadow: 0 0 16px rgba(27,189,231,.22);
}

@media (max-width: 1100px) {
  .matrix-scope { width: min(94%, 760px); }
  .matrix-visual { min-height: 520px; }
}
@media (max-width: 700px) {
  .matrix-visual {
    min-height: 430px;
    border-radius: 20px;
  }
  .matrix-scope {
    width: 120%;
    aspect-ratio: 1.05;
  }
  .server-rack {
    width: 27%;
    height: 22%;
    border-radius: 14px;
  }
  .matrix-core {
    width: 94px;
    height: 94px;
  }
  .matrix-core b { font-size: 30px; }
  .matrix-callout {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }
  .matrix-callout b {
    font-size: 24px;
  }
}

/* ═════════ PRAGMATA PAGE + THREE-LAYER CABINET PASS ═════════ */
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55), transparent 42%),
    linear-gradient(180deg, #07101e 0%, #dce8f0 42%, #eef5f8 100%);
}
.console-bar {
  background: rgba(235, 244, 249, .86);
  border-bottom-color: rgba(91, 117, 138, .32);
  color: rgba(19,32,44,.62);
}
.cb-mark b,
.cb-meta b {
  color: #13202c;
}
.cb-mark .glyph {
  border-color: #1bbde7;
  background: rgba(255,255,255,.74);
  color: #0b8fb6;
}
.cb-clock { color: #0b8fb6; }
.mode-switch {
  background: rgba(236, 246, 250, .88);
  border-color: rgba(27,189,231,.7);
  box-shadow: 0 0 34px -10px rgba(27,189,231,.72);
}
.mode-switch::before,
.mode-switch::after {
  border-color: #1bbde7;
}
.ms-chip { color: rgba(19,32,44,.56); }
.ms-chip:hover { color: #0b8fb6; }
.ms-chip.ms-active {
  background: #dff5fc;
  color: #13202c;
}
.section-head-sci {
  border-bottom-color: rgba(91,117,138,.24);
}
.briefing,
.archive,
.deck {
  background:
    linear-gradient(180deg, rgba(246,251,255,.88), rgba(225,237,245,.78)),
    radial-gradient(ellipse at 50% 0%, rgba(27,189,231,.1), transparent 64%);
}
.briefing-inner p,
.deck-panel h4,
.archive-row .ar-title,
.archive-row .ar-title b {
  color: #13202c;
}
.briefing-inner p + p::before,
.briefing-inner p,
.deck-panel p,
.archive-row,
.archive-row .ar-title small {
  color: rgba(19,32,44,.62);
}
.briefing-inner em,
.section-head-sci h2 .cn,
.sect-tag {
  color: #0b8fb6;
}
.briefing-inner strong,
.briefing-stamp,
.archive-row .ar-id,
.deck-head .tag,
.specs-grid h5 {
  color: #c0761f;
}
.archive-table,
.deck-panel {
  border-color: rgba(91,117,138,.26);
  background: rgba(246,251,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 18px 48px rgba(28,49,66,.08);
}
.archive-row {
  border-bottom-color: rgba(91,117,138,.2);
}
.archive-row:hover {
  background: rgba(27,189,231,.1);
}
.archive-row .ar-cls { color: #0b8fb6; }
.archive-row .ar-status {
  color: #0b8fb6;
  border-color: rgba(27,189,231,.7);
}
.specs {
  background: #dce8f0;
  border-top-color: rgba(91,117,138,.28);
}
.specs-grid p,
.specs-bottom {
  color: rgba(19,32,44,.62);
}

.category-door {
  position: absolute;
  z-index: 5;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  align-items: center;
  gap: 8px;
  width: 16%;
  height: 34%;
  padding: 18px 12px 14px;
  border: 1px solid rgba(91,117,138,.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(220,235,244,.58)),
    radial-gradient(ellipse at 50% 0%, rgba(27,189,231,.16), transparent 58%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -14px 26px rgba(70,98,120,.1),
    0 20px 36px rgba(45,72,96,.14);
  opacity: .92;
  pointer-events: auto;
  transition: transform .62s cubic-bezier(.18,.84,.2,1), box-shadow .4s ease, opacity .4s ease;
}
.category-door b {
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  color: #0784aa;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255,255,255,.88),
    0 0 16px rgba(27,189,231,.26);
}
.category-door small {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  color: #4d7cff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.cat-productivity { left: 5%; top: 9%; }
.cat-gaming { left: 29%; top: 9%; }
.cat-hobby { left: 53%; top: 9%; right: auto; }
.cat-server { left: 77%; top: 9%; right: auto; }
.cat-llm { left: 5%; bottom: 9%; }
.cat-locked-a { left: 29%; bottom: 9%; }
.cat-locked-b { left: 53%; bottom: 9%; }
.cat-locked-c { left: 77%; bottom: 9%; }
.matrix.is-open .category-door {
  opacity: 1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -14px 26px rgba(70,98,120,.1),
    0 26px 48px rgba(45,72,96,.18),
    0 0 34px rgba(27,189,231,.12);
}
.category-door.is-active {
  border-color: rgba(27,189,231,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(211,239,249,.76)),
    radial-gradient(ellipse at 50% 0%, rgba(27,189,231,.24), transparent 62%);
  box-shadow:
    inset 0 0 0 2px rgba(27,189,231,.18),
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 38px rgba(27,189,231,.18),
    0 28px 52px rgba(45,72,96,.2);
}
.category-door.is-active b {
  color: #064c68;
}
.category-door.is-active small {
  color: #0b8fb6;
}
.category-door.is-locked {
  border-style: dashed;
  opacity: .58;
  filter: saturate(.62);
}
.category-door.is-locked::after {
  content: "SEALED";
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,159,31,.55);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255,255,255,.7);
  color: #b66d00;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
}
.category-door.is-locked .cabinet-icon {
  filter: blur(1.8px) saturate(.46);
  opacity: .72;
}
.category-door.is-locked b {
  color: rgba(19,32,44,.48);
}
.category-door.is-locked small {
  color: #b66d00;
}
.category-door.is-locked.is-active {
  border-color: rgba(255,159,31,.7);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(235,228,214,.68)),
    radial-gradient(ellipse at 50% 0%, rgba(255,159,31,.14), transparent 60%);
  box-shadow:
    inset 0 0 0 2px rgba(255,159,31,.14),
    inset 0 1px 0 rgba(255,255,255,.95),
    0 24px 46px rgba(95, 65, 34, .14);
}
.matrix.is-open .cat-productivity { transform: translate(-10px, -8px); }
.matrix.is-open .cat-gaming { transform: translateY(-18px); }
.matrix.is-open .cat-hobby { transform: translateY(-18px); }
.matrix.is-open .cat-server { transform: translate(10px, -8px); }
.matrix.is-open .cat-llm { transform: translate(-10px, 18px); }
.matrix.is-open .cat-locked-a { transform: translateY(18px); }
.matrix.is-open .cat-locked-b { transform: translateY(18px); }
.matrix.is-open .cat-locked-c { transform: translate(10px, 18px); }

.cabinet-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(27,189,231,.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(219,237,246,.68));
  display: grid;
  place-items: center;
  position: relative;
  color: #0b8fb6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 10px 20px rgba(29,73,101,.12);
}
.cabinet-icon i,
.cabinet-icon::before,
.cabinet-icon::after {
  content: "";
  position: absolute;
  display: block;
}
.icon-productivity i {
  width: 27px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 4px;
}
.icon-productivity::before {
  width: 12px;
  height: 2px;
  background: currentColor;
  bottom: 13px;
}
.icon-productivity::after {
  width: 22px;
  height: 2px;
  background: currentColor;
  bottom: 9px;
}
.icon-gaming i {
  width: 32px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 12px 12px 10px 10px;
}
.icon-gaming::before {
  width: 10px;
  height: 2px;
  background: currentColor;
  left: 15px;
  top: 26px;
  box-shadow: 4px -4px 0 currentColor, 4px 4px 0 currentColor;
}
.icon-gaming::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  right: 17px;
  top: 23px;
  box-shadow: 7px 4px 0 currentColor;
}
.icon-hobby i {
  width: 25px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 11px 11px 5px 5px;
  transform: rotate(-8deg);
}
.icon-hobby::before {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 50%;
  right: 13px;
  top: 13px;
}
.icon-hobby::after {
  width: 18px;
  height: 2px;
  background: currentColor;
  right: 10px;
  bottom: 15px;
  transform: rotate(-32deg);
}
.icon-llm i {
  width: 28px;
  height: 28px;
  border: 2px solid currentColor;
  border-radius: 9px;
}
.icon-llm::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  top: 18px;
  left: 18px;
  box-shadow: 10px 0 0 currentColor, 20px 0 0 currentColor, 5px 11px 0 currentColor, 15px 11px 0 currentColor;
}
.icon-llm::after {
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(11,143,182,.55);
  border-radius: 12px;
}
.icon-cs i {
  width: 34px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 8px;
  transform: rotate(-18deg);
}
.icon-cs::before {
  width: 11px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 2px;
  left: 18px;
  top: 25px;
  transform: rotate(-18deg);
}
.icon-cs::after {
  width: 20px;
  height: 2px;
  background: currentColor;
  right: 13px;
  top: 21px;
  transform: rotate(-18deg);
}

.matrix-category-rail {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.category-tab {
  min-height: 108px;
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(91,117,138,.28);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(222,236,246,.66));
  color: #13202c;
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.category-tab:hover,
.category-tab:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(27,189,231,.62);
  outline: none;
}
.category-tab.is-active {
  border-color: rgba(27,189,231,.78);
  box-shadow:
    inset 0 0 0 2px rgba(27,189,231,.22),
    0 12px 28px rgba(27,189,231,.12);
}
.category-tab.is-locked,
.category-tab:disabled {
  cursor: not-allowed;
  opacity: .62;
  border-style: dashed;
  color: rgba(19,32,44,.48);
  filter: saturate(.72);
}
.category-tab.is-locked:hover,
.category-tab.is-locked:focus-visible {
  transform: none;
  border-color: rgba(255,159,31,.58);
}
.category-tab.is-locked.is-active {
  border-color: rgba(255,159,31,.7);
  box-shadow:
    inset 0 0 0 2px rgba(255,159,31,.14),
    0 12px 28px rgba(139, 91, 24, .1);
}
.category-tab.is-locked .cabinet-icon {
  filter: blur(1.6px) saturate(.5);
  opacity: .72;
}
.category-tab.is-locked b {
  color: rgba(19,32,44,.5);
}
.category-tab.is-locked small {
  color: #b66d00;
}
.category-tab b {
  display: block;
  font-family: var(--cn);
  font-size: 15px;
  font-weight: 600;
  color: #13202c;
}
.category-tab small {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: #6d7e8d;
}
.category-door .cabinet-icon,
.category-tab .cabinet-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 92% 92%;
}
.category-door .cabinet-icon i,
.category-door .cabinet-icon::before,
.category-door .cabinet-icon::after,
.category-tab .cabinet-icon i,
.category-tab .cabinet-icon::before,
.category-tab .cabinet-icon::after {
  display: none;
}
.category-door .icon-productivity,
.category-tab .icon-productivity {
  background-image: url("./assets/cabinet-icons/productivity-tools.svg");
}
.category-door .icon-gaming,
.category-tab .icon-gaming {
  background-image: url("./assets/cabinet-icons/gaming-devices.svg");
}
.category-door .icon-hobby,
.category-tab .icon-hobby {
  background-image: url("./assets/cabinet-icons/personal-hobbies.svg");
}
.category-door .icon-llm,
.category-tab .icon-llm {
  background-image: url("./assets/cabinet-icons/local-llm.svg");
}
.category-door .icon-server,
.category-tab .icon-server {
  background-image: url("./assets/cabinet-icons/server-hardware.svg");
}
.category-door .icon-locked,
.category-tab .icon-locked {
  background-image: url("./assets/cabinet-icons/items/locked-slot.svg");
}
.category-door .icon-cs,
.category-tab .icon-cs {
  background-image: url("./assets/cabinet-icons/cs-game-skins.svg");
}

.matrix.is-open .matrix-items {
  max-height: 1480px;
}
.matrix-items {
  grid-template-columns: 1fr minmax(300px, .38fr);
}
.matrix-item-rail {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.matrix-item-rail.is-active {
  display: grid;
}
.matrix-item-rail.is-locked {
  position: relative;
  min-height: 180px;
  overflow: hidden;
}
.matrix-item-rail.is-locked .item-node {
  pointer-events: none;
  opacity: .46;
  filter: blur(5px) saturate(.45);
  user-select: none;
}
.matrix-item-rail.is-locked::after {
  content: "SEALED · PERSONAL HOBBY";
  position: absolute;
  inset: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,159,31,.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.66), rgba(226,238,247,.52)),
    repeating-linear-gradient(135deg, rgba(255,159,31,.14) 0 8px, transparent 8px 16px);
  color: #8a5c12;
  font-family: var(--mono);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 20px 38px rgba(83, 76, 64, .12);
}
.matrix.has-locked-category .matrix-readout {
  border-color: rgba(255,159,31,.62);
}
.matrix.has-locked-category .readout-status {
  color: #b66d00;
}
.item-node {
  grid-template-columns: 76px 1fr;
  min-height: 136px;
}
.item-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
}
.item-icon.item-art {
  background-color: rgba(248,252,255,.82);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 96% 96%;
  border-color: rgba(27,189,231,.42);
}
.item-icon.item-art i,
.item-icon.item-art::before,
.item-icon.item-art::after {
  display: none;
}
.icon-macbook { background-image: url("./assets/cabinet-icons/items/macbook-pro-m5.svg"); }
.icon-alienware { background-image: url("./assets/cabinet-icons/items/alienware-r15-4080.svg"); }
.icon-synology { background-image: url("./assets/cabinet-icons/items/synology-ds1522.svg"); }
.icon-ps5-cn { background-image: url("./assets/cabinet-icons/items/ps5-cn.svg"); }
.icon-ps5-us { background-image: url("./assets/cabinet-icons/items/ps5-us.svg"); }
.icon-ns1 { background-image: url("./assets/cabinet-icons/items/nintendo-switch-1.svg"); }
.icon-ns2 { background-image: url("./assets/cabinet-icons/items/nintendo-switch-2.svg"); }
.icon-steam-deck { background-image: url("./assets/cabinet-icons/items/steam-deck.svg"); }
.icon-ps5-pads { background-image: url("./assets/cabinet-icons/items/ps5-controllers.svg"); }
.icon-xbox-red { background-image: url("./assets/cabinet-icons/items/xbox-red-controller.svg"); }
.icon-camera-kit { background-image: url("./assets/cabinet-icons/items/camera-kit.svg"); }
.icon-book-stack { background-image: url("./assets/cabinet-icons/items/book-stack.svg"); }
.icon-model-shelf { background-image: url("./assets/cabinet-icons/items/model-shelf.svg"); }
.icon-qwen36-35b { background-image: url("./assets/cabinet-icons/items/qwen36-abliterated-35b-a3b.svg"); }
.icon-gemma4-26b { background-image: url("./assets/cabinet-icons/items/gemma4-26b.svg"); }
.icon-qwen35-4b { background-image: url("./assets/cabinet-icons/items/qwen35-4b.svg"); }
.icon-qwen35-9b { background-image: url("./assets/cabinet-icons/items/qwen35-9b.svg"); }
.icon-gemma4-31b { background-image: url("./assets/cabinet-icons/items/gemma4-31b.svg"); }
.icon-qwen35-27b { background-image: url("./assets/cabinet-icons/items/qwen35-27b.svg"); }
.icon-pc-chroma-flux { background-image: url("./assets/cabinet-icons/items/pc-chroma-flux.svg"); }
.icon-codex-plan { background-image: url("./assets/cabinet-icons/items/codex-plan.svg"); }
.icon-claude-code-plan { background-image: url("./assets/cabinet-icons/items/claude-code-plan.svg"); }
.icon-xeon-server { background-image: url("./assets/cabinet-icons/items/xeon-gold-server.svg"); }
.item-icon.display i {
  width: 28px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.display::after {
  width: 18px;
  height: 1px;
  background: currentColor;
  bottom: 11px;
}
.item-icon.deck-icon i {
  width: 31px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 10px;
}
.item-icon.deck-icon::before,
.item-icon.deck-icon::after {
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  top: 18px;
}
.item-icon.deck-icon::before { left: 10px; }
.item-icon.deck-icon::after { right: 10px; }
.item-icon.console i {
  width: 18px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 8px;
}
.item-icon.controller i {
  width: 31px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 12px;
}
.item-icon.camera i {
  width: 27px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 5px;
}
.item-icon.camera::after {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.item-icon.book-mini i {
  width: 24px;
  height: 28px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.book-mini::after {
  width: 1px;
  height: 24px;
  background: currentColor;
}
.item-icon.shelf i {
  width: 30px;
  height: 22px;
  border: 1px solid currentColor;
}
.item-icon.shelf::before,
.item-icon.shelf::after {
  width: 24px;
  height: 1px;
  background: currentColor;
}
.item-icon.shelf::before { top: 18px; }
.item-icon.shelf::after { top: 27px; }
.item-icon.rifle i {
  width: 34px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(-18deg);
}
.item-icon.knife i {
  width: 32px;
  height: 5px;
  background: currentColor;
  transform: rotate(-28deg);
}
.item-icon.knife::after {
  width: 9px;
  height: 5px;
  border: 1px solid currentColor;
  right: 12px;
  top: 28px;
  transform: rotate(-28deg);
}
.item-icon.case i {
  width: 27px;
  height: 23px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.case::before {
  width: 12px;
  height: 5px;
  border: 1px solid currentColor;
  top: 12px;
}
.item-icon.laptop i {
  width: 30px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.laptop::after {
  width: 34px;
  height: 2px;
  background: currentColor;
  bottom: 9px;
}
.item-icon.desktop-node i {
  width: 22px;
  height: 27px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.desktop-node::before {
  width: 10px;
  height: 2px;
  background: currentColor;
  bottom: 12px;
}
.item-icon.desktop-node::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  right: 12px;
  top: 15px;
  box-shadow: 0 8px 0 currentColor;
}
.item-icon.server-core i {
  width: 30px;
  height: 27px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.item-icon.server-core::before,
.item-icon.server-core::after {
  width: 24px;
  height: 1px;
  background: currentColor;
  left: 8px;
}
.item-icon.server-core::before { top: 18px; }
.item-icon.server-core::after { top: 27px; }

@media (max-width: 1100px) {
  .matrix-category-rail { grid-template-columns: repeat(2, 1fr); }
  .matrix-items { grid-template-columns: 1fr; }
  .matrix-item-rail.is-active { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .category-door {
    width: 21%;
    height: 25%;
    padding: 12px 8px;
  }
  .category-door b { font-size: 11px; }
  .category-door small { display: none; }
  .cat-productivity { left: 2%; top: 9%; }
  .cat-gaming { left: 26.5%; top: 9%; }
  .cat-hobby { left: 51%; right: auto; top: 9%; }
  .cat-server { left: 75.5%; right: auto; top: 9%; bottom: auto; }
  .cat-llm { left: 2%; bottom: 10%; }
  .cat-locked-a { left: 26.5%; bottom: 10%; }
  .cat-locked-b { left: 51%; bottom: 10%; }
  .cat-locked-c { left: 75.5%; bottom: 10%; }
  .cabinet-icon { width: 34px; height: 34px; border-radius: 12px; }
  .matrix-category-rail,
  .matrix-item-rail.is-active {
    grid-template-columns: 1fr;
  }
}