.hero-art{height:500px;perspective:1400px}.demo-book{width:min(440px,95%);height:auto;aspect-ratio:1.6;background:#eac6d2;padding:30px;transform-style:preserve-3d;animation:hero-drift 9s ease-in-out infinite;will-change:transform}.demo-book strong{font-size:clamp(45px,4.5vw,66px);letter-spacing:-3px;line-height:1.02;max-width:90%;margin-top:25px;color:#6a263b}.demo-book small{font-size:10px;color:#6a263b;letter-spacing:1.5px}.demo-book div{color:#6a263b;margin-top:28px}.hero-bow{position:absolute;right:5%;top:16%;width:46%;background-position:66.6667% 0;transform:rotate(12deg)}.hero-art:hover .demo-book{animation-play-state:paused}.hero-art:after{content:'';position:absolute;width:65%;height:30px;bottom:50px;background:#333d2522;filter:blur(18px);border-radius:50%;animation:shadow-drift 9s ease-in-out infinite}.art-tag{bottom:8px}.orbit{top:0}.hero-art .demo-book{z-index:1}
@keyframes hero-drift{0%,100%{transform:translateY(5px) rotateX(8deg) rotateY(-13deg) rotateZ(-8deg)}50%{transform:translateY(-15px) rotateX(3deg) rotateY(-5deg) rotateZ(-4deg)}}@keyframes shadow-drift{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(.85);opacity:.35}}
.stage.is-editing .book{transform:none}.stage.is-editing .book:hover{transform:none}.stage.is-editing .hotspot{border:1px dashed #485f68a6;background:#ffffff05;color:#354b4a}.stage.is-editing .hotspot span{position:absolute;right:5px;top:5px;opacity:1;background:#ffffffe8;box-shadow:0 1px 5px #0002;color:#34514f;font-size:12px;padding:5px 8px}.stage.is-editing .hotspot:hover{background:#ffffff22;border-color:#355f65}#text-hotspots{position:absolute;inset:0;pointer-events:none}.text-area{position:absolute;pointer-events:auto;border:1px dashed #52755a9c;border-radius:3px;background:transparent;padding:0}.text-area span{position:absolute;left:0;top:-17px;font-size:11px;color:#31523c;background:#f5faf1eb;border-radius:3px;padding:2px 5px;white-space:nowrap}.text-area:hover{background:#ffffff28;border-color:#31523c}.inline-text{position:absolute;pointer-events:auto;background:#fffef4f2;color:#20271d;border:2px solid #7e9563;border-radius:5px;padding:8px;resize:none;font:600 18px/1.4 Manrope,Arial;z-index:8;box-shadow:0 3px 15px #26351a22;min-height:50px}.clean-preview #hotspots,.clean-preview #text-hotspots{visibility:hidden!important}.custom-color{display:flex!important;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid #d7dfca;border-radius:10px;background:#fff;cursor:pointer;font-size:14px!important}.custom-color input{width:42px!important;height:32px;padding:0!important;border:0!important;margin:0!important;cursor:pointer}#cover-tools{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0 0 24px;position:relative;z-index:10}#hold-clean{background:#fff9;border:1px solid #d3daca;border-radius:30px;padding:11px 18px;font:500 13px Manrope,Arial;color:#4a5941;touch-action:none;user-select:none;-webkit-user-select:none;min-height:44px}#hold-clean.held{background:#dce8c7;color:#293f21}#text-tools{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#fffffff2;border:1px solid #dae1d1;border-radius:14px;padding:10px;font-size:12px;box-shadow:0 6px 22px #28351e12}#text-tools button{border:0;border-radius:7px;background:#ecf0e4;padding:9px;font-size:12px}#editing-label{font-weight:700}.text-color-label{display:flex;align-items:center;gap:8px}.text-color-label input{width:30px!important;height:30px;padding:0!important;border:0!important;margin:0!important}.stage.is-editing{height:auto;min-height:650px}.stage.is-editing .book-wrap{min-height:400px;padding-top:50px;padding-bottom:40px}.flip-leaf{position:absolute;inset:0;background-size:cover;background-position:center;transform-origin:left center;backface-visibility:hidden;pointer-events:none;border-radius:3px;box-shadow:3px 0 8px #00000015;will-change:transform}.book:has(#frame-view:not([hidden])){transform:perspective(1600px) rotateY(-5deg) rotateX(3deg)}#trim-selection,#trim-left,#trim-right{transition:none!important}#trim-selection{min-width:0}#trim-selection button{user-select:none;-webkit-user-select:none}.film-editor{margin-left:12px;margin-right:12px}#text-tools input[type=color]:focus-visible{outline:2px solid #536f34}
@media(max-width:800px){.hero-art{height:420px}.demo-book{width:min(400px,90%);padding:26px}.demo-book strong{font-size:55px}.stage.is-editing{min-height:0}.stage.is-editing .book-wrap{min-height:0;padding:35px 15px}#cover-tools{margin-bottom:16px}.text-area span{font-size:10px;top:-14px}.inline-text{font-size:16px}.stage.is-editing .hotspot span{font-size:10px;padding:3px 5px;right:2px;top:2px}.hero-art:after{bottom:48px}#text-tools{gap:7px;font-size:11px}}
@media(max-width:480px){.hero-art{height:370px}.demo-book{width:90%;padding:22px}.demo-book strong{font-size:43px;letter-spacing:-2px}.demo-book small{font-size:8px}.demo-book div{margin-top:20px}.hero-art:after{bottom:42px}.stage.is-editing .book-wrap{padding:35px 5px}#hold-clean{font-size:12px}.text-area{min-height:18px}}
@media(prefers-reduced-motion:reduce){.demo-book,.hero-art:after{animation:none!important}.flip-leaf{display:none!important}}
.stage.is-editing .hotspot span{z-index:5;pointer-events:auto}.text-area{z-index:2}.inline-text{z-index:8}
/* A single, always-visible editor beneath the book. */
#text-tools{display:block;width:100%;max-width:560px;padding:18px;border-radius:18px;box-shadow:none;background:#ffffffd9;text-align:left}#cover-tools{width:100%;gap:16px;margin:0 auto 20px;max-width:560px}.text-tabs{display:flex;background:#f0f2e9;border-radius:10px;padding:4px;gap:4px;margin-bottom:14px}#text-tools .text-tabs button{flex:1;background:transparent;min-height:44px;font-size:14px;border-radius:8px}#text-tools .text-tabs button.active{background:#fff;box-shadow:0 2px 6px #26321b12;color:#273f23}#editing-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#cover-text{margin:0!important;font-size:17px!important;height:50px;background:#fff!important;border-color:#ccd5c2!important}.text-style{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}.text-style>span{font-size:13px;color:#59604e}#text-swatches{display:flex;gap:8px}#text-tools [data-ink]{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #0002}#text-tools [data-ink][aria-pressed=true]{outline:2px solid #536342;outline-offset:3px}#text-tools #auto-text-color{font-size:13px;min-height:40px;background:transparent;color:#647057}#auto-text-color[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}.text-color-label{position:relative;display:flex;width:36px;height:36px;border:1px solid #d1d7c9;border-radius:50%;justify-content:center;font-size:20px;background:conic-gradient(#ead3df,#d9e7ed,#e9edb8,#ead3df);cursor:pointer}.text-color-label input{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer}.stage.is-editing{min-height:0;height:auto}.stage.is-editing .book-wrap{min-height:0;padding:42px 12px 44px}.stage-logo{display:block!important}.stage-top{align-items:center;min-height:28px}.text-area{border-color:#5a725844}.text-area.selected{border-color:#4d704b;border-style:solid;background:#ffffff0a}.text-area span{display:none}.text-area:focus-visible{outline:3px solid #5d7b50;outline-offset:3px}.layouts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.layouts button{padding:7px}#panel-cover .custom-color{margin-bottom:24px}#hold-clean{font-size:12px;border:0;background:transparent;padding:8px 16px;color:#68745d}#panel-preview h3{font-size:24px}#add-cart{margin-top:28px}#panel-preview #play{background:#e4e9da;color:#283824}.stage{transition:background .6s}.studio-shell{overflow:clip}.panel{animation:panel-in .35s ease-out}@keyframes panel-in{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:800px){.studio-shell{display:flex;flex-direction:column}aside{display:contents}.step-tabs{order:-3;margin:0;padding:12px;background:#fafbf6;border-bottom:1px solid #dde3d4}.stage{order:-2;position:static;width:100%;padding:18px;min-height:0}.panel{padding:22px}.stage.is-editing .book-wrap{padding:25px 5px 35px}.book{max-width:440px}#text-tools{padding:14px}.text-style{gap:10px}.text-style>span{width:100%;font-size:12px}.text-tabs{margin-bottom:12px}#text-tools .text-tabs button{font-size:14px}.layouts{grid-template-columns:repeat(4,minmax(0,1fr))}#cover-tools{margin-bottom:0}.stage-top{font-size:11px}.stage:not(.is-editing) .book-wrap{padding:30px 10px 40px}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}}
@media(max-width:480px){#text-tools{padding:12px}.text-style{gap:8px}#text-swatches{gap:6px}#text-tools [data-ink]{width:26px;height:26px}.text-color-label{width:30px;height:30px}#text-tools #auto-text-color{padding:4px;min-height:36px;font-size:12px}.text-style>span{margin-bottom:2px}.stage.is-editing .book-wrap{padding-top:22px;padding-bottom:30px}#cover-tools{gap:8px}}
/* Hero cover: warm paper, olive ink, a single botanical accent. */
.demo-book{background:#e7e6d2;border:1px solid #c9ceba;background-image:linear-gradient(100deg,#424c2010,transparent 7%,transparent 95%,#ffffff35)}.demo-book strong{color:#37452c;position:relative;z-index:2;max-width:78%;font-size:clamp(44px,4.4vw,63px);letter-spacing:-2.6px;line-height:1.02}.demo-book small,.demo-book div{color:#536047}.demo-book small{letter-spacing:1.2px}.demo-book div{border-top:1px solid #64714e33;padding-top:12px;margin-top:22px}.hero-olive{position:absolute;right:3%;top:22%;width:36%;background-position:0 100%;transform:rotate(-14deg);opacity:.96}.demo-book:after{content:'';position:absolute;inset:0 auto 0 8px;width:1px;background:#78805b22;pointer-events:none}
@media(max-width:480px){.demo-book strong{font-size:43px;letter-spacing:-2px}.demo-book div{margin-top:16px;padding-top:9px}.hero-olive{right:2%;top:24%;width:36%}}