:root {
  color-scheme: light;
  --bg: #fff;
  --text: #0f1419;
  --text-2: #536471;
  --border: #e6e8eb;
  --hover: rgba(15, 20, 25, 0.05);
  --search: #f1f3f5;
  --blue: #0085ff;
  --blue-press: #0074e0;
  --gold: #c88800;
  --video: #6d28d9;
  --video-solid: #6d28d9;
  --incoming: #e5f2ff;
  --incoming-border: #8ebfed;
  --pink: #ec4899;
  --green: #1a9c14;
  --danger: #d61f3a;
  --orange: #f97316;
  --shadow: 0 8px 28px rgba(15, 20, 25, 0.16);
  --on-blue: #fff;
  --post-scale: 1;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  --nav: 248px;
  --feed: 600px;
  --rail: 330px;
  --scroll: #b7c2cc;
  --scroll-hover: #6d7b88;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000;
  --text: #f3f5f7;
  --text-2: #8b98a5;
  --border: #2f3336;
  --hover: rgba(255, 255, 255, 0.08);
  --search: #202327;
  --blue: #1d9bf0;
  --blue-press: #1a8cd8;
  --gold: #f5c451;
  --video: #c4b5fd;
  --video-solid: #7c3aed;
  --incoming: #14344d;
  --incoming-border: #3d7eb8;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --orange: #fb923c;
  --scroll: #3a424a;
  --scroll-hover: #6e7b88;
}

:root[data-theme="contrast-light"] {
  color-scheme: light;
  --bg: #fff;
  --text: #000;
  --text-2: #1a1a1a;
  --border: #000;
  --hover: #e4e4e4;
  --search: #fff;
  --blue: #0037b0;
  --blue-press: #00267a;
  --on-blue: #fff;
  --gold: #5c3b00;
  --video: #3b0764;
  --video-solid: #3b0764;
  --incoming: #fff;
  --incoming-border: #000;
  --pink: #8f0050;
  --green: #085c00;
  --danger: #9b0024;
  --orange: #7a2e00;
  --shadow: none;
  --scroll: #000;
  --scroll-hover: #000;
}

:root[data-theme="contrast-dark"] {
  color-scheme: dark;
  --bg: #000;
  --text: #fff;
  --text-2: #f2f2f2;
  --border: #fff;
  --hover: #222;
  --search: #000;
  --blue: #9ad7ff;
  --blue-press: #d4efff;
  --on-blue: #000;
  --gold: #ffe08a;
  --video: #e9d5ff;
  --video-solid: #d8b4fe;
  --incoming: #000;
  --incoming-border: #fff;
  --pink: #ff9ec4;
  --green: #8dff8a;
  --danger: #ff9aa8;
  --orange: #ffc56b;
  --shadow: none;
  --scroll: #fff;
  --scroll-hover: #fff;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--scroll);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--scroll-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 80;
  transform: translateY(-160%);
  padding: 8px 12px;
  border: 2px solid var(--text);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-weight: 800;
}
.skip:focus { transform: none; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.4;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img { max-width: 100%; }

.app-top {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 0 8px 0 6px;
  overflow: visible;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.app-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.app-top > * { position: relative; z-index: 1; }
.top-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.top-mark:hover { background: var(--hover); }
.top-mark .mark { width: 32px; height: 32px; }
.app-menu { position: relative; flex: none; }
.app-top > .app-menu { z-index: 6; }
.app-top > .alpha-wrap { z-index: 7; }
.alpha-wrap { position: relative; flex: none; }
.menu-btn {
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
}
.menu-btn:hover,
.menu-btn[aria-expanded="true"] { background: var(--hover); }
.app-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  margin: 0;
  z-index: 7;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.app-menu-pop a,
.app-menu-pop button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.app-menu-pop a:hover,
.app-menu-pop button:hover { background: var(--hover); }
.app-menu-pop [aria-current="page"] {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.app-menu-pop .ico { width: 18px; height: 18px; flex: none; }
.menu-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; }
.menu-scope { font-size: 12px; font-weight: 600; color: var(--text-2); }
.app-menu-rule { height: 1px; margin: 6px 8px; background: var(--border); }
.alpha {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ff6d80, #e11d48 58%, #9f1239);
  color: #fff;
  font-family: Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 0 1px rgba(159, 18, 57, 0.35);
  cursor: pointer;
}
.alpha-glyph { transform: translate(0.5px, -0.5px); }
.alpha-door {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 5;
  width: 168px;
  margin: 0 0 0 -84px;
  transform: rotate(-16deg);
  transform-origin: center top;
  opacity: 0;
  pointer-events: none;
}
.alpha-door-string {
  display: block;
  width: 2px;
  height: 14px;
  margin: 0 auto;
  border-radius: 1px;
  background: linear-gradient(#e11d48, #4c1020);
}
.alpha-door-card {
  display: block;
  padding: 8px 10px 12px;
  border: 1px solid rgba(225, 29, 72, 0.55);
  border-radius: 10px 10px 18px 18px;
  background: linear-gradient(#3a121c, #16080d);
  color: #f6ecee;
  text-align: center;
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 0;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
}
.alpha-door-card::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px auto 6px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 4px, #e11d48 5px 7px, #3a121c 8px);
  box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.45);
}
.alpha-door-kicker {
  display: block;
  color: #f0a0b4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
.alpha-door-card strong {
  display: block;
  margin: 1px 0 5px;
  font-size: 22px;
  font-style: italic;
  letter-spacing: 0.12em;
}
.alpha-door-line { display: block; font-size: 14px; }
.alpha-door-note {
  display: block;
  margin-top: 4px;
  color: #d7b8c0;
  font-size: 11px;
  font-style: italic;
  font-weight: 600;
}
.alpha-item {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(225, 29, 72, 0.65);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f6ecee;
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
}
.alpha-item:hover { background: rgba(225, 29, 72, 0.28); }
.alpha-item[aria-pressed="true"] { background: #9f1239; border-color: transparent; color: #fff; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .alpha-wrap:hover .alpha-door,
  .alpha-wrap:focus-within .alpha-door,
  .alpha-wrap.is-open .alpha-door {
    opacity: 1;
    pointer-events: auto;
    animation: alpha-door-swing 0.8s cubic-bezier(.2, .85, .2, 1) both;
  }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .alpha-wrap:hover .alpha-door,
  .alpha-wrap:focus-within .alpha-door,
  .alpha-wrap.is-open .alpha-door { opacity: 1; pointer-events: auto; transform: none; }
}
.alpha-wrap:focus-within .alpha-door,
.alpha-wrap.is-open .alpha-door { opacity: 1; pointer-events: auto; }
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .alpha-wrap.is-open .alpha-door {
    animation: alpha-door-swing 0.8s cubic-bezier(.2, .85, .2, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .alpha-wrap:focus-within .alpha-door,
  .alpha-wrap.is-open .alpha-door { transform: none; }
}
@keyframes alpha-door-swing {
  0% { opacity: 0; transform: rotate(-22deg) translateY(-8px); }
  42% { opacity: 1; transform: rotate(8deg); }
  68% { transform: rotate(-5deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
.alpha-wrap.is-shut .alpha-door,
.alpha-wrap.is-shut:hover .alpha-door,
.alpha-wrap.is-shut:focus-within .alpha-door {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transform: rotate(-16deg);
}
.noscript-pitch {
  margin: 28px auto;
  max-width: 34rem;
  padding: 8px 16px 24px;
}
.noscript-pitch h2 { margin: 0 0 8px; font-size: 28px; }
.noscript-pitch ul { padding-left: 1.2rem; }
.headline {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.page-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: var(--text);
}
.page-icon .ico { width: 26px; height: 26px; }
.headline h1 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.shell {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(var(--nav), 1fr) minmax(0, 680px) minmax(var(--rail), 1fr);
  justify-content: stretch;
  align-items: start;
  min-height: calc(100vh - var(--top-h, 52px));
}

.left, .right {
  position: sticky;
  top: var(--top-h, 52px);
  height: calc(100vh - var(--top-h, 52px));
  overflow: auto;
  min-width: 0;
}
.left {
  justify-self: end;
  width: var(--nav);
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  grid-column: 1;
}
.right {
  justify-self: start;
  width: var(--rail);
  padding: 8px 16px 24px;
  grid-column: 3;
}

.mark { width: 32px; height: 32px; display: block; }
.brand { display: flex; align-items: center; gap: 10px; width: max-content; padding: 10px 12px; border-radius: 999px; }
.brand:hover { background: var(--hover); }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.brand-name span { color: var(--blue); }

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  margin: 2px 0;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 500;
}
.nav-pill {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 12px;
  font-weight: 800;
}
.nav-link .ico { width: 26px; height: 26px; }
.nav-link:hover { background: var(--hover); }
.nav-link.active {
  font-weight: 800;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}
.badge {
  position: absolute;
  left: 28px;
  top: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 8px 8px;
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 17px;
  font-weight: 700;
}
.post-btn .ico { display: none; width: 22px; height: 22px; }
.post-btn:hover { background: var(--blue-press); }

.account {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  text-align: left;
}
.account:hover { background: var(--hover); }
.account-text { display: flex; flex-direction: column; min-width: 0; }
.account-text strong, .account-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-text span, .handle, .dim, .domain, .time, .replying { color: var(--text-2); }
.account-text strong { font-size: 15px; }

.center { min-width: 0; min-height: calc(100vh - var(--top-h, 52px)); border-left: 1px solid var(--border); border-right: 1px solid var(--border); grid-column: 2; }
.sticky-head {
  position: sticky;
  top: var(--top-h, 52px);
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.sticky-head:has(#tabs[hidden]) { display: none; }
.head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.to-top,
.head-post {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.to-top:hover,
.head-post:hover { background: var(--blue-press); }
.to-top .ico { width: 18px; height: 18px; }
.head-post .ico { width: 16px; height: 16px; }
.tab-strip {
  display: flex;
  align-items: stretch;
  min-width: 0;
  position: relative;
}
.tab-scroller {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.tab-scroller::-webkit-scrollbar { display: none; }
.tab-strip::before,
.tab-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 72px;
  pointer-events: none;
  opacity: 0;
}
.tab-strip.has-prev::before {
  left: 0;
  opacity: 1;
  background: linear-gradient(90deg, var(--bg) 34px, transparent);
}
.tab-strip.has-next::after {
  right: 0;
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--bg) 36px);
}
.tab-strip.has-menu.has-next::after {
  right: 44px;
  width: 84px;
  background: linear-gradient(90deg, transparent, var(--bg) 40px);
}
.tab-strip a {
  flex: none;
  padding: 14px 16px 12px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-strip a[aria-selected="true"] { color: var(--text); font-weight: 800; border-bottom-color: var(--blue); }
.tab-strip a:hover { background: var(--hover); }
.tab-strip a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tab-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  margin-block: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(15, 20, 25, 0.16);
  display: grid;
  place-items: center;
}
.tab-arrow.prev { left: 6px; }
.tab-arrow.next { right: 6px; }
.tab-strip.has-menu .tab-arrow.next { right: 46px; }
.tab-arrow .ico { width: 16px; height: 16px; }
.tab-arrow:hover { color: var(--blue); background: var(--bg); }
:root[data-theme="dark"] .tab-arrow { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.tab-menu {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: center;
  width: 36px;
  height: 36px;
  margin: 0 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
}
.tab-menu:hover { background: var(--hover); }
.tab-menu .ico { width: 18px; height: 18px; }
.profile-tabs {
  position: sticky;
  top: calc(var(--top-h, 57px) + var(--head-h, 53px));
  z-index: 4;
  margin-top: -1px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-top: 6px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--search);
}
.search .ico { width: 18px; height: 18px; color: var(--text-2); flex: none; }
.search input, .search-page input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
}
.search-page { padding: 12px 16px 0; }
.search-page .search { margin: 0; }
.search-bar { display: flex; align-items: center; gap: 8px; }
.search-bar .search { flex: 1; margin-top: 0; }
.search-note { padding: 8px 16px 0; }
.trend {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.trend:hover { background: var(--hover); }
.trend-copy { min-width: 0; }
.trend-copy strong, .trend-copy .handle, .trend-desc { display: block; }
.section-mark {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 16%, var(--search));
  color: var(--blue);
}
.section-mark .ico { width: 20px; height: 20px; }
.explore-tabs {
  display: flex;
  margin: 8px -16px 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.explore-tabs::-webkit-scrollbar { display: none; }
.explore-tabs button {
  flex: 1 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 12px 14px 10px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.explore-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--blue); font-weight: 800; }
.explore-tabs button:hover { background: var(--hover); }
.trends { display: flex; flex-direction: column; }
.trend strong { font-size: 15px; letter-spacing: -0.01em; }
.trend-desc {
  color: var(--text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
}
.panel .trends { margin: 0 -4px; }
.panel .trend { padding: 10px 4px; }
.panel .trends .trend:last-child { border-bottom: 0; }
.panel-more { display: inline-block; margin-top: 8px; padding: 4px 0; color: var(--blue); font-weight: 800; }

.panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.panel h2 { margin: 0 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.settings {
  margin: 0;
  padding: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.settings > .dim { margin: 0; padding: 12px 16px 4px; }
.settings h2 { margin: 20px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.settings-panel { padding: 4px 16px 8px; }
.settings-panel h2:first-child { margin-top: 8px; }
.settings .toolbar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.settings .directory { padding-inline: 0; }
.settings-tabs {
  display: flex;
  margin: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs button {
  flex: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-2);
  padding: 14px 16px 12px;
  font-weight: 600;
  white-space: nowrap;
}
.settings-tabs button[aria-selected="true"] {
  background: transparent;
  color: var(--text);
  font-weight: 800;
  border-bottom-color: var(--blue);
}
.settings-tabs button:hover,
.settings-tabs button[aria-selected="true"]:hover { background: var(--hover); }
.panel p { margin: 0 0 12px; color: var(--text-2); }

.post { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.post.muted-row, .post.skel { cursor: default; }
.post.feed-post:hover { background: var(--hover); }
.post.selected { background: var(--hover); }
.post.connected .avatar-link { position: relative; }
.post.connected .avatar-link::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 46px;
  width: 2px;
  height: calc(100% + 20px);
  background: var(--border);
  pointer-events: none;
}
.post-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
.post-row > .avatar-btn { align-self: start; }
.post-top { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.name { font-weight: 700; }
.name, .handle, .time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { margin-left: 2px; }
.time::before { content: "· "; }
.more { align-self: center; }
.text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: pointer; font-size: calc(15px * var(--post-scale)); }
.post .name { font-size: calc(15px * var(--post-scale)); }
.post .handle, .post .time, .replying { font-size: calc(14px * var(--post-scale)); }
.post-tools { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
.post-tools .icon-btn { padding: 4px; }
.post-tools .ico { width: 18px; height: 18px; }
.speak.on { color: var(--blue); background: rgba(0, 133, 255, 0.12); }
.replying { display: inline-block; margin-top: 2px; }
a.facet, .facet { color: var(--blue); font-weight: 700; }
a.facet {
  cursor: pointer;
  user-select: text;
  -webkit-user-drag: none;
}
a.facet.mention, a.facet.tag, a.facet.ai, .facet.mention, .facet.tag, .facet.ai {
  background: color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}
a.facet.link { text-decoration: underline; text-underline-offset: 2px; }
a.facet:hover { text-decoration: underline; }
.text, .bio, .quote-text, .bubble p, .snip { user-select: text; }
.repost-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px 28px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
}
.repost-line .ico { width: 16px; height: 16px; }

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 700;
  flex: none;
}
.avatar::before { content: attr(data-initial); font-size: 16px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 22px; height: 22px; }
.avatar.sm::before { font-size: 11px; }
.avatar.xl { width: 96px; height: 96px; border: 4px solid var(--bg); margin-top: -56px; }
.avatar.xl::before { font-size: 32px; }
.avatar-link { display: block; height: max-content; }
button.avatar-btn {
  display: block;
  width: max-content;
  height: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  border-radius: 50%;
  line-height: 0;
  flex: none;
}
button.avatar-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: none;
  margin: 8px -8px 0;
}
.action-group {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  border-radius: 999px;
}
.action, .icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px;
  font-weight: 700;
}
.action .ico, .icon-btn .ico { width: 22px; height: 22px; }
.count, .count-link {
  color: inherit;
  font-weight: 800;
  font-size: 14px;
  min-width: 1.2em;
}
.count-link { border: 0; background: none; padding: 8px 8px 8px 0; }
.action-group:hover, .action:hover { background: rgba(0, 133, 255, 0.12); color: var(--blue); }
.action-group.repost.on, .action.repost.on { color: var(--green); }
.action-group.like.on, .action.like.on { color: var(--pink); }
.action-group.repost:hover, .action.repost:hover { color: var(--green); background: rgba(26, 156, 20, 0.14); }
.action-group.like:hover, .action.like:hover { color: var(--pink); background: rgba(236, 72, 153, 0.14); }
.action.like.on .heart { fill: currentColor; }
.action.bookmark.on { color: var(--blue); }
.action.bookmark.on .ico { fill: currentColor; }
.action.bookmark:hover, .action.share:hover { color: var(--blue); background: rgba(0, 133, 255, 0.14); }
.verified { width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; color: var(--blue); }
.verified.official { color: var(--gold); }
.verified.domain { color: var(--blue); }

.gallery { display: grid; gap: 3px; margin-top: 10px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.gallery.n2, .gallery.n4 { grid-template-columns: 1fr 1fr; }
.gallery.n3 { grid-template-columns: 1.4fr 1fr; }
.gallery.n3 .shot:first-child { grid-row: span 2; }
.shot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--search); overflow: hidden; }
.gallery.n1 .shot { max-height: 520px; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery.n2 .shot, .gallery.n3 .shot, .gallery.n4 .shot { height: 160px; }
.gallery.n3 .shot:first-child { height: 323px; }
.alt {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.card, .quote {
  display: block;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.card img { width: 100%; max-height: 180px; object-fit: cover; display: block; background: var(--search); }
.card-body, .quote { padding: 10px 12px; }
.quote { display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.quote-head { display: flex; gap: 8px; align-items: center; min-width: 0; color: inherit; }
.quote-head a { min-width: 0; color: inherit; }
.quote-text, .desc, .snip { color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(15px * var(--post-scale)); }
.card-body strong, .quote .line { display: block; }
.unavailable, .missing { margin-top: 8px; color: var(--text-2); }
.video { position: relative; display: block; width: 100%; margin-top: 10px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #111; }
.video img, .video video { width: 100%; display: block; max-height: 420px; }
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
}
.content.blurred .text,
.content.blurred .gallery,
.content.blurred .card,
.content.blurred .quote,
.content.blurred .collection,
.content.blurred .video { filter: blur(14px); }
.show-warn { margin-top: 8px; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 6px 12px; }

.prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  color: var(--text-2);
  font-size: 20px;
}
.prompt:hover { background: var(--hover); }
.home-lead { border-bottom: 1px solid var(--border); }
.home-lead .prompt { border-bottom: 0; }
.home-lead .ai-inline { border-bottom: 0; padding-bottom: 4px; }
.ai-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  color: inherit;
}
.ai-inline input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--search);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
}
.ai-inline-label { font-weight: 800; }
.ai-inline.offer {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
}
.ai-inline.offer:hover { background: var(--hover); }
.ai-inline.offer strong { font-size: 15px; }
.ai-inline.offer span { color: var(--text-2); font-size: 13px; font-weight: 500; }
.ai-ready-line { margin: 0 0 8px; }
.ai-empty { margin: 8px 0 12px; }
.ai-live {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 96px);
}
.ai-live .ai-thread { flex: 1; }

.person {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border-radius: 12px;
}
.person:hover { background: var(--hover); }
.person.unread {
  background: color-mix(in srgb, var(--blue) 14%, var(--bg));
  box-shadow: inset 3px 0 0 var(--blue);
}
.person.unread .handle { color: var(--text); font-weight: 700; }
.person strong, .person .handle, .person .snip { display: block; }
.person-link { flex: 1; min-width: 0; }
.person .follow, .profile-actions { flex: none; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.directory { padding: 4px 12px 8px; }
.cleanup-check { display: flex; align-items: center; align-self: center; flex: none; }
.cleanup-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.cleanup-person.on { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.cleanup-person.on:hover { background: color-mix(in srgb, var(--blue) 18%, var(--hover)); }
.why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.why-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 6px;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
}
.cleanup-more { margin: 8px 0 16px; }
.danger:disabled, .text-btn:disabled { opacity: 0.5; cursor: default; }
.manage-row { align-items: flex-start; }
.manage-row .row-actions { flex-wrap: wrap; justify-content: flex-end; max-width: min(230px, 52%); }
.row-actions { display: flex; gap: 4px; align-items: center; margin-left: auto; flex: none; }
.row-actions .pill { margin-left: 0; }
.person.gone strong { color: var(--text-2); }
.mini { padding: 6px 10px; font-size: 13px; }
.list-head { padding: 4px 16px 0; }
.list-head h2 { margin: 12px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.list-head .bio { margin: 0 0 8px; white-space: pre-wrap; }
.add-row { display: flex; gap: 8px; align-items: center; padding: 0 16px 12px; }
.call-start {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.call-start input { min-width: 12rem; }
.add-row input { flex: 1; }
.pinned-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 54px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}
.pinned-label .ico { width: 14px; height: 14px; }
.people { padding: 4px 12px; border-bottom: 1px solid var(--border); }
.note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.note[data-href] { cursor: pointer; }
.note[data-href]:hover { background: var(--hover); }
.note[data-href]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.note .said, .note .snip { cursor: pointer; user-select: text; }
.note.unread { background: color-mix(in srgb, var(--blue) 10%, var(--bg)); }
.note-icon { display: flex; justify-content: flex-end; padding-top: 2px; color: var(--blue); }
.note-icon .ico { width: 22px; height: 22px; }
.note.like .note-icon { color: var(--pink); }
.note.repost .note-icon, .note.quote .note-icon { color: var(--green); }
.note.mention .note-icon { color: var(--video); }
.note-body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.note .said {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  margin-top: 2px;
  color: var(--text);
  font-size: calc(15px * var(--post-scale));
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-context { display: block; width: 100%; margin-top: 6px; }
.note-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 800;
}
.note-context .snip {
  display: -webkit-box;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--search);
  color: var(--text-2);
}
.note-line { display: block; }
.note-line .time { font-size: calc(14px * var(--post-scale)); }
.note-line .time::before, .note-text .time::before { content: "· "; }
.note-line .verb { font-weight: 500; }
.note-media { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; }
.note-shots { display: flex; gap: 4px; }
.note-shot {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--search);
}
.note-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note-shot.is-play { background: #111; }
.note-shot.is-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}
.note-shot.is-play::after {
  content: "";
  position: absolute;
  left: calc(50% + 1px);
  top: 50%;
  z-index: 1;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  transform: translate(-40%, -50%);
}
.note-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 1;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.note-more {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-weight: 800;
}
.note-link {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--search);
}
.note-link:hover { background: var(--hover); }
.note-link img,
.note-link-mark {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
}
.note-link-mark { display: grid; place-items: center; color: var(--blue); }
.note-link-mark .ico { width: 18px; height: 18px; }
.note-link-copy { min-width: 0; }
.note-link-copy .domain,
.note-link-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-link-copy .domain { color: var(--text-2); font-size: 12px; }
.note-link-copy strong { font-size: 14px; font-weight: 700; }
.text-btn.inline { padding: 0 2px; font-weight: 800; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack .avatar-btn { display: flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--bg); }
.note.unread .avatar-stack .avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 10%, var(--bg)); }

.profile { padding-bottom: 12px; }
.banner { height: 200px; background: linear-gradient(120deg, #0085ff, #6bc1ff); overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; padding: 0 16px; }
.profile h2 { margin: 10px 16px 0; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.profile .handle, .bio, .counts, .joined { margin: 2px 16px; }
.joined { margin-top: 8px; color: var(--text-2); }
.profile-more {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
}
.profile-more:hover { background: var(--hover); }
.profile-more .ico { width: 18px; height: 18px; }
.outline {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  font-weight: 800;
  padding: 7px 16px;
}
.outline:hover { background: var(--hover); }
.bio { white-space: pre-wrap; }
.counts { display: flex; gap: 14px; }
.counts strong { color: var(--text); }

.follow, .primary {
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 700;
  padding: 8px 16px;
}
.primary { padding: 12px 18px; }
.primary.small, .follow { padding: 7px 16px; }
.follow.on { background: transparent; color: var(--text); border: 1px solid var(--border); }
.primary:hover, .follow:hover { background: var(--blue-press); }
.follow.on:hover { background: rgba(214, 31, 58, 0.1); color: var(--danger); border-color: transparent; }
.primary:disabled { opacity: 0.5; cursor: default; }
#compose-send.warn:not(:disabled) { background: var(--orange); color: #fff; }
#compose-send.warn:not(:disabled):hover { background: #ea580c; }
#compose-highlight .typo, .field-highlight .typo {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.text-btn, .text-link { background: none; border: 0; color: var(--blue); font-weight: 700; padding: 8px; }
.danger { border: 1px solid var(--danger); background: transparent; color: var(--danger); border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.text-btn.mini, .danger.mini { padding: 6px 10px; font-size: 13px; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.empty { padding: 48px 24px; text-align: center; }
.empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.empty p { margin: 0 0 16px; color: var(--text-2); }
.empty .primary, .empty .text-link { margin: 4px; }

.skel .sk, .sk.line { display: block; background: var(--search); border-radius: 8px; }
.skel .avatar { background: var(--search); }
.skel .avatar::before { content: none; }
.sk.line { height: 12px; margin: 8px 0; }
.sk.line.short { width: 40%; }
.sk.line.mid { width: 72%; }
.muted-row { color: var(--text-2); }
.muted-row button { border: 0; background: none; color: var(--blue); font-weight: 700; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-bottom: 1px solid var(--border);
}
.chat-with { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; padding: 12px 16px 12px 0; }
.chat-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-right: 12px; }
.call-pair {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, var(--bg));
}
.call-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, var(--bg));
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
}
.call-btn .ico { width: 16px; height: 16px; }
.call-btn[data-act="call-video"], .call-btn[data-media="video"] {
  background: color-mix(in srgb, var(--video) 18%, var(--bg));
  color: var(--video);
}
.call-btn:hover, .call-btn:focus-visible { background: var(--blue); color: var(--on-blue); }
.call-btn[data-act="call-video"]:hover, .call-btn[data-media="video"]:hover,
.call-btn[data-act="call-video"]:focus-visible, .call-btn[data-media="video"]:focus-visible {
  background: var(--video-solid);
  color: #fff;
}
.chat-with strong, .chat-with .handle { display: block; }
.call-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 14%, var(--bg));
  color: var(--text);
  box-shadow: inset 3px 0 0 var(--blue);
}
.call-banner.video {
  border-color: color-mix(in srgb, var(--video) 55%, var(--border));
  background: color-mix(in srgb, var(--video) 16%, var(--bg));
  box-shadow: inset 3px 0 0 var(--video);
}
.call-banner .ico { width: 22px; height: 22px; flex: none; color: var(--blue); }
.call-banner.video .ico { color: var(--video); }
.call-banner span { flex: 1; font-weight: 800; }
.call-banner .primary, .call-banner .danger { flex: none; }
.msg-header {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}
.msg-header.audio {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 12%, var(--bg));
  box-shadow: inset 3px 0 0 var(--blue);
}
.msg-header.video {
  border-color: color-mix(in srgb, var(--video) 50%, var(--border));
  background: color-mix(in srgb, var(--video) 14%, var(--bg));
  box-shadow: inset 3px 0 0 var(--video);
}
.msg-header .ico { width: 20px; height: 20px; flex: none; color: var(--blue); }
.msg-header.video .ico { color: var(--video); }
.call-actions { display: flex; gap: 6px; margin-left: auto; }
.call-note { margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }
.call-row { padding-inline: 12px; }
.call-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.messages { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 24px; min-height: 50vh; }
.bubble {
  max-width: min(92%, 520px);
  padding: 10px 14px;
  border: 1px solid var(--incoming-border);
  border-radius: 16px;
  background: var(--incoming);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.06);
}
.bubble.fresh { animation: message-in 1.4s ease; }
@keyframes message-in {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 55%, transparent); }
  to { box-shadow: 0 1px 2px rgba(15, 20, 25, 0.06); }
}
.bubble.assistant { background: color-mix(in srgb, var(--blue) 14%, var(--search)); border-color: transparent; }
.ai-kicker { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 12px; font-weight: 700; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ai-actions .primary, .ai-actions .text-btn { margin: 0; }
.bubble p { margin: 0; font-size: calc(15px * var(--post-scale)); }
.bubble.mine { margin-left: auto; background: var(--blue); color: var(--on-blue); border-color: transparent; box-shadow: none; }
.bubble.deleted { background: var(--search); border-color: var(--border); color: var(--text-2); font-style: italic; box-shadow: none; }
.bubble .quote, .bubble .card { background: var(--bg); color: var(--text); text-align: left; }
.bubble.mine .facet, .bubble.mine a.facet { color: var(--on-blue); background: transparent; text-decoration: underline; font-weight: 700; }
.bubble.mine .quote .facet, .bubble.mine .quote a.facet,
.bubble.mine .card .facet, .bubble.mine .card a.facet {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  text-decoration: none;
}
.reply-bar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: end;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat-hint { grid-column: 1; margin: 0; color: var(--text-2); font-size: 12px; font-weight: 600; }
#chat-form > .chat-field { grid-column: 1; grid-row: 1; }
#chat-form > button[type="submit"],
#chat-form > .tip-wrap { grid-column: 2; grid-row: 1; }
#chat-form > #chat-picker:not([hidden]) { grid-column: 1 / -1; min-height: 0; overflow: hidden; }
#chat-form > .chat-tools { grid-column: 1 / -1; }
#chat-form > .chat-hint { grid-column: 1 / -1; }
#chat-picker:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(300px, 42dvh);
  overflow: hidden;
  background: transparent;
}
#chat-picker:not([hidden]):has(.picker-tall) {
  height: min(360px, 50dvh);
  min-height: min(240px, 40dvh);
  max-height: min(360px, 50dvh);
}
#chat-picker:not([hidden]) > .picker,
#compose.picker-open #compose-picker:not([hidden]) > .picker {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  overflow: hidden;
}
.chat-tools { display: flex; align-items: center; gap: 2px; min-width: 0; }
.chat-tools .icon-btn {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  color: var(--blue);
}
.chat-tools .icon-btn:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.chat-hint-touch { display: none; }
.chat-field {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--search);
  border-radius: 18px;
}
.chat-field .field-highlight, .chat-field textarea {
  width: 100%;
  margin: 0;
  border: 0;
  min-height: 96px;
  padding: 12px 14px;
  font: inherit;
  font-family: var(--font), var(--emoji-font);
  font-variant-emoji: emoji;
  font-kerning: none;
  font-variant-ligatures: none;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-field .field-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--text);
  background: transparent;
}
.chat-field textarea {
  position: relative;
  display: block;
  max-height: 280px;
  resize: none;
  overflow: hidden;
  outline: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
}

