/* Scene "topology" — architecture graph with travelling packets */
.tp { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tp-stage { position: relative; flex: 1; margin: 14px 16px 6px; }
.tp-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tp-edges line { stroke: rgba(150, 172, 255, 0.22); stroke-width: 1.5; stroke-dasharray: 4 5; transition: stroke 0.4s, stroke-width 0.4s; }
.tp-edges line.is-hot { stroke: rgba(70, 225, 255, 0.85); stroke-dasharray: none; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(70, 225, 255, 0.8)); }
.tp-group { position: absolute; border: 1px dashed rgba(150, 172, 255, 0.28); border-radius: 12px; background: rgba(91, 140, 255, 0.035); }
.tp-group span { position: absolute; left: 8px; top: -8px; padding: 0 6px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); background: #0b1336; white-space: nowrap; }
.tp-group.tp-mint { border-color: rgba(87, 242, 176, 0.35); background: rgba(87, 242, 176, 0.035); }
.tp-group.tp-mint span { color: var(--mint); }
.tp-group.tp-amber { border-color: rgba(255, 190, 92, 0.35); background: rgba(255, 190, 92, 0.03); }
.tp-group.tp-amber span { color: var(--amber); }
.tp-node { --c: var(--accent); --c-rgb: var(--accent-rgb); position: absolute; z-index: 1; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: 84px; text-align: center; }
.tp-node[data-kind="client"] { --c: var(--cyan); --c-rgb: 70, 225, 255; }
.tp-node[data-kind="edge"] { --c: var(--violet); --c-rgb: 154, 131, 255; }
.tp-node[data-kind="data"] { --c: var(--mint); --c-rgb: 87, 242, 176; }
.tp-node[data-kind="auth"] { --c: var(--amber); --c-rgb: 255, 190, 92; }
.tp-node[data-kind="queue"] { --c: var(--rose); --c-rgb: 255, 111, 134; }
.tp-node[data-kind="cms"] { --c: var(--violet); --c-rgb: 154, 131, 255; }
.tp-node[data-kind="ext"] { --c: var(--muted); --c-rgb: 163, 174, 208; }
.tp-node[data-kind="ai"] { --c: var(--cyan); --c-rgb: 70, 225, 255; }
.tp-chip { position: relative; display: grid; place-items: center; min-width: 46px; height: 34px; padding: 0 8px; border-radius: 10px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--c); background: #0d1640; border: 1px solid rgba(var(--c-rgb), 0.35); transition: box-shadow 0.4s, background 0.4s, transform 0.4s var(--ease); }
.tp-node.is-hit .tp-chip { background: linear-gradient(rgba(var(--c-rgb), 0.22), rgba(var(--c-rgb), 0.22)), #0d1640; box-shadow: 0 0 0 4px rgba(var(--c-rgb), 0.14), 0 0 18px rgba(var(--c-rgb), 0.55); transform: scale(1.06); }
.tp-chip::before, .tp-chip::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid rgba(var(--c-rgb), 0.3); background: #0b1336; opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
.tp-node.is-scaled .tp-chip::before { opacity: 1; transform: translate(5px, -5px); }
.tp-node.is-scaled .tp-chip::after { opacity: 1; transform: translate(10px, -10px); }
.tp-label { font-size: 10.5px; line-height: 1.25; color: var(--muted); }
.tp-packet { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 3px #fff; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.tp-packet[data-tone="mint"] { background: var(--mint); box-shadow: 0 0 12px var(--mint), 0 0 3px #fff; }
.tp-packet[data-tone="amber"] { background: var(--amber); box-shadow: 0 0 12px var(--amber), 0 0 3px #fff; }
.tp-packet[data-tone="violet"] { background: var(--violet); box-shadow: 0 0 12px var(--violet), 0 0 3px #fff; }
.tp-caption { flex: none; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; border-top: 1px solid var(--line); background: rgba(5, 10, 28, 0.55); font-size: 11.5px; color: var(--text); }
.tp-caption.is-in .tp-text { animation: tp-in 0.5s var(--ease); }
@keyframes tp-in { from { opacity: 0; transform: translateY(6px); } }
.tp-step { flex: none; color: var(--cyan); }
.tp-caption[data-tone="mint"] .tp-step { color: var(--mint); }
.tp-caption[data-tone="amber"] .tp-step { color: var(--amber); }
.tp-text { flex: 1; min-width: 0; line-height: 1.4; }
.tp-tag { flex: none; }
.tp-tag[hidden] { display: none; }
@media (max-width: 560px) {
  .tp-stage { margin: 12px 8px 4px; }
  .tp-node { width: 62px; }
  .tp-chip { min-width: 38px; height: 28px; font-size: 9.5px; padding: 0 5px; }
  .tp-label { font-size: 9px; }
  .tp-group span { font-size: 8.5px; }
  .tp-caption { font-size: 10.5px; padding: 8px 10px; }
  .tp-tag { display: none; }
}