:root {
  --void: #01050a;
  --ink: #f4f1e8;
  --muted: #80969c;
  --line: rgba(171, 222, 225, .14);
  --mint: #5df2c2;
  --cyan: #65cfff;
  --amber: #ffc45f;
  --violet: #ae8cff;
  --coral: #ff766d;
  --glass: rgba(3, 13, 21, .76);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--void);
  font-family: "Avenir Next", "DIN Alternate", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.universe-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: grab;
  touch-action: none;
}
.universe-stage.dragging { cursor: grabbing; }
.universe-stage canvas { display: block; width: 100%; height: 100%; outline: none; }

.space-labels {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s .12s;
}
body.exploring .space-labels { opacity: 1; }
.space-label {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 104px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
  opacity: 0;
  transform:
    translate3d(var(--screen-x, -100px), var(--screen-y, -100px), 0)
    translate(16px, -50%)
    scale(var(--label-scale, 1));
  transform-origin: left center;
  transition: opacity .16s, filter .18s;
  will-change: transform, opacity;
}
.space-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.space-label.visible { opacity: var(--label-opacity, .8); }
.space-label span {
  color: #6e848b;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.space-label strong {
  overflow: hidden;
  color: #dfe8e7;
  font: 700 10px/1.35 "Avenir Next", "Noto Sans CJK SC", sans-serif;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 9px #01050a, 0 0 14px #01050a;
}
.space-label-map {
  min-width: 170px;
  padding: 11px 14px 11px 24px;
  border: 1px solid rgba(93,242,194,.2);
  border-radius: 4px 16px 4px 16px;
  background: rgba(2,10,15,.68);
  color: var(--mint);
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 0 24px rgba(93,242,194,.035);
  backdrop-filter: blur(9px);
}
.space-label-map::before { left: 9px; }
.space-label-map span { color: var(--mint); }
.space-label-map strong {
  color: var(--ink);
  font-family: "Iowan Old Style", "Noto Serif CJK SC", serif;
  font-size: 15px;
  font-weight: 500;
}
.space-label-research_line { color: var(--violet); }
.space-label-research_line strong { font-size: 11px; }
.space-label-paper { color: var(--cyan); }
.space-label-paper strong { max-width: 205px; color: #bcdde6; font-size: 8px; }
.space-label.selected {
  z-index: 2;
  filter: brightness(1.35);
}
.space-label.selected strong { color: #fff; }

.cosmic-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 23%, rgba(31, 142, 174, .13), transparent 29rem),
    radial-gradient(circle at 22% 78%, rgba(174, 140, 255, .09), transparent 32rem),
    linear-gradient(145deg, #01050a, #03111a 58%, #01050a);
}
.cosmic-field::before {
  content: "";
  position: absolute;
  inset: -60%;
  opacity: .13;
  background-image: radial-gradient(rgba(255,255,255,.8) .55px, transparent .8px);
  background-size: 19px 19px;
  transform: rotate(13deg);
  animation: dust-drift 120s linear infinite;
}
.cosmic-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 35%, rgba(0,2,6,.78) 115%);
}
.cosmic-field i { position: absolute; border: 1px solid rgba(101,207,255,.06); border-radius: 50%; }
.cosmic-field i:nth-child(1) { width: 60vw; height: 60vw; left: 20vw; top: 8vh; }
.cosmic-field i:nth-child(2) { width: 38vw; height: 38vw; left: 31vw; top: 19vh; }
.cosmic-field i:nth-child(3) { width: 18vw; height: 18vw; left: 41vw; top: 31vh; }

