* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1d2327; color: #eef1f3; font: 16px/1.4 system-ui, sans-serif; }
main { display: flex; flex-direction: column; height: 100%; padding: 12px; gap: 10px; }
#stage { position: relative; flex: 1; min-height: 0; background: #0f1416; border-radius: 12px; overflow: hidden; }
#remote { width: 100%; height: 100%; object-fit: contain; }
#local { position: absolute; right: 12px; bottom: 12px; width: 24%; max-width: 220px; min-width: 100px;
  border-radius: 8px; background: #2b3338; transform: scaleX(-1); }
#local:not([data-on]) { display: none; }
#status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
  padding: 24px; text-align: center; font-size: 1.15rem; pointer-events: none; }
#status:empty { display: none; }
#bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
button { font: inherit; padding: 10px 20px; border: 0; border-radius: 999px; background: #3c7a6e; color: #fff; cursor: pointer; }
button.off { background: #555f66; }
button.danger { background: #b4443c; }
button[hidden] { display: none; }
.note { margin: 0; text-align: center; font-size: .8rem; color: #9aa6ad; }