@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

@font-face {
  font-family: "Bitcount Grid Double";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/bitcount-grid-double-400.ttf") format("truetype");
}

:root {
  color-scheme: light dark;
  --background: Canvas;
  --text: CanvasText;
  --muted: GrayText;
  --line: color-mix(in srgb, CanvasText 24%, Canvas);
  --focus: CanvasText;
  --control-height: 2.75rem;
  --control-padding-inline: 0.875rem;
  --field-padding-block: 0.75rem;
  --form-gap: 0.75rem;
  --section-gap: 2rem;
  --switch-width: 3rem;
  --switch-height: 1.75rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; background: var(--background); color: var(--text); }

body { min-height: 100vh; }

a { color: inherit; text-underline-offset: 0.2em; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
button, .control-button { appearance: none; display: inline-grid; place-items: center; min-height: var(--control-height); border: 1px solid var(--text); border-radius: 0; padding-inline: var(--control-padding-inline); background: var(--background); color: var(--text); font: inherit; cursor: pointer; text-decoration: none; }
button:disabled, .control-button:disabled { cursor: not-allowed; opacity: 0.5; }
form label:not(.control-button):not(.checkbox-field):not(.switch-row) { display: grid; gap: var(--form-gap); }
input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]), textarea, select { display: block; width: 100%; min-height: var(--control-height); border: 1px solid var(--text); border-radius: 0; padding: var(--field-padding-block) var(--control-padding-inline); background: var(--background); color: var(--text); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]), select { height: var(--control-height); }
select { -webkit-appearance: none; appearance: none; padding-inline-end: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - 0.75rem) 50%; background-size: 0.25rem 0.25rem; background-repeat: no-repeat; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
textarea { min-height: 8rem; resize: vertical; }

.poster { display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 2rem); }

.public-header, .public-footer { display: flex; align-items: center; gap: 1.25rem; }

.public-header a:last-child, .public-footer span { margin-inline-start: auto; }

.wordmark { font-family: "Bitcount Grid Double", fantasy; font-size: 1.5rem; text-decoration: none; }

.poster-main { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem; max-width: 72rem; }

.poster-main h1 { margin: 0; max-width: 14ch; font: 700 clamp(3.5rem, 11vw, 9rem)/0.9 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: -0.08em; }

.poster-main p { margin: 0; max-width: 42rem; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.5; }

.primary-link { display: inline-flex; align-items: center; min-height: var(--control-height); border: 1px solid var(--text); padding-inline: var(--control-padding-inline); text-decoration: none; }

.public-footer { border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.8rem; }

