@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Azeret+Mono:wght@500;600;700&display=swap");

@font-face {
  font-family: "Geist Pixel";
  src: url("assets/fonts/GeistPixel-Square.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: dark;
  --shell: oklch(13% 0.012 210);
  --panel: oklch(18% 0.016 205);
  --panel-low: oklch(12% 0.014 210);
  --panel-high: oklch(24% 0.018 205);
  --plate: oklch(8% 0.012 210);
  --line: oklch(35% 0.025 210);
  --line-strong: oklch(48% 0.035 210);
  --text: oklch(90% 0.016 225);
  --muted: oklch(68% 0.02 220);
  --dim: oklch(50% 0.018 220);
  --pink: oklch(51.5% 0.202 13.1);
  --pink-hot: oklch(62.5% 0.198 4.4);
  --amber: oklch(82% 0.16 82);
  --blue: oklch(65% 0.18 240);
  --green: oklch(77% 0.16 150);
  --danger: oklch(66% 0.22 25);
  --shadow: oklch(5% 0.01 210);
  --radius: 8px;
  --font-pixel: "Geist Pixel", "Azeret Mono", "SFMono-Regular", monospace;
  --photo-noise: none;
  --cable-stage-scale: 150.724638%;
  --cable-drop-space: clamp(250px, 26vh, 330px);
  --clock-speed: 1;
  --streaming-scan-duration: 3.2s;
  --streaming-dot-duration: 4.6s;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--shell);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  background:
    var(--photo-noise),
    radial-gradient(circle at 50% 16%, oklch(52% 0.03 220 / 0.16), transparent 34%),
    radial-gradient(circle at 12% 88%, oklch(5% 0.01 210 / 0.86), transparent 36%),
    radial-gradient(circle at 88% 86%, oklch(5% 0.01 210 / 0.78), transparent 38%),
    linear-gradient(90deg, oklch(100% 0 0 / 0.03) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, oklch(100% 0 0 / 0.025) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(180deg, oklch(16% 0.016 214), oklch(10% 0.012 210));
  color: var(--text);
}

body.is-modal-open {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0.18;
  background:
    var(--photo-noise),
    repeating-radial-gradient(circle at 17% 23%, oklch(100% 0 0 / 0.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(97deg, oklch(100% 0 0 / 0.04) 0 1px, transparent 1px 7px);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 42%, oklch(0% 0 0 / 0.34) 72%, oklch(0% 0 0 / 0.72) 100%),
    linear-gradient(90deg, oklch(75% 0.08 250 / 0.035), transparent 14% 84%, oklch(70% 0.12 20 / 0.03));
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

.landing-shell {
  position: relative;
  z-index: 12;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: 18px 18px calc(18px + var(--cable-drop-space));
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1800px;
}

.landing-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(1320px, 92vw);
  height: 54px;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: oklch(0% 0 0 / 0.7);
  filter: blur(18px);
  opacity: 0.72;
}

.console {
  width: min(1260px, 100%);
  min-height: 680px;
  margin: 0 auto;
  position: relative;
  contain: layout;
  overflow: visible;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.9fr 1fr 1fr 1fr 1fr 1fr 1fr 0.9fr;
  grid-template-rows: 76px 124px 110px 108px 126px 126px;
  grid-template-areas:
    "brand brand brand wave wave knobbank knobbank signal signal signal master"
    "clock hero hero hero ingest normalize enrich detect respond route master"
    "clock hero hero hero ingest normalize enrich detect respond route master"
    "utility hero hero hero ingest normalize enrich detect respond route master"
    "drumpad drumpad drumpad compose compose mix mix flow form form right"
    "drumpad drumpad drumpad compose compose mix mix flow form form right";
  gap: 8px;
  padding: 10px;
  border: 1px solid oklch(32% 0.018 210);
  border-radius: 10px;
  background:
    var(--photo-noise),
    radial-gradient(circle at var(--light-x, 50%) var(--light-y, -10%), oklch(77% 0.026 230 / 0.16), transparent 32%),
    linear-gradient(105deg, transparent 0 18%, oklch(100% 0 0 / 0.045) 24%, transparent 32%),
    linear-gradient(180deg, oklch(24% 0.015 210 / 0.35), transparent 10%),
    repeating-linear-gradient(90deg, transparent 0 24px, oklch(100% 0 0 / 0.018) 24px 25px),
    repeating-linear-gradient(2deg, oklch(100% 0 0 / 0.018) 0 1px, transparent 1px 6px),
    oklch(7.5% 0.012 210);
  box-shadow:
    0 26px 82px oklch(0% 0 0 / 0.76),
    0 4px 14px oklch(0% 0 0 / 0.72),
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    inset 0 0 0 3px oklch(0% 0 0 / 0.52),
    inset 0 0 38px oklch(0% 0 0 / 0.5);
  transform: rotateX(1.4deg) rotateY(-0.45deg) translateZ(0);
  transform-origin: 50% 62%;
}

.console::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  opacity: 0.5;
  background:
    var(--photo-noise),
    repeating-linear-gradient(91deg, transparent 0 14px, oklch(100% 0 0 / 0.025) 14px 15px, transparent 15px 32px),
    radial-gradient(circle at 32% 22%, oklch(100% 0 0 / 0.06), transparent 20%),
    radial-gradient(circle at 74% 72%, oklch(0% 0 0 / 0.4), transparent 31%);
}

.console::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: 10px;
  box-shadow:
    inset 0 2px 0 oklch(100% 0 0 / 0.09),
    inset 0 -3px 0 oklch(0% 0 0 / 0.55),
    inset 0 0 0 1px oklch(100% 0 0 / 0.03);
}

