:root {
  color-scheme: dark;
  --bg: #000000;
  --fg: #e7e9ea;
  --secondary: #ccd1d4;
  --quiet: #797e83;
  --surface: #202327;
  --hover: #16181c;
  --line: #2f3336;
  --accent: #1d9bf0;
  --link: #98d5ff;
  --primary: #00578f;
  --primary-hover: #00548a;
  --gold: #e2b719;
  --danger: #ffc0ca;
  --warning: #ffd166;
  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-heading: 1.25rem;
  --text-post: 1.375rem;
  --text-compose: 1.4375rem;
  --s-half: 4px;
  --s-1: 8px;
  --s-control: 12px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --avatar-detail: 60px;
  --page-width: 600px;
  --radius-avatar: 8px;
  --radius-media: 16px;
  --radius-pill: 999px;
  --viewport-height: 100dvh;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); font-family: var(--font); }
body { margin: 0; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: var(--fg); background: transparent; border: 0; min-height: var(--s-6); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-weight: 600; }
button:hover { background: var(--hover); }
button:active { background: var(--surface); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
button:disabled, input:disabled, textarea:disabled, a:disabled, a[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
input, textarea { color: var(--fg); background: var(--bg); border: 0; border-radius: 0; }
input:hover, textarea:hover { background: var(--bg); }
input:active, textarea:active { color: var(--fg); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { color: var(--fg); }
svg { width: var(--s-3); height: var(--s-3); flex-shrink: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app { max-width: var(--page-width); margin: auto; background: var(--bg); }
.workbench-bar { display: flex; justify-content: space-between; gap: var(--s-1); align-items: center; min-height: var(--s-4); padding: var(--s-half) var(--s-control); font-size: var(--text-small); color: var(--secondary); background: var(--surface); flex-shrink: 0; }
#storage-error { margin: 0; padding: var(--s-1) var(--s-control); color: var(--danger); font-size: var(--text-small); line-height: 1.4; }
.error-text { color: var(--danger); }
.topbar { display: flex; position: relative; align-items: center; justify-content: space-between; min-height: var(--s-8); padding: var(--s-1); gap: var(--s-1); flex-shrink: 0; }
.top-title { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; font-size: var(--text-heading); pointer-events: none; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); font-weight: 400; white-space: nowrap; }
.primary { background: var(--primary); padding-inline: var(--s-2); }
.primary:hover { background: var(--primary-hover); }
.primary:active { background: var(--primary); }
.icon-button { width: var(--s-6); height: var(--s-6); min-width: var(--s-6); padding: var(--s-control); display: inline-flex; align-items: center; justify-content: center; }
.composer { height: var(--viewport-height); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
.compose-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-1) var(--s-1) var(--s-3); min-height: 0; }
.compose-post { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); column-gap: var(--s-1); position: relative; }
.avatar { width: var(--s-6); height: var(--s-6); padding: var(--s-1); background: var(--hover); border-radius: var(--radius-avatar); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.avatar img { width: 100%; height: 100%; display: block; }
.avatar-rail { position: relative; }
.compose-post.connected .avatar-rail::after { content: ''; position: absolute; width: 2px; background: var(--line); top: calc(var(--s-6) + var(--s-1)); bottom: var(--s-1); left: calc(var(--s-3) - 1px); }
.compose-content { min-width: 0; padding-bottom: var(--s-2); }
textarea { width: 100%; min-height: var(--s-8); resize: none; overflow: hidden; display: block; font-size: var(--text-compose); line-height: 1.35; padding: var(--s-1) 0; }
textarea::placeholder { color: var(--secondary); }
.post-details { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-4); gap: var(--s-half); }
.post-count { color: var(--secondary); font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.reorder { display: flex; }
.reorder .icon-button { color: var(--secondary); }
.compose-footer { flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom); background: var(--bg); }
.reply-permission { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2) var(--s-2); font-size: var(--text-body); color: var(--link); }
.reply-permission svg { width: var(--s-2); height: var(--s-2); }
.simulation-label { margin-left: auto; font-size: var(--text-small); color: var(--secondary); }
.compose-toolbar { display: flex; align-items: center; padding: var(--s-half) var(--s-1); border-top: 1px solid var(--line); color: var(--accent); }
.compose-toolbar .icon-button { color: var(--accent); }
.toolbar-spacer { flex: 1; }
.active-count { color: var(--secondary); font-size: var(--text-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter-ring { width: var(--s-4); height: var(--s-4); margin-inline: var(--s-1); transform: rotate(-90deg); overflow: visible; }
.counter-ring circle { fill: none; stroke-width: 2; }
.counter-ring .track { stroke: var(--line); }
#progress { stroke: var(--accent); stroke-dasharray: 0 100; }
#progress.warning { stroke: var(--warning); }
#progress.over { stroke: var(--danger); }
.over { color: var(--danger); }
.preview { min-height: 100dvh; padding-top: env(safe-area-inset-top); display: flex; flex-direction: column; }
.preview-posts { flex: 1; }
.preview-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); padding: 0 var(--s-1) var(--s-1); }
.segmented { display: flex; }
.segmented button { font-size: var(--text-small); color: var(--secondary); padding-inline: var(--s-control); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--fg); }
.preview-controls .text-button { font-size: var(--text-small); }
.preview-controls .text-button svg { width: var(--s-2); height: var(--s-2); }
.tweet { padding: var(--s-1); position: relative; }
.tweet-main { min-width: 0; }
.tweet.detail { display: grid; grid-template-columns: var(--avatar-detail) minmax(0, 1fr); column-gap: var(--s-1); }
.detail .avatar { width: var(--avatar-detail); height: var(--avatar-detail); padding: var(--s-1); }
.detail .tweet-main { display: contents; }
.identity { display: flex; align-items: center; justify-content: space-between; gap: var(--s-1); min-height: var(--s-6); }
.identity-names { min-width: 0; }
.identity strong { display: flex; align-items: center; gap: var(--s-half); font-size: var(--text-heading); }
.badge { color: var(--gold); width: var(--text-heading); height: var(--text-heading); }
.handle { display: block; color: var(--secondary); font-size: var(--text-body); margin-top: var(--s-half); }
.detail .handle { font-size: var(--text-heading); }
.x-label { align-self: flex-start; margin-top: var(--s-1); font-size: var(--text-heading); font-weight: 500; }
.detail .tweet-text, .detail .media-grid, .detail .tweet-meta, .detail .engagement, .detail .empty-post { grid-column: 1 / -1; }
.tweet-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-body); line-height: 1.4; }
.detail .tweet-text { font-size: var(--text-post); line-height: 1.32; margin-top: var(--s-4); }
.tweet-link { color: var(--link); }
.tweet-text a { display: inline-block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }
.tweet-meta { color: var(--secondary); font-size: var(--text-body); margin-top: var(--s-3); padding-bottom: var(--s-1); }
.engagement { display: flex; justify-content: space-between; align-items: center; color: var(--quiet); padding: var(--s-1) 0; }
.detail .engagement { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.tweet.compact { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); gap: var(--s-1); padding-block: var(--s-2); }
.compact .identity { align-items: flex-start; min-height: var(--s-3); margin-bottom: var(--s-half); }
.compact .identity-names { display: flex; align-items: center; gap: var(--s-half); flex-wrap: wrap; }
.compact .identity strong { font-size: var(--text-body); }
.compact .badge { width: var(--s-2); height: var(--s-2); }
.compact .handle { font-size: var(--text-small); margin: 0; }
.post-age { white-space: nowrap; }
.decorative-more { color: var(--quiet); }
.compact .tweet-avatar { position: relative; }
.compact.connected .tweet-avatar::after { content: ''; position: absolute; top: calc(var(--s-6) + var(--s-1)); bottom: calc(-1 * var(--s-3)); left: calc(var(--s-3) - 1px); width: 2px; background: var(--line); }
.compact .engagement svg { width: var(--text-heading); height: var(--text-heading); }
.empty-post { color: var(--secondary); font-size: var(--text-body); line-height: 1.5; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-media); gap: 2px; margin-top: var(--s-2); background: var(--line); }
.media-1 { grid-template-columns: 1fr; }
.media-item { position: relative; min-width: 0; }
.media-item img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.media-1 .media-item img { aspect-ratio: auto; max-height: 520px; object-fit: contain; background: var(--bg); }
.media-3 .media-item:first-child { grid-row: span 2; }
.media-3 .media-item:first-child img { aspect-ratio: auto; }
.media-item .icon-button { position: absolute; right: var(--s-half); top: var(--s-half); background: var(--bg); }
.preview-footer { padding: var(--s-1) var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.reply-placeholder { background: var(--surface); color: var(--secondary); padding: var(--s-control); border-radius: var(--radius-pill); font-size: var(--text-heading); }
.bottom-nav { display: flex; justify-content: space-around; padding: var(--s-2) 0; }
.preview-disclaimer { display: block; text-align: center; color: var(--secondary); font-size: var(--text-small); padding-block: var(--s-1); }
dialog { color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-media); padding: var(--s-2); width: calc(100% - var(--s-4)); max-width: var(--page-width); max-height: 85dvh; overflow-y: auto; }
dialog::backdrop { background: var(--surface); opacity: 0.8; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; }
.dialog-header h1 { font-size: var(--text-heading); margin: 0; }
.dialog-note { color: var(--secondary); font-size: var(--text-small); line-height: 1.5; margin-block: var(--s-2); }
.new-draft { display: flex; gap: var(--s-1); align-items: center; }
.draft-list { margin-block: var(--s-2); }
.draft-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.draft-open { text-align: left; flex: 1; min-width: 0; border-radius: var(--radius-avatar); padding: var(--s-2) var(--s-1); }
.draft-open strong { display: block; overflow-wrap: anywhere; line-height: 1.4; }
.draft-open span { display: block; color: var(--secondary); font-size: var(--text-small); font-weight: 400; margin-top: var(--s-1); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.dialog-actions button { background: var(--surface); border-radius: var(--radius-avatar); }
.dialog-actions button:hover { background: var(--hover); }
dialog label { display: block; margin-top: var(--s-2); color: var(--secondary); }
dialog input { display: block; background: var(--surface); width: 100%; padding: var(--s-2); margin-top: var(--s-1); border-radius: var(--radius-avatar); min-height: var(--s-6); }
#notice { position: fixed; bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - var(--s-4)); padding: var(--s-control) var(--s-2); border-radius: var(--radius-avatar); background: var(--fg); color: var(--bg); font-size: var(--text-small); line-height: 1.4; z-index: 10; pointer-events: none; }
dialog #notice { position: sticky; bottom: 0; left: auto; transform: none; width: auto; max-width: 100%; margin-top: var(--s-2); }
@media (min-width: 640px) {
  #app { border-inline: 1px solid var(--line); }
  .compose-scroll { padding-inline: var(--s-2); }
  .tweet { padding-inline: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }