.hero {
  min-height:100svh;
  display:flex;
  flex-direction:column;
  padding:clamp(64px,9vh,96px) var(--pad) clamp(20px,4vh,40px);
  max-width:var(--max);
  margin-inline:auto;
  position:relative
}
.hero-tag {
  max-width:calc(100% - 220px)
}
.trace-wrap {
  flex:1;
  min-height:200px;
  display:flex;
  align-items:center;
  margin-block:clamp(12px,3vh,32px);
  position:relative;
  touch-action:pan-y
}
#trace {
  width:100%;
  height:calc(100% - 28px);
  min-height:180px;
  position:absolute;
  inset:0 0 auto
}
.fig-note {
  position:absolute;
  left:0;
  top:calc(var(--name-bottom,100%) + 14px);
  color:var(--ink-2);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.hero-foot {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px 16px;
  align-items:end
}
.claim {
  grid-column:1/8;
  font-size:clamp(34px,5.2vw,84px);
  line-height:1;
  letter-spacing:-.015em;
  text-wrap:balance
}
.hero-side {
  grid-column:8/13;
  display:grid;
  gap:14px
}
.hero-tag,.spec,.hint {
  text-wrap:balance
}
.spec,.hint {
  /* the side column grows with the name on big screens instead of shrinking into a footnote */
  font-size:clamp(11px,.42vw + 6px,14px)
}
.spec {
  color:var(--ink-2);
  text-transform:none;
  letter-spacing:.02em
}
.controls {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}
.btn.playbtn {
  background:var(--ink);
  color:var(--bone);
  min-width:132px;
  justify-content:center
}
.btn.playbtn:hover {
  background:var(--signal);
  color:var(--ink);
  border-color:var(--signal)
}
.btn.playbtn .dot {
  transition:transform .3s
}
.btn.playbtn[aria-pressed=true] .dot {
  animation:pulse 1.4s ease-in-out infinite
}
.btn.playbtn[aria-pressed=true] {
  background:var(--bone);
  color:var(--ink)
}
@keyframes pulse {
  50% {
    transform:scale(.55);
    opacity:.6
  }
}
.meter {
  display:grid;
  gap:4px;
  flex:1;
  min-width:160px
}
.meter-scale {
  display:flex;
  justify-content:space-between;
  font:400 11px/1 var(--mono);
  color:var(--ink-2)
}
.meter-scale i {
  font-style:normal
}
.meter-bar {
  position:relative;
  height:10px;
  border:1px solid var(--ink);
  background:repeating-linear-gradient(90deg,transparent 0 9px,var(--grid-2) 9px 10px)
}
.meter-bar b {
  position:absolute;
  left:0;
  top:-5px;
  bottom:-5px;
  width:2px;
  background:var(--signal);
  transform:translateX(0);
  will-change:transform
}
/* the VU body: ink up to -6, signal orange in the hot zone above it, uncovered left to right */
.meter-bar .vu {
  position:absolute;
  inset:1px;
  background:linear-gradient(90deg,var(--ink) 0 75%,var(--signal) 75%);
  opacity:.82;
  clip-path:inset(0 100% 0 0)
}
#dbfs {
  color:var(--ink);
  text-align:right
}
.hint {
  color:var(--ink-2);
  text-transform:none;
  letter-spacing:.02em
}
.scroll-cue {
  position:absolute;
  right:var(--pad);
  bottom:clamp(20px,4vh,40px);
  display:none
}
@media(max-width:900px) {
  .claim {
    grid-column:1/-1;
    font-size:clamp(40px,7vw,64px)
  }
  .hero-side {
    grid-column:1/-1
  }
  .hero-tag {
    max-width:100%;
    margin-top:34px
  }
}
@media(max-width:767px) {
  .hero {
    padding-top:56px
  }
  .trace-wrap {
    min-height:260px
  }
}
@media(min-width:2200px) {
  .hero {
    max-width:min(var(--max),100%)
  }
}
.intro {
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.45;
  max-width:40ch
}
.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}