:root { --paper:#fffdf6; --ink:#214755; --muted:#516775; --sea:#08798e; --line:#d5e8e2; }
body { overflow-x:clip; }
h1,h2,h3 { font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif; font-weight:800; letter-spacing:-.035em; }
.preview-bar { background:#ffe178; font-size:11px; color:#624a19; }
.site-header { min-height:96px; }
.site-header nav { font-weight:700; }
.brand-mark { background:#07869c; border-radius:15px 23px 15px 23px; }
.button { background:#07869c; border-color:#07869c; box-shadow:0 5px 0 #075c70; animation:button-bob 3.5s ease-in-out infinite; transform-origin:center; }
.button:hover:not(:disabled) { background:#076e82; animation:none; transform:translateY(-3px) rotate(-2deg); }
.button:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px 0 #075c70; }
.button:disabled { animation:none; }
.button:nth-child(even) { animation-delay:-1.6s; }
.coral { background:#dc563a; border-color:#dc563a; box-shadow:0 5px 0 #a53b26; color:white; }
.coral:hover:not(:disabled) { background:#c34930; }
.yellow { background:#ffdc61; border-color:#ffdc61; color:#634511; box-shadow:0 5px 0 #d0a534; }
.yellow:hover:not(:disabled) { background:#f5ce4f; }
.outline { background:#e1f5f8; color:#08677b; }
.welcome { text-align:center; padding:40px 0 0; background:#dff6ff; border-radius:0 0 70px 70px; position:relative; }
.welcome h1 { font-size:clamp(44px,5.2vw,72px); margin:16px 0; line-height:1.12; }
.welcome h1 em { color:#d84f34; font-family:inherit; font-style:normal; font-weight:800; }
.welcome p { margin:0; font-size:20px; }
.welcome .actions { justify-content:center; margin:25px 0 15px; }
.eyebrow { font-size:11px; letter-spacing:.13em; color:#086d80; }
.trio-stage { display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:15px; padding:5px 0 28px; }
.trio-stage>div { position:relative; }
.mascot { display:block; background-image:url('assets/mascots-trio-v3.png'); background-size:300% 100%; background-repeat:no-repeat; aspect-ratio:1; width:100%; animation:mascot-float 4s ease-in-out infinite; }
.dugong { background-position:0 0; }
.pangolin { background-position:50% 0; animation-delay:-1.4s; clip-path:inset(0 0 0 10%); }
.bird { background-position:100% 0; animation-delay:-2.7s; }
.name-tag { display:inline-block; position:relative; margin-top:4px; background:white; padding:5px 19px; border-radius:100px; font-size:14px; font-weight:700; }
.book-section { padding:50px 0 40px; scroll-margin-top:20px; }
.ebook-section { background:#fffdf6; }
.cetak-section { background:#fff0c4; border-radius:60px; }
.shelf-heading { display:flex; align-items:center; justify-content:center; gap:28px; text-align:left; margin-bottom:26px; }
.section-mascot { width:190px; flex-shrink:0; }
.shelf-heading h2 { font-size:52px; margin:7px 0 10px; color:#08798e; }
.cetak-section h2 { color:#bb492b; }
.shelf-heading p { margin:0; font-size:17px; }
.carousel-window { overflow:hidden; padding:12px 6px 16px; margin:-6px; touch-action:pan-y; }
.book-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px)/2); gap:24px; transition:transform .6s cubic-bezier(.22,.75,.26,1); }
.book-card { min-width:0; border-radius:30px; background:white; padding:12px; border:2px solid #e4eee8; }
.book-art { width:100%; min-height:300px; position:relative; border:0; border-radius:22px; display:flex; justify-content:center; align-items:center; padding:26px 20px; color:var(--ink); }
.mint { background:#d5f2df; }.peach { background:#ffddd0; }.sky { background:#d7efff; }.lemon { background:#fff0aa; }
.mini-book { display:flex; flex-direction:column; align-items:center; width:200px; min-height:255px; padding:20px 12px 12px; background:#fffdf5; border-radius:4px 12px 12px 4px; box-shadow:-6px 0 0 #d0d7c5,0 10px 15px #27473820; transform:rotate(-5deg); }
.book-card:nth-child(even) .mini-book { transform:rotate(5deg); }
.mini-book small { font-size:7px; letter-spacing:.12em; }
.mini-book strong { font-size:27px; line-height:1.05; margin:10px 0 0; font-weight:800; }
.book-mascot { width:135px; margin:0; }
.book-tagline { font-size:10px; font-weight:700; }
.format-pill { position:absolute; right:12px; bottom:12px; font-size:10px; background:white; padding:3px 10px; border-radius:20px; font-weight:700; }
.book-caption { text-align:center; padding:18px 8px 12px; }
.book-caption h3 { font-size:23px; margin-bottom:8px; }
.book-caption>span { font-size:12px; color:var(--muted); display:block; margin-bottom:14px; }
.book-button { padding:10px 22px; min-height:44px; }
.book-card:nth-child(3n+2) .book-button { background:#d95639; border-color:#d95639; box-shadow:0 5px 0 #a83c25; }
.book-card:nth-child(3n) .book-button { background:#3c844a; border-color:#3c844a; box-shadow:0 5px 0 #285e33; }
.slider-controls { display:flex; justify-content:center; align-items:center; gap:18px; margin:15px 0 22px; }
.slider-arrow { width:46px; height:46px; min-height:44px; padding:0; font-size:22px; }
.slide-status { font-size:14px; font-weight:700; }
.pause-button { min-height:44px; padding:8px 14px; font-size:12px; }
.more-button { display:flex; margin:0 auto; }
.more-button span { animation:arrow-nudge 1.2s ease-in-out infinite; }
.shelf-note { text-align:center; font-size:10px; margin:20px 0 0; }
.book-pagination { display:flex; justify-content:center; gap:12px; margin-top:24px; }
.page-number { min-height:44px; padding:8px 17px; }
.page-number[aria-current] { background:#d95639; }
.expanded .book-track { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-columns:auto; }
.expanded .carousel-window { overflow:visible; }
.expanded .slider-controls { display:none; }
.expanded .more-button { margin-top:28px; }
.play-section { background:#def3f7; padding:50px 0; margin-top:45px; border-radius:60px; }
.play-layout { gap:70px; }
.play-invite { text-align:center; }
.play-invite .mascot { margin:auto; width:240px; }
.play-invite h2 { font-size:40px; margin:0 0 22px; }
.game-panel { border:4px solid white; box-shadow:0 8px 0 #b0dfe7; }
.game-choices button { background:#fff0bf; border:2px solid #dbc56b; animation:button-bob 4s ease-in-out infinite; }
.game-choices button:disabled { animation:none; }
.game-choices button:nth-child(2) { background:#d8f4de; border-color:#9ac5a0; animation-delay:-1.3s; }
.game-choices button:nth-child(3) { background:#ffe0d0; border-color:#d4a68d; animation-delay:-2.6s; }
.close-button { background:#ffe078; border-color:#e0b84c; animation:button-bob 3.5s ease-in-out infinite; }
.parent-mini { padding-block:40px; display:flex; align-items:center; justify-content:center; gap:30px; }
.parent-mini>.mascot { width:170px; flex-shrink:0; }
.parent-mini h2 { font-size:30px; margin:0 0 12px; }
.parent-mini p { font-size:14px; margin-bottom:12px; }
.parent-mini details { max-width:450px; }
.parent-mini summary { font-size:13px; }
footer { font-size:12px; }
@keyframes mascot-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes button-bob { 0%,80%,100% { translate:0 0; } 90% { translate:0 -3px; } }
@keyframes arrow-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(4px); } }
@media(max-width:650px) {
  .site-header { min-height:100px; }.site-header nav { font-size:13px; }
  .welcome { padding-top:28px; border-radius:0 0 35px 35px; }
  .welcome h1 { font-size:42px; }.welcome p { font-size:17px; }
  .welcome .eyebrow { font-size:9px; }.welcome .actions { gap:15px; }
  .trio-stage { gap:0; padding-bottom:24px; margin-inline:-8px; }
  .name-tag { font-size:10px; padding:4px 10px; }.trio-stage .mascot { min-width:0; }
  .book-section { padding:28px 0; }.shelf-heading { gap:8px; margin-bottom:20px; }
  .section-mascot { width:120px; }.shelf-heading h2 { font-size:35px; }
  .shelf-heading .eyebrow { font-size:8px; letter-spacing:.06em; }.shelf-heading p { font-size:12px; }
  .book-card { padding:6px; border-radius:20px; }.book-art { min-height:195px; padding:20px 7px; border-radius:14px; }
  .mini-book { width:112px; min-height:155px; padding:12px 6px 8px; box-shadow:-4px 0 0 #d0d7c5,0 7px 10px #27473820; }
  .mini-book small { font-size:5px; }.mini-book strong { font-size:18px; margin-top:7px; }
  .book-mascot { width:83px; }.book-tagline { font-size:6px; }
  .format-pill { font-size:7px; right:6px; bottom:6px; padding:2px 7px; }
  .book-caption { padding:13px 2px 8px; }.book-caption h3 { font-size:17px; min-height:40px; margin-bottom:4px; }
  .book-caption>span { font-size:9px; }.book-button { padding:8px 10px; font-size:11px; min-height:44px; }
  .cetak-section { border-radius:30px; }.slider-controls { gap:13px; }.shelf-note { font-size:9px; }
  .expanded .book-track { grid-template-columns:1fr; }.expanded .book-art { min-height:275px; }
  .expanded .mini-book { width:185px; min-height:235px; }.expanded .book-mascot { width:130px; }
  .expanded .mini-book strong { font-size:25px; }.expanded .mini-book small { font-size:7px; }.expanded .book-tagline { font-size:9px; }
  .expanded .book-caption h3 { min-height:0; font-size:23px; }.expanded .book-caption>span { font-size:12px; }
  .play-section { padding:30px 0; margin-top:25px; border-radius:30px; }.play-layout { gap:25px; }
  .play-invite .mascot { width:160px; }.play-invite h2 { font-size:32px; }.play-invite h2 br { display:none; }
  .parent-mini { gap:12px; padding-block:30px; }.parent-mini>.mascot { width:100px; }
  .parent-mini h2 { font-size:24px; }.parent-mini p { font-size:12px; }
}
@media(max-width:360px) { .wrap { width:calc(100% - 24px); }.mini-book { width:100px; }.book-caption h3 { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { .worksheet { background:white; } }
@media(max-width:360px) {
  .play-layout { grid-template-columns:minmax(0,1fr); }
  .game-panel { min-width:0; padding:18px 12px; }
  .game-choices { gap:10px; }
  .game-choices button { width:64px; height:64px; }
}
.empty-shelf { grid-column:1 / -1; text-align:center; padding:35px 12px; }

.uploaded-book-cover{display:block;width:200px;height:255px;object-fit:contain;filter:drop-shadow(0 8px 10px #27473820)}@media(max-width:650px){.uploaded-book-cover{width:112px;height:155px}.expanded .uploaded-book-cover{width:185px;height:235px}}

.game-choices button.choice-correct{opacity:1;background:#dff2df;border-color:#50966c;animation:quick-hop .5s ease-in-out}.game-choices button.choice-retry{background:#fff1bd;animation:quick-nudge .4s ease-in-out}@keyframes quick-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}@keyframes quick-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(4px)}}@media(prefers-reduced-motion:reduce){.game-choices button.choice-correct,.game-choices button.choice-retry{animation:none}}