.agl { --navy:#0D2C52; --ink:#0B1A1A; --cyan:#00BFB3; --mid:#006093; --ribbon:#4E6F9E; --sky:#69CBEF;
  --slate:#536476; --line:#DBE3E8; --surface:#EEF3F6; --paper:#F7FAFC; --grid:#E3ECF2; --white:#FFFFFF;
  --loss:#6A3FB5; --loss-bg:#EFE8FA; --stop:#006093; --stop-bg:#E2EEF5; --ok:#00BFB3; --ok-bg:#DDF5F3; --clean:#9DB0C0; --clean-bg:#EEF3F6;
  --font:"Inter", Verdana, sans-serif; --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --u: clamp(12px, 0.5vw + 8.5px, 16.5px);
  box-sizing:border-box; color:var(--navy); font-family:var(--font); -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px; background-position:-1px -1px;
  padding:calc(var(--u)*2.2); border-radius:24px; border:1px solid var(--line); position:relative; }
.agl *, .agl *::before, .agl *::after { box-sizing:border-box; margin:0; padding:0; }
.agl button { font-family:var(--font); cursor:pointer; }
.agl a { color:var(--mid); font-weight:600; }
.agl-wrap { max-width:1320px; margin:0 auto; display:flex; flex-direction:column; gap:calc(var(--u)*1.2); }
.agl.loading .agl-wrap { visibility:hidden; }

/* head */
.agl-kicker { font-weight:700; font-size:calc(var(--u)*.8); letter-spacing:.14em; text-transform:uppercase; color:var(--mid); }
.agl-title { font-weight:800; font-size:calc(var(--u)*3.2); line-height:1; letter-spacing:-.02em; margin-top:calc(var(--u)*.45); color:var(--navy); }
.agl-sub { color:var(--slate); font-weight:500; font-size:calc(var(--u)*1.12); line-height:1.5; margin-top:calc(var(--u)*.7); max-width:54em; }
.agl-stats { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.5); margin-top:calc(var(--u)*1); }
.agl-stat { background:var(--white); border:1px solid var(--line); border-radius:999px; padding:calc(var(--u)*.38) calc(var(--u)*.9); font-size:calc(var(--u)*.86); color:var(--slate); font-weight:500; }
.agl-stat b { color:var(--navy); font-weight:700; }
.agl-stat.loss b { color:var(--loss); }
.agl-stat.stop b { color:var(--stop); }

/* cards */
.agl-card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:calc(var(--u)*1.25); box-shadow:0 1px 0 rgba(13,44,82,.03), 0 8px 24px -16px rgba(13,44,82,.18); min-width:0; }
.agl-label { font-weight:700; font-size:calc(var(--u)*.74); letter-spacing:.12em; text-transform:uppercase; color:var(--ribbon); display:flex; align-items:baseline; gap:.8em; flex-wrap:wrap; }
.agl-label em { font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; color:var(--slate); font-size:calc(var(--u)*.85); }
.agl-h2 { font-weight:800; font-size:calc(var(--u)*1.5); line-height:1.15; letter-spacing:-.01em; margin-top:calc(var(--u)*.35); color:var(--navy); }
.agl-note { color:var(--slate); font-size:calc(var(--u)*.88); margin-top:calc(var(--u)*.35); line-height:1.45; }
.agl-p { color:var(--navy); font-size:calc(var(--u)*.95); line-height:1.55; margin-top:calc(var(--u)*.8); font-weight:500; }
.agl-p.small { font-size:calc(var(--u)*.85); color:var(--slate); }
.agl-two { display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u)*1.2); align-items:start; }
.agl-costlabel { margin-top:calc(var(--u)*1.4); }

