.compute-scene{--scene-ice:#badfff;position:relative;width:100%;min-width:0;isolation:isolate;background:radial-gradient(ellipse at 58% 46%,#142033 0%,#0b101b 62%);color:#d3e3f1;overflow:hidden;border-radius:2px}
.compute-scene svg{display:block;width:100%;height:auto;overflow:visible}
.scene-layer{opacity:0;transition:opacity .65s ease;pointer-events:none}
.scene-layer.is-active{opacity:1}
.scene-rule{stroke:#304158;stroke-width:1;fill:none}
.scene-wire{stroke:#365573;stroke-width:1.35;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scene-wire-bright{stroke:#87c1f0;stroke-width:1.3;fill:none;stroke-linecap:round;opacity:.75}
.scene-label{fill:#90a5bb;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:1.45px}
.scene-label-bright{fill:#d0e4f7;font-size:10px;letter-spacing:1.5px}
.scene-token{filter:url(#tf-scene-softglow)}
.scene-glass{fill:#bedfff;fill-opacity:.045;stroke:#8bb6df;stroke-opacity:.3;stroke-width:.8}
.scene-caption{position:absolute;left:25px;right:25px;bottom:19px;display:flex;justify-content:space-between;gap:18px;color:#6f8298;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;line-height:1.5;letter-spacing:.03em}
.scene-caption span:first-child{color:#9bb2c9}
.scene-index{position:absolute;left:25px;top:23px;display:flex;align-items:center;gap:10px;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.6px;color:#a9bed3}
.scene-index::before{content:"";width:15px;height:1px;background:#aacfee}
@media(max-width:540px){.compute-scene svg{width:132%;max-width:none;margin-left:-16%;margin-top:30px;margin-bottom:27px}.scene-label{font-size:12px;letter-spacing:.9px}.scene-label-bright{font-size:13px}.scene-index{left:17px;top:18px;font-size:8px}.scene-caption{left:17px;right:17px;bottom:13px;font-size:8px;gap:12px}.scene-caption span:first-child{max-width:68%}.scene-caption span:last-child{text-align:right;max-width:90px}}
@media(prefers-reduced-motion:reduce){.scene-layer{transition:none}}

/* Keep diagram explanations readable instead of shrinking them with the SVG. */
.scene-index{position:relative;left:auto;top:auto;padding:20px 25px 0;font-size:13px;line-height:1.5;letter-spacing:.04em}
.scene-caption{position:relative;left:auto;right:auto;bottom:auto;margin:0 25px 22px;font-size:13px;line-height:1.65;flex-wrap:wrap;gap:8px 24px}
.scene-label{font-size:12px;letter-spacing:.7px}
.scene-label-bright{font-size:13px;letter-spacing:.8px}
@media(max-width:540px){.scene-index{padding:18px 17px 0;font-size:13px}.compute-scene svg{width:100%;margin:0;max-width:100%}.scene-label{display:none}.scene-label-bright{display:block;font-size:34px;letter-spacing:.4px}.scene-caption{display:block;margin:0 17px 18px;font-size:13px}.scene-caption span:first-child,.scene-caption span:last-child{display:block;max-width:none;text-align:left}.scene-caption span:last-child{margin-top:6px}}