:root{--paper:#f6f3ec;--ink:#302c38;--purple:#7563a6;--lav:#eae3f4;--orange:#e5a36b;--muted:#817b87;--line:#ded8cf}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.7}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}a{color:inherit}header{max-width:1120px;margin:auto;padding:26px 30px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;font-weight:800;display:flex;align-items:center;gap:10px;letter-spacing:1px}.brand-icon{font-size:28px;color:var(--purple)}.brand small{font-size:10px;letter-spacing:2px;font-weight:500;border-left:1px solid var(--line);padding-left:12px}.top-note{font-size:12px;color:var(--muted)}main{max-width:1040px;margin:auto;padding:32px 26px 20px;min-height:70vh}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--purple);font-weight:700}.hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:24px 0 40px}h1{font-size:clamp(34px,5vw,55px);line-height:1.28;letter-spacing:-1.5px;margin:18px 0 22px;font-weight:850}h1 em{font-style:normal;color:var(--purple);position:relative}h1 em:after{content:"";position:absolute;bottom:-5px;left:0;width:100%;border-bottom:3px solid #d1b7e0;border-radius:50%}.lead{color:#78717c;font-size:15px;line-height:1.9}.pill{display:inline-block;border:1px solid var(--line);border-radius:30px;font-size:11px;padding:5px 12px;margin:15px 5px 22px 0;background:#fcfaf5}.primary{border:0;border-radius:16px;background:var(--purple);color:white;padding:17px 25px;box-shadow:0 5px 0 #5b4986;font-weight:700;transition:transform .15s;display:inline-flex;align-items:center;justify-content:space-between;gap:35px}.primary:hover{transform:translateY(-2px)}.hero .primary{min-width:250px}.secondary{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:14px;padding:12px 20px}.textbtn{border:0;background:none;color:var(--muted);text-decoration:underline;text-underline-offset:4px;padding:12px;font-size:13px}.tiny{font-size:11px;color:var(--muted);margin-top:16px}.hero-art{position:relative;min-height:390px;display:grid;place-items:center;background:#e9e1ef;border-radius:48% 48% 40% 40%;margin:15px 8px;transform:rotate(2deg)}.hero-art:before{content:"MEOW, THAT’S YOU.";position:absolute;top:28px;letter-spacing:3px;font-size:10px;color:#8c7f9b}.hero-art svg{width:80%;height:320px;transform:rotate(-2deg)}.sticker{position:absolute;background:#fffdf8;border:1px solid var(--line);padding:10px 18px;box-shadow:3px 4px 0 #bcb2c140;font-size:13px;border-radius:8px}.sticker.one{bottom:38px;left:-14px;transform:rotate(-8deg)}.sticker.two{right:-10px;top:90px;transform:rotate(10deg);background:#f5dbb9}.spark{position:absolute;right:30px;bottom:68px;color:#9b84b1;font-size:34px}.section-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px;margin-top:12px;font-size:12px}.section-label span:last-child{color:var(--muted);font-size:11px}.peek{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.mini{border:1px solid var(--line);background:#fcfaf5;border-radius:18px;padding:12px;text-align:center}.mini svg{height:96px;width:100%}.mini b{font-size:13px;display:block}.mini span{font-size:10px;color:var(--muted)}.note{text-align:center;color:var(--muted);font-size:12px;padding:10px}.quiz{max-width:650px;margin:0 auto}.quiz-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px}.count{font-size:23px;font-weight:700;color:var(--purple)}.count small{font-size:12px;color:var(--muted);font-weight:400}.bar{height:5px;border-radius:5px;background:#e5dfeb;margin:12px 0 42px;overflow:hidden}.bar div{height:100%;background:var(--purple);transition:width .2s}.question-box{background:#fffdf9;border:1px solid var(--line);border-radius:24px;padding:30px}.q-tag{font-size:10px;letter-spacing:3px;color:var(--purple)}h2{font-size:25px;line-height:1.5;margin:18px 0 26px;letter-spacing:-.5px}.options{display:grid;gap:13px}.option{width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fffdf9;color:var(--ink);font-size:15px;line-height:1.6;transition:.15s}.option:hover{border-color:#a893c3;background:#f8f4fc}.option.selected{border-color:var(--purple);background:var(--lav);box-shadow:0 0 0 1px var(--purple)}.letter{border:1px solid #d7d0db;border-radius:9px;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;font-size:12px}.selected .letter{background:var(--purple);color:white;border-color:var(--purple)}.tick{margin-left:auto;color:var(--purple)}.quiz-nav{display:flex;justify-content:space-between;gap:16px;margin-top:26px}.quiz-nav .primary{min-width:150px}.quiz-hint{font-size:11px;text-align:center;color:var(--muted);margin:25px 0}.result{max-width:760px;margin:auto}.result-top{text-align:center}.result-top h1{font-size:38px;margin:10px 0}.result-head{background:var(--lav);border-radius:26px 26px 0 0;padding:28px 30px 18px;display:grid;grid-template-columns:190px 1fr;align-items:center;gap:25px}.result-head svg{width:100%;height:200px}.result-name{font-size:24px;font-weight:800;line-height:1.4;margin:9px 0}.result-title{display:inline-block;background:#fffaf0;padding:5px 14px;border-radius:30px;font-size:13px}.quote{font-size:16px;line-height:1.8;margin:17px 0 0}.result-body{background:#fffdf9;border:1px solid var(--line);border-top:0;border-radius:0 0 26px 26px;padding:28px 34px}.bio{font-size:13px;color:#756f7d;padding-bottom:22px;border-bottom:1px dashed var(--line);margin:0 0 22px}.reading{display:grid;grid-template-columns:30px 1fr;gap:10px;margin-bottom:24px}.reading-num{color:#aa99bd;font-size:13px;padding-top:2px}.reading h3{font-size:15px;margin:0 0 7px}.reading p{font-size:14px;color:#746d79;line-height:1.9;margin:0}.partner{padding:19px 22px;background:#f5f1e8;border-radius:15px;font-size:13px}.partner small{font-size:10px;letter-spacing:2px;color:#9a8e79;display:block;margin-bottom:8px}.partner b{font-size:15px}.partner p{margin:5px 0 0;color:#7f7568}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}.share-quote{font-size:13px;text-align:center;max-width:520px;margin:20px auto;color:var(--muted)}.hidden-badge{color:#ac7c36;font-size:11px;letter-spacing:2px}.hidden .result-head{background:#39333f;color:#ffedb9}.hidden .result-title{background:#5c5065;color:#ffedb9}.hidden .eyebrow{color:#d8c09b}footer{text-align:center;font-size:10px;color:#99909c;margin:45px 20px 25px;line-height:1.9}footer span{color:#aaa2aa}.loading{text-align:center;padding:100px 0}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#302c38;color:white;border-radius:12px;padding:12px 20px;max-width:90vw;font-size:13px;transition:.2s;z-index:10}#toast.show{opacity:1;transform:translate(-50%,0)}:focus-visible{outline:3px solid var(--orange);outline-offset:4px}@media(max-width:680px){header{padding:17px 20px}.brand small{font-size:8px;padding-left:8px}.top-note{display:none}main{padding:12px 20px}.hero{display:flex;flex-direction:column;gap:12px;padding:8px 0 25px;text-align:center}.hero-copy{width:100%}h1{font-size:39px;margin:14px 0 20px}.lead{font-size:13px}.hero-art{order:-1;min-height:210px;width:240px;margin:8px auto 2px;border-radius:45%}.hero-art svg{height:200px;width:80%}.hero-art:before{font-size:8px;top:13px}.sticker{font-size:10px;padding:6px 10px}.sticker.one{bottom:17px;left:-20px}.sticker.two{top:55px;right:-20px}.spark{font-size:24px;right:12px;bottom:25px}.pill{margin:8px 3px 18px 0;padding:4px 10px}.hero .primary{width:100%}.tiny{margin:12px 0}.peek{gap:8px}.mini{padding:9px 3px;border-radius:12px}.mini svg{height:64px}.mini b{font-size:11px}.mini span{font-size:9px}.section-label{font-size:11px}.section-label span:last-child{font-size:9px}.bar{margin-bottom:24px}.question-box{padding:24px 19px}h2{font-size:22px;min-height:66px}.option{padding:16px 12px;font-size:14px;gap:11px}.quiz{padding-top:16px}.quiz-nav .primary{min-width:140px}.result-head{grid-template-columns:1fr;text-align:center;gap:0;padding:18px 20px 25px}.result-head svg{height:170px;max-width:200px;margin:auto}.result-name{font-size:26px}.result-body{padding:24px 20px}.result-top h1{font-size:27px}.quote{font-size:15px}.result-actions .primary{width:100%;justify-content:center}.result-actions .secondary{flex:1}.reading{gap:4px;grid-template-columns:24px 1fr}.reading p{font-size:13px}.result-actions{gap:10px}footer{margin-top:30px}.note{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.card-dialog{border:1px solid #ded8cf;border-radius:20px;background:#f6f3ec;padding:20px;max-width:540px;width:92vw;max-height:90vh;color:#302c38}.card-dialog::backdrop{background:#302c3890}.card-dialog img{width:100%;display:block;border-radius:12px;margin:15px 0}.card-dialog .primary{display:flex;text-decoration:none;justify-content:center;margin-bottom:6px}.card-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}

@media(max-width:400px){header{padding:16px}.brand{font-size:14px;gap:6px}.brand small{display:none}.section-label{gap:8px;flex-wrap:wrap}.quiz-nav{gap:10px}.quiz-nav .primary{min-width:0;gap:12px;padding:15px 18px}.quiz-nav .secondary{padding:12px}.hero-art{max-width:calc(100vw - 90px)}.result-actions .secondary{min-width:120px}}
