.grid-operation{background:#f0f5f1;scroll-margin-top:110px}.operation-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:7vw;align-items:end;margin-bottom:40px}.operation-heading p{max-width:470px;color:#50645a}.operation-heading h2{margin-bottom:0}.operation-scenarios{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}.operation-scenarios button,.runtime-step{font:inherit;background:transparent;border:1px solid #afc4b8;padding:12px 18px;color:#244f46;cursor:pointer}.operation-scenarios button[aria-pressed=true]{background:#244f46;border-color:#244f46;color:#fff}.runtime-environment{border:1px solid #b8cdc0;background:#f9fbfa;padding:25px;max-width:1440px;margin:auto}.runtime-boundary{display:flex;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.08em;color:#50645a;padding-bottom:30px}.runtime-track{display:grid;grid-template-columns:1fr 24px 1fr 24px 1.1fr 24px 1fr 24px 1fr;align-items:center}.runtime-node{min-width:0;width:100%;text-align:left;background:#fff;border:1px solid #b8cdc0;padding:18px 12px;font:inherit;color:#263c33;cursor:pointer;min-height:170px;transition:background .35s,border-color .35s,transform .35s}.runtime-node .runtime-index{display:block;font-size:9px;letter-spacing:.035em;min-height:28px}.runtime-node strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin-bottom:12px}.runtime-node small{display:block;font-size:11px;line-height:1.5;min-height:32px;color:#62746b}.runtime-state{display:block;font-size:10px;margin-top:15px;text-transform:uppercase;letter-spacing:.07em}.runtime-queue{background:#edf3ef;border-style:dashed}.runtime-node.active{background:#244f46;color:#fff;border-color:#244f46;transform:translateY(-4px)}.runtime-node.active small{color:#dbe9e1}.runtime-node.issue{background:#f6eee0;color:#634c23;border-color:#b18c52}.runtime-node.issue small{color:#806438}.runtime-connector{height:1px;background:#b8cdc0;position:relative;overflow:visible}.runtime-connector:after{content:'';position:absolute;right:0;top:-3px;width:5px;height:5px;border-top:1px solid #739784;border-right:1px solid #739784;transform:rotate(45deg)}.runtime-connector i{position:absolute;width:5px;height:5px;border-radius:50%;background:#437e68;top:-2px;left:0;opacity:0}.runtime-connector.active i{opacity:1;animation:runtime-packet 1.6s linear infinite}.runtime-history{border-top:1px dashed #acc3b4;margin-top:35px;padding:20px 0 5px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;font-size:12px;color:#586e60}.runtime-history strong{font-weight:500;color:#244f46}.runtime-history>span:last-child{margin-left:auto}.history-dot{width:8px;height:8px;border-radius:50%;background:#9db4a6}.runtime-history.active .history-dot{background:#437e68;box-shadow:0 0 0 5px #e1ede5}.runtime-controls{display:flex;align-items:center;gap:12px;border-top:1px solid #dae5de;margin-top:20px;padding-top:20px}.runtime-controls .button{padding:12px 16px;background:transparent;min-height:42px;font-size:12px}.runtime-step{padding:10px 15px}.runtime-demo-label{margin-left:auto;font-size:9px;letter-spacing:.08em;color:#66796e}#runtime-counter{font-size:11px;white-space:nowrap}.runtime-explanation{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding-top:35px;max-width:1440px;margin:auto}.runtime-explanation h3{font-size:32px;line-height:1.2;margin:10px 0 15px}.runtime-explanation p{color:#50645a}.runtime-inspector{min-width:0;padding:24px;background:#fff;border:1px solid #c7d9ce}.runtime-inspector pre{font-size:12px;line-height:1.8;margin:15px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;min-height:125px}.runtime-footnote{max-width:950px;font-size:12px;color:#5a7062;margin-top:25px}.runtime-docs{display:flex;gap:25px;flex-wrap:wrap;font-size:12px;color:#244f46}.runtime-docs a{text-decoration:underline;text-underline-offset:4px}.grid-operation.motion-stopped .runtime-connector i{animation-play-state:paused}@keyframes runtime-packet{from{left:0}to{left:100%}}@media(max-width:1000px){.runtime-track{grid-template-columns:1fr}.runtime-node{min-height:0;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:16px 20px}.runtime-node .runtime-index{min-height:0;grid-column:1}.runtime-node strong{grid-column:1;font-size:22px;margin:5px 0}.runtime-node small{grid-column:2;grid-row:1/3;align-self:center;min-height:0}.runtime-state{grid-column:2;grid-row:3;margin:0}.runtime-connector{width:1px;height:22px;margin-left:50%}.runtime-connector:after{right:-2px;top:auto;bottom:0;transform:rotate(135deg)}.runtime-connector i{left:-2px;top:0}.runtime-connector.active i{animation-name:runtime-packet-down}.runtime-node.active{transform:none}.runtime-boundary{padding-bottom:20px}.runtime-demo-label{display:none}.runtime-explanation{grid-template-columns:1fr;gap:20px}.operation-heading{grid-template-columns:1fr;gap:20px}.runtime-history>span:last-child{margin-left:0}@keyframes runtime-packet-down{from{top:0}to{top:100%}}}@media(max-width:600px){.runtime-environment{padding:16px}.runtime-boundary{display:block;font-size:10px}.runtime-boundary span{display:block;margin-bottom:8px}.runtime-node{padding:14px}.operation-scenarios button{flex:1;font-size:12px}.runtime-controls{gap:7px}.runtime-controls .button{padding:10px;font-size:11px}.runtime-step{padding:10px}.runtime-history{gap:10px}.runtime-inspector{padding:18px}}@media(prefers-reduced-motion:reduce){.runtime-node{transition:none}.runtime-connector.active i{animation:none}}
.grid-operation.offscreen .runtime-connector i{animation-play-state:paused}