:root {
  color-scheme: light;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #173f86;
  background: #dcecff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
[hidden] { display: none !important; }
.stage {
  position: relative; width: 100%; height: 100dvh; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(255,255,255,.98) 0%, rgba(244,250,255,.92) 24%, rgba(218,235,255,.72) 58%, rgba(184,213,246,.88) 100%),
    linear-gradient(180deg, #fafdff 0%, #e7f2ff 56%, #c7def7 100%);
}
.stage::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -16%; right: -16%; top: 48%; bottom: -26%;
  background-image:
    linear-gradient(rgba(25,92,175,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,92,175,.14) 1px, transparent 1px);
  background-size: 58px 44px;
  transform: perspective(620px) rotateX(61deg) scale(1.12);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.68) 30%, rgba(0,0,0,.24));
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.68) 30%, rgba(0,0,0,.24));
  opacity: .48;
}
.stage::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 5% 8% 4%;
  background: repeating-radial-gradient(ellipse at 50% 52%, transparent 0 78px, rgba(20,91,183,.11) 80px, transparent 82px 148px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.58) 48%, transparent 76%);
  mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0,0,0,.58) 48%, transparent 76%);
  opacity: .58;
}
#particles { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.caption {
  position: absolute; z-index: 2;
  top: max(27px, env(safe-area-inset-top));
  left: 20px;
  right: 20px;
  text-align: center;
  pointer-events: none;
}
h1 { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.8; letter-spacing: 1.5px; }
.showcase-hud {
  position: absolute; z-index: 2; top: max(28px, env(safe-area-inset-top)); left: 24px;
  display: flex; gap: 13px; align-items: center; pointer-events: none;
  color: rgba(27, 67, 132, .54); font-size: 9px; line-height: 1.4; letter-spacing: .45px;
  transition: color .35s ease, opacity .35s ease; opacity: .66;
}
.showcase-hud[data-emphasis="true"] { color: rgba(25, 64, 132, .82); opacity: 1; }
.showcase-hud output { color: inherit; font: inherit; }
/* 平时隐藏说明，只在授权、丢手或异常时显示必要反馈。 */
.status { margin: 9px auto 0; max-width: 520px; font-size: 11px; line-height: 1.8; }
.status[data-state="idle"], .status[data-state="active"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.status[data-state="loading"], .status[data-state="missing"] { color: #52739e; }
.status[data-state="error"] { color: #a64155; }
#status-detail { margin: 5px 0 0; }
.status:not([data-state="error"]) #status-detail { display: none; }
.actions {
  position: absolute; z-index: 2;
  bottom: max(30px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}
button {
  min-width: 124px; height: 36px; padding: 0 22px;
  border: 1px solid #245fba; border-radius: 22px;
  background: #174f9f; color: #f7fbff;
  font: 400 11px "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 1px; cursor: pointer; transition: background .15s;
}
button:hover:not(:disabled) { background: #2369c4; }
button:focus-visible { outline: 2px solid #235faa; outline-offset: 5px; }
button:disabled { opacity: .4; cursor: default; }
#stop { background: rgba(236,246,255,.84); border-color: #517cb4; color: #214e87; }
#stop:hover:not(:disabled) { background: #d8ebff; }
/* 视频只作为推理输入，不展示预览或占用页面布局。 */
.camera-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
  .caption { top: max(22px, env(safe-area-inset-top)); }
  h1 { font-size: 11px; letter-spacing: 1px; }
  .actions { bottom: max(24px, env(safe-area-inset-bottom)); }
  .showcase-hud { top: auto; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); gap: 8px; font-size: 8px; }
}