dialog {
  width: min(600px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: fit-content;
  max-height: calc(100dvh - 24px);
  margin: auto;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  color-scheme: inherit;
  box-shadow: var(--shadow);
}
dialog:modal {
  position: fixed;
  inset: 0;
  height: fit-content;
  max-height: calc(100dvh - 24px);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
#login {
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 0 0 8px;
  background: #0085ff url('../assets/login-hero.jpg') center top / 100% auto no-repeat;
}
#login form { margin-top: 0; background: var(--bg); border-radius: 18px 18px 0 0; }
#login form, #compose form { padding: 16px 18px 18px; }
.login-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  aspect-ratio: 1408 / 736;
  padding: 16px 18px 16px;
}
.login-name {
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0, 30, 80, 0.35);
}
.login-name span {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.92;
}
.login-features {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 0;
}
.login-features span {
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 40, 110, 0.55);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 800;
}
#login h2 { margin: 8px 0; font-size: 24px; }
#login label, .mute-form { display: flex; flex-direction: column; gap: 6px; font-weight: 600; margin: 12px 0; }
#login input, .mute-form input, #compose-previews input, .add-row input, #attach-q, .call-start input, .link-add input {
  border: 1px solid var(--border);
  background: var(--search);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 400;
}
#login .primary, #login .text-btn, #login .browse-btn { width: 100%; }
.browse-btn {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  font-size: 16px;
}
.browse-btn:hover { opacity: 0.88; }
.app-downloads { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.download-label { margin: 0 0 8px; font-weight: 800; }
.download-row { display: flex; gap: 8px; }
.download-btn {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 10px;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: center;
}
.download-btn span { font-size: 12px; font-weight: 600; color: var(--text-2); }
.download-btn:hover { background: var(--hover); }
.download-btn:disabled { opacity: 0.7; cursor: progress; }
.download-note, .download-notes { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
.download-notes { padding-left: 18px; }
.download-page { padding: 8px 16px 24px; }
.download-page h2,
.support-page h2 { margin: 12px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.download-page .download-row { flex-direction: column; }
.download-page .download-btn {
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.support-page { padding: 8px 16px 32px; }
.support-page p { margin: 0 0 12px; }
.support-pay { display: inline-flex; align-items: center; margin: 4px 0 12px; text-decoration: none; }
.gate-brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -0.04em; }
.gate-brand span { color: var(--blue); }
.gate-brand .mark { width: 36px; height: 36px; }
.remember { font-size: 13px; line-height: 1.45; }
html[data-signed-out] #login::backdrop { background: rgba(0, 20, 40, 0.55); }
.boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--bg);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-align: center;
}
.boot p { margin: 8px 0 0; max-width: 280px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.reply-control, #report label, #profile-edit label, #manage label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  font-weight: 700;
}
.reply-control { flex-direction: row; align-items: center; justify-content: space-between; }
.reply-control select, #report select, #profile-edit input, #manage input, #manage select {
  border: 1px solid var(--border);
  background: var(--search);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 500;
}
#report textarea, #profile-edit textarea, #manage textarea {
  border: 1px solid var(--border);
  background: var(--search);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 500;
}
#report, #profile-edit, #manage { padding: 8px 8px 16px; }
#report form, #profile-edit form, #manage form { padding: 8px 16px 12px; }
#manage h2 { margin: 8px 0; font-size: 22px; }
.search-sort { margin: 8px 0 4px; }
.form-error { color: var(--danger); margin: 8px 0; }
.compose-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.compose-bar-end { display: flex; align-items: center; gap: 8px; }
.tip-wrap { display: inline-flex; }
.tip-wrap > :disabled { pointer-events: none; }
.compose-keys { color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
#compose-mic { width: 36px; height: 36px; justify-content: center; padding: 0; color: var(--text-2); }
#compose-mic:hover { background: var(--hover); color: var(--text); }
#compose-mic[aria-pressed="true"] { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.lang-chip {
  border: 1px solid var(--border);
  background: var(--search);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lang-chip:hover { background: var(--hover); }
.compose-stage { display: flex; gap: 12px; align-items: flex-start; }
.compose-stage > .avatar { margin-top: 2px; }
.compose-write { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.composer-field { position: relative; }
#compose-highlight, #compose-text {
  width: 100%;
  margin: 0;
  border: 0;
  min-height: 120px;
  font: inherit;
  font-family: var(--font), var(--emoji-font);
  font-variant-emoji: emoji;
  font-size: calc(18px * var(--post-scale));
  line-height: 1.45;
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#compose-highlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
  background: transparent;
}
#compose-highlight, .field-highlight {
  font-variant-ligatures: none;
}
#compose-highlight { padding: 0; }
#compose-highlight .facet, .field-highlight .facet {
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 0;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}
#compose-highlight .facet.tag, .field-highlight .facet.tag {
  background: color-mix(in srgb, var(--blue) 32%, transparent);
  box-shadow: inset 0 -2px 0 var(--blue);
}
.field-highlight .facet { color: var(--blue); }
#compose-highlight,
#compose-highlight .facet,
#compose-highlight .typo,
#compose-highlight .field-selection {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#compose-highlight .field-selection, .field-highlight .field-selection {
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  border-radius: 2px;
}
.field-highlight .field-selection { color: inherit; }
#compose-text {
  position: relative;
  z-index: 1;
  display: block;
  resize: vertical;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}
