@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=Orbitron:wght@600;700;800;900&family=Righteous&family=Share+Tech+Mono&display=swap');

/* ==========================================================================
   OP-1 Field Skeuomorphic Button Styling for Roland TR-808 AI
   Faithfully inspired by the OP-1 Field hardware chiclet keys:
   - Multi-layer top rim specular highlights
   - Tactile bottom bevel inner shadows (3D keycap thickness)
   - Soft physical drop shadows casting onto chassis
   - Tactile plunge on :active with top inward shadow
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The 16 Step Sequencer Chiclet Buttons
   -------------------------------------------------------------------------- */
.op1-808-step-btn {
  border-radius: 5px !important;
  position: relative !important;
  transition: transform 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 70ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-width: 1px !important;
  border-style: solid !important;
  overflow: hidden !important;
  cursor: pointer !important;

  /* Default Chiclet Shadow Stack:
     1) Soft drop shadow onto chassis
     2) Secondary ambient contact shadow
     3) Top specular rim highlight
     4) Left specular highlight
     5) Right subtle shade
     6) Bottom inner bevel (3D key thickness)
  */
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.55),
    0 2px 4px -1px rgba(0, 0, 0, 0.35),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.5),
    inset 1px 0 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 1px 0 rgba(0, 0, 0, 0.22),
    inset 0 -2.5px 2px 0 rgba(0, 0, 0, 0.38) !important;
}

/* Surface light gradient overlay across top half of key */
.op1-808-step-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 70%, transparent 100%);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Tactile Key Plunge on :active (like OP-1 mechanical switch) */
.op1-808-step-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 2.5px 4px 0 rgba(0, 0, 0, 0.5),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Step Color Variants - Preserving original 808 colors with calibrated lighting */
/* Steps 1-4: 808 Red */
.op1-808-step-btn.bg-808-red {
  border-color: rgba(140, 24, 18, 0.75) !important;
}
.op1-808-step-btn.bg-808-red:not([class*="brightness-"]):hover {
  filter: brightness(1.08) !important;
}

/* Steps 5-8: 808 Orange */
.op1-808-step-btn.bg-808-orange {
  border-color: rgba(180, 75, 0, 0.75) !important;
}
.op1-808-step-btn.bg-808-orange:not([class*="brightness-"]):hover {
  filter: brightness(1.08) !important;
}

/* Steps 9-12: 808 Yellow */
.op1-808-step-btn.bg-808-yellow {
  border-color: rgba(180, 160, 0, 0.75) !important;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.45),
    0 2px 4px -1px rgba(0, 0, 0, 0.25),
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 1px 0 rgba(0, 0, 0, 0.15),
    inset 0 -2.5px 2px 0 rgba(0, 0, 0, 0.32) !important;
}
.op1-808-step-btn.bg-808-yellow:not([class*="brightness-"]):hover {
  filter: brightness(1.06) !important;
}

/* Steps 13-16: 808 White / Cream Chiclet */
.op1-808-step-btn.bg-808-white {
  border-color: #cbd2d9 !important;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.22),
    inset 0 1.5px 1.5px 0 #ffffff,
    inset 1px 0 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px 0 1px 0 rgba(0, 0, 0, 0.15),
    inset 0 -2.5px 2.5px 0 rgba(0, 0, 0, 0.25) !important;
}
.op1-808-step-btn.bg-808-white:not([class*="brightness-"]):hover {
  filter: brightness(1.04) !important;
}

/* Active Playhead Cursor Illuminated Halo */
.op1-808-step-btn.is-current-step {
  box-shadow: 
    0 0 14px 1px rgba(255, 140, 0, 0.85),
    0 4px 6px -1px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2.5px 2px 0 rgba(0, 0, 0, 0.38) !important;
  outline: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: -1px;
}

/* Inactive / Dimmed Steps - preserve tactile bevel while dimmed */
.op1-808-step-btn[class*="brightness-[0.4]"] {
  border-color: rgba(0, 0, 0, 0.5) !important;
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.45),
    0 1px 3px -1px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 2px 0 rgba(0, 0, 0, 0.45) !important;
}

