.blog-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.blog-page main{flex:1}
.blog-index{max-width:1000px;padding-top:76px;padding-bottom:96px}
.blog-intro{margin-bottom:44px}
.blog-intro h1{font-family:var(--display);font-size:clamp(40px,6vw,60px);line-height:1.08;
  letter-spacing:-.035em;margin:0}
.blog-intro p{font-size:20px;color:var(--muted);margin:16px 0 0}
.blog-list{display:grid;gap:24px}
.blog-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;
  align-items:center;padding:32px;border:1px solid var(--line-strong);border-radius:18px;
  background:linear-gradient(140deg,var(--surface),var(--bg-raised));text-decoration:none;
  transition:border-color .15s,background .15s}
.blog-card:hover{border-color:#425773;background:var(--surface)}
.blog-card h2{font-size:clamp(24px,3vw,30px);line-height:1.18;letter-spacing:-.025em;text-wrap:pretty}
.blog-card-description{color:var(--muted);margin:18px 0 0;font-size:16px;line-height:1.65}
.blog-date{display:block;font-size:14px;color:var(--muted);margin:0 0 16px}
.blog-cover{width:100%;height:auto;max-width:360px;justify-self:center}
.blog-docs-link{margin:48px 0 0;color:var(--muted);font-size:15px}
.blog-docs-link a{color:var(--accent);text-decoration:none}
.blog-docs-link a:hover{text-decoration:underline;text-underline-offset:3px}

.post-wrap{padding-top:40px;padding-bottom:96px}
.post-back{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:14px;
  text-decoration:none;margin-bottom:36px}
.post-back:hover{text-decoration:underline;text-underline-offset:3px}
.post-back svg{width:17px;height:17px}
.post-layout{display:grid;grid-template-columns:minmax(0,760px) 200px;gap:64px;align-items:start}
.post-content{min-width:0}
.post-header{margin-bottom:44px}
.post-date{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 16px}
.post-header h1{font-family:var(--display);font-size:clamp(32px,4.4vw,48px);line-height:1.12;
  letter-spacing:-.035em;text-wrap:pretty;margin:0}
.post-lead{font-size:20px;line-height:1.6;color:#cdd6e0;margin:20px 0 0}
.post-content section{padding:0;margin:48px 0 0;scroll-margin-top:92px}
.post-content h2{font-size:28px;line-height:1.25;letter-spacing:-.025em;text-wrap:pretty;margin:0 0 18px}
.post-content h3{font-size:19px;line-height:1.4;letter-spacing:-.015em;margin:30px 0 12px;
  scroll-margin-top:92px}
.post-content p,.post-content li{color:#c3ccd7}
.post-content p{margin:16px 0}
.post-content strong{color:var(--text);font-weight:600}
.post-content a{color:var(--accent);text-underline-offset:3px}
.post-content ul,.post-content ol{padding-left:23px;margin:16px 0}
.post-content li+li{margin-top:8px}
.post-content p code,.post-content li code,.post-content td code{white-space:normal;overflow-wrap:anywhere}
.post-note{padding:16px 20px;margin:24px 0;border-left:3px solid var(--accent);
  background:rgba(77,157,255,.06);border-radius:0 10px 10px 0}
.post-note p{margin:0}
.post-screenshot{max-width:360px;margin:28px auto}
.post-screenshot img{width:100%;height:auto;border:1px solid var(--line-strong);border-radius:12px;filter:brightness(.9)}
.post-screenshot figcaption{color:var(--muted);font-size:13px;line-height:1.6;text-align:center;margin-top:12px}
.screenshot-zoom{display:block;cursor:zoom-in}
.screenshot-viewer{padding:0;border:0;background:transparent;color:var(--text);
  max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);overflow:visible}
.screenshot-viewer::backdrop{background:rgba(0,0,0,.85)}
.screenshot-viewer img{width:auto;height:auto;max-width:calc(100vw - 32px);
  max-height:calc(100svh - 32px);border-radius:12px;cursor:zoom-out}
.screenshot-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;
  width:36px;height:36px;padding:8px;border:1px solid var(--line-strong);border-radius:50%;
  background:rgba(12,16,23,.9);color:var(--text);cursor:pointer}
.screenshot-close:hover{background:var(--surface-2)}
.screenshot-close svg{width:18px;height:18px}
.fido-diagram{margin:28px 0;padding:20px;border:1px solid var(--line-strong);
  border-radius:14px;background:var(--bg-raised)}
.fido-diagram img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.fido-diagram figcaption{color:var(--muted);font-size:13px;line-height:1.6;text-align:center;margin-top:4px}
.post-code{border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-raised);
  overflow:hidden;margin:22px 0}
