:root { --bg:#0e1216; --card:#182028; --line:#2a3640; --ink:#e8eef2; --dim:#8a99a6; --gold:#ffbe3c; --ok:#1f9d55; --ng:#c0392b; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,sans-serif; line-height:1.6; }
main { max-width:520px; margin:0 auto; padding:16px; }
h1 { font-size:22px; margin:4px 0 8px; }
.lead { margin:6px 0 14px; }
.height { display:flex; align-items:center; gap:8px; font-size:18px; margin:12px 0; }
#height { width:7em; font-size:20px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
.how { padding-left:1.3em; margin:12px 0 16px; }
.how li { margin:4px 0; }
button { font:inherit; font-size:16px; padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); }
button.main { width:100%; background:var(--gold); border-color:var(--gold); color:#14100a; font-weight:700; }
.msg { color:#ff8f85; min-height:1.5em; margin:8px 0; }
.note { color:var(--dim); font-size:13px; margin:10px 0; }
#banner { padding:14px 8px; text-align:center; font-size:26px; font-weight:800; color:#fff; background:#555; border-radius:12px 12px 0 0; }
#banner.ok { background:var(--ok); } #banner.ng { background:var(--ng); } #banner.cap { background:#b7791f; }
#stage { position:relative; background:#000; border-radius:0 0 12px 12px; overflow:hidden; }
video { position:absolute; opacity:0; width:1px; height:1px; }
canvas { display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; }
canvas.mirror { transform:scaleX(-1); }
table { width:100%; border-collapse:collapse; margin:8px 0; }
td { padding:10px 0; border-bottom:1px solid var(--line); vertical-align:baseline; }
td.k { color:var(--dim); width:44%; }
td b { font-size:24px; }
td small { display:block; color:var(--dim); font-size:12px; }