:root{
  --bg:#fafafa; --text:#222; --muted:#555; --accent:#0645ad;
}

html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.6; font-size:1.05rem; max-width:960px; margin:0 auto; padding:1.2rem 1rem; background-color:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Typography */
h1{font-size:1.8rem; font-weight:600; margin:1.6rem 0 0.8rem; line-height:1.25; color:#111;}
h2{font-size:1.4rem; font-weight:500; margin:1.2rem 0 0.6rem;}
p{margin-bottom:1.1rem}

/* Layout */
main{display:block}
.chart{width:100%; height:420px; margin-top:1.2rem; background:linear-gradient(180deg, rgba(0,0,0,0.01), transparent); border-radius:6px;}
.caption{font-size:0.9rem; color:var(--muted); margin-top:0.4rem}

/* Images & Buttons */
img{max-width:100%; height:auto; border-radius:4px; display:inline-block}
.myimg{border:none; display:inline-block; margin:1px; cursor:pointer; border-radius:8px; width:71px; height:28px}
.myimg:hover{box-shadow:0 8px 8px 0 rgba(0,0,0,.12),0 8px 12px 0 rgba(0,119,229,0.08)}

/* Nav */
.topnav{overflow:hidden; background-color:#f3f3f3; border-bottom:1px solid #ddd}
.topnav a{float:left; color:#222; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px}
.topnav a:hover{background-color:#ddd}
.topnav a.active{background-color:var(--accent); color:#fff}
.topnav button.icon{display:none; background:transparent; border:none; cursor:pointer; padding:14px 16px}

/* Accessibility helpers */
.sr-only{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Footer */
footer{margin-top:2rem; text-align:center; font-size:0.9rem; color:var(--muted)}

/* Responsive */
@media (max-width:600px){
  body{font-size:1rem; padding:1rem 0.8rem}
  h1{font-size:1.5rem}
  h2{font-size:1.2rem}
  .topnav a:not(:first-child){display:none}
  .topnav button.icon{display:block; float:right}
  .topnav.responsive{position:relative}
  .topnav.responsive button.icon{position:absolute; right:0; top:0}
  .topnav.responsive a{float:none; display:block; text-align:left}
  .chart{height:360px}
}

/* Print improvements */
@media print{
  .topnav, .social-buttons { display:none }
  body{background:#fff; color:#000}
}

/* Performance: reduce repaints for focus outlines */
a:focus{outline:2px dashed var(--accent); outline-offset:3px}

/* End of CSS */