/* The scene is the entire section; controls stay at its edges. */
.rx{--rx-accent:var(--cta,#d9f65c);--rx-line:#ffffff19;background:#0c1915;color:#eaf3ef;padding:40px 0;scroll-margin-top:78px;overflow:clip}
.tone-on .rx{background:none}/* одно полотно (tone.js): пульт — карточка на общем фоне, без своей полосы */
.rx *{box-sizing:border-box}
.rx-wrap{width:min(1480px,calc(100% - 64px));margin:auto}
.rx-console{border:1px solid var(--rx-line);border-radius:18px;overflow:hidden;background:#101f19}
.rx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:14px 24px;border-bottom:1px solid var(--rx-line)}
.rx-brand{display:flex;gap:14px;align-items:center;font-size:13px;letter-spacing:.06em;font-weight:600;white-space:nowrap}.rx-brand>span{color:#91a794;font-weight:400}.rx-brand>span:last-child{letter-spacing:0}
.rx button{font:inherit;font-size:11px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 160ms,background 160ms,transform 160ms}
.rx button:focus-visible{outline:2px solid var(--rx-accent);outline-offset:3px}.rx button:active{transform:scale(.96)}.rx button:disabled{opacity:.4;cursor:default}
.rx-cameras{display:flex;align-items:center;gap:4px}.rx-cameras button{height:38px;padding:0 14px;background:transparent;color:#99af9f;border:1px solid transparent;border-radius:7px;font-variant-numeric:tabular-nums;white-space:nowrap}.rx-cameras button[aria-pressed=true]{background:#ffffff0a;border-color:#ffffff24;color:#f1f5ed}
.rx-mode{display:flex;align-items:center;gap:9px;background:none;border:0;color:#b6c6b8;padding:10px 0}.rx-switch{width:25px;height:15px;padding:3px;background:#43574b;border-radius:20px}.rx-switch::after{content:'';display:block;width:9px;height:9px;background:#cbd8cd;border-radius:50%;transition:transform 180ms}.rx-mode[aria-pressed=true]{color:var(--rx-accent)}.rx-mode[aria-pressed=true] .rx-switch{background:var(--rx-accent)}.rx-mode[aria-pressed=true] .rx-switch::after{transform:translateX(10px);background:#24311c}
.rx-viewport{position:relative;height:clamp(510px,70vw,740px);background:radial-gradient(ellipse at 50% 45%,#2b3a2c,#102319 64%,#0b1b13);overflow:hidden}
.rx-canvas{position:absolute;inset:0;cursor:grab}.rx-canvas:active{cursor:grabbing}.rx-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.rx-scene-caption{position:absolute;left:24px;top:24px;display:flex;align-items:center;gap:9px;color:#a7bca9;font-size:11px;pointer-events:none;font-variant-numeric:tabular-nums}.rx-dot{width:5px;height:5px;background:var(--rx-accent);border-radius:50%}
.rx-metrics{position:absolute;left:24px;bottom:28px;display:flex;gap:24px;font-size:11px;color:#91a895;pointer-events:none}.rx-metrics b{color:#e7eedf;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;margin-right:4px}.rx-metrics[hidden]{display:none}
.rx-view-controls{position:absolute;right:20px;bottom:19px;display:flex;align-items:center;padding:4px;border:1px solid #ffffff21;border-radius:10px;background:#102118e8}.rx-view-controls button{display:grid;place-items:center;width:35px;height:35px;background:none;border:0;color:#d1dfcc;font-size:20px;border-radius:6px}.rx-view-controls button[data-view=pause]{font-size:13px}.rx-view-controls>span{height:16px;width:1px;background:#ffffff1c;margin:0 3px}
.rx-tracks{position:absolute;inset:0;pointer-events:none;overflow:hidden}.rx-track{position:absolute;border:1px solid #d9f65c66;color:#e5ffa4;font:10px/1.4 ui-monospace,monospace;will-change:transform}.rx-track::before,.rx-track::after{content:'';position:absolute;width:8px;height:8px;border-color:#dbff88;border-style:solid}.rx-track::before{top:-1px;left:-1px;border-width:2px 0 0 2px}.rx-track::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}.rx-track span{position:absolute;left:-1px;bottom:100%;white-space:nowrap;background:#14251fed;padding:3px 5px;border-left:2px solid #d9f65c}.rx-track small{display:block;font:9px/1.4 ui-monospace,monospace;color:#b4c8a9}.rx-track[data-role=staff]{border-color:#8fe3c466;color:#c9f3e3}.rx-track[data-role=staff] span{border-color:#8fe3c4}
.rx-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#a7bca9;font-size:12px}.rx-loading-mark{font:500 48px 'Unbounded',sans-serif;color:var(--rx-accent)}.rx.is-rendered .rx-fallback{display:none}.rx:not(.is-rendered) .rx-scene-caption{display:none}
@media(hover:hover) and (pointer:fine){.rx button:not(:disabled):hover{background:#ffffff0c;color:#e3ff9c}}
@media(max-width:900px){.rx-wrap{width:calc(100% - 32px)}.rx-metrics{gap:14px;bottom:80px}.rx-viewport{height:610px}.rx-toolbar{padding:14px 18px}.rx-brand{gap:8px}.rx-cameras button{padding:0 10px}}
@media(max-width:600px){.rx{padding:24px 0}.rx-wrap{width:calc(100% - 24px)}.rx-toolbar{flex-wrap:wrap;gap:10px;padding:14px}.rx-brand{order:0}.rx-mode{order:1;margin-left:auto}.rx-cameras{order:2;width:100%;justify-content:space-between;border-top:1px solid var(--rx-line);padding-top:10px}.rx-cameras button{flex:1;padding:0 6px;font-size:10px}.rx-viewport{height:540px}.rx-scene-caption{top:18px;left:16px}.rx-metrics{left:16px;right:16px;bottom:79px;gap:10px;justify-content:space-between;font-size:9px}.rx-metrics b{font-size:12px;display:block;margin-bottom:4px}.rx-view-controls{bottom:16px;right:14px}.rx-view-controls button{width:38px;height:38px}.rx-track{font-size:8px}.rx-track small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.rx *,.rx *::after{transition:none!important}}
.rx-track b{font:inherit}.rx-track span[hidden]{display:none}
.rx[data-camera="0"] .rx-metrics,.rx[data-camera="1"] .rx-metrics,.rx[data-camera="2"] .rx-metrics{padding:10px 14px;bottom:19px;left:14px;border-radius:8px;background:#102118ed;color:#b7c9b7}
@media(max-width:900px){.rx[data-camera="0"] .rx-metrics,.rx[data-camera="1"] .rx-metrics,.rx[data-camera="2"] .rx-metrics{bottom:79px}}
@media(max-width:600px){.rx-viewport{height:480px}}
.rx-track,.rx-track b,.rx-track small{font-family:Manrope,Arial,sans-serif;font-size:10px;letter-spacing:.01em}.rx-track b{font-weight:600}
/* More scene views, still reachable without horizontal scrolling on a phone. */
@media(max-width:1100px){.rx-toolbar{flex-wrap:wrap}.rx-brand{order:0}.rx-mode{order:1;margin-left:auto}.rx-cameras{order:2;width:100%;justify-content:center}}
@media(max-width:600px){.rx-cameras{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.rx-cameras button{width:100%}}
/* A lens, not a screen: soft vignette over the render, under every label and control. */
.rx-lens{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 58%,rgba(6,12,9,.4) 100%)}
.rx:not(.is-rendered) .rx-lens{display:none}
/* On a camera feed the picture turns into CCTV: flatter colour, fine scanlines, a heavier vignette, REC. */
.rx-lens::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),radial-gradient(100% 80% at 50% 50%,transparent 52%,rgba(0,0,0,.48) 100%)}
.rx[data-feed=cctv] .rx-lens::after{opacity:1}
.rx-canvas canvas{transition:filter .4s}
.rx[data-feed=cctv] .rx-canvas canvas{filter:saturate(.32) contrast(1.08) brightness(1.04)}
.rx-rec{display:none;align-items:center;gap:6px;margin-left:10px;padding-left:10px;border-left:1px solid #ffffff26;color:#e9dcd6;letter-spacing:.04em}
.rx-rec i{width:6px;height:6px;border-radius:50%;background:var(--bad,#e5533d);animation:rx-rec 1.6s steps(1) infinite}
.rx-rec b{font-weight:500;color:#e8efe2;font-variant-numeric:tabular-nums}
.rx[data-feed=cctv] .rx-rec{display:inline-flex}
@keyframes rx-rec{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.rx-rec i{animation:none}.rx-canvas canvas{transition:none}}