/* Diagram language: the look of the app's visual workspaces, for the public pages. Dark first; IBM Plex Mono for
   labels and readouts, Plex Sans for names; hairlines; depth from light and layering, never from boxes or grids.
   Red (the accent tokens) marks only what is live: packets, the selected mark and its edges.
   Every colour is a token from kit.css. Every selector is under .dg so the sheet is safe on any host page. */

.dg{position:relative;margin:0;color:var(--t1);font:400 14px/1.5 var(--sans);--dg-plate:var(--surface);--dg-plate-2:var(--elev);--dg-lift:color-mix(in srgb,var(--t1) 24%,transparent);--dg-light:color-mix(in srgb,var(--t1) 5%,transparent);--dg-glow:color-mix(in srgb,var(--accent) 38%,transparent);--dg-ember:color-mix(in srgb,var(--accent) 14%,var(--bg))}
.dg .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bar: title left, tools right */
.dg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin:0 0 10px;flex-wrap:wrap}
.dg-ttl{font:500 12px/1.3 var(--mono);color:var(--t3);letter-spacing:.02em}
.dg-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.dg-seg{display:inline-flex;border:1px solid var(--hair2);border-radius:5px;padding:0;gap:0;overflow:hidden}
.dg-seg button,.dg-btn{appearance:none;border:0;background:transparent;color:var(--t2);font:500 12px/1 var(--mono);min-height:30px;padding:0 12px;border-radius:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dg-seg button[aria-pressed=true]{background:var(--t1);color:var(--bg)}
.dg-seg button:hover:not([aria-pressed=true]),.dg-btn:hover{color:var(--t1);background:var(--hover)}
.dg-btn{border:1px solid var(--hair2);border-radius:5px}
.dg-btn svg{width:12px;height:12px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.dg-btn[disabled]{opacity:.4;cursor:default}
.dg button:focus-visible,.dg [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* stage: overhead light, no frame */
.dg-stage{position:relative;border-radius:5px;background:transparent}
.dg-stage>svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.dg-stage svg text{font-variant-numeric:tabular-nums slashed-zero}

/* tracks and lines */
.dg .trk{fill:none;stroke:var(--hair2);stroke-width:1;vector-effect:non-scaling-stroke}
.dg .trk-2{fill:none;stroke:var(--hair);stroke-width:1}
.dg .trk-lit{fill:none;stroke:var(--t3);stroke-width:1.2}
.dg .trk-on{fill:none;stroke:var(--accent-graphic);stroke-width:1.6}
.dg .trk-flow{fill:none;stroke:var(--t2);stroke-width:1.2;stroke-dasharray:2 10;stroke-linecap:round;opacity:.55}
.dg .lead{stroke:var(--hair2);stroke-width:1}
.dg .arrow{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* plates: the surfaces nodes and layers sit on; a 1px top highlight gives them light from above */
.dg .pl{fill:var(--dg-plate);stroke:var(--hair2);stroke-width:1}
.dg .pl-hi{display:none}
.dg .halo{fill:var(--dg-glow);opacity:0;transition:opacity var(--dur-base) var(--ease-standard)}

/* nodes (stations on a track) */
.dg .nd{cursor:pointer;outline:none}
.dg .nd .dot{fill:var(--bg);stroke:var(--t2);stroke-width:1.4;transition:stroke var(--dur-fast),fill var(--dur-fast)}
.dg .nd .dot-in{fill:var(--t2);transition:fill var(--dur-fast)}
.dg .nd .hit{fill:transparent;stroke:none}
.dg .nd .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg .nd:focus-visible .fr{opacity:1}
.dg .nd:hover .dot,.dg .nd:focus-visible .dot{stroke:var(--accent-graphic)}
.dg .nd:hover .dot-in{fill:var(--accent-graphic)}
.dg .nd.ping .dot{stroke:var(--t1);fill:var(--dg-plate-2)}
.dg .nd.ping .dot-in{fill:var(--t1)}
.dg .nd[aria-pressed=true] .dot{stroke:var(--accent-graphic);fill:var(--dg-plate)}
.dg .nd[aria-pressed=true] .dot-in{fill:var(--accent-graphic)}

.dg .nd.dim .dot{stroke:var(--hair2)}
.dg .nd.dim .dot-in{fill:var(--hair2)}

/* type */
.dg .tx-n{font:500 13px var(--sans);fill:var(--t1)}
.dg .tx-s{font:400 12px var(--sans);fill:var(--t2)}
.dg .tx-m{font:400 11px var(--mono);fill:var(--t3);letter-spacing:.01em}
.dg .tx-i{font:500 10.5px var(--mono);fill:var(--t3)}
.dg .tx-e{font:400 10.5px var(--mono);fill:var(--t2)}.dg-dagx .tx-e{font-size:11.5px}
.dg .tx-big{font:400 22px var(--mono);fill:var(--t1);letter-spacing:-.03em}
.dg .nd.dim .tx-n{fill:var(--t3)}
.dg .nd[aria-pressed=true] .tx-i{fill:var(--accent-text)}

/* packets: glow, body, white-hot core, trail */
.dg .dg-pk{pointer-events:none;transition:opacity var(--dur-base)}
.dg .dg-pk-glow{display:none}
.dg .dg-pk-b{fill:var(--accent-graphic)}
.dg .dg-pk-c{fill:var(--accent-glint)}
.dg .dg-pk-t1{fill:var(--accent-graphic);opacity:.45}.dg .dg-pk-t2{fill:var(--accent-graphic);opacity:.25}.dg .dg-pk-t3{fill:var(--accent-graphic);opacity:.12}
.dg .dg-pk.ink .dg-pk-b,.dg .dg-pk.ink .dg-pk-t1,.dg .dg-pk.ink .dg-pk-t2,.dg .dg-pk.ink .dg-pk-t3{fill:var(--t2)}.dg .dg-pk.ink .dg-pk-glow{fill:var(--t1);opacity:.1}.dg .dg-pk.ink .dg-pk-c{fill:var(--t1)}

/* evidence pills on highlighted edges */
.dg .pill rect{fill:var(--bg);stroke:var(--hair2)}
.dg .pill.on rect{stroke:var(--accent-graphic)}
.dg .pill text{font:400 10.5px var(--mono);fill:var(--t2)}

/* detail panel under a diagram */
.dg-detail{margin-top:18px}
.dg-detail:empty{display:none}
.dg-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:22px 0 4px;border-top:1px solid var(--hair)}
.dg-card.one{grid-template-columns:minmax(0,1fr)}
.dg-card .k{display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);color:var(--t3);margin:0 0 8px}
.dg-card .k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg-card h3{margin:0 0 8px;font:400 22px/1.2 var(--mono);letter-spacing:-.03em;color:var(--t1)}
.dg-card p{margin:0 0 10px;color:var(--t2);font-size:14.5px;line-height:1.6;max-width:68ch}
.dg-card dl{margin:0;display:grid;gap:0}
.dg-card dl>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--hair)}
.dg-card dt{font:400 12px var(--mono);color:var(--t3);margin:0}
.dg-card dd{margin:0;font-size:13.5px;color:var(--t1);line-height:1.5}
.dg-card dd .ev{color:var(--t3);font:400 12px var(--mono)}
.dg-card .chips{display:flex;flex-wrap:wrap;gap:6px}
.dg-card .chip{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid var(--hair2);border-radius:5px;font:400 11.5px var(--mono);color:var(--t2);background:transparent}
button.chip{cursor:pointer}button.chip:hover{color:var(--t1);border-color:var(--t3)}
.dg-card a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.dg-card sup a{text-decoration:none;color:var(--t3);font:400 11px var(--mono)}
.dg-card sup a:hover{color:var(--t1)}
@media (max-width:760px){.dg-card{grid-template-columns:1fr;gap:16px}.dg-card dl>div{grid-template-columns:1fr;gap:2px}}

