:root { color-scheme: dark; --bg:#071019; --panel:#101d2c; --panel2:#14243a; --text:#f6f8fb; --muted:#afbdcd; --line:#29445d; --cyan:#5eead4; --violet:#a78bfa; --danger:#fca5a5; --max:1080px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:radial-gradient(circle at 20% -5%,#173854 0,transparent 30rem),linear-gradient(160deg,#071019,#0a1421 52%,#071019); color:var(--text); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:var(--cyan); } a:hover { color:#99f6e4; } .shell { width:min(calc(100% - 2rem),var(--max)); margin:auto; } .skip { position:absolute; left:-999px; } .skip:focus { left:1rem; top:1rem; z-index:9; background:white; color:#111; padding:.6rem 1rem; border-radius:.5rem; } header { border-bottom:1px solid var(--line); backdrop-filter:blur(12px); position:sticky; top:0; z-index:2; background:#071019e8; } .bar { min-height:66px; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .brand { text-decoration:none; color:white; font-weight:800; letter-spacing:-.02em; } nav { display:flex; gap:1rem; flex-wrap:wrap; } nav a { color:var(--muted); text-decoration:none; font-size:.9rem; } .hero { padding:5rem 0 2.8rem; position:relative; overflow:hidden; } .eyebrow,.badge { display:inline-flex; align-items:center; gap:.35rem; border:1px solid #397178; color:#a7f3d0; border-radius:999px; padding:.24rem .7rem; font-size:.82rem; font-weight:700; } .badge.expired { color:var(--danger); border-color:#82535c; } h1 { font-size:clamp(2.35rem,8vw,4.6rem); line-height:1.04; letter-spacing:-.055em; max-width:15ch; margin:.7rem 0 1rem; } h2 { font-size:clamp(1.55rem,4vw,2.25rem); letter-spacing:-.035em; line-height:1.18; margin:0 0 .65rem; } h3 { font-size:1.15rem; margin:0; } .lead { max-width:45rem; color:#d5deea; font-size:1.1rem; } .summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:2rem; max-width:46rem; } .stat,.code-card,.surface,.image-slot { background:linear-gradient(145deg,#13253a,#0d1929); border:1px solid var(--line); border-radius:1rem; } .stat { padding:1rem; } .stat strong { display:block; font-size:1.25rem; } .muted { color:var(--muted); } main section { padding:3.7rem 0; border-top:1px solid #1b3146; } .section-copy { max-width:45rem; color:var(--muted); margin-top:0; } .code-grid { display:grid; gap:1rem; margin-top:1.4rem; } .code-card { padding:1.15rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; } .code { font:700 clamp(1.3rem,4vw,1.8rem)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; margin:.35rem 0; overflow-wrap:anywhere; } .reward { color:#a7f3d0; font-weight:700; } button,.cta { border:0; border-radius:.7rem; min-height:44px; padding:.65rem 1rem; font:inherit; font-weight:800; cursor:pointer; } button { background:var(--cyan); color:#03201d; } button:hover,.cta:hover { filter:brightness(1.1); } button:focus-visible,a:focus-visible { outline:3px solid var(--violet); outline-offset:3px; } .cta { display:inline-flex; text-decoration:none; background:var(--violet); color:#170d38; margin-top:1.25rem; align-items:center; } .grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .surface,.image-slot { padding:1.25rem; } ol,ul { padding-left:1.25rem; } li+li { margin-top:.55rem; } .image-slot { min-height:180px; display:grid; align-content:center; background:repeating-linear-gradient(135deg,#11243a,#11243a 9px,#0f1e30 9px,#0f1e30 18px); } figure { margin:0; } .guide-image { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:1rem; } figcaption { color:var(--muted); font-size:.88rem; margin:.5rem .2rem 1rem; } details { border-bottom:1px solid var(--line); padding:1rem 0; } summary { cursor:pointer; font-weight:750; } footer { padding:3rem 0; color:var(--muted); border-top:1px solid var(--line); font-size:.92rem; } .links { display:flex; gap:1rem; flex-wrap:wrap; } @media (max-width:620px) { .hero { padding-top:3.3rem; } .summary,.grid2 { grid-template-columns:1fr; } .code-card { grid-template-columns:1fr; } nav { gap:.7rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }