:root{font-family:system-ui,sans-serif;color:#edf1f7;background:#111820;color-scheme:dark}
body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px}
h1{font-size:20px;margin:0}main{max-width:1800px;margin:auto;padding:0 12px 20px}
#canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none;cursor:grab;background:#000}
#canvas:active{cursor:grabbing}#canvas:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}
#viewport{position:relative}
#viewport:fullscreen{width:100vw;height:100vh;background:#172832}
#viewport:fullscreen #canvas{width:100%;height:100%;aspect-ratio:auto}
#direction-notice{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;background:#172832;color:#edf1f7;text-align:center;pointer-events:none}
#direction-notice[hidden]{display:none}
#direction-notice strong{font-size:clamp(18px,3vw,32px)}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:12px}
button,select{padding:8px 12px;font:inherit;border:1px solid #64778d;border-radius:7px;background:#1c2b3b}
button[aria-pressed=true]{background:#23639b;border-color:#6db4ee}
label{display:flex;flex-wrap:wrap;align-items:center;gap:6px}p{font-size:14px;line-height:1.7;text-align:center}
#message{min-height:24px;color:#ffcf79}#coverage-warning{color:#ffcf79;margin:6px}
.notice,details{color:#aebdcc}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
input{vertical-align:middle;max-width:38vw}#coverage-map{display:block;width:min(100%,600px);height:auto;margin:auto;background:#172832}
@media(max-width:600px){header{padding:10px}main{padding:0 6px 12px}.controls{gap:6px}button,select{padding:8px;font-size:14px}h1{font-size:18px}}
@media(orientation:landscape) and (max-height:600px){header{padding:4px 10px}.controls{margin-top:4px}}