*, *::before, *::after { box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
           background: #ffffff; color: #111; padding: 1.5rem; max-width: 1100px; margin: auto; }
    h1 { color: #1e40af; margin-bottom: 0.3rem; }
    .loading { color: #666; padding: 2rem; text-align: center; }

    .nav-header { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
                  padding: 0.6rem 0; margin-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
    .nav-header h1 { font-size: 1.1rem; margin: 0 0.6rem 0 0; white-space: nowrap; color: #1e40af; }
    .btn { border: 1px solid #ccc; background: #f0f0f2; color: #111; padding: 0.35rem 0.7rem;
           border-radius: 0.5rem; cursor: pointer; font-size: 0.85rem; text-decoration: none; }
    .btn:hover { border-color: #93c5fd; }
    .btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
    .btn.ghost { background: transparent; border: 1px solid #ccc; }

    #sticky-nav { position: sticky; top: 0; z-index: 80; background: #ffffff;
                  padding-top: 1.5rem; margin-top: -1.5rem; }
    .zone-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
    /* Pinned clone (see installPinnedHeaderObserver in JS) — position:fixed
       on a full separate <table>, not position:sticky on a <th>. Sticky on
       table cells had real, version-specific bugs in older WebKit (pre-
       ~15.4/2022), which this sidesteps entirely by never relying on it. */
    #pinned-thead-clone { position: fixed; left: 0; z-index: 60; display: none;
                           background: #fff; margin: 0;
                           box-shadow: 0 2px 4px -2px rgba(0,0,0,0.15);
                           /* Real iOS Safari has a long-documented issue where a
                              position:fixed element created/appended via JS
                              *after* first paint (exactly this clone) doesn't
                              reliably track scroll unless forced onto its own
                              GPU compositing layer. translateZ(0) is the
                              standard fix. */
                           -webkit-transform: translateZ(0); transform: translateZ(0);
                           will-change: transform; }

    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                  gap: 1rem; margin-bottom: 2rem; }
    .stat-card { background: #f8f8fa; border: 1px solid #e5e7eb; border-radius: 0.5rem;
                 padding: 1rem; text-align: center; position: relative; }
    .stat-card .num { font-size: 1.8rem; font-weight: 700; color: #1e40af; }
    .stat-card .label { font-size: 0.8rem; color: #666; margin-top: 0.2rem; }
    .stat-card .pct { font-size: 0.9rem; color: #16a34a; font-weight: 600; }

    .info-btn { display: inline-block; width: 1.1rem; height: 1.1rem; line-height: 1.1rem;
                text-align: center; border-radius: 50%; background: #dbeafe; color: #2563eb;
                font-size: 0.7rem; font-weight: 700; cursor: pointer; margin-left: 0.3rem;
                vertical-align: middle; border: none; }
    .info-btn:hover { background: #2563eb; color: #fff; }
    .tooltip { display: none; position: absolute; z-index: 100; background: #1e293b; color: #f1f5f9;
               padding: 0.6rem 0.8rem; border-radius: 0.4rem; font-size: 0.78rem; line-height: 1.4;
               max-width: 300px; text-align: left; left: 50%; transform: translateX(-50%);
               top: calc(100% + 6px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
    .tooltip.open { display: block; }

    .section { margin-bottom: 2rem; }
    .section h3 { color: #1e40af; font-size: 1rem; margin-bottom: 0.8rem;
                  border-bottom: 2px solid #e5e7eb; padding-bottom: 0.3rem; position: relative; }

    table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
    th, td { padding: 0.5rem 0.8rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
    th { background: #f8f8fa; color: #555; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
    td { font-size: 0.9rem; }
    tr:hover td { background: #f0f4ff; }
    .rank-col { width: 2.5rem; text-align: center; color: #1e40af; font-weight: 700; }
    .count-col { text-align: right; font-weight: 600; }
    .bar { display: inline-block; height: 0.7rem; background: #93c5fd; border-radius: 2px;
           vertical-align: middle; margin-right: 0.5rem; }

    .letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                   gap: 0.4rem; }
    .letter-card { background: #f8f8fa; border: 1px solid #e5e7eb; border-radius: 0.4rem;
                   padding: 0.5rem; text-align: center; font-size: 0.8rem; }
    .letter-card .letter { font-size: 1.2rem; font-weight: 700; color: #1e40af; }
    .letter-card .lcount { color: #555; }
    .letter-card .lpct { color: #16a34a; font-weight: 600; }

    .scan-info { color: #888; font-size: 0.8rem; margin-top: 1.5rem; padding: 0.5rem 0.8rem;
                 background: #f8f8fa; border-radius: 6px; border: 1px solid #e5e7eb; }

    /* border-collapse MUST be "separate" (not "collapse") here — position:
       sticky on <th> silently does nothing in Chrome AND Safari when the
       table uses collapsed borders (a known cross-engine limitation, not
       a per-browser bug). border-spacing:0 keeps cells touching so this
       looks the same as collapsed borders did. */
    .summary-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 1.5rem; }
    /* site/responsive.css's shared mobile rule (<768px) forces every plain
       <table> to display:block + overflow-x:auto for horizontal scrolling —
       necessary for genuinely wide tables elsewhere on the site, but it ALSO
       breaks position:sticky here (display:block strips the table-cell
       layout context a <th> needs, and an overflow-x:auto ancestor becomes
       sticky's scroll-reference container instead of the page viewport, so
       nothing tracks page scroll anymore). .summary-table only has 6 narrow
       columns, so it doesn't need the horizontal-scroll treatment — opt back
       out of it explicitly (class selector beats the shared file's bare
       `table` element selector regardless of source order, no !important
       needed since the shared rule doesn't use one for these properties). */
    @media (max-width: 768px) {
      .summary-table { display: table !important; overflow-x: visible !important; }
    }
    .summary-table th, .summary-table td { padding: 0.5rem 0.7rem; text-align: right; border-bottom: 1px solid #e5e7eb; font-size: 0.9rem; }
    .summary-table th { background: #f8f8fa; color: #555; font-weight: 600; font-size: 0.8rem; }
    .summary-table th:first-child, .summary-table td:first-child { text-align: left; font-weight: 600; }
    .summary-table .zone-link { color: #2563eb; cursor: pointer; font-weight: 700; font-size: 1rem; }
    .summary-table .zone-link:hover { text-decoration: underline; }
    .summary-table .pct-cell { color: #16a34a; font-weight: 600; }
    .summary-table .num-cell { color: #1e40af; font-weight: 600; }
    .summary-table tr:hover td { background: #f0f4ff; }
    .summary-table .section-row td { background: #eef2ff; font-weight: 700; color: #1e40af; font-size: 0.8rem; text-transform: uppercase; border-bottom: 2px solid #c7d2fe; }

    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }