.aya-brand-lab{
  --aya-lab-accent:#a8ff00;
  --aya-lab-rgb:168,255,0;
  position:relative;
  overflow:hidden;
  background:#080808;
  color:#f7f7f2;
  border-top:1px solid rgba(255,255,255,.08);
  isolation:isolate;
}
.aya-brand-lab *{box-sizing:border-box}
.aya-brand-lab__shell{
  width:min(1540px,100%);
  margin:0 auto;
  padding:clamp(80px,9vw,150px) clamp(20px,4vw,64px);
  position:relative;
  z-index:3;
}
.aya-brand-lab__intro{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  gap:48px;
  align-items:end;
  padding-bottom:clamp(44px,5vw,70px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.aya-brand-lab__kicker{
  display:block;
  margin-bottom:18px;
  font-size:10px;
  letter-spacing:.22em;
  font-weight:900;
  color:rgba(255,255,255,.46);
}
.aya-brand-lab h2{
  margin:0;
  color:#f7f7f2;
  font-size:clamp(48px,7vw,112px);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:950;
}
.aya-brand-lab__intro p{
  margin:0;
  color:rgba(255,255,255,.58);
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.5;
}
.aya-brand-lab__workspace{
  display:grid;
  grid-template-columns:minmax(300px,.56fr) minmax(0,1.44fr);
  gap:clamp(26px,4vw,56px);
  padding-top:clamp(38px,5vw,66px);
}
.aya-brand-lab__controls{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.aya-brand-lab__name-box{
  padding:22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}
.aya-brand-lab__name-box label{
  display:block;
  margin-bottom:12px;
  font-size:9px;
  letter-spacing:.19em;
  font-weight:900;
  color:rgba(255,255,255,.5);
}
.aya-brand-lab__input-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:10px;
}
.aya-brand-lab__input-wrap input{
  width:100%;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#fff!important;
  padding:0!important;
  font-size:clamp(23px,2.5vw,36px)!important;
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:900;
}
.aya-brand-lab__input-wrap span{
  color:var(--aya-lab-accent);
  font-weight:900;
}
.aya-brand-lab__name-box small{
  display:block;
  margin-top:12px;
  color:rgba(255,255,255,.32);
}
.aya-brand-lab__stages{
  display:flex;
  flex-direction:column;
}
.aya-brand-lab__stage{
  appearance:none;
  width:100%;
  border:0;
  border-top:1px solid rgba(255,255,255,.11);
  background:transparent;
  color:rgba(255,255,255,.38);
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:center;
  padding:18px 4px;
  cursor:pointer;
  text-align:left;
  transition:color .25s ease,padding-left .25s ease;
}
.aya-brand-lab__stage:last-child{border-bottom:1px solid rgba(255,255,255,.11)}
.aya-brand-lab__stage:hover,.aya-brand-lab__stage.is-active{
  color:#fff;
  padding-left:10px;
}
.aya-brand-lab__stage > span{
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.28);
}
.aya-brand-lab__stage.is-active > span{color:var(--aya-lab-accent)}
.aya-brand-lab__stage strong{
  font-size:clamp(20px,2.2vw,34px);
  letter-spacing:-.035em;
}
.aya-brand-lab__stage i{
  font-style:normal;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  display:grid;place-items:center;
}
.aya-brand-lab__stage.is-active i{
  background:var(--aya-lab-accent);
  color:#070707;
  border-color:transparent;
}
.aya-brand-lab__visual{
  min-height:720px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 24%,rgba(var(--aya-lab-rgb),.11),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012)),
    #0a0a0a;
  position:relative;
  display:flex;
  flex-direction:column;
  box-shadow:0 34px 100px rgba(0,0,0,.25);
}
.aya-brand-lab__visual-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding:24px 26px 0;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.aya-brand-lab__visual-top strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
}
.aya-brand-lab__canvas{
  flex:1;
  min-height:500px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.aya-brand-lab__brand-name{
  position:relative;
  z-index:5;
  max-width:82%;
  text-align:center;
  font-size:clamp(54px,7.5vw,126px);
  line-height:.86;
  letter-spacing:-.07em;
  font-weight:950;
  color:#f7f7f2;
  transition:font-family .35s ease,letter-spacing .35s ease,color .35s ease,transform .35s ease;
}
.aya-brand-lab__brand-sub{
  position:absolute;
  z-index:5;
  top:66%;
  font-size:10px;
  letter-spacing:.24em;
  color:rgba(255,255,255,.42);
}
.aya-brand-lab__brand-mark{
  position:absolute;
  z-index:4;
  width:160px;height:160px;
  top:18%;
  left:50%;
  transform:translateX(-50%);
}
.aya-brand-lab__brand-mark:before,
.aya-brand-lab__brand-mark:after,
.aya-brand-lab__brand-mark span{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:38%;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),border-radius .35s ease,border-color .35s ease,background .35s ease;
}
.aya-brand-lab__brand-mark:after{
  transform:rotate(45deg) scale(.72);
  border-color:rgba(var(--aya-lab-rgb),.55);
}
.aya-brand-lab__brand-mark span:nth-child(1){transform:rotate(18deg) scale(.52)}
.aya-brand-lab__brand-mark span:nth-child(2){transform:rotate(-25deg) scale(.34);border-color:var(--aya-lab-accent)}
.aya-brand-lab__brand-mark span:nth-child(3){transform:scale(.16);background:rgba(var(--aya-lab-rgb),.25);border-color:transparent}
.aya-brand-lab__orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;
}
.aya-brand-lab__orbit--one{width:58%;aspect-ratio:1;animation:ayaLabSpin 24s linear infinite}
.aya-brand-lab__orbit--two{width:38%;aspect-ratio:1;animation:ayaLabSpinReverse 18s linear infinite}
@keyframes ayaLabSpin{to{transform:rotate(360deg)}}
@keyframes ayaLabSpinReverse{to{transform:rotate(-360deg)}}
.aya-brand-lab__mockups{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.aya-brand-lab__mockup{
  position:absolute;
  min-width:150px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(8,8,8,.58);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 55px rgba(0,0,0,.25);
  color:#fff;
  opacity:.4;
  transform:scale(.94);
  transition:opacity .35s ease,transform .35s ease,border-color .35s ease;
}
.aya-brand-lab__mockup small{
  display:block;
  margin-bottom:8px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.36);
}
.aya-brand-lab__mockup strong{
  font-size:12px;
  letter-spacing:.04em;
}
.aya-brand-lab__mockup--card{left:5%;bottom:13%;transform:rotate(-7deg)}
.aya-brand-lab__mockup--social{right:7%;top:22%;transform:rotate(7deg)}
.aya-brand-lab__mockup--web{right:12%;bottom:12%;transform:rotate(-3deg)}
.aya-brand-lab__visual-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:26px;
  align-items:end;
  padding:0 26px 26px;
}
.aya-brand-lab__visual-bottom p{
  margin:0;
  max-width:620px;
  color:rgba(255,255,255,.6);
  font-size:16px;
  line-height:1.5;
}
.aya-brand-lab__cta{
  min-height:54px;
  padding:0 20px;
  border-radius:999px;
  background:var(--aya-lab-accent);
  color:#070707;
  text-decoration:none;
  display:flex;
  gap:18px;
  align-items:center;
  font-size:10px;
  font-weight:950;
  letter-spacing:.11em;
}
.aya-brand-lab__cta i{
  font-style:normal;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.1);
}
.aya-brand-lab__footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:24px;
  margin-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:9px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.32);
  text-transform:uppercase;
}
.aya-brand-lab__ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.aya-brand-lab__grid{
  position:absolute;inset:0;
  opacity:.1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
}
.aya-brand-lab__glow{
  position:absolute;
  width:52vw;height:52vw;
  left:-16vw;bottom:-16vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--aya-lab-rgb),.09),transparent 66%);
}
.aya-brand-lab__word{
  position:absolute;
  right:-.02em;
  bottom:-.06em;
  color:rgba(255,255,255,.018);
  font-size:clamp(120px,21vw,350px);
  line-height:.75;
  font-weight:950;
  letter-spacing:-.08em;
}

