/* ============================================================
   KiddoNest — premium playful design system (mobile-first)
   ============================================================ */
:root{
  --primary:#6A43D8; --primary-dark:#4A28B0; --primary-soft:#EDE7FC;
  --ink:#2A2F45; --ink-soft:#6B7185; --ink-faint:#A6ABBD; --cactus-dark:#1B2244;
  --sky-top:#8BDCFD; --sky-mid:#C9ECFF; --cream:#FCF7E8; --cream-soft:#FBEFD3;
  --gold:#F7B500; --gold-soft:#FFF1CC; --coral:#F8623C; --teal:#19C7C7; --pink:#F0588F; --success:#2FAE6A;
  --surface:#fff; --border:#ECEEF5;
  --r-md:18px; --r-lg:26px; --r-xl:36px; --pill:999px;
  --shadow-sm:0 4px 14px rgba(27,34,68,.08);
  --shadow-card:0 18px 44px rgba(27,34,68,.12);
  --shadow-btn:0 10px 24px rgba(106,67,216,.34);
  --maxw:1120px;
  --font-head:'Fredoka',system-ui,sans-serif; --font-body:'Nunito',system-ui,sans-serif; --font-logo:'Baloo 2',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:#2B3047;background:#fff;font-size:17.5px;font-weight:500;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);color:var(--cactus-dark);line-height:1.05;margin:0;letter-spacing:-.5px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.accent{color:var(--primary)}

/* Material Symbols (icon font — not emoji, not SVG) */
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 40}
.pill-mini .material-symbols-rounded{font-size:16px;vertical-align:-3px;margin-right:3px}
.trust .material-symbols-rounded{font-size:17px;vertical-align:-3px;color:var(--primary)}
.tagpill .material-symbols-rounded{font-size:17px;vertical-align:-3px}
.band-spark .material-symbols-rounded{font-size:22px}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:600;font-size:1.05rem;border:none;border-radius:var(--pill);cursor:pointer;padding:15px 30px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;overflow:hidden}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-primary{background:linear-gradient(135deg,#7C4DEF,#6A43D8);color:#fff;box-shadow:var(--shadow-btn)}
.btn-ghost{background:#fff;color:var(--primary);border:2px solid var(--primary-soft);box-shadow:var(--shadow-sm)}
.btn-white{background:#fff;color:var(--primary);box-shadow:var(--shadow-card)}
.btn-lg{padding:17px 34px;font-size:1.12rem}
.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s}
.shine:hover::after{left:140%}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,238,245,.8);transition:box-shadow .3s}
.topbar.scrolled{box-shadow:0 6px 24px rgba(27,34,68,.08)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-logo);font-weight:800;color:var(--primary);font-size:1.3rem}
.brand img{width:36px;height:36px;object-fit:contain}
.nav{display:none;gap:28px;align-items:center}
.nav a{font-family:var(--font-head);font-weight:500;color:var(--ink-soft);position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:3px;border-radius:3px;background:var(--primary);transition:width .25s}
.nav a:hover{color:var(--primary)} .nav a:hover::after{width:100%}
.topbar .cta{font-size:.95rem;padding:10px 20px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;text-align:center;padding:40px 0 70px;background:linear-gradient(180deg,#8BDCFD 0%,#A9C7FF 30%,#C9B8FF 58%,#FCF7E8 100%);background-size:100% 200%;animation:skyShift 16s ease-in-out infinite alternate}
@keyframes skyShift{to{background-position:0 30%}}
.hero-inner{position:relative;z-index:3}
.tagpill{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--primary);border-radius:var(--pill);padding:8px 18px;font-family:var(--font-head);font-weight:600;font-size:.88rem;box-shadow:var(--shadow-sm);margin-bottom:18px}
.mascot-wrap{position:relative;width:200px;margin:4px auto 16px}
.mascot{width:100%;filter:drop-shadow(0 18px 26px rgba(27,34,68,.22))}
.mascot-glow{position:absolute;inset:6% 10% 14%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 65%);filter:blur(8px);z-index:-1}
.hero h1{font-size:clamp(2.4rem,9vw,4.1rem);font-weight:700}
.hero h1 .w{display:inline-block;will-change:transform}
.squiggle{position:relative;display:inline-block}
.squiggle::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.28em;background:linear-gradient(90deg,var(--gold),var(--coral));border-radius:var(--pill);z-index:-1;opacity:.85;transform:rotate(-1.2deg)}
.hero .lead{color:#384063;font-size:1.22rem;margin:18px auto 0;max-width:34ch;font-weight:600;line-height:1.55}
.cta-row{display:flex;flex-direction:column;gap:13px;margin-top:26px;align-items:center}
.cta-row .btn{width:100%;max-width:340px}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px;margin-top:28px}
.trust span{display:inline-flex;align-items:center;gap:6px;color:#384063;font-weight:700;font-size:.98rem;background:rgba(255,255,255,.6);padding:7px 14px;border-radius:var(--pill)}

/* hero ambient decor */
.decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:var(--pill);opacity:.85;filter:blur(.3px)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:120px;height:34px;top:60px;left:-20px}.c1::before{width:50px;height:50px;top:-22px;left:18px}.c1::after{width:38px;height:38px;top:-14px;left:60px}
.c2{width:90px;height:26px;top:120px;right:10px;opacity:.7}.c2::before{width:38px;height:38px;top:-16px;left:14px}.c2::after{width:30px;height:30px;top:-10px;left:44px}
.c3{width:70px;height:20px;top:210px;left:40px;opacity:.6}.c3::before{width:30px;height:30px;top:-12px;left:10px}.c3::after{width:24px;height:24px;top:-8px;left:34px}
.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.7}
.d1{top:70px;left:14%;width:8px;height:8px}.d2{top:130px;right:16%;background:var(--gold);opacity:.6}.d3{top:200px;left:9%;width:6px;height:6px}.d4{top:50px;right:30%;width:7px;height:7px}.d5{top:170px;right:9%;width:5px;height:5px;background:var(--pink);opacity:.5}

