:root{
  --kid-sky:#7dd9ff;
  --kid-cream:#fff8df;
  --kid-coral:#ff657c;
  --kid-blue:#2798ed;
  --kid-green:#65c95b;
  --kid-yellow:#ffc83d;
  --kid-purple:#8b5cf6;
  --kid-shadow:0 9px 0 rgba(45,78,116,.17),0 18px 32px rgba(42,77,118,.15);
}


body.kid-world{
  background:
    radial-gradient(circle at 5% 7%,#fff3a6 0 5%,transparent 5.2%),
    radial-gradient(circle at 95% 18%,#dff7ff 0 7%,transparent 7.2%),
    linear-gradient(180deg,#f7fcff 0,#fffaf0 58%,#f5fff2 100%);
  overflow-x:hidden;
}

.kid-world header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
.kid-world main{max-width:1280px;padding-top:28px}
.kid-world button,.kid-world a{ -webkit-tap-highlight-color:transparent }

.kid-hero{
  position:relative;
  min-height:520px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:26px;
  align-items:center;
  text-align:right;
  padding:40px clamp(24px,5vw,68px);
  overflow:hidden;
  isolation:isolate;
  border:4px solid #fff;
  background:
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.92) 0 8%,transparent 8.3%),
    linear-gradient(180deg,#a7e8ff 0,#e8faff 55%,#d9f5bd 56%,#aee486 100%);
  box-shadow:var(--kid-shadow);
}
.kid-hero:before{content:"";position:absolute;inset:auto -5% -64px;width:110%;height:150px;background:#83cf63;border-radius:50% 50% 0 0/80% 80% 0 0;z-index:-1}
.kid-hero-copy,.kid-guide{position:relative;z-index:2}
.kid-hero .eyebrow{background:rgba(255,255,255,.86);border:2px solid rgba(39,152,237,.32);box-shadow:0 5px 0 rgba(39,152,237,.12)}
.kid-hero h1{font-size:clamp(44px,6.2vw,78px);line-height:1.08;margin:20px 0 8px;letter-spacing:-2px;text-shadow:0 3px 0 #fff}
.kid-hero h1 span{color:#ff8b23}
.kid-hero .kid-welcome{font-size:clamp(18px,2vw,25px);font-weight:800;color:#344a69;margin:8px 0 18px}

.age-choices{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 24px}
.age-choices button{
  min-width:112px;min-height:78px;padding:9px 14px;border:3px solid #fff;border-radius:23px;background:rgba(255,255,255,.9);color:#1a2d56;font:inherit;cursor:pointer;box-shadow:0 6px 0 #c8dbef;transition:.18s ease;
}
.age-choices button span{font-size:27px;display:block}.age-choices button b{font-size:19px}.age-choices button small{display:block;color:#65718e;font-weight:800}
.age-choices button:hover,.age-choices button:focus-visible{transform:translateY(-4px);outline:4px solid rgba(255,200,61,.5)}
.age-choices button[aria-pressed="true"]{background:#fff4b8;border-color:#ffd34e;box-shadow:0 7px 0 #e9ab20;transform:translateY(-2px)}

.activity-launchers{display:grid;grid-template-columns:repeat(4,minmax(106px,1fr));gap:14px}
.activity-launchers button{
  min-height:112px;border:4px solid rgba(255,255,255,.85);border-radius:28px;color:#fff;font:inherit;cursor:pointer;box-shadow:0 9px 0 rgba(30,52,91,.23),0 14px 22px rgba(30,52,91,.16);transition:transform .16s,filter .16s;
}
.activity-launchers button span{display:block;font-size:40px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.12))}.activity-launchers button b{display:block;font-size:22px;margin-top:3px}
.activity-launchers button:hover,.activity-launchers button:focus-visible{transform:translateY(-6px) rotate(-1deg);filter:saturate(1.12);outline:4px solid rgba(255,255,255,.72)}
.activity-launchers button:active,.kid-press{transform:translateY(3px) scale(.96)!important;box-shadow:0 3px 0 rgba(30,52,91,.23)!important}
.activity-color{background:linear-gradient(145deg,#ff8095,#ef476f)}.activity-listen{background:linear-gradient(145deg,#54b8ff,#237ce5)}.activity-lego{background:linear-gradient(145deg,#7bdc6d,#43ad4f)}.activity-print{background:linear-gradient(145deg,#ffbd42,#f28a18)}

.kid-guide{min-height:390px;display:flex;align-items:end;justify-content:center}
.guide-character{font-size:210px;line-height:1;filter:drop-shadow(0 16px 12px rgba(39,82,99,.18));animation:kidFloat 3.4s ease-in-out infinite}
.guide-bubble{position:absolute;top:0;right:0;left:0;margin:auto;width:min(100%,310px);padding:18px 22px;background:#fff;border:4px solid #fff;border-radius:34px;box-shadow:0 12px 25px rgba(47,86,122,.15);text-align:center;color:#182b57}
.guide-bubble:after{content:"";position:absolute;bottom:-22px;left:42%;border:13px solid transparent;border-top-color:#fff}
.guide-bubble b{display:block;font-size:27px}.guide-bubble span{font-size:18px;font-weight:800;color:#53647e}
.guide-friends{position:absolute;inset:auto 0 -5px;display:flex;justify-content:space-between;font-size:72px}.guide-friends span:first-child{transform:rotate(8deg)}.guide-friends span:last-child{transform:rotate(-8deg)}
.kid-sky-decor{position:absolute;inset:0;z-index:0;pointer-events:none}.kid-sky-decor i{position:absolute;font-style:normal;filter:drop-shadow(0 5px 4px rgba(60,107,139,.13))}.kid-sky-decor i:nth-child(1){top:9%;left:5%;font-size:66px}.kid-sky-decor i:nth-child(2){top:8%;right:48%;font-size:32px;animation:starTwinkle 1.7s infinite alternate}.kid-sky-decor i:nth-child(3){top:35%;left:39%;font-size:52px}.kid-sky-decor i:nth-child(4){bottom:5%;right:5%;font-size:70px;opacity:.68}

.kid-world h2{color:#172751}.kid-world .book{border:4px solid #fff;background:linear-gradient(145deg,#fffef8,#f3fbff);box-shadow:var(--kid-shadow)}
.kid-world .preview figure{border:3px solid #fff;box-shadow:0 8px 0 #dbe8f4;transition:.18s}.kid-world .preview figure:hover{transform:translateY(-5px) rotate(.5deg)}
.kid-world .button,.kid-world .studio-actions button,.kid-world .tool{min-height:54px;border-width:2px;border-radius:17px;box-shadow:0 5px 0 #d2dcec;transition:.16s}
.kid-world .button:hover,.kid-world .studio-actions button:hover,.kid-world .tool:hover{transform:translateY(-3px)}

.kid-world .coloring-studio{background:linear-gradient(160deg,#f4fbff,#fff7e8);border:4px solid #fff;box-shadow:var(--kid-shadow);border-radius:36px}
.kid-world .canvas-shell{background:linear-gradient(145deg,#84dfff,#c9f3ff);border:5px solid #fff;box-shadow:inset 0 0 0 2px rgba(48,119,171,.15)}
.kid-world .studio-tools{border:4px solid #fff;border-radius:28px;box-shadow:0 10px 0 #dce9f3}
.kid-world .color-swatch{width:49px;height:49px;border-width:5px;box-shadow:0 5px 0 rgba(26,45,86,.2),0 0 0 1px #b8c6da;transition:.16s}
.kid-world .color-swatch:hover,.kid-world .color-swatch.active{transform:translateY(-6px) scale(1.08)}
.kid-world .color-swatch.active{box-shadow:0 7px 0 rgba(26,45,86,.24),0 0 0 4px #ffd047}
.kid-world .voice-tools{background:linear-gradient(145deg,#f1edff,#fff);border:3px solid #d7c9ff;border-radius:24px;position:relative;padding-top:64px}
.kid-world .voice-tools:before{content:"🧑‍🏫";position:absolute;top:10px;right:16px;font-size:43px}.kid-world .voice-tools:after{content:"أنا معلّم زين";position:absolute;top:22px;right:70px;font-size:14px;font-weight:900;color:#5a3eb5}
.kid-world .voice-actions button{min-height:50px;border:2px solid #d7c9ff;border-radius:15px;box-shadow:0 4px 0 #d7c9ff}

.series-catalog{gap:24px}.series-card{min-height:305px;border-radius:34px;padding:24px;border-width:4px;box-shadow:0 10px 0 color-mix(in srgb,var(--accent) 18%,#dbe6f5),0 20px 34px rgba(33,68,120,.13)}
.series-card:hover{transform:translateY(-9px) rotate(.8deg)}.series-cover{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:100px}.series-card .series-icon{width:92px;height:92px;font-size:54px;border-radius:30px}.series-age{align-self:end;background:#fff;border:2px solid color-mix(in srgb,var(--accent) 30%,#fff);border-radius:999px;padding:7px 11px;font-size:13px;font-weight:900;color:#34466a;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 16%,#e4edf7)}.series-age bdi{font-size:17px;color:var(--accent)}.series-card h3{font-size:25px;margin-bottom:4px}.series-stars{direction:ltr;letter-spacing:4px;color:#ffb51f;font-size:23px;text-shadow:0 2px 0 #fff}.series-open,.series-soon{min-height:58px;display:flex;align-items:center;justify-content:center;gap:9px;font:900 17px Arial;border-radius:18px}.series-open span{font-size:23px}.series-soon{margin-top:14px;border:2px solid #fff;background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--accent);box-shadow:0 5px 0 color-mix(in srgb,var(--accent) 24%,#d8e3ef);cursor:pointer}.series-soon:hover{transform:translateY(-2px)}
.library-catalog{background:linear-gradient(155deg,#e9f9ff,#fff4dc 52%,#eaffdd);border:4px solid #fff;box-shadow:var(--kid-shadow)}

.child-mode-bar{display:flex;gap:10px;align-items:center;position:absolute;z-index:20;top:14px;left:18px;direction:ltr}
.child-exit,.child-sound{min-width:64px;min-height:58px;border:4px solid #fff;border-radius:20px;background:#268fec;color:#fff;font:900 18px Arial;cursor:pointer;box-shadow:0 6px 0 #1464ae}.child-sound{min-width:58px;background:#62c958;box-shadow-color:#318e39;font-size:25px}
.child-reward{position:fixed;z-index:9999;left:50%;top:16%;transform:translate(-50%,-20px) scale(.8);opacity:0;pointer-events:none;background:#fff8ce;border:5px solid #fff;border-radius:34px;padding:18px 34px;font-size:28px;font-weight:900;color:#17305e;box-shadow:var(--kid-shadow);transition:.25s}.child-reward.show{opacity:1;transform:translate(-50%,0) scale(1)}

body.child-play-active{overflow:hidden}
.coloring-studio.child-fullscreen{position:fixed;z-index:1000;inset:0;margin:0!important;padding:18px!important;border:0!important;border-radius:0!important;overflow:auto;overflow-x:hidden;background:linear-gradient(180deg,#75d8ff,#d9f8ff 56%,#c8ed9e)!important}
.coloring-studio.child-fullscreen .studio-heading{padding:62px 18px 12px;text-align:center;justify-content:center}.coloring-studio.child-fullscreen .studio-heading>div:first-child p,.coloring-studio.child-fullscreen .studio-heading .tag{display:none}.coloring-studio.child-fullscreen .studio-heading h2{font-size:clamp(32px,5vw,58px);margin:0;padding:8px 32px;background:#fff8e4;border:4px solid #fff;border-radius:28px;box-shadow:0 7px 0 #d7c58a}.coloring-studio.child-fullscreen .studio-pickers{position:absolute;right:20px;top:16px;max-width:42%;justify-content:flex-end}.coloring-studio.child-fullscreen .page-picker{min-width:150px;font-size:13px}.coloring-studio.child-fullscreen .page-picker select{border:3px solid #fff;border-radius:16px;min-height:48px;box-shadow:0 5px 0 #c9dbea}
.coloring-studio.child-fullscreen .studio-layout{grid-template-columns:minmax(0,1fr) 310px;max-width:1250px;margin:18px auto 0}.coloring-studio.child-fullscreen .canvas-shell{max-height:calc(100vh - 190px);min-height:0}.coloring-studio.child-fullscreen .canvas-shell canvas{max-height:calc(100vh - 225px);width:auto;max-width:100%}.coloring-studio.child-fullscreen .studio-tools{position:static;max-height:calc(100vh - 190px);overflow:auto}
.coloring-studio.child-fullscreen[data-child-mode="coloring"] .puzzle-studio{display:none}
.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .studio-heading,.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .studio-layout{display:none}
.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-studio{border:0;margin:0;padding:68px 12px 20px;min-height:100%}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head{align-items:center;max-width:1250px;margin:auto}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head h2{font-size:clamp(38px,5vw,65px);background:#8d58dc;color:#fff;padding:7px 38px;border:4px solid #fff;border-radius:28px;box-shadow:0 8px 0 #6438a9}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head p{font-size:19px;font-weight:800;color:#314866}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls select,.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls button{min-height:58px;border:3px solid #fff;border-radius:18px;box-shadow:0 6px 0 #c8d7e4}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-board{max-height:calc(100vh - 250px);max-width:min(70vw,720px);background:#fff1c8;border:5px solid #fff;box-shadow:var(--kid-shadow)}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-board canvas{max-height:calc(100vh - 330px);object-fit:contain}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-stats{font-size:17px;font-weight:900}.coloring-studio.child-fullscreen.young-child .puzzle-stats{display:none}

@keyframes kidFloat{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes starTwinkle{to{transform:scale(1.35) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}

@media(max-width:900px){
  .kid-hero{grid-template-columns:1fr;padding:30px 22px}.kid-guide{min-height:280px;order:-1}.guide-character{font-size:145px}.guide-friends{font-size:56px}.activity-launchers{grid-template-columns:1fr 1fr}.activity-launchers button{min-height:96px}.coloring-studio.child-fullscreen .studio-layout{grid-template-columns:1fr}.coloring-studio.child-fullscreen .studio-tools{max-height:none}.coloring-studio.child-fullscreen .canvas-shell{max-height:none}.coloring-studio.child-fullscreen .canvas-shell canvas{max-height:70vh}.coloring-studio.child-fullscreen .studio-pickers{position:static;max-width:none;justify-content:center}.coloring-studio.child-fullscreen .studio-heading{padding-top:68px;display:flex}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head{display:block;text-align:center}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls{justify-content:center}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-board{max-width:94vw;max-height:none}
}
@media(max-width:560px){
  .kid-world{overflow-x:hidden}.kid-world main{padding-inline:10px;overflow:hidden}.kid-hero{border-radius:30px;min-height:auto}.kid-hero h1{font-size:42px}.kid-guide{min-height:235px}.guide-character{font-size:120px}.guide-bubble{max-width:235px;padding:10px 14px}.guide-bubble b{font-size:21px}.guide-bubble span{font-size:14px}.guide-friends{font-size:44px}.age-choices{display:grid;grid-template-columns:repeat(3,1fr)}.age-choices button{min-width:0;padding-inline:4px}.activity-launchers{gap:10px}.activity-launchers button{min-height:88px;border-radius:22px}.activity-launchers button span{font-size:32px}.activity-launchers button b{font-size:18px}.series-card{min-height:285px}.coloring-studio,.studio-heading,.studio-layout,.canvas-shell,.studio-tools{min-width:0;max-width:100%}.studio-pickers{width:100%;min-width:0}.page-picker{width:100%;min-width:0}.page-picker select{display:block;width:100%;min-width:0;max-width:100%}.canvas-shell,.studio-tools{width:100%}.palette{grid-template-columns:repeat(5,minmax(0,1fr))}.color-swatch{max-width:44px;max-height:44px}.child-mode-bar{top:8px;left:8px}.child-exit,.child-sound{min-height:52px;min-width:52px}.coloring-studio.child-fullscreen{padding:8px!important}.coloring-studio.child-fullscreen .studio-heading h2{font-size:30px}.coloring-studio.child-fullscreen .studio-pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}.coloring-studio.child-fullscreen .page-picker{min-width:0}.coloring-studio.child-fullscreen .page-picker:first-child{display:none}.coloring-studio.child-fullscreen .studio-layout{gap:10px}.coloring-studio.child-fullscreen .studio-tools{padding:12px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-studio{padding-top:60px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head h2{font-size:35px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls label{width:100%}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls select,.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls button{flex:1}
  .coloring-studio.child-fullscreen[data-child-mode="coloring"]{padding-bottom:198px!important}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .canvas-shell{overflow:hidden}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .canvas-shell canvas{max-height:calc(100vh - 500px)}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .studio-tools{position:fixed;z-index:1004;top:auto!important;left:8px;right:8px;bottom:8px;width:auto;max-width:none;max-height:184px;overflow:auto;padding:9px;border-radius:25px;background:rgba(255,255,255,.96);box-shadow:0 9px 0 rgba(42,75,112,.22),0 -8px 30px rgba(30,75,110,.16)}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .studio-tools>h3,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .brush-size,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .print-note,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-tools h3,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-tools>p,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-rate,.coloring-studio.child-fullscreen[data-child-mode="coloring"] #speakLetter,.coloring-studio.child-fullscreen[data-child-mode="coloring"] #speakWord,.coloring-studio.child-fullscreen[data-child-mode="coloring"] #stopVoice{display:none}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .palette{display:flex;gap:8px;overflow-x:auto;padding:5px 4px 9px;direction:ltr}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .color-swatch{flex:0 0 42px;width:42px;height:42px}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .tool-row{grid-template-columns:repeat(3,1fr);margin-top:2px}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .tool-row .tool{min-height:44px;padding:5px}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-tools{display:inline-block;vertical-align:top;margin:7px 0 0;padding:0;border:0;background:none}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-tools:before,.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-tools:after{display:none}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .voice-actions{display:block}.coloring-studio.child-fullscreen[data-child-mode="coloring"] #speakBoth{display:block;min-height:44px;padding:7px 10px}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .studio-actions{display:inline-grid;vertical-align:top;width:calc(100% - 145px);grid-template-columns:repeat(4,1fr);margin:7px 8px 0 0;gap:5px}.coloring-studio.child-fullscreen[data-child-mode="coloring"] .studio-actions button{min-height:44px;padding:5px 3px;font-size:12px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-studio{padding-top:60px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-head h2{font-size:35px}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls label{width:100%}.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls select,.coloring-studio.child-fullscreen[data-child-mode="puzzle"] .puzzle-controls button{flex:1}
}