:root {
  --panel: rgba(22, 26, 30, 0.78);
  --line: rgba(255, 255, 255, 0.12);
  --text: #e8ecef;
  --dim: #a7b0b8;
  --accent: #9bd07c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #aebfd0; color: var(--text);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.panel { position: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; backdrop-filter: blur(6px); }
#hud { top: 12px; left: 12px; min-width: 210px; pointer-events: none; }
#hud .title { font-weight: 700; letter-spacing: .04em; color: var(--accent); margin-bottom: 2px; }
.sub { color: var(--dim); }
#hud-pos { font-variant-numeric: tabular-nums; }

#controls { top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; width: 240px; }
#controls label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); }
#controls .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
#controls .check { justify-content: flex-start; }
select, button { background: #2a3138; color: var(--text); border: 1px solid var(--line); border-radius: 5px;
  padding: 4px 8px; font: inherit; }
button { cursor: pointer; min-width: 64px; }
button:hover, select:hover { border-color: var(--accent); }
#goto { max-width: 150px; }
input[type=range] { width: 130px; accent-color: var(--accent); }

#help { left: 12px; bottom: 12px; color: var(--dim); pointer-events: none; }
#help b { color: var(--text); font-weight: 600; }
#help.hidden { display: none; }

#mini { position: fixed; right: 12px; bottom: 12px; width: 220px; height: 220px; border-radius: 8px;
  border: 1px solid var(--line); cursor: pointer; background: #3b5a6e; }
#mini.big { width: min(86vh, 86vw); height: min(86vh, 86vw); right: 50%; bottom: 50%;
  transform: translate(50%, 50%); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 600;
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .5); }

#start { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 20px; font-size: 15px; pointer-events: none; }
#start.hidden { display: none; }