Something went wrong. Try again.
A Bsky-like frontend using the atprotocol natively.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
:root { --text: #6b6375; --text-h: #08060d; --bg: #fff; --card-bg: #fff; --border: #e5e4e7; --accent: #0085ff; --accent-bg: rgba(0, 133, 255, 0.08); --accent-border: rgba(0, 133, 255, 0.4); --hover-bg: rgba(0, 0, 0, 0.03); --shadow: rgba(0, 0, 0, 0.08) 0 4px 12px -2px, rgba(0, 0, 0, 0.04) 0 2px 6px -1px;
--sans: system-ui, 'Segoe UI', Roboto, sans-serif; --heading: system-ui, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, Consolas, monospace;
font: 16px/145% var(--sans); letter-spacing: 0.18px; color-scheme: light; color: var(--text); background: var(--bg); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
[data-theme="dark"] { --text: #9ca3af; --text-h: #f3f4f6; --bg: #16171d; --card-bg: #1e1f27; --border: #2e303a; --accent: #5eaaff; --accent-bg: rgba(94, 170, 255, 0.12); --accent-border: rgba(94, 170, 255, 0.4); --hover-bg: rgba(255, 255, 255, 0.04); --shadow: rgba(0, 0, 0, 0.3) 0 4px 12px -2px, rgba(0, 0, 0, 0.15) 0 2px 6px -1px; color-scheme: dark;}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --text: #9ca3af; --text-h: #f3f4f6; --bg: #16171d; --card-bg: #1e1f27; --border: #2e303a; --accent: #5eaaff; --accent-bg: rgba(94, 170, 255, 0.12); --accent-border: rgba(94, 170, 255, 0.4); --hover-bg: rgba(255, 255, 255, 0.04); --shadow: rgba(0, 0, 0, 0.3) 0 4px 12px -2px, rgba(0, 0, 0, 0.15) 0 2px 6px -1px; color-scheme: dark; }}
*,*::before,*::after { box-sizing: border-box;}
#root { width: 100%; min-height: 100vh;}
body { margin: 0;}
h1, h2 { font-family: var(--heading); font-weight: 600; color: var(--text-h);}
a { color: var(--accent); text-decoration: none;}
a:hover { text-decoration: underline;}
.settings-loading { padding: 48px 20px; text-align: center; color: var(--text);}
.follows-you-badge { display: inline-block; font-size: 11px; font-weight: 500; color: var(--text); background: var(--hover-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; line-height: 1.5;}
.blocked-badge { display: inline-block; font-size: 11px; font-weight: 500; color: #ef4444; background: rgba(239, 68, 68, 0.1); padding: 1px 6px; border-radius: 4px; white-space: nowrap; line-height: 1.5;}
.muted-badge { display: inline-block; font-size: 11px; font-weight: 500; color: var(--text); opacity: 0.6; background: var(--hover-bg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; line-height: 1.5;}
.blocks-you-badge { display: inline-block; font-size: 11px; font-weight: 500; color: #f59e0b; background: rgba(245, 158, 11, 0.1); padding: 1px 6px; border-radius: 4px; white-space: nowrap; line-height: 1.5;}
.suspended-badge { display: inline-block; font-size: 11px; font-weight: 500; color: #a855f7; background: rgba(168, 85, 247, 0.1); padding: 1px 6px; border-radius: 4px; white-space: nowrap; line-height: 1.5;}
.pds-favicon { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; object-fit: contain; vertical-align: middle; margin-left: 3px;}