.module {
  position: relative;
  z-index: 1;
  contain: layout paint style;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background:
    var(--photo-noise),
    radial-gradient(circle at var(--scar-x, 72%) var(--scar-y, 18%), oklch(100% 0 0 / 0.055), transparent 9%),
    radial-gradient(circle at var(--oil-x, 18%) var(--oil-y, 84%), oklch(0% 0 0 / 0.24), transparent 16%),
    radial-gradient(circle at 26% 18%, oklch(100% 0 0 / 0.045), transparent 24%),
    radial-gradient(circle at 80% 86%, oklch(0% 0 0 / 0.34), transparent 34%),
    repeating-linear-gradient(97deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(5deg, oklch(0% 0 0 / 0.1) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, oklch(100% 0 0 / 0.05), transparent 18%),
    linear-gradient(145deg, var(--panel-high), var(--panel) 38%, var(--panel-low));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -1px 0 oklch(0% 0 0 / 0.78),
    inset 0 0 18px oklch(0% 0 0 / 0.34),
    0 1px 0 oklch(100% 0 0 / 0.04),
    0 2px 8px oklch(0% 0 0 / 0.28);
}

.module:nth-of-type(3n) {
  --scar-x: 38%;
  --scar-y: 12%;
  --oil-x: 82%;
  --oil-y: 68%;
}

.module:nth-of-type(4n) {
  --scar-x: 82%;
  --scar-y: 42%;
  --oil-x: 28%;
  --oil-y: 76%;
}

.module:nth-of-type(5n) {
  --scar-x: 52%;
  --scar-y: 78%;
  --oil-x: 64%;
  --oil-y: 22%;
}

.module::before,
.module::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    linear-gradient(92deg, transparent 0 33%, oklch(2% 0 0 / 0.8) 33% 67%, transparent 67%),
    radial-gradient(circle at 35% 31%, oklch(64% 0.025 210), oklch(22% 0.014 210) 48%, oklch(5% 0.006 210) 72%);
  border: 1px solid oklch(2% 0 0);
  box-shadow:
    inset 0 1px 1px oklch(100% 0 0 / 0.22),
    inset 0 -1px 1px oklch(0% 0 0 / 0.9),
    0 1px 1px oklch(0% 0 0 / 0.7);
}

.module::before {
  left: 8px;
}

.module::after {
  right: 8px;
}

[data-area="brand"] { grid-area: brand; }
[data-area="wave"] { grid-area: wave; }
[data-area="knobbank"] { grid-area: knobbank; }
[data-area="signal"] { grid-area: signal; }
[data-area="master"] { grid-area: master; }
[data-area="clock"] { grid-area: clock; }
[data-area="hero"] { grid-area: hero; }
[data-area="utility"] { grid-area: utility; }
[data-area="drumpad"] { grid-area: drumpad; }
[data-area="ingest"] { grid-area: ingest; }
[data-area="normalize"] { grid-area: normalize; }
[data-area="enrich"] { grid-area: enrich; }
[data-area="detect"] { grid-area: detect; }
[data-area="respond"] { grid-area: respond; }
[data-area="route"] { grid-area: route; }
[data-area="compose"] { grid-area: compose; }
[data-area="mix"] { grid-area: mix; }
[data-area="flow"] { grid-area: flow; }
[data-area="form"] { grid-area: form; }
[data-area="right"] { grid-area: right; }

.module-title {
  margin: 0 0 10px;
  padding: 0 8px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 oklch(0% 0 0 / 0.72),
    0 -1px 0 oklch(100% 0 0 / 0.05);
  opacity: 0.92;
}

.flow-column {
  transition:
    border-color 160ms var(--ease-out-quart),
    box-shadow 160ms var(--ease-out-quart),
    filter 160ms var(--ease-out-quart);
}

.flow-column .module-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: grab;
  touch-action: none;
}

.flow-column .module-title::after {
  content: "";
  width: 14px;
  height: 8px;
  flex: 0 0 auto;
  opacity: 0.48;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 1px, transparent 1px 5px) 0 50% / 5px 1px repeat-x;
}

.flow-column .module-title:focus-visible {
  color: var(--pink-hot);
  outline: none;
  text-shadow: 0 0 9px oklch(62.5% 0.198 4.4 / 0.55);
}

.console.is-reordering .flow-column:not(.is-column-dragging) {
  transition:
    transform 180ms var(--ease-out-quart),
    border-color 160ms var(--ease-out-quart),
    box-shadow 160ms var(--ease-out-quart),
    filter 160ms var(--ease-out-quart);
}

.flow-column.is-column-dragging {
  z-index: 20;
  pointer-events: none;
  filter: brightness(1.16);
  opacity: 0.97;
  box-shadow:
    0 0 0 2px oklch(62.5% 0.198 4.4 / 0.22),
    0 18px 36px oklch(0% 0 0 / 0.54),
    inset 0 1px 0 oklch(100% 0 0 / 0.14),
    inset 0 -1px 0 oklch(0% 0 0 / 0.78),
    inset 0 0 18px oklch(0% 0 0 / 0.34);
  will-change: transform;
}

.flow-column.is-column-target {
  border-color: var(--pink-hot);
  box-shadow:
    0 0 0 1px oklch(62.5% 0.198 4.4 / 0.3),
    0 0 22px oklch(62.5% 0.198 4.4 / 0.22),
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -1px 0 oklch(0% 0 0 / 0.78),
    inset 0 0 18px oklch(0% 0 0 / 0.34);
}

.brand-module {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 22px;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: var(--text);
  text-shadow:
    0 1px 0 oklch(100% 0 0 / 0.12),
    0 2px 4px oklch(0% 0 0 / 0.78);
}

.brand-logo {
  display: block;
  width: clamp(126px, 12vw, 158px);
  max-width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 12px oklch(62.5% 0.198 4.4 / 0.34))
    drop-shadow(0 2px 3px oklch(0% 0 0 / 0.68));
}

.brand-event-lockup {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 76px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.blackhat-logo {
  display: block;
  width: clamp(84px, 8.5vw, 120px);
  max-width: 100%;
  height: auto;
  filter:
    invert(1)
    brightness(1.18)
    drop-shadow(0 0 8px oklch(100% 0 0 / 0.14))
    drop-shadow(0 2px 3px oklch(0% 0 0 / 0.72));
}

.scope-window {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid oklch(36% 0.028 210);
  border-radius: 4px;
  background:
    var(--photo-noise),
    linear-gradient(115deg, oklch(100% 0 0 / 0.09), transparent 28%),
    linear-gradient(180deg, oklch(2% 0 0 / 0.72), oklch(8% 0.02 210)),
    repeating-linear-gradient(90deg, oklch(68% 0.14 4.4 / 0.04) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 4px);
  box-shadow:
    inset 0 0 18px oklch(0% 0 0 / 0.85),
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -2px 5px oklch(0% 0 0 / 0.88),
    0 1px 0 oklch(100% 0 0 / 0.05);
}

.scope-window::before,
.screen-inner::before,
.blackhat-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 8%, oklch(100% 0 0 / 0.16), transparent 22%),
    linear-gradient(118deg, oklch(100% 0 0 / 0.19), transparent 18% 72%, oklch(100% 0 0 / 0.035)),
    repeating-linear-gradient(180deg, transparent 0 3px, oklch(100% 0 0 / 0.025) 3px 4px);
  opacity: 0.58;
}

