@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(/fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root{
  --bg:#05070a; --panel:#12171a; --panel-2:#171d21; --line:#232b30;
  --text:#e7edf0; --muted:#7c8a91; --pos:#16c784; --neg:#ea3943; --amber:#f0b90b;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'JetBrains Mono',monospace; font-size:15px; line-height:1.8; }
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }

header.site{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:760px; margin:0 auto; padding:18px 24px; }
header.site .brand{ display:flex; align-items:center; gap:8px; color:var(--text); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; }
header.site .brand:hover{ text-decoration:none; }
header.site .brand img{ width:26px; height:26px; }
header.site nav{ display:flex; align-items:center; gap:16px; font-size:13px; }
header.site nav a.play{ background:var(--amber); color:#0a0d0f; font-weight:700; padding:7px 14px; border-radius:8px; }
header.site nav a.play:hover{ text-decoration:none; opacity:.9; }

.wrap{ max-width:760px; margin:0 auto; padding:8px 24px 70px; }
.crumbs{ font-size:12px; color:var(--muted); margin:6px 0 26px; }
.crumbs a{ color:var(--muted); }

h1{ font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,5vw,36px); line-height:1.25; margin:0 0 10px; }
h2{ font-family:'Space Grotesk',sans-serif; font-size:22px; line-height:1.3; margin:40px 0 10px; }
h3{ font-family:'Space Grotesk',sans-serif; font-size:17px; margin:26px 0 6px; }
p, li{ color:#c5cfd4; }
p{ margin:12px 0; }
ul, ol{ padding-left:22px; margin:12px 0; }
li{ margin:6px 0; }
strong{ color:var(--text); }
.meta{ color:var(--muted); font-size:12.5px; margin:0 0 26px; }
.lead{ font-size:16.5px; color:var(--text); }

table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:13.5px; }
th, td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.tableWrap{ overflow-x:auto; }

.callout{ background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:8px; padding:12px 16px; margin:22px 0; font-size:14px; }
.callout p{ margin:6px 0; }

.cta{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:40px 0 10px; text-align:center; }
.cta h2{ margin:0 0 6px; font-size:19px; }
.cta p{ margin:6px 0 14px; color:var(--muted); font-size:14px; }
.cta a.btn{ display:inline-block; background:var(--amber); color:#0a0d0f; font-weight:700; padding:11px 22px; border-radius:8px; }
.cta a.btn:hover{ text-decoration:none; opacity:.9; }

.related{ margin-top:46px; padding-top:20px; border-top:1px solid var(--line); }
.related h2{ margin-top:0; font-size:18px; }
.related ul{ list-style:none; padding:0; }
.related li{ margin:10px 0; }

.postList{ list-style:none; padding:0; margin:22px 0 0; }
.postList li{ margin:0 0 14px; }
.postList a.card{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 20px; color:var(--text); }
.postList a.card:hover{ border-color:var(--amber); text-decoration:none; }
.postList .t{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; margin-bottom:4px; }
.postList .d{ display:block; color:var(--muted); font-size:13.5px; line-height:1.6; }

.patterns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:20px 0; }
.pattern{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; }
.pattern svg{ display:block; margin:0 auto 8px; }
.pattern b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:15px; margin-bottom:2px; }
.pattern span{ display:block; color:var(--muted); font-size:12.5px; line-height:1.5; }

footer.site{ max-width:760px; margin:0 auto; padding:26px 24px 50px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.7; }
footer.site a{ color:var(--muted); text-decoration:underline; }