/* Engineering-drawing figures (core.js): frameless SVG on the page ground, hairline geometry, square blocks,
   orthogonal connectors, IBM Plex type at its real size. Ink for structure; red (accent tokens) only for the live,
   walked, hovered or focused path and for the marks of what carries the protocol. Every colour is a token; light and
   dark are both native. Every selector is under .dx so the sheet is safe on any host page. */
.dx{position:relative;margin:0;color:var(--t1);font:400 14px/1.5 var(--sans)}
.dx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:32px;margin:0 0 14px}
.dx-k{font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.dx-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
.dx-seg,.dx-walk{display:inline-flex;align-items:center;gap:0}
.dx-seg button,.dx-walk button,.dx-btn{appearance:none;border:1px solid var(--hair2);background:transparent;color:var(--t2);font:500 12px/1 var(--mono);min-height:30px;min-width:30px;padding:0 10px;border-radius:0;cursor:pointer;white-space:nowrap}
.dx-seg button+button,.dx-walk button+button,.dx-walk span+button{border-inline-start:0}
.dx-seg button:first-child,.dx-walk>:first-child{border-start-start-radius:5px;border-end-start-radius:5px}
.dx-seg button:last-child,.dx-walk>:last-child{border-start-end-radius:5px;border-end-end-radius:5px}
.dx-seg button[aria-pressed=true]{background:var(--t1);color:var(--bg);border-color:var(--t1)}
.dx-walk-n{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:1px solid var(--hair2);border-inline-start:0;font:500 12px/1 var(--mono);color:var(--t2);font-variant-numeric:tabular-nums}
.dx-seg button:hover:not([aria-pressed=true]),.dx-walk button:hover:not(:disabled),.dx-btn:hover{color:var(--t1);background:var(--hover)}
.dx-walk button:disabled{opacity:.4;cursor:default}
.dx-walk button[aria-pressed=true],.dx-btn[aria-pressed=true]{color:var(--t1);border-color:var(--accent)}
.dx button:focus-visible,.dx [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dx-stage{position:relative;background:transparent}
.dx-stage>svg{display:block;overflow:visible;max-width:100%;-webkit-tap-highlight-color:transparent}
.dx-cap{margin:14px 0 0;max-width:72ch;color:var(--t3);font:400 13px/1.5 var(--sans)}

/* type */
.dx-t{fill:var(--t1);font-family:var(--sans);font-variant-numeric:tabular-nums slashed-zero}
.dx-title{font-size:13px;font-weight:500}
.dx-body{font-size:12px;font-weight:400;fill:var(--t3)}
.dx-mono,.dx-tag,.dx-head-t{font-family:var(--mono)}
.dx-t.dx-mono{font-size:10.5px;fill:var(--t2)}
.dx-t.dx-head{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;fill:var(--t3)}
.dx-t.dx-tag{font-family:var(--mono);font-size:10px;font-weight:500;fill:var(--t3)}
.dx-sub{fill:var(--t3)!important}

/* geometry */
.dx-box{fill:var(--bg);stroke:var(--t3);stroke-width:1;shape-rendering:crispEdges}
.dx-block{cursor:default;outline:none}
.dx-block:focus-visible .dx-box{stroke:var(--accent);stroke-width:2}
.dx-phantom .dx-box{stroke-dasharray:4 3;stroke:var(--t3)}
.dx-phantom .dx-t.dx-title{fill:var(--t2)}
.dx-product .dx-box{stroke:var(--t1)}
.dx-tagbox rect{fill:none;stroke:var(--hair2);stroke-width:1;shape-rendering:crispEdges}
.dx-mark{fill:var(--accent-graphic)}
.dx-wire{fill:none;stroke:var(--t3);stroke-width:1;stroke-linejoin:round}
.dx-ah{fill:var(--t3)}
.dx-edge.dx-phantom .dx-wire{stroke-dasharray:4 3}
.dx-rule{stroke:var(--hair2);stroke-width:1;fill:none;shape-rendering:crispEdges}
.dx-plate rect{fill:var(--bg)}
.dx-plate .dx-t{font-family:var(--mono);font-size:10.5px;fill:var(--t2)}
.dx-bandn{fill:var(--t3)!important}
.dx-quiet .dx-bandt{fill:var(--t3)}

/* tracing (hover, focus) and the walk-through: the lit path goes red, everything else steps back */
.dx-svg .dx-block,.dx-svg .dx-edge,.dx-svg .dx-lab,.dx-svg .dx-band{transition:opacity var(--dur-base) var(--ease-standard)}
.dx-tracing .dx-block:not(.on),.dx-tracing .dx-edge:not(.on),.dx-tracing .dx-lab:not(.on){opacity:.28}
.dx-tracing .dx-block.on .dx-box{stroke:var(--t1)}
.dx-tracing .dx-edge.on .dx-wire,.dx-walking .dx-edge.cur .dx-wire{stroke:var(--accent-graphic);stroke-width:1.5}
.dx-tracing .dx-edge.on .dx-ah,.dx-walking .dx-edge.cur .dx-ah{fill:var(--accent-graphic)}
.dx-tracing .dx-lab.on .dx-t{fill:var(--t1)}
.dx-walking .dx-block:not(.cur):not(.done),.dx-walking .dx-edge:not(.cur):not(.done){opacity:.5}
.dx-walking .dx-band:not(.cur) .dx-note{opacity:.7}
.dx-walking .dx-block.cur .dx-box{stroke:var(--accent-graphic);stroke-width:1.5}
.dx-walking .dx-band.cur .dx-bandn{fill:var(--accent-text)!important}
.dx-walking .dx-band.cur .dx-rule{stroke:var(--accent-graphic)}
@media (prefers-reduced-motion:reduce){.dx-svg *{transition:none!important}}

/* tables: the table twin and the bill of materials */
.dx-table{overflow-x:auto}
.dx-tab,.dx-bomt{width:100%;border-collapse:collapse;font:400 13px/1.45 var(--sans);color:var(--t2)}
.dx-tab caption,.dx-bomt caption{caption-side:top;text-align:start;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:0 0 10px}
.dx-tab th,.dx-tab td,.dx-bomt th,.dx-bomt td{text-align:start;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--hair)}
.dx-tab thead th,.dx-bomt thead th{font:500 11px/1.3 var(--mono);color:var(--t3);border-bottom:1px solid var(--hair2)}
.dx-tab tbody th{font-weight:500;color:var(--t1)}
.dx-bom{margin-top:32px;overflow-x:auto}
.dx-bomt tbody th b{display:block;font-weight:500;color:var(--t1)}
.dx-bomt tbody th span{display:block;color:var(--t3);font-weight:400;max-width:52ch}
.dx-bomt td.dx-mono{font:500 11px/1.6 var(--mono);color:var(--t3);width:3.5em}
.dx-bomt tr[data-on] td.dx-mono{color:var(--accent-text);box-shadow:inset 2px 0 var(--accent)}
.dx-chip{display:inline-block;font:400 11px/1.4 var(--mono);color:var(--t2);border:1px solid var(--hair2);border-radius:4px;padding:1px 6px;margin:0 4px 4px 0}
@media (max-width:719px){
  .dx-bomt thead{display:none}
  .dx-bomt tr{display:grid;grid-template-columns:3em 1fr;column-gap:8px;padding:10px 0;border-bottom:1px solid var(--hair)}
  .dx-bomt td,.dx-bomt th{border:0;padding:2px 0}
  .dx-bomt td:nth-child(n+3){grid-column:2}
  .dx-bomt td.dx-mono{grid-row:span 4}
}
/* station console (console.js): an operator panel drawn on the page ground; hairline rules between panes, no box */
.cx{border-top:1px solid var(--t3);border-bottom:1px solid var(--hair2)}
.cx-bar{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--hair2)}
.cx-sample{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t1);border:1px solid var(--t3);border-radius:4px;padding:5px 7px}
.cx-rd{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.cx-rd div{display:flex;gap:8px;align-items:baseline}
.cx-rd dt{font:400 10.5px/1.4 var(--mono);color:var(--t3);letter-spacing:.04em}
.cx-rd dd{margin:0;font:500 12px/1.4 var(--mono);color:var(--t1);font-variant-numeric:tabular-nums slashed-zero}
.cx-rd dd[data-warn]{color:var(--accent-text)}
.cx-body{display:grid;grid-template-columns:minmax(180px,1fr) minmax(260px,1.6fr) minmax(300px,2fr)}
.cx-pane{padding:14px 20px 16px;min-width:0}
.cx-pane+.cx-pane{border-inline-start:1px solid var(--hair2)}
.cx-pane:first-child{padding-inline-start:0}.cx-pane:last-child{padding-inline-end:0}
.cx-h{margin:0 0 10px;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.cx-h2{margin-top:16px}
.cx-seq ol{list-style:none;margin:0;padding:0}
.cx-seq li{display:grid;grid-template-columns:2.2em 1fr auto;gap:8px;align-items:baseline;padding:5px 0 5px 8px;border-inline-start:2px solid var(--hair);font:400 13px/1.35 var(--sans);color:var(--t3)}
.cx-seq li.done{color:var(--t2);border-inline-start-color:var(--t3)}
.cx-seq li.cur{color:var(--t1);border-inline-start-color:var(--accent)}
.cx-seq li.cur .cx-n{color:var(--accent-text)}
.cx-n,.cx-seq time{font:400 10.5px/1.35 var(--mono);color:var(--t3);font-variant-numeric:tabular-nums}
.cx-ch{margin:0 0 12px}
.cx-ch-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:400 12px/1.4 var(--sans);color:var(--t2)}
.cx-ch-h i{font-style:normal;color:var(--t3);font:400 10.5px var(--mono)}
.cx-ch-h b{font:500 15px/1.2 var(--mono);color:var(--t1);font-variant-numeric:tabular-nums slashed-zero}
.cx-ch canvas{display:block;width:100%;height:52px;margin-top:4px}
.cx-axis{display:flex;justify-content:space-between;margin:0;font:400 10px/1 var(--mono);color:var(--t3)}
.cx-lines{list-style:none;margin:0;padding:0;height:286px;overflow:auto;font:400 11.5px/1.45 var(--mono);color:var(--t2)}
.cx-lines li{display:grid;grid-template-columns:4.6em 1fr;column-gap:10px;padding:5px 0;border-bottom:1px solid var(--hair)}
.cx-lines time{color:var(--t3);grid-row:span 2;font-variant-numeric:tabular-nums}
.cx-who{color:var(--t3)}
.cx-what{color:var(--t1);font-family:var(--sans);font-size:12.5px}
.cx-what i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--t3);margin-inline-start:6px}
.cx-lines li.cx-fault .cx-what,.cx-lines li.cx-fault .cx-who{color:var(--accent-text)}
.cx-lines li.cx-state .cx-what{font-weight:500}
.cx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--hair2)}
.cx-ctl{display:flex;gap:8px;flex-wrap:wrap}
.cx-ctl .dx-btn{border-radius:5px}
.cx-ctl .dx-btn:disabled{opacity:.4;cursor:default}
.cx-note{margin:0;max-width:62ch;font:400 12px/1.45 var(--sans);color:var(--t3)}
.cx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1000px){.cx-body{grid-template-columns:1fr 1fr}.cx-log{grid-column:1/-1;border-inline-start:0!important;border-top:1px solid var(--hair2);padding-inline-start:0!important}.cx-tel{padding-inline-end:0}}
@media (max-width:640px){.cx-body{grid-template-columns:1fr}.cx-pane{padding-inline:0!important;border-inline-start:0!important}.cx-pane+.cx-pane{border-top:1px solid var(--hair2)}.cx-lines{height:240px}}

