/* Vector scenes inspired by the supplied references; no screenshots as UI. */
.loading-scene-image { display:none !important; }
.radar[data-scene]:not([data-scene="silk"]) .silk-panorama { display:none; }
.scene-art { position:absolute; inset:var(--rd-head,52px) 0 0; z-index:1; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .5s; background:radial-gradient(ellipse at 15% 70%,#8ebdff20,transparent 55%),radial-gradient(ellipse at 85% 30%,#bba4ec22,transparent 55%); }
.radar.is-in .scene-art { opacity:1; }
.radar.is-out .scene-art { opacity:0; }
.scene-art svg { width:100%; height:100%; position:absolute; inset:0; }
.scene-art * { animation-play-state:paused !important; }
.radar.is-in:not(.is-out) .scene-art * { animation-play-state:running !important; }
.radar[data-scene]:not([data-scene="silk"]) .radar-core { background:color-mix(in srgb,var(--panel) 88%,transparent); }
.scene-line { fill:none; stroke:#96b9ef; stroke-width:1.3; stroke-opacity:.45; }
.scene-wave { animation:sceneWaveFlow var(--duration) ease-in-out var(--delay) infinite alternate; transform-origin:center; }
.scene-buoy { fill:#8ebdff; animation:sceneBuoy 5s ease-in-out var(--delay) infinite alternate; }
@keyframes sceneWaveFlow { from { transform:translate(-65px,-24px) rotate(-3deg); } to { transform:translate(65px,30px) rotate(3deg); } }
@keyframes sceneBuoy { from { transform:translateY(-20px); opacity:.35; } to { transform:translateY(22px); opacity:.85; } }
.scene-grid { position:absolute; inset:-50%; background-image:radial-gradient(circle,#94a9cb66 1px,transparent 1.5px); background-size:28px 28px; transform:perspective(600px) rotateX(52deg); animation:sceneGrid 12s linear infinite; }
@keyframes sceneGrid { to { background-position:0 56px; } }
.scene-link { fill:none; stroke:#89afe2; stroke-width:1; stroke-opacity:.35; stroke-dasharray:5 9; animation:sceneSignal 3s linear infinite; }
@keyframes sceneSignal { to { stroke-dashoffset:-56; } }
.scene-dot { fill:#75aaff; }
.scene-halo { fill:#8abaff; transform-box:fill-box; transform-origin:center; animation:sceneBeacon 3s ease-out var(--delay) infinite; }
@keyframes sceneBeacon { from { transform:scale(.3); opacity:.5; } to { transform:scale(1.8); opacity:0; } }
.scene-orbital { position:absolute; top:calc(50% - 28px); left:50%; }
.scene-orbit { width:var(--size); height:var(--size); position:absolute; left:calc(var(--size) / -2); top:calc(var(--size) / -2); border:1px solid #91b1e444; border-radius:50%; animation:sceneOrbit var(--duration) linear var(--delay) infinite; }
.scene-orbit:nth-child(2) { animation-direction:reverse; border-style:dashed; }
.scene-orbit i,.scene-orbit b { position:absolute; top:50%; left:-10px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#9cbdff 50%,#9c91de); box-shadow:0 0 24px #86b3ff66,inset 1px 1px 3px #fff; }
.scene-orbit b { left:auto; right:-7px; width:14px; height:14px; background:radial-gradient(circle at 30% 25%,#fff,#c1a9ef 60%,#9496d8); }
@keyframes sceneOrbit { to { transform:rotate(360deg); } }
.radar[data-scene="orbits"] .radar-field { width:240px; height:240px; }
.radar[data-scene="orbits"] .radar-core { border-radius:50%; }
.scene-glass { position:absolute; width:180px; height:135px; padding:22px; border:1px solid #a5bbdc44; border-radius:20px; background:linear-gradient(135deg,#bcdcff28,#ddc9f52a); box-shadow:0 14px 40px #8397b518,inset 0 1px 0 #ffffff88; animation:sceneGlass 6s ease-in-out var(--delay) infinite alternate; }
.scene-glass span { display:block; width:55%; height:5px; border-radius:5px; background:#9db8dc55; }
.scene-bars { display:flex; gap:9px; height:78px; align-items:flex-end; }
.scene-bars i { width:13px; height:var(--h); border-radius:5px; background:linear-gradient(#8eb9f688,#b2a3dc44); transform-origin:bottom; animation:sceneBars 3s ease-in-out var(--delay) infinite alternate; }
.scene-glass.g0 { left:9%; top:9%; }.scene-glass.g1 { left:3%; top:62%; }.scene-glass.g2 { left:23%; top:53%; opacity:.45; }.scene-glass.g3 { right:8%; top:12%; }.scene-glass.g4 { right:3%; top:65%; }.scene-glass.g5 { right:23%; top:54%; opacity:.45; }
@keyframes sceneGlass { from { transform:translateY(-13px) rotate(-4deg); } to { transform:translateY(13px) rotate(3deg); } }
@keyframes sceneBars { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
@media(max-width:760px) { .scene-glass { width:110px; height:115px; padding:14px; }.scene-glass.g2,.scene-glass.g5 { display:none; }.scene-art { opacity:.7; } }
/* Material and lighting pass. Shared foreground remains real application UI. */
.radar[data-scene]:not([data-scene="silk"]) {
 --scene-edge:#ffffffc7; --scene-glass:#f6f9ff9c; --scene-shadow:#506d9a1a;
}
.scene-art {
 background:radial-gradient(ellipse at 18% 85%,#95badf23,transparent 50%),radial-gradient(ellipse at 85% 14%,#c7b9d729,transparent 52%),linear-gradient(125deg,#dde8f00a,#fff0 50%,#e1dfe913);
}
.scene-art::after {
 content:''; position:absolute; inset:0; pointer-events:none;
 background:radial-gradient(ellipse at 50% 43%,transparent 18%,#f5f8fc0a 48%,#f5f8fc7a 100%);
}
.radar[data-scene]:not([data-scene="silk"]) .radar-core {
 border:1px solid var(--scene-edge);
 background:linear-gradient(135deg,var(--scene-glass),color-mix(in srgb,var(--panel) 82%,transparent));
 box-shadow:0 24px 60px -16px var(--scene-shadow),0 3px 8px #6580a307,inset 0 1px 0 #fff9,inset 0 -1px 0 #7d96b514;
 backdrop-filter:blur(24px); gap:13px;
}
.radar[data-scene]:not([data-scene="silk"]) .radar-core::before {
 content:''; position:absolute; left:24%; right:24%; top:-1px; height:1px;
 background:linear-gradient(90deg,transparent,#adc4e9,transparent);
}
.radar[data-scene]:not([data-scene="silk"]) .radar-core .sum { font-weight:600; font-size:calc(48px * var(--fit,1)); letter-spacing:-.045em; }
.radar[data-scene]:not([data-scene="silk"]) .radar-core .cap { font-size:9px; font-weight:650; letter-spacing:.24em; }
.radar[data-scene]:not([data-scene="silk"]) .radar-hint,
.radar[data-scene]:not([data-scene="silk"]) .radar-foot { background:color-mix(in srgb,var(--panel) 65%,transparent); box-shadow:0 5px 24px #6c87ae08,inset 0 1px 0 #ffffff50,0 0 0 1px var(--line-soft); }
.scene-wave { filter:drop-shadow(0 9px 12px #749bb217); }
.scene-wave:nth-of-type(even) { opacity:.7; }
.scene-line { stroke:#e8f2ff; stroke-width:1.6; stroke-opacity:.9; filter:drop-shadow(0 1px 1px #7a9cc250); }
.scene-buoy { fill:#dbe9fa; stroke:#fff; stroke-width:1; filter:drop-shadow(0 3px 5px #789eca55); }
.radar[data-scene="waves"] .scene-art { background:radial-gradient(ellipse at 26% 65%,#9bbcdf29,transparent 55%),radial-gradient(ellipse at 82% 34%,#baaacf30,transparent 55%); }
.scene-grid { opacity:.45; background-size:35px 35px; mask-image:radial-gradient(ellipse,#000,transparent 63%); animation-duration:24s; }
@keyframes sceneGrid { to { background-position:0 70px; } }
.scene-wire { stroke:#8ba7c3; stroke-opacity:.26; stroke-width:1; fill:none; }
.scene-link { stroke:#729ee2; stroke-opacity:.65; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:12 400; animation:sceneSignal 6s linear var(--delay) infinite; }
@keyframes sceneSignal { to { stroke-dashoffset:-412; } }
.scene-dot { fill:#a2c1ed; stroke:#fff; stroke-width:1.4; filter:drop-shadow(0 2px 4px #658db666); }
.scene-halo { fill:#91b1d8; animation-duration:4.5s; }
@keyframes sceneBeacon { from { transform:scale(.35); opacity:.25; } to { transform:scale(1.8); opacity:0; } }
.scene-dial { position:absolute; width:280px; height:280px; left:-140px; top:-140px; border-radius:50%; background:repeating-conic-gradient(from 0deg,#8ca7c345 0deg 1deg,transparent 1deg 10deg); mask-image:radial-gradient(circle,transparent 67%,#000 67.5%,#000 70%,transparent 70.5%); }
.scene-orbit { border-color:#9bb2cc30; box-shadow:0 0 0 1px #ffffff30; }
.scene-orbit:nth-child(2) { border-style:solid; }
.scene-orbit::after { content:''; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid transparent; border-top-color:#97addb65; transform:rotate(25deg); }
.scene-orbit i { width:26px; height:26px; left:-13px; margin-top:-13px; background:radial-gradient(circle at 28% 23%,#fff 0%,#dce9fa 20%,#94add8 57%,#6e86b6 82%,#ccd6ea); box-shadow:0 5px 12px #8196bb33,inset 1px 1px 3px #fff; }
.scene-orbit b { margin-top:-7px; background:radial-gradient(circle at 28% 23%,#fff,#c8bedf 40%,#9d91bb 78%,#e1dbea); box-shadow:0 4px 10px #8a7aa32b,inset 1px 1px 2px #fff; }
.radar[data-scene="orbits"] .radar-core::before { display:none; }
.radar[data-scene="orbits"] .radar-core { background:linear-gradient(145deg,var(--panel) 14%,var(--scene-glass) 75%,#c5d3e620); }
.scene-glass { border-color:var(--scene-edge); background:linear-gradient(125deg,var(--scene-glass),#adc1dc1a 65%,#c9bbdc22); box-shadow:0 20px 36px -16px #6683a830,0 4px 8px #6381a309,inset 0 1px 0 #fff9,inset 0 -1px 0 #7086a11c; border-radius:18px; animation-duration:9s; }
.scene-glass::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,#ffffff00 15%,#ffffff50 32%,#ffffff00 48%); }
.scene-glass span { height:4px; width:40%; background:#90a9c54f; }
.scene-glass span::after { content:''; width:5px; height:5px; position:absolute; right:20px; top:21px; background:#99b1d17a; box-shadow:-9px 0 #99b1d130; border-radius:50%; }
.scene-bars { border-bottom:1px solid #95a9c21a; gap:10px; }
.scene-bars i { background:linear-gradient(110deg,#b8cee7,#97b4d96b 65%,#b7b1d559); box-shadow:inset 1px 0 0 #ffffff7a; width:14px; border-radius:4px 4px 1px 1px; animation-duration:4.5s; }
.scene-glass.g2,.scene-glass.g5 { filter:blur(1px); opacity:.35; scale:.86; }
.scene-glass .scene-spark { position:relative; height:85px; margin-top:8px; width:100%; overflow:visible; }
.scene-spark-area { fill:#91afd41c; }
.scene-spark-line { stroke:#90abd0; fill:none; stroke-width:2; stroke-linecap:round; stroke-dasharray:200; animation:sceneDraw 7s ease-in-out var(--delay) infinite alternate; }
@keyframes sceneDraw { from { stroke-dashoffset:140; opacity:.35; } to { stroke-dashoffset:0; opacity:.9; } }
@keyframes sceneGlass { from { transform:translateY(-10px) perspective(800px) rotateY(-10deg) rotate(-3deg); } to { transform:translateY(10px) perspective(800px) rotateY(6deg) rotate(2deg); } }
:root:not([data-theme="light"]) .radar[data-scene]:not([data-scene="silk"]) { --scene-edge:#adbfdb20; --scene-glass:#26344794; --scene-shadow:#00000066; }
:root:not([data-theme="light"]) .scene-art::after { background:radial-gradient(ellipse at 50% 43%,transparent 25%,#0c152722 70%,#0c152755); }
:root:not([data-theme="light"]) .scene-line { stroke:#b7cce0; stroke-opacity:.35; }
:root:not([data-theme="light"]) .scene-glass::before { opacity:.1; }
:root:not([data-theme="light"]) .scene-glass { box-shadow:0 20px 36px -16px #0006,inset 0 1px 0 #b9cfe520; }
:root:not([data-theme="light"]) .scene-dot { stroke:#b4c3d9; }
@media(max-width:760px) { .scene-glass .scene-spark { height:65px; }.scene-bars { gap:6px; }.scene-bars i { width:10px; } }
@media(prefers-reduced-motion:reduce) { .scene-art * { animation:none !important; }.scene-halo { opacity:.15; } }