/* setup */
.agl-setup-grid { display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u)*.9) calc(var(--u)*1.4); align-items:start; }
.agl-setup-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.agl-field { min-width:0; }
.agl-seg { display:flex; flex-wrap:wrap; gap:6px; margin-top:calc(var(--u)*.45); }
.agl-seg button { border:1px solid var(--line); background:var(--surface); color:var(--navy); border-radius:999px; padding:calc(var(--u)*.42) calc(var(--u)*.85); font-size:calc(var(--u)*.86); font-weight:600; line-height:1.2; }
.agl-seg button:hover { background:#E2ECF2; }
.agl-seg button[aria-checked="true"] { background:var(--navy); color:var(--white); border-color:var(--navy); }
.agl-seg button .dot { display:inline-block; width:.62em; height:.62em; border-radius:50%; margin-right:.45em; vertical-align:.05em; }
.agl-setup-foot { display:flex; gap:calc(var(--u)*1.2); align-items:center; justify-content:space-between; flex-wrap:wrap; border-top:1px dashed var(--line); margin-top:calc(var(--u)*1); padding-top:calc(var(--u)*.9); }
.agl-desc { color:var(--slate); font-size:calc(var(--u)*.92); line-height:1.5; flex:1 1 32em; font-weight:500; }
.agl-desc b { color:var(--navy); }
.agl-runs { display:flex; align-items:center; gap:.7em; }
.agl-runs-l { font-size:calc(var(--u)*.8); color:var(--slate); font-weight:600; }
.agl-runpick { display:flex; gap:6px; }
.agl-runpick button { width:calc(var(--u)*2.1); height:calc(var(--u)*2.1); border-radius:50%; border:2px solid transparent; font-weight:800; font-size:calc(var(--u)*.82); color:var(--navy); }
.agl-runpick button[aria-checked="true"] { border-color:var(--navy); box-shadow:0 0 0 2px var(--white) inset; }

/* result colors */
.r-loss { background:var(--loss); color:var(--white); }
.r-stopped_by_guardrail { background:var(--stop); color:var(--white); }
.r-no_attempt { background:var(--ok); color:var(--navy); }
.r-clean { background:var(--clean); color:var(--navy); }
.r-none { background:var(--surface); color:var(--slate); }

/* stage */
.agl-stage { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:calc(var(--u)*1.2); align-items:stretch; }
.agl-flow { display:flex; flex-direction:column; }
.agl-flow-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1em; flex-wrap:wrap; }
.agl-ledger { display:flex; gap:6px; flex-wrap:wrap; }
.agl-led { border-radius:10px; padding:calc(var(--u)*.3) calc(var(--u)*.7); font-size:calc(var(--u)*.78); font-weight:600; color:var(--slate); background:var(--surface); border:1px solid var(--line); white-space:nowrap; }
.agl-led b { display:block; font-size:calc(var(--u)*1.05); color:var(--navy); font-weight:800; font-variant-numeric:tabular-nums; }
.agl-led.loss { background:var(--loss-bg); border-color:#D8C8F2; } .agl-led.loss b { color:var(--loss); }
.agl-led.stop { background:var(--stop-bg); border-color:#C3DAE8; } .agl-led.stop b { color:var(--stop); }
.agl-svg { width:100%; height:auto; display:block; margin-top:calc(var(--u)*.6); flex:none; }
.agl-svg text { font-family:var(--font); }
.agl-play { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:calc(var(--u)*.6); }
.agl-btn { background:var(--navy); color:var(--white); border:1px solid var(--navy); border-radius:999px; padding:calc(var(--u)*.5) calc(var(--u)*1.1); font-weight:700; font-size:calc(var(--u)*.9); }
.agl-btn:hover { background:#163E6E; }
.agl-btn.ghost { background:var(--white); color:var(--navy); border-color:var(--line); }
.agl-btn.ghost:hover { background:var(--surface); }
.agl-speed { display:flex; gap:4px; }
.agl-speed button { border:1px solid var(--line); background:var(--white); color:var(--slate); border-radius:8px; padding:calc(var(--u)*.3) calc(var(--u)*.5); font-weight:700; font-size:calc(var(--u)*.78); }
.agl-speed button[aria-checked="true"] { background:var(--surface); color:var(--navy); border-color:var(--ribbon); }
.agl-prog { flex:1 1 80px; height:6px; background:var(--surface); border-radius:6px; overflow:hidden; min-width:60px; }
.agl-prog i { display:block; height:100%; width:0; background:var(--cyan); }
.agl-stepn { font-size:calc(var(--u)*.8); color:var(--slate); font-weight:600; font-variant-numeric:tabular-nums; }

/* step log */
.agl-log { display:flex; flex-direction:column; contain:size; min-height:calc(var(--u)*20); }
.agl-steps { list-style:none; overflow-y:auto; margin-top:calc(var(--u)*.6); padding-right:4px; display:flex; flex-direction:column; gap:6px; flex:1; overscroll-behavior:contain; }
.agl-step { border:1px solid var(--line); border-radius:12px; padding:calc(var(--u)*.5) calc(var(--u)*.7); background:var(--white); cursor:pointer; font-size:calc(var(--u)*.86); line-height:1.4; display:grid; grid-template-columns:calc(var(--u)*1.7) 1fr; gap:.6em; align-items:start; }
.agl-step.future { opacity:.35; }
.agl-step.empty { display:block; cursor:default; color:var(--slate); }
.agl-step.now { border-color:var(--navy); box-shadow:0 0 0 2px rgba(13,44,82,.08); }
.agl-step .ic { width:calc(var(--u)*1.7); height:calc(var(--u)*1.7); border-radius:8px; display:grid; place-items:center; background:var(--surface); color:var(--ribbon); }
.agl-step .ic svg { width:62%; height:62%; }
.agl-step .tx { min-width:0; color:var(--navy); font-weight:600; overflow-wrap:anywhere; }
.agl-step .dt { grid-column:2; color:var(--slate); font-weight:500; white-space:pre-wrap; font-size:calc(var(--u)*.82); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:calc(var(--u)*.5); margin-top:2px; max-height:calc(var(--u)*16); overflow:auto; overflow-wrap:anywhere; }
.agl-step.say { background:#F4F8FB; border-style:dashed; }
.agl-step.say .tx { font-weight:500; }
.agl-step.say .tx p + p, .agl-step.say .tx ul { margin-top:.45em; }
.agl-step.say .tx ul { padding-left:1.1em; }
.agl-step.f-trap { border-color:#CDB8EE; background:#FAF7FE; } .agl-step.f-trap .ic { background:var(--loss-bg); color:var(--loss); }
.agl-step.f-harm { border-color:var(--loss); background:var(--loss-bg); } .agl-step.f-harm .ic { background:var(--loss); color:var(--white); }
.agl-step.f-stop .ic, .agl-step.f-block .ic, .agl-step.f-gate .ic { background:var(--stop); color:var(--white); }
.agl-step.f-stop { border-color:var(--stop); background:var(--stop-bg); }
.agl-step.f-ok .ic { background:var(--ok-bg); color:#007A72; }
.agl-step.f-warn .ic { background:var(--loss-bg); color:var(--loss); }
.agl-tag { display:inline-block; font-size:calc(var(--u)*.68); font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.15em .5em; border-radius:6px; margin-left:.4em; vertical-align:.1em; }
.agl-tag.loss { background:var(--loss); color:var(--white); }
.agl-tag.stop { background:var(--stop); color:var(--white); }
.agl-tag.trap { background:var(--loss-bg); color:var(--loss); }

/* result strip */
.agl-result { display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u)*1.2); align-items:center; }
.agl-verdict { border-radius:14px; padding:calc(var(--u)*.8) calc(var(--u)*1.1); min-width:calc(var(--u)*14); }
.agl-verdict small { display:block; font-size:calc(var(--u)*.72); font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.agl-verdict b { display:block; font-size:calc(var(--u)*1.35); font-weight:800; margin-top:.15em; line-height:1.15; }
.agl-facts { display:flex; flex-wrap:wrap; gap:calc(var(--u)*.5) calc(var(--u)*1.4); }
.agl-fact { font-size:calc(var(--u)*.82); color:var(--slate); font-weight:600; }
.agl-fact b { display:block; color:var(--navy); font-size:calc(var(--u)*1.05); font-weight:800; font-variant-numeric:tabular-nums; }
.agl-fact b.loss { color:var(--loss); } .agl-fact b.stop { color:var(--stop); }
.agl-why { grid-column:1 / -1; color:var(--navy); font-size:calc(var(--u)*.95); line-height:1.5; font-weight:500; border-top:1px dashed var(--line); padding-top:calc(var(--u)*.8); }

/* board */
.agl-board-head { display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap; align-items:flex-end; }
.agl-legend { display:flex; gap:calc(var(--u)*.9); flex-wrap:wrap; font-size:calc(var(--u)*.8); color:var(--slate); font-weight:600; }
.agl-legend span { display:inline-flex; align-items:center; gap:.4em; }
.agl-legend i { width:.85em; height:.85em; border-radius:50%; display:inline-block; }
.agl-grids { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(var(--u)*1.1); margin-top:calc(var(--u)*1); }
.agl-grid h3 { font-size:calc(var(--u)*1); font-weight:800; color:var(--navy); display:flex; justify-content:space-between; align-items:baseline; gap:.5em; }
.agl-grid h3 span { font-size:calc(var(--u)*.78); font-weight:600; color:var(--slate); }
.agl-gt { display:grid; grid-template-columns:minmax(0,1.25fr) repeat(4, minmax(0,1fr)); gap:4px; margin-top:calc(var(--u)*.5); }
.agl-gt .h { font-size:calc(var(--u)*.68); font-weight:700; color:var(--slate); text-align:center; line-height:1.2; padding:2px; display:flex; align-items:flex-end; justify-content:center; }
.agl-gt .rh { font-size:calc(var(--u)*.76); font-weight:700; color:var(--navy); display:flex; align-items:center; line-height:1.2; }
.agl-cell { border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:5px 3px; display:flex; flex-wrap:wrap; gap:3px; justify-content:center; align-content:center; min-height:calc(var(--u)*2.4); cursor:pointer; }
.agl-cell:hover { border-color:var(--ribbon); }
.agl-cell.sel { border-color:var(--navy); box-shadow:0 0 0 2px var(--navy) inset; }
.agl-cell i { width:calc(var(--u)*.62); height:calc(var(--u)*.62); border-radius:50%; display:block; }
.agl-cell i.r-pending { background:transparent; border:1px dashed var(--clean); }

/* model bars */
.agl-mb { margin-top:calc(var(--u)*.9); display:flex; flex-direction:column; gap:calc(var(--u)*.7); }
.agl-mrow { display:grid; grid-template-columns:calc(var(--u)*9) 1fr; gap:.8em; align-items:center; }
.agl-mrow .nm { font-weight:800; font-size:calc(var(--u)*.92); }
.agl-mrow .nm small { display:block; font-weight:600; color:var(--slate); font-size:calc(var(--u)*.75); }
.agl-bars { display:flex; flex-direction:column; gap:4px; }
.agl-bar { display:grid; grid-template-columns:calc(var(--u)*6.4) 1fr calc(var(--u)*3.6); gap:.5em; align-items:center; font-size:calc(var(--u)*.76); color:var(--slate); font-weight:600; }
.agl-bar .track { height:calc(var(--u)*.85); background:var(--surface); border-radius:5px; overflow:hidden; }
.agl-bar .fill { height:100%; background:var(--loss); border-radius:5px; }
.agl-bar .fill.h { background:#9A79D3; }
.agl-bar b { color:var(--navy); font-variant-numeric:tabular-nums; text-align:right; }
.agl-costrow { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:calc(var(--u)*.5); }
.agl-cost { background:var(--surface); border-radius:10px; padding:calc(var(--u)*.5) calc(var(--u)*.6); font-size:calc(var(--u)*.74); color:var(--slate); font-weight:600; }
.agl-cost b { display:block; color:var(--navy); font-size:calc(var(--u)*1); font-weight:800; }

/* guard table */
.agl-gtab { width:100%; border-collapse:separate; border-spacing:0 6px; margin-top:calc(var(--u)*.6); font-size:calc(var(--u)*.84); }
.agl-gtab th { text-align:left; font-size:calc(var(--u)*.7); letter-spacing:.06em; text-transform:uppercase; color:var(--slate); font-weight:700; padding:0 .4em; }
.agl-gtab td { background:var(--paper); padding:calc(var(--u)*.55) .5em; vertical-align:middle; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.agl-gtab td:first-child { border-left:1px solid var(--line); border-radius:10px 0 0 10px; font-weight:800; color:var(--navy); }
.agl-gtab td:last-child { border-right:1px solid var(--line); border-radius:0 10px 10px 0; }
.agl-gtab td small { display:block; font-weight:500; color:var(--slate); font-size:calc(var(--u)*.74); margin-top:2px; }
.agl-meter { display:flex; align-items:center; gap:.5em; font-weight:800; font-variant-numeric:tabular-nums; }
.agl-meter span { flex:1; height:8px; border-radius:5px; background:var(--surface); overflow:hidden; min-width:40px; }
.agl-meter span i { display:block; height:100%; }

/* how + brief */
.agl-loop { width:100%; height:auto; margin-top:calc(var(--u)*.6); }
.agl-loop text { font-family:var(--font); }
.agl-quote { margin-top:calc(var(--u)*.8); border-left:4px solid var(--ribbon); background:var(--paper); border-radius:0 10px 10px 0; padding:calc(var(--u)*.7) calc(var(--u)*.9); font-size:calc(var(--u)*.88); line-height:1.5; color:var(--navy); white-space:pre-wrap; font-weight:500; }
.agl-quote.alt { border-left-color:var(--loss); }
.agl-quote b { display:block; font-size:calc(var(--u)*.7); letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:.35em; }
.agl-qs { margin-top:calc(var(--u)*.8); padding-left:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(16em,1fr)); gap:calc(var(--u)*.7); counter-reset:q; }
.agl-qs li { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:calc(var(--u)*.8); font-size:calc(var(--u)*.88); line-height:1.5; color:var(--slate); font-weight:500; counter-increment:q; }
.agl-qs li b { display:block; color:var(--navy); font-weight:800; font-size:calc(var(--u)*.95); margin-bottom:.3em; }
.agl-qs li b::before { content:counter(q) ". "; color:var(--mid); }

/* svg */
.agl-node rect { fill:var(--white); stroke:var(--line); stroke-width:2; }
.agl-node .nic { fill:var(--surface); }
.agl-node .ncol { fill:var(--ribbon); }
.agl-node text.t { font-size:19px; font-weight:800; fill:var(--navy); }
.agl-node text.s { font-size:14px; font-weight:600; fill:var(--slate); }
.agl-node.on rect { stroke:var(--navy); }
.agl-svg.mob .agl-node text.t { font-size:21px; }
.agl-svg.mob .agl-node text.s { font-size:17.5px; }
.agl-svg.mob.big .agl-node text.t { font-size:32px; }
.agl-svg.mob.big .agl-node text.s { font-size:22px; }
.agl-node.hot rect { stroke:var(--loss); fill:var(--loss-bg); }
.agl-node.blk rect { stroke:var(--stop); fill:var(--stop-bg); }

@media (max-width:1100px) {
  .agl-stage { grid-template-columns:1fr; }
  .agl-log { contain:none; height:calc(var(--u)*30); }
  .agl-grids { grid-template-columns:1fr; }
  .agl-two { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .agl { padding:calc(var(--u)*.9); border-radius:16px; }
  .agl-card { padding:calc(var(--u)*.9); border-radius:14px; }
  .agl-setup-grid { grid-template-columns:1fr; }
  .agl-result { grid-template-columns:1fr; }
  .agl-costrow { grid-template-columns:1fr; }
  .agl-mrow { grid-template-columns:1fr; gap:.3em; }
}

/* recording mode (?rec=1): bigger type, no page chrome */
.agl.rec { border-radius:0; border:0; }

/* rounds, hall of shame */
.agl-roundbar { display:flex; align-items:center; gap:calc(var(--u)*1); flex-wrap:wrap; border-bottom:1px dashed var(--line); padding-bottom:calc(var(--u)*.9); margin-bottom:calc(var(--u)*.9); }
.agl-rounds { margin-top:0; }
.agl-rounds button { font-size:calc(var(--u)*.92); padding:calc(var(--u)*.5) calc(var(--u)*1.05); }
.agl-rounds button[aria-checked="true"] { background:var(--mid); border-color:var(--mid); }
.agl-rnote { color:var(--slate); font-size:calc(var(--u)*.86); font-weight:500; line-height:1.45; flex:1 1 24em; }
.agl-seg button.dim { opacity:.55; }
.agl-shamelist { display:grid; grid-template-columns:repeat(auto-fill, minmax(17em, 1fr)); gap:calc(var(--u)*.7); margin-top:calc(var(--u)*.9); }
.agl-sh { text-align:left; border:1px solid #D8C8F2; background:#FBF9FE; border-radius:14px; padding:calc(var(--u)*.85); cursor:pointer; font-family:var(--font); display:flex; flex-direction:column; gap:.45em; }
.agl-sh:hover { border-color:var(--loss); }
.agl-sh .top { display:flex; justify-content:space-between; gap:.6em; align-items:baseline; }
.agl-sh .who { font-weight:800; color:var(--navy); font-size:calc(var(--u)*.92); }
.agl-sh .amt { font-weight:800; color:var(--loss); font-size:calc(var(--u)*.92); white-space:nowrap; }
.agl-sh .trap { font-size:calc(var(--u)*.74); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--loss); }
.agl-sh .q { font-size:calc(var(--u)*.86); color:var(--navy); line-height:1.45; font-weight:500; }
.agl-sh .rate { font-size:calc(var(--u)*.76); color:var(--slate); font-weight:600; }
.agl-mx { display:grid; gap:4px; margin-top:calc(var(--u)*.8); overflow-x:auto; }
.agl-mx .h { font-size:calc(var(--u)*.68); font-weight:700; color:var(--slate); text-align:center; line-height:1.2; padding:2px; display:flex; align-items:flex-end; justify-content:center; }
.agl-mx .rh { font-size:calc(var(--u)*.78); font-weight:700; color:var(--navy); display:flex; align-items:center; line-height:1.2; }
.agl-mx .rh small { display:block; color:var(--slate); font-weight:600; font-size:.85em; }
.agl-cell.na { cursor:default; background:transparent; border-style:dashed; color:var(--clean); font-size:calc(var(--u)*.64); font-weight:600; }
.agl-step .rv { display:block; margin-top:.35em; font-size:calc(var(--u)*.8); color:var(--mid); font-weight:600; }
.agl-quote.pol { border-left-color:var(--cyan); }
.agl-quote:empty { display:none; }
@media (max-width:640px) { .agl-mx { gap:3px; grid-template-columns:minmax(5.4em,1.2fr) repeat(6, minmax(2.1em,1fr)) !important; } .agl-mx .h { font-size:calc(var(--u)*.6); hyphens:auto; } }