:root{
  --bg:#FFFFFF; --surface:#F7F8FA; --ink:#20242C; --muted:#5D6570; --line:#E2E5EA;
  --office:#2E4057; --office-ink:#FFFFFF; --pillar:#EDF1F6; --pillar-ink:#2E4057;
  --none-bg:#FFFFFF; --none-ink:#6B7280; --none-line:#D8DCE2;
  --low:#DDD6FE; --low-ink:#4C1D95;
  --med:#7C3AED; --med-ink:#FFFFFF;
  --high:#5B21B9; --high-ink:#FFFFFF;
  --agent:#7B5CE0; --agent-soft:#EFEAFC; --agent-ink:#4B3699;
  --ok:#2E7D4F; --ok-soft:#E8F4EC;
  --tip-bg:#23262E; --tip-ink:#F2F3F6; --tip-accent:#BCA8FF;
  --dim:.16;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16181D; --surface:#1D2026; --ink:#E8EAEE; --muted:#9AA1AC; --line:#31353D;
    --office:#3A4E6B; --office-ink:#F2F5FA; --pillar:#252B36; --pillar-ink:#B9C6D8;
    --none-bg:#1D2026; --none-ink:#8B929C; --none-line:#3A3F48;
    --low:#3B3058; --low-ink:#DDD6FE;
    --med:#8B5CF6; --med-ink:#FFFFFF;
    --high:#6D28D9; --high-ink:#FFFFFF;
    --agent:#997AFF; --agent-soft:#2A2540; --agent-ink:#C9B8FF;
    --ok:#5BBB84; --ok-soft:#1E2F25;
    --tip-bg:#EDEEF2; --tip-ink:#1D2026; --tip-accent:#5E45B8;
  }
}
:root[data-theme="dark"]{
  --bg:#16181D; --surface:#1D2026; --ink:#E8EAEE; --muted:#9AA1AC; --line:#31353D;
  --office:#3A4E6B; --office-ink:#F2F5FA; --pillar:#252B36; --pillar-ink:#B9C6D8;
  --none-bg:#1D2026; --none-ink:#8B929C; --none-line:#3A3F48;
  --low:#3B3058; --low-ink:#DDD6FE;
  --med:#8B5CF6; --med-ink:#FFFFFF;
  --high:#6D28D9; --high-ink:#FFFFFF;
  --agent:#997AFF; --agent-soft:#2A2540; --agent-ink:#C9B8FF;
  --ok:#5BBB84; --ok-soft:#1E2F25;
  --tip-bg:#EDEEF2; --tip-ink:#1D2026; --tip-accent:#5E45B8;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:15px/1.45 "Source Sans 3", "Segoe UI", Arial, sans-serif; padding:0 0 48px;}
header{padding:22px 36px 14px; max-width:1560px; margin:0 auto; border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:12px; margin:0 0 12px;}
.logo{height:30px; width:auto; flex:none;}
.brand .divider{width:1px; height:26px; background:var(--line); flex:none;}
h1{font-family:"Archivo", Arial, sans-serif; font-weight:700; font-size:22px; margin:0; text-wrap:balance; line-height:1.25; color:var(--ink);}
.sub{color:var(--muted); max-width:86ch; margin:0 0 6px;}
.sub:last-of-type{margin-bottom:0}
.sub em{font-style:italic}
.sub b{color:var(--agent-ink); font-weight:600;}
.controls{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:18px 36px 14px; max-width:1560px; margin:0 auto; position:sticky; top:0; background:var(--bg); z-index:5; border-bottom:1px solid var(--line);}
.controls .hint{color:var(--muted); font-size:13px; margin-left:auto;}
button.lg{font:600 13.5px "Archivo", Arial, sans-serif; letter-spacing:.02em; border-radius:999px; padding:7px 14px 7px 10px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:8px;}
button.lg .sw{width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid rgba(0,0,0,.15);}
button.lg .n{color:var(--muted); font-weight:400;}
button.lg[aria-pressed="true"]{border-color:var(--ink);}
button.lg[data-f="ag"]{color:var(--agent-ink); border-color:var(--agent);}
button.lg[data-f="ag"][aria-pressed="true"]{background:var(--agent-soft);}
button.lg:focus-visible{outline:2px solid var(--office); outline-offset:2px;}
.sw.s0{background:var(--none-bg); border:1.5px dashed var(--none-line);}
.sw.s1{background:var(--low);} .sw.s2{background:var(--med);} .sw.s3{background:var(--high);}
.sw.sa{background:var(--agent); border-radius:50%;}
.wrap{overflow-x:auto; padding:22px 36px 0;}
.canvas{min-width:1480px; max-width:1560px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1.15fr 1.15fr 1fr; gap:14px;}
.officeRow{grid-column:1/-1; display:grid; grid-template-columns:subgrid;}
.office{font-family:"Archivo", Arial, sans-serif; font-weight:700; font-size:16px; letter-spacing:.03em; text-transform:uppercase; background:var(--office); color:var(--office-ink); border-radius:8px; padding:9px 16px; text-align:center;}
.office.fo{grid-column:1/3;} .office.mo{grid-column:3/4;} .office.bo{grid-column:4/6;}
.pillar{font-family:"Archivo", Arial, sans-serif; font-weight:600; font-size:13.5px; color:var(--pillar-ink); background:var(--pillar); border-radius:7px; padding:7px 12px; text-align:center; text-wrap:balance;}
.col{display:flex; flex-direction:column; gap:12px;}
.group{border:1px solid var(--line); border-radius:10px; padding:12px 12px 13px; background:var(--bg);}
.group h3{font-family:"Archivo", Arial, sans-serif; font-size:14px; font-weight:600; margin:0 0 9px; letter-spacing:.01em;}
.subhead{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:10px 0 6px;}
.subhead:first-of-type{margin-top:0}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{font-size:12.5px; line-height:1.2; padding:5px 9px; border-radius:6px; border:1px solid transparent; transition:opacity .15s ease; position:relative;}
.chip.s0{background:var(--none-bg); color:var(--none-ink); border-color:var(--none-line);}
.chip.s1{background:var(--low); color:var(--low-ink); font-weight:600;}
.chip.s2{background:var(--med); color:var(--med-ink); font-weight:600;}
.chip.s3{background:var(--high); color:var(--high-ink); font-weight:600;}
.chip.ag{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--agent); cursor:pointer; margin:2px;}
.chip.ag::after{content:"✦"; font-size:9px; position:absolute; top:-7px; right:-6px; background:var(--agent); color:#fff; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.chip.ag:focus-visible{outline:2px solid var(--agent); outline-offset:4px;}
.canvas[data-filter="1"] .chip:not(.s1), .canvas[data-filter="2"] .chip:not(.s2),
.canvas[data-filter="3"] .chip:not(.s3), .canvas[data-filter="23"] .chip.s0,
.canvas[data-filter="23"] .chip.s1, .canvas[data-filter="ag"] .chip:not(.ag){opacity:var(--dim);}
#tip{position:absolute; z-index:50; max-width:340px; background:var(--tip-bg); color:var(--tip-ink); border-radius:9px; padding:11px 13px; font-size:13px; line-height:1.45; box-shadow:0 6px 22px rgba(0,0,0,.28); pointer-events:none;}
#tip[hidden]{display:none!important}
#tip .tt{font-family:"Archivo", Arial, sans-serif; font-weight:700; font-size:13px; display:flex; align-items:center; gap:6px; margin-bottom:4px;}
#tip .tt::before{content:"✦"; color:var(--agent);}
#tip .cta{margin-top:6px; font-size:12px; color:var(--tip-accent); font-weight:600;}
footer{max-width:1560px; margin:26px auto 0; padding:0 36px; color:var(--muted); font-size:13px;}
/* ---------- modal ---------- */
.ovl{position:fixed; inset:0; background:rgba(15,17,22,.55); z-index:90; display:flex; align-items:center; justify-content:center; padding:22px;}
.ovl[hidden]{display:none!important}
.dlg{background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:14px; width:min(620px,100%); max-height:88vh; overflow-y:auto; box-shadow:0 18px 60px rgba(0,0,0,.35); padding:22px 24px 20px;}
.dlg-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:2px;}
.dlg-head h2{font-family:"Archivo", Arial, sans-serif; font-size:19px; font-weight:700; margin:0; flex:1; text-wrap:balance;}
.dlg-head h2::before{content:"✦ "; color:var(--agent);}
.xbtn{border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:8px; width:30px; height:30px; font-size:15px; cursor:pointer; flex:none;}
.xbtn:focus-visible{outline:2px solid var(--agent); outline-offset:2px;}
.dlg .where{font-size:12.5px; color:var(--muted); margin:2px 0 10px;}
.dlg .desc{font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.5;}
.flowlab{font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--agent-ink); margin:0 0 10px;}
.flow{display:flex; flex-direction:column; margin:0 0 4px;}
.fstep{display:grid; grid-template-columns:30px 1fr; gap:0 12px; position:relative; padding-bottom:16px; opacity:0; transform:translateY(8px);}
.play .fstep{animation:stepIn .45s ease forwards; animation-delay:calc(var(--i)*.55s);}
.fstep .dot{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:700 12px "Archivo", Arial, sans-serif; background:var(--agent-soft); color:var(--agent-ink); border:1.5px solid var(--agent); z-index:1;}
.fstep.kT .dot{background:var(--agent); color:#fff;}
.fstep:not(:last-child)::before{content:""; position:absolute; left:14px; top:30px; bottom:0; width:2px; background:var(--line); transform:scaleY(0); transform-origin:top;}
.play .fstep:not(:last-child)::before{animation:lineIn .5s ease forwards; animation-delay:calc(var(--i)*.55s + .25s);}
.fstep .kind{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--agent-ink); margin-top:1px;}
.fstep .st{font-weight:600; font-size:14.5px; margin:1px 0 2px;}
.fstep .sd{font-size:13.5px; color:var(--muted); line-height:1.45;}
.outs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px; opacity:0;}
.play .outs{animation:stepIn .5s ease forwards; animation-delay:var(--od);}
.out{border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.45;}
.out b{display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px;}
.out.auto{background:var(--ok-soft); color:var(--ink); border:1px solid var(--ok);}
.out.auto b{color:var(--ok);}
.out.hum{background:var(--surface); border:1px solid var(--line);}
.out.hum b{color:var(--muted);}
.dlg-foot{display:flex; align-items:center; gap:10px; margin-top:16px;}
.replay{border:1.5px solid var(--agent); background:var(--agent-soft); color:var(--agent-ink); font:600 13px "Archivo", Arial, sans-serif; border-radius:999px; padding:7px 14px; cursor:pointer;}
.replay:focus-visible{outline:2px solid var(--agent); outline-offset:2px;}
.dlg-foot .esc{font-size:12px; color:var(--muted); margin-left:auto;}
@keyframes stepIn{to{opacity:1; transform:none}}
@keyframes lineIn{to{transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){
  .chip{transition:none}
  .play .fstep, .play .outs{animation:none; opacity:1; transform:none;}
  .play .fstep:not(:last-child)::before{animation:none; transform:scaleY(1);}
}
@media (max-width:560px){ .outs{grid-template-columns:1fr} }