:root { color-scheme: light dark; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background:#fff; color:#0f1419; }
@media (prefers-color-scheme: dark) { body { background:#000; color:#e7e9ea; } }
.page { max-width: 600px; margin: 0 auto; padding: 0 16px; }
.topnav { padding: 12px 0; }
.topnav a { color: #1d9bf0; text-decoration: none; font-weight: 600; }
.tweet { border: 1px solid #eff3f4; border-radius: 16px; padding: 16px; margin: 16px 0; }
@media (prefers-color-scheme: dark) { .tweet { border-color: #2f3336; } }
.author .name { font-weight: 700; }
.author .handle { color: #536471; margin-left: 6px; }
.reply-context { color: #536471; font-size: 15px; margin: 6px 0; }
.reply-context a { color: inherit; }
.tweet-text { font-size: 20px; line-height: 1.4; margin: 12px 0; white-space: pre-wrap; }
.tweet-text a { color: #1d9bf0; text-decoration: none; }
.tweet-text a:hover { text-decoration: underline; }
.media { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 12px 0; border-radius: 16px; overflow: hidden; }
.media img, .media video { width: 100%; display: block; border-radius: 16px; }
.tweet-meta { color: #536471; font-size: 15px; margin: 12px 0; border-bottom: 1px solid #eff3f4; padding-bottom: 12px; }
@media (prefers-color-scheme: dark) { .tweet-meta { border-color: #2f3336; } }
.tweet-stats { display: flex; gap: 20px; }
.tweet-stats .stat { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: #536471; }
.tweet-stats .stat b { color: inherit; font-weight: 700; }
.stat-icon { width: 18px; height: 18px; flex-shrink: 0; }
.like-icon { color: #f91880; }
.repost-icon { color: #00ba7c; }
.replies-section { margin-top: 8px; }
.replies-section h3 { font-size: 15px; color: #536471; font-weight: 600; margin: 16px 4px 4px; }

.view-on-x { float: right; color: #1d9bf0; text-decoration: none; font-weight: 600; }
.view-on-x:hover { text-decoration: underline; }

.thread-ancestors { position: relative; }
.thread-tweet { border: 1px solid #eff3f4; border-radius: 16px; padding: 14px 16px; margin: 8px 0; }
@media (prefers-color-scheme: dark) { .thread-tweet { border-color: #2f3336; } }
.thread-tweet-text { font-size: 16px; line-height: 1.4; white-space: pre-wrap; }
.thread-tweet-text a { color: #1d9bf0; text-decoration: none; }
.thread-tweet-text a:hover { text-decoration: underline; }
.thread-tweet .media img, .thread-tweet .media video { border-radius: 12px; }
.thread-tweet-time { display: block; color: #536471; font-size: 13px; margin-top: 8px; text-decoration: none; }
.thread-tweet-time:hover { text-decoration: underline; }
.thread-ancestor { border-left: 3px solid #cfd9de; border-radius: 4px 16px 16px 4px; }
@media (prefers-color-scheme: dark) { .thread-ancestor { border-left-color: #536471; } }

.topnav { display: flex; justify-content: space-between; align-items: center; }
.topnav .sep { color: #536471; margin: 0 4px; }
h1 { font-size: 22px; }
.count { color: #536471; font-weight: 400; font-size: 0.8em; }

.search-cta { display: inline-block; margin: 8px 0 20px; padding: 10px 16px; background: #1d9bf0; color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; }

.year-list, .month-list { list-style: none; padding: 0; }
.year-list-item, .month-list-item { border-bottom: 1px solid #eff3f4; padding: 14px 0; font-size: 18px; }
@media (prefers-color-scheme: dark) { .year-list-item, .month-list-item { border-color: #2f3336; } }
.year-list-item a, .month-list-item a { color: inherit; text-decoration: none; font-weight: 600; }
.year-list-item a:hover, .month-list-item a:hover { color: #1d9bf0; }

.tweet-list { list-style: none; padding: 0; }
.tweet-list-item { border-bottom: 1px solid #eff3f4; }
@media (prefers-color-scheme: dark) { .tweet-list-item { border-color: #2f3336; } }
.tweet-list-item a { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; color: inherit; text-decoration: none; }
.tweet-list-item time { color: #536471; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.tweet-list-item .excerpt { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.tweet-list-item:hover .excerpt { color: #1d9bf0; }
.media-icon { flex-shrink: 0; }

.search-box { width: 100%; box-sizing: border-box; font-size: 18px; padding: 12px 16px; border-radius: 999px; border: 1px solid #cfd9de; background: transparent; color: inherit; margin: 8px 0; }
@media (prefers-color-scheme: dark) { .search-box { border-color: #536471; } }
.search-status { color: #536471; font-size: 14px; margin: 8px 0; }
mark { background: #fef08a; color: #0f1419; border-radius: 2px; }