#compose[open] {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 16px));
  height: min(92dvh, 900px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
}
#compose[open] form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  gap: 8px;
}
#compose[open] .compose-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  align-items: stretch;
}
#compose.picker-open .compose-stage { min-height: 120px; }
#compose.picker-open:has(.picker-tall) .compose-stage {
  flex: 1 1 180px;
  min-height: 120px;
}
#compose.picker-open #compose-picker:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(280px, 40dvh);
  overflow: hidden;
  background: transparent;
}
#compose.picker-open #compose-picker:not([hidden]):has(.picker-tall) {
  flex: 1 1 300px;
  min-height: min(240px, 36dvh);
  max-height: none;
}
#compose[open] .compose-write { min-height: 0; height: 100%; }
#compose[open] .composer-field {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: hidden;
}
.compose-leave {
  flex: none;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--search);
}
.compose-leave p { margin: 0 0 8px; font-weight: 800; }
.compose-leave .dim { font-weight: 500; }
.compose-leave-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#compose-save-draft {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
}
#compose-save-draft:hover { background: var(--hover); }
#compose-picker { flex: none; position: relative; z-index: 2; background: transparent; }
#compose[open] .reply-control,
#compose[open] .compose-bar,
#compose[open] .compose-leave { flex: none; }
#compose[open] #compose-text {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  resize: none;
  overflow: auto;
}
#compose-text::placeholder, .chat-field textarea::placeholder {
  color: var(--text-2);
  -webkit-text-fill-color: var(--text-2);
}
#compose-text::selection { background: rgba(0, 133, 255, 0.28); }
.link-preview { position: relative; margin-top: 8px; }
.link-preview .card, .link-preview .quote { margin-top: 0; }
.card-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-weight: 800;
}
.banner-field img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--search);
  display: block;
  margin-bottom: 8px;
}
.compose-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 -18px -18px;
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.compose-dock .icon-btn {
  width: 40px;
  height: 40px;
  justify-content: center;
  padding: 0;
  color: var(--blue);
}
.compose-dock .icon-btn:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.compose-dock .icon-btn[aria-expanded="true"],
.compose-dock .icon-btn[aria-pressed="true"],
.chat-tools .icon-btn[aria-expanded="true"],
.chat-tools .icon-btn[aria-pressed="true"],
.lang-chip[aria-expanded="true"] {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.style-btn { font-family: var(--font); font-size: 16px; font-weight: 800; }
.style-btn[data-style="italic"] { font-style: italic; }
.style-btn[data-style="strike"] { text-decoration: line-through; }
.style-btn[data-style="mono"] { font-family: ui-monospace, monospace; font-size: 13px; }
.count-ring {
  --p: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--border) 0);
  flex: none;
}
.count-ring b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.count-ring.near {
  background: conic-gradient(var(--orange) calc(var(--p) * 1%), var(--border) 0);
}
.count-ring.near b { color: var(--orange); }
.count-ring.over { background: conic-gradient(var(--danger) 100%, var(--danger) 0); }
.tool-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.video-draft { position: relative; margin-top: 8px; }
.video-draft img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 12px; background: #111; }
.video-draft video {
  width: 100%;
  max-height: 280px;
  border-radius: 16px;
  background: #111;
  display: block;
}
.video-draft input, .preview input {
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border);
  background: var(--search);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 400;
}
.link-add { display: flex; gap: 8px; align-items: center; }
.link-add input { flex: 1; }
.picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  margin-top: 8px;
  max-height: min(320px, 42dvh);
  overflow: hidden;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--text-2));
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 20%, transparent);
}
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 0 0 0 6px;
}
.picker-title {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.picker-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, var(--text) 8%);
  color: var(--text);
}
.picker-x .ico { width: 16px; height: 16px; }
.picker-x:hover,
.picker-x:focus-visible {
  background: var(--hover);
  border-color: var(--border);
  color: var(--text);
}
.picker-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.picker-label { margin: 0 4px; color: var(--text); font-size: 13px; font-weight: 700; }
.picker-note { margin: 0 4px 4px; color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1.4; }
.picker input, .token {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: 9px 12px;
}
.token { font-family: ui-monospace, monospace; word-break: break-all; }
.emoji-grid, .gif-grid { display: grid; gap: 4px; }
.emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gif-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emoji-grid button, .gif-grid button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  padding: 4px;
}
.emoji-grid button { font-family: var(--emoji-font), var(--font); font-size: 22px; line-height: 1.2; aspect-ratio: 1; }
.emoji-group { margin: 0 0 2px; }
.emoji-group summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  margin: 8px 4px 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.emoji-group summary::-webkit-details-marker { display: none; }
.emoji-group summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
}
.emoji-group[open] summary::before { margin-top: 2px; transform: rotate(45deg); }
.emoji-grid button:hover, .gif-grid button:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}
.gif-grid button.on,
.gif-grid button[aria-pressed="true"] {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 18%, transparent);
}
.gif-grid img { width: 100%; height: 84px; object-fit: cover; border-radius: 8px; display: block; background: #16181c; }
.account-line { display: flex; align-items: center; gap: 4px; }
.account-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px;
  border-radius: 12px;
}
.account-switch strong, .account-switch .handle { display: block; }
.account-switch.on { background: color-mix(in srgb, var(--blue) 14%, transparent); }
.card.gif-card { display: block; overflow: hidden; background: #111; }
.card.gif-card img { width: auto; max-width: 100%; max-height: 320px; margin: 0 auto; object-fit: contain; background: #111; }
#compose-count.over b { color: var(--danger); }
#compose-context { color: var(--text-2); font-size: 14px; }
#compose-context p { margin: 4px 0; }
#compose-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preview { position: relative; }
.preview img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; }
.preview input { margin-top: 4px; }

#lightbox { width: min(960px, calc(100vw - 16px)); background: transparent; box-shadow: none; text-align: center; }
#lightbox img { max-height: 82vh; border-radius: 12px; }
#lightbox-alt { color: #fff; }
.light-close, .light-nav { position: fixed; color: #fff; background: rgba(0, 0, 0, 0.45); }
.light-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.light-close .ico { width: 22px; height: 22px; }
.light-nav.prev { left: 12px; top: 50%; }
.light-nav.next { right: 12px; top: 50%; }

.menu {
  position: fixed;
  z-index: 40;
  margin: 0;
  width: 250px;
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.menu button { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; font-weight: 600; color: inherit; font: inherit; }
.menu button:hover { background: var(--hover); }
.menu button.is-danger { color: var(--danger); }
.menu button.is-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.menu button:disabled { color: var(--text-2); cursor: not-allowed; }
.menu button:disabled:hover { background: transparent; }

button.nav-link { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.nav-link.soon, .icon-btn.soon { color: var(--text-2); cursor: default; }
.soon { position: relative; }
.soon-tip {
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--border) 45%, var(--text) 30%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: 0 6px 16px color-mix(in srgb, #000 22%, transparent);
}
.soon:hover .soon-tip, .soon:focus-visible .soon-tip { display: block; }
.section-label { margin: 14px 16px 4px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.packs { display: flex; flex-direction: column; }
.pack {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.pack strong, .pack .handle, .pack .snip { display: block; }
.fresh {
  position: fixed;
  z-index: 6;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 6px 14px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 800;
  box-shadow: var(--shadow);
}
.fresh-faces { display: flex; flex: none; }
.fresh-faces .avatar {
  width: 28px;
  height: 28px;
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--blue);
}
.fresh-faces .avatar:first-child { margin-left: 0; }
.fresh-faces .avatar::before { font-size: 12px; }
.fresh-label { font-size: 14px; }
.fresh-link { font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.fresh-update {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0 16px 10px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.fresh-update:hover { color: var(--blue); }
.request-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--hover);
}
.request-banner p { margin: 0; }
.collection, .collection-wrap { position: relative; }
a.collection, button.collection {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
}
button.collection { font: inherit; cursor: pointer; }
a.collection:hover, button.collection:hover { background: var(--hover); }
a.collection .avatar, button.collection .avatar { width: 36px; height: 36px; }
a.collection .avatar::before, button.collection .avatar::before { font-size: 14px; }
.collection-copy { min-width: 0; }
.collection-copy strong, .collection-copy .domain, .collection-copy .desc { display: block; }
.collection-copy .desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.collection-wrap .collection { margin-top: 0; }
.shelf { padding: 4px 16px 12px; border-bottom: 1px solid var(--border); }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shelf-head h3 { margin: 8px 0; font-size: 16px; }
.shelf-list { display: flex; flex-direction: column; gap: 8px; }
.shelf-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.shelf-item .collection { margin-top: 0; }
.shelf-note { margin: 8px 0 0; font-size: 13px; }
#attach { width: min(560px, calc(100vw - 24px)); }
#attach form { padding: 8px 16px 16px; }
#attach-q {
  width: 100%;
  margin-top: 8px;
  color: var(--text);
}
.attach-results { max-height: min(420px, 52vh); overflow: auto; margin-top: 8px; }
.attach-results .collection { margin-top: 8px; }
.attach-kinds { margin: 8px 0 0; }
[popover] {
  margin: 0;
  padding: 0;
  inset: unset;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
#suggest:popover-open, .float-tip:popover-open, #hovercard:popover-open, #type-ghost:popover-open { display: block !important; }
.float-tip {
  position: fixed;
  inset: auto;
  z-index: 60;
  margin: 0;
  padding: 4px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 45%, var(--text) 30%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px color-mix(in srgb, #000 22%, transparent);
}
.float-tip:popover-open {
  border: 1px solid color-mix(in srgb, var(--border) 45%, var(--text) 30%);
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
  color: var(--text);
}
#suggest:not([hidden]) { display: block; }
.suggest {
  position: fixed;
  inset: auto;
  z-index: 80;
  margin: 0;
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.suggest-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
}
.suggest-row.on, .suggest-row:hover { background: var(--hover); }
.suggest-hint { margin: 2px 8px 6px; color: var(--text-2); font-size: 12px; font-weight: 700; }
.suggest-row { cursor: pointer; }
.type-ghost {
  position: fixed;
  inset: auto;
  z-index: 45;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--text-2) 80%, transparent);
  pointer-events: none;
  white-space: pre;
}
.hovercard {
  position: fixed;
  inset: auto;
  z-index: 55;
  width: min(320px, calc(100vw - 16px));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.hover-banner { height: 84px; background: linear-gradient(120deg, #0085ff, #6bc1ff); }
.hover-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hover-body { padding: 0 14px 14px; }
.hover-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.hovercard .avatar.xl { width: 72px; height: 72px; margin: -36px 0 0; border-width: 3px; }
.hover-name { display: inline-flex; margin-top: 6px; font-size: 16px; }
.hovercard .handle { margin: 0; }
.hovercard .bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0;
  white-space: pre-wrap;
}
.hovercard .counts { margin: 8px 0 0; gap: 12px; font-size: 14px; }
.lang-find {
  width: min(100%, 360px);
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  background: var(--search);
}
.lang-wait { margin: 16px; }
.settings h3 { margin: 16px 0 6px; font-size: 15px; }
.lang-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.lang-pick {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
}
.lang-pick span { margin-right: 6px; color: var(--text-2); font-size: 11px; letter-spacing: 0.04em; }
.lang-pick[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: transparent; }
.lang-pick[aria-pressed="true"] span { color: var(--on-blue); }
.lang-pick:hover { background: var(--hover); }
.lang-pick[aria-pressed="true"]:hover { background: var(--blue-press); }
.about-kicker { margin: 0 16px 4px; color: var(--blue); font-size: 13px; font-weight: 800; }
.about-copy, .about-facts, #legal p { margin: 0 16px 12px; }
.about-name { margin: 0 16px; font-weight: 700; }
.about-role { margin: 0 16px 8px; color: var(--text-2); }
.about-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 16px 14px; padding: 0; list-style: none; }
.about-links a, .about-links button, #legal a { color: var(--blue); font-weight: 700; }
.about-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.about-facts { color: var(--text-2); font-size: 13px; white-space: pre-wrap; }
.oss {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 16px 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 10%, var(--bg));
}
.oss-mark { width: 36px; height: 36px; flex: none; margin-top: 2px; color: var(--text); }
.oss-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oss:hover { border-color: var(--blue); }
.oss-kicker { color: var(--blue); font-size: 13px; font-weight: 800; }
.oss strong { font-size: 18px; letter-spacing: -0.03em; }
.oss span:last-child { color: var(--text-2); font-size: 14px; line-height: 1.4; }
.oss-license { display: inline-flex; margin: 0 16px 16px; color: var(--blue); font-weight: 800; }
#about h2, #legal h2, #legal h3 { margin: 8px 16px; }
#help, #lanes {
  width: min(480px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  overflow: auto;
}
#help form, #lanes form { padding: 8px 16px 18px; }
#help h2, #lanes h2 { margin: 8px 0; }
#help h3, #lanes h3 { margin: 16px 0 6px; font-size: 16px; }
#help p, .lane-note { margin: 0 0 10px; }
#help .oss, #help .about-links { margin-left: 0; margin-right: 0; }
.lane-strip { margin: 0 -16px 8px; border-bottom: 1px solid var(--border); }
.lane-strip [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 14px 12px 12px;
  font-weight: 600;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.lane-strip [role="tab"][aria-selected="true"] { color: var(--text); font-weight: 800; border-bottom-color: var(--blue); }
.lane-nudge, .lane-x {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.lane-nudge:hover, .lane-x:hover { background: var(--hover); color: var(--text); }
.lane-nudge:disabled { opacity: 0.3; }
.lane-nudge .ico { width: 14px; height: 14px; }
.lane-x { font-size: 16px; line-height: 1; }
#attach-current { margin: 0 0 8px; }
#attach-current .dim { margin: 0 0 4px; }
.lane-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.lane-row > span:first-child { min-width: 0; flex: 1; }
.lane-row strong, .lane-row .handle { display: block; }
.lane-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-moves { display: flex; align-items: center; gap: 4px; flex: none; }
.lane-lock { color: var(--text-2); font-size: 13px; font-weight: 700; }
.lane-move {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
}
.lane-move:hover { background: var(--hover); }
.lane-move:disabled { opacity: 0.35; }
.lane-move .ico { width: 16px; height: 16px; }
.lanes-save { width: 100%; margin-top: 16px; }
#call { width: min(420px, calc(100vw - 24px)); }
.call-stage { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#call-title { margin: 0; font-size: 20px; text-align: center; }
.call-voice {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 148px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 14%, var(--bg));
  color: var(--blue);
  font-weight: 800;
}
.call-voice .ico { width: 48px; height: 48px; }
.call-stage video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; }
#call-local { position: absolute; right: 24px; bottom: 88px; width: 120px; max-height: 90px; border: 2px solid #fff; }
.call-stage .danger { align-self: center; min-width: 140px; }
body.ringing { padding-bottom: 120px; }
.incoming-call {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(460px, calc(100vw - 24px));
  padding: 12px;
  border: 2px solid var(--blue);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}
.incoming-call.video { border-color: var(--video); }
.incoming-call-copy { flex: 1; min-width: 0; }
.incoming-call strong, .incoming-call-copy span { display: block; }
.incoming-call-copy span { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incoming-call .primary, .incoming-call .danger { flex: none; }
.sound-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sound-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sound-row span { font-weight: 700; }
.sound-row button {
  min-width: 64px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  padding: 6px 14px;
  font-weight: 800;
}
.sound-row button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: transparent; }
.sound-row { flex-wrap: wrap; }
.sound-row > span { min-width: 9rem; }
.vol { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; font-weight: 700; }
.vol b { min-width: 3.2ch; font-variant-numeric: tabular-nums; }
.vol input[type="range"] { flex: 1; width: 100%; accent-color: var(--blue); }
.voice-label, .voice-vol { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 700; }
.voice-label select { flex: 1; border: 1px solid var(--border); background: var(--search); border-radius: 999px; padding: 8px 14px; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.switch-row strong, .switch-row .dim { display: block; }
.switch-row .dim { font-weight: 500; }
.switch-row input { width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
#tune { width: min(440px, calc(100vw - 24px)); }
#tune form { padding: 8px 16px 18px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.posted-bar {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 28;
  min-width: 132px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
  text-align: center;
  box-shadow: var(--shadow);
  pointer-events: none;
  transform: translateX(-50%);
}
.posted-bar.is-on { animation: posted-life 6s ease forwards; }
@keyframes posted-life {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}
.ai-note {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--hover);
}
.ai-note-kicker {
  margin: 0 0 4px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 800;
}
.ai-note p:last-child { margin: 0; }
.ai-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ai-check .ico { width: 16px; height: 16px; }
#debug-log {
  width: min(560px, calc(100vw - 24px));
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--text-2));
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
  color: var(--text);
}
.debug-lead { margin: 0 16px 12px; }
.debug-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 480px);
  overflow: auto;
  padding: 0 16px 16px;
}
.debug-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.debug-row.is-error { border-color: var(--danger); }
.debug-row header { display: flex; gap: 8px; align-items: baseline; }
.debug-row header span,
.debug-row time { color: var(--text-2); font-size: 12px; }
.debug-row time { margin-left: auto; }
.debug-meta, .debug-asked { margin: 4px 0; color: var(--text-2); font-size: 12px; }
.debug-asked span { font-weight: 800; color: var(--text); }
.debug-row pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.design-readout {
  position: fixed;
  top: 60px;
  right: 12px;
  z-index: 20;
  max-width: min(440px, calc(100vw - 24px));
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #2a0a14;
  color: #fffaf3;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
}
html[data-design="on"] [data-design-label],
html[data-design="on"] .post,
html[data-design="on"] .profile,
html[data-design="on"] .home-lead,
html[data-design="on"] .ai-note,
html[data-design="on"] .fresh,
html[data-design="on"] .posted-bar {
  outline: 1px dashed #e11d48;
  outline-offset: -1px;
}
html[data-design="on"] .center { position: relative; }
html[data-design="on"] [data-design-label]::after {
  content: attr(data-design-label);
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 3;
  padding: 0 5px;
  border-radius: 4px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}
