@layer components{.threads{--dot:.7rem;--dot-spacing:calc(var(--dot) + .2rem);--line:1px;font-family:var(--font-display);font-size:var(--text-sm);grid-template-columns:max-content 1fr;column-gap:1.25rem;display:grid;position:relative}.prose>.threads{grid-column:content-start/wide-end}.threads-years span{left:calc(var(--x) * (100% - var(--dot)));position:absolute}.threads-years{height:1.5em;color:var(--color-ink-soft);font-variant-numeric:tabular-nums;grid-column:-2;margin-block-end:.5rem;position:relative}.threads-years span{border-inline-start:1px solid var(--color-rule);margin-inline-start:calc(var(--dot) / 2);padding-inline-start:.35em;line-height:1.5}.threads-list{grid-column:1/-1;grid-template-columns:subgrid;margin:0;padding:0;list-style:none;display:grid}.thread{grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-height:2.25rem;margin:0;display:grid}.thread-tag{color:var(--color-ink-soft);justify-self:end;font-weight:600}.thread-tag:before{content:"#";color:var(--accent-a);margin-inline-end:.1em}.thread-tag:is(:hover,:focus-visible){color:var(--color-ink)}.thread-line{height:var(--dot);grid-column:-2;position:relative}.thread-line:before{content:"";top:calc(50% - var(--line) / 2);left:calc(var(--x) * (100% - var(--dot)) + var(--dot) / 2);height:var(--line);background:color-mix(in oklab, var(--color-ink-soft) 55%, transparent);position:absolute;right:0}.thread-post{z-index:1;width:var(--dot);height:var(--dot);position:absolute;top:0}.thread-post:before{content:"";background:var(--accent-a);box-shadow:0 0 0 3px var(--color-paper);transition:scale var(--duration-quick) var(--ease-snap);border-radius:50%;position:absolute;inset:0}.thread-post:after{content:"";position:absolute;inset:-.5rem -.25rem}.thread-post:hover{z-index:2}.thread-post:hover:before{scale:1.6}.thread-card{background:color-mix(in oklab, var(--color-paper), var(--color-ink) 8%);width:max-content;max-width:min(18rem,80vw);color:var(--color-ink);box-shadow:0 1px 2px color-mix(in oklab, var(--color-shadow) 50%, transparent), 0 .5rem 1rem -.75rem var(--color-shadow);translate:calc(var(--x) * -100%) .3rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-move), translate var(--duration-move) var(--ease-move), visibility var(--duration-quick) allow-discrete;border-radius:3px;flex-direction:column;gap:.35em;padding:.9em 1.1em 1em;line-height:1.35;display:flex;position:absolute;bottom:calc(100% + .9rem);left:50%}.thread-card time{color:var(--color-ink-soft)}.thread-card>:last-child{font-family:var(--font-body);font-size:1.05em}.thread-post:hover .thread-card{translate:calc(var(--x) * -100%) 0;opacity:1;visibility:visible}.thread-card-title{font-size:1.1em;font-weight:700}.thread-tag,.thread-line:before,.thread-post{transition:opacity var(--duration-quick) var(--ease-move)}.threads:has(.thread:hover) .thread:not(:hover) .thread-tag,.threads:has(.thread:hover) .thread:not(:hover) .thread-line:before,.threads:has(.thread:hover) .thread:not(:hover) .thread-post{opacity:.3}.threads:has(.thread-post:hover) .thread:not(:hover) .thread-post{opacity:1}.threads-guide{background:var(--accent-a);opacity:0;pointer-events:none;width:1px;transition:opacity var(--duration-quick) var(--ease-move);position:absolute;top:0;bottom:0}@supports (anchor-name:--a){.thread-post:hover{anchor-name:--thread-post}.threads-guide{position-anchor:--thread-post;left:anchor(center)}.threads:has(.thread-post:hover) .threads-guide{opacity:.6}}.threads-single{--dot:1rem;--line:2px;column-gap:0}.threads-single .thread{min-height:3rem}@media (width<40rem){.threads{grid-template-columns:1fr}.thread{padding-block:.4rem}.thread-tag{justify-self:start}}@media (prefers-reduced-motion:reduce){.threads *,.thread-post:before{transition:none}}.tag-page{padding-block:var(--gutter)}.tag-page>header{grid-column:content-start/wide-end;gap:.5rem;display:grid}.tag-page>.threads{margin-block:1.5rlh}.tag-page-hash{color:var(--accent-a)}.tag-page-links{color:var(--color-ink-soft);font-family:var(--font-display);font-size:var(--text-sm);justify-content:space-between;font-weight:600;display:flex}.tag-page-links a:is(:hover,:focus-visible){color:var(--color-ink)}.tag-page-up:after{content:" /"}:root[data-mode=agent] .tag-page{display:none}}