/* tabs over a figure (a flow, a machine, a use case): underlined, never pills */
.dx-tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--hair2);margin:0 0 24px}
.dx-tabs button{appearance:none;border:0;background:transparent;color:var(--t3);font:500 13px/1.3 var(--sans);padding:9px 14px 11px;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;text-align:start;display:inline-flex;gap:8px;align-items:baseline}
.dx-tabs button span{font:400 10.5px var(--mono);color:var(--t3)}
.dx-tabs button:hover{color:var(--t1)}
.dx-tabs button[aria-selected=true]{color:var(--t1);box-shadow:inset 0 -2px 0 var(--accent)}
.dx-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* sequence chart */
.dx-lifeline{stroke:var(--hair2);stroke-width:1;fill:none;shape-rendering:crispEdges}
.dx-lane{stroke:var(--hair);stroke-width:1;fill:none}
.dx-dot{fill:var(--t2)}
.dx-num{fill:var(--t3)!important}
.dx-t.dx-mt{fill:var(--t1)}
.dx-t.dx-obj{fill:var(--t3)}
.dx-t.dx-who{fill:var(--t3)}
.dx-t.dx-markt{fill:var(--t2);letter-spacing:.06em}
.dx-inv rect{fill:var(--bg);stroke:var(--t3);stroke-width:1}
.dx-inv .dx-t{fill:var(--t1)}
.dx-msg .dx-wire{stroke:var(--t2)}
.dx-msg .dx-ah{fill:var(--t2)}
.dx-walking .dx-msg:not(.cur):not(.done){opacity:.3}
.dx-walking .dx-msg.done{opacity:.7}
.dx-walking .dx-msg.cur .dx-wire{stroke:var(--accent-graphic);stroke-width:1.5}
.dx-walking .dx-msg.cur .dx-ah,.dx-walking .dx-msg.cur .dx-dot{fill:var(--accent-graphic)}
.dx-walking .dx-msg.cur .dx-num{fill:var(--accent-text)!important}

