/* ── Beat studio — isolated from CV site styles (styles.css) ── */

body.studio-panel-open {
  overflow-x: hidden;
}
@media (min-width: 900px) {
  body.studio-panel-open #print-work {
    margin-right: min(400px, 38vw);
    transition: margin-right .42s cubic-bezier(.22, 1, .32, 1);
  }
}

#studio-panel {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  width: min(400px, 92vw);
  z-index: 110;
  background: var(--bg);
  border-left: .5px solid var(--line);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--ink) 8%, transparent);
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .44s cubic-bezier(.22, 1, .32, 1),
    visibility .44s;
}
#studio-panel.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
#studio-panel .sl-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px var(--pad-x); border-bottom: .5px solid var(--line);
  flex-shrink: 0;
}

html.a4-mode #studio-panel { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #studio-panel { transition-duration: .01ms; }
}
.sp-solo-hold {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: .5px solid var(--line);
  color: var(--mid);
  padding: 6px 10px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: all .1s ease;
}
.sp-solo-hold:hover { color: var(--ink); border-color: var(--ink); }
.sp-solo-hold.is-active,
.sp-solo-hold:active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.sl-solo-hint { margin-top: -4px; margin-bottom: 8px; }
html.dot-solo .sound-marker.is-solo-muted {
  opacity: 0.28;
  filter: saturate(0.45);
}
html.dot-solo .sound-marker.is-soloed {
  opacity: 1;
  filter: none;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.sl-viz-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--mid);
}
.sl-instructions {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: .5px solid var(--line);
}
.sl-instr-title {
  margin: 0 0 8px;
  font-size: var(--nav-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.sl-instr-body {
  margin: 0 0 8px;
  font-size: var(--body-size);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}
.sl-instr-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--mid);
}
.sl-instr-hint kbd,
.sl-instr-body kbd {
  font-family: var(--font);
  font-size: .92em;
  letter-spacing: .04em;
  padding: 1px 5px;
  border: .5px solid var(--line);
  border-radius: 3px;
}
.sl-text .sl-header {
  padding: 0 0 var(--space-sm);
  border-bottom: none;
  margin-bottom: var(--space-sm);
}
.sl-viz-stack {
  padding-top: var(--space-sm);
  border-bottom: .5px solid var(--line);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-sm);
}
.sl-layer-preview {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sl-preview-stage {
  position: relative;
  height: clamp(72px, 10vh, 96px);
  border: .5px solid var(--line);
  background:
    repeating-linear-gradient(90deg, transparent, transparent calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 40%, transparent) calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 40%, transparent) calc(100% / 16)),
    color-mix(in srgb, var(--mid) 5%, var(--bg));
  display: flex; align-items: center; justify-content: center;
}
.sl-preview-dot {
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 55%, var(--bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 80%, transparent);
  transition: width .12s ease, height .12s ease, transform .12s ease;
}
.sl-preview-dot.is-empty { width: 10px; height: 10px; opacity: .35; }
.sl-preview-dot {
  background: radial-gradient(
    circle at 32% 28%,
    hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light-hi, 62%) / var(--dot-alpha, 0.92)) 0%,
    hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%) / var(--dot-alpha, 0.92)) 100%
  );
  border-radius: 50%;
  box-shadow: 0 0 0 var(--dot-border-w, 2px) color-mix(in srgb, var(--bg) 75%, transparent);
}
.sl-preview-dot.viz-density-8 { outline: 2px solid color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 55%, transparent); outline-offset: 2px; }
.sl-preview-dot.viz-density-4 { outline: 2px dashed color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 45%, transparent); outline-offset: 2px; }
.sl-preview-dot.viz-density-2 { outline: 2px dotted color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 65%, transparent); outline-offset: 2px; }
.sl-viz-stack { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.sl-viz-block { display: flex; flex-direction: column; gap: 4px; }
.sl-viz-block-half { flex: 1; min-width: 0; }
.sl-viz-duo { display: flex; gap: 8px; }
.sl-viz-label {
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
}
.sl-scope, .sl-spectrum, .sl-shape-canvas {
  width: 100%; flex-shrink: 0;
  border: .5px solid var(--line);
  background: color-mix(in srgb, var(--line) 12%, transparent);
}
.sl-scope { height: 52px; }
.sl-spectrum { height: 44px; }
.sl-shape-canvas { height: 40px; }
.sl-preview-stage { height: 56px; }
.sl-pad {
  position: relative; flex: 1; min-height: 140px;
  border: .5px solid var(--line);
  background:
    linear-gradient(var(--line) .5px, transparent .5px) 0 0 / 20% 100%,
    linear-gradient(90deg, var(--line) .5px, transparent .5px) 0 0 / 100% 20%,
    color-mix(in srgb, var(--line) 8%, transparent);
  touch-action: none; cursor: crosshair;
}
.sl-pad-axis {
  position: absolute; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid); pointer-events: none;
}
.sl-pad-axis-y { left: 8px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left center; }
.sl-pad-axis-x { bottom: 8px; left: 50%; transform: translateX(-50%); }
.sl-pad-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);
  pointer-events: none; transition: left .04s linear, bottom .04s linear;
}
.sl-readout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0;
}
.sl-readout div { display: flex; justify-content: space-between; gap: 8px; }
.sl-readout dt {
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin: 0;
}
.sl-readout dd { font-size: 10px; color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; }
.sl-visual-actions { flex-shrink: 0; }

