:root{
  --bg:#f7f7f4; --fg:#161616; --mute:#6e6e6e; --line:#e1e1db; --card:#fff;
  --threat:#c0392b; --threatbg:#fcefed; --to:#2457c5; --tobg:#edf2fc;
  --op:#2f6f4f; --ext:#c0702a; --gen:#6b4fa0;
  --gate:#9a7000; --gatebg:#fffbf2; --gateline:#e8d7a6;
  --hot:#fbecea; --warm:#fdf5e3; --hl:#efefea; --kptext:#333;
  --prose:#333;  /* body paragraphs: one color for all of them */
}
/* dark mode (header toggle): same palette family as the section 1 mockup */
html.dark{--bg:#15171b; --fg:#e4e5e7; --mute:#8b9098; --line:#2c3037; --card:#1d2025;
  --threatbg:#3a2220; --tobg:#1e2738; --gatebg:#2e2914; --gateline:#5c4f22;
  --hot:#4a2522; --warm:#3f3520; --hl:#262a31; --kptext:#c4c7cc; --prose:#c4c7cc}
html.dark .ic{filter:grayscale(1) brightness(0) invert(1)}
.theme{font-size:12px;color:var(--mute);padding:3px 8px;border:1px solid var(--line);border-radius:12px;margin-left:6px}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--fg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.wrap{max-width:1120px;margin:0 auto;padding:36px 24px 120px}
.mute{color:var(--mute)}
.byline{margin-bottom:4px;color:var(--mute);font-size:14px}
.byline a{color:inherit}
.sp{max-width:760px;margin:-4px 0 16px;color:var(--prose);font-size:15px;white-space:pre-line}
.ref{color:var(--threat)}

/* emoji as a black-on-white cutout */
.ic{filter:grayscale(1) brightness(0);font-size:16px;line-height:1;flex:none;display:inline-block;text-align:center;width:20px;font-style:normal}

/* ───── header ───── */
header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
header h1{margin:0;font-size:28px;letter-spacing:-.3px}
header p{margin:4px 0 0;color:var(--mute)}
.langs{display:flex;gap:2px;font-size:12px}
.langs a{color:var(--mute);text-decoration:none;padding:3px 8px;border-radius:12px}
.langs a.on{background:var(--fg);color:var(--bg)}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:28px 0 8px}
.kp>div{display:flex;gap:10px;font-size:13px;border-top:2px solid var(--fg);padding-top:10px;color:var(--kptext);opacity:.7}
.kp b{display:block;color:var(--fg)}

/* ───── sections ───── */
.sec{margin-top:56px}
.sec h2{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-size:19px;font-weight:650}
.sec h2 small{font-size:13px;font-weight:400;color:var(--mute)}
.n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--fg);color:var(--bg);font-size:12px;font-weight:600;flex:none}

