:root { color-scheme: dark; --ink:#f8fbf7; --muted:#b8c5bf; --panel:#17231f; --panel-soft:#1d2d27; --mint:#73e6b1; --gold:#ffc85a; --coral:#ff786f; --line:rgba(255,255,255,.11); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,rgba(115,230,177,.14),transparent 32rem),radial-gradient(circle at 95% 10%,rgba(255,200,90,.09),transparent 28rem),#0d1512; color:var(--ink); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--mint); } a:hover { color:#a2f5cf; }
.shell { width:min(980px,calc(100% - 32px)); margin:0 auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-weight:800; text-decoration:none; }
.mark { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:var(--coral); box-shadow:0 8px 24px rgba(255,120,111,.22); color:#17110f; font-size:21px; }
nav { display:flex; flex-wrap:wrap; gap:8px 18px; } nav a { color:var(--muted); text-decoration:none; font-weight:650; } nav a[aria-current="page"] { color:var(--gold); }
main { padding:46px 0 72px; }
.eyebrow { color:var(--gold); font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:760px; margin:8px 0 14px; font-size:clamp(2.25rem,7vw,4.75rem); line-height:1.02; letter-spacing:-.055em; }
.lead { max-width:720px; margin:0 0 38px; color:var(--muted); font-size:1.15rem; }
.card { margin:18px 0; padding:clamp(22px,4vw,38px); border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(29,45,39,.95),rgba(18,29,25,.92)); box-shadow:0 24px 70px rgba(0,0,0,.2); }
.card h2 { margin:0 0 8px; font-size:1.35rem; } .card p:last-child,.card ol:last-child,.card ul:last-child { margin-bottom:0; } .card p,.card li { color:var(--muted); } .card strong { color:var(--ink); }
.step-list { padding-left:24px; } .step-list li { margin:11px 0; padding-left:7px; }
.action { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:10px; padding:10px 18px; border-radius:14px; background:var(--mint); color:#0b251a; font-weight:800; text-decoration:none; } .action:hover { background:#a2f5cf; color:#0b251a; }
.notice { border-left:4px solid var(--gold); } .meta { color:var(--muted); font-size:.94rem; }
footer { display:flex; justify-content:space-between; gap:20px; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem; }
@media (max-width:680px) { header,footer { align-items:flex-start; flex-direction:column; } main { padding-top:28px; } nav { gap:6px 14px; } }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }