:root {
  --accent-500: #3f5588;
  --accent-600: #2f3f65;
  --accent-700: #1f2942;
  --accent-800: #0e141f;
  --action: #2f3f65;
  --action-edge: #1f2942;
  --action-hover: #3f5588;
  --answer-circle: #da2d23;
  --answer-heart: #5a5ae6;
  --answer-moon: #812840;
  --answer-square: #e79301;
  --answer-star: #3b2a8c;
  --answer-triangle: #7bc3fe;
  --black: #000000;
  --blue-100: #eef0f7;
  --blue-200: #b6c2dd;
  --blue-300: #93a4cd;
  --blue-400: #7087bd;
  --blue-500: #4f6aab;
  --blue-600: #3f5588;
  --blue-700: #2f3f65;
  --blue-800: #1f2942;
  --blue-900: #0e141f;
  --bluesky: #1185fe;
  --canvas: #f4f3ec;
  --danger: #ab0002;
  --danger-fill: #da2d23;
  --drawing-paper: #fffaf2;
  --facebook: #0866ff;
  --focus: #3f5588;
  --info: #255e89;
  --info-fill: #7bc3fe;
  --ink: #16203a;
  --ink-soft: #575e71;
  --line: #e3e4e7;
  --line-strong: #8b909d;
  --linkedin: #0a66c2;
  --messenger: #0084ff;
  --on-action: #ffffff;
  --on-danger-fill: #ffffff;
  --on-info-fill: #012e4c;
  --on-success-fill: #193300;
  --on-warning-fill: #3f2501;
  --page: #f8f7f2;
  --paper: #f8f7f2;
  --reddit: #ff4500;
  --slack: #4a154b;
  --slack-hover: #611f64;
  --success: #386805;
  --success-fill: #73cd00;
  --surface: #ffffff;
  --surface-muted: #f3f4f5;
  --telegram: #26a5e4;
  --tj-blue: #7bc3fe;
  --tj-blue-100: #e1f1ff;
  --tj-blue-200: #c5e4ff;
  --tj-blue-300: #a2d4fe;
  --tj-blue-400: #79c1fb;
  --tj-blue-50: #f0f8ff;
  --tj-blue-500: #67ace3;
  --tj-blue-600: #5191c4;
  --tj-blue-700: #3b77a6;
  --tj-blue-800: #255e89;
  --tj-blue-900: #114970;
  --tj-blue-950: #012e4c;
  --tj-green: #73cd00;
  --tj-green-100: #d1ffb4;
  --tj-green-200: #acf975;
  --tj-green-300: #96e856;
  --tj-green-400: #7cd427;
  --tj-green-50: #e9ffdc;
  --tj-green-500: #6cbe15;
  --tj-green-600: #5aa008;
  --tj-green-700: #488405;
  --tj-green-800: #386805;
  --tj-green-900: #2a5102;
  --tj-green-950: #193300;
  --tj-orange: #e79301;
  --tj-orange-100: #ffebd5;
  --tj-orange-200: #fed8ae;
  --tj-orange-300: #fec078;
  --tj-orange-400: #f6a63b;
  --tj-orange-50: #fff5ea;
  --tj-orange-500: #e19011;
  --tj-orange-600: #bf7903;
  --tj-orange-700: #9d6301;
  --tj-orange-800: #7d4d02;
  --tj-orange-900: #613b01;
  --tj-orange-950: #3f2501;
  --tj-red: #da2d23;
  --tj-red-100: #ffe9e5;
  --tj-red-200: #ffd4cd;
  --tj-red-300: #febab0;
  --tj-red-400: #ff998a;
  --tj-red-50: #fff4f2;
  --tj-red-500: #fd7464;
  --tj-red-600: #e94c3e;
  --tj-red-700: #cf231b;
  --tj-red-800: #ab0002;
  --tj-red-900: #850504;
  --tj-red-950: #580001;
  --warning: #7d4d02;
  --warning-fill: #e79301;
  --whatsapp: #25d366;
  --white: #ffffff;
}