/* ───── 1 · swarm control: stacked blocks, one width. One font, 15px; block titles 17px bold. ───── */
:root{--ok:#3c9a5f;--amber:#d99a1e;--red:var(--threat);--black:#1d1d1d}
html.dark{--black:#3a3f47}
/* section 1 mockup is dark: palette overridden inside .win only (quarantine gray instead of black) */
.win{position:relative;--bg:#15171b;--card:#1d2025;--fg:#e4e5e7;--mute:#8b9098;--line:#2c3037;--hover:#262a31;--red:#e05a4c;--black:#b9bcc4;border:1px solid #2c3037;border-radius:8px;overflow:hidden;background:var(--bg);color:var(--fg);box-shadow:0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4)}
.wbar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#0f1114;border-bottom:1px solid var(--line)}
.wbar i{width:9px;height:9px;border-radius:50%;background:#3a3f47}
.wbar span{margin-left:8px;color:var(--mute);font-size:13px}
.c1{display:flex;flex-direction:column;gap:12px;font-size:14px;padding:16px}
.blk{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 18px}
.blk h5{font-size:15px;font-weight:700;margin:0 0 10px}
.blk h5 span{font-weight:400;font-size:13px;margin-left:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:120px;height:32px;border:1px solid #3a3f47;border-radius:5px;background:var(--hover);font-size:14px;color:var(--fg)}
.btn[hidden]{visibility:hidden}  /* hidden but keeps its place, so the other buttons don't move */
.btn:hover{border-color:var(--fg)}
.btn.go{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.go:hover,.btn.look:hover,.btn.stop:hover{filter:brightness(.92)}
.btn.look{background:#b07a0c;border-color:#b07a0c;color:#fff}
.btn.stop{background:var(--red);border-color:var(--red);color:#fff}
.acts{display:flex;gap:8px}
.btn.sure{background:var(--to);border-color:var(--to);color:#fff}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:0}
.a-ok{background:var(--ok)}.a-watch{background:var(--amber)}.a-paused{background:var(--red)}.a-quar{background:var(--black)}

.c-top{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0}
.cb{padding:10px 18px}
.cv{display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.c-top h5{margin:0}
.c-top .pbar{margin:6px 0 3px}
.cb+.cb{border-left:1px solid var(--line)}
.cnt{white-space:nowrap}
.sbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:6px 0 3px}
.sbar i{min-width:3px}
.legend{color:var(--mute)}
.pbar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:8px 0 4px}
.pbar i{display:block;height:100%;background:var(--fg)}
.two{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:stretch}
.tw{display:grid;grid-template-columns:10px 190px 1fr;gap:14px;align-items:center;width:calc(100% + 16px);height:30px;padding:0 8px;margin:0 -8px;border-radius:4px}
.tw .dot{margin:0}
.tw:hover,.tw.sel{background:var(--hover)}
.tw-insp{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tw-insp[hidden]{display:none}
.tw-insp .acts{margin-top:10px}

.cells{display:grid;grid-template-columns:repeat(var(--n),8px);gap:2px}
.cell{width:8px;height:8px;border-radius:1px;cursor:pointer;animation:cell-pulse 2.9s ease-in-out infinite}  /* staggered by an inline negative delay per cell */
@keyframes cell-pulse{50%{opacity:.6}}
.frozen .cell{animation:none}
@media (prefers-reduced-motion:reduce){.cell{animation:none}}
.frozen .cells{opacity:.55;filter:grayscale(.6);transition:opacity .3s,filter .3s}  /* agents overview while the run is frozen */
.cell.a-paused{background:#e8392b}  /* flagged contexts, brighter than the status red */
.cell:hover,.cell.sel{outline:2px solid var(--fg);outline-offset:1px}
.cells{position:relative}
.insp{position:absolute;z-index:10;width:340px;padding:10px 12px;background:var(--hover);border:1px solid #3a3f47;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:14px}
.insp .trace{margin:6px 0 0}
.insp .acts{margin-top:10px}
.cell{cursor:pointer}
.modal{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-start;padding-top:90px;justify-content:center;background:rgba(0,0,0,.6)}
.modal[hidden]{display:none}
.mbox{width:min(780px,92%);max-height:min(85vh,calc(100% - 110px));overflow:auto;background:var(--card);border:1px solid #3a3f47;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.6);font-size:14px}
.mhead{position:relative;display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:15px}
.mfoot{display:flex;justify-content:center;padding:10px 16px;border-top:1px solid var(--line)}
.mdisc{width:auto;padding:0 14px;font-size:13px}
.modal-x{margin-left:auto;color:var(--mute);font-size:16px;padding:0 4px}
.modal-x:hover{color:var(--fg)}
.mcls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.vd{padding:1px 10px;border-radius:4px;font-weight:700;color:#fff}
.vd-clean{background:var(--ok)}.vd-flagged{background:var(--red)}
.chk{white-space:nowrap}
.alog{padding:8px 0}
.al{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:5px 16px;border-left:3px solid transparent}
.al>span:first-child{color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.al-tool>span:last-child,.al-result>span:last-child{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.al-cot>span:last-child{font-style:italic;color:#c3c6cc}
.al.flag{background:rgba(224,90,76,.12);border-left-color:var(--red)}
.cs-paused{background:#8f2a22;color:#fff;border-radius:6px 0 0 6px;animation:cs-pulse 1.8s ease-in-out infinite}
@keyframes cs-pulse{50%{background:#e0503f;box-shadow:inset 0 0 0 1px #ff8a7a}}
@media (prefers-reduced-motion:reduce){.cs-paused{animation:none}}
.cs-paused .legend{color:#f1d4d0}
.st-paused,.st-frozen{font-weight:700}
.insp[hidden]{display:none}
.trace{margin:8px 0 12px;padding-left:22px;font-family:ui-monospace,Menlo,monospace}

.need{display:grid;grid-template-columns:10px 1fr 376px;align-items:center;gap:14px;padding:3px 0}
.need .dot{margin:0}
.itl{display:flex;align-items:center;gap:12px;padding:8px 16px}
.itl h5{margin:0}
.itl .mute{font-size:13px}
.itl-s{flex:1;display:flex;gap:2px}
.itl-s i{flex:1;height:10px;border-radius:1px;cursor:default}
.itl-s i:hover{outline:2px solid var(--fg);outline-offset:1px}
.itl-r{width:330px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cell.hl{outline:2px solid var(--fg);outline-offset:2px}
.olog{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:2px 0;font-variant-numeric:tabular-nums}
.olog-y{margin:2px -8px;padding:2px 8px;border-radius:4px;background:rgba(217,154,30,.14)}
.olog-y>span:last-child{color:var(--amber);font-weight:600}
/* Log colors: green go, yellow blocked, red paused/frozen; .hl = human action, tinted row */
.olog.c-g>span:last-child{color:var(--ok)}.olog.c-y>span:last-child{color:var(--amber)}.olog.c-r>span:last-child{color:var(--red)}
.olog.hl{margin:2px -8px;padding:2px 8px;border-radius:4px}.olog.hl>span:last-child{font-weight:600}
.olog.hl.c-g{background:rgba(60,154,95,.14)}.olog.hl.c-y{background:rgba(217,154,30,.14)}.olog.hl.c-r{background:rgba(224,90,76,.14)}

.ctl-band{background:var(--black);color:#fff;text-align:center;padding:12px 20px;border-radius:6px} /* section 2 */

.hists{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hist{border:1px solid var(--line);border-radius:5px;padding:8px 10px}
.hist-h{display:flex;flex-direction:column;margin-bottom:6px;white-space:nowrap;overflow:hidden}
.hist-h b{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.hist-h small{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.hist-b{display:flex;align-items:flex-end;gap:1px;height:36px}
.hist-b i{flex:1;min-height:2px;border-radius:1px 1px 0 0;opacity:.85}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ───── 2–5 share section 1's rules: one font, thin gray borders, no fills. Each section fits a 900px-high screen. ───── */
/* ───── 2 · architecture: 40px rows, 6px apart; the order is the flow. Brace = agent ───── */
.consid{font-size:15px;line-height:1.6}
.consid p{max-width:760px;margin:0 0 12px}
.arch-wrap{display:flex;gap:14px;justify-content:center;align-items:stretch}
.arch{display:flex;flex-direction:column;gap:6px;flex:0 1 720px;min-width:0;font-size:15px}
.aside{flex:0 0 210px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.aside>b{font-size:13px;color:var(--mute);font-weight:600;text-align:center}
.aside div{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px 12px;background:var(--black);color:#fff;border-radius:6px}
.aside span{font-size:12px;color:#9a9a9a}
.ac-gray{background:#6b7079}.ac-yellow{background:#b07a0c;color:#fff}.ac-red{background:var(--threat)}
.tact{display:inline-block;padding:2px 8px;border-radius:4px;color:#fff;font-size:13px;white-space:nowrap}
.aside [class^="ac-"] span{color:inherit;opacity:.8}
.abox{display:flex;align-items:center;justify-content:center;gap:14px;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:var(--card);white-space:nowrap;overflow:hidden}
.abox span{color:var(--mute);overflow:hidden;text-overflow:ellipsis}
.acells{display:flex;gap:2px;margin-left:0}
.acells i{width:10px;height:10px;border-radius:2px;background:var(--ok)}
.tl-band{margin-bottom:10px}  /* same gap as between the cards */
.arch .ctl-band,.tl-band{display:flex;align-items:center;justify-content:center;height:28px;padding:0 14px;border-radius:6px;font-size:13px;text-align:center}
.arch .actl{height:24px;line-height:24px;margin-top:-6px;padding:0 14px;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atools{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:8px 14px 10px}
.asub{display:flex;gap:6px;margin-top:6px}
.asub span{flex:1;display:flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--line);border-radius:4px;font-size:12px;text-align:center;line-height:1.1}
.asub span.danger{border-color:var(--red)}
/* brace column: rows 1 Tool calls · 2 Control layer band · 3 its controls · 4 Contexts */
.aagent{display:grid;grid-template-columns:1fr;gap:6px 10px}
.aagent>*{grid-column:1}
.aagent .atools{grid-row:1}
.aagent .ctl-band{grid-row:2}
.aagent .actl{grid-row:3}
.aagent .aharness{grid-row:3}
.aagent .actx{grid-row:3}
.aagent .abrace{grid-column:2;grid-row:1/5}
.abrace{border:1px solid var(--fg);border-left:0;border-radius:0 10px 10px 0;width:14px;position:relative}
.abrace span{position:absolute;left:22px;top:50%;transform:translateY(-50%)}

/* ───── 3 · threats: plane (left) + numbered list (right); hover links the two ───── */
.rwrap{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start}
.rchart{display:grid;grid-template-columns:18px auto;gap:4px 6px;font-size:13px}
.ry{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;color:var(--mute)}
.rx{grid-column:2;text-align:center;color:var(--mute)}
.rgrid{display:grid;grid-template-columns:52px repeat(3,90px);grid-auto-rows:90px}
.rgrid>div:nth-last-child(-n+4){height:22px}
.rlab{display:flex;align-items:center;color:var(--mute)}
.rlab.x{justify-content:center}
.rcell{border:1px solid var(--line);margin:-1px 0 0 -1px;background:var(--card);display:grid;grid-template-columns:repeat(3,24px);grid-auto-rows:24px;gap:4px;align-content:center;justify-content:center}
.rcell.hot{background:var(--hot)}.rcell.warm{background:var(--warm)}
/* categories: five soft blues and grays */
.rc-content{background:#d4e1f1}.rc-actions{background:#a9c1e0}.rc-attacks{background:#7d9cc6}.rc-system{background:#dcdcd6}.rc-oversight{background:#acaca4}
.rnum{display:inline-block;min-width:24px;height:24px;border-radius:50%;text-align:center;line-height:24px;font-size:12px;cursor:default}
.rnum.hl{box-shadow:0 0 0 2px var(--fg)}
.rlist{font-size:13px;min-width:0}
.rcat{color:var(--mute);padding:6px 0 2px}
.rcat:first-child{padding-top:0}
.rrow{display:flex;align-items:center;gap:8px;height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;padding:0 4px;margin:0 -4px}
.rrow .mute{overflow:hidden;text-overflow:ellipsis}
.rrow.hl{background:var(--hl)}
.foot{margin-top:10px;color:var(--mute);font-size:13px}

/* ───── 4 · trade-offs (collapsed) ───── */
.tod{background:var(--tobg);border-radius:6px;padding:10px 14px}
.tod summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--to);font-size:15px}
.tod summary span{font-size:12.5px;opacity:.8}
.tod .ic{filter:none;color:var(--to)}
.tod ol{margin:10px 0 2px;padding-left:46px;color:var(--to);font-size:13px}
.tod li{padding:2px 0}
.tod li b{font-weight:600;margin-right:8px}
.tod li span{opacity:.85}

/* ───── 5 · layer by layer: one table, one row per layer ───── */
.ltable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);font-size:14px}
.ltable th{text-align:left;font-weight:400;color:var(--mute);font-size:13px;padding:8px 10px}
.ltable td{padding:10px;border-top:1px solid var(--line);vertical-align:top}
.ltable td:first-child{white-space:nowrap}
.lstops{white-space:nowrap}
.lstops .rnum{margin-right:3px}
.ltable .ctl{cursor:help;border-bottom:1px dotted #cfcfc8}
.lto{width:200px;font-size:13px;color:var(--mute)}
.lrow.hide{display:none}

/* layer toggles, collapsed, bottom right */
#ctl{position:fixed;right:16px;bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 11px;box-shadow:0 6px 24px rgba(0,0,0,.08);z-index:5;max-width:260px}
#ctl summary{cursor:pointer;font-size:12.5px;color:var(--mute)}
#ctl .row{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
#ctl button{font-size:12px;border:1px solid var(--line);border-radius:14px;padding:3px 10px;color:var(--mute)}
#ctl button.on{background:var(--fg);color:#fff;border-color:var(--fg)}

@media (max-width:900px){
  .c-top,.two,.rwrap{grid-template-columns:1fr}
  .arch-wrap{flex-direction:column}
  .arch,.aside{flex:none}  /* in a column the flex-basis became a fixed height */
  .aside{display:grid;grid-template-columns:1fr 1fr}
  .aside>b{grid-column:1/-1}
  .kp,.tcards{grid-template-columns:1fr 1fr}
}

/* Tools in detail: four cards in a row */
.tcards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tcard{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:10px 12px;font-size:13px}
.tcard-h{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.tcard-h .tact{font-size:11px;padding:1px 6px}
.tcard p{margin:0 0 8px}
.tcard p:last-child{margin-bottom:0}
.tcard dl{margin:0}.tcard dt{color:var(--mute);font-size:11px;text-transform:uppercase;margin-top:6px}.tcard dd{margin:2px 0 0}
.ctl-cards .tcard{background:var(--black);border-color:var(--black);color:#fff}
.ctl-cards .tcard.crit,.ctl-band.crit{background:var(--threat);border-color:var(--threat)}
.orch-row{grid-template-columns:auto 1fr auto}
.cxa:hover{background:none}
.trips .tw{grid-template-columns:8px auto;column-gap:8px;row-gap:0;height:auto;padding:4px 8px}
.trips .tw .mute{grid-column:2;font-size:12px}
.atools>b{display:block;text-align:center}
.arow{display:flex;gap:10px}.arow>.abox{flex:1}
.asub span.proxy{background:var(--threat);border-color:var(--threat);color:#fff}
.asub span:not(.proxy){background:var(--black);border-color:var(--black);color:#fff}
.asub span{font-weight:700}
/* controls examples: mockup-like gray blocks, two per row; white-space keeps the "\n" line breaks */
.sub-h{margin:22px 0 8px;font-size:16px}
.exec{margin:8px 0 0}
.cnum{margin-right:8px;color:rgba(255,255,255,.75);font-size:12px;font-weight:600}
.ctl-cards .tcard-h{justify-content:flex-start}
.sub-p{max-width:760px;margin:0;color:var(--prose);font-size:15px;white-space:pre-line}
.sub-img{display:flow-root}
.sub-img figure{float:right;width:240px;margin:30px 0 8px 20px}
#problem .sub-img figure,#considerations .sub-img figure{width:320px}
#considerations .sub-img figure{margin-top:12px}
.img-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border:1px dashed var(--line);border-radius:6px;color:var(--mute);font-size:12px}
.sub-img img{display:block;width:100%;border:1px solid var(--line);border-radius:6px}
.sub-img figcaption{margin-top:4px;color:var(--mute);font-size:12px;text-align:center}
.sub-code{max-width:760px;margin:10px 0 0;padding:12px 16px;background:#1d2025;border:1px solid #2c3037;border-radius:6px;color:#e4e5e7;font:13px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap}
.py-c{color:#7f848e}.py-s{color:#98c379}.py-n{color:#d19a66}.py-k{color:#c678dd}.py-f{color:#61afef}
.ctl-ex-h{margin:18px 0 8px;font-size:14px}
.ctl-ex-p{max-width:760px;margin:0 0 10px;color:var(--prose);font-size:14px;white-space:pre-line}
.ctl-ex+.ctl-ex-p{margin:10px 0 0}
.ctl-ex-fig{overflow:hidden}
.ctl-ex-fig figure{float:left;width:320px;margin:12px 20px 8px 0}
.ctl-ex{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ctl-ex p{margin:0;padding:12px 16px;background:#1d2025;border:1px solid #2c3037;border-radius:6px;color:#e4e5e7;font-size:13px;white-space:pre-line}
.ctl-scale{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--mute)}
.ctl-scale i{flex:1;height:2px;background:linear-gradient(90deg,var(--line),var(--fg));position:relative}
.ctl-scale i::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--fg);border-right:0}
.sign{margin-top:48px;padding-top:12px;border-top:1px solid var(--line);color:var(--mute);font-size:15px;text-align:right}
.sign a{color:inherit}
.sign .about{max-width:560px;margin:16px 0 0 auto;color:var(--mute);opacity:.7;font-size:13px;font-style:italic}
.sign .about{white-space:pre-line}
.lto b{color:var(--fg);font-weight:600}
.lto div+div{margin-top:6px}
.boldbtn{position:fixed;z-index:20;width:26px;height:24px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--fg);font-weight:700;cursor:pointer}
.sub-img img{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);cursor:zoom-out}
.zoom img{max-width:92vw;max-height:92vh;border-radius:6px}
.li{display:list-item;list-style:disc}
#sources .sp{max-width:none;overflow-wrap:anywhere}
.sp a,.sub-p a{color:var(--to)}
html.dark .sp a,html.dark .sub-p a{color:#7aa7ff}
#complexity{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:start}
#complexity h2{grid-column:1/-1}
#complexity .sp{grid-column:2;grid-row:2;margin-top:0}
#complexity .cx-fig{grid-column:1;grid-row:2}
#complexity .cx-fig figure{float:none;width:320px;margin:0}

/* Threat draft: text left, one heat bar per line on the right, same line height */
.tdraft{display:grid;grid-template-columns:6px minmax(0,max-content) 260px 320px;column-gap:24px;line-height:1.5;font-size:15px}
.tscale{position:relative;height:18px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:11px;color:var(--mute)}
.tscale span{position:absolute;bottom:2px;transform:translateX(-100%)}
.tvert{grid-column:1;border-radius:3px;background:linear-gradient(#3c9a5f,#d99a1e,#e05a4c)}  /* Human (top) green → Inference (bottom) red */
.tcons-h{align-self:end;margin-bottom:6px;font-size:11px;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:2px}
.trow{grid-column:2/5;display:grid;grid-template-columns:subgrid;align-items:center;height:1.5em}
.trow[draggable=true]{cursor:grab}
.trow.drag{opacity:.4}
.trow.dropt{box-shadow:inset 0 2px var(--to)}
.trow.dropb{box-shadow:inset 0 -2px var(--to)}
.trow>span{align-self:stretch}  /* full row height, so empty cells can still be double-clicked */
.ttx{white-space:nowrap;color:var(--prose)}
.tcons{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c4453a}
html.dark .tcons{color:#ec8a80}
.ttx[contenteditable=true],.tcons[contenteditable=true]{cursor:text;outline:1px solid var(--line);overflow:visible}
.trow>i{display:flex;align-items:center;height:1.5em}
.trow[draggable=true]>i.sv{cursor:ew-resize}
.trow>i.sv{background:linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat}
.trow>i>b{display:block;height:6px;border-radius:3px}
.tadd{grid-column:2;margin-top:8px}

/* Phones: text blocks reflow to one column; the dense widgets (mockup, threat list, tables) keep their width and scroll sideways in their own box. */
@media (max-width:700px){
  .wrap{padding:20px 14px 80px}
  header{flex-direction:column-reverse;gap:10px}
  header h1{font-size:23px}
  .kp,.tcards,.ctl-ex,.hists{grid-template-columns:1fr}
  .tcard{padding:12px 14px;font-size:14px}
  .sec{margin-top:40px}
  .sec h2{font-size:17px}
  .sub-img figure,#problem .sub-img figure,#considerations .sub-img figure,.ctl-ex-fig figure,#complexity .cx-fig figure{float:none;width:100%;margin:12px 0}
  #complexity{display:block}
  #ux,#threats,#layers{overflow-x:auto}
  .abox{padding:0 8px;font-size:14px}
  .acells i:nth-child(n+16){display:none}
  .asub{flex-wrap:wrap}
  .asub span{flex:1 1 40%}
  .win{min-width:780px}
  .threats{min-width:max-content}
  .ltable{min-width:560px}
  .aside{flex-basis:auto}
  .sign{text-align:left}
  .sign .about{margin-left:0}
  #ctl{display:none}
}