/* step controls (sequence, ladder) */
.dg-ctl{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.dg-ctl .read{font:400 12px var(--mono);color:var(--t2);margin-inline-start:6px}

/* tables */
.dg-tw{overflow-x:auto;border-top:1px solid var(--hair)}
.dg-tab{width:100%;border-collapse:collapse;font-size:13.5px}
.dg-tab th,.dg-tab td{text-align:start;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--hair);color:var(--t2);line-height:1.5}
.dg-tab thead th{font:500 11.5px var(--mono);color:var(--t3);white-space:nowrap}
.dg-tab tbody th{font-weight:500;color:var(--t1)}
.dg-tab code,.dg-tab .m{font:400 12px var(--mono);color:var(--t3)}

.dg-cap{margin:14px 0 0;font-size:13px;color:var(--t3);line-height:1.5;max-width:72ch}

/* ---------- flow (pipeline) ---------- */
.dg-flow .lane-l{font:400 11px var(--mono);fill:var(--t3)}
.dg-flow .loopc .tx-big{fill:var(--t1)}

/* ---------- state machine ---------- */
.dg-states .st rect.pl{rx:15}
.dg-states .st{cursor:pointer;outline:none}
.dg-states .st .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-states .st:focus-visible .fr{opacity:1}
.dg-states .st:hover rect.pl,.dg-states .st:focus-visible rect.pl{stroke:var(--accent-graphic)}
.dg-states .st.term rect.pl{stroke-dasharray:3 3}
.dg-states .st.exc .tx-e{fill:var(--t3)}
.dg-states .st.ping rect.pl{stroke:var(--t1);fill:var(--dg-plate-2)}
.dg-states .st[aria-pressed=true] rect.pl{stroke:var(--accent-graphic);fill:var(--dg-plate)}
.dg-states .st[aria-pressed=true] .tx-e{fill:var(--t1)}
.dg-states .st.nb rect.pl{stroke:var(--t2)}
.dg-states .st.dim .pl{opacity:.45}
.dg-states .st.dim .tx-e{fill:var(--t3)}
.dg-states>.dg-legend,.dg-seq>.dg-legend{margin:0 0 14px}
.dg-states .ed{fill:none;stroke:var(--hair2);stroke-width:1}
.dg-states .ed.main{stroke:var(--t3);stroke-width:1.3}
.dg-states .ed.faint{stroke:var(--hair)}
.dg-states .ed.out{stroke:var(--accent-graphic);stroke-width:1.5}
.dg-states .ed.in{stroke:var(--t2);stroke-width:1.3}
.dg-states .ed.dim{opacity:.35}
.dg-states .rl{font:500 10.5px var(--mono);fill:var(--t3)}
.dg-states .mk{fill:none;stroke:context-stroke;stroke-width:1.3}

