.walk-figure{margin:32px 0;padding:26px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.walk-figure figcaption{margin-bottom:25px}.walk-figure-tag{display:block;font-size:11px;line-height:1.8;color:var(--accent);margin-bottom:8px}.walk-figure figcaption>strong{font-size:20px;font-weight:600;line-height:1.6;display:block}.walk-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}.walk-steps li{position:relative;display:flex;gap:15px;min-width:0}.walk-marker{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--tint);border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums}.walk-steps strong{font-weight:600;font-size:16px;line-height:1.7;display:block;overflow-wrap:anywhere}.walk-steps p{margin:7px 0 0;font-size:16px;line-height:1.95;color:var(--muted);overflow-wrap:anywhere}.walk-flow .walk-steps,.walk-sequence .walk-steps{gap:30px}.walk-flow li:not(:last-child):before,.walk-sequence li:not(:last-child):before{content:'';position:absolute;left:15px;top:35px;bottom:-23px;width:1px;background:var(--line)}.walk-flow li:not(:last-child):after,.walk-sequence li:not(:last-child):after{content:'↓';position:absolute;left:10px;bottom:-26px;color:var(--accent);background:var(--surface);font-size:15px}.walk-compare .walk-steps,.walk-parallel .walk-steps,.walk-cycle .walk-steps,.walk-network .walk-steps,.walk-tree .walk-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.walk-compare li,.walk-parallel li,.walk-cycle li{padding:19px;background:var(--paper);border:1px solid var(--line);border-radius:10px;display:block}.walk-compare .walk-marker,.walk-parallel .walk-marker,.walk-cycle .walk-marker{margin-bottom:15px}.walk-parallel li{border-top:3px solid var(--accent)}.walk-root{padding:18px 20px;border:1px solid var(--accent);border-radius:9px;background:var(--tint);color:var(--accent);font-size:15px;margin:0 auto 27px;max-width:85%;text-align:center;position:relative}.walk-root:after{content:'';position:absolute;top:100%;left:50%;height:28px;border-left:1px solid var(--accent)}.walk-network .walk-steps,.walk-tree .walk-steps{border-top:1px solid var(--accent);padding-top:22px}.walk-network li,.walk-tree li{padding:17px 13px;background:var(--paper);border:1px solid var(--line);border-radius:9px}.walk-stack li,.walk-nested li{padding:18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--paper)}.walk-stack li:nth-child(even),.walk-nested li:nth-child(even){background:var(--tint)}.walk-stack .walk-steps,.walk-nested .walk-steps{gap:7px}.walk-table li{padding:17px 0;border-bottom:1px solid var(--line)}.walk-table li:last-child{border-bottom:0}.walk-bits .walk-marker{border-radius:6px;font-family:Consolas,monospace}.walk-bits li{padding:15px;background:var(--paper);border:1px solid var(--line);border-radius:8px}.walk-return{text-align:center;border-top:1px dashed var(--accent);margin-top:22px;padding-top:18px;color:var(--accent);font-size:13px}.walk-conclusion{border-left:3px solid var(--accent);padding-left:22px}.learning-demo{padding:25px;margin:30px 0;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.learning-demo figcaption{font-size:18px;font-weight:600;line-height:1.7;margin-bottom:20px}.demo-note{font-size:14px;line-height:1.95;color:var(--muted);margin-top:20px}.demo-controls{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}.demo-controls button,.demo-next{font:inherit;font-size:13px;padding:10px 13px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--muted);cursor:pointer}.demo-controls button[aria-pressed=true]{background:var(--tint);color:var(--accent);border-color:var(--accent)}.demo-panel{padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:9px;font-size:15px;line-height:1.95}.demo-panel strong{display:block;color:var(--accent);margin-bottom:9px}.demo-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.8;text-align:left}.demo-table td,.demo-table th{padding:12px 9px;border:1px solid var(--line);overflow-wrap:anywhere}.demo-table th{background:var(--tint);font-weight:500}.demo-table tr[data-match=true]{background:var(--tint)}.demo-table tr[data-match=false]{opacity:.42}.demo-legend{display:flex;flex-wrap:wrap;gap:15px;font-size:11px;line-height:1.7;color:var(--muted);margin:16px 0}.demo-legend span:before{content:'';display:inline-block;width:9px;height:9px;background:var(--accent);border-radius:2px;margin-right:6px}.demo-legend span:nth-child(2):before{background:var(--line)}.demo-svg{width:100%;height:auto;display:block}.demo-svg text{fill:var(--ink);font-family:inherit;font-size:14px}.demo-svg rect{fill:var(--paper);stroke:var(--line);stroke-width:1.5}.demo-svg .demo-accent{fill:var(--tint);stroke:var(--accent)}.demo-svg path,.demo-svg line{fill:none;stroke:var(--accent);stroke-width:2}.demo-svg .demo-arrow{fill:var(--accent);stroke:none}.demo-svg .inactive{opacity:.25}.demo-svg .active{opacity:1}.demo-memory{display:flex;gap:4px;flex-wrap:wrap;margin:20px 0}.demo-memory span{padding:15px 8px;border:1px solid var(--line);background:var(--paper);font-size:13px;text-align:center;min-width:42px;border-radius:5px}.demo-memory .filled{background:var(--tint);color:var(--accent);border-color:var(--accent)}.demo-layers>div{padding:16px;border:1px solid var(--accent);background:var(--paper);border-radius:9px;font-size:13px;line-height:1.8}.demo-layers div div{margin-top:12px;background:var(--tint)}.demo-bit-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:20px 0}.demo-bit-grid span{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:11px 2px;font:16px/1.5 Consolas,monospace}.demo-bit-grid small{display:block;font-size:10px;color:var(--muted)}.demo-bit-grid .network-bit{background:var(--tint);border-color:var(--accent);color:var(--accent)}.demo-prefix-label{display:flex;gap:10px;align-items:center;margin:15px 0;font-size:14px}.demo-prefix-label select{background:var(--paper);color:var(--ink);padding:8px;border:1px solid var(--line);border-radius:5px}.demo-processes{display:grid;grid-template-columns:1fr 1fr;gap:15px}.demo-processes article{padding:19px;background:var(--paper);border:1px solid var(--line);border-radius:10px}.demo-processes h3{font-size:15px;margin:0 0 12px}.demo-processes code{font-size:12px;overflow-wrap:anywhere}.demo-formula{font:16px/2 Consolas,monospace;padding:15px;border:1px solid var(--line);background:var(--paper);border-radius:9px;overflow-wrap:anywhere}.demo-source-note{font-size:12px;color:var(--muted);line-height:1.85}
.demo-layers div div{padding:12px;border:1px solid var(--accent);border-radius:7px}
@media(max-width:700px){.walk-figure,.learning-demo{padding:20px 14px}.walk-steps p{font-size:16px}.walk-compare .walk-steps,.walk-parallel .walk-steps,.walk-cycle .walk-steps,.walk-network .walk-steps,.walk-tree .walk-steps,.demo-processes{grid-template-columns:1fr}.walk-figure figcaption>strong{font-size:19px}.walk-root{max-width:100%}.demo-table{font-size:12px}.demo-table td,.demo-table th{padding:10px 5px}.learning-demo:has(.demo-svg){overflow-x:auto}.learning-demo:has(.demo-svg) figcaption:after{content:'เลื่อนภาพด้านข้างเพื่อดูให้ครบ ↔';display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:10px}.demo-svg{min-width:560px}.demo-svg text{font-size:15px}.demo-bit-grid span{font-size:14px}.demo-formula{font-size:13px}.demo-panel{padding:16px}}