*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03060b;color:#eafaff;font-family:Inter,system-ui,sans-serif}#stage{position:fixed;inset:0}canvas{display:block}#camera,#mask{position:fixed;opacity:0;pointer-events:none;width:320px;height:240px}.hud{position:fixed;top:0;left:0;right:0;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;z-index:4;background:linear-gradient(#03060bd9,transparent)}.hud strong{display:block;letter-spacing:.18em;font-size:14px}.hud span{font-size:11px;color:#80dfff;letter-spacing:.08em}.status{display:flex;align-items:center;gap:8px}.status i{width:8px;height:8px;border-radius:50%;background:#68727b;box-shadow:0 0 12px currentColor}.status i.on{background:#55ffd5}.controls{position:fixed;z-index:5;bottom:24px;left:50%;transform:translateX(-50%);width:min(94%,900px);padding:13px 15px;border:1px solid #38dff044;border-radius:18px;background:#07111bd9;backdrop-filter:blur(16px);display:flex;gap:10px;align-items:center;justify-content:center;box-shadow:0 20px 70px #0009}button{border:1px solid #51e6ff66;background:#0b2533;color:#c8f9ff;border-radius:11px;padding:11px 14px;font-weight:800;font-size:11px;letter-spacing:.06em;cursor:pointer}button:first-child{background:#21d6e8;color:#021015}button:disabled{opacity:.35}label{font-size:10px;color:#9cb8c4;display:flex;gap:6px;align-items:center}input{width:90px}.hint{position:fixed;z-index:3;bottom:96px;width:100%;text-align:center;color:#82a5b3;font-size:11px;letter-spacing:.04em}@media(max-width:700px){.hud{padding:16px}.controls{bottom:12px;flex-wrap:wrap;padding:10px}.hint{bottom:130px;padding:0 20px}.controls label{display:none}}