:root {
  color-scheme: dark;
  --bg: #14121a;
  --surface: #1b1822;
  --surface-2: #24202d;
  --surface-3: #2e2839;
  --text: #f1f2f4;
  --muted: #aaa5b5;
  --line: #3a3446;
  --primary: #ff4da6;
  --primary-hover: #ff68b5;
  --primary-ink: #14121a;
  --accent: #a855f7;
  --accent-text: #c990ff;
  --success: #78c8b6;
  --success-text: #9fdbce;
  --gold: #f2c15c;
  --danger: #ff5c7c;
  --primary-soft: rgba(255, 77, 166, 0.1);
  --primary-border: rgba(255, 77, 166, 0.45);
  --surface-hover: #373043;
  --header-height: 68px;
  --sidebar-width: 340px;
  --state-width: 272px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 18, 26, 0.94);
  backdrop-filter: blur(18px);
}

.header-inner {
  width: min(100% - 32px, 1400px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 18px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
}

.brand-name {
  letter-spacing: 0;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
}

.nav-link:hover,
.nav-link.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-chip {
  min-width: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}

.account-chip:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--surface-2);
}

.account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff;
  font-size: 9px;
  font-weight: 850;
}

.account-chip > svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.account-menu-wrap {
  position: relative;
}

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 232px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.account-menu-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.account-menu-identity > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-menu-identity strong {
  font-size: 13px;
}

.account-menu-identity small {
  color: var(--muted);
  font-size: 11px;
}

.account-menu a,
.account-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu a:hover,
.account-menu button:hover {
  background: var(--surface-hover);
}

.account-menu a svg,
.account-menu button svg {
  color: var(--muted);
}

.credit-balance {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--gold);
  background: var(--surface);
  font-weight: 700;
}

.button,
.icon-button,
.chip,
.text-button {
  border: 0;
  cursor: pointer;
}

.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text);
  font-weight: 700;
  transition: background 160ms ease, transform 160ms ease;
}

.button:hover {
  background: var(--surface-hover);
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.button-primary {
  background: var(--primary);
  color: var(--primary-ink);
}

.button-primary:hover {
  background: var(--primary-hover);
}

.button-quiet {
  border: 1px solid var(--line);
  background: rgba(15, 15, 17, 0.7);
}

.button-small {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.icon-button {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.icon-button:hover,
.icon-button.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.icon-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 80;
  width: max-content;
  max-width: 190px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.icon-button[data-tooltip]:hover::after,
.icon-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.page-shell {
  width: min(100% - 40px, 1400px);
  margin: 0 auto;
  padding: 22px 0 96px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.display-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: 0;
}

.section-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: 0;
}

.discover-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 4px;
}

.discover-title {
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 500;
}

.section-kicker {
  margin: 6px 0 0;
  color: var(--muted);
}

.tag-row,
.action-row,
.meta-row,
.reaction-row,
.filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 10, 11, 0.45);
  color: #e8e4df;
  font-size: 12px;
  font-weight: 700;
}

.tag-accent {
  border-color: rgba(120, 200, 182, 0.5);
  color: #a6dfd1;
}

.cinema-hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}

.cinema-hero > img,
.story-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinema-hero > img {
  object-position: 50% 27%;
}

.cinema-hero::after,
.story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 5, 0.24);
  pointer-events: none;
}

.hero-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: min(620px, 68%);
  padding: 34px;
  background: rgba(8, 8, 9, 0.84);
  backdrop-filter: blur(10px);
}

.hero-logline {
  margin: 14px 0 20px;
  max-width: 570px;
  color: #ddd9d4;
  font-size: 18px;
  line-height: 1.55;
}

.hero-progress {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  width: min(300px, 28%);
  padding: 14px;
  border-left: 3px solid var(--accent);
  background: rgba(8, 8, 9, 0.82);
}

.hero-progress strong,
.continue-copy strong {
  display: block;
  margin-bottom: 4px;
}

.progress-track {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  background: #3a3a3d;
}

.progress-track span {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--accent);
}

.discovery-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  margin: 24px 0 10px;
}

.search-field {
  position: relative;
}

.search-field > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}

.search-input::placeholder,
.chat-input::placeholder {
  color: #767278;
}

.filter-chips {
  margin: 12px 0 28px;
}

.chip {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.chip:hover,
.chip.is-active {
  border-color: var(--text);
  background: var(--text);
  color: #151516;
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 34px 0 16px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.text-button:hover {
  color: var(--text);
}

.masonry-wall {
  column-count: 3;
  column-gap: 16px;
}

.wall-card {
  width: 100%;
  display: inline-block;
  break-inside: avoid;
  margin: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  vertical-align: top;
}

.story-card[hidden] {
  display: none;
}

.wall-link,
.wall-media {
  display: block;
}

.wall-media {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
}

.wall-tall .wall-media {
  aspect-ratio: 2 / 3;
}

.wall-medium .wall-media {
  aspect-ratio: 3 / 4;
}

.wall-short .wall-media {
  aspect-ratio: 4 / 5;
}

.wall-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.wall-card:hover .wall-media > img {
  transform: scale(1.025);
}

.wall-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 80px 15px 15px;
  background: linear-gradient(180deg, rgba(7, 7, 8, 0), rgba(7, 7, 8, 0.94) 58%);
}

.wall-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 8, 9, 0.58);
  color: #eee9e4;
  font-size: 11px;
  font-weight: 750;
}

.wall-badge-premiere {
  border-color: var(--primary-border);
  color: #ffb8da;
}

.wall-overlay h2 {
  margin: 10px 0 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 500;
}

.wall-overlay p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #d1ccc7;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wall-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #aaa5a0;
  font-size: 11px;
}

.wall-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wall-stats svg {
  width: 14px;
  height: 14px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.story-card {
  position: relative;
  min-width: 0;
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 180ms ease, background 180ms ease;
}

.story-card:hover {
  transform: translateY(-3px);
  background: var(--surface-2);
}

.poster-link {
  display: block;
}

.poster-media {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #202024;
}

.poster-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms ease;
}

.story-card:hover .poster-media img {
  transform: scale(1.025);
}

.poster-media .tag {
  position: absolute;
  top: 12px;
  left: 12px;
}

.save-card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: rgba(8, 8, 9, 0.74);
  color: #f4f0eb;
}

.card-body {
  padding: 15px;
}

.story-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 500;
}

.story-logline {
  display: -webkit-box;
  min-height: 44px;
  margin: 8px 0 12px;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #878389;
  font-size: 12px;
}

.continue-strip {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 28px 0;
  padding: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.continue-strip img {
  width: 160px;
  height: 90px;
  border-radius: 4px;
  object-fit: cover;
  object-position: 50% 25%;
}

.continue-copy p {
  margin: 2px 0;
  color: var(--muted);
}

.moment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.moment-card {
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.moment-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}

.moment-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-type {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(8, 8, 9, 0.78);
  color: #f5f2ee;
  font-size: 12px;
  font-weight: 700;
}

.moment-body {
  padding: 14px;
}

.moment-quote {
  margin: 0 0 12px;
  color: #e2ded9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.45;
}

.reaction-row {
  color: var(--muted);
  font-size: 12px;
}

.reaction-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.reaction-button:hover,
.reaction-button.is-active {
  background: var(--surface-3);
  color: var(--text);
}

.empty-search {
  display: none;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
}

.empty-search.is-visible {
  display: block;
}

.story-hero {
  position: relative;
  min-height: clamp(520px, 68vh, 660px);
  overflow: hidden;
  isolation: isolate;
  background: #09090a;
}

.story-hero::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 4, 5, 0.78) 0%, rgba(4, 4, 5, 0.22) 48%, rgba(4, 4, 5, 0.04) 72%),
    linear-gradient(0deg, rgba(4, 4, 5, 0.74) 0%, transparent 45%);
}

.story-media-carousel,
.story-media-viewport,
.story-media-slide {
  position: absolute;
  inset: 0;
}

.story-media-carousel {
  min-height: inherit;
  outline: none;
  touch-action: pan-y;
}

.story-media-carousel:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.story-media-viewport {
  overflow: hidden;
}

.story-media-slide {
  margin: 0;
  background: #09090a;
}

.story-media-slide[hidden] {
  display: none;
}

.story-media-slide img,
.story-media-slide video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 23%;
}

.story-media-slide-mara img {
  object-position: 50% 18%;
}

.story-media-slide video {
  background: #09090a;
}

.story-hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1400px);
  min-height: inherit;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 64px 72px 48px;
  pointer-events: none;
}

.story-hero-copy {
  width: min(700px, 72%);
  padding: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.68);
}

.story-hero-copy .display-title {
  font-size: 64px;
}

.story-hero-copy .hero-logline {
  max-width: 620px;
  margin: 12px 0 0;
  color: #f2efeb;
  font-size: 20px;
  line-height: 1.5;
}

.story-hero-copy .tag-row {
  margin-top: 16px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(8, 8, 9, 0.58);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
}

.carousel-control:hover,
.carousel-control:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(8, 8, 9, 0.82);
}

.carousel-control-prev {
  left: 22px;
}

.carousel-control-next {
  right: 22px;
}

.carousel-pagination {
  position: absolute;
  top: auto;
  right: 24px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
}

.carousel-autoplay {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin-right: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 9, 0.66);
  color: #fff;
  backdrop-filter: blur(10px);
}

.carousel-autoplay:hover,
.carousel-autoplay:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(8, 8, 9, 0.82);
  color: #fff;
}

.carousel-pagination > [data-carousel-go] {
  width: 26px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-pagination > [data-carousel-go]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  transition: width 160ms ease, background 160ms ease;
}

.carousel-pagination > [data-carousel-go][aria-current="true"]::after {
  width: 18px;
  background: #fff;
}

.carousel-counter {
  min-width: 54px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 8, 9, 0.66);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.story-overview {
  border-bottom: 1px solid var(--line);
  background: #0c0c0d;
}

.story-overview-inner {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 44px;
  padding: 34px 0 38px;
}

.story-overview-main {
  min-width: 0;
}

.story-overview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.story-overview-heading h2 {
  max-width: 480px;
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500;
}

.story-overview-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.story-conversation-count {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.story-conversation-count strong {
  color: var(--text);
  font-size: 14px;
}

.story-overview-actions .story-social-button {
  min-height: 38px;
  padding: 0 9px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.story-actions-overflow {
  position: relative;
}

.story-more-button {
  width: 40px;
  height: 40px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.story-more-button[aria-expanded="true"] {
  border-color: var(--primary);
  color: var(--text);
}

.story-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 55;
  width: 178px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #171719;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

.story-actions-menu[hidden] {
  display: none;
}

.story-actions-menu button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d7a09a;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.story-actions-menu button:hover,
.story-actions-menu button:focus-visible {
  background: var(--primary-soft);
  color: #ffb8da;
}

.story-overview-description {
  max-width: 760px;
  margin: 22px 0 0;
  color: #c7c2bc;
  font-size: 16px;
  line-height: 1.72;
}

.story-play-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.story-play-points > div {
  min-width: 0;
  padding: 0 16px;
  border-left: 1px solid var(--line);
}

.story-play-points > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.story-play-points span,
.story-play-points strong {
  display: block;
}

.story-play-points span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.story-play-points strong {
  margin-top: 4px;
  color: #e7e2dc;
  font-size: 13px;
  line-height: 1.4;
}

.story-date-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.story-date-row time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.story-byline-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}

.story-creator-chip .creator-avatar-small {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: 11px;
}

.story-creator-chip .creator-label {
  font-size: 9px;
}

.story-creator-chip .creator-chip-name {
  font-size: 12px;
}

.story-creator-chip .creator-followers {
  display: inline;
  margin: 0 0 0 6px;
}

.story-start-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding-left: 36px;
  border-left: 1px solid var(--line);
}

.story-start-button {
  width: 100%;
  min-height: 62px;
  font-size: 16px;
  box-shadow: 0 12px 34px rgba(255, 77, 166, 0.18);
}

.story-bounty-button {
  width: 100%;
  min-height: 42px;
  font-size: 13px;
}

.story-bounty-button small {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.story-mobile-actions {
  display: none;
}

.story-subnav {
  position: sticky;
  top: var(--header-height);
  z-index: 35;
  border-bottom: 1px solid var(--line);
  background: rgba(20, 18, 26, 0.95);
  backdrop-filter: blur(16px);
}

.story-subnav-inner {
  width: min(100% - 40px, 1400px);
  height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
}

.story-subnav a {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.story-subnav a:hover {
  color: var(--text);
}

.story-content {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 34px 0 100px;
}

.story-meta-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--line);
}

.creator-chip {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.creator-profile-link {
  color: inherit;
  text-decoration: none;
  border-radius: 7px;
  transition: background-color 160ms ease;
}

.creator-profile-link:hover {
  background: var(--surface-hover);
}

.shared-creator-profile {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.shared-creator-profile > div {
  min-width: 0;
}

.creator-avatar-small {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
}

.creator-chip-name {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.creator-chip-name svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.creator-followers {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.story-social-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.story-social-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.story-social-button:hover,
.story-social-button.is-active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.story-social-button.is-active:not(.story-social-muted) {
  color: var(--primary);
}

.story-social-muted {
  opacity: 0.72;
}

.story-social-report {
  margin-left: 5px;
  border-left-color: var(--line);
}

.story-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 24px 0 30px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 58px);
}

.button-count,
.section-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.creator-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 58px);
}

.creator-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
}

.creator-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.creator-name-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.creator-name-row h2 {
  margin: 1px 0;
  font-size: 18px;
}

.creator-name-row svg {
  color: var(--accent);
}

.creator-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.creator-stats {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 12px;
}

.creator-stats span,
.creator-stats strong {
  display: block;
}

.creator-stats strong {
  color: var(--text);
  font-size: 15px;
}

.fact-label {
  display: block;
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.story-section {
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-height) + 58px);
}

.two-column-section {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(320px, 1.25fr);
  gap: 56px;
  align-items: start;
}

.body-copy {
  max-width: 710px;
  color: #ccc8c3;
  font-size: 17px;
  line-height: 1.75;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.cast-card {
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.cast-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.cast-body {
  padding: 14px;
}

.cast-body h3 {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
}

.cast-body p {
  margin: 0;
  color: var(--muted);
}

.compact-section-heading {
  align-items: center;
}

.cast-compact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.cast-compact-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
  min-height: 104px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.cast-compact-card > img {
  width: 76px;
  height: 94px;
  border-radius: 4px;
  object-fit: cover;
  object-position: 50% 20%;
}

.cast-compact-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
}

.cast-compact-card span,
.cast-compact-card p {
  display: block;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-report {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  align-self: start;
  color: #817d83;
}

.character-studio {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.character-studio-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.character-studio-heading strong,
.character-studio-heading span {
  display: block;
}

.character-studio-heading span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.pose-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pose-tile {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.pose-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 21%;
  opacity: 0.88;
  transition: transform 180ms ease, opacity 180ms ease;
}

.pose-close img {
  object-position: 50% 12%;
  transform: scale(1.2);
}

.pose-motion img {
  object-position: 50% 38%;
}

.pose-tile:hover img {
  opacity: 1;
  transform: scale(1.03);
}

.pose-close:hover img {
  transform: scale(1.23);
}

.pose-tile span {
  position: absolute;
  right: 9px;
  bottom: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: calc(100% - 18px);
  min-height: 30px;
  padding: 0 9px;
  border-radius: 4px;
  background: rgba(8, 8, 9, 0.82);
  font-size: 11px;
  font-weight: 750;
}

.detail-heading-row {
  margin-top: 0;
}

.bounty-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.bounty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(216, 181, 116, 0.12);
  color: var(--gold);
}

.bounty-copy h3 {
  margin: 5px 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 500;
}

.bounty-copy > p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
}

.bounty-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.bounty-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}

.bounty-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bounty-meta strong,
.bounty-meta span:first-child {
  color: var(--gold);
}

.bounty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.conversation-waterfall {
  column-count: 3;
  column-gap: 14px;
}

.conversation-waterfall .conversation-card {
  width: 100%;
  display: inline-flex;
  min-height: 0;
  break-inside: avoid;
  margin: 0 0 14px;
  vertical-align: top;
}

.conversation-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 214px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color 160ms ease, transform 160ms ease;
}

.conversation-card:hover {
  border-color: #57575d;
  transform: translateY(-2px);
}

.conversation-card[hidden],
.moment-card[hidden] {
  display: none;
}

.conversation-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.conversation-card h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversation-card time,
.conversation-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.share-card-tools {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.conversation-card-body {
  display: block;
}

.conversation-card-body p {
  display: -webkit-box;
  margin: 16px 0 20px;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.conversation-author {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: #d5d1cc;
  font-size: 12px;
}

.author-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #161618;
  font-size: 9px;
  font-weight: 800;
}

.conversation-open {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--muted);
}

.conversation-open:hover {
  background: var(--surface-3);
  color: var(--text);
}

