:root { color-scheme: dark; font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; color: #fff; background: #080912; font-synthesis: none; letter-spacing: 0; }
.hand-check { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: #101114; }
.hand-check-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid #383a3e; }
.hand-check-header h1 { font-size: 20px; }
.hand-check a { color: #9bc1ff; }
.hand-check-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
.hand-check-view { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #050608; }
.hand-check-view + .hand-check-view { border-left: 1px solid #383a3e; }
.hand-check-view h2 { position: absolute; z-index: 2; top: 12px; left: 12px; margin: 0; padding: 6px 8px; font-size: 13px; font-weight: 400; background: #101114cc; }
.hand-check-view video, .hand-check-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hand-check-view video { object-fit: contain; transform: scaleX(-1); }
.hand-check-point { position: absolute; width: 28px; height: 28px; border: 3px solid #55e1aa; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hand-check-metrics { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 12px 24px; gap: 12px; border-top: 1px solid #383a3e; }
.hand-check-metrics dt { font-size: 12px; color: #b8babe; }
.hand-check-metrics dd { margin: 6px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.hand-check-footer { padding: 0 24px 16px; }
.hand-check-footer p { margin: 4px 0 12px; font-size: 14px; }
.hand-check-footer > div { display: flex; gap: 10px; }
.hand-check-footer button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: 44px; border: 1px solid #686c73; border-radius: 6px; background: #24262b; font-size: 14px; }
.hand-check-footer button.primary { background: #2367d9; border-color: #6598eb; }
.hand-check-footer button svg { width: 18px; height: 18px; }
.hand-check-footer button:disabled { opacity: .45; cursor: default; }
.hand-check-footer small { display: block; margin-top: 12px; color: #b8babe; font-size: 12px; }
@media (max-width: 600px) {
  .hand-check-header { padding: 10px 16px; }
  .hand-check-header h1 { font-size: 18px; }
  .hand-check-views { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .hand-check-view + .hand-check-view { border-left: 0; border-top: 1px solid #383a3e; }
  .hand-check-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 16px; gap: 8px; }
  .hand-check-footer { padding: 0 16px 12px; }
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
[hidden] { display: none !important; }
.booth { --result-top: 18dvh; --result-height: 48dvh; position: relative; isolation: isolate; width: 100%; height: 100dvh; overflow: hidden; background: #080912; }
.camera, .effects, .camera-shade, .ribbons, .stickers { position: absolute; inset: 0; width: 100%; height: 100%; }
.camera { object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .4s; }
.camera-shade { pointer-events: none; background: linear-gradient(#06070bc4, transparent 25%, transparent 65%, #06070bcc); }
.effects { opacity: 0; }
.ribbons { z-index: 3; pointer-events: none; }
.ribbons svg { width: 100%; height: 100%; }
.brand-header { position: absolute; z-index: 5; top: max(4%, env(safe-area-inset-top)); left: 8%; right: 7%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.community { display: flex; align-items: center; gap: 9px; padding-top: 8px; }
.community svg { width: 45px; height: 32px; flex: none; fill: none; stroke-width: 8; stroke-linecap: round; }
.community span { font-size: 12px; line-height: 1.15; font-weight: 500; }
.event { text-align: right; }
.event-name { font-size: 38px; line-height: .91; font-weight: 700; }
.event-name span { font-size: 36px; }
.event-sub { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 9px; font-size: 11px; white-space: nowrap; }
.gemini-star { display: inline-block; width: 25px; height: 30px; background: linear-gradient(145deg, #338bff, #9788ff 42%, #e878c3 69%, #67cde7); clip-path: polygon(50% 0, 64% 35%, 100% 50%, 64% 64%, 50% 100%, 35% 64%, 0 50%, 35% 35%); }
.event-sub .gemini-star { width: 22px; height: 25px; }
.stickers { z-index: 4; pointer-events: none; transition: opacity .5s; }
.sticker { position: absolute; width: min(25%, 180px); aspect-ratio: 1; background-image: url('/assets/mascots.png'); background-size: 200% 200%; background-repeat: no-repeat; filter: drop-shadow(0 8px 12px #0003); }
.monkey { top: 23%; left: 1%; background-position: left top; transform: rotate(-9deg); }
.panda { top: 22%; right: 1%; background-position: right top; transform: rotate(10deg); }
.cat { bottom: 15%; left: 2%; background-position: left bottom; transform: rotate(-7deg); }
.android { bottom: 15%; right: 0; background-position: right bottom; transform: rotate(9deg); }
.star-one { position: absolute; top: 45%; left: 6%; width: 20px; }
.star-two { position: absolute; bottom: 31%; right: 5%; width: 18px; }
.viewfinder { position: absolute; z-index: 2; inset: 20% 19% 22%; opacity: .8; transition: opacity .4s; }
.viewfinder i { position: absolute; width: 36px; height: 36px; border: solid #fff; border-width: 4px 0 0 4px; border-radius: 13px 0 0 0; filter: drop-shadow(0 0 4px #fff6); }
.viewfinder i:nth-child(2) { right: 0; transform: rotate(90deg); }
.viewfinder i:nth-child(3) { bottom: 0; transform: rotate(-90deg); }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; transform: rotate(180deg); }
.status { position: absolute; z-index: 6; left: 15%; right: 15%; bottom: 15%; text-align: center; }
h1 { margin: 0; font-size: 27px; line-height: 1.4; font-weight: 700; text-wrap: balance; }
.hint { margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.message { margin: 12px auto 0; font-size: 13px; line-height: 1.65; max-width: 420px; overflow-wrap: anywhere; color: #d8dde9; }
.message:empty { display: none; }
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.controls:has(> :not([hidden])) { min-height: 44px; }
.controls button { min-height: 44px; border-radius: 8px; border: 1px solid #ffffff40; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 19px; font-size: 14px; font-weight: 600; }
button svg { width: 19px; height: 19px; flex: none; }
.primary { background: #2870ff; box-shadow: 0 4px 22px #1265ef30; border-color: #6b9dff !important; }
.secondary { background: #151824; }
.icon-button { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0 !important; border: 1px solid #ffffff35; background: #0c101bab; border-radius: 8px; }
.privacy { color: #b7c0d4; font-size: 11px; line-height: 1.6; max-width: 330px; margin: 14px auto 0; }
.brand-footer { position: absolute; z-index: 5; bottom: max(2.5%, env(safe-area-inset-bottom)); left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.handwriting { font: italic 28px/.95 "Brush Script MT", "Segoe Print", cursive; transform: rotate(-10deg); }
.tagline { font-size: 12px; font-weight: 600; line-height: 1.13; }
.utility { position: absolute; z-index: 8; right: 14px; bottom: 12px; display: flex; gap: 7px; }
.utility .icon-button { width: 32px; height: 32px; opacity: .7; }
.utility .icon-button:hover, .utility .icon-button:focus-visible { opacity: 1; }
.brand-footer .tagline { margin-right: 24px; }
.countdown { position: absolute; z-index: 6; top: 41%; left: 50%; transform: translate(-50%, -50%); font-size: 90px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 2px 30px #0008; }
.recording { position: absolute; z-index: 6; bottom: 16%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; border-radius: 30px; background: #f05266; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 3px 20px #ef4a6055; }
.record-dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; animation: pulse 1s infinite; }
.recording time { font-variant-numeric: tabular-nums; }
.generation-progress { max-width: 340px; height: 9px; overflow: hidden; background: #ffffff24; margin: 20px auto 0; border-radius: 5px; }
.generation-progress span { display: block; height: 100%; width: 36%; background: #347cff; border-radius: inherit; animation: progress 2s ease-in-out infinite alternate; }
.result-wrap { display: none; position: absolute; z-index: 2; top: var(--result-top); left: 0; right: 0; height: var(--result-height); align-items: center; justify-content: center; }
.result {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  /* 只柔化实际视频的边缘，主体保持原色与清晰度，不增加第二路视频解码。 */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.booth[data-state="idle"] .status { bottom: 29%; }
.booth[data-state="idle"] .viewfinder { opacity: .28; }
.booth[data-state="awakening"] .status { bottom: 31%; }
.booth:is([data-state="detecting"], [data-state="countdown"], [data-state="recording"], [data-state="awakening"]) .camera { opacity: 1; }
.booth:is([data-state="recording"], [data-state="countdown"]) .status { bottom: 25%; }
.booth[data-state="recording"] .status { opacity: 0; pointer-events: none; }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .effects { opacity: 1; }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .camera { visibility: hidden; }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .stickers { opacity: 0; }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .ribbons { opacity: .18; }
.booth[data-effects="unavailable"]:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .camera { visibility: visible; opacity: .65; }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"]) .sticker { filter: saturate(1.4) drop-shadow(0 0 10px #836dff50); }
.booth:is([data-state="uploading"], [data-state="waiting"], [data-state="loading-result"], [data-state="result-error"], [data-state="playing"], [data-state="failed"]) .viewfinder { opacity: 0; }
.booth[data-state="loading-result"] .result-wrap { display: flex; opacity: 0; pointer-events: none; }
.booth[data-state="playing"] .result-wrap { display: flex; }
.booth[data-state="playing"] .stickers { opacity: .35; }
.booth[data-state="playing"] .status { top: calc(var(--result-top) + var(--result-height) + 24px); bottom: auto; }
.booth[data-state="failed"] .status { bottom: 31%; }
.booth:is([data-state="waiting"], [data-state="uploading"], [data-state="loading-result"], [data-state="result-error"]) h1 { font-size: 23px; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes progress { from { transform: translateX(-30%); } to { transform: translateX(210%); } }
@media (min-aspect-ratio: 1/1) {
  .booth { --result-top: 14dvh; --result-height: 58dvh; }
  .ribbons { opacity: .88; }
  .brand-header { top: 5%; left: 6%; right: 6%; }
  .event-name { font-size: 44px; }
  .event-name span { font-size: 40px; }
  .community span { font-size: 15px; }
  .community svg { width: 58px; height: 38px; }
  .viewfinder { left: 31%; right: 31%; top: 18%; bottom: 23%; }
  .sticker { width: min(19vh, 185px); }
  .monkey { left: 10%; top: 25%; } .panda { right: 10%; top: 22%; }
  .cat { left: 15%; bottom: 15%; } .android { right: 12%; bottom: 16%; }
  .status { left: 28%; right: 28%; bottom: 13%; }
  .booth[data-state="idle"] .status { bottom: 32%; }
  .handwriting { font-size: 34px; }
  .tagline { font-size: 15px; }
}
@media (max-width: 420px) {
  .brand-header { left: 8%; right: 6%; gap: 8px; }
  .community { gap: 5px; } .community svg { width: 35px; }
  .community span { font-size: 9px; }
  .event-name { font-size: 30px; } .event-name span { font-size: 29px; }
  .event-sub { font-size: 9px; }
  .status { left: 14%; right: 14%; }
  h1 { font-size: 23px; }
  .hint { font-size: 13px; }
  .controls { gap: 7px; } .controls button { padding: 10px 12px; font-size: 13px; }
  .booth[data-state="playing"] h1 { font-size: 21px; }
  .handwriting { font-size: 23px; } .tagline { font-size: 10px; }
}
@media (max-height: 550px) {
  .booth { --result-top: 16dvh; --result-height: 42dvh; }
  .event-name { font-size: 26px; } .event-name span { font-size: 25px; }
  .event-sub { margin-top: 4px; }
  h1 { font-size: 21px; } .hint { font-size: 12px; margin-top: 4px; }
  .message { margin-top: 5px; font-size: 11px; } .privacy { margin-top: 7px; font-size: 10px; }
  .controls { margin-top: 10px; } .controls button { min-height: 36px; padding: 6px 10px; }
  .brand-footer { bottom: 3%; } .handwriting { font-size: 23px; } .tagline { font-size: 10px; }
}
@media (max-width: 360px) {
  .booth[data-state="playing"] .status { left: 8%; right: 8%; }
  .booth[data-state="playing"] h1 { font-size: 19px; }
}
.booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) {
  --video-aspect: 1.77777778;
  --result-limit: min(62dvh, calc(100dvh - 300px));
  --result-width: min(88vw, calc(var(--result-limit) * var(--video-aspect)));
  --result-height: calc(var(--result-width) / var(--video-aspect));
  --result-top: max(156px, calc((100dvh - var(--result-height) - 112px) / 2));
  --qr-size: clamp(72px, calc(var(--result-width) * .1), 144px);
  --qr-inset: clamp(8px, calc(var(--result-width) * .018), 24px);
}
/* 容器严格跟随视频比例，二维码锚定真实画面，不落在 contain 留白里。 */
.booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) .result-wrap {
  display: block; z-index: 5; left: 50%; right: auto; transform: translateX(-50%);
  width: var(--result-width); height: var(--result-height);
}
.result-wrap .result { width: 100%; height: 100%; }
.booth:is([data-state="playing"], [data-state="result-error"]) .status {
  top: calc(var(--result-top) + var(--result-height) + 16px); bottom: auto;
  left: 8%; right: 8%; text-align: center;
}
.booth:is([data-state="playing"], [data-state="result-error"]) .hint:empty { display: none; }
.booth:is([data-state="playing"], [data-state="result-error"]) .controls { justify-content: center; margin-top: 10px; }
.booth:is([data-state="playing"], [data-state="result-error"]) .controls button { min-height: 44px; }
.booth:is([data-state="playing"], [data-state="result-error"]) h1 { font-size: 23px; }
.booth[data-state="playing"] .stickers { opacity: .18; }
.receive {
  position: absolute; z-index: 1; right: var(--qr-inset); bottom: var(--qr-inset);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px;
  background: #080912c9; border-radius: 6px; text-align: center;
}
.receive a { display: block; width: var(--qr-size); height: var(--qr-size); background: #fff; border-radius: 2px; overflow: hidden; }
.receive a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.receive img { display: block; width: 100%; height: 100%; }
.receive strong { font-size: 11px; font-weight: 500; line-height: 1.5; }
.receive p { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.receive:focus-within p:not(:empty), .receive:hover p:not(:empty) {
  right: 0; bottom: calc(100% + 8px); width: 180px; height: auto; padding: 8px 10px; margin: 0;
  clip-path: none; background: #080912ed; border-radius: 4px; font-size: 11px; line-height: 1.5;
}
.booth[data-state="result-error"] .result { visibility: hidden; }
@media (max-width: 600px) {
  .booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) {
    --result-width: min(92vw, calc(var(--result-limit) * var(--video-aspect)));
    --result-top: max(144px, calc((100dvh - var(--result-height) - 112px) / 2));
  }
  .booth:is([data-state="playing"], [data-state="result-error"]) h1 { font-size: 20px; }
  .receive strong { font-size: 10px; }
  .receive { padding: 4px; }
}
@media (max-width: 420px) {
  .booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) { --result-top: max(128px, calc((100dvh - var(--result-height) - 112px) / 2)); }
}
@media (max-height: 550px) and (min-aspect-ratio: 1/1) {
  .booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) { --result-limit: calc(100dvh - 240px); --result-top: 96px; --qr-size: min(64px, calc(var(--result-width) - 24px)); --qr-inset: 6px; }
  .booth:is([data-state="playing"], [data-state="result-error"]) .status { top: calc(var(--result-top) + var(--result-height) + 8px); }
  .booth:is([data-state="playing"], [data-state="result-error"]) h1 { font-size: 19px; }
}
@media (min-width: 2560px) and (min-height: 1440px) {
  .booth:is([data-state="playing"], [data-state="loading-result"], [data-state="result-error"]) { --qr-size: clamp(144px, calc(var(--result-width) * .1), 240px); }
  .booth:is([data-state="playing"], [data-state="result-error"]) h1 { font-size: 32px; }
  .receive strong { font-size: 16px; }
  .booth:is([data-state="playing"], [data-state="result-error"]) .controls button { font-size: 20px; min-height: 56px; }
  .booth:is([data-state="playing"], [data-state="result-error"]) .controls .icon-button { width: 56px; }
}
@media (max-height: 650px) and (max-aspect-ratio: 1/1) {
  .booth:is([data-state="playing"], [data-state="result-error"]) .brand-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}