:root{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0a0c10}
body{font-family:-apple-system,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;color:#e8ecf2}
#cv{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:crosshair}
video{position:fixed;top:-9999px;left:-9999px;width:10px}

.panel{position:fixed;top:16px;left:16px;z-index:10;background:rgba(12,16,24,.74);
  backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:12px 14px;font-size:12.5px;line-height:1.7;max-width:min(320px,calc(100vw - 32px))}
.panel h1{font-size:12px;font-weight:600;letter-spacing:.09em;margin-bottom:9px;color:#fff}
.panel .k{display:inline-block;min-width:4.8em;color:#7d8aa0}
.panel .hint{color:#98a4b8;margin-top:6px}
.panel a{color:#7cc4ff;text-decoration:none}
.panel a:hover{text-decoration:underline}

.modes{display:flex;gap:6px;margin-bottom:10px}
.modes button{flex:1;font:inherit;font-size:12px;font-weight:600;padding:7px 4px;cursor:pointer;
  border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#b9c4d4}
.modes button:hover{background:rgba(255,255,255,.1)}
.modes button.on{background:#7cc4ff;border-color:#7cc4ff;color:#08101c}
.modes button:disabled{opacity:.5;cursor:default}

#stat{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);
  color:#6ee7a8;font-variant-numeric:tabular-nums;font-size:12px}
#stat.err{color:#ff8b8b}
#stat.warn{color:#ffd166}

.note{position:fixed;bottom:14px;left:16px;z-index:10;font-size:11.5px;color:#5d6a7d;
  max-width:min(420px,calc(100vw - 32px));line-height:1.6}
.spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.22);
  border-top-color:#7cc4ff;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}