.how-react-works-lesson .render-commit-panes{display:grid;grid-template-columns:1fr 1fr}.how-react-works-lesson .render-commit-panes>.runtime-pane+.runtime-pane{border-left:1px solid var(--cf-color-border)}.how-react-works-lesson .render-commit-stage{position:relative}.how-react-works-lesson .render-commit-page{padding:var(--cf-space-250) var(--cf-space-350);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-150);background:var(--cf-color-surface);color:var(--cf-color-text);font-size:var(--cf-font-size-325)}.how-react-works-lesson .render-commit-page p{margin:var(--cf-space-100) 0}.how-react-works-lesson .render-commit-page ul{margin:var(--cf-space-100) 0;padding-left:var(--cf-space-500)}.how-react-works-lesson .render-commit-page li{margin:0}.how-react-works-lesson .render-commit-page button{margin:var(--cf-space-100) var(--cf-space-150) 0 0;padding:var(--cf-space-050) var(--cf-space-250);border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-100);background:var(--cf-color-surface-raised);color:var(--cf-color-text);font:inherit;font-size:var(--cf-font-size-300);cursor:pointer}.how-react-works-lesson .render-commit-page button:hover{border-color:var(--cf-color-border-hover)}.how-react-works-lesson .render-commit-flashes{position:absolute;inset:0;pointer-events:none}.how-react-works-lesson .render-commit-flash{position:absolute;border:2px solid var(--cf-color-primary);border-radius:var(--cf-radius-100);background:var(--cf-color-primary-wash);opacity:0;animation:render-commit-flash calc(var(--cf-duration-slower)*3) var(--cf-ease-out)}.how-react-works-lesson .render-commit-steps{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:0;padding:0;list-style:none;counter-reset:step}.how-react-works-lesson .render-commit-steps li{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);margin:0;padding:var(--cf-space-200) var(--cf-space-300);border:1px solid var(--cf-color-border-control);border-radius:var(--cf-radius-150);background:var(--cf-color-surface);color:var(--cf-color-text-secondary);font-size:var(--cf-font-size-300);counter-increment:step}.how-react-works-lesson .render-commit-steps strong{color:var(--cf-color-text)}.how-react-works-lesson .render-commit-steps strong:before{content:counter(step) ". "}.how-react-works-lesson .render-commit-chips{display:flex;flex-wrap:wrap;gap:var(--cf-space-100)}.how-react-works-lesson .render-commit-chips code{font-size:var(--cf-font-size-275);overflow-wrap:anywhere}.how-react-works-lesson .render-commit-totals{margin:var(--cf-space-300) 0 0;padding:0;color:var(--cf-color-text-tertiary);font-size:var(--cf-font-size-275)}@media(max-width:768px){.how-react-works-lesson .render-commit-panes{grid-template-columns:1fr}.how-react-works-lesson .render-commit-panes>.runtime-pane+.runtime-pane{border-left:0;border-top:1px solid var(--cf-color-border)}}@media(prefers-reduced-motion:reduce){.how-react-works-lesson .render-commit-flash{animation:none;opacity:1}}@keyframes render-commit-flash{0%,40%{opacity:1}to{opacity:0}}