/* Stage variations */
.aya-brand-lab__visual[data-stage="logo"] .aya-brand-lab__brand-mark:before{border-radius:50%;transform:rotate(22deg)}
.aya-brand-lab__visual[data-stage="logo"] .aya-brand-lab__brand-mark:after{border-radius:12%;transform:rotate(45deg) scale(.72)}
.aya-brand-lab__visual[data-stage="color"] .aya-brand-lab__brand-name{color:var(--aya-lab-accent)}
.aya-brand-lab__visual[data-stage="color"] .aya-brand-lab__brand-mark span:nth-child(3){transform:scale(.28);background:rgba(var(--aya-lab-rgb),.5)}
.aya-brand-lab__visual[data-stage="type"] .aya-brand-lab__brand-name{letter-spacing:.02em;font-weight:700}
.aya-brand-lab__visual[data-stage="mockups"] .aya-brand-lab__mockup{opacity:1;transform:scale(1)}
.aya-brand-lab__visual[data-stage="mockups"] .aya-brand-lab__mockup--card{transform:rotate(-7deg) scale(1)}
.aya-brand-lab__visual[data-stage="mockups"] .aya-brand-lab__mockup--social{transform:rotate(7deg) scale(1)}
.aya-brand-lab__visual[data-stage="mockups"] .aya-brand-lab__mockup--web{transform:rotate(-3deg) scale(1)}
.aya-brand-lab__visual[data-stage="social"] .aya-brand-lab__mockup--social{opacity:1;transform:rotate(0) scale(1.08);border-color:rgba(var(--aya-lab-rgb),.45)}
.aya-brand-lab__visual[data-stage="web"] .aya-brand-lab__mockup--web{opacity:1;transform:rotate(0) scale(1.08);border-color:rgba(var(--aya-lab-rgb),.45)}
.aya-brand-lab__visual[data-stage="name"] .aya-brand-lab__brand-name{transform:scale(1.03)}