html[data-design="on"] .app-top::after {
  top: auto;
  right: auto;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.ai-form { display: flex; flex-direction: column; gap: 10px; max-width: 440px; }
.ai-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.ai-form input, .ai-form select {
  border: 1px solid var(--border);
  background: var(--search);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 500;
}
#ai-key {
  -webkit-text-security: disc;
}
.settings.ai-doc { padding: 12px 16px 24px; }
.ai-doc .ai-thread { min-height: 0; padding: 4px 0 8px; }
.ai-ask { position: static; margin-top: 8px; border: 1px solid var(--border); border-radius: 18px; }
.segmented { display: flex; gap: 8px; margin-bottom: 18px; }
.segmented.wrap { flex-wrap: wrap; }
.segmented button { border: 1px solid var(--border); background: transparent; border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.segmented button[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { border: 1px solid var(--border); background: var(--search); border-radius: 999px; padding: 6px 10px; }
.chip-x { color: var(--danger); font-weight: 800; margin-left: 6px; }
.keys { padding-left: 18px; color: var(--text-2); }
kbd { font-family: ui-monospace, monospace; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; color: var(--text); }
.pill { margin-left: auto; background: var(--blue); color: var(--on-blue); border-radius: 999px; min-width: 20px; text-align: center; font-size: 12px; padding: 2px 6px; }

:root[data-theme="contrast-light"] .post,
:root[data-theme="contrast-dark"] .post { border-bottom-width: 2px; }
:root[data-theme="contrast-light"] .card,
:root[data-theme="contrast-dark"] .card,
:root[data-theme="contrast-light"] .quote,
:root[data-theme="contrast-dark"] .quote,
:root[data-theme="contrast-light"] .note-shot,
:root[data-theme="contrast-dark"] .note-shot,
:root[data-theme="contrast-light"] .note-link,
:root[data-theme="contrast-dark"] .note-link,
:root[data-theme="contrast-light"] .panel,
:root[data-theme="contrast-dark"] .panel { border-width: 2px; }
:root[data-theme="contrast-light"] .primary,
:root[data-theme="contrast-dark"] .primary,
:root[data-theme="contrast-light"] .post-btn,
:root[data-theme="contrast-dark"] .post-btn,
:root[data-theme="contrast-light"] .to-top,
:root[data-theme="contrast-dark"] .to-top,
:root[data-theme="contrast-light"] .head-post,
:root[data-theme="contrast-dark"] .head-post,
:root[data-theme="contrast-light"] .segmented button,
:root[data-theme="contrast-dark"] .segmented button { border: 2px solid var(--text); }
:root[data-theme="contrast-light"] .settings-tabs button,
:root[data-theme="contrast-dark"] .settings-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text);
}
:root[data-theme="contrast-light"] .settings-tabs button[aria-selected="true"],
:root[data-theme="contrast-dark"] .settings-tabs button[aria-selected="true"] {
  border-bottom-color: var(--text);
  background: transparent;
  color: var(--text);
}
:root[data-theme="contrast-light"] a.facet,
:root[data-theme="contrast-dark"] a.facet,
html[data-reader="on"] a.facet { text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="contrast-light"] :focus-visible,
:root[data-theme="contrast-dark"] :focus-visible,
html[data-reader="on"] :focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.sr-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html[data-reader="on"] .actions { flex-wrap: wrap; row-gap: 4px; }
html[data-reader="on"] .post .sr-name {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  font-size: calc(12px * var(--post-scale));
  font-weight: 800;
}

