:root {
  --orange-900: #f46021; --orange-600: #f69000; --orange-500: #ffb834; --orange-300: #ffd581; --orange-100: #ffefd4;
  --text-base: #292929; --text-default: #707070; --text-muted: #8f8f8f; --text-faint: #d1d1d1;
  --border: #f4f4f4; --border-strong: #ececec; --border-dashed: #ebebeb; --grid: #f4f4f4;
  --surface: #fdfdfd; --faint: #f7f7f7; --base: #fff;
  --success: #25855a; --blue: #1570c8; --purple: #7559b8;
  --sans: 'STK Bureau', Arial, sans-serif; --mono: 'Paper Mono', 'Courier New', monospace;
  --ease-cf: cubic-bezier(.6,.6,0,1);
  --shadow-elevation: inset 0 0 0 1px transparent,0 24px 32px -12px oklab(0% 0 0/.03),0 6px 12px 0 oklab(0% 0 0/.01),0 3px 6px 0 oklab(0% 0 0/.01),0 0 0 1px oklab(0% 0 0/.04);
  --shadow-button-primary: inset 0 -1px 3px 0 oklab(84.5135% .0481 .0956/.12),inset 0 -.5px .5px 0 oklab(84.5135% .0481 .0956/.24),inset 0 4px 8px 0 oklab(84.5135% .0481 .0956/.12),inset 0 1px 3px 0 oklab(84.5135% .0481 .0956/.24),inset 0 .25px .25px 0 #f69032,0 6px 10px -4px oklab(64.7844% .1534 .1154/.24),0 2px 4px -1px oklab(64.7844% .1534 .1154/.12);
  --header: 72px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--base); color: var(--text-base); font-family: var(--sans); font-size: 15px; font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* header */
.header { position: fixed; inset: 0 0 auto; height: var(--header); background: rgba(255,255,255,.86); backdrop-filter: blur(12px); z-index: 50; border-bottom: 1px solid var(--border); }
.header-inner { height: 100%; padding: 0 28px; display: flex; align-items: center; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 16px; }
.brand-product { padding-left: 10px; border-left: 1px solid var(--border-strong); font-size: 14px; }
.nav { display: flex; gap: 2px; margin-left: 28px; }
.nav a { padding: 6px 12px; border-radius: 999px; font-size: 13px; transition: background .2s var(--ease-cf); }
.nav a:hover { background: var(--faint); }
.nav a.active { background: var(--orange-100); color: var(--orange-900); font-weight: 400; }
.header-actions { margin-left: 12px; }
.button { position: relative; isolation: isolate; display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 400; line-height: 20px; white-space: nowrap; cursor: pointer; transition: all .2s var(--ease-cf); }
.button span { padding-inline: 6px; }
.button-primary { background: var(--orange-900); color: #fff; box-shadow: var(--shadow-button-primary); }
.button-primary:hover { filter: brightness(1.06); }
.button-secondary { background: var(--base); box-shadow: 0 4px 8px -2px rgba(0,0,0,.02), 0 2px 4px -1px rgba(0,0,0,.02), 0 0 0 1px rgba(0,0,0,.07); }
.button-secondary:hover { box-shadow: 0 8px 12px -2px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.1); }

/* search */
.search { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; width: 320px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--base); box-shadow: 0 0 0 1px rgba(0,0,0,.07); color: var(--text-muted); }
.search:focus-within { box-shadow: 0 0 0 1px var(--orange-900), 0 0 0 4px var(--orange-100); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text-base); }
.search kbd { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 4px; box-shadow: 0 0 0 1px var(--border-strong); color: var(--text-muted); }
.results { position: absolute; top: 44px; left: 0; right: 0; background: var(--base); border-radius: 12px; box-shadow: var(--shadow-elevation); overflow: hidden; display: none; }
.results.open { display: block; }
.results div { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; color: var(--text-base); cursor: pointer; }
.results div.hl, .results div:hover { background: var(--faint); }
.results small { margin-left: auto; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* stage + views */
#stage { position: fixed; inset: var(--header) 0 0 0; }
.view { position: absolute; inset: 0; overflow: hidden; }
.section-grid { background-color: var(--surface); background-image: linear-gradient(var(--grid) .5px,transparent .5px),linear-gradient(90deg,var(--grid) .5px,transparent .5px); background-size: 80px 80px; }
.page-label { position: absolute; top: 18px; left: 24px; white-space: nowrap; color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; user-select: none; z-index: 3; }
.register-dot { position: absolute; z-index: 4; width: 3px; height: 3px; border-radius: 50%; background: var(--orange-900); }
.register-dot.tl { top: 8px; left: 8px; } .register-dot.tr { top: 8px; right: 8px; }
.register-dot.bl { bottom: 8px; left: 8px; } .register-dot.br { bottom: 8px; right: 8px; }

/* cards (tunnel-ui style) */
.card { background: var(--base); border-radius: 12px; box-shadow: var(--shadow-elevation); }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.card-head span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-900); display: inline-block; box-shadow: 0 0 0 3px var(--orange-100); }
.mono-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--base); box-shadow: 0 0 0 1px rgba(0,0,0,.07); font-size: 12px; cursor: pointer; transition: all .2s var(--ease-cf); }
.pill:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.pill[aria-pressed="true"] { background: var(--orange-100); color: var(--orange-900); box-shadow: 0 0 0 1px var(--orange-300); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* map */
#sigma { position: absolute; inset: 0; }
#territories { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.legend { position: absolute; top: 44px; left: 24px; width: 268px; z-index: 5; max-height: calc(100% - 110px); overflow: auto; }
.legend-body { padding: 0 18px 16px; border-top: 1px dashed var(--border-dashed); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters .pill { font-size: 11.5px; padding: 3px 9px 3px 7px; }
.filters .pill[aria-pressed="false"] { opacity: .45; }
.filters .pill .n { font-family: var(--mono); font-size: 10px; color: var(--text-muted); }
.filters .bar { width: 12px; height: 2px; border-radius: 2px; display: inline-block; }
.toggles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-dashed); }
.stats-strip { position: absolute; left: 24px; bottom: 20px; z-index: 5; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); display: flex; gap: 18px; }
.stats-strip b { color: var(--text-base); font-weight: 500; }
.tooltip { position: absolute; z-index: 20; pointer-events: none; background: var(--base); border-radius: 10px; box-shadow: var(--shadow-elevation); padding: 10px 14px; max-width: 280px; display: none; }
.tooltip .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tooltip .name { font-size: 16px; font-weight: 400; margin: 2px 0; }
.tooltip p { margin: 0; font-size: 12.5px; color: var(--text-default); }

