*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#111;color:#eee;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
body{overflow:hidden}
.app{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:env(safe-area-inset-top,0) 10px calc(10px + env(safe-area-inset-bottom,0)) 10px}
.topbar{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center}
.topbar button,.filebtn{appearance:none;border:0;background:#222;color:#f2f2f2;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1;text-align:center}
.topbar button:disabled{opacity:.45}
.filebtn input{display:none}
.stage-wrap{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
#stage{width:min(calc(100vw - 20px), calc(100dvh - 180px));height:min(calc(100vw - 20px), calc(100dvh - 180px));max-width:100%;max-height:100%;border-radius:18px;background:#000;display:block;touch-action:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
#camera{display:none}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#ddd}
.empty .sub{margin-top:8px;font-size:12px;color:#999}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:4px}
.controls label{display:grid;gap:6px;font-size:13px;color:#ddd}
.controls input[type=range]{width:100%}
@media (max-width:640px){
  .topbar{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
  .topbar button,.filebtn{padding:10px 8px;font-size:13px}
}
@media (min-width:700px){
  #stage{width:min(88vw,76vh);height:min(88vw,76vh)}
  .app{padding:12px}
}