.avatar-coral { background: #e7897a; }
.avatar-mint { background: #78c8b6; }
.avatar-gold { background: #d8b574; }
.avatar-blue { background: #85a8d8; }
.avatar-violet { background: #b29ad8; }
.avatar-neutral { background: #c2bbb3; }

.share-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.moment-report {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(8, 8, 9, 0.74);
  color: #f2eee9;
}

.moment-waterfall {
  column-count: 3;
  column-gap: 18px;
}

.moment-waterfall .moment-card {
  width: 100%;
  display: inline-block;
  break-inside: avoid;
  margin: 0 0 18px;
  vertical-align: top;
}

.moment-waterfall .moment-card[hidden] {
  display: none;
}

.fan-card-audio .moment-media,
.fan-card-square .moment-media {
  aspect-ratio: 1 / 1;
}

.fan-card-tall .moment-media {
  aspect-ratio: 4 / 5;
}

.fan-card-video .moment-media {
  aspect-ratio: 16 / 10;
}

.fan-card-tall .moment-media img {
  object-position: 50% 20%;
}

.load-more-button {
  width: min(100%, 320px);
  margin: 18px auto 0;
}

.load-more-button.is-complete {
  color: var(--muted);
}

.fan-audio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.26);
  pointer-events: none;
}

.fan-audio-media .media-type,
.fan-audio-media .moment-report {
  z-index: 2;
}

.comments-heading .section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.heading-count {
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.comment-composer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 24px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.comment-composer textarea,
.report-details {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background: var(--bg);
  color: var(--text);
}

.comment-composer textarea {
  min-height: 62px;
  resize: none;
}

.comment-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #171719;
  font-size: 10px;
  font-weight: 800;
}

.comment-list {
  border-top: 1px solid var(--line);
}

.comment-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.comment-content {
  min-width: 0;
  max-width: 820px;
}

.comment-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.comment-header strong,
.comment-header time {
  display: block;
}

.comment-header time {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.comment-content > p {
  margin: 9px 0 10px;
  color: #d5d1cc;
  line-height: 1.65;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-actions button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}

.comment-actions button:hover,
.comment-actions button.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.comments-more {
  width: 100%;
  margin-top: 18px;
}

.report-modal {
  width: min(540px, 100%);
}

.report-target-line {
  margin: 0 0 14px;
  color: var(--muted);
}

.report-target-line strong {
  color: var(--text);
}

.report-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.report-option {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.report-option:hover,
.report-option.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.relationship-path {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 24px;
}

.path-stage {
  position: relative;
  min-height: 72px;
  padding: 18px 16px 12px 0;
  border-top: 2px solid var(--line);
}

.path-stage::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.path-stage:first-child,
.path-stage:nth-child(2) {
  border-color: var(--primary);
}

.path-stage:first-child::before,
.path-stage:nth-child(2)::before {
  background: var(--primary);
}

.path-stage strong,
.path-stage span {
  display: block;
}

.path-stage span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.moment-tabs {
  display: flex;
  gap: 5px;
  margin: 20px 0 16px;
  overflow-x: auto;
}

.tab-button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.tab-button:hover,
.tab-button.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.community-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
}

.community-notice p {
  margin: 4px 0 0;
  color: var(--muted);
}

.chat-page {
  height: 100dvh;
  overflow: hidden;
}

.chat-shell {
  height: calc(100dvh - var(--header-height));
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--state-width);
}

.chat-sidebar,
.story-state-panel {
  min-height: 0;
  background: var(--surface);
}

.chat-sidebar {
  border-right: 1px solid var(--line);
}

.sidebar-heading,
.state-heading {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.sidebar-heading h2,
.state-heading h2 {
  margin: 0;
  font-size: 16px;
}

.session-list {
  height: calc(100% - 60px);
  padding: 8px;
  overflow-y: auto;
}

.session-item {
  width: 100%;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.session-item:hover,
.session-item.is-active {
  background: var(--surface-2);
}

.session-item img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
}

.session-copy {
  min-width: 0;
}

.session-copy strong,
.session-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-sidebar {
  position: relative;
  display: grid;
  grid-template-rows: 60px auto minmax(0, 1fr) 48px;
  overflow: hidden;
}

.conversation-sidebar-header > div {
  min-width: 0;
}

.conversation-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--line);
}

.conversation-sidebar-header > a {
  min-width: 0;
}

.conversation-sidebar-header strong,
.conversation-sidebar-header span {
  display: block;
}

.conversation-sidebar-header strong {
  font-size: 16px;
}

.conversation-sidebar-header span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.conversation-sidebar-controls {
  padding: 11px 10px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.conversation-sidebar-search {
  position: relative;
  display: block;
}

.conversation-sidebar-search > svg {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  transform: translateY(-50%);
}

.conversation-sidebar-search input {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 33px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #101012;
  color: var(--text);
  font-size: 12px;
}

.conversation-sidebar-filters {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.conversation-sidebar-filters::-webkit-scrollbar {
  display: none;
}

.conversation-sidebar-filters button {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #8e8a86;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.conversation-sidebar-filters button:hover,
.conversation-sidebar-filters button.is-active {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--text);
}

.conversation-sidebar-list {
  min-height: 0;
  overflow-y: auto;
  padding: 4px 8px 8px;
}

.conversation-sidebar-group[hidden] {
  display: none;
}

.conversation-sidebar-group > h2 {
  margin: 0;
  padding: 12px 6px 6px;
  color: #777378;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-chat-row {
  width: 100%;
  min-height: 67px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  padding: 8px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.sidebar-chat-row:hover,
.sidebar-chat-row.is-active {
  background: var(--surface-2);
}

.sidebar-chat-row[hidden] {
  display: none;
}

.sidebar-chat-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
}

.sidebar-chat-avatar > img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar-chat-initial {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #28594f;
  color: #d4f5ed;
  font-size: 15px;
  font-weight: 850;
}

.sidebar-chat-avatar .chat-presence {
  right: 0;
  bottom: 0;
  border-color: var(--surface);
}

.sidebar-chat-row.is-active .sidebar-chat-avatar .chat-presence {
  border-color: var(--surface-2);
}

.sidebar-chat-stack img {
  position: absolute;
  width: 31px;
  height: 31px;
  border: 2px solid var(--surface);
}

.sidebar-chat-stack img:first-child {
  top: 0;
  left: 0;
}

.sidebar-chat-stack img:last-child {
  right: 0;
  bottom: 0;
}

.sidebar-chat-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sidebar-chat-copy > span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-chat-copy > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.sidebar-chat-copy strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-chat-copy small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: #7e797f;
  font-size: 8px;
  font-weight: 750;
}

.sidebar-chat-copy small svg {
  width: 10px;
  height: 10px;
}

.sidebar-chat-meta {
  min-width: 0;
  height: 43px;
  display: grid;
  align-content: space-between;
  justify-items: end;
  color: #716d72;
  font-size: 8px;
}

.sidebar-chat-meta b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 9px;
}

.conversation-sidebar-empty {
  padding: 30px 10px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.conversation-sidebar-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  color: #aaa6a1;
  font-size: 11px;
  font-weight: 750;
}

.conversation-sidebar-all:hover {
  color: var(--text);
}

.conversation-sidebar-all svg {
  width: 14px;
  height: 14px;
}

.chat-sidebar-scrim {
  display: none;
}

[data-story-chat-tool][hidden],
[data-ai-chat-tool][hidden],
[data-ai-composer-tools][hidden] {
  display: none;
}

.session-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.chat-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) auto;
  background: var(--bg);
}

.chat-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.chat-title-wrap {
  min-width: 0;
}

.chat-title-wrap strong,
.chat-title-wrap span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title-wrap span {
  color: var(--muted);
  font-size: 12px;
}

.chat-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.message-stream {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 26px max(22px, calc((100% - 760px) / 2)) 18px;
  scroll-behavior: smooth;
}

.chapter-marker {
  margin: 0 0 24px;
  color: var(--muted);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}

.message {
  margin: 0 0 20px;
}

.message-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.message-label img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.message-bubble {
  position: relative;
  max-width: 690px;
  padding: 17px 18px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: #e8e4df;
}

.message-user .message-bubble {
  margin-left: auto;
  background: #292423;
}

.message-bubble p {
  margin: 0 0 12px;
}

.message-bubble p:last-of-type {
  margin-bottom: 0;
}

.dialogue {
  color: #fff6e8;
  font-weight: 650;
}

.narration {
  color: #bdb8b3;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 10px;
  opacity: 0.55;
}

.message-bubble:hover .message-actions,
.message-actions:focus-within {
  opacity: 1;
}

.message-actions .icon-button {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.scene-image {
  margin-top: 12px;
  overflow: hidden;
  border-radius: 5px;
}

.scene-image img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  object-position: 50% 24%;
}

.quick-replies {
  display: flex;
  gap: 8px;
  margin: 4px 0 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.quick-reply {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.quick-reply:hover {
  border-color: var(--primary);
  color: var(--text);
}

.composer-wrap {
  min-width: 0;
  padding: 12px max(18px, calc((100% - 780px) / 2)) 16px;
  border-top: 1px solid var(--line);
  background: rgba(20, 18, 26, 0.96);
}

.composer-tools {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.chat-input {
  width: 100%;
  min-height: 42px;
  max-height: 132px;
  resize: none;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.send-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
}

.send-button:disabled {
  opacity: 0.36;
  cursor: default;
}

.story-state-panel {
  border-left: 1px solid var(--line);
  overflow-y: auto;
}

.state-body {
  padding: 16px;
}

.state-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.state-block:first-child {
  padding-top: 0;
}

.state-block h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.state-value {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 7px 0;
  color: #d7d2cc;
  font-size: 13px;
}

.state-value span:last-child {
  color: var(--muted);
  text-align: right;
}

.relationship-meter {
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  background: #39393d;
}

.relationship-meter span {
  display: block;
  width: 34%;
  height: 100%;
  background: var(--primary);
}

.drawer,
.modal-backdrop {
  position: fixed;
  z-index: 100;
}

.drawer {
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100dvh;
  padding: 22px;
  border-left: 1px solid var(--line);
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 200ms ease;
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-header,
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.drawer-header h2,
.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

.setting-group {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.setting-group h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.segment {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segment:hover,
.segment.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--text);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #3b3b40;
  cursor: pointer;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8e5e0;
  transition: transform 160ms ease;
}

.switch input:checked + .switch-track {
  background: var(--primary);
}

.switch input:checked + .switch-track::after {
  transform: translateX(20px);
}

.drawer-footer {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-backdrop {
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}

.modal-backdrop.is-open {
  display: flex;
}

.modal {
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.modal-header,
.modal-body,
.modal-footer {
  padding: 18px 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.moment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.moment-option {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.moment-option:hover,
.moment-option.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.moment-option small {
  color: var(--muted);
}

.moment-visibility-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.moment-visibility-row > div:first-child {
  display: grid;
  gap: 5px;
}

.moment-visibility-row small {
  max-width: 360px;
  color: var(--muted);
  line-height: 1.45;
}

.moment-visibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(108px, 1fr));
  gap: 7px;
}

.moment-visibility-options .segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
}

.moment-success {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}

.moment-success[hidden] {
  display: none;
}

[data-moment-compose-actions][hidden],
[data-moment-success-actions][hidden] {
  display: none;
}

.moment-success > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.moment-success h3,
.moment-success p {
  margin: 0;
}

.moment-success p {
  max-width: 420px;
  color: var(--muted);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 140;
  max-width: min(360px, calc(100% - 40px));
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mobile-bottom-nav {
  display: none;
}

.mobile-only {
  display: none;
}

@media (max-width: 1060px) {
  .masonry-wall {
    column-count: 3;
  }

  .conversation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .conversation-waterfall,
  .moment-waterfall {
    column-count: 2;
  }

  .cast-compact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chat-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .story-state-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    z-index: 70;
    width: min(var(--state-width), 88%);
    height: calc(100dvh - var(--header-height));
    transform: translateX(100%);
    transition: transform 180ms ease;
  }

  .story-state-panel.is-open {
    transform: translateX(0);
  }

  .state-toggle {
    display: inline-grid;
  }
}

@media (min-width: 1061px) {
  .state-toggle {
    display: none;
  }
}

@media (max-width: 820px) {
  :root {
    --header-height: 60px;
  }

  .header-inner,
  .page-shell,
  .story-content,
  .story-subnav-inner,
  .story-hero-content,
  .story-overview-inner {
    width: min(100% - 28px, 1400px);
  }

  .desktop-nav,
  .header-upgrade,
  .credit-label {
    display: none;
  }

  .account-chip {
    width: 40px;
    min-width: 40px;
    padding: 0 5px;
  }

  .account-name,
  .account-chip > svg {
    display: none;
  }

  .mobile-only {
    display: inline-grid;
  }

  .page-shell {
    padding-top: 14px;
  }

  .cinema-hero {
    min-height: 600px;
  }

  .cinema-hero > img {
    object-position: 53% 20%;
  }

  .hero-panel {
    width: 100%;
    padding: 22px;
  }

  .hero-progress {
    top: 18px;
    right: 18px;
    bottom: auto;
    width: min(260px, calc(100% - 36px));
  }

  .display-title {
    font-size: 42px;
  }

  .masonry-wall {
    column-count: 2;
  }

  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moment-grid,
  .cast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .continue-strip {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .continue-strip img {
    width: 120px;
    height: 84px;
  }

  .continue-strip .button {
    grid-column: 1 / -1;
  }

  .story-hero,
  .story-hero-content {
    min-height: 560px;
  }

  .story-hero-content {
    padding: 48px 64px 40px;
  }

  .story-hero-copy {
    width: min(640px, 78%);
  }

  .story-hero-copy .display-title {
    font-size: 52px;
  }

  .story-overview-inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 0 34px;
  }

  .story-overview-heading {
    flex-direction: column;
    gap: 18px;
  }

  .story-overview-actions {
    justify-content: flex-start;
  }

  .story-byline-row {
    grid-template-columns: auto auto;
  }

  .story-byline-row .story-date-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .story-start-panel {
    display: none;
  }

  .story-actions-menu {
    top: auto;
    bottom: calc(100% + 8px);
    z-index: 80;
  }

  .story-facts,
  .two-column-section {
    grid-template-columns: 1fr;
  }

  .story-meta-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .story-social-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cast-compact-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cast-compact-card {
    flex: 0 0 280px;
  }

  .creator-panel {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .creator-avatar {
    grid-row: 1 / 3;
  }

  .creator-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .creator-stats {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .creator-panel > .button {
    grid-column: 3;
    grid-row: 1;
  }

  .bounty-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .bounty-actions {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .two-column-section {
    gap: 20px;
  }

  .relationship-path {
    grid-template-columns: 1fr;
  }

  .path-stage {
    min-height: 56px;
    padding-left: 18px;
    border-top: 0;
    border-left: 2px solid var(--line);
  }

  .path-stage::before {
    top: 22px;
    left: -6px;
  }

  .chat-shell {
    grid-template-columns: 1fr;
  }

  .chat-sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    z-index: 72;
    width: min(var(--sidebar-width), 90%);
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  .chat-sidebar.is-open {
    transform: translateX(0);
  }

  .chat-sidebar-scrim:not([hidden]) {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 71;
    display: block;
    border: 0;
    background: rgba(5, 4, 7, 0.58);
    cursor: pointer;
  }

  .chat-toolbar {
    padding: 0 10px;
  }

  .message-stream {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .composer-wrap {
    width: 100%;
    padding: 10px 12px 12px;
  }

  .message-bubble {
    width: 100%;
  }

  .chat-tools [data-toast="Branch preview opened"] {
    display: none;
  }

  @media (max-width: 350px) {
    .chat-toolbar {
      gap: 5px;
      padding: 0 6px;
    }

    .chat-toolbar > .icon-button,
    .chat-tools .icon-button {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
    }

    .chat-tools {
      gap: 0;
    }

    .chat-title-wrap span {
      display: none;
    }
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    height: 66px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(20, 18, 26, 0.96);
    backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
  }

  .mobile-bottom-nav a.is-active,
  .mobile-bottom-nav a:hover {
    color: var(--text);
  }

  body[data-page="story"] .story-content {
    padding-bottom: 132px;
  }

  .story-mobile-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 65;
    height: 76px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: rgba(20, 18, 26, 0.96);
    backdrop-filter: blur(16px);
  }

  .mobile-bounty-button {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-bounty-button small {
    min-width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--text);
    font-size: 10px;
  }

  .story-mobile-start {
    min-height: 54px;
    font-size: 15px;
  }
}

@media (max-width: 540px) {
  .page-shell,
  .story-content,
  .story-hero-content,
  .story-overview-inner {
    width: min(100% - 22px, 1400px);
  }

  .header-inner {
    width: calc(100% - 20px);
    gap: 10px;
  }

  .brand-name {
    display: none;
  }

  .credit-balance {
    padding: 0 8px;
  }

  .discover-intro {
    align-items: flex-start;
    padding-top: 10px;
  }

  .discover-title {
    font-size: 32px;
  }

  .discovery-toolbar {
    grid-template-columns: 1fr auto;
  }

  .story-grid {
    gap: 10px;
  }

  .masonry-wall {
    column-gap: 10px;
  }

  .wall-card {
    margin-bottom: 10px;
  }

  .wall-overlay {
    padding: 62px 10px 10px;
  }

  .wall-overlay h2 {
    margin-top: 7px;
    font-size: 18px;
  }

  .wall-overlay p {
    font-size: 11px;
  }

  .wall-stats {
    gap: 8px;
    margin-top: 7px;
  }

  .wall-badge {
    min-height: 22px;
    padding: 0 6px;
    font-size: 9px;
  }

  .card-body {
    padding: 11px;
  }

  .story-title {
    font-size: 18px;
  }

  .story-logline {
    min-height: 41px;
    font-size: 13px;
  }

  .card-meta span:last-child {
    display: none;
  }

  .moment-grid,
  .cast-grid {
    grid-template-columns: 1fr;
  }

  .continue-strip {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
  }

  .continue-strip img {
    width: 88px;
    height: 72px;
  }

  .section-title {
    font-size: 25px;
  }

  .story-hero,
  .story-hero-content {
    min-height: 500px;
  }

  .story-hero-copy .display-title {
    font-size: 42px;
  }

  .story-hero-content {
    padding: 40px 18px 34px;
  }

  .story-hero-copy {
    width: 100%;
    padding: 0;
  }

  .story-hero-copy .hero-logline {
    max-width: 330px;
    margin-top: 9px;
    font-size: 17px;
    line-height: 1.45;
  }

  .story-hero .tag-row {
    flex-wrap: nowrap;
    gap: 5px;
    margin-top: 13px;
  }

  .story-hero .tag {
    padding: 0 8px;
  }

  .carousel-control {
    width: 44px;
    height: 44px;
  }

  .carousel-control-prev {
    left: 12px;
  }

  .carousel-control-next {
    right: 12px;
  }

  .carousel-pagination {
    top: 14px;
    right: 12px;
    bottom: auto;
  }

  .carousel-counter {
    display: none;
  }

  .story-overview-inner {
    padding: 24px 0 30px;
  }

  .story-overview-heading {
    gap: 15px;
  }

  .story-overview-heading h2 {
    font-size: 24px;
  }

  .story-overview-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .story-conversation-count {
    min-height: 36px;
  }

  .story-overview-actions .story-social-actions {
    flex: 1 1 280px;
    overflow-x: visible;
  }

  .story-overview-actions .story-social-button {
    min-height: 36px;
    padding: 0 6px;
  }

  .story-overview-description {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.68;
  }

  .story-play-points {
    grid-template-columns: 1fr;
    margin-top: 21px;
    padding: 0;
  }

  .story-play-points > div,
  .story-play-points > div:first-child {
    padding: 11px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .story-play-points > div:first-child {
    border-top: 0;
  }

  .story-play-points strong {
    margin-top: 2px;
    font-size: 12px;
  }

  .story-byline-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-top: 15px;
  }

  .story-byline-row .story-date-row {
    grid-column: 1 / -1;
  }

  .story-date-row {
    gap: 6px 10px;
    margin: 0;
    font-size: 10px;
  }

  .story-subnav-inner {
    width: calc(100% - 22px);
  }

  .story-section {
    padding: 32px 0;
  }

  .story-meta-bar {
    gap: 12px 8px;
    padding-bottom: 18px;
  }

  .creator-avatar-small {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .story-social-actions {
    margin: 0 -2px;
  }

  .story-social-button {
    min-height: 36px;
    padding: 0 9px;
  }

  .story-creator-chip .creator-followers {
    display: none;
  }

  .story-mobile-actions {
    grid-template-columns: 96px minmax(0, 1fr);
    padding-right: 11px;
    padding-left: 11px;
  }

  .cast-compact-card {
    flex-basis: 260px;
  }

  .character-studio-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .pose-strip {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pose-tile {
    flex: 0 0 250px;
  }

  .creator-panel {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
  }

  .creator-avatar {
    grid-column: 1;
    grid-row: 1;
  }

  .creator-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .creator-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .creator-panel > .button {
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .bounty-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .bounty-icon,
  .bounty-copy,
  .bounty-actions {
    grid-column: 1;
  }

  .bounty-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .conversation-grid {
    grid-template-columns: 1fr;
  }

  .conversation-waterfall,
  .moment-waterfall {
    column-count: 1;
  }

  .conversation-card {
    min-height: 0;
  }

  .conversation-metric {
    display: none;
  }

  .detail-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .comment-composer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .comment-composer .button {
    grid-column: 2;
    justify-self: end;
  }

  .report-options {
    grid-template-columns: 1fr;
  }

  .community-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .moment-options {
    grid-template-columns: 1fr;
  }

  .moment-visibility-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .moment-visibility-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer .button {
    width: 100%;
  }
}

/* Discovery grid and product hubs */
.credit-balance:hover {
  border-color: #48484e;
  background: var(--surface-2);
}

.masonry-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  column-count: initial;
  column-gap: 0;
}

.masonry-wall .wall-card {
  width: auto;
  min-width: 0;
  display: block;
  margin: 0;
}

.masonry-wall .wall-media,
.masonry-wall .wall-tall .wall-media,
.masonry-wall .wall-medium .wall-media,
.masonry-wall .wall-short .wall-media {
  aspect-ratio: 5 / 8;
}

.masonry-wall .wall-overlay {
  padding: 74px 12px 13px;
}

.masonry-wall .wall-overlay h2 {
  font-size: 22px;
}

.pose-tile {
  aspect-ratio: 4 / 5;
}

.page-title {
  margin: 3px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  line-height: 1.08;
  font-weight: 500;
}

.page-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 24px;
}

.filter-count {
  color: inherit;
  font-size: 11px;
  opacity: 0.72;
}

.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 8, 9, 0.78);
  color: #dedad5;
  font-size: 11px;
  font-weight: 750;
}

.visibility-badge svg {
  width: 13px;
  height: 13px;
}

.visibility-badge.is-public {
  border-color: rgba(120, 200, 182, 0.42);
  color: #a9dfd3;
}

.visibility-badge.is-private {
  color: #c6c1bb;
}

/* Chats */
.chats-page-shell {
  width: min(100% - 40px, 1080px);
  padding-top: 36px;
}

.chat-hub-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.chat-hub-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-hub-controls {
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.chat-hub-search {
  display: block;
  max-width: 620px;
}

.chat-filter-chips {
  margin: 14px 0 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-filter-chips::-webkit-scrollbar,
.profile-tabs::-webkit-scrollbar,
.profile-filter-row::-webkit-scrollbar,
.preset-tabs::-webkit-scrollbar,
.reward-filter::-webkit-scrollbar {
  display: none;
}

.chat-filter-chips .chip {
  flex: 0 0 auto;
}

.chat-inbox {
  margin-top: 20px;
}

.chat-inbox-group[hidden] {
  display: none;
}

.chat-group-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  color: var(--muted);
}

.chat-group-heading h2 {
  margin: 0;
  color: #d8d4cf;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-group-heading span {
  font-size: 11px;
}

.chat-inbox-row {
  min-height: 84px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 150ms ease;
}

.chat-inbox-row:hover {
  background: rgba(255, 255, 255, 0.035);
}

.chat-inbox-row[hidden] {
  display: none;
}

.chat-row-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  display: block;
  flex: 0 0 52px;
}

.chat-row-avatar-single > img,
.chat-initial-avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  font-weight: 800;
}

.chat-initial-avatar.avatar-mint {
  background: #28594f;
  color: #c8f2e8;
}

.chat-presence {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: #717176;
}

.chat-presence.is-online {
  background: var(--success);
}

.chat-avatar-stack img {
  position: absolute;
  width: 35px;
  height: 35px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
}

.chat-avatar-stack img:nth-child(1) {
  top: 0;
  left: 0;
}

.chat-avatar-stack img:nth-child(2) {
  right: 0;
  bottom: 0;
}

.chat-avatar-more {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--surface-3);
  color: #eee9e4;
  font-size: 9px;
  font-weight: 800;
}

.chat-row-copy,
.chat-row-title,
.chat-row-preview,
.chat-row-context {
  min-width: 0;
}

.chat-row-copy {
  display: grid;
  gap: 2px;
}

.chat-row-title {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.chat-row-title strong,
.chat-row-preview,
.chat-row-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-row-title strong {
  font-size: 15px;
}

.chat-type-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: #918d89;
  font-size: 10px;
  font-weight: 750;
}

.chat-type-label svg,
.chat-row-context svg {
  width: 12px;
  height: 12px;
}

.chat-row-preview {
  color: #bcb7b2;
  font-size: 13px;
}

.chat-row-context {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777378;
  font-size: 11px;
}

.chat-row-meta {
  min-width: 74px;
  display: grid;
  justify-items: end;
  align-self: stretch;
  align-content: space-between;
  padding: 4px 0;
  color: #827e83;
  font-size: 11px;
}

.chat-unread-count {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 11px;
  font-weight: 850;
}

.chat-inbox-row.is-unread .chat-row-title strong {
  color: #fff;
}

.chat-filter-empty {
  padding: 54px 0;
  color: var(--muted);
  text-align: center;
}

/* Personas and presets */
.preset-page-shell {
  width: min(100% - 40px, 1240px);
  padding-top: 34px;
}

.preset-page-header {
  padding-bottom: 22px;
}

.preset-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.preset-back-link:hover {
  color: var(--text);
}

.preset-tabs,
.profile-tabs {
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.preset-tab,
.profile-tab {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 750;
}

.preset-tab::after,
.profile-tab::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
}

.preset-tab:hover,
.preset-tab.is-active,
.profile-tab:hover,
.profile-tab.is-active {
  color: var(--text);
}

.preset-tab.is-active::after,
.profile-tab.is-active::after {
  background: var(--primary);
}

.preset-panel,
.profile-panel {
  padding-top: 28px;
}

.preset-panel[hidden],
.profile-panel[hidden] {
  display: none;
}

.preset-panel-heading,
.profile-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}

.preset-panel-heading h2,
.profile-panel-heading h2 {
  margin: 0;
}

.privacy-boundary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #c7c2bc;
}

.privacy-boundary > svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--accent);
}

.privacy-boundary strong,
.privacy-boundary p {
  display: block;
}

.privacy-boundary p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.privacy-boundary-market {
  margin-top: 18px;
}

.persona-card-grid,
.preset-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.persona-card,
.preset-card,
.persona-create-tile {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.persona-card.is-default {
  border-color: rgba(168, 85, 247, 0.48);
}

.persona-card-topline,
.persona-name-row,
.persona-card-actions,
.preset-card-heading,
.preset-card-footer,
.preset-author {
  display: flex;
  align-items: center;
}

.persona-card-topline,
.persona-card-actions,
.preset-card-heading,
.preset-card-footer {
  justify-content: space-between;
  gap: 12px;
}

.persona-avatar,
.preset-author-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 850;
}

.persona-avatar {
  width: 44px;
  height: 44px;
  color: #fff;
}

.persona-avatar.avatar-coral {
  background: #82473e;
}

.persona-avatar.avatar-mint,
.preset-author-avatar.avatar-blue {
  background: #28594f;
}

.preset-author-avatar.avatar-gold {
  background: #725f35;
}

.preset-author-avatar.avatar-violet {
  background: #5a426f;
}

.persona-card-copy {
  margin-top: 16px;
}

.persona-name-row {
  gap: 9px;
}

.persona-name-row h3,
.preset-card h3 {
  margin: 0;
  font-size: 17px;
}

.persona-card-copy > p,
.preset-card > p {
  display: -webkit-box;
  min-height: 42px;
  margin: 8px 0 14px;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.default-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 800;
}

.persona-details {
  display: flex;
  gap: 24px;
  margin: 0;
}

.persona-details div {
  display: grid;
  gap: 2px;
}

.persona-details dt {
  color: #777378;
  font-size: 10px;
  text-transform: uppercase;
}

.persona-details dd {
  margin: 0;
  font-size: 12px;
}

.persona-card-actions {
  margin-top: 16px;
}

.persona-create-tile {
  min-height: 226px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.persona-create-tile > svg {
  width: 28px;
  height: 28px;
}

.persona-create-tile strong {
  color: var(--text);
}

.persona-create-tile span {
  max-width: 280px;
  font-size: 12px;
}

.preset-card {
  position: relative;
  display: grid;
  align-content: start;
}

.preset-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--primary);
}

.preset-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.preset-tag-row span {
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #aaa6a1;
  font-size: 10px;
  font-weight: 700;
}

.preset-card-footer {
  align-self: end;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #817d82;
  font-size: 11px;
}

.preset-market-filters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
}

