* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.45 Arial, Helvetica, sans-serif; }

body.player { background: #000; color: #fff; }
#stage { width: 100%; max-width: 1280px; margin: 0 auto; aspect-ratio: 16 / 9; }
video { display: block; width: 100%; height: 100%; }
#messages { max-width: 1280px; margin: 0 auto; padding: 16px; }
#note { margin: 0 0 12px; }

body.access { background: #fff; color: #111; }
main { max-width: 420px; margin: 0 auto; padding: 32px 16px; }
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 24px; }
label { display: block; margin-bottom: 6px; }
input { display: block; width: 100%; font: inherit; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #888; border-radius: 6px; }

button { font: inherit; padding: 10px 16px; border: 0; border-radius: 6px; background: #111; color: #fff; cursor: pointer; }
body.player button { background: #fff; color: #000; }
#message { color: #a00; }