/* ============ PHYSICS LAB : our claw in MuJoCo, embedded from SimArena ============ */







@keyframes labFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.lab-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;padding:0;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(59,123,255,.12)}
.lab-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0b1024}
.lab-cover{position:absolute;inset:0;display:grid;place-items:center}
.lab-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.46) saturate(1.1);transform:scale(1.02)}
.lab-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 55% at 50% 48%,rgba(5,9,24,.42),rgba(5,9,24,.72))}
.lab-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.34;mix-blend-mode:overlay;background-size:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lab-cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.lab-play{position:relative;width:104px;height:104px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:var(--blue-chrome);
  box-shadow:0 0 50px rgba(59,123,255,.55),inset 0 -8px 18px rgba(7,16,41,.3);transition:transform .25s}
.lab-play::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(125,176,255,.55);animation:labRing 2.4s ease-out infinite}
@keyframes labRing{from{transform:scale(.85);opacity:1}to{transform:scale(1.5);opacity:0}}
.lab-play svg{width:36px;height:36px;margin-left:6px;fill:#071029}
.lab-play:hover{transform:scale(1.06)}
.lab-cta b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:28px;letter-spacing:.06em;text-transform:uppercase}
.lab-cta small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#9cc0ff;max-width:46ch;line-height:1.7}
.lab-frame.on .lab-cover{display:none}

.lab-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.lab-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);padding:10px 16px;border-radius:999px;
  border:1px solid rgba(180,186,255,.22);background:rgba(5,9,24,.45);transition:color .2s,border-color .2s}
.lab-links a:hover{color:var(--ink);border-color:rgba(180,186,255,.5)}
.lab-links a:first-child{color:#071029;background:var(--blue-chrome);border-color:transparent}

.lab-ctrl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lab-slot{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#071029;background:var(--blue-chrome);padding:5px 10px;border-radius:999px}
.lab-ctrl code{font-family:var(--mono);font-size:13px;color:#9cc0ff}
.lab-credit{text-align:center;margin-top:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.lab-credit a{color:var(--ink-2);border-bottom:1px solid rgba(180,186,255,.3)}

@media(max-width:1000px){.lab-ctrl{grid-template-columns:repeat(2,1fr)}}

@media(max-width:620px){.lab-ctrl{grid-template-columns:1fr}.lab-frame{aspect-ratio:3/4}}

/* clean spec strip in the hero copy (replaces the scattered floating tags) */




/* studio render of the machine + GrabLab logo on the marquee */




/* logo on the new machine's marquee (transparent render) */




/* hide the size/desktop note under LOAD THE LAB */
.lab-cta small{display:none}

/* partner logos : Powered by CodecFlow pill + credit line */



.lab-credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 9px}
.lab-credit i{font-style:normal;opacity:.6}
.lab-credit a.lc-logo{display:inline-flex;align-items:center;gap:7px;color:var(--ink);border-bottom:0;opacity:.85;transition:opacity .2s}
.lab-credit a.lc-logo:hover{opacity:1}
.lab-credit a.lc-logo img{height:15px;width:auto;display:block}
.lab-credit a.lc-logo img.mj{height:17px}

.lab-credit i.sep{display:inline-block;width:1px;height:12px;background:currentColor;opacity:.35}
/* credit line sits on a bright sky: give it its own dark glass strip so it reads */
.lab-credit{width:fit-content;max-width:calc(100% - 32px);margin:30px auto 0;padding:12px 22px;border-radius:999px;color:#b9c0dc;font-size:11px;
  background:linear-gradient(180deg,rgba(10,13,30,.72),rgba(5,8,20,.62));border:1px solid rgba(180,186,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lab-credit a.lc-logo{opacity:1;color:#f3f4fb}
.lab-credit a.lc-logo img{height:17px}
.lab-credit a.lc-logo img.mj{height:20px}
.lab-credit i.sep{height:14px;opacity:.5;margin:0 6px}
@media(max-width:560px){.lab-credit{border-radius:18px;padding:12px 16px}}
/* laptop heights: the lab window never grows taller than the screen (keeps 16:9, centred) */
@media (min-width:621px){ .lab-frame{width:min(100%,calc((100vh - 110px) * 16 / 9));margin-left:auto;margin-right:auto} }

/* phones: the note under the cover stays visible */
html.lab-touch .lab-cta small{display:block}
html.lab-touch .lab-cta b{font-size:22px}

/* hero: the eyebrow and a small powered by, on one line */
.lab-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;max-width:560px}
.lab-top .eyebrow{margin:0}
.lab-by{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .2s}
.lab-by img{height:13px;width:auto;margin-left:4px}
.lab-by:hover{color:var(--ink)}
/* the lab cover is our machine in SimArena */
.lab-cover img{filter:brightness(.62) saturate(1.05)}
/* credits: two clean rows on phones */
.lab-credit .lcr{display:inline-flex;align-items:center;gap:8px}
@media(max-width:620px){
  .lab-top{max-width:none;margin-bottom:14px}
  .lab-credit{flex-direction:column;gap:10px;border-radius:18px;padding:14px 18px}
  .lab-credit i.sep{width:40px;height:1px}
  .lab-credit .lcr{flex-wrap:wrap;justify-content:center}
}

/* hero: a real frame from SimArena instead of a generic machine */
.lab-shot{margin:0;border-radius:24px;overflow:hidden;position:relative;aspect-ratio:16/10;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lab-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lab-shot figcaption{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#e9eeff;background:rgba(5,9,24,.62);border:1px solid rgba(180,186,255,.25);padding:6px 12px;border-radius:999px;backdrop-filter:blur(10px)}
.lab-shot .dot{width:6px;height:6px;border-radius:50%;background:#7fffa8;box-shadow:0 0 8px #3fe07a}
/* the lab while it loads: a clear progress state instead of a dark box */
.lab-frame .lab-loading{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(5,9,24,.82);text-align:center;padding:20px}
.lab-frame.loading .lab-loading{display:flex}
.lab-loading b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.lab-loading small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9cc0ff;max-width:44ch;line-height:1.7}
.lab-loading i{display:block;width:min(260px,60%);height:2px;border-radius:2px;background:rgba(180,186,255,.14);overflow:hidden;position:relative}
.lab-loading i::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,#9cc0ff,#3b7bff,transparent);animation:labbar 1.3s ease-in-out infinite}
@keyframes labbar{0%{left:-40%}100%{left:100%}}
/* credits: one row for the editor line on phones */
@media(max-width:620px){ .lab-credit .lcr{flex-wrap:nowrap;gap:6px;font-size:9.5px;letter-spacing:.12em} .lab-credit a.lc-logo img{height:14px} .lab-credit a.lc-logo{gap:5px} }