/* ---------------------------------------------------------------- 👀 learn screens: time, measuring, shapes, solids,
   fractions (js/demos2.js). The picture area is a size container: the pictures are sized in cqw / cqh (with a vmin size
   before it for older browsers), so they always fit between the book's words and the ➜ – on a tablet held sideways
   and on an upright phone. Final looks are plain styles; the animations only bring things in ("from"), so with less
   motion everything is simply there. */

/* the frame – the same as on the other learn screens (css/demos.css): the book's words on top, the picture (a tap
   plays it again), then 🔁 · dots · ➜ */
.d2 { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; animation: d2-in .35s ease-out; }
.d2-pic {
  flex: 1 1 0; min-height: 0; width: 100%;
  display: grid; place-items: center; container-type: size; cursor: pointer;
}
.d2-pic > * { max-width: 100%; max-height: 100%; }
.d2-cap {
  --lh: calc(min(6vmin, 42px) * 1.55 + 14px);
  --m-eq: min(7vmin, 54px); --m-eq-big: min(8vmin, 60px);
  flex: none; width: 100%; min-height: calc(var(--lines, 1) * var(--lh));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
/* a line of words looks like the caption of demos.css (.dm-say) */
.d2-line {
  max-width: 100%; padding: 2px 22px 5px; border-radius: 24px; background: #fff; box-shadow: var(--shadow);
  font-size: min(4.6vmin, 32px); line-height: 1.55; text-align: center; color: var(--ink);
  animation: d2-pop .45s cubic-bezier(.3, 1.4, .5, 1) backwards;
}
.d2-line.d2-big { padding: 4px 26px; font-size: min(6vmin, 42px); color: var(--purple); }
.d2-line.d2-plain { padding: 0; background: none; box-shadow: none; }
.d2-line .m-eq { color: var(--ink); }
.d2 .m-t.d2-eqemo { font-size: .9em; }
.d2 .m-t.d2-heavy { color: #ea580c; }
.d2 .m-t.d2-light { color: #0284c7; }

.d2-foot { flex: none; display: flex; align-items: center; justify-content: center; gap: 22px; }
.d2-foot .round-dots { margin-top: 0; }
.d2-again {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-size: 30px; background: #fff; box-shadow: var(--shadow); transition: transform .1s, opacity .3s;
}
.d2-again:active:not(:disabled) { transform: scale(.92); }
.d2-again:disabled { opacity: .3; filter: grayscale(1); }

/* things that come one after the other: hidden (.d2-hide) until demos2.js shows them (.d2-show) */
.d2 .d2-hide { opacity: 0; transform: scale(.5); }
.d2 .d2-show { animation: d2-pop .5s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.d2 .d2-off { opacity: 0; }
.d2 svg .d2-hide, .d2 svg .d2-show { transform-box: fill-box; transform-origin: center; }
@keyframes d2-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes d2-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes d2-drawin { from { stroke-dashoffset: 1; } }
@keyframes d2-blink { to { opacity: .3; } }
@keyframes d2-bob { 50% { transform: translateY(-8px) scale(1.06); } }

/* a number that is counted (sides, corners, cubes): the number and its word or picture */
.d2-counter {
  display: inline-flex; align-items: center; gap: 10px; padding: 2px 20px; border-radius: 24px;
  background: #fff; box-shadow: var(--shadow); font-size: min(6.4vmin, 46px); line-height: 1.35;
}
.d2-cnum { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; color: var(--purple); }
.d2-counter .ku { font-size: .8em; }
.d2 .d2-svnum { font-family: 'Fredoka', 'Naskh', system-ui, sans-serif; font-weight: 700; fill: var(--ink); }
.d2 .d2-badge circle { fill: #fff; stroke: var(--purple); stroke-width: 4; }

/* ================================================================ chapter 7: time */
/* the clock, and the two sentences about its hands beside it (under it on an upright screen) */
.d2-ck { display: flex; align-items: center; justify-content: center; gap: min(4vw, 44px); width: 100%; height: 100%; }
.d2-ckface { flex: none; width: min(56vmin, 440px); width: min(92cqh, 50cqw); aspect-ratio: 1; }
.d2-ckface .m-clock { width: 100%; height: 100%; max-height: none; }
.d2-cktext { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.d2-ckline {
  display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-radius: 20px;
  background: #fff; box-shadow: var(--shadow); font-size: min(4.6vmin, 32px); line-height: 1.55;
}
/* the hand a sentence talks about, in the colours of the clock's hands */
.d2-hand { flex: none; display: inline-block; border-radius: 6px; }
.d2-hand.d2-hh { width: 30px; height: 14px; background: #f43f5e; }
.d2-hand.d2-mh { width: 54px; height: 9px; background: #2563eb; }
.d2-ckname {
  margin-top: 6px; padding: 2px 30px; border-radius: 26px; background: #fef08a; color: var(--ink);
  box-shadow: 0 6px 0 #facc15, 0 12px 22px rgba(0, 0, 0, .1); font-size: min(8vmin, 60px); line-height: 1.45;
}
.d2-lit-h .m-hh, .d2-lit-m .m-mh { animation: d2-blink .55s ease-in-out infinite alternate; }
.d2 .d2-lit-h .m-hh-body, .d2 .d2-lit-m .m-mh-body { stroke-width: 6; }

/* before / after noon: two windows with the same clock, then a day on a bar from the sun to the moon */
.d2-ampm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; }
.d2-wins { display: flex; justify-content: center; gap: min(4vw, 40px); }
.d2-window {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  width: min(34vmin, 270px); width: min(40cqw, 50cqh); aspect-ratio: 5 / 6; padding: 10px; border-radius: 28px;
  box-shadow: inset 0 0 0 6px #fff, var(--shadow);
}
.d2-window.d2-day { background: linear-gradient(180deg, #7dd3fc, #e0f2fe 80%); }
.d2-window.d2-night { background: linear-gradient(180deg, #1e1b4b, #4338ca); }
.d2-sky { position: absolute; inset: 0; pointer-events: none; font-size: min(7vmin, 50px); }
.d2-sky span { position: absolute; line-height: 1; }
.d2-sun, .d2-moon { top: 5%; inset-inline-start: 7%; }
.d2-cloud { top: 10%; inset-inline-end: 8%; font-size: .8em; }
.d2-twinkle { font-size: .55em; }
.d2-tw1 { top: 8%; inset-inline-end: 12%; }
.d2-tw2 { top: 24%; inset-inline-end: 34%; }
.d2-rise .d2-sun, .d2-rise .d2-moon { animation: d2-rise 1.2s cubic-bezier(.3, 1.3, .5, 1) backwards; }
.d2-rise .d2-twinkle { animation: d2-twinkle 1s ease-in-out infinite alternate; }
.d2-rise .d2-tw2 { animation-delay: -.5s; }
@keyframes d2-rise { from { transform: translateY(120%) scale(.5); opacity: 0; } }
@keyframes d2-twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.2); } }
.d2-winck { flex: 0 1 auto; min-height: 0; width: 64%; aspect-ratio: 1; }
.d2-winck .m-clock { width: 100%; height: 100%; max-height: none; }
.d2-wcap { flex: none; padding: 0 14px; border-radius: 16px; background: #fff; font-size: min(4.2vmin, 28px); line-height: 1.55; white-space: nowrap; }

.d2-daybar { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; width: min(90vw, 780px); width: min(96cqw, 780px); }
.d2-dend { font-size: min(6.5vmin, 44px); line-height: 1; }
.d2-dtrack {
  position: relative; height: min(9vmin, 60px); border-radius: 30px;
  background: linear-gradient(to left, #fde68a, #fef9c3 49.6%, #a5b4fc 50.4%, #312e81);
  box-shadow: inset 0 0 0 4px #fff, 0 4px 12px rgba(43, 35, 80, .15);
}
.d2-noon { position: absolute; top: 0; right: 50%; transform: translate(50%, -62%); font-size: min(5vmin, 34px); line-height: 1; }
.d2-dlabs { grid-column: 2; display: flex; font-size: min(3.6vmin, 24px); line-height: 1.5; color: var(--ink2); }
.d2-dlabs span { flex: 1; text-align: center; }
/* the things of the day ride from the sun (right) to their hour */
.d2-act {
  position: absolute; top: 50%; right: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: min(6vmin, 40px); line-height: 1; opacity: 0; transform: translate(50%, -50%);
  transition: right .9s cubic-bezier(.3, 1.15, .5, 1), opacity .25s;
}
.d2-act b { padding: 0 .45em; border-radius: 1em; background: #fff; color: var(--ink); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); font-size: .45em; line-height: 1.3; }
.d2-act.d2-go { right: var(--x); opacity: 1; }

/* the week: a train – the engine, then شەمبی … ئەینی from the right */
.d2-week { display: grid; place-items: center; width: 100%; height: 100%; }
.d2-train { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; row-gap: 28px; max-width: 100%; padding-bottom: 14px; }
.d2-engine, .d2-wagon { position: relative; }
.d2-loco { display: block; font-size: min(12vmin, 88px); line-height: 1; transform: scaleX(-1); }
.d2-wagon {
  --wc: var(--c1);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: min(14vmin, 126px); margin-inline-start: 14px; padding: 6px 12px 12px; border-radius: 16px 16px 10px 10px;
  background: var(--wc); color: #fff; box-shadow: inset 0 -7px 0 rgba(0, 0, 0, .16), 0 6px 12px rgba(43, 35, 80, .14);
}
/* the coupling to the wagon in front of it (on its right) and two wheels */
.d2-wagon::before { content: ''; position: absolute; inset-inline-start: -14px; bottom: 16px; width: 14px; height: 6px; border-radius: 3px; background: #64748b; }
.d2-wagon::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -12px; height: 22px;
  background:
    radial-gradient(circle, #334155 54%, #94a3b8 56% 70%, transparent 72%) left / 22px 22px no-repeat,
    radial-gradient(circle, #334155 54%, #94a3b8 56% 70%, transparent 72%) right / 22px 22px no-repeat;
}
.d2-wnum { min-width: 1.6em; padding: 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: min(3.4vmin, 22px); font-weight: 700; line-height: 1.35; text-align: center; }
.d2-wname { font-size: min(4vmin, 28px); line-height: 1.6; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.d2-wagon.d2-first, .d2-wagon.d2-last { z-index: 1; animation: d2-bob 1s ease-in-out infinite; }
.d2-wagon.d2-first { box-shadow: 0 0 0 5px #fff, 0 0 0 10px #22c55e, 0 10px 24px rgba(34, 197, 94, .45); }
.d2-wagon.d2-last { box-shadow: 0 0 0 5px #fff, 0 0 0 10px #f43f5e, 0 10px 24px rgba(244, 63, 94, .45); }

/* how long things take: a ladder, the shortest rung at the bottom, a longer bar on every rung */
.d2-ladder {
  display: flex; flex-direction: column-reverse; justify-content: center; gap: min(1.4vmin, 10px);
  width: min(90vw, 760px); width: min(96cqw, 760px); max-height: 100%; padding: 8px 14px;
  border-inline: 7px solid #c4b5fd; border-radius: 12px;
}
.d2-rung { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 3px 14px; border-radius: 18px; background: #fff; box-shadow: 0 4px 0 #e9e3ff; }
.d2-rpic { flex: none; font-size: min(6.2vmin, 44px); line-height: 1.15; }
.d2-rbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d2-rtext { font-size: min(4vmin, 28px); line-height: 1.5; }
.d2-rbar { display: block; width: 0; height: 9px; border-radius: 5px; background: linear-gradient(to left, #a78bfa, #f472b6); transition: width .8s ease-out; }
.d2-grow .d2-rbar { width: calc(var(--k) * 100%); }

/* ================================================================ chapter 7: measuring */
.d2-rl { display: grid; place-items: center; width: 100%; height: 100%; }
.d2-rl .m-ruler { width: min(94vw, 1000px); width: min(96cqw, 1000px); height: auto; max-height: 100%; }
.d2 .d2-rlring { fill: none; stroke: #f43f5e; stroke-width: 4.5; }
.d2 .d2-rlring.d2-start { stroke: #22c55e; }
.d2 .d2-rlmark { fill: none; stroke: #f43f5e; stroke-width: 6; stroke-linecap: round; transition: opacity .4s; }
.d2 .m-rl-guide { transition: opacity .4s; }

/* a finger ≈ 1 cm, two open arms ≈ 1 m; then a clip (cm) and a car (m) */
.d2-metre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; }
.d2-mrow { display: flex; justify-content: center; align-items: stretch; gap: min(3vw, 30px); }
.d2-mcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: min(40vmin, 380px); width: min(46cqw, 68cqh); padding: 10px 14px; border-radius: 26px; background: #fff; box-shadow: var(--shadow);
}
.d2-mpic { width: 100%; }
.d2-mpic .m-ruler { width: 100%; height: auto; max-height: none; }
.d2-mlab { font-size: min(4.2vmin, 28px); line-height: 1.5; color: var(--purple); }
.d2 .d2-band { fill: #facc15; fill-opacity: .5; stroke: #f59e0b; stroke-width: 3; transition: opacity .4s; }
.d2-kid { font-size: min(11vmin, 80px); line-height: 1.1; }
.d2-span { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; }
.d2-palm { flex: none; font-size: min(7vmin, 48px); line-height: 1; }
.d2-palm.d2-pr { transform: scaleX(-1); }
.d2-stick {
  position: relative; display: flex; flex: 0 1 22%; height: min(5.4vmin, 34px); overflow: hidden; border-radius: 8px;
  background: #fef3c7; box-shadow: inset 0 0 0 3px #f59e0b; transition: flex-basis .8s cubic-bezier(.3, 1.2, .5, 1);
}
.d2-open .d2-stick { flex-basis: 100%; }
.d2-seg { flex: 1; border-inline-end: 2px solid rgba(217, 119, 6, .5); transition: background .15s; }
.d2-seg:last-of-type { border: 0; }
.d2-seg.d2-on { background: #fbbf24; }
.d2-seg.d2-on:nth-child(even) { background: #fde68a; }
.d2-mcount { position: absolute; inset: 0; display: grid; place-items: center; font-size: min(3.6vmin, 22px); line-height: 1; color: var(--ink); white-space: nowrap; }
.d2-things { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px min(4vw, 40px); }
.d2-thing { display: flex; align-items: center; gap: 10px; padding: 4px 20px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); font-size: min(4.6vmin, 32px); line-height: 1.5; }
.d2-tpic { font-size: 1.5em; line-height: 1.1; }
.d2-arrow { color: var(--purple); font-weight: 700; }

/* the pan balance – demos2.js turns it by hand, so its own swing is switched off here */
.d2-bal { display: grid; place-items: center; width: 100%; height: 100%; }
.d2-bal .m-balance { width: min(80vmin, 660px); width: min(94cqw, 136cqh); height: auto; max-height: 100%; }
.d2 .d2-bal .m-bl-beamg, .d2 .d2-bal .m-bl-pang { animation: none; }
.d2 .d2-bal text.d2-pulse { transform-box: fill-box; transform-origin: center; animation: d2-thump .7s ease-in-out infinite alternate; }
@keyframes d2-thump { to { transform: scale(1.3); } }

/* ================================================================ chapter 6: flat shapes and solids */
/* a flat shape: its sides drawn one by one (numbered), its corners ringed, the two counters beside it */
.d2-shape { display: flex; align-items: center; justify-content: center; gap: min(5vw, 50px); width: 100%; height: 100%; }
.d2-shpic { flex: none; width: min(58vmin, 460px); width: min(96cqh, 52cqw); aspect-ratio: 1; }
.d2-shpic .m-shape { width: 100%; height: 100%; max-height: none; }
.d2-counters { display: flex; flex-direction: column; gap: 18px; }
.d2 .d2-side { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d2 .d2-side.d2-draw { stroke-dashoffset: 0; animation: d2-drawin .5s ease-out backwards; }
.d2 .d2-corner { fill: rgba(239, 68, 68, .18); stroke: #ef4444; stroke-width: 5; }
.d2 .d2-tracer { fill: #f43f5e; stroke: #fff; stroke-width: 4; transition: opacity .3s; }

/* the solids: a card each – the solid, its name, a thing that looks like it in the corner */
.d2-solids {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: min(2vmin, 16px);
  width: min(94vw, 1000px); width: min(96cqw, 165cqh); height: 100%;
}
.d2-solids.d2-few { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(80vw, 700px); width: min(96cqw, 110cqh); }
.d2-scard { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 6px 6px 4px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.d2-ssvg { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.d2-ssvg .m-solid { width: auto; height: 100%; max-width: 100%; max-height: none; }
.d2-sname { flex: none; font-size: min(3.8vmin, 27px); line-height: 1.55; text-align: center; }
.d2-slike { position: absolute; top: 6px; inset-inline-start: 10px; font-size: min(6.5vmin, 46px); line-height: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); }

/* faces: the solid lights up a face and stamps it on paper beside it */
.d2-faces { display: flex; align-items: center; justify-content: center; gap: min(3vw, 30px); width: 100%; height: 100%; }
.d2-fsolid, .d2-paper { flex: none; width: min(38vmin, 340px); width: min(80cqh, 40cqw); aspect-ratio: 1; }
.d2-fsolid .m-solid { width: 100%; height: 100%; max-height: none; }
.d2-fsolid.d2-stamp { animation: d2-stamp .9s ease-in-out; }
@keyframes d2-stamp { 40% { transform: translateX(-14%) scale(.92); } 55% { transform: translateX(-18%) scale(.86, .96); } }
@keyframes d2-stampdown { 40% { transform: translateY(12%) scale(.92); } 55% { transform: translateY(16%) scale(.96, .86); } }
.d2-farrow { font-size: min(8vmin, 56px); font-weight: 700; color: var(--purple); }
.d2-paper {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 22px;
  background: repeating-linear-gradient(180deg, #fff 0 30px, #e0f2fe 30px 32px); box-shadow: var(--shadow);
}
.d2-print { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.d2-print .m-shape { width: auto; height: 100%; max-width: 100%; max-height: none; }
.d2-fname { flex: none; font-size: min(5vmin, 36px); line-height: 1.45; color: var(--purple); }
.d2 .d2-face { fill: #fde047; fill-opacity: .6; stroke: #f59e0b; stroke-width: 5; stroke-linejoin: round; transition: opacity .4s; animation: d2-facepulse .8s ease-in-out infinite alternate; }
@keyframes d2-facepulse { to { fill-opacity: .25; } }

/* the parts of a solid: a face, an edge and a corner light up, each with the book's words */
.d2-parts { display: flex; align-items: center; justify-content: center; gap: min(4vw, 40px); width: 100%; height: 100%; }
.d2-psolid { flex: none; width: min(50vmin, 420px); width: min(94cqh, 44cqw); aspect-ratio: 1; }
.d2-psolid .m-solid { width: 100%; height: 100%; max-height: none; }
.d2-psolid.d2-roll { animation: d2-roll 1.7s ease-in-out; }
@keyframes d2-roll { 30% { transform: translateX(-22%); } 70% { transform: translateX(18%); } }
.d2-defs { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.d2-def { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); font-size: min(4vmin, 28px); line-height: 1.55; }
.d2-key { flex: none; width: 22px; height: 22px; border-radius: 50%; }
.d2-dface .d2-key { border-radius: 6px; background: #fde047; box-shadow: inset 0 0 0 3px #f59e0b; }
.d2-dedge .d2-key { width: 30px; height: 7px; border-radius: 4px; background: #ef4444; }
.d2-dcorner .d2-key { background: #3b82f6; box-shadow: 0 0 0 3px #bfdbfe; }
.d2 .d2-edge { fill: none; stroke: #ef4444; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d2 .d2-edge.d2-draw { stroke-dashoffset: 0; animation: d2-drawin .6s ease-out backwards; }
.d2 .d2-vertex { fill: #3b82f6; stroke: #fff; stroke-width: 3; }

/* ================================================================ chapter 6: fractions */
/* a round shape cut into equal parts, one coloured; then 1 of the apples */
.d2-frac { display: flex; align-items: center; justify-content: center; gap: min(5vw, 54px); width: 100%; height: 100%; }
.d2-fpart { display: flex; align-items: center; justify-content: center; gap: 16px; transition: opacity .4s; }
.d2-fshape { flex: none; width: min(48vmin, 400px); width: min(84cqh, 40cqw); aspect-ratio: 1; }
.d2-fshape .m-fracshape { width: 100%; height: 100%; max-height: none; }
.d2-fbig { padding: 4px 18px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.d2-fbig .m-frac { font-size: min(10vmin, 72px); color: var(--purple); }
.d2-fset.frac-set { flex-wrap: wrap; justify-content: center; gap: min(2vw, 16px); padding: 8px 14px; }
.d2-fset .fs-item { font-size: min(9vmin, 64px); }
.d2 .d2-cut { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.d2 .d2-cut.d2-draw { stroke-dashoffset: 0; animation: d2-drawin .45s ease-in backwards; }

/* comparing fractions: two strips of the same length, one under the other, the fraction on the right */
.d2-cmp { display: flex; flex-direction: column; justify-content: center; gap: min(4vmin, 28px); width: min(92vw, 940px); width: min(96cqw, 940px); }
.d2-strip { display: flex; align-items: center; gap: 16px; }
.d2-slabel { flex: none; min-width: 1.4em; font-size: min(8vmin, 58px); text-align: center; transition: transform .3s; }
.d2-slabel .m-frac { font-size: 1em; }
.d2-sbar { flex: 1; min-width: 0; height: min(15vmin, 110px); height: min(28cqh, 110px); }
.d2-sbar .m-fracshape { display: block; width: 100%; height: 100%; max-height: none; }
.d2-sbar .m-part, .d2-sbar .m-fr-outline { vector-effect: non-scaling-stroke; }
.d2-strip.d2-winner .d2-slabel { transform: scale(1.15); color: #16a34a; }
.d2-strip.d2-winner .m-frac { color: #16a34a; }
/* the bigger coloured part glows */
.d2 .d2-glow { animation: d2-glow .7s ease-in-out infinite alternate; }
@keyframes d2-glow { from { stroke: #f59e0b; stroke-width: 4px; } to { stroke: #fde047; stroke-width: 10px; } }

/* who ate more? the four steps, two pizzas with names, a crown (the gap under the steps is the room for the crown,
   which stands .72em above its card) */
.d2-pizza { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(6.5vmin, 45px); width: 100%; height: 100%; }
.d2-plan { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.d2-pstep { padding: 2px 18px; border-radius: 40px; background: rgba(255, 255, 255, .65); color: var(--ink2); font-size: min(3.6vmin, 24px); line-height: 1.6; transition: transform .3s, background .3s, color .3s; }
.d2-pstep.d2-now { background: var(--purple); color: #fff; transform: scale(1.1); box-shadow: 0 4px 0 #6d28d9; }
.d2-pstep.d2-done { background: #bbf7d0; color: #166534; }
.d2-pcards { display: flex; justify-content: center; align-items: flex-end; gap: min(5vw, 54px); min-height: 0; }
.d2-pcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px 10px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); transition: box-shadow .3s; }
.d2-pcard.d2-winner { box-shadow: 0 0 0 6px #fde047, var(--shadow); }
.d2-pname { font-size: min(4.8vmin, 32px); line-height: 1.45; }
.d2-pz { width: min(30vmin, 260px); width: min(46cqh, 38cqw); aspect-ratio: 1; }
.d2-pz .m-fracshape { width: 100%; height: 100%; max-height: none; }
.d2-pfrac .m-frac { font-size: min(6.4vmin, 44px); color: var(--purple); }
.d2-crown { position: absolute; left: 0; right: 0; top: -.72em; text-align: center; font-size: min(9vmin, 62px); line-height: 1; }
/* a pizza: cheese, crust and the slice that was eaten */
.d2 .d2-pz .m-part { fill: #fde68a; stroke: #c2410c; }
.d2 .d2-pz .m-part.m-on { fill: var(--mf, #ef4444); }
.d2 .d2-pz .m-fr-outline { stroke: #d97706; stroke-width: 9; }

/* ================================================================ upright screens: things under each other */
@media (orientation: portrait) {
  .d2-ck { flex-direction: column; gap: 12px; }
  .d2-ckface { width: min(62vmin, 380px); width: min(56cqh, 86cqw); }
  .d2-cktext { align-items: center; gap: 8px; }
  .d2-window { width: min(42vmin, 300px); width: min(47cqw, 36cqh); }
  .d2-shape { flex-direction: column; gap: 14px; }
  .d2-shpic { width: min(62vmin, 400px); width: min(66cqh, 88cqw); }
  .d2-counters { flex-direction: row; }
  .d2-solids, .d2-solids.d2-few { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(96vw, 520px); width: min(96cqw, 74cqh); }
  .d2-faces { flex-direction: column; gap: 4px; }
  .d2-fsolid, .d2-paper { width: min(36vmin, 280px); width: min(42cqh, 72cqw); }
  .d2-farrow { transform: rotate(-90deg); }
  .d2-fsolid.d2-stamp { animation-name: d2-stampdown; }
  .d2-parts { flex-direction: column; gap: 10px; }
  .d2-psolid { width: min(48vmin, 320px); width: min(52cqh, 76cqw); }
  .d2-defs { align-items: center; gap: 8px; }
  .d2-frac { flex-direction: column; gap: 14px; }
  .d2-fshape { width: min(46vmin, 300px); width: min(48cqh, 62cqw); }
  .d2-mrow { gap: 10px; }
}

/* ================================================================ phones */
@media (max-width: 600px) {
  .d2 { gap: 6px; }
  .d2-cap { gap: 8px; }
  .d2-foot { gap: 14px; }
  .d2-again { width: 54px; height: 54px; font-size: 25px; }
  .d2-line { padding: 2px 12px 4px; border-radius: 18px; font-size: min(4.8vw, 19px); }
  .d2-line.d2-big { padding: 3px 12px; font-size: min(6vw, 26px); }
  .d2-counter { padding: 2px 14px; font-size: min(8vw, 34px); }
  .d2-ckline { gap: 8px; padding: 3px 12px; font-size: min(4.6vw, 20px); }
  .d2-hand.d2-hh { width: 22px; height: 11px; }
  .d2-hand.d2-mh { width: 38px; height: 7px; }
  .d2-ckname { padding: 0 20px; font-size: min(8.5vw, 36px); }
  .d2-window { padding: 8px; border-radius: 22px; }
  .d2-wcap { padding: 0 10px; font-size: min(4.2vw, 18px); }
  .d2-act { font-size: min(8vw, 32px); }
  .d2-loco { font-size: 13vw; }
  .d2-wagon { min-width: 0; margin-inline-start: 10px; padding: 4px 8px 10px; }
  .d2-wagon::before { inset-inline-start: -10px; width: 10px; }
  .d2-wname { font-size: min(4.2vw, 18px); }
  .d2-rung { gap: 8px; padding: 2px 10px; }
  .d2-rtext { font-size: min(4.2vw, 18px); }
  .d2-mcard { padding: 8px; border-radius: 20px; }
  .d2-mlab { font-size: min(4.2vw, 18px); }
  .d2-thing { gap: 6px; padding: 3px 12px; font-size: min(4.6vw, 20px); }
  .d2-sname { font-size: min(4vw, 17px); }
  .d2-def { gap: 8px; padding: 2px 12px; font-size: min(4.2vw, 18px); }
  .d2-fbig .m-frac { font-size: min(11vw, 48px); }
  .d2-pstep { padding: 1px 10px; font-size: min(3.8vw, 16px); }
  .d2-pcard { padding: 6px 10px 8px; border-radius: 22px; }
  .d2-pname { font-size: min(4.8vw, 20px); }
}