:root{font-family:Inter,Arial,"Segoe UI",sans-serif;color:#2c2940;background:#f8f7ff;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:20px;background:radial-gradient(ellipse at 15% 5%,#e6e0ff 0,transparent 33%),radial-gradient(ellipse at 90% 45%,#ffeaca 0,transparent 30%),#f8f7ff}.app-shell{width:min(100%,790px);margin:0 auto}.topbar{height:50px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.brand{display:flex;align-items:center;gap:9px;color:#302c48;text-decoration:none;font-size:16px;font-weight:850}.brand-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:#7769d7;color:#fff;font-size:16px}.brand-light{color:#786bd0;margin-right:3px}.grade{padding:8px 12px;border:1px solid #e8e3f5;border-radius:18px;background:#ffffffb9;color:#766d91;font-size:11px;font-weight:750}.intro{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:220px;padding:30px 40px;border-radius:25px;background:linear-gradient(110deg,#ece8ff,#f5f1ff 62%,#fff1d9);overflow:hidden}.intro:after{content:"";position:absolute;right:21%;top:-90px;width:290px;height:290px;border:1px solid #fff9;border-radius:50%}.intro-text{z-index:1}.eyebrow{margin:0 0 10px;color:#8374d2;font-size:10px;font-weight:850;letter-spacing:.12em}.intro h1{margin:0;font-size:clamp(37px,7vw,55px);line-height:1.03;letter-spacing:-.06em}.intro h1 span{color:#7769d7}.subtitle{max-width:420px;margin:14px 0 0;color:#747184;font-size:13px;line-height:1.7}.character{position:relative;z-index:1;width:150px;height:145px;margin-left:25px;flex:none;display:grid;place-items:center}.book{position:relative;width:107px;height:82px;display:flex;transform:rotate(-5deg);filter:drop-shadow(0 11px 6px #4e41882c);animation:float 3s ease-in-out infinite}.book:before{content:"";position:absolute;left:50%;top:2px;bottom:0;width:9px;border-radius:5px;background:#554898;transform:translateX(-50%);z-index:2}.book-page{position:relative;width:50%;height:76px;background:#fffdf7;border:4px solid #6658b6}.left-page{border-radius:10px 2px 3px 10px;border-left-width:6px}.right-page{border-radius:2px 10px 10px 3px;padding:9px 9px 0 12px;color:#7367c9;font-size:18px;font-weight:900;text-align:center}.right-page i{display:block;height:3px;margin:6px 0;border-radius:3px;background:#d8d1f7}.book-shadow{position:absolute;bottom:16px;width:90px;height:9px;border-radius:50%;background:#5e4fa022;filter:blur(3px)}.star{position:absolute;color:#ffb950;animation:twinkle 1.6s ease-in-out infinite}.star-a{top:15px;left:12px;font-size:22px}.star-b{right:7px;bottom:30px;font-size:18px;animation-delay:.7s}.story-card{margin-top:16px;padding:23px 25px 22px;border:1px solid #edeaf2;border-radius:22px;background:#fff;box-shadow:0 13px 38px #3930520b}.story-meta{display:flex;align-items:center;justify-content:space-between}.story-label{display:flex;align-items:center;gap:7px;color:#6e6980;font-size:10px;font-weight:750}.story-label i{width:7px;height:7px;border-radius:50%;background:#55c79c;box-shadow:0 0 0 4px #e8f8f1}.level-tag{padding:6px 9px;border-radius:9px;background:#f1efff;color:#7b6dcc;font-size:9px;font-weight:800}.story-card h2{margin:13px 0 8px;font-size:20px;letter-spacing:-.03em}.story-text{margin:8px 0 10px;padding:13px 15px;border-radius:12px;background:#faf9ff;color:#3d3855;font-size:17px;line-height:1.85;text-align:left}.hidden{display:none!important}.transcript-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.text-toggle{padding:0;border:0;background:transparent;color:#7d70ca;font:inherit;font-size:10px;font-weight:750;cursor:pointer}.read-status{color:#a09baa;font-size:9px}.listen-row{display:flex;gap:9px;margin-top:14px}.listen{height:46px;border:0;border-radius:12px;font:inherit;font-weight:800;cursor:pointer}.primary{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;background:#786bd0;color:#fff;font-size:13px;box-shadow:0 6px 14px #786bd02b;transition:transform .15s,background .15s}.primary:hover:not(:disabled){transform:translateY(-1px);background:#685ac1}.play-icon{font-size:12px}.replay{width:48px;background:#f1efff;color:#796dbe;font-size:21px}.replay:disabled{opacity:.4;cursor:default}.divider{height:1px;margin:19px 0 14px;background:#f0edf4}.question-kicker{margin:0 0 5px;color:#928ba4;font-size:9px;font-weight:800;letter-spacing:.08em}.question-area h3{margin:0 0 12px;font-size:16px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.answer{min-height:42px;padding:9px 11px;border:1px solid #ebe8f0;border-radius:11px;background:white;color:#4c485d;text-align:right;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}.answer:hover:not(:disabled){border-color:#a89ce7;background:#fcfbff}.answer:disabled{cursor:default}.answer.correct{border-color:#75cfaa;background:#effbf5;color:#287b5d}.answer.wrong{border-color:#f0a1a1;background:#fff3f2;color:#ac5353}.feedback{min-height:17px;margin:9px 1px 6px;color:#817c8d;font-size:11px}.feedback.good{color:#287b5d;font-weight:750}.feedback.bad{color:#ac5353;font-weight:750}.next{display:block;width:100%;margin-top:8px;padding:11px;border:0;border-radius:11px;background:#4cbb91;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.next span{float:left}.tip{display:flex;align-items:center;gap:7px;margin:12px 4px 0;color:#938ea0;font-size:10px}footer{display:flex;justify-content:space-between;padding:18px 4px 0;color:#aaa6b2;font-size:9px}footer a{color:#8274cf;text-decoration:none;font-weight:750}@keyframes float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-8px) rotate(-1deg)}}@keyframes twinkle{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.15);opacity:1}}@media(max-width:600px){body{padding:12px}.intro{min-height:200px;padding:24px 22px}.intro h1{font-size:42px}.subtitle{max-width:270px;font-size:12px}.character{position:absolute;left:2px;bottom:0;width:120px;transform:scale(.8);transform-origin:bottom left;opacity:.9}.intro-text{max-width:78%}.story-card{padding:19px 16px}.story-card h2{font-size:18px}.answers{gap:7px}.answer{font-size:11px}.read-status{font-size:8px}.grade{font-size:10px}}@media(max-width:380px){.intro h1{font-size:36px}.intro-text{max-width:83%}.subtitle{max-width:235px}.character{opacity:.65}}