.lab-frame{width:100%;max-width:none;border:0;border-radius:0;scroll-margin-top:0;background:#040919}.lab-top,.lab-frame>.player,.lab-frame>.chapters{display:none}.lab-frame .stage{width:100%;height:min(68vw,900px)}.motion-accessible{position:absolute;left:-10000px}.motion-accessible:focus{left:20px;top:20px;z-index:30;background:#fff;color:#111;padding:12px}.lab-frame{position:relative}.showcase{padding-top:65px}.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.experiment{min-width:0;border:1px solid #30374a;border-radius:12px;overflow:hidden;background:#0e1220}.experiment-top{padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #30374a;gap:10px;font-size:10px;letter-spacing:1.3px;color:#a6b5cf;min-height:53px}.experiment-top button,.source-status button{border:0;color:#bfcced;background:#222c43;padding:6px 10px;border-radius:4px;font:12px 'Open Sans','Nanum Gothic',sans-serif}.kinetic-preview,.product-preview{height:380px;position:relative;overflow:hidden}.kinetic-preview{background:#c8ff6b;color:#101d17}.kinetic-type{position:absolute;left:7%;top:19%;font-size:clamp(35px,5.2vw,78px);font-weight:800;line-height:1.05;letter-spacing:-.07em;display:flex;flex-direction:column}.kinetic-type span{display:block;will-change:transform}.kinetic-type span:nth-child(2){color:#2e6950}.kinetic-type span:last-child{color:#477555}.kinetic-andori{position:absolute;right:2%;bottom:4%;width:42%;aspect-ratio:1;background:url('/lab/andori-actions.png') 100% 50%/300% 100% no-repeat;filter:drop-shadow(0 15px 10px #133c3b22)}.kinetic-orbit{position:absolute;top:25px;left:7%;font-size:9px;letter-spacing:2px;font-weight:600}.kinetic-foot{position:absolute;bottom:18px;left:7%;right:7%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}.product-preview{background:radial-gradient(ellipse at center,#182863,#080c23 75%)}#product-world{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}#product-world:active{cursor:grabbing}.drag-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#819cd4;font-size:9px;letter-spacing:1.5px;pointer-events:none}#product-fallback{position:absolute;inset:15px;text-align:center}#product-fallback img{height:85%;max-width:85%;object-fit:contain}#product-fallback span{display:block;font-size:12px}.experiment-caption{padding:22px}.experiment-caption h3{margin:0 0 10px;font-size:23px;letter-spacing:-.8px}.experiment-caption p{margin:0;font-size:13px;color:#95a5bf;line-height:1.7}.code-experiment{grid-column:1/-1}.code-experience{display:grid;grid-template-columns:1fr 1fr;background:#0a1020}.code-source{min-width:0;padding:25px;border-right:1px solid #30374a;display:flex;flex-direction:column}.source-title{display:flex;justify-content:space-between;color:#95a9d3;font-size:10px}.source-title span:last-child{color:#b9ed9c;font-size:9px}.code-source pre{color:#b9edb9;font:clamp(10px,1.1vw,15px)/1.8 Consolas,monospace;min-height:235px;white-space:pre-wrap;margin:25px 0 15px}.source-status{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8ba3cd}.source-status button{font-size:10px}.live-result{padding:25px;min-width:0;display:flex;flex-direction:column}.result-browser{padding:12px;background:#232e4a;color:#92a9d3;font-size:9px;display:flex;gap:24px;border-radius:7px 7px 0 0}.result-viewport{height:270px;background:#0e172c;position:relative;overflow:hidden}.result-viewport>img{width:100%;height:100%;object-fit:cover;object-position:top;will-change:transform,opacity}.compile-state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#9eb5fc;pointer-events:none}.compile-state>span{font-size:45px}.compile-state p{font-size:12px}.result-status{padding-top:14px;display:flex;justify-content:space-between;gap:12px;font-size:8px;color:#7f97bf;letter-spacing:.6px}.result-status>span:last-child{color:#c8ff6b}.example-choices{display:flex;gap:6px}.example-choices button{font-size:10px}.example-choices button[aria-pressed=true]{background:#9fb5ff;color:#102039}
@media(max-width:760px){.lab-frame .stage{height:550px;min-height:550px}.showcase-grid{grid-template-columns:1fr;gap:20px}.kinetic-preview,.product-preview{height:335px}.kinetic-type{font-size:clamp(45px,11vw,70px)}.code-experience{grid-template-columns:1fr}.code-source{border-right:0;border-bottom:1px solid #30374a;padding:20px}.code-source pre{font-size:11px;min-height:210px}.live-result{padding:20px}.experiment-caption h3{font-size:20px}.experiment-caption p{font-size:12px}.experiment-top{padding:14px;font-size:8px;letter-spacing:.7px}.example-choices button{font-size:8px;padding:6px}.code-experiment .experiment-top{flex-wrap:wrap}.kinetic-andori{width:45%}.result-viewport{height:240px}}
.lab-frame .bot{background-image:url('/lab/andori-actions.png');height:auto;aspect-ratio:1;width:16%;background-size:300% 100%}.lab-frame .bot-code{left:30%;background-position:0 50%}.lab-frame .bot-data{left:46%;background-position:50% 50%}.lab-frame .bot-test{left:81%;background-position:100% 50%}
@media(max-width:760px){.lab-frame .bot{width:21%;height:auto}.lab-frame .bot-code{left:29%}.lab-frame .bot-data{left:48%}.lab-frame .bot-test{left:78%}}