@font-face { font-family: "MHeiPRC"; src: url("/fonts/MHeiPRC-Medium.ttf") format("truetype"); font-display: swap; }
:root { color: #d9b76c; background: #080604; font-family: "MHeiPRC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #080604 url("/images/background.png") center top / 100% auto no-repeat; }
button, label { font: inherit; }
button { border: 0; }
[hidden] { display: none !important; }
.experience { width: min(100%, 720px); min-height: 100svh; margin: 0 auto; padding: calc(clamp(18px, 4vw, 30px) + 30px) clamp(20px, 8.5vw, 62px) 20px; display: flex; flex-direction: column; align-items: center; }
.brand { width: min(40.6%, 200px); }
.brand img, .campaign-copy img, .image-button img, .legal img { display: block; width: 100%; height: auto; }
.campaign-copy { width: min(70%, 357px); margin-top: clamp(29px, 6.6vw, 50px); }
.photo-section { width: min(80.5%, 380px); margin-top: clamp(27px, 5.5vw, 42px); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.photo-stage { position: relative; width: 100%; aspect-ratio: .76; overflow: hidden; }
.stage-glow { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#photo { position: absolute; z-index: 1; top: 3.54%; left: 4.77%; width: 90.46%; height: 92.84%; object-fit: contain; object-position: center; }
.plus-upload { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 0; background: transparent; cursor: pointer; }
.plus-upload img { width: clamp(46px, 8vw, 76px); height: auto; }
.image-button { display: block; width: min(50%, 202px); padding: 0; background: transparent; cursor: pointer; }
.image-button:focus-visible, .plus-upload:focus-visible { outline: 2px solid #e6cb84; outline-offset: 5px; }
.actions { width: min(70%, 330px); margin-top: 25px; display: flex; flex-direction: column; align-items: center; }
.start-button { width: min(60%, 202px); margin-top: 5px; }
#reselect { width: min(52.2%, 202px); margin-top: 5px; }
.start-button:disabled { cursor: not-allowed; opacity: .52; }
.status, #error { min-height: 1.6em; margin: 20px 0 0; color: #c4a762; font-size: clamp(12px, 2.7vw, 18px); letter-spacing: .08em; text-align: center; }
#error { margin-top: 5px; color: #f08c7f; }
progress { width: 100%; height: 8px; margin-top: 13px; accent-color: #c9a95b; }
.legal { align-self: flex-start; width: min(70vw, 266px); margin: auto 0 0 calc(20px - clamp(20px, 8.5vw, 62px)); padding-top: 20px; pointer-events: none; }
.authorization { width: min(95%, 520px); margin-top: 60px;; display: flex; flex-direction: column; align-items: center; gap: clamp(25px, 3vw, 32px); }
.authorize-copy { position: relative; width: 100%; }
.authorize-copy img, .authorize-button img { display: block; width: 100%; height: auto; }
.policy-link { position: absolute; left: 15%; top: 49%; width: 72%; height: 14%; padding: 0; background: transparent; cursor: pointer; }
.authorize-actions {  margin-top: 40px; width: min(70%, 218px); display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.authorize-button { padding: 0; background: transparent; cursor: pointer; }
.authorize-button:focus { outline: none; }
.policy-link:focus-visible { outline: 2px solid #e6cb84; outline-offset: 4px; }
.policy-modal { position: fixed; z-index: 20; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.policy-header { flex: 0 0 50px; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #000; }
.policy-back { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; background: transparent; cursor: pointer; }
.policy-back img { display: block; width: 8px; height: 15px; }
.policy-back:focus { outline: none; }
.policy-title { display: block; width: 60px; height: auto; }
.policy-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; }
.policy-scroll img { display: block; width: min(100%, 1125px); height: auto; margin: 0 auto; }
@media (max-width: 390px) { .experience { padding-inline: 20px; } .campaign-copy { margin-top: 25px; } .photo-section { margin-top: 22px; gap: 12px; } .actions { margin-top: 20px; } .authorization { margin-top: 22px; } .legal { padding-top: 16px; } }
#progress {
  display: none !important;
}