*{box-sizing:border-box}body{margin:0;background:#1b2341;color:#fff5d5;font-family:'Courier New',monospace}main{width:min(1280px,98vw);margin:auto;padding:10px;display:flex;flex-direction:column;gap:9px;min-height:100dvh}header{display:flex;align-items:center;gap:10px;background:#58351e;border:4px solid #131d32;padding:7px}header a{color:#ffe277;text-decoration:none;font-size:29px;padding:0 8px}header img{width:42px;height:49px;object-fit:cover;object-position:20% 30%;border:2px solid #1b2341}h1{font-size:clamp(18px,2.4vw,28px);margin:0;flex:1}button,select,input,a.button{font:700 17px 'Courier New',monospace;color:#163249;border:3px solid #17354b;background:#6cc9ff;padding:9px;box-shadow:3px 3px #10182c;min-height:44px}button,a.button{cursor:pointer;touch-action:manipulation}button:hover,a.button:hover{background:#b2e9ff}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:4px solid #eaa630;outline-offset:3px}button:disabled{opacity:.6;cursor:default}header button{font-size:22px;min-width:47px}select{max-width:350px;background:#fff5d5}nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#263d59;padding:9px}nav small{color:#ffe277}[hidden]{display:none!important}#scene{position:relative;border:6px solid #12263c;background:#b8e2e7;box-shadow:5px 5px #0b1427;min-height:200px;flex:1;overflow:hidden}#scene svg{width:100%;height:100%;display:block;position:absolute;inset:0}#page{background:#fff4cf;color:#18364d;border:4px solid #142c43;padding:14px;display:flex;flex-direction:column;gap:12px;align-items:center;flex-shrink:0}.sentence-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}.sentence{font-size:clamp(21px,2.7vw,31px);font-weight:bold;line-height:1.65;text-align:center;margin:0}.sentence input{font-size:inherit;font-weight:900;background:#fffdf4;box-shadow:none;letter-spacing:2px;width:clamp(95px,14vw,155px);padding:3px 6px;text-align:center;border-bottom:5px solid #316b89;vertical-align:middle;min-height:45px}.sentence input.valid{border-color:#359b70;background:#e7ffe9}.sentence strong{background:#ffdf81;padding:3px 6px}.read-button{flex-shrink:0;font-size:22px}.suggestions{display:flex;justify-content:center;gap:14px;flex-wrap:nowrap;width:100%;max-width:690px}.suggestion{flex:1;min-width:0;background:#e4f0dc;border:3px solid #8ca68b;padding:7px 10px;display:flex;gap:9px;align-items:center;justify-content:center}.suggestion.matched{border-color:#218c65;background:#c8efd7}.suggestion .picture{font-size:31px;line-height:1}.suggestion .word{font-size:clamp(23px,2.7vw,32px);font-weight:900}.suggestion button{padding:5px;min-width:43px;box-shadow:2px 2px #18364d}.writing-actions,.book-controls{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap}#nextWord{background:#86dda6;font-size:27px;min-width:90px;padding:7px 19px}.dots{display:flex;align-items:center;gap:7px}.dots span{width:13px;height:13px;border:2px solid #6e8e8e;background:#d6e1cf;border-radius:50%}.dots span.done{background:#65c895}.dots span.now{background:#ffd26c;border-color:#775526}#feedback{font-size:15px;min-height:20px;margin:0;text-align:center;color:#ffe18a}.welcome{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}.welcome p{font-size:clamp(20px,2.5vw,28px);font-weight:bold;margin:0}.welcome #start{font-size:34px;background:#89e3a4;min-width:100px}.book-controls button{font-size:21px}.book-controls #playStory{background:#89e3a4;min-width:150px}.book-controls a{font-size:21px;text-decoration:none}.animating .story-actor{filter:drop-shadow(0 0 5px #ffd96b)}.story-hop{transform-box:fill-box;transform-origin:center bottom;animation:story-hop .8s steps(4) infinite}.story-run{transform-box:fill-box;transform-origin:center;animation:story-run .8s steps(4) infinite}.story-nap{transform-box:fill-box;transform-origin:center;animation:story-rest 1.4s ease-in-out infinite}.story-spin{transform-box:fill-box;transform-origin:center;animation:story-spin 1.5s linear infinite}.story-sing{transform-box:fill-box;transform-origin:center bottom;animation:story-sing .7s ease-in-out infinite}.alien-wave{transform-box:fill-box;transform-origin:left bottom;animation:alien-wave 1s steps(3) infinite}.spill-dot{animation:spill-fall 1.3s ease-out infinite;transform-box:fill-box;transform-origin:center}.spill-dot:nth-child(2n){animation-delay:.35s}.note{animation:float-note 1.4s ease-out infinite}.note.n2{animation-delay:.6s}.star-spark{animation:star-spark 1.2s steps(2) infinite}.nap-z{animation:float-note 2s ease-in-out infinite}.scene-bubble{font:bold 29px 'Courier New',monospace;fill:#18364d}.scene-title{font:bold 19px 'Courier New',monospace;fill:#42636a}@keyframes story-hop{50%{transform:translateY(-28px)}}@keyframes story-run{25%{transform:translateX(24px) rotate(7deg)}75%{transform:translateX(-24px) rotate(-7deg)}}@keyframes story-rest{50%{transform:scaleY(.94)}}@keyframes story-spin{to{transform:rotate(360deg)}}@keyframes story-sing{50%{transform:rotate(6deg) scale(1.03)}}@keyframes alien-wave{50%{transform:rotate(-18deg)}}@keyframes spill-fall{from{transform:translateY(-13px);opacity:.2}70%{opacity:1}to{transform:translateY(12px);opacity:.6}}@keyframes float-note{50%{transform:translateY(-14px);opacity:.5}}@keyframes star-spark{50%{opacity:.3;transform:scale(.85)}}@media(min-width:900px) and (min-height:580px){main{height:100dvh;min-height:0;overflow:hidden}#scene{min-height:0}#page{gap:8px;padding:9px}header{flex-shrink:0}#feedback{flex-shrink:0}}@media(max-height:700px) and (min-width:900px){main{gap:6px}header img{height:40px;width:35px}header{padding:4px}#page{gap:5px;padding:6px}.sentence{font-size:24px}.suggestion{padding:4px 7px}.suggestion .word{font-size:25px}.suggestion .picture{font-size:25px}#nextWord{min-height:40px;font-size:23px}.sentence input{min-height:39px}#scene{min-height:145px}#feedback{min-height:18px;font-size:13px}}@media(max-width:650px){main{padding:7px;gap:7px}header{gap:6px;padding:5px}header img{display:none}header h1{font-size:18px}header a{font-size:25px;padding:2px}header button{min-width:40px;padding:5px;font-size:21px}#scene{flex:none;height:250px;min-height:200px}#page{padding:9px;gap:10px}.sentence{font-size:23px;line-height:1.75}.sentence-row{gap:5px}.sentence input{width:105px;font-size:24px;padding:3px}.read-button{padding:5px;min-width:40px}.suggestions{gap:6px}.suggestion{flex-direction:column;gap:5px;padding:6px 3px}.suggestion .word{font-size:25px}.suggestion .picture{font-size:29px}.suggestion button{font-size:20px;min-height:42px}.book-controls{gap:9px}.book-controls #playStory{min-width:105px}nav select{max-width:270px;font-size:13px}.welcome{gap:10px}.welcome p{font-size:21px}}
.animating[data-active="0"] .story-actor{animation:story-arrive .8s ease-out both}.animating[data-active="1"][data-kind="pet"] .story-outfit{animation:story-dress .7s ease-out both}.animating[data-active="1"][data-kind="snack"] .story-actor{animation:story-grow .7s ease-out both;transform-box:fill-box;transform-origin:center bottom}#scene[data-shout="hey"] .alien-wave{animation-duration:.35s}#scene[data-shout="yay"] .alien-wave{animation-duration:.5s}@keyframes story-arrive{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}@keyframes story-dress{from{opacity:0;transform:translateY(-45px)}to{opacity:1;transform:translateY(0)}}@keyframes story-grow{from{transform:scale(.7)}to{transform:scale(1)}}