/* =====================================================================
   Enterprise Cloud Migration Playground — shared theme (Authz Playbook aesthetic)
   Single source of truth for all pages. No <style> blocks in HTML.
   ===================================================================== */
:root{
  /* palette */
  --bg1:#0f172a; --bg2:#1e293b; --bg3:#3b0764;
  --amber:#fbbf24; --pink:#f472b6; --sky:#60a5fa; --indigo:#6366f1; --violet:#8b5cf6;
  --emerald:#34d399; --green:#22c55e; --red:#ef4444; --rose:#f43f5e; --darkred:#7f1d1d;
  --blue:#3b82f6; --white:#f8fafc; --muted:#cbd5e1; --dim:#94a3b8;
  /* gradients */
  --grad-bg:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
  --grad-head:linear-gradient(90deg,var(--amber),var(--pink),var(--sky));
  --grad-btn:linear-gradient(135deg,var(--indigo),var(--violet));
  --grad-danger:linear-gradient(135deg,var(--red),var(--rose));
  --grad-node:linear-gradient(135deg,var(--indigo),var(--violet));
  --grad-srv:linear-gradient(135deg,#059669,var(--emerald));
  --grad-cli:linear-gradient(135deg,var(--red),var(--pink));
  --grad-den:linear-gradient(135deg,#450a0a,var(--darkred));
  --grad-timeline:linear-gradient(180deg,var(--indigo),var(--violet));
  /* glass */
  --glass:rgba(255,255,255,.07); --glass-strong:rgba(255,255,255,.12);
  --blur:blur(10px); --border:1px solid rgba(255,255,255,.14);
  --radius:16px; --radius-sm:10px;
  /* shadows */
  --shadow:0 10px 30px rgba(0,0,0,.35); --glow-amber:0 0 0 3px rgba(251,191,36,.35),0 0 24px rgba(251,191,36,.45);
  --glow-green:0 0 18px rgba(34,197,94,.55); --glow-indigo:0 0 18px rgba(99,102,241,.55);
  /* callouts */
  --info-bg:rgba(96,165,250,.12); --tip-bg:rgba(52,211,153,.12); --warn-bg:rgba(251,191,36,.12);
  /* output */
  --out-bg:#0a0f1a; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);color:var(--white);min-height:100vh;
  background:var(--grad-bg);background-size:300% 300%;animation:bgShift 22s ease infinite;
  line-height:1.55;
}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slideLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,.45)}50%{box-shadow:0 0 0 10px rgba(139,92,246,0)}}
@keyframes flash{0%{background:#1e3a5f}100%{background:var(--out-bg)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-22px) rotate(3deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes truck{0%{left:-8%}40%{left:22%}60%{left:22%}100%{left:78%}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes crumble{to{opacity:.25;transform:translate(var(--dx,0),var(--dy,20px)) rotate(var(--rot,6deg))}}

.wrap{max-width:1180px;margin:0 auto;padding:24px 20px 80px}
a{color:var(--sky)}
h1,h2{background:var(--grad-head);-webkit-background-clip:text;background-clip:text;color:transparent;margin:.2em 0 .4em;line-height:1.15}
h1{font-size:clamp(1.9rem,4vw,3rem);animation:fadeDown .8s ease both}
h2{font-size:clamp(1.35rem,2.5vw,1.9rem);animation:fadeUp .7s ease both}
h3{color:var(--amber);margin:.2em 0 .4em}
.subtitle{color:var(--muted);font-size:1.1rem;animation:fadeUp .9s ease both;min-height:1.6em}
.subtitle .cursor{display:inline-block;width:.6ch;animation:blink 1s step-end infinite}

/* ---------- nav ---------- */
.nav{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;margin-bottom:22px;background:var(--glass);backdrop-filter:var(--blur);border:var(--border);border-radius:var(--radius);animation:fadeDown .6s ease both;position:sticky;top:8px;z-index:50}
.nav a{color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:999px;font-size:.9rem;transition:.25s}
.nav a:hover,.nav a[aria-current="page"]{background:var(--grad-btn);color:#fff;box-shadow:var(--glow-indigo)}

/* ---------- panels / cards ---------- */
.panel,.card{background:var(--glass);backdrop-filter:var(--blur);border:var(--border);border-radius:var(--radius);padding:20px 22px;margin:18px 0;box-shadow:var(--shadow);animation:slideLeft .7s ease both}
.card{margin:0}
.card h3{color:var(--amber)}
.card p{color:var(--white);margin:.3em 0}
.panel:nth-of-type(1),.card:nth-of-type(1){animation-delay:.05s}.panel:nth-of-type(2),.card:nth-of-type(2){animation-delay:.1s}
.panel:nth-of-type(3),.card:nth-of-type(3){animation-delay:.15s}.panel:nth-of-type(4),.card:nth-of-type(4){animation-delay:.2s}
.panel:nth-of-type(5),.card:nth-of-type(5){animation-delay:.25s}.panel:nth-of-type(6),.card:nth-of-type(6){animation-delay:.3s}
.panel:nth-of-type(7),.card:nth-of-type(7){animation-delay:.35s}.panel:nth-of-type(8),.card:nth-of-type(8){animation-delay:.4s}
.panel:nth-of-type(9),.card:nth-of-type(9){animation-delay:.45s}.panel:nth-of-type(10),.card:nth-of-type(10){animation-delay:.5s}
.panel:nth-of-type(11),.card:nth-of-type(11){animation-delay:.55s}.panel:nth-of-type(12),.card:nth-of-type(12){animation-delay:.6s}
.panel:nth-of-type(13),.card:nth-of-type(13){animation-delay:.65s}.panel:nth-of-type(14),.card:nth-of-type(14){animation-delay:.7s}
.panel:nth-of-type(n+15),.card:nth-of-type(n+15){animation-delay:.75s}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card a.btn{margin-top:10px}
.card.link{cursor:pointer;transition:.25s}.card.link:hover{transform:translateY(-4px);border-color:var(--amber)}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-block;background:var(--grad-btn);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-weight:600;cursor:pointer;text-decoration:none;transition:.25s;font-size:.95rem;margin:4px 4px 4px 0}
.btn:hover{box-shadow:var(--glow-amber);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.warn,.btn.danger{background:var(--grad-danger)}
.btn.ghost{background:transparent;border:1px solid var(--violet)}
.btn.sm{padding:6px 12px;font-size:.85rem}
.btn.big{padding:14px 28px;font-size:1.1rem}
.controls{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
label.field{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}
label.field span.val{color:var(--amber);font-weight:700}
input[type=number],input[type=text],select,textarea{background:rgba(0,0,0,.35);color:var(--white);border:var(--border);border-radius:8px;padding:8px 10px;font-size:.95rem;font-family:var(--font)}
input[type=range]{accent-color:var(--violet);width:100%}
input:invalid{border-color:var(--red)}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;cursor:pointer}
.check input{accent-color:var(--emerald);width:18px;height:18px}

/* ---------- callouts ---------- */
.callout{border-left:4px solid;border-radius:var(--radius-sm);padding:14px 16px;margin:16px 0;animation:fadeUp .6s ease both}
.callout.info{border-color:var(--sky);background:var(--info-bg)}
.callout.tip{border-color:var(--emerald);background:var(--tip-bg)}
.callout.warn{border-color:var(--amber);background:var(--warn-bg)}
.callout strong:first-child,.callout h4{display:block;margin:0 0 6px;font-size:1rem}
.callout.info h4{color:var(--sky)}.callout.tip h4{color:var(--emerald)}.callout.warn h4{color:var(--amber)}
.callout ul{margin:6px 0 0 18px;padding:0}

/* ---------- flow ---------- */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;position:relative;padding:18px 8px;min-height:90px}
.node{position:relative;background:var(--grad-node);color:#fff;border-radius:14px;padding:12px 16px;min-width:120px;text-align:center;font-weight:600;font-size:.9rem;animation:pulse 2.4s ease infinite;transition:.3s;cursor:pointer;border:2px solid transparent}
.node small{display:block;font-weight:400;opacity:.8;font-size:.75rem}
.node.srv{background:var(--grad-srv)}.node.cli{background:var(--grad-cli)}.node.den{background:var(--grad-den)}
.node.active{box-shadow:var(--glow-amber);border-color:var(--amber);transform:scale(1.06)}
.node.done{box-shadow:var(--glow-green);animation:none}
.node.done::after{content:"✓";position:absolute;top:-10px;right:-10px;background:var(--green);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:.8rem}
.node.failed{background:var(--grad-den)}
.node.failed::after{content:"✕";position:absolute;top:-10px;right:-10px;background:var(--red);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:.8rem}
.arrow{color:var(--amber);font-size:1.4rem;opacity:.8}
.packet{position:absolute;top:50%;left:0;font-size:1.5rem;transform:translate(-50%,-50%);transition:left .7s ease-in-out;pointer-events:none;filter:drop-shadow(0 0 6px var(--amber));z-index:5}
.node-detail{margin-top:8px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(0,0,0,.3);border:var(--border);font-size:.9rem;color:var(--muted);min-height:2.4em}
.node-detail b{color:var(--amber)}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 6px;border-left:2px solid var(--emerald);border-radius:4px}
.timeline li{position:relative;padding:6px 0 10px 24px;color:var(--white);animation:slideLeft .5s ease both;opacity:0}
.timeline li::before{content:"";position:absolute;left:-9px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--grad-timeline);box-shadow:var(--glow-indigo)}
.timeline li b{color:var(--amber);margin-right:6px}
.timeline li.fail::before{background:var(--grad-danger)}
.timeline li.gate::before{background:var(--amber);box-shadow:var(--glow-amber)}
.timeline li.skip{opacity:.5}
.timeline-card{border:1px solid var(--emerald);border-radius:var(--radius);padding:16px 18px;background:rgba(52,211,153,.05)}

/* ---------- output ---------- */
.output,pre.output{background:var(--out-bg);border-left:4px solid var(--sky);border-radius:var(--radius-sm);padding:14px;font-family:var(--mono);font-size:12px;color:#c7d2fe;overflow:auto;white-space:pre-wrap;word-break:break-word;min-height:60px;margin:10px 0}
.output.flash{animation:flash .9s ease}
.output .ok{color:var(--emerald)}.output .bad{color:#fca5a5}.output .warnc{color:var(--amber)}
.output.empty{color:var(--dim);font-style:italic}

/* ---------- details / extras ---------- */
details{border:1px solid var(--amber);border-radius:var(--radius-sm);padding:10px 14px;margin:14px 0;background:rgba(251,191,36,.05)}
details summary{cursor:pointer;color:var(--amber);font-weight:600}
details pre{color:#86efac;font-family:var(--mono);font-size:12px;overflow:auto;background:var(--out-bg);padding:12px;border-radius:8px;margin-top:10px}
.gradborder{position:relative;border-radius:var(--radius);padding:2px;background:linear-gradient(135deg,var(--amber),var(--pink),var(--sky),var(--violet));animation:hue 8s linear infinite}
.gradborder>*{background:var(--bg1);border-radius:14px;padding:18px;margin:0;animation:none}
.marquee{overflow:hidden;white-space:nowrap;border-top:var(--border);border-bottom:var(--border);padding:10px 0;margin:18px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee span{display:inline-block;animation:marquee 32s linear infinite;color:var(--muted);font-weight:600;letter-spacing:.5px}
.marquee span i{font-style:normal;margin:0 22px;color:var(--amber)}
.hero{position:relative;overflow:hidden;padding:56px 28px;border-radius:var(--radius);background:var(--glass);backdrop-filter:var(--blur);border:var(--border);text-align:center;margin-bottom:24px;min-height:260px}
.hero .float-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero .float-bg span{position:absolute;font-size:2.4rem;opacity:.16;animation:float 7s ease-in-out infinite}
.hero>*:not(.float-bg){position:relative;z-index:1}
.badge{display:inline-block;background:var(--grad-btn);color:#fff;border-radius:6px;padding:2px 8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.badge.green{background:var(--grad-srv)}.badge.red{background:var(--grad-danger)}.badge.amber{background:linear-gradient(135deg,#d97706,var(--amber));color:#1a1a1a}
.pill{display:inline-block;border:1px solid var(--violet);border-radius:999px;padding:3px 12px;font-size:.8rem;color:var(--muted);margin:2px}
.kbd{font-family:var(--mono);background:#1e293b;border:1px solid #475569;border-bottom-width:3px;border-radius:6px;padding:1px 7px;font-size:.85em}
.chip{display:inline-block;background:var(--glass-strong);border:var(--border);border-radius:999px;padding:7px 14px;margin:4px;cursor:pointer;font-size:.9rem;transition:.25s;user-select:none}
.chip:hover,.chip.active{background:var(--grad-btn);border-color:var(--amber);box-shadow:var(--glow-indigo)}
.toc-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.toc-grid a{display:block;background:var(--glass);border:var(--border);border-radius:var(--radius-sm);padding:12px;text-decoration:none;color:var(--white);transition:.25s}
.toc-grid a:hover{border-color:var(--amber);transform:translateY(-2px)}
.deep{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.deep>div{background:rgba(0,0,0,.25);border:var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.deep h4{margin:0 0 6px;color:var(--amber)}
.deep>div:nth-child(2) h4{color:var(--emerald)}.deep>div:nth-child(3) h4{color:var(--sky)}.deep>div:nth-child(4) h4{color:var(--rose)}
.deep ul{margin:0;padding-left:18px;color:var(--muted);font-size:.92rem}

/* ---------- tables ---------- */
table.cmp{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
table.cmp th{background:rgba(99,102,241,.25);color:var(--amber);text-align:left;padding:10px}
table.cmp td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--white)}
table.cmp tr:hover td{background:rgba(255,255,255,.04)}

/* ---------- stats ---------- */
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat{background:rgba(0,0,0,.3);border:var(--border);border-radius:var(--radius-sm);padding:12px;text-align:center}
.stat b{display:block;font-size:1.6rem;color:var(--amber)}
.stat span{font-size:.8rem;color:var(--muted)}
.bar{height:12px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0}
.bar>i{display:block;width:0;height:100%;background:var(--grad-srv);transition:width .8s ease}
.bar.red>i{background:var(--grad-danger)}.bar.amber>i{background:linear-gradient(90deg,#d97706,var(--amber))}

/* ---------- 6Rs kanban ---------- */
.kanban{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.lane{background:rgba(0,0,0,.28);border:var(--border);border-radius:var(--radius-sm);padding:10px;min-height:220px;display:flex;flex-direction:column}
.lane h4{margin:0 0 8px;color:var(--amber);font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.lane h4 .badge{font-size:.65rem}
.lane .lane-body{flex:1;min-height:120px;display:flex;flex-direction:column;gap:6px}
.lane.over{border-color:var(--amber);background:rgba(251,191,36,.08)}
.appcard{background:var(--grad-node);border-radius:8px;padding:8px 10px;cursor:grab;font-size:.85rem;user-select:none;transition:.2s}
.appcard:active{cursor:grabbing}
.appcard small{display:block;opacity:.8;font-size:.72rem}
.appcard.hot{background:var(--grad-cli)}.appcard.zombie{background:var(--grad-den)}
.sortable-ghost{opacity:.4}
.lane.pool{grid-column:1/-1;min-height:120px}
.lane.pool .lane-body{flex-direction:row;flex-wrap:wrap}

/* ---------- data transfer scene ---------- */
.scene{position:relative;height:190px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(15,23,42,.4),rgba(59,7,100,.3));border:var(--border);overflow:hidden;margin:14px 0}
.scene .site{position:absolute;bottom:20px;width:130px;text-align:center;font-size:.8rem;color:var(--muted)}
.scene .site .ico{font-size:2.6rem;display:block}
.scene .dc{left:4%}.scene .cloud{right:4%}
.scene .road{position:absolute;left:0;right:0;bottom:14px;height:4px;background:repeating-linear-gradient(90deg,#64748b 0 20px,transparent 20px 40px)}
.scene .wire{position:absolute;left:16%;right:16%;top:46%;height:4px;background:repeating-linear-gradient(90deg,var(--sky) 0 12px,transparent 12px 24px);opacity:0}
.scene.wire-on .wire{opacity:1;animation:dash 1s linear infinite}
.scene .truck{position:absolute;bottom:22px;left:-8%;font-size:2.6rem;transition:left 2s ease-in-out}
.scene .truck.go{animation:truck 8s ease-in-out forwards}
.scene .progress{position:absolute;top:10px;left:12px;right:12px;font-size:.8rem;color:var(--amber)}

/* ---------- architecture whiteboard ---------- */
.split{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.split .board{background:rgba(0,0,0,.28);border:var(--border);border-radius:var(--radius-sm);padding:12px;min-height:280px}
.board h4{margin:0 0 10px;color:var(--amber)}
.comp{background:var(--grad-cli);border-radius:8px;padding:10px;margin:6px 0;cursor:grab;font-size:.9rem;user-select:none}
.comp small{display:block;opacity:.85;font-size:.75rem}
.target{border:2px dashed rgba(255,255,255,.25);border-radius:8px;padding:10px;margin:6px 0;min-height:52px;font-size:.9rem;color:var(--muted);transition:.25s;position:relative}
.target.over{border-color:var(--amber);background:rgba(251,191,36,.1)}
.target.ok{border-style:solid;border-color:var(--emerald);background:rgba(52,211,153,.12);color:#fff}
.target.bad{border-color:var(--red);animation:shake .4s ease}
.target .model{position:absolute;top:6px;right:8px}
.layers{display:grid;gap:4px;margin-top:8px}
.layer{padding:6px 10px;border-radius:6px;font-size:.78rem;background:rgba(255,255,255,.07)}
.layer.you{background:rgba(99,102,241,.35)}.layer.them{background:rgba(52,211,153,.3)}

/* ---------- team / roles ---------- */
.rolecard{background:rgba(0,0,0,.28);border:var(--border);border-radius:var(--radius-sm);padding:14px;position:relative}
.rolecard h4{margin:0;color:var(--amber);font-size:.95rem}
.rolecard .count{font-size:2rem;font-weight:800;color:#fff}
.rolecard .count-ctl{display:flex;gap:8px;align-items:center;margin:8px 0}
.rolecard p{font-size:.85rem;color:var(--muted);margin:4px 0}
.rolecard.low{border-color:var(--red)}.rolecard.good{border-color:var(--emerald)}

/* ---------- steerco ---------- */
.avatars{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.avatar{background:rgba(0,0,0,.28);border:var(--border);border-radius:var(--radius);padding:16px;text-align:center;transition:.4s}
.avatar .face{font-size:3rem;display:block;margin-bottom:6px}
.avatar h4{margin:4px 0;color:var(--amber)}
.avatar .speech{background:rgba(255,255,255,.08);border-radius:10px;padding:10px;font-size:.85rem;min-height:80px;text-align:left;color:var(--muted)}
.avatar.approve{border-color:var(--emerald);box-shadow:var(--glow-green)}
.avatar.block{border-color:var(--red);box-shadow:0 0 18px rgba(239,68,68,.5)}
.avatar.hold{border-color:var(--amber);box-shadow:var(--glow-amber)}

/* ---------- t-minus scrubber ---------- */
.scrub{position:relative;padding:28px 10px 10px}
.scrub input[type=range]{width:100%}
.scrub .ticks{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px}
.scrub .ticks span{cursor:pointer;text-align:center;flex:1}
.scrub .ticks span.on{color:var(--amber);font-weight:700}
.teamwork{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.teamwork div{background:rgba(0,0,0,.28);border:var(--border);border-radius:var(--radius-sm);padding:12px}
.teamwork b{color:var(--sky);display:block;margin-bottom:4px}

/* ---------- globex scrollytelling ---------- */
.story{display:grid;gap:40px}
.story section{display:grid;gap:18px;grid-template-columns:1fr 1fr;align-items:center;opacity:0;transform:translateY(30px);transition:.8s}
.story section.show{opacity:1;transform:none}
.story section:nth-child(even) .viz{order:-1}
.viz{background:rgba(0,0,0,.3);border:var(--border);border-radius:var(--radius);padding:14px;min-height:220px;display:grid;place-items:center}
.viz svg{width:100%;height:auto;max-height:260px}
.mono-block{transition:1.2s}
.story .show .mono-block.b1{animation:crumble 1.6s ease forwards;--dx:-20px;--dy:30px;--rot:-8deg}
.story .show .mono-block.b2{animation:crumble 1.6s .2s ease forwards;--dx:20px;--dy:24px;--rot:6deg}
.story .show .mono-block.b3{animation:crumble 1.6s .4s ease forwards;--dx:-10px;--dy:36px;--rot:4deg}
.svg-flow{stroke-dasharray:8 6;animation:dash 1.2s linear infinite}
svg text{fill:#e2e8f0;font-family:var(--font);font-size:11px}
svg .lbl{fill:var(--amber);font-weight:700}

/* ---------- misc ---------- */
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.center{text-align:center}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--dim);margin-right:6px}
.status-dot.ok{background:var(--green);box-shadow:var(--glow-green)}.status-dot.bad{background:var(--red)}.status-dot.busy{background:var(--amber);animation:blink 1s infinite}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--bg1);border:1px solid var(--violet);border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:var(--shadow);z-index:100;animation:fadeUp .4s ease;max-width:360px;font-size:.9rem}
.toast.err{border-left-color:var(--red)}.toast.ok{border-left-color:var(--emerald)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer{margin-top:40px;text-align:center;color:var(--dim);font-size:.85rem}
.canvas-box{position:relative;height:300px}
.cmdb{max-height:240px;overflow:auto;font-family:var(--mono);font-size:11px;background:var(--out-bg);border-radius:8px;padding:8px}
.cmdb div{display:grid;grid-template-columns:90px 1fr 70px 60px 60px;gap:6px;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.cmdb div.z{color:#fca5a5}

@media (max-width:760px){
  .split,.story section{grid-template-columns:1fr}
  .story section:nth-child(even) .viz{order:0}
  .nav{position:static}
  .hero{padding:36px 16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
svg .hot{cursor:pointer}svg .hot:hover rect{filter:brightness(1.3)}