:root {
  --body: #e5322b;
  --panel: #c42720;
  --button: #a81d17;
  --accent: #8a130e;
  --edge: #7d120d;
  --muted: #ffd2cf;
  --dim-text: #ffb3ae;
  --lcd: #5a140f;
  --lcd-text: #ffd7c9;
  --shadow: 58, 8, 5;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "Montserrat", system-ui, sans-serif;
  --gap: 10px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--body);
  color: #fff;
  font: 600 14px/1.2 var(--sans);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, .knob:focus-visible, .pad:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
[hidden] { display: none !important; }
.label { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--muted); }

/* ---------- layout: desktop ---------- */
.app {
  height: 100dvh;
  display: grid;
  gap: 16px 14px;
  padding: 24px;
  grid-template-columns: 300px minmax(0, 1fr) 260px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "banks pads favs";
}
.top { grid-area: top; display: grid; grid-template-columns: 300px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.banks { grid-area: banks; }
.pads-area { grid-area: pads; position: relative; min-height: 0; }
.favs { grid-area: favs; }
.chips-wrap, .transport, .tabbar, .edit-bar, .edit-actions, .dots { display: none; }

.logo { width: 100%; max-width: 300px; display: block; }
.model { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--muted); margin-top: 10px; }

.lcd {
  background: var(--lcd);
  border: 3px solid var(--button);
  border-radius: 8px;
  box-shadow: inset 0 3px 10px rgba(42, 6, 4, .4);
  padding: 12px 18px;
  font-family: var(--mono);
  color: var(--lcd-text);
  text-shadow: 0 0 8px rgba(255, 155, 128, .4);
  min-width: 0;
}
.lcd-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; font-weight: 600; white-space: pre; }
.lcd-main { font-size: 22px; font-weight: 700; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.controls { display: flex; gap: 30px; padding-bottom: 14px; }
.knob {
  --angle: 0deg;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--button);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .12);
  border: 3px solid var(--edge);
  position: relative; cursor: ns-resize; touch-action: none;
}
.knob i { position: absolute; inset: 0; transform: rotate(var(--angle)); }
.knob i::before { content: ""; position: absolute; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #fff; }
.knob::after { content: attr(data-label); position: absolute; top: calc(100% + 8px); left: -20px; right: -20px; text-align: center; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--muted); }
.knob-toggle { cursor: pointer; }
.knob-toggle.is-on { background: #fff; }
.knob-toggle.is-on i::before { background: var(--accent); }

.panel { background: var(--panel); border-radius: 14px; padding: 18px 10px 10px; display: flex; flex-direction: column; min-height: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 14px; gap: 8px; }

.segmented { display: flex; background: var(--button); border-radius: 15px; padding: 3px; }
.segmented button { font-size: 12px; padding: 5px 12px; border-radius: 12px; color: var(--muted); }
.segmented button.is-on { background: var(--accent); color: #fff; }

.bank-list { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--button) transparent; }
.bank {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 6px; border-radius: 10px; margin-bottom: 8px; text-align: left;
}
.bank.is-on { background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.bank .num { font: 600 12px var(--mono); color: var(--muted); width: 18px; }
.bank .name { flex: 1; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank .count { font: 500 12px var(--mono); color: var(--muted); }
.bank.is-off { opacity: .55; }
.switch { width: 40px; height: 24px; border-radius: 12px; background: var(--button); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ff8a84; transition: transform .15s; }
.switch.is-on { background: #fff; }
.switch.is-on::after { transform: translateX(16px); background: var(--accent); }
.bank .switch { display: none; }
.filter-foot { display: none; justify-content: space-between; background: var(--button); border-radius: 9px; padding: 12px; font: 500 11px var(--mono); color: var(--muted); margin-top: 6px; }
.filter-foot span:first-child { color: #fff; }
.tip { font: 500 12px/1.5 var(--mono); color: var(--muted); padding: 10px; }

body.filtering .bank .switch { display: block; }
body.filtering .bank .num { display: none; }
body.filtering .bank.is-on { background: var(--button); box-shadow: none; }
body.filtering .bank.is-disabled { background: none; }
body.filtering .bank.is-disabled .face { opacity: .35; }
body.filtering .bank.is-disabled .name { color: var(--dim-text); }
body.filtering .filter-foot { display: flex; }
body.filtering .tip { display: none; }
body.filtering .bank { padding: 4px 6px; margin-bottom: 4px; }
body.filtering .bank .face { width: 28px; height: 28px; border-radius: 7px; }
body.filtering .bank .name { font-size: 13px; }
body.editing .pad .text { padding-right: 24px; }
body.filtering .bank:not(.is-disabled) { background: var(--button); }

/* ---------- faces (sprite, tinted in the category colour like the original site) ---------- */
.face {
  flex: none;
  width: 36px; height: 36px; border-radius: 8px;
  background-color: var(--c);
  background-image: url(../img/face.jpg);
  background-size: 500% 600%;
  background-position: calc(var(--col) * 25%) calc(var(--row) * 20%);
  background-blend-mode: luminosity;
}

/* ---------- pads ---------- */
.pads {
  height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: var(--gap);
  padding: 8px 12px 24px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .55) rgba(125, 18, 13, .35);
}
.pads > .pad { align-self: start; } /* grid stretch would override the square aspect ratio */
.pad {
  --c: #888;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--c);
  color: #fff;
  text-align: left;
  padding: 12px;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  box-shadow:
    0 1px 2px rgba(var(--shadow), .27), 0 4px 7px rgba(var(--shadow), .17), 0 11px 22px rgba(var(--shadow), .12),
    inset 0 2px 2px rgba(255, 255, 255, .35), inset 0 -3px 4px rgba(0, 0, 0, .28), inset 0 -10px 18px rgba(0, 0, 0, .24);
  transition: transform .06s, box-shadow .06s, filter .06s, opacity .2s;
  touch-action: manipulation;
}
.pad::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%;
  border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 0, rgba(255, 255, 255, .16), transparent 75%);
}
.pad.is-dark { color: #2b2724; }
.pad .key { display: block; font: 700 13px var(--mono); opacity: .7; }
.pad .text { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.15; hyphens: manual; overflow-wrap: anywhere; }
.pad .face { position: absolute; right: 10px; bottom: 10px; width: 37%; height: 37%; border-radius: 8px; }
.pad:active, .pad.is-playing {
  transform: translateY(3px);
  filter: brightness(.92);
  box-shadow: 0 1px 1px rgba(var(--shadow), .4), inset 0 4px 8px rgba(0, 0, 0, .36), inset 0 0 12px 2px rgba(0, 0, 0, .2), inset 0 -1px 1px rgba(255, 255, 255, .15);
}
.pad.is-playing::before, .pad:active::before { opacity: .3; }
.pad.is-off { opacity: .22; }
.pad .hide-x, .pad .restore { display: none; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--accent); border-radius: 15px; padding: 7px 18px;
  font: 600 11px var(--mono); letter-spacing: .04em;
  box-shadow: 0 3px 8px rgba(var(--shadow), .2), inset 0 0 0 1px rgba(255, 255, 255, .2);
}

/* ---------- edit mode ---------- */
@keyframes wiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
body.editing .pad:not(.is-hidden) { animation: wiggle .18s ease-in-out infinite alternate; }
body.editing .pad:nth-child(2n):not(.is-hidden) { animation-delay: -.09s; }
body.editing .pad .hide-x {
  display: grid; place-items: center;
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); box-shadow: inset 0 0 0 2px #fff; font: 700 15px var(--sans); color: #fff;
}
body.editing .pad.is-playing { transform: none; filter: none; }
.pad.is-hidden {
  background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); outline: 2px dashed rgba(255, 255, 255, .45); outline-offset: -2px;
  box-shadow: none; animation: none;
}
.pad.is-hidden::before, .pad.is-hidden .face, .pad.is-hidden .hide-x { display: none !important; }
.pad.is-hidden .key, .pad.is-hidden .text { opacity: .55; }
.pad.is-hidden .restore {
  display: block; position: absolute; left: 12px; bottom: 12px; padding: 6px 14px; border-radius: 14px;
  background: var(--accent); font: 700 12px var(--mono);
}
body.editing .controls { display: none; }
body.editing .edit-actions { display: flex; gap: 8px; }
body.editing .banks, body.editing .favs { opacity: .45; pointer-events: none; }

