:root{
      --bg:#ffffff;
      --surface:#ffffff;
      --text:#0f172a;
      --muted:#6b7280;
      --border:#e5e7eb;
      --accent:#CE6632;
      --accent-2:#732E0C;
      --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
      --radius:18px;
      --maxw:1180px;
  }
  @media (prefers-color-scheme: dark){
      :root{
          --bg:#ffffff;
          --surface:#ffffff;
          --text:#0f172a;
          --muted:#6b7280;
          --border:#e5e7eb;
          --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
      }
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{height:100%}
  body{
      margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--text); background:var(--bg);
  }
  a{color:inherit; text-decoration:none}
  .container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
  .skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
  .skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#fff; color:#000; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow)}
  header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--border)}
  @media (prefers-color-scheme: dark){header{background:linear-gradient(180deg, rgba(17,22,29,.7), rgba(17,22,29,.5))}}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
  .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px}
  .brand-badge{width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:var(--shadow); display:grid; place-items:center}
  .brand-badge svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
  .nav a{padding:8px 12px; border-radius:10px}
  .nav a[aria-current="page"], .nav a:hover{background:#f5f5f5}
  /* Hero */
  .hero{position:relative; padding:28px 0 0px; overflow:hidden}
  .hero-wrap{position:relative}
  .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--muted); background:#f8fafc; padding:6px 10px; border-radius:999px; border:1px solid var(--border)}
  .hero h1{font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.1; margin:14px 0 12px; letter-spacing:-.02em}
  .hero p{font-size:clamp(1rem,2vw,1.125rem); color:var(--muted); max-width:60ch}
  .ad-slot{display:flex; justify-content:center; padding:24px 0; margin:0 auto; max-width:min(100%, 960px)}
  .ad-slot .adsbygoogle{display:block; margin:0 auto; max-width:100%}
  body.mock-ads .adsbygoogle{display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(148,163,184,.2) 0, rgba(148,163,184,.2) 10px, rgba(226,232,240,.45) 10px, rgba(226,232,240,.45) 20px); border:1px dashed #cbd5f5; color:#64748b; font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; position:relative}
  body.mock-ads .adsbygoogle::after{content:"Mock ad"; position:absolute}
  /* Panels */
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-top:24px}
  .card .body{padding:20px}
  .social-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:12px}
  .social-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,.04); text-decoration:none}
  .social-link:hover, .social-link:focus-visible{border-color:var(--accent); color:var(--accent-2); box-shadow:0 0 0 3px rgba(206,102,50,.16)}
  .social-link-icon{width:20px; height:20px; flex:0 0 auto; fill:currentColor}
  main{padding:40px 0}
  footer{margin-top:36px; padding:28px 0 40px; border-top:1px solid var(--border); color:var(--muted)}
  .made{display:flex; gap:8px; align-items:center}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

.nav-links{display:flex; gap:6px; align-items:center}
.hero-gradient-text{background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.ad-banner-728x90{display:inline-block; width:728px; height:90px}
.ad-banner-160x600{display:inline-block; width:160px; height:600px}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.copyright-meta{opacity:.8}
.footer-link-spaced{margin-right:12px}
.caption-note{caption-side:bottom; text-align:left}

/* Mobile layout fixes: wrapping navigation and scrollable wide tables */
@media (max-width: 640px) {
  .nav { align-items: flex-start; flex-direction: column; gap: 8px }
  .nav-links { flex-wrap: wrap; width: 100% }
  .ad-banner-728x90 { width: min(728px, calc(100vw - 32px)) }
  .ad-banner-336x280 { width: min(336px, calc(100vw - 32px)) }
  table.grid { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
}