@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Mali:wght@500;600;700&display=swap";:root{color:#113c72;--navy:#113c72;--coral:#ff626b;--green:#087f5b;background:#111;font-family:IBM Plex Sans Thai,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,a{font:inherit}.icon{flex:none;width:24px;height:24px}.story-viewport{background:#8fd5fa;width:100%;height:100%;min-height:600px;position:relative;overflow:hidden}.scene{object-fit:cover;object-position:center;width:100%;height:100%;animation:.55s both sceneIn;position:absolute;inset:0}.scene-shade{pointer-events:none;background:linear-gradient(#00000021,#0000 22% 70%,#0c1d156e);position:absolute;inset:0}.story-header{z-index:5;justify-content:space-between;align-items:center;display:flex;position:absolute;top:22px;left:28px;right:28px}.brand{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe8;border:2px solid #fffc;border-radius:25px;align-items:center;gap:9px;height:58px;padding:8px 18px 8px 11px;display:flex;box-shadow:0 7px 22px #12374829}.brand b{color:var(--navy);font:700 24px Mali,sans-serif}.book-mark{width:40px;height:34px;display:flex}.book-mark i{width:50%;height:100%}.book-mark i:first-child{clip-path:polygon(0 0,100% 13%,100% 100%,0 80%);background:#34aff1;border-radius:7px 2px 2px 7px}.book-mark i:last-child{clip-path:polygon(0 13%,100% 0,100% 80%,0 100%);background:#55b96e;border-radius:2px 7px 7px 2px}.header-actions{gap:12px;display:flex}.header-actions button,.page-arrow{color:#173f65;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);cursor:pointer;background:#ffffffeb;border:0;border-radius:50%;place-items:center;width:54px;height:54px;display:grid;box-shadow:0 6px 18px #11314338}.story-copy{z-index:3;-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);background:#fff9e6e6;border:2px solid #ffffffb8;border-radius:34px;width:min(610px,43vw);padding:35px 42px 34px;animation:.45s both copyIn;position:absolute;box-shadow:0 18px 45px #34291333}.story-copy.right{top:50%;right:7vw;transform:translateY(-50%)}.story-copy.top-right{top:15vh;right:6vw}.story-copy.left{top:50%;left:6vw;transform:translateY(-50%)}.kicker{color:#ec5862;margin:0 0 8px;font:700 18px Mali,sans-serif}.story-copy h1{color:var(--navy);letter-spacing:-.5px;margin:0 0 15px;font:700 clamp(31px,3vw,48px)/1.24 Mali,sans-serif}.narration{color:#233e55;margin:0;font-size:clamp(19px,1.55vw,25px);font-weight:500;line-height:1.65}.choices{grid-template-columns:1fr 1fr;gap:12px;margin-top:21px;display:grid}.choice{min-height:86px;color:var(--navy);cursor:pointer;background:#f4fffbeb;border:2px solid #65c6aa;border-radius:20px;font-size:17px;font-weight:700;box-shadow:0 5px 14px #1c4f4617}.choice span{font-size:30px;display:block}.choice.think{background:#fff6f6ed;border-color:#ff929b}.choice.selected{outline:4px solid #1f9d792e;transform:translateY(-3px)}.choice.selected.think{outline-color:#ff626b2e}.feedback{text-align:center;border-radius:13px;margin-top:13px;padding:10px 13px;font-weight:600;line-height:1.4}.feedback.teacher{color:#087153;background:#def7e9}.feedback.keep{color:#855700;background:#fff0cf}.page-arrow{z-index:5;position:absolute;top:50%;transform:translateY(-50%)}.page-arrow.previous{left:26px}.page-arrow.next{right:26px}.page-arrow:disabled{opacity:.28;cursor:not-allowed}.story-controls{z-index:5;grid-template-columns:205px 1fr 225px;align-items:end;gap:20px;width:min(760px,100% - 150px);display:grid;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.story-controls>a,.story-controls>button{cursor:pointer;border-radius:30px;justify-content:center;align-items:center;gap:10px;height:58px;font-size:18px;font-weight:700;text-decoration:none;display:flex}.listen-button{color:#fff;background:linear-gradient(135deg,#ff777a,#ff555f);border:0;box-shadow:0 10px 25px #ff48544d}.listen-button.active{background:#df4254}.pdf-button{color:var(--green);background:#fffffff0;border:2px solid #fff;box-shadow:0 10px 25px #12343238}.pagination{text-align:center;color:#fff;text-shadow:0 2px 6px #00000061}.pagination b{font-size:16px}.pagination div{justify-content:center;gap:10px;margin-top:8px;display:flex}.pagination button{cursor:pointer;background:#ffffff94;border:0;border-radius:50%;width:11px;height:11px;padding:0}.pagination button.active{background:#fff;transform:scale(1.28)}.print-book{display:none}@keyframes sceneIn{0%{opacity:.35;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}@keyframes copyIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=780px){html,body,#root{overflow:auto}.story-viewport{height:100svh;min-height:720px}.scene{object-position:center}.scene-shade{background:linear-gradient(#00000014,#0000 42%,#09191259)}.story-header{top:12px;left:12px;right:12px}.brand{border-radius:20px;height:49px;padding:6px 12px 6px 8px}.brand b{font-size:20px}.book-mark{width:34px;height:29px}.header-actions{gap:7px}.header-actions button{width:47px;height:47px}.story-copy,.story-copy.right,.story-copy.top-right,.story-copy.left{background:#fff9e6e8;border-radius:25px;width:auto;padding:23px 24px 22px;inset:auto 18px 116px;transform:none}.kicker{margin-bottom:5px;font-size:14px}.story-copy h1{margin-bottom:10px;font-size:clamp(25px,7vw,33px)}.narration{font-size:17px;line-height:1.55}.choices{gap:8px;margin-top:13px}.choice{min-height:67px;font-size:14px}.choice span{font-size:23px}.feedback{font-size:13px}.page-arrow{width:48px;height:48px;top:42%}.page-arrow.previous{left:9px}.page-arrow.next{right:9px}.story-controls{grid-template-columns:1fr auto 1fr;gap:8px;width:calc(100% - 30px);bottom:18px}.story-controls>a,.story-controls>button{height:49px;font-size:14px}.story-controls .icon{width:20px;height:20px}.pagination{align-self:center}.pagination b{font-size:13px}.pagination div{gap:6px;margin-top:5px}.pagination button{width:8px;height:8px}}.brand{width:108px;height:108px;box-shadow:none;filter:drop-shadow(0 7px 14px #12374840);-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;padding:0}.brand img{object-fit:contain;width:100%;height:100%;display:block}.brand b,.book-mark{display:none}@media (width<=780px){.brand{border-radius:0;width:76px;height:76px;padding:0}}.tap-zone{z-index:2;cursor:pointer;background:0 0;border:0;width:50%;padding:0;position:absolute;top:0;bottom:0}.tap-zone-left{cursor:w-resize;left:0}.tap-zone-right{cursor:e-resize;right:0}.tap-zone:disabled{pointer-events:none}@media (width<=780px){.tap-zone{cursor:pointer}}.header-actions .auto-play-button{color:#fff;background:linear-gradient(135deg,#ff777a,#ff555f);border-radius:28px;gap:8px;width:auto;min-width:154px;padding:0 18px;font-size:15px;font-weight:700;display:flex}.header-actions .auto-play-button.active{background:#173f65}@media (width<=780px){.header-actions .auto-play-button{width:auto;min-width:0;padding:0 12px;font-size:13px}.header-actions .auto-play-button .icon{width:19px;height:19px}}.scene-shade{background:linear-gradient(#04122614 0%,#0000 52%,#05163057 70%,#041228e6 100%)}.story-copy{width:min(700px,50vw);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;background:0 0;border:0;border-radius:0;padding:0;top:auto;bottom:92px}.story-copy.right,.story-copy.top-right{top:auto;left:auto;right:7vw;transform:none}.story-copy.left{top:auto;left:7vw;right:auto;transform:none}.kicker{display:none}.story-copy h1{color:#fff;letter-spacing:-.4px;text-shadow:0 3px 15px #03142ceb;margin:0 0 10px;font-size:clamp(32px,3.15vw,50px);line-height:1.16}.narration{color:#fff;text-shadow:0 2px 10px #031228fa;max-width:680px;font-size:clamp(18px,1.42vw,23px);font-weight:600;line-height:1.52}.choices{gap:10px;margin-top:15px}.choice{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe6;border-color:#fffc;min-height:70px;box-shadow:0 7px 20px #03142c33}.feedback{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#def7e9eb;box-shadow:0 5px 16px #03142c2b}.story-controls{bottom:18px}.pdf-button{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#09254cc7;border-color:#ffffffe0}@media (width<=780px){.scene-shade{background:linear-gradient(#0412260f 0%,#0000 45%,#04142d75 64%,#031024f0 100%)}.story-copy,.story-copy.right,.story-copy.top-right,.story-copy.left{width:auto;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;border-radius:0;padding:0;inset:auto 24px 104px;transform:none}.story-copy h1{color:#fff;text-shadow:0 3px 13px #031228fa;margin-bottom:7px;font-size:clamp(27px,7vw,35px);line-height:1.16}.narration{color:#fff;text-shadow:0 2px 9px #031228;font-size:16px;font-weight:600;line-height:1.48}.choices{gap:8px;margin-top:10px}.choice{border-radius:17px;min-height:60px;font-size:13px}.choice span{font-size:21px}.feedback{margin-top:8px;padding:8px 10px;font-size:12px}.story-controls{bottom:16px}.story-controls>a,.story-controls>button{background-color:#fffffff0}.listen-button{background:linear-gradient(135deg,#ff777a,#ff555f)}.story-controls .pdf-button{color:#fff;background:#09254cd1}}@media (width<=460px){.story-copy,.story-copy.right,.story-copy.top-right,.story-copy.left{padding:19px 20px 18px}.story-copy h1{font-size:25px}.narration{font-size:16px}.story-controls>a,.story-controls>button{font-size:0}.story-controls>a .icon,.story-controls>button .icon{width:24px;height:24px}.choices{grid-template-columns:1fr 1fr}.choice{padding:6px}}@media (width<=780px){.pagination div{display:none}.story-copy.cover h1{font-size:clamp(25px,6.4vw,32px)}}.scene{will-change:transform;width:106%;height:106%;inset:-3%}.scene.auto-motion.motion-0{animation:.55s both sceneIn,14s ease-in-out forwards kenBurnsIn}.scene.auto-motion.motion-1{animation:.55s both sceneIn,14s ease-in-out forwards kenBurnsRight}.scene.auto-motion.motion-2{animation:.55s both sceneIn,14s ease-in-out forwards kenBurnsOut}.scene.auto-motion.motion-3{animation:.55s both sceneIn,14s ease-in-out forwards kenBurnsLeft}.scene-shade.auto-motion{animation:4.5s ease-in-out infinite lightBreath}.dream-lights{z-index:1;pointer-events:none;opacity:0;transition:opacity .8s;position:absolute;inset:0;overflow:hidden}.dream-lights.active{opacity:.7}.dream-lights i{background:#ffe7a6;border-radius:50%;width:10px;height:10px;animation:6s ease-in-out infinite firefly;position:absolute;box-shadow:0 0 18px 7px #ffd87da6}.dream-lights i:first-child{animation-delay:-1s;top:37%;left:14%}.dream-lights i:nth-child(2){width:7px;height:7px;animation-delay:-3.8s;top:24%;left:71%}.dream-lights i:nth-child(3){width:8px;height:8px;animation-delay:-2.2s;top:57%;left:84%}.scene-transition{z-index:4;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#0e254633,#030c1cdb);transition:opacity .33s;position:absolute;inset:0}.scene-transition.active{opacity:1;animation:.82s both sceneDissolve}@keyframes kenBurnsIn{0%{transform:scale(1)}to{transform:scale(1.085)translate(-.8%,-.5%)}}@keyframes kenBurnsRight{0%{transform:scale(1.065)translate(-1.6%)}to{transform:scale(1.085)translate(1.2%,-.6%)}}@keyframes kenBurnsOut{0%{transform:scale(1.095)translate(.7%,-.8%)}to{transform:scale(1.025)translate(-.4%,.5%)}}@keyframes kenBurnsLeft{0%{transform:scale(1.06)translate(1.5%,.4%)}to{transform:scale(1.085)translate(-1.2%,-.5%)}}@keyframes lightBreath{0%,to{filter:brightness(.96)}50%{filter:brightness(1.08)}}@keyframes firefly{0%,to{opacity:.25;transform:translate(0,0)scale(.7)}35%{opacity:.9;transform:translate(18px,-24px)scale(1.1)}70%{opacity:.45;transform:translate(-12px,-42px)scale(.8)}}@keyframes sceneDissolve{0%{opacity:0}40%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.scene,.scene.auto-motion,.scene-shade.auto-motion,.dream-lights i{animation:none!important;transform:none!important}.dream-lights{display:none}}@page{size:A4 landscape;margin:0}@media print{html,body,#root{height:auto;overflow:visible}.story-viewport{display:none}.print-book{display:block}.print-sheet{page-break-after:always;background:#111;width:297mm;height:210mm;position:relative;overflow:hidden}.print-sheet:last-child{page-break-after:auto}.print-sheet>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.print-copy{color:#173f65;background:#fff9e6e8;border-radius:9mm;width:118mm;padding:10mm 11mm;position:absolute;top:16mm;left:16mm}.print-copy.right,.print-copy.top-right{left:auto;right:16mm}.print-copy>p{color:#e9545e;margin:0 0 3mm;font:700 14pt Mali,sans-serif}.print-copy h2{margin:0 0 5mm;font:700 25pt/1.3 Mali,sans-serif}.print-copy>div{font-size:16pt;line-height:1.6}.print-copy aside{background:#effbf5;border:1mm dashed #4cb89a;border-radius:5mm;margin-top:6mm;padding:4mm;font-size:13pt}.print-copy small{position:absolute;bottom:4mm;right:7mm}}