html, body {
  margin: 0; height: 100%; background: #000; color: #ddd;
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font: 15px/1.4 -apple-system, system-ui, sans-serif;
}
#stage { position: fixed; inset: 0; background: #000; }

#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: #000; text-align: center; padding: 24px;
}
#start.gone { display: none; }
.brand { font-size: 32px; font-weight: 700; letter-spacing: .04em; color: #fff; }
#startState { color: #9aa; }
#startBtn { font-size: 20px; padding: 14px 36px; border-radius: 999px; border: 0; background: #fff; color: #000; font-weight: 600; }
.hint { color: #667; font-size: 13px; margin: 0; }

#diagBtn {
  position: fixed; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid #333; background: rgba(0,0,0,.5); padding: 0;
}
#dot { display: block; width: 10px; height: 10px; margin: auto; border-radius: 50%; background: #555; }
#dot.ok { background: #2c6; } #dot.warn { background: #e93; } #dot.bad { background: #d33; }

#diag {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 72dvh; overflow: auto;
  background: rgba(10,10,12,.92); border-top: 1px solid #333;
  padding: 10px 12px calc(56px + env(safe-area-inset-bottom));
  font: 12px/1.35 ui-monospace, Menlo, monospace; -webkit-user-select: text; user-select: text;
}
.fxhide #diag, .fxhide #diagBtn { visibility: hidden; }
#diag table { width: 100%; border-collapse: collapse; }
#diag th { text-align: left; color: #889; font-weight: normal; width: 38%; padding: 1px 6px 1px 0; vertical-align: top; }
#diag td { color: #eee; }
.good { color: #5d8 !important; } .warnc { color: #fb5 !important; } .badc { color: #f66 !important; }
.log { margin: 8px 0; color: #aab; white-space: pre; overflow-x: auto; }
fieldset { border: 1px solid #333; border-radius: 6px; margin: 8px 0; padding: 6px 8px; }
legend { color: #889; }
label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 5px 0; }
label.check { justify-content: flex-start; }
input[type=text], input[type=number], select { font: inherit; font-size: 16px; background: #111; color: #eee; border: 1px solid #444; border-radius: 4px; padding: 3px 5px; max-width: 55%; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#diag button { font: inherit; font-size: 13px; background: #222; color: #eee; border: 1px solid #444; border-radius: 4px; padding: 6px 10px; }
#diag button:disabled { opacity: .4; }
#torchVideo { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }