/* === Storybook skin v1: whole site as a picture book === */
    :root {
      --book-paper: #fff8e9;
      --book-paper-2: #fffdf4;
      --book-ink: #59402f;
      --book-line: rgba(122, 82, 48, 0.18);
      --book-shadow: 0 22px 50px rgba(83, 55, 31, 0.16), 0 4px 0 rgba(117, 78, 43, 0.08);
      --book-spine: #d95f45;
      --book-ribbon: #66a98f;
      --book-sky: #dff2f1;
      --book-rose: #f8b1a3;
      --book-gold: #f3c86a;
    }

    html { background: #f2dfbd; }
    body {
      color: var(--book-ink);
      background:
        radial-gradient(circle at 18px 22px, rgba(117, 82, 50, 0.035) 0 1px, transparent 1.4px),
        radial-gradient(circle at 82px 68px, rgba(117, 82, 50, 0.03) 0 1px, transparent 1.4px),
        linear-gradient(90deg, rgba(103, 72, 39, 0.08), transparent 9%, transparent 91%, rgba(103, 72, 39, 0.08)),
        #f3dfba;
      background-size: 96px 96px, 116px 116px, auto, auto;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.22;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.24) 1px, transparent 1px),
        linear-gradient(rgba(109,75,45,0.09) 1px, transparent 1px);
      background-size: 42px 42px, 42px 42px;
      mix-blend-mode: multiply;
    }

    #mainNav {
      top: 14px;
      left: 50%;
      right: auto;
      width: min(1120px, calc(100% - 28px));
      transform: translateX(-50%);
      border: 1px solid rgba(116, 72, 38, 0.18);
      border-bottom: 4px solid rgba(116, 72, 38, 0.14);
      border-radius: 18px 18px 10px 10px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,248,233,0.94)),
        var(--book-paper);
      box-shadow: 0 10px 28px rgba(80, 52, 27, 0.13);
      backdrop-filter: blur(10px);
    }
    #mainNav::before {
      content: "";
      position: absolute;
      left: 28px;
      bottom: -15px;
      width: 44px;
      height: 22px;
      background: var(--book-ribbon);
      border-radius: 0 0 12px 12px;
      box-shadow: inset 0 -5px rgba(0,0,0,0.08);
    }
    .nav-logo {
      background: #fff3cf;
      border: 1px solid rgba(116, 72, 38, 0.16);
      border-radius: 999px;
      padding: 7px 13px;
      box-shadow: inset 0 -2px rgba(116, 72, 38, 0.08);
    }
    .nav-links a,
    .lang-switch a,
    .nav-cta {
      border-radius: 999px;
      background: rgba(255,255,255,0.5);
      border: 1px solid transparent;
    }
    .nav-links a:hover,
    .lang-switch a:hover,
    .nav-cta:hover {
      background: #fff2ca;
      border-color: rgba(116, 72, 38, 0.16);
      transform: translateY(-1px) rotate(-1deg);
    }

    .hero {
      width: min(1180px, calc(100% - 32px));
      min-height: min(760px, calc(100vh - 42px));
      margin: 86px auto 28px;
      padding: clamp(74px, 8vw, 124px) clamp(24px, 7vw, 92px) clamp(54px, 6vw, 88px);
      border-radius: 28px 16px 16px 28px;
      border: 1px solid rgba(105, 70, 38, 0.2);
      background:
        linear-gradient(90deg, rgba(104,62,38,0.16) 0 24px, transparent 24px 100%),
        radial-gradient(circle at 78% 18%, rgba(243, 200, 106, 0.42), transparent 20%),
        radial-gradient(circle at 22% 76%, rgba(102, 169, 143, 0.24), transparent 26%),
        linear-gradient(135deg, #fff8e5 0%, #e7f3eb 48%, #ffe7d5 100%);
      box-shadow: var(--book-shadow);
      overflow: hidden;
      isolation: isolate;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 18px 18px 18px 42px;
      border: 2px dashed rgba(103, 67, 38, 0.18);
      border-radius: 22px 12px 12px 22px;
      pointer-events: none;
      background: transparent;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: auto -70px -54px auto;
      width: 280px;
      height: 170px;
      border-radius: 50% 0 0 0;
      background: rgba(255,255,255,0.46);
      box-shadow: -14px -12px 26px rgba(86, 58, 36, 0.08);
      transform: rotate(-4deg);
      pointer-events: none;
    }
    .hero-content,
    .hero-text { max-width: 760px; }
    .hero-badge,
    .hero-note,
    .proof-item,
    .tab-btn,
    .btn,
    .newsletter-cta-btn {
      box-shadow: 0 4px 0 rgba(102, 70, 40, 0.11);
    }
    .hero h1,
    .hero-text h1 {
      color: #4f3828;
      text-shadow: 0 2px 0 rgba(255,255,255,0.82);
    }
    .hero p,
    .section-sub,
    .book-desc,
    .card-desc,
    .feature-desc,
    .rhythm-desc,
    .faq-answer { color: #6d5848; }

    section:not(.hero) {
      width: min(1160px, calc(100% - 32px));
      margin: 30px auto;
      padding: clamp(46px, 6vw, 76px) clamp(22px, 5vw, 66px);
      border: 1px solid rgba(105, 70, 38, 0.16);
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(103,69,39,0.055) 0 1px, transparent 1px 50%, rgba(103,69,39,0.045) 50% calc(50% + 1px), transparent calc(50% + 1px)),
        radial-gradient(circle at 100% 0, rgba(255,255,255,0.92), transparent 22%),
        var(--book-paper-2);
      box-shadow: 0 16px 38px rgba(83,55,31,0.10);
      overflow: hidden;
    }
    section:not(.hero)::before {
      content: "";
      position: absolute;
      top: 18px;
      bottom: 18px;
      left: 50%;
      width: 1px;
      background: linear-gradient(transparent, rgba(112,75,43,0.14), transparent);
      pointer-events: none;
    }
    section:not(.hero)::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 76px;
      height: 76px;
      border-radius: 18px 0 18px 0;
      background: linear-gradient(135deg, transparent 49%, rgba(222, 192, 146, 0.52) 50%, #fff9eb 70%);
      box-shadow: -8px -8px 16px rgba(86, 58, 36, 0.06);
      pointer-events: none;
    }
    section > * { position: relative; z-index: 1; }

    .section-title {
      color: #4e3726;
      text-shadow: 0 2px 0 rgba(255,255,255,0.75);
    }
    .section-title::before,
    .section-title::after {
      content: "";
      display: inline-block;
      width: 28px;
      height: 2px;
      margin: 0 10px 0.24em;
      background: rgba(104, 68, 37, 0.28);
      border-radius: 999px;
    }

    .channel-card,
    .feature-card,
    .rhythm-card,
    .video-card,
    .faq-item,
    .parents-visual,
    .char-card,
    .learn-card,
    .culture-card,
    .book-card,
    .about-inner,
    .subscribe-inner,
    .cta-bar {
      border: 1px solid rgba(96, 67, 43, 0.16) !important;
      border-radius: 14px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,248,231,0.88)),
        #fffaf0 !important;
      box-shadow: 0 9px 0 rgba(126, 83, 45, 0.07), 0 16px 28px rgba(93, 62, 35, 0.10) !important;
    }
    .channel-card,
    .feature-card,
    .rhythm-card,
    .video-card,
    .char-card,
    .learn-card,
    .culture-card,
    .book-card { transform-origin: 50% 100%; }
    .channel-card:nth-child(odd),
    .feature-card:nth-child(odd),
    .rhythm-card:nth-child(odd),
    .book-card:nth-child(odd) { transform: rotate(-0.4deg); }
    .channel-card:nth-child(even),
    .feature-card:nth-child(even),
    .rhythm-card:nth-child(even),
    .book-card:nth-child(even) { transform: rotate(0.35deg); }
    .channel-card:hover,
    .feature-card:hover,
    .rhythm-card:hover,
    .video-card:hover,
    .book-card:hover {
      transform: translateY(-6px) rotate(0deg) !important;
      box-shadow: 0 10px 0 rgba(126, 83, 45, 0.08), 0 22px 34px rgba(93, 62, 35, 0.14) !important;
    }

    .booklist-sec {
      background:
        linear-gradient(180deg, transparent 0 calc(100% - 96px), rgba(118, 78, 43, 0.20) calc(100% - 96px) calc(100% - 82px), transparent calc(100% - 82px)),
        linear-gradient(90deg, rgba(103,69,39,0.055) 0 1px, transparent 1px 50%, rgba(103,69,39,0.045) 50% calc(50% + 1px), transparent calc(50% + 1px)),
        #fff8e9 !important;
    }
    .booklist-grid { align-items: stretch; }
    .book-card {
      display: grid !important;
      grid-template-columns: 104px minmax(0, 1fr);
      gap: 18px !important;
      position: relative;
      padding: 22px !important;
    }
    .book-card::before {
      content: "";
      position: absolute;
      left: 24px;
      bottom: -11px;
      width: 100px;
      height: 12px;
      border-radius: 50%;
      background: rgba(79, 51, 28, 0.14);
      filter: blur(3px);
    }
    .book-cover-fallback,
    .book-cover {
      width: 98px !important;
      min-width: 98px !important;
      height: 136px !important;
      border-radius: 8px 12px 12px 8px !important;
      position: relative;
      padding: 16px 10px 12px 17px !important;
      color: #513626 !important;
      font-family: 'Baloo 2', 'Nunito', sans-serif;
      font-size: 0.78rem !important;
      font-weight: 800 !important;
      line-height: 1.18 !important;
      background:
        linear-gradient(90deg, rgba(84,50,30,0.23) 0 12px, transparent 12px),
        radial-gradient(circle at 72% 22%, rgba(255,255,255,0.75) 0 13px, transparent 14px),
        linear-gradient(145deg, #fbd4a1 0%, #f9ecb0 42%, #bfe1cd 100%) !important;
      border: 1px solid rgba(86, 55, 32, 0.18);
      box-shadow: 7px 9px 0 rgba(108, 72, 39, 0.10), inset -8px 0 rgba(255,255,255,0.32) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      word-break: normal;
      overflow-wrap: anywhere;
    }
    .book-card:nth-child(2n) .book-cover-fallback { background: linear-gradient(90deg, rgba(84,50,30,0.22) 0 12px, transparent 12px), radial-gradient(circle at 72% 22%, rgba(255,255,255,0.78) 0 13px, transparent 14px), linear-gradient(145deg, #bfdff2 0%, #f7e3a0 52%, #f7b6a8 100%) !important; }
    .book-card:nth-child(3n) .book-cover-fallback { background: linear-gradient(90deg, rgba(84,50,30,0.22) 0 12px, transparent 12px), radial-gradient(circle at 72% 22%, rgba(255,255,255,0.78) 0 13px, transparent 14px), linear-gradient(145deg, #d9c7f0 0%, #ffe1b8 48%, #b7dec2 100%) !important; }
    .book-card:nth-child(4n) .book-cover-fallback { background: linear-gradient(90deg, rgba(84,50,30,0.22) 0 12px, transparent 12px), radial-gradient(circle at 72% 22%, rgba(255,255,255,0.78) 0 13px, transparent 14px), linear-gradient(145deg, #f9c1b2 0%, #ffe5a3 50%, #b9dbe4 100%) !important; }
    .book-tag {
      background: #fff1c8 !important;
      color: #77512e !important;
      border: 1px solid rgba(119,81,46,0.14);
      border-radius: 999px !important;
    }
    .book-link {
      padding: 7px 11px;
      border-radius: 999px;
      background: #eaf6ef;
      border: 1px solid rgba(61, 126, 96, 0.16);
    }

    footer {
      width: min(1160px, calc(100% - 32px));
      margin: 34px auto 24px;
      border-radius: 18px 18px 28px 28px;
      border: 1px solid rgba(105,70,38,0.18);
      background:
        linear-gradient(90deg, rgba(104,62,38,0.16) 0 24px, transparent 24px 100%),
        linear-gradient(135deg, #62402d 0%, #3f2b21 100%) !important;
      box-shadow: var(--book-shadow);
    }
    footer::after {
      content: "The End";
      display: block;
      text-align: center;
      color: rgba(255,255,255,0.55);
      font-family: 'Baloo 2', cursive;
      font-weight: 800;
      font-size: 1.15rem;
      padding: 0 0 22px;
    }

    @media (max-width: 760px) {
      #mainNav {
        top: 8px;
        width: calc(100% - 16px);
        border-radius: 14px;
      }
      #mainNav::before { display: none; }
      .hero {
        width: calc(100% - 18px);
        min-height: auto;
        margin-top: 76px;
        padding: 64px 18px 42px;
        border-radius: 20px 12px 12px 20px;
        background:
          linear-gradient(90deg, rgba(104,62,38,0.14) 0 15px, transparent 15px 100%),
          linear-gradient(135deg, #fff8e5 0%, #e7f3eb 54%, #ffe7d5 100%);
      }
      .hero::before { inset: 14px 12px 14px 26px; }
      section:not(.hero),
      footer {
        width: calc(100% - 18px);
        margin: 18px auto;
        border-radius: 14px;
      }
      section:not(.hero)::before { display: none; }
      .section-title::before,
      .section-title::after { display: none; }
      .book-card {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 14px !important;
        padding: 18px !important;
      }
      .book-cover-fallback,
      .book-cover {
        width: 78px !important;
        min-width: 78px !important;
        height: 112px !important;
        padding: 13px 8px 10px 14px !important;
        font-size: 0.68rem !important;
      }
      .channel-card:nth-child(n),
      .feature-card:nth-child(n),
      .rhythm-card:nth-child(n),
      .book-card:nth-child(n) { transform: none; }
    }

  

    /* Storybook skin v1 refinements */
    .reveal {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }
    .hero h1 em,
    .hero-text h1 em {
      color: #2b9f70 !important;
      background: none !important;
      -webkit-text-fill-color: currentColor !important;
      text-shadow: 0 2px 0 rgba(255,255,255,0.88), 0 5px 0 rgba(243,200,106,0.45) !important;
      white-space: normal;
    }
    .hero h1 em::after,
    .hero-text h1 em::after { display: none !important; }
    .hero-note-row,
    .hero-emoji-row,
    .hero-buttons { flex-wrap: wrap; }
    .hero-note {
      white-space: normal !important;
      line-height: 1.2;
      text-align: center;
    }
    .hero-proof,
    .hero-stats {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
    .proof-item { min-width: 0 !important; }
    .booklist-sec .section-title,
    .booklist-sec .section-sub,
    .book-card { opacity: 1 !important; }
    @media (max-width: 760px) {
      .hero h1,
      .hero-text h1 {
        font-size: clamp(2.05rem, 12vw, 3.12rem) !important;
        line-height: 1.08 !important;
      }
      .hero-note-row { gap: 6px !important; }
      .hero-note { flex: 1 1 120px; font-size: 0.78rem !important; }
      .hero-proof,
      .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .book-desc { font-size: 0.82rem !important; }
    }

  

    /* Online image/layout hardening */
    picture {
      display: inline-block;
      max-width: 100%;
      line-height: 0;
    }
    .hero-float picture,
    .hero-float img {
      display: block;
      width: 100%;
      height: auto;
    }
    .channel-card picture,
    .card-header picture {
      position: absolute;
      right: -6px;
      bottom: -4px;
      width: auto;
      height: 130px;
      max-width: 46%;
      overflow: visible;
      pointer-events: none;
    }
    .card-header picture .card-char-img,
    .channel-card picture .card-char-img,
    .card-char-img {
      position: static !important;
      display: block;
      width: auto !important;
      max-width: 100%;
      height: 100% !important;
      object-fit: contain;
    }
    .hero-visual picture,
    .char-card picture,
    .hero-card picture {
      display: block;
      width: max-content;
      max-width: 100%;
      margin-inline: auto;
    }
    .hero-char-main,
    .hero-mini-friend,
    .hero-card-img,
    .char-img,
    .ep-thumb img,
    .vid-thumb img,
    .video-thumb img,
    .book-cover {
      object-fit: contain;
      max-width: 100%;
    }
    .ep-thumb img,
    .vid-thumb img,
    .video-thumb img { object-fit: cover; }
    .char-card {
      overflow: hidden;
    }
    .char-img-wrap,
    .hero-visual,
    .hero-card {
      overflow: visible;
    }
    .nav-burger {
      min-width: 44px !important;
      min-height: 44px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px !important;
      line-height: 1 !important;
    }
    @media (max-width: 760px) {
      .hero-float {
        display: block !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transform: none !important;
        animation: none !important;
      }
      .channel-card picture,
      .card-header picture {
        height: 100px;
        max-width: 40%;
      }
      .hero-visual picture,
      .char-card picture,
      .hero-card picture {
        width: 100%;
      }
      .hero-char-main {
        width: min(240px, 76vw) !important;
        height: auto !important;
      }
      .hero-mini-friend {
        width: clamp(56px, 16vw, 90px) !important;
        height: auto !important;
      }
      .char-img {
        width: min(112px, 34vw) !important;
        height: min(112px, 34vw) !important;
        object-fit: contain !important;
      }
    }