.substring-inputs{grid-template-columns:minmax(0,1fr) auto}.substring-array{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0;min-height:60px}.substring-cell{text-align:center;min-width:38px;flex:0 0 38px}.substring-cell strong{display:grid;place-items:center;border:2px solid #d7e2f2;border-radius:8px;height:44px;background:#f4f8ff;transition:background .2s,border-color .2s}.substring-cell.inside strong{border-color:#174ea6;background:#eaf2ff}.substring-cell.active strong{background:#174ea6;color:#fff}.substring-cell.best strong{border-color:#007c9c;background:#d9f1ff}.substring-cell small{display:block;font-size:10px}.substring-cell span{display:block;min-height:18px;font-size:11px;font-weight:700;color:#174ea6}.substring-state{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}@media(prefers-reduced-motion:reduce){.substring-cell strong{transition:none}}

.substring-cell.discarded{opacity:.42}.substring-cell{transition:opacity .25s,background .25s}.pattern-intro h2{font-size:1.15rem;margin-top:1.4rem}@media(prefers-reduced-motion:reduce){.substring-cell{transition:none}}

.matrix-inputs{display:grid;grid-template-columns:1fr 90px;gap:12px}.matrix-inputs label{display:grid;gap:6px}.matrix-inputs textarea{width:100%;resize:vertical;border:1px solid #aabedc;border-radius:8px;padding:10px;font:14px monospace}.matrix-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;margin:20px 0}.matrix-cell{display:grid;text-align:center;gap:4px;background:#eaf2ff;border:1px solid #bad0f0;border-radius:9px;padding:12px 2px}.matrix-cell strong{font-size:22px}.matrix-cell small,.matrix-cell span{font-size:11px}.matrix-cell.active,.matrix-cell.found{background:#174ea6;color:white}.matrix-cell.discarded{opacity:.4}.matrix-state{white-space:pre-wrap;font-size:14px!important}.solution-input{overflow-wrap:anywhere}@media(max-width:600px){.matrix-cell{padding:9px 1px}.matrix-cell strong{font-size:17px}.matrix-grid{gap:4px}}

.matrix-inputs input{width:100%;min-width:0}.matrix-inputs label{min-width:0}

.matrix-inputs input{border:1px solid #aabedc;border-radius:8px;padding:10px;font:14px monospace}.matrix-inputs button{border:0;border-radius:8px;background:#174ea6;color:white;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;justify-self:start}.matrix-inputs button:hover{background:#103b82}

.matrix-cell{line-height:1.3}pre[data-code] code{counter-reset:matrix-line}pre[data-code] code>span::before{counter-increment:matrix-line;content:counter(matrix-line);display:inline-block;width:2em;margin-right:.8em;text-align:right;color:#536480;font-size:.8em;user-select:none}

@media(min-width:901px){.workspace{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
