/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
.is-touching .pointer-aurora {
  opacity: .62;
}
.signal-off .static-mid,.signal-off .static-near,.signal-off .pointer-aurora {
  opacity: 0;
}
.kit-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 0 0;
  scroll-margin-top: 30px;
}
.section-heading {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 38px;
}
.section-index {
  margin: 0;
  color: var(--mint);
  font: 500 10px/1 var(--font-geist-mono),monospace;
}
.section-heading .eyebrow {
  margin: 0 0 12px;
}
.section-heading h2 {
  margin: 0;
  max-width: 740px;
  font-size: clamp(2.2rem,6vw,5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.055em;
}
.foundation-grid,.component-board,.editorial-grid {
  display: grid;
  gap: 14px;
}
.foundation-grid .wide {
  min-height: 390px;
}
.swatches {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px 8px;
  margin-top: 34px;
}
.swatch i {
  display: block;
  height: 60px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.swatch span,.swatch code {
  display: block;
}
.swatch span {
  font-size: .82rem;
}
.swatch code {
  margin-top: 4px;
  color: var(--muted);
  font-size: .65rem;
}
.s-void {
  background: #09090b;
}
.s-carbon {
  background: #121216;
}
.s-mint {
  background: #54f6c8;
}
.s-pink {
  background: #ff5fb7;
}
.s-violet {
  background: #a66cff;
}
.s-blue {
  background: #4ca7ff;
}
.gradient-bar {
  height: 16px;
  margin-top: 28px;
  border-radius: 8px;
  background: var(--vapor);
  background-size: 180% 180%;
  animation: gradient-drift 12s ease-in-out infinite alternate;
}
.depth-stack {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  perspective: 600px;
}
.depth-stack div {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--mint);
  font: 500 10px/1 var(--font-geist-mono),monospace;
}
.depth-stack div:nth-child(1) {
  transform: scale(.9);
  opacity: .45;
}
.depth-stack div:nth-child(2) {
  transform: translateY(-8px) scale(.95);
  opacity: .7;
}
.depth-stack div:nth-child(3) {
  transform: translateY(-16px);
  box-shadow: 0 18px 38px rgba(0,0,0,.4);
}
.depth-stack span {
  color: var(--ink);
}
.type-board {
  display: grid;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(14,14,18,.6);
}
.type-board>div {
  padding: 28px;
  border-bottom: 1px solid var(--line);
}
.type-board>div:last-child {
  border: 0;
}
.type-display {
  margin: 42px 0 0;
  font-size: clamp(3.1rem,9vw,7.6rem);
  font-weight: 300;
  line-height: .84;
  letter-spacing: -.07em;
}
.type-board h3 {
  max-width: 600px;
  margin: 40px 0 20px;
  font-size: clamp(1.8rem,4vw,3.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.body-large {
  max-width: 610px;
  color: #aaa8ae;
  font-size: 1.1rem;
  line-height: 1.7;
}
.body-small {
  max-width: 510px;
  margin-top: 24px;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.65;
}
.type-board>div>code {
  display: inline-block;
  margin-top: 38px;
  color: var(--mint);
  font-size: .78rem;
  letter-spacing: .08em;
}
.component-board {
  grid-template-columns: 1fr;
}
.action-stack {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}
.action-stack .button {
  width: 100%;
}
.button-ghost {
  justify-content: flex-start;
  padding-inline: 3px;
  color: #c6c4c9;
  background: transparent;
}
.button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.state-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.55;
}
.state-note>span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--mint);
}
.field-label,.radio-group legend {
  color: var(--muted);
  font: 500 9px/1 var(--font-geist-mono),monospace;
  letter-spacing: .16em;
}
.field-label {
  display: block;
  margin: 30px 0 8px;
}
.input-wrap {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
}
.input-wrap:focus-within {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(84,246,200,.08);
}
.input-wrap input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: 400 .9rem var(--font-geist-mono),monospace;
}
.input-wrap span {
  margin-right: 12px;
  color: var(--mint);
  font: 500 8px var(--font-geist-mono),monospace;
  letter-spacing: .12em;
}
.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  color: #c8c6cb;
  font-size: .84rem;
}
.toggle {
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #151519;
  cursor: pointer;
}
.toggle i {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 3px;
  left: 4px;
  border-radius: 50%;
  background: #69686e;
  transition: transform .25s,background .25s,box-shadow .25s;
}
.toggle.on i {
  transform: translateX(19px);
  background: var(--mint);
  box-shadow: 0 0 14px rgba(84,246,200,.5);
}
.radio-group {
  padding: 0;
  margin: 28px 0 0;
  border: 0;
}
.radio-group legend {
  margin-bottom: 10px;
}
.radio-group label {
  display: inline-block;
  margin: 0 7px 7px 0;
  cursor: pointer;
}
.radio-group input {
  position: absolute;
  opacity: 0;
}
.radio-group span {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: .72rem;
}
.radio-group input:checked+span {
  border-color: rgba(84,246,200,.5);
  color: var(--mint);
  background: rgba(84,246,200,.06);
}
.radio-group input:focus-visible+span {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 30px;
}
.glyph {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.02);
  font-size: 1.5rem;
}
.glyph small {
  color: var(--muted);
  font: 500 8px/1 var(--font-geist-mono),monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.demo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.demo-nav>div {
  display: flex;
  align-items: center;
  gap: 13px;
}
.demo-nav>div>a {
  display: none;
  color: var(--muted);
  font: 500 8px/1 var(--font-geist-mono),monospace;
  letter-spacing: .1em;
  text-decoration: none;
}
.demo-nav>div>a.active {
  color: var(--mint);
}
.link-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 30px;
}
.link-list a {
  font-size: .86rem;
  text-underline-offset: 5px;
  text-decoration-color: rgba(84,246,200,.45);
}
.link-list a span,.arrow-link span {
  color: var(--mint);
}
.link-list .arrow-link,.arrow-link {
  text-decoration: none;
}
.link-list .muted-link {
  color: var(--muted);
  font: 500 9px/1 var(--font-geist-mono),monospace;
  letter-spacing: .12em;
}
.editorial-grid {
  align-items: start;
}
.article-card,.index-card,.editorial-aside details,.status-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(14,14,18,.7);
  backdrop-filter: blur(12px);
}
.article-card {
  padding: 28px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: var(--muted);
  font: 500 9px/1 var(--font-geist-mono),monospace;
  letter-spacing: .14em;
}
.article-meta span:first-child {
  color: var(--mint);
}
.article-card>h3 {
  margin: 45px 0 26px;
  font-size: clamp(2.4rem,7vw,5rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.06em;
}
.article-dek {
  max-width: 650px;
  color: #aaa8ae;
  font-size: 1.08rem;
  line-height: 1.65;
}
.article-rule {
  width: 100%;
  height: 1px;
  margin: 42px 0;
  background: var(--vapor);
  opacity: .55;
}
.dropcap {
  max-width: 680px;
  color: #c5c3c8;
  font-size: 1rem;
  line-height: 1.8;
}
.dropcap:first-letter {
  float: left;
  margin: 7px 10px 0 0;
  color: var(--mint);
  font-size: 3.7rem;
  line-height: .7;
}
.article-card blockquote {
  margin: 42px 0;
  padding: 26px 0 26px 24px;
  border-left: 1px solid var(--violet);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.45;
}
.article-card cite {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font: 500 8px/1 var(--font-geist-mono),monospace;
  letter-spacing: .15em;
}
.article-card pre {
  overflow: auto;
  margin: 34px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #070709;
  color: var(--mint);
  font-size: .78rem;
  line-height: 1.7;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-row a {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--muted);
  font: 500 8px/1 var(--font-geist-mono),monospace;
  letter-spacing: .1em;
  text-decoration: none;
}
.editorial-aside {
  display: grid;
  gap: 14px;
}
.index-card {
  position: relative;
  overflow: hidden;
  padding: 26px;
}
.card-number {
  margin: 48px 0 20px;
  color: transparent;
  background: var(--vapor);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 5.5rem;
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.08em;
}
.index-card h3 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: -.04em;
}
.index-card>p:not(.component-label):not(.card-number) {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
}
.index-card .arrow-link {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  color: var(--ink);
  font-size: .82rem;
}
.editorial-aside details {
  padding: 0 22px;
}
.editorial-aside summary {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
}
.editorial-aside summary::-webkit-details-marker {
  display: none;
}
.editorial-aside summary i {
  color: var(--mint);
  font-style: normal;
  font-size: 1.2rem;
}
.editorial-aside details[open] summary i {
  transform: rotate(45deg);
}
.editorial-aside details p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}
.status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
}
.status-card>i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 14px var(--mint);
}
.status-card strong,.status-card span {
  display: block;
}
.status-card strong {
  font: 500 9px/1.5 var(--font-geist-mono),monospace;
  letter-spacing: .12em;
}
.status-card span {
  color: var(--muted);
  font-size: .7rem;
}
.behavior-strip {
  max-width: 1180px;
  margin: 110px auto 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(14,14,18,.62);
}
.behavior-strip>div {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.behavior-strip>div:last-child {
  border: 0;
}
.behavior-strip>div span {
  color: var(--mint);
  font: 500 9px/1 var(--font-geist-mono),monospace;
  letter-spacing: .13em;
}
.behavior-strip>div p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}
footer {
  max-width: 1180px;
  margin: 70px auto 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: var(--muted);
  font: 500 8px/1.4 var(--font-geist-mono),monospace;
  letter-spacing: .12em;
}
footer p {
  margin: 0;
}
footer a {
  text-underline-offset: 4px;
}
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 17px;
  border: 1px solid rgba(84,246,200,.3);
  border-radius: 30px;
  color: var(--ink);
  background: rgba(13,16,16,.92);
  box-shadow: 0 12px 40px #000;
  backdrop-filter: blur(15px);
  font-size: .78rem;
  transform: translate(-50%,100px);
  opacity: 0;
  transition: transform .3s,opacity .3s;
}
.toast.show {
  transform: translate(-50%,0);
  opacity: 1;
}
.toast i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
@media (hover:hover) {
  .glyph:hover {
    border-color: rgba(84,246,200,.45);
    color: var(--mint);
    transform: translateY(-2px);
  }
  .tag-row a:hover {
    border-color: var(--mint);
    color: var(--mint);
  }
  .index-card:hover {
    border-color: rgba(166,108,255,.4);
  }
  .arrow-link:hover span {
    transform: translateX(4px);
  }
  .arrow-link span {
    display: inline-block;
    transition: transform .2s;
  }
}
@media (min-width:720px) {
  .section-heading {
    grid-template-columns: 72px 1fr;
  }
  .swatches {
    grid-template-columns: repeat(3,1fr);
  }
  .foundation-grid {
    grid-template-columns: 1.4fr .6fr;
  }
  .type-board {
    grid-template-columns: 1.25fr .75fr;
  }
  .type-board>div {
    padding: 36px;
    border-right: 1px solid var(--line);
  }
  .type-board>div:first-child {
    grid-row: span 2;
  }
  .type-board>div:last-child {
    border-right: 0;
  }
  .component-board {
    grid-template-columns: repeat(2,1fr);
  }
  .demo-nav>div>a {
    display: block;
  }
  .article-card {
    padding: 48px;
  }
  .behavior-strip {
    display: grid;
    grid-template-columns: 150px repeat(2,1fr);
    gap: 0 26px;
  }
  .behavior-strip>div {
    padding: 22px;
  }
  .behavior-strip>div:nth-of-type(odd) {
    border-right: 1px solid var(--line);
  }
  footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media (min-width:1000px) {
  .editorial-grid {
    grid-template-columns: minmax(0,1.65fr) minmax(280px,.6fr);
  }
  .behavior-strip {
    grid-template-columns: 140px repeat(4,1fr);
  }
  .behavior-strip>div {
    padding: 0 22px;
    border-bottom: 0;
    border-right: 1px solid var(--line) !important;
  }
  .behavior-strip>div:last-child {
    border-right: 0 !important;
  }
}
.grit-shell {
  background: #08080a;
}
.grit-shell .atmosphere {
  background: linear-gradient(103deg,#08080a,#0d0c10 48%,#070709);
}
.grit-shell .haze {
  opacity: .035;
  filter: blur(130px);
}
.pointer-aurora {
  display: none !important;
}
.dust-canvas {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
}
.grit-shell .static-layer {
  opacity: .58;
  filter: contrast(1.35);
}
.grit-shell .static-far {
  background-image: radial-gradient(ellipse,rgba(255,255,255,.42) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(255,255,255,.2) 0 .8px,transparent 1.5px);
  background-size: 13px 17px,29px 23px;
  background-position: 2px 7px,19px 3px;
}
.grit-shell .static-mid {
  background-image: repeating-linear-gradient(177deg,transparent 0 19px,rgba(84,246,200,.1) 20px,transparent 21px 48px),radial-gradient(ellipse,rgba(255,95,183,.55) 0 1.3px,transparent 2px),radial-gradient(circle,rgba(76,167,255,.5) 0 1px,transparent 1.8px);
  background-size: auto,37px 43px,61px 53px;
  transform: none;
}
.grit-shell .static-near {
  opacity: .5;
  background-image: linear-gradient(90deg,transparent 0 17%,rgba(255,255,255,.12) 17.1%,transparent 17.3% 69%,rgba(166,108,255,.15) 69.1%,transparent 69.4%),radial-gradient(ellipse,rgba(255,255,255,.65) 0 1.7px,transparent 2.5px);
  background-size: 100% 31px,79px 67px;
  transform: none;
}
.scratch-field {
  position: absolute;
  inset: 0;
  opacity: .34;
  background: repeating-linear-gradient(96deg,transparent 0 11vw,rgba(255,255,255,.045) 11.08vw,transparent 11.15vw 24vw),repeating-linear-gradient(1deg,transparent 0 39px,rgba(255,255,255,.055) 40px,transparent 41px 97px);
  mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.grit-shell .vignette {
  opacity: .88;
  box-shadow: inset 0 0 210px 64px #000;
}
.grit-shell:after {
  content: "";
  position: fixed;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background: linear-gradient(transparent 49%,rgba(0,0,0,.55) 50%);
  background-size: 100% 4px;
  mix-blend-mode: multiply;
}
.hacked-bar {
  border-bottom-style: dashed;
}
.specimen-card,.article-card,.index-card,.editorial-aside details,.status-card,.behavior-strip,.type-board {
  border-radius: 2px;
  background: rgba(12,12,15,.76);
  backdrop-filter: blur(2px);
  box-shadow: none;
  clip-path: polygon(0 0,96% 0,96% 3px,100% 3px,100% 91%,99% 91%,99% 100%,5% 100%,5% 99%,0 99%);
}
.specimen-card:after,.article-card:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background: repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.06) 26px,transparent 27px 71px);
}
.feature-card {
  background: linear-gradient(117deg,rgba(255,95,183,.045),rgba(12,12,15,.82) 37%,rgba(76,167,255,.035));
}
.feature-card .orb {
  display: none;
}
.distressed-grid {
  gap: 9px;
}
.button {
  border-radius: 1px;
  text-transform: uppercase;
  font: 600 10px/1 var(--font-geist-mono),monospace;
  letter-spacing: .1em;
  clip-path: polygon(0 0,95% 0,95% 3px,100% 3px,100% 100%,4% 100%,4% 97%,0 97%);
}
.button-primary {
  background: #dcded8;
  color: #08080a;
  box-shadow: 4px 0 0 rgba(84,246,200,.42),-3px 0 0 rgba(255,95,183,.35);
}
.button:hover {
  box-shadow: 7px 0 0 rgba(84,246,200,.52),-6px 0 0 rgba(255,95,183,.48);
  transform: translate(-1px,1px);
}
.button:active {
  filter: contrast(1.6);
  transform: translate(3px,0);
}
.compose {
  opacity: .72;
  transform: translateY(18px);
  text-shadow: -4px 0 rgba(255,95,183,.5),4px 0 rgba(76,167,255,.48);
  filter: blur(.35px);
  transition: opacity .65s,transform .65s,text-shadow .75s,filter .65s;
}
.compose.composed {
  opacity: 1;
  transform: none;
  text-shadow: 0 0 transparent;
  filter: none;
}
.signal-link {
  position: relative;
}
.signal-link.hit {
  animation: rgb-hit .5s steps(2,end);
}
.signal-link.hit:before,.signal-link.hit:after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-decoration: none;
}
.signal-link.hit:before {
  color: #ff5fb7;
  transform: translate(-4px,1px);
  clip-path: inset(0 0 48% 0);
}
.signal-link.hit:after {
  color: #54f6c8;
  transform: translate(5px,-1px);
  clip-path: inset(52% 0 0 0);
}
@keyframes rgb-hit {
  0%,100% {
    transform: none;
  }
  25% {
    transform: translateX(3px);
  }
  50% {
    transform: translateX(-2px);
    filter: contrast(1.6);
  }
  75% {
    transform: translateX(1px);
  }
}
.ui-icon {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--ink);
  background: rgba(8,8,10,.6);
  cursor: pointer;
}
.ui-icon small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.ui-icon i,.ui-icon b,.ui-icon em {
  position: absolute;
  display: block;
  font-style: normal;
}
.ui-icon.menu i,.ui-icon.menu b {
  left: 13px;
  width: 17px;
  height: 1px;
  background: currentColor;
}
.ui-icon.menu i {
  top: 16px;
}
.ui-icon.menu b {
  top: 25px;
  width: 11px;
}
.ui-icon.contact i {
  left: 13px;
  top: 14px;
  width: 18px;
  height: 14px;
  border: 1px solid currentColor;
}
.ui-icon.contact b {
  left: 14px;
  top: 12px;
  width: 16px;
  height: 12px;
  border-bottom: 1px solid currentColor;
  transform: rotate(34deg);
}
.ui-icon.share i {
  left: 13px;
  top: 13px;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  box-shadow: 15px 3px 0 -1px #08080a,15px 3px 0 0 currentColor,3px 16px 0 -1px #08080a,3px 16px 0 0 currentColor;
}
.ui-icon.share b {
  left: 18px;
  top: 19px;
  width: 14px;
  height: 11px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-26deg);
}
.ui-icon.close i,.ui-icon.close b {
  left: 13px;
  top: 21px;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.ui-icon.close b {
  transform: rotate(-45deg);
}
.ui-icon.search i {
  left: 12px;
  top: 12px;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.ui-icon.search b {
  left: 26px;
  top: 27px;
  width: 9px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.ui-icon.copy i,.ui-icon.copy b {
  left: 14px;
  top: 12px;
  width: 14px;
  height: 17px;
  border: 1px solid currentColor;
}
.ui-icon.copy b {
  left: 18px;
  top: 16px;
  background: #08080a;
}
.ui-icon:hover {
  color: var(--mint);
  border-color: var(--mint);
  box-shadow: 3px 0 #ff5fb7,-3px 0 #4ca7ff;
}
.topbar nav {
  gap: 7px;
}
.topbar nav>a {
  margin-right: 12px;
}
.icon-button {
  display: none;
}
.icon-grid .ui-icon {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.footer-icons {
  display: flex;
  gap: 7px;
}
.artifact-samples {
  display: grid;
  gap: 10px;
  margin-top: 36px;
}
.artifact {
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  font: 600 9px var(--font-geist-mono);
  letter-spacing: .18em;
}
.artifact.noise {
  background-image: radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.5px);
  background-size: 7px 9px;
}
.artifact.tear {
  background: repeating-linear-gradient(177deg,transparent 0 12px,rgba(84,246,200,.18) 13px,transparent 14px 20px);
}
.artifact.chroma {
  text-shadow: -5px 0 #ff5fb7,5px 0 #4ca7ff;
}
.index-card .signal-link {
  display: inline-block;
  margin-top: 28px;
}
.editorial-aside summary i {
  position: relative;
  width: 17px;
  height: 17px;
}
.editorial-aside summary i:before,.editorial-aside summary i:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 13px;
  height: 1px;
  background: var(--mint);
}
.editorial-aside summary i:after {
  transform: rotate(90deg);
}
.editorial-aside details[open] summary i:after {
  transform: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.signal-off .dust-canvas,.signal-off .static-mid,.signal-off .static-near {
  opacity: 0;
}
.behavior-strip p {
  position: relative;
}
.grit-shell footer {
  border-top-style: dashed;
}
.grit-shell .toast {
  border-radius: 1px;
}
.grit-shell .eyebrow i,.grit-shell .status-card>i,.grit-shell .toast i {
  box-shadow: none;
}
@media (max-width:719px) {
  .hacked-bar nav>a,.hacked-bar .ui-icon.contact,.hacked-bar .ui-icon.share {
    display: none;
  }
  .topbar {
    height: 66px;
  }
  .compose {
    transform: translateY(12px);
    text-shadow: -2px 0 rgba(255,95,183,.55),2px 0 rgba(76,167,255,.5);
  }
  .grit-shell .static-layer {
    opacity: .68;
  }
  .dust-canvas {
    opacity: .88;
  }
  .footer-icons .ui-icon {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .compose,.compose.composed {
    opacity: 1;
    transform: none;
    text-shadow: none;
    filter: none;
  }
  .dust-canvas {
    opacity: .7;
  }
  .signal-link.hit {
    animation: none;
  }
}
.grit-shell .static-far,.grit-shell .static-mid,.grit-shell .static-near {
  background-image: none;
  transform: none;
}
.grit-shell .static-far {
  opacity: .16;
  filter: blur(9px);
  background: radial-gradient(ellipse at 14% 23%,rgba(255,255,255,.12) 0 1px,transparent 9px),radial-gradient(ellipse at 77% 16%,rgba(255,255,255,.09) 0 2px,transparent 13px),radial-gradient(ellipse at 38% 81%,rgba(255,255,255,.1) 0 1px,transparent 10px),radial-gradient(ellipse at 91% 68%,rgba(255,255,255,.08) 0 2px,transparent 16px);
}
.grit-shell .static-mid {
  opacity: .12;
  filter: blur(4px);
  background: linear-gradient(177deg,transparent 19%,rgba(255,255,255,.1) 19.08%,transparent 19.4%),linear-gradient(181deg,transparent 62%,rgba(255,255,255,.08) 62.08%,transparent 62.35%);
}
.grit-shell .static-near {
  opacity: .08;
  filter: blur(1.5px);
  background: linear-gradient(90deg,transparent 0 17%,rgba(255,255,255,.15) 17.06%,transparent 17.14% 73%,rgba(255,255,255,.1) 73.06%,transparent 73.16%);
}
.scratch-field {
  opacity: .1;
  filter: blur(2px);
  background: linear-gradient(96deg,transparent 0 18%,rgba(255,255,255,.12) 18.06%,transparent 18.2% 82%,rgba(255,255,255,.08) 82.08%,transparent 82.2%),linear-gradient(1deg,transparent 0 47%,rgba(255,255,255,.08) 47.08%,transparent 47.22%);
}
.smoke {
  position: absolute;
  width: 90vw;
  height: 66vh;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .2;
  mix-blend-mode: screen;
  animation: smoke-drift 28s ease-in-out infinite alternate;
}
.smoke-one {
  left: -38vw;
  top: 9vh;
  background: radial-gradient(ellipse,rgba(136,130,151,.24),rgba(44,42,54,.12) 43%,transparent 70%);
}
.smoke-two {
  right: -42vw;
  bottom: -18vh;
  background: radial-gradient(ellipse,rgba(112,120,139,.18),rgba(57,51,66,.1) 45%,transparent 72%);
  animation-duration: 37s;
  animation-direction: alternate-reverse;
}
.crt-reflection {
  position: absolute;
  inset: 0;
  opacity: .5;
  background: radial-gradient(ellipse 85% 60% at 50% 42%,transparent 38%,rgba(27,25,32,.28) 72%,rgba(2,2,3,.85) 100%),linear-gradient(112deg,rgba(255,255,255,.018),transparent 27% 76%,rgba(255,255,255,.012));
  box-shadow: inset 0 0 130px 30px rgba(40,36,48,.32);
}
.atmosphere-canvas {
  opacity: .76;
  filter: blur(.18px);
}
.compose {
  opacity: .58;
  transform: translateY(24px);
  text-shadow: -6px 0 rgba(255,95,183,.64),6px 0 rgba(76,167,255,.58),2px 0 rgba(84,246,200,.3);
  filter: blur(.55px);
  transition: opacity .24s ease,transform .3s ease,text-shadow .28s ease,filter .25s ease;
}
.compose.composed {
  opacity: 1;
  transform: none;
  text-shadow: 0 0 transparent;
  filter: none;
  transition-duration: 1.05s,1.05s,1.25s,1.05s;
  transition-delay: .18s,.18s,.28s,.18s;
}
.artifact.noise {
  background: radial-gradient(circle at 17% 22%,rgba(255,255,255,.6) 0 1px,transparent 1.5px),radial-gradient(circle at 73% 31%,rgba(255,255,255,.35) 0 .7px,transparent 1.3px),radial-gradient(circle at 39% 77%,rgba(255,255,255,.5) 0 1px,transparent 1.6px),radial-gradient(circle at 86% 64%,rgba(255,255,255,.32) 0 .6px,transparent 1.2px);
  filter: blur(.25px);
}
@keyframes smoke-drift {
  to {
    transform: translate(13vw,-7vh) scale(1.15);
    opacity: .28;
  }
}
@media (max-width:719px) {
  .smoke {
    filter: blur(54px);
    opacity: .23;
  }
  .atmosphere-canvas {
    opacity: .68;
  }
  .compose {
    transform: translateY(18px);
    text-shadow: -4px 0 rgba(255,95,183,.64),4px 0 rgba(76,167,255,.58),1px 0 rgba(84,246,200,.3);
  }
}
@media (prefers-reduced-motion:reduce) {
  .smoke {
    animation: none;
  }
  .compose,.compose.composed {
    transition: none;
    opacity: 1;
    transform: none;
    text-shadow: none;
    filter: none;
  }
}
.grit-shell .atmosphere {
  background: radial-gradient(ellipse 92% 74% at 50% 43%,#1b1a21 0,#141319 31%,#0d0c10 58%,#050507 100%);
}
.grit-shell .vignette {
  opacity: .9;
  box-shadow: inset 0 0 250px 82px rgba(0,0,0,.96);
}
.crt-reflection {
  opacity: .62;
  background: radial-gradient(ellipse 78% 58% at 50% 42%,rgba(255,255,255,.025) 0,transparent 46%,rgba(20,18,25,.32) 72%,rgba(0,0,2,.78) 100%),linear-gradient(112deg,rgba(255,255,255,.022),transparent 24% 78%,rgba(255,255,255,.014));
  box-shadow: inset 0 0 145px 25px rgba(53,48,61,.36);
}
.atmosphere-canvas {
  opacity: .9;
}
.smoke-one {
  opacity: .25;
}
.smoke-two {
  opacity: .22;
}
.grit-shell .static-far {
  opacity: .2;
}
.grit-shell .static-mid {
  opacity: .15;
}
.grit-shell .static-near {
  opacity: .1;
}
@media (max-width:719px) {
  .grit-shell .atmosphere {
    background: radial-gradient(ellipse 125% 70% at 50% 38%,#1a1920 0,#111116 48%,#050507 100%);
  }
  .grit-shell .vignette {
    box-shadow: inset 0 0 150px 42px rgba(0,0,0,.94);
  }
  .atmosphere-canvas {
    opacity: .86;
  }
}
:root {
  --crt-x: 0;
  --crt-y: 0;
  --crt-scroll: 0;
}
.crt-optics {
  position: fixed;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.screen-bow {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(192,202,207,.13);
  border-radius: 7%/3.2%;
  box-shadow: inset 0 0 24px rgba(180,210,225,.07),inset 0 0 90px 22px rgba(0,0,0,.3),0 0 0 7px rgba(0,0,0,.32);
}
.screen-bow:before,.screen-bow:after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 38px;
  border-radius: 50%;
  border-color: rgba(210,229,235,.08);
  filter: blur(.6px);
}
.screen-bow:before {
  top: -29px;
  border-bottom: 1px solid;
}
.screen-bow:after {
  bottom: -29px;
  border-top: 1px solid;
}
.edge-aberration {
  position: absolute;
  inset: 0;
  border-radius: 7%/3%;
  box-shadow: inset 8px 0 18px -12px rgba(255,76,176,.75),inset -8px 0 18px -12px rgba(78,168,255,.8),inset 0 7px 18px -14px rgba(84,246,200,.65);
  opacity: .72;
  filter: blur(.5px);
}
.phosphor {
  position: absolute;
  inset: -10%;
  opacity: .075;
  background: repeating-linear-gradient(90deg,rgba(255,75,145,.55) 0 .35px,rgba(80,215,255,.42) .45px .8px,rgba(100,255,190,.45) .9px 1.2px,transparent 1.3px 2.25px),repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.62) 2.3px 3px);
  background-size: 2.25px 3px;
  mix-blend-mode: screen;
  transform: translate(calc(var(--crt-x)*1.5px),calc(var(--crt-y)*1.5px));
}
.moire {
  position: absolute;
  inset: -20%;
  opacity: .035;
  background: repeating-radial-gradient(ellipse at 31% 46%,transparent 0 3px,rgba(80,180,255,.8) 3.7px 4px,transparent 4.6px 7px);
  mix-blend-mode: screen;
  transform: translate(calc(var(--crt-x)*-3px),calc(var(--crt-y)*-2px)) scale(1.02);
}
.glass-glare {
  position: absolute;
  inset: -8%;
  opacity: .16;
  background: linear-gradient(116deg,transparent 8%,rgba(220,235,238,.11) 18%,transparent 31% 71%,rgba(175,190,206,.045) 82%,transparent 91%);
  filter: blur(18px);
  transform: translate(calc(var(--crt-x)*8px),calc(var(--crt-y)*6px));
}
.corner {
  position: absolute;
  width: 34vw;
  height: 28vh;
  filter: blur(9px);
  backdrop-filter: blur(1.2px) saturate(.78);
  opacity: .7;
}
.corner-tl {
  left: -12vw;
  top: -9vh;
  border-radius: 0 0 100% 0;
  background: radial-gradient(ellipse at 0 0,rgba(0,0,2,.94),rgba(5,5,8,.55) 45%,transparent 72%);
}
.corner-tr {
  right: -12vw;
  top: -9vh;
  border-radius: 0 0 0 100%;
  background: radial-gradient(ellipse at 100% 0,rgba(0,0,2,.94),rgba(5,5,8,.55) 45%,transparent 72%);
}
.corner-bl {
  left: -12vw;
  bottom: -9vh;
  border-radius: 0 100% 0 0;
  background: radial-gradient(ellipse at 0 100%,rgba(0,0,2,.97),rgba(5,5,8,.6) 45%,transparent 72%);
}
.corner-br {
  right: -12vw;
  bottom: -9vh;
  border-radius: 100% 0 0;
  background: radial-gradient(ellipse at 100% 100%,rgba(0,0,2,.97),rgba(5,5,8,.6) 45%,transparent 72%);
}
.atmosphere-canvas {
  transform: translate(calc(var(--crt-x)*-2px),calc(var(--crt-y)*-2px + var(--crt-scroll)*-.006px)) scale(1.006);
}
.smoke-one {
  translate: calc(var(--crt-x)*-9px) calc(var(--crt-y)*-7px + var(--crt-scroll)*-.012px);
}
.smoke-two {
  translate: calc(var(--crt-x)*5px) calc(var(--crt-y)*4px + var(--crt-scroll)*-.005px);
}
.scratch-field {
  transform: translateY(calc(var(--crt-scroll)*-.003px));
}
.specimen-card,.article-card,.index-card,.editorial-aside details,.status-card,.behavior-strip,.type-board {
  clip-path: none;
  border-radius: 8px;
  background: rgba(12,12,15,.58);
  backdrop-filter: blur(3px);
}
.specimen-card:after,.article-card:after {
  opacity: .08;
}
.hacked-bar {
  border-bottom-style: solid;
}
.grit-shell footer {
  border-top-style: solid;
}
@media (max-width:719px) {
  .site-shell {
    padding-left: 24px;
    padding-right: 24px;
  }
  .screen-bow {
    inset: 2px;
    border-radius: 10%/2.4%;
    box-shadow: inset 0 0 18px rgba(190,220,230,.08),inset 0 0 76px 18px rgba(0,0,0,.44),0 0 0 5px rgba(0,0,0,.42);
  }
  .edge-aberration {
    border-radius: 10%/2.4%;
    box-shadow: inset 9px 0 18px -11px rgba(255,76,176,.8),inset -9px 0 18px -11px rgba(78,168,255,.85),inset 0 8px 20px -14px rgba(84,246,200,.7);
  }
  .corner {
    width: 54vw;
    height: 22vh;
    filter: blur(7px);
    opacity: .76;
  }
  .glass-glare {
    opacity: .19;
  }
  .phosphor {
    opacity: .085;
  }
  .moire {
    opacity: .045;
  }
}
@media (prefers-reduced-motion:reduce) {
  .atmosphere-canvas,.smoke-one,.smoke-two,.scratch-field,.phosphor,.moire,.glass-glare {
    transform: none;
    translate: none;
  }
}
:root {
  --crt-x-near: 0px;
  --crt-y-near: 0px;
  --crt-x-mid: 0px;
  --crt-y-mid: 0px;
  --crt-x-far: 0px;
  --crt-y-far: 0px;
  --crt-scroll-near: 0px;
  --crt-scroll-mid: 0px;
  --crt-scroll-far: 0px;
}
.phosphor {
  transform: translate(var(--crt-x-mid),var(--crt-y-mid));
}
.moire {
  transform: translate(var(--crt-x-far),var(--crt-y-far)) scale(1.02);
}
.glass-glare {
  transform: translate(var(--crt-x-near),var(--crt-y-near));
}
.atmosphere-canvas {
  transform: translate(var(--crt-x-far),calc(var(--crt-y-far) + var(--crt-scroll-mid))) scale(1.006);
}
.smoke-one {
  translate: var(--crt-x-far) calc(var(--crt-y-far) + var(--crt-scroll-near));
}
.smoke-two {
  translate: var(--crt-x-mid) calc(var(--crt-y-mid) + var(--crt-scroll-mid));
}
.scratch-field {
  transform: translateY(var(--crt-scroll-far));
}
@media (prefers-reduced-motion:reduce) {
  .atmosphere-canvas,.smoke-one,.smoke-two,.scratch-field,.phosphor,.moire,.glass-glare {
    transform: none;
    translate: none;
  }
}
.grit-shell,.grit-shell .atmosphere {
  background: radial-gradient(ellipse 94% 76% at 50% 42%,#303a43 0,#252e37 30%,#182129 59%,#080c11 100%);
}
.grit-shell .vignette {
  opacity: .94;
  box-shadow: inset 0 0 270px 88px rgba(0,3,7,.98);
}
.crt-reflection {
  opacity: .7;
  background: radial-gradient(ellipse 76% 57% at 50% 40%,rgba(202,222,232,.06),transparent 48%,rgba(9,16,22,.34) 73%,rgba(0,3,6,.82) 100%),linear-gradient(113deg,rgba(225,240,244,.04),transparent 23% 76%,rgba(170,196,211,.025));
}
.compose,.compose.composed {
  opacity: 1 !important;
  transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  transition: none !important;
}
.edge-aberration {
  inset: 1px;
  border-radius: 7%/3.2%;
  opacity: .5;
  box-shadow: inset 3px 0 7px -5px rgba(255,76,176,.72),inset -3px 0 7px -5px rgba(78,168,255,.78),inset 0 3px 7px -5px rgba(84,246,200,.58);
}
.screen-bow {
  box-shadow: inset 0 0 26px rgba(200,225,234,.1),inset 0 0 105px 27px rgba(0,5,9,.34),0 0 0 6px rgba(0,2,5,.4);
}
.corner {
  width: 26vw;
  height: 22vh;
  opacity: .62;
  filter: blur(12px);
  backdrop-filter: blur(.65px) saturate(.86);
}
.phosphor {
  opacity: .055;
}
.moire {
  opacity: .022;
}
.glass-glare {
  opacity: .2;
}
.smoke {
  opacity: .28;
}
.smoke-one {
  background: radial-gradient(ellipse,rgba(176,194,204,.2),rgba(89,104,117,.12) 43%,transparent 72%);
}
.smoke-two {
  background: radial-gradient(ellipse,rgba(135,157,171,.18),rgba(61,78,91,.1) 46%,transparent 74%);
}
.specimen-card,.article-card,.type-board,.behavior-strip {
  clip-path: none;
  border: 0;
  border-top: 1px solid rgba(220,232,236,.14);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.specimen-card:after,.article-card:after {
  display: none;
}
.preview-grid,.foundation-grid,.component-board,.editorial-grid {
  gap: 0;
}
.preview-grid>.specimen-card,.foundation-grid>.specimen-card,.component-board>.specimen-card {
  padding-top: 30px;
  padding-bottom: 34px;
}
.component-board>.specimen-card:nth-child(even),.preview-grid>.specimen-card:nth-child(even) {
  border-left: 0;
}
.type-board>div {
  background: rgba(10,16,21,.12);
}
.article-card {
  padding-left: 0;
  padding-right: 0;
}
.behavior-strip {
  padding-left: 0;
  padding-right: 0;
}
.index-card {
  background: rgba(13,20,26,.38);
  border-color: rgba(220,232,236,.13);
  backdrop-filter: blur(3px);
}
@media (min-width:720px) {
  .preview-grid,.foundation-grid,.component-board {
    column-gap: px;
  }
  .preview-grid>.specimen-card:nth-child(even),.foundation-grid>.specimen-card:nth-child(even),.component-board>.specimen-card:nth-child(even) {
    border-left: 1px solid rgba(220,232,236,.1);
    padding-left: 30px;
  }
  .preview-grid>.specimen-card:nth-child(odd),.foundation-grid>.specimen-card:nth-child(odd),.component-board>.specimen-card:nth-child(odd) {
    padding-right: 30px;
  }
}
@media (max-width:719px) {
  .grit-shell,.grit-shell .atmosphere {
    background: radial-gradient(ellipse 128% 74%% at 50% 38%,#303a43 0,#222c34 43%,#0a1016 100%);
  }
  .grit-shell .vignette {
    box-shadow: inset 0 0 165px 43px rgba(0,3,7,.97);
  }
  .edge-aberration {
    border-radius: 10%/2.4%;
    box-shadow: inset 2px 0 6px -4px rgba(255,76,176,.65),inset -2px 0 6px -4px rgba(78,168,255,.7),inset 0 2px 6px -4px rgba(84,246,200,.5);
  }
  .corner {
    width: 35vw;
    height: 16vh;
    opacity: .58;
  }
  .phosphor {
    opacity: .06;
  }
  .preview-grid>.specimen-card,.foundation-grid>.specimen-card,.component-board>.specimen-card {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width:720px) {
  .preview-grid,.foundation-grid,.component-board {
    column-gap: 0;
  }
}
@media (max-width:719px) {
  .grit-shell,.grit-shell .atmosphere {
    background: radial-gradient(ellipse 128% 74% at 50% 38%,#303a43 0,#222c34 43%,#0a1016 100%);
  }
}
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --radius-sm: 0.25rem;
    --radius-lg: 0.5rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .resize {
    resize: both;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .italic {
    font-style: italic;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
}
:root {
  --ink: #e9e9e5;
  --muted: #929096;
  --void: #09090b;
  --panel: rgba(18,18,22,.68);
  --line: rgba(255,255,255,.11);
  --pink: #ff5fb7;
  --coral: #ff806f;
  --violet: #a66cff;
  --blue: #4ca7ff;
  --mint: #54f6c8;
  --vapor: linear-gradient(108deg,var(--pink),var(--coral) 24%,var(--violet) 51%,var(--blue) 73%,var(--mint));
  --radius-sm: 10px;
  --radius-lg: 22px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--void);
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--void);
  font-family: var(--font-geist-sans),sans-serif;
}
a {
  color: inherit;
}
button,a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
.site-shell {
  --pointer-x: 50vw;
  --pointer-y: 30vh;
  --drift-x: 0px;
  --drift-y: 0px;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 20px 72px;
  background: #09090b;
}
.atmosphere {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% -20%,#28232d 0,#111116 35%,#09090b 72%);
}
.haze {
  position: absolute;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .11;
}
.haze-a {
  top: -35vw;
  left: -18vw;
  background: #ff5fb7;
  animation: float 18s ease-in-out infinite alternate;
}
.haze-b {
  right: -30vw;
  top: 20vh;
  background: #526cff;
  animation: float 24s ease-in-out -7s infinite alternate-reverse;
}
.static-layer {
  position: absolute;
  inset: -30px;
  background-repeat: repeat;
  mix-blend-mode: screen;
}
.static-far {
  opacity: .22;
  background-image: radial-gradient(circle,rgba(255,255,255,.22) 0 .45px,transparent .7px);
  background-size: 17px 19px;
}
.static-mid {
  opacity: .3;
  transform: translate(var(--drift-x),var(--drift-y));
  transition: transform .3s ease-out;
  background-image: radial-gradient(circle,rgba(84,246,200,.4) 0 .65px,transparent .9px),radial-gradient(circle,rgba(166,108,255,.35) 0 .5px,transparent .8px);
  background-size: 41px 37px,53px 47px;
  background-position: 7px 11px,23px 3px;
}
.static-near {
  opacity: .34;
  transform: translate(calc(var(--drift-x)*-1),calc(var(--drift-y)*-.7));
  transition: transform .18s ease-out;
  background-image: radial-gradient(circle,rgba(255,95,183,.65) 0 .7px,transparent 1px),radial-gradient(circle,rgba(76,167,255,.55) 0 .75px,transparent 1.1px);
  background-size: 97px 83px,137px 109px;
}
.pointer-aurora {
  position: absolute;
  inset: 0;
  opacity: .28;
  background: radial-gradient(220px circle at var(--pointer-x) var(--pointer-y),rgba(84,246,200,.2),rgba(76,167,255,.09) 30%,rgba(255,95,183,.05) 55%,transparent 72%);
}
.vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px 50px #000;
  opacity: .75;
}
.topbar {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font: 650 13px/1 var(--font-geist-mono),monospace;
  letter-spacing: .22em;
  text-decoration: none;
}
.wordmark span {
  color: var(--mint);
  animation: blink 1.2s steps(2) infinite;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.topbar nav>a {
  display: none;
  color: var(--muted);
  font: 500 10px/1 var(--font-geist-mono),monospace;
  letter-spacing: .16em;
  text-decoration: none;
}
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.02);
}
.icon-button span {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
}
.intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 86px 0 64px;
}
.eyebrow,.component-label {
  color: var(--muted);
  font: 500 10px/1.3 var(--font-geist-mono),monospace;
  letter-spacing: .16em;
}
.eyebrow i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
.intro h1 {
  max-width: 920px;
  margin: 22px 0 0;
  font-size: clamp(2.9rem,10vw,7.4rem);
  font-weight: 300;
  line-height: .93;
  letter-spacing: -.065em;
}
.gradient-text {
  color: transparent;
  background: var(--vapor);
  background-size: 180% 180%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: gradient-drift 12s ease-in-out infinite alternate;
}
.lede {
  max-width: 630px;
  margin: 30px 0 0;
  color: #aaa8ae;
  font-size: clamp(1rem,2.2vw,1.22rem);
  line-height: 1.65;
  letter-spacing: -.01em;
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}
.button {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s,box-shadow .2s,border-color .2s,background .2s;
}
.button-primary {
  color: #0a0b0c;
  background: var(--mint);
}
.button-quiet {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255,255,255,.025);
}
.text-link {
  color: #bdbbc1;
  font-size: .88rem;
  text-underline-offset: 5px;
  text-decoration-color: rgba(84,246,200,.45);
}
.text-link span {
  color: var(--mint);
}
.preview-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.specimen-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.feature-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.feature-card h2 {
  position: relative;
  margin: 0;
  font-size: clamp(2.8rem,12vw,5.6rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.06em;
}
.feature-card>p:last-child {
  position: relative;
  max-width: 340px;
  margin: 22px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.feature-card .component-label {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
}
.orb {
  position: absolute;
  width: 300px;
  height: 300px;
  right: -80px;
  top: -70px;
  border-radius: 50%;
  background: var(--vapor);
  filter: blur(38px);
  opacity: .34;
}
.display-sample {
  margin: 42px 0 22px;
  font-size: 7rem;
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.08em;
}
.type-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 500 9px/1 var(--font-geist-mono),monospace;
  letter-spacing: .13em;
}
.mini-card .button {
  width: 100%;
  margin-top: 30px;
}
.mini-card .button+.button {
  margin-top: 10px;
}
@media (hover:hover) {
  .topbar a:hover,.text-link:hover {
    color: var(--mint);
  }
  .button:hover {
    transform: translateY(-2px);
  }
  .button-primary:hover {
    box-shadow: 0 0 28px rgba(84,246,200,.24);
  }
  .button-quiet:hover {
    border-color: rgba(84,246,200,.4);
    background: rgba(84,246,200,.045);
  }
  .icon-button:hover {
    border-color: rgba(84,246,200,.5);
    color: var(--mint);
  }
}
.button:active,.icon-button:active {
  transform: scale(.97);
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}
@media (min-width:720px) {
  .site-shell {
    padding-inline: 36px;
  }
  .topbar nav>a {
    display: block;
  }
  .intro {
    padding: 124px 0 84px;
  }
  .preview-grid {
    grid-template-columns: 1.35fr .65fr;
  }
  .feature-card {
    grid-row: span 2;
    min-height: 514px;
  }
}
@media (min-width:1100px) {
  .site-shell {
    padding-inline: 56px;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .static-mid,.static-near {
    transform: none;
  }
}
@keyframes gradient-drift {
  to {
    background-position: 100% 60%;
  }
}
@keyframes float {
  to {
    transform: translate(12vw,8vh) scale(1.12);
  }
}
@keyframes blink {
  50% {
    opacity: .2;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}