:root { --bg:#0b0f18; --fg:#e6eefc; --muted:#9bb0d8; --accent:#5bb8ff; }
*{box-sizing:border-box} html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:980px;margin:0 auto;padding:32px 20px}
.hero{text-align:center;padding:60px 20px}
.hero h1{font-size:42px;margin:0 0 10px}
.hero p{color:var(--muted);font-size:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:28px}
.card{background:#121a2a;border:1px solid #1f2a44;border-radius:14px;padding:18px}
.card h3{margin:0 0 8px}
.tag{display:inline-block;font-size:12px;background:#0f1a2d;border:1px solid #223150;color:#bcd0ff;padding:4px 8px;border-radius:999px}
.footer{text-align:center;color:#7e9acf;padding:40px 20px}
.banner{width:100%;max-width:970px;margin:24px auto;background:#0f1a2d;border:1px dashed #2c3f6b;border-radius:10px;padding:12px}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;background:#0f1320;padding:2px 6px;border-radius:6px;color:#cfe6ff}
header{padding:12px 20px;border-bottom:1px solid #1f2a44;display:flex;align-items:center;gap:12px}
.logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#5bb8ff,#8a5bff)}
.small{color:#9bb0d8;font-size:14px}
.btn{display:inline-block;padding:10px 14px;background:#193157;border:1px solid #2f508c;border-radius:10px;color:#cfe6ff}
.btn:hover{background:#1c3968}
.fullscreen-note{font-size:12px;color:#9bb0d8;margin-top:8px}