.sl-guide {
  font-size: 9px; line-height: 1.55; color: var(--mid);
  border-top: .5px solid var(--line); padding-top: 10px;
}
.sl-guide-step { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
.sl-guide-step span {
  flex-shrink: 0; width: 16px; height: 16px; line-height: 16px; text-align: center;
  border: .5px solid var(--line); font-size: 8px; color: var(--ink);
}
.sl-preset-hint { margin: 0; font-style: italic; min-height: 1.4em; }

.sl-presets {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sl-preset-btn {
  font-family: var(--font); font-size: 9px; letter-spacing: .08em;
  background: none; border: .5px solid var(--line);
  color: var(--mid); padding: 8px 12px; cursor: pointer;
  transition: all .12s;
}
.sl-preset-btn:hover { color: var(--ink); border-color: var(--ink); }
.sl-preset-btn.active { background: var(--ink); color: var(--bg); }
.sl-preset-btn[data-preset="kick"].active { background: hsl(14 76% 42%); border-color: hsl(14 76% 42%); color: #fff; }
.sl-preset-btn[data-preset="hat"].active { background: hsl(192 48% 38%); border-color: hsl(192 48% 38%); color: #fff; }
.sl-preset-btn[data-preset="bass"].active { background: hsl(268 52% 42%); border-color: hsl(268 52% 42%); color: #fff; }
.sl-preset-btn[data-preset="clap"].active { background: hsl(38 68% 44%); border-color: hsl(38 68% 44%); color: #fff; }
.sl-preset-btn[data-env="synth"].active,
.sl-preset-btn[data-preset="synth"].active { background: hsl(300 58% 44%); border-color: hsl(300 58% 44%); color: #fff; }
.sl-preset-btn[data-env="arpeggio"].active,
.sl-preset-btn[data-preset="arpeggio"].active { background: hsl(172 62% 38%); border-color: hsl(172 62% 38%); color: #fff; }

#studio-panel.sl-dot-no-preset .sl-dot-synth-only { opacity: 0.45; pointer-events: none; }
.sl-env-sound-panel { margin-bottom: 4px; }
.sl-env-editing { margin-bottom: 8px; font-size: 9px; }
.sl-env-actions .sp-test { flex: 1 1 auto; }
.sl-influence-grid { margin-bottom: 6px; }
.sl-influence-layer {
  margin-bottom: 4px;
  color: var(--ink);
}
.sl-influence-quoted {
  margin: 0 0 6px;
  padding: 6px 8px 6px 10px;
  border-left: 2px solid color-mix(in srgb, var(--mid) 55%, transparent);
  font-size: 9px;
  line-height: 1.4;
  color: var(--mid);
}
.sl-field-inactive {
  opacity: 0.52;
}
.sl-field-inactive .sl-field-label::after {
  content: ' · inactive';
  font-weight: 400;
  opacity: 0.75;
}
.sl-influence-effective {
  margin: 0 0 4px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--mid);
  opacity: 0.88;
}
#studio-panel.sl-no-dot-selected .sl-presence-linked {
  opacity: 0.42;
  pointer-events: none;
}
.sl-influence-readout {
  margin: 0 0 6px;
  font-size: 9px;
  line-height: 1.4;
  color: var(--mid);
}
.sl-influence-readout:empty { display: none; }
.sl-influence-actions { margin-bottom: var(--space-sm); }
#studio-panel.sl-no-dot-selected .sl-influence-readout {
  opacity: 0.65;
}
#studio-panel.sl-dot-step-grid [data-loop-density] { display: none; }
#studio-panel.sl-dot-step-grid .sl-dot-timing .sl-field-block.sl-field-span { display: none; }
#studio-panel.sl-dot-is-drum .sl-dot-melodic-only { display: none !important; }
#studio-panel.sl-dot-is-melodic .sl-dot-drum-only { display: none !important; }
#studio-panel .sl-env-wave { display: none; }
#studio-panel.sl-env-is-synth .sl-env-wave { display: block; }
#studio-panel.sl-env-is-synth .sl-env-drum-wave-hint { display: none; }
#studio-panel.sl-dot-is-drum .sl-env-drum-wave-hint { display: block; }
#studio-panel.sl-env-is-synth.sl-dot-is-drum .sl-env-drum-wave-hint { display: none; }
.sl-env-drum-wave-hint { display: none; margin: 0 0 8px; font-size: 9px; }
.sl-spatial-map-hint { font-size: 9px; margin-top: 0; opacity: 0.85; }

html.beat-studio:not(.a4-mode) .sound-marker {
  position: relative;
  overflow: visible;
  background: radial-gradient(
    circle at 32% 28%,
    hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light-hi, 62%) / var(--dot-alpha, 0.92)) 0%,
    hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%) / var(--dot-alpha, 0.92)) 54%,
    hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light-lo, 36%) / calc(var(--dot-alpha, 0.92) * 0.92)) 100%
  );
}
html.beat-studio:not(.a4-mode) .sound-marker::before {
  content: '';
  position: absolute;
  inset: 12% 20% 44% 14%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, #fff 18%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.sl-melody-map {
  margin: 0 0 12px; padding: 0 0 0 16px;
  font-size: 9px; line-height: 1.65; color: var(--mid);
}
.sl-melody-map strong { color: var(--ink); font-weight: 400; }
.sl-scale-meta { color: var(--mid); font-size: 8px; }
.sl-presets-group { margin-bottom: 20px; }

