:root{--ink:#202b2b;--muted:#626f6c;--accent:#12695c;--line:#dde5e2;--soft:#f3f7f5;--purple:#79639f;--width:1000px;color-scheme:light}
.collection-link{display:block;width:fit-content;margin:0 auto 22px;font-size:14px;text-decoration:none;color:var(--muted)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.75}a{color:var(--accent);text-underline-offset:4px}a:hover{text-decoration:underline}a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #ac6e20;outline-offset:5px}button,select{font:inherit}main,.hero,footer{width:min(var(--width),calc(100% - 48px));margin-inline:auto}.hero{text-align:center;padding:50px 0 34px}.wordmark{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--accent);font-size:14px;font-weight:750;letter-spacing:2.3px;margin-bottom:20px}.wordmark svg{width:20px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}h1{font-size:clamp(31px,4vw,46px);letter-spacing:-1.5px;line-height:1.19;font-weight:730;margin:0 0 27px}h1 span{color:var(--accent)}.authors{font-size:16px;line-height:1.95;margin:0 auto 12px;max-width:900px}sup{font-size:14px;line-height:0;margin-left:1px}.affiliations{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 20px;max-width:850px;margin:0 auto;font-size:14px;color:var(--muted)}.author-note{font-size:14px;color:var(--muted);margin:12px 0 22px}.resource-links{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.resource{display:inline-flex;gap:9px;align-items:center;border-radius:24px;padding:7px 20px;background:#24332f;color:white;text-decoration:none;font-size:14px;font-weight:550}.resource:hover{background:var(--accent);text-decoration:none}.resource.pending{background:var(--fill);color:var(--ink-2);border:1px solid var(--line)}.resource small{font-size:14px;font-weight:400}.lead{text-align:center;padding:26px 0 20px}.lead-line{font-size:25px;line-height:1.4;letter-spacing:-.6px;margin:0 0 10px}.lead-line strong{color:var(--accent);font-weight:600}.lead>p:not(.lead-line){font-size:15px;color:var(--muted);line-height:1.6;margin:0}.highlights{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 13px;border-block:1px solid var(--line);padding:23px 0}.highlights>div{display:flex;flex-direction:column;border-right:1px solid var(--line)}.highlights>div:last-child{border:0}.highlights strong{font-size:40px;line-height:1.3;letter-spacing:-1.4px;font-weight:650;color:var(--accent)}.highlights strong span{font-size:18px;letter-spacing:0}.highlights b{font-size:14px;font-weight:600;margin:5px 0}.highlights small{font-size:14px;color:var(--muted)}.lead .metric-note{font-size:14px!important}.section-nav{display:flex;justify-content:center;gap:30px;border-bottom:1px solid var(--line);padding:23px 0 20px}.section-nav a{text-decoration:none;font-size:14px;color:var(--muted)}.section-nav a:hover{color:var(--accent)}.section{padding:54px 0 0}.section.prose{max-width:850px;margin:auto}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:700;color:var(--accent);margin:0 0 9px}h2{font-size:29px;letter-spacing:-.8px;line-height:1.25;margin:0 0 22px;font-weight:650}h3{font-size:21px;line-height:1.4;letter-spacing:-.35px;margin:30px 0 12px}h4{font-size:18px;margin:8px 0;font-weight:650;line-height:1.4}p{margin:0 0 17px}.takeaway{border-left:3px solid var(--accent);padding:18px 23px;background:var(--soft);margin:27px 0 0}.takeaway>strong{color:var(--accent);font-size:14px}.takeaway p{margin:4px 0 0;font-size:16px}figure{margin:25px 0 30px}figure img{display:block;width:100%;height:auto}figcaption{font-size:14px;color:var(--muted);line-height:1.65;margin-top:13px}.suite-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}.suite-grid article{border-top:2px solid #99beb1;padding-top:13px}.suite-grid p{font-size:14px;color:var(--muted)}.task-number{font-size:14px;text-transform:uppercase;letter-spacing:.8px;color:var(--accent);font-weight:600}.methods{display:grid;grid-template-columns:1fr 1fr;gap:28px}.methods article{padding:24px;background:var(--soft);border:1px solid var(--line);border-radius:8px}.methods p{font-size:15px}.methods a{font-size:14px;text-decoration:none;font-weight:600}.tag{font-size:14px;font-weight:650;letter-spacing:.3px;color:var(--accent)}.purple{color:var(--purple)}.results-panel{border:1px solid var(--line);border-radius:9px;padding:26px;margin:26px 0 17px}.chart-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:25px;border-bottom:1px solid var(--line)}.chart-controls label{font-size:14px;font-weight:600}.chart-controls select{min-width:0;font-size:16px;border:1px solid var(--line-strong);border-radius:6px;padding:8px 30px 8px 10px;background:var(--surface);color:var(--ink);max-width:100%}.chart-controls select:disabled{background:var(--fill);color:var(--muted)}.result-chart{padding:25px 0 5px}.chart-row{display:grid;grid-template-columns:155px 1fr 75px;align-items:center;gap:16px;margin-bottom:18px;font-size:14px}.chart-row>strong{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.bar-track{height:29px;background:repeating-linear-gradient(to right,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 25%);border-right:1px solid var(--grid)}.bar{height:100%;border-radius:0 3px 3px 0;transition:width .35s ease}.bar.baseline{background:#aeb8b4}.bar.base{background:#85b7a7}.bar.rl{background:#267a65}.bar.hg{background:#8974ad}.chart-axis{display:flex;justify-content:space-between;margin:0 91px 0 171px;color:var(--muted);font-size:14px}.result-summary{margin:16px 0 8px;font-size:15px;font-weight:600;color:var(--accent)}.chart-note,.metric-definition{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:0}.metric-definition{margin-bottom:20px}.resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.resources-grid>a{display:block;text-decoration:none;padding:20px;border:1px solid var(--line);border-radius:8px;color:var(--ink)}.resources-grid>a:hover{border-color:var(--accent);background:var(--soft)}.resource-type{font-size:14px;letter-spacing:1.6px;color:var(--accent);font-weight:650}.resources-grid h3{font-size:19px;margin:10px 0}.resources-grid h3 span{float:right;color:var(--accent)}.resources-grid p{font-size:14px;color:var(--muted);margin:0}.citation-box{background:var(--soft);border:1px solid var(--line);border-radius:8px;position:relative;padding:48px 24px 22px}.citation-box pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.8;color:var(--ink-2)}.citation-box button{position:absolute;right:14px;top:12px;font-size:14px;border:1px solid var(--line-strong);padding:5px 12px;background:var(--surface);border-radius:5px;cursor:pointer;color:var(--accent)}#copy-status{font-size:14px;color:var(--muted);min-height:20px;margin:5px 0}footer{display:flex;justify-content:space-between;gap:20px;margin-top:35px;padding:25px 0 35px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}footer a{text-decoration:none}.skip-link{position:absolute;top:-70px;left:12px;background:var(--surface);padding:10px;z-index:10}.skip-link:focus{top:10px}
@media(max-width:720px){main,.hero,footer{width:calc(100% - 36px)}.hero{padding-top:32px}h1{letter-spacing:-1px}.desktop-break{display:none}.authors{font-size:14px;line-height:1.85}.affiliations{font-size:14px;gap:5px 14px}.resource{font-size:14px;padding:7px 14px}.lead{padding-top:15px}.highlights strong{font-size:30px}.highlights b{font-size:14px}.highlights small{font-size:14px;padding:0 8px}.highlights strong span{font-size:14px}.section-nav{gap:23px;flex-wrap:wrap}.section{padding-top:38px}h2{font-size:26px}.suite-grid{grid-template-columns:1fr 1fr}.resources-grid{grid-template-columns:1fr}.methods{gap:15px}.methods article{padding:18px}.chart-controls{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}.results-panel{padding:18px}.chart-row{grid-template-columns:112px 1fr 60px;gap:8px;font-size:14px}.chart-row>strong{font-size:14px}.chart-axis{margin:0 68px 0 120px}.result-summary{font-size:14px}}
@media(max-width:440px){body{font-size:16px}.lead-line{font-size:23px}.highlights{gap:5px}.highlights strong{font-size:27px}.highlights b{font-size:14px}.highlights small{font-size:14px}.section-nav{gap:19px}.section-nav a{font-size:14px}.methods{grid-template-columns:1fr}.suite-grid{gap:16px}.chart-row{grid-template-columns:103px 1fr 55px}.chart-axis{margin:0 63px 0 111px}footer{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar{transition:none}}

@media(max-width:720px){.chart-controls select{width:100%}}

/* Preserve readable labels on narrow screens by giving them their own row. */
@media(max-width:720px){
  .chart-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;margin-bottom:22px}
  .chart-row>span{grid-column:1;grid-row:1}
  .chart-row>strong{grid-column:2;grid-row:1}
  .chart-row .bar-track{grid-column:1 / -1;grid-row:2}
  .chart-axis{margin-inline:0}
}
@media(max-width:440px){
  .highlights{grid-template-columns:1fr;gap:0;padding:0}
  .highlights>div{padding:19px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .highlights>div:last-child{border-bottom:0}
  .highlights strong{font-size:34px}
  .highlights small{padding:0}
  .chart-controls{grid-template-columns:minmax(0,1fr);gap:7px}
  .chart-controls select{margin-bottom:7px}
}

/* ---------- Visual refresh: hero, comparison card, highlights, bands, results controls ---------- */
:root{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;--code-bg:#0f1f1b;--bad:#b4472b;--good:#1f8a6d;--shadow:0 1px 2px rgba(16,40,34,.06),0 8px 24px rgba(16,40,34,.07)}
body{line-height:1.65;background:radial-gradient(1100px 560px at 50% -140px,var(--glow) 0%,transparent 72%) no-repeat,#fff}
body::before{content:"";position:absolute;inset:0 0 auto;height:680px;background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 55% 75% at 50% 0%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 55% 75% at 50% 0%,#000 25%,transparent 72%);pointer-events:none;z-index:-1}
code,pre{font-family:var(--mono);font-variant-ligatures:none}
h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.035em;line-height:1.08;font-weight:800;margin-bottom:18px}
h1 span{background:linear-gradient(100deg,var(--title-a) 10%,var(--title-b) 55%,var(--title-c) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:750;letter-spacing:-.025em}
.hero{padding-top:44px}
.hero-sub{font-size:19px;line-height:1.55;color:var(--ink-2);max-width:760px;margin:0 auto 26px}
.resource{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:0 1px 2px rgba(16,40,34,.05);padding:8px 18px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.resource svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.resource:hover{background:var(--surface);border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow)}
.resource.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.resource.primary:hover{background:var(--accent-strong);color:var(--on-accent)}

.lead{padding-top:34px}
.lead-line{font-size:28px;font-weight:500;margin-bottom:26px}
.vs-card{text-align:left;margin:0 auto;max-width:960px;padding:22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,var(--surface-2));box-shadow:var(--shadow)}
.vs-request{padding:0 4px 16px}
.vs-request p{margin:4px 0 0;font-size:16px;font-style:italic;color:var(--ink-2)}
.vs-request code{font-style:normal;font-size:14px;background:var(--fill);padding:1px 6px;border-radius:4px}
.vs-panes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-pane{background:var(--code-bg);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #0b1714;position:relative}
.vs-pane::before{content:"";position:absolute;inset:0 0 auto;height:3px}
.vs-pane.bad::before{background:var(--bad)}.vs-pane.good::before{background:var(--good)}
.vs-pane header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#16291f;background:#152923;color:#b9cbc3;font-size:13px;font-weight:600;letter-spacing:.2px}
.win-dots{display:inline-flex;gap:5px}.win-dots i{width:9px;height:9px;border-radius:50%;background:#33473f}
.vs-badges{margin-left:auto;display:flex;gap:6px}
.vs-badges em,.vs-outcome em{font-style:normal;font-size:12px;font-weight:650;padding:2px 8px;border-radius:999px;white-space:nowrap}
.vs-badges .ok{background:rgba(52,182,140,.16);color:#7fe0bd}.vs-badges .no{background:rgba(232,104,72,.18);color:#ffab92}
.vs-pane pre{margin:0;padding:16px 16px 14px;font-size:13.5px;line-height:1.75;color:#e4eee9;overflow-x:auto;flex:1}
.tk-k{color:#c4a7ff}.tk-f{color:#7cc7ff}.tk-s{color:#f2c27b}
mark{color:inherit;border-radius:3px;padding:1px 2px}
.hl-bad{background:rgba(232,104,72,.28);box-shadow:inset 0 -2px 0 #e86848}
.hl-good{background:rgba(52,182,140,.22);box-shadow:inset 0 -2px 0 #34b68c}
.vs-pane footer{display:block;width:auto;margin:0;padding:11px 16px;font-size:13.5px;line-height:1.5;color:#b9cbc3;border-top:1px solid #213730}
.vs-pane footer b{color:#fff;font-weight:650}
.vs-pane.bad footer b{color:#ffab92}.vs-pane.good footer b{color:#7fe0bd}
.vs-pane footer code{font-size:12.5px;color:#f2c27b}
.vs-attack{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 4px 0;font-size:14px}
.vs-attack code{font-size:13.5px;background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad-line);padding:2px 8px;border-radius:5px}
.vs-outcome{display:inline-flex;gap:6px;flex-wrap:wrap}
.vs-outcome .no{background:var(--bad-bg);color:var(--bad-ink)}.vs-outcome .ok{background:var(--good-bg);color:#0f5e52}
.vs-note{font-size:13px!important;color:var(--muted);margin:10px 4px 0!important}

.highlights{gap:16px;border:0;padding:0;margin:26px 0 12px}
.highlights>div{border:1px solid var(--line);border-radius:14px;padding:20px 14px 18px;background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}
.highlights>div::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),#6d5aa0)}
.highlights>div:last-child{border:1px solid var(--line)}
.highlights strong{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums}
.highlights .delta{font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-bottom:2px}
.highlights .delta i{font-style:normal;color:var(--accent);margin:0 3px}

.section-nav{position:sticky;top:0;z-index:5;background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);padding:14px 0 12px;margin-top:12px}
.section-nav a{padding:4px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.section-nav a.active{color:var(--accent);border-color:var(--accent);font-weight:600}
html{scroll-padding-top:70px}

.section.band{position:relative;margin-top:54px;padding-bottom:54px;background:var(--soft);box-shadow:0 0 0 100vmax var(--soft);clip-path:inset(0 -100vmax)}
.section-intro{max-width:760px;color:var(--ink-2)}
.band .path-lab{background:var(--surface);border-color:var(--line-strong);box-shadow:var(--shadow);border-radius:14px}
.path-input-row input{font-family:var(--mono)}

.suite-task,.methods article,.resources-grid>a,.cwe-insights article{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.suite-task:hover,.methods article:hover,.resources-grid>a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.evidence-block{font-family:var(--mono)}

/* Results: segmented controls, data-scaled axis, baseline marker, gain labels */
.chart-controls{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.control-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.control-label{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);min-width:96px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:550;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.seg button small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px}
.seg button:hover{border-color:var(--accent)}
.seg button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seg button[aria-pressed=true] small{color:var(--on-accent);opacity:.75}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.seg button:focus-visible{outline:3px solid #ac6e20;outline-offset:2px}
.bar-track{position:relative;border-radius:4px;background:repeating-linear-gradient(to right,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 25%),var(--fill)}
.bar{border-radius:4px;position:relative;z-index:1;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bar.baseline{background:var(--c-baseline)}.bar.base{background:var(--c-base)}.bar.rl{background:var(--c-rl)}.bar.hg{background:var(--c-hg)}
.base-mark{position:absolute;top:-4px;bottom:-4px;width:0;border-left:2px dashed var(--muted);z-index:2;transition:left .5s cubic-bezier(.2,.8,.2,1)}
.chart-row:first-child .base-mark{display:none}
.chart-row>strong{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.chart-row{grid-template-columns:155px 1fr 80px}
.gain{font-size:12px;font-weight:650}.gain.up{color:var(--accent)}.gain.down{color:var(--bad-ink)}
.chart-axis{position:relative;height:20px;margin:0 96px 0 171px;display:block}
.chart-axis span{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums}
.chart-axis span:first-child{transform:none}.chart-axis span:last-child{transform:translateX(-100%)}
.result-summary{padding:12px 16px;background:var(--soft);border-radius:8px;border-left:3px solid var(--accent)}

/* Scroll reveal (enabled by site.js only when motion is allowed) */
.reveal-ready .section,.reveal-ready .vs-card,.reveal-ready .highlights{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal-ready .revealed{opacity:1;transform:none}

@media(max-width:720px){
  .hero-sub{font-size:16px}
  .lead-line{font-size:23px}
  .vs-card{padding:14px;border-radius:12px}
  .vs-panes{grid-template-columns:1fr}
  .vs-pane pre{font-size:12.5px}
  .highlights{gap:10px}
  .highlights>div{padding:16px 8px}
  .section-nav{gap:6px 18px;padding:10px 0}
  .control-label{min-width:0;width:100%}
  .chart-row{grid-template-columns:minmax(0,1fr) auto}
  .chart-row>strong{flex-direction:row;gap:8px;align-items:baseline}
  .chart-axis{margin-inline:0}
  .section.band{padding-bottom:38px;margin-top:38px}
}
@media(max-width:440px){
  .highlights{gap:10px}
  .highlights>div{border-bottom:1px solid var(--line)}
  .vs-badges em{font-size:11px;padding:2px 6px}
  .vs-pane header>span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){.bar,.base-mark,.resource,.suite-task,.methods article,.resources-grid>a{transition:none}}
@media(max-width:720px){
  .highlights strong{font-size:32px}
  .section-nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .section-nav::-webkit-scrollbar{display:none}
  .section-nav a{white-space:nowrap}
}
@media(max-width:600px){
  .highlights{grid-template-columns:1fr}
  .highlights strong{font-size:36px}
}

/* ---------- Theme tokens (light default, dark via system preference or toggle) ---------- */
:root{--bg:#fff;--surface:#fff;--surface-2:#f8fbfa;--fill:#f0f4f2;--grid:#e3ebe7;--line-strong:#cdd9d4;--ink-2:#3d4a47;--muted:#5b6865;--accent-strong:#0e5a4f;--on-accent:#fff;
  --bad-bg:#fff4ef;--bad-line:#e6b8a6;--bad-ink:#9d3c20;--good-bg:#eef7f3;--good-line:#bad4c7;--warn-ink:#8c5d0e;--hint-bg:#f5f1f9;--hint-line:#ddd3ea;
  --glow:#dff0ea;--dots:rgba(18,105,92,.16);--nav-bg:rgba(255,255,255,.88);--title-a:#0f5e52;--title-b:#1f8a6d;--title-c:#6d5aa0;
  --c-baseline:#aeb8b4;--c-base:#7fb6a4;--c-rl:#23775f;--c-hg:#8570ab;--c-only:#c4cfcb;--c-mix:#8d9d97;
  --k-plan:#3a72c4;--k-code:#1f8a6d;--k-test:#b7791f;--k-revise:#7a64a3}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--bg:#0c1412;--surface:#121c1a;--surface-2:#16211e;--soft:#16221f;--fill:#1a2623;--grid:#25332f;--line:#24312d;--line-strong:#344641;--ink:#e2ebe7;--ink-2:#c2cec9;--muted:#95a59f;--accent:#4cc3a3;--accent-strong:#72d6bb;--on-accent:#04201a;--purple:#b6a4de;
  --bad-bg:#2a1813;--bad-line:#5c3024;--bad-ink:#ffa085;--good-bg:#11261f;--good-line:#25493c;--warn-ink:#e7b862;--hint-bg:#1c1827;--hint-line:#3a3150;
  --glow:#11302a;--dots:rgba(76,195,163,.13);--nav-bg:rgba(12,20,18,.82);--title-a:#5fd1b0;--title-b:#4cc3a3;--title-c:#b6a4de;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --c-baseline:#6c7a75;--c-base:#5f9e8a;--c-rl:#3fb08e;--c-hg:#a48fd2;--c-only:#4a5853;--c-mix:#7b8b85;--k-plan:#6ea2ef;--k-code:#4cc3a3;--k-test:#e3a948;--k-revise:#b6a4de}}
:root[data-theme=dark]{color-scheme:dark;--bg:#0c1412;--surface:#121c1a;--surface-2:#16211e;--soft:#16221f;--fill:#1a2623;--grid:#25332f;--line:#24312d;--line-strong:#344641;--ink:#e2ebe7;--ink-2:#c2cec9;--muted:#95a59f;--accent:#4cc3a3;--accent-strong:#72d6bb;--on-accent:#04201a;--purple:#b6a4de;
  --bad-bg:#2a1813;--bad-line:#5c3024;--bad-ink:#ffa085;--good-bg:#11261f;--good-line:#25493c;--warn-ink:#e7b862;--hint-bg:#1c1827;--hint-line:#3a3150;
  --glow:#11302a;--dots:rgba(76,195,163,.13);--nav-bg:rgba(12,20,18,.82);--title-a:#5fd1b0;--title-b:#4cc3a3;--title-c:#b6a4de;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --c-baseline:#6c7a75;--c-base:#5f9e8a;--c-rl:#3fb08e;--c-hg:#a48fd2;--c-only:#4a5853;--c-mix:#7b8b85;--k-plan:#6ea2ef;--k-code:#4cc3a3;--k-test:#e3a948;--k-revise:#b6a4de}
:root[data-theme=light]{color-scheme:light}
body{background-color:var(--bg)}
a:focus-visible,button:focus-visible,select:focus-visible{outline-color:var(--warn-ink)}
.vs-card{background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.vs-pane{border-color:#0b1714}

/* Theme toggle */
.theme-toggle{position:fixed;top:14px;right:14px;z-index:20;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme=dark] .theme-toggle .i-sun{display:block}:root[data-theme=dark] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-toggle .i-sun{display:block}:root:not([data-theme=light]) .theme-toggle .i-moon{display:none}}

/* Institution logos */
.inst-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.logo-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:#fff;border:1px solid #e1e8e5;border-radius:999px}
.logo-chip img{display:block;height:15px;width:auto}
.logo-chip.msr img{height:16px}
.logo-chip.msr span{font:600 14.5px/1 "Segoe UI",Inter,system-ui,sans-serif;color:#5e5e5e;letter-spacing:-.1px}

/* TL;DR */
.tldr{display:flex;gap:16px;align-items:flex-start;text-align:left;max-width:860px;margin:26px auto 4px;padding:18px 22px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;background:var(--surface)}
.tldr-label{flex:none;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--on-accent);background:var(--accent);padding:3px 8px;border-radius:5px;margin-top:3px}
.lead .tldr p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink)}

/* Model key and color dots */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;flex:none}
.dot.baseline{background:var(--c-baseline)}.dot.base{background:var(--c-base)}.dot.rl{background:var(--c-rl)}.dot.hg{background:var(--c-hg)}
.model-key{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:-6px 0 30px}
.model-key>div{display:grid;grid-template-columns:auto 1fr;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.model-key b{font-size:14.5px}.model-key span{grid-column:2;font-size:13px;color:var(--muted);line-height:1.45}
.chart-row>span{display:flex;align-items:center}
.cwe-score>span{display:flex;align-items:center;font-weight:600}
.cwe-score{grid-template-columns:42px minmax(0,1fr) 50px}
.cwe-bar.rl{background:var(--c-rl)}.cwe-bar.hg{background:var(--c-hg)}
.figure-card img{border-radius:10px}
:root[data-theme=dark] .figure-card img{background:#fff;padding:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .figure-card img{background:#fff;padding:10px}}

/* Teacher hints, side by side */
.hint-jump{font-size:14px;font-weight:600;text-decoration:none;color:var(--purple)!important;margin:14px 0 6px}
.methods>article>a:last-child{margin-top:auto}
.methods>article>.hint-jump{margin-top:auto}
.methods>article>.hint-jump+a{margin-top:0}
.hint-panel{margin-top:22px;padding:22px;border:1px solid var(--hint-line);border-radius:14px;background:linear-gradient(180deg,var(--hint-bg),var(--surface) 80%)}
.hint-panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 20px;flex-wrap:wrap;margin-bottom:16px}
.hint-panel-head h4{margin:2px 0 0;font-size:19px}
.eyebrow.purple{color:var(--purple)}
.purple-seg button[aria-pressed=true]{background:var(--c-hg);border-color:var(--c-hg);color:#fff}
.purple-seg button:hover{border-color:var(--c-hg)}
.hint-pair{display:grid;grid-template-columns:1fr auto 1.35fr;gap:14px;align-items:stretch}
.hint-side{padding:16px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.hint-side p{margin:8px 0 0;font-size:15px;line-height:1.65}
.hint-side.teacher{border-color:var(--c-hg);background:var(--hint-bg);box-shadow:inset 3px 0 0 var(--c-hg)}
.hint-side.teacher .brief-label{color:var(--purple)}
.hint-plus{align-self:center;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--c-hg);color:#fff;font-weight:700;font-size:18px}
.hint-learning{font-size:14px;color:var(--muted);margin:14px 0 0}

/* Rebuilt behavior figures */
.viz-card{margin:22px 0 30px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.viz-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;margin-bottom:16px;color:var(--ink-2)}
.viz-legend span{display:inline-flex;align-items:center;gap:7px}
.viz-legend small{color:var(--muted);font-size:13px}
.sw{width:14px;height:10px;border-radius:2px;display:inline-block}
.sw.only,.hbar i.only{background:var(--c-only)}.sw.mix,.hbar i.mix{background:var(--c-mix)}.sw.suite,.hbar i.suite{background:var(--c-base)}
.viz-caption{font-size:13.5px;color:var(--muted);margin:14px 0 0;line-height:1.6}
.beh-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.beh-group h4{font-size:16px;margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.beh-bench{margin:10px 0 14px}
.beh-bench-name{display:block;font-size:12.5px;font-weight:650;letter-spacing:.4px;color:var(--muted);margin-bottom:4px}
.hbar{display:grid;grid-template-columns:1fr 38px;align-items:center;gap:8px;margin:3px 0}
.hbar-track{height:13px;background:repeating-linear-gradient(to right,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 25%),var(--fill);border-radius:3px;overflow:hidden}
.hbar-track i{display:block;height:100%;border-radius:3px}
.hbar b{font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hbar:nth-child(4) b{color:var(--ink);font-weight:750}
.mk{display:inline-block;width:11px;height:11px}
.mk.start{border:2px solid var(--ink-2);border-radius:50%;background:var(--surface)}
.mk.rl{background:var(--c-rl);transform:rotate(45deg) scale(.85)}
.mk.hg{background:var(--c-hg);border-radius:2px}
.db-chart{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.db-panel h4{font-size:16px;margin:0 0 4px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.db-row{display:grid;grid-template-columns:70px 1fr;column-gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.db-beh{grid-row:span 2;align-self:center;font-size:14px;font-weight:600}
.db-line{display:grid;grid-template-columns:20px minmax(0,1fr) 112px;align-items:center;gap:8px;height:24px}
.db-name{font-size:11.5px;font-weight:700;color:var(--muted)}
.db-line.rl .db-name{color:var(--c-rl)}.db-line.hg .db-name{color:var(--c-hg)}
.db-track{position:relative;height:100%;background:repeating-linear-gradient(to right,var(--grid) 0,var(--grid) 1px,transparent 1px,transparent 25%)}
.db-track i{position:absolute;top:50%}
.db-seg{height:4px;margin-top:-2px;border-radius:2px}
.db-line.rl .db-seg{background:var(--c-rl)}.db-line.hg .db-seg{background:var(--c-hg)}
.db-start{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border:2px solid var(--ink-2);border-radius:50%;background:var(--surface);z-index:1}
.db-end{width:10px;height:10px;margin:-5px 0 0 -5px;z-index:2}
.db-line.rl .db-end{background:var(--c-rl);transform:rotate(45deg)}
.db-line.hg .db-end{background:var(--c-hg);border-radius:2px}
.db-val{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;text-align:right}
.db-val b{display:inline-block;min-width:38px;font-weight:700}
.db-val b.up{color:var(--accent)}.db-val b.down{color:var(--bad-ink)}
.db-axis{position:relative;height:22px;margin:4px 120px 0 110px;font-size:12px;color:var(--muted)}
.db-axis span{position:absolute;transform:translateX(-50%)}
.db-axis span:first-child{transform:none}.db-axis span:last-child{transform:translateX(-100%)}

/* Footer */
body>footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 30px;margin-top:56px;padding:28px 0 40px}
.foot-main{display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.foot-main span{color:var(--muted)}
.foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}

@media(max-width:900px){.model-key{grid-template-columns:1fr 1fr}.beh-chart{grid-template-columns:1fr;gap:6px}.db-chart{grid-template-columns:1fr}}
@media(max-width:720px){.hint-pair{grid-template-columns:1fr}.hint-plus{justify-self:center}.hint-panel,.viz-card{padding:16px}.tldr{flex-direction:column;gap:8px;padding:16px}.foot-meta{align-items:flex-start;text-align:left}.theme-toggle{top:10px;right:10px;width:36px;height:36px}}
@media(max-width:600px){.methods{grid-template-columns:1fr}.model-key{grid-template-columns:1fr}}

.foot-main .foot-title{color:var(--ink-2)}
.db-chart{grid-template-columns:1fr;gap:22px}
.db-line{grid-template-columns:22px minmax(0,1fr) 128px}
.db-axis{margin:4px 138px 0 112px}
.vs-outcome .no{background:var(--bad-bg);color:var(--bad-ink)}.vs-outcome .ok{background:var(--good-bg);color:var(--accent)}
.vs-attack code{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-line)}
.vs-request code{background:var(--fill)}
.path-input-row input{background:var(--surface);color:var(--ink)}
:root{--on-hg:#fff}
:root[data-theme=dark]{--on-hg:#17112a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--on-hg:#17112a}}
.purple-seg button[aria-pressed=true],.hint-plus{color:var(--on-hg)}
@media(max-width:720px){.db-line{grid-template-columns:20px minmax(0,1fr) 104px}.db-axis{margin:4px 112px 0 28px}.db-row{grid-template-columns:1fr}.db-beh{grid-row:auto;margin-bottom:2px}}
.highlights small{display:inline-flex;align-items:center;justify-content:center}
.lead{padding-top:22px}
.lead .vs-card{margin-top:8px}
body>footer{align-items:center;color:var(--muted)}