.universe-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(18px, 3vw, 48px);
  border-bottom: 1px solid rgba(171,222,225,.09);
  background: linear-gradient(to bottom, rgba(1,5,10,.94), rgba(1,5,10,.22));
  backdrop-filter: blur(15px);
}
.universe-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-sigil {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(93,242,194,.42);
  border-radius: 50%;
  color: var(--mint);
  background: rgba(93,242,194,.06);
  font: 900 10px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  box-shadow: 0 0 35px rgba(93,242,194,.13), inset 0 0 25px rgba(93,242,194,.05);
}
.universe-brand > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.universe-brand strong { font: 800 12px/1 "Avenir Next", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.universe-brand small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.universe-header nav { display: flex; align-items: center; gap: 8px; }
.universe-header nav a, #language-toggle, .dimension-badge {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: .2s;
}
.dimension-badge {
  gap: 7px;
  border-color: rgba(174,140,255,.22);
  color: #bba7ff;
  background: rgba(174,140,255,.045);
  font: 800 8px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}
.dimension-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.universe-header nav a:hover, #language-toggle:hover { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,.035); }
#language-toggle { min-width: 48px; color: var(--mint); border-color: rgba(93,242,194,.22); }

.universe-intro {
  position: fixed;
  left: clamp(24px, 7vw, 110px);
  top: 50%;
  z-index: 12;
  width: min(640px, calc(100vw - 48px));
  transform: translateY(-49%);
  pointer-events: none;
  transition: opacity .85s, transform .85s, filter .85s;
}
.universe-intro.dismissed { opacity: 0; transform: translateY(-42%) scale(.96); filter: blur(9px); }
.universe-kicker { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--mint); font: 800 9px/1 ui-monospace, monospace; letter-spacing: .18em; }
.universe-kicker span { width: 38px; height: 1px; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.universe-intro h1 { margin: 25px 0 28px; font: 400 clamp(76px, 10vw, 156px)/.72 "Iowan Old Style", "Baskerville", "Songti SC", serif; letter-spacing: -.08em; }
.universe-intro h1 em { margin-left: .36em; color: transparent; font-weight: 400; -webkit-text-stroke: 1px rgba(93,242,194,.8); text-shadow: 0 0 45px rgba(93,242,194,.2); }
.universe-intro > p:nth-of-type(2) { max-width: 580px; margin: 0; color: #9cafb3; font: 400 clamp(14px,1.25vw,18px)/1.85 "Iowan Old Style","Noto Serif CJK SC",serif; }
#enter-universe {
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 32px;
  padding: 14px 16px 14px 20px;
  border: 1px solid rgba(93,242,194,.4);
  border-radius: 20px 5px 20px 5px;
  color: #03100d;
  background: var(--mint);
  font-size: 11px;
  font-weight: 900;
  pointer-events: auto;
  box-shadow: 0 18px 50px rgba(26,191,141,.18);
  transition: transform .2s, box-shadow .2s;
}
#enter-universe:hover { transform: translateY(-3px); box-shadow: 0 22px 60px rgba(26,191,141,.28); }
#enter-universe i { font-size: 21px; font-style: normal; }
.intro-coordinates { display: flex; gap: 22px; margin-top: 22px; color: #43585e; font: 700 7px/1 ui-monospace,monospace; letter-spacing: .15em; }

.universe-console {
  position: fixed;
  left: clamp(14px, 2vw, 30px);
  top: 105px;
  z-index: 20;
  width: 282px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 28px 7px 28px 7px;
  background: var(--glass);
  box-shadow: 0 25px 70px rgba(0,0,0,.36);
  backdrop-filter: blur(22px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px);
  pointer-events: none;
  transition: opacity .45s .12s, transform .55s .12s, visibility .55s;
}
body.exploring.console-open .universe-console {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.console-toggle {
  position: fixed;
  left: clamp(14px, 2vw, 30px);
  top: 105px;
  z-index: 22;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 13px 4px 13px 4px;
  color: #8ca0a5;
  background: rgba(3,13,21,.86);
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(130%);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  transition: left .45s, opacity .4s .16s, transform .45s, color .2s, border-color .2s;
}
body.exploring .console-toggle {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body.console-open .console-toggle {
  left: calc(clamp(14px, 2vw, 30px) + 292px);
  color: var(--mint);
  border-color: rgba(93,242,194,.32);
}
.console-toggle:hover { color: var(--ink); border-color: rgba(93,242,194,.42); }
.console-toggle i {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(3,13,21,.9);
}
.console-toggle[aria-expanded="true"] i {
  background: var(--mint);
  box-shadow: 0 0 12px rgba(93,242,194,.58);
}
.console-label { display: flex; justify-content: space-between; color: var(--muted); font: 800 8px/1 ui-monospace,monospace; letter-spacing: .13em; }
.console-label b { color: var(--mint); font-weight: 800; }
.universe-search { position: relative; display: grid; grid-template-columns: 25px 1fr; align-items: center; margin: 18px 0 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px 4px 14px 4px; background: rgba(255,255,255,.025); }
.universe-search span { color: var(--mint); font-size: 18px; }
.universe-search input { min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.universe-search input::placeholder { color: #60767c; }
.search-results { max-height: 250px; overflow-y: auto; margin: 5px 0 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(1,7,13,.97); }
.search-results button { width: 100%; padding: 11px; border: 0; border-bottom: 1px solid var(--line); color: #b9c8ca; background: transparent; text-align: left; font-size: 9px; line-height: 1.4; }
.search-results button:hover { color: var(--ink); background: rgba(93,242,194,.07); }
.search-results button span { display: block; margin-bottom: 4px; color: var(--mint); font: 800 7px/1 ui-monospace,monospace; letter-spacing: .1em; }
.control-group, .navigation-guide { padding-top: 15px; margin-top: 15px; border-top: 1px solid var(--line); }
.control-group > span, .navigation-guide > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-row button, .console-actions button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px 3px 10px 3px;
  color: #687e84;
  background: rgba(255,255,255,.018);
  font-size: 8px;
  font-weight: 800;
}
.filter-row button i { width: 7px; height: 7px; border-radius: 50%; background: #52666a; }
.filter-row button[data-node-filter="paper"] i { background: var(--cyan); }
.filter-row button[data-node-filter="fact"] i { background: var(--mint); }
.filter-row button[data-node-filter="idea"] i { background: var(--amber); }
.filter-row button[data-node-filter="research_line"] i { background: var(--violet); }
.filter-row button.active { color: var(--ink); border-color: rgba(93,242,194,.28); background: rgba(93,242,194,.07); }
.navigation-guide div { display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 8px; padding: 4px 0; }
.navigation-guide b { color: #51666c; font: 800 7px/1 ui-monospace,monospace; }
.navigation-guide p { margin: 0; color: #86999e; font-size: 9px; }
.console-actions { display: flex; gap: 6px; margin-top: 16px; }
.console-actions button { flex: 1; justify-content: center; }
.console-actions button:hover { color: var(--mint); border-color: rgba(93,242,194,.35); }

.universe-stats {
  position: fixed;
  top: 105px;
  right: clamp(14px, 2vw, 30px);
  z-index: 18;
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px 24px 7px 24px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(-15px);
  transition: .65s .28s;
}
body.exploring .universe-stats { opacity: 1; transform: none; }
.universe-stats article { min-width: 76px; padding: 13px 15px; border-right: 1px solid var(--line); }
.universe-stats article:last-child { border-right: 0; }
.universe-stats strong { display: block; font: 400 25px/1 "Iowan Old Style",serif; }
.universe-stats span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .1em; }

.universe-reticle { position: fixed; left: 50%; top: 50%; z-index: 2; width: 60px; height: 60px; border: 1px solid rgba(93,242,194,.13); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; transition: .6s; }
body.exploring .universe-reticle { opacity: 1; }
.universe-reticle::before,.universe-reticle::after { content:""; position:absolute; left:50%; top:50%; background:rgba(93,242,194,.28); transform:translate(-50%,-50%); }
.universe-reticle::before { width: 84px; height: 1px; }.universe-reticle::after { width: 1px; height: 84px; }
.universe-reticle i { position:absolute; inset:10px; border:1px dashed rgba(93,242,194,.11); border-radius:50%; animation:spin 18s linear infinite; }
.universe-reticle span { position:absolute; left:50%; top:50%; width:4px; height:4px; border-radius:50%; background:var(--mint); transform:translate(-50%,-50%); box-shadow:0 0 14px var(--mint); }
.depth-axis { position: fixed; right: 24px; top: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #43575d; font: 700 7px/1 ui-monospace,monospace; opacity: 0; transition: .5s; pointer-events: none; }
body.exploring .depth-axis { opacity: 1; }
.depth-axis i { width: 1px; height: 34px; background: linear-gradient(transparent,rgba(93,242,194,.3),transparent); }
.depth-axis b { color: #6f858a; font-weight: 700; writing-mode: vertical-rl; letter-spacing: .14em; }

.hover-label {
  position: fixed;
  z-index: 40;
  max-width: 330px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px 3px 10px 3px;
  color: var(--ink);
  background: rgba(1,7,13,.9);
  box-shadow: 0 12px 35px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translate(14px, 14px);
  pointer-events: none;
  transition: opacity .15s;
}
.hover-label.visible { opacity: 1; }
.hover-label span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px currentColor; }
.hover-label strong { overflow: hidden; font-size: 9px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }

.relation-legend {
  position: fixed;
  left: 50%;
  bottom: 50px;
  z-index: 19;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(2,10,17,.8);
  backdrop-filter: blur(18px);
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: .65s .35s;
  scrollbar-width: none;
}
body.exploring .relation-legend { transform: translate(-50%, 0); opacity: 1; }
.relation-legend > span { padding: 0 10px; color: var(--muted); font: 800 7px/1 ui-monospace,monospace; letter-spacing: .13em; }
.relation-legend .today-signal {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: #fff5cb;
  border: 1px solid rgba(255,210,98,.28);
  border-radius: 999px;
  background: linear-gradient(110deg,rgba(255,196,95,.14),rgba(101,207,255,.08));
  box-shadow: inset 0 0 24px rgba(255,196,95,.05), 0 0 26px rgba(255,196,95,.08);
}
.today-signal i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff1a8;
  box-shadow: 0 0 7px #fff, 0 0 18px #ffc45f, 0 0 34px rgba(101,207,255,.8);
  animation: todaySignalPulse 1.8s ease-in-out infinite;
}
.today-signal b { font-size: 7px; letter-spacing: .12em; }
.today-signal em { color: var(--amber); font-style: normal; letter-spacing: .04em; }
@keyframes todaySignalPulse {
  50% { transform: scale(1.65); filter: brightness(1.45); }
}
.relation-legend button { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 0; border-radius: 999px; color: #62757a; background: transparent; font-size: 8px; font-weight: 800; }
.relation-legend button i { width: 16px; height: 1px; background: currentColor; }
.relation-legend button.active { color: var(--ink); background: rgba(255,255,255,.05); }
.relation-legend button[data-edge-filter="research_line"].active { color: var(--violet); }
.relation-legend button[data-edge-filter="supports"].active { color: var(--cyan); }
.relation-legend button[data-edge-filter="grounds"].active { color: var(--mint); }
.relation-legend button[data-edge-filter="inspires"].active { color: var(--amber); }
.relation-legend button[data-edge-group="novelty"].active { color: #8fa7ff; }
.relation-legend button[data-edge-filter="shared_context"].active { color: var(--coral); }

.node-inspector {
  position: fixed;
  top: 94px;
  right: 18px;
  bottom: 46px;
  z-index: 25;
  width: min(410px, calc(100vw - 36px));
  padding: 30px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 36px 8px 36px 8px;
  background: rgba(3,13,21,.94);
  box-shadow: -25px 0 90px rgba(0,0,0,.46);
  backdrop-filter: blur(26px) saturate(140%);
  transform: translateX(calc(100% + 35px));
  transition: transform .48s cubic-bezier(.2,.8,.2,1);
}
.node-inspector.open { transform: none; }
.inspector-close { position: absolute; right: 18px; top: 17px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 20px; }
.inspector-type { color: var(--mint); font: 900 8px/1 ui-monospace,monospace; letter-spacing: .18em; }
.node-inspector h2 { margin: 23px 0 18px; font: 400 clamp(29px,3vw,42px)/1.06 "Iowan Old Style","Noto Serif CJK SC",serif; letter-spacing: -.035em; }
.inspector-private { position: relative; }
.inspector-private-content > p { margin: 0; color: #a9bbbf; font: 400 14px/1.8 "Iowan Old Style","Noto Serif CJK SC",serif; }
.inspector-login-gate {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(93,242,194,.24);
  border-radius: 19px 5px 19px 5px;
  background:
    radial-gradient(circle at 92% 8%,rgba(101,207,255,.15),transparent 38%),
    linear-gradient(135deg,rgba(93,242,194,.09),rgba(174,140,255,.055));
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.inspector-login-gate[hidden] { display: none; }
.inspector-login-gate > span { color: var(--mint); font: 900 7px/1 ui-monospace,monospace; letter-spacing: .16em; }
.inspector-login-gate h3 { margin: 0; font: 500 18px/1.25 "Iowan Old Style","Noto Serif CJK SC",serif; }
.inspector-login-gate p { margin: 0; color: #8fa5aa; font-size: 10px; line-height: 1.65; }
.inspector-login-gate a {
  min-height: 43px;
  display: grid;
  place-items: center;
  margin-top: 4px;
  border: 1px solid var(--mint);
  border-radius: 13px 4px 13px 4px;
  color: #03110e;
  background: linear-gradient(135deg,#82f8d1,#5df2c2 56%,#65cfff);
  box-shadow: 0 0 32px rgba(93,242,194,.18);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .04em;
  text-decoration: none;
}
.inspector-private.locked .inspector-private-content {
  max-height: 430px;
  overflow: hidden;
  opacity: .5;
  filter: blur(9px) saturate(65%);
  transform: translateZ(0);
  pointer-events: none;
  user-select: none;
}
.inspector-private.locked .inspector-private-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 30%,rgba(3,13,21,.5) 72%,rgba(3,13,21,.96));
}
.inspector-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 23px; }
.inspector-metrics span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; }
.inspector-metrics b { color: var(--ink); }
.inspector-rule { display: flex; align-items: center; gap: 13px; margin: 29px 0 14px; color: var(--amber); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.inspector-rule i { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(255,196,95,.3),transparent); }
.inspector-relations { display: grid; gap: 8px; }
.relation-card { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 15px 4px 15px 4px; color: inherit; background: rgba(255,255,255,.018); text-align: left; }
.relation-card:hover { border-color: rgba(93,242,194,.3); background: rgba(93,242,194,.04); }
.relation-card header { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font: 800 7px/1 ui-monospace,monospace; letter-spacing: .08em; }
.relation-card h3 { margin: 10px 0 8px; font: 500 14px/1.35 "Iowan Old Style","Noto Serif CJK SC",serif; }
.relation-card p { margin: 0; color: #82979c; font-size: 9px; line-height: 1.55; }
.inspector-actions { position: sticky; bottom: -30px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 26px -30px -30px; padding: 16px 30px 30px; background: linear-gradient(transparent,rgba(3,13,21,.99) 28%); }
.inspector-actions button,.inspector-actions a { min-height: 42px; display: grid; place-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 13px 4px 13px 4px; color: var(--ink); background: rgba(255,255,255,.035); font-size: 9px; font-weight: 900; text-decoration: none; text-align: center; }
.inspector-actions a { color: #03110e; border-color: var(--mint); background: var(--mint); }

.universe-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  height: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(18px,3vw,48px);
  border-top: 1px solid rgba(171,222,225,.08);
  color: #536970;
  background: rgba(1,5,10,.78);
  font: 700 7px/1 ui-monospace,monospace;
  letter-spacing: .1em;
  backdrop-filter: blur(12px);
}
.universe-footer > span { display: flex; align-items: center; gap: 8px; }
.universe-footer > span i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.universe-footer p { margin: 0; text-align: center; }
.universe-footer time { text-align: right; }

.universe-loading { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; gap: 18px; color: var(--muted); background: #01050a; text-align: center; transition: opacity .8s, visibility .8s; }
.universe-loading.ready { opacity: 0; visibility: hidden; }
.universe-loading span { width: 70px; height: 70px; margin: auto; border: 1px solid rgba(93,242,194,.13); border-top-color: var(--mint); border-radius: 50%; animation: spin 1.3s linear infinite; box-shadow: inset 0 0 35px rgba(93,242,194,.07); }
.universe-loading p { max-width: 460px; margin: 0; padding: 0 24px; font-size: 9px; font-weight: 800; line-height: 1.7; letter-spacing: .12em; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dust-drift { to { transform: rotate(13deg) translate3d(220px,120px,0); } }

@media (max-width: 900px) {
  .dimension-badge { display: none; }
  .universe-header nav a:first-of-type { display: none; }
  .universe-console { top: auto; left: 12px; right: 12px; bottom: 42px; width: auto; max-height: 45vh; overflow-y: auto; border-radius: 22px 6px 22px 6px; transform: translateY(30px); }
  body.exploring.console-open .universe-console { transform: none; }
  .console-toggle,
  body.console-open .console-toggle {
    left: auto;
    right: 12px;
    top: 146px;
  }
  .universe-stats { top: 94px; left: 12px; right: auto; }
  .relation-legend { bottom: 50px; max-width: calc(100vw - 24px); }
  body.console-open .relation-legend { bottom: calc(45vh + 54px); }
  .node-inspector { top: 86px; right: 10px; bottom: 40px; width: calc(100vw - 20px); }
  .universe-reticle, .depth-axis { display: none; }
  .space-label { max-width: 170px; }
  .space-label-research_line strong { font-size: 9px; }
}

@media (max-width: 600px) {
  .universe-header { height: 70px; padding: 11px 14px; }
  .universe-brand small { display: none; }
  .universe-brand strong { font-size: 10px; }
  .brand-sigil { width: 38px; height: 38px; }
  .universe-header nav a { display: none; }
  .universe-intro { left: 22px; top: 47%; width: calc(100vw - 44px); }
  .universe-intro h1 { font-size: clamp(72px,25vw,105px); }
  .universe-intro > p:nth-of-type(2) { font-size: 14px; line-height: 1.75; }
  .universe-kicker { font-size: 7px; letter-spacing: .1em; }
  .intro-coordinates { gap: 12px; }
  .universe-stats { top: 80px; width: calc(100vw - 24px); }
  .console-toggle,
  body.console-open .console-toggle { top: 133px; }
  .universe-stats article { flex: 1; min-width: 0; padding: 11px 10px; }
  .universe-stats strong { font-size: 20px; }
  .relation-legend > span:not(.today-signal) { display: none; }
  .relation-legend .today-signal { padding-inline: 9px; }
  .today-signal b { display: none; }
  .relation-legend button { padding-inline: 8px; }
  .relation-legend button span { display: none; }
  .relation-legend button i { width: 24px; }
  .universe-footer { grid-template-columns: 1fr auto; }
  .universe-footer p { display: none; }
  .node-inspector { padding: 24px; border-radius: 26px 7px 26px 7px; }
  .node-inspector h2 { font-size: 33px; }
  .inspector-actions { margin-inline: -24px; padding-inline: 24px; }
  .hover-label { max-width: calc(100vw - 30px); }
  .space-label { min-width: 84px; padding-left: 11px; }
  .space-label::before { width: 7px; }
  .space-label span { display: none; }
  .space-label strong { max-width: 132px; font-size: 8px; }
  .space-label-map { min-width: 138px; padding: 8px 11px 8px 18px; }
  .space-label-map strong { max-width: 150px; font-size: 12px; }
}

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