.preset-market-filters .filter-chips {
  justify-content: flex-end;
  margin: 5px 0 0;
}

.preset-author {
  gap: 7px;
  margin: 10px 0 2px;
  color: #aaa6a1;
  font-size: 11px;
}

.preset-author-avatar {
  width: 23px;
  height: 23px;
  color: #fff;
  font-size: 9px;
}

.preset-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Rewards */
.rewards-page {
  width: min(100% - 40px, 1120px);
  padding-top: 26px;
}

.rewards-summary {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(420px, 1.2fr);
  align-items: center;
  gap: 30px;
  padding: 19px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rewards-balance-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rewards-summary-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(216, 181, 116, 0.12);
  color: var(--gold);
}

.rewards-summary-label,
.rewards-balance-value {
  display: block;
}

.rewards-summary-label {
  color: var(--muted);
  font-size: 11px;
}

.rewards-balance-value {
  margin-top: 2px;
  font-size: 22px;
}

.rewards-summary-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.rewards-summary-stats div {
  padding: 2px 20px;
  border-left: 1px solid var(--line);
}

.rewards-summary-stats dt {
  color: var(--muted);
  font-size: 11px;
}

.rewards-summary-stats dd {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 800;
}

.reward-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.reward-filter .chip {
  flex: 0 0 auto;
}

.task-panel[hidden] {
  display: none;
}

.task-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.task-panel-heading h2 {
  margin: 0;
  font-size: 20px;
}

.task-panel-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.task-panel-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8f8b87;
  font-size: 11px;
}

.task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.task-card {
  min-width: 0;
  min-height: 164px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 10px 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.task-card.is-claimable {
  border-color: var(--primary-border);
}

.task-card.is-completed {
  opacity: 0.72;
}

.task-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--primary);
}

.task-copy {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
}

.task-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.task-title-row h3 {
  margin: 0;
  font-size: 15px;
}

.task-copy > p {
  min-height: 38px;
  margin: 6px 0 11px;
  color: var(--muted);
  font-size: 12px;
}

.task-status {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #96918c;
  font-size: 9px;
  font-weight: 800;
}

.task-status.status-ready {
  border-color: var(--primary-border);
  color: #ffafd4;
}

.task-status.status-completed {
  border-color: rgba(120, 200, 182, 0.34);
  color: #9cd7ca;
}

.task-status.status-limited {
  border-color: rgba(216, 181, 116, 0.4);
  color: #e5c589;
}

.task-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-progress {
  width: min(180px, 100%);
  height: 4px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #343438;
  accent-color: var(--primary);
}

.task-progress::-webkit-progress-bar {
  background: #343438;
}

.task-progress::-webkit-progress-value {
  background: var(--primary);
}

.task-progress-row > span {
  flex: 0 0 auto;
  color: #858086;
  font-size: 10px;
}

.task-reward {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  color: var(--gold);
  font-size: 13px;
}

.task-reward svg {
  width: 14px;
  height: 14px;
}

.task-action {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  min-width: 82px;
}

.rewards-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 20px 0 0;
  color: #777378;
  font-size: 11px;
}

/* Me and creator studio */
.profile-page {
  width: min(100% - 40px, 1260px);
  padding-top: 34px;
}

.profile-summary {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #74483f;
  color: #fff5f1;
  font-family: Georgia, serif;
  font-size: 22px;
}

.profile-name-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-name-row h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
}

.profile-handle {
  color: #858086;
  font-size: 12px;
}

.profile-identity > p {
  margin: 4px 0 7px;
  color: var(--muted);
  font-size: 13px;
}

.profile-stats {
  display: flex;
  gap: 18px;
  margin: 0;
}

.profile-stats div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.profile-stats dt {
  color: #777378;
  font-size: 10px;
}

.profile-stats dd {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
}

.profile-summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-toolbar {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}

.profile-tabs {
  flex: 1 1 auto;
}

.create-menu-wrap {
  position: relative;
  z-index: 20;
  padding-bottom: 6px;
}

.button-chevron {
  width: 14px;
  height: 14px;
}

.create-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: min(320px, calc(100vw - 30px));
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-3);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
}

.create-menu[hidden] {
  display: none;
}

.create-menu button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.create-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.create-menu button > svg {
  color: var(--primary);
}

.create-menu strong,
.create-menu small {
  display: block;
}

