* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html[data-text="large"] { font-size: 18px; }
html[data-labels="hide"] .why { display: none; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
}
html[data-text="large"] body { font-size: 18px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
p { margin: 0 0 8px; }
h1, h2 { font-weight: 700; line-height: 1.2; }

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 12px;
  z-index: 6;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }
button.primary:focus-visible,
button.danger:focus-visible { outline-color: var(--ink); }

.app {
  display: grid;
  grid-template-columns: var(--nav) minmax(0, var(--feed)) var(--rail);
  justify-content: center;
  column-gap: 10px;
  max-width: 1265px;
  margin: 0 auto;
  min-height: 100vh;
}

nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}
.brand .logo,
.brand .mark { display: block; flex: none; }
.brand .logo { height: 28px; width: auto; }
.brand .logo-dark { display: none; }
.brand .mark { display: none; width: 28px; height: 28px; }
html[data-theme="dark"] .brand .logo-light { display: none; }
html[data-theme="dark"] .brand .logo-dark { display: block; }
nav a.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 500;
}
.nav-badge {
  position: absolute;
  top: 2px;
  left: 22px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--stamp);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.nav-badge[hidden] { display: none; }
nav a.nav-link svg { width: 26px; height: 26px; }
nav a.nav-link[aria-current="page"] { font-weight: 700; background: var(--stamp-soft); }
nav a.nav-link:hover,
a.nav-account:hover,
button.nav-account:hover { background: var(--hover); }
.nav-foot { margin-top: auto; }
a.nav-account,
button.nav-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font-weight: 700;
}
.nav-account .who-text { min-width: 0; }
.nav-account .name,
.nav-account .handle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account .handle { color: var(--muted); font-weight: 400; font-size: 0.92rem; }

main {
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-height: 100vh;
}
aside {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 4px 24px;
}

.colhead {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.colhead-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
}
.colhead h1 { margin: 0; font-size: 1.2rem; letter-spacing: -0.03em; flex: 1; }
.clip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.colhead .lead {
  padding: 0 16px 10px;
  border-bottom: 0;
  font-size: 0.85rem;
}
.back {
  display: flex;
  color: var(--ink);
  padding: 6px;
  margin-left: -6px;
  border-radius: 999px;
}
.back svg { width: 20px; height: 20px; }
.back:hover { background: var(--hover); }
.tabs { display: flex; align-items: stretch; }
.tabs a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  text-align: center;
  padding: 0 4px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabs button.reload { flex: none; align-self: center; margin-right: 6px; }
.tabs a[aria-selected="true"] { color: var(--ink); }
.tabs a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: var(--stamp-ink);
  transform: translateX(-50%);
}
.tabs a:hover { background: var(--hover); }

