.learning-simulator{padding:46px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}.learning-heading h2{font-size:38px;letter-spacing:-.045em}.learning-heading>p{font-size:17px;color:var(--muted);margin-top:12px;line-height:1.6}.learning-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 28px}.learning-controls .button{font-size:13px;min-height:43px;padding:11px 18px}.learning-controls svg{width:16px;height:16px}.learning-speed{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-left:8px}.learning-speed select,.learning-example select{background:#050705;color:var(--text);font:12px var(--mono);padding:9px 12px;border:1px solid #3b443e;border-radius:0}.learning-timeline{display:flex;list-style:none;padding:0 0 3px;margin:0 0 25px;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3b5143 #000}.learning-timeline::before{content:'';position:absolute;top:10px;left:5%;right:5%;height:1px;background:#344038;pointer-events:none}.learning-timeline li{flex:1;min-width:94px;position:relative;text-align:center}.phase-step{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:var(--muted);padding:0 6px 8px;line-height:1.35;font:11px var(--sans)}.phase-step:hover{color:var(--text)}.phase-dot{display:flex;justify-content:center;align-items:center;width:21px;height:21px;border:1px solid #66756b;background:#000;border-radius:50%;font:10px var(--mono);z-index:1}.phase-step.is-current{color:var(--green)}.phase-step.is-current .phase-dot{border-color:var(--green);background:var(--green);color:#000}.phase-step.is-complete .phase-dot{border-color:var(--green);color:var(--green)}.learning-stage{border:1px solid var(--line)}.learning-example{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--line)}.learning-example-info{display:flex;align-items:center;gap:18px;min-width:0}.learning-example canvas{display:block;width:46px;height:46px;image-rendering:pixelated;flex-shrink:0;border:1px solid #47554c}.learning-example-info p{font-size:14px;line-height:1.6}.learning-example-actions{display:flex;align-items:center;gap:26px;flex-shrink:0}.learning-example-actions>.mono{font-size:11px;color:var(--muted)}.learning-example-actions button{background:none;color:var(--text);border:0;border-bottom:1px solid #67766c;padding:0 0 4px;font:12px var(--sans);gap:8px}.learning-example-actions button:hover{color:var(--green)}.learning-example-actions button svg{width:15px;height:15px}#learning-label-control{font-size:12px;color:var(--muted);margin-top:7px}#learning-label-control select{padding:5px;margin-left:8px;font-size:11px}.learning-diagram-shell{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3e5546 #000;padding:12px 0 0}.learning-graph{display:block;width:100%;min-width:740px;height:auto;aspect-ratio:1120/520;stroke:none;overflow:visible}.learning-graph .layer-title{fill:var(--text);stroke:none;font:500 15px var(--sans);letter-spacing:-.015em}.learning-connection{fill:none;stroke-linecap:round;transition:opacity .15s}.learning-signal{stroke:none;pointer-events:none}.learning-node{cursor:pointer;outline:none}.learning-node .node-hit{fill:transparent;stroke:none}.learning-node .node-circle{fill:#030604;stroke:#20fc8f;stroke-width:1.5}.learning-node .node-ring{fill:none;stroke:#f2f5f2;stroke-width:1.5;opacity:0}.learning-node:hover .node-ring,.learning-node:focus-visible .node-ring{opacity:1!important;stroke:#f2f5f2}.learning-node:focus-visible .node-ring{stroke-width:2.5}.learning-node .node-digit{fill:var(--text);stroke:none;font:13px var(--mono);pointer-events:none}.learning-node .node-value{fill:#c1cec5;stroke:none;font:11px var(--mono);pointer-events:none}.learning-node .node-index{fill:#83998b;stroke:none;font:10px var(--mono);pointer-events:none}.learning-explanation{padding:25px 24px 18px;border-top:1px solid var(--line);min-height:235px}.learning-step-count{font-size:10px;color:var(--green);margin-bottom:8px}.learning-explanation h3{font-size:29px;line-height:1.2;letter-spacing:-.035em}.learning-explanation>p:not(.learning-step-count){font-size:15px;color:var(--muted);line-height:1.7;margin-top:12px;max-width:950px}.learning-explanation .learning-formula{font:14px var(--mono)!important;color:var(--text)!important;overflow-wrap:anywhere}.learning-explanation .learning-calculation{color:var(--green)!important;font-size:13px!important;overflow-wrap:anywhere}.learning-explanation .learning-inspection{font:11px var(--mono)!important;color:#b6c5bb!important;overflow-wrap:anywhere}.learning-footnotes{padding:0 24px 22px;max-width:1000px}.learning-footnotes p{font-size:11px;color:#899b8f;line-height:1.65}.learning-footnotes p+p{margin-top:5px}.learning-mobile-hint{display:none}
@media(max-width:1100px){.learning-heading h2{font-size:34px}.learning-example-actions{gap:16px}.learning-example-actions>.mono{font-size:10px}.learning-timeline li{min-width:85px}.phase-step{font-size:10px}.learning-graph .layer-title{font-size:16px}}
@media(max-width:760px){.learning-simulator{padding:34px 0}.learning-heading h2{font-size:29px;line-height:1.15}.learning-heading>p{font-size:14px}.learning-controls{gap:9px;margin:22px 0}.learning-controls .button{font-size:11px;padding:10px 13px;min-height:40px}.learning-speed{font-size:11px;margin-left:0}.learning-speed select{padding:7px 9px;font-size:11px}.learning-timeline{margin-bottom:18px;padding-bottom:8px}.learning-timeline::before{left:40px;right:auto;width:680px}.learning-timeline li{min-width:85px}.phase-step{font-size:10px}.learning-example{padding:13px;gap:12px;align-items:flex-start;flex-wrap:wrap}.learning-example-info{gap:12px}.learning-example-info p{font-size:12px}.learning-example-actions{width:100%;justify-content:space-between;padding-top:8px}.learning-example-actions button{font-size:11px}.learning-example-actions>.mono{font-size:10px}.learning-example canvas{width:42px;height:42px}.learning-graph{min-width:740px}.learning-graph .node-value{font-size:13px}.learning-graph .node-index{font-size:12px}.learning-explanation{padding:20px 15px 16px;min-height:270px}.learning-explanation h3{font-size:23px}.learning-explanation>p:not(.learning-step-count){font-size:13px}.learning-explanation .learning-formula{font-size:11px!important;line-height:1.7!important}.learning-explanation .learning-calculation{font-size:11px!important}.learning-explanation .learning-inspection{font-size:10px!important;line-height:1.8!important}.learning-footnotes{padding:0 15px 18px}.learning-footnotes p{font-size:10px}.learning-mobile-hint{display:block;color:var(--text)!important}}
@media(prefers-reduced-motion:reduce){.learning-connection{transition:none}}