@media(max-width:1040px){
  .aya-brand-lab__workspace{grid-template-columns:1fr}
  .aya-brand-lab__stages{display:grid;grid-template-columns:1fr 1fr}
  .aya-brand-lab__stage:nth-child(2n){border-left:1px solid rgba(255,255,255,.08)}
}
@media(max-width:780px){
  .aya-brand-lab__intro{grid-template-columns:1fr}
  .aya-brand-lab h2{font-size:clamp(48px,15vw,88px)}
  .aya-brand-lab__visual{min-height:620px}
  .aya-brand-lab__canvas{min-height:410px}
  .aya-brand-lab__visual-bottom{grid-template-columns:1fr}
  .aya-brand-lab__cta{width:100%;justify-content:space-between}
  .aya-brand-lab__footer{display:block;line-height:1.8}
}
@media(max-width:540px){
  .aya-brand-lab__shell{padding-left:18px;padding-right:18px}
  .aya-brand-lab__stages{grid-template-columns:1fr}
  .aya-brand-lab__stage:nth-child(2n){border-left:0}
  .aya-brand-lab__visual{min-height:560px;border-radius:20px}
  .aya-brand-lab__visual-top{padding:20px 18px 0}
  .aya-brand-lab__visual-bottom{padding:0 18px 18px}
  .aya-brand-lab__brand-mark{width:125px;height:125px}
  .aya-brand-lab__mockup{min-width:118px;padding:11px}
  .aya-brand-lab__mockup--card{left:3%}
  .aya-brand-lab__mockup--social{right:3%}
  .aya-brand-lab__mockup--web{right:5%}
}
@media(prefers-reduced-motion:reduce){
  .aya-brand-lab *,.aya-brand-lab *:before,.aya-brand-lab *:after{
    animation:none!important;
    transition:none!important;
  }
}