:root{--ink: #3d2f2a;--ink-soft: #7a6a5f;--cream: #fff8ec;--card: #fffdf8;--coral: #ff7a5c;--mint: #6fd3b7;--line: #f0e4d3}*{box-sizing:border-box}body{margin:0;font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;color:var(--ink);background:radial-gradient(1000px 420px at 12% -6%,#fff3dd,transparent 55%),var(--cream);line-height:1.7}.app{max-width:880px;margin:0 auto;padding:0 20px}.top{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:10px;flex-wrap:wrap}.brand{font-weight:800;font-size:18px;color:var(--coral);text-decoration:none;display:flex;align-items:center;gap:8px}.brand .logo{height:38px;width:auto;display:block}.brand-suffix{color:var(--coral);font-weight:800;font-size:18px;white-space:nowrap}.top nav{display:flex;gap:14px;align-items:center}.link{color:var(--ink-soft);text-decoration:none}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:0 10px 30px #5a3c2814}.hero-card{text-align:center;margin:40px 0}.slogan{font-size:30px;font-weight:800;margin:0 0 10px}.hero-card .sub{color:var(--ink-soft);font-size:16px}.row{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}.cta,.ghost,button.cta,button.ghost{border-radius:999px;padding:10px 22px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;border:none}.cta{background:var(--coral);color:#fff}.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.cta.big,.ghost.big{padding:13px 28px;font-size:17px}.form{max-width:420px;margin:30px auto;display:flex;flex-direction:column;gap:14px}.form h2{margin:0 0 6px;text-align:center}.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-soft)}.form input{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px}.form input:focus{outline:2px solid var(--coral)}.err{color:#d2453a;font-size:14px;margin:0}.muted{color:var(--ink-soft);font-size:14px;text-align:center}.muted a{color:var(--coral)}.term-block{display:flex;flex-direction:column;gap:12px}.term-p{margin:0;font-size:14px;color:var(--ink-soft)}.term-list{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14px;display:flex;flex-direction:column;gap:10px}.term-list li{margin:0}.term-list b{color:var(--ink)}.formnarrow .agree{display:flex;flex-direction:row;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-soft);line-height:1.6;cursor:pointer}.formnarrow .agree input[type=checkbox]{margin-top:3px;width:16px;height:16px;accent-color:var(--coral);flex:none}.formnarrow .agree a{color:var(--coral);text-decoration:underline}.wrap-inner{max-width:640px;margin:0 auto}.stepper{display:flex;gap:8px;justify-content:center;margin:26px 0 18px;flex-wrap:wrap}.st{font-size:13px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px}.st.on{background:var(--coral);color:#fff;border-color:var(--coral);font-weight:700}.st.done{opacity:.55}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:14px;color:var(--ink)}.chip.on{background:var(--mint);border-color:var(--mint);color:#fff;font-weight:700}.chips.ages .chip{padding:6px 13px;font-size:13px}.formnarrow{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px}.formnarrow h2{margin:0}.formnarrow label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-soft)}.formnarrow input,.formnarrow textarea{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}.formnarrow textarea{resize:vertical}.pagelist{padding-left:20px;color:var(--ink-soft);font-size:15px}.pagelist li{margin:6px 0}.bookhead{display:flex;align-items:center;gap:14px;margin:24px 0 16px;flex-wrap:wrap}.bookhead h1{font-size:24px;margin:0;flex:1}.reader{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}.pageart{position:relative;width:min(420px,100%);aspect-ratio:1/1}.pageart img.art{width:100%;height:100%;object-fit:cover;border-radius:14px}.art.placeholder{width:100%;height:100%;border-radius:14px;background:linear-gradient(135deg,#ffe9d6,#ffeef2);display:flex;align-items:center;justify-content:center;padding:30px;font-size:20px;color:var(--coral);font-weight:700}.veil{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffffb8;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink-soft)}.wm{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;border-radius:14px}.wm:before{content:"豆立方·绘本星球 · 免费预览";transform:rotate(-22deg);font-size:15px;font-weight:800;letter-spacing:2px;color:#ff7a5c29;white-space:nowrap;text-shadow:0 0 1px rgba(255,255,255,.4)}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#3d2f2a73;display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}.modal{max-width:420px;width:100%;margin:0;text-align:left}.modal h3{margin:0 0 6px}.modal p{margin:6px 0}.fixinput{width:100%;margin:8px 0 4px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;line-height:1.5;background:var(--cream);color:var(--ink);resize:vertical}.fixinput:focus{outline:2px solid var(--coral);outline-offset:1px}.pagetext{font-size:18px;font-weight:600;max-width:420px}.row{display:flex;gap:12px;justify-content:center;margin-top:8px;flex-wrap:wrap;align-items:center}.small{padding:7px 16px;font-size:14px}button:disabled{opacity:.55;cursor:not-allowed}.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-top:12px}.bookcard{text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px #5a3c2812;transition:transform .15s}.bookcard:hover{transform:translateY(-3px)}.bookcard .cover{aspect-ratio:1/1;background:#f6ede0;display:flex;align-items:center;justify-content:center}.bookcard img.cover-img,.bookcard .cover img{width:100%;height:100%;object-fit:cover}.bookcard .meta{padding:10px 12px}.bookcard .t{font-weight:700;font-size:15px}.bookcard .d{color:var(--ink-soft);font-size:12.5px}.langtag{display:inline-block;font-size:12px;font-weight:700;color:var(--coral);background:#fff1ec;border:1px solid #ffd6c9;border-radius:999px;padding:2px 10px;vertical-align:middle}.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.home-sec{margin:22px 0;padding:30px 28px}.home-sec h2{margin:0 0 4px;font-size:22px;text-align:center}.sec-sub{color:var(--ink-soft);font-size:14px;text-align:center;margin:0 0 20px}.hero-tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}.hero-tags span{font-size:13px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px;position:relative}.step-no{position:absolute;top:14px;right:16px;font-size:13px;font-weight:800;color:#ffd6c9}.step-icon{font-size:26px;margin-bottom:6px}.step h3{margin:0 0 6px;font-size:15.5px}.step p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65}.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.benefit{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px}.benefit-icon{font-size:24px;margin-bottom:6px}.benefit h3{margin:0 0 6px;font-size:15.5px}.benefit p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65}.safety{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.safety-item{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.safety-icon{font-size:22px;line-height:1.4}.safety-item h3{margin:0 0 4px;font-size:15px}.safety-item p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.65}.faq{display:flex;flex-direction:column;gap:10px}.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px}.faq-item summary{font-weight:700;font-size:15px;cursor:pointer}.faq-item p{margin:10px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.7}.cta-sec{text-align:center}.cta-sec .row{justify-content:center}.home-foot{text-align:center;padding:10px 0 30px;color:var(--ink-soft);font-size:13px}.home-foot p{margin:4px 0}.home-foot a{color:var(--ink-soft);text-decoration:none}.compare{width:100%;border-collapse:collapse;font-size:14px;min-width:480px}.compare th,.compare td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.compare thead th{font-size:13.5px;color:var(--ink-soft);font-weight:700}.compare td:first-child{color:var(--ink-soft);width:30%}.compare .on-col{background:#fff6f2;color:var(--ink)}.compare .on-col b{color:var(--coral)}.compare tbody tr:last-child td{border-bottom:none}.avatareditor{text-align:left;border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:14px}.avatareditor .row{margin:0}.avatareditor input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--coral)}.avatarcard{margin:4px 0 0}@media (max-width: 640px){.app{padding:0 14px}.top{padding:14px 0}.brand .logo{height:30px}.brand-suffix{font-size:16px}.top nav{gap:10px;flex-wrap:wrap}.top nav a,.top nav button{font-size:14px}.card{padding:22px 16px;border-radius:16px}.hero-card{margin:26px 0}.slogan{font-size:24px}.cta,.ghost,button.cta,button.ghost{padding:9px 16px;font-size:14px}.cta.big,.ghost.big{padding:11px 20px;font-size:16px}.form,.formnarrow{max-width:100%}.formnarrow input,.formnarrow textarea,.form input{font-size:16px}.stepper{gap:6px}.st{padding:4px 10px;font-size:12px}.bookhead h1{font-size:20px;flex-basis:100%}.pagetext{font-size:16px}.pageart{width:min(340px,100%)}.shelf{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.row{margin-top:14px}.home-sec{padding:22px 16px}.home-sec h2{font-size:19px}.steps,.benefits,.safety{grid-template-columns:1fr}.hero-tags{margin-top:16px}.compare{min-width:420px}}@media (max-width: 400px){.top nav{gap:8px}.brand-suffix{font-size:15px}.st{padding:4px 8px}.shelf{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}