:root { --bg:#0f1414; --card:#161d1d; --fg:#e8f0ef; --muted:#9fb0ae; --accent:#2ec4b6; --accent2:#8b5cf6; --line:#243230; }
@media (prefers-color-scheme: light){ :root{ --bg:#f6faf9; --card:#ffffff; --fg:#12201e; --muted:#5b6b68; --accent:#159e91; --accent2:#7c4ddb; --line:#e3ecea; } }
*{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; }
.wrap{ max-width:760px; margin:0 auto; padding:32px 20px 64px; }
header.site{ display:flex; align-items:center; gap:12px; padding:20px; max-width:760px; margin:0 auto; }
header.site .logo{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:22px; }
header.site .name{ font-weight:800; font-size:20px; letter-spacing:.5px; }
h1{ font-size:32px; line-height:1.2; margin:8px 0 4px; }
.updated{ color:var(--muted); font-size:14px; margin-bottom:28px; }
h2{ font-size:20px; margin:32px 0 8px; }
p,li{ color:var(--fg); }
a{ color:var(--accent); }
.card{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; }
.hero{ text-align:center; padding:56px 24px; }
.hero .tag{ color:var(--muted); font-size:18px; max-width:520px; margin:12px auto 28px; }
.cta{ display:inline-block; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; text-decoration:none; font-weight:700; padding:14px 28px; border-radius:999px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
@media (max-width:520px){ .grid{ grid-template-columns:1fr; } h1{ font-size:26px; } }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; }
.tile .ic{ font-size:24px; }
footer{ border-top:1px solid var(--line); margin-top:48px; padding:24px 20px; text-align:center; color:var(--muted); font-size:14px; }
footer a{ color:var(--muted); margin:0 10px; }
.note{ background:rgba(139,92,246,.08); border:1px solid var(--line); border-radius:12px; padding:12px 16px; color:var(--muted); font-size:14px; }