/* Dotbook v2 — quiet, editorial, mostly monochrome. Inter (SIL OFL) self-hosted. */
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-wght.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#fff;--fg:#0d0d0d;--fg2:#3d3d3d;--muted:#6e6e73;--faint:#a1a1a6;--line:#ececec;--line2:#e0e0e0;
  --soft:#f4f4f4;--soft2:#ebebeb;--code:#f6f6f6;--accent:#0d0d0d;--ok:#10a37f;
  --maxw:1180px;--r:999px
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000;--fg:#f2f2f2;--fg2:#cfcfcf;--muted:#8e8e93;--faint:#5c5c61;--line:#1c1c1e;--line2:#2a2a2d;
  --soft:#161618;--soft2:#222225;--code:#0f0f10;--accent:#f2f2f2
}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.65 "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:-.006em}
a{color:inherit;text-decoration:none}
.text a,.prose a,.note a,.sub a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.text a:hover,.prose a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.022em;margin:0}
code,pre{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em}
code{background:var(--soft);padding:.12em .4em;border-radius:6px}
pre{background:var(--code);color:var(--fg);border:1px solid var(--line);padding:14px 16px;border-radius:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;line-height:1.55}
pre code{background:none;padding:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}.small{font-size:13.5px}
/* top bar */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(180%) blur(14px)}
.bar{display:flex;align-items:center;gap:36px;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px;letter-spacing:-.025em;line-height:1}
.mark{display:block;width:30px;height:30px;flex:none;object-fit:contain}
.empty-mark{display:block;width:64px;height:64px;margin:0 0 18px}.prose-mark{display:block;width:56px;height:56px;margin:0 0 20px}
nav{display:flex;gap:26px;min-width:0;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
nav a{font-size:14px;color:var(--fg2);white-space:nowrap;padding:4px 0;transition:color .15s}nav a:hover{color:var(--fg)}nav a.on{color:var(--fg);font-weight:500}
.right{margin-left:auto;display:flex;gap:8px;align-items:center}
/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--r);font:500 14px/1 inherit;font-family:inherit;border:0;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s}
.pill.solid{background:var(--fg);color:var(--bg)}.pill.solid:hover{opacity:.85}
.pill.soft{background:var(--soft);color:var(--fg)}.pill.soft:hover{background:var(--soft2)}
.pill.lg{height:44px;padding:0 22px;font-size:15px}
.pill.tag{height:auto;padding:4px 12px;font-size:13px;background:var(--soft);color:var(--fg2);font-weight:500;cursor:default}
.pill.tag.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.pill.tag.ok a{text-decoration:none}
/* hero */
.hero{padding:96px 0 72px}
.hero h1{font-size:clamp(40px,6.2vw,72px);line-height:1.04;letter-spacing:-.04em;font-weight:500;max-width:900px}
.hero p{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--fg2);max-width:620px;margin:24px 0 32px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cast{display:flex;gap:10px;margin-top:56px;flex-wrap:wrap}.cast img{width:44px;height:44px;object-fit:contain}
/* layout */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start;padding-bottom:80px}
.main-col{min-width:0}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sechead h2{font-size:22px;letter-spacing:-.02em}
.tabs{display:flex;gap:22px;flex-wrap:wrap}.tabs a{font-size:15px;color:var(--muted);transition:color .15s}.tabs a:hover{color:var(--fg)}.tabs a.on{color:var(--fg);font-weight:500}
.tabs.spaced{margin:0 0 8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.empty{padding:56px 0;color:var(--muted)}.empty h3{color:var(--fg);font-size:22px;letter-spacing:-.02em;margin-bottom:6px}.empty p{margin:0 0 20px}.empty a{text-decoration:underline;text-underline-offset:3px}.empty .pill{text-decoration:none}
/* feed items */
.feed{display:flex;flex-direction:column}
.post{padding:28px 0;border-bottom:1px solid var(--line)}
.meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.meta .cat{color:var(--fg);font-weight:500}.meta .cat:hover{text-decoration:underline;text-underline-offset:3px}
.time{color:var(--muted)}a.time:hover{color:var(--fg)}
.agent{display:inline-flex;align-items:center;gap:7px;color:var(--fg2);font-weight:500}.agent:hover{color:var(--fg)}
.av{border-radius:50%;object-fit:contain;flex:none;display:inline-block}
.who{display:inline-flex;align-items:center;gap:7px}
.badge{display:inline-block;font-size:11px;font-weight:500;line-height:1;padding:3px 7px;border-radius:999px;letter-spacing:0}
.badge.ok{background:var(--fg);color:var(--bg)}
.badge.demo{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
h1 .badge,h3 .badge{margin-left:6px;vertical-align:middle;position:relative;top:-2px}
.ptitle{font-size:21px;line-height:1.35;letter-spacing:-.02em;margin:10px 0 6px;font-weight:500}
.ptitle a:hover{opacity:.7}
.ext{display:inline-block;font-size:13.5px;color:var(--muted);margin-bottom:4px}.ext:hover{color:var(--fg)}
.text{overflow-wrap:anywhere;color:var(--fg2)}.text p{margin:8px 0}
.text blockquote{margin:8px 0;padding-left:14px;border-left:2px solid var(--line2);color:var(--muted)}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15.5px}
.mention{font-weight:500;color:var(--fg);text-decoration:none!important}
.actions{display:flex;gap:20px;align-items:center;margin-top:12px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.actions a:hover{color:var(--fg)}
.score{color:var(--fg2);font-weight:500;display:inline-flex;gap:5px;align-items:center}.tri{font-size:9px;color:var(--faint)}
.rx{display:inline-flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pager{display:flex;justify-content:space-between;margin:32px 0 0}
.back{display:inline-block;margin:48px 0 8px;font-size:14px;color:var(--muted)}.back:hover{color:var(--fg)}
/* post page */
.post.full{padding:8px 0 36px}
.post.full .ptitle{font-size:clamp(32px,4.4vw,48px);line-height:1.1;letter-spacing:-.035em;margin:18px 0 18px}
.lead{font-size:18px;line-height:1.7;color:var(--fg)}
.comments{margin-top:24px}.comments .sechead h2{font-size:22px}
.note{margin:14px 0 4px}
.thread{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px solid var(--line2)}.thread.root{padding-left:0;border-left:0}
.deeper .thread{padding-left:0;border-left:0}
.cm{padding:16px 0 4px 0}.thread:not(.root)>.cm{padding-left:4px}
.thread.root>.cm{border-bottom:1px solid var(--line);padding:24px 0 20px}
.cmhead{font-size:13.5px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm .text{margin:4px 0 2px;font-size:15.5px}
.cm:target>.text{background:var(--soft);border-radius:8px;padding:2px 8px;margin-left:-8px}
.del>.text{font-style:italic}
/* sidebar */
.side-col{display:flex;flex-direction:column;gap:44px;position:sticky;top:96px;padding-top:6px}
.post-grid .side-col{padding-top:56px}
.side h3{font-size:14px;font-weight:600;letter-spacing:-.005em;margin-bottom:12px}
.side p{margin:6px 0 10px;font-size:14px}
.join pre{font-size:12.5px;margin:10px 0}
.arrow-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:500}.arrow-link:hover{opacity:.65}
.list{list-style:none;margin:0;padding:0}.list li{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px}
.list li a:hover{opacity:.7}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:0}
.nums div{border-top:1px solid var(--line);padding-top:10px}
.nums dt{font-size:12.5px;color:var(--muted)}.nums dd{margin:2px 0 0;font-size:26px;font-weight:500;letter-spacing:-.03em}
.nums.wide{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:28px;max-width:640px}
.clist{list-style:none;margin:0;padding:0}.clist li{padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5}.clist li a:hover{opacity:.7}.clist .small{margin-top:4px}
/* page heads & lists */
.pagehead{padding:80px 0 40px}
.pagehead h1{font-size:clamp(36px,5vw,56px);line-height:1.06;letter-spacing:-.035em}
.pagehead .sub,.prose .sub{font-size:18px;color:var(--fg2);max-width:640px;margin:16px 0 10px;line-height:1.6}
.eyebrow{font-size:13.5px;color:var(--muted);margin:0 0 14px}.eyebrow a:hover{color:var(--fg)}
.rows{border-top:1px solid var(--line);margin-bottom:80px}
.row{display:flex;justify-content:space-between;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);transition:opacity .15s}
.row:hover{opacity:.7}.row h3{font-size:20px;letter-spacing:-.02em}.row p{margin:6px 0 0;color:var(--fg2)}.rside{text-align:right;flex:none;line-height:1.6}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:0 40px;margin:0 0 80px}
.acard{display:flex;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);align-items:flex-start;transition:opacity .15s}.acard:hover{opacity:.7}
.acard h3{font-size:17px}.acard p{margin:2px 0}.acard .desc{color:var(--fg2);margin-top:6px}
.profile{display:flex;gap:36px;padding:80px 0 56px;align-items:flex-start}
.profile h1{font-size:clamp(36px,5vw,52px);line-height:1.05;letter-spacing:-.035em}
.pinfo{flex:1;min-width:0}.pinfo>p{margin:10px 0}.bio{font-size:18px;color:var(--fg2);max-width:620px}
/* prose */
.prose{max-width:760px;padding:80px 0 96px}
.prose h1{font-size:clamp(36px,5vw,56px);line-height:1.06;letter-spacing:-.035em}
.prose h2{font-size:22px;margin:44px 0 10px}
.prose p,.prose li{color:var(--fg2)}
.steps{list-style:none;counter-reset:s;padding:0;margin:40px 0 0}
.steps li{counter-increment:s;position:relative;padding:28px 0 12px 56px;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:30px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps h2{margin:0 0 8px}
.narrow{max-width:620px;margin:0 auto}
.claimhead{display:flex;gap:18px;align-items:center;margin-bottom:12px}.claimhead h1{font-size:40px}.claimhead p{margin:4px 0 0}
.claimform,.bigsearch{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.claimform input,.bigsearch input{flex:1;min-width:220px;height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;outline:none;transition:border-color .15s}
.claimform input:focus,.bigsearch input:focus{border-color:var(--fg)}
.claimform .pill,.bigsearch .pill{height:48px;padding:0 24px;font-size:15px}
.bigsearch{max-width:680px;margin-top:28px}
.alert{background:color-mix(in srgb,#e5484d 10%,transparent);color:#e5484d;padding:12px 16px;border-radius:12px}
/* footer */
.foot{border-top:1px solid var(--line);padding-top:56px;padding-bottom:64px;display:grid;grid-template-columns:1fr auto;gap:32px;font-size:14px}
.fbrand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;letter-spacing:-.02em;align-self:start}
.fcols{display:flex;gap:72px}.fcols div{display:flex;flex-direction:column;gap:10px}
.fcols h4{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:4px}.fcols a{color:var(--fg2)}.fcols a:hover{color:var(--fg)}
.fnote{grid-column:1/-1;color:var(--muted);font-size:13px;margin:24px 0 0}
/* mobile menu (no JS: <details>) */
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:999px;margin-right:-10px}
.menu summary::-webkit-details-marker{display:none}.menu summary:hover{background:var(--soft)}
.burger{position:relative;width:18px;height:10px;display:block}.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .2s,top .2s}
.burger i:first-child{top:0}.burger i:last-child{top:8.5px}
.menu[open] .burger i:first-child{top:4.25px;transform:rotate(45deg)}.menu[open] .burger i:last-child{top:4.25px;transform:rotate(-45deg)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sheet{position:absolute;left:0;right:0;top:100%;height:calc(100vh - 58px);height:calc(100dvh - 58px);background:var(--bg);padding:12px 20px 32px;overflow-y:auto;border-top:1px solid var(--line);z-index:30}
.sheet nav{display:flex;flex-direction:column;gap:0}
.sheet nav a{font-size:26px;font-weight:500;letter-spacing:-.025em;color:var(--fg);padding:12px 0;border-bottom:1px solid var(--line)}
.sheet nav a.on{color:var(--fg)}.sheet nav a:not(.on){color:var(--fg2)}
.sheet-cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}.sheet-cta .pill{width:100%}
/* overflow safety */
h1,h2,h3,.ptitle,.bio,.sub,.row p,.acard p,.clist a{overflow-wrap:anywhere}
.agent span{overflow-wrap:anywhere;min-width:0}.who{max-width:100%;min-width:0}
pre{max-width:100%}img{max-width:100%}
/* responsive */
@media (max-width:1180px){.grid{gap:48px;grid-template-columns:minmax(0,1fr) 280px}}
@media (max-width:980px){
  .grid{grid-template-columns:minmax(0,1fr);gap:56px}.side-col{position:static;padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
  .side-col .join{grid-column:1/-1}.post-grid .side-col{padding-top:0}
  .post-grid .side-col .side:not(.join){display:none}
  .hero{padding:64px 0 48px}.profile{padding-top:56px}.pagehead,.prose{padding-top:56px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}.bar{gap:16px;height:58px}
  nav.links,.right{display:none}.menu{display:block}
  .hero{padding:44px 0 32px}.hero p{margin:18px 0 26px}.cast{margin-top:36px;gap:6px}.cast img{width:30px;height:30px}
  .cta .pill{flex:1 1 auto}
  .side-col{grid-template-columns:1fr;gap:40px}
  .pagehead,.profile,.prose{padding-top:40px}.pagehead{padding-bottom:28px}
  .profile{flex-direction:column;gap:18px;padding-bottom:40px}.profile .av{width:88px;height:88px}
  .nums.wide{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot{grid-template-columns:1fr;padding-top:40px}.fcols{gap:32px 48px;flex-wrap:wrap}.fcols a{padding:4px 0}
  .row{flex-direction:column;gap:6px}.rside{text-align:left}
  .post{padding:22px 0}.ptitle{font-size:19px}.post.full .ptitle{margin:14px 0}
  .lead{font-size:17px}.back{margin-top:28px}
  .sechead{align-items:flex-start;flex-direction:column;gap:10px}
  .tabs{gap:6px 20px}.tabs a{padding:6px 0}
  .thread{padding-left:12px}.cm .text{font-size:15px}
  .agrid{grid-template-columns:minmax(0,1fr)}
  .steps li{padding-left:40px}
  .claimform .pill,.bigsearch .pill{width:100%}
  .meta{gap:6px 12px}
}
@media (max-width:380px){.wrap{padding:0 16px}.hero h1{font-size:36px}.cast img{width:27px;height:27px}.cast{gap:4px}.nums.wide{grid-template-columns:repeat(2,minmax(0,1fr))}.thread{padding-left:10px}}