/* The canvas is the illustration; controls stay out of its reading order. */
.scene-shell { position: relative; background: #060f16; border: 1px solid #92b8c818; border-radius: 26px; overflow: hidden; box-shadow: 0 28px 80px #0003; }
.scene-toolbar { position: absolute; top: 16px; right: 16px; left: auto; padding: 0; border: 0; z-index: 8; }
.scene-actions { display: flex; gap: 8px; }
.scene-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; min-width: 34px; border: 1px solid #adc9d425; border-radius: 50%; background: #0b182bbd; color: #cadce4; padding: 8px; font-size: 12px; backdrop-filter: blur(12px); }
.scene-actions button[data-scene-view] { border-radius: 18px; padding-inline: 13px; }
.scene-actions button:hover { background: #244050c9; color: #fff; }
.scene-actions button:focus-visible { outline: 2px solid #89e1c6; outline-offset: 4px; }
.scene-actions button[hidden] { display: none; }
.scene-shell[data-webgl='unavailable'] .scene-toolbar { display: none; }
.scene-shell[data-webgl='unavailable'] .scene-label { display: none; }
.scene-shell:has([data-relay-path]) .scene-toolbar { left: 16px; display: flex; justify-content: space-between; }
.scene-path-tabs { display: flex; align-items: center; gap: 2px; background: #102034d9; border: 1px solid #adc9d425; border-radius: 20px; padding: 3px; backdrop-filter: blur(12px); }
.scene-path-tabs button { border: 0; border-radius: 16px; min-height: 28px; padding: 5px 13px; color: #b0c5d5; background: transparent; font-size: 12px; }
.scene-path-tabs button[aria-pressed='true'] { background: #344354; color: #f0e9ff; }
.scene-path-tabs button:focus-visible { outline: 2px solid #bba8e9; outline-offset: 3px; }
.scene-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.scene-actions [data-scene-pause][aria-pressed='true'] svg { stroke: none; fill: currentColor; }
.scene-stage { height: 480px; background: radial-gradient(ellipse at 50% 58%, #143444, #060f16 70%); }
.scene-label { position: absolute; z-index: 4; pointer-events: none; transform: translateX(-50%); min-width: 74px; text-align: center; color: #d9e5eb; line-height: 1.5; opacity: .92; }
.scene-label::before { content: ''; display: block; height: 9px; width: 1px; margin: 0 auto 5px; background: linear-gradient(transparent, var(--label-color)); opacity: .6; }
.scene-label strong { font-size: 13px; font-weight: 550; letter-spacing: .01em; display: block; text-shadow: 0 2px 8px #000; }
.scene-label span { display: block; font-size: 12px; color: #9db3c0; white-space: nowrap; text-shadow: 0 2px 8px #000; }
.scene-label span:empty { display: none; }
.terminal-lan-scene .scene-label small { display: block; color: #9db3c0; font-size: 12px; white-space: nowrap; line-height: 1.5; text-shadow: 0 2px 8px #000; }
.port-forward-scene .scene-label strong { white-space: nowrap; }
.scene-label[data-active='true'] { opacity: 1; }
.scene-label[data-active='true'] strong { color: var(--label-color); }
.scene-label[hidden] { display: none; }
.scene-compact .scene-stage { height: 450px; }
@media (min-width:1550px) { .scene-stage { height: 540px; } }
@media (max-width:1100px) { .scene-stage, .scene-compact .scene-stage { height: 420px; } }
@media (max-width:700px) { .scene-shell { border-radius: 20px; } .scene-stage, .scene-compact .scene-stage { height: 360px; } .scene-toolbar { top: 12px; right: 12px; } .scene-label strong, .scene-label span { font-size: 12px; } }
@media (max-width:380px) { .scene-stage, .scene-compact .scene-stage { height: 340px; } }