@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&display=swap');
:root{--bg:#05060b;--ink:#eaf0ff;--mut:#8f98b8;--lime:#c8ff2e;--cyan:#35e6ff;--pink:#ff3d9a;--line:rgba(255,255,255,.12);--glass:rgba(255,255,255,.045);--disp:"Unbounded",sans-serif;--sans:"Space Grotesk",Arial,sans-serif;--mono:"Space Mono",monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden;background:radial-gradient(60vw 50vw at 85% -10%,rgba(53,230,255,.16),transparent),radial-gradient(50vw 45vw at -10% 40%,rgba(255,61,154,.13),transparent)}
body::after{content:"";position:fixed;inset:0;background:url(grain.svg);opacity:.07;mix-blend-mode:screen;pointer-events:none;z-index:50}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1}
.bar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--pink));z-index:60}
.glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px;border-radius:50%;background:radial-gradient(circle,rgba(200,255,46,.10),transparent 65%);pointer-events:none;z-index:-1}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
.shell{width:min(1240px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;left:1rem;top:1rem;transform:translateY(-200%);padding:.6rem;background:#fff;color:#000;z-index:99}.skip:focus{transform:none}
a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.top{position:sticky;top:14px;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:14px;padding:.55rem .6rem .55rem 1rem;border:1px solid var(--line);border-radius:99px;background:rgba(8,10,18,.6);backdrop-filter:blur(16px)}
.top nav,.footer-bottom nav{display:flex;gap:clamp(.8rem,2.4vw,2rem)}
.top nav a,.footer-bottom a{font:700 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);transition:.2s}.top nav a:hover,.footer-bottom a:hover,.top nav a[aria-current]{color:var(--lime)}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;white-space:nowrap}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(from 0deg,var(--cyan),var(--lime),var(--pink),var(--cyan));color:#05060b;font:900 .7rem var(--disp)}
.contact-link,.button{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border-radius:99px;font-weight:700;background:var(--lime);color:#05060b;border:0;cursor:pointer;font-family:var(--sans);font-size:.95rem;transition:.25s}
.contact-link:hover,.button:hover{box-shadow:0 0 34px rgba(200,255,46,.55);transform:translateY(-2px)}
.button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.button.ghost:hover{border-color:var(--cyan);box-shadow:0 0 30px rgba(53,230,255,.3)}
.eyebrow{font:700 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.signal{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-right:.5rem;box-shadow:0 0 12px var(--lime);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
h1,h2{font-family:var(--disp);font-weight:900;line-height:1;letter-spacing:-.04em}
h1 span,h2 span{color:var(--lime)}
.hero{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:2rem;min-height:84vh;padding:4rem 0}
.hero h1{font-size:clamp(2.8rem,8.4vw,7.2rem);margin:1.2rem 0;background:linear-gradient(100deg,#fff 20%,var(--cyan) 50%,var(--pink) 80%);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shift 8s linear infinite alternate}
.hero h1 span{-webkit-text-fill-color:var(--lime)}
@keyframes shift{to{background-position:100%}}
.roles{font:700 clamp(1rem,2.2vw,1.5rem) var(--mono);color:var(--lime);min-height:2.2rem}.roles::after{content:"_";animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.intro-copy{color:var(--mut);max-width:44ch;margin:.6rem 0 2rem;font-size:1.1rem}
.cta{display:flex;gap:.8rem;flex-wrap:wrap}
.orbital{position:relative;aspect-ratio:1;max-width:420px;width:100%;justify-self:center}
.core{position:absolute;inset:30%;display:grid;place-items:center;border-radius:50%;font:900 clamp(1.6rem,4vw,3rem) var(--disp);background:radial-gradient(circle at 30% 25%,var(--lime),var(--cyan) 55%,var(--pink));color:#05060b;box-shadow:0 0 90px rgba(53,230,255,.55),inset 0 0 40px rgba(255,255,255,.4);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) scale(1.04)}}
.ring{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.25);border-radius:50%;animation:spin 16s linear infinite}
.ring.r2{inset:-9%;border-style:solid;border-color:rgba(53,230,255,.25);animation-duration:26s;animation-direction:reverse}
.ring i{position:absolute;top:-17px;left:50%;margin-left:-17px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#0b0f1d;border:1px solid var(--lime);color:var(--lime);font-style:normal;font-size:.8rem;box-shadow:0 0 18px rgba(200,255,46,.5)}
.ring.r2 i{border-color:var(--pink);color:var(--pink);box-shadow:0 0 18px rgba(255,61,154,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
.ring i{animation:spin 16s linear infinite reverse}.ring.r2 i{animation-duration:26s;animation-direction:normal}
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:1rem 0;margin-bottom:6rem;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker div{display:flex;gap:3rem;width:max-content;font:900 clamp(1.4rem,3.5vw,2.6rem) var(--disp);animation:slide 24s linear infinite;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4)}
.ticker b{color:var(--lime);-webkit-text-stroke:0}@keyframes slide{to{transform:translateX(-50%)}}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin:.8rem 0 2.5rem}
.section-title h2{font-size:clamp(2.2rem,5.5vw,4.4rem)}.section-title p{color:var(--mut);max-width:34ch}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;perspective:1200px}
.project{position:relative;border:1px solid var(--line);border-radius:24px;background:var(--glass);padding:1rem;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .15s,border-color .3s;overflow:hidden}
.project::before{content:"";position:absolute;inset:0;background:radial-gradient(260px at var(--mx,50%) var(--my,0),rgba(200,255,46,.16),transparent);opacity:0;transition:.3s}
.project:hover{border-color:rgba(200,255,46,.5)}.project:hover::before{opacity:1}
.art{position:relative;aspect-ratio:1.1;border-radius:16px;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.art.yt{background:linear-gradient(135deg,#ff3d9a,#ff7a2e)}.art.bl{background:#070b14;border:1px solid var(--line);place-items:start;padding:1.4rem}.art.dg{background:linear-gradient(135deg,#14206b,#35e6ff)}
.play{width:78px;height:78px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#ff3d9a;font-size:1.8rem;padding-left:.3rem;animation:pulse 2s infinite;box-shadow:0 0 0 14px rgba(255,255,255,.25)}
.yt b{position:absolute;left:1rem;bottom:.8rem;font:900 1.5rem/1 var(--disp);color:#fff;letter-spacing:-.05em}
.eq{position:absolute;right:1rem;bottom:1rem;display:flex;gap:4px;align-items:end;height:34px}.eq i{width:5px;background:#fff;animation:eq 1s infinite alternate}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}@keyframes eq{from{height:6px}to{height:34px}}
.code{font:.78rem/2 var(--mono);color:var(--cyan);width:100%}.code span{display:block;overflow:hidden;white-space:nowrap;width:0;animation:type 6s steps(26) infinite}.code span:nth-child(2){animation-delay:.8s;color:var(--lime)}.code span:nth-child(3){animation-delay:1.6s;color:var(--pink)}.code span:nth-child(4){animation-delay:2.4s}@keyframes type{0%{width:0}35%,85%{width:100%}100%{width:0}}
.dg svg{width:80%;overflow:visible}.dg path{stroke-dasharray:420;animation:draw 5s ease-in-out infinite alternate}@keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.project-meta{padding:1.1rem .4rem .4rem}.project-meta h3{font:700 1.4rem var(--disp);letter-spacing:-.03em;margin:.3rem 0 .7rem}
.text-link{font-weight:700;color:var(--lime)}.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.lab{margin:7rem 0;padding:clamp(1.4rem,4vw,3.5rem);border:1px solid var(--line);border-radius:32px;background:linear-gradient(160deg,rgba(53,230,255,.07),rgba(255,61,154,.06))}
.lab h2{font-size:clamp(2rem,4.6vw,3.6rem);margin:.6rem 0 1rem}.lab-copy{color:var(--mut);max-width:52ch}
.stage{display:grid;place-items:center;min-height:300px;margin:2rem 0 1rem;border-radius:20px;background:repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px)}
.thumb{width:var(--w,100%);max-width:560px;aspect-ratio:16/9;border-radius:12px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 80% 20%,var(--cyan),transparent 50%),linear-gradient(135deg,#ff3d9a,#6a2cff);overflow:hidden;box-shadow:0 20px 60px rgba(255,61,154,.35);container-type:inline-size}
.thumb strong{font:900 15cqw/.9 var(--disp);color:#fff;letter-spacing:-.06em;text-align:center;text-shadow:0 .04em 0 #05060b}.thumb em{color:var(--lime);font-style:normal}
.thumb::after{content:"▶";position:absolute;right:6%;bottom:8%;width:12cqw;height:12cqw;border-radius:50%;background:#fff;color:#ff3d9a;display:grid;place-items:center;font-size:5cqw}
.slider{display:flex;align-items:center;gap:1rem;font:.78rem var(--mono);color:var(--mut)}.slider input{flex:1;accent-color:var(--lime)}.slider output{color:var(--lime);min-width:7ch}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:7rem 0}
.stats div{padding:2rem;border-radius:24px;border:1px solid var(--line);background:var(--glass)}.stats b{display:block;font:900 clamp(2.6rem,6vw,4.6rem)/1 var(--disp);color:var(--lime)}.stats span{color:var(--mut);font:.78rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.tools-strip{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;padding:2rem;border-radius:24px;border:1px dashed rgba(200,255,46,.4)}.tools-strip h3{font:700 1.6rem var(--disp);margin:.3rem 0}
.about{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;margin:7rem 0}.about h2{font-size:clamp(2rem,5vw,4rem);margin-bottom:1.2rem}.about p{color:var(--mut);font-size:1.15rem;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}.chips span{padding:.45rem .9rem;border:1px solid var(--line);border-radius:99px;font:.76rem var(--mono);color:var(--cyan)}
footer{border-top:1px solid var(--line);margin-top:4rem;padding:4rem 0 2rem;background:linear-gradient(0deg,rgba(200,255,46,.06),transparent)}
footer h2{font-size:clamp(2.4rem,8vw,7rem);margin:1rem 0}footer .footer-inner>div:first-child p{color:var(--mut);margin-bottom:1.6rem}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.directory-intro{padding:clamp(4rem,10vw,8rem) 0 3rem}.directory-intro h1{font-size:clamp(2.6rem,8vw,6.5rem);margin:1rem 0}.directory-intro p{color:var(--mut);max-width:50ch;margin-bottom:1.5rem;font-size:1.1rem}.directory-intro .text-link{color:var(--lime)}
.directory-body h2,.directory-heading h2{font:700 1.3rem var(--disp)}.directory-heading{display:flex;justify-content:space-between;align-items:center;margin:3rem 0 1rem;color:var(--mut)}
ul{list-style:none;margin:0;padding:0}.category-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.category-list a{display:block;padding:.5rem 1rem;border:1px solid var(--line);border-radius:99px;font:.8rem var(--mono);transition:.2s}.category-list a:hover{border-color:var(--lime);color:var(--lime)}
.directory-filter label{display:block;font:.75rem var(--mono);color:var(--mut);margin-bottom:.4rem}.directory-filter input{width:100%;padding:1rem 1.3rem;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--ink);font:1rem var(--sans)}
.directory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1.5rem 0 4rem}.directory-card a{display:flex;flex-direction:column;gap:.5rem;height:100%;padding:1.3rem;border:1px solid var(--line);border-radius:20px;background:var(--glass);transition:.25s}.directory-card a:hover{border-color:var(--lime);transform:translateY(-4px);box-shadow:0 12px 40px rgba(200,255,46,.12)}.directory-card strong{font-family:var(--disp);font-size:.95rem}.directory-card span:last-child{color:var(--mut);font-size:.88rem}
html.js .rv{opacity:0;transform:translateY(34px);transition:1s cubic-bezier(.2,.8,.2,1)}html.js .rv.in{opacity:1;transform:none}
@media(max-width:860px){.hero,.about{grid-template-columns:1fr}.orbital{max-width:300px}.work-grid,.stats{grid-template-columns:1fr}.top nav{display:none}.hero{min-height:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html.js .rv{opacity:1;transform:none}}