.demo-notice{position:fixed;top:0;left:0;right:0;z-index:1000;padding:6px 10px;text-align:center;background:#e7ecdd;color:#324735;border-bottom:1px solid #c8d0bc;font:9px/1.5 Arial,sans-serif;letter-spacing:.3px}body{padding-top:44px}.guest-wrap{min-height:calc(100dvh - 44px)}.demo-camera-note{font-size:10px;text-align:center;color:#69755e;margin:10px 0}.demo-live-label{position:absolute;left:8px;bottom:8px;background:#f8f3e4d9;color:#2d4637;font:9px Arial;padding:5px;border-radius:3px;pointer-events:none}.capture-effects-panel label,.capture-background-panel label{font-size:12px}.capture-clock.is-recording{color:#fff;background:#a12635}.demo-notice a{color:inherit}.demo-camera-demo .capture-options{flex-wrap:wrap}.demo-camera-demo .camera-box{aspect-ratio:3/4}.demo-camera-demo canvas{height:100%;width:100%;display:block}.demo-camera-demo .capture-start{font-size:13px}.demo-camera-demo .capture-stop{font-size:13px}
.demo-camera-demo .camera-box{aspect-ratio:9/16;--camera-ratio:9/16}

/* Keep the original controls, without overlapping the demo notice. */
body:has(.language-bar){padding-top:44px}
.language-bar{top:0;backdrop-filter:none;background:#f7f2e8;height:44px;justify-content:flex-start;gap:4px;padding:5px 8px}
body:has(.language-bar) .guest-wrap{min-height:calc(100svh - 44px)}
body:has(.language-bar) .book-is-open .guest-book-spread{height:calc(100svh - 60px)}
html{scroll-behavior:auto;scrollbar-gutter:stable}
/* Stable media geometry: playback never resizes or rotates the video surface. */
.folio-content button.story-polaroid,.folio-content button.story-polaroid:hover,.folio-content button.story-polaroid.is-playing{width:min(100%,340px);transform:none;transition:none}
.story-polaroid .story-stage{aspect-ratio:16/9}
.story-polaroid .story-picture video{object-fit:contain;transform:translateZ(0)}
#guest-story-preview{min-height:calc((100vw - 70px)*.5625 + 84px)}
.guest-book-spread,.folio-content,.polaroid-camera.is-live{animation:none}
.folio-strip-face{filter:none!important}
/* A capped canvas draw loop avoids competing with video decode and browser painting. */
@media(max-height:620px){.folio-content button.story-polaroid,.folio-content button.story-polaroid:hover,.folio-content button.story-polaroid.is-playing{width:min(100%,290px)}}

/* One scroll owner: the book page. A swipe must never scroll the iframe
   document and its parent at the same time or resize the camera surface. */
html{height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto}
body:has(.language-bar){height:100%;box-sizing:border-box;overflow:hidden}
#app{height:100%;overflow-y:auto;overscroll-behavior-y:contain;overflow-anchor:none}
#app:has(.book-is-open){overflow:hidden}
#app .guest-wrap.book-is-open{height:100%;min-height:0;padding:4px 2px 8px}
.book-is-open .guest-main,.book-is-open .guest-book-scene{height:100%;min-height:0}
#app .book-is-open .guest-book-spread{height:100%!important;min-height:0}
.book-is-open .folio-right{min-height:0;overflow:hidden}
.book-is-open .folio-content{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;overflow-anchor:none;touch-action:pan-y pinch-zoom;scroll-behavior:auto}
.book-is-open .folio-content:has(#camera-area:not(.hidden) .is-live){overflow:hidden}
.demo-book-opening .guest-book-spread{visibility:hidden}

/* A persistent exit from every demo step; top-level navigation also leaves the phone frame. */
.demo-notice{height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;text-align:left}.demo-notice .demo-close{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:5px 12px;border:1px solid #324735;border-radius:6px;background:#fffdf8;color:#203d34;font:600 12px/1.3 Arial,sans-serif;letter-spacing:0;text-decoration:none;white-space:nowrap}.demo-close:hover{background:#f4efdF}.demo-close:focus-visible{outline:3px solid #9f7c42;outline-offset:2px}
.language-bar button{flex:0 0 auto}
.language-bar .demo-close{position:static;flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:5px 10px;border:1px solid #b7a783;border-radius:5px;background:transparent;color:#203d34;font:12px/1.3 Arial,sans-serif;text-decoration:none;white-space:nowrap}
@media(max-width:340px){
 .language-bar{gap:2px;padding-inline:6px}
 .language-bar button{padding-inline:3px;gap:3px;font-size:11px}
 .language-bar svg{width:22px;height:15px;flex-shrink:0}
 .language-bar .demo-close{gap:4px;padding-inline:7px;font-size:11px}
}
@media(max-width:260px){.language-bar button span{display:none}}

/* Fit the welcome screen inside the phone, including its two opening controls. */
#app .guest-wrap:has(.guest-opening-layout){height:100%;min-height:0;display:flex;flex-direction:column;padding:12px 14px 10px}
#app .guest-wrap:has(.guest-opening-layout) .guest-logo{flex:0 0 auto;height:clamp(40px,10vh,70px);margin-bottom:10px}
#app .guest-wrap:has(.guest-opening-layout) .guest-logo .brand-logo{width:auto;max-width:100%;height:100%;object-fit:contain}
#app .guest-opening-layout{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
#app .guest-opening-layout .opening-with-qr{flex:1;min-height:0;width:100%;display:flex;align-items:stretch}
#app .guest-opening-layout .opening-with-qr>div:first-child{flex:1;min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
#app .guest-opening-layout .eyebrow{margin:0;text-align:center;font-size:10px;line-height:1.4}
#app .guest-opening-layout .magic-scene{height:100%;min-height:0;grid-template: minmax(0,1fr) / minmax(0,1fr)}
#app .guest-opening-layout .magic-book{scale:var(--demo-book-scale,1)}
#app .guest-opening-layout .book-opening-hint{margin:4px 0;font-size:13px;line-height:1.4}
#app .guest-opening-layout #skip-intro{min-height:32px;padding:4px 8px;margin:0;font-size:12px;line-height:1.4}

/* The paper uses the available screen; navigation lives on its outer edges. */
#app .guest-wrap.book-is-open{height:var(--book-available-height,calc(100dvh - 42px));min-height:0!important;padding:2px 2px 8px;box-sizing:border-box}
#app .book-is-open .guest-main.guest-book-layout{height:100%;min-height:0;margin:0 auto}
#app .book-is-open .guest-book-scene{height:100%;min-height:0;padding:0 0 6px;box-sizing:border-box}
#app .book-is-open .guest-book-spread{height:100%!important;min-height:0;padding-top:6px;padding-bottom:10px}
#app .book-is-open .folio-right{height:100%;min-height:0;overflow:hidden;padding:10px 36px 12px}
#app .book-is-open .folio-head{min-height:30px;padding-bottom:4px;gap:8px;flex:0 0 auto}
#app .book-is-open .folio-head>span{font-size:clamp(10px,2.7vw,13px)}
#app .book-is-open .folio-content{container-type:size;container-name:book-page;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0;padding:10px 1px 4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.book-edge-navigation{display:block;position:absolute;inset:0;pointer-events:none;z-index:18}
.book-page-arrow{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;display:grid;place-items:center;width:34px;min-width:34px;height:64px;min-height:44px;margin:0;padding:0;border:1px solid #b99b5855;border-radius:4px;background:var(--book-cover-color,#193f35);color:var(--book-cover-ink,#ead8b5);font:38px/1 'Memories Garamond',Georgia,serif;box-shadow:0 2px 8px #1c231d20;touch-action:manipulation}
.book-page-arrow[data-direction=back]{left:0}.book-page-arrow[data-direction=forward]{right:0}
.book-page-arrow:hover{background:var(--book-cover-color,#193f35);filter:brightness(1.12)}
.book-page-arrow:focus-visible{outline:2px solid var(--book-cover-ink,#ead8b5);outline-offset:2px}
.book-page-arrow:disabled{opacity:.24;cursor:default;filter:none}
#app .book-is-open .folio-content h1{font-size:clamp(24px,7cqh,38px)!important;line-height:1.05;margin:0;flex:0 0 auto}
#app .book-is-open .folio-content>.guest-panel{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:0;background:none;border:0;box-shadow:none}
#app .book-is-open .folio-content .guest-panel>h1{margin:0 0 8px}
#app .book-is-open .folio-content .guest-choice-invitation{margin:0 0 8px;font-size:clamp(16px,4cqh,20px);line-height:1.2}
#app .book-is-open .book-choice-inscriptions{flex:1;min-height:0;width:100%;margin:0 auto;gap:0;justify-content:center}
#app .book-is-open .book-choice-inscriptions button{flex:0 1 100px;min-height:52px;padding:8px 4px;gap:12px}
#app .book-is-open .book-choice-inscriptions button>span{font-size:clamp(21px,5.5cqh,27px);line-height:1.1}
#app .book-is-open .book-choice-inscriptions small{font-size:clamp(13px,3.3cqh,16px);line-height:1.15;margin-top:3px}
#app .book-is-open .book-choice-inscriptions svg{width:25px;height:25px;flex-shrink:0}
#app .book-is-open [data-chapter=story] .folio-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
#app .book-is-open .folio-content #guest-story-preview,#app .book-is-open .folio-content #story-book-preview-player{min-height:0;height:100%;display:grid;place-items:center}
#app .book-is-open .folio-content .story-player-shell:not(.is-expanded){min-height:0;max-height:100%}
#app .book-is-open .folio-content button.story-polaroid:not(.is-playing),#app .book-is-open .folio-content button.story-polaroid.is-playing{width:min(95%,calc(52cqh * 1.333),400px);max-width:100%;margin:0 auto;padding:8px 8px 0}
#app .book-is-open .folio-content .story-polaroid-label{font-size:clamp(16px,4cqh,20px);padding:8px 2px 12px}
#app .book-is-open .folio-content button.book-inscription{font-size:clamp(21px,5.8cqh,29px);line-height:1.1;margin:0;padding:4px 0}
#app .book-is-open .book-inscription span{margin-top:2px;font-size:17px;line-height:1}
#app .book-is-open .folio-content #guest-compose{display:flex;flex-direction:column;flex:1;min-height:0;margin:0;gap:8px}
#app .book-is-open .folio-content .greeting-details:not(.hidden){display:flex;flex-direction:column;flex:1;min-height:0;margin:0;padding:0;border:0;gap:6px}
#app .book-is-open .folio-content .greeting-details>label:not(.check){display:flex;flex-direction:column;flex:1;min-height:0;margin:0;font-size:18px;line-height:1.25;gap:5px}
#app .book-is-open .folio-content textarea{flex:1;min-height:64px;height:auto;max-height:none;margin:0;resize:none;padding:10px;font-size:18px;line-height:1.3}
#app .book-is-open .folio-content .greeting-details>.check{flex:0 0 auto;align-items:flex-start;margin:0;font-size:15px;line-height:1.2}
#app .book-is-open .folio-content .help{flex:0 0 auto;margin:0;font-size:14px;line-height:1.25}
#app .book-is-open .folio-content #greeting-next{flex:0 0 auto;min-height:44px;padding:8px;font-size:19px;line-height:1.15}
#app .book-is-open .folio-content .compose-cancel{flex:0 0 auto;min-height:32px;padding:2px;font-size:17px;line-height:1.15}
#app .book-is-open .folio-content #recording-preview:empty{display:none}
#app .book-is-open .folio-content #camera-area:not(:has(.is-live)):not(.hidden){flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:8px}
#app .book-is-open .folio-content .polaroid-camera.polaroid-ready{width:min(100%,220px,48cqh);max-width:100%;margin:4px auto}
#app .book-is-open .folio-content .polaroid-ready .polaroid-placeholder{gap:8px;padding:12px}
#app .book-is-open .folio-content .polaroid-ready .polaroid-caption{padding:8px 2px 12px;min-height:35px}
#app .book-is-open .folio-content .has-capture #recording-preview{flex:0 0 auto;min-height:0;gap:12px;margin:0}
#app .book-is-open .folio-content .has-capture .polaroid-saved{flex:0 1 150px;max-width:150px;margin:0}
#app .book-is-open .folio-content .has-capture .polaroid-saved .polaroid-image{height:clamp(70px,23cqh,140px)}
#app .book-is-open .folio-content .has-capture .polaroid-caption{padding:5px 2px;min-height:0}
#app .book-is-open .folio-content .has-capture .polaroid-caption strong{font-size:14px}
#app .book-is-open #guest-thanks{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:center;gap:10px;padding:8px 0}
#app .book-is-open #guest-thanks p{margin:0}
#app .book-is-open .folio-content>.eyebrow{margin:0;font-size:12px;line-height:1.2}
/* Camera and fullscreen media keep their existing controls and full sensor view. */
#app .book-is-open .folio-content:has(#camera-area:not(.hidden) .is-live){display:flex;overflow:hidden;padding:0;container-type:normal}
#app .book-is-open .folio-content .story-player-shell.is-expanded button.story-polaroid.is-playing{width:100%;max-width:none;height:100%;padding:0}
.guest-portrait-rotated #app .guest-wrap.book-is-open{height:calc(var(--guest-portrait-height) - 42px)}
@container book-page (max-height:360px){.book-choice-inscriptions button{padding-block:4px!important}.story-invitation{font-size:24px!important}.polaroid-saved .polaroid-caption{display:none}}

/* A short landscape page uses both halves for the message and its preview. */
@media(orientation:landscape) and (max-height:520px){
#app .book-is-open .guest-book-spread[data-chapter=create]{grid-template-columns:minmax(0,1fr)}
#app .book-is-open [data-chapter=create]>.folio-left{display:none}
#app .book-is-open [data-chapter=create] .folio-content{gap:5px;padding-top:5px}
#app .book-is-open [data-chapter=create] .folio-content>h1{font-size:24px!important}
#app .book-is-open .folio-content #guest-compose:not(:has(#camera-area:not(.hidden))){display:grid;grid-template-columns:minmax(0,1fr) 140px;grid-template-rows:minmax(0,1fr) 40px;gap:5px 12px}
#app .book-is-open .folio-content #guest-compose:not(.has-capture):not(:has(#camera-area:not(.hidden))) .greeting-details{grid-column:1/-1;grid-row:1}
#app .book-is-open .folio-content #guest-compose.has-capture:not(:has(#camera-area:not(.hidden))){grid-template-columns:minmax(120px,25%) minmax(0,1fr)}
#app .book-is-open .folio-content .has-capture #recording-preview{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:4px;justify-content:center;min-height:0}
#app .book-is-open .folio-content .has-capture #recording-preview .polaroid-saved{flex:0 1 auto;width:110px;max-width:110px;padding:4px}
#app .book-is-open .folio-content .has-capture .polaroid-saved .polaroid-image{height:clamp(48px,25cqh,80px)}
#app .book-is-open .folio-content .has-capture #recording-preview>button{flex:0 0 auto;min-height:32px;padding:4px 8px;font-size:15px}
#app .book-is-open .folio-content .has-capture .greeting-details{grid-column:2;grid-row:1}
#app .book-is-open .folio-content .greeting-details{gap:3px}
#app .book-is-open .folio-content .greeting-details>label:not(.check){font-size:16px;gap:3px}
#app .book-is-open .folio-content textarea{min-height:44px;padding:6px;font-size:16px}
#app .book-is-open .folio-content .greeting-details>.check{font-size:13px}
#app .book-is-open .folio-content .help{font-size:12px}
#app .book-is-open .folio-content #greeting-next{grid-column:2;grid-row:2;min-height:40px;padding:5px;font-size:17px}
#app .book-is-open .folio-content .compose-cancel{grid-column:1;grid-row:2;min-height:40px;padding:5px;font-size:17px;margin:0}
}

@media(orientation:landscape) and (max-height:520px){
#app .book-is-open .guest-book-spread[data-chapter=choose]{grid-template-columns:minmax(0,1fr)}
#app .book-is-open [data-chapter=choose]>.folio-left{display:none}
#app .book-is-open .book-choice-inscriptions{flex-direction:row;align-items:stretch;gap:10px}
#app .book-is-open .book-choice-inscriptions button{flex:1;min-width:0;min-height:52px;flex-direction:column;justify-content:center;text-align:center;gap:5px}
#app .book-is-open .book-choice-inscriptions button>span{font-size:21px}
#app .book-is-open .book-choice-inscriptions small{font-size:13px}
}

/* Message fields keep their natural height. Only the paper scrolls when a
   translation or a short desktop phone needs more room; controls never shrink
   through the textarea or the sharing consent. Live camera layout is separate. */
#app .book-is-open [data-chapter=create] .folio-content:not(:has(#camera-area:not(.hidden) .is-live)){display:block;overflow-y:auto}
#app .book-is-open [data-chapter=create] .folio-content:not(:has(#camera-area:not(.hidden) .is-live))>h1{font-size:clamp(24px,6cqh,32px)!important;margin-bottom:12px}
#app .book-is-open .folio-content:not(:has(#camera-area:not(.hidden) .is-live))>.guest-panel:has(#guest-compose){display:block;flex:none;min-height:auto}
#app .book-is-open .folio-content #guest-compose:not(:has(#camera-area:not(.hidden) .is-live)){display:flex;flex:none;min-height:min-content;gap:12px}
#app .book-is-open .folio-content #guest-compose .greeting-details:not(.hidden){display:flex;flex-direction:column;flex:none;min-height:min-content;min-width:0;gap:12px}
#app .book-is-open .folio-content .greeting-details>label:not(.check){display:block;flex:none;min-height:auto;font-size:17px;line-height:1.3}
#app .book-is-open .folio-content .greeting-details textarea{display:block;flex:none;width:100%;height:84px;min-height:84px;margin-top:6px;font-size:16px;line-height:1.35}
#app .book-is-open .folio-content .greeting-details>.check{display:flex;flex:none;gap:8px;min-height:min-content;font-size:14px;line-height:1.35}
#app .book-is-open .folio-content .greeting-details>.check input{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0}
#app .book-is-open .folio-content .has-capture #recording-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;flex:none;min-height:0}
#app .book-is-open .folio-content .has-capture #recording-preview .polaroid-saved{width:100%;max-width:84px;min-width:0;justify-self:center;padding:4px}
#app .book-is-open .folio-content .has-capture .polaroid-saved .polaroid-image{height:clamp(60px,13cqh,100px);min-height:0}
#app .book-is-open .folio-content .has-capture .polaroid-caption{display:none}
#app .book-is-open .folio-content .has-capture .polaroid-image :is(img,video){object-fit:contain}
#app .book-is-open .folio-content .has-capture #recording-preview>button{min-width:0;white-space:normal;padding:6px;font-size:14px;min-height:36px}
#app .book-is-open [data-chapter=create] .folio-content:not(:has(#camera-area:not(.hidden) .is-live)):has(.has-capture)>h1{font-size:clamp(20px,5cqh,28px)!important;line-height:1.15;margin-bottom:6px}
#app .book-is-open .folio-content #guest-compose.has-capture:not(:has(#camera-area:not(.hidden) .is-live)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
#app .book-is-open .folio-content #guest-compose.has-capture .greeting-details:not(.hidden){grid-column:1/-1;gap:6px}
#app .book-is-open .folio-content #guest-compose.has-capture #recording-preview{grid-column:1/-1}
#app .book-is-open .folio-content #guest-compose.has-capture #compose-error:empty{display:none}
#app .book-is-open .folio-content .has-capture .greeting-details>label:not(.check){font-size:14px;line-height:1.25}
#app .book-is-open .folio-content .has-capture .greeting-details textarea{height:clamp(48px,12cqh,80px);min-height:48px;margin-top:4px}
#app .book-is-open .folio-content .has-capture .greeting-details>.check{font-size:12px;line-height:1.3}
#app .book-is-open .folio-content .has-capture .greeting-details>.help{font-size:12px;line-height:1.25}
#app .book-is-open .folio-content .has-capture #greeting-next{min-height:36px;padding:6px;font-size:17px}
#app .book-is-open .folio-content #guest-compose.has-capture .compose-cancel{min-height:36px;padding:3px;font-size:15px;margin:0;width:100%}
#app .book-is-open .folio-right:has(#guest-compose.has-capture){padding-right:12px}
#app .book-is-open [data-chapter=create] .book-page-arrow[data-direction=forward]:disabled{display:none}
#app .book-is-open .folio-content .has-capture .polaroid-saved .polaroid-paper{padding:0}
@media(max-width:340px){
 #app .book-is-open .folio-head .folio-close{font-size:0!important;min-width:28px;min-height:28px;padding:3px;white-space:nowrap}
 #app .book-is-open .folio-head .folio-close::after{content:'×';font-size:22px;line-height:1}
}
/* Recording must remain legible while the pointer is over the stop control. */
.folio-content #camera-area .capture-controls .capture-stop:hover{background:#702b29;color:#fff;border-color:#702b29}
.folio-content #camera-area .capture-clock{top:7px;bottom:auto;left:7px;right:auto;z-index:2;max-width:calc(100% - 65px)}
#app .folio-content .story-player-shell:not(.is-expanded)>.story-fullscreen{background:#fffaf0;color:#193f35;border:1px solid #9b835c;min-height:36px;padding:6px 8px;font-size:14px;text-shadow:none}
#app .folio-content .story-player-shell:not(.is-expanded)>.story-fullscreen:hover{background:#eadcc0;color:#193f35}
@container book-page (max-height:460px){
 #app .book-is-open [data-chapter=create] .folio-content:not(:has(#camera-area:not(.hidden) .is-live)):has(#guest-compose)>h1{font-size:20px!important;line-height:1.15;margin-bottom:2px}
 #app .book-is-open .folio-content #guest-compose:not(:has(#camera-area:not(.hidden) .is-live)):has(.greeting-details:not(.hidden)){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}
 #app .book-is-open .folio-content #guest-compose .greeting-details:not(.hidden){grid-column:1/-1;gap:4px}
 #app .book-is-open .folio-content #guest-compose:not(.has-capture) .greeting-details>label:not(.check){font-size:14px;line-height:1.25}
 #app .book-is-open .folio-content #guest-compose:not(.has-capture) .greeting-details textarea{height:64px;min-height:64px;margin-top:4px}
 #app .book-is-open .folio-content #guest-compose .greeting-details>.check{font-size:12px;line-height:1.3}
 #app .book-is-open .folio-content #guest-compose .greeting-details>.help{font-size:12px;line-height:1.25}
 #app .book-is-open .folio-content #guest-compose #compose-error:empty{display:none}
 #app .book-is-open .folio-content #guest-compose #greeting-next{min-height:36px;padding:6px;font-size:17px}
 #app .book-is-open .folio-content #guest-compose .compose-cancel{min-height:36px;padding:3px;font-size:15px;margin:0;width:100%}
}