/* ===========================================================
   EvoSafeHarness project page — styles (restrained / academic)
   =========================================================== */
:root {
  --bg:        #ffffff;
  --bg-soft:   #f6f7f9;
  --card:      #ffffff;
  --ink:       #1a1d24;
  --ink-soft:  #545b67;
  --ink-faint: #8b93a1;
  --line:      #e6e8ee;
  --primary:   #3f4fb0;   /* one restrained indigo accent */
  --primary-2: #5663bd;

  /* surface palette — muted, still distinguishable (used by the demos) */
  --nl:    #a9762a;   /* natural-language prompt   */
  --code:  #3f6296;   /* deterministic code        */
  --judge: #675a99;   /* LLM judge / aux model     */
  --state: #3a8770;   /* state record / ledger     */
  --attack:#b04a42;   /* injection / danger        */

  --nl-bg:    #faf6ee;
  --code-bg:  #eef2f8;
  --judge-bg: #f1eef7;
  --state-bg: #ebf4f0;
  --attack-bg:#f8efee;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(20,25,40,.05), 0 1px 1px rgba(20,25,40,.04);
  --shadow:    0 8px 26px -14px rgba(20,25,40,.16), 0 3px 8px -6px rgba(20,25,40,.08);
  --shadow-lg: 0 24px 50px -28px rgba(20,25,40,.26);
  --maxw: 1140px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; }
h1,h2,h3,h4 { line-height: 1.18; letter-spacing: -.02em; margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }

/* ---------- NAV ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(150%) blur(12px);
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
nav .brand { font-weight: 800; letter-spacing: -.03em; font-size: 1.12rem; color: var(--ink); }
nav .brand span { color: var(--primary); }
nav .links { margin-left: auto; display: flex; gap: 22px; align-items: center; }
nav .links a { color: var(--ink-soft); font-weight: 550; font-size: .91rem; }
nav .links a:hover { color: var(--ink); }
nav .pill {
  background: var(--ink); color: #fff !important; padding: 8px 15px;
  border-radius: 8px; font-size: .85rem !important; font-weight: 600;
}
nav .pill:hover { background: var(--primary); }
@media (max-width: 760px){ nav .links a:not(.pill){ display:none; } }

/* ---------- HERO ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 78% -12%, rgba(63,79,176,.07), transparent 60%),
    linear-gradient(180deg, #fafbfd 0%, #ffffff 70%);
  border-bottom: 1px solid var(--line);
}
.hero .wrap { padding-top: 64px; padding-bottom: 64px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
  padding: 6px 13px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 800; margin: 22px 0 4px;
  letter-spacing: -.04em; color: var(--ink);
}
.hero h1 .grad { color: var(--primary); }
.hero .tagline { font-size: clamp(1.05rem,2.3vw,1.45rem); color: var(--ink); font-weight: 600; max-width: 880px; letter-spacing: -.01em; }
.hero .sub { font-size: 1.04rem; color: var(--ink-soft); max-width: 880px; margin-top: 14px; }
.authors { margin-top: 22px; color: var(--ink-soft); font-size: 1rem; }
.authors sup { font-size: .7em; color: var(--ink-faint); }
.authors .affils { margin-top: 6px; font-size: .86rem; color: var(--ink-faint); }
.authors b { color: var(--ink); font-weight: 650; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 19px; border-radius: 9px; font-weight: 600; font-size: .94rem;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: var(--primary); border-color: var(--primary); }
.btn svg { width: 17px; height: 17px; }

/* hero stat band */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 46px; }
.statband .stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; box-shadow: var(--shadow-sm);
}
.statband .num { font-size: clamp(1.55rem,3.2vw,2.05rem); font-weight: 780; letter-spacing: -.03em; color: var(--ink); }
.statband .num .arrow { color: var(--state); }
.statband .lab { color: var(--ink-soft); font-size: .85rem; margin-top: 3px; }

