:root {
  --black: #050505;
  --panel: #0b0b0b;
  --white: #f0efe9;
  --dim: #77766f;
  --line: #2f2f2c;
  --acid: #c7ff00;
  --signal: #ff4d00;
  --page: min(1480px, calc(100vw - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0 max(24px, calc((100vw - 1480px) / 2));
  pointer-events: none;
  opacity: .72;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(8.333% - 1px),
    rgba(255,255,255,.045) calc(8.333% - 1px),
    rgba(255,255,255,.045) 8.333%
  );
}

header, main, footer { position: relative; z-index: 1; }
a { color: inherit; }
p, h1, h2, h3, figure, dl, dd { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.skip-link {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: var(--black);
  background: var(--acid);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

.site-header {
  width: var(--page);
  min-height: 92px;
  margin: 0 auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.studio-mark {
  grid-column: 1 / 2;
  width: 54px;
  height: 56px;
  display: block;
}
.studio-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.project-id,
.section-code,
.recommendation,
.row-index,
.row-file,
.instrument,
.build-meta,
footer {
  font-family: "Courier New", Courier, monospace;
}

.project-id {
  grid-column: 2 / 5;
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .09em;
}

.record i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px rgba(199,255,0,.8);
}

nav {
  grid-column: 10 / 13;
  display: flex;
  justify-content: flex-end;
  gap: 26px;
}
nav a {
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .08em;
}
nav a:hover { color: var(--acid); }

.hero {
  position: relative;
  width: var(--page);
  min-height: calc(100vh - 92px);
  margin: 0 auto;
  padding: clamp(54px, 7vw, 110px) 0 82px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  grid-column: 1 / 8;
  padding-right: clamp(24px, 5vw, 86px);
}

.section-code {
  color: var(--dim);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .14em;
}
h1, h2 {
  font-weight: 700;
  letter-spacing: -.078em;
}
h1 {
  max-width: 900px;
  margin-bottom: 38px;
  font-size: clamp(64px, 8vw, 130px);
  line-height: .78;
}
h1 em {
  color: var(--acid);
  font-style: normal;
  font-weight: 400;
}

.lede {
  max-width: 460px;
  margin-bottom: 34px;
  color: #b9b8b0;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
}

.quick-links {
  width: min(100%, 560px);
  border-top: 1px solid var(--white);
}
.quick-links a,
.marker-link {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  text-decoration: none;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .09em;
}
.quick-links a:hover,
.marker-link:hover {
  padding-inline: 12px;
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
}

.recommendation {
  margin: 11px 0 0;
  color: var(--signal);
  font-size: 8px;
  letter-spacing: .08em;
}

.instrument {
  position: relative;
  grid-column: 8 / 13;
  min-width: 0;
  margin: 0;
  border: 1px solid #4a4a46;
  background: var(--panel);
  box-shadow: 14px 14px 0 #111;
  transform: rotate(.35deg);
}
.instrument figcaption,
.instrument-foot {
  min-height: 42px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
}
.instrument figcaption { border-bottom: 1px solid var(--line); }
.instrument-foot {
  position: relative;
  color: var(--dim);
  border-top: 1px solid var(--line);
}
.instrument-foot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: var(--acid);
  animation: progress 5s linear infinite;
}
.record { color: var(--acid); }
.record i { width: 5px; height: 5px; margin-right: 5px; }

.demo-loop {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 65%, rgba(255,77,0,.14), transparent 28%),
    #080808;
}
.demo-loop::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 4px);
}
.demo-grid {
  position: absolute;
  inset: 0;
  opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 12.5% 10%;
}

.readout {
  position: absolute;
  z-index: 4;
  color: var(--dim);
  font-size: 7px;
  letter-spacing: .06em;
}
.readout-a { left: 5%; bottom: 3%; }
.readout-b { right: 5%; top: 3%; }

.demo-frame {
  position: absolute;
  z-index: 2;
  inset: 13% 12% 16% 13%;
  border: 1px solid var(--acid);
  box-shadow: inset 0 0 34px rgba(199,255,0,.05);
  animation: crop-frame 5s cubic-bezier(.65, 0, .35, 1) infinite;
}
.demo-frame i { position: absolute; width: 18px; height: 18px; color: var(--acid); }
.demo-frame i:nth-child(1) { left: -3px; top: -3px; border-left: 3px solid; border-top: 3px solid; }
.demo-frame i:nth-child(2) { right: -3px; top: -3px; border-right: 3px solid; border-top: 3px solid; }
.demo-frame i:nth-child(3) { right: -3px; bottom: -3px; border-right: 3px solid; border-bottom: 3px solid; }
.demo-frame i:nth-child(4) { left: -3px; bottom: -3px; border-left: 3px solid; border-bottom: 3px solid; }

