@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Stack+Sans+Text:wght@200..700&display=swap');

:root {
  --color-text-primary: light-dark(rgba(20, 20, 19, 1), rgba(250, 249, 245, 1));
  --color-text-secondary: light-dark(rgba(61, 61, 58, 1), rgba(194, 192, 182, 1));
  --color-border-tertiary: light-dark(rgba(31, 30, 29, 0.15), rgba(222, 220, 209, 0.15));
  --color-background-primary: light-dark(rgba(255, 255, 255, 1), rgba(48, 48, 46, 1));
  --color-background-secondary: light-dark(rgba(245, 244, 237, 1), rgba(38, 38, 36, 1));
  --color-background-tertiary: light-dark(rgba(250, 249, 245, 1), rgba(20, 20, 19, 1));
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 10px;
}

*, :after, :before { box-sizing:border-box; min-width: 0; max-width: 100%; }
body { font-family:'Noto Sans'; background: #F8F8F6;}

  .poll-wrap { padding: 1.5rem 0; max-width: 1000px; margin: auto; }
  .eyebrow { font-size: 12px; color: var(--color-text-secondary); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem; }
  .poll-title { font-size: 22px; font-weight: 500; color: var(--color-text-primary); margin-bottom: .3rem; }
  .poll-meta { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 1.5rem; }
  .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 1.75rem; }
  .metric { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: .9rem 1rem; }
  .metric-label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }
  .metric-value { font-size: 22px; font-weight: 500; }
  .bar-chart { margin-bottom: 1.75rem; }
  .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .bar-name { font-size: 13px; font-weight: 500; min-width: 100px; color: var(--color-text-primary); }
  .bar-track { flex: 1; background: var(--color-background-secondary); border-radius: 4px; height: 28px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 10px; font-size: 13px; font-weight: 500; transition: width .6s ease; }
  .bar-pct { font-size: 13px; color: var(--color-text-secondary); min-width: 40px; text-align: right; }
  .insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
  .insight-card { border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.1rem; background: var(--color-background-primary); }
  .insight-icon { font-size: 18px; margin-bottom: 6px; }
  .insight-title { font-size: 13px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 4px; }
  .insight-text { font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; }
  .note { border-left: 2px solid var(--color-border-secondary); padding: .6rem 1rem; font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; }
  .chart-container { position: relative; width: 100%; height: 260px; margin-bottom: 1.5rem; }