/* The look: walnut, a 1970s instrument (over site.css's layout). Espresso-dark wood either side,
   a matte black panel, cream legends in capitals, chunky black slider caps with a line in their
   section's colour, little incandescent lamps for what's on, and the numbers in red LED.
   (Without this file, the site's the minimal look.) */
:root {
  --bg: #131211;
  --raise: #1F1D1B;
  --edge: rgba(237, 227, 207, .08);
  --edge-2: rgba(237, 227, 207, .18);
  --ink: #EDE3CF;
  --dim: #B4A991;
  --mute: #7A715F;
  --pit: #0C0B0A;
  --rings: #F0A23A;
  --ob: #E0563A;
  --stages: #C8A8E8;
  --fx: #9CC6A2;
  --chord: #A9C7D8;
  --drums: #E6D3A8;
  --led: #FF4A2E;
  --font: "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
  --plate: "Michroma", ui-sans-serif, sans-serif;
}
html, body { background: #120B07; }
/* the case: espresso wood either side (the grain run long, a little light catching it) */
body {
  box-sizing: border-box; padding: 0 30px;
  background:
    radial-gradient(60px 340px at 30% 30%, rgba(0, 0, 0, .3), transparent 70%),
    radial-gradient(40px 260px at 70% 75%, rgba(255, 214, 170, .07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px, rgba(255, 222, 186, .07) 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 13px),
    linear-gradient(90deg, #160C07, #2E1B10 14%, #23150C 30%, #382215 52%, #22140C 74%, #2C190F 88%, #140A06);
}
.topbar, .navbar, .rig { background: var(--bg); }
.topbar { border-bottom: 1px solid #000; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.navbar { border-bottom: 1px solid #000; background: linear-gradient(#181716, var(--bg)); }

/* the nameplate */
.logo { font-family: var(--plate); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; }
.scope { filter: drop-shadow(0 0 3px rgba(240, 162, 58, .7)); }
.menu-btn, .inbox, .midi { border-radius: 3px; border-color: #000; background: linear-gradient(#2A2826, #1A1918); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; font-family: var(--font); }
.midi.on i { background: var(--rings); box-shadow: 0 0 8px var(--rings); }
.inbox-panel, .menu, .card { background: #181614; border-color: var(--edge-2); border-radius: 4px; }

/* the pages' tabs, the names: engraved capitals */
.pg, .page-head h2, .ob-model button, .kit button, .unit-head h2, .strip-head b, .fx-name b { font-family: var(--plate); font-weight: 400; text-transform: uppercase; }
.pg { font-size: 13px; letter-spacing: .14em; }
.page-head h2, .ob-model button, .kit button, .unit-head h2 { font-size: 16px; letter-spacing: .14em; }
.strip-head b, .fx-name b { font-size: 14px; letter-spacing: .14em; }
.ob-model button, .kit button { margin-right: 18px; }
.what, .out-name { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* the legends: capitals, letterspaced; a lamp beside what's on */
.models button, .poly button, .views button, .pages-8 button, .choruses button, .drive-types button, .uni, .power, .mute, .poly-label, .ob-label, .ctx-label, .pick,
.f-name, .ob-sw button, .card-btns button, .prog-groups button, .prog-progs button, .seg-loop, .seg-link, .seg-type, .ob-sec h3, .card-name, .g-head b {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ob-sec h3, .card-name { color: var(--ink); font-size: 11px; letter-spacing: .2em; }
.ob-sw button, .ob-sw .ob-label { font-size: 10.5px; letter-spacing: .08em; }
.models button i { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2A2724; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 0 0 1px #000; }
.ob-sw button i, .card-btns button i, .prog-groups button i, .prog-progs button i, .seg-loop i, .seg-link i, .lamp, .power i {
  width: 7px; height: 7px; background: #2A2724; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 0 0 1px #000;
}
.models button[aria-checked="true"] i, .ob-sw button.lit i, .card-btns button.lit i, .prog-groups button.lit i, .prog-progs button.lit i, .seg-loop.lit i, .seg-link.lit i,
.power[aria-pressed="true"] i, .pg.on .lamp {
  background: radial-gradient(circle at 40% 35%, #FFF3D6, var(--c, var(--pc)) 55%); box-shadow: 0 0 0 1px #000, 0 0 10px var(--c, var(--pc)), 0 0 3px var(--c, var(--pc));
}
.pg.on .lamp { --c: var(--pc); }
.models button[aria-checked="true"] { box-shadow: none; }
.poly button[aria-checked="true"], .choruses button[aria-checked="true"], .uni[aria-pressed="true"], .ob-model [aria-checked="true"], .kit [aria-checked="true"],
.views button[aria-selected="true"], .pages-8 button[aria-pressed="true"], .pg[aria-selected="true"] {
  color: var(--ink); box-shadow: inset 0 -2px 0 var(--c, var(--pc, var(--voice))), 0 5px 10px -6px var(--c, var(--pc, var(--voice)));
}
.mute[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--led); }
.seg-type { font-size: 12px; }
.patch select, .pick select, .stage-out select {
  font-family: var(--font); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px;
  background: var(--pit); border: 1px solid #000; border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); padding: 0 6px;
}

/* sliders: a slot with a printed scale, a chunky black cap with a line in its section's colour */
.f-track { background:
  repeating-linear-gradient(to top, rgba(237, 227, 207, .4) 0 1px, transparent 1px 10%) 2px 9px / 6px calc(100% - 17px) no-repeat,
  repeating-linear-gradient(to top, rgba(237, 227, 207, .4) 0 1px, transparent 1px 10%) calc(100% - 2px) 9px / 6px calc(100% - 17px) no-repeat; }
.f-track::before { width: 4px; background: #000; border-radius: 2px; box-shadow: inset 0 1px 2px #000, 0 0 0 1px rgba(255, 255, 255, .05); }
.f-fill { display: none; }
.f-tick, .f-tick::after { display: none; }
.f-cap { width: 26px; height: 17px; border-radius: 2px; background: linear-gradient(#3C3936, #1C1A19 55%, #0E0D0C); box-shadow: 0 3px 5px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .14); }
.f-cap::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; translate: 0 -50%; background: var(--c); box-shadow: 0 0 4px var(--c); }
.f-track:hover .f-cap { width: 26px; }
.f-track:focus-visible .f-cap, .fader.held .f-cap { box-shadow: 0 3px 5px rgba(0, 0, 0, .85), 0 0 0 1.5px var(--c); }
.fader.h .f-track { background: repeating-linear-gradient(to right, rgba(237, 227, 207, .4) 0 1px, transparent 1px 10%) 9px 2px / calc(100% - 17px) 5px no-repeat; }
.fader.h .f-track::before { height: 4px; width: auto; }
.fader.h .f-cap { width: 16px; height: 22px; }
.fader.h .f-cap::after { left: 50%; right: auto; top: 3px; bottom: 3px; width: 2px; height: auto; translate: -50% 0; }
.f-name { font-size: 10px; color: var(--dim); }
.ob-col .f-name { font-size: 9.5px; letter-spacing: .05em; }
/* the numbers: red LED */
.f-val, .ctx b { font-family: var(--mono); font-size: 12px; color: var(--led); text-shadow: 0 0 6px rgba(255, 74, 46, .65); }
.f-val { padding: 1px 5px; background: #0A0404; border-radius: 2px; box-shadow: inset 0 1px 2px #000; }
.f-mod { border-color: var(--stages); }
.meter { background: #050505; }
.meter i { background: linear-gradient(to top, var(--c) 0 83%, var(--led) 83%); }

/* the panel's sections: a printed line between */
.ob-sec, .card-strip, .unit, .strip { border-left-color: rgba(237, 227, 207, .12); }
.fx-name, .fx-send { border-top-color: rgba(237, 227, 207, .1); }
.fx-send, .fx-caption { border-left-color: rgba(237, 227, 207, .12); }
.fx-caption { font-family: var(--font); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-top-color: rgba(237, 227, 207, .2); }
.fx-send::before { font-family: var(--font); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.stage-out { border-color: rgba(237, 227, 207, .12); background: #161514; }
.seg { border-top-width: 3px; }

/* the transport and the playbar */
.play { background: radial-gradient(circle at 50% 35%, #34312E, #121110 70%); border: 1px solid #000; box-shadow: 0 2px 4px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); }
.play svg { fill: var(--ink); }
.play[aria-pressed="true"] { background: radial-gradient(circle at 50% 35%, #FFE2B0, var(--rings) 60%); box-shadow: 0 0 16px rgba(240, 162, 58, .5); }
.play[aria-pressed="true"] svg { fill: #1A1208; }
.playbar { border-top: 1px solid #000; background: linear-gradient(#1A1918, var(--bg)); }
.mini { color: var(--dim); }

/* the sequencer: a lamp at each note */
.surface { --bg: #0E0D0C; background: #0E0D0C; border-top: 1px solid #000; box-shadow: inset 0 8px 16px -8px rgba(0, 0, 0, .9); }
.step { border-right-color: rgba(237, 227, 207, .04); }
.step:nth-child(4n) { border-right-color: rgba(237, 227, 207, .12); }
.step.now { background: linear-gradient(rgba(240, 162, 58, 0), rgba(240, 162, 58, .06)); }
.s-bar { width: 2px; background: color-mix(in srgb, var(--voice) 45%, transparent); }
.s-cap { padding-bottom: 32px; }
.s-cap::after { width: 11px; height: 11px; background: radial-gradient(circle at 40% 35%, #FFF3D6, var(--voice) 55%); box-shadow: 0 0 0 3px var(--bg), 0 0 12px color-mix(in srgb, var(--voice) 70%, transparent); }
.step.chord .s-cap::after { background: radial-gradient(circle at 40% 35%, #F4FAFF, var(--chord) 55%); box-shadow: 0 0 0 3px var(--bg), 0 0 12px color-mix(in srgb, var(--chord) 70%, transparent); }
.step.off .s-cap::after { background: #2A2724; box-shadow: 0 0 0 3px var(--bg), inset 0 1px 1px #000; }
.s-gate, .s-rep, .s-fluct { background: #121110; border-top-color: #000; }
.s-gate { font-family: var(--font); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.s-rep, .s-fluct { color: #4A443B; }

/* the drums' pattern: lit pads */
.g-head { background: #121110; border-right-color: #000; }
.g-step::before { border-radius: 2px; box-shadow: inset 0 1px 2px #000, inset 0 0 0 1px rgba(237, 227, 207, .1); background: #1A1816; }
.g-step.on::before { background: radial-gradient(circle at 50% 35%, #FFF6E4, var(--drums) 70%); box-shadow: 0 0 8px color-mix(in srgb, var(--drums) 40%, transparent); }
.g-step.on { color: #2A1E10; font-family: var(--font); font-weight: 700; }
.g-row { border-bottom-color: #000; }

/* chord pads and keys: dark; the black keys in espresso wood */
.pad { background: #0E0D0C; border-color: rgba(237, 227, 207, .08); }
.pad:hover { background: #151311; }
.pad b { font-family: var(--plate); font-size: clamp(14px, 1.6vw, 22px); letter-spacing: .06em; }
.key.w { background: linear-gradient(#1D1B19, #161413 85%, #0E0D0C); border-right-color: #000; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .04); }
.key.w:hover { background: #221F1C; }
.key.w.down { background: #2A2622; }
.key.b { background: linear-gradient(90deg, #160C07, #2E1B10 40%, #23150C 80%, #140A06); border-color: #000; box-shadow: 0 4px 6px rgba(0, 0, 0, .7); border-radius: 0 0 2px 2px; }
.key.b.down { background: linear-gradient(90deg, #23150C, #3E2617 40%, #2C190F); }
.key .lbl { font-family: var(--font); font-weight: 600; letter-spacing: .08em; color: var(--dim); }
.key .lbl small, .key.b .lbl { color: #8C7A64; }
.key.in::before { box-shadow: inset 0 0 0 1px #6B6151; }

.hi button, .big { background: var(--ink); border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font); font-weight: 700; }
.card h2 { font-family: var(--plate); font-size: 20px; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 640px) { body { padding: 0 8px; } .pg { font-size: 11px; letter-spacing: .04em; } .pages { gap: 9px; } }