body {
      font-family: "Inter", sans-serif;
    }

    html,
    body {
      overflow-x: hidden;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.25rem;
      max-width: 600px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      padding: 0.5rem;
    }

    .grid-cell {
      aspect-ratio: 1 / 1;
      background: #f3f4f6;
      border: 2px dashed #d1d5db;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      overflow: hidden;
    }

    .grid-cell:hover {
      background: #e5e7eb;
      border-color: #9ca3af;
    }

    .grid-cell.filled {
      border: none;
      background: transparent;
    }

    .grid-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .remove-btn {
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      z-index: 10;
    }

    .grid-cell.filled:hover .remove-btn {
      display: flex;
    }

    .drag-over {
      background: #dbeafe !important;
      border-color: #3b82f6 !important;
    }

    .content-section {
      margin-top: 3rem;
      padding-top: 2rem;
      border-top: 1px solid #e5e7eb;
    }

    .content-section h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: #111827;
    }

    .content-section h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
      color: #374151;
    }

    .content-section p {
      margin-bottom: 1rem;
      color: #4b5563;
      line-height: 1.7;
    }

    .content-section ul,
    .content-section ol {
      margin-bottom: 1.25rem;
      padding-left: 1.5rem;
      color: #4b5563;
    }

    .content-section li {
      margin-bottom: 0.5rem;
      line-height: 1.6;
    }

    .tip-box {
      background: #eff6ff;
      border-left: 4px solid #3b82f6;
      padding: 1rem;
      margin: 1.25rem 0;
      border-radius: 0.5rem;
    }

    .warning-box {
      background: #fef3c7;
      border-left: 4px solid #f59e0b;
      padding: 1rem;
      margin: 1.25rem 0;
      border-radius: 0.5rem;
    }