body { font-family: Inter, sans-serif; background: #f9fafb; }

    .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);
    }

    /* ── UKULELE BODY ── */
    .uke-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }

    .uke-body {
      position: relative;
      width: 260px;
      background: linear-gradient(160deg, #c8860a, #8B5E0A 40%, #6b4800 70%, #8B5E0A);
      border-radius: 48% 48% 44% 44% / 40% 40% 60% 60%;
      box-shadow:
        inset -6px 0 18px rgba(0,0,0,0.35),
        inset 4px 0 10px rgba(255,200,80,0.15),
        0 8px 32px rgba(0,0,0,0.25);
      padding-bottom: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* wood grain lines */
    .uke-body::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      background: repeating-linear-gradient(
        170deg,
        transparent,
        transparent 18px,
        rgba(0,0,0,0.06) 18px,
        rgba(0,0,0,0.06) 19px
      );
      pointer-events: none;
    }

    /* Sound hole */
    .uke-hole {
      width: 70px; height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle, #1a0e00 60%, #2d1a00);
      border: 4px solid #5a3800;
      box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.4);
      margin: 1.5rem auto 1rem;
      position: relative;
      z-index: 1;
    }

    /* Decorative rosette ring */
    .uke-hole::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 3px solid rgba(255,180,40,0.4);
      box-shadow: 0 0 0 2px rgba(180,120,0,0.3);
    }

    /* Strings area */
    .uke-strings-area {
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 0 30px;
      box-sizing: border-box;
      z-index: 2;
    }

    .uke-string-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      position: relative;
    }

    .uke-string {
      width: 3px;
      border-radius: 2px;
      transition: filter 0.1s;
      position: relative;
    }

    .uke-string-col:nth-child(1) .uke-string { background: linear-gradient(to bottom, #e8d8b0, #c9b882); height: 160px; width: 2px; }
    .uke-string-col:nth-child(2) .uke-string { background: linear-gradient(to bottom, #f0e0b8, #d4c090); height: 160px; width: 2.5px; }
    .uke-string-col:nth-child(3) .uke-string { background: linear-gradient(to bottom, #d0c090, #b8a870); height: 160px; width: 3px; }
    .uke-string-col:nth-child(4) .uke-string { background: linear-gradient(to bottom, #e8d8b0, #c9b882); height: 160px; width: 2px; }

    .uke-string-col.plucked .uke-string {
      animation: stringVibrate 0.4s ease-out;
    }

    @keyframes stringVibrate {
      0%  { transform: translateX(0); filter: brightness(1.8) drop-shadow(0 0 4px #ffe080); }
      15% { transform: translateX(4px); }
      30% { transform: translateX(-3px); }
      45% { transform: translateX(2px); }
      60% { transform: translateX(-1px); }
      100%{ transform: translateX(0); filter: brightness(1); }
    }

    .string-label {
      font-size: 0.65rem;
      font-weight: 700;
      color: rgba(255,230,150,0.9);
      margin-bottom: 4px;
      letter-spacing: 0.05em;
    }

    /* Hit zone overlay for each string */
    .uke-string-col::after {
      content: '';
      position: absolute;
      inset: -6px -8px;
      z-index: 5;
    }

    /* ── NECK ── */
    .uke-neck {
      width: 80px;
      background: linear-gradient(to bottom, #7a4f0d, #5c3a08, #7a4f0d);
      border-radius: 4px 4px 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding: 0 8px 0;
      box-shadow: -3px 0 8px rgba(0,0,0,0.3), 3px 0 8px rgba(0,0,0,0.3);
    }

    .uke-nut {
      width: 100%;
      height: 6px;
      background: linear-gradient(to bottom, #f5f0e0, #d4cdb0);
      border-radius: 2px;
      margin-bottom: 2px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* Frets */
    .uke-fret-row {
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
      height: 28px;
    }
    .uke-fret-row::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(to right, #888, #ccc, #888);
      border-radius: 1px;
    }

    /* Fret strings on neck */
    .fret-string {
      position: absolute;
      top: 0; bottom: 0;
      width: 1.5px;
      background: rgba(200,170,100,0.5);
    }
    .fret-string:nth-child(1) { left: 20%; }
    .fret-string:nth-child(2) { left: 40%; }
    .fret-string:nth-child(3) { left: 60%; }
    .fret-string:nth-child(4) { left: 80%; }

    /* Fret dots */
    .fret-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,220,120,0.6);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }

    /* ── HEADSTOCK ── */
    .uke-headstock {
      width: 70px;
      background: linear-gradient(to bottom, #5c3a08, #3d2505);
      border-radius: 8px 8px 0 0;
      padding: 8px 4px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
    }

    .tuning-peg-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .tuning-peg {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #d4af37, #8b6914);
      box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }

    /* ── STRUM ZONE ── */
    .strum-zone {
      width: 260px;
      height: 70px;
      border: 2px dashed #d1d5db;
      border-radius: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      margin-top: 1rem;
      position: relative;
      overflow: hidden;
    }
    .strum-zone:hover { border-color: #059669; background: #f0fdf4; }
    .strum-zone.strumming { border-color: #059669; background: #ecfdf5; }
    .strum-zone p { font-size: 0.8rem; color: #9ca3af; font-weight: 500; pointer-events: none; }

    .strum-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(5,150,105,0.2);
      transform: scale(0);
      animation: ripple 0.5s ease-out forwards;
    }
    @keyframes ripple {
      to { transform: scale(4); opacity: 0; }
    }

    /* ── CHORD GRID ── */
    .chord-btn {
      padding: 0.35rem 0.6rem;
      border-radius: 0.5rem;
      border: 1.5px solid #e5e7eb;
      background: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, transform 0.1s;
      color: #374151;
      text-align: center;
    }
    .chord-btn:hover  { border-color: #059669; background: #f0fdf4; color: #065f46; }
    .chord-btn.active { background: #059669; border-color: #059669; color: #fff; transform: scale(0.97); }

    /* ── CHORD DIAGRAM ── */
    .chord-diagram {
      display: inline-block;
    }
    .chord-diagram canvas {
      border-radius: 0.5rem;
    }

    /* ── CONTROLS ── */
    .mode-pill {
      padding: 0.3rem 0.85rem;
      border-radius: 999px;
      border: 1.5px solid #e5e7eb;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      background: #fff;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .mode-pill.on { background: #059669; border-color: #059669; color: #fff; }

    .key-pill {
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      background: #fff;
      transition: background 0.15s, border-color 0.15s;
    }
    .key-pill.on { background: #ecfdf5; border-color: #059669; color: #065f46; }

    input[type=range] { accent-color: #059669; }

    /* Keyboard hint badges */
    .kbd {
      display: inline-block;
      background: #f3f4f6;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      padding: 1px 5px;
      font-size: 0.65rem;
      font-weight: 600;
      color: #6b7280;
      font-family: monospace;
    }