/* New interactive playgrounds, mobile-first, self-contained. */
.lab-toolbar{display:flex;gap:10px;margin:15px 0;flex-wrap:wrap}.lab-toolbar .btn{flex:1;min-width:145px}.lab-pixels{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;margin:20px auto;max-width:440px;padding:13px;background:#112348;border:1px solid #62719c80;border-radius:19px}.lab-pixel{aspect-ratio:1;border:1px solid #8a9cce8a;background:linear-gradient(135deg,#273960,#162646);border-radius:12px;color:transparent;display:grid;place-items:center;font-size:clamp(15px,3.3vw,27px);transition:background-color .18s,transform .18s,border-color .18s;touch-action:manipulation}.lab-pixel.lit{background:linear-gradient(145deg,#49e8db,#a888ff);color:#15345a;border-color:#c6fffb;box-shadow:inset 0 0 13px #ffffff68,0 0 15px #86ddf142}.lab-pixel:active{transform:scale(.96)}.lab-pixel:focus-visible{outline:3px solid #ffde91;outline-offset:2px}.lab-surface svg{min-height:190px;max-height:340px}.lab-filter{white-space:normal}.lab-surface .readout{font-variant-numeric:tabular-nums}
@media (max-width:620px){.lab-toolbar{flex-direction:column}.lab-pixels{gap:5px;padding:9px}.lab-pixel{border-radius:8px;min-height:42px}.lab-surface svg{min-height:170px}.lab-filter{width:100%}}
@media(prefers-reduced-motion:reduce){.lab-pixel{transition:none}}