button,
.primary {
  background: var(--stamp);
  color: white;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 32px;
  font-weight: 700;
}
button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
button.danger {
  background: transparent;
  color: var(--down);
  border: 1px solid var(--down);
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.reload {
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.reload svg { width: 18px; height: 18px; }
button.reload:hover { background: var(--hover); }

.composer {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 8px 16px 4px;
  border-bottom: 1px solid var(--line);
}
.composer > .err:empty { display: none; margin: 0; }
.composer-guest {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.gno-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gno-sign { display: flex; gap: 8px; align-items: center; width: 100%; }
.gno-sign input { width: auto; flex: 1; min-width: 0; min-height: 32px; }
.gno-sign button { flex: none; }
.gno-box .err { margin: 0; }
.panel .gno-sign { flex-wrap: wrap; }
.panel .gno-sign button,
.panel .gno-box .ghost { width: 100%; }
.composer-wait {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.composer-guest p { margin: 0; }
.composer-main,
.post-main { min-width: 0; }

.composer textarea {
  width: 100%;
  border: 0;
  padding: 8px 0 0;
  min-height: 32px;
  resize: none;
  overflow: hidden;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1.25;
  border-radius: 0;
}
.composer.dropping,
.inline-compose.dropping { background: var(--stamp-soft); }
.composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}
.composer-start { display: flex; align-items: center; gap: 4px; min-width: 0; }
.composer-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: nowrap; }
.composer textarea:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 0; border-radius: 8px; }
.composer-tools { display: inline-flex; align-items: center; }
.composer-parts { display: flex; flex-direction: column; min-width: 0; }
.composer-part {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 0;
  position: relative;
  align-items: start;
}
.composer-part > .avatar { grid-area: 1 / 1; }
.composer-part > .composer-main {
  grid-area: 1 / 2 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.composer-part > .composer-main > .part-bar { margin-top: auto; }
.composer-part.has-next::before,
.composer-part:has(> .thread-add:not([hidden]))::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--line);
  pointer-events: none;
}
.composer-part:has(> .thread-add:not([hidden]))::before { bottom: 34px; }
.composer-part.dropping,
.thread-continue.dropping { background: var(--stamp-soft); }
.composer-part .avatar { position: relative; z-index: 1; }
.part-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  min-width: 0;
  min-height: 32px;
}
.composer .part-bar { gap: 2px; }
.composer .part-bar .count { font-size: 13px; }
.part-bar .composer-tools,
.part-bar .check,
.part-bar .count,
.part-bar .primary,
.composer button.thread-drop { flex: none; }
.part-bar .primary,
.part-bar .count:not([hidden]),
.part-bar .thread-drop:not([hidden]) { margin-left: auto; }
.part-bar .count:not([hidden]) ~ .thread-drop,
.part-bar .count:not([hidden]) ~ .primary,
.part-bar .thread-drop:not([hidden]) ~ .primary { margin-left: 0; }
.composer .check-short { display: none; }
.composer button.thread-add {
  grid-area: 2 / 1;
  align-self: end;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--stamp-ink);
  z-index: 1;
}
.composer button.thread-add svg { width: 18px; height: 18px; }
.composer button.thread-add .add-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.composer button.thread-drop {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
button.thread-add,
button.thread-drop {
  background: transparent;
  color: var(--stamp-ink);
  min-height: 32px;
  padding: 0 8px;
  font-weight: 700;
}
button.thread-drop { color: var(--muted); }
button.thread-add:hover,
button.thread-drop:hover,
.composer button.thread-drop:hover { background: var(--hover); }
.composer button.thread-add:hover {
  background: var(--stamp-soft);
  border-color: var(--stamp-ink);
}
button.thread-add[hidden],
button.thread-drop[hidden],
.composer button.thread-add[hidden],
.composer button.thread-drop[hidden] { display: none; }
@media (max-width: 700px) {
  .composer .check-long { display: none; }
  .composer .check-short { display: inline; }
}
.thread-continue { margin: 0; min-width: 0; }
.thread-continue textarea {
  width: 100%;
  border: 0;
  padding: 8px 0 0;
  min-height: 32px;
  resize: none;
  overflow: hidden;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1.25;
  border-radius: 0;
}
.thread-continue textarea:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 0; border-radius: 8px; }
a.thread-more {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--stamp-ink);
  font-weight: 700;
  text-decoration: none;
}
a.thread-more:hover { text-decoration: underline; }
.thread-add-row {
  padding: 0 16px 6px;
  border-bottom: 1px solid var(--line);
}
.thread-add-row button.thread-add {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  border-radius: 0;
}
.thread-add-row .add-mark {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--stamp-ink);
  background: var(--paper);
}
.thread-add-row .add-mark svg { width: 18px; height: 18px; }
.thread-add-row button.thread-add:hover { background: transparent; color: var(--ink); }
.thread-add-row button.thread-add:hover .add-mark {
  background: var(--stamp-soft);
  border-color: var(--stamp-ink);
}
.post-thread:has(+ .thread-add-row) .post:last-child::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 50px;
  bottom: -14px;
  width: 2px;
  background: var(--line);
  pointer-events: none;
}
button.tool {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--stamp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.tool svg,
label.tool svg { width: 20px; height: 20px; }
button.tool:hover,
button.tool[aria-expanded="true"],
label.tool:hover { background: var(--stamp-soft); }
label.tool {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--stamp-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
label.file-pick:focus-within { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }
input.file-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
button.text-tool {
  background: transparent;
  color: var(--stamp-ink);
  min-height: 32px;
  padding: 0 8px;
}
.tool-panel {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tool-panel[hidden] { display: none; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px;
}
button.emoji {
  background: transparent;
  color: inherit;
  padding: 6px 0;
  border-radius: 8px;
  font-size: 1.2rem;
  line-height: 1.2;
}
button.emoji:hover { background: var(--hover); }
.media-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.media-row input { flex: 1 1 160px; min-width: 0; }
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.tool-hint, .tool-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.tool-note:empty { display: none; }
.thumbs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}
.thumbs.many { grid-template-columns: 1fr 1fr; }
.thumbs:empty { display: none; }
.shot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  min-height: 96px;
}
.thumbs:not(.many) .shot { aspect-ratio: 16 / 9; }
.thumbs.many .shot { aspect-ratio: 1 / 1; }
.shot .media {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.shot.pending .media { opacity: 0.7; }
.shot-state {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: #15202b;
  color: #fff;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 600;
}
button.x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  background: #15202b;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
}
.count { color: var(--muted); font-variant-numeric: tabular-nums; }
.count.over { color: var(--stamp-ink); font-weight: 700; }
label.check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  font-size: 13px;
}