/* The board's tasks, tjaz.com/boards, see board/README.md. A play surface of Tjaz' design system
   (.claude/skills/tjaz-design): the squared paper, white cards, the logo's colours, tactile buttons and Raleway, with
   the design system's colours as variables before this, from shared/designTokens.js, see build.js. Everything is sized
   from --u, which grows with the screen, so the sums and the paint pots can be read and reached at a classroom's
   board as well as on a laptop and a projector. Start and end, never left and right, as the board is also read from
   right to left. */

/* Raleway, served from Tjaz itself, as views/shared/css/raleway.css has it */
/* cyrillic-ext */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/raleway/raleway-normal-cyrillic-ext.woff2) format("woff2");
  unicode-range:
    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/raleway/raleway-normal-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/raleway/raleway-normal-vietnamese.woff2) format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/raleway/raleway-normal-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(/fonts/raleway/raleway-normal-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* the design system's corners and shadows, as views/shared/css/tailwind.css' theme has them */
  --radius-control: 1rem;
  --radius-tile: 1.5rem;
  --radius-card: 2rem;
  --shadow-card:
    0 1px 2px rgb(22 32 58 / 0.04), 0 12px 32px -12px rgb(22 32 58 / 0.18);
  --shadow-card-lg:
    0 2px 4px rgb(22 32 58 / 0.04), 0 30px 60px -24px rgb(22 32 58 / 0.35);
  --shadow-press: 0 5px 0 0 hsl(222, 37%, 19%);
  --shadow-press-soft: 0 4px 0 0 rgb(22 32 58 / 0.12);
  /* a unit that grows with the screen: about 19 px on a board of 1920 × 1080, 14 on a laptop, never under 9 */
  --u: clamp(9px, min(1vw, 1.8vh), 26px);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background-color: var(--paper);
  /* the squared paper of Tjaz' play pages, bg-grid-paper bg-grid */
  background-image:
    linear-gradient(to right, rgb(123 195 254 / 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(123 195 254 / 0.28) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--ink);
  font-family: Raleway, system-ui, sans-serif;
  font-variant-numeric: lining-nums;
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  font: inherit;
  color: inherit;
}
/* a tap is never the start of a double tap to zoom, so it's a click at once, see taps.js */
button,
a,
summary {
  touch-action: manipulation;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}
[dir="rtl"] svg.flips {
  transform: scaleX(-1);
}

/* buttons, as the design system's +button on a play surface: primary with its pressed edge, secondary white */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: max(44px, calc(var(--u) * 3));
  padding: 0.5em 1.2em;
  border: 0;
  border-radius: var(--radius-control);
  font-weight: 800;
  font-size: max(16px, calc(var(--u) * 1.1));
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}
.button.primary {
  background: var(--action);
  color: var(--on-action);
  box-shadow: var(--shadow-press);
}
.button.secondary {
  background: var(--surface);
  color: var(--action);
  box-shadow:
    inset 0 0 0 2px var(--action),
    var(--shadow-press-soft);
}
.button.quiet {
  background: transparent;
  color: var(--action);
}
.button.primary:active,
.button.secondary:active {
  transform: translateY(4px);
  box-shadow: none;
}
.icon-button {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: max(44px, calc(var(--u) * 3));
  height: max(44px, calc(var(--u) * 3));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--action);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px var(--line);
  font-size: max(18px, calc(var(--u) * 1.3));
  cursor: pointer;
}
.icon-button:active {
  transform: scale(0.94);
}

/* the maths, see math/render.js: digits in a row, fractions stacked, the missing number as a box */
.m-expr {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  white-space: nowrap;
  unicode-bidi: isolate;
  font-weight: 800;
  line-height: 1;
}
.m-op {
  font-weight: 700;
  padding-inline: 0.06em;
}
.m-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72em;
  line-height: 1.05;
  vertical-align: middle;
}
.m-frac .m-n {
  padding-inline: 0.15em;
  border-block-end: 0.09em solid currentColor;
}
.m-gap {
  display: inline-grid;
  place-items: center;
  min-width: 1.25em;
  padding: 0.08em 0.18em;
  border: 0.08em dashed currentColor;
  border-radius: 0.25em;
  color: var(--ink-soft);
}
.m-sq {
  font-size: 0.6em;
  align-self: flex-start;
}