/* hero teaser figure */
.teaser { margin-top: 46px; }
.teaser img {
  width: 100%; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.teaser figcaption { color: var(--ink-soft); font-size: .85rem; margin-top: 12px; text-align: center; }

/* ---------- SECTION SCAFFOLD ---------- */
section { padding: 80px 0; }
section.alt { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { color: var(--primary); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.sec-h { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 780; margin: 10px 0 14px; letter-spacing: -.03em; }
.sec-lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 900px; }
.center { text-align: center; margin: 0 auto; }
.center .sec-lead { margin-left: auto; margin-right: auto; }

/* ---------- PROBLEM ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 820px){ .why-grid { grid-template-columns: 1fr; } }
.why { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.why:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.why .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.15rem; }
.why h4 { margin: 15px 0 6px; font-size: 1.05rem; }
.why p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.why-punch { margin: 30px auto 0; font-size: 1.18rem; font-weight: 600; color: var(--ink); text-align: center; max-width: 820px; letter-spacing: -.01em; }
.why-punch b { color: var(--primary); }

/* ---------- METHOD: animated loop ---------- */
.method-intro { max-width: 820px; }

.loopwrap { margin-top: 44px; display:grid; grid-template-columns: 1.35fr .9fr; gap: 30px; align-items:center; }
@media (max-width: 940px){ .loopwrap { grid-template-columns: 1fr; } }

/* the diagram */
.hloop { position: relative; width: 100%; aspect-ratio: 760 / 500; }
.hloop svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hloop .seg { fill:none; stroke:#c4cad8; stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray: 7 7; animation: ants 1.1s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -28; } }
.hloop .pulse { fill: var(--primary); filter: drop-shadow(0 0 5px rgba(63,79,176,.6)); }
.hloop .ring-c { fill:none; stroke: var(--line); stroke-width: 1.5; }

.hnode {
  position:absolute; transform: translate(-50%,-50%);
  width: 132px; background: var(--card); border:1px solid var(--line);
  border-radius: 11px; padding: 9px 8px 8px; text-align:center; box-shadow: var(--shadow-sm);
  cursor: default; transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.hnode .hi { font-size: 1.15rem; line-height:1; }
.hnode .hn { font-weight: 700; font-size: .82rem; margin-top: 3px; letter-spacing:-.01em; }
.hnode .hs { font-size: .66rem; color: var(--ink-faint); margin-top: 1px; line-height:1.25; }
.hnode.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(63,79,176,.12), var(--shadow); transform: translate(-50%,-50%) scale(1.06); }
.hnode.crit.on { border-color: var(--nl); box-shadow: 0 0 0 3px rgba(169,118,42,.14), var(--shadow); }
.hnode.crit .hn { color: var(--nl); }
.hnode.crit .badge-af { display:inline-block; margin-top:5px; font-size:.6rem; font-weight:700; color:#fff; background:var(--nl); padding:2px 6px; border-radius:999px; letter-spacing:.02em; }

.hcenter {
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
.hcenter .logo { font-weight: 820; font-size: 1.35rem; letter-spacing:-.03em; color: var(--ink); }
.hcenter .logo span { color: var(--primary); }
.hcenter .sublogo { font-size:.66rem; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }

.warmtag {
  position:absolute; left:0; top:8%; transform: translate(-4%,0);
  font-size:.68rem; font-weight:650; color: var(--ink-soft);
  background:#fff; border:1px dashed var(--primary); border-radius:999px; padding:5px 11px; box-shadow: var(--shadow-sm);
}
.warmtag b { color: var(--primary); }

/* caption + vs-existing panel on the right */
.loop-side .cap-box {
  background: var(--card); border:1px solid var(--line); border-left:3px solid var(--primary);
  border-radius: 10px; padding: 16px 18px; min-height: 124px; box-shadow: var(--shadow-sm);
}
.loop-side .cap-step { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--primary); display:flex; align-items:center; gap:8px; }
.loop-side .cap-box.crit { border-left-color: var(--nl); }
.loop-side .cap-box.crit .cap-step { color: var(--nl); }
.loop-side .cap-title { font-weight:700; font-size:1.02rem; margin:5px 0 5px; }
.loop-side .cap-body { font-size:.92rem; color: var(--ink-soft); margin:0; }
.loop-dots { display:flex; gap:6px; margin-top:14px; }
.loop-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition: background .2s, transform .2s; }
.loop-dots i.on { background: var(--primary); transform: scale(1.25); }

/* vs existing compare */
.vs { margin-top: 40px; display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 760px){ .vs { grid-template-columns: 1fr; } }
.vs .vcard { border:1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--card); box-shadow: var(--shadow-sm); }
.vs .vcard.old { background: var(--bg-soft); }
.vs .vcard.new { border-top: 3px solid var(--primary); }
.vs h4 { font-size:1.02rem; display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.vs ul { list-style:none; padding:0; margin:0; }
.vs li { display:flex; gap:10px; padding:8px 0; font-size:.93rem; color: var(--ink-soft); border-bottom:1px solid var(--line); }
.vs li:last-child { border-bottom:none; }
.vs li .m { flex:none; font-weight:700; }
.vs .vcard.old li .m { color: var(--ink-faint); }
.vs .vcard.new li .m { color: var(--primary); }
.vs .vcard.new li b { color: var(--ink); }

/* dual surface + taxonomy (kept, restyled neutral) */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
@media (max-width: 760px){ .dual { grid-template-columns: 1fr; } }
.surface-card { border-radius: var(--radius); padding: 22px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); }
.surface-card.nl   { border-top: 3px solid var(--nl); }
.surface-card.code { border-top: 3px solid var(--code); }
.surface-card h4 { display:flex; align-items:center; gap:10px; }
.surface-card .tag { font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff; }
.surface-card.nl .tag { background: var(--nl); }
.surface-card.code .tag { background: var(--code); }
.surface-card p { font-size:.94rem; color: var(--ink-soft); }

.taxonomy { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; justify-content:center; }
.taxchip { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px; box-shadow: var(--shadow-sm); font-weight:600; font-size:.89rem; }
.taxchip .n { width:21px; height:21px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:.72rem; font-weight:700; }
.taxchip small { color: var(--ink-faint); font-weight:500; }

/* ---------- DEMOS (the harness explorer) ---------- */
.demo-shell { margin-top: 34px; }
.tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom: 8px; }
.tab {
  border:1px solid var(--line); background:var(--card); color: var(--ink-soft);
  border-radius:10px; padding:11px 18px; font-weight:600; font-size:.91rem; cursor:pointer;
  box-shadow: var(--shadow-sm); transition: all .15s; display:flex; gap:10px; align-items:center;
}
.tab .t-sub { font-weight:500; color: var(--ink-faint); font-size:.81rem; }
.tab:hover { border-color:#cbd0dc; }
.tab.active { background: var(--ink); color:#fff; border-color: var(--ink); }
.tab.active .t-sub { color: rgba(255,255,255,.72); }

.scenario-hint { text-align:center; color: var(--ink-faint); font-size:.88rem; margin: 14px auto 22px; max-width: 880px; }
.scenario-hint b { color: var(--ink-soft); }

.demo-layout { display:grid; grid-template-columns: 1fr 330px; gap: 22px; align-items:start; }
@media (max-width: 980px){ .demo-layout { grid-template-columns: 1fr; } }

.board { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

.req { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-bottom: 20px; }
@media (max-width: 620px){ .req { grid-template-columns:1fr; } }
.req .card2 { border-radius:10px; padding:13px 15px; font-size:.89rem; }
.req .user  { background: var(--bg-soft); border:1px solid var(--line); }
.req .inject{ background: var(--attack-bg); border:1px solid #e7c6c2; }
.req .lbl { font-size:.69rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.req .user .lbl { color: var(--ink-faint); }
.req .inject .lbl { color: var(--attack); }
.req .goal { margin-top:7px; font-size:.77rem; color:#8c352f; font-style:italic; }
.req code { font-family: var(--mono); font-size:.84em; background: rgba(20,25,40,.05); padding:1px 5px; border-radius:4px; }

.model-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.model-head .chip-model { font-weight:720; font-size:1.02rem; }
.model-head .align { font-size:.77rem; font-weight:600; padding:4px 11px; border-radius:999px; }
.align.aligned { background: var(--state-bg); color: var(--state); }
.align.less    { background: var(--nl-bg); color: #8c6322; }
.model-head .htype { margin-left:auto; font-size:.81rem; color: var(--ink-faint); font-weight:600; }

.pipe { display:flex; flex-direction:column; gap:14px; }
.lane { border:1px dashed var(--line); border-radius:11px; padding:13px 13px 15px; background: #fcfcfd; }
.lane > .lane-h { font-size:.69rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.lane > .lane-h .sec-no { width:18px; height:18px; border-radius:5px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:.65rem; }
.nodes { display:flex; flex-wrap:wrap; gap:10px; }

.node {
  border-radius:9px; padding:11px 13px; cursor:pointer; position:relative;
  border:1px solid; background:#fff; min-width: 150px; flex: 1 1 auto; max-width: 100%;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s; box-shadow: var(--shadow-sm);
}
.node:hover, .node.active { transform: translateY(-3px); box-shadow: var(--shadow); }
.node .nt { font-weight:660; font-size:.89rem; display:flex; align-items:center; gap:8px; line-height:1.25; }
.node .nd { font-size:.78rem; color: var(--ink-soft); margin-top:3px; }
.node .surf { font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:999px; position:absolute; top:-9px; right:10px; color:#fff; box-shadow: var(--shadow-sm); }
.node.s-nl    { border-color:#e3d2af; background: var(--nl-bg); }    .node.s-nl    .surf{ background:var(--nl); }
.node.s-code  { border-color:#cdd9ea; background: var(--code-bg); }  .node.s-code  .surf{ background:var(--code); }
.node.s-judge { border-color:#d6cfeb; background: var(--judge-bg); } .node.s-judge .surf{ background:var(--judge); }
.node.s-state { border-color:#c4e2d8; background: var(--state-bg); } .node.s-state .surf{ background:var(--state); }
.dimmed .node:not(.active) { filter: grayscale(.5) opacity(.6); }

.lane.gate { border-color:#cdd9ea; background:#f7f9fc; }
.lane.exec .exec-bar { display:flex; align-items:center; gap:10px; justify-content:center; font-weight:660; color: var(--code); font-size:.89rem; }
.flow-arrow { text-align:center; color:#c4cad8; font-size:1.05rem; line-height:.6; }
.gate-logic { text-align:center; font-size:.79rem; color: var(--ink-soft); margin-top:11px; font-weight:600; }
.gate-logic .blk { color: var(--attack); } .gate-logic .alw { color: var(--state); }

.outcome { margin-top:8px; border-radius:11px; padding:14px 16px; background: var(--state-bg); border:1px solid #c4e2d8; display:flex; gap:11px; align-items:flex-start; }
.outcome .ic { font-size:1.15rem; }
.outcome b { color: var(--state); }
.outcome p { margin:2px 0 0; font-size:.85rem; color: var(--ink-soft); }

.detail {
  position: sticky; top: 76px;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; min-height: 280px;
}
.detail .empty { color: var(--ink-faint); font-size:.92rem; }
.detail .empty .big { font-size:1.5rem; display:block; margin-bottom:10px; }
.detail .d-surf { display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; padding:4px 11px; border-radius:999px; }
.detail h4 { margin:14px 0 4px; font-size:1.18rem; }
.detail .d-sec { font-size:.8rem; color: var(--ink-faint); font-weight:600; margin-bottom:14px; }
.detail .d-body { font-size:.94rem; color: var(--ink-soft); }
.detail .d-row { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.detail .d-row .k { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-faint); margin-bottom:4px; }
.detail .d-row .v { font-size:.89rem; }
.detail .shared-tag { display:inline-block; font-size:.73rem; font-weight:600; padding:3px 10px; border-radius:999px; }
.shared-tag.shared { background: var(--code-bg); color: var(--code); }
.shared-tag.specific { background: var(--nl-bg); color:#8c6322; }

.legend { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:24px; }
.legend .li { display:flex; align-items:center; gap:8px; font-size:.83rem; color: var(--ink-soft); font-weight:600; }
.legend .sw { width:12px; height:12px; border-radius:4px; }

/* shared vs specific */
.share-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px; }
@media (max-width:820px){ .share-grid{ grid-template-columns:1fr; } }
.share-col { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.share-col.shared   { border-top:3px solid var(--code); }
.share-col.specific { border-top:3px solid var(--nl); }
.share-col h3 { font-size:1.15rem; display:flex; align-items:center; gap:10px; }
.share-col ul { list-style:none; padding:0; margin:16px 0 0; }
.share-col li { padding:11px 0; border-bottom:1px solid var(--line); font-size:.93rem; }
.share-col li:last-child { border-bottom:none; }
.share-col li b { display:block; }
.share-col li span { color: var(--ink-soft); font-size:.85rem; }

/* ---------- RESULTS ---------- */
.bars { margin-top: 40px; display:grid; gap:18px; }
.bar-row { display:grid; grid-template-columns: 130px 1fr; gap:16px; align-items:center; }
.bar-row .blab { font-weight:660; font-size:.94rem; text-align:right; }
.bar-track { background: var(--bg-soft); border-radius:999px; height:32px; position:relative; overflow:hidden; border:1px solid var(--line); }
.bar-fill { height:100%; border-radius:999px; display:flex; align-items:center; justify-content:flex-end; padding-right:12px; color:#fff; font-weight:700; font-size:.84rem; width:0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar-fill.nodef { background:#b56a64; }
.bar-fill.camel { background:#c19a57; }
.bar-fill.drift { background:#9aa1ae; }
.bar-fill.harness { background: var(--primary); }
.bars-cap { text-align:center; color: var(--ink-faint); font-size:.89rem; margin-top:18px; }

.tbl-wrap { margin-top:40px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:var(--card); }
table.res { border-collapse: collapse; width:100%; font-size:.87rem; min-width:640px; }
table.res th, table.res td { padding:11px 14px; text-align:center; border-bottom:1px solid var(--line); }
table.res th { background: var(--bg-soft); font-weight:700; color: var(--ink-soft); position:sticky; top:0; }
table.res td.model { text-align:left; font-weight:700; }
table.res td.def { text-align:left; color: var(--ink-soft); }
table.res tr.harness { background: #eef0fa; }
table.res tr.harness td.def { color: var(--primary); font-weight:700; }
table.res .asr { font-weight:700; }
table.res .grp-end td { border-bottom:2px solid #cdd2de; }
table.res td .di { color: var(--ink-faint); font-size:.78em; }

.takeaways { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top:40px; }
@media (max-width:760px){ .takeaways{ grid-template-columns:1fr; } }
.take { background: var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.take:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.take .ic { font-size:1.45rem; }
.take h4 { margin:12px 0 6px; font-size:1.08rem; }
.take p { font-size:.93rem; color: var(--ink-soft); margin:0; }
.take .edge { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); }

/* ---------- CITE / FOOTER ---------- */
.cite { background: #1a1d24; color:#cbd1dc; border-radius:var(--radius); padding:24px; font-family:var(--mono); font-size:.84rem; overflow-x:auto; position:relative; }
.cite .copy { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.1); border:none; color:#fff; padding:6px 12px; border-radius:7px; font-size:.78rem; cursor:pointer; font-family:var(--font); font-weight:600; }
.cite .copy:hover { background: rgba(255,255,255,.2); }
.cite pre { margin:0; white-space:pre; }
footer { padding: 38px 0 56px; color: var(--ink-faint); font-size:.89rem; border-top:1px solid var(--line); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; }
footer a { color: var(--ink-soft); }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  .hloop .seg { animation:none; }
}

/* ---------- results: benchmark switcher ---------- */
.bench { margin-top: 36px; }
.bench-tabs { margin-bottom: 18px; }
.bench-panel { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 22px 24px 18px; box-shadow: var(--shadow-sm); }
.bench-lead { margin: 0 0 16px; color: var(--ink-soft); font-size: .98rem; }
.bench-panel .tbl-wrap { margin-top: 0; }
.bench-panel .sumwrap { border: none; box-shadow: none; border-radius: 0; }
.bench-panel .bars-cap { margin-top: 12px; }
table.res.sum { min-width: 0; }
table.res th.avg, table.res td:nth-last-child(-n+2) { }
table.res td.dim { color: var(--ink-faint); }
table.res.canary td, table.res.canary th { padding: 10px 8px; }
.bench-details { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.bench-details summary { cursor: pointer; color: var(--primary); font-weight: 650; font-size: .92rem; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.bench-details summary::-webkit-details-marker { display: none; }
.bench-details summary::before { content: "▸"; transition: transform .15s ease; }
.bench-details[open] summary::before { transform: rotate(90deg); }
.bench-details .tbl-wrap { margin-top: 14px; }
.bench-note { color: var(--ink-faint); font-size: .85rem; margin: 10px 0 0; }