.playground{--play-cream:#fff0c5;--play-teal:#359fa0;--play-aqua:#8ad6d1;--play-coral:#ff8c52;--play-ink:#203f40;min-height:100dvh;background:var(--play-cream);color:var(--play-ink);font-family:ui-rounded,Arial Rounded MT Bold,Trebuchet MS,Arial,sans-serif;font-size:18px;font-weight:700;line-height:1.5;padding:0 16px}.playground *,.playground :after,.playground :before{box-sizing:border-box}.playground button,.playground input,.playground textarea{font:inherit;color:inherit}.playground button{cursor:pointer;-webkit-tap-highlight-color:transparent}.playground button:disabled,.playground button[aria-disabled=true]{opacity:.45;cursor:default;transform:none}.playground :is(button,textarea,input,a,[tabindex]):focus-visible{outline:4px solid #174d50;outline-offset:5px}.playground button{min-width:64px;min-height:64px}.playground textarea{font-size:20px;line-height:1.45;border-radius:12px;resize:none}.play-topbar{max-width:1384px;margin:auto;min-height:80px;padding:6px 0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}.play-brand{gap:10px;font-size:24px;letter-spacing:-.8px;font-weight:900}.play-brand,.play-brand>span{display:flex;align-items:center}.play-brand>span{justify-content:center;width:46px;height:46px;border-radius:14px 14px 14px 4px;background:#359fa0;color:#fff0c5;transform:rotate(-6deg)}.play-intro{min-width:0;text-align:center}.play-intro h1{font-size:clamp(24px,2.5vw,32px);line-height:1.18;letter-spacing:-1px;font-weight:900;margin:0 0 4px}.play-intro h1 span{color:#266f70}.play-intro p{font-size:18px;color:#44605a;margin:0}.play-editor{max-width:1384px;margin:auto}.book-workspace{width:100%;min-width:0;max-width:1100px;margin:0 auto}.desktop-picture-toggle{display:none!important}.book-navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 0 12px;font-size:18px}.book-nav-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:2px solid #359fa060;border-radius:20px;background:#fff9e7;color:#25565a}.book-nav-button:not(:disabled):hover{background:#ff8c5260;border-color:#b45b2e}.book-nav-button svg{flex-shrink:0}.book-navigation-status{text-align:center;color:#395956}.book-navigation-status>span{display:block}.book-navigation-status>span:last-child{display:flex;align-items:center;justify-content:center;gap:8px}.active-dot{width:12px;height:12px;border-radius:50%;background:var(--play-coral);border:2px solid #995124}.book-navigation .active-dot{flex-shrink:0}.play-book{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:7px 9px 12px;background:#359fa0;border-radius:20px 20px 24px 24px;box-shadow:0 7px 0 #257e80,0 14px 0 #8ad6d1,0 26px 45px #3859491f;isolation:isolate}.play-book:after{content:"";position:absolute;pointer-events:none;z-index:6;inset:7px auto 12px 50%;width:28px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#315a4820 45%,#fffef768 53%,transparent)}.play-page{position:relative;min-width:0;aspect-ratio:5/6;background:#fffdf3;border-radius:12px 1px 1px 12px;overflow:hidden;isolation:isolate}.play-page:nth-child(2n){border-radius:1px 12px 12px 1px}.play-page.is-active{box-shadow:inset 0 0 0 4px var(--play-coral)}.play-background{object-fit:cover;z-index:-1;pointer-events:none;user-select:none}.page-select-target{position:absolute;z-index:1;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:transparent}.page-select-target:focus-visible{outline-offset:-9px!important}.page-select-target[aria-pressed=true]{border:4px solid var(--play-coral)}.empty-page-guide{position:absolute;top:23%;left:12px;right:12px;display:flex;align-items:center;flex-direction:column;text-align:center;pointer-events:none;color:#427a73}.empty-page-guide svg{margin-bottom:20px;color:#359fa0}.empty-page-guide p{font-size:clamp(22px,2.5vw,30px);line-height:1.3;font-weight:900;margin:0 0 14px}.empty-page-guide span{font-size:18px;border-bottom:3px dotted #8ad6d1;padding-bottom:7px}.play-art-layer.has-selection{z-index:5}.play-art-layer{position:absolute;inset:0;pointer-events:none;z-index:2}.placed-picture{position:absolute;min-width:64px;min-height:64px;aspect-ratio:1;pointer-events:auto;border-radius:18px}.placed-picture.is-selected{outline:3px dashed var(--play-coral);outline-offset:5px;z-index:3}.placed-picture img{object-fit:contain;pointer-events:none;user-select:none}.picture-grab,.placed-picture img{display:block;width:100%;height:100%}.picture-grab{padding:0;border:0;border-radius:inherit;background:transparent;touch-action:none;cursor:grab!important}.picture-grab:active{cursor:grabbing!important}.picture-resize{position:absolute;top:calc(100% + 4px);right:0;width:64px;height:64px;background:transparent;border:0;padding:0;display:grid;place-items:end;touch-action:none;cursor:nwse-resize!important}.picture-resize.is-above{top:auto;bottom:calc(100% + 4px)}.picture-resize>span{width:34px;height:34px;display:grid;place-items:center;border:2px solid #924920;border-radius:50%;background:var(--play-coral);box-shadow:0 3px 0 #fffdf3}.play-caption{position:absolute;z-index:6;left:5%;right:5%;bottom:5%;height:22%;pointer-events:none;border-radius:16px;padding:8px 10px}.play-caption.has-words{background:#fffdf3ed;box-shadow:0 2px 8px #203f4007}.play-caption textarea{width:100%;height:100%;min-height:64px;padding:0;border:0;background:transparent;text-align:center;pointer-events:auto;font-size:clamp(18px,1.6vw,22px);font-weight:800;overflow:auto}.play-caption textarea::placeholder{color:#4d736a;opacity:1;font-size:18px;font-weight:700}.play-caption textarea:focus-visible{outline-offset:2px}.preview-caption{height:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;pointer-events:auto;font-size:20px;font-weight:800}.preview-caption>span{font-size:18px;color:#55716a}.play-page-number{position:absolute;bottom:.3%;width:100%;text-align:center;font-size:18px;color:#3d675b;z-index:4;pointer-events:none}.book-helper-row{min-height:102px;justify-content:center;padding:23px 0 10px}.book-helper-row,.play-hint{display:flex;align-items:center}.play-hint{gap:10px;margin:0;color:#4b675e;text-align:center;font-size:18px}.picture-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;border:2px solid #359fa050;background:#fff9e7;padding:4px 10px;border-radius:28px}.selected-picture-name{padding:0 12px;color:#255f5e;font-size:18px}.play-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid #359fa040;border-radius:20px;width:64px;height:64px;padding:0;background:#fffdf3;color:#25565a;transition:background .15s,transform .15s}.play-icon-button:not(:disabled):hover{background:#ff8c5260;border-color:#b45b2e}.play-tooltip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:max-content;max-width:200px;border-radius:13px;background:#244d4d;color:#fffdf3;font-size:18px;line-height:1.3;padding:9px 14px;font-weight:800;pointer-events:none;opacity:0;z-index:30;transition:opacity .15s}.playground button:focus-visible>.play-tooltip{opacity:1}@media(hover:hover){.playground button:hover>.play-tooltip{opacity:1}}.asset-drawer{position:relative;max-width:1280px;margin:2px auto 0;background:#8ad6d1;border:3px solid #fff9e999;border-radius:32px 32px 0 0;padding:22px 24px 152px;box-shadow:inset 0 4px 0 #b6ece5}.tray-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.tray-heading h2{font-size:25px;font-weight:900;letter-spacing:-.6px;margin:0}.tray-heading p{display:flex;align-items:center;gap:9px;font-size:18px;color:#305b58;margin:0}.tray-actions{display:flex;gap:12px;flex-wrap:wrap}.tray-actions .play-action{font-size:18px;padding:10px 16px}.page-picture-options{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}.change-picture{background:#ff8c5238}.saved-picture-ideas{flex:0 0 260px;padding:10px 8px 16px}.saved-picture-ideas h3{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 12px}.saved-picture-ideas>div{display:flex;gap:12px;flex-wrap:wrap}.saved-picture-ideas button{max-width:100%;overflow-wrap:anywhere;text-align:left}.asset-scroll{display:flex;gap:30px;overflow-x:auto;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;padding:10px 8px 22px;scroll-padding-inline:8px;scroll-snap-type:x proximity;scrollbar-color:#2c797c #b8e9e3;scrollbar-width:thin;min-height:190px}.asset-group{flex:0 0 auto;position:relative}.asset-group+.asset-group:before{content:"";position:absolute;top:8px;bottom:8px;left:-17px;width:2px;background:#359fa040}.asset-group h3{display:flex;gap:8px;align-items:center;font-size:18px;margin:0 0 10px;color:#2d5d59}.asset-cards{display:flex;gap:14px}.asset-card{position:relative;width:112px;height:112px;padding:9px;flex-shrink:0;border:3px solid #fffdf3;border-radius:22px;background:#fff8e9;box-shadow:0 5px 0 #4b9a9650;scroll-snap-align:start;transition:transform .15s,border-color .15s}.asset-card:hover{border-color:var(--play-coral);transform:translateY(-3px)}.asset-card img{height:100%;width:100%;object-fit:contain;border-radius:15px;pointer-events:none;user-select:none}.asset-background{padding:0;overflow:visible}.asset-background img{object-fit:cover;border-radius:18px}.asset-add-mark{position:absolute;bottom:-6px;right:-5px;display:grid;place-items:center;width:29px;height:29px;border:3px solid #fffdf3;background:#ff8c52;border-radius:50%;color:#713a21;pointer-events:none}.asset-card .play-tooltip{bottom:10px;max-width:170px}.play-save-note{font-size:18px;color:#315b58;text-align:center;margin-top:8px}.play-primary-controls{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:18px;background:#fff7dfed;border:2px solid #fffdf3;border-radius:60px;padding:10px 16px;box-shadow:0 10px 35px #21444430;backdrop-filter:blur(8px)}.play-primary{position:relative;display:grid;place-items:center;width:82px;height:82px;border:3px solid #fffdf3b3;border-radius:50%;box-shadow:0 6px 0 #203f4020;transition:transform .15s,box-shadow .15s}.play-primary:hover{transform:translateY(-3px)}.play-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #203f4020}.play-primary.next{background:#a8d593;color:#214c32}.play-primary.microphone{width:96px;height:96px;background:#ff8c52;color:#542b1e}.play-primary.preview{background:#8fc9ea;color:#16445b}.play-primary.preview>svg{margin-left:5px}.play-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.play-undo{position:fixed;z-index:22;bottom:154px;right:24px;border:2px solid #359fa060;border-radius:24px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:12px;background:#fff8df;box-shadow:0 4px 20px #203f4018}.play-dialog{width:min(660px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;border:4px solid #8ad6d1;border-radius:32px;padding:32px;background:#fff7df;color:var(--play-ink);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 25px 90px #183f4545}.play-dialog::backdrop{background:#1d494e99;backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:16px;right:16px;z-index:5}.play-dialog h2{font-size:clamp(28px,3vw,38px);line-height:1.2;letter-spacing:-1px;margin:18px 0 20px;font-weight:900}.dialog-eyebrow{display:inline-flex;align-items:center;min-height:64px;font-size:18px;color:#2f6965;padding-right:70px}.talk-content{text-align:center}.talk-content .dialog-eyebrow{display:block;text-align:left;padding-top:13px}.pretend-microphone{color:#6b3924;width:110px;height:120px;margin:10px auto 22px;padding-top:10px;display:flex;align-items:center;flex-direction:column;border-radius:36px;background:#ff8c5255}.voice-waves{display:flex;align-items:center;gap:5px;height:32px;margin-top:9px;color:#246267}.voice-waves i{width:5px;height:12px;border-radius:8px;background:currentColor}.is-listening .voice-waves i{animation:play-voice-wave 1.1s ease-in-out infinite alternate}@keyframes play-voice-wave{0%{height:8px}to{height:28px}}.talk-content>p{font-size:20px;margin:8px 0}.talk-content .voice-disclosure{font-size:18px;color:#54655c;margin:12px 0 22px}.voice-label{display:block;text-align:left;font-size:18px}.voice-label textarea{display:block;background:#fffdf5;border:2px solid #6ca9a2;min-height:150px;width:100%;margin:10px 0 22px;padding:18px}.play-action{display:inline-flex;min-height:64px;align-items:center;justify-content:center;gap:12px;border:2px solid #925022;border-radius:22px;background:#ff8c52;padding:16px 24px;box-shadow:0 4px 0 #b3673d30;font-size:20px;font-weight:900}.talk-content .play-action{width:100%}.reading-dialog{width:min(1040px,calc(100vw - 32px));padding:24px 28px 32px}.reading-content{text-align:center}.reading-content .dialog-eyebrow{padding-right:0;min-height:42px}.reading-content h2{padding:0 55px;margin-top:5px}.reading-edit{margin:0 auto 4px}.reading-book{margin:22px auto 30px;max-width:760px;text-align:left}.reading-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin:0 auto 16px;font-size:18px}.read-aloud{margin:0 auto;font-size:18px}.reading-status{font-size:18px;color:#49665e;margin:18px 0 0}.play-loading{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:20px;text-align:center}.play-loading h1{font-size:30px}@media(min-width:1000px){.play-topbar{grid-template-columns:auto minmax(0,1fr) auto}.play-brand{font-size:22px}.play-intro h1{font-size:28px}.play-editor{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:24px}.play-editor.pictures-hidden{grid-template-columns:minmax(0,1fr)}.pictures-hidden .asset-drawer{display:none}.desktop-picture-toggle{display:inline-flex!important}.book-navigation{grid-template-columns:auto minmax(0,1fr) auto auto;margin-bottom:8px}.book-navigation .desktop-picture-toggle{margin-left:4px}.book-helper-row{min-height:104px;padding:24px 0 12px}.picture-tools{padding-block:0;gap:6px}.selected-picture-name{padding-inline:5px}.play-caption{height:max(22%,84px);padding:8px}.play-caption textarea,.preview-caption{font-size:18px}.empty-page-guide{top:22%}.empty-page-guide p{font-size:26px;margin-bottom:8px}.empty-page-guide span{padding-bottom:4px}.asset-drawer{position:sticky;top:12px;width:100%;max-height:calc(100dvh - 96px);display:flex;flex-direction:column;min-height:0;padding:12px;margin:0;border-radius:24px}.tray-heading{display:block;flex-shrink:0;margin-bottom:12px}.tray-heading h2{font-size:24px;margin-bottom:10px}.tray-actions{display:block}.tray-actions .play-action{width:100%;padding:10px 8px}.tray-picture-toggle{display:none}#picture-tray-content:not([hidden]){display:flex;flex-direction:column;min-height:0}.asset-scroll{min-height:0;flex-direction:column;gap:20px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:6px 0 14px;scroll-snap-type:none}.asset-group+.asset-group:before{display:none}.asset-group h3{margin-bottom:8px}.asset-cards{display:grid;grid-template-columns:repeat(3,minmax(64px,1fr));gap:8px}.asset-card{width:100%;height:auto;aspect-ratio:1;padding:4px;border-radius:16px}.asset-background{padding:0}.asset-card img{border-radius:12px}.asset-card:nth-child(3n+1) .play-tooltip{left:0;transform:none}.asset-card:nth-child(3n) .play-tooltip{left:auto;right:0;transform:none}.saved-picture-ideas{flex:0 0 auto;padding:0 0 8px}.saved-picture-ideas>div{flex-direction:column}.play-save-note{flex-shrink:0;margin-top:12px}.play-primary-controls{position:static;transform:none;flex-direction:row;gap:10px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none}.play-primary{width:64px;height:64px}.play-primary.microphone{width:68px;height:68px}.play-primary svg{width:32px;height:32px}.play-primary-controls .play-tooltip{top:calc(100% + 10px);bottom:auto}.play-primary:last-child .play-tooltip{left:auto;right:0;transform:none}.play-undo{bottom:24px}}.picture-maker{width:min(720px,calc(100vw - 32px))}.picture-maker h2{margin-top:4px}.picture-original{display:flex;align-items:center;gap:18px;margin-bottom:22px}.picture-original img{width:96px;height:96px;flex-shrink:0;object-fit:contain;border-radius:18px;background:#fffdf3}.picture-original p{font-size:18px;margin:0}.picture-kind{padding:0;border:0;margin:0 0 22px;min-width:0}.picture-kind legend{margin-bottom:10px;font-size:18px}.picture-kind>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.picture-kind button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:94px;padding:12px 4px;border-radius:18px;background:#fffdf3;border:2px solid #359fa060;font-size:18px}.picture-kind button[aria-pressed=true]{background:#ff8c5245;border:3px solid #9b4d22}.picture-kind:disabled button{opacity:.65;cursor:default}.picture-kind:disabled button[aria-pressed=true]{opacity:1}.picture-field{display:block;margin-bottom:20px;font-size:20px}.picture-field input,.picture-field textarea{display:block;width:100%;min-height:64px;padding:14px;margin-top:9px;border:2px solid #6ca9a2;border-radius:14px;background:#fffdf5;font-size:20px;font-weight:600}.picture-field textarea{min-height:132px;resize:vertical}.picture-field span{font-size:18px;color:#49665e}.picture-service-note{font-size:18px;margin:10px 0 20px;color:#3e605b}.picture-service-note a{display:inline-flex;align-items:center;min-height:64px;padding-inline:12px;text-decoration:underline;border-radius:12px}.picture-create-actions{display:flex;flex-wrap:wrap;gap:12px}.picture-create-actions>button{flex:1 1 220px;font-size:18px;padding-inline:14px}.picture-message{font-size:18px;min-height:27px;overflow-wrap:anywhere}.picture-start-over{border-top:2px solid #8ad6d1;padding-block:8px 16px;font-size:18px}.picture-review{text-align:center;border:2px solid #8ad6d1;border-radius:24px;padding:18px;margin:20px 0}.picture-result{max-width:280px;margin:0 auto 20px;border-radius:18px;overflow:hidden;background:repeating-conic-gradient(#fffdf3 0 25%,#dfede5 0 50%) 50% /24px 24px}.picture-result img{width:100%;height:240px;object-fit:contain}.picture-result.is-background img{object-fit:cover;height:300px}.save-picture-idea{margin-top:8px;width:100%}@media(max-width:900px){.playground{padding:0 18px}.play-topbar{min-height:84px}.play-intro h1{font-size:26px}.play-caption{left:4%;right:4%;padding:7px}.play-caption textarea,.preview-caption{font-size:18px}.tray-heading{align-items:flex-start;flex-direction:column;gap:4px}.tray-actions{margin-top:12px}.asset-drawer{padding-inline:20px}}@media(max-width:680px){.playground{padding:0 14px}.play-topbar{grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;padding:12px 0 14px}.play-brand{font-size:20px}.play-brand>span{width:34px;height:34px;border-radius:10px}.play-brand svg{width:24px;height:24px}.play-intro h1{font-size:26px;line-height:1.2;letter-spacing:-1px}.play-intro h1 span{display:block}.play-intro p{font-size:18px}.book-navigation{gap:8px;margin-bottom:14px}.book-nav-button{gap:4px;padding-inline:8px}.play-book{grid-template-columns:1fr;padding:7px 8px 12px;gap:9px;border-radius:18px}.play-book:after{display:none}.play-page,.play-page:nth-child(2n){border-radius:10px}.play-caption{bottom:6%;left:5%;right:5%;height:22%}.book-helper-row{min-height:106px;padding-inline:6px}.play-hint{align-items:flex-start;justify-content:center}.play-hint svg{flex-shrink:0;margin-top:3px}.picture-tools{gap:7px;padding:5px;border-radius:24px}.picture-tools .change-picture{flex-basis:100%}.selected-picture-name{display:none}.asset-drawer{margin-inline:-14px;padding-inline:16px;border-radius:28px 28px 0 0}.tray-heading h2{font-size:24px}.tray-heading p{gap:6px;font-size:18px}.asset-scroll{gap:26px}.asset-card{width:104px;height:104px}.play-primary-controls{gap:13px;padding:9px 12px;bottom:max(12px,env(safe-area-inset-bottom))}.play-primary{width:76px;height:76px}.play-primary.microphone{width:88px;height:88px}.play-save-note{font-size:18px;margin-top:12px}.play-dialog{padding:22px;border-radius:26px}.play-dialog h2{font-size:30px}.picture-maker{padding:18px}.picture-kind>div{gap:6px}.picture-kind button{font-size:18px;letter-spacing:-.6px}.picture-original{gap:12px}.picture-original img{width:72px;height:72px}.picture-field{font-size:18px}.tray-actions{width:100%;gap:8px}.tray-actions>button{flex:1 1 auto}.dialog-close{top:10px;right:10px}.reading-dialog{padding:20px 12px}.reading-content h2{padding:0 28px;font-size:28px}.reading-book{max-width:340px}.reading-controls{gap:10px}.reading-controls>span{font-size:18px}.reading-content .dialog-eyebrow{padding-right:65px}.play-undo{right:12px;left:12px;bottom:136px;justify-content:space-between}}@media(prefers-reduced-motion:reduce){.playground *,.playground :after,.playground :before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}