.table-notice{min-height:94px;margin:0 0 15px;padding:20px 24px;display:flex;align-items:center;line-height:1.6;background:#eeeadd;border-radius:10px;font-size:16px}.table-notice.lesson-success{background:#e4efe1}.table-sliders{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:14px}.table-sliders label{font-weight:600;font-size:14px}.table-sliders output{font-weight:400}.table-sliders input{display:block;width:100%;height:44px;accent-color:#b91c3e;cursor:pointer}.table-sliders input:focus-visible{outline:3px solid #38728a;outline-offset:2px}#chart{--cell:44px;position:relative;width:max-content;border:4px solid #263c48;background:#263c48}.multiplication-chart{border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:Arial,sans-serif;font-size:20px;color:#14212a}.multiplication-chart th,.multiplication-chart td{width:var(--cell);min-width:var(--cell);height:var(--cell);padding:0;text-align:center;border-right:1px solid #45505a;border-bottom:1px solid #45505a;background:var(--shade);font-weight:700}.multiplication-chart th{font-weight:400}.multiplication-chart th button{border:0;border-radius:0;width:100%;height:44px;padding:0;background:transparent;font-size:20px;color:inherit;font-weight:600}.multiplication-chart th button:hover{box-shadow:inset 0 0 0 3px #fff9}.multiplication-chart th button:focus-visible{outline:3px solid #133a76;outline-offset:-5px}.multiplication-chart th button[aria-pressed=true]{box-shadow:inset 0 0 0 3px #b91c3e}.multiplication-chart .times-corner{background:#70badf;font-weight:700;font-size:25px}.table-outline{position:absolute;border:3px solid #bc1640;pointer-events:none;z-index:2;box-shadow:0 0 0 1px #fff7}.row-outline{left:0;right:0;height:var(--cell);top:calc(var(--position)*var(--cell))}.column-outline{top:0;bottom:0;width:var(--cell);left:calc(var(--position)*var(--cell))}.multiplication-chart td.intersection{background:#fff6ba;box-shadow:inset 0 0 0 4px #8a4b00;color:#16242e;text-shadow:0 1px white}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:500px){.table-sliders{gap:14px}.table-notice{padding:16px;font-size:15px}}
/* Handles stay attached to the moving outlines, with a neutral header position. */
.board-scroll{padding:60px 16px 24px 60px}.slider-handle{position:absolute;width:44px;height:44px;min-height:44px;padding:0;border:2px solid #86102e;border-radius:12px;background:linear-gradient(#ed5277,#bc1640);color:white;box-shadow:0 3px 5px #43102144;pointer-events:auto;touch-action:none;cursor:grab;font-size:28px;line-height:1;user-select:none}.slider-handle:hover{background:#cf244f}.slider-handle.dragging{cursor:grabbing;background:#a71136}.row-outline .slider-handle{left:-53px;top:-3px}.column-outline .slider-handle{top:-53px;left:-3px}.row-outline .slider-handle:after{content:'';position:absolute;right:-11px;top:17px;width:10px;height:5px;background:#bc1640}.column-outline .slider-handle:after{content:'';position:absolute;bottom:-11px;left:17px;height:10px;width:5px;background:#bc1640}.table-outline.neutral{border-style:dashed;border-color:#bc164080}.multiplication-chart td.intersection{position:relative;background:var(--shade);box-shadow:none;color:#14212a;text-shadow:0 0 5px #fff,0 0 9px #fff}.multiplication-chart td.intersection:after{content:'';position:absolute;inset:3px;border-radius:7px;border:2px solid #fffbd0;box-shadow:inset 0 0 10px #fff8aa,0 0 12px 4px #ffe063;pointer-events:none;z-index:3}