/* Lab cards: shared by the Stage and the /scroll page */
.lcard{position:relative;flex:0 0 50vw;width:50vw;height:min(78vh,52vw);border-radius:22px;overflow:hidden;background:var(--bg);isolation:isolate;container-type:size;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.lcard .code{position:absolute;inset:0;margin:0;padding:5cqw 5cqw 0;z-index:0;font:500 clamp(9px,.78vw,13px)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--acc);opacity:.5;overflow:hidden;white-space:pre;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.5));mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.5))}
.code .in{display:block;will-change:transform}
.code .k{color:#fff;opacity:.95}.code .s{color:#ffd479}.code .n{color:#9ad1ff}.code .c{opacity:.55;font-style:italic}
.code .cur{display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;background:var(--acc);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lcard .art{position:absolute;inset:0;z-index:1;pointer-events:none}
.lcard .art>*{position:absolute;display:block;max-width:none}
.lcard .i{height:auto;filter:drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.55));animation:bob 9s ease-in-out infinite alternate}
.lcard .i:nth-of-type(2n){animation-duration:11s;animation-delay:-3s}
@keyframes bob{from{translate:0 -.7cqw}to{translate:0 .9cqw}}
.lcard .glow{inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;mix-blend-mode:screen;filter:none;animation:none}
.phone{aspect-ratio:9/19.5;padding:.9cqw;border-radius:5.4cqw;background:#050505;box-shadow:0 0 0 .15cqw #2b2b2e,0 3cqw 5cqw rgba(0,0,0,.65);animation:bob 10s ease-in-out infinite alternate}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:4.5cqw}
.lcard__txt{position:absolute;z-index:3;padding:5cqw;max-width:62cqw}
.lcard__txt--tl{left:0;top:0}
.lcard__txt--bl{left:0;bottom:0;padding-top:12cqw;right:0;max-width:none;background:linear-gradient(to top,rgba(0,0,0,.88) 30%,rgba(0,0,0,0))}
.lcard__txt small{display:block;font-size:max(10px,1.45cqw);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.lcard__txt h3{font-family:var(--display);font-weight:400;font-size:max(30px,6.4cqw);line-height:.95;margin:.18em 0 .2em;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.6)}
.lcard__txt p{font-size:max(12px,1.8cqw)!important;line-height:1.45!important;color:#d9d1c5;margin:0;max-width:44ch}

/* Jumping Light: product, boards, app over the night-time light arc */
/* looping night-yard video behind everything (the typing code sits above it) */
.lcard--jl1 .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 62%;z-index:0;background:#05070b}
.lcard--jl1 .vid-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,14,.72) 0,rgba(5,8,14,.28) 34%,rgba(5,8,14,.1) 100%),linear-gradient(90deg,rgba(5,8,14,.5),rgba(5,8,14,0) 58%)}
/* The fixture is a grounded object: it doesn't float, and it casts shadows onto the ground it stands on. */
.jl1-obj{left:15cqw;bottom:5cqh;height:92cqh;aspect-ratio:1600/1400}
.jl1-obj .product{position:absolute;inset:0;width:100%;height:100%;animation:none;filter:brightness(1.38) contrast(1.08) saturate(1.1) drop-shadow(1.4cqw .9cqw 1cqw rgba(0,0,0,.55))}
.gl{position:absolute;display:block;border-radius:50%;pointer-events:none}
.gl--pool{left:-30%;top:90%;width:130%;height:20%;background:radial-gradient(closest-side,rgba(170,200,190,.26),rgba(170,200,190,.08) 60%,rgba(170,200,190,0))}
.gl--soft{left:5%;top:96%;width:66%;height:7%;background:radial-gradient(closest-side,rgba(0,0,0,.78),rgba(0,0,0,0));filter:blur(.6cqw)}
.gl--body{left:36%;top:97%;width:24%;height:3%;background:rgba(0,0,0,.55);filter:blur(.7cqw)}
.gl--rod{left:35%;top:98.2%;width:46%;height:.5%;border-radius:99px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0));filter:blur(.25cqw);rotate:2deg;transform-origin:0 50%}
.gl--contact{left:26%;top:97.6%;width:17%;height:2.4%;background:rgba(0,0,0,.85);filter:blur(.3cqw)}
.lcard--jl1 .lcard__txt{max-width:44cqw}
.board--a{right:3cqw;top:4cqh;width:27cqw;rotate:7deg}
.board--b{right:29cqw;top:4cqh;width:21cqw;rotate:-8deg}
.phone--jl1{left:5cqw;right:auto;bottom:9cqh;height:40cqh}

