/* Layout: streaming-style kids' library. White header → book hero (text left, picture-book cover on a sky panel right) → tabs → shelves that scroll sideways. Player opens full screen. */
:root{
  --bg:#FFFFFF; --soft:#F2F6FC; --ink:#15213B; --muted:#5A6782; --line:#E2E8F2;
  --blue:#2E62F0; --blue-ink:#FFFFFF; --sky1:#CFE6FF; --sky2:#EAF4FF; --sun:#FFC83D;
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0E1424; --soft:#161E33; --ink:#EDF2FB; --muted:#9AA8C4; --line:#253050; --blue:#5B86FF; --blue-ink:#0B1020; --sky1:#1D3463; --sky2:#121B33; --sun:#FFD25E; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#0E1424; --soft:#161E33; --ink:#EDF2FB; --muted:#9AA8C4; --line:#253050; --blue:#5B86FF; --blue-ink:#0B1020; --sky1:#1D3463; --sky2:#121B33; --sun:#FFD25E; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55; font-weight:500}
h1,h2,h3{margin:0; line-height:1.15; text-wrap:balance; font-weight:900}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--sun); outline-offset:2px}
.wrap{max-width:1240px; margin:0 auto; padding-inline:24px}
@media (max-width:600px){ .wrap{padding-inline:16px} }

/* header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--bg); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:28px; height:68px}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:900; font-size:1.6rem; letter-spacing:-.02em; color:var(--blue)}
.logo svg{width:28px; height:28px}
nav.main{display:flex; gap:6px}
nav.main a{text-decoration:none; font-weight:800; color:var(--muted); padding:8px 12px; border-radius:10px}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--ink); background:var(--soft)}
.hright{margin-left:auto; display:flex; align-items:center; gap:14px}
.link{background:none; border:0; font-weight:800; color:var(--ink); padding:8px}
.acct{font-weight:800; color:var(--muted); font-size:.92rem; white-space:nowrap}
.acct .link{color:var(--blue)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; padding:14px 30px; font-weight:900; font-size:1.02rem; text-decoration:none; white-space:nowrap; transition:transform .15s, filter .15s}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn-blue{background:var(--blue); color:var(--blue-ink); box-shadow:0 8px 20px -10px var(--blue)}
.btn-line{background:transparent; color:var(--ink); border:2px solid var(--line)}
.btn-sm{padding:9px 18px; font-size:.92rem}
.btn svg{width:18px; height:18px}
@media (max-width:820px){ nav.main{display:none} .hright .link{display:none} }

/* home hero */
.feature{position:relative; border-radius:24px; overflow:hidden; margin-top:24px; aspect-ratio:21/8; min-height:340px; background:#101833}
.feature .fart{position:absolute; inset:0; animation:drift 24s ease-in-out infinite alternate}
.feature .fart img{width:100%; height:100%; object-fit:cover; display:block}
.feature .shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,16,40,.86) 0%, rgba(10,16,40,.55) 38%, rgba(10,16,40,0) 66%)}
.feature .txt{position:absolute; left:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:40px; max-width:540px; color:#fff}
.feature .kick{font-size:.8rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:#FFD25E}
.feature h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.feature p{color:rgba(255,255,255,.86); font-size:1.08rem}
.feature .row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:6px}
.feature .btn-ghost{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(6px)}
@keyframes drift{from{transform:scale(1.04) translateX(0)} to{transform:scale(1.1) translateX(-2%)}}
@media (max-width:720px){ .feature{aspect-ratio:auto; min-height:460px} .feature .shade{background:linear-gradient(0deg, rgba(10,16,40,.9) 0%, rgba(10,16,40,.5) 55%, rgba(10,16,40,0) 85%)} .feature .txt{top:auto; padding:24px; justify-content:flex-end} }

/* age filter */
.agefilter{display:flex; gap:10px; margin:28px 0 -10px; flex-wrap:wrap}
.mini[aria-pressed="true"]{background:var(--blue); color:var(--blue-ink); border-color:var(--blue)}

/* shelves */
.shelf{margin-top:44px}
.shelf-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.shelf-head h2{font-size:1.45rem}
.arrows{display:flex; gap:8px}
.arrow{width:40px; height:40px; border-radius:50%; border:2px solid var(--line); background:var(--bg); display:grid; place-items:center}
.arrow svg{width:18px; height:18px}
.track{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(150px, 17vw, 210px); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin}
.track > *{scroll-snap-align:start}
.bk{text-decoration:none; color:inherit; background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px}
.bk .t{font-weight:800; font-size:.98rem; line-height:1.25}
.bk .m{color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums}

/* picture-book cover */
.cover{position:relative; aspect-ratio:3/4; border-radius:6px 12px 12px 6px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 12px 24px -12px rgba(20,30,60,.45); transition:transform .25s ease, box-shadow .25s ease; background:#ccd}
.bk:hover .cover{transform:translateY(-6px) rotate(-1deg); box-shadow:0 20px 34px -16px rgba(20,30,60,.55)}
.cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7%; background:linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.18) 60%, rgba(0,0,0,0)); z-index:2}
.cover .ttl{position:absolute; left:0; right:0; top:0; padding:10% 9% 22%; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); color:#fff; font-weight:900; font-size:clamp(1rem, 10cqw, 1.7rem); line-height:1.05; text-shadow:0 2px 6px rgba(0,0,0,.45); text-wrap:balance}
.cover{container-type:inline-size}
.cover .by{position:absolute; left:9%; bottom:7%; z-index:1; color:#fff; font-size:clamp(.6rem,5.2cqw,.8rem); font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cover .bar{position:absolute; left:0; bottom:0; height:5px; background:var(--sun); z-index:3}
.cover .heart{position:absolute; right:7%; bottom:6%; z-index:3; width:26px; height:26px; border-radius:50%; background:#fff; color:#E0465E; display:grid; place-items:center; font-size:.85rem}

/* book page */
.bhero{position:relative; overflow:hidden}
.bhero .grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:center; padding-block:48px}
.bhero h1{font-size:clamp(2.1rem,4.4vw,3.5rem); letter-spacing:-.01em}
.bhero .cta{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:28px}
.bhero .sub{color:var(--muted); font-size:.95rem}
.bhero .sub button{background:none; border:0; padding:0; color:var(--blue); font-weight:800; text-decoration:underline}
.bhero .tag{margin-top:24px; color:var(--muted); font-size:1.08rem; max-width:40ch}
.bhero .acts2{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.sky{position:absolute; top:0; bottom:0; right:0; width:58%; background:radial-gradient(120% 90% at 70% 40%, var(--sky1), var(--sky2) 60%, transparent 85%); border-bottom-left-radius:60% 30%; z-index:-1}
.bookshot{position:relative; display:flex; justify-content:center; align-items:center; padding:18px}
.bookshot .cover{width:min(340px, 70%); transform:rotate(2.5deg); box-shadow:0 30px 50px -22px rgba(15,30,70,.6)}
.bookshot .peek{position:absolute; right:-8%; bottom:-4%; width:58%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; transform:rotate(-4deg); box-shadow:0 20px 40px -20px rgba(15,30,70,.55); border:5px solid var(--bg); background:var(--soft)}
.bookshot .peek img{width:100%; height:100%; object-fit:cover}
.playfab{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:var(--blue); color:#fff; border:0; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(30,60,160,.6); z-index:4}
.playfab svg{width:30px; height:30px; margin-left:4px}
@media (max-width:860px){ .bhero .grid{grid-template-columns:1fr; gap:20px; padding-block:28px} .sky{width:100%; top:auto; height:55%; border-radius:0} .bookshot{order:-1} .bookshot .peek{right:2%} }

.tabs{display:flex; gap:26px; border-bottom:1px solid var(--line); overflow-x:auto}
.tabs button{background:none; border:0; padding:14px 2px; font-weight:900; color:var(--muted); border-bottom:3px solid transparent; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--blue); border-bottom-color:var(--blue)}
.panel{padding-block:30px}
.details{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:48px}
.details h2{font-size:1.5rem; margin-bottom:12px}
.details .desc{color:var(--muted); max-width:62ch}
.details .desc.clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.more{background:none; border:0; padding:0; margin-top:10px; color:var(--blue); font-weight:900}
.meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; align-content:start}
.meta div{display:flex; flex-direction:column}
.meta dt{font-size:.82rem; color:var(--muted); font-weight:800}
.meta dd{margin:0; font-weight:900; font-variant-numeric:tabular-nums}
@media (max-width:760px){ .details{grid-template-columns:1fr; gap:24px} }
.pages{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px}
.pg{background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px}
.pg .im{aspect-ratio:16/9; border-radius:12px; overflow:hidden; max-width:100%; background:var(--soft)}
.pg img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.pg:hover img{transform:scale(1.04)}
.pg .n{font-size:.8rem; font-weight:900; color:var(--blue); letter-spacing:.06em}
.pg .x{color:var(--muted); font-size:.92rem}
.recs{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.recs li{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px}
.recs .tn{width:72px; aspect-ratio:16/9; border-radius:8px; object-fit:cover; background:var(--soft)}
.recs .tx{flex:1; min-width:160px; color:var(--muted); font-size:.92rem}
.recs .st{font-weight:900; color:var(--blue); font-size:.88rem}
.recs input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.mini{border:2px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:5px 14px; font-weight:800; font-size:.86rem; cursor:pointer}
.hint{color:var(--muted); max-width:66ch}

/* account page */
.acctpage{padding-block:40px; max-width:720px}
.acctpage h1{font-size:2rem; margin-bottom:24px}
.acctpage h2{font-size:1.3rem; margin-top:40px; margin-bottom:6px}
.acctacts{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap}
.childform{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.childform input{border:2px solid var(--line); border-radius:12px; padding:10px 14px; background:var(--bg); color:var(--ink); font:inherit}
.childform input#childName{flex:1; min-width:160px}
.childform input#childAge{width:90px}


/* activities */
.tasks{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:start}
.tasks h2{font-size:1.4rem; margin-bottom:6px}
.qq{border:0; padding:0; margin:22px 0 0}
.qq legend{font-weight:900; font-size:1.08rem; display:flex; gap:10px; align-items:center; padding:0}
.qn{width:30px; height:30px; border-radius:50%; background:var(--blue); color:var(--blue-ink); display:inline-grid; place-items:center; font-size:.9rem; flex:none}
.opts{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding-left:40px}
.opt{border:2px solid var(--line); background:var(--bg); color:var(--ink); border-radius:14px; padding:10px 16px; font-weight:800; text-align:left}
.opt:hover:not(:disabled){border-color:var(--blue)}
.opt.ok{background:#22A06B; border-color:#22A06B; color:#fff}
.opt.no{opacity:.45; text-decoration:line-through}
.opt:disabled{cursor:default}
.stars{margin-top:22px; font-size:1.6rem; color:var(--sun); font-weight:900; letter-spacing:.08em; min-height:1.6em}
.talk{margin-top:16px; background:var(--soft); border-radius:16px; padding:16px 18px; color:var(--ink)}
.wsprev{margin:14px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; max-width:360px; box-shadow:0 14px 30px -18px rgba(15,30,70,.4)}
.wsprev img{display:block; width:100%}
@media (max-width:820px){ .tasks{grid-template-columns:1fr} .opts{padding-left:0} }
/* value strip & plans */
.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:56px}
.why article{background:var(--soft); border-radius:20px; padding:24px}
.why h3{font-size:1.1rem; margin:12px 0 6px}
.why p{color:var(--muted)}
.why .ic{width:44px; height:44px; border-radius:14px; background:var(--blue); color:var(--blue-ink); display:grid; place-items:center}
.why .ic svg{width:22px; height:22px}
@media (max-width:820px){ .why{grid-template-columns:1fr} }
.plans{margin-top:56px; background:linear-gradient(135deg, var(--sky1), var(--sky2)); border-radius:28px; padding:40px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:stretch}
.plans .intro h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.plans .intro p{color:var(--muted); margin-top:10px}
.plan{background:var(--bg); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:8px; border:2px solid transparent}
.plan.best{border-color:var(--blue)}
.plan .badge{align-self:flex-start; background:var(--sun); color:#2A1C00; font-size:.75rem; font-weight:900; padding:3px 10px; border-radius:999px}
.plan .price{font-size:2rem; font-weight:900; font-variant-numeric:tabular-nums}
.plan .price small{font-size:.95rem; color:var(--muted); font-weight:800}
.plan ul{margin:4px 0 12px; padding-left:18px; color:var(--muted)}
.plan .btn{margin-top:auto}
@media (max-width:900px){ .plans{grid-template-columns:1fr; padding:24px} }
footer{margin-top:64px; border-top:1px solid var(--line)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-block:26px; color:var(--muted); font-size:.9rem}

/* sign-in sheet */
dialog.sheet{border:0; border-radius:22px; padding:28px; width:min(420px, calc(100% - 32px)); background:var(--bg); color:var(--ink)}
dialog.sheet::backdrop{background:rgba(8,14,30,.55)}
dialog.sheet h2{font-size:1.4rem}
dialog.sheet p{color:var(--muted); margin:8px 0 16px}
dialog.sheet label{font-weight:800; font-size:.9rem}
dialog.sheet input{width:100%; margin:6px 0 14px; padding:12px 14px; border-radius:12px; border:2px solid var(--line); background:var(--bg); color:var(--ink); font:inherit}
dialog.sheet .row{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
dialog.sheet .note{font-size:.84rem}

/* ===== player (fixed dark look by design) ===== */
.player{position:fixed; inset:0; z-index:60; background:#060A16; color:#EEF3FF; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 12px)}
.ptop{display:flex; align-items:center; gap:12px; max-width:1200px; width:100%; margin:0 auto}
.ptop h2{flex:1; min-width:0; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pbtn{border:0; background:rgba(255,255,255,.1); color:#EEF3FF; border-radius:999px; padding:8px 14px; font-weight:800; display:inline-flex; align-items:center; gap:6px}
.pbtn:hover{background:rgba(255,255,255,.18)}
.pbtn.round{width:44px; height:44px; padding:0; justify-content:center}
.pbtn.main{width:58px; height:58px; background:#2E62F0; color:#fff}
.pbtn svg{width:20px; height:20px}
.pbtn[aria-pressed="false"]{opacity:.55}
.psel{max-width:220px; appearance:auto; background:#1A2238; color:#EEF3FF; border:0}
.pstage{flex:1; min-height:0; display:grid; place-items:center; padding-block:12px}
.frame{position:relative; width:min(100%, calc((100dvh - 190px) * 16 / 9)); aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; max-width:100%}
.frame .ly{position:absolute; inset:0; opacity:0; transition:opacity 1s ease}
.frame .ly.on{opacity:1}
.frame .ly .art{position:absolute; inset:0; transform-origin:var(--ox,50%) var(--oy,50%)}
.frame .ly img{width:100%; height:100%; object-fit:cover; display:block}
.frame .ly video.anim{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:2}
.frame .ly.on .art{animation:kb var(--kd,12s) linear both}
.paused .frame .ly.on .art{animation-play-state:paused}
.lv-gl,.lv-pt{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.lv-gl{opacity:0; transition:opacity .5s}
@keyframes kb{from{transform:scale(1.02) translate(0,0)} to{transform:scale(1.16) translate(var(--tx,0), var(--ty,0))}}
.cap{position:absolute; left:50%; bottom:4%; transform:translateX(-50%); width:min(92%, 980px); background:rgba(255,255,255,.93); color:#15213B; border-radius:16px; padding:12px 20px; text-align:center; font-weight:800; font-size:clamp(.95rem, 2.1vw, 1.45rem); line-height:1.45; box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.cap span{color:#8A94AA; transition:color .15s}
.cap span.on{color:#15213B}
.cap span.now{color:#2E62F0}
.cap[hidden]{display:none}
.pnote{max-width:960px; margin:0 auto 6px; text-align:center; color:#FFD25E; font-size:.88rem}
.pctl{max-width:1200px; width:100%; margin:6px auto 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.seek{flex:1; min-width:140px; accent-color:#2E62F0}
.time{font-variant-numeric:tabular-nums; font-size:.9rem; opacity:.8; min-width:84px; text-align:center}
.endcard{position:absolute; inset:0; display:grid; place-items:center; background:rgba(6,10,22,.6); text-align:center}
.endcard h3{font-size:clamp(1.6rem,4vw,2.6rem); color:#fff}
.endcard .row{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){ .feature .fart, .frame .ly.on .art{animation:none} }

.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:14px; font-weight:800; z-index:90; max-width:calc(100% - 32px); box-shadow:0 10px 30px rgba(0,0,0,.25)}