.sl-controls {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
#studio-panel:not(.sl-has-layer) .sl-layer-hint { color: var(--mid); font-style: italic; }
.sl-tabs {
  display: flex; gap: 0; border-bottom: .5px solid var(--line); flex-shrink: 0;
  padding: 0 12px; overflow-x: auto;
}
.sl-tab {
  font-family: var(--font); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--mid); padding: 12px 16px; cursor: pointer; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.sl-tab:hover { color: var(--ink); }
.sl-tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.sl-panels { flex: 1; overflow-y: auto; padding: 16px 20px 28px; }
.sl-panel { display: none; }
.sl-panel.active { display: block; }

.sl-group { margin-bottom: 28px; }
.sl-group-title {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: .5px solid var(--line);
}
.sl-wave-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
.sl-wave-btn { width: 100%; padding: 14px 8px !important; font-size: 10px !important; text-align: center; }

#sp-marker-count { margin-top: 4px; }

.sl-loop-list {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.sl-loop-item {
  font-family: var(--font); font-size: 9px; text-align: left;
  background: none; border: .5px solid var(--line); color: var(--mid);
  padding: 8px 10px; cursor: pointer; transition: all .12s;
}
.sl-loop-item:hover, .sl-loop-item.active {
  color: var(--ink); border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.sl-loop-editor {
  border: .5px solid var(--line); padding: 12px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--line) 6%, transparent);
}
.sl-loop-editor-title {
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 8px; font-weight: 400; color: var(--ink);
}
.sl-loop-note { margin-bottom: 10px !important; font-variant-numeric: tabular-nums; }

/* ── Beat studio — full-page maker (separate from CV table) ── */
#beat-studio {
  display: none;
}
html.beat-studio:not(.a4-mode) #hero,
html.beat-studio:not(.a4-mode) #print-work {
  display: none !important;
}
html.beat-studio:not(.a4-mode) #beat-studio {
  display: block;
  min-height: calc(100vh - var(--bar-h));
  padding: var(--space-md) var(--pad-x) var(--space-lg);
  padding-top: calc(var(--bar-h) + var(--space-md));
  box-sizing: border-box;
}
html.beat-studio:not(.a4-mode) body.studio-panel-open #beat-studio {
  padding-right: min(400px, 92vw);
}
.beat-studio-inner {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--bar-h) - var(--space-lg));
}
html.beat-studio:not(.a4-mode) #beat-transport {
  display: block;
  padding: 0 0 var(--space-sm);
  margin-bottom: var(--space-sm);
  border-bottom: .5px solid var(--line);
}
.beat-env-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-sm);
}
.beat-env-btn {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: none;
  border: .5px solid var(--line);
  color: var(--mid);
  padding: 8px 14px;
  cursor: pointer;
  transition: all .12s;
}
.beat-env-btn:hover { color: var(--ink); border-color: var(--ink); }
.beat-env-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.beat-env-btn[data-env="kick"].active { background: hsl(14 76% 42%); border-color: hsl(14 76% 42%); color: #fff; }
.beat-env-btn[data-env="hat"].active { background: hsl(192 48% 38%); border-color: hsl(192 48% 38%); color: #fff; }
.beat-env-btn[data-env="clap"].active { background: hsl(38 68% 44%); border-color: hsl(38 68% 44%); color: #fff; }
.beat-env-btn[data-env="bass"].active { background: hsl(268 52% 42%); border-color: hsl(268 52% 42%); color: #fff; }
.beat-env-btn[data-env="bright"].active { background: hsl(88 62% 40%); border-color: hsl(88 62% 40%); color: #fff; }
.beat-env-btn[data-env="minimal"].active { background: hsl(215 28% 48%); border-color: hsl(215 28% 48%); color: #fff; }
.beat-env-btn[data-env="synth"].active { background: hsl(300 58% 44%); border-color: hsl(300 58% 44%); color: #fff; }
.beat-env-btn[data-env="arpeggio"].active { background: hsl(172 62% 38%); border-color: hsl(172 62% 38%); color: #fff; }
.beat-env-btn-all.active {
  background: color-mix(in srgb, var(--ink) 88%, var(--bg));
  border-color: var(--ink);
  color: var(--bg);
}
.beat-env-btn-3d.active {
  background: color-mix(in srgb, var(--ink) 75%, var(--bg));
  border-color: var(--ink);
  color: var(--bg);
}
.beat-env-btn-seq.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

html.beat-studio #btn-sound-mode {
  display: none;
}

.sl-gravity-title { margin-bottom: 4px; }
.sl-gravity-controls {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}
.sp-seg-compact .sp-seg-btn {
  padding: 4px 6px;
  font-size: 9px;
  letter-spacing: .04em;
}
.sl-gravity-summary {
  margin: 0 0 5px;
  font-size: 9px;
  color: var(--mid);
  line-height: 1.35;
}
.sl-gravity-summary #sl-gravity-mode,
.sl-gravity-summary #sl-gravity-pull,
.sl-gravity-summary #sl-gravity-hits {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sl-gravity-sep { opacity: 0.45; margin: 0 3px; }
.sl-gravity-strip {
  display: grid;
  gap: 1px;
  margin-bottom: var(--space-sm);
  opacity: 0.72;
}
.sl-gravity-strip.steps-16 { grid-template-columns: repeat(16, 1fr); }
.sl-gravity-cell {
  aspect-ratio: 1;
  min-height: 5px;
  max-height: 8px;
  border: .5px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, var(--ink));
  border-radius: 1px;
}
.sl-gravity-cell.on { background: color-mix(in srgb, var(--ink) 72%, var(--bg)); border-color: transparent; }
.sl-gravity-cell.on.soft {
  background: color-mix(in srgb, var(--ink) 28%, var(--bg));
}
.sl-gravity-cell.playhead {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 45%, transparent);
}
.sl-gravity-kick .sl-gravity-cell.on { background: color-mix(in srgb, hsl(14 76% 42%) 62%, var(--bg)); }
.sl-gravity-hat .sl-gravity-cell.on { background: color-mix(in srgb, hsl(192 48% 38%) 62%, var(--bg)); }
.sl-gravity-clap .sl-gravity-cell.on { background: color-mix(in srgb, hsl(38 68% 44%) 62%, var(--bg)); }
.sl-gravity-bass .sl-gravity-cell.on { background: color-mix(in srgb, hsl(268 52% 42%) 62%, var(--bg)); }
.sl-gravity-bright .sl-gravity-cell.on { background: color-mix(in srgb, hsl(88 62% 40%) 62%, var(--bg)); }
.sl-gravity-minimal .sl-gravity-cell.on { background: color-mix(in srgb, hsl(215 28% 48%) 62%, var(--bg)); }
.sl-gravity-synth .sl-gravity-cell.on { background: color-mix(in srgb, hsl(300 58% 44%) 62%, var(--bg)); }
.sl-gravity-arpeggio .sl-gravity-cell.on { background: color-mix(in srgb, hsl(172 62% 38%) 62%, var(--bg)); }
.sl-env-sound-grid { margin-bottom: 4px; }
.sl-env-actions { margin-bottom: var(--space-sm); }
#studio-panel.sl-no-dot-selected .sl-gravity-controls,
#studio-panel.sl-no-dot-selected .sl-gravity-summary,
#studio-panel.sl-no-dot-selected .sl-gravity-strip,
#studio-panel.sl-no-dot-selected .sl-dot-timing,
#studio-panel.sl-no-dot-selected .sl-solo-hint,
#studio-panel.sl-no-dot-selected .sl-influence-actions {
  opacity: 0.42;
  pointer-events: none;
}

.beat-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr);
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-height: clamp(320px, 58vh, 820px);
  align-items: stretch;
}
html.beat-view3d-off .beat-workspace {
  grid-template-columns: 1fr;
}
html.beat-view3d-off .beat-view3d {
  display: none;
}
.beat-pad-stack {
  position: relative;
  min-height: clamp(320px, 58vh, 820px);
  height: 100%;
}
.beat-view3d {
  position: relative;
  min-height: clamp(280px, 58vh, 820px);
  border: .5px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 96%, var(--ink));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}
#beat-view3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 58vh, 820px);
  cursor: grab;
  touch-action: none;
}
#beat-view3d-canvas:active { cursor: grabbing; }
#beat-view3d-canvas.can-pick-sphere { cursor: pointer; }
#beat-view3d-canvas.can-pick-sphere:active { cursor: grabbing; }
.beat-view3d-hud {
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  pointer-events: none;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mid);
}
.beat-view3d-title { color: var(--ink); font-weight: 600; }
.beat-view3d-step {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
@media (max-width: 960px) {
  .beat-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 36vh) minmax(300px, 1fr);
  }
  .beat-pad-stack { min-height: clamp(280px, 48vh, 640px); }
  #beat-view3d-canvas { min-height: min(36vh, 320px); }
}

