.process-demo-section{background:var(--bg);padding:72px 0}.process-demo{--demo-paper:#faf8f3;border:3px solid var(--ink);background:var(--demo-paper);color:var(--ink);margin:32px 0 0}.demo-caption{border-bottom:3px solid var(--ink);justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;display:flex}.demo-caption b{letter-spacing:-.03em;font-size:20px;line-height:1.25}.demo-caption>span{font:500 12px/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.04em;border-bottom:5px solid var(--signal)}.demo-toolbar,.demo-map{display:none}.demo-path{padding:24px}.demo-path-title{margin:0 0 8px;font-size:22px}.demo-path-description{max-width:72ch;color:var(--muted);margin:0 0 20px;font-size:15px}.demo-scenes{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;display:grid}.demo-step{border:2px solid var(--ink);background:var(--bg);flex-direction:column;min-width:0;padding:24px;display:flex}.demo-scene-head{align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.demo-number{font:500 14px/32px var(--font-mono);text-align:center;border-bottom:5px solid var(--signal);min-width:36px}.demo-scene-head h3{letter-spacing:-.035em;margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.15}.demo-scene-body{flex:1;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:28px;display:grid}.demo-drawing{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round;width:100%;height:auto}.demo-scene-body dl{gap:12px;min-width:0;margin:0;display:grid}.demo-panel{border:1px solid var(--ink);background:var(--demo-paper);padding:10px 12px}.demo-panel.is-marked{border-left:5px solid var(--ink)}.demo-panel.is-marked dt{background:var(--signal);-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline}.demo-panel dt{font:500 11px/1.5 var(--font-mono);text-transform:uppercase;letter-spacing:.025em}.demo-panel dd{overflow-wrap:anywhere;margin:4px 0 0;font-size:15px;line-height:1.45}.demo-explanation{border-top:1px solid var(--ink);margin:24px 0 0;padding-top:16px;font-size:15px;line-height:1.55}.demo-example{border-top:1px solid var(--ink);color:var(--muted);margin:0;padding:16px 24px;font-size:12px}.demo-clock{display:none}.is-enhanced .demo-toolbar{border-bottom:1px solid var(--ink);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;display:flex}.demo-toolbar button{border:1px solid var(--ink);color:inherit;font:500 13px/1.3 var(--font);cursor:pointer;background:0 0;min-height:44px;padding:10px 12px}.demo-path-buttons{flex-wrap:wrap;gap:8px;display:flex}.demo-path-buttons button[aria-pressed=true]{background:var(--ink);color:var(--demo-paper)}.is-enhanced .demo-path-title,.is-enhanced .demo-path:not(.is-current),.is-enhanced .demo-step:not(.is-current){display:none}.is-enhanced .demo-workspace{grid-template-columns:260px minmax(0,1fr);align-items:stretch;gap:24px;display:grid}.is-enhanced .demo-map{flex-direction:column;gap:3px;margin:0;padding:0;list-style:none;display:flex}.demo-map button{text-align:left;width:100%;min-height:44px;font:500 12px/1.35 var(--font);color:var(--muted);cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:6px 8px;display:flex}.demo-map button>span:first-child{font:500 12px/1 var(--font-mono);min-width:24px}.demo-map button[aria-current=step]{border-color:var(--ink);color:var(--ink);background:var(--bg)}.demo-map button[aria-current=step]>span:first-child{background:var(--signal);text-align:center;padding:5px 0}.is-enhanced .demo-scenes{min-width:0;display:block}.is-enhanced .demo-step{height:100%;min-height:480px}.is-enhanced .demo-clock{border-top:1px solid var(--ink);height:4px;display:block;overflow:hidden}.is-enhanced .demo-clock span{background:var(--ink);transform-origin:0;height:100%;animation:5s linear forwards paused demo-progress;display:block;transform:scaleX(0)}.is-playing .demo-step.is-current .demo-drawing{stroke-dasharray:500;stroke-dashoffset:500px;animation:1.1s ease-out forwards demo-draw}.is-playing .demo-clock span,.is-playing .demo-step.is-current .demo-drawing{animation-play-state:running}@keyframes demo-progress{to{transform:scaleX(1)}}@keyframes demo-draw{to{stroke-dashoffset:0}}@media (width<=760px){.process-demo-section{padding:48px 0}.demo-caption{padding:16px}.demo-caption b{font-size:18px}.demo-path,.demo-step{padding:16px}.demo-scenes{grid-template-columns:1fr}.demo-scene-body{grid-template-columns:1fr;gap:20px}.demo-drawing{width:80px;margin:0 auto}.demo-scene-head{gap:12px;margin-bottom:20px}.demo-explanation{margin-top:20px;font-size:14px}.demo-example{padding:16px}.is-enhanced .demo-toolbar{padding:12px 16px}.is-enhanced .demo-workspace{grid-template-columns:1fr;gap:16px}.is-enhanced .demo-map{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.demo-map button{justify-content:center;padding:4px}.demo-map button>span:last-child{display:none}.demo-map button>span:first-child{text-align:center}.is-enhanced .demo-step{min-height:570px}}@media (prefers-reduced-motion:reduce){.process-demo .demo-toolbar,.process-demo .demo-map,.process-demo .demo-clock{display:none}.process-demo .demo-path,.process-demo .demo-step{display:block!important}.process-demo .demo-workspace,.process-demo .demo-path-title{display:block}.process-demo .demo-scenes{display:grid}.process-demo .demo-step{height:auto;min-height:0}.process-demo .demo-drawing{stroke-dashoffset:0!important;animation:none!important}}