/* Reuse the live demos inside a device, with the same state when enlarged. */
.device-demo{min-width:0;width:100%;container-type:inline-size}.home-book-stage{min-width:0}.device-options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px}.device-switch{display:flex;gap:3px;padding:4px;border:1px solid #cfdbcd;border-radius:40px;background:#ffffffa8}.device-options button{border:0;background:transparent;font:500 12px/1.3 inherit;color:#4c6051;min-height:36px;padding:8px 14px;border-radius:30px;cursor:pointer}.device-switch button[aria-pressed=true]{background:#2d533c;color:white;box-shadow:0 2px 6px #244a3320}.device-options .device-expand{display:flex;align-items:center;gap:7px;padding:8px 5px;white-space:nowrap}.device-expand svg{width:17px;height:17px}.device-body{position:relative;aspect-ratio:4/3;border:12px solid #25292a;border-radius:30px;background:#25292a;box-shadow:0 0 0 1px #73777b,0 0 0 3px #aeb2b2,0 20px 35px -20px #23362780;margin:3px;width:calc(100% - 6px);transition:aspect-ratio .3s ease}.device-screen{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#e8f0e7;isolation:isolate;container-type:size}.device-camera{position:absolute;left:50%;top:-8px;width:4px;height:4px;border-radius:100%;background:#090f12;box-shadow:0 0 0 1px #343d43}.device-home-indicator{position:absolute;bottom:4px;left:43%;width:14%;height:3px;border-radius:10px;background:#ffffffba;pointer-events:none;z-index:10}.device-demo[data-device=iphone] .device-body{aspect-ratio:2.16;border-width:9px 16px;border-radius:36px}.device-demo[data-device=iphone] .device-screen{border-radius:24px}.device-demo[data-device=iphone] .device-camera{top:39%;left:-9px;height:22%;width:5px;border-radius:8px}.device-footnote{font-size:11px!important;text-align:center;color:#657568;margin:14px 0 0!important}.device-demo button:focus-visible{outline:3px solid #4281aa;outline-offset:3px}
/* The reading picture fills the device; controls sit on top, as in the App. */
.device-screen .inline-reader{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;background:#f7f1de;overflow:hidden;perspective:1500px;touch-action:pan-y;user-select:none;-webkit-user-select:none}.device-screen .inline-reader figure{position:absolute;inset:0;padding:0;margin:0;border-radius:0;background:#f7f1de;overflow:hidden}.device-screen .inline-reader figure img{width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center;pointer-events:none}.device-screen .inline-reader-controls{position:absolute;z-index:3;bottom:5%;left:3%;right:3%;padding:0;display:grid;grid-template-columns:42px 1fr 42px;gap:10px;align-items:center;text-align:center}.device-screen .inline-reader-controls>button{background:#fffcf1e8;color:#426243;border:1px solid #d3d9bc;width:42px;height:42px;min-height:42px;border-radius:50%;box-shadow:0 3px 6px #46512820;font-size:25px;padding:0;cursor:pointer}.device-screen .inline-reader-controls>button:disabled{opacity:.25;cursor:default}.device-screen .inline-reader-controls>div{display:flex;gap:10px;align-items:center;justify-content:center;justify-self:center;padding:8px 16px;border-radius:28px;background:#fffdf1eb;box-shadow:0 3px 9px #3a4f2520;max-width:100%}.device-screen .inline-reader [data-reader-sentence]{font:clamp(13px,3.4cqw,27px)/1.25 Georgia,serif;color:#344e31;margin:0}.device-screen .reader-meta{margin:0;display:flex;gap:0}.device-screen .reader-meta button{height:34px;width:34px;min-width:34px;border-radius:50%;background:transparent;border:0;cursor:pointer;color:#416a45;padding:6px}.device-screen .reader-meta button svg{width:100%;height:100%}.device-screen .reader-meta button.is-playing{background:#e5f3ff;color:#286089}.device-screen [data-reader-count]{position:absolute;right:0;bottom:calc(100% + 12px);border-radius:18px;background:#fffdf1df;padding:4px 9px;color:#4b6148;font:11px/1.4 system-ui}.device-screen .reader-status{position:absolute;z-index:4;top:12px;left:15%;right:15%;margin:0;border-radius:16px;background:#fffcf1ef;color:#485c3e;text-align:center;font-size:12px;padding:8px}.device-screen .reader-status:empty{display:none}.reader-turn-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;background:#fffbed;transform-origin:left center;backface-visibility:hidden;box-shadow:18px 0 35px #18251435}.reader-turn-layer img{width:100%;height:100%;object-fit:cover}.reader-turn-layer:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#fdf8df55 89%,#52411c44);pointer-events:none}.reader-turn-caption{position:absolute;bottom:6%;left:17%;right:17%;border-radius:30px;background:#fffdf1eb;color:#344e31;text-align:center;padding:9px;font:clamp(13px,3.4cqw,27px)/1.25 Georgia,serif}
/* Wash is composed as a full scene, with compact floating prompts and tools. */
.device-screen .demo-shell{position:absolute;inset:0;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;background:#e5efe8}.device-screen .demo-start{position:absolute;inset:0;height:100%;padding:0;display:block;background:#e5efe8 url('/assets/media/wash-bathroom-sink-web-v1.webp') center/cover}.device-screen .demo-start>img{position:absolute;width:auto;height:100%;max-width:85%;object-fit:contain;left:50%;top:0;transform:translateX(-50%);margin:0;border:0;border-radius:0}.device-screen .demo-start>div{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);top:auto;width:max-content;max-width:85%;text-align:center}.device-screen .demo-start h2,.device-screen .demo-start p{display:none}.device-screen .demo-start .btn{background:#386348;color:#fff;border:3px solid white;box-shadow:0 4px 14px #20382535;border-radius:30px;min-height:44px;font-size:clamp(13px,2.4cqw,18px);padding:8px 24px;margin:0;white-space:nowrap}.device-screen #wash-active{position:absolute;inset:0}.device-screen .demo-toolbar{position:absolute;inset:0 0 auto;z-index:5;background:transparent;border:0;padding:12px;gap:6px}.device-screen .demo-toolbar>span{background:#fffdf3e8;border-radius:20px;padding:6px 10px;font-size:12px}.device-screen .demo-toolbar button{font-size:11px;min-height:34px;padding:6px 10px;background:#fffdf3e8}.device-screen .wash-play{display:block;height:100%}.device-screen .wash-scene{position:absolute;inset:0;max-height:none;height:100%;display:block;background-position:center}.device-screen .bear-zone{position:absolute;left:0;bottom:0;height:96%;width:auto;max-width:74%;max-height:none;aspect-ratio:1;margin:0;touch-action:none}.device-screen .sink-edge{height:7%;z-index:0}.device-screen .wash-guidance{position:absolute;top:19%;right:3%;bottom:9%;width:29%;padding:12px;border-radius:18px;background:#fffdf1e8;display:flex;align-items:stretch;box-shadow:0 3px 10px #3f4c291a;overflow:auto;scrollbar-width:thin}.device-screen #wash-step-label{font-size:10px;margin:0 0 6px}.device-screen .wash-guidance h2{font-size:clamp(13px,2.6cqw,21px);line-height:1.35;margin:0}.device-screen .wash-guidance>p[lang=en]{font:clamp(12px,2.4cqw,19px)/1.3 Georgia,serif;margin:8px 0 6px;min-height:0}.device-screen .demo-feedback{font-size:clamp(10px,1.65cqw,12px);line-height:1.5;margin:0 0 8px;min-height:0}.device-screen .wash-tools{grid-template-columns:1fr 1fr;gap:5px;margin-top:auto}.device-screen .wash-tools button{padding:3px;min-height:0;border-radius:10px}.device-screen .wash-tools img{height:clamp(22px,5.5cqw,43px)}.device-screen .wash-tools span{font-size:10px}.device-screen .wash-progress{margin:7px 0;min-height:9px;gap:4px}.device-screen .wash-progress span{font-size:10px}.device-screen .wash-guidance>.btn{font-size:clamp(10px,1.8cqw,13px);min-height:32px;padding:6px 4px;margin:0;width:100%;line-height:1.4}.device-screen .wash-guidance>.btn+.btn{margin-top:5px}.device-screen #wash-target{min-height:36px;min-width:70px;font-size:clamp(10px,2cqw,14px);padding:5px;border-width:2px}.device-screen .demo-complete{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#eff8ec}.device-screen .demo-complete>img{height:32%;width:auto;margin:0 0 10px}.device-screen .demo-complete h2{font-size:clamp(20px,4cqw,31px);margin:0}.device-screen .demo-complete p{font-size:13px;margin:5px 0}.device-screen .demo-complete .actions{margin:10px 0 0;gap:10px}.device-screen .demo-complete .btn{font-size:12px;min-height:36px;padding:7px 14px}.device-demo[data-device=iphone] .wash-guidance{top:18%;bottom:6%;padding:9px;width:32%}.device-demo[data-device=iphone] #wash-step-label{display:none}.device-demo[data-device=iphone] .wash-tools{grid-template-columns:repeat(4,1fr)}.device-demo[data-device=iphone] .wash-tools span{display:none}.device-demo[data-device=iphone] .wash-tools img{height:clamp(24px,4cqw,37px)}.device-demo[data-device=iphone] .demo-feedback{font-size:10px}.device-demo[data-device=iphone] .demo-toolbar{padding:8px 12px}.device-demo[data-device=iphone] .bear-zone{left:7%;height:100%;max-width:60%}
/* Dialog also works as a viewport-filling fallback when native fullscreen is unavailable. */
.device-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#eef3e9;color:#304c39;overflow:auto}.device-dialog::backdrop{background:#eef3e9}.device-dialog[open]{display:flex;flex-direction:column}.device-dialog-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;gap:15px;min-height:56px;flex:0 0 auto;font-size:13px}.device-dialog-bar button{border:1px solid #c1cfc1;border-radius:25px;color:#34533b;background:#fffdf7;min-height:40px;padding:7px 18px;font-size:13px;cursor:pointer}.device-dialog-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 24px 24px;min-height:0}.device-dialog .device-demo{width:min(100%,calc((100dvh - 155px)*1.3333));margin:auto}.device-dialog .device-demo[data-device=iphone]{width:min(100%,calc((100dvh - 155px)*2.16))}.device-dialog .device-expand,.device-dialog .device-footnote{display:none}.device-dialog .device-options{justify-content:center;margin-bottom:12px}.device-dialog .device-body{box-shadow:0 0 0 1px #73777b,0 0 0 3px #aeb2b2,0 15px 30px -20px #23362780}.device-dialog .device-screen .wash-guidance{max-width:300px}
@container(max-width:480px){.device-options{gap:4px}.device-options button{font-size:11px;padding:7px 10px;min-height:36px}.device-options .device-expand{padding-inline:0;font-size:11px}.device-body{border-width:8px;border-radius:22px}.device-screen{border-radius:13px}.device-camera{top:-6px;width:3px;height:3px}.device-screen .inline-reader-controls{grid-template-columns:32px 1fr 32px;gap:5px;bottom:6%}.device-screen .inline-reader-controls>button{width:32px;height:32px;min-height:32px;font-size:22px}.device-screen .inline-reader-controls>div{padding:6px 8px;gap:4px}.device-screen .reader-meta button{width:26px;height:26px;min-width:26px;padding:4px}.device-screen .demo-toolbar{padding:7px 6px;gap:3px}.device-screen .demo-toolbar button{padding:4px 6px;min-height:29px;font-size:9px}.device-screen .demo-toolbar>span{font-size:10px;padding:4px 6px}.device-screen .wash-guidance{padding:7px;top:19%;right:2%;bottom:5%;width:34%;border-radius:12px}.device-screen #wash-step-label,.device-screen .demo-feedback{display:none}.device-screen .wash-tools img{height:26px}.device-screen .wash-tools span{font-size:9px}.device-screen .wash-guidance>.btn{font-size:10px;min-height:30px}.device-screen .wash-guidance>p[lang=en]{font-size:12px;margin:6px 0}.device-screen .demo-complete p{font-size:11px}.device-screen .demo-complete .actions{gap:5px}.device-screen .demo-complete .btn{font-size:10px;padding:5px 9px}.device-demo[data-device=iphone] .device-body{border-width:6px 12px;border-radius:25px}.device-demo[data-device=iphone] .device-screen{border-radius:18px}.device-demo[data-device=iphone] .device-camera{left:-7px}.device-demo[data-device=iphone] .wash-guidance{top:23%;bottom:4%;padding:6px}.device-demo[data-device=iphone] .wash-guidance h2{font-size:11px}.device-demo[data-device=iphone] .wash-guidance>p[lang=en]{font-size:10px}.device-demo[data-device=iphone] .wash-tools img{height:22px}.device-demo[data-device=iphone] .wash-tools{gap:3px}.device-demo[data-device=iphone] .wash-guidance>.btn{font-size:9px;min-height:24px}.device-demo[data-device=iphone] .demo-toolbar button{min-height:23px}.device-demo[data-device=iphone] .demo-toolbar{padding:5px 9px}.device-demo[data-device=iphone] .wash-progress{margin:4px 0}.device-demo[data-device=iphone] .inline-reader-controls>div{padding:4px 7px}.device-demo[data-device=iphone] .inline-reader-controls{bottom:7%}}
@media(max-width:620px){.device-dialog-stage{padding:8px 10px 20px}.device-dialog-bar{padding:10px 12px}.device-dialog-bar span{font-size:11px}.device-dialog .device-demo{width:100%}.device-dialog .device-demo[data-device=iphone]{width:100%}}
@media(prefers-reduced-motion:reduce){.device-body{transition:none}}
.device-rotate-hint{display:none}.device-options button{font-family:inherit;font-size:12px;line-height:1.3;font-weight:500}.device-dialog-bar button:focus-visible{outline:3px solid #4281aa;outline-offset:3px}
@media(max-width:620px) and (orientation:portrait){.device-rotate-hint{display:block;position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;color:#657568;margin:0;pointer-events:none}}
.device-screen .wash-guidance{bottom:auto;max-height:73%}.device-screen .wash-tools{margin-top:10px}.device-demo[data-device=iphone] .wash-guidance{bottom:auto;max-height:76%}
@container(max-width:480px){.device-screen .wash-tools{margin-top:6px}.device-demo[data-device=iphone] .wash-guidance{max-height:72%}}
.device-screen .wash-guidance>*{flex-shrink:0}
@container(max-width:480px){.device-screen .wash-guidance{top:18%;max-height:80%}.device-screen .wash-tools img{height:22px}.device-screen .wash-tools button{line-height:1;padding:3px}.device-screen .wash-tools span{line-height:1.25}.device-screen .wash-tools:has(button[aria-pressed=true]){grid-template-columns:1fr}.device-screen .wash-tools:has(button[aria-pressed=true]) button:not([aria-pressed=true]){display:none}.device-demo[data-device=iphone] .wash-guidance{top:23%;max-height:74%}.device-demo[data-device=iphone] .wash-guidance h2{display:none}}
@media(max-height:500px) and (orientation:landscape){.device-dialog-bar{min-height:40px;padding:4px 12px}.device-dialog-bar button{min-height:30px;padding:4px 12px}.device-dialog-stage{padding:0 14px 8px}.device-dialog .device-options{margin-bottom:6px}.device-dialog .device-options button{min-height:28px;padding:5px 12px}.device-dialog .device-demo{width:min(100%,calc((100dvh - 96px)*1.3333))}.device-dialog .device-demo[data-device=iphone]{width:min(100%,calc((100dvh - 96px)*2.16))}}