:root{color-scheme:dark;--panel:302px;--top:58px;--bottom:28px;font-family:system-ui,"Microsoft JhengHei",sans-serif;font-size:14px;background:#141c24;color:#e7eef3}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}button,summary{font:inherit;min-height:44px;touch-action:manipulation;cursor:pointer}button{border:1px solid #536574;border-radius:7px;background:#283846;color:#eef5fa;padding:8px;font-weight:600}button:hover,button:focus-visible{background:#3e5366}button[aria-pressed=true]{background:#15606c;border-color:#63d8de}button:disabled{opacity:.5;cursor:wait}header{height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:5px 12px;gap:12px;border-bottom:1px solid #455768}header strong{font-size:17px}header small{display:block;font-size:12px;color:#9db4c5}header button{flex-shrink:0}aside{position:absolute;top:var(--top);bottom:var(--bottom);left:0;width:var(--panel);padding:12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#192631}h2{font-size:14px;margin:6px 0 8px;color:#bdd5e4}.grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}.hint{font-size:12px;line-height:1.6;color:#b5c7d5}#selection{font-weight:600;line-height:1.5;padding:8px 0;white-space:pre-line}summary{padding:10px 0;color:#78d8df}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 system-ui;user-select:text;-webkit-user-select:text}#units{display:grid;gap:6px}#units button{text-align:left;font-size:12px}main{position:absolute;top:var(--top);bottom:var(--bottom);right:0;left:var(--panel);overflow:hidden;background:#758596}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none}#labels{position:absolute;inset:0;pointer-events:none}.unit-label{position:absolute;transform:translate(-50%,-50%);background:#112332dd;border:1px solid #a6b9c5;border-radius:4px;color:#fff;font-size:11px;padding:3px 5px;white-space:nowrap;pointer-events:none}#camera-controls{position:absolute;right:10px;bottom:34px;display:flex;gap:5px}#camera-controls button{min-width:44px;background:#172e40eb}#status{position:absolute;bottom:4px;left:8px;right:8px;text-shadow:0 1px 3px black;color:white;font-size:12px;pointer-events:none}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#142332;z-index:5}progress{width:min(340px,80%);height:18px}footer{position:absolute;bottom:0;height:var(--bottom);width:100%;font-size:10px;line-height:12px;padding:2px 10px;color:#acbdca;overflow:hidden}body.hide-hud aside{display:none}body.hide-hud main{left:0}#portrait{display:none;position:fixed;inset:0;background:#142332f5;z-index:20;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}#portrait strong{font-size:24px}@media(max-height:520px){:root{--panel:260px;--top:48px;--bottom:24px}header strong{font-size:14px}header small{display:none}aside{padding:8px}.grid{gap:5px}button{font-size:12px}#camera-controls{bottom:29px}#status{font-size:10px}}@media(orientation:portrait) and (max-width:1000px){#portrait{display:flex}}
@media(max-height:520px){.unit-label:nth-child(3n+1){margin-top:-24px}.unit-label:nth-child(3n){margin-top:24px}}