.scene.model-code-loop{height:1440svh;--heading-color:#39ffc1}
.scene.model-code-loop>.sticky{padding-bottom:16px}
.loop-visual{position:relative;flex:1;min-height:0;width:100%;overflow:hidden;border:0;border-radius:0;background:radial-gradient(circle at 50% 53%,#14343a 0,#0c1a22 34%,#080d13 72%)}
.loop-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease}
.model-code-loop[data-stage="0"] .loop-frame-young,.model-code-loop[data-stage="1"] .loop-frame-grown,.model-code-loop[data-stage="2"] .loop-frame-forest{opacity:1;visibility:visible}
.loop-frame-young,.loop-frame-grown{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,14%) minmax(0,1fr);align-items:center;gap:2%;padding:4% 7%}
.loop-subject{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;filter:drop-shadow(0 0 26px #39ffc133)}
.loop-subject img{display:block;width:100%;height:calc(100% - 36px);object-fit:contain;object-position:center bottom}
.loop-subject>span,.loop-code>strong,.loop-forest-labels span{font:700 clamp(12px,1.3vw,17px)/1 var(--mono);letter-spacing:.22em;color:#9ef6e5;text-shadow:0 0 18px #39ffc155}
.loop-subject>span{height:26px}
.loop-frame-grown .loop-subject>span{color:#9ad6ff;text-shadow:0 0 18px #43a9ff66}
.loop-code{align-self:center;min-width:0;padding:clamp(12px,2vw,30px);border:1px solid #2f6472;border-radius:7px;background:#0b1724ee;box-shadow:0 20px 80px #0009,0 0 40px #43a9ff1c;transform:translateY(0)}
.loop-code pre{overflow:hidden;margin:0 0 24px;font:clamp(10px,1.1vw,16px)/1.9 var(--mono);color:#8bd5ff}
.loop-code code span{display:block;white-space:pre}
.loop-frame-young .loop-code code{display:block;clip-path:inset(0 calc(100% - var(--code-reveal,0%)) 0 0)}
.loop-frame-grown .loop-code{border-color:#3a8b85;box-shadow:0 20px 80px #0009,0 0 50px #39ffc11c}
.loop-frame-grown .loop-code pre{color:#91eacf}
.loop-transfer{position:relative;display:flex;align-items:center;justify-content:center;height:100%;min-width:0;color:#39ffc1}
.loop-transfer::before{content:"";position:absolute;left:-8%;right:-8%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#39ffc1,transparent);box-shadow:0 0 14px #39ffc1}
.loop-transfer>span{position:absolute;top:calc(50% - 38px);font:11px var(--mono);letter-spacing:.14em;color:#b7c8d4}
.loop-transfer i{position:absolute;top:calc(50% - 4px);left:0;width:8px;height:8px;border-radius:50%;background:#d4fff4;box-shadow:0 0 18px #39ffc1;animation:loop-travel var(--transfer-duration,2.2s) linear infinite}
.loop-transfer i:nth-of-type(2){animation-delay:calc(var(--transfer-duration,2.2s) / -3)}
.loop-transfer i:nth-of-type(3){animation-delay:calc(var(--transfer-duration,2.2s) * -2 / 3)}
.loop-transfer b{position:absolute;right:-10px;top:calc(50% - 25px);font:38px/1 var(--mono);font-weight:400;text-shadow:0 0 14px #39ffc1}
.loop-transfer-back{color:#43a9ff}
.loop-transfer-back::before{background:linear-gradient(90deg,transparent,#43a9ff,transparent);box-shadow:0 0 14px #43a9ff}
.loop-transfer-back i{background:#d9efff;box-shadow:0 0 18px #43a9ff}
.loop-transfer-back b{text-shadow:0 0 14px #43a9ff}
@keyframes loop-travel{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:100%;opacity:0}}
.loop-frame-forest{background:#080a10}
.loop-frame-forest picture{display:block;width:100%;height:100%}
.loop-redwoods{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;transform:scale(var(--forest-scale,.73));transform-origin:center bottom;filter:brightness(calc(.65 + var(--forest-progress,0) * .4));will-change:transform}
.loop-frame-forest::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080a1088,transparent 30%,transparent 70%,#080a1066);pointer-events:none}
.loop-orbit{position:absolute;z-index:1;left:50%;top:43%;width:clamp(112px,16vw,240px);aspect-ratio:1;border:2px dashed #a8fff7;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(0deg);animation:loop-spin var(--orbit-duration,3s) linear infinite;box-shadow:0 0 30px #39ffc144,inset 0 0 30px #43a9ff44;opacity:calc(.35 + var(--forest-progress,0) * .65)}
.loop-orbit::before,.loop-orbit::after{content:"➜";position:absolute;left:50%;font:clamp(18px,2vw,30px)/1 var(--mono);color:#b3fff1;text-shadow:0 0 15px #39ffc1}
.loop-orbit::before{top:-17px}.loop-orbit::after{bottom:-17px;transform:rotate(180deg)}
.loop-orbit span{font:700 clamp(11px,1.3vw,17px)/1.45 var(--mono);letter-spacing:.13em;text-align:center;color:#ecfffb;animation:loop-counterspin var(--orbit-duration,3s) linear infinite;text-shadow:0 0 18px #000}
@keyframes loop-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes loop-counterspin{to{transform:rotate(-360deg)}}
.loop-forest-labels{position:absolute;z-index:1;bottom:10%;left:8%;right:8%;display:flex;justify-content:space-between;pointer-events:none}
.loop-forest-labels span:last-child{color:#9ad6ff;text-shadow:0 0 18px #43a9ff66}
.all-mode .scene.model-code-loop{height:auto}
.all-mode .scene.model-code-loop>.sticky{min-height:760px}
.all-mode .loop-visual{min-height:540px}
@media(max-width:760px){.scene.model-code-loop{height:1384svh}.scene.model-code-loop>.sticky{padding-inline:8px}.loop-frame-young,.loop-frame-grown{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:4px;padding:4% 4%}.loop-code{padding:8px}.loop-code pre{font-size:clamp(5px,1.65vw,9px);line-height:1.7;margin-bottom:10px}.loop-code>strong,.loop-subject>span,.loop-forest-labels span{font-size:10px}.loop-transfer>span{font-size:7px;top:calc(50% - 24px)}.loop-transfer b{font-size:23px;right:-5px;top:calc(50% - 17px)}.loop-transfer i{width:5px;height:5px}.loop-redwoods{object-position:center bottom}.loop-orbit{top:40%;width:100px}.loop-orbit span{font-size:9px}.loop-forest-labels{bottom:8%;left:5%;right:5%}.all-mode .loop-visual{min-height:390px}}
@media(max-width:760px){body:not(.all-mode) .loop-frame-young,body:not(.all-mode) .loop-frame-grown{align-items:end}body:not(.all-mode) .loop-subject,body:not(.all-mode) .loop-transfer{height:48%}body:not(.all-mode) .loop-code{align-self:end;margin-bottom:24%}}
@media(prefers-reduced-motion:reduce){.loop-frame,.loop-redwoods{transition:none;animation:none}.loop-transfer i,.loop-orbit,.loop-orbit span{animation:none!important}}
@media print{.scene.model-code-loop{height:auto!important}.scene.model-code-loop>.sticky{height:auto!important}.loop-visual{height:500px;flex:none}.loop-frame-forest{opacity:1;visibility:visible}.loop-frame-young,.loop-frame-grown{opacity:0;visibility:hidden}}

/* The RSI loop keeps its model and code in the same positions through all three passages. */
.loop-visual{background:radial-gradient(ellipse at 50% 65%,#102930 0,#0b1921 38%,#080d13 76%)}
.loop-visual::after{content:"";position:absolute;z-index:3;inset:0;background:var(--bg);opacity:var(--scene-fade,0);pointer-events:none}
.loop-growth{position:absolute;inset:5% 8% 7%;display:grid;grid-template-columns:minmax(0,1fr) minmax(40px,17%) minmax(0,1fr);gap:3%;align-items:end;opacity:var(--tower-opacity,1);transform:scale(var(--tower-scale,1));transform-origin:center bottom}
.redwood-breathing-room{height:100svh;background:var(--bg)}
.all-mode .loop-visual::after,.all-mode .redwood-breathing-room{display:none}
.loop-redwood-reveal{position:absolute;z-index:2;inset:0;display:block;overflow:hidden;opacity:var(--redwood-opacity,0);pointer-events:none}
.loop-redwood-art{position:absolute;left:0;bottom:0;width:100%;transform:translateY(var(--redwood-pan,0px)) scale(var(--redwood-scale,1));transform-origin:center bottom}
.loop-redwood-art img{position:relative;display:block;width:100%;height:auto;max-width:none}
.loop-redwood-art img+img{margin-top:-6.25%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9.375%);mask-image:linear-gradient(to bottom,transparent,#000 9.375%)}
.model-code-loop[data-stage="2"] .loop-growth{inset:0 8% 5%}
body:not(.all-mode) .scene.model-code-loop>.sticky{padding:0}
body:not(.all-mode) .scene.model-code-loop .loop-visual{position:absolute;inset:0;width:100%;height:100%}
.model-code-loop[data-stage="2"] .loop-stack{gap:4px}
.model-code-loop[data-stage="2"] .loop-model-row,.model-code-loop[data-stage="2"] .loop-code-row{height:calc(5.55556% - 3.77778px);min-height:0}
.model-code-loop[data-stage="2"] .loop-link{opacity:0}
.loop-tower{height:100%;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.loop-stack{width:min(100%,270px);height:calc(100% - 35px);display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:clamp(3px,.65vh,8px);overflow:hidden}
.loop-model-stack{position:relative}
.loop-edge-layer{position:absolute;inset:0;z-index:0;pointer-events:none;display:none}
.loop-edge{position:absolute;display:block;height:2px;transform-origin:left center;background:#43e3a8;box-shadow:0 0 9px #39ffc199;animation:loop-edge-arrive .25s ease-out both}
.model-code-loop[data-stage="1"] .loop-edge-layer,.model-code-loop[data-stage="2"] .loop-edge-layer{display:block}
.loop-label{height:30px;font:700 clamp(12px,1.2vw,17px)/30px var(--mono);letter-spacing:.22em}
.loop-model .loop-label{color:#8effcc;text-shadow:0 0 16px #39ffc166}
.loop-code-tower .loop-label{color:#9ad6ff;text-shadow:0 0 16px #43a9ff66}
.loop-model-row,.loop-code-row{display:none;flex:none;height:clamp(15px,3.2vh,31px);opacity:0;transform:translateY(12px)}
.loop-model-row.is-built,.loop-code-row.is-built{display:flex;opacity:1;transform:translateY(0);animation:loop-rise .35s ease-out both}
.loop-model-row{position:relative;z-index:1;width:min(100%,215px);align-items:center;justify-content:space-between;padding:0 5px}
.loop-model-row::before{content:"";position:absolute;top:50%;left:12px;right:12px;height:2px;background:#267f63;box-shadow:0 0 11px #39ffc177}
.model-code-loop[data-stage="1"] .loop-model-row::before,.model-code-loop[data-stage="2"] .loop-model-row::before{opacity:0}
.loop-node{position:relative;z-index:1;width:clamp(9px,1.2vw,17px);height:clamp(9px,1.2vw,17px);border:2px solid #9affd4;border-radius:50%;background:#38c88e;box-shadow:0 0 10px #39ffc1aa}
.loop-model-row:first-child .loop-node{animation-duration:var(--loop-speed,1.8s);animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.model-code-loop.loop-ready .loop-model-row:first-child .loop-node:nth-child(1){animation-name:loop-node-one}
.model-code-loop.loop-ready .loop-model-row:first-child .loop-node:nth-child(2){animation-name:loop-node-two}
.model-code-loop.loop-ready .loop-model-row:first-child .loop-node:nth-child(3){animation-name:loop-node-three}
.model-code-loop.loop-ready[data-direction="back"] .loop-model-row:first-child .loop-node{animation:none}
.model-code-loop.loop-ready[data-stage="2"] .loop-model-row:first-child .loop-node{animation:none}
.loop-code-row{width:100%;align-items:center;justify-content:center;text-align:center;white-space:nowrap;overflow:hidden;font:clamp(8px,1.15vw,15px)/1 var(--mono);letter-spacing:.12em;color:#8bd5ff;text-shadow:0 0 13px #43a9ff88}
.model-code-loop[data-stage="1"] .loop-code-row.is-built{animation:loop-code-fire var(--loop-speed,1.8s) ease-in-out infinite}
.loop-link{position:relative;align-self:end;height:calc(100% - 30px);display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(7px,1.6vh,16px)}
.loop-link::before{content:"";position:absolute;left:-12%;right:-12%;bottom:calc(30px + clamp(7px,1.6vh,15px));height:2px;background:linear-gradient(90deg,#39ffc1,#91eecf 48%,#43a9ff);box-shadow:0 0 15px #6adbcf88}
.loop-link-caption{position:absolute;bottom:0;width:100%;height:30px;text-align:center;font:700 clamp(12px,1.2vw,17px)/30px var(--mono);letter-spacing:.22em;color:#a7e7ea}
.loop-zap{position:absolute;z-index:2;bottom:calc(30px + clamp(2px,1vh,8px));left:0;width:clamp(9px,1.2vw,15px);height:clamp(9px,1.2vw,15px);border-radius:50%;background:#d9fff2;box-shadow:0 0 8px 3px #39ffc1,0 0 22px 8px #39ffc188;opacity:0}
.model-code-loop.loop-ready .loop-zap{animation:loop-zap-forward var(--loop-speed,1.8s) linear infinite}
.model-code-loop.loop-ready[data-direction="back"] .loop-zap{animation-name:loop-zap-back}
@keyframes loop-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes loop-edge-arrive{from{opacity:.15}to{opacity:.85}}
@keyframes loop-code-fire{0%,55%,100%{color:#8bd5ff;text-shadow:0 0 13px #43a9ff88}18%,42%{color:#e5f7ff;text-shadow:0 0 13px #43a9ff,0 0 27px #43a9ff}}
@keyframes loop-node-one{0%,2%,19%,100%{background:#38c88e;box-shadow:0 0 10px #39ffc1aa}10%{background:#e0fff0;box-shadow:0 0 13px 5px #39ffc1}}
@keyframes loop-node-two{0%,19%,36%,100%{background:#38c88e;box-shadow:0 0 10px #39ffc1aa}27%{background:#e0fff0;box-shadow:0 0 13px 5px #39ffc1}}
@keyframes loop-node-three{0%,36%,53%,100%{background:#38c88e;box-shadow:0 0 10px #39ffc1aa}44%{background:#e0fff0;box-shadow:0 0 13px 5px #39ffc1}}
@keyframes loop-zap-forward{0%,55%{left:0;opacity:0;box-shadow:0 0 8px 3px #39ffc1}58%{opacity:1}96%{left:100%;opacity:1;box-shadow:0 0 8px 3px #43a9ff}100%{left:100%;opacity:0}}
@keyframes loop-zap-back{0%,55%{left:100%;opacity:0;box-shadow:0 0 8px 3px #43a9ff}58%{opacity:1}96%{left:0;opacity:1;box-shadow:0 0 8px 3px #39ffc1}100%{left:0;opacity:0}}
@media(max-width:760px){.loop-growth{inset:7% 4% 8%;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:3px}.model-code-loop[data-stage="2"] .loop-growth{inset:0 4% 5%}.loop-stack{height:calc(100% - 28px)}.loop-label{height:24px;line-height:24px;font-size:10px}.loop-model-row,.loop-code-row{height:clamp(13px,2.7vh,21px)}.loop-model-row{padding:0 2px}.loop-model-row::before{left:8px;right:8px}.loop-code-row{font-size:clamp(5px,1.55vw,9px);letter-spacing:0}.loop-link{height:calc(100% - 24px)}.loop-link-caption{height:24px;line-height:24px;font-size:10px}.loop-link::before{bottom:calc(24px + clamp(6px,1.35vh,10px))}.loop-zap{bottom:calc(24px + clamp(1px,.7vh,5px))}}
/* Crop the landscape artwork into the phone viewport without distorting trees. */
@media(max-width:760px){
 body:not(.all-mode) .scene.model-code-loop{height:892svh}
 body:not(.all-mode) .scene.model-code-loop>.sticky{height:100dvh;min-height:0}
 .loop-redwood-art{left:50%;width:max(100%,90svh);margin-left:min(-50%,-45svh)}
 .loop-redwood-art img{height:auto;object-fit:contain}
 .loop-redwood-art img+img{margin-top:-6.25%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 9.375%);mask-image:linear-gradient(to bottom,transparent,#000 9.375%)}
 .loop-edge,.loop-node{box-shadow:none;animation:none!important}
 .loop-code-row{ text-shadow:none }
 .model-code-loop[data-stage="1"] .loop-code-row.is-built{animation:none}
 .model-code-loop.loop-ready[data-stage="2"] .loop-zap{animation:none}
 .redwood-breathing-room{display:none}
}
@media(prefers-reduced-motion:reduce){.loop-model-row.is-built,.loop-code-row.is-built,.loop-model-row:first-child .loop-node,.loop-zap,.loop-edge{animation:none!important}.loop-zap{left:50%;opacity:1}}
@media print{.loop-growth{inset:5% 8% 7%}.loop-model-row,.loop-code-row{display:flex;opacity:1;animation:none!important}.loop-redwood-reveal{opacity:1}}

.model-code-loop:not(.loop-ready) :is(.loop-node,.loop-code-row,.loop-zap,.loop-edge){animation-play-state:paused!important}

.model-code-loop.loop-ready[data-stage="2"] .loop-redwood-art{will-change:transform}