.scope-window::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border-radius: 3px;
  box-shadow: inset 0 0 22px oklch(0% 0 0 / 0.9);
}

.scope-window svg {
  display: block;
  width: 100%;
  height: 100%;
}

.scope-window.has-stream svg {
  opacity: 0;
}

.scope-stream {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scope-window polyline {
  fill: none;
  stroke: var(--pink-hot);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px oklch(62.5% 0.198 4.4 / 0.78));
}

.scope-window .angular {
  stroke-dasharray: 1 8;
}

.scope-window-wide {
  height: 44px;
}

.wide-scope {
  padding: 12px 18px;
}

.top-controls {
  display: flex;
  align-items: center;
}

.knob-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
}

.knob-row.compact .knob {
  width: 43px;
}

.knob {
  --turn: 0deg;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid oklch(3% 0 0);
  border-radius: 50%;
  cursor: pointer;
  background:
    var(--photo-noise),
    radial-gradient(circle at 35% 24%, oklch(78% 0.018 210 / 0.36), transparent 17%),
    radial-gradient(circle at 50% 48%, oklch(23% 0.017 210) 0 35%, transparent 36%),
    repeating-conic-gradient(from 6deg, oklch(30% 0.018 210) 0deg 5deg, oklch(8% 0.01 210) 5deg 10deg),
    radial-gradient(circle at 50% 55%, oklch(15% 0.018 210), oklch(3% 0 0) 73%);
  box-shadow:
    0 8px 13px oklch(0% 0 0 / 0.54),
    0 4px 8px oklch(0% 0 0 / 0.76),
    0 1px 1px oklch(100% 0 0 / 0.08),
    inset 0 2px 0 oklch(100% 0 0 / 0.18),
    inset 0 -7px 9px oklch(0% 0 0 / 0.76),
    inset 0 0 0 5px oklch(0% 0 0 / 0.22);
  transform: rotate(var(--turn));
  transition: box-shadow 160ms ease, filter 160ms ease;
}

.knob::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 6px;
  left: calc(50% - 1px);
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: oklch(84% 0.02 218);
  box-shadow:
    0 0 4px oklch(95% 0.02 210 / 0.7),
    0 1px 1px oklch(0% 0 0 / 0.85);
}

.knob::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 24%, oklch(75% 0.018 210 / 0.2), transparent 22%),
    radial-gradient(circle at 58% 72%, oklch(0% 0 0 / 0.38), transparent 42%);
  border: 1px solid oklch(100% 0 0 / 0.05);
  box-shadow:
    inset 0 1px 2px oklch(100% 0 0 / 0.08),
    inset 0 -2px 3px oklch(0% 0 0 / 0.7);
}

.knob:hover,
.knob:focus-visible {
  filter: brightness(1.18);
  outline: none;
  box-shadow:
    0 0 0 2px oklch(62.5% 0.198 4.4 / 0.42),
    0 4px 8px oklch(0% 0 0 / 0.76),
    0 1px 1px oklch(100% 0 0 / 0.08),
    inset 0 2px 0 oklch(100% 0 0 / 0.18),
    inset 0 -7px 9px oklch(0% 0 0 / 0.76),
    inset 0 0 0 5px oklch(0% 0 0 / 0.22);
}

.knob.small {
  width: 32px;
}

.knob.large {
  width: 56px;
}

.signal-header {
  padding: 9px 10px;
}

.signal-header .module-title {
  margin-bottom: 5px;
}

.signal-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 8px;
  align-items: center;
}

.scope-window.mini {
  height: 34px;
}

.scope-window.square {
  height: 78px;
}

.scope-window.tall {
  height: 88px;
}

.meter,
.led-row,
.jack-tower {
  display: flex;
  gap: 6px;
  align-items: center;
}

.meter {
  flex-direction: column-reverse;
}

.meter span,
.led-row span,
.jack-tower span,
.status-led {
  --twinkle: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.9), transparent 21%),
    radial-gradient(circle, var(--pink-hot) 0 48%, oklch(45% 0.18 13.1) 68%, oklch(12% 0.03 13.1) 100%);
  box-shadow:
    0 0 calc(7px * var(--twinkle)) oklch(62.5% 0.198 4.4 / 0.86),
    0 0 calc(16px * var(--twinkle)) oklch(62.5% 0.198 4.4 / 0.26),
    inset 0 -1px 1px oklch(0% 0 0 / 0.48);
}

.signal-header .meter {
  gap: 4px;
}

.signal-header .meter span {
  width: 5px;
  height: 5px;
}

.meter span:nth-child(1),
.meter span:nth-child(2) {
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.22), transparent 21%),
    radial-gradient(circle, var(--dim), oklch(18% 0.014 220) 72%);
  box-shadow: none;
  animation: none;
}

.master-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.stereo-meter {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-inline: 16px;
}

.stereo-meter div {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.62rem;
}

.stereo-meter i {
  --lit: 5;
  display: block;
  width: 8px;
  height: 112px;
  border-radius: 999px;
  background:
    linear-gradient(to top, var(--pink-hot) 0 calc(var(--lit) * 10%), oklch(25% 0.018 210) calc(var(--lit) * 10%) 100%);
  box-shadow: 0 0 14px oklch(62.5% 0.198 4.4 / 0.55);
  mask: repeating-linear-gradient(to top, #000 0 7px, transparent 7px 12px);
}

.control-stack {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.control-stack.inline {
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
}

.jack-label {
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.jack {
  position: relative;
  isolation: isolate;
  display: inline-block;
  width: 20px;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid oklch(69% 0.026 74);
  border-radius: 50%;
  cursor: default;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.34), transparent 12%),
    radial-gradient(circle, oklch(1% 0 0) 0 34%, oklch(18% 0.02 210) 35% 48%, oklch(42% 0.02 76) 49% 56%, oklch(6% 0.01 210) 57%);
  box-shadow:
    inset 0 1px 1px oklch(100% 0 0 / 0.22),
    inset 0 -1px 2px oklch(0% 0 0 / 0.78),
    0 2px 2px oklch(0% 0 0 / 0.64),
    0 1px 0 oklch(100% 0 0 / 0.07);
}

.jack::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, oklch(0% 0 0), oklch(6% 0.01 210) 68%);
  box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.95);
}