/* that the tasks were made with AI, small, as the 2D quiz's madeWithAi.pug: a pill with a sparkle */
.made-with-ai {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.made-with-ai svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--action);
}
.menu-titles .made-with-ai {
  margin-block-start: 0.5em;
}

/* choosing the language, as on Tjaz' other pages, see languages.js: the page's language, which opens all of them */
.language-picker {
  position: relative;
  margin-inline-start: auto;
  align-self: flex-start;
}
.language-picker summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--surface);
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 1px var(--line);
  font-weight: 700;
  font-size: max(15px, calc(var(--u) * 0.95));
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.language-picker summary::-webkit-details-marker {
  display: none;
}
.language-picker .flag {
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(22 32 58 / 0.1);
}
.language-picker svg.flag {
  color: var(--ink-soft);
  box-shadow: none;
}
.language-picker .chevron {
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  transition: rotate 0.15s;
}
.language-picker details[open] .chevron {
  rotate: 180deg;
}
.language-panel {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  width: min(20rem, calc(100vw - 32px));
  padding: 8px;
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow:
    var(--shadow-card-lg),
    0 0 0 1px var(--line);
}
.language-panel input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}
.language-lists {
  max-height: min(60vh, 22rem);
  margin-block-start: 8px;
  overflow-y: auto;
}
.language-lists ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.language-heading {
  margin: 0;
  padding: 10px 12px 4px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.language-lists a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}
