:root{
      --bg:#0c0818;
      --bg-mid:#100b20;
      --bg2:#120d24;
      --panel:#181132;
      --card:#1f1842;
      --text:#f3ecff;
      --muted:#c9c0ea;
      --accent:#b48cf9;
      --accent-2:#f6d365;
      --accent-2-strong:#ffdd66;
      --ring:rgba(244,214,101,.5);
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;
      --maxw:1200px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color:var(--text);
      line-height:1.65;

      /* Smooth, multi-stop background to reduce banding */
      background:
        radial-gradient(1200px 700px at 18% -12%, rgba(180,140,249,.22) 0%, rgba(180,140,249,.12) 25%, rgba(180,140,249,.04) 55%, rgba(180,140,249,0) 70%),
        radial-gradient(900px 540px at 110% 18%, rgba(64,40,120,.28) 0%, rgba(64,40,120,.12) 35%, rgba(64,40,120,0) 75%),
        linear-gradient(180deg,
          var(--bg) 0%,
          var(--bg-mid) 35%,
          var(--bg2) 70%,
          var(--bg) 100%);
      background-attachment: fixed, fixed, fixed; /* helps on some GPUs */
    }

    /* Ultra-subtle grain overlay (dithering) to kill visible bands */
    .grain::before{
      content:"";
      position:fixed; inset:-2rem; z-index:-1; pointer-events:none;
      opacity:.035;            /* keep it very low */
      mix-blend-mode:normal;
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
      background-size:280px 280px;
    }

    /* Decorative soft stars (reduced intensity to avoid bands) */
    .stars::before, .stars::after{
      content:""; position:fixed; inset:-10% -10% auto -10%; height:50vh; pointer-events:none; z-index:-2;
      background:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.10) 50%, transparent 55%),
        radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,.10) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,255,255,.08) 50%, transparent 55%),
        radial-gradient(1.5px 1.5px at 35% 75%, rgba(255,255,255,.08) 50%, transparent 55%);
      filter:drop-shadow(0 0 5px rgba(255,221,102,.18));
    }
    .stars::after{transform:translateY(40vh)}

    /* Header */
    .header{
      position:sticky; top:0; z-index:60;
      backdrop-filter: saturate(140%) blur(8px);
      background:linear-gradient(180deg, rgba(18,13,36,.92), rgba(18,13,36,.68));
      border-bottom:1px solid rgba(246,211,101,.18);
    }
    .head-inner{
      max-width:var(--maxw); margin:0 auto; padding:14px 20px;
      display:flex; align-items:center; gap:16px;
    }
    .logo{
      display:flex; align-items:center; gap:14px; min-width:0;
    }
    .logo img{
      width:64px; height:64px; object-fit:cover; border-radius:14px;
      box-shadow:0 8px 26px rgba(246,211,101,.28);
    }
    .brand{
      font-weight:900; letter-spacing:.3px; white-space:nowrap;
      font-size:32px; line-height:1;
      background:linear-gradient(90deg, var(--accent-2), #fff4b0);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow:0 0 22px rgba(255,221,102,.18);
    }
    .spacer{flex:1}
    .nav{display:flex; gap:10px; align-items:center;}
    .btn{
      appearance:none; border:0; cursor:pointer;
      padding:12px 16px; border-radius:14px; font-weight:800; letter-spacing:.2px;
      background:rgba(255,255,255,.08); color:var(--text);
      box-shadow:0 2px 10px rgba(0,0,0,.25) inset, 0 6px 16px rgba(0,0,0,.25);
      transition:.2s transform ease, .2s box-shadow ease, .2s background ease;
    }
    .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.12)}
    .btn-outline{
      border:1px solid rgba(255,255,255,.2);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    }
    .btn-gold{
      background:linear-gradient(180deg, var(--accent-2-strong), var(--accent-2));
      color:#2f2300; text-shadow:0 1px 0 rgba(255,255,255,.35);
      box-shadow:0 10px 30px rgba(246,211,101,.35);
    }
    .btn-gold:hover{box-shadow:0 16px 38px rgba(246,211,101,.48)}

    /* Layout */
    .wrap{max-width:var(--maxw); margin:22px auto; padding:0 20px 70px}
    .grid{
      display:grid; grid-template-columns: 300px 1fr; gap:24px;
    }

    /* Sidebar */
    .sidebar{position:relative}
    .sticky{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.14);
      border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
    }
    .card-title{
      font-weight:800; margin:0 0 10px; font-size:15px; letter-spacing:.2px; color:#fff2b6;
    }
    .fact{
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px; border-radius:12px; margin:8px 0;
      background:rgba(180,140,249,.12); border:1px solid rgba(180,140,249,.28);
    }
    .fact b{font-size:14px}
    .fact .num{
      font-weight:900; font-size:14px; color:#1c112f;
      padding:6px 10px; border-radius:10px;
      background:linear-gradient(180deg, var(--accent-2-strong), var(--accent-2));
      box-shadow:0 6px 16px rgba(246,211,101,.35);
    }
    .cta{
      padding:14px; border-radius:16px;
      background:linear-gradient(160deg, rgba(246,211,101,.16), rgba(180,140,249,.16));
      border:1px solid rgba(246,211,101,.35);
    }
    .cta .btn{width:100%}

    /* Content */
    .content{min-width:0}
    .article{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.14);
      border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;
    }
    .article h1{
      margin:0 0 12px;
      font-size:34px; line-height:1.2; font-weight:900; letter-spacing:.2px;
      background:linear-gradient(90deg, #e6d7ff, #fff2b6);
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    .divider{
      height:1px; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0));
      margin:14px 0 22px;
    }
    .article h2{
      margin:28px 0 10px; font-size:22px; line-height:1.35; font-weight:800; color:#eadcff;
    }
    .article p{margin:12px 0; color:var(--text)}
    .article ul{margin:12px 0 12px 18px; padding:0}
    .article li{margin:8px 0}
    .callout{
      border-left:4px solid var(--accent-2);
      background:rgba(246,211,101,.08);
      padding:12px 14px; border-radius:12px; margin:16px 0;
    }
    .inline{
      padding:2px 8px; border-radius:999px; font-weight:800; font-size:.9em;
      background:rgba(180,140,249,.18); border:1px solid rgba(180,140,249,.35);
    }

    /* Footer */
    footer{
      border-top:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(20,14,40,.88), rgba(20,14,40,.96));
    }
    .foot-wrap{
      max-width:var(--maxw); margin:0 auto; padding:24px 20px 34px;
      display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:20px;
    }
    .foot h4{margin:0 0 10px; font-size:16px; color:#fff2b6}
    .foot a{
      color:var(--muted); text-decoration:none; display:block; margin:6px 0;
    }
    .foot a:hover{color:#ffffff}
    .foot-brand{
      display:flex; align-items:center; gap:12px;
    }
    .foot-brand img{
      width:36px; height:36px; border-radius:8px; object-fit:cover;
      box-shadow:0 4px 16px rgba(246,211,101,.25);
    }
    .copy{
      border-top:1px solid rgba(255,255,255,.12);
      text-align:center; padding:12px; color:var(--muted); font-size:13px;
    }

    /* Responsive */
    @media (max-width: 980px){
      .grid{grid-template-columns:1fr; gap:18px}
      .sticky{top:90px}
      .article{padding:20px}
      .article h1{font-size:28px}
    }

    /* MOBILE: stack buttons under logo */
    @media (max-width: 620px){
      .head-inner{
        padding:12px 14px;
        flex-wrap:wrap;
        align-items:flex-start;
        gap:10px;
      }
      .logo{width:100%}
      .brand{font-size:26px}
      .spacer{display:none}
      .nav{
        width:100%;
        justify-content:flex-start;
        gap:8px;
        padding-top:6px;
      }
      .nav .btn{
        flex:1 1 0;
        min-width:0;
        padding:10px 12px;
      }
      .wrap{padding:0 14px 56px}
      .article h1{font-size:24px}
      .article h2{font-size:19px}
      .foot-wrap{grid-template-columns:1fr 1fr}
    }

    @media (max-width: 420px){
      .logo img{width:56px; height:56px}
      .brand{font-size:22px}
      .nav .btn{padding:9px 11px; border-radius:10px; font-weight:800}
      .foot-wrap{grid-template-columns:1fr}
    }
  
    a.btn{display:inline-block;text-align:center;text-decoration:none}
    .sig{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
    .copy a{color:var(--muted)}
    @media (max-width:620px){.nav a.btn{white-space:nowrap;padding-left:8px;padding-right:8px}}
    .guide-links a{display:block;padding:6px 0;color:var(--text);font-size:14px;text-decoration:underline;text-underline-offset:3px}
    @media (max-width:980px){.content{order:-1}}
    .crumbs{font-size:13px;color:var(--muted);margin:0 0 14px}
    .crumbs a{color:var(--muted)}
    .checked{font-size:13px;color:var(--muted);margin:0}
    .cover{margin:0 0 18px}
    .cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
    .article a:not(.btn){color:#fff2b6;text-underline-offset:3px}
    .article ol{margin:12px 0 12px 22px;padding:0}
    .article h3{margin:20px 0 6px;font-size:17px;line-height:1.4;font-weight:800;color:#fff2b6}
    .tbl{overflow-x:auto;margin:16px 0}
    .tbl table{width:100%;border-collapse:collapse;font-size:15px}
    .tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.14)}
    .tbl th{color:#fff2b6;background:rgba(180,140,249,.12);font-weight:800;white-space:nowrap}
    .cta-box{margin:20px 0;padding:16px;border-radius:16px;background:linear-gradient(160deg,rgba(246,211,101,.16),rgba(180,140,249,.16));border:1px solid rgba(246,211,101,.35)}
    .related{margin-top:28px}
    .related ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
    .related li{margin:0}
    .related a{display:block;padding:10px 12px;border-radius:12px;background:rgba(180,140,249,.12);border:1px solid rgba(180,140,249,.28)}
    .foot a[href="#"]{display:none}