/* Third-round PSD, 2026-10-12. Measurements include text transforms.
   Native 248px WeChat header is excluded. Fixed text sizes/line breaks are
   intentional; flexible photo backgrounds and safe areas accommodate phones. */
.splash-slogan {
  left: calc(50% - 1.041667px); right: auto;
  width: 249.305556px; height: 75.347222px;
  transform: translateX(-50%); text-shadow: none;
  top: max(6.838833%, calc(env(safe-area-inset-top) + 48px));
}
#s-splash .splash-slogan { top: max(6.838833%, calc(env(safe-area-inset-top) + 48px)); }
.splash-bottom { bottom: max(5.882353%, env(safe-area-inset-bottom)); gap: calc(7.291667 * var(--u)); padding-bottom: 0; }
.brand-row { margin-bottom: calc(10.416667 * var(--u)); gap: 0; }
.brand-lockup { width: 179.513889px; height: 20.486111px; }
#s-splash .btn-primary { display: flex; align-items: center; justify-content: center; width: calc(181.25 * var(--u)); height: calc(38.888889 * var(--u)); line-height: calc(38.888889 * var(--u)); border-radius: calc(6.944444 * var(--u)); }
.splash-button-label { width: 55.902778px; height: 13.888889px; }
.btn-history .splash-button-label { width: 56.597222px; height: 13.541667px; }

/* These two fixed-content dialogs retain the PSD text column on every phone.
   308px fits a 320px viewport without shrinking fonts or changing line breaks. */
#p-privacy .popup, #p-photoguide .popup {
  width: 307.986111px; height: 313.194444px; min-height: 313.194444px;
  padding: 0; top: -42.881944px; border-radius: 8.680556px;
  text-rendering: geometricPrecision;
}
#p-privacy .popup-title, #p-photoguide .popup-title {
  position: absolute; margin: 0; font-size: 23.148148px; line-height: 28.935185px;
  letter-spacing: 0; white-space: nowrap;
}
#p-privacy .popup-title { left: 31.944444px; top: 35px; }
#p-photoguide .popup-title { left: 37.5px; top: 61.388889px; text-align: left; }
#p-privacy .popup-body, .guide-description {
  position: absolute; margin: 0;
  font-size: 11.574074px; line-height: 17.361111px; font-weight: 400; letter-spacing: 0;
}
#p-privacy .popup-body { left: 31.944444px; top: 109.027778px; width: 243.75px; }
/* Text-frame advance includes side bearings beyond the PSD visible-ink bbox. */
.guide-description { left: 37.847222px; top: 135.069444px; width: 237px; }
.guide-description span { white-space: nowrap; }
#p-privacy .privacy-row { position: absolute; left: 29.861111px; top: 184.375px; gap: 10.069444px; }
#p-privacy .privacy-text { font-size: 10.127315px; line-height: 18.807870px; white-space: nowrap; }
#p-privacy .privacy-link { font-family: "MiSans Demibold", var(--font); font-weight: 700; }
#p-privacy .checkbox { width: 11.805556px; height: 12.152778px; }
#p-privacy .popup-btn, #p-photoguide .popup-btn {
  position: absolute; left: 63.194444px; margin: 0;
  width: 181.25px; height: 38.888889px; line-height: 38.888889px;
  font-family: "MiSans Demibold", var(--font); font-size: 14.467593px; font-weight: 700;
  letter-spacing: 0; border-radius: 6.944444px;
}
#p-privacy .popup-btn { top: 239.930556px; }
#p-photoguide .popup-btn { top: 219.791667px; }
#p-privacy .popup-close, #p-photoguide .popup-close { top: 10.055556px; right: 10.055556px; width: 32px; height: 32px; }
#p-privacy .popup-close img, #p-photoguide .popup-close img { width: 17.708333px; height: 17.361111px; }
@media (max-height: 440px) {
  #p-privacy .popup, #p-photoguide .popup { top: 0; }
}

/* PSD 984x503 card; text starts 77/78px in, image starts at x480.
   Fixed typography is preserved even at 320px; never center-crop the artwork. */