/* ---------- sequence ---------- */
.dg-seq .hd rect{fill:var(--dg-plate);stroke:var(--hair2)}
.dg-seq .hd.on rect{stroke:var(--t2)}
.dg-seq .life{stroke:var(--hair);stroke-width:1;stroke-dasharray:1 5;stroke-linecap:round}
.dg-seq .hd.on+.life,.dg-seq .life.on{stroke:var(--hair2);stroke-dasharray:none}
.dg-seq .msg{cursor:pointer;outline:none}
.dg-seq .msg line,.dg-seq .msg path{stroke:var(--hair2);stroke-width:1.1;fill:none}
.dg-seq .msg .tx-s{fill:var(--t3)}
.dg-seq .msg .tx-m{fill:var(--t3)}
.dg-seq .msg.done line,.dg-seq .msg.done path{stroke:var(--t3)}
.dg-seq .msg.done .tx-s{fill:var(--t2)}
.dg-seq .msg.on line,.dg-seq .msg.on path{stroke:var(--accent-graphic);stroke-width:1.6}
.dg-seq .msg.on .tx-s{fill:var(--t1)}
.dg-seq .msg.on .tx-m{fill:var(--t2)}
.dg-seq .msg.bad line,.dg-seq .msg.bad path{stroke:var(--accent-graphic);stroke-dasharray:3 3}
.dg-seq .msg.bad .tx-s{fill:var(--t1)}
.dg-seq .msg:hover line,.dg-seq .msg:hover path,.dg-seq .msg:focus-visible line,.dg-seq .msg:focus-visible path{stroke:var(--accent-graphic)}
.dg-seq .msg .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-seq .msg:focus-visible .fr{opacity:1}
.dg-seq .msg .hit{fill:transparent}
.dg-seq .ph{font:500 10.5px var(--mono);fill:var(--t3)}
.dg-seq .phl{stroke:var(--hair);stroke-width:1}
.dg-seq .act{fill:var(--dg-plate-2);stroke:var(--hair2)}
.dg-seq .ln-dot{fill:var(--bg);stroke:var(--hair2)}
.dg-seq .ln-dot.on{fill:var(--t2);stroke:var(--t2)}
.dg-seq .ln-dot.to{fill:var(--t3);stroke:var(--t3)}
.dg-seq .msg.on .ln-dot.to{fill:var(--accent-graphic);stroke:var(--accent-graphic)}
.dg-seq .msg.on .ln-dot.on{fill:var(--t1);stroke:var(--t1)}

