/* Copyright (C) 2026 Xfer Records. All rights reserved. */
/* SHRUB's editor: Serum 1's layout in the device's own look (Serum 2's greys, the section colours, Barlow) */

@font-face { font-family: Barlow; src: url(fonts/BarlowSemiCondensed-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: Barlow; src: url(fonts/BarlowSemiCondensed-Bold.ttf); font-weight: 700; }

:root {
  color-scheme: dark;
  --bg: #111316;
  --panel-top: #252b31;
  --panel-bot: #191c20;
  --edge: #0a0b0d;
  --label: #a9b4bf;
  --value: #e4eaef;
  --dim: #3b424a;
  /* the modules' tiers (Serum 2's slate): header band, screen, controls deck, and the seams between */
  --band-top: #46525e;
  --band-bot: #37414b;
  --screen: #13181d;
  --deck-top: #343d47;
  --deck-bot: #2a323a;
  --seam: #0a0d10;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at top, #1d2125, var(--bg) 70%);
  color: var(--value);
  font: 600 13px/1.3 Barlow, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;   /* WebKit (the plug-in's web view, Safari) takes only this */
}
/* an instrument, not a page: nothing selects or drags as text or images do, but what's typed and the notes */
* { -webkit-user-drag: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable], #notes { user-select: text; -webkit-user-select: text; }
button {
  font: inherit;
  color: var(--value);
  background: linear-gradient(#3a424a, #2a3037);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover { border-color: #5a646e; }

/* ---- the header */
#top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 14px;
  background: linear-gradient(#2b3036, #1d2126);
  border-bottom: 1px solid var(--edge);
}
.brand { display: flex; align-items: center; flex: none; }
.logo { display: block; height: 44px; width: auto; }
#tabs { display: flex; gap: 2px; }
#tabs button {
  position: relative;
  background: #1b1f23;
  border-radius: 4px;
  padding: 10px 20px 16px;
  color: var(--label);
  font: 700 15px Barlow;
  letter-spacing: 0.5px;
}
#tabs button.on { background: var(--panel-top); color: #fcde67; }
#tabs button.on::after {   /* the selected one's dot, glowing */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #9bee5e;
  box-shadow: 0 0 4px 1px #9bee5e, 0 0 10px 2px rgba(155, 238, 94, 0.55);
}
.browser { display: flex; gap: 4px; flex: none; }
#prev, #next { padding: 4px 8px; font-size: 11px; }
#preset {
  flex: none;
  width: 300px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: #0d0f11;
  font-size: 15px;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}
