:root {
      --max-width: 1200px;
      --radius: 16px;
      --gap: 1rem;
      --bg: #fff;
      --muted: #555;
      --heading: #111;
    }
    *, *::before, *::after {box-sizing:border-box;}
    body {
      margin:0;
      padding:1.25rem;
      font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      line-height:1.55;
      color:#242424;
      background:#f9f9fb;
      min-height:100%;
      -webkit-font-smoothing:antialiased;
    }
    .logo{
        width: 30
    }
    main {
      max-width: var(--max-width);
      margin:0 auto;
      padding:1rem;
      background: #ffffff;
      border-radius:12px;
      box-shadow:0 8px 32px rgba(0,0,0,0.04);
    }
    h1 {font-size:clamp(1.75rem, 2.5vw, 2.5rem); margin-top:0; color: var(--heading);}
    h2 {font-size:1.75rem; margin-bottom:0.5rem; color: var(--heading);}
    h3 {font-size:1.35rem; margin-bottom:0.25rem; color: var(--heading);}
    p {margin:1rem 0;}
    a {color:#1e73be; text-decoration:none;}
    a:hover, a:focus {text-decoration:underline;}
    .genre-section {margin-bottom:2rem; padding-bottom:1rem; border-bottom:1px solid #e6e6e6;}
    ul {padding-left:1.2rem; margin:0.5rem 0;}
    li {margin:0.35rem 0;}
    .comparison-wrapper {
      overflow-x:auto;
      margin:1.5rem 0;
    }
    table {
      width:100%;
      border-collapse:collapse;
      font-size:0.9rem;
      background:#fff;
      border-radius:8px;
      overflow:hidden;
      min-width:700px;
    }
    caption {
      caption-side:top;
      text-align:left;
      font-weight:600;
      padding:0.75rem 1rem;
      background:#f1f5fa;
      font-size:1rem;
    }
    th, td {
      padding:0.75rem 1rem;
      border-bottom:1px solid #e6e6e6;
      text-align:left;
      vertical-align:top;
    }
    thead {background:#f7f9fc;}
    th {font-weight:600; position:sticky; top:0; background:#f7f9fc;}
    tr:last-child td {border-bottom:none;}
    .badge {display:inline-block; padding:0.25em .5em; background:#eef; border-radius:999px; font-size:0.55rem; text-transform:uppercase; letter-spacing:0.5px;}
    .flex {display:flex; gap:1rem; flex-wrap:wrap;}
    .small {font-size:0.85rem; color:#666;}
    .footer {margin-top:3rem; font-size:0.9rem; color:#666;}
    .toc {background:#f1f5fa; padding:1rem; border-radius:8px; margin-bottom:1.5rem; font-size:0.9rem;}
    .faq {margin-top:2rem;}
    .faq details {margin-bottom:1rem; border:1px solid #e6e6e6; border-radius:8px; padding:0.75rem;}
    .faq summary {font-weight:600; cursor:pointer;}
    @media (max-width: 900px) {
      body {padding:0.75rem;}
      table {min-width:600px;}
    }
    @media (max-width: 700px) {
      h2 {font-size:1.5rem;}
      h3 {font-size:1.2rem;}
    }