:root { color-scheme: light; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #badbd5; color: #955330; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100dvh; }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: wait; }
button:focus-visible, input:focus-visible { outline: 3px solid #8c492d; outline-offset: 3px; }
#app { position: relative; width: min(100%, 600px); margin: auto; container-type: inline-size; }
.page { position: relative; width: 100%; aspect-ratio: 1 / 2; overflow: hidden; }
.background { display: block; position: absolute; width: 100%; height: 100%; pointer-events: none; user-select: none; }
#phone { position: absolute; left: 9%; top: 79.533%; width: 34.8%; height: 3.14%; border: 1px solid #bb7550; border-radius: 100px; background: #faf7e9; padding: 0 2%; font-size: clamp(16px, 2.8vw, 22px); color: #784631; }
.phone-submit { position: absolute; left: 19.067%; top: 83.733%; width: 12.267%; height: 2.734%; border: 0; padding: 0; background: transparent; }
.phone-submit::before { content: ""; position: absolute; inset: -12px; }
.art-crop { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; }
.phone-submit img { position: absolute; max-width: none; pointer-events: none; }
.consent { position: absolute; left: 5.067%; top: 92.267%; width: 6.4%; height: 3.2%; cursor: pointer; touch-action: manipulation; }
.consent input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.consent-art { position: absolute; left: 31.25%; top: 31.25%; width: 29.167%; height: 29.167%; pointer-events: none; }
.consent-art img { position: absolute; max-width: none; }
.consent-check { display: none; }
.consent input:checked + .consent-art .consent-check { display: block; }
.consent input:focus-visible + .consent-art { outline: 2px solid #8c492d; outline-offset: 3px; }
.question { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
.option { position: absolute; display: block; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.option input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; touch-action: manipulation; }
.option img { display: block; position: absolute; max-width: none; pointer-events: none; }
.option input:focus-visible + .art-crop { outline: 3px solid #8c492d; outline-offset: 3px; }
.quiz-submit { position: absolute; left: 63%; top: 62.2%; width: 31%; height: 4%; min-height: 44px; background: transparent; border: 0; border-radius: 6px; }
.quiz-submit:active { background: #95533018; }
#statusPanel { position: absolute; z-index: 10; left: 48.3%; top: 79.2%; width: 28.4%; padding: 1.067% 1.867%; text-align: center; color: #fff; background: rgba(135, 45, 34, .9); border-radius: 2px; pointer-events: none; }
#statusText { margin: 0; font-size: clamp(9px, 2.533cqw, 15.2px); line-height: 1.37; overflow-wrap: anywhere; }
#app[data-page="1"] #statusPanel { top: 59%; left: 48.3%; width: 43%; }
#app[data-page="2"] #statusPanel { top: 74%; left: 10%; width: 80%; padding: 2% 3%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) { button img { transition: filter .15s; } button:active img { filter: brightness(1.1); } }