@font-face{font-family:Manrope;src:url('assets/Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}@font-face{font-family:Fredoka;src:url('assets/Fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{--cream:#fffdf6;--ink:#173747;--muted:#4c626b;--teal:#006d83;--line:#d7e2e4;--aqua:#18c5de}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid var(--teal);outline-offset:6px}img{max-width:100%;height:auto}.wrap{width:min(1180px,calc(100% - 80px));margin:auto}.skip-link{position:absolute;top:-80px;left:20px;background:white;padding:12px;z-index:10}.skip-link:focus{top:12px}.header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-family:Fredoka,sans-serif;font-size:38px;font-weight:550;letter-spacing:-1px}.brand img{border-radius:12px}.brand-dot{color:var(--teal)}nav{display:flex;align-items:center;gap:35px;font-size:14px;font-weight:650}nav>a{padding:12px 0}.nav-cta{background:var(--ink);color:white;border-radius:99px;padding:12px 22px;display:flex;gap:24px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;padding-top:88px;padding-bottom:84px;align-items:center}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:800;display:block;color:var(--teal)}.tiny-book{display:inline-flex;font-size:16px;background:#e5ebe2;border-radius:7px;padding:2px 7px;margin-right:6px}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Fredoka,sans-serif;line-height:1.08;font-weight:450;letter-spacing:-1.5px}h1{font-size:clamp(48px,5.3vw,70px);margin:23px 0 25px}.highlight{color:var(--teal);position:relative;display:inline-block}.highlight svg{position:absolute;left:0;bottom:-15px;width:100%;height:24px;fill:none;stroke:#ffc629;stroke-width:6;stroke-linecap:round}.hero-description{max-width:470px;color:var(--muted);font-size:19px;line-height:1.75;margin:33px 0}.store-buttons{display:flex;gap:12px;flex-wrap:wrap}.store-button{background:var(--ink);color:white;padding:10px 18px;min-height:60px;min-width:171px;border-radius:12px;display:inline-flex;align-items:center;gap:12px;line-height:1.15;transition:background .2s,transform .2s;cursor:pointer}.store-button[href]:hover{background:var(--teal);transform:translateY(-2px)}.store-button[aria-disabled=true]{cursor:default}.store-button svg{width:25px;height:29px;fill:currentColor;flex-shrink:0}.store-button small{display:block;font-size:14px;margin-bottom:5px;letter-spacing:.3px}.store-button strong{font-size:19px;font-weight:650}.platform-note{font-size:14px;color:var(--muted);margin:15px 0 0}.platform-note>span{margin:0 7px}.hero-art{position:relative;min-height:470px;display:flex;align-items:center;justify-content:center}.art-orbit{position:absolute;width:440px;height:440px;border-radius:49% 51% 45% 55%;background:#ffcf3c;transform:rotate(0deg)}.hero-mascot{position:relative;width:425px;filter:drop-shadow(0 16px 0 #243a3510)}.floating-note{position:absolute;z-index:2;border-radius:14px;background:#fffefa;padding:13px 18px;box-shadow:0 7px 25px #1737470a;font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center}.note-top{right:-4px;top:22px;transform:rotate(7deg)}.note-bottom{bottom:33px;left:-22px;transform:rotate(-6deg)}.note-symbol{color:var(--teal);font-size:21px}.star{position:absolute;z-index:2;color:var(--teal);font-size:46px}.star-one{left:9px;top:26px}.star-two{right:-10px;bottom:90px;font-size:65px;color:#e89800}.mascot-caption{position:absolute;bottom:-23px;right:30px;font-size:14px;color:var(--muted);transform:rotate(-5deg)}.mascot-caption span{font-size:29px;margin-left:12px}.values-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#e8f6f7}.values{display:flex;justify-content:space-between;gap:20px;padding-top:23px;padding-bottom:23px;font-size:14px;font-weight:700}.section{padding-top:95px;padding-bottom:90px}.section-heading{text-align:center;max-width:660px;margin:0 auto 45px}.section-heading h2{font-size:45px;margin:17px 0 20px}.section-heading p{color:var(--muted);font-size:15px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{border-radius:22px;padding:25px 25px 30px}.library-card{background:#ffdb55}.progress-card{background:#55d3df}.quote-card{background:#ffa879}.feature-visual{height:240px;display:flex;align-items:center;justify-content:center;margin-bottom:25px}.feature-number{font-size:14px;letter-spacing:1.1px;font-weight:800;color:var(--muted)}.feature-card h3{font-size:27px;letter-spacing:-.5px;margin:12px 0}.feature-card p{font-size:16px;line-height:1.75;color:#264553;margin:0}.book-shelf{align-items:center;gap:8px}.book{height:156px;width:85px;padding:17px 10px 12px;border-radius:3px 7px 7px 3px;box-shadow:inset 5px 0 #ffffff40,4px 6px 0 #17374710;display:flex;flex-direction:column;justify-content:space-between;font-family:Georgia,serif;font-size:12px;line-height:1.3;letter-spacing:.5px}.book small{font-size:10px;letter-spacing:0}.book-one{background:#86c968;transform:rotate(-9deg);color:#203b2b}.book-two{background:#b79ce4;transform:translateY(-13px);color:#352344}.book-three{background:#ffbf35;transform:rotate(9deg);color:#493209}.progress-demo{display:block;height:208px;margin:19px 0 44px;padding:21px;border-radius:15px;background:#fffefa;box-shadow:0 5px 0 #17374708;position:relative}.demo-label{font-size:14px;font-weight:800;letter-spacing:1.2px;color:var(--muted)}.page-count{font-family:Fredoka;font-size:40px;line-height:1.5}.page-count>span:not(#demo-pages){font-family:Manrope;font-size:14px;color:var(--muted)}.progress-track{height:10px;background:#d4ecf0;border-radius:10px;margin:2px 0 14px;overflow:hidden}.progress-track>span{display:block;width:59%;height:100%;background:#007e97;border-radius:10px}.demo-footer{font-size:14px;display:flex;justify-content:space-between;align-items:center}.demo-check{background:#e4eedc;border-radius:50%;padding:0 6px;color:var(--teal)}.example-label{position:absolute;bottom:-23px;right:0;font-size:14px;color:var(--muted)}.quote-demo{display:block;padding:0 7px}.quote-mark{font-family:Georgia;font-size:72px;color:#78431c;line-height:1}.quote-demo blockquote{margin:-5px 0 17px;font-family:Georgia,serif;font-style:italic;font-size:20px;line-height:1.5}.quote-author{font-size:12px;letter-spacing:.5px;font-weight:750;color:var(--muted)}.ownership{display:grid;grid-template-columns:.9fr 1fr;align-items:center;gap:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:55px 40px}.ownership-art{background:#ffc94b;border-radius:50%;width:330px;height:330px;margin:auto}.ownership-art img{width:320px;transform:translateY(5px)}.ownership h2{font-size:49px;margin:17px 0 22px}.ownership p{color:var(--muted);font-size:17px;max-width:460px}.check-list{padding:0;list-style:none;font-size:14px}.check-list li{padding:7px 0;display:flex;gap:11px}.check-list li::before{content:'✓';color:var(--teal);font-weight:800}.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:880px;margin:auto}.plan{padding:32px;border-radius:22px;border:1px solid #b9d2d8}.free-plan{background:#ffffff}.pro-plan{background:#173d52;border-color:#173d52}.plan-label{font-size:14px;letter-spacing:1.5px;font-weight:800}.plan-label>span{float:right;font-size:24px;line-height:1}.plan h3{font-size:33px;margin:20px 0}.price{font-family:Fredoka;font-size:32px;line-height:1.5;display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:14px}.price>span{font-family:Manrope;font-size:14px;color:var(--muted)}.price .price-or{padding:0 3px}.plan p{font-size:16px;color:var(--muted);margin-bottom:20px}.plan-rule{height:1px;background:#17374720;margin:20px 0}.plan .plan-bottom{font-size:14px;margin-bottom:0;font-weight:700}.pricing-note{text-align:center;font-size:14px;color:var(--muted);max-width:720px;margin:22px auto 0}.download-section{background:#20c5d9;overflow:hidden}.download-inner{text-align:center;padding:74px 0;position:relative}.download-inner h2{font-size:55px;margin:20px 0}.download-inner p{font-size:15px;color:#173747}.download-inner .store-buttons{justify-content:center;margin-top:30px}.download-inner .platform-note{font-size:14px;margin-top:18px}.store-glyph{font-size:27px}.download-star{position:absolute;right:65px;top:66px;font-size:85px;color:#00768b;transform:rotate(8deg)}.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:30px;padding-bottom:30px}.footer .brand{font-size:30px}.footer>p{font-size:14px;color:var(--muted);margin:0}.footer>div{display:flex;align-items:center;gap:23px;font-size:14px;color:var(--muted)}.footer a:hover{text-decoration:underline}
@media(min-width:900px){.plan{display:flex;flex-direction:column}.plan-rule{margin-top:auto}.plan p{min-height:65px}.plan .plan-bottom{min-height:0}}@media(max-width:1050px){.wrap{width:calc(100% - 48px)}.hero{gap:20px}.hero-art{min-height:400px}.art-orbit{width:350px;height:350px}.hero-mascot{width:350px}.floating-note{padding:10px;font-size:14px}.note-bottom{left:0}.note-top{right:0}.feature-card{padding:20px}.book{width:70px}.ownership{gap:30px;padding:50px 0}.download-star{right:15px;font-size:60px}.price{font-size:29px}}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:84px}.brand{font-size:32px}.brand img{width:36px;height:36px}nav{gap:18px;font-size:14px}nav>a:not(.nav-cta){display:none}.nav-cta{padding:11px 17px;gap:16px}.hero{grid-template-columns:1fr;text-align:center;padding-top:46px;padding-bottom:50px;gap:30px}.eyebrow{font-size:14px;letter-spacing:1.5px}h1{font-size:clamp(43px,9vw,63px);margin-top:20px}.hero-description{margin:30px auto 25px;font-size:17px;max-width:460px}.hero .store-buttons{justify-content:center}.hero-art{width:min(440px,100%);min-height:390px;margin:auto}.hero-mascot{width:350px}.art-orbit{width:340px;height:340px}.note-top{top:10px}.note-bottom{bottom:20px}.star-one{left:12px;font-size:35px}.star-two{right:5px;font-size:45px}.mascot-caption{bottom:-13px;right:45px}.values{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;text-align:center;font-size:14px;padding-top:20px;padding-bottom:20px}.section{padding-top:60px;padding-bottom:55px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:35px}.section-heading p{font-size:14px}.feature-grid{grid-template-columns:1fr;max-width:480px;margin:auto;gap:16px}.feature-card{padding:25px}.feature-visual{height:220px}.progress-demo{height:208px;margin:15px 0 37px}.book{width:90px}.quote-demo{padding-left:25px}.quote-demo blockquote{font-size:23px}.ownership{grid-template-columns:1fr;gap:30px;padding:45px 0;text-align:center}.ownership-art{width:250px;height:250px}.ownership-art img{width:250px}.ownership h2{font-size:40px}.ownership p{margin:0 auto 20px}.check-list{display:inline-block;text-align:left}.pricing-grid{grid-template-columns:1fr;max-width:480px}.plan{padding:28px}.plan h3{font-size:32px}.price{font-size:32px}.download-inner{padding:60px 0}.download-inner h2{font-size:39px}.download-inner>p{font-size:14px}.download-star{font-size:34px;top:20px;right:5px}.footer{flex-wrap:wrap;justify-content:center;text-align:center;gap:15px;padding-top:25px;padding-bottom:25px}.footer>p{width:100%}.footer>div{justify-content:center;flex-wrap:wrap}.store-button{min-width:156px;padding:10px 14px}.store-button strong{font-size:17px}}
@media(max-width:370px){.wrap{width:calc(100% - 28px)}h1{font-size:40px}.store-buttons{gap:8px}.store-button{min-width:142px;padding:10px;gap:8px}.store-button strong{font-size:16px}.hero-art{min-height:330px}.hero-mascot{width:300px}.art-orbit{width:285px;height:285px}.floating-note{font-size:14px}.values{font-size:14px}.book{width:75px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* Readable details and small, purposeful moments of play. */
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 6px; }
.eyebrow { letter-spacing: 1.1px; line-height: 1.5; }
.feature-number { letter-spacing: .6px; font-size: 13px; }
.feature-card, .plan { transition: transform .25s ease, box-shadow .25s ease; }
.nav-cta { transition: background .2s, transform .2s; }
.nav-cta span { transition: transform .2s; }
.nav-cta:hover { background: var(--teal); transform: translateY(-2px); }
.nav-cta:hover span { transform: translate(3px, -3px); }
.nav-cta:active, .store-button[href]:active { transform: translateY(1px) scale(.97); }
.brand img { transition: transform .3s; }
.brand:hover img { transform: rotate(-9deg); }
.mascot-button { position: relative; display: block; width: min(425px, 100%); padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 45%; transition: transform .3s; touch-action: manipulation; }
.mascot-button .hero-mascot { display: block; width: 100%; }
.mascot-button:hover { transform: translateY(-7px) rotate(-2deg); }
.mascot-button:active { transform: scale(.96); }
.mascot-button.is-waving { animation: otter-wiggle .65s ease-in-out; }
.floating-note { pointer-events: none; max-width: 240px; }
.note-top { font-size: 14px; }
.hero-art { isolation: isolate; }
.art-orbit { z-index: -1; }
.hero-copy { animation: hello-page .7s ease-out both; }
.hero-art .star { animation: hello-star .9s ease-out both; }
.hero-art .star-two { animation-delay: .15s; }
.highlight path { stroke-dasharray: 610; stroke-dashoffset: 610; animation: underline-in .9s .35s ease-out forwards; }
.progress-demo { min-height: 208px; }
.progress-button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: #ffce36; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s; }
.progress-button:hover { background: #ffbb18; transform: translateY(-2px); }
.progress-button:active { transform: scale(.94); }
.progress-button.is-cheering { animation: little-pop .35s ease-out; }
.progress-track > span { transition: width .45s cubic-bezier(.2,.8,.2,1); }
.demo-footer { gap: 8px; }
.demo-label { font-size: 13px; letter-spacing: .6px; }
.example-label { font-size: 13px; bottom: -28px; }
.book { transition: transform .3s; }
.library-card:hover .book-one { transform: rotate(-13deg) translateY(-8px); }
.library-card:hover .book-two { transform: translateY(-23px); }
.library-card:hover .book-three { transform: rotate(13deg) translateY(-8px); }
.quote-demo { height: auto; min-height: 240px; }
.quote-author { display: block; line-height: 1.6; letter-spacing: .2px; }
.footer > div { font-size: 14px; }
.footer a:not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover, .plan:hover { transform: translateY(-5px); box-shadow: 0 12px 24px #1737470a; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready { opacity: 0; transform: translateY(18px); }
  .reveal-ready.is-visible { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
}
@keyframes hello-page { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hello-star { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes underline-in { to { stroke-dashoffset: 0; } }
@keyframes otter-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateY(-8px); } 65% { transform: rotate(5deg) translateY(-4px); } }
@keyframes little-pop { 50% { transform: scale(1.08); } }
@media (max-width: 1050px) { .mascot-button { width: min(350px, 100%); } .feature-grid { gap: 16px; } }
@media (min-width: 761px) and (max-width: 950px) { .feature-grid { grid-template-columns: 1fr; max-width: 520px; margin: auto; } .feature-card { padding: 28px; } .book { width: 90px; } }
@media (max-width: 760px) {
  .eyebrow { font-size: 13px; }
  .section-heading h2 { font-size: 38px; }
  .section-heading p { font-size: 16px; }
  .values { font-size: 14px; gap: 16px; }
  .floating-note { font-size: 14px; max-width: 220px; }
  .note-bottom { bottom: 15px; }
  .mascot-caption { font-size: 14px; right: 35px; }
  .store-button { min-width: 165px; }
  .store-button strong { font-size: 18px; }
  .store-button small { font-size: 12px; }
  .quote-demo { min-height: 210px; }
  .download-inner > p { font-size: 16px; }
  .ownership h2 { font-size: 38px; }
  .platform-note { font-size: 14px; }
}
@media (max-width: 370px) {
  .values { grid-template-columns: 1fr; }
  .mascot-button { width: min(285px, 100%); }
  .note-top { right: 0; top: 0; }
  .note-bottom { left: 0; }
  .floating-note { font-size: 12px; }
  .mascot-caption { right: 15px; }
  .book { width: 70px; }
  .feature-card { padding: 20px; }
  .progress-demo { padding: 16px; }
  .demo-footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .highlight path { stroke-dashoffset: 0; }
  .reveal-ready { opacity: 1; transform: none; }
  .mascot-button:hover, .feature-card:hover, .plan:hover { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .feature-card.is-visible:hover, .plan.is-visible:hover { transform: translateY(-5px); }
}

/* Use the app's More artwork as the site's content icon family. */
.illustrated-icon { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; vertical-align: middle; }
.eyebrow-icon { width: 34px; height: 34px; margin-right: 8px; }
.note-icon { width: 34px; height: 34px; }
.values > span { display: flex; align-items: center; gap: 10px; }
.values .illustrated-icon { width: 42px; height: 42px; }
.check-list li { align-items: center; gap: 12px; }
.check-list li::before { content: none; }
.check-list .illustrated-icon { width: 38px; height: 38px; }
@media (max-width: 1050px) { .values { gap: 14px; } .values > span { gap: 8px; } .values .illustrated-icon { width: 34px; height: 34px; } }
@media (max-width: 760px) { .values { text-align: left; } .values > span { justify-content: flex-start; } .floating-note { padding: 8px 12px; gap: 8px; } }
@media (max-width: 370px) { .values { width: max-content; max-width: calc(100% - 28px); } .note-icon { width: 30px; height: 30px; } }


/* Brighter Kelpy palette: turquoise sea, golden books, deep blue ink. */
.feature-number, .quote-author, .quote-card .quote-mark, .progress-card .example-label { color: #264553; }
.feature-card { box-shadow: 0 4px 0 #1737470d; }
.free-plan { border: 2px solid #b9d2d8; }
.pro-plan { color: #fffdf6; border: 2px solid #173d52; }
.pro-plan p, .pro-plan .price > span { color: #d5edf3; }
.pro-plan .plan-label, .pro-plan .price { color: #ffda55; }
.pro-plan .plan-rule { background: #ffffff40; }
.download-section .eyebrow { color: #173747; }
.download-section .platform-note { color: #264553; }
.floating-note { box-shadow: 0 5px 0 #1737470c; }
.progress-button { color: #173747; }
::selection { background: #ffda55; color: #173747; }

/* One-time arrivals and a tiny celebration confined to the demo card. */
@media (prefers-reduced-motion: no-preference) {
  .values.motion-ready > span, .book-shelf.motion-ready > .book { opacity: 0; }
  .values.motion-entered > span { animation: icon-arrival .55s cubic-bezier(.2,.8,.2,1) both; }
  .values.motion-entered > span:nth-child(2) { animation-delay: .09s; }
  .values.motion-entered > span:nth-child(3) { animation-delay: .18s; }
  .values.motion-entered > span:nth-child(4) { animation-delay: .27s; }
  .book-shelf.motion-entered > .book { animation: shelf-arrival .55s cubic-bezier(.2,.8,.2,1) both; }
  .book-shelf.motion-entered > .book:nth-child(2) { animation-delay: .13s; }
  .book-shelf.motion-entered > .book:nth-child(3) { animation-delay: .26s; }
  .values > span:hover .illustrated-icon { transform: rotate(-8deg) translateY(-3px); }
  .values .illustrated-icon { transition: transform .22s ease; }
}
@keyframes icon-arrival { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes shelf-arrival { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
#demo-pages { display: inline-block; min-width: 3ch; font-variant-numeric: tabular-nums; }
.book-confetti { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.book-confetti > span { position: absolute; top: 48%; left: 50%; width: 8px; height: 12px; border-radius: 2px; background: #ffc629; animation: book-burst .85s var(--delay) ease-out both; }
.book-confetti > span:nth-child(3n) { background: #18c5de; }
.book-confetti > span:nth-child(3n + 1) { background: #ee8054; }
.book-confetti > span:nth-child(even) { width: 7px; height: 7px; border-radius: 50%; }
@keyframes book-burst {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--spin)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .values.motion-ready > span, .book-shelf.motion-ready > .book { opacity: 1; translate: none; }
  .book-confetti { display: none; }
}

/* Ambient motion runs on its own, with gentle offsets and a global pause. */
@media (prefers-reduced-motion: no-preference) {
  .hero-mascot { animation: otter-float 4.8s ease-in-out infinite; }
  .floating-note { animation: note-float 5.5s ease-in-out infinite; }
  .note-bottom { animation-delay: -2s; }
  .hero-art .star { animation: star-breathe 4.4s ease-in-out infinite; }
  .hero-art .star-two { animation-delay: -2.2s; }
  .values .illustrated-icon { animation: icon-idle 5s ease-in-out infinite; }
  .values > span:nth-child(2) .illustrated-icon { animation-delay: -1.25s; }
  .values > span:nth-child(3) .illustrated-icon { animation-delay: -2.5s; }
  .values > span:nth-child(4) .illustrated-icon { animation-delay: -3.75s; }
  .book-shelf.motion-entered > .book { animation: shelf-arrival .55s ease-out both, book-idle 5.4s 1s ease-in-out infinite; }
  .book-shelf.motion-entered > .book:nth-child(2) { animation-delay: .13s, 2.8s; }
  .book-shelf.motion-entered > .book:nth-child(3) { animation-delay: .26s, 4.6s; }
}
@keyframes otter-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes note-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes star-breathe { 0%,100% { scale: .94; rotate: -4deg; } 50% { scale: 1.06; rotate: 5deg; } }
@keyframes icon-idle { 0%,65%,100% { translate: 0 0; rotate: 0deg; } 76% { translate: 0 -4px; rotate: -7deg; } 88% { translate: 0 -2px; rotate: 4deg; } }
@keyframes book-idle { 0%,60%,100% { translate: 0 0; } 78% { translate: 0 -7px; } }
.motion-background *, .motion-background *::before, .motion-background *::after { animation-play-state: paused !important; }


/* The same 64 contour points interpolate smoothly through each shape. */
.pro-sparkle { display: block; width: 38px; height: 38px; position: relative; top: -7px; transform-origin: center; }
.pro-morph { display: block; width: 100%; height: 100%; background: #ffda55; clip-path: polygon(50.00% 4.00%, 54.26% 6.75%, 57.17% 13.94%, 58.20% 22.97%, 57.85% 31.06%, 57.18% 36.56%, 57.07% 39.42%, 57.64% 40.69%, 58.49% 41.51%, 59.31% 42.36%, 60.58% 42.93%, 63.44% 42.82%, 68.94% 42.15%, 77.03% 41.80%, 86.06% 42.83%, 93.25% 45.74%, 96.00% 50.00%, 93.25% 54.26%, 86.06% 57.17%, 77.03% 58.20%, 68.94% 57.85%, 63.44% 57.18%, 60.58% 57.07%, 59.31% 57.64%, 58.49% 58.49%, 57.64% 59.31%, 57.07% 60.58%, 57.18% 63.44%, 57.85% 68.94%, 58.20% 77.03%, 57.17% 86.06%, 54.26% 93.25%, 50.00% 96.00%, 45.74% 93.25%, 42.83% 86.06%, 41.80% 77.03%, 42.15% 68.94%, 42.82% 63.44%, 42.93% 60.58%, 42.36% 59.31%, 41.51% 58.49%, 40.69% 57.64%, 39.42% 57.07%, 36.56% 57.18%, 31.06% 57.85%, 22.97% 58.20%, 13.94% 57.17%, 6.75% 54.26%, 4.00% 50.00%, 6.75% 45.74%, 13.94% 42.83%, 22.97% 41.80%, 31.06% 42.15%, 36.56% 42.82%, 39.42% 42.93%, 40.69% 42.36%, 41.51% 41.51%, 42.36% 40.69%, 42.93% 39.42%, 42.82% 36.56%, 42.15% 31.06%, 41.80% 22.97%, 42.83% 13.94%, 45.74% 6.75%); }
@media (prefers-reduced-motion: no-preference) {
  .pro-sparkle { animation: pro-orbit 9.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .pro-morph { animation: pro-shape 9.6s cubic-bezier(.65, 0, .35, 1) infinite; }
}
@keyframes pro-orbit {
  0% { transform: rotate(0deg) scale(.96); }
  25% { transform: rotate(90deg) scale(1.04); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(.9); }
  100% { transform: rotate(360deg) scale(.96); }
}
@keyframes pro-shape {
  0% { clip-path: polygon(50.00% 4.00%, 54.26% 6.75%, 57.17% 13.94%, 58.20% 22.97%, 57.85% 31.06%, 57.18% 36.56%, 57.07% 39.42%, 57.64% 40.69%, 58.49% 41.51%, 59.31% 42.36%, 60.58% 42.93%, 63.44% 42.82%, 68.94% 42.15%, 77.03% 41.80%, 86.06% 42.83%, 93.25% 45.74%, 96.00% 50.00%, 93.25% 54.26%, 86.06% 57.17%, 77.03% 58.20%, 68.94% 57.85%, 63.44% 57.18%, 60.58% 57.07%, 59.31% 57.64%, 58.49% 58.49%, 57.64% 59.31%, 57.07% 60.58%, 57.18% 63.44%, 57.85% 68.94%, 58.20% 77.03%, 57.17% 86.06%, 54.26% 93.25%, 50.00% 96.00%, 45.74% 93.25%, 42.83% 86.06%, 41.80% 77.03%, 42.15% 68.94%, 42.82% 63.44%, 42.93% 60.58%, 42.36% 59.31%, 41.51% 58.49%, 40.69% 57.64%, 39.42% 57.07%, 36.56% 57.18%, 31.06% 57.85%, 22.97% 58.20%, 13.94% 57.17%, 6.75% 54.26%, 4.00% 50.00%, 6.75% 45.74%, 13.94% 42.83%, 22.97% 41.80%, 31.06% 42.15%, 36.56% 42.82%, 39.42% 42.93%, 40.69% 42.36%, 41.51% 41.51%, 42.36% 40.69%, 42.93% 39.42%, 42.82% 36.56%, 42.15% 31.06%, 41.80% 22.97%, 42.83% 13.94%, 45.74% 6.75%); }
  25% { clip-path: polygon(50.00% 5.00%, 54.24% 6.97%, 57.61% 11.75%, 60.09% 16.74%, 62.63% 19.51%, 66.38% 19.35%, 71.67% 17.57%, 77.43% 16.57%, 81.82% 18.18%, 83.43% 22.57%, 82.43% 28.33%, 80.65% 33.62%, 80.49% 37.37%, 83.26% 39.91%, 88.25% 42.39%, 93.03% 45.76%, 95.00% 50.00%, 93.03% 54.24%, 88.25% 57.61%, 83.26% 60.09%, 80.49% 62.63%, 80.65% 66.38%, 82.43% 71.67%, 83.43% 77.43%, 81.82% 81.82%, 77.43% 83.43%, 71.67% 82.43%, 66.38% 80.65%, 62.63% 80.49%, 60.09% 83.26%, 57.61% 88.25%, 54.24% 93.03%, 50.00% 95.00%, 45.76% 93.03%, 42.39% 88.25%, 39.91% 83.26%, 37.37% 80.49%, 33.62% 80.65%, 28.33% 82.43%, 22.57% 83.43%, 18.18% 81.82%, 16.57% 77.43%, 17.57% 71.67%, 19.35% 66.38%, 19.51% 62.63%, 16.74% 60.09%, 11.75% 57.61%, 6.97% 54.24%, 5.00% 50.00%, 6.97% 45.76%, 11.75% 42.39%, 16.74% 39.91%, 19.51% 37.37%, 19.35% 33.62%, 17.57% 28.33%, 16.57% 22.57%, 18.18% 18.18%, 22.57% 16.57%, 28.33% 17.57%, 33.62% 19.35%, 37.37% 19.51%, 39.91% 16.74%, 42.39% 11.75%, 45.76% 6.97%); }
  50% { clip-path: polygon(50.00% 7.00%, 61.18% 7.12%, 66.66% 7.48%, 70.98% 8.08%, 74.63% 8.93%, 77.80% 10.02%, 80.58% 11.37%, 83.02% 12.96%, 85.17% 14.83%, 87.04% 16.98%, 88.63% 19.42%, 89.98% 22.20%, 91.07% 25.37%, 91.92% 29.02%, 92.52% 33.34%, 92.88% 38.82%, 93.00% 50.00%, 92.88% 61.18%, 92.52% 66.66%, 91.92% 70.98%, 91.07% 74.63%, 89.98% 77.80%, 88.63% 80.58%, 87.04% 83.02%, 85.17% 85.17%, 83.02% 87.04%, 80.58% 88.63%, 77.80% 89.98%, 74.63% 91.07%, 70.98% 91.92%, 66.66% 92.52%, 61.18% 92.88%, 50.00% 93.00%, 38.82% 92.88%, 33.34% 92.52%, 29.02% 91.92%, 25.37% 91.07%, 22.20% 89.98%, 19.42% 88.63%, 16.98% 87.04%, 14.83% 85.17%, 12.96% 83.02%, 11.37% 80.58%, 10.02% 77.80%, 8.93% 74.63%, 8.08% 70.98%, 7.48% 66.66%, 7.12% 61.18%, 7.00% 50.00%, 7.12% 38.82%, 7.48% 33.34%, 8.08% 29.02%, 8.93% 25.37%, 10.02% 22.20%, 11.37% 19.42%, 12.96% 16.98%, 14.83% 14.83%, 16.98% 12.96%, 19.42% 11.37%, 22.20% 10.02%, 25.37% 8.93%, 29.02% 8.08%, 33.34% 7.48%, 38.82% 7.12%); }
  75% { clip-path: polygon(50.00% 10.00%, 53.92% 10.19%, 57.80% 10.77%, 61.61% 11.72%, 65.31% 13.04%, 68.86% 14.72%, 72.22% 16.74%, 75.38% 19.08%, 78.28% 21.72%, 80.92% 24.62%, 83.26% 27.78%, 85.28% 31.14%, 86.96% 34.69%, 88.28% 38.39%, 89.23% 42.20%, 89.81% 46.08%, 90.00% 50.00%, 89.81% 53.92%, 89.23% 57.80%, 88.28% 61.61%, 86.96% 65.31%, 85.28% 68.86%, 83.26% 72.22%, 80.92% 75.38%, 78.28% 78.28%, 75.38% 80.92%, 72.22% 83.26%, 68.86% 85.28%, 65.31% 86.96%, 61.61% 88.28%, 57.80% 89.23%, 53.92% 89.81%, 50.00% 90.00%, 46.08% 89.81%, 42.20% 89.23%, 38.39% 88.28%, 34.69% 86.96%, 31.14% 85.28%, 27.78% 83.26%, 24.62% 80.92%, 21.72% 78.28%, 19.08% 75.38%, 16.74% 72.22%, 14.72% 68.86%, 13.04% 65.31%, 11.72% 61.61%, 10.77% 57.80%, 10.19% 53.92%, 10.00% 50.00%, 10.19% 46.08%, 10.77% 42.20%, 11.72% 38.39%, 13.04% 34.69%, 14.72% 31.14%, 16.74% 27.78%, 19.08% 24.62%, 21.72% 21.72%, 24.62% 19.08%, 27.78% 16.74%, 31.14% 14.72%, 34.69% 13.04%, 38.39% 11.72%, 42.20% 10.77%, 46.08% 10.19%); }
  100% { clip-path: polygon(50.00% 4.00%, 54.26% 6.75%, 57.17% 13.94%, 58.20% 22.97%, 57.85% 31.06%, 57.18% 36.56%, 57.07% 39.42%, 57.64% 40.69%, 58.49% 41.51%, 59.31% 42.36%, 60.58% 42.93%, 63.44% 42.82%, 68.94% 42.15%, 77.03% 41.80%, 86.06% 42.83%, 93.25% 45.74%, 96.00% 50.00%, 93.25% 54.26%, 86.06% 57.17%, 77.03% 58.20%, 68.94% 57.85%, 63.44% 57.18%, 60.58% 57.07%, 59.31% 57.64%, 58.49% 58.49%, 57.64% 59.31%, 57.07% 60.58%, 57.18% 63.44%, 57.85% 68.94%, 58.20% 77.03%, 57.17% 86.06%, 54.26% 93.25%, 50.00% 96.00%, 45.74% 93.25%, 42.83% 86.06%, 41.80% 77.03%, 42.15% 68.94%, 42.82% 63.44%, 42.93% 60.58%, 42.36% 59.31%, 41.51% 58.49%, 40.69% 57.64%, 39.42% 57.07%, 36.56% 57.18%, 31.06% 57.85%, 22.97% 58.20%, 13.94% 57.17%, 6.75% 54.26%, 4.00% 50.00%, 6.75% 45.74%, 13.94% 42.83%, 22.97% 41.80%, 31.06% 42.15%, 36.56% 42.82%, 39.42% 42.93%, 40.69% 42.36%, 41.51% 41.51%, 42.36% 40.69%, 42.93% 39.42%, 42.82% 36.56%, 42.15% 31.06%, 41.80% 22.97%, 42.83% 13.94%, 45.74% 6.75%); }
}

/* Each edition keeps its native portrait ratio at every breakpoint. */
.book-shelf { gap: 10px; width: 100%; }
.book-shelf > .book { position: relative; display: block; flex: 0 0 calc((100% - 28px) / 3); width: auto; max-width: 104px; height: auto; aspect-ratio: var(--cover-ratio, 2 / 3); padding: 0; border-radius: 2px 4px 4px 2px; overflow: hidden; box-shadow: 3px 5px 0 #17374714; }
.book-shelf > .book img { display: block; width: 100%; height: 100%; object-fit: contain; }
.book-shelf > .book::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #00000016, #ffffff28 3%, transparent 8%); border: 1px solid #1737470c; border-radius: inherit; }
.book-shelf > .book-one { transform: rotate(-7deg); background: #f8f4e6; }
.book-shelf > .book-two { transform: translateY(-12px); background: #202b4b; }
.book-shelf > .book-three { transform: rotate(7deg); background: #dce1d3; }
.library-card:hover .book-shelf > .book-one { transform: rotate(-9deg) translateY(-5px); }
.library-card:hover .book-shelf > .book-two { transform: translateY(-18px); }
.library-card:hover .book-shelf > .book-three { transform: rotate(9deg) translateY(-5px); }