.jack.is-patch-target {
  border-color: var(--green);
  box-shadow:
    0 0 0 2px oklch(77% 0.16 150 / 0.34),
    0 0 16px oklch(77% 0.16 150 / 0.62),
    0 2px 2px oklch(0% 0 0 / 0.64),
    inset 0 1px 1px oklch(100% 0 0 / 0.24),
    inset 0 -1px 2px oklch(0% 0 0 / 0.78);
}

.jack.hot,
.jack.warm {
  color: inherit;
  border-color: oklch(69% 0.026 74);
}

.jack.solo {
  width: 23px;
}

.clock-module,
.utility-module,
.drumpad-module {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  padding-inline: 8px;
}

.drumpad-module {
  justify-items: stretch;
  padding-inline: 10px;
}

.utility-module {
  gap: 6px;
}

.utility-module .module-title {
  margin-bottom: 4px;
}

.utility-module .dual-control label {
  gap: 4px;
}

.utility-module .knob.small {
  width: 30px;
}

.number-readout {
  min-width: 50px;
  padding: 4px 8px;
  border: 1px solid oklch(32% 0.02 210);
  border-radius: 3px;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.07), transparent 30%),
    repeating-linear-gradient(180deg, transparent 0 3px, oklch(100% 0 0 / 0.025) 3px 4px),
    oklch(4% 0.01 210);
  color: var(--pink-hot);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 10px oklch(62.5% 0.198 4.4 / 0.8);
}

.small-button {
  min-width: 54px;
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.1), transparent 28%),
    linear-gradient(180deg, oklch(24% 0.018 210), oklch(10% 0.014 210));
  color: var(--muted);
  cursor: pointer;
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.13),
    inset 0 -2px 3px oklch(0% 0 0 / 0.55),
    0 2px 4px oklch(0% 0 0 / 0.35);
  touch-action: manipulation;
  user-select: none;
}

.small-button:hover,
.small-button:focus-visible {
  color: var(--text);
  border-color: var(--pink-hot);
  outline: none;
}

.small-button.is-tapped {
  color: var(--pink-hot);
  border-color: var(--pink-hot);
  box-shadow:
    0 0 12px oklch(62.5% 0.198 4.4 / 0.48),
    inset 0 1px 0 oklch(100% 0 0 / 0.16),
    inset 0 -2px 3px oklch(0% 0 0 / 0.55),
    0 2px 4px oklch(0% 0 0 / 0.35);
}

.hero-screen {
  z-index: 6;
  padding: 10px;
}

.screen-inner,
.blackhat-callout {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 18px 28px;
  border: 1px solid oklch(34% 0.025 210);
  border-radius: 6px;
  background:
    var(--photo-noise),
    radial-gradient(circle at 50% 15%, oklch(80% 0.018 220 / 0.045), transparent 28%),
    linear-gradient(90deg, oklch(100% 0 0 / 0.02) 1px, transparent 1px) 0 0 / 20px 20px,
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, oklch(9% 0.014 210), oklch(4% 0.012 210));
  box-shadow:
    inset 0 0 32px oklch(0% 0 0 / 0.85),
    inset 0 1px 0 oklch(100% 0 0 / 0.11),
    inset 0 -2px 8px oklch(0% 0 0 / 0.9),
    0 1px 0 oklch(100% 0 0 / 0.04);
}

.blackhat-callout {
  width: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-inline: 18px;
  border-color: oklch(34% 0.025 210);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 160ms var(--ease-out-quart),
    box-shadow 160ms var(--ease-out-quart),
    filter 160ms var(--ease-out-quart),
    transform 160ms var(--ease-out-quart);
}

.blackhat-callout:hover,
.blackhat-callout:focus-visible {
  outline: none;
  border-color: var(--pink-hot);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px oklch(62.5% 0.198 4.4 / 0.22),
    inset 0 0 32px oklch(0% 0 0 / 0.85),
    inset 0 1px 0 oklch(100% 0 0 / 0.11),
    inset 0 -2px 8px oklch(0% 0 0 / 0.9),
    0 0 22px oklch(62.5% 0.198 4.4 / 0.32);
}

.screen-inner > *,
.blackhat-callout > * {
  position: relative;
  z-index: 3;
}

.hero-form-head,
.callout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid oklch(55% 0.19 8 / 0.5);
}

.hero-form-head .module-title,
.callout-header .module-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--pink-hot);
  font-size: 0.68rem;
}

.callout-body {
  display: grid;
  align-content: center;
  gap: 15px;
  min-width: 0;
}

.callout-body strong {
  display: block;
  max-width: 100%;
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: clamp(2rem, 3.08vw, 2.28rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 oklch(100% 0 0 / 0.12),
    0 3px 6px oklch(0% 0 0 / 0.7),
    0 0 22px oklch(62.5% 0.198 4.4 / 0.28);
}

.callout-body span {
  max-width: 33ch;
  color: var(--pink-hot);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.15;
}

.callout-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(100%, 260px);
  min-height: 48px;
  padding: 0 17px 0 19px;
  border: 1px solid oklch(68% 0.18 4.4);
  border-radius: 4px;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.24), transparent 26%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.1) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, var(--pink-hot), var(--pink));
  color: oklch(98% 0.01 4.4);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    0 0 18px oklch(62.5% 0.198 4.4 / 0.42),
    0 4px 9px oklch(0% 0 0 / 0.62),
    inset 0 1px 0 oklch(100% 0 0 / 0.32),
    inset 0 -4px 5px oklch(0% 0 0 / 0.24);
}

.callout-cta span:last-child {
  display: grid;
  place-items: center;
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(0% 0 0 / 0.28);
  box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.5);
}

.blackhat-callout:hover .callout-cta,
.blackhat-callout:focus-visible .callout-cta {
  border-color: oklch(76% 0.17 4.4);
  box-shadow:
    0 0 24px oklch(62.5% 0.198 4.4 / 0.62),
    0 4px 9px oklch(0% 0 0 / 0.62),
    inset 0 1px 0 oklch(100% 0 0 / 0.34),
    inset 0 -4px 5px oklch(0% 0 0 / 0.22);
}