.beat-pad {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 58vh, 820px);
  border-radius: 3px;
  cursor: crosshair;
  touch-action: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100% / 32 - .5px),
      color-mix(in srgb, var(--line) 18%, transparent) calc(100% / 32 - .5px),
      color-mix(in srgb, var(--line) 18%, transparent) calc(100% / 32)
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 32%, transparent) calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 32%, transparent) calc(100% / 16)
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(100% / 10 - .5px),
      color-mix(in srgb, var(--line) 14%, transparent) calc(100% / 10 - .5px),
      color-mix(in srgb, var(--line) 14%, transparent) calc(100% / 10)
    ),
    radial-gradient(ellipse 95% 80% at 50% 42%,
      color-mix(in srgb, var(--mid) 5%, var(--bg)),
      color-mix(in srgb, var(--ink) 6%, var(--bg)) 78%,
      color-mix(in srgb, var(--ink) 10%, var(--bg)));
}
.beat-pad.influence-active {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100% / 32 - .5px),
      color-mix(in srgb, var(--line) 18%, transparent) calc(100% / 32 - .5px),
      color-mix(in srgb, var(--line) 18%, transparent) calc(100% / 32)
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 32%, transparent) calc(100% / 16 - .5px),
      color-mix(in srgb, var(--line) 32%, transparent) calc(100% / 16)
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent calc(100% / 10 - .5px),
      color-mix(in srgb, var(--line) 14%, transparent) calc(100% / 10 - .5px),
      color-mix(in srgb, var(--line) 14%, transparent) calc(100% / 10)
    ),
    radial-gradient(ellipse 90% 70% at 50% 55%,
      color-mix(in srgb, var(--mid) 12%, var(--bg)),
      color-mix(in srgb, var(--mid) 5%, var(--bg)));
}
html.beat-studio:not(.a4-mode):not(.beat-env-overview) .sound-marker.is-env-muted {
  opacity: 0.22;
  filter: saturate(0.35);
  pointer-events: none;
}
html.beat-studio.beat-env-overview:not(.a4-mode) .sound-marker[data-env-id] {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 9;
}
html.beat-studio.beat-env-overview:not(.a4-mode) .sound-marker.is-selected {
  z-index: 11;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
html.beat-studio:not(.a4-mode) .sound-marker.is-env-active {
  opacity: 1;
  filter: none;
  z-index: 10;
}
html.beat-studio:not(.a4-mode) .sound-marker.is-env-active.is-selected {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.beat-pad-axis {
  position: absolute;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  pointer-events: none;
  z-index: 2;
}
.beat-pad-axis-x { bottom: 10px; left: 50%; transform: translateX(-50%); }
.beat-pad-axis-y { left: 10px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left center; }
.beat-pad.beat-pad-env-kick { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(14 76% 42%) 35%, transparent); }
.beat-pad.beat-pad-env-hat { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(192 48% 38%) 35%, transparent); }
.beat-pad.beat-pad-env-clap { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(38 68% 44%) 35%, transparent); }
.beat-pad.beat-pad-env-bass { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(268 52% 42%) 35%, transparent); }
.beat-pad.beat-pad-env-bright { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(88 62% 40%) 35%, transparent); }
.beat-pad.beat-pad-env-minimal { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(215 28% 48%) 35%, transparent); }
.beat-pad.beat-pad-env-synth { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(300 58% 44%) 35%, transparent); }
.beat-pad.beat-pad-env-arpeggio { box-shadow: inset 0 0 0 1px color-mix(in srgb, hsl(172 62% 38%) 35%, transparent); }

