/* Chord generator: a small black box in the CN-8's colours, with the CN-8's
   display (the .cn-display classes come from conductor.css). */

.cg {
  --ink: #eceae6;
  --ink-dim: #8a8f97;
  --line: rgba(236, 234, 230, 0.45);
  --accent: #f2c14e;

  width: max-content;
  padding: 12px 18px 16px;
  border-radius: 12px;
  border: 1px solid #050506;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #23252a 0%, #18191d 50%, #121316 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 22px 30px rgba(0, 0, 0, 0.55),
    0 5px 9px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}

.cg-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.cg-brand { display: flex; align-items: baseline; gap: 10px; }
.cg-logo { font: 700 22px/1 var(--logo-font); letter-spacing: 0.04em; color: #f6f4ef; }
.cg-sub { font: 700 8px var(--font); letter-spacing: 0.32em; color: var(--accent); }
.cg-jacks { display: flex; gap: 14px; }

.cg-main { display: flex; align-items: center; gap: 14px; }
.cg-knobs { display: flex; align-items: center; }
.cg-knobs ws-switch { margin-left: 6px; }

/* The last chord stays on the display, dimmed, once it has stopped. */
.cg.is-silent .cn-chord { opacity: 0.45; }