.language-lists a:hover,
.language-lists a:focus-visible {
  background: var(--surface-muted);
}
.language-lists a[aria-current="true"] {
  color: var(--action);
  font-weight: 700;
}
.language-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.language-english {
  flex: none;
  font-size: 13px;
  color: var(--ink-soft);
}
.language-none {
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ———————————————————————— the menu ———————————————————————— */

.menu {
  max-width: 1600px;
  margin-inline: auto;
  padding: max(16px, calc(var(--u) * 1.5)) max(16px, calc(var(--u) * 2))
    calc(var(--u) * 3);
}
.menu-head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  margin-block-end: calc(var(--u) * 1.5);
}
.logo img {
  display: block;
  width: max(96px, calc(var(--u) * 7));
  height: auto;
}
.menu-titles h1 {
  margin: 0;
  font-size: max(28px, calc(var(--u) * 2.6));
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.menu-titles .lead {
  margin: 0.3em 0 0;
  font-size: max(16px, calc(var(--u) * 1.15));
  font-weight: 600;
  color: var(--ink-soft);
}
.levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.75fr);
  gap: calc(var(--u) * 0.9);
  margin-block-end: calc(var(--u) * 1.5);
}
.level {
  --level: var(--tj-green);
  --level-soft: var(--tj-green-100);
  --level-ink: var(--tj-green-950);
  display: grid;
  justify-items: start;
  gap: 0.3em;
  min-height: 44px;
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1);
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 2px var(--level-soft);
  text-align: start;
  cursor: pointer;
  transition: transform 0.15s;
}
.level-easy {
  --level: var(--tj-blue);
  --level-soft: var(--tj-blue-100);
  --level-ink: var(--tj-blue-950);
}
.level-medium {
  --level: var(--tj-orange);
  --level-soft: var(--tj-orange-100);
  --level-ink: var(--tj-orange-950);
}
.level-hard {
  --level: var(--tj-red-500);
  --level-soft: var(--tj-red-100);
  --level-ink: var(--tj-red-950);
}
.level-all {
  --level: var(--action);
  --level-soft: var(--line);
  --level-ink: var(--on-action);
}
.level[aria-pressed="true"] {
  background: var(--level);
  color: var(--level-ink);
  box-shadow:
    var(--shadow-card),
    0 5px 0 0 color-mix(in srgb, var(--level) 60%, var(--ink));
  transform: translateY(-3px);
}
.level-name {
  font-size: max(18px, calc(var(--u) * 1.45));
  font-weight: 900;
}
.level-ages {
  font-size: max(14px, calc(var(--u) * 0.95));
  font-weight: 700;
  opacity: 0.85;
}
.level-example {
  margin-block-start: 0.2em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: max(16px, calc(var(--u) * 1.1));
}
/* the topics a class may have learnt, as chips, each with its sign and how many tasks there are of it */
.topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 0.5);
  margin-block-end: calc(var(--u) * 1.5);
}
.topics-label {
  margin-inline-end: calc(var(--u) * 0.4);
  font-size: max(16px, calc(var(--u) * 1.05));
  font-weight: 800;
}
.topic {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.35em 0.9em;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 2px var(--line);
  font-weight: 800;
  font-size: max(15px, calc(var(--u) * 1));
  cursor: pointer;
}
.topic-sign {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  font-size: 1.35em;
}
.topic-count {
  min-width: 1.6em;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.85em;
  text-align: center;
}
.topic[aria-pressed="true"] {
  background: var(--action);
  color: var(--on-action);
  box-shadow: var(--shadow-press);
}
.topic[aria-pressed="true"] .topic-count {
  background: var(--accent-500);
}
.topic.is-empty:not([aria-pressed="true"]) {
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px var(--line);
  background: transparent;
}
.task-group + .task-group {
  margin-block-start: calc(var(--u) * 2);
}
.group-heading {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0 0 calc(var(--u) * 0.8);
  font-size: max(20px, calc(var(--u) * 1.6));
  font-weight: 900;
}
.group-heading .level-ages {
  font-size: 0.6em;
  color: var(--ink-soft);
}
.tasks {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(150px, calc(var(--u) * 14)), 1fr)
  );
  gap: calc(var(--u) * 1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.task-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-tile);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.task-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-lg);
}
.task-card:active {
  transform: scale(0.98);
}
.task-picture {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(var(--tj-blue-200), var(--tj-blue-50));
}
.task-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.task-number {
  position: absolute;
  inset-block-start: calc(var(--u) * 0.6);
  inset-inline-start: calc(var(--u) * 0.6);
  display: grid;
  place-items: center;
  min-width: max(32px, calc(var(--u) * 2.2));
  height: max(32px, calc(var(--u) * 2.2));
  padding-inline: 0.4em;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-weight: 900;
  font-size: max(16px, calc(var(--u) * 1.1));
}
.task-done {
  position: absolute;
  inset-block-start: calc(var(--u) * 0.6);
  inset-inline-end: calc(var(--u) * 0.6);
  display: grid;
  place-items: center;
  width: max(32px, calc(var(--u) * 2.2));
  height: max(32px, calc(var(--u) * 2.2));
  border-radius: 50%;
  background: var(--tj-orange-300);
  color: var(--tj-orange-950);
  box-shadow: var(--shadow-card);
}
.task-text {
  display: grid;
  gap: 0.25em;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9) calc(var(--u) * 1);
}
.task-name {
  font-size: max(16px, calc(var(--u) * 1.2));
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.task-topic {
  font-size: max(14px, calc(var(--u) * 0.95));
  font-weight: 600;
  color: var(--ink-soft);
}
.task-example {
  justify-self: start;
  margin-block-start: 0.2em;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: max(15px, calc(var(--u) * 1));
}

/* ———————————————————————— a task ———————————————————————— */

.play {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* its own layer under the bar, the dock and the buttons, also a chosen sum lifted over the other sums */
  z-index: 0;
}
.bar,
.dock,
.turn,
.hint,
.finale {
  z-index: 1;
}
.stage.lab {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.sky {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.is-done .sky {
  opacity: 1;
}
.world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}
.sums {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the lines from a sum pushed aside to its point, and the dot there */
.sum-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sum-lines line {
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
}
.sum-lines circle {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
}
.sum-lines .is-shown {
  opacity: 1;
}
.sum-lines .is-hidden {
  opacity: 0;
}

/* a sum on a region: a white label with an ink edge, like a sticker on the colouring book */
.sum {
  position: absolute;
  /* physical: the label is moved to its point on the screen with a transform from the top left, see labels.js */
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  min-width: max(44px, calc(var(--u) * 3.2));
  min-height: max(44px, calc(var(--u) * 2.9));
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.7);
  border: max(2px, calc(var(--u) * 0.16)) solid var(--ink);
  border-radius: calc(var(--u) * 1.1);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 0.25) 0 rgb(22 32 58 / 0.25);
  font-size: max(17px, calc(var(--u) * 1.55));
  pointer-events: auto;
  cursor: pointer;
  transition:
    opacity 0.25s,
    scale 0.2s;
  will-change: transform;
}
/* a region's picture, e.g. of a shape whose corners are counted, smaller on its label than on the card, which shows
   it big, and without the label's "?", so the pictures don't crowd the world */
.sum .m-pic {
  height: 1.35em;
  max-width: 3em;
}
.sum .m-ask-short {
  display: none;
}
.sum.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.sum.is-chosen {
  background: var(--tj-orange-200);
  scale: 1.18;
  z-index: 2;
}
.sum.is-gone {
  animation: sum-gone 0.5s ease forwards;
  pointer-events: none;
}
@keyframes sum-gone {
  30% {
    scale: 1.35;
  }
  100% {
    scale: 0;
    opacity: 0;
  }
}
.is-shaking {
  animation: shake 0.45s ease;
}
@keyframes shake {
  20%,
  60% {
    translate: -8px 0;
  }
  40%,
  80% {
    translate: 8px 0;
  }
}
.is-bouncing {
  animation: bounce 0.5s ease;
}
@keyframes bounce {
  40% {
    translate: 0 -14px;
    scale: 1.08;
  }
}

/* the bar at the top */
.bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: max(8px, calc(var(--u) * 0.7)) max(12px, calc(var(--u) * 1));
  pointer-events: none;
}
.bar > * {
  pointer-events: auto;
}
.bar .back {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: max(16px, calc(var(--u) * 1.25));
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-weight: 800;
  font-size: max(14px, calc(var(--u) * 1));
  white-space: nowrap;
}
.dots {
  display: flex;
  gap: 3px;
}
.dots span {
  width: max(8px, calc(var(--u) * 0.55));
  height: max(8px, calc(var(--u) * 0.55));
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--dot);
  transition: background 0.4s;
}
.dots .is-done {
  background: var(--dot);
}

