:root{color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#04070c}
body{font-family:-apple-system,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;color:#dfe9f5}
/* canvas は置換要素なので inset:0 だけでは伸びない（内在サイズ＝描画バッファ）。
   明示的に 100vw/100vh を与えること。 */
#cv{position:fixed;top:0;left:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab}
#cv.grab{cursor:grabbing}
video{position:fixed;top:-9999px;left:-9999px;width:10px}

.panel{position:fixed;top:16px;left:16px;z-index:10;width:min(300px,calc(100vw - 32px));
  background:rgba(6,12,20,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(120,200,255,.18);border-radius:12px;padding:13px 15px;
  font-size:12.5px;line-height:1.7}
.panel h1{font-size:11.5px;font-weight:600;letter-spacing:.14em;margin-bottom:10px;color:#8fd2ff}
.panel .k{display:inline-block;min-width:5.4em;color:#6f8399}
.panel .hint{color:#8ea0b6;margin-top:7px;font-size:11.5px}
.panel a{color:#7cc4ff;text-decoration:none}
.panel a:hover{text-decoration:underline}

.modes{display:flex;gap:6px;margin-bottom:11px}
.modes button{flex:1;font:inherit;font-size:12px;font-weight:600;padding:7px 4px;cursor:pointer;
  border-radius:8px;border:1px solid rgba(140,200,255,.22);background:rgba(140,200,255,.07);color:#a9c2da}
.modes button:hover{background:rgba(140,200,255,.15)}
.modes button.on{background:#5fb8ff;border-color:#5fb8ff;color:#04121f}
.modes button:disabled{opacity:.5;cursor:default}

.row{display:flex;align-items:center;gap:9px;margin-top:9px}
.row label{color:#6f8399;font-size:11.5px;white-space:nowrap}
input[type=range]{flex:1;accent-color:#5fb8ff;background:transparent}

#stat{margin-top:10px;padding-top:9px;border-top:1px solid rgba(140,200,255,.14);
  color:#63e0b0;font-variant-numeric:tabular-nums;font-size:11.5px}
#stat.err{color:#ff8b8b}

#hud{position:fixed;right:18px;top:18px;z-index:10;text-align:right;pointer-events:none}
#hud .name{font-size:15px;font-weight:600;color:#9fe0ff;letter-spacing:.04em;
  text-shadow:0 0 18px rgba(95,184,255,.55);min-height:22px}
#hud .meta{font-size:11px;color:#5d7386;margin-top:3px;font-variant-numeric:tabular-nums}

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