:root{
  --ink:#101011;
  --paper:#f0eee7;
  --white:#fff;
  --lime:#c8ff7a;
  --lime-rgb:200,255,122;
  --muted:#b9b9bd;
  --display:"Space Grotesk",Arial,sans-serif;
  --mono:"DM Mono",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
}
body.is-dragging{user-select:none}
a{color:inherit}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:max(780px,100svh);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:22px clamp(22px,5vw,72px) 38px;
  background:
    radial-gradient(circle at 74% 46%,rgba(73,95,220,.13),transparent 30%),
    radial-gradient(circle at 89% 17%,rgba(var(--lime-rgb),.07),transparent 22%),
    var(--ink);
  color:var(--white);
}

.nav,footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  position:relative;
  z-index:60;
  font:12px var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nav-projects{
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.65);
  text-decoration:none;
  transition:.2s;
}
.nav-projects:hover,
.nav-projects:focus-visible{
  color:var(--lime);
  border-color:var(--lime);
  transform:translateY(-1px);
}

.wordmark{
  font:700 30px var(--display);
  letter-spacing:-.11em;
  text-decoration:none;
}
.wordmark 
.brand-name {
  text-transform: lowercase;
  
  
},.core .brand-name{color:var(--white)}
.blink{
  color:var(--lime);
  animation:tab-cursor-blink 1.05s step-end infinite;
}