/* turning the world, low at its sides, where a child can reach */
.turn {
  position: absolute;
  inset-block-end: calc(var(--dock, 30vh) + var(--u) * 1);
  width: max(52px, calc(var(--u) * 4));
  height: max(52px, calc(var(--u) * 4));
  font-size: max(22px, calc(var(--u) * 1.8));
}
/* physical: the button that turns the world to the left is on the left, also from right to left */
.turn-left {
  left: max(12px, calc(var(--u) * 1));
}
.turn-right {
  right: max(12px, calc(var(--u) * 1));
}
.needs-turn .turn {
  animation: pulse 1.2s ease infinite;
}
@keyframes pulse {
  50% {
    scale: 1.15;
    box-shadow: 0 0 0 8px rgb(231 147 1 / 0.35);
  }
}
.hint {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--dock, 30vh) + var(--u) * 1.6);
  width: fit-content;
  max-width: 70%;
  margin: 0 auto;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--tj-orange-200);
  color: var(--tj-orange-950);
  box-shadow: var(--shadow-card);
  font-weight: 800;
  font-size: max(16px, calc(var(--u) * 1.15));
  text-align: center;
  pointer-events: none;
}

/* the dock at the bottom: the card with the chosen sum, and the paint pots */
.dock {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.8);
  padding: 0 max(12px, calc(var(--u) * 1)) max(12px, calc(var(--u) * 1));
  pointer-events: none;
}
.dock > * {
  pointer-events: auto;
}
.card {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  min-width: min(100%, calc(var(--u) * 34));
  padding: calc(var(--u) * 0.5);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-lg);
}
.ask {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.2em 0.6em;
  min-height: max(52px, calc(var(--u) * 4.2));
  text-align: center;
}
.ask-text {
  font-size: max(17px, calc(var(--u) * 1.45));
  font-weight: 800;
  color: var(--ink-soft);
}
.ask-sum {
  font-size: max(28px, calc(var(--u) * 3.1));
}
.ask-note {
  font-size: max(16px, calc(var(--u) * 1.25));
  font-weight: 800;
}
.ask.is-right .ask-note {
  color: var(--success);
}
.ask.is-wrong .ask-note {
  color: var(--warning);
}
.step {
  flex: none;
}
.help-button {
  flex: none;
}
.help-button.is-suggested {
  background: var(--tj-orange-200);
  animation: pulse 1.2s ease 3;
}
/* the picture of the sum, above the card, see help.js and help.css */
.help-panel {
  /* over the world, just above the card, so the world doesn't move when it's shown */
  position: absolute;
  inset-block-end: calc(100% + var(--u) * 0.6);
  display: grid;
  place-items: center;
  max-width: min(100%, calc(var(--u) * 50));
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-lg);
  animation: pop-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
}
/* a paint pot: a tile of its colour with its number on a white label */
.pot {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.3);
  min-width: max(64px, calc(var(--u) * 6.5));
  padding: calc(var(--u) * 0.45) calc(var(--u) * 0.6) calc(var(--u) * 0.55);
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--pot);
  box-shadow:
    0 calc(var(--u) * 0.3) 0 0 color-mix(in srgb, var(--pot) 55%, var(--ink)),
    var(--shadow-card);
  cursor: pointer;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}
