.pattern-wrapper{--bg: var(--color-bg, #f5f3f0);--bg-subtle: var(--color-bg-subtle, #edeae5);--bg-panel: var(--surface-panel, #eae7e2);--bg-raised: var(--surface-raised, #ffffff);--fg: var(--color-text, #1a1a1a);--fg-strong: var(--color-text, #1a1a1a);--accent: var(--color-accent, #ff6b35);--muted: var(--color-muted, #6b6560);--border: var(--color-rule, #d5d0ca)}.pattern-wrapper{max-width:var(--site-max);margin:0 auto;padding:var(--space-3) var(--page-inline)}.pattern-wrapper .pml-container{margin:0 auto;border:1px solid var(--border);overflow-x:hidden}.pattern-wrapper .main-content{display:grid;grid-template-columns:5fr 2fr;gap:0}.pattern-wrapper .visualization{background:var(--bg-panel);padding:24px;border-right:1px solid var(--border)}.pattern-wrapper canvas{width:100%;border:1px solid var(--border);background:var(--bg-raised)}.pattern-wrapper #patternCanvas{height:auto}.pattern-wrapper .controls{background:var(--bg-panel);padding:24px}.pattern-wrapper .control-group{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}.pattern-wrapper .control-group label{display:block;color:var(--muted);margin-bottom:8px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}.pattern-wrapper .control-group input[type=range]{width:100%;margin-bottom:8px;-webkit-appearance:none;height:6px;background:var(--border);cursor:pointer}.pattern-wrapper .control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--accent);cursor:pointer}.pattern-wrapper .control-group .value{color:var(--fg-strong);font-size:14px;font-variant-numeric:tabular-nums}.pattern-wrapper button{width:100%;padding:10px 16px;min-height:40px;margin-bottom:8px;background:var(--bg-raised);color:var(--fg);border:1px solid var(--border);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:all .12s ease-out}.pattern-wrapper button:hover{background:var(--bg-subtle);border-color:var(--accent);color:var(--fg-strong)}.pattern-wrapper button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pattern-wrapper button.secondary{background:transparent;border:1px solid var(--border)}.pattern-wrapper button.secondary:hover{background:var(--bg-subtle);border-color:var(--accent)}.pattern-wrapper .algorithm-box{background:var(--bg-raised);padding:16px;border:1px solid var(--border);margin-bottom:16px}.pattern-wrapper .algorithm-box h3{color:var(--accent);margin-bottom:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}.pattern-wrapper .algorithm-box code{display:block;color:var(--fg);font-size:12px;line-height:1.6;white-space:pre}.pattern-wrapper .stats{background:var(--bg-raised);padding:16px;border:1px solid var(--border);margin-top:16px}.pattern-wrapper .stats div{margin-bottom:8px;font-size:13px}.pattern-wrapper .stats .label{color:var(--muted);display:inline-block;width:100px;font-weight:500}.pattern-wrapper .draw-interface{background:var(--bg-raised);padding:16px;border:1px solid var(--border);margin-top:16px}.pattern-wrapper .draw-interface h4{color:var(--fg-strong);margin-bottom:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.pattern-wrapper .draw-canvas{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;width:320px;margin-bottom:12px;cursor:crosshair;user-select:none;border:1px solid var(--border);background:var(--border)}.pattern-wrapper .draw-pixel{aspect-ratio:1;background:var(--bg-raised);border:none;transition:background 60ms}.pattern-wrapper .draw-pixel:hover{background:var(--bg-subtle)}.pattern-wrapper .draw-pixel.active{background:var(--fg)}.pattern-wrapper .draw-controls{display:flex;gap:8px;margin-bottom:12px}.pattern-wrapper .draw-controls button{flex:1;padding:10px;font-size:13px}.pattern-wrapper .prediction{font-size:14px;color:var(--fg-strong);margin-top:12px;font-weight:600}.pattern-wrapper .explanation{background:var(--bg-subtle);padding:24px;border-bottom:1px solid var(--border);font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}.pattern-wrapper .explanation h2{color:var(--fg-strong);margin-bottom:16px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--border);padding-bottom:8px}.pattern-wrapper .explanation p{margin-bottom:16px;color:var(--fg);font-size:14px;line-height:1.7}.pattern-wrapper .explanation strong{color:var(--fg-strong);font-weight:600}.pattern-wrapper .explanation em{color:var(--accent);font-style:normal}.pattern-wrapper .weights-display{margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}.pattern-wrapper .network-diagram{margin-top:16px;padding:16px;background:var(--bg-raised);border:1px solid var(--border)}.pattern-wrapper .network-diagram h3{color:var(--accent);margin-bottom:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;text-align:left}.pattern-wrapper .network-viz{display:flex;justify-content:space-around;align-items:center;gap:20px;margin-top:16px}.pattern-wrapper .layer{display:flex;flex-direction:column;align-items:center;gap:5px}.pattern-wrapper .layer-label{font-size:10px;color:var(--muted);margin-bottom:5px;text-align:center;font-weight:500;text-transform:uppercase;letter-spacing:.04em}.pattern-wrapper .layer-nodes{display:flex;flex-direction:column;gap:3px}.pattern-wrapper .node{width:10px;height:10px;background:var(--bg-raised);border:1px solid var(--muted)}.pattern-wrapper .node.hidden{background:var(--accent);border-color:var(--accent)}.pattern-wrapper .node.output{background:var(--secondary);border-color:var(--secondary)}.pattern-wrapper .arrow{color:var(--muted);font-size:18px}.pattern-wrapper h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-strong)}@media (max-width: 768px){.pattern-wrapper{padding:12px}.pattern-wrapper .explanation{padding:16px}.pattern-wrapper .visualization{padding:16px;border-right:none;border-bottom:1px solid var(--border)}.pattern-wrapper .controls{padding:16px}.pattern-wrapper .main-content{grid-template-columns:1fr;display:flex;flex-direction:column}.pattern-wrapper .visualization,.pattern-wrapper .controls{display:contents}.pattern-wrapper .visualization>div:first-child{order:1;padding:15px;background:var(--bg-raised);margin-bottom:2px}.pattern-wrapper .visualization>canvas{order:2;padding:15px;background:var(--bg-raised);margin-bottom:2px}.pattern-wrapper .visualization .weights-display{order:3;padding:15px;background:var(--bg-raised);margin-bottom:2px;border-top:none}.pattern-wrapper .controls .stats{order:4;padding:15px;background:var(--bg-raised);border:none;margin:0 0 2px}.pattern-wrapper .controls .algorithm-box{order:5;background:var(--bg-raised);padding:15px;margin-bottom:2px;border:none}.pattern-wrapper .controls .control-group{order:6;background:var(--bg-raised);padding:15px;margin:0 0 2px;border-bottom:none}.pattern-wrapper .controls button{order:7;background:var(--bg-raised)!important;color:var(--fg)!important;padding:12px;margin-bottom:2px}.pattern-wrapper button:hover{background:var(--bg-subtle)!important;color:var(--fg-strong)!important}.pattern-wrapper button:active{background:var(--bg)!important;color:var(--fg-strong)!important}.pattern-wrapper .visualization .draw-interface{order:8;padding:15px;background:var(--bg-raised);margin:0;border:none}.pattern-wrapper .network-diagram{display:none}.pattern-wrapper .network-viz{flex-direction:column;gap:10px}.pattern-wrapper .arrow{transform:rotate(90deg)}.pattern-wrapper .draw-canvas{width:100%;max-width:none}.pattern-wrapper .draw-interface>div[style*="display: flex"]{flex-direction:column!important}.pattern-wrapper .draw-interface>div[style*="display: flex"]>div{flex-shrink:1!important;width:100%!important}.pattern-wrapper .algorithm-box{padding:15px;overflow-x:auto}.pattern-wrapper .algorithm-box code{font-size:11px}.pattern-wrapper .stats,.pattern-wrapper .draw-interface{padding:15px}.pattern-wrapper canvas{max-width:100%}.pattern-wrapper #patternCanvas{width:100%!important}.pattern-wrapper .weights-display{overflow-x:hidden}.pattern-wrapper .visualization>div>div[style*="grid-template-columns: repeat(4, .pattern-wrapper 1fr)"]{grid-template-columns:repeat(2,1fr)!important}}