#preset-cat { color: var(--label); font-size: 12px; align-self: center; white-space: nowrap; flex: none; }
#preset-name { color: #33c4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* Serum 2's _PresetNameColor */
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; min-width: 0; }
.primary { background: linear-gradient(#5d9b3c, #3f7428); }
.toggle.on, button.on { color: #111; background: var(--accent, #9bee5e); }
/* the File menu: the file actions under one button, dropped over the page */
.file-menu { position: relative; }
.file-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; display: flex; flex-direction: column;
  min-width: 290px; padding: 4px; background: #15181b; border: 1px solid var(--edge); border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
.file-list[hidden] { display: none; }
.file-list button { text-align: left; background: none; border-color: transparent; padding: 6px 10px; white-space: nowrap; }
.file-list button:hover, .file-list button:focus-visible { background: #2a3036; }
.file-list button:disabled { opacity: 0.4; cursor: default; background: none; }
.file-key { float: right; margin-left: 24px; color: var(--label); font-size: 11px; }
.file-list hr { border: none; border-top: 1px solid var(--edge); margin: 4px 2px; }
.bank-menu > .file-list { left: 0; right: auto; min-width: 170px; }
/* a submenu: its button names it, its list opens beside it while the pointer or the focus is in it */
.file-sub { position: relative; display: flex; flex-direction: column; }
.file-sub-button { display: flex; justify-content: space-between; gap: 18px; }
.file-sub-button::after { content: '\25B8'; opacity: 0.7; }
.file-sub > .file-list { display: none; left: calc(100% + 4px); right: auto; top: -5px; min-width: 190px; }
.file-sub > .file-list::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }
.file-sub:hover > .file-list, .file-sub:focus-within > .file-list, .file-sub.open > .file-list { display: flex; }
.file-sub:hover > .file-sub-button, .file-sub:focus-within > .file-sub-button, .file-sub.open > .file-sub-button { background: #2a3036; }
@media (max-width: 700px) { .file-list { max-width: calc(100vw - 16px); min-width: 0; } .file-list button { white-space: normal; } }
.needs-device { opacity: 0.45; }
body.online .needs-device { opacity: 1; }
body.plugin #connect, body.plugin #sound, body.plugin .needs-device { display: none; }   /* the plug-in plays */
body:not(.plugin) .plugin-only { display: none; }
body.plugin .browser-only { display: none; }   /* the plug-in's web view has no Web MIDI */

/* ---- the pages */
#main { flex: 1; overflow: auto; padding: 10px 14px; }
.page { display: flex; flex-direction: column; gap: 10px; }
.page[hidden] { display: none; }
.row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.page > .row { align-items: stretch; flex-wrap: nowrap; }

.panel {
  background: linear-gradient(var(--panel-top), var(--panel-bot));
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 8px 10px 10px;
  box-shadow: inset 0 1px 0 #3c434b;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.panel-title { font: 700 15px Barlow; color: var(--accent); letter-spacing: 0.5px; }
.panel-title .row { align-items: center; }

/* the top half's modules, after Serum 2: a slate header band, a dark tier for the screen, a lighter one for the
   controls; side by side with a dark seam between */
.page > .row.modules { gap: 3px; }
.panel.module { padding: 0; gap: 0; border-radius: 3px; border-color: #07090b; background: var(--deck-bot); box-shadow: none; overflow: hidden; }
.panel.module > .panel-title {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 10px;
  background: linear-gradient(var(--band-top), var(--band-bot));
  border-bottom: 1px solid var(--seam);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.panel.module > .panel-title > .row { flex: 1; }
.panel.module > .panel-title.band { border-top: 1px solid var(--seam); }
.panel.module > .panel-title .select-button { background: rgba(8, 11, 14, 0.55); border-color: rgba(0, 0, 0, 0.55); }
.tier { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; min-width: 0; }
.tier.screen { background: var(--screen); border-bottom: 1px solid var(--seam); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.tier.controls { flex: 1; padding-bottom: 10px; background: linear-gradient(var(--deck-top), var(--deck-bot)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.tier.screen .picture { border-color: #262e36; }
/* a display's backing, as Serum 2's: a dark slate with a little teal, lit a touch from above, darker at its edges */
.tier.screen .picture {
  background: linear-gradient(180deg, #2a353b 0%, #1f292e 48%, #192125 100%);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* the effects: the picture's screen at the left, the knobs on the deck */
.fx-body .tier.screen { justify-content: center; border-bottom: none; border-right: 1px solid var(--seam); }
.fx-body .tier.controls { flex-direction: row; gap: 0; }
.panel.osc { width: 356px; }
.picture { background: linear-gradient(#1d2125, #111316); border: 1px solid var(--edge); border-radius: 4px; display: block; }
.hint { color: var(--label); font-size: 12px; max-width: 190px; align-self: center; }

/* ---- controls */
.knob { position: relative; width: 58px; display: flex; flex-direction: column; align-items: center; }
.knob canvas { touch-action: none; }
.knob-label { font: 700 11px Barlow; color: var(--label); white-space: nowrap; margin-top: 1px; }
.knob-value { font-size: 11px; color: #7d878f; white-space: nowrap; transition: color 0.08s; }   /* dimmed but under the pointer */
.knob:hover .knob-value { color: var(--value); }
.knob.active .knob-value { color: #fcde67; }

.number { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.number-label { font: 700 11px Barlow; color: var(--label); }
.number-box {
  min-width: 46px;
  padding: 3px 8px;
  background: #0d0f11;
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  color: var(--value);
  font: 700 14px Barlow;
  text-align: center;
  touch-action: none;
}
.number-box:hover, .number-box.active { border-color: #4a535c; }
.number-box { position: relative; overflow: hidden; }
/* Serum's line along the top: the value from the left, the matrix's reach in blue (the picked source's brighter) */
.number-line, .number-reach { position: absolute; top: 0; left: 0; height: 1px; pointer-events: none; }
.number-line { background: #5d6770; }
.number-reach { background: #1e8fc4; }
.number-reach.mine { background: #7fdcff; }
.number.inline { flex-direction: row; gap: 6px; }
.number.inline .number-box { padding: 2px 6px; }
.pitch { flex-wrap: nowrap; justify-content: space-between; padding-right: 2px; }

/* the oscillator's main row: WT POS set off, WARP's menu with AMOUNT pressed into its edge, LEVEL */
.osc-main { flex-wrap: nowrap; align-items: flex-start; gap: 6px; }
.osc-main > .knob:first-child { padding-right: 10px; margin-right: 6px; border-right: 1px solid rgba(0, 0, 0, 0.4); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06); width: 68px; }
.warp-group { display: flex; align-items: flex-start; }
.warp-group .select { min-width: 0; margin-top: -6px; }   /* the menu level with AMOUNT's middle */
.warp-group .select-button { width: 92px; border-radius: 4px 0 0 4px; border-right: none; }
.warp-group .knob { margin-left: -10px; }
/* unison: one inset screen; the voices first, the rest under them in a grid, DETUNE and RANGE joined */
.uni-screen {
  display: flex;
  align-items: stretch;
  background: #0d0f11;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #3c434b;
  padding: 5px 4px 6px;
}
.uni-screen .number-box {
  background: none;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--accent);
  min-width: 0;
  padding: 0 4px;
  font-size: 15px;
}
.uni-screen .number-box:hover, .uni-screen .number-box.active { border-color: #2c333a; background: #15191c; }
.uni-count { padding: 0 10px 0 6px; margin-right: 4px; border-right: 1px solid #262c32; }
.uni-count .number-box { font-size: 20px; color: #fcde67; min-width: 30px; }
.uni-sub { flex: 1; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 6px; transition: opacity 0.15s; }
.uni-sub.idle { opacity: 0.38; }
.uni-pair {
  display: flex;
  border: 1px solid #262c32;
  border-radius: 3px;
  padding: 0 2px;
}
.uni-pair .number { flex: 1; }
.uni-pair .uni-range { flex: 0.8; border-left: 1px dotted #3b424a; }
.uni-pair .uni-range .number-box { font-size: 13px; color: var(--label); }
.filter-head { flex-wrap: nowrap; align-items: center; gap: 6px; }
.filter-head .toggle { margin-left: auto; font-size: 11px; padding: 2px 7px; white-space: nowrap; }
.filter-head .select { min-width: 0; flex: 0 1 auto; }
.filter-head .select-button { width: 116px; max-width: 100%; padding: 2px 6px; font-size: 13px; }
.filter-screen { position: relative; }
.filter-screen .picture { max-width: 100%; }
.filter-screen .select { position: absolute; top: 4px; left: 4px; z-index: 2; }
.filter-screen .select-button {
  max-width: none;
  overflow: visible;
  padding: 1px 6px;
  background: rgba(13, 15, 17, 0.88);
  border-color: #262c32;
}
.filter-knobs { display: grid; grid-template-columns: repeat(auto-fill, 58px); gap: 6px 8px; justify-content: space-between; }
.row.one-line { flex-wrap: nowrap; gap: 2px; }
.lfo-top { align-items: center; }

.select { display: flex; flex-direction: column; gap: 2px; min-width: 84px; }
.select.bare { min-width: 0; }
.select-label { font: 700 11px Barlow; color: var(--label); }
.select-button {
  background: #0d0f11;
  border-color: #000;
  color: var(--accent);
  text-align: left;
  padding: 3px 8px;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-button::after { content: ' \25BE'; color: var(--label); }
/* < and > at a menu's right */
.select.arrowed { flex-direction: row; align-items: center; gap: 2px; }
.select.arrowed .select-button { display: flex; justify-content: space-between; gap: 6px; }
.select-arrow { padding: 2px 6px; font-size: 12px; line-height: 14px; color: var(--label); }
.select-arrow:hover { color: var(--accent); }
.select-arrows { display: flex; gap: 2px; }
.select-arrows .select-arrow { flex: 1; padding: 0 6px; font-size: 9px; line-height: 13px; }
.panel.osc .panel-title .select-button { width: 168px; }
.toggle { align-self: center; --accent: #9bee5e; }

.menu {
  position: fixed;
  z-index: 10;
  max-height: 60vh;
  overflow: auto;
  background: #15181b;
  border: 1px solid #3c434b;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  padding: 3px 0;
  min-width: 140px;
}
.menu-item { padding: 3px 12px; white-space: pre; cursor: pointer; }
.menu-item:hover { background: #2a3037; }
.menu-item.current { color: #9bee5e; }

/* ---- pieces */
.additive { display: none; flex-direction: column; gap: 6px; border-top: 1px solid #3c434b; padding-top: 8px; }
.additive.shown { display: flex; }
.targets { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.target { display: flex; align-items: center; gap: 6px; }
.slot { color: var(--label); width: 14px; text-align: right; }
.add { align-self: flex-start; font-size: 12px; padding: 2px 8px; }
.matrix { display: grid; grid-template-columns: 24px 160px 160px 70px; gap: 6px 12px; align-items: center; }
.mh { font: 700 11px Barlow; color: var(--label); }
/* the rack is as wide as its widest effect, so every MIX lines up past the longest row of knobs */
.fx-rack { display: inline-flex; flex-direction: column; gap: 3px; align-self: flex-start; }
.fx-body { display: flex; gap: 0; align-items: stretch; }
.fx-controls { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 22px; }
.fx-mix {
  display: flex;
  align-items: center;
  padding-left: 18px;
  border-left: 1px solid #3c434b;
  box-shadow: inset 1px 0 0 #0a0b0d;
}
.dice { position: relative; }
.dice-title { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font: 700 20px Barlow; text-shadow: 0 1px 3px #000; }

/* ---- the keyboard and the status line */
footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  background: linear-gradient(#1d2126, #15181b);
  border-top: 1px solid var(--edge);
}
#keys { position: relative; height: 72px; flex: none; }
.key { position: absolute; top: 0; border: 1px solid #000; border-radius: 0 0 3px 3px; cursor: pointer; touch-action: none; }
.key.white { width: 28px; height: 72px; background: linear-gradient(#dfe4e8, #fff); z-index: 1; }
.key.black { width: 18px; height: 44px; background: linear-gradient(#2a2f34, #0b0c0d); z-index: 2; }
.key.down.white { background: #9bee5e; }
.key.down.black { background: #5d9b3c; }
#status { color: var(--label); flex: 1; }
.brand { position: relative; }
#build { position: absolute; left: 3px; bottom: -3px; color: #5d6670; font-size: 9px; letter-spacing: 0.04em;
  white-space: nowrap; line-height: 1; pointer-events: none; }
#status.bad { color: #ff6b5e; }
.boot-error { max-width: 760px; margin: 12px 0; padding: 12px 14px; border: 1px solid #6b2a24; border-radius: 4px;
  background: #241513; color: #ffb3aa; font-size: 12px; line-height: 1.5; user-select: text; }
.page > .boot-error { grid-column: 1 / -1; }
.boot-error-title { color: #ff6b5e; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.boot-error ul { margin: 4px 0; padding-left: 18px; }
.boot-error-who { color: #8a949e; font-size: 11px; margin: 6px 0; word-break: break-all; }
.boot-error a { color: #4fb3ff; }
.menu-item.dim { color: #5d6670; font-style: italic; }
.menu-item.off { color: #5d6670; cursor: default; }
.menu-item.off:hover { background: none; }
.midi-learn { outline: 2px solid #4ddbff; outline-offset: 2px; border-radius: 4px; animation: midi-learn 1s ease-in-out infinite alternate; }
@keyframes midi-learn { from { outline-color: #4ddbff; } to { outline-color: rgba(77, 219, 255, 0.25); } }
.menu-item.group { border-top: 1px solid #2a3037; margin-top: 2px; padding-top: 4px; }
.menu-head { padding: 6px 12px 2px; color: var(--label); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; border-top: 1px solid #2a3037; cursor: default; }
.menu-head:first-child { border-top: 0; }
#panic { display: flex; align-items: center; justify-content: center; }
#panic:hover { color: #ffb347; }
/* the FX tab: Serum 1's rack bar, then the modules in the rack's order */
.page > .row.fx-page { align-items: flex-start; }

.fx-rack-preset-bar {
  display: flex; align-items: stretch; gap: 4px; margin-bottom: 8px;
}
.fx-rack-preset-bar .fx-rack-pick {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  padding: 4px 8px; background: linear-gradient(var(--panel-top), var(--panel-bot));
  border: 1px solid #131619; border-radius: 4px; color: var(--value); font: inherit; cursor: pointer;
}
.fx-rack-preset-bar .fx-rack-pick:hover { background: #2e3640; }
.fx-rack-preset-bar .fx-rack-nav {
  flex: none; width: 28px; padding: 0; font-size: 11px;
}
.fx-rack-preset-bar .fx-rack-pick-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
}
.fx-rack-menu { min-width: 240px; max-height: 70vh; overflow-y: auto; padding: 4px 0; background: #161a1f; }
.fx-rack-tile {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; cursor: pointer; color: var(--value);
}
.fx-rack-tile:hover { background: #252b33; }
.fx-rack-tile.current { background: #2c3540; }
.fx-rack-tile-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-rack-dots { display: flex; align-items: center; flex: none; min-width: 28px; height: 14px; }
.fx-rack-dot {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #0a0b0d; flex: none;
}
.rack-bar { width: 250px; flex: none; }
.rack-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-left: 3px solid var(--accent); border-radius: 3px; background: #1a1e22; }
.rack-row.empty { border-left-color: #2a3037; }
.rack-row .select { flex: 1; }
.rack-row .select-button { width: 100%; color: var(--accent); }
.rack-row.empty .select-button { color: #5d6670; }
.rack-power { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: #0d0f11; }
.rack-power.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.rack-move { padding: 0 5px; font-size: 10px; line-height: 18px; }
.rack-power:disabled, .rack-move:disabled { opacity: 0.3; cursor: default; }
/* the effects' pictures: a small screen at each module's left */
.fx-screen { align-self: center; flex: none; }
/* the LFO's mode: its three names stacked, the picked one lit */
.stack { display: flex; flex-direction: column; gap: 1px; align-self: center; }
.stack-item { background: none; border: none; padding: 0 4px; font: 700 11px Barlow; letter-spacing: 0.5px; color: #7d8894; text-align: left; line-height: 14px; }
.stack-item:hover { color: #b4bdc6; }
.stack-item.on { color: var(--accent); background: none; text-shadow: 0 0 6px var(--accent); }
/* the envelope's curves under their stages, a size smaller */
.knob-gap { width: 58px; flex: none; }
.knob.small .knob-dial { width: 34px !important; height: 34px !important; }
.knob.small .knob-label, .knob.small .knob-value { font-size: 10px; }
/* a curve control (the envelopes' A / D / R): a square screen of the segment it bends, not a dial */
.knob.curve .knob-dial { width: 36px !important; height: 36px !important; border-radius: 4px; }
.knob.curve > .mini-arc { left: 7px; top: -4px; }
.macro .knob-label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.row.curves { margin-top: -4px; }
.env-body .row.one-line { gap: 7px; }
/* the LFO's targets: Serum's matrix depth slider, in a short scroll of rows */
.lfo-targets-scroll {
  --matrix-row-h: 26px;
  --lfo-target-row: 2.4;
  --lfo-target-chrome: #1c2126;   /* darker than the panel, lighter than the destination menu */
  width: 100%;
  max-height: calc(var(--matrix-row-h) * var(--lfo-target-row) * 2.2);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--lfo-target-chrome);
  border: 1px solid #0a0b0d;
  border-radius: 4px;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.45);
  scrollbar-color: #4a545e #15191d;
  scrollbar-width: thin;
}
.lfo-targets-list { display: flex; flex-direction: column; }
.lfo-targets-scroll .target {
  min-height: calc(var(--matrix-row-h) * var(--lfo-target-row));
  padding: 0 8px 0 4px;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.lfo-targets-scroll .target:last-child { border-bottom: none; }
.lfo-targets-scroll .slot { color: #8b959f; width: 12px; flex: none; font-size: 11px; }
.lfo-targets-scroll .target .toggle {
  flex: none;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  background: linear-gradient(#323a42, #272d34);
  border-color: #0a0b0d;
  color: #a9b4bf;
}
.target-dest { flex: 0 1 34%; min-width: 64px; max-width: 118px; }
.target-dest .select-button {
  width: 100%;
  max-width: 100%;
  font-size: 11px;
  padding: 2px 5px;
  background: #0d0f11;
  border-color: #000;
  color: var(--accent);
}
.mod-depth { flex: 1 1 108px; min-width: 108px; max-width: none; }
.mod-depth-track {
  position: relative; height: 16px; cursor: ew-resize;
  background: linear-gradient(#323a42, #272d34);
  border: 1px solid #0a0b0d; border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.mod-depth-zero {
  position: absolute; left: 50%; top: 50%; width: 2px; height: 2px;
  background: #8b959f; transform: translate(-50%, -50%); pointer-events: none;
}
.mod-depth-fill {
  position: absolute; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(#f0a040, #d86818);
  box-shadow: 0 0 4px rgba(232, 120, 32, 0.55);
  pointer-events: none;
}
.mod-depth-thumb {
  position: absolute; top: 2px; width: 11px; height: 11px;
  transform: translateX(-50%); border-radius: 2px; pointer-events: none;
  background: rgba(168, 180, 192, 0.28);
  border: 1px solid rgba(198, 210, 222, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.mod-depth.active .mod-depth-thumb { background: rgba(198, 210, 222, 0.4); border-color: rgba(220, 230, 240, 0.65); }
/* modulation sources: drag one onto a knob */
.panel-head { flex-wrap: nowrap; align-items: center; }
.panel-head .mod-source { margin-left: auto; }
.mod-source { display: inline-flex; align-items: center; gap: 4px; font: 700 10px Barlow; letter-spacing: 0.5px; padding: 1px 3px 1px 7px; border-radius: 10px; color: var(--accent); background: #0d0f11; border: 1px solid #2f5f7c; cursor: grab; touch-action: none; }
.mod-source::before { content: '\2725'; }
.mod-source:hover { border-color: var(--accent); }
/* the picked source: its rings are the blue ones */
.mod-source.on { color: #fff; border-color: var(--accent); background: #0b3b5c; box-shadow: 0 0 8px rgba(50, 195, 255, 0.55); }
.mod-source.on::before { color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.mod-count { flex: none; }
.mod-sources { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #3c434b; padding-top: 8px; }
.source-group { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.source-group .mod-source { justify-content: flex-start; }
.source-group .mod-count { margin-left: auto; }
.source-group-name { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 700 10px Barlow; letter-spacing: 1px; color: var(--label); }
.source-group-name::after { content: ''; flex: 1; border-top: 1px solid #3c434b; }
.mod-ghost { position: fixed; z-index: 20; pointer-events: none; font: 700 11px Barlow; padding: 3px 8px; border-radius: 10px; color: #111; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
body.mod-dragging, body.mod-dragging * { cursor: grabbing !important; }
.knob.mod-target .knob-dial { border-radius: 50%; box-shadow: 0 0 0 2px rgba(50, 195, 255, 0.35), 0 0 10px rgba(50, 195, 255, 0.35); }
.knob.mod-over .knob-dial { box-shadow: 0 0 0 2px #32c3ff, 0 0 16px #32c3ff; }
.number.mod-target .number-box { box-shadow: 0 0 0 2px rgba(50, 195, 255, 0.35), 0 0 10px rgba(50, 195, 255, 0.35); }
.number.mod-over .number-box { box-shadow: 0 0 0 2px #32c3ff, 0 0 16px #32c3ff; }
.matrix { grid-template-columns: 22px 150px 170px 160px 34px 30px 150px 40px 30px; gap: 4px 10px; grid-auto-rows: 30px; }
.matrix > .mh { align-self: end; padding-bottom: 2px; white-space: nowrap; }
.matrix > .mh:nth-child(9) { justify-self: end; }
.matrix .knob.curve.idle { opacity: 0.38; }
.matrix .select-button { width: 100%; font-size: 12px; padding: 3px 7px; }
.matrix .toggle { padding: 1px 6px; font-size: 11px; line-height: 16px; }
.matrix .mod-depth { display: flex; align-items: center; gap: 6px; min-width: 0; }
.matrix .mod-depth-track { flex: 1; }
.mod-depth-value { flex: none; width: 38px; font-size: 11px; color: #7d878f; text-align: right; }
.matrix .mod-depth.active .mod-depth-value { color: #fcde67; }
/* a slot's curves: the envelope's curve box, small, its value shown while it's dragged */
.matrix .knob.curve { width: 30px; }
.matrix .knob.curve .knob-dial { width: 26px !important; height: 26px !important; }
.matrix .knob.curve .knob-label, .matrix .knob.curve .knob-value { display: none; }
.matrix .knob.curve.active .knob-value {
  display: block; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); z-index: 2;
  padding: 1px 5px; border-radius: 3px; background: #0d0f11;
}
/* the LFOs, tabbed as Serum's: the tabs a strip along the top, the shown one a folder tab open onto its LFO */
.panel.lfo, .panel.chaos { padding-top: 0; }
.lfo-tabs { display: flex; gap: 2px; margin: 0 -10px; padding: 6px 6px 0; background: #1b1f23; border-bottom: 1px solid var(--edge); border-radius: 6px 6px 0 0; }
.mod-source.tab { white-space: nowrap; display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 5px; row-gap: 3px; font-size: 12px; padding: 4px 5px 4px 6px; border-radius: 4px 4px 0 0; border: 1px solid transparent; border-bottom: none; background: #23282d; color: #6f7c88; box-shadow: none; margin-bottom: -1px; }
/* the tabs share the strip whatever the font's width (a web view's runs wider): a name gives way before the panel's edge */
.lfo-tabs > .mod-source.tab { flex: 1 1 0; min-width: 0; }
.mod-source.tab .mod-name { overflow: hidden; text-overflow: ellipsis; }
/* the LFO's shape under its tab's name: the same button */
.mod-source.tab .lfo-mini { grid-column: 1 / -1; width: 0 !important; min-width: 100%; height: 16px !important; border-color: #2a3037; border-radius: 2px; opacity: 0.55; }
.mod-source.tab:hover .lfo-mini { opacity: 0.8; }
.mod-source.tab.unused .lfo-mini { filter: brightness(0); opacity: 1; }   /* the source reaches nothing */
.mod-source.tab.open .lfo-mini { opacity: 1; border-color: var(--edge); }
.mod-source.tab:hover { color: var(--label); }
.mod-source.tab.open { background: var(--panel-top); border-color: var(--edge); color: var(--label); padding-bottom: 5px; }
.mod-source.tab.on { color: var(--accent); }
.mod-source.tab.on .mod-name { text-shadow: 0 0 6px rgba(50, 195, 255, 0.6); }
.lfo-body { display: flex; flex-direction: column; gap: 4px; }
.lfo-body[hidden] { display: none; }
.lfo-body .picture { max-width: 100%; height: auto !important; }
.lfo-body .lfo-top { gap: 4px; margin-top: -2px; flex-wrap: nowrap; }
.lfo-top .lfo-bpm { margin: 0 2px; padding: 2px 5px; }
.lfo-top .knob.lfo-tight { margin: 0 -4px; }
.lfo-top .knob.lfo-tight .knob-label,
.lfo-top .knob.lfo-tight .knob-value { font-size: 10px; }
.lfo-top .lfo-expand-btn {
  flex: none; margin-left: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 22px; padding: 0;
  border: 1px solid rgba(150, 162, 175, 0.28); border-radius: 3px;
  background: rgba(18, 21, 24, 0.82); color: rgba(170, 182, 194, 0.55);
  cursor: pointer;
}
.lfo-top .lfo-expand-btn svg { width: 11px; height: 11px; }
.lfo-top .lfo-expand-btn:hover { color: rgba(210, 222, 234, 0.85); border-color: rgba(170, 182, 194, 0.45); }
.lfo-expand-overlay {
  position: fixed; z-index: 26; box-sizing: border-box;
  background: rgba(12, 14, 16, 0.97);
  border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65);
  padding: 4px 6px 6px;
}
.lfo-expand-close {
  position: absolute; top: 4px; right: 6px; z-index: 1;
  width: 22px; height: 20px; padding: 0; line-height: 18px;
  font-size: 16px; color: #8b959f; background: transparent; border: none; cursor: pointer;
}
.lfo-expand-close:hover { color: #fff; }
.lfo-expand-pane { position: absolute; inset: 6px 6px 6px 6px; top: 26px; display: flex; }
.lfo-expand-canvas-host { flex: 1; min-height: 0; min-width: 0; }
.lfo-expand-canvas-host .picture { display: block; width: 100% !important; height: 100% !important; max-width: none; }
/* the chaos panel: its four sources as tabs across the top (none is open: both attractors show), each pair over its
   attractor, and each attractor over its rate */
.chaos-tabs > .mod-source.tab { background: var(--panel-top); border-color: var(--edge); color: var(--label); padding-bottom: 5px; }
.chaos-tabs > .mod-source.tab .lfo-mini { opacity: 0.85; }
.chaos-tabs > .mod-source.tab:nth-child(3) { margin-left: 10px; }
.chaos-box { display: flex; flex-direction: column; gap: 4px; }
.panel.chaos { flex: none; }
.panel.chaos > .row { flex-wrap: nowrap; gap: 12px; }
.chaos-box .row { flex-wrap: nowrap; gap: 6px; }
.chaos-box .row { align-items: center; }
.panel.matrix-panel { flex: none; }
/* the footer's sources: the note's and MIDI's chips */
#sources { display: flex; align-items: center; gap: 14px; flex: none; }
.footer-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.footer-chips .mod-source { justify-content: flex-start; }
.footer-chips .mod-count { margin-left: auto; }   /* the counts down one edge, whatever the name's length */
/* the macros, Serum 1's: a column of knobs, each with its name under it (its value while it turns) and its drag
   tile at its right; across, under the FX rack */
.panel.macro-panel { flex: none; padding: 8px 4px; justify-content: center; }
.macros { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 2px; }
.macros.across { flex-direction: row; }
.macro { display: flex; align-items: stretch; gap: 1px; }
.macro .knob { width: 52px; }
.macro .knob-value { display: none; }
.macro .knob.active .knob-label { display: none; }
.macro .knob.active .knob-value { display: block; }
.mod-source.tile { flex-direction: column; justify-content: center; gap: 2px; width: 32px; padding: 0; border-radius: 4px; font-size: 11px; }
.mod-source.tile .mod-name { display: none; }
.mod-source.tile .mod-count { width: 14px !important; height: 14px !important; }
.fx-left { display: flex; flex-direction: column; gap: 10px; flex: none; width: 280px; }
.fx-left .rack-bar { width: auto; }
.macros.across { justify-content: space-between; }
.macros.across .knob { width: 41px; }
.macros.across .mod-source.tile { width: 26px; }
/* the filter's routing switches, along the screen's foot */
.filter-route { gap: 4px; flex-wrap: nowrap; margin-top: 6px; }
.filter-route .toggle { min-width: 26px; padding: 1px 6px; font-size: 11px; }
/* a parameter's steps as pictures (the sub's shapes): a row of buttons, the picked one lit */
.pictures { display: flex; gap: 2px; }
.picture-item { padding: 3px; line-height: 0; background: #0d0f11; border: 1px solid #2a3037; border-radius: 3px; }
.picture-item:hover { border-color: #5d6670; }
.picture-item.on { background: #0d0f11; border-color: var(--accent); box-shadow: 0 0 4px var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); }
/* a Serum 1 import's notes */
.import-notes { max-width: 560px; background: var(--panel-top); color: var(--label); border: 1px solid var(--edge); border-radius: 6px; padding: 14px 18px; }
.import-notes::backdrop { background: rgba(0, 0, 0, 0.55); }
.import-notes h3 { margin: 0 0 6px; font: 700 15px Barlow; color: #fff; }
.import-notes p { margin: 0 0 8px; }
.import-notes ul { margin: 0 0 12px; padding-left: 18px; max-height: 50vh; overflow: auto; font-size: 12px; line-height: 1.5; }
/* the user wavetables' dialog */
.tables-dialog { width: 560px; background: var(--panel-top); color: var(--label); border: 1px solid var(--edge); border-radius: 6px; padding: 14px 18px; }
.tables-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.tables-dialog h3 { margin: 0 0 4px; font: 700 15px Barlow; color: #fff; }
.tables-dialog p { margin: 0 0 10px; font-size: 12px; }
.banks { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.bank { border: 1px solid var(--edge); border-radius: 4px; padding: 6px 8px; background: #16191c; }
.bank-head { display: flex; gap: 10px; align-items: baseline; font-size: 11px; }
.bank-name { font: 700 12px Barlow; color: #fff; }
.bank-room { color: #7d8894; }
.bank-ok { margin-left: auto; color: #8fd96b; }
.bank-diff { margin-left: auto; color: #fcde67; }
.bank-tables { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.bank-table { display: flex; gap: 10px; align-items: center; font: 700 12px Barlow; color: var(--value); }
.bank-table .frames { color: #7d8894; font-weight: 400; margin-left: auto; }
.bank-table button { padding: 0 6px; font-size: 10px; }
.bank-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* a Serum 1 import's notes: a pane at the side, folded by its title */
#notes { position: fixed; right: 14px; top: 58px; width: 360px; max-height: 46vh; z-index: 20; display: flex; flex-direction: column; background: rgba(22, 25, 29, 0.96); border: 1px solid var(--edge); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
#notes[hidden] { display: none; }
.notes-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; cursor: pointer; border-bottom: 1px solid var(--edge); }
.notes-title { font: 700 13px Barlow; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-count { margin-left: auto; font-size: 11px; color: #fcde67; white-space: nowrap; }
.notes-close { padding: 0 6px; font-size: 11px; }
.notes-sub { padding: 6px 12px 0; font-size: 11px; color: #7d8894; }
#notes ul { margin: 0; padding: 6px 12px 10px 26px; overflow: auto; font-size: 12px; line-height: 1.45; color: var(--label); }
#notes.folded .notes-sub, #notes.folded ul { display: none; }
#notes.folded .notes-head { border-bottom: none; }

/* ---- the OSC page on one grid: SUB · OSC A · OSC B · FILTER · MASTER, and under them the macros with the
   envelopes, the LFOs, CHAOS, each lined up with the modules over it */
.page-osc { display: grid; grid-template-columns: 150px 356px 356px minmax(300px, 1fr) 226px; gap: 10px 6px; align-items: stretch; }
.page-osc > .osc-mods { grid-column: 1 / 3; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
.page-osc > .panel.lfo { grid-column: 3; }
.page-osc > .panel.chaos { grid-column: 4 / 6; }
.osc-mods > .panel.env { flex: 1; }
.page-osc .panel.module { border-radius: 4px; }
/* SUB and NOISE, narrow: the sub's shapes two rows of three, its octave and level under them */
.panel.sub .pictures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.panel.sub .picture-item { display: flex; justify-content: center; padding: 4px 0; }
.panel.sub .tier.controls { justify-content: center; gap: 10px; }
.sub-row { flex-wrap: nowrap; justify-content: space-around; align-items: center; }
.panel.sub .stack { gap: 2px; }
.panel.sub .stack-item { font-size: 13px; line-height: 17px; letter-spacing: 0.6px; }
/* MASTER: the volume and its meter; VOICING under it */
.panel.master .tier.controls { justify-content: center; }
.master-row { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 14px; }
.master-row .knob { transform: scale(1.25); margin: 8px 6px; }
.meter { border-radius: 2px; }
.voicing { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.voicing .row { flex-wrap: nowrap; justify-content: center; align-items: center; }
/* the bottom row: the pictures fill their panels; CHAOS spreads its two attractors */
.page-osc .panel.chaos { flex: 1; }
.page-osc .panel.chaos > .row { justify-content: space-between; }

/* ---- the FX page: the rack and the macros at the left, as tall as the five modules beside them (an empty slot
   keeps its place), each module one row of knobs with what else it has in its header */
.page > .row.fx-page { align-items: stretch; flex-wrap: nowrap; }
.fx-left { width: 300px; }
.fx-left .rack-bar { flex: 1; }
.fx-rack { flex: 1; display: flex; flex-direction: column; gap: 6px; align-self: stretch; min-width: 0; }
.fx-rack > .panel.module { flex: 1 1 0; min-height: 150px; }   /* the grouped decks (the delay's, the distortion's) are the tallest */
.fx-rack .fx-body { flex: 1; }
.fx-rack .fx-body .tier.screen { flex: none; width: 240px; }
.fx-controls { justify-content: center; padding-right: 12px; }
.fx-controls > .row { flex-wrap: nowrap; justify-content: space-evenly; }
.fx-mix { width: 100px; justify-content: center; padding-left: 0; }
.fx-head-more { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fx-head-more .toggle { padding: 2px 8px; font-size: 11px; }
.fx-head-select { display: flex; align-items: center; gap: 6px; }
.fx-head-select .select-label { color: rgba(228, 234, 239, 0.7); }
.fx-head-more .number.inline .number-label { color: rgba(228, 234, 239, 0.7); }
/* controls that belong together, on an inset screen with their name over it: the delay's TIME (its two knobs
   either side of BPM and LINK) and FILTER, the distortion's FILTER with the switch that turns it on */
.fx-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  align-self: center;   /* its own height: the row would stretch it to the deck's */
  flex: none;
  background: #13171a;
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.75), 0 1px 0 #3c434b;
  padding: 14px 4px 2px;   /* its name sits in the top padding, so it costs the deck no height */
  margin: 0 2px;
}
.fx-group-head { position: absolute; top: 1px; left: 0; right: 0; height: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.fx-group-head .knob-label { margin: 0; color: #8b959f; letter-spacing: 0.6px; }
.fx-group-head .select { height: 13px; }
.fx-group-head .select-button { padding: 0 5px; font-size: 10px; line-height: 13px; }
.fx-group-body { display: flex; align-items: flex-start; justify-content: center; }
.fx-group .knob { width: 54px; }
.fx-group .knob-label, .fx-group .knob-value { font-size: 10px; }
.fx-group-body > .knob + .knob { border-left: 1px dotted #333b43; }
.fx-switches { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 2px 4px 0; align-self: center; }
.fx-switches .toggle { padding: 1px 6px; font-size: 10px; line-height: 13px; }
.fx-module-empty > .panel-title { color: #5d6670; }
.fx-module-empty .tier.controls { justify-content: center; align-items: center; background: #1d2126; }
.fx-empty { color: #5d6670; font-size: 12px; letter-spacing: 0.4px; }

/* ---- a Serum 1 import's notes: an alert at the footer's end, the list over the page's corner only when asked */
#import-alert { flex: none; color: #1a1306; background: linear-gradient(#ffd36b, #e9a93a); border-color: #5c3f0e; font-size: 12px; padding: 4px 12px; }
#import-alert::before { content: '\26A0\FE0E  '; }
#import-alert[hidden] { display: none; }
#notes { top: auto; bottom: 104px; }
#notes .notes-head { cursor: default; }
#notes .notes-close { margin-left: auto; }

/* ---- the keyboard: each C named; the octaves' arrows beside it */
.key-name { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 9px Barlow; color: #6a737c; pointer-events: none; }
.key.down .key-name { color: #1a2a12; }
.key-octaves { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: none; }
.key-octaves button { padding: 2px 8px; font-size: 10px; }
.key-octaves button:disabled { opacity: 0.35; cursor: default; }
.key-range { grid-column: 1 / -1; grid-row: 2; text-align: center; font: 700 11px Barlow; color: var(--label); white-space: nowrap; }

/* ---- the plug-in's downloads (the site only): one line under the editor, the version, then a link a platform */
.downloads { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; white-space: nowrap;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #8a93a8; }
.dl-title { font: 600 11px Barlow, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #5d667a; }
.dl-meta { color: var(--value); }
.dl-date { color: #8a93a8; }
.dl-date::before { content: '\00b7'; margin: 0 0.5em; color: #5d667a; }
.dl-call { font: 700 11px Barlow, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a8; }
.dl-link { text-decoration: none; color: #c9d3dc; border-bottom: 1px dotted rgba(201, 211, 220, 0.35); }
.dl-link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }
.dl-os { color: inherit; }
.dl-detail { margin-left: 0.6em; color: #6f7a88; }
.dl-link:hover .dl-detail { color: #a9b4bf; }

/* ---- the drawn editors take a finger's drag (the page doesn't scroll under it) */
.env-body .picture, .lfo-body .picture, .harm-screen .picture { touch-action: none; }
#keys-scroll { flex: none; }

/* ---- a window narrower than the layout: rows wrap rather than squeeze their modules over each other (where they
   fit, nothing moves) */
@media (max-width: 1399px) {
  #top { flex-wrap: wrap; row-gap: 6px; }
  .page > .row, .page > .row.modules { flex-wrap: wrap; }
  .page > .row > .panel { min-width: min-content; }
  /* the OSC page's grid as rows that wrap, each module at its width there */
  .page-osc { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  .page-osc > .panel.sub { width: 150px; }
  .page-osc > .panel.filter { width: 300px; }
  .page-osc > .panel.master { width: 226px; }
  .page-osc > .osc-mods { width: 512px; }
  .page-osc > .panel.lfo { width: 356px; }
  .page-osc > .panel.chaos { flex: 1 1 532px; }
  footer { flex-wrap: wrap; row-gap: 6px; }
  #status { min-width: 0; flex: 1 1 260px; }
}

/* ---- a phone or a narrow window: the header in lines (its buttons a strip that scrolls), the modules stacked as
   they fit, the keyboard shorter and scrolling sideways (a tap plays, a swipe scrolls) */
@media (max-width: 820px) {
  #top { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  .logo { height: 30px; }
  #tabs { flex: 1; justify-content: flex-end; }
  #tabs button { padding: 6px 10px 12px; font-size: 13px; }
  #tabs button.on::after { bottom: 4px; }
  .browser { order: 3; flex: 1 1 100%; max-width: none; }
  .actions { order: 4; flex: 1 1 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
  .actions::-webkit-scrollbar { display: none; }
  .actions button { flex: none; }
  #main { padding: 8px; }
  .page > .row, .page > .row.modules { flex-wrap: wrap; gap: 8px; }
  .page > .row > .panel { flex: 1 1 auto; min-width: min-content; max-width: 100%; }
  .panel { overflow-x: auto; }
  footer { flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; }
  #keys-scroll { flex: 1 1 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #keys, .key.white { height: 60px; }
  .key.black { height: 36px; }
  .key { touch-action: pan-x; }
  #status { flex: 1 1 100%; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .macros { flex-direction: row; justify-content: space-between; }
  #sources { flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #sources::-webkit-scrollbar { display: none; }
  .footer-chips { grid-auto-flow: column; grid-template-columns: none; width: max-content; }
  .panel .picture { max-width: 100%; height: auto !important; }
  .panel.matrix-panel { max-width: 100%; overflow-x: auto; }
  .matrix { gap: 4px 6px; }
  .matrix .select, .matrix .select-button { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* not heard: an oscillator at LEVEL 0 unmodulated, the filter with no sources through it */
.picture.silent, .filter-screen.silent .picture { filter: grayscale(1) brightness(0.8); }
/* an effect switched off: its header as it is, the rest half faded */
.module.fx-off > :not(.panel-title) { opacity: 0.5; filter: saturate(0.5); }

/* File > About: the device's splash at twice its size, the credits under it */
.about-dialog { width: 520px; background: #000; color: var(--label); border: 1px solid var(--edge); border-radius: 6px; padding: 18px; text-align: center; }
.about-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.about-screen { width: 480px; height: 480px; image-rendering: pixelated; cursor: pointer; display: block; margin: 0 auto; }
.about-credits { margin: 14px 0 6px; font: 500 13px Barlow; line-height: 1.6; opacity: 0; transition: opacity 0.8s; }
.about-credits.shown { opacity: 1; }
.about-title { font: 800 22px Barlow; letter-spacing: 3px; color: #9cff8c; }
.about-tag { color: #fff; margin-bottom: 6px; }
.about-dialog .bank-actions { justify-content: center; }
@media (max-width: 560px) { .about-dialog { width: calc(100vw - 24px); padding: 10px; } .about-screen { width: 100%; height: auto; } }

/* the librarian (library.js): the corral, the tools, the sources beside the bank's 8 x 16 slots */
.panel.librarian { gap: 8px; }
.lib-corral { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.lib-meter { display: flex; align-items: center; gap: 8px; min-width: 260px; }
.lib-meter-label { font: 700 11px Barlow; color: var(--label); letter-spacing: 0.6px; width: 76px; }
.lib-bar { width: 120px; height: 7px; border-radius: 4px; background: #0b0e11; border: 1px solid var(--edge); overflow: hidden; }
.lib-fill { height: 100%; background: var(--accent); }
.lib-meter.warn .lib-fill { background: #ff5f3f; }
.lib-meter.warn .lib-meter-value { color: #ff8a6a; }
.lib-meter-value { color: var(--value); font-size: 12px; }
.lib-unused { color: #ffd84d; font-size: 12px; }
.lib-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-banner { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 4px; background: #3a3220; color: #ffe39a; }
.lib-banner[hidden] { display: none; }
.lib-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; align-items: start; }
.lib-side { display: flex; flex-direction: column; gap: 6px; }
.lib-sources { display: flex; gap: 3px; }
.lib-sources button { flex: 1; font-size: 11px; padding: 3px 4px; }
.lib-sources button.lib-on { color: var(--accent); border-color: var(--accent); background: #1d2329; }
.lib-list { max-height: 540px; overflow: auto; display: flex; flex-direction: column; gap: 1px; background: #0e1114;
  border: 1px solid var(--edge); border-radius: 4px; padding: 4px; }
.lib-item { flex: none; display: flex; justify-content: space-between; gap: 6px; padding: 2px 6px; border-radius: 3px; cursor: grab;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.lib-item:hover { background: #1f252b; }
.lib-sub { color: var(--label); font-size: 10px; }
.lib-head { flex: none; color: var(--accent); font: 700 11px Barlow; padding: 6px 6px 2px; letter-spacing: 0.5px; }
.lib-grid { display: grid; grid-template-columns: repeat(8, minmax(104px, 1fr)); gap: 3px; overflow-x: auto; }
@media (max-width: 1100px) { .lib-body { grid-template-columns: minmax(0, 1fr); } .lib-list { max-height: 220px; } }
.lib-cell { position: relative; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 8px;
  background: linear-gradient(var(--cat-wash), var(--cat-wash)), #171b1f; border: 1px solid #0b0d10;
  border-left: 4px solid var(--cat-stripe); border-radius: 3px; cursor: grab;
  white-space: nowrap; overflow: hidden; font-size: 12px; color: #9aa4ad; }
.lib-cell.user { background: linear-gradient(var(--cat-wash), var(--cat-wash)), #20262c; color: var(--value); }
.lib-cell.sel { outline: 2px solid #fcde67; outline-offset: -1px; color: var(--value); }
.lib-cell.drop { outline: 2px dashed #9fe7ff; outline-offset: -2px; }
.lib-cell.drop-copy { outline-color: #9bee5e; }
.lib-grid:focus, .lib-list:focus { outline: none; }
.lib-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lib-hint { color: var(--label); font-size: 11px; }
.lib-side-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-side-foot button { flex: 1; font-size: 11px; }
.lib-item.sel { background: #3a3420; color: #ffe39a; }
.lib-item.sel:hover { background: #463e24; }
.lib-cell.diff::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%;
  background: #ffb547; }
.lib-cell.diff { padding-right: 14px; }
.lib-num { color: var(--label); font-size: 10px; opacity: 0.8; }
.lib-name { overflow: hidden; text-overflow: ellipsis; }
.lib-fit .bank-actions { flex-wrap: wrap; }
.ask-dialog { width: 420px; }
.ask-dialog p { color: var(--value); margin: 0 0 10px; }
.ask-input { width: 100%; font: inherit; font-size: 14px; padding: 5px 8px; margin-bottom: 12px; color: var(--value);
  background: #0e1114; border: 1px solid var(--edge); border-radius: 4px; }
.lib-keys { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.lib-keys.on { color: #111316; background: #9fe7ff; border-color: #9fe7ff; box-shadow: 0 0 8px rgba(159, 231, 255, 0.55); }
.lib-ghost { position: fixed; z-index: 50; pointer-events: none; padding: 3px 9px; border-radius: 4px; font-size: 12px;
  color: #0f1216; background: #9fe7ff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.lib-ghost.copy { background: #9bee5e; }
.lib-ghost[hidden] { display: none; }
body.lib-dragging, body.lib-dragging * { cursor: grabbing !important; }
.lib-cell.init { color: #8a929a; }
.lib-cell, .lib-item { touch-action: none; }

/* the mini-arc (ui.js miniArc): a modulated control's depth for the selected source, at its top-left; only it
 * changes the cursor */
.mini-arc { position: absolute; z-index: 1; }
.mini-arc[hidden] { display: none; }
.mini-arc.live { cursor: ns-resize; filter: drop-shadow(0 0 2.5px rgba(47, 180, 255, 0.85)); }
.knob > .mini-arc { left: -2px; top: -4px; }
.knob.small > .mini-arc { left: 4px; top: -5px; }
.number-wrap { position: relative; display: flex; }
.number-wrap > .mini-arc { left: -8px; top: -8px; }
/* the oscillators' PAN and LEVEL at their row's right; the noise's TYPE on a small screen */
.osc-main > .osc-levels { margin-left: auto; margin-right: 2px; flex-wrap: nowrap; gap: 2px; }
/* the unison's screen, then PHASE and RAND's */
.osc-lower { flex-wrap: nowrap; gap: 6px; align-items: stretch; }
.osc-lower > .uni-screen:first-child { flex: 1; }
.phase-screen { gap: 2px; }
.noise-types { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.noise-knobs { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.noise-types .stack { background: var(--screen); border: 1px solid var(--seam); border-radius: 3px; padding: 4px 8px; }

/* the SEQ tab (seq.js): the transport over the eight lanes and, beside them, the piano roll or a parameter's curve */
.seq { display: flex; flex-direction: column; gap: 6px; background: linear-gradient(var(--panel-top), var(--panel-bot));
  border: 1px solid var(--edge); border-radius: 6px; padding: 8px; }
.seq-bar { display: flex; align-items: center; gap: 8px; }
.seq-bar button { min-width: 78px; font: 700 12px Barlow; letter-spacing: 0.6px; }
.seq-rec { color: #ff8a7e; }
.seq-rec.on { color: #fff; background: linear-gradient(#c8463c, #9a2f27); border-color: #ff6b5e; }
.seq-pos { font: 700 16px Barlow; color: var(--value); min-width: 64px; font-variant-numeric: tabular-nums; }
.seq-info { color: var(--label); font-size: 12px; margin-left: auto; }
.seq-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 8px; height: max(320px, calc(100vh - 252px)); }
.seq-lanes { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: auto; }
.seq-lane { --accent: var(--label); display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto 26px;
  gap: 1px 6px; align-items: center; padding: 4px 6px; border-radius: 4px; background: var(--screen);
  border: 1px solid var(--seam); border-left: 3px solid var(--accent); cursor: pointer; flex: 1; min-height: 46px; }
.seq-lane:hover { border-color: #3c434b; border-left-color: var(--accent); }
.seq-lane.on { background: #1d252d; border-color: var(--accent); }
.seq-lane.empty { --accent: var(--dim); }
.seq-lane-num { font: 700 12px Barlow; color: var(--label); }
.seq-lane-name { font: 700 12px Barlow; color: var(--accent); letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-lane.empty .seq-lane-name { color: var(--dim); font-style: italic; }
.seq-lane-bars { font-size: 10px; color: var(--label); }
.seq-mini { grid-column: 1 / -1; width: 100%; height: 26px; display: block; }
.seq-editor { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.seq-head { display: flex; align-items: center; gap: 6px; }
.seq-param { --accent: var(--label); color: var(--accent); min-width: 150px; text-align: left; font: 700 12px Barlow; letter-spacing: 0.4px; }
.seq-param::after { content: ' \25BE'; color: var(--label); }
.seq-length { min-width: 74px; }
.seq-zoom { width: 28px; padding: 4px 0; }
.seq-head button:disabled { opacity: 0.4; cursor: default; }
.seq-hint { color: var(--label); font-size: 11px; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seq-roll-box { flex: 1; min-height: 0; position: relative; border: 1px solid var(--seam); border-radius: 4px; overflow: hidden; background: #161c22; }
.seq-roll { position: absolute; inset: 0; display: block; touch-action: none; }
@media (max-width: 760px) { .seq-body { grid-template-columns: 1fr; height: auto; } .seq-lanes { max-height: 220px; } .seq-roll-box { height: 380px; flex: none; } .seq-hint { display: none; } }