.hero-copy{
  position:relative;
  z-index:8;
  max-width:620px;
  margin-top:clamp(75px,13vh,150px);
  pointer-events:none;
}
.hero-copy a{pointer-events:auto}
.eyebrow{
  margin:0 0 18px;
  color:inherit;
  opacity:.72;
  font:11px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero h1,.projects h2{
  margin:0;
  font-size:clamp(56px,8vw,125px);
  line-height:.82;
  letter-spacing:-.09em;
}
.hero h1 em{
  color:var(--lime);
  font-weight:400;
}
.round-link{
  display:inline-flex;
  align-items:center;
  gap:24px;
  margin-top:30px;
  padding:11px 13px 11px 17px;
  border:1px solid #555;
  border-radius:99px;
  color:var(--white);
  text-decoration:none;
  font-size:13px;
  transition:.25s;
}
.round-link:hover,.round-link:focus-visible{
  border-color:var(--lime);
  background:rgba(var(--lime-rgb),.06);
  transform:translateY(-2px);
}
.round-link span{color:var(--lime);font-size:18px}

/* ============================================================
   NETWORK
   ============================================================ */
.network{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  touch-action:none;
  contain:layout paint;
}
.network::before,.network::after{
  content:"";
  position:absolute;
  width:28rem;
  height:28rem;
  border-radius:50%;
  filter:blur(75px);
  opacity:.09;
  pointer-events:none;
}
.network::before{left:55%;top:26%;background:#5168ff}
.network::after{left:76%;top:62%;background:var(--lime);opacity:.055}

.network-glow{
  position:absolute;
  width:22rem;
  height:22rem;
  border-radius:50%;
  background:var(--lime);
  filter:blur(110px);
  opacity:.035;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .25s,transform .25s;
}
.network.is-dragging .network-glow{
  opacity:.1;
  transform:translate(-50%,-50%) scale(1.35);
}

.connections{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.connection{
  stroke:rgba(125,146,255,.38);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  transition:stroke .2s,stroke-width .2s,opacity .2s;
}
.connection.is-extension{
  stroke:rgba(var(--lime-rgb),.58);
  stroke-dasharray:5 6;
}
.connection.is-selected{
  stroke:rgba(var(--lime-rgb),.95);
  stroke-width:2;
}
.connection.is-dragged{
  stroke:rgba(var(--lime-rgb),.75);
}

.orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  pointer-events:none;
  transition:left .15s,top .15s;
}
.orbit-a{width:min(500px,42vw);aspect-ratio:1}
.orbit-b{
  width:min(360px,32vw);
  aspect-ratio:1;
  border-color:rgba(var(--lime-rgb),.1);
}

.node{
  position:absolute;
  z-index:8;
  border:1px solid rgba(111,128,224,.7);
  background:rgba(20,20,25,.92);
  color:#e8e9fa;
  box-shadow:0 0 24px rgba(75,95,220,.08);
  font:10px var(--mono);
  will-change:transform,left,top;
}

/* ============================================================
   CORE
   ============================================================ */
.core{
  width:178px;
  height:178px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0;
  border-color:var(--lime);
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.06),transparent 22%),
    rgba(25,28,37,.96);
  box-shadow:
    0 0 0 14px rgba(22,22,27,.75),
    0 0 70px rgba(108,134,255,.24),
    inset 0 0 40px rgba(var(--lime-rgb),.04);
  cursor:grab;
  transition:
    width .35s cubic-bezier(.2,.8,.2,1),
    height .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s,
    border-color .3s;
}
.core:active,.core.is-dragging{cursor:grabbing}
.core.is-expanded{
  width:218px;
  height:218px;
  box-shadow:
    0 0 0 18px rgba(22,22,27,.68),
    0 0 30px rgba(var(--lime-rgb),.6),
    0 0 100px rgba(108,134,255,.28),
    inset 0 0 52px rgba(var(--lime-rgb),.08);
}
.core-default{
  display:grid;
  place-items:center;
  transition:opacity .2s,transform .25s;
}
.core-brand{
  font-size:40px;
  font-weight:700;
  letter-spacing:-.12em;
}
.core-default small{
  margin-top:5px;
  color:var(--lime);
  font:9px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.core-preview{
  position:absolute;
  inset:11px;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  border-radius:50%;
  opacity:0;
  transform:scale(.82);
  pointer-events:none;
  transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1);
}
.core.show-preview .core-default{
  opacity:0;
  transform:scale(.82);
}
.core.show-preview .core-preview{
  opacity:1;
  transform:scale(1);
}
.preview-image{
  min-height:0;
  background:center/cover no-repeat;
  filter:saturate(1.08) contrast(1.04);
}
.preview-info{
  display:grid;
  gap:1px;
  padding:7px 10px 12px;
  background:rgba(10,10,12,.84);
  text-align:left;
}
.preview-kicker,.preview-action{
  color:rgba(255,255,255,.52);
  font:7px var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.preview-info strong{
  color:var(--lime);
  font:700 11px var(--display);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ============================================================
   PROJECT NODES
   ============================================================ */
.project-nodes{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.project-node{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 13px;
  border-radius:999px;
  text-decoration:none;
  cursor:grab;
  pointer-events:auto;
  transition:border-color .2s,box-shadow .2s,background .2s,transform .15s,opacity .2s;
}
.project-node:active,.project-node.is-dragging{cursor:grabbing}
.project-node:hover,.project-node:focus-visible{
  border-color:var(--lime);
  box-shadow:
    0 0 24px rgba(var(--lime-rgb),.18),
    0 0 4px rgba(var(--lime-rgb),.28);
  background:rgba(22,27,25,.98);
}
.project-node.is-selected{
  border-color:var(--project-accent,var(--lime));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--project-accent,var(--lime)) 45%,transparent),
    0 0 28px color-mix(in srgb,var(--project-accent,var(--lime)) 25%,transparent);
}
.project-node.is-child{
  border-style:dashed;
}
.node-code{color:var(--project-accent,var(--lime))}
.node-name{color:#e8e9fa}

/* ============================================================
   PROJECTOR
   ============================================================ */
.project-projector{
  position:absolute;
  z-index:34;
  right:clamp(20px,4vw,62px);
  top:50%;
  width:min(460px,38vw);
  min-height:370px;
  transform:translateY(-50%) translateX(35px) scale(.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:28px;
  overflow:hidden;
  background:rgba(11,12,16,.84);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 90px rgba(0,0,0,.38);
  transition:.35s cubic-bezier(.2,.8,.2,1);
}
.project-projector.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0) scale(1);
}
.projector-close{
  position:absolute;
  right:12px;
  top:12px;
  z-index:5;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(10,10,12,.72);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}
.projector-screen{
  position:relative;
  height:210px;
  overflow:hidden;
  background:#16171c;
}
.projector-image{
  position:absolute;
  inset:-10px;
  background:center/cover no-repeat;
  filter:saturate(1.25) contrast(1.03);
  transform:scale(1.08);
  animation:projector-drift 8s ease-in-out infinite alternate;
}
.projector-noise{
  position:absolute;
  inset:0;
  background:
    linear-gradient(transparent 50%,rgba(255,255,255,.018) 50%),
    radial-gradient(circle at 70% 20%,rgba(var(--lime-rgb),.16),transparent 34%);
  background-size:100% 4px,100% 100%;
  mix-blend-mode:screen;
  pointer-events:none;
}
.projector-copy{padding:22px 24px 25px}
.projector-kicker{
  color:var(--lime);
  font:9px var(--mono);
  letter-spacing:.1em;
}
.projector-copy h2{
  margin:7px 0 8px;
  color:#fff;
  font-size:34px;
  letter-spacing:-.06em;
}
.projector-copy p{
  margin:0;
  color:#c9c9cf;
  font-size:13px;
  line-height:1.48;
}
.projector-actions{
  display:flex;
  gap:10px;
  margin-top:19px;
  flex-wrap:wrap;
}
.projector-actions a,
.projector-actions button{
  border:1px solid rgba(255,255,255,.18);
  border-radius:99px;
  padding:10px 13px;
  background:transparent;
  color:#fff;
  text-decoration:none;
  font:10px var(--mono);
  cursor:pointer;
}
.projector-actions a{
  border-color:var(--lime);
  color:var(--lime);
}

/* ============================================================
   STATUS
   ============================================================ */
.network-status{
  position:absolute;
  left:50%;
  bottom:clamp(28px,5vh,55px);
  z-index:20;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.45);
  font:9px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
}
.status-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px var(--lime);
}
.network.is-dragging .status-dot{
  animation:status-pulse .7s ease-in-out infinite alternate;
}
.hero-footer{
  position:absolute;
  right:clamp(22px,5vw,72px);
  bottom:38px;
  z-index:8;
  margin:0;
  color:var(--muted);
  text-align:right;
  font-size:12px;
  line-height:1.3;
  pointer-events:none;
}

