:root{--ink:#17324d;--blue:#3979d8;--orange:#f47c20;--gold:#f7c948;--green:#2e9b58;--purple:#7445d4;--pink:#e83478;--teal:#1897a8;--white:#fff;--good:#16823d;--bad:#b42318;--shadow:0 14px 34px rgba(43,67,91,.16)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(180deg,#dff5ff 0,#fff9e8 48%,#f4f0dc 100%);min-height:100vh;overflow-x:hidden}button,input{font:inherit}.app-shell{max-width:1220px;margin:auto;padding:22px;position:relative;z-index:2}.hero{position:relative;overflow:hidden;min-height:175px;border-radius:28px;padding:30px 36px;background:linear-gradient(135deg,#8ed7ff,#c9efff 58%,#fff3c2);box-shadow:var(--shadow);display:flex;align-items:center}.hero-copy{z-index:2}.eyebrow{display:inline-block;background:#ffffffd9;padding:6px 12px;border-radius:999px;font-weight:800;color:#5a4a1b}.hero h1{font-size:clamp(2.5rem,6vw,4.8rem);line-height:.95;margin:13px 0 8px;color:#5f2ca8;letter-spacing:-2px;text-shadow:0 3px #fff}.hero p{font-size:1.25rem;margin:0;font-weight:800}.hero-leaves{position:absolute;right:4%;font-size:clamp(4rem,10vw,8rem);transform:rotate(-8deg);filter:drop-shadow(0 10px 9px #0002)}
.content-grid{display:grid;grid-template-columns:.9fr 1.25fr;gap:24px;margin-top:24px;align-items:start}.card{background:#ffffffee;border-radius:26px;box-shadow:var(--shadow);border:1px solid #718da833}.poem-card{padding:24px;position:sticky;top:14px}.card-title-row,.quiz-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.card h2{font-size:1.65rem;margin:0}.audio-actions{display:flex;gap:8px;flex-wrap:wrap}.primary-btn,.secondary-btn,.hint{border:0;border-radius:14px;padding:11px 15px;font-weight:800;cursor:pointer}.primary-btn{background:#199447;color:#fff;box-shadow:0 6px 0 #0f6730}.secondary-btn{background:#fff0ed;color:#bd2a20;border:1px solid #f0bbb6}.hint{background:#fff;color:#2f68c7;border:2px solid #b7d0ff;padding:8px 11px}.voice-note{font-size:.84rem;background:#fff4cc;border:1px solid #edcf63;padding:9px 11px;border-radius:12px;margin:14px 0;color:#695200}.poem-scene{position:relative;min-height:690px;overflow:hidden;border-radius:24px;border:3px solid #e2a233;background:linear-gradient(#a9e5ff 0 34%,#fff8d5 67%,#e8b54e 100%);padding:34px 22px 34px 155px}.poem-scene:after{content:"";position:absolute;inset:auto 0 0 0;height:24%;background:radial-gradient(ellipse at center,#b35f20 0 7%,transparent 8%) 0 0/55px 35px,linear-gradient(#d58a31,#bd6927);opacity:.6}.poem-text{position:relative;z-index:3;text-align:center;color:#2a271f;font-weight:800;text-shadow:0 2px #fff}.poem-text h3{font-size:clamp(2rem,4vw,3.2rem);margin:4px 0 18px;color:#6d2f10}.poem-text p{font-size:clamp(1.28rem,2.2vw,1.9rem);line-height:1.42;margin:0 0 20px}.tree{position:absolute;left:0;top:0;bottom:0;width:185px;z-index:1}.trunk{position:absolute;left:35px;top:130px;width:72px;height:590px;background:linear-gradient(90deg,#6c351b,#9b5128,#633018);border-radius:45% 40% 10px 10px;transform:rotate(2deg)}.crown{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb02e 0 14%,#ed6b20 42%,#a93221 75%);box-shadow:45px 20px 0 #d84b23,-20px 45px 0 #f28a25}.c-a{width:145px;height:130px;left:5px;top:18px}.c-b{width:125px;height:115px;left:70px;top:60px}.c-c{width:110px;height:100px;left:-20px;top:95px}.scene-leaf{position:absolute;font-size:48px;z-index:4;animation:drift 5s ease-in-out infinite}.l1{right:18px;top:105px}.l2{right:55px;top:260px;animation-delay:1.2s}.l3{left:105px;top:390px;animation-delay:2.1s}.l4{right:100px;bottom:90px;animation-delay:.5s}@keyframes drift{0%,100%{transform:translate(0,0) rotate(-15deg)}50%{transform:translate(-22px,38px) rotate(28deg)}}
.quiz-card{padding:26px}.progress-pill{background:#eef4ff;color:#325ea2;border-radius:999px;padding:7px 12px;font-weight:800}.question{position:relative;margin:0 0 11px;padding:16px 132px 16px 18px;border-radius:18px;background:#f8fbff;border-left:7px solid var(--blue);min-height:102px}.q2{border-left-color:var(--purple);background:#fbf8ff}.q3{border-left-color:var(--orange);background:#fff9f4}.q4{border-left-color:var(--green);background:#f5fff7}.q5{border-left-color:var(--pink);background:#fff6fa}.q6{border-left-color:var(--teal);background:#f2fcfd}.q7{border-left-color:#2f68c7;background:#f6f9ff}.q8{border-left-color:var(--purple);background:#fbf7ff}.question label{display:block;font-weight:800;font-size:1.05rem;margin-bottom:9px}.question input[type=text]{width:100%;border:2px solid #ccd6df;border-radius:12px;padding:10px 12px;background:#fff}.question input:focus{outline:3px solid #8dbbff45;border-color:#77a7ea}.question .hint{position:absolute;right:15px;top:33px}.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.feedback{min-height:18px;margin-top:6px;font-size:.9rem;font-weight:800}.correct{color:var(--good)}.incorrect{color:var(--bad)}.quiz-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:15px}.big{font-size:1rem;padding:13px 18px}.result-box{display:none;margin-top:18px;padding:16px;border-radius:18px;background:#eaf8f1;border:2px solid #a7dfc3;font-weight:800}.result-box.show{display:block}footer{text-align:center;padding:20px;color:#68747e;font-size:.9rem}
.leaf-layer{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}.falling-leaf{position:absolute;top:-12vh;font-size:34px;animation:fall linear infinite;opacity:.9}@keyframes fall{0%{transform:translate3d(0,-10vh,0) rotate(0deg)}100%{transform:translate3d(var(--sway),115vh,0) rotate(720deg)}}
.celebration-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:#08213d33;pointer-events:none}.celebration-overlay.show{display:flex}.celebration-message{z-index:3;background:#fffffff7;border:4px solid var(--gold);border-radius:28px;padding:24px 34px;text-align:center;box-shadow:0 18px 50px #14375a47;font-weight:900;color:#7b2ca6;font-size:clamp(1.7rem,5vw,3.1rem);animation:pop .55s cubic-bezier(.2,.9,.3,1.25)}.celebration-message small{display:block;margin-top:8px;font-size:.5em;color:#16823d}.firework{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 -55px 0 #ffd95a,39px -39px 0 #ff6b6b,55px 0 0 #69bfff,39px 39px 0 #61d394,0 55px 0 #a78bfa,-39px 39px 0 #ff8b4d,-55px 0 0 #ffd95a,-39px -39px 0 #69bfff;animation:burst 1.15s ease-out infinite;opacity:0}.f1{left:18%;top:28%}.f2{right:18%;top:22%;animation-delay:.28s}.f3{left:26%;bottom:20%;animation-delay:.55s}.f4{right:24%;bottom:18%;animation-delay:.78s}@keyframes burst{0%{transform:scale(.15);opacity:0}18%{opacity:1}70%{opacity:1}100%{transform:scale(1.85);opacity:0}}@keyframes pop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}.poem-card{position:relative;top:auto}.question{padding-right:18px;padding-bottom:55px}.question .hint{top:auto;bottom:12px}.poem-scene{min-height:620px}}@media(max-width:560px){.app-shell{padding:12px}.hero{padding:24px}.hero-leaves{opacity:.45}.poem-card,.quiz-card{padding:16px}.card-title-row{flex-direction:column;align-items:flex-start}.audio-actions{width:100%}.audio-actions button{flex:1}.poem-scene{padding-left:105px;min-height:610px}.tree{transform:scale(.75);transform-origin:left top}.triple{grid-template-columns:1fr}.quiz-actions button{width:100%}}

/* Poem image replacement: preserves the rest of the activity unchanged. */
.poem-scene.poem-image-scene{min-height:0;padding:0;background:none;border:3px solid #e2a233;overflow:hidden}
.poem-scene.poem-image-scene:after{display:none}
.poem-image-scene img{display:block;width:100%;height:auto;border-radius:21px}
@media(max-width:900px){.poem-scene.poem-image-scene{min-height:0}}
@media(max-width:560px){.poem-scene.poem-image-scene{min-height:0;padding:0}}