@font-face {
  font-family: "Bubble Lab Pixel";
  src: url("品牌素材/英文像素字体.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

body.lab-active { overflow: hidden; }
body.lab-active .home { visibility: hidden; }

.lab {
  position: fixed;
  z-index: 94;
  inset: 0;
  display: block;
  min-height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  font-family: "Bubble Lab Pixel", ui-monospace, monospace;
  background: #a9c3dc;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.lab.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.lab.is-preparing { visibility: hidden; opacity: 0; pointer-events: none; }
.lab__background,
.lab__background img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab__background img { object-fit: cover; object-position: center; user-select: none; }

.lab__topbar {
  position: fixed;
  z-index: 12;
  top: max(17px, env(safe-area-inset-top));
  left: clamp(30px, 4.2vw, 70px);
  right: clamp(30px, 4.2vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.lab__topbar > * { pointer-events: auto; }
.lab__top-actions { display: flex; align-items: center; gap: 12px; }

.lab-control {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(224, 250, 255, .72);
  border-radius: 50%;
  color: #f8ffff;
  background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(155,222,249,.42) 43%, rgba(72,126,203,.34));
  box-shadow: inset 1px 1px 3px rgba(255,255,255,.96), 0 0 15px rgba(191,238,255,.42);
  cursor: inherit;
  transition: transform 150ms ease, filter 150ms ease;
}

.lab-control--back { position: relative; border: 0; background: transparent; box-shadow: none; }
.lab-control--back img { position: absolute; left: 50%; top: 50%; display: block; width: 126%; height: 126%; max-width: none; transform: translate(-50%,-50%); object-fit: contain; }
.lab-control--music { position: relative; }
.lab-control--music .closet-control__note { font: 700 20px/1 Georgia, serif; }
.lab-control--music .closet-control__bars { right: 7px; bottom: 8px; }
.lab-control--music.is-playing { filter: brightness(1.12) drop-shadow(0 0 8px rgba(207,244,255,.82)); }
.lab-control--music.is-playing .closet-control__bars i { opacity: 1; animation: closetMusicBar 700ms steps(3,end) infinite; }
.lab-control--music.is-playing .closet-control__bars i:nth-child(2) { animation-delay: -210ms; }
.lab-control--music.is-playing .closet-control__bars i:nth-child(3) { animation-delay: -430ms; }

.lab-control:hover,
.lab-control:focus-visible { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); }
.lab-control:active { transform: translateY(2px) scale(.96); }
.lab-control:focus-visible { outline: 0; box-shadow: 0 0 0 2px rgba(255,255,255,.86), 0 0 18px rgba(183,235,255,.94); }

.lab-id-status {
  display: block;
  max-width: min(44vw, 370px);
  padding: 0;
  border: 0;
  overflow: hidden;
  color: rgba(255,255,255,.94);
  appearance: none;
  -webkit-appearance: none;
  background: none;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  text-overflow: ellipsis;
  text-shadow: 0 0 5px rgba(255,255,255,.78), 0 0 13px rgba(184,228,255,.72);
  white-space: nowrap;
  font: 400 12px/1.2 "Bubble Lab Pixel", ui-monospace, monospace;
  letter-spacing: .08em;
}

.lab__message-region {
  position: absolute;
  z-index: 5;
  left: 8.5%;
  top: 37%;
  width: min(34vw, 510px);
  min-height: 250px;
  display: grid;
  place-items: center;
  text-align: center;
}

.lab-message { grid-area: 1/1; width: 100%; }
.lab-message h1,
.lab-message h2,
.lab-message p { margin: 0; font: inherit; }
.lab-message h1,
.lab-message h2 { display: grid; gap: .42em; }
.lab-message h1 span,
.lab-message h2 span,
.lab-message p,
.lab-waiting,
.lab-message__yes {
  opacity: 0;
  transform: translateY(5px);
  text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 12px rgba(210,238,255,.9), 0 0 22px rgba(157,206,255,.58);
}

.lab-message h1 {
  color: rgba(255,255,255,.97);
  font-size: clamp(17px, 1.75vw, 27px);
  line-height: 1.32;
  letter-spacing: .045em;
}
.lab-message__yes {
  margin-top: clamp(28px, 4.5vh, 46px);
  padding: 8px 10px;
  border: 0;
  color: rgba(255,255,255,.98);
  background: transparent;
  font: 400 clamp(15px, 1.4vw, 21px)/1 "Bubble Lab Pixel", ui-monospace, monospace;
  letter-spacing: .07em;
  cursor: inherit;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  visibility: hidden;
  pointer-events: none;
  transition: transform 130ms ease, filter 130ms ease, text-shadow 130ms ease;
}
.lab-message__yes:hover { filter: brightness(1.18); text-shadow: 0 0 5px #fff, 0 0 17px #dff8ff, 0 0 30px rgba(167,221,255,.92); transform: translateY(-1px) scale(1.025); }
.lab-message__yes:active { background: transparent; transform: translateY(2px) scale(.96); filter: brightness(1.28); }
.lab-message__yes:focus-visible {
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(1.18);
  text-shadow: 0 0 6px #fff, 0 0 18px rgba(219,248,255,.98), 0 0 31px rgba(167,221,255,.88);
}

.lab.is-message-ready .lab-message--intro h1 span:first-child { animation: labTextReveal 520ms steps(5,end) both; }
.lab.is-message-ready .lab-message--intro h1 span:last-child { animation: labTextReveal 560ms 170ms steps(6,end) both; }
.lab.is-answer-ready .lab-message--intro .lab-message__yes {
  visibility: visible;
  pointer-events: auto;
  animation: labTextReveal 460ms steps(4,end) both,labAnswerGlow 1.65s ease-in-out 460ms infinite;
}
.lab.is-switching .lab-message--intro { animation: labIntroExit 330ms ease both; pointer-events: none; }
.lab.is-switching .lab-message__yes,.lab[data-state="development"] .lab-message__yes{animation:none;opacity:0;visibility:hidden;pointer-events:none}

@keyframes labAnswerGlow{0%,100%{opacity:.86;text-shadow:0 0 4px rgba(255,255,255,.9),0 0 11px rgba(210,238,255,.72),0 0 20px rgba(157,206,255,.42)}50%{opacity:1;text-shadow:0 0 7px #fff,0 0 19px rgba(220,248,255,.98),0 0 32px rgba(143,207,255,.82)}}

.lab-message--development { visibility: hidden; pointer-events: none; }
.lab[data-state="development"] .lab-message--intro { visibility: hidden; pointer-events: none; }
.lab[data-state="development"] .lab-message--development { visibility: visible; pointer-events: auto; }
.lab[data-state="development"] .lab-message--development h2 span:first-child { animation: labTextReveal 520ms steps(5,end) both; }
.lab[data-state="development"] .lab-message--development h2 span:last-child { animation: labTextReveal 540ms 150ms steps(5,end) both; }
.lab[data-state="development"] .lab-message--development p { animation: labTextReveal 620ms 430ms ease both; }
.lab[data-state="development"] .lab-waiting { animation: labTextReveal 500ms 720ms ease both; }
.lab[data-state="development"] .lab__signal { animation: labSignalResponse 680ms ease-out both; }

.lab-message h2 { color: rgba(255,255,255,.98); font-size: clamp(17px, 1.72vw, 26px); line-height: 1.3; letter-spacing: .045em; }
.lab-message--development p { margin-top: 28px; color: rgba(246,252,255,.87); font-size: clamp(11px, 1vw, 15px); line-height: 1.45; letter-spacing: .045em; }
.lab-waiting { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; color: rgba(247,253,255,.84); font-size: clamp(9px, .78vw, 12px); letter-spacing: .08em; }
.lab-waiting__bubbles { display: inline-flex; align-items: flex-end; gap: 5px; min-width: 34px; height: 14px; }
.lab-waiting__bubbles i { display: block; width: 6px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.94); border-radius: 50%; box-shadow: 0 0 5px rgba(225,247,255,.9); animation: labWaitingBubble 1.65s ease-in-out infinite; }
.lab-waiting__bubbles i:nth-child(2) { width: 8px; animation-delay: .22s; }
.lab-waiting__bubbles i:nth-child(3) { width: 5px; animation-delay: .44s; }

.lab__signal { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(32vw, 430px); aspect-ratio: .62; transform: translate(-50%,-44%); border-radius: 48%; opacity: 0; pointer-events: none; background: radial-gradient(ellipse, rgba(255,255,255,.3), transparent 68%); }

.lab__sparkles { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.lab__sparkles i { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; opacity: 0; filter: drop-shadow(0 0 4px rgba(255,255,255,.94)); animation: labTwinkle var(--duration) var(--delay) ease-in-out infinite; }
.lab__sparkles i::before,
.lab__sparkles i::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 99px; background: rgba(255,255,255,.96); transform: translate(-50%,-50%); }
.lab__sparkles i::before { width: 100%; height: 1px; }
.lab__sparkles i::after { width: 1px; height: 100%; }
.lab__sparkles i:nth-child(1){--x:8%;--y:22%;--size:10px;--duration:4.6s;--delay:-1.2s}.lab__sparkles i:nth-child(2){--x:18%;--y:68%;--size:7px;--duration:5.8s;--delay:-3.1s}.lab__sparkles i:nth-child(3){--x:31%;--y:17%;--size:6px;--duration:4.9s;--delay:-.7s}.lab__sparkles i:nth-child(4){--x:36%;--y:78%;--size:11px;--duration:6.2s;--delay:-4.3s}.lab__sparkles i:nth-child(5){--x:64%;--y:16%;--size:8px;--duration:5.3s;--delay:-2.4s}.lab__sparkles i:nth-child(6){--x:71%;--y:72%;--size:6px;--duration:4.7s;--delay:-3.6s}.lab__sparkles i:nth-child(7){--x:82%;--y:27%;--size:12px;--duration:6.6s;--delay:-1.7s}.lab__sparkles i:nth-child(8){--x:91%;--y:61%;--size:7px;--duration:5.1s;--delay:-4.1s}.lab__sparkles i:nth-child(9){--x:57%;--y:83%;--size:8px;--duration:5.7s;--delay:-2.8s}.lab__sparkles i:nth-child(10){--x:47%;--y:13%;--size:5px;--duration:4.4s;--delay:-3.4s}.lab__sparkles i:nth-child(11){--x:76%;--y:43%;--size:6px;--duration:6s;--delay:-.9s}.lab__sparkles i:nth-child(12){--x:25%;--y:87%;--size:5px;--duration:5.5s;--delay:-2s}
.lab:not(.is-visible) .lab__sparkles i,
.lab:not([data-state="development"]) .lab-waiting__bubbles i { animation-play-state: paused; }

@keyframes labTextReveal { 0%{opacity:0;transform:translateY(5px);filter:brightness(.8)} 45%{opacity:.72;filter:brightness(1.22)} 100%{opacity:1;transform:none;filter:none} }
@keyframes labIntroExit { to{opacity:0;transform:translateY(-4px);filter:brightness(1.22)} }
@keyframes labSignalResponse { 0%{opacity:0;transform:translate(-50%,-44%) scale(.88)} 34%{opacity:.82} 100%{opacity:0;transform:translate(-50%,-44%) scale(1.08)} }
@keyframes labWaitingBubble { 0%,100%{opacity:.22;transform:translateY(1px) scale(.82)} 42%{opacity:1;transform:translateY(-3px) scale(1.08)} 70%{opacity:.45} }
@keyframes labTwinkle { 0%,72%,100%{opacity:.08;transform:scale(.8)} 82%{opacity:.92;transform:scale(1.05)} 90%{opacity:.28;transform:scale(.88)} }

@media (hover:hover) and (pointer:fine) {
  .lab, .lab * { cursor: none !important; }
}

@media (max-width:700px) and (pointer:coarse) {
  .lab { min-height: 100svh; }
  .lab__background img { object-position: center; }
  .lab__topbar { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; }
  .lab-control { width: 48px; }
  .lab-control--music .closet-control__note { font-size: 18px; }
  .lab__top-actions { gap: 7px; overflow: visible; }
  .lab-id-status {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    padding-block: 3px;
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .055em;
    text-overflow: clip;
  }
  .lab__message-region { left: 7%; top: 12.5%; width: 86%; min-height: 162px; }
  .lab-message h1 { font-size: clamp(14px, 4.1vw, 17px); line-height: 1.38; }
  .lab-message__yes { margin-top: 20px; font-size: clamp(13px, 3.8vw, 16px); }
  .lab-message h2 { font-size: clamp(14px, 4vw, 17px); line-height: 1.35; }
  .lab-message--development p { margin-top: 16px; font-size: clamp(9px, 2.65vw, 11px); }
  .lab-waiting { margin-top: 12px; font-size: clamp(8px, 2.35vw, 10px); }
  .lab__signal { top: 55%; width: min(70vw, 320px); }
  .lab__sparkles i:nth-child(n+9) { display: none; }
  .lab__sparkles i:nth-child(1){--x:8%;--y:28%}.lab__sparkles i:nth-child(2){--x:18%;--y:73%}.lab__sparkles i:nth-child(3){--x:30%;--y:13%}.lab__sparkles i:nth-child(4){--x:35%;--y:89%}.lab__sparkles i:nth-child(5){--x:68%;--y:17%}.lab__sparkles i:nth-child(6){--x:77%;--y:77%}.lab__sparkles i:nth-child(7){--x:89%;--y:35%}.lab__sparkles i:nth-child(8){--x:92%;--y:64%}
}

@media (max-width:700px) {
  .lab__top-actions { overflow: visible; }
  .lab-id-status {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    padding-block: 3px;
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .055em;
    text-overflow: clip;
  }
}

@media (prefers-reduced-motion:reduce) {
  .lab, .lab-control, .lab-message__yes { transition-duration: 60ms; }
  .lab__sparkles i { animation-duration: 8s; }
  .lab.is-message-ready .lab-message--intro h1 span,
  .lab.is-answer-ready .lab-message--intro .lab-message__yes,
  .lab[data-state="development"] .lab-message--development h2 span,
  .lab[data-state="development"] .lab-message--development p,
  .lab[data-state="development"] .lab-waiting { animation: labTextReveal 120ms ease both; }
  .lab[data-state="development"] .lab__signal { animation: none; }
  .lab-waiting__bubbles i { animation-duration: 2.4s; }
}

/* The response glow belongs only to the question state. */
.lab[data-state="development"].is-answer-ready .lab-message--intro .lab-message__yes {
  animation:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}