body {
    font-family: 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
  }


  .container {
    max-width: 1080px;
    margin: 40px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    text-align: left;
  }

  .card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }

  .card h3 {
    margin-top: 0;
    font-size: 18px;
  }

  .note-list {
      list-style: none;
      padding-left: 0;
  }

  .note-list li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 18px;
  }

  .note-list li::before {
      content: "▸";
      position: absolute;
      left: 0;
      top: 1px;
      color: #999;
  }

  .note-list a {
      color: #555;
      text-decoration: none;
      transition: color 0.2s ease, font-weight 0.2s ease;
  }

  .note-list a:hover {
      color: #fbb1bd;
      font-weight: 600;
  }