/* A viewport-sized picture book. The shelf and learning activities keep their own layout. */
body.reader-mode { overflow:hidden; background:#182d31; }
.reader-mode > .site-header { display:none; }
.reader-mode #app { height:100vh; height:100dvh; }
.lookbook {
  --dock-height:104px;
  --toolbar-height:84px;
  --glass:rgba(24,43,47,.65);
  position:fixed; inset:0; width:100%; height:100vh; height:100dvh; max-width:none;
  overflow:clip; isolation:isolate; margin:0; padding:0;
  color:#fff9e9; background:#1c3234;
}
.book-atmosphere { position:absolute; inset:-60px; z-index:-1; background:linear-gradient(#162d34a6,#15272ab3),var(--ambient-image) center/cover; filter:blur(40px); transform:scale(1.15); }
.lookbook::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 50% 40%,transparent 20%,#081d2461 100%); }
.book-toolbar { position:absolute; top:0; left:0; right:0; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left)); padding-top:max(18px,env(safe-area-inset-top)); }
.book-heading { display:flex; flex-direction:column; text-align:center; gap:3px; }
.book-heading>span { color:#e9e2c1c9; font-size:10px; letter-spacing:2.2px; }
.book-heading strong { font-size:23px; font-weight:500; letter-spacing:-.3px; }
.book-tools { display:flex; gap:8px; }
.book-tool { background:var(--glass); border:1px solid #ffffff26; color:#fff9e9; border-radius:50%; width:46px; height:46px; min-width:46px; display:inline-flex; align-items:center; justify-content:center; padding:12px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:background .2s,transform .2s; }
.book-tool svg,.lookbook .continue-button svg { width:21px; height:21px; flex:none; }
.book-tool:hover:not(:disabled) { background:#ffffff30; transform:translateY(-1px); }
.lookbook button:focus-visible { outline:3px solid #ffda77; outline-offset:4px; }
.book-tool:disabled { opacity:.35; cursor:default; }
.library-tool { width:auto; gap:6px; padding:10px 16px 10px 11px; border-radius:30px; font-size:15px; }
.lookbook .book-room { position:absolute; inset:var(--toolbar-height) max(24px,env(safe-area-inset-right)) calc(var(--dock-height) + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; perspective:1500px; touch-action:pan-y pinch-zoom; user-select:none; }
.lookbook .scene-row { position:absolute; inset:0; width:auto; height:auto; min-height:0; max-height:none; display:block; border:0; background:none; transform-style:preserve-3d; transform-origin:left center; }
.lookbook .illustration { position:absolute; inset:0; height:auto; min-height:0; width:100%; background:none; border-radius:0; overflow:visible; }
.lookbook .illustration::before { display:none; }
.lookbook .photo-box { position:absolute; inset:0 0 78px; width:auto; height:auto; max-width:none; margin:0; border-radius:12px; overflow:hidden; transition:inset .45s ease; }
.lookbook .page-photo,.lookbook .photo-box.cover .page-photo { display:block; width:100%; height:100%; object-fit:contain; object-position:center; transform:none; filter:drop-shadow(0 18px 30px #051c2580); user-select:none; -webkit-user-drag:none; }
.lookbook .photo-box.rotated .page-photo { position:absolute; width:100cqh; height:100cqw; max-width:none; left:50%; top:50%; object-fit:contain; transform:translate(-50%,-50%) rotate(-90deg); }
.lookbook .book-sheet { touch-action:pan-y pinch-zoom; }
.lookbook .read-along { position:absolute; left:50%; bottom:0; width:max-content; max-width:min(940px,100%); transform:translateX(-50%); text-align:center; z-index:3; }
.lookbook .status-pill { position:relative; top:auto; left:auto; display:inline-flex; color:#fff4d1; background:#183538d4; border:1px solid #ffffff20; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:6px 14px; border-radius:16px 16px 0 0; font-size:11px; letter-spacing:.3px; margin-bottom:-1px; }
.lookbook .equalizer { height:12px; }
.lookbook .equalizer i { background:#f9d778; width:3px; }
.lookbook .caption-panel { display:block; min-height:0; background:#fffbedf2; border:1px solid #ffffffc9; border-radius:24px; padding:17px 28px; box-shadow:0 12px 40px #041e2933; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.lookbook .caption-words { font-size:clamp(23px,2.7vw,36px); font-weight:500; line-height:1.4; color:#173b43; text-wrap:pretty; letter-spacing:-.4px; margin:0; }
.lookbook .word { display:inline-block; border-radius:6px; padding:0 2px; border-bottom:3px solid transparent; transition:background .12s; }
.lookbook .word.active { background:#ffda68; color:#132f38; border-bottom-color:#d69b29; }
.lookbook .word.spoken { color:#566e65; }
.lookbook .meaning-tag { position:absolute; left:auto; right:2%; bottom:106px; z-index:4; border:1px solid #ffffff70; border-radius:22px; background:#fff8eaf5; color:#163e46; box-shadow:0 8px 24px #0b263733; font-size:22px; padding:6px 17px 6px 4px; transform:rotate(5deg); }
.lookbook .meaning-tag .mini-picture { width:70px; height:55px; }
.book-navigation { position:absolute; z-index:8; bottom:0; left:0; right:0; padding:9px max(30px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(30px,env(safe-area-inset-left)); }
.page-track { display:flex; gap:5px; max-width:290px; margin:0 auto 13px; height:3px; }
.page-track span { flex:1; background:#ffffff29; border-radius:10px; }
.page-track .past { background:#fff5cc7a; }
.page-track .current { background:#ffe094; box-shadow:0 0 10px #ffc24755; }
.lookbook .reader-controls { max-width:1080px; margin:auto; padding:0; display:flex; flex-wrap:nowrap; justify-content:space-between; gap:20px; align-items:center; }
.lookbook .control-pair { display:flex; gap:10px; }
.page-place { text-align:center; margin:0 10px; }
.page-place strong { font-size:24px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; }
.page-place strong span { font-size:14px; font-weight:400; color:#f1efd1b8; }
.page-place small { display:block; margin-top:6px; font-size:11px; color:#efe8caaa; white-space:nowrap; }
.lookbook .continue-button { border:0; border-radius:50px; min-height:52px; min-width:162px; background:#ffdb7c; color:#203b3d; font-size:17px; font-weight:500; padding:12px 19px 12px 24px; gap:15px; box-shadow:0 4px 0 #b38d4670,0 8px 25px #092b3633; transition:background .2s,transform .2s; }
.lookbook .continue-button:hover:not(:disabled) { background:#ffe6a1; transform:translateY(-2px); }
.lookbook .continue-button:disabled { background:#ffffff0d; border:1px solid #ffffff24; color:#f3efd694; box-shadow:none; opacity:1; }
/* Questions float on the spread. Once answered, they become a small speaking invitation. */
.lookbook .question-panel { position:absolute; z-index:5; bottom:14px; right:10px; width:410px; max-width:calc(100% - 20px); max-height:calc(100% - 14px); overflow:auto; padding:25px; border:1px solid #fff9de; border-radius:28px; background:#fffcf1f5; color:#193f43; box-shadow:0 22px 65px #08273455; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:flex; justify-content:flex-start; flex-direction:column; animation:question-appear .4s ease both; }
.lookbook .question-panel[hidden] { display:none; }
.lookbook .question-room .read-along { display:none; }
.lookbook .question-room .photo-box { inset:0 285px 0 0; }
.lookbook .question-panel h2 { font-size:26px; line-height:1.24; margin:0 0 18px; letter-spacing:-.5px; }
.lookbook .turn-eyebrow { font-size:10px; letter-spacing:1.2px; margin:0 0 14px; color:#277c6c; }
.wonder-star { margin-left:auto; color:#dca63a; font-size:25px; line-height:.7; }
.lookbook .answers { gap:9px; }
.lookbook .answer { min-height:114px; padding:8px 5px; font-size:14px; border:2px solid #e4e7d9; border-radius:19px; color:#254a4c; background:#fff; }
.lookbook .answer .answer-picture { height:67px; margin-bottom:4px; }
.lookbook .answer:disabled { opacity:.75; }
.lookbook .answer.named { background:#fff0c0; border-color:#d2a130; opacity:1; transform:translateY(-3px); box-shadow:0 5px 0 #e8d5a166; }
.lookbook .answer.correct { background:#dff0d7; border-color:#48926b; opacity:1; }
.lookbook .question-note { margin:13px 0 0; min-height:0; color:#506e64; font-size:16px; line-height:1.45; }
.lookbook .question-panel.answered { width:370px; padding:20px 24px; }
.lookbook .question-panel.answered h2,.lookbook .question-panel.answered .answers { display:none; }
.lookbook .question-panel.answered .turn-eyebrow { margin-bottom:8px; }
.lookbook .question-panel.answered .question-note { margin:0; font-size:22px; font-weight:500; color:#224d49; }
.lookbook .question-panel .optional-say { display:block; background:none; margin:13px 0 0; padding:0; }
.lookbook .say-button { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; margin:0; padding:12px 15px; border-radius:16px; border:1px solid #c8d9b9; background:#edf3e5; color:#3b7060; font-size:13px; }
.lookbook .say-button strong { font-size:21px; font-weight:500; }
.lookbook .question-room:has(.answered) .photo-box { inset:0 90px 0 0; }
.lookbook .paused-overlay { position:absolute; inset:-6px; border-radius:28px; z-index:7; background:#102d3480; }
.lookbook .pause-card { color:#1b4548; padding:32px; max-width:360px; }
.lookbook .pause-card h2 { font-size:32px; }
.lookbook .start-overlay { position:absolute; inset:0; z-index:6; border-radius:24px; background:linear-gradient(0deg,#142e3be3,#132c3425 90%); padding:25px; }
.lookbook .start-overlay h2 { font-size:clamp(28px,4vw,46px); text-shadow:0 2px 10px #0005; }
.lookbook .start-overlay p { font-size:17px; }
.lookbook .start-overlay .primary { background:#ffdc82; border-radius:40px; padding-inline:35px; }
.reader-focus .book-heading>span { display:none; }
.lookbook .turn-forward .book-sheet { animation:page-depart .25s ease-in both; }
.lookbook .turn-back .book-sheet { transform-origin:right center; animation:page-depart-back .25s ease-in both; }
.lookbook .turn-forward .read-along,.lookbook .turn-back .read-along,.lookbook .turn-forward .question-panel,.lookbook .turn-back .question-panel { opacity:0; transition:opacity .12s; }
.lookbook .arrive-forward .book-sheet { animation:page-arrive .48s ease-out both; }
.lookbook .arrive-back .book-sheet { transform-origin:right center; animation:page-arrive-back .48s ease-out both; }
@keyframes page-depart { to{transform:rotateY(-68deg) translateX(-3%);opacity:.08;filter:brightness(.65)} }
@keyframes page-depart-back { to{transform:rotateY(68deg) translateX(3%);opacity:.08;filter:brightness(.65)} }
@keyframes page-arrive { from{transform:rotateY(24deg) translateX(5%);opacity:.25}to{transform:none;opacity:1} }
@keyframes page-arrive-back { from{transform:rotateY(-24deg) translateX(-5%);opacity:.25}to{transform:none;opacity:1} }
@keyframes question-appear { from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none} }
@media (orientation:portrait) {
  .lookbook .question-room .photo-box { inset:0 0 290px; }
  .lookbook .question-panel { bottom:0; right:50%; transform:translateX(50%); width:520px; padding:22px; animation:none; }
  .lookbook .question-panel h2 { font-size:25px; }
  .lookbook .question-panel.answered { width:440px; }
  .lookbook .question-room:has(.answered) .photo-box { inset:0 0 165px; }
  .lookbook .question-room .illustration { height:auto; min-height:0; }
}
@media (max-width:700px) {
  .lookbook { --toolbar-height:74px; --dock-height:98px; }
  .book-toolbar { gap:7px; padding:14px 14px 8px; padding-top:max(14px,env(safe-area-inset-top)); }
  .book-heading { align-items:flex-start; text-align:left; flex:1; min-width:0; gap:4px; }
  .book-heading>span { font-size:8px; letter-spacing:1.4px; }
  .book-heading strong { font-size:18px; white-space:nowrap; }
  .book-tools { gap:5px; }
  .book-tool { width:42px; height:42px; min-width:42px; padding:11px; }
  .library-tool { width:38px; min-width:38px; padding:9px; border:0; background:none; }
  .library-tool span { display:none; }
  .lookbook .book-room { inset:calc(var(--toolbar-height) + env(safe-area-inset-top)) 12px calc(var(--dock-height) + env(safe-area-inset-bottom)); }
  .lookbook .photo-box { inset:0 -12px 100px; }
  .lookbook .page-photo { border-radius:0; }
  .lookbook .read-along { width:100%; max-width:100%; }
  .lookbook .caption-panel { padding:17px 17px; min-height:0; border-radius:23px; }
  .lookbook .caption-words { font-size:26px; line-height:1.4; }
  .lookbook .status-pill { font-size:10px; }
  .lookbook .meaning-tag { bottom:145px; right:4%; font-size:19px; }
  .lookbook .meaning-tag .mini-picture { width:57px; height:47px; }
  .book-navigation { padding:10px 16px max(15px,env(safe-area-inset-bottom)); }
  .lookbook .reader-controls { gap:8px; }
  .lookbook .control-pair { gap:5px; }
  .page-place { margin:0; }
  .page-place strong { font-size:22px; }
  .page-place strong span { font-size:11px; }
  .page-place small { display:none; }
  .page-track { max-width:200px; height:3px; margin-bottom:12px; gap:4px; }
  .lookbook .continue-button { min-width:115px; min-height:46px; padding:10px 12px 10px 16px; font-size:15px; gap:4px; }
  .lookbook .question-panel { max-width:100%; padding:19px; border-radius:25px; max-height:90%; }
  .lookbook .question-panel h2 { font-size:22px; margin-bottom:13px; }
  .lookbook .turn-eyebrow { font-size:9px; margin-bottom:12px; }
  .lookbook .answer { min-height:98px; font-size:13px; padding:6px 3px; border-radius:17px; }
  .lookbook .answer .answer-picture { height:58px; }
  .lookbook .answers { gap:8px; }
  .lookbook .question-note { font-size:14px; margin-top:11px; }
  .lookbook .question-room .photo-box { inset:0 -12px 265px; }
  .lookbook .question-room:has(.answered) .photo-box { inset:0 -12px 172px; }
  .lookbook .question-panel.answered { padding:19px 22px; }
  .lookbook .question-panel.answered .question-note { font-size:21px; }
  .lookbook .pause-card { padding:27px; max-width:310px; }
  .lookbook .start-overlay h2 { font-size:32px; }
  .lookbook .start-overlay p { max-width:230px; }
}
@media (max-height:650px) and (orientation:portrait) {
  .lookbook { --toolbar-height:65px; --dock-height:83px; }
  .book-toolbar { padding-top:9px; }
  .book-navigation { padding-bottom:9px; }
  .lookbook .caption-words { font-size:22px; }
  .lookbook .caption-panel { padding:12px 17px; }
  .lookbook .question-panel { padding:14px 17px; }
  .lookbook .question-panel h2 { font-size:20px; margin-bottom:10px; }
  .lookbook .answer .answer-picture { height:43px; }
  .lookbook .answer { min-height:78px; }
  .lookbook .question-room .photo-box { bottom:228px; }
  .lookbook .question-room:has(.answered) .photo-box { bottom:155px; }
  .lookbook .question-panel.answered { padding:14px 18px; }
  .lookbook .question-panel.answered .question-note { font-size:19px; }
  .lookbook .say-button { padding:8px 12px; }
  .lookbook .say-button strong { font-size:19px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .lookbook { --toolbar-height:61px; --dock-height:76px; }
  .book-toolbar { padding:9px 20px; }
  .book-heading>span { display:none; }
  .book-heading strong { font-size:19px; }
  .book-tool { width:40px; height:40px; min-width:40px; padding:10px; }
  .book-navigation { padding-top:5px; padding-bottom:max(9px,env(safe-area-inset-bottom)); }
  .page-track { margin-bottom:8px; }
  .page-place small { display:none; }
  .lookbook .continue-button { min-height:42px; }
  .lookbook .caption-panel { padding:10px 22px; }
  .lookbook .caption-words { font-size:24px; }
  .lookbook .photo-box { bottom:60px; }
  .lookbook .question-panel { width:335px; bottom:0; padding:15px 18px; max-height:100%; }
  .lookbook .question-panel h2 { font-size:20px; margin-bottom:10px; }
  .lookbook .turn-eyebrow { margin-bottom:10px; }
  .lookbook .answer { min-height:80px; font-size:12px; }
  .lookbook .answer .answer-picture { height:42px; }
  .lookbook .question-note { font-size:14px; margin-top:9px; }
  .lookbook .question-room .photo-box { right:295px; }
  .lookbook .question-room:has(.answered) .photo-box { right:260px; }
  .lookbook .question-panel.answered { width:300px; padding:17px; }
  .lookbook .question-panel.answered .question-note { font-size:19px; }
  .lookbook .say-button { padding:7px 12px; }
}
@media (prefers-reduced-motion:reduce) { .lookbook * { animation:none!important;transition:none!important; } }
@media (max-width:360px) {
  .book-toolbar { padding-inline:10px; gap:5px; }
  .book-heading strong { font-size:16px; }
  .book-heading>span { font-size:7px; letter-spacing:1px; }
  .book-tools { gap:2px; }
  .library-tool { width:29px; min-width:29px; padding:6px; }
  .book-navigation { padding-inline:10px; }
  .lookbook .reader-controls { gap:5px; }
  .lookbook .control-pair { gap:2px; }
  .lookbook .continue-button { min-width:108px; padding-inline:10px; font-size:14px; }
  .page-place strong { font-size:18px; }
  .page-place strong span { font-size:10px; }
}

/* The book always has visible exits and a distinct whole-story restart. */
.lookbook { --glass:#243e42; }
.lookbook .book-tool { min-height:44px; min-width:44px; border-color:#839b96; flex-shrink:0; }
.lookbook .book-tool:hover:not(:disabled) { background:#35565a; color:#fff9e9; }
.lookbook .book-tool:disabled { background:#2c4448; color:#a9bdb9; border-color:#506a6d; opacity:1; }
.lookbook .games-tool, .lookbook .restart-tool {
  width:auto; gap:7px; padding:10px 15px; border-radius:30px; font-size:15px;
  font-weight:500; white-space:nowrap; text-decoration:none;
}
.lookbook .games-tool { background:#fff4d5; color:#173b43; border-color:#fff4d5; }
.lookbook .games-tool:hover { background:#ffe5a5; color:#173b43; }
.lookbook .games-tool span, .lookbook .restart-tool span { display:inline; }
.lookbook .continue-button:disabled { background:#2c4448; color:#c0cfcc; border-color:#506a6d; }
.lookbook .start-overlay .primary { color:#173b43; background:#ffdc82; }
.lookbook .pause-card .primary { background:#23695f; color:#fffdf4; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; }
.lookbook .pause-card svg { width:23px; height:23px; }
.lookbook .pause-card .big-pause svg { width:35px; height:35px; }
.lookbook .pause-card p { color:#48645c; }
.lookbook .pause-library { display:block; min-height:44px; margin:14px auto 0; background:transparent; color:#275b51; text-decoration:underline; text-underline-offset:4px; }
.lookbook :is(a,button):focus-visible { outline:3px solid #ffda77; outline-offset:4px; }
.lookbook .pause-card :is(a,button):focus-visible { outline-color:#23695f; }
.lookbook .paused-overlay { overflow:auto; overscroll-behavior:contain; }
.lookbook .answer:disabled { opacity:1; background:#f3f2e9; }
.lookbook .answer.named { background:#fff0c0; }
.lookbook .answer.correct { background:#dff0d7; }
@media (max-width:850px) {
  .book-heading > span { display:none; }
  .book-heading strong { font-size:18px; }
}
@media (max-width:600px) and (orientation:portrait) {
  .lookbook { --toolbar-height:119px; }
  .book-toolbar { flex-wrap:wrap; gap:8px; padding:10px 14px 8px; padding-top:max(10px,env(safe-area-inset-top)); }
  .book-heading { flex:1; align-items:flex-end; text-align:right; }
  .book-tools { width:100%; gap:8px; justify-content:flex-end; }
  .lookbook .restart-tool { margin-right:auto; font-size:14px; padding-inline:13px; }
  .lookbook .games-tool { font-size:15px; }
  .lookbook .book-tool { width:44px; height:44px; }
  .lookbook .games-tool,.lookbook .restart-tool { width:auto; }
  .lookbook .book-room { top:calc(var(--toolbar-height) + env(safe-area-inset-top)); }
}
@media (max-width:360px) and (orientation:portrait) {
  .book-toolbar { padding-inline:10px; }
  .book-tools { gap:6px; }
  .lookbook .restart-tool { padding-inline:10px; font-size:13px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .lookbook .book-heading { display:none; }
  .lookbook .pause-card { padding:12px 20px; }
  .lookbook .pause-card .big-pause { display:none; }
  .lookbook .pause-card h2 { font-size:24px; margin-bottom:6px; }
  .lookbook .pause-card p { margin:0 0 12px; font-size:14px; }
  .lookbook .pause-library { margin-top:5px; }
}