:root {
  color-scheme: light dark;
  --bg: oklch(0.97 0.004 75);
  --surface: oklch(0.995 0.002 75);
  --surface-2: oklch(0.945 0.008 75);
  --ink: oklch(0.2 0.014 75);
  --ink-2: oklch(0.34 0.012 75);
  --muted: oklch(0.48 0.012 75);
  --line: oklch(0.87 0.01 75);
  --line-strong: oklch(0.72 0.018 75);
  --accent: oklch(0.7 0.145 58);
  --accent-strong: oklch(0.43 0.12 55);
  --accent-soft: oklch(0.93 0.045 65);
  --warm-soft: oklch(0.95 0.028 90);
  --warm-ink: oklch(0.4 0.055 70);
  --danger-soft: oklch(0.95 0.025 30);
  --danger-ink: oklch(0.42 0.08 30);
  --radius-card: 10px;
  --radius-control: 8px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { color: var(--ink); background: var(--accent-soft); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 82%, transparent);
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
}
.nav {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
  max-width: 1280px;
  margin: auto;
  padding: 12px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand > span:last-child { display: grid; line-height: 1.1; }
.brand strong { font-size: 15px; letter-spacing: -0.02em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-mark-bg { fill: var(--ink); }
.brand-mark-lines { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-width: 2; }
.brand-mark-point { fill: var(--surface); }
.nav-links { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.nav-links a {
  position: relative;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; right: 14px; bottom: 4px; left: 14px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transform: scaleX(.45); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.nav-links a.active { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px color-mix(in oklch, var(--ink) 10%, transparent); }
.nav-links a.active::after { opacity: 1; transform: scaleX(1); }
.live-indicator {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.live-indicator i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.wrap { width: min(100%, 1280px); margin: auto; padding: 72px 24px; }
.hero-band, .page-intro { border-bottom: 1px solid var(--line); background: var(--surface); }
.section-tint { border-block: 1px solid var(--line); background: var(--surface-2); }
.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
  align-items: center;
  gap: clamp(48px, 8vw, 108px);
  min-height: calc(100dvh - 64px);
  max-height: 880px;
}
.hero-copy { padding-block: 24px; }
.hero-kicker, .section-label {
  margin: 0 0 14px;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 750;
}
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
h1 { max-width: 820px; font-size: clamp(44px, 6vw, 76px); font-weight: 780; }
h2 { max-width: 860px; font-size: clamp(30px, 4vw, 48px); font-weight: 750; }
h3 { font-size: 20px; font-weight: 730; }
.lead { max-width: 66ch; margin: 24px 0 0; color: var(--ink-2); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.primary-button, .ghost-button, .link-button, .quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.primary-button { color: var(--surface); background: var(--ink); box-shadow: 0 2px 4px color-mix(in oklch, var(--ink) 18%, transparent); }
.ghost-button, .link-button { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.quiet-button { width: 100%; margin-top: 24px; color: var(--ink-2); border-color: var(--line); background: transparent; }
.primary-button:hover { background: var(--accent-strong); box-shadow: 0 3px 6px color-mix(in oklch, var(--accent-strong) 24%, transparent); }
.ghost-button:hover, .link-button:hover, .quiet-button:hover { border-color: var(--accent-strong); background: var(--accent-soft); }
.primary-button:active, .ghost-button:active, .link-button:active, .quiet-button:active { transform: translateY(1px); }
.text-link { color: var(--accent-strong); font-size: 14px; font-weight: 750; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--accent) 50%, transparent); text-underline-offset: 4px; }

.stats-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.stat { min-width: 120px; padding-right: 24px; }
.stat strong { display: block; font-size: 30px; line-height: 1; letter-spacing: -0.04em; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }

.coverage-panel { overflow: hidden; border-radius: var(--radius-card); background: var(--ink); color: var(--surface); box-shadow: 0 4px 8px color-mix(in oklch, var(--ink) 14%, transparent); }
.coverage-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; border-bottom: 1px solid color-mix(in oklch, var(--surface) 18%, transparent); }
.coverage-head div { display: grid; gap: 3px; }
.coverage-head span, .coverage-note { color: color-mix(in oklch, var(--surface) 64%, transparent); font-size: 13px; }
.coverage-head strong { font-size: 17px; }
.coverage-head a { color: var(--accent); font-size: 13px; font-weight: 750; }
.coverage-list { padding: 8px 22px; }
.coverage-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid color-mix(in oklch, var(--surface) 14%, transparent); transition: color 160ms var(--ease-out); }
.coverage-row:hover strong { color: var(--accent); }
.coverage-row:last-child { border-bottom: 0; }
.coverage-row span { color: var(--accent); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.coverage-row strong { color: var(--surface); font-size: 14px; letter-spacing: 0; }
.coverage-row b { color: color-mix(in oklch, var(--surface) 70%, transparent); font-size: 13px; font-weight: 600; }
.coverage-note { margin: 0; padding: 16px 22px 18px; border-top: 1px solid color-mix(in oklch, var(--surface) 14%, transparent); }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.research-note { max-width: 90ch; margin: -4px 0 44px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink-2); background: var(--surface); text-wrap: pretty; }
.strategy-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.strategy-list li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 28px 28px 30px 0; border-bottom: 1px solid var(--line); }
.strategy-list li:nth-child(odd) { padding-right: 30px; }
.strategy-list li:nth-child(even) { padding-left: 30px; }
.strategy-id { padding-top: 4px; color: var(--accent-strong); font: 750 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.strategy-list h3 { font-size: 22px; }
.strategy-list p { max-width: 58ch; margin: 13px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; text-wrap: pretty; }

.matrix-preview { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 44px; }
.cluster-list { border-top: 1px solid var(--line-strong); }
.cluster-item { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background 160ms var(--ease-out); }
a.cluster-item:hover { background: var(--surface); }
.cluster-number { color: var(--accent-strong); font: 750 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.cluster-item strong { font-size: 15px; }
.cluster-item p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.table-shell { overflow-x: auto; border-top: 1px solid var(--line-strong); }
.mini-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini-table th { padding: 12px; color: var(--muted); text-align: left; font-size: 12px; font-weight: 700; }
.mini-table td { padding: 17px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.mini-table tr:hover td { background: var(--surface); }

.page-intro .wrap { padding-block: 76px; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr); align-items: end; gap: 64px; }
.intro-grid .lead { margin: 0; }
.intro-grid h1 { font-size: clamp(42px, 5.2vw, 68px); }
.timeline-intro { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr); }
.timeline-intro .compact-stats { grid-column: 1 / -1; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.breadcrumb a { color: var(--accent-strong); font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 160ms var(--ease-out); }
.breadcrumb a:hover { text-decoration-color: var(--accent); }

.filters-layout, .timeline-layout { display: grid; grid-template-columns: 238px minmax(0, 1fr); align-items: start; gap: 52px; }
.filter-panel { position: sticky; top: 86px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2); }
.filter-panel label { display: block; margin: 0 0 8px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.filter-group { margin-top: 22px; }
.search-input, .select {
  width: 100%;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  outline: none;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
}
.search-input::placeholder { color: var(--muted); opacity: 1; }
.search-input:focus, .select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.segmented { display: grid; gap: 4px; }
.segmented button { min-height: 40px; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; text-align: left; font-size: 14px; }
.segmented button:hover { color: var(--ink); background: var(--surface); }
.segmented button.active { color: var(--accent-strong); background: var(--accent-soft); font-weight: 750; }
.filter-help { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.7; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-group-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 12px; padding: 13px 2px 8px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; }
.product-group-heading strong { color: var(--ink); }
.product-card { display: flex; flex-direction: column; min-height: 296px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.product-card:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 55%, var(--line)); box-shadow: 0 4px 8px color-mix(in oklch, var(--accent-strong) 12%, transparent); }
.card-top { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.product-identity, .detail-heading-row, .timeline-product-line, .table-product { display: flex; align-items: center; gap: 12px; }
.product-identity { align-items: start; min-width: 0; }
.product-identity > div { min-width: 0; }
.product-mark { position: relative; display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--accent-strong); background: color-mix(in oklch, var(--surface-2) 88%, var(--accent-soft)); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.04em; }
.product-mark img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; background: color-mix(in oklch, var(--surface-2) 94%, transparent); }
.product-mark.small { flex-basis: 30px; width: 30px; height: 30px; border-radius: 7px; font-size: 8px; }
.product-mark.small img { padding: 4px; }
.product-mark.large { flex-basis: 76px; width: 76px; height: 76px; border-radius: 15px; font-size: 18px; }
.product-mark.large img { padding: 9px; }
.product-card h3 { max-width: 320px; font-size: 21px; }
.product-card h3 a:hover { color: var(--accent-strong); }
.product-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.product-meta span { position: relative; }
.product-meta span::before { content: ""; position: absolute; top: 50%; left: -7px; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }
.card-top .product-meta { margin-top: 8px; }
.product-card > p { margin: 20px 0; color: var(--ink-2); font-size: 14px; line-height: 1.72; text-wrap: pretty; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 650; }
.tag.teal { color: var(--accent-strong); border-color: color-mix(in oklch, var(--accent) 42%, var(--line)); background: var(--accent-soft); }
.tag.gold { color: var(--warm-ink); border-color: color-mix(in oklch, var(--warm-ink) 32%, var(--line)); background: var(--warm-soft); }
.tag.coral { color: var(--danger-ink); border-color: color-mix(in oklch, var(--danger-ink) 30%, var(--line)); background: var(--danger-soft); }
.card-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; }
.external-links { display: flex; flex-wrap: wrap; gap: 6px; }
.card-footer .link-button, .timeline-links .link-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.empty-state { display: grid; gap: 7px; padding: 48px; border: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--line-strong)); border-radius: var(--radius-card); color: var(--muted); background: var(--surface); text-align: center; }
.empty-state strong { color: var(--ink); font-size: 17px; }
.empty-state span { font-size: 14px; }

