.web { flex: 1; min-height: 0; display: flex; gap: 2vw; }
.web-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1vh; }
.web-svg { flex: 1; min-height: 0; width: 100%; display: block; }
.web-grid line { stroke: var(--grid); stroke-width: 2; }
.web-thread { stroke: var(--ink-2); stroke-linecap: round; opacity: 0; }
.web-thread.new { stroke: var(--s2); }
.web-piece { fill: var(--muted); white-space: pre; }
.web-piece.word { fill: var(--ink); font-weight: 700; }
.web-node circle { fill: var(--ink-2); stroke: var(--bg); stroke-width: 3; }
.web-node text { font-size: 34px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 7px; }
.web-node.identity circle, .web-node.identity rect { fill: var(--ink); }
.web-node.identity text { fill: var(--bg); stroke: none; }
.web-node.focus circle { r: 14; }
.web-ghost circle { fill: none; stroke: var(--s1); stroke-width: 3; stroke-dasharray: 6 6; }
.web-trail { stroke: var(--s1); stroke-width: 3; stroke-dasharray: 8 8; opacity: .7; }
/* stage strip (shared with other slides): square tabs like on riemer.fyi, the current one filled black */
.web-stages { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; font-size: .75rem; }
.web-stages span { border: var(--rule) solid var(--ink); padding: .45em .9em; font-weight: 700; text-transform: uppercase; line-height: 1; }
.web-stages span.on { background: var(--ink); color: var(--bg); }
.web-side { width: 28%; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.ours-s { font-size: 1.05rem; margin: 0; padding-left: .9rem; border-left: 4px solid var(--s2); opacity: 0; transition: opacity .5s ease; }
.ours-s.show { opacity: 1; }
.web-piece.fly { fill: var(--ink); }