:root{
  --bg:#0b0f14;
  --panel:#0f1520;
  --text:#e9eef6;
  --muted:#a9b4c4;
  --line:rgba(233,238,246,.12);
  --accent:#d6c58a;
  --accent2:#7fb3ff;
  --maxw:1080px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 15% 10%, rgba(127,179,255,.10), transparent 60%),
radial-gradient(1000px 700px at 80% 0%, rgba(214,197,138,.08), transparent 55%),
var(--bg);color:var(--text);font-family:var(--sans);line-height:1.55}
a{color:var(--text);text-decoration:none}
a:hover{color:#fff;text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:28px 18px}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
background:linear-gradient(to bottom, rgba(11,15,20,.86), rgba(11,15,20,.60));
border-bottom:1px solid var(--line)}
.nav{display:flex;gap:14px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg, rgba(214,197,138,.22), rgba(127,179,255,.18));
border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px}
.brand-title{display:flex;flex-direction:column;gap:2px}
.brand-title b{font-size:15px}
.brand-title span{font-size:12px;color:var(--muted)}
.links{display:flex;gap:10px;flex-wrap:wrap}
.links a{padding:8px 10px;border:1px solid transparent;border-radius:10px;color:var(--muted)}
.links a.active{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.03)}
.links a:hover{border-color:var(--line);color:var(--text);text-decoration:none}
.hero{padding:28px 0 10px 0}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
background:rgba(255,255,255,.02);color:var(--muted);font-size:12px}
.kicker i{font-style:normal;color:var(--accent)}
h1{font-size:42px;line-height:1.12;margin:14px 0 10px 0}
.subtitle{color:var(--muted);font-size:16px;max-width:70ch}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:18px}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px 0;font-size:16px}
.card p{margin:0 0 10px 0;color:var(--muted)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{font-size:12px;color:var(--muted);padding:6px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.12)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.button{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);
background:rgba(255,255,255,.04);color:var(--text);text-decoration:none}
.button:hover{background:rgba(255,255,255,.06);text-decoration:none}
.button .dot{width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 4px rgba(214,197,138,.10)}
.section{margin-top:18px}
.section h3{margin:0 0 10px 0;font-size:14px;color:var(--text);letter-spacing:.2px}
.section p{margin:0 0 10px 0;color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.small{font-size:12px;color:var(--muted)}
code,pre{font-family:var(--mono)}
pre{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto}
.footer{margin-top:26px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
@media (max-width:860px){h1{font-size:34px}.grid{grid-template-columns:1fr}.header{position:relative}}

/* Responsive navigation and readable article layout on phones */
img,svg{max-width:100%}
pre{max-width:100%}
@media (max-width:860px){
  .nav{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}
  .brand{min-width:0;max-width:100%}
  .brand-title{min-width:0}
  .brand-title b,.brand-title span{overflow-wrap:anywhere}
  .links{width:100%;max-width:100%;justify-content:flex-start;gap:6px}
  .links a{font-size:13px;padding:8px 9px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .card,.section,.subtitle{min-width:0;overflow-wrap:break-word}
}
@media (max-width:520px){
  .container{width:100%;max-width:100%;padding:18px 15px}
  .hero{padding-top:18px}
  .brand-title b{font-size:14px}
  .brand-title span{font-size:11px}
  .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .links a{display:block;text-align:center;font-size:12px;padding:9px 6px;white-space:normal;overflow-wrap:anywhere}
  .kicker{max-width:100%;flex-wrap:wrap;white-space:normal}
  h1{font-size:clamp(29px,8vw,34px);overflow-wrap:break-word}
  .article .article-hero h1{font-size:clamp(29px,8vw,38px);max-width:100%;overflow-wrap:break-word}
  .article .article-hero .lead{font-size:17px}
  .article .prose{min-width:0}
  .article .prose p,.article .prose h2{overflow-wrap:break-word}
  .footer{flex-direction:column;align-items:flex-start;gap:7px}
  .cta .button{max-width:100%;white-space:normal}
}