:root { --feed-width: 760px; --topbar-height: 64px; }
.x-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:15px}.x-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover}.x-author{flex:1;min-width:0}.x-author a{font-weight:500;color:var(--ink)}.x-handle,.x-date,.x-context-label{display:block;color:var(--ink-faint);font-size:12px}.x-date{white-space:nowrap}.x-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.7;color:var(--ink);margin:0}.x-text a,.x-context-link,.x-open{color:var(--text-accent)}.x-folded{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}.x-more{display:block;color:var(--text-accent);padding:8px 0;font-size:13px}.x-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-top:15px}.x-media img,.x-media video{width:100%;display:block;max-height:480px;object-fit:contain;border-radius:7px;background:var(--cream)}.x-media a{min-width:0}.x-parent{position:relative;padding:0 0 25px 49px;margin-bottom:6px}.x-parent:before{content:'';position:absolute;width:2px;left:18px;top:72px;bottom:-5px;background:var(--line-ink-2)}.x-parent .x-head,.x-parent>.x-context-label{margin-left:-49px}.x-context-label{margin-bottom:10px}.x-parent .x-text,.x-quote .x-text{font-size:14px}.x-parent .x-folded,.x-quote .x-folded{-webkit-line-clamp:5}.x-context-link{font-size:12px;display:inline-block;margin-top:10px}.x-quote{border:1px solid var(--line-ink-2);border-radius:8px;padding:16px;margin-top:16px}.x-foot{border-top:1px solid var(--line-ink);margin-top:18px;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px}.x-metrics{display:flex;gap:12px;flex-wrap:wrap;color:var(--ink-faint)}.x-open{margin-left:auto;white-space:nowrap}@media(max-width:520px){.x-media{grid-template-columns:1fr}.x-date{font-size:10px}.x-metrics{gap:8px}}
html { scroll-behavior: auto; scrollbar-gutter: stable; }
body { font-size: 15px; }
body.reader-open { overflow: hidden; }
button, input { font: inherit; }
button { color: var(--ink); }
button:disabled { cursor: default; opacity: .35; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { border: 0; background: transparent; }
button svg, a svg, [data-icon] svg { width: 20px; height: 20px; display: block; flex: none; }
[data-icon] { display: inline-flex; flex-shrink: 0; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
.layout { max-width: calc(var(--feed-width) + 40px); margin: 0 auto; padding: 0 20px; }
.topbar { position: sticky; top: 0; z-index: 3; background: var(--cream); box-shadow: 0 1px 0 var(--line-ink); }
.topbar-inner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 28px; align-items: center; max-width: 1040px; min-height: var(--topbar-height); margin: 0 auto; padding: 0 24px; }
a.brand { display: flex; align-items: center; font-size: 25px; font-weight: 600; color: var(--ink); letter-spacing: -.04em; width: fit-content; }
.topics { display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.topic-button { flex-shrink: 0; min-height: 38px; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.topic-button.active, .topic-button:hover { background: var(--cream-deep); color: var(--ink); }
.topic-button.active { box-shadow: inset 0 0 0 1px var(--line-ink); font-weight: 500; }
.topbar :focus-visible { outline-color: var(--text-accent); outline-offset: -2px; }
.count { font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
main { min-width: 0; min-height: 100dvh; outline: none !important; }
.feed-header { padding: 30px 0 0; }
.backfill { margin-top: 18px; }
.backfill:not([hidden]) + .feed-header { padding-top: 10px; }
.day-navigation { display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: var(--ink-faint); }
.day-navigation time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-navigation .icon-button { width: 32px; height: 32px; flex-shrink: 0; color: var(--ink-faint); }
.day-navigation .icon-button svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .day-navigation .icon-button { width: 44px; height: 44px; } }
.backfill p { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-faint); text-align: right; }
.search-wrap { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; margin: 0 0 20px; min-height: 44px; padding: 10px 12px; color: var(--ink-faint); background: var(--cream-panel); box-shadow: inset 0 0 0 1px var(--line-ink); }
.search-wrap:focus-within { box-shadow: inset 0 0 0 2px var(--text-accent); }
.search-wrap > [data-icon] svg { width: 17px; height: 17px; }
.search-wrap input { border: 0; border-radius: 0; outline: none; background: transparent; padding: 0; min-width: 0; width: 100%; font-size: 14px; }
.search-wrap input:focus-visible { outline: none; }
kbd { font: 11px var(--sans); border: 1px solid var(--line-ink); padding: 0 5px; border-radius: 4px; }
.filter-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.source-tabs { display: flex; gap: 20px; }
.source-tabs button { min-height: 44px; padding: 10px 4px 12px; color: var(--ink-faint); font-size: 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.source-tabs button:hover { color: var(--ink); }
.source-tabs button.active { color: var(--text-accent); border-bottom-color: var(--accent); font-weight: 500; }
.result-status { padding: 10px 30px; font-size: 12px; color: var(--ink-faint); border-top: 1px solid var(--line-ink); }
#feed { display: grid; gap: 20px; padding: 20px 0 24px; }
.post { min-width: 0; border: 1px solid var(--line-ink-2); border-radius: 8px; background: var(--cream-panel); padding: 25px 30px 17px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; margin-bottom: 12px; font-size: 11px; color: var(--ink-faint); }
.topic-tag { --tag-ink: var(--text-accent); --tag-bg: var(--color-mist); display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 6px; background: var(--tag-bg); color: var(--tag-ink); font-size: 12px; font-weight: 400; line-height: 1.4; }
.topic-tag[data-tone="memory"] { --tag-ink: oklch(38% .14 285); --tag-bg: var(--color-lilac); }
.topic-tag[data-tone="agents"] { --tag-ink: oklch(38% .1 245); --tag-bg: var(--color-frost); }
.topic-tag[data-tone="ml"] { --tag-ink: var(--color-primary-foreground); --tag-bg: var(--color-primary); }
@media (prefers-color-scheme: dark) {
  .topic-tag[data-tone="memory"] { --tag-ink: oklch(86% .07 285); }
  .topic-tag[data-tone="agents"] { --tag-ink: oklch(86% .07 245); }
}
.post-source { border-left: 1px solid var(--line-ink); padding-left: 12px; }
.post-date { margin-left: auto; }
a.post-main { display: block; color: var(--ink); border-radius: 3px; }
.post-title { font-size: 24px; font-weight: 500; line-height: 1.28; letter-spacing: -.025em; margin-bottom: 18px; text-wrap: pretty; }
.post-main:hover .post-title { color: var(--text-accent); }
.post-figure { border: 1px solid var(--line-ink); border-radius: 5px; background: #fff; overflow: hidden; position: relative; margin-bottom: 17px; }
.post-figure img { width: 100%; height: auto; max-height: 365px; min-height: 150px; object-fit: contain; padding: 8px; }
.post-figure.is-portrait img { max-height: 390px; }
.image-affordance { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; color: #191919; border: 1px solid #d9d9d9; font-size: 11px; border-radius: 3px; opacity: 0; transition: opacity 120ms; }
.image-affordance svg { width: 13px; height: 13px; }
.post-main:hover .image-affordance, .post-main:focus-visible .image-affordance { opacity: 1; }
.post-brief { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.post-image-error { padding: 30px 15px; color: #525252; font-size: 13px; }
.post-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
a.post-paper { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-accent); }
.post-paper svg { width: 13px; height: 13px; }
a.post-paper:hover { color: var(--text-accent); }
.feed-end { min-height: 260px; border-radius: 0 0 8px 8px; }
.empty { border-top: 1px solid var(--line-ink); padding: 70px 24px; text-align: center; }
.empty > [data-icon] { color: var(--ink-faint); margin-bottom: 18px; }
.empty h2 { font-size: 23px; margin-bottom: 10px; }
.empty p { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.solid-button, a.solid-button { gap: 10px; flex-shrink: 0; }
.solid-button svg { width: 16px; height: 16px; }
dialog { border: 1px solid var(--line-ink); border-radius: 8px; padding: 0; background: var(--color-inverse); color: var(--ink); width: min(900px,calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: oklch(16% .05 270 / .65); backdrop-filter: blur(4px); }
.reader-toolbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; background: var(--cream); border-bottom: 1px solid var(--line-ink); padding: 11px 22px; z-index: 2; font-size: 12px; color: var(--ink-soft); }
.reader-toolbar > div { display: flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto; }
.icon-button { width: 32px; height: 32px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: var(--ink-soft); }
.icon-button:hover:not(:disabled) { background: var(--cream-deep); color: var(--ink); }
.toolbar-divider { height: 20px; width: 1px; background: var(--line-ink); margin: 0 5px; }
.reader-content { flex-shrink: 0; padding: 32px 42px 20px; background: var(--cream); }
.reader-meta { display: flex; gap: 12px; color: var(--ink-faint); font-size: 12px; margin-bottom: 14px; }
#reader-title { font-size: clamp(25px,3vw,34px); font-weight: 500; line-height: 1.22; letter-spacing: -.025em; margin-bottom: 19px; }
.reader-brief { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 27px; }
.reader-image-frame { background: #fff; border: 1px solid var(--line-ink); border-radius: 4px; overflow: hidden; }
.reader-figure img { width: 100%; height: auto; max-height: 570px; object-fit: contain; padding: 10px; }
.reader-figure figcaption { font-size: 12px; line-height: 1.65; color: var(--ink-faint); padding: 12px 0 0; }
#reader-image-error { padding: 24px; border: 1px solid var(--line-ink); }
.reader-explanation { padding: 30px 0 19px; font-size: 15px; line-height: 1.7; }
.reader-explanation h3 { font-size: 17px; margin-bottom: 10px; }
.reader-explanation p, .reader-explanation li { color: var(--ink-soft); }
.reader-explanation ul { padding-left: 19px; margin: 14px 0 0; }
.subtle { color: var(--ink-faint); font-size: 12px; }
.reader-actions { flex: 1 0 auto; min-height: 190px; margin: 0; padding: 110px 42px 32px; display: flex; align-items: flex-end; justify-content: flex-end; }
.reader-actions :focus-visible { outline-color: #fff; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 20; top: 10px; left: 10px; background: var(--cream); padding: 12px; }
@media (max-width: 900px) {
  .topbar-inner { gap: 16px; padding: 0 20px; }
  .topic-button { padding: 8px 10px; font-size: 13px; }
  .feed-header { padding: 24px 0 0; }
  .post { padding: 23px 22px 17px; }
  .post-title { font-size: 21px; }
  .source-tabs { gap: 14px; }
}
@media (max-width: 650px) {
  .topbar-inner { grid-template-columns: 1fr; gap: 6px 12px; padding: 10px 12px 0; }
  .layout { padding: 0; }
  a.brand { font-size: 23px; }
  .topics { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding: 4px 0 10px; gap: 6px; }
  .topic-button { padding: 7px 10px; min-height: 32px; font-size: 12px; }
  #feed { padding-left: 12px; padding-right: 12px; }
  .feed-header { padding: 16px 12px 0; }
  .search-wrap kbd { display: none; }
  .filter-row { gap: 6px; }
  .source-tabs { gap: 14px; }
  .source-tabs button { font-size: 12px; }
  .post { padding: 22px 18px 16px; }
  .post-title { font-size: 21px; }
  .post-meta { column-gap: 9px; font-size: 10px; }
  .post-source { padding-left: 9px; }
  .post-brief { font-size: 14px; }
  .post-figure img { padding: 5px; min-height: 100px; }
  a.post-paper { font-size: 12px; }
  .result-status { padding-left: 18px; }
  dialog { width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .reader-toolbar { padding: 9px 14px; }
  .reader-content { padding: 25px 20px 20px; }
  .reader-brief { font-size: 16px; }
  .reader-actions { min-height: 170px; padding: 90px 20px 28px; }
  .reader-actions .solid-button { font-size: 12px; padding: 10px 13px; }
  .reader-figure img { max-height: 460px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }