:root{--blue:#2f8cff;--navy:#1b3a6b;--yellow:#ffd23f;--orange:#ff8a3d;--green:#3ecf8e;--pink:#ff6fa5;--purple:#8b5cf6;--ink:#24304a;--muted:#6b7a99}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Fredoka,"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:var(--ink);background:linear-gradient(#bfe6ff 0,#e9f7ff 21.25rem,#fff8e6 100%) fixed}
button,select{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}.hidden{display:none!important}.view{display:none}.view.active{display:block}
.topbar{position:sticky;top:0;z-index:50;background:var(--blue);color:#fff;padding:max(0.625rem,env(safe-area-inset-top)) clamp(0.875rem,4vw,3rem) 0.75rem;box-shadow:0 0.25rem 0 rgba(27,58,107,.25)}
.brand{border:0;background:none;color:#fff;display:flex;align-items:center;gap:0.625rem;padding:0.125rem 0;font-size:clamp(1.125rem,3vw,1.5rem);font-weight:600}
.logo{width:2.625rem;height:2.625rem;display:grid;place-items:center;background:var(--yellow);border-radius:0.875rem;font-size:1.5rem;transform:rotate(-6deg);box-shadow:0 0.1875rem 0 rgba(0,0,0,.2)}
.brand-text b{color:var(--yellow);font-weight:700}
.chips{display:flex;gap:0.5rem;overflow-x:auto;padding:0.625rem 0.125rem 0.125rem;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:0;border-radius:6.1875rem;padding:0.5625rem 1rem;background:#fff;color:var(--navy);font-weight:600;font-size:0.9375rem;box-shadow:0 0.1875rem 0 rgba(27,58,107,.25);display:flex;align-items:center;gap:0.4375rem}
.chip .dot{width:1.375rem;height:1.375rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:0.8125rem}
.chip.on{background:var(--yellow);transform:translateY(-0.0625rem)}
#explore{max-width:75rem;margin:0 auto;padding:1.375rem clamp(0.875rem,4vw,3rem) 3.75rem}
.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:1.25rem;background:linear-gradient(135deg,#ff8a3d,#ff6fa5);border-radius:2rem;padding:clamp(1.25rem,4vw,2.5rem);color:#fff;box-shadow:0 0.5rem 0 rgba(27,58,107,.18);position:relative;overflow:hidden;margin-bottom:2.125rem}
.hero::after{content:"✦ ★ ✦";position:absolute;right:1.125rem;top:0.625rem;color:var(--yellow);letter-spacing:0.5rem;font-size:1.125rem;opacity:.9}
.hero small{display:inline-block;background:rgba(255,255,255,.25);border-radius:6.1875rem;padding:0.25rem 0.875rem;font-weight:600;font-size:0.8125rem;letter-spacing:.05em}
.hero h1{margin:0.75rem 0 0.5rem;font-size:clamp(1.875rem,5.4vw,3.5rem);line-height:1.05}
.hero p{margin:0 0 1.125rem;font-size:clamp(0.9375rem,2vw,1.1875rem);opacity:.95}
.btn{border:0;border-radius:6.1875rem;padding:0.875rem 1.75rem;font-weight:700;font-size:1.125rem;color:var(--navy);background:var(--yellow);box-shadow:0 0.3125rem 0 #d9a900;transition:transform .12s}.btn:active{transform:translateY(0.1875rem);box-shadow:0 0.125rem 0 #d9a900}
.hero .pic{justify-self:center;width:min(15rem,60%);transform:rotate(4deg);border:0.375rem solid #fff;border-radius:1.375rem;overflow:hidden;box-shadow:0 0.625rem 0 rgba(0,0,0,.18);background:#fff}
.hero .pic img{width:100%;aspect-ratio:3/4;object-fit:cover}
.shelf{margin-bottom:2.125rem}
.shelf h2{display:flex;align-items:center;gap:0.625rem;margin:0 0 0.875rem;font-size:clamp(1.375rem,3.2vw,1.875rem);color:var(--navy)}
.row{display:flex;gap:1.125rem;overflow-x:auto;padding:0.375rem 0.375rem 1rem;scroll-snap-type:x proximity;scrollbar-width:thin}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1.375rem 1.125rem}
.card{border:0;background:none;padding:0;text-align:left;color:var(--ink);flex:none;width:10.625rem;scroll-snap-align:start;transition:transform .15s}
.grid .card{width:auto}.card:hover{transform:translateY(-0.375rem) rotate(-1deg)}
.cover{position:relative;display:block;aspect-ratio:3/4;border:0.3125rem solid #fff;border-radius:1.25rem;overflow:hidden;background:#dbe9ff;box-shadow:0 0.375rem 0 rgba(27,58,107,.22)}
.cover img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:0.5rem;right:0.5rem;width:2.125rem;height:2.125rem;display:grid;place-items:center;background:var(--yellow);border-radius:50%;font-style:normal;font-size:1.0625rem;box-shadow:0 0.1875rem 0 rgba(0,0,0,.2)}
.who{position:absolute;left:0.5rem;top:0.5rem;border-radius:6.1875rem;padding:0.1875rem 0.75rem;color:#fff;font-style:normal;font-weight:600;font-size:0.8125rem}
.c-arisa .who,.d-arisa{background:#4c8bd6}.c-ariba .who,.d-ariba{background:var(--purple)}.c-amira .who,.d-amira{background:var(--pink)}.d-all{background:var(--orange)}.d-listen{background:var(--green)}
.card strong{display:block;margin:0.75rem 0.25rem 0;font-size:1rem;line-height:1.25;font-weight:600}
.soon{background:#fff;border:0.1875rem dashed #9cc4ff;border-radius:1.625rem;padding:2.25rem;text-align:center;color:var(--muted);font-size:1.125rem}
footer{padding:1.875rem 1.25rem 2.5rem;text-align:center;color:var(--muted);font-size:0.875rem}
.reader-view{min-height:calc(100vh - 4.75rem);background:linear-gradient(145deg,#312d38,#1f1d24);color:#fff}
.reader-toolbar{min-height:5.9375rem;display:grid;grid-template-columns:minmax(10rem,1fr) minmax(18.75rem,2fr) minmax(6.25rem,1fr);align-items:center;gap:1.25rem;padding:0.9375rem clamp(1.125rem,4vw,3.125rem);border-bottom:0.0625rem solid rgba(255,255,255,.10)}
.reader-back-button{justify-self:start;border:0.0625rem solid rgba(255,255,255,.16);border-radius:62.4375rem;background:rgba(255,255,255,.07);color:#fff;padding:0.6875rem 1.125rem}
.reader-title-area{text-align:center}
.reader-series{margin:0 0 0.3125rem;font:700 0.5625rem Arial,Helvetica,sans-serif;letter-spacing:.22em;color:rgba(255,255,255,.58)}
.reader-title-area h1{margin:0;font-size:clamp(1.125rem,2vw,1.5625rem);font-weight:500}
.page-counter{justify-self:end;min-width:4.625rem;text-align:center;border:0.0625rem solid rgba(255,255,255,.14);border-radius:62.4375rem;padding:0.5625rem 0.875rem;font:0.75rem Arial,Helvetica,sans-serif;color:rgba(255,255,255,.75)}
.reader-stage{width:100%;min-height:calc(100vh - 20.625rem);padding:1.75rem clamp(0.625rem,3vw,2.5rem);display:grid;grid-template-columns:4.375rem minmax(0,1fr) 4.375rem;align-items:center;gap:1.125rem}
.book-page-container{position:relative;width:100%;height:min(66vh,51.25rem);display:flex;align-items:center;justify-content:center;overflow:hidden}
.book-page-image{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:0.5625rem;box-shadow:0 1.875rem 4.375rem rgba(0,0,0,.42);opacity:0;transform:translateY(0.4375rem);transition:opacity .22s,transform .22s}
.book-page-image.loaded{opacity:1;transform:translateY(0)}
.loading-indicator{position:absolute;color:rgba(255,255,255,.55);font:0.8125rem Arial,Helvetica,sans-serif}
.page-nav{width:3.625rem;height:3.625rem;border:0.0625rem solid rgba(255,255,255,.13);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;font:2.625rem/1 Arial,Helvetica,sans-serif;transition:background .16s,transform .16s}
.page-nav:hover:not(:disabled){background:rgba(255,255,255,.14);transform:scale(1.05)}
.listen-bar{max-width:47.5rem;margin:0 auto;padding:0.25rem 1rem 0.875rem;display:none;flex-direction:column;align-items:center;gap:0.625rem;font-family:Arial,Helvetica,sans-serif}
.listen-bar.show{display:flex}
.listen-row{display:flex;align-items:center;justify-content:center;gap:0.75rem;flex-wrap:wrap}
.listen-play{border:0;border-radius:62.4375rem;min-height:3rem;padding:0.75rem 1.75rem;font-weight:700;font-size:0.9375rem;color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 0.625rem 1.625rem rgba(0,0,0,.25)}
.listen-opt{font-size:0.75rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:0.375rem}
.listen-opt select{max-width:46vw;border-radius:0.625rem;border:0.0625rem solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;padding:0.375rem 0.5rem;font-size:0.75rem}
.listen-opt select option{color:#222}
.listen-caption{display:none;max-width:42.5rem;text-align:center;font-family:Georgia,serif;font-size:clamp(1rem,2.2vw,1.3125rem);line-height:1.6;color:rgba(255,255,255,.88)}
.listen-bar.playing .listen-caption{display:block}
.listen-caption .s{border-radius:0.375rem;padding:0.0625rem 0.1875rem;transition:background .2s}
.listen-caption .s.on{background:rgba(229,154,180,.4);color:#fff}
.listen-note{font-size:0.6875rem;color:rgba(255,255,255,.5)}
.reader-bottom-controls{max-width:43.75rem;margin:0 auto;padding:0.3125rem 1.25rem 1.375rem;display:flex;align-items:center;justify-content:center;gap:1.25rem}
.reader-bottom-controls span{min-width:6.875rem;text-align:center;font:0.75rem Arial,Helvetica,sans-serif;color:rgba(255,255,255,.65)}
.reader-tip{margin:0;padding-bottom:1.5625rem;text-align:center;font:0.6875rem Arial,Helvetica,sans-serif;color:rgba(255,255,255,.40)}

.reader-view{background:linear-gradient(160deg,#1f4f9a,#16315f);color:#fff}
.reader-back-button{background:var(--yellow);color:var(--navy);border:0;font-weight:700;box-shadow:0 0.25rem 0 #d9a900}
.reader-title-area h1{font-weight:600}.reader-series,.reader-bottom-controls span,.page-counter,.reader-tip,.listen-bar,.listen-opt{font-family:Fredoka,"Trebuchet MS",sans-serif}
.page-nav{background:var(--yellow);color:var(--navy);border:0;box-shadow:0 0.3125rem 0 #d9a900}.page-nav:hover:not(:disabled){background:#ffe27a}
.primary-button,.secondary-button,.listen-play{border:0;border-radius:6.1875rem;font-weight:700;font-size:1rem;padding:0.75rem 1.5rem;min-height:3rem;color:var(--navy);background:var(--yellow);box-shadow:0 0.3125rem 0 #d9a900;font-family:Fredoka,"Trebuchet MS",sans-serif}
.secondary-button{background:#fff;box-shadow:0 0.3125rem 0 #b9c7e6}.listen-play{background:var(--green);color:#fff;box-shadow:0 0.3125rem 0 #23a36f}
.primary-button:disabled,.secondary-button:disabled,.page-nav:disabled{opacity:.4;box-shadow:none}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero .pic{order:-1;width:8.75rem;margin-bottom:-0.375rem}.card{width:8.75rem}.grid{grid-template-columns:repeat(2,1fr)}.brand-text{font-size:1.125rem}
.reader-toolbar{grid-template-columns:auto 1fr auto;gap:0.5625rem;min-height:4.875rem;padding:0.625rem}.reader-back-button{font-size:0;width:2.75rem;height:2.75rem;padding:0;display:grid;place-items:center}.reader-back-button::before{content:"←";font-size:1.375rem}
.reader-series{display:none}.reader-title-area h1{font-size:0.9375rem}.page-counter{min-width:auto;padding:0.5rem 0.625rem;font-size:0.6875rem}
.reader-stage{min-height:calc(100vh - 20rem);padding:0.875rem 0.375rem;grid-template-columns:1fr}.book-page-container{height:min(56vh,43.125rem)}.page-nav,.reader-tip{display:none}
.reader-bottom-controls{padding:0.75rem 0.75rem calc(1.125rem + env(safe-area-inset-bottom));gap:0.5rem}.reader-bottom-controls button{flex:1;padding:0.6875rem 0.75rem;font-size:0.875rem}.reader-bottom-controls span{min-width:4.375rem;font-size:0.6875rem}}
@media(max-width:380px){.reader-bottom-controls span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

html{font-size:16px}
@media(min-width:1400px){html{font-size:18px}}
@media(min-width:1920px){html{font-size:24px}}
@media(min-width:2560px){html{font-size:32px}}
#explore{max-width:75rem}
.reader-view{min-height:100dvh}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem}
.tile{border:0;border-radius:1.4rem;padding:1rem 1.1rem;color:#fff;font-weight:700;font-size:1.15rem;display:flex;flex-direction:column;gap:.15rem;text-align:left;box-shadow:0 .35rem 0 rgba(27,58,107,.22);transition:transform .15s}
.tile span{font-size:2.2rem;line-height:1.1}.tile small{font-weight:500;opacity:.92;font-size:.85rem}.tile:hover{transform:translateY(-.3rem)}
.d-age{background:var(--yellow);color:var(--navy)}.d-theme{background:var(--purple)}
.prev{position:absolute;top:.5rem;right:.5rem;background:#fff;color:var(--navy);border-radius:99px;padding:.15rem .65rem;font-size:.75rem;font-style:normal;font-weight:600}
:focus-visible{outline:.25rem solid var(--yellow);outline-offset:.2rem}
.card:focus-visible{outline:none}.card:focus-visible .cover{outline:.3rem solid var(--yellow);outline-offset:.2rem}
@media(hover:none){.card:hover,.tile:hover{transform:none}}
.book-page-container.split{height:auto;aspect-ratio:var(--ar);width:min(100%,calc(66dvh*var(--ar)));margin:0 auto;border-radius:.75rem;box-shadow:0 1.8rem 4rem rgba(0,0,0,.42)}
.split-img{position:absolute;top:0;left:0;width:200%;max-width:none;max-height:none;height:100%;object-fit:fill;border-radius:0;box-shadow:none}
@media(min-width:761px) and (max-width:1100px){.card{width:11rem}.page-nav{width:3rem;height:3rem}}
@media(min-width:1400px){.card{width:12rem}.book-page-container{height:min(72vh,60rem)}}
@media(max-height:520px) and (orientation:landscape){.topbar{position:static}.reader-toolbar{min-height:3rem;padding:.4rem 1rem}.reader-series,.reader-tip{display:none}.reader-stage{min-height:0;padding:.4rem 1rem}.book-page-container{height:76dvh}.reader-bottom-controls{padding:.2rem 1rem .5rem}.listen-bar{padding-bottom:.4rem}.hero{padding:1rem}}