:root{--ink:#1f2937;--muted:#64748b;--cream:#fffbf0;--orange:#ff922b;--orange-dark:#e07a1a;--blue:#3aa0e6;--yellow:#ffd23f;--green:#40c057;--line:#fde7b3;--card:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%;font-family:"DM Sans",Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream)}body{overflow-x:hidden}button{font:inherit}button:focus-visible,[role=button]:focus-visible{outline:4px solid rgba(58,160,230,.25);outline-offset:3px}a{text-decoration:none;color:inherit}.shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:2px solid #fef3c7;display:flex;align-items:center;justify-content:space-between;padding:10px max(16px,calc((100vw - 1152px)/2));gap:12px}.brand{display:flex;align-items:center;gap:8px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:26px;letter-spacing:-.5px;cursor:pointer;line-height:1}.brand .baby{color:#ff922b}.brand .color{color:#3aa0e6}.logo-chick{width:40px;height:40px}.hero-chick{width:min(320px,82vw);height:auto;filter:drop-shadow(0 16px 14px rgba(128,91,12,.12))}.nav-actions{display:flex;align-items:center;gap:8px}.pill,.icon-btn{border:2px solid #fde7a6;background:#fffdf5;border-radius:999px;min-height:42px;padding:8px 14px;font-weight:800;color:#64748b;cursor:pointer;transition:.18s}.pill:hover,.icon-btn:hover{background:#fef3c7;transform:translateY(-1px)}.music-attention{position:relative;display:flex;align-items:center;gap:10px;min-width:128px;height:46px;padding:0 12px 0 10px;border-color:#ffd38d;background:linear-gradient(180deg,#fff8e9,#fff1c9);box-shadow:0 4px 0 #f1d48e}.music-attention::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid rgba(255,167,54,.28);opacity:0;animation:musicPulse 2.3s ease-out infinite}.music-attention.is-on{background:linear-gradient(180deg,#fff5d7,#ffe9b0)}.music-attention.is-on::after{animation:none;opacity:0}.music-core{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3px 10px rgba(255,146,43,.2)}.music-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.02;text-align:left}.music-copy b{font-size:13px;color:#a86113;font-weight:900}.music-copy small{font-size:10px;color:#ff922b;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.music-note{font-family:"Baloo 2";font-size:22px;color:#ff922b;transform-origin:center;animation:musicTinkle 2.6s ease-in-out infinite}.sound-wave{position:absolute;border:2px solid #ffb34f;border-left:0;border-bottom:0;border-radius:0 100% 0 0;opacity:.22}.sound-wave.w1{width:9px;height:9px;right:-1px;top:6px;animation:waveTinkle 2.6s ease-in-out infinite}.sound-wave.w2{width:14px;height:14px;right:-5px;top:3px;animation:waveTinkle 2.6s .12s ease-in-out infinite}.music-attention.is-on .music-note{color:#e87516}.music-attention.is-off .music-copy small{color:#ff7a00}@keyframes musicPulse{0%{opacity:.55;transform:scale(.95)}70%{opacity:0;transform:scale(1.08)}100%{opacity:0;transform:scale(1.12)}}@keyframes musicTinkle{0%,70%,100%{transform:rotate(0) scale(1)}76%{transform:rotate(-9deg) scale(1.08)}82%{transform:rotate(8deg) scale(1.08)}88%{transform:rotate(-4deg)}}@keyframes waveTinkle{0%,70%,100%{opacity:.18;transform:scale(.85)}80%{opacity:.95;transform:scale(1.1)}}@keyframes chick-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-24deg)}}.chick-wave{animation:chick-wave 1.1s ease-in-out infinite}
.hero{max-width:1152px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:34px;padding:62px 16px 48px}.hero-copy{text-align:left}.hero h1,.section h2,.gallery-title{font-family:"Baloo 2",sans-serif}.hero h1{font-size:clamp(48px,6vw,70px);line-height:1.04;letter-spacing:-1.3px;margin:0;font-weight:800}.hero p{max-width:520px;margin:18px 0 0;color:#64748b;font-size:clamp(17px,2vw,20px);line-height:1.55;font-weight:500}.cta{margin-top:30px;display:inline-flex;align-items:center;gap:9px;border:0;border-radius:999px;background:#ff922b;color:#fff;padding:15px 29px;font-size:19px;font-weight:800;box-shadow:0 8px 0 #e07a1a;cursor:pointer;transition:.15s}.cta:hover{transform:translateY(-2px);box-shadow:0 10px 0 #e07a1a}.cta:active{transform:translateY(4px);box-shadow:0 4px 0 #e07a1a}.cta-spark{font-size:22px}.mascot-card{display:grid;place-items:center;min-height:320px}.section{max-width:1152px;margin:auto;padding:38px 16px}.section h2,.gallery-title{font-size:clamp(30px,4vw,42px);line-height:1.1;margin:0 0 22px;font-weight:800}.drawing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.featured-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.drawing-card{background:#fff;border:2px solid #fef0c7;border-radius:24px;padding:12px;box-shadow:0 2px 4px rgba(30,41,59,.04);cursor:pointer;transition:.2s}.drawing-card:hover{transform:translateY(-4px);border-color:#fcd77c;box-shadow:0 9px 18px rgba(180,130,20,.11)}.drawing-card .thumb{aspect-ratio:1;background:#fff;border-radius:18px;overflow:hidden;display:grid;place-items:center}.drawing-card svg{width:95%;height:95%}.drawing-card strong{display:block;text-align:center;color:#64748b;margin-top:8px;font-size:15px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.category-card{min-height:135px;border-radius:24px;padding:17px;text-align:center;display:grid;place-items:center;align-content:center;gap:5px;cursor:pointer;box-shadow:0 2px 4px rgba(30,41,59,.05);transition:.2s}.category-card:hover{transform:translateY(-4px);filter:saturate(1.04)}.category-icon{width:68px;height:64px;display:grid;place-items:center}.category-icon svg{width:66px;height:62px;overflow:visible;fill:none;stroke:#334155;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.category-card strong{font-family:"Baloo 2";font-size:19px;font-weight:800}.parents-section{padding-top:50px}.parents-box{background:#fff;border:2px solid #fef0c7;border-radius:32px;padding:34px;box-shadow:0 3px 8px rgba(148,103,11,.05)}.parents-box h2{margin-bottom:8px}.parents-intro{color:#64748b;font-size:18px;max-width:680px;margin:0 0 28px}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.benefit{background:rgba(255,251,235,.74);border-radius:24px;padding:20px}.benefit-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-size:25px;font-weight:900;color:#334155}.hand-icon{background:#8ce99a}.leaf-icon{background:#ffd166}.eye-icon{background:#74c0fc}.benefit h3{font-family:"Baloo 2";font-size:20px;margin:12px 0 4px}.benefit p{margin:0;color:#64748b;line-height:1.5}.premium-box{background:linear-gradient(135deg,#ede9fe,#e0f2fe);border-radius:32px;padding:34px}.premium-heading{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.premium-heading h2{margin:0}.premium-heading span{background:#fff;color:#8b5cf6;border-radius:999px;padding:6px 12px;font-weight:800}.premium-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:25px}.premium-card{background:rgba(255,255,255,.78);border-radius:24px;padding:20px;text-align:center}.premium-icon{width:56px;height:56px;margin:auto;border-radius:17px;display:grid;place-items:center;font-size:27px}.crayon{background:#ffd166}.watercolor{background:#74c0fc}.pencil{background:#faa2c1}.canvas{background:#b197fc}.premium-card strong{font-family:"Baloo 2";font-size:18px;display:block;margin-top:9px}.footer{border-top:2px solid #fef3c7;background:rgba(255,251,235,.78);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 16px;color:#94a3b8}.footer p,.footer small{margin:0}.gallery-wrap{max-width:1152px;margin:auto;padding:38px 16px 72px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 28px}.filter{border:2px solid #fde7a6;background:#fff;border-radius:999px;padding:8px 15px;font-weight:800;color:#64748b;cursor:pointer}.filter.active{background:#ff922b;color:#fff;border-color:#ff922b}
.coloring-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;background:#fff;border-bottom:2px solid #fef3c7}.back{border:2px solid #fde7a6;background:#fffbeb;border-radius:999px;padding:9px 15px;font-weight:800;color:#b65c12;cursor:pointer}.download{border:0;background:#40c057;color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}.coloring-shell{height:calc(100vh - 66px);display:grid;grid-template-columns:95px minmax(0,1fr) 174px;gap:14px;padding:12px;background:#fffbf0}.tools,.palette-panel{background:#fff;border:2px solid #fef0c7;border-radius:24px;padding:9px;display:flex;flex-direction:column;gap:7px;overflow:auto}.tool{min-height:64px;border:2px solid #fde7a6;background:#fff;border-radius:17px;color:#475569;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:.15s}.tool-icon{width:26px;height:26px}.tool-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tool:hover:not(:disabled){background:#fffbeb}.tool.active{background:#ff922b;color:#fff;border-color:#ff922b;box-shadow:0 5px 0 #e07a1a}.tool:disabled{background:#fafafa;border-color:#eceff3;color:#cbd5e1;cursor:not-allowed;box-shadow:none}.canvas-area{background:#fff;border:2px solid #fef0c7;border-radius:24px;display:grid;place-items:center;overflow:auto;touch-action:none}.canvas-wrap{transform-origin:center;transition:transform .15s}.canvas-wrap canvas{display:block;width:min(78vh,100%);height:auto;max-width:100%;touch-action:none;cursor:crosshair}.palette-panel{align-items:stretch}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;justify-items:center}.swatch{width:39px;height:39px;border-radius:50%;border:3px solid #fff;outline:2px solid transparent;box-shadow:0 0 0 1px rgba(30,41,59,.12);cursor:pointer}.swatch.active{outline-color:#ffbd3f;box-shadow:0 0 0 3px #fff}.size-label{text-align:center;font-weight:800;color:#94a3b8;font-size:12px;letter-spacing:.04em;margin-top:8px}.range{width:100%;accent-color:#ff922b}
@media(max-width:900px){.hero{grid-template-columns:1fr;text-align:center;padding-top:44px}.hero-copy{text-align:center}.hero p{margin-left:auto;margin-right:auto}.mascot-card{min-height:250px}.hero-chick{width:min(270px,68vw)}.featured-grid{grid-template-columns:repeat(3,1fr)}.drawing-grid,.category-grid{grid-template-columns:repeat(3,1fr)}.coloring-shell{grid-template-columns:82px minmax(0,1fr) 145px}.swatch{width:34px;height:34px}.colors{gap:8px}.benefit-grid{grid-template-columns:1fr}.premium-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.music-attention{min-width:102px;padding:0 10px;gap:7px}.music-copy b{font-size:12px}.music-copy small{font-size:9px}.topbar{padding:8px 12px}.brand{font-size:22px}.logo-chick{width:36px;height:36px}.nav-actions{gap:5px}.pill{padding:7px 11px}.hero{padding:38px 18px 30px}.hero h1{font-size:46px}.hero p{font-size:17px}.section{padding:28px 14px}.featured-grid,.drawing-grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.category-card{min-height:122px}.parents-box,.premium-box{padding:24px 18px}.coloring-header{padding:7px 9px}.coloring-header .brand{display:none}.back{font-size:12px;padding:8px 10px}.download{font-size:12px;padding:9px 11px}.coloring-shell{height:auto;min-height:calc(100vh - 61px);display:flex;flex-direction:column;padding:8px}.tools{order:2;flex-direction:row;overflow-x:auto;border-radius:20px}.tool{min-width:72px;min-height:60px}.canvas-area{order:1;min-height:auto;padding:4px}.canvas-wrap canvas{width:100%;max-height:none}.palette-panel{order:3;border-radius:20px}.colors{grid-template-columns:repeat(8,1fr);gap:7px}.swatch{width:32px;height:32px}.size-label{margin-top:3px}}
@media(max-width:390px){.music-attention{min-width:46px;width:46px;padding:0;justify-content:center}.music-copy{display:none}.hero h1{font-size:41px}.colors{grid-template-columns:repeat(8,1fr)}.swatch{width:29px;height:29px}.icon-btn{width:40px;height:40px}.pill{font-size:12px}.category-icon{width:58px;height:54px}.category-icon svg{width:56px;height:52px}}
@media(orientation:landscape) and (max-height:620px) and (max-width:950px){.coloring-shell{height:calc(100vh - 59px);display:grid;grid-template-columns:75px minmax(0,1fr) 138px}.tools{order:initial;flex-direction:column}.canvas-area{order:initial}.palette-panel{order:initial}.tool{min-width:0;min-height:51px}.colors{grid-template-columns:repeat(3,1fr)}.swatch{width:30px;height:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.level-filters{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 14px}
.drawing-card{position:relative}
.drawing-card .thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.level-badge{position:absolute;top:20px;right:20px;background:#b197fc;color:#fff;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;box-shadow:0 2px 6px rgba(99,102,241,.22)}

/* Premium color preview */
.palette-panel{scrollbar-width:thin;scrollbar-color:#d8b4fe transparent}
.free-palette{flex:0 0 auto}
.premium-colors{margin-top:10px;padding-top:12px;border-top:2px dashed #eadcff}
.premium-colors-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:9px;border-radius:16px;background:linear-gradient(135deg,#f4edff,#eef8ff)}
.premium-lock{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#fff;font-size:17px;box-shadow:0 2px 8px rgba(109,54,173,.12)}
.premium-colors-head strong{display:block;font-family:"Baloo 2",sans-serif;font-size:15px;line-height:1;color:#5f3b91}
.premium-colors-head small{display:block;margin-top:3px;color:#9b72c9;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
#premiumColorGroups{display:flex;flex-direction:column;gap:8px}
.premium-group{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:7px}
.premium-group>span{font-size:10px;font-weight:800;color:#8792a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.premium-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.premium-swatch{position:relative;width:100%;aspect-ratio:1;border:0;padding:0;border-radius:50%;cursor:pointer;background:transparent}
.premium-swatch i{position:absolute;inset:0;border-radius:50%;background:var(--locked-color);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 0 0 1px rgba(49,46,129,.13);filter:saturate(.9)}
.premium-swatch b{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.38);font-size:8px;line-height:1;text-shadow:0 1px 2px #fff;opacity:.9}
.premium-swatch:hover i{transform:scale(1.08)}
.premium-swatch i{transition:transform .15s ease}
.premium-toast{position:fixed;z-index:1000;right:22px;bottom:22px;max-width:340px;display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border:2px solid #d8b4fe;border-radius:20px;background:#fff;box-shadow:0 18px 50px rgba(76,29,149,.2);transform:translateY(25px);opacity:0;transition:.2s ease}
.premium-toast.show{transform:translateY(0);opacity:1}
.premium-toast>span{font-size:23px}
.premium-toast strong{font-family:"Baloo 2",sans-serif;color:#5f3b91;font-size:18px}
.premium-toast p{margin:3px 0 0;color:#64748b;font-size:13px;line-height:1.35}

@media(min-width:901px){
  .coloring-shell{grid-template-columns:95px minmax(0,1fr) 230px}
  .palette-panel{max-height:calc(100vh - 90px)}
}
@media(max-width:900px) and (min-width:641px){
  .coloring-shell{grid-template-columns:82px minmax(0,1fr) 190px}
  .premium-group{grid-template-columns:54px 1fr}
}
@media(max-width:640px){
  .palette-panel{max-height:none;overflow:visible}
  .premium-colors{margin-top:14px}
  #premiumColorGroups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .premium-group{display:block}
  .premium-group>span{display:block;margin-bottom:5px;text-align:center;font-size:10px}
  .premium-swatches{gap:5px}
  .premium-swatch{max-width:42px;justify-self:center}
  .premium-toast{left:12px;right:12px;bottom:12px;max-width:none}
}
@media(max-width:390px){
  #premiumColorGroups{grid-template-columns:1fr}
  .premium-group{display:grid;grid-template-columns:62px 1fr}
  .premium-group>span{margin:0;text-align:left}
}
@media(orientation:landscape) and (max-height:620px) and (max-width:950px){
  .coloring-shell{grid-template-columns:75px minmax(0,1fr) 190px}
  .palette-panel{max-height:calc(100vh - 70px)}
  #premiumColorGroups{display:flex}
  .premium-group{display:grid;grid-template-columns:50px 1fr}
}

.legal-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:5px 0}.legal-links a{color:#64748b;font-weight:700;text-decoration:underline;text-decoration-color:#f6c86f;text-underline-offset:4px}.legal-links a:hover{color:#e07a1a}