.pot:active {
  transform: translateY(calc(var(--u) * 0.25));
  box-shadow: 0 calc(var(--u) * 0.05) 0 0
    color-mix(in srgb, var(--pot) 55%, var(--ink));
}
.pot .paint {
  width: 70%;
  height: max(10px, calc(var(--u) * 0.9));
  border-radius: 999px 999px 40% 40%;
  background: color-mix(in srgb, var(--pot) 70%, white);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.12);
}
.pot .value {
  display: grid;
  place-items: center;
  min-width: max(44px, calc(var(--u) * 4.4));
  min-height: max(40px, calc(var(--u) * 3.2));
  padding: 0.15em 0.4em;
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: max(22px, calc(var(--u) * 2.1));
}
.pot.is-brush {
  outline: max(4px, calc(var(--u) * 0.3)) solid var(--ink);
  outline-offset: 3px;
  transform: translateY(-6px);
}

/* the end: the world is alive, and a card over it */
.finale {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
}
.finale-card {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1);
  max-width: min(92vw, calc(var(--u) * 40));
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-lg);
  text-align: center;
  pointer-events: auto;
  animation: pop-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pop-in {
  from {
    scale: 0.6;
    opacity: 0;
  }
}
.finale-card h2 {
  margin: 0;
  font-size: max(24px, calc(var(--u) * 2.4));
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stars {
  display: flex;
  gap: 0.2em;
  color: var(--tj-orange);
  font-size: max(36px, calc(var(--u) * 3.4));
}
.stars svg {
  stroke: var(--tj-orange-700);
  animation: star-in 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.stars svg:nth-child(2) {
  animation-delay: 0.15s;
  translate: 0 -0.2em;
}
.stars svg:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes star-in {
  from {
    scale: 0;
    rotate: -90deg;
  }
}
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 0.8);
}
.is-done .dock,
.is-done .turn,
.is-done .hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s;
}

/* a phone held upright: fewer words in the bar */
@media (max-width: 600px) {
  .bar .back span,
  .title,
  .dots {
    display: none;
  }
  .bar {
    justify-content: space-between;
  }
  .levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .level-all {
    grid-column: span 2;
  }
  .menu-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .menu-titles {
    order: 3;
    flex-basis: 100%;
  }
}

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

/* the lab, see lab.js */
.lab-info {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  font: 600 14px sans-serif;
}
.lab-dots span {
  position: absolute;
  /* physical, as .sum */
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font: 700 14px/26px sans-serif;
  text-align: center;
}
.lab-dots .is-hidden {
  opacity: 0.25;
}

/* The help's pictures of a sum, see src/help.js: an <svg class="help-model help-…"> on the card, drawn like the
   colouring book, in round shapes with ink outlines and the logo's four colours, which build.js puts after the
   board's stylesheet, with the design system's colours as variables before them both. A sum's numbers have their
   colours in the order they're written, help-a to help-d, what's taken away is crossed out (help-gone and the
   crosses), and the missing number is dashed (help-ghost). A picture's width and height are in em, a hundred of its
   units each, so a dot is as big in every picture, from the board's unit, and it's made smaller, keeping its shape,
   only when the card is too narrow for it or it would be taller than the card should grow. It's always drawn from
   left to right, as maths is. */

