@patchbayhq/ui 0.1.0

package/dist/styles.css

@@ -0,0 +1,1476 @@
+:root {
+  --control-bg: transparent;
+  --control-active-bg: transparent;
+  --control-border: transparent;
+  --focus-border: #505050;
+  --slider-color: #282828;
+  --modulation-color: #6dd7ff;
+  --indicator-color: #a5a5a5;
+  --indicator-active-color: #000000;
+  --indicator-border-color: #505050;
+  --text-color: #000000;
+  --muted-text-color: #aaa493;
+  --panel-color: #282824;
+  --gridline-color: rgba(255, 255, 255, 0.08);
+  --control-radius: 2px;
+  --control-font:
+    "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.field {
+  display: inline-grid;
+  gap: 7px;
+  color: var(--text-color);
+  font-family: var(--control-font);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.field__label {
+  color: var(--muted-text-color);
+  text-align: center;
+}
+
+.slider {
+  --slider-length: 95px;
+  --slider-thickness: 39px;
+  --slider-rail-thickness: 2px;
+  --slider-thumb-size: 9px;
+  --slider-mod-size: 5px;
+  position: relative;
+  display: inline-block;
+  inline-size: var(--slider-thickness);
+  block-size: var(--slider-length);
+  background: var(--control-bg);
+  border: 1px solid var(--control-border);
+  border-radius: var(--control-radius);
+  box-shadow: none;
+  contain: layout paint;
+  touch-action: none;
+}
+
+.slider[data-orientation="horizontal"] {
+  inline-size: var(--slider-length);
+  block-size: var(--slider-thickness);
+  min-inline-size: 50px;
+}
+
+.slider[data-focused="true"] {
+  border-color: var(--focus-border);
+  box-shadow: 0 0 0 1px var(--focus-border);
+}
+
+.slider input[type="range"] {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  cursor: ns-resize;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.slider[data-orientation="horizontal"] input[type="range"] {
+  cursor: ew-resize;
+}
+
+.slider__fill,
+.slider__modulation,
+.slider__thumb {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  display: block;
+}
+
+.slider__fill {
+  inset-block-start: 6px;
+  inset-block-end: 6px;
+  inset-inline-start: 50%;
+  inline-size: var(--slider-rail-thickness);
+  background: var(--slider-color);
+  border-radius: 1px;
+}
+
+.slider[data-orientation="horizontal"] .slider__fill {
+  inset-inline-start: 6px;
+  inset-inline-end: 6px;
+  inset-block-start: calc(50% - var(--slider-rail-thickness) / 2);
+  inset-block-end: auto;
+  block-size: var(--slider-rail-thickness);
+  inline-size: auto;
+}
+
+.slider__modulation {
+  inset-inline-start: calc(50% + 9px);
+  inline-size: var(--slider-mod-size);
+  block-size: var(--slider-mod-size);
+  translate: -50% -50%;
+  display: none;
+  background: transparent;
+}
+
+.slider[data-orientation="horizontal"] .slider__modulation {
+  inset-block-start: calc(50% + 7px);
+  translate: -50% -50%;
+}
+
+.slider__thumb {
+  inset-inline-start: calc(50% + 2px);
+  inline-size: var(--slider-thumb-size);
+  block-size: var(--slider-thumb-size);
+  translate: 0 -50%;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
+}
+
+.slider__thumb::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--indicator-color);
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+.slider__thumb::after {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  background: transparent;
+  border: 1px solid var(--indicator-border-color);
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+.slider[data-focused="true"] .slider__thumb::before {
+  background: var(--indicator-active-color);
+}
+
+.slider[data-orientation="horizontal"] .slider__thumb {
+  inset-block-start: calc(50% + 1px);
+  translate: -50% 0;
+}
+
+.slider[data-orientation="horizontal"] .slider__thumb::before {
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+}
+
+.slider[data-orientation="horizontal"] .slider__thumb::after {
+  clip-path: polygon(50% 0, 0 100%, 100% 100%);
+}
+
+.slider[data-disabled="true"],
+.slider:has(input:disabled) {
+  opacity: 0.5;
+}
+
+.demo-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 28px;
+}
+
+.demo-group--sliders {
+  min-block-size: 168px;
+}
+
+.field--wide {
+  align-self: end;
+}
+
+.dial {
+  --dial-size: 32px;
+  --dial-value: 0.5;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--dial-size);
+  block-size: var(--dial-size);
+  background: transparent;
+  border-radius: 50%;
+  cursor: ns-resize;
+  touch-action: none;
+}
+
+.dial[data-drag-axis="horizontal"] {
+  cursor: ew-resize;
+}
+
+.dial::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  background: conic-gradient(
+    from 225deg,
+    #9ebce2 0 calc(var(--dial-value) * 270deg),
+    #8a8a8a 0 calc(var(--dial-value) * 270deg + 10deg),
+    transparent 0
+  );
+  border: 0;
+  border-radius: inherit;
+  box-shadow: none;
+  mask: radial-gradient(
+    circle,
+    transparent 0 58%,
+    #000 61% 67%,
+    transparent 70%
+  );
+  -webkit-mask: radial-gradient(
+    circle,
+    transparent 0 58%,
+    #000 61% 67%,
+    transparent 70%
+  );
+}
+
+.dial::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(50% - 1px);
+  inset-block-start: calc(50% - 9px);
+  inline-size: 2px;
+  block-size: 9px;
+  background: #c6c6c6;
+  border-radius: 1px;
+  transform: rotate(calc(-135deg + var(--dial-value) * 270deg));
+  transform-origin: 50% 100%;
+}
+
+.dial input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.button,
+.toggle span {
+  display: inline-block;
+  inline-size: 22px;
+  block-size: 22px;
+  padding: 0;
+  background: #242424;
+  border: 1px solid #525252;
+  border-radius: 2px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
+}
+
+.toggle[data-appearance="primary"] input:checked + span {
+  background: var(--modulation-color);
+  border-color: #101010;
+}
+
+.button[data-appearance="primary"] {
+  background: #242424;
+  border-color: var(--modulation-color);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.14),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.48);
+}
+
+.button[data-appearance="subtle"],
+.toggle[data-appearance="subtle"] span {
+  background: #1d1d1d;
+  border-color: #3d3d3d;
+}
+
+.button[data-appearance="danger"],
+.toggle[data-appearance="danger"] input:checked + span {
+  background: #d95d5d;
+  border-color: #180909;
+}
+
+.button {
+  cursor: pointer;
+}
+
+.button.is-active,
+.button:active {
+  background: #6dd7ff;
+  border-color: #101010;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
+}
+
+.toggle {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 24px;
+  block-size: 24px;
+}
+
+.toggle input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.toggle input:checked + span {
+  background: #f0b51d;
+  border-color: #1a1a1a;
+}
+
+.text-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-inline-size: 104px;
+  min-block-size: 21px;
+  padding: 0 10px;
+  color: #f1f1f1;
+  background: #303030;
+  border: 1px solid #111111;
+  border-radius: 2px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.11),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
+  cursor: pointer;
+  font-family: var(--control-font);
+  font-size: 12px;
+}
+
+.text-button[data-appearance="primary"] {
+  color: #eafdff;
+  background: #242424;
+  border-color: var(--modulation-color);
+}
+
+.text-button[data-appearance="subtle"] {
+  color: var(--muted-text-color);
+  background: #242424;
+  border-color: #333333;
+}
+
+.text-button[data-appearance="danger"] {
+  color: #fff2ef;
+  background: #783431;
+  border-color: #1a0908;
+}
+
+.text-button:active {
+  color: #ffffff;
+  background: #242424;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75);
+}
+
+.text-button[data-appearance="primary"][aria-pressed="true"],
+.text-button[data-appearance="primary"]:active {
+  color: #06120b;
+  background: var(--modulation-color);
+  border-color: #101010;
+}
+
+.text-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+.text-button__icon {
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 1em;
+  line-height: 1;
+}
+
+.text-button__picture {
+  inline-size: 15px;
+  block-size: 15px;
+  flex: 0 0 auto;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.text-button__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.label {
+  min-inline-size: 150px;
+  margin: 0;
+  padding: 2px 4px;
+  color: #d0d0d0;
+  font-family: var(--control-font);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.tabs {
+  display: inline-flex;
+  align-items: stretch;
+  overflow: hidden;
+  border: 1px solid #151515;
+  border-radius: 2px;
+  font-family: var(--control-font);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.tab {
+  min-inline-size: 58px;
+  min-block-size: 20px;
+  padding: 0 9px;
+  color: #f1f1f1;
+  background: #303030;
+  border: 0;
+  border-inline-end: 1px solid #151515;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+
+.tab:last-child {
+  border-inline-end: 0;
+}
+
+.tab.is-active {
+  color: #000000;
+  background: #f0b51d;
+}
+
+.menu {
+  position: relative;
+  display: inline-grid;
+  inline-size: max-content;
+  min-inline-size: 132px;
+  font-family: var(--control-font);
+  font-size: 12px;
+}
+
+.menu__button,
+.number-box {
+  min-block-size: 21px;
+  color: #f1f1f1;
+  background: #303030;
+  border: 1px solid #151515;
+  border-radius: 2px;
+  font-family: var(--control-font);
+  font-size: 12px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
+}
+
+.menu__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-inline-size: 132px;
+  padding: 0 22px 0 6px;
+  cursor: pointer;
+}
+
+.menu__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.52;
+}
+
+.menu__chevron {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: 6px;
+  inline-size: 0;
+  block-size: 0;
+  border-inline: 3px solid transparent;
+  border-block-start: 5px solid #eeeeee;
+  translate: 0 -30%;
+  pointer-events: none;
+}
+
+.menu__value {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.menu__list {
+  position: absolute;
+  z-index: 30;
+  inset-block-start: calc(100% + 3px);
+  inset-inline: 0;
+  display: grid;
+  min-inline-size: 100%;
+  max-block-size: 172px;
+  overflow: auto;
+  padding: 3px;
+  background: #20211d;
+  border: 1px solid #111111;
+  border-radius: 2px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 10px 24px rgba(0, 0, 0, 0.32);
+}
+
+.menu__option {
+  min-block-size: 22px;
+  padding: 0 8px;
+  color: #f1f1f1;
+  text-align: start;
+  background: transparent;
+  border: 0;
+  border-radius: 1px;
+  cursor: pointer;
+  font: inherit;
+}
+
+.menu__option.is-active,
+.menu__option:hover,
+.menu__option:focus-visible {
+  color: #06120b;
+  background: var(--modulation-color);
+  outline: none;
+}
+
+.menu__option.is-selected::after {
+  content: "";
+  float: inline-end;
+  inline-size: 5px;
+  block-size: 5px;
+  margin-block-start: 7px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.menu__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.42;
+}
+
+.number-box {
+  inline-size: 82px;
+  padding: 0 6px;
+}
+
+.arrows {
+  display: inline-flex;
+  align-items: stretch;
+  overflow: hidden;
+  border: 1px solid #4d4d4d;
+  border-radius: 2px;
+}
+
+.arrows button {
+  position: relative;
+  inline-size: 28px;
+  block-size: 18px;
+  padding: 0;
+  background: #a8a8a8;
+  border: 0;
+  border-inline-end: 1px solid #4d4d4d;
+  cursor: pointer;
+}
+
+.arrows button:last-child {
+  border-inline-end: 0;
+}
+
+.arrows button::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  border-block: 4px solid transparent;
+  border-inline-end: 6px solid #1c1c1c;
+  translate: -58% -50%;
+}
+
+.arrows button:last-child::before {
+  border-inline-start: 6px solid #1c1c1c;
+  border-inline-end: 0;
+  translate: -42% -50%;
+}
+
+.drop {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 180px;
+  block-size: 72px;
+  background: #333333;
+  border: 1px solid #5b5b5b;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.drop input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.drop span {
+  inline-size: 54px;
+  block-size: 36px;
+  border: 2px solid #a5a5a5;
+  border-block-start-width: 8px;
+  border-radius: 1px;
+  opacity: 0.75;
+}
+
+.line-set {
+  display: inline-flex;
+  align-items: center;
+  gap: 28px;
+}
+
+.line {
+  display: block;
+  inline-size: 170px;
+  block-size: 7px;
+  background: #a5a5a5;
+  border: 1px solid #1d1d1d;
+}
+
+.line--vertical {
+  inline-size: 7px;
+  block-size: 88px;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns, 16), 1fr);
+  grid-template-rows: 74px 14px;
+  gap: 3px 0;
+  inline-size: 172px;
+  block-size: 96px;
+  padding: 2px 0 1px;
+  background: #333333;
+  border: 0;
+  border-radius: 1px;
+  box-sizing: border-box;
+}
+
+.grid::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline: 0;
+  block-size: 74px;
+  background:
+    linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0.24) 0 25%,
+      transparent 25% 50%,
+      rgba(0, 0, 0, 0.2) 50% 75%,
+      transparent 75% 100%
+    ),
+    repeating-linear-gradient(
+      to right,
+      rgba(10, 10, 10, 0.95) 0 1px,
+      transparent 1px calc(100% / var(--grid-columns, 16))
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.05) 0 1px,
+      transparent 1px 5px
+    ),
+    linear-gradient(#292929, #202020);
+  border: 1px solid #151515;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
+  pointer-events: none;
+}
+
+.grid::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline: 0;
+  block-size: 74px;
+  background: repeating-linear-gradient(
+    to right,
+    transparent 0 calc(25% - 2px),
+    rgba(0, 0, 0, 0.86) calc(25% - 2px) 25%
+  );
+  border-inline: 1px solid #0c0c0c;
+  pointer-events: none;
+}
+
+.grid button,
+.grid__cell,
+.grid__direction {
+  position: relative;
+  z-index: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  inline-size: auto;
+  block-size: auto;
+  padding: 0;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  cursor: crosshair;
+}
+
+.grid button:nth-child(-n + 16),
+.grid__cell {
+  --grid-marker-y: 50%;
+}
+
+.grid button:nth-child(-n + 16).is-active::before,
+.grid__cell.is-active::before {
+  content: "";
+  position: absolute;
+  inset-block-start: var(--grid-marker-y);
+  inset-inline: 2px;
+  block-size: 2px;
+  background: #aebaff;
+  border-radius: 1px;
+  box-shadow:
+    0 0 0 1px rgba(10, 10, 10, 0.22),
+    0 0 4px rgba(116, 158, 255, 0.35);
+  transform: translateY(-50%) rotate(-4deg);
+}
+
+.grid button:nth-child(n + 17),
+.grid__direction {
+  align-self: end;
+  block-size: 13px;
+  margin-inline: 1px;
+  background: linear-gradient(#5f5f5f, #383838);
+  border: 1px solid #171717;
+  border-radius: 1px;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.22),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.55);
+  cursor: pointer;
+}
+
+.grid button:nth-child(n + 17)::before,
+.grid__direction::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  border-block: 4px solid transparent;
+  border-inline-end: 0 solid transparent;
+  border-inline-start: 6px solid #d8d8d8;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65));
+  transform: translate(-38%, -50%);
+}
+
+.grid .grid__direction[data-grid-direction="left"] {
+  background: linear-gradient(#6a6a6a, #414141);
+}
+
+.grid .grid__direction[data-grid-direction="left"]::before {
+  border-inline-start: 0 solid transparent;
+  border-inline-end: 6px solid #d8d8d8;
+  transform: translate(-62%, -50%);
+}
+
+.grid .grid__direction[data-grid-direction="off"] {
+  background: linear-gradient(#484848, #2d2d2d);
+}
+
+.grid .grid__direction[data-grid-direction="off"]::before,
+.grid .grid__direction[data-grid-direction="off"]::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 8px;
+  block-size: 2px;
+  background: #d8d8d8;
+  border: 0;
+  border-radius: 1px;
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65));
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.grid .grid__direction[data-grid-direction="off"]::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.grid button:nth-child(n + 17).is-active,
+.grid button:nth-child(n + 17):active,
+.grid__direction:active {
+  background: linear-gradient(#7a7a7a, #494949);
+  border-color: #0f2330;
+}
+
+.grid button:focus-visible,
+.grid__cell:focus-visible,
+.grid__direction:focus-visible {
+  outline: 1px solid #aebaff;
+  outline-offset: -1px;
+}
+
+.step-sequencer {
+  --step-sequencer-label-inline-size: 50px;
+  --step-sequencer-key-inline-size: 38px;
+  --step-sequencer-cell-inline-size: 14px;
+  --step-sequencer-cell-block-size: 12px;
+  --step-sequencer-loop-block-size: 16px;
+  --step-sequencer-roll-inline-size: calc(var(--step-sequencer-cell-inline-size) * 16);
+  --step-sequencer-roll-block-size: calc(var(--step-sequencer-cell-block-size) * 8);
+  position: relative;
+  display: grid;
+  grid-template-columns:
+    var(--step-sequencer-label-inline-size) var(--step-sequencer-key-inline-size)
+    var(--step-sequencer-roll-inline-size);
+  grid-template-rows: var(--step-sequencer-loop-block-size) var(
+      --step-sequencer-roll-block-size
+    );
+  inline-size: calc(
+    var(--step-sequencer-label-inline-size) + var(--step-sequencer-key-inline-size) +
+      var(--step-sequencer-roll-inline-size)
+  );
+  block-size: calc(
+    var(--step-sequencer-loop-block-size) + var(--step-sequencer-roll-block-size)
+  );
+  overflow: hidden;
+  background: #3b3b3b;
+  border: 1px solid #101010;
+  border-radius: 2px;
+}
+
+.step-sequencer__loop-ruler {
+  grid-column: 3;
+  grid-row: 1;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: repeat(16, var(--step-sequencer-cell-inline-size));
+  align-items: stretch;
+  inline-size: var(--step-sequencer-roll-inline-size);
+  block-size: var(--step-sequencer-loop-block-size);
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.step-sequencer__loop-track {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  background: linear-gradient(#444, #282828);
+  border: 1px solid #101010;
+  box-sizing: border-box;
+}
+
+.step-sequencer__loop-range {
+  position: relative;
+  grid-row: 1;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(10px, 1fr) minmax(10px, 1fr);
+  align-items: center;
+  min-inline-size: 14px;
+  background: linear-gradient(#4c4c4c, #313131);
+  border: 1px solid #101010;
+  box-sizing: border-box;
+  color: #e8e8e8;
+  font-family: var(--control-font);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.step-sequencer__loop-handle {
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: 1px 3px 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  line-height: inherit;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.step-sequencer__loop-handle.is-start {
+  justify-self: start;
+  text-align: start;
+}
+
+.step-sequencer__loop-handle.is-end {
+  justify-self: end;
+  text-align: end;
+}
+
+.step-sequencer__loop-arrow {
+  display: inline-block;
+  inline-size: 0;
+  block-size: 0;
+  opacity: 0.9;
+}
+
+.step-sequencer__loop-arrow.is-right {
+  border-block: 3px solid transparent;
+  border-inline-start: 4px solid currentColor;
+}
+
+.step-sequencer__loop-arrow.is-left {
+  border-block: 3px solid transparent;
+  border-inline-end: 4px solid currentColor;
+}
+
+.step-sequencer__loop-handle:focus-visible {
+  outline: 1px solid #aebaff;
+  outline-offset: -1px;
+}
+
+.step-sequencer__labels {
+  grid-column: 1;
+  grid-row: 1 / 3;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 0 5px 5px;
+  color: #ece7d8;
+  background: #3b3b3b;
+  font-family: var(--control-font);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.step-sequencer__keys {
+  grid-column: 2;
+  grid-row: 2;
+  display: grid;
+  grid-template-rows: repeat(9, 1fr);
+  background: #ffffff;
+  border-inline: 1px solid #101010;
+}
+
+.step-sequencer__keys span {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  background: #ffffff;
+  border-block-end: 1px solid #101010;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.step-sequencer__keys span.is-black {
+  background: #101010;
+  border-block-end-color: #ffffff;
+}
+
+.step-sequencer__keys span:hover,
+.step-sequencer__keys span:focus-visible {
+  outline: 2px solid rgba(49, 135, 255, 0.5);
+  outline-offset: -2px;
+}
+
+.step-sequencer__keys span[aria-pressed="true"] {
+  background: #f3b334;
+}
+
+.step-sequencer__keys span.is-black[aria-pressed="true"] {
+  background: #d48f1f;
+  border-block-end-color: #101010;
+}
+
+.step-sequencer__roll {
+  grid-column: 3;
+  grid-row: 2;
+  display: grid;
+  grid-template-columns: repeat(16, var(--step-sequencer-cell-inline-size));
+  grid-template-rows: repeat(8, var(--step-sequencer-cell-block-size));
+  inline-size: var(--step-sequencer-roll-inline-size);
+  block-size: var(--step-sequencer-roll-block-size);
+  background:
+    repeating-linear-gradient(
+      to right,
+      rgba(15, 95, 130, 0.18) 0 1px,
+      transparent 1px var(--step-sequencer-cell-inline-size)
+    ),
+    repeating-linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.16) 0 1px,
+      transparent 1px var(--step-sequencer-cell-block-size)
+    ),
+    #eee7dc;
+}
+
+.step-sequencer__roll button {
+  position: relative;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+.step-sequencer__roll button[data-step-bar-start="true"] {
+  background: rgba(34, 159, 227, 0.08);
+}
+
+.step-sequencer__note {
+  position: absolute;
+  inset: 3px 2px;
+  border-radius: 1px;
+  pointer-events: none;
+}
+
+.step-sequencer__note.is-orange {
+  background: #f3b334;
+  box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.35),
+    0 0 0 1px rgba(55, 41, 12, 0.45);
+}
+
+.step-sequencer__note.is-blue {
+  background: #229fe3;
+  box-shadow:
+    inset 0 1px rgba(255, 255, 255, 0.4),
+    0 0 0 1px rgba(8, 56, 81, 0.45);
+}
+
+.envelope {
+  inline-size: 210px;
+  block-size: 96px;
+  background: #181818;
+  border: 1px solid #4d4d4d;
+  border-radius: 2px;
+}
+
+.envelope svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  touch-action: none;
+}
+
+.envelope__grid {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.1);
+  stroke-width: 1;
+}
+
+.envelope__curve {
+  fill: none;
+  stroke: #6dd7ff;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.envelope circle {
+  fill: #a94444;
+  stroke: #f1c26a;
+  stroke-width: 1;
+  cursor: grab;
+}
+
+.envelope rect {
+  fill: transparent;
+  stroke: #e7b44e;
+  stroke-width: 2;
+  cursor: grab;
+}
+
+.scope {
+  display: block;
+  inline-size: 184px;
+  block-size: 98px;
+  background: #161616;
+  border: 1px solid #4d4d4d;
+  border-radius: 2px;
+}
+
+.meter {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 44px;
+  block-size: 132px;
+  background: transparent;
+}
+
+.meter__bar {
+  position: relative;
+  display: block;
+  inline-size: 44px;
+  block-size: 132px;
+  overflow: hidden;
+  background: #101010;
+  box-shadow:
+    inset 1px 0 #050505,
+    inset -1px 0 #2b2b2b,
+    inset 0 1px #2b2b2b;
+}
+
+.meter__bar::before {
+  content: "";
+  position: absolute;
+  inset-inline: 3px;
+  inset-block-end: 0;
+  block-size: calc(100% * var(--meter-value, 0));
+  background: linear-gradient(
+    to top,
+    #45b95c 0 72%,
+    #d7c947 72% 90%,
+    #d45145 90%
+  );
+}
+
+.meter__bar::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 10px;
+  inset-inline: 0;
+  block-size: 1px;
+  background: #333333;
+}
+
+.gain {
+  --gain-value: 0.75;
+  --gain-signal: 0;
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: 54px;
+  block-size: 148px;
+  background: transparent;
+}
+
+.gain::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 16px;
+  inset-inline-start: 12px;
+  inline-size: 12px;
+  background: #101010;
+  box-shadow:
+    inset 1px 0 #050505,
+    inset -1px 0 #2b2b2b,
+    inset 0 1px #2b2b2b;
+}
+
+.gain[data-thumb-side="left"]::before {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+.gain input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 16px;
+  inset-inline: 0;
+  inline-size: 100%;
+  margin: 0;
+  cursor: ns-resize;
+  opacity: 0;
+}
+
+.gain__signal {
+  position: absolute;
+  inset-inline-start: 15px;
+  inset-block-end: 16px;
+  inline-size: 6px;
+  block-size: calc((100% - 16px) * var(--gain-signal, 0));
+  background: linear-gradient(
+    to top,
+    #45b95c 0 72%,
+    #d7c947 72% 90%,
+    #d45145 90%
+  );
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.gain[data-thumb-side="left"] .gain__signal {
+  inset-inline-start: auto;
+  inset-inline-end: 3px;
+}
+
+.gain__thumb {
+  position: absolute;
+  inset-block-end: calc(16px + (100% - 24px) * var(--gain-value, 0.75));
+  inset-inline-start: 25px;
+  inline-size: 0;
+  block-size: 0;
+  border-block: 4px solid transparent;
+  border-inline-end: 7px solid #a5a5a5;
+  pointer-events: none;
+}
+
+.gain[data-thumb-side="left"] .gain__thumb {
+  inset-inline-start: auto;
+  inset-inline-end: 17px;
+  border-inline-start: 7px solid #a5a5a5;
+  border-inline-end: 0;
+}
+
+.gain.gain--flush::before,
+.gain.gain--flush input {
+  inset-block-end: 0;
+}
+
+.gain.gain--flush .gain__signal {
+  inset-block-end: 0;
+  block-size: calc(100% * var(--gain-signal, 0));
+}
+
+.gain.gain--flush .gain__thumb {
+  inset-block-end: calc((100% - 8px) * var(--gain-value, 0.75));
+}
+
+.gain__readout {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  color: #c8c8c8;
+  font-family: var(--control-font);
+  font-size: 9px;
+  line-height: 12px;
+  text-align: center;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.color-swatches {
+  display: grid;
+  grid-template-columns: repeat(3, 34px);
+  gap: 8px;
+  padding: 10px;
+  background: #1d1d1d;
+  border: 1px solid #4d4d4d;
+  border-radius: 2px;
+}
+
+.color-swatches input {
+  inline-size: 34px;
+  block-size: 28px;
+  padding: 0;
+  overflow: hidden;
+  background: transparent;
+  border: 1px solid #555555;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.panel {
+  display: grid;
+  gap: 12px;
+  min-inline-size: 0;
+  padding: 14px;
+  color: var(--text-color);
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.035), transparent 34px),
+    var(--panel-color);
+  border: 1px solid rgba(0, 0, 0, 0.62);
+  border-radius: min(8px, calc(var(--control-radius) + 4px));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    0 12px 28px rgba(0, 0, 0, 0.22);
+  box-sizing: border-box;
+  font-family: var(--control-font);
+}
+
+.panel--compact {
+  gap: 8px;
+  padding: 10px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 14px;
+  min-inline-size: 0;
+}
+
+.panel-header__main {
+  display: grid;
+  gap: 2px;
+  min-inline-size: 0;
+}
+
+.panel-header__eyebrow {
+  color: var(--muted-text-color);
+  font-size: 10px;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.panel-header__title,
+.panel-section__title {
+  margin: 0;
+  color: var(--text-color);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.panel-header__subtitle {
+  margin: 0;
+  color: var(--muted-text-color);
+  font-size: 11px;
+  line-height: 1.25;
+}
+
+.panel-header__actions,
+.panel-section__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: end;
+  gap: 6px;
+  min-inline-size: 0;
+}
+
+.panel-section {
+  display: grid;
+  gap: 9px;
+  min-inline-size: 0;
+}
+
+.panel-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-inline-size: 0;
+}
+
+.panel-section__body {
+  display: grid;
+  gap: 10px;
+  min-inline-size: 0;
+}
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-block-size: 18px;
+  max-inline-size: 100%;
+  color: var(--muted-text-color);
+  font-family: var(--control-font);
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.status-indicator__dot {
+  display: inline-block;
+  inline-size: 7px;
+  block-size: 7px;
+  flex: 0 0 auto;
+  background: #777777;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
+}
+
+.status-indicator__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-indicator__value {
+  color: var(--text-color);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.status-indicator[data-tone="active"] .status-indicator__dot {
+  background: #62d887;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.55),
+    0 0 8px rgba(98, 216, 135, 0.45);
+}
+
+.status-indicator[data-tone="warning"] .status-indicator__dot {
+  background: #f0b51d;
+}
+
+.status-indicator[data-tone="danger"] .status-indicator__dot {
+  background: #e05d54;
+}
+
+.status-indicator[data-pulse="true"] .status-indicator__dot {
+  animation: status-indicator-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes status-indicator-pulse {
+  0%,
+  100% {
+    opacity: 0.58;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.macro-rack {
+  --macro-rack-columns: 4;
+  container-type: inline-size;
+  display: grid;
+  grid-template-columns: repeat(var(--macro-rack-columns), minmax(0, 1fr));
+  align-items: end;
+  gap: 12px clamp(4px, 3cqi, 10px);
+  min-inline-size: 0;
+  padding: 12px;
+  background: rgba(16, 16, 16, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: min(8px, calc(var(--control-radius) + 4px));
+  box-sizing: border-box;
+}
+
+.macro-rack__control {
+  inline-size: 100%;
+  justify-items: center;
+  min-inline-size: 0;
+}
+
+.macro-rack__control .field__label {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clip-step-launcher {
+  inline-size: max-content;
+  max-inline-size: 100%;
+}
+
+.clip-step-launcher__transport {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 7px;
+  min-inline-size: 0;
+}
+
+.clip-step-launcher__launch,
+.clip-step-launcher__stop {
+  min-inline-size: 66px;
+  min-block-size: 24px;
+}
+
+.clip-step-launcher__steps {
+  max-inline-size: 100%;
+}
+
+.clip-step-launcher__extra:empty {
+  display: none;
+}