.dg-panel{border:1px solid #d7dce2;border-radius:14px;background:linear-gradient(145deg,#fff,#f7f9fb);padding:1.1rem;margin:1.5rem 0;box-shadow:0 8px 28px rgba(33,37,41,.06)}
.dg-callout{display:block;border:none;border-left:.5rem solid #6bd6fd;background-color:rgba(107,214,253,.18);padding:.25rem .75rem;margin:1rem 0;border-radius:0;box-shadow:none}.dg-panel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.dg-panel h3{margin:.15rem 0}.dg-kicker{font-size:.7rem;letter-spacing:.14em;color:#4263eb;font-weight:800}.dg-muted,.dg-status{color:#68707a;font-size:.92rem}.dg-button{border:0;border-radius:999px;background:#3157d5;color:#fff;padding:.65rem 1rem;font-weight:700;cursor:pointer}.dg-button:disabled{opacity:.55}.dg-button--ghost{background:#e9edff;color:#2949b7}.dg-button-group{display:flex;gap:.5rem}.dg-result{margin-top:1rem;padding:.8rem;text-align:center;background:#fff;border:1px dashed #aeb6c2;border-radius:9px}.dg-status{text-align:center;margin-top:.8rem;min-height:1.4em}
.dg-rpp-row{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}.dg-rpp{opacity:.42;padding:.65rem;border:2px solid transparent;border-radius:10px;transition:.25s}.dg-rpp.active{opacity:1;border-color:#4263eb}.dg-rpp.done{opacity:1}.dg-rpp__grid{display:grid;grid-template-columns:38px 38px;grid-template-rows:38px 38px;gap:3px}.dg-rpp__grid span{display:grid;place-items:center;background:#edf0f3;border:1px solid #b8c0ca;border-radius:4px;font-weight:700;transition:.25s}.dg-rpp__grid .empty{visibility:hidden}.dg-rpp__grid .column-hit-1{box-shadow:inset 0 0 0 2px #e64980}.dg-rpp__grid .column-hit-2{box-shadow:inset 0 0 0 2px #2f9e44}.dg-rpp__grid .count-1{background:#ffdeeb;border-color:#d6336c;transform:scale(1.08)}.dg-rpp__grid .count-2{background:#d3f9d8;border-color:#2f9e44;transform:scale(1.08)}.dg-rpp__weight{display:flex;align-items:flex-start;justify-content:center;min-height:1.7rem;text-align:center;color:#c2255c;margin-top:.4rem}.dg-weight-placeholder{color:#adb5bd}.dg-exponent-summary{font-size:.76rem;color:#495057;background:#e9ecef;border-radius:999px;padding:.18rem .42rem;animation:dg-pop .35s ease both}.dg-factor{display:inline-flex;align-items:flex-start;margin:.05rem;white-space:nowrap}.dg-factor__base,.dg-factor__exp{opacity:0;transform:translateY(8px) scale(.7);transition:opacity .28s,transform .35s cubic-bezier(.2,.8,.2,1.35)}.dg-factor.show-base .dg-factor__base,.dg-factor.show-exp .dg-factor__exp{opacity:1;transform:none}.dg-factor__exp{font-size:.72em;margin-left:1px}.dg-factor sub{font-size:.68em}.dg-factor__base{font-style:normal}.dg-status b{color:#c2255c}.dg-status strong{color:#3157d5}@keyframes dg-pop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}
.dg-mindset-steps{display:flex;gap:.35rem;margin:.9rem 0;overflow-x:auto}
.dg-lattice svg{display:block;width:100%;max-width:760px;margin:auto;height:auto}.dg-lattice-edges{stroke:#adb5bd;stroke-width:1.5}.dg-lattice-closure{fill:none;stroke:#3157d5;stroke-width:1;opacity:.35}.dg-lattice-jumps{fill:none;stroke-width:4;stroke-dasharray:9 5}.dg-lattice-node text{fill:#334155;font:34px system-ui,sans-serif;text-anchor:middle}.dg-lattice-node.active text{fill:#3157d5}.theme-dark .dg-lattice-node text{fill:#f1f5f9}
/* Figure 3: Dual representation (Row vs Column) */
.dg-dual-rep{margin:.6rem 0}
.dg-rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.dg-rep-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:.85rem .75rem;display:flex;flex-direction:column;align-items:stretch;gap:.6rem;text-align:center;box-shadow:0 4px 16px rgba(15,23,42,.04);transition:.25s}
.dg-rep-card--row{border-top:3.5px solid #3b5bdb}
.dg-rep-card--col{border-top:3.5px solid #2b8a3e}
.dg-rep-card-head{display:flex;flex-direction:column;gap:.25rem;align-items:center}
.dg-rep-tag{font-size:.65rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.15rem .5rem;border-radius:4px}
.dg-rep-tag--row{background:#edf2ff;color:#3b5bdb}
.dg-rep-tag--col{background:#ebfbee;color:#2b8a3e}
.dg-rep-val{font-size:1rem;color:#0f172a;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.dg-rep-diagram-wrap{min-height:120px;display:flex;align-items:center;justify-content:center;padding:.4rem 0}
.dg-rep-grid-cells{display:flex;flex-direction:column;gap:3px}
.dg-rep-row-strip{display:flex;gap:3px;align-items:center}
.dg-rep-row-label{font-size:.65rem;font-weight:700;color:#64748b;min-width:48px;text-align:right;margin-right:4px}
.dg-rep-col-headers{display:flex;gap:3px;padding-left:52px;margin-bottom:3px}
.dg-rep-col-label{width:26px;font-size:.62rem;font-weight:700;color:#64748b;text-align:center}
.dg-rep-cell{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;transition:.25s}
.dg-rep-cell--row-0{background:#bac8ff;border:1px solid #748ffc;color:#2b3a4a}
.dg-rep-cell--row-1{background:#dbe4ff;border:1px solid #91a7ff;color:#2b3a4a}
.dg-rep-cell--row-2{background:#edf2ff;border:1px solid #bac8ff;color:#2b3a4a}
.dg-rep-cell--col-0{background:#8ce99a;border:1px solid #51cf66;color:#1b3820}
.dg-rep-cell--col-1{background:#b2f2bb;border:1px solid #69db7c;color:#1b3820}
.dg-rep-cell--col-2{background:#d3f9d8;border:1px solid #8ce99a;color:#1b3820}
.dg-rep-cell--col-3{background:#ebfbee;border:1px solid #b2f2bb;color:#1b3820}
.dg-rep-breakdown{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;font-size:.7rem;color:#475569;background:#f8fafc;padding:.4rem .5rem;border-radius:8px;border:1px solid #e2e8f0}
.dg-rep-breakdown span{padding:.1rem .35rem;border-radius:4px;background:#fff;border:1px solid #cbd5e1}
.dg-rep-breakdown b{color:#0f172a}
.dg-rep-card-footer{font-size:.68rem;color:#64748b;font-weight:600;font-style:italic}
.theme-dark .dg-rep-card{background:#1e2430;border-color:#334155}
.theme-dark .dg-rep-tag--row{background:#1e2c4f;color:#91a7ff}
.theme-dark .dg-rep-tag--col{background:#193d34;color:#63e6be}
.theme-dark .dg-rep-val{color:#f1f5f9}
.theme-dark .dg-rep-row-label,.theme-dark .dg-rep-col-label{color:#94a3b8}
.theme-dark .dg-rep-breakdown{background:#171c26;border-color:#334155;color:#cbd5e1}
.theme-dark .dg-rep-breakdown span{background:#252b3b;border-color:#475569}
.theme-dark .dg-rep-breakdown b{color:#fff}
.theme-dark .dg-rep-card-footer{color:#94a3b8}
@container (max-width:560px){.dg-rep-grid{grid-template-columns:1fr}}
/* Figure 4: Transducer Transition Lattice (Compact ~70% height) */
.dg-transducer{padding:.2rem 0}
.dg-tlattice-container{display:flex;flex-direction:column;gap:.45rem}
.dg-tlattice-svg-wrap{background:#fff;border:1.5px solid #d7dce2;border-radius:10px;padding:.3rem;box-shadow:0 3px 12px rgba(15,23,42,.04);overflow-x:auto}
.dg-tlattice-svg{display:block;width:100%;max-width:640px;max-height:245px;margin:0 auto;height:auto}
.dg-t-edge{fill:none;stroke:#cbd5e1;stroke-width:1.4;transition:stroke .25s,stroke-width .25s;cursor:pointer}
.dg-t-edge:hover{stroke:#91a7ff;stroke-width:2.2}
.dg-t-edge.is-active{stroke:#3157d5;stroke-width:2.8;filter:drop-shadow(0 2px 5px rgba(49,87,213,.35))}
.dg-t-node-target{cursor:pointer;transition:transform .2s}
.dg-t-node-target .dg-t-target-box{fill:#fff;stroke:#ced4da;stroke-width:1.2;rx:5;transition:all .25s}
.dg-t-node-target .dg-t-target-text{fill:#343a40;font-size:10.5px;font-weight:700;font-family:ui-monospace,Menlo,monospace;dominant-baseline:central}
.dg-t-node-target .dg-t-badge rect{fill:#f1f3f5;stroke:#ced4da;stroke-width:1;rx:4;transition:all .25s}
.dg-t-node-target .dg-t-badge text{fill:#495057;font-size:10px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:ui-monospace,Menlo,monospace}
.dg-t-node-target:hover .dg-t-target-box{stroke:#3157d5;fill:#f8faff}
.dg-t-node-target:hover .dg-t-badge rect{stroke:#3157d5;fill:#edf2ff}
.dg-t-node-target.is-active .dg-t-target-box{stroke:#3157d5;fill:#edf2ff;stroke-width:2;filter:drop-shadow(0 2px 8px rgba(49,87,213,.18))}
.dg-t-node-target.is-active .dg-t-target-text{fill:#1a3699}
.dg-t-node-target.is-active .dg-t-badge rect{fill:#3157d5;stroke:#2746b3;filter:drop-shadow(0 2px 6px rgba(49,87,213,.3))}
.dg-t-node-target.is-active .dg-t-badge text{fill:#fff}
.dg-t-node-source rect{fill:#eef2ff;stroke:#3157d5;stroke-width:2;rx:8}

/* Compact Inspection card */
.dg-branch-inspect{background:#fff;border:1.5px solid #d7dce2;border-radius:9px;padding:.45rem .7rem;display:flex;flex-direction:column;gap:.35rem}
.dg-inspect-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.3rem;border-bottom:1px solid #e9ecef;padding-bottom:.3rem}
.dg-inspect-badge{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#e9ecef;color:#495057;padding:.15rem .45rem;border-radius:4px}
.dg-inspect-header strong{font-size:.84rem;color:#1e293b}
.dg-inspect-weight{font-size:.76rem;color:#c2255c}
.dg-inspect-weight b{font-size:.88rem}
.dg-inspect-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.45rem}
.dg-inspect-col{display:flex;flex-direction:column;gap:.12rem;padding:.32rem .45rem;border-radius:6px;border:1px solid #e9ecef}
.dg-inspect-col.is-inc{background:#fff5f5;border-color:#ffc9c9}
.dg-inspect-col.is-same{background:#f8f9fa;border-color:#e9ecef}
.dg-inspect-col-top{display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.dg-inspect-col-title{font-size:.62rem;font-weight:700;color:#68707a;text-transform:uppercase}
.dg-inspect-col-val{font-size:.78rem;color:#343a40}
.dg-inspect-col-val b{color:#0f172a}
.dg-inspect-col-rule{font-size:.66rem;display:flex;align-items:baseline;justify-content:space-between;gap:.3rem}
.dg-inspect-col-rule small{color:#68707a;font-size:.6rem}
.dg-inspect-col.is-inc .dg-inspect-col-rule{color:#c2255c}
.dg-inspect-col.is-same .dg-inspect-col-rule{color:#68707a}
.dg-inspect-summary{font-size:.7rem;color:#495057;background:#f8f9fa;padding:.28rem .5rem;border-radius:5px;text-align:center;line-height:1.35}
.dg-inspect-summary strong{color:#3157d5}

/* Dark Theme */
.theme-dark .dg-tlattice-svg-wrap{background:#1e2430;border-color:#334155}
.theme-dark .dg-t-edge{stroke:#475569}
.theme-dark .dg-t-edge.is-active{stroke:#91a7ff}
.theme-dark .dg-t-node-target .dg-t-target-box{fill:#252b3b;stroke:#3e4a61}
.theme-dark .dg-t-node-target .dg-t-target-text{fill:#f1f5f9}
.theme-dark .dg-t-node-target .dg-t-badge rect{fill:#2b2c2e;stroke:#4a4b4d}
.theme-dark .dg-t-node-target .dg-t-badge text{fill:#ced4da}
.theme-dark .dg-t-node-target:hover .dg-t-target-box{stroke:#91a7ff;fill:#1e2c4f}
.theme-dark .dg-t-node-target:hover .dg-t-badge rect{stroke:#91a7ff}
.theme-dark .dg-t-node-target.is-active .dg-t-target-box{fill:#1e2c4f;stroke:#91a7ff}
.theme-dark .dg-t-node-target.is-active .dg-t-target-text{fill:#fff}
.theme-dark .dg-t-node-target.is-active .dg-t-badge rect{fill:#3157d5;stroke:#91a7ff}
.theme-dark .dg-t-node-target.is-active .dg-t-badge text{fill:#fff}
.theme-dark .dg-t-node-source rect{fill:#1e2c4f;stroke:#91a7ff}
.theme-dark .dg-t-src-title{fill:#94a3b8}
.theme-dark .dg-t-src-val{fill:#91a7ff}
.theme-dark .dg-branch-inspect{background:#1e2430;border-color:#334155}
.theme-dark .dg-inspect-header{border-color:#334155}
.theme-dark .dg-inspect-header strong{color:#f1f5f9}
.theme-dark .dg-inspect-badge{background:#2b2c2e;color:#ced4da}
.theme-dark .dg-inspect-col.is-same{background:#252627;border-color:#4a4b4d}
.theme-dark .dg-inspect-col.is-inc{background:#42252a;border-color:#e03131}
.theme-dark .dg-inspect-col-val{color:#ced4da}
.theme-dark .dg-inspect-col-val b{color:#fff}
.theme-dark .dg-inspect-summary{background:#252627;color:#ced4da}
@container (max-width:560px){.dg-inspect-cols{grid-template-columns:1fr}}
.theme-dark .dg-fcard-val{color:#f1f5f9}
.theme-dark .dg-machine-core{background:#171c26;border-color:#64748b;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.theme-dark .dg-funnel-fill{fill:#171c26}
.theme-dark .dg-funnel-stroke{stroke:#64748b}
.theme-dark .dg-machine-heading{color:#f1f5f9}
.theme-dark .dg-machine-banner{border-color:#334155}
.theme-dark .dg-machine-calc-grid{background:#1e2430;border-color:#334155}
.theme-dark .dg-calc-val{color:#f1f5f9}
.theme-dark .dg-calc-center{border-color:#334155}
.theme-dark .dg-calc-check{background:#252b3b;border-color:#475569;color:#e2e8f0}
.theme-dark .dg-machine-footer{border-color:#334155}
.theme-dark .dg-machine-footer code{background:#252b3b;border-color:#475569;color:#91a7ff}
@container (max-width:580px){.dg-conduit-inlet{left:16px}.dg-conduit-outlet{right:16px}.dg-machine-calc-grid{grid-template-columns:1fr;gap:.5rem}.dg-calc-center{border-left:none;border-right:none;border-top:1px dashed #cbd5e1;border-bottom:1px dashed #cbd5e1;padding:.5rem 0}}
.dg-log{text-align:center;background:#171a21;color:#e9ecef;padding:.8rem;border-radius:8px;margin-top:.8rem}
.dg-log strong{color:#ffd43b}
.dg-matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.75rem 0;padding:.5rem;border:1.5px solid #d7dce2;border-radius:10px;background:#fafbfc}
.dg-matrix-table{border-collapse:separate;border-spacing:3px;margin:0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.dg-matrix-table th{padding:3px 6px;font-size:.7rem;font-weight:700;color:#495057;text-align:center;white-space:nowrap;user-select:none}
.dg-matrix-corner{color:#868e96;font-size:.65rem}
.dg-matrix-col-th{cursor:pointer;border-radius:5px;transition:background .2s,color .2s}
.dg-matrix-col-th:hover,.dg-matrix-col-th.is-active{background:#f3f0ff;color:#7048c8}
.dg-matrix-row-th{cursor:pointer;border-radius:5px;text-align:right;padding-right:6px;transition:background .2s,color .2s}
.dg-matrix-row-th:hover,.dg-matrix-row-th.is-active{background:#edf2ff;color:#364fc7}
.dg-matrix-cell{width:46px;height:36px;text-align:center;vertical-align:middle;border-radius:6px;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s;border:1px solid transparent;user-select:none}
.dg-matrix-wrap--dense .dg-matrix-cell{width:33px;height:27px;font-size:.68rem;border-radius:4px}
.dg-matrix-wrap--dense .dg-matrix-table{border-spacing:1.5px}
.dg-matrix-wrap--dense .dg-matrix-table th{font-size:.63rem;padding:2px 4px}
.dg-cell--zero{color:#adb5bd;background:#fff;border-color:#f1f3f5}
.dg-cell--one{color:#1971c2;background:#e7f5ff;border-color:#d0ebff}
.dg-cell--y1{color:#d9480f;background:#fff4e6;border-color:#ffd8a8}
.dg-cell--y2{color:#7048c8;background:#f3f0ff;border-color:#d0bfff}
.dg-cell--y3{color:#c2255c;background:#fff0f6;border-color:#fcc2d7}
.dg-matrix-cell:hover,.dg-matrix-cell:focus-visible{transform:scale(1.14);z-index:5;box-shadow:0 3px 10px rgba(0,0,0,.15);outline:none}
.dg-matrix-cell.is-selected{transform:scale(1.15);box-shadow:0 0 0 2px #3157d5,0 4px 12px rgba(49,87,213,.3);z-index:10;border-color:#3157d5}
.dg-matrix-cell.is-row-highlight{filter:brightness(.95);border-color:#bac8ff}
.dg-matrix-cell.is-col-highlight{filter:brightness(.95);border-color:#d0bfff}
.dg-matrix-legend{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:center;margin-top:.6rem;font-size:.72rem;color:#68707a}
.dg-matrix-legend span{display:inline-flex;align-items:center;gap:.35rem}
.dg-matrix-legend i{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid}
.dg-leg-zero{background:#fff;border-color:#ced4da}
.dg-leg-1{background:#e7f5ff;border-color:#d0ebff}
.dg-leg-y{background:#fff4e6;border-color:#ffd8a8}
.dg-leg-y2{background:#f3f0ff;border-color:#d0bfff}
.dg-leg-y3{background:#fff0f6;border-color:#fcc2d7}
.theme-dark .dg-matrix-wrap{background:#1e2430;border-color:#334155}
.theme-dark .dg-matrix-table th{color:#ced4da}
.theme-dark .dg-matrix-col-th:hover,.theme-dark .dg-matrix-col-th.is-active{background:#34294f;color:#d0bfff}
.theme-dark .dg-matrix-row-th:hover,.theme-dark .dg-matrix-row-th.is-active{background:#252f50;color:#91a7ff}
.theme-dark .dg-cell--zero{background:#252628;color:#495057;border-color:#2e3033}
.theme-dark .dg-cell--one{background:#1c2e4a;color:#74c0fc;border-color:#224270}
.theme-dark .dg-cell--y1{background:#442a18;color:#ff922b;border-color:#633c20}
.theme-dark .dg-cell--y2{background:#352352;color:#b197fc;border-color:#4d3378}
.theme-dark .dg-cell--y3{background:#4a1d2e;color:#f783ac;border-color:#6b263f}
.theme-dark .dg-matrix-cell.is-row-highlight{filter:brightness(1.15);border-color:#4263eb}
.theme-dark .dg-matrix-cell.is-col-highlight{filter:brightness(1.15);border-color:#7048c8}
.theme-dark .dg-matrix-legend{color:#adb5bd}
.dg-factor{align-items:baseline}.dg-factor__base{line-height:1}.dg-factor__exp{position:relative;top:-.32em;margin-left:0;font-size:.62em;line-height:1;vertical-align:baseline}
@media(max-width:650px){.dg-panel__head{align-items:flex-start;flex-direction:column}.dg-button-group{width:100%}.dg-mindset{grid-template-columns:1fr}.dg-mindset__arrow{transform:rotate(90deg)}.dg-mindset:not(.stage-0) .dg-mindset__arrow{transform:rotate(90deg) translateX(4px)}.dg-layer-body{justify-content:center}.dg-profile-viz{gap:.35rem}.dg-blocks i{width:38px;height:32px}.dg-pipeline{padding-bottom:1rem}}
@media(prefers-reduced-motion:reduce){.dg-panel *{transition:none!important}}

/* Evolution map and the second half of the article. */
.dg-evolution-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0}
.dg-evolution-map button,.dg-case-tabs button,.dg-segmented button,.dg-orbit-steps span{border:1px solid #d7dce2;border-radius:10px;background:#fff;color:#343a40;padding:.65rem;cursor:pointer;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.dg-evolution-map button{display:grid;gap:.18rem;text-align:left;position:relative}
.dg-evolution-map button:not(:last-child)::after{content:"→";position:absolute;right:-.47rem;top:50%;z-index:2;color:#adb5bd;transform:translateY(-50%)}
.dg-evolution-map button small{color:#68707a;font-size:.72rem}.dg-evolution-map button.active{border-color:#3157d5;background:#eef1ff;box-shadow:0 6px 18px rgba(49,87,213,.12);transform:translateY(-2px)}
.dg-evolution-detail{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;min-height:90px;padding:.9rem;border-radius:12px;background:#171a21;color:#f1f3f5}
.dg-evolution-detail strong{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#3157d5;font-size:1.1rem}.dg-evolution-detail b,.dg-evolution-detail small{display:block}.dg-evolution-detail small{color:#ced4da;margin-top:.2rem}

/* Figure 7: causal development tree of the exact backend portfolio. */
.dg-development-map{display:grid;gap:.65rem;margin-top:.8rem}.dg-development-map button{min-width:0;border:1px solid #cfd6df;border-radius:10px;background:#fff;color:#343a40;padding:.62rem .7rem;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}.dg-development-map button b,.dg-development-map button small{display:block}.dg-development-map button b{font-size:.72rem}.dg-development-map button small{margin-top:.12rem;color:#68707a;font-size:.6rem;line-height:1.3}.dg-development-map button:hover{transform:translateY(-1px)}.dg-development-map button.active{border-color:#3157d5;background:#edf2ff;box-shadow:0 0 0 2px #3157d5,0 6px 16px rgba(49,87,213,.13);transform:translateY(-2px)}.dg-development-root,.dg-development-tail{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.45rem;align-items:center}.dg-development-root>span,.dg-development-tail>span{color:#adb5bd;text-align:center}.dg-development-fork-label{display:flex;align-items:center;gap:.55rem;color:#68707a;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.dg-development-fork-label::before,.dg-development-fork-label::after{content:"";height:1px;flex:1;background:#d7dce2}.dg-development-branches{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(0,2.28fr);gap:.55rem}.dg-development-branch{display:grid;align-content:start;gap:.45rem;padding:.55rem;border:1px solid #d7dce2;border-radius:12px}.dg-development-branch>em{font-size:.57rem;font-style:normal;font-weight:800;letter-spacing:.08em}.dg-development-branch--payload{background:#f3f0ff;border-color:#d0bfff}.dg-development-branch--payload>em{color:#7048c8}.dg-development-branch--schedule{background:#fff4e6;border-color:#ffd8a8}.dg-development-branch--schedule>em{color:#c65d00}.dg-development-branch--schedule>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:.25rem;align-items:center}.dg-development-branch--schedule>div>span{color:#adb5bd;font-size:.72rem;text-align:center}.dg-development-tail{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}.dg-development-detail{display:grid;grid-template-columns:minmax(115px,.35fr) minmax(0,1fr);gap:.35rem .9rem;margin-top:.75rem;padding:.85rem 1rem;border-radius:12px;background:#171a21;color:#f1f3f5}.dg-development-detail>div{grid-row:1/4;align-self:center}.dg-development-detail span,.dg-development-detail strong{display:block}.dg-development-detail span{color:#91a7ff;font-size:.56rem;font-weight:800;letter-spacing:.09em}.dg-development-detail strong{margin-top:.16rem;font-size:.9rem}.dg-development-detail p{margin:0;color:#ced4da;font-size:.67rem;line-height:1.42}.dg-development-detail p b{color:#fff}.dg-development-map button:focus-visible{outline:3px solid rgba(49,87,213,.3);outline-offset:2px}

.dg-development-map button small{font-size:.68rem}.dg-development-branch>em{font-size:.65rem}.dg-development-branch--schedule>div{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}.dg-development-detail p{font-size:.7rem}

.dg-spmv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem;margin:1rem 0}
.dg-spmv-steps button{border:1px solid #d7dce2;border-radius:10px;background:#fff;color:#343a40;padding:.65rem .3rem;cursor:pointer;text-align:center;font-size:.74rem;font-weight:700;transition:all .25s ease}
.dg-spmv-steps button.active{background:#3157d5;border-color:#3157d5;color:#fff}

.dg-spmv-viz{display:grid;grid-template-columns:1.15fr 38px 1.25fr 38px 1.15fr;gap:.45rem;align-items:stretch;min-height:240px;margin:.8rem 0}
.dg-spmv-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:.75rem .85rem;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;box-shadow:0 2px 8px rgba(15,23,42,.03);transition:all .3s ease}
.dg-spmv-card-head{display:flex;flex-direction:column;gap:.25rem;border-bottom:1px solid #f1f5f9;padding-bottom:.4rem}
.dg-spmv-badge{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .4rem;border-radius:4px;align-self:flex-start}
.dg-spmv-badge--csr{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.dg-spmv-badge--lut{background:#fdf4ff;color:#a21caf;border:1px solid #f5d0fe}
.dg-spmv-badge--vec{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.dg-spmv-title{font-family:ui-monospace,Menlo,monospace;font-size:.86rem;font-weight:700;color:#0f172a}
.dg-spmv-title code{background:transparent;padding:0;font-size:inherit;color:inherit}

.dg-spmv-csr-list{display:flex;flex-direction:column;gap:.35rem}
.dg-spmv-csr-item{display:flex;align-items:center;justify-content:space-between;padding:.35rem .55rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:.74rem;font-family:ui-monospace,Menlo,monospace;color:#475569;transition:all .25s ease}
.dg-spmv-csr-item.is-active{background:#eff6ff;border-color:#3b82f6;color:#1d4ed8;font-weight:700;box-shadow:0 1px 4px rgba(59,130,246,.15)}
.dg-spmv-csr-src code{background:transparent;padding:0;color:inherit;font-weight:700}
.dg-spmv-csr-deg{background:#e0f2fe;color:#0369a1;padding:.1rem .35rem;border-radius:4px;font-size:.68rem;font-weight:700}
.dg-spmv-csr-item.is-active .dg-spmv-csr-deg{background:#3b82f6;color:#fff}
.dg-spmv-csr-w{color:#94a3b8;font-size:.68rem}

.dg-spmv-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center;transition:opacity .3s ease}
.dg-spmv-conn-label{font-size:.62rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dg-spmv-conn-arrow{font-size:1.4rem;font-weight:900;color:#94a3b8;line-height:1}

.dg-spmv-lut-box{display:flex;flex-direction:column;gap:.4rem;background:#faf5ff;border:1px solid #f3e8ff;border-radius:8px;padding:.5rem;text-align:center}
.dg-spmv-lut-inputs{display:flex;align-items:center;justify-content:center;gap:.4rem}
.dg-spmv-lut-field{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #e9d5ff;border-radius:6px;padding:.2rem .4rem;min-width:55px}
.dg-spmv-lut-field small{font-size:.56rem;color:#7e22ce;text-transform:uppercase}
.dg-spmv-lut-field strong{font-family:ui-monospace,Menlo,monospace;font-size:.88rem;color:#6b21a8}
.dg-spmv-lut-field--d{background:#fdf4ff;border-color:#d946ef}
.dg-spmv-lut-field--d strong{color:#c026d3}
.dg-spmv-lut-plus{font-weight:900;color:#a855f7;font-size:.9rem}
.dg-spmv-lut-op{font-size:.62rem;font-weight:700;color:#9333ea;text-transform:uppercase;letter-spacing:.04em}
.dg-spmv-lut-output{display:flex;flex-direction:column;align-items:center;background:#f0fdf4;border:1.5px solid #86efac;border-radius:6px;padding:.25rem .5rem}
.dg-spmv-lut-output small{font-size:.58rem;color:#166534;font-weight:700;text-transform:uppercase}
.dg-spmv-lut-output strong{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;color:#15803d;font-weight:800}

.dg-spmv-vec-buffer{display:flex;flex-direction:column;gap:.35rem}
.dg-spmv-vec-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem .6rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-family:ui-monospace,Menlo,monospace;font-size:.74rem;color:#64748b;transition:all .25s ease}
.dg-spmv-vec-row.is-active{background:#f0fdf4;border-color:#86efac;border-left:3px solid #16a34a;color:#15803d;font-weight:700;box-shadow:0 2px 6px rgba(22,163,74,.12)}
.dg-spmv-vec-val b{color:#16a34a;font-size:.88rem}
.dg-spmv-vec-val small{font-size:.62rem;background:#22c55e;color:#fff;padding:.05rem .25rem;border-radius:3px;margin-left:2px}
.dg-spmv-card-foot{font-size:.66rem;font-family:ui-monospace,Menlo,monospace;color:#64748b;border-top:1px solid #f1f5f9;padding-top:.35rem;text-align:center}
.dg-spmv-card-foot code{background:#f1f5f9;padding:.1rem .3rem;border-radius:4px;color:#0f172a}

.dg-spmv-viz.stage-0 .dg-spmv-card--csr{border-color:#3157d5;box-shadow:0 4px 16px rgba(49,87,213,.12)}
.dg-spmv-viz.stage-0 .dg-spmv-connector,.dg-spmv-viz.stage-0 .dg-spmv-card--lut,.dg-spmv-viz.stage-0 .dg-spmv-card--vec{opacity:.42}
.dg-spmv-viz.stage-1 .dg-spmv-card--csr{border-color:#3b82f6}
.dg-spmv-viz.stage-1 .conn-1{opacity:1}
.dg-spmv-viz.stage-1 .conn-1 .dg-spmv-conn-arrow{color:#3b82f6;transform:scale(1.15)}
.dg-spmv-viz.stage-1 .dg-spmv-card--lut{border-color:#c026d3;opacity:.95}
.dg-spmv-viz.stage-1 .conn-2,.dg-spmv-viz.stage-1 .dg-spmv-card--vec{opacity:.42}
.dg-spmv-viz.stage-2 .dg-spmv-card--csr{opacity:.6}
.dg-spmv-viz.stage-2 .conn-1{opacity:.7}
.dg-spmv-viz.stage-2 .dg-spmv-card--lut{border-color:#9333ea;box-shadow:0 4px 16px rgba(147,51,234,.15);transform:scale(1.02)}
.dg-spmv-viz.stage-2 .conn-2{opacity:1}
.dg-spmv-viz.stage-2 .conn-2 .dg-spmv-conn-arrow{color:#16a34a;transform:scale(1.15)}
.dg-spmv-viz.stage-2 .dg-spmv-card--vec{opacity:.75}
.dg-spmv-viz.stage-3 .dg-spmv-card--csr,.dg-spmv-viz.stage-3 .dg-spmv-card--lut{opacity:.6}
.dg-spmv-viz.stage-3 .conn-1,.dg-spmv-viz.stage-3 .conn-2{opacity:.7}
.dg-spmv-viz.stage-3 .dg-spmv-card--vec{border-color:#16a34a;box-shadow:0 4px 20px rgba(22,163,74,.2);transform:scale(1.02)}
.dg-spmv-viz.stage-3 .dg-spmv-vec-row.is-active{animation:dg-pulse-green .8s ease-in-out infinite alternate}
@keyframes dg-pulse-green{from{background:#f0fdf4}to{background:#dcfce7}}

.theme-dark .dg-spmv-steps button{background:#2b2c2e;color:#e9ecef;border-color:#4a4b4d}
.theme-dark .dg-spmv-steps button.active{background:#3157d5;color:#fff;border-color:#3157d5}
.theme-dark .dg-spmv-card{background:#1e2430;border-color:#334155;box-shadow:none}
.theme-dark .dg-spmv-card-head,.theme-dark .dg-spmv-card-foot{border-color:#2e3846}
.theme-dark .dg-spmv-title{color:#f1f5f9}
.theme-dark .dg-spmv-csr-item,.theme-dark .dg-spmv-vec-row{background:#171c26;border-color:#2d3748;color:#cbd5e1}
.theme-dark .dg-spmv-csr-item.is-active{background:#1e3a5f;border-color:#60a5fa;color:#93c5fd}
.theme-dark .dg-spmv-lut-box{background:#261933;border-color:#4a2b66}
.theme-dark .dg-spmv-lut-field{background:#1c1326;border-color:#582b80}
.theme-dark .dg-spmv-lut-field strong{color:#d8b4fe}
.theme-dark .dg-spmv-lut-field--d{background:#2a1435;border-color:#9333ea}
.theme-dark .dg-spmv-lut-field--d strong{color:#f0abfc}
.theme-dark .dg-spmv-lut-output{background:#142e20;border-color:#166534}
.theme-dark .dg-spmv-lut-output strong{color:#4ade80}
.theme-dark .dg-spmv-vec-row.is-active{background:#182e22;border-color:#166534;border-left-color:#22c55e;color:#86efac}
.theme-dark .dg-spmv-card-foot code{background:#252b3b;color:#91a7ff}

.dg-case-tabs{display:flex;gap:.4rem;overflow-x:auto;margin:1rem 0;padding-bottom:.2rem}.dg-case-tabs button{min-width:max-content;font-size:.76rem}.dg-case-tabs button.active{background:#3157d5;border-color:#3157d5;color:#fff}
.dg-dispatcher-tree{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:.4rem;align-items:stretch}.dg-dispatcher-tree>div{display:grid;align-content:center;gap:.2rem;padding:.65rem;border:1px solid #d7dce2;border-radius:10px;background:#fff;opacity:.4;transition:.3s}.dg-dispatcher-tree>div.active{opacity:1;border-color:#f08c00;background:#fff4e6;transform:translateY(-3px)}.dg-dispatcher-tree>div.passed{opacity:1;border-color:#2f9e44;background:#ebfbee}.dg-dispatcher-tree b{font-size:.78rem}.dg-dispatcher-tree small{font-size:.66rem;color:#68707a}.dg-dispatcher-tree>span{align-self:center;color:#adb5bd}.dg-dispatch-result{opacity:1!important;border-color:#3157d5!important;background:#eef1ff!important}.dg-dispatch-result strong{color:#3157d5;font-size:.9rem}

.dg-segmented{display:flex;padding:3px;background:#e9ecef;border-radius:999px}.dg-segmented button{border:0;border-radius:999px;padding:.4rem .7rem;background:transparent;font-weight:700;font-size:.78rem}.dg-segmented button.active{background:#fff;color:#3157d5;box-shadow:0 2px 8px rgba(33,37,41,.12)}
.dg-bench-axis{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;margin:1rem 0 .5rem;font-size:.67rem;color:#868e96}.dg-bench-axis span:last-child{text-align:right}.dg-bench-axis b{color:#343a40}.dg-benchmark-bars{display:grid;gap:.55rem}.dg-bench-row{display:grid;grid-template-columns:88px 1fr 52px;gap:.6rem;align-items:center}.dg-bench-row>span{font-size:.78rem}.dg-bench-track{position:relative;height:18px;border-radius:999px;background:linear-gradient(90deg,#ffe3e3 0 27%,#f1f3f5 27% 30%,#d3f9d8 30% 100%);overflow:hidden}.dg-bench-track::after{content:"";position:absolute;left:28.57%;top:0;bottom:0;width:2px;background:#495057}.dg-bench-fill{height:100%;width:var(--bar);background:#3157d5;border-radius:999px;transform-origin:left;animation:dg-grow .55s ease both}.dg-bench-row.slower .dg-bench-fill{background:#e8590c}.dg-bench-row strong{font-size:.8rem;text-align:right}@keyframes dg-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.dg-evolution-slider{width:100%;accent-color:#3157d5;margin:1.1rem 0}.dg-recap-card{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;min-height:130px;padding:1rem;border:1px solid #bac8ff;border-radius:14px;background:linear-gradient(135deg,#edf2ff,#fff)}.dg-recap-number{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:#3157d5;color:#fff;font-size:1.5rem;font-weight:800}.dg-recap-card h4{margin:0 0 .3rem}.dg-recap-card p{margin:.2rem 0;color:#68707a}.dg-recap-card b{color:#3157d5}.dg-recap-scale{display:flex;justify-content:space-between;color:#868e96;font-size:.7rem;margin-top:.35rem}

.dg-button:focus-visible,.dg-evolution-map button:focus-visible,.dg-case-tabs button:focus-visible,.dg-segmented button:focus-visible{outline:3px solid rgba(49,87,213,.3);outline-offset:2px}
.theme-dark .dg-panel{background:linear-gradient(145deg,#252627,#202122);border-color:#444}.theme-dark .dg-callout,[theme=dark] .dg-callout{border-left-color:#59c5ec;background-color:rgba(89,197,236,.2);border-top:none;border-right:none;border-bottom:none}.theme-dark .dg-evolution-map button,.theme-dark .dg-development-map button,.theme-dark .dg-case-tabs button,.theme-dark .dg-orbit-key,.theme-dark .dg-spmv-box,.theme-dark .dg-dispatcher-tree>div{background:#2b2c2e;color:#e9ecef;border-color:#4a4b4d}.theme-dark .dg-evolution-map button small,.theme-dark .dg-development-map button small,.theme-dark .dg-orbit-key small,.theme-dark .dg-orbit-key span,.theme-dark .dg-spmv-box small,.theme-dark .dg-dispatcher-tree small{color:#adb5bd}.theme-dark .dg-development-map button.active{background:#252f50;border-color:#91a7ff}.theme-dark .dg-development-branch--payload{background:#34294f;border-color:#6741a5}.theme-dark .dg-development-branch--schedule{background:#49301f;border-color:#a54f00}.theme-dark .dg-development-fork-label{color:#adb5bd}.theme-dark .dg-development-fork-label::before,.theme-dark .dg-development-fork-label::after{background:#4a4b4d}.theme-dark .dg-result{background:#252627;border-color:#555}.theme-dark .dg-segmented{background:#343a40}.theme-dark .dg-segmented button.active{background:#252627}.theme-dark .dg-recap-card{background:linear-gradient(135deg,#252b42,#252627);border-color:#495b9c}

@media(max-width:850px){.dg-evolution-map{grid-template-columns:repeat(2,1fr)}.dg-evolution-map button::after{display:none}.dg-spmv-viz{grid-template-columns:1fr;gap:.65rem}.dg-spmv-connector{flex-direction:row;gap:.5rem}.dg-spmv-conn-arrow{transform:rotate(90deg)}.dg-dispatcher-tree{grid-template-columns:1fr}.dg-dispatcher-tree>span{transform:rotate(90deg);justify-self:center}.dg-bench-row{grid-template-columns:74px 1fr 46px}}
@media(max-width:520px){.dg-evolution-map{grid-template-columns:1fr}.dg-spmv-steps{grid-template-columns:repeat(2,1fr)}.dg-recap-card{grid-template-columns:1fr}.dg-recap-number{width:46px;height:46px}.dg-case-tabs{margin-right:-.4rem}}

/* Interaction QA: panel-aware layout, accessible controls, and complete states. */
.dg-panel{container-type:inline-size}
.dg-mindset-steps button{flex:1;min-width:max-content;border:0;padding:.35rem .55rem;border-radius:999px;background:#e9ecef;color:#68707a;text-align:center;font-size:.72rem;font-weight:700;cursor:pointer;transition:.25s}.dg-mindset-steps button.active{background:#3157d5;color:#fff}
.dg-dispatcher-tree>div.failed{opacity:1;border-color:#e03131;background:#fff5f5}
.dg-mindset-steps button:focus-visible,.dg-spmv-steps button:focus-visible{outline:3px solid rgba(49,87,213,.3);outline-offset:2px}
.theme-dark .dg-mindset-steps button,.theme-dark .dg-pipe-node{background:#2b2c2e;color:#e9ecef;border-color:#4a4b4d}.theme-dark .dg-mindset-steps button.active{background:#3157d5;color:#fff;border-color:#3157d5}.theme-dark .dg-dispatcher-tree>div.failed{background:#42252a;border-color:#e03131}.theme-dark .dg-muted,.theme-dark .dg-status,.theme-dark .dg-pipe-node small{color:#adb5bd}
@container (max-width:650px){.dg-mindset{grid-template-columns:1fr}.dg-mindset__arrow{transform:rotate(90deg)}.dg-mindset:not(.stage-0) .dg-mindset__arrow{transform:rotate(90deg) translateX(4px)}.dg-spmv-viz{grid-template-columns:1fr;gap:.65rem}.dg-spmv-connector{flex-direction:row;gap:.5rem}.dg-spmv-conn-arrow{transform:rotate(90deg)}.dg-dispatcher-tree{grid-template-columns:1fr}.dg-dispatcher-tree>span{transform:rotate(90deg);justify-self:center}.dg-bench-row{grid-template-columns:74px 1fr 46px}}

/* Figure 8: exact ordered decision tree used by the auto dispatcher. */
.dg-regime-inputs{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(90px,.55fr);gap:.55rem;margin-top:.8rem}.dg-regime-inputs label{display:grid;gap:.28rem}.dg-regime-inputs label span{font-size:.7rem;font-weight:800;color:#495057}.dg-regime-inputs input{min-width:0;border:1px solid #cfd6df;border-radius:8px;background:#fff;color:#212529;padding:.55rem .65rem;font:inherit;font-size:.8rem}.dg-regime-inputs input:focus{border-color:#3157d5;outline:3px solid rgba(49,87,213,.14)}.dg-regime-error{min-height:1.2em;margin-top:.3rem;color:#c92a2a;font-size:.7rem}.dg-regime-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.45rem 0 .9rem}.dg-regime-metrics>div{display:grid;gap:.08rem;padding:.55rem .65rem;border:1px solid #d7dce2;border-radius:9px;background:#fff}.dg-regime-metrics span{color:#868e96;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em}.dg-regime-metrics strong{color:#3157d5;font-size:.9rem}.dg-regime-metrics strong.is-yes{color:#2b8a3e}.dg-regime-metrics strong.is-no{color:#e03131}.dg-regime-metrics small{color:#868e96;font-size:.62rem}
.dg-regime-tree{display:grid;gap:0;padding:.9rem;border:1px solid #d7dce2;border-radius:14px;background:#fff}.dg-regime-tree-row{display:grid;grid-template-columns:minmax(260px,1fr) 64px minmax(160px,.62fr);grid-template-areas:"gate yes leaf" "no . .";gap:.25rem .55rem;align-items:center}.dg-regime-gate{grid-area:gate;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.62rem .7rem;border:2px solid #d7dce2;border-radius:10px;background:#f8f9fa;color:#343a40;transition:border-color .25s,background .25s,opacity .25s,transform .25s}.dg-regime-gate>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e9ecef;color:#68707a;font-size:.72rem;font-weight:800}.dg-regime-gate b,.dg-regime-gate small,.dg-regime-leaf b,.dg-regime-leaf small,.dg-backend-legend b,.dg-backend-legend small{display:block}.dg-regime-gate b{font-size:.76rem}.dg-regime-gate small{margin-top:.12rem;color:#68707a;font-size:.64rem;line-height:1.35}.dg-regime-gate>strong{min-width:3.2em;color:#adb5bd;font-size:.68rem;text-align:right}.dg-regime-yes{grid-area:yes;color:#adb5bd;font-size:.65rem;font-weight:800;text-align:center}.dg-regime-yes::after{content:" →"}.dg-regime-no{grid-area:no;justify-self:center;min-height:1.2rem;padding:.12rem .45rem .22rem;border-left:2px dashed #ced4da;color:#adb5bd;font-size:.62rem}.dg-regime-leaf{grid-area:leaf;padding:.55rem .65rem;border:1px solid var(--backend);border-left-width:4px;border-radius:9px;background:var(--backend-bg);color:var(--backend);opacity:.38;transition:opacity .25s,transform .25s,box-shadow .25s}.dg-regime-leaf b{font-size:.76rem}.dg-regime-leaf small{margin-top:.12rem;color:#5f6770;font-size:.62rem;line-height:1.3}.dg-regime-tree-row[data-state="rejected"] .dg-regime-gate{border-color:#f08c00;background:#fff9db}.dg-regime-tree-row[data-state="rejected"] .dg-regime-gate>strong,.dg-regime-tree-row[data-state="rejected"] .dg-regime-no{color:#c65d00}.dg-regime-tree-row[data-state="rejected"] .dg-regime-no{border-color:#f08c00}.dg-regime-tree-row[data-state="matched"] .dg-regime-gate{border-color:#3157d5;background:#edf2ff;transform:translateX(2px)}.dg-regime-tree-row[data-state="matched"] .dg-regime-gate>strong,.dg-regime-tree-row[data-state="matched"] .dg-regime-yes{color:#3157d5}.dg-regime-tree-row[data-state="matched"] .dg-regime-leaf{opacity:1;transform:translateX(2px);box-shadow:0 5px 16px rgba(49,87,213,.14)}.dg-regime-tree-row[data-state="skipped"]{opacity:.46}.dg-regime-baseline-row{display:grid;grid-template-columns:minmax(260px,1fr) 64px minmax(160px,.62fr);gap:.55rem}.dg-regime-baseline-row .dg-regime-leaf{grid-area:auto;grid-column:1;opacity:.38;text-align:center}.dg-regime-baseline-row .dg-regime-leaf.active{opacity:1;box-shadow:0 5px 16px rgba(73,80,87,.16)}
.dg-backend--spmv{--backend:#3157d5;--backend-bg:#edf2ff}.dg-backend--layer{--backend:#7048c8;--backend-bg:#f3f0ff}.dg-backend--lazy{--backend:#087f5b;--backend-bg:#e6fcf5}.dg-backend--grouped{--backend:#c65d00;--backend-bg:#fff4e6}.dg-backend--baseline{--backend:#495057;--backend-bg:#f1f3f5}.dg-regime-readout{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;align-items:center;margin-top:.75rem;padding:.8rem 1rem;border-radius:11px;background:#171a21;color:#fff}.dg-regime-readout span{color:#adb5bd;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em}.dg-regime-readout strong{font-size:1rem}.dg-regime-readout p{grid-column:1/-1;margin:.15rem 0 0;color:#ced4da;font-size:.72rem;line-height:1.4}.dg-backend-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;margin-top:.65rem}.dg-backend-legend-title{grid-column:1/-1;color:#68707a;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.dg-backend-legend button{min-width:0;padding:.5rem .55rem;border:1px solid var(--backend);border-top-width:3px;border-radius:8px;background:var(--backend-bg);color:var(--backend);font:inherit;text-align:left;cursor:pointer}.dg-backend-legend b{font-size:.66rem}.dg-backend-legend small{margin-top:.12rem;color:#5f6770;font-size:.57rem;line-height:1.3}.dg-backend-legend button:hover{transform:translateY(-1px)}.dg-backend-legend button.active{box-shadow:0 0 0 2px var(--backend);transform:translateY(-1px)}.dg-backend-legend button:focus-visible{outline:3px solid rgba(49,87,213,.3);outline-offset:2px}
.dg-regime-presets-extra{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.75rem;padding-top:.65rem;border-top:1px dashed #d7dce2}
.dg-regime-presets-title{font-size:.66rem;font-weight:800;color:#68707a;text-transform:uppercase;letter-spacing:.06em}
.dg-regime-pill-group{display:flex;gap:.4rem;flex-wrap:wrap}
.dg-regime-pill{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;font-weight:700;color:#343a40;background:#f8f9fa;border:1px solid #ced4da;border-radius:6px;padding:.22rem .55rem;cursor:pointer;transition:all .2s ease}
.dg-regime-pill:hover{background:#e9ecef;color:#212529;border-color:#adb5bd}
.dg-regime-pill.active{background:#3157d5;color:#fff;border-color:#3157d5;box-shadow:0 0 0 2px rgba(49,87,213,.2)}
.theme-dark .dg-regime-presets-extra{border-top-color:#4a4b4d}
.theme-dark .dg-regime-presets-title{color:#ced4da}
.theme-dark .dg-regime-pill{background:#2b2c2e;border-color:#4a4b4d;color:#e9ecef}
.theme-dark .dg-regime-pill:hover{background:#343a40;color:#fff;border-color:#68707a}
.theme-dark .dg-regime-pill.active{background:#91a7ff;color:#1e2430;border-color:#91a7ff}
.theme-dark .dg-regime-inputs label span{color:#ced4da}.theme-dark .dg-regime-inputs input,.theme-dark .dg-regime-metrics>div,.theme-dark .dg-regime-tree{background:#2b2c2e;color:#e9ecef;border-color:#4a4b4d}.theme-dark .dg-regime-gate{background:#252627;color:#e9ecef;border-color:#4a4b4d}.theme-dark .dg-regime-gate>span{background:#343a40;color:#ced4da}.theme-dark .dg-regime-gate small,.theme-dark .dg-regime-leaf small,.theme-dark .dg-backend-legend small{color:#ced4da}.theme-dark .dg-regime-tree-row[data-state="rejected"] .dg-regime-gate{background:#49301f}.theme-dark .dg-regime-tree-row[data-state="matched"] .dg-regime-gate{background:#252f50}.theme-dark .dg-backend--spmv{--backend:#91a7ff;--backend-bg:#252f50}.theme-dark .dg-backend--layer{--backend:#b197fc;--backend-bg:#34294f}.theme-dark .dg-backend--lazy{--backend:#63e6be;--backend-bg:#193d34}.theme-dark .dg-backend--grouped{--backend:#ffa94d;--backend-bg:#49301f}.theme-dark .dg-backend--baseline{--backend:#ced4da;--backend-bg:#343a40}
@container (max-width:650px){.dg-development-branches{grid-template-columns:1fr}.dg-development-branch--schedule>div{grid-template-columns:1fr}.dg-development-branch--schedule>div>span{transform:rotate(90deg)}.dg-development-tail{grid-template-columns:1fr}.dg-development-tail>span{transform:rotate(90deg)}.dg-development-detail{grid-template-columns:1fr}.dg-development-detail>div{grid-row:auto}.dg-regime-inputs{grid-template-columns:1fr 110px}.dg-regime-metrics{grid-template-columns:1fr 1fr}.dg-regime-metrics>div:first-child{grid-column:1/-1}.dg-regime-tree{padding:.65rem}.dg-regime-tree-row{grid-template-columns:1fr;grid-template-areas:"gate" "yes" "leaf" "no"}.dg-regime-yes{text-align:left;padding-left:1rem}.dg-regime-yes::after{content:" ↓"}.dg-regime-no{justify-self:start;margin-left:1rem}.dg-regime-baseline-row{grid-template-columns:1fr}.dg-regime-baseline-row .dg-regime-leaf{grid-column:1}.dg-backend-legend{grid-template-columns:1fr 1fr}.dg-regime-readout{grid-template-columns:1fr}.dg-regime-readout p{grid-column:1}}

/* Figure 6: Memory Storage Layout (HashMap vs OrbitKey) */
.dg-storage-viz{margin:.8rem 0;display:flex;flex-direction:column;gap:.85rem}
.dg-storage-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:768px){.dg-storage-grid{grid-template-columns:1fr}}
.dg-storage-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.dg-storage-card--hashmap{border-top:3.5px solid #e03131}
.dg-storage-card--orbit{border-top:3.5px solid #2b8a3e}
.dg-storage-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem}
.dg-storage-tag{font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .5rem;border-radius:4px}
.dg-storage-tag--hashmap{background:#fff5f5;color:#c92a2a}
.dg-storage-tag--orbit{background:#ebfbee;color:#2b8a3e}
.dg-storage-card-title{font-size:.92rem;font-weight:700;color:#1e293b}
.dg-powers-wrap{display:flex;flex-direction:column;gap:.3rem;background:#f8fafc;padding:.55rem;border-radius:8px;border:1px solid #e2e8f0}
.dg-powers-label{font-size:.68rem;font-weight:700;color:#64748b;display:flex;justify-content:space-between}
.dg-powers-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.dg-powers-cell{background:#fff;border:1px solid #cbd5e1;border-radius:4px;padding:.25rem .1rem;text-align:center;display:flex;flex-direction:column;gap:1px}
.dg-powers-cell small{font-size:.55rem;color:#94a3b8;font-weight:600}
.dg-powers-cell strong{font-size:.78rem;color:#64748b;font-family:ui-monospace,Menlo,monospace}
.dg-powers-cell.active{background:#ffe3e3;border-color:#ff8787}
.dg-powers-cell.active strong{color:#c92a2a;font-weight:800}
.dg-buckets-wrap{display:flex;flex-direction:column;gap:.35rem}
.dg-buckets-list{display:flex;flex-wrap:wrap;gap:.35rem;max-height:145px;overflow-y:auto;padding:.35rem;background:#f8fafc;border-radius:8px;border:1px dashed #cbd5e1}
.dg-bucket-item{display:flex;align-items:center;gap:.35rem;background:#fff;border:1px solid #ffc9c9;border-radius:6px;padding:.22rem .4rem;font-size:.7rem;color:#495057;font-family:ui-monospace,Menlo,monospace}
.dg-bucket-item b{color:#c92a2a}
.dg-bucket-item span{color:#2b8a3e;font-weight:700;background:#edf2ff;padding:0 .25rem;border-radius:3px}
.dg-bucket-item small{font-size:.62rem;color:#868e96}
.dg-orbit-prep{display:flex;flex-direction:column;gap:.35rem;background:#f8fafc;padding:.55rem;border-radius:8px;border:1px solid #e2e8f0}
.dg-orbit-step-row{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#334155}
.dg-orbit-step-tag{font-size:.6rem;font-weight:700;color:#64748b;text-transform:uppercase;min-width:62px}
.dg-orbit-val-badge{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;font-weight:800;color:#2b8a3e;background:#d3f9d8;border:1px solid #8ce99a;padding:.15rem .5rem;border-radius:5px}
.dg-flat-ram-wrap{display:flex;flex-direction:column;gap:.35rem}
.dg-flat-ram-strip{display:flex;gap:3px;padding:.4rem;background:#f8fafc;border-radius:8px;border:1px solid #cbd5e1;overflow-x:auto}
.dg-ram-slot{min-width:48px;height:50px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.65rem;color:#94a3b8;flex:1}
.dg-ram-slot.is-orbit{background:#d3f9d8;border:1.8px solid #2b8a3e;color:#2b8a3e;box-shadow:0 2px 8px rgba(43,138,62,.2)}
.dg-ram-slot.is-orbit strong{font-size:.92rem;color:#1b3820}
.dg-ram-slot.is-orbit small{color:#2b8a3e;font-weight:700}
.dg-heap-canvas{background:#fdf2f2;border:1.5px dashed #fca5a5;border-radius:10px;padding:.55rem;display:flex;flex-direction:column;gap:.45rem}
.dg-heap-bar{display:flex;align-items:center;justify-content:space-between;font-size:.65rem;font-weight:700;color:#991b1b;border-bottom:1px dashed #fca5a5;padding-bottom:.3rem}
.dg-heap-bar code{color:#b91c1c;background:#fff;padding:.1rem .35rem;border-radius:4px;border:1px solid #fecaca}
.dg-heap-rows{display:flex;flex-direction:column;gap:.35rem}
.dg-heap-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #fecaca;border-left:3.5px solid #dc2626;border-radius:6px;padding:.35rem .75rem;box-shadow:0 1px 3px rgba(220,38,38,.05)}
.dg-heap-nums{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.dg-heap-nums code{background:transparent;padding:0;font-family:inherit;font-size:inherit}
.dg-heap-nums code b{color:#c53030;font-weight:800}
.dg-heap-nums code i{color:#94a3b8;font-style:normal}
.dg-heap-val{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;font-weight:800;color:#16a34a;background:#f0fdf4;padding:.1rem .45rem;border-radius:4px;border:1px solid #bbf7d0;white-space:nowrap}
.dg-orbit-canvas{background:#f0fdf4;border:1.5px dashed #86efac;border-radius:10px;padding:.55rem;display:flex;flex-direction:column;gap:.45rem}
.dg-orbit-bar{display:flex;align-items:center;justify-content:space-between;font-size:.65rem;font-weight:700;color:#166534;border-bottom:1px dashed #86efac;padding-bottom:.3rem}
.dg-orbit-bar code{color:#15803d;background:#fff;padding:.1rem .35rem;border-radius:4px;border:1px solid #bbf7d0}
.dg-orbit-rows{display:flex;flex-direction:column;gap:.35rem}
.dg-orbit-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e2e8f0;border-left:3.5px solid #cbd5e1;border-radius:6px;padding:.35rem .75rem;box-shadow:0 1px 2px rgba(0,0,0,.03);opacity:.65;transition:.2s}
.dg-orbit-row.is-active{opacity:1;border-color:#86efac;border-left:3.5px solid #16a34a;background:#f0fdf4;box-shadow:0 2px 8px rgba(22,163,74,.15)}
.dg-orbit-slot-id{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;font-weight:700;color:#64748b;min-width:68px}
.dg-orbit-row.is-active .dg-orbit-slot-id{color:#15803d}
.dg-orbit-slot-key{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;font-weight:700;letter-spacing:.05em;flex:1;text-align:center}
.dg-orbit-slot-key code{background:transparent;padding:0;font-family:inherit;font-size:inherit}
.dg-orbit-slot-key code b{color:#15803d;font-weight:800}
.dg-orbit-slot-key code i{color:#64748b;font-style:normal;font-size:.72rem;margin-left:.3rem}
.dg-orbit-slot-val{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;font-weight:700;color:#94a3b8;padding:.08rem .4rem;border-radius:4px;white-space:nowrap}
.dg-orbit-slot-val.is-active{font-size:.8rem;font-weight:800;color:#16a34a;background:#fff;border:1px solid #86efac;box-shadow:0 1px 3px rgba(22,163,74,.1)}
.dg-orbit-slot-val small{font-size:.6rem;background:#16a34a;color:#fff;padding:.05rem .25rem;border-radius:3px;margin-left:2px}
.dg-storage-metric{display:flex;align-items:center;justify-content:space-between;padding:.45rem .65rem;border-radius:6px;font-size:.75rem;font-weight:700}
.dg-storage-metric--hashmap{background:#fff5f5;color:#c92a2a;border:1px solid #ffc9c9}
.dg-storage-metric--orbit{background:#ebfbee;color:#2b8a3e;border:1px solid #b2f2bb}
.theme-dark .dg-storage-card{background:#1e2430;border-color:#334155}
.theme-dark .dg-storage-card-title{color:#f1f5f9}
.theme-dark .dg-heap-canvas{background:#231518;border-color:#7f1d1d}
.theme-dark .dg-heap-bar{border-color:#7f1d1d;color:#fca5a5}
.theme-dark .dg-heap-bar code{background:#2f181c;border-color:#991b1b;color:#fca5a5}
.theme-dark .dg-heap-row{background:#2a171b;border-color:#7f1d1d;border-left-color:#ef4444}
.theme-dark .dg-heap-nums{color:#f1f5f9}
.theme-dark .dg-heap-nums code b{color:#fca5a5}
.theme-dark .dg-heap-nums code i{color:#64748b}
.theme-dark .dg-heap-val{background:#142e20;border-color:#166534;color:#4ade80}
.theme-dark .dg-orbit-canvas{background:#112218;border-color:#166534}
.theme-dark .dg-orbit-bar{border-color:#166534;color:#86efac}
.theme-dark .dg-orbit-bar code{background:#1a3826;border-color:#22c55e;color:#86efac}
.theme-dark .dg-orbit-row{background:#1a221d;border-color:#2e3831;border-left-color:#475569}
.theme-dark .dg-orbit-row.is-active{background:#182e22;border-color:#166534;border-left-color:#22c55e}
.theme-dark .dg-orbit-slot-id{color:#94a3b8}
.theme-dark .dg-orbit-row.is-active .dg-orbit-slot-id{color:#86efac}
.theme-dark .dg-orbit-slot-key{color:#cbd5e1}
.theme-dark .dg-orbit-slot-key code b{color:#86efac}
.theme-dark .dg-orbit-slot-key code i{color:#94a3b8}
.theme-dark .dg-orbit-slot-val{color:#64748b}
.theme-dark .dg-orbit-slot-val.is-active{background:#142e20;border-color:#166534;color:#4ade80}
.theme-dark .dg-storage-metric--hashmap{background:#3b1e22;border-color:#742a2a;color:#ff8787}
.theme-dark .dg-storage-metric--orbit{background:#193d34;border-color:#20c997;color:#63e6be}

/* Figure 1: Paradigm Shift: (Partition, Powers) -> (Col-Profile, orb) */
.dg-paradigm-viz{margin:.8rem 0;display:flex;flex-direction:column;gap:.85rem}
.dg-paradigm-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;background:#f8fafc;padding:.6rem .8rem;border-radius:10px;border:1px solid #e2e8f0}
.dg-paradigm-presets{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.dg-paradigm-presets span{font-size:.68rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.dg-paradigm-pills{display:flex;gap:.35rem}
.dg-paradigm-pill{border:1px solid #cfd6df;background:#fff;color:#334155;border-radius:6px;padding:.3rem .6rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:.2s}
.dg-paradigm-pill:hover{border-color:#3157d5;color:#3157d5}
.dg-paradigm-pill.active{background:#3157d5;color:#fff;border-color:#3157d5;box-shadow:0 2px 6px rgba(49,87,213,.25)}
.dg-paradigm-views{display:flex;gap:.3rem}
.dg-paradigm-view-btn{border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:6px;padding:.3rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:.2s}
.dg-paradigm-view-btn.active{background:#1e293b;color:#fff;border-color:#1e293b}

.dg-paradigm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;transition:all .3s ease}
.dg-paradigm-grid.view-legacy{grid-template-columns:1fr}
.dg-paradigm-grid.view-legacy .dg-paradigm-card--modern{display:none}
.dg-paradigm-grid.view-modern{grid-template-columns:1fr}
.dg-paradigm-grid.view-modern .dg-paradigm-card--legacy{display:none}

.dg-paradigm-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:.95rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:0 4px 16px rgba(15,23,42,.04);position:relative}
.dg-paradigm-card--legacy{border-top:4px solid #e03131}
.dg-paradigm-card--modern{border-top:4px solid #2b8a3e}

.dg-paradigm-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;padding-bottom:.4rem;border-bottom:1px solid #edf2f7}
.dg-paradigm-tag{font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .55rem;border-radius:5px}
.dg-paradigm-tag--legacy{background:#fff5f5;color:#c92a2a;border:1px solid #ffc9c9}
.dg-paradigm-tag--modern{background:#ebfbee;color:#2b8a3e;border:1px solid #b2f2bb}
.dg-paradigm-pair{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.98rem;font-weight:800;color:#0f172a}

.dg-paradigm-section{display:flex;flex-direction:column;gap:.35rem;background:#f8fafc;padding:.6rem .75rem;border-radius:8px;border:1px solid #e2e8f0}
.dg-paradigm-section-title{font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;justify-content:space-between}
.dg-paradigm-section-badge{font-size:.62rem;padding:.1rem .35rem;border-radius:4px;font-weight:700}
.dg-paradigm-section-badge--legacy{background:#ffe3e3;color:#c92a2a}
.dg-paradigm-section-badge--modern{background:#d3f9d8;color:#2b8a3e}

.dg-paradigm-mini-diagram{display:flex;align-items:center;gap:.6rem;padding:.25rem 0}
.dg-paradigm-young-box{display:flex;flex-direction:column;gap:2px}
.dg-paradigm-young-row{display:flex;gap:2px}
.dg-paradigm-young-cell{width:18px;height:18px;background:#e2e8f0;border:1px solid #cbd5e1;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#475569}
.dg-paradigm-young-cell.is-skew{background:#ffe3e3;border-color:#ff8787;color:#c92a2a}
.dg-paradigm-young-cell.is-new{background:#d3f9d8;border-color:#51cf66;color:#2b8a3e}

.dg-paradigm-profile-box{display:flex;align-items:flex-end;gap:5px;height:45px;padding:2px 6px;background:#fff;border:1px solid #cbd5e1;border-radius:6px}
.dg-paradigm-profile-col{width:22px;background:#3157d5;border-radius:3px 3px 0 0;display:flex;align-items:flex-end;justify-content:center;color:#fff;font-size:.65rem;font-weight:800;padding-bottom:2px;transition:height .3s}
.dg-paradigm-profile-col.is-diff{background:#2b8a3e}

.dg-paradigm-hash-entries{display:flex;flex-wrap:wrap;gap:.3rem;max-height:85px;overflow-y:auto;padding:.25rem;background:#fff;border-radius:6px;border:1px dashed #cbd5e1}
.dg-paradigm-entry-item{font-family:ui-monospace,Menlo,monospace;font-size:.68rem;padding:.15rem .35rem;border-radius:4px;background:#fff5f5;border:1px solid #ffc9c9;color:#c92a2a;display:inline-flex;align-items:center;gap:3px}
.dg-paradigm-entry-item span{color:#2b8a3e;font-weight:700}

.dg-paradigm-orbit-box{display:flex;align-items:center;gap:.6rem;background:#fff;padding:.4rem .6rem;border-radius:6px;border:1px solid #cbd5e1}
.dg-paradigm-orbit-badge{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;font-weight:800;padding:.18rem .55rem;background:#ebfbee;border:1.5px solid #51cf66;color:#1b3820;border-radius:6px}
.dg-paradigm-orbit-vector{display:flex;gap:3px;align-items:center;overflow-x:auto}
.dg-paradigm-vec-slot{min-width:34px;height:32px;border:1px solid #cbd5e1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-family:ui-monospace,Menlo,monospace;color:#64748b}
.dg-paradigm-vec-slot.is-active{background:#2b8a3e;border-color:#2b8a3e;color:#fff;font-weight:800;box-shadow:0 2px 6px rgba(43,138,62,.3)}

.dg-paradigm-bridge{background:#f1f5f9;border-left:3.5px solid #475569;border-radius:0 8px 8px 0;padding:.55rem .7rem;font-size:.74rem;color:#334155;line-height:1.4}
.dg-paradigm-bridge b{color:#0f172a}
.dg-paradigm-bridge--modern{border-left-color:#2b8a3e;background:#ebfbee;color:#1e4620}
.dg-paradigm-bridge--modern b{color:#0b3810}
.dg-paradigm-bridge--legacy{border-left-color:#e03131;background:#fff5f5;color:#491217}
.dg-paradigm-bridge--legacy b{color:#67111a}

.dg-paradigm-footer-banner{background:linear-gradient(135deg,#edf2ff,#ebfbee);border:1.5px solid #bac8ff;border-radius:10px;padding:.75rem 1rem;font-size:.78rem;color:#1e293b;line-height:1.45;display:flex;align-items:center;gap:.75rem}
.dg-paradigm-footer-icon{font-size:1.4rem;color:#3157d5;flex-shrink:0}

.theme-dark .dg-paradigm-toolbar{background:#171c26;border-color:#334155}
.theme-dark .dg-paradigm-pill,.theme-dark .dg-paradigm-view-btn{background:#252b3b;border-color:#475569;color:#cbd5e1}
.theme-dark .dg-paradigm-pill.active{background:#3157d5;border-color:#3157d5;color:#fff}
.theme-dark .dg-paradigm-view-btn.active{background:#475569;color:#fff;border-color:#475569}
.theme-dark .dg-paradigm-card{background:#1e2430;border-color:#334155}
.theme-dark .dg-paradigm-card-head{border-color:#334155}
.theme-dark .dg-paradigm-pair{color:#f1f5f9}
.theme-dark .dg-paradigm-section{background:#171c26;border-color:#334155}
.theme-dark .dg-paradigm-young-cell{background:#252b3b;border-color:#475569;color:#cbd5e1}
.theme-dark .dg-paradigm-young-cell.is-skew{background:#491217;border-color:#742a2a;color:#ff8787}
.theme-dark .dg-paradigm-profile-box,.theme-dark .dg-paradigm-hash-entries,.theme-dark .dg-paradigm-orbit-box{background:#10141d;border-color:#334155}
.theme-dark .dg-paradigm-entry-item{background:#2a1619;border-color:#5c1d24;color:#ff8787}
.theme-dark .dg-paradigm-entry-item span{color:#63e6be}
.theme-dark .dg-paradigm-orbit-badge{background:#193d34;border-color:#20c997;color:#63e6be}
.theme-dark .dg-paradigm-vec-slot{border-color:#475569;color:#94a3b8}
.theme-dark .dg-paradigm-vec-slot.is-active{background:#20c997;border-color:#20c997;color:#0b3810}
.theme-dark .dg-paradigm-bridge--legacy{background:#2a1619;border-color:#e03131;color:#ffc9c9}
.theme-dark .dg-paradigm-bridge--legacy b{color:#fff}
.theme-dark .dg-paradigm-bridge--modern{background:#162c22;border-color:#20c997;color:#c3fae8}
.theme-dark .dg-paradigm-bridge--modern b{color:#fff}
.theme-dark .dg-paradigm-footer-banner{background:linear-gradient(135deg,#1c2338,#162c24);border-color:#3b5bdb;color:#e2e8f0}
@container (max-width:620px){.dg-paradigm-grid{grid-template-columns:1fr}}

/* Minimal Paradigm Shift Diagram (Figure 1) */
.dg-shift-flow{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.6rem 0}
.dg-shift-box{flex:1;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.dg-shift-box--legacy{border-top:4px solid #e03131}
.dg-shift-box--modern{border-top:4px solid #2b8a3e}
.dg-shift-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem;padding-bottom:.35rem;border-bottom:1px solid #edf2f7}
.dg-shift-title{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.02rem;font-weight:800;color:#0f172a}
.dg-shift-tag{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.16rem .48rem;border-radius:4px}
.dg-shift-tag--legacy{background:#fff5f5;color:#c92a2a;border:1px solid #ffc9c9}
.dg-shift-body{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.dg-shift-item{display:inline-flex;align-items:center}
.dg-shift-item code{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;background:#f1f5f9;padding:.2rem .55rem;border-radius:6px;color:#3157d5;font-weight:700;white-space:nowrap}
.dg-shift-note{font-size:.76rem;font-weight:600;padding:.45rem .65rem;border-radius:8px;display:flex;flex-direction:column;gap:.3rem;line-height:1.4}
.dg-shift-note div{display:block}
.dg-shift-note--legacy{background:#fff5f5;color:#c92a2a;border:1px dashed #ffc9c9}
.dg-shift-note--legacy div b{color:#a61e1e}
.dg-shift-note--modern{background:#ebfbee;color:#2b8a3e;border:1px dashed #b2f2bb}
.dg-shift-note--modern div b{color:#1e6b30}

.dg-shift-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:170px;text-align:center;padding:0 .2rem}
.dg-shift-bridge-pill{font-size:.69rem;color:#475569;background:#f8fafc;border:1px solid #cfd6df;border-radius:8px;padding:.4rem .6rem;line-height:1.45;margin-bottom:.3rem;display:flex;flex-direction:column;gap:.18rem}
.dg-shift-bridge-pill b{color:#3157d5}
.dg-bridge-spmv{color:#2b8a3e!important;font-weight:800;border-top:1px dashed #cfd6df;padding-top:.2rem;margin-top:.15rem}
.dg-shift-arrow-symbol{font-size:1.8rem;color:#3157d5;font-weight:900;line-height:1}

.dg-shift-spmv-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;font-weight:700;background:#ebfbee;color:#2b8a3e;border:1px solid #b2f2bb;padding:.15rem .45rem;border-radius:6px;white-space:nowrap}

.dg-shift-summary{margin-top:.75rem;padding:.55rem .85rem;background:#f8fafc;border:1px solid #e2e8f0;border-left:4px solid #3157d5;border-radius:6px;font-size:.78rem;line-height:1.45;color:#334155}
.dg-shift-summary b{color:#0f172a}

.theme-dark .dg-shift-box{background:#1e2430;border-color:#334155}
.theme-dark .dg-shift-head{border-color:#334155}
.theme-dark .dg-shift-title{color:#f1f5f9}
.theme-dark .dg-shift-body{color:#cbd5e1}
.theme-dark .dg-shift-item{color:#cbd5e1}
.theme-dark .dg-shift-item code{background:#252b3b;color:#91a7ff}
.theme-dark .dg-shift-spmv-tag{background:#162c22;color:#63e6be;border-color:#20c997}
.theme-dark .dg-shift-note--legacy{background:#2a1619;border-color:#742a2a;color:#ff8787}
.theme-dark .dg-shift-note--legacy div b{color:#ffa8a8}
.theme-dark .dg-shift-note--modern{background:#162c22;border-color:#20c997;color:#63e6be}
.theme-dark .dg-shift-note--modern div b{color:#a9e34b}
.theme-dark .dg-shift-bridge-pill{background:#171c26;border-color:#334155;color:#cbd5e1}
.theme-dark .dg-shift-bridge-pill b{color:#91a7ff}
.theme-dark .dg-bridge-spmv{color:#63e6be!important;border-top-color:#334155}
.theme-dark .dg-shift-summary{background:#171c26;border-color:#334155;border-left-color:#5c7cfa;color:#cbd5e1}
.theme-dark .dg-shift-summary b{color:#f1f5f9}
.theme-dark .dg-shift-arrow-symbol{color:#91a7ff}

@media(max-width:700px){
  .dg-shift-flow{flex-direction:column;gap:.75rem}
  .dg-shift-arrow-symbol{transform:rotate(90deg);margin:.1rem 0}
  .dg-shift-arrow{min-width:100%}
}

/* Figure 8: OrbitLUT Interactive Transition Table */
.dg-orbitlut-container{display:flex;flex-direction:column;gap:.6rem}
.dg-lut-presets-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;background:#f8fafc;padding:.4rem .6rem;border-radius:8px;border:1px solid #e2e8f0;font-size:.65rem;font-weight:700;color:#64748b}
.dg-lut-presets-list{display:flex;gap:.3rem;flex-wrap:wrap}
.dg-lut-preset-btn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:5px;padding:.2rem .5rem;font-size:.72rem;font-family:ui-monospace,Menlo,monospace;font-weight:700;cursor:pointer;transition:.15s}
.dg-lut-preset-btn:hover{border-color:#3157d5;color:#3157d5}
.dg-lut-preset-btn.active{background:#3157d5;color:#fff;border-color:#3157d5;box-shadow:0 2px 6px rgba(49,87,213,.25)}
.dg-lut-table-scroll{overflow-x:auto;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.dg-lut-table{width:100%;border-collapse:collapse;font-size:.75rem;font-family:ui-monospace,Menlo,monospace;text-align:center}
.dg-lut-table th,.dg-lut-table td{padding:.38rem .3rem;border:1px solid #e2e8f0}
.dg-lut-table thead th{background:#f1f5f9;color:#475569;font-weight:700;font-size:.68rem}
.dg-lut-table thead th.is-col-active{background:#fef3c7;color:#92400e;border-bottom:2.5px solid #f59e0b}
.dg-lut-corner{background:#e2e8f0;color:#64748b;font-weight:800;font-size:.65rem}
.dg-lut-src-th{background:#f8fafc;color:#1e293b;text-align:left;padding-left:.5rem;cursor:pointer}
.dg-lut-src-th small{color:#94a3b8;font-weight:600;margin-left:3px}
tr.is-row-active .dg-lut-src-th{background:#e0e7ff;color:#3730a3;border-left:3.5px solid #4338ca}
tr.is-row-active td{background:#f5f7ff}
td.is-col-active{background:#fffbeb}
tr.is-row-active td.is-col-active{background:#fef9c3}
.dg-lut-table td{cursor:pointer;transition:background .15s}
.dg-lut-table td:hover{background:#dbeafe}
.dg-lut-table td strong{display:block;font-weight:800;color:#1e293b;font-size:.8rem}
.dg-lut-table td small{display:block;font-size:.6rem;color:#64748b}
.dg-lut-table td.is-cell-selected{background:#dcfce7 !important;border:2px solid #16a34a !important;box-shadow:0 0 8px rgba(22,163,74,.25)}
.dg-lut-table td.is-cell-selected strong{color:#15803d;font-size:.85rem}
.dg-lut-table td.is-cell-selected small{color:#166534;font-weight:700}
.dg-lut-readout{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;padding:.5rem .75rem}
.dg-lut-readout-formula{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.78rem;font-family:ui-monospace,Menlo,monospace}
.dg-lut-tag-pill{font-size:.6rem;font-weight:800;color:#1e40af;background:#dbeafe;padding:.15rem .45rem;border-radius:4px}
.dg-lut-hl{font-weight:800;color:#15803d;background:#dcfce7;padding:.08rem .4rem;border-radius:4px;border:1px solid #86efac}
.dg-lut-readout-metrics{display:flex;gap:.6rem;font-size:.68rem;color:#64748b;font-weight:600}
.dg-lut-readout-metrics span b{color:#16a34a}

.theme-dark .dg-lut-presets-bar{background:#1e2430;border-color:#334155}
.theme-dark .dg-lut-preset-btn{background:#2b3240;color:#cbd5e1;border-color:#475569}
.theme-dark .dg-lut-preset-btn:hover{border-color:#60a5fa;color:#93c5fd}
.theme-dark .dg-lut-preset-btn.active{background:#3b82f6;color:#fff;border-color:#60a5fa}
.theme-dark .dg-lut-table-scroll{background:#181e29;border-color:#334155}
.theme-dark .dg-lut-table th,.theme-dark .dg-lut-table td{border-color:#2b3240}
.theme-dark .dg-lut-table thead th{background:#1f2736;color:#cbd5e1}
.theme-dark .dg-lut-table thead th.is-col-active{background:#3d2f16;color:#fcd34d;border-bottom-color:#f59e0b}
.theme-dark .dg-lut-corner{background:#262e3d;color:#94a3b8}
.theme-dark .dg-lut-src-th{background:#1c2331;color:#f1f5f9}
.theme-dark tr.is-row-active .dg-lut-src-th{background:#28334f;color:#93c5fd;border-left-color:#60a5fa}
.theme-dark tr.is-row-active td{background:#1e2638}
.theme-dark td.is-col-active{background:#2a2215}
.theme-dark tr.is-row-active td.is-col-active{background:#382d18}
.theme-dark .dg-lut-table td strong{color:#f1f5f9}
.theme-dark .dg-lut-table td small{color:#94a3b8}
.theme-dark .dg-lut-table td.is-cell-selected small{color:#6ee7b7}
.theme-dark .dg-lut-readout{background:#1e2430;border-color:#334155}
.theme-dark .dg-lut-tag-pill{background:#1e3a5f;color:#93c5fd}
.theme-dark .dg-lut-hl{background:#193d34;color:#6ee7b7;border-color:#20c997}
.theme-dark .dg-lut-readout-metrics{color:#94a3b8}

.dg-lut-tab-switch{display:flex;background:#e2e8f0;padding:2px;border-radius:6px;gap:2px}
.dg-lut-tab-btn{border:none;background:transparent;color:#475569;padding:.25rem .65rem;border-radius:4px;font-size:.72rem;font-weight:700;cursor:pointer;transition:.15s}
.dg-lut-tab-btn:hover{color:#0f172a}
.dg-lut-tab-btn.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.theme-dark .dg-lut-tab-switch{background:#1e293b}
.theme-dark .dg-lut-tab-btn{color:#94a3b8}
.theme-dark .dg-lut-tab-btn:hover{color:#f8fafc}
.theme-dark .dg-lut-tab-btn.active{background:#334155;color:#f8fafc}

.dg-lut-presets-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.dg-depth-btn{border:1px solid #cbd5e1;background:#fff;color:#475569;border-radius:4px;padding:.15rem .45rem;font-size:.68rem;font-weight:700;cursor:pointer;transition:.15s}
.dg-depth-btn:hover{color:#3157d5;border-color:#3157d5}
.dg-depth-btn.active{background:#4338ca;color:#fff;border-color:#4338ca;box-shadow:0 1px 4px rgba(67,56,202,.25)}
.theme-dark .dg-depth-btn{background:#2b3240;color:#94a3b8;border-color:#475569}
.theme-dark .dg-depth-btn:hover{color:#93c5fd;border-color:#60a5fa}
.theme-dark .dg-depth-btn.active{background:#4f46e5;color:#fff;border-color:#6366f1}

/* Young's Lattice SVG Graph */
.dg-lattice-view{display:flex;flex-direction:column;gap:.6rem}
.dg-lattice-wrapper{position:relative;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:.5rem .4rem;overflow:auto;max-height:560px}
.dg-lattice-svg{width:100%;min-width:540px;height:auto;display:block;user-select:none}
.dg-lattice-layer-bg{stroke:#e2e8f0;stroke-width:1;stroke-dasharray:4 4}
.dg-lattice-layer-txt{font-size:10px;fill:#94a3b8;font-weight:700;font-family:ui-monospace,Menlo,monospace}
.dg-lattice-edge{stroke:#cbd5e1;stroke-width:1.8;transition:stroke .2s,stroke-width .2s}
.dg-lattice-edge.is-covering{stroke:#94a3b8}
.dg-lattice-edge.is-active{stroke:#3b82f6;stroke-width:2.8;filter:drop-shadow(0 0 4px rgba(59,130,246,.4))}
.dg-lattice-edge.is-transition{stroke:#10b981;stroke-width:3;stroke-dasharray:5 3;filter:drop-shadow(0 0 5px rgba(16,185,129,.5))}
.dg-lattice-edge.is-diamond{stroke:#f59e0b;stroke-width:2.5}

.dg-lattice-node{cursor:pointer;transition:transform .15s}
.dg-lattice-node rect.node-box{fill:#f8fafc;stroke:#cbd5e1;stroke-width:1.5;rx:8px;transition:fill .15s,stroke .15s,stroke-width .15s}
.dg-lattice-node:hover rect.node-box{stroke:#3b82f6;fill:#eff6ff}
.dg-lattice-node.is-source rect.node-box{fill:#eff6ff;stroke:#3b82f6;stroke-width:2.4;filter:drop-shadow(0 2px 6px rgba(59,130,246,.25))}
.dg-lattice-node.is-dest rect.node-box{fill:#ecfdf5;stroke:#10b981;stroke-width:2.6;filter:drop-shadow(0 2px 8px rgba(16,185,129,.3))}
.dg-lattice-node.is-meet rect.node-box{fill:#fef3c7;stroke:#f59e0b;stroke-width:2.4;filter:drop-shadow(0 2px 6px rgba(245,158,11,.3))}
.dg-lattice-node.is-join rect.node-box{fill:#fef3c7;stroke:#d97706;stroke-width:2.4;filter:drop-shadow(0 2px 6px rgba(217,119,6,.3))}

.dg-lattice-node text.node-label{font-size:11px;font-weight:800;fill:#1e293b;font-family:ui-monospace,Menlo,monospace}
.dg-lattice-node text.node-id{font-size:9px;font-weight:700;fill:#64748b;font-family:ui-monospace,Menlo,monospace}
.dg-lattice-node.is-source text.node-id{fill:#2563eb}
.dg-lattice-node.is-dest text.node-id{fill:#059669}
.dg-lattice-node.is-meet text.node-id,.dg-lattice-node.is-join text.node-id{fill:#b45309}

.dg-lattice-node rect.diag-sq{fill:#475569;stroke:#334155;stroke-width:.5;rx:1px}
.dg-lattice-node.is-source rect.diag-sq{fill:#2563eb;stroke:#1d4ed8}
.dg-lattice-node.is-dest rect.diag-sq{fill:#059669;stroke:#047857}
.dg-lattice-node.is-meet rect.diag-sq,.dg-lattice-node.is-join rect.diag-sq{fill:#d97706;stroke:#b45309}

.dg-lattice-arrow-lbl{font-size:9px;font-weight:800;fill:#059669;font-family:ui-monospace,Menlo,monospace}

.theme-dark .dg-lattice-wrapper{background:#181e29;border-color:#334155}
.theme-dark .dg-lattice-layer-bg{stroke:#252e3e}
.theme-dark .dg-lattice-layer-txt{fill:#64748b}
.theme-dark .dg-lattice-edge{stroke:#334155}
.theme-dark .dg-lattice-edge.is-covering{stroke:#475569}
.theme-dark .dg-lattice-edge.is-active{stroke:#60a5fa}
.theme-dark .dg-lattice-edge.is-transition{stroke:#34d399}
.theme-dark .dg-lattice-edge.is-diamond{stroke:#fcd34d}

.theme-dark .dg-lattice-node rect.node-box{fill:#1e2430;stroke:#334155}
.theme-dark .dg-lattice-node:hover rect.node-box{fill:#1e2e47;stroke:#60a5fa}
.theme-dark .dg-lattice-node.is-source rect.node-box{fill:#1e2e47;stroke:#60a5fa}
.theme-dark .dg-lattice-node.is-dest rect.node-box{fill:#132e22;stroke:#34d399}
.theme-dark .dg-lattice-node.is-meet rect.node-box,.theme-dark .dg-lattice-node.is-join rect.node-box{fill:#382d18;stroke:#fcd34d}

.theme-dark .dg-lattice-node text.node-label{fill:#f1f5f9}
.theme-dark .dg-lattice-node text.node-id{fill:#94a3b8}
.theme-dark .dg-lattice-node.is-source text.node-id{fill:#93c5fd}
.theme-dark .dg-lattice-node.is-dest text.node-id{fill:#6ee7b7}
.theme-dark .dg-lattice-node.is-meet text.node-id,.theme-dark .dg-lattice-node.is-join text.node-id{fill:#fcd34d}

.theme-dark .dg-lattice-node rect.diag-sq{fill:#94a3b8;stroke:#64748b}
.theme-dark .dg-lattice-node.is-source rect.diag-sq{fill:#60a5fa;stroke:#93c5fd}
.theme-dark .dg-lattice-node.is-dest rect.diag-sq{fill:#34d399;stroke:#6ee7b7}
.theme-dark .dg-lattice-node.is-meet rect.diag-sq,.theme-dark .dg-lattice-node.is-join rect.diag-sq{fill:#fcd34d;stroke:#fde68a}
.theme-dark .dg-lattice-arrow-lbl{fill:#6ee7b7}

/* ==========================================================================
   FIGURE 9B: Interactive Case Study lambda = (3, 2) with 3 variables
   ========================================================================== */

.dg-ex32-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

.dg-ex32-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}

.dg-ex32-tab-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: #475569;
  transition: all 0.2s ease;
}

.dg-ex32-tab-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.dg-ex32-subtabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.dg-ex32-subtab-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
}

.dg-ex32-subtab-btn.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0ea5e9;
}

/* Grid for 9 profiles in Poset view */
.dg-ex32-poset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin: 0.8rem 0;
}

.dg-ex32-profile-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.25s ease;
  cursor: pointer;
}

.dg-ex32-profile-card:hover, .dg-ex32-profile-card.is-active {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
}

.dg-ex32-profile-card.is-target {
  border-color: #10b981;
  background: #f0fdf4;
}

.dg-ex32-profile-id {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.dg-ex32-profile-name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

.dg-ex32-profile-col {
  font-size: 0.72rem;
  color: #64748b;
  font-family: ui-monospace, Menlo, monospace;
}

/* Mini Young Diagram renderer */
.dg-ex32-young-mini {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0.25rem 0;
}

.dg-ex32-young-row {
  display: flex;
  gap: 2px;
}

.dg-ex32-young-box {
  width: 12px;
  height: 12px;
  background: #3b82f6;
  border-radius: 2px;
}

.dg-ex32-young-box--empty {
  background: #e2e8f0;
}

/* Poset Column Vector View */
.dg-ex32-poset-vec-row {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.dg-ex32-poset-vec-row:hover {
  border-color: #3b82f6;
  background: #f8fafc;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.dg-ex32-poset-vec-row.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.14);
}

.dg-ex32-poset-vec-row.is-target {
  border: 1.5px solid #10b981;
  background: #f0fdf4;
}

.dg-ex32-poset-vec-row.is-target:hover,
.dg-ex32-poset-vec-row.is-target.is-active {
  border-color: #059669;
  background: #ecfdf5;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.dg-ex32-poset-vec-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.dg-ex32-poset-vec-name {
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  min-width: 68px;
}

.dg-ex32-poset-vec-young {
  display: flex;
  align-items: center;
  min-width: 48px;
}

.dg-ex32-poset-vec-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.dg-ex32-poset-vec-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dg-poset-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.dg-poset-badge--root {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

.dg-poset-badge--target {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.dg-poset-badge--normal {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.dg-ex32-poset-vec-row:hover .dg-poset-badge--normal {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

@media (max-width: 640px) {
  .dg-ex32-poset-vec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
  }
  .dg-ex32-poset-vec-info,
  .dg-ex32-poset-vec-action {
    width: 100%;
    justify-content: flex-start;
  }
}

/* CSR view */
.dg-ex32-csr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

.dg-ex32-csr-table th, .dg-ex32-csr-table td {
  border: 1px solid #e2e8f0;
  padding: 0.45rem 0.65rem;
  text-align: left;
}

.dg-ex32-csr-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
}

.dg-ex32-csr-table tr.is-active {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
}

.dg-ex32-csr-inspector {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
}

.dg-ex32-csr-mem-box {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  background: #fff;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.dg-ex32-csr-selected-branch {
  margin: 0.45rem 0 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.5;
}

.dg-ex32-csr-selected-branch.is-hit {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.dg-ex32-csr-selected-branch.is-zero {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.theme-dark .dg-ex32-csr-inspector {
  background: #1e2430;
  border-color: #334155;
  color: #f1f5f9;
}

.theme-dark .dg-ex32-csr-mem-box {
  background: #171c26;
  border-color: #334155;
  color: #f1f5f9;
}

.theme-dark .dg-ex32-csr-selected-branch.is-hit {
  background: #064e3b;
  border-color: #059669;
  color: #a7f3d0;
}

.theme-dark .dg-ex32-csr-selected-branch.is-zero {
  background: #252b3b;
  border-color: #334155;
  color: #94a3b8;
}

.theme-dark .dg-ex32-csr-table tr.is-active {
  background: #1e3a5f;
  border-left-color: #60a5fa;
}

/* Example (3,2) Subtab 3: OrbitLUT Table */
.dg-ex32-lut-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.6rem 0;
  padding: 0.45rem;
  border: 1.5px solid #e9d5ff;
  border-radius: 10px;
  background: #faf5ff;
}

.dg-ex32-lut-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  margin: 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dg-ex32-lut-table th, .dg-ex32-lut-table td {
  padding: 0.4rem 0.55rem;
  border: 1px solid #e9d5ff;
  text-align: center;
  border-radius: 6px;
}

.dg-ex32-lut-corner {
  background: #f3e8ff;
  color: #7e22ce;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left !important;
  white-space: nowrap;
  min-width: 160px;
}

.dg-ex32-lut-col-th {
  background: #f3e8ff;
  color: #581c87;
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-width: 95px;
  white-space: nowrap;
}

.dg-ex32-lut-col-th:hover, .dg-ex32-lut-col-th.is-active {
  background: #d8b4fe;
  color: #3b0764;
}

.dg-ex32-lut-row-th {
  background: #fff;
  color: #1e293b;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: left !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.dg-ex32-lut-row-th:hover, .dg-ex32-lut-row-th.is-active {
  background: #f3e8ff;
  color: #7e22ce;
  border-color: #c084fc;
}

.dg-ex32-lut-cell {
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  user-select: none;
  background: #fff;
  font-size: 0.76rem;
}

.dg-ex32-lut-cell strong {
  display: block;
  font-weight: 800;
  font-size: 0.78rem;
  color: #6b21a8;
}

.dg-ex32-lut-cell small {
  display: block;
  font-size: 0.62rem;
  color: #9333ea;
  opacity: 0.85;
}

.dg-ex32-lut-cell--null {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #64748b;
}

.dg-ex32-lut-cell--null strong {
  color: #64748b;
  font-weight: 800;
  font-size: 0.95rem;
}

.dg-ex32-lut-cell--null:hover, .dg-ex32-lut-cell--null:focus-visible {
  background: #cbd5e1;
  border-color: #94a3b8;
}

.dg-ex32-lut-cell--null.is-row-highlight,
.dg-ex32-lut-cell--null.is-col-highlight {
  background: #cbd5e1;
  border-color: #94a3b8;
}

.dg-ex32-lut-cell:hover, .dg-ex32-lut-cell:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(126, 34, 206, 0.18);
  z-index: 5;
  outline: none;
}

.dg-ex32-lut-cell.is-row-highlight {
  background: #faf5ff;
  border-color: #d8b4fe;
}

.dg-ex32-lut-cell.is-col-highlight {
  background: #faf5ff;
  border-color: #c084fc;
}

.dg-ex32-lut-cell.is-selected {
  transform: scale(1.08);
  background: #7e22ce !important;
  border-color: #6b21a8 !important;
  box-shadow: 0 0 0 2px #7e22ce, 0 4px 12px rgba(126, 34, 206, 0.35);
  z-index: 10;
}

.dg-ex32-lut-cell.is-selected strong {
  color: #fff !important;
}

.dg-ex32-lut-cell.is-selected small {
  color: #f3e8ff !important;
}

/* Dark mode for Example (3,2) OrbitLUT */
.theme-dark .dg-ex32-lut-wrap {
  background: #171123;
  border-color: #4c1d95;
}

.theme-dark .dg-ex32-lut-corner {
  background: #2e1065;
  color: #d8b4fe;
  border-color: #4c1d95;
}

.theme-dark .dg-ex32-lut-col-th {
  background: #24143a;
  border-color: #4c1d95;
  color: #e9d5ff;
}

.theme-dark .dg-ex32-lut-col-th:hover, .theme-dark .dg-ex32-lut-col-th.is-active {
  background: #4c1d95;
  color: #faf5ff;
}

.theme-dark .dg-ex32-lut-row-th {
  background: #1e1829;
  border-color: #3b2254;
  color: #e2e8f0;
}

.theme-dark .dg-ex32-lut-row-th:hover, .theme-dark .dg-ex32-lut-row-th.is-active {
  background: #3b1d6e;
  color: #f3e8ff;
  border-color: #7e22ce;
}

.theme-dark .dg-ex32-lut-cell {
  background: #231737;
  border-color: #3b2254;
}

.theme-dark .dg-ex32-lut-cell strong {
  color: #d8b4fe;
}

.theme-dark .dg-ex32-lut-cell small {
  color: #c084fc;
}

.theme-dark .dg-ex32-lut-cell--null {
  background: #1e2029;
  border-color: #2e3342;
  color: #64748b;
}

.theme-dark .dg-ex32-lut-cell--null strong {
  color: #64748b;
  font-weight: 800;
  font-size: 0.95rem;
}

.theme-dark .dg-ex32-lut-cell--null:hover,
.theme-dark .dg-ex32-lut-cell--null:focus-visible,
.theme-dark .dg-ex32-lut-cell--null.is-row-highlight,
.theme-dark .dg-ex32-lut-cell--null.is-col-highlight {
  background: #282c3a;
  border-color: #3f475c;
}

.theme-dark .dg-ex32-lut-cell.is-row-highlight {
  border-color: #6b21a8;
}

.theme-dark .dg-ex32-lut-cell.is-col-highlight {
  border-color: #7e22ce;
}

.theme-dark .dg-ex32-lut-cell.is-selected {
  background: #9333ea !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 0 2px #c084fc, 0 4px 12px rgba(192, 132, 252, 0.4);
}

/* SpMV Stage Controls */
.dg-ex32-spmv-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.dg-ex32-btn {
  padding: 0.45rem 0.9rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  color: #1e293b;
  transition: all 0.2s ease;
}

.dg-ex32-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.dg-ex32-btn--primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.dg-ex32-btn--primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.dg-ex32-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dg-ex32-step-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin: 0.8rem 0;
}

.dg-ex32-step-pill {
  padding: 0.5rem 0.35rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
}

.dg-ex32-step-pill.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* Vector state column (Column Vector display) */
.dg-ex32-vector-container {
  margin: 0.85rem 0;
  overflow-x: auto;
  padding: 0.25rem 0;
}

.dg-ex32-vector-bracket {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1.1rem;
}

/* Bracket hooks '[' and ']' */
.dg-ex32-vector-bracket::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 12px;
  border: 2.5px solid #64748b;
  border-right: none;
  border-radius: 5px 0 0 5px;
  pointer-events: none;
}

.dg-ex32-vector-bracket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 12px;
  border: 2.5px solid #64748b;
  border-left: none;
  border-radius: 0 5px 5px 0;
  pointer-events: none;
}

.dg-ex32-vector-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dg-ex32-vec-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.dg-ex32-vec-row:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.dg-ex32-vec-row.is-final-target {
  border: 1.5px solid #10b981;
  background: #f0fdf4;
}

.dg-ex32-vec-row-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.76rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.dg-ex32-vec-id {
  font-weight: 800;
  color: #1e293b;
  background: #e2e8f0;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
}

.dg-ex32-vec-prop {
  color: #334155;
}

.dg-ex32-prop-k {
  color: #64748b;
  font-weight: 500;
}

.dg-ex32-vec-row-val {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: ui-monospace, Menlo, monospace;
}

.dg-ex32-vec-empty {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.76rem;
}

.dg-ex32-orbit-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0.18rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.76rem;
}

.dg-ex32-orbit-tag b {
  color: #0f172a;
}

.dg-ex32-orbit-tag.is-new {
  background: #fef08a;
  color: #854d0e;
}

@media (max-width: 640px) {
  .dg-ex32-vec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .dg-ex32-vec-row-val {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Result expansion */
.dg-ex32-spmv-equation-scroll {
  margin: 0.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0;
}

.dg-ex32-spmv-equation-table {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
  margin: 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dg-ex32-spmv-equation-table th,
.dg-ex32-spmv-equation-table td {
  padding: 0;
  vertical-align: middle;
  text-align: center;
}

.dg-eq-top-header th {
  padding: 0.35rem 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #334155;
  border-bottom: 1px solid #e2e8f0;
}

.dg-eq-th-k {
  text-align: center;
  background: #f8fafc;
  border-radius: 6px 0 0 0;
}

.dg-eq-th-vin {
  background: #f8fafc;
}

.dg-eq-th-vout {
  background: #f0fdf4;
  color: #065f46 !important;
  border-radius: 0 6px 0 0;
}

.dg-eq-sub-header th {
  padding: 0.2rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #64748b;
  border-bottom: 1.5px solid #cbd5e1;
}

.dg-eq-k-col-th {
  width: 32px;
  min-width: 30px;
  max-width: 36px;
  background: #f1f5f9;
}

.dg-eq-th-op {
  width: 24px;
  min-width: 24px;
}

.dg-eq-vec-th {
  padding: 0.2rem 0.6rem !important;
  font-size: 0.68rem;
}

/* Rows & Cells */
.dg-eq-row {
  transition: background 0.15s ease;
  cursor: pointer;
}

.dg-eq-row:hover {
  background: #f0f7ff !important;
}

.dg-eq-row.is-row-active {
  background: #eff6ff !important;
  box-shadow: inset 0 0 0 1.5px #3b82f6;
}

.dg-eq-k-cell {
  width: 32px;
  min-width: 30px;
  height: 38px;
  font-size: 0.72rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  box-sizing: border-box;
}

.dg-eq-k-zero {
  color: #cbd5e1;
  font-size: 0.85rem;
}

.dg-eq-k-diag {
  color: #0f172a;
  font-weight: 800;
  background: rgba(241, 245, 249, 0.6);
}

.dg-eq-k-var {
  color: #2563eb;
  font-weight: 700;
  background: #eff6ff;
}

/* Matrix Bracket styling on K */
.dg-eq-k-bracket-l {
  border-left: 2.5px solid #64748b;
}

.dg-eq-k-bracket-r {
  border-right: 2.5px solid #64748b;
}

.dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-k-bracket-l {
  border-top: 2.5px solid #64748b;
  border-top-left-radius: 5px;
}

.dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-k-bracket-l {
  border-bottom: 2.5px solid #64748b;
  border-bottom-left-radius: 5px;
}

.dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-k-bracket-r {
  border-top: 2.5px solid #64748b;
  border-top-right-radius: 5px;
}

.dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-k-bracket-r {
  border-bottom: 2.5px solid #64748b;
  border-bottom-right-radius: 5px;
}

/* Operators × and = */
.dg-eq-op-cell {
  width: 24px;
  text-align: center;
  user-select: none;
}

.dg-eq-op-sym {
  font-size: 1.4rem;
  font-weight: 900;
  color: #475569;
  line-height: 1;
}

/* Vector Cells */
.dg-eq-vec-cell {
  padding: 0 0.35rem;
}

.dg-eq-vec-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e2e8f0;
  min-height: 32px;
  box-sizing: border-box;
}

.dg-eq-vin-cell .dg-eq-vec-inner {
  min-width: 210px;
}

.dg-eq-vout-cell .dg-eq-vec-inner {
  min-width: 240px;
}

.dg-eq-vin-cell {
  border-left: 2.5px solid #64748b;
  border-right: 2.5px solid #64748b;
}

.dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-vin-cell {
  border-top: 2.5px solid #64748b;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-vin-cell {
  border-bottom: 2.5px solid #64748b;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.dg-eq-vout-cell {
  border-left: 2.5px solid #10b981;
  border-right: 2.5px solid #10b981;
}

.dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-vout-cell {
  border-top: 2.5px solid #10b981;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-vout-cell {
  border-bottom: 2.5px solid #10b981;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.dg-eq-row-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  white-space: nowrap;
}

.dg-eq-col-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  font-size: 0.74rem;
  color: #1e293b;
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.dg-eq-shape {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

.dg-eq-row-val {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dg-eq-empty {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.74rem;
}

.dg-eq-row.is-target-row .dg-eq-vout-cell .dg-eq-vec-inner {
  border-color: #10b981;
  background: #f0fdf4;
}

.dg-eq-footer-note {
  font-size: 0.78rem;
  color: #475569;
  background: #f8fafc;
  border-left: 3px solid #3b82f6;
  padding: 0.4rem 0.75rem;
  border-radius: 0 6px 6px 0;
  margin-top: 0.5rem;
}

/* View toggle buttons */
.dg-ex32-eq-toggle-group {
  display: flex;
  gap: 0.35rem;
}

.dg-ex32-view-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dg-ex32-view-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.dg-ex32-view-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Example explanation box under K*V0=V1 */
.dg-ex32-example-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-top: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dg-ex32-example-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: #1e293b;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.dg-ex32-example-tag {
  background: #2563eb;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.dg-ex32-example-calc {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
}

.dg-ex32-example-formula {
  text-align: center;
  margin: 0.35rem 0 0.15rem;
  font-size: 0.92rem;
  color: #1e293b;
}

.dg-ex32-example-list {
  margin: 0.35rem 0 0.2rem 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dg-ex32-example-list li {
  line-height: 1.55;
}

.dg-ex32-example-cols {
  display: flex;
  gap: 1rem;
  margin: 0.25rem 0 0.15rem 0.25rem;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  color: #2563eb;
  font-weight: 600;
  flex-wrap: wrap;
}

.dg-ex32-example-note {
  margin-top: 0.35rem;
  padding: 0.4rem 0.65rem;
  background: #eff6ff;
  border-left: 3px solid #60a5fa;
  border-radius: 0 4px 4px 0;
  font-size: 0.76rem;
  color: #1e40af;
  line-height: 1.5;
}

.dg-ex32-two-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.65rem 0;
}

@media (max-width: 720px) {
  .dg-ex32-two-ops {
    grid-template-columns: 1fr;
  }
}

.dg-ex32-op-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.55;
}

.dg-ex32-op-card--k {
  border-left: 3.5px solid #2563eb;
}

.dg-ex32-op-card--lut {
  border-left: 3.5px solid #059669;
}

.dg-ex32-op-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: #1e293b;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.dg-ex32-op-num {
  background: #2563eb;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.dg-ex32-op-num--lut {
  background: #059669;
}

.dg-ex32-op-body {
  color: #334155;
}

.dg-ex32-op-summary {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: #1e40af;
  line-height: 1.5;
  margin: 0.5rem 0 0.3rem;
}

.dg-ex32-final-result {
  background: #f8fafc;
  border: 2px solid #10b981;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.dg-ex32-final-title {
  font-weight: 800;
  color: #065f46;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.dg-ex32-monomial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  max-height: 160px;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.dg-ex32-mono-pill {
  font-size: 0.72rem;
  font-family: ui-monospace, Menlo, monospace;
  background: #f1f5f9;
  color: #334155;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Dark theme overrides */
.theme-dark .dg-ex32-profile-card,
.theme-dark .dg-ex32-vec-row,
.theme-dark .dg-ex32-final-result,
.theme-dark .dg-ex32-monomial-list {
  background: #1e2430;
  border-color: #334155;
  color: #f1f5f9;
}

.theme-dark .dg-ex32-vector-bracket::before,
.theme-dark .dg-ex32-vector-bracket::after {
  border-color: #475569;
}

.theme-dark .dg-ex32-vec-row:hover {
  background: #252d3d;
  border-color: #475569;
}

.theme-dark .dg-ex32-vec-row.is-final-target {
  border-color: #059669;
  background: rgba(6, 78, 59, 0.25);
}

.theme-dark .dg-ex32-vec-id {
  background: #0f172a;
  color: #93c5fd;
}

.theme-dark .dg-ex32-vec-prop {
  color: #cbd5e1;
}

.theme-dark .dg-ex32-prop-k {
  color: #94a3b8;
}

.theme-dark .dg-ex32-vec-empty {
  color: #64748b;
}

.theme-dark .dg-ex32-orbit-tag {
  background: #1e3a8a;
  color: #93c5fd;
}

.theme-dark .dg-ex32-orbit-tag b {
  color: #f8fafc;
}

.theme-dark .dg-ex32-tab-btn,
.theme-dark .dg-ex32-subtab-btn,
.theme-dark .dg-ex32-btn,
.theme-dark .dg-ex32-step-pill {
  background: #1e2430;
  border-color: #334155;
  color: #94a3b8;
}

.theme-dark .dg-ex32-tab-btn.active,
.theme-dark .dg-ex32-step-pill.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.theme-dark .dg-ex32-csr-table th,
.theme-dark .dg-ex32-csr-table td {
  border-color: #334155;
}

.theme-dark .dg-ex32-csr-table th {
  background: #0f172a;
  color: #cbd5e1;
}

.theme-dark .dg-ex32-profile-name {
  color: #f8fafc;
}

.theme-dark .dg-ex32-mono-pill {
  background: #0f172a;
  color: #94a3b8;
}

/* Math formula box in Phase 3 */
.dg-ex32-formula-box {
  background: #ffffff;
  padding: 0.9rem 1.25rem;
  border-radius: 8px;
  border: 1.5px solid #10b981;
  margin: 0.6rem 0;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #065f46;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
}

.dg-ex32-formula-box .katex-display {
  margin: 0.2rem 0 !important;
  padding: 0 !important;
}

.dg-ex32-formula-box .katex {
  font-size: 1.15rem !important;
  color: #065f46;
}

.dg-ex32-perf-note {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #047857;
  background: #ecfdf5;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
}

.theme-dark .dg-ex32-formula-box {
  background: #0f172a;
  border-color: #059669;
  color: #34d399;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2);
}

.theme-dark .dg-ex32-formula-box .katex {
  color: #34d399 !important;
}

.theme-dark .dg-ex32-perf-note {
  background: #064e3b33;
  color: #6ee7b7;
  border-color: #047857;
}

/* Dark theme overrides for SPMV Equation */
.theme-dark .dg-ex32-spmv-equation-table {
  color: #f1f5f9;
}

.theme-dark .dg-eq-top-header th,
.theme-dark .dg-eq-th-k,
.theme-dark .dg-eq-th-vin {
  background: #1e2430;
  color: #cbd5e1;
  border-color: #334155;
}

.theme-dark .dg-eq-th-vout {
  background: rgba(6, 78, 59, 0.4);
  color: #6ee7b7 !important;
}

.theme-dark .dg-eq-sub-header th {
  background: #151b26;
  color: #94a3b8;
  border-color: #334155;
}

.theme-dark .dg-eq-row:hover {
  background: #1e293b !important;
}

.theme-dark .dg-eq-row.is-row-active {
  background: #1e293b !important;
  box-shadow: inset 0 0 0 1.5px #3b82f6;
}

.theme-dark .dg-eq-k-zero {
  color: #475569;
}

.theme-dark .dg-eq-k-diag {
  color: #f8fafc;
  background: #1e293b;
}

.theme-dark .dg-eq-k-var {
  color: #93c5fd;
  background: rgba(30, 58, 138, 0.3);
}

.theme-dark .dg-eq-k-bracket-l,
.theme-dark .dg-eq-k-bracket-r,
.theme-dark .dg-eq-vin-cell {
  border-color: #475569;
}

.theme-dark .dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-k-bracket-l,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-k-bracket-l,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-k-bracket-r,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-k-bracket-r,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-vin-cell,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-vin-cell {
  border-color: #475569;
}

.theme-dark .dg-eq-vout-cell,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:first-child .dg-eq-vout-cell,
.theme-dark .dg-ex32-spmv-equation-table tbody tr:last-child .dg-eq-vout-cell {
  border-color: #059669;
}

.theme-dark .dg-eq-op-sym {
  color: #94a3b8;
}

.theme-dark .dg-eq-vec-inner {
  background: #1e2430;
  border-color: #334155;
}

.theme-dark .dg-eq-col-meta {
  color: #f8fafc;
  background: #252d3d;
}

.theme-dark .dg-eq-shape {
  color: #94a3b8;
}

.theme-dark .dg-eq-empty {
  color: #64748b;
}

.theme-dark .dg-eq-row.is-target-row .dg-eq-vout-cell .dg-eq-vec-inner {
  border-color: #059669;
  background: rgba(6, 78, 59, 0.3);
}

.theme-dark .dg-eq-footer-note {
  background: #1e2430;
  color: #cbd5e1;
  border-color: #3b82f6;
}

.theme-dark .dg-ex32-view-btn {
  background: #1e2430;
  border-color: #334155;
  color: #94a3b8;
}

.theme-dark .dg-ex32-view-btn:hover {
  background: #252d3d;
  color: #f1f5f9;
}

.theme-dark .dg-ex32-view-btn.active {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Dark Mode styles for Poset Column Vector */
.theme-dark .dg-ex32-poset-vec-row {
  background: #1e2430;
  border-color: #334155;
  color: #f8fafc;
}

.theme-dark .dg-ex32-poset-vec-row:hover {
  background: #252d3d;
  border-color: #38bdf8;
}

.theme-dark .dg-ex32-poset-vec-row.is-active {
  background: #0f2744;
  border-color: #38bdf8;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
}

.theme-dark .dg-ex32-poset-vec-row.is-target {
  background: rgba(6, 78, 59, 0.35);
  border-color: #10b981;
}

.theme-dark .dg-ex32-poset-vec-row.is-target:hover,
.theme-dark .dg-ex32-poset-vec-row.is-target.is-active {
  background: rgba(6, 78, 59, 0.55);
  border-color: #34d399;
}

.theme-dark .dg-ex32-poset-vec-name {
  color: #f8fafc;
}

.theme-dark .dg-poset-badge--root {
  background: #312e81;
  color: #c7d2fe;
  border-color: #4338ca;
}

.theme-dark .dg-poset-badge--target {
  background: #065f46;
  color: #a7f3d0;
  border-color: #34d399;
}

.theme-dark .dg-poset-badge--normal {
  background: #334155;
  color: #cbd5e1;
  border-color: #475569;
}

.theme-dark .dg-ex32-poset-vec-row:hover .dg-poset-badge--normal {
  background: #1e3a8a;
  color: #93c5fd;
  border-color: #3b82f6;
}

/* Dark Mode styles for Example Box under K*V0=V1 */
.theme-dark .dg-ex32-example-box {
  background: #151f30;
  border-color: #334155;
  border-left-color: #38bdf8;
  color: #cbd5e1;
}

.theme-dark .dg-ex32-example-header {
  color: #f1f5f9;
}

.theme-dark .dg-ex32-example-calc {
  background: #1e293b;
  border-color: #334155;
}

.theme-dark .dg-ex32-example-formula {
  color: #f8fafc;
}

.theme-dark .dg-ex32-example-cols {
  color: #38bdf8;
}

.theme-dark .dg-ex32-example-note {
  background: rgba(30, 58, 138, 0.3);
  border-left-color: #3b82f6;
  color: #93c5fd;
}

.theme-dark .dg-ex32-op-card {
  background: #1e2430;
  border-color: #334155;
}

.theme-dark .dg-ex32-op-card--k {
  border-left-color: #38bdf8;
}

.theme-dark .dg-ex32-op-card--lut {
  border-left-color: #10b981;
}

.theme-dark .dg-ex32-op-title {
  color: #f1f5f9;
}

.theme-dark .dg-ex32-op-body {
  color: #cbd5e1;
}

.theme-dark .dg-ex32-op-summary {
  background: rgba(30, 58, 138, 0.25);
  border-color: #1e3a8a;
  color: #93c5fd;
}

/* Normalization box in final result */
.dg-ex32-norm-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin: 0.85rem 0 0.65rem;
}

.dg-ex32-norm-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: #065f46;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.dg-ex32-norm-tag {
  background: #059669;
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dg-ex32-norm-intro {
  font-size: 0.8rem;
  color: #334155;
  line-height: 1.55;
  margin-bottom: 0.65rem;
}

.dg-ex32-norm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

@media (max-width: 860px) {
  .dg-ex32-norm-grid {
    grid-template-columns: 1fr;
  }
}

.dg-ex32-norm-step {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 3.5px solid #0d9488;
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  font-size: 0.77rem;
  line-height: 1.5;
  color: #334155;
}

.dg-ex32-norm-step-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

.dg-ex32-norm-step-num {
  background: #0d9488;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.dg-ex32-norm-formula {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 0.3rem 0.45rem;
  margin: 0.35rem 0;
  text-align: center;
}

.dg-ex32-norm-crosscheck {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 3.5px solid #16a34a;
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  color: #166534;
  line-height: 1.55;
}

/* Dark mode overrides for normalization box */
.theme-dark .dg-ex32-norm-box {
  background: #151f30;
  border-color: #334155;
}

.theme-dark .dg-ex32-norm-header {
  color: #34d399;
}

.theme-dark .dg-ex32-norm-intro {
  color: #cbd5e1;
}

.theme-dark .dg-ex32-norm-step {
  background: #1e2430;
  border-color: #334155;
  border-left-color: #2dd4bf;
  color: #cbd5e1;
}

.theme-dark .dg-ex32-norm-step-title {
  color: #f1f5f9;
}

.theme-dark .dg-ex32-norm-formula {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}

.theme-dark .dg-ex32-norm-crosscheck {
  background: rgba(22, 163, 74, 0.15);
  border-color: #166534;
  border-left-color: #22c55e;
  color: #bbf7d0;
}