/* ClickBook blog: reading layout on top of site.css tokens. Copied to site/blog/blog.css by blog/build.mjs. */
.bl{position:relative;background:radial-gradient(48% 26% at 82% 0%,rgba(146,119,253,.12),transparent 70%)}
.bl-wrap{width:min(720px,100%);margin:0 auto;padding:132px 24px 96px}
.bl-wide{width:min(1040px,100%);margin:0 auto;padding:132px 24px 96px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 22px;padding:0;list-style:none;font-size:14px;color:var(--t50)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--t30)}
.crumbs a:hover{color:#fff}
.post-h1{font-size:clamp(32px,4.8vw,52px);font-weight:600;line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;background:var(--grad-silver);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.post-dek{font-size:19px;line-height:1.55;color:var(--t70);margin:0 0 22px}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font:400 13px var(--f-mono);color:var(--t50);margin:0 0 36px;padding-bottom:28px;border-bottom:1px solid var(--hair)}
.toc{margin:0 0 40px;border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.toc summary{cursor:pointer;list-style:none;padding:14px 18px;font:500 15px var(--f-display);color:var(--t80)}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";float:right;color:var(--t50)}
.toc[open] summary::after{content:"\2212"}
.toc ol{margin:0;padding:0 18px 16px 40px;display:grid;gap:6px;font-size:15px;color:var(--t50)}
.toc a{color:var(--t70)}
.toc a:hover{color:#fff}
.prose{font-size:17.5px;line-height:1.75;color:var(--t80)}
.prose>*+*{margin-top:1.15em}
.prose h2{font:600 clamp(24px,3vw,30px)/1.2 var(--f-display);letter-spacing:-.025em;color:#fff;margin-top:2.2em;scroll-margin-top:96px}
.prose h3{font:600 20px/1.3 var(--f-display);letter-spacing:-.015em;color:#fff;margin-top:1.8em;scroll-margin-top:96px}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose a{color:var(--violet-3);text-decoration:underline;text-decoration-color:rgba(201,188,251,.4);text-underline-offset:3px}
.prose a:hover{color:#fff;text-decoration-color:#fff}
.prose strong{color:#fff;font-weight:600}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--t30)}
.prose blockquote{margin-inline:0;padding:2px 0 2px 20px;border-left:2px solid var(--violet);color:var(--t70)}
.prose code{font:400 .88em var(--f-mono);background:var(--l2);padding:2px 6px;border-radius:6px}
.prose hr{border:0;border-top:1px solid var(--hair);margin-block:2.4em}
.tbl{overflow-x:auto;border:1px solid var(--hair);border-radius:14px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
.prose th{color:#fff;font-weight:600;background:var(--surface)}
.prose tr:last-child td{border-bottom:0}
.prose .faq-q{margin-top:1.6em}
.cta-box{margin:56px 0 0;padding:28px;border:1px solid var(--hair-2);border-radius:20px;background:linear-gradient(180deg,rgba(146,119,253,.1),rgba(146,119,253,.02)),var(--surface)}
.cta-box h2{font:600 24px/1.2 var(--f-display);letter-spacing:-.025em;color:#fff;margin:0 0 8px}
.cta-box p{color:var(--t70);font-size:16px;line-height:1.6;margin:0 0 18px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.related{margin-top:64px}
.related h2{font:600 22px var(--f-display);letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--hair);border-radius:16px;background:var(--surface);transition:border-color .15s,transform .15s var(--ease)}
.card:hover{border-color:var(--hair-2);transform:translateY(-2px)}
.card b{font:600 17px/1.3 var(--f-display);letter-spacing:-.015em;color:#fff}
.card span{font-size:14px;line-height:1.5;color:var(--t50)}
.idx-head{max-width:720px;margin-bottom:40px}
.idx-head h1{font-size:clamp(38px,5.4vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.04em;margin:0 0 16px;background:var(--grad-silver);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.idx-head p{font-size:18px;line-height:1.55;color:var(--t70);margin:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 48px;padding:0;list-style:none}
.pills a{display:inline-block;padding:7px 14px;border:1px solid var(--hair);border-radius:999px;font-size:14px;color:var(--t70);transition:color .12s,border-color .12s}
.pills a:hover{color:#fff;border-color:var(--hair-2)}
.cluster{margin-top:48px;scroll-margin-top:96px}
.cluster h2{font:600 26px var(--f-display);letter-spacing:-.025em;color:#fff;margin:0 0 16px}
.empty{color:var(--t50)}
@media (max-width:640px){
  .bl-wrap,.bl-wide{padding:108px 16px 72px}
  .prose{font-size:17px}
  .cta-box{padding:22px}
}