:root{
  --bg:#0c0708; --panel:#160a0e; --ink:#e9f3ef; --grn:#ff3b5c; --grn2:#ff7088;
  --dim:#9a8488; --dim2:#6a5258; --line:rgba(255,59,92,.14);
  --display:'Space Grotesk',system-ui,sans-serif; --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--grn2)}
a:hover{color:var(--grn)}
::selection{background:var(--grn);color:#000}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px max(5vw,20px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:.06em;color:#fff;text-decoration:none}
.logo .mark{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--grn);position:relative;flex:none}
.logo .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--grn);opacity:.7;box-shadow:0 0 8px var(--grn)}
.cta{font-weight:700;font-size:.85rem;color:#0c0708;background:var(--grn);padding:9px 18px;border-radius:3px;text-decoration:none;white-space:nowrap}
.cta:hover{color:#0c0708;filter:brightness(1.1)}
main{max-width:760px;margin:0 auto;padding:56px max(5vw,20px) 72px}
.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--grn);margin-bottom:12px}
h1{font-family:var(--display);font-size:clamp(2rem,6vw,2.8rem);line-height:1.15;margin-bottom:10px}
.meta{color:var(--dim);font-size:.88rem;margin-bottom:36px}
h2{font-family:var(--display);font-size:1.3rem;margin:40px 0 12px;color:#fff}
h3{font-size:1rem;margin:22px 0 8px;color:#fff}
p,li{color:#cfc4c6;font-size:.98rem}
p{margin-bottom:14px}
ul,ol{padding-left:22px;margin-bottom:14px}
li{margin-bottom:6px}
strong{color:#fff}
.callout{border:1px solid var(--line);background:var(--panel);border-left:3px solid var(--grn);padding:16px 18px;border-radius:4px;margin:18px 0 24px}
.callout p:last-child{margin-bottom:0}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.toc a{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:6px 10px;border-radius:3px;text-decoration:none;color:var(--dim)}
.toc a:hover{color:var(--grn);border-color:var(--grn)}
code{font-family:var(--mono);font-size:.88em;background:rgba(255,59,92,.08);padding:1px 5px;border-radius:3px}
footer{border-top:1px solid rgba(255,59,92,.08);padding:28px max(5vw,20px) 36px;text-align:center;color:var(--dim2);font-family:var(--mono);font-size:.75rem;line-height:2;letter-spacing:.04em}
footer nav a{color:var(--dim);margin:0 8px;text-decoration:none}
footer nav a:hover{color:var(--grn)}
footer .heart{color:var(--grn)}
footer .by a{color:var(--dim);text-decoration:underline;text-underline-offset:3px}