:root{
  --neon: var(--sandbox-accent);
  --glass: color-mix(in srgb, var(--sandbox-surface) 88%, transparent);
  --border: var(--sandbox-border);

  --instrument-fretboard-surface-1: color-mix(in srgb, var(--sandbox-canvas-bg) 90%, var(--sandbox-text) 10%);
  --instrument-fretboard-surface-2: color-mix(in srgb, var(--sandbox-canvas-bg) 72%, var(--sandbox-surface) 28%);
  --instrument-fretboard-edge: var(--sandbox-border);
  --instrument-fret-metal: color-mix(in srgb, var(--sandbox-border) 72%, var(--sandbox-text) 28%);
  --instrument-fret-string: color-mix(in srgb, var(--sandbox-border) 55%, var(--sandbox-text) 45%);
  --instrument-fret-cell: color-mix(in srgb, var(--sandbox-accent) 18%, transparent);
  --instrument-flash-fill: color-mix(in srgb, var(--sandbox-accent) 28%, transparent);

  --instrument-key-white: color-mix(in srgb, var(--sandbox-surface) 94%, var(--sandbox-text) 6%);
  --instrument-key-black: color-mix(in srgb, var(--sandbox-text) 84%, var(--sandbox-surface) 16%);
  --instrument-key-black-text: color-mix(in srgb, var(--sandbox-surface) 86%, var(--sandbox-text) 14%);

  --instrument-pad-fill: color-mix(in srgb, var(--sandbox-ruler-bg) 85%, var(--sandbox-surface) 15%);
}

.obsidian-shell{
  background: color-mix(in srgb, var(--sandbox-surface) 90%, var(--sandbox-canvas-bg) 10%);
  padding: 18px;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--sandbox-text) 22%, transparent);
  max-width: 920px;
}

.telemetry{
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  color: var(--sandbox-accent);
  font-size: 11px;
  letter-spacing: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}

.fretboard-wrap{
  position: relative;
  background: linear-gradient(180deg, var(--instrument-fretboard-surface-2) 0%, var(--instrument-fretboard-surface-1) 100%);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.fretboard-wrap canvas{
  display: block;
  width: 100%;
  height: auto;
}

.controls{
  margin-top: 12px;
  color: var(--sandbox-muted);
  font-size: 11px;
  letter-spacing: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
}