@media (max-width: 42rem) {
  .poster-main h1 { font-size: clamp(2.8rem, 14vw, 5rem); letter-spacing: -0.06em; }
  .public-footer { align-items: flex-start; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

.auth-shell { width: min(100% - 2rem, 38rem); margin: 0 auto; padding-block: 2rem; }
.auth-shell h1 { margin-block: 4rem 2rem; font-size: clamp(2.5rem, 8vw, 5rem); }
.auth-shell form { display: grid; gap: 1.25rem; }
.auth-section { display: grid; gap: 1.25rem; border-top: 1px solid var(--line); padding-block: 2rem; }
.auth-section h2 { margin: 0; font-size: 1.25rem; }
.form-alert { border-block: 1px solid var(--text); margin-block: 1.5rem; padding-block: 0.75rem; }
.auth-shell .checkbox-field { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.5; cursor: pointer; }
.auth-shell input[type="checkbox"] { appearance: none; width: 1.5rem; height: 1.5rem; min-height: 1.5rem; flex: 0 0 1.5rem; margin: 0; padding: 0; cursor: pointer; }
.auth-shell input[type="checkbox"]:checked { background: var(--text); box-shadow: inset 0 0 0 0.3rem var(--background); }
.muted { color: var(--muted); font-size: 0.8rem; }
.profile-shell { width: min(100%, 42rem); min-height: 100vh; margin: 0 auto; border-inline: 1px solid var(--line); }
.profile-nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); padding: 1rem; border-bottom: 1px solid var(--line); }
.profile-header { display: grid; gap: 0.875rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.profile-identity { display: flex; align-items: center; gap: 1rem; }
.profile-avatar { display: block; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid var(--line); object-fit: cover; }
.profile-header h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.profile-handle, .profile-link, .profile-counts, .profile-header > .muted { margin: 0; }
.profile-handle { color: var(--muted); }
.profile-bio { white-space: pre-wrap; line-height: 1.6; }
.profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.profile-actions form { margin: 0; }
.profile-actions a { display: inline-grid; place-items: center; min-height: var(--control-height); border: 1px solid var(--text); border-radius: 0; padding-inline: var(--control-padding-inline); background: var(--background); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
.profile-posts-title { margin: 0; padding: 1rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
.profile-shell .post, .profile-private { padding: 1rem; border-bottom: 1px solid var(--line); }
.settings-shell { width: min(100% - 2rem, 42rem); margin: 0 auto; padding-block: 1rem 4rem; }
.settings-header { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-height); border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.settings-shell > h1 { margin-block: 2rem 0.5rem; font-size: clamp(2rem, 8vw, 4rem); }
.settings-section { display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-block: var(--section-gap); }
.settings-section h2 { margin: 0; font-size: 1.25rem; }
.settings-form, .form-field { display: grid; gap: var(--form-gap); }
.control-button { width: fit-content; }
.preferences-form { display: contents; }
.settings-save { padding-top: 1rem; }
.settings-save .control-button { width: 100%; }
.avatar-setting { display: flex; align-items: center; gap: 1rem; }
.avatar-setting input:focus-visible + .control-button { outline: 2px solid var(--focus); outline-offset: 3px; }
.settings-avatar { display: block; width: 50px; height: 50px; flex: 0 0 50px; border: 1px solid var(--line); object-fit: cover; }
.visually-hidden { 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; }
.form-status { margin: 0; }
.form-status:empty { display: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--control-height); cursor: pointer; }
.switch-control { position: relative; display: inline-flex; flex: 0 0 var(--switch-width); width: var(--switch-width); height: var(--switch-height); }
.switch-control input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.switch-track { width: 100%; height: 100%; border: 1px solid var(--text); border-radius: var(--switch-height); background: var(--background); transition: background 120ms ease; }
.switch-track::after { content: ""; display: block; width: calc(var(--switch-height) - 0.5rem); height: calc(var(--switch-height) - 0.5rem); margin: 0.1875rem; border-radius: 50%; background: var(--text); transition: transform 120ms ease; }
.switch-control input:checked + .switch-track { background: var(--text); }
.switch-control input:checked + .switch-track::after { background: var(--background); transform: translateX(calc(var(--switch-width) - var(--switch-height))); }
.switch-control input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 3px; }
.switch-control input:disabled + .switch-track { opacity: 0.5; cursor: not-allowed; }
.crop-dialog { width: min(calc(100% - 2rem), 42rem); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; }
.crop-dialog-content { display: grid; gap: 1rem; padding: 1rem; }
.crop-dialog header, .crop-actions { display: flex; align-items: center; gap: 0.75rem; }
.crop-dialog header { justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.crop-dialog h2, .crop-dialog p { margin: 0; }
.crop-dialog canvas { display: block; width: auto; max-width: 100%; max-height: 60dvh; margin: 0 auto; border: 1px solid var(--line); cursor: move; touch-action: none; }
.crop-actions { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 1rem; }
.text-button { border: 0; padding-inline: var(--control-padding-inline); }
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 42rem); width: min(100%, 58rem); min-height: 100vh; margin: 0 auto; }
.feed-shell { width: min(100%, 42rem); margin: 0 auto; border-inline: 1px solid var(--line); min-height: 100vh; }
.app-shell .feed-shell { width: 100%; margin: 0; border-inline-start: 0; }
.app-shell .settings-shell, .app-shell .auth-shell { padding-inline: 1rem; }
.feed-shell > nav, .composer, .post { padding: 1rem; border-bottom: 1px solid var(--line); }
.site-nav { position: sticky; top: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2rem; min-height: 100vh; padding: 1.5rem; border-inline: 1px solid var(--line); }
.nav-menu { margin: 0; }
.nav-menu > button { display: none; }
.nav-menu > div { display: grid; gap: 1rem; }
.nav-menu a[aria-current="page"] { font-weight: 700; }
.verification-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.verification-banner p { margin: 0; line-height: 1.5; }
.verification-banner button { white-space: nowrap; }
.privacy-tip { display: grid; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.privacy-tip header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.privacy-tip h2, .privacy-tip p { margin: 0; }
.privacy-tip h2 { font-size: 1rem; }
.privacy-tip p { line-height: 1.5; }
.privacy-tip .control-button { justify-self: start; }
.composer textarea:disabled { cursor: not-allowed; opacity: 0.5; }
.composer { display: grid; gap: var(--form-gap); }
.composer-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--form-gap); }
.composer-meta button { width: var(--control-height); padding: 0; font-size: 1.25rem; }
.publish-toast { position: fixed; z-index: 2; inset: calc(1rem + env(safe-area-inset-top)) 1rem auto auto; margin: 0; border: 1px solid var(--text); background: var(--background); padding: 0.75rem 1rem; animation: publish-toast 4s forwards; }
.published-post { border-bottom: 1px solid var(--text); }
.published-post .post { border-bottom: 0; }
@keyframes publish-toast { 0%, 80% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .publish-toast { animation: none; } }
.post p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.post-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.post-author { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--text); text-decoration: none; }
.post-avatar { display: block; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border: 1px solid var(--line); background: var(--background); object-fit: cover; }
.post-avatar-placeholder { display: grid; place-items: center; color: var(--muted); }
.post-author-copy { display: grid; min-width: 0; line-height: 1.25; }
.post-author-copy strong { overflow: hidden; text-overflow: ellipsis; }
.post-author-meta { color: var(--muted); font-size: 0.8rem; }
.post-header-tools { display: flex; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.post-menu { position: relative; }
.post-menu summary { display: grid; place-items: center; width: 2.75rem; min-height: 2.75rem; color: var(--text); cursor: pointer; list-style: none; }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu-panel { display: none; position: absolute; z-index: 2; inset: 100% 0 auto auto; min-width: 10rem; border: 1px solid var(--text); background: var(--background); }
.post-menu[open] .post-menu-panel { display: grid; }
.post-menu-panel button, .post-menu-panel a { display: flex; align-items: center; justify-content: flex-start; min-height: var(--control-height); border: 0; border-bottom: 1px solid var(--line); padding-inline: var(--control-padding-inline); color: var(--text); text-decoration: none; white-space: nowrap; }
.post-menu-panel > :last-child { border-bottom: 0; }
.link-card { display: grid; grid-template-columns: minmax(0, 8rem) 1fr; border: 1px solid var(--line); text-decoration: none; margin-block: 0.75rem; }
.link-card img { width: 100%; height: 100%; min-height: 6rem; object-fit: cover; border-inline-end: 1px solid var(--line); }
.link-card span { display: grid; align-content: center; gap: 0.35rem; padding: 0.75rem; min-width: 0; }
.link-card small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
[data-preview]:empty { display: none; }
[data-preview] .link-card { margin: 0; }
.thread { border-inline-start: 2px solid var(--text); }
[data-thread-items], [data-thread-items] label { display: grid; gap: 0.5rem; }
.original-card { display: block; border: 1px solid var(--line); margin-block: 0.75rem; padding: 0.75rem; }
.post-actions { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.8rem; }
.post-action { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.post-action svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.post-action[data-active="true"] svg { fill: currentColor; }
.post-expiry { margin-inline-start: auto; border: 0; padding: 0; background: transparent; color: inherit; white-space: nowrap; font-variant-numeric: tabular-nums; }
dialog { border: 1px solid var(--text); border-radius: 0; background: var(--background); color: var(--text); padding: 1rem; }
dialog::backdrop { background: color-mix(in srgb, CanvasText 35%, transparent); }

@media (max-width: 58rem) {
  .app-shell { display: block; width: min(100%, 42rem); }
  .app-shell .feed-shell { border-inline: 1px solid var(--line); }
  .site-nav { position: relative; display: flex; flex-direction: row; align-items: center; min-height: calc(var(--control-height) + 2rem); padding: 1rem; border-bottom: 1px solid var(--line); }
  .nav-menu { margin-inline-start: auto; }
  .nav-menu > button { display: grid; }
  .nav-menu > div { display: none; }
  .nav-menu > button[aria-expanded="true"] + div { display: grid; gap: 0; position: absolute; z-index: 1; inset: calc(100% + 1rem) 0 auto; border: 1px solid var(--line); background: var(--background); }
  .nav-menu > button[aria-expanded="true"] + div a { padding: 1rem; border-bottom: 1px solid var(--line); }
  .nav-menu > button[aria-expanded="true"] + div a:last-child { border-bottom: 0; }
  .verification-banner { align-items: flex-start; flex-direction: column; }
  .control-button { width: 100%; }
  .crop-actions .control-button { width: auto; flex: 1; }
}

.admin-shell { grid-template-columns: 13rem minmax(0, 58rem); width: min(100%, 71rem); }
.admin-main { min-width: 0; min-height: 100vh; border-inline-end: 1px solid var(--line); }
.admin-nav-footer { display: grid; gap: 0.75rem; margin-top: auto; }
.admin-nav-footer form, .admin-nav-footer button { width: 100%; }
.admin-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; min-height: 7rem; padding: 1.5rem; border-bottom: 1px solid var(--line); }
.admin-header h1, .admin-header p { margin: 0; }
.admin-header h1 { margin-top: 0.35rem; font-size: clamp(1.75rem, 5vw, 2.75rem); }
.admin-content { padding: 1.5rem; }
.admin-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-kpis article { padding: 1rem; border: 1px solid var(--line); }
.admin-kpis span, .admin-kpis strong { display: block; }
.admin-kpis strong { margin-top: 0.5rem; font-size: 2rem; font-variant-numeric: tabular-nums; }
.admin-chart { margin-top: 2rem; }
.admin-chart > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-chart h2 { margin: 0; font-size: 1.1rem; }
.admin-chart svg { display: block; width: 100%; height: auto; margin-top: 1rem; border: 1px solid var(--line); }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-series { fill: none; stroke: var(--text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-series.posts { stroke-dasharray: 10 5; }
.chart-series.reposts { stroke-dasharray: 2 5; }
.chart-series.likes { stroke: var(--muted); stroke-dasharray: 14 4 2 4; }
.admin-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; }
.admin-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-line { display: inline-block; width: 2rem; border-top: 2px solid var(--text); }
.legend-line.posts { border-top-style: dashed; }
.legend-line.reposts { border-top-style: dotted; }
.legend-line.likes { border-color: var(--muted); border-top-style: double; }
.admin-details { margin-top: 1rem; }
.admin-details summary { min-height: var(--control-height); cursor: pointer; }
.admin-table-scroll { overflow-x: auto; }
.admin-table-scroll table { width: 100%; border-collapse: collapse; }
.admin-table-scroll th, .admin-table-scroll td { padding: 0.85rem 0.65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-row-actions { display: flex; justify-content: flex-end; gap: 0.75rem; white-space: nowrap; }
.admin-form { display: grid; gap: 1rem; width: min(100%, 34rem); }
.admin-form .checkbox-field { display: flex; align-items: center; gap: 0.75rem; min-height: var(--control-height); cursor: pointer; }
.admin-form .checkbox-field input { width: 1.5rem; height: 1.5rem; margin: 0; }
.admin-form-actions { display: flex; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-note { margin: 0; padding: 1rem; border-inline-start: 3px solid var(--text); line-height: 1.5; }
.admin-report-list { display: grid; gap: 1rem; }
.admin-report { padding: 1rem; border: 1px solid var(--line); }
.admin-report > header { display: flex; justify-content: space-between; gap: 1rem; }
.admin-report form { display: grid; grid-template-columns: minmax(0, 12rem) minmax(12rem, 1fr) auto; align-items: end; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 58rem) {
  .admin-shell { width: min(100%, 58rem); }
  .admin-main { border-inline: 1px solid var(--line); }
  .admin-nav-footer { display: none; }
  .admin-header, .admin-chart > header { align-items: flex-start; flex-direction: column; }
  .admin-report form { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .admin-kpis { grid-template-columns: 1fr; }
  .admin-content, .admin-header { padding: 1rem; }
  .admin-form-actions { flex-direction: column; }
}