body { font-family: Inter, sans-serif; }
    .tool-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
    }

    /* Drum canvas */
    .drum-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
    .drum-canvas {
      touch-action: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .drum-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: #6b7280;
      text-transform: uppercase;
      margin-top: 6px;
    }

    /* Bol buttons */
    .bol-btn {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 10px 14px;
      border-radius: 0.5rem;
      border: 1px solid #e5e7eb;
      background: #fff;
      cursor: pointer;
      transition: all 0.12s;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .bol-btn:active, .bol-btn.lit {
      transform: scale(0.93);
    }
    .bol-btn .bol-name {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
    }
    .bol-btn .bol-hint {
      font-size: 0.6rem;
      color: #9ca3af;
      font-weight: 400;
    }

    /* Pattern builder */
    .pattern-cell {
      width: 36px;
      height: 36px;
      border-radius: 0.375rem;
      border: 1.5px solid #e5e7eb;
      background: #f9fafb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.12s;
      color: #9ca3af;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .pattern-cell.filled {
      background: #d1fae5;
      border-color: #10b981;
      color: #065f46;
    }
    .pattern-cell.playing {
      background: #10b981;
      color: #fff;
      border-color: #059669;
      box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    }

    /* Beat indicator */
    .beat-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #e5e7eb;
      transition: background 0.05s;
    }
    .beat-dot.active { background: #10b981; }

    /* Ripple */
    .tap-ripple {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 50;
      animation: tapRip 0.4s ease-out forwards;
    }
    @keyframes tapRip {
      from { transform: scale(0); opacity: 0.8; }
      to   { transform: scale(4); opacity: 0; }
    }

    tbody tr:nth-child(even) { background: #f9fafb; }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(6px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .fade-up { animation: fadeUp 0.3s ease-out; }