.stack { padding: 8px 16px 16px; border-bottom: 1px solid var(--line); }
.stack h2 { margin: 12px 0 8px; font-size: 1.05rem; }
.stack label { display: block; margin: 0 0 12px; font-weight: 600; }
.stack label input,
.stack label textarea { margin-top: 6px; font-weight: 400; }
.lead {
  margin: 0;
  padding: 10px 16px;
  color: var(--muted);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--line);
}
.lead a { color: var(--stamp-ink); font-weight: 700; text-decoration: none; }
.lead a:hover { text-decoration: underline; }
.lead + .lead { padding-top: 0; border-top: 0; }
.pad { padding: 12px; }
.tip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.tip-row input { width: 140px; flex: 1; max-width: 180px; border-radius: 999px; min-height: 32px; }
.tip-label { font-weight: 700; }
.tip-row .err { flex-basis: 100%; margin: 0; }

input, textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
input[type="checkbox"] { width: auto; }
textarea { min-height: 80px; resize: vertical; overflow-wrap: anywhere; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.post {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 16px 2px;
  border-bottom: 1px solid var(--line);
}
.post-full { padding-top: 8px; }
.post:hover { background: var(--hover); }
.post-full:hover { background: transparent; }
.post:not(.post-full):not(.pending) { cursor: pointer; }
.avatar {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--paper-2);
}
.avatar.nft {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.avatar svg, .avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-link { border-radius: 50%; }
.avatar-link:has(.avatar.nft) { border-radius: 0; }
.who { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.post:not(.article) .who {
  flex-wrap: nowrap;
  min-width: 0;
}
.post:not(.article) .who .name,
.post:not(.article) .who .handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post:not(.article) .who .name,
.post:not(.article) .who .handle { flex: 0 1 auto; }
.post:not(.article) .who .name { max-width: 46%; }
.post:not(.article) .who .dot,
.post:not(.article) .who a.when,
.post:not(.article) .who .edited { flex: none; }
.name { color: var(--ink); font-weight: 700; text-decoration: none; }
.handle, .pid, .sub { color: var(--muted); text-decoration: none; }
.pid { font-size: 0.85rem; }
.post:not(.post-full):not(.pending) .pid {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.name:hover, .handle:hover, .pid:hover { text-decoration: underline; }
.text {
  display: block;
  margin: 1px 0 2px;
  color: var(--ink);
  text-decoration: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
a.text-bit { color: inherit; text-decoration: none; }
a.mention { color: var(--stamp-ink); font-weight: 700; text-decoration: none; }
a.mention:hover { text-decoration: underline; }
.post.article {
  display: block;
  padding: 8px 16px 0;
}
.post.article .who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.post.article .who-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  row-gap: 0;
  align-items: baseline;
  min-width: 0;
  flex: 1;
}
.post.article .who-copy .name { grid-column: 1 / -1; }
.post.article .who-copy .handle { grid-column: 1; grid-row: 2; min-width: 0; }
.post.article .who-copy .pid { grid-column: 2; grid-row: 2; font-size: 0.75rem; }
.post.article .text { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.011em; }
.post.article .body { gap: 6px; margin: 0 0 4px; }
.post.article .actions {
  margin: 0 -4px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.post.article:has(+ .tip-row),
.post.article:has(+ .reply-dock),
.post.article:has(+ .pad) { border-bottom: 0; padding-bottom: 0; }
.post.reply { grid-template-columns: 40px minmax(0, 1fr); padding: 8px 16px 2px; }
.post.reply .text { font-size: 15px; line-height: 1.35; }
.post.reply img.media { max-height: 280px; }
.post.reply:hover { background: var(--hover); }
.post.reply:not(.pending) .pid {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.thread .post.reply { position: relative; }
.thread .post.reply:has(+ .post.reply)::before {
  content: "";
  position: absolute;
  left: 35px;
  top: 48px;
  bottom: -8px;
  width: 2px;
  background: var(--line);
  pointer-events: none;
}
.post-thread .post { position: relative; }
.post-thread .post:not(:last-child) { border-bottom: 0; }
.post-thread .post:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 50px;
  bottom: -8px;
  width: 2px;
  background: var(--line);
  pointer-events: none;
}
.post-thread .post.here,
.post-thread .post.here:hover { background: var(--paper-2); }
.post-thread .avatar-link { position: relative; z-index: 1; }
.post-thread .text { font-size: 1.0625rem; line-height: 1.35; }
.post.article + .pad,
.pad + .tip-row,
.post.article + .tip-row {
  padding: 2px 16px 6px;
  border-bottom: 0;
}
.post.article + .tip-row .tip-label,
.pad + .tip-row .tip-label { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.reply-dock {
  padding: 2px 16px 4px;
  border-bottom: 1px solid var(--line);
}
.reply-dock .inline-compose { margin: 0; min-width: 0; }
.reply-dock .err { margin: 6px 0 0; }
.reply-dock.has-face {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 8px;
  align-items: flex-start;
}
.reply-dock.has-face > .err { grid-column: 2; }
.thread .empty { min-height: 0; padding: 8px 16px 12px; }
h2.thread-label {
  margin: 0;
  padding: 4px 16px 2px;
  border-bottom: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.body { display: flex; flex-direction: column; gap: 6px; margin: 1px 0 2px; }
.body .text { margin: 0; }
img.media {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--paper-2);
}
.post:not(.post-full) img.media { max-height: 240px; }
button.media-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font-weight: 400;
  cursor: zoom-in;
}
button.media-link:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }
.viewer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 16px;
  background: rgba(21, 32, 43, 0.94);
}
.viewer img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 72px);
  object-fit: contain;
  border-radius: 12px;
  background: #15202b;
}
button.viewer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 12px;
  background: #fff;
  color: #15202b;
}
.media-miss { color: var(--muted); overflow-wrap: anywhere; }
a.cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}
a.cite:hover { background: var(--hover); }
.cite-kicker { color: var(--hold); font-weight: 700; font-size: 0.85rem; }
.repost-pop {
  position: fixed;
  z-index: 30;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 0;
  box-shadow: var(--shadow);
}
.repost-pop[hidden] { display: none; }
button.repost-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}
button.repost-opt svg { width: 18px; height: 18px; flex: none; }
button.repost-opt:hover,
button.repost-opt:focus-visible { background: var(--hover); }
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 2px 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.quote-nested { margin: 0; }
.inline-compose .quote { margin-top: 8px; }
a.quote-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
a.quote-hit:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: -2px; }
.quote-who,
.quote-text,
.quote-miss,
.quote-media,
.quote .media-grid,
.quote .post-chart,
.quote .quote {
  position: relative;
  z-index: 1;
}
.quote-who { pointer-events: none; }
.quote-who a { pointer-events: auto; }
.quote-text { pointer-events: none; }
.quote-text a.mention,
.quote-text button.cashtag,
.quote-miss { pointer-events: none; }
.quote-text a.mention,
.quote-text button.cashtag { pointer-events: auto; }
.quote-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.quote-who .avatar { width: 32px; height: 32px; }
.quote-who .avatar-link { border-radius: 50%; }
.quote-who .avatar-link:has(.avatar.nft) { border-radius: 0; }
.quote-id {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 4px;
  align-items: baseline;
  min-width: 0;
  line-height: 1.25;
}
.quote-id .name,
.quote-id .handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.quote-id .name { max-width: 46%; font-size: 0.95rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.quote-id .handle {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}
.quote-id .dot,
.quote-id a.when { flex: none; }
.quote-id .name:hover,
.quote-id .handle:hover,
.quote-id a.when:hover { text-decoration: underline; }
.quote-text {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.quote-text a.mention { color: var(--stamp-ink); font-weight: 700; text-decoration: none; }
.quote-text a.mention:hover { text-decoration: underline; }
.quote-text button.cashtag { color: var(--stamp-ink); }
.quote-miss { margin: 0; color: var(--muted); }
.quote-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin: 2px -10px 0;
}
.quote-media:last-child { margin-bottom: -8px; }
.media-grid {
  display: grid;
  gap: 2px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
}
.media-grid[data-n="1"] { grid-template-columns: 1fr; }
.media-grid[data-n="1"] > button.media-link { aspect-ratio: 16 / 9; }
.media-grid[data-n="2"],
.media-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.media-grid[data-n="2"] > button.media-link,
.media-grid[data-n="4"] > button.media-link { aspect-ratio: 1 / 1; }
.media-grid[data-n="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 2;
}
.media-grid[data-n="3"] > button.media-link:first-child { grid-row: span 2; }
.media-grid > button.media-link {
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}
.post .media-grid img.media,
.post .quote .media-grid img.media,
.post.article .media-grid img.media,
.post.reply .media-grid img.media,
.inline-compose .media-grid img.media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: var(--paper-2);
}
.quote > .media-grid {
  margin: 2px -10px 0;
  pointer-events: none;
}
.quote > .media-grid:last-child { margin-bottom: -8px; }
.quote > .media-grid button { pointer-events: auto; }
.quote button.media-link {
  border-radius: 0;
  min-width: 32px;
  min-height: 32px;
  position: relative;
  z-index: 2;
}
.post.is-repost .repost-mark {
  display: flex;
  justify-content: flex-end;
  padding-top: 3px;
  color: var(--muted);
}
.post.is-repost .repost-mark svg { width: 16px; height: 16px; }
.repost-line {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 6px;
  align-items: baseline;
  min-width: 0;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.92rem;
}
.repost-line .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.repost-line .dot,
.repost-line a.when,
.repost-line .edited,
.repost-line .pid { flex: none; }
.cite-live {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
}
.inline-compose { position: relative; margin: 2px 0 8px; }
.mention-pop {
  position: fixed;
  z-index: 30;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  max-height: 280px;
  box-shadow: var(--shadow);
}
.mention-pop[hidden] { display: none; }
.mention-empty { margin: 0; padding: 12px 14px; color: var(--muted); }
button.mention-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}
button.mention-opt .mention-copy { display: flex; flex-direction: column; min-width: 0; }
button.mention-opt .name,
button.mention-opt .handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.mention-opt .name { font-weight: 700; }
button.mention-opt .handle { color: var(--muted); font-weight: 400; }
button.mention-opt.on,
button.mention-opt:hover { background: var(--hover); }
button.mention-opt .ticker-px {
  margin-left: auto;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
button.cashtag {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  max-width: 100%;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stamp-ink);
  font: inherit;
  font-weight: 700;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}