/* Jumping Light: a glowing multicolor (RGB LED) edge that slowly cycles round the card */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --g1{syntax:"<color>";inherits:true;initial-value:#ff3b30}
@property --g2{syntax:"<color>";inherits:true;initial-value:#0a84ff}
.lcard--jl1{animation:rgbglow 9s linear infinite;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 38px -4px var(--g1,#ff3b30),0 0 90px -10px var(--g2,#0a84ff)}
.lcard--jl1::before,.lcard--jl1::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--a),#ff3b30,#ff9f0a,#ffe600,#30d158,#0a84ff,#bf5af2,#ff2d9b,#ff3b30);animation:rgbspin 7s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lcard--jl1::before{padding:.28cqw}
.lcard--jl1::after{padding:3.6cqw;filter:blur(2.4cqw);opacity:.66}
@keyframes rgbspin{to{--a:360deg}}
@keyframes rgbglow{0%{--g1:#ff3b30;--g2:#0a84ff}20%{--g1:#ffe600;--g2:#bf5af2}40%{--g1:#30d158;--g2:#ff2d9b}60%{--g1:#0a84ff;--g2:#ff9f0a}80%{--g1:#bf5af2;--g2:#30d158}100%{--g1:#ff3b30;--g2:#0a84ff}}

/* Cricket Finder: logo, app, and a laser sweep */
.lcard--cf{background:radial-gradient(120% 90% at 30% 20%,#10170a,#07090a 60%)}
.lcard--cf .logo{left:6cqw;top:7cqh;width:68cqw;border-radius:2cqw;box-shadow:0 0 0 .15cqw rgba(141,255,26,.35),0 0 6cqw rgba(141,255,26,.25);filter:none}
.phone--cf{right:6cqw;bottom:6cqh;height:68cqh}
.laser{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.beam{position:absolute;display:block;background:linear-gradient(90deg,transparent,#8dff1a 18%,#d6ff9a 50%,#8dff1a 82%,transparent);box-shadow:0 0 1.2cqw .25cqw rgba(141,255,26,.75),0 0 4cqw 1cqw rgba(141,255,26,.35);border-radius:9cqw}
.beam--h{left:-10%;right:-10%;height:.28cqw;top:0;animation:sweep 5.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.beam--v{top:-10%;bottom:-10%;width:.28cqw;left:0;background:linear-gradient(180deg,transparent,#8dff1a 18%,#d6ff9a 50%,#8dff1a 82%,transparent);animation:sweepx 7.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.beam--d{left:12cqw;top:44cqh;width:60cqw;height:.22cqw;transform-origin:0 50%;rotate:-18deg;opacity:.9;animation:aim 4s ease-in-out infinite alternate}
.ping{position:absolute;left:70cqw;top:30cqh;width:3cqw;height:3cqw;margin:-1.5cqw;border-radius:50%;border:.2cqw solid #8dff1a;animation:ping 2.2s ease-out infinite}
@keyframes sweep{from{top:6%}to{top:94%}}
@keyframes sweepx{from{left:6%}to{left:94%}}
@keyframes aim{from{rotate:-24deg}to{rotate:-8deg}}
@keyframes ping{from{transform:scale(.2);opacity:.9}to{transform:scale(5);opacity:0}}

/* QuickLUT: macro lens, desktop windows, iPhone */
.lcard--ql .appstore{position:absolute;z-index:4;top:0;right:0;padding:5cqw;line-height:0}
.lcard--ql .appstore img{display:block;width:max(110px,11cqw);height:auto}
.lcard--ql .glow{opacity:.5;object-position:60% 50%}
.desk{border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.12)}
.desk--a{left:4cqw;top:27cqh;width:66cqw;rotate:-1.5deg}
.desk--b{left:9cqw;bottom:-14cqh;width:46cqw;rotate:2deg}
.phone--ql{right:4cqw;bottom:5cqh;height:68cqh}

/* DSLR Connect: the web page plus the Mac app */
.lcard--dc{background:radial-gradient(90% 70% at 30% 20%,#0b2412,#050806 65%)}
.lcard .page{left:4cqw;top:6cqh;width:42cqw;border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.14)}
.app--a{right:4cqw;top:8cqh;width:50cqw;border-radius:1.4cqw}
.app--b{right:26cqw;top:33cqh;width:25cqw;border-radius:1.4cqw}
.app--c{right:4cqw;top:37cqh;width:22cqw;border-radius:1.4cqw}

/* PadMouse: mapping window and adaptive controller over an amber glow, app icon top right */
.lcard--pm{background:radial-gradient(90% 80% at 85% 12%,#3a2606,#0b0907 62%)}
/* PadMouse: liquid-glass edge. A translucent, blurred rim with bright specular corners, plus a thin lit inner edge */
.lcard--pm{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 36px -10px rgba(255,184,28,.3),0 40px 80px -30px rgba(0,0,0,.8)}
.lcard--pm::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.2cqw;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.16) 24%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.16) 76%,rgba(255,255,255,.7));-webkit-backdrop-filter:blur(7px) saturate(1.5) brightness(1.15);backdrop-filter:blur(7px) saturate(1.5) brightness(1.15);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lcard--pm::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 .16cqw 0 rgba(255,255,255,.75),inset 0 -.16cqw 0 rgba(255,255,255,.28),inset .16cqw 0 0 rgba(255,255,255,.35),inset -.16cqw 0 0 rgba(255,255,255,.2),inset 0 0 2.6cqw rgba(255,255,255,.1)}
.lcard--pm .pmglow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 50% at 78% 72%,rgba(255,184,28,.3),transparent 70%)}
.lcard--pm .pmdiag{position:absolute;z-index:0;left:0;top:27cqh;width:100cqw;max-width:none;height:auto;opacity:1;pointer-events:none}
.lcard--pm .pmwin{left:3cqw;bottom:4cqh;width:34cqw;rotate:-3deg;border-radius:1cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.14)}
.lcard--pm .pmpad{right:3cqw;bottom:4cqh;width:30cqw;rotate:4deg;border-radius:1.4cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.2)}
.lcard--pm .pmicon-link{position:absolute;right:6cqw;top:6cqh;width:15cqw;pointer-events:auto;line-height:0;border-radius:22%}
.lcard--pm .pmicon{position:static;width:100%;height:auto;display:block;border-radius:22%;filter:drop-shadow(0 1.6cqw 2.4cqw rgba(0,0,0,.6))}
.lcard__txt .tlink{color:inherit;text-decoration:none}
.lcard__txt .tlink:hover,.lcard__txt .tlink:focus-visible{color:var(--acc)}
.lcard__txt .more{display:inline-block;margin-top:1.8cqw;font-size:max(12px,1.8cqw);color:var(--acc);text-decoration:none;border-bottom:1px solid transparent}
.lcard__txt .more:hover,.lcard__txt .more:focus-visible{border-bottom-color:currentColor}
.lcard__txt .more i{font-style:normal}
/* Amoeba macro video: the gear train turning, behind everything */
.lcard--am .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#0c0c0e;opacity:.3}
.lcard--am .vid-shade{display:none}
/* Amoeba: burgundy anodised-aluminium edge, like the phone's finish */
.lcard--am{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 40px -12px rgba(150,70,85,.45),0 40px 80px -30px rgba(0,0,0,.8)}
.lcard--am::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.3cqw;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.09) 1px 2px,rgba(255,255,255,0) 2px 3px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.07) 1px 2px,rgba(255,255,255,0) 2px 3px),linear-gradient(135deg,#3a131c 0%,#8a4752 8%,#f6d6da 14%,#a8626d 21%,#3a131c 30%,#2a0d15 38%,#7a3a47 46%,#e8b9bf 53%,#fff1f2 56%,#c58b93 60%,#5a2531 70%,#2a0d15 78%,#6a2f3b 86%,#d9a3ab 93%,#4b1d28 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lcard--am::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 .12cqw 0 rgba(255,235,238,.55),inset 0 -.12cqw 0 rgba(0,0,0,.7),inset .12cqw 0 0 rgba(255,225,230,.25),inset -.12cqw 0 0 rgba(0,0,0,.45),inset 0 0 0 1.3cqw rgba(0,0,0,0),inset 0 0 2.4cqw 1.3cqw rgba(0,0,0,.45)}
/* Amoeba: concept-stage polarizer cover. Blueprint backdrop, render, exploded view, in-context and lever detail */
.lcard--am{background:radial-gradient(90% 80% at 72% 18%,#26221a,#0c0c0e 62%)}
.lcard--am .plan{right:-14cqw;bottom:-12cqh;width:78cqw;opacity:.3;mix-blend-mode:screen;filter:invert(1) sepia(.6) saturate(1.2);animation:none}
.lcard--am .amhero{right:4cqw;top:10cqh;width:50cqw}
.lcard--am .expl{left:3cqw;top:35cqh;width:40cqw;height:auto}
.lcard--am .ctx,.lcard--am .lev{border-radius:1.6cqw;box-shadow:0 0 0 .12cqw rgba(255,255,255,.14),0 2.4cqw 3cqw rgba(0,0,0,.55)}
.lcard--am .ctx{left:36cqw;bottom:4cqh;width:38cqw;rotate:-1.5deg}
.lcard--am .lev{right:3cqw;bottom:10cqh;width:25cqw;rotate:2deg}
.lcard--am h3 .mk{display:inline-block;height:.78em;width:auto;margin-right:.3em;vertical-align:-.04em;filter:brightness(0) invert(1);opacity:.9}
.lcard--am .lcard__txt{max-width:46cqw}
.lcard--am .spec{display:block;margin-top:1.1cqw;font:500 max(10px,1.3cqw)/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:var(--acc)}
.lcard--am .note{display:block;margin-top:.8cqw;font-size:max(9px,1.05cqw);line-height:1.4;color:#9a9285;max-width:44ch}