/* ---------- topology ---------- */
.dg-topo .orb{fill:none;stroke:var(--hair);stroke-width:1}
.dg-topo .lk{fill:none;stroke:var(--hair2);stroke-width:1;transition:opacity var(--dur-base),stroke var(--dur-base)}
.dg-topo .lk.p-control{stroke-dasharray:5 4}
.dg-topo .lk.p-evidence{stroke-dasharray:1 4;stroke-linecap:round;stroke-width:1.4}
.dg-topo .lk.p-telemetry{stroke-dasharray:8 3 1 3}
.dg-topo .lk.p-events{stroke-dasharray:10 5}
.dg-topo .lk.on{stroke:var(--t1);stroke-width:1.5;opacity:1}
.dg-topo .lk.sel{stroke:var(--accent-graphic);stroke-width:1.6}
.dg-topo .lk.dim{opacity:.18}
.dg-topo .tn{cursor:pointer;outline:none}
.dg-topo .tn .dot{fill:var(--bg);stroke:var(--t2);stroke-width:1.3}
.dg-topo .tn .core{fill:var(--dg-plate-2);stroke:var(--t2)}
.dg-topo .tn.dim{opacity:.4}
.dg-topo .tn[aria-pressed=true] .dot,.dg-topo .tn[aria-pressed=true] .core{stroke:var(--accent-graphic);fill:var(--dg-plate)}
.dg-topo .tn:hover .dot,.dg-topo .tn:hover .core,.dg-topo .tn:focus-visible .dot{stroke:var(--accent-graphic)}
.dg-topo .lk:hover{stroke:var(--accent-graphic)}
.dg-topo .tn .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-topo .tn:focus-visible .fr{opacity:1}
.dg-topo .tier{font:500 10.5px var(--mono);fill:var(--t3)}
.dg-legend{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.dg-legend button{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;border:1px solid var(--hair2);border-radius:5px;background:transparent;color:var(--t2);font:500 12px var(--mono);cursor:pointer}
.dg-legend button svg{width:26px;height:6px;overflow:visible}
.dg-legend button svg line{stroke:currentColor;stroke-width:1.5}
.dg-legend button[aria-pressed=true]{color:var(--t1);border-color:var(--accent-graphic);background:var(--dg-plate)}
.dg-legend button:hover{color:var(--t1);border-color:var(--accent-graphic)}

/* ---------- lineage river ---------- */
.dg-river .rv{fill:var(--dg-plate-2);stroke:none}
.dg-river .rv-edge{fill:none;stroke:var(--hair2);stroke-width:1}
.dg-river .tb{fill:var(--dg-plate);stroke:none;transition:fill var(--dur-base)}
.dg-river .trib{cursor:pointer;outline:none}
.dg-river .trib .tb-edge{fill:none;stroke:var(--hair2);stroke-width:1}
.dg-river .trib:hover .tb{fill:var(--dg-plate-2)}
.dg-river .trib:hover .tb-edge,.dg-river .trib:focus-visible .tb-edge{stroke:var(--accent-graphic)}
.dg-river .trib:hover .src{stroke:var(--accent-graphic)}
.dg-river .trib[aria-pressed=true] .tb{fill:var(--dg-plate)}
.dg-river .trib[aria-pressed=true] .tb-edge{stroke:var(--accent-graphic)}
.dg-river .trib[aria-pressed=true] .tx-i{fill:var(--accent-text)}
.dg-river .trib .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-river .trib:focus-visible .fr{opacity:1}
.dg-river .src{fill:var(--bg);stroke:var(--t3);stroke-width:1.2}
.dg-river .trib[aria-pressed=true] .src{stroke:var(--accent-graphic);fill:var(--accent-graphic)}
.dg-river .mouth{fill:var(--t1)}
.dg-river .cur{fill:none;stroke:var(--t1);stroke-width:1;stroke-dasharray:1 14;stroke-linecap:round;opacity:.35}
.dg-river .ledger{margin:0}

/* ---------- matrix ---------- */
.dg-mx .dg-tw{border-top:0}
.dg-mx table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.dg-mx th,.dg-mx td{padding:0;border-bottom:1px solid var(--hair);text-align:center;vertical-align:middle}
.dg-mx tbody th{text-align:start;font:400 13px var(--sans);color:var(--t2);padding:9px 16px 9px 0;white-space:nowrap}
.dg-mx thead th{font:500 11px var(--mono);color:var(--t3);vertical-align:bottom;padding:0 0 10px;height:auto}
.dg-mx thead th button{appearance:none;border:0;background:none;color:inherit;font:inherit;cursor:pointer;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 4px;white-space:nowrap;border-radius:4px}
.dg-mx thead th button:hover{color:var(--t1)}
.dg-mx td{min-width:34px;height:36px;position:relative}
.dg-mx td .c{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid var(--hair2);vertical-align:middle;transition:transform var(--dur-fast)}
.dg-mx td.on .c{background:var(--t1);border-color:var(--t1)}
.dg-mx td.lv-2 .c{background:var(--t3);border-color:var(--t3)}
.dg-mx td[tabindex]{cursor:pointer}
.dg-mx td:hover .c,.dg-mx td:focus-visible .c{border-color:var(--accent-graphic)}
.dg-mx td:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.dg-mx .xr th,.dg-mx .xr td,.dg-mx td.xc,.dg-mx th.xc{background:var(--hover)}
.dg-mx td.xc.on .c,.dg-mx .xr td.on .c{transform:scale(1.15)}
.dg-mx td.hot .c{background:var(--accent-graphic);border-color:var(--accent-graphic)}
.dg-mx tr.sel th{color:var(--t1)}
.dg-mx th.sel{color:var(--t1)}
.dg-mx th.sel button{color:var(--t1);box-shadow:inset 0 -2px 0 var(--accent)}
.dg-mx tfoot td{border-bottom:0;padding-top:8px;height:auto;vertical-align:top}
.dg-mx tfoot .bar{display:block;margin:0 auto;width:4px;background:var(--t3);border-radius:2px}
.dg-mx tfoot .n{display:block;font:400 11px var(--mono);color:var(--t3);margin-top:4px}
.dg-mx .ft{font:400 11px var(--mono);color:var(--t3);text-align:start;padding-top:8px}

/* ---------- metric ribbon ---------- */
.dg-ribbon{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:0;position:relative}
.dg-ribbon{border-top:1px solid var(--hair2)}
.dg-ribbon>div{padding:16px 18px 4px 0;min-width:0;position:relative}
.dg-ribbon>div+div{padding-inline-start:18px}
.dg-ribbon>div+div:before{content:"";position:absolute;inset-inline-start:0;top:16px;bottom:8px;width:1px;background:var(--hair)}
.dg-ribbon dt{font:400 12px var(--sans);color:var(--t3);margin:0}
.dg-ribbon dd{margin:6px 0 0;font:400 30px/1.05 var(--mono);letter-spacing:-.03em;color:var(--t1);font-variant-numeric:tabular-nums slashed-zero}
.dg-ribbon dd small{font:400 12px var(--mono);color:var(--t3);margin-inline-start:4px;letter-spacing:0}
.dg-ribbon .sig dd{color:var(--accent-text)}
.dg-ribbon .of{display:block;height:2px;margin-top:10px;background:var(--hair);border-radius:1px;overflow:hidden}
.dg-ribbon .of i{display:block;height:100%;background:var(--t2)}
.dg-ribbon .sig .of i{background:var(--accent-graphic)}
@media (max-width:640px){.dg-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}.dg-ribbon>div:nth-child(odd){padding-inline-start:0}.dg-ribbon>div:nth-child(odd):before{display:none}.dg-ribbon dd{font-size:24px}}

/* ---------- conformance ladder ---------- */
.dg-ladder .rung{cursor:pointer;outline:none}
.dg-ladder .rung .pl{transition:fill var(--dur-fast),stroke var(--dur-fast)}
.dg-ladder .rung:hover .pl,.dg-ladder .rung:focus-visible .pl{stroke:var(--accent-graphic)}
.dg-ladder .rung[aria-pressed=true] .pl{fill:var(--dg-plate);stroke:var(--accent-graphic)}
.dg-ladder .rung.reached .pl{fill:var(--dg-plate-2)}
.dg-ladder .rung .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-ladder .rung:focus-visible .fr{opacity:1}
.dg-ladder .rung[aria-pressed=true] .tx-i{fill:var(--accent-text)}
.dg-ladder .riser{fill:none;stroke:var(--t3);stroke-width:1.2}
.dg-ladder .exit{fill:none;stroke:var(--hair2);stroke-width:1;stroke-dasharray:3 4}
.dg-ladder .exit-n .pl{stroke-dasharray:3 3}

