:root {
  color-scheme: dark;
  font-family: "Space Grotesk", system-ui, sans-serif;
  --display: "Anton", Impact, sans-serif;
  --marker: "Permanent Marker", cursive;
  --mono: "JetBrains Mono", monospace;
  --pink: #ff2e88;
  --yellow: #ffe600;
  --red: #ff2b2b;
  --lime: #b6ff3c;
  --paper: #f7f0e4;
  --accent: var(--lime);
  --shell: #d1a06c;
  --shell-dark: #704729;
  --metal: #d8dde2;
  background: #090b0e;
  color: #f5f6f7;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { position: relative; margin: 0; overflow-x: hidden; background: radial-gradient(ellipse at 70% 20%, #3b3622 0, #17150f 46%, #090909 100%); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 50% 45%, transparent 45%, #000b 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); opacity: .7; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.topbar { min-height: 70px; display: flex; align-items: center; gap: 18px; padding: 10px 20px; border-bottom: 4px solid #fff; background: #141414; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; }
.brand-mark { display: block; width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(4px 4px 0 var(--pink)); transform: rotate(-4deg); }
.brand strong, .brand small { display: block; line-height: 1; }
.brand strong { font-family: var(--display); font-size: 1.35rem; letter-spacing: .06em; }
.brand small { margin-top: 3px; color: var(--yellow); font-family: var(--mono); font-size: .55rem; letter-spacing: .18em; }
.badge { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); font-family: var(--mono); font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: #ff515b; box-shadow: 0 0 10px #ff515b; }
.badge.online { color: #000; background: var(--lime); }
.badge.online i { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.icon-button { padding: 9px 14px; color: #000; background: var(--yellow); border: 4px solid #000; border-radius: 0; box-shadow: 4px 4px 0 var(--pink); font-family: var(--display); font-size: .85rem; letter-spacing: .08em; cursor: pointer; }
.sequencer-button { background: var(--pink); color: #fff; box-shadow: 4px 4px 0 var(--lime); }
.rig-link { display: inline-flex; align-items: center; text-decoration: none; background: var(--lime); box-shadow: 4px 4px 0 var(--pink); }
.app-cta { display: inline-flex; align-items: center; text-decoration: none; background: #000; color: var(--lime); box-shadow: 4px 4px 0 var(--lime); }
.app-cta:hover { background: var(--lime); color: #000; box-shadow: 4px 4px 0 #000; }
.sounds-button { background: var(--lime); color: #000; box-shadow: 4px 4px 0 var(--pink); }
.sounds-help { margin: 14px 0 16px; font-family: var(--mono); font-size: .66rem; color: #cfd6dd; line-height: 1.55; }
.sounds-list { display: grid; gap: 9px; }
.sounds-row { display: grid; grid-template-columns: 1.1fr .9fr 1.1fr .75fr; gap: 8px; align-items: center; }
.sounds-pad { font-family: var(--display); font-size: .92rem; color: #fff; letter-spacing: .04em; }
.sounds-row select { height: 38px; min-width: 0; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); font-family: var(--display); font-size: .72rem; letter-spacing: .03em; padding: 2px 6px; }
.sounds-row select.sounds-mode { box-shadow: 3px 3px 0 var(--lime); }
.sounds-row select:disabled { opacity: .38; box-shadow: 3px 3px 0 #000; cursor: not-allowed; }
.sounds-import { grid-column: span 2; display: flex; align-items: center; gap: 6px; height: 38px; padding: 2px 9px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--lime); font-family: var(--mono); font-size: .62rem; font-weight: 700; cursor: pointer; overflow: hidden; }
.sounds-import:hover { background: var(--yellow); }
.sounds-import-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sounds-spacer { display: none; }

.sequencer-backdrop { position: fixed; inset: 0; z-index: 79; background: #000b; backdrop-filter: blur(3px); }
.sequencer-drawer { position: fixed; z-index: 80; top: 0; right: 0; width: min(760px, 96vw); max-width: 100vw; height: 100dvh; padding: 20px; overflow-x: hidden; overflow-y: auto; color: #fff; background: #141414; border-left: 5px solid #fff; box-shadow: -12px 0 0 var(--pink), -30px 0 70px #000c; transform: translateX(calc(100% + 20px)); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.sequencer-drawer.open { transform: translateX(0); }
.sequencer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 4px solid #fff; }
.sequencer-kicker { color: var(--lime); font-family: var(--mono); font-size: .65rem; font-weight: 700; letter-spacing: .16em; }
.sequencer-head h2 { margin: 2px 0 0; color: var(--pink); font-family: var(--display); font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; letter-spacing: .03em; text-shadow: 4px 4px 0 #000, 7px 7px 0 var(--yellow); }
.drawer-close { width: 46px; height: 46px; flex: none; border: 4px solid #000; color: #000; background: var(--yellow); box-shadow: 4px 4px 0 var(--pink); font-size: 1.8rem; font-weight: 900; line-height: 1; cursor: pointer; }
.sequencer-controls { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr 1fr auto; align-items: end; gap: 12px; padding: 18px 0 12px; }
.sequencer-controls label { display: grid; gap: 5px; color: var(--yellow); font-family: var(--mono); font-size: .62rem; font-weight: 700; }
.sequencer-controls select { height: 40px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); font-family: var(--display); padding: 4px 8px; }
.sequencer-controls input { width: 100%; accent-color: var(--pink); }
.sequence-play, .sequence-clear { min-height: 42px; padding: 0 14px; border: 3px solid #000; font-family: var(--display); letter-spacing: .08em; box-shadow: 4px 4px 0 #000; cursor: pointer; }
.sequence-play { color: #000; background: var(--lime); }.sequence-play.playing { color: #fff; background: var(--red); }
.sequence-clear { color: #000; background: var(--yellow); }
.sequence-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sequence-toolbar > button, .sequence-import { flex: 1 1 auto; min-height: 38px; padding: 5px 9px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); font-family: var(--display); font-size: .68rem; letter-spacing: .05em; cursor: pointer; }
.sequence-toolbar > button:hover, .sequence-import:hover { background: var(--yellow); }
.sequence-import { display: grid; place-items: center; text-align: center; }
.sequence-import input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.sequence-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1 1 250px; min-width: 180px; }
.sequence-bars[hidden] { display: none; }
.sequence-bars button.active { background: var(--lime); box-shadow: 3px 3px 0 var(--yellow); }
.sequence-bars button:disabled { color: #777; background: #292929; box-shadow: none; cursor: not-allowed; }
.sequence-pages { display: none; gap: 8px; margin: 0 0 14px; }
.sequence-pages button { flex: 1; min-height: 42px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); font-family: var(--display); letter-spacing: .06em; }
.sequence-pages button.active { background: var(--yellow); box-shadow: 3px 3px 0 var(--lime); }
.step-numbers, .sequence-row { display: grid; grid-template-columns: 78px repeat(16, minmax(23px, 1fr)); gap: 5px; align-items: center; min-width: 650px; }
.step-numbers { margin-bottom: 6px; color: #847d73; font-family: var(--mono); font-size: .52rem; text-align: center; }
.sequence-grid { display: grid; gap: 8px; overflow-x: auto; padding: 4px 4px 14px; }
.sequence-label { padding: 5px 3px; border: 2px solid transparent; color: #fff; background: transparent; font-family: var(--display); font-size: .76rem; letter-spacing: .05em; text-align: left; cursor: pointer; }
.sequence-label.muted { color: #777; text-decoration: line-through; }
.sequence-step { aspect-ratio: 1; min-width: 23px; border: 2px solid #555; background: #262626; cursor: pointer; transition: transform .05s, background .05s, box-shadow .05s; }
.sequence-step:nth-of-type(4n+2) { border-color: #777; }
.sequence-step.on { border-color: #000; box-shadow: 2px 2px 0 var(--yellow); }
.sequence-step.soft { background: #7b2450; }
.sequence-step.normal { background: var(--pink); }
.sequence-step.accent { background: var(--yellow); }
.sequence-step.playhead { outline: 3px solid var(--lime); outline-offset: 1px; transform: scale(1.08); }
.sequence-step.on.playhead { filter: brightness(1.35); }
.velocity-legend { display: flex; gap: 14px; color: #aaa196; font-family: var(--mono); font-size: .58rem; }
.velocity-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid #000; vertical-align: -1px; }
.velocity-legend .soft::before { background: #7b2450; }.velocity-legend .normal::before { background: var(--pink); }.velocity-legend .accent::before { background: var(--yellow); }
.sequencer-note { margin: 12px 0 0; color: #aaa196; font-family: var(--mono); font-size: .65rem; }

.connection-panel { display: grid; grid-template-columns: 1.15fr minmax(220px, 1fr) auto minmax(150px, .7fr) minmax(150px, .7fr) auto; align-items: end; gap: 14px; padding: 16px 20px; border-bottom: 4px solid #000; background: var(--yellow); color: #000; transition: margin .2s, opacity .2s; }
.connection-panel.closed { display: none; }
.connection-copy { align-self: center; }
.connection-copy strong, .connection-copy span { display: block; }
.connection-copy strong { color: #000; font-family: var(--display); font-size: 1rem; letter-spacing: .08em; }
.connection-copy span, #connectionMessage { color: #302d20; font-family: var(--mono); font-size: .62rem; font-weight: 700; }
.connection-panel label { display: grid; gap: 5px; color: #000; font-family: var(--mono); font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.connection-panel input:not([type="checkbox"]), .connection-panel select { width: 100%; min-width: 0; height: 40px; padding: 7px 9px; border: 3px solid #000; border-radius: 0; color: #000; background: var(--paper); box-shadow: 3px 3px 0 #000; }
#pairCode { text-transform: uppercase; font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: .2em; }
.connection-panel input[type="range"] { accent-color: var(--pink); }
.connect-button { height: 40px; padding: 0 18px; border: 3px solid #000; border-radius: 0; background: var(--pink); color: #fff; box-shadow: 4px 4px 0 #000; font-family: var(--display); font-size: .82rem; letter-spacing: .1em; cursor: pointer; }
.connect-button.online { background: var(--lime); color: #000; }
.preview-toggle { display: flex !important; align-items: center; height: 38px; white-space: nowrap; }
.preview-toggle input { accent-color: var(--accent); }
/* MIDI OUT: the toggle and the panel it reveals, kept together as one full-width unit - split
   across grid cells they read as two unrelated controls. */
.midi-out-wrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
/* Said BEFORE the box is ticked, not after. "Not listed as an available MIDI source" was the
   first field report on this feature, and the answer - that a browser cannot create a port, only
   send to one - was written inside a panel you had to turn the feature on to read. */
.midi-out__why { margin: 2px 0 0; max-width: 62ch; color: #302d20;
  font-family: var(--mono); font-size: .58rem; font-weight: 700; line-height: 1.5; }

.midi-out { display: grid; grid-template-columns: minmax(220px, 320px) auto; align-items: end;
  gap: 10px 18px; padding: 12px 14px; border: 3px solid #000; background: var(--paper);
  box-shadow: 4px 4px 0 #000; }
.midi-out .preview-toggle { height: 40px; }
.midi-out #midiOutMessage { grid-column: 1 / -1; margin: 0; color: #302d20;
  font-family: var(--mono); font-size: .62rem; font-weight: 700; line-height: 1.4; }
#connectionMessage { grid-column: 1 / -1; margin: -4px 0 0; }

.demo-panel { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(360px, 1.8fr) minmax(170px, .65fr) auto; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 4px solid #fff; color: #fff; background: #191919; }
.demo-copy strong, .demo-copy span { display: block; }
.demo-copy strong { color: var(--pink); font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; }
.demo-copy span, #rhythmStatus { color: #bdb7ad; font-family: var(--mono); font-size: .6rem; }
.rhythm-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rhythm-buttons button, .stop-rhythm { min-height: 42px; border: 3px solid #000; border-radius: 0; color: #000; background: var(--paper); box-shadow: 4px 4px 0 var(--pink); font-family: var(--display); letter-spacing: .06em; cursor: pointer; transition: transform .08s, box-shadow .08s, background .08s; }
.rhythm-buttons button small { display: block; font-family: var(--mono); font-size: .52rem; }
.rhythm-buttons button:hover { background: var(--yellow); }
.rhythm-buttons button.active { color: #000; background: var(--lime); box-shadow: 4px 4px 0 var(--yellow); transform: translate(2px, 2px); }
.demo-tempo { display: grid; gap: 4px; color: var(--yellow); font-family: var(--mono); font-size: .62rem; font-weight: 700; }
.demo-tempo input { width: 100%; accent-color: var(--pink); }
.stop-rhythm { padding: 0 14px; color: #fff; background: var(--red); }
.stop-rhythm:disabled { color: #777; background: #292929; box-shadow: 3px 3px 0 #000; cursor: not-allowed; }
#rhythmStatus { grid-column: 1 / -1; margin: -4px 0 0; color: var(--lime); }

main { width: min(1500px, 100%); margin-inline: auto; padding: 12px; }
.drum-kit {
  --kit-accent: #d8ff45;
  position: relative;
  height: clamp(560px, calc(100vh - 185px), 880px);
  min-width: 760px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 0;
  background:
    linear-gradient(115deg, transparent 0 43%, #fff1 44%, transparent 46% 100%),
    radial-gradient(ellipse at 50% 18%, #39414c 0, #1e242c 32%, #0d1014 77%);
  box-shadow: inset 0 -130px 150px #000b, inset 0 1px #ffffff18, 10px 10px 0 var(--pink), 0 28px 70px #000b;
}
.drum-kit.arena { --kit-accent: #ffb33e; }
.drum-kit.hybrid { --kit-accent: #42e9ff; }
.stage-glow { position: absolute; inset: auto 5% -25% 5%; height: 55%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--kit-accent) 24%, transparent), transparent 65%); filter: blur(18px); }
.kit-sticker { position: absolute; z-index: 20; padding: 6px 10px; border: 3px solid #000; color: #000; box-shadow: 4px 4px 0 #000; font-family: var(--marker); font-size: clamp(.6rem, 1vw, .9rem); pointer-events: none; }
.sticker-hit { left: 2%; bottom: 4%; background: var(--yellow); transform: rotate(-7deg); }
.sticker-rules { right: 2%; bottom: 4%; background: var(--lime); transform: rotate(5deg); }
.sticker-real { left: 2%; top: 2%; background: var(--red); color: #fff; transform: rotate(-2deg); }
.drum-rug { position: absolute; left: 12%; right: 12%; bottom: -13%; height: 61%; border: 1px solid #ffffff0d; border-radius: 50% 50% 8% 8%; transform: perspective(500px) rotateX(58deg); background: repeating-linear-gradient(90deg, #14171b 0 2px, #0b0d10 2px 7px); box-shadow: 0 0 60px #000d; }
.rack-bar { position: absolute; z-index: 2; left: 21%; right: 19%; top: 44%; height: 13px; border: 2px solid #111; border-radius: 9px; background: linear-gradient(#7e858b, #24282c 48%, #090a0b 52%, #5f666b); box-shadow: 0 8px 12px #000a; }
.rack-bar::before, .rack-bar::after { content: ""; position: absolute; top: -4px; width: 15px; height: 20px; border-radius: 4px; background: linear-gradient(90deg, #4b5157, #e2e5e7, #454b50); }
.rack-bar::before { left: 12%; } .rack-bar::after { right: 12%; }
.rack-leg { position: absolute; z-index: 1; top: 43%; bottom: 7%; width: 12px; border: 2px solid #0a0b0c; border-radius: 8px; background: linear-gradient(90deg, #17191b, #777e83 45%, #1b1e20); box-shadow: 3px 4px 8px #000c; }
.rack-leg::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 90px; height: 8px; border-radius: 8px; background: #222629; transform: translateX(-50%); box-shadow: inset 0 2px #737a7f; }
.rack-leg-left { left: 22%; } .rack-leg-right { right: 20%; }
.drum-module { position: absolute; z-index: 12; left: 8%; top: 45%; width: 13%; min-width: 105px; height: 18%; min-height: 100px; padding: 10px; border: 4px solid #08090a; border-radius: 9px; background: linear-gradient(145deg, #4d5358, #171a1d 58%, #070809); box-shadow: 8px 10px 0 #0009, inset 1px 1px #aeb4b8; transform: rotate(-4deg); }
.module-screen { display: grid; gap: 3px; padding: 7px; border: 2px solid #050607; color: #172006; background: var(--kit-accent); box-shadow: inset 0 0 12px #0005; font-family: var(--mono); }
.module-screen b { font-size: clamp(.45rem, .7vw, .62rem); }.module-screen span { font-size: clamp(.38rem, .55vw, .5rem); white-space: nowrap; }
.drum-module > i { display: inline-block; width: 18px; height: 18px; margin: 9px 4px 0 0; border: 3px solid #08090a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bbc0c3, #303438 55%, #090a0b); }
.drum-module > small { display: block; margin-top: 4px; color: #a8afb4; font-family: var(--display); font-size: .55rem; letter-spacing: .12em; }
.cable { position: absolute; z-index: 1; width: 26%; height: 32%; border: 3px solid transparent; border-left-color: #050607; border-bottom-color: #050607; border-radius: 0 0 0 50%; pointer-events: none; opacity: .9; }
.cable-one { left: 20%; top: 36%; rotate: -12deg; }.cable-two { left: 27%; top: 31%; rotate: 4deg; }.cable-three { left: 38%; top: 31%; rotate: 12deg; }
.stand { position: absolute; top: 21%; bottom: 10%; width: 5px; background: linear-gradient(90deg, #343a40, #f1f3f4 45%, #555c63); transform-origin: top; z-index: 1; box-shadow: 2px 3px 5px #000b; }
.stand::before { content: ""; position: absolute; top: 0; left: 50%; width: 75px; height: 4px; background: linear-gradient(#e7eaec, #555c63); transform: translateX(-50%); }
.stand::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 105px; height: 5px; border-radius: 5px; background: #929aa1; transform: translateX(-50%); box-shadow: -24px -8px 0 #60676d, 24px -8px 0 #60676d; }
.stand-left { left: 16%; transform: rotate(7deg); }
.stand-right { right: 16%; transform: rotate(-7deg); }
.stand-center { left: 50%; top: 15%; }
.stand-hat { left: 17%; top: 35%; bottom: 7%; }
.throne { position: absolute; z-index: 3; left: 44%; bottom: -5%; width: 13%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at 45% 32%, #4b5057, #111318 67%, #030405 72%); box-shadow: 0 12px 24px #000e; }
.throne::after { content: ""; position: absolute; left: 50%; top: 82%; width: 6px; height: 80px; background: linear-gradient(90deg, #4b5157, #dce0e2, #40464c); }
.kick-pedal { position: absolute; z-index: 8; left: 50%; bottom: 1%; width: 5%; height: 16%; transform: translateX(-50%) perspective(140px) rotateX(22deg); border: 3px solid #31363c; border-radius: 8px 8px 15px 15px; background: repeating-linear-gradient(90deg, #cbd0d3 0 4px, #5d646a 4px 8px); box-shadow: 0 10px 15px #000b; }
.kick-pedal i { position: absolute; left: 50%; bottom: 83%; width: 4px; height: 65px; background: #bdc3c7; transform: rotate(12deg); transform-origin: bottom; }
.kick-pedal i::after { content: ""; position: absolute; left: 50%; top: -10px; width: 19px; height: 19px; border-radius: 50%; background: #e7e2d9; transform: translateX(-50%); box-shadow: 0 0 0 3px #3f454a; }

.pad { position: absolute; z-index: 5; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #17191c; cursor: pointer; user-select: none; touch-action: manipulation; transition: filter 55ms, scale 55ms, box-shadow 55ms; }
.pad span, .pad small { position: relative; z-index: 4; text-shadow: 0 1px #fff8; pointer-events: none; }
.pad span { font-size: clamp(.55rem, .85vw, .78rem); font-weight: 950; letter-spacing: .08em; }
.pad small { margin-top: 3px; color: var(--pink); font-size: clamp(.52rem, .72vw, .68rem); font-weight: 900; opacity: 1; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.pad.cymbal { overflow: hidden; border: 5px solid #08090a; border-radius: 50%; color: #cbd0d3; background: repeating-radial-gradient(ellipse at center, #3b4044 0 3px, #202326 4px 8px, #121416 9px 13px); box-shadow: 0 18px 24px #000d, inset 0 2px 2px #8a919655, inset 0 -7px 11px #000; }
.pad.cymbal::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: conic-gradient(from -52deg, color-mix(in srgb, var(--kit-accent) 65%, transparent) 0 5deg, transparent 5deg 116deg, #ffffff12 116deg 119deg, transparent 119deg 235deg, #ffffff12 235deg 238deg, transparent 238deg); }
.pad.cymbal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #08090a 0 25%, #666d72 30% 55%, #111315 60%); transform: translate(-50%, -50%); box-shadow: 0 3px 5px #000; }
.pad.shell { overflow: hidden; border: 8px solid #090a0b; border-radius: 50%; color: #d7dbde; background: radial-gradient(ellipse at 45% 36%, #555b60 0, #303438 33%, #191c1f 65%, #070809 72%) padding-box; box-shadow: 0 18px 25px #000d, inset 0 0 0 3px #6d747955, inset 0 -10px 18px #000; }
.pad.shell::before { content: ""; position: absolute; z-index: 1; inset: 12%; border: 1px solid #697075; border-radius: 50%; background: repeating-radial-gradient(circle at 46% 40%, #353a3e 0 1px, #24282b 2px 4px); box-shadow: inset 3px 3px 10px #ffffff12, inset -7px -7px 12px #0008; }
.pad.shell::after { content: ""; position: absolute; z-index: 2; inset: 4%; border: 4px dotted #777e83; border-radius: 50%; opacity: .75; pointer-events: none; }
.drum-kit.hybrid .pad.shell { border-color: #08090a; box-shadow: 0 18px 25px #000d, 0 0 15px color-mix(in srgb, var(--kit-accent) 70%, transparent), inset 0 0 0 3px var(--kit-accent); }
.pad.pedal { border: 3px solid #343a41; border-radius: 10px; background: repeating-linear-gradient(90deg, #cbd0d3 0 5px, #6a7177 5px 9px); color: #111; box-shadow: 0 10px 18px #000b; }
.pad.active { scale: .945; filter: brightness(1.38); box-shadow: 0 0 38px var(--kit-accent), 0 18px 24px #000b; }

.crash-one { left: 2%; top: 8%; width: 25%; height: 15%; rotate: -6deg; }
.splash { left: 29%; top: 5%; width: 15%; height: 10%; rotate: 4deg; }
.ride { right: 24%; top: 5%; width: 25%; height: 16%; rotate: -2deg; }
.crash-two { right: 1%; top: 10%; width: 23%; height: 14%; rotate: 7deg; }
.hi-hat { left: 7%; top: 33%; width: 21%; height: 11%; rotate: -3deg; }
.rack-one { left: 32%; top: 27%; width: 15%; height: 17%; }
.rack-two { left: 50%; top: 27%; width: 15%; height: 17%; }
.floor-tom { right: 11%; top: 51%; width: 18%; height: 21%; }
.snare { left: 21%; top: 53%; width: 20%; height: 22%; z-index: 7; }
.kick { left: 43%; top: 57%; width: 14%; height: 25%; border-radius: 42% 42% 18% 18% !important; background: linear-gradient(145deg, #454b50, #171a1d 55%, #060708) !important; color: #fff; }
.kick::before { content: ""; position: absolute; z-index: 1; inset: 14% 12% 20%; border: 4px solid #050607; border-radius: 50%; background: radial-gradient(circle, #363b3f, #111315 70%); }
.kick::after { border-style: solid !important; border-color: #72797e !important; }
.kick-logo { position: relative; z-index: 4; display: block; width: 46%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--kit-accent) 55%, transparent)); pointer-events: none; }
.hat-pedal { left: 7%; bottom: 4%; width: 9%; height: 18%; }
.performance-bar { display: flex; justify-content: space-between; margin: 10px 0 4px; padding: 8px 10px; border: 3px solid #000; color: #000; background: var(--paper); box-shadow: 4px 4px 0 var(--yellow); font-family: var(--mono); font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
#lastHit { color: #000; background: var(--lime); padding-inline: 4px; }

@media (max-width: 1000px) {
  .connection-panel { grid-template-columns: 1fr 1fr 120px; }
  .connection-copy { grid-column: 1 / -1; }
  .preview-toggle { justify-content: flex-start; }
  .demo-panel { grid-template-columns: 1fr 1fr; }
  .demo-copy, .rhythm-buttons, #rhythmStatus { grid-column: 1 / -1; }
  main { overflow-x: auto; }
  .drum-kit { height: 570px; }
}

@media (max-width: 760px) {
  main { overflow: visible; padding: 8px; }
  .connection-panel { width: 100%; max-width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px; overflow-x: hidden; }
  .connection-panel > * { min-width: 0; max-width: 100%; }
  .connection-copy, .preview-toggle, #connectionMessage, .midi-out-wrap { grid-column: 1 / -1; }
  .connect-button { width: 100%; }
  .drum-kit {
    min-width: 0;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    background: linear-gradient(145deg, #252525, #101010);
    box-shadow: 7px 7px 0 var(--pink);
  }
  .drum-kit > :not(.pad) { display: none; }
  .drum-kit .pad {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 1.12;
    rotate: 0deg;
    border-width: 5px;
    border-radius: 16px;
  }
  .drum-kit .pad::before { border-radius: 12px; }
  .drum-kit .pad::after { border-radius: 12px; }
  .drum-kit .pad span { font-size: clamp(.64rem, 2.7vw, .82rem); }
  .drum-kit .pad small { font-size: clamp(.62rem, 2.6vw, .76rem); }
  .drum-kit .kick-logo { width: 42%; }
  .crash-one { order: 1; }.splash { order: 2; }.ride { order: 3; }
  .crash-two { order: 4; }.hi-hat { order: 5; }.rack-one { order: 6; }
  .rack-two { order: 7; }.floor-tom { order: 8; }.snare { order: 9; }
  .kick { order: 10; }.hat-pedal { order: 11; }
  .performance-bar { flex-wrap: wrap; gap: 6px 12px; line-height: 1.4; }
  .sequencer-drawer { width: 100vw; padding: 14px; border-left: 0; }
  .sequencer-head, .sequencer-controls, .sequence-pages, .step-numbers, .sequence-grid, .sequence-row { width: 100%; max-width: 100%; min-width: 0; }
  .sequencer-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sequencer-controls label, .sequencer-controls select { min-width: 0; width: 100%; }
  .sequence-play { grid-column: 1 / -1; }
  .sequence-toolbar { width: 100%; }
  .sequence-bars { flex-basis: 100%; min-width: 0; }
  .sequence-toolbar > button { flex-basis: calc(50% - 4px); min-width: 0; padding-inline: 3px; }
  .sequence-pages { display: flex; }
  .step-numbers, .sequence-row { grid-template-columns: 48px repeat(8, minmax(0, 1fr)); gap: 3px; min-width: 0; }
  .sequence-grid { overflow-x: hidden; }
  .sequence-label { font-size: .66rem; }
  .sequence-step { min-width: 0; min-height: 32px; }
  .sequencer-drawer[data-page="0"] .step-numbers span:nth-child(n+10),
  .sequencer-drawer[data-page="0"] .sequence-step:nth-child(n+10) { display: none; }
  .sequencer-drawer[data-page="1"] .step-numbers span:nth-child(n+2):nth-child(-n+9),
  .sequencer-drawer[data-page="1"] .sequence-step:nth-child(n+2):nth-child(-n+9) { display: none; }
}

@media (max-width: 620px) {
  .topbar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px 10px; }
  .brand { grid-column: 1 / -1; padding-right: 50px; min-width: 0; }
  .badge { position: absolute; top: 18px; right: 10px; }
  .badge span { display: none; }
  .icon-button { width: 100%; padding-inline: 9px; font-size: .72rem; }
  .connection-panel { grid-template-columns: minmax(0, 1fr); }
  .connection-panel > *, .connection-copy, .preview-toggle, #connectionMessage, .midi-out-wrap { grid-column: 1; width: 100%; }
  .midi-out { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { grid-template-columns: 1fr; padding: 12px; }
  .rhythm-buttons { grid-template-columns: repeat(2, 1fr); }
  .demo-copy, .rhythm-buttons, #rhythmStatus { grid-column: auto; }
  main { padding: 8px; }
}

/* Shared site footer (matches bashery.app) - a punchy lime block with neo-brutalist chip links. */
.footer {
  border-top: 3px solid #1c1c1c; background: #0b0b0b; color: #c7c1b3;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.1rem 1.5rem;
  padding: 2.4rem 1.5rem;
}
.footer__brand { display: flex; flex-direction: column; gap: .35rem; }
.footer__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Anton', system-ui, sans-serif; font-size: 1.6rem; color: #fff; letter-spacing: 1.5px; text-decoration: none; }
.footer__logo img { width: 1.5rem; height: 1.5rem; display: block; }
.footer__note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .82rem; color: #7a766c; }
.footer__links { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.footer__link {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: .82rem; letter-spacing: .03em;
  color: #000; text-decoration: none; background: #ece5d3;
  border: 3px solid #000; padding: .5rem .9rem; box-shadow: 3px 3px 0 rgba(255,255,255,.14);
  transition: transform .1s ease, box-shadow .1s ease;
}
.footer__link:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(255,255,255,.22); color: #000; }
.footer__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(255,255,255,.14); }
.footer__link--discord { background: #ff2e88; color: #fff; }
@media (max-width: 560px) { .footer { flex-direction: column; text-align: center; } .footer__brand { align-items: center; } }