:root {
  --ink: #e9f1ea;
  --muted: #80968d;
  --faint: #385149;
  --bg: #07100f;
  --panel: rgba(9, 20, 18, .88);
  --line: rgba(151, 199, 178, .14);
  --accent: #d9ffaf;
  --accent-2: #7ce0b3;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); }
body { font: 15px/1.45 var(--sans); letter-spacing: .01em; }
button, input { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.topbar {
  height: 76px; display: grid; grid-template-columns: 310px 1fr 110px; align-items: center;
  border-bottom: 1px solid var(--line); background: rgba(7,16,15,.86); backdrop-filter: blur(18px); position: relative; z-index: 12;
}
.identity { display: flex; align-items: center; gap: 14px; padding: 0 20px; min-width: 0; }
.identity h1 { margin: 2px 0 0; font-size: .92rem; letter-spacing: .13em; font-weight: 650; white-space: nowrap; }
.eyebrow { margin: 0; color: var(--accent-2); font-size: .69rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sigil { width: 28px; height: 28px; position: relative; flex: 0 0 auto; border: 1px solid var(--faint); border-radius: 50%; }
.sigil span { position: absolute; border-radius: 50%; border: 1px solid var(--accent-2); }
.sigil span:nth-child(1) { inset: 5px; opacity: .6; }
.sigil span:nth-child(2) { width: 4px; height: 4px; top: 11px; left: 11px; background: var(--accent); border: 0; box-shadow: 0 0 10px var(--accent); }
.sigil span:nth-child(3) { width: 1px; height: 38px; top: -6px; left: 13px; border: 0; background: linear-gradient(transparent, var(--accent-2), transparent); transform: rotate(45deg); }

.view-tabs { justify-self: center; display: flex; gap: 6px; background: rgba(255,255,255,.025); border: 1px solid var(--line); padding: 4px; border-radius: 99px; }
.tab { border: 0; background: none; padding: 8px 16px; border-radius: 99px; color: var(--muted); font-size: .82rem; cursor: pointer; }
.tab:hover { color: var(--ink); }
.tab.active { color: #07100f; background: var(--ink); font-weight: 650; }
.top-actions { display: flex; justify-content: flex-end; gap: 7px; padding-right: 16px; }
.icon-button, .play-button { width: 35px; height: 35px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 50%; cursor: pointer; color: var(--muted); }
.icon-button:hover, .play-button:hover { color: var(--accent); border-color: var(--faint); }

main { height: calc(100vh - 76px); position: relative; display: grid; grid-template-columns: 310px 1fr; }
.left-rail { border-right: 1px solid var(--line); background: rgba(8,18,16,.76); padding: 17px 18px 120px; overflow-y: auto; z-index: 8; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.control-section { padding: 13px 0 17px; border-bottom: 1px solid var(--line); }
.control-section label, .section-head { color: var(--muted); font-size: .68rem; letter-spacing: .15em; font-weight: 700; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.text-button { border: 0; background: none; color: var(--accent-2); cursor: pointer; padding: 0; font-size: .68rem; }
.search-wrap { position: relative; margin-top: 9px; }
#search { width: 100%; height: 42px; padding: 0 44px 0 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 7px; outline: none; background: rgba(255,255,255,.035); font-size: .88rem; }
#search:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(124,224,179,.08); }
#search::placeholder { color: #5f756d; }
kbd { position: absolute; right: 10px; top: 10px; border: 1px solid var(--line); border-bottom-color: var(--faint); border-radius: 4px; color: var(--muted); padding: 1px 6px; font: .7rem var(--sans); }

.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.filter-button { border: 1px solid var(--line); background: transparent; border-radius: 6px; color: var(--muted); padding: 8px 9px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .76rem; text-align: left; }
.filter-button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }
.filter-button.active { color: var(--ink); background: rgba(255,255,255,.04); border-color: var(--faint); }
.filter-button.active::before { background: var(--accent-2); border-color: var(--accent-2); box-shadow: 0 0 8px rgba(124,224,179,.6); }

.route-list { display: grid; gap: 4px; }
.route-button { border: 0; border-left: 2px solid transparent; background: transparent; color: #9cadA7; padding: 8px 10px; cursor: pointer; text-align: left; font-size: .8rem; transition: .2s ease; }
.route-button span { color: var(--faint); margin-right: 7px; }
.route-button:hover { color: var(--ink); background: rgba(255,255,255,.025); }
.route-button.active { border-left-color: var(--accent); color: var(--accent); background: linear-gradient(90deg, rgba(217,255,175,.07), transparent); }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 9px; }
.legend-item { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; cursor: pointer; border: 0; background: none; padding: 2px 0; text-align: left; }
.legend-item:hover, .legend-item.active { color: var(--ink); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; }
.atlas-note { margin-top: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); color: var(--muted); font: .75rem/1.55 var(--sans); }
.atlas-note strong { display: block; color: var(--ink); margin-bottom: 3px; }

.workspace { position: relative; overflow: hidden; background:
  radial-gradient(circle at 52% 45%, rgba(44,91,73,.18), transparent 35%),
  linear-gradient(rgba(104,165,143,.034) 1px, transparent 1px),
  linear-gradient(90deg, rgba(104,165,143,.034) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}
#graph { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#graph.dragging { cursor: grabbing; }
.link { stroke: #6a8f82; stroke-opacity: .20; fill: none; transition: opacity .2s, stroke .2s; }
.link.route { stroke: var(--accent); stroke-opacity: .76; filter: url(#glow); }
.link.dim { stroke-opacity: .035; }
.node { cursor: pointer; outline: none; }
.node .halo { fill: none; stroke-width: 1; stroke-opacity: .7; }
.node .orb { stroke: rgba(255,255,255,.3); stroke-width: .7; transition: opacity .2s; }
.node .bridge-ring { fill: none; stroke: #d9ffaf; stroke-width: 1; stroke-dasharray: 2 4; opacity: .65; }
.node text { fill: #c8d6ce; font: 600 11px var(--sans); paint-order: stroke; stroke: #07100f; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; letter-spacing: .02em; }
.node .meta-label { fill: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.node:hover text, .node:focus text, .node.selected text { fill: #fff; }
.node:hover .orb, .node:focus .orb, .node.selected .orb { filter: url(#glow); }
.node.selected .halo { stroke: #fff; stroke-opacity: 1; }
.node.dim { opacity: .13; }
.node.hidden { display: none; }
.node.pulse .halo { animation: node-pulse 2.8s ease-out infinite; }
@keyframes node-pulse { 0%, 65% { stroke-opacity: .65; transform: scale(1); } 100% { stroke-opacity: 0; transform: scale(1.7); } }

.map-stats { position: absolute; top: 16px; left: 18px; display: flex; gap: 14px; color: var(--muted); font-size: .71rem; letter-spacing: .06em; z-index: 2; }
.map-stats b { color: var(--ink); font-weight: 600; }
.map-instruction { position: absolute; right: 18px; bottom: 104px; color: #557067; font-size: .68rem; letter-spacing: .08em; }
.time-dock { position: absolute; left: 22px; right: 22px; bottom: 18px; min-height: 72px; border: 1px solid var(--line); border-radius: 9px; background: rgba(7,16,15,.84); backdrop-filter: blur(14px); display: grid; grid-template-columns: 170px 1fr 36px; align-items: center; gap: 16px; padding: 12px 14px; z-index: 4; box-shadow: 0 14px 50px rgba(0,0,0,.25); }
.time-copy span { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .15em; }
.time-copy strong { display: block; color: var(--ink); font-size: .8rem; margin-top: 2px; }
#time-range { grid-column: 2; appearance: none; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-2), #34564a); outline: none; }
#time-range::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); box-shadow: 0 0 12px rgba(217,255,175,.55); cursor: grab; }
.time-years { grid-column: 2; display: flex; justify-content: space-between; color: #53695f; font-size: .58rem; letter-spacing: .08em; margin-top: -10px; }
.play-button { grid-column: 3; grid-row: 1 / span 2; color: var(--accent); font-size: .64rem; }

.detail-panel { position: absolute; top: 0; right: 0; width: min(390px, 92vw); height: 100%; z-index: 15; border-left: 1px solid rgba(181,231,205,.2); background: rgba(7,16,15,.96); backdrop-filter: blur(22px); padding: 30px 28px 40px; overflow-y: auto; transform: translateX(105%); transition: transform .34s cubic-bezier(.2,.8,.2,1); box-shadow: -30px 0 80px rgba(0,0,0,.38); }
.detail-panel.open { transform: translateX(0); }
.panel-close { position: absolute; top: 13px; right: 16px; border: 0; background: transparent; color: var(--muted); font-size: 1.45rem; cursor: pointer; line-height: 1; }
.panel-close:hover { color: var(--ink); }
.detail-kicker { color: var(--accent-2); font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; margin: 10px 0 14px; }
.detail-panel h2, dialog h2 { margin: 0 0 13px; font: 500 2rem/1.05 var(--serif); letter-spacing: -.02em; }
.detail-thesis { color: #b5c4bd; font: 1.04rem/1.52 var(--serif); margin: 0 0 23px; }
.detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); margin-bottom: 24px; }
.detail-meta div { padding: 10px; background: #0a1513; }
.detail-meta span { display: block; color: var(--muted); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.detail-meta strong { display: block; margin-top: 3px; color: var(--ink); font-size: .78rem; font-weight: 600; }
.detail-section { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 19px; }
.detail-section h3 { margin: 0 0 12px; color: var(--muted); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; }
.quote { margin: 0 0 11px; padding: 0 0 0 13px; border-left: 1px solid var(--faint); color: #c7d2cc; font: .92rem/1.55 var(--serif); }
.connection-list { display: flex; flex-wrap: wrap; gap: 6px; }
.connection-chip { border: 1px solid var(--line); border-radius: 99px; padding: 6px 9px; background: rgba(255,255,255,.025); color: #a9bbb2; cursor: pointer; font-size: .7rem; }
.connection-chip:hover { color: var(--accent); border-color: var(--faint); }
.why { color: var(--muted); font-size: .78rem; line-height: 1.6; }

.alternate-view { background: #09120f; overflow: auto; }
.alternate-scroll { width: min(1120px, calc(100% - 72px)); margin: 0 auto; padding: 68px 0 120px; }
.view-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: end; margin-bottom: 58px; }
.view-intro .eyebrow { grid-column: 1 / -1; margin-bottom: -48px; }
.view-intro h2 { font: 400 clamp(2rem, 4.3vw, 4.7rem)/.98 var(--serif); margin: 0; letter-spacing: -.045em; max-width: 760px; }
.view-intro > p:last-child { color: var(--muted); font-size: .93rem; line-height: 1.65; max-width: 480px; }
.timeline { position: relative; margin-left: 96px; padding-left: 53px; border-left: 1px solid var(--faint); }
.timeline-entry { position: relative; padding: 0 0 60px; max-width: 780px; }
.timeline-entry::before { content: ""; position: absolute; left: -59px; top: 5px; width: 10px; height: 10px; border: 2px solid var(--entry-color); background: #09120f; border-radius: 50%; box-shadow: 0 0 18px var(--entry-color); }
.timeline-entry .year { position: absolute; left: -145px; top: 1px; color: var(--entry-color); font-size: .69rem; font-weight: 700; letter-spacing: .1em; }
.timeline-entry h3 { font: 500 1.45rem/1.2 var(--serif); margin: 0 0 8px; }
.timeline-entry p { margin: 0 0 12px; color: var(--muted); max-width: 650px; line-height: 1.65; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-tags button { border: 0; background: rgba(255,255,255,.04); color: #aabcb3; border-radius: 4px; padding: 5px 8px; font-size: .68rem; cursor: pointer; }
.timeline-tags button:hover { color: var(--accent); }

.pattern-intro { align-items: start; }
.pattern-intro .eyebrow { grid-column: auto; margin: 0 0 13px; }
.pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pattern-card { background: #09120f; padding: 31px; min-height: 260px; position: relative; overflow: hidden; }
.pattern-card::after { content: attr(data-number); position: absolute; right: 18px; bottom: -28px; color: rgba(217,255,175,.035); font: 110px/1 var(--serif); }
.pattern-card .eyebrow { color: var(--card-color); }
.pattern-card h3 { margin: 17px 0 10px; font: 500 1.65rem/1.1 var(--serif); letter-spacing: -.02em; max-width: 450px; }
.pattern-card p { color: var(--muted); line-height: 1.65; max-width: 520px; }
.pattern-card button { margin-top: 13px; padding: 0; border: 0; background: none; color: var(--accent-2); cursor: pointer; font-size: .74rem; }

dialog { width: min(720px, calc(100% - 28px)); color: var(--ink); border: 1px solid rgba(182,232,207,.25); border-radius: 12px; padding: 34px; background: rgba(8,18,16,.97); box-shadow: 0 30px 100px rgba(0,0,0,.65); }
dialog::backdrop { background: rgba(1,5,4,.74); backdrop-filter: blur(6px); }
dialog .panel-close { top: 18px; right: 20px; }
dialog h2 { font-size: 2.3rem; margin-top: 10px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 26px 0; }
.about-grid > div { background: #0a1513; padding: 19px; display: grid; grid-template-columns: 26px 1fr; gap: 3px 11px; align-items: center; }
.about-grid p { grid-column: 2; color: var(--muted); font-size: .76rem; margin: 0; line-height: 1.45; }
.about-grid strong { font-size: .8rem; }
.about-mark { display: block; justify-self: center; }
.about-mark.large { width: 15px; height: 15px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); }
.about-mark.ring { width: 17px; height: 17px; border: 1px dashed var(--accent); border-radius: 50%; }
.about-mark.line { width: 21px; height: 1px; background: var(--accent-2); }
.about-mark.pulse { width: 10px; height: 10px; border: 1px solid var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(217,255,175,.1); }
.method-note { color: var(--muted); line-height: 1.65; font-size: .82rem; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 250px 1fr 84px; }
  main { grid-template-columns: 250px 1fr; }
  .left-rail { padding-left: 13px; padding-right: 13px; }
  .legend { grid-template-columns: 1fr; }
  .time-dock { grid-template-columns: 140px 1fr 34px; }
  .view-intro { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .view-intro .eyebrow { grid-column: auto; margin-bottom: 0; }
}

@media (max-width: 720px) {
  .topbar { height: 68px; grid-template-columns: 1fr auto; }
  .identity { padding-left: 13px; }
  .identity h1 { font-size: .78rem; }
  .identity .eyebrow { display: none; }
  .view-tabs { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 30; background: rgba(7,16,15,.94); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
  .top-actions { padding-right: 10px; }
  #reset-view { display: none; }
  main { height: calc(100vh - 68px); grid-template-columns: 1fr; }
  .left-rail { position: absolute; top: 0; left: 0; right: 0; height: auto; max-height: 150px; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; overflow-x: auto; overflow-y: hidden; display: flex; gap: 14px; background: rgba(7,16,15,.92); }
  .control-section { flex: 0 0 auto; border: 0; padding: 0; }
  .search-section { width: 220px; }
  .filter-grid { display: flex; }
  .filter-button { white-space: nowrap; padding: 7px 8px; }
  .route-list { display: flex; }
  .route-button { white-space: nowrap; }
  .legend-section, .atlas-note, .section-head { display: none; }
  .workspace { padding-top: 150px; }
  .map-stats { top: 158px; }
  .time-dock { left: 8px; right: 8px; bottom: 70px; grid-template-columns: 1fr 34px; padding: 10px; min-height: 64px; }
  .time-copy { display: none; }
  #time-range, .time-years { grid-column: 1; }
  .map-instruction { display: none; }
  .alternate-view { padding-top: 0; }
  .alternate-scroll { width: calc(100% - 30px); padding-top: 185px; }
  .view-intro h2 { font-size: 2.5rem; }
  .timeline { margin-left: 56px; padding-left: 28px; }
  .timeline-entry::before { left: -34px; }
  .timeline-entry .year { left: -84px; transform: rotate(-90deg); transform-origin: center; }
  .pattern-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
}

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