:root {
  color-scheme: dark;
  --bg: #070b16;
  --bg-soft: #0b1120;
  --panel: #10192b;
  --panel-2: #141f34;
  --panel-3: #19263d;
  --line: #2b3852;
  --line-strong: #455777;
  --text: #edf4ff;
  --muted: #a5b3ca;
  --quiet: #7486a3;
  --mint: #9ff4d8;
  --violet: #aea5ff;
  --amber: #ffd28f;
  --rose: #ff9dbc;
  --blue: #91d4ff;
  --danger: #ffb09f;
  --radius: 20px;
  --sidebar: 272px;
  --shadow: 0 28px 90px rgb(0 0 0 / .36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
body.nav-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
img { max-width: 100%; }
::selection { background: var(--mint); color: #071418; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 1rem; top: -6rem; z-index: 200; background: #fff; color: #000; padding: .7rem 1rem; border-radius: 0 0 8px 8px; font-weight: 800; }
.skip-link:focus { top: 0; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 120; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--mint), var(--violet), var(--rose)); }

#cosmos { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .55; }
.ambient { position: fixed; z-index: 0; width: 50vw; height: 50vw; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; animation: ambient-drift 24s ease-in-out infinite alternate; }
.ambient-a { top: -24vw; right: -14vw; background: #7655dd; }
.ambient-b { left: -18vw; bottom: -28vw; background: #00958f; animation-delay: -11s; }
@keyframes ambient-drift { to { transform: translate(8vw, 9vh) scale(1.2); } }

.site-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; width: var(--sidebar); height: 100vh; flex: 0 0 var(--sidebar); display: flex; flex-direction: column; overflow: auto; padding: 24px 14px 18px; border-right: 1px solid var(--line); background: rgb(8 14 27 / .91); backdrop-filter: blur(22px); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 20px; color: var(--text); font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.brand:hover { color: var(--text); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #9ff4d866; border-radius: 13px; color: var(--mint); background: linear-gradient(145deg, #17273a, #0a1322); box-shadow: inset 0 0 30px #9ff4d811; }
.brand small { display: block; margin-top: 1px; color: var(--quiet); font-size: 8px; letter-spacing: .18em; font-weight: 700; }
.side-label { margin: 15px 11px 7px; color: var(--quiet); font-size: 9px; letter-spacing: .2em; font-weight: 900; }
#nav { display: grid; gap: 2px; }
#nav button, .side-link { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; padding: 9px 11px; background: transparent; color: #9fb0cb; text-align: left; font-size: 12px; }
#nav button > span:first-child { width: 22px; color: #5f7393; font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#nav button:hover, #nav button.active, .side-link:hover { background: #17243a; color: var(--text); }
#nav button.active { box-shadow: inset 2px 0 var(--mint); }
#nav button.active > span:first-child { color: var(--mint); }
.side-link { justify-content: space-between; padding-block: 8px; }
.side-status { margin: 18px 10px 0; padding: 15px 2px 4px; border-top: 1px solid var(--line); color: var(--mint); font-size: 9px; letter-spacing: .11em; }
.side-status strong { font-size: 9px; }
.side-status small { display: block; margin: 4px 0 0 16px; color: var(--quiet); letter-spacing: .04em; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); }

.workspace { min-width: 0; flex: 1; display: flex; flex-direction: column; padding-top: 68px; }
.topbar { position: fixed; inset: 0 0 auto var(--sidebar); z-index: 40; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(16px, 3vw, 42px); border-bottom: 1px solid var(--line); background: rgb(7 12 23 / .83); backdrop-filter: blur(22px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--quiet); font-size: 10px; letter-spacing: .15em; }
.breadcrumb strong { color: #d6e0f2; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .search-command, .canonical-button { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #131e31; color: #d9e5f7; }
.icon-button { display: grid; place-items: center; width: 40px; padding: 0; }
.search-command { min-width: 220px; display: flex; align-items: center; gap: 9px; padding: 0 11px; text-align: left; }
.search-command kbd { margin-left: auto; border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 5px; color: var(--quiet); font: 10px/1.5 ui-monospace, monospace; }
.canonical-button { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; background: var(--mint); border-color: var(--mint); color: #071817; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.canonical-button:hover { background: #d9fff4; color: #071817; }
.mobile-menu { display: none; font-size: 18px; }

main { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 42px clamp(20px, 4.4vw, 76px) 80px; }
footer { display: flex; justify-content: space-between; gap: 30px; padding: 28px clamp(20px, 4vw, 58px); border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
footer strong { color: #b8c6db; letter-spacing: .07em; }
.footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.eyebrow { color: var(--mint); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.page-head { max-width: 900px; margin: 8px 0 38px; }
.page-title { margin: 8px 0 12px; font-size: clamp(38px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; }
.page-title:focus { outline: 0; }
.page-head > p { max-width: 780px; margin: 0; color: var(--muted); font-size: 17px; }

.hero { position: relative; isolation: isolate; min-height: min(720px, calc(100vh - 110px)); display: flex; align-items: flex-end; overflow: hidden; margin: -42px calc(clamp(20px, 4.4vw, 76px) * -1) 0; padding: 80px clamp(20px, 5vw, 85px) 62px; border-bottom: 1px solid var(--line); }
.hero-image { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, #070b16 4%, rgb(7 11 22 / .86) 42%, rgb(7 11 22 / .2)), linear-gradient(0deg, #070b16 0%, transparent 45%), url('/assets/art/plate-01.webp') center / cover; transform: scale(1.03); animation: hero-drift 28s ease-in-out infinite alternate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 74% 36%, transparent 0 14%, #070b161c 40%, #070b16b8 84%); }
@keyframes hero-drift { to { transform: scale(1.12) translate(-1.5%, 1%); } }
.hero-copy { position: relative; z-index: 2; max-width: 930px; }
.hero h1 { margin: 14px 0 22px; font-size: clamp(52px, 8.2vw, 118px); line-height: .87; letter-spacing: -.075em; }
.hero h1 em { display: inline-block; background: linear-gradient(100deg, var(--mint), #d8e8ff 42%, var(--violet) 72%, var(--rose)); background-clip: text; color: transparent; font-style: normal; }
.hero-copy > p { max-width: 760px; margin: 0; color: #c0cce0; font-size: clamp(16px, 1.6vw, 21px); }
.hero-proof { position: absolute; right: clamp(20px, 5vw, 85px); bottom: 64px; z-index: 3; width: 160px; padding: 18px; border: 1px solid #9ff4d844; border-radius: 16px; background: rgb(8 15 28 / .72); backdrop-filter: blur(16px); }
.hero-proof span, .hero-proof small { display: block; color: var(--quiet); font-size: 9px; letter-spacing: .13em; }
.hero-proof strong { display: block; margin: 6px 0; color: var(--mint); font: 700 25px/1 ui-monospace, monospace; }
.hero-threads { position: absolute; right: -4%; top: 3%; z-index: -1; width: min(58vw, 820px); opacity: .45; }
.hero-threads path { fill: none; stroke: var(--mint); stroke-width: 1.2; stroke-dasharray: 6 11; animation: thread-flow 17s linear infinite; }
.hero-threads path + path { stroke: var(--violet); animation-direction: reverse; animation-duration: 21s; }
.hero-threads circle { fill: var(--amber); filter: drop-shadow(0 0 8px var(--amber)); animation: node-pulse 3s ease-in-out infinite alternate; }
@keyframes thread-flow { to { stroke-dashoffset: -340; } }
@keyframes node-pulse { to { opacity: .35; transform: scale(.7); transform-origin: center; } }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: #142037; color: var(--text); font-size: 10px; font-weight: 900; letter-spacing: .075em; text-align: center; }
.btn:hover { border-color: var(--mint); color: var(--mint); transform: translateY(-1px); }
.btn.primary { background: var(--mint); border-color: var(--mint); color: #071817; }
.btn.primary:hover { background: #d5fff2; color: #071817; }
.btn.disabled { cursor: not-allowed; color: #8390a5; background: #101827; border-style: dashed; }
.btn.disabled:hover { transform: none; border-color: var(--line-strong); color: #8390a5; }
.text-button { border: 0; background: transparent; color: var(--mint); padding: 2px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: left; }
.text-button:hover { color: #fff; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 46px; }
.metric { min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #152139, #0d1525); }
.metric strong { display: block; font-size: clamp(30px, 4vw, 50px); line-height: 1; letter-spacing: -.05em; }
.metric span { margin-top: 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.verified-metric { border-color: #65d9b968; box-shadow: inset 0 0 45px #4ec8a30b; }
.integrity-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 0 0 60px; padding: 20px; border: 1px solid #72613f; border-radius: 15px; background: #211d17; color: #e5d2ac; }
.integrity-note > span { color: var(--amber); font-size: 24px; }
.integrity-note strong { font-size: 10px; letter-spacing: .12em; }
.integrity-note p { margin: 3px 0 0; color: #c8b993; font-size: 12px; }

.section-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin: 68px 0 24px; }
.section-index { color: var(--quiet); font: 700 13px/1 ui-monospace, monospace; padding-top: 10px; }
.section-head h2 { margin: 3px 0 7px; font-size: clamp(29px, 4vw, 50px); line-height: 1; letter-spacing: -.045em; }
.section-head p { max-width: 760px; margin: 0; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card { position: relative; overflow: hidden; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, #142038, #0c1424); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .35s; }
.card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--spot-x, 100%) var(--spot-y, 0%), #9ff4d615, transparent 62%); }
.card:hover { transform: translateY(-6px); border-color: #6b88ab; box-shadow: 0 24px 70px rgb(0 0 0 / .32); }
.card-topline { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.card h3 { position: relative; margin: 24px 0 10px; font-size: 21px; line-height: 1.15; letter-spacing: -.025em; }
.card p { position: relative; min-height: 76px; margin: 0; color: #afbdd3; font-size: 13px; }
.card-footer { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.card-footer > span { max-width: 48%; overflow-wrap: anywhere; color: var(--quiet); font-size: 10px; }
.link-status { display: inline-flex; align-items: center; gap: 6px; color: #aab8cb; font-size: 8px; font-weight: 900; letter-spacing: .1em; white-space: nowrap; }
.link-status > span { width: 6px; height: 6px; border-radius: 50%; background: #71809a; }
.link-status.verified { color: var(--mint); }.link-status.verified > span { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.link-status.directory { color: var(--blue); }.link-status.directory > span { background: var(--blue); }
.link-status.contact { color: var(--amber); }.link-status.contact > span { background: var(--amber); }
.link-status.private { color: var(--violet); }.link-status.private > span { background: var(--violet); }
.link-status.unverified { color: #9b8fa7; }.link-status.unverified > span { background: #736a7c; }
.tag-row { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag { display: inline-flex; padding: 4px 8px; border: 1px solid #3b4a65; border-radius: 999px; color: #b5c3d8; font-size: 9px; }
.tag.mint { color: var(--mint); border-color: #427465; }

.trail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trail-card { min-height: 360px; display: flex; flex-direction: column; }
.trail-card::after { content: ''; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border: 1px solid #9ff4d623; border-radius: 50%; box-shadow: 0 0 0 24px #aea5ff0a, 0 0 0 48px #9ff4d608; }
.trail-number { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.trail-number span { color: var(--quiet); font: 700 10px/1 ui-monospace, monospace; }
.trail-number b { color: var(--mint); font-size: 30px; }
.trail-card h3 { margin-top: 12px; font-size: 25px; }
.trail-card p { min-height: 0; }
.trail-card .btn { align-self: flex-start; margin-top: auto; }
.trail-focus { scroll-margin-top: 90px; }
.trail-detail { margin-top: 50px; padding: clamp(22px, 4vw, 48px); border: 1px solid var(--line-strong); border-radius: 26px; background: linear-gradient(145deg, #16223a, #0c1424); box-shadow: var(--shadow); }
.trail-detail-head { max-width: 900px; }
.trail-detail-head h2 { margin: 8px 0 15px; font-size: clamp(36px, 5vw, 66px); line-height: .98; letter-spacing: -.055em; }
.trail-detail-head p { color: #bfcaDC; font-size: 17px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trail-thinking { margin: 32px 0; }
.trail-thinking section { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: #0c1423; }
.trail-thinking ol { margin: 12px 0 0; padding-left: 20px; color: #bcc7d8; }
.trail-thinking li + li { margin-top: 12px; }
.trail-thinking p { color: #bcc7d8; }
.route-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.route-line button { min-width: 0; display: grid; gap: 5px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #121d31; color: var(--text); text-align: left; }
.route-line button:hover { border-color: var(--mint); }
.route-line button > span:first-child { color: var(--quiet); font: 700 9px/1 ui-monospace, monospace; }
.route-line button strong { overflow-wrap: anywhere; }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.principles article { padding: 28px; background: #0f1829; }
.principles article + article { border-left: 1px solid var(--line); }
.principles article > span { color: var(--mint); font: 800 11px/1 ui-monospace, monospace; }
.principles h3 { margin: 25px 0 9px; font-size: 22px; }
.principles p { min-height: 94px; color: var(--muted); }

.essay-stack { display: grid; gap: 26px; }
.field-essay { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); min-height: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #0d1525; }
.essay-art { position: relative; min-height: 320px; background: linear-gradient(180deg, transparent, #07101bcc), var(--essay-art) center / cover; }
.essay-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, transparent, #070b165e 75%); }
.essay-art > span { position: absolute; left: 28px; bottom: 25px; z-index: 1; color: var(--mint); font: 700 clamp(42px, 7vw, 90px)/1 ui-monospace, monospace; opacity: .72; }
.essay-copy { padding: clamp(28px, 5vw, 62px); }
.essay-copy h2 { margin: 9px 0 18px; font-size: clamp(34px, 4.5vw, 60px); line-height: .98; letter-spacing: -.05em; }
.essay-copy p { color: var(--muted); }
.essay-copy .essay-lead { color: #e4ecf9; font-size: 18px; }
.essay-copy aside { margin: 25px 0; padding: 17px 20px; border-left: 2px solid var(--amber); background: #211d17; color: #d5c6a9; }
.essay-copy aside strong { display: block; margin-bottom: 5px; color: var(--amber); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.essay-links { display: flex; flex-wrap: wrap; gap: 8px; }
.essay-links button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #162239; color: #d7e4f7; font-size: 10px; }
.essay-links button:hover { border-color: var(--mint); color: var(--mint); }

.filter-panel { position: sticky; top: 82px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 15px; background: rgb(10 16 29 / .9); backdrop-filter: blur(18px); }
.filter-panel label { display: flex; flex: 1 1 150px; }
.filter-panel .search-field { flex: 3 1 280px; }
.filter-panel input, .filter-panel select, .compare-controls select, .graph-controls select, .graph-alternative select { width: 100%; min-height: 42px; border: 1px solid #3b4a65; border-radius: 9px; background: #111c30; color: var(--text); padding: 8px 11px; }
.filter-panel .btn { min-height: 42px; }
.results-bar { display: flex; justify-content: space-between; gap: 12px; color: var(--quiet); font-size: 10px; letter-spacing: .11em; }
.archive-progress { height: 3px; margin: 10px 0 22px; overflow: hidden; border-radius: 4px; background: #1c2b43; }
.archive-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--violet)); transition: width .3s ease; }
.archive-sentinel { padding: 48px 0 22px; color: var(--quiet); text-align: center; font-size: 10px; letter-spacing: .17em; }
.archive-sentinel::before { content: '◈'; display: block; margin-bottom: 10px; color: var(--mint); font-size: 25px; }
.archive-load { margin: 0 auto; }
.empty-state { grid-column: 1 / -1; padding: 34px; border: 1px dashed var(--line-strong); border-radius: 15px; color: var(--muted); }
.empty-state.fatal { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

.audit-method, .download-panel, .graph-alternative, .closing-call { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.2fr) auto; align-items: center; gap: 24px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(140deg, #142039, #0d1525); }
.audit-method h2, .download-panel h2, .graph-alternative h2, .closing-call h2 { margin: 5px 0; font-size: clamp(27px, 3vw, 42px); line-height: 1; }
.audit-method p, .download-panel p, .closing-call p { color: var(--muted); }
.host-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.host-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #0f192a; }
.host-card > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.host-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 16px; }
.host-card > div:first-child span { color: var(--quiet); font-size: 9px; text-transform: uppercase; }
.host-card > div:last-child { display: grid; }
.host-card button { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border: 0; border-bottom: 1px solid #2b385273; background: transparent; color: #cad6e8; text-align: left; }
.host-card button:hover { color: var(--mint); }
.archive-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.archive-roster button { min-width: 0; min-height: 75px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px dashed #4b4456; border-radius: 11px; background: #15131d; color: #c6bbca; text-align: left; }
.archive-roster button:hover { border-color: var(--violet); }
.archive-roster span { color: #8f8397; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.archive-roster strong { overflow-wrap: anywhere; font-size: 12px; }

.compare-controls { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: end; gap: 14px; margin-bottom: 25px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #0e1727; }
.compare-controls label { display: grid; gap: 6px; color: var(--quiet); font-size: 9px; letter-spacing: .12em; }
.compare-controls > span { padding-bottom: 10px; color: var(--mint); font-size: 20px; }
.compare-grid { align-items: stretch; }
.comparison-card { padding: clamp(22px, 3vw, 35px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, #142039, #0c1424); }
.comparison-card h2 { margin: 18px 0 10px; font-size: clamp(27px, 3.2vw, 45px); line-height: 1; }
.comparison-card > p { color: var(--muted); }
.comparison-card dl { margin: 25px 0; }
.comparison-card dl div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.comparison-card dt { color: var(--quiet); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.comparison-card dd { margin: 0; color: #c5d0e1; }
.comparison-synthesis { margin-top: 18px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #101929; }
.comparison-synthesis h2 { margin: 5px 0 10px; font-size: 30px; }
.comparison-synthesis p { color: var(--muted); }

.timeline { position: relative; max-width: 1100px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 34px; top: 20px; bottom: 30px; width: 1px; background: linear-gradient(var(--mint), var(--violet), transparent); }
.era { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding: 0 0 52px; }
.era-marker { position: relative; z-index: 1; width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid var(--mint); border-radius: 50%; background: #0d1728; box-shadow: 0 0 0 9px #07101c; }
.era-marker span { color: var(--mint); font: 800 13px/1 ui-monospace, monospace; }
.era-copy { padding: 26px 30px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(140deg, #14203a, #0c1424); }
.era-copy h2 { margin: 5px 0 9px; font-size: clamp(29px, 4vw, 48px); line-height: 1; }
.era-copy p { color: var(--muted); }

.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.art-tile { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #0c1525; }
.art-tile img { display: block; width: 100%; aspect-ratio: 12 / 7; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s; }
.art-tile:hover img { transform: scale(1.055); filter: saturate(1.2) contrast(1.05); }
.art-tile figcaption { display: flex; justify-content: space-between; gap: 18px; padding: 16px 19px; color: #d4dfef; font-size: 11px; }
.art-tile figcaption span { color: var(--mint); }

.notebook-panel { padding: clamp(23px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius); background: #0f192a; }
.notebook-panel h2 { margin: 6px 0 18px; font-size: 28px; }
.notebook-panel textarea { width: 100%; min-height: 280px; resize: vertical; padding: 15px; border: 1px solid #3b4a65; border-radius: 11px; background: #0a1322; color: var(--text); }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fine-print { color: var(--quiet); font-size: 11px; }
.saved-list { display: grid; gap: 8px; }
.saved-list > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #111c2f; }
.saved-list button { border: 0; background: transparent; color: #d6e1f1; text-align: left; }
.saved-list button:last-child { color: var(--quiet); }
.saved-list span { display: block; color: var(--mint); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }

.download-panel { grid-template-columns: minmax(250px, .8fr) minmax(350px, 1.2fr); }
.distribution { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.distribution button { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #101a2c; color: #cbd6e6; text-align: left; }
.distribution button:hover { border-color: var(--mint); }
.distribution button i { position: absolute; left: 0; bottom: 0; width: var(--bar); height: 2px; background: linear-gradient(90deg, var(--mint), var(--violet)); }
.table-wrap { max-height: 620px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: #1b2840; color: var(--mint); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
tbody tr:hover { background: #131f33; }

.manifest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.manifest-grid article { padding: clamp(24px, 4vw, 38px); background: #0f192a; border-bottom: 1px solid var(--line); }
.manifest-grid article:nth-child(odd) { border-right: 1px solid var(--line); }
.manifest-grid article > span { color: var(--mint); font: 800 10px/1 ui-monospace, monospace; }
.manifest-grid h2 { margin: 20px 0 8px; font-size: 25px; }
.manifest-grid p { margin: 0; color: var(--muted); }
.manifest-grid a { color: var(--mint); }
.closing-call { display: block; margin-top: 28px; text-align: center; }
.closing-call .button-row { justify-content: center; }

.graph-controls { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; margin-bottom: 12px; }
.graph-controls label { min-width: 220px; display: grid; gap: 5px; color: var(--quiet); font-size: 9px; letter-spacing: .11em; }
.graph-panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 50% 48%, #1b2945, #09111f 72%); }
.graph-panel canvas { display: block; width: 100%; height: min(68vh, 690px); touch-action: none; }
.graph-tooltip { position: absolute; left: 17px; bottom: 45px; max-width: 360px; padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: rgb(10 18 32 / .86); color: #c6d2e3; font-size: 11px; pointer-events: none; }
.graph-legend { padding: 12px 17px; border-top: 1px solid var(--line); color: var(--quiet); font-size: 9px; letter-spacing: .11em; }
.graph-alternative { grid-template-columns: 1fr minmax(220px, .7fr) auto auto; margin-top: 16px; padding: 22px; }

.overlay-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); overflow: auto; margin: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: 20px; background: #101a2d; color: var(--text); box-shadow: 0 35px 120px #000b; }
.overlay-dialog::backdrop { background: rgb(2 6 14 / .84); backdrop-filter: blur(9px); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.dialog-head h2 { margin: 2px 0 18px; font-size: 30px; }
.dialog-close { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: #1b2840; color: var(--text); font-size: 22px; }
.floating-close { position: sticky; top: 0; z-index: 3; float: right; }
.palette-input { width: 100%; min-height: 52px; padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 11px; background: #0a1322; color: var(--text); font-size: 16px; }
.palette-results { margin: 12px 0; }
.palette-hit { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.palette-hit:hover, .palette-hit.active { background: #19263e; }
.palette-hit span:first-child { display: grid; }
.palette-hit small { color: var(--quiet); }
.dialog-hint { color: var(--quiet); font-size: 10px; }
.dossier-dialog { width: min(880px, calc(100vw - 32px)); }
.dossier h2 { max-width: 720px; margin: 8px 0 12px; font-size: clamp(38px, 6vw, 67px); line-height: .98; letter-spacing: -.055em; }
.dossier-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dossier-lead { margin: 25px 0; color: #d8e2f1; font-size: 18px; }
.dossier blockquote { margin: 0 0 25px; padding: 18px 22px; border-left: 2px solid var(--mint); background: #0b1424; color: var(--mint); font-size: 16px; }
.dossier-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.dossier-facts > div { padding: 16px; background: #111c2f; border-bottom: 1px solid var(--line); }
.dossier-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.dossier-facts span { display: block; margin-bottom: 4px; color: var(--quiet); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.dossier-facts strong { color: #cbd7e8; font-size: 12px; overflow-wrap: anywhere; }
.provenance-note { margin-top: 16px; padding: 16px; border: 1px solid #63563d; border-radius: 11px; background: #201c17; color: #d3c19f; }
.provenance-note strong { color: var(--amber); font-size: 9px; letter-spacing: .12em; }
.provenance-note p { margin: 5px 0 0; }
.dossier-related { margin-top: 30px; }
.dossier-related .essay-links { margin-top: 10px; }
.toast { position: fixed; z-index: 180; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); padding: 13px 17px; border: 1px solid #5e7b77; border-radius: 11px; background: #10221f; color: var(--mint); box-shadow: var(--shadow); }

.loading-state { min-height: 62vh; display: grid; place-items: center; align-content: center; gap: 16px; color: var(--mint); letter-spacing: .1em; }
.loading-orbit { width: 65px; height: 65px; border: 1px solid #9ff4d84a; border-top-color: var(--mint); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.noscript { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; padding: 30px; background: var(--bg); }

.reveal-ready { opacity: 0; translate: 0 22px; transition: opacity .62s ease, translate .62s cubic-bezier(.2, .8, .2, 1); }
.reveal-in { opacity: 1; translate: 0 0; }

@media (max-width: 1220px) {
  :root { --sidebar: 230px; }
  .grid, .trail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-proof { display: none; }
  .search-command { min-width: 0; }
  .search-command kbd { display: none; }
  .graph-alternative { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; z-index: 90; width: min(310px, 86vw); transform: translateX(-105%); transition: transform .26s ease; box-shadow: 20px 0 70px #000a; }
  .sidebar.open { transform: translateX(0); }
  .nav-scrim { position: fixed; inset: 0; z-index: 80; display: block; border: 0; background: rgb(0 0 0 / .62); }
  .nav-scrim[hidden] { display: none; }
  .mobile-menu { display: grid; }
  .topbar { left: 0; }
  .breadcrumb { display: none; }
  .topbar { justify-content: flex-start; }
  .top-actions { margin-left: auto; }
  .hero { min-height: 650px; }
  .hero-threads { width: 86vw; opacity: .28; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles { grid-template-columns: 1fr; }
  .principles article + article { border-left: 0; border-top: 1px solid var(--line); }
  .principles p { min-height: 0; }
  .field-essay { grid-template-columns: 1fr; }
  .essay-art { min-height: 290px; }
  .host-grid { grid-template-columns: 1fr; }
  .audit-method, .download-panel, .closing-call { grid-template-columns: 1fr; }
  .compare-controls { grid-template-columns: 1fr; }
  .compare-controls > span { display: none; }
}

@media (max-width: 680px) {
  main { padding: 28px 14px 60px; }
  .workspace { padding-top: 58px; }
  .topbar { height: 58px; padding: 0 12px; }
  .canonical-button, .search-label { display: none; }
  .search-command { width: 40px; min-width: 40px; justify-content: center; padding: 0; }
  .hero { min-height: 610px; margin: -28px -14px 0; padding: 62px 18px 38px; }
  .hero h1 { font-size: clamp(49px, 17vw, 78px); }
  .hero-copy > p { font-size: 15px; }
  .hero .button-row { align-items: stretch; }
  .hero .btn { width: 100%; }
  .page-title { font-size: clamp(39px, 13vw, 61px); }
  .page-head > p { font-size: 15px; }
  .metric { min-height: 105px; padding: 16px; }
  .metric strong { font-size: 32px; }
  .integrity-note { grid-template-columns: auto 1fr; align-items: start; }
  .integrity-note .text-button { grid-column: 2; }
  .section-head { grid-template-columns: 38px minmax(0, 1fr); margin-top: 50px; }
  .section-head h2 { font-size: 34px; }
  .grid, .trail-grid, .two-col, .art-grid, .manifest-grid, .distribution { grid-template-columns: 1fr; }
  .manifest-grid article:nth-child(odd) { border-right: 0; }
  .trail-detail { padding: 20px; }
  .trail-detail-head h2 { font-size: 40px; }
  .route-line { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .filter-panel label, .filter-panel .search-field { flex-basis: 100%; }
  .archive-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-essay { min-height: 0; }
  .essay-copy { padding: 24px; }
  .essay-copy h2 { font-size: 37px; }
  .essay-copy .essay-lead { font-size: 16px; }
  .era { grid-template-columns: 48px 1fr; gap: 13px; }
  .era-marker { width: 48px; height: 48px; }
  .timeline::before { left: 23px; }
  .era-copy { padding: 20px; }
  .graph-panel canvas { height: 58vh; }
  .graph-tooltip { max-width: calc(100% - 34px); }
  .graph-alternative { grid-template-columns: 1fr; }
  .dossier-facts { grid-template-columns: 1fr; }
  .dossier-facts > div:nth-child(odd) { border-right: 0; }
  footer { flex-direction: column; }
  .overlay-dialog { padding: 18px; }
}

@media (max-width: 420px) {
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric span { font-size: 8px; }
  .archive-roster { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .card-topline { display: grid; }
}

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

body.motion-off *, body.motion-off *::before, body.motion-off *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
body.motion-off .reveal-ready { opacity: 1; translate: 0; }
body.motion-off #cosmos { opacity: .2; }
body.motion-off .card:hover, body.motion-off .art-tile:hover img, body.motion-off .btn:hover { transform: none; }

@media print {
  .sidebar, .topbar, #cosmos, .ambient, .scroll-progress, .button-row, footer { display: none !important; }
  body { background: #fff; color: #111; }
  main { max-width: none; padding: 0; }
}