:root{
  --lb-void:#02030a;
  --lb-ink:#070a14;
  --lb-bone:#eee9df;
  --lb-cyan:#19e6df;
  --lb-violet:#925cff;
  --lb-ember:#ff6a21;
  --lb-line:rgba(238,233,223,.22);
}

html{ background:var(--lb-void) }
body{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  color:var(--lb-bone);
  background:
    radial-gradient(circle at 18% 18%,rgba(25,230,223,.11),transparent 28rem),
    radial-gradient(circle at 82% 40%,rgba(146,92,255,.13),transparent 34rem),
    var(--lb-void);
}
body::before{
  content:"";
  position:fixed;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:url('https://lightbrush-jthcetp6s-lightbrushprojects-projects.vercel.app/assets/images/glslop/nested-orbit-reliquary-profile.webp') calc(100% + 3vw) 5vh / min(74vw,960px) auto no-repeat;
  opacity:.46;
  filter:saturate(1.35) contrast(1.08);
  -webkit-mask-image:linear-gradient(105deg,transparent 4%,#000 44%,#000 72%,transparent 100%);
  mask-image:linear-gradient(105deg,transparent 4%,#000 44%,#000 72%,transparent 100%);
  animation:none;
}
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,3,10,.98) 0%,rgba(2,3,10,.86) 38%,rgba(2,3,10,.28) 72%,rgba(2,3,10,.88) 100%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(238,233,223,.035) 80px);
}

.site-head{
  background:rgba(2,3,10,.76);
  border-bottom:1px solid var(--lb-line);
  box-shadow:0 16px 60px rgba(0,0,0,.35);
  backdrop-filter:blur(18px) saturate(1.2);
}
.site-head .wordmark,.site-head a{ color:var(--lb-bone) }
.site-head .wordmark-gl,.site-head a:hover{ color:var(--lb-cyan) }
.site-head a:hover{ text-shadow:0 0 18px rgba(25,230,223,.7) }

main.wrap{
  position:relative;
  padding-top:clamp(54px,8vw,104px);
  padding-bottom:80px;
}
main.wrap::before{
  content:"LIGHTBRUSH / SHADER RELIQUARY";
  display:block;
  margin:0 0 10px;
  color:var(--lb-cyan);
  font:600 10px/1 var(--mono);
  letter-spacing:.28em;
}

.profilecard{
  position:relative;
  isolation:isolate;
  max-width:820px;
  min-height:270px;
  padding:clamp(24px,5vw,54px)!important;
  overflow:hidden;
  border:1px solid rgba(238,233,223,.3)!important;
  border-radius:2px!important;
  background:
    linear-gradient(100deg,rgba(4,6,14,.97) 0 48%,rgba(4,6,14,.76) 67%,rgba(4,6,14,.9) 100%),
    url('/posters/wbtapj0s.png') 92% 50% / auto 150% no-repeat!important;
  box-shadow:24px 28px 0 rgba(25,230,223,.055),0 38px 100px rgba(0,0,0,.5)!important;
}
.profilecard::before{
  content:"LIVE VISUAL SYSTEMS · CC0";
  position:absolute;
  top:18px;
  right:20px;
  color:rgba(238,233,223,.62);
  font:9px/1 var(--mono);
  letter-spacing:.18em;
}
.profilecard::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(var(--lb-cyan),var(--lb-violet),var(--lb-ember));
  box-shadow:0 0 24px var(--lb-cyan);
}
.profilecard .kicker{ color:var(--lb-ember);letter-spacing:.18em }
.handle{
  max-width:9ch;
  margin:.12em 0 .3em!important;
  color:var(--lb-bone)!important;
  font-size:clamp(42px,8vw,88px)!important;
  font-weight:800;
  line-height:.82!important;
  letter-spacing:-.075em!important;
  text-shadow:0 0 38px rgba(146,92,255,.38)!important;
}
.bio{
  max-width:52ch!important;
  margin:18px 0 20px!important;
  padding-left:14px;
  color:#d8f8f5!important;
  border-left:2px solid var(--lb-cyan);
  font-size:14px!important;
  line-height:1.55;
}
.stats{
  color:rgba(238,233,223,.68)!important;
  font-family:var(--mono);
  letter-spacing:.04em;
}
.stats b,.stats strong{ color:var(--lb-cyan)!important;text-shadow:0 0 12px rgba(25,230,223,.75) }

