/* Separate transient objects; the original cells never receive tutorial classes. */
.kto1-teach{position:fixed;z-index:12000;pointer-events:none;box-sizing:border-box;border:3px solid #e5b94e;border-radius:7px;box-shadow:0 0 0 2px #0b493c;background:#e5b94e28;display:flex;align-items:center;justify-content:center;font:800 clamp(14px,3.8vw,22px)/1 Inter,system-ui;color:#0b493c;text-shadow:0 1px #fff7e5;animation:kto1-teach-wave 1s both}
.kto1-teach.letter{background:#f7e8cfe8}
.kto1-teach.cost{background:#0b493cf2;color:#f7e8cf;text-shadow:none;min-width:42px}
.kto1-teach.conflict{border:5px double #ff765e;box-shadow:0 0 0 2px #401b18;background:#ff765e24;color:#7a2117;animation:kto1-teach-conflict 1.8s both}
@keyframes kto1-teach-wave{0%{opacity:0;transform:scale(.3) rotate(-5deg)}35%{opacity:1;transform:scale(1.07) rotate(1deg)}45%,85%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.8)}}
@keyframes kto1-teach-conflict{0%{opacity:0;transform:scale(.4) translateX(-3px)}20%{opacity:1;transform:scale(1.06) translateX(2px)}30%,85%{opacity:1;transform:scale(1) translateX(0)}100%{opacity:0;transform:scale(.85)}}
@media(prefers-reduced-motion:reduce){.kto1-teach,.kto1-teach.conflict{animation-name:kto1-teach-fade}@keyframes kto1-teach-fade{0%,85%{opacity:1}100%{opacity:0}}}

.kto1-teach-mask{position:fixed;z-index:11999;pointer-events:none;box-sizing:border-box;border:1px solid #cecfbf;border-radius:5px;background:#f7e8cf;display:flex;align-items:center;justify-content:center;color:#173a2e;font:800 22px/1 Inter,system-ui}

.kto1-teach.six-correct{border-color:#64d3a0;background:#64d3a025;box-shadow:0 0 14px #64d3a090}.kto1-teach.six-present{border-color:#f4cb66;background:#f4cb6625;box-shadow:0 0 14px #f4cb6690}.kto1-teach.six-absent{border-color:#a2a6a6;background:#a2a6a620;box-shadow:none}