:root {
  color-scheme: dark;
  --bg: #101714;
  --bg-deep: #0b110f;
  --surface: #171f1b;
  --surface-2: #202823;
  --line: rgba(231, 226, 211, 0.16);
  --line-strong: rgba(231, 226, 211, 0.3);
  --paper: #f1ede3;
  --muted: #a8ada5;
  --faint: #747d76;
  --accent: #d7b648;
  --simple: #d3b54c;
  --oxide: #c87561;
  --acid: #7394a1;
  --base: #75947d;
  --salt: #a49b8b;
  --other: #98798b;
  --ion: #d6d0c0;
  --danger: #db7a67;
  --header-height: 72px;
  --layout: min(1440px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--paper);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  min-height: var(--header-height);
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 23, 20, 0.94);
  backdrop-filter: blur(14px);
}
.site-header.overlay { position: absolute; inset: 0 0 auto; background: rgba(11, 17, 15, 0.78); }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { position: relative; width: 27px; height: 27px; flex: 0 0 27px; }
.brand-mark i { position: absolute; width: 9px; height: 9px; border: 1.5px solid #0c100e; border-radius: 50%; }
.brand-mark i:nth-child(1) { left: 2px; top: 1px; background: #d46f59; }
.brand-mark i:nth-child(2) { right: 1px; top: 8px; background: #73a08a; }
.brand-mark i:nth-child(3) { left: 3px; bottom: 0; background: #d7b648; }
.brand strong { display: block; font-size: 15px; line-height: 1.1; }
.brand small { display: block; margin-top: 5px; color: var(--faint); font: 500 8px/1 "DM Mono", Consolas, monospace; letter-spacing: 0.08em; }
.site-header nav { display: flex; align-items: stretch; height: var(--header-height); }
.site-header nav a { position: relative; display: grid; place-items: center; padding: 0 20px; color: var(--muted); font-size: 13px; font-weight: 600; }
.site-header nav a:hover, .site-header nav a.active { color: var(--paper); }
.site-header nav a.active::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 3px; background: var(--oxide); }
.header-tools { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.profile-button, .icon-button, .mode-switch a, .mode-switch button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.profile-button { padding: 0 16px; font-size: 12px; font-weight: 700; }
.profile-button:hover, .icon-button:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.04); }
.mode-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mode-switch a, .mode-switch button { display: grid; place-items: center; min-width: 86px; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.mode-switch > :last-child { border-right: 0; }
.mode-switch .active { background: var(--paper); color: #18201c; }

.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--layout);
  margin: 0 auto;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}
.page-footer a:hover { color: var(--paper); }

/* Mode selector */
.selector-main { min-height: calc(100vh - var(--header-height)); }
.selector-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  width: var(--layout);
  margin: 0 auto;
  padding: clamp(54px, 8vh, 100px) 0 42px;
}
.eyebrow { margin: 0 0 16px; color: var(--accent); font: 500 12px/1 "DM Mono", Consolas, monospace; text-transform: uppercase; }
.selector-intro h1 { margin: 0; max-width: 760px; font-size: clamp(44px, 6vw, 88px); line-height: 1.04; font-weight: 900; }
.selector-intro > p { max-width: 340px; margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; width: var(--layout); margin: 0 auto 80px; border: 1px solid var(--line); }
.mode-entry { position: relative; min-height: 520px; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
.mode-entry:last-child { border-right: 0; }
.mode-entry:hover .mode-arrow { transform: translateX(5px); }
.mode-entry:hover .mode-preview { transform: scale(1.015); }
.mode-copy { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 520px; padding: 38px; }
.mode-index { color: var(--accent); font: 500 12px/1 "DM Mono", Consolas, monospace; }
.mode-copy h2 { margin: auto 0 14px; font-size: clamp(34px, 4vw, 58px); line-height: 1.08; }
.mode-copy p { max-width: 480px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.mode-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: var(--faint); font: 500 11px/1.5 "DM Mono", Consolas, monospace; }
.mode-arrow { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 13px; font-weight: 800; transition: transform 180ms ease; }
.mode-preview { position: absolute; inset: 0; opacity: 0.7; transition: transform 400ms ease; pointer-events: none; }
.preview-orbit span { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #17201b; font: 700 12px/1 "DM Mono", Consolas, monospace; box-shadow: 0 18px 38px rgba(0,0,0,0.3); }
.preview-orbit span:nth-child(1) { width: 92px; height: 92px; right: 14%; top: 13%; background: var(--oxide); }
.preview-orbit span:nth-child(2) { width: 66px; height: 66px; right: 34%; top: 30%; background: var(--salt); }
.preview-orbit span:nth-child(3) { width: 116px; height: 116px; right: 8%; top: 42%; background: var(--acid); }
.preview-orbit span:nth-child(4) { width: 54px; height: 54px; right: 39%; top: 56%; background: var(--simple); }
.preview-orbit span:nth-child(5) { width: 74px; height: 74px; right: 19%; top: 72%; background: var(--base); }
.preview-clusters { opacity: 0.85; }
.preview-clusters i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--salt); box-shadow: 18px -13px 0 var(--oxide), -15px 18px 0 var(--base), 30px 17px 0 var(--acid), -28px -8px 0 var(--simple); }
.preview-clusters i:nth-child(1) { right: 22%; top: 18%; }
.preview-clusters i:nth-child(2) { right: 48%; top: 32%; }
.preview-clusters i:nth-child(3) { right: 20%; top: 48%; }
.preview-clusters i:nth-child(4) { right: 45%; top: 61%; }
.preview-clusters i:nth-child(5) { right: 16%; top: 76%; }
.preview-clusters i:nth-child(6) { right: 60%; top: 79%; }

/* Three-dimensional modes */
.universe-page { overflow: hidden; background: var(--bg-deep); }
.universe-shell { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.universe-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.space-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23f1ede3'%3E%3Ccircle cx='8' cy='17' r='.7'/%3E%3Ccircle cx='44' cy='71' r='.5'/%3E%3Ccircle cx='112' cy='24' r='.6'/%3E%3Ccircle cx='129' cy='101' r='.8'/%3E%3Ccircle cx='76' cy='121' r='.5'/%3E%3C/g%3E%3C/svg%3E"); }
.space-toolbar { position: absolute; z-index: 12; top: 94px; left: 28px; display: flex; align-items: center; gap: 12px; }
.space-search { position: relative; width: min(390px, calc(100vw - 56px)); }
.space-search label { position: absolute; left: 16px; top: -7px; padding: 0 6px; background: var(--bg-deep); color: var(--faint); font: 500 9px/1 "DM Mono", Consolas, monospace; text-transform: uppercase; }
.space-search-row { display: grid; grid-template-columns: 1fr 44px; height: 48px; border: 1px solid var(--line-strong); background: rgba(11,17,15,0.82); backdrop-filter: blur(10px); }
.space-search input { min-width: 0; border: 0; outline: 0; padding: 0 16px; background: transparent; color: var(--paper); font: 600 14px/1 "DM Mono", Consolas, monospace; }
.space-search button { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; }
.space-search button:hover { background: rgba(255,255,255,0.06); }
.space-search .search-message { min-height: 18px; margin: 8px 0 0; color: var(--danger); font-size: 11px; }
.space-title { position: absolute; z-index: 8; left: 30px; bottom: 28px; max-width: 470px; pointer-events: none; }
.space-title .eyebrow { margin-bottom: 12px; }
.space-title h1 { margin: 0; font-size: clamp(32px, 4vw, 58px); line-height: 1.05; }
.space-title p { margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.space-status { position: absolute; z-index: 8; right: 28px; bottom: 28px; display: flex; gap: 22px; color: var(--muted); font: 500 11px/1 "DM Mono", Consolas, monospace; }
.legend { position: absolute; z-index: 8; right: 28px; top: 94px; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); background: rgba(11,17,15,0.72); backdrop-filter: blur(10px); }
.legend span { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--legend-color); }
.selection-panel { position: absolute; z-index: 14; right: 28px; bottom: 72px; width: min(330px, calc(100vw - 56px)); padding: 18px; border: 1px solid var(--line-strong); background: rgba(23,31,27,0.94); backdrop-filter: blur(12px); }
.selection-panel .selection-kind { color: var(--accent); font: 500 10px/1 "DM Mono", Consolas, monospace; }
.selection-panel h2 { margin: 9px 0 4px; font-size: 25px; }
.selection-panel p { margin: 0; color: var(--muted); font-size: 12px; }
.selection-panel a { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.selection-panel a:hover { color: var(--accent); }
.space-tooltip { position: fixed; z-index: 40; pointer-events: none; transform: translate(14px, 14px); padding: 8px 10px; border: 1px solid var(--line); background: #161d19; color: var(--paper); font-size: 11px; opacity: 0; transition: opacity 100ms ease; }
.space-tooltip.show { opacity: 1; }
.cluster-rail { position: absolute; z-index: 10; left: 28px; top: 162px; display: grid; width: 210px; border: 1px solid var(--line); background: rgba(11,17,15,0.74); backdrop-filter: blur(10px); }
.cluster-rail button { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 46px; border: 0; border-bottom: 1px solid var(--line); padding: 0 12px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.cluster-rail button:last-child { border-bottom: 0; }
.cluster-rail button:hover, .cluster-rail button.active { background: rgba(255,255,255,0.05); color: var(--paper); }
.cluster-rail button span { color: var(--accent); font: 500 10px/1 "DM Mono", Consolas, monospace; }
.cluster-rail button b { font-size: 11px; font-weight: 500; }
.cluster-rail button em { color: var(--faint); font: normal 10px/1 "DM Mono", Consolas, monospace; }
.cluster-back { position: absolute; z-index: 12; left: 254px; top: 162px; min-height: 40px; border: 1px solid var(--line); padding: 0 14px; background: rgba(11,17,15,0.74); cursor: pointer; }
.cluster-back:hover { border-color: var(--line-strong); }
.webgl-error { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 8px; background: var(--bg-deep); text-align: center; }
.webgl-error strong { font-size: 24px; }
.webgl-error span { color: var(--muted); }

/* Shared two-dimensional detail */
.detail-body { background: #e9e4d8; color: #19201c; }
.detail-body .site-header { position: sticky; top: 0; background: rgba(242,238,228,0.96); color: #19201c; --paper: #19201c; --muted: #5e675f; --faint: #7a817b; --line: rgba(25,32,28,0.15); --line-strong: rgba(25,32,28,0.3); }
.detail-body .mode-switch .active { color: #f3efe5; }
.detail-main { width: min(1560px, calc(100vw - 48px)); margin: 0 auto; padding: 42px 0 90px; }
.detail-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 28px; padding-bottom: 30px; border-bottom: 1px solid rgba(25,32,28,0.2); }
.detail-back { width: max-content; color: #5b655e; font-size: 12px; font-weight: 700; }
.detail-back:hover { color: #19201c; }
.detail-heading { text-align: center; }
.detail-heading .eyebrow { color: #9b7d1e; }
.detail-heading h1 { margin: 0; font-size: clamp(42px, 6vw, 78px); line-height: 1; }
.detail-heading p { margin: 12px 0 0; color: #687169; font-size: 13px; }
.detail-summary { justify-self: end; display: flex; gap: 28px; color: #626c64; font: 500 11px/1.5 "DM Mono", Consolas, monospace; }
.mobile-perspective-tabs { display: none; }
.perspective-grid { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid rgba(25,32,28,0.18); border-right: 1px solid rgba(25,32,28,0.18); }
.perspective { min-width: 0; border-right: 1px solid rgba(25,32,28,0.18); }
.perspective:last-child { border-right: 0; }
.perspective-head { min-height: 118px; padding: 30px; border-bottom: 1px solid rgba(25,32,28,0.18); }
.perspective-number { color: #9b7d1e; font: 500 10px/1 "DM Mono", Consolas, monospace; }
.perspective-head h2 { margin: 12px 0 5px; font-size: 25px; }
.perspective-head p { margin: 0; color: #687169; font-size: 13px; }
.relation-stage { position: relative; height: clamp(440px, 54vw, 650px); overflow: hidden; background: #f0ece2; }
.relation-stage svg { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.relation-node-layer { position: absolute; inset: 0; }
.relation-node { position: absolute; z-index: 3; display: grid; place-items: center; width: var(--size); height: var(--size); transform: translate(-50%, -50%); border: 1px solid rgba(25,32,28,0.38); border-radius: 50%; background: var(--node-color, #aaa); color: #17201b; box-shadow: 0 11px 24px rgba(25,32,28,0.12); cursor: pointer; }
.relation-node:hover, .relation-node:focus-visible { z-index: 5; outline: 3px solid rgba(155,125,30,0.3); }
.relation-node.center { border-width: 2px; box-shadow: 0 14px 32px rgba(25,32,28,0.18); }
.relation-node.ion { border: 2px solid #4e5c53; background: #f0ece2; color: #26312b; box-shadow: none; }
.relation-node.auxiliary { border-style: dashed; background: #d7d3c8; }
.relation-node .formula { max-width: 90%; font: 700 clamp(11px, 1.15vw, 16px)/1.1 "DM Mono", Consolas, monospace; text-align: center; overflow-wrap: anywhere; }
.relation-node .node-kind { position: absolute; top: calc(100% + 7px); width: max-content; max-width: 120px; color: #777f78; font-size: 9px; }
.relation-edge { fill: none; stroke: #6b756e; stroke-width: 1.5; opacity: 0.72; pointer-events: none; }
.relation-edge-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.relation-edge-hotspot { fill: transparent; stroke: none; cursor: pointer; pointer-events: all; }
.relation-edge-hotspot:focus-visible { fill: rgba(155,125,30,0.18); outline: none; }
.relation-edge.active { stroke: #9b7d1e; stroke-width: 3; opacity: 1; }
.edge-count { pointer-events: none; }
.edge-count circle { fill: #19201c; }
.edge-count text { fill: #f4efe4; font: 700 10px/1 "DM Mono", Consolas, monospace; text-anchor: middle; dominant-baseline: central; }
.equation-list { min-height: 420px; padding: 30px; border-top: 1px solid rgba(25,32,28,0.18); background: #e9e4d8; }
.equation-list-title { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 24px; }
.equation-list-title h3 { margin: 0; font-size: 21px; }
.equation-list-title span { color: #747d76; font: 500 10px/1 "DM Mono", Consolas, monospace; }
.edge-equations { scroll-margin-top: 96px; margin-bottom: 34px; padding-top: 2px; }
.edge-equations.highlight { animation: group-highlight 1.6s ease; }
@keyframes group-highlight { 0%, 35% { background: rgba(215,182,72,0.18); } 100% { background: transparent; } }
.edge-equations h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; }
.edge-equations h4 span { color: #9b7d1e; }
.equation-card { margin-bottom: 10px; border: 1px solid rgba(25,32,28,0.17); background: #f3efe5; }
.equation-card:last-child { margin-bottom: 0; }
.equation-render { min-height: 72px; display: grid; place-items: center; overflow-x: auto; padding: 17px 14px; border-bottom: 1px solid rgba(25,32,28,0.12); font-size: 15px; }
.equation-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }
.equation-meta-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px; min-height: 42px; align-items: center; padding: 8px 12px; border-right: 1px solid rgba(25,32,28,0.1); border-bottom: 1px solid rgba(25,32,28,0.1); }
.equation-meta-row:nth-child(even) { border-right: 0; }
.equation-meta-row b { color: #8a7130; font-size: 10px; }
.equation-meta-row span { color: #59625b; font-size: 11px; line-height: 1.55; }
.equation-source { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 11px 12px; color: #6b746c; font-size: 10px; }
.equation-source a { flex: 0 0 auto; color: #715c19; font-weight: 800; }
.equation-source a:hover { text-decoration: underline; }
.empty-perspective { display: grid; place-content: center; height: 100%; padding: 30px; color: #7c847e; text-align: center; }
.empty-perspective strong { color: #313b35; font-size: 18px; }
.empty-perspective p { max-width: 300px; font-size: 12px; line-height: 1.7; }

.category-simple { --node-color: var(--simple); }
.category-oxide { --node-color: var(--oxide); }
.category-acid { --node-color: var(--acid); }
.category-base { --node-color: var(--base); }
.category-salt { --node-color: var(--salt); }
.category-other { --node-color: var(--other); }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); transform: translateY(18px); padding: 12px 14px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--paper); font-size: 12px; opacity: 0; pointer-events: none; transition: 180ms ease; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1100px) {
  :root { --layout: calc(100vw - 40px); }
  .site-header { grid-template-columns: 1fr auto; padding: 0 20px; }
  .site-header nav { display: none; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-entry { border-right: 0; border-bottom: 1px solid var(--line); }
  .mode-entry:last-child { border-bottom: 0; }
  .selector-intro { grid-template-columns: 1fr; }
  .selector-intro > p { max-width: 680px; }
  .legend { display: none; }
  .space-title { max-width: 380px; }
  .cluster-rail { width: 180px; }
  .cluster-back { left: 224px; }
  .detail-top { grid-template-columns: 1fr auto; }
  .detail-heading { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .detail-back { grid-row: 2; }
  .detail-summary { grid-row: 2; }
  .relation-stage { height: 560px; }
}

@media (max-width: 760px) {
  :root { --header-height: 62px; --layout: calc(100vw - 28px); }
  .site-header { min-height: var(--header-height); padding: 0 14px; }
  .brand small { display: none; }
  .profile-button { display: none; }
  .header-tools .mode-switch a { min-width: 58px; padding: 0 8px; font-size: 10px; }
  .selector-intro { padding-top: 44px; gap: 20px; }
  .selector-intro h1 { font-size: 43px; }
  .selector-intro > p { font-size: 14px; }
  .mode-entry, .mode-copy { min-height: 430px; }
  .mode-copy { padding: 24px; }
  .mode-copy h2 { font-size: 38px; }
  .page-footer { align-items: flex-start; gap: 20px; }
  .space-toolbar { top: 78px; left: 14px; }
  .space-search { width: calc(100vw - 28px); }
  .space-title { left: 16px; right: 16px; bottom: 20px; }
  .space-title h1 { font-size: 30px; }
  .space-title p { display: none; }
  .space-status { right: 16px; bottom: 102px; gap: 12px; }
  .space-status span:nth-child(2) { display: none; }
  .selection-panel { right: 14px; bottom: 70px; width: calc(100vw - 28px); }
  .cluster-rail { top: 144px; left: 14px; right: 14px; display: flex; width: auto; overflow-x: auto; }
  .cluster-rail button { flex: 0 0 auto; grid-template-columns: 24px 1fr; min-width: 120px; border-right: 1px solid var(--line); border-bottom: 0; }
  .cluster-rail button em { display: none; }
  .cluster-back { top: 198px; left: 14px; }
  .detail-main { width: calc(100vw - 24px); padding-top: 28px; }
  .detail-top { grid-template-columns: 1fr; align-items: start; }
  .detail-heading { text-align: center; }
  .detail-heading h1 { font-size: 44px; overflow-wrap: anywhere; }
  .detail-back { grid-row: auto; }
  .detail-summary { grid-row: auto; justify-self: start; }
  .mobile-perspective-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border: 1px solid rgba(25,32,28,0.2); }
  .mobile-perspective-tabs button { min-height: 44px; border: 0; border-right: 1px solid rgba(25,32,28,0.2); background: transparent; color: #687169; }
  .mobile-perspective-tabs button:last-child { border-right: 0; }
  .mobile-perspective-tabs button.active { background: #19201c; color: #f3efe5; }
  .perspective-grid { display: block; border-top: 0; }
  .perspective { display: none; border-right: 0; }
  .perspective.mobile-active { display: block; }
  .relation-stage { height: 540px; }
  .perspective-head, .equation-list { padding: 22px 16px; }
  .equation-card-meta { grid-template-columns: 1fr; }
  .equation-meta-row, .equation-meta-row:nth-child(even) { border-right: 0; }
  .equation-render { font-size: 13px; }
}

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

/* Final topic surfaces */
.header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 800;
  transition: background 160ms ease, border-color 160ms ease;
}
.header-back:hover { border-color: var(--accent); background: rgba(215, 182, 72, 0.08); }

/* Transformation double entry */
.selector-intro > div > span,
.key-heading > span,
.relation-title-block > a,
.space-selection > span {
  color: var(--accent);
  font: 500 11px/1 "DM Mono", Consolas, monospace;
}
.mode-list {
  width: var(--layout);
  margin: 0 auto 88px;
  border-top: 1px solid var(--line-strong);
}
.mode-list .mode-entry {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(300px, .86fr) minmax(360px, 1.14fr) 138px;
  align-items: stretch;
  min-height: 360px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.mode-list .mode-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.028);
  opacity: 0;
  transition: opacity 180ms ease;
}
.mode-list .mode-entry:hover::before { opacity: 1; }
.mode-list .mode-number {
  z-index: 2;
  padding-top: 30px;
  color: var(--accent);
  font: 500 12px/1 "DM Mono", Consolas, monospace;
}
.mode-list .mode-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #111a16;
}
.mode-list .mode-copy {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
  padding: 42px clamp(30px, 4vw, 64px);
}
.mode-list .mode-copy > span { color: var(--faint); font-size: 12px; font-weight: 800; }
.mode-list .mode-copy h2 { margin: 14px 0 16px; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; }
.mode-list .mode-copy p { max-width: 650px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.mode-list .mode-copy ul { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--faint); font: 500 11px/1.4 "DM Mono", Consolas, monospace; }
.mode-list .mode-copy li::before { content: "·"; margin-right: 7px; color: var(--accent); }
.mode-list .mode-open {
  z-index: 2;
  align-self: center;
  justify-self: end;
  font-size: 13px;
  transition: transform 180ms ease, color 180ms ease;
}
.mode-list .mode-entry:hover .mode-open { transform: translateX(5px); color: var(--accent); }
.mode-visual i,
.mode-visual span { position: absolute; display: grid; place-items: center; border-radius: 50%; }
.mode-all .mode-visual i { box-shadow: 0 18px 42px rgba(0, 0, 0, .34); }
.mode-all .mode-visual i:nth-child(1) { width: 124px; height: 124px; left: 18%; top: 18%; background: #c77160; }
.mode-all .mode-visual i:nth-child(2) { width: 72px; height: 72px; right: 13%; top: 13%; background: #7397a1; }
.mode-all .mode-visual i:nth-child(3) { width: 54px; height: 54px; left: 17%; bottom: 13%; background: #d4b748; }
.mode-all .mode-visual i:nth-child(4) { width: 88px; height: 88px; right: 24%; bottom: 17%; background: #78977e; }
.mode-all .mode-visual i:nth-child(5) { width: 34px; height: 34px; left: 52%; top: 47%; background: #a99d8d; }
.mode-all .mode-visual span { z-index: 2; color: #f4efe5; font: 800 13px/1 "DM Mono", Consolas, monospace; text-shadow: 0 1px 5px rgba(0,0,0,.72); }
.mode-all .mode-visual span:nth-of-type(1) { left: 27%; top: 33%; }
.mode-all .mode-visual span:nth-of-type(2) { right: 27%; bottom: 29%; }
.mode-all .mode-visual span:nth-of-type(3) { right: 12%; top: 28%; }
.state-preview { background: #e8e2d6 !important; color: #1a211d; }
.state-preview::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: rgba(25,32,28,.28); }
.state-preview strong { position: absolute; top: 28px; color: #8e7124; font: 700 15px/1 "DM Mono", Consolas, monospace; }
.state-preview strong:nth-child(1) { left: 9%; }
.state-preview strong:nth-child(2) { left: 37%; }
.state-preview strong:nth-child(3) { left: 62%; }
.state-preview strong:nth-child(4) { right: 8%; }
.state-preview span { position: absolute; top: calc(50% - 34px); width: 68px; height: 68px; border: 1px solid rgba(25,32,28,.36); color: #18201c; font: 800 13px/1 "DM Mono", Consolas, monospace; box-shadow: 0 10px 24px rgba(25,32,28,.12); }
.state-preview span:nth-of-type(1) { left: 5%; background: #75947d; }
.state-preview span:nth-of-type(2) { left: 30%; background: #d3b54c; }
.state-preview span:nth-of-type(3) { left: 57%; background: #c87561; }
.state-preview span:nth-of-type(4) { right: 4%; background: #7394a1; }

/* All-material galaxy */
.galaxy-label-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.galaxy-label {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 32px;
  transform-origin: center;
  border: 1px solid rgba(241,237,227,.24);
  border-radius: 3px;
  padding: 0 11px;
  background: rgba(11,17,15,.76);
  color: #f1ede3;
  font-size: 11px;
  font-weight: 800;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.galaxy-label:hover { border-color: var(--accent); color: var(--accent); }
.space-search-panel {
  position: absolute;
  z-index: 15;
  top: 94px;
  left: 28px;
  width: min(390px, calc(100vw - 56px));
}
#space-search { position: relative; }
#space-search > label { position: absolute; z-index: 2; left: 13px; top: -6px; padding: 0 6px; background: var(--bg-deep); color: var(--faint); font-size: 9px; font-weight: 800; }
#space-search > div { display: grid; grid-template-columns: 1fr 46px; min-height: 48px; border: 1px solid var(--line-strong); background: rgba(11,17,15,.86); backdrop-filter: blur(12px); }
#space-search input { min-width: 0; border: 0; outline: 0; padding: 0 16px; background: transparent; color: var(--paper); font: 700 15px/1 "DM Mono", Consolas, monospace; }
#space-search button { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; }
#space-search button:hover { background: rgba(255,255,255,.06); }
#search-message { min-height: 16px; margin: 7px 0 0; color: #d9c780; font-size: 11px; }
.search-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.search-targets button { min-height: 30px; border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; background: rgba(11,17,15,.82); color: var(--muted); font-size: 10px; cursor: pointer; }
.search-targets button:hover { border-color: var(--accent); color: var(--paper); }
.galaxy-rail {
  position: absolute;
  z-index: 14;
  top: 94px;
  right: 28px;
  display: grid;
  width: 158px;
  border: 1px solid var(--line);
  background: rgba(11,17,15,.76);
  backdrop-filter: blur(12px);
}
.galaxy-rail button { min-height: 36px; border: 0; border-bottom: 1px solid var(--line); padding: 0 12px; background: transparent; color: var(--muted); text-align: left; font-size: 10px; font-weight: 700; cursor: pointer; }
.galaxy-rail button:last-child { border-bottom: 0; }
.galaxy-rail button:hover,
.galaxy-rail button.active { background: rgba(215,182,72,.1); color: var(--paper); }
.galaxy-rail button.active { box-shadow: inset 3px 0 0 var(--accent); }
.space-heading { position: absolute; z-index: 9; left: 28px; bottom: 26px; max-width: 520px; pointer-events: none; }
.space-heading h1 { margin: 0; font-size: clamp(36px, 4vw, 64px); line-height: 1.02; }
.space-heading p { margin: 12px 0 0; color: var(--muted); font: 500 11px/1.4 "DM Mono", Consolas, monospace; }
.space-selection { position: absolute; z-index: 16; right: 28px; bottom: 26px; width: min(330px, calc(100vw - 56px)); border: 1px solid var(--line-strong); padding: 18px; background: rgba(23,31,27,.94); backdrop-filter: blur(12px); }
.space-selection h2 { margin: 10px 0 6px; font: 900 31px/1.1 "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.space-selection p { margin: 0; color: var(--muted); font-size: 12px; }
.space-selection a { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.space-selection a:hover { color: var(--accent); }
.space-tooltip { display: grid; gap: 4px; }
.space-tooltip strong { font-size: 14px; }
.space-tooltip span { color: var(--muted); font-size: 9px; }

/* Key-material directory */
.key-main { width: var(--layout); margin: 0 auto; padding: clamp(54px, 8vh, 92px) 0 72px; }
.key-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px, 380px); gap: 28px; align-items: end; padding-bottom: 42px; border-bottom: 1px solid var(--line-strong); }
.key-heading > span { grid-column: 1 / -1; }
.key-heading h1 { margin: 0; font-size: clamp(46px, 6vw, 82px); line-height: 1.02; }
.key-heading p { margin: 0 0 7px; color: var(--muted); font-size: 16px; line-height: 1.7; }
#key-groups { border-bottom: 1px solid var(--line-strong); }
.key-group { display: grid; grid-template-columns: 210px 1fr; border-bottom: 1px solid var(--line); }
.key-group:last-child { border-bottom: 0; }
.key-group > header { padding: 34px 24px 34px 0; border-right: 1px solid var(--line); }
.key-group > header span { color: var(--accent); font: 500 10px/1 "DM Mono", Consolas, monospace; }
.key-group > header h2 { margin: 14px 0 0; font-size: 24px; }
.key-list { display: grid; }
.key-list a { display: grid; grid-template-columns: 46px 120px minmax(220px,1fr) 128px 28px; gap: 16px; align-items: center; min-height: 76px; padding: 0 22px; border-bottom: 1px solid var(--line); transition: background 160ms ease; }
.key-list a:last-child { border-bottom: 0; }
.key-list a:hover { background: rgba(255,255,255,.035); }
.key-list a::before { content: ""; width: 4px; height: 32px; background: var(--map-accent); }
.key-list a > span { color: var(--faint); font: 500 10px/1 "DM Mono", Consolas, monospace; }
.key-list a > strong { margin-left: -46px; font-size: 22px; }
.key-list a > small { color: var(--muted); font-size: 12px; }
.key-list a > em { color: var(--faint); font: normal 10px/1 "DM Mono", Consolas, monospace; }
.key-list a > b { color: var(--accent); font-size: 18px; transition: transform 160ms ease; }
.key-list a:hover > b { transform: translateX(4px); }

/* Oxidation-state relation map */
.relation-body { background: #e8e2d6; color: #19201c; --paper: #19201c; --muted: #5d675f; --faint: #7a827c; --line: rgba(25,32,28,.14); --line-strong: rgba(25,32,28,.28); }
.relation-body .site-header { position: sticky; top: 0; background: rgba(236,231,219,.96); backdrop-filter: blur(14px); }
.relation-body .brand-mark i { border-color: #e8e2d6; }
.relation-main { width: min(1580px, calc(100vw - 48px)); margin: 0 auto; padding: 34px 0 88px; }
.relation-toolbar { display: grid; grid-template-columns: minmax(320px, 1fr) auto; gap: 34px; align-items: end; padding: 0 0 28px; border-bottom: 1px solid var(--line-strong); }
.relation-title-block > a { display: inline-flex; min-height: 34px; align-items: center; border-bottom: 1px solid transparent; color: #7b6521; font-weight: 800; }
.relation-title-block > a:hover { border-color: #7b6521; }
.relation-title-block h1 { margin: 16px 0 8px; font-size: clamp(38px, 5vw, 68px); line-height: 1.04; }
.relation-title-block p { margin: 0; color: var(--muted); font-size: 13px; }
.relation-actions { display: flex; align-items: end; gap: 10px; }
.relation-actions label { display: grid; gap: 7px; color: var(--faint); font-size: 10px; font-weight: 800; }
.relation-actions select,
.relation-actions input,
.relation-actions button { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(255,255,255,.25); color: #19201c; }
.relation-actions select { min-width: 155px; padding: 0 34px 0 12px; }
.relation-actions form { display: grid; grid-template-columns: 150px 42px; }
.relation-actions input { min-width: 0; border-right: 0; border-radius: 3px 0 0 3px; padding: 0 12px; font: 700 13px/1 "DM Mono", Consolas, monospace; outline: 0; }
.relation-actions form button { border-radius: 0 3px 3px 0; cursor: pointer; }
.relation-actions > button { padding: 0 15px; font-size: 11px; font-weight: 800; cursor: pointer; }
.relation-actions button:hover { border-color: #806924; background: rgba(215,182,72,.13); }
.state-network-shell { position: relative; border-bottom: 1px solid var(--line-strong); }
.state-network-scroll { overflow-x: auto; background: rgba(250,247,239,.5); }
.state-headings { position: sticky; z-index: 7; top: 72px; display: grid; min-width: 100%; border-bottom: 1px solid var(--line-strong); background: rgba(235,230,218,.96); backdrop-filter: blur(10px); }
.state-headings button { min-height: 78px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #59635c; cursor: pointer; }
.state-headings button:last-child { border-right: 0; }
.state-headings button strong { display: block; font: 900 22px/1 "DM Mono", Consolas, monospace; }
.state-headings button span { display: block; margin-top: 8px; color: #798079; font-size: 10px; }
.state-headings button:hover,
.state-headings button.active { background: rgba(255,255,255,.58); color: #19201c; box-shadow: inset 0 -4px 0 var(--relation-accent, #d7b648); }
.state-stage { position: relative; min-height: 570px; }
.state-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.state-edge { fill: none; stroke: #717a73; stroke-width: 1.35; opacity: .66; pointer-events: stroke; cursor: pointer; }
.state-edge.dimmed { opacity: .1; }
.state-edge:hover { stroke: #7b6420; stroke-width: 2.6; opacity: 1; }
#state-arrow path { fill: #717a73; }
.state-edge-count { fill: #735e1e; font: 800 11px/1 "DM Mono", Consolas, monospace; text-anchor: middle; paint-order: stroke; stroke: #eee9de; stroke-width: 4px; }
.state-node { position: absolute; z-index: 3; display: grid; place-items: center; width: var(--node-size); height: var(--node-size); transform: translate(-50%,-50%); border: 1px solid rgba(25,32,28,.4); border-radius: 50%; background: #f4efe5; color: #17201b; box-shadow: 0 11px 25px rgba(25,32,28,.12); cursor: pointer; transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.state-node::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--relation-accent, #d7b648) 60%, transparent); border-radius: inherit; }
.state-node span { z-index: 1; max-width: 82%; font: 900 clamp(11px, 1vw, 15px)/1.1 "Noto Sans SC", "Microsoft YaHei", sans-serif; white-space: nowrap; }
.state-node b { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #19201c; color: #f4efe5; font: 700 9px/1 "DM Mono", Consolas, monospace; }
.state-node.dimmed { opacity: .16; }
.state-node.selected { transform: translate(-50%,-50%) scale(1.1); border-color: #7b6420; box-shadow: 0 0 0 6px rgba(215,182,72,.18), 0 15px 32px rgba(25,32,28,.2); }
.network-status { position: absolute; right: 14px; bottom: 10px; margin: 0; color: var(--faint); font-size: 10px; }
.relation-detail { scroll-margin-top: 94px; }
.detail-placeholder { display: grid; place-content: center; min-height: 260px; gap: 10px; text-align: center; }
.detail-placeholder strong { font-size: 21px; }
.detail-placeholder span { color: var(--muted); font-size: 12px; }

/* Shared equation evidence */
.equation-detail-shell { color: #19201c; }
.dual-detail-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding: 34px 0 24px; border-bottom: 1px solid rgba(25,32,28,.22); }
.dual-detail-heading span { color: #8a7027; font-size: 10px; font-weight: 800; }
.dual-detail-heading h2 { margin: 10px 0 0; font-size: clamp(28px, 3vw, 42px); }
.dual-detail-heading > p { margin: 0; color: #697169; font: 500 11px/1.4 "DM Mono", Consolas, monospace; }
.dual-equation-grid { display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid rgba(25,32,28,.18); border-left: 1px solid rgba(25,32,28,.18); }
.equation-column { min-width: 0; padding-bottom: 28px; border-right: 1px solid rgba(25,32,28,.18); }
.equation-column:last-child { border-right: 0; }
.equation-column > header { display: grid; grid-template-columns: 45px 1fr; gap: 16px; align-items: start; min-height: 112px; padding: 28px; border-bottom: 1px solid rgba(25,32,28,.18); }
.equation-column > header > span { color: #8c7227; font: 600 11px/1 "DM Mono", Consolas, monospace; }
.equation-column > header h3 { margin: 0 0 8px; font-size: 23px; }
.equation-column > header p { margin: 0; color: #6c756e; font-size: 11px; }
.equation-column > [data-equation-groups] { padding: 26px; }
.equation-column .edge-equations h4 { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; }
.equation-column .edge-equations h4 b { min-width: 0; overflow-wrap: anywhere; font: 800 14px/1.45 "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.equation-column .edge-equations h4 small { color: #7b817c; font-size: 9px; }
.empty-detail { display: grid; place-content: center; min-height: 210px; gap: 8px; text-align: center; }
.empty-detail strong { font-size: 17px; }
.empty-detail span { color: #777f79; font-size: 11px; }

/* Detail graph corrections */
.detail-main .relation-stage svg { z-index: 1; pointer-events: auto; }
.detail-main .relation-node-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.detail-main .relation-node { --size: 88px; z-index: 2; pointer-events: auto; }
.detail-main .relation-node span { max-width: 78%; font: 900 clamp(11px, 1vw, 15px)/1.1 "Noto Sans SC", "Microsoft YaHei", sans-serif; white-space: nowrap; }
.detail-main .relation-node small { position: absolute; top: calc(100% + 7px); width: max-content; color: #687169; font-size: 9px; }
.detail-main .relation-edge { pointer-events: stroke; cursor: pointer; }
.detail-main .relation-count { fill: #806821; font: 800 11px/1 "DM Mono", Consolas, monospace; text-anchor: middle; paint-order: stroke; stroke: #f0ece2; stroke-width: 4px; }

@media (max-width: 1100px) {
  .mode-list .mode-entry { grid-template-columns: 54px minmax(260px,.8fr) minmax(340px,1.2fr) 40px; }
  .mode-list .mode-open { writing-mode: vertical-rl; }
  .key-group { grid-template-columns: 160px 1fr; }
  .key-list a { grid-template-columns: 42px 95px minmax(170px,1fr) 112px 24px; }
  .relation-toolbar { grid-template-columns: 1fr; }
  .relation-actions { flex-wrap: wrap; }
  .galaxy-rail { width: 132px; }
}

@media (max-width: 760px) {
  .header-back { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .mode-list .mode-entry { grid-template-columns: 34px 1fr; min-height: 0; }
  .mode-list .mode-number { grid-row: 1 / 3; }
  .mode-list .mode-visual { grid-column: 2; min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mode-list .mode-copy { grid-column: 2; min-height: 0; padding: 28px 0 34px 20px; }
  .mode-list .mode-copy h2 { font-size: 35px; }
  .mode-list .mode-copy p { font-size: 14px; }
  .mode-list .mode-copy ul { display: grid; gap: 8px; }
  .mode-list .mode-open { display: none; }
  .space-search-panel { top: 76px; left: 14px; width: calc(100vw - 28px); }
  .galaxy-rail { top: 154px; right: 14px; left: 14px; display: flex; width: auto; overflow-x: auto; }
  .galaxy-rail button { flex: 0 0 auto; min-width: 94px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
  .galaxy-rail button.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .space-heading { left: 16px; right: 16px; bottom: 18px; }
  .space-heading h1 { font-size: 31px; }
  .space-selection { right: 14px; bottom: 80px; width: calc(100vw - 28px); }
  .galaxy-label { display: none; }
  .key-heading { grid-template-columns: 1fr; padding-bottom: 30px; }
  .key-heading h1 { font-size: 44px; }
  .key-group { display: block; }
  .key-group > header { padding: 28px 0 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .key-list a { grid-template-columns: 32px 72px 1fr 22px; gap: 10px; min-height: 84px; padding: 0 6px; }
  .key-list a::before { height: 26px; }
  .key-list a > span { display: none; }
  .key-list a > strong { margin-left: -32px; font-size: 18px; }
  .key-list a > small { font-size: 10px; }
  .key-list a > em { display: none; }
  .relation-main { width: calc(100vw - 24px); padding-top: 24px; }
  .relation-title-block h1 { font-size: 39px; }
  .relation-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .relation-actions label { grid-column: 1 / -1; }
  .relation-actions select { width: 100%; }
  .relation-actions form { grid-template-columns: 1fr 42px; }
  .state-headings { top: 62px; }
  .state-headings button { min-height: 66px; }
  .state-headings button strong { font-size: 18px; }
  .dual-detail-heading { display: block; }
  .dual-detail-heading > p { margin-top: 14px; }
  .dual-equation-grid { grid-template-columns: 1fr; }
  .equation-column { border-right: 0; border-bottom: 1px solid rgba(25,32,28,.18); }
  .equation-column > [data-equation-groups] { padding: 20px 12px; }
  .equation-column .edge-equations h4 { grid-template-columns: 30px minmax(0,1fr); }
  .equation-column .edge-equations h4 small { grid-column: 2; }
}
/* 2026-07 unified redesign */
:root {
  color-scheme: light;
  --app-paper: #f2efe8;
  --app-white: #fffdf8;
  --app-ink: #1f2421;
  --app-muted: #626862;
  --app-line: #d0ccc2;
  --app-coral: #db6248;
  --app-gold: #d9aa42;
  --header-height: 74px;
  --layout: min(1340px, calc(100vw - 80px));
}
.selector-body,
.key-body { background: var(--app-paper); color: var(--app-ink); }
.site-header,
.detail-body .site-header,
.relation-body .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  width: min(1340px, calc(100% - 80px));
  height: var(--header-height);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid var(--app-line);
  background: rgba(242,239,232,.96);
  color: var(--app-ink);
  backdrop-filter: blur(12px);
  --paper: var(--app-ink);
  --muted: var(--app-muted);
  --faint: #7b817b;
  --line: rgba(31,36,33,.14);
  --line-strong: rgba(31,36,33,.28);
}
.universe-page .site-header.overlay {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  padding-inline: max(40px, calc((100vw - 1340px) / 2));
  background: rgba(242,239,232,.97);
  transform: none;
}
.site-header .brand { display: flex; align-items: center; gap: 11px; min-width: 245px; color: var(--app-ink); }
.site-header .brand-mark { width: 28px; height: 28px; flex-basis: 28px; }
.site-header .brand-mark i { width: 10px; height: 10px; border: 2px solid var(--app-ink); }
.site-header .brand-mark i:nth-child(1) { top: 1px; left: 1px; background: var(--app-coral); }
.site-header .brand-mark i:nth-child(2) { top: 14px; left: 2px; right: auto; bottom: auto; background: #e5c94c; }
.site-header .brand-mark i:nth-child(3) { top: 7px; left: 15px; bottom: auto; background: #75a68c; }
.site-header .brand strong { color: var(--app-ink); font-size: 15px; font-weight: 800; }
.site-header .brand small { margin-top: 1px; color: var(--app-muted); font: 500 9px/1.3 "DM Mono", Consolas, monospace; letter-spacing: 0; }
.site-header nav { display: flex; align-items: center; gap: 31px; height: 100%; }
.site-header nav a { display: block; position: relative; padding: 27px 0 25px; color: var(--app-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.site-header nav a:hover,
.site-header nav a.active { color: var(--app-ink); }
.site-header nav a.active::after { right: 0; bottom: -1px; left: 0; height: 3px; background: var(--app-coral); }
.site-header .header-tools { min-width: 245px; gap: 16px; }
.icon-button {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  min-height: 38px;
  border: 1px solid var(--app-line);
  border-radius: 50%;
  background: transparent;
  color: var(--app-ink);
  cursor: pointer;
}
.icon-button span::before { position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; border: 1.5px solid var(--app-ink); border-radius: 50%; content: ""; }
.icon-button span::after { position: absolute; top: 21px; left: 21px; width: 7px; height: 1.5px; background: var(--app-ink); content: ""; transform: rotate(45deg); transform-origin: left center; }
.icon-button:hover { border-color: var(--app-ink); background: var(--app-white); }
.site-header .profile-button { min-height: 0; border: 0; padding: 0; background: transparent; color: var(--app-ink); font-size: 11px; font-weight: 800; }

.context-row { width: var(--layout); margin: 0 auto; padding-top: 28px; }
.context-back,
.context-links a,
.space-back {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(31,36,33,.24);
  border-radius: 4px;
  padding: 0 14px;
  background: rgba(255,253,248,.7);
  color: #3e4741;
  font-size: 11px;
  font-weight: 800;
}
.context-back:hover,
.context-links a:hover { border-color: var(--app-coral); color: var(--app-ink); }

.selector-main { min-height: calc(100vh - var(--header-height)); }
.selector-intro { padding: clamp(34px,5vh,60px) 0 30px; color: var(--app-ink); }
.selector-intro > div > span,
.key-heading > span { color: #a17c1e; }
.selector-intro h1 { font-size: clamp(46px,6vw,78px); }
.selector-intro > p,
.mode-list .mode-copy p { color: var(--app-muted); }
.mode-list {
  display: grid;
  gap: 26px;
  width: var(--layout);
  margin: 0 auto 80px;
  border: 0;
}
.mode-list .mode-entry {
  grid-template-columns: 64px minmax(320px,.82fr) minmax(360px,1.18fr) 126px;
  min-height: 360px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-white);
  color: var(--app-ink);
  box-shadow: 0 16px 42px rgba(36,37,32,.07);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mode-list .mode-entry::before { display: none; }
.mode-list .mode-entry:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(36,37,32,.13); }
.mode-list .mode-number { padding-left: 22px; color: #a17c1e; }
.mode-list .mode-visual { border-right-color: var(--app-line); }
.mode-list .mode-copy { color: var(--app-ink); }
.mode-list .mode-copy > span,
.mode-list .mode-copy ul { color: #717770; }
.mode-list .mode-copy h2 { color: var(--app-ink); }
.mode-list .mode-copy li::before,
.mode-list .mode-open { color: #9b7620; }
.page-footer { color: #737a73; border-top-color: var(--app-line); }
.selector-body .page-footer,
.key-body .page-footer { color: #737a73; }
.selector-body .page-footer a:hover,
.key-body .page-footer a:hover { color: var(--app-ink); }

/* Keep the astronomy controls compact and let the canvas occupy the full stage. */
.universe-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; color-scheme: dark; background: #271d31; color: #f1ede3; }
.universe-page .site-header.overlay { position: relative; inset: auto; flex: 0 0 auto; }
.universe-shell { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; overflow: hidden; }
.space-overlay-controls {
  position: absolute;
  z-index: 18;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 260px;
  padding: 10px;
  border: 1px solid rgba(242,232,250,.22);
  border-radius: 4px;
  background: rgba(39,29,49,.86);
  color: #f2eafa;
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.universe-page.system-universe .space-overlay-controls {
  align-items: flex-start;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.universe-stage { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #271d31; }
.universe-stage .universe-canvas,
.universe-stage .space-noise,
.universe-stage .galaxy-label-layer { position: absolute; inset: 0; }
.space-overlay-controls .space-back { align-self: flex-start; min-height: 30px; border-color: rgba(242,232,250,.34); border-radius: 3px; padding: 0 10px; background: rgba(255,255,255,.06); color: #f2eafa; font-size: 11px; }
.space-overlay-controls .space-back:hover { border-color: #e0bd4e; color: #fff; }
.space-system-name { min-height: 18px; color: #f2eafa; font-size: 14px; font-weight: 700; line-height: 18px; }
.space-search-block { width: 238px; min-width: 0; }
#space-search > label { display: none; }
#space-search > div { grid-template-columns: 1fr 36px; width: 100%; min-height: 36px; border-color: rgba(242,232,250,.32); background: rgba(8,6,14,.34); backdrop-filter: none; }
.universe-page.system-universe .space-search-block { width: 138px; }
.universe-page.system-universe #space-search > div { grid-template-columns: 102px 36px; width: 138px; }
#space-search input { padding: 0 10px; color: #f2eafa; font-size: 12px; }
#space-search button { border-left-color: rgba(242,232,250,.18); color: #f2eafa; }
#space-search button:hover { background: rgba(255,255,255,.08); }
#search-message { min-height: 13px; margin: 3px 0 0; color: #e6c964; }
.space-overlay-controls .search-targets { margin-top: 3px; }
.space-overlay-controls .search-targets button { background: rgba(8,6,14,.34); color: #c8bdcf; }
.galaxy-rail {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  border-color: rgba(242,232,250,.22);
  background: rgba(8,6,14,.28);
  backdrop-filter: none;
}
.galaxy-rail button { flex: 0 0 auto; min-height: 34px; border-right: 1px solid rgba(242,232,250,.14); border-bottom: 0; color: #c8bdcf; font-size: 10px; white-space: nowrap; }
.galaxy-rail button:last-child { border-right: 0; }
.galaxy-rail button:hover,
.galaxy-rail button.active { background: rgba(215,182,72,.13); color: #fff6d8; }
.galaxy-rail button.active { box-shadow: inset 0 -3px 0 #d5b64b; }
.galaxy-label { min-height: 36px; border-color: rgba(241,237,227,.34); background: rgba(20,35,31,.86); font-size: 12px; }
.space-hint { display: none; }

@media (max-width: 820px) {
  .space-overlay-controls {
    top: 12px;
    left: 12px;
    width: min(245px, calc(100vw - 24px));
    padding: 8px;
    gap: 6px;
  }
  .universe-page.system-universe .space-overlay-controls {
    width: auto;
    padding: 0;
  }
  .space-overlay-controls .galaxy-rail {
    width: 100%;
    border-color: rgba(242,232,250,.22);
  }
  .space-overlay-controls .galaxy-rail button {
    min-width: 88px;
    border-right-color: rgba(242,232,250,.14);
    color: #c8bdcf;
  }
}

/* Bright key-material directory. */
.key-main { padding-top: 28px; }
.key-heading { grid-template-columns: 1fr; gap: 14px; padding: 34px 0 36px; border-bottom-color: var(--app-line); }
.key-heading > span { grid-column: auto; }
.key-heading h1 { color: var(--app-ink); font-size: clamp(42px,5vw,68px); line-height: 1.05; white-space: nowrap; }
.key-heading p { color: var(--app-muted); }
#key-groups,
.key-group { border-color: var(--app-line); }
.key-group > header { border-right-color: var(--app-line); }
.key-group > header h2,
.key-list a > strong { color: var(--app-ink); }
.key-list a { border-bottom-color: var(--app-line); }
.key-list a > small,
.key-list a > em { color: #687069; }
.key-list a:hover { background: rgba(255,255,255,.55); }

/* Relation map: richer nodes and in-place oxidation-state focus. */
.relation-body { background: #f0ece3; }
.relation-body .site-header { background: rgba(242,239,232,.97); }
.relation-main { padding-top: 28px; }
.context-links { display: flex; flex-wrap: wrap; gap: 9px; }
.relation-title-block > .context-links a { min-height: 36px; color: #4f584f; }
.relation-title-block h1 { margin-top: 22px; }
.relation-actions { align-items: end; }
.relation-actions label { color: #626a63; font-size: 10px; }
.relation-search-label { min-width: 220px; }
.relation-actions form { grid-template-columns: minmax(170px,220px) 42px; }
.state-network-scroll { background: #fbf8f1; }
.state-headings { background: rgba(240,236,227,.97); }
.state-headings button { color: #505a53; }
.state-headings button:hover,
.state-headings button.active { background: rgba(255,255,255,.72); box-shadow: inset 0 -5px 0 var(--state-color, var(--relation-accent)); }
.state-node {
  border: 1px solid color-mix(in srgb, var(--state-color, #d9aa42) 65%, #28312b);
  background: color-mix(in srgb, var(--state-color, #d9aa42) 48%, #fffdf8);
  box-shadow: 0 12px 27px rgba(32,38,34,.14);
  filter: none;
}
.state-node::before { display: none; }
.state-node.dimmed { opacity: .2; filter: blur(.8px) saturate(.45); }
.state-edge { stroke: color-mix(in srgb, var(--edge-color, #68746c) 72%, #333); }
.state-edge.dimmed { opacity: .11; filter: blur(.45px); }
.state-node.selected { border-color: #6e5618; box-shadow: 0 0 0 6px rgba(217,170,66,.22), 0 16px 34px rgba(25,32,28,.2); }
.network-status { padding: 6px 8px; background: rgba(251,248,241,.84); }

/* Radial detail graphs. */
.detail-body { background: #f0ece3; }
.detail-body .site-header { background: rgba(242,239,232,.97); }
.detail-main { padding-top: 28px; }
.detail-top { grid-template-columns: 1fr auto 1fr; }
.detail-main .relation-stage { min-height: 620px; background: #fbf8f1; }
.detail-main .relation-node {
  width: var(--size);
  height: var(--size);
  border-color: color-mix(in srgb, var(--node-color, #d9aa42) 62%, #28312b);
  background: color-mix(in srgb, var(--node-color, #d9aa42) 46%, #fffdf8);
}
.detail-main .relation-node.ion { background: #f7f4ec; border-width: 2px; }
.detail-main .relation-edge { stroke: #68746c; }
.detail-main .relation-count { stroke: #fbf8f1; }

@media (max-width: 1100px) {
  .site-header,
  .detail-body .site-header,
  .relation-body .site-header { width: calc(100% - 40px); padding: 0; }
  .universe-page .site-header.overlay { width: 100%; padding-inline: 20px; }
  .site-header .brand,
  .site-header .header-tools { min-width: 190px; }
  .site-header nav { display: flex; gap: 18px; }
  .mode-list .mode-entry { grid-template-columns: 54px minmax(270px,.8fr) minmax(330px,1.2fr) 54px; }
  .mode-list .mode-open { writing-mode: vertical-rl; }
  .key-heading h1 { font-size: 56px; }
}

@media (max-width: 820px) {
  :root { --layout: min(100% - 36px, 680px); }
  .site-header,
  .detail-body .site-header,
  .relation-body .site-header {
    width: min(100% - 36px,680px);
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 0;
  }
  .universe-page .site-header.overlay { width: 100%; padding: 11px 18px; }
  .site-header .brand,
  .site-header .header-tools { min-width: auto; }
  .site-header nav { order: 3; width: 100%; height: 33px; justify-content: space-between; overflow-x: auto; gap: 18px; }
  .site-header nav a { flex: 0 0 auto; padding: 6px 0 8px; font-size: 11px; }
  .site-header .profile-button { display: block; }
  .space-control-dock { grid-template-columns: auto minmax(0,1fr); gap: 9px 12px; min-height: 0; padding: 10px 14px; }
  .space-control-dock .space-back { grid-row: 1; grid-column: 1; min-height: 42px; }
  .space-search-block { grid-row: 2; grid-column: 1 / -1; }
  .galaxy-rail { grid-row: 1; grid-column: 2; display: flex; width: 100%; overflow-x: auto; }
  .galaxy-rail button { flex: 0 0 auto; min-width: 94px; border-right: 1px solid rgba(31,36,33,.14); border-bottom: 0; text-align: center; }
  .galaxy-rail button.active { box-shadow: inset 0 -3px 0 #b38e27; }
  .space-selection { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 7px 12px; padding: 9px 11px; }
  .space-selection h2 { font-size: 20px; }
  .space-selection p { grid-column: 1 / -1; }
  .space-selection a { grid-column: 1 / -1; padding: 8px 0 0; border-top: 1px solid rgba(31,36,33,.14); border-left: 0; }
  .mode-list .mode-entry { grid-template-columns: 38px 1fr; }
  .mode-list .mode-number { grid-row: 1 / 3; padding-left: 13px; }
  .mode-list .mode-visual { grid-column: 2; min-height: 260px; border-right: 0; border-bottom: 1px solid var(--app-line); }
  .mode-list .mode-copy { grid-column: 2; padding: 30px 24px 36px; }
  .mode-list .mode-open { display: none; }
  .key-heading h1 { font-size: 44px; white-space: normal; }
  .relation-actions { display: grid; grid-template-columns: 1fr auto; }
  .relation-actions label { grid-column: 1 / -1; }
  .relation-actions form { grid-template-columns: 1fr 42px; }
  .detail-top { grid-template-columns: 1fr; }
  .detail-heading { grid-column: auto; grid-row: auto; text-align: center; }
  .detail-back,
  .detail-summary { grid-row: auto; }
}

/* The overview keeps its compact panel, with a narrow vertical system menu. */
.universe-page:not(.system-universe) .space-overlay-controls {
  border: 0;
  width: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  gap: 6px;
}
.universe-page:not(.system-universe) #search-message:empty { display: none; }
.universe-page:not(.system-universe) .search-targets:empty { display: none; }
.universe-page:not(.system-universe) .galaxy-rail {
  display: grid;
  inset: auto;
  align-self: flex-start;
  width: 72px;
  max-height: min(396px, calc(100vh - 270px));
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.universe-page:not(.system-universe) .galaxy-rail button {
  width: 72px;
  min-width: 72px;
  min-height: 34px;
  border-right: 0;
  border-bottom: 1px solid rgba(242,232,250,.14);
  padding: 0 8px;
  text-align: left;
  white-space: nowrap;
}
.universe-page:not(.system-universe) .galaxy-rail button:last-child {
  border-bottom: 0;
}
.universe-page:not(.system-universe) .galaxy-rail button.active {
  box-shadow: inset 3px 0 0 #d5b64b;
}

@media (max-width: 820px) {
  .universe-page:not(.system-universe) .galaxy-rail {
    display: grid;
    grid-row: auto;
    grid-column: auto;
    width: 72px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .universe-page:not(.system-universe) .galaxy-rail button {
    width: 72px;
    min-width: 72px;
    border-right: 0;
    border-bottom: 1px solid rgba(242,232,250,.14);
    text-align: left;
  }
  .universe-page:not(.system-universe) .galaxy-rail button.active {
    box-shadow: inset 3px 0 0 #d5b64b;
  }
}

.galaxy-label.active {
  border-color: #e0bd4e;
  color: #fff6d8;
  box-shadow: 0 0 0 5px rgba(224,189,78,.12), 0 8px 22px rgba(0,0,0,.22);
}

@media (max-width: 540px) {
  .site-header .brand small { display: block; font-size: 7px; }
  .site-header .icon-button { width: 34px; height: 34px; min-height: 34px; }
  .site-header .icon-button span::before { top: 8px; left: 8px; }
  .site-header .icon-button span::after { top: 19px; left: 19px; }
  .selector-intro h1 { font-size: 42px; }
  .mode-list .mode-copy h2 { font-size: 32px; }
  .relation-title-block h1 { font-size: 36px; }
  .state-headings { top: 116px; }
}
@media (min-width: 1101px) {
  .mode-list .mode-copy h2 { max-width: none; font-size: clamp(36px,3.4vw,48px); white-space: nowrap; }
}
@media (max-width: 760px) {
  .perspective-grid { display: block; }
  .perspective { display: block; border-right: 0; border-bottom: 1px solid rgba(25,32,28,.18); }
  .detail-main .relation-stage { min-height: 620px; }
}
/* Verification refinements */
.state-headings { position: relative; top: auto; }
@media (min-width: 821px) {
  .key-list a { grid-template-columns: 4px 46px minmax(220px,1fr) minmax(180px,.7fr) 120px 28px; }
  .key-list a > strong { margin-left: 0; }
}