:root{
    --vp-bg:#ffffff;
    --vp-ink:#222;
    --vp-accent:#e55249;       /* title accent (red) */
    --vp-bar:#33a37a;          /* green bars */
    --vp-grid:#eef1f5;
    --vp-card:#f9fafb;
    --vp-shadow:0 10px 30px rgba(16,24,40,.06), 0 2px 6px rgba(16,24,40,.04);
    --vp-radius:16px;
  }

/*
  *{box-sizing:border-box}
  body{
    margin:0;
    min-height:100dvh;
    display:grid;
    place-items:center;
    background:linear-gradient(180deg,#fbfbfc, #f5f7fb);
    color:var(--vp-ink);
    font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
*/
  .vp-frame{
    width:min(500px, 80vw);
    background:var(--vp-bg);
    border:1px solid #d7dde7;
    border-radius:12px;
    padding:18px 18px 22px;
    box-shadow:var(--vp-shadow);
  }

  .vp-title{
    text-align:center;
    margin:6px 0 10px;
    font-weight:700;
    font-size:clamp(18px, 2.4vw, 26px);
  }
  .vp-title .vp-accent{ color:var(--vp-accent); }

  .vp-subtitle{
    text-align:center;
    margin-top:-6px;
    font-size:clamp(14px, 1.6vw, 18px);
    color:#2b2f36;
    font-weight:600;
  }

  .vp-legend{
    display:flex;
    gap:.5rem;
    align-items:center;
    justify-content:flex-end;
    color:#5e6773;
    font-size:14px;
    margin:4px 6px 0 0;
  }
  .vp-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--vp-bar);
    box-shadow:0 0 0 3px #eaf7f1 inset;
  }

  /* Chart card */
  .vp-chart-card{
    margin-top:10px;
    background:var(--vp-card);
    border-radius:var(--vp-radius);
    padding:14px;
    border:1px solid #e7ebf2;
  }

/*  svg{ width:100%; height:360px; display:block } */

  /* Axis labels under bars */
  .vp-x-label{
    font-size:14px;
    fill:#2d3748;
    font-weight:600;
  }

  .vp-tag{
    dominant-baseline:central;
    font-size:20px; /* bigger than before */
    font-weight:600;
    fill:#1f2937;
  }

  /* Tooltips */
  .vp-tip{
    position:absolute;
    pointer-events:none;
    background:#111827;
    color:#fff;
    padding:6px 8px;
    font-size:13px;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    transform:translate(-50%, -110%);
    opacity:0;
    transition:.12s ease;
    white-space:nowrap;
  }
  .vp-tip::after{
    content:"";
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:-6px; border:6px solid transparent; border-top-color:#111827;
  }