:root { color-scheme:dark; font-family:system-ui,sans-serif; background:#061321; color:#dcebf3; }
* { box-sizing:border-box; }
body { margin:0; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; border-bottom:1px solid #355366; background:#0c2031; }
h1 { margin:2px 0 0; font-size:22px; } h2 { margin:0 0 14px; font-size:16px; }
.eyebrow { color:#6bd9e9; letter-spacing:3px; font-size:10px; font-weight:700; }
.badge { border:1px solid #546c60; border-radius:20px; padding:6px 12px; color:#ffdc81; font-size:12px; }
main { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; padding:20px; max-width:1800px; margin:auto; }
.scene-panel,.panel { background:#102a3b; border:1px solid #416276; border-radius:10px; overflow:hidden; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:12px; border-bottom:1px solid #416276; }
label { display:flex; align-items:center; gap:8px; font-size:13px; }
select,button { border:1px solid #648295; background:#183c51; color:#e2f4ff; border-radius:5px; padding:7px; max-width:100%; }
button { cursor:pointer; } button[aria-pressed=true] { border-color:#68e9f5; background:#22576e; }
select:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid #7fe8ff; outline-offset:3px; }
#viewport { height:min(72vh,800px); min-height:240px; overflow:auto; background:#030b11; overscroll-behavior:contain; }
#scene { position:relative; image-rendering:pixelated; transform-origin:top left; }
#scene canvas { position:absolute; inset:0; image-rendering:pixelated; width:100%; height:100%; }
.map-notice { margin:0; padding:24px; max-width:560px; color:#ffdc81; line-height:1.6; }
#map-info { padding:0 14px; min-height:36px; font-size:12px; line-height:1.6; }
aside { display:grid; align-content:start; gap:16px; min-width:0; }
.panel { padding:16px; }.panel p { font-size:12px; line-height:1.65; color:#bcd2df; }
#actor-preview { display:block; margin:20px auto; image-rendering:pixelated; background:radial-gradient(#2e5365,#102a3b); }
#directions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#error { margin:20px; border:1px solid #ed6868; padding:14px; }
@media(max-width:800px) { main { grid-template-columns:1fr; padding:10px; gap:12px; } aside { grid-template-columns:repeat(2,minmax(0,1fr)); } #viewport { height:55vh; } header { padding:12px; } }
@media(max-width:480px) { aside { grid-template-columns:1fr; }.badge { font-size:10px; }.toolbar { gap:10px; } }