button.cashtag .cashtag-px {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
button.cashtag:hover .cashtag-sym { text-decoration: underline; }
.price-pop {
  position: fixed;
  z-index: 30;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px 8px;
  max-height: calc(100vh - 16px);
  overflow: auto;
  box-shadow: var(--shadow);
}
.price-pop[hidden] { display: none; }
.price-pop .price-name,
.price-pop .price-symbol,
.price-pop .price-usd,
.price-pop .price-change,
.price-pop .price-note,
.price-pop .price-range { margin: 0; }
.price-pop .price-name { font-weight: 700; }
.price-pop .price-symbol,
.price-pop .price-change,
.price-pop .price-note { color: var(--muted); }
.price-pop .price-change.up,
.post-chart .price-change.up { color: var(--up); }
.price-pop .price-change.down,
.post-chart .price-change.down { color: var(--down); }
.price-pop .price-usd {
  margin-top: 4px;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price-chart-wrap { margin-top: 8px; color: var(--stamp-ink); }
.price-chart-wrap.up { color: var(--up); }
.price-chart-wrap.down { color: var(--down); }
.price-chart-frame { position: relative; }
.price-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.price-chart {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 0;
  color: inherit;
}
.price-chart .price-area { fill: currentColor; stroke: none; }
.price-chart .price-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.price-pop .price-range {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}
.price-pop a.price-link {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-top: 6px;
  color: var(--stamp-ink);
  font-weight: 700;
  text-decoration: none;
}
.price-pop a.price-link:hover { text-decoration: underline; }
.post-chart {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.post-chart[data-mode="compact"] {
  padding: 6px 10px 4px;
  gap: 0;
}
.post-chart[data-mode="compact"] .price-name,
.post-chart[data-mode="compact"] .price-source,
.post-chart[data-mode="compact"] .price-range { display: none; }
.post-chart[data-mode="compact"] .post-chart-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}

.post-chart p { margin: 0; }
.post-chart-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.post-chart-copy { min-width: 0; overflow-wrap: anywhere; }
.post-chart .price-name,
.post-chart .price-change,
.post-chart .price-note { color: var(--muted); }
.post-chart .price-name,
.post-chart .price-change { font-size: 0.85rem; }
.post-chart .price-symbol { font-weight: 700; color: var(--ink); }
.post-chart .price-usd {
  margin-top: 2px;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.post-chart .price-note { margin-top: 4px; font-size: 0.75rem; }
.post-chart .price-chart-wrap { margin-top: 4px; }
.post-chart .price-chart { height: 72px; margin-top: 0; }
.post-chart[data-mode="compact"] .price-usd {
  margin-top: 0;
  font-size: 0.95rem;
}
.post-chart[data-mode="compact"] .price-chart-wrap { margin-top: 2px; }
.post-chart[data-mode="compact"] .price-chart {
  height: 36px;
  margin-top: 0;
}
.post-chart[data-mode="open"] .price-chart { height: 168px; }
.post-chart .price-range {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}
.quote .post-chart { pointer-events: auto; }
button.chart-toggle {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 32px;
  padding: 0 12px;
  font-weight: 700;
  flex: none;
}
button.chart-toggle:hover { background: var(--hover); color: var(--ink); }
.chart-pick { margin: 8px 0 2px; }
.chart-pick[hidden] { display: none; }
.chart-kicker {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}
.chart-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chart-symbol {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink);
  font-weight: 700;
}
button.chart-opt {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 32px;
  padding: 0 12px;
  font-weight: 700;
}
button.chart-opt.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.chart-opt:hover { background: var(--hover); color: var(--ink); }
button.chart-opt.on:hover { background: var(--ink); color: var(--paper); }
.inline-compose[hidden] { display: none; }
.inline-compose textarea {
  min-height: 32px;
  font-size: 1rem;
  line-height: 1.35;
  border: 0;
  border-radius: 0;
  padding: 6px 0 0;
  background: transparent;
}
.inline-compose textarea:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: 0; border-radius: 8px; }
.action-extra:empty { display: none; }
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr 0.7fr 36px;
  align-items: center;
  justify-items: start;
  margin: 0 -8px;
}
.actions span { font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1; }
.like-pair { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
a.act, button.act, span.act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
a.act svg, button.act svg, span.act svg { width: 18px; height: 18px; }
a.act:hover, button.act:hover { color: var(--stamp-ink); background: var(--stamp-soft); }
button.act[aria-label="Reply"]:hover,
button.act[aria-label="Reply"].open { color: var(--stamp-ink); background: var(--stamp-soft); }
button.act[aria-label="Repost"]:hover,
button.act[aria-label="Repost"].open,
button.act[aria-label="Repost"].on,
button.act[aria-label="Undo repost"]:hover,
button.act[aria-label="Undo repost"].open,
button.act[aria-label="Undo repost"].on,
button.act.repost:hover,
button.act.repost.open,
button.act.repost.on { color: var(--hold); background: var(--quiet); }
button.act[aria-label="Like"]:hover,
button.act[aria-label="Like"].on,
button.act[aria-label="Tip"]:hover,
button.act[aria-label="Tip"].open { color: var(--stamp-ink); background: var(--stamp-soft); }
.tip-pop {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(280px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  margin: 0;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.tip-pop[hidden] { display: none; }
.tip-kicker { margin: 0; color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.tip-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
button.tip-amt {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
button.tip-amt:hover { background: var(--hover); }
.tip-custom { display: flex; gap: 8px; align-items: center; }
.tip-custom input {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 32px;
  border-radius: 999px;
}
.tip-pop .err { margin: 0; }
.tip-pop .muted { margin: 0; color: var(--muted); }
.tip-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 26;
  margin: 0;
  padding: 10px 14px;
  background: #15202b;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  transform: translateX(-50%);
}
html[data-theme="dark"] .tip-toast {
  background: #243140;
  border-color: #3d4f63;
}
button.act.bookmark { padding: 0; width: 32px; }
button.act.bookmark:hover,
button.act.bookmark.on { color: var(--ink); background: var(--hover); }
button.act.bookmark.on svg path { fill: currentColor; }
.owner-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.edited { color: var(--muted); font-size: 0.85rem; }
.post.article .who-copy .edited { grid-column: 1 / -1; grid-row: 3; }
.dot { color: var(--muted); user-select: none; }
a.when,
a.posted {
  color: var(--muted);
  font-weight: 400;
  text-decoration: none;
}
a.when:hover,
a.posted:hover { text-decoration: underline; }
.posted-line { margin: 0 0 4px; }
.frame-hint { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; }
.frame-hint[hidden] { display: none; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateX(-50%);
}
.toast-title { font-weight: 700; }
.toast-more { color: var(--muted); font-size: 0.92rem; }
.notify-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.notify-bar .frame-hint { margin: 0; flex: 1 1 180px; }
.notify-bar .err:empty { display: none; }
.notify-bar .err { flex: 1 1 100%; margin: 0; }
label.photo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
}
label.photo-btn:focus-within { outline: 2px solid var(--stamp-ink); outline-offset: 2px; }
.post.pending .pid { color: var(--stamp-ink); font-weight: 700; }
.new-pill {
  display: block;
  width: fit-content;
  margin: 2px auto 4px;
  min-height: 32px;
  box-shadow: var(--shadow);
}
.new-pill[hidden] { display: none; }
.new-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lock {
  margin: 2px 0 8px;
  padding: 0;
  color: var(--muted);
}
.lock a { color: inherit; text-decoration: none; }
.lock a:hover { text-decoration: underline; }
.action-wrap .danger { margin: 4px 0 8px; }

.person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.person:hover { background: var(--hover); }
.person-copy { display: flex; flex-direction: column; min-width: 0; }
.person .who, .holder .who { flex-wrap: nowrap; min-width: 0; }
.person .who .name, .holder .who .name,
.person .who .handle, .holder .who .handle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person .who .handle, .holder .who .handle { flex: none; max-width: 46%; }
.person:hover .name,
.holder:hover .name { text-decoration: underline; }
.person .sub {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.note:hover { background: var(--hover); }
a.note-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
}
a.note-hit:focus-visible { outline: 2px solid var(--stamp-ink); outline-offset: -2px; }
.note > .avatar-link,
.note > .avatar,
.note-copy,
.note-time { position: relative; z-index: 1; }
.note-copy { pointer-events: none; }
.note .name,
.note > .avatar-link { pointer-events: auto; }
.note .name:hover { text-decoration: underline; }
.note-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.note-title, .note-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  font-weight: 700;
}
.note-text, .note-time { color: var(--muted); font-size: 0.92rem; }
.note-time { flex: none; }
.note.unread::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stamp-ink);
  flex: none;
}

