*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:root{
  --bg:#080b10; --bg-2:#0d131b; --panel:#111925; --panel-2:#16202e;
  --line:#1f2c3d; --line-soft:#17212e;
  --ink:#e9eff6; --ink-dim:#9db0c5; --ink-faint:#66788d;
  --accent:#5ccfe6; --accent-2:#7c8cff; --warm:#ffb454; --good:#7ee787;
  --glow:rgba(92,207,230,.5);
  --radius:14px; --maxw:720px; --wide:1120px;
  --pad:clamp(1.15rem,5vw,2rem);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"]{
  --bg:#fafbfd; --bg-2:#f0f4f8; --panel:#fff; --panel-2:#f6f9fc;
  --line:#d9e2ec; --line-soft:#e7eef5;
  --ink:#0d151d; --ink-dim:#48596b; --ink-faint:#78899b;
  --accent:#0c7a90; --accent-2:#4d5bd6; --warm:#a86200; --good:#1a7f37;
  --glow:rgba(12,122,144,.35);
}

body{
  font-family:var(--sans);background:var(--bg);color:var(--ink);
  line-height:1.72;font-size:clamp(1rem,.97rem + .2vw,1.09rem);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}

/* nav */
.nav{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in oklab,var(--bg) 84%,transparent)}
.nav-in{max-width:var(--wide);margin-inline:auto;padding:.75rem var(--pad);
  display:flex;align-items:center;gap:1.2rem}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:.04em;text-decoration:none;font-size:.9rem}
.brand span{color:var(--accent)}
.nav-links{display:flex;gap:1.2rem;margin-left:auto;list-style:none}
.nav-links a{text-decoration:none;font-size:.85rem;color:var(--ink-dim);transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.tgl{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;
  color:var(--ink-dim);transition:border-color .2s,color .2s;flex:none}
.tgl:hover{border-color:var(--accent);color:var(--accent)}
.tgl svg{width:16px;height:16px}
html[data-theme="light"] .i-sun{display:none}
html:not([data-theme="light"]) .i-moon{display:none}

.wrap{max-width:var(--maxw);margin-inline:auto;padding:clamp(2.5rem,7vw,4.5rem) var(--pad)}
.wrap.wide{max-width:var(--wide)}

.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem}
h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,2.9rem);line-height:1.14;letter-spacing:-.03em;font-weight:700}
.sub{color:var(--ink-dim);margin-top:1rem;font-size:clamp(1.02rem,.98rem + .35vw,1.18rem)}
.meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.5rem;padding-top:1.3rem;
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.75rem;color:var(--ink-faint)}
.meta b{color:var(--ink-dim);font-weight:500}

/* article body */
article h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);line-height:1.25;letter-spacing:-.02em;
  font-weight:650;margin:2.8rem 0 .9rem;scroll-margin-top:5rem}
article h3{font-size:1.1rem;font-weight:640;margin:1.9rem 0 .6rem}
article p{margin:1rem 0}
article ul,article ol{margin:1.1rem 0;padding-left:1.3rem}
article li{margin:.45rem 0}
article ul li{list-style:none;position:relative;padding-left:1rem}
article ul li::before{content:"›";position:absolute;left:0;color:var(--accent);font-weight:700}
article ol li{list-style:decimal;color:var(--ink-dim)}
article ol li::marker{color:var(--accent);font-family:var(--mono);font-size:.85em}
article a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in oklab,var(--accent) 40%,transparent)}
article a:not(.btn):hover{text-decoration-color:currentColor}
article strong{color:var(--ink);font-weight:640}

.lead{font-size:1.1em;color:var(--ink-dim)}
.key{background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 8%,transparent),transparent);
  border-left:2px solid var(--accent);border-radius:0 11px 11px 0;padding:1.1rem 1.3rem;margin:1.8rem 0}
.key p{margin:0}
.key b{color:var(--accent)}

figure{margin:1.9rem 0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
.scroll-x{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
th,td{padding:.72rem .95rem;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;color:var(--accent);font-family:var(--mono)}
figcaption{font-size:.76rem;color:var(--ink-faint);margin-top:.7rem;line-height:1.55}

.sources{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem}
.sources h2{font-size:1rem;margin:0 0 .8rem}
.sources li{color:var(--ink-dim);margin:.5rem 0}

/* post list */
.posts{display:grid;gap:1rem;margin-top:2.5rem}
.post{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;transition:border-color .22s,transform .3s var(--ease)}
.post:hover{border-color:color-mix(in oklab,var(--accent) 50%,var(--line));transform:translateY(-3px)}
.post time{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint)}
.post h2{font-size:1.2rem;font-weight:650;letter-spacing:-.015em;margin:.4rem 0 .5rem;line-height:1.3}
.post p{color:var(--ink-dim);font-size:.93rem;margin:0}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tag{font-family:var(--mono);font-size:.67rem;color:var(--ink-dim);background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:6px;padding:.2rem .5rem}

.cta{margin-top:3rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,4vw,2rem);text-align:center}
.cta h2{font-size:1.2rem;margin:0 0 .6rem}
.cta p{color:var(--ink-dim);font-size:.93rem;margin:0 0 1.2rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.4rem;border-radius:10px;
  text-decoration:none;font-weight:600;font-size:.92rem;background:var(--accent);color:#06131a;
  transition:transform .15s,box-shadow .25s}
html[data-theme="light"] .btn{color:#fff}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px var(--glow)}

footer{border-top:1px solid var(--line-soft);padding-block:2rem;color:var(--ink-faint);font-size:.82rem}
.foot{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.foot a{color:var(--ink-dim);text-decoration:none}
.foot a:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}