/* ---------- Lab section (homepage) ---------- */
#lab{position:relative;padding:90px clamp(24px,7vw,110px) 110px;color:#eef2ea;isolation:isolate;overflow:clip;scroll-margin-top:15px}
#lab:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 18% 30%,#4f7d7a1c,transparent 70%),radial-gradient(ellipse 60% 50% at 85% 75%,#be523e12,transparent 70%)}
#lab .lab-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
#lab .eyebrow{font-size:12px;letter-spacing:.12em;color:#9fafbb;margin-bottom:18px}
#lab h2{font:500 clamp(40px,5.8vw,88px)/1.03 var(--sans);letter-spacing:-.055em;color:#eef2ea}
#lab h2 em{color:#b7c9d5;letter-spacing:-.03em}
#lab .lab-note{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
#lab .lab-note span{font:10px var(--mono);letter-spacing:.12em;color:#9fafbb}
#lab .lab-note em{font:400 clamp(20px,2vw,28px)/1 var(--serif);color:#d8e2dc}
#lab .lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(22px,2.6vw,36px);margin-top:56px}

/* cartridge card: same ceramic/metal language as the sound player */
.lab-card{--lift:0px;position:relative;display:flex;flex-direction:column;min-width:0;padding:12px 12px 18px;border-radius:18px 18px 26px 18px;
 background:linear-gradient(162deg,#f1f2ea 0%,#dde2da 46%,#c9d0c8 100%);color:#1d3038;
 box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -2px 0 #9aa6a24d,0 2px 0 #a9b4ae,0 4px 0 -1px #6f8381,0 34px 44px -26px #03121acc;
 transform:translateY(var(--lift));transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.lab-card:hover,.lab-card:focus-visible{--lift:-8px;color:#1d3038;box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -2px 0 #9aa6a24d,0 2px 0 #a9b4ae,0 4px 0 -1px #6f8381,0 44px 50px -26px #03121ae0}
.lab-card:focus-visible{outline:2px solid #c9e8dc;outline-offset:6px}
.lab-screen{position:relative;display:block;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:#0c1d26;
 box-shadow:inset 0 0 0 1px #00000059,0 0 0 4px #b8c1ba,0 0 0 5px #8e9b97}
.lab-screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .5s;filter:saturate(.92)}
.lab-card:hover .lab-screen img{transform:scale(1.045);filter:saturate(1.05)}
.lab-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff2e 0%,#ffffff08 32%,transparent 46%),radial-gradient(120% 90% at 50% 120%,#00000066,transparent 60%);box-shadow:inset 0 2px 10px #00000080}
.lab-blank{position:absolute;inset:0;display:flex;align-items:flex-end;padding:18px 20px;
 background:radial-gradient(90% 80% at 80% 10%,hsl(var(--h) 55% 58% / .55),transparent 60%),radial-gradient(80% 90% at 10% 100%,hsl(calc(var(--h) + 140) 50% 40% / .6),transparent 60%),#10242e}
.lab-blank em{font:400 clamp(30px,3vw,42px)/.98 var(--serif);letter-spacing:-.03em;color:#eef2ea;text-wrap:balance}
.lab-meta{display:flex;justify-content:space-between;align-items:center;margin:20px 6px 0;font:500 10px var(--mono);letter-spacing:.12em;color:#5c6f72}
.lab-meta span:first-child{display:inline-flex;align-items:center;gap:8px}
.lab-meta span:first-child:before{content:"";width:7px;height:7px;border-radius:50%;background:#7b8b87;box-shadow:inset 0 1px 1px #0006;transition:background .3s,box-shadow .3s}
.lab-card:hover .lab-meta span:first-child:before,.lab-card:focus-visible .lab-meta span:first-child:before{background:#8ef0b0;box-shadow:0 0 8px 1px #8ef0b099,inset 0 1px 1px #fff8}
.lab-name{display:block;margin:12px 6px 0;font:500 clamp(25px,2.2vw,31px)/1.04 var(--sans);letter-spacing:-.04em;color:#18343e}
.lab-about{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:10px 6px 0;font:400 18px/1.35 var(--serif);color:#3e5a61}
.lab-run{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin:auto 6px 0;padding:9px 14px 9px 16px;border-radius:30px;margin-top:22px;
 font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#1d3038;background:#e9ece4;box-shadow:inset 0 1px 0 #fff,0 2px 0 #95a29e,0 3px 6px -2px #0d283244;transition:background .3s,color .3s,box-shadow .2s,transform .2s}
.lab-run svg{width:15px;height:15px;transition:transform .35s}
.lab-card:hover .lab-run,.lab-card:focus-visible .lab-run{background:#be523e;color:#fff6ee;box-shadow:inset 0 1px 0 #ffffff40,0 2px 0 #7d2f22,0 6px 12px -4px #be523e88}
.lab-card:hover .lab-run svg{transform:translate(2px,-2px)}
.lab-card:active .lab-run{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff40,0 0 0 #7d2f22}
@media(max-width:700px){#lab{padding:56px 22px 70px}#lab .lab-header{align-items:flex-start}#lab .lab-note{align-items:flex-start;text-align:left}#lab h2{font-size:44px}#lab .lab-grid{margin-top:36px}}
@media(prefers-reduced-motion:reduce){.lab-card,.lab-screen img,.lab-run,.lab-run svg{transition:none}.lab-card:hover{--lift:0px}}
.motion-paused .lab-card{transition:none}

/* footer copyright line */
.footer-copy{font:10px var(--mono);letter-spacing:.06em;opacity:.7}

/* ---------- Lab player page (/lab/<name>/) ---------- */
body.lab-player{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);background:#0c1d26;color:#dfe8e4;font-family:var(--sans,'Instrument Sans',sans-serif);overflow:hidden}
.lab-bar{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);
 background:linear-gradient(180deg,#142b38,#10232e);border-bottom:1px solid #2c4651;box-shadow:0 6px 18px -10px #000a;position:relative;z-index:2}
.lab-bar a{color:#dfe8e4;text-decoration:none}
.lab-bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lab-back{display:inline-flex;align-items:center;gap:8px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;white-space:nowrap}
.lab-back b{font-weight:500}
.lab-back span{color:#8fa7ab}
.lab-back:hover,.lab-full:hover{color:#f0b9a8}
.lab-title{flex:1;min-width:0;margin:0;text-align:center;font:500 15px/1 'Instrument Sans',sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-full{display:inline-flex;align-items:center;gap:8px;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.lab-player iframe{display:block;width:100%;height:100%;border:0;background:#000}
.lab-bar a:focus-visible{outline:2px solid #be523e;outline-offset:4px;border-radius:3px}
@media(max-width:560px){.lab-back span,.lab-full{font-size:0;gap:0}.lab-full svg{width:19px;height:19px}.lab-title{font-size:14px}}