:root{--paper:#fffaf0;--ink:#20262a;--muted:#77736b;--coral:#ef7759;--mint:#78b9aa;--blue:#79aee9;--purple:#a38ad8;--line:#2a2d2f;--shadow:rgba(55,46,35,.16);font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;color:var(--ink);background:#e8e4da}
*{box-sizing:border-box}button{font:inherit;color:inherit}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased;overscroll-behavior:none;background:#ded9cf}
.mobile-prototype{width:min(100vw,390px);height:min(100dvh,844px);margin-inline:auto;overflow:hidden;position:relative;background:var(--paper);box-shadow:0 24px 70px rgba(30,29,26,.2);isolation:isolate}
.paper-noise{display:none}
.story-app{height:100%;display:grid;grid-template-rows:auto 312px auto 1fr auto;padding:18px 16px 14px;gap:10px;touch-action:pan-x}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:40px}.brand{font-family:KaiTi,"STKaiti",serif;font-size:25px;font-weight:900;letter-spacing:2px}.progress{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900}.progress-line{width:74px;height:5px;background:#e9e1d4;border-radius:10px;overflow:hidden}.progress-line i{display:block;height:100%;width:var(--progress);background:var(--coral);border-radius:inherit;transition:width .45s ease}
.scene{position:relative;overflow:hidden;border-bottom:1.5px solid rgba(42,45,47,.3)}.scene picture{display:block;width:100%;height:100%}.scene img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01);transition:opacity .2s ease,transform .55s cubic-bezier(.2,.9,.2,1)}.scene-label{position:absolute;left:13px;top:8px;z-index:1;background:rgba(255,250,240,.9);border:1.5px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.scene.enter img{animation:scene-in .58s cubic-bezier(.2,.8,.2,1)}
.prompt{text-align:center;padding:2px 4px 0}.prompt h1{margin:0;font-family:KaiTi,"STKaiti",serif;font-size:25px;line-height:1.15;letter-spacing:1px}.prompt p{margin:5px 0 0;color:var(--muted);font-size:11px;font-weight:700}
.choices{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:12px;min-height:0;padding-top:8px}.choice{--accent:var(--coral);height:100%;min-height:238px;position:relative;display:flex;flex-direction:column;padding:12px 10px 10px;border:1.8px solid var(--line);border-radius:18px;background:rgba(255,252,245,.96);box-shadow:0 7px 0 var(--shadow);cursor:grab;user-select:none;touch-action:none;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.choice[data-side="right"]{--accent:var(--mint)}.choice:focus-visible{outline:4px solid rgba(121,174,233,.42);outline-offset:2px}.choice:hover{transform:translateY(-4px)}.choice.dragging{cursor:grabbing;transition:none;z-index:4;box-shadow:0 15px 25px rgba(50,43,36,.2)}.choice.fly{pointer-events:none;animation:fly-up .58s cubic-bezier(.17,.8,.2,1) forwards;z-index:5}.choice.fade{animation:fade-away .4s ease forwards}.choice.hint{animation:card-hint 1.8s ease-in-out infinite;z-index:2}.choice h2{margin:0;min-height:46px;font-family:KaiTi,"STKaiti",serif;font-size:17px;line-height:1.24;text-align:center}.choice-art{flex:1;min-height:0;margin-top:6px;border-radius:11px;overflow:hidden;background:#fbf5e8}.choice-art img{width:100%;height:100%;object-fit:contain;object-position:center}.choice-art.raster img{object-fit:cover}.choice-mark{position:absolute;right:9px;bottom:9px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:white;font-size:20px;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.gesture{display:flex;align-items:center;justify-content:center;gap:8px;color:#55524c;font-size:11px;font-weight:800}.gesture-arrow{color:var(--coral);font-size:20px;animation:nudge 1.35s ease-in-out infinite}.skip{border:0;background:none;padding:5px 10px;color:#88837b;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.footer-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;min-height:32px}.history{display:flex;gap:5px}.history i{width:7px;height:7px;border-radius:50%;background:#dfd6c8}.history i.done{background:var(--purple)}
.toast{position:absolute;left:50%;top:45%;z-index:10;transform:translate(-50%,-50%) scale(.9);padding:10px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:900;opacity:0;pointer-events:none}.toast.show{animation:toast .7s ease}
.result{height:100%;padding:24px 22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center}.result-tag{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--coral)}.result h1{margin:10px 0 8px;font-family:KaiTi,"STKaiti",serif;font-size:34px;line-height:1.1}.result p{margin:0;color:#68645e;font-size:14px;line-height:1.7}.result-art{width:100%;height:385px;margin:18px 0 12px;border-bottom:1.5px solid var(--line);overflow:hidden}.result-art img{width:100%;height:100%;object-fit:cover;object-position:center 56%;mix-blend-mode:multiply}.trail{width:100%;display:flex;justify-content:center;gap:8px;margin:4px 0 18px}.trail i{width:24px;height:8px;border-radius:999px;background:#ddd3c5}.trail i:nth-child(4n+1){background:var(--coral)}.trail i:nth-child(4n+2){background:var(--blue)}.trail i:nth-child(4n+3){background:var(--mint)}.trail i:nth-child(4n){background:var(--purple)}.restart{width:100%;min-height:50px;border:1.8px solid var(--line);border-radius:16px;background:var(--ink);color:#fff;font-weight:900;box-shadow:0 6px 0 rgba(32,38,42,.18);cursor:pointer}
@keyframes scene-in{0%{opacity:.25;transform:translateX(30px) scale(1.05)}100%{opacity:1;transform:scale(1.01)}}@keyframes card-hint{0%,72%,100%{transform:translateY(-8px) rotate(-1.6deg)}84%{transform:translateY(-20px) rotate(-2.4deg)}}@keyframes fly-up{0%{transform:translateY(var(--drag-y,0)) rotate(var(--drag-r,0deg));opacity:1}52%{transform:translateY(-220px) rotate(-3deg) scale(.9);opacity:1}100%{transform:translateY(-420px) rotate(2deg) scale(.6);opacity:0}}@keyframes fade-away{to{opacity:0;transform:scale(.92)}}@keyframes nudge{50%{transform:translateY(-5px)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.98)}}
@media(max-height:760px){.story-app{grid-template-rows:auto 265px auto 1fr auto;padding-top:10px;gap:7px}.choice{min-height:205px}.prompt h1{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.intro-screen{height:100%;display:flex;flex-direction:column;align-items:center;padding:18px 22px 14px;text-align:center;overflow:hidden}.intro-brand{align-self:stretch;text-align:left;font-family:KaiTi,"STKaiti",serif;font-size:22px;font-weight:900;letter-spacing:1px}.intro-brand small{display:block;margin-top:2px;font-family:Arial,sans-serif;font-size:7px;letter-spacing:2px}.intro-art{width:100%;height:245px;margin:8px 0 3px;overflow:hidden;border-bottom:1.5px solid var(--line)}.intro-art picture{display:block;width:100%;height:100%}.intro-art img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01)}.intro-tag{margin-top:8px;color:var(--coral);font-size:10px;font-weight:900;letter-spacing:1.5px}.intro-screen h1{margin:7px 0 6px;font-family:KaiTi,"STKaiti",serif;font-size:31px;line-height:1.1;letter-spacing:1px}.intro-lead{margin:0;max-width:330px;color:#615e58;font-size:13px;line-height:1.55}.intro-rules{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}.intro-rules p{margin:0;padding:10px 9px;border:1.5px solid var(--line);border-radius:14px;background:rgba(255,252,245,.78);text-align:left}.intro-rules b{display:block;margin-bottom:4px;font-size:12px}.intro-rules span{display:block;color:#716d66;font-size:10px;line-height:1.45}.start{width:100%;min-height:49px;border:1.8px solid var(--line);border-radius:15px;background:var(--ink);color:#fff;font-size:14px;font-weight:900;box-shadow:0 6px 0 rgba(32,38,42,.18);cursor:pointer}.resume{margin-top:8px;border:0;background:none;color:var(--coral);font-size:12px;font-weight:900;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.disclaimer{margin:10px 0 0;color:#918b82;font-size:9px;line-height:1.45}
.back{flex:0 0 32px;width:32px;height:32px;border:1.5px solid var(--line);border-radius:50%;background:rgba(255,250,240,.9);font:900 25px/24px Arial;cursor:pointer}.topbar .brand{margin-right:auto;margin-left:8px}.topbar .progress{flex:0 0 auto}.story-app .scene{height:auto}
.assessment-result{display:block;overflow-y:auto;padding:20px 20px 16px;text-align:center;scrollbar-width:none}.assessment-result::-webkit-scrollbar{display:none}.assessment-result h1{font-size:30px;margin:8px 0 6px}.assessment-result>p{font-size:12px;line-height:1.55}.result-list{display:grid;gap:9px;width:100%;margin:15px 0 12px;text-align:left}.dimension-result{padding:11px 12px 9px;border:1.5px solid rgba(42,45,47,.72);border-radius:14px;background:rgba(255,252,245,.9)}.dimension-head,.dimension-poles{display:flex;align-items:center;justify-content:space-between;gap:8px}.dimension-head b{font-size:14px;letter-spacing:1px}.dimension-head span{font-size:10px;font-weight:900;color:var(--dim-color)}.spectrum-bar{position:relative;height:8px;margin:8px 0 5px;border-radius:999px;background:#e8dfd2;border-left:55px solid var(--dim-color);border-right:55px solid color-mix(in srgb,var(--dim-color),white 35%)}.spectrum-bar::after{content:"";position:absolute;left:calc(var(--marker) - 7px);top:50%;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transform:translateY(-50%);box-shadow:0 2px 0 rgba(0,0,0,.12)}.dimension-poles{color:#736f68;font-size:9px}.dimension-copy{margin:7px 0 0;color:#6e6962;font-size:9px;line-height:1.45}.result-note{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:13px;background:#eee8fb;text-align:left}.result-note b{font-size:11px;white-space:nowrap}.result-note span{font-size:9px;line-height:1.4;color:#6f687b}.assessment-result details{width:100%;margin:10px 0 12px;text-align:left}.assessment-result summary{cursor:pointer;font-size:11px;font-weight:900}.assessment-result details p{margin:6px 0 0;font-size:10px;line-height:1.5;color:#6e6962}.assessment-result .restart{min-height:47px}.home{width:100%;min-height:38px;margin-top:7px;border:0;background:none;color:#6e6962;font-size:11px;font-weight:900;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.result-disclaimer{margin:7px 0 0!important;color:#969087!important;font-size:8px!important}.assessment-result .result-tag{display:block}
@media(max-height:760px){.intro-art{height:195px}.intro-screen h1{font-size:27px}.intro-rules{margin:9px 0}.intro-screen{padding-top:10px}.assessment-result{padding-top:12px}.result-list{gap:6px;margin:10px 0}.dimension-result{padding:8px 10px}}
.assessment-result h1{font-size:26px}
.choice-art picture{display:block;width:100%;height:100%}