.post-code-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 16px;border-bottom:1px solid var(--line);color:var(--muted);font:11.5px var(--mono)}
.post-code pre{padding:18px 20px;margin:0;overflow:auto;font-size:13.5px;line-height:1.75;tab-size:2}
.post-code code{font:inherit;color:#d4e5fc;background:none;border:0;padding:0;white-space:pre}
.copy-command{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;color:var(--muted);border:0;border-radius:6px;padding:6px;background:none;cursor:pointer}
.copy-command:hover{color:var(--text);background:var(--surface-2)}
.copy-command svg{width:16px;height:16px;flex-shrink:0}
.copy-command .copy-check{display:none}
.copy-command[data-copy-state="copied"]{color:var(--accent-2)}
.copy-command[data-copy-state="copied"] .copy-icon{display:none}
.copy-command[data-copy-state="copied"] .copy-check{display:block}
.copy-feedback{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.copy-command[data-copy-state="fallback"] .copy-feedback{position:static;width:auto;height:auto;
  margin:0;overflow:visible;clip-path:none}
.copy-command[hidden]{display:none}
.post-table{overflow-x:auto;margin:24px 0;border:1px solid var(--line-strong);border-radius:12px}
.post-table table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.6}
.post-table th,.post-table td{text-align:left;padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--line)}
.post-table th{color:var(--text);font-weight:600;background:var(--bg-raised)}
.post-table td{color:#c3ccd7}
.post-table tr:last-child td{border-bottom:0}
.post-table td:first-child{white-space:nowrap}
.post-toc{position:sticky;top:92px;border-left:1px solid var(--line-strong);padding:4px 0 4px 20px}
.post-toc-title{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.post-toc a{display:block;color:var(--muted);font-size:13px;line-height:1.5;padding:6px 0;text-decoration:none}
.post-toc a:hover,.post-toc a[aria-current="location"]{color:var(--accent)}
.post-toc-mobile{display:none}
.tunnel-diagram{margin:28px 0;padding:28px 20px 20px;border:1px solid var(--line-strong);
  border-radius:14px;background:var(--bg-raised)}
.tunnel-route{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);align-items:center;gap:12px}
.tunnel-node{text-align:center;min-width:0}
.tunnel-node svg{width:40px;height:40px;color:#a7c7e9;margin:0 auto 12px}
.tunnel-node strong{display:block;font-size:15px}
.tunnel-node span{display:block;color:var(--muted);font:12px/1.7 var(--mono);margin-top:6px;overflow-wrap:anywhere}
.tunnel-link{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--accent-2)}
.tunnel-link span{font:10px/1.5 var(--mono);text-align:center}
.tunnel-link svg{width:100%;height:18px}
.tunnel-diagram figcaption{color:var(--muted);font-size:13px;line-height:1.6;text-align:center;margin-top:24px}

@media (max-width:960px){
  .blog-card{gap:28px;padding:28px}
  .post-layout{grid-template-columns:minmax(0,1fr);max-width:760px;margin:0 auto}
  .post-back{margin-left:max(0px,calc((100% - 760px)/2))}
  .post-toc{display:none}
  .post-toc-mobile{display:block;border:1px solid var(--line-strong);border-radius:12px;
    padding:14px 18px;margin:30px 0;background:var(--bg-raised)}
  .post-toc-mobile summary{font-size:14px;cursor:pointer;color:var(--text)}
  .post-toc-mobile nav{padding-top:10px}
  .post-toc-mobile a{display:block;padding:6px 0;font-size:14px;text-decoration:none}
}
@media (max-width:640px){
  .blog-index{padding-top:44px;padding-bottom:64px}
  .blog-intro{margin-bottom:30px}
  .blog-intro p{font-size:18px}
  .blog-card{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px}
  .blog-docs-link{margin-top:30px}
  .post-wrap{padding-top:24px;padding-bottom:64px}
  .post-back{margin-bottom:28px}
  .post-lead{font-size:18px}
  .post-header{margin-bottom:32px}
  .post-content h2{font-size:25px}
  .post-content section{margin-top:40px}
  .post-code pre{padding:16px;font-size:12.5px}
  .post-table th,.post-table td{padding:12px}
  .tunnel-diagram{padding:24px 14px 18px}
  .tunnel-route{grid-template-columns:minmax(0,1fr);gap:18px}
  .tunnel-link{flex-direction:row;justify-content:center;gap:12px}
  .tunnel-link svg{width:56px;transform:rotate(90deg)}
  .tunnel-link span{max-width:90px}
}