/* state diagram */
.dx-init{fill:var(--t1)}
.dx-jn{fill:var(--t2)}
.dx-st2{fill:none;stroke:var(--t3);stroke-width:1}
.dx-state{outline:none;cursor:pointer}
.dx-state .dx-box{stroke:var(--t2)}
.dx-offst .dx-box{stroke:var(--t3)}
.dx-state:focus-visible .dx-box{stroke:var(--accent);stroke-width:2}
.dx-tr .dx-wire{stroke:var(--t3)}
.dx-tr.dx-exc .dx-wire{stroke:var(--hair2)}
.dx-tr .dx-ah{fill:var(--t3)}
.dx-t.dx-rowh{fill:var(--t3)}
.dx-t.dx-exits{fill:var(--t3)}
.dx-tracing .dx-state:not(.on){opacity:.35}
.dx-tracing .dx-tr:not(.on){opacity:.2}
.dx-tracing .dx-tr.on .dx-wire{stroke:var(--accent-graphic);stroke-width:1.5}
.dx-tracing .dx-tr.on .dx-ah,.dx-tracing .dx-tr.on .dx-jn{fill:var(--accent-graphic)}
.dx-tracing .dx-state.on .dx-box{stroke:var(--t1)}
.dx-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:24px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair2)}
.dx-detail h3{margin:2px 0 6px;font:500 20px/1.25 var(--sans)}
.dx-detail p{margin:0;color:var(--t3);font-size:13px}
.dx-detail ul{list-style:none;margin:0;padding:0}
.dx-detail li{padding:6px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--t2)}
.dx-detail li b{font-weight:500;color:var(--t1)}
.dx-detail li span{color:var(--t3)}
.dx-detail code{font:400 11.5px var(--mono);color:var(--t2)}
.dx-detail .dx-k{display:block;margin:0 0 4px}
@media (max-width:719px){.dx-detail{grid-template-columns:1fr;gap:14px}}

