* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0e14;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #cfe4ff; }
#app { position: relative; width: 100vw; height: 100vh; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ui-overlay { position: absolute; inset: 0; pointer-events: none; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.panel { pointer-events: auto; background: rgba(10, 18, 30, 0.82); border: 1px solid #1e3a5a;
  border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(6px); font-size: 12px;
  min-width: 240px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.panel-title { font-weight: 700; color: #7fd0ff; margin-bottom: 6px; font-size: 12.5px; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 1.5px 0; }
.row b { color: #8aa6c8; font-weight: 500; }
.row span { color: #eaf4ff; }
.row.hi span { color: #6effa8; font-weight: 700; }
.controls { display: flex; flex-direction: column; gap: 6px; min-width: auto; }
.btn { pointer-events: auto; background: #12314f; color: #cfe4ff; border: 1px solid #2a5a8a;
  border-radius: 7px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.btn:hover { background: #1a4670; }
.report { max-width: 460px; }
.report .sub { color: #6f8bab; font-size: 10.5px; margin: 5px 0; line-height: 1.4; }
.report table { border-collapse: collapse; width: 100%; margin-top: 4px; font-size: 11px; }
.report th, .report td { border: 1px solid #234; padding: 3px 7px; text-align: right; }
.report th { color: #7fd0ff; background: rgba(30,58,90,.4); }
.report td.hi { color: #6effa8; font-weight: 700; }
/* presentation mode: clean scene only */
body.presentation .ui-overlay { display: none; }