.hero-reserve-form {
  align-self: stretch;
  align-content: center;
  gap: 6px;
}

.hero-reserve-form label {
  gap: 6px;
}

.hero-reserve-form label span {
  font-size: 0.56rem;
}

.hero-reserve-form input {
  min-height: 31px;
  font-size: 0.74rem;
  padding: 7px 10px;
}

.hero-reserve-form .form-status {
  min-height: 17px;
  font-size: 0.68rem;
}

.hero-reserve-form .primary-action,
.hero-reserve-form .secondary-action {
  min-height: 33px;
  font-size: 0.78rem;
}

.dual-control {
  display: flex;
  justify-content: center;
  gap: 7px;
  width: 100%;
}

.dual-control label {
  display: grid;
  gap: 7px;
  justify-items: center;
  max-width: 36px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: anywhere;
}

.led-row {
  justify-content: center;
  flex-wrap: wrap;
}

.led-row span:nth-child(even),
.jack-tower span:nth-child(3n) {
  background: var(--amber);
  box-shadow: 0 0 10px oklch(82% 0.16 82 / 0.75);
}

.led-row span.is-dim,
.jack-tower span.is-dim {
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.18), transparent 21%),
    radial-gradient(circle, oklch(35% 0.018 210), oklch(15% 0.012 210) 72%);
  box-shadow: none;
  animation: none;
}

.wave-icons {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.85rem;
}

.drumpad-body {
  display: grid;
  grid-template-columns: minmax(88px, 96px) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
}

.drumpad-controls {
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  padding-top: 2px;
}

.drumpad-knob-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.drumpad-knob-column {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.drumpad-controls label {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.46rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.drumpad-controls .knob.small {
  width: 29px;
}

.drumpad-transport {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}

.transport-button {
  position: relative;
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
  border: 1px solid oklch(31% 0.018 210);
  border-radius: 4px;
  background:
    radial-gradient(circle at 28% 18%, oklch(100% 0 0 / 0.12), transparent 18%),
    linear-gradient(180deg, oklch(24% 0.016 210), oklch(8% 0.01 210));
  color: var(--muted);
  cursor: pointer;
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.13),
    inset 0 -3px 5px oklch(0% 0 0 / 0.62),
    0 2px 4px oklch(0% 0 0 / 0.42);
  transition:
    border-color 140ms var(--ease-out-quart),
    color 140ms var(--ease-out-quart),
    filter 140ms var(--ease-out-quart),
    transform 140ms var(--ease-out-quart),
    box-shadow 140ms var(--ease-out-quart);
  touch-action: manipulation;
  user-select: none;
}

.transport-button:hover:not(:disabled),
.transport-button:focus-visible:not(:disabled) {
  border-color: var(--pink-hot);
  color: var(--text);
  filter: brightness(1.12);
  outline: none;
}

.transport-button:active:not(:disabled),
.transport-button.is-active {
  transform: translateY(1px);
}

.transport-button.is-active {
  border-color: var(--pink-hot);
  color: var(--pink-hot);
  box-shadow:
    0 0 13px oklch(62.5% 0.198 4.4 / 0.42),
    inset 0 1px 0 oklch(100% 0 0 / 0.15),
    inset 0 -3px 5px oklch(0% 0 0 / 0.58),
    0 2px 4px oklch(0% 0 0 / 0.42);
}

#playDrumPad.is-active {
  border-color: var(--green);
  color: var(--green);
  box-shadow:
    0 0 13px oklch(77% 0.16 150 / 0.42),
    inset 0 1px 0 oklch(100% 0 0 / 0.15),
    inset 0 -3px 5px oklch(0% 0 0 / 0.58),
    0 2px 4px oklch(0% 0 0 / 0.42);
}

.transport-button:disabled {
  cursor: default;
  opacity: 0.48;
  filter: grayscale(0.3);
}

.drum-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-self: center;
  gap: 6px;
  width: min(100%, 188px);
  padding: 8px;
  border: 1px solid oklch(31% 0.02 210);
  border-radius: 5px;
  background:
    var(--photo-noise),
    linear-gradient(115deg, oklch(100% 0 0 / 0.06), transparent 28%),
    repeating-linear-gradient(90deg, oklch(100% 0 0 / 0.018) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, oklch(5% 0.01 210), oklch(11% 0.014 210));
  box-shadow:
    inset 0 0 18px oklch(0% 0 0 / 0.74),
    inset 0 1px 0 oklch(100% 0 0 / 0.09);
}

.pad {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid oklch(32% 0.018 210);
  border-radius: 5px;
  cursor: pointer;
  color: var(--dim);
  background:
    radial-gradient(circle at 34% 22%, oklch(100% 0 0 / 0.11), transparent 18%),
    linear-gradient(180deg, oklch(24% 0.016 210), oklch(7% 0.01 210));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -5px 9px oklch(0% 0 0 / 0.68),
    0 3px 6px oklch(0% 0 0 / 0.48);
  transition:
    border-color 120ms var(--ease-out-quart),
    color 120ms var(--ease-out-quart),
    filter 120ms var(--ease-out-quart),
    transform 120ms var(--ease-out-quart),
    box-shadow 120ms var(--ease-out-quart);
  touch-action: manipulation;
}

.pad::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 3px;
  border: 1px solid oklch(100% 0 0 / 0.045);
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.035), transparent 48%);
  pointer-events: none;
}

.pad::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 2px;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 45%, oklch(100% 0 0 / 0.58), transparent 24%),
    radial-gradient(circle, var(--pink-hot), oklch(40% 0.17 13.1 / 0.72) 72%, transparent 100%);
  box-shadow:
    0 0 15px oklch(62.5% 0.198 4.4 / 0.72),
    inset 0 1px 0 oklch(100% 0 0 / 0.24);
  pointer-events: none;
}

.pad:hover,
.pad:focus-visible {
  border-color: var(--pink-hot);
  color: var(--text);
  filter: brightness(1.12);
  outline: none;
}

.pad.is-hit {
  animation: padShellFlash 560ms var(--ease-out-quart) both;
}