.why {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
}
.skip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; }
.post:not(.article) .who .skip-row,
.repost-line .skip-row { margin: 0 0 0 auto; flex: none; }
.post:not(.article) .who .skip-row .err,
.repost-line .skip-row .err { flex-basis: 100%; }
button.skip {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  min-width: 32px;
  min-height: 32px;
  font-weight: 600;
  font-size: 0.82rem;
}
button.skip:hover { color: var(--ink); background: var(--hover); }
.skip-row .err { margin: 0; }
.choice-label { margin: 14px 0 8px; font-weight: 700; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.settings { border-bottom: 0; }
.setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.setting-copy { min-width: 0; flex: 1 1 160px; }
.setting .choice-label { margin: 0; }
.setting .muted { margin: 2px 0 0; font-size: 0.85rem; }
.setting .choice-row { margin: 0; }
.display-save { padding: 16px; }
.display-save .err:empty { display: none; margin: 0; }
.display-save .err { margin: 8px 0 0; }
button.choice {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  min-height: 32px;
  padding: 6px 14px;
  font-weight: 600;
}
button.choice.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.choice:hover { background: var(--hover); }
button.choice.on:hover { background: var(--ink); color: var(--paper); }
.hero { border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.feed > .hero:has(~ .ticket-card) { border-bottom: 0; padding-bottom: 0; }
.feed > a.person:has(+ .ticket-card) { border-bottom: 0; padding-bottom: 4px; }
.banner-photo {
  position: relative;
  aspect-ratio: 3 / 1;
  max-height: 168px;
  overflow: hidden;
  background: var(--paper-2);
}
.banner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  z-index: 1;
}
.banner-tools .photo-btn,
.banner-tools button.ghost {
  background: #15202b;
  color: #fff;
  border-color: transparent;
}
.nft-pick { border-top: 1px solid var(--line); margin-top: 8px; }
.nft-pick[hidden] { display: none; }
.nft-list { display: flex; flex-direction: column; }
button.nft-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
button.nft-choice:hover:not(:disabled) { background: var(--hover); }
button.nft-choice:disabled { color: var(--muted); opacity: 1; }
.nft-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nft-copy .name, .nft-copy .handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero .hint { margin: 4px 16px 0; color: var(--muted); font-size: 0.85rem; }
.hero .hint[hidden] { display: none; }
.nft-note {
  margin: 8px 16px 0;
  color: var(--muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: -36px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.hero-row .avatar {
  position: relative;
  z-index: 1;
  border: 3px solid var(--paper);
  background: var(--paper);
}
.hero-row .avatar.nft { border: 0; }
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 0;
  min-width: 0;
}
.hero-actions > * { flex: none; }
.hero-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 16px 0;
}
.hero-tools[hidden] { display: none; }
.hero-name { margin: 12px 16px 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.03em; }
.hero-stats strong { font-variant-numeric: tabular-nums; }
.hero .handle, .hero .bio, .hero .addr, .hero .muted, .hero > .err { margin-left: 16px; margin-right: 16px; }
.hero > .err:empty { display: none; margin: 0; }
.hero .handle, .hero .bio { margin-bottom: 0; line-height: 1.3; }
.hero .bio { margin-top: 12px; }
.bio { white-space: pre-wrap; }
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 12px 16px 8px;
}
.hero-stats a, .hero-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  text-decoration: none;
}
.hero-stats strong { color: var(--ink); }
.hero-stats a:hover { text-decoration: underline; }
.section-label {
  margin: 0;
  padding: 14px 16px 4px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-bottom: 0;
}
.holders > .section-label {
  padding: 8px 16px 2px;
  font-size: 0.82rem;
  color: var(--muted);
}
.posts-tab {
  display: flex;
  align-items: stretch;
  margin: 0;
  min-height: 40px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
}
.posts-tab span {
  display: inline-flex;
  align-items: center;
  margin-bottom: -1px;
  border-bottom: 3px solid var(--stamp-ink);
}
.feed > .posts-tab + .empty { padding: 16px 16px 20px; }
.ticket-card {
  padding: 2px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.ticket-card.compact { padding: 0 16px 8px; }
.ticket-card.compact .ticket-price { padding-top: 4px; }
.ticket-card.compact .price-num { font-size: 1.15rem; }
.ticket-card.compact .ticket-line { margin-top: 4px; }
.ticket-card .ticket-price { padding: 8px 0 0; flex-wrap: wrap; }
.ticket-card .muted { margin: 4px 0 0; }
.ticket-card .held { margin: 0 0 0 auto; color: var(--muted); font-size: 0.92rem; }
.ticket-card > .primary { margin-top: 8px; }
.ticket-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ticket-line .qty { width: 72px; border-radius: 999px; min-height: 32px; }
.fee-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.fee-row .qty { width: 64px; min-height: 32px; border-radius: 999px; }
.fee-row .hint, .fee-row .err { flex-basis: 100%; margin: 0; }
.fee-row .hint { color: var(--muted); font-size: 0.92rem; }
.holder-empty {
  margin: 0;
  padding: 4px 12px 8px;
  color: var(--muted);
}
.holders .holder-empty { border-bottom: 1px solid var(--line); }
.holder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.holder:hover { background: var(--hover); }
.holder .person-copy { flex: 1; min-width: 0; }
.holder .count {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed > .holder-empty { margin: 0; padding: 12px 16px; }

.ticket-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 12px 16px 2px;
}
.price-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px;
  text-align: center;
  color: var(--stamp-ink);
  font-weight: 700;
  text-decoration: none;
}
.pager:hover { background: var(--hover); }
.empty {
  min-height: 0;
  padding: 28px 16px 32px;
  display: block;
  text-align: left;
  color: var(--muted);
}
.empty p { margin: 0; }
.empty .empty-title {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.empty .muted { margin-top: 4px; max-width: 36em; }
.empty:has(+ .section-label) { min-height: 0; padding: 20px 16px; }
.feed > .stack:last-child { border-bottom: 0; }
.stack.admin > button { margin: 0 0 12px; }
.skel-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--line);
}
.skel-face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
}
.skel-bars { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.skel-bar { display: block; height: 10px; border-radius: 999px; background: var(--paper-2); }
.skel-bar.short { width: 42%; }
.loading { padding: 12px; color: var(--muted); }

.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 8px;
}
.panel h2 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.03em; }
.panel a { color: var(--stamp-ink); font-weight: 600; text-decoration: none; }
.panel a:hover { text-decoration: underline; }
.panel p { margin: 0 0 6px; }
.panel p:has(a) {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin: 0;
}
.panel p a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.stat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 3px 0;
  border-top: 0;
}
.stat span { color: var(--muted); }
.hold-row {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 0;
  border-top: 0;
}

