.tile-lab{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-soft);padding:clamp(18px,3vw,30px)}.tile-lab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.lab-heading{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:18px;display:flex}.lab-heading h3{color:var(--text);letter-spacing:0;margin:7px 0 0;font-size:clamp(1.2rem,2vw,1.65rem)}.tile-size-control{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-raised);gap:5px;padding:4px;display:flex}.tile-size-control button{min-height:36px;color:var(--muted);font:600 .72rem/1 var(--mono);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:0 10px}.tile-size-control button.is-active{border-color:var(--accent-line);color:var(--text);background:var(--accent-soft)}.tile-analogy{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-bottom:22px;padding:10px;display:grid}.tile-analogy__item{min-width:0;min-height:54px;color:var(--accent);background:var(--accent-soft);border-radius:8px;align-items:center;gap:10px;padding:9px 11px;display:flex}.tile-analogy__item svg{flex:none}.tile-analogy__item span,.tile-analogy__item strong,.tile-analogy__item small{min-width:0;display:block}.tile-analogy__item strong{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;overflow:hidden}.tile-analogy__item small{color:var(--text-tertiary);font:500 .62rem/1 var(--mono);margin-top:3px}.tile-analogy__arrow{color:var(--text-tertiary)}.tile-lab__workspace{grid-template-columns:minmax(150px,.72fr) minmax(280px,1.35fr) minmax(260px,1fr);gap:14px;display:grid}.program-panel,.matrix-panel,.formula-panel{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);min-width:0;padding:16px}.panel-caption{min-height:26px;color:var(--muted);font:650 .72rem/1.2 var(--sans);justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.panel-caption code{color:var(--accent);font:500 .68rem/1 var(--mono)}.panel-explainer{min-height:42px;color:var(--text-tertiary);margin:-3px 0 13px;font-size:.72rem;line-height:1.55}.program-grid{grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));gap:5px;display:grid}.program-grid button{aspect-ratio:1;border:1px solid var(--line-strong);min-width:0;color:var(--text-tertiary);background:var(--surface-soft);font:500 .56rem/1 var(--mono);cursor:pointer;transition:transform .16s var(--ease-out), border-color .16s ease, background .16s ease;border-radius:6px}.program-grid button:hover{border-color:var(--accent-line)}.program-grid button.is-active{border-color:var(--accent);color:var(--text);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);transform:translateY(-2px)}.direction-pad{grid-template-columns:repeat(3,44px);justify-content:center;gap:5px;margin-top:18px;display:grid}.direction-pad button{border:1px solid var(--line);width:44px;height:44px;color:var(--text-secondary);background:var(--surface-soft);cursor:pointer;border-radius:7px;place-items:center;display:inline-grid}.direction-pad button:first-child{grid-column:2}.direction-pad button:nth-child(2){grid-column:1}.direction-pad button:disabled{opacity:.32;cursor:not-allowed}.matrix-grid{aspect-ratio:17/13;gap:2px;display:grid}.matrix-grid span{border:1px solid var(--line);background:var(--surface-soft);min-width:0;transition:transform .22s var(--ease-out), background .22s ease, border-color .22s ease;border-radius:2px}.matrix-grid span.active{border-color:var(--accent-line);background:var(--accent-soft-strong);transform:translateZ(0)scale(.88)}.formula-code{border:1px solid var(--line);color:var(--text-secondary);background:var(--code-bg);font:500 .69rem/1.75 var(--mono);white-space:pre;border-radius:8px;margin:0;padding:13px;overflow:auto}.formula-code b{color:var(--accent);font-weight:650}.mask-preview{gap:3px;width:min(152px,100%);margin:16px auto 12px;display:grid}.mask-preview span{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:3px}.mask-preview .is-valid{border-color:var(--accent-line);background:var(--accent-soft-strong)}.mask-preview .is-masked{background:repeating-linear-gradient(-45deg, transparent 0 4px, var(--line) 4px 6px)}.mask-summary{color:var(--muted);justify-content:space-between;align-items:baseline;gap:12px;margin:0;font-size:.72rem;display:flex}.mask-summary strong{color:var(--accent);font:650 1rem/1 var(--mono)}.tile-lab--compact .tile-lab__workspace{grid-template-columns:minmax(130px,.7fr) minmax(260px,1.3fr)}.tile-lab--compact .formula-panel{grid-column:1/-1}@media (width<=900px){.tile-analogy{grid-template-columns:1fr 1fr}.tile-analogy__arrow{display:none}.tile-lab__workspace,.tile-lab--compact .tile-lab__workspace{grid-template-columns:1fr 1.5fr}.formula-panel,.tile-lab--compact .formula-panel{grid-column:1/-1}}@media (width<=640px){.lab-heading{display:grid}.tile-size-control{width:fit-content}.tile-analogy{gap:6px;padding:6px}.tile-analogy__item{min-height:50px;padding:8px}.tile-lab__workspace,.tile-lab--compact .tile-lab__workspace{grid-template-columns:1fr}.formula-panel,.tile-lab--compact .formula-panel{grid-column:auto}.program-grid{grid-template-columns:repeat(var(--grid-cols), minmax(44px, 1fr));scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding-bottom:6px;overflow-x:auto}.program-grid button{min-width:44px;min-height:44px}}@media (prefers-reduced-motion:reduce){.program-grid button,.matrix-grid span{transition:none}}