/* web */
#web { position: absolute; inset: 0; width: 100%; height: 100%; }
#web text { font-family: var(--sans); fill: var(--text-base); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; cursor: pointer; transition: fill .15s; }
#web .leaf.sub text { fill: var(--text-muted); }
#web .leaf.dim text { fill: var(--text-faint); }
#web .leaf.src text { fill: var(--orange-900); font-weight: 400; }
#web .leaf.tgt text { fill: var(--blue); font-weight: 400; }
#web .leaf.both text { fill: var(--purple); font-weight: 400; }
#web .leaf.focus text { fill: var(--text-base); font-weight: 400; }
#web .web-root { transition: transform .6s var(--ease-cf); }
.web-card { transition: opacity .3s; }
.web-card.faded { opacity: 0; pointer-events: none; }
#web .links path { fill: none; mix-blend-mode: multiply; transition: stroke-opacity .2s, stroke .2s; }
#web .cat-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; stroke-width: 4px; }
.web-card { position: absolute; top: 44px; left: 24px; width: 300px; z-index: 5; }
.web-copy { padding: 0 18px 18px; border-top: 1px dashed var(--border-dashed); }
.web-copy .big { font-size: 48px; letter-spacing: -1.4px; line-height: 1.1; margin-top: 14px; }
.web-copy .big small { font-size: 14px; letter-spacing: 0; color: var(--text-muted); margin-left: 6px; }
.web-copy p { color: var(--text-default); font-size: 13px; margin: 8px 0 12px; }
.web-key { display: flex; gap: 14px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.web-key i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }

/* index */
.view.index { overflow-y: auto; background: var(--base); }
.page { position: relative; width: min(1200px, 100%); margin-inline: auto; border-inline: 1px solid var(--border); }
.page .page-label.left { left: auto; right: calc(100% + 40px); top: 29px; }
.index-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 96px 80px; border-bottom: 1px solid var(--border); }
.hero-eyebrow { display: block; margin-bottom: 24px; color: var(--text-faint); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.hero-eyebrow b { color: var(--orange-900); font-weight: inherit; }
.index-hero h1 { font-size: 56px; font-weight: 400; letter-spacing: -1.4px; line-height: 1.08; margin: 0 0 24px; }
.index-hero p { font-size: 19px; color: var(--text-default); margin: 0; }
.index-hero p.disclaimer { margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-faint); }
.leaderboard { align-self: center; }
.leader { display: grid; grid-template-columns: 22px 1fr 54px; align-items: center; gap: 10px; padding: 7px 18px; cursor: pointer; font-size: 14px; }
.leader:hover { background: var(--faint); }
.leader .rank { font-family: var(--mono); font-size: 10px; color: var(--text-faint); }
.leader .track { height: 4px; background: var(--faint); border-radius: 4px; overflow: hidden; grid-column: 2; margin-top: 4px; }
.leader .track i { display: block; height: 100%; border-radius: 4px; }
.leader .deg { font-family: var(--mono); font-size: 11px; color: var(--text-muted); text-align: right; }
.leaderboard #leaders { border-top: 1px dashed var(--border-dashed); padding: 8px 0 12px; }
.cat-section { border-bottom: 1px solid var(--border); }
.cat-head { padding: 64px 80px 32px; }
.cat-head h2 { font-size: 36px; font-weight: 400; letter-spacing: -.8px; margin: 0; }
.cat-head p { color: var(--text-default); margin: 6px 0 0; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
.pcard { padding: 28px 40px 32px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .2s var(--ease-cf); min-height: 210px; display: flex; flex-direction: column; }
.pcard:nth-child(3n) { border-right: 0; }
.pcard:hover { background: var(--surface); }
.pcard:hover h3 { color: var(--orange-900); }
.pcard .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.pcard h3 { font-size: 19px; font-weight: 400; margin: 10px 0 6px; transition: color .2s; }
.pcard p { font-size: 13.5px; color: var(--text-default); margin: 0 0 16px; flex: 1; }
.pcard .meta { display: flex; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pcard .meta b { color: var(--text-base); font-weight: 500; }
.pcard .spark { display: flex; gap: 2px; margin-top: 12px; height: 4px; border-radius: 4px; overflow: hidden; }
.pcard .spark i { display: block; height: 100%; }

/* sheet */
.sheet { position: absolute; top: 20px; right: 20px; bottom: 20px; width: 420px; z-index: 30; overflow-y: auto; animation: sheet-in .35s var(--ease-cf); }
@keyframes sheet-in { from { opacity: 0; transform: translateX(16px); } }
.sheet .close { border: 0; background: transparent; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sheet .close:hover { color: var(--orange-900); }
.sheet-body { padding: 4px 22px 22px; }
.sheet h2 { font-size: 32px; font-weight: 400; letter-spacing: -.8px; line-height: 1.1; margin: 4px 0 10px; }
.sheet .desc { color: var(--text-default); font-size: 14px; margin: 0 0 16px; }
.sheet .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sheet .kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px dashed var(--border-dashed); margin: 0 -22px; }
.sheet .kpis div { padding: 12px 22px; border-right: 1px dashed var(--border-dashed); }
.sheet .kpis div:last-child { border-right: 0; }
.sheet .kpis b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.5px; }
.sheet .kpis span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sheet .ego { display: block; margin: 8px -22px 0; border-bottom: 1px dashed var(--border-dashed); background: var(--surface); }
.sheet .ego text { font-family: var(--sans); font-size: 9.5px; fill: var(--text-default); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sheet .ego circle { cursor: pointer; }
.group { margin-top: 18px; }
.group .mono-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.group .mono-label .bar { width: 14px; height: 2px; border-radius: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--base); box-shadow: 0 0 0 1px rgba(0,0,0,.07); font-size: 12.5px; cursor: pointer; transition: all .15s var(--ease-cf); }
.chip:hover { box-shadow: 0 0 0 1px var(--orange-900); color: var(--orange-900); }
.chip.product { font-weight: 400; }
.sheet .src { margin-top: 20px; font-family: var(--mono); font-size: 10px; color: var(--text-faint); letter-spacing: .04em; word-break: break-all; }
.connection-evidence { font-size: 12px; }
.connection-evidence summary { cursor: pointer; }
.connection-evidence .evidence-note { color: var(--text-muted); margin-top: 10px; }
.connection-evidence ul { padding-left: 18px; }
.connection-evidence li { margin: 12px 0; }
.connection-evidence li p { margin: 4px 0; }
.connection-evidence a { display: block; overflow-wrap: anywhere; margin-top: 4px; }
.filters .pill[aria-pressed="true"] { background: var(--base); color: var(--text-base); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- path finder ---------- */
.path-pickers { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-bottom: 12px; }
.picker { position: relative; }
.picker .mono-label { margin: 0 0 4px; }
.picker input { width: 100%; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--base); box-shadow: 0 0 0 1px rgba(0,0,0,.07); font: inherit; font-size: 13px; color: var(--text-base); outline: 0; }
.picker input:focus { box-shadow: 0 0 0 1px var(--orange-900), 0 0 0 4px var(--orange-100); }
.picker .results { top: 58px; z-index: 5; min-width: 260px; }
.path-pickers .swap { height: 34px; justify-content: center; }
.path-option { margin: 0 -22px; padding: 12px 22px; border-top: 1px dashed var(--border-dashed); cursor: pointer; transition: background .2s var(--ease-cf); }
.path-option:hover { background: var(--surface); }
.path-option.active { cursor: default; background: var(--surface); }
.path-option .mono-label { margin: 0 0 6px; }
.path-option.active > .mono-label { color: var(--orange-900); }
.path-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; }
.path-strip > span { display: inline-flex; align-items: center; gap: 6px; }
.path-strip i { font-style: normal; color: var(--text-muted); }
.path-detail { margin-top: 14px; }
.path-node { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.path-node b { font-weight: 400; cursor: pointer; }
.path-node b:hover { color: var(--orange-900); }
.path-node .status { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background: var(--faint); color: var(--text-muted); }
.path-node .status:not(.s-ga) { background: var(--orange-100); color: var(--orange-900); }
.path-node .links { margin-left: auto; display: flex; gap: 10px; font-size: 12px; }
.path-node .links a, .path-step a { color: var(--blue); }
.path-step { margin: 6px 0 6px 3px; padding: 4px 0 6px 14px; border-left: 2px solid var(--c); font-size: 12px; }
.path-step .mono-label { margin: 0 0 2px; }
.path-step p { margin: 0 0 2px; color: var(--text-default); }
.path-step a { display: block; overflow-wrap: anywhere; }