.sl-dot-subtitle {
  margin: -4px 0 8px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
}
.beat-studio-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}
.beat-bonds-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.beat-bond {
  fill: none;
  stroke: hsl(var(--bond-h, 210) var(--bond-s, 48%) var(--bond-l, 50%));
  stroke-linecap: round;
  transition: opacity .15s ease;
}
.beat-bond-time {
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
.beat-bond-harm {
  stroke-width: 2.5;
}
.beat-bond-both {
  stroke-width: 3.25;
}
.beat-bond-z {
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
}
.beat-bond-clash {
  stroke-width: 3.5;
  stroke-dasharray: 2 3;
}
.beat-pad-stereo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 6px 10px 8px;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mid);
  opacity: 0.42;
  z-index: 2;
}
.beat-pad-stereo-c { opacity: 0.55; letter-spacing: .08em; text-transform: none; font-size: 7px; }
html.beat-studio:not(.a4-mode) .sound-marker::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--dot-pan, 0) * 14px);
  bottom: -5px;
  width: 10px;
  height: 2px;
  margin-left: -5px;
  border-radius: 1px;
  background: color-mix(in srgb, hsl(var(--dot-hue, 210) var(--dot-sat, 48%) var(--dot-light, 48%)) 70%, transparent);
  opacity: 0.55;
  pointer-events: none;
}
html.beat-studio:not(.a4-mode) .sound-marker.is-mix-clash::after {
  background: #c45a2a;
  opacity: 0.85;
}
html.beat-studio:not(.a4-mode) .sound-marker-preview.is-clash-preview {
  box-shadow: 0 0 0 2px color-mix(in srgb, #c45a2a 65%, transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker-preview.is-safe-preview {
  box-shadow: 0 0 0 1px color-mix(in srgb, #5fd88a 45%, transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker-preview.is-nudged-preview {
  outline: 1px dashed color-mix(in srgb, var(--mid) 55%, transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker {
  box-shadow:
    0 0 0 var(--dot-border-w, 2px) color-mix(in srgb, var(--bg) 82%, transparent),
    0 0 0 calc(var(--dot-border-w, 2px) + 1px) color-mix(in srgb, var(--ink) 8%, transparent),
    0 calc(2px + 2px * var(--dot-presence, 0.5)) calc(4px + 6px * var(--dot-presence, 0.5))
      color-mix(in srgb, var(--ink) calc(10% + var(--dot-presence, 0.5) * 8%), transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker.is-harmonized {
  box-shadow:
    0 0 0 var(--dot-border-w, 2px) color-mix(in srgb, #c8a860 48%, var(--bg)),
    0 0 0 calc(var(--dot-border-w, 2px) + 1px) color-mix(in srgb, #c8a860 22%, transparent),
    0 calc(2px + 2px * var(--dot-presence, 0.5)) calc(4px + 6px * var(--dot-presence, 0.5))
      color-mix(in srgb, var(--ink) calc(10% + var(--dot-presence, 0.5) * 8%), transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker.is-mix-clash {
  box-shadow:
    0 0 0 calc(var(--dot-border-w, 2px) + 1px) color-mix(in srgb, #b86840 45%, transparent),
    0 calc(2px + 2px * var(--dot-presence, 0.5)) calc(4px + 6px * var(--dot-presence, 0.5))
      color-mix(in srgb, var(--ink) calc(10% + var(--dot-presence, 0.5) * 8%), transparent);
}
html.beat-studio:not(.a4-mode) .sound-marker.is-playing {
  filter: brightness(calc(0.94 + var(--dot-presence, 0.5) * 0.1)) saturate(calc(0.96 + var(--dot-coupling, 0) * 0.08));
}
html.beat-studio:not(.beat-env-overview) .beat-bond-cross {
  opacity: 0.22;
  stroke-width: 1;
}
html.beat-studio.beat-env-overview .beat-bond {
  opacity: 0.48;
}
html.beat-studio:not(.a4-mode) .beat-studio-overlay .sound-marker,
html.beat-studio:not(.a4-mode) .beat-studio-overlay .sound-marker-preview {
  position: absolute;
  pointer-events: auto;
  z-index: 9;
}
html.beat-studio:not(.a4-mode) .beat-studio-overlay .kaoss-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  pointer-events: none;
}
html.a4-mode #beat-studio { display: none !important; }