*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:       #FFF;
    --surface:  #E8E8EA;
    --surface2: #FED214;
    --border:   rgba(0,0,0,0.15);
    --border2:  rgba(0,0,0,0.25);
    --ink:      #191933;
    --ink-mid:  #535366;
    --ink-dim:  #8C8C99;
    --red:      #F55029;
    --green:    #248659;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
  }

  /* ── HERO ── */
  .hero {
    padding: 56px 48px 40px;
    border-bottom: 1px solid var(--border2);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
  }

  .pub-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .meta-pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px; border-radius: 2px;
    border: 1px solid var(--border2);
    color: var(--ink-mid);
  }
  .meta-pill.new {
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
  }

  .pub-title {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 38px; font-weight: 700;
    line-height: 1.08; color: var(--ink);
    margin-bottom: 6px;
  }
  .pub-title span { color: var(--red); }

  .pub-subtitle {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 16px; font-weight: 400;
    color: var(--ink-mid); margin-bottom: 24px;
    line-height: 1.4;
  }

  .pub-desc {
    font-size: 14px; line-height: 1.78;
    color: var(--ink-mid); max-width: 580px;
    margin-bottom: 28px;
  }
  .pub-desc strong { color: var(--ink); font-weight: 500; }

  .key-points {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 28px;
  }
  .key-point {
    display: flex; gap: 12px; align-items: flex-start;
  }
  .kp-marker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: var(--red);
    font-weight: 500; flex-shrink: 0;
    margin-top: 2px; letter-spacing: 0.06em;
  }
  .kp-text { font-size: 13px; color: var(--ink-mid); line-height: 1.6; }
  .kp-text strong { color: var(--ink); font-weight: 500; }

  .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn-primary {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 11px 20px; background: var(--ink); color: var(--bg);
    border: 1px solid var(--border2); cursor: pointer; text-decoration: none;
    display: inline-block; transition: opacity 0.14s;
  }
  .btn-primary:hover { opacity: 0.82; }
  .btn-secondary {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 11px 20px; background: transparent; color: var(--bg);
    border: 1px solid var(--border2); cursor: pointer; text-decoration: none;
    display: inline-block; transition: background 0.14s;
  }
  .btn-secondary:hover { background: var(--surface2); }

  /* ── RIGHT CARD ── */
  .pub-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    padding: 24px;
  }
  .card-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .card-section:first-child { padding-top: 0; }
  .card-section:last-child { border-bottom: none; padding-bottom: 0; }
  .card-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mid);
    margin-bottom: 6px;
  }
  .card-val {
    font-size: 13px; color: var(--ink); line-height: 1.55;
  }
  .card-val a {
    color: var(--ink); text-decoration: underline;
    text-underline-offset: 3px;
  }
  .card-val a:hover { color: var(--red); }

  .stat-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-top: 4px;
  }
  .stat-mini { }
  .stat-mini-num {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1;
  }
  .stat-mini-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; color: var(--ink-mid);
    letter-spacing: 0.08em; margin-top: 2px;
  }

  /* ── ANCHOR SCROLL OFFSET (compensa el header sticky del layout global) ── */
  [id] { scroll-margin-top: 160px; }

  /* ── DIVIDER ── */
  .section-divider {
    padding: 0 48px;
    border-bottom: 1px solid var(--border2);
  }
  .section-tab {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 12px 0;
    color: var(--ink); border-bottom: 2px solid var(--ink);
    margin-bottom: -1px;
  }

  /* ── HEATMAP EMBED ── */
  .embed-zone {
    padding: 32px 48px;
    border-bottom: 1px solid var(--border2);
  }
  .embed-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
  }
  .embed-label::after {
    content:''; flex:1; height:1px; background: var(--border2);
  }

  /* Controls matching existing style */
  .controls-bar {
    padding: 14px 0;
    display: flex; align-items: center; gap: 24px;
    flex-wrap: wrap; border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
  }
  .ctrl-group { display: flex; align-items: center; gap: 8px; }
  .ctrl-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mid);
  }
  .pill-group { display: flex; gap: 4px; }
  .pill {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; padding: 5px 12px; border-radius: 2px;
    border: 1px solid var(--border2); background: transparent;
    color: var(--ink-mid); cursor: pointer; transition: all 0.14s;
    letter-spacing: 0.04em;
  }
  .pill:hover { background: var(--surface2); color: var(--ink); }
  .pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* Table */
  .col-header-row {
    display: flex; margin-left: 168px;
    margin-bottom: 6px; gap: 3px;
  }
  .col-h {
    width: 100px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-mid);
    text-align: center;
  }
  .col-h.score-col {
    font-weight: 500; color: var(--ink);
    border-left: 2px solid var(--border2);
    padding-left: 6px; text-align: left;
  }
  .data-row {
    display: flex; align-items: center;
    gap: 3px; margin-bottom: 3px; transition: opacity 0.2s;
  }
  .data-row.dimmed { opacity: 0.25; }
  .row-lbl {
    width: 162px; font-size: 12px; color: var(--ink-mid);
    text-align: right; padding-right: 6px; white-space: nowrap;
    transition: color 0.14s; flex-shrink: 0;
  }
  .cell {
    width: 100px; height: 30px; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 500; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
  }
  .cell:hover { transform: scale(1.05); z-index: 10; box-shadow: 0 3px 12px rgba(0,0,0,0.18); }
  .score-cell {
    width: 100px; height: 30px; border-radius: 2px;
    display: flex; align-items: center; padding-left: 10px;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; border-left: 2px solid var(--border2);
    transition: transform 0.12s; flex-shrink: 0;
  }
  .score-cell:hover { transform: scale(1.03); }
  .legend-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .legend-lbl { font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-dim); }
  #legendCanvas { border-radius: 1px; }
  .legend-ticks {
    display: flex; justify-content: space-between;
    width: 200px; font-family:'IBM Plex Mono',monospace;
    font-size: 9px; color: var(--ink-dim); margin-top: 2px;
  }

  /* Tooltip */
  #tooltip {
    position: fixed; background: var(--ink); color: var(--bg);
    border-radius: 2px; padding: 8px 12px;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 11px;
    pointer-events: none; z-index: 200; display: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  }
  #tooltip .tt-country { font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:700; margin-bottom:2px; }
  #tooltip .tt-dim { font-size:9px; color:rgba(255,255,255,0.5); font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:5px; }
  #tooltip .tt-score { font-size:22px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; line-height:1; margin-bottom:3px; }
  #tooltip .tt-level { font-size:10px; padding:2px 8px; border-radius:10px; display:inline-block; font-weight:500; }

  /* ── ABOUT SECTION ── */
  .about-zone {
    padding: 40px 48px;
    border-bottom: 1px solid var(--border2);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .about-block {}
  .about-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border2);
  }
  .about-text { font-size: 13px; color: var(--ink-mid); line-height: 1.7; }
  .about-text strong { color: var(--ink); font-weight: 500; }
  .about-text a {
    color: var(--red); text-decoration: underline;
    text-underline-offset: 3px;
  }
  .about-text a:hover { color: var(--green); }
  .about-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .about-list li {
    font-size: 12px; color: var(--ink-mid); line-height: 1.5;
    padding-left: 12px; position: relative;
  }
  .about-list li::before {
    content: '—'; position: absolute; left: 0;
    color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
  }

  /* ── CONTACT ── */
  .contact-zone {
    padding: 36px 48px;
    border-bottom: 1px solid var(--border2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .contact-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px; font-weight: 700; color: var(--ink);
    letter-spacing: -.05rem;
    margin-bottom: 8px;
  }
  .contact-desc { font-size: 13px; color: var(--ink-mid); line-height: 1.7; margin-bottom: 20px; }
  .contact-item {
    display: flex; gap: 10px; align-items: flex-start;
    margin-bottom: 12px;
  }
  .contact-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dim); min-width: 60px; margin-top: 2px;
  }
  .contact-val { font-size: 13px; color: var(--ink); }
  .contact-val a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
  .contact-val a:hover { color: var(--green); }

  .profiles-grid { display: flex; flex-direction: column; gap: 12px; }
  .profile-item {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ink-dim);
  }
  .profile-role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 4px;
  }
  .profile-desc { font-size: 12px; color: var(--ink-mid); line-height: 1.55; }

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .about-zone { grid-template-columns: 1fr; }
    .contact-zone { grid-template-columns: 1fr; }
    .hero, .embed-zone, .about-zone, .contact-zone,
    .section-divider { padding-left: 24px; padding-right: 24px; }
  }

  /* ── RESPONSIVE 768px ── */
  @media (max-width: 768px) {
    .hero {
      padding: 32px 20px 28px;
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .pub-title { font-size: 28px; }
    .pub-subtitle { font-size: 14px; }

    .section-divider { padding-left: 20px; padding-right: 20px; }
    .embed-zone { padding: 20px; }
    .about-zone { padding: 28px 20px; grid-template-columns: 1fr; gap: 24px; }
    .contact-zone { padding: 24px 20px; grid-template-columns: 1fr; gap: 24px; }

    .stats-row { flex-wrap: wrap; }
    .stat-item { flex: 1 1 45%; border-bottom: 1px solid var(--border); }

    .controls-bar { padding: 12px 20px; gap: 12px; }
    .pill-group { flex-wrap: wrap; }

    .grid-area { padding: 16px 0 12px; }
    .filter-info { padding: 8px 20px; }
    .legend-row { padding: 14px 20px; }
  }

  /* ── RESPONSIVE 525px ── */
  @media (max-width: 525px) {
    .hero {
      padding: 24px 16px 20px;
      gap: 24px;
    }
    .pub-meta { gap: 6px; }
    .meta-pill { font-size: 8px; padding: 3px 8px; }
    .pub-title { font-size: 24px; line-height: 1.1; }
    .pub-subtitle { font-size: 13px; margin-bottom: 16px; }
    .pub-desc { font-size: 13px; margin-bottom: 20px; }
    .key-points { gap: 8px; margin-bottom: 20px; }
    .kp-text { font-size: 12px; }
    .hero-actions { flex-direction: column; gap: 8px; }
    .btn-primary, .btn-secondary { text-align: center; }

    /* pub-card en mobile: layout horizontal para stat-grid */
    .pub-card { padding: 16px; }
    .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .stat-mini-num { font-size: 18px; }

    .section-divider { padding-left: 16px; padding-right: 16px; }
    .embed-zone { padding: 16px; }
    .about-zone { padding: 20px 16px; gap: 20px; }
    .contact-zone { padding: 20px 16px; }

    /* Stats row — 4 columnas siempre (compactas) */
    .stats-row { flex-wrap: nowrap; border-bottom: 1px solid var(--border2); }
    .stat-item {
      flex: 1 1 0;
      min-width: 0;
      padding: 10px 8px;
      border-right: 1px solid var(--border);
      border-bottom: none;
    }
    .stat-item:last-child { border-right: none; }
    .stat-lbl { font-size: 7.5px; letter-spacing: 0.06em; }
    .stat-val { font-size: 16px; }
    .stat-sub { font-size: 9px; }

    /* Controls — pills wrap in rows, no scroll */
    .controls-bar { padding: 10px 16px; gap: 10px; }
    .ctrl-group { width: 100%; flex-direction: column; align-items: flex-start; gap: 6px; }
    .pill-group { flex-wrap: wrap; width: 100%; gap: 4px; }
    .pill { white-space: nowrap; font-size: 9px; padding: 5px 10px; }

    /* Tabla heatmap — scroll horizontal con celdas compactas */
    .grid-area {
      padding: 12px 0 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .grid-area > div { min-width: 560px; padding: 0 16px; }
    .col-header-row { margin-left: 110px; gap: 2px; }
    .col-h { width: 76px; font-size: 8px; }
    .data-row { gap: 2px; margin-bottom: 2px; }
    .row-lbl { width: 110px; font-size: 10px; padding-right: 4px; }
    .cell { width: 76px; height: 28px; }
    .score-cell { width: 76px; height: 28px; font-size: 11px; padding-left: 6px; }

    /* Legend compact for mobile */
    .legend-block { padding: 10px 16px 12px; gap: 6px; }
    .legend-row--dims { flex-wrap: wrap; gap: 6px; }
    .legend-row--score { flex-wrap: wrap; gap: 6px; }
    .legend-levels { gap: 6px; }
    .legend-level-pill { font-size: 8.5px; }
    #legendCanvas, #rankingLegendCanvas { width: 160px !important; }
    .legend-ticks, .legend-score-range { width: 140px; font-size: 8px; }
    .legend-lbl--score { min-width: unset; }

    /* Scroll indicator hint */
    .grid-area::after {
      content: '← deslizá →';
      display: block;
      text-align: center;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      color: var(--ink-dim);
      padding: 6px 0 2px;
      letter-spacing: 0.08em;
    }

    .filter-info { padding: 6px 16px; font-size: 9px; }
    .legend-lbl { font-size: 8px; }

    .about-label { font-size: 8px; }
    .about-text { font-size: 12px; }
    .about-list li { font-size: 11px; }
    .contact-title { font-size: 17px; }
    .contact-desc { font-size: 12px; }
    .contact-val { font-size: 12px; }
    .profiles-grid { gap: 8px; }
    .profile-desc { font-size: 11px; }
  }

  /* ── RESPONSIVE 375px ── */
  @media (max-width: 375px) {
    .pub-title { font-size: 21px; }
    .hero { padding: 20px 12px 18px; }
    .section-divider, .embed-zone, .about-zone, .contact-zone { padding-left: 12px; padding-right: 12px; }
    .controls-bar { padding: 10px 12px; }
    .filter-info { padding: 6px 12px; }
    .legend-row { padding: 10px 12px; }
    .stat-item { padding: 10px 10px; }
    .stat-val { font-size: 16px; }
    .grid-area > div { padding: 0 12px; }
    /* Celdas aún más compactas */
    .col-h { width: 66px; }
    .col-header-row { margin-left: 96px; }
    .row-lbl { width: 96px; font-size: 9.5px; }
    .cell { width: 66px; height: 26px; }
    .score-cell { width: 66px; height: 26px; font-size: 10px; }
  }

  /* ── STATS ROW ── */
  .stats-row { display:flex; gap:0; border-bottom:1px solid var(--border2); }
  .stat-item { flex:1; padding:14px 20px; border-right:1px solid var(--border); }
  .stat-item:last-child { border-right:none; }
  .stat-item.no-interact { cursor:default; pointer-events:none; }
  .stat-lbl { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px; }
  .stat-val { font-family:'IBM Plex Sans',sans-serif; font-size:20px; font-weight:700; line-height:1; }
  .stat-sub { font-size:10px; color:var(--ink-dim); margin-top:2px; }

  /* ── GRID ── */
  .grid-area { padding:12px 0; overflow-x:auto; }
  .col-header-row { display:flex; margin-left:168px; margin-bottom:6px; gap:3px; }
  .col-h { width:100px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mid); text-align:center; }
  .col-h.score-col { font-weight:500; color:var(--ink); border-left:2px solid var(--border2); padding-left:6px; text-align:left; }
  .data-rows {}
  .data-row { display:flex; align-items:center; gap:3px; margin-bottom:3px; transition:opacity 0.2s; }
  .data-row.dimmed { opacity:0.25; }
  .data-row.highlighted-row .row-lbl { color:var(--ink); font-weight:500; }
  .row-lbl { width:162px; font-size:11.5px; color:var(--ink-mid); text-align:right; padding-right:6px; white-space:nowrap; transition:color 0.14s; flex-shrink:0; font-family:'IBM Plex Sans',sans-serif; }
  .cell { width:100px; height:33px; border-radius:2px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:transform 0.12s,box-shadow 0.12s; flex-shrink:0; }
  .cell:hover { transform:scale(1.07); z-index:10; box-shadow:0 4px 16px rgba(0,0,0,0.22); }
  .score-cell { width:100px; height:33px; border-radius:2px; display:flex; align-items:center; padding-left:10px; font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:700; cursor:pointer; border-left:1.5px solid rgba(0,0,0,0.15); transition:transform 0.12s,box-shadow 0.12s; flex-shrink:0; }
  .score-cell:hover { transform:scale(1.05); z-index:10; box-shadow:0 4px 16px rgba(0,0,0,0.18); }

  /* ── LEGEND ── */
  .legend-block {
    padding: 12px 36px 14px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px;
  }
  .legend-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .legend-lbl {
    font-family:'IBM Plex Mono',monospace; font-size:9px;
    color:var(--ink-dim); letter-spacing:0.08em; white-space:nowrap;
  }
  .legend-lbl--score { min-width: 86px; }
  .legend-lbl--note  { color:var(--ink-dim); font-size:8.5px; }
  .legend-canvas-wrap { display:flex; flex-direction:column; gap:1px; }
  .legend-ticks {
    display:flex; justify-content:space-between; width:160px;
    font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-dim);
  }
  .legend-score-range {
    display:flex; justify-content:space-between; width:160px;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:var(--ink-dim);
  }
  .legend-levels {
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  }
  .legend-level-pill {
    font-family:'IBM Plex Mono',monospace; font-size:9px; cursor:pointer;
  }

  /* ── FILTER INFO ── */
  .filter-info { padding:8px 48px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-mid); min-height:28px; display:flex; align-items:center; gap:10px; }
  .clear-btn { background:none; border:1px solid var(--border2); border-radius:2px; padding:2px 8px; font-family:'IBM Plex Mono',monospace; font-size:9px; cursor:pointer; color:var(--ink-mid); display:none; }
  .clear-btn:hover { background:var(--surface2); }

  /* ── CONTROLS (inside embed) ── */
  .controls-bar { padding:16px 48px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; border-bottom:1px solid var(--border); background:var(--surface); }
  .ctrl-group { display:flex; align-items:center; gap:8px; }
  .ctrl-label { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); }
  .pill-group { display:flex; gap:4px; }
  .pill { font-family:'IBM Plex Mono',monospace; font-size:10px; padding:5px 12px; border-radius:2px; border:1px solid var(--border2); background:transparent; color:var(--ink-mid); cursor:pointer; transition:all 0.14s; letter-spacing:0.04em; }
  .pill:hover { background:var(--surface2); color:var(--ink); }
  .pill.active { background:var(--ink); color:var(--bg); border-color:var(--ink); }

  /* ── TOOLTIP ── */
  #tooltip { position:fixed; background:var(--ink); color:var(--bg); border-radius:2px; padding:10px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:12px; pointer-events:none; z-index:200; display:none; min-width:160px; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
  #tooltip .tt-country { font-family:'IBM Plex Sans',sans-serif; font-size:15px; font-weight:700; margin-bottom:2px; }
  #tooltip .tt-dim { font-size:10px; color:rgba(255,255,255,0.5); font-family:'IBM Plex Mono',monospace; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; }
  #tooltip .tt-score { font-size:20px; font-weight:700; font-family:'IBM Plex Sans',sans-serif; line-height:1; margin-bottom:4px; }
  #tooltip .tt-level { font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; display:inline-block; }

  /* ── COL HEADER ABBR/FULL TOGGLE ── */
  .col-abbr { display: none; }
  .col-full { display: inline; }

  /* ── MOBILE LEGEND (shown only ≤525px) ── */
  .mobile-legend { display: none; }

  /* ── RESPONSIVE 525px additions ── */
  @media (max-width: 525px) {
    /* Column headers: show abbr, hide full */
    .col-abbr { display: inline; }
    .col-full  { display: none; }

    /* Compact cells — color only, no text */
    .cell {
      width: 44px;
      height: 32px;
      border-radius: 2px;
      font-size: 0 !important; /* hide any text */
    }
    .score-cell {
      width: 44px;
      height: 32px;
      font-size: 9px !important;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 700;
      padding-left: 0;
      justify-content: center;
      letter-spacing: -0.02em;
    }

    /* Compact row label */
    .row-lbl {
      width: 34px;
      font-size: 9px;
      font-family: 'IBM Plex Mono', monospace;
      font-weight: 600;
      text-align: right;
      padding-right: 4px;
      letter-spacing: 0.02em;
    }

    /* Col headers compact */
    .col-header-row { margin-left: 38px; gap: 2px; }
    .col-h { width: 44px; font-size: 7.5px; text-align: center; }

    /* Remove scroll hint (no longer needed — fits the screen) */
    .grid-area::after { display: none; }
    .grid-area { overflow-x: visible; }
    .grid-area > div { min-width: unset; padding: 0 16px; }

    /* Data rows */
    .data-row { gap: 2px; margin-bottom: 2px; }

    /* Mobile legend */
    .mobile-legend {
      display: block;
      padding: 16px;
      border-top: 1px solid var(--border);
    }
    .mobile-legend-section {
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }
    .mobile-legend-section:last-child { border-bottom: none; padding-bottom: 4px; }
    .mobile-legend-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 8px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--ink-dim);
      margin-bottom: 8px;
    }
    .mobile-legend-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px 10px;
    }
    .mobile-legend-grid span {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; color: var(--ink-mid);
    }
    .mobile-legend-grid span b {
      color: var(--ink); font-weight: 600;
      margin-right: 3px;
    }
    .mobile-legend-cols {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px 16px;
    }
    .mobile-legend-cols span {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px; color: var(--ink-mid);
    }
    .mobile-legend-cols span b {
      color: var(--ink); font-weight: 600;
      margin-right: 4px;
    }
  }

  /* ── RESPONSIVE 375px — even tighter cells ── */
  @media (max-width: 375px) {
    .cell, .score-cell { width: 44px; height: 30px; }
    .col-h { width: 44px; font-size: 8px; }
    .col-header-row { margin-left: 34px; }
    .row-lbl { width: 30px; font-size: 10px; }
    .mobile-legend-grid { grid-template-columns: repeat(2, 1fr); }
  }