:root{font-family:PingFang SC,Microsoft YaHei,Noto Sans CJK SC,system-ui,sans-serif;color:#34233e;background:#e9d9ff;font-synthesis:none;--ink: #34233e;--muted: #645071;--purple: #653a9e;--line: #dfc8f2;--surface: #fff9ef;--grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.11' filter='url(%23n)'/%3E%3C/svg%3E");--shadow: 0 8px 25px #52348712, 0 2px 4px #5733950c}*{box-sizing:border-box}body{margin:0;min-width:300px;background:var(--grain),radial-gradient(ellipse at 7% 13%,#b5c9f3b0,transparent 38%),radial-gradient(ellipse at 93% 6%,#bba7ffb0,transparent 32%),radial-gradient(ellipse at 85% 63%,#eed4f8,transparent 47%),#e9d9ff;background-size:160px 160px,auto,auto,auto,auto}h1,h2,p,ul{margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid #7d41d9;outline-offset:4px}h1[tabindex]:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.app-shell{max-width:1040px;min-height:100svh;margin:auto;padding:0 clamp(14px,4vw,36px);display:flex;flex-direction:column}main{flex:1}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0}.brand{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:850;padding:3px 11px 3px 4px;background:#fff1df;border:2px solid #fffbf4;border-radius:13px 18px 10px 15px;transform:rotate(-2deg);box-shadow:0 3px #9469c240}.brand span{display:grid;place-items:center;width:30px;height:30px;color:#fff;background:#8655be;border-radius:9px}.quiet-label{font-size:12px;font-weight:800;color:#5c358e;border:1.5px solid #8b61bb;background:#f6eaff;padding:5px 10px;border-radius:12px;transform:rotate(3deg)}.site-footer{color:var(--muted);font-size:12px;text-align:center;padding:22px 0 max(23px,env(safe-area-inset-bottom))}.button{display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:50px;padding:10px 16px;border:1px solid transparent;border-radius:15px;font-size:15px;font-weight:800;text-align:center;line-height:1.4;transition:background .18s,box-shadow .18s,transform .18s}.button:active:not(:disabled){transform:translateY(2px)}.primary{background:linear-gradient(145deg,#8450db,#6a35c1);color:#fff;box-shadow:0 4px #54269a,0 8px 19px #7540c736}.primary:hover:not(:disabled){background:linear-gradient(145deg,#7542cb,#5927ad)}.secondary{background:var(--surface);border-color:var(--line);color:var(--purple)}.secondary:hover:not(:disabled){background:#f0e6ff}.button:disabled{background:#eee8f7;border-color:#e7dff0;color:#6f617f;box-shadow:none}.home{max-width:700px;text-align:center;padding:clamp(29px,6vw,58px) 14px 33px;margin:clamp(18px,5vh,48px) auto 12px;border:5px solid #fffaf4;border-radius:35px 49px 38px 29px/37px 31px 44px;background:var(--grain),radial-gradient(ellipse at 48% 8%,#ead8ff,transparent 65%),#fff3e6;box-shadow:inset 0 0 0 1px #d3b8c4,0 0 0 1px #a684cf6b,0 12px 0 -6px #8f67bf58}.home-illustration{width:min(270px,100%);margin:4px auto 33px;height:146px;position:relative}.sticker{position:absolute;display:grid;place-items:center;border:4px solid #fff;box-shadow:0 6px 16px #512f9c26}.sticker-center{inset:0 69px 4px;border-radius:37px;transform:rotate(-7deg);background:linear-gradient(145deg,#b892f9,#7542d4);color:#fff}.sticker-center b{font-size:73px;line-height:1}.sticker-center svg{position:absolute;right:9px;top:11px}.sticker-left,.sticker-right{width:68px;height:68px;border-radius:22px}.sticker-left{left:17px;bottom:8px;transform:rotate(-18deg);background:#ffde87;color:#6838aa;z-index:1}.sticker-right{right:12px;top:12px;transform:rotate(15deg);background:#ffd9ec;color:#793bb9}.home h1{font-size:clamp(29px,7.4vw,57px);font-weight:950;line-height:1.25;letter-spacing:-.045em;paint-order:stroke fill;-webkit-text-stroke:.15em #fffaf3;transform:rotate(-3deg)}.home h1 em{font-style:normal;color:#603396;text-decoration:underline #ffd26c .12em;text-underline-offset:.11em}.home p{margin:17px auto 0;color:var(--muted);font-size:15px;line-height:1.7}.start{min-height:58px;margin-top:27px;width:min(100%,315px);font-size:17px;border:3px solid #fff;border-radius:24px 20px 26px 22px}.home .home-note{margin-top:15px;font-size:13px}.dev-link{display:inline-block;margin-top:18px;color:var(--purple);font-size:13px;text-decoration:underline;text-underline-offset:4px}.quiz{max-width:630px;margin:10px auto}.quiz-progress{padding:5px 1px 16px}.quiz-progress-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--muted);font-size:13px;margin-bottom:8px}.quiz-progress-label b{color:var(--purple);font-size:22px;font-variant-numeric:tabular-nums}progress,meter{display:block;width:100%;height:8px;appearance:none;background:#e8def4;border:0;border-radius:20px;overflow:hidden}progress::-webkit-progress-bar{background:#e8def4}progress::-webkit-progress-value{background:linear-gradient(90deg,#a976f0,#7140ca);border-radius:20px;transition:width .2s}progress::-moz-progress-bar{background:#844ed1;border-radius:20px}.question-card{background:var(--grain),var(--surface);border:4px solid #fffaf4;box-shadow:inset 0 0 0 1px #e3c8b8,0 6px 0 -3px #8d63c345;border-radius:24px 32px 22px 29px;padding:clamp(15px,4.5vw,27px);animation:enter .22s ease-out}.question-card h1{font-size:clamp(25px,5.8vw,34px);line-height:1.28;margin-bottom:10px}.question-card p{font-size:17px;color:#443652;line-height:1.72}.options{display:grid;gap:9px;border:0;padding:0;margin:15px 0 18px;min-inline-size:0}.option{display:flex;position:relative;align-items:center;gap:12px;padding:10px 12px;min-height:59px;font-size:15px;line-height:1.5;background:var(--surface);border:1px solid var(--line);border-radius:15px;cursor:pointer}.option:hover{border-color:#aa81eb}.option:has(:checked){background:#f0e5ff;border-color:#9257dc;box-shadow:inset 0 0 0 1px #9257dc}.option:has(:focus-visible){outline:3px solid #7d41d9;outline-offset:3px}.option input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}.option-letter{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:12px 9px 10px 8px;background:#eddbff;color:var(--purple);font-weight:850;transform:rotate(-4deg)}.option:has(:checked) .option-letter{background:#7742c7;color:#fff}.quiz-actions{display:grid;grid-template-columns:1fr 1.45fr;gap:10px}.quiz-turn-hint{align-self:center;text-align:center;color:var(--muted);font-size:13px}.reveal-screen{text-align:center;padding:80px 10px 55px}.reveal-screen h1{font-size:clamp(23px,5.6vw,34px);margin:25px 0}.reveal-stamp{margin:auto;width:114px;height:114px;display:grid;place-items:center;border-radius:36px;background:#e9d7ff;color:#7842c4;animation:reveal .9s ease-in-out both}@keyframes reveal{0%{transform:rotate(-15deg) scale(.65);opacity:.5}60%{transform:rotate(8deg) scale(1.12)}to{transform:rotate(0) scale(1);opacity:1}}@keyframes enter{0%{transform:translateY(5px);opacity:.55}to{transform:translateY(0);opacity:1}}.result{display:grid;gap:21px;padding-bottom:7px}.result-hero{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);grid-template-areas:"kicker kicker" "reveal reveal" "photo identity" "photo attributes" "caption attributes";gap:15px 19px;align-items:start;padding-top:7px}.result-kicker{grid-area:kicker;display:flex;justify-content:center;align-items:center;gap:12px;justify-self:center;color:#34223e;font-size:clamp(28px,5vw,44px);font-weight:900;letter-spacing:.035em;line-height:1.25;padding:5px 17px;background:#fffaf2;border:4px solid white;border-radius:49% 17% 42% 20%/28% 58% 40% 55%;box-shadow:0 5px #8e68c338;transform:rotate(-2deg)}.result-kicker svg{color:#8053c8}.reveal-title{grid-area:reveal;justify-self:center;text-align:center;line-height:1.55;padding:4px 16px;color:#4c3258;background:#fff5e6;font-size:clamp(14px,2vw,18px);font-weight:800;letter-spacing:.035em;transform:rotate(-1deg);border-radius:11% 5% 9% 6%/26% 33% 29% 23%}.character-frame{grid-area:photo;position:relative;width:100%;height:100%;min-height:306px;aspect-ratio:1.21;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 35% 20%,#fff9ee,transparent 70%),#d9c7f7;border:5px solid #fffaf3;border-radius:25px 34px 28px 23px/27px 24px 32px 27px;box-shadow:0 0 0 1px #9370c578,0 9px 0 -4px #7856a348}.character-frame img{width:100%;height:100%;display:block;object-fit:contain;position:absolute;inset:0}.character-matte{position:absolute;inset:-20px;background-position:center;background-size:cover;filter:blur(23px) saturate(.78);opacity:.55}.photo-spark{position:absolute;top:9px;left:10px;display:grid;place-items:center;width:40px;height:38px;color:#7147a5;background:#fff3c8;border:3px solid #fffaf4;border-radius:13px 10px 12px 9px;transform:rotate(-12deg);box-shadow:0 3px #49305130;pointer-events:none}.character-placeholder{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6842a0;position:relative;gap:8px;background:var(--grain),radial-gradient(ellipse at top,#fff7eb,#e0cef7)}.character-placeholder b{font-size:clamp(66px,15vw,110px);line-height:.95;font-weight:900;letter-spacing:-.06em}.character-placeholder span{font-size:13px;font-weight:700}.character-placeholder svg{position:absolute;right:11%;top:13%}.result-identity{grid-area:identity;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;padding:0 2px}.name-sticker{min-width:0;position:relative;isolation:isolate;padding:14px 3px 15px}.name-sticker:before,.name-sticker:after{content:"";position:absolute;z-index:-1;pointer-events:none}.name-sticker:before{background:#af84ef;inset:50% -3px 4px;transform:rotate(-4deg);clip-path:polygon(1% 22%,10% 17%,6% 5%,96% 0,99% 14%,96% 39%,100% 53%,96% 83%,98% 96%,1% 100%,4% 69%,0 55%,3% 40%)}.name-sticker:after{background:#ffd06b;height:7px;border-radius:70% 20% 72% 19%;left:19%;right:9%;bottom:0;transform:rotate(-5deg)}.name-sticker>svg{position:absolute;top:-12px;right:7%;color:#8656c5;fill:#ffe27a;filter:drop-shadow(2px 2px 0 #fff);transform:rotate(12deg)}.name-plate{margin:0;color:#372145;font-weight:950;font-size:clamp(31px,5.4vw,65px);line-height:1.12;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:balance;paint-order:stroke fill;-webkit-text-stroke:.16em #fffdf7;transform:rotate(-3deg);position:relative}.similarity{width:clamp(103px,16vw,154px);aspect-ratio:1;position:relative;background:#fffbf3;border:5px solid white;border-radius:50%;box-shadow:0 4px #9a6dcc4d;transform:rotate(3deg)}.similarity svg{display:block;width:100%;height:100%;overflow:visible}.similarity circle{fill:none;stroke-width:10}.ring-track{stroke:#f3e4d1}.ring-progress{stroke:url(#ring-fill);stroke-linecap:round;animation:ring .72s ease-out both}@keyframes ring{0%{stroke-dasharray:0 100}}.similarity div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#583289;line-height:1.08}.similarity span{font-size:clamp(12px,2.5vw,17px);font-weight:850}.similarity b{font-size:clamp(31px,6vw,57px);letter-spacing:-.07em}.similarity small{font-size:.56em;letter-spacing:0}.character-caption{grid-area:caption;min-width:0;position:relative;z-index:1}.tagline{color:#362440;font-size:clamp(15px,1.95vw,19px);font-weight:850;line-height:1.52;padding:9px 12px;background:var(--grain),#fff0cb;border:2px solid #fff7e7;box-shadow:0 3px #966bc84f;border-radius:12px 21px 13px 18px/16px 10px 17px 12px;transform:rotate(-1.6deg)}.asset-credit{margin:8px 2px 0;font-size:11px;color:#58416d;overflow-wrap:anywhere}.asset-credit a{text-decoration:underline;text-underline-offset:2px}.paper-card{min-width:0;background:var(--grain),linear-gradient(152deg,#fff9ee,#fef2e3);border:4px solid #fffaf4;border-radius:28px 24px 31px 21px/23px 33px 24px 32px;box-shadow:inset 0 0 0 1px #ddc6b4,0 0 0 1px #a582cc7d,0 7px 0 -3px #8057b342}.data-card{grid-area:attributes;align-self:stretch;position:relative;padding:13px 13px 11px}.paper-label{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 10px;width:fit-content;color:#fff;font-size:17px;font-weight:850;line-height:1.25;background:linear-gradient(145deg,#8657bc,#7043a4);border-radius:10px 15px 9px 10px/12px 7px 9px 8px;border:2px solid #fff;box-shadow:0 2px #9366ba65;transform:rotate(-1.8deg)}.data-card .paper-label{margin-bottom:7px}.metrics{display:grid;gap:8px}.metric{--bar: #a772e5;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(45px,.9fr) 41px;gap:5px;align-items:center}.metric-1{--bar: #9267dc}.metric-2{--bar: #bd82db}.metric-3{--bar: #a177e1}.metric-4{--bar: #a173d1}.metric-label{display:contents;font-size:clamp(12px,2.6vw,15px);font-weight:800}.metric-label svg{display:none;color:#7d4bc0}.metric-label span{grid-column:1;grid-row:1;min-width:0}.metric-label b{grid-column:3;grid-row:1;justify-self:end;color:#573686;white-space:nowrap;font-variant-numeric:tabular-nums}meter{grid-column:2;grid-row:1;height:9px;background:#ecdef4}meter::-webkit-meter-bar{background:#eee2f2;border:0;height:9px;border-radius:20px;box-shadow:inset 0 0 0 1px #cbb4df}meter::-webkit-meter-optimum-value{background:var(--bar);border-radius:20px}meter::-moz-meter-bar{background:var(--bar);border-radius:20px}.data-note{margin:11px auto 0;color:#6b5776;font-size:11px;line-height:1.55}.result-sections{display:grid;gap:15px}.text-card{padding:12px 13px 16px}.text-card:nth-child(2) .paper-label{transform:rotate(1.2deg)}.text-card:nth-child(3) .paper-label{transform:rotate(-2.1deg)}.section-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;margin:-9px 0 -9px -9px;transform:rotate(-10deg);border:2px solid #fff;border-radius:11px;color:#653a9c;background:#f3e5fb;box-shadow:0 2px #6c439e57}.text-card p{margin-top:12px;color:#3b2b42;font-size:16px;line-height:1.75;text-wrap:pretty}.weather-card{display:grid;gap:15px;padding:13px 14px}.weather-card p{font-size:16px;color:#4c3260;font-weight:800;line-height:1.55;margin-top:7px;padding:6px 8px;width:fit-content;background:#ffeebf;border-radius:12px 8px 12px 6px}.tags{list-style:none;padding:0;margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}.tags li{border:1px solid #d2acec;border-radius:17px;padding:5px 8px;background:#f2e0ff;color:#592f91;font-size:12px;font-weight:800}.tags li:nth-child(2){transform:rotate(1.2deg)}.share-actions{display:grid;gap:9px}.share-actions .button{border:3px solid #fff;border-radius:24px 21px 27px 23px}.share-actions .button.secondary{background:#efe0ff;box-shadow:0 3px #996ccf52}.share-actions .button.secondary:hover{background:#e9d3ff}@media(min-width:730px){.result-sections{grid-template-columns:repeat(3,minmax(0,1fr))}.text-card{padding:16px 17px 19px}.weather-card{grid-template-columns:.95fr 1.05fr;gap:20px;padding:15px 19px}.weather-card>div+div{padding-left:18px;border-left:2px dashed #c49ee3}.share-actions{grid-template-columns:1.2fr 1fr}}@media(min-width:440px){.metric{grid-template-columns:23px minmax(0,1.18fr) minmax(45px,1fr) 41px;gap:7px}.metric-label svg{display:block;grid-column:1;grid-row:1}.metric-label span{grid-column:2}.metric-label b{grid-column:4}meter{grid-column:3}}@media(max-width:729px){.result-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"kicker" "reveal" "photo" "identity" "caption" "attributes";gap:13px;padding-top:4px}.character-frame{height:auto;min-height:0;aspect-ratio:1.38}.result-identity{gap:11px;padding:0 4px}.name-plate{font-size:clamp(28px,9vw,51px)}.name-sticker>svg{width:27px;height:27px;top:-8px}.similarity{width:clamp(88px,24vw,122px)}.tagline{padding:8px 11px}}.status{color:var(--purple);text-align:center;font-size:13px}.status:empty{display:none}.share-dialog{width:min(440px,calc(100% - 24px));max-height:90dvh;border:1px solid var(--line);border-radius:23px;padding:15px;background:var(--surface);color:var(--ink)}.share-dialog::backdrop{background:#2813479e}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.dialog-top h2{font-size:19px}.dialog-top .button{min-height:38px;padding:5px 12px}.share-dialog p{font-size:13px;color:var(--muted);margin:8px 0}.share-dialog img{display:block;max-width:100%;max-height:59dvh;object-fit:contain;margin:0 auto 10px;border-radius:9px}.share-dialog>a{width:100%;margin-bottom:4px}.preview-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--purple)}.preview-bar a{display:flex;align-items:center;gap:5px;white-space:nowrap}.preview-bar select{min-width:0;max-width:65%;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--purple);padding:9px 6px}.gallery h1{font-size:30px}.gallery p{margin:7px 0 16px;color:var(--muted);font-size:14px}.gallery ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));gap:9px}.gallery a{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-weight:750;font-size:14px}.gallery a:hover{background:#f0e6ff}.gallery a span{color:#784ab7;font-size:12px}.gallery a svg{margin-left:auto;flex:none;color:var(--purple)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}