*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
@font-face{font-family:'OrangeTypewriter';src:url("assets/fonts/Orange Typewriter.ttf") format("truetype");font-display:swap}
@font-face{font-family:'OrangeTypewriterAlt';src:url("assets/fonts/OrangeTypewriter.ttf") format("truetype");font-display:swap}
@font-face{font-family:'AlibabaPuHuiTi';src:url("assets/fonts/阿里巴巴普惠体_W5.ttf") format("truetype");font-display:swap}

html,body{margin:0;width:100%;min-height:100%;background:#f7f7f3;font-family:'AlibabaPuHuiTi','PingFang SC','Microsoft YaHei',Arial,sans-serif}
body{display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.phone{position:relative;width:min(100vw,460px);height:100svh;overflow:hidden;background:#efede3}
.page{position:absolute;inset:0;overflow:hidden;background:#efede3}
.page-img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hotspot{position:absolute;border:0;background:rgba(255,0,0,0);padding:0;cursor:pointer;z-index:100}
.fade-in{animation:fadeIn .12s ease both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.material-hotspot{left:0;right:0;height:5.75%;z-index:100}
.m1{top:25.8%}.m2{top:31.45%}.m3{top:37.05%}.m4{top:42.65%}.m5{top:48.25%}.m6{top:53.25%;height:8.1%}
.cashmere-backup{left:0;right:0;top:51.8%;height:12.2%;z-index:120}
.next-stamp{right:2%;bottom:2%;width:47%;height:28%;z-index:100}
.archive-next{right:2%;bottom:2%;width:47%;height:26%;z-index:100}

/* Keep loading size/position as v34 */
.loading-ring{position:absolute;left:50%;top:39.65%;width:39.6%;aspect-ratio:1/1;transform:translate(-50%,-50%);transform-origin:center center;animation:ringSpin 4.8s linear infinite;z-index:10;pointer-events:none}
@keyframes ringSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.loading-strip{position:absolute;left:50%;transform:translateX(-50%);z-index:10;overflow:hidden;width:0}
.loading-strip img{display:block;height:100%;width:auto;max-width:none}
.loading-cn-strip{top:52.02%;height:5.37%;--w:33.0%;--dur:1.35s;--steps:20}
.loading-en-strip{top:57.89%;height:5.62%;--w:43.4%;--dur:1.65s;--steps:27}
.loading-strip.active{animation:reveal var(--dur) steps(var(--steps),end) forwards}

.scent-line{position:absolute;z-index:25;overflow:hidden;width:0}
.scent-line img{display:block;height:100%;width:auto;max-width:none}
.scent-line.active{animation:reveal var(--dur, .85s) steps(var(--steps, 26), end) forwards}
@keyframes reveal{from{width:0}to{width:var(--w)}}

.archive-code-live{
  position:absolute;left:42.5%;top:46.2%;width:33%;text-align:left;
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace;
  font-size:9px;font-weight:400;line-height:1;color:#111;letter-spacing:0;
  white-space:nowrap;z-index:5;pointer-events:none;-webkit-font-smoothing:none;text-rendering:geometricPrecision;
}
.share-file-code{
  position:absolute;left:17.2%;top:76.8%;width:30%;height:2.0%;
  display:flex;align-items:center;justify-content:center;
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace;
  font-size:7.8px;font-weight:400;line-height:1;color:#111;letter-spacing:0;
  white-space:nowrap;z-index:11;pointer-events:none;-webkit-font-smoothing:none;text-rendering:geometricPrecision;
}

.share-actions{position:absolute;left:8%;right:8%;bottom:3.3%;display:flex;gap:16px;align-items:center;justify-content:center;z-index:20}
.action-btn{
  flex:1;border:.8px solid rgba(0,0,0,.75);border-radius:999px;background:rgba(239,232,218,.36);color:#111;box-shadow:none;
  font-size:10.6px;font-weight:400;line-height:1;padding:9px 10px;white-space:nowrap;cursor:pointer;
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','AlibabaPuHuiTi','PingFang SC',Arial,sans-serif;
}
.action-btn:active{transform:scale(.985);background:rgba(239,232,218,.55)}

.poster-modal{position:absolute;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);padding:18px}
.poster-modal.show{display:flex}
.poster-card{width:min(92%,360px);max-height:92%;background:#f3f0e7;border-radius:16px;padding:14px 14px 16px;box-shadow:0 18px 48px rgba(0,0,0,.28);text-align:center}
.poster-card img{display:block;width:100%;max-height:64vh;object-fit:contain;border-radius:6px;background:#efede3;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default}
.poster-tip{margin:10px 0 12px;font-size:13px;line-height:1.45;color:#111}
.poster-modal-actions{display:flex;justify-content:center;gap:10px}
.modal-btn{border:1.1px solid #111;border-radius:999px;background:#f7f4ed;padding:9px 15px;font-size:13px;font-weight:600}

@media (max-width:390px){
  .archive-code-live{font-size:8px}
  .share-file-code{font-size:7px}
  .action-btn{font-size:10px;padding:8px 8px}
}

/* v38 exact original scent reveal: original text remains from image; covers reveal it */
.scent-cover{
  position:absolute;
  background:#999999;
  z-index:30;
  pointer-events:none;
  transform-origin:right center;
}
.scent-cover.active{
  animation:coverType var(--dur, .9s) steps(var(--steps, 20), end) forwards;
}
@keyframes coverType{
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}


/* v39: grey scent transition, short archive code, larger Orange code */
.scent-preload-page{
  background:#999999 !important;
  overflow:hidden;
}
.scent-preload-brand{
  position:absolute;
  top:4.8%;
  right:7.5%;
  font-family:'AlibabaPuHuiTi','AlibabaPuHuiTiW7','PingFang SC',Arial,sans-serif;
  font-size:clamp(20px,5vw,34px);
  font-weight:700;
  letter-spacing:.045em;
  color:#111;
}
.scent-preload-dot{
  position:absolute;
  left:8.3%;
  width:clamp(14px,3.4vw,26px);
  height:clamp(14px,3.4vw,26px);
  border-radius:50%;
  background:#000;
}
.scent-preload-dot.dot-top{top:4.7%;}
.scent-preload-dot.dot-bottom{bottom:7.6%;}
.scent-preload-stamp{
  position:absolute;
  right:3.5%;
  bottom:1.6%;
  width:45%;
  aspect-ratio:1/1;
  pointer-events:none;
}
.scent-preload-stamp img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  animation:ringSpin 4.8s linear infinite;
}
.scent-preload-stamp-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#111;
  font-family:'AlibabaPuHuiTi','AlibabaPuHuiTiW7','PingFang SC',Arial,sans-serif;
  font-weight:700;
  line-height:1.16;
  font-size:clamp(12px,3.1vw,22px);
}
.archive-code-live{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(13px,3.45vw,24px) !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  color:#111 !important;
  -webkit-text-stroke:.25px #111;
  left:37.6% !important;
  top:46.05% !important;
  width:42% !important;
}
.share-file-code{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(10px,2.65vw,18px) !important;
  font-weight:700 !important;
  letter-spacing:.035em !important;
  color:#111 !important;
  -webkit-text-stroke:.2px #111;
  left:15.2% !important;
  top:76.55% !important;
  width:36% !important;
}
@media (max-width:390px){
  .archive-code-live{font-size:12.5px !important;}
  .share-file-code{font-size:9.6px !important;}
}


/* v40 FINAL overrides */
.scent-preload-page{
  background:#999999 !important;
  overflow:hidden;
}
.scent-preload-brand{
  position:absolute;
  top:4.8%;
  right:7.5%;
  font-family:'AlibabaPuHuiTi','AlibabaPuHuiTiW7','PingFang SC',Arial,sans-serif;
  font-size:clamp(20px,5vw,34px);
  font-weight:700;
  letter-spacing:.045em;
  color:#111;
}
.scent-preload-dot{
  position:absolute;
  left:8.3%;
  width:clamp(14px,3.4vw,26px);
  height:clamp(14px,3.4vw,26px);
  border-radius:50%;
  background:#000;
}
.scent-preload-dot.dot-top{top:4.7%;}
.scent-preload-dot.dot-bottom{bottom:7.6%;}
.scent-preload-stamp{
  position:absolute;
  right:3.5%;
  bottom:1.6%;
  width:45%;
  aspect-ratio:1/1;
  pointer-events:none;
}
.scent-preload-stamp img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  animation:ringSpin 4.8s linear infinite;
}
.scent-preload-stamp-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#111;
  font-family:'AlibabaPuHuiTi','AlibabaPuHuiTiW7','PingFang SC',Arial,sans-serif;
  font-weight:700;
  line-height:1.16;
  font-size:clamp(12px,3.1vw,22px);
}

/* Archive number: short code UO-C-XXXX / UO-E-XXXX, larger and heavier Orange */
.archive-code-live{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(15px,4.1vw,28px) !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  color:#111 !important;
  -webkit-text-stroke:.35px #111;
  left:36.5% !important;
  top:45.95% !important;
  width:46% !important;
}
.share-file-code{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(11px,3.05vw,20px) !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
  color:#111 !important;
  -webkit-text-stroke:.25px #111;
  left:14.8% !important;
  top:76.55% !important;
  width:38% !important;
}
@media (max-width:390px){
  .archive-code-live{font-size:14px !important;}
  .share-file-code{font-size:10.5px !important;}
}

/* final adjustment: UO-E-xxxx code smaller and aligned with FILE NO. */
.archive-code-live{
  font-size:clamp(12px,3.15vw,21px) !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  -webkit-text-stroke:.18px #111 !important;
  left:39.2% !important;
  top:46.28% !important;
  width:40% !important;
  line-height:1 !important;
  transform:translateY(0) !important;
}

.share-file-code{
  font-size:clamp(9.5px,2.45vw,16px) !important;
  font-weight:700 !important;
  letter-spacing:.03em !important;
  -webkit-text-stroke:.14px #111 !important;
  left:16.8% !important;
  top:76.82% !important;
  width:34% !important;
  line-height:1 !important;
  transform:translateY(0) !important;
}

@media (max-width:390px){
  .archive-code-live{
    font-size:11.5px !important;
    top:46.32% !important;
  }
  .share-file-code{
    font-size:9px !important;
    top:76.86% !important;
  }
}

/* FINAL FIX: one full-page click layer; row mapping handled in JS */
.full-home-click{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  background:transparent !important;
  opacity:0 !important;
  z-index:50 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* final tune: archive code normal weight, not bold */
.archive-code-live{
  font-weight:400 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-size:clamp(10.5px,2.75vw,18px) !important;
  letter-spacing:.02em !important;
  color:#111 !important;
}

.share-file-code{
  font-weight:400 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-size:clamp(8.5px,2.15vw,14px) !important;
  letter-spacing:.02em !important;
  color:#111 !important;
}

@media (max-width:390px){
  .archive-code-live{
    font-size:10px !important;
  }
  .share-file-code{
    font-size:8px !important;
  }
}

/* final tune: archive code bigger but not bold */
.archive-code-live{
  font-weight:400 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-size:clamp(12.5px,3.25vw,21px) !important;
  letter-spacing:.02em !important;
  color:#111 !important;
  opacity:.92 !important;
}

.share-file-code{
  font-weight:400 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  font-size:clamp(9.8px,2.55vw,16px) !important;
  letter-spacing:.02em !important;
  color:#111 !important;
  opacity:.92 !important;
}

@media (max-width:390px){
  .archive-code-live{
    font-size:12px !important;
  }
  .share-file-code{
    font-size:9.4px !important;
  }
}

/* final: archive code same visual size as FILE NO. */
.archive-code-live{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(9px,2.25vw,14px) !important;
  font-weight:400 !important;
  letter-spacing:.015em !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  opacity:1 !important;
  color:#111 !important;
  line-height:1 !important;

  /* align with FILE NO. */
  top:46.42% !important;
  left:40.2% !important;
  width:36% !important;
}

.share-file-code{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(7.6px,1.95vw,12px) !important;
  font-weight:400 !important;
  letter-spacing:.015em !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  opacity:1 !important;
  color:#111 !important;
  line-height:1 !important;

  top:76.92% !important;
  left:17.8% !important;
  width:31% !important;
}

@media (max-width:390px){
  .archive-code-live{
    font-size:9px !important;
    top:46.46% !important;
  }
  .share-file-code{
    font-size:7.4px !important;
    top:76.96% !important;
  }
}

/* FINAL OVERRIDE: archive code bigger than previous version, not bold */
.archive-code-live{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(13.5px,3.45vw,23px) !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  opacity:1 !important;
  color:#111 !important;
  line-height:1 !important;

  top:46.30% !important;
  left:38.6% !important;
  width:44% !important;
}

.share-file-code{
  font-family:'OrangeTypewriter','OrangeTypewriterAlt','Courier New',monospace !important;
  font-size:clamp(10.5px,2.75vw,17px) !important;
  font-weight:400 !important;
  letter-spacing:.02em !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  opacity:1 !important;
  color:#111 !important;
  line-height:1 !important;

  top:76.78% !important;
  left:16.2% !important;
  width:36% !important;
}

@media (max-width:390px){
  .archive-code-live{
    font-size:13px !important;
    top:46.34% !important;
  }
  .share-file-code{
    font-size:10px !important;
    top:76.84% !important;
  }
}