/* LLM pipeline explainer pages (/llm-inference, /llm-training, + /explained)
   Theme-aware: dark by default, flips with html.psa-light (base.html tokens). */

.dg{
  --dg-ink:#e8e8f0; --dg-line:#3a3f4e; --dg-card:var(--psa-bg-card);
  --dg-text:#c9cdd9; --dg-mut:#8888a0;
  --dg-blue:#7c9cf0; --dg-blue-soft:#182238;
  --dg-red:#f07070; --dg-red-soft:#2d1414;
  --dg-green:#4ade80; --dg-green-soft:#12291c;
  --dg-orange:#f0a35e; --dg-orange-soft:#2b2113;
  --dg-purple:#a98af0; --dg-purple-soft:#221a38;
  --dg-num-bg:#e8e8f0; --dg-num-fg:#14161c;
  --dg-shadow:none; --dg-pill:#2a2a3a;
  max-width:1080px; margin:0 auto; padding:8px 16px 40px;
  color:var(--dg-text); font-size:14px;
}
html.psa-light .dg{
  --dg-ink:#14161c; --dg-line:#14161c; --dg-card:#fff;
  --dg-text:#2a2f38; --dg-mut:#5b6472;
  --dg-blue:#2457d6; --dg-blue-soft:#eaf0ff;
  --dg-red:#d62828; --dg-red-soft:#fff1f0;
  --dg-green:#178a4c; --dg-green-soft:#ecfaf1;
  --dg-orange:#e07100; --dg-orange-soft:#fff5e8;
  --dg-purple:#6d3fd4; --dg-purple-soft:#f4efff;
  --dg-num-bg:#14161c; --dg-num-fg:#fff;
  --dg-shadow:3px 4px 0 rgba(20,22,28,.12); --dg-pill:#f6efdc;
}
.dg .mono{font-family:ui-monospace,"DejaVu Sans Mono",Consolas,monospace;}
.dg-head{border-bottom:4px solid var(--dg-line); padding:18px 0 12px; margin-bottom:22px;}
.dg-head h1{font-size:32px; letter-spacing:-.5px; line-height:1.12; color:var(--psa-text-primary);}
.dg-head .sub{margin-top:6px; font-size:15px; color:var(--dg-mut);}
.dg-head .sub b{color:var(--dg-red);}
.dg-switch{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.dg-switch a{border:2px solid var(--dg-line); border-radius:9px; padding:4px 14px; font-size:13px;
  font-weight:700; color:var(--dg-mut); text-decoration:none;}
.dg-switch a.on{background:var(--dg-num-bg); color:var(--dg-num-fg); border-color:var(--dg-num-bg);}
.dg-switch a:hover{color:var(--psa-text-primary);}
.dg-switch .sep{flex:1;}
.dg-layout{display:grid; grid-template-columns:52px minmax(0,640px) 1fr; column-gap:16px;}
.dg-step{display:grid; grid-template-columns:52px minmax(0,640px); grid-column:1/3; column-gap:16px; margin-bottom:16px;}
.dg-num{width:40px;height:40px;border-radius:50%;background:var(--dg-num-bg);color:var(--dg-num-fg);
  font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;justify-self:center;position:relative;z-index:1;}
.dg-numcol{position:relative;}
.dg-numcol::after{content:"";position:absolute;top:40px;bottom:-16px;left:50%;width:3px;background:var(--dg-line);}
.dg-step:last-of-type .dg-numcol::after{display:none;}
.dg-card{background:var(--dg-card);border:2.5px solid var(--dg-line);border-radius:12px;padding:11px 14px;box-shadow:var(--dg-shadow);}
.dg-card h2{font-size:16.5px;margin-bottom:8px;color:var(--psa-text-primary);}
.dg-card h2 .tag{font-size:12px;font-weight:700;color:var(--dg-mut);}
.dg-card p{font-size:13.5px;line-height:1.45;color:var(--dg-text);}
.dg-card p+p{margin-top:5px;}
.dg-cap{font-size:11.5px;color:var(--dg-mut);margin-top:4px;line-height:1.4;}
.dg-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dg-arr{font-size:19px;color:var(--psa-text-primary);font-weight:700;}
.dg-lbl{font-size:11.5px;font-weight:700;text-align:center;color:var(--psa-text-primary);}
.dg-lbl .m{font-weight:400;color:var(--dg-mut);}
.dg-bubble{display:inline-block;border:2.5px solid var(--dg-line);border-radius:20px;padding:7px 15px;font-size:15px;font-weight:700;color:var(--psa-text-primary);}
.dg-chip{border:2px solid var(--dg-blue);color:var(--dg-blue);border-radius:7px;padding:2px 9px;font-size:12.5px;font-weight:700;background:var(--dg-blue-soft);}
.dg-chip.t{border-color:var(--dg-orange);color:var(--dg-orange);background:var(--dg-orange-soft);}
.dg-ids{font-size:12px;color:var(--dg-mut);}
.dg-mat{display:grid;gap:2px;}
.dg-mat i{width:11px;height:11px;border-radius:2px;}
.dg-mat.q i{background:var(--dg-red-soft);border:1.4px solid var(--dg-red);}
.dg-mat.k i{background:var(--dg-blue-soft);border:1.4px solid var(--dg-blue);}
.dg-mat.v i{background:var(--dg-green-soft);border:1.4px solid var(--dg-green);}
.dg-mat.a i{background:var(--dg-purple-soft);border:1.4px solid var(--dg-purple);}
.dg-mat.a i.d{background:var(--dg-purple);border-color:var(--dg-purple);}
.dg-mat.a i.f{background:transparent;border-color:var(--dg-line);opacity:.45;}
.dg-mat.mask i{width:13px;height:13px;background:var(--dg-purple-soft);border:1.4px solid var(--dg-purple);}
.dg-mat.mask i.d{background:var(--dg-purple);}
.dg-mat.mask i.f{background:transparent;border-color:var(--dg-line);opacity:.45;position:relative;}
.dg-mat.mask i.f::after{content:"✕";position:absolute;inset:0;font-size:8px;color:var(--dg-mut);display:flex;align-items:center;justify-content:center;}
.dg-dots{display:grid;grid-template-columns:repeat(14,7px);gap:3px;}
.dg-dots.w12{grid-template-columns:repeat(12,7px);}
.dg-dots b{width:5px;height:5px;border-radius:50%;background:var(--dg-blue);opacity:.85;}
.dg-dots b:nth-child(3n){opacity:.35;}
.dg-dots b:nth-child(4n){opacity:.6;}
.dg-dots.noise b{background:var(--dg-mut);}
.dg-dots.noise b:nth-child(5n){opacity:.25;}
.dg-vec{display:flex;flex-direction:column;gap:2px;align-items:center;}
.dg-vec b{width:9px;height:9px;border-radius:50%;}
.dg-bars{display:flex;align-items:flex-end;gap:2px;height:46px;}
.dg-bars i{width:7px;background:var(--dg-blue);opacity:.55;border-radius:1.5px 1.5px 0 0;}
.dg-bars i.hot{background:var(--dg-green);opacity:1;}
.dg-bars i.top{background:var(--dg-blue);opacity:1;}
.dg-bars i.nuc{background:var(--dg-orange);opacity:1;}
.dg-bars i.tgt{background:var(--dg-orange);opacity:1;}
.dg-bars i.off{background:var(--dg-mut);opacity:.3;}
.dg-axis{font-size:10px;color:var(--dg-mut);display:flex;justify-content:space-between;margin-top:2px;}
.dg-box{border:2px solid var(--dg-blue);color:var(--dg-blue);background:var(--dg-blue-soft);border-radius:9px;padding:6px 10px;font-size:12.5px;font-weight:700;text-align:center;line-height:1.25;}
.dg-box.p{border-color:var(--dg-purple);color:var(--dg-purple);background:var(--dg-purple-soft);}
.dg-box.g{border-color:var(--dg-green);color:var(--dg-green);background:var(--dg-green-soft);}
.dg-box.k{border-color:var(--dg-line);color:var(--psa-text-primary);background:transparent;}
.dg-pillbox{border:1.8px solid var(--dg-line);background:var(--dg-pill);border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700;color:var(--psa-text-primary);}
.dg-formula{background:var(--dg-card);border:1.5px solid var(--dg-blue);color:var(--dg-blue);border-radius:7px;padding:3px 8px;font-size:12.5px;font-weight:700;}
.dg-sub2{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap;}
.dg-half{border:2px dashed var(--dg-purple);background:var(--dg-purple-soft);border-radius:10px;padding:9px 11px;flex:1;min-width:220px;}
.dg-half h3{font-size:13px;color:var(--dg-purple);margin-bottom:6px;}
.dg-half.g{border-color:var(--dg-green);background:var(--dg-green-soft);}
.dg-half.g h3{color:var(--dg-green);}
.dg-half.o{border-color:var(--dg-orange);background:var(--dg-orange-soft);}
.dg-half.o h3{color:var(--dg-orange);}
.dg-kvrow{display:flex;gap:4px;align-items:center;}
.dg-kvrow .t{font-size:10.5px;color:var(--dg-mut);width:14px;font-weight:700;}
.dg-kvrow b{width:20px;height:14px;border:1.6px solid var(--dg-green);background:var(--dg-green-soft);border-radius:3px;}
.dg-kvrow b.new{border-style:dashed;background:transparent;}
.dg-samplers{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.dg-samp{border:2px solid var(--dg-orange);background:var(--dg-orange-soft);border-radius:9px;padding:7px 8px;}
.dg-samp b{display:block;font-size:12.5px;color:var(--dg-orange);margin-bottom:4px;}
.dg-tok{border:1.8px solid var(--dg-purple);color:var(--dg-purple);background:var(--dg-purple-soft);border-radius:6px;padding:1px 7px;font-size:12.5px;font-weight:700;}
.dg-ok{color:var(--dg-green);font-weight:800;font-size:15px;}
.dg-ko{color:var(--dg-red);font-weight:800;font-size:15px;}
.dg-term{background:#101418;color:#7ee787;border-radius:10px;padding:10px 14px;font-size:14.5px;}
.dg-term .cursor{background:#7ee787;color:#101418;}
.dg-stack{display:flex;flex-direction:column-reverse;gap:3px;}
.dg-stack b{width:120px;height:13px;border:1.8px solid var(--dg-blue);background:var(--dg-blue-soft);border-radius:4px;}
.dg-seq{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
.dg-seq .name{font-size:11px;font-weight:700;width:48px;color:var(--dg-mut);}
.dg-doc{width:34px;height:42px;border:2px solid var(--dg-line);border-radius:4px;background:var(--dg-card);position:relative;}
.dg-doc::before{content:"";position:absolute;left:5px;right:5px;height:2.5px;top:8px;background:var(--dg-mut);opacity:.5;
  box-shadow:0 6px 0 var(--dg-mut), 0 12px 0 var(--dg-mut), 0 18px 0 var(--dg-mut);}
.dg-funnel{width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;border-top:30px solid var(--dg-blue-soft);}
.dg-notes{display:flex;flex-direction:column;gap:12px;grid-column:3;grid-row:1/span 20;}
.dg-note{border:2.5px solid var(--dg-red);background:var(--dg-red-soft);border-radius:11px;padding:9px 12px;}
.dg-note h3{font-size:13px;color:var(--dg-red);margin-bottom:3px;}
.dg-note p{font-size:12px;line-height:1.4;color:var(--dg-text);}
.dg-note.big{background:var(--dg-red);border-color:var(--dg-red);}
.dg-note.big h3{color:#fff;font-size:15px;}
.dg-note.big p{color:#ffe9e6;}
.dg-banner{grid-column:1/4;margin-top:4px;border:3px solid var(--dg-red);background:var(--dg-red-soft);border-radius:14px;padding:13px 18px;}
.dg-banner h2{color:var(--dg-red);font-size:19px;margin-bottom:4px;}
.dg-banner p{font-size:13.5px;line-height:1.45;color:var(--dg-text);}
.dg-inner{border:2px dashed var(--dg-purple);background:var(--dg-purple-soft);border-radius:10px;padding:10px 12px;margin-top:9px;}
.dg-inner h3{font-size:13.5px;color:var(--dg-purple);margin-bottom:4px;}
.dg-inner.o{border-color:var(--dg-orange);background:var(--dg-orange-soft);}
.dg-inner.o h3{color:var(--dg-orange);}
.dg-inner.g{border-color:var(--dg-green);background:var(--dg-green-soft);}
.dg-inner.g h3{color:var(--dg-green);}
.dg svg text{font-family:"Trebuchet MS",Verdana,sans-serif;}
.dg svg .ax{stroke:var(--dg-mut);}
@media (max-width:900px){
  .dg-layout{grid-template-columns:44px minmax(0,1fr);}
  .dg-step{grid-template-columns:44px minmax(0,1fr);grid-column:1/3;}
  .dg-notes{grid-column:1/3;grid-row:auto;}
  .dg-banner{grid-column:1/3;}
  .dg-samplers{grid-template-columns:repeat(2,1fr);}
}