:root{
  --bg:#F6F5F1; --ink:#15140F; --text-2:rgba(21,20,15,.68); --text-3:rgba(21,20,15,.46); --hair:rgba(21,20,15,.08);
  --blue:#2346F0; --blue-50:#EEF2FF; --up:#12A150; --down:#E5484D;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Geist",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --raised:0 1px 2px rgba(21,20,15,.06),0 2px 8px rgba(21,20,15,.04);
  --edge:inset 0 0 0 1px rgba(255,255,255,.75);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text-2);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20% -10% auto;height:620px;z-index:-1;background:radial-gradient(40% 60% at 15% 20%,#CFE0FF,transparent 70%),radial-gradient(35% 55% at 90% 10%,#FFD9C2,transparent 70%);opacity:.8;pointer-events:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
img{display:block}

.bnav{position:sticky;top:12px;z-index:20;margin:12px auto 0;width:min(920px,100% - 24px);display:flex;align-items:center;gap:20px;padding:8px 8px 8px 16px;border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:var(--edge),var(--raised)}
.logo{display:flex;align-items:center;gap:8px;font:600 20px/1 var(--sans);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.logo img{width:26px;height:26px}
.bnav nav{display:flex;gap:4px;font-size:14px}
.bnav nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--text-2)}
.bnav nav a:hover{background:rgba(21,20,15,.05);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn-ink{background:var(--ink);color:#fff;margin-left:auto}
.btn-ink:hover{background:#2A2922}
.btn-soft{background:rgba(21,20,15,.06);color:var(--ink)}

.post-wrap{width:min(720px,100% - 32px);margin:72px auto 96px}
.back{font-size:14px;color:var(--text-3);text-decoration:none}
.back:hover{color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0 12px;font-size:14px;color:var(--text-3)}
.meta b{color:var(--blue);font-weight:500}
h1{font:400 clamp(40px,6vw,64px)/1.02 var(--serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.dek{font-size:20px;line-height:1.5;color:var(--text-2);margin-top:18px}
.tldr{margin:36px 0;padding:22px 24px;border-radius:20px;background:rgba(255,255,255,.7);box-shadow:var(--edge),var(--raised)}
.tldr > strong{display:block;font:500 13px var(--mono);color:var(--blue);margin-bottom:8px;letter-spacing:.02em}
.tldr ul{padding-left:18px;display:grid;gap:6px;color:var(--ink)}
article h2{font:400 clamp(30px,3.6vw,40px)/1.08 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:56px 0 14px}
article h3{font:600 19px/1.35 var(--sans);color:var(--ink);margin:32px 0 8px;letter-spacing:-.01em}
article p{margin:14px 0}
article p strong,article li strong{color:var(--ink);font-weight:600}
article ul,article ol{padding-left:22px;margin:14px 0;display:grid;gap:8px}
article a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
article code{font:400 .88em var(--mono);background:rgba(21,20,15,.06);padding:2px 6px;border-radius:6px;color:var(--ink)}
pre{margin:20px 0;padding:20px 22px;border-radius:18px;background:#15140F;color:rgba(255,255,255,.78);font:400 13.5px/1.75 var(--mono);overflow-x:auto}
pre .c{color:rgba(255,255,255,.38)} pre .k{color:#9DB2FF} pre .g{color:#5EDB98} pre .r{color:#FF8E8E}
.tbl{margin:22px 0;overflow-x:auto;border-radius:18px;background:#fff;box-shadow:var(--raised)}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
th{text-align:left;font:500 12px var(--mono);color:var(--text-3);padding:14px 16px;letter-spacing:.02em}
td{padding:13px 16px;color:var(--ink);vertical-align:top}
tbody tr td{box-shadow:inset 0 1px 0 var(--hair)}
td small{display:block;color:var(--text-3);font-size:13px}
.big-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:24px 0}
.big-stat div{padding:20px;border-radius:18px;background:rgba(255,255,255,.7);box-shadow:var(--edge),var(--raised)}
.big-stat b{display:block;font:400 48px/1 var(--serif);color:var(--ink);letter-spacing:-.03em}
.big-stat b em{color:var(--blue)}
.big-stat span{display:block;margin-top:8px;font-size:14px;line-height:1.5}
.big-stat small{display:block;margin-top:8px;font:400 12px var(--mono);color:var(--text-3)}
.note{margin:22px 0;padding:16px 20px;border-radius:16px;background:var(--blue-50);color:var(--ink);font-size:15px}
.note b{color:var(--blue)}
.hand{font:500 26px/1.1 "Caveat",cursive;color:var(--blue)}
.cta-box{margin:56px 0 0;padding:32px;border-radius:28px;background:#15140F;color:rgba(255,255,255,.66);position:relative;overflow:hidden}
.cta-box::before{content:"";position:absolute;inset:-60% 30% auto;height:360px;background:radial-gradient(closest-side,rgba(76,111,255,.4),transparent);pointer-events:none}
.cta-box h3{font:400 34px/1.05 var(--serif);color:#fff;margin:0 0 10px;position:relative}
.cta-box p{position:relative;margin:0 0 20px}
.cta-box .row{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.cta-box .btn-ink{background:#fff;color:var(--ink);margin:0}
.cta-box .btn-soft{background:rgba(255,255,255,.1);color:#fff}
.src{font-size:14px;color:var(--text-3)}
.src li{word-break:break-word}
.author{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:14px;color:var(--text-3)}
.author img{width:36px;height:36px}
.author b{color:var(--ink);font-weight:500;display:block}

/* blog index */
.bi{width:min(1100px,100% - 32px);margin:72px auto 96px}
.bi h1{margin-bottom:12px}
.bi .dek{max-width:560px;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;padding:12px;border-radius:24px;transition:background .2s}
.card:hover{background:rgba(255,255,255,.65)}
.card .cv{border-radius:18px;aspect-ratio:1.7;display:grid;place-items:center;overflow:hidden;font:400 44px/1 var(--serif);letter-spacing:-.02em}
.card h2{font:500 22px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0}
.card p{font-size:15px;margin:0}
.cv-a{background:linear-gradient(150deg,#FFF4EC,#FFD9C2);color:var(--ink)}
.cv-b{background:#141311;color:#fff}
.cv-b em{color:#8FA6FF}
.cv-c{background:radial-gradient(120% 90% at 30% 10%,#6E8BFF,#2346F0 60%,#1A33B8);color:#fff}
.cv-d{background:#15140F;color:#9DB2FF;font:400 18px/1.7 var(--mono)!important;text-align:left;padding:24px}

footer{width:min(1100px,100% - 32px);margin:0 auto;padding:32px 0 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--text-3)}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
@media (max-width:767px){.bnav nav{display:none}.grid{grid-template-columns:1fr}.post-wrap{margin-top:48px}.cta-box{padding:24px}body{font-size:16px}}