/* matrix */
.dx-hit{fill:transparent}
.dx-mx .dx-ch{fill:var(--t2);font-size:12px}
.dx-mk{fill:var(--t1)}
.dx-mk2{fill:var(--bg);stroke:var(--t1);stroke-width:1.2}
.dx-span{stroke:var(--t3);stroke-width:1;fill:none}
.dx-rule2{stroke:var(--t3)}
.dx-mrow,.dx-mcol{outline:none;cursor:default}
.dx-mcol[role=button],.dx-mrow[role=button]{cursor:pointer}
.dx-mrow:focus-visible .dx-hit,.dx-mcol:focus-visible .dx-hit{stroke:var(--accent);stroke-width:2}
.dx-cross .dx-mrow:not(.on) .dx-t,.dx-cross .dx-mcol:not(.on) .dx-t{opacity:.45}
.dx-cross .dx-mcol.on .dx-hit,.dx-cross .dx-mrow.on .dx-hit{fill:var(--hover)}
.dx-mk.on{fill:var(--accent-graphic)}
.dx-mk2.on{fill:var(--bg);stroke:var(--accent-graphic)}
.dx-t.dx-ml{fill:var(--t2)}

/* scale */
.dx-bound{fill:none;stroke:var(--t3);stroke-width:1}
.dx-cell{fill:var(--bg);stroke:var(--t3);stroke-width:1}
.dx-t.dx-xn{fill:var(--t2)}
.dx-peer{stroke:var(--t2);stroke-width:1;fill:none}
.dx-hitl{stroke:transparent;stroke-width:14;fill:none}
.dx-plane{outline:none;cursor:default}
.dx-plane .dx-wire{stroke:var(--t2)}
.dx-plane .dx-ah{fill:var(--t2)}
.dx-t.dx-pl{fill:var(--t2)}
.dx-plane:focus-visible .dx-t{fill:var(--accent-text)}
.dx-tracing .dx-plane:not(.on){opacity:.25}
.dx-tracing .dx-plane.on .dx-wire{stroke:var(--accent-graphic);stroke-width:1.5}
.dx-tracing .dx-plane.on .dx-ah{fill:var(--accent-graphic)}
.dx-tracing .dx-plane.on .dx-t{fill:var(--t1)}
.dx-binds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px;margin:24px 0 0}
.dx-binds div{display:grid;grid-template-columns:9em 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--hair)}
.dx-binds dt{font:500 11px/1.5 var(--mono);color:var(--t3)}
.dx-binds dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--t2)}
.dx-binds div.on dt{color:var(--accent-text)}.dx-binds div.on dd{color:var(--t1)}

