/* Make-10: ten-frame and cherries */
.m10-stage { display: grid; justify-items: center; gap: .875rem; width: 100%; }
.m10-prompt { font: 600 1.25rem/1.4 var(--f-b), var(--cjk); margin: 0; text-align: center; }
.m10-pic { display: flex; gap: 1.125rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.tenframe { display: grid; grid-template-columns: repeat(5, 2.75rem); grid-template-rows: repeat(2, 2.75rem); border: 2.5px solid var(--ink); border-radius: .375rem; background: #fff; }
.tf-cell { border: 1px solid var(--edge); display: grid; place-items: center; }
.dot { display: inline-block; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); }
.dot.b { background: var(--sky); }
.dot.a { background: var(--mint); }
.dot.ghost { background: transparent; border-style: dashed; }
.dotrow { display: flex; flex-wrap: wrap; gap: .375rem; max-width: 13.75rem; }
.m10-eq { display: flex; align-items: flex-start; gap: .3em; font-size: clamp(2.125rem, 8vw, 3.75rem); }
.m10-eq > span { padding-top: .05em; }
.m10-hint { font-size: .7em; color: var(--ink2); margin-left: .4em; }
.cherry { display: inline-grid; justify-items: center; }
.ch-top { line-height: 1.1; }
.cherry svg { width: 2.2em; height: .9em; color: var(--ink2); }
.ch-pair { display: flex; gap: .5em; }
.ch-c { width: 1.35em; height: 1.35em; border: .1875rem solid var(--sky); border-radius: 50%; display: grid; place-items: center; font-size: .62em; position: relative; }
.ch-c .ans { border: 0; min-width: 0; }
.m10-sheet .blank { display: inline-block; width: 12mm; border-bottom: .3mm solid #263049; }
@media print {
  .m10-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm 6mm; align-content: start; font: 600 16pt/1.2 "IBM Plex Mono", monospace; }
  .m10-item { display: flex; align-items: flex-start; gap: 2mm; white-space: nowrap; }
  .m10-sheet .ch-c { width: 9mm; height: 9mm; border-width: .5mm; font-size: 12pt; border-color: #4F9BE6; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .m10-sheet .cherry svg { width: 16mm; height: 6mm; }
}
@media screen { .m10-sheet { display: flex; flex-wrap: wrap; gap: 18px; font: 600 22px/1.2 var(--f-m); } .m10-item { display: flex; gap: 6px; align-items: flex-start; } }