/* ---------- architecture stack ---------- */
.dg-stack .ly{cursor:pointer;outline:none}
.dg-stack .ly .pl{transition:opacity var(--dur-base),stroke var(--dur-fast)}
.dg-stack .ly:hover .pl,.dg-stack .ly:focus-visible .pl{stroke:var(--accent-graphic)}
.dg-stack .ly .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-stack .ly:focus-visible .fr{opacity:1}
.dg-stack .ly[aria-pressed=true] .pl{stroke:var(--accent-graphic);fill:var(--dg-plate)}
.dg-stack .grp{font:500 10.5px var(--mono);fill:var(--t3)}
.dg-stack .bus{stroke:var(--hair2);stroke-width:1}
.dg-stack .bus.on{stroke:var(--t2)}
.dg-stack .bus.sel{stroke:var(--accent-graphic);stroke-width:1.4}
.dg-stack .tap{fill:var(--bg);stroke:var(--t3);stroke-width:1.2}
.dg-stack .tap.on{fill:var(--t1);stroke:var(--t1)}
.dg-stack .tap.sel{fill:var(--accent-graphic);stroke:var(--accent-graphic)}
.dg-stack .bl{cursor:pointer;outline:none}
.dg-stack .bl .tx-m{transition:fill var(--dur-fast)}
.dg-stack .bl:hover~.bus,.dg-stack .bus:hover{stroke:var(--accent-graphic)}
.dg-stack .bl:hover .tx-m,.dg-stack .bl[aria-pressed=true] .tx-m{fill:var(--t1)}
.dg-stack .bl .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg-stack .bl:focus-visible .fr{opacity:1}
.dg-stack.iso .ly:not([aria-pressed=true]):not(.keep) .pl,.dg-stack.iso .ly:not([aria-pressed=true]):not(.keep) .tx-n{opacity:.32}
.dg-stack.iso .ly:not([aria-pressed=true]):not(.keep) .tx-s{opacity:.55}
.dg-stack .x3d{position:relative;height:min(72vh,620px);border-radius:5px;overflow:hidden;background:transparent}
.dg-stack .x3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.dg-stack .x3d canvas:active{cursor:grabbing}
.dg-stack .x3d .lbl3{position:absolute;left:0;top:0;transform:translate(-100%,-50%);padding-inline-end:10px;font:500 11.5px var(--mono);color:var(--t2);white-space:nowrap;pointer-events:none;transition:color var(--dur-fast),opacity var(--dur-fast)}
.dg-stack .x3d .lbl3.on{color:var(--t1)}
.dg-stack .x3d .lbl3.on:after{content:"";position:absolute;inset-inline-end:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent)}
.dg-stack .x3d .hint{position:absolute;inset-inline-end:14px;bottom:12px;font:400 11.5px var(--mono);color:var(--t3);pointer-events:none}
.dg-stack .x3d .explode{position:absolute;inset-inline-start:14px;bottom:10px;display:flex;align-items:center;gap:10px;font:400 12px var(--mono);color:var(--t2)}
.dg-stack .x3d .explode input{width:140px;accent-color:var(--accent)}

@media (prefers-reduced-motion:reduce){.dg *{transition:none!important}}
@media (forced-colors:active){.dg .dg-pk{display:none}.dg .nd[aria-pressed=true] .dot,.dg-states .st[aria-pressed=true] rect.pl{stroke:Highlight}}

