:root{--paper:#f8f0e3;--cream:#fff9ef;--field:#fffcf5;--ink:#253a36;--muted:#68736b;--line:#253a3629;--sage:#7a9b76;--sage-deep:#4d684f;--clay:#c65d3a;--gold:#d0a33d;--display:"Songti SC", "STSong", "Noto Serif SC", "Georgia", serif;--body:"Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;color:var(--ink);background:var(--paper);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.45}*{box-sizing:border-box}html{background:var(--paper)}body{min-width:320px;margin:0}#root{min-height:100svh}.app-shell{min-height:100svh;color:var(--ink);background:linear-gradient(90deg, #253a360d 1px, transparent 1px), linear-gradient(180deg, #253a360a 1px, transparent 1px), var(--paper);background-size:42px 42px}.topbar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2vw,28px);padding:clamp(18px,3.2vw,42px) clamp(18px,4vw,60px) 16px;display:grid}.brand-mark{width:54px;height:54px;color:var(--paper);font-family:var(--display);background:var(--ink);box-shadow:7px 7px 0 var(--sage);border:1px solid #ffffff6b;border-radius:8px;place-items:center;font-size:20px;display:grid}.topbar h1,.topbar p{margin:0}.topbar h1{max-width:780px;font-family:var(--display);letter-spacing:0;font-size:clamp(30px,5vw,62px);font-weight:650;line-height:.95}.topbar-note{color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:8px;justify-self:end;padding:10px 14px;font-weight:700}.kicker{color:var(--clay);letter-spacing:.12em;text-transform:uppercase;font-size:12px;font-weight:800}.workspace{grid-template-columns:minmax(340px,.82fr) minmax(430px,1fr);gap:clamp(18px,3vw,36px);padding:18px clamp(18px,4vw,60px) 56px;display:grid}.control-column,.preview-column{align-content:start;gap:16px;display:grid}.panel,.preview-stage,.payment-panel{border:1px solid var(--line);background:#fffcf5e0;border-radius:8px;box-shadow:0 24px 70px #253a361c}.panel{padding:18px}.section-heading,.preview-head,.payment-panel{justify-content:space-between;gap:16px;display:flex}.section-heading{align-items:baseline;margin-bottom:16px}.section-heading p{color:var(--sage-deep);font-family:var(--display);margin:0;font-size:15px}.section-heading h2,.preview-head h2,.payment-panel h2{font-family:var(--display);letter-spacing:0;margin:0;font-size:clamp(21px,2vw,28px);font-weight:650}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}label{color:var(--muted);gap:7px;font-size:13px;font-weight:700;display:grid}input,select{box-sizing:border-box;width:100%;color:var(--ink);background:var(--field);border:1px solid var(--line);font:inherit;border-radius:8px;outline:none;min-height:42px;padding:10px 12px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.identity-panel{gap:12px;display:grid}.upload-zone{text-align:center;min-height:96px;color:var(--ink);background:linear-gradient(135deg, #7a9b761f, #c65d3a1a), var(--cream);cursor:pointer;border:1px dashed #c65d3a80;border-radius:8px;place-items:center}.upload-zone input{opacity:0;width:1px;height:1px;position:absolute}.upload-zone span{font-family:var(--display);font-size:24px;font-weight:650}.upload-zone strong{color:var(--muted);font-size:13px}.photo-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 14px;display:grid}.photo-strip img,.photo-placeholder{aspect-ratio:1;object-fit:cover;border:1px solid var(--line);background:var(--cream);border-radius:8px;width:100%}.photo-placeholder{color:var(--muted);place-items:center;font-size:12px;display:grid}.choice-row{gap:8px;display:flex}.choice-row.wrap{flex-wrap:wrap}button{color:var(--ink);background:var(--cream);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:8px;font-weight:760;transition:transform .16s,border-color .16s,background .16s}button:hover:not(:disabled){border-color:#9a7b2f;transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.56}.choice{padding:9px 12px}.choice.active,.size-card.active,.outline-item.active{color:var(--paper);background:var(--ink);border-color:var(--ink)}.size-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;display:grid}.size-card{text-align:left;gap:3px;padding:12px;display:grid}.size-card small{color:#253a36b8}.switch-row{align-items:center;gap:10px;margin-top:12px;display:flex}.switch-row input{width:18px;min-height:18px}.primary-action,.export-action,.secondary-action{width:100%;min-height:48px;color:var(--paper);background:var(--clay);border-color:var(--clay);margin-top:14px}.outline-list{gap:8px;margin-top:14px;display:grid}.outline-item{text-align:left;grid-template-columns:auto 1fr;gap:0 12px;padding:11px 12px;display:grid}.outline-item span{color:var(--gold);font-family:var(--display);grid-row:span 2}.outline-item small{color:#253a36b3}.preview-stage{padding:clamp(16px,2.6vw,26px)}.preview-head{align-items:center;margin-bottom:18px}.preview-head>span{color:var(--muted);font-weight:800}.book-page-wrap{background:linear-gradient(115deg, #d0a33d2b, #7a9b761f), var(--cream);border:1px solid var(--line);border-radius:8px;place-items:center;min-height:clamp(430px,63vw,710px);padding:clamp(14px,2vw,28px);display:grid}.book-page{width:min(100%,570px);min-height:0;color:var(--ink);background:linear-gradient(160deg,#ffffffb8,#fff7e747),#f7dfc9;border:1px solid #253a362e;border-radius:8px;display:grid;position:relative;overflow:hidden;box-shadow:0 28px 70px #253a3633,inset 0 0 0 12px #ffffff3d}.book-page.generated{background:#111;box-shadow:0 28px 70px #253a3633,inset 0 0 0 1px #ffffff2e}.book-page.generated img{object-fit:cover;width:100%;height:100%}.page-art{position:absolute;inset:0}.sun-disc{aspect-ratio:1;background:var(--page-accent);opacity:.45;border-radius:50%;width:28%;position:absolute;top:9%;right:12%}.paper-hill{background:var(--sage);opacity:.38;border-radius:52% 48% 0 0;width:76%;height:39%;position:absolute;bottom:-12%;right:-8%}.paper-hill.two{background:var(--gold);width:62%;bottom:-16%;left:-16%;right:auto}.baby-portrait{aspect-ratio:.78;filter:drop-shadow(0 18px 18px #253a362e);width:31%;position:absolute;bottom:24%;left:10%}.face{aspect-ratio:1;background:#f4c9ab;border:4px solid #432f2629;border-radius:48% 48% 45% 45%;width:78%;margin:0 auto;position:relative}.face:before{content:"";background:#2f261f;border-radius:55% 55% 42% 42%;width:86%;height:32%;position:absolute;top:-15%;left:7%}.face span{aspect-ratio:1;background:#2f261f;border-radius:50%;width:9%;position:absolute;top:48%}.face span:first-child{left:34%}.face span:last-child{right:34%}.collar{background:var(--page-accent);border-radius:48% 48% 18% 18%;width:100%;height:42%;margin-top:-5%}.page-copy{z-index:1;text-align:right;align-content:end;justify-self:end;width:min(68%,440px);min-height:100%;padding:10% 9%;display:grid;position:relative}.page-copy p,.page-copy h3,.page-copy h4,.page-copy small{margin:0}.page-copy p{color:var(--clay);letter-spacing:.12em;text-transform:uppercase;font-size:clamp(12px,1.4vw,15px);font-weight:850}.page-copy h3{font-family:var(--display);letter-spacing:0;margin-top:10px;font-size:clamp(26px,4.2vw,52px);font-weight:680;line-height:1.03}.page-copy h4{color:var(--sage-deep);font-family:var(--display);letter-spacing:0;margin-top:7px;font-size:clamp(18px,2vw,30px);font-weight:520}.page-copy small{color:var(--muted);margin-top:22px;font-weight:750}.preview-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;display:grid}.preview-controls button{min-height:42px;padding:8px}.payment-panel{padding:20px;display:grid}.price-line{border-top:1px solid var(--line);justify-content:space-between;align-items:baseline;margin-top:8px;padding:18px 0 8px;display:flex}.price-line span{color:var(--muted);font-weight:800}.price-line strong{font-family:var(--display);font-size:clamp(34px,4vw,56px);line-height:1}.price-meta{flex-wrap:wrap;gap:8px;display:flex}.price-meta span{color:var(--sage-deep);background:#7a9b761f;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:800}.qr-block{background:var(--cream);border:1px solid var(--line);border-radius:8px;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin-top:16px;padding:14px;display:grid}.qr-code{background:#faf7ed;border:1px solid #253a3638;border-radius:4px;width:132px;padding:10px}.qr-code svg{display:block}.qr-block strong,.qr-block p{margin:0 0 8px}.qr-block p{color:var(--muted)}.qr-block button{min-height:38px;padding:8px 12px}.export-action{background:var(--ink);border-color:var(--ink)}.secondary-action{color:var(--ink);background:var(--cream);border-color:var(--line)}.generation-error{color:#7f2f21;background:#c65d3a1f;border:1px solid #c65d3a47;border-radius:8px;margin:12px 0 0;padding:10px 12px;font-weight:700}.pdf-render-bank{pointer-events:none;position:fixed;top:0;left:-200vw}.pdf-page-shell{background:var(--paper);padding:0;display:grid}.pdf-page-shell .book-page{width:100%;height:100%;box-shadow:none;border-radius:0}@media (width<=1040px){.workspace{grid-template-columns:1fr}.preview-column{order:-1}}@media (width<=720px){.topbar{grid-template-columns:auto 1fr}.topbar-note{text-align:center;grid-column:1/-1;justify-self:stretch}.form-grid,.size-grid,.preview-controls,.qr-block{grid-template-columns:1fr}.photo-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.baby-portrait{width:29%;bottom:30%}.page-copy{width:70%;padding:9% 8%}.page-copy h3{font-size:clamp(24px,7vw,34px)}.page-copy h4{font-size:clamp(15px,4.6vw,22px)}}