/* pre track: styles for this track's models and pictures */
.step-vis .vis.pic { width: 180px; height: 180px; }
.step-vis .vis.letter { width: 150px; height: 150px; }
.step-vis .vis.letter.wide { width: min(100%, 320px); height: auto; }
.step-vis .vis.numrow { width: min(100%, 420px); height: auto; }
.step-vis .vis.sum { width: min(100%, 440px); height: auto; max-height: 220px; }
.opt .vis.pic { width: 100px; height: 100px; }
.opt .vis.letter { width: 90px; height: 90px; }
.opt .vis.things { width: 100%; height: auto; max-height: 120px; }
.chip .vis.pic { width: 64px; height: 64px; }
.t-pre .chip .vis.pic { width: 72px; height: 72px; }
.binhead .vis.pic { width: 56px; height: 56px; }
.binhead .vis.shape { width: 52px; height: 52px; }
.t-pre .binhead .vis { width: 64px; height: 64px; }
.t-pre .bin { min-height: 150px; }
.node .vis.pic, .node .vis.letter, .node .vis.numrow, .node .vis.sum, .node .vis.things, .node .vis.frac, .node .vis.tenframe, .node .vis.row, .node .vis.numeral { width: 64%; height: 64%; }
.stop.done .node .vis { opacity: 1; }

/* hands-on models */
.pre-big { min-width: 76px; min-height: 76px; border-radius: 24px; border: 0; background: var(--accent); color: var(--accent-ink); display: inline-grid; place-items: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); padding: 8px; }
.pre-big:active { transform: translateY(2px); box-shadow: none; }
.pre-big .ic.big { width: 40px; height: 40px; }
.pre-num { font: 800 54px var(--round); min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.model .pre-pic { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.model .pre-pic .vis { max-height: 220px; max-width: 100%; height: auto; }
.model .pre-pic .vis.things { width: auto; max-width: 100%; }
.pre-taps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; max-width: 560px; }
.pre-taps.n3 { grid-template-columns: repeat(3, 1fr); }
.pre-taps.n5 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .pre-taps.n4 { grid-template-columns: repeat(4, 1fr); } .pre-taps.n5 { grid-template-columns: repeat(5, 1fr); } }
.pre-tap { background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line), var(--shadow); min-height: 100px; border: 3px solid transparent; transition: transform .12s, border-color .15s; }
.pre-tap.on { border-color: var(--sun); transform: scale(1.04); }
.pre-tap .vis { width: 100%; max-width: 120px; height: auto; color: var(--ink); }
.pre-tap .vis.letter.wide { max-width: 220px; }
.pre-tap .vis.numeral { max-width: 110px; }
/* an emptied pool in order problems should not leave a grey box behind */
.t-pre .orderer .pool:empty { min-height: 0; padding: 0; background: transparent; }
.opt .vis.group { width: 100%; max-width: 170px; height: auto; max-height: 130px; }