.prod-title { font-size: 23.148148px; line-height: 31.828704px; margin-top: calc(19.583333 * var(--u)); letter-spacing: 0; }
.card-product { width: calc(341.666667 * var(--u)); margin-left: calc(-0.333333 * var(--u)); border-radius: calc(5.208333 * var(--u)); }
.prod-card { position: relative; height: calc(174.652778 * var(--u)); min-height: 0; text-rendering: geometricPrecision; }
.prod-info { flex: 0 0 48.780488%; padding: 0; }
#product-title {
  position: absolute; left: 26.736111px; top: calc(34.027778 * var(--u));
  margin: 0; font-size: 14.467593px; line-height: 15.071903px; font-weight: 600;
}
.prod-name {
  position: absolute; left: 26.736111px; top: calc(57.638889 * var(--u));
  margin: 0; font-size: 11.574074px; line-height: 17.361111px; font-weight: 600;
}
.prod-badge { position: absolute; left: 27.430556px; top: calc(115.277778 * var(--u)); width: calc(35.069444 * var(--u)); margin: 0; }
.prod-scroll { flex: 0 0 51.219512%; }
.prod-scroll img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: fill; }

/* Fourth feedback adds a fast one-second round trip to original PSD pixels.
   The stage/mask share one contain transform, including short/landscape screens. */
#p-analyzing { background: #000; overflow: hidden; }
.scan-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 480px, calc(100dvh * 1080 / 2091)); height: min(100dvh, calc(min(100vw, 480px) * 2091 / 1080)); overflow: hidden; }
@supports not (height: 100dvh) { .scan-stage { width: min(100vw, 480px, calc(100vh * 1080 / 2091)); height: min(100vh, calc(min(100vw, 480px) * 2091 / 1080)); } }
.scan-artwork { width: 100%; height: 100%; object-fit: contain; }
.scan-face { position: absolute; inset: 0; background: #111; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; overflow: hidden; }
/* Same centered cover crop as the camera; never stretch the captured JPEG.
   The PSD mask clips the real face, covering the original white placeholder. */
.scan-photo { position: absolute; left: 50%; top: 50%; width: min(100vw, 480px); height: 100vh; height: 100dvh; max-width: none; object-fit: cover; transform: translate(-50%, -50%); }
.scan-photo.mirror { transform: translate(-50%, -50%) scaleX(-1); }
.scan-photo:not([src]) { visibility: hidden; }
.scan-beam { position: absolute; left: 0; right: 0; top: 20%; height: 18%; background: linear-gradient(to bottom, #F5F078 0%, #F5F078 35%, rgba(245,240,120,0) 100%); }
#p-analyzing:not(.scan-artwork-ready) .scan-artwork { visibility: hidden; }
#p-analyzing:not(.scan-artwork-ready) .scan-face { -webkit-mask-image: none !important; mask-image: none !important; }
#p-analyzing:not(.scan-artwork-ready) .scan-photo { opacity: .6; }
#p-analyzing:not(.scan-artwork-ready) .scan-beam { visibility: hidden; }
.scan-running .scan-beam { animation: report-scan var(--scan-cycle, 1000ms) ease-in-out infinite; }
@keyframes report-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(166%); } }
.scan-running:not(.scan-artwork-ready) .scan-status { animation: report-scan-fallback var(--scan-cycle, 1000ms) ease-in-out infinite; }
@keyframes report-scan-fallback { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .scan-running .scan-beam { animation-name: report-scan-reduced; }
  @keyframes report-scan-reduced { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
}
/* A failed/stalled image must not leave an unexplained black screen. The live
   status is visually hidden only once the exact PSD artwork has loaded. */
.scan-status { position: absolute; top: 10.5%; left: 0; right: 0; color: #fff; text-align: center; font: 700 23.148148px/1.4 "MiSans Demibold",var(--font); }
.scan-artwork-ready .scan-status { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scan-cancel {
  position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%); padding: 10px 24px;
  color: #bbb; font: 12px/1.5 "PingFang SC","Microsoft YaHei",sans-serif;
}
.scan-cancel:focus-visible { outline: 1px solid var(--yellow); border-radius: 4px; }

/* Restore only the requested focus area, not the older age-comparison pill. */
#dims-note { display: block !important; margin-top: 12px; padding: 10px 12px 10px 24px; text-align: left; }
#dims-note[hidden] { display: none !important; }
#dims-note::before { left: 12px; top: 10px; bottom: 10px; }
#dims-note .dims-note-l1 { font-size: 12px; line-height: 1.5; }
#dims-note .dims-note-l2 { font-size: 11px; line-height: 1.5; margin-top: 3px; }