:root {
  --radius-lg: 18px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --edge: rgba(231, 224, 205, 0.4);
  --edge-strong: rgba(231, 224, 205, 0.75);
}

.daw,
.board-section,
.box {
  border-radius: var(--radius-lg);
  border-color: var(--edge);
}
.daw-transport { border-bottom-color: rgba(74, 73, 64, 0.6); }

.btn {
  border-radius: var(--radius-md);
  border-color: var(--edge-strong);
}
.btn.is-active,
.btn--solid:not(:disabled) { border-color: var(--orange); }

.tbtn { border-radius: 0; border-color: var(--edge-strong); }
.transport-buttons .tbtn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.transport-buttons .tbtn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tbtn--rec.is-active { border-color: var(--led); }

.track-arm,
.track-del {
  border-radius: var(--radius-sm);
  border-color: var(--edge-strong);
}
.track-arm.is-on { border-color: var(--led); }

.meter,
.meter-fill,
.loader-bar,
.loader-bar span {
  border-radius: var(--radius-pill);
}
.meter,
.loader-bar { border-color: var(--edge-strong); }

.track-lane { border-radius: var(--radius-md); }

.pedal { border-radius: 10% / 6.2%; }
.face,
.treadle { border-radius: 4cqw; }
.knob-pointer { border-radius: var(--radius-pill); }

:root {
  --glass-panel: var(--panel);
  --glass-control: var(--control);
}

.daw,
.board-section,
.box,
.site-footer {
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.daw,
.board-section,
.box {
  border-color: rgba(0, 0, 0, 0.35);
  --lift: calc(var(--drift, 0px) * var(--k, 1) * -1);
  box-shadow:
    calc(8px + var(--lift) * 0.4) calc(10px + var(--lift)) 0 rgba(0, 0, 0, 0.85),
    0 calc(16px + var(--lift) * 1.5) calc(40px + var(--lift) * 2) rgba(0, 0, 0, 0.55);
}

.btn:not(.btn--solid):not(.is-active),
.tbtn:not(.is-active),
.track-del:not(:hover) { background: var(--glass-control); }
.track-lane { background: var(--lane); }

select option { background: #1a1a1a; }