:root { color-scheme: light; font-family: system-ui,sans-serif; background:#f5f6fa; }
* {box-sizing:border-box}
html,body {margin:0;width:100%;min-height:100%}
body {min-height:100svh;display:grid;place-items:center}
#stage {position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
#plate {display:block;width:100%;height:100%;object-fit:cover;object-position:12% 50%}
#overlay {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
button {position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:22px;width:42px;height:42px;border-radius:50%;border:1px solid #d7dfeb;background:#ffffffdf;color:#24558a;cursor:pointer;font-size:16px;z-index:2}
button:hover {background:white}
button:focus-visible {outline:3px solid #2781da;outline-offset:3px}
button:disabled {opacity:.4;cursor:wait}
#status {position:absolute;bottom:18px;right:22px;font-size:13px;color:#52657c;background:#ffffffdf;padding:5px 10px;border-radius:8px}
#status[hidden] {display:none}
@media (max-width:700px) and (orientation:portrait) {
  #stage {height:100svh;aspect-ratio:auto}
  button {bottom:max(22px,env(safe-area-inset-bottom));left:20px;width:44px;height:44px}
  #status {max-width:calc(100% - 92px)}
}