: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%}
  /* 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}
  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}