.create-menu small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.profile-panel-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.profile-visibility-key,
.profile-visibility-key span {
  display: flex;
  align-items: center;
}

.profile-visibility-key {
  gap: 12px;
  color: #858086;
  font-size: 10px;
}

.profile-visibility-key span {
  gap: 4px;
}

.profile-visibility-key svg {
  width: 12px;
  height: 12px;
}

.profile-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.profile-filter-row .chip {
  flex: 0 0 auto;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.profile-asset-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.profile-asset-card[hidden] {
  display: none;
}

.profile-asset-media,
.conversation-asset-preview,
.audio-asset-preview {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
}

.profile-asset-media > img,
.profile-asset-media > video,
.audio-asset-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-asset-media > .visibility-badge,
.conversation-asset-preview > .visibility-badge,
.audio-asset-preview > .visibility-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
}

.profile-asset-body {
  position: relative;
  min-height: 118px;
  padding: 12px 42px 13px 12px;
}

.asset-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #817d82;
  font-size: 10px;
}

.asset-type-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.asset-type-row svg {
  width: 12px;
  height: 12px;
}

.profile-asset-body h3 {
  margin: 8px 0 3px;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-asset-body p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.asset-more-button {
  position: absolute;
  right: 4px;
  bottom: 8px;
}

.conversation-asset-preview {
  display: grid;
  align-content: center;
  padding: 22px;
  background: #181719;
}

.conversation-asset-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.conversation-asset-avatars img,
.conversation-asset-avatars span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #181719;
  border-radius: 50%;
  object-fit: cover;
}

.conversation-asset-avatars span {
  margin-left: -9px;
  background: #74483f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.conversation-asset-preview blockquote {
  margin: 0;
  color: #ded9d3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
}

.asset-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: rgba(8, 8, 9, 0.72);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.asset-duration {
  position: absolute;
  right: 9px;
  bottom: 9px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(8, 8, 9, 0.8);
  color: #eee;
  font-size: 10px;
}

.project-health {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(8, 8, 9, 0.82);
  color: #d3cec8;
  font-size: 9px;
  font-weight: 750;
}

.project-health.is-ready {
  color: #9fdbce;
}

.asset-edit-button {
  margin-top: 11px;
}

.studio-usage {
  text-align: right;
}

.studio-usage span,
.studio-usage strong {
  display: block;
}

.studio-usage span {
  color: var(--muted);
  font-size: 10px;
}

.studio-usage strong {
  margin-top: 2px;
  color: var(--gold);
  font-size: 13px;
}

.profile-draft-placeholder {
  display: grid;
  place-items: center;
  color: #777378;
}

.profile-draft-placeholder > svg {
  width: 54px;
  height: 54px;
}

.character-studio-heading,
.dna-list-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.character-studio-heading {
  padding: 26px 0 20px;
}

.character-studio-heading h2,
.dna-list-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
}

.character-studio-heading > div > p:last-child,
.dna-list-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.character-model-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 42px minmax(0, 0.95fr) minmax(0, 0.95fr);
  gap: 12px;
  margin-bottom: 34px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.character-model-map article {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.character-model-map article > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.character-model-map .character-model-core {
  border-color: var(--primary-border);
  background: linear-gradient(135deg, rgba(255, 77, 166, 0.1), rgba(168, 85, 247, 0.08));
}

.character-model-map strong,
.character-model-map p {
  display: block;
  margin: 0;
}

.character-model-map p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.character-model-line {
  position: relative;
}

.character-model-line::before,
.character-model-line::after {
  content: "";
  position: absolute;
  background: var(--primary-border);
}

.character-model-line::before {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.character-model-line::after {
  top: 25%;
  right: 0;
  bottom: 25%;
  width: 1px;
}

.dna-list-heading {
  margin-bottom: 14px;
}

.dna-list-heading h3 {
  font-size: 23px;
}

.dna-project-list {
  display: grid;
  gap: 16px;
}

.dna-project-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.dna-character-summary {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.dna-character-summary > img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  object-fit: cover;
  object-position: 50% 18%;
}

.dna-character-summary h3 {
  margin: 7px 0 1px;
  font-size: 20px;
}

.dna-character-summary p,
.dna-character-summary small {
  margin: 0;
  color: var(--muted);
}

.dna-experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.dna-experience {
  min-width: 0;
  padding: 17px;
  background: var(--bg);
}

.dna-experience-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.dna-experience-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--accent-text);
}

.dna-experience-head small,
.dna-experience-head strong {
  display: block;
}

.dna-experience-head small {
  color: var(--muted);
  font-size: 9px;
}

.dna-experience-head b {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 9px;
}

.dna-experience.is-live .dna-experience-head b {
  background: rgba(120, 200, 182, 0.12);
  color: var(--success-text);
}

.dna-experience > p {
  min-height: 42px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
}

.dna-experience dl {
  display: flex;
  gap: 20px;
  margin: 0 0 14px;
}

.dna-experience dl div {
  display: grid;
}

.dna-experience dt {
  color: var(--muted);
  font-size: 9px;
}

.dna-experience dd {
  margin: 1px 0 0;
  font-size: 11px;
  font-weight: 750;
}

.dna-experience-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.dna-experience.is-empty {
  background: rgba(20, 18, 26, 0.75);
}

.dna-progress {
  height: 4px;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.dna-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

body.dna-studio-open {
  overflow: hidden;
}

.dna-studio-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 7, 11, 0.82);
  backdrop-filter: blur(8px);
}

.dna-studio-dialog {
  width: min(1040px, 100%);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54);
}

.dna-studio-form {
  max-height: calc(100dvh - 44px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.dna-studio-header,
.dna-studio-footer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}

.dna-studio-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.dna-studio-header h2,
.dna-studio-header p {
  margin: 0;
}

.dna-studio-header h2 {
  margin-top: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
}

.dna-studio-header #dna-studio-description {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.dna-studio-progress-wrap {
  padding: 13px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.dna-studio-progress-copy {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.dna-studio-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.dna-studio-progress > span {
  display: block;
  width: 33.333%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 180ms ease;
}

.dna-studio-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.dna-studio-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.dna-studio-steps li > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.dna-studio-steps strong,
.dna-studio-steps small {
  display: block;
}

.dna-studio-steps strong {
  color: inherit;
  font-size: 11px;
}

.dna-studio-steps small {
  font-size: 9px;
}

.dna-studio-steps li.is-active,
.dna-studio-steps li.is-complete {
  color: var(--text);
}

.dna-studio-steps li.is-active > span,
.dna-studio-steps li.is-complete > span {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.dna-studio-body {
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.dna-panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dna-panel-heading h3,
.dna-panel-heading p {
  margin: 0;
}

.dna-panel-heading h3 {
  font-size: 18px;
}

.dna-panel-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.dna-panel-icon,
.dna-review-avatar,
.dna-character-avatar-fallback {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-soft), rgba(168, 85, 247, 0.12));
  color: var(--primary);
}

.dna-panel-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 9px;
}

.dna-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dna-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.dna-field-wide {
  grid-column: 1 / -1;
}

.dna-field > span {
  font-size: 11px;
  font-weight: 750;
}

.dna-field b {
  margin-left: 4px;
  color: var(--primary);
  font-size: 8px;
  text-transform: uppercase;
}

.dna-field input,
.dna-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.dna-field input {
  height: 42px;
  padding: 0 12px;
}

.dna-field textarea {
  min-height: 82px;
  padding: 11px 12px;
  resize: vertical;
}

.dna-field input[aria-invalid="true"],
.dna-field textarea[aria-invalid="true"] {
  border-color: #e66a84;
  box-shadow: 0 0 0 2px rgba(230, 106, 132, 0.12);
}

.dna-field > small {
  color: var(--muted);
  font-size: 9px;
}

.dna-experience-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.dna-experience-options label {
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  cursor: pointer;
}

.dna-experience-options input {
  position: absolute;
  opacity: 0;
}

.dna-experience-options label:has(input:checked) {
  border-color: var(--primary-border);
  background: linear-gradient(145deg, var(--primary-soft), rgba(168, 85, 247, 0.07));
}

.dna-option-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--primary);
}

.dna-experience-options strong,
.dna-experience-options small,
.dna-experience-options em {
  display: block;
}

.dna-experience-options strong {
  font-size: 14px;
}

.dna-experience-options small {
  margin-top: 3px;
  color: var(--primary);
  font-size: 10px;
}

.dna-experience-options em {
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.dna-option-check {
  position: absolute;
  top: 14px;
  right: 14px;
  color: transparent;
}

.dna-experience-options label:has(input:checked) .dna-option-check {
  color: var(--primary);
}

.dna-shared-note {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.dna-shared-note > svg {
  flex: 0 0 auto;
  color: var(--primary);
}

.dna-shared-note strong,
.dna-shared-note p {
  margin: 0;
  font-size: 10px;
}

.dna-shared-note p {
  margin-top: 3px;
  color: var(--muted);
}

.dna-config-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
  gap: 18px;
}

.dna-config-stack {
  display: grid;
  gap: 14px;
}

.dna-config-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.dna-config-card legend {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
}

.dna-config-card legend > span:first-child {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary);
}

.dna-config-card legend strong,
.dna-config-card legend small {
  display: block;
}

.dna-config-card legend small {
  color: var(--muted);
  font-size: 9px;
}

.dna-config-card .dna-field:nth-of-type(2) {
  grid-column: 1 / -1;
}

.dna-toggle-field {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 8px;
}

.dna-toggle-field strong,
.dna-toggle-field small {
  display: block;
}

.dna-toggle-field small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.dna-toggle-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.dna-review-card {
  position: sticky;
  top: 0;
  padding: 18px;
  border: 1px solid var(--primary-border);
  border-radius: 9px;
  background: linear-gradient(160deg, var(--primary-soft), var(--bg) 48%);
  text-align: center;
}

.dna-review-label {
  color: var(--primary);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dna-review-avatar {
  width: 62px;
  height: 62px;
  margin: 13px auto 9px;
  border-radius: 50%;
  font-weight: 850;
}

.dna-review-card h4,
.dna-review-card > p {
  margin: 0;
}

.dna-review-card > p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.dna-review-card dl {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  text-align: left;
}

.dna-review-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
}

.dna-review-card dt {
  color: var(--muted);
}

