:root {
    --md-sys-primary: 109, 194, 255;  /* #6dc2ff Light Blue */
    --md-sys-on-primary: 0, 0, 0;
    --md-sys-primary-container: 0, 94, 173; /* #005ead Darker Blue Container */
    --md-sys-on-primary-container: 255, 255, 255;
    --md-sys-secondary: 255, 217, 30;    /* #ffd91e */
    --md-sys-on-secondary: 0, 0, 0;
    --md-sys-secondary-container: 255, 223, 0;  /* #ffdf00 */
    --md-sys-on-secondary-container: 0, 0, 0;
    --md-sys-tertiary: 102, 203, 197;   /* #66cbc5 */
    --md-sys-on-tertiary: 0, 50, 41;
    --md-sys-tertiary-container: 0, 105, 92; /* #00695c */
    --md-sys-on-tertiary-container: 255, 255, 255;
    --md-sys-surface: 24, 24, 24;  /* Darker Surface */
    --md-sys-on-surface: 230, 230, 230;
    --md-sys-surface-variant: 48, 48, 48;  /* Darker Surface Variant */
    --md-sys-on-surface-variant: 26, 26, 26;
    --md-sys-background: 24, 24, 24;  /* Darker Background */
    --md-sys-on-background: 230, 230, 230;
    --md-sys-error: 255, 180, 170;
    --md-sys-on-error: 105, 0, 5;
    --md-sys-error-container: 244, 67, 54;
    --md-sys-on-error-container: 255, 224, 229;
    --md-sys-outline: 119, 119, 119;
    --md-sys-inverse-surface: 255, 255, 255;
    --md-sys-inverse-on-surface: 0, 0, 0;
    --md-sys-inverse-primary: 153, 204, 255;
    --md-sys-shadow: 0, 0, 0;
    --md-sys-surface-tint: 255, 255, 255;
    --md-sys-outline-variant: 80, 80, 80;
    --md-sys-scrim: 0, 0, 0;

    --md-display-large: 57px;
    --md-display-medium: 45px;
    --md-display-small: 36px;
    --md-headline-large: 32px;
    --md-headline-medium: 28px;
    --md-headline-small: 24px;
    --md-title-large: 22px;
    --md-title-medium: 16px;
    --md-title-small: 14px;
    --md-body-large: 16px;
    --md-body-medium: 14px;
    --md-body-small: 12px;
    --md-label-large: 14px;
    --md-label-medium: 12px;
    --md-label-small: 11px;
  }

  body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
  }

  body.dark {
    background-color: rgb(var(--md-sys-background));
    color: rgb(var(--md-sys-on-background));
  }

  .song-container {
    max-width: 800px;
    margin: auto;
    padding: 24px;
    border-radius: 1rem;
    background-color: rgb(var(--md-sys-surface));
    box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  }

  body.dark .song-container {
    background-color: rgb(var(--md-sys-surface));
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-label {
    display: block;
    font-size: var(--md-label-medium);
    line-height: 1.3333333333;
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

  body.dark .form-label {
    color: rgb(var(--md-sys-on-surface-variant));
  }

  .form-input,
  .form-textarea,
  .form-select {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(var(--md-sys-outline));
    font-size: var(--md-body-medium);
    line-height: 1.5rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  body.dark .form-input,
  body.dark .form-textarea,
  body.dark .form-select {
    color: rgb(var(--md-sys-on-surface));
    background-color: rgb(var(--md-sys-surface));
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline: none;
    border-color: rgb(var(--md-sys-primary));
    box-shadow: 0 0 0 3px rgba(var(--md-sys-primary), 0.15);
  }

  .form-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 011.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
  }

  .form-select:focus {
    background-image: url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 011.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: var(--md-body-medium);
    line-height: 1.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .btn-primary {
    background-color: rgb(var(--md-sys-primary));
    color: rgb(var(--md-sys-on-primary));
  }

  .btn-primary:hover {
    background-color: rgb(var(--md-sys-primary-container));
  }

  .btn-outline {
    background-color: transparent;
    color: rgb(var(--md-sys-primary));
    border-color: rgb(var(--md-sys-primary));
  }

  .btn-outline:hover {
    background-color: rgba(var(--md-sys-primary), 0.08);
    color: rgb(var(--md-sys-primary));
  }

  .space-y-4>*+* {
    margin-top: 1.5rem;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
  }

  @media (min-width: 640px) {
    .grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.05), 0 3px 7px -3px rgba(0, 0, 0, 0.07);
    padding: 1.5rem;
    border: 1px solid #ccc;
    color: black;
  }

  body.dark .card {
     background-color: rgb(var(--md-sys-surface));
     border: 1px solid rgb(var(--md-sys-outline));
  }


  .text-blue-600 {
    color: darkblue;
  }

  .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }

  .leading-tight {
    line-height: 1.25;
  }

  .whitespace-pre {
    white-space: pre;
  }

  .text-sm {
    font-size: var(--md-body-small);
    line-height: 1.3333333333;
  }

  body.dark .text-gray-500 {
    color: rgb(var(--md-sys-on-surface-variant));
  }

  .uppercase {
    text-transform: uppercase;
  }

  .font-bold {
    font-weight: 600;
  }

  .mb-2 {
    margin-bottom: 0.5rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .text-xl {
    font-size: var(--md-title-large);
    line-height: 1.75rem;
  }

  .w-full {
    width: 100%;
  }

  .sm\:w-fit {
    @media (min-width: 640px) {
      width: fit-content;
    }
  }

  body.dark .text-muted-foreground {
    color: rgb(var(--md-sys-on-surface-variant));
  }

  /* Tailwind base styles */
  .bg-gray-800 {
    background-color: #1f2937; /* Dark gray */
  }
  .p-6 {
    padding: 1.5rem;
  }

  .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  body.dark .text-white {
    color: white;
  }

  .mb-6 {
    margin-bottom: 1.5rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  .mt-2 {
    margin-top: 0.5rem;
  }

  .mt-6 {
    margin-top: 1.5rem;
  }

  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  /* Add this to prevent overflowing */
  #linesContainer > div {
      width: 100%;
      overflow: auto;
  }
  #linesContainer > div > div {
      min-width: 200px; /* Adjust as needed */
  }

  /* Ensure form inputs don't overflow */
  .form-input, .form-textarea, .form-select {
      max-width: 100%;
  }

/* Add these styles to your existing style.css file */

/* Make double spaces visible using a different approach */
.space-visible {
    font-family: monospace;
    letter-spacing: 0.05em;
    white-space: pre;
}

/* Create a visual indicator for double spaces */
.tip-box {
    background-color: rgba(var(--md-sys-primary), 0.1);
    border-left: 4px solid rgb(var(--md-sys-primary));
    padding: 1rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

body.dark .tip-box {
    background-color: rgba(var(--md-sys-primary-container), 0.2);
}

.example-box {
    border: 1px dashed rgba(var(--md-sys-outline), 0.5);
    padding: 0.75rem;
    border-radius: 0.25rem;
    background-color: rgba(var(--md-sys-surface-variant), 0.3);
}

code.font-mono {
    background: rgba(var(--md-sys-surface-variant), 0.5);
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
}
.hidden {
    display: none !important; /* Ensures the element is completely hidden */
}

.block {
    display: block !important; /* Ensures the element is displayed as a block */
}