@font-face {
  font-family: "Study Pop UI";
  src: url("/shared/fonts/study-pop-ui.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
site-theme-picker {
  display: inline-block;
  max-width: 100%;
  flex-shrink: 0;
  vertical-align: middle;
  font:
    12px/1.5 "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
  letter-spacing: 0;
}
.site-theme-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #536c62;
}
.site-theme-control > span {
  white-space: nowrap;
}
site-theme-picker select {
  box-sizing: border-box;
  width: 112px;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 1px solid #cbdad3;
  border-radius: 6px;
  background: #fff;
  color: #36594b;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  color-scheme: light;
}
site-theme-picker select:focus-visible {
  outline: 3px solid #79b9a7;
  outline-offset: 3px;
}
.site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.theme-companion {
  display: none;
}
.theme-game-character,
.theme-tab-icon {
  display: none;
}
body[data-ui-surface="play"] .panel {
  min-height: 0;
  max-height: calc(100vh - 48px);
  max-height: calc(
    100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html[data-site-theme="cute"] {
  --site-ink: #424b55;
  --site-accent: #4b7c68;
  --site-display:
    "Study Pop UI", "Arial Rounded MT Bold", "PingFang SC", sans-serif;
  --site-line: #d5dfdc;
  --site-mint: #e3f4ef;
  background: #fff;
  color: var(--site-ink);
}
html[data-site-theme="cute"]
  :is(.home-page, .atlas-page, body[data-ui-surface="learning"]) {
  background: #fff;
  color: var(--site-ink);
}
html[data-site-theme="cute"] :is(.home-header, .atlas-header, .lab-header) {
  background: #fff;
  border-bottom: 2px solid var(--site-line);
}
html[data-site-theme="cute"]
  :is(.home-brand, .atlas-brand, .brand, h1, .lesson-bar h2) {
  color: var(--site-ink);
}
html[data-site-theme="cute"] :is(.home-brand svg, .atlas-brand svg) {
  color: var(--site-accent);
}
html[data-site-theme="cute"]
  :is(
    .home-page h1,
    .home-page h2,
    .home-game-copy strong,
    .home-brand,
    .atlas-intro h1,
    .atlas-sidebar h2,
    .atlas-brand,
    body[data-ui-surface="learning"] h1,
    body[data-ui-surface="learning"] h2,
    body[data-ui-surface="learning"] h3,
    body[data-ui-surface="learning"] button,
    body[data-ui-surface="learning"] select,
    .task-badge,
    .brand,
    .place-values span,
    .progress,
    site-theme-picker,
    body[data-ui-surface="play"] .panel h1,
    body[data-ui-surface="play"] .panel h2,
    body[data-ui-surface="play"] .panel button,
    body[data-ui-surface="play"] .panel select,
    body[data-ui-surface="play"] #settings-modal h2
  ) {
  font-family: var(--site-display);
  font-weight: 400;
  letter-spacing: 0;
}
html[data-site-theme="cute"] .home-brand {
  font-size: 24px;
}
html[data-site-theme="cute"] .site-theme-control {
  color: #586f63;
}
html[data-site-theme="cute"] site-theme-picker select {
  background: #fff;
  color: #426250;
  border: 2px solid #93aa9c;
  box-shadow: 0 3px 0 #dce7df;
}
html[data-site-theme="cute"] site-theme-picker select:focus-visible {
  outline-color: #6e9e87;
}
html[data-site-theme="cute"] .theme-companion {
  display: block;
  width: 94px;
  height: 94px;
  flex: 0 0 94px;
  background: url("/games/typing/assets/animal-scouts-atlas.webp") 0 0 / 200%
    200% no-repeat;
  pointer-events: none;
  animation: site-hello 650ms ease-out both;
}
html[data-site-theme="cute"] .home-heading {
  gap: 16px;
}
html[data-site-theme="cute"] .home-heading > div:first-child {
  flex: 1;
  min-width: 0;
}
html[data-site-theme="cute"] .home-heading h1 {
  font-size: 28px;
}
html[data-site-theme="cute"] :is(.home-heading p, .eyebrow) {
  color: #697d76;
}
html[data-site-theme="cute"] .home-category h2 {
  color: #5c7067;
  font-size: 16px;
}
html[data-site-theme="cute"] .home-game {
  min-height: 124px;
  border: 2px solid #cfdbd5;
  border-bottom-width: 4px;
  border-radius: 8px;
  background: #fff;
  transition:
    transform 160ms ease,
    border-color 160ms ease;
  animation: site-arrive 380ms ease-out backwards;
}
html[data-site-theme="cute"] .home-game:nth-child(2) {
  animation-delay: 60ms;
}
html[data-site-theme="cute"] .home-game-icon {
  position: relative;
  width: 64px;
  height: 64px;
  color: #9e4763;
  background: none;
  border-radius: 8px;
}
html[data-site-theme="cute"] .theme-game-character {
  display: block;
  position: absolute;
  inset: 0;
  background: url("/games/typing/assets/animal-scouts-atlas.webp") 100% 0 / 200%
    200% no-repeat;
}
html[data-site-theme="cute"] .home-game-icon > svg {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 25px;
  height: 25px;
  padding: 3px;
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 6px;
  stroke-width: 2.5;
}
html[data-site-theme="cute"] .home-game--flag .theme-game-character {
  background-position: 0 0;
}
html[data-site-theme="cute"] .home-game--pointer .theme-game-character {
  background-position: 100% 100%;
}
html[data-site-theme="cute"] .home-game--calculator .theme-game-character {
  background-position: 0 100%;
}
html[data-site-theme="cute"] .home-game--hand .theme-game-character {
  background-position: 0 0;
}
html[data-site-theme="cute"] .home-game--flag .home-game-icon {
  color: #3c75a3;
}
html[data-site-theme="cute"] .home-game--pointer .home-game-icon {
  color: #317b67;
}
html[data-site-theme="cute"] .home-game--hand .home-game-icon {
  color: #93671b;
}
html[data-site-theme="cute"] .home-game--calculator .home-game-icon {
  color: #83569c;
}
html[data-site-theme="cute"] .home-game-copy strong {
  font-size: 20px;
  line-height: 1.5;
}
html[data-site-theme="cute"] .home-game-copy > span {
  color: #62756b;
}
html[data-site-theme="cute"] .home-game-copy small {
  color: #6d7a73;
}
html[data-site-theme="cute"] .home-game-arrow {
  color: #779d87;
}
html[data-site-theme="cute"] .home-search input {
  border: 2px solid #c2d2c9;
  background: #fff;
  color: #426250;
}
html[data-site-theme="cute"] .home-resources {
  border-color: var(--site-line);
}
html[data-site-theme="cute"] .home-resources a {
  color: #426250;
}

/* Illustrations and controls change; equal-area diagrams and calculation grids keep their geometry. */
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(.visual-column, .demo-stage, .operation-visual) {
  background: #fff;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(
    .concept,
    .visual-caption,
    .learning-tools,
    .demo-preferences,
    .brand span
  ) {
  color: #62756b;
}
html[data-site-theme="cute"] .subject-mark {
  color: #5b9f8d;
}
html[data-site-theme="cute"] .subject-mark span {
  color: #c46691;
}
html[data-site-theme="cute"] .heading .theme-companion {
  width: 74px;
  height: 74px;
  flex-basis: 74px;
  margin-left: auto;
  margin-right: 18px;
}
html[data-site-theme="cute"] .tabs {
  border-color: var(--site-line);
  gap: 10px;
  padding: 6px 0 10px;
}
html[data-site-theme="cute"] .tabs button {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px solid #d1ddd6;
  border-bottom-width: 4px;
  border-radius: 8px;
  color: #67766e;
  font-size: 16px;
}
html[data-site-theme="cute"] .tabs button[aria-pressed="true"] {
  color: #37674f;
  border-color: #719782;
  background: #fff;
}
html[data-site-theme="cute"] .theme-tab-icon {
  display: block;
  width: 26px;
  height: 26px;
  stroke-width: 2.5;
}
html[data-site-theme="cute"] [data-tab="divide"] .theme-tab-icon {
  color: #a37930;
}
html[data-site-theme="cute"] [data-tab="numbers"] .theme-tab-icon {
  color: #a15f88;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(.primary, .icon-button.primary) {
  background: #fff;
  border: 2px solid #719782;
  color: #37674f;
  font-size: 16px;
  box-shadow: 0 4px 0 #cadfd2;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(.quiet, .demo-launch, .icon-button:not(.primary)) {
  background: #fff;
  border: 1px solid #9eb9ab;
  color: #466a57;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(input, select) {
  border-color: #9eb9ab;
  color: #466a57;
  accent-color: #4b7c68;
}
html[data-site-theme="cute"] .number-row .active-cell {
  background: #ffe4a7;
  color: #70491a;
}
html[data-site-theme="cute"] :is(.place-values div b, .demo-whole) {
  background: var(--site-mint);
  color: #317965;
}
html[data-site-theme="cute"] #demo-dialog {
  border-color: #b2cbbd;
  color: var(--site-ink);
}
html[data-site-theme="cute"] #demo-dialog::backdrop {
  background: #51324899;
}
html[data-site-theme="cute"] :is(.demo-header, .demo-controls) {
  border-color: var(--site-line);
}
html[data-site-theme="cute"] .feedback.correct {
  color: #26765a;
}
html[data-site-theme="cute"] .feedback.wrong {
  color: #b23b4f;
}
html[data-site-theme="cute"] .progress {
  color: #905b75;
}
html[data-site-theme="cute"] :is(.learning-options > div, .custom-problem) {
  border-color: var(--site-line);
}
html[data-site-theme="cute"] :is(.atlas-intro h1, .atlas-sidebar h2) {
  color: var(--site-ink);
}
html[data-site-theme="cute"]
  :is(.atlas-map-surface, .atlas-search, .atlas-sidebar) {
  border-color: var(--site-line);
}
html[data-site-theme="cute"] :is(.atlas-map-surface, .atlas-map-status) {
  background: #fff;
}
html[data-site-theme="cute"]
  :is(.atlas-region-row:hover, .atlas-city-row:hover) {
  background: #fff0f5;
}
html[data-site-theme="cute"] .atlas-copy-primary {
  background: #ac3568;
}
html[data-site-theme="cute"]
  :is(.atlas-metrics strong, .atlas-sidebar-header, .atlas-breadcrumb button) {
  color: #a33867;
}

body[data-ui-surface="play"] site-theme-picker {
  display: block;
  margin: 12px 0;
}
body[data-ui-surface="play"] .site-theme-control {
  justify-content: center;
  color: inherit;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(.panel, #settings-modal, #pause-modal, #modal) {
  background: #fff;
  color: #653952;
  border: 2px solid #b9cdbf;
  backdrop-filter: none;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(
    .panel h1,
    .panel h2,
    .panel p,
    .panel .privacy-note,
    .setting-label,
    .setting-row > span
  ) {
  color: #653952;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(.panel .action-btn, .panel-button, .toggle-btn, .segmented button) {
  background: #fff;
  border: 1px solid #d898b4;
  color: #8d365b;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(
    .panel .primary,
    .panel-button:not(.secondary),
    .segmented button.is-active
  ) {
  background: #a93667;
  color: #fff;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(.pill, .stat-card) {
  background: #ffffffed;
  color: #713951;
  border-color: #e8b6cd;
  backdrop-filter: none;
}
html[data-site-theme="cute"] body[data-ui-surface="play"] .pill span {
  color: #855d73;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(.pill strong, .rebirth-question, .settings-field span) {
  color: #713951;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  .settings-field
  select {
  background: #fff;
  border-color: #d898b4;
  color: #713951;
  color-scheme: light;
}
html[data-site-theme="cute"] body[data-ui-surface="play"] .score-chip {
  background: #e3f4ef;
  border-color: #b4d9cb;
  color: #31725c;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  :is(.score-chip span, .score-chip strong, .rebirth-message) {
  color: #31725c;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  .rebirth-message.is-wrong {
  color: #b23b4f;
}
html[data-site-theme="cute"]
  body[data-ui-surface="play"]
  .toggle-btn.is-active {
  background: #a93667;
  color: #fff;
  border-color: #a93667;
}
html[data-site-theme="cute"] body[data-ui-surface="learning"] .visual-column {
  border-top: 1px dashed #bdcfc4;
  border-bottom: 1px dashed #bdcfc4;
}
html[data-site-theme="cute"] .demo-stage {
  border: 1px dashed #b8d0c1;
}
html[data-site-theme="cute"] .task-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 15px;
  color: #7b6030;
  background: #fff5ca;
  border: 1px solid #d7bf78;
  border-radius: 4px;
  transform: rotate(-3deg);
}
html[data-site-theme="cute"] .step-heading {
  font-family: var(--site-display);
  font-size: 14px;
  color: #547363;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  :is(.primary, .quiet, .demo-launch, .icon-button) {
  border-radius: 8px;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  .primary:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #cadfd2;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  .primary:disabled {
  color: #7a8d80;
  border-color: #c8d4cc;
  box-shadow: none;
  opacity: 0.65;
}
html[data-site-theme="cute"] .knowledge {
  border-top-style: dashed;
  color: #61796a;
}
html[data-site-theme="cute"]
  :is(.digit-inputs input, .sum-label input, .operation-fields input) {
  background: #fff;
  border: 2px solid #a2c4b0;
  border-radius: 8px;
  box-shadow: inset 0 -3px #eef5f0;
}
html[data-site-theme="cute"] :is(.chocolate button, .demo-chocolate > span) {
  position: relative;
  color: #845c47;
  border-radius: 5px;
}
html[data-site-theme="cute"] .chocolate button {
  font-size: 0;
}
html[data-site-theme="cute"]
  :is(.chocolate button[aria-pressed="true"], .demo-chocolate > span.selected) {
  color: #fff1d5;
}
html[data-site-theme="cute"]
  :is(.chocolate button, .demo-chocolate > span)::before {
  content: "";
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 5px);
  width: 3px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 11px 0 currentColor;
  pointer-events: none;
}
html[data-site-theme="cute"]
  :is(.chocolate button, .demo-chocolate > span)::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 5px;
  top: calc(50% + 2px);
  left: calc(50% - 4px);
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}
html[data-site-theme="cute"]
  :is(.hundred-grid, .relation-hundred, .relation-pieces) {
  background: #d4e4da;
  outline: 1px solid #8bb49a;
  outline-offset: 3px;
}
html[data-site-theme="cute"] .place-values > div > span {
  font-size: 14px;
  color: #577b64;
}
html[data-site-theme="cute"] .place-values div b {
  background: #fff;
  border: 2px solid #accbb7;
  border-radius: 8px;
  box-shadow: 0 3px 0 #e1ece4;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  .feedback.correct:not(:empty) {
  position: relative;
  padding: 10px 0 10px 60px;
  min-height: 64px;
  border-bottom: 1px dashed #bfd6c6;
}
html[data-site-theme="cute"]
  body[data-ui-surface="learning"]
  .feedback.correct:not(:empty)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 48px;
  height: 48px;
  background: url("/games/typing/assets/animal-scouts-atlas.webp") 100% 0 / 200%
    200% no-repeat;
  animation: site-hello 400ms ease-out backwards;
}
@keyframes site-hello {
  0% {
    transform: translateY(6px) rotate(-5deg);
    opacity: 0;
  }
  65% {
    transform: translateY(-4px) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}
@keyframes site-arrive {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover: hover) and (pointer: fine) {
  html[data-site-theme="cute"] .home-game:hover {
    transform: translateY(-3px);
    border-color: #7caa8d;
  }
  html[data-site-theme="cute"] .home-game:hover .home-game-icon svg {
    transform: rotate(-8deg);
    transition: transform 160ms ease;
  }
}
@media (max-width: 640px) {
  site-theme-picker select {
    font-size: 16px;
  }
  .site-theme-control > span {
    display: none;
  }
  .site-header-actions {
    gap: 10px;
  }
  .home-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .home-textbooks {
    font-size: 12px;
  }
  html[data-site-theme="cute"] .home-heading {
    flex-wrap: wrap;
    align-items: center;
  }
  html[data-site-theme="cute"] .home-heading h1 {
    font-size: 23px;
  }
  html[data-site-theme="cute"] .home-heading .theme-companion {
    width: 74px;
    height: 74px;
    flex-basis: 74px;
  }
  html[data-site-theme="cute"] .home-heading .home-search {
    flex-basis: 100%;
  }
  html[data-site-theme="cute"] .home-heading .home-search input {
    width: 100%;
  }
  .lab-header,
  .atlas-header {
    flex-wrap: wrap;
  }
  .lab-header .site-header-actions {
    margin-left: auto;
  }
  .progress > span:last-child {
    display: none;
  }
  html[data-site-theme="cute"] .heading .theme-companion {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    margin-right: 0;
  }
  html[data-site-theme="cute"] .heading .subject-mark {
    display: none;
  }
  html[data-site-theme="cute"] .tabs button {
    padding: 10px 2px;
    font-size: 14px;
    min-height: 76px;
  }
  body[data-ui-surface="play"] .site-theme-control > span {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-site-theme="cute"]
    :is(.home-game, .theme-companion, .home-game-icon svg) {
    animation: none;
    transition: none;
    transform: none;
  }
  html[data-site-theme="cute"] body[data-ui-surface="learning"] .primary,
  html[data-site-theme="cute"]
    body[data-ui-surface="learning"]
    .feedback.correct::before {
    animation: none;
    transition: none;
    transform: none;
  }
}
@media (pointer: coarse) {
  site-theme-picker select {
    font-size: 16px;
  }
}
html[data-site-theme="cute"][data-reduced-motion="true"]
  :is(.home-game, .theme-companion, .home-game-icon svg) {
  animation: none;
  transition: none;
  transform: none;
}
html[data-site-theme="cute"][data-reduced-motion="true"]
  body[data-ui-surface="learning"]
  .primary,
html[data-site-theme="cute"][data-reduced-motion="true"]
  body[data-ui-surface="learning"]
  .feedback.correct::before {
  animation: none;
  transition: none;
  transform: none;
}