:root {
    --bg: #E9ECF2; --surface: #F4F6FA; --sunken: #DFE3EA;
    --border: #D3D8E0; --border-strong: #B5BBC6; --ink: #222733;
    --text: #3A404D; --muted: #6B7180; --dim: #9098A5;
    --primary: #1D3157; --primary-soft: #DDE3F0; --accent: #4B6EA9;
    --praise: #2B7D5A; --praise-soft: #D9E7DE;
    --issue: #B23A3A; --issue-soft: #EDD8D8;
    --improvement: #A66A12; --improvement-soft: #ECDFC6;
    --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  a { color: var(--primary); }
  .top { padding: 20px 0; border-bottom: 1px solid var(--border); }
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
  h1 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.25; margin: 36px 0 12px; }
  .lede { font-size: 15.5px; color: var(--text); max-width: 760px; margin: 0 0 8px; }
  .statline { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 14px 0 0; }
  .note { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; font-size: 13px; color: var(--muted); margin: 22px 0; max-width: 760px; }
  .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.005em; border-radius: 6px; border: 1px solid transparent; text-decoration: none; }
  .btn-primary { background: var(--primary); color: #fff; padding: 14px 22px; font-size: 14px; }
  .btn-primary:hover { background: #16273F; }
  .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border); padding: 10px 16px; font-size: 13px; }
  .btn-ghost:hover { border-color: var(--border-strong); }
  .section { margin: 40px 0; }
  .section h2 { font-size: 20px; letter-spacing: -0.015em; margin: 0 0 12px; }
  .product-toggle { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin: 14px 0; overflow: hidden; }
  .product-summary { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; background: var(--primary-soft); }
  .product-summary::-webkit-details-marker { display: none; }
  .product-summary::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-right: 10px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M6 4l4 4-4 4' fill='none' stroke='%231D3157' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; transition: transform .2s ease; }
  .product-toggle[open] > .product-summary::before { transform: rotate(90deg); }
  .product-summary:hover { background: #CDD5E8; }
  .product-summary .meta { font-family: var(--mono); font-size: 10px; color: var(--muted); font-weight: 500; margin-left: 12px; }
  .scroll-hint { display: none; padding: 10px 20px; font-family: var(--mono); font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--border); }
  @media (max-width: 980px) { .scroll-hint { display: block; } }
  .scroll-wrap { overflow-x: auto; overflow-y: auto; max-height: 480px; -webkit-overflow-scrolling: touch; }
  .scroll-wrap table { min-width: 840px; }
  .dataset-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; table-layout: fixed; }
  .dataset-table thead th { position: sticky; top: 0; z-index: 1; }
  .dataset-table th { text-align: left; padding: 12px 14px; font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface); border-bottom: 1px solid var(--border); }
  .dataset-table td { padding: 16px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .dataset-table tr:last-child td { border-bottom: none; }
  .dataset-table .brand-cell { color: var(--ink); font-weight: 600; }
  .dataset-table .product-cell { font-family: var(--sans); font-size: 13px; color: var(--ink); font-weight: 600; }
  .dataset-table .cat-cell { font-family: var(--sans); font-size: 12px; color: var(--muted); }
  .type-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 4px; font-family: var(--sans); font-size: 11px; font-weight: 600; }
  .type-chip .dot { width: 5px; height: 5px; border-radius: 50%; }
  .type-praise { background: var(--praise-soft); color: var(--praise); }
  .type-praise .dot { background: var(--praise); }
  .type-issue { background: var(--issue-soft); color: var(--issue); }
  .type-issue .dot { background: var(--issue); }
  .type-improvement { background: var(--improvement-soft); color: var(--improvement); }
  .type-improvement .dot { background: var(--improvement); }
  .conf-chip { padding: 3px 8px; border-radius: 4px; font-family: var(--sans); font-size: 11px; font-weight: 600; }
  .conf-high { background: var(--praise-soft); color: var(--praise); }
  .conf-medium { background: var(--improvement-soft); color: var(--improvement); }
  .conf-low { background: var(--issue-soft); color: var(--issue); }
  .bridge { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 26px 28px; margin: 44px 0; }
  .bridge h2 { margin-top: 0; }
  .bridge p { max-width: 720px; font-size: 14.5px; color: var(--text); }
  .bridge .fineprint { font-size: 12.5px; color: var(--muted); margin-top: 14px; }
  .hub-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px 24px; margin: 14px 0; text-decoration: none; color: var(--ink); }
  .hub-card:hover { border-color: var(--border-strong); }
  .hub-card .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  footer { border-top: 1px solid var(--border); margin-top: 56px; padding: 24px 0 40px; font-size: 12.5px; color: var(--muted); }
  footer a { color: var(--muted); }

  .category-toggle { border: 1px solid var(--border); border-radius: 8px; margin: 14px 0; overflow: hidden; background: var(--surface); }
  .category-summary { display: flex; align-items: center; padding: 14px 20px; cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; list-style: none; background: var(--primary-soft); color: var(--primary); border-left: 4px solid var(--accent); }
  .category-summary::-webkit-details-marker { display: none; }
  .category-summary::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-right: 10px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M6 4l4 4-4 4' fill='none' stroke='%231D3157' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat; transition: transform .2s ease; }
  .category-toggle[open] > .category-summary::before { transform: rotate(90deg); }
  .category-summary .meta { font-family: var(--mono); font-size: 10px; color: var(--muted); font-weight: 500; margin-left: 12px; text-transform: none; letter-spacing: 0; }
  .category-toggle .product-toggle { border-left: none; border-right: none; border-radius: 0; margin: 0; border-top: 1px solid var(--border); }
  h1 { font-size: 40px; }
  .kicker-line { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
  .hub-card .kicker-line { font-size: 10px; margin-bottom: 4px; }
  .hub-card .hub-brand { font-size: 19px; letter-spacing: -0.01em; }
  .top .wrap { display: flex; align-items: center; justify-content: space-between; }
  .top-nav { display: flex; gap: 18px; font-size: 13px; font-weight: 600; }
  .top-nav a { text-decoration: none; }