.csspeek{ margin:22px 0 46px!important }
.csspeek>summary{
  color:rgba(238,233,223,.7)!important;
  background:rgba(4,6,14,.8)!important;
  border:1px solid var(--lb-line)!important;
  box-shadow:none!important;
}
.csspeek-pre{ background:rgba(4,6,14,.94)!important;border-color:var(--lb-line)!important }

main .sortbar{ color:rgba(238,233,223,.72) }
main .sortlink{
  color:var(--lb-bone)!important;
  background:rgba(4,6,14,.76)!important;
  border:1px solid var(--lb-line)!important;
}
main .sortlink.on,main .sortlink:hover{ color:var(--lb-void)!important;background:var(--lb-cyan)!important }

main .grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:clamp(12px,2vw,24px)!important;
  align-items:start;
  margin-top:24px;
}
body main.wrap .grid .cell{
  position:relative;
  grid-column:span 4;
  overflow:hidden;
  color:var(--lb-bone)!important;
  background:rgba(5,7,16,.88)!important;
  border:1px solid var(--lb-line)!important;
  border-radius:1px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.32)!important;
  transform:none!important;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
body main.wrap .grid .cell:first-child{ grid-column:span 7 }
body main.wrap .grid .cell:nth-child(2){ grid-column:span 5 }
body main.wrap .grid .cell:nth-child(3){ border-color:rgba(255,106,33,.62)!important }
body main.wrap .grid .cell:nth-child(4){ border-color:rgba(25,230,223,.55)!important }
body main.wrap .grid .cell:nth-child(5){ border-color:rgba(146,92,255,.62)!important }
body main.wrap .grid .cell:hover{
  z-index:3;
  border-color:var(--lb-cyan)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.56),0 0 0 1px rgba(25,230,223,.28)!important;
  transform:translateY(-7px)!important;
}
body main.wrap .grid .frame{ aspect-ratio:1!important;background:#000;overflow:hidden }
body main.wrap .grid .frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.04);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
body main.wrap .grid .cell:hover .frame img{ transform:scale(1.045);filter:saturate(1.28) contrast(1.08) }
body main.wrap .grid .cap{
  min-height:62px;
  padding:11px 12px 13px!important;
  background:linear-gradient(90deg,rgba(7,10,20,.98),rgba(7,10,20,.82));
  border-top:1px solid var(--lb-line);
}
body main.wrap .grid .t{ font-weight:700;letter-spacing:.015em }
body main.wrap .grid .corner{
  color:var(--lb-cyan)!important;
  background:rgba(2,3,10,.84)!important;
  border:1px solid rgba(25,230,223,.36);
  backdrop-filter:blur(8px);
}

.site-foot{
  color:rgba(238,233,223,.55);
  background:#010207;
  border-top:1px solid var(--lb-line);
}
a{ color:var(--lb-cyan) }
a:hover{ color:#a8fff8 }

@media(max-width:720px){
  body::before{ background-position:50% 96px;background-size:115vw auto;opacity:.25 }
  main.wrap{ padding-top:46px }
  .profilecard{ min-height:360px;background-position:88% 94%!important;background-size:auto 82%!important }
  .profilecard::before{ display:none }
  .handle{ font-size:52px!important }
  body main.wrap .grid .cell,body main.wrap .grid .cell:first-child,body main.wrap .grid .cell:nth-child(2){ grid-column:span 12 }
}

@media(prefers-reduced-motion:reduce){
  body::before{ background-image:url('/posters/ftemur23.png')!important }
  .profilecard{ animation:none!important }
  body main.wrap .grid .cell,body main.wrap .grid .frame img{ transition:none!important }
}