:root{
  --ink:#0d1a2b; --ink-2:#3d5470; --line:rgba(13,26,43,.18);
  --panel:rgba(255,255,255,.92); --accent:#1d4e89; --warn:#c8442a; --good:#1d8f4e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:#dfe7ee; overflow:hidden;
}
#stage{position:fixed;inset:0}
#gl,#hud{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{pointer-events:none}
#steerpad{position:absolute;inset:auto 0 0 0;height:38%;touch-action:none}

#bar{
  position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:8px 14px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.72));
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
#bar h1{font:700 19px/1.1 var(--mono);margin:0;letter-spacing:.02em}
#subtitle{font-size:12px;color:var(--ink-2)}
#subtitle em{font-style:italic}
#controls{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#controls label{font:600 11px var(--mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
select,button{
  font:600 13px var(--mono);color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:5px 9px;cursor:pointer;
}
button:hover,select:hover{border-color:var(--accent)}
button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#btnStart{background:var(--accent);color:#fff;border-color:var(--accent)}
#btnStart:hover{background:#16406f}

#ticker{
  position:fixed;left:50%;transform:translateX(-50%);bottom:12px;
  font:600 12px var(--mono);color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:5px;padding:6px 12px;max-width:min(560px,88vw);
  text-align:center;pointer-events:none;
}
#ticker:empty{display:none}

dialog{
  border:1px solid var(--line);border-radius:9px;padding:0;max-width:min(760px,92vw);
  max-height:84vh;color:var(--ink);background:#fff;box-shadow:0 18px 60px rgba(13,26,43,.28);
}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(13,26,43,.45)}
dialog h2{font:700 17px var(--mono);margin:0;padding:14px 18px;border-bottom:1px solid var(--line)}
dialog > div:not(.row){padding:16px 18px;overflow:auto;max-height:64vh;flex:1 1 auto;min-height:0}
dialog .row{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
dialog h3{font:700 13px var(--mono);margin:16px 0 6px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
dialog h3:first-child{margin-top:0}
dialog p{margin:0 0 9px}
dialog ul{margin:0 0 9px;padding-left:20px}
dialog li{margin:2px 0}
dialog code{font:600 12px var(--mono);background:#eef2f6;padding:1px 4px;border-radius:3px}
table{border-collapse:collapse;width:100%;font:13px var(--mono);margin:2px 0 10px}
th,td{border-bottom:1px solid var(--line);padding:4px 7px;text-align:right}
th:first-child,td:first-child{text-align:left}
th{font-weight:700;color:var(--ink-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.good{color:var(--good);font-weight:700}
.warn{color:var(--warn);font-weight:700}
.muted{color:var(--ink-2)}
.note{font-size:12.5px;color:var(--ink-2);margin-top:10px}
@media (max-width:760px){
  #subtitle{display:none}
  #controls{gap:4px}
  #controls label{display:none}
  #bar h1{font-size:16px}
}