:root{
--navy:#061844;--navy2:#0a2c68;--blue:#087cff;--cyan:#22d8ff;--purple:#7c4dff;
--pink:#ff4a9b;--orange:#ff7618;--yellow:#ffd640;--green:#22b866;--ink:#13244b;
--muted:#526486;--line:#cfe1ff;--paper:#fff;--soft:#f3f8ff;--radius:22px;
--shadow:0 18px 46px rgba(24,70,138,.16)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Nunito,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{color:inherit}.skip{position:fixed;top:-90px;left:10px;background:#08183a;color:#fff;padding:10px 14px;border-radius:10px;z-index:1000}.skip:focus{top:10px}
.shell{width:min(1240px,calc(100% - 32px));margin:auto}
.ecosystem-top{background:linear-gradient(90deg,#05143b,#08306b);color:#d9efff;font-size:.75rem}
.ecosystem-top .shell{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}.ecosystem-top a{color:#5ce7ff;text-decoration:none;font-weight:900}
.site-header{position:sticky;top:0;z-index:120;background:rgba(5,20,59,.97);backdrop-filter:blur(14px);border-bottom:1px solid #2a66af}
.nav-row{min-height:78px;display:flex;align-items:center;gap:17px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;white-space:nowrap}.brand-mark{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;font-weight:1000;background:conic-gradient(#ff476e,#ff8a1e,#ffd640,#24c86c,#22d8ff,#2479ff,#8b55ff,#ff4aa1,#ff476e);box-shadow:0 0 28px rgba(34,216,255,.3)}
.brand strong{display:block;font-size:1.18rem}.brand small{display:block;color:#8edcf5;font-size:.61rem;letter-spacing:.12em;margin-top:2px}
nav{display:flex;align-items:center;gap:16px;margin-left:auto}nav a{color:#eaf5ff;text-decoration:none;font-weight:850;font-size:.82rem}nav a:hover{color:#55e5ff}
.lang-switch{display:flex;border:1px solid #2e6fab;border-radius:999px;overflow:hidden;background:#0a2755}.lang-switch button{border:0;background:transparent;color:#d9efff;font-weight:900;padding:9px 12px;cursor:pointer}.lang-switch button.active{background:linear-gradient(135deg,#1687ff,#6e4bff);color:#fff}
.menu-btn{display:none;border:1px solid #3678b4;background:#0b2857;color:#fff;border-radius:11px;padding:10px 12px;font-weight:900}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:0;border-radius:12px;padding:12px 17px;font-weight:1000;cursor:pointer;box-shadow:none}.orange{background:linear-gradient(135deg,#ff8a17,#ff5d20);color:#fff}.cyan{background:linear-gradient(135deg,#1fd6ff,#137dff);color:#fff}.purple{background:linear-gradient(135deg,#8b5cf6,#e64ca4);color:#fff}.green{background:linear-gradient(135deg,#2aca73,#129f52);color:#fff}.yellow{background:linear-gradient(135deg,#ffe45e,#ffad20);color:#453000}.glass{background:#ffffff14;color:#fff;border:1px solid #ffffff55}

/* Full visual hero */
.hero{position:relative;min-height:610px;overflow:hidden;background:linear-gradient(120deg,#f3fbff,#ccecff 48%,#d8f7ff);border-bottom:1px solid #9edcff}
.hero-art{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(5,18,54,.88) 0%,rgba(5,18,54,.56) 29%,rgba(5,18,54,.06) 58%,rgba(5,18,54,0) 100%),
url('/assets/hero/abc-home-hero.webp') center/cover no-repeat}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,18,54,.25),transparent 42%)}
.hero-content{position:relative;z-index:2;min-height:610px;display:flex;align-items:center}.hero-copy{max-width:510px;color:#fff}.eyebrow{font-size:.7rem;letter-spacing:.18em;font-weight:1000;color:#20cff7;margin:0 0 10px}.hero h1{font-size:clamp(3.5rem,6vw,6.5rem);line-height:.86;letter-spacing:-.055em;margin:0;text-transform:uppercase;text-shadow:0 4px 20px rgba(3,20,60,.35)}.hero h1 span{color:#fff}.tagline{font-size:clamp(1rem,1.6vw,1.35rem);font-weight:900;margin:18px 0 22px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Quick tools */
.quick-strip{background:linear-gradient(90deg,#071c4e,#0d3370);padding:16px 0;border-bottom:1px solid #316aa7}.quick-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.quick-grid a{min-height:91px;border:1px solid #2f70b2;border-radius:16px;background:linear-gradient(180deg,#0a2b63,#081f4e);color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.18s}.quick-grid a:hover{transform:translateY(-3px);border-color:#5fe8ff;box-shadow:0 10px 28px rgba(24,118,255,.2)}.quick-grid span{font-size:1.65rem}.quick-grid b{font-size:.9rem}.quick-grid small{color:#97cce7;font-size:.69rem}

/* shared section */
.section{padding:78px 0}.section-head{max-width:850px;margin-bottom:30px}.section-head h2,.feature-section h2,.two-col h2,.about-section h2{font-size:clamp(2.35rem,4vw,4.45rem);line-height:.96;letter-spacing:-.045em;margin:7px 0 10px;color:#08245a}.section-head p.short,.short{color:var(--muted)}
.world{background:linear-gradient(180deg,#eaf8ff,#fef8ff 55%,#fff)}.world-signs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}.world-tab{border:0;border-radius:999px;padding:12px 18px;color:#fff;font-weight:1000;cursor:pointer;box-shadow:var(--shadow)}.world-tab:nth-child(1){background:#1b9b55}.world-tab:nth-child(2){background:#1976ea}.world-tab:nth-child(3){background:#ff6a1b}.world-tab:nth-child(4){background:#7e4ce9}.world-tab:nth-child(5){background:#e83d86}.world-tab.active{outline:4px solid #fff;box-shadow:0 0 0 6px #31cfff,0 15px 36px rgba(30,110,180,.2)}
.world-panel{min-height:245px;border-radius:26px;background:linear-gradient(135deg,#092559,#0a3f82 50%,#6c42d5);padding:30px;color:#fff;box-shadow:0 22px 55px rgba(18,67,139,.24);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.world-panel h3{font-size:clamp(2rem,4vw,3.7rem);margin:0 0 7px}.world-panel p{max-width:670px;color:#d7efff}.world-links{display:flex;gap:10px;flex-wrap:wrap}

.az-section{background:linear-gradient(180deg,#fff,#eff8ff)}.az-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:8px}.az-grid button{border:1px solid #c6dcff;background:#fff;border-radius:12px;padding:12px 5px;font-weight:1000;color:#123e83;cursor:pointer;box-shadow:0 6px 18px rgba(30,80,150,.06)}.az-grid button.active{background:linear-gradient(135deg,#1ad7ff,#1375ff);color:#fff;border-color:#1576e8;transform:translateY(-2px)}.word-console{margin-top:18px;border-radius:22px;padding:20px;background:#08275f;color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}.letter-chip{width:68px;height:68px;border-radius:18px;background:linear-gradient(135deg,#ff4b68,#ff9124);display:grid;place-items:center;font-size:2rem;font-weight:1000}.word-console h3{margin:0 0 4px;font-size:1.5rem}.word-console p{margin:0;color:#c6def2}.console-actions{display:flex;gap:8px;flex-wrap:wrap}

.feature-section{background:linear-gradient(135deg,#f4f0ff,#edf8ff)}.feature-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center}.book-viewer{background:linear-gradient(135deg,#2785ff,#8057eb,#ef4b9c);padding:20px;border-radius:24px;box-shadow:var(--shadow)}.book-frame{min-height:455px;background:#fff;border-radius:16px;display:grid;place-items:center;overflow:hidden}.book-frame img{display:none;max-width:100%;max-height:440px;object-fit:contain}.book-frame img.active{display:block}.viewer-controls{display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:900;margin-top:12px}.viewer-controls button{border:1px solid #ffffff88;background:#071c4d;color:#fff;border-radius:999px;width:42px;height:42px}

.play-section{background:linear-gradient(180deg,#eefaff,#fff)}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.game-card{border-radius:22px;padding:24px;color:#fff;box-shadow:var(--shadow);min-height:220px}.game-card>span{font-size:2rem}.game-card h3{font-size:1.5rem;margin:10px 0 6px}.blue-card{background:linear-gradient(135deg,#0b7cff,#25cffa)}.purple-card{background:linear-gradient(135deg,#7150e9,#d34fbb)}.green-card{background:linear-gradient(135deg,#13a85a,#5fd476)}.quiz-options{display:flex;gap:8px;flex-wrap:wrap}.quiz-options button{border:0;border-radius:10px;padding:9px 12px;font-weight:1000;cursor:pointer}.feedback{min-height:24px;font-weight:900;margin-top:8px}

.stem-section{background:linear-gradient(180deg,#f2fff4,#e9fbff)}.stem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stem-grid article{background:#fff;border:1px solid #bce6cc;border-radius:20px;padding:21px;box-shadow:0 12px 30px rgba(38,120,75,.08)}.stem-grid article:nth-child(even){border-color:#b7ddf6}.stem-grid span{font-size:1.8rem}.stem-grid h3{color:#114f36}

.spelling-section{background:linear-gradient(135deg,#fff5cf,#f6edff)}.two-col{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:center}.spell-card{background:#fff;border:1px solid #edd37b;border-radius:23px;padding:24px;box-shadow:var(--shadow)}.spell-top{display:flex;justify-content:space-between;margin-bottom:14px}.spell-card input{width:100%;padding:14px;border-radius:12px;border:2px solid #d9dfe9;margin:12px 0;font-size:1rem}.spell-actions{display:flex;gap:9px}

.color-section{background:linear-gradient(180deg,#fbf5ff,#f0fbff)}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.color-card{display:block;text-decoration:none;background:#fff;border:1px solid #d9d7f0;border-radius:17px;padding:12px;box-shadow:0 8px 24px rgba(60,70,130,.07);transition:.18s}.color-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.color-preview{aspect-ratio:4/3;border:2px solid #1f2c44;border-radius:12px;background:#fff;display:grid;place-items:center;position:relative}.color-letter{font-size:3.1rem;font-weight:1000;color:#fff;-webkit-text-stroke:2px #1a2333}.color-icon{position:absolute;bottom:9px;font-size:1.8rem;filter:grayscale(1)}.color-card b{display:block;margin-top:8px}.color-card small{color:#65708b}.center{text-align:center;margin-top:22px}

.watch-section{background:linear-gradient(180deg,#eaf7ff,#fff)}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.media-grid article{background:#fff;border:1px solid #c8e4ff;border-radius:20px;padding:23px;box-shadow:0 12px 30px rgba(30,95,170,.08)}.media-grid span{font-size:2rem}.media-grid a{font-weight:900;color:#096bc7}

.about-section{background:linear-gradient(135deg,#f1f8ff,#fff0f7)}.about-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:center}.author-photo{background:#fff;border:1px solid #d7e4f5;border-radius:24px;padding:16px;box-shadow:var(--shadow)}.author-photo img{width:100%;height:390px;object-fit:cover;border-radius:17px}

.shop-section{background:linear-gradient(135deg,#fff8de,#eff8ff)}.purchase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.purchase-grid a{min-height:155px;background:#fff;border:1px solid #d8e2f0;border-radius:20px;padding:18px;text-decoration:none;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;box-shadow:0 12px 30px rgba(40,70,120,.08);transition:.18s}.purchase-grid a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.purchase-grid span{font-size:2rem}.purchase-grid b{margin:8px 0 3px}.purchase-grid small{color:#62708d}

.ecosystem-nav{background:linear-gradient(90deg,#061844,#0a2d68);padding:26px 0}.ecosystem-nav .shell{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:12px}.ecosystem-nav a{text-decoration:none;color:#fff;border:1px solid #3778b5;border-radius:16px;padding:15px 17px;background:#0a2a60}.ecosystem-nav a.current{background:linear-gradient(135deg,#1585ff,#6f4eff);border-color:#55e5ff;text-align:center}.ecosystem-nav a:last-child{text-align:right}.ecosystem-nav small{display:block;color:#a7d5ef}.ecosystem-nav b{display:block;margin-top:3px}
footer{background:#031230;color:#d9eaff;padding:24px 0}.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.footer-row strong,.footer-row small{display:block}.footer-row small{color:#8fb6d1}.footer-row a{color:#cfeaff;margin-left:14px;text-decoration:none}

@media(max-width:1080px){
nav{display:none;position:absolute;left:16px;right:16px;top:78px;flex-direction:column;align-items:stretch;background:#061844;border:1px solid #3176b7;border-radius:16px;padding:16px}nav.open{display:flex}.menu-btn{display:block;margin-left:auto}.desktop-buy{display:none}.quick-grid{grid-template-columns:repeat(4,1fr)}.az-grid{grid-template-columns:repeat(9,1fr)}.purchase-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.shell{width:min(100% - 22px,1240px)}.ecosystem-top .shell{display:block;text-align:center;padding:6px 0}.ecosystem-top a{display:block}.brand strong{font-size:1rem}.brand small{display:none}.brand-mark{width:46px;height:46px}.hero{min-height:500px}.hero-art{background-position:58% center}.hero-content{min-height:500px}.hero-copy{max-width:72%}.hero h1{font-size:clamp(2.65rem,13vw,4.4rem)}.quick-grid{grid-template-columns:repeat(4,1fr)}.world-panel,.word-console,.feature-grid,.two-col,.about-grid{grid-template-columns:1fr}.az-grid{grid-template-columns:repeat(5,1fr)}.game-grid,.stem-grid,.media-grid{grid-template-columns:1fr}.color-grid{grid-template-columns:repeat(2,1fr)}.purchase-grid{grid-template-columns:1fr 1fr}.ecosystem-nav .shell{grid-template-columns:1fr}.ecosystem-nav a,.ecosystem-nav a:last-child{text-align:center}.book-frame{min-height:330px}.author-photo img{height:360px}
}
@media(max-width:440px){
.hero-copy{max-width:88%}.quick-grid{grid-template-columns:repeat(2,1fr)}.az-grid{grid-template-columns:repeat(4,1fr)}.color-grid,.purchase-grid{grid-template-columns:1fr}.lang-switch{display:none}
}


/* === APPROVED TEMPLATE RECONSTRUCTION — SINGLE VISUAL HERO === */
.hero-template{
  position:relative;
  width:100%;
  overflow:hidden;
  background:#061844;
  border-bottom:3px solid #18d9ff;
  box-shadow:0 18px 55px rgba(8,46,112,.22);
}
.hero-template-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#061844;
}
.hero-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hot{
  position:absolute;
  z-index:3;
  display:block;
  border:0;
  background:transparent;
  border-radius:14px;
  cursor:pointer;
  pointer-events:auto;
  color:transparent;
  text-decoration:none;
}
.hot span{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hot:focus-visible{
  outline:4px solid #fff;
  box-shadow:0 0 0 7px #19d9ff,0 0 32px #19d9ff;
}
.hot:hover{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 0 24px rgba(31,220,255,.5);
  background:rgba(23,211,255,.07);
}

/* Top navigation hotspots — coordinates follow the approved 1650x930 template */
.hot-home{left:27.1%;top:1.3%;width:4.7%;height:7.1%}
.hot-book{left:32.8%;top:1.5%;width:4.5%;height:6.8%}
.hot-play{left:38.1%;top:1.5%;width:4.3%;height:6.8%}
.hot-color{left:43.2%;top:1.5%;width:4.7%;height:6.8%}
.hot-watch{left:48.6%;top:1.5%;width:4.7%;height:6.8%}
.hot-stem{left:54.0%;top:1.5%;width:4.5%;height:6.8%}
.hot-spell{left:59.0%;top:1.5%;width:7.2%;height:6.8%}
.hot-about{left:66.3%;top:1.5%;width:4.6%;height:6.8%}
.hot-buy{left:79.7%;top:1.4%;width:10.0%;height:6.9%}

/* Main CTA and right-hand world signpost */
.hot-start{left:4.1%;top:70.3%;width:22.2%;height:7.2%}
.hot-explore{left:88.5%;top:40.1%;width:9.3%;height:5.3%}
.hot-learn{left:88.5%;top:45.7%;width:9.3%;height:5.3%}
.hot-create{left:88.5%;top:51.3%;width:9.3%;height:5.3%}
.hot-imagine{left:88.5%;top:56.8%;width:9.3%;height:5.3%}
.hot-belong{left:88.5%;top:62.3%;width:9.3%;height:5.3%}

.live-tool-dock{
  background:linear-gradient(90deg,#061844 0%,#0a2f73 48%,#111b61 100%);
  padding:17px 0;
  border-bottom:1px solid #3d7fc7;
  box-shadow:0 14px 30px rgba(7,39,96,.16);
}
.live-tool-dock .quick-grid a{
  background:linear-gradient(180deg,#0d3a82,#08245a);
  border-color:#299ce0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.live-tool-dock .quick-grid a:nth-child(2){border-color:#8a6bff}
.live-tool-dock .quick-grid a:nth-child(3){border-color:#ff5ea6}
.live-tool-dock .quick-grid a:nth-child(4){border-color:#a068ff}
.live-tool-dock .quick-grid a:nth-child(5){border-color:#23c980}
.live-tool-dock .quick-grid a:nth-child(6){border-color:#ffc63b}
.live-tool-dock .quick-grid a:nth-child(7){border-color:#ff8b2e}
.live-tool-dock .quick-grid a:nth-child(8){border-color:#24ddff}

/* Make the interactive world visually continue the template artwork */
.world{
  background:
    radial-gradient(circle at 10% 10%,rgba(33,216,255,.24),transparent 24rem),
    radial-gradient(circle at 90% 15%,rgba(124,77,255,.18),transparent 25rem),
    linear-gradient(180deg,#e8fbff 0%,#f5f3ff 55%,#ffffff 100%);
}
.world .section-head{text-align:center;margin-left:auto;margin-right:auto}
.world-signs{justify-content:center}
.world-panel{
  background:
    radial-gradient(circle at 85% 20%,rgba(35,220,255,.18),transparent 17rem),
    linear-gradient(135deg,#06225b 0%,#0756a5 45%,#6f47dc 100%);
  border:2px solid #4bdfff;
}
.az-section{background:linear-gradient(180deg,#fff,#eaf7ff)}
.az-grid button:nth-child(6n+1){border-color:#3ea6ff}
.az-grid button:nth-child(6n+2){border-color:#ff6fae}
.az-grid button:nth-child(6n+3){border-color:#42cf7b}
.az-grid button:nth-child(6n+4){border-color:#ffc84d}
.az-grid button:nth-child(6n+5){border-color:#906aff}
.az-grid button:nth-child(6n+6){border-color:#31d5e8}

/* Stronger card artwork without dark site-wide framing */
.game-card,.stem-grid article,.media-grid article,.purchase-grid a,.color-card,.spell-card,.book-viewer,.author-photo{
  transition:transform .18s ease,box-shadow .18s ease;
}
.game-card:hover,.stem-grid article:hover,.media-grid article:hover,.purchase-grid a:hover,.color-card:hover{
  transform:translateY(-5px);
}
.stem-grid article:nth-child(1){border-top:5px solid #2acb72}
.stem-grid article:nth-child(2){border-top:5px solid #20bce9}
.stem-grid article:nth-child(3){border-top:5px solid #8a5df4}
.stem-grid article:nth-child(4){border-top:5px solid #ffb72d}
.stem-grid article:nth-child(5){border-top:5px solid #ff6b7f}
.stem-grid article:nth-child(6){border-top:5px solid #2dc0c4}

@media(max-width:760px){
  .hero-template{overflow-x:hidden}
  .hero-template-image{
    width:160%;
    max-width:none;
    transform:translateX(-17%);
  }
  .hero-hotspots{display:none}
  .live-tool-dock{position:relative}
}

.hot-en{left:66.8%;top:1.6%;width:5.0%;height:6.3%}
.hot-es{left:71.8%;top:1.6%;width:5.0%;height:6.3%}


/* === COMPLETION PASS: crisp book, real activities, larger coloring === */
.book-copy{display:flex;flex-direction:column;align-items:flex-start}
.book-product-mockup{margin:20px 0 18px;width:min(270px,72%);filter:drop-shadow(0 22px 28px rgba(16,47,96,.2));transform:perspective(900px) rotateY(-8deg)}
.book-product-mockup img{display:block;width:100%;height:auto;border-radius:12px}
.book-frame{min-height:560px;padding:18px;background:linear-gradient(145deg,#fefefe,#f7f9ff)}
.book-frame img{display:none;width:100%;height:520px;max-height:none;object-fit:contain;background:white}
.book-frame img.active{display:block}
.feature-grid{grid-template-columns:.58fr 1.42fr}

.featured-activities{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:8px 0 26px}
.activity-poster{display:block;text-decoration:none;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 18px 42px rgba(23,82,130,.12);border:2px solid #d8e7f6;transition:transform .18s ease,box-shadow .18s ease}
.activity-poster:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(23,82,130,.2)}
.activity-poster img{width:100%;height:560px;display:block;object-fit:cover;object-position:top center;background:#fff}
.activity-meta{padding:18px 20px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.activity-meta strong{font-size:1.35rem;color:#09295f}
.activity-meta span{font-weight:1000;color:#087dcc}
.battery-poster{border-color:#64d78e}.stand-poster{border-color:#ffbd5e}
.secondary-stem{grid-template-columns:repeat(4,1fr)}

.coloring-showcase{display:block;position:relative;text-decoration:none;border-radius:28px;overflow:hidden;border:2px solid #55caff;box-shadow:0 22px 48px rgba(33,93,164,.14);margin:0 0 28px;background:#fff}
.coloring-showcase img{display:block;width:100%;height:auto}
.coloring-showcase span{position:absolute;right:22px;bottom:20px;padding:12px 18px;border-radius:999px;background:linear-gradient(135deg,#087cff,#7c4dff);color:#fff;font-weight:1000;box-shadow:0 8px 22px rgba(11,55,135,.24)}
.color-grid{grid-template-columns:repeat(3,1fr)}
.color-card{padding:14px}
.color-preview{aspect-ratio:4/3;min-height:220px}

.shop-intro{display:grid;grid-template-columns:1fr 280px;gap:30px;align-items:center;margin-bottom:24px}
.shop-book{text-align:center}
.shop-book img{display:block;width:220px;max-width:100%;height:auto;margin:0 auto;filter:drop-shadow(0 26px 30px rgba(17,53,105,.24));transform:perspective(900px) rotateY(-9deg)}
.shop-book span{display:block;margin-top:10px;color:#243b66;font-weight:1000}

@media(max-width:980px){
  .featured-activities{grid-template-columns:1fr}
  .activity-poster img{height:auto;max-height:760px;object-fit:contain}
  .secondary-stem{grid-template-columns:1fr 1fr}
  .shop-intro{grid-template-columns:1fr}
  .shop-book{order:-1}
}
@media(max-width:760px){
  .feature-grid{grid-template-columns:1fr}
  .book-copy{align-items:center;text-align:center}
  .book-product-mockup{width:210px}
  .book-frame{min-height:420px}
  .book-frame img{height:390px}
  .activity-meta{display:block}
  .activity-meta span{display:block;margin-top:7px}
  .secondary-stem{grid-template-columns:1fr}
  .color-grid{grid-template-columns:1fr 1fr}
  .coloring-showcase span{position:static;display:block;border-radius:0;text-align:center}
}
@media(max-width:480px){
  .color-grid{grid-template-columns:1fr}
}


/* === INTRO / AUDIO / LYRIC EXPERIENCE === */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:18px}
body.intro-open{overflow:hidden}
.site-intro{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 34%,rgba(0,224,255,.22),transparent 23rem),
    radial-gradient(circle at 18% 70%,rgba(108,61,255,.22),transparent 24rem),
    linear-gradient(180deg,#020a25 0%,#06255d 58%,#041634 100%);
  color:#fff;overflow:hidden;
}
.site-intro[hidden]{display:none}
.site-intro::before{
  content:"";position:absolute;inset:-15%;
  background-image:radial-gradient(circle,#63e8ff 0 1px,transparent 1.6px);
  background-size:38px 38px;opacity:.16;animation:introStars 18s linear infinite;
}
.intro-sky{position:absolute;inset:auto -12% -35% -12%;height:70%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at center,#0d83df 0%,#063268 46%,transparent 70%);filter:blur(8px)}
.intro-card{position:relative;z-index:2;text-align:center;width:min(920px,92vw);padding:34px 24px 28px}
.intro-presented{letter-spacing:.34em;font-size:.82rem;font-weight:1000;color:#68e8ff;margin:0 0 10px}
.intro-card h1{font-size:clamp(3rem,8vw,7rem);line-height:.86;margin:0;text-shadow:0 0 18px #24caff,0 8px 40px rgba(0,0,0,.42)}
.intro-tagline{font-size:clamp(1rem,2.4vw,1.45rem);font-weight:900;margin:16px 0 22px;color:#dff7ff}
.intro-bus{position:relative;margin:16px auto 28px;width:min(560px,85vw);height:150px;border:4px solid #ffbe00;border-radius:42px 48px 26px 26px;background:linear-gradient(180deg,#ffd642,#f9a800);box-shadow:0 0 55px rgba(255,189,0,.32),inset 0 -16px 0 #e88600;animation:introBusFloat 2.4s ease-in-out infinite}
.intro-bus::before{content:"";position:absolute;left:50px;right:50px;top:25px;height:65px;border-radius:14px;background:linear-gradient(90deg,#103d73,#246faf 52%,#103d73);box-shadow:inset 0 0 0 5px #f6b700}
.intro-bus-title{position:absolute;top:92px;left:0;right:0;font-weight:1000;font-size:1.25rem;color:#071a47}
.intro-wheel{position:absolute;bottom:-25px;width:58px;height:58px;border:10px solid #101625;border-radius:50%;background:#c4d4ea;box-shadow:inset 0 0 0 7px #4e6078}
.intro-wheel-one{left:85px}.intro-wheel-two{right:85px}
.intro-light{position:absolute;top:45px;width:30px;height:30px;border-radius:50%;z-index:3;background:#fff7c8;box-shadow:0 0 15px 8px #fff2a5,0 0 45px 20px #ffd43a;animation:busLightPulse .85s ease-in-out infinite alternate}
.intro-light-left{left:10px}.intro-light-right{right:10px}.lights-off .intro-light{background:#7d6a32;box-shadow:none;animation:none}
.intro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}
.intro-enter,.intro-secondary,.intro-skip{border:0;cursor:pointer;font:inherit;font-weight:1000}
.intro-enter{padding:16px 24px;border-radius:999px;color:#06163e;background:linear-gradient(135deg,#55f4ff,#fff,#ffd847);box-shadow:0 0 30px rgba(76,225,255,.38)}
.intro-secondary{padding:14px 18px;border-radius:999px;background:#0b3577;color:#fff;border:1px solid #4ebeff}
.intro-skip{margin-top:18px;color:#b8dcff;background:transparent;text-decoration:underline}
.site-intro.leaving{animation:introLeave .65s ease forwards}
.sound-dock{position:fixed;right:18px;bottom:18px;z-index:8000;border:1px solid #52dfff;background:rgba(4,29,75,.93);color:#fff;border-radius:999px;padding:11px 15px;font-weight:1000;box-shadow:0 8px 24px rgba(0,30,80,.26);cursor:pointer}
.lyric-stage{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;overflow:hidden;border-radius:30px;padding:28px;background:linear-gradient(135deg,#061943,#073b88 48%,#6d42d8);color:#fff;box-shadow:0 24px 60px rgba(17,54,130,.24);margin-bottom:26px}
.lyric-stage::after{content:"";position:absolute;inset:auto -15% -45% 35%;height:70%;background:radial-gradient(circle,#20e6ff 0,rgba(32,230,255,.18) 25%,transparent 68%)}
.lyric-art{position:relative;min-height:280px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#2ab8ff 0,#0e4da2 48%,#06275b 100%);overflow:hidden}
.lyric-bus{position:absolute;font-size:7rem;left:16%;bottom:18%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.28));animation:lyricBus 4s ease-in-out infinite}
.lyric-robot{position:absolute;font-size:5rem;right:14%;top:18%;animation:lyricRobot 2.3s ease-in-out infinite}
.lyric-glow{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(112,236,255,.12) 15px 17px);animation:equalizerSweep 6s linear infinite}
.lyric-copy{position:relative;z-index:2}.lyric-copy h3{font-size:clamp(2rem,5vw,4.5rem);line-height:1;margin:.15em 0 .25em}.lyric-copy #lyricSub{font-size:1.1rem;color:#d9efff;min-height:2.6em}.lyric-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.text-button{border:0;background:transparent;padding:0;color:#096bc7;font:inherit;font-weight:1000;cursor:pointer}
@keyframes busLightPulse{to{opacity:.48;transform:scale(.84)}}
@keyframes introBusFloat{50%{transform:translateY(-8px)}}
@keyframes introStars{to{transform:translate3d(40px,40px,0)}}
@keyframes introLeave{to{opacity:0;transform:scale(1.04);visibility:hidden}}
@keyframes lyricBus{50%{transform:translateX(22px) translateY(-5px)}}
@keyframes lyricRobot{50%{transform:translateY(15px) rotate(4deg)}}
@keyframes equalizerSweep{to{transform:translateX(60px)}}
@media(max-width:760px){
  .intro-card{padding-top:18px}.intro-bus{height:120px}.intro-bus::before{top:20px;height:50px}.intro-bus-title{top:72px}.intro-wheel{width:48px;height:48px}.intro-wheel-one{left:60px}.intro-wheel-two{right:60px}
  .lyric-stage{grid-template-columns:1fr}.lyric-art{min-height:210px}.sound-dock{right:10px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){.site-intro::before,.intro-bus,.intro-light,.lyric-bus,.lyric-robot,.lyric-glow{animation:none!important}}


/* === FINAL 10/10 CONTROL + COLORING PASS === */
.site-control-bar{
  position:sticky;top:0;z-index:7000;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:8px 12px;
  background:linear-gradient(90deg,rgba(3,19,58,.97),rgba(5,54,121,.97),rgba(14,27,92,.97));
  border-bottom:1px solid #35dcff;
  box-shadow:0 8px 22px rgba(4,27,73,.18);
  backdrop-filter:blur(14px);
}
.site-control-bar a{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:8px 12px;border-radius:12px;
  color:#fff;text-decoration:none;font-weight:1000;font-size:.92rem;
  border:1px solid transparent;
}
.site-control-bar a:hover,.site-control-bar a:focus-visible{
  background:#0d4da3;border-color:#49e2ff;outline:none;
  box-shadow:0 0 18px rgba(63,225,255,.26);
}
.site-control-bar .control-buy{
  margin-left:8px;background:linear-gradient(135deg,#ff9c16,#ff651c);border-color:#ffca55;
  box-shadow:0 0 16px rgba(255,150,30,.22);
}
.site-control-bar a.active-section{
  background:linear-gradient(135deg,#056ce6,#6e4dff);
  border-color:#6cecff;
}

.intro-bus{
  overflow:visible;
  background:
    linear-gradient(180deg,#ffd84d 0%,#ffbf1a 54%,#f59b00 55%,#e78700 100%);
  border-color:#ffcc28;
  box-shadow:0 0 60px rgba(255,195,35,.42),inset 0 -14px 0 #d97200;
}
.intro-bus::before{
  left:42px;right:42px;top:30px;height:60px;
  background:linear-gradient(180deg,#1d6fb4,#0f3f77);
  border-radius:10px;
  box-shadow:inset 0 0 0 4px #f5b600,inset 0 -8px 18px rgba(0,0,0,.16);
}
.intro-bus-route{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  background:#101d48;color:#ffe569;border:3px solid #ffca22;border-radius:12px;
  padding:5px 16px;font-size:.78rem;font-weight:1000;letter-spacing:.12em;
}
.intro-bus-windows{
  position:absolute;left:62px;right:62px;top:38px;height:42px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;z-index:2;
}
.intro-bus-windows span{
  border-radius:5px;background:linear-gradient(180deg,#79d7ff,#1e6cad);
  border:2px solid #0a355f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.intro-bus-title{top:92px;letter-spacing:.04em}
.intro-bus-badge{
  position:absolute;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:#0b2c6f;color:#fff;border:4px solid #fff;
  font-size:1rem;font-weight:1000;box-shadow:0 0 18px rgba(255,255,255,.35);
}
.intro-bumper{
  position:absolute;left:22px;right:22px;bottom:-5px;height:13px;border-radius:8px;background:#2f3a4e;
  box-shadow:inset 0 3px 0 #75849a;
}

.color-world{
  display:grid;grid-template-columns:.55fr 1.45fr;gap:24px;align-items:stretch;
  margin-bottom:24px;
}
.color-world-copy{
  border-radius:28px;padding:28px;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.32),transparent 9rem),
    linear-gradient(145deg,#ffce3b,#ff7d42 40%,#ee4cab 70%,#7a56ff);
  color:#11194a;box-shadow:0 20px 46px rgba(111,65,198,.14);
}
.color-world-copy .color-spark{font-size:4.5rem;display:block;margin-bottom:10px}
.color-world-copy h3{font-size:2.1rem;line-height:1;margin:0 0 12px;color:#091d55}
.color-world-copy p{font-size:1.05rem;font-weight:700;color:#243765}
.color-world-copy .btn{margin-top:14px}
.coloring-showcase{margin:0}
.coloring-showcase img{min-height:420px;object-fit:cover;object-position:center}
.color-letter-strip{
  display:grid;grid-template-columns:repeat(13,1fr);gap:7px;margin:8px 0 24px;
}
.color-letter-strip a{
  display:grid;place-items:center;aspect-ratio:1;border-radius:10px;text-decoration:none;
  color:#fff;font-weight:1000;font-size:1rem;
  background:linear-gradient(145deg,#0578ea,#6c4cff);
  border:1px solid #6be8ff;box-shadow:0 5px 12px rgba(27,72,160,.12)
}
.color-letter-strip a:nth-child(4n+2){background:linear-gradient(145deg,#ff4c86,#f58a23)}
.color-letter-strip a:nth-child(4n+3){background:linear-gradient(145deg,#16b85a,#27c9bc)}
.color-letter-strip a:nth-child(4n){background:linear-gradient(145deg,#ffaf00,#ec5c29)}
.color-card{
  background:#fff;overflow:hidden;border:2px solid #d5e3f5;
  box-shadow:0 12px 26px rgba(30,70,130,.08);
}
.color-card .color-preview{
  position:relative;overflow:hidden;background:#fffdf7;
  border:2px solid #162a4c;border-radius:14px;
}
.color-card.featured-color .color-preview{
  background-image:url('/assets/coloring/coloring-preview-sheet.webp');
  background-repeat:no-repeat;background-size:300% 200%;
}
.color-card.featured-color .color-letter,
.color-card.featured-color .color-icon{display:none}
.color-card[data-letter="A"] .color-preview{background-position:0% 0%}
.color-card[data-letter="B"] .color-preview{background-position:50% 0%}
.color-card[data-letter="C"] .color-preview{background-position:100% 0%}
.color-card[data-letter="D"] .color-preview{background-position:0% 100%}
.color-card[data-letter="E"] .color-preview{background-position:50% 100%}
.color-card[data-letter="F"] .color-preview{background-position:100% 100%}
.color-card b{display:block;margin-top:10px;color:#09285f;font-size:1.05rem}
.color-card small{display:block;margin-top:5px;color:#0878cf;font-weight:900}

@media(max-width:980px){
  .site-control-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .site-control-bar a{white-space:nowrap}
  .color-world{grid-template-columns:1fr}
  .coloring-showcase img{min-height:auto}
  .color-letter-strip{grid-template-columns:repeat(9,1fr)}
}
@media(max-width:620px){
  .color-letter-strip{grid-template-columns:repeat(7,1fr)}
  .site-control-bar a span{display:none}
  .site-control-bar .control-buy{margin-left:0}
}

.color-card.color-pulse{animation:colorPulse 1.2s ease;box-shadow:0 0 0 5px rgba(43,218,255,.24),0 22px 50px rgba(73,70,210,.28)}
@keyframes colorPulse{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-7px) scale(1.025)}}


/* === YOUTUBE INTRO + LYRIC VIDEO + BILINGUAL CONTROLS === */
.intro-video-shell{
  width:min(880px,92vw);
  aspect-ratio:16/9;
  margin:18px auto 22px;
  border-radius:24px;
  overflow:hidden;
  border:2px solid #46dcff;
  background:#000;
  box-shadow:0 0 38px rgba(46,215,255,.28),0 22px 60px rgba(0,0,0,.35);
}
.intro-video-shell iframe,
.lyric-video-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.intro-card{
  width:min(980px,96vw);
  max-height:96vh;
  overflow:auto;
}
.lyric-stage{
  grid-template-columns:1.35fr .65fr;
}
.lyric-video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:#000;
  box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.control-language{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:4px;
  padding:3px;
  border-radius:999px;
  background:#061d4a;
  border:1px solid #39d8ff;
}
.control-language button{
  border:0;
  border-radius:999px;
  padding:7px 11px;
  font:inherit;
  font-weight:1000;
  color:#d9f5ff;
  background:transparent;
  cursor:pointer;
}
.control-language button.active{
  color:#071746;
  background:linear-gradient(135deg,#65efff,#fff58a);
  box-shadow:0 0 14px rgba(92,232,255,.35);
}
@media(max-width:980px){
  .lyric-stage{grid-template-columns:1fr}
}
@media(max-width:760px){
  .intro-card h1{font-size:clamp(2.4rem,12vw,4.5rem)}
  .intro-video-shell{width:94vw;border-radius:16px}
  .control-language{margin-left:0}
}


/* === CRISP BOOK VIEWER REPLACEMENT === */
.book-viewer{
  background:linear-gradient(145deg,#2f7cff 0%,#7955ee 58%,#eb42a8 100%);
  border-radius:28px;
  padding:18px 18px 12px;
  box-shadow:0 26px 60px rgba(42,70,160,.20);
}
.book-frame{
  min-height:620px;
  padding:18px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(19,44,91,.08);
}
.book-frame img{
  display:none;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:580px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  filter:none;
  image-rendering:auto;
  box-shadow:0 14px 32px rgba(16,44,91,.10);
}
.book-frame img.active{display:block}
.viewer-controls{
  color:#fff;
  padding:12px 2px 2px;
}
.viewer-controls button{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:#07326f;color:#fff;font-weight:1000;cursor:pointer;
}
.viewer-controls span{font-weight:1000}
@media(max-width:760px){
  .book-frame{min-height:460px;padding:12px}
  .book-frame img{max-height:430px}
}


/* === FULL SITE FIX 13: single top nav, F/G/H book, activities, large coloring === */
.live-tool-dock{display:none!important}

.book-layout{
  display:grid;
  grid-template-columns:minmax(240px,.5fr) minmax(0,1.5fr);
  gap:28px;
  align-items:start;
}
.book-viewer-fgh .book-frame{min-height:620px}
.book-viewer-fgh .book-frame img{max-height:590px}
.fgh-activity-section{
  margin-top:30px;
  padding:26px;
  border-radius:28px;
  background:linear-gradient(180deg,#effbff,#f7fbff);
  border:1px solid #bde8ff;
  box-shadow:0 20px 44px rgba(26,82,150,.08);
}
.activity-intro{max-width:760px;margin-bottom:20px}
.activity-intro h3{font-size:2rem;margin:.2rem 0;color:#09275e}
.fgh-activity-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.fgh-activity-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:22px;
  text-decoration:none;
  background:#fff;
  border:2px solid #dce9f7;
  box-shadow:0 12px 28px rgba(28,72,130,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
.fgh-activity-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(28,72,130,.16)}
.fgh-activity-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;background:#fff}
.fgh-activity-card strong{font-size:1.08rem;color:#08275e;padding:14px 16px 4px}
.fgh-activity-card span{padding:0 16px 16px;color:#0878cf;font-weight:1000}
.fgh-activity-card.green-card{border-color:#63d596}
.fgh-activity-card.blue-card{border-color:#58c9ff}
.fgh-activity-card.purple-card{border-color:#9b72ff}

.coloring-hero-card{
  display:grid;
  grid-template-columns:.42fr 1.58fr;
  gap:18px;
  align-items:stretch;
  border-radius:30px;
  padding:18px;
  background:linear-gradient(135deg,#fff6cf,#fffaf0);
  border:1px solid #ffe18b;
  box-shadow:0 18px 42px rgba(160,112,23,.09);
  margin-bottom:26px;
}
.coloring-hero-card>div:first-child{
  border-radius:24px;
  padding:26px;
  color:#09275e;
  background:linear-gradient(145deg,#ffd24c,#ff7f43 42%,#f04db4 74%,#805cff);
}
.coloring-hero-card h3{font-size:2rem;line-height:1.02;margin:.4rem 0;color:#09275e}
.coloring-hero-card p{font-weight:800;color:#16376e}
.coloring-feature-strip{
  display:grid;
  grid-template-columns:repeat(9,1fr);
  gap:9px;
  align-items:stretch;
}
.coloring-feature-strip article{
  background:#fff;
  border:1px solid #efd999;
  border-radius:16px;
  overflow:hidden;
  min-width:0;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.coloring-feature-strip img{
  width:100%;
  aspect-ratio:8.5/11;
  object-fit:cover;
  object-position:top center;
  background:#fff;
}
.coloring-feature-strip b{font-size:1rem;color:#0a2860;padding:5px 5px 0}
.coloring-feature-strip span{font-size:.72rem;font-weight:900;color:#17335f;padding:0 4px 8px}

.color-grid-large{
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.color-card-large{
  padding:12px;
  border-radius:22px;
  background:#fff;
  border:2px solid #d6e6f6;
  box-shadow:0 12px 28px rgba(23,65,119,.08);
}
.color-page-thumb{
  width:100%;
  overflow:hidden;
  border:2px solid #112b50;
  border-radius:14px;
  background:#fff;
}
.color-page-thumb img{
  width:100%;
  display:block;
  aspect-ratio:8.5/11;
  object-fit:cover;
  object-position:top center;
}
.color-card-large b{display:block;margin-top:10px;color:#0a2860;font-size:1.02rem}
.color-card-large small{display:block;margin-top:5px;color:#0878cf;font-weight:1000}

@media(max-width:1100px){
  .coloring-feature-strip{grid-template-columns:repeat(5,1fr)}
  .color-grid-large{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .book-layout,.coloring-hero-card{grid-template-columns:1fr}
  .fgh-activity-grid{grid-template-columns:1fr}
  .coloring-feature-strip{grid-template-columns:repeat(3,1fr)}
  .color-grid-large{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .coloring-feature-strip{grid-template-columns:repeat(2,1fr)}
  .color-grid-large{grid-template-columns:1fr}
}


/* === ACTUAL BOOK PAGES 14 === */
.actual-book-viewer{
  position:relative;
  background:linear-gradient(145deg,#247dff 0%,#7358ef 54%,#e644b3 100%);
  border-radius:28px;
  padding:18px;
  box-shadow:0 24px 58px rgba(36,74,160,.18);
}
.actual-book-label{
  display:inline-flex;
  margin:0 0 10px;
  padding:7px 12px;
  border-radius:999px;
  background:#061f52;
  color:#fff;
  font-size:.76rem;
  font-weight:1000;
  letter-spacing:.09em;
}
.actual-book-viewer .book-frame{
  min-height:620px;
  background:#fff;
  border-radius:22px;
  padding:16px;
}
.actual-book-viewer .book-frame img{
  max-height:590px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  background:#fff;
  box-shadow:none;
  border-radius:0;
}
@media(max-width:760px){
  .actual-book-viewer .book-frame{min-height:460px}
  .actual-book-viewer .book-frame img{max-height:430px}
}


/* Sharp actual-book viewer: never upscale the supplied raster pages beyond native size. */
.actual-book-viewer .book-frame{
  min-height:620px;
  padding:28px;
  background:#fff;
}
.actual-book-viewer .book-frame img{
  display:none;
  width:auto;
  height:auto;
  max-width:min(100%,520px);
  max-height:528px;
  object-fit:contain;
  margin:auto;
  image-rendering:auto;
}
.actual-book-viewer .book-frame img.active{display:block}
.book-product-mockup img{
  width:auto;
  max-width:min(100%,300px);
  height:auto;
}
@media(max-width:700px){
  .actual-book-viewer .book-frame{min-height:420px;padding:16px}
  .actual-book-viewer .book-frame img{max-width:100%;max-height:390px}
}