.demo-marker {
  position: absolute;
  z-index: 3;
  width: clamp(48px, 5vw, 76px);
  padding: 5px;
  background: var(--white);
}
.demo-marker span {
  display: block;
  aspect-ratio: 1;
  background:
    linear-gradient(90deg, transparent 33%, var(--white) 33% 50%, transparent 50%),
    linear-gradient(transparent 33%, var(--white) 33% 50%, transparent 50%),
    var(--black);
}
.demo-marker b {
  position: absolute;
  right: -12px;
  bottom: -12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--black);
  background: var(--signal);
  font-size: 8px;
}
.demo-marker-a {
  left: 18%;
  top: 62%;
  animation: marker-a 5s cubic-bezier(.65, 0, .35, 1) infinite;
}
.demo-marker-b {
  right: 15%;
  top: 18%;
  animation: marker-b 5s cubic-bezier(.65, 0, .35, 1) infinite;
}
.demo-axis { position: absolute; z-index: 1; background: rgba(255,255,255,.2); }
.axis-x { left: 0; right: 0; top: 50%; height: 1px; }
.axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.builds {
  width: var(--page);
  margin: 0 auto;
  padding: 128px 0 150px;
  border-bottom: 1px solid var(--line);
}
.section-head { align-items: end; margin-bottom: 72px; }
.section-head .section-code { grid-column: 1 / 3; align-self: start; }
.section-head h2 {
  grid-column: 3 / 8;
  margin: 0;
  font-size: clamp(68px, 8vw, 126px);
  line-height: .78;
}
.section-note {
  grid-column: 8 / 11;
  margin: 0;
  color: #aaa9a1;
  font-size: 13px;
  line-height: 1.55;
}
code { color: var(--acid); font-family: "Courier New", monospace; font-size: .92em; }
.build-meta {
  grid-column: 11 / 13;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.build-meta div { padding-left: 10px; border-left: 1px solid var(--line); }
.build-meta dt { color: var(--dim); font-size: 7px; letter-spacing: .08em; }
.build-meta dd { margin: 8px 0 0; color: var(--white); font-size: 10px; }

.build-table { border-top: 1px solid var(--white); }
.build-row {
  position: relative;
  min-height: 132px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.build-row.recommended::before {
  content: "LOCAL MATCH";
  position: absolute;
  top: 8px;
  left: 8.333%;
  color: var(--acid);
  font: 700 7px/1 "Courier New", monospace;
  letter-spacing: .1em;
}
.row-index { grid-column: 1 / 2; margin: 0; color: var(--dim); font-size: 8px; }
.build-row h3 {
  grid-column: 2 / 6;
  margin: 0;
  font-size: clamp(28px, 3.1vw, 48px);
  font-weight: 500;
  letter-spacing: -.05em;
}
.row-file { grid-column: 6 / 8; margin: 0; color: var(--dim); font-size: 8px; line-height: 1.55; }
.build-row details { grid-column: 8 / 11; color: var(--dim); font-size: 10px; line-height: 1.45; }
.build-row summary { width: max-content; color: var(--white); cursor: pointer; font: 700 8px/1 "Courier New", monospace; letter-spacing: .07em; }
.build-row details p { margin: 10px 20px 0 0; }
.row-download {
  grid-column: 11 / 13;
  align-self: stretch;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 1px solid var(--line);
  color: var(--acid);
  text-decoration: none;
  font: 700 9px/1 "Courier New", monospace;
  letter-spacing: .07em;
}
.row-download:hover { color: var(--black); background: var(--acid); }

.markers {
  width: var(--page);
  min-height: 820px;
  margin: 0 auto;
  padding: 128px 0;
  align-items: center;
}
.marker-copy { grid-column: 1 / 6; padding-right: 8%; }
.marker-copy h2 {
  margin-bottom: 34px;
  font-size: clamp(64px, 7.5vw, 118px);
  line-height: .78;
}
.marker-note {
  max-width: 380px;
  margin-bottom: 28px;
  color: #aaa9a1;
  font-size: 14px;
  line-height: 1.55;
}
.marker-link { max-width: 380px; border-top: 1px solid var(--white); }

.marker-sheet {
  grid-column: 7 / 13;
  aspect-ratio: 11 / 8.5;
  padding: clamp(22px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  color: var(--black);
  background: var(--white);
  box-shadow: 18px 18px 0 var(--signal);
  transform: rotate(-1deg);
}
.sheet-head, .sheet-foot {
  display: flex;
  justify-content: space-between;
  font: 700 8px/1 "Courier New", monospace;
  letter-spacing: .07em;
}
.sheet-head { padding-bottom: 12px; border-bottom: 1px solid; }
.sheet-foot { padding-top: 12px; border-top: 1px solid; }
.sheet-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11%;
  align-items: center;
  padding: 8%;
}
.sheet-marker { position: relative; padding: 7px; border: 1px solid #aaa; }
.sheet-marker b { position: absolute; top: -22px; left: 0; font: 700 8px/1 "Courier New", monospace; }
.marker-pattern { display: block; aspect-ratio: 1; background-color: var(--black); background-repeat: no-repeat; }
.pattern-zero {
  background-image:
    linear-gradient(var(--white) 0 0), linear-gradient(var(--white) 0 0),
    linear-gradient(var(--white) 0 0), linear-gradient(var(--white) 0 0);
  background-size: 18% 18%;
  background-position: 58% 20%, 20% 61%, 42% 61%, 64% 61%;
}
.pattern-one {
  background-image:
    linear-gradient(var(--white) 0 0), linear-gradient(var(--white) 0 0),
    linear-gradient(var(--white) 0 0), linear-gradient(var(--white) 0 0);
  background-size: 18% 18%;
  background-position: 58% 20%, 20% 42%, 58% 42%, 42% 61%;
}

footer {
  width: var(--page);
  min-height: 108px;
  margin: 0 auto;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 8px;
  letter-spacing: .08em;
}
.studio-mark-small { grid-column: 1 / 2; width: 38px; height: 40px; opacity: .7; }
footer p { grid-column: 3 / 9; margin: 0; }
footer > a:last-child { grid-column: 11 / 13; justify-self: end; color: var(--white); text-decoration: none; }
footer > a:last-child:hover { color: var(--acid); }

@keyframes marker-a {
  0%, 18%, 100% { left: 18%; top: 62%; }
  42%, 70% { left: 31%; top: 54%; }
}
@keyframes marker-b {
  0%, 18%, 100% { right: 15%; top: 18%; }
  42%, 70% { right: 29%; top: 29%; }
}
@keyframes crop-frame {
  0%, 18%, 100% { inset: 13% 12% 16% 13%; }
  42%, 70% { inset: 27% 25% 29% 27%; }
}
@keyframes progress { from { width: 0; } to { width: 100%; } }

@media (max-width: 1000px) {
  :root { --page: min(780px, calc(100vw - 32px)); }
  body::before { inset-inline: 16px; }
  nav { grid-column: 9 / 13; }
  .hero { min-height: 0; padding-top: 78px; }
  .hero-copy { grid-column: 1 / 13; padding: 0 0 72px; }
  .instrument { grid-column: 1 / 13; transform: rotate(.2deg); }
  .demo-loop { aspect-ratio: 16 / 10; }
  .section-head .section-code { grid-column: 1 / 3; }
  .section-head h2 { grid-column: 3 / 9; }
  .section-note { grid-column: 9 / 13; }
  .build-meta { display: none; }
  .build-row { padding-block: 24px; row-gap: 18px; }
  .row-index { grid-column: 1 / 2; }
  .build-row h3 { grid-column: 2 / 7; }
  .row-file { grid-column: 7 / 9; }
  .build-row details { grid-column: 1 / 10; grid-row: 2; }
  .row-download { grid-column: 10 / 13; grid-row: 1 / 3; }
  .marker-copy { grid-column: 1 / 13; padding: 0 0 80px; }
  .marker-sheet { grid-column: 1 / 13; }
}

@media (max-width: 640px) {
  :root { --page: calc(100vw - 28px); }
  .site-header { min-height: 78px; }
  .studio-mark { grid-column: 1 / 3; width: 44px; height: 46px; }
  .project-id { grid-column: 3 / 8; }
  nav { grid-column: 8 / 13; gap: 13px; }
  h1 { font-size: clamp(56px, 18.5vw, 84px); }
  .hero { padding: 62px 0 70px; }
  .instrument { box-shadow: 8px 8px 0 #111; }
  .instrument figcaption span:first-child { max-width: 150px; }
  .demo-loop { aspect-ratio: 4 / 5; }
  .builds { padding: 96px 0 110px; }
  .section-head { margin-bottom: 48px; }
  .section-head .section-code, .section-head h2, .section-note { grid-column: 1 / 13; }
  .section-head .section-code { margin-bottom: 30px; }
  .section-note { margin-top: 30px; max-width: 360px; }
  .build-row { min-height: 190px; align-content: center; }
  .row-index { grid-column: 1 / 3; grid-row: 1; }
  .build-row h3 { grid-column: 3 / 13; grid-row: 1; font-size: 29px; }
  .row-file { grid-column: 1 / 6; grid-row: 2; }
  .row-download { grid-column: 6 / 13; grid-row: 2; min-height: 48px; border: 1px solid var(--line); }
  .build-row details { grid-column: 1 / 13; grid-row: 3; }
  .build-row.recommended::before { display: none; }
  .markers { min-height: 0; padding: 100px 0 118px; }
  .marker-copy h2 { font-size: clamp(58px, 18vw, 84px); }
  .marker-sheet { box-shadow: 9px 9px 0 var(--signal); }
  .sheet-grid { gap: 7%; padding: 13% 1%; }
  footer p { display: none; }
  .studio-mark-small { grid-column: 1 / 3; width: 34px; height: 36px; }
  footer > a:last-child { grid-column: 8 / 13; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}