:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#463b62;background:#f7fcff;font-synthesis:none;--purple:#7851b3;--pink:#ed7193;--ink:#463b62}*{box-sizing:border-box}body{margin:0}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d08a2f;outline-offset:5px}header{max-width:1280px;margin:auto;height:110px;padding:0 40px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:23px;font-weight:800;letter-spacing:2px}.brand-icon{display:grid;place-items:center;width:46px;height:43px;background:#fff1b5;border:2px solid #ad7b60;border-radius:13px;color:#a77399;font-size:29px;transform:rotate(-8deg)}.brand small{display:block;font-size:9px;color:#9c8aaa;letter-spacing:2px;margin-top:7px}nav{display:flex;gap:25px;align-items:center}.text-button{background:none;border:0;color:#806b96;font-size:13px;padding:9px}.demo{font-size:11px;border:1px solid #c7b8db;border-radius:20px;padding:7px 12px;color:#9279ac}.home{position:relative;max-width:1280px;margin:auto;padding:35px 65px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.home:before{content:'';position:fixed;z-index:-1;inset:0;background:radial-gradient(ellipse at 80% 35%,#d7f1ff 0%,transparent 54%),linear-gradient(#f1fbff,#fffdf4)}.eyebrow{color:#9a7cad;font-size:11px;letter-spacing:2px;font-weight:700;display:block}.hero-copy .eyebrow{display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#eabc68}h1,h2,h3,p{margin-top:0}.hero-copy h1{font-size:clamp(40px,4.5vw,64px);line-height:1.37;letter-spacing:3px;margin:24px 0 20px;position:relative;font-weight:850}.hero-copy h1 em{color:var(--purple);font-style:normal}.hero-copy h1 svg{display:block;width:330px;height:18px;fill:none;stroke:#f2b8c9;stroke-width:7;stroke-linecap:round}.lead{font-size:13px;line-height:2.1;color:#897e95;margin-bottom:28px}.primary,.secondary{border-radius:14px;padding:15px 23px;font-weight:700;font-size:14px;border:1.5px solid #67429b;transition:transform .18s,box-shadow .18s}.primary{color:white;background:#8b60bd;box-shadow:0 5px 0 #66438f,0 8px 16px #7851b31c}.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #66438f,0 10px 18px #7851b326}.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #66438f}.primary>span{padding-left:30px;font-size:20px}.secondary{background:#fffdf7;color:#7a589e;border-color:#d6c7e5;box-shadow:0 3px 0 #e6dfee}.quick-facts{display:flex;gap:17px;margin-top:27px;font-size:10px;color:#9b90a4}.result-link{display:block;margin-top:15px}.hero-art{position:relative;min-height:570px;display:flex;align-items:center;justify-content:center;padding-bottom:60px}.hero-art>img{width:100%;max-width:480px;position:relative;mix-blend-mode:multiply;z-index:1}.art-disc{position:absolute;width:410px;height:410px;max-width:90%;border-radius:50%;background:radial-gradient(circle,#fffdf8 40%,#fce9e1 100%);border:1px solid #fff;box-shadow:0 0 0 18px #ffffff54}.postage{position:absolute;right:0;top:0;transform:rotate(10deg);padding:12px;background:#fffdf5;border:2px dashed #d9b6c4;text-align:center;font-size:9px;line-height:1.8;z-index:2;color:#a47c91}.postage b{font-size:13px}.hello-note{position:absolute;bottom:120px;left:-25px;z-index:2;background:#fffdf5;padding:17px 20px;box-shadow:0 5px 15px #8b73951a;transform:rotate(-6deg);font-size:12px;line-height:1.8;color:#b0808b;border:1px solid #f1dcda;border-radius:4px}.star-one{position:absolute;color:#f2bd61;top:70px;left:20px;font-size:39px}.sample-label{position:absolute;bottom:15px;text-align:center;font-size:12px;font-weight:700;color:#987c99}.sample-label small{display:block;font-size:10px;font-weight:400;margin-top:7px;color:#a294a8}.journey{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);padding:28px 0 32px;border-top:1px solid #dce8ed;margin-top:10px;gap:30px}.journey b{font-size:14px;color:#c09bc6}.journey b span{font-size:12px;margin-left:9px;color:#7a638c}.journey p{font-size:11px;color:#a095a9;margin:12px 0 0 30px}footer{max-width:1150px;margin:10px auto 0;border-top:1px solid #e5e8ef;display:flex;justify-content:space-between;padding:22px 0;font-size:10px;color:#a499ae}.quiz{max-width:820px;margin:10px auto;padding:0 25px}.quiz-top{display:flex;justify-content:space-between;margin-bottom:24px}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:#947ba5}.progress-label b{font-size:20px;color:#77549b}.progress-label b span{font-size:12px;color:#b9a9c8}.progress{height:6px;background:#eae2f3;border-radius:10px;overflow:hidden;margin:13px 0 24px}.progress i{display:block;height:100%;background:linear-gradient(90deg,#b197df,#ec92b0);transition:width .3s}.question-card{background:#fffdf8;border:1px solid #e8dfed;border-radius:25px;padding:34px;box-shadow:0 12px 35px #806b9610}.question-card h2{font-size:25px;line-height:1.6;margin:18px 0 24px;outline:none}.muted{font-size:12px;color:#9989a8;line-height:1.9}.options{display:grid;gap:13px}.option{display:flex;align-items:center;gap:16px;position:relative;cursor:pointer;padding:18px;border:1.5px solid #e9e3ec;border-radius:15px;font-size:14px;line-height:1.9;background:white;transition:.18s}.option:hover{border-color:#baa1d4;background:#fcf9ff}.option.selected{border-color:#9165ba;background:#f3ecfd;box-shadow:0 3px 0 #e2d4f0;transform:translateY(-1px)}.option input{position:absolute;opacity:0;width:1px;height:1px}.option:has(input:focus-visible){outline:3px solid #eab65f;outline-offset:3px}.option-letter{background:#f4eff8;display:grid;place-items:center;border-radius:10px;min-width:32px;height:34px;font-size:13px;color:#a18cad}.selected .option-letter{background:#9570bc;color:white}.radio-dot{border:1px solid #d4c9df;border-radius:50%;height:16px;min-width:16px;margin-left:auto}.selected .radio-dot{background:#9165ba;box-shadow:inset 0 0 0 4px #f3ecfd;border-color:#9165ba}.swatches{display:flex;gap:4px;margin-top:8px}.swatches i{height:14px;width:32px;border-radius:4px;border:1px solid #0000000c}.question-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:28px}.autosave{font-size:10px;color:#a294a9}.quiz-foot{text-align:center;margin:25px;font-size:11px;color:#b39abe}.waiting{min-height:75vh;background:url('assets/cloud-town.jpg') center 45%/cover no-repeat;display:grid;place-items:center;padding:50px 20px}.waiting-panel{background:#fffdf5ed;border:2px solid white;box-shadow:0 15px 60px #6f4b8826;border-radius:30px;text-align:center;max-width:500px;padding:35px 50px}.waiting-panel h2{font-size:30px;line-height:1.6;margin:20px 0}.waiting-panel>p{font-size:13px;line-height:2}.mail-animation{font-size:75px;color:#c697ba;position:relative;animation:bob 2s ease-in-out infinite}.mail-animation span{font-size:25px;position:absolute;top:0;color:#eeb75b}@keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}.result{max-width:1050px;margin:35px auto;padding:0 28px}.result-heading{text-align:center;margin-bottom:40px}.result-heading h1{font-size:42px;margin:18px 0}.result-heading>p{font-size:13px;color:#9b89a8}.letter{border:1px solid #e3d9e9;border-radius:28px;overflow:hidden;background:#fffdf9;display:grid;grid-template-columns:44% 56%;box-shadow:0 10px 40px #76539c0b}.portrait-reference{text-align:center;padding:28px 20px;background:linear-gradient(#fff8f4,#f5f0fb);display:flex;flex-direction:column;align-items:center}.reference-title{font-size:12px;color:#ab899f;border:1px solid #e2cbd7;padding:7px 16px;border-radius:20px}.portrait-reference>img{width:100%;mix-blend-mode:multiply;margin-top:20px}.portrait-reference>b{font-size:13px}.portrait-reference p{font-size:11px;color:#aa849a;margin:12px 0 8px}.portrait-reference small{font-size:10px;color:#a899ab;line-height:1.8}.mini-gallery{display:flex;align-items:center;gap:12px;margin-top:25px}.mini-gallery img{height:100px;max-width:60%;object-fit:contain;border-radius:10px;mix-blend-mode:multiply}.character{padding:35px}.character h2{font-size:34px;margin:14px 0 3px}.english{color:#b18baf;font-size:13px;letter-spacing:1px}.tags{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0}.tags span{background:#f0e8f8;border-radius:20px;padding:5px 10px;font-size:10px;color:#87669f}.character h3{font-size:13px;color:#8e699f;margin:22px 0 9px}.character>p:not(.english){font-size:12px;line-height:2;color:#88768f;margin-bottom:0}.palette-strip{display:flex;align-items:center;gap:5px;margin-top:15px}.palette-strip i{width:35px;height:12px;border-radius:3px}.palette-strip span{font-size:9px;color:#ad9cb6;margin-left:8px}.story{grid-column:1/-1;padding:35px 45px;border-top:1px dashed #dfcde8;background:linear-gradient(100deg,#fffbee,#fffbf8)}.story h2{font-size:22px;margin:14px 0}.story p{font-size:13px;line-height:2.2;color:#8c7b89}.signature{display:block;text-align:right;font-size:13px;color:#b18b9e}.result-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:30px 0 50px}.album-cover{position:relative;width:100%;display:flex;align-items:center;gap:35px;background:#e6edfc;color:#6c6897;border:1px solid #c7cbe9;border-left:15px solid #b6afdb;border-radius:10px 25px 25px 10px;padding:30px;text-align:left;box-shadow:0 8px 0 #d3d8ec,0 15px 25px #685a8c12;transition:transform .25s}.album-cover:hover{transform:rotate(-.7deg)}.album-icon{border:1px solid #a6a2ca;padding:15px;text-align:center;font-size:13px;line-height:2;letter-spacing:2px}.album-cover small{display:block;font-size:11px;margin-bottom:10px;color:#9291b6}.album-cover b{display:block;font-size:24px}.album-cover em{display:block;font-style:normal;font-size:12px;margin-top:15px}.album-star{margin-left:auto;font-size:40px;color:#e5b974}.explanation{margin:65px 0 40px}.explanation h2,.feedback h2{font-size:22px}.clues{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}.clues p{display:flex;gap:14px;font-size:12px;line-height:2;color:#9a86a4}.clues p span{font-size:15px;color:#c6afd6}details{border:1px solid #e4dbea;border-radius:15px;padding:18px;margin-top:15px;font-size:12px;color:#9983aa;line-height:2}summary{cursor:pointer;color:#7f6597}details p{margin-top:20px}.feedback{border-top:1px solid #e5dbed;padding-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.feedback h2{margin-top:17px}.feedback p{font-size:12px;line-height:2;color:#a28faa}.feedback label{display:block;font-size:12px;color:#937b9e;margin-bottom:18px}textarea{display:block;width:100%;resize:vertical;min-height:80px;background:#fffcf9;border:1px solid #e2d7e9;border-radius:12px;margin-top:8px;padding:12px;font-size:12px;color:#6c587e}textarea::placeholder{color:#b4a6bd}#feedback-status{display:block;font-size:11px;color:#9a7fa8;margin-top:15px}.modal-backdrop{position:fixed;inset:0;background:#49365f66;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:10;padding:20px}.modal{background:#fffdf7;border-radius:25px;max-width:550px;width:100%;padding:40px;position:relative;max-height:90dvh;overflow:auto;box-shadow:0 20px 100px #38254b33}.modal h2{font-size:24px;line-height:1.5;margin-top:20px}.modal p{font-size:13px;line-height:2;color:#9985a2}.close{position:absolute;right:15px;top:12px;border:0;background:#f1eafa;border-radius:50%;height:30px;width:30px;color:#9278a7;font-size:22px}.gift-placeholder,.baby-placeholder{border:2px dashed #d9cbe6;border-radius:18px;background:#f0f3fc;padding:35px 20px;text-align:center;color:#a993c2}.gift-placeholder{font-size:55px}.gift-placeholder b{font-size:16px}.baby-placeholder>span{display:block;font-size:65px;color:#d9b875}.baby-placeholder b{display:block;margin:10px;font-size:18px}.baby-placeholder small{font-size:10px;line-height:2}.album-page{animation:page-in .55s ease-out;transform-origin:left center}.album-page>h2{font-size:25px}.album-page .primary{font-size:12px}.child-story{background:#fffae9;padding:18px;border-radius:10px}@keyframes page-in{from{transform:perspective(1000px) rotateY(-45deg);opacity:.1}to{transform:perspective(1000px) rotateY(0);opacity:1}}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#68517e;color:white;font-size:12px;border-radius:12px;padding:14px 22px;opacity:0;transition:.2s;pointer-events:none;z-index:50;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){.home{padding-top:70px}.hero-art{min-height:640px}.hero-art>img{max-width:530px}.hero-copy h1{font-size:67px}.art-disc{width:460px;height:460px}}
@media(max-width:760px){header{height:85px;padding:0 22px}.brand{font-size:18px;gap:8px;letter-spacing:1px}.brand small{font-size:7px}.brand-icon{width:35px;height:35px;font-size:24px}nav{gap:5px}nav .text-button{display:none}.demo{font-size:9px;padding:6px 9px}.home{padding:25px 25px 0;display:flex;flex-direction:column}.hero-copy{text-align:center}.hero-copy .eyebrow{justify-content:center;font-size:9px}.hero-copy h1{font-size:42px;line-height:1.32;letter-spacing:2px;margin:18px 0}.hero-copy h1 br:nth-of-type(2){display:none}.hero-copy h1 svg{width:235px;margin:auto}.lead{font-size:11px;line-height:2;margin-bottom:20px}.hero-copy .primary{font-size:13px}.quick-facts{justify-content:center;font-size:9px;gap:13px;margin-top:23px}.hero-art{min-height:390px;padding-bottom:50px;margin-top:25px}.hero-art>img{max-width:320px;width:90%}.art-disc{width:290px;height:290px}.postage{font-size:8px;right:0;top:10px;padding:8px}.hello-note{left:0;bottom:100px;font-size:10px;padding:11px}.star-one{font-size:28px;top:40px;left:15px}.sample-label{bottom:5px;font-size:11px}.sample-label small{font-size:9px}.journey{display:flex;flex-direction:column;gap:23px;padding:25px 12px}.journey p{margin-top:7px;font-size:10px}footer{padding:20px 25px;gap:15px;font-size:8px;line-height:1.8}.quiz{padding:0 17px;margin-top:0}.quiz-top{margin-bottom:15px}.question-card{padding:25px 18px;border-radius:20px}.question-card h2{font-size:21px;margin:15px 0 22px}.eyebrow{font-size:9px;letter-spacing:1px}.option{font-size:12px;padding:14px 12px;gap:10px}.option-letter{min-width:28px;height:30px;font-size:11px}.radio-dot{height:14px;min-width:14px}.question-nav .primary,.question-nav .secondary{font-size:12px;padding:12px}.question-nav{flex-wrap:wrap}.autosave{order:3;width:100%;text-align:center;margin-top:12px}.quiz-foot{font-size:10px}.waiting{background-position:42% center;min-height:78dvh}.waiting-panel{padding:30px 20px;width:100%;max-width:400px}.waiting-panel h2{font-size:27px}.result{margin-top:25px;padding:0 17px}.result-heading h1{font-size:30px}.result-heading>p{font-size:11px}.letter{grid-template-columns:1fr}.portrait-reference{padding:24px 20px}.portrait-reference>img{width:80%;max-width:340px;margin-top:12px}.mini-gallery{display:none}.character{padding:28px 25px}.character h2{font-size:30px}.story{padding:28px 25px}.story h2{font-size:20px}.story p{font-size:12px}.result-actions{gap:15px;margin:25px 0 40px}.result-actions>.primary,.result-actions>.secondary{font-size:12px;padding:13px 15px}.album-cover{padding:24px 15px;gap:16px;border-left-width:10px}.album-icon{font-size:8px;padding:10px}.album-cover b{font-size:17px}.album-cover small{font-size:9px}.album-cover em{font-size:10px}.album-star{display:none}.explanation{margin-top:50px}.explanation h2,.feedback h2{font-size:20px}.clues{grid-template-columns:1fr;gap:0}.clues p{font-size:11px;margin-bottom:5px}.feedback{grid-template-columns:1fr;gap:10px}.modal{padding:35px 23px}.modal h2{font-size:22px}.modal p{font-size:12px}.baby-placeholder{padding:20px 12px}.baby-placeholder small{font-size:9px}.brand span{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}