/* ---------- DAG explorer ---------- */
.dg-dagx .dag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;border-radius:5px;overflow:hidden;background:var(--dg-plate);box-shadow:inset 0 1px 0 var(--dg-lift)}
.dg-dagx .dg-stage{border-radius:0;background:var(--bg);position:relative;overflow:hidden}
.dg-dagx .dag-svg{display:block;width:100%;touch-action:none;cursor:grab;user-select:none}
.dg-dagx .dag-svg.panning{cursor:grabbing}
.dg-dagx .de{fill:none;stroke:var(--hair2);stroke-width:1.1;vector-effect:non-scaling-stroke;transition:stroke var(--dur-base),opacity var(--dur-base)}
.dg-dagx .de.spine{stroke:var(--t3);stroke-width:1.6}
.dg-dagx .de.out{stroke-dasharray:3 4}
.dg-dagx .dag-mk{stroke:var(--t3);stroke-width:1.2}
.dg-dagx .focus .de{opacity:.14}
.dg-dagx .focus .de.down{opacity:1;stroke:var(--accent-graphic);stroke-width:1.5}
.dg-dagx .focus .de.up{opacity:1;stroke:var(--t1);stroke-width:1.3}
.dg-dagx .de:hover{stroke:var(--accent-graphic);opacity:1}
.dg-dagx .dn{cursor:pointer;outline:none}
.dg-dagx .dn .pl{fill:var(--dg-plate);stroke:var(--hair2);transition:stroke var(--dur-fast),fill var(--dur-fast),opacity var(--dur-base)}
.dg-dagx .dn.pri .pl{fill:var(--dg-plate-2);stroke:var(--t3)}
.dg-dagx .dn .sd{fill:var(--t3)}
.dg-dagx .dn .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;vector-effect:non-scaling-stroke}
.dg-dagx .dn:focus-visible .fr{opacity:1}
.dg-dagx .dn:hover .pl,.dg-dagx .dn:focus-visible .pl{stroke:var(--accent-graphic)}
.dg-dagx .dn:hover .sd{fill:var(--accent-graphic)}
.dg-dagx .dn[aria-pressed=true] .pl{stroke:var(--accent-graphic);fill:var(--dg-plate);stroke-width:1.5}
.dg-dagx .dn[aria-pressed=true] .tx-i,.dg-dagx .dn[aria-pressed=true] .sd{fill:var(--accent-graphic)}
.dg-dagx .focus .dn:not([aria-pressed=true]):not(.dn-down):not(.dn-up){opacity:.3}
.dg-dagx .focus .dn.dn-down .pl{stroke:var(--accent-graphic)}
.dg-dagx .focus .dn.dn-up .pl{stroke:var(--t1)}
.dg-dagx .far .dn.sec text{opacity:0}
.dg-dagx .far.focus .dn.sec.dn-down text,.dg-dagx .far.focus .dn.sec.dn-up text,.dg-dagx .far .dn.sec[aria-pressed=true] text{opacity:1}
.dg-dagx .dag-mini{position:absolute;inset-inline-start:12px;bottom:12px;padding:6px;border-radius:5px;background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:inset 0 0 0 1px var(--hair2);cursor:pointer}
.dg-dagx .dag-mini svg{display:block}
.dg-dagx .dag-mini rect.mm-p{fill:var(--t3)}.dg-dagx .dag-mini rect.mm-s{fill:var(--hair2)}
.dg-dagx .dag-mini rect.on{fill:var(--accent-graphic)}
.dg-dagx .dag-mini .mv{fill:color-mix(in srgb,var(--t1) 6%,transparent);stroke:var(--t2);vector-effect:non-scaling-stroke}
.dg-dagx .dag-mini .mv{stroke-width:1}
.dg-dagx .dag-hint{position:absolute;inset-inline-end:14px;bottom:10px;margin:0;font:400 11px var(--mono);color:var(--t3);pointer-events:none}
.dg-zoom{display:inline-flex;gap:4px}
.dg-zoom .dg-btn{min-width:30px;justify-content:center}
.dg-dagx .dag-con{padding:20px 20px 18px;border-inline-start:1px solid var(--hair);background:var(--dg-plate);max-height:620px;overflow:auto;font-size:13.5px}
.dag-con .dc-k{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 11.5px var(--mono);color:var(--t3)}
.dag-con .dc-k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dag-con .dc-h{margin:0 0 10px;font:400 22px/1.2 var(--mono);letter-spacing:-.03em;color:var(--t1)}
.dag-con .dc-p{margin:0 0 12px;color:var(--t2);line-height:1.55}
.dag-con .dc-dl{margin:6px 0 0}
.dag-con .dc-dl>div{padding:10px 0;border-top:1px solid var(--hair)}
.dag-con dt{font:400 11.5px var(--mono);color:var(--t3);margin:0 0 6px}
.dag-con dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.dag-con .dc-n{font:400 13px var(--mono);color:var(--t1)}
.dag-con .dc-none{font:400 12px var(--mono);color:var(--t3)}
.dag-con .dag-go{appearance:none;cursor:pointer;min-height:26px;padding:0 10px;border:1px solid var(--hair2);border-radius:5px;background:transparent;color:var(--t2);font:400 12px var(--sans)}
.dag-con .dag-go:hover,.dag-con .dag-go:focus-visible{border-color:var(--accent-graphic);color:var(--t1)}
.dag-con .dc-path{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:p}
.dag-con .dc-act{margin-top:12px}
.dag-con .chips{display:flex;flex-wrap:wrap;gap:6px}
.dag-con .chip{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid var(--hair2);border-radius:5px;font:400 11.5px var(--mono);color:var(--t2);background:transparent}
.dag-con button.chip{cursor:pointer}.dag-con button.chip:hover{border-color:var(--accent-graphic);color:var(--t1)}
@media (max-width:900px){.dg-dagx .dag-wrap{grid-template-columns:1fr}.dg-dagx .dag-con{border-inline-start:0;border-top:1px solid var(--hair);max-height:none}.dg-dagx .dag-hint{display:none}.dg-dagx .dag-mini{inset-inline-start:8px;bottom:8px}}