.help-model {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(40vh, calc(var(--u, 14px) * 20));
  margin-inline: auto;
  font-size: calc(var(--u, 14px) * 7);
  overflow: visible;
  stroke-linejoin: round;
}

/* the colours of a sum's numbers, in the order they're written, and a counter that's no number's */
.help-model .help-a {
  fill: var(--tj-orange);
}
.help-model .help-b {
  fill: var(--tj-blue);
}
.help-model .help-c {
  fill: var(--tj-green);
}
.help-model .help-d {
  fill: var(--tj-red-500);
}
.help-model .help-plain {
  fill: var(--surface);
}

/* counters, as on a ten-frame or in an array, and the missing number's, dashed and empty */
.help-model .help-dot {
  stroke: var(--ink);
  stroke-width: 3;
}
.help-model .help-ghost {
  fill: var(--tj-orange-50);
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
}

/* what's taken away: pale, with a cross on it, and not see-through, as a flat of a stack covers the one before */
.help-model .help-a.help-gone {
  fill: var(--tj-orange-200);
}
.help-model .help-b.help-gone {
  fill: var(--tj-blue-100);
}
.help-model .help-c.help-gone {
  fill: var(--tj-green-100);
}
.help-model .help-d.help-gone {
  fill: var(--tj-red-100);
}
.help-model .help-dot.help-gone,
.help-model .help-block.help-gone {
  stroke: var(--line-strong);
}
.help-model .help-cross {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ten-frames: 2 rows of 5 cells */
.help-model .help-frame {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3.5;
}
.help-model .help-cells {
  fill: none;
  stroke: var(--tj-blue-300);
  stroke-width: 2;
}

/* trays that hold a group, e.g. a fourth of 20, coloured when they're the fraction */
.help-model .help-tray {
  fill: var(--surface-muted);
  stroke: var(--ink-soft);
  stroke-width: 2;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.help-model .help-tray-a {
  fill: var(--tj-orange-100);
  stroke: var(--tj-orange-700);
  stroke-dasharray: none;
}

/* base-ten blocks: cubes, rods and flats, with the seams between their cubes */
.help-model .help-block {
  stroke: var(--ink);
  stroke-width: 2.5;
}
.help-model .help-block.help-ghost {
  stroke-width: 2;
}
.help-model .help-seams {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.35;
  stroke-width: 1.5;
}
.help-model .help-seams-ghost {
  stroke: var(--ink-soft);
  stroke-dasharray: 3 4;
}

/* fraction bars, tenths strips and hundredths grids: the whole, its fill, the lines between its parts and its outline,
   and a hint bar, dashed and empty, of the parts the fractions can all be counted in */
.help-model .help-bar {
  fill: var(--surface);
}
.help-model .help-bar-hint {
  fill: var(--surface-muted);
}
.help-model .help-fill {
  stroke: none;
}
.help-model .help-parts {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.help-model .help-parts-fine {
  stroke-width: 1;
  stroke-opacity: 0.55;
}
.help-model .help-parts-hint {
  stroke: var(--ink-soft);
  stroke-dasharray: 4 4;
}
.help-model .help-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
}
.help-model .help-outline-hint {
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}

/* an area, e.g. 1/2 × 2/3: the first number's columns, the second's rows and where they meet */
.help-model .help-area-a {
  fill: var(--tj-orange-200);
}
.help-model .help-area-b {
  fill: var(--tj-blue-200);
}
.help-model .help-area-both {
  fill: var(--tj-green);
}

/* the number line: the line, its marks and their digits, and the hops in their numbers' colours with ink edges */
.help-model .help-axis,
.help-model .help-marks {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.help-model .help-label {
  fill: var(--ink);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  text-anchor: middle;
}
.help-model .help-hop-ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
}
.help-model .help-hop {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.help-model .help-hop.help-a {
  stroke: var(--tj-orange);
}
.help-model .help-hop.help-b {
  stroke: var(--tj-blue);
}
.help-model .help-hop.help-c {
  stroke: var(--tj-green);
}
.help-model .help-hop.help-d {
  stroke: var(--tj-red-500);
}

/* The geometry tasks' pictures, see src/math/pictures.js: an <svg class="m-pic m-pic-…"> on a region's label, plain,
   and on the card with its details, drawn like the colouring book, with ink outlines and the design system's colours,
   in em, so it's as big as the text it's in, and the question beside it on the card, which wraps, in the reader's
   direction. Here, as the pictures are drawn by the maths beside the help's, which this file is for */
.m-pic {
  display: block;
  flex: none;
  /* over the board's size for an icon, svg's: as high as the picture is, and as wide as its shape makes it */
  width: auto;
  height: 1.8em;
  max-width: 4em;
  overflow: visible;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.m-pic .m-pic-shape {
  fill: var(--tj-blue-100);
  stroke: var(--ink);
  stroke-width: 4;
}
.m-pic-shapes .m-pic-shape {
  stroke-width: 3;
}
/* squares to count or mirror, the paper around them and the mirror line */
.m-pic .m-pic-cell {
  fill: var(--tj-orange-200);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.m-pic .m-pic-paper {
  fill: none;
  stroke: var(--tj-blue-300);
  stroke-width: 1.2;
}
.m-pic .m-pic-mirror {
  fill: none;
  stroke: var(--tj-red-500);
  stroke-width: 4.5;
  stroke-dasharray: 9 5;
  stroke-linecap: butt;
}
/* a grid of numbered squares and the dot to mirror */
.m-pic .m-pic-board {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 3;
}
.m-pic .m-pic-squares {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.m-pic .m-pic-num,
.m-pic .m-pic-axis-num,
.m-pic .m-pic-angle {
  fill: var(--ink);
  stroke: none;
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  text-anchor: middle;
}
.m-pic .m-pic-num {
  font-size: 13px;
  dominant-baseline: central;
}
.m-pic .m-pic-dot {
  fill: var(--tj-orange);
  stroke: var(--ink);
  stroke-width: 2.5;
}
/* a shape on squared or dotted paper, with the paper's lines over its colour */
.m-pic .m-pic-fill {
  fill: var(--tj-green-100);
}
.m-pic .m-pic-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.m-pic .m-pic-lattice {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 3.2;
}
/* a coordinate system's axes, their arrows and numbers */
.m-pic .m-pic-axis,
.m-pic .m-pic-arrows {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.m-pic .m-pic-axis-num {
  font-size: 10px;
  font-weight: 700;
}
/* a triangle's angles: the arcs, the degrees and the one asked about */
.m-pic .m-pic-arc {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.m-pic .m-pic-arc.m-pic-asked {
  stroke: var(--tj-orange-700);
  stroke-width: 3;
}
.m-pic .m-pic-angle {
  font-size: 16px;
}
.m-pic .m-pic-asked-text {
  fill: var(--tj-orange-700);
}
/* a solid: the faces at the front, the edges there and the edges at the back, dashed */
.m-pic .m-pic-face {
  fill: var(--tj-blue-100);
  stroke: none;
}
.m-pic .m-pic-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
}
.m-pic .m-pic-hidden {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
  stroke-linecap: butt;
}
/* bigger and wider on the card, see play.js, than on a label */
.ask-sum .m-pic {
  height: 3em;
  max-width: 7em;
}
/* as small as the other signs in the menu's buttons of the topics */
.topic-sign .m-pic {
  height: 1.15em;
  max-width: 2.4em;
}
/* the question on the card, smaller than the picture and wrapping, and on a label a small ? */
.m-ask {
  max-width: 11em;
  font-size: max(15px, 0.42em);
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-align: start;
}
.m-ask-short {
  font-size: 0.75em;
  color: var(--ink-soft);
}

/* the geometry tasks' help: the mirror line, the dot's row or column, pale, and the squares from the dot to the line,
   coloured, to count on the other side; the angles of a triangle together on a straight line, each a sector in its
   colour and the missing one dashed; and the rectangle a triangle is half of, dashed */
.help-model .help-mirror {
  fill: none;
  stroke: var(--tj-red-500);
  stroke-width: 7;
  stroke-dasharray: 14 8;
}
.help-model .help-band {
  fill: var(--tj-blue-100);
}
.help-model .help-steps {
  fill: var(--tj-orange-200);
  stroke: var(--tj-orange-700);
  stroke-width: 2.5;
}
.help-model .help-sector {
  stroke: var(--ink);
  stroke-width: 3;
}