.pad.is-hit::after {
  animation: padLight 560ms var(--ease-out-quart) both;
}

.pad.is-struck,
.pad:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.24);
}

@keyframes padShellFlash {
  0%,
  100% {
    border-color: oklch(32% 0.018 210);
    box-shadow:
      inset 0 1px 0 oklch(100% 0 0 / 0.12),
      inset 0 -5px 9px oklch(0% 0 0 / 0.68),
      0 3px 6px oklch(0% 0 0 / 0.48);
  }

  18%,
  48% {
    border-color: oklch(62.5% 0.198 4.4);
    box-shadow:
      0 0 14px oklch(62.5% 0.198 4.4 / 0.5),
      inset 0 1px 0 oklch(100% 0 0 / 0.18),
      inset 0 -5px 9px oklch(0% 0 0 / 0.58),
      0 3px 6px oklch(0% 0 0 / 0.48);
  }
}

@keyframes padLight {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }

  16% {
    opacity: 1;
    transform: scale(0.96);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

.jack-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 20px);
  gap: 8px;
  justify-content: center;
}

.jack-grid.tiny {
  grid-template-columns: repeat(var(--cols, 4), 18px);
  gap: 7px;
}

.jack-grid.tiny .jack {
  width: 18px;
}

.ingest-sources {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-bottom: 9px;
}

.ingest-source-bank {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.ingest-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: min(100%, 76px);
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.46rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.source-led {
  --twinkle: 1;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.86), transparent 21%),
    radial-gradient(circle, var(--pink-hot), oklch(34% 0.14 13.1) 72%);
  box-shadow:
    0 0 calc(7px * var(--twinkle)) oklch(62.5% 0.198 4.4 / 0.82),
    inset 0 -1px 1px oklch(0% 0 0 / 0.48);
}

.ingest-jacks {
  --cols: 3;
  grid-template-columns: repeat(3, 20px);
  gap: 8px;
  justify-content: center;
}

.streaming-status {
  width: 100%;
  display: grid;
  gap: 7px;
  margin-top: 0;
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  text-transform: uppercase;
}

.streaming-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 700;
}

.streaming-header b {
  color: var(--pink-hot);
  font-size: 0.54rem;
  letter-spacing: 0;
  text-shadow: 0 0 8px oklch(62.5% 0.198 4.4 / 0.7);
}

.streaming-display {
  position: relative;
  height: 76px;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid oklch(32% 0.02 210);
  border-radius: 3px;
  background:
    linear-gradient(115deg, oklch(100% 0 0 / 0.07), transparent 32%),
    linear-gradient(90deg, transparent 0 49%, oklch(62.5% 0.198 4.4 / 0.1) 49% 50%, transparent 50%),
    linear-gradient(0deg, transparent 0 49%, oklch(62.5% 0.198 4.4 / 0.14) 49% 50%, transparent 50%),
    repeating-linear-gradient(90deg, oklch(68% 0.14 4.4 / 0.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(0deg, transparent 0 10px, oklch(100% 0 0 / 0.025) 10px 11px),
    oklch(4% 0.012 210);
  box-shadow:
    inset 0 0 13px oklch(0% 0 0 / 0.82),
    inset 0 1px 0 oklch(100% 0 0 / 0.1);
}

.streaming-display svg {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.streaming-trace {
  animation: streamingScan var(--streaming-scan-duration) ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}

.streaming-line {
  stroke: var(--pink-hot);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px oklch(62.5% 0.198 4.4 / 0.78));
}

.streaming-dot {
  opacity: 0.18;
  fill: var(--pink-hot);
  filter: drop-shadow(0 0 7px oklch(62.5% 0.198 4.4 / 0.72));
  transform-box: fill-box;
  transform-origin: center;
  animation: streamingDot var(--streaming-dot-duration) linear infinite;
}

.streaming-dot.dot-b {
  animation-delay: 1.35s;
}

.streaming-dot.dot-c {
  animation-delay: 2.7s;
}

@keyframes streamingScan {
  from { transform: translateY(-36px); }
  to { transform: translateY(36px); }
}

@keyframes streamingDot {
  0%,
  13%,
  100% {
    opacity: 0.12;
    transform: scale(0.75);
  }

  4%,
  8% {
    opacity: 1;
    transform: scale(1.55);
  }
}

.normalize-module,
.enrich-module,
.detect-module,
.respond-module,
.route-module {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 11px;
  padding-inline: 8px;
}

.vertical-patch {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
}

.vertical-patch .jack {
  width: 18px;
}

.jack-tower {
  flex-direction: column;
}

.route-grid {
  display: flex;
  gap: 10px;
}

.compose-module {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 8px;
  padding-inline: 8px;
}

.integration-groups {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
}

.integration-bank {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.integration-bank > span {
  justify-self: center;
  max-width: 100%;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.42rem;
  font-weight: 700;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

.integration-grid {
  --cols: 2;
  grid-template-columns: repeat(2, 15px);
  gap: 5px 4px;
  justify-content: center;
  padding: 0;
}

.integration-grid .jack {
  width: 15px;
}

.mix-module {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
}

.hotline span {
  width: 8px;
  height: 8px;
}

.faders {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 146px;
  padding-top: 4px;
}

.faders label {
  display: grid;
  place-items: center;
}

input[type="range"] {
  appearance: none;
  width: 18px;
  height: 126px;
  accent-color: var(--pink-hot);
  writing-mode: vertical-lr;
  direction: rtl;
  cursor: pointer;
  background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.08), transparent 42%),
    linear-gradient(180deg, oklch(4% 0.008 210), oklch(16% 0.012 210), oklch(3% 0.006 210));
  box-shadow:
    inset 0 0 5px oklch(0% 0 0 / 0.94),
    0 1px 0 oklch(100% 0 0 / 0.08);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 34px;
  margin-left: -5px;
  border: 1px solid oklch(66% 0.17 4.4);
  border-radius: 5px;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.28), transparent 26%),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.18) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, oklch(62.5% 0.198 4.4), oklch(51.5% 0.202 13.1));
  box-shadow:
    0 0 14px oklch(62.5% 0.198 4.4 / 0.52),
    0 3px 7px oklch(0% 0 0 / 0.74),
    inset 0 1px 0 oklch(100% 0 0 / 0.32),
    inset 0 -3px 4px oklch(0% 0 0 / 0.34);
}

