:root{--blue:#53adf0;--cream:#fcf7e6;--ink:#242e29;--yellow:#fff28a}*{box-sizing:border-box}body{margin:0;background:#3199e7;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #9736da;outline-offset:4px}#app{width:100%;max-width:480px;min-height:100svh;margin:auto;position:relative;background:var(--cream);overflow:hidden;box-shadow:0 0 80px #137ac25c}.top{background-color:var(--blue);background-image:radial-gradient(#2389ce 1.4px,transparent 1.7px);background-size:7px 7px;padding:23px 25px 38px;position:relative}.top:after{content:"";position:absolute;bottom:-1px;left:-5%;width:110%;height:22px;background:var(--cream);border-radius:60% 65% 0 0}.brand{color:#fff;font-size:12px;line-height:1.35;font-weight:800;display:flex;align-items:center;gap:8px}.brand b{font-size:31px;letter-spacing:-3px}.brand b em{font-style:normal;color:#ffcd00}.topline{display:flex;align-items:center;justify-content:space-between}.text-button{border:0;background:transparent;color:inherit;font-size:13px;padding:9px}.top .text-button{color:white;font-weight:600}.home-title{padding:27px 25px 0;text-align:center}.sticker{display:inline-block;background:white;color:#6b432c;padding:4px 12px;font-size:18px;transform:rotate(-5deg);font-weight:900;margin-bottom:12px}.home-title h1{font-size:37px;font-weight:950;line-height:1.25;letter-spacing:-1px;margin:4px 0 12px}.highlight{background:linear-gradient(transparent 67%,#ffe611 67%,#ffe611 94%,transparent 94%)}.english{font-weight:800;font-size:15px;color:#6b432c}.hero-art{width:100%;aspect-ratio:1080/525;position:relative;overflow:hidden;margin:18px 0 4px}.hero-art img{position:absolute;width:100%;top:-150%;left:0}.home-bottom{padding:0 25px 25px;text-align:center}.intro{font-size:14px;line-height:1.8;margin:12px 0 18px;color:#5f665b}.primary{background:#ffe55a;color:#303429;border:2px solid #303429;border-radius:40% 44% 38% 42% / 45% 42% 48% 45%;width:100%;min-height:57px;font-size:19px;display:flex;align-items:center;justify-content:center;gap:15px;font-weight:900;box-shadow:0 5px 0 #303429;text-decoration:none}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #303429}.link-button{background:transparent;border:0;color:#397fb7;font-size:14px;padding:20px 12px 6px;text-decoration:underline;text-underline-offset:5px}.question{padding:25px 25px 35px;min-height:calc(100svh - 108px);display:flex;flex-direction:column}.step{color:#318ed5;font-weight:700;letter-spacing:2px;font-size:12px}.trail{display:flex;gap:7px;margin:12px 0 30px}.trail span{width:27px;height:5px;border-radius:6px;background:#d9e4e4}.trail .done{background:#54acf0}.question h1{font-size:28px;line-height:1.5;margin:0 0 8px;font-weight:900}.question h2{font-size:23px;margin:0 0 30px;font-weight:800}.choices{display:grid;gap:22px}.choice{text-align:left;border:2px solid var(--edge);background:var(--fill);color:var(--ink);border-radius:25% 22% 23% 18% / 30% 35% 30% 34%;padding:24px 20px;display:flex;align-items:center;gap:14px;font-size:18px;font-weight:800;line-height:1.65;min-height:135px;transition:transform .16s,box-shadow .16s}.choice:hover{transform:translateY(-3px);box-shadow:0 5px 0 var(--edge)}.choice b{color:var(--edge);font-size:35px;font-family:Arial}.blue{--fill:#d9ebff;--edge:#53adf0}.green{--fill:#dff0d6;--edge:#059e66}.pink{--fill:#ffe0ea;--edge:#d64476}.yellow{--fill:#fff0c4;--edge:#d8b44e}.purple{--fill:#f5e6ff;--edge:#a900ef}.hint{font-size:12px;color:#8d927f;text-align:center;margin-top:auto;padding-top:35px}.result{padding:22px 25px 32px;text-align:center}.result .step{margin-bottom:10px}.result h1{font-size:42px;margin:12px 0 3px;font-weight:900}.result .en{font-weight:800;font-size:18px;margin-bottom:8px}.role-art{position:relative;overflow:hidden;width:100%;background:var(--cream)}.role-art img{position:absolute;max-width:none}.badge{display:inline-block;color:#dc4553;border:2px solid #dc4553;padding:3px 10px;transform:rotate(-6deg);font-weight:900;margin:12px 0 6px}.description{text-align:left;line-height:1.9;font-size:17px;margin:15px 0 22px;padding:19px 20px;border:2px solid #ead6a6;border-radius:24% 21% 23% 15% / 25% 20% 25% 20%}.result-note{font-size:12px;line-height:1.7;color:#7d826e;margin:18px 0 0}.atlas{padding:22px 20px 30px}.atlas h1{font-size:29px;margin:0 0 8px}.atlas p{font-size:14px;line-height:1.7;color:#6e7666}.atlas-image{width:100%;display:block;border-radius:12px}.role-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.role-summary{padding:15px;background:#fff9ed;border:1px solid #ead6a6;border-radius:15px;text-align:left;color:var(--ink)}.role-summary strong{font-size:17px}.role-summary small{display:block;font-size:10px;margin-top:4px;color:#6a7268}.role-summary .mini{color:#d64476;font-size:10px}.gallery-desc{padding:14px;background:#e2f0fd;line-height:1.8;font-size:14px;border-radius:15px}dialog{border:0;border-radius:22px;background:var(--cream);max-width:440px;width:92%;max-height:92svh;padding:20px;color:var(--ink)}dialog::backdrop{background:#193b57b8}dialog>p{font-size:14px}#poster-image{width:100%;display:block;margin:10px 0 20px}dialog .primary{font-size:16px}.arrow{width:24px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5}section{animation:appear .25s ease}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:600px){#app{margin:24px auto;min-height:840px;border-radius:24px}.question{min-height:730px}.hero-art{margin-top:25px}body{background-color:#3199e7;background-image:radial-gradient(#2085cc 1.5px,transparent 1.5px);background-size:12px 12px}}@media(max-width:360px){.home-title h1{font-size:32px}.question{padding:20px}.question h1{font-size:24px}.question h2{font-size:21px}.choice{font-size:16px;padding:20px 16px;min-height:125px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.original-logo{width:166px;height:40px;overflow:hidden;position:relative}.original-logo img{position:absolute;width:864px;max-width:none;left:-37px;top:-27px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.image-stage{position:relative;width:100%;background:#53adf0;line-height:0}.screen-art{width:100%;height:auto;display:block}.image-hotspot{position:absolute;background:transparent;border:0;color:transparent;border-radius:24px;padding:0}.image-hotspot:hover{background:#fff1}.image-hotspot:active{background:#ffffff26}.image-hotspot:focus-visible{outline:4px dashed #7a36c6;outline-offset:-4px}.home-start{left:8%;width:84%;top:79.5%;height:12%}.home-atlas{left:25%;width:50%;top:92%;height:6%}.question-back{left:71%;width:26%;top:2%;height:7%}.answer-0{left:7%;width:86%;top:38.8%;height:19.4%}.answer-1{left:7%;width:86%;top:63.5%;height:19.4%}.generated-control{background:transparent;border:0;display:block;width:100%;aspect-ratio:1024/360;overflow:hidden;position:relative;margin:8px 0;padding:0;border-radius:25px}.generated-control img{position:absolute;left:0;width:100%;max-width:none}.generated-control:active{transform:scale(.97)}.result .role-art{margin:8px 0}.result .step{font-size:17px;letter-spacing:1px;margin:0 0 18px;font-weight:900}.result .description{font-size:16px;margin-bottom:10px}#app:has(.image-stage){min-height:0;background:#53adf0}@media(min-width:600px){#app:has(.image-stage){max-width:480px;min-height:0}}

/* Image-generated results, posters and atlas */
.result-generated{padding:0 0 20px;background:#fcf7e6}.result-poster{width:100%;display:block}.result-generated .generated-control{width:88%;margin:0 auto;aspect-ratio:1024/360}.image-nav{position:relative;aspect-ratio:1024/135;overflow:hidden;background:#53adf0;line-height:0}.image-nav>img{width:100%;display:block}.image-nav .question-back{height:95%;top:0}.atlas-return{left:18%;width:64%;top:86%;height:9%}#app:has(.result-generated){min-height:0}

.switch-style{display:block;width:75%;padding:0;margin:14px auto;background:transparent;border:0}.switch-style img{display:block;width:100%;height:auto}.switch-style:disabled{opacity:.55;cursor:wait}.switch-style:active{transform:scale(.97)}.result-poster{aspect-ratio:2/3;object-fit:contain;background:#53adf0}

.longpress-poster{position:relative;width:88%;margin:12px auto 4px;line-height:0}.longpress-hint{display:block;width:100%;height:auto;pointer-events:none}.save-target{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:1;object-fit:fill;cursor:context-menu;pointer-events:auto;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}

/* 1080 x 1870 mobile screens; 1080 x 1440 Xiaohongshu result posters. */
.image-stage{aspect-ratio:1080/1870}.screen-art{aspect-ratio:1080/1870;height:auto}.home-start{left:12%;width:76%;top:75%;height:9%}.home-atlas{left:29%;width:42%;top:84%;height:6%}.question-back{top:2%;height:6%}.atlas-return{left:23%;width:54%;top:80.5%;height:10%}.result-poster{aspect-ratio:3/4}

.home-start{top:79%;height:9.5%}.home-atlas{top:89%;height:6.5%}.atlas-return{top:85%;height:10.5%}