/* Diagram page — SVG palette + layout (load after shared.css) */
:root{--tr:0.25s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"]{
  --diagram-surface:#070b16;
  --diagram-ink:#d8e4f5;
  --diagram-muted:#5d729a;
  --diagram-faint:#2a3650;
  --border-hi:rgba(79,124,255,0.28);
  --card:#0c1422;
  --card-b:rgba(255,255,255,0.065);
  --glow:rgba(79,124,255,0.12);
  --lu:#09101f;--le:#08101e;--la:#07101c;--lc:#08111f;
  --lm:#07101c;--ld:#07101b;--lci:#08101d;
  --blue:#4f7cff;--teal:#2dd4bf;--purple:#a78bfa;
  --amber:#fbbf24;--green:#4ade80;--coral:#f87171;--pink:#f472b6;
}
[data-theme="light"]{
  --diagram-surface:#eff4fd;
  --diagram-ink:#0c1830;
  --diagram-muted:#4a5e80;
  --diagram-faint:#9aabc8;
  --border-hi:rgba(79,124,255,0.28);
  --card:#ffffff;
  --card-b:rgba(79,124,255,0.12);
  --glow:rgba(79,124,255,0.06);
  --lu:#edf2ff;--le:#eef3ff;--la:#ecf1ff;--lc:#edf2ff;
  --lm:#eef3ff;--ld:#ecf1ff;--lci:#edf2ff;
  --blue:#3b6af0;--teal:#0d9488;--purple:#7c3aed;
  --amber:#d97706;--green:#16a34a;--coral:#dc2626;--pink:#db2777;
}
html{overflow-x:hidden}
body.diagram-page{background:var(--diagram-surface);color:var(--diagram-ink);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;transition:background var(--tr),color var(--tr)}
.diagram-main{min-width:0}
.hdr{max-width:1340px;margin:0 auto;padding:clamp(22px,3.5vw,36px) clamp(16px,3vw,44px) clamp(12px,2vw,20px);display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px}
.hdr-eyebrow{font-family:'JetBrains Mono','DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hdr-eyebrow::before{content:'';display:inline-block;width:18px;height:1.5px;background:var(--accent);border-radius:1px}
.hdr-title{font-family:'Sora',sans-serif;font-size:clamp(17px,2.2vw,22px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--diagram-ink)}
.hdr-sub{font-size:clamp(12px,1.5vw,13px);color:var(--diagram-muted);margin-top:5px;max-width:52ch;line-height:1.55}
.legend{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.leg{display:flex;align-items:center;gap:7px;font-size:11px;font-family:'JetBrains Mono','DM Mono',monospace;color:var(--diagram-muted)}
.leg-l{width:22px;height:2px;border-radius:1px;flex-shrink:0}
.l-s{background:var(--blue)}
.l-d{background:repeating-linear-gradient(90deg,var(--teal) 0,var(--teal) 5px,transparent 5px,transparent 8px)}
.l-g{background:repeating-linear-gradient(90deg,var(--diagram-faint) 0,var(--diagram-faint) 2px,transparent 2px,transparent 5px)}
@media(max-width:680px){.hdr{flex-direction:column;align-items:flex-start}.legend{width:100%}}
.dg-wrap{max-width:1340px;margin:0 auto;padding:0 clamp(12px,3vw,44px) clamp(36px,5vw,64px)}
.dg-card{border-radius:20px;border:1px solid var(--border);background:var(--card);position:relative;box-shadow:0 12px 48px -16px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.025) inset;overflow:hidden}
[data-theme="light"] .dg-card{box-shadow:0 4px 32px -8px rgba(14,28,72,.1),0 1px 0 #fff inset}
.dg-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 28% at 50% 0%,var(--glow),transparent 70%)}
.dg-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;position:relative;z-index:1}
.dg-scroll::-webkit-scrollbar{height:5px}
.dg-scroll::-webkit-scrollbar-track{background:transparent}
.dg-scroll::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:3px}
.mob{display:none;margin:0 clamp(12px,3vw,44px) 10px;font-size:11px;color:var(--text3);background:var(--accent-soft);border:1px solid var(--border);border-radius:9px;padding:9px 13px;line-height:1.5}
@media(max-width:700px){.mob{display:block}}