:root { color-scheme: dark; --teal:#173f4f; --blue:#24677e; --ink:#dbe8ec; --panel:rgba(16,25,30,.91); --line:#48616b; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#101418; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button, .file-button, .primary-button, .demo-link { border:1px solid #66818b; border-radius:6px; background:#24343c; color:#fff; cursor:pointer; font:inherit; text-decoration:none; }
button, .file-button, .demo-link { padding:7px 10px; }
button:hover, .file-button:hover, .primary-button:hover, .demo-link:hover { background:#31505d; }
button:disabled { cursor:default; opacity:.42; }
#toolbar { position:fixed; inset:0 0 auto 0; z-index:10; min-height:46px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 10px; background:rgba(12,25,31,.96); border-bottom:1px solid #39515b; }
.brand { margin-right:5px; color:#fff; font-weight:700; font-size:18px; text-decoration:none; }
.brand::before { content:""; display:inline-block; width:20px; height:20px; margin-right:7px; vertical-align:-4px; background:url("data:image/x-icon;base64,AAABAAEAICAQAAEABADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAjIAIAAAAAAAAAAAAAAAACKqMDIAAAAAAAAAAAAAAAIyOiIiAAAAAAAAAAAAAAAiIiKjMgAAAAAAAAAAAAACMjIyIiIAAAAAAAAAAAAAIiIiKjAjIAAAAAAAAAAAAyMjI6IAIiIAAAAAAAAAACIiIiowACMjAAAAAAAAAAMjIyOiAAACIiAAAAAAAAAiIiIqMAAAAyMgAAAAAAADIyMjogAAAAIiIgAAAAAAAiIiKjAAAAAAIyMgAAAAACMjI6IAAAAAACMiIAAAAAIyIqowAAAAAAAiIyMAAAAiMjoiAAAAAAAAAjIiIAACMiKjAAAAAAAAAAIjIyIAIjI6IAAAAAAAAAACMiIiMjIiowAAAAAAAAAAACIyMiIyOiAAAAAAAAAAAAAjIiIyIqMAAAAAAAAAAAAAAiMiMjIgAAAAAAAAAAAAAAIyIjIqMAAAAAAAAAAAAAAAIjIiOiAAAAAAAAAAAAAAACIyIyKjAAAAAAAAAAAAAAACMiIyOiAAAAAAAAAAAAAAACIjIiIyAAAAAAAAAAAAAAADIjI6oiAAAAAAAAAAAAAAACIyqqMAAAAAAAAAAAAAAAACOqogAAAAAAAAAAAAAAAAACIiAAAAAAAAAAD/////f////3///+N////BP///gD///wA///4AP//8AR//+AMP//AHD//gD4f/wB+H/4A/g/+Af8H/AP/B/gH/wPwD/+B4D//gMB//4AA///AAf//wAP//+AH///gB///8Af///AD///4Af///AD///4Af///AP///4H////D//w==") center/contain no-repeat; filter:hue-rotate(105deg) saturate(1.55) brightness(1.22); }
#fileInput { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.demo-link { margin-left:auto; }
.toolbar-menu { position:relative; }
.toolbar-menu > summary { padding:7px 10px; border:1px solid #66818b; border-radius:6px; background:#24343c; color:#fff; cursor:pointer; list-style:none; }
.toolbar-menu > summary::-webkit-details-marker { display:none; }
.toolbar-menu > summary::after { content:" ▾"; }
.toolbar-menu[open] > summary { background:#31505d; }
.toolbar-menu-content { position:absolute; top:calc(100% + 6px); left:0; z-index:20; display:flex; flex-direction:column; gap:9px; min-width:220px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:#10191e; box-shadow:0 10px 32px rgba(0,0,0,.28); }
.toolbar-menu-content label { white-space:nowrap; cursor:pointer; }
.toolbar-menu-content .menu-command { width:100%; margin-top:2px; padding:8px 4px 2px; border:0; border-top:1px solid #425861; border-radius:0; background:transparent; text-align:left; }
.toolbar-menu-content .menu-command:hover { color:#9ed7e7; }
#viewer { position:absolute; inset:46px 0 0; }
#viewer canvas { display:block; width:100%; height:100%; }
#screenLabelLayer { position:absolute; inset:0; z-index:4; overflow:hidden; pointer-events:none; }
.screen-label { position:absolute; max-width:90%; white-space:pre-wrap; text-align:center; line-height:1.15; text-shadow:0 1px 3px #000,0 0 2px #000; }
#welcome { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% 35%,#244d5c 0,#14242b 40%,#101418 75%); }
#welcome[hidden] { display:none; }
.welcome-card { max-width:650px; padding:34px; border:1px solid #4d6872; border-radius:14px; background:rgba(15,29,35,.94); box-shadow:0 24px 70px rgba(0,0,0,.32); text-align:center; }
.eyebrow { margin:0 0 10px; color:#8fc7d6; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1 { margin:0 0 15px; font-size:clamp(30px,5vw,52px); line-height:1.04; }
.welcome-card > p { line-height:1.55; }
.primary-button { display:inline-block; margin:10px 0; padding:11px 17px; background:#2d7188; font-weight:700; }
.support-note { color:#a9bec5; font-size:13px; }
#infoPanel, #layerPanel, #legendPanel, #selectionPanel, #viewControlsPanel { position:fixed; z-index:5; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--panel); font-size:13px; line-height:1.45; box-shadow:0 10px 32px rgba(0,0,0,.18); }
#infoPanel { top:60px; right:14px; max-width:360px; max-height:55vh; overflow:auto; }
#layerPanel { left:14px; bottom:14px; display:flex; flex-direction:column; gap:7px; min-width:210px; max-width:min(340px,45vw); max-height:calc(100vh - 80px); overflow:auto; }
#layerPanel label { cursor:pointer; }
.group-heading { margin-top:5px; padding-top:8px; border-top:1px solid #425861; }
#groupTree { display:flex; flex-direction:column; gap:4px; }
.group-row { display:flex; align-items:center; min-height:20px; padding-left:calc(var(--group-depth) * 15px); overflow:hidden; white-space:nowrap; }
.group-row[hidden] { display:none; }
.group-row label { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.group-row input { margin:0 3px 0 0; vertical-align:-1px; }
.group-toggle { flex:0 0 18px; width:18px; height:18px; margin:0 2px 0 0; padding:0; border:0; background:transparent; color:#bcd0d6; line-height:18px; }
.group-toggle:hover { background:#31505d; }
.group-toggle-spacer { flex:0 0 20px; }
#legendPanel { right:14px; bottom:14px; width:260px; max-height:42vh; overflow:auto; }
#legendContent details { margin-top:7px; }
#legendContent summary { cursor:pointer; font-weight:700; }
.legend-entry { display:flex; align-items:center; gap:7px; margin:5px 0 0 12px; }
.legend-swatch { flex:0 0 22px; height:13px; border:1px solid rgba(255,255,255,.45); border-radius:2px; }
#selectionPanel { right:288px; bottom:14px; width:290px; max-height:42vh; overflow:auto; }
#selectionContent { margin:7px 0; }
#clearSelectionButton { width:100%; padding:5px 8px; }
#viewControlsPanel { top:60px; right:14px; z-index:12; width:min(340px,calc(100vw - 28px)); max-height:calc(100vh - 74px); overflow:auto; background:#10191e; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; font-size:15px; }
#closeViewControlsButton { width:28px; height:28px; padding:0; border:0; background:transparent; font-size:22px; line-height:26px; }
.control-row { display:grid; grid-template-columns:112px 1fr 45px; gap:8px; align-items:center; margin:9px 0; }
.control-row input[type="range"] { width:100%; min-width:0; }
.control-row output { text-align:right; font-variant-numeric:tabular-nums; }
#viewControlsPanel details { margin-top:10px; padding-top:8px; border-top:1px solid #425861; }
#viewControlsPanel summary { cursor:pointer; font-weight:700; }
#status { position:fixed; left:50%; bottom:15px; z-index:8; transform:translateX(-50%); max-width:min(720px,90vw); padding:8px 12px; border-radius:7px; background:rgba(10,19,23,.9); text-align:center; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; }
#status.visible { opacity:1; }
#status.error { background:#6f2424; }
#dropMessage { position:fixed; inset:70px 24px 24px; z-index:20; display:grid; place-items:center; border:3px dashed #7ec6da; border-radius:18px; background:rgba(18,55,68,.9); font-size:26px; font-weight:700; }
#dropMessage[hidden] { display:none; }
.warning-list { margin:7px 0 0; padding-left:18px; color:#ffd89a; }
@media (max-width:700px) { #toolbar { gap:5px; } .brand { width:100%; } .demo-link { margin-left:0; } #viewer { inset:126px 0 0; } #infoPanel { top:138px; max-width:calc(100vw - 28px); } #layerPanel { max-width:70vw; max-height:42vh; } #legendPanel { right:8px; bottom:8px; max-width:55vw; max-height:36vh; } #selectionPanel { right:8px; bottom:8px; max-width:70vw; } #viewControlsPanel { inset:auto 8px 8px; width:auto; max-height:68vh; border-radius:12px; } .welcome-card { padding:24px 18px; } }