.stories-page,.reader-page{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:24px 18px 36px}.stories-hero{text-align:center;padding:12px 10px 24px}.stories-kicker{font-size:13px;letter-spacing:4px;font-weight:950;color:#ffd45a}.stories-hero h1{margin:7px 0 5px;font-size:clamp(42px,6vw,72px);line-height:.95;color:#fff;text-shadow:0 5px #4d56a0}.stories-hero p{font-size:17px;font-weight:700;color:#d8e0ff;margin:12px 0}.story-tools{background:#071044cc;border:1px solid #6571e688;border-radius:24px;padding:14px;box-shadow:0 10px 28px #0007;backdrop-filter:blur(8px);margin-bottom:20px}.story-search{display:flex;align-items:center;gap:9px;max-width:650px;margin:0 auto 13px;background:#020832aa;border:1px solid #7580c5;border-radius:18px;padding:0 15px;color:#fff;font-size:20px}.story-search input{width:100%;height:48px;border:0;outline:0;background:transparent;color:#fff;font:700 15px inherit}.story-search input::placeholder{color:#9eabd8}.story-filters{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.filter{border:1px solid #6674c7;background:#10195a;color:#eaf0ff;border-radius:18px;padding:8px 12px;font-weight:850;cursor:pointer}.filter:hover,.filter.active{background:#2b47a0;border-color:#64baff}.story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.story-card{border:2px solid #6679d8;background:#0a1250dd;border-radius:24px;overflow:hidden;box-shadow:0 10px 28px #0008;transition:.2s;min-width:0}.story-card:hover{transform:translateY(-6px);box-shadow:0 18px 35px #000a,0 0 25px #4d73ff55}.story-card[hidden]{display:none}.story-cover{height:145px;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid #ffffff33;background:linear-gradient(145deg,#173f9d,#15134c)}.story-cover:before{content:"";position:absolute;width:190px;height:80px;border-radius:50%;background:#ffffff20;filter:blur(14px);top:-20px;left:-30px}.story-emoji{font-size:72px;filter:drop-shadow(0 7px 5px #0008);position:relative;z-index:1}.story-category{position:absolute;left:12px;bottom:10px;background:#02062699;border:1px solid #ffffff44;border-radius:15px;padding:5px 9px;font-size:10px;font-weight:900;text-transform:uppercase;z-index:2}.favorite{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff66;background:#020626aa;color:#fff;font-size:22px;cursor:pointer;z-index:3}.favorite.saved{color:#ffd21c}.story-space{background:linear-gradient(145deg,#1455c9,#10175c)}.story-fantasy{background:linear-gradient(145deg,#7638c9,#26105e)}.story-animals{background:linear-gradient(145deg,#0c9c86,#08465c)}.story-adventure{background:linear-gradient(145deg,#e17b20,#7a2b42)}.story-robots{background:linear-gradient(145deg,#4d72d8,#1c286c)}.story-learning{background:linear-gradient(145deg,#d15b3e,#65255c)}.story-bedtime{background:linear-gradient(145deg,#29328f,#10143e)}.story-creative{background:linear-gradient(145deg,#c63eaa,#5330bd)}.story-card-body{padding:15px}.story-card-body h2{font-size:20px;margin:0 0 7px;color:#fff}.story-card-body p{font-size:13px;line-height:1.5;color:#cdd7ff;min-height:58px;margin:0 0 13px}.read-story{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;background:#2144a8;border:1px solid #69a8ff;border-radius:18px;padding:10px 12px;font-size:13px;font-weight:900}.read-story:hover{background:#2e5cc9}.no-stories{text-align:center;font-size:18px;font-weight:800;color:#dce5ff}.reader-head{text-align:center;padding-bottom:16px}.back-stories{display:inline-block;color:#bcd4ff;text-decoration:none;font-weight:850;margin-bottom:12px}.reader-category{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#ffd45a;font-weight:950}.reader-head h1{font-size:clamp(34px,5vw,60px);margin:8px 0;color:#fff;text-shadow:0 4px #4d56a0}.reader-head p{font-size:16px;color:#d6dfff;max-width:700px;margin:0 auto}.reader-scene{height:220px;max-width:850px;margin:0 auto 18px;border:2px solid #7286df;border-radius:30px;position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:0 16px 40px #0009}.scene-stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 1px,transparent 2px);background-size:45px 45px;opacity:.35}.scene-main{font-size:112px;filter:drop-shadow(0 12px 8px #0009);z-index:2}.scene-sparkle{position:absolute;bottom:22px;font-size:22px;color:#fff;letter-spacing:8px}.reader-controls{max-width:850px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.listen-btn,.control-btn,.speed-control{height:48px;border-radius:24px;border:1px solid #7186df;background:#071044e8;color:#fff;padding:0 16px;font-weight:900}.listen-btn{background:#e33d68;border-color:#ff7693;cursor:pointer}.listen-btn.active{box-shadow:0 0 25px #ff507b}.control-btn{cursor:pointer}.speed-control{display:flex;align-items:center;gap:7px}.speed-control select{background:#111b5a;color:#fff;border:1px solid #6878c4;border-radius:10px;padding:6px}.story-reader{max-width:850px;margin:0 auto;background:#071044e8;border:1px solid #7180d0;border-radius:30px;padding:24px;box-shadow:0 15px 38px #0008}.reader-progress{display:flex;align-items:center;gap:12px;color:#cbd6ff;font-size:12px;font-weight:900}.reader-progress>div{height:9px;flex:1;background:#02062d;border-radius:9px;overflow:hidden}.reader-progress i{display:block;width:0;height:100%;background:#45c6ff;transition:.2s}.story-page-text{font-size:clamp(20px,2.3vw,27px);line-height:1.9;color:#f7f8ff;padding:28px 8px 30px;min-height:280px;text-align:left}.read-word{border-radius:5px;transition:background .08s,color .08s}.read-word.reading{background:#ffd33d;color:#271d00;box-shadow:0 0 9px #ffd33d66}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-btn{border:1px solid #687ad0;background:#10195a;color:#fff;border-radius:20px;padding:10px 16px;font-weight:900;cursor:pointer}.page-btn.primary{background:#2854bb;border-color:#72b7ff}.page-btn:disabled{opacity:.35;cursor:not-allowed}.dot{width:9px;height:9px;border-radius:50%;border:0;background:#56649d;margin:0 3px;cursor:pointer}.dot.active{background:#ffd33d;box-shadow:0 0 10px #ffd33d}.story-tip{max-width:850px;margin:14px auto 0;text-align:center;color:#c6d1f7;font-size:13px}.reader-error{text-align:center;background:#071044e8;border:1px solid #7180d0;border-radius:30px;padding:50px}.reader-error>div{font-size:70px}.reader-error h1{font-size:36px}.reader-error p{color:#ccd7ff}
@media(max-width:1000px){.story-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.story-grid{grid-template-columns:repeat(2,1fr)}.reader-scene{height:180px}.scene-main{font-size:85px}.story-page-text{font-size:20px;line-height:1.8}.story-reader{padding:18px}.reader-nav{flex-wrap:wrap;justify-content:center}.reader-progress{width:100%}}@media(max-width:520px){.stories-page,.reader-page{padding:18px 10px 28px}.stories-hero h1{font-size:42px}.stories-hero p{font-size:14px}.story-grid{grid-template-columns:1fr 1fr;gap:10px}.story-cover{height:125px}.story-emoji{font-size:58px}.story-card-body{padding:11px}.story-card-body h2{font-size:16px}.story-card-body p{font-size:11px;min-height:75px}.read-story{font-size:11px;padding:9px}.favorite{width:33px;height:33px}.reader-controls{gap:7px}.listen-btn,.control-btn,.speed-control{font-size:12px;padding:0 12px}.reader-head h1{font-size:35px}.story-page-text{font-size:19px;min-height:330px;padding:22px 3px}.reader-scene{height:150px}.scene-main{font-size:70px}}
/* Bilingual story controls and comfortable reader chunks */
.language-switch{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:0 auto 14px;color:#cdd7ff;font-size:13px;font-weight:900}.language-btn,.reader-lang{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:#eaf0ff;background:#10195a;border:1px solid #6674c7;border-radius:18px;padding:8px 13px;font-weight:900}.language-btn.active,.language-btn:hover,.reader-lang.active,.reader-lang:hover{background:#2b47a0;border-color:#64baff}.reader-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:850px;margin:0 auto 12px}.reader-language{display:flex;gap:7px;flex-wrap:wrap}.reader-lang{font-size:12px;padding:7px 11px}.reader-topline .back-stories{margin:0}.story-page-text{font-size:clamp(21px,2.45vw,29px);line-height:1.9;max-width:780px;margin:0 auto;min-height:360px}.story-page-text:focus{outline:2px solid #64baff;outline-offset:6px;border-radius:12px}@media(max-width:650px){.reader-topline{align-items:flex-start;flex-direction:column}.reader-language{width:100%;justify-content:center}.story-page-text{font-size:20px;line-height:1.85;min-height:360px}}