.flow-module {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
}

.sequencer {
  display: grid;
  grid-template-columns: repeat(8, 5px);
  gap: 3px;
  justify-content: center;
}

.sequencer span {
  --twinkle: 1;
  width: 5px;
  height: 18px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.34), transparent 38%),
    linear-gradient(180deg, var(--pink-hot), oklch(46% 0.19 13.1));
  box-shadow:
    0 0 calc(7px * var(--twinkle)) oklch(62.5% 0.198 4.4 / 0.7),
    inset 0 1px 0 oklch(100% 0 0 / 0.2),
    inset 0 -1px 1px oklch(0% 0 0 / 0.38);
}

.sequencer span:nth-child(3n) {
  background: var(--amber);
}

.handoff-module {
  padding: 10px;
}

.handoff-module .module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--green);
  border-bottom: 1px solid oklch(77% 0.16 150 / 0.6);
  padding-bottom: 6px;
  margin-bottom: 5px;
}

.astro-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.astro-sparkle {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--green);
  filter: drop-shadow(0 0 7px oklch(77% 0.16 150 / 0.7));
}

.astro-sparkle path {
  fill: currentColor;
}

.handoff-module .status-led {
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.9), transparent 21%),
    radial-gradient(circle, var(--green) 0 48%, oklch(42% 0.12 150) 68%, oklch(12% 0.03 150) 100%);
  box-shadow:
    0 0 calc(7px * var(--twinkle)) oklch(77% 0.16 150 / 0.86),
    0 0 calc(16px * var(--twinkle)) oklch(77% 0.16 150 / 0.26),
    inset 0 -1px 1px oklch(0% 0 0 / 0.48);
}

.handoff-display {
  display: grid;
  gap: 8px;
}

.handoff-scope {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 5px;
  height: 36px;
  padding: 6px 8px;
  border: 1px solid oklch(31% 0.02 210);
  border-radius: 4px;
  background:
    var(--photo-noise),
    linear-gradient(180deg, oklch(2% 0 0 / 0.8), oklch(8% 0.018 210));
  box-shadow:
    inset 0 0 16px oklch(0% 0 0 / 0.78),
    inset 0 1px 0 oklch(100% 0 0 / 0.08);
}

.handoff-scope span {
  display: block;
  min-height: 8px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.42), transparent 28%),
    var(--green);
  box-shadow: 0 0 10px oklch(77% 0.16 150 / 0.58);
}

.handoff-scope span:nth-child(2) { height: 18px; }
.handoff-scope span:nth-child(3) { height: 26px; background: var(--green); }
.handoff-scope span:nth-child(4) { height: 14px; }
.handoff-scope span:nth-child(5) { height: 30px; }
.handoff-scope span:nth-child(6) { height: 22px; background: var(--green); }

.handoff-steps {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.handoff-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.52rem;
}

.handoff-steps span {
  color: var(--dim);
}

.handoff-steps strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.handoff-steps i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.86), transparent 21%),
    radial-gradient(circle, var(--green), oklch(34% 0.1 150) 72%);
  box-shadow: 0 0 8px oklch(77% 0.16 150 / 0.72);
}

.handoff-steps li:nth-child(3) i {
  background:
    radial-gradient(circle at 35% 28%, oklch(100% 0 0 / 0.82), transparent 21%),
    radial-gradient(circle, var(--green), oklch(34% 0.1 150) 72%);
  box-shadow: 0 0 8px oklch(77% 0.16 150 / 0.72);
}

.handoff-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid oklch(33% 0.025 210);
  border-radius: 4px;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.055), transparent 32%),
    oklch(4% 0.012 210);
  box-shadow: inset 0 2px 8px oklch(0% 0 0 / 0.72);
}

.handoff-readout span,
.handoff-readout b {
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.handoff-readout span {
  color: var(--green);
  text-shadow: 0 0 8px oklch(77% 0.16 150 / 0.72);
}

.handoff-readout b {
  color: var(--muted);
}

.reserve-form {
  display: grid;
  gap: 4px;
}

.reserve-form label {
  display: grid;
  gap: 4px;
}

.reserve-form label span {
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.48rem;
  font-weight: 700;
  text-transform: uppercase;
}

.reserve-form input {
  width: 100%;
  min-height: 25px;
  border: 1px solid oklch(33% 0.025 210);
  border-radius: 4px;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.055), transparent 32%),
    repeating-linear-gradient(180deg, transparent 0 3px, oklch(100% 0 0 / 0.018) 3px 4px),
    oklch(4% 0.012 210);
  color: var(--pink-hot);
  padding: 5px 8px;
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.64rem;
  box-shadow: inset 0 2px 8px oklch(0% 0 0 / 0.72);
}

.reserve-form input:focus {
  border-color: var(--pink-hot);
  outline: none;
  box-shadow:
    0 0 0 2px oklch(62.5% 0.198 4.4 / 0.26),
    inset 0 2px 8px oklch(0% 0 0 / 0.72);
}

.form-status {
  min-height: 13px;
  margin: 0;
  color: var(--muted);
  font-size: 0.58rem;
}

.primary-action,
.secondary-action {
  width: 100%;
  min-height: 30px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.72rem;
}

.primary-action {
  border: 1px solid oklch(68% 0.18 4.4);
  background:
    linear-gradient(90deg, oklch(100% 0 0 / 0.22), transparent 22% 72%, oklch(100% 0 0 / 0.12)),
    repeating-linear-gradient(0deg, oklch(100% 0 0 / 0.1) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, oklch(62.5% 0.198 4.4), oklch(51.5% 0.202 13.1));
  color: oklch(96% 0.012 4.4);
  box-shadow:
    0 0 18px oklch(62.5% 0.198 4.4 / 0.52),
    0 3px 7px oklch(0% 0 0 / 0.55),
    inset 0 1px 0 oklch(100% 0 0 / 0.35),
    inset 0 -4px 5px oklch(0% 0 0 / 0.24);
}

.secondary-action {
  border: 1px solid oklch(34% 0.02 210);
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.08), transparent 30%),
    linear-gradient(180deg, oklch(18% 0.016 210), oklch(8% 0.012 210));
  color: var(--muted);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -2px 4px oklch(0% 0 0 / 0.55),
    0 2px 5px oklch(0% 0 0 / 0.34);
}

