/* DynaHarness project page. Palette from figures/Pipeline0919.png:
   perception blue, slow-brain rose, fast-brain orange, harness green,
   self-evolution slate, DynaHarness teal. */
:root {
  --teal: #1896A6; --teal-700: #117480; --teal-100: #E3F3F5; --teal-050: #F1F9FA;
  --blue: #4A8FD9; --blue-700: #2F6CB3; --blue-100: #EAF3FC;
  --rose: #D25A5E; --rose-700: #B0413F; --rose-100: #FCEEEE;
  --orange: #E8964A; --orange-700: #C4731F; --orange-100: #FEF3E6;
  --green: #3E9D5F; --green-700: #2C7A48; --green-100: #EAF6EE;
  --slate: #6B7280; --slate-700: #4B5563; --slate-100: #F0F2F4;
  --ink: #14202B; --ink-2: #4A5563; --ink-3: #7C8794;
  --bg: #FFFFFF; --bg-2: #F6F8FA; --bg-3: #EEF1F4; --line: #E5E9EE; --line-2: #D5DBE2;
  --hero-bg: #0B1620; --hero-bg-2: #10202C; --hero-line: rgba(255,255,255,0.09);
  /* chart series, validated: teal, rose, blue, amber, violet; grey = de-emphasis */
  --s1: #0E93A6; --s2: #C9503F; --s3: #3F79C9; --s4: #B8741F; --s5: #7A62B3; --de: #A7AEB7; --de-2: #D2D7DD;
  --radius: 14px; --radius-s: 8px;
  --shadow: 0 1px 2px rgba(20,32,43,0.05), 0 8px 24px rgba(20,32,43,0.06);
  --shadow-2: 0 2px 6px rgba(20,32,43,0.08), 0 18px 48px rgba(20,32,43,0.12);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 16px; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.nav.on-dark { background: rgba(11,22,32,0.7); border-bottom-color: var(--hero-line); }
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.nav.on-dark .brand { color: #fff; }
.nav .brand img { height: 36px; width: auto; }
.nav .links { margin-left: auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav .links::-webkit-scrollbar { display: none; }
.nav .links a { padding: 8px 11px; border-radius: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.nav.on-dark .links a { color: rgba(255,255,255,0.78); }
.nav .links a:hover { background: var(--bg-3); text-decoration: none; }
.nav.on-dark .links a:hover { background: rgba(255,255,255,0.1); }
.nav .links a.cta { background: var(--teal); color: #fff; font-weight: 600; }
.nav .links a.code { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.nav .links a.code svg { width: 15px; height: 15px; }
.nav .links a.cta:hover { background: var(--teal-700); }

/* ---------- hero ---------- */
.hero { background: radial-gradient(1200px 600px at 20% -10%, #14384A 0%, var(--hero-bg) 55%), var(--hero-bg); color: #fff; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(900px 500px at 50% 30%, #000 20%, transparent 80%); -webkit-mask-image: radial-gradient(900px 500px at 50% 30%, #000 20%, transparent 80%); pointer-events: none; }
.hero .wrap { position: relative; padding-top: 56px; padding-bottom: 40px; }
.hero-head { text-align: center; max-width: 900px; margin: 0 auto 28px; }
.hero-head .venue { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px; }
.hero-head .venue b { color: #7FE0EA; font-weight: 600; }
.hero-logo { height: 96px; width: auto; margin: 0 auto 10px; filter: drop-shadow(0 10px 28px rgba(24,150,166,0.45)) drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.hero h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; font-weight: 800; }
.hero h1 .dyna { background: linear-gradient(90deg, #7FE0EA, #4A8FD9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .harn { background: linear-gradient(90deg, #6FD08F, #F2B45E 55%, #F07A7E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); color: rgba(255,255,255,0.78); margin: 0 auto 22px; max-width: 760px; }
.hero .authors { color: rgba(255,255,255,0.85); font-size: 15.5px; margin-bottom: 4px; line-height: 1.6; }
.hero .authors a { color: #fff; text-decoration: underline; text-decoration-color: rgba(127,224,234,0.55); text-underline-offset: 3px; }
.hero .authors a:hover { color: #7FE0EA; text-decoration-color: #7FE0EA; }
.hero .authors sup, .hero .affil sup { font-size: 10px; color: rgba(255,255,255,0.55); margin-left: 1px; }
.hero .affil { color: rgba(255,255,255,0.55); font-size: 13.5px; margin-bottom: 20px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease; text-decoration: none !important; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--teal); color: #fff; }
.btn.primary:hover { background: #1FA9BA; }
.btn.ghost { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.btn.ghost:hover { background: rgba(255,255,255,0.14); }
.btn.light { background: var(--bg); color: var(--ink); border-color: var(--line-2); }
.btn.light:hover { background: var(--bg-2); }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; }

/* the interactive workcell */
.stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr); gap: 16px; align-items: stretch; margin-top: 16px; }
.stage > * { min-width: 0; }
.brain { min-width: 0; }
.scene-card { background: linear-gradient(180deg, #0F2432 0%, #0C1B25 100%); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden; position: relative; min-height: 420px; display: flex; flex-direction: column; }
.scene-card svg { width: 100%; max-width: 100%; height: auto; display: block; }
#workcell { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.scene-topbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: rgba(255,255,255,0.75); flex-wrap: wrap; }
.scene-topbar .task { font-family: var(--mono); color: #fff; background: rgba(255,255,255,0.08); padding: 4px 10px; border-radius: 6px; font-size: 12.5px; }
.scene-topbar .spacer { flex: 1; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: rgba(255,255,255,0.75); border: 0; padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.seg button.active { background: rgba(255,255,255,0.14); color: #fff; font-weight: 600; }
.scene-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.08); align-items: center; }
.scene-controls .hint { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,0.07); color: #fff; border: 1px solid rgba(255,255,255,0.14); font-size: 12.5px; cursor: pointer; }
.chip:hover { background: rgba(255,255,255,0.13); }
.chip.warn { border-color: rgba(232,150,74,0.6); }
.chip.danger { border-color: rgba(210,90,94,0.6); }
.chip.active { background: rgba(24,150,166,0.35); border-color: var(--teal); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.scene-caption { padding: 0 14px 6px; min-height: 58px; display: flex; align-items: flex-end; }
.scene-caption .bubble { display: inline-block; background: rgba(9,20,28,0.85); border: 1px solid rgba(255,255,255,0.14); padding: 8px 12px; border-radius: 10px; font-size: 13px; color: #fff; max-width: 100%; transition: opacity .25s ease; }
.scene-caption .bubble b { color: #7FE0EA; }
.scene-caption .bubble.refuse b { color: #F5A3A5; }
.scene-caption .bubble.ok b { color: #8BE0A4; }

.brains { display: flex; flex-direction: column; gap: 10px; }
.brain { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px 14px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.brain h4 { margin: 0 0 6px; font-size: 13.5px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.brain h4 .tag { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.55); margin-left: auto; font-family: var(--mono); }
.brain .body { font-size: 12.5px; color: rgba(255,255,255,0.7); min-height: 34px; }
.brain .body .line { display: block; }
.brain .body .line + .line { margin-top: 3px; }
.brain .body .k { color: rgba(255,255,255,0.5); }
.brain.slow { --c: var(--rose); }
.brain.fast { --c: var(--orange); }
.brain.harness { --c: var(--green); }
.brain.evo { --c: #9AA5B4; }
.brain h4 .ico { width: 20px; height: 20px; border-radius: 6px; background: var(--c); display: inline-flex; align-items: center; justify-content: center; }
.brain h4 .ico svg { width: 13px; height: 13px; }
.brain.lit { border-color: var(--c); background: rgba(255,255,255,0.07); box-shadow: 0 0 0 1px var(--c), 0 0 24px -6px var(--c); }
.brain .flow { position: absolute; left: 50%; bottom: -11px; width: 2px; height: 12px; background: rgba(255,255,255,0.15); }
.brain .flow::after { content: ''; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0; }
.brain.lit .flow::after { animation: drip .7s ease-in-out infinite; }
@keyframes drip { 0% { top: -2px; opacity: 0; } 30% { opacity: 1; } 100% { top: 8px; opacity: 0; } }
.plan-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-steps li { font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); border-left: 2px solid transparent; }
.plan-steps li.cur { color: #fff; border-left-color: var(--c); background: rgba(255,255,255,0.1); }
.plan-steps li.done { color: #8BE0A4; text-decoration: line-through; opacity: .7; }
.plan-steps li.bad { color: #F5A3A5; text-decoration: line-through; }
.brain.evo { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 118px; }
.evidence { font-family: var(--mono); font-size: 11px; line-height: 17px; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.25); border-radius: 8px; padding: 6px 10px; flex: 1 1 0; min-height: 96px; max-height: 260px; overflow: hidden; position: relative; }
.evidence .row { display: flex; gap: 8px; white-space: nowrap; }
.evidence .row .st { color: rgba(255,255,255,0.4); width: 54px; flex: none; }
.evidence .row .ty { width: 74px; flex: none; }
.evidence .row.slow .ty { color: #F5A3A5; }
.evidence .row.fast .ty { color: #F6C07E; }
.evidence .row.exec .ty { color: #8BE0A4; }
.evidence .row.verdict .ty { color: #7FE0EA; }
.evidence .row.refuse .ty { color: #F5A3A5; }
.evidence .row.fail .ty { color: #F5A3A5; }
.evidence .row.recover .ty { color: #F6C07E; }
.evidence .row.scene .ty { color: rgba(255,255,255,0.45); }
.evidence::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(rgba(12,27,37,0.9), rgba(12,27,37,0)); pointer-events: none; }
.rates { display: grid; grid-template-columns: 138px 1fr; gap: 4px 10px; align-items: center; font-size: 11.5px; color: rgba(255,255,255,0.6); padding: 10px 14px 4px; }
.rates .lane { height: 14px; position: relative; border-radius: 4px; background: rgba(255,255,255,0.05); overflow: hidden; }
.rates .lane i { position: absolute; top: 3px; width: 2px; height: 8px; border-radius: 1px; background: var(--c, #7FE0EA); opacity: 0.85; }
.rates .lane.slow i { width: 5px; height: 8px; border-radius: 2px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.kpi { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px 16px; }
.kpi .label { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.kpi .value { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
.kpi .value small { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.55); margin-left: 6px; letter-spacing: 0; }
.kpi .delta { font-size: 12.5px; color: #8BE0A4; margin-top: 4px; }
.kpi .delta.neutral { color: rgba(255,255,255,0.55); }

/* ---------- sections ---------- */
section.sec { padding: 72px 0 24px; }
section.sec.alt { background: var(--bg-2); padding-bottom: 60px; }
.sec-head { max-width: 780px; margin-bottom: 28px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-700); font-weight: 700; margin-bottom: 10px; }
.eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--teal); border-radius: 2px; }
.sec h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 12px; }
.sec .sub { color: var(--ink-2); font-size: 17px; margin: 0; }
.sec h3 { font-size: 20px; letter-spacing: -0.015em; margin: 36px 0 10px; }
.sec p { color: var(--ink-2); }
.small { font-size: 13px; color: var(--ink-3); }
.note { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.card h4 { margin: 0 0 6px; font-size: 16px; }
.card.pad-s { padding: 14px 16px; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* abstract */
.abstract { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 28px; align-items: stretch; }
.abstract p { font-size: 16.5px; color: var(--ink-2); margin-top: 0; }
.abstract p b { color: var(--ink); }
.contrib { display: flex; flex-direction: column; gap: 10px; justify-content: space-between; }
.contrib .item { flex: 1 1 auto; align-items: flex-start; }
.contrib .glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.contrib .glance .g { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.contrib .glance .g b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--teal-700); line-height: 1.1; white-space: nowrap; }
.contrib .glance .g span { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; display: block; margin-top: 2px; }
.contrib .item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.contrib .num { width: 28px; height: 28px; border-radius: 8px; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.contrib .item h5 { margin: 0 0 2px; font-size: 14.5px; }
.contrib .item p { margin: 0; font-size: 13.5px; }

/* timescale demo */
.demo { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.demo .demo-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.demo .demo-top label { font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.demo .demo-top input[type=range] { width: 160px; accent-color: var(--teal); }
.demo .demo-top .val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; }
.switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--de-2); border: 0; cursor: pointer; transition: background .15s ease; padding: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.switch[aria-checked="true"] { background: var(--teal); }
.switch[aria-checked="true"]::after { left: 21px; }
.demo .demo-body { padding: 16px 18px; }
.demo .verdict-line { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-top: 8px; }
.pill:empty { display: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pill.ok { background: var(--teal-100); color: var(--teal-700); }
.pill.bad { background: var(--rose-100); color: var(--rose-700); }
.pill.warn { background: var(--orange-100); color: var(--orange-700); }
.pill.neutral { background: var(--slate-100); color: var(--slate-700); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.stat .label { font-size: 12.5px; color: var(--ink-3); }
.stat .value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat .value.ok { color: var(--teal-700); }
.stat .value.bad { color: var(--rose-700); }
.stat .value.mid { color: var(--ink-2); }
.stat .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* paradigms */
.paradigm { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--bg); box-shadow: var(--shadow); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.paradigm:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.paradigm.active { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-100), var(--shadow-2); }
.paradigm.dh { background: linear-gradient(180deg, var(--teal-050), #fff); }
.paradigm .ill { height: 96px; margin-bottom: 12px; }
.paradigm h4 { margin: 0; font-size: 16px; }
.paradigm .sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 8px; }
.paradigm .line { font-size: 14px; color: var(--ink-2); margin: 0; }
.paradigm-detail { margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); min-height: 64px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; margin-top: 16px; }
.matrix th, .matrix td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix th { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.matrix th.dh { color: var(--teal-700); }
.matrix td.y { color: var(--teal-700); font-weight: 700; }
.matrix td.n { color: var(--de); }
.matrix td.p { color: var(--orange-700); font-weight: 600; }

/* architecture diagram */
.arch { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.arch svg { width: 100%; height: auto; }
.arch .blk { cursor: pointer; }
.arch .blk rect.bg { transition: filter .15s ease; }
.arch .blk:hover rect.bg, .arch .blk.active rect.bg { filter: brightness(0.96); }
.arch .blk.active rect.bg { stroke-width: 2.6; filter: drop-shadow(0 4px 10px rgba(20,32,43,0.18)); }
.arch .edge { fill: none; stroke-width: 2; stroke-linecap: round; }
.arch .particle { r: 4; }
.arch-detail { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.arch-detail .card { min-height: 130px; }
.arch-detail .card h4 { display: flex; align-items: center; gap: 8px; }
.arch-detail .card h4 .sw { width: 12px; height: 12px; border-radius: 3px; }
.arch-detail .eq { font-family: 'KaTeX_Main', 'Times New Roman', serif; font-size: 15px; margin: 8px 0 0; color: var(--ink); background: var(--bg-2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.contract-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.contract-grid .c { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg); }
.contract-grid .c b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.contract-grid .c p { margin: 0; font-size: 13px; }
.contract-grid .c.green b { color: var(--green-700); } .contract-grid .c.orange b { color: var(--orange-700); } .contract-grid .c.blue b { color: var(--blue-700); } .contract-grid .c.slate b { color: var(--slate-700); }
.decide { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.decide span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--orange-100); color: var(--orange-700); }

/* episode scrubber */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { border: 1px solid var(--line-2); background: var(--bg); padding: 8px 12px; border-radius: 999px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.tabs button:hover { background: var(--bg-2); }
.tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.scrub { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.scrub .head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.scrub .head h4 { margin: 0; font-size: 16px; }
.scrub .head .meta { font-size: 13px; color: var(--ink-3); font-family: var(--mono); }
.scrub .body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 0; }
.scrub .frames { padding: 16px 18px; border-right: 1px solid var(--line); }
.scrub .frame-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; }
.scrub .frame-row .who { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.scrub .frame-row .who.dh { color: var(--teal-700); }
.scrub .strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.scrub .strip figure { margin: 0; position: relative; border-radius: 8px; overflow: hidden; border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; cursor: pointer; }
.scrub .strip figure img { aspect-ratio: 1; object-fit: cover; }
.scrub .strip figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10.5px; padding: 3px 5px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--mono); line-height: 1.2; }
.scrub .strip figure.cur { border-color: var(--teal); transform: scale(1.03); }
.scrub .strip figure.ok { border-color: var(--teal); }
.scrub .strip figure.fail { border-color: var(--rose); }
.scrub .strip.frozen figure { opacity: .8; }
.scrub .big { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.scrub .big figure { margin: 0; border-radius: 10px; overflow: hidden; position: relative; }
.scrub .big figure img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.scrub .big figure figcaption { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0,0,0,0.55); }
.scrub .big figure.dh figcaption { background: var(--teal); }
.scrub .big figure.fz figcaption { background: var(--slate); }
.scrub .slider { margin-top: 12px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.scrub input[type=range] { width: 100%; accent-color: var(--teal); }
.scrub .budget { margin-top: 8px; height: 8px; border-radius: 4px; background: var(--bg-3); position: relative; overflow: hidden; }
.scrub .budget i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--teal); border-radius: 4px; }
.scrub .budget-lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.scrub .log { padding: 16px 18px; font-size: 13px; }
.scrub .log h5 { margin: 0 0 8px; font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.scrub .log ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.scrub .log li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 8px; border-radius: 8px; border-left: 3px solid var(--line); opacity: .45; transition: opacity .15s ease, background .15s ease; }
.scrub .log li.on { opacity: 1; background: var(--bg-2); }
.scrub .log li.cur { border-left-color: var(--teal); }
.scrub .log li .st { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.scrub .log li .who { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.scrub .log li .who.slow { color: var(--rose-700); } .scrub .log li .who.fast { color: var(--orange-700); } .scrub .log li .who.analytic { color: var(--green-700); } .scrub .log li .who.verdict { color: var(--teal-700); }
.scrub .effect { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--teal-050); border: 1px solid var(--teal-100); font-size: 13px; color: var(--ink-2); }

/* evolution */
.evo-loop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.evo-left { display: flex; flex-direction: column; gap: 12px; }
.evo-left .loop-svg { flex: 1 1 auto; display: flex; align-items: center; }
.evo-left .gate { margin-top: 0; grid-template-columns: repeat(2, 1fr); }
.registry { display: flex; flex-direction: column; }
.registry .rr { flex: 1 1 auto; align-items: center; }
.loop-svg svg { width: 100%; height: auto; }
.loop-svg .node rect { transition: stroke-width .2s ease, filter .2s ease; }
.loop-svg .node.lit rect { stroke-width: 3; filter: drop-shadow(0 6px 14px rgba(24,150,166,0.25)); }
.registry { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow); }
.registry .rh { display: grid; grid-template-columns: 54px 150px 1fr; gap: 10px; padding: 10px 14px; background: var(--bg-2); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.registry .rr { display: grid; grid-template-columns: 54px 150px 1fr; gap: 10px; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--line); align-items: baseline; }
.registry .rr:last-child { border-bottom: 0; }
.registry .rr .d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.registry .rr .c { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.registry .rr .w { color: var(--ink-2); }
.registry .rr.adm { background: var(--teal-050); }
.registry .rr.adm .c::before { content: '● '; color: var(--teal); }
.registry .rr.seed .c { color: var(--ink-3); }
.registry .foot { padding: 8px 14px; font-size: 12.5px; color: var(--ink-3); background: var(--bg-2); }
.gate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.gate .g { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--bg); }
.gate .g b { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--teal-700); margin-bottom: 3px; }

/* svg text outside chart cards */
.demo svg text, .loop-svg svg text, .arch svg text { font-family: var(--font); }
.demo svg text { font-size: 11.5px; fill: var(--ink-2); }
.demo svg .lbl { fill: var(--ink-3); font-size: 11px; }
.demo svg .val { fill: var(--ink); font-weight: 600; }
.demo svg .grid { stroke: var(--line); stroke-width: 1; }
.demo svg { display: block; width: 100%; height: auto; overflow: visible; }

/* charts */
.chart-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px 12px; position: relative; }
.chart-card h4 { margin: 0 0 2px; font-size: 15px; padding-right: 120px; }
.chart-card .sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.chart-card .tools { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.chart-card .tools button { font-size: 11.5px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.chart-card .tools button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chart-card svg { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart-card svg text { fill: var(--ink-2); font-size: 11.5px; }
.chart-card svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-card svg .axis { stroke: var(--line-2); stroke-width: 1; }
.chart-card svg .lbl { fill: var(--ink-3); font-size: 11px; }
.chart-card svg .val { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.chart-card svg .ttl { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart-card svg .mark { cursor: pointer; }
.chart-card svg .mark:hover, .chart-card svg .mark.hover { filter: brightness(0.88); }
.chart-card table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chart-card table th, .chart-card table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.chart-card table th:first-child, .chart-card table td:first-child, .chart-card table th:nth-child(2), .chart-card table td:nth-child(2) { text-align: left; font-variant-numeric: normal; }
.chart-card table th { color: var(--ink-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.chart-card table tr.dh td { color: var(--teal-700); font-weight: 700; background: var(--teal-050); }
.chart-card table td.best { font-weight: 700; }
.chart-card table td.second { text-decoration: underline; }
.chart-card .tview { display: none; max-height: 420px; overflow: auto; }
.chart-card.table .tview { display: block; }
.chart-card.table .cview { display: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend i.line { height: 3px; border-radius: 2px; width: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; font-size: 13.5px; }
.filters .lbl { color: var(--ink-3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.filters .seg { border-color: var(--line-2); }
.filters .seg button { color: var(--ink-2); }
.filters .seg button.active { background: var(--ink); color: #fff; }
.tooltip { position: fixed; z-index: 100; pointer-events: none; background: rgba(20,32,43,0.95); color: #fff; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; max-width: 280px; opacity: 0; transition: opacity .1s ease; box-shadow: var(--shadow-2); }
.tooltip b { font-size: 14px; }
.tooltip .k { color: rgba(255,255,255,0.6); }
.tooltip.show { opacity: 1; }
.results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.results-grid > *, .grid2 > *, .grid3 > *, .grid4 > *, .evo-loop > *, .real-grid > *, .abstract > *, .arch-detail > * { min-width: 0; }
.chart-card { min-width: 0; }
.chart-card svg, .loop-svg svg, .arch svg { max-width: 100%; }
.results-grid .span2 { grid-column: span 2; }
.heat-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.heat-cell { cursor: pointer; }
.heat-cell:hover rect { stroke: var(--ink); stroke-width: 1.5; }

/* baseline diagnostics */
.diag { border: 1px solid var(--rose-100); background: linear-gradient(180deg, #FFF7F7, #fff 40%); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.diag .sys { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--rose-100); color: var(--rose-700); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.diag h4 { margin: 8px 0 4px; font-size: 15.5px; }
.diag .ep { font-size: 12.5px; color: var(--ink-3); font-family: var(--mono); margin-bottom: 10px; }
.diag .strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 10px; }
.diag .strip figure { margin: 0; position: relative; border-radius: 6px; overflow: hidden; border: 2px solid transparent; }
.diag .strip figure.fail { border-color: var(--rose); }
.diag .strip figure img { aspect-ratio: 1; object-fit: cover; }
.diag .strip figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9.5px; padding: 2px 4px; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--mono); line-height: 1.2; }
.diag .what { font-size: 13.5px; color: var(--ink-2); margin: 0 0 8px; }
.diag .in-dh { font-size: 13px; padding: 9px 11px; border-radius: 9px; background: var(--teal-050); border: 1px solid var(--teal-100); color: var(--ink-2); }
.diag .in-dh b { color: var(--teal-700); }

/* real world & videos */
.real-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.video-box { background: #000; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 4 / 3; }
.video-box video { width: 100%; height: 100%; object-fit: cover; }
.video-box.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.video-box.pair video { aspect-ratio: auto; }
.video-box .badge { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(0,0,0,0.6); color: #fff; }
.video-box.placeholder { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 13px; background: repeating-linear-gradient(45deg, #1b2a35, #1b2a35 10px, #16232d 10px, #16232d 20px); text-align: center; padding: 16px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.video-grid > figure { margin: 0; min-width: 0; }
.video-box { min-width: 0; }
.video-grid figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.real-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.real-tiles .t { cursor: help; }
.real-tiles .t { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.real-tiles .t .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--teal-700); }
.real-tiles .t .l { font-size: 12.5px; color: var(--ink-3); }
.real-grid > div:last-child { display: flex; flex-direction: column; }
.real-grid .verdicts { margin-top: 12px; flex: 1 1 auto; padding: 12px 16px; }
.real-grid .verdicts h4 { margin: 0 0 6px; font-size: 14.5px; }
.real-grid .verdicts ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.real-grid .verdicts li { margin-bottom: 4px; }
.real-grid .verdicts li b { color: var(--ink); font-weight: 600; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(9,16,22,0.9); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 92vh; max-width: 96vw; width: auto; border-radius: 8px; background: #fff; }
.lightbox .close { position: absolute; top: 16px; right: 16px; }
.figure-embed { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 12px; box-shadow: var(--shadow); }
.figure-embed img { cursor: zoom-in; border-radius: 8px; }
.figure-embed figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* bibtex & footer */
pre.bib { background: #0F1A22; color: #DDE6EE; padding: 16px 18px; border-radius: 12px; font-family: var(--mono); font-size: 12.5px; overflow: auto; margin: 0; }
.bib-wrap { position: relative; }
.bib-wrap .btn { position: absolute; right: 12px; top: 12px; }
footer { padding: 40px 0 60px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; margin-top: 60px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
footer img { height: 30px; }

@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .grid3, .grid4, .grid2, .results-grid, .abstract, .arch-detail, .evo-loop, .real-grid { grid-template-columns: 1fr; }
  .results-grid .span2 { grid-column: auto; }
  .contract-grid, .gate { grid-template-columns: repeat(2, 1fr); }
  .contrib .glance { grid-template-columns: repeat(2, 1fr); }
  .scrub .body { grid-template-columns: 1fr; }
  .scrub .frames { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-row { grid-template-columns: 1fr; }
  .real-tiles { grid-template-columns: repeat(2, 1fr); }
  .registry .rh, .registry .rr { grid-template-columns: 48px 1fr; }
  .registry .rh span:last-child, .registry .rr .w { grid-column: 2; }
  section.sec { padding-top: 52px; }
}
@media (max-width: 600px) {
  .scrub .strip, .diag .strip { grid-template-columns: repeat(3, 1fr); }
  .video-grid { grid-template-columns: 1fr; }
  .hero-logo { height: 76px; }
  .contract-grid, .gate { grid-template-columns: 1fr; }
  .nav .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  .brain.lit .flow::after { animation: none; }
}

/* ---------- evidence-store explorer ---------- */
.evs { margin-top: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.evs .head { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); align-items: start; }
.evs .head h4 { margin: 0 0 4px; font-size: 16px; }
.evs .head .meta { font-size: 13px; color: var(--ink-3); font-family: var(--mono); margin-bottom: 10px; }
.evs .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.evs .chips button { border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.evs .chips button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--de)); display: inline-block; }
.evs .chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.evs .chips button.on i { outline: 2px solid rgba(255,255,255,0.7); }
.evs .head .vid { position: relative; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.evs .head .vid video { width: 100%; height: 100%; object-fit: cover; }
.evs .head .vid .badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,0.6); color: #fff; }
.evs .tl { padding: 10px 18px 4px; border-bottom: 1px solid var(--line); }
.evs .tl svg { width: 100%; height: auto; display: block; overflow: visible; }
.evs .tl svg text { font-family: var(--font); font-size: 11px; fill: var(--ink-3); }
.evs .tl svg text.lane { font-size: 11.5px; fill: var(--ink-2); font-weight: 600; }
.evs .tl svg text.in { font-size: 10.5px; fill: #fff; font-weight: 600; }
.evs .tl svg .grid { stroke: var(--line); }
.evs .tl svg .mark { cursor: pointer; }
.evs .tl svg .mark:hover { filter: brightness(0.85); }
.evs .tl svg .cursor { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.evs .list { max-height: 440px; overflow: auto; font-family: var(--mono); font-size: 12px; }
.evs .row { display: grid; grid-template-columns: 52px 58px 60px 170px minmax(0, 1fr); gap: 8px; padding: 6px 18px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: baseline; }
.evs .row:hover { background: var(--bg-2); }
.evs .row.cur { background: var(--teal-050); box-shadow: inset 3px 0 0 var(--teal); }
.evs .row .q, .evs .row .t, .evs .row .e { color: var(--ink-3); }
.evs .row .e::before { content: 'env '; color: var(--ink-3); opacity: .7; }
.evs .row .ty { color: var(--c, var(--ink-2)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evs .row .ty::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--de)); margin-right: 6px; vertical-align: 0; }
.evs .row .s { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font); font-size: 13px; }
.evs .row.fail .s { color: var(--rose-700); }
.evs .row.ok .s { color: var(--green-700); }
.evs .row.open .s { white-space: normal; }
.evs .row pre { grid-column: 1 / -1; margin: 4px 0 2px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; color: var(--ink-2); }
.evs .foot { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 8px 18px; background: var(--bg-2); font-size: 12.5px; color: var(--ink-3); }
.evs .foot b { color: var(--ink-2); font-weight: 600; }
@media (max-width: 800px) { .evs .head { grid-template-columns: 1fr; } .evs .row { grid-template-columns: 48px 52px 1fr; } .evs .row .e, .evs .row .ty { display: none; } .evs .row .s { grid-column: 1 / -1; white-space: normal; } }

/* ---------- baseline diagnostics ---------- */
.bl { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.bl-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.bl-tabs button { border: 0; background: transparent; padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.bl-tabs button small { white-space: normal; line-height: 1.25; }
.bl-tabs button small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); font-family: var(--mono); }
.bl-tabs button:hover { background: var(--bg-3); }
.bl-tabs button.active { color: var(--ink); border-bottom-color: var(--teal); background: var(--bg); }
.bl-tabs button.active small { color: var(--teal-700); }
.bl-panel { padding: 18px 20px 20px; }
.bl-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: stretch; margin-bottom: 16px; }
.bl-head h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.bl-head h3 .chip-m { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); font-size: 12px; font-weight: 600; vertical-align: middle; font-family: var(--mono); letter-spacing: 0; }
.bl-head .mech { margin: 0; font-size: 15px; color: var(--ink-2); }
.bl-head .headline { margin: 8px 0 0; font-size: 13.5px; color: var(--rose-700); font-weight: 600; }
.bl-nums { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
.bl-nums .ttl { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; }
.bl-nums .r { display: grid; grid-template-columns: 190px 1fr 44px; gap: 8px; align-items: center; font-size: 12.5px; margin-bottom: 6px; }
.bl-nums .r .n { color: var(--ink-2); line-height: 1.2; }
.bl-nums .r .n small { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.bl-nums .r .b { height: 10px; border-radius: 5px; background: var(--bg-3); overflow: hidden; }
.bl-nums .r .b i { display: block; height: 100%; border-radius: 5px; background: var(--de); }
.bl-nums .r.dh .b i { background: var(--teal); }
.bl-nums .r.ours .b i { background: var(--s2); }
.bl-nums .r .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-nums .r.dh .v { color: var(--teal-700); }
.bl-nums .foot { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.bl-case-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bl-case-tabs button { border: 1px solid var(--line-2); background: var(--bg); padding: 7px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.bl-case-tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.bl-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 18px; align-items: stretch; }
.bl-player { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.bl-player .vids { display: grid; gap: 2px; background: #000; }
.bl-player .vids.two { grid-template-columns: 1fr 1fr; }
.bl-player .vids.stack { grid-template-columns: 1fr; }
.bl-player .vids img { cursor: zoom-in; }
.bl-player .vids figure { margin: 0; position: relative; }
.bl-player .vids video, .bl-player .vids img { width: 100%; height: auto; display: block; background: #000; }
.bl-player .vids .badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(0,0,0,0.6); color: #fff; }
.bl-player .vids .badge.fail { background: var(--rose); }
.bl-player .vids .badge.ok { background: var(--green); }
.bl-player .ctl { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.bl-player .ctl button { border: 1px solid var(--line-2); background: var(--bg); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink); }
.bl-player .ctl input[type=range] { flex: 1 1 auto; accent-color: var(--teal); }
.bl-player .tl { padding: 6px 12px 2px; }
.bl-player .tl svg { width: 100%; height: auto; display: block; overflow: visible; }
.bl-player .tl svg text { font-family: var(--font); font-size: 10.5px; fill: var(--ink-3); }
.bl-player .tl .pin { cursor: pointer; }
.bl-player .tl .pin.cur circle { stroke: var(--ink); stroke-width: 2; }
.bl .marks { list-style: none; margin: 0; padding: 4px 0 6px; max-height: 250px; overflow: auto; flex: 1 1 auto; }
.bl .marks li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.bl .marks li:hover { background: var(--bg-2); }
.bl .marks li .at { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.bl .marks li .lbl { font-weight: 600; color: var(--ink); }
.bl .marks li .qt { display: block; color: var(--ink-2); font-style: italic; margin-top: 2px; }
.bl .marks li.fail .lbl { color: var(--rose-700); }
.bl .marks li.cur { background: var(--teal-050); box-shadow: inset 3px 0 0 var(--teal); }
.bl .marks li.past { opacity: .75; }
.bl-side { display: flex; flex-direction: column; gap: 12px; }
.bl-side .card { padding: 14px 16px; flex: 0 0 auto; }
.bl-side .marks-card { flex: 1 1 auto; display: flex; flex-direction: column; padding: 12px 0 0; min-height: 120px; }
.bl-side .marks-card h4 { padding: 0 16px; margin-bottom: 4px; }
.bl-side .marks-card .marks { flex: 1 1 auto; max-height: 420px; overflow: auto; padding: 0 0 4px; }
.bl-side .marks-card .marks li { padding-left: 16px; padding-right: 16px; }
.bl-side .card h4 { margin: 0 0 6px; font-size: 14.5px; }
.bl-side .card p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.bl-side .card .ep { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.bl-side .in-dh { background: var(--teal-050); border-color: var(--teal-100); }
.bl-side .in-dh h4 { color: var(--teal-700); }
.bl-special { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.bl-special h4 { margin: 0 0 4px; font-size: 15px; }
.bl-special .sub { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.bl-special .fig { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.bl-special table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bl-special th, .bl-special td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bl-special th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.bl-special td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bl-special .mono { font-family: var(--mono); font-size: 12px; }
.bl-special pre { margin: 0; padding: 12px 14px; background: #0F1B24; color: #DCE3EA; border-radius: 10px; font-size: 12px; line-height: 1.5; overflow: auto; max-height: 420px; font-family: var(--mono); }
.bl-special pre .ln { display: inline-block; width: 30px; color: rgba(255,255,255,0.35); user-select: none; }
.bl-special pre .hl { background: rgba(210,90,94,0.35); border-radius: 3px; padding: 0 3px; }
.bl-special pre .hl2 { background: rgba(232,150,74,0.35); border-radius: 3px; padding: 0 3px; }
.bl-special pre .cm { color: #8FA3B3; }
.bl-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.bl-body.static { grid-template-columns: 1fr; }
.bl-body.static .bl-player .vids.stack { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.bl-static-row { align-items: stretch; }
.bl-static-row .bl-side .in-dh { flex: 1 1 auto; }
.bl-static-row .marks-card .marks { max-height: none; }
.bl-grid2 > * { min-width: 0; }
@media (max-width: 900px) { .bl-head, .bl-body, .bl-grid2 { grid-template-columns: 1fr; } .bl-nums .r { grid-template-columns: 130px 1fr 40px; } .bl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- hero: task panel, fast-brain monitor, decision chip ---------- */
.brain.task { --c: var(--teal); }
.brain .status { font-size: 12px; color: rgba(255,255,255,0.62); margin-bottom: 5px; min-height: 17px; line-height: 1.4; }
.brain.slow .body { min-height: 72px; }
.brain .body .ph { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,0.32); padding: 4px 8px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 6px; }
.task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.task-grid button { text-align: left; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 7px 9px; color: rgba(255,255,255,0.8); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: background .15s ease, border-color .15s ease; }
.task-grid button:hover { background: rgba(255,255,255,0.1); }
.task-grid button b { font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.25; }
.task-grid button small { font-size: 10.5px; color: rgba(255,255,255,0.5); font-family: var(--mono); line-height: 1.3; }
.task-grid button.active { border-color: var(--teal); background: rgba(24,150,166,0.22); box-shadow: 0 0 0 1px var(--teal); }
.task-grid button.active small { color: #7FE0EA; }
.task-foot { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip:disabled { opacity: .4; cursor: not-allowed; }
.gauges { display: grid; grid-template-columns: 70px 1fr 54px; gap: 5px 8px; align-items: center; font-size: 11.5px; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.gauges .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gauges .bar i { display: block; height: 100%; width: 0; background: #7FE0EA; border-radius: 4px; transition: width .2s linear; }
.gauges .bar.stag i { background: #F6C07E; }
.gauges .bar.risk i { background: #F07A7E; }
.gauges b { font-family: var(--mono); font-size: 11px; color: #fff; font-weight: 500; text-align: right; white-space: nowrap; }
.decision { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dchip { font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); letter-spacing: .02em; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.dchip.continue { background: rgba(127,224,234,0.18); color: #7FE0EA; }
.dchip.intervene { background: rgba(246,192,126,0.22); color: #F6C07E; }
.dchip.subst { background: rgba(201,182,234,0.22); color: #D9CBF5; }
.dchip.refuse, .dchip.escalate, .dchip.fail { background: rgba(240,122,126,0.22); color: #F5A3A5; }
.dchip.end { background: rgba(139,224,164,0.22); color: #8BE0A4; }
.dwhy { font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.35; }
.cmd { margin-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: rgba(255,255,255,0.55); min-height: 16px; }
.cmd .ok { color: #8BE0A4; }
.cmd .bad { color: #F5A3A5; }
.brain.lit .dchip.intervene, .brain.lit .dchip.refuse { animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@media (max-width: 960px) { .brain.evo { min-height: 120px; } }
@media (max-width: 420px) { .task-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .brain.lit .dchip.intervene, .brain.lit .dchip.refuse { animation: none; } }

/* ---------- episode scrubber: videos when present ---------- */
.scrub .big figure video { aspect-ratio: 1; object-fit: cover; width: 100%; display: none; background: #000; }
.scrub .big figure.has-video video { display: block; }
.scrub .big figure.has-video img { display: none; }
.scrub .slider .play { border: 1px solid var(--line-2); background: var(--bg); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; color: var(--ink); display: none; }
.scrub .slider.has-video { grid-template-columns: 60px 1fr 60px auto; }
.scrub .slider.has-video .play { display: inline-block; }