:root{--bg:#000;--ink:#f4f8ff;--dim:#9fb3cc;--glow:#2f8cff;--glow2:#7fd4ff;--panel:rgba(8,14,26,.85);--warn:#7fd4ff;--font:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--font);min-height:100vh}
a{color:var(--glow2);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--glow2);outline-offset:3px}
.banner{position:sticky;top:0;z-index:50;background:#021028;color:var(--warn);border-bottom:1px solid color-mix(in srgb,var(--glow) 45%,transparent);box-shadow:0 0 28px color-mix(in srgb,var(--glow) 35%,transparent);padding:12px 18px;text-align:center;font-weight:700;letter-spacing:.02em}
.banner small{display:block;font-weight:500;color:var(--dim);margin-top:4px;font-size:.82rem}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px clamp(16px,4vw,48px)}
.mark{font-weight:800;color:var(--ink);text-decoration:none}.mark span{color:var(--glow2);text-shadow:0 0 14px var(--glow)}
nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
nav a{color:var(--dim);text-decoration:none;font-size:.9rem}nav a:hover{color:var(--ink)}
main{max-width:820px;margin:0 auto;padding:24px clamp(16px,4vw,40px) 80px}
h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 8px;letter-spacing:-.02em;color:var(--glow2);text-shadow:0 0 24px var(--glow)}
.meta{color:var(--dim);font-size:.9rem;margin:0 0 28px}
h2{font-size:1.25rem;margin:28px 0 8px;color:var(--ink)}
p,li{color:#d6e2f2}ul{padding-left:1.2rem}li{margin:6px 0}
.card{background:var(--panel);border-radius:16px;padding:22px 24px;margin:18px 0;box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 18%,transparent),0 10px 40px -12px color-mix(in srgb,var(--glow) 40%,transparent)}
footer{max-width:820px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 48px;color:var(--dim);font-size:.85rem}
footer a{margin-right:12px}