/* Countable alternatives have their own scale and names. They never alter the
   connected-cube rods used by the original models and Hundred Exchange. */
.ten-representation{--ten-counter-size:17px;--ten-counter-gap:4px;color:#344c43;max-width:740px;margin:auto}
.ten-counting-columns{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;justify-content:center}
.ten-tens-column,.ten-ones-column{box-sizing:border-box;min-width:0;padding:14px 12px;border:1px solid #bdc9b5;border-radius:12px;background:#fffef9}
.ten-tens-column{flex:1 1 210px}.ten-ones-column{flex:0 1 146px}
.ten-column-label{display:block;font-size:13px;line-height:1.4;text-align:center;margin:0 0 12px}
.ten-fulls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:center}
.ten-full-group{display:grid;justify-items:center;gap:6px;flex:none}
.ten-countable{display:block;box-sizing:border-box;width:var(--ten-counter-size);height:var(--ten-counter-size);min-width:var(--ten-counter-size);border:1px solid #2e6650;border-radius:50%;background:#80b491;margin:0;padding:0;flex:none}
.ten-countable.ten-second-five{background:#ad96d4;border-color:#715591}
.ten-frame{display:grid;grid-template-columns:repeat(5,var(--ten-counter-size));grid-template-rows:repeat(2,var(--ten-counter-size));gap:var(--ten-counter-gap);padding:5px;border:1px solid #9eae94;border-radius:4px;background:#f3f5eb;width:max-content;flex:none}
.ten-slot{display:grid;place-items:center;width:var(--ten-counter-size);height:var(--ten-counter-size);box-sizing:border-box;border-radius:3px;outline:1px solid #c5ceba;background:#fffef9}
.ten-pairs{display:grid;grid-template-columns:repeat(5,max-content);gap:4px;width:max-content;flex:none}
.ten-pair{display:grid;grid-template-rows:repeat(2,var(--ten-counter-size));gap:5px;padding:4px 3px;border:1px solid #b8c5ac;border-radius:12px;background:#f3f5eb}
.ten-kind-rack{--ten-counter-size:14px}
.ten-rack{display:flex;flex-wrap:nowrap;gap:7px;align-items:center;width:max-content;padding:10px 5px;border-left:3px solid #7d7968;border-right:3px solid #7d7968;background:linear-gradient(#8a8675,#8a8675) center/100% 2px no-repeat}
.ten-rack-five{display:flex;flex-wrap:nowrap;gap:2px;width:max-content;flex:none}
.ten-group-label{font-size:11px;font-weight:650;line-height:1.3;text-align:center}
.ten-extra-units{display:flex;justify-content:center;align-items:center;min-height:58px}
.ten-loose{display:grid;grid-template-columns:repeat(5,var(--ten-counter-size));gap:6px;justify-content:center;width:max-content}
.ten-zero{display:block;font-size:12px;line-height:1.5;color:#526449;text-align:center;padding:12px 0}
.ten-chart-link{display:grid;justify-items:center;margin-top:10px;gap:6px}
.ten-chart-arrow{font-size:23px;line-height:1;color:#79609b}
.ten-chart-link p{font-size:12px;line-height:1.45;text-align:center;margin:0}
.ten-place-chart{display:grid;grid-template-columns:repeat(2,minmax(90px,125px));border:1px solid #ac99c4;border-radius:8px;overflow:hidden;background:#fffef9}
.ten-place-chart>div{display:grid;text-align:center;grid-template-rows:auto 1fr}
.ten-place-chart>div+div{border-left:1px solid #ac99c4}
.ten-place-chart strong{padding:7px 12px;background:#eee7f6;font-size:12px;border-bottom:1px solid #c5b7d5}
.ten-chart-digit{display:block;padding:8px 12px;font-size:24px;font-weight:700;line-height:1.2}
.ten-chart-missing{color:#715194;background:#f8f2ff}
.ten-chart-link .ten-chart-note{max-width:340px;font-size:11px;color:#5a6254}
@media(max-width:600px){.ten-counting-columns{gap:10px}.ten-tens-column{flex-basis:100%}.ten-ones-column{flex:1 1 100%}.ten-tens-column,.ten-ones-column{padding:12px 8px}.ten-column-label{margin-bottom:9px}.ten-extra-units{min-height:42px}.ten-kind-rack .ten-fulls{gap:10px 12px}}
@media(forced-colors:active){.ten-countable{background:CanvasText}.ten-countable.ten-second-five{background:Canvas;border:2px solid CanvasText}.ten-rack{background:none;border-bottom:1px solid CanvasText}.ten-chart-missing{outline:1px dashed CanvasText}}