.stub {
  background: var(--stage);
  color: white;
  border-radius: 16px;
  padding: 16px 16px 18px;
  position: relative;
  overflow: hidden;
}
.stub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: radial-gradient(circle at 10px -2px, transparent 8px, var(--stamp) 9px) left top / 20px 10px repeat-x;
}
.stub .price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 18px 0 4px;
}
.stub a { color: #f0c4be; }
.stub p { margin: 0 0 8px; }

main > .banner,
main > .ok {
  margin: 0;
  padding: 10px 16px;
  border-radius: 0;
}
.banner { background: var(--stamp-soft); color: var(--stamp-ink); }
.ok { background: var(--quiet); color: var(--hold); overflow-wrap: anywhere; }
.err { color: var(--down); }
.muted { color: var(--muted); }
.addr { word-break: break-all; color: var(--muted); font-size: 0.92rem; }
.panel .addr { font-size: 0.85rem; }
.prose { padding: 4px 16px 28px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.prose p { color: var(--muted); }
.prose p.lead { color: var(--ink); font-size: 1.05rem; margin-top: 8px; }
.prose h2 {
  margin: 22px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.prose strong { font-variant-numeric: tabular-nums; }
.prose a { color: var(--stamp-ink); }

@media (max-width: 1080px) {
  .app { grid-template-columns: 76px minmax(0, var(--feed)); }
  main { min-height: 0; }
  nav { grid-row: 1 / span 2; padding-left: 8px; padding-right: 8px; }
  aside { grid-column: 2; position: static; }
  .brand .logo,
  html[data-theme="dark"] .brand .logo-dark { display: none; }
  .brand .mark { display: block; }
  nav a.nav-link .label,
  .nav-account .who-text { display: none; }
  .brand, nav a.nav-link, a.nav-account, button.nav-account { justify-content: center; }
  nav a.nav-link { font-size: 0; gap: 0; padding: 8px; }
  .nav-badge { left: calc(50% + 4px); top: 4px; }
}
@media (max-width: 700px) {
  .app { display: flex; flex-direction: column; max-width: none; }
  nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    z-index: 5;
  }
  .brand, .nav-foot { display: none; }
  nav a.nav-link {
    flex: 1;
    justify-content: center;
    border-radius: 0;
    padding: 6px 0;
    min-height: 40px;
  }
  main { border: 0; min-height: 0; padding-bottom: 56px; }
  aside { padding: 0 12px 56px; }
  .composer-guest { flex-wrap: wrap; }
  body { padding-bottom: 8px; }
  .hero-stats { gap: 0 12px; }
  .tip-pop { max-height: calc(100vh - 80px); }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: 0 0 auto; padding: 0 12px; font-size: 0.95rem; letter-spacing: 0; }
  .tabs button.reload { position: sticky; right: 0; background: var(--paper); z-index: 1; }
  nav a.nav-link[aria-current="page"] { background: transparent; color: var(--stamp-ink); }
  aside .panel.realm { display: none; }
  .toast, .tip-toast { bottom: 72px; }
  .actions { grid-template-columns: 1fr 1fr 1fr 1.15fr 0.55fr 32px; margin: 0; }
  a.act, button.act, span.act { padding: 0 4px; gap: 2px; }
  button.act.bookmark { padding: 0; }
  .post.article + .tip-row,
  .post.article + .pad,
  .pad + .tip-row,
  .reply-dock { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .colhead { background: var(--paper); }
}