/* --------------------------------------------------------------------------
   2. Transport Buttons (START / STOP & TAP)
   -------------------------------------------------------------------------- */
.op1-808-transport-btn {
  border-radius: 7px !important;
  background: linear-gradient(180deg, #dfd8a4 0%, #d4cd96 55%, #c5be87 100%) !important;
  border: 1px solid #9b956a !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 70ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.45),
    0 2px 4px -1px rgba(0, 0, 0, 0.25),
    inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 1px 0 rgba(0, 0, 0, 0.15),
    inset 0 -2.5px 2px 0 rgba(0, 0, 0, 0.28) !important;
}

.op1-808-transport-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

.op1-808-transport-btn:hover {
  filter: brightness(1.04);
}

.op1-808-transport-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 2.5px 4px 0 rgba(0, 0, 0, 0.4),
    inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   3. Function Buttons (AI GEN & SAVE)
   -------------------------------------------------------------------------- */
.op1-808-gen-btn {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #ea580c 0%, #c2410c 55%, #9a3412 100%) !important;
  border: 1px solid #7c2d12 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 70ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.5),
    0 1px 3px -1px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.op1-808-gen-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  border-radius: 5px 5px 0 0;
  pointer-events: none;
}

.op1-808-gen-btn:hover {
  filter: brightness(1.1);
}

.op1-808-gen-btn:active {
  transform: translateY(1.5px) !important;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 2px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

.op1-808-save-btn {
  border-radius: 6px !important;
  background: linear-gradient(180deg, #4b5563 0%, #374151 55%, #1f2937 100%) !important;
  border: 1px solid #111827 !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 70ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 70ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.5),
    0 1px 3px -1px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.op1-808-save-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  border-radius: 5px 5px 0 0;
  pointer-events: none;
}

.op1-808-save-btn:hover {
  filter: brightness(1.1);
}

.op1-808-save-btn:active {
  transform: translateY(1.5px) !important;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 2px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

/* --------------------------------------------------------------------------
   4. Instrument Row Buttons (BD, SD, LT, etc.) - Compact 50% Width
   -------------------------------------------------------------------------- */
.op1-808-inst-btn {
  border-radius: 3px !important;
  padding: 2px 0 !important;
  text-align: center !important;
  transition: all 70ms ease !important;
}

.op1-808-inst-btn.is-selected {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.op1-808-inst-btn:active {
  transform: scale(0.94);
}


/* ==========================================================================
   Standard Mobile Target Hotspot Height: 24px (48px Retina)
   ========================================================================== */
.op1-808-step-btn {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.op1-808-inst-btn {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9px !important;
  width: 24px !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   Mobile vs Desktop Knobs Drawer Behavior & Collision Prevention
   ========================================================================== */
/* Desktop (>= 768px): Hide mobile toggle completely, always show voice knobs deck */
@media (min-width: 768px) {
  .op1-808-knobs-toggle {
    display: none !important;
  }
  .op1-808-knobs-deck {
    display: flex !important;
  }
}

/* Mobile (< 768px): Show toggle button cleanly without collisions, collapse/expand deck */
@media (max-width: 767px) {
  .op1-808-knobs-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 6px 10px !important;
    background: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #e5e7eb !important;
    font-family: monospace !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: normal !important;
  }
  .op1-808-toggle-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .op1-808-toggle-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  .op1-808-toggle-action {
    color: #f97316 !important;
    font-weight: 700 !important;
    font-size: 10px !important;
  }
  .op1-808-knobs-deck.is-collapsed {
    display: none !important;
  }
  .op1-808-knobs-deck.is-expanded {
    display: flex !important;
  }
}


/* --------------------------------------------------------------------------
   Tight 1-Row Transport Controls on Mobile & Desktop
   -------------------------------------------------------------------------- */
.op1-808-transport-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 6px 8px !important;
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.op1-808-tempo-display {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d0d0d !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  min-width: 42px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

.op1-808-tempo-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 7px !important;
  color: #6b7280 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
}

.op1-808-tempo-digits {
  font-family: 'Orbitron', 'Share Tech Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ef4444 !important;
  line-height: 1.1 !important;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.6) !important;
}

.op1-808-transport-row .op1-808-transport-btn {
  height: 32px !important;
  flex: 1 1 0 !important;
  max-width: 64px !important;
  min-width: 44px !important;
  padding: 0 4px !important;
}

/* --------------------------------------------------------------------------
   Authentic Roland TR-808 Header Typography
   -------------------------------------------------------------------------- */
.roland-header-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.roland-logo-img {
  height: 24px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
}

.roland-subline-container {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-top: 2px !important;
}

.roland-rhythm-composer {
  font-family: 'Righteous', 'Orbitron', cursive, sans-serif !important;
  font-size: 11px !important;
  color: #f97316 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

.roland-tr-808 {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  color: #ffffff !important;
  letter-spacing: 0.08em !important;
}

.roland-computer-controlled {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 7px !important;
  color: #9ca3af !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}


/* ==========================================================================
   V4 Refinements:
   1. Left-aligned "Rhythm Composer TR 808" on one line, aligned with Roland logo
   2. White tempo text (digits + labels)
   3. Full-bleed drum machine body on mobile + exact 16px edge-to-button spacing
   ========================================================================== */
.roland-header-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
}

.roland-logo-img {
  height: 26px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.roland-subline-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.roland-rhythm-composer {
  font-family: 'Righteous', 'Orbitron', cursive, sans-serif !important;
  font-size: 13px !important;
  color: #f97316 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.1 !important;
}

.roland-tr-808 {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #ffffff !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
}

/* White Tempo Text */
.op1-808-tempo-label {
  color: #ffffff !important;
  opacity: 0.85 !important;
}

.op1-808-tempo-digits {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

.op1-808-tempo-knob-wrap span {
  color: #ffffff !important;
}

/* Mobile Full-Bleed Chassis & Exact 16px Button-to-Screen-Edge Spacing */
@media (max-width: 767px) {
  .op1-808-page-wrap {
    padding: 0 !important;
    background: #222222 !important;
  }

  .op1-808-chassis {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .op1-808-top-panel {
    padding: 12px 16px !important;
    box-sizing: border-box !important;
  }

  .op1-808-seq-panel {
    padding: 10px 16px 16px 16px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .op1-808-seq-inner {
    min-width: 0 !important;
    width: 100% !important;
  }

  .op1-808-step-header,
  .op1-808-seq-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 4px !important;
  }

  .op1-808-inst-btn {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .op1-808-step-header > div:first-child {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }
}


/* ==========================================================================
   V5 Refinements:
   1. +16px padding below "Rhythm Composer TR 808" and below expand row on all devices
   2. Same color and font for "Rhythm Composer TR 808"
   3. TAP and START buttons placed next to each other with 16px gap
   4. Mobile expand row: simple grey text "Expand volume levels" + chevron, no box
   5. Mobile expanded knobs: reduced diameter so they don't collide
   ========================================================================== */
.roland-header-block {
  padding-bottom: 16px !important;
}

.roland-rhythm-composer,
.roland-tr-808 {
  font-family: 'Righteous', 'Orbitron', cursive, sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #f97316 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.1 !important;
}

/* TAP and START next to each other with 16px between them */
.op1-808-transport-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: auto !important;
}

.op1-808-transport-btns .op1-808-transport-btn {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  height: 32px !important;
  flex: 0 0 62px !important;
}

/* Mobile Expand Row & Reduced-Diameter Non-Colliding Knobs */
@media (max-width: 767px) {
  .op1-808-knobs-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    margin: 4px 0 0 0 !important;
    padding: 0 0 16px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    outline: none !important;
  }

  .op1-808-toggle-text {
    color: #9ca3af !important;
  }

  .op1-808-toggle-chevron {
    color: #9ca3af !important;
    transition: transform 150ms ease !important;
    flex-shrink: 0 !important;
  }

  .op1-808-toggle-chevron.is-open {
    transform: rotate(180deg) !important;
  }

  /* Reduce knob diameter inside the expanded mobile voice deck so 16 columns never collide */
  .op1-808-knobs-deck {
    padding: 8px 12px !important;
    overflow-x: hidden !important;
  }

  .op1-808-knobs-deck > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Hide the 48px outer tick ring on mobile so rings don't overlap across 21px columns */
  .op1-808-knobs-deck .pointer-events-none[style*="width"] {
    display: none !important;
  }

  /* Reduce the knob circle diameter from 32px (w-8 h-8) to 15px on mobile */
  .op1-808-knobs-deck .w-8.h-8 {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    border-width: 1.5px !important;
  }

  /* Compact vertical spacing inside each voice channel strip on mobile */
  .op1-808-knobs-deck .gap-6 {
    gap: 8px !important;
  }

  .op1-808-knobs-deck .h-10 {
    height: 24px !important;
  }

  .op1-808-knobs-deck span {
    font-size: 6.5px !important;
    letter-spacing: -0.04em !important;
  }
}


/* ==========================================================================
   V6 Refinements:
   1. +16px padding below the Roland logo on all devices
   2. Remove dark black div housing the tempo text on all devices
   3. Remove tick marks around tempo control knob on all devices
   4. Remove 'TEMPO' label below tempo knob; match height (32px) of tempo knob,
      BPM/metric text, and TAP/START buttons in the transport row
   5. On mobile, center 'Expand volume levels' vertically in its div area and
      shorten that div by 16px
   ========================================================================== */

/* 1. 16px padding below the Roland logo on all devices */
.roland-header-block {
  gap: 0 !important;
  padding-bottom: 16px !important;
}

.roland-logo-img {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.roland-subline-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2, 3, 4. Transport row: no tick marks on tempo knob, no 'TEMPO' label,
   no black box around BPM text, and uniform 32px height across knob, BPM text, and buttons */
.op1-808-transport-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  background: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.op1-808-tempo-knob-wrap {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.op1-808-tempo-knob-wrap > div {
  height: 32px !important;
  gap: 0 !important;
  justify-content: center !important;
}

/* Hide tick marks around tempo knob on all devices so it never collides with grey box */
.op1-808-tempo-knob-wrap .pointer-events-none[style*="width"] {
  display: none !important;
}

/* Hide redundant TEMPO label below tempo knob if present */
.op1-808-tempo-knob-wrap span {
  display: none !important;
}

/* Tempo knob circle: exact 32px height & width */
.op1-808-tempo-knob-wrap .w-8.h-8 {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

/* Remove dark black div housing the tempo text on all devices & match 32px height */
.op1-808-tempo-display {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.op1-808-tempo-label {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  line-height: 9px !important;
  color: #ffffff !important;
  opacity: 0.85 !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.op1-808-tempo-digits {
  font-family: 'Orbitron', 'Share Tech Mono', monospace !important;
  font-size: 19px !important;
  line-height: 19px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* 5. Mobile: shorten top div by 16px and vertically center 'Expand volume levels' in its space */
@media (max-width: 767px) {
  .op1-808-top-panel {
    padding: 12px 16px 12px 16px !important;
    gap: 12px !important;
  }

  .op1-808-knobs-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 18px !important;
    line-height: 18px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}


/* ==========================================================================
   V7 Refinements:
   1. Equal horizontal spacing (16px) on the left and right of "120" BPM
      before the TAP button across all devices.
   2. Full-bleed edge-to-edge dark grey drum machine chassis on all devices
      (including iPad landscape & desktop) with no outer black frame.
   3. Squeezed vertical proportions & tighter vertical spacing between
      colored sequence buttons on desktop/iPad so 100% of the drum machine
      fits on an iPad screen in landscape orientation (e.g. 1024x768) without
      scrolling.
   ========================================================================== */

/* 1. Equal padding/gap (16px) to the left and right of "120" BPM on all devices */
.op1-808-transport-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 8px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.op1-808-tempo-knob-wrap,
.op1-808-tempo-display,
.op1-808-transport-btns {
  flex-shrink: 0 !important;
}

.op1-808-transport-btns {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: 0 !important;
}

.op1-808-transport-btns .op1-808-transport-btn {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 32px !important;
  flex: 0 0 58px !important;
}

/* Mobile (< 768px): Right-align START button inside the transport box with 16px
   to the right of START, and TAP hugging START with 16px between them */
@media (max-width: 767px) {
  .op1-808-transport-row {
    padding: 8px 16px 8px 10px !important;
  }

  .op1-808-transport-btns {
    margin-left: auto !important;
    gap: 16px !important;
  }
}

/* 2. Full-bleed dark grey drum machine chassis across all devices (no black frame) */
html, body, #root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: #222222 !important;
  display: flex !important;
  flex-direction: column !important;
}

.op1-808-page-wrap {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #222222 !important;
}

.op1-808-chassis {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.op1-808-chassis > div:nth-child(3) {
  flex: 0 0 auto !important;
}

.op1-808-chassis > .absolute.rounded-full {
  display: none !important;
}

/* 3. Desktop & iPad Landscape (>= 768px): Fit 100% on iPad landscape (1024x768) */
@media (min-width: 768px) {
  html, body, #root, .op1-808-page-wrap {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .op1-808-chassis {
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  /* Top section (Logo/Transport + 16 Voice Knob Strips) */
  .op1-808-top-panel {
    width: 284px !important;
    min-width: 284px !important;
    max-width: 284px !important;
    padding: 12px 14px !important;
    gap: 8px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .roland-header-block {
    padding-bottom: 8px !important;
  }

  .roland-logo-img {
    height: 24px !important;
    margin: 0 0 16px 0 !important;
  }

  .op1-808-knobs-deck {
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  .op1-808-knobs-deck > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .op1-808-knobs-deck .py-2 {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }

  .op1-808-knobs-deck .pt-2 {
    padding-top: 4px !important;
  }

  .op1-808-knobs-deck .gap-6 {
    gap: 10px !important;
  }

  .op1-808-knobs-deck .h-10 {
    height: 34px !important;
    min-height: 34px !important;
  }

  /* Keep each label (LEV, TONE, DEC, SNAP) tight to its own knob (2px) and
     well-separated (10px) from the next knob below it */
  .op1-808-knobs-deck .gap-1 {
    gap: 2px !important;
  }

  .op1-808-knobs-deck .gap-1 > span {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: block !important;
  }

  /* 24px (48px Retina) diameter voice knobs on desktop and iPad */
  .op1-808-knobs-deck .w-8.h-8 {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .op1-808-knobs-deck .pointer-events-none[style*="width"] {
    display: none !important;
  }

  /* Bottom Sequencer section: squeezed vertical padding between colored sequence buttons */
  .op1-808-seq-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px 16px 10px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .op1-808-seq-inner {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 2px !important;
  }

  .op1-808-step-header {
    padding: 0 !important;
    margin: 0 0 2px 0 !important;
    gap: 6px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .op1-808-step-header > div:first-child {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
  }

  .op1-808-seq-row {
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    width: 100% !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   V11 Sequencer Button Proportions, 2px Grid Gaps, 50% Inner Shadow/Highlight
   Distance, +2px Button Height (26px), and 8px Horizontal Row/Edge Margins
   ========================================================================== */

.op1-808-step-btn,
.op1-808-step-btn.bg-808-red,
.op1-808-step-btn.bg-808-orange,
.op1-808-step-btn.bg-808-yellow,
.op1-808-step-btn.bg-808-white,
.op1-808-step-btn[class*="brightness-[0.4]"] {
  height: 100% !important;
  min-height: 26px !important;
  max-height: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
  border-style: solid !important;
  outline: none !important;
  transform: none !important;
}

.op1-808-step-btn {
  /* 2. Decrease inner shadow and inner highlight distance by 50% (identical geometry selected & unselected) */
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.52),
    0 1.5px 3px -1px rgba(0, 0, 0, 0.32),
    inset 0 0.75px 0.5px 0 rgba(255, 255, 255, 0.5),
    inset 0.5px 0 0.5px 0 rgba(255, 255, 255, 0.18),
    inset -0.5px 0 0.5px 0 rgba(0, 0, 0, 0.22),
    inset 0 -1.25px 1px 0 rgba(0, 0, 0, 0.38) !important;
}

.op1-808-step-btn:active {
  transform: none !important;
  box-shadow: 
    0 1px 2px 0 rgba(0, 0, 0, 0.6),
    inset 0 1.25px 2px 0 rgba(0, 0, 0, 0.5),
    inset 0 -0.5px 0.5px 0 rgba(255, 255, 255, 0.12) !important;
}

.op1-808-step-btn.bg-808-yellow {
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.42),
    0 1.5px 3px -1px rgba(0, 0, 0, 0.22),
    inset 0 0.75px 0.75px 0 rgba(255, 255, 255, 0.8),
    inset 0.5px 0 0.5px 0 rgba(255, 255, 255, 0.3),
    inset -0.5px 0 0.5px 0 rgba(0, 0, 0, 0.15),
    inset 0 -1.25px 1px 0 rgba(0, 0, 0, 0.32) !important;
}

.op1-808-step-btn.bg-808-white {
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.38),
    0 1.5px 3px -1px rgba(0, 0, 0, 0.2),
    inset 0 0.75px 0.75px 0 #ffffff,
    inset 0.5px 0 0.5px 0 rgba(255, 255, 255, 0.5),
    inset -0.5px 0 0.5px 0 rgba(0, 0, 0, 0.15),
    inset 0 -1.25px 1.25px 0 rgba(0, 0, 0, 0.25) !important;
}

.op1-808-step-btn[class*="brightness-[0.4]"] {
  border-color: rgba(0, 0, 0, 0.45) !important;
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.52),
    0 1.5px 3px -1px rgba(0, 0, 0, 0.32),
    inset 0 0.75px 0.5px 0 rgba(255, 255, 255, 0.35),
    inset 0.5px 0 0.5px 0 rgba(255, 255, 255, 0.15),
    inset -0.5px 0 0.5px 0 rgba(0, 0, 0, 0.22),
    inset 0 -1.25px 1px 0 rgba(0, 0, 0, 0.38) !important;
}

.op1-808-step-btn.is-current-step {
  outline: none !important;
  box-shadow: 
    0 3px 5px -1px rgba(0, 0, 0, 0.52),
    0 1.5px 3px -1px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0.75px 0.5px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1.25px 1px 0 rgba(0, 0, 0, 0.38) !important;
}

.op1-808-inst-btn,
.op1-808-inst-btn.is-selected {
  height: 100% !important;
  min-height: 26px !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  transform: none !important;
}

.op1-808-inst-btn.is-selected {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* 3. Sequencer section fills remaining viewport height across iPhone & iPad
      with 2px button gaps, 8px horizontal margins, and exact 24px bottom padding
      below the bottom row of sequencer buttons */
.op1-808-seq-panel {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  padding: 6px 8px 24px 8px !important;
  box-sizing: border-box !important;
}

.op1-808-seq-inner {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.op1-808-step-header {
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}

.op1-808-seq-row {
  flex: 1 1 0 !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important;
}

.op1-808-step-header > div:last-child {
  gap: 2px !important;
}

.op1-808-seq-row > div:last-child {
  display: flex !important;
  align-items: stretch !important;
  gap: 2px !important;
}

@media (max-width: 767px) {
  .op1-808-top-panel {
    padding: 36px 16px 10px 16px !important;
    gap: 10px !important;
  }

  .op1-808-seq-panel {
    padding: 6px 8px 24px 8px !important;
  }
}

@media (min-width: 768px) {
  .op1-808-seq-panel {
    padding: 6px 8px 24px 8px !important;
  }
}