.opening[hidden]{display:none!important}
body.opening-view{background:#0c0812;color:#fae8f0}
.opening{isolation:isolate;position:relative;overflow:hidden;width:100%;max-width:480px;min-height:100svh;margin:0 auto;padding:22px 24px 28px;box-sizing:border-box;background:radial-gradient(ellipse at 85% 18%,#5c22484d,transparent 52%),linear-gradient(160deg,#171022,#120c19 60%,#231020)}
.opening:before,.opening:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:280px;height:280px;border-radius:50%;filter:blur(42px);opacity:.22;background:#9e365b;top:20%;right:-160px;animation:openingGlow 9s ease-in-out infinite alternate}
.opening:after{background:#6a459d;top:65%;left:-180px;animation-delay:-4s}
.opening-stars{position:absolute;inset:-30px;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,#eec5d9 1px,transparent 1.8px),radial-gradient(circle,#cdb9f3 1px,transparent 1.6px);background-size:97px 137px,149px 191px;background-position:17px 20px,70px 81px;opacity:.2;animation:openingStars 12s ease-in-out infinite alternate}
.opening-back{appearance:none;background:transparent;border:0;color:#d8bbcf;font:inherit;font-size:13px;min-height:44px;padding:0 8px;margin-left:-8px;cursor:pointer}
.opening-content{text-align:center;padding-top:clamp(26px,7vh,64px);animation:openingEnter .55s ease-out both}
.opening-brand{font-size:17px;letter-spacing:3px;color:#e9b6ce;margin:0 0 32px}.opening-brand span{display:block;font-size:9px;letter-spacing:2px;margin-top:8px;color:#a789a7}
.opening-mode{display:inline-block;margin:0 0 18px;padding:6px 14px;border:1px solid #a05b794f;border-radius:30px;background:#51223955;font-size:12px;color:#f4b9d3}
#openingTitle{white-space:pre-line;font-size:clamp(28px,8.2vw,36px);line-height:1.42;letter-spacing:1px;margin:0;color:#f5bad1;font-family:'Songti SC','STSong','SimSun',serif;font-weight:700;outline:none}
.opening-description{font-size:14px;line-height:1.9;color:#c5acbf;max-width:300px;margin:20px auto 26px}
.opening-dimensions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 30px}.opening-dimensions>div{background:linear-gradient(145deg,#48243a80,#25192f99);border:1px solid #ae6e922f;border-radius:16px;padding:16px 3px}.opening-dimensions b{display:block;font-size:18px;font-weight:400;color:#d9a4c4;margin-bottom:9px}.opening-dimensions strong{display:block;font-size:13px;color:#f0dbe7}.opening-dimensions span{display:block;font-size:10px;margin-top:5px;color:#b99eaf}
.opening-start{width:100%;min-height:54px;border:1px solid #f6afc766;border-radius:28px;background:linear-gradient(115deg,#db739d,#ad365f 82%);box-shadow:inset 0 1px #ffe1ee44,0 8px 26px #bd396b33;color:#fff3f8;font:inherit;font-size:16px;font-weight:600;cursor:pointer}.opening-start:active{transform:translateY(1px)}.opening-start:disabled{opacity:.7}
.opening-note{font-size:11px;line-height:1.8;color:#b198ac;margin:14px 0 0}.opening-note+.opening-note{margin-top:4px}.opening-footer{text-align:center;margin:42px 0 0;font-size:10px;color:#937b90;line-height:2}
.opening button:focus-visible{outline:2px solid #fcb9d6;outline-offset:4px}
@keyframes openingGlow{to{transform:translate(-35px,45px);opacity:.32}}@keyframes openingStars{to{transform:translateY(-18px);opacity:.35}}@keyframes openingEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.opening:before,.opening:after,.opening-stars,.opening-content{animation:none}}
@media(max-width:350px){.opening{padding:16px 20px 24px}.opening-content{padding-top:20px}.opening-brand{margin-bottom:22px}.opening-description{margin:14px auto 20px}.opening-dimensions{margin-bottom:22px}.opening-footer{margin-top:26px}}
body.opening-view > header{display:none}

/* Match the reference's content rhythm, without decorative motion. */
.opening-romance,.opening-orbit{display:none}.opening:before,.opening:after,.opening-stars{animation:none}.opening-content{animation:none}
.opening-title-line{display:block}#openingTitle{white-space:normal}
.opening-brand{animation:referenceRise .7s .1s both}
#openingTitle{animation:referenceRise .7s .25s both}
.opening-description{animation:referenceRise .7s .4s both}
.opening-dimensions{animation:referenceRise .7s .5s both}
.opening-start{animation:referenceRise .7s .6s both}
.opening-note{animation:referenceRise .7s .7s both}
#quiz.active{animation:referenceFade .45s both}
#question.question-arrival,#options.question-arrival,#unsure.question-arrival,#notApplicable.question-arrival{animation:referenceFade .28s both}
#quiz .progress-line i{transition:width .4s cubic-bezier(.4,0,.2,1)}
@keyframes referenceRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes referenceFade{from{opacity:0}to{opacity:1}}
.result-transition[hidden]{display:none!important}body.analyzing-view>header{display:none}body.analyzing-view{background:#0c0812}
.result-transition{max-width:480px;min-height:100svh;margin:auto;box-sizing:border-box;padding:36px 24px;display:grid;place-items:center;color:#fae6ef;background:radial-gradient(ellipse at center,#54203c66,transparent 65%),#120b1b;animation:referenceFade .45s both}
.transition-content{text-align:center;width:100%}.transition-ring{position:relative;width:132px;height:132px;margin:0 auto 30px}.transition-ring i{position:absolute;inset:0;border:2px solid transparent;border-top-color:#ed90b8;border-bottom-color:#9262b1;border-radius:50%;animation:transitionSpin 2.6s linear infinite}.transition-ring i:nth-child(2){inset:15px;border-top-color:#ae7ac7;border-bottom-color:#dd6e9e;animation-direction:reverse;animation-duration:2s}.transition-ring i:nth-child(3){inset:32px;border:2px dotted #cd8bab77;animation-duration:5s}
#transitionTitle{font-size:21px;line-height:1.5;margin:0 0 14px;outline:none}#transitionStep{font-size:14px;line-height:1.8;color:#e3bdd3;min-height:50px;margin:0}.transition-note{font-size:11px;color:#a991ab;margin:12px 0 26px}#skipTransition{font:inherit;font-size:13px;color:#e8bbd4;border:1px solid #bb79945c;background:#49213a70;border-radius:24px;padding:12px 22px;min-height:44px;cursor:pointer}#skipTransition:focus-visible{outline:2px solid #fdbbd5;outline-offset:4px}
@keyframes transitionSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.opening-brand,#openingTitle,.opening-description,.opening-dimensions,.opening-start,.opening-note,#quiz.active,#question.question-arrival,#options.question-arrival,#unsure.question-arrival,#notApplicable.question-arrival,.result-transition,.transition-ring i{animation:none}#quiz .progress-line i{transition:none}}

/* Product owner requested automatic content animation; OS settings are untouched. */
body.motion-auto .opening-brand{animation:referenceRise .7s .1s both}
body.motion-auto #openingTitle{animation:referenceRise .7s .25s both}
body.motion-auto .opening-description{animation:referenceRise .7s .4s both}
body.motion-auto .opening-dimensions{animation:referenceRise .7s .5s both}
body.motion-auto .opening-start{animation:referenceRise .7s .6s both}
body.motion-auto .opening-note{animation:referenceRise .7s .7s both}
body.motion-auto #quiz.active{animation:referenceFade .45s both}
body.motion-auto #question.question-arrival,body.motion-auto #options.question-arrival,body.motion-auto #unsure.question-arrival,body.motion-auto #notApplicable.question-arrival{animation:referenceFade .28s both}
body.motion-auto .transition-ring i{animation:transitionSpin 2.6s linear infinite}body.motion-auto .transition-ring i:nth-child(2){animation-direction:reverse;animation-duration:2s}body.motion-auto .transition-ring i:nth-child(3){animation-duration:5s}
body.motion-auto .result-transition{animation:referenceFade .45s both}
body.motion-auto #quiz .progress-line i{transition:width .4s cubic-bezier(.4,0,.2,1)}