/* levels */
.dx-stair{fill:none;stroke:var(--t1);stroke-width:1.25}
.dx-exitw{stroke:var(--t3)}
.dx-exit .dx-box{stroke:var(--t3)}
.dx-lvl{outline:none}
.dx-lvl:focus-visible .dx-t{fill:var(--accent-text)}

/* lineage */
.dx-lin ol{list-style:none;margin:0;padding:0;position:relative}
.dx-lin li{position:relative;padding:0 0 24px 40px;max-width:76ch}
.dx-lin li:before{content:"";position:absolute;inset-inline-start:7px;top:0;bottom:0;border-inline-start:1px solid var(--t3)}
.dx-lin li:after{content:"";position:absolute;inset-inline-start:0;top:9px;width:15px;height:15px;box-sizing:border-box;border:1px solid var(--t3);background:var(--bg)}
.dx-lin-era{display:block;font:500 11px/1.4 var(--mono);color:var(--t3);letter-spacing:.04em}
.dx-lin h3{margin:2px 0 6px;font:500 17px/1.35 var(--sans);color:var(--t1)}
.dx-lin p{margin:0;color:var(--t2);font-size:14.5px;line-height:1.6}
.dx-lin sup a{color:var(--t3);text-decoration:none;font:400 11px var(--mono)}
.dx-lin sup a:hover{color:var(--accent-text)}
.dx-lin li.dx-lin-end{padding-bottom:0}
.dx-lin li.dx-lin-end:before{bottom:auto;height:9px}
.dx-lin li.dx-lin-end:after{background:var(--t1);border-color:var(--t1)}