/* ============================================================
   PROJECTS / LOWER SECTION
   ============================================================ */
.projects{
  padding:110px clamp(22px,5vw,72px);
  background:var(--paper);
}
.section-heading{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  align-items:end;
  gap:30px;
  margin-bottom:60px;
}
.projects h2{font-size:clamp(48px,7vw,98px)}
.section-heading>p:last-child{
  max-width:250px;
  margin:0 0 6px;
  font-size:14px;
  line-height:1.45;
}
.tabs-container{
  max-width:1280px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.tab-row{
  position:relative;
  height:270px;
  display:flex;
  gap:9px;
  overflow:hidden;
  border-radius:18px;
  isolation:isolate;
}
.row-ambient{
  position:absolute;
  inset:-40px;
  z-index:-3;
  background-image:var(--row-bg);
  background-size:cover;
  background-position:center;
  filter:blur(34px) saturate(1.45);
  opacity:.34;
  transform:scale(1.17);
  animation:ambient-float 10s ease-in-out infinite alternate;
}
.tab-row::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 50%,color-mix(in srgb,var(--row-accent,#8aa0ff) 34%,transparent),transparent 48%),
    linear-gradient(90deg,rgba(16,16,17,.9),rgba(16,16,17,.2));
  pointer-events:none;
}
.panel{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  cursor:pointer;
  border-radius:12px;
  isolation:isolate;
  background:#17181d;
  transition:flex .75s cubic-bezier(.77,0,.18,1),filter .4s,transform .4s;
}
.panel:hover{filter:brightness(1.07)}
.panel.active{
  flex:14;
  cursor:default;
}
.panel:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg,rgba(16,16,17,.16),rgba(16,16,17,.06)),
    var(--thumb);
  background-size:cover;
  background-position:var(--pos,center);
  filter:saturate(1.1);
  transition:transform .8s,filter .5s;
}
.panel.active::before{
  transform:scale(1.065);
  filter:saturate(1.25);
}
.panel-shade{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,#101011ef 0%,#101011b8 46%,#10101118 100%);
}
.panel:not(.active) .panel-shade{
  background:rgba(16,16,17,.48);
}
.tab-label{
  position:absolute;
  z-index:2;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  color:#fff;
  white-space:nowrap;
  font:500 10px var(--mono);
  letter-spacing:.12em;
  writing-mode:vertical-rl;
}
.panel.active .tab-label{
  left:auto;
  right:19px;
  transform:none;
  color:var(--project-accent,var(--lime));
  writing-mode:initial;
}
.panel-content{
  position:absolute;
  z-index:2;
  left:clamp(22px,4vw,55px);
  top:50%;
  right:42%;
  color:#fff;
  opacity:0;
  transform:translateY(-50%) translateX(-8px);
  transition:opacity .38s ease .18s,transform .38s ease .18s;
}
.panel.active .panel-content{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.project-number{
  margin:0 0 13px;
  color:var(--project-accent,var(--lime));
  font:10px var(--mono);
  letter-spacing:.09em;
}
.panel h3{
  margin:0 0 9px;
  font-size:clamp(31px,4vw,58px);
  line-height:.9;
  letter-spacing:-.07em;
}
.project-type{
  margin:0 0 22px;
  font-size:15px;
}
.description{
  max-width:400px;
  margin:0 0 21px;
  color:#f3f3f3;
  font-size:13px;
  line-height:1.45;
}
.panel-content a{
  padding-bottom:4px;
  border-bottom:1px solid var(--project-accent,var(--lime));
  color:#fff;
  text-decoration:none;
  font:11px var(--mono);
  transition:.2s;
}
.panel-content a:hover,.panel-content a:focus-visible{
  color:var(--project-accent,var(--lime));
  border-color:#fff;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  padding:30px clamp(22px,5vw,72px);
  background:var(--ink);
  color:var(--white);
}
footer p{opacity:.65}
footer>a:last-child{color:var(--lime)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes tab-cursor-blink{50%{opacity:0}}
@keyframes status-pulse{to{transform:scale(1.8);opacity:.45}}
@keyframes projector-drift{
  from{transform:scale(1.08) translate3d(-1.5%,0,0)}
  to{transform:scale(1.12) translate3d(1.5%,-1%,0)}
}
@keyframes ambient-float{
  from{transform:scale(1.17) translate3d(-1%,0,0)}
  to{transform:scale(1.21) translate3d(1%,1%,0)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .hero{min-height:760px}
  .hero-copy{max-width:500px}
  .project-projector{width:min(390px,43vw)}
}

@media(max-width:800px){
  .hero{min-height:820px}
  .hero-copy{margin-top:82px}
  .hero h1{font-size:clamp(54px,10vw,78px)}
  .project-projector{
    right:18px;
    width:min(370px,48vw);
  }
  .section-heading{
    grid-template-columns:1fr;
    gap:18px;
  }
  .section-heading>p:last-child{margin:0}
  .tab-row{height:315px}
  .panel.active{flex:12}
  .panel-content{right:14px}
  .description{max-width:310px}
  footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:620px){
  .hero{
    min-height:900px;
    padding-top:19px;
  }
  .nav-projects{font-size:9px}
  .hero-copy{
    max-width:100%;
    margin-top:72px;
  }
  .hero h1{font-size:clamp(48px,15vw,65px)}
  .round-link{margin-top:24px}

  .core{width:138px;height:138px}
  .core.is-expanded{width:170px;height:170px}
  .core-brand{font-size:30px}

  .project-node{
    min-height:34px;
    padding:6px 9px;
    font-size:9px;
  }
  .project-node .node-name{display:none}

  .project-projector{
    left:14px;
    right:14px;
    top:auto;
    bottom:92px;
    width:auto;
    min-height:0;
    transform:translateY(24px) scale(.98);
  }
  .project-projector.is-open{
    transform:translateY(0) scale(1);
  }
  .projector-screen{height:155px}
  .projector-copy{padding:16px 18px 18px}
  .projector-copy h2{font-size:27px}
  .projector-copy p{font-size:12px}

  .network-status{bottom:65px}
  .hero-footer{
    right:18px;
    bottom:28px;
    font-size:10px;
  }

  .projects{padding-block:75px}
  .tabs-container,.tab-row{gap:5px}
  .tab-row{height:305px}
  .panel.active{flex:10}
  .panel:not(.active){flex:.45}
  .panel-content{left:20px}
  .panel h3{font-size:34px}
  .project-type{margin-bottom:13px;font-size:13px}
  .description{margin-bottom:15px;font-size:12px}
  .tab-label{top:12px}
}

@media(max-width:390px){
  .hero{min-height:870px}
  .hero h1{font-size:46px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media(pointer:coarse){
  .project-node{min-height:38px;padding-inline:11px}
}