:root { --paper:#efe9dd; --paper2:#f5f0e6; --ink:#2b2a26; --orange:#e85c1e; --mono:"Space Mono",monospace; --display:"Archivo Black",sans-serif; }
* { box-sizing:border-box; }
body { background-color:var(--paper); background-image:radial-gradient(rgba(43,42,38,.07) 1px,transparent 1px); background-size:5px 5px; color:var(--ink); font-family:var(--mono); margin:0; }
.lab-topbar { align-items:center; background:var(--ink); color:var(--paper2); display:flex; justify-content:space-between; min-height:54px; padding:10px clamp(16px,4vw,54px); position:sticky; top:0; z-index:5; }
.lab-back { color:var(--paper2); font:400 .76rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }.lab-back:hover { color:var(--orange); }
.lab-status { align-items:center; display:flex; font-size:.62rem; gap:8px; letter-spacing:.14em; text-transform:uppercase; }.lab-status i { background:var(--orange); border-radius:50%; box-shadow:0 0 0 4px rgba(232,92,30,.2); height:7px; animation:pulse 1.8s ease-in-out infinite; width:7px; }
.lab-code { color:var(--orange); font-size:.6rem; letter-spacing:.16em; }
main { margin:auto; max-width:1500px; padding:0 clamp(16px,4vw,58px) 80px; }
.lab-hero { align-items:center; display:grid; gap:clamp(30px,5vw,80px); grid-template-columns:minmax(280px,.8fr) minmax(430px,1.2fr); min-height:calc(100vh - 54px); padding:42px 0 26px; }
.kicker { color:var(--orange); font-size:.66rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
h1,h2 { font-family:var(--display); font-weight:400; letter-spacing:.02em; margin:0; text-transform:uppercase; }
h1 { font-size:clamp(4.8rem,12vw,11rem); line-height:.82; } h1 span { color:transparent; -webkit-text-stroke:2px var(--orange); }
.lead { font-size:clamp(.85rem,1.3vw,1.05rem); line-height:1.8; max-width:590px; }
.launch-stamp { align-items:center; border:1px dashed var(--orange); border-radius:50%; display:flex; flex-direction:column; height:122px; justify-content:center; margin-top:32px; position:relative; text-align:center; width:122px; animation:float 4s ease-in-out infinite; }.launch-stamp::before { border:1px solid var(--orange); border-radius:50%; content:""; inset:8px; position:absolute; }.launch-stamp span { font-size:.52rem; letter-spacing:.15em; text-transform:uppercase; }.launch-stamp strong { color:var(--orange); font:400 .82rem/1.2 var(--display); text-transform:uppercase; }
.lab-machine { background:var(--paper2); border:2px solid var(--ink); box-shadow:12px 12px 0 var(--orange); min-height:470px; overflow:hidden; position:relative; }.lab-machine::before { background:var(--ink); color:var(--paper2); content:"EXPERIMENT / LIVE"; font-size:.58rem; left:0; letter-spacing:.16em; padding:9px 13px; position:absolute; right:0; top:0; z-index:2; }.lab-machine svg { color:var(--ink); height:100%; min-height:470px; width:100%; }.grid-lines { opacity:.15; }.machine-lines { stroke-dasharray:900; stroke-dashoffset:900; animation:draw 3s ease forwards; }.nodes circle { animation:pulse 1.6s ease-in-out infinite; }.scanner { transform-origin:310px 258px; animation:spin 13s linear infinite; }.chip { animation:float 3.2s ease-in-out infinite; }
.machine-liquid { opacity:.84; transition:y 1.15s cubic-bezier(.22,.8,.26,1); }
.machine-readout { bottom:14px; left:16px; position:absolute; }.machine-readout span { display:block; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; }.machine-readout strong { color:var(--orange); font:400 1.8rem var(--display); }.machine-readout small { color:var(--orange); }
.badge-rack { border-block:2px solid var(--ink); display:flex; gap:10px; overflow:hidden; padding:14px 0; }.badge-rack span { background:var(--ink); color:var(--paper2); flex:none; font-size:.63rem; letter-spacing:.12em; padding:7px 11px; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }.badge-rack span.is-live { background:var(--orange); transform:translateY(-3px) rotate(-1deg); }
.lab-cards { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); padding-top:54px; }.lab-program-card { background:var(--paper2); border:1.5px solid var(--ink); min-height:390px; overflow:hidden; padding:0 16px 18px; position:relative; transition:box-shadow .25s,transform .25s; }.lab-program-card:hover { box-shadow:8px 8px 0 var(--ink); transform:translate(-3px,-3px); }.lab-program-card.accent:hover { box-shadow:8px 8px 0 var(--orange); }.lab-program-card header { background:var(--ink); color:var(--paper2); display:flex; font:400 .68rem var(--display); justify-content:space-between; letter-spacing:.1em; margin:0 -16px; padding:10px 14px; text-transform:uppercase; }.lab-program-card.accent header { background:var(--orange); }.lab-program-card h2 { font-size:1rem; }.lab-program-card p { color:#555149; font-size:.74rem; line-height:1.7; }.card-state { border-bottom:2px solid var(--orange); color:var(--orange); font-size:.58rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.program-sketch { height:175px; position:relative; }.cube { border:2px solid var(--ink); height:60px; left:50%; position:absolute; top:52px; transform:translateX(-50%) rotate(30deg) skew(-5deg); width:60px; }.program-sketch>i { background:var(--orange); height:1px; left:20%; position:absolute; top:50%; transform-origin:right; transition:transform .7s; width:30%; }.program-sketch>i:nth-of-type(2){left:50%;transform-origin:left}.program-sketch>i:nth-of-type(3){left:35%;top:75%;width:30%}.lab-program-card:hover .program-sketch>i:first-of-type{transform:rotate(18deg)}.lab-program-card:hover .program-sketch>i:nth-of-type(2){transform:rotate(-18deg)}
.community-motion { align-items:center; display:flex; justify-content:center; }.community-motion svg { color:var(--ink); height:145px; overflow:visible; width:195px; }.community-circle,.community-star,.community-people { transform-box:fill-box; transform-origin:center; transition:transform 500ms cubic-bezier(.34,1.3,.5,1),opacity 350ms ease; }.community-people { opacity:.72; }.lab-program-card:hover .community-left,.lab-program-card:focus .community-left { transform:translateX(6px); }.lab-program-card:hover .community-right,.lab-program-card:focus .community-right { transform:translateX(-6px); }.lab-program-card:hover .community-star,.lab-program-card:focus .community-star { transform:rotate(180deg) scale(1.35); }.lab-program-card:hover .community-people,.lab-program-card:focus .community-people { opacity:1; transform:translateX(-5px); }.orbit i { background:transparent; border:1px solid var(--orange); border-radius:50%; height:105px; left:calc(50% - 52px); top:32px; width:105px; animation:spin 8s linear infinite; }.orbit span,.orbit b { background:var(--ink); border-radius:50%; height:18px; left:calc(50% - 9px); position:absolute; top:76px; width:18px; }.orbit b { background:var(--orange); left:calc(50% + 40px); top:41px; }
footer { align-items:center; background:var(--ink); color:var(--paper2); display:flex; font-size:.64rem; justify-content:space-between; letter-spacing:.12em; padding:22px clamp(16px,4vw,54px); text-transform:uppercase; }footer a{color:var(--orange);text-decoration:none}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:900px){.lab-hero{grid-template-columns:1fr}.lab-machine{min-height:400px}.lab-cards{grid-template-columns:1fr}.lab-status{display:none}}
@media(max-width:560px){main{padding-inline:12px}.lab-hero{padding-top:30px}.lab-machine,.lab-machine svg{min-height:330px}.lab-code{display:none}.lab-program-card{min-height:350px}footer{align-items:flex-start;flex-direction:column;gap:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}