:root{--sun:#FDE811;--sun-deep:#F2D600;--ink:#16264A;--paper:#FFFFFF;--cream:#FFF9E6;--orange:#E84E1B;--green:#228B40;--blue:#1E6EC8;--pink:#D6285A;--amber:#F5A000;--muted:#6B5744;--line:3px solid var(--ink);--display:"Fredoka","Nunito",system-ui,sans-serif;--body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2.25rem,5.5vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.4rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.center{text-align:center}
.small{font-size:.95rem;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:6px}
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:600 1.25rem/1.1 var(--display)}
.compass{width:38px;height:38px;color:var(--ink);flex:none}
.logo img{height:44px;width:auto;display:block}
.nav{display:flex;gap:4px}
.nav a{color:var(--ink);text-decoration:none;font:500 1.05rem var(--display);padding:10px 14px;border-radius:999px;min-height:48px;display:flex;align-items:center}
.nav a:hover{background:var(--cream)}
.nav a[aria-current="page"]{background:var(--sun);box-shadow:inset 0 0 0 2px var(--ink)}
@media (max-width:760px){.header-inner{flex-direction:column;align-items:stretch;gap:4px;padding-top:10px;padding-bottom:8px}.logo{font-size:1.1rem}.nav{overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 16px}.nav::-webkit-scrollbar{display:none}.nav a{white-space:nowrap;padding:8px 12px}}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border:var(--line);border-radius:999px;font:600 1.1rem/1.2 var(--display);text-align:center;text-decoration:none;color:var(--ink);background:var(--paper);cursor:pointer;transition:background-color .15s}
.btn-buy{background:var(--sun)}
.btn-buy:hover{background:var(--sun-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#24406e}
.btn-alt:hover{background:var(--cream)}
.btn-block{width:100%}
.hero{background:var(--sun);border-bottom:var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-top:64px;padding-bottom:72px}
.paint{font-size:clamp(2.6rem,6.4vw,4.9rem);font-weight:700;line-height:1.04;letter-spacing:.005em;margin-bottom:.4em}
.paint .word{display:inline-block;white-space:nowrap}
.paint span span{color:transparent;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;animation:fill .45s ease-out forwards;animation-delay:calc(.25s + var(--i) * 45ms)}
@keyframes fill{to{color:var(--c)}}
@media (prefers-reduced-motion:reduce){.paint span span{animation:none;color:var(--c)}}
.lead{font-size:1.3rem;max-width:34em}
.hero-art{position:relative;justify-self:center;width:min(100%,400px)}
.sheet{position:absolute;inset:6% -6% -4% 8%;background:var(--paper);border:var(--line);border-radius:10px;transform:rotate(4deg)}
.hero-cover{position:relative;border:var(--line);border-radius:10px;transform:rotate(-3deg)}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px;padding-bottom:56px}.hero-art{width:min(78%,340px)}}
.band{padding:72px 0}
.band-lined{background:var(--cream);border-top:var(--line);border-bottom:var(--line)}
.section-lead{color:var(--muted);max-width:40em;margin-bottom:32px}
.series{font:500 1rem var(--display);color:var(--muted);margin-bottom:.4em}
.featured{display:grid;grid-template-columns:320px minmax(0,1fr);gap:56px;align-items:center}
.featured-cover img{border:var(--line);border-radius:10px}
.ticks{list-style:none;padding:0;margin:0 0 28px}
.ticks li{position:relative;padding-left:40px;margin-bottom:12px}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:var(--sun)}
.ticks li:nth-child(3n+2)::before{background:#8FD19E}
.ticks li:nth-child(3n)::before{background:#9CC4F2}
.ticks.big li{font-size:1.2rem}
@media (max-width:760px){.featured{grid-template-columns:minmax(0,1fr);gap:28px}.featured-cover{max-width:260px}}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
.why-item{padding:8px 32px;border-left:3px dashed #CDBFA9}
.why-item:first-child{border-left:0;padding-left:0}
.why-icon svg{width:64px;height:64px;margin-bottom:16px}
@media (max-width:860px){.why{grid-template-columns:minmax(0,1fr);gap:28px}.why-item{border-left:0;padding:0}}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:980px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.book-grid{grid-template-columns:minmax(0,1fr)}}
.book-card{display:flex;flex-direction:column;border:var(--line);border-radius:18px;background:var(--paper);overflow:hidden}
.book-card[hidden]{display:none}
.book-cover{position:relative;background:var(--sun);border-bottom:var(--line);aspect-ratio:3/3.2;display:flex;align-items:center;justify-content:center;padding:24px}
.book-cover img{max-height:100%;width:auto;border:var(--line);border-radius:6px;transform:rotate(-2deg)}
.is-soon .book-cover{background:repeating-linear-gradient(135deg,var(--cream) 0 14px,#FFF3C8 14px 28px)}
.cover-soon{width:62%;aspect-ratio:3/4;border:3px dashed var(--ink);border-radius:8px;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:12px;text-align:center}
.outline-word{font:700 1.6rem/1.1 var(--display);color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.ribbon{position:absolute;top:14px;right:14px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font:600 .95rem var(--display)}
.book-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.book-body h3{margin-bottom:.35em}
.book-desc{color:var(--muted);flex:1}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.badge{border:2px solid var(--ink);border-radius:999px;padding:2px 12px;font:600 .95rem var(--display);background:var(--cream)}
.book-card .actions .btn{flex:1 1 auto;padding:12px 18px;font-size:1rem}
.soon-note{margin:0;font:500 1rem var(--display);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{min-height:48px;padding:8px 18px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:600 1.02rem var(--display);cursor:pointer}
.chip:hover{background:var(--cream)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding:4px 20px 8px;margin:0 -20px 16px;scrollbar-width:none}
.chips.scroll::-webkit-scrollbar{display:none}
.chips.scroll .chip{flex:none}
.page-head{background:var(--sun);border-bottom:var(--line);padding:56px 0 48px}
.page-head .lead{margin-bottom:.6em}
.guide-head .btn{margin-top:12px}
.lost{padding:96px 0}
.detail-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:start}
.gallery-main{background:var(--sun);border:var(--line);border-radius:18px;padding:28px;display:flex;justify-content:center}
.gallery-main img{border:var(--line);border-radius:6px;background:#fff;max-height:560px;width:auto;max-width:100%;object-fit:contain}
.thumbs{display:flex;gap:10px;margin-top:14px;overflow-x:auto;padding:4px 2px 8px}
.thumb{flex:none;width:78px;padding:4px;border:2.5px solid #CDBFA9;border-radius:10px;background:#fff;cursor:pointer}
.thumb[aria-current="true"]{border-color:var(--ink);background:var(--sun)}
.thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.price-note{color:var(--muted)}
.meet-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.meet{color:var(--ink);text-decoration:none;font:600 1.05rem var(--display);text-align:center}
.meet img{border:var(--line);border-radius:12px;margin-bottom:8px;background:#fff}
.meet:hover span{text-decoration:underline}
.specs{margin:0}
.specs div{display:grid;grid-template-columns:140px minmax(0,1fr);padding:12px 0;border-bottom:2px dashed #CDBFA9}
.specs dt{font:600 1.05rem var(--display)}
.specs dd{margin:0}
.buy-bar{display:none}
@media (max-width:860px){.detail-grid{grid-template-columns:minmax(0,1fr);gap:32px}.meet-row{grid-template-columns:repeat(3,minmax(0,1fr))}.buy-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:var(--line)}body:has(.buy-bar) .site-footer{padding-bottom:96px}}
.tap-hint{color:var(--muted);margin-bottom:16px}
.animal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media (max-width:1000px){.animal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:520px){.animal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.animal[hidden]{display:none}
.animal-btn{width:100%;padding:0;border:var(--line);border-radius:16px;background:#fff;cursor:pointer;overflow:hidden;text-align:left;color:var(--ink);font:inherit;display:flex;flex-direction:column;scroll-margin-top:160px}
.animal-btn:hover .name{text-decoration:underline}
.animal-btn img{width:100%;aspect-ratio:3/4;object-fit:cover}
.animal-meta{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:var(--line);background:var(--cream);min-height:58px}
.num{flex:none;width:32px;height:32px;border:2.5px solid var(--ink);border-radius:50%;background:var(--sun);display:flex;align-items:center;justify-content:center;font:600 .95rem var(--display)}
.name{font:600 1.05rem/1.15 var(--display);overflow-wrap:anywhere;hyphens:auto;min-width:0}
@media (max-width:520px){.name{font-size:.98rem}.animal-meta{gap:8px;padding:8px 10px}.num{width:28px;height:28px;font-size:.85rem}}
.grownups{text-align:center;max-width:640px}
.viewer{width:min(96vw,760px);max-height:96vh;padding:0;border:var(--line);border-radius:20px;background:var(--paper);color:var(--ink)}
.viewer::backdrop{background:rgba(58,38,20,.72)}
.viewer[open]{display:flex;flex-direction:column}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-bottom:var(--line);background:var(--sun)}
.viewer-title{margin:0;font:600 1.3rem var(--display)}
.viewer-num{display:inline-flex;width:36px;height:36px;border:2.5px solid var(--ink);border-radius:50%;background:#fff;align-items:center;justify-content:center;font-size:1rem;margin-right:6px}
.viewer-close{width:52px;height:52px;border:var(--line);border-radius:50%;background:#fff;font:700 1.3rem var(--display);color:var(--ink);cursor:pointer}
.viewer-stage{flex:1;min-height:0;display:flex;justify-content:center;padding:12px;touch-action:pinch-zoom;overflow:auto}
.viewer-img{max-height:calc(96vh - 190px);width:auto;object-fit:contain}
.viewer-nav{display:flex;gap:12px;padding:12px;border-top:var(--line)}
.viewer-nav .btn{flex:1}
.cta-band{background:var(--sun);border-top:var(--line);padding:56px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-inner h2{margin:0}
.site-footer{border-top:var(--line);padding:40px 0 28px;background:var(--paper)}
.footer-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.footer-brand{display:flex;align-items:center;gap:10px;font:600 1.15rem var(--display);margin-bottom:6px}
.footer-brand img{height:40px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer-links a{color:var(--ink);font:500 1.05rem var(--display);min-height:44px;display:inline-flex;align-items:center}
.legal p{margin:0 0 4px}
.prose h2{margin-top:1.4em}
.shelf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.shelf-item{display:block;color:var(--ink);text-decoration:none}
.shelf-cover{aspect-ratio:3/4;border:var(--line);border-radius:12px;background:var(--sun);display:flex;align-items:center;justify-content:center;padding:14px;margin-bottom:12px}
.shelf-cover img{max-height:100%;width:auto;border:2px solid var(--ink);border-radius:4px;transform:rotate(-2deg)}
.shelf-item.is-soon .shelf-cover{background:repeating-linear-gradient(135deg,var(--cream) 0 14px,#FFF3C8 14px 28px)}
.shelf-item .cover-soon{width:78%}
.shelf-item .outline-word{font-size:1.25rem;-webkit-text-stroke:1.3px var(--ink)}
.shelf-item .series{margin:0;font-size:.95rem}
.shelf-title{margin:0;font:600 1.15rem/1.2 var(--display)}
.shelf-status{margin:2px 0 0;color:var(--muted);font-size:.95rem}
a.shelf-item:hover .shelf-title{text-decoration:underline}
a.shelf-item .shelf-status{color:var(--green);font-weight:700}
@media (max-width:860px){.shelf{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}.shelf-item{scroll-snap-align:start}}