html,body{

  margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  color:#111; background:#f7f7f7;

}

.container{ max-width: 820px; margin: 0 auto; padding: 24px; }

.card{ background:#fff; border:1px solid #eee; border-radius:12px; padding:20px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }

h1,h2{ margin: 0 0 12px 0; }

label{ display:block; margin:12px 0 6px; font-weight:600;}

input[type=file]{ display:block; margin: 8px 0 16px; }

button{ border:0; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; }

button.primary{ background:#111; color:#fff; }

button.secondary{ background:#eee; }

.progress{ height:8px; background:#eee; border-radius:8px; overflow:hidden; margin-top:8px; }

.progress-inner{ height:100%; width:0%; background:#111; transition: width .2s; }

.qr{ display:flex; gap:16px; align-items:center; }

.small{ color:#555; font-size:14px; }

.footer{ margin-top:20px; color:#777; font-size:12px; text-align:center; }

.wall{ background:#000; color:#fff; }

.wall .stage{ position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; }

.wall img, .wall video{ max-width: 100vw; max-height: 100vh; object-fit: contain; }

.wall .hud{ position:fixed; bottom:16px; left:16px; right:16px; display:flex; justify-content:space-between; font-size:14px; color:#bbb;}

.wall .hud .pill{ background:rgba(0,0,0,.5); padding:6px 10px; border-radius:999px; }

kbd{ background:#eee; border-radius:6px; padding:2px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;}