.primary-action:hover,
.primary-action:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible {
  outline: none;
  filter: brightness(1.12);
}

.signup-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
}

.signup-modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, oklch(16% 0.02 215 / 0.32), transparent 36%),
    oklch(0% 0 0 / 0.76);
  backdrop-filter: blur(7px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(456px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid oklch(38% 0.026 210);
  border-radius: 8px;
  background:
    var(--photo-noise),
    radial-gradient(circle at 52% 0%, oklch(78% 0.03 220 / 0.12), transparent 36%),
    repeating-linear-gradient(94deg, transparent 0 18px, oklch(100% 0 0 / 0.022) 18px 19px),
    linear-gradient(180deg, oklch(18% 0.017 210), oklch(7% 0.012 210));
  box-shadow:
    0 28px 78px oklch(0% 0 0 / 0.78),
    0 0 34px oklch(62.5% 0.198 4.4 / 0.18),
    inset 0 1px 0 oklch(100% 0 0 / 0.12),
    inset 0 -2px 7px oklch(0% 0 0 / 0.64);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  aspect-ratio: 1;
  border: 1px solid oklch(34% 0.02 210);
  border-radius: 50%;
  background:
    linear-gradient(180deg, oklch(100% 0 0 / 0.08), transparent 32%),
    oklch(8% 0.012 210);
  color: var(--muted);
  cursor: pointer;
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.75rem;
  font-weight: 800;
}

.modal-close:hover,
.modal-close:focus-visible {
  color: var(--text);
  border-color: var(--pink-hot);
  outline: none;
}

.modal-head {
  display: grid;
  gap: 9px;
  padding-right: 36px;
}

.modal-head .module-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--pink-hot);
}

.modal-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 2rem;
  line-height: 0.96;
  letter-spacing: 0;
}

.modal-head p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.modal-reserve-form {
  gap: 10px;
}

.modal-reserve-form label {
  gap: 6px;
}

.modal-reserve-form label span {
  font-size: 0.58rem;
}

.modal-reserve-form input {
  min-height: 38px;
  font-size: 0.76rem;
  padding: 9px 10px;
}

.modal-reserve-form .form-status {
  min-height: 18px;
  font-size: 0.72rem;
}

.modal-reserve-form .primary-action {
  min-height: 42px;
  font-size: 0.82rem;
}

.right-rail {
  display: grid;
  align-content: center;
  gap: 28px;
  justify-items: center;
}

.rail-control {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: "Azeret Mono", "SFMono-Regular", monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.cable-canvas,
.cables {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: var(--cable-stage-scale);
  pointer-events: none;
  touch-action: none;
  overflow: visible;
}

.cable-canvas {
  z-index: 30;
}

.cables {
  z-index: 31;
}

.cable,
.cable-shadow,
.cable-highlight {
  display: none;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cable-shadow {
  stroke: oklch(0% 0 0 / 0.78);
  stroke-width: 13;
}

.cable {
  stroke-width: 7.2;
  filter: none;
  stroke-dasharray: none;
}

.cable-highlight {
  fill: none;
  pointer-events: none;
  stroke: oklch(100% 0 0 / 0.22);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-1px);
  filter: none;
}

.cable-plug {
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  color: oklch(62.5% 0.198 4.4);
  filter: none;
}

.cable-plug.warm {
  color: var(--amber);
}

.cable-plug.blue {
  color: var(--blue);
}

.cable-plug.is-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 3px 3px oklch(0% 0 0 / 0.74));
}

.plug-hit {
  fill: transparent;
  pointer-events: all;
}

.plug-shell {
  fill: oklch(9% 0.012 210);
  stroke: currentColor;
  stroke-width: 1;
}

.plug-core {
  fill: oklch(1.5% 0.006 210);
  stroke: color-mix(in oklch, currentColor 55%, oklch(0% 0 0));
  stroke-width: 1;
}

.plug-tip {
  fill: oklch(66% 0.018 78);
  stroke: oklch(0% 0 0 / 0.62);
  stroke-width: 0.7;
}

.cable.hot {
  stroke: var(--pink-hot);
  color: oklch(62.5% 0.198 4.4 / 0.34);
}

.cable.warm {
  stroke: var(--amber);
  color: oklch(82% 0.16 82 / 0.26);
}

.cable.blue {
  stroke: var(--blue);
  color: oklch(65% 0.18 240 / 0.3);
}

.is-page-hidden *,
.is-page-hidden *::before,
.is-page-hidden *::after {
  animation-play-state: paused !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 1120px) {
  .landing-shell {
    align-items: start;
    overflow: auto;
  }

  .console {
    min-width: 1010px;
  }
}

@media (max-width: 760px) {
  body {
    background:
      linear-gradient(90deg, oklch(100% 0 0 / 0.025) 1px, transparent 1px) 0 0 / 34px 34px,
      linear-gradient(180deg, oklch(16% 0.016 214), oklch(10% 0.012 210));
  }

  .landing-shell {
    padding: 10px;
  }

  .console {
    min-width: 0;
    width: 100%;
    min-height: auto;
    transform: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "brand brand"
      "hero hero"
      "form form"
      "knobbank knobbank"
      "wave signal"
      "clock master"
      "ingest normalize"
      "enrich detect"
      "respond route"
      "flow flow"
      "compose compose"
      "mix mix"
      "utility right"
      "drumpad drumpad";
  }

  .cable-canvas,
  .cables {
    display: none;
  }

  .screen-inner {
    padding: 26px 22px;
    min-height: 390px;
  }

  .module {
    min-height: 132px;
  }

  .brand-module {
    min-height: 76px;
  }

  .master-module {
    min-height: 280px;
  }

  .integration-groups {
    width: 100%;
  }

  .integration-grid .jack {
    justify-self: center;
  }
}

@media (max-width: 500px) {
  .console {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "hero"
      "form"
      "knobbank"
      "wave"
      "signal"
      "clock"
      "master"
      "ingest"
      "normalize"
      "enrich"
      "detect"
      "respond"
      "route"
      "flow"
      "compose"
      "mix"
      "utility"
      "right"
      "drumpad";
  }

  .screen-inner {
    min-height: 390px;
  }

  .handoff-module,
  .hero-screen {
    padding: 8px;
  }

  .faders {
    gap: 4px;
  }
}