:root{
  --tv-bg:#f4f8fd;
  --tv-bg-soft:#edf4fc;
  --tv-surface:#ffffff;
  --tv-surface-2:#f7fbff;
  --tv-border:rgba(18,36,58,.12);
  --tv-border-strong:rgba(18,36,58,.18);
  --tv-text:#12243a;
  --tv-muted:#5b6e82;
  --tv-primary:#2f6df6;
  --tv-primary-2:#5a93ff;
  --tv-accent:#0f8a8f;
  --tv-warm:#f0b24d;
  --tv-danger:#d9486b;
  --tv-violet:#6f6bff;
  --tv-shadow:0 24px 60px rgba(20,43,71,.12);
  --tv-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

body.topic-visualization-page[data-topic-theme="dark"]{
  --tv-bg:#070d15;
  --tv-bg-soft:#0f1826;
  --tv-surface:#111a28;
  --tv-surface-2:#172232;
  --tv-border:rgba(160,190,255,.16);
  --tv-border-strong:rgba(160,190,255,.24);
  --tv-text:#ebf3ff;
  --tv-muted:#9bb0c8;
  --tv-primary:#6aa9ff;
  --tv-primary-2:#8bc2ff;
  --tv-accent:#45d1c7;
  --tv-warm:#ffb454;
  --tv-danger:#ff6b87;
  --tv-violet:#a48cff;
  --tv-shadow:0 28px 70px rgba(0,0,0,.42);
}

body.topic-visualization-page{
  background:
    radial-gradient(circle at 8% 8%, rgba(47,109,246,.12), transparent 18%),
    radial-gradient(circle at 92% 12%, rgba(240,178,77,.11), transparent 16%),
    linear-gradient(180deg, var(--tv-bg-soft) 0%, var(--tv-bg) 40%, color-mix(in srgb, var(--tv-bg) 92%, white) 100%);
  color:var(--tv-text);
}

body.topic-visualization-page[data-topic-theme="dark"]{
  background:
    radial-gradient(circle at 10% 8%, rgba(106,169,255,.15), transparent 18%),
    radial-gradient(circle at 90% 8%, rgba(69,209,199,.10), transparent 18%),
    linear-gradient(180deg, #08111c 0%, #0a121d 38%, #0d1725 100%);
}

.topic-visualization-page main{
  padding-bottom:3rem;
}

.tv-back-row,
.tv-hero,
.tv-panel,
.tv-grid-wrap{
  width:min(1240px, calc(100% - 32px));
  margin-inline:auto;
}

.tv-back-row{
  padding-top:18px;
}

.tv-back-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  padding:0 1rem;
  border-radius:999px;
  border:1px solid var(--tv-border);
  background:linear-gradient(180deg, var(--tv-surface), var(--tv-surface-2));
  color:var(--tv-primary);
  font-weight:800;
  box-shadow:0 12px 28px rgba(20,43,71,.08);
}

.tv-hero{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
  gap:24px;
  align-items:stretch;
}

.tv-hero-card,
.tv-panel,
.tv-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--tv-surface) 98%, white), color-mix(in srgb, var(--tv-surface-2) 100%, transparent));
  border:1px solid var(--tv-border);
  border-radius:24px;
  box-shadow:var(--tv-shadow);
  overflow:hidden;
  position:relative;
}

.tv-hero-card::before,
.tv-panel::before,
.tv-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg, var(--tv-primary), var(--tv-primary-2), var(--tv-accent), var(--tv-warm));
}

.tv-hero-copy{
  padding:28px 28px 26px;
}

