/* A welcoming illustrated world surrounds the paper storybook in every edition. */
body{background:#121c3d;color:#fff6df;isolation:isolate}
body:before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#10133345 0%,#171b4140 55%,#14203ab0 100%),url('/assets/cykid-storyworld-background.webp') center top/cover no-repeat}
body:after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 10%,#33225c16,transparent 65%),linear-gradient(180deg,transparent 45%,#11183140);}
header{max-width:none;padding-inline:max(5%,calc((100vw - 1200px)/2));border-bottom:1px solid #e4d9ff2b;background:#121b3dba;backdrop-filter:blur(14px);color:#fff5df}
header .brand-icon{color:#ffdb79;text-shadow:0 0 22px #ffc35b88}
header nav a:hover{color:#ffdd88}.smallbtn{background:#fff4dc12;border-color:#f4dc9d70;color:#fff5df;border-radius:30px}.smallbtn:hover{background:#fff4dc25}
.language-picker select{color:#fff6df;background:#283056;border-color:#c4b2e77a;border-radius:24px}.language-picker select option{background:#20294b;color:#fff6df}
.intro{padding:64px 20px 46px;position:relative}.intro .eyebrow{color:#ffdc97;letter-spacing:2.7px;text-shadow:0 2px 10px #111932}.intro h1{font-size:clamp(39px,4.5vw,64px);color:#fff9e7;text-shadow:0 3px 25px #111833,0 1px 3px #111833;line-height:1.18}.intro h1 em{color:#ffe28a;text-shadow:0 0 30px #fbc46b44}.intro p{color:#f1eaff;font-size:15px;text-shadow:0 2px 10px #10152c}
.book-wrap{background:linear-gradient(135deg,#6d67a3,#245773 60%,#376876);box-shadow:0 25px 70px #050a2f9e,0 0 65px #a386eb33;border:1px solid #e9d5ff40;color:var(--ink)}.ribbon{background:linear-gradient(135deg,#e4ac5c,#bb743a);color:#fff9e9}
.values{color:#fff2d2;text-shadow:0 2px 8px #10182f;gap:40px;padding-block:36px;font-size:12px}
.section.shelf,.section.friends,.section.grownups{background:linear-gradient(145deg,#20254beF,#192842eb);border:1px solid #d8c8ff35;border-radius:28px;padding:42px;margin-block:35px;box-shadow:0 18px 55px #050e292b;backdrop-filter:blur(10px)}
.section .eyebrow{color:#f3cf86}.section h2{color:#fff7df}.section-heading p{color:#d7d4e8;font-size:13px}.filters{gap:9px}.filters button{background:#ffffff08;border-color:#c9b8e15c;color:#e5dff0;font-size:12px}.filters .active{background:#f4d28e;color:#26314d;border-color:#f4d28e}.filters button:hover{border-color:#ffe2a1;background:#ffffff17}.filters .active:hover{background:#ffe4aa}
.story-card{color:#fff6df;border-radius:12px}.cover{border:1px solid #e8cdff3d;box-shadow:0 12px 25px #0b0f3059}.story-meta{color:#e0c799}.story-card h3{color:#fff6df}.story-card p{color:#d4d4e6}.story-card .shelf-subtitle{color:#d7b5f5!important}.read-link{color:#ffe3a1}.story-card:hover .read-link{color:#fff3cd}.story-card:focus-visible{outline-color:#ffe49e}
.friends{border-top:0}.friend-list details{border-color:#c6b4e63b}.friend-list details[open]{background:#7f6daa26}.friend-list summary{color:#fff3dc}.friend-list summary small{color:#d1cce1}.friend-list p{color:#dedbea}.friend-symbol{color:#f6d18f}.team-image{border:1px solid #cbb8f35c;box-shadow:0 15px 40px #070d2f55}
.wonder{background:linear-gradient(120deg,#173d51eb,#40365be8);border-block:1px solid #b8cbe539;box-shadow:0 15px 45px #10193233;margin-block:50px;padding-block:65px}.wonder p{color:#e3dcf0}.outline{color:#fff0cf;border-color:#f2d7a080;background:#ffffff0a;border-radius:24px}.outline:hover{background:#ffffff18}
.section.grownups{max-width:900px;padding:45px 60px}.grownups>p{color:#dddbea}.parent-notes{color:#e0d5ed;margin-inline:0;flex-wrap:wrap}.signature i{color:#ffdc98}
footer{background:#111d39e8;border-color:#b8c0dd33;color:#fff2dc;backdrop-filter:blur(12px)}footer .brand{color:#ffdf97}footer span,footer small{color:#d3cee1}
/* Paper leaves and all story illustrations keep their existing readable palette. */
#reader{color:var(--ink)}
@media(max-width:1150px){.section.shelf,.section.friends{margin-inline:5%;padding:32px}.section.grownups{margin-inline:5%}}
@media(max-width:750px){body:before{background-position:58% top}.intro{padding:43px 18px 34px}.intro .eyebrow{font-size:8px;letter-spacing:1.6px}.intro p{font-size:13px;max-width:330px;margin:18px auto 0}.intro h1{font-size:39px}.values{font-size:10px;gap:13px;padding:26px 20px}.section.shelf,.section.friends,.section.grownups{padding:27px 18px;border-radius:20px;margin:22px 4%}.section-heading{margin-bottom:23px}.section h2{font-size:29px}.story-grid{gap:24px 14px}.story-card h3{font-size:18px}.story-card p{font-size:12px}.story-meta{font-size:8px;line-height:1.7}.read-link{font-size:11px;line-height:1.5}.filters button{font-size:11px;padding:10px 14px}.wonder{padding:42px 22px;margin-block:30px}.wonder h2{font-size:28px}.parent-notes{font-size:10px}footer{padding:30px 6%}.book-wrap{box-shadow:0 18px 45px #060d365c}.friend-layout{gap:24px}}
@media(prefers-reduced-transparency:reduce){header,.section.shelf,.section.friends,.section.grownups,footer{background:#202b4b;backdrop-filter:none}}

@media(max-width:750px){body:before{background-image:linear-gradient(180deg,#10133340 0%,#171b4130 55%,#14203a85 100%),url("/assets/cykid-storyworld-mobile.webp");background-position:center top}}

/* Give the mobile header controls a shared baseline and tap area. */
@media (max-width: 750px) {
  header > .smallbtn,
  header > .language-picker select {
    box-sizing: border-box;
    min-height: 44px;
    border-radius: 22px;
    font-size: 12px;
    line-height: 1.2;
  }

  header > .smallbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    white-space: nowrap;
  }

  html header > .smallbtn span,
  html[dir="rtl"] header > .smallbtn span {
    flex: none;
    margin: 0;
    font-size: 0;
  }

  header > .smallbtn span::before {
    content: "\2197\FE0E";
    font-size: 14px;
    color: #ffdb79;
  }

  html[dir="rtl"] header > .smallbtn span::before {
    content: "\2196\FE0E";
  }

  header > .language-picker select {
    padding-block: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 550px) {
  header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 8px;
    padding-block: 10px 12px;
  }

  header > .brand {
    grid-column: 1 / -1;
    justify-self: start;
  }

  header > .smallbtn,
  header > .language-picker {
    width: 100%;
    margin: 0;
  }

  header > .language-picker select {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 360px) {
  header > .smallbtn,
  header > .language-picker select {
    padding-inline: 8px;
    font-size: 11px;
  }
}