:root {
  --ink: #24133f;
  --muted: #695c7d;
  --purple: #6d3df0;
  --purple-dark: #41246f;
  --pink: #ff5f9d;
  --yellow: #ffd85a;
  --mint: #58ddb2;
  --blue: #69c8ff;
  --cream: #fff9ee;
  --white: #fff;
  --line: rgba(65, 36, 111, .12);
  --shadow: 0 24px 70px rgba(65, 36, 111, .16);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Nunito", system-ui, sans-serif;
  line-height: 1.55;
}
button, a, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.kids-container { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.kids-skip-link { position: fixed; left: 16px; top: -80px; z-index: 10000; padding: 11px 16px; border-radius: 12px; background: var(--ink); color: #fff; }
.kids-skip-link:focus { top: 12px; }

.kids-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: rgba(255,249,238,.92); backdrop-filter: blur(18px); }
.kids-header-row { min-height: 76px; display: flex; align-items: center; gap: 24px; }
.kids-brand { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; font-family: "Fredoka", sans-serif; font-size: 1.55rem; font-weight: 700; }
.kids-brand > span { color: var(--pink); }
.kids-brand small { margin-left: 8px; color: var(--purple); font: 800 .78rem/1 "Nunito", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.kids-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kids-nav a { padding: 9px 12px; border-radius: 12px; color: #534467; text-decoration: none; font-weight: 800; }
.kids-nav a:hover, .kids-nav a:focus-visible { background: #efe8ff; color: var(--purple-dark); }
.kids-sound-toggle, .kids-menu-toggle { min-height: 42px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--purple-dark); cursor: pointer; font-weight: 900; }
.kids-sound-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; }
.kids-menu-toggle { display: none; width: 44px; }

.kids-hero { position: relative; overflow: hidden; padding: 80px 0 36px; background: radial-gradient(circle at 10% 10%, rgba(255,216,90,.45), transparent 25%), radial-gradient(circle at 90% 15%, rgba(105,200,255,.32), transparent 24%), linear-gradient(145deg, #fff9ee 0%, #f7edff 54%, #eafaff 100%); }
.kids-hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, var(--purple) 1.25px, transparent 1.25px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 84%); }
.kids-hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(42px, 7vw, 88px); }
.kids-eyebrow { margin: 0 0 12px; color: var(--purple); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kids-eyebrow-dark { color: #6849a0; }
.kids-hero h1, .kids-section-heading h2, .kids-grownups h2 { margin: 0; font-family: "Fredoka", sans-serif; line-height: .98; letter-spacing: -.035em; }
.kids-hero h1 { max-width: 760px; font-size: clamp(3.15rem, 7.3vw, 6.6rem); }
.kids-hero h1 span { color: var(--purple); }
.kids-hero-copy > p:not(.kids-eyebrow) { max-width: 650px; color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.2rem); }
.kids-hero-actions, .kids-grownups-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kids-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border: 0; border-radius: 16px; text-decoration: none; cursor: pointer; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; }
.kids-button:hover { transform: translateY(-2px); }
.kids-button-primary { background: linear-gradient(135deg, var(--purple), #8e55ff); color: #fff; box-shadow: 0 12px 28px rgba(109,61,240,.28); }
.kids-button-ghost { border: 1px solid rgba(65,36,111,.16); background: rgba(255,255,255,.8); color: var(--purple-dark); }
.kids-button-dark { background: var(--ink); color: #fff; }
.kids-button-reset { border: 1px solid rgba(135,51,89,.18); background: #fff; color: #873359; }
.kids-safety-note { display: flex; max-width: 590px; align-items: flex-start; gap: 11px; margin-top: 24px; color: #5f5073; font-size: .93rem; }
.kids-safety-note i { margin-top: 4px; color: #228568; }

.kids-world { position: relative; min-height: 500px; }
.kids-planet { position: absolute; inset: 30px 12px 50px; overflow: hidden; border: 10px solid rgba(255,255,255,.75); border-radius: 48% 52% 44% 56%; background: linear-gradient(160deg, #8fe1ff 0 44%, #7ce0af 44% 68%, #ffe06d 68%); box-shadow: var(--shadow), inset 0 -30px 50px rgba(65,36,111,.13); transform: rotate(2deg); }
.kids-character { position: absolute; z-index: 2; filter: drop-shadow(0 10px 7px rgba(65,36,111,.15)); animation: kidsFloat 3.6s ease-in-out infinite; }
.kids-dragon { left: 12%; bottom: 18%; font-size: clamp(4.3rem, 8vw, 7rem); }
.kids-rocket { right: 13%; top: 13%; font-size: clamp(3.8rem, 7vw, 6rem); animation-delay: -.8s; transform: rotate(-12deg); }
.kids-masks { right: 23%; bottom: 17%; font-size: clamp(3rem, 5vw, 4.5rem); animation-delay: -1.5s; }
.kids-path { position: absolute; left: 35%; bottom: -28px; width: 36%; height: 72%; border: 26px solid rgba(255,255,255,.72); border-width: 0 22px; border-radius: 50%; transform: rotate(-18deg); }
.kids-tree { position: absolute; bottom: 5%; color: #2f8b5e; font-size: 4rem; }
.kids-tree-one { left: 48%; }.kids-tree-two { right: 4%; transform: scale(.7); }
.kids-cloud { position: absolute; width: 100px; height: 34px; border-radius: 50px; background: rgba(255,255,255,.88); box-shadow: 28px -18px 0 5px rgba(255,255,255,.88), 58px 0 0 -3px rgba(255,255,255,.88); }
.kids-cloud-one { left: 2%; top: 11%; }.kids-cloud-two { right: 4%; top: 2%; transform: scale(.72); }
.kids-spark { position: absolute; color: var(--yellow); font-size: 2.4rem; animation: kidsTwinkle 2s ease-in-out infinite; }.kids-spark-one { left: 4%; bottom: 15%; }.kids-spark-two { right: 0; top: 42%; animation-delay: -.8s; }
.kids-quest-card { position: absolute; right: 0; bottom: 22px; z-index: 3; display: grid; gap: 2px; min-width: 230px; padding: 17px 20px; border: 1px solid rgba(65,36,111,.09); border-radius: 20px; background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(65,36,111,.16); transform: rotate(-2deg); }
.kids-quest-card > span { color: var(--purple); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kids-quest-card strong { font-family: "Fredoka", sans-serif; font-size: 1.25rem; }.kids-quest-card small { color: #786887; }

.kids-progress-wrap { position: relative; z-index: 4; margin-top: -12px; }
.kids-progress-card { display: grid; grid-template-columns: auto 1.4fr repeat(3, auto); align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: 0 16px 42px rgba(65,36,111,.1); }
.kids-avatar { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 20px; background: #efe8ff; font-size: 2rem; }
.kids-level { display: grid; gap: 3px; }.kids-level > span { color: #766687; font-size: .77rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.kids-level strong { font-family: "Fredoka", sans-serif; font-size: 1.16rem; }.kids-level small { color: #766687; }
.kids-level-track { overflow: hidden; height: 7px; margin: 5px 0 2px; border-radius: 99px; background: #ede7f4; }.kids-level-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink), var(--yellow)); transition: width .35s ease; }
.kids-progress-stat { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 16px; background: #faf7ff; }.kids-progress-stat > span:last-child { display: grid; }.kids-progress-stat strong { font-family: "Fredoka", sans-serif; font-size: 1.2rem; line-height: 1; }.kids-progress-stat small { color: #776a84; }.kids-stat-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; }.kids-stat-yellow { background: #fff2b8; color: #9a6b00; }.kids-stat-coral { background: #ffe0e0; color: #c84f57; }.kids-stat-blue { background: #dff3ff; color: #277ba8; }

.kids-games-section, .kids-badges-section, .kids-grownups { padding: 88px 0; }
.kids-section-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 32px; margin-bottom: 32px; }.kids-section-heading h2, .kids-grownups h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); }.kids-section-heading > p { margin: 0; color: var(--muted); font-size: 1.08rem; }.kids-section-heading-compact { margin-bottom: 24px; }
.kids-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.kids-game-card { display: grid; grid-template-columns: 190px 1fr; min-height: 270px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 16px 44px rgba(65,36,111,.09); transition: transform .2s ease, box-shadow .2s ease; }.kids-game-card:hover { transform: translateY(-5px) rotate(-.25deg); box-shadow: var(--shadow); }
.kids-game-art { position: relative; display: grid; place-items: center; overflow: hidden; }.kids-card-cue .kids-game-art { background: #fff0a9; }.kids-card-story .kids-game-art { background: #eadbff; }.kids-card-rhythm .kids-game-art { background: #d8f3ff; }.kids-card-scene .kids-game-art { background: #ffd9e7; }
.kids-game-number { position: absolute; left: 16px; top: 12px; color: rgba(36,19,63,.55); font-weight: 900; }.kids-game-emoji { position: relative; z-index: 2; font-size: 5.6rem; filter: drop-shadow(0 14px 8px rgba(65,36,111,.13)); }.kids-game-burst { position: absolute; width: 150px; height: 150px; border: 2px dashed rgba(65,36,111,.22); border-radius: 44% 56%; animation: kidsSpin 14s linear infinite; }
.kids-game-copy { display: flex; flex-direction: column; padding: 26px; }.kids-game-tags { display: flex; flex-wrap: wrap; gap: 7px; }.kids-game-tags span { padding: 5px 8px; border-radius: 99px; background: #f4f0f9; color: #705d83; font-size: .73rem; font-weight: 900; text-transform: uppercase; }.kids-game-copy h3 { margin: 15px 0 6px; font-family: "Fredoka", sans-serif; font-size: 1.8rem; }.kids-game-copy p { margin: 0; color: var(--muted); }.kids-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 20px; color: #766887; font-weight: 800; }.kids-play-button { min-height: 44px; padding: 10px 15px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; cursor: pointer; font-weight: 900; }

.kids-badges-section { background: #f5edff; }.kids-badges { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }.kids-badge { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid rgba(65,36,111,.1); border-radius: 18px; background: rgba(255,255,255,.72); opacity: .48; filter: grayscale(.75); transition: .2s ease; }.kids-badge.is-earned { opacity: 1; filter: none; background: #fff; box-shadow: 0 12px 24px rgba(65,36,111,.09); transform: translateY(-2px); }.kids-badge > span { font-size: 2rem; }.kids-badge div { display: grid; }.kids-badge strong { font-family: "Fredoka", sans-serif; }.kids-badge small { color: #756783; }
.kids-grownups-card { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: clamp(24px,5vw,54px); border-radius: 34px; color: #fff; background: radial-gradient(circle at 95% 10%, rgba(255,216,90,.22), transparent 26%), linear-gradient(135deg, #29174a, #54318c); box-shadow: var(--shadow); }.kids-grownups-icon { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 22px; background: rgba(255,255,255,.12); color: var(--yellow); font-size: 2rem; }.kids-grownups .kids-eyebrow { color: #cebaff; }.kids-grownups p { max-width: 850px; color: #e8dcf6; }.kids-reset-status { min-height: 1.4em; }
.kids-footer { padding: 34px 0 92px; border-top: 1px solid var(--line); background: #fff; }.kids-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.kids-footer p { color: var(--muted); }.kids-footer > div > a:last-child { color: var(--purple); font-weight: 900; text-decoration: none; }.kids-mobile-tabs { display: none; }

.kids-game-dialog { width: min(680px, calc(100% - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border: 0; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 35px 100px rgba(25,13,51,.38); }.kids-game-dialog::backdrop { background: rgba(29,15,52,.58); backdrop-filter: blur(7px); }.kids-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, #4a2486, #7a42ea); }.kids-dialog-header p { margin: 0; color: #e9dcff; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.kids-dialog-header h2 { margin: 2px 0 0; font-family: "Fredoka", sans-serif; font-size: 1.75rem; }.kids-dialog-head-actions { display: flex; align-items: center; gap: 10px; }.kids-dialog-stars { padding: 7px 10px; border-radius: 99px; background: rgba(255,255,255,.14); font-weight: 900; }.kids-dialog-stars i { color: var(--yellow); }.kids-dialog-close { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 13px; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; }
.kids-dialog-progress { display: flex; height: 7px; background: #eee8f6; }.kids-dialog-progress span { flex: 1; border-right: 2px solid #fff; }.kids-dialog-progress span.is-done { background: linear-gradient(90deg,var(--mint),var(--blue)); }.kids-dialog-body { max-height: calc(100dvh - 145px); overflow: auto; padding: 24px; }.kids-game-stage { min-height: 260px; display: grid; align-content: center; gap: 18px; text-align: center; }.kids-stage-emoji { font-size: 4.6rem; line-height: 1; }.kids-stage-kicker { color: var(--purple); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.kids-game-stage h3 { margin: 0; font-family: "Fredoka", sans-serif; font-size: clamp(1.8rem,6vw,2.65rem); line-height: 1.08; }.kids-game-stage p { margin: 0 auto; max-width: 520px; color: var(--muted); font-size: 1.05rem; }.kids-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.kids-choice { min-height: 70px; padding: 13px; border: 2px solid #e9e1f3; border-radius: 16px; background: #faf7ff; color: var(--ink); cursor: pointer; font-weight: 900; }.kids-choice:hover, .kids-choice:focus-visible { border-color: var(--purple); background: #f1eaff; }.kids-choice.is-correct { border-color: #28a77f; background: #ddf9ef; }.kids-choice.is-wrong { border-color: #e66b82; background: #ffe7ec; }.kids-game-feedback { min-height: 1.5em; margin: 12px 0 0; text-align: center; color: #5e4c72; font-weight: 900; }.kids-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 17px; }.kids-beat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.kids-beat { aspect-ratio: 1; border: 0; border-radius: 20px; cursor: pointer; box-shadow: inset 0 -8px 0 rgba(0,0,0,.08); }.kids-beat[data-tone="0"] { background:#ff718f; }.kids-beat[data-tone="1"] { background:#ffd45b; }.kids-beat[data-tone="2"] { background:#55d5b0; }.kids-beat[data-tone="3"] { background:#6fbef9; }.kids-beat.is-lit { transform: translateY(-5px) scale(1.05); filter: brightness(1.18); box-shadow: 0 0 0 6px rgba(109,61,240,.14); }.kids-scene-parts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; text-align: left; }.kids-scene-part { padding: 13px; border-radius: 15px; background: #f7f1ff; }.kids-scene-part span { display: block; color: #7c6891; font-size: .72rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.kids-scene-part strong { font-family: "Fredoka", sans-serif; }

@keyframes kidsFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(3deg); } }
@keyframes kidsTwinkle { 50% { opacity: .35; transform: scale(.7) rotate(30deg); } }
@keyframes kidsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; } }

@media (max-width: 900px) {
  .kids-header-row { min-height: 68px; }.kids-nav { position: absolute; left: 18px; right: 18px; top: 61px; display: none; flex-direction: column; align-items: stretch; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.kids-nav.is-open { display: flex; }.kids-menu-toggle { display: grid; place-items: center; }.kids-sound-toggle { margin-left: auto; }.kids-sound-toggle span { display: none; }
  .kids-hero { padding-top: 54px; }.kids-hero-grid { grid-template-columns: 1fr; }.kids-world { min-height: 440px; }.kids-progress-card { grid-template-columns: auto 1fr repeat(3,auto); }.kids-progress-stat small { display: none; }
  .kids-section-heading { grid-template-columns: 1fr; align-items: start; }.kids-games-grid { grid-template-columns: 1fr; }.kids-badges { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 620px) {
  .kids-container { width: min(100% - 24px, 1180px); }.kids-brand small { display: none; }.kids-hero { padding-top: 42px; }.kids-hero h1 { font-size: clamp(3rem,15vw,4.8rem); }.kids-hero-actions { align-items: stretch; }.kids-hero-actions .kids-button { flex: 1 1 100%; }.kids-world { min-height: 330px; }.kids-planet { inset: 15px 4px 38px; }.kids-quest-card { right: 6px; bottom: 8px; min-width: 200px; }.kids-character.kids-dragon { font-size: 4.2rem; }.kids-character.kids-rocket { font-size: 3.7rem; }
  .kids-progress-card { grid-template-columns: auto 1fr; gap: 12px; }.kids-progress-stat { justify-content: center; }.kids-progress-stat:nth-of-type(1) { grid-column: 1 / 2; }.kids-progress-stat small { display: block; }.kids-game-card { grid-template-columns: 112px 1fr; min-height: 240px; }.kids-game-art { min-height: 100%; }.kids-game-emoji { font-size: 3.9rem; }.kids-game-burst { width: 90px; height: 90px; }.kids-game-copy { padding: 20px 17px; }.kids-game-copy h3 { font-size: 1.55rem; }.kids-game-footer { align-items: flex-end; }.kids-game-footer > span { font-size: .78rem; }.kids-play-button { min-width: 72px; }
  .kids-games-section,.kids-badges-section,.kids-grownups { padding: 64px 0; }.kids-badges { grid-template-columns: 1fr; }.kids-grownups-card { grid-template-columns: 1fr; }.kids-footer { padding-bottom: 96px; }.kids-footer-row { flex-direction: column; text-align: center; }.kids-mobile-tabs { position: fixed; left: 8px; right: 8px; bottom: max(8px,env(safe-area-inset-bottom)); z-index: 90; display: grid; grid-template-columns: repeat(4,1fr); padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 14px 38px rgba(36,19,63,.2); backdrop-filter: blur(15px); }.kids-mobile-tabs a { display: grid; place-items: center; gap: 2px; min-height: 50px; border-radius: 12px; color: #766687; text-decoration: none; font-size: .69rem; font-weight: 900; }.kids-mobile-tabs a.is-active { background: #efe8ff; color: var(--purple); }.kids-dialog-body { padding: 18px; }.kids-choice-grid,.kids-scene-parts { grid-template-columns: 1fr; }.kids-game-stage { min-height: 230px; }.kids-beat-grid { gap: 7px; }.kids-dialog-actions .kids-button { min-width: 0; flex: 1; }
}