/* ---------- favourites ---------- */
.fav-list { overflow-y: auto; min-height: 0; }
.fav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: left; position: relative; }
.fav:hover { background: rgba(0, 0, 0, .08); }
.fav .face { width: 44px; height: 44px; border-radius: 50%; }
.fav b { display: block; font-size: 15px; }
.fav small { display: block; font: 500 13px var(--sans); color: var(--muted); margin-top: 3px; }
.fav .remove { margin-left: auto; opacity: 0; font-size: 16px; color: var(--muted); padding: 4px 6px; }
.fav:hover .remove { opacity: 1; }
.fav-empty { font: 500 12px/1.5 var(--mono); color: var(--muted); padding: 10px; }

/* ---------- buttons ---------- */
.btn { background: var(--button); border-radius: 12px; padding: 12px 18px; font-weight: 700; text-align: center; }
.btn-small { padding: 6px 12px; border-radius: 14px; font-size: 11px; }
.btn-accent { background: var(--accent); }
.btn-white { background: #fff; color: var(--accent); box-shadow: 0 3px 6px rgba(var(--shadow), .25); }
.btn-quiet { background: var(--button); }
.edit-actions .btn { border-radius: 24px; padding: 14px 26px; font-size: 15px; }
.btn.is-on { background: #fff; color: var(--accent); }

/* ---------- chips (tablet + mobile) ---------- */
.chips-wrap { grid-area: chips; min-width: 0; }
.chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--button); font-weight: 700; font-size: 15px; white-space: nowrap; }
.chip .face { width: 36px; height: 36px; }
.chip.is-on { background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.chip-filter { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); padding: 8px 16px; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .app {
    padding: 44px 32px 16px;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "chips" "pads" "favs";
  }
  .top { grid-template-columns: 1fr auto; grid-template-areas: "brand controls" "lcd lcd"; gap: 24px 16px; }
  .brand { grid-area: brand; } .controls { grid-area: controls; gap: 22px; } .lcd { grid-area: lcd; }
  .edit-actions { grid-area: controls; justify-self: end; }
  .edit-actions .btn-quiet { display: none; }
  .logo { max-width: 260px; }
  .knob { width: 52px; height: 52px; }
  .banks { display: none; }
  .chips-wrap { display: block; }
  .chips-wrap .label { margin-bottom: 10px; }
  .pads-area { display: flex; flex-direction: column; gap: 10px; margin: 0 -32px; }
  .pads {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 0 32px 14px;
    scroll-snap-type: x mandatory; scroll-padding: 0 32px; scrollbar-width: none; flex: 1;
  }
  .pads::-webkit-scrollbar { display: none; }
  .page {
    flex: 0 0 calc(100% - 34px); /* leaves the edge of the next page in view */
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 12px; scroll-snap-align: start; padding-bottom: 6px;
  }
  .pad { aspect-ratio: auto; padding: 14px 16px; }
  .pad .text { font-size: 17px; margin-top: 14px; }
  .pad .face { height: auto; aspect-ratio: 1; width: 33%; }
  .scroll-hint { display: none; }
  .dots { display: flex; justify-content: center; gap: 6px; }
  .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .4); transition: width .2s; }
  .dots i.is-on { width: 20px; background: #fff; }
  .favs { flex-direction: row; flex-wrap: wrap; padding: 0; background: none; }
  .favs .panel-head { width: 100%; padding: 0 0 10px; }
  .fav-list { display: flex; gap: 13px; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .fav { flex: 0 0 246px; background: var(--panel); padding: 10px; border-radius: 12px; }
  .fav .face { width: 44px; height: 44px; }
  .fav b { font-size: 14px; } .fav small { font-size: 12px; }
  body.editing .favs { display: none; }
  body.editing .edit-bar { display: flex; grid-area: favs; }
  .edit-bar { background: var(--panel); border-radius: 18px; padding: 14px 16px 14px 24px; align-items: center; justify-content: space-between; font-size: 16px; }
  .edit-bar .btn { border-radius: 20px; padding: 11px 22px; }
  body.editing .chips-wrap { opacity: .45; pointer-events: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 699px) {
  .app {
    padding: 52px 16px 0;
    gap: 14px;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "top" "chips" "pads" "transport" "tabbar";
  }
  .top { gap: 18px 12px; }
  .logo { max-width: 170px; }
  .model { display: none; }
  .controls { gap: 12px; padding-bottom: 16px; }
  .controls .knob-toggle { display: none; }
  .knob { width: 40px; height: 40px; border-width: 2px; }
  .knob i::before { width: 5px; height: 5px; margin-left: -2.5px; top: 5px; }
  .knob::after { font-size: 9px; top: calc(100% + 3px); }
  .lcd { padding: 10px 14px; }
  .lcd-meta { font-size: 11px; }
  .lcd-main { font-size: 18px; margin-top: 6px; }
  .chips-wrap .label { display: none; }
  .chip { padding: 4px 14px 4px 4px; border-radius: 20px; font-size: 13px; gap: 8px; }
  .chip .face { width: 32px; height: 32px; border-radius: 16px; }
  .pads-area { margin: 0 -16px; gap: 6px; }
  .pads { padding: 0 16px 6px; gap: 6px; scroll-padding: 0 16px; }
  .page { flex-basis: calc(100% - 16px); gap: 6px; }
  .pad { padding: 7px 8px; border-radius: 12px; }
  .pad .key { font-size: 10px; }
  .pad .text { font-size: 11px; margin-top: 6px; }
  .pad .face { right: 8px; bottom: 8px; width: 36%; border-radius: 6px; }
  .pad .hide-x { width: 20px; height: 20px; top: 5px; right: 5px; font-size: 12px; }
  body.editing .pad .text { padding-right: 0; margin-top: 12px; }
  .pad.is-hidden .restore { left: 50%; transform: translateX(-50%); bottom: 8px; padding: 4px 10px; font-size: 10px; white-space: nowrap; }
  .dots i { width: 4px; height: 4px; } .dots i.is-on { width: 16px; }
  .favs { display: none; }
  .transport { display: grid; grid-area: transport; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--panel); border-radius: 14px; padding: 6px; }
  .transport .btn { font: 600 12px var(--mono); padding: 14px 0; border-radius: 10px; }
  .tabbar { display: grid; grid-area: tabbar; grid-template-columns: repeat(4, 1fr); background: var(--panel); margin: 0 -16px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); }
  .tabbar button { display: grid; justify-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #fff; }
  .tabbar i { width: 24px; height: 24px; border-radius: 7px; background: #ff8a84; }
  .tabbar .is-on i { background: var(--accent); }
  body.editing .transport { display: none; }
  body.editing .edit-bar { grid-area: transport; padding: 8px 8px 8px 16px; border-radius: 14px; font-size: 14px; }
  .edit-actions .btn-white { padding: 10px 22px; font-size: 14px; }
}

/* ---------- sheets (tablet + mobile filter, favourites, search) ---------- */
.sheet-dim { position: fixed; inset: 0; background: rgba(var(--shadow), .6); z-index: 10; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-height: calc(100dvh - 150px);
  background: var(--panel); border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 32px rgba(var(--shadow), .4);
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.grip { width: 40px; height: 5px; border-radius: 3px; background: #ff8a84; position: absolute; top: 10px; left: 50%; margin-left: -20px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; }
.sheet h2 { margin: 0; font-size: 26px; }
.sheet .sub { font: 500 12px var(--mono); color: var(--muted); margin-top: 6px; }
.link { font-weight: 700; font-size: 15px; padding: 6px 0; }
.quick { display: flex; gap: 10px; flex-wrap: wrap; }
.quick button { background: var(--button); border-radius: 18px; padding: 9px 16px; font-size: 13px; font-weight: 700; }
.quick button.is-on { background: var(--accent); }
.sheet-list { overflow-y: auto; display: grid; gap: 6px; min-height: 0; flex: 1; }
.row { display: flex; align-items: center; gap: 14px; padding: 7px 12px 7px 10px; border-radius: 12px; background: var(--button); text-align: left; width: 100%; }
.row .face { width: 40px; height: 40px; border-radius: 10px; }
.row b { display: block; font-size: 15px; }
.row small { display: block; font: 500 11px var(--mono); color: var(--muted); margin-top: 4px; }
.row .grow { flex: 1; min-width: 0; }
.row .switch { width: 44px; height: 26px; border-radius: 13px; }
.row .switch::after { width: 20px; height: 20px; }
.row .switch.is-on::after { transform: translateX(18px); }
.row.is-disabled { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.row.is-disabled .face { opacity: .35; }
.row.is-disabled b { color: var(--dim-text); }
.cta { background: var(--accent); border-radius: 16px; padding: 18px; font-size: 17px; font-weight: 700; box-shadow: 0 4px 10px rgba(var(--shadow), .4); }
.sheet-hint { text-align: center; font: 500 11px var(--mono); color: var(--muted); }
.search { font: 600 17px var(--sans); padding: 16px 18px; border-radius: 14px; border: 0; background: #fff; color: #2b2724; }
@media (min-width: 700px) {
  .sheet { max-height: calc(100dvh - 300px); padding: 36px 32px 24px; }
  .sheet h2 { font-size: 28px; }
  #filterSheet .sheet-list { grid-template-columns: 1fr 1fr; gap: 10px 20px; align-content: start; }
}
@media (min-width: 1100px) {
  .sheet { left: 50%; right: auto; width: 640px; margin-left: -320px; bottom: 50%; transform: translateY(50%); border-radius: 24px; max-height: 80dvh; }
  .grip { display: none; }
}