/* Fonts are self-hosted (no requests to Google). Files: /fonts, SIL Open Font License. */
@font-face{font-family:"Baloo 2";src:url("../fonts/baloo-2-latin-wght-normal.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Gaegu";src:url("../fonts/gaegu-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

/* Layout: a playroom table. Hero = a real page you can color on the spot, then a shelf of covers that tilt and open. */
:root{
  --bg:#F3F6FB; --bg-2:#E7EDF7; --card:#FFFFFF; --fg:#1C2240; --muted:#5A6283; --line:#D5DCEA;
  --paper:#FFFFFF; --paper-ink:#1C2240;
  --red:#EC4B3F; --yellow:#FFC22E; --blue:#2E7BE0; --green:#25A962; --purple:#8C5BE0; --pink:#F474A9;
  --accent:var(--blue); --accent-ink:#FFFFFF; --cta:#FFC22E; --cta-ink:#1C2240;
  --shadow:0 1px 0 rgba(28,34,64,.06),0 12px 30px -12px rgba(28,34,64,.28);
  --f-display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-hand:"Gaegu","Comic Sans MS","Chalkboard SE",cursive;
  --r:18px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121831; --bg-2:#19213F; --card:#1E2748; --fg:#EEF1FA; --muted:#A5AECB; --line:#2C3760;
  --accent:#5C9CF2; --shadow:0 1px 0 rgba(0,0,0,.3),0 16px 36px -14px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121831; --bg-2:#19213F; --card:#1E2748; --fg:#EEF1FA; --muted:#A5AECB; --line:#2C3760;
  --accent:#5C9CF2; --shadow:0 1px 0 rgba(0,0,0,.3),0 16px 36px -14px rgba(0,0,0,.7); color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:max(16px,4vw)}
h1,h2,h3{font-family:var(--f-display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.eyebrow{font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hand{font-family:var(--f-hand);font-size:1.35rem;line-height:1.1}

/* crayon stripe used as a divider */
.stripe{height:8px;background:linear-gradient(90deg,var(--red) 0 16.6%,var(--yellow) 0 33.3%,var(--green) 0 50%,var(--blue) 0 66.6%,var(--purple) 0 83.3%,var(--pink) 0)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.logo{white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:800;font-size:1.45rem}
.logo svg{width:38px;height:38px;flex:none}
.nav nav{display:flex;gap:22px;margin-left:auto;font-weight:700}
.nav nav a{text-decoration:none;color:var(--muted)}
.nav nav a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:800 1rem var(--f-body);padding:12px 20px;border-radius:999px;text-decoration:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--cta);color:var(--cta-ink);box-shadow:0 4px 0 #D99A00}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--line)}
.btn-blue{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.btn svg{width:18px;height:18px}
@media (max-width:760px){.nav nav{display:none}.nav .shop{display:none}.lang{margin-left:auto}}

/* hero */
.hero{padding-block:56px 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800}
.hero h1 .w{display:inline-block;animation:pop .7s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i)*90ms)}
.hero h1 .c1{color:var(--red)}.hero h1 .c2{color:var(--green)}.hero h1 .c3{color:var(--blue)}
@keyframes pop{from{transform:translateY(.4em) scale(.6) rotate(-6deg)}to{transform:none}}
.hero .lede{font-size:1.18rem;color:var(--muted);max-width:34ch;margin-top:20px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-weight:700;font-size:.95rem;color:var(--muted)}
.trust span{display:flex;align-items:center;gap:8px}
.trust i{width:10px;height:10px;border-radius:50%;display:inline-block}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:-1;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.15)}}

/* coloring board */
.board{position:relative;justify-self:center;width:100%;max-width:470px}
.sheet{position:relative;background:var(--paper);border-radius:6px;box-shadow:var(--shadow);transform:rotate(1.6deg);padding:14px;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.sheet:hover{transform:rotate(0)}
.sheet::before,.sheet::after{content:"";position:absolute;width:90px;height:28px;background:color-mix(in srgb,var(--yellow) 55%,transparent);top:-12px;transform:rotate(-8deg);left:18px}
.sheet::after{left:auto;right:18px;transform:rotate(7deg);background:color-mix(in srgb,var(--pink) 45%,transparent)}
#paint{display:block;width:100%;height:auto;aspect-ratio:3/4;max-width:100%;touch-action:manipulation;cursor:pointer}
.board-note{position:absolute;z-index:2;left:-92px;top:38%;transform:rotate(-8deg);color:var(--red);pointer-events:none;text-align:center}
.board-note svg{display:block;width:56px;height:40px;margin:2px 0 0 30px}
.tray{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:22px;align-items:flex-end}
.crayon{width:26px;height:64px;border:0;padding:0;cursor:pointer;background:none;transition:transform .2s cubic-bezier(.3,1.7,.5,1);transform:translateY(10px)}
.crayon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.crayon:hover{transform:translateY(2px)}
.crayon[aria-pressed="true"]{transform:translateY(-8px)}
.board-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.thumbs{display:flex;gap:8px}
.thumbs button{width:44px;height:58px;padding:3px;background:var(--paper);border:2px solid var(--line);border-radius:6px;cursor:pointer;transition:transform .2s}
.thumbs button img{width:100%;height:100%;object-fit:contain;display:block}
.thumbs button[aria-pressed="true"]{border-color:var(--accent);transform:translateY(-3px)}
.mini{background:none;border:0;cursor:pointer;font:800 .9rem var(--f-body);color:var(--muted);display:flex;align-items:center;gap:6px;padding:8px}
.mini:hover{color:var(--fg)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.board-note{display:none}.hero{padding-block:36px 56px}}

/* section heads */
section{padding-block:80px}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.head h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:800}
.head p{color:var(--muted);max-width:44ch}

/* shelf */
.shelf{background:var(--bg-2)}
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
@media (max-width:960px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.books{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}
.book{display:flex;flex-direction:column;gap:14px;min-width:0}
.cover-btn{position:relative;border:0;padding:0;background:none;cursor:pointer;perspective:900px;display:block;width:100%}
.cover-3d{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.cover-3d img.cv{position:relative;z-index:2;display:block;width:100%;aspect-ratio:1200/1566;object-fit:cover;border-radius:4px 10px 10px 4px;box-shadow:var(--shadow),inset 6px 0 8px -4px rgba(0,0,0,.2)}
.cover-3d::after{content:"";position:absolute;inset:0;z-index:3;border-radius:4px 10px 10px 4px;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.45),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.cover-3d .spine{position:absolute;z-index:4;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.18) 40%,transparent);border-radius:4px 0 0 4px;pointer-events:none}
.peek{position:absolute;z-index:1;top:4%;right:4%;width:86%;aspect-ratio:3/4;background:var(--paper);border-radius:4px;box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.3,1.4,.5,1);padding:6px}
.peek img{width:100%;height:100%;object-fit:contain}
.cover-btn:hover .peek,.cover-btn:focus-visible .peek{transform:translateX(30%) rotate(6deg)}
.cover-btn:hover .cover-3d::after{opacity:1}
.book h3{font-size:1.35rem;font-weight:800}
.book .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.price{font-family:var(--f-display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.tags{color:var(--muted);font-weight:700;font-size:.92rem}
.book .acts{display:flex;gap:10px;flex-wrap:wrap}
.book .acts .btn{padding:10px 16px;font-size:.92rem}
.soon{border:3px dashed var(--line);border-radius:var(--r);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px;min-height:320px;max-width:100%}
.soon h3{font-size:1.6rem}
.soon ul{margin:0;padding-left:1.1em;color:var(--muted);font-weight:700}

/* band */
.band{overflow:hidden;padding-block:40px;background:var(--bg)}
.band-track{display:flex;gap:26px;width:max-content;animation:scroll 60s linear infinite}
.band:hover .band-track{animation-play-state:paused}
.band-track figure{margin:0;width:150px;flex:none;background:var(--paper);padding:8px;border-radius:4px;box-shadow:var(--shadow);transform:rotate(var(--rot));transition:transform .3s}
.band-track figure:hover{transform:rotate(0) scale(1.08)}
.band-track img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain}
@keyframes scroll{to{transform:translateX(-50%)}}

/* why */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}
.fact{padding:24px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.fact b{font-family:var(--f-display);font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums}
.fact:nth-child(1) b{color:var(--red)}.fact:nth-child(2) b{color:var(--green)}.fact:nth-child(3) b{color:var(--blue)}.fact:nth-child(4) b{color:var(--purple)}
.fact strong{font-size:1.05rem}
.fact p{color:var(--muted);font-size:.97rem}

/* how to buy */
.buy{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
@media (max-width:860px){.buy{grid-template-columns:1fr}}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:s}
.steps li{display:flex;gap:16px;align-items:flex-start;background:var(--card);padding:18px 20px;border-radius:var(--r);box-shadow:var(--shadow);counter-increment:s}
.steps li::before{content:counter(s);flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 1.2rem var(--f-display);background:var(--yellow);color:#1C2240}
.steps li:nth-child(2)::before{background:var(--green);color:#fff}.steps li:nth-child(3)::before{background:var(--blue);color:#fff}
.steps strong{display:block}
.steps span{color:var(--muted);font-size:.97rem}

footer{padding-block:40px 56px;border-top:1px solid var(--line);color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

/* dialog */
dialog{border:0;padding:0;border-radius:24px;background:var(--card);color:var(--fg);width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog[open]{animation:dlg .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes dlg{from{transform:translateY(30px) scale(.95)}}
dialog::backdrop{background:rgba(12,16,36,.55);backdrop-filter:blur(4px)}
.dlg{display:grid;grid-template-columns:300px 1fr;gap:36px;padding:36px}
@media (max-width:760px){.dlg{grid-template-columns:1fr;padding:24px 20px;gap:22px}.dlg .dcover{max-width:220px}}
.dcover{width:100%;border-radius:4px 10px 10px 4px;box-shadow:var(--shadow);display:block}
.dlg h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.dlg .sub{color:var(--muted);font-weight:700;margin-top:6px}
.dlg .desc{margin-top:16px;max-width:60ch}
.dlg ul{margin:14px 0 0;padding-left:1.2em}
.dlg li{margin-block:4px}
.specs{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:4px 26px;margin-top:20px;font-size:.88rem;color:var(--muted)}
.specs b{display:block;color:var(--fg);font:800 1.05rem var(--f-display);font-variant-numeric:tabular-nums}
@media (max-width:520px){.specs{grid-template-columns:repeat(2,auto)}}
.buyrow{display:flex;align-items:center;gap:18px;margin-top:24px;flex-wrap:wrap}
.buyrow small{color:var(--muted);flex-basis:100%}
.inside{grid-column:1/-1;min-width:0}
.inside h3{font-size:1.4rem;margin-bottom:14px}
.pages{display:flex;gap:16px;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x mandatory}
.pages figure{margin:0;flex:none;width:170px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px}
.pages .pg{background:var(--paper);padding:8px;border-radius:4px;box-shadow:var(--shadow);border:0;cursor:pointer;position:relative;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.pages .pg:hover{transform:translateY(-4px) rotate(-1.5deg)}
.pages .pg img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain}
.pages .pg span{position:absolute;inset:auto 8px 8px;background:var(--accent);color:#fff;font-weight:800;font-size:.78rem;border-radius:999px;padding:4px 8px;opacity:0;transform:translateY(6px);transition:.2s}
.pages .pg:hover span,.pages .pg:focus-visible span{opacity:1;transform:none}
.pages figcaption{font-size:.85rem;color:var(--muted);line-height:1.35}
.close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:var(--bg-2);color:var(--fg);cursor:pointer;font-size:1.4rem;line-height:1}

.reveal{transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.reveal.pre{transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* language switcher */
.lang{position:relative}
.lang>summary::-webkit-details-marker{display:none}
.nav .lang{margin-left:4px}
.lang>summary{list-style:none;display:flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:6px 12px 6px 8px;font:800 .9rem var(--f-body);cursor:pointer}
.lang>summary:hover{border-color:var(--accent)}
.flag{width:26px;height:18px;border-radius:4px;overflow:hidden;flex:none;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:6px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line);min-width:180px;transform-origin:top right;animation:dd .25s cubic-bezier(.3,1.5,.5,1)}
@keyframes dd{from{transform:scale(.9) translateY(-6px)}}
.lang li a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;text-decoration:none;font-weight:700}
.lang li a:hover,.lang li a:focus-visible{background:var(--bg-2)}
.lang li a[aria-current="page"]{color:var(--accent)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-weight:700}
.note-lang{margin-top:10px;font-size:.9rem;color:var(--muted)}
/* legal pages */
.legal{padding-block:56px 80px}
.legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;margin-bottom:8px}
.legal h2{font-size:1.45rem;font-weight:800;margin:36px 0 10px}
.legal h3{font-size:1.1rem;font-weight:800;margin:22px 0 6px;font-family:var(--f-body)}
.legal p,.legal li{color:var(--fg);max-width:68ch}
.legal p+p{margin-top:10px}
.legal ul{padding-left:1.2em}
.legal address{font-style:normal;line-height:1.7}
.legal .binding{background:var(--bg-2);border-radius:12px;padding:12px 16px;font-size:.95rem;color:var(--muted);margin:18px 0 8px}
.legal .todo{background:#FFE8A3;color:#5A4300;border-radius:6px;padding:0 6px;font-weight:800}
@media (max-width:760px){.nav .lang{margin-left:auto}}