*,*::before,*::after{animation:none!important}
body,.sidebar,.reader,.reader-header,.reader-controls,.card,.btn,.icon-btn,.theme-select{transition:background-color .22s ease,color .22s ease,border-color .22s ease}


.fireflies{display:none!important}.book-cover img,.book-card:hover .book-cover img{transform:none!important;transition:none!important}
.btn,.icon-btn{transition:transform .16s ease,box-shadow .16s ease,background-color .22s ease}.progress span,.mobile-progress{transition:width .24s ease}
.hero{padding:62px 0 58px;background:radial-gradient(circle at 86% 17%,rgba(241,184,75,.18),transparent 18%),radial-gradient(circle at 70% 85%,rgba(47,117,91,.12),transparent 25%),linear-gradient(145deg,var(--cream),color-mix(in srgb,var(--violet) 9%,var(--cream)))}
.hero::before{content:"☁  ✦  ☾";position:absolute;right:5%;top:10%;font-size:clamp(1.5rem,4vw,3.2rem);letter-spacing:1.4rem;color:color-mix(in srgb,var(--gold) 55%,transparent);opacity:.55}
.hero-grid{gap:38px}.hero-art{max-width:410px}.hero-art img{width:78%}.trust-line{font-weight:650}.landing-books .book-category{display:block}
.mock-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:30px 18px;color:#fff8e8;background:linear-gradient(160deg,#273f65,#7657a7)}
.mock-cover>span{margin:auto;font-size:clamp(3rem,6vw,5rem);filter:drop-shadow(0 8px 16px #0004)}.mock-cover strong{font:700 1.25rem/1.1 var(--font-display)}.mock-cover small{margin-top:8px;opacity:.78;text-transform:uppercase;letter-spacing:.1em}
.mock-cover.moonberry{background:linear-gradient(160deg,#162a56,#7657a7)}.mock-cover.cloud{background:linear-gradient(160deg,#4f87a1,#8fbdad)}.mock-cover.star{background:linear-gradient(160deg,#733e65,#c17068)}.mock-cover.owl{background:linear-gradient(160deg,#172d49,#315944)}.mock-cover.river{background:linear-gradient(160deg,#17556b,#358e91)}.mock-cover.roar{background:linear-gradient(160deg,#9b4d2d,#e5a34d)}.mock-cover.post{background:linear-gradient(160deg,#27344e,#397359)}
.book-category{color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.welcome{grid-template-columns:1fr 340px;padding:42px;background:radial-gradient(circle at 82% 24%,rgba(241,184,75,.28),transparent 24%),linear-gradient(125deg,var(--navy-2),var(--violet))}
.welcome img{height:300px;width:215px}.chip{min-height:48px;padding-inline:20px;font-size:.95rem}.sidebar nav{gap:12px}.sidebar nav a{min-height:48px;display:flex;align-items:center;gap:12px}
button:disabled{opacity:var(--disabled-opacity);cursor:not-allowed;transform:none!important}
@media(max-width:720px){.hero{padding:32px 0 38px}.hero::before{top:4%;right:0;font-size:1.3rem}.hero-grid{gap:22px}.hero h1{font-size:clamp(2.55rem,13vw,3.15rem);margin-bottom:14px}.hero p{font-size:1rem}.hero-actions{margin:20px 0}.hero-art{max-width:245px}.hero-art img{width:72%}.welcome{padding:28px}.dash-main{padding-bottom:92px}.mobile-bar{height:72px}.dash-section:last-of-type{margin-bottom:72px}}

@media(max-width:370px){.dash-section .book-card{min-width:calc(100vw - 32px)}}

@media(max-width:720px){.reader-stage{overflow:visible!important}.reader-body{overflow-y:auto!important}.reader{height:auto!important;min-height:100vh}.reader-controls{position:sticky!important;bottom:0}.page-media{width:min(100%,300px)!important;height:auto!important}}
.logo-dark{display:none}[data-theme="dark"] .logo-light{display:none}[data-theme="dark"] .logo-dark{display:block}[data-theme="light"] .logo-light{display:block}[data-theme="light"] .logo-dark{display:none}
@media(prefers-color-scheme:dark){[data-theme="system"] .logo-light{display:none}[data-theme="system"] .logo-dark{display:block}}
.brand-symbol{display:none;width:48px;height:48px;object-fit:contain}.sidebar .logo-light{display:none!important}.sidebar .logo-dark{display:block!important}.dash-mobile-brand{display:none;width:44px;height:44px;overflow:hidden;flex:0 0 44px}.dash-mobile-brand img,.reader-title img{width:44px;height:44px;object-fit:contain}.reader-title{display:flex;align-items:center;justify-content:center;gap:7px}.reader-title>span{display:block}.reader-title small{display:block;font-size:.8rem;color:var(--muted)}
.page-media>#page-image{visibility:visible!important;position:relative;z-index:1;transition:opacity .14s ease}.page-media.page-changing>#page-image{opacity:.72}.page-media>#pageflip{display:none!important}
.filters{scrollbar-width:none;-ms-overflow-style:none}.filters::-webkit-scrollbar{display:none}
@media(max-width:1000px){.sidebar .brand-symbol{display:block}}
@media(max-width:720px){.dash-mobile-brand{display:block}.dash-top{gap:9px}.dash-top .search{min-width:0;padding-inline:14px}.welcome{grid-template-columns:1fr!important}.welcome h1{font-size:clamp(2.15rem,11vw,2.8rem)!important;max-width:330px}.dash-main{padding-bottom:130px!important}.dash-section:last-of-type{margin-bottom:90px}.reader-title img{width:38px;height:38px}.reader-title small{font-size:.72rem}}
@media(max-width:480px){.dash-mobile-brand{width:38px;height:38px;flex-basis:38px}.dash-mobile-brand img{width:38px;height:38px}.dash-top .avatar{display:none}}
@media(prefers-reduced-motion:reduce){.page-media>#page-image{transition:none}}
.reader-title>span{font-size:1rem!important;color:inherit!important}
.page-media.media-missing{display:grid;place-items:center;background:linear-gradient(145deg,#10243a,#18375b)}.page-media.media-missing::before{content:"Illustration unavailable";font:700 1rem var(--font-ui);color:#fff8e8}
.page-media img,.page-media video{object-fit:contain!important}.page-media video{z-index:2;background:#071525}.page-media figcaption[hidden]{display:none}.reader-controls{padding-inline:24px}.control-left,.control-right{min-width:50px}.control-right{justify-content:flex-end}
@media(max-width:720px){.control-left,.control-right{min-width:44px}.reader-controls{padding-inline:10px}.page-media video{max-width:100%}}
@media(max-width:720px){
 .reader{grid-template-rows:58px auto auto!important}
 .reader-stage{padding-bottom:190px!important;scroll-padding-bottom:180px}
 .reader-controls{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:minmax(44px,auto);gap:7px!important;padding:8px 10px 10px!important}
 .control-center{display:grid!important;grid-template-columns:1fr 1fr!important;grid-column:1/-1;grid-row:1;width:100%;gap:7px}
 .control-center #read,.control-center #pause-reading{display:block!important;width:100%}.control-center #restart,.control-center .narration-settings,.control-center .page-dots{display:none!important}
 .control-left,.control-right{display:contents!important}.reader-controls button{width:100%;padding:0 10px!important}
 #sound{grid-column:1;grid-row:2}#motion{grid-column:2;grid-row:2}#prev{grid-column:1;grid-row:3}#next{grid-column:2;grid-row:3}
}

/* Experience refinement */
.hero::before{content:none!important}.hero h1,.story-copy h1,.dashboard h1,.dashboard h2,.category h3{font-family:var(--font-display)}body,.story-copy p,.reader-controls,.dashboard{font-family:var(--font-ui)}
.hero-art::after{background:radial-gradient(circle,rgba(241,184,75,.42),transparent 68%)!important;inset:-5%!important;transform:none!important;opacity:.42!important;animation:hero-lantern-breath 11s ease-in-out infinite!important}.welcome img{animation:cover-lantern-breath 12s ease-in-out infinite!important}
@keyframes hero-lantern-breath{50%{opacity:.62;filter:brightness(1.07)}}@keyframes cover-lantern-breath{50%{box-shadow:0 20px 58px rgba(241,184,75,.38);filter:brightness(1.035)}}
.welcome .progress{max-width:410px;background:rgba(255,255,255,.18);margin:18px 0}.welcome .progress span{background:linear-gradient(90deg,#ffd46d,#fff0b0)}
.reading-companion{display:grid;gap:8px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.055)}.reading-companion strong{font-family:var(--font-display);color:#ffd77a}.reading-companion span{font-size:.85rem}.reading-companion small{color:#b9c7d7}.reading-companion .btn{min-height:40px;margin-top:4px}
.dash-section .book-grid{display:flex;overflow-x:auto;overflow-y:visible;gap:22px;padding:8px 4px 20px;scroll-snap-type:x proximity;scrollbar-width:none}.dash-section .book-grid::-webkit-scrollbar{display:none}.dash-section .book-card{flex:0 0 clamp(185px,18vw,225px);scroll-snap-align:start;transition:transform .22s ease,filter .22s ease}.book-card .book-cover{transition:box-shadow .22s ease,border-color .22s ease;border:1px solid transparent}.book-card:hover,.book-card:focus-within{transform:translateY(-5px)}.book-card:hover .book-cover,.book-card:focus-within .book-cover{box-shadow:0 20px 48px rgba(241,184,75,.24);border-color:rgba(241,184,75,.55)}.book-card .btn{opacity:.82}.book-card:hover .btn,.book-card:focus-within .btn{opacity:1}
.card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:var(--navy)}.card-preview[hidden]{display:none}
.card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.card-actions>.btn{width:100%;padding-inline:10px}.card-actions>.btn:only-child{grid-column:1/-1}
.story-copy h1{font-size:clamp(2.125rem,3.2vw,2.75rem)!important;max-width:18ch;margin:8px 0 16px}.story-copy .page-label{font-family:var(--font-ui);font-size:clamp(.75rem,.9vw,.875rem)}.story-copy p{font-family:var(--font-ui)!important;font-size:clamp(1.3125rem,1.65vw,1.5625rem)!important;line-height:1.58}.reader-stage{transition:opacity .15s ease,transform .15s ease}.reader-stage.page-leaving{opacity:.25;transform:translateX(-18px)}.reader-stage.page-entering{opacity:.25;transform:translateX(18px)}
.settings-panel select{width:100%}.narration-settings summary{font-family:var(--font-ui)}#narration-primary{min-width:138px}
.reader-controls .control-center{justify-content:center}
@media(max-width:720px){
 .story-copy h1{font-size:clamp(1.375rem,7vw,1.75rem)!important;margin:4px 0 7px;max-width:none}.story-copy p{font-size:1rem!important;line-height:1.48}.reader-stage{gap:12px}
 .reader-controls{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:minmax(44px,auto);gap:7px!important}
 .control-center,.control-left,.control-right{display:contents!important}.control-center .page-dots,.control-center .narration-settings{display:none!important}
 #narration-primary{display:block!important;grid-column:1;grid-row:1;width:100%;min-width:0}#sound{grid-column:2;grid-row:1}
 .control-center #restart{display:block!important;grid-column:1;grid-row:2;width:100%}#motion{grid-column:2;grid-row:2}#prev{grid-column:1;grid-row:3}#next{grid-column:2;grid-row:3}
}
@media(prefers-reduced-motion:reduce){.hero-art::after,.welcome img{animation:none!important}.book-card{transition:none!important}.book-card:hover,.book-card:focus-within{transform:none}.reader-stage{transition:none}}

/* Calm ambient magic for visitor pages */
.landing-page,.dashboard-page{isolation:isolate}.ambient-magic,.sidebar-ambient{pointer-events:none;user-select:none}.hero,.welcome{isolation:isolate;overflow:hidden}.ambient-magic{position:absolute;inset:0;z-index:0;overflow:hidden}.hero>.container,.welcome>*:not(.ambient-magic){position:relative;z-index:1}.ambient-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;animation:ambient-drift var(--duration) ease-in-out var(--delay) infinite!important}.ambient-particle.gold{background:#ffe7a3;box-shadow:0 0 14px 6px rgba(255,196,84,.42),0 0 34px 14px rgba(255,196,84,.16)}.ambient-particle.green{background:#c8f7d2;box-shadow:0 0 14px 6px rgba(116,219,160,.35),0 0 32px 14px rgba(116,219,160,.14)}.ambient-particle.blue{background:#bce2ff;box-shadow:0 0 14px 6px rgba(116,178,240,.33),0 0 32px 14px rgba(116,178,240,.13)}
@keyframes ambient-drift{0%,100%{opacity:0;transform:translate3d(0,18px,0) scale(.68)}18%{opacity:.24}52%{opacity:.44;transform:translate3d(var(--drift),-38px,0) scale(1.3)}82%{opacity:.16;transform:translate3d(calc(var(--drift) * -.35),-76px,0) scale(.84)}}
.ambient-butterfly{position:absolute;width:30px;height:22px;opacity:0;filter:drop-shadow(0 0 7px rgba(117,203,255,.42)) drop-shadow(0 0 11px rgba(146,106,255,.26));will-change:transform,opacity;animation:ambient-butterfly-float 19s ease-in-out -8s infinite!important}.landing-page .ambient-butterfly-page{left:62%;top:64%}.dashboard-page .ambient-butterfly-page{left:66%;top:56%}.ambient-wing{position:absolute;top:3px;width:15px;height:17px;background:linear-gradient(145deg,rgba(195,229,255,.52),rgba(139,104,221,.48));animation:ambient-wing-flap 3.4s ease-in-out infinite!important}.wing-left{right:15px;border-radius:90% 18% 75% 24%;transform-origin:right center}.wing-right{left:15px;border-radius:18% 90% 24% 75%;transform-origin:left center}.ambient-butterfly-body{position:absolute;left:14px;top:4px;width:2px;height:15px;border-radius:99px;background:rgba(213,239,255,.56);box-shadow:0 0 5px rgba(151,220,255,.38)}
@keyframes ambient-wing-flap{0%,100%{transform:scaleX(.58) rotateY(18deg)}50%{transform:scaleX(.94) rotateY(-8deg)}}@keyframes ambient-butterfly-float{0%,100%{opacity:.1;transform:translate3d(0,10px,0) rotate(-3deg)}22%{opacity:.24}52%{opacity:.32;transform:translate3d(28px,-20px,0) rotate(3deg)}78%{opacity:.19;transform:translate3d(-12px,-42px,0) rotate(-2deg)}}
.sidebar{isolation:isolate;overflow:hidden}.sidebar>*{position:relative;z-index:1}.sidebar-ambient{position:absolute;z-index:0;left:0;right:0;bottom:0;height:360px;overflow:hidden}.sidebar-ambient::before{content:"";position:absolute;left:50%;bottom:-22px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,72,.24),rgba(255,190,72,.07) 38%,transparent 70%);transform:translateX(-50%);animation:ambient-lantern-glow 10s ease-in-out 2s infinite!important}.sidebar-ambient .ambient-butterfly-sidebar{left:68%;top:13%;animation-duration:27s!important;animation-delay:2s!important}
@keyframes ambient-lantern-glow{0%,100%{opacity:.28;transform:translateX(-50%) scale(.94)}50%{opacity:.48;transform:translateX(-50%) scale(1.04)}}
.sidebar-ambient .ambient-butterfly-sidebar{left:68%;top:4%;animation-duration:21s!important;animation-delay:-7s!important}
@keyframes ambient-reduced-pulse{0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.75)}50%{opacity:.4;transform:translate3d(calc(var(--drift) * .45),-18px,0) scale(1.18)}}@keyframes ambient-reduced-butterfly{0%,100%{opacity:.12;transform:translate3d(0,7px,0)}50%{opacity:.28;transform:translate3d(12px,-14px,0)}}
@media(max-width:720px){.ambient-magic .ambient-particle:nth-of-type(n/**/+11),.sidebar-ambient{display:none!important}.ambient-butterfly-page{display:block!important;left:78%!important;top:78%!important;scale:.8}}
@media(prefers-reduced-motion:reduce){.ambient-particle{animation:ambient-reduced-pulse var(--duration) ease-in-out var(--delay) infinite!important}.ambient-magic .ambient-particle:nth-of-type(n/**/+19){display:none}.ambient-butterfly{animation:ambient-reduced-butterfly 13s ease-in-out -5s infinite!important}.ambient-wing{animation:ambient-wing-flap 5.6s ease-in-out infinite!important}.sidebar-ambient::before{animation:ambient-reduced-pulse 12s ease-in-out infinite!important;opacity:.4}}

/* Consistent theme selector */
.theme-select{
 appearance:none;
 -webkit-appearance:none;
 width:112px;
 min-width:112px;
 min-height:44px;
 padding:0 30px 0 13px;
 border-radius:999px;
 background-color:var(--surface);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23687b91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 11px center;
 background-size:10px 7px;
 color:var(--ink)!important;
 font:650 .9rem/1 var(--font-ui);
 text-align:left;
 cursor:pointer;
}
.theme-select option{background:var(--surface);color:var(--ink);font:500 .95rem var(--font-ui)}
[data-theme="dark"] .theme-select{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23d8e3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media(prefers-color-scheme:dark){
 [data-theme="system"] .theme-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23d8e3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}
@media(max-width:720px){
 .dash-main{width:auto;max-width:100%;overflow-x:hidden}
 .dash-top{position:relative;display:flex!important;width:100%!important;max-width:100%;min-width:0;padding-right:111px}
 .dash-top .search{flex:1 1 auto;width:auto!important;max-width:none;min-width:80px!important}
 .dash-top .avatar{display:none!important}
 .dash-top .theme-select{
  display:block;
  flex:0 0 102px;
  width:102px;
  min-width:102px;
  padding:0 29px 0 12px;
  background-position:right 10px center;
  color:var(--ink)!important;
  font:650 .85rem/1 var(--font-ui);
 }
 .dash-top .theme-select{position:absolute;top:2px;right:0}
}
@media(max-width:370px){
 .dash-top .theme-select{width:92px;min-width:92px;padding-left:10px;font-size:.8rem}
}

/* Single light / bedtime theme control */
.theme-toggle{
 flex:0 0 44px;
 width:44px;
 height:44px;
 min-width:44px;
 min-height:44px;
 display:grid;
 place-items:center;
 padding:0;
 border:1px solid var(--line);
 border-radius:50%;
 background:var(--surface);
 color:var(--ink);
 font:700 1.35rem/1 var(--font-ui);
 cursor:pointer;
 box-shadow:none;
}
.theme-toggle:hover{background:color-mix(in srgb,var(--surface) 88%,var(--gold));transform:none}
.theme-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[data-theme="dark"] .theme-toggle{color:#ffe39a}
@media(max-width:720px){
 .dash-top{padding-right:53px}
 .dash-top .search{width:auto!important;max-width:none}
 .dash-top .theme-toggle{position:absolute;top:2px;right:0}
 
}

/* Mobile landing composition */
@media(max-width:720px){
 .landing-page .hero{padding:26px 0 28px}
 .landing-page .hero-grid{position:relative;display:block;min-height:0}
 .landing-page .hero-copy{position:relative;z-index:2}
 .landing-page .hero .eyebrow{display:block;max-width:26ch;margin-bottom:10px}
 .landing-page .hero h1{max-width:10ch;margin-bottom:14px;font-size:clamp(2.55rem,12vw,3.1rem);line-height:1.02}
 .landing-page .hero-copy>p{max-width:62%;margin-bottom:16px;font-size:.92rem;line-height:1.5}
 .landing-page .hero-actions{position:relative;z-index:3;display:grid;width:62%;gap:9px;margin:16px 0 0}
 .landing-page .hero-actions .btn{width:100%;min-height:44px;padding:0 12px}
 .landing-page .hero-art{position:absolute;z-index:1;top:235px;right:-12px;width:44%;max-width:190px;margin:0;filter:drop-shadow(0 18px 32px rgba(0,0,0,.3))}
 .landing-page .hero-art::before,.landing-page .hero-art::after{display:none}
 .landing-page .hero-art img{width:100%;margin:0;border-radius:22px;transform:none;box-shadow:0 18px 42px rgba(4,15,27,.38)}
 .landing-page .trust-line{display:block;width:100%;margin-top:174px;padding:16px;border:1px solid rgba(161,193,215,.28);border-radius:20px;background:rgba(8,28,47,.88);box-shadow:0 15px 34px rgba(2,12,24,.25);color:#d8e4ee}
 .landing-page .trust-line .testimonial-stars{margin-bottom:7px;color:#ffc34e;font:800 1.05rem/1 var(--font-ui);letter-spacing:.08em}
 .landing-page .trust-line>p{max-width:none;margin:0 0 12px;color:#d8e4ee;font:500 .85rem/1.5 var(--font-ui)}
 .testimonial-person{display:flex;align-items:center;gap:10px}
 .testimonial-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#e8866e,#8052a3);color:white;font:800 .7rem/1 var(--font-ui)}
 .testimonial-person strong,.testimonial-person small{display:block;font-family:var(--font-ui)}
 .testimonial-person strong{color:#fff8e8;font-size:.82rem}
 .testimonial-person small{color:#9eb1c4;font-size:.7rem}
 .landing-page .landing-books{padding-top:38px}
}
@media(max-width:370px){
 .landing-page .hero-copy>p,.landing-page .hero-actions{width:64%;max-width:64%}
 .landing-page .hero-art{top:245px;width:42%}
 .landing-page .trust-line{margin-top:160px}
}

/* Landing hero artwork supplied for each breakpoint */
.landing-page .hero{
 min-height:650px;
 background-image:linear-gradient(90deg,rgba(5,20,35,.86) 0%,rgba(5,20,35,.64) 38%,rgba(5,20,35,.08) 72%),url("../assets/backgrounds/hero-bg-desktop.png")!important;
 background-size:cover!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
}
.landing-page .hero-grid{grid-template-columns:1fr;min-height:530px}
.landing-page .hero-copy{max-width:670px}
.landing-page .hero-art{display:none!important}
@media(min-width:992px){
 .landing-page{--home-header-height:76px}
 .landing-page .hero{
  min-height:calc(100svh - var(--home-header-height));
  display:flex;
 align-items:center;
 }
 .landing-page .hero-grid{
  min-height:0;
 }
}
@media(max-width:720px){
 
 .landing-page .hero{
  min-height:0;
  padding:34px 0 30px;
  background-color:#071a2d;
  background-image:linear-gradient(90deg,rgba(4,18,32,.78) 0%,rgba(4,18,32,.42) 54%,rgba(4,18,32,.04) 82%),linear-gradient(180deg,transparent 64%,#071a2d 86%,#071a2d 100%),url("../assets/backgrounds/hero-bg-mobile.png")!important;
  background-size:100% auto!important;
  background-position:center top!important;
 }
 .landing-page .hero-grid{display:block;min-height:0}
 .landing-page .hero-copy{max-width:none}
 .landing-page .hero .eyebrow{max-width:23ch;margin-bottom:15px;font-size:.72rem;line-height:1.55}
 .landing-page .hero h1{max-width:9.5ch;margin-bottom:18px;font-size:clamp(2.65rem,12.4vw,3.2rem);line-height:1.03}
 .landing-page .hero-copy>p{width:54%;max-width:54%;margin-bottom:18px;font-size:.9rem;line-height:1.55}
 .landing-page .hero-actions{display:grid;width:54%;max-width:54%;gap:9px;margin:17px 0 0}
 .landing-page .hero-actions .btn{min-height:46px}
 .landing-page .trust-line{width:100%;margin-top:270px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
 .testimonial-intro{display:grid;gap:6px;margin-bottom:15px}
 .testimonial-intro span{color:#79dfa9;font:800 .72rem/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase}
 .testimonial-intro strong{color:#fff8e8;font:700 1.35rem/1.12 var(--font-display)}
 .testimonial-card{padding:17px;border:1px solid rgba(161,193,215,.28);border-radius:20px;background:rgba(8,28,47,.88);box-shadow:0 15px 34px rgba(2,12,24,.25)}
 .landing-page .trust-line .testimonial-stars{margin-bottom:8px}
 .landing-page .trust-line .testimonial-card>p{margin:0 0 13px;color:#d8e4ee;font:500 .85rem/1.5 var(--font-ui)}
 .landing-page .testimonial-card{min-width:0;overflow:hidden}
 .landing-page .testimonial-card>p{overflow-wrap:anywhere}
 .landing-page .landing-books{padding-top:34px}
}
@media(max-width:370px){
 .landing-page .hero-copy>p,.landing-page .hero-actions{width:56%;max-width:56%}
 .landing-page .trust-line{margin-top:235px}
}

/* Dashboard responsiveness and account controls */
.dashboard-page .dash-top{position:relative}
.dashboard-page .avatar{display:grid!important;flex:0 0 44px}
.profile-menu{
 position:absolute;
 z-index:50;
 top:54px;
 right:0;
 width:190px;
 padding:7px;
 border:1px solid var(--line);
 border-radius:14px;
 background:var(--surface);
 box-shadow:0 16px 38px rgba(2,12,24,.3);
}
.profile-menu[hidden]{display:none}
.profile-menu a,
.profile-menu button{
 display:flex;
 align-items:center;
 width:100%;
 min-height:38px;
 padding:0 11px;
 border:0;
 border-radius:9px;
 background:transparent;
 color:var(--ink);
 font:650 .84rem/1 var(--font-ui);
 text-align:left;
 cursor:pointer;
}
.profile-menu form{margin:3px 0 0;padding-top:3px;border-top:1px solid var(--line)}
.profile-menu a:hover,.profile-menu a:focus-visible,.profile-menu button:hover,.profile-menu button:focus-visible{background:color-mix(in srgb,var(--surface) 82%,var(--gold))}

.dashboard-page .welcome{margin:26px 0 18px;padding:34px 42px}
.dashboard-page .welcome img{width:168px;height:auto;object-fit:contain;object-position:center top}
.dashboard-page .filters{margin-bottom:12px}
.dashboard-page .filters .chip:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--gold)}
.dashboard-page .filters+.dash-section{margin-top:28px}
@media(min-width:721px){
 .dashboard-page .sidebar nav{position:absolute;top:102px;left:20px;right:20px;margin-top:0}
}
@media(max-width:720px){
 .dashboard-page .dash-main{padding-bottom:138px!important}
 .dashboard-page .dash-top{
  display:grid!important;
  grid-template-columns:38px minmax(80px,1fr) 44px 44px;
  gap:8px;
  width:100%!important;
  max-width:100%;
  padding:0;
 }
 .dashboard-page .dash-top .access-status,.dashboard-page .dash-top .library-link{display:none}
 .dashboard-page .dash-top .search{grid-column:2;width:100%!important;max-width:none!important;min-width:0!important;padding-inline:13px}
 .dashboard-page .dash-top .theme-toggle{position:static;grid-column:3}
 .dashboard-page .dash-top .avatar{position:static;grid-column:4;width:44px;height:44px}
 .dashboard-page .profile-menu{top:51px;right:0}
 .dashboard-page .welcome{min-height:286px;margin:20px 0 12px;padding:24px}
 .dashboard-page .welcome>div:not(.ambient-magic){position:relative;z-index:2}
 .dashboard-page .welcome h1{display:-webkit-box;max-width:none!important;margin-bottom:9px;padding-right:0;font-size:clamp(1.7rem,8.2vw,2rem)!important;line-height:1.05;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .dashboard-page .welcome p,.dashboard-page .welcome .progress,.dashboard-page .welcome .btn{width:calc(100% - 96px);max-width:230px}
 .dashboard-page .welcome .progress{margin:13px 0}
 .dashboard-page .welcome .btn{padding-inline:12px;font-size:.8rem}
 .dashboard-page .welcome .btn{justify-content:center;text-align:center}
 .dashboard-page .welcome img{display:block;position:absolute;z-index:2;right:18px;top:128px;width:78px;height:116px;border-radius:12px;object-fit:cover;object-position:center top;transform:none}
 .dashboard-page .filters{margin:0 0 8px;padding-bottom:5px}
 .dashboard-page .filters+.dash-section{margin-top:22px}
 .dashboard-page .dash-section{margin-bottom:36px}
}








/* =========================================================
   Landing light-theme trust section
   Single authoritative implementation
   ========================================================= */

[data-theme="light"] .landing-page #about {
  color: #fff8e8;
  border-top: 1px solid rgba(155, 202, 192, .12);
}

[data-theme="light"] .landing-page #about h2 {
  color: #fff8e8;
}

[data-theme="light"] .landing-page #about .eyebrow {
  color: #8ee9b7;
}

[data-theme="light"] .landing-page #about p,
[data-theme="light"] .landing-page #about .muted {
  color: #d4e0e9;
}

[data-theme="light"] .landing-page #about .trust-panel {
  border: 1px solid rgba(159, 204, 195, .28);
  background: rgba(8, 30, 51, .90);
  color: #fff8e8;
  box-shadow: 0 22px 55px rgba(3, 16, 29, .30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .landing-page #about .check-list li {
  color: #fff8e8;
  border-bottom-color: rgba(255, 255, 255, .15);
}

[data-theme="light"] .landing-page #about .check-list li:last-child {
  border-bottom: 0;
}

[data-theme="light"] .landing-page #about .check-list li::first-letter {
  color: #7de0ac;
}

/* System theme should match the same light treatment when the OS is light. */
@media (prefers-color-scheme: light) {
  [data-theme="system"] .landing-page #about {
    color: #fff8e8;
    border-top: 1px solid rgba(155, 202, 192, .12);
  }

  [data-theme="system"] .landing-page #about h2 {
    color: #fff8e8;
  }

  [data-theme="system"] .landing-page #about .eyebrow {
    color: #8ee9b7;
  }

  [data-theme="system"] .landing-page #about p,
  [data-theme="system"] .landing-page #about .muted {
    color: #d4e0e9;
  }

  [data-theme="system"] .landing-page #about .trust-panel {
    border: 1px solid rgba(159, 204, 195, .28);
    background: rgba(8, 30, 51, .90);
    color: #fff8e8;
    box-shadow: 0 22px 55px rgba(3, 16, 29, .30);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  [data-theme="system"] .landing-page #about .check-list li {
    color: #fff8e8;
    border-bottom-color: rgba(255, 255, 255, .15);
  }

  [data-theme="system"] .landing-page #about .check-list li:last-child {
    border-bottom: 0;
  }

}


/* =========================================================
   FableGlade story cards — single authoritative implementation
   ========================================================= */

/* Desktop/default card */
.book-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  min-width: 0;
  max-height: none;
  overflow: hidden;
  border: 1px solid rgba(241, 184, 75, .52);
  border-radius: 24px;
  background: #071a2d;
  color: #fff8e8;
  box-shadow: 0 16px 38px rgba(2, 12, 24, .30);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    filter .24s ease !important;
}

.book-card .book-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #071a2d;
  box-shadow: none;
}

.book-card .book-cover > img,
.book-card .book-cover > .card-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  background: #071a2d;
  transform-origin: center;
  transition:
    opacity .20s ease,
    transform .35s ease,
    filter .35s ease !important;
}

.book-card .book-cover > img {
  z-index: 1;
  opacity: 1;
}

.book-card .book-cover > .card-preview {
  display: block !important;
  z-index: 2;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.book-card .book-cover.preview-loading > img {
  transform: scale(1.01) !important;
}

.book-card .book-cover.preview-active > img {
  opacity: 0;
  transform: scale(1.01) !important;
}

.book-card .book-cover.preview-active > .card-preview {
  opacity: 1;
}

.book-card .cover-category-icon {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  background: rgba(6, 20, 35, .76);
  color: #ffd36a;
  font: 700 1.15rem/1 var(--font-ui);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Flush bottom gradient. No inset gap and no inner rounded corners. */
.book-card .book-info,
.landing-page .book-card .book-info,
.dashboard-page .book-card .book-info {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 39%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 68px 16px 16px;
  border: 0;
  border-radius: 0;
  color: #fff8e8;
  background:
    linear-gradient(
      to top,
      rgba(4, 15, 27, .97) 0%,
      rgba(4, 15, 27, .89) 47%,
      rgba(4, 15, 27, .62) 73%,
      rgba(4, 15, 27, 0) 100%
    );
  box-shadow: none;
  pointer-events: none;
}

.book-card .book-info a,
.book-card .book-info button {
  pointer-events: auto;
}

.book-card .book-category {
  display: block;
  margin: 0 0 7px;
  overflow: hidden;
  color: #8ee9b7;
  font: 800 .70rem/1.25 var(--font-ui);
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-page .book-info h3,
.dashboard-page .book-info h3,
.book-card .book-info h3 {
  min-height: 2.36em;
  max-height: 2.36em;
  margin: 0 0 7px;
  overflow: hidden;
  color: #fff8e8;
  font: 700 1.08rem/1.18 var(--font-display);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.book-card .book-info h3 a {
  color: inherit;
  text-decoration: none;
}

.book-card .access-label {
  margin: 0 0 5px;
  color: #fff8e8;
  font: 700 .95rem/1.2 var(--font-ui);
}

.book-card .completed-badge {
  align-self: flex-start;
  margin: 0 0 5px;
}

.book-card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin: 0;
  color: #c6d2df;
  font: 600 .72rem/1.35 var(--font-ui);
}

.book-card .meta span:not(:last-child)::after {
  content: "·";
  margin-left: 7px;
  color: #8298ad;
}

.book-card .progress {
  height: 6px;
  margin: 10px 0 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 151, 179, .45);
}

.book-card .progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ed2a3, #ffd36a);
}

/* Action row */
.book-card .card-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  padding: 6px;
  border: 1px solid rgba(233, 181, 72, .78);
  border-radius: 999px;
  background: rgba(5, 18, 34, .72);
}

.book-card .card-actions .btn {
  min-width: 0;
  min-height: 42px;
  margin: 0;
  border: 1px solid rgba(181, 207, 224, .42);
  background: rgba(8, 27, 45, .62);
  color: #e5edf4;
  font: 750 .78rem/1 var(--font-ui);
  cursor: pointer;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* True centered play icon using CSS triangle. */
.book-card .card-actions .preview-action {
  grid-column: 1;
  position: relative;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 50% !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.book-card .card-actions .preview-action::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
  transform: translate(-42%, -50%);
}

.book-card .card-actions .btn:last-child {
  grid-column: 2;
  width: 100%;
  border-color: #e9b548;
  background: linear-gradient(135deg, #e6b94e, #cfa33e);
  color: #302108;
  box-shadow: 0 8px 20px rgba(241, 184, 75, .20);
}

.book-card .card-actions .btn:only-child {
  grid-column: 1 / -1;
}

.book-card .card-actions .favorite-action {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
}

.book-card .card-actions .favorite-action::before {
  content: "♡";
  font: 800 1.45rem/1 var(--font-ui);
}

.book-card .card-actions .favorite-action[aria-pressed="true"]::before { content: "♥"; }

.book-card .card-actions .read-action {
  flex: 1 1 auto;
  width: auto;
  border-radius: 999px;
  white-space: nowrap;
}

.book-card .card-actions .read-action::before {
  content: "📖";
  margin-right: 7px;
}

/* Homepage cards */
.landing-books .book-grid {
  align-items: stretch;
}

.landing-books .book-card {
  width: 100%;
}

/* Keep the existing six-card tablet/mobile set; desktop can show two full rows. */
@media (max-width: 1000px) {
  .landing-books .book-card:nth-child(n + 7) {
    display: none;
  }
}

/* Dashboard shelves remain horizontal on desktop. */
.dash-section .book-card {
  flex: 0 0 clamp(245px, 21vw, 292px);
  width: clamp(245px, 21vw, 292px);
}

/* Desktop hover only */
@media (hover: hover) and (pointer: fine) {
  .book-card:hover,
  .book-card:focus-within {
    transform: translateY(-7px);
    border-color: rgba(255, 211, 106, .95);
    box-shadow:
      0 23px 54px rgba(2, 12, 24, .46),
      0 0 0 1px rgba(255, 211, 106, .34),
      0 0 28px rgba(241, 184, 75, .22);
    filter: brightness(1.02);
  }

  .book-card:hover .book-cover > img,
  .book-card:focus-within .book-cover > img {
    transform: scale(1.025) !important;
    filter: saturate(1.05) brightness(1.035);
  }

  .book-card:hover .card-actions .btn:last-child,
  .book-card:focus-within .card-actions .btn:last-child {
    background: linear-gradient(135deg, #f1c85f, #d9ac43);
  }
}

.book-card:focus-within {
  outline: none;
}

.book-card .book-info h3 a:focus-visible,
.book-card .card-actions .btn:focus-visible {
  outline: 3px solid #ffd36a;
  outline-offset: 3px;
}

/* Mobile homepage: cards stack one below another. */
@media (max-width: 720px) {
  .landing-books {
    overflow: visible;
  }

  .landing-books .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
    overflow: visible;
  }

  .landing-books .section-head {
    padding-inline: 0;
    margin-bottom: 18px;
  }

  .landing-books .book-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .landing-books .book-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border-radius: 20px;
  }

  .book-card .cover-category-icon {
    top: 9px;
    right: 9px;
    width: 36px;
    height: 36px;
    font-size: .95rem;
  }

  .book-card .book-info,
  .landing-page .book-card .book-info,
  .dashboard-page .book-card .book-info {
    min-height: 37%;
    padding: 58px 14px 14px;
  }

  .book-card .book-category {
    margin-bottom: 6px;
    font-size: .64rem;
  }

  .landing-page .book-info h3,
  .dashboard-page .book-info h3,
  .book-card .book-info h3 {
    min-height: 2.34em;
    max-height: 2.34em;
    margin-bottom: 6px;
    font-size: 1rem;
    line-height: 1.17;
  }

  .book-card .access-label {
    font-size: .88rem;
  }

  .book-card .meta {
    gap: 3px 5px;
    font-size: .68rem;
  }

  .book-card .meta span:not(:last-child)::after {
    margin-left: 5px;
  }

  .book-card .progress {
    height: 5px;
    margin: 8px 0 10px;
  }

  .book-card .card-actions {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
  }

  .book-card .card-actions .btn {
    min-height: 38px;
    font-size: .74rem;
  }

  .book-card .card-actions .preview-action {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .book-card .card-actions .preview-action::before {
    border-top-width: 4.5px;
    border-bottom-width: 4.5px;
    border-left-width: 7px;
  }

  .book-card:hover,
  .book-card:focus-within {
    transform: none;
  }
}

@media (max-width: 370px) {
  .landing-books .container {
    padding-inline: 14px;
  }

  .book-card .book-info,
  .landing-page .book-card .book-info,
  .dashboard-page .book-card .book-info {
    padding-inline: 12px;
    padding-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-card,
  .book-card .book-cover > img,
  .book-card .book-cover > .card-preview {
    transition: none !important;
  }

  .book-card:hover,
  .book-card:focus-within,
  .book-card:hover .book-cover > img,
  .book-card:focus-within .book-cover > img {
    transform: none !important;
  }
}

/* =========================================================
   Multilingual presentation polish
   Keep card geometry stable while allowing translated copy to breathe.
   ========================================================= */

/* Give section eyebrows a deliberate relationship to the heading below. */
.landing-page .eyebrow,
.about-page .eyebrow,
.story-catalog-page .eyebrow,
.group-list-page .eyebrow,
.category-list-page .eyebrow {
  display: block;
  margin-bottom: .72rem;
}

/* Indic/Arabic/Japanese scripts need script-aware fonts and should not inherit
   Latin uppercase tracking. */
html:lang(bn-bd) {
  --font-ui: "Noto Sans Bengali", "Nirmala UI", sans-serif;
  --font-display: "Noto Sans Bengali", "Nirmala UI", sans-serif;
  --font-reading: "Noto Sans Bengali", "Nirmala UI", sans-serif;
}
html:lang(hi) {
  --font-ui: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --font-display: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --font-reading: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
}
html:lang(ar) {
  --font-ui: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
  --font-display: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
  --font-reading: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
}
html:lang(ja) {
  --font-ui: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-display: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --font-reading: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}

html:lang(bn-bd) .eyebrow,
html:lang(hi) .eyebrow,
html:lang(ar) .eyebrow,
html:lang(ja) .eyebrow {
  text-transform: none;
  letter-spacing: .035em;
  line-height: 1.45;
}

/* Bengali and Devanagari display glyphs are taller than Fredoka; use a calmer
   scale instead of letting translated headings dominate the page. */
html:lang(bn-bd) .hero h1 {
  max-width: 700px;
  font-size: clamp(2.65rem, 5.05vw, 4.75rem);
  line-height: 1.13;
  text-wrap: balance;
}
html:lang(bn-bd) .landing-page h2,
html:lang(bn-bd) .about-page h1,
html:lang(bn-bd) .about-page h2,
html:lang(bn-bd) .catalog-hero h1 {
  line-height: 1.15;
  text-wrap: balance;
}
html:lang(bn-bd) .landing-page .section-head h2,
html:lang(bn-bd) .landing-page #about h2 {
  font-size: clamp(2rem, 3.45vw, 3.1rem);
}
html:lang(hi) .hero h1 {
  font-size: clamp(2.7rem, 5.3vw, 4.9rem);
  line-height: 1.13;
  text-wrap: balance;
}
html:lang(ar) h1,
html:lang(ar) h2,
html:lang(ar) h3 {
  line-height: 1.25;
}
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3 {
  line-height: 1.3;
}

/* Home cards: category/title labels may wrap naturally, but the card itself
   keeps the same 9:16 geometry across languages. */
.book-card .book-category {
  min-height: 1.25em;
  max-height: 2.55em;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.book-card .card-actions .read-action {
  min-height: 42px;
  padding: 7px 11px;
  line-height: 1.14;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}
.book-card .card-actions .read-action::before {
  flex: 0 0 auto;
  margin-right: 4px;
}

/* Catalog badges keep a stable reserved area but use it more efficiently.
   Long category names get their own flexible chip and status chips wrap. */
.public-story-badges {
  height: 52px;
  gap: 4px 5px;
}
.public-story-badges span,
.public-story-badges a {
  max-width: 100%;
  padding: 3px 7px;
  font-size: .64rem;
  line-height: 1.18;
}
.public-story-badges a:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-story-actions .btn {
  min-height: 42px;
  padding: 7px 13px;
  line-height: 1.15;
  white-space: normal;
  text-wrap: balance;
}

/* Keep Latin-language cards compact without changing their dimensions. */
html:lang(it) .book-card .card-actions .read-action,
html:lang(de) .book-card .card-actions .read-action,
html:lang(fr) .book-card .card-actions .read-action,
html:lang(es) .book-card .card-actions .read-action {
  font-size: .76rem;
}

/* Header spacing should compress gracefully before the normal mobile menu
   breakpoint rather than forcing translated nav labels into collisions. */


@media (max-width: 720px) {
  html:lang(bn-bd) .hero h1,
  html:lang(hi) .hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.2rem);
    line-height: 1.15;
  }
  .landing-page .eyebrow,
  .about-page .eyebrow,
  .story-catalog-page .eyebrow,
  .group-list-page .eyebrow,
  .category-list-page .eyebrow {
    margin-bottom: .55rem;
  }
  .book-card .card-actions .read-action {
    min-height: 40px;
    padding-inline: 9px;
  }
}

/* =========================================================
   Shared header consistency + compact mobile language code
   2026-08-11
   ========================================================= */















/* =========================================================
   Authoritative shared header + custom language menu
   2026-08-11 final pass
   ========================================================= */






/* Language trigger always stays a fixed two-letter Latin code.
   It never expands to English / বাংলা / Italiano etc. */



















@media (max-width: 720px) {
  
  
  

  
  
  

  
  
  
  

  /* Prevent any header control/dropdown from creating right-side page overflow. */
  html, body { overflow-x: clip; }
}





/* =========================================================
   Header control spacing + rounded focus treatment
   2026-08-11
   ========================================================= */

/* Desktop navigation focus must preserve the rounded FableGlade look,
   never the browser's square rectangular outline. */



/* All round header controls use the same focus treatment INSIDE their
   existing circle so focusing one control never changes the perceived gap. */


/* Keep hover from moving only some header controls. */

/* ============================================================
   AUTHORITATIVE LIGHT THEME — legal/info pages
   Terms, Privacy, Child Privacy, Refund & Cancellation
   Keep the forest artwork and use readable light typography.
   Dark theme is intentionally untouched.
   ============================================================ */

[data-theme="light"] body.legal-page,
[data-theme="light"] .legal-page {
  color: #fff8e8 !important;
}

/* Keep the existing forest background/image in light mode.
   Do not replace the page with a cream background. */
[data-theme="light"] body.legal-page,
[data-theme="light"] body.legal-page .site-main,
[data-theme="light"] .legal-page .site-main {
  background-color: transparent !important;
}

/* Main legal content stays readable over the forest image. */
[data-theme="light"] .legal-page .legal-shell,
[data-theme="light"] .legal-page .legal-shell > h1,
[data-theme="light"] .legal-page .legal-section h2,
[data-theme="light"] .legal-page .legal-section h3,
[data-theme="light"] .legal-page .legal-section p,
[data-theme="light"] .legal-page .legal-section li,
[data-theme="light"] .legal-page .legal-section a {
  color: #fff8e8 !important;
}

[data-theme="light"] .legal-page .legal-section p,
[data-theme="light"] .legal-page .legal-section li {
  color: #dbe7ef !important;
}

[data-theme="light"] .legal-page .eyebrow {
  color: #72e0ad !important;
}

/* Draft/legal notice should match the readable dark-mode treatment,
   even though the global header is light. */
[data-theme="light"] .legal-page .legal-notice,
[data-theme="light"] .legal-page .legal-notice.card {
  border: 1px solid rgba(156, 195, 219, .28) !important;
  background: rgba(8, 31, 54, .92) !important;
  color: #fff8e8 !important;
  box-shadow: 0 14px 34px rgba(2, 12, 24, .28) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .legal-page .legal-notice strong,
[data-theme="light"] .legal-page .legal-notice.card strong {
  color: #fff8e8 !important;
}

/* Any contact/action button at the end of a legal page. */
[data-theme="light"] .legal-page .legal-section .btn-secondary {
  border-color: rgba(241, 184, 75, .7) !important;
  background: rgba(8, 31, 54, .90) !important;
  color: #fff8e8 !important;
}

[data-theme="light"] .legal-page .legal-section .btn-secondary:hover {
  border-color: #f1b84b !important;
  background: rgba(14, 44, 72, .96) !important;
}

/* System mode should receive the same treatment whenever the OS is light. */
@media (prefers-color-scheme: light) {
  [data-theme="system"] body.legal-page,
  [data-theme="system"] .legal-page {
    color: #fff8e8 !important;
  }

  [data-theme="system"] .legal-page .legal-shell,
  [data-theme="system"] .legal-page .legal-shell > h1,
  [data-theme="system"] .legal-page .legal-section h2,
  [data-theme="system"] .legal-page .legal-section h3,
  [data-theme="system"] .legal-page .legal-section a {
    color: #fff8e8 !important;
  }

  [data-theme="system"] .legal-page .legal-section p,
  [data-theme="system"] .legal-page .legal-section li {
    color: #dbe7ef !important;
  }

  [data-theme="system"] .legal-page .eyebrow {
    color: #72e0ad !important;
  }

  [data-theme="system"] .legal-page .legal-notice,
  [data-theme="system"] .legal-page .legal-notice.card {
    border: 1px solid rgba(156, 195, 219, .28) !important;
    background: rgba(8, 31, 54, .92) !important;
    color: #fff8e8 !important;
    box-shadow: 0 14px 34px rgba(2, 12, 24, .28) !important;
  }

  [data-theme="system"] .legal-page .legal-notice strong,
  [data-theme="system"] .legal-page .legal-notice.card strong {
    color: #fff8e8 !important;
  }
}

/* ============================================================
   FINAL LIGHT-THEME LEGAL CONTROLS ONLY
   Keep forest background and all other legal-page styling unchanged.
   ============================================================ */
[data-theme="light"] .legal-page .legal-notice,
[data-theme="light"] .legal-page .legal-notice.card {
  background: #fffdf8 !important;
  color: #0a2340 !important;
  border-color: #e2d3b8 !important;
  box-shadow: 0 10px 26px rgba(87,67,34,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .legal-page .legal-notice strong,
[data-theme="light"] .legal-page .legal-notice.card strong {
  color: #0a2340 !important;
}

[data-theme="light"] .legal-page .legal-section .btn-secondary {
  background: #fffdf8 !important;
  color: #0a2340 !important;
  border-color: #e0ad3d !important;
  box-shadow: 0 8px 20px rgba(87,67,34,.08) !important;
}

[data-theme="light"] .legal-page .legal-section .btn-secondary:hover {
  background: #fff4db !important;
  color: #0a2340 !important;
  border-color: #d99e23 !important;
}


/* =========================================================
   HOME FEATURED CARDS — professional light theme only
   Dark theme and /stories/ public cards are intentionally unchanged.
   ========================================================= */
[data-theme="light"] .landing-page .landing-books .book-card {
  border-color: rgba(210, 156, 44, .72);
  background: #fffaf0;
  box-shadow:
    0 16px 34px rgba(55, 43, 24, .14),
    0 1px 0 rgba(255, 255, 255, .78) inset;
}

/* Keep the cover vivid. The cream surface begins low and fades in softly. */
[data-theme="light"] .landing-page .landing-books .book-card .book-info {
  min-height: 39%;
  padding: 58px 14px 14px;
  color: #0a2340;
  background:
    linear-gradient(
      to top,
      rgba(255, 251, 242, .995) 0%,
      rgba(255, 251, 242, .985) 59%,
      rgba(255, 251, 242, .88) 76%,
      rgba(255, 251, 242, .40) 91%,
      rgba(255, 251, 242, 0) 100%
    );
}

[data-theme="light"] .landing-page .landing-books .book-card .book-category {
  color: #16765f;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

[data-theme="light"] .landing-page .landing-books .book-card .book-info h3,
[data-theme="light"] .landing-page .landing-books .book-card .book-info h3 a,
[data-theme="light"] .landing-page .landing-books .book-card .access-label {
  color: #0a2340;
}

[data-theme="light"] .landing-page .landing-books .book-card .meta {
  color: #53647a;
}

[data-theme="light"] .landing-page .landing-books .book-card .meta span:not(:last-child)::after {
  color: #9a8660;
}

[data-theme="light"] .landing-page .landing-books .book-card .progress {
  background: #d9e0e4;
  box-shadow: inset 0 1px 2px rgba(31, 50, 67, .08);
}

[data-theme="light"] .landing-page .landing-books .book-card .progress span {
  background: linear-gradient(90deg, #58b98d, #d9a52e);
}

/* Compact pill dock — warm, clean and visually lighter than dark mode. */
[data-theme="light"] .landing-page .landing-books .book-card .card-actions {
  border-color: rgba(207, 151, 33, .72);
  background: rgba(255, 250, 240, .94);
  box-shadow:
    0 8px 18px rgba(80, 57, 18, .08),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .landing-page .landing-books .book-card .card-actions .btn {
  border-color: #dccdaE;
  background: rgba(255, 253, 248, .96);
  color: #16314d;
  box-shadow: none;
}

[data-theme="light"] .landing-page .landing-books .book-card .card-actions .btn:hover {
  border-color: #c99a39;
  background: #fff7e6;
}

/* The reading/subscription action remains the clear primary action. */
[data-theme="light"] .landing-page .landing-books .book-card .card-actions .read-action,
[data-theme="light"] .landing-page .landing-books .book-card .card-actions .btn:last-child {
  border-color: #d29b27;
  background: linear-gradient(135deg, #f8c451 0%, #edb23e 100%);
  color: #17283d;
  box-shadow:
    0 7px 16px rgba(194, 137, 25, .18),
    inset 0 1px 0 rgba(255,255,255,.42);
}

[data-theme="light"] .landing-page .landing-books .book-card .card-actions .read-action:hover,
[data-theme="light"] .landing-page .landing-books .book-card .card-actions .btn:last-child:hover {
  background: linear-gradient(135deg, #ffd16b 0%, #f3b846 100%);
}

[data-theme="light"] .landing-page .landing-books .book-card .cover-category-icon {
  border-color: rgba(255,255,255,.55);
  background: rgba(9, 31, 51, .82);
  color: #ffd36a;
  box-shadow: 0 7px 18px rgba(4, 16, 28, .22);
}

/* Light-mode hover: lift, don't wash out the artwork. */
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .landing-page .landing-books .book-card:hover,
  [data-theme="light"] .landing-page .landing-books .book-card:focus-within {
    border-color: rgba(221, 163, 42, .95);
    box-shadow:
      0 22px 46px rgba(55, 43, 24, .18),
      0 0 0 1px rgba(226, 169, 50, .18);
    filter: none;
  }

  [data-theme="light"] .landing-page .landing-books .book-card:hover .book-cover > img,
  [data-theme="light"] .landing-page .landing-books .book-card:focus-within .book-cover > img {
    filter: saturate(1.035) brightness(1.015);
  }
}

/* Mobile keeps exactly the same visual system, just slightly tighter. */
@media (max-width: 720px) {
  [data-theme="light"] .landing-page .landing-books .book-card .book-info {
    min-height: 37%;
    padding: 52px 13px 13px;
  }
}

/* =========================================================
   HOME LIGHT THEME — final card surfaces only
   Keeps section backgrounds / forest artwork / dark theme unchanged.
   ========================================================= */

/* How the magic works — only the three rounded step cards turn light. */
[data-theme="light"] .landing-page .how .step {
  background: #fffdf8 !important;
  border: 1px solid #e3d5bb !important;
  color: #0a2340 !important;
  box-shadow: 0 14px 30px rgba(45, 35, 20, .10) !important;
}

[data-theme="light"] .landing-page .how .step h3 {
  color: #0a2340 !important;
}

[data-theme="light"] .landing-page .how .step p {
  color: #53647a !important;
}

[data-theme="light"] .landing-page .how .step b {
  background: #f4bb48 !important;
  color: #2f2108 !important;
  box-shadow: 0 5px 12px rgba(190, 132, 22, .16) !important;
}

/* Designed for wonder — only the right checklist card turns light. */
[data-theme="light"] .landing-page #about .trust-panel,
[data-theme="light"] .landing-page #about .trust-panel.card {
  background: #fffdf8 !important;
  border: 1px solid #e3d5bb !important;
  color: #0a2340 !important;
  box-shadow: 0 18px 38px rgba(45, 35, 20, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .landing-page #about .trust-panel .check-list li {
  color: #20384f !important;
  border-bottom-color: #e4d8c3 !important;
}

[data-theme="light"] .landing-page #about .trust-panel .check-list li:last-child {
  border-bottom: 0 !important;
}

/* Preserve the green check accent inside the light card. */
[data-theme="light"] .landing-page #about .trust-panel .check-list li::first-letter {
  color: #168268 !important;
}

/* =========================================================
   HOME FEATURED CARD ACTIONS — final theme colors
   ========================================================= */

/* Never fade card action buttons on mobile/touch */
.landing-page .landing-books .book-card .card-actions .btn{
  opacity:1 !important;
}

/* LIGHT THEME */
[data-theme="light"] .landing-page .landing-books .book-card .card-actions{
  border-color:#d8a63b;
  background:rgba(255,253,247,.96);
}

[data-theme="light"] .landing-page .landing-books .book-card .card-actions .favorite-action{
  border-color:#d8c79f;
  background:#fffdf8;
  color:#28445d;
}

[data-theme="light"] .landing-page .landing-books .book-card .card-actions .read-action{
  border-color:#d99e23 !important;
  background:linear-gradient(135deg,#ffc94f 0%,#f2b53e 100%) !important;
  color:#2b210d !important;
  box-shadow:
    0 7px 16px rgba(190,132,22,.20),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
}

/* DARK THEME */
[data-theme="dark"] .landing-page .landing-books .book-card .card-actions{
  border-color:rgba(241,184,75,.82);
  background:rgba(5,18,34,.82);
}

[data-theme="dark"] .landing-page .landing-books .book-card .card-actions .favorite-action{
  border-color:rgba(181,207,224,.42);
  background:rgba(8,27,45,.78);
  color:#e5edf4;
}

[data-theme="dark"] .landing-page .landing-books .book-card .card-actions .read-action{
  border-color:#f0bd48 !important;
  background:linear-gradient(135deg,#f2c552 0%,#d9a839 100%) !important;
  color:#241b08 !important;
  box-shadow:
    0 8px 20px rgba(241,184,75,.24),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* Tablet performance mode: retain layout while removing touch-only paint work. */
@media (min-width: 721px) and (hover: none) and (pointer: coarse) {
  .landing-page .ambient-magic,
  .landing-page .ambient-particle,
  .landing-page .ambient-butterfly {
    display: none !important;
  }

  .landing-page .hero-art::after,
  .landing-page .book-card,
  .landing-page .book-card .book-cover,
  .landing-page .book-card .book-cover > img,
  .landing-page .book-card .book-cover > .card-preview {
    animation: none !important;
    transition: none !important;
  }

  .landing-page .book-card:hover,
  .landing-page .book-card:focus-within,
  .landing-page .book-card:hover .book-cover > img,
  .landing-page .book-card:focus-within .book-cover > img {
    transform: none !important;
    filter: none !important;
  }
}