.detail-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: end; gap: 64px; }
.detail-heading-row { align-items: center; margin-top: 20px; }
.detail-heading-row h1 { margin: 0; }
.detail-title > p:not(.breadcrumb) { max-width: 70ch; margin: 24px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.75; }
.fact-panel, .side-panel { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface-2); }
.facts { display: grid; gap: 4px; }
.fact { display: grid; grid-template-columns: 86px 1fr; gap: 15px; padding: 12px; border-radius: 7px; }
.fact:nth-child(odd) { background: var(--surface); }
.fact span { color: var(--muted); font-size: 12px; }
.fact strong { font-size: 13px; font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 70px; }
.content-section { padding: 0 0 50px; margin-bottom: 50px; border-bottom: 1px solid var(--line); }
.content-section h2 { margin-bottom: 26px; font-size: 30px; }
.bullet-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bullet-list li { position: relative; padding: 15px 16px 15px 40px; border-radius: var(--radius-control); color: var(--ink-2); background: var(--surface); font-size: 15px; line-height: 1.7; }
.bullet-list li::before { content: ""; position: absolute; left: 18px; top: 25px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.side-stack { position: sticky; top: 90px; display: grid; gap: 22px; }
.side-panel h3 { font-size: 17px; }
details { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
summary { padding: 16px 18px; cursor: pointer; font-size: 14px; font-weight: 750; }
.legacy-updates { padding: 4px 18px 18px; }

.compact-stats { max-width: 720px; }
.timeline-list { position: relative; display: grid; }
.timeline-list::before { content: ""; position: absolute; left: 119px; top: 4px; bottom: 0; width: 1px; background: var(--line); }
.timeline-card { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 36px; padding: 0 0 46px; }
.timeline-date { padding-top: 5px; color: var(--muted); font: 650 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.timeline-card::before { content: ""; position: absolute; left: 115px; top: 6px; z-index: 2; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.timeline-body { padding: 0 0 34px; border-bottom: 1px solid var(--line); }
.timeline-product-line { min-height: 30px; }
.timeline-body h3 { max-width: 780px; margin-top: 15px; font-size: 24px; }
.timeline-body > p { max-width: 74ch; margin: 14px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.75; text-wrap: pretty; }
.impact-note { display: grid; gap: 5px; margin-top: 20px; padding: 14px 16px; border: 1px solid color-mix(in oklch, var(--accent) 35%, var(--line)); border-radius: var(--radius-control); background: var(--accent-soft); color: var(--ink-2); font-size: 14px; }
.impact-note strong { color: var(--accent-strong); font-size: 13px; }
.timeline-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 12px; }
.timeline-links > a:not(.link-button) { color: var(--accent-strong); font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.table-product { color: var(--ink); }
.table-product span:last-child { display: grid; gap: 3px; }
.table-product small { color: var(--muted); font-size: 11px; }

.footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(0.16 0.008 75);
    --surface: oklch(0.2 0.01 75);
    --surface-2: oklch(0.245 0.012 75);
    --ink: oklch(0.94 0.008 75);
    --ink-2: oklch(0.82 0.01 75);
    --muted: oklch(0.67 0.012 75);
    --line: oklch(0.32 0.012 75);
    --line-strong: oklch(0.47 0.018 75);
    --accent: oklch(0.77 0.13 60);
    --accent-strong: oklch(0.84 0.11 60);
    --accent-soft: oklch(0.29 0.05 60);
    --warm-soft: oklch(0.29 0.035 90);
    --warm-ink: oklch(0.82 0.06 75);
    --danger-soft: oklch(0.29 0.04 30);
    --danger-ink: oklch(0.8 0.07 30);
  }
  .coverage-panel { background: oklch(0.115 0.009 75); }
  .primary-button { color: oklch(0.16 0.01 75); background: var(--accent); }
  .primary-button:hover { background: var(--accent-strong); }
}

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .live-indicator { display: none; }
  .dashboard-hero, .detail-hero, .intro-grid { grid-template-columns: 1fr; min-height: auto; max-height: none; }
  .dashboard-hero { padding-block: 72px; }
  .intro-grid { gap: 28px; }
  .intro-grid .lead { margin: 0; }
  .matrix-preview, .detail-grid { grid-template-columns: 1fr; }
  .filters-layout, .timeline-layout { grid-template-columns: 1fr; gap: 34px; }
  .filter-panel, .side-stack { position: static; }
  .filter-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .filter-group, .quiet-button { margin-top: 0; }
  .filter-help { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .brand { flex: 1; }
  .nav-links { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .nav-links a { display: flex; align-items: center; justify-content: center; padding: 8px 5px; font-size: 13px; }
  .wrap { padding: 52px 16px; }
  .dashboard-hero { padding-block: 52px; }
  .page-intro .wrap { padding-block: 52px; }
  h1, .intro-grid h1 { font-size: clamp(38px, 11vw, 52px); }
  h2 { font-size: 31px; }
  .lead { font-size: 16px; }
  .stats-row { gap: 0; }
  .stat { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .coverage-row { grid-template-columns: 30px minmax(0, 1fr); }
  .coverage-row b { grid-column: 2; }
  .section-head { align-items: start; flex-direction: column; }
  .research-note { margin-bottom: 30px; }
  .strategy-list { grid-template-columns: 1fr; }
  .strategy-list li, .strategy-list li:nth-child(odd), .strategy-list li:nth-child(even) { padding: 24px 0; }
  .product-grid { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
  .card-top, .card-footer { align-items: start; flex-direction: column; }
  .timeline-list::before { left: 6px; }
  .timeline-card { grid-template-columns: 1fr; gap: 12px; padding-left: 26px; }
  .timeline-card::before { left: 2px; }
  .timeline-body h3 { font-size: 21px; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .radar-state i { box-shadow: none; }
  .split-heading > span, .motion-enabled [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Graphite Constellation */
:root {
  --bg: oklch(0.105 0.004 70);
  --surface: oklch(0.145 0.006 70);
  --surface-2: oklch(0.185 0.008 70);
  --ink: oklch(0.94 0.008 70);
  --ink-2: oklch(0.79 0.008 70);
  --muted: oklch(0.62 0.008 70);
  --line: oklch(0.28 0.009 70);
  --line-strong: oklch(0.43 0.012 70);
  --accent: oklch(0.76 0.15 60);
  --accent-strong: oklch(0.82 0.13 62);
  --accent-soft: oklch(0.25 0.04 60);
  --warm-soft: oklch(0.23 0.025 90);
  --warm-ink: oklch(0.82 0.07 70);
  --danger-soft: oklch(0.24 0.035 30);
  --danger-ink: oklch(0.8 0.07 30);
}
body { background: var(--bg); font-size: 15px; }
.site-header { border-color: var(--line); background: color-mix(in oklch, var(--bg) 91%, transparent); }
.page-progress { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 4; height: 1px; pointer-events: none; }
.page-progress i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; will-change: transform; }
.nav { max-width: 1440px; min-height: 70px; padding-inline: 34px; }
.brand small { font: 500 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark-bg { fill: var(--surface-2); stroke: var(--line-strong); }
.nav-links { position: relative; gap: 28px; padding: 0; background: transparent; }
.nav-links a { z-index: 2; min-height: 69px; padding: 23px 0 20px; border-radius: 0; font-size: 12px; }
.nav-links a.active { background: transparent; box-shadow: none; }
.nav-links a::after { right: 0; bottom: -1px; left: 0; }
.nav-links a.active::after { opacity: 0; }
.nav-glider { position: absolute; bottom: -1px; left: 0; width: var(--nav-width, 0); height: 2px; border-radius: 2px; background: var(--accent); transform: translateX(var(--nav-x, 0)); transition: transform 220ms var(--ease-out); }
.live-indicator { font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.wrap { width: min(100%, 1440px); padding-inline: 34px; }
h1, h2, h3 { letter-spacing: -.04em; }
.primary-button { color: var(--bg); background: var(--ink); box-shadow: none; }
.primary-button:hover { color: var(--bg); background: var(--accent-strong); }
.ghost-button, .link-button { background: color-mix(in oklch, var(--surface) 85%, transparent); }

.graphite-hero { position: relative; overflow: hidden; border-bottom: 0; background: var(--bg); }
.galaxy-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .58; mix-blend-mode: screen; mask-image: radial-gradient(ellipse 92% 88% at 34% 48%, black 0%, color-mix(in oklch, black 72%, transparent) 58%, transparent 100%); }
.ambient-map { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .38; mask-image: linear-gradient(to bottom, black 5%, black 78%, transparent 100%); }
.dashboard-hero { position: relative; z-index: 2; grid-template-columns: minmax(430px, .82fr) minmax(650px, 1.18fr); gap: 42px; min-height: 690px; max-height: none; padding-block: 34px 22px; }
.hero-copy { display: flex; flex-direction: column; align-self: stretch; padding: 48px 15px 34px 10px; }
.hero-kicker { display: flex; align-items: center; gap: 11px; color: var(--accent-strong); font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.hero-kicker::before { content: ""; width: 28px; border-top: 1px solid var(--accent); }
.hero-copy h1 { max-width: 650px; font-size: 70px; line-height: 1.02; letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--accent-strong); font-style: normal; }
.split-heading > span { display: block; }
.motion-enabled .split-heading:not(.split-visible) > span { opacity: 0; transform: translateY(22px); }
.motion-enabled .split-heading.split-visible > span { opacity: 1; transform: translateY(0); transition: opacity 620ms var(--ease-out) var(--split-delay), transform 620ms var(--ease-out) var(--split-delay); }
.hero-copy .lead { max-width: 570px; color: var(--ink-2); font-size: 15px; }
.hero-copy .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: auto; border-block: 1px solid var(--line); }
.hero-copy .stat { padding: 19px 16px; border-right: 1px solid var(--line); }
.hero-copy .stat:first-child { padding-left: 0; }
.hero-copy .stat:last-child { border-right: 0; }
.hero-copy .stat strong { font: 650 29px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.hero-copy .stat span { font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

.competition-map { position: relative; overflow: hidden; min-height: 625px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, color-mix(in oklch, var(--surface) 90%, transparent), color-mix(in oklch, var(--bg) 92%, transparent)); box-shadow: inset 0 1px color-mix(in oklch, var(--ink) 7%, transparent), 0 8px 30px color-mix(in oklch, black 28%, transparent); }
.competition-map::before { content: ""; position: absolute; inset: 0; background: linear-gradient(color-mix(in oklch, var(--ink) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 3%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.competition-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#radar-map { z-index: 1; opacity: .68; mix-blend-mode: screen; pointer-events: none; }
#competition-map { z-index: 2; pointer-events: none; }
.radar-cardinals { position: absolute; z-index: 3; inset: 0; pointer-events: none; color: color-mix(in oklch, var(--accent-strong) 28%, transparent); font: 600 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.radar-cardinals span { position: absolute; }
.radar-cardinals span:nth-child(1) { top: 9%; left: 50%; transform: translateX(-50%); }
.radar-cardinals span:nth-child(2) { top: 50%; right: 9%; transform: translateY(-50%); }
.radar-cardinals span:nth-child(3) { bottom: 9%; left: 50%; transform: translateX(-50%); }
.radar-cardinals span:nth-child(4) { top: 50%; left: 9%; transform: translateY(-50%); }
.map-head { position: absolute; z-index: 5; top: 22px; right: 24px; left: 24px; display: flex; justify-content: space-between; }
.map-head div { display: grid; gap: 4px; }
.map-head strong { font-size: 13px; }
.map-head div span, .map-head > span { color: var(--muted); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-head > span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in oklch, var(--surface-2) 70%, transparent); }
.map-head .radar-state { display: flex; align-items: center; gap: 6px; color: var(--accent-strong); border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); }
.radar-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 12%, transparent); }
.map-axis { position: absolute; z-index: 3; display: flex; justify-content: space-between; color: color-mix(in oklch, var(--ink) 28%, transparent); font: 500 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.axis-x { right: 24px; bottom: 54px; left: 24px; padding-top: 7px; border-top: 1px solid color-mix(in oklch, var(--ink) 7%, transparent); }
.axis-y { top: 100px; bottom: 75px; left: 24px; padding-right: 7px; border-right: 1px solid color-mix(in oklch, var(--ink) 7%, transparent); writing-mode: vertical-rl; }
.map-cluster, .map-product { position: absolute; z-index: 4; display: grid; gap: 2px; padding: 6px 8px; border: 1px solid color-mix(in oklch, var(--ink) 13%, transparent); border-radius: 6px; background: color-mix(in oklch, var(--surface) 86%, transparent); backdrop-filter: blur(10px); font: 500 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-cluster { z-index: 3; color: color-mix(in oklch, var(--ink) 48%, transparent); }
.map-cluster b { color: color-mix(in oklch, var(--accent-strong) 78%, transparent); }
.map-product.major { border-color: color-mix(in oklch, var(--accent) 38%, transparent); }
.map-product b { color: var(--ink); font-size: 9px; }
.map-product span { color: var(--muted); }
.c1 { top: 25%; left: 12%; } .c2 { top: 25%; right: 11%; } .c3 { top: 61%; left: 25%; } .c4 { top: 64%; right: 13%; }
.p1 { top: 38%; left: 13%; } .p2 { top: 29%; left: 32%; } .p3 { top: 31%; right: 29%; } .p4 { top: 40%; right: 12%; }
.p5 { top: 72%; left: 13%; } .p6 { top: 59%; left: 35%; } .p7 { top: 75%; left: 47%; } .p8 { top: 58%; right: 24%; } .p9 { top: 72%; right: 11%; }
.map-legend { position: absolute; z-index: 5; bottom: 20px; left: 24px; display: flex; gap: 18px; color: var(--muted); font: 500 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.map-legend span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--muted); }
.map-legend span:first-child::before { background: var(--accent); }
.map-legend span:last-child::before { background: var(--ink); }

.signal-panels { overflow: clip; background: var(--bg); }
.signal-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 22px; padding-top: 0; padding-bottom: 24px; }
.signal-panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: inset 0 1px color-mix(in oklch, var(--ink) 5%, transparent); transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.signal-panel:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 24%, var(--line)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 0 19px; border-bottom: 1px solid var(--line); }
.panel-head strong { font-size: 12px; }
.panel-head span { color: var(--muted); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.event-list { padding: 0 19px; }
.event-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 15px; align-items: center; min-height: 78px; border-bottom: 1px solid var(--line); }
.event-row:last-child { border-bottom: 0; }
.event-row time { color: var(--muted); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.event-row div { display: grid; gap: 4px; }
.event-row b { font-size: 12px; }
.event-row span { color: var(--muted); font-size: 9px; }
.signal-coverage { padding: 16px 19px 20px; }
.signal-coverage .coverage-row { grid-template-columns: 86px 1fr 22px; min-height: 32px; padding: 0; border: 0; }
.signal-coverage .coverage-row strong { color: var(--muted); font-size: 9px; }
.signal-coverage .coverage-row i { height: 4px; background: color-mix(in oklch, var(--ink) 6%, transparent); }
.signal-coverage .coverage-row i span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.signal-coverage .coverage-row b { color: var(--ink); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

.graphite-section, .section-tint, .page-intro, .hero-band { background: var(--bg); border-color: var(--line); }
.graphite-section .wrap { padding-block: 78px; }
.section-head { padding-bottom: 22px; border-bottom: 1px solid var(--line-strong); }
.section-label { color: var(--accent-strong); font: 700 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.strategy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; border-left: 1px solid var(--line); }
.strategy-list li, .strategy-list li:nth-child(odd), .strategy-list li:nth-child(even) { position: relative; display: block; min-height: 250px; padding: 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, color-mix(in oklch, var(--ink) 2%, transparent), transparent); }
.strategy-id { display: block; padding: 0; color: var(--accent-strong); font-size: 10px; }
.strategy-list h3 { margin-top: 34px; font-size: 16px; line-height: 1.45; }
.strategy-list p { margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.matrix-preview { gap: 28px; }
.route-list .cluster-item { padding: 19px 0; }
.mini-table th { font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.mini-table td { font-size: 12px; }

.page-intro .wrap { padding-block: 60px; }
.intro-grid h1, .detail-title h1 { font-size: 52px; }
.filter-panel, .fact-panel, .side-panel { border-color: var(--line); background: var(--surface); box-shadow: inset 0 1px color-mix(in oklch, var(--ink) 4%, transparent); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: -20px 0 14px; }
.active-filters span { padding: 4px 8px; border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line)); border-radius: 6px; color: var(--accent-strong); background: var(--accent-soft); font: 600 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.product-grid { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-group-heading { padding-top: 24px; border-color: var(--line-strong); }
.product-card { min-height: 285px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; }
.product-card:hover { transform: translateY(-2px); border-color: var(--line); background: color-mix(in oklch, var(--accent-soft) 22%, var(--surface)); box-shadow: none; }
.spotlight-surface { position: relative; isolation: isolate; overflow: hidden; }
.spotlight-surface > * { position: relative; z-index: 1; }
.spotlight-surface::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in oklch, var(--accent) 12%, transparent), transparent 64%); transition: opacity 180ms var(--ease-out); }
.spotlight-surface:hover::after, .spotlight-surface:focus-within::after { opacity: 1; }
.bullet-list li { border: 1px solid var(--line); background: var(--surface); }
.detail-outline { display: grid; gap: 2px; }
.detail-outline h3 { margin-bottom: 8px; }
.detail-outline a { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 6px; border-radius: 6px; color: var(--muted); font-size: 11px; transition: color 160ms var(--ease-out), background 160ms var(--ease-out); }
.detail-outline a span { color: var(--accent-strong); font: 600 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.detail-outline a:hover { color: var(--ink); background: var(--accent-soft); }
.timeline-list::before { background: var(--line); }
.timeline-body { border-color: var(--line); }
.timeline-stack .timeline-card { opacity: .52; transform: scale(.985); transform-origin: center top; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.timeline-stack .timeline-card.is-focused { opacity: 1; transform: scale(1); }
.timeline-stack .timeline-card.is-focused .timeline-body { border-color: color-mix(in oklch, var(--accent) 42%, var(--line)); }
.impact-note { border-color: color-mix(in oklch, var(--accent) 30%, var(--line)); background: var(--accent-soft); }
.footer { border-color: var(--line); font: 500 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }

.motion-enabled [data-reveal] { opacity: .48; filter: blur(2px); transform: translate3d(var(--reveal-x), var(--reveal-y), 0); }
.motion-enabled [data-reveal].reveal-visible { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); transition: opacity 420ms var(--ease-out) var(--reveal-delay), filter 420ms var(--ease-out) var(--reveal-delay), transform 420ms var(--ease-out) var(--reveal-delay); }
[data-count] { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .dashboard-hero { grid-template-columns: 1fr; }
  .competition-map { min-height: 620px; }
  .signal-grid { grid-template-columns: 1fr; }
  .strategy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .nav { padding-inline: 14px; }
  .galaxy-background { opacity: .42; mask-image: linear-gradient(to bottom, black 0%, black 48%, transparent 92%); }
  .dashboard-hero { padding-inline: 16px; }
  .hero-copy { padding: 36px 0 20px; }
  .hero-copy h1 { font-size: 50px; }
  .competition-map { min-height: 560px; }
  .map-cluster { display: none; }
  .map-product { font-size: 7px; }
  .p2, .p6, .p8 { display: none; }
  .signal-grid { padding-inline: 16px; }
  .strategy-list { grid-template-columns: 1fr; }
  .strategy-list li, .strategy-list li:nth-child(odd), .strategy-list li:nth-child(even) { min-height: auto; }
  .timeline-stack .timeline-card { opacity: 1; transform: none; }
  .active-filters { margin-top: -12px; }
}

/* Global Galaxy ambient layer (vanilla port of React Bits <Galaxy />) */
html { background: var(--bg); }
body { background: transparent; }

#global-galaxy {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

/* Let the global star field show through page chrome while content surfaces stay opaque for readability */
.graphite-hero,
.hero-band,
.graphite-section,
.section-tint,
.page-intro,
.footer { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  #global-galaxy { opacity: 0.38; }
}

/* BorderGlow (ported from React Bits — JS+CSS variant), retuned to amber/graphite */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 14px;
  --glow-padding: 40px;
  --cone-spread: 22;
  --fill-opacity: 0.4;
  --card-bg: var(--surface);

  /* amber glow ring */
  --glow-color: hsl(40deg 92% 72% / 100%);
  --glow-color-60: hsl(40deg 92% 72% / 60%);
  --glow-color-50: hsl(40deg 92% 72% / 50%);
  --glow-color-40: hsl(40deg 92% 72% / 40%);
  --glow-color-30: hsl(40deg 92% 72% / 30%);
  --glow-color-20: hsl(40deg 92% 72% / 20%);
  --glow-color-10: hsl(40deg 92% 72% / 10%);

  /* amber/gold mesh-gradient border (replaces demo's purple/pink/blue) */
  --gradient-one: radial-gradient(at 80% 55%, #f6b25a 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #e89a3c 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #ffd9a0 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #c9882f 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #f6b25a 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #ffcf8a 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #e89a3c 0px, transparent 50%);
  --gradient-base: linear-gradient(#e89a3c 0 100%);

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid var(--line);
  background: var(--card-bg);
  overflow: visible;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: -1;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

.border-glow-inner {
  display: block;
  position: relative;
  z-index: 1;
}

/* Wrapper tweaks: outer card is the visible frame; inner panel drops its own border */
.map-glow { --border-radius: 14px; }
.map-glow .border-glow-inner { display: grid; }
.map-glow .competition-map { border: none; box-shadow: none; border-radius: 14px; height: 100%; }

.fact-glow { --border-radius: var(--radius-card); --glow-padding: 32px; }
.fact-glow .fact-panel { border: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light { transition: none; }
}