/* web-agent — Omevra product design system.
   Light, premium product register: deep green-to-teal graded hero with
   glass panels, white product cards below, green accent family. */
:root{
  --bg:#fbfbfd;
  --surface:#ffffff;
  --surface-2:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --faint:#86868b;
  --line:#e6e6e8;
  --line-strong:#d2d2d7;
  --accent:#0b7a37;
  --accent-strong:#095c2a;
  --accent-bright:#17a34a;
  --accent-soft:#e9f6ee;
  --green:#0b7a37;
  --red:#c03527;
  --red-soft:#fdeeea;
  --amber:#9a6a00;
  --amber-soft:#fdf3e0;
  --deep-1:#04150e;
  --deep-2:#07331f;
  --shadow:0 10px 34px rgba(20,40,26,.07),0 2px 8px rgba(20,40,26,.05);
  --shadow-lg:0 24px 60px rgba(10,35,20,.13),0 4px 16px rgba(10,35,20,.07);
  --radius:22px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.hidden{display:none!important}
.muted{color:var(--muted)}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:1px 6px;border-radius:5px;color:var(--ink-2)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 18px}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;
  background:rgba(251,251,253,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.bar-in{max-width:1180px;margin:0 auto;padding:0 24px;height:56px;
  display:flex;align-items:center;gap:28px}
@media(max-width:560px){.bar-in{padding:0 18px;gap:16px}}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand-logo{width:34px;height:34px;flex:none;background:#fff;
  border:1px solid var(--line);border-radius:9px}
.wordmark{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.brand-div{width:1px;height:22px;background:var(--line-strong)}
.brand-prod{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink-2)}
.views{display:flex;gap:6px;margin-left:auto;background:var(--surface-2);
  border:1px solid var(--line);border-radius:980px;padding:3px}
.view-btn{background:transparent;color:var(--ink-2);border:0;border-radius:980px;
  padding:7px 18px;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.view-btn:hover{color:var(--ink)}
.view-btn.active{background:linear-gradient(180deg,var(--accent),var(--accent-strong));
  color:#fff;font-weight:600;box-shadow:0 4px 12px rgba(11,122,55,.28)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1000px 520px at 88% -12%, rgba(64,224,160,.38), rgba(64,224,160,0) 62%),
    radial-gradient(820px 500px at 6% 112%, rgba(18,181,165,.30), rgba(18,181,165,0) 60%),
    radial-gradient(620px 380px at 55% 130%, rgba(23,163,74,.30), rgba(23,163,74,0) 65%),
    linear-gradient(138deg, var(--deep-1) 0%, var(--deep-2) 34%, #0a5c2e 66%, #0d8a5f 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%)}
.hero-in{position:relative;z-index:1;padding:84px 24px 78px}
@media(max-width:560px){.hero-in{padding:60px 18px 58px}}
.hero-panel{max-width:820px;margin:0 auto;text-align:center;
  background:linear-gradient(165deg, rgba(255,255,255,.15), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.22);border-radius:30px;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 30px 70px rgba(2,20,10,.35), inset 0 1px 0 rgba(255,255,255,.25);
  padding:52px 48px 46px}
@media(max-width:640px){.hero-panel{padding:38px 24px 34px}}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.02em;color:#7ee2a8;margin:0 0 16px}
.eyebrow .prod-no{color:rgba(255,255,255,.55);font-weight:500}
.hero h1{font-size:clamp(58px,10vw,102px);line-height:.98;letter-spacing:-.04em;
  font-weight:700;margin:0;color:#fff}
.hero h1 .grad{background:linear-gradient(92deg,#8df5b6 5%,#4fe3c1 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.subtitle{font-size:clamp(20px,3.4vw,27px);line-height:1.4;font-weight:500;
  color:rgba(255,255,255,.94);margin:26px auto 0;max-width:680px}
.hero-sub{font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.74);
  margin:18px auto 0;max-width:620px}
.hero-platform{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78);
  margin:14px auto 0;max-width:620px}
.hero-platform a{color:#8df5b6;text-decoration:underline;text-underline-offset:2px}
.hero-platform a:hover{color:#c8ffdf}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;
  flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;
  font-size:16.5px;font-weight:600;padding:14px 32px;border-radius:980px;line-height:1.2;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease}
.btn-light{background:#fff;color:var(--accent-strong);
  box-shadow:0 10px 26px rgba(2,20,10,.30)}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(2,20,10,.36)}
.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.45)}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:1024px;margin:26px auto 0;text-align:left}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:22px 20px 20px;
  transition:transform .3s ease, box-shadow .3s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat b{display:block;font-size:clamp(27px,3.4vw,36px);line-height:1.05;
  font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:9px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.stat.glass{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(2,20,10,.25), inset 0 1px 0 rgba(255,255,255,.14)}
.stat.glass b{color:#fff}
.stat.glass span{color:rgba(255,255,255,.70)}
.hero-note{text-align:center;font-size:13.5px;color:rgba(255,255,255,.55);
  margin:20px auto 0;max-width:640px}

/* ---------- sections & panels ---------- */
main.wrap{padding-top:0;padding-bottom:0}
.view-section{padding:88px 0 0;scroll-margin-top:70px}
.sec-eyebrow{font-size:14px;font-weight:600;color:var(--accent);
  margin:0 0 10px;text-align:center}
.sec-title{font-size:clamp(32px,5vw,46px);line-height:1.08;letter-spacing:-.03em;
  font-weight:700;margin:0;text-align:center}
.sec-sub{font-size:clamp(17px,2.4vw,20px);line-height:1.5;color:var(--ink-2);
  text-align:center;max-width:720px;margin:16px auto 0}
.run-bound{font-size:14px;line-height:1.55;color:var(--muted);
  text-align:center;max-width:720px;margin:10px auto 0}
.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:28px;box-shadow:var(--shadow);margin-top:42px}
.run-panel{padding:28px}
.eval-panel{padding:30px 30px 26px}
@media(max-width:640px){.run-panel,.eval-panel{padding:20px 16px}}

/* ---------- live run layout ---------- */
.run-layout{display:grid;grid-template-columns:336px 1fr;gap:26px;align-items:start}
@media(max-width:940px){.run-layout{grid-template-columns:1fr}}

.picker{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;
  padding:18px;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
@media(max-width:940px){.picker{position:static;max-height:none}}
.mode-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mode-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.segmented{display:flex;background:#fff;border:1px solid var(--line-strong);
  border-radius:980px;padding:3px}
.seg{background:transparent;color:var(--muted);border:0;border-radius:980px;
  padding:6px 18px;font:inherit;font-size:13.5px;cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease}
.seg:hover{color:var(--ink)}
.seg.active{background:linear-gradient(180deg,var(--accent),var(--accent-strong));
  color:#fff;font-weight:700;box-shadow:0 4px 10px rgba(11,122,55,.25)}
.mode-note{font-size:12.5px;line-height:1.5;color:var(--faint);margin:12px 0 2px}
.group-title{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin:20px 0 8px;font-weight:600}
.task-item{display:block;width:100%;text-align:left;background:transparent;
  border:1px solid transparent;border-radius:13px;padding:10px 12px;cursor:pointer;
  color:var(--ink);font:inherit;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.task-item:hover{background:#fff;transform:translateX(2px)}
.task-item.selected{background:#fff;border-color:var(--accent);
  box-shadow:0 6px 16px rgba(11,122,55,.12)}
.task-item .t-name{font-family:var(--mono);font-size:13px;display:flex;
  justify-content:space-between;gap:8px;align-items:center}
.task-item .t-desc{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:99px;
  white-space:nowrap;font-weight:600}
.pill.pass{background:var(--accent-soft);color:var(--accent-strong)}
.pill.fail{background:var(--red-soft);color:var(--red)}
.pill.adv{background:var(--amber-soft);color:var(--amber)}

/* ---------- stage ---------- */
.stage{min-width:0}
.stage-head{display:flex;justify-content:space-between;gap:16px;
  align-items:flex-start;flex-wrap:wrap}
.stage-head h3{font-size:23px;line-height:1.25;margin:2px 0 5px;
  letter-spacing:-.015em;font-weight:700}
#sel-desc{margin:0;font-size:14.5px;max-width:520px}
.stage-actions{display:flex;gap:10px;align-items:center;flex:none}
.run-btn{background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#fff;border:0;border-radius:980px;padding:12px 32px;font:inherit;
  font-size:15.5px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 22px rgba(11,122,55,.30);
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}
.run-btn:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(11,122,55,.36)}
.run-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.run-btn.running{background:linear-gradient(180deg,#e8b34b,#cf9416);
  color:#241a04;box-shadow:0 10px 22px rgba(180,130,20,.30)}
.ghost-btn{color:var(--ink-2);border:1px solid var(--line-strong);border-radius:980px;
  padding:11px 18px;text-decoration:none;font-size:14px;font-weight:500;
  transition:border-color .2s ease,color .2s ease}
.ghost-btn:hover{color:var(--ink);border-color:var(--ink-2);text-decoration:none}
.recorded{margin-top:16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--muted)}
.recorded b{color:var(--ink);font-family:var(--mono);font-weight:600}
.verdict{margin-top:16px;border-radius:16px;padding:15px 18px;font-size:15px;
  border:1px solid var(--line);animation:rise .45s ease both}
.verdict.pass{background:var(--accent-soft);border-color:#bfe3cd}
.verdict.fail{background:var(--red-soft);border-color:#f3c4ba}
.verdict .v-title{font-weight:700;font-size:21px;letter-spacing:-.015em}
.verdict .v-meta{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:3px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* console: screenshot showcase + event log.
   Stacked, not side-by-side: the stage column left over after the
   picker is ~714px at most, and a 1.25fr/1fr split starved the
   screenshot to ~386px wide (a third of its 1100px natural width),
   while grid stretch ballooned the frame to the log's height and
   left dead space under the image. Stacked, the screenshot gets the
   full stage width and the frame hugs it exactly. */
.console{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.screen-block{display:flex;flex-direction:column;gap:8px}
.screen-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.screen-wrap{background:#ecefee;
  border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;
  min-height:260px;position:relative;box-shadow:var(--shadow)}
.screen-wrap img{width:100%;height:auto;display:block;object-fit:contain;
  object-position:top center;background:#fff}
.screen-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--muted);background:#ecefee;font-size:14px;
  padding:30px;text-align:center;line-height:1.6}

/* step progress tracker */
.progress{margin-top:16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;animation:rise .45s ease both}
.progress-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:6px 12px;margin-bottom:11px;flex-wrap:wrap}
.progress-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;flex:none}
.progress-count{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;margin-left:auto}
.step-nodes{display:flex;flex-wrap:wrap;gap:7px}
.node{width:30px;height:30px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  border:1.5px solid var(--line-strong);background:#fff;color:var(--faint);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease}
.node.active{border-color:var(--accent);color:var(--accent);transform:scale(1.14)}
.node.done{background:var(--accent);border-color:var(--accent);color:#fff}
.node.failed{background:var(--red);border-color:var(--red);color:#fff;
  animation:nodeflash .5s ease}
.node.recovering{background:var(--amber-soft);border-color:var(--amber);
  color:var(--amber);animation:nodepulse 1s ease infinite}
@keyframes nodeflash{0%{transform:scale(1)}35%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes nodepulse{0%,100%{opacity:1}50%{opacity:.4}}

/* verdict: steps bar + chips */
.verdict .v-bar{height:8px;background:rgba(20,40,26,.10);border-radius:99px;
  overflow:hidden;margin-top:11px}
.verdict .v-bar span{display:block;height:100%;background:var(--accent);
  border-radius:99px;transition:width .6s ease}
.verdict.fail .v-bar span{background:var(--red)}
.v-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.chip{font-family:var(--mono);font-size:12px;font-weight:600;
  background:rgba(255,255,255,.65);border:1px solid var(--line-strong);
  color:var(--ink-2);padding:3px 11px;border-radius:99px}

/* results panel: the verdict panel, built live from the run's own
   events — a per-step row per task step under the status, bar and
   chips. While the run is live the panel is neutral ("running");
   the verdict event recolours it pass/fail. */
.verdict.running{background:var(--surface-2);border-color:var(--line)}
.verdict .v-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px}
.sr-list{margin-top:13px;border-top:1px solid rgba(20,40,26,.10)}
.sr-row{display:grid;grid-template-columns:26px 58px 1fr auto;gap:10px;
  align-items:center;padding:7px 2px;border-bottom:1px solid rgba(20,40,26,.07)}
.sr-row:last-child{border-bottom:0}
@media(max-width:560px){.sr-row{grid-template-columns:26px 52px 1fr}
  .sr-counts{grid-column:3;text-align:left}}
.sr-mark{width:24px;height:24px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;line-height:1;
  border:1.5px solid var(--line-strong);background:#fff;color:var(--faint)}
.sr-mark.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.sr-mark.rec{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.sr-mark.fail{background:var(--red);border-color:var(--red);color:#fff}
.sr-mark.active{border-color:var(--accent);color:var(--accent)}
.sr-name{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.sr-status{font-size:13.5px;color:var(--ink-2)}
.sr-status.rec{color:var(--amber)}
.sr-status.fail{color:var(--red)}
.sr-counts{font-family:var(--mono);font-size:12px;color:var(--muted);
  text-align:right;white-space:nowrap}
.log{list-style:none;margin:0;padding:8px 0;background:var(--surface-2);
  border:1px solid var(--line);border-radius:20px;max-height:400px;overflow:auto}
.log li{font-family:var(--mono);font-size:12.8px;padding:8px 16px;line-height:1.5;
  border-bottom:1px solid #e9e9ec;display:flex;gap:10px;color:var(--ink-2)}
.log li:last-child{border-bottom:0}
.log .ev{flex:0 0 92px;text-transform:uppercase;font-size:11px;letter-spacing:.06em;
  padding-top:1px;font-weight:600}
.log .ev-observe{color:var(--faint)} .log .ev-step_ok{color:var(--accent)}
.log .ev-failure{color:var(--red)} .log .ev-recovery{color:var(--amber)}
.log .ev-dismiss{color:var(--amber)} .log .ev-started{color:var(--accent)}
.log .ev-verdict{color:var(--ink)} .log .ev-error{color:var(--red)}
.log li.shot{color:var(--faint)}

/* ---------- evaluation ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 4px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:20px;
  transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.card .c-num{font-family:var(--mono);font-size:clamp(26px,3vw,34px);
  font-weight:600;letter-spacing:-.03em}
.card .c-lab{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.45}
.card.good .c-num{color:var(--accent)} .card.bad .c-num{color:var(--red)}
.eval-h{font-size:19px;margin:34px 0 8px;font-weight:700;letter-spacing:-.01em}
.takeaway{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 14px;
  max-width:780px}
.takeaway:empty{display:none}
.table-wrap{border:1px solid var(--line);border-radius:18px;overflow:auto;
  background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:12px 16px;font-weight:600;
  border-bottom:1px solid var(--line-strong);background:var(--surface-2)}
td{padding:11px 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:13px;color:var(--ink-2)}
td:first-child{font-family:inherit;color:var(--ink)}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#fafafb}
tr:last-child td{border-bottom:0}

/* evaluation charts: grouped pass-rate bars */
/* every chart block sits in a raised card so the visuals read as
   structured, dimensional panels; proportions stay exact */
#eval-charts,#eval-donuts,#eval-flip,#eval-hist{background:var(--surface);
  border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);
  padding:22px 24px}
@media(max-width:640px){#eval-charts,#eval-donuts,#eval-flip,#eval-hist{padding:16px}}
.chart{margin:16px 0 24px}
.chart:last-child{margin-bottom:6px}
.chart-title{font-weight:700;font-size:16px;margin-bottom:9px;letter-spacing:-.01em}
.bar-row{display:grid;grid-template-columns:104px 1fr 124px;gap:12px;
  align-items:center;margin:6px 0}
@media(max-width:640px){.bar-row{grid-template-columns:84px 1fr 96px}}
.bar-lab{font-family:var(--mono);font-size:11.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em}
.bar-track{height:22px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;overflow:hidden;
  box-shadow:inset 0 2px 4px rgba(20,40,26,.08)}
/* the unfilled remainder of a bar is the share NOT passed: tint it
   pale red so a partial bar reads as green/slate + red remainder,
   never as a shorter "mode" bar */
.bar-track.miss{background:var(--red-soft);border-color:#f0c6bd}
.bar-fill{height:100%;border-radius:99px;transition:width .6s ease;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -4px 6px rgba(0,0,0,.16),
  0 3px 8px rgba(20,40,26,.14)}
/* bar colour encodes the MODE (green = recovery on, slate = recovery
   off); the result is the fill length plus the red remainder above */
.bar-fill.on{background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.bar-fill.off{background:linear-gradient(90deg,#8296ab,#5b7186)}
/* a true 0% still shows a red sliver — zero is a result, not missing data */
.bar-fill.zero{background:var(--red)}
.chart-legend{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;
  margin:2px 0 6px;font-size:12.5px;color:var(--muted)}
.chart-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;
  margin-right:6px;vertical-align:-1px}
.chart-legend .sw.on{background:var(--accent)}
.chart-legend .sw.off{background:#5b7186}
.chart-legend .sw.miss{background:var(--red-soft);border:1px solid #f0c6bd}
.bar-num{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);text-align:right}

/* evaluation donuts: outcome mix per mode */
.donuts{display:grid;grid-template-columns:1fr 1fr;gap:8px 34px}
@media(max-width:820px){.donuts{grid-template-columns:1fr}}
.donut-flex{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.donut{width:178px;height:178px;flex:none;
  filter:drop-shadow(0 12px 20px rgba(20,40,26,.20))}
.donut-big{font-family:var(--mono);font-size:29px;font-weight:700;fill:var(--ink);
  text-anchor:middle}
.donut-small{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--muted);text-anchor:middle}
.donut-legend{flex:1;min-width:180px}
.donut-li{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.donut-li:last-child{border-bottom:0}
.donut-li .sw{width:15px;height:15px;border-radius:4px;flex:none;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.4),0 2px 5px rgba(20,40,26,.18)}
.donut-lab{flex:1;font-size:14.5px;color:var(--ink-2)}
.donut-n{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink)}

/* evaluation flip chart: adversarial tasks, attempts off vs on */
.flip-row{padding:13px 0;border-bottom:1px solid var(--line)}
.flip-row:last-child{border-bottom:0;padding-bottom:2px}
.flip-name{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);
  margin-bottom:7px}
.flip-line{display:grid;grid-template-columns:36px 1fr 218px;gap:11px;
  align-items:center;margin:5px 0}
@media(max-width:700px){.flip-line{grid-template-columns:30px 1fr 148px}
  .flip-num{font-size:11px}}
.flip-mode{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.flip-track{height:19px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(20,40,26,.08)}
.flip-fill{height:100%;border-radius:99px;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -4px 6px rgba(0,0,0,.16)}
.flip-fill.pass{background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.flip-fill.fail{background:linear-gradient(90deg,#cd4636,var(--red))}
.flip-num{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}

/* evaluation attempts histogram */
.hist{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.hist-col{flex:1;text-align:center;min-width:0}
.hist-pair{display:flex;gap:5px;justify-content:center;align-items:flex-end;
  height:162px;border-bottom:2px solid var(--line-strong)}
.hist-bw{display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%}
.hist-n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);
  margin-bottom:4px}
.hist-bar{width:27px;border-radius:7px 7px 0 0;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -4px 6px rgba(0,0,0,.14),
  0 4px 10px rgba(20,40,26,.13)}
@media(max-width:640px){.hist-bar{width:17px}}
.hist-bar.on{background:linear-gradient(180deg,var(--accent-bright),var(--accent))}
.hist-bar.off{background:linear-gradient(180deg,#8296ab,#5b7186)}
.hist-lab{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:8px}
.hist-axis{text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* evaluation heatmap: tasks x recovery mode */
.hm{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)}
.hm-head,.hm-row{display:grid;grid-template-columns:1fr 128px 128px}
@media(max-width:640px){.hm-head,.hm-row{grid-template-columns:1fr 80px 80px}}
.hm-head{background:var(--surface-2);font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.hm-head span{padding:11px 14px}
.hm-head .hm-col{text-align:center}
.hm-group{background:#eef4f0;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong);
  font-weight:600;padding:9px 14px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.hm-row{border-bottom:1px solid var(--line);align-items:stretch}
.hm-row:last-of-type{border-bottom:0}
.hm-task{padding:9px 14px;font-family:var(--mono);font-size:12.8px;color:var(--ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hm-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 4px;font-family:var(--mono);border-left:1px solid var(--line)}
.hm-cell .hm-att{font-size:17px;font-weight:700;line-height:1.1}
.hm-cell .hm-rec{font-size:10px;opacity:.85;line-height:1.25}
.hm-cell.pass{background:linear-gradient(180deg,#0e8a3f,var(--accent));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.hm-cell.pass.rec{background:linear-gradient(180deg,#6cb889,#58a877);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.hm-cell.fail{background:linear-gradient(180deg,#cd4636,var(--red));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.hm-cell.na{background:var(--surface-2);color:var(--faint)}
.hm-legend{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;
  margin-top:12px;font-size:12.5px;color:var(--muted)}
.hm-legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;
  margin-right:6px;vertical-align:-1px}
.hm-legend .sw.pass{background:var(--accent)}
.hm-legend .sw.passrec{background:#58a877}
.hm-legend .sw.fail{background:var(--red)}

/* ---------- footer ---------- */
footer{margin-top:110px;color:rgba(255,255,255,.75);
  background:
    radial-gradient(700px 300px at 90% -30%, rgba(64,224,160,.22), rgba(64,224,160,0) 60%),
    linear-gradient(138deg, var(--deep-1), var(--deep-2) 55%, #0a4a2c);
  padding:46px 0 54px}
footer .name{font-size:21px;font-weight:700;letter-spacing:-.02em;color:#fff;margin:0 0 8px}
footer p{font-size:14.5px;max-width:760px;margin:0;line-height:1.6}
footer .links{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:18px;font-size:14px}
footer .links a{color:#8df5b6}
footer .links a:hover{color:#c8ffdf}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- public-page mode (picker) ---------- */
.pub-box{margin-top:22px;border-top:1px solid var(--line);padding-top:4px}
.pub-box .group-title{margin-top:14px}
.pub-lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin:12px 0 5px}
.pub-in{display:block;width:100%;background:#fff;border:1px solid var(--line-strong);
  border-radius:11px;padding:9px 12px;font:inherit;font-size:13.5px;color:var(--ink)}
.pub-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
select.pub-in{appearance:auto}
.pub-btn{margin-top:14px;width:100%;background:linear-gradient(180deg,var(--accent-bright),var(--accent));
  color:#fff;border:0;border-radius:980px;padding:11px 20px;font:inherit;
  font-size:14.5px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 18px rgba(11,122,55,.26);
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}
.pub-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px rgba(11,122,55,.32)}
.pub-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.pub-note{font-size:12px;line-height:1.55;color:var(--faint);margin:11px 0 0}
.pub-error{font-size:12.5px;line-height:1.5;color:var(--red);background:var(--red-soft);
  border:1px solid #f3c4ba;border-radius:11px;padding:9px 12px;margin:11px 0 0}

/* ---------- run trace strip ---------- */
.trace{margin-top:16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;animation:rise .45s ease both}
.trace-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:6px 14px;flex-wrap:wrap;margin-bottom:11px}
.trace-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;flex:none}
.trace-hint{font-size:12.5px;color:var(--faint)}
.trace-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.tr-item{flex:none;width:132px;background:#fff;border:1.5px solid var(--line-strong);
  border-radius:12px;padding:6px;cursor:pointer;text-align:left;font:inherit;
  transition:border-color .2s ease,transform .2s ease}
.tr-item:hover{transform:translateY(-2px)}
.tr-item.active{border-color:var(--accent);box-shadow:0 6px 14px rgba(11,122,55,.16)}
.tr-item img{width:100%;height:74px;object-fit:cover;object-position:top center;
  border-radius:8px;display:block;background:#ecefee}
.tr-item .trace-ph{display:flex;height:74px;align-items:center;justify-content:center;
  background:#ecefee;border-radius:8px;color:var(--faint);font-family:var(--mono)}
.tr-item .trace-cap{display:block;font-family:var(--mono);font-size:10.5px;
  line-height:1.4;color:var(--ink-2);margin-top:6px;min-height:28px;
  overflow:hidden}