:root{--card-bg:rgba(15,18,25,.95);--txt:#e9f0ff;--muted:#a8b3c7;--accent:#66e3ff;--ring:#7dd3fc}
*{box-sizing:border-box}
/* NO global body reset to avoid site conflicts */
/* body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:#0b1220;color:var(--txt);display:grid;place-items:center;min-height:100svh;padding:12px} */

.scene{position:relative;width:min(1200px,95vw);aspect-ratio:1344/768;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.45);outline:1px solid rgba(255,255,255,.08);isolation:isolate;color:var(--txt)}
.scene img{width:100%;height:100%;object-fit:cover;display:block}

.marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.hotspot{position:relative;width:18px;height:18px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff,#b8ecff 40%,#00a3ff 65%,#0085d1 100%);box-shadow:0 0 0 3px rgba(125,211,252,.45),0 0 18px 6px rgba(125,211,252,.25);cursor:pointer;outline:none}
.hotspot:focus-visible{outline:2px solid var(--ring);outline-offset:4px}
.hotspot::after{content:"";position:absolute;inset:-14px;border-radius:999px}

.card{position:absolute;z-index:5;left:50%;bottom:26px;transform:translateX(-50%);min-width:248px;max-width:290px;background:var(--card-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 12px 10px;box-shadow:0 16px 40px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .16s ease, transform .16s ease}
.card h3{margin:0 0 4px;font-size:1rem}
.card p{margin:0 0 10px;color:var(--muted);font-size:.9rem;line-height:1.35}
.card a{display:inline-block;text-decoration:none;color:#001018;background:var(--accent);padding:6px 10px;border-radius:8px;font-weight:600;font-size:.9rem}
.card::before{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-top-color:rgba(255,255,255,.12)}
.card::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--card-bg)}

.marker:focus-within .card,
.marker[data-open="true"] .card{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(-4px)}

.marker.edge-left .card{left:8px;transform:translateX(0) translateY(-4px)}
.marker.edge-right .card{left:auto;right:8px;transform:translateX(0) translateY(-4px)}

.legend{position:absolute;left:12px;top:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:10px;font-size:.9rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

@media (max-width:700px){.card{min-width:220px}}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9999}
.modal[open]{display:flex}
.modal__panel{width:min(1100px,95vw);height:min(90vh,800px);background:#0d1b2a;border:1px solid rgba(255,255,255,.12);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.6);position:relative;overflow:hidden}
.modal__hd{position:absolute;top:8px;right:8px;z-index:2}
.modal__close{background:#12243a;border:1px solid rgba(255,255,255,.2);color:#e9f0ff;font-weight:700;border-radius:10px;padding:6px 10px;cursor:pointer}
.modal__iframe{position:absolute;inset:0;border:0;width:100%;height:100%;background:#0d1b2a}
.mv-title {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}