:root{--bg:#090c11;--bg2:#12161d;--line:#232a35;--text:#e8ecf2;--mute:#9aa4b2;--orange:#ff7a1a;--amber:#ffb347;--cyan:#1ec8f0;--ice:#5ee0ff;--slate:#5b6b85}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 "Exo 2",system-ui,sans-serif}
a{color:var(--ice)}a:hover{color:var(--amber)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:var(--bg2)}
header.site .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
header.site img{height:36px;display:block}
header.site nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
header.site nav a{color:var(--text);text-decoration:none;font-weight:600}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--orange)}
h1,h2,h3{line-height:1.2}
h1,.brand{font-family:Michroma,"Exo 2",sans-serif;letter-spacing:.02em}
h1{font-size:2rem}h2{margin-top:2.2em;font-size:1.5rem}
.open{color:#fff}.billow{color:var(--cyan)}
.hero{text-align:center;padding:48px 0 24px}
.hero img{max-width:min(640px,100%);height:auto}
.hero .tag{color:var(--mute);letter-spacing:.2em;text-transform:uppercase;font-size:.85rem}
.btn{display:inline-block;padding:12px 26px;border-radius:8px;font-weight:700;text-decoration:none;color:#0b0d11;background:linear-gradient(90deg,var(--orange),var(--amber));margin:6px}
.btn.alt{background:linear-gradient(90deg,var(--cyan),var(--ice))}
.btn:hover{filter:brightness(1.1);color:#0b0d11}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:24px 0}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:20px 24px}
.card h3{margin-top:0}
.card.free{border-top:3px solid var(--slate)}.card.paid{border-top:3px solid var(--orange)}
.note{border-left:3px solid var(--cyan);background:var(--bg2);padding:10px 18px;border-radius:0 8px 8px 0}
.todo{background:#3a2a10;color:var(--amber);padding:0 6px;border-radius:4px}
main img{max-width:100%;height:auto;border-radius:8px}
pre,code{background:var(--bg2);border-radius:6px;font-size:.92em}
code{padding:1px 6px}pre{padding:14px;overflow-x:auto}pre code{padding:0}
table{border-collapse:collapse;width:100%;overflow-x:auto;display:block}
td,th{border:1px solid var(--line);padding:6px 10px;text-align:left}
footer.site{border-top:1px solid var(--line);margin-top:64px;padding:28px 0;color:var(--mute);font-size:.9rem}
footer.site a{color:var(--mute)}
footer.site .links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}