.tabbar, .fab { display: none; }


@media (max-width: 1100px) {
  .shell { grid-template-columns: 84px minmax(0, 680px); }
  .left { width: 84px; justify-self: stretch; padding-inline: 6px; align-items: center; }
  .right, .brand-name, .nav-link .label, .nav-pill, .account-text, .post-btn span, .soon-tip { display: none; }
  .nav-link.soon:hover .soon-tip { display: block; left: 56px; }
  .icon-btn.soon:hover .soon-tip,
  .icon-btn.soon:focus-visible .soon-tip {
    display: block;
    left: auto;
    right: 0;
    top: calc(100% + 6px);
    transform: none;
  }
  .nav-link, .account { width: 52px; justify-content: center; padding-inline: 0; }
  .brand { display: none; }
  .post-btn { width: 52px; margin-inline: 0; }
  .post-btn .ico { display: block; }
  .badge { left: 28px; }
}

@media (max-width: 640px) {
  .head-post span,
  .to-top span { display: none; }
  .head-post,
  .to-top { width: 32px; padding: 0; }
}
@media (max-width: 720px) {
  .shell { display: block; }
  .left { display: none; }
  .center { border: 0; max-width: 640px; margin: 0 auto; min-height: 0; }
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
  }
  .tabbar a { position: relative; color: var(--text-2); }
  .tabbar a.active { color: var(--blue); }
  .tabbar .badge { left: auto; right: -2px; top: -4px; }
  .tabbar .ico { width: 26px; height: 26px; }
  .soon-tip { left: auto; right: 0; top: calc(100% + 6px); transform: none; }
  .fab {
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 11;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    color: var(--on-blue);
  }
  .fab .ico { width: 24px; height: 24px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .posted-bar { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .design-readout { top: auto; bottom: calc(132px + env(safe-area-inset-bottom)); }
  .incoming-call { bottom: calc(136px + env(safe-area-inset-bottom)); }
  body.ringing { padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
  .reply-bar { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .ai-ask { bottom: auto; }
  body:has(#chat-form) .fab { display: none; }
}

@media (pointer: coarse) {
  .chat-hint-keys, .compose-keys { display: none; }
  .chat-hint-touch { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .posted-bar.is-on { animation: none; transform: translateX(-50%); }
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.reply-control select,
#report select,
#manage select,
.voice-label select,
.ai-form select {
  background-color: var(--search);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}