/* ---------- Marquee ---------- */
.marquee{background:linear-gradient(90deg,#6A43D8,#8B5CF6);overflow:hidden;padding:13px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:18px;align-items:center;animation:marq 26s linear infinite;will-change:transform}
.marquee span{font-family:var(--font-head);font-weight:600;color:#fff;font-size:1rem;letter-spacing:.5px}
.marquee .dot{opacity:.5}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{padding:64px 0;position:relative}
.section.alt{background:linear-gradient(180deg,#fff,var(--cream))}
#features{background:linear-gradient(180deg,#FFFFFF 0%,#F8F6FE 100%)}
#inside{background:linear-gradient(180deg,#FCFBFF 0%,#F6F4FC 100%)}
#how{background:linear-gradient(180deg,#FFFFFF 0%,#F5F9FE 100%)}
#peek{background:linear-gradient(180deg,#FCFBFF 0%,#F6F8FC 100%)}
.section h2{font-size:clamp(1.9rem,6.4vw,2.7rem);text-align:center;font-weight:700}
.section .sub{text-align:center;color:#48506b;max-width:42ch;margin:16px auto 0;font-size:1.2rem;line-height:1.6}
.eyebrow{text-align:center;font-family:var(--font-head);font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:1.5px;font-size:.92rem;margin-bottom:8px}

/* feature cards — white & readable, creative colour accents (no SVG) */
.features{display:grid;grid-template-columns:1fr;gap:18px;margin-top:38px;perspective:1000px}
/* cactus "sticker" cards — bold dark outline + hard colour shadow + chunky icon */
.feature{position:relative;background:#fff;border-radius:28px;padding:28px 24px;border:3px solid #2C2A3D;box-shadow:6px 7px 0 var(--fc);transition:transform .25s,box-shadow .2s}
.feature:hover{box-shadow:11px 13px 0 var(--fc)}
.feature .ic{position:relative;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin-bottom:16px;color:#fff;background:var(--fc);border:3px solid #2C2A3D;box-shadow:4px 4px 0 #2C2A3D;transition:transform .3s}
.feature .ic .material-symbols-rounded{font-size:36px}
.feature:hover .ic{transform:translate(-1px,-2px) rotate(-7deg)}
.feature h3{position:relative;font-size:1.34rem;font-weight:700;color:#221F33;margin-bottom:10px}
.feature h3::after{content:"";display:block;width:46px;height:6px;border-radius:6px;background:var(--fc);margin-top:10px}
.feature p{position:relative;color:#3a3850;margin:0;font-size:1.08rem;line-height:1.62}
.feature em{color:var(--fc);font-style:normal;font-weight:800}
@media(min-width:520px){.features{grid-template-columns:repeat(2,1fr)}}

/* showcase rows (real art) */
.showrows{display:flex;flex-direction:column;gap:34px;margin-top:40px}
.showrow{display:flex;flex-direction:column;gap:20px;align-items:center}
.show-art{position:relative;width:100%;padding:14px;border-radius:var(--r-xl);background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 32%,#fff),color-mix(in srgb,var(--rc) 12%,#fff));border:3px solid #2C2A3D;box-shadow:8px 9px 0 var(--rc);transition:transform .3s,box-shadow .2s}
.show-art:hover{box-shadow:12px 13px 0 var(--rc)}
.show-art img{width:100%;display:block;border-radius:calc(var(--r-xl) - 12px);border:2px solid #2C2A3D}
.show-txt{width:100%}
.pill-mini{display:inline-block;background:color-mix(in srgb,var(--rc) 16%,#fff);color:var(--rc);border-radius:var(--pill);padding:6px 15px;font-family:var(--font-head);font-weight:700;font-size:.84rem;margin-bottom:12px}
.show-txt h3{font-size:1.7rem;margin-bottom:10px;color:var(--cactus-dark);font-weight:700}
.show-txt p{color:#3c4359;margin:0;font-size:1.16rem;line-height:1.62}

/* steps — colourful cards with floating badge + emoji */
.steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:48px}
.step{position:relative;background:#fff;border:3px solid #2C2A3D;border-radius:var(--r-lg);padding:30px 24px 24px;box-shadow:6px 7px 0 var(--sc);transition:box-shadow .2s}
.step:hover{box-shadow:10px 12px 0 var(--sc)}
.step .n{position:absolute;top:-20px;left:22px;width:50px;height:50px;border-radius:50%;background:var(--sc);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.3rem;display:grid;place-items:center;border:3px solid #2C2A3D;box-shadow:3px 3px 0 #2C2A3D}
.step .step-emoji{position:absolute;top:16px;right:18px;color:var(--sc);opacity:.9}
.step .step-emoji .material-symbols-rounded{font-size:38px}
.step h3{font-size:1.32rem;margin:16px 0 6px;color:var(--cactus-dark);font-weight:700}
.step p{color:#3c4359;margin:0;font-size:1.08rem;line-height:1.6}

/* screenshot showcase */
.screens{display:flex;gap:18px;overflow-x:auto;padding:30px 22px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.screens::-webkit-scrollbar{display:none}
.phone{flex:none;width:215px;scroll-snap-align:center;border-radius:30px;overflow:hidden;box-shadow:var(--shadow-card);border:6px solid #fff;background:#fff;transition:transform .3s}
.phone:hover{transform:translateY(-8px)}
.phone img{width:100%;display:block}

/* CTA band */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#6A43D8,#8B5CF6 60%,#B57BFF);color:#fff;border-radius:var(--r-xl);padding:44px 26px 40px;text-align:center;box-shadow:var(--shadow-card)}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,6vw,2.3rem)}
.cta-band p{color:rgba(255,255,255,.92);margin:12px auto 24px;max-width:36ch}
.band-mascot{width:84px;margin:0 auto 10px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.25))}
.band-spark{position:absolute;color:#fff;opacity:.85}
.b1{top:18px;left:24px}.b2{top:40px;right:30px;font-size:18px}.b3{bottom:22px;left:36px;font-size:20px}

/* footer */
.footer{background:var(--cactus-dark);color:#c7cbe0;padding:40px 0;font-size:.95rem}
.footer .brand{color:#fff;margin-bottom:12px}
.footer a{color:#c7cbe0}.footer a:hover{color:#fff}
.footer .links{display:flex;flex-wrap:wrap;gap:14px 24px;margin:14px 0}
.footer .copy{color:#8990ad;font-size:.85rem;margin-top:10px}

/* ---------- tablet / desktop ---------- */
@media(min-width:760px){
  .nav{display:flex}
  .hero{padding:60px 0 96px}
  .mascot-wrap{width:250px}
  .cta-row{flex-direction:row;justify-content:center}.cta-row .btn{width:auto}
  .features{grid-template-columns:repeat(3,1fr)}
  .showrow{flex-direction:row;gap:44px;align-items:center}
  .showrow.rev{flex-direction:row-reverse}
  .show-art,.show-txt{flex:1}
  .steps{grid-template-columns:repeat(3,1fr)}.step{flex-direction:column}
  .cta-band{padding:60px}
}

/* ============================================================
   APP (app.php)
   ============================================================ */
html{overflow-x:clip}
.app-body{background:#fff;overflow-x:clip;max-width:100%}
.app-view{min-height:70vh;padding-bottom:96px;overflow-x:clip;max-width:100%}
.loading{display:grid;place-items:center;padding:80px 0}
.spinner{width:34px;height:34px;border:4px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:60px 20px;color:var(--ink-soft)} .err{color:var(--coral);font-size:.85rem}
.acct-pill{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--border);border-radius:var(--pill);padding:5px 14px 5px 5px;font-family:var(--font-head);font-weight:600;color:var(--cactus-dark);cursor:pointer}
.acct-av{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:.9rem}
.b-hero{background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 70%,#EAF4FF);padding:26px 0 30px}
.b-hero h1{font-size:1.7rem}
.row-title{font-size:1.3rem;margin:26px 0 14px}
.feat-card{display:flex;gap:14px;background:var(--primary-soft);border-radius:var(--r-lg);padding:14px;margin-top:-18px;box-shadow:var(--shadow-card);text-align:left;width:100%;border:none;cursor:pointer;align-items:center}
.feat-cover{width:38%;max-width:140px;aspect-ratio:.82;border-radius:var(--r-md);overflow:hidden;flex:none}
.feat-info{flex:1;min-width:0}
.feat-badge{display:inline-block;background:#fff;color:var(--primary-dark);border-radius:var(--pill);padding:3px 10px;font-family:var(--font-head);font-weight:600;font-size:.72rem}
.feat-info h2{font-size:1.25rem;margin:8px 0 4px}.feat-info p{color:var(--ink-soft);margin:0 0 12px;font-size:.9rem}
.feat-btn{padding:10px 18px;font-size:.95rem}
.s-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.s-card{text-align:left;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);padding:8px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.s-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.s-cover{position:relative;aspect-ratio:1.1;border-radius:var(--r-md);overflow:hidden;background:var(--sky-mid)}
.cover-img,.cover-ph{width:100%;height:100%;object-fit:cover}.cover-ph{display:grid;place-items:center}
.s-cat{position:absolute;top:6px;left:6px;background:rgba(255,255,255,.92);border-radius:var(--pill);padding:3px 8px;font-size:.62rem;font-family:var(--font-head);font-weight:600;color:var(--cactus-dark)}
.s-play{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:.8rem;box-shadow:var(--shadow-btn)}
.s-title{font-family:var(--font-head);font-weight:600;color:var(--cactus-dark);margin:8px 2px 0;font-size:1rem;line-height:1.2}
.s-meta{color:var(--ink-soft);font-size:.78rem;margin:2px}
.story-hero{position:relative;background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 60%,#EAF4FF);padding:54px 0 40px;display:grid;place-items:center}
.story-cover{width:48%;max-width:220px;aspect-ratio:.82;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);background:#fff}
.back-btn{position:absolute;left:16px;top:14px;width:42px;height:42px;border-radius:50%;background:#fff;border:none;box-shadow:var(--shadow-card);font-size:1.2rem;cursor:pointer;color:var(--primary)}
.story-sheet{background:#fff;border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:-22px;position:relative;padding:22px 20px 10px}
.story-title{font-size:1.7rem;text-align:center}
.chips{display:flex;gap:8px;justify-content:center;margin:12px 0;flex-wrap:wrap}
.chip{background:var(--primary-soft);color:var(--primary-dark);border-radius:var(--pill);padding:5px 12px;font-family:var(--font-head);font-weight:600;font-size:.78rem}
.about{background:#fff;border:2px solid var(--primary-soft);border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow-sm);margin-top:6px}
.about-h{font-family:var(--font-head);font-weight:600;color:var(--primary);margin-bottom:6px}.about p{margin:0;color:var(--ink)}
.reader{margin-top:20px}.reader-h{font-family:var(--font-head);font-weight:600;color:var(--primary);margin-bottom:10px;font-size:1.05rem}
.r-para{font-size:1.12rem;line-height:1.7;color:var(--cactus-dark);padding-left:14px;border-left:4px solid var(--c);margin:0 0 16px}
.cta-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;box-shadow:0 -6px 20px rgba(27,34,68,.12);z-index:40;max-width:var(--maxw);margin:0 auto}
.btn-listen{flex:none;display:flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--primary);color:var(--primary);border-radius:var(--pill);padding:0 20px;height:52px;font-family:var(--font-head);font-weight:600;font-size:1rem;cursor:pointer}
.btn-listen.on{background:var(--primary);color:#fff}
.btn-fav{flex:1;height:52px}
.sheet-backdrop{position:fixed;inset:0;background:rgba(27,34,68,.45);display:grid;place-items:end center;z-index:100}
.auth-card{background:#fff;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:28px 24px calc(28px + env(safe-area-inset-bottom));width:100%;max-width:440px;text-align:center;position:relative}
.auth-mascot{width:90px;margin:0 auto 10px}.auth-card h3{font-size:1.4rem}.auth-card p{color:var(--ink-soft);margin:8px 0 18px}
.auth-card #gbtn{display:flex;justify-content:center;min-height:44px}.auth-note{font-size:.82rem;color:var(--ink-faint);margin-top:16px}
.sheet-close{position:absolute;right:16px;top:14px;background:var(--cream);border:none;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;color:var(--ink-soft)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:90px;background:var(--cactus-dark);color:#fff;padding:12px 20px;border-radius:var(--pill);font-family:var(--font-head);font-weight:500;z-index:200;box-shadow:var(--shadow-card);font-size:.95rem}
@media(min-width:760px){.b-hero h1{font-size:2.2rem}.s-grid{grid-template-columns:repeat(4,1fr)}.story-cover{max-width:240px}.cta-bar{border-radius:var(--r-lg) var(--r-lg) 0 0;left:50%;transform:translateX(-50%)}}

/* reduced motion + hidden */
@media(prefers-reduced-motion:reduce){.hero{animation:none}.marquee-track{animation:none}}
[hidden]{display:none!important}

/* ============================================================
   APP v2 — sticker cards + Material icons (match landing)
   ============================================================ */
.b-hero h1{font-size:1.95rem}
.cover-ph{color:#fff}
/* featured = sticker */
.feat-card{background:#fff;border:3px solid #2C2A3D;border-radius:24px;box-shadow:6px 7px 0 var(--primary);padding:14px}
.feat-cover{border:2px solid #2C2A3D}
.feat-badge .material-symbols-rounded{font-size:15px;vertical-align:-3px;margin-right:2px}
.feat-btn{display:inline-flex;align-items:center;gap:6px}
.feat-btn .material-symbols-rounded{font-size:18px}
/* story cards = sticker */
.s-card{border:3px solid #2C2A3D;border-radius:22px;box-shadow:5px 6px 0 var(--t,#2C2A3D);transition:box-shadow .2s,transform .2s}
.s-card:hover{box-shadow:8px 10px 0 var(--t,#2C2A3D);transform:translateY(-2px)}
.s-cover{border:2px solid #2C2A3D}
.s-play{border:2px solid #2C2A3D;box-shadow:2px 2px 0 #2C2A3D}
.s-play .material-symbols-rounded{font-size:20px}
.s-cat{display:inline-flex;align-items:center;gap:3px;border:1.5px solid #2C2A3D}
.s-cat .material-symbols-rounded{font-size:13px}
.s-title{font-size:1.05rem;margin-top:10px}
.s-meta{font-size:.84rem}
/* story detail icons */
.back-btn{border:2.5px solid #2C2A3D;box-shadow:3px 3px 0 #2C2A3D;display:grid;place-items:center}
.back-btn .material-symbols-rounded{font-size:24px}
.chip{display:inline-flex;align-items:center;gap:4px}
.chip .material-symbols-rounded{font-size:15px}
.about-h,.reader-h{display:flex;align-items:center;gap:7px}
.about-h .material-symbols-rounded,.reader-h .material-symbols-rounded{font-size:21px}
.story-cover{border:3px solid #2C2A3D;box-shadow:6px 7px 0 var(--primary)}
.btn-listen{border-width:2.5px}
.btn-listen .material-symbols-rounded{font-size:22px}
.btn-fav{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-fav .material-symbols-rounded{font-size:20px}
.feat-info h2{font-size:1.3rem}
.feat-info p{font-size:.95rem}

/* ============================================================
   APP — story flow: coloring thumbs · Read+record · Listen+slideshow
   ============================================================ */
.block{margin-top:20px}
.coloring-row{display:flex;gap:12px;overflow-x:auto;padding:6px 0 8px;-webkit-overflow-scrolling:touch}
.coloring-row::-webkit-scrollbar{display:none}
.coloring-thumb{position:relative;flex:none;width:112px;aspect-ratio:.82;border-radius:16px;border:3px solid #2C2A3D;overflow:hidden;background:#fff;cursor:pointer;box-shadow:3px 4px 0 var(--primary);padding:0}
.coloring-thumb img{width:100%;height:100%;object-fit:cover}
.ct-badge{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;border:2px solid #fff}
.ct-badge .material-symbols-rounded{font-size:16px}
.save-row{width:100%;margin-top:18px;display:flex;align-items:center;justify-content:center;gap:8px}
.save-row .material-symbols-rounded{font-size:20px}
.cta-bar .btn-read{flex:1;height:54px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.cta-bar .btn-read .material-symbols-rounded{font-size:21px}

/* Read view */
.read-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.read-top .back-btn{position:static}
.read-htitle{font-family:var(--font-head);font-weight:700;color:var(--cactus-dark);font-size:1.05rem}
.read-body{padding:24px 22px 120px;max-width:680px;margin:0 auto}
.read-body .r-para{font-size:1.18rem;line-height:1.75}
.record-bar{justify-content:center;gap:14px;align-items:center}
.rec-btn{width:66px;height:66px;border-radius:50%;background:var(--coral);color:#fff;border:3px solid #2C2A3D;box-shadow:3px 3px 0 #2C2A3D;display:grid;place-items:center;cursor:pointer;flex:none}
.rec-btn.on{background:#E23B3B;animation:recpulse 1s ease-in-out infinite}
.rec-btn .material-symbols-rounded{font-size:30px}
.rec-label{font-weight:600;color:var(--ink-soft);font-size:.95rem;text-align:left}
@keyframes recpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Listen view */
.listen-wrap{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px 20px 64px;position:relative;background:linear-gradient(180deg,#EAF1FF 0%,#F4EEFC 100%)}
.listen-wrap .back-btn.light{position:absolute;top:14px;left:16px}
.slideshow{position:relative;width:min(80vw,340px);aspect-ratio:1;border-radius:30px;overflow:hidden;border:3px solid #2C2A3D;box-shadow:9px 10px 0 var(--primary);background:#fff}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide-ph{display:block}
.listen-title{font-size:1.55rem;text-align:center;color:var(--cactus-dark)}
.listen-hint{color:var(--ink-soft);margin:0;font-weight:600}
.play-btn{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,#7C4DEF,#6A43D8);color:#fff;border:3px solid #2C2A3D;box-shadow:5px 5px 0 #2C2A3D;display:grid;place-items:center;cursor:pointer}
.play-btn .material-symbols-rounded{font-size:42px}

/* coloring studio */
body.no-scroll{overflow:hidden}
.color-studio{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:linear-gradient(180deg,#EAF1FF 0%,#F4EEFC 60%,#FCEFF7 100%)}
.cs-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;flex:none}
.cs-top{justify-content:space-between}
.cs-title{font-family:var(--font-head);font-weight:700;color:var(--cactus-dark);font-size:1.15rem;text-align:center;flex:1}
.cs-btn{width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid #2C2A3D;box-shadow:3px 3px 0 #2C2A3D;display:grid;place-items:center;cursor:pointer;color:var(--cactus-dark);flex:none;transition:transform .12s,box-shadow .12s}
.cs-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2C2A3D}
.cs-btn .material-symbols-rounded{font-size:26px}
.cs-save{background:var(--gold)}
.cs-tool.on{background:var(--primary);color:#fff}
.cs-stage{flex:1;display:grid;place-items:center;padding:4px 16px;min-height:0}
.cs-paper{position:relative;width:min(92vw,560px);max-height:100%;aspect-ratio:1/1;background:#fff;border-radius:24px;border:4px solid #2C2A3D;box-shadow:7px 8px 0 var(--primary);overflow:hidden;touch-action:none}
.cs-paint{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:1}
.cs-line{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;mix-blend-mode:multiply;z-index:2}
.cs-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.cs-tools{flex:none;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-top:3px solid #2C2A3D}
.cs-swatches{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:12px}
.cs-swatch{width:38px;height:38px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 2px rgba(44,42,61,.25);cursor:pointer;transition:transform .12s}
.cs-swatch.on{transform:scale(1.18);box-shadow:0 0 0 3px #2C2A3D}
.cs-swatch[data-c="#FFFFFF"]{border-color:#E2E5F0}
.cs-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.cs-gap{flex:1;min-width:8px}
.cs-sizes{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid #2C2A3D;border-radius:var(--pill);padding:6px 12px}
.cs-size{width:34px;height:34px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.cs-size.on{background:var(--primary-soft)}
.cs-size i{display:block;background:#2C2A3D;border-radius:50%}
@media(max-width:560px){.cs-paper{width:94vw}.cs-swatch{width:34px;height:34px}.cs-btn{width:44px;height:44px}}

/* record status hints */
.rec-status{font-weight:700;font-size:.9rem}
.rec-status.ok{color:var(--success)}
.rec-status.err{color:var(--coral)}
.rec-save-hint{color:var(--primary);font-weight:800;text-decoration:underline;cursor:pointer;margin-left:6px}
.spinner.sm{width:18px;height:18px;border-width:2px}

/* account menu */
.acct-menu{position:fixed;z-index:120;background:#fff;border:2px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);padding:6px;min-width:190px}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:11px 14px;border-radius:12px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink);cursor:pointer;text-align:left}
.acct-item:hover{background:var(--primary-soft);color:var(--primary)}
.acct-item .material-symbols-rounded{font-size:22px}

/* memories list */
.mem-list{display:flex;flex-direction:column;gap:12px;padding:16px;max-width:680px;margin:0 auto}
.mem-card{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid #2C2A3D;border-radius:20px;box-shadow:4px 5px 0 var(--primary);padding:14px 16px}
.mem-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.mem-info b{font-family:var(--font-head);font-size:1.08rem;color:var(--cactus-dark)}
.mem-info span{color:var(--ink-soft);font-size:.9rem;font-weight:600}
.mem-stars{color:var(--gold);letter-spacing:1px}
.mem-play{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#7C4DEF,#6A43D8);color:#fff;border:3px solid #2C2A3D;box-shadow:3px 3px 0 #2C2A3D;display:grid;place-items:center;cursor:pointer;flex:none}
.mem-play .material-symbols-rounded{font-size:28px}
.mem-slot audio{max-width:200px}

/* category filters */
.filter-row{display:flex;gap:9px;overflow-x:auto;padding:4px 0 14px;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;background:#fff;border:2.5px solid #2C2A3D;border-radius:var(--pill);padding:8px 16px;font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--ink);cursor:pointer;box-shadow:2px 3px 0 #2C2A3D;transition:transform .12s}
.fchip .material-symbols-rounded{font-size:18px}
.fchip.on{background:var(--primary);color:#fff}
.fchip:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #2C2A3D}
.grid-empty{padding:24px 4px;color:var(--ink-soft)}
.read-foot{display:flex;justify-content:center;margin:18px 0 90px}

/* quiz */
.quiz-wrap{width:100%;max-width:560px;margin:0 auto;padding:18px 20px 90px}
.quiz-bar{height:12px;background:var(--primary-soft);border:2px solid #2C2A3D;border-radius:var(--pill);overflow:hidden;margin:8px 0 24px}
.quiz-bar span{display:block;height:100%;background:var(--gold);border-radius:var(--pill);transition:width .4s ease}
.quiz-q{font-size:clamp(1.3rem,4vw,1.8rem);text-align:center;color:var(--cactus-dark);margin-bottom:24px}
.quiz-opts{display:flex;flex-direction:column;gap:12px}
.quiz-opt{display:block;width:100%;text-align:left;background:#fff;border:3px solid #2C2A3D;border-radius:18px;box-shadow:4px 5px 0 var(--primary);padding:16px 18px;font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.quiz-opt:not(:disabled):hover{transform:translate(-1px,-2px);box-shadow:6px 8px 0 var(--primary)}
.quiz-opt:disabled{cursor:default;opacity:.85}
.quiz-opt.right{background:#E4F7EF;border-color:var(--success);box-shadow:4px 5px 0 var(--success);opacity:1}
.quiz-opt.wrong{background:#FFE9EE;border-color:var(--coral);box-shadow:4px 5px 0 var(--coral);opacity:1}
.quiz-fb{min-height:34px;text-align:center;margin-top:18px;font-family:var(--font-head);font-weight:700;font-size:1.15rem;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.quiz-fb.show{opacity:1;transform:none}
.quiz-fb.ok{color:var(--success)} .quiz-fb.no{color:var(--coral)}
.quiz-fb .material-symbols-rounded{vertical-align:-5px}

/* celebration */
.celebrate{position:relative;min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:50px 22px;overflow:hidden;background:linear-gradient(180deg,#EAF1FF,#F4EEFC 60%,#FFF1F7)}
.celebrate .back-btn.light{position:absolute;top:14px;left:16px}
.cel-mascot{width:150px;filter:drop-shadow(0 12px 16px rgba(44,36,64,.2))}
.cel-title{font-size:clamp(2rem,7vw,3rem);color:var(--cactus-dark)}
.cel-title .material-symbols-rounded{color:var(--gold);vertical-align:-6px}
.cel-sub{font-weight:700;color:var(--ink-soft);margin:0}
.cel-stars{font-size:2.6rem;color:var(--gold);letter-spacing:4px;-webkit-text-stroke:1.5px #2C2A3D;margin:6px 0}
.cel-earn{font-family:var(--font-head);font-weight:700;color:var(--primary);margin:0 0 12px}
.cel-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.confetti{position:absolute;top:0;left:0;width:11px;height:14px;border-radius:2px;z-index:5;pointer-events:none}

/* ============================================================
   2026-09-18 — match the MOBILE APP's design
   The web app was styled in June, before the RN app settled on its look, so it read as a different
   product: white page, a plain blue "Hi there!" band, a 2-up grid of cards, and sticker-outlined
   chips. The app is cream, leads with illustrated banner art, lists stories as ROWS, and gives every
   surface a chunky bottom edge. These overrides bring the two together. Later rules win, so this
   block sits at the end deliberately.
   ============================================================ */
body{background:var(--cream)}

/* The app's own Browse banner, shown WHOLE. The 80% BANNER_KEEP crop the app applies is only for the
   CATEGORY banners, which carry the untrue "1000+ Stories" strip along the bottom; this one does not
   — it ends in the Read/Listen/Play/Colour signpost, and cropping sliced straight through it. */
.kn-hero{position:relative;width:100%;aspect-ratio:1280/853;overflow:hidden;background:var(--sky-mid)}
.kn-hero img{width:100%;display:block}

/* Stories as rows, the way the app lists them: cover, then title + category + length, then play. */
.s-grid{grid-template-columns:1fr;gap:12px}
.s-card{display:flex;align-items:center;gap:13px;padding:10px;border:none;border-radius:22px;
  background:var(--surface);box-shadow:0 3px 10px rgba(44,36,64,.08);border-bottom:4px solid #ECE6F8}
.s-card:hover{transform:translateY(-2px)}
.s-card .s-cover{width:88px;height:88px;flex:none;aspect-ratio:auto;border-radius:16px}
.s-info{flex:1;min-width:0;text-align:left}
.s-card .s-title{margin:0 0 5px;font-size:1.02rem;line-height:1.25}
.s-card .s-cat{position:static;display:inline-block;background:var(--cream-soft);color:#A56A12;
  border-radius:var(--pill);padding:3px 10px;font-size:.72rem;box-shadow:none}
.s-card .s-meta{margin:5px 0 0;font-size:.78rem}
.s-card .s-play{position:static;flex:none;width:46px;height:46px;background:var(--primary);
  border-bottom:4px solid var(--primary-dark);box-shadow:none;font-size:1.1rem}

/* Chips lose the sticker outline — the app uses soft white pills that fill purple when chosen. */
.fchip{border:none;box-shadow:0 2px 6px rgba(44,36,64,.09);border-bottom:3px solid #E6E0F3;
  color:var(--ink);font-size:.9rem}
.fchip.on{background:var(--primary);color:#fff;border-bottom-color:var(--primary-dark)}
.fchip:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(44,36,64,.1)}

/* the app's toy depth on the primary button */
.btn-primary{border-bottom:5px solid var(--primary-dark);box-shadow:0 6px 16px rgba(106,67,216,.26)}

.row-title{font-size:1.22rem;margin:22px 0 12px}
/* nothing may push the page sideways — a child scrolling a list should never find it drifting */
html,body{max-width:100%;overflow-x:hidden}
@media(min-width:760px){.s-grid{grid-template-columns:repeat(2,1fr)}}