/* A photograph and handwritten invitations on the same book page. */
#guest-thanks{position:relative;padding-inline:20px;isolation:isolate}
.thanks-hearts{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none}
.thanks-hearts span{--drift:10px;position:absolute;bottom:8%;left:7%;width:13px;text-align:center;color:#bc3949;font:11px/1 Georgia,serif;opacity:0;animation:thanks-heart-rise 4.4s ease-out both}
.thanks-hearts span:nth-child(2){left:66%;bottom:19%;animation-delay:.65s;font-size:9px;--drift:-12px}
.thanks-hearts span:nth-child(3){left:32%;bottom:2%;animation-delay:1.3s;font-size:12px}
.thanks-hearts span:nth-child(4){left:86%;bottom:36%;animation-delay:.35s;--drift:-8px}
.thanks-hearts span:nth-child(5){left:18%;bottom:27%;animation-delay:2.6s;font-size:9px}
.thanks-hearts span:nth-child(6){left:53%;bottom:11%;animation-delay:3.1s;font-size:12px;--drift:-10px}
.thanks-hearts span:nth-child(7){left:75%;bottom:4%;animation-delay:1.9s}
.thanks-hearts span:nth-child(8){left:42%;bottom:43%;animation-delay:2.2s;font-size:9px;--drift:-6px}
@keyframes thanks-heart-rise{0%{opacity:0;transform:translate(0,15px) rotate(-9deg)}18%{opacity:.34}55%{transform:translate(var(--drift),-85px) rotate(9deg)}78%{opacity:.25}100%{opacity:0;transform:translate(0,-180px) rotate(-5deg)}}
@media(prefers-reduced-motion:reduce){.thanks-hearts{display:none}}
.folio-content .has-capture #recording-preview{display:flex;align-items:center;justify-content:center;gap:14px;margin:5px 0 12px}
.folio-content .has-capture #recording-preview .polaroid-saved{flex:0 1 170px;width:170px;max-width:170px;margin:0}
.folio-content .has-capture .polaroid-saved .polaroid-image{height:clamp(80px,20svh,145px);background:#203e35}
.folio-content .has-capture .polaroid-saved img,.folio-content .has-capture .polaroid-saved video{width:100%;height:100%;max-height:100%;object-fit:contain;margin:0}
.folio-content .has-capture .polaroid-saved .polaroid-caption{min-height:0;padding:8px 2px 10px}
.folio-content .has-capture .polaroid-saved .polaroid-caption strong{font-size:14px;line-height:1.15}
.folio-content .has-capture #recording-preview>button{flex:0 1 105px;margin:0;padding:8px;min-height:44px;font-size:16px;background:transparent;border-color:#b59f7877}
.folio-content .has-capture .greeting-details{margin:8px 0 12px}
.folio-content .has-capture textarea{display:block;width:100%;height:82px;min-height:70px;max-height:100px;margin-top:6px;resize:none;font-size:18px;scroll-margin-block:16px}
.folio-content .has-capture #greeting-next{min-height:44px;padding:10px 12px;font-size:17px;line-height:1.2}
.guest-book-spread[data-chapter=review] .polaroid-saved{max-width:180px;margin:6px auto}
.guest-book-spread[data-chapter=review] .polaroid-saved .polaroid-image{height:130px}
.guest-book-spread[data-chapter=review] .polaroid-saved img,.guest-book-spread[data-chapter=review] .polaroid-saved video{height:100%;width:100%;object-fit:contain;margin:0}
.guest-book-spread[data-chapter=review] .polaroid-saved .polaroid-caption{min-height:0;padding:7px 2px}
.guest-book-spread[data-chapter=review] .polaroid-saved .polaroid-caption strong{font-size:14px}
.guest-book-spread[data-chapter=review] .polaroid-saved .polaroid-caption>span{display:none}
@media(max-height:520px){.folio-content .has-capture #recording-preview{gap:10px;margin:0 0 5px}.folio-content .has-capture .polaroid-saved .polaroid-image{height:64px}.folio-content .has-capture .polaroid-saved .polaroid-caption{display:none}.folio-content .has-capture textarea{height:64px;min-height:64px}.folio-content .has-capture .greeting-details{margin:5px 0 8px}}
.folio-content .guest-panel p.guest-choice-invitation{font:italic 20px/1.3 'Memories Garamond',Georgia,serif;color:#726447;margin:-3px 0 16px}
.guest-book-spread.folio-size-transition{animation:none;transform-origin:0 0;will-change:transform}
.folio-size-transition .folio-content{animation:none}
.story-player-shell{width:100%;text-align:center}
.story-player-shell .story-fullscreen{font:17px/1.2 'Memories Garamond',Georgia,serif;background:transparent;color:#526046;min-height:40px;padding:7px 10px}
.story-player-shell:fullscreen,.story-player-shell.is-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100%;height:100dvh;padding:0;background:#000;display:flex;align-items:center;justify-content:center;gap:0}
.story-player-shell.is-expanded button.story-polaroid.is-playing{display:flex;flex-direction:column;width:100%;max-width:none;height:100%;flex:1;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;transform:none;box-shadow:none}
.story-player-shell.is-expanded .story-stage,#story-preview .story-player-shell.is-expanded .story-stage{width:100%;height:100%;max-height:none;flex:1;min-height:0;aspect-ratio:auto;border-radius:0}
.story-player-shell.is-expanded .story-picture{position:absolute;inset:0;width:100%;height:100%;margin:0}
.story-player-shell.is-expanded .story-picture img,.story-player-shell.is-expanded .story-picture video{width:100%;height:100%;max-height:none;object-fit:contain}
.story-player-shell.is-expanded .story-polaroid-label{display:none}
.story-player-shell.is-expanded>.story-fullscreen{position:absolute;z-index:5;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:auto;max-width:130px;min-height:44px;margin:0;padding:8px 12px;color:#fff;background:#0009;border:1px solid #ffffff55;border-radius:6px;font-size:16px;box-shadow:none}
/* Keep the shutter in view even with a tall phone camera stream. */
.folio-content #camera-area .polaroid-camera.is-live{width:min(100%,290px);max-width:290px;margin:8px auto}
.folio-content #camera-area .camera-box{height:clamp(120px,34svh,300px);aspect-ratio:auto!important}
.folio-content #camera-area .camera-box video,.folio-content #camera-area .camera-box canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.folio-content #camera-area .capture-controls{min-height:0;padding:8px 3px 10px}
.folio-content #camera-area .capture-start,.folio-content #camera-area .capture-stop{width:100%;min-height:48px;padding:9px 12px;border:1px solid #9c855b;border-radius:3px;background:#fffaf0;color:#29483b;font-size:19px;line-height:1.2}
.folio-content #camera-area .capture-stop{color:#883c32;border-color:#a56b60}
.capture-clock{position:absolute;right:7px;top:7px;padding:4px 8px;border-radius:3px;background:#13251dd9;color:#fff9e9;font:16px/1.2 'Memories Garamond',Georgia,serif;font-variant-numeric:tabular-nums}
.capture-clock.is-recording{background:#6d211ee6}
.capture-options{display:flex;align-items:center;justify-content:center;gap:15px}
.folio-content .capture-options button{min-height:40px;padding:6px;font-size:17px;background:transparent;color:#526046}
.capture-effects-panel{max-width:290px;margin:0 auto}
.folio-content .capture-effects-panel .help{font-size:13px;line-height:1.2;margin:3px 0}
.folio-content .capture-effects-panel select{width:100%;font-size:16px;padding:6px;min-height:40px}
.folio-content #camera-area.effects-open .camera-box{height:clamp(100px,22svh,180px)}
.folio-content #camera-area.effects-open .polaroid-camera.is-live{width:min(100%,240px)}
@media(max-height:620px){.folio-content #camera-area.effects-open .camera-box{height:95px}}
@media(max-height:620px){.folio-content #camera-area .camera-box{height:clamp(100px,29svh,175px)}.folio-content #camera-area .polaroid-camera.is-live{max-width:230px}.folio-content #camera-area .capture-start,.folio-content #camera-area .capture-stop{min-height:44px;font-size:17px}.folio-content .capture-options button{min-height:36px}}
.magic-scene .magic-book.open{transform:translateX(30%) rotateY(0deg) rotateZ(0deg) scale(.94)}
.magic-book.open .turn-one{animation:magic-page-turn 1.45s 1.65s cubic-bezier(.36,.06,.26,1) forwards}
.magic-book.open .turn-two,.magic-book.open .turn-three{animation:none;transform:translateZ(5px)}
.guest-opening-layout .magic-book,.guest-opening-layout .magic-book:hover{transform:rotateZ(-3deg)}
.book-opening-bridge{position:fixed;z-index:200;perspective:1800px;perspective-origin:left center;transform-origin:center;transform:rotateZ(-3deg);pointer-events:none;transform-style:preserve-3d}
.book-opening-paper{position:absolute;inset:4px 3px 4px 5px;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#cbbd99,#faf3df 8%,#f5ecd6);box-shadow:2px 2px 0 #cbbb96,3px 3px 0 #f5ecd6;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8b7a51;font:italic 18px/1.4 'Memories Garamond',Georgia,serif}
.book-opening-paper small{font-size:11px}
.book-opening-paper .paper-ornament{height:150px;width:110px}
@media(max-width:700px){.book-is-open .guest-book-spread{grid-template-columns:minmax(0,1fr)}.book-is-open .folio-left{display:none}.book-is-open .folio-right{border-radius:4px 9px 8px 4px;background-image:linear-gradient(90deg,#bca57022,transparent 5%),radial-gradient(ellipse at top right,#fffaf0cc,transparent 75%)}}
.book-opening-cover.magic-cover{inset:0;transition:none;transform-origin:left center;transform:rotateY(0deg);border-radius:0 9px 8px 0}
.book-opening-cover .cover-front,.book-opening-cover .cover-back{border-radius:0 9px 8px 0}
.book-opening-cover .cover-emboss h3,.book-opening-cover .cover-emboss small,.book-opening-cover .inside-frame{font-family:'Memories Garamond',Georgia,serif}
.book-opening-cover .cover-front{box-shadow:inset 7px 0 14px #06130b55,7px 7px 22px #09201733}
.guest-book-spread.folio-continuous-opening{animation:none;opacity:0}
.guest-book-spread.folio-continuous-opening.folio-opening-landed{opacity:1;transition:opacity .22s ease}
.folio-curved-leaf:after{content:none}
.folio-paper-strip{position:absolute;top:0;height:100%;transform-origin:left center;transform-style:preserve-3d}
.folio-strip-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;transform:translateZ(.35px)}
.folio-strip-back{transform:rotateY(180deg) translateZ(.35px)}
.folio-strip-back>.folio-turn-back{transform:none;backface-visibility:visible;box-shadow:none}
.folio-strip-front>.folio-turn-front{box-shadow:none}
.folio-moving-shadow{position:absolute;z-index:12;pointer-events:none;background:linear-gradient(90deg,#4d3c22aa,#4d3c2222 55%,transparent);transform-origin:left center}
@media(prefers-reduced-motion:reduce){.book-opening-bridge,.folio-moving-shadow{display:none}}
.guest-wrap,.guest-wrap button,.guest-wrap input,.guest-wrap textarea,.guest-wrap select,
.guest-wrap h1,.guest-wrap h2,.guest-wrap h3,.guest-wrap p,.guest-wrap small,
.guest-wrap .polaroid-caption strong,.guest-wrap .cover-emboss h3 {
 font-family:'Memories Garamond',Georgia,serif;
}
.guest-wrap .book-opening-hint {font:italic 21px/1.4 'Memories Garamond',Georgia,serif;color:#776948;margin:4px 0 16px}
.guest-book-spread[data-chapter=create] .folio-content h1 {font-family:'Memories Garamond',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.5px;line-height:1.08}
.guest-book-spread[data-chapter=create] .folio-content label,
.guest-book-spread[data-chapter=create] .folio-content textarea,
.guest-book-spread[data-chapter=create] .folio-content input,
.guest-book-spread[data-chapter=create] .folio-content button,
.guest-book-spread[data-chapter=create] .folio-content p,
.guest-book-spread[data-chapter=create] .polaroid-caption strong,
.guest-book-spread[data-chapter=create] .polaroid-invitation {font-family:'Memories Garamond',Georgia,serif}
.guest-book-spread[data-chapter=create] .greeting-details>label {font-style:italic}
.guest-book-spread[data-chapter=create] .greeting-details textarea {font-style:normal}
.folio-content button.book-send-message {background:transparent;color:#34523e;border:1px solid #a28e6766;border-radius:3px;box-shadow:none;font:21px/1.3 'Memories Garamond',Georgia,serif;padding:11px 18px;min-height:46px}
.folio-content button.book-send-message:hover {background:#b7985712;border-color:#a28e67}
.book-is-open .folio-content .story-invitation {font-size:36px;font-style:italic;font-weight:500;line-height:1.05;text-align:center;margin:6px 0 20px;letter-spacing:-.6px}
#guest-story-preview {display:grid;place-items:center;min-height:100px}
.folio-content button.story-polaroid {position:relative;display:block;width:min(92%,340px);padding:10px 10px 0;margin:0 auto 12px;border:1px solid #e2ddcf;border-radius:1px;white-space:normal;background:repeating-linear-gradient(18deg,#b5b1a308 0 1px,transparent 1px 3px),linear-gradient(125deg,#fffef9,#f0eee5);box-shadow:0 1px 2px #40382a26,3px 8px 14px #493c2733,8px 21px 26px -17px #332b2199;transform:rotate(-4deg);transform-origin:50% 45%;transition:width .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);color:#344d3d;line-height:1.2;min-height:0}
.folio-content button.story-polaroid:hover {background-color:#fffdf5;transform:rotate(-2deg) translateY(-3px)}
.story-polaroid .story-stage {display:block;aspect-ratio:4/3;border-radius:0;background:#294439;isolation:isolate}
.story-polaroid .story-picture {display:flex}
.story-polaroid .story-picture img,.story-polaroid .story-picture video {object-fit:cover}
.story-play-mark {position:absolute;inset:0;display:grid;place-items:center;color:#fff8e9;font:30px Georgia,serif;text-shadow:0 2px 8px #0009;background:radial-gradient(circle,#17392d77 0 26px,transparent 27px);pointer-events:none}
.story-polaroid-label {display:block;padding:14px 4px 20px;font-size:20px;font-style:italic}
.story-polaroid .story-caption {display:none;font-size:18px;line-height:1.2;padding:7px;background:#fff9e7dd}
.folio-content button.story-polaroid.is-playing {width:min(100%,420px);transform:rotate(0);cursor:zoom-out}
.story-polaroid.is-playing .story-play-mark {display:none}
.story-polaroid.is-playing .story-caption:not(:empty) {display:block}
.folio-content button.book-inscription {display:block;width:100%;margin:18px auto 0;padding:8px 0;background:none;border:0;border-radius:0;box-shadow:none;color:#304d3c;font:italic 27px/1.15 'Memories Garamond',Georgia,serif;white-space:normal;letter-spacing:-.3px}
.book-inscription span {display:block;margin-top:10px;color:#a68b55;font-size:25px}
.folio-content button.book-inscription:hover {background:none;color:#876a35;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.folio-content .book-choice-inscriptions {gap:0;margin:22px auto 0;max-width:360px}
.folio-content .book-choice-inscriptions button {position:relative;background:none;border:0;border-radius:0;outline:0;box-shadow:none;border-bottom:1px solid #aa8e5840;color:#34523e;padding:18px 8px;min-height:74px;text-align:left;gap:18px}
.folio-content .book-choice-inscriptions button:before,.folio-content .book-choice-inscriptions button:after {content:none}
.folio-content .book-choice-inscriptions button:last-child {border-bottom:0}
.folio-content .book-choice-inscriptions button:hover {background:#b7985710;color:#876a35}
.folio-content .book-choice-inscriptions button>span {font-family:'Memories Garamond',Georgia,serif;font-style:italic;font-size:27px;font-weight:500}
.folio-content .book-choice-inscriptions small {font-family:'Memories Garamond',Georgia,serif;font-size:16px;font-style:normal;letter-spacing:0;color:#786d54;margin-top:4px}
.book-is-open .folio-content .guest-panel>h1 {font-family:'Memories Garamond',Georgia,serif;font-style:italic;font-weight:500;line-height:1.08}
.book-choice-inscriptions svg {width:28px;height:28px;stroke-width:1}
.book-inscription:focus-visible,.story-polaroid:focus-visible,.book-choice-inscriptions button:focus-visible {outline:2px solid #9b7c45;outline-offset:5px}
@media(max-height:620px){.book-is-open .folio-content .story-invitation{font-size:29px!important;margin:4px 0 12px}.folio-content button.story-polaroid{width:min(88%,240px);padding:8px 8px 0}.story-polaroid-label{padding:9px 2px 13px;font-size:18px}.folio-content button.story-polaroid.is-playing{width:min(100%,290px)}.folio-content button.book-inscription{font-size:23px;margin-top:10px}.book-inscription span{margin-top:4px;font-size:20px}.folio-content .book-choice-inscriptions button{padding:13px 8px}}
@media(prefers-reduced-motion:reduce){.folio-content button.story-polaroid{transition:none;transform:none}}

/* Lift the story content on phones, leaving room above the curled page edge. */
@media(max-width:700px){
 .book-is-open .guest-book-spread[data-chapter=story] .folio-right{padding-top:12px}
 .book-is-open .guest-book-spread[data-chapter=story] .folio-progress{margin:2px 0}
 .book-is-open .guest-book-spread[data-chapter=story] .story-invitation{margin:0 0 10px}
 .book-is-open .guest-book-spread[data-chapter=story] .story-polaroid{margin-bottom:8px}
 .book-is-open .guest-book-spread[data-chapter=story] .book-inscription{margin-top:6px}
 .book-is-open .guest-book-spread[data-chapter=story] .book-inscription span{margin-top:3px;font-size:18px;line-height:1}
 .book-is-open .guest-book-spread[data-chapter=story] .folio-content{padding-bottom:24px}
}

/* Unevenly aged paper: warm edges, a clear writing area, and lifted corners. */
.guest-book-scene,.magic-scene,.book-opening-bridge{
 --aged-paper:radial-gradient(ellipse 75% 9% at 28% 0%,#b58b3842,transparent 75%),radial-gradient(ellipse 43% 13% at 96% 100%,#a77a3547,transparent 78%),radial-gradient(ellipse 8% 45% at 100% 38%,#bc913b40,transparent 80%),radial-gradient(ellipse 6% 37% at 0% 73%,#a7843335,transparent 80%),radial-gradient(ellipse 44% 8% at 20% 100%,#c49c4440,transparent 80%),repeating-linear-gradient(13deg,#9c7e3106 0 1px,transparent 1px 4px),linear-gradient(90deg,#d6c292 0%,#f6ecd2 4%,#fbf4e3 16%,#faf2dd 83%,#efdfb7 97%,#cfb67d 100%);
}
.book-is-open .folio-right,.book-is-open .folio-left,.folio-strip-face .folio-turn-back,.magic-paper,.book-opening-paper{background-image:var(--aged-paper);background-color:#f7ecd2}
.book-is-open .folio-right{box-shadow:inset 1px 0 7px #7c5c2926,inset -2px 0 3px #9b772a24}
.book-is-open .folio-left{box-shadow:inset -12px 0 19px -12px #70522380,inset 2px 0 6px #b48d3540}
.book-is-open .folio-right:before,.book-is-open .folio-left:before{
 content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
 background:radial-gradient(ellipse 32px 105px at 100% 27%,#a7803420,transparent 80%),radial-gradient(ellipse 66px 19px at 72% 0%,#9c762e26,transparent 80%),radial-gradient(ellipse 48px 15px at 24% 100%,#94702826,transparent 80%);
 box-shadow:inset 0 2px 3px #98733026,inset 0 -3px 5px #9c783329;
}
.book-is-open .folio-right:after,.book-is-open .folio-left:after{
 content:'';position:absolute;right:0;bottom:0;width:36px;height:32px;z-index:2;pointer-events:none;
 clip-path:polygon(100% 0,94% 30%,78% 57%,49% 82%,0 100%,100% 100%);
 background:linear-gradient(139deg,#80602d 0%,#b9a06a 42%,#fdf4d8 54%,#e8d6a6 76%,#b79a5c 100%);
 border-radius:75% 0 7px 0;box-shadow:inset -2px -2px 4px #8b682f38;
}
.book-is-open .folio-left:after{right:auto;bottom:auto;left:0;top:0;width:27px;height:24px;transform:rotate(180deg)}
@media(max-width:700px){.book-is-open .folio-right:after{width:30px;height:27px}}
.capture-options{flex-wrap:wrap;column-gap:10px;row-gap:0}
.folio-content .capture-options .capture-background{max-width:100%;overflow-wrap:anywhere}
.capture-background-panel{max-width:290px;margin:0 auto}
.folio-content .capture-background-panel label{font-size:15px}
.folio-content .capture-background-panel select{width:100%;font-size:16px;padding:6px;min-height:40px}
.folio-content .capture-background-panel .help{font-size:13px;line-height:1.25;margin:5px 0}
.folio-content #camera-area.background-open .camera-box{height:clamp(100px,22svh,180px)}
.folio-content #camera-area.background-open .polaroid-camera.is-live{width:min(100%,240px)}
@media(max-height:620px){.folio-content #camera-area.background-open .camera-box{height:95px}}

/* Personalized covers retain the same dimensions and page-turn geometry. */
.magic-scene .magic-cover .cover-front,.book-opening-cover .cover-front{background:linear-gradient(100deg,#0005,transparent 14%,#fff1 65%,#0002),var(--book-cover-color,#193f35);color:var(--book-cover-ink,#ead8b5)}
.magic-scene .cover-emboss h3,.magic-scene .cover-emboss p,.magic-scene .cover-emboss small,.magic-scene .magic-edition,.magic-scene .magic-foot,.book-opening-cover .cover-emboss h3,.book-opening-cover .cover-emboss p,.book-opening-cover .cover-emboss small{color:var(--book-cover-ink,#ead8b5);text-shadow:none}
.magic-cover .cover-emboss{border-color:currentColor}.magic-cover .magic-emblem svg{stroke:currentColor}.magic-cover .book-model-symbol{font-size:40px;line-height:1.15;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;height:100%;font-family:var(--book-font,Georgia,serif)}
[data-book-model=school] .cover-emboss{border:3px double currentColor;border-radius:5px}.magic-scene[data-book-model=school] .magic-edition{font-size:8px;letter-spacing:.15em}
.magic-scene[data-book-model=notebook] .magic-cover .cover-front,.book-opening-cover[data-book-model=notebook] .cover-front{background:repeating-linear-gradient(0deg,transparent 0 20px,#ffffff16 21px 22px),linear-gradient(90deg,#0005,transparent 16%),var(--book-cover-color,#283d5d)}
[data-book-model=notebook] .cover-emboss{border-radius:2px;border:1px solid currentColor}
[data-book-model=naming] .cover-emboss{border-radius:70px 70px 6px 6px}.magic-scene[data-book-model=naming] .book-model-symbol{font-size:48px}
[data-book-model=birthday] .cover-emboss{border-style:dotted;border-width:2px}.magic-scene[data-book-model=birthday] .book-model-symbol{font-size:70px}
#settings-form input[type=color]{width:100%;height:44px;padding:4px;cursor:pointer}
/* The entire sensor image is visible, including when a group uses landscape. */
.folio-content #camera-area .polaroid-camera.is-live{width:100%;max-width:480px;transform:none}
.folio-content #camera-area .camera-box{height:auto!important;aspect-ratio:var(--camera-ratio,16/9)!important;max-height:42svh;min-height:110px}
.folio-content #camera-area .camera-box video,.folio-content #camera-area .camera-box canvas{object-fit:contain}
.folio-content #camera-area.effects-open .polaroid-camera.is-live,.folio-content #camera-area.background-open .polaroid-camera.is-live{width:100%;max-width:360px}
.camera-group-hint{font-size:13px!important;line-height:1.25!important;text-align:center;margin:4px 0!important}
body:has(.language-bar){padding-top:42px}.language-bar{position:fixed;top:0;left:0;right:0;z-index:1000;height:40px;display:flex;justify-content:center;gap:8px;align-items:center;background:#f7f2e8f2;box-shadow:0 1px 0 #796b4826;backdrop-filter:blur(6px)}
.language-bar button{padding:4px 8px;min-height:34px;background:transparent;border:1px solid transparent;border-radius:5px;display:flex;gap:5px;align-items:center;color:#193f35;font:12px system-ui}
.language-bar button[aria-pressed=true]{border-color:#92794c;background:#fff8}.language-bar svg{width:27px;height:18px;box-shadow:0 0 0 1px #0002}.language-bar button:focus-visible{outline:2px solid #193f35;outline-offset:1px}
.magic-scene .cover-emboss p,.book-opening-cover .cover-emboss p{font-size:10px;line-height:1.25;letter-spacing:.07em;max-width:95%;overflow-wrap:anywhere}
.magic-scene .magic-foot,.book-opening-cover .magic-foot{font-size:7px;line-height:1.3;letter-spacing:.08em;max-width:96%;overflow-wrap:anywhere}
.magic-scene .magic-edition,.book-opening-cover .magic-edition{font-size:8px;line-height:1.3;letter-spacing:.1em;max-width:96%;overflow-wrap:anywhere}
.magic-scene[data-book-model=school] .book-model-symbol,.book-opening-cover[data-book-model=school] .book-model-symbol{font-size:30px;white-space:nowrap;letter-spacing:.08em}
@media(max-width:500px){.magic-scene .cover-emboss p{font-size:8px}.magic-scene .magic-foot{font-size:6px}.magic-scene .magic-edition{font-size:7px}}
.guest-book-scene,.magic-scene{scroll-margin-top:48px}
body:has(.language-bar) .guest-wrap.book-is-open{min-height:calc(100svh - 42px)}
body:has(.language-bar) .book-is-open .guest-book-spread{height:calc(100svh - 58px)}

/* Camera controls overlay the preview; only image pixels enter the recording. */
body:has(.language-bar) .guest-wrap.book-is-open:has(#camera-area:not(.hidden) .is-live){min-height:0}
.book-is-open:has(#camera-area:not(.hidden) .is-live) .guest-book-spread{grid-template-columns:minmax(0,1fr);min-height:0;height:calc(100dvh - 64px)!important}
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-left,
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-progress,
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-content>h1,
.book-is-open:has(#camera-area:not(.hidden) .is-live) .camera-group-hint{display:none}
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-right{padding:6px 10px;min-height:0;overflow:hidden}
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-head{padding-bottom:3px;flex-shrink:0}
.book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-content{display:flex;flex-direction:column;overflow:visible;padding:0;min-height:0}
.folio-content:has(#camera-area:not(.hidden) .is-live)>.guest-panel,
#guest-compose:has(#camera-area:not(.hidden) .is-live){display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.folio-content #camera-area:has(.is-live){position:relative;container-type:size;--camera-controls-height:0px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;flex:1;min-height:0;width:100%;max-width:900px;margin:4px auto 0}
.folio-content #camera-area:has(.is-live) .polaroid-camera.is-live{grid-column:1;grid-row:1;justify-self:center;width:min(100%,calc((100cqh - var(--camera-controls-height) - 18px)*var(--camera-aspect,1.7778) + 14px));height:100%;min-height:0;max-width:none;margin:0;display:flex;animation:none}
.folio-content #camera-area .is-live .polaroid-paper{display:flex;flex-direction:column;flex:1;min-height:0;padding:6px 6px 10px;transform:none}
.folio-content #camera-area .is-live .polaroid-image{flex:1;min-height:0;width:100%}
.folio-content #camera-area .is-live .camera-box{height:100%!important;max-height:none;min-height:0;width:100%;aspect-ratio:auto!important;margin:0;border-radius:0}
.folio-content #camera-area .is-live .camera-box video,.folio-content #camera-area .is-live .camera-box canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.folio-content #camera-area .capture-controls{position:absolute;z-index:3;left:14px;right:14px;bottom:116px;padding:0;min-height:0}
.folio-content #camera-area .capture-start,.folio-content #camera-area .capture-stop{min-height:44px;padding:6px;line-height:1.15;font-size:17px}
.folio-content #camera-area .capture-options{position:absolute;z-index:3;left:14px;right:14px;bottom:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0}
.folio-content #camera-area .capture-options button{width:100%;min-width:0;min-height:44px;padding:5px;font-size:16px;line-height:1.15;white-space:normal;overflow-wrap:anywhere}
.folio-content #camera-area .capture-effects-panel,.folio-content #camera-area .capture-background-panel{position:absolute;z-index:4;left:10px;right:10px;bottom:168px;width:auto;max-width:none;margin:0;padding:10px;background:#fffaf5f5;border:1px solid #aa936b;border-radius:4px;box-shadow:0 3px 14px #0003}
.folio-content #camera-area .capture-status,.folio-content #camera-area .capture-background-panel .help{margin:3px 0;font-size:13px!important;line-height:1.2!important}
.folio-content #camera-area .capture-background-panel label{display:block;margin:0;line-height:1.2}
.folio-content #camera-area select{margin:3px 0;padding:5px;font-size:16px;min-height:40px}
@media(orientation:landscape){
 .guest-wrap.book-is-open:has(#camera-area:not(.hidden) .is-live){padding:0}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .guest-book-scene{padding:0 2px 10px;overflow:hidden}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .guest-book-spread{height:calc(100dvh - 54px)!important;padding:4px 4px 6px}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-right{padding:3px 6px}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-head{position:relative;height:0;min-height:0;padding:0;border:0;z-index:5}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-head>span{display:none}
 .book-is-open:has(#camera-area:not(.hidden) .is-live) .folio-close{position:absolute;right:8px;top:8px;background:#10271f80!important;color:#fffaf0!important;border:1px solid #ffffff66;backdrop-filter:blur(4px);text-shadow:0 1px 3px #000b;padding:4px 8px;min-height:32px}
 .folio-content #camera-area:has(.is-live){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;margin:0 auto}
 .folio-content #camera-area:has(.is-live) .polaroid-camera.is-live{grid-column:1/-1}
 .folio-content #camera-area .capture-controls{left:14px;right:auto;bottom:16px;width:calc(20% - 17px)}
 .folio-content #camera-area .capture-start,.folio-content #camera-area .capture-stop{height:44px;font-size:15px;padding:4px}
 .folio-content #camera-area .capture-start svg{flex-shrink:0;width:19px}
 .folio-content #camera-area .capture-options{left:20%;right:14px;bottom:16px;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .folio-content #camera-area .capture-options button{font-size:15px;padding:3px}
 .folio-content #camera-area .capture-clock{left:7px;right:auto}
 .folio-content #camera-area .capture-effects-panel,.folio-content #camera-area .capture-background-panel{bottom:70px;left:12%;right:12%;padding:6px}
 .folio-content #camera-area .capture-background-panel label{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px;align-items:center}
 .folio-content #camera-area .capture-effects-panel .help:has(+select:not([hidden])){display:none}
}


.folio-content #camera-area .capture-controls button,.folio-content #camera-area .capture-options button{background:#10271f80;color:#fffaf0;border:1px solid #ffffff66;border-radius:5px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);text-shadow:0 1px 3px #000b;box-shadow:0 1px 5px #0002}
.folio-content #camera-area .capture-controls button{border-color:#ffffffe0;background:#10271f99}
.folio-content #camera-area .capture-controls .capture-stop{background:#702b298c;border-color:#ffd2c8;color:#fff}
.folio-content #camera-area .capture-controls button:hover,.folio-content #camera-area .capture-options button:hover{background:#10271fb3}
.folio-content #camera-area .capture-controls button:focus-visible,.folio-content #camera-area .capture-options button:focus-visible{outline:2px solid white;outline-offset:2px}
.folio-content #camera-area .capture-options button:disabled{opacity:.5}

/* In portrait, keep the entire preview clear and place controls on the page. */
@media(orientation:portrait){
 .folio-content #camera-area:has(.is-live){--camera-controls-height:144px;grid-template-rows:minmax(0,1fr) auto auto;gap:4px}
 .folio-content #camera-area .capture-controls{position:static;grid-row:2;width:100%;margin:0}
 .folio-content #camera-area .capture-options{position:static;grid-row:3;margin:0}
 .folio-content #camera-area .capture-controls button,.folio-content #camera-area .capture-options button{background:#fffaf080;color:#193f35;border-color:#193f3555;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:none;box-shadow:none}
 .folio-content #camera-area .capture-controls button{border-color:#193f35a0}
 .folio-content #camera-area .capture-controls .capture-stop{background:#702b29;color:#fff;border-color:#702b29}
 .folio-content #camera-area .capture-controls button:hover,.folio-content #camera-area .capture-options button:hover{background:#eadcc080}
 .folio-content #camera-area .capture-controls button:focus-visible,.folio-content #camera-area .capture-options button:focus-visible{outline-color:#193f35}
 .folio-content #camera-area .capture-effects-panel,.folio-content #camera-area .capture-background-panel{bottom:148px}
}

/* The live camera has its own cancel control; all other compose states share this one. */
#guest-compose .compose-cancel{display:block;margin:8px auto 0;min-height:40px}
#guest-compose:has(#camera-area:not(.hidden) .is-live)>.compose-cancel{display:none}
.folio-content .has-capture .capture-preview-open{position:relative;display:block;width:100%;min-height:0;padding:0;border:0;border-radius:0;overflow:hidden;cursor:zoom-in;background:#10251d}
.capture-preview-zoom{position:absolute;right:6px;bottom:6px;color:#fffaf0;background:#10251d99;padding:2px 6px;border:1px solid #ffffff66;border-radius:3px;font:16px/1.2 Georgia,serif;pointer-events:none}
.capture-lightbox{position:fixed;inset:0;z-index:3000;background:#080e0c;display:flex;align-items:center;justify-content:center;padding:12px}
.capture-lightbox>img,.capture-lightbox>video{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.capture-lightbox-close{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));z-index:2;width:44px;height:44px;min-height:44px;padding:0;font:30px/1 Georgia,serif;color:white;background:#152c24b3;border:1px solid #ffffff88;border-radius:50%}
.capture-lightbox-close:hover{background:#264c3de6}

/* Theme structure remains visible with any personalized cover palette. */
.story-book-preview .draft-story-preview .story-stage{height:clamp(100px,25svh,240px);min-height:0}
.story-book-preview .draft-story-preview .draft-story-controls{gap:6px;margin:8px 0}
.story-book-preview .draft-story-preview .draft-story-controls button{font-size:14px;padding:8px 10px;min-height:38px}
.story-book-preview .draft-story-preview .draft-story-controls time{font-size:12px}
.story-book-preview .draft-story-preview label{font-size:13px;margin:5px 0}
.story-book-preview .draft-story-preview .help{font-size:13px;line-height:1.3;margin:6px 0}
.story-book-preview .folio-content:has(.draft-story-preview){overflow:auto}
.magic-scene .magic-cover .cover-emboss h3{color:var(--book-cover-ink,#ead8b5)}
.magic-scene[data-theme=album] .cover-emboss{border:6px double currentColor;outline:0;border-radius:2px;background:#fff1}
.magic-scene[data-theme=album] .cover-emboss:before,.magic-scene[data-theme=album] .cover-emboss:after{content:'';top:7px;width:15px;height:15px;background:none;border-top:3px solid currentColor;padding:0}
.magic-scene[data-theme=album] .cover-emboss:before{left:7px;border-left:3px solid currentColor}
.magic-scene[data-theme=album] .cover-emboss:after{right:7px;border-right:3px solid currentColor}
.magic-scene[data-theme=album] .magic-rule{width:45%}
.magic-scene[data-theme=cinema] .magic-cover .cover-front:before{content:'';position:absolute;inset:10px 6px;background:repeating-linear-gradient(to bottom,currentColor 0 7px,transparent 7px 16px) left top/6px 100% no-repeat,repeating-linear-gradient(to bottom,currentColor 0 7px,transparent 7px 16px) right top/6px 100% no-repeat;opacity:.65}
.magic-scene[data-theme=cinema] .cover-emboss{inset:17px 21px 16px 25px;border-width:1px 0;outline:0;border-radius:0}
.magic-scene[data-theme=cinema] .cover-emboss:before,.magic-scene[data-theme=cinema] .cover-emboss:after{display:none}
.magic-scene[data-theme=cinema] .magic-rule{width:90%}

.settings-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:24px;align-items:start}
.settings-editor{grid-column:1;grid-row:1;min-width:0;margin:0}
.settings-access{grid-column:1;grid-row:2;min-width:0}
.settings-cover-preview{grid-column:2;grid-row:1 / span 2;position:sticky;top:58px;align-self:start;min-width:0;margin:0;z-index:5;background:var(--paper,#f8f5ec)}
.settings-cover-stage{overflow-wrap:anywhere}
.settings-cover-preview .magic-scene{min-height:450px}
.settings-cover-preview #cover-play{margin-top:8px}
@media(min-width:761px) and (max-height:760px){.settings-cover-stage{zoom:.75}}
@media(max-width:760px){
 .settings-layout{grid-template-columns:minmax(0,1fr);gap:18px}
 .settings-cover-preview{grid-column:1;grid-row:1;top:42px;padding:10px 16px;box-shadow:0 6px 16px #193f351a}
 .settings-editor{grid-row:2}
 .settings-access{grid-row:3}
 .settings-cover-preview .eyebrow{font-size:9px;margin-bottom:0;justify-content:center}
 .settings-cover-stage{zoom:.48}
 .settings-cover-preview .magic-scene{min-height:380px}
 .settings-cover-preview #cover-play{font-size:11px;min-height:32px;padding:6px 12px;margin-top:0}
 .settings-editor input,.settings-editor select{scroll-margin-top:310px}
}
@media(max-width:760px) and (max-height:600px){
 .settings-cover-stage{zoom:.34}
 .settings-cover-preview{padding-block:5px}
 .settings-cover-preview .eyebrow{display:none}
 .settings-cover-preview #cover-play{min-height:26px;padding:3px 8px}
 .settings-editor input,.settings-editor select{scroll-margin-top:210px}
}