/* Illustrated storybook direction approved 2026-11-08. Live copy stays in HTML. */
.storybook {
  --chapter-space: clamp(88px, 8.6vw, 132px);
  --content-space: clamp(38px, 4.8vw, 72px);
  --heading-font: Georgia, 'Times New Roman', serif;
  --cream: #fff0d4;
  --brown: #563322;
  background: #291c32;
  font-size: 17px;
  line-height: 1.7;
}
.storybook h1, .storybook h2, .storybook h3 {
  font-family: var(--heading-font);
  letter-spacing: -.025em;
}
.storybook h2 {font-size: clamp(34px, 3.7vw, 56px);line-height: 1.15;font-weight: 700;text-wrap: balance;}
.storybook h3 {font-size: 28px;line-height: 1.22;}
.storybook .shell {width: min(1280px, calc(100% - 112px));}
.storybook .eyebrow {font-size: 14px;line-height: 1.45;margin-bottom: 18px;letter-spacing: 0;}
.storybook p {text-wrap: pretty;}
.storybook .skip {top:12px;transform:translateY(calc(-100% - 25px));opacity:0;pointer-events:none;}
.storybook .skip:focus {transform:none;opacity:1;pointer-events:auto;}
.storybook .button-coral {
  background: linear-gradient(#fc8d60, #ed5a36 45%, #c84026);
  border: 1px solid #ffce91; border-radius: 100px; box-shadow: inset 0 2px 2px #ffe0ac77, 0 0 0 3px #d55f3d33, 0 8px 25px #451a2370;
  font-size: 17px; min-height: 56px; padding: 14px 30px;
}
.storybook .button-coral:hover {background: linear-gradient(#ffac78,#f36e44 50%,#db4929);}
.storybook .story-chapter {padding-block: var(--chapter-space);position: relative;}
.storybook .chapter-heading {max-width: 910px;text-align: center;margin: 0 auto var(--content-space);}
.storybook .chapter-heading h2 {color: #ffe1b0;}
.storybook .chapter-intro {font: 18px/1.8 var(--font);max-width: 760px;color: #e4d4df;margin: 25px auto 0;}
.storybook .story-chapter::before {content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#d6a26350,transparent);}
.storybook .topbar {background:linear-gradient(#21152fc9,#21152f40,transparent);}
.storybook .header-inner {min-height:88px;}
.storybook .topbar nav, .storybook .login-link {font-size:15px;}
.storybook .header-tools {gap:26px;}
.storybook .language-picker select {border-radius:25px;min-height:46px;padding-inline:18px 38px;}
.storybook .language-picker::after {right:17px;top:17px;}
.storybook .hero {height:clamp(820px,58vw,960px);}
.storybook .hero-logo {width:410px;top:26px;}
.storybook .hero-team {width:min(860px,73vw);bottom:20px;}
.storybook .hero-shade {background:linear-gradient(#1f112c15,transparent 55%,#2b1b3026 88%,#2b1b30);}
.storybook .story-section {padding:68px 0 80px;background:radial-gradient(ellipse at 50% 0,#5b36534d,transparent 70%),#2b1b30;border:0;}
.storybook .reel-heading {margin-bottom:38px;align-items:center;}
.storybook .reel-heading .eyebrow {margin-bottom:12px;}
.storybook .reel-heading h2 {font-size:clamp(31px,3vw,44px);}
.storybook .reel-controls {gap:12px;}
.storybook .reel-controls button {width:48px;height:48px;border-color:#d8b18766;background:#4b2e4355;}
.storybook .story-reel {gap:28px;padding:4px max(56px,calc((100vw - 1280px)/2)) 24px;scroll-padding-inline:max(56px,calc((100vw - 1280px)/2));}
.storybook .story-card {flex-basis:326px;background:linear-gradient(145deg,#784e4960,#49304675);border:1px solid #b98e7480;border-radius:16px;overflow:hidden;padding-bottom:24px;}
.storybook .story-art {border:0;border-radius:15px 15px 0 0;aspect-ratio:16/10;box-shadow:none;}
.storybook .story-card h3 {font:700 23px/1.25 var(--heading-font);margin:21px 22px 0;}
.storybook .story-title {min-height:58px;font:inherit;}
.storybook .story-meta {margin:17px 22px 0;font-size:12px;line-height:1.5;color:#e4cbda;}
.storybook .story-badge {font-size:12px;border-radius:20px;padding:4px 12px;}
.storybook .reel-notes {margin-top:28px;font-size:14px;}
.storybook .about-section {background:radial-gradient(ellipse at 15% 48%,#7b493d70,transparent 65%),linear-gradient(#352239,#2b1d31);}
.storybook .about-grid {grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;}
.storybook .reading-preview {transform:none;min-width:0;}
.storybook .book-art-link {display:block;position:relative;isolation:isolate;overflow:hidden;border-radius:10px;outline-offset:6px;}
.storybook .book-art {width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.storybook .preview-caption {padding:25px 0 0;gap:20px;font-size:15px;flex-wrap:wrap;color:#f3d7bb;}
.storybook .preview-caption a {min-height:48px;gap:10px;text-decoration:underline;text-underline-offset:5px;}
.storybook .reading-age {display:inline-flex;gap:10px;align-items:center;}
.storybook .reading-preview figcaption {font-size:15px;line-height:1.75;margin:18px 0 0;text-align:left;color:#d7c6d5;}
.storybook .reading-steps {gap:37px;margin:0;align-content:center;}
.storybook .reading-steps li {gap:24px;align-items:flex-start;}
.storybook .reading-steps li>.step-medallion {position:relative;display:grid;place-items:center;width:78px;height:78px;border:2px solid #f5c66e;border-radius:50%;background:radial-gradient(circle at 35% 25%,#ffe3a6,#e8b363 75%,#ae702d);color:#784723;box-shadow:inset 0 2px 2px #fff4c2,0 5px 12px #170b1f50;}
.storybook .step-medallion>.icon {width:35px;height:35px;stroke-width:1.6;}
.storybook .step-medallion small {position:absolute;left:-5px;top:-7px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #ffdc93;border-radius:50%;background:#f9cf89;font-size:15px;}
.storybook .reading-steps h3 {font-size:26px;margin-bottom:12px;}
.storybook .reading-steps p {font-size:16px;line-height:1.75;color:#decdda;}
.storybook .crew-section {background:radial-gradient(ellipse at 65% 45%,#6b3c4f55,transparent 65%),#2d1c31;}
.storybook .character-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:36px;}
.storybook .character-tab {min-height:82px;gap:15px;justify-content:flex-start;padding:12px 21px;background:linear-gradient(#fff0cf,#edcda6);border:1px solid #e9b47d;border-radius:12px;color:#5d3429;font:700 25px/1.25 var(--heading-font);box-shadow:inset 0 1px 1px #fff8e4,0 4px 15px #140b2030;}
.storybook .character-tab[aria-selected=true] {color:#fff5de;background:linear-gradient(#ff9c62,#e75e3a 65%,#bf452f);border-color:#ffcc8f;box-shadow:inset 0 1px 1px #fff2b9,0 0 0 2px #f4a57755,0 0 18px #f7764740;}
.storybook .character-tab:hover:not([aria-selected=true]) {background:linear-gradient(#fff6dc,#f2d5b5);}
.storybook .tab-portrait {position:relative;display:block;flex:0 0 51px;width:51px;height:51px;border-radius:50%;overflow:hidden;background:#906151;}
.storybook .character-tab>.tab-portrait:first-child {display:block;}
.storybook .tab-portrait img {position:absolute;max-width:none;height:auto;}
.storybook .tab-portrait.max img {width:365.714%;left:-85.714%;top:-235.714%;}
.storybook .tab-portrait.ellie img {width:341.333%;left:-156.667%;top:-206.666%;}
.storybook .tab-portrait.kip img {width:457.143%;left:-17.857%;top:-348.214%;}
.storybook .tab-portrait.toby img {width:401.569%;left:-296.078%;top:-317.397%;}
.storybook .character-tab .character-tab-name {font-size:inherit;color:inherit;overflow-wrap:anywhere;}
.storybook .character-panel, .storybook .character-panel[data-character] {display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:36px;min-height:530px;padding:0;background:none;border:0;border-radius:0;overflow:visible;}
.storybook .character-image {width:100%;align-self:center;justify-self:stretch;}
.storybook .character-panel .portrait {width:100%;aspect-ratio:4/3;border:1px solid #ddb587;border-radius:14px;box-shadow:0 15px 45px #170d2540;background:#65412f;overflow:hidden;}
.storybook .character-panel .portrait img {position:static;width:100%;height:100%;max-width:100%;object-fit:cover;}
.storybook .character-copy {position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding:49px 45px;background:radial-gradient(ellipse at 10% 0,#fff8df,transparent 65%),linear-gradient(110deg,#f9e5bc,#f1d5a4);border:1px solid #d4a96d;border-radius:7px;box-shadow:inset 0 0 30px #a46b2440,7px 8px 0 -3px #bc8c58,-5px 5px 0 -2px #f0cd94;color:#4c2d23;}
.storybook .character-copy::before {content:'';position:absolute;inset:13px;border:1px solid #be8f5b55;pointer-events:none;z-index:-1;}
.storybook .file-corner {position:absolute;top:22px;right:24px;display:grid;place-items:center;width:45px;height:45px;border:2px double #a17646;border-radius:50%;color:#aa7244;transform:rotate(12deg);opacity:.65;}
.storybook .character-name {font:700 clamp(36px,3.7vw,54px)/1.1 var(--heading-font);margin:0 0 18px;color:#823d23;}
.storybook .character-quote {font:italic 21px/1.5 var(--heading-font);color:#754a30;margin:0 0 24px;max-width:95%;}
.storybook .character-bio {font-size:17px;line-height:1.8;color:#614632;}
.storybook .character-traits {display:grid;grid-template-columns:1fr;gap:23px;margin-top:30px;padding-top:27px;border-top:1px solid #a16f3d66;}
.storybook .character-traits dt {display:flex;gap:10px;align-items:center;font:700 21px/1.3 var(--heading-font);color:#6c381f;margin:0 0 8px;}
.storybook .character-traits dt .icon {color:#b36c32;width:22px;height:22px;}
.storybook .character-traits dd {font-size:16px;line-height:1.7;color:#72543b;padding-left:32px;}
.storybook .learning-section {background:radial-gradient(ellipse at 15% 55%,#72412b66,transparent 60%),#302034;border:0;}
.storybook .learning-grid {grid-template-columns:1.1fr .9fr;gap:52px;align-items:start;}
.storybook .learning-body {max-width:760px;margin:25px auto 0;font-size:18px;line-height:1.8;color:#e4d4df;}
.storybook .discovery-scene {min-width:0;}
.storybook .discovery-art {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;}
.storybook .learning-topics {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:25px;}
.storybook .learning-topics>span {display:flex;align-items:center;gap:12px;background:linear-gradient(#fff0d1,#edcfa5);border:1px solid #e8b577;color:#6c4028;padding:13px 15px;border-radius:9px;font-size:15px;line-height:1.5;}
.storybook .learning-topics span span {border:0;background:none;padding:0;font:inherit;color:inherit;}
.storybook .learning-topics .icon {width:25px;height:25px;color:#ac6a33;}
.storybook .puzzle-card {position:relative;background:linear-gradient(115deg,#70452e60,transparent),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 35px),#412537;color:#fff0d2;border:1px solid #e2b477;border-radius:15px;padding:32px 32px 28px;box-shadow:inset 0 0 0 5px #7e543b50,0 18px 50px #160e2440;overflow:hidden;min-height:555px;}
.storybook .puzzle-topline {display:flex;gap:24px;align-items:center;justify-content:space-between;margin-bottom:25px;}
.storybook .puzzle-topline .eyebrow {color:#f1d4b1;font-size:13px;display:flex;align-items:center;gap:10px;margin:0;}
.storybook .puzzle-friend {width:88px;height:78px;flex:none;object-fit:cover;object-position:28% 30%;border:2px solid #dbaa70;border-radius:50%;box-shadow:0 4px 14px #160e2440;}
.storybook .puzzle-card h3 {font:700 29px/1.2 var(--heading-font);color:#ffdda4;letter-spacing:0;}
.storybook .puzzle-intro {font-size:16px;line-height:1.75;color:#f0d8cc;margin:17px 0 28px;}
.storybook .puzzle-body {display:flex;flex-direction:column;gap:28px;}
.storybook .socket {position:relative;width:164px;height:126px;border:3px solid #b57530;background:radial-gradient(circle at 30% 5%,#ffd787,#c38a39 75%);border-radius:7px;box-shadow:inset 0 0 0 2px #f2c66e,inset 0 0 18px #6a411066,0 5px 14px #190d1b80;}
.storybook .socket>span {width:80px;height:71px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#38202d;border:0;box-shadow:none;}
.storybook .socket i {position:absolute;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,#ffe79e,#86541e);border:1px solid #89571e;}
.storybook .socket i:nth-of-type(1) {top:10px;left:10px}.storybook .socket i:nth-of-type(2) {top:10px;right:10px}.storybook .socket i:nth-of-type(3) {bottom:10px;left:10px}.storybook .socket i:nth-of-type(4) {bottom:10px;right:10px}
.storybook .samples {gap:22px;justify-content:center;flex-wrap:wrap;}
.storybook .samples button {width:70px;height:70px;min-width:70px;min-height:70px;display:grid;place-items:center;border-radius:50%;padding:15px;border:2px solid #dda14a;background:radial-gradient(circle at 35% 20%,#ffe1a0,#dfaa57 80%);box-shadow:inset 0 0 0 3px #ffe3a677,0 4px 0 #9f663b;outline-offset:4px;}
.storybook .samples button:hover {background:#ffe2ad;}
.storybook .samples button[aria-pressed=true] {outline:3px solid #ffbb68;}
.storybook .shape {width:31px;height:31px;background:#6c3c26;box-shadow:0 1px 2px #fff5c077;}
.storybook .solved .socket>span {background:#467158;}
.storybook .solved [data-shape=triangle] {background:#ffd8a0;border-color:#fff3c1;outline:3px solid #ff8c4c;box-shadow:0 0 24px #ff8c4c77;}
.storybook .solved [data-shape=square] {background:radial-gradient(circle at 35% 20%,#ffe1a0,#dfaa57 80%);border-color:#dda14a;outline:0;}
.storybook .puzzle-feedback {margin-top:29px;padding-top:21px;min-height:4.5em;font-size:15px;line-height:1.7;color:#e6c9ba;border-color:#bd8a6170;}
.storybook .solved .puzzle-feedback {color:#c5e4b4;}
.storybook .parents-section {background:radial-gradient(ellipse at 10% 30%,#ffdeb8,transparent 60%),linear-gradient(105deg,#f4d9ba,#ffe9ca 65%,#ebc5a5);color:#58382c;}
.storybook .parents-section .chapter-heading h2 {color:#733d27;}
.storybook .parents-section .eyebrow {color:#9c6039;}
.storybook .parents-section .chapter-intro {color:#775441;}
.storybook .parents-grid {display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center;}
.storybook .family-scene {min-width:0;}
.storybook .family-scene img {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 16px 45px #855b3930;}
.storybook .parent-benefits {display:grid;grid-template-columns:1fr;gap:35px;margin:0;}
.storybook .parent-benefits article {display:grid;grid-template-columns:94px 1fr;gap:22px;align-items:center;border:0;padding:0;}
.storybook .parent-benefits h3 {font:700 27px/1.2 var(--heading-font);margin:0 0 12px;color:#663c29;}
.storybook .parent-benefits p {font-size:16px;line-height:1.8;color:#78543e;}
.storybook .benefit-art {position:relative;width:94px;height:106px;overflow:hidden;}
.storybook .benefit-art img {position:absolute;width:300%;max-width:none;height:auto;top:50%;transform:translateY(-50%);}
.storybook .benefit-art.books img {left:0}.storybook .benefit-art.hourglass img {left:-100%}.storybook .benefit-art.lantern img {left:-200%}
.storybook .faq-section {display:block;background:radial-gradient(ellipse at 10% 65%,#7a492f55,transparent 70%),#2c1c2f;}
.storybook .faq-section h2 {max-width:none;font-size:clamp(34px,3.7vw,56px);}
.storybook .faq-grid {display:grid;grid-template-columns:.76fr 1.24fr;gap:48px;align-items:center;}
.storybook .faq-scene {min-width:0;}
.storybook .faq-scene img {width:100%;height:auto;max-height:510px;object-fit:cover;object-position:center;border-radius:12px;}
.storybook .faq-cabinet {padding:22px;background:repeating-linear-gradient(0deg,#452c2050 0 2px,transparent 2px 17px),linear-gradient(100deg,#66452e,#372324);border:2px solid #987047;border-radius:8px;box-shadow:inset 0 0 0 5px #3c271e50,0 14px 40px #180d2040;}
.storybook .faq-list {display:grid;gap:14px;}
.storybook .faq-list details, .storybook .faq-list details:first-child {padding:0;border:1px solid #e4b477;border-radius:5px;background:linear-gradient(120deg,#fff0d0,#f0d3a8);box-shadow:inset 0 0 16px #bc8b3a33;color:#5d3528;overflow:hidden;}
.storybook .faq-list summary {position:relative;font:700 23px/1.35 var(--heading-font);padding:20px 24px;min-height:74px;gap:25px;align-items:center;}
.storybook .faq-list summary::after {content:'';width:11px;height:11px;border-right:2px solid #8b5b32;border-bottom:2px solid #8b5b32;transform:rotate(45deg);margin-top:-6px;}
.storybook .faq-list details[open] summary::after {transform:rotate(225deg);margin-top:6px;}
.storybook .faq-list details>p {font:16px/1.85 var(--font);padding:0 25px 24px;color:#79513c;max-width:none;}
.storybook .closing-section {position:relative;isolation:isolate;min-height:700px;padding:0;text-align:left;border:0;background:#2e2135;}
.storybook .closing-art {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;}
.storybook .closing-section::before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#2c1b35ee 0%,#2e1c34df 25%,#2e1c3480 44%,#2e1c3410 65%);}
.storybook .closing-copy {width:40%;max-width:475px;padding-block:110px 120px;}
.storybook .closing-section h2 {margin:0;color:#ffe2b8;font-size:clamp(36px,4vw,60px);}
.storybook .closing-section p {font-size:18px;line-height:1.8;color:#ead2d9;margin-top:27px;}
.storybook .closing-section .button {margin-top:34px;}
.storybook .closing-spark {margin:0 0 27px;width:30px;height:30px;}
.storybook .site-footer {padding-block:54px;background:linear-gradient(#39243a,#24182c);border-top:1px solid #bb976433;}
.storybook .footer-inner {gap:36px;}
.storybook .footer-logo {width:180px;}
.storybook .footer-inner p {font:italic 20px/1.4 var(--heading-font);font-weight:400;}
.storybook .footer-inner small {font-size:13px;}
.storybook .footer-inner nav {font-size:14px;gap:24px;}
.storybook .account {padding-block:65px 110px;}
.storybook .account-box {margin-top:32px;padding:35px;}
.storybook .account-box h2 {font-size:30px;}
.storybook .account-mode .header-inner {min-height:90px;}
@media(min-width:1650px) {
  .storybook .hero {height:960px;}
  .storybook .hero-team {width:930px;}
  .storybook .hero-logo {width:430px;top:28px;}
}
@media(max-width:1100px) {
  .storybook {--chapter-space:88px;--content-space:46px;}
  .storybook .shell {width:calc(100% - 64px);}
  .storybook .hero {height:710px;}
  .storybook .hero-logo {width:320px;top:32px;}
  .storybook .hero-team {width:700px;bottom:18px;}
  .storybook .topbar nav, .storybook .login-link {font-size:14px;}
  .storybook .header-inner {min-height:78px;}
  .storybook .about-grid {gap:36px;}
  .storybook .reading-steps li {gap:17px;}
  .storybook .reading-steps li>.step-medallion {width:61px;height:61px;}
  .storybook .step-medallion>.icon {width:28px;height:28px;}
  .storybook .reading-steps h3 {font-size:23px;}
  .storybook .reading-steps p {font-size:15px;}
  .storybook .character-tabs {gap:14px;}
  .storybook .character-tab {padding:12px 16px;font-size:23px;gap:12px;}
  .storybook .character-copy {padding:38px 31px;}
  .storybook .character-bio {font-size:16px;}
  .storybook .character-panel {gap:28px;}
  .storybook .learning-grid {gap:32px;}
  .storybook .puzzle-card {padding:26px 25px;}
  .storybook .parents-grid {gap:38px;}
  .storybook .parent-benefits article {grid-template-columns:76px 1fr;gap:17px;}
  .storybook .benefit-art {width:76px;height:92px;}
  .storybook .parent-benefits h3 {font-size:23px;}
  .storybook .faq-grid {gap:30px;grid-template-columns:.7fr 1.3fr;}
  .storybook .faq-cabinet {padding:17px;}
  .storybook .faq-list summary {font-size:21px;padding:19px 20px;}
  .storybook .closing-copy {width:43%;padding-block:95px;}
  .storybook .closing-section {min-height:650px;}
  .storybook .story-reel {padding-inline:32px;scroll-padding-inline:32px;}
  .storybook .footer-inner {flex-wrap:wrap;}
  .storybook .footer-inner nav {margin-left:auto;}
}
@media(max-width:800px) {
  .storybook {--chapter-space:78px;--content-space:40px;}
  .storybook .chapter-intro {font-size:17px;}
  .storybook .about-grid, .storybook .learning-grid, .storybook .parents-grid {grid-template-columns:1fr;gap:42px;}
  .storybook .reading-steps {gap:30px;}
  .storybook .reading-steps li>.step-medallion {width:70px;height:70px;}
  .storybook .reading-preview {width:100%;max-width:660px;margin:auto;}
  .storybook .book-art {aspect-ratio:4/3;}
  .storybook .character-tabs {gap:10px;}
  .storybook .character-tab {justify-content:center;gap:10px;padding:13px 10px;font-size:21px;}
  .storybook .tab-portrait {width:40px;height:40px;flex-basis:40px;}
  .storybook .character-panel, .storybook .character-panel[data-character] {grid-template-columns:1fr;gap:26px;}
  .storybook .character-panel .portrait {aspect-ratio:4/3;max-height:520px;}
  .storybook .character-copy {padding:41px 37px;}
  .storybook .character-quote {font-size:22px;}
  .storybook .character-traits {grid-template-columns:1fr 1fr;gap:25px;}
  .storybook .character-traits dd {padding-left:0;}
  .storybook .discovery-scene {max-width:660px;width:100%;margin:auto;}
  .storybook .puzzle-card {max-width:660px;width:100%;margin:auto;min-height:0;padding:32px;}
  .storybook .puzzle-topline {margin-bottom:23px;}
  .storybook .puzzle-feedback {min-height:3.5em;}
  .storybook .family-scene {max-width:660px;width:100%;margin:auto;}
  .storybook .parent-benefits {gap:30px;}
  .storybook .parent-benefits article {grid-template-columns:94px 1fr;gap:24px;max-width:660px;}
  .storybook .benefit-art {width:94px;height:106px;}
  .storybook .parent-benefits h3 {font-size:27px;}
  .storybook .faq-grid {grid-template-columns:1fr;gap:35px;}
  .storybook .faq-scene {width:min(370px,70%);margin:auto;}
  .storybook .faq-scene img {max-height:370px;object-position:center 55%;}
  .storybook .faq-cabinet {padding:21px;}
  .storybook .closing-section {min-height:0;display:block;}
  .storybook .closing-art {position:relative;height:clamp(290px,65vw,520px);object-position:65% center;z-index:0;}
  .storybook .closing-section::before {display:none;}
  .storybook .closing-copy {width:100%;max-width:620px;padding:52px 0 68px;}
  .storybook .closing-section h2 {max-width:520px;font-size:43px;}
  .storybook .closing-section p {font-size:17px;margin-top:22px;max-width:500px;}
  .storybook .closing-spark {display:none;}
}
@media(max-width:580px) {
  .storybook {--chapter-space:68px;--content-space:34px;font-size:16px;}
  .storybook .shell {width:calc(100% - 40px);}
  .storybook h2, .storybook .faq-section h2 {font-size:33px;line-height:1.19;}
  .storybook .eyebrow {font-size:13px;margin-bottom:14px;}
  .storybook .chapter-intro, .storybook .learning-body {font-size:16px;line-height:1.8;margin-top:22px;}
  .storybook .chapter-heading {text-align:left;}
  .storybook .topbar .shell {width:calc(100% - 28px);}
  .storybook .header-inner {min-height:70px;gap:8px;}
  .storybook .topbar nav {font-size:12px;gap:15px;}
  .storybook .header-tools {gap:13px;}
  .storybook .login-link {font-size:12px;gap:6px;}
  .storybook .login-link .icon {width:17px;}
  .storybook .language-picker select {min-width:105px;font-size:12px;min-height:44px;padding:9px 28px 9px 13px;}
  .storybook .language-picker::after {right:13px;top:16px;width:6px;height:6px;}
  .storybook .hero {height:570px;}
  .storybook .hero-logo {width:275px;top:69px;}
  .storybook .hero-team {width:calc(100% - 12px);bottom:17px;}
  .storybook .hero-sky {width:140%;left:-20%;}
  .storybook .story-section {padding:46px 0 56px;}
  .storybook .reel-heading {align-items:center;gap:16px;margin-bottom:28px;}
  .storybook .reel-heading h2 {font-size:28px;}
  .storybook .reel-controls {gap:8px;}
  .storybook .reel-controls button {min-width:42px;width:42px;height:44px;}
  .storybook .story-reel {padding-inline:20px;scroll-padding-inline:20px;gap:20px;}
  .storybook .story-card {flex-basis:calc(100vw - 90px);max-width:340px;padding-bottom:21px;}
  .storybook .story-card h3 {font-size:23px;margin:19px 20px 0;}
  .storybook .story-meta {margin-inline:20px;font-size:12px;}
  .storybook .reel-notes {display:grid;gap:13px;margin-top:23px;font-size:13px;}
  .storybook .about-grid {gap:34px;}
  .storybook .preview-caption {font-size:14px;padding-top:20px;}
  .storybook .reading-preview figcaption {font-size:14px;margin-top:14px;}
  .storybook .reading-steps {gap:29px;}
  .storybook .reading-steps li {gap:19px;}
  .storybook .reading-steps li>.step-medallion {width:58px;height:58px;}
  .storybook .step-medallion>.icon {width:28px;height:28px;}
  .storybook .step-medallion small {width:23px;height:23px;font-size:13px;}
  .storybook .reading-steps h3 {font-size:24px;margin-bottom:10px;}
  .storybook .reading-steps p {font-size:16px;line-height:1.75;}
  .storybook .character-tabs {grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:29px;}
  .storybook .character-tab {justify-content:flex-start;min-height:70px;gap:12px;padding:12px 15px;font-size:23px;}
  .storybook .tab-portrait {width:39px;height:39px;flex-basis:39px;}
  .storybook .character-panel .portrait {aspect-ratio:4/3;border-radius:10px;}
  .storybook .character-panel, .storybook .character-panel[data-character] {gap:26px;}
  .storybook .character-copy {padding:36px 27px;}
  .storybook .character-name {font-size:42px;margin-bottom:17px;}
  .storybook .character-quote {font-size:21px;margin-bottom:23px;}
  .storybook .character-bio {font-size:16px;line-height:1.85;}
  .storybook .character-traits {grid-template-columns:1fr;gap:24px;margin-top:27px;padding-top:25px;}
  .storybook .character-traits dt {font-size:22px;}
  .storybook .character-traits dd {font-size:16px;}
  .storybook .file-corner {top:20px;right:20px;width:35px;height:35px;}
  .storybook .learning-grid {gap:34px;}
  .storybook .learning-topics {gap:12px;margin-top:22px;}
  .storybook .learning-topics>span {display:flex;align-items:flex-start;flex-direction:column;gap:8px;padding:13px 14px;font-size:14px;}
  .storybook .learning-topics span span {display:block;}
  .storybook .puzzle-card {padding:25px 23px 22px;}
  .storybook .puzzle-topline {gap:17px;margin-bottom:22px;}
  .storybook .puzzle-topline .eyebrow {font-size:12px;}
  .storybook .puzzle-friend {width:70px;height:65px;}
  .storybook .puzzle-card h3 {font-size:29px;}
  .storybook .puzzle-intro {font-size:16px;margin:17px 0 25px;}
  .storybook .puzzle-body {gap:26px;}
  .storybook .socket {width:148px;height:114px;}
  .storybook .socket>span {width:74px;height:66px;}
  .storybook .samples {gap:20px;}
  .storybook .samples button {width:64px;height:64px;min-width:64px;min-height:64px;}
  .storybook .puzzle-feedback {font-size:15px;min-height:5em;margin-top:26px;padding-top:20px;}
  .storybook .parents-grid {gap:34px;}
  .storybook .parent-benefits {gap:31px;}
  .storybook .parent-benefits article {grid-template-columns:76px 1fr;gap:20px;}
  .storybook .benefit-art {width:76px;height:94px;}
  .storybook .parent-benefits h3 {font-size:25px;margin-bottom:11px;}
  .storybook .parent-benefits p {font-size:16px;line-height:1.8;}
  .storybook .faq-grid {gap:29px;}
  .storybook .faq-scene {width:78%;}
  .storybook .faq-scene img {max-height:320px;}
  .storybook .faq-cabinet {padding:13px;border-radius:6px;}
  .storybook .faq-list {gap:13px;}
  .storybook .faq-list summary {font-size:21px;line-height:1.35;min-height:73px;padding:18px 17px;gap:15px;}
  .storybook .faq-list details>p {font-size:16px;line-height:1.8;padding:0 18px 22px;}
  .storybook .closing-section {min-height:0;}
  .storybook .closing-art {object-position:65% center;}
  .storybook .closing-copy {padding:43px 0 62px;}
  .storybook .closing-section h2 {font-size:38px;}
  .storybook .closing-section p {font-size:16px;margin-top:24px;}
  .storybook .closing-section .button {font-size:16px;margin-top:28px;min-height:54px;}
  .storybook .site-footer {padding-block:42px;}
  .storybook .footer-inner {gap:25px;}
  .storybook .footer-logo {width:160px;}
  .storybook .footer-inner>div {min-width:100%;flex:1;}
  .storybook .footer-inner p {font-size:21px;margin-bottom:13px;}
  .storybook .footer-inner small {font-size:13px;line-height:1.75;}
  .storybook .footer-inner nav {margin:0;gap:22px;justify-content:flex-start;flex-wrap:wrap;font-size:14px;}
  .storybook .account {padding-block:40px 80px;}
  .storybook .account-box {padding:28px 23px;margin-top:28px;}
  .storybook .account-box h2 {font-size:27px;}
}
@media(max-width:370px) {
  .storybook .hero {height:540px;}
  .storybook .hero-logo {width:250px;}
  .storybook .character-tab {font-size:21px;padding-inline:12px;gap:10px;}
  .storybook .samples {gap:15px;}
  .storybook .samples button {min-width:61px;width:61px;}
  .storybook .puzzle-card {padding-inline:21px;}
}
@media(min-width:581px) and (max-width:1050px) and (max-height:550px) {
  .storybook .hero {height:650px;}
  .storybook .hero-logo {width:280px;top:43px;}
  .storybook .hero-team {width:590px;bottom:25px;}
}
@media(prefers-reduced-motion:reduce) {
  .storybook .story-art img {transition:none;}
}

