/* Lesson 03 specific visuals. Generic lesson layout, labs, and slide viewer live in ../../shared/lesson-common.css. */
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-badges span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);font-size:.78rem}.hero-io{height:500px;position:relative;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle at 74% 18%,rgba(36,204,197,.27),transparent 38%),linear-gradient(145deg,var(--paper),var(--soft));box-shadow:var(--shadow);overflow:hidden}.io-node{position:absolute;z-index:3;width:150px;min-height:112px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:0 16px 38px rgba(18,55,61,.15);padding:16px;display:flex;flex-direction:column}.io-node small{color:var(--teal);font:800 .72rem ui-monospace,monospace}.io-node b{font-size:1.7rem;line-height:1.1;margin:8px 0}.io-node span{color:var(--muted)}.io-node.ask{left:7%;top:12%;transform:rotate(-3deg)}.io-node.memory{right:7%;top:14%;transform:rotate(3deg)}.io-node.speak{right:9%;bottom:9%;transform:rotate(-2deg)}.io-arrow{position:absolute;left:45%;top:23%;font-size:2.2rem;color:var(--orange)}.loop-orbit{position:absolute;left:12%;bottom:9%;width:210px;height:210px;border:3px dashed color-mix(in srgb,var(--teal) 45%,transparent);border-radius:50%;animation:orbitSpin 18s linear infinite}.loop-orbit strong{position:absolute;inset:0;display:grid;place-items:center;font:900 2rem ui-monospace,monospace;color:var(--teal)}.loop-orbit i{position:absolute;width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--orange);transform:translate(-50%,-50%)}.loop-orbit i:nth-child(1){left:50%;top:0}.loop-orbit i:nth-child(2){left:97%;top:35%}.loop-orbit i:nth-child(3){left:80%;top:90%}.loop-orbit i:nth-child(4){left:20%;top:90%}.loop-orbit i:nth-child(5){left:3%;top:35%}@keyframes orbitSpin{to{transform:rotate(360deg)}}.hero-io svg{position:absolute;inset:auto 4% 5%;width:92%;height:44%}.hero-io svg path{fill:none;stroke:var(--teal2);stroke-width:7;stroke-linecap:round}.hero-io svg .dash{stroke:var(--line);stroke-width:3;stroke-dasharray:10 11}
.input-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);gap:22px}.input-machine{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px;box-shadow:0 12px 35px rgba(21,56,61,.05);display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}.machine-step{min-height:155px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--soft);opacity:.46;transform:scale(.97);transition:.25s}.machine-step.active,.machine-step.done{opacity:1;transform:none}.machine-step.active{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 12%,transparent)}.machine-step.done{background:color-mix(in srgb,var(--teal) 8%,var(--paper))}.machine-step>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}.machine-step span{display:block;font-weight:800;margin:12px 0 8px}.machine-step code,.machine-step input{display:block;width:100%;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--ink);padding:9px;font:700 .82rem/1.4 ui-monospace,monospace}.machine-arrow{color:var(--teal);font-size:1.5rem}.input-machine>button{grid-column:1/-1;justify-self:center;border:0;border-radius:10px;background:var(--teal);color:#fff;padding:10px 17px;cursor:pointer}.concept-grid.three{grid-template-columns:1fr;display:grid;gap:12px;margin:0}.concept-grid.three article code{display:block;margin:10px 0;padding:9px;border-radius:8px;background:var(--soft);font-size:.8rem;color:var(--orange)}
.output-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.output-compare>button{min-height:125px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink);padding:16px;text-align:left;cursor:pointer;transition:.2s}.output-compare>button.active{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 12%,transparent);transform:translateY(-2px)}.output-compare code{display:block;color:var(--orange);font-weight:900;margin-bottom:8px}.output-compare span{color:var(--muted)}.output-screen{grid-column:1/-1;border-radius:18px;background:var(--code);color:#e8f6f5;padding:19px;min-height:160px}.output-screen small{color:#61d6d2}.output-screen pre{font:700 1rem/1.6 ui-monospace,monospace}.plain-explanation{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.plain-explanation article{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:18px}.plain-explanation h3{margin:0 0 8px}.plain-explanation p{margin:0;color:var(--muted)}
.format-stage{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;border:1px solid var(--line);border-radius:23px;background:var(--paper);padding:26px;box-shadow:0 12px 35px rgba(21,56,61,.05)}.format-number{grid-row:1/3;border-radius:18px;background:linear-gradient(145deg,var(--soft),var(--paper));display:flex;min-height:220px;flex-direction:column;align-items:center;justify-content:center;text-align:center}.format-number>span{font-size:4.5rem;color:var(--teal)}.format-number b{font:800 .9rem ui-monospace,monospace}.format-number small{color:var(--muted)}.format-selector{display:flex;gap:7px;flex-wrap:wrap}.format-selector button{border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);padding:8px 10px;cursor:pointer}.format-selector button.active{background:var(--teal);border-color:var(--teal);color:#fff}.format-screen{border:1px solid var(--line);border-radius:16px;background:var(--code);color:#e7f6f5;padding:17px}.format-screen small{color:#63d6d1;display:block}.format-screen strong{display:block;font:900 1.6rem ui-monospace,monospace;margin-top:18px;word-break:break-all}#formatExplanation{grid-column:2;color:var(--muted);margin:0}.callout{margin-top:18px;border-left:5px solid var(--orange);background:color-mix(in srgb,var(--orange) 7%,var(--paper));padding:17px 19px;border-radius:0 13px 13px 0}.callout p{margin:4px 0 0;color:var(--muted)}
.fprintf-anatomy{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:26px}.fprintf-code{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font:800 1.15rem ui-monospace,monospace}.fprintf-code mark{background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--ink);padding:10px;border-radius:9px}.fprintf-code em{font-style:normal;color:var(--teal)}.anatomy-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:24px}.anatomy-labels div{border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}.anatomy-labels b{display:block;font:900 1.4rem ui-monospace,monospace;color:var(--orange)}.anatomy-labels span{color:var(--muted);font-size:.8rem}.placeholder-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:18px 0}.placeholder-grid article{border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:14px;text-align:center}.placeholder-grid code{display:block;color:var(--teal);font-size:1.25rem;font-weight:900}.placeholder-grid b{display:block;font-size:.78rem;margin:4px 0}.placeholder-grid span{color:var(--muted);font:700 .75rem ui-monospace,monospace}.fprintf-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,.9fr);gap:18px;border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px}.builder-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.builder-form label{display:flex;flex-direction:column;gap:7px;color:var(--muted)}.builder-form input,.builder-form select{border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);padding:10px}.builder-form label:has(input[type=range]){display:grid;grid-template-columns:1fr auto;align-items:center}.builder-form input[type=range]{grid-column:1/-1;padding:0}.builder-result{display:flex;flex-direction:column;gap:15px}.builder-result code{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--orange);font-weight:800;word-break:break-all}.builder-result pre{flex:1;margin:0;border-radius:12px;background:var(--code);color:#e8f6f5;padding:18px;font:800 1rem ui-monospace,monospace}
.spring-story{display:grid;grid-template-columns:1fr 1fr;gap:20px}.spring-visual{position:relative;min-height:390px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,var(--paper),var(--soft));overflow:hidden}.spring-visual .wall{position:absolute;left:0;top:0;bottom:0;width:48px;background:repeating-linear-gradient(45deg,var(--line),var(--line) 7px,var(--paper) 7px,var(--paper) 14px)}.spring-line{position:absolute;left:48px;top:50%;width:calc(50% - 48px);height:50px;transform:translateY(-50%);background:linear-gradient(160deg,transparent 44%,var(--teal) 45%,var(--teal) 55%,transparent 56%) 0 0/30px 50px repeat-x}.mass{position:absolute;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%);border-radius:17px;background:var(--orange);color:#fff;display:grid;place-items:center;font:900 2.2rem ui-monospace,monospace;box-shadow:0 17px 35px rgba(132,52,18,.25);transition:left .16s linear}.center-line{position:absolute;left:50%;top:12%;bottom:12%;border-left:2px dashed var(--line)}.spring-controls{border:1px solid var(--line);border-radius:24px;background:var(--paper);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:13px}.spring-controls label{border:1px solid var(--line);border-radius:13px;padding:12px;display:flex;flex-direction:column}.spring-controls label span{color:var(--muted);font-size:.78rem}.spring-controls input{margin:12px 0}.spring-controls b{color:var(--teal)}.spring-answer{grid-column:1/-1;border-radius:15px;background:var(--code);color:#e8f6f5;padding:18px;display:grid;grid-template-columns:1fr auto;gap:8px}.spring-answer span{color:#71d9d3}.spring-answer strong{color:#ffae84;font:900 1.05rem ui-monospace,monospace}.step-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:18px}.step-cards article{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:17px}.step-cards article>b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}.step-cards h3{margin:10px 0 4px}.step-cards p{margin:0;color:var(--muted)}
.loop-choice{display:grid;grid-template-columns:1fr 1fr;gap:18px}.loop-choice article{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px}.loop-choice h3{font-size:2rem;margin:14px 0 5px}.loop-choice p{color:var(--muted)}.loop-choice code{display:block;padding:11px;border-radius:10px;background:var(--soft);color:var(--orange);font-weight:900}.loop-choice small{color:var(--muted)}.loop-icon{display:flex;gap:8px}.loop-icon span{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;background:var(--soft);font-weight:900}.loop-icon.fixed span{animation:loopPulse 2.4s infinite}.loop-icon.fixed span:nth-child(2){animation-delay:.35s}.loop-icon.fixed span:nth-child(3){animation-delay:.7s}.loop-icon.fixed span:nth-child(4){animation-delay:1.05s}.loop-icon.condition span:nth-child(1),.loop-icon.condition span:nth-child(3){color:var(--orange)}.loop-icon.condition span:nth-child(2){color:#159467}.loop-icon.condition span:nth-child(4){color:#d34c3d}@keyframes loopPulse{0%,35%,100%{background:var(--soft);transform:none}15%{background:var(--teal);color:#fff;transform:translateY(-5px)}}.decision-strip{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:18px;border:1px solid var(--line);border-radius:14px;background:var(--soft);padding:15px}.decision-strip b{color:var(--orange)}
.for-anatomy{display:grid;grid-template-columns:1fr 1fr;gap:20px}.for-anatomy>code{border-radius:20px;background:var(--code);color:#e7f6f5;padding:28px;font:800 1.2rem/1.9 ui-monospace,monospace}.for-anatomy mark{background:none;color:#55d6cf}.for-anatomy em{font-style:normal;color:#ffac82}.for-anatomy>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.for-anatomy p{margin:0;border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:14px}.for-anatomy p b{display:block;color:var(--teal);font:900 1rem ui-monospace,monospace}.for-anatomy p span{color:var(--muted)}.for-stepper{margin-top:20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:23px;display:grid;grid-template-columns:1.5fr .7fr 1fr 1.4fr;gap:14px;align-items:stretch}.for-list{display:flex;gap:7px;align-items:center}.for-list button{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--ink);font-weight:900}.for-list button.active{background:var(--teal);color:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--teal) 15%,transparent)}.for-list button.done{background:color-mix(in srgb,var(--teal) 12%,var(--paper));color:var(--teal)}.for-memory,.for-body,.for-output{border:1px solid var(--line);border-radius:13px;padding:13px}.for-memory small,.for-body small,.for-output small{display:block;color:var(--muted)}.for-memory strong,.for-body strong{font:900 2rem ui-monospace,monospace;color:var(--orange)}.for-body code{display:block;font-size:.77rem}.for-output pre{margin:8px 0 0;max-height:100px;overflow:auto}.for-stepper>button{border:0;border-radius:9px;background:var(--teal);color:#fff;padding:9px 12px;cursor:pointer}.for-stepper>#forNext{grid-column:2/4}.for-stepper>#forReset{background:var(--soft);color:var(--ink);border:1px solid var(--line)}.warning-card{margin-top:17px;border:1px solid color-mix(in srgb,var(--orange) 40%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--orange) 6%,var(--paper));padding:17px}.warning-card p{margin:5px 0 0;color:var(--muted)}
.table-maker{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px}.table-tabs,.table-controls{display:flex;gap:8px;flex-wrap:wrap}.table-tabs button,.table-controls button{border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);padding:9px 12px;cursor:pointer}.table-tabs button.active{background:var(--teal);color:#fff;border-color:var(--teal)}.conversion-formula{margin:18px 0;padding:14px;border-radius:12px;background:var(--code);color:#e8f6f5;text-align:center;font:900 1.05rem ui-monospace,monospace}.conversion-table{max-height:350px;overflow:auto;border:1px solid var(--line);border-radius:12px;margin-bottom:15px}.conversion-table table{width:100%;border-collapse:collapse}.conversion-table th,.conversion-table td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}.conversion-table th{position:sticky;top:0;background:var(--soft);z-index:1}.conversion-table tr.new-row{animation:rowIn .3s both}@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}}.table-rule{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:18px}.table-rule article{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--paper)}.table-rule b{color:var(--teal)}.table-rule p{margin:5px 0 0;color:var(--muted)}
.while-flow{max-width:720px;margin:auto;border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px;display:flex;flex-direction:column;align-items:center}.flow-node{min-width:170px;padding:12px 17px;border:1px solid var(--line);border-radius:999px;background:var(--soft);text-align:center;font-weight:900}.flow-node.condition{border-radius:14px;background:color-mix(in srgb,var(--orange) 10%,var(--paper));border-color:color-mix(in srgb,var(--orange) 42%,var(--line))}.flow-node.action{background:color-mix(in srgb,var(--teal) 9%,var(--paper))}.flow-node.stop{background:var(--ink);color:var(--paper)}.flow-arrow{color:var(--teal);font-size:1.6rem}.flow-branches{width:70%;display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem}.flow-row{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.flow-row>div{text-align:center}.flow-arrow.curve{transform:rotate(-35deg)}.sum-machine{display:grid;grid-template-columns:auto auto auto 1fr;gap:12px;align-items:center;margin-top:20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:22px}.sum-box{width:130px;border:1px solid var(--line);border-radius:15px;background:var(--soft);padding:14px;text-align:center}.sum-box small{display:block;color:var(--muted)}.sum-box strong{font:900 2.2rem ui-monospace,monospace;color:var(--orange)}.sum-plus{font-size:2rem;color:var(--teal)}.sum-history{min-height:100px;border:1px solid var(--line);border-radius:14px;padding:12px}.sum-history small{color:var(--muted)}#sumHistory{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}#sumHistory i{font-style:normal;padding:4px 7px;border-radius:7px;background:var(--soft);font-size:.76rem}.sum-machine>button{border:0;border-radius:9px;background:var(--teal);color:#fff;padding:9px 12px;cursor:pointer}.sum-machine>#sumNext{grid-column:1/3}.sum-machine>#sumAuto{grid-column:3/4}.sum-machine>#sumReset{grid-column:4;background:var(--soft);color:var(--ink);border:1px solid var(--line)}.loop-safety{margin-top:18px;border-left:5px solid var(--orange);padding:18px 20px;background:color-mix(in srgb,var(--orange) 6%,var(--paper));border-radius:0 14px 14px 0}.loop-safety ol{margin:8px 0}.loop-safety p{color:var(--muted);margin-bottom:0}
.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pattern-grid article{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:23px}.pattern-grid h3{margin-top:0}.pattern-grid p{color:var(--muted)}.factorial-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:25px 0}.factorial-row span{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:var(--soft);border:1px solid var(--line);font-weight:900}.factorial-row i{font-style:normal;color:var(--teal)}.factorial-row b{color:var(--orange);font-size:1.2rem}.validation-queue{display:flex;gap:7px}.validation-queue button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--ink);font-weight:900}.validation-queue button.used{opacity:.35}.validation-queue button.current{background:var(--orange);color:#fff;border-color:var(--orange)}.validation-screen{margin:14px 0;border-radius:12px;background:var(--code);color:#e8f6f5;padding:14px}.validation-screen code{display:block;color:#64dad4}.validation-screen strong{display:block;margin-top:10px}.validation-demo>button{border:1px solid var(--line);border-radius:9px;background:var(--teal);color:#fff;padding:8px 10px;cursor:pointer}.validation-demo>#validationReset{background:var(--soft);color:var(--ink)}.array-condition{margin-top:18px;border:1px solid var(--line);border-radius:17px;background:var(--paper);padding:18px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.array-condition p{color:var(--muted);margin-bottom:0}.truth-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.truth-row span{padding:7px 9px;border-radius:8px;background:rgba(23,159,102,.11);color:#12885c}.truth-row b{color:var(--teal)}
.timing-race{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:24px}.race-lane{display:grid;grid-template-columns:220px 1fr 100px;gap:14px;align-items:center;margin-bottom:13px}.race-lane header b{display:block}.race-lane header span{color:var(--muted);font-size:.78rem}.track{height:54px;border-radius:999px;background:var(--soft);position:relative;overflow:hidden}.track::after{content:"";position:absolute;right:14px;top:0;bottom:0;border-right:4px dashed var(--line)}.track i{position:absolute;left:5px;top:50%;transform:translateY(-50%);font-size:1.7rem;transition:left 1s cubic-bezier(.2,.8,.2,1)}.timing-race>button{border:0;border-radius:10px;background:var(--teal);color:#fff;padding:10px 15px;cursor:pointer}.timing-race>p{color:var(--muted)}.stopwatch-anatomy{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:17px}.stopwatch-anatomy code{color:var(--orange);font-weight:900}.stopwatch-anatomy span{color:var(--muted)}
.integral-demo{border:1px solid var(--line);border-radius:22px;background:var(--paper);padding:22px}.integral-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.integral-controls label{display:flex;align-items:center;gap:8px;margin-right:auto}.integral-controls input{width:240px}.integral-controls button{border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--ink);padding:8px 11px;cursor:pointer}.integral-controls button:first-of-type{background:var(--teal);color:#fff;border-color:var(--teal)}#integralCanvas{display:block;width:100%;height:auto;max-height:430px;margin:18px 0;border:1px solid var(--line);border-radius:15px;background:var(--paper)}.integral-readout{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.integral-readout div{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:11px}.integral-readout small{display:block;color:var(--muted)}.integral-readout strong{font:900 1.1rem ui-monospace,monospace;color:var(--orange)}.rectangle-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:17px}.rectangle-steps article{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:15px}.rectangle-steps b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}.rectangle-steps p{margin:8px 0 0;color:var(--muted)}
.vectorization-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}.vector-method{border:1px solid var(--line);border-radius:21px;background:var(--paper);padding:21px}.vector-method header{display:flex;justify-content:space-between}.vector-method header button{border:0;border-radius:8px;background:var(--teal);color:#fff;padding:7px 11px;cursor:pointer}.vector-cells{display:flex;gap:6px;margin:20px 0}.vector-cells i{width:48px;height:48px;border:1px solid var(--line);border-radius:9px;background:var(--soft);display:grid;place-items:center;font-style:normal;font-weight:900;transition:.2s}.vector-cells i.active{background:var(--orange);color:#fff;transform:translateY(-5px);box-shadow:0 8px 18px rgba(177,73,29,.2)}.vector-method code{display:block;padding:13px;border-radius:10px;background:var(--code);color:#e8f6f5;font:.78rem/1.6 ui-monospace,monospace}.vector-result{display:flex;gap:5px;min-height:50px;margin-top:13px}.vector-result i{width:42px;height:42px;border-radius:8px;background:color-mix(in srgb,var(--teal) 12%,var(--paper));border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--teal);animation:pop .22s both}.versus{align-self:center;font-weight:900;color:var(--orange)}.dot-reminder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.dot-reminder div{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:15px;text-align:center}.dot-reminder b{display:block;color:var(--orange);font:900 1.5rem ui-monospace,monospace}.dot-reminder span{color:var(--muted)}.vector-explanation{margin-top:14px;border-left:5px solid var(--teal);padding:15px 18px;background:color-mix(in srgb,var(--teal) 6%,var(--paper));border-radius:0 13px 13px 0}.vector-explanation p{margin:0;color:var(--muted)}
.vector-integral .code-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.code-steps article{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:16px}.code-steps article>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff}.code-steps code{display:block;margin:11px 0;color:var(--orange);font-weight:900;word-break:break-all}.code-steps p{margin:0;color:var(--muted)}.equivalence{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:22px}.equivalence>div{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:17px;min-width:250px;text-align:center}.equivalence div b,.equivalence div span{display:block}.equivalence div span{color:var(--muted)}.equivalence>strong{font-size:2rem;color:var(--teal)}
.lesson3-summary div span{display:block;color:var(--muted);font-size:.78rem}.cheat-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:24px}.cheat-sheet article{border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:16px}.cheat-sheet h3{margin:0 0 10px;color:var(--teal)}.cheat-sheet code{display:block;padding:7px 9px;border-radius:7px;background:var(--soft);margin:5px 0;font-size:.78rem;white-space:pre-wrap}
@media(max-width:1100px){.input-story,.fprintf-builder,.spring-story{grid-template-columns:1fr}.input-machine{grid-template-columns:1fr}.machine-arrow{transform:rotate(90deg);justify-self:center}.plain-explanation,.placeholder-grid,.step-cards,.rectangle-steps,.vector-integral .code-steps{grid-template-columns:repeat(2,1fr)}.format-stage{grid-template-columns:1fr}.format-number{grid-row:auto}.format-selector,.format-screen,#formatExplanation{grid-column:1}.anatomy-labels{grid-template-columns:repeat(3,1fr)}.for-stepper{grid-template-columns:1fr 1fr}.for-stepper>#forNext,.for-stepper>#forReset{grid-column:auto}.race-lane{grid-template-columns:170px 1fr 80px}.integral-readout{grid-template-columns:repeat(2,1fr)}.vectorization-stage{grid-template-columns:1fr}.versus{text-align:center}.cheat-sheet{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hero-io{height:390px}.io-node{width:120px;min-height:95px;padding:11px}.io-node b{font-size:1.2rem}.loop-orbit{width:155px;height:155px}.loop-orbit i{width:31px;height:31px}.output-compare,.plain-explanation,.placeholder-grid,.step-cards,.table-rule,.pattern-grid,.dot-reminder,.rectangle-steps,.vector-integral .code-steps,.cheat-sheet{grid-template-columns:1fr}.format-stage,.fprintf-anatomy,.fprintf-builder{padding:18px}.anatomy-labels{grid-template-columns:repeat(2,1fr)}.builder-form{grid-template-columns:1fr}.spring-controls{grid-template-columns:1fr}.spring-answer{grid-column:1}.loop-choice{grid-template-columns:1fr}.for-anatomy{grid-template-columns:1fr}.for-anatomy>div{grid-template-columns:1fr}.for-stepper{grid-template-columns:1fr}.for-list{justify-content:center}.sum-machine{grid-template-columns:1fr 1fr}.sum-history{grid-column:1/-1}.sum-machine>#sumNext,.sum-machine>#sumAuto,.sum-machine>#sumReset{grid-column:auto}.array-condition{grid-template-columns:1fr}.race-lane{grid-template-columns:1fr}.track{order:2}.race-lane strong{order:3}.integral-controls input{width:150px}.integral-readout{grid-template-columns:1fr}.equivalence{flex-direction:column}.lab-input-head{align-items:flex-start;flex-wrap:wrap}.lab-input-head small{width:100%}.lab-input-list label{grid-template-columns:1fr 80px auto}}