:root {
  color-scheme: light;
  --ink: #25304c;
  --muted: #68728a;
  --paper: #fffaf1;
  --white: #ffffff;
  --line: rgba(73, 80, 118, 0.16);
  --purple: #8e66ff;
  --blue: #0b9eed;
  --green: #70c815;
  --orange: #ff9700;
  --pink: #ef4d82;
  --yellow: #ffd23d;
  --shadow: 0 12px 0 rgba(73, 80, 118, 0.12), 0 18px 38px rgba(39, 60, 107, 0.18);
  --soft-shadow: 0 8px 20px rgba(39, 60, 107, 0.15);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html,
body,
#app-root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  background: #bff2ff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
canvas {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
}

h1,
h2,
p {
  margin: 0;
}

.world-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, 0.85) 0 7%, transparent 7.5%),
    radial-gradient(circle at 34% 12%, rgba(255, 255, 255, 0.86) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.84) 0 6%, transparent 6.5%),
    linear-gradient(180deg, #70d7ff 0%, #c5f4ff 50%, #f9f5bf 100%);
}

.world-shell::before,
.world-shell::after {
  content: "";
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: -8vh;
  height: 28vh;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 85%, #52bd35 0 24%, transparent 25%),
    radial-gradient(ellipse at 54% 80%, #8fd737 0 31%, transparent 32%),
    radial-gradient(ellipse at 84% 88%, #5abf35 0 26%, transparent 27%);
}

.world-shell::after {
  bottom: -13vh;
  height: 25vh;
  background:
    radial-gradient(ellipse at 28% 75%, #a4dc42 0 35%, transparent 36%),
    radial-gradient(ellipse at 74% 76%, #91d639 0 34%, transparent 35%);
  opacity: 0.9;
}

.home-shell {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
}

.home-hero {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  display: grid;
  gap: clamp(14px, 2.6vw, 30px);
  justify-items: center;
}

.round-nav {
  width: clamp(62px, 8vw, 86px);
  height: clamp(62px, 8vw, 86px);
  display: grid;
  place-items: center;
  border: 6px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(180deg, #ffd54c, #f3a800);
  box-shadow: var(--soft-shadow), inset 0 -7px 0 rgba(0, 0, 0, 0.12);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.round-nav svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-nav:active,
.big-section-card:active,
.menu-card:active,
.choice-card:active,
.side-nav-button:active,
.listen-button:active,
.tool-button:active,
.pill-button:active,
.round-mini:active,
.round-play:active {
  transform: translateY(5px);
  box-shadow: 0 5px 0 rgba(73, 80, 118, 0.12), 0 12px 24px rgba(39, 60, 107, 0.14);
}

.settings-button,
.parent-button {
  position: absolute;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
}

.settings-button {
  left: max(20px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #a574ff, #7546d8);
}

.parent-button {
  right: max(20px, env(safe-area-inset-right));
}

.mascot-logo {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.child-face {
  position: relative;
  width: clamp(142px, 20vw, 250px);
  aspect-ratio: 1;
  border: 10px solid #ffffff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 39% 44%, #3d2316 0 4%, transparent 4.5%),
    radial-gradient(circle at 61% 44%, #3d2316 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 60%, #f5a480 0 4%, transparent 4.5%),
    radial-gradient(circle at 36% 58%, rgba(255, 117, 181, 0.36) 0 8%, transparent 8.5%),
    radial-gradient(circle at 64% 58%, rgba(255, 117, 181, 0.36) 0 8%, transparent 8.5%),
    linear-gradient(180deg, #ffd36d 0 33%, #ffe3c8 34% 100%);
  box-shadow: var(--soft-shadow);
}

.child-face::before {
  content: "";
  position: absolute;
  inset: 8% 15% auto;
  height: 28%;
  border-radius: 50% 50% 46% 46%;
  background: #a8551b;
  box-shadow: 22px 6px 0 #8e4314, -16px 9px 0 #b96324;
}

.child-face::after {
  content: "";
  position: absolute;
  left: 36%;
  right: 36%;
  bottom: 29%;
  height: 10%;
  border-bottom: 7px solid #8f3d32;
  border-radius: 50%;
}

.brand-wordmark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px;
  color: #ffffff;
  font-size: clamp(2.7rem, 6.5vw, 5.2rem);
  font-weight: 1000;
  line-height: 0.92;
  text-shadow:
    0 6px 0 #ffffff,
    0 10px 18px rgba(51, 65, 110, 0.25);
}

.brand-wordmark span {
  color: hsl(calc(25 + var(--i) * 36), 88%, 55%);
}

.home-card-grid {
  width: min(1080px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 34px);
}

.big-section-card {
  position: relative;
  min-height: clamp(190px, 22vw, 270px);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: clamp(16px, 2vw, 28px);
  border: 8px solid #ffffff;
  border-radius: var(--radius);
  color: #ffffff;
  box-shadow: var(--shadow), inset 0 -12px 0 rgba(0, 0, 0, 0.12);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.big-section-card.games {
  background: linear-gradient(180deg, #b377ff, #7c4ce4);
}

.big-section-card.art {
  background: linear-gradient(180deg, #1fc6ff, #0b95df);
}

.big-section-card.music {
  background: linear-gradient(180deg, #a1e928, #54b900);
}

.card-star,
.menu-star {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 36px;
  height: 36px;
  color: var(--yellow);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12));
}

.card-star svg,
.menu-star svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: #fff7c7;
  stroke-width: 5;
}

.card-visual {
  width: min(58%, 190px);
  color: #ffffff;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.12));
}

.card-visual svg {
  width: 100%;
  height: auto;
  fill: rgba(255, 255, 255, 0.92);
  stroke: rgba(73, 58, 112, 0.28);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-title {
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 1000;
  text-shadow: 0 5px 0 rgba(34, 48, 85, 0.22);
}

.landscape-decor {
  position: absolute;
  z-index: 1;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 24%;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 72%, #ffe56d 0 14px, transparent 15px),
    radial-gradient(circle at 95% 75%, #ff78a8 0 16px, transparent 17px),
    linear-gradient(130deg, transparent 0 42%, rgba(255, 211, 117, 0.78) 43% 56%, transparent 57%);
}

.section-shell,
.activity-shell {
  display: grid;
  grid-template-columns: minmax(235px, 300px) minmax(0, 1fr);
}

.side-panel {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(14px, 2vw, 28px);
  background:
    radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(235, 218, 255, 0.92));
  border-right: 4px solid rgba(255, 255, 255, 0.78);
  box-shadow: 12px 0 28px rgba(74, 58, 128, 0.16);
}

.side-logo {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: inherit;
}

.side-logo img {
  width: min(210px, 70%);
  height: auto;
}

.side-logo .brand-wordmark {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  text-shadow: 0 3px 0 #ffffff, 0 8px 12px rgba(73, 80, 118, 0.18);
}

.side-nav {
  display: grid;
  gap: 12px;
}

.side-nav-button,
.parent-entry,
.parent-menu,
.profile-chip,
.listen-button,
.tool-button,
.pill-button,
.round-mini,
.round-play,
.settings-grid article button {
  border: 4px solid #ffffff;
  border-radius: var(--radius);
  box-shadow: 0 7px 0 rgba(73, 80, 118, 0.12), 0 12px 22px rgba(73, 80, 118, 0.12);
}

.side-nav-button,
.parent-entry {
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #ffffff;
  background: linear-gradient(180deg, #a970ff, #794fe0);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  font-weight: 1000;
  text-align: left;
}

.side-nav-button:nth-child(2),
.side-nav-button.is-active:nth-child(2) {
  background: linear-gradient(180deg, #21c6ff, #0b95df);
}

.side-nav-button:nth-child(3),
.side-nav-button.is-active:nth-child(3) {
  background: linear-gradient(180deg, #a1e928, #54b900);
}

.side-nav-button.is-active {
  outline: 4px solid rgba(255, 255, 255, 0.8);
}

.side-nav-button svg,
.parent-entry svg,
.parent-menu svg,
.profile-chip svg,
.listen-button svg,
.tool-button svg,
.pill-button svg,
.round-mini svg,
.round-play svg,
.settings-grid article button svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side-nav-button span,
.parent-entry span,
.parent-menu span,
.settings-grid article button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.parent-entry {
  min-height: 58px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-self: start;
  color: #5d43bc;
  background: linear-gradient(180deg, #fffde0, #f4ffd7);
  font-size: 1.15rem;
}

.parent-entry svg {
  fill: var(--yellow);
  stroke: #e3a800;
}

.side-decoration {
  align-self: end;
  min-height: 160px;
  position: relative;
}

.happy-pet,
.speaker-box {
  position: absolute;
  bottom: 0;
  display: block;
}

.happy-pet {
  left: 0;
  width: 100px;
  height: 86px;
  border-radius: 42% 42% 36% 36%;
  background:
    radial-gradient(circle at 35% 41%, #2a1b12 0 7%, transparent 7.6%),
    radial-gradient(circle at 65% 41%, #2a1b12 0 7%, transparent 7.6%),
    radial-gradient(circle at 50% 61%, #ffffff 0 18%, transparent 18.5%),
    #d98a2a;
}

.happy-pet::before,
.happy-pet::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 34px;
  height: 48px;
  border-radius: 50%;
  background: #b36a23;
}

.happy-pet::before {
  left: -16px;
  transform: rotate(18deg);
}

.happy-pet::after {
  right: -16px;
  transform: rotate(-18deg);
}

.speaker-box {
  right: 10px;
  width: 80px;
  height: 75px;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 55%, #25304c 0 25%, #596981 26% 42%, transparent 43%),
    linear-gradient(180deg, #a16cff, #5c44d2);
}

.section-main,
.activity-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(18px, 3vw, 38px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 26px);
}

.floating-actions {
  position: absolute;
  z-index: 5;
  top: clamp(16px, 3vw, 28px);
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.floating-actions .round-nav {
  pointer-events: auto;
}

.back-button {
  order: -1;
  background: linear-gradient(180deg, #a574ff, #7546d8);
}

.ribbon-header,
.activity-top {
  width: min(780px, calc(100% - 150px));
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #ffffff;
  text-align: center;
}

.ribbon-title {
  min-height: clamp(92px, 12vw, 144px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  padding: 14px clamp(24px, 5vw, 64px);
  border: 6px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--section) 92%, #ffffff 8%), color-mix(in srgb, var(--section) 80%, #000000 20%));
  box-shadow: var(--soft-shadow), inset 0 -10px 0 rgba(0, 0, 0, 0.12);
}

.ribbon-title h1 {
  font-size: clamp(3rem, 8vw, 5.8rem);
  line-height: 0.95;
  text-shadow: 0 5px 0 rgba(26, 35, 78, 0.24);
}

.ribbon-title svg {
  width: clamp(34px, 5vw, 56px);
  height: clamp(34px, 5vw, 56px);
  fill: var(--yellow);
  stroke: #fff7c7;
  stroke-width: 5;
  flex: 0 0 auto;
}

.ribbon-header p {
  color: color-mix(in srgb, var(--section) 74%, #25304c 26%);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 1000;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.85);
}

.section-card-grid {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

.music-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.menu-card {
  position: relative;
  min-height: clamp(290px, 30vw, 420px);
  display: grid;
  grid-template-rows: minmax(130px, 1fr) auto auto;
  gap: 12px;
  padding: clamp(14px, 2vw, 24px);
  color: var(--ink);
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 90%, #ffffff 10%) 0 68%, #fffaf1 69%);
  border: 8px solid #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.menu-visual {
  align-self: center;
  justify-self: center;
  width: min(90%, 260px);
  color: #ffffff;
}

.menu-visual svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 9px 0 rgba(0, 0, 0, 0.12));
}

.menu-title-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #ffffff;
  border: 4px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #ffffff 8%), color-mix(in srgb, var(--card) 80%, #000000 20%));
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.1);
}

.menu-title-row strong {
  min-width: 0;
  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 0 rgba(26, 35, 78, 0.24);
}

.play-badge {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--card);
  background: #fffaf1;
  box-shadow: inset 0 -6px 0 rgba(73, 80, 118, 0.12);
}

.play-badge svg {
  width: 60%;
  height: 60%;
  fill: currentColor;
  stroke: currentColor;
}

.menu-body {
  min-height: 56px;
  color: #6d7180;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.music-control-bar {
  width: min(920px, 100%);
  justify-self: center;
  display: grid;
  grid-template-columns: 1.5fr 64px 88px 64px 1.3fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 6px solid #ffffff;
  border-radius: var(--radius);
  background: rgba(255, 250, 225, 0.95);
  box-shadow: var(--soft-shadow);
}

.pill-button,
.round-mini,
.round-play {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 1000;
  background: linear-gradient(180deg, #9ce323, #52b800);
}

.pill-button.orange {
  background: linear-gradient(180deg, #ffca26, #ff9700);
}

.round-mini,
.round-play {
  aspect-ratio: 1;
  min-height: auto;
  height: 64px;
  border-radius: 50%;
}

.round-play {
  height: 86px;
}

.art-desk,
.page-critters {
  min-height: 96px;
  position: relative;
  pointer-events: none;
}

.pencils,
.paint-jars,
.palette-decor,
.crayon-cup,
.balloon,
.elephant {
  position: absolute;
  bottom: 0;
  display: block;
}

.pencils {
  left: 2%;
  width: 120px;
  height: 98px;
  background:
    linear-gradient(90deg, #ff5a61 0 14%, #ffd166 14% 28%, #3bb273 28% 42%, #3a86ff 42% 56%, #8e66ff 56% 70%, #ff8a3d 70% 84%, #18a6a6 84%);
  clip-path: polygon(0 100%, 10% 0, 20% 100%, 30% 0, 40% 100%, 50% 0, 60% 100%, 70% 0, 80% 100%, 90% 0, 100% 100%);
}

.paint-jars {
  left: 18%;
  width: 156px;
  height: 68px;
  background:
    radial-gradient(circle at 22% 64%, #ff3c22 0 18%, transparent 19%),
    radial-gradient(circle at 50% 64%, #ffd23d 0 18%, transparent 19%),
    radial-gradient(circle at 78% 64%, #0b9eed 0 18%, transparent 19%);
}

.palette-decor {
  right: 21%;
  width: 172px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 42%, #ffd23d 0 13%, transparent 14%),
    radial-gradient(circle at 53% 38%, #70c815 0 12%, transparent 13%),
    radial-gradient(circle at 73% 48%, #8e66ff 0 13%, transparent 14%),
    radial-gradient(circle at 44% 72%, #ff5a61 0 12%, transparent 13%),
    radial-gradient(circle at 60% 69%, #ffffff 0 10%, transparent 11%),
    #fff4c5;
  border: 5px solid rgba(148, 93, 24, 0.15);
}

.crayon-cup {
  right: 4%;
  width: 102px;
  height: 95px;
  border-radius: 0 0 32px 32px;
  background:
    linear-gradient(90deg, #ffd23d 0 16%, #70c815 16% 32%, #8e66ff 32% 48%, #ff8a3d 48% 64%, #3a86ff 64% 80%, #ff5a61 80%) top/100% 46% no-repeat,
    #b674ff;
}

.balloon {
  right: 8%;
  width: 88px;
  height: 112px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(90deg, #ff75b5, #ffd166, #8e66ff);
}

.elephant {
  right: 2%;
  width: 124px;
  height: 90px;
  border-radius: 48%;
  background:
    radial-gradient(circle at 34% 44%, #25304c 0 5%, transparent 5.6%),
    radial-gradient(circle at 61% 44%, #25304c 0 5%, transparent 5.6%),
    #9e82ff;
}

.activity-main {
  grid-template-rows: auto 1fr;
}

.activity-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 120px;
  text-align: left;
}

.activity-top p {
  color: color-mix(in srgb, var(--section) 75%, #25304c 25%);
  font-weight: 1000;
}

.activity-top h1 {
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 4px 0 color-mix(in srgb, var(--section) 75%, #000000 25%);
}

.score-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.listen-button,
.score-pill {
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  color: #ffffff;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--section), color-mix(in srgb, var(--section) 78%, #000000 22%));
  font-weight: 1000;
}

.score-pill {
  border: 4px solid #ffffff;
  box-shadow: 0 7px 0 rgba(73, 80, 118, 0.12);
}

.score-pill svg {
  width: 34px;
  height: 34px;
  fill: var(--yellow);
  stroke: #e3a800;
}

.play-panel,
.drawing-panel,
.instrument-panel {
  align-self: stretch;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2vw, 24px);
  border: 7px solid #ffffff;
  border-radius: var(--radius);
  background: rgba(255, 250, 241, 0.92);
  box-shadow: var(--shadow);
}

.play-panel {
  grid-template-rows: auto 1fr auto;
}

.prompt-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.prompt-row p {
  color: var(--muted);
  font-weight: 1000;
  text-transform: uppercase;
}

.prompt-row h2 {
  margin-top: 3px;
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.round-dots {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.round-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #d5d9e5;
}

.round-dots .is-filled {
  background: var(--green);
}

.choice-grid,
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  align-content: center;
}

.concept-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-card {
  min-height: clamp(146px, 19vw, 220px);
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 14px;
  color: var(--ink);
  border: 5px solid rgba(73, 80, 118, 0.14);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 8px 0 rgba(73, 80, 118, 0.1);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 1000;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.choice-card > span:last-child {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

.choice-card.is-correct {
  border-color: #45bf64;
  background: #effff2;
}

.choice-card.is-try {
  border-color: var(--yellow);
  background: #fff9d9;
}

.color-token {
  width: clamp(82px, 12vw, 130px);
  height: clamp(82px, 12vw, 130px);
  border: 6px solid rgba(37, 48, 76, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.1);
}

.shape-token,
.concept-token {
  width: min(100%, 200px);
  height: clamp(86px, 12vw, 132px);
}

.shape-token svg,
.concept-token svg {
  width: 100%;
  height: 100%;
}

.feedback-strip {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px dashed transparent;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 1000;
  text-align: center;
}

.feedback-strip.is-good {
  background: rgba(112, 200, 21, 0.14);
  border-color: rgba(112, 200, 21, 0.55);
}

.feedback-strip.is-soft {
  background: rgba(255, 210, 61, 0.16);
  border-color: rgba(255, 210, 61, 0.72);
}

.drawing-panel {
  grid-template-rows: auto 1fr auto;
}

.drawing-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(8, minmax(42px, 1fr));
  gap: 9px;
}

.swatch {
  min-width: 42px;
  aspect-ratio: 1;
  border: 4px solid rgba(37, 48, 76, 0.18);
  border-radius: var(--radius);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.1), 0 5px 0 rgba(73, 80, 118, 0.1);
}

.swatch.is-active {
  border-color: var(--ink);
  outline: 4px solid #ffffff;
}

.tool-button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  color: #ffffff;
  background: linear-gradient(180deg, #8e66ff, #6542c9);
  font-weight: 1000;
}

.drawing-canvas {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  background: #ffffff;
  border: 5px solid rgba(73, 80, 118, 0.16);
  border-radius: var(--radius);
  touch-action: none;
  box-shadow: inset 0 0 0 10px rgba(11, 158, 237, 0.05);
}

.drawing-footer {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 35%);
  gap: 14px;
  align-items: center;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 1000;
}

.trace-meter,
.limit-track {
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #ded7ec;
}

.trace-meter span,
.limit-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #71c51f, #a1e928);
}

.instrument-panel {
  align-content: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--instrument) 24%, #ffffff 76%), rgba(255, 250, 241, 0.96));
}

.instrument-hero {
  display: grid;
  grid-template-columns: minmax(160px, 300px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 34px);
  align-items: center;
}

.instrument-hero > span {
  color: var(--instrument);
}

.instrument-hero svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 0 rgba(73, 80, 118, 0.12));
}

.instrument-hero p {
  color: var(--muted);
  font-weight: 1000;
}

.instrument-hero h2 {
  margin: 4px 0;
  color: var(--instrument);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.95;
}

.instrument-hero strong {
  color: var(--ink);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
}

.instrument-pads {
  display: grid;
  grid-template-columns: repeat(8, minmax(52px, 1fr));
  gap: 10px;
  align-items: end;
}

.instrument-pads button {
  min-height: clamp(90px, 16vw, 190px);
  border: 4px solid #ffffff;
  border-radius: var(--radius);
  color: #ffffff;
  background: linear-gradient(180deg, var(--instrument), color-mix(in srgb, var(--instrument) 78%, #000000 22%));
  box-shadow: 0 8px 0 rgba(73, 80, 118, 0.12);
  font-size: 1.4rem;
  font-weight: 1000;
}

.piano-pads button:nth-child(even) {
  min-height: clamp(70px, 11vw, 150px);
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #eceaf5);
}

.drum-pads {
  grid-template-columns: repeat(5, minmax(70px, 1fr));
}

.drum-pads button {
  aspect-ratio: 1;
  min-height: 120px;
  border-radius: 50%;
}

.parent-layout {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(235px, 300px) minmax(0, 1fr);
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 246, 207, 0.8) 0 9%, transparent 9.4%),
    linear-gradient(120deg, #ead7ff 0 17%, #fffaf7 17% 100%);
}

.parent-sidebar {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 12px;
  padding: clamp(14px, 2vw, 26px);
  background: linear-gradient(180deg, #d7beff, #f3e9ff);
  border-right: 4px solid rgba(255, 255, 255, 0.72);
}

.parent-menu {
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  color: #5d43bc;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
  font-weight: 1000;
  text-align: left;
}

.parent-menu.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #a970ff, #794fe0);
}

.parent-main {
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 32px);
}

.parent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.parent-header div:first-child {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.parent-header p {
  grid-row: 1 / 3;
  font-size: 2rem;
}

.parent-header h1 {
  color: #6542c9;
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 1;
}

.parent-header span {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
}

.profile-chip {
  min-height: 72px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: #6b4cd5;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.profile-chip strong {
  display: block;
  font-size: 1.2rem;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat-card,
.daily-card,
.chart-card,
.recent-card,
.limit-card,
.settings-grid article {
  border: 3px solid rgba(101, 66, 201, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
}

.stat-card {
  min-height: 190px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  color: #ffffff;
}

.stat-card.games {
  background: linear-gradient(135deg, #9d70ff, #7645e3);
}

.stat-card.art {
  background: linear-gradient(135deg, #22bfff, #0b95df);
}

.stat-card.music {
  background: linear-gradient(135deg, #a1e928, #54b900);
}

.stat-card div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-card svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.stat-card h2,
.daily-card h2,
.chart-card h2,
.recent-card h2,
.limit-card h2,
.settings-grid h2 {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: inherit;
}

.stat-card p,
.stat-card small {
  font-weight: 900;
}

.stat-card strong {
  font-size: clamp(2rem, 4vw, 3rem);
}

.progress {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffda4d, #ffab22);
}

.daily-card,
.chart-card,
.recent-card,
.limit-card,
.settings-grid article {
  padding: 18px;
}

.daily-card h2,
.chart-card h2,
.recent-card h2,
.limit-card h2,
.settings-grid h2 {
  color: #6542c9;
  margin-bottom: 12px;
}

.daily-card p,
.recent-card p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(73, 80, 118, 0.14);
}

.daily-card strong {
  color: #6b3c22;
}

.parent-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.92fr 1fr;
  gap: 16px;
}

.bar-chart {
  height: 185px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding-top: 20px;
}

.bar {
  height: 150px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  gap: 8px;
}

.bar i {
  width: 24px;
  display: block;
  margin-top: -1px;
}

.bar i:nth-child(1) {
  background: #9d70ff;
  border-radius: 7px 7px 0 0;
}

.bar i:nth-child(2) {
  background: #22bfff;
}

.bar i:nth-child(3) {
  background: #70c815;
  border-radius: 0 0 7px 7px;
}

.bar b {
  color: var(--muted);
  font-size: 0.84rem;
}

.recent-card p {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
}

.recent-card p span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border-radius: 50%;
  background: var(--dot);
}

.recent-card svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.recent-card strong,
.recent-card em {
  grid-column: 2;
  min-width: 0;
}

.recent-card strong {
  font-size: 0.95rem;
}

.recent-card em {
  color: var(--muted);
  font-style: normal;
}

.limit-card {
  display: grid;
  align-content: start;
  gap: 9px;
}

.limit-card strong {
  font-size: 1.55rem;
}

.limit-card b {
  color: #48a922;
  font-size: 1.7rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.segmented button,
.settings-grid article > button {
  min-height: 48px;
  padding: 8px 12px;
  color: #6542c9;
  background: #ffffff;
  font-weight: 1000;
}

.segmented button.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #a970ff, #794fe0);
}

.settings-grid article:nth-child(2) {
  display: grid;
  gap: 10px;
}

.settings-grid article > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
}

@media (max-width: 1100px) {
  .section-shell,
  .activity-shell,
  .parent-layout {
    grid-template-columns: 1fr;
  }

  .side-panel,
  .parent-sidebar {
    min-height: auto;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    padding: 10px;
    border-right: 0;
    border-bottom: 4px solid rgba(255, 255, 255, 0.72);
  }

  .side-logo img,
  .side-decoration,
  .parent-sidebar .side-logo img {
    display: none;
  }

  .side-logo .brand-wordmark {
    font-size: 1.65rem;
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .side-nav-button {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr);
    font-size: 1rem;
  }

  .side-nav-button svg,
  .parent-entry svg,
  .parent-menu svg {
    width: 32px;
    height: 32px;
  }

  .parent-entry {
    min-height: 50px;
    font-size: 0.96rem;
  }

  .ribbon-header {
    width: min(780px, 100%);
    margin-top: 72px;
  }

  .activity-top {
    padding: 86px 0 0;
  }

  .section-card-grid,
  .music-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .home-shell {
    align-items: start;
    padding-top: 78px;
  }

  .home-card-grid {
    grid-template-columns: 1fr;
  }

  .big-section-card {
    min-height: 164px;
    grid-template-columns: 110px minmax(0, 1fr);
    grid-template-rows: 1fr;
    text-align: left;
  }

  .card-visual {
    width: 96px;
  }

  .card-title {
    justify-self: start;
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  .brand-wordmark {
    font-size: clamp(2.65rem, 13vw, 4.6rem);
  }

  .side-panel,
  .parent-sidebar {
    grid-template-columns: 1fr;
  }

  .side-logo {
    display: none;
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .side-nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    padding: 8px 5px;
    text-align: center;
  }

  .parent-entry {
    justify-self: stretch;
  }

  .section-main,
  .activity-main,
  .parent-main {
    padding: 12px;
  }

  .floating-actions {
    top: 94px;
    left: 12px;
    right: 12px;
  }

  .round-nav {
    width: 58px;
    height: 58px;
    border-width: 4px;
  }

  .ribbon-header {
    margin-top: 72px;
  }

  .ribbon-title {
    min-height: 76px;
    padding: 10px 14px;
  }

  .ribbon-title h1 {
    font-size: clamp(2.4rem, 14vw, 4rem);
  }

  .ribbon-header p {
    font-size: 1.15rem;
  }

  .section-card-grid,
  .music-grid {
    grid-template-columns: 1fr;
  }

  .menu-card {
    min-height: 260px;
  }

  .music-control-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .music-control-bar .pill-button {
    grid-column: span 3;
  }

  .activity-top {
    display: grid;
    gap: 10px;
  }

  .score-cluster {
    justify-content: space-between;
  }

  .listen-button span {
    display: none;
  }

  .prompt-row {
    display: grid;
  }

  .round-dots {
    display: none;
  }

  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .concept-grid,
  .instrument-hero,
  .stats-row,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .choice-card {
    min-height: 132px;
  }

  .drawing-toolbar,
  .drawing-footer {
    grid-template-columns: 1fr;
  }

  .swatches {
    grid-template-columns: repeat(4, minmax(42px, 1fr));
  }

  .tool-button {
    width: 100%;
  }

  .drawing-canvas {
    min-height: 330px;
  }

  .instrument-pads,
  .piano-pads {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
  }

  .drum-pads {
    grid-template-columns: repeat(2, minmax(70px, 1fr));
  }

  .parent-header,
  .profile-chip {
    display: grid;
  }

  .parent-header div:first-child {
    grid-template-columns: 1fr;
  }

  .parent-header p {
    grid-row: auto;
  }
}

/* Functional overlays for the supplied activity mockups. */
.color-prompt,
.qa-prompt {
  background: #fffaf1;
}

.game-score-overlay {
  position: absolute;
  z-index: 5;
  left: 80.2%;
  top: 3.5%;
  width: 9.5%;
  height: 7.2%;
  display: grid;
  place-items: center;
  color: #4f2bb9;
  font-size: clamp(1rem, 2.5vw, 2.35rem);
  font-weight: 1000;
  line-height: 1;
}

.game-progress-overlay {
  position: absolute;
  z-index: 5;
  overflow: visible;
  border: 4px solid #ffffff;
  background: #fffaf1;
  box-shadow: 0 5px 0 rgba(72, 47, 145, 0.15);
}

.game-progress-overlay span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #a8e52b, #61c814);
}

.game-progress-overlay strong {
  position: absolute;
  display: grid;
  place-items: center;
  color: #ffffff;
  border-radius: 8px;
  background: #6844d6;
  font-size: clamp(0.72rem, 1.55vw, 1.4rem);
  font-weight: 1000;
  white-space: nowrap;
}

.shape-progress {
  left: 92%;
  top: 34%;
  width: 3.8%;
  height: 39%;
  overflow: visible;
  border-radius: 999px;
  background: #f5f2f8;
  box-sizing: border-box;
}

.shape-progress span {
  left: 4px;
  right: 4px;
  bottom: 4px;
  max-height: calc(100% - 8px);
  border-radius: 999px;
}

.shape-progress strong {
  z-index: 2;
  left: -58%;
  top: 103%;
  width: 216%;
  height: 15%;
}

.color-progress {
  left: 29.2%;
  top: 50.5%;
  width: 37.2%;
  height: 4.3%;
  border-radius: 999px;
}

.color-progress span {
  top: 0;
  width: var(--game-progress);
  height: 100% !important;
  border-radius: 999px;
}

.color-progress strong {
  left: 102%;
  top: -28%;
  width: 18%;
  height: 156%;
}

.game-hint {
  z-index: 6;
}

.shape-hint {
  left: 1.7%;
  top: 82%;
  width: 10.6%;
  height: 14.5%;
}

.qa-hint {
  left: 1.5%;
  top: 84%;
  width: 16%;
  height: 13.5%;
}

.color-hint {
  left: 81.1%;
  top: 36.2%;
  width: 16%;
  height: 13.5%;
}

.is-hint {
  animation: hint-pulse 740ms ease-in-out infinite alternate;
  box-shadow: inset 0 0 0 9px rgba(255, 210, 61, 0.92), 0 0 26px rgba(255, 210, 61, 0.85) !important;
}

@keyframes hint-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

.color-listen {
  left: 24.6%;
  top: 20.1%;
  width: 6.1%;
  height: 9.4%;
  border-radius: 50%;
}

.color-prompt {
  left: 31.2%;
  top: 19.8%;
  width: 45.2%;
  height: 9.8%;
  font-size: clamp(1.1rem, 3vw, 3rem);
}

.color-question-visual {
  position: absolute;
  z-index: 4;
  left: 35%;
  top: 28%;
  width: 35%;
  height: 20%;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.color-question-visual svg {
  width: min(58%, 230px);
  height: 100%;
}

.color-question-visual > span {
  width: min(17vw, 150px);
  aspect-ratio: 1;
  border: 7px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: var(--question-color);
  box-shadow: 0 8px 0 rgba(52, 37, 102, 0.14);
}

.color-option {
  width: 15.4%;
  height: 17.8%;
}

.color-option-1,
.color-option-2,
.color-option-3 {
  top: 57.4%;
}

.color-option-4,
.color-option-5,
.color-option-6 {
  top: 76.1%;
}

.color-option-1,
.color-option-4 {
  left: 27.5%;
}

.color-option-2,
.color-option-5 {
  left: 46.2%;
}

.color-option-3,
.color-option-6 {
  left: 65%;
}

.color-feedback {
  bottom: 1.6%;
}

.qa-listen {
  left: 18.5%;
  top: 22.2%;
  width: 6.2%;
  height: 9.5%;
}

.qa-prompt {
  left: 25.5%;
  top: 20.8%;
  width: 55%;
  height: 11%;
  font-size: clamp(1.2rem, 3.3vw, 3.4rem);
}

.qa-choice-layer,
.qa-choice-layer.two-choice {
  left: 20.8%;
  top: 33.5%;
  width: 58.1%;
  height: 49%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.8%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qa-choice {
  position: relative;
  overflow: hidden;
  padding: clamp(8px, 1.1vw, 16px);
  border: 5px solid rgba(101, 66, 201, 0.22);
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  box-shadow: 0 9px 0 rgba(75, 55, 135, 0.14), 0 16px 28px rgba(53, 71, 120, 0.13);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.qa-choice span {
  width: min(100%, 280px);
  filter: drop-shadow(0 8px 8px rgba(45, 63, 105, 0.12));
}

.qa-choice strong {
  font-size: clamp(1rem, 2.5vw, 2.35rem);
  color: #422a82;
  text-shadow: 0 2px 0 #ffffff;
}

.qa-choice::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 5px;
}

.qa-choice:active {
  transform: translateY(5px) scale(0.985);
  box-shadow: 0 4px 0 rgba(75, 55, 135, 0.14), 0 9px 16px rgba(53, 71, 120, 0.12);
}

.qa-choice .concept-illustration {
  display: block;
  width: 100%;
  height: auto;
}

.art-filter-panel {
  position: absolute;
  z-index: 6;
  left: 3.1%;
  top: 25.6%;
  width: 17.2%;
  height: 59.5%;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 2.5%;
}

.art-filter-panel button {
  min-width: 0;
  color: #5430bd;
  border: 3px solid rgba(101, 66, 201, 0.18);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 5px 0 rgba(75, 49, 130, 0.12);
  font-size: clamp(0.72rem, 1.55vw, 1.5rem);
  font-weight: 1000;
  line-height: 1.05;
}

.art-filter-panel button.is-active {
  color: #ffffff;
  border-color: #ffffff;
  background: linear-gradient(180deg, #a76cff, #6844d6);
}

.art-filter-panel.tracing-filters {
  grid-template-rows: repeat(5, minmax(0, 1fr));
  top: 27%;
  height: 55%;
}

.art-filter-panel.tracing-filters button {
  padding: 4% 7%;
  font-size: clamp(0.68rem, 1.38vw, 1.3rem);
}

.art-choice-overlay {
  position: absolute;
  z-index: 5;
  left: 22.5%;
  top: 26.1%;
  width: 70.6%;
  height: 63.6%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2%;
}

.art-choice-overlay.tracing {
  top: 24.7%;
  height: 64.7%;
}

.art-preview-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  color: #5430bd;
  border: 4px solid #8e66ff;
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 7px 0 rgba(71, 48, 130, 0.14);
}

.art-preview-card canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #ffffff;
}

.art-preview-card strong {
  min-height: 13%;
  display: grid;
  place-items: center;
  padding: 3px 8px;
  font-size: clamp(0.7rem, 1.4vw, 1.35rem);
  line-height: 1;
}

.art-page-button {
  position: absolute;
  z-index: 7;
  top: 91.1%;
  width: 4.8%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #ffffff;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(180deg, #9565ef, #5630be);
  box-shadow: 0 5px 0 rgba(52, 35, 100, 0.2);
}

.art-page-button svg {
  width: 62%;
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-page-prev {
  left: 33.8%;
}

.art-page-next {
  left: 61.3%;
}

.art-page-indicator {
  position: absolute;
  z-index: 7;
  left: 40%;
  top: 92.4%;
  width: 20%;
  height: 4%;
  display: grid;
  place-items: center;
  color: #5430bd;
  font-size: clamp(0.8rem, 1.5vw, 1.4rem);
  font-weight: 1000;
}

.drawing-undo {
  left: 72.5%;
  top: 2.3%;
  width: 7.5%;
  height: 11.3%;
}

.drawing-tool {
  z-index: 6;
  width: 5.4%;
  height: 8.2%;
}

.drawing-tool-brush {
  left: 79.4%;
  top: 60.1%;
}

.drawing-tool-fill {
  left: 90.2%;
  top: 60.1%;
}

.drawing-tool-crayon {
  left: 84.8%;
  top: 60.1%;
}

.drawing-tool-eraser {
  left: 79.4%;
  top: 70.2%;
}

.drawing-tool-magic {
  left: 84.8%;
  top: 70.2%;
}

.drawing-tool-eyedropper {
  left: 90.2%;
  top: 70.2%;
}

.brush-size {
  z-index: 6;
  top: 83.6%;
  width: 4.6%;
  height: 7%;
  border-radius: 50%;
}

.brush-size-small { left: 80.1%; }
.brush-size-medium { left: 85.5%; }
.brush-size-large { left: 90.9%; }

.drawing-tool.is-selected-tool,
.brush-size.is-selected-tool {
  background: rgba(142, 102, 255, 0.16);
  box-shadow: inset 0 0 0 5px rgba(101, 66, 201, 0.84), 0 0 0 3px rgba(255, 255, 255, 0.88);
}

.mockup-drawing-free .drawing-undo {
  left: 21.6%;
  top: 89.3%;
  width: 11.7%;
  height: 7.5%;
}

.mockup-drawing-free .drawing-tool {
  width: 5.1%;
  height: 7.2%;
}

.mockup-drawing-free .drawing-tool-brush { left: 79.6%; top: 59%; }
.mockup-drawing-free .drawing-tool-crayon { left: 85.1%; top: 59%; }
.mockup-drawing-free .drawing-tool-fill { left: 90.6%; top: 59%; }
.mockup-drawing-free .drawing-tool-eraser { left: 79.6%; top: 68%; }
.mockup-drawing-free .drawing-tool-magic { left: 85.1%; top: 68%; }
.mockup-drawing-free .drawing-tool-eyedropper { left: 90.6%; top: 68%; }

.mockup-drawing-free .brush-size {
  top: 79.2%;
  width: 4.4%;
  height: 6.4%;
  border-radius: 50%;
}

.mockup-drawing-free .drawing-tool.is-selected-tool,
.mockup-drawing-free .brush-size.is-selected-tool {
  background: rgba(124, 78, 234, 0.08);
  box-shadow: inset 0 0 0 4px #7545dc, 0 0 0 2px #ffffff;
}

.mockup-drawing-tracing .drawing-undo,
.mockup-drawing-tracing .brush-size {
  display: none;
}

.mockup-drawing-tracing .drawing-tool-brush { left: 78.4%; top: 25.3%; }
.mockup-drawing-tracing .drawing-tool-crayon,
.mockup-drawing-tracing .drawing-tool-fill,
.mockup-drawing-tracing .drawing-tool-magic,
.mockup-drawing-tracing .drawing-tool-eyedropper { display: none; }
.mockup-drawing-tracing .drawing-tool-eraser { left: 78.4%; top: 35.5%; }

.mockup-trace-meter {
  left: 23.4%;
  top: 18.7%;
  width: 11%;
  height: 5.5%;
  overflow: hidden;
  border: 4px solid rgba(101, 66, 201, 0.25);
  border-radius: 999px;
  background: #fffaf1;
}

.mockup-trace-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
}

.mockup-trace-meter strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5430bd;
  font-size: clamp(0.65rem, 1.2vw, 1.1rem);
  font-weight: 1000;
}

@media (max-width: 420px) {
  .side-nav-button span {
    font-size: 0.82rem;
  }

  .choice-grid {
    gap: 9px;
  }

  .choice-card {
    padding: 8px;
  }

  .color-token {
    width: 78px;
    height: 78px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reference-image UI layer. The supplied LP_*.png files are used as the visual
   surface; invisible hit areas keep the screens interactive without redrawing
   the illustration in CSS. */
.mockup-screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #a9edff;
}

.mockup-stage {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--mockup) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (orientation: portrait) {
  .mockup-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100dvh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
  }
}

.mockup-activity .mockup-stage {
  box-shadow: 0 14px 42px rgba(35, 25, 95, 0.18);
}

.hotspot {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0);
}

.activity-back {
  left: 1.8%;
  top: 2.4%;
  width: 6.6%;
  height: 9.7%;
  border-radius: 50%;
}

.activity-settings {
  left: 91.6%;
  top: 2.7%;
  width: 6.5%;
  height: 9.7%;
  border-radius: 50%;
}

.hotspot:focus-visible,
.round-control:focus-visible {
  outline: 4px solid rgba(255, 255, 255, 0.95);
  outline-offset: 4px;
}

.home-games {
  left: 6.6%;
  top: 57.4%;
  width: 26.8%;
  height: 32.2%;
}

.home-art {
  left: 35.8%;
  top: 57.4%;
  width: 26.8%;
  height: 32.2%;
}

.home-music {
  left: 66.8%;
  top: 57.4%;
  width: 26.8%;
  height: 32.2%;
}

.home-parent {
  left: 91%;
  top: 2.8%;
  width: 7.2%;
  height: 10.6%;
  border-radius: 50%;
}

.round-control {
  position: absolute;
  z-index: 3;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border: 5px solid #ffffff;
  border-radius: 50%;
  background: linear-gradient(180deg, #9e6cff, #6845d7);
  box-shadow: 0 8px 18px rgba(38, 46, 78, 0.22), inset 0 -7px 0 rgba(0, 0, 0, 0.12);
}

.round-control svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.round-control.is-off {
  background: linear-gradient(180deg, #8a93a8, #596276);
}

.round-control.small {
  position: static;
  width: 56px;
  height: 56px;
  border-width: 4px;
}

.round-control.small svg {
  width: 32px;
  height: 32px;
}

.home-sound {
  left: 2%;
  top: 14%;
}

.home-assistant {
  left: 2%;
  top: 24%;
}

.side-games {
  left: 1.8%;
  top: 34.2%;
  width: 18.8%;
  height: 11.8%;
}

.side-art {
  left: 1.8%;
  top: 48.2%;
  width: 18.8%;
  height: 11.8%;
}

.side-music {
  left: 1.8%;
  top: 62.4%;
  width: 18.8%;
  height: 11.8%;
}

.side-parent {
  left: 2.8%;
  top: 78%;
  width: 16.2%;
  height: 7.5%;
}

.top-back {
  left: 24%;
  top: 2.7%;
  width: 6.6%;
  height: 10%;
  border-radius: 50%;
}

.top-home {
  left: 91.4%;
  top: 2.7%;
  width: 6.4%;
  height: 10%;
  border-radius: 50%;
}

.game-card-1,
.game-card-2,
.game-card-3,
.art-card-1,
.art-card-2,
.art-card-3 {
  top: 32.2%;
  width: 21.8%;
  height: 49.8%;
}

.game-card-1,
.art-card-1 {
  left: 25.2%;
}

.game-card-2,
.art-card-2 {
  left: 48.8%;
}

.game-card-3,
.art-card-3 {
  left: 72.6%;
}

.music-card-1,
.music-card-2,
.music-card-3,
.music-card-4,
.music-card-5,
.music-card-6 {
  width: 21.4%;
  height: 27.5%;
}

.music-card-1,
.music-card-2,
.music-card-3 {
  top: 26.4%;
}

.music-card-4,
.music-card-5,
.music-card-6 {
  top: 57.2%;
}

.music-card-1,
.music-card-4 {
  left: 25%;
}

.music-card-2,
.music-card-5 {
  left: 48.2%;
}

.music-card-3,
.music-card-6 {
  left: 71.4%;
}

.mockup-music-player {
  position: absolute;
  left: 24.8%;
  top: 85.8%;
  width: 66%;
  height: 11.2%;
  display: grid;
  grid-template-columns: 2.1fr 0.7fr 0.8fr 0.7fr 1.7fr;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mockup-music-player button {
  opacity: 0;
}

.parent-exit {
  left: 1.7%;
  top: 85%;
  width: 17%;
  height: 8%;
}

.parent-overlay-controls {
  position: absolute;
  right: 1.8%;
  bottom: 1.8%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 24px rgba(65, 50, 112, 0.16);
}

.parent-nav {
  z-index: 6;
  left: 1.1%;
  width: 18.2%;
  height: 6.6%;
}

.parent-nav-overview { top: 27.8%; }
.parent-nav-report { top: 35%; }
.parent-nav-achievements { top: 41.7%; }
.parent-nav-time { top: 48.3%; }
.parent-nav-content { top: 55%; }
.parent-nav-sound { top: 61.7%; }
.parent-nav-profile { top: 68.4%; }

.parent-profile-chip-hotspot {
  z-index: 6;
  left: 76.8%;
  top: 2.2%;
  width: 20.6%;
  height: 8.6%;
}

.parent-detail-report {
  z-index: 6;
  left: 75.4%;
  top: 41.2%;
  width: 20.8%;
  height: 5.3%;
}

.parent-edit-time {
  z-index: 6;
  left: 88.4%;
  top: 56%;
  width: 8.3%;
  height: 5.2%;
}

.parent-extend-time {
  z-index: 6;
  left: 75.3%;
  top: 72.4%;
  width: 11.4%;
  height: 5.5%;
}

.parent-dialog-overlay {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4%;
  background: rgba(45, 27, 96, 0.62);
  backdrop-filter: blur(5px);
}

.parent-dialog {
  position: relative;
  width: min(76%, 980px);
  max-height: 84%;
  overflow: auto;
  padding: clamp(22px, 3vw, 42px);
  color: #3e3263;
  border: 6px solid #ffffff;
  border-radius: 8px;
  background: #fffafd;
  box-shadow: 0 22px 60px rgba(35, 19, 79, 0.38);
}

.parent-dialog h2 {
  margin: 0 0 18px;
  color: #6542c9;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
}

.parent-dialog h3 {
  margin: 20px 0 10px;
  color: #6542c9;
}

.parent-dialog-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 48px;
  aspect-ratio: 1;
  color: #ffffff;
  border: 0;
  border-radius: 50%;
  background: #7545dc;
  font-size: 2rem;
  font-weight: 900;
}

.parent-report-grid,
.parent-achievement-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.parent-achievement-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.parent-report-grid p,
.parent-achievement-grid p {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 115px;
  margin: 0;
  padding: 14px;
  border: 2px solid rgba(101, 66, 201, 0.14);
  border-radius: 8px;
  background: #f4eeff;
  text-align: center;
}

.parent-report-grid strong,
.parent-achievement-grid strong {
  color: #6542c9;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
}

.parent-achievement-grid b {
  font-size: 2rem;
}

.parent-activity-list {
  display: grid;
  gap: 8px;
}

.parent-activity-list p {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(101, 66, 201, 0.15);
}

.parent-range-label,
.parent-text-label {
  display: grid;
  gap: 12px;
  margin: 16px 0;
  font-size: 1.1rem;
  font-weight: 850;
}

.parent-range-label input {
  width: 100%;
  accent-color: #7545dc;
}

.parent-text-label input {
  min-height: 52px;
  padding: 10px 14px;
  border: 3px solid rgba(101, 66, 201, 0.24);
  border-radius: 8px;
  font: inherit;
}

.parent-toggle-list {
  display: grid;
  gap: 10px;
}

.parent-toggle-list label {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border: 2px solid rgba(101, 66, 201, 0.14);
  border-radius: 8px;
  background: #f7f2ff;
  font-weight: 900;
}

.parent-toggle-list input {
  width: 28px;
  height: 28px;
  accent-color: #65bf20;
}

.parent-language-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-language-buttons button,
.parent-primary-button,
.parent-secondary-button {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid rgba(101, 66, 201, 0.18);
  border-radius: 8px;
  font-weight: 900;
}

.parent-language-buttons button,
.parent-secondary-button {
  color: #6542c9;
  background: #ffffff;
}

.parent-language-buttons .is-active,
.parent-primary-button {
  color: #ffffff;
  background: #7545dc;
}

.parent-primary-button,
.parent-secondary-button {
  margin: 8px 8px 0 0;
}

@media (max-width: 760px) {
  .parent-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.object-question {
  justify-self: center;
  width: min(260px, 45vw);
  margin-top: -8px;
}

.object-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 0 rgba(73, 80, 118, 0.08));
}

.mockup-prompt {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0 18px;
  color: #3d2577;
  border-radius: 8px;
  font-weight: 1000;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 2px 0 #ffffff;
  overflow-wrap: anywhere;
}

.shape-prompt {
  left: 34.8%;
  top: 21.4%;
  width: 37%;
  height: 8.8%;
  font-size: clamp(1.25rem, 3.3vw, 3.35rem);
}

.qa-prompt {
  left: 30%;
  top: 20.4%;
  width: 48%;
  height: 9.3%;
  font-size: clamp(1.1rem, 3.1vw, 3.1rem);
  background: #fffaf1;
}

.shape-listen {
  left: 27.6%;
  top: 20%;
  width: 6.5%;
  height: 10%;
  border-radius: 50%;
}

.qa-listen {
  left: 24.6%;
  top: 20.1%;
  width: 6.1%;
  height: 9.4%;
  border-radius: 50%;
}

.shape-option {
  width: 16%;
  height: 23.8%;
}

.shape-option-1,
.shape-option-2,
.shape-option-3 {
  top: 32.9%;
}

.shape-option-4,
.shape-option-5,
.shape-option-6 {
  top: 58.2%;
}

.shape-option-1,
.shape-option-4 {
  left: 31.1%;
}

.shape-option-2,
.shape-option-5 {
  left: 49.1%;
}

.shape-option-3,
.shape-option-6 {
  left: 66.9%;
}

.shape-option.is-correct,
.hotspot.is-correct {
  background: rgba(112, 200, 21, 0.18);
  box-shadow: inset 0 0 0 8px rgba(112, 200, 21, 0.62);
}

.shape-option.is-try,
.hotspot.is-try {
  background: rgba(255, 210, 61, 0.18);
  box-shadow: inset 0 0 0 8px rgba(255, 210, 61, 0.68);
}

.qa-choice-layer {
  position: absolute;
  left: 27%;
  top: 46.5%;
  width: 50%;
  height: 48.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2%;
  padding: 1.8%;
  border: 5px solid rgba(101, 66, 201, 0.18);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 8px 0 rgba(77, 57, 124, 0.1);
}

.qa-choice-layer.two-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.qa-choice {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  color: #3d2577;
  border: 4px solid rgba(101, 66, 201, 0.18);
  border-radius: 8px;
  background: #fffaf1;
  box-shadow: 0 8px 0 rgba(77, 57, 124, 0.12);
  font-weight: 1000;
}

.qa-choice span {
  width: min(100%, 150px);
}

.qa-choice svg {
  width: 100%;
  height: auto;
}

.qa-choice strong {
  max-width: 100%;
  font-size: clamp(0.9rem, 1.6vw, 1.35rem);
  line-height: 1.02;
  text-align: center;
  overflow-wrap: anywhere;
}

.qa-choice.is-correct {
  border-color: #46bc31;
  background: rgba(238, 255, 232, 0.95);
}

.qa-choice.is-try {
  border-color: #ffd23d;
  background: rgba(255, 249, 217, 0.96);
}

.mockup-feedback {
  position: absolute;
  z-index: 4;
  left: 34%;
  bottom: 3%;
  width: 32%;
  min-height: 7%;
  display: grid;
  place-items: center;
  padding: 8px 14px;
  color: #3d2577;
  border: 4px solid rgba(101, 66, 201, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 241, 0.96);
  box-shadow: 0 8px 0 rgba(77, 57, 124, 0.12);
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 1000;
  text-align: center;
}

.mockup-feedback.is-good {
  color: #2f8d21;
  border-color: rgba(112, 200, 21, 0.5);
}

.mockup-feedback.is-soft {
  color: #a36f00;
  border-color: rgba(255, 210, 61, 0.65);
}

.game-feedback-overlay {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.2%;
  overflow: hidden;
  pointer-events: auto;
  animation: game-feedback-exit 1.65s ease both;
}

.game-feedback-overlay.is-soft {
  animation-duration: 1.25s;
}

.game-feedback-dim {
  position: absolute;
  inset: 0;
  background: rgba(32, 17, 72, 0.32);
  backdrop-filter: blur(3px);
  animation: game-dim-in 220ms ease-out both;
}

.game-feedback-symbol,
.game-feedback-overlay > strong {
  position: relative;
  z-index: 2;
}

.game-feedback-symbol {
  width: clamp(116px, 15vw, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 14px 12px rgba(40, 24, 88, 0.28));
  animation: game-symbol-pop 520ms cubic-bezier(0.2, 1.5, 0.45, 1) both;
}

.game-feedback-symbol svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #53c93c;
  stroke: #ffffff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.game-feedback-symbol span {
  font-size: clamp(6rem, 13vw, 12rem);
  line-height: 1;
}

.game-feedback-symbol .retry-mark {
  position: absolute;
  right: -23%;
  bottom: -8%;
  width: 55%;
  height: 55%;
  padding: 8%;
  overflow: visible;
  fill: none;
  stroke: #ffffff;
  stroke-width: 11;
  border-radius: 50%;
  background: #ff9d22;
  animation: retry-spin 700ms 180ms cubic-bezier(0.2, 1.1, 0.4, 1) both;
}

.game-feedback-overlay > strong {
  color: #ffffff;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.95;
  text-align: center;
  text-shadow: 0 6px 0 #3d258e, 0 12px 24px rgba(27, 13, 65, 0.38);
  animation: game-title-pop 560ms 80ms cubic-bezier(0.2, 1.4, 0.45, 1) both;
}

.game-feedback-overlay.is-soft > strong {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
}

.game-confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.game-confetti i {
  position: absolute;
  top: -8%;
  left: calc(var(--x) * 1%);
  width: clamp(8px, 1vw, 16px);
  height: clamp(14px, 1.8vw, 27px);
  border-radius: 3px;
  background: var(--c);
  transform: rotate(var(--r));
  animation: confetti-fall 1.25s calc(var(--i) * 13ms) cubic-bezier(0.18, 0.75, 0.35, 1) both;
}

@keyframes game-dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes game-symbol-pop {
  0% { opacity: 0; transform: scale(0.35) rotate(-12deg); }
  68% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes game-title-pop {
  0% { opacity: 0; transform: translateY(28px) scale(0.72); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes retry-spin {
  from { opacity: 0; transform: scale(0.4) rotate(-190deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes confetti-fall {
  0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(var(--r)); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(var(--dx), 112vh, 0) rotate(calc(var(--r) + 620deg)); }
}

@keyframes game-feedback-exit {
  0%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .game-feedback-symbol,
  .game-feedback-overlay > strong,
  .game-feedback-symbol .retry-mark,
  .game-confetti i {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .game-feedback-overlay {
    animation: none;
  }

  .game-confetti {
    display: none;
  }
}

.mini-segment {
  display: flex;
  gap: 6px;
}

.mini-segment button {
  min-height: 42px;
  padding: 0 12px;
  color: #6542c9;
  border: 3px solid rgba(101, 66, 201, 0.14);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 1000;
}

.mini-segment .is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #9e6cff, #6845d7);
}

.subject-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2vw, 24px);
  border: 7px solid #ffffff;
  border-radius: 8px;
  background: rgba(255, 250, 241, 0.94);
  box-shadow: var(--shadow);
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  align-content: center;
}

.subject-card {
  min-height: clamp(160px, 20vw, 230px);
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 14px;
  color: #ffffff;
  border: 6px solid #ffffff;
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--subject) 88%, #ffffff 12%), color-mix(in srgb, var(--subject) 78%, #000000 22%));
  box-shadow: 0 9px 0 rgba(73, 80, 118, 0.12), 0 16px 30px rgba(39, 60, 107, 0.16);
}

.subject-card span {
  width: min(78%, 170px);
}

.subject-card svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 7px 0 rgba(0, 0, 0, 0.12));
}

.subject-card strong {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  text-shadow: 0 3px 0 rgba(26, 35, 78, 0.24);
}

.art-select-listen {
  left: 31.8%;
  top: 17.7%;
  width: 37%;
  height: 7.8%;
  border-radius: 8px;
}

.art-subject-hotspot {
  width: 22.8%;
  height: 30%;
}

.art-subject-1,
.art-subject-2,
.art-subject-3 {
  top: 26.7%;
}

.art-subject-4,
.art-subject-5,
.art-subject-6 {
  top: 58.6%;
}

.art-subject-1,
.art-subject-4 {
  left: 23.1%;
}

.art-subject-2,
.art-subject-5 {
  left: 47.1%;
}

.art-subject-3,
.art-subject-6 {
  left: 71.1%;
}

.mockup-tracing-select .art-subject-hotspot {
  height: 31.8%;
}

.mockup-tracing-select .art-subject-1,
.mockup-tracing-select .art-subject-2,
.mockup-tracing-select .art-subject-3 {
  top: 24.7%;
}

.mockup-tracing-select .art-subject-4,
.mockup-tracing-select .art-subject-5,
.mockup-tracing-select .art-subject-6 {
  top: 58.3%;
}

.mockup-canvas {
  position: absolute;
  z-index: 2;
  display: block;
  width: 54.2%;
  height: 73.6%;
  left: 22.8%;
  top: 16.2%;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  touch-action: none;
}

.free-canvas-viewport {
  position: absolute;
  z-index: 2;
  left: 20.1%;
  top: 18%;
  width: 57.2%;
  height: 69%;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
}

.mockup-drawing-free .free-canvas-viewport .mockup-canvas {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--canvas-zoom, 1));
  transform-origin: center;
  transition: transform 180ms ease;
}

.mockup-drawing-tracing .mockup-canvas {
  left: 21%;
  top: 16.5%;
  width: 54.5%;
  height: 69.6%;
}

.mockup-swatches {
  position: absolute;
  z-index: 3;
  left: 80.5%;
  top: 22.8%;
  width: 14.5%;
  height: 29.6%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 6.5%;
}

.mockup-drawing-free .mockup-swatches {
  top: 26.2%;
  height: 25.8%;
  gap: 8%;
}

.mockup-drawing-tracing .mockup-swatches {
  left: 78.8%;
  top: 52.5%;
  width: 16.3%;
  height: 30.7%;
}

.mockup-swatch {
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: transparent;
}

.mockup-swatch.is-active {
  background: color-mix(in srgb, var(--swatch) 22%, transparent);
  box-shadow: inset 0 0 0 5px rgba(101, 66, 201, 0.76), 0 0 0 3px rgba(255, 255, 255, 0.82);
}

.mockup-drawing-free .mockup-swatch.is-active {
  background: transparent;
  box-shadow: inset 0 0 0 4px #7545dc, 0 0 0 2px #ffffff;
}

.mockup-drawing-free .mockup-swatch {
  width: 82%;
  aspect-ratio: 1;
  place-self: center;
}

.drawing-speak {
  left: 2.6%;
  top: 47.2%;
  width: 18%;
  height: 12%;
  border-radius: 8px;
}

.mockup-drawing-free .drawing-speak {
  top: 14.2%;
}

.mockup-drawing-tracing .drawing-speak {
  left: 73.2%;
  top: 2.1%;
  width: 7.6%;
  height: 11.8%;
}

.drawing-clear {
  left: 81.5%;
  top: 2.4%;
  width: 7.7%;
  height: 11.2%;
}

.mockup-drawing-free .drawing-clear {
  left: 1.7%;
  top: 76.3%;
  width: 16.8%;
  height: 8.4%;
}

.free-save-gallery {
  z-index: 7;
  left: 85%;
  top: 4.5%;
  width: 14%;
  height: 11%;
}

.coloring-open-gallery {
  z-index: 7;
  left: 85.1%;
  top: 90.4%;
  width: 13.6%;
  height: 7.8%;
}

.coloring-save-gallery {
  z-index: 7;
  left: 90.5%;
  top: 2.1%;
  width: 7.7%;
  height: 11.5%;
}

.free-open-gallery {
  z-index: 7;
  left: 1.6%;
  top: 58.4%;
  width: 17%;
  height: 8%;
}

.free-screenshot {
  z-index: 7;
  left: 1.6%;
  top: 67.6%;
  width: 17%;
  height: 8%;
}

.free-zoom-out,
.free-zoom-in {
  z-index: 7;
  top: 89.2%;
  height: 7.3%;
}

.free-zoom-out {
  left: 46.6%;
  width: 12.2%;
}

.free-zoom-in {
  left: 59.7%;
  width: 14.1%;
}

.drawing-toast {
  position: absolute;
  z-index: 120;
  left: 50%;
  bottom: 10%;
  max-width: 70%;
  padding: 1.2% 2.2%;
  color: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 8px;
  background: #6542c9;
  box-shadow: 0 8px 20px rgba(48, 26, 112, 0.3);
  font-size: clamp(0.85rem, 1.8vw, 1.55rem);
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  animation: drawing-toast-life 1.8s ease both;
}

@keyframes drawing-toast-life {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(0.94); }
  12%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
}

.drawing-gallery-overlay {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 4%;
  background: rgba(35, 20, 84, 0.72);
  backdrop-filter: blur(5px);
}

.drawing-gallery-dialog {
  width: min(88%, 1100px);
  max-height: 86%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 6px solid #ffffff;
  border-radius: 8px;
  background: #f8f5ff;
  box-shadow: 0 20px 55px rgba(23, 12, 60, 0.4);
}

.drawing-gallery-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2% 2%;
  color: #ffffff;
  background: #7545dc;
}

.drawing-gallery-dialog h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 2.5rem);
}

.drawing-gallery-dialog header button {
  width: clamp(42px, 5vw, 66px);
  aspect-ratio: 1;
  color: #5430bd;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
}

.drawing-gallery-grid {
  min-height: 240px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
  overflow: auto;
  padding: 2%;
}

.drawing-gallery-status {
  grid-column: 1 / -1;
  align-self: center;
  margin: auto;
  color: #5430bd;
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 900;
}

.drawing-gallery-item {
  overflow: hidden;
  border: 3px solid rgba(101, 66, 201, 0.28);
  border-radius: 8px;
  background: #ffffff;
}

.drawing-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #ffffff;
}

.drawing-gallery-item footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: #5430bd;
  font-size: clamp(0.65rem, 1vw, 0.9rem);
  font-weight: 800;
}

.drawing-gallery-item footer button {
  padding: 7px 12px;
  color: #ffffff;
  border: 0;
  border-radius: 6px;
  background: #ef4e78;
  font-weight: 900;
}

@media (max-width: 700px) {
  .drawing-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mockup-drawing-tracing .drawing-clear {
  left: 82%;
  top: 2.1%;
  width: 7.6%;
  height: 11.8%;
}

.drawing-prev,
.drawing-next {
  top: 89.2%;
  width: 14%;
  height: 7.8%;
  border-radius: 8px;
}

.drawing-prev {
  left: 19.4%;
}

.drawing-next {
  left: 68.6%;
}

.mockup-trace-meter {
  position: absolute;
  z-index: 3;
  left: 31%;
  top: 18.8%;
  width: 12%;
  height: 4%;
  background: transparent;
}

.drawing-feedback {
  left: 32%;
  bottom: 2.8%;
  width: 36%;
  min-height: 7%;
}

.instrument-piano {
  grid-template-columns: repeat(8, minmax(42px, 1fr));
  gap: 4px;
  align-items: stretch;
  padding: 18px;
  border-radius: 8px;
  background: #222438;
}

.instrument-piano button {
  min-height: clamp(180px, 28vw, 300px);
  color: #25304c;
  border-color: #e7e4ee;
  background: linear-gradient(180deg, #ffffff, #eeeaf4);
}

.instrument-piano button:nth-child(2),
.instrument-piano button:nth-child(4),
.instrument-piano button:nth-child(7) {
  min-height: clamp(112px, 18vw, 190px);
  align-self: start;
  color: #ffffff;
  background: linear-gradient(180deg, #222438, #05060c);
}

.instrument-flute,
.instrument-ney {
  position: relative;
  grid-template-columns: repeat(8, minmax(42px, 1fr));
  padding: 44px 36px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d88a24, #ffd166 18%, #b56a18 50%, #ffd166 82%, #8a4b12);
}

.instrument-ney {
  background: linear-gradient(90deg, #a2601b, #e9b855 22%, #7e4212 76%, #c98a2c);
}

.instrument-flute button,
.instrument-ney button {
  min-height: 74px;
  aspect-ratio: 1;
  justify-self: center;
  color: transparent;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.65);
  background: radial-gradient(circle, #4a2810 0 34%, #150c05 35% 60%, rgba(255, 255, 255, 0.2) 61%);
}

.instrument-guitar,
.instrument-baglama {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 28px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b96d23, #f3ad3d 48%, #8b4a18);
}

.instrument-guitar button,
.instrument-baglama button {
  min-height: 34px;
  color: transparent;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: linear-gradient(180deg, #f6e2b0, #8b5a24 45%, #f6e2b0 55%, #8b5a24);
}

.instrument-drum {
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.instrument-drum button {
  aspect-ratio: 1;
  min-height: 120px;
  color: #ffffff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff7e4 0 28%, #d83434 29% 63%, #861919 64%);
}

.instrument-tab {
  top: 18%;
  width: 11.7%;
  height: 23.7%;
}

.instrument-tab-1 { left: 23.2%; }
.instrument-tab-2 { left: 35.1%; }
.instrument-tab-3 { left: 47.1%; }
.instrument-tab-4 { left: 59%; }
.instrument-tab-5 { left: 71%; }
.instrument-tab-6 { left: 82.8%; }

.instrument-note {
  z-index: 4;
  touch-action: none;
  transition: filter 80ms ease, background 80ms ease;
}

.instrument-note.is-playing {
  background: rgba(255, 223, 73, 0.25);
  filter: drop-shadow(0 0 10px rgba(255, 221, 54, 0.95));
}

.piano-note-1,
.piano-note-2,
.piano-note-3,
.piano-note-4,
.piano-note-5,
.piano-note-6,
.piano-note-7,
.piano-note-8 {
  top: 48.8%;
  height: 45%;
  border-radius: 8px;
}

.piano-note-1 { left: 2.6%; width: 11.4%; }
.piano-note-2 { left: 14.1%; width: 11.4%; }
.piano-note-3 { left: 25.5%; width: 12.4%; }
.piano-note-4 { left: 38%; width: 9.3%; }
.piano-note-5 { left: 47.3%; width: 11.4%; }
.piano-note-6 { left: 58.8%; width: 11.5%; }
.piano-note-7 { left: 70.3%; width: 11.5%; }
.piano-note-8 { left: 81.8%; width: 14.8%; }

.flute-note-1,
.flute-note-2,
.flute-note-3,
.flute-note-4,
.flute-note-5,
.flute-note-6,
.flute-note-7,
.flute-note-8 {
  top: 58.2%;
  width: 5.8%;
  height: 9.1%;
  border-radius: 50%;
}

.flute-note-1 { left: 32.7%; }
.flute-note-2 { left: 41%; }
.flute-note-3 { left: 49.2%; }
.flute-note-4 { left: 57.4%; }
.flute-note-5 { left: 65.7%; }
.flute-note-6 { left: 73.9%; }
.flute-note-7 { left: 82.1%; }
.flute-note-8 { left: 90.4%; }

.ney-note-1,
.ney-note-2,
.ney-note-3,
.ney-note-4,
.ney-note-5,
.ney-note-6,
.ney-note-7,
.ney-note-8 {
  top: 67.7%;
  width: 5.7%;
  height: 9.1%;
  border-radius: 50%;
}

.ney-note-1 { left: 30.1%; }
.ney-note-2 { left: 37%; }
.ney-note-3 { left: 43.9%; }
.ney-note-4 { left: 51%; }
.ney-note-5 { left: 57.6%; }
.ney-note-6 { left: 64.2%; }
.ney-note-7 { left: 70.4%; }
.ney-note-8 { left: 77.1%; }

.guitar-note-1,
.guitar-note-2,
.guitar-note-3,
.guitar-note-4,
.guitar-note-5,
.guitar-note-6,
.baglama-note-1,
.baglama-note-2,
.baglama-note-3,
.baglama-note-4,
.baglama-note-5,
.baglama-note-6,
.baglama-note-7 {
  left: 17%;
  width: 72%;
  height: 5.2%;
  border-radius: 999px;
}

.guitar-note-1 { top: 57%; }
.guitar-note-2 { top: 62.2%; }
.guitar-note-3 { top: 67.5%; }
.guitar-note-4 { top: 72.7%; }
.guitar-note-5 { top: 77.9%; }
.guitar-note-6 { top: 83.1%; }

.baglama-note-1 { top: 57.6%; }
.baglama-note-2 { top: 61.9%; }
.baglama-note-3 { top: 66.2%; }
.baglama-note-4 { top: 70.5%; }
.baglama-note-5 { top: 74.8%; }
.baglama-note-6 { top: 79.1%; }
.baglama-note-7 { top: 83.4%; }

.drum-note-1 {
  left: 11%;
  top: 48.4%;
  width: 22%;
  height: 16%;
  border-radius: 50%;
}

.drum-note-2 {
  left: 34%;
  top: 53.2%;
  width: 15%;
  height: 18%;
  border-radius: 50%;
}

.drum-note-3 {
  left: 49.2%;
  top: 53.2%;
  width: 15%;
  height: 18%;
  border-radius: 50%;
}

.drum-note-4 {
  left: 39.2%;
  top: 68.2%;
  width: 22%;
  height: 27%;
  border-radius: 50%;
}

.drum-note-5 {
  left: 59%;
  top: 69.4%;
  width: 14%;
  height: 17%;
  border-radius: 50%;
}

.drum-note-6 {
  left: 76%;
  top: 48.5%;
  width: 22%;
  height: 16%;
  border-radius: 50%;
}

@media (max-width: 720px) {
  .home-sound {
    left: 3%;
    top: 13%;
  }

  .home-assistant {
    left: 3%;
    top: 22%;
  }

  .round-control {
    width: 56px;
    height: 56px;
    border-width: 4px;
  }

  .round-control svg {
    width: 32px;
    height: 32px;
  }

  .subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-card {
    min-height: 136px;
  }

  .parent-overlay-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: center;
  }
}



.qa-listen {
  left: 18.5%;
  top: 22.2%;
  width: 6.2%;
  height: 9.5%;
}

.qa-prompt {
  left: 25.5%;
  top: 20.8%;
  width: 55%;
  height: 11%;
  font-size: clamp(1.2rem, 3.3vw, 3.4rem);
  background: #fffaf1;
}

.qa-choice-layer,
.qa-choice-layer.two-choice {
  left: 20.8%;
  top: 33.5%;
  width: 58.1%;
  height: 49%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.8%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qa-choice {
  border-color: rgba(101, 66, 201, 0.2);
  background: #fffaf1;
}

.qa-choice span {
  width: min(100%, 240px);
}

.qa-choice strong {
  font-size: clamp(1rem, 2.5vw, 2.35rem);
}

.mockup-trace-meter {
  left: 23.4%;
  top: 18.7%;
  width: 11%;
  height: 5.5%;
  overflow: hidden;
  border: 4px solid rgba(101, 66, 201, 0.25);
  border-radius: 999px;
  background: #fffaf1;
}

.mockup-trace-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
}

.mockup-trace-meter strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5430bd;
  font-size: clamp(0.65rem, 1.2vw, 1.1rem);
  font-weight: 1000;
}

/* Final reference-layer overrides. */
.mockup-drawing-coloring .brush-size {
  width: 4.35%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.mockup-drawing-coloring .mockup-swatch {
  width: 82%;
  aspect-ratio: 1;
  place-self: center;
}

.mockup-drawing-coloring .drawing-tool.is-selected-tool,
.mockup-drawing-coloring .brush-size.is-selected-tool,
.mockup-drawing-coloring .mockup-swatch.is-active {
  background: transparent;
  box-shadow: inset 0 0 0 4px #7545dc, 0 0 0 2px #ffffff;
}

@font-face {
  font-family: "LandinPey Fredoka";
  src: url("assets/fonts/Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

.lp-html-home,
.lp-html-home * {
  box-sizing: border-box;
}

.lp-html-home {
  position: fixed;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #9de8ff url("assets/home-ui/LP_main_background.jpg") center bottom / cover no-repeat;
  font-family: "LandinPey Fredoka", "Trebuchet MS", system-ui, sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lp-html-home-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0.02));
}

.lp-html-home-actions {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.lp-html-home-side-actions {
  position: absolute;
  top: clamp(14px, 3vh, 34px);
  left: max(clamp(16px, 2.2vw, 36px), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.7vh, 18px);
  pointer-events: auto;
}

.lp-html-round-button {
  width: clamp(58px, 6.8vw, 90px);
  height: clamp(58px, 6.8vw, 90px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 5px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 10px 18px rgba(38, 64, 99, 0.24),
    0 0 0 5px rgba(255, 255, 255, 0.28),
    inset 0 -6px 10px rgba(0, 0, 0, 0.1),
    inset 0 5px 10px rgba(255, 255, 255, 0.35);
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
  pointer-events: auto;
}

.lp-html-round-button:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.04);
}

.lp-html-round-button:active {
  transform: translateY(1px) scale(0.98);
}

.lp-html-round-button.is-off {
  opacity: 1;
  filter: none;
  background: radial-gradient(circle at 32% 25%, #aeb8cc 0, #7f8ca4 38%, #566174 100%);
}

.lp-html-round-button svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.16));
}

.lp-html-sound-button {
  background: radial-gradient(circle at 32% 24%, #d6a7ff 0, #9a57ff 44%, #6b27d5 100%);
}

.lp-html-parent-button {
  position: absolute;
  top: clamp(14px, 3vh, 34px);
  right: max(clamp(16px, 2.2vw, 36px), env(safe-area-inset-right));
  background: radial-gradient(circle at 35% 25%, #fff2a8 0, #ffd33b 42%, #ffad00 100%);
}

.lp-html-assistant-button {
  background: radial-gradient(circle at 32% 24%, #d6a7ff 0, #9a57ff 44%, #6b27d5 100%);
}

.lp-html-home-logo {
  position: absolute;
  z-index: 3;
  top: clamp(8px, 2.2vh, 26px);
  left: 50%;
  width: min(38vw, 520px);
  min-width: 320px;
  transform: translateX(-50%);
  animation: lpHtmlLogoIn 0.65s ease both;
}

.lp-html-home-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(57, 74, 116, 0.18));
}

.lp-html-home-menu {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(34px, 6vh, 72px);
  width: min(95vw, 1480px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 34px);
  transform: translateX(-50%);
}

.lp-html-menu-card {
  position: relative;
  width: 100%;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 18px 22px rgba(35, 58, 99, 0.22));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.lp-html-menu-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: -4%;
  left: 7%;
  height: 18%;
  border-radius: 50%;
  background: rgba(41, 67, 113, 0.2);
  filter: blur(14px);
}

.lp-html-menu-card::after {
  content: "";
  position: absolute;
  inset: 3% 4% auto;
  height: 34%;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
}

.lp-html-menu-card:hover {
  transform: translateY(-5px) scale(1.015);
  filter: drop-shadow(0 24px 30px rgba(35, 58, 99, 0.27));
}

.lp-html-menu-card:active {
  transform: translateY(1px) scale(0.985);
}

.lp-html-menu-card img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  filter: saturate(1.06) contrast(1.02);
}

.lp-html-menu-card strong {
  position: absolute;
  right: 0;
  bottom: 13.5%;
  left: 0;
  color: #fff;
  font-size: clamp(26px, 3.2vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 5px 0 rgba(44, 52, 78, 0.13),
    0 6px 9px rgba(0, 0, 0, 0.24),
    0 -1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.lp-html-star {
  position: absolute;
  z-index: 2;
  opacity: 0.85;
  font-size: clamp(16px, 2.2vw, 34px);
  filter: drop-shadow(0 4px 4px rgba(61, 79, 122, 0.18));
  animation: lpHtmlTwinkle 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}

.lp-html-star-a { top: 34%; left: 30%; color: #ffdb45; animation-delay: 0.2s; }
.lp-html-star-b { top: 28%; left: 67%; color: #4ec9ff; animation-delay: 0.8s; }
.lp-html-star-c { top: 18%; left: 59%; color: #fff; animation-delay: 1.2s; }
.lp-html-star-d { top: 16%; left: 38%; color: #fff; animation-delay: 1.5s; }

@keyframes lpHtmlLogoIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes lpHtmlTwinkle {
  from { opacity: 0.55; transform: scale(0.88) rotate(-7deg); }
  to { opacity: 1; transform: scale(1.08) rotate(7deg); }
}

@media (orientation: landscape) and (max-height: 680px) {
  .lp-html-home-logo {
    top: 0;
    width: min(34vw, 410px);
  }

  .lp-html-home-menu {
    bottom: 5vh;
    width: min(96vw, 1380px);
    gap: clamp(12px, 2vw, 24px);
  }

  .lp-html-menu-card strong {
    font-size: clamp(22px, 3vw, 42px);
  }

  .lp-html-round-button {
    width: 56px;
    height: 56px;
    border-width: 4px;
  }
}

@media (max-width: 820px) {
  .lp-html-home-logo {
    width: min(43vw, 370px);
    min-width: 250px;
  }

  .lp-html-home-menu {
    width: 95vw;
    gap: 10px;
  }

  .lp-html-menu-card strong {
    font-size: clamp(20px, 4vw, 34px);
  }
}

.story-side-games,
.story-side-art,
.story-side-music,
.story-side-stories {
  left: 1.8%;
  width: 18.3%;
  height: 10.8%;
}

.story-side-games { top: 34.2%; }
.story-side-art { top: 48.1%; }
.story-side-music { top: 61.2%; }
.story-side-stories { top: 74.3%; }

.story-side-parent {
  left: 2.5%;
  top: 87.3%;
  width: 16.8%;
  height: 7.1%;
}

.story-top-back,
.story-reader-back {
  left: 20.4%;
  top: 2.1%;
  width: 6.7%;
  height: 10.2%;
  border-radius: 50%;
}

.story-top-home,
.story-reader-home {
  left: 91.6%;
  top: 2.2%;
  width: 6.5%;
  height: 10.2%;
  border-radius: 50%;
}

.story-card {
  width: 16.2%;
  height: 28.9%;
}

.story-card-1,
.story-card-2,
.story-card-3,
.story-card-4 {
  top: 26.4%;
}

.story-card-5,
.story-card-6,
.story-card-7,
.story-card-8 {
  top: 57.4%;
}

.story-card-1,
.story-card-5 { left: 25%; }
.story-card-2,
.story-card-6 { left: 43.1%; }
.story-card-3,
.story-card-7 { left: 61.2%; }
.story-card-4,
.story-card-8 { left: 79.2%; }

.story-page-prev {
  left: 50.1%;
  top: 90%;
  width: 4.2%;
  height: 7%;
  border-radius: 50%;
}

.story-page-next {
  left: 63.1%;
  top: 90%;
  width: 4.2%;
  height: 7%;
  border-radius: 50%;
}

.story-reader-title {
  position: absolute;
  left: 39%;
  top: 4%;
  width: 35%;
  height: 8.5%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #f26389;
  font-family: "LandinPey Fredoka", system-ui, sans-serif;
  font-size: clamp(1rem, 3.1vw, 3rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 3px 5px rgba(80, 30, 50, 0.25);
}

.story-reader-text {
  position: absolute;
  left: 27.3%;
  top: 66.9%;
  width: 63.7%;
  height: 9.2%;
  display: grid;
  place-items: center;
  padding: 0 3%;
  overflow: hidden;
  color: #503821;
  background: #fff9e9;
  font-family: "LandinPey Fredoka", system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.75vw, 1.7rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.story-reader-next {
  left: 91%;
  top: 38.5%;
  width: 6.2%;
  height: 9.5%;
  border-radius: 50%;
}

.story-reader-rewind,
.story-reader-play,
.story-reader-forward,
.story-reader-read,
.story-reader-music,
.story-reader-favorite {
  top: 85.3%;
  height: 11.3%;
}

.story-reader-rewind { left: 35.4%; width: 6.7%; border-radius: 50%; }
.story-reader-play { left: 43.5%; width: 7.2%; border-radius: 50%; }
.story-reader-forward { left: 51.8%; width: 6.7%; border-radius: 50%; }
.story-reader-read { left: 62.5%; width: 7.6%; }
.story-reader-music { left: 71.6%; width: 7.6%; }
.story-reader-favorite { left: 86.3%; width: 8.4%; }

.story-reader-favorite.is-favorite {
  filter: drop-shadow(0 0 10px #ff4f91) saturate(1.35);
}

/* Functional parent dashboard, adapted from the supplied HTML template. */
.lp-parent-shell,
.lp-parent-shell * {
  box-sizing: border-box;
}

.lp-parent-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: clamp(210px, 20vw, 310px) minmax(0, 1fr);
  overflow: hidden;
  color: #443b58;
  background:
    radial-gradient(circle at 85% 8%, rgba(255, 225, 122, 0.26), transparent 20%),
    linear-gradient(135deg, #fbf9ff 0%, #fffdf8 52%, #f7f2ff 100%);
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}

.lp-parent-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.6vw, 24px);
  overflow: hidden;
  border-right: 1px solid #d9ccf4;
  background: linear-gradient(180deg, #d5b8ff 0%, #f2e8ff 48%, #e4d0ff 100%);
  box-shadow: 8px 0 30px rgba(96, 61, 166, 0.12);
}

.lp-parent-logo {
  width: 100%;
  height: clamp(118px, 18vh, 210px);
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(91, 52, 163, 0.18);
}

.lp-parent-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;
}

.lp-parent-menu {
  display: grid;
  gap: clamp(4px, 0.7vh, 9px);
  margin-top: clamp(10px, 1.5vh, 18px);
}

.lp-parent-menu button,
.lp-parent-sidebar-bottom button {
  width: 100%;
  min-height: clamp(42px, 6.2vh, 64px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #5b3ac1;
  background: transparent;
  font-size: clamp(0.78rem, 1.25vw, 1.12rem);
  text-align: left;
}

.lp-parent-menu button > span {
  width: 30px;
  display: grid;
  place-items: center;
  color: #6a43d5;
  font-size: 1.45em;
}

.lp-parent-menu button:hover,
.lp-parent-menu button.is-active {
  border-color: rgba(255, 255, 255, 0.92);
  color: #fff;
  background: linear-gradient(135deg, #9861ee, #6840d3);
  box-shadow: 0 7px 16px rgba(90, 48, 186, 0.25);
}

.lp-parent-sidebar-bottom {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.lp-parent-sidebar-bottom button {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.55);
}

.lp-parent-sidebar-bottom svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
}

.lp-parent-sidebar-bottom small {
  color: #765db0;
  text-align: center;
}

.lp-parent-content {
  min-width: 0;
  height: 100%;
  padding: clamp(14px, 2vw, 30px);
  overflow: auto;
  overscroll-behavior: contain;
}

.lp-parent-topbar {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: clamp(76px, 10vh, 108px);
  margin: calc(clamp(14px, 2vw, 30px) * -1) calc(clamp(14px, 2vw, 30px) * -1) 18px;
  padding: 12px clamp(14px, 2vw, 30px);
  border-bottom: 1px solid rgba(117, 77, 201, 0.12);
  background: rgba(255, 253, 251, 0.94);
  backdrop-filter: blur(14px);
}

.lp-parent-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-parent-title > span {
  font-size: clamp(2rem, 3.4vw, 3.6rem);
}

.lp-parent-title h1 {
  margin: 0;
  color: #6840d3;
  font-size: clamp(1.45rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: 0;
}

.lp-parent-title p {
  margin: 7px 0 0;
  color: #6b6579;
  font-size: clamp(0.72rem, 1.2vw, 1rem);
}

.lp-parent-profile-pill {
  flex: 0 0 auto;
  min-width: clamp(170px, 21vw, 270px);
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid #d9ccf4;
  border-radius: 8px;
  color: #62517e;
  background: #fff;
  box-shadow: 0 6px 16px rgba(93, 61, 157, 0.12);
}

.lp-parent-profile-pill > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #a66ef2, #7043d8);
}

.lp-parent-profile-pill svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

.lp-parent-profile-pill small {
  display: grid;
  text-align: left;
}

.lp-parent-profile-pill strong {
  color: #7043d8;
  font-size: 1.1em;
}

.lp-parent-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(230px, 1.25fr);
  gap: clamp(10px, 1.3vw, 18px);
}

.lp-parent-activity-card,
.lp-parent-card {
  min-width: 0;
  border: 1px solid #e4daf2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(75, 53, 119, 0.1);
}

.lp-parent-activity-card {
  position: relative;
  min-height: 210px;
  padding: clamp(15px, 1.6vw, 22px);
  overflow: hidden;
  color: #fff;
}

.lp-parent-activity-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -36px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.lp-parent-activity-card.is-games { background: linear-gradient(145deg, #b77af8, #7744dc); }
.lp-parent-activity-card.is-art { background: linear-gradient(145deg, #51c1f7, #1785dd); }
.lp-parent-activity-card.is-music { background: linear-gradient(145deg, #a8e83c, #55b61f); }

.lp-parent-activity-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-parent-activity-card h2,
.lp-parent-card h2 {
  margin: 0;
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  letter-spacing: 0;
}

.lp-parent-activity-card > div:first-child span {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.lp-parent-activity-card p {
  margin: 18px 0 0;
  font-weight: 800;
}

.lp-parent-activity-card > strong {
  display: block;
  margin: 2px 0 10px;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
}

.lp-parent-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e4f2;
}

.lp-parent-progress span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc72c, #82d72b);
}

.lp-parent-activity-card .lp-parent-progress {
  background: rgba(255, 255, 255, 0.34);
}

.lp-parent-activity-card small {
  display: block;
  margin-top: 8px;
  font-weight: 800;
}

.lp-parent-card {
  padding: clamp(14px, 1.7vw, 24px);
}

.lp-parent-summary h2 {
  padding-bottom: 12px;
  color: #5a3f2d;
  border-bottom: 1px solid #efe3d3;
}

.lp-parent-summary p,
.lp-parent-area-card p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #eee7f4;
  font-size: clamp(0.73rem, 1vw, 0.95rem);
}

.lp-parent-summary button,
.lp-parent-card button:not(.lp-parent-language-list button):not(.lp-parent-activity-permissions button) {
  min-height: 42px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #8e59ec, #6540cf);
  font-weight: 900;
}

.lp-parent-summary button {
  width: 100%;
  margin-top: 12px;
}

.lp-parent-card button.is-orange {
  background: linear-gradient(135deg, #ffbc27, #f08b15);
}

.lp-parent-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.45fr) minmax(270px, 1fr) minmax(245px, 0.9fr);
  gap: clamp(10px, 1.3vw, 18px);
  margin-top: 18px;
}

.lp-parent-chart-card h2,
.lp-parent-recent h2,
.lp-parent-time-card h2,
.lp-parent-report-grid h2,
.lp-parent-settings-grid h2,
.lp-parent-content-grid h2 {
  color: #7043d8;
}

.lp-parent-chart-legend {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0;
  font-size: 0.72rem;
  font-weight: 900;
}

.lp-parent-chart-legend span:nth-child(1) { color: #9360ec; }
.lp-parent-chart-legend span:nth-child(2) { color: #36a9e8; }
.lp-parent-chart-legend span:nth-child(3) { color: #70c72b; }

.lp-parent-bars {
  height: clamp(145px, 23vh, 245px);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 5%;
  padding: 16px 8px 26px;
  border-bottom: 1px solid #d8d0e4;
  background: repeating-linear-gradient(to top, transparent 0 24%, rgba(122, 100, 158, 0.11) 25%);
}

.lp-parent-bars.is-large {
  height: clamp(230px, 42vh, 390px);
}

.lp-parent-bar {
  position: relative;
  width: min(42px, 8%);
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
}

.lp-parent-bar > span,
.lp-parent-bar > i,
.lp-parent-bar > b {
  width: 100%;
  display: block;
  min-height: 3px;
}

.lp-parent-bar > span { background: #70c72b; }
.lp-parent-bar > i { background: #36a9e8; }
.lp-parent-bar > b { background: #9360ec; }

.lp-parent-bar small {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  color: #625a70;
  white-space: nowrap;
  font-size: clamp(0.58rem, 0.9vw, 0.78rem);
  font-weight: 900;
}

.lp-parent-recent p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #eee7f4;
}

.lp-parent-recent i {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--activity-color);
}

.lp-parent-recent svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

.lp-parent-recent p > span {
  min-width: 0;
  display: grid;
}

.lp-parent-recent strong {
  overflow: hidden;
  font-size: clamp(0.68rem, 1vw, 0.9rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-parent-recent small {
  color: #81798f;
}

.lp-parent-time-card > p {
  display: grid;
  gap: 4px;
  margin: 15px 0;
}

.lp-parent-time-card > p strong,
.lp-parent-time-card > p b {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.lp-parent-time-card > p b { color: #4dac25; }
.lp-parent-time-card > div:last-child { display: flex; gap: 8px; margin-top: 18px; }

.lp-parent-report-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.7fr) minmax(240px, 0.7fr);
  gap: 18px;
}

.lp-parent-table-card {
  grid-column: 1 / -1;
  overflow-x: auto;
}

.lp-parent-table-card table {
  width: 100%;
  border-collapse: collapse;
}

.lp-parent-table-card th,
.lp-parent-table-card td {
  padding: 12px;
  border-bottom: 1px solid #ece4f3;
  text-align: left;
  white-space: nowrap;
}

.lp-parent-table-card th {
  color: #6d44cf;
  background: #f5efff;
}

.lp-parent-donut {
  width: min(190px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  margin: 18px auto;
  border-radius: 50%;
  background: conic-gradient(#9360ec 0 var(--games), #36a9e8 var(--games) calc(var(--games) + var(--art)), #70c72b 0);
  box-shadow: inset 0 0 0 34px #fff;
  text-align: center;
}

.lp-parent-donut strong,
.lp-parent-donut span {
  position: relative;
  z-index: 1;
}

.lp-parent-achievements,
.lp-parent-settings-grid,
.lp-parent-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 18px;
}

.lp-parent-achievements article {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.lp-parent-achievements article > span {
  font-size: 3.6rem;
}

.lp-parent-achievements article p {
  max-width: 28ch;
  margin: 10px auto;
}

.lp-parent-achievements article strong {
  color: #7043d8;
}

.lp-parent-achievements .is-locked {
  filter: grayscale(0.75);
  opacity: 0.72;
}

.lp-parent-achievements .is-unlocked {
  border: 2px solid #ffca32;
  background: linear-gradient(180deg, #fffef7, #fff8d9);
}

.lp-parent-setting-card,
.lp-parent-profile-card {
  min-height: 280px;
}

.lp-parent-setting-card > label:not(.lp-parent-switch),
.lp-parent-profile-card label {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  font-weight: 900;
}

.lp-parent-setting-card input:not([type="checkbox"]):not([type="range"]),
.lp-parent-setting-card select,
.lp-parent-profile-card input,
.lp-parent-profile-card select {
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #d7caed;
  border-radius: 8px;
  color: #45375d;
  background: #fff;
  font: inherit;
}

.lp-parent-setting-card input[type="range"] {
  width: 100%;
  accent-color: #7043d8;
}

.lp-parent-switch {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #eee7f4;
  font-weight: 800;
}

.lp-parent-switch input {
  position: absolute;
  opacity: 0;
}

.lp-parent-switch i {
  position: relative;
  width: 48px;
  height: 27px;
  flex: 0 0 48px;
  border-radius: 999px;
  background: #c9c4d2;
  transition: 0.2s ease;
}

.lp-parent-switch i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(45, 32, 67, 0.25);
  transition: 0.2s ease;
}

.lp-parent-switch input:checked + i {
  background: #75c92c;
}

.lp-parent-switch input:checked + i::after {
  transform: translateX(21px);
}

.lp-parent-language-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.lp-parent-language-list button {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid #e4daf2;
  border-radius: 8px;
  color: #544768;
  background: #fff;
  font-size: 1rem;
}

.lp-parent-language-list button.is-active {
  border-color: #7043d8;
  color: #7043d8;
  background: #f5efff;
}

.lp-parent-language-list span {
  font-size: 2rem;
}

.lp-parent-content-card {
  min-height: 230px;
}

.lp-parent-content-card > span {
  font-size: 3.4rem;
}

.lp-parent-activity-permissions {
  grid-column: 1 / -1;
}

.lp-parent-activity-permissions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.lp-parent-activity-permissions button {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #d9cdef;
  border-radius: 8px;
  color: #70667e;
  background: #f6f3f9;
  font-weight: 900;
}

.lp-parent-activity-permissions button.is-active {
  border-color: #7043d8;
  color: #fff;
  background: #7043d8;
}

.lp-parent-profile-card {
  text-align: center;
}

.lp-parent-profile-card > div {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ad73f2, #7043d8);
}

.lp-parent-profile-card svg {
  width: 50px;
  height: 50px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.parent-gate-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
  overflow: auto;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.92) 0 5%, transparent 17%),
    radial-gradient(circle at 85% 20%, rgba(255, 235, 112, 0.48) 0 3%, transparent 15%),
    linear-gradient(145deg, #68d3ff 0%, #9ae8ff 42%, #d8f6ff 100%);
}

.parent-gate-screen::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: 28%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 100%, #80cf3d 0 35%, transparent 36%),
    radial-gradient(ellipse at 50% 110%, #a7e451 0 43%, transparent 44%),
    radial-gradient(ellipse at 88% 100%, #72c637 0 36%, transparent 37%);
}

.parent-gate-back {
  position: fixed;
  z-index: 3;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  width: clamp(56px, 7vw, 78px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #9d66ef, #6336cc);
  box-shadow: 0 8px 18px rgba(74, 39, 154, 0.3);
}

.parent-gate-back svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
}

.parent-gate-card {
  position: relative;
  z-index: 2;
  width: min(620px, 88vw);
  padding: clamp(22px, 3vw, 38px);
  border: 5px solid #fff;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 45px rgba(70, 44, 132, 0.24);
  text-align: center;
}

.parent-gate-icon {
  width: clamp(64px, 8vw, 86px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: -4px auto 8px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #a86cf1, #6740d4);
}

.parent-gate-icon svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}

.parent-gate-kicker {
  margin: 0;
  color: #f09a12;
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  font-weight: 1000;
  text-transform: uppercase;
}

.parent-gate-card h1 {
  margin: 2px 0 4px;
  color: #6840d3;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: 0;
}

.parent-gate-card > p:not(.parent-gate-kicker):not(.parent-gate-message) {
  margin: 0 0 14px;
  color: #645d71;
  font-weight: 700;
}

.parent-gate-question {
  width: min(390px, 100%);
  margin: 12px auto;
  padding: clamp(12px, 2vh, 20px);
  border: 2px solid #d9c9f4;
  border-radius: 8px;
  color: #3d276f;
  background: #f7f2ff;
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 1000;
  line-height: 1;
}

.parent-gate-answer {
  width: min(250px, 100%);
  display: grid;
  gap: 6px;
  margin: 0 auto;
  color: #5b4c74;
  font-weight: 900;
  text-align: left;
}

.parent-gate-answer input {
  width: 100%;
  height: clamp(52px, 8vh, 66px);
  border: 3px solid #cdb8ed;
  border-radius: 8px;
  color: #3d276f;
  background: #fff;
  font: 1000 clamp(1.5rem, 3vw, 2rem) / 1 system-ui, sans-serif;
  text-align: center;
  outline: 0;
}

.parent-gate-answer input:focus {
  border-color: #7545dc;
  box-shadow: 0 0 0 4px rgba(117, 69, 220, 0.16);
}

.parent-gate-message {
  min-height: 22px;
  margin: 10px 0;
  color: #80758f;
  font-size: clamp(0.72rem, 1.25vw, 0.9rem);
  font-weight: 800;
}

.parent-gate-message.is-error {
  color: #d83d58;
}

.parent-gate-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  width: min(420px, 100%);
  margin: 0 auto;
}

.parent-gate-actions button {
  min-height: 50px;
  padding: 10px 14px;
  border: 2px solid #d7c7ee;
  border-radius: 8px;
  color: #6740cb;
  background: #f7f2ff;
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  font-weight: 1000;
}

.parent-gate-actions button.is-primary {
  border-color: #6840d3;
  color: #fff;
  background: linear-gradient(145deg, #9460ec, #653bcb);
  box-shadow: 0 7px 15px rgba(89, 49, 177, 0.24);
}

@media (max-height: 560px) {
  .parent-gate-card {
    width: min(720px, 82vw);
    padding: 14px 24px;
  }

  .parent-gate-icon {
    width: 54px;
  }

  .parent-gate-question {
    margin: 7px auto;
    padding: 10px;
    font-size: 2.25rem;
  }

  .parent-gate-answer input {
    height: 48px;
  }

  .parent-gate-message {
    margin: 6px 0;
  }
}

@media (max-width: 1100px), (max-height: 680px) {
  .lp-parent-shell {
    grid-template-columns: 205px minmax(0, 1fr);
  }

  .lp-parent-sidebar {
    padding: 10px;
  }

  .lp-parent-logo {
    height: 105px;
  }

  .lp-parent-menu {
    gap: 3px;
    margin-top: 8px;
  }

  .lp-parent-menu button,
  .lp-parent-sidebar-bottom button {
    min-height: 39px;
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  .lp-parent-stat-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .lp-parent-summary {
    grid-column: 1 / -1;
  }

  .lp-parent-dashboard-grid {
    grid-template-columns: 1.35fr 1fr;
  }

  .lp-parent-time-card {
    grid-column: 1 / -1;
  }

  .lp-parent-achievements,
  .lp-parent-settings-grid,
  .lp-parent-content-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .lp-parent-shell {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .lp-parent-logo {
    height: 70px;
  }

  .lp-parent-menu button {
    justify-content: center;
    padding: 6px;
  }

  .lp-parent-menu button strong,
  .lp-parent-sidebar-bottom button span,
  .lp-parent-sidebar-bottom small {
    display: none;
  }

  .lp-parent-profile-pill {
    min-width: 54px;
    padding: 6px;
  }

  .lp-parent-profile-pill small {
    display: none;
  }

  .lp-parent-stat-grid,
  .lp-parent-dashboard-grid,
  .lp-parent-report-grid,
  .lp-parent-achievements,
  .lp-parent-settings-grid,
  .lp-parent-content-grid {
    grid-template-columns: 1fr;
  }

  .lp-parent-summary,
  .lp-parent-time-card,
  .lp-parent-table-card,
  .lp-parent-activity-permissions {
    grid-column: auto;
  }
}