/* ---------- operator console: an instrument panel, natively tuned per theme ---------- */
.dg-console{--cx-panel:color-mix(in srgb,var(--t1) 3.5%,var(--bg));--cx-well:color-mix(in srgb,var(--t1) 1.5%,var(--bg));border-radius:5px;background:var(--cx-panel);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.cx-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--hair)}
.cx-id{display:flex;align-items:center;gap:10px;font:500 13px var(--mono);color:var(--t1)}
.cx-led{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dg-console[data-paused] .cx-led{box-shadow:none}
.cx-sim{font:500 11px var(--mono);color:var(--t1);border:1px solid var(--t3);border-radius:5px;padding:3px 9px;letter-spacing:.02em}
.cx-ctl{display:flex;gap:6px;flex-wrap:wrap}
.cx-ctl .dg-btn:hover:not([disabled]),.cx-ctl .dg-btn:focus-visible{border-color:var(--accent-graphic);color:var(--t1)}
.cx-body{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1.05fr);min-height:380px}
.cx-col{padding:14px 16px;min-width:0}
.cx-col+.cx-col{border-inline-start:1px solid var(--hair)}
.cx-h{margin:0 0 10px;font:500 11.5px var(--mono);color:var(--t3)}
.cx-states ol{list-style:none;margin:0;padding:0;position:relative}
.cx-states li{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:8px;padding:6px 0;font:400 12.5px var(--sans);color:var(--t3);position:relative}
.cx-states li i{width:9px;height:9px;border-radius:50%;border:1px solid var(--t3);background:var(--bg);position:relative;z-index:1}
.cx-states li:not(:last-child):after{content:"";position:absolute;inset-inline-start:4px;top:22px;bottom:-8px;width:1px;background:var(--hair2)}
.cx-states li em{font:400 11px var(--mono);font-style:normal;color:var(--t3)}
.cx-states li.done{color:var(--t2)}.cx-states li.done i{background:var(--t2);border-color:var(--t2)}
.cx-states li.cur{color:var(--t1)}.cx-states li.cur i{background:var(--accent-graphic);border-color:var(--accent-graphic)}
.cx-states li.cx-deg{margin-top:10px;border-top:1px dashed var(--hair2);padding-top:12px}.cx-states li.cx-deg:after{display:none}
.cx-traces{display:grid;grid-template-rows:repeat(3,auto);gap:10px;align-content:start}
.cx-tr{border-radius:5px;background:var(--cx-well);box-shadow:inset 0 0 0 1px var(--hair);padding:9px 12px 8px;display:flex;flex-direction:column}
.cx-tr-h{display:flex;justify-content:space-between;align-items:baseline;font:400 12px var(--sans);color:var(--t3)}
.cx-tr-h b{font:400 18px var(--mono);letter-spacing:-.02em;color:var(--t1);font-variant-numeric:tabular-nums slashed-zero}
.cx-tr canvas{flex:none;width:100%;height:64px;display:block;margin-top:6px}
.cx-lines{list-style:none;margin:0;padding:0;max-height:330px;overflow:auto;font:400 11.5px/1.45 var(--mono)}
.cx-lines li{display:grid;grid-template-columns:56px 1fr;gap:2px 8px;padding:6px 0;border-bottom:1px solid var(--hair);color:var(--t2);animation:cx-in .35s var(--ease-out)}
.cx-lines time{color:var(--t3);grid-row:span 2}
.cx-lines .who{color:var(--t3)}
.cx-lines .what i{font-style:normal;color:var(--t3)}
.cx-lines .cx-state .what{color:var(--t1)}
.cx-lines .cx-fault .what{color:var(--t1)}.cx-lines .cx-fault time{color:var(--accent-text)}
.cx-lines .cx-fault:before{content:""}
@keyframes cx-in{from{opacity:0;transform:translateY(-4px)}}
.cx-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 16px 12px;border-top:1px solid var(--hair)}
.cx-pills{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.cx-pills>div{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--hair2)}
.cx-pills dt{font:400 11px var(--mono);color:var(--t3)}
.cx-pills dd{margin:0;font:500 12px var(--sans);color:var(--t1)}
.cx-pills>div:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t3)}
.cx-pills>div[data-s=ok]:before{background:var(--t1)}
.cx-pills>div[data-s=warn]:before{background:var(--accent-graphic)}
.cx-note{margin:0;font:400 12px var(--sans);color:var(--t3);max-width:64ch}
@media (max-width:1000px){.cx-body{grid-template-columns:1fr 1fr}.cx-log{grid-column:1 / -1;border-inline-start:0!important;border-top:1px solid var(--hair)}}
@media (max-width:640px){.cx-body{grid-template-columns:1fr}.cx-col+.cx-col{border-inline-start:0;border-top:1px solid var(--hair)}.cx-states ol{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.cx-states li:after{display:none}}
@media (prefers-reduced-motion:reduce){.cx-lines li{animation:none}}

/* ---------- CAD assembly ---------- */
.dg-cad .cad-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;border-radius:5px;overflow:hidden;background:var(--dg-plate);box-shadow:inset 0 0 0 1px var(--hair)}
.dg-cad .cad-stage{position:relative;height:min(78vh,640px);min-height:440px;background:var(--bg);overflow:hidden}
.dg-cad canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
.dg-cad canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.dg-cad .cad-dims{position:absolute;inset:0;pointer-events:none;z-index:2}
.dg-cad .cad-dim{position:absolute;left:0;top:0;margin:-10px 0 0 -30px;min-width:60px;text-align:center;font:500 11px var(--mono);color:var(--t1);background:color-mix(in srgb,var(--bg) 84%,transparent);border-radius:5px;padding:2px 6px;box-shadow:inset 0 0 0 1px var(--hair2)}
.dg-cad .cad-con{padding:18px;border-left:1px solid var(--hair);display:flex;flex-direction:column;gap:12px;max-height:min(78vh,640px);overflow:auto}
.dg-cad .cad-con .dc-k{display:flex;align-items:center;gap:8px;margin:0;font:500 11.5px var(--mono);color:var(--t3)}
.dg-cad .cad-con .dc-k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg-cad .cad-ex{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font:400 11px var(--mono);color:var(--t3)}
.dg-cad .cad-ex input{width:100%;accent-color:var(--accent-graphic)}
.dg-cad .cad-parts{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dg-cad .cad-parts button{appearance:none;width:100%;display:flex;align-items:center;gap:10px;min-height:34px;padding:6px 4px;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--t2);font:400 13px var(--sans);text-align:start;cursor:pointer}
.dg-cad .cad-parts .ix{font:500 10.5px var(--mono);color:var(--t3);width:20px}
.dg-cad .cad-parts button:hover,.dg-cad .cad-parts button.hot,.dg-cad .cad-parts button:focus-visible{color:var(--t1);box-shadow:inset 2px 0 0 var(--accent-graphic)}
.dg-cad .cad-parts button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dg-cad .cad-parts button[aria-pressed=true]{color:var(--t1);background:var(--dg-plate);box-shadow:inset 2px 0 0 var(--accent-graphic)}
.dg-cad .cad-parts button[aria-pressed=true] .ix{color:var(--accent-text)}
.dg-cad .dc-h{margin:0 0 8px;font:400 20px/1.2 var(--mono);letter-spacing:-.03em;color:var(--t1)}
.dg-cad .dc-p{margin:0 0 10px;color:var(--t2);font-size:13.5px;line-height:1.55}
.dg-cad .cad-story{color:var(--t1);border-inline-start:2px solid var(--accent-graphic);padding-inline-start:10px}
.dg-cad .cad-m{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.dg-cad .cad-m div{border-top:1px solid var(--hair);padding-top:6px}
.dg-cad .cad-m dt{font:400 11px var(--mono);color:var(--t3);margin:0}
.dg-cad .cad-m dd{margin:2px 0 0;font:400 15px var(--mono);color:var(--t1)}
.dg-cad .cad-src{margin:8px 0 0;font:400 11px var(--mono);color:var(--t3)}
.dg-cad .nxo3d-hud{z-index:1}
.dg-cad .nxo3d-hud .br-t{display:none}
@media (max-width:700px){.dg-cad .nxo3d-cap{left:10px;right:10px;transform:none;max-width:none;bottom:58px;padding:7px 10px;font-size:12.5px;line-height:1.4}.dg-cad .nxo3d-tour{left:10px;right:10px;transform:none}.dg-cad .nxo3d-tour input[type=range]{flex:1;width:auto}.dg-cad .nxo3d-hud .bl-t{display:none}}
@media (max-width:900px){.dg-cad .cad-wrap{grid-template-columns:1fr}.dg-cad .cad-con{border-left:0;border-top:1px solid var(--hair);max-height:none}.dg-cad .cad-stage{height:62vh;min-height:380px}}

/* kit shapes: chips and badges 4px; dots stay round */
.dg-card .chip,.dag-con .chip,.dag-con .dag-go,.dg .pill rect,.dg-cad .cad-dim,.cx-pills>div,.cx-sim{border-radius:4px}
.dg-legend button[aria-pressed=true]{background:transparent}

/* ---------- scroll story: pinned stage beside narrative steps ---------- */
.dg-ss{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.dg-ss .ss-stage{grid-column:2;grid-row:1;position:relative;border-left:1px solid var(--hair)}
.dg-ss .ss-pin{position:sticky;top:var(--chrome-h,64px);height:calc(100vh - var(--chrome-h,64px));overflow:hidden;background:var(--bg)}
.dg-ss .ss-canvas{position:absolute;inset:0}
.dg-ss .ss-canvas canvas{display:block;width:100%;height:100%;outline:none}
.dg-ss .ss-canvas canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.dg-ss .ss-poster{width:100%;height:100%;object-fit:cover}
.dg-ss .ss-canvas .nxo3d-tour,.dg-ss .ss-canvas .nxo3d-cap{display:none}
.dg-ss .ss-hud{position:absolute;left:20px;bottom:18px;display:flex;align-items:center;gap:12px;font:500 11px var(--mono);color:var(--t3);z-index:3}
.dg-ss .ss-bar{display:block;width:120px;height:1px;background:var(--hair2)}
.dg-ss .ss-bar i{display:block;height:1px;width:0;background:var(--t1);transition:width var(--dur-slow) var(--ease-standard)}
.dg-ss .ss-steps{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0 32px 0 0;counter-reset:ss}
.dg-ss .ss-step{min-height:86vh;display:flex;align-items:center;padding:12vh 0}
.dg-ss .ss-step:first-child{min-height:70vh;padding-top:10vh}
.dg-ss .ss-card{border-left:1px solid var(--hair2);padding:4px 0 4px 20px;transition:border-color var(--dur-base)}
.dg-ss .ss-step.on .ss-card{border-left-color:var(--t1)}
.dg-ss .ss-k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:500 11.5px var(--mono);color:var(--t3)}
.dg-ss .ss-step.on .ss-k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg-ss .ss-card h3{margin:0 0 12px;font:400 26px/1.2 var(--mono);letter-spacing:-.035em;color:var(--t1)}
.dg-ss .ss-card p{margin:0 0 12px;color:var(--t2);font-size:15px;line-height:1.6;max-width:52ch}
.dg-ss .ss-card ul{margin:6px 0 0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.dg-ss .ss-card li{padding:8px 0;border-bottom:1px solid var(--hair);color:var(--t2);font-size:14px}
@media (max-width:900px){
  .dg-ss{grid-template-columns:1fr}
  .dg-ss .ss-stage{grid-column:1;grid-row:1;border-left:0;position:sticky;top:var(--chrome-h,64px);z-index:1;height:48vh}
  .dg-ss .ss-pin{position:relative;top:0;height:48vh}
  .dg-ss .ss-steps{grid-column:1;grid-row:2;padding:0 0 0 0;position:relative;z-index:2}
  .dg-ss .ss-step{min-height:60vh;padding:6vh 0}
  .dg-ss .ss-card{background:var(--bg);padding:16px 16px 12px;border:1px solid var(--hair);border-radius:5px}
  .dg-ss .ss-card h3{font-size:21px}
}

/* ---------- cells with mini-scenes: a hairline grid, the model turns on hover or focus ---------- */
.dg-cells{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.dg-cells>*{background:var(--bg);min-width:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.dg-cell{display:flex;flex-direction:column;color:inherit;text-decoration:none;padding:0 0 18px;outline:none;position:relative}
.dg-cell .mini-w{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--hair)}
.dg-cell .mini-w img,.dg-cell canvas.mini{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dg-cell canvas.mini{opacity:0;transition:opacity var(--dur-base)}
.dg-cell.live canvas.mini{opacity:1}
.dg-cell .k{display:flex;align-items:center;gap:8px;margin:16px 20px 6px;font:500 11.5px var(--mono);color:var(--t3)}
.dg-cell h3{margin:0 20px 8px;font:500 16px/1.3 var(--sans);color:var(--t1)}
.dg-cell p{margin:0 20px;color:var(--t2);font-size:13.5px;line-height:1.55}
.dg-cell:hover,.dg-cell:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-graphic)}
.dg-cell:hover h3,.dg-cell:focus-visible h3{color:var(--t1)}
.dg-cell.live .k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){.dg-cells{--n:2!important}}
@media (max-width:560px){.dg-cells{--n:1!important}}