.visualization-section{border:1px solid var(--panel-border);border-radius:var(--radius-lg);background:var(--panel-bg);box-shadow:var(--shadow-sm);margin:4px 0 39px;padding:28px;container:visualization/inline-size}.section-heading h2{color:var(--ink);letter-spacing:-.04em;margin:10px 0 11px;font-size:clamp(24px,3vw,35px);font-weight:700;line-height:1.28}.section-heading p{max-width:640px;color:var(--ink-muted);margin-bottom:0;font-size:13px}.section-heading--compact{margin-bottom:20px}.section-heading--compact h2{font-size:22px}.visualization-section>.section-heading{margin-bottom:22px}.visualization-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;min-height:45px;margin-bottom:21px;padding-bottom:17px;display:flex}.visualization-toolbar__label{color:var(--ink);font-size:12px;font-weight:750}.visualization-toolbar p{color:var(--ink-muted);margin:2px 0 0;font-size:11px}.visualization-toolbar__actions{flex:none;gap:7px;display:flex}.business-flow__diagram{border:1px solid var(--diagram-border);border-radius:var(--radius-control);background:var(--diagram-bg);grid-template-columns:minmax(130px,1.15fr) 64px minmax(130px,.9fr) 64px minmax(125px,1fr);align-items:center;gap:12px;min-height:250px;padding:18px;display:grid}.business-flow__column-label{color:var(--ink-muted);letter-spacing:.05em;margin-bottom:9px;font-size:10px}.business-flow__sources,.business-flow__source-grid,.business-flow__outputs{min-width:0}.business-flow__source-grid{gap:8px;display:grid}.system-node{border:1px solid var(--diagram-border);background:var(--diagram-surface);cursor:pointer;text-align:left;border-radius:9px;align-items:center;gap:10px;width:100%;min-width:0;padding:10px;transition:border-color .16s,background-color .16s,transform .16s;display:flex}.system-node:hover,.system-node.is-selected{border-color:var(--diagram-accent);background:var(--diagram-accent-soft);transform:translate(2px)}.system-node__icon{background:var(--surface-muted);width:27px;height:27px;color:var(--diagram-connection);border-radius:7px;flex:none;place-items:center;font-family:SFMono-Regular,Consolas,monospace;font-size:9px;display:grid}.system-node.is-selected .system-node__icon{background:var(--diagram-accent-soft);color:var(--diagram-accent)}.system-node>span:last-child{min-width:0}.system-node strong,.system-node small{display:block}.system-node strong{color:var(--ink);font-size:12px;line-height:1.2}.system-node small{color:var(--ink-muted);margin-top:3px;font-size:10px}.system-node__state{margin-top:2px}.system-node--collecting .system-node__state{color:var(--info-text);font-weight:700}.system-node--ready .system-node__state{color:var(--text-secondary)}.business-flow__connector{min-width:0;color:var(--ink-muted);text-align:center;flex-direction:column;align-items:center;gap:7px;font-size:10px;display:flex;position:relative}.business-flow__connector-line{background:var(--diagram-connection-muted);width:100%;height:1px;position:relative}.business-flow__connector-line:after{border-top:1px solid var(--diagram-connection-muted);border-right:1px solid var(--diagram-connection-muted);content:"";width:7px;height:7px;position:absolute;top:-3px;right:-1px;transform:rotate(45deg)}.business-flow__connector--current .business-flow__connector-line{background:var(--info-text)}.business-flow__connector--current .business-flow__connector-line:after{border-color:var(--info-text)}.business-flow__connector--completed .business-flow__connector-line{background:var(--diagram-connection)}.business-flow__connector--completed .business-flow__connector-line:after{border-color:var(--diagram-connection)}.business-flow__connector-label{white-space:nowrap;order:2}.business-flow__connector-state{color:var(--ink-muted);white-space:nowrap;order:3;font-size:9px}.business-flow__connector--current .business-flow__connector-state{color:var(--info-text);font-weight:700}.business-flow__connector--completed .business-flow__connector-state{color:var(--text-secondary);font-weight:700}.business-flow__connector-arrow{display:none;position:absolute;top:-8px;right:-1px}.warehouse-node{border:1px solid var(--diagram-border);background:var(--diagram-surface);text-align:center;border-radius:12px;flex-direction:column;justify-content:center;min-width:0;min-height:145px;padding:18px;display:flex}.warehouse-node__eyebrow{color:var(--ink-soft);letter-spacing:.07em;font-size:10px;font-weight:700}.warehouse-node strong{color:var(--ink);margin:7px 0 4px;font-size:17px}.warehouse-node__description,.warehouse-node__state{color:var(--ink-muted);font-size:10px}.warehouse-node__state{margin-top:3px}.warehouse-node__status{background:var(--info-bg);color:var(--info-text);border-radius:4px;align-self:center;margin-top:13px;padding:3px 7px;font-size:9px;display:inline-flex}.warehouse-node--processing{border-color:var(--info-border);background:var(--info-bg)}.warehouse-node--processing .warehouse-node__state{color:var(--info-text);font-weight:700}.warehouse-node--ready{border-color:var(--success-border);background:var(--success-bg)}.warehouse-node--ready .warehouse-node__state,.warehouse-node--ready .warehouse-node__status{color:var(--text-primary)}.warehouse-node--ready .warehouse-node__status{background:var(--success-bg)}.business-flow__outputs{gap:8px;display:grid}.output-node{border:1px solid var(--diagram-border);border-left:3px solid var(--diagram-connection);background:var(--diagram-surface);border-radius:8px;min-width:0;padding:10px 12px}.output-node strong,.output-node span{display:block}.output-node strong{color:var(--ink);font-size:11px}.output-node span{color:var(--ink-muted);margin-top:3px;font-size:9px;line-height:1.45}.output-node__state{font-weight:700}.output-node--ready{border-color:var(--success-border);border-left-color:var(--success-text);background:var(--success-bg)}.output-node--ready .output-node__state{color:var(--text-secondary)}.business-flow__packet{opacity:0;align-items:center;gap:6px;height:12px;margin:-5px 0 12px;display:flex;position:relative}.business-flow__packet span{background:var(--info-text);border-radius:50%;width:6px;height:6px}.business-flow--phase-3 .business-flow__packet span{background:var(--success-text)}.business-flow--phase-1 .business-flow__packet,.business-flow--phase-2 .business-flow__packet,.business-flow--phase-3 .business-flow__packet{opacity:1}.business-flow--phase-1 .business-flow__packet{animation:.9s both packet-in}.business-flow--phase-2 .business-flow__packet{justify-content:center;animation:1s both packet-pulse}.business-flow--phase-3 .business-flow__packet{justify-content:flex-end;animation:.9s both packet-out}.flow-inspector{border-top:1px solid var(--diagram-border);align-items:flex-start;gap:13px;margin-top:6px;padding:14px 16px;display:flex}.flow-inspector>div{min-width:0}.flow-inspector__tag{background:var(--diagram-accent-soft);color:var(--info-text);border-radius:4px;flex:none;padding:3px 7px;font-size:10px;font-weight:700}.flow-inspector strong{color:var(--ink);font-size:12px}.flow-inspector p{color:var(--ink-muted);margin:3px 0 0;font-size:11px}.visualization-note{color:var(--ink-muted);align-items:flex-start;gap:7px;margin:18px 0 0;font-size:10px;display:flex}.visualization-note span{color:var(--teal);font-size:13px;line-height:1.2}.code-block{border:1px solid var(--line-strong);background:var(--code-bg);border-radius:10px;margin:37px 0;overflow:hidden}.code-block__body{min-width:0;overflow:hidden}.code-block__body .shiki{white-space:pre;-webkit-overflow-scrolling:touch;background:var(--code-bg)!important}.code-block__body .shiki code{min-width:max-content;display:block}.code-block__body .shiki:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}.code-block__header{border-bottom:1px solid #ffffff17;justify-content:space-between;align-items:center;padding:12px 17px;display:flex}.code-block__header h2{color:#d8e5f5;margin:0;font-size:11px;font-weight:600}.code-block__header span{color:#8ca7c5;text-transform:uppercase;font-family:SFMono-Regular,Consolas,monospace;font-size:10px}.code-block pre{max-width:100%;color:var(--code-text);tab-size:2;margin:0;padding:20px 18px 23px;font-size:11px;line-height:1.8;overflow-x:auto}.lesson-insights{grid-template-columns:minmax(0,1fr);gap:10px;margin:32px 0 42px;display:grid}.teaching-aside{border:0;border-left:3px solid var(--callout-info-border);background:0 0;border-radius:0;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:2px 10px;min-height:0;padding:10px 14px;display:grid}.teaching-aside--pitfall{border-left-color:var(--callout-warning-border)}.teaching-aside__label{color:var(--info-text);white-space:nowrap;grid-row:1/span 2;align-items:center;gap:6px;font-size:13px;font-weight:700;display:inline-flex}.teaching-aside--pitfall .teaching-aside__label{color:var(--warning-text)}.teaching-aside__icon{background:0 0;border:1px solid;border-radius:50%;place-items:center;width:16px;height:16px;font-family:Georgia,serif;font-size:10px;font-weight:700;display:inline-grid}.teaching-aside__title{color:var(--text-primary);margin:0;font-size:13px;font-weight:700;line-height:1.45}.teaching-aside p{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.7}.lesson-nav{border-top:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;padding-top:24px;display:grid}.lesson-nav__link{border:1px solid var(--line);background:var(--surface);border-radius:9px;flex-direction:column;justify-content:center;min-height:65px;padding:8px 35px 8px 13px;transition:border-color .16s,background-color .16s;display:flex;position:relative}.lesson-nav__link:hover{border-color:var(--border-blue);background:var(--surface-blue)}.lesson-nav__link--previous{padding-left:35px;padding-right:13px}.lesson-nav__link.is-disabled{visibility:hidden}.lesson-nav__direction{color:var(--ink-muted);margin-bottom:3px;font-size:10px}.lesson-nav__link strong{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650;overflow:hidden}.lesson-nav__arrow{color:var(--blue);font-size:16px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.lesson-nav__link--previous .lesson-nav__arrow{left:12px;right:auto}.complete-button{border:1px solid var(--border-teal);background:var(--surface-teal);min-height:42px;color:var(--teal);cursor:pointer;white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:7px;padding:8px 15px;font-size:11px;font-weight:700;transition:background-color .16s,border-color .16s,transform .16s;display:inline-flex}.complete-button:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-1px)}.complete-button.is-completed{border-color:var(--teal);background:var(--teal)}.complete-button.is-completed,.complete-button.is-completed span{color:var(--on-accent)}@keyframes packet-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes packet-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.16)}}@keyframes packet-out{0%{opacity:.75;transform:translate(0)}to{opacity:1;transform:translate(20px)}}@media (width<=680px){.code-block{margin:29px 0}.code-block__header{padding-inline:14px}.code-block pre{padding:16px 14px 18px;font-size:10px}.visualization-section{border-radius:12px;margin-inline:-1px;padding:17px 13px}.visualization-toolbar{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:17px;padding-bottom:14px}.visualization-toolbar__actions{width:100%}.visualization-toolbar__actions .button{flex:1}.lesson-insights{grid-template-columns:1fr}.lesson-nav{grid-template-columns:1fr 1fr;gap:9px}.complete-button{grid-area:1/1/auto/-1;width:100%}.lesson-nav__link{min-width:0}.lesson-nav__link--previous{grid-area:2/1}.lesson-nav__link--next{grid-area:2/2}}.lesson-sequence{flex-direction:column;padding:38px 0 18px;display:flex}.lesson-sequence>.lesson-section{margin:0}.lesson-sequence>.visualization-section{margin:4px 0 39px}.compare-split{border-top:1px solid var(--border-subtle);margin:37px 0;padding:25px 0 0}.compare-split__grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.compare-split__column{border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface);min-width:0;padding:19px 21px}.compare-split__label{color:var(--accent-primary);margin-bottom:11px;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:750;display:inline-block}.compare-split__column:nth-child(2) .compare-split__label{color:var(--accent-info)}.compare-split__column h3{color:var(--text-primary);margin-bottom:12px;font-size:15px}.compare-split__column li{gap:var(--space-2);margin-top:var(--space-2);color:var(--text-muted);align-items:flex-start;font-size:11px;line-height:1.6;display:flex}.compare-split__column li:before{background:var(--border-emphasis);content:"";border-radius:50%;flex:none;width:5px;height:5px;margin-top:7px}.takeaway{border:1px solid var(--takeaway-border);border-radius:var(--radius-section);background:var(--takeaway-bg);grid-template-columns:30px minmax(0,1fr);gap:13px;margin:31px 0 38px;padding:16px 18px;display:grid}.takeaway__mark{background:var(--takeaway-title);width:27px;height:27px;color:var(--on-accent);border-radius:50%;place-items:center;font-family:SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1;display:grid}.takeaway h2{color:var(--takeaway-title);letter-spacing:-.025em;margin:5px 0 4px;font-size:17px}.takeaway p{color:var(--text-secondary);margin:0;font-size:13px;line-height:1.7}.takeaway__list{gap:5px;margin-top:9px;display:grid}.takeaway__list li{color:var(--text-secondary);font-size:12px}.takeaway__list li:before{color:var(--takeaway-title);content:"✓";margin-right:7px;font-weight:700}@media (width<=680px){.lesson-sequence{padding-top:29px}.compare-split{margin:29px 0;padding-top:21px}.compare-split__grid{grid-template-columns:1fr}.compare-split__column{padding:15px 16px}.takeaway{grid-template-columns:25px minmax(0,1fr);gap:10px;margin:24px 0 30px;padding:14px}.takeaway__mark{width:23px;height:23px;font-size:12px}.takeaway h2{font-size:16px}.takeaway p{font-size:12px}.teaching-aside{padding:9px 12px;display:block}.teaching-aside__title{margin-top:4px}.teaching-aside p{margin-top:3px;font-size:13px}}