.content-panel{color-scheme:light;--paper:#f5f0e5;--paper-panel:#fcf9f0;--ink:#223e33;--green:#214b3d;--gold:#ae8751;--gold-soft:#c6a36c;--olive:#8b8b6e;--rule:#b79a6c;--serif:"Songti SC","SimSun","Noto Serif CJK SC","STSong",serif;--latin:Georgia,"Palatino Linotype",serif}
*{box-sizing:border-box}
#upload-home.preview-stage{margin:0;min-width:320px;min-height:100svh;color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
#upload-home button{font:inherit}
.preview-stage{min-height:100svh;display:grid;place-items:center;padding:2.2vh 2.5vw;background:radial-gradient(ellipse at 50% 43%,#f8f5ee 0,#f1ece3 67%,#e9e2d7 100%)}
.content-panel{position:relative;isolation:isolate;container-type:inline-size;width:min(95vw,1450px);aspect-ratio:2.32;overflow:hidden;border:1px solid rgba(148,124,84,.22);border-radius:12px;background-color:#faf6ec;background-image:url("./assets/homepage-a/paper-grain.png"),radial-gradient(ellipse at 42% 27%,rgba(255,255,255,.54),transparent 61%),radial-gradient(ellipse at 100% 100%,rgba(153,120,70,.055),transparent 45%),linear-gradient(135deg,#fcf9f0,#f7f1e5);box-shadow:0 13px 36px rgba(62,51,34,.14),0 2px 5px rgba(62,51,34,.07),inset 0 0 0 1px rgba(255,255,255,.52),inset 0 -10px 24px rgba(139,112,72,.045)}
.site-header{position:absolute;z-index:8;top:2.4%;left:4.5%;right:4.5%;height:14.8%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(174,135,81,.68)}
.site-header:after{content:"";position:absolute;left:0;bottom:-2px;width:11%;height:3px;background:var(--gold)}
#upload-home .brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;white-space:nowrap}
#upload-home .brand-mark{display:block;width:48px;height:39px;object-fit:contain}
.wordmark{display:flex;align-items:baseline;gap:11px;font-family:var(--serif);white-space:nowrap}
.wordmark b{font-size:clamp(17px,1.9cqw,27px);font-weight:700;letter-spacing:.04em}
.wordmark i{font:600 clamp(17px,1.9cqw,26px)/1 var(--latin);letter-spacing:-.025em}
.account-nav{display:flex;align-items:center;gap:26px}
.account-nav button{height:36px;border:1px solid transparent;background:transparent;color:#29483b;font-family:"Noto Serif SC",var(--serif);font-size:clamp(12px,1.1cqw,16px);font-weight:700;letter-spacing:.055em;-webkit-text-stroke:.22px currentColor;white-space:nowrap;cursor:pointer}
.nav-guest{padding:0 7px}
.account-nav .nav-login{min-width:82px;padding:0 15px;border-color:#86917b;border-radius:8px;background:rgba(252,249,240,.6)}
.account-nav .nav-register{min-width:88px;padding:0 15px;border-color:#214b3d;border-radius:8px;background:var(--green);color:#fffaf0}
#upload-home.preview-stage .account-nav .nav-guest,#upload-home.preview-stage .account-nav .nav-guest:hover,#upload-home.preview-stage .account-nav .nav-guest:disabled{border-color:transparent;background:transparent;color:#29483b}
#upload-home.preview-stage .account-nav .nav-login,#upload-home.preview-stage .account-nav .nav-login:hover,#upload-home.preview-stage .account-nav .nav-login:disabled{border:1px solid #86917b;border-radius:8px;background:rgba(252,249,240,.6);color:#29483b}
#upload-home.preview-stage .account-nav .nav-register,#upload-home.preview-stage .account-nav .nav-register:hover,#upload-home.preview-stage .account-nav .nav-register:disabled{border:1px solid #214b3d;border-radius:8px;background:#214b3d;color:#fffaf0}
.header-ornament{position:absolute;left:50%;bottom:-12px;width:54px;height:24px;transform:translateX(-50%);padding:0 7px;background:var(--paper-panel);fill:none;stroke:var(--gold);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.hero{position:absolute;inset:0}
.hero-copy{position:absolute;inset:0;z-index:5;pointer-events:none}
.eyebrow{position:absolute;top:27.2%;left:4.5%;display:flex;align-items:center;gap:16px;margin:0;color:#334c3c;font:700 clamp(12px,1.38cqw,20px)/1 var(--serif);letter-spacing:.16em;white-space:nowrap}
.eyebrow i{display:block;width:clamp(100px,17cqw,248px);height:1px;background:linear-gradient(90deg,var(--gold),rgba(174,135,81,.48))}
.hero-copy h1{position:absolute;top:33.4%;left:4.5%;width:47%;margin:0;color:#15392c;font:700 clamp(42px,4.7cqw,68px)/1.22 "Noto Serif SC",var(--serif);letter-spacing:-.035em;-webkit-text-stroke:.65px currentColor}
.hero-copy h1 span{display:block;white-space:nowrap}
#upload-home .brand-positioning{position:absolute;top:60.5%;left:4.5%;width:48%;margin:0;color:#48584b;font:500 clamp(14px,1.42cqw,21px)/1.55 var(--serif);letter-spacing:.005em;white-space:nowrap}
.description-divider{position:absolute;top:71.2%;left:4.5%;width:39.5%;height:28px;display:flex;align-items:center;gap:12px;color:var(--gold)}
.description-divider i{height:1px;flex:1;background:linear-gradient(90deg,rgba(174,135,81,.68),rgba(174,135,81,.24))}
.description-divider i:first-child{background:linear-gradient(90deg,rgba(174,135,81,.68),rgba(174,135,81,.36))}
.description-divider svg{width:34px;height:29px;fill:rgba(156,119,67,.3);stroke:#9c7743;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.description{position:absolute;top:79.2%;left:4.5%;width:45%;margin:0;color:#556257;font:500 clamp(15px,1.48cqw,22px)/1.62 var(--serif);letter-spacing:.025em}
.botanical-art{display:none}
.botanical-engraving{position:absolute;z-index:1;pointer-events:none;object-fit:contain;opacity:.78;filter:saturate(.78) drop-shadow(1px 1.4px 1px rgba(76,65,46,.15))}
.botanical-left{left:45.1%;top:24.6%;width:12.6%;height:35.2%;transform:rotate(-40deg);opacity:.72}
.botanical-right{left:72%;top:18%;width:26%;height:32%;transform:rotate(4deg);transform-origin:50% 90%;opacity:.74}
.botanical-right-small{display:none}
.art-stage{position:absolute;z-index:2;inset:0;perspective:none;transform-style:flat}
.book-plate{--book-depth:clamp(28px,4.4cqw,64px);position:absolute;z-index:5;left:52.5%;top:19.2%;width:23%;height:75.5%;perspective:3600px;perspective-origin:50% 115%;pointer-events:none}
.book-volume{position:absolute;left:0;top:4%;width:92.8%;height:97%;transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateX(9deg) rotateY(28deg) rotateZ(-3.7deg)}
.book-rear-shadow{position:absolute;left:16%;top:14%;width:80%;height:82%;border-radius:12% 6% 8% 12%;background:linear-gradient(110deg,transparent,rgba(56,42,22,.12) 45%,rgba(56,42,22,.2));filter:blur(13px);transform:translate(15px,12px) rotate(-3.7deg)}
.book-ground-shadow{position:absolute;left:0;top:calc(100.2% - var(--book-depth) * .08);width:100%;height:3.4%;transform:rotate(-.5deg)}
.book-ground-shadow:before{content:"";position:absolute;inset:-5% -4%;border-radius:50%;background:radial-gradient(ellipse,rgba(44,35,21,.32),rgba(57,45,27,.12) 44%,transparent 73%);filter:blur(3px)}
.book-ground-shadow:after{content:"";position:absolute;left:4%;right:3%;top:9%;height:18%;border-radius:50%;background:rgba(28,27,17,.6);filter:blur(.7px)}
.book-back{position:absolute;inset:-1px -1px calc(var(--book-trim) - var(--page-slope) - 1px);border:2px solid #594a2c;border-radius:4px 2px 2px 4px;background:#19372b;transform:translateZ(calc(var(--book-depth) * -.5)) rotateY(180deg);backface-visibility:hidden}
.book-volume{--book-trim:calc(var(--book-depth) * .22);--page-slope:calc(var(--book-depth) * .14054083)}
.book-spine{position:absolute;inset:0;transform-style:preserve-3d}
.book-spine:before{content:"";position:absolute;left:0;top:0;width:var(--book-depth);height:calc(100% - var(--book-trim));background:#213c2a;transform-origin:left center;transform:translateZ(calc(var(--book-depth) * -.5)) rotateY(-90deg);backface-visibility:hidden}
.spine-slice{transform-style:preserve-3d;position:absolute;left:0;top:0;width:calc(var(--book-depth) * var(--sw));height:calc(100% - var(--book-trim) + var(--page-slope) * (1 - var(--bt)));background-color:#203c2b;background-image:url("./assets/homepage-a/v8/spine-foil.svg"),url("./assets/homepage-a/book-materials-v7/spine-cloth.png");background-size:calc(var(--book-depth) * var(--ts)) 100%;background-position:calc(var(--book-depth) * var(--tx)) 0;background-repeat:no-repeat;border-top:.7px solid rgba(139,130,79,.65);border-bottom:0;transform-origin:left top;transform:translate3d(calc(var(--book-depth) * var(--sx)),0,calc(var(--book-depth) * var(--sz))) rotateY(var(--sa));backface-visibility:hidden}
.spine-slice:before{content:"";position:absolute;inset:-.3px -.4px .6px;background:#263e2b;transform:translateZ(-.3px);backface-visibility:hidden}
.spine-cap{position:absolute;left:calc(var(--book-depth) * -.18);width:calc(var(--book-depth) * .18);height:var(--book-depth);clip-path:ellipse(100% 50% at 100% 50%);background:linear-gradient(90deg,#10291e,#2c4330);border:.8px solid #38422a;backface-visibility:hidden}
.spine-cap-top{top:calc(var(--book-depth) * -1);transform-origin:center bottom;transform:translateZ(calc(var(--book-depth) * .5)) rotateX(90deg)}
.spine-cap-bottom{left:calc(var(--book-depth) * -.18);width:calc(var(--book-depth) * .18);height:calc(var(--book-depth) * 1.0098276);top:calc(100% - var(--book-trim));border:0;transform-origin:center top;transform:translateZ(calc(var(--book-depth) * .5)) rotateX(-82deg)}
.page-edges{position:absolute;left:calc(100% - 3.5px);top:3px;width:calc(var(--book-depth) - 5.4px);height:calc(100% - var(--book-trim) - 5.5px + var(--page-slope));border:0;background:repeating-linear-gradient(90deg,#d4c4a2 0 1.4px,#c2b18c 1.4px 1.7px,#ddcfb1 1.7px 3.4px);clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--page-slope)));transform-origin:left center;transform:translateZ(calc(var(--book-depth) * .5 - 2.7px)) rotateY(90deg);backface-visibility:hidden}
.book-bottom-pages{position:absolute;left:3.5px;top:calc(100% - var(--book-trim) + .2px);width:calc(100% - 7px);height:calc((var(--book-depth) - 5.4px) * 1.0098276);border:0;border-radius:1px 5px 4px 1px;background:#c8b48b url("./assets/homepage-a/v10/paper-cut.svg") center/100% 100%;clip-path:polygon(0 0,100% 0,99.3% 12%,98.1% 30%,97.8% 45%,98.4% 65%,99.2% 85%,100% 100%,75% 99%,50% 98%,25% 99%,0 100%);transform-origin:center top;transform:translateZ(calc(var(--book-depth) * .5 - 2.7px)) rotateX(-82deg);backface-visibility:hidden}
.book-bottom-board,.book-back-board-bottom{top:calc(100% - var(--book-trim) + var(--page-slope));height:1.6px;border-radius:1px 2px 2px 1px;background:linear-gradient(#65704a,#243e2b);transform:translateZ(calc(var(--book-depth) * -.5 + 1.6px)) rotateX(-90deg)}
.book-back-board-bottom{top:calc(100% - var(--book-trim) + var(--page-slope));height:1.6px;border-radius:1px 2px 2px 1px;background:linear-gradient(#65704a,#243e2b);transform:translateZ(calc(var(--book-depth) * -.5 + 1.6px)) rotateX(-90deg)}
.cover-foreedge-cut{position:absolute;left:100%;top:0;width:1.6px;height:calc(100% - var(--book-trim));background:linear-gradient(90deg,#ad9361,#6a5836);transform-origin:left center;transform:translateZ(calc(var(--book-depth) * .5)) rotateY(90deg);backface-visibility:hidden}
.cover-face{position:absolute;inset:0 0 var(--book-trim);overflow:hidden;border:1px solid #9d7c46;border-radius:1px 2px 2px 1px;background:#c9b48f;box-shadow:inset 2px 0 3px rgba(51,34,16,.22);transform:translateZ(calc(var(--book-depth) * .5));backface-visibility:hidden}
.cover-face:before{content:"";position:absolute;z-index:4;left:0;top:0;bottom:0;width:3.2%;pointer-events:none;background:linear-gradient(90deg,rgba(17,39,24,.85),rgba(62,65,33,.46) 17%,rgba(215,193,127,.16) 31%,rgba(58,50,27,.34) 43%,rgba(248,218,161,.1) 62%,transparent 100%)}.cover-face:after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,244,210,.08),transparent 33%,rgba(54,35,16,.07));box-shadow:inset 1px 0 2px rgba(61,40,20,.24),inset 0 0 0 1px rgba(255,242,202,.25)}
.cover-still,.cover-motion{position:absolute;z-index:1;top:0;left:-10.55%;width:110.55%;height:100%;object-fit:fill;filter:saturate(.80) brightness(.96) contrast(1.035)}
.cover-still{opacity:1;transition:opacity .35s ease}
.cover-motion{z-index:2;opacity:0;transition:opacity .35s ease;pointer-events:none}
.book-plate[data-motion="ready"] .cover-still{opacity:0}
.book-plate[data-motion="ready"] .cover-motion{opacity:1}
.import-card{position:absolute;z-index:4;left:74%;top:43%;width:24%;height:52%;overflow:hidden;border:1.35px solid #aa8550;border-radius:5px;background:radial-gradient(ellipse at 50% 32%,#fffdf8,#faf7ee 72%);box-shadow:2px 5px 12px rgba(77,63,42,.12),inset 0 0 0 1px rgba(255,255,255,.8)}
.import-card:before{content:"";position:absolute;inset:6px;border:1px solid rgba(174,135,81,.58);border-radius:3px;pointer-events:none}
.card-ornament{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a78350;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.card-ornament .corner{stroke-width:.9;opacity:.68}
.card-ornament .flourish{stroke-width:.85;opacity:.82}
.card-ornament .leaf-mark{fill:rgba(156,119,67,.26);stroke:#9c7743;stroke-width:.92}
.card-ornament .floral-curl{fill:none;stroke:#a1814f;stroke-width:.72;stroke-linecap:round;stroke-linejoin:round}.card-ornament .floral-leaf{fill:rgba(174,135,81,.12);stroke-width:.65}
.card-ornament .floral-vein{fill:none;stroke:#ad8f5c;stroke-width:.46;stroke-linecap:round;opacity:.84}.description-divider .bud-vein{fill:none;stroke-width:.6}
.card-copy{position:absolute;z-index:2;inset:28% 8% 13%;display:flex;flex-direction:column;align-items:center;text-align:center}
.card-copy h2{margin:0 0 12px;color:#193b2d;font:800 clamp(16px,1.65cqw,22px)/1.4 "Noto Serif SC",var(--serif);letter-spacing:.005em;-webkit-text-stroke:.3px currentColor;white-space:nowrap}
.card-copy p{margin:0;color:#777766;font:500 clamp(12px,1.14cqw,16px)/1.5 var(--serif);letter-spacing:.04em;white-space:nowrap}
.choose-button{width:85%;height:56px;margin-top:22px;border:1px solid #a17d49;border-radius:999px;outline:1px solid rgba(174,135,81,.74);outline-offset:2px;background:linear-gradient(180deg,#244c39,#183d2d);color:#fff8e8;font:500 clamp(13px,1.25cqw,17px)/1 "Noto Serif SC",var(--serif);letter-spacing:.02em;box-shadow:0 3px 7px rgba(33,57,43,.18);cursor:pointer;transition:background-color .2s,transform .2s}
.choose-button:hover{background:#2d6049;transform:translateY(-1px)}
#book-file-input{display:none}
@media(max-width:1100px){
  .preview-stage{min-height:100svh;padding:14px 0;place-items:start center}
  .content-panel{width:min(96vw,820px);min-height:980px;aspect-ratio:auto;border-radius:10px}
  .site-header{position:relative;top:auto;left:auto;right:auto;height:72px;margin:0 4%;padding:0 0}
  .hero{position:relative;inset:auto;display:block;padding-bottom:32px}
  .hero-copy{position:relative;inset:auto;height:316px;margin:0 5.5%}
  .eyebrow{top:34px;left:0;font-size:12px}
  .hero-copy h1{top:79px;left:0;width:74%;font-size:clamp(38px,4.5vw,52px);line-height:1.14}
  #upload-home .brand-positioning{top:201px;left:0;width:100%;font-size:14px;white-space:normal}
  .description-divider{top:247px;left:0;width:92%}
  .description{top:282px;left:0;width:94%;font-size:14px}
  .art-stage{position:relative;height:430px;margin:0 4%}
  .botanical-art{inset:0;width:100%;height:100%}
  .botanical-engraving{display:none}
  .book-plate{--book-depth:42px;left:26%;top:0;width:230px;height:307px}
  .import-card{left:53%;top:130px;width:40%;height:270px}
  .card-copy h2{font-size:20px}
  .card-copy p{font-size:14px}
  .choose-button{height:42px;font-size:15px;margin-top:18px}
}
@media(max-width:620px){
  .preview-stage{padding:8px 0}
  .content-panel{width:calc(100vw - 16px);min-height:1000px}
  .site-header{height:68px;margin:0 12px}
  #upload-home .brand{gap:6px}
  #upload-home .brand-mark{width:39px;height:33px}
  .wordmark{gap:6px}
  .wordmark b,.wordmark i{font-size:16px}
  .account-nav{gap:5px}
  .account-nav button{height:30px;font-size:12px}
  .nav-guest{padding:0 3px}
  .account-nav .nav-login,.account-nav .nav-register{min-width:47px;padding:0 8px;border-radius:7px}
  .hero-copy{height:340px;margin:0 6%}
  .eyebrow{top:28px;font-size:10px;letter-spacing:.13em}
  .eyebrow i{width:78px}
  .hero-copy h1{top:72px;width:100%;font-size:clamp(26px,7.4vw,34px);line-height:1.3;letter-spacing:-.04em}
  .hero-copy h1 span{white-space:normal}
  #upload-home .brand-positioning{top:163px;font-size:12px;line-height:1.8}
  .description-divider{top:220px;width:100%;gap:8px}
  .description-divider svg{width:30px}
  .description{top:252px;width:100%;font-size:12.5px;line-height:1.7}
  .art-stage{height:390px;margin:0 3%}
  .book-plate{--book-depth:28px;left:6%;top:0;width:150px;height:200px}
  .import-card{left:27%;top:145px;width:70%;height:235px}
  .card-copy{inset:24% 7% 12%}
  .card-copy h2{font-size:17px}
  .card-copy p{font-size:13px}
  .choose-button{height:38px;width:88%;font-size:14px;margin-top:15px}
  .card-ornament{stroke-width:1.35}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .cover-motion{display:none!important}
  .cover-still{opacity:1!important}

}

.art-stage:before{content:"";position:absolute;left:49%;top:37%;width:45%;height:63%;background:radial-gradient(ellipse at 46% 79%,rgba(198,153,83,.09),transparent 65%);pointer-events:none}

.card-ornament .flourish-dots{fill:#a78350;stroke-width:.55}

.book-spine:after{content:"";position:absolute;left:0;top:calc(100% - var(--book-trim));width:3.5px;height:var(--book-depth);background:linear-gradient(90deg,#203725,#3c4b30);transform-origin:left top;transform:translateZ(calc(var(--book-depth) * .5)) rotateX(-82deg);backface-visibility:hidden}
.book-left-shadow{position:absolute;left:-11%;top:17%;width:24%;height:80%;border-radius:50%;background:radial-gradient(ellipse at 65% 53%,rgba(65,48,25,.38),rgba(65,48,25,.22) 40%,rgba(83,62,33,.1) 65%,transparent 83%);filter:blur(10px);transform:rotate(-3.7deg);pointer-events:none}

.book-bottom-core{position:absolute;left:1px;top:calc(100% - var(--book-trim) - 3.1px);width:calc(100% - 4px);height:calc(var(--book-depth) - 4px);border-radius:1px 3px 2px 1px;background:linear-gradient(90deg,#33442b,#b8a27b 2%,#b8a27b 98%,#a48e68);transform-origin:left top;transform:translateZ(calc(var(--book-depth) * .5)) rotateX(-82deg);backface-visibility:hidden}


/* Keep the live account controls from the formal page inside the A visual. */
#upload-home .home-account{position:absolute;inset:0;z-index:20;max-width:none;margin:0;padding:0;pointer-events:none}
#upload-home .home-auth-form{pointer-events:auto;border-color:rgba(174,135,81,.55);border-radius:10px;background:#fcf9f0;color:#223e33;box-shadow:0 14px 36px rgba(62,51,34,.2)}
#upload-home .home-auth-fields label{color:#48584b}
#upload-home .home-auth-fields input{border-color:#cbb995;border-radius:7px;background:#fffdf7;color:#223e33;outline-color:#ae8751}
#upload-home .home-auth-fields .primary-upload-button{border:1px solid #a17d49;border-radius:7px;background:#214b3d;color:#fffaf0}
#upload-home .home-auth-fields .primary-upload-button:hover{background:#2d6049}
#upload-home .home-auth-fields .quiet-button{border:1px solid #b79a6c;border-radius:7px;background:#f7f2e8;color:#29483b}
#upload-home .home-auth-help{color:#657164}
#upload-home .visitor-auth-error{color:#a2463d}
#upload-home .home-auth-notice{position:absolute;top:17%;right:4.5%;z-index:21;max-width:min(380px,90%);margin:0;border-color:#c6a36c;background:#fcf9f0;color:#72552f}
#upload-home .upload-progress{color:#52694f}
#upload-home .upload-error{border-color:#e5c8b8;background:#fff8f2;color:#8c4d3c}