:root {
  color-scheme: dark;
  --bg: #050506; --bg-deep: #09090a; --panel: #0d0d0f; --panel-2: #121214; --panel-3: #19191c;
  --pressed: #202024; --text: #f4f4f5; --muted: #a1a1a8; --muted-2: #85858d; --disabled: #45454a;
  --line: rgba(255,255,255,.07); --line-normal: rgba(255,255,255,.11); --line-strong: rgba(255,255,255,.18);
  --safe-top: 0px; --safe-bottom: 0px; --safe-left: 0px; --safe-right: 0px; --keyboard: 0px; --wave-a: #f4f4f5; --wave-b: #a1a1a8;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-control: 16px; --radius-media: 20px; --radius-sheet: 24px;
  --ease: cubic-bezier(.2,.75,.25,1); --motion: 180ms;
  font: 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: thin; scrollbar-color: var(--pressed) transparent; scrollbar-gutter: stable; overflow-y: scroll; }
body { min-width: 280px; min-height: 100dvh; margin: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button,input,textarea,select { font: inherit; }
button { appearance: none; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
button { transition: transform var(--motion) var(--ease),background-color var(--motion),color var(--motion); }
.button:active:not(:disabled),.secondary:active:not(:disabled),.icon-button:active:not(:disabled),.reaction:active:not(:disabled),.comment-button:active:not(:disabled),.bookmark-button:active:not(:disabled),.nav-compose:active:not(:disabled),.poll-choice:active:not(:disabled),.sticker-option:active:not(:disabled) { transform: scale(.96); }
button:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.text-action:focus-visible,.header-about:focus-visible,.feed-view-button:focus-visible,.profile-filter:focus-visible { outline: 0; text-decoration: underline; text-underline-offset: 5px; }
input:focus,textarea:focus,select:focus { outline: none; border-color: var(--muted-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
[hidden],dialog:not([open]) { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
h1,h2,h3,p { overflow-wrap: anywhere; }
h1,h2,h3 { line-height: 1.2; letter-spacing: -.035em; }
h2 { font-size: 24px; font-weight: 650; }
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.shell { width: min(100%,640px); margin: 0 auto; padding: calc(8px + max(env(safe-area-inset-top),var(--safe-top))) 16px calc(104px + max(env(safe-area-inset-bottom),var(--safe-bottom))); }
.app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.wordmark { font-size: 22px; font-weight: 750; letter-spacing: -.065em; }
.header-about { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-normal); background: rgba(255,255,255,.025); color: var(--muted); font-size: 12px; border-radius: 999px; }
.gate { min-height: 60dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gate .wordmark { margin-bottom: 24px; }
.gate h1 { margin: 0; font-size: 24px; font-weight: 650; }
.gate p { margin: 8px 0 24px; color: var(--muted); font-size: 13px; }
#workspace { min-width: 0; padding-left: max(env(safe-area-inset-left),var(--safe-left)); padding-right: max(env(safe-area-inset-right),var(--safe-right)); }
.feed-view-switch { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%,290px); gap: 18px; margin: 0 auto 25px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.feed-view-button { position: relative; min-width: 0; min-height: 46px; padding: 9px 4px 13px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 240ms var(--ease); }
.feed-view-button::after { content: ''; position: absolute; bottom: 3px; left: 20%; width: 60%; height: 2px; border-radius: 999px; background: var(--text); opacity: 0; transform: scaleX(.45); transition: opacity 240ms var(--ease), transform 280ms var(--ease); }
.feed-view-button.selected { background: transparent; border-color: transparent; color: var(--text); box-shadow: none; }
.feed-view-button.selected::after { opacity: 1; transform: scaleX(1); }
.profile-filter { position: relative; min-width: 0; min-height: 46px; padding: 9px 4px 13px; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.profile-filter::after { content: ''; position: absolute; bottom: 3px; left: 20%; width: 60%; height: 2px; border-radius: 999px; background: var(--text); opacity: 0; transform: scaleX(.45); transition: opacity 240ms var(--ease), transform 280ms var(--ease); }
.profile-filter.selected { background: transparent; border-color: transparent; color: var(--text); box-shadow: none; }
.profile-filter.selected::after { opacity: 1; transform: scaleX(1); }
#feed-list { display: grid; gap: 28px; }
.post { min-width: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); animation: appear 220ms var(--ease); }
.post:last-child { border-bottom: 0; }
.post-top { display: flex; min-width: 0; align-items: center; gap: 10px; margin-bottom: 12px; }
.post-avatar,.comment-avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: var(--panel-3); border-radius: 12px; color: var(--muted); }
.post-avatar .ui-icon { width: 18px; height: 18px; }
.post-owner { font-size: 13px; font-weight: 600; color: var(--muted); } .post-owner.mine { color: var(--text); }
.post-time { margin-left: auto; color: var(--muted-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.post-image { display: block; width: 100%; max-height: 640px; object-fit: contain; border-radius: var(--radius-media); background: var(--bg-deep); cursor: zoom-in; }
.post-body { margin: 16px 0 0; font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.post:not(.has-visual) .post-body { font-size: 20px; line-height: 1.5; letter-spacing: -.015em; margin-top: 8px; }
.post-media:empty { display: none; }
.photo-state { width: 100%; min-height: 260px; border: 0; border-radius: var(--radius-media); background: var(--panel); color: var(--muted); position: relative; overflow: hidden; }
.photo-state .photo-retry-icon { display: none; }
.photo-state[data-state="error"] .photo-retry-icon { display: inline-block; }
.photo-state[data-state="loading"]::before,.skeleton-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg,transparent,rgba(255,255,255,.025),transparent); animation: shimmer 1.6s ease-in-out infinite; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.post-reactions,.post-utilities { display: flex; gap: 8px; align-items: center; }
.reaction,.comment-button,.bookmark-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 40px; padding: 8px 12px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; }
.reaction.selected { background: var(--panel-3); color: var(--text); border-color: transparent; border-radius: 999px; }
.reaction .ui-icon { width: 18px; height: 18px; }
.reaction-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.reaction.selected .ui-icon { animation: react 220ms var(--ease); }
.bookmark-button[aria-pressed="true"] { color: var(--text); }
.post-utilities .action-label { display: none; }
.comment-button,.bookmark-button { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.comment-button .ui-icon,.bookmark-button .ui-icon { width: 22px; height: 22px; }
.post-menu { display: flex; gap: 16px; margin-top: 4px; }
.post-menu:empty { display: none; }
.text-action { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.text-action.danger { color: var(--muted); }
.poll { display: grid; gap: 8px; margin-top: 16px; }
.poll:empty { display: none; }
.poll-choice { text-align: left; padding: 12px 16px; }
.poll-choice.selected { border-color: var(--line-strong); background: var(--pressed); color: var(--text); }
.poll-total { margin: 0; font-size: 12px; color: var(--muted); }
.button,.secondary,.load-more,.poll-choice { min-height: 44px; border: 1px solid var(--line-normal); border-radius: var(--radius-control); font-size: 14px; font-weight: 500; }
.button { padding: 12px 20px; background: var(--text); color: var(--bg); }
.secondary,.load-more,.poll-choice { color: var(--text); background: var(--panel-2); }
.secondary { padding: 10px 16px; }
.load-more { width: 100%; margin-top: 24px; }
.icon-button { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--panel-3); color: var(--muted); }
.close-button { background: rgba(17,17,20,.92); border: 1px solid rgba(255,255,255,.09); color: var(--text); box-shadow: 0 10px 26px rgba(0,0,0,.28); backdrop-filter: blur(14px); }
.bottom-nav { position: fixed; z-index: 50; left: 50%; bottom: calc(10px + max(env(safe-area-inset-bottom),var(--safe-bottom))); transform: translateX(-50%); width: min(calc(100% - 24px),460px); height: 70px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; gap: 2px; padding: 6px; border: 1px solid var(--line-normal); border-radius: 22px; background: rgba(14,14,16,.96); box-shadow: 0 12px 36px rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.nav-item { border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; min-width: 0; padding: 4px 0; border: 1px solid transparent; background: transparent; color: var(--muted-2); font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; }
.nav-item .ui-icon { width: 22px; height: 22px; transition: transform var(--motion); }
.nav-item.selected { color: var(--text); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.035); }
.nav-item.selected .ui-icon { transform: none; }
.nav-compose { justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 17px; background: var(--text); color: var(--bg); }
.nav-compose:active { transform: scale(.985); }
body:has(dialog[open]) { overflow: hidden; }
body:has(dialog[open]) .bottom-nav,body.keyboard-open .bottom-nav { visibility: hidden; }
dialog { max-width: none; min-width: 0; overflow-x: hidden; overflow-y: auto; position: fixed; width: min(calc(100% - 32px),560px); max-height: calc(var(--viewport-height,100dvh) - 32px - var(--safe-top)); margin: auto; padding: 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line-normal); border-radius: var(--radius-sheet); overscroll-behavior: contain; }
dialog[open] { animation: sheet-in 220ms var(--ease); }
dialog::backdrop { background: rgba(0,0,0,.78); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; margin-bottom: 16px; }
.sheet-head h2 { margin: 0; font-size: 21px; }
.sheet-head h2:focus { outline: none; }
textarea,input,select { min-width: 0; border: 1px solid var(--line-normal); border-radius: 12px; background: var(--panel-2); color: var(--text); }
textarea::placeholder,input::placeholder { color: var(--muted-2); }
textarea { width: 100%; padding: 16px; }
#post-body, #poll-options { resize: none; }
.composer-field { position: relative; }
#post-body { border: 0; background: transparent; padding: 0 0 24px; font-size: 16px; line-height: 1.5; min-height: 88px; max-height: 210px; }
#post-count { display: block; color: var(--muted-2); font-size: 11px; text-align: right; }
.editor-tools { margin: 8px 0; }
.composer-input-footer { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.composer-stickers { background: transparent; border-radius: 50%; }
.tool-cluster { display: flex; align-items: center; gap: 8px; }
.tool-button { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 12px; }
.photo-preview { position: relative; display: grid; place-items: center; height: clamp(190px,36dvh,340px); margin-top: 16px; overflow: hidden; border-radius: 20px; background: var(--bg-deep); }
.photo-preview + .composer-field { margin-top: 16px; }
.photo-preview img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 20px; background: transparent; }
.remove-photo { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; box-shadow: none; backdrop-filter: none; }
.remove-photo .ui-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000); }
.photo-adjust { margin: 16px 0 8px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.photo-adjust summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text); min-height: 52px; padding: 8px 2px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.photo-adjust summary::-webkit-details-marker { display: none; }
.photo-adjust summary::after { content: ''; width: 8px; height: 8px; margin-right: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--motion) var(--ease); }
.photo-adjust[open] summary::after { transform: rotate(225deg); }
.photo-adjust-controls { display: grid; gap: 16px; padding: 0 2px 16px; }
.photo-adjust-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.photo-adjust-actions .secondary,.photo-adjust-actions .text-action { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 0; background: var(--panel-3); color: var(--text); font-size: 12px; text-align: center; }
.photo-adjust-actions .text-action { margin-left: auto; padding-inline: 6px; background: transparent; color: var(--muted); }
.photo-adjust-actions #photo-crop[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.photo-adjust label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 13px; color: var(--muted); }
.photo-adjust label span { color: var(--text); font-weight: 400; }
.photo-adjust output { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.photo-adjust input[type="range"] { grid-column: 1 / -1; -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; cursor: pointer; }
.photo-adjust input[type="range"]:focus-visible { outline: 1px solid var(--muted); outline-offset: 2px; border-radius: 8px; }
.photo-adjust input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: var(--disabled); }
.photo-adjust input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border: 0; border-radius: 50%; background: var(--text); }
.photo-adjust input[type="range"]::-moz-range-track { height: 3px; border: 0; border-radius: 99px; background: var(--disabled); }
.photo-adjust input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--text); }
.publish-row { display: flex; justify-content: flex-end; margin-top: 12px; padding-bottom: max(env(safe-area-inset-bottom),var(--safe-bottom)); }
.publish-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.voice-source { margin: 16px 0; padding: 16px; background: var(--panel-2); border-radius: 16px; }
.voice-source-head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.voice-source-copy { display: grid; }
.voice-source-copy strong { font-size: 14px; font-weight: 600; }
.voice-source-copy span { color: var(--muted); font-size: 12px; }
.media-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.voice-source-action { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; }
.voice-source-action strong { font-weight: 500; font-size: 13px; }
#recording-panel,#media-preview-wrap,#poll-editor { margin-top: 16px; }
#voice-wave { display: block; width: 100%; height: 96px; }
.recording-footer,.media-preview-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#record-time { font-variant-numeric: tabular-nums; margin-right: auto; font-size: 14px; }
#record-time::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text); margin-right: 8px; }
.media-preview-head { justify-content: space-between; }
#media-label { font-size: 14px; }
.audio-host { width: 100%; }
.audio-player { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 16px; padding: 16px; border-radius: 18px; background: var(--panel-2); }
.audio-play { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--text); color: var(--bg); }
.audio-center { position: relative; min-width: 0; }
.audio-wave { height: 36px; display: flex; gap: 3px; align-items: center; }
.audio-wave i { flex: 1; height: var(--h,20%); border-radius: 2px; background: var(--disabled); }
.audio-wave i.played { background: var(--text); }
.audio-range { position: absolute; top: 0; width: 100%; height: 36px; opacity: 0; cursor: pointer; margin: 0; }
.audio-range:focus-visible { opacity: 1; accent-color: var(--text); }
.audio-times { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
#poll-editor label { font-size: 14px; }
#poll-editor p { font-size: 12px; color: var(--muted); }
.sticker-panel,.comment-sticker-panel { margin-top: 16px; padding: 12px; border-radius: 16px; background: var(--panel-2); }
.sticker-panel-head,.comment-sticker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.comment-sticker-head > div { display: grid; }
.comment-sticker-head span { font-size: 11px; }
.sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 32dvh; overflow-y: auto; overscroll-behavior: contain; }
.sticker-option { display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; min-width: 0; padding: 8px; aspect-ratio: 1; }
.sticker-image { width: 100%; height: 100%; object-fit: contain; }
.post-media .sticker-image { display: block; width: 200px; height: 200px; margin: 16px auto; }
.sticker-selected .sticker-image { width: 128px; height: 128px; }
.comments-sheet[open] { display: flex; flex-direction: column; height: min(760px,calc(var(--viewport-height,100dvh) - 32px - var(--safe-top))); overflow: hidden; }
.comments-sheet .sheet-head { flex-shrink: 0; margin-bottom: 12px; }
.comments-heading { display: flex; align-items: baseline; gap: 12px; }
.comments-count-badge { color: var(--muted); font-size: 13px; }
#comments-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.comments-state { color: var(--muted); font-size: 13px; }
.comments-state:empty { display: none; }
.comments-state:not(:empty) { margin: auto; padding: 32px 0; }
.comment { position: relative; padding: 14px 0; }
.comment-avatar { position: absolute; left: 0; top: 16px; width: 28px; height: 28px; border-radius: 10px; }
.comment-avatar .ui-icon { width: 16px; height: 16px; }
.comment-meta { display: flex; gap: 12px; align-items: baseline; }
.comment-author { font-size: 13px; font-weight: 600; }
.comment-time { margin-left: auto; color: var(--muted-2); font-size: 11px; }
.comment-body-text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.reply-quote { margin: 8px 0; padding: 4px 12px; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.comment-reaction-trigger { display: flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--muted); min-height: 44px; padding: 0; font-size: 12px; }
.comment-reaction-trigger .ui-icon { width: 16px; height: 16px; }
.comment-sticker .sticker-image { width: 100px; height: 100px; }
.comment-composer { flex-shrink: 0; padding-top: 12px; background: var(--panel); }
.comment-form { display: grid; grid-template-columns: minmax(0,1fr) 44px 44px; align-items: end; gap: 4px; }
.comment-form textarea { resize: none; min-height: 44px; max-height: 112px; padding: 10px 12px; font-size: 16px; }
.send-button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.reply-bar { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.reply-bar .icon-button { margin-left: auto; }
.comment-sticker-preview { display: flex; align-items: center; gap: 12px; }
.comment-sticker-preview .sticker-image { width: 56px; height: 56px; }
.search-box { position: relative; }
.search-box input { width: 100%; min-height: 48px; padding: 12px 12px 12px 44px; font-size: 16px; }
.search-glyph { position: absolute; left: 14px; top: 14px; color: var(--muted); }
.search-state { color: var(--muted); font-size: 12px; margin: 14px 0 6px; }
.search-state:empty { display: none; }
.search-results { display: grid; gap: 8px; }
.search-result { appearance: none; display: grid; gap: 12px; width: 100%; text-align: left; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); background: transparent; box-shadow: none; transform: none; }
.search-result:hover,.search-result:active { background: transparent !important; box-shadow: none; transform: none; }
.search-result:focus-visible { outline: 0; background: transparent !important; box-shadow: inset 2px 0 var(--text); padding-left: 12px; }
.search-result-text { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.search-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); }
.search-result-owner { font-weight: 600; color: var(--text); }
.search-result-time { margin-left: auto; white-space: nowrap; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.profile-controls { padding: 0 0 20px; }
.profile-identity { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 12px; min-width: 0; padding: 0; margin: 4px 0 16px; border: 0; background: transparent; }
.profile-avatar { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--line-strong); border-radius: 26px; background: var(--panel-2); }
.profile-identity h1 { min-width: 0; margin: 0; font-size: clamp(18px,5vw,22px); line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
.profile-identity p { font-size: 13px; color: var(--muted); margin: 0; }
.profile-controls-head { display: flex; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.profile-controls-head strong { font-size: 14px; font-weight: 500; }
.profile-controls-head span { font-size: 12px; color: var(--muted); margin-left: 12px; }
.profile-filter-row { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; }
.profile-filter { min-width: 0; padding-inline: 2px; border-radius: 0; font-size: 12px; }
.about-link { display: block; border: 0; background: transparent; color: var(--muted); font-size: 12px; margin: 32px auto 0; padding: 12px; }
.error { padding: 12px 16px; border-left: 2px solid var(--text); background: var(--panel-3); border-radius: 4px 12px 12px 4px; color: var(--text); font-size: 13px; margin-block: 12px; }
.empty { min-height: 36dvh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 36px 16px; }
.empty h2 { margin: 0 0 4px; font-size: 17px; font-weight: 550; color: var(--muted); }
.empty p { margin: 0; color: var(--muted); font-size: 13px; }
.loading { color: var(--muted); font-size: 13px; }
.skeleton-post { margin-bottom: 32px; }
.skeleton-line { height: 12px; width: 45%; background: var(--panel-3); border-radius: 4px; margin: 16px 0; }
.skeleton-media { position: relative; overflow: hidden; height: 320px; background: var(--panel); border-radius: var(--radius-media); }
.confirm-actions,.report-options { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm-actions { justify-content: flex-end; }
#about-dialog p,#report-dialog p,#confirm-dialog p { font-size: 14px; color: var(--muted); }
.pull-refresh { position: fixed; z-index: 80; left: 50%; top: max(12px,var(--safe-top)); display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line-normal); border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 12px; opacity: 0; transform: translate(-50%,-130%); pointer-events: none; transition: transform 180ms,opacity 180ms; }
.pull-refresh.visible { opacity: 1; transform: translate(-50%,0); }
.pull-spinner { width: 12px; height: 12px; border: 1px solid var(--line-strong); border-top-color: var(--text); border-radius: 50%; }
.pull-refresh.refreshing .pull-spinner { animation: spin .8s linear infinite; }
.toast { position: fixed; bottom: calc(96px + var(--safe-bottom)); left: 50%; z-index: 90; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid var(--line-normal); border-radius: 12px; background: var(--panel-3); font-size: 13px; }
#media-viewer { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #050506; overflow: hidden; }
.viewer-stage { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; touch-action: none; }
#viewer-image { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer-controls { position: absolute; inset: calc(12px + max(env(safe-area-inset-top),var(--safe-top))) 16px auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: opacity 180ms; }
.viewer-controls .icon-button { background: rgba(18,18,20,.88); color: var(--text); }
.viewer-controls-hidden .viewer-controls { opacity: 0; pointer-events: none; }
.viewer-controls-hidden .viewer-controls:focus-within { opacity: 1; pointer-events: auto; }
#viewer-position { margin-right: auto; padding: 8px; font-size: 12px; }
.viewer-bottom { top: auto; bottom: calc(16px + max(env(safe-area-inset-bottom),var(--safe-bottom))); justify-content: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes appear { from { opacity: .4; } to { opacity: 1; } }
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes react { 50% { transform: scale(1.15); } }
@media (hover:hover) { .button:hover:not(:disabled),.nav-compose:hover:not(:disabled) { background: #d8d8dc; color: var(--bg); } .secondary:hover:not(:disabled),.load-more:hover:not(:disabled),.poll-choice:hover:not(:disabled),.icon-button:hover:not(:disabled) { background: var(--pressed); color: var(--text); } .text-action:hover:not(:disabled),.header-about:hover:not(:disabled),.reaction:hover:not(:disabled),.comment-button:hover:not(:disabled),.bookmark-button:hover:not(:disabled),.search-result:hover:not(:disabled),.tool-button:hover:not(:disabled),.sticker-option:hover:not(:disabled) { background: transparent; color: var(--text); } .reaction.selected:hover:not(:disabled) { background: var(--panel-3); } }
@media (max-width:600px) { dialog:not(#media-viewer) { inset: auto 0 max(0px,var(--keyboard)); width: 100%; max-height: calc(var(--viewport-height,100dvh) - 16px - var(--safe-top)); margin: 0; border-radius: 24px 24px 0 0; padding: 20px 16px max(16px,env(safe-area-inset-bottom),var(--safe-bottom)); } .comments-sheet[open] { height: calc(var(--viewport-height,100dvh) - 16px - var(--safe-top)); } }
@media (max-width:360px) { .post-actions { gap: 4px; } .reaction { min-width: 34px; padding: 6px; } .post-reactions { gap: 0; } .bottom-nav { width: calc(100% - 24px); } .nav-item { font-size: 9px; } .comment { padding-left: 0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.icon-home{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2010.5%2012%203l8.5%207.5%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5V21h13V9.5%22%2F%3E%3Cpath%20d%3D%22M9.5%2021v-6h5v6%22%2F%3E%3C%2Fsvg%3E");}
.icon-search{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2210.8%22%20r%3D%226.4%22%2F%3E%3Cpath%20d%3D%22m15.7%2015.7%204.4%204.4%22%2F%3E%3C%2Fsvg%3E");}
.icon-bookmark{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203.5h11v17L12%2017l-5.5%203.5z%22%2F%3E%3C%2Fsvg%3E");}
.icon-bookmark-fill{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M6.5%203.25h11a1%201%200%200%201%201%201v16.9a.75.75%200%200%201-1.15.64L12%2018.45l-5.35%203.34a.75.75%200%200%201-1.15-.64V4.25a1%201%200%200%201%201-1Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-user{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4.8%2020.5c.8-4%203.2-6%207.2-6s6.4%202%207.2%206%22%2F%3E%3C%2Fsvg%3E");}
.icon-plus{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E");}
.icon-x{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22m6.5%206.5%2011%2011M17.5%206.5l-11%2011%22%2F%3E%3C%2Fsvg%3E");}
.icon-photo{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%224.5%22%20width%3D%2217%22%20height%3D%2215%22%20rx%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m5.5%2017%204.5-4%203%202.5%202.5-2%203%203%22%2F%3E%3C%2Fsvg%3E");}
.icon-file{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203.5h6.8L19%208.7V20.5H7z%22%2F%3E%3Cpath%20d%3D%22M13.5%203.5V9H19%22%2F%3E%3C%2Fsvg%3E");}
.icon-mic{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%228.5%22%20y%3D%223%22%20width%3D%227%22%20height%3D%2212%22%20rx%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5.5%2011.5a6.5%206.5%200%200%200%2013%200M12%2018v3M8.5%2021h7%22%2F%3E%3C%2Fsvg%3E");}
.icon-poll{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M5%2020V13M12%2020V8M19%2020V4%22%2F%3E%3C%2Fsvg%3E");}
.icon-smile{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%2F%3E%3Cpath%20d%3D%22M8.8%2014.2c.8%201.2%201.9%201.8%203.2%201.8s2.4-.6%203.2-1.8%22%2F%3E%3Cpath%20d%3D%22M9%209.5h.01M15%209.5h.01%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E");}
.icon-send{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2011.7%2020%204.5l-5.8%2015-3.2-6.2z%22%2F%3E%3Cpath%20d%3D%22m11%2013.3%203.2-3.1%22%2F%3E%3C%2Fsvg%3E");}
.icon-message{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.5%208.5%200%200%201-8.5%208.5H4l1.5-4A8.5%208.5%200%201%201%2021%2011.5Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-play{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M8%205.8a1%201%200%200%201%201.55-.83l9%206.2a1%201%200%200%201%200%201.66l-9%206.2A1%201%200%200%201%208%2018.2Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-pause{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20fill%3D%22black%22%20x%3D%227%22%20y%3D%225%22%20width%3D%223.5%22%20height%3D%2214%22%20rx%3D%221.3%22%2F%3E%3Crect%20fill%3D%22black%22%20x%3D%2213.5%22%20y%3D%225%22%20width%3D%223.5%22%20height%3D%2214%22%20rx%3D%221.3%22%2F%3E%3C%2Fsvg%3E");}
.icon-refresh{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2011a8%208%200%201%200-2.35%205.65%22%2F%3E%3Cpath%20d%3D%22M20%205v6h-6%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-heart{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%205c-3-3-7-1-8%201-1-2-5-4-8-1s-1%207%208%2014c9-7%2011-11%208-14Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-fire{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202c1%207-6%206-5%2012-2-1-2-3-2-3-5%207%200%2011%206%2011%208%200%2011-9%201-20Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-laugh{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m6%209%202-2%202%202m4%200%202-2%202%202M7%2013h10c0%206-10%206-10%200Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-wow{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8%208v2m8-2v2%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2216%22%20rx%3D%222%22%20ry%3D%223%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-purple{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%203%207%207%203-7%203-3%207-3-7-7-3%207-3Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-sad{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M8%209v1m8-1v1m-8%207q4-5%208%200%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-clap{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2020-5-8q-1-3%202-2l3%203-2-8q0-3%202-1l3%208-1-9q1-2%202%200l2%209%201-7q2-2%202%201l-1%208q5-5%204-1l-4%207Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-star{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%202%203%206%207%201-5%205%201%208-6-4-6%204%201-8-5-5%207-1Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-skull{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021v-4C0%2016%202%203%2012%203s12%2013%204%2014v4Zm4-4v4%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2211%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-angry{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m6%208%204%202m8-2-4%202m-6%207q4-5%208%200%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-dislike{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%203v11h4V3Zm-3%200H5L2%2012q0%202%203%202h4l-1%206q3%204%205-4l1-2Z%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-eyes{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cellipse%20cx%3D%227%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%228%22%2F%3E%3Cellipse%20cx%3D%2217%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%228%22%2F%3E%3Cpath%20d%3D%22M8%2010v4m10-4v4%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-cool{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M3%209h18M5%209v4h5V9m4%200v4h5V9m-11%208q4%203%208%200%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-broken{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%205C4-2-6%209%2010%2020m4%200C30%209%2020-2%2014%205l-3%205%204%203-3%204%22%2F%3E%3C%2Fsvg%3E");}

html[data-input="pointer"] button:focus-visible { outline: none; }
@media (hover:hover) { .feed-view-button:hover:not(:disabled), .profile-filter:hover:not(:disabled), .nav-item:hover:not(:disabled) { background: transparent; color: var(--text); } }
.icon-reaction-like{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2010H3v11h4Zm3%2011h9l3-9q0-2-3-2h-4l1-6q-3-4-5%204l-1%202Z%22%2F%3E%3C%2Fsvg%3E");}

/* Sheets share one bounded viewport; only their content scrolls. */
#compose-dialog[open] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#compose-dialog > .sheet-head { flex: 0 0 auto; margin: 0; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.compose-scroll { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 20px; overscroll-behavior: contain; scroll-padding-block: 16px; }
#compose-dialog > .publish-row { flex: 0 0 auto; margin: 0; padding: 12px 20px max(16px,env(safe-area-inset-bottom),var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
#post-body { display: block; min-height: 112px; padding-bottom: 12px; box-shadow: none; }
#poll-editor { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); }
#poll-editor label { display: block; margin-bottom: 8px; color: var(--text); }
#poll-options { display: block; min-height: 112px; padding: 12px; background: var(--bg); }
#poll-editor p { margin: 8px 0; line-height: 1.5; }
.sheet-head h2 { font-size: 20px; letter-spacing: -.025em; }
.sheet-head .close-button { flex-shrink: 0; border-radius: 50%; }
.recording-footer { flex-wrap: wrap; gap: 8px; }
.profile-identity { display: flex; align-items: center; gap: 12px; }
.profile-identity h1 { font-size: clamp(18px,5vw,22px); margin: 0; }
.empty { min-height: 36dvh; }
.sticker-grid { grid-template-columns: repeat(2,minmax(0,112px)); justify-content: start; }
.nav-item { padding: 4px 0; font-size: 10px; white-space: nowrap; }
@media (max-width: 600px) {
  dialog:not(#media-viewer) { max-width: 100%; left: 0; right: 0; box-sizing: border-box; }
  #compose-dialog { max-height: calc(var(--viewport-height,100dvh) - 12px - max(env(safe-area-inset-top),var(--safe-top))); }
  .shell { padding-left: 16px; padding-right: 16px; }
}
@media (max-height: 480px) {
  #compose-dialog > .sheet-head { padding-block: 6px; }
  .compose-scroll { padding-block: 12px; }
  #compose-dialog > .publish-row { padding-block: 8px; }
}

.comment { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment:last-child { border-bottom: 0; }
.comment-meta { flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.comment-author { font-size: 13px; font-weight: 600; }
.comment-time { margin-left: auto; font-size: 11px; white-space: nowrap; }
.comment-body-text { margin: 6px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.comment-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-height: 42px; margin-top: 4px; }
.comment-actions .reply-action { margin-right: 6px; }
.comment-actions .danger { flex-basis: auto; margin-right: auto; font-size: 12px; text-align: left; }
.comment-actions .reply-action:first-child:nth-last-child(3) { margin-right: auto; }
.comment-actions .reaction { min-width: 38px; width: auto; height: 38px; min-height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.comment-actions .reaction.selected { background: var(--text); color: var(--bg); border-color: var(--text); }
.comment-actions .reaction .ui-icon { width: 18px; height: 18px; }
.comment-composer { border-top: 1px solid var(--line); padding-top: 16px; }
.comment-form { grid-template-columns: minmax(0,1fr) 44px; gap: 8px; align-items: end; }
.comment-form textarea { min-height: 44px; height: 44px; line-height: 22px; padding: 10px 12px; }
.comment-form .icon-button,.comment-form .send-button { border-radius: 50%; }
.text-action:hover,.text-action:active,.text-action:focus { background: transparent !important; box-shadow: none; transform: none; }
.post-menu .text-action { padding-inline: 0; border-radius: 0; }
#sticker-open,#comment-sticker-open,#sticker-panel,#comment-sticker-panel { display: none !important; }
.feed-sentinel { height: 1px; margin: 0; }
.poll-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
#poll-editor .poll-editor-head label { margin: 0; }
#pause-preview-host { margin: 12px 0; }
.audio-player { gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }
.audio-play { border-radius: 50%; }
.audio-wave { opacity: .85; }
.reaction .ui-icon { transition: color .15s ease, transform .15s ease; }
.reaction.selected .ui-icon { animation: none; transform: translateY(-1px); }
.icon-reaction-like{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2010v11H4V10h4Zm0%200%204-7c.5-.9%202-.4%202%201v6h5a2%202%200%200%201%202%202l-2%207a2%202%200%200%201-2%202H8%22%2F%3E%3C%2Fsvg%3E");}
.icon-reaction-dislike{--icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20transform%3D%22rotate%28180%2012%2012%29%22%20d%3D%22M8%2010v11H4V10h4Zm0%200%204-7c.5-.9%202-.4%202%201v6h5a2%202%200%200%201%202%202l-2%207a2%202%200%200%201-2%202H8%22%2F%3E%3C%2Fsvg%3E");}

.gate { gap: 0; }
.gate h1 { font-size: 22px; letter-spacing: -.025em; }
.post-actions { flex-wrap: nowrap; gap: 12px; margin-top: 18px; }
.post-reactions,.post-utilities { min-height: 44px; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.post-reactions { flex: 0 0 auto; }
.post-utilities { margin-left: auto; }
.post-actions .reaction,.post-actions .comment-button,.post-actions .bookmark-button { min-width: 42px; width: auto; height: 38px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); }
.post-actions .reaction + .reaction { position: relative; }
.post-actions .reaction + .reaction::before { content: ''; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 1px; background: var(--line-normal); }
.post-actions .reaction.selected { background: var(--text); color: var(--bg); }
.post-actions .reaction.selected + .reaction::before,.post-actions .reaction + .reaction.selected::before { opacity: 0; }
.post-actions .reaction .ui-icon { width: 19px; height: 19px; }
.post-actions .reaction-count,.post-actions .action-count { min-width: 8px; font-size: 11px; line-height: 1; }
.post-actions .comment-button .ui-icon,.post-actions .bookmark-button .ui-icon { width: 20px; height: 20px; }
.about-intro { padding: 4px 0 18px; }
.about-intro p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--text); }
.about-section { padding: 17px 0; border-top: 1px solid var(--line); }
.about-section h3 { margin: 0 0 7px; font-size: 14px; letter-spacing: -.01em; }
.about-section p { margin: 0; max-width: 56ch; font-size: 13px; line-height: 1.65; color: var(--muted); }
.header-about { border: 0; background: transparent; padding-inline: 6px; }
.report-options { display: grid; gap: 0; }
.report-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; color: var(--text); }
.report-option:last-child { border-bottom: 0; }
.report-arrow { color: var(--muted-2); font-size: 22px; line-height: 1; }
.report-option:focus-visible { outline-offset: -2px; border-radius: 10px; }
.audio-host,.audio-player,.audio-center { min-width: 0; }
.audio-player { min-height: 88px; }
.audio-times { min-height: 17px; }
.audio-wave i { min-width: 0; }
.audio-play .ui-icon { vertical-align: middle; }
@media (hover:hover) {
  .photo-adjust-actions #photo-crop[aria-pressed="true"]:hover:not(:disabled) { background: #dedee1; color: var(--bg); }
  .post-actions .reaction.selected:hover:not(:disabled),.comment-actions .reaction.selected:hover:not(:disabled) { background: #dedee1; color: var(--bg); }
  .report-option:hover:not(:disabled) { color: var(--muted); }
}
@media (prefers-reduced-motion:reduce) {
  .profile-filter::after,.feed-view-button::after { transition: none; }
}
@media (max-width: 360px) {
  .comment { padding-left: 0; }
  .post-actions { gap: 6px; }
  .post-reactions,.post-utilities { gap: 0; padding: 2px; }
  .post-actions .reaction,.post-actions .comment-button,.post-actions .bookmark-button { min-width: 38px; padding-inline: 8px; }
  .comment-actions .reaction { min-width: 36px; padding-inline: 7px; }
}

#search-dialog.search-sheet {
  position: fixed;
  inset: auto;
  top: var(--search-center-y, 50%);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(460px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: min(70dvh, calc(var(--viewport-height, 100dvh) - 32px));
  padding: 22px;
  border-radius: 24px;
  overflow: hidden;
}
#search-dialog.search-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: search-dialog-in 220ms var(--ease) both;
}
#search-dialog.search-sheet .sheet-head {
  flex: 0 0 auto;
  margin-bottom: 18px;
}
#search-dialog.search-sheet .search-box,
#search-dialog.search-sheet .search-state {
  flex: 0 0 auto;
}
#search-dialog.search-sheet .search-results {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes search-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@media (max-width: 600px) {
  #search-dialog.search-sheet {
    inset: auto;
    top: var(--search-center-y, 50%);
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100% - 32px);
    max-width: 460px;
    max-height: calc(var(--viewport-height, 100dvh) - 32px);
    margin: 0;
    padding: 20px;
    border-radius: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #search-dialog.search-sheet[open] { animation: none; }
}

@media (max-width: 480px) {
  .photo-adjust-actions { gap: 4px; }
  .photo-adjust-actions .secondary { padding-inline: 8px; }
}