/* The maths pictures of js/models.js – every class starts with m-.
   Default sizes are written inside :where(), which weighs nothing: a screen sizes a picture with one plain rule
   (e.g. .q-hint .m-clock { width: 30vmin }) or with the custom properties below (--m-eq, --m-col, --m-clock …).
   Colours come from style.css (--ink, --purple, --pink, --green, --yellow, --blue, --red, --c0 … --c5). */

/* ---------------------------------------------------------------- shared */
.m-svg { display: block; overflow: visible; margin-inline: auto; -webkit-user-select: none; user-select: none; }
/* a definite width (also inside shrink-to-fit boxes) that never gets wider than the box */
:where(.m-svg) { width: 60vmin; height: auto; max-width: 100%; max-height: 52vh; }
.m-svg text { font-family: 'Fredoka', 'Naskh', system-ui, sans-serif; font-weight: 700; fill: var(--ink); }
.m-svg text.ku { font-family: 'Naskh', serif; }
.m-svg text.m-emo { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; }
.m-popin { transform-box: fill-box; transform-origin: center; animation: m-pop .32s cubic-bezier(.3, 1.5, .5, 1) both; }
/* little things pop in one after the other (--i = their number) */
.m-counter, .m-pip, .m-dot, .m-blk, .m-gi, .m-ait, .m-badge, .m-corner, .m-grp {
  transform-box: fill-box; transform-origin: center;
  animation: m-pop .38s cubic-bezier(.3, 1.5, .5, 1) backwards;
  animation-delay: calc(min(var(--i, 0), 40) * 38ms);
}

@keyframes m-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes m-flash { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes m-tip { from { transform: rotate(0deg); } }
@keyframes m-swing { from { transform: translate(var(--x0), var(--y0)); } }
@keyframes m-arrive { from { transform: translateY(-.9em) scale(.3); opacity: 0; } }
@keyframes m-leave { to { transform: translate(.45em, -.75em) rotate(14deg) scale(.82); opacity: .3; } }

/* ---------------------------------------------------------------- answer boxes (activities.css adds .active / .filled / .right) */
.m-box {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  min-width: calc(var(--len, 2) * .6em + .6em); height: 1.3em; padding: 0 .14em;
  border: .07em dashed rgba(139, 92, 246, .62); border-radius: .26em;
  background: rgba(255, 255, 255, .85); color: var(--purple);
  font-weight: 700; line-height: 1; white-space: nowrap;
  direction: ltr; unicode-bidi: isolate;
  transition: background .2s, border-color .2s;
}
.m-box.m-circle { width: 1.3em; min-width: 1.3em; padding: 0; border-radius: 50%; }

/* ---------------------------------------------------------------- sums in a row */
.m-eq {
  display: flex; align-items: center; justify-content: center; gap: .26em; flex-wrap: nowrap;
  max-width: 100%; white-space: nowrap; line-height: 1.2; font-weight: 700; color: var(--ink);
}
/* the second value keeps a long sum inside a narrow screen (--w = its width in em, set by models.js) */
:where(.m-eq) { font-size: min(var(--m-eq, min(9vmin, 72px)), calc((100vw - 40px) / var(--w, 6))); }
:where(.m-eq.m-big) { font-size: min(var(--m-eq-big, min(11.5vmin, 92px)), calc((100vw - 40px) / var(--w, 6))); }
:where(.m-eq.m-small) { font-size: min(var(--m-eq-small, min(6vmin, 46px)), calc((100vw - 40px) / var(--w, 6))); }
:where(button) :where(.m-eq) { font-size: .45em; }
.m-eq > * { flex: none; }
.m-n { direction: ltr; unicode-bidi: isolate; font-weight: 700; }
.m-n.ku { font-size: 1.1em; line-height: 1.05; }
.m-op { direction: ltr; unicode-bidi: isolate; font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; color: var(--purple); }
.m-q {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.05em; height: 1.2em; padding: 0 .12em;
  border-radius: .26em; background: #fff1c2; color: #d97706; box-shadow: inset 0 0 0 .06em #fbbf24; line-height: 1;
}
.m-t { font-size: .62em; line-height: 1.5; }
.m-line { display: inline-flex; align-items: center; gap: .22em; }

/* fractions: the top number over the bottom one */
.m-frac { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle; line-height: 1.05; font-weight: 700; color: var(--ink); }
:where(.m-frac) { font-size: min(9vmin, 68px); }
:where(button) :where(.m-frac) { font-size: min(.8em, 6.5vmin, 52px); }
.m-eq .m-frac, .m-line .m-frac, .m-table .m-frac { font-size: .66em; }
.m-fpart { display: flex; justify-content: center; }
.m-fbar { align-self: stretch; min-width: .95em; height: .1em; margin: .06em 0; border-radius: .05em; background: currentColor; }
.m-frac .m-box { min-width: 1.1em; }

/* ---------------------------------------------------------------- column sums */
.m-vert {
  --cw: 1.02em; --sw: .92em;
  display: grid; width: max-content; max-width: 100%; margin-inline: auto; direction: ltr;
  align-items: center; justify-items: center; row-gap: .05em;
  font-weight: 700; line-height: 1.12; color: var(--ink);
}
:where(.m-vert) { font-size: min(var(--m-col, 8.5vmin), 68px); }
:where(.m-vert.m-small) { font-size: min(var(--m-col-small, 5vmin), 36px); }
.m-vert.m-heads { --cw: 1.42em; }
.m-vert.m-rtl { grid-template-columns: repeat(var(--n, 2), var(--cw)) var(--sw); }
.m-vert.m-ltr { grid-template-columns: var(--sw) repeat(var(--n, 2), var(--cw)); }
.m-vert > * { position: relative; z-index: 1; }
/* each place has its own soft colour behind it */
.m-vert > .m-band { z-index: 0; align-self: stretch; justify-self: stretch; margin: 0 .05em; border-radius: .24em; transition: background .25s, box-shadow .25s; }
.m-band.m-p0 { background: var(--p-o, #e2f1fd); }
.m-band.m-p1 { background: var(--p-t, #fde7f1); }
.m-band.m-p2 { background: var(--p-h, #fdf2cf); }
.m-band.m-lit { background: #ece6ff; box-shadow: inset 0 0 0 .07em var(--purple); }
.m-vhead {
  align-self: end; margin-bottom: .45em; padding: 0 .5em; border-radius: .9em;
  font-size: .32em; line-height: 1.7; white-space: nowrap;
  background: linear-gradient(180deg, #ffc65e, #ff9f1c); color: #5b2400; box-shadow: 0 .14em 0 #e07b00;
}
.m-vhead.m-lit { background: linear-gradient(180deg, #c4b5fd, #8b5cf6); color: #fff; box-shadow: 0 .14em 0 #6d28d9; }
.m-d.ku { font-size: 1.1em; line-height: 1.02; }
.m-d.m-q { color: #d97706; }
.m-d.m-lit { color: var(--purple); }
.m-vsign { font-family: 'Fredoka', system-ui, sans-serif; color: var(--purple); }
.m-vline { justify-self: stretch; height: .085em; margin: .05em 0 .1em; border-radius: .05em; background: var(--ink); }
.m-vnotes { height: .58em; }
.m-dbox { width: .9em; min-width: 0; height: 1.16em; padding: 0; }
.m-dbox.m-lit { border-style: solid; border-color: var(--purple); }
.m-carry {
  align-self: end; display: grid; place-items: center; width: 1.25em; height: 1.25em; margin-bottom: .25em; padding: 0;
  font-size: .5em; font-weight: 700; line-height: 1; color: #d97706; cursor: pointer; touch-action: manipulation;
  border: .1em dashed #f59e0b; border-radius: .32em; background: #fffbeb;
}
/* the box looks small like the book's, but the finger gets nearly its whole column (--cw = 2.04em / 2.84em here),
   from above it down to the top number – never the next box (the button is relative: .m-vert > *) */
.m-carry::after { content: ''; position: absolute; inset: -.5em -.45em; }
.m-heads > .m-carry::after { inset: -.5em -.85em; }
.m-carry.m-on { border-style: solid; background: #fff; animation: m-pop .3s cubic-bezier(.3, 1.5, .5, 1); }
.m-carry.m-lit { box-shadow: 0 0 0 .12em rgba(139, 92, 246, .35); }

/* borrowing: a crossed-out digit and the new one written small above it */
.m-crossed { color: rgba(43, 35, 80, .4); }
.m-d.m-crossed::after, .m-note.m-crossed::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: .09em; margin-top: -.045em;
  border-radius: 1em; background: #e11d48; transform: rotate(-56deg);
}
.m-notes {
  position: absolute; left: 50%; bottom: 94%; z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: .05em; pointer-events: none;
}
.m-note {
  position: relative; font-size: .48em; line-height: 1.12; padding: .02em .22em; border-radius: .26em; white-space: nowrap;
  background: #fff; color: #e11d48; box-shadow: inset 0 0 0 .08em #fda4af;
  animation: m-pop .4s cubic-bezier(.3, 1.5, .5, 1) backwards;
}
.m-note.m-crossed { color: rgba(225, 29, 72, .45); }

/* ---------------------------------------------------------------- ten-frames, dots, dominoes */
:where(.m-tf) { width: var(--m-frame, 56vmin); }
.m-frames { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: min(2.4vmin, 18px); max-width: 100%; min-width: 0; }
.m-frames > .m-tf { margin: 0; }
:where(.m-frames > .m-tf) { width: var(--m-frame, 42vmin); }
.m-tf-bg { fill: #fff; stroke: var(--purple); stroke-width: 5; }
.m-tf-line { fill: none; stroke: #c9bdfb; stroke-width: 2.5; }
.m-cbody { fill: #ff5d8f; stroke: #db2777; stroke-width: 2; }
.m-c2 .m-cbody { fill: #38bdf8; stroke: #0284c7; }
.m-cshine { fill: #fff; opacity: .55; }
.m-counter.m-x .m-cbody, .m-counter.m-x .m-cshine { opacity: .38; }
.m-xline { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; }

:where(.m-dots) { width: calc(var(--vw) * var(--m-u, .175vmin)); }
:where(.m-dice) { width: var(--m-die, 22vmin); }
.m-die { fill: #fff; stroke: #ddd6fe; stroke-width: 3; }
.m-pip { fill: var(--ink); }
.m-dot { fill: #ff5d8f; stroke: #db2777; stroke-width: 2; }
.m-dot.m-odd { fill: #fb923c; stroke: #ea580c; }
.m-ghost { fill: none; stroke: #fb923c; stroke-width: 2.5; stroke-dasharray: 5 4; }
.m-pair { fill: rgba(139, 92, 246, .08); stroke: rgba(139, 92, 246, .38); stroke-width: 2.5; }
.m-pair.m-alone { fill: rgba(251, 146, 60, .1); stroke: rgba(234, 88, 12, .45); stroke-dasharray: 6 5; }

:where(.m-domino) { width: var(--m-domino, 13vmin); }
.m-dom-body { fill: #16a34a; stroke: #15803d; stroke-width: 4; }
.m-dom-line { fill: none; stroke: #bbf7d0; stroke-width: 4; stroke-linecap: round; }
.m-dpip { fill: #fde047; }

/* ---------------------------------------------------------------- base-ten blocks, place-value chart */
:where(.m-blocks) { width: calc(var(--vw) * var(--m-bu, .21vmin)); max-height: 42vh; }
.m-bk-front { fill: var(--bk, #6c74ec); stroke: rgba(30, 27, 75, .35); stroke-width: 1; }
.m-bk-top { fill: color-mix(in srgb, var(--bk, #6c74ec) 50%, #fff); stroke: rgba(30, 27, 75, .3); stroke-width: 1; stroke-linejoin: round; }
.m-bk-side { fill: color-mix(in srgb, var(--bk, #6c74ec) 70%, #000); stroke: rgba(30, 27, 75, .3); stroke-width: 1; stroke-linejoin: round; }
.m-bk-grid { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.m-blk.m-x > :not(.m-bk-x) { opacity: .38; }
.m-bk-x { fill: none; stroke: #e11d48; stroke-width: 3.5; stroke-linecap: round; }

/* the chart: سەدان | دەهان | یەکان – the gaps show the frame colour as lines */
.m-place {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .05em; direction: ltr;
  max-width: 100%; margin-inline: auto; overflow: hidden; border: .05em solid #f4b63f; border-radius: .3em; background: #f4c766;
  box-shadow: 0 .1em 0 rgba(43, 35, 80, .12), 0 .2em .5em rgba(43, 35, 80, .1);
}
:where(.m-place) { font-size: min(8vmin, 60px); width: calc(var(--n, 3) * 2.4em); }
:where(.m-place.m-wblk) { width: calc(var(--n, 3) * 3.4em); }
.m-ph { font-size: .38em; line-height: 2; text-align: center; white-space: nowrap; background: linear-gradient(180deg, #ffc65e, #ff9f1c); color: #5b2400; }
.m-pc { display: grid; place-items: center; min-width: 0; min-height: 1.55em; padding: .08em; background: #fff; }
.m-pc > .m-n { line-height: 1.2; }
.m-pblk { min-height: 2.6em; padding: .15em .1em; }
.m-pblk > .m-blocks { width: 100%; max-height: min(26vh, 3.4em); }
.m-pc > .m-dbox { font-size: .9em; }

/* ---------------------------------------------------------------- number line */
:where(.m-nl) { width: min(96vw, 1100px); max-height: 44vh; }
.m-nl-axis { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.m-nl-arrow { fill: var(--ink); }
.m-nl-tick { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.m-nl-hop { fill: none; stroke: #2563eb; stroke-width: 5; stroke-linecap: round; }
.m-nl-hop.m-draw { stroke-dasharray: 1; animation: m-draw .5s calc(.25s + var(--i, 0) * .42s) ease-out backwards; }
.m-nl-head { fill: #2563eb; }
.m-svg text.m-nl-hoplab { fill: #2563eb; direction: ltr; unicode-bidi: bidi-override; }
.m-nl-head.m-late, .m-nl-hoplab.m-late { transform-box: fill-box; transform-origin: center; animation: m-pop .3s calc(.68s + var(--i, 0) * .42s) cubic-bezier(.3, 1.5, .5, 1) backwards; }
.m-nl-mark { transform-box: fill-box; transform-origin: center; animation: m-pop .35s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.m-nl-mark circle { fill: var(--pink); stroke: #fff; stroke-width: 4; }
.m-nl-mark.m-start circle { fill: #3b82f6; }
.m-nl-mark.m-end circle, .m-nl-mark.m-ok circle { fill: var(--green); }
.m-nl-mark.m-bad circle { fill: var(--red); }
.m-nl-mark.m-lit circle { fill: var(--yellow); stroke: #f59e0b; }
.m-nl-mark.m-ring circle { fill: none; stroke: var(--purple); stroke-width: 5; }
.m-svg text.m-nl-mlab { fill: var(--purple); }
.m-nl-pinbody { fill: var(--red); stroke: #fff; stroke-width: 3; }
.m-nl-pindot { fill: #fff; }
.m-nl-flash { fill: none; stroke: var(--yellow); stroke-width: 6; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: m-flash .6s ease-out forwards; }
.m-nl.m-tap { cursor: pointer; touch-action: manipulation; }

/* ---------------------------------------------------------------- hundred chart (number size follows the chart: cqi) */
.m-hc { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: min(.8vmin, 6px); max-width: 100%; margin-inline: auto; container-type: inline-size; }
:where(.m-hc) { width: calc(var(--m-hc-h, 62vh) * 10 / var(--rows, 10)); }
.m-hcc {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; display: grid; place-items: center;
  border-radius: 24%; font-weight: 700; line-height: 1; color: var(--ink);
  font-size: 2.3vmin; font-size: 4.2cqi;
  box-shadow: 0 .4cqi 0 rgba(43, 35, 80, .14); transition: transform .12s, background .2s;
}
:where(.m-hcc) { background: #fff; }
:where(.m-hcc.m-ten) { background: #f1ecff; }
.m-hcc.ku { font-size: 2.6vmin; font-size: 4.8cqi; }
.m-hcc.m-3d { font-size: 1.8vmin; font-size: 3.4cqi; }
.m-hcc.ku.m-3d { font-size: 2vmin; font-size: 3.9cqi; }
button.m-hcc { cursor: pointer; touch-action: manipulation; }
button.m-hcc:active { transform: scale(.9); }
.m-hcc.m-lit { background: var(--yellow); }
.m-hcc.m-ok { background: var(--green); color: #fff; }
.m-hcc.m-bad { background: var(--red); color: #fff; }
.m-hcc.m-start { background: var(--blue); color: #fff; }
.m-hcc.m-ring { box-shadow: inset 0 0 0 .6cqi var(--purple), 0 .4cqi 0 rgba(43, 35, 80, .14); }
.m-hcc.m-hid { background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 .4cqi rgba(139, 92, 246, .5); }
.m-hcc.m-c0 { background: var(--c0); color: #fff; }
.m-hcc.m-c1 { background: var(--c1); color: #fff; }
.m-hcc.m-c2 { background: var(--c2); color: #fff; }
.m-hcc.m-c3 { background: var(--c3); color: #fff; }
.m-hcc.m-c4 { background: var(--c4); color: #fff; }
.m-hcc.m-c5 { background: var(--c5); color: #fff; }

/* ---------------------------------------------------------------- clock */
:where(.m-clock) { width: var(--m-clock, 42vmin); max-height: 46vh; }
.m-ck-shadow { fill: rgba(43, 35, 80, .16); }
.m-ck-rim { fill: var(--ck, #22c55e); }
.m-ck-face { fill: #fff; }
.m-ck-ring { fill: none; stroke: #cfc9e8; stroke-width: 1.8; stroke-dasharray: 3.5 4.5; }
.m-ck-tick { fill: none; stroke: #a49fc4; stroke-width: 1.5; stroke-linecap: round; }
.m-ck-tick5 { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.m-svg text.m-ck-num { font-family: 'Fredoka', system-ui, sans-serif; font-size: 17px; fill: var(--ink); }
.m-hand { transform-box: view-box; transform-origin: 100px 100px; transition: transform var(--ck-dur, .8s) cubic-bezier(.35, 1.2, .5, 1); }
.m-hh-body { fill: #f43f5e; stroke: #f43f5e; stroke-width: 2; stroke-linejoin: round; }
.m-mh-body { fill: #2563eb; stroke: #2563eb; stroke-width: 2; stroke-linejoin: round; }
.m-ck-cap { fill: var(--ink); }
.m-ck-cap2 { fill: #fff; }
.m-clock.m-still .m-hand, .m-clock.m-drag .m-hand { transition: none; }
.m-clock.m-active { cursor: grab; touch-action: none; }
.m-clock.m-drag { cursor: grabbing; }
.m-grab { fill: rgba(37, 99, 235, .16); stroke: #2563eb; stroke-width: 2; stroke-dasharray: 4 3; transform-box: fill-box; transform-origin: center; animation: m-breathe 1.4s ease-in-out infinite; }
.m-clock.m-drag .m-grab { animation: none; fill: rgba(37, 99, 235, .3); }

/* ---------------------------------------------------------------- ruler */
:where(.m-ruler) { width: calc(var(--vw) * .17vmin); max-height: 50vh; }
.m-rl-body { fill: #ffd257; stroke: #e5a50a; stroke-width: 3; }
.m-rl-band { fill: #7dd3fc; }
.m-rl-cm { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.m-rl-half { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.m-svg text.m-rl-num { font-family: 'Fredoka', system-ui, sans-serif; font-size: 23px; fill: var(--ink); }
.m-rl-guide { fill: none; stroke: rgba(43, 35, 80, .5); stroke-width: 2.5; stroke-dasharray: 7 6; }
.m-rl-obj { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }

/* ---------------------------------------------------------------- pan balance (it swings to its side when it appears) */
:where(.m-balance) { width: var(--m-balance, 52vmin); max-height: 40vh; }
.m-bl-base { fill: #b91c1c; stroke: #991b1b; stroke-width: 2; stroke-linejoin: round; }
.m-bl-post { fill: #dc2626; }
.m-bl-beam { fill: #ef4444; stroke: #b91c1c; stroke-width: 3; }
.m-bl-needle { fill: #fbbf24; stroke: #b45309; stroke-width: 2; stroke-linejoin: round; }
.m-bl-pivot { fill: #fde68a; stroke: #b45309; stroke-width: 3; }
.m-bl-string { fill: none; stroke: #8f8aa8; stroke-width: 2.4; stroke-linecap: round; }
.m-bl-pan { fill: #fbbf24; stroke: #d97706; stroke-width: 3; stroke-linejoin: round; }
.m-bl-hook { fill: #b91c1c; }
.m-bl-beamg { animation: m-tip 1.1s .3s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.m-bl-pang { animation: m-swing 1.1s .3s cubic-bezier(.3, 1.5, .5, 1) backwards; }

/* ---------------------------------------------------------------- flat shapes, solids, fractions */
:where(.m-shape, .m-solid) { width: var(--m-size, 30vmin); max-height: 40vh; }
.m-shape-body { fill: color-mix(in srgb, var(--mc, #8b5cf6) 28%, #fff); stroke: var(--mc, #8b5cf6); stroke-width: 7; stroke-linejoin: round; }
.m-side { fill: none; stroke-width: 9; stroke-linecap: round; }
.m-corner { fill: none; stroke: #ef4444; stroke-width: 4; }
.m-badge circle { fill: #fff; stroke-width: 4; }
.m-svg text.m-badge-n { font-size: 22px; }
.m-shadow { fill: rgba(43, 35, 80, .14); }
.m-lite { fill: #fff; opacity: .36; }
.m-lite.m-soft { opacity: .12; }
.m-dark { fill: #000; opacity: .2; }
.m-edge { fill: none; stroke: rgba(43, 35, 80, .6); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.m-hidden-edge { stroke-dasharray: 6 6; opacity: .45; }

:where(.m-fracshape) { width: var(--m-size, 30vmin); max-height: 38vh; }
.m-part { fill: #fff; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; transition: fill .25s; }
.m-part.m-on { fill: var(--mf, #22c55e); }
.m-fr-outline { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.m-fracshape.m-tap { cursor: pointer; touch-action: manipulation; }
.m-fracshape.m-tap .m-part:active { fill: color-mix(in srgb, var(--mf, #22c55e) 45%, #fff); }

/* ---------------------------------------------------------------- equal groups, arrays */
:where(.m-groups) { width: calc(var(--vw) * var(--m-gu, .15vmin)); max-height: 42vh; }
:where(.m-array) { width: calc(var(--vw) * var(--m-au, .19vmin)); max-height: 42vh; }
.m-grp { stroke-width: 4; stroke-dasharray: 10 7; }
.m-arow { fill: rgba(139, 92, 246, .08); stroke: rgba(139, 92, 246, .22); stroke-width: 2; }

/* ---------------------------------------------------------------- story pictures */
.m-scene {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25em .4em;
  max-width: 100%; padding: .16em .26em; border-radius: .4em; line-height: 1.15;
  background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 .05em rgba(255, 255, 255, .95);
}
:where(.m-scene) { font-size: min(8vmin, 60px); }
:where(.m-scene.m-s-xl) { font-size: min(13vmin, 96px); }
:where(.m-scene.m-s-l) { font-size: min(10vmin, 76px); }
:where(.m-scene.m-s-m) { font-size: min(8vmin, 60px); }
:where(.m-scene.m-s-s) { font-size: min(6.3vmin, 48px); }
:where(.m-scene.m-s-xs) { font-size: min(5vmin, 38px); }
.m-scene.m-lay-rows { flex-direction: column; align-items: stretch; }
.m-cluster {
  display: grid; grid-template-columns: repeat(var(--c, 5), auto); gap: .05em .1em; align-items: center; justify-items: center;
  padding: .08em .14em; border-radius: .3em; background: rgba(139, 92, 246, .08);
}
.m-srow { display: flex; flex-wrap: wrap; align-items: center; gap: .05em .1em; padding: .06em .14em; border-radius: .3em; background: rgba(139, 92, 246, .08); }
.m-cluster.m-new, .m-srow.m-new { background: rgba(250, 204, 21, .22); }
.m-cluster.m-away, .m-srow.m-away { background: none; outline: .04em dashed rgba(43, 35, 80, .3); outline-offset: -.04em; }
.m-it {
  position: relative; display: inline-block; translate: var(--dx, 0) var(--dy, 0); rotate: var(--rot, 0deg);
  animation: m-pop .4s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(min(var(--i, 0), 30) * 45ms);
}
.m-e { display: inline-block; }
.m-it.m-five { margin-inline-end: .3em; }
.m-it.m-crossed .m-e { opacity: .45; filter: grayscale(.5); }
.m-it.m-crossed::before, .m-it.m-crossed::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1em; height: .11em; margin: -.055em 0 0 -.5em;
  border-radius: 1em; background: #e11d48; transform: rotate(45deg);
}
.m-it.m-crossed::after { transform: rotate(-45deg); }
.m-it.m-new { animation: m-arrive .7s cubic-bezier(.3, 1.4, .5, 1) backwards; animation-delay: calc(.45s + min(var(--j, 0), 20) * 110ms); }
.m-it.m-new .m-e { filter: drop-shadow(0 0 .08em #facc15); }
.m-it.m-away { animation: m-leave 1.1s ease-in forwards; animation-delay: calc(.7s + min(var(--j, 0), 20) * 120ms); }

/* ---------------------------------------------------------------- the week */
.m-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: min(1.4vmin, 10px); width: min(96vw, 1000px); max-width: 100%; margin-inline: auto; }
.m-day {
  --dc: var(--purple);
  display: grid; place-items: center; min-width: 0; padding: .3em .15em; border-radius: .7em;
  line-height: 1.55; white-space: nowrap; color: #fff; background: var(--dc);
  box-shadow: 0 .2em 0 color-mix(in srgb, var(--dc) 70%, #000); text-shadow: 0 .08em 0 rgba(0, 0, 0, .15);
  animation: m-pop .35s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 50ms);
  transition: transform .2s;
}
:where(.m-day) { font-size: min(2.9vmin, 24px); }
.m-day.m-day0 { --dc: #ff6fae; }
.m-day.m-day1 { --dc: #fb923c; }
.m-day.m-day2 { --dc: #f59e0b; }
.m-day.m-day3 { --dc: #22c55e; }
.m-day.m-day4 { --dc: #14b8a6; }
.m-day.m-day5 { --dc: #38bdf8; }
.m-day.m-day6 { --dc: #a855f7; }
.m-day.m-on { position: relative; z-index: 1; transform: translateY(-.2em) scale(1.1); box-shadow: 0 0 0 .14em #fff, 0 0 0 .28em var(--yellow), 0 .3em .5em rgba(0, 0, 0, .15); }
.m-day.m-hid { background: #fff; color: var(--purple); box-shadow: inset 0 0 0 .1em var(--purple); text-shadow: none; }

/* ---------------------------------------------------------------- tables (the gaps show the table colour as lines) */
.m-table {
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(2.6em, auto)); gap: .05em;
  width: max-content; max-width: 100%; margin-inline: auto; overflow: hidden;
  border: .06em solid var(--mt, #38bdf8); border-radius: .45em; background: var(--mt, #38bdf8);
  box-shadow: 0 .1em 0 rgba(43, 35, 80, .1), 0 .2em .5em rgba(43, 35, 80, .1);
  font-weight: 700; color: var(--ink);
}
:where(.m-table) { font-size: min(6.5vmin, 50px); }
.m-tc { display: flex; align-items: center; justify-content: center; gap: .2em; min-height: 1.5em; padding: .12em .45em; background: #fff; white-space: nowrap; }
.m-th { background: color-mix(in srgb, var(--mt, #38bdf8) 28%, #fff); }
.m-tspan { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- phones held upright */
@media (max-width: 600px) and (orientation: portrait) {
  :where(.m-eq) { font-size: min(var(--m-eq, 10.5vw), calc((100vw - 28px) / var(--w, 6))); }
  :where(.m-eq.m-big) { font-size: min(var(--m-eq-big, 13.5vw), calc((100vw - 28px) / var(--w, 6))); }
  :where(.m-eq.m-small) { font-size: min(var(--m-eq-small, 7.5vw), calc((100vw - 28px) / var(--w, 6))); }
  :where(.m-frac) { font-size: 12vw; }
  :where(.m-vert) { font-size: min(var(--m-col, 12.5vw), 6.6vh); }
  :where(.m-vert.m-small) { font-size: min(var(--m-col-small, 6.4vw), 4vh); }
  :where(.m-tf) { width: var(--m-frame, 80vw); }
  :where(.m-frames > .m-tf) { width: var(--m-frame, 72vw); }
  :where(.m-dots) { width: calc(var(--vw) * var(--m-u, .5vw)); }
  :where(.m-dice) { width: var(--m-die, 34vw); }
  :where(.m-domino) { width: var(--m-domino, 22vw); }
  :where(.m-blocks) { width: calc(var(--vw) * var(--m-bu, .45vw)); max-height: 32vh; }
  :where(.m-place) { font-size: min(11vw, 6.4vh); }
  :where(.m-nl) { max-height: 30vh; }
  /* a crowded number line: every second number, bigger */
  .m-nl.m-dense .m-odd { display: none; }
  .m-nl.m-dense .m-nl-lab { font-size: var(--fs2); }
  :where(.m-hc) { width: calc(var(--m-hc-h, 52vh) * 10 / var(--rows, 10)); }
  :where(.m-clock) { width: var(--m-clock, 62vw); max-height: 36vh; }
  :where(.m-ruler) { width: calc(var(--vw) * .23vw); max-height: 40vh; }
  :where(.m-balance) { width: var(--m-balance, 88vw); max-height: 34vh; }
  :where(.m-shape, .m-solid) { width: var(--m-size, 50vw); max-height: 30vh; }
  :where(.m-fracshape) { width: var(--m-size, 46vw); max-height: 30vh; }
  :where(.m-groups) { width: calc(var(--vw) * var(--m-gu, .26vw)); max-height: 38vh; }
  :where(.m-array) { width: calc(var(--vw) * var(--m-au, .3vw)); max-height: 38vh; }
  :where(.m-scene) { font-size: 9.5vw; }
  :where(.m-scene.m-s-xl) { font-size: 15vw; }
  :where(.m-scene.m-s-l) { font-size: 12vw; }
  :where(.m-scene.m-s-m) { font-size: 9.5vw; }
  :where(.m-scene.m-s-s) { font-size: 7.5vw; }
  :where(.m-scene.m-s-xs) { font-size: 6vw; }
  .m-week { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; }
  :where(.m-day) { font-size: 4.1vw; }
  :where(.m-table) { font-size: min(8.5vw, 5vh); }
}

/* ---------------------------------------------------------------- less motion: everything is simply there */
@media (prefers-reduced-motion: reduce) {
  .m-svg *, .m-eq *, .m-vert *, .m-box, .m-scene *, .m-day, .m-hcc { animation: none !important; transition: none !important; }
  .m-it.m-away { opacity: .3; transform: translate(.45em, -.75em) rotate(14deg) scale(.82); }
}