/* Shared with the CAD assembly (cad.js), the mini-scene cells (minis.js) and the protocol explorer cards (ins/proto-viz.js). */
.dg{position:relative;margin:0;color:var(--t1);font:400 14px/1.5 var(--sans);--dg-plate:var(--surface);--dg-plate-2:var(--elev);--dg-lift:color-mix(in srgb,var(--t1) 24%,transparent);--dg-light:color-mix(in srgb,var(--t1) 5%,transparent);--dg-glow:color-mix(in srgb,var(--accent) 38%,transparent);--dg-ember:color-mix(in srgb,var(--accent) 14%,var(--bg))}
.dg .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dg button:focus-visible,.dg [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dg .trk{fill:none;stroke:var(--hair2);stroke-width:1;vector-effect:non-scaling-stroke}
.dg .lead{stroke:var(--hair2);stroke-width:1}
.dg .arrow{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dg .pl{fill:var(--dg-plate);stroke:var(--hair2);stroke-width:1}
.dg .halo{display:none}
.dg .nd{cursor:pointer;outline:none}
.dg .nd .dot{fill:var(--bg);stroke:var(--t2);stroke-width:1.4;transition:stroke var(--dur-fast),fill var(--dur-fast)}
.dg .nd .hit{fill:transparent;stroke:none}
.dg .nd .fr{fill:none;stroke:var(--accent);stroke-width:2;opacity:0}
.dg .nd:focus-visible .fr{opacity:1}
.dg .nd:hover .dot,.dg .nd:focus-visible .dot{stroke:var(--accent-graphic)}
.dg .nd.ping .dot{stroke:var(--t1);fill:var(--dg-plate-2)}
.dg .nd[aria-pressed=true] .dot{stroke:var(--accent-graphic);fill:var(--dg-plate)}
.dg .nd.dim .dot{stroke:var(--hair2)}
.dg-detail{margin-top:18px}
.dg-detail:empty{display:none}
.dg-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;padding:22px 0 4px;border-top:1px solid var(--hair)}
.dg-card.one{grid-template-columns:minmax(0,1fr)}
.dg-card .k{display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);color:var(--t3);margin:0 0 8px}
.dg-card .k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dg-card h3{margin:0 0 8px;font:400 22px/1.2 var(--mono);letter-spacing:-.03em;color:var(--t1)}
.dg-card p{margin:0 0 10px;color:var(--t2);font-size:14.5px;line-height:1.6;max-width:68ch}
.dg-card dl{margin:0;display:grid;gap:0}
.dg-card dl>div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--hair)}
.dg-card dt{font:400 12px var(--mono);color:var(--t3);margin:0}
.dg-card dd{margin:0;font-size:13.5px;color:var(--t1);line-height:1.5}
.dg-card dd .ev{color:var(--t3);font:400 12px var(--mono)}
.dg-card .chips{display:flex;flex-wrap:wrap;gap:6px}
.dg-card .chip{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid var(--hair2);border-radius:5px;font:400 11.5px var(--mono);color:var(--t2);background:transparent}
button.chip{cursor:pointer}
button.chip:hover{color:var(--t1);border-color:var(--t3)}
.dg-card a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.dg-card sup a{text-decoration:none;color:var(--t3);font:400 11px var(--mono)}
.dg-card sup a:hover{color:var(--t1)}
@media (max-width:760px){.dg-card{grid-template-columns:1fr;gap:16px}.dg-card dl>div{grid-template-columns:1fr;gap:2px}}
.dg-cap{margin:14px 0 0;font-size:13px;color:var(--t3);line-height:1.5;max-width:72ch}
@media (prefers-reduced-motion:reduce){.dg *{transition:none!important}}
@media (forced-colors:active){.dg .nd[aria-pressed=true] .dot{stroke:Highlight}}
.dg-card .chip,.dx-asm-dim{border-radius:4px}
.dg-cells{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.dg-cells>*{background:var(--bg);min-width:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.dg-cell{display:flex;flex-direction:column;color:inherit;text-decoration:none;padding:0 0 18px;outline:none;position:relative}
.dg-cell .mini-w{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--hair)}
.dg-cell .mini-w img,.dg-cell canvas.mini{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.dg-cell canvas.mini{opacity:0;transition:opacity var(--dur-base)}
.dg-cell.live canvas.mini{opacity:1}
.dg-cell .k{display:flex;align-items:center;gap:8px;margin:16px 20px 6px;font:500 11.5px var(--mono);color:var(--t3)}
.dg-cell h3{margin:0 20px 8px;font:500 16px/1.3 var(--sans);color:var(--t1)}
.dg-cell p{margin:0 20px;color:var(--t2);font-size:13.5px;line-height:1.55}
.dg-cell:hover,.dg-cell:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-graphic)}
.dg-cell:hover h3,.dg-cell:focus-visible h3{color:var(--t1)}
.dg-cell.live .k:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media (max-width:900px){.dg-cells{--n:2!important}}
@media (max-width:560px){.dg-cells{--n:1!important}}
.dx-ko{fill:var(--bg)}
/* CAD assembly (cad.js): the model on the page ground, parts called out with leaders to labels that say what they do */
.dx-asm{position:relative}
.dx-asm-view{position:relative;width:100%;overflow:hidden}
.dx-asm-view canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:none}
.dx-asm-view canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dx-asm-lead{position:absolute;inset:0;pointer-events:none;overflow:visible}
.dx-asm-lead path{fill:none;stroke:var(--t3);stroke-width:1}
.dx-asm-lead circle{fill:var(--t2)}
.dx-asm-lead text{font:500 10.5px var(--mono);fill:var(--t2)}
.dx-asm-lead g.on path{stroke:var(--accent-graphic)}
.dx-asm-lead g.on circle{fill:var(--accent-graphic)}
.dx-asm-lead g.on text{fill:var(--accent-text)}
.dx-asm-dims{position:absolute;inset:0;pointer-events:none}
.dx-asm-dim{position:absolute;left:0;top:0;margin:-9px 0 0 -30px;min-width:60px;text-align:center;font:500 11px var(--mono);color:var(--t1);background:color-mix(in srgb,var(--bg) 84%,transparent);padding:1px 4px}
.dx-asm-parts{list-style:none;margin:0;padding:0}
.dx-asm:not(.narrow) .dx-asm-parts{position:absolute;inset:0;pointer-events:none}
.dx-asm:not(.narrow) .dx-asm-parts li{position:absolute;left:0;top:0;pointer-events:auto;background:color-mix(in srgb,var(--bg) 82%,transparent)}
.dx-asm-parts button{appearance:none;display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;width:100%;padding:3px 0;border:0;background:transparent;color:var(--t1);text-align:start;cursor:pointer;font:inherit}
.dx-asm-parts .ix{grid-row:1/3;font:500 10.5px/1.6 var(--mono);color:var(--t3);font-variant-numeric:tabular-nums}
.dx-asm-parts .nm{font:500 13px/1.3 var(--sans,inherit);color:var(--t1)}
.dx-asm-parts .fn{font-size:12px;line-height:1.4;color:var(--t2)}
.dx-asm:not(.narrow) .dx-asm-parts li[data-side=r] button{padding-inline-start:4px}
.dx-asm-parts li.on .ix,.dx-asm-parts button[aria-pressed=true] .ix{color:var(--accent-text)}
.dx-asm-parts li.on .nm{box-shadow:0 1px 0 var(--accent-graphic)}
.dx-asm-parts button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dx-asm.narrow .dx-asm-parts{display:grid;grid-template-columns:1fr;gap:6px;margin-top:12px}
.dx-asm.narrow .dx-asm-parts button{padding:6px 0;border-top:1px solid var(--hair)}
.dx-asm-note{min-height:3.2em;margin-top:12px;max-width:72ch}
.dx-asm-h{margin:0 0 6px;font:500 15px/1.3 var(--mono);color:var(--t1);display:flex;gap:10px}
.dx-asm-h .ix{color:var(--accent-text)}
.dx-asm-p{margin:0 0 8px;color:var(--t2);font-size:13.5px;line-height:1.55}
.dx-asm-story{color:var(--t1);border-inline-start:2px solid var(--accent-graphic);padding-inline-start:10px}
.dx-asm-m{margin:0;font:400 11.5px var(--mono);color:var(--t3)}