.dna-review-card dd {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.dna-review-output {
  display: grid;
  gap: 6px;
}

.dna-review-output span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 9px;
  text-align: left;
}

.dna-review-card .dna-review-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 13px;
  text-align: left;
}

.dna-studio-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.dna-studio-footer > p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.dna-character-avatar-fallback {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 850;
}

.dna-project-card.is-new {
  border-color: var(--primary-border);
}

@media (max-width: 760px) {
  .dna-studio-overlay {
    align-items: stretch;
    padding: 0;
  }

  .dna-studio-dialog,
  .dna-studio-form {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }

  .dna-studio-header,
  .dna-studio-footer {
    padding: 14px 16px;
  }

  .dna-studio-header #dna-studio-description,
  .dna-studio-steps small,
  .dna-studio-footer > p {
    display: none;
  }

  .dna-studio-progress-wrap,
  .dna-studio-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .dna-studio-steps {
    gap: 6px;
  }

  .dna-studio-steps li {
    gap: 5px;
  }

  .dna-form-grid,
  .dna-experience-options,
  .dna-config-layout,
  .dna-config-card {
    grid-template-columns: 1fr;
  }

  .dna-experience-options label {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dna-experience-options label > em {
    grid-column: 2;
  }

  .dna-config-card .dna-field:nth-of-type(2) {
    grid-column: auto;
  }

  .dna-review-card {
    position: static;
  }

  .dna-studio-footer .button {
    flex: 1 1 0;
  }

  .dna-character-avatar-fallback {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 1279px) {
  .masonry-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1040px) {
  .task-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 959px) {
  .masonry-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .preset-market-filters {
    grid-template-columns: 1fr;
  }

  .preset-market-filters .filter-chips {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .rewards-summary {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rewards-summary-stats div:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .chat-hub-header,
  .preset-panel-heading,
  .profile-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-hub-actions {
    width: 100%;
  }

  .chat-hub-actions .button {
    flex: 1 1 0;
  }

  .persona-card-grid,
  .preset-card-grid {
    grid-template-columns: 1fr;
  }

  .profile-summary {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .profile-avatar {
    width: 60px;
    height: 60px;
  }

  .profile-summary-actions {
    grid-column: 1 / -1;
  }

  .profile-toolbar {
    align-items: center;
  }

  .profile-tabs {
    gap: 20px;
  }

  .profile-tab {
    min-height: 46px;
  }

  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .character-model-map {
    grid-template-columns: 1fr 1fr;
  }

  .character-model-core,
  .character-model-line {
    grid-column: 1 / -1;
  }

  .character-model-line {
    height: 18px;
  }

  .character-model-line::before {
    top: 0;
    right: 50%;
    bottom: 0;
    left: auto;
    width: 1px;
    height: auto;
  }

  .character-model-line::after {
    top: auto;
    right: 25%;
    bottom: 0;
    left: 25%;
    width: auto;
    height: 1px;
  }
}

@media (max-width: 679px) {
  .chat-main,
  .chat-toolbar,
  .message-stream {
    max-width: 100vw;
  }

  .chat-tools {
    max-width: 98px;
    gap: 0;
    overflow: hidden;
  }

  .chat-tools .icon-button {
    width: 32px;
    height: 36px;
    flex-basis: 32px;
  }

  .chat-tools [data-toast="Branch preview opened"] {
    display: none;
  }

  .chat-tools .icon-button[data-tooltip]::after,
  .message-actions .icon-button[data-tooltip]::after,
  .chat-toolbar .icon-button[data-tooltip]::after {
    display: none;
  }

  .message-actions {
    max-width: 100%;
    overflow-x: auto;
  }

  .masonry-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .masonry-wall .wall-overlay {
    padding: 56px 9px 9px;
  }

  .masonry-wall .wall-overlay h2 {
    font-size: 17px;
  }

  .masonry-wall .wall-overlay p {
    font-size: 10px;
  }

  .masonry-wall .wall-stats {
    gap: 8px;
    margin-top: 6px;
    font-size: 9px;
  }

  .masonry-wall .wall-badge {
    min-height: 21px;
    font-size: 8px;
  }

  .pose-tile {
    flex-basis: min(74vw, 260px);
  }

  .chats-page-shell,
  .preset-page-shell,
  .rewards-page,
  .profile-page {
    width: calc(100% - 22px);
    padding-top: 22px;
  }

  .page-title,
  .discover-title {
    font-size: 32px;
  }

  .chat-hub-header .section-kicker {
    max-width: 310px;
  }

  .chat-hub-actions {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .chat-hub-actions .button {
    padding: 0 12px;
    font-size: 12px;
  }

  .chat-hub-controls {
    margin-top: 20px;
  }

  .chat-inbox {
    margin: 12px -11px 0;
  }

  .chat-group-heading {
    padding: 0 11px;
  }

  .chat-inbox-row {
    min-height: 78px;
    grid-template-columns: 50px minmax(0, 1fr) 52px;
    gap: 10px;
    padding: 10px 11px;
  }

  .chat-row-avatar,
  .chat-row-avatar-single > img,
  .chat-initial-avatar {
    width: 48px;
    height: 48px;
  }

  .chat-row-title {
    display: block;
  }

  .chat-type-label {
    margin-left: 6px;
  }

  .chat-row-context {
    display: none;
  }

  .chat-row-meta {
    min-width: 50px;
  }

  .preset-tabs {
    gap: 22px;
  }

  .preset-panel-heading .button {
    width: 100%;
  }

  .rewards-heading {
    align-items: flex-start;
  }

  .rewards-heading .section-kicker {
    max-width: 270px;
  }

  .rewards-summary-stats {
    overflow-x: auto;
  }

  .rewards-summary-stats div {
    min-width: 105px;
    padding: 2px 12px;
  }

  .task-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .task-card {
    min-height: 176px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 14px;
  }

  .task-icon {
    width: 38px;
    height: 38px;
  }

  .task-reward {
    align-self: start;
  }

  .profile-toolbar {
    margin-top: 10px;
  }

  .profile-tabs {
    margin-right: -10px;
  }

  .profile-tab span {
    display: none;
  }

  .profile-visibility-key {
    display: none;
  }

  .profile-asset-body {
    min-height: 110px;
    padding: 10px 36px 11px 10px;
  }

  .profile-asset-body h3 {
    font-size: 13px;
  }

  .conversation-asset-preview {
    padding: 14px;
  }

  .conversation-asset-preview blockquote {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-asset-media,
  .conversation-asset-preview,
  .audio-asset-preview {
    aspect-ratio: 4 / 3;
  }

  .profile-summary {
    align-items: start;
  }

  .profile-name-row h1 {
    font-size: 24px;
  }

  .profile-stats {
    gap: 10px;
    flex-wrap: wrap;
  }

  .create-menu-wrap .button {
    padding: 0 12px;
  }
}

/* Discover modes and LovRaw brand refresh */
.discover-page {
  padding-top: 28px;
}

.discover-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 4px;
}

.discover-heading-copy {
  min-width: 0;
}

.discover-mode-description {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.discover-mode-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.discover-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.discover-mode-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.discover-mode-button:hover {
  color: var(--text);
}

.discover-mode-button.is-active {
  background: var(--primary);
  color: #fff;
}

.discover-mode-button svg {
  width: 15px;
  height: 15px;
}

.discover-filter-sets {
  min-width: 0;
}

.discover-filter-set {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 12px 0 24px;
  scrollbar-width: none;
}

.discover-filter-set::-webkit-scrollbar {
  display: none;
}

.discover-filter-set[hidden] {
  display: none;
}

.discover-filter-set .chip {
  flex: 0 0 auto;
}

[data-discover-mode="companions"] .discovery-toolbar {
  grid-template-columns: 204px minmax(260px, 1fr) auto;
  align-items: center;
}

.discover-card-sort[hidden] {
  display: none;
}

.discover-select {
  position: relative;
  min-width: 126px;
  height: 44px;
  display: block;
  color: var(--muted);
}

.discover-select[hidden],
.companion-attribute-filters[hidden] {
  display: none;
}

.discover-select select {
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 0 32px 0 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.discover-select:hover select {
  border-color: rgba(255, 255, 255, 0.25);
  background: var(--surface-2);
}

.discover-select > svg:not(.discover-select-chevron) {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.discover-select .discover-select-chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.discover-period-select {
  width: 204px;
  min-width: 204px;
}

.companion-attribute-filters {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.companion-attribute-filters .discover-select {
  width: 142px;
  flex: 0 0 142px;
}

[data-discover-mode="companions"] .wall-stats {
  gap: 8px;
}

[data-discover-mode="companions"] .wall-overlay h2 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 800;
}

[data-discover-mode="companions"] .wall-badge {
  border-color: rgba(168, 85, 247, 0.52);
  color: #e6ccff;
}

[data-discover-mode="companions"] .wall-creator {
  min-width: 0;
  overflow: hidden;
  color: #d8d2df;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-badge-premiere {
  border-color: rgba(255, 77, 166, 0.68);
  color: #ffb8da;
}

.profile-presets-link {
  flex: 0 0 auto;
  min-height: 40px;
}

.profile-avatar,
.conversation-asset-avatars span {
  background: #642a54;
}

.task-card.is-claimable {
  border-color: var(--primary-border);
}

.task-status.status-ready {
  border-color: var(--primary-border);
  color: #ffafd4;
}

.task-status.status-completed,
.project-health.is-ready,
.visibility-badge.is-public {
  color: var(--success-text);
}

@media (max-width: 900px) {
  .discover-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .discover-mode-actions {
    width: 100%;
  }

  .discover-mode-switch {
    flex: 1 1 auto;
  }

  .discover-mode-button {
    flex: 1 1 0;
  }

  .profile-toolbar {
    flex-wrap: wrap;
  }

  .profile-tabs {
    flex-basis: 100%;
  }

  [data-discover-mode="companions"] .discovery-toolbar {
    grid-template-columns: 204px minmax(240px, 1fr);
  }

  .companion-attribute-filters {
    grid-column: 1 / -1;
  }

  .companion-attribute-filters .discover-select {
    width: auto;
    flex: 1 1 0;
  }
}

@media (max-width: 679px) {
  .discover-page {
    padding-top: 18px;
  }

  .discover-heading-row {
    gap: 16px;
    padding-top: 0;
  }

  .discover-mode-actions {
    align-items: stretch;
  }

  .discover-mode-actions > .button {
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0;
  }

  .discover-mode-button {
    min-height: 42px;
    padding: 0 9px;
    font-size: 11px;
  }

  .discover-mode-description {
    max-width: 340px;
    font-size: 12px;
  }

  [data-discover-mode="companions"] .wall-stats {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  [data-discover-mode="companions"] .wall-creator {
    flex-basis: 100%;
  }

  .discovery-toolbar {
    margin-top: 18px;
  }

  [data-discover-mode="companions"] .discovery-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .discover-period-select,
  .companion-attribute-filters {
    width: 100%;
  }

  .companion-attribute-filters {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .companion-attribute-filters .discover-select {
    width: auto;
    min-width: 0;
    flex: none;
  }

  .companion-attribute-filters .discover-select > svg:not(.discover-select-chevron) {
    display: none;
  }

  .companion-attribute-filters .discover-select select {
    padding-right: 23px;
    padding-left: 10px;
    font-size: 11px;
  }

  .companion-attribute-filters .discover-select .discover-select-chevron {
    right: 7px;
  }

  .profile-presets-link {
    flex: 1 1 auto;
    font-size: 12px;
  }

  .character-studio-heading,
  .dna-list-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .character-studio-heading .button {
    width: 100%;
  }

  .character-model-map {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .character-model-core,
  .character-model-line {
    grid-column: auto;
  }

  .character-model-line {
    display: none;
  }

  .dna-character-summary {
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: start;
  }

  .dna-character-summary > img {
    width: 70px;
    height: 70px;
  }

  .dna-character-summary > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dna-experience-grid {
    grid-template-columns: 1fr;
  }
}

/* Character card summary and public conversation shares */
.story-hero-topbar {
  position: absolute;
  top: 22px;
  right: max(22px, calc((100% - 1400px) / 2 + 72px));
  left: max(22px, calc((100% - 1400px) / 2 + 72px));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.story-back-link,
.story-hero-status {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: #e8e4df;
  font-size: 12px;
  font-weight: 750;
}

.story-hero .story-back-link,
.story-hero-status {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(8, 8, 10, 0.7);
  backdrop-filter: blur(12px);
}

.story-back-link {
  pointer-events: auto;
}

.story-back-link:hover {
  border-color: var(--primary-border);
  color: #fff;
}

.story-hero-status {
  color: #cbc6d0;
}

.story-hero-status svg {
  color: var(--primary);
}

.story-summary-label {
  align-self: center;
}

.story-summary-label .eyebrow {
  margin: 0;
}

.story-card-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.story-card-field {
  min-width: 0;
  padding: 17px 0 18px;
  border-bottom: 1px solid var(--line);
}

.story-card-field-wide {
  grid-column: 1 / -1;
}

.story-card-field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.story-card-field strong {
  display: block;
  color: #e7e2dc;
  font-size: 13px;
  line-height: 1.48;
}

.story-card-field .story-overview-description {
  max-width: 850px;
  margin: 0;
}

.story-card-tags {
  flex-wrap: wrap;
  margin: 0;
}

.shared-scene-page {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
  padding: 22px 0 110px;
}

.shared-scene-topbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.shared-scene-top-actions,
.shared-scene-actions,
.shared-message-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shared-scene-layout {
  display: grid;
  grid-template-columns: minmax(0, 790px) minmax(260px, 1fr);
  gap: 48px;
  align-items: start;
}

.shared-scene-main {
  min-width: 0;
}

.shared-scene-header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.shared-scene-author-row,
.shared-scene-author,
.shared-message-label,
.shared-creator-card {
  display: flex;
  align-items: center;
}

.shared-scene-author-row {
  gap: 11px;
}

.shared-scene-avatar,
.shared-message-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #151419;
  font-size: 10px;
  font-weight: 850;
}

.shared-scene-avatar {
  width: 44px;
  height: 44px;
}

.shared-message-avatar {
  width: 30px;
  height: 30px;
}

.shared-scene-author-row .eyebrow {
  margin: 0 0 2px;
}

.shared-scene-author {
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.shared-scene-author strong {
  color: #ded9d3;
}

.shared-scene-header h1 {
  max-width: 760px;
  margin: 18px 0 8px;
  overflow-wrap: anywhere;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  font-weight: 500;
}

.shared-scene-subtitle {
  margin: 0;
  color: var(--muted);
}

.shared-scene-actions {
  margin-top: 20px;
}

.shared-scene-actions .story-social-button {
  border-color: var(--line);
  background: var(--surface);
}

.shared-scene-warning,
.shared-aside-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.shared-scene-warning {
  margin: 18px 0;
  padding: 11px 12px;
  border-left: 2px solid var(--success);
  background: rgba(120, 200, 182, 0.06);
}

.shared-scene-warning svg {
  flex: 0 0 auto;
  color: var(--success);
}

.shared-earlier {
  margin: 26px 0 30px;
  text-align: center;
}

.shared-earlier > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.shared-earlier-content {
  max-width: 650px;
  margin: 16px auto 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: #c7c2cb;
  text-align: left;
}

.shared-earlier-content[hidden] {
  display: none;
}

.shared-earlier-content p {
  margin: 0;
}

.shared-earlier-content p + p {
  margin-top: 10px;
}

.shared-inline-label {
  margin-right: 5px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.shared-transcript {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.shared-message {
  min-width: 0;
}

.shared-message-label {
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
}

.shared-message-label strong {
  color: #ded9d3;
  font-size: 12px;
}

.shared-message-label span:last-child {
  margin-left: auto;
}

.shared-message-bubble {
  position: relative;
  padding: 20px 20px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: #ddd8d2;
  font-size: 16px;
  line-height: 1.72;
}

.shared-message-user .shared-message-bubble {
  border-color: rgba(255, 77, 166, 0.28);
  background: rgba(255, 77, 166, 0.055);
}

.shared-message-bubble p {
  margin: 0;
}

.shared-message-bubble p + p {
  margin-top: 12px;
}

.shared-message-tools {
  justify-content: flex-end;
  min-height: 34px;
  margin-top: 10px;
  opacity: 0.58;
}

.shared-message-bubble:hover .shared-message-tools,
.shared-message-bubble:focus-within .shared-message-tools {
  opacity: 1;
}

.shared-message-tools .icon-button {
  width: 32px;
  height: 32px;
}

.shared-message-tools .is-active {
  color: var(--primary);
}

.shared-scene-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.shared-scene-end::before,
.shared-scene-end::after {
  content: "";
  width: 72px;
  height: 1px;
  background: var(--line);
}

.shared-scene-continue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 28px 0 44px;
  padding: 22px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
}

.shared-scene-continue h2 {
  margin: 2px 0 5px;
  font-size: 21px;
}

.shared-scene-continue p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.shared-comments {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

.shared-comments .comment-composer {
  margin-top: 22px;
}

.shared-scene-aside {
  position: sticky;
  top: calc(var(--header-height) + 22px);
  display: grid;
  gap: 14px;
}

.shared-context-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shared-context-card > img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 20%;
}

.shared-context-body {
  padding: 16px;
}

.shared-context-body h2 {
  margin: 2px 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
}

.shared-context-body > p:not(.eyebrow) {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.shared-creator-card {
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.shared-creator-card strong,
.shared-creator-card small,
.shared-creator-card .creator-label {
  display: block;
}

.shared-creator-card strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-creator-card small {
  color: var(--muted);
  font-size: 10px;
}

.shared-creator-card > button {
  margin-left: auto;
}

.shared-aside-note {
  padding: 13px;
  border-top: 1px solid var(--line);
}

.shared-aside-note svg {
  flex: 0 0 auto;
  color: var(--gold);
}

.shared-aside-note strong,
.shared-aside-note p {
  display: block;
  margin: 0;
}

.shared-aside-note strong {
  color: #e5dfd7;
}

.shared-aside-note p {
  margin-top: 3px;
}

.shared-scene-mobile-actions {
  display: none;
}

@media (max-width: 900px) {
  .shared-scene-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .shared-scene-aside {
    position: static;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  }

  .shared-aside-note {
    display: none;
  }
}

@media (max-width: 820px) {
  .story-hero-topbar {
    top: 16px;
    right: 16px;
    left: 16px;
  }

  .story-card-fields {
    grid-template-columns: 1fr;
  }

  .story-card-field-wide {
    grid-column: auto;
  }

  .shared-scene-page {
    width: min(100% - 28px, 790px);
  }
}

@media (max-width: 540px) {
  body[data-page="conversation"] {
    padding-bottom: 76px;
  }

  .story-hero-status {
    display: none;
  }

  .story-hero-topbar {
    right: 12px;
    left: 12px;
  }

  .story-hero .story-back-link span {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .story-card-field {
    padding: 14px 0;
  }

  .story-card-field .story-overview-description {
    font-size: 14px;
  }

  .shared-scene-page {
    width: min(100% - 22px, 790px);
    padding-top: 12px;
    padding-bottom: 72px;
  }

  .shared-scene-topbar {
    margin-bottom: 14px;
  }

  .shared-scene-topbar .story-back-link {
    min-width: 0;
    padding: 0 9px;
  }

  .shared-scene-topbar .story-back-link span {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shared-scene-top-actions .button {
    width: 38px;
    min-width: 38px;
    padding: 0;
    font-size: 0;
  }

  .shared-scene-header h1 {
    font-size: 34px;
  }

  .shared-scene-actions {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .shared-message-bubble {
    padding: 16px 15px 11px;
    font-size: 15px;
  }

  .shared-message-tools {
    opacity: 1;
  }

  .shared-scene-continue {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .shared-scene-continue .button {
    width: 100%;
  }

  .shared-scene-aside {
    grid-template-columns: 1fr;
  }

  .shared-context-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .shared-context-card > img {
    height: 100%;
    aspect-ratio: auto;
  }

  .shared-scene-mobile-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 65;
    height: 76px;
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 11px;
    border-top: 1px solid var(--line);
    background: rgba(20, 18, 26, 0.97);
    backdrop-filter: blur(16px);
  }

  .shared-scene-mobile-actions .button {
    min-width: 0;
    min-height: 54px;
  }
}

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