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

    /* Piano keyboard */
    .piano-wrapper {
      background: linear-gradient(135deg, #e5e7eb 0%, #e5e7eb 100%); 
      border-radius: 0.75rem;
      padding: 2rem 1.5rem;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -webkit-user-select: none;
      user-select: none;
    }

    .piano-keyboard {
      display: flex;
      position: relative;
      width: 800px; 
      height: 220px;
      margin: 0 auto;
      touch-action: pan-x;
    }

    /* Landscape banner */
    .landscape-banner {
      background: #fefce8;
      border: 1px solid #fde68a;
      border-radius: 0.5rem;
      padding: 8px 14px;
      font-size: 0.75rem;
      color: #92400e;
      text-align: center;
      margin-bottom: 12px;
      display: none;
    }
    @media (max-width: 640px) and (orientation: portrait) {
      .landscape-banner { display: block; }
    }

    /* White keys */
    .key {
      position: relative;
      background: #fff;
      border: 2px solid #374151;
      border-radius: 0 0 4px 4px;
      cursor: pointer;
      transition: all 0.05s;
      user-select: none;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      padding-bottom: 0.5rem;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
    }

    .key.white {
      width: 50px;
      height: 220px;
      z-index: 1;
      margin-right: -2px; /* overlap borders */
    }

    .key.white:hover {
      background: #f3f4f6;
    }

    .key.white.active {
      background: #d1d5db;
      transform: translateY(2px);
    }

    /* Black keys */
    .key.black {
      position: absolute;
      width: 30px;
      height: 140px;
      background: #111827;
      border: 2px solid #000;
      z-index: 2;
      border-radius: 0 0 3px 3px;
      padding-top: 0.75rem;
    }

    .key.black:hover {
      background: #1f2937;
    }

    .key.black.active {
      background: #374151;
      transform: translateY(2px);
    }

    .key .label {
      font-size: 0.6rem;
      font-weight: 600;
      color: #6b7280;
      margin-top: auto;
      line-height: 1;
      padding: 0 2px;
      pointer-events: none;
    }

    .key.black .label {
      color: #9ca3af;
      font-size: 0.55rem;
    }

    .key .note-name {
      font-size: 0.55rem;
      color: #9ca3af;
      margin-bottom: 0.4rem;
      line-height: 1;
      padding: 0 2px;
      pointer-events: none;
    }

    .key.black .note-name {
      color: #6b7280;
      font-size: 0.5rem;
      margin-bottom: 0.3rem;
    }

    /* Position black keys between white keys */
    .black-1 { left: 35px; }   
    .black-2 { left: 85px; }   
    .black-3 { left: 185px; }  
    .black-4 { left: 235px; }  
    .black-5 { left: 285px; }  
    .black-6 { left: 385px; }  
    .black-7 { left: 435px; }  
    .black-8 { left: 535px; }  
    .black-9 { left: 585px; }  
    .black-10 { left: 635px; } 

    /* Mobile portrait - 1 octave */
    @media (max-width: 640px) {
      .piano-keyboard {
        width: 400px;
        height: 200px;
      }
      
      .key.white {
        width: 50px;
        height: 200px;
      }
      
      .key.black {
        height: 130px;
      }

      /* Hide second octave on mobile portrait */
      .key.octave-5 {
        display: none;
      }

      .piano-wrapper {
        padding: 1.5rem 1rem;
      }
    }

    /* Mobile landscape - 2 octaves */
    @media (max-width: 640px) and (orientation: landscape) {
      .piano-keyboard {
        width: 800px;
        height: 180px;
      }
      
      .key.white {
        width: 50px;
        height: 180px;
      }
      
      .key.black {
        height: 120px;
      }

      /* Show second octave in landscape */
      .key.octave-5 {
        display: flex;
      }
    }

    /* Tablet and up - 2 octaves */
    @media (min-width: 641px) {
      .key.octave-5 {
        display: flex;
      }
    }



/* Performance optimization: reduce motion on mobile */
    @media (prefers-reduced-motion: reduce) {
      .key {
        transition: none;
      }
    }

    #enableSoundBtn {
      animation: pulseEnableBtn 1.6s ease-in-out infinite;
      position: relative;
    }

    #enableSoundBtn.sound-active {
      animation: none !important;
      border-color: #059669 !important;
      background: #d1fae5 !important;
      color: #065f46 !important;
    }

    @keyframes pulseEnableBtn {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
        transform: scale(1.04);
      }
    }