.tv-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.38rem .75rem;
  border-radius:999px;
  border:1px solid var(--tv-border);
  background:rgba(255,255,255,.58);
  color:var(--tv-primary);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tv-hero h1{
  margin:16px 0 10px;
  font-size:clamp(2rem, 4.5vw, 3.4rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.tv-hero p{
  margin:0;
  color:var(--tv-muted);
  font-size:1rem;
  line-height:1.72;
}

.tv-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.tv-chip{
  padding:.52rem .82rem;
  border-radius:999px;
  border:1px solid var(--tv-border);
  background:rgba(255,255,255,.74);
  color:var(--tv-primary);
  font-size:.8rem;
  font-weight:700;
}

.tv-figure-card{
  display:flex;
  flex-direction:column;
}

.tv-figure-frame{
  padding:24px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tv-figure-frame img{
  width:100%;
  border-radius:18px;
  border:1px solid var(--tv-border);
  background:rgba(255,255,255,.78);
  box-shadow:0 16px 34px rgba(20,43,71,.1);
}

.tv-figure-frame figcaption{
  color:var(--tv-muted);
  font-size:.92rem;
  line-height:1.6;
}

.tv-panel{
  margin-top:24px;
  padding:24px;
}

.tv-panel-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.tv-panel-head h2{
  margin:0;
  font-size:1.55rem;
  line-height:1.08;
  letter-spacing:-.03em;
}

.tv-panel-head p{
  margin:.35rem 0 0;
  max-width:72ch;
  color:var(--tv-muted);
}

.tv-lens-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.tv-lens-btn{
  cursor:pointer;
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--tv-border);
  padding:0 1rem;
  background:linear-gradient(180deg, var(--tv-surface), var(--tv-surface-2));
  color:var(--tv-primary);
  font-weight:800;
}

.tv-lens-btn.active{
  background:linear-gradient(135deg, var(--tv-primary), var(--tv-primary-2));
  color:white;
  border-color:transparent;
  box-shadow:0 16px 34px rgba(47,109,246,.24);
}

.tv-stage-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:18px;
  margin-top:20px;
}

.tv-stage{
  border:1px solid var(--tv-border);
  border-radius:20px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tv-surface) 84%, transparent), color-mix(in srgb, var(--tv-surface-2) 92%, transparent));
  padding:12px;
  min-height:420px;
}

.tv-stage svg{
  width:100%;
  height:auto;
  display:block;
}

.tv-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
  color:var(--tv-muted);
  font-size:.8rem;
}

.tv-legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.tv-legend i{
  width:14px;
  height:14px;
  border-radius:5px;
  display:inline-block;
}

.tv-side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.tv-side-card{
  border:1px solid var(--tv-border);
  border-radius:18px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tv-surface) 96%, white), color-mix(in srgb, var(--tv-surface-2) 96%, transparent));
  padding:16px;
}

.tv-side-card h3,
.tv-side-card h4{
  margin:0 0 8px;
  font-size:1rem;
}

.tv-side-card p,
.tv-side-card li{
  color:var(--tv-muted);
}

.tv-side-card ul{
  margin:0;
  padding-left:1.1rem;
}

.tv-grid-wrap{
  margin-top:24px;
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.tv-card{
  padding:18px;
}

.tv-card .k{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tv-muted);
  font-weight:800;
}

.tv-card .v{
  margin-top:10px;
  font-size:1.75rem;
  font-weight:800;
  line-height:1.1;
}

.tv-card p{
  margin:.55rem 0 0;
  color:var(--tv-muted);
}

.tv-table{
  width:100%;
  border-collapse:collapse;
  margin-top:16px;
}

.tv-table th,
.tv-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--tv-border);
  vertical-align:top;
}

.tv-table th{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tv-muted);
}

.tv-table td{
  color:var(--tv-text);
}

.tv-research-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.tv-research-item{
  border:1px solid var(--tv-border);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tv-surface) 100%, white), color-mix(in srgb, var(--tv-surface-2) 96%, transparent));
}

.tv-research-item strong{
  display:block;
  margin-bottom:6px;
  font-size:.95rem;
}

.tv-research-item p{
  margin:0;
  color:var(--tv-muted);
}

.tv-node rect{
  transition:transform .2s ease, opacity .2s ease, stroke-width .2s ease, filter .2s ease;
}

.tv-node text{
  pointer-events:none;
}

.tv-node.is-focused rect{
  transform:translateY(-4px);
  stroke-width:2.2px;
  filter:drop-shadow(0 14px 24px rgba(47,109,246,.18));
}

.tv-edge{
  fill:none;
  stroke:rgba(120,150,185,.44);
  stroke-width:2;
  stroke-dasharray:9 8;
  animation:tv-flow 1.9s linear infinite;
}

.tv-particle{
  animation:tv-pulse 1.8s ease-in-out infinite;
}

@keyframes tv-flow{
  to{stroke-dashoffset:-34}
}

@keyframes tv-pulse{
  0%,100%{opacity:.34;transform:scale(.92)}
  50%{opacity:1;transform:scale(1.14)}
}

@media (max-width:1080px){
  .tv-hero,
  .tv-stage-wrap,
  .tv-research-list{
    grid-template-columns:1fr;
  }
  .tv-grid-wrap{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width:720px){
  .tv-back-row,
  .tv-hero,
  .tv-panel,
  .tv-grid-wrap{
    width:min(100% - 20px, 1240px);
  }
  .tv-hero-copy,
  .tv-panel,
  .tv-card,
  .tv-figure-frame{
    padding:18px;
  }
  .tv-grid-wrap{
    grid-template-columns:1fr;
  }
}