:root{--ink:#1a1b20;--paper:#f1efe8;--white:#fffef9;--red:#e95f53;--blue:#51a4d1;--yellow:#efb62f;--green:#69af65;--muted:#6d6d70}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:radial-gradient(#181818 .55px,transparent .55px);background-size:5px 5px}button{font:inherit}.shell{position:relative;max-width:820px;min-height:100vh;margin:auto;padding:18px clamp(18px,5vw,44px) 56px}.topbar{height:48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;border:0;background:none;padding:4px 0;color:var(--ink);cursor:pointer;text-align:left}.brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.08}.brand-copy strong{font-size:.86rem;letter-spacing:.09em}.brand-copy small{margin-top:4px;color:var(--muted);font-size:.62rem;font-weight:600;white-space:nowrap}.mini-grid{display:grid;grid-template-columns:repeat(2,7px);gap:2px}.mini-grid i{width:7px;height:7px;border-radius:2px}.mini-grid i:nth-child(1){background:var(--red)}.mini-grid i:nth-child(2){background:var(--blue)}.mini-grid i:nth-child(3){background:var(--yellow)}.mini-grid i:nth-child(4){background:var(--green)}.text-btn,.link-btn{border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:4px}.screen{padding-top:clamp(30px,6vh,62px)}.hidden{display:none!important}.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;color:var(--muted)}h1{font-size:clamp(2.35rem,7vw,4rem);line-height:1.06;letter-spacing:-.05em;margin:14px 0 18px}h2{letter-spacing:-.025em}.intro{text-align:center}.intro-copy,.section-copy{color:var(--muted);line-height:1.75}.intro-copy{max-width:460px;margin:0 auto 24px}.fine-print{font-size:.78rem;color:#808084;line-height:1.65;max-width:590px;margin:20px auto 0}.primary,.secondary{border:1.5px solid var(--ink);border-radius:13px;padding:14px 22px;font-weight:800;cursor:pointer;transition:.16s}.primary{background:var(--ink);color:#fff;box-shadow:0 5px 0 #aaa69c}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #aaa69c}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #aaa69c}.primary:disabled{opacity:.38;cursor:not-allowed}.secondary{background:transparent}.intro>.primary{display:block;min-width:220px;margin:0 auto 14px}.primary span{margin-left:18px}
.table-scene{height:245px;position:relative;max-width:520px;margin:0 auto 14px}.sample-card{position:absolute;width:150px;height:198px;border:5px solid #fff;border-radius:9px;box-shadow:0 10px 18px rgba(20,20,20,.18);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden;color:#162026;padding-bottom:18px}.sample-card:after{content:"Sunny爱分享";position:absolute;right:6px;bottom:4px;font-size:.45rem;font-weight:700;opacity:.55}.sample-card img{position:absolute;inset:0;width:100%;height:83%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 4px rgba(0,0,0,.15))}.sample-card strong{position:relative;z-index:2;font-size:.95rem;line-height:1.2;background:rgba(255,255,255,.72);border-radius:20px;padding:3px 10px}.sample-card small{position:absolute;right:7px;top:5px;font-weight:900;z-index:2}.red-card{background:var(--red);transform:rotate(-13deg);left:8%;top:28px}.blue-card{background:var(--blue);transform:rotate(-4deg);left:29%;top:5px}.yellow-card{background:var(--yellow);transform:rotate(7deg);right:29%;top:8px}.green-card{background:var(--green);transform:rotate(14deg);right:7%;top:30px}.creator-credit{display:inline-block;margin:0 auto 16px;padding:5px 11px;border:1px solid #c7c3b9;border-radius:99px;color:var(--muted);font-size:.76rem;letter-spacing:.04em;background:rgba(255,255,255,.45)}
.step-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:14px}.step-head h2{font-size:clamp(1.55rem,4vw,2.1rem);margin:8px 0 0}.step-head>b{color:var(--muted);white-space:nowrap}.progress{height:7px;border-radius:10px;background:#dcd9d0;overflow:hidden;margin-bottom:34px}.progress b{display:block;width:8.33%;height:100%;background:var(--ink);transition:width .3s}.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.face-card{position:relative;min-height:360px;border:5px solid var(--white);outline:1.5px solid var(--ink);border-radius:12px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#152029;cursor:pointer;box-shadow:0 12px 0 rgba(26,27,32,.12);overflow:hidden;transition:.18s transform,.18s box-shadow}.face-card:hover,.face-card:focus-visible{transform:translateY(-5px) rotate(var(--tilt));box-shadow:0 17px 0 rgba(26,27,32,.12);outline:2px solid var(--ink)}.face-card.red{background:var(--red);--tilt:-1deg}.face-card.blue{background:var(--blue);--tilt:1deg}.face-card.yellow{background:var(--yellow);--tilt:-1deg}.face-card.green{background:var(--green);--tilt:1deg}.face-card .card-index{position:absolute;top:15px;left:16px;font-size:.75rem;font-weight:800;opacity:.62;z-index:3}.face-card .score{position:absolute;right:13px;bottom:7px;font-size:1.8rem;font-weight:900;z-index:3}.face-card .persona{position:absolute;inset:28px 6% 72px;width:88%;height:calc(100% - 100px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 5px rgba(0,0,0,.18));transition:.18s transform}.face-card:hover .persona{transform:scale(1.025)}.face-card strong{position:absolute;left:12px;right:12px;bottom:38px;z-index:2;font-size:clamp(1.25rem,3.5vw,1.8rem);line-height:1.25;background:rgba(255,255,255,.82);border:1px solid rgba(0,0,0,.13);border-radius:99px;padding:7px 12px;backdrop-filter:blur(4px)}.face-card em{position:absolute;left:14px;bottom:18px;font-size:.65rem;font-style:normal;opacity:.7}.face-card .handle{position:absolute;right:8px;top:36px;writing-mode:vertical-rl;font-size:.56rem;font-weight:800;letter-spacing:.04em;opacity:.52;z-index:3}.hint{text-align:center;color:var(--muted);font-size:.83rem;margin:26px 0 12px}#prevBtn{display:block;margin:auto}
.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:25px;padding-bottom:95px}.rank-card{position:relative;min-height:158px;border:4px solid var(--white);outline:1.5px solid var(--ink);border-radius:9px;padding:18px 12px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:1.05rem;cursor:pointer;box-shadow:0 5px 0 rgba(26,27,32,.12);overflow:hidden;transition:.14s}.rank-card.red{background:var(--red)}.rank-card.blue{background:var(--blue)}.rank-card.yellow{background:var(--yellow)}.rank-card.green{background:var(--green)}.rank-card img{position:absolute;right:2px;bottom:0;width:72px;height:102px;object-fit:contain;object-position:right bottom;opacity:.5;pointer-events:none}.rank-card .rank-label{position:relative;z-index:2;background:rgba(255,255,255,.76);border-radius:18px;padding:5px 10px}.rank-card small{position:absolute;right:8px;top:5px;font-size:1.05rem;z-index:3}.rank-card .mini-handle{position:absolute;left:7px;bottom:5px;font-size:.48rem;opacity:.5;z-index:3}.rank-card:hover{transform:translateY(-2px)}.rank-card.selected{outline:4px solid var(--ink);transform:translateY(-4px)}.rank-card.selected:before{content:"✓";position:absolute;top:8px;left:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;z-index:4}.rank-card.locked{opacity:.34;cursor:default}.sticky-action{position:fixed;left:0;right:0;bottom:0;padding:14px max(18px,calc((100vw - 732px)/2));background:linear-gradient(transparent,var(--paper) 25%);z-index:4}.sticky-action .primary{width:100%}
.result{padding-top:36px}.result-head{text-align:center}.result-head p{color:var(--muted);max-width:560px;line-height:1.7;margin:0 auto 32px}.scoreboard{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.score-tile{border:1.5px solid var(--ink);border-radius:16px;background:var(--white);padding:16px 14px}.score-tile header{display:flex;justify-content:space-between;align-items:center}.score-tile strong{font-size:1rem}.score-tile b{font-size:1.55rem}.score-tile .meter{height:8px;border-radius:10px;background:#e5e2da;overflow:hidden;margin:15px 0 8px}.score-tile .meter i{display:block;height:100%;border-radius:10px}.score-tile small{color:var(--muted)}.first-four,.insight,.calculation{margin-top:22px;border:1.5px solid var(--ink);border-radius:18px;background:var(--white);padding:22px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h2,.insight h2{margin:0;font-size:1.15rem}.section-title span{font-size:.78rem;color:var(--muted)}.top-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px}.top-chip{border-radius:10px;padding:18px 8px;text-align:center;font-weight:800;border:1px solid rgba(0,0,0,.25)}.insight{background:var(--ink);color:#fff}.insight p{color:#e3e3e3;line-height:1.8;margin:12px 0 0}.calculation summary{font-weight:800;cursor:pointer}.calculation p{color:var(--muted);line-height:1.75;margin-bottom:0}.actions{display:flex;gap:12px;justify-content:center;margin-top:24px}.actions .primary{box-shadow:none}.result-credit{text-align:center;margin:22px 0 -9px;font-size:.8rem;font-weight:800;letter-spacing:.08em;color:var(--muted)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);background:#111;color:#fff;border-radius:99px;padding:11px 18px;opacity:0;pointer-events:none;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{max-width:520px;width:calc(100% - 34px);border:1.5px solid var(--ink);border-radius:18px;padding:28px;background:var(--white);color:var(--ink);box-shadow:0 20px 80px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(20,20,20,.46)}dialog h2{font-size:1.7rem;margin:10px 0 18px}dialog ol{padding-left:22px;line-height:1.8}dialog p{color:var(--muted);line-height:1.65}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:1.8rem;cursor:pointer}
@media(max-width:620px){.shell{padding-top:10px}.screen{padding-top:26px}.table-scene{height:210px}.sample-card{width:120px;height:165px}.red-card{left:2%}.blue-card{left:25%}.yellow-card{right:25%}.green-card{right:2%}.pair{gap:10px}.face-card{min-height:320px;padding:20px 10px}.rank-grid{grid-template-columns:repeat(2,1fr)}.scoreboard{grid-template-columns:1fr 1fr}.top-cards{grid-template-columns:1fr 1fr}.actions{flex-direction:column}.actions button{width:100%}}
@media(max-width:390px){.table-scene{transform:scale(.9);margin-left:-5%;margin-right:-5%}.face-card{min-height:290px}.face-card strong{font-size:1.3rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Character art stays secondary to the card words. */
.sample-card img{inset:auto;left:16%;right:16%;bottom:25px;width:68%;height:68%;opacity:.72;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}
.face-card .persona{inset:auto;left:18%;right:18%;bottom:72px;width:64%;height:62%;opacity:.58;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));transition:.18s transform,.18s opacity}
.face-card:hover .persona{opacity:.68}
.rank-card img{right:7px;bottom:7px;width:56px;height:80px;opacity:.28}
.face-card .persona{left:auto;right:3%;bottom:70px;width:38%;height:49%;opacity:.38;object-position:right bottom}
.face-card:hover .persona{opacity:.48}
.sample-card img{left:auto;right:5%;bottom:24px;width:56%;height:64%;opacity:.58;object-position:right bottom}
.account-links{display:flex;justify-content:center;gap:12px;margin:24px auto -6px;flex-wrap:wrap}.account-links>div{display:flex;align-items:center;gap:9px;min-width:210px;padding:9px 13px;border:1px solid #d2cec5;border-radius:13px;background:rgba(255,255,255,.58);text-align:left}.account-links img{width:34px;height:34px;border-radius:9px;flex:0 0 auto}.account-links span{display:flex;flex-direction:column;line-height:1.3}.account-links small{font-size:.67rem;color:var(--muted)}.account-links b{font-size:.88rem}

/* Keep the words central and let the four character watermarks stay visible. */
.face-card .persona{left:auto;right:2%;bottom:13px;width:29%;height:39%;opacity:.66;object-position:right bottom;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.face-card:hover .persona{opacity:.78}
.face-card strong{top:36%;bottom:auto;transform:translateY(-50%)}

.table-scene{max-width:520px;height:224px}
.sample-card{width:132px;height:184px;padding-bottom:0}
.sample-card img{left:auto;right:3%;bottom:9px;width:48%;height:55%;opacity:.78;object-position:right bottom;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.sample-card strong{position:absolute;left:10px;right:10px;top:33%;transform:translateY(-50%);text-align:center}
.red-card{left:0;top:38px;z-index:4}
.blue-card{left:24%;top:15px;z-index:3}
.yellow-card{left:48%;right:auto;top:9px;z-index:2}
.green-card{left:auto;right:0;top:32px;z-index:1}

@media(max-width:620px){
  .table-scene{height:186px}
  .sample-card{width:108px;height:150px}
  .red-card{left:0;top:31px}
  .blue-card{left:24%;top:13px}
  .yellow-card{left:48%;right:auto;top:7px}
  .green-card{left:auto;right:0;top:27px}
  .sample-card strong{font-size:.82rem;padding:3px 6px}
  .face-card .persona{width:28%;height:36%;bottom:11px}
}
.top-actions{display:flex;align-items:center;gap:14px}.home-link{text-decoration:none;border-right:1px solid #c7c3b9;padding-right:14px}