:root{--accent:#0b57d0;--ink:#111;--muted:#555;--bg:#fff;--track:#e6e6e6}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:72px 24px 64px}
.stage{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;max-width:1400px}
.cam{flex:1 1 420px;max-width:640px;aspect-ratio:1;background:#f2f2f2;border:3px solid var(--ink);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cam canvas{width:100%;height:100%;display:block}
.cam-msg{text-align:center;padding:16px}
.status{font-size:1.4rem;color:var(--muted);white-space:pre-line;margin:0 0 12px}
.status.error{color:#b00020}
.panel{flex:1 1 340px;max-width:620px}
.label{font-size:clamp(2.6rem,7vw,6rem);font-weight:800;color:var(--accent);line-height:1.05;margin-bottom:24px;min-height:1.05em}
.row{margin:16px 0}
.row .name{display:flex;justify-content:space-between;gap:12px;font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:600}
.track{height:30px;background:var(--track);border-radius:15px;overflow:hidden;margin-top:6px}
.fill{height:100%;width:0;background:var(--ink);transition:width .1s linear}
.row.top .fill{background:var(--accent)}
.btn{font:inherit;font-size:1.3rem;padding:12px 26px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.btn:focus-visible,.how-btn:focus-visible,.credit:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.how-btn{position:fixed;top:16px;left:16px;z-index:5;font:inherit;font-size:1.15rem;font-weight:700;padding:10px 18px;border:2px solid var(--accent);border-radius:10px;background:#fff;color:var(--accent);cursor:pointer}
.credit{position:fixed;right:16px;bottom:14px;z-index:5;display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.9);padding:4px 10px 4px 4px;border-radius:999px}
.credit:hover{text-decoration:underline}
.credit img{width:30px;height:30px;border-radius:50%;display:block}
.modal{border:0;border-radius:14px;padding:0;max-width:min(680px,92vw);color:var(--ink)}
.modal::backdrop{background:rgba(0,0,0,.55)}
.modal-body{padding:28px 32px}
.modal h2{margin:0 0 12px;font-size:2rem}
.modal ol{padding-left:1.3em;margin:0 0 20px;font-size:1.2rem;line-height:1.45}
.modal li{margin-bottom:10px}
@media (max-width:700px){body{padding:64px 12px 60px}.stage{gap:18px}.cam{flex-basis:100%}.modal-body{padding:20px}.modal ol{font-size:1.05rem}}