.work {
  padding-top:clamp(40px,8vh,100px);
  position:relative;
  padding-bottom:clamp(60px,12vh,160px)
}
.work .rule {
  height:1px;
  background:var(--ink);
  transform-origin:left;
  margin-bottom:clamp(40px,8vh,96px)
}
.statement {
  font-size:clamp(40px,7.4vw,124px);
  line-height:.98;
  letter-spacing:-.02em;
  margin-top:18px;
  max-width:16ch;
  text-wrap:balance;
  font-weight:400
}
.statement .count {
  font-variant-numeric:tabular-nums;
  color:var(--signal-ink)
}
.work-sub {
  margin-top:clamp(16px,3vh,32px);
  font-size:clamp(20px,2vw,28px);
  color:var(--ink-2);
  max-width:32ch
}
.rail-wrap {
  width:100%;
  max-width:var(--max);
  margin:clamp(48px,9vh,120px) auto 0;
  padding-inline:var(--pad)
}
.figs {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(28px,4vw,64px) clamp(16px,2vw,32px)
}
.fig {
  background:var(--bone-2);
  border:1px solid var(--ink);
  padding:14px 14px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  min-width:0;
  align-self:start
}
.fig::before,.fig::after {
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border:1px solid var(--ink);
  background:var(--bone)
}
.fig::before {
  left:-7px;
  top:-7px;
  border-right:0;
  border-bottom:0
}
.fig::after {
  right:-7px;
  bottom:-7px;
  border-left:0;
  border-top:0
}
.fig>header {
  display:flex;
  justify-content:space-between;
  font:400 var(--fs-label)/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding-bottom:10px;
  border-bottom:1px solid var(--grid-2)
}
.fig h3 {
  font-size:clamp(30px,3vw,46px);
  line-height:1;
  letter-spacing:-.01em;
  font-weight:400
}
.fig h3 .open {
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
  min-height:44px;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:.15em;
  text-decoration-thickness:2px;
  transition:text-decoration-color .3s
}
.fig h3 .open:hover,.fig h3 .open:focus-visible {
  text-decoration-color:var(--signal)
}
.fig p {
  color:var(--ink-2);
  max-width:42ch
}
.f-cadence {
  grid-column:1/8
}
.f-mcu {
  grid-column:8/13;
  margin-top:clamp(40px,10vw,160px)
}
.f-kit {
  grid-column:1/6;
  margin-top:-20px
}
.f-policy {
  grid-column:6/13;
  margin-top:clamp(20px,6vw,100px)
}
.demo {
  position:relative;
  background:var(--bone);
  border:1px solid var(--grid-2);
  min-height:300px;
  overflow:hidden;
  touch-action:pan-y pinch-zoom
}
.in-sheet .demo {
  min-height:0
}
.minis {
  margin-top:clamp(64px,12vh,160px)
}
.minis ul {
  list-style:none;
  margin:16px 0 0;
  padding:0;
  border-top:1px solid var(--ink)
}
.minis li {
  display:grid;
  grid-template-columns:70px minmax(160px,1fr) 2fr;
  gap:8px 20px;
  align-items:baseline;
  padding:18px 0;
  border-bottom:1px solid var(--grid-2)
}
.minis b {
  font-size:clamp(26px,2.4vw,36px);
  line-height:1.05;
  font-weight:400
}
.minis li span:last-child {
  color:var(--ink-2)
}
.f-cadence .demo {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:stretch
}
.sp {
  width:100%;
  height:auto;
  min-height:260px
}
.sp text {
  font-family:var(--mono);
  fill:var(--ink)
}
.sp .nm {
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500
}
.sp .spec {
  font-size:10.5px;
  fill:var(--ink-2);
  opacity:0;
  transition:opacity .3s
}
.sp g.node {
  outline:none;
  cursor:default
}
.sp g.node rect {
  fill:var(--bone);
  stroke:var(--ink);
  stroke-width:1.4
}
.sp g.node:hover .spec,.sp g.node:focus-visible .spec,.is-coarse .sp .spec,.in-sheet .sp .spec {
  opacity:1
}
.sp g.node:focus-visible rect {
  stroke:var(--signal-ink);
  stroke-width:2.5
}
.sp .line {
  fill:none;
  stroke:var(--ink);
  stroke-width:1.2;
  stroke-dasharray:3 4
}
.sp .pkt {
  fill:var(--signal)
}
.eq {
  display:flex;
  gap:6px;
  justify-content:space-around;
  align-items:stretch;
  padding:14px 10px 10px;
  border-left:1px solid var(--grid-2);
  position:relative
}
.eq::before {
  content:"EQ · hero synth";
  position:absolute;
  top:6px;
  left:10px;
  font:400 11px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2)
}
.eq-listen {
  position:absolute;
  top:0;
  right:4px;
  min-height:32px;
  padding:0 8px;
  font:500 11px/1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  background:var(--bone);
  cursor:pointer
}
.eq-listen[aria-pressed=true] {
  background:var(--ink);
  color:var(--bone)
}
.eq label {
  /* equal columns: a readout going from "0 dB" to "−12 dB" must never shift the sliders */
  flex:1 1 0;
  min-width:0;
  margin-top:24px;
  display:grid;
  grid-template-rows:1fr auto auto;
  justify-items:center;
  gap:6px;
  font:400 11px/1 var(--mono);
  color:var(--ink-2);
  padding-top:18px
}
.eq input {
  -webkit-appearance:none;
  appearance:none;
  writing-mode:vertical-lr;
  direction:rtl;
  width:28px;
  min-height:150px;
  /* the track is painted on the input itself: Safari draws none for a vertical range */
  background:linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;
  margin:0;
  cursor:pointer;
  touch-action:none
}
.eq input::-webkit-slider-runnable-track {
  width:2px;
  background:transparent
}
.eq input::-moz-range-track {
  width:2px;
  background:transparent
}
.eq input::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:22px;
  height:12px;
  background:var(--bone);
  border:1.5px solid var(--ink);
  margin-left:-10px
}
.eq input::-moz-range-thumb {
  width:22px;
  height:12px;
  background:var(--bone);
  border:1.5px solid var(--ink);
  border-radius:0
}
.eq input:active::-webkit-slider-thumb {
  background:var(--signal)
}
.eq output {
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.f-mcu .demo {
  padding:12px;
  display:grid;
  gap:8px;
  background:var(--bone-2)
}
.frame {
  border:1.5px solid var(--ink);
  background:var(--booth);
  display:flex;
  flex-direction:column;
  overflow:hidden
}
.frame-bar {
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px 10px;
  background:var(--bone);
  border-bottom:1.5px solid var(--ink);
  font:400 11px/1 var(--mono);
  color:var(--ink-2)
}
.frame-bar i {
  width:8px;
  height:8px;
  border:1px solid var(--ink);
  border-radius:50%
}
.frame-bar span {
  margin-left:8px
}
.frame-view {
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
  background:radial-gradient(120% 90% at 50% 100%,#2a1a10,var(--booth) 62%);
  touch-action:pan-y
}
.frame-view.pointing {
  cursor:pointer
}
.tree {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  user-select:none
}
.tree path {
  fill:none;
  stroke:rgba(237,234,227,.4);
  stroke-width:2;
  stroke-linecap:round;
  transition:stroke .5s
}
.tree .trunk {
  stroke-width:4
}
.tree.lit .branches path {
  stroke:rgba(237,234,227,.18)
}
.tree .glow {
  stroke:var(--signal);
  stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(255,77,0,.85))
}
.leaf circle {
  fill:rgba(237,234,227,.8);
  transition:fill .3s,transform .45s cubic-bezier(.16,1,.3,1)
}
.leaf .halo {
  fill:none;
  stroke:var(--signal);
  stroke-width:1.5;
  opacity:0;
  transform:scale(.6);
  transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)
}
.leaf.on circle {
  fill:var(--signal);
  transform:scale(1.25)
}
.leaf.on .halo {
  fill:none;
  opacity:.6;
  transform:scale(1.25)
}
.tree text {
  font:400 21px/1 var(--mono);
  fill:rgba(237,234,227,.55);
  text-anchor:middle;
  letter-spacing:.04em
}
.tree .tree-hint {
  text-anchor:end
}
.tree .tree-total {
  text-anchor:start;
  fill:rgba(237,234,227,.72)
}
.tree-bar {
  display:flex;
  gap:6px;
  align-items:center
}
.tree-bar button {
  flex:none;
  width:44px;
  height:44px;
  border:1px solid var(--ink);
  font:400 22px/1 var(--sans)
}
.tree-bar button:hover {
  background:var(--ink);
  color:var(--bone)
}
.tree-read {
  margin:0 0 0 8px;
  min-width:0;
  font-size:12px;
  line-height:1.35;
  color:var(--ink-2)
}
.tree-read b {
  display:block;
  font:500 15px/1.3 var(--sans);
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.f-kit .demo {
  background:var(--ink);
  color:#d9d6cc;
  display:flex;
  flex-direction:column;
  border-color:var(--ink)
}
.term {
  flex:1;
  padding:14px;
  min-height:260px;
  overflow:hidden
}
.term-out {
  margin:0;
  font:400 12px/1.55 var(--mono);
  white-space:pre-wrap;
  word-break:break-word
}
.term-out .p {
  color:var(--signal)
}
.term-out .d {
  color:#8f8c82
}
.term-out .k {
  color:#fff
}
.term-out .cur {
  display:inline-block;
  width:.55em;
  height:1em;
  background:var(--signal);
  vertical-align:-.15em;
  animation:blink 1s steps(1) infinite
}
@keyframes blink {
  50% {
    opacity:0
  }
}
.scrub {
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border-top:1px solid #333
}
.scrub .tp {
  min-width:44px;
  min-height:44px;
  color:var(--bone);
  font:500 11px/1 var(--mono)
}
.scrub input {
  flex:1;
  accent-color:var(--signal);
  height:44px;
  cursor:pointer
}
.pol {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:14px;
  padding:14px;
  position:relative;
  min-height:300px
}
.doc {
  background:#fff;
  border:1px solid var(--ink);
  padding:12px;
  position:relative;
  overflow:hidden;
  font:400 11px/1.4 var(--mono);
  color:#222
}
.doc-h {
  font:500 12px/1.2 var(--sans);
  margin-bottom:10px
}
.doc-h small {
  display:block;
  font:400 10px var(--mono);
  color:#5f5f5f;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:2px
}
.doc dl {
  margin:0;
  display:grid;
  gap:7px
}
.doc dl>div {
  display:grid;
  gap:1px;
  padding:2px 3px;
  outline:1.5px solid transparent;
  transition:outline-color .15s,background .15s
}
.doc dt {
  font-size:10px;
  color:#5f5f5f;
  text-transform:uppercase;
  letter-spacing:.08em
}
.doc dd {
  margin:0
}
.doc dl>div.hit {
  outline-color:var(--signal);
  background:rgba(255,77,0,.08)
}
.scan {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:var(--signal);
  transform:translateY(-10px)
}
.sheetgrid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--ink);
  align-self:start;
  background:var(--bone);
  font:400 11px/1.2 var(--mono)
}
.sheetgrid div {
  border-right:1px solid var(--grid-2);
  border-bottom:1px solid var(--grid-2);
  padding:8px 6px;
  min-height:34px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  position:relative
}
.sheetgrid .h {
  background:var(--bone-2);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:10px;
  color:var(--ink-2)
}
.sheetgrid .ok::after {
  content:"✓";
  position:absolute;
  right:3px;
  top:2px;
  font-size:9px;
  color:var(--ink)
}
.fly {
  position:absolute;
  z-index:3;
  pointer-events:none;
  font:500 11px/1 var(--mono);
  background:var(--signal);
  color:var(--ink);
  padding:2px 4px;
  white-space:nowrap;
  left:0;
  top:0
}
.sheet {
  position:fixed;
  inset:0;
  z-index:120;
  background:var(--bone);
  overflow:auto;
  overscroll-behavior:contain
}
.sheet[hidden] {
  display:none
}
.sheet-in {
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(72px,10vh,110px) var(--pad) 48px;
  min-height:100%
}
.sheet-x {
  position:fixed;
  top:12px;
  right:var(--pad);
  z-index:2;
  background:var(--bone)
}
.sheet h2 {
  font-size:clamp(44px,8vw,120px);
  line-height:.95;
  margin:10px 0 clamp(20px,4vh,48px);
  letter-spacing:-.02em;
  font-weight:400
}
.sheet-body {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);
  gap:clamp(20px,4vw,64px);
  align-items:start
}
.sheet-txt p {
  margin-bottom:1em;
  max-width:52ch
}
.sheet-txt ul {
  list-style:none;
  margin:20px 0;
  padding:0;
  border-top:1px solid var(--ink)
}
.sheet-txt li {
  padding:8px 0;
  border-bottom:1px solid var(--grid-2);
  font:400 var(--fs-label)/1.4 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase
}
.sheet-txt .links {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.sheet-txt .note {
  color:var(--ink-2);
  font-size:.9em
}
.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:180;
  transform:translate(-50%,40px);
  background:var(--ink);
  color:var(--bone);
  padding:12px 18px;
  opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s;
  pointer-events:none
}
.toast.show {
  transform:translate(-50%,0);
  opacity:1
}
@media(max-width:1199px) {
  .figs {
    grid-template-columns:repeat(6,1fr)
  }
  .f-cadence,.f-mcu,.f-kit,.f-policy {
    grid-column:1/-1;
    margin-top:0
  }
}
@media(max-width:767px) {
  .rail-wrap {
    padding-inline:0;
    overflow:hidden
  }
  .figs {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:12px var(--pad) 28px;
    scrollbar-width:none
  }
  .figs::-webkit-scrollbar {
    display:none
  }
  .fig {
    flex:0 0 82vw;
    scroll-snap-align:center
  }
  .f-cadence .demo {
    grid-template-columns:1fr
  }
  .eq {
    border-left:0;
    border-top:1px solid var(--grid-2)
  }
  .eq input {
    min-height:110px
  }
  .pol {
    grid-template-columns:1fr
  }
  .doc {
    display:none
  }
  .minis li {
    grid-template-columns:1fr
  }
  .sheet-body {
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  .toast {
    transition:none
  }
}

/* on touch the stage notes are always shown, so they need to be readable at phone scale */
.is-coarse .sp .spec {
  font-size:14px
}
/* the stage hint steps aside while a toast is up, so the two never stack */
.stage-hint {
  transition:opacity .25s
}
body:has(.toast.show) .stage-hint {
  opacity:0
}