/* base.css */
/* LightSNS v01466 presentation adapter. Native controls keep their behavior. */
:root {
  --fs-background: oklch(0.972 0.003 260);
  --fs-surface: oklch(0.998 0.001 260);
  --fs-surface-muted: oklch(0.944 0.005 260);
  --fs-sidebar-surface: oklch(0.984 0.002 260);
  --fs-foreground: oklch(0.20 0.012 250);
  --fs-secondary: oklch(0.43 0.014 250);
  --fs-muted: oklch(0.53 0.014 250);
  --fs-border: oklch(0.916 0.005 260);
  --fs-accent: oklch(0.275 0.017 240);
  --fs-accent-hover: oklch(0.37 0.017 240);
  --fs-on-accent: oklch(0.997 0 0);
  --fs-hero-background: oklch(0.24 0.025 245);
  --fs-hero-foreground: oklch(0.99 0 0);
  --fs-hero-scrim: oklch(0.13 0.012 250 / 0.70);
  --fs-radius: var(--ls-radius-lg);
  --fs-radius-panel: var(--ls-radius-xl);
  --fs-radius-pill: var(--ls-radius-full);
  --fs-sidebar: 13.25rem;
  --fs-header: 4rem;
  background: var(--fs-background);
}
body.fs-skin {
  --ls-bg: var(--fs-background);
  --ls-bg-light: var(--fs-background);
  --ls-bg-hover: var(--fs-surface-muted);
  --ls-card-bg: var(--fs-surface);
  --ls-bg-white: var(--fs-surface);
  --ls-border: var(--fs-border);
  --ls-border-light: var(--fs-border);
  --ls-text: var(--fs-foreground);
  --ls-text-primary: var(--fs-foreground);
  --ls-text-secondary: var(--fs-secondary);
  --ls-text-muted: var(--fs-muted);
  --ls-primary: var(--fs-accent);
  --ls-primary-hover: var(--fs-accent-hover);
  --ls-primary-light: var(--fs-surface-muted);
  --ls-color-primary: var(--fs-accent);
  --ls-bg-2: var(--fs-surface-muted);
  --ls-primary-rgb: 35, 43, 49;
  --ls-width: min(100rem, calc(100% - 2.25rem));
  --ls-header-height: var(--fs-header);
  --ls-border-radius: var(--fs-radius);
  --ls-border-radius-btn: var(--fs-radius);
  --ls-border-radius-img: var(--fs-radius);
  --ls-border-radius-avatar: var(--fs-radius-pill);
  margin: 0;
  background: var(--fs-background);
  color: var(--fs-foreground);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
body.fs-design { padding: var(--fs-header) 0 0 var(--fs-sidebar); }
:root[data-fs-theme="dark"],
body.fs-skin[data-fs-theme="dark"] {
  --fs-background: oklch(0.19 0.006 260);
  --fs-surface: oklch(0.245 0.006 260);
  --fs-surface-muted: oklch(0.31 0.008 260);
  --fs-sidebar-surface: oklch(0.215 0.006 260);
  --fs-foreground: oklch(0.94 0.004 260);
  --fs-secondary: oklch(0.81 0.01 260);
  --fs-muted: oklch(0.70 0.01 260);
  --fs-border: oklch(0.35 0.008 260);
  --fs-accent: oklch(0.84 0.015 245);
  --fs-accent-hover: oklch(0.93 0.01 245);
  --fs-on-accent: oklch(0.20 0.006 260);
  --ls-primary-rgb: 198, 206, 212;
  color-scheme: dark;
}
.fs-design *, .fs-design *::before, .fs-design *::after { box-sizing: border-box; }
.fs-design :is(h1,h2,h3,h4) { letter-spacing: 0; overflow-wrap: anywhere; }
.fs-design :is(a,button,[role="button"]):focus-visible {
  outline: .125rem solid var(--fs-accent);
  outline-offset: .1875rem;
}
.fs-design .ls-header {
  position: fixed;
  inset: 0 0 auto var(--fs-sidebar);
  height: var(--fs-header);
  width: auto;
  background: var(--fs-background);
  box-shadow: none;
  border: 0;
  z-index: 100;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.fs-design .ls-header-inner {
  width: 100%;
  max-width: none;
  height: var(--fs-header);
  padding: .625rem .5625rem .625rem 1.25rem;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
.fs-design .ls-header-left {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--fs-sidebar);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 1rem 1rem 1.25rem;
  background: var(--fs-sidebar-surface);
  border-right: 1px solid var(--fs-border);
}
.fs-design .ls-logo {
  height: 5rem;
  min-height: 5rem;
  display: flex;
  align-items: center;
  gap: .6875rem;
  padding-inline: .3125rem;
}
.fs-design .ls-logo-icon {
  width: 2rem;
  height: 2.25rem;
  background: transparent !important;
  color: var(--fs-foreground);
  font-size: 2.125rem;
}
.fs-design .ls-logo-icon i { color: var(--fs-foreground); }
.fs-design .ls-logo-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fs-design[data-fs-theme="dark"] .ls-logo-icon img { filter: invert(1); }
.fs-design .ls-logo-text { font-size: 1.5rem; font-weight: 700; color: var(--fs-foreground) !important; }
.fs-design .ls-main-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  gap: .125rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.fs-design .ls-nav-item { width: 100%; flex-shrink: 0; }
.fs-design .ls-nav-item > a {
  width: 100%;
  height: 2.625rem;
  min-height: 2.625rem;
  padding: .625rem .875rem;
  border-radius: var(--fs-radius-panel);
  justify-content: flex-start;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fs-secondary);
}
.fs-design .ls-nav-icon { width: 1.125rem; height: 1.125rem; line-height: 1; flex-shrink: 0; font-size: 1.125rem; }
.fs-design .ls-nav-icon i { line-height: 1; }
.fs-design .ls-nav-item > a:is(:hover,[aria-current="page"]) {
  color: var(--fs-foreground);
  background: var(--fs-surface-muted);
}
.fs-design .ls-nav-item > a[aria-current="page"] { font-weight: 650; }
.fs-design .ls-nav-item:nth-child(8) { border-top: 1px solid var(--fs-border); margin-top: .5rem; padding-top: .5rem; }
.fs-design .ls-main-nav .ls-arrow { display: none; }
.fs-design .ls-header-right {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.fs-design .ls-search { flex: 1; margin-right: auto; width: auto; max-width: 50.25rem; min-width: 0; }
.fs-design .ls-search-trigger {
  width: 100%;
  height: 2.375rem;
  min-width: 0;
  justify-content: flex-start;
  gap: .625rem;
  padding: .625rem 1rem;
  border-radius: var(--fs-radius-panel);
  background: var(--fs-surface-muted);
  color: var(--fs-muted);
  font-size: .875rem;
}
.fs-design .ls-search-trigger > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-design .ls-search-trigger > i { color: var(--fs-foreground); flex-shrink: 0; font-size: 1.125rem; }
.fs-design .ls-header-right :is(.ls-icon-btn,.ls-user-trigger) {
  border-radius: var(--fs-radius-pill);
  color: var(--fs-foreground);
  background: transparent;
  flex-shrink: 0;
}
.fs-design .ls-header-right .ls-user-trigger { gap: 0; padding: .25rem; }
.fs-design .ls-user-trigger > .ri-arrow-down-s-line { display: none; }
.fs-design .ls-header-right .ls-avatar-sm { width: 2.125rem; height: 2.125rem; }
.fs-design .ls-header-right .ls-messages { display: none; }
.fs-design .ls-header-left > .ls-create { position: relative; flex-shrink: 0; margin: 1rem 0 1.5625rem; }
.fs-design .ls-create-btn {
  width: 100%;
  min-height: 2.5rem;
  justify-content: center;
  border: 0;
  border-radius: var(--fs-radius-panel);
  background: var(--fs-accent);
  color: var(--fs-on-accent);
  font-size: .9375rem;
}
.fs-design .ls-create-btn:hover { background: var(--fs-accent-hover); }
.fs-design .ls-header-left .ls-hd-dropdown-create {
  top: auto;
  bottom: 0;
  left: calc(100% + 1rem);
  right: auto;
}
.fs-design .ls-header-left .ls-hd-dropdown {
  max-width: min(24rem, calc(100vw - var(--fs-sidebar) - 2rem));
}
.fs-design .ls-hd-dropdown {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-panel);
  color: var(--fs-foreground);
}
.fs-side-account { flex-shrink: 0; min-height: 20.0625rem; padding-top: 1.25rem; border-top: 1px solid var(--fs-border); }
.fs-side-account .ls-user-header { padding: 0 .375rem; background: none; gap: .625rem; }
.fs-side-account .ls-avatar-xl { width: 2.625rem; height: 2.625rem; }
.fs-side-account .ls-user-name { font-size: .9375rem; }
.fs-side-account .ls-user-goto { display: none; }
.fs-side-account .ls-user-name font { color: var(--fs-foreground) !important; }
.fs-side-account .ls-user-meta { font-size: .75rem; }
.fs-side-account .ls-stats-grid { margin: 1.25rem 0 1rem; padding: 0; border: 0; background: none; gap: 0; }
.fs-side-account .ls-stat-box { padding: 0 .25rem; border-radius: 0; background: none; }
.fs-side-account .ls-stat-box + .ls-stat-box { border-left: 1px solid var(--fs-border); }
.fs-side-account .ls-stat-num { font-size: 1rem; color: var(--fs-foreground); }
.fs-side-account .ls-stat-label { font-size: .75rem; color: var(--fs-muted); }
.fs-side-account .fs-account-links { display: flex; flex-direction: column; gap: .25rem; }
.fs-side-account .fs-account-links a {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.5rem;
  padding: .5rem .875rem;
  font-size: .875rem;
  color: var(--fs-secondary);
  border-radius: var(--fs-radius);
}
.fs-side-account .fs-account-links a:hover { background: var(--fs-surface-muted); }
.fs-side-account .fs-account-links i { font-size: 1.125rem; }
.fs-side-guest { padding: 1rem .5rem; border-top: 1px solid var(--fs-border); }
.fs-side-guest a { color: var(--fs-foreground); font-weight: 600; }
.fs-design .ls-sns-page {
  width: min(100rem,calc(100% - 1.8125rem));
  max-width: 100rem;
  margin: 0 auto 2rem 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: 0 1.0625rem;
  align-items: start;
}
.fs-design .ls-sns-page > .ls-sns-main,
.fs-design .ls-sns-main > .ls-sns-modules { display: contents; }
.fs-design .ls-sns-modules > .ls-sns-html {
  grid-column: 1 / -1;
  grid-row: 1;
  background: none;
  padding: 0;
  margin: 0 0 1.1875rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.fs-design .ls-sns-html-body { padding: 0; }
.fs-design .ls-sns-page .ls-top-nav-wrap {
  grid-column: 1;
  grid-row: 2;
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: var(--fs-radius-panel) var(--fs-radius-panel) 0 0;
  background: var(--fs-surface);
  border-bottom: 1px solid var(--fs-border);
  display: flex;
  align-items: center;
  height: 3.1875rem;
  min-height: 3.1875rem;
}
.fs-design .ls-top-nav-wrap .ls-top-nav { flex: 1; min-width: 0; }
.fs-all-boards { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; padding: .75rem 1rem; color: var(--fs-muted); font-size: .875rem; }
.fs-design .ls-top-nav {
  display: flex;
  gap: 1.75rem;
  padding: 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-radius: inherit;
  background: none;
}
.fs-design .ls-top-nav-item {
  flex: 0 0 auto;
  padding: 1rem 0 .875rem;
  height: 3.1875rem;
  min-height: 0;
  color: var(--fs-secondary);
  border-radius: 0;
  background: none;
  font-size: 1rem;
}
.fs-design .ls-top-nav-icon { display: none; }
.fs-design .ls-top-nav-item.ls-active { font-weight: 650; color: var(--fs-foreground); background: none; }
.fs-design .ls-top-nav-item.ls-active::after { background: var(--fs-foreground); height: .125rem; bottom: .4375rem; }
.fs-design .ls-sns-main > .ls-post-list {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
  overflow: hidden;
  border-radius: 0 0 var(--fs-radius-panel) var(--fs-radius-panel);
  background: var(--fs-surface);
  gap: 0;
}
.fs-design .ls-sns-main > :is(.ls-load-more,.ls-loading,.ls-empty) { grid-column: 1; }
.fs-design .ls-sns-page > .ls-sidebar-right {
  grid-column: 2;
  grid-row: 2 / span 4;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  position: static;
}
.fs-design .ls-sns-page .ls-sidebar-wrap { position: static; width: 100%; }
.fs-hero {
  position: relative;
  width: 100%;
  min-height: 18.4375rem;
  background: var(--fs-hero-background);
  color: var(--fs-hero-foreground);
  border-radius: var(--fs-radius);
  overflow: hidden;
}
.fs-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.fs-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right,var(--fs-hero-scrim),transparent 65%); }
.fs-hero-copy { position: relative; z-index: 2; padding: 2rem 3.25rem 1.5rem; max-width: 45rem; }
.fs-hero-note { position: absolute; right: 3.25rem; top: 4.75rem; width: 10.25rem; z-index: 2; margin: 0; color: var(--fs-hero-background); font: italic 1.25rem/1.4 "Segoe Print","Bradley Hand",cursive; transform: rotate(-12deg); white-space: nowrap; }
.fs-hero-note span { display: block; }
.fs-hero-note span:nth-child(2) { padding-left: 1.25rem; }
.fs-hero-note span:nth-child(3) { padding-left: 2rem; }
.fs-hero-note span:nth-child(4) { padding-left: 1rem; font-size: .9375rem; }
.fs-design .fs-hero h1 { font-size: 3rem; line-height: 1.2; font-weight: 700; margin: 0 0 .25rem; color: inherit; }
.fs-design .fs-hero-subtitle { margin: 0 0 .625rem; font-size: 1.75rem; line-height: 1.35; }
.fs-design .fs-hero-description { margin: 0 0 1rem; font-size: 1.125rem; line-height: 1.325; }
.fs-hero-actions { display: flex; align-items: center; gap: 1rem; }
.fs-hero-actions a,
.fs-design .fs-hero-actions a {
  min-width: 7.375rem;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: .625rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  border-radius: var(--fs-radius);
  border: 1px solid var(--fs-hero-foreground);
  font-size: .875rem;
  line-height: 1.3;
  font-weight: 600;
}
.fs-hero-join { background: var(--fs-hero-foreground); color: var(--fs-hero-background) !important; }
.fs-design .fs-hero-actions .fs-hero-join { min-width: 8rem; }
.fs-hero-more { background: transparent; color: var(--fs-hero-foreground) !important; }
.fs-hero-actions a:hover { opacity: .88; }
.fs-category-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .875rem; margin-top: 1rem; }
.fs-category {
  position: relative;
  min-width: 0;
  height: 6.625rem;
  overflow: hidden;
  border-radius: var(--fs-radius);
  isolation: isolate;
  color: var(--fs-hero-foreground) !important;
  background: var(--fs-hero-background);
}
.fs-category > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fs-category::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,var(--fs-hero-scrim),transparent 90%);
  z-index: -1;
}
.fs-category > div { position: absolute; left: .875rem; right: 1.5rem; bottom: .625rem; }
.fs-category strong { display: block; font-size: 1.125rem; line-height: 1.4; font-weight: 650; }
.fs-category span { display: block; font-size: .8125rem; line-height: 1.4; margin-top: .125rem; }
.fs-category > i { position: absolute; bottom: .625rem; right: .625rem; font-size: 1rem; }
.fs-category > img { transition: transform var(--ls-transition); }
.fs-category:hover img { transform: scale(1.04); }
.fs-design .ls-post-item {
  margin: 0;
  padding: 1rem 1.1875rem .75rem .9375rem;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--fs-border);
  background: var(--fs-surface);
  box-shadow: none;
}
.fs-design .ls-post-header { position: relative; height: auto; min-height: 1.5rem; margin-bottom: 0; padding-left: 2.8125rem; gap: .5625rem; }
.fs-design .ls-post-header .ls-avatar { position: absolute; top: 0; left: 0; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.fs-design .ls-post-user-info { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: .25rem .75rem; }
.fs-design .ls-post-user-name { margin: 0; font-size: 1rem; line-height: 1.5rem; overflow-wrap: anywhere; }
.fs-design .ls-post-meta { font-size: .8125rem; line-height: 1.5rem; color: var(--fs-muted); }
.fs-design .ls-post-item :is(.ls-post-article,.ls-post-content,.ls-post-tags,.ls-post-footer) { margin-left: 2.8125rem; }
.fs-design .ls-post-item .ls-post-article { padding: 0; background: none; }
.fs-design .ls-post-item .ls-post-article { display: flex; flex-direction: column; align-items: stretch; gap: .4375rem; }
.fs-design .ls-post-item .ls-post-article { margin-bottom: 0; }
.fs-design .ls-post-item .ls-article-info { order: 0; min-width: 0; width: 100%; }
.fs-design .ls-post-item .ls-article-cover-box { order: 1; width: 100%; height: auto; aspect-ratio: 4.5; overflow: hidden; border-radius: var(--fs-radius); }
.fs-design .ls-post-item .ls-article-cover { width: 100%; height: 100%; object-fit: cover; }
.fs-design .ls-post-item .ls-article-thumbs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .625rem; width: 100%; margin: 0; }
.fs-design .ls-article-thumbs .ls-article-thumb-item { width: 100%; height: auto; aspect-ratio: 2.13; min-width: 0; border-radius: var(--fs-radius); overflow: hidden; }
.fs-design .ls-article-thumbs .ls-article-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.fs-design .ls-article-img-2 .ls-article-thumbs { grid-template-columns: repeat(2,minmax(0,1fr)); }
.fs-design .ls-article-img-3 .ls-article-thumbs { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fs-design .ls-post-item .ls-article-title { margin: 0 0 .125rem; font-size: 1.125rem; font-weight: 650; line-height: 1.5; color: var(--fs-foreground); }
.fs-design .ls-post-item .ls-article-desc { font-size: 1rem; line-height: 1.3125; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 2.625em; overflow: hidden; color: var(--fs-secondary); }
.fs-design .ls-post-content .ls-text { color: var(--fs-secondary); font-size: 1rem; }
.fs-design .ls-post-footer { margin-top: .625rem; padding: 0; border: 0; min-height: 1.5rem; gap: .75rem; flex-wrap: wrap; }
.fs-design .ls-post-footer .ls-actions { gap: 1.25rem; }
.fs-design .ls-post-footer .ls-action-btn { min-height: 1.5rem; padding: 0; border: 0; background: none; font: inherit; color: var(--fs-muted); }
.fs-design .ls-post-footer .ls-actions { font-size: .8125rem; line-height: 1.5rem; min-height: 1.5rem; }
.fs-design .ls-post-footer .ls-action-btn > i { font-size: 1rem; line-height: 1.5rem; }
.fs-design .ls-post-footer .ls-action-btn.ls-liked { color: var(--ls-danger); }
.fs-design :is(.lsc-btn-primary,.lsc-form-confirm) { color: var(--fs-on-accent); }
.fs-design .lsc-item-icon { color: var(--fs-accent); background: var(--fs-surface-muted); }
.fs-design .ls-post-footer > .ls-post-tags { display: flex; gap: .375rem; margin: 0 0 0 auto; padding: 0; }
.fs-design .ls-post-footer .ls-tag-item { font-size: .6875rem; padding: .125rem .375rem; }
.fs-design .ls-sns-page .ls-top-nav { min-height: 3.1875rem; height: 3.1875rem; }
.fs-design .ls-post-footer .ls-spacer { display: none; }
.fs-design .ls-post-header > .ls-board-link { margin-left: 0; align-self: center; padding: .1875rem .75rem; font-size: .75rem; line-height: 1.125rem; border-radius: var(--fs-radius-pill); background: var(--fs-surface-muted); white-space: nowrap; }
.fs-design .ls-post-header > .ls-board-link img { display: none; }
.fs-design .ls-post-footer .ls-post-more { position: static; margin: 0; width: 1.5rem; height: 1.5rem; }
.fs-design .ls-post-header { margin-bottom: .25rem; }
.fs-design .ls-post-user-name .ls-name font { color: var(--fs-foreground) !important; }
.fs-design .ls-post-header .ls-mark { font-size: .625rem; }
.fs-design .ls-post-user-name :is(.ls-mark.lv,.ls-user-title) { display: none; }
.fs-design .ls-sticky-badge { position: static; flex: none; margin-left: auto; background: none; color: var(--ls-danger); box-shadow: none; font-size: .75rem; padding: 0; line-height: 1.5rem; }
.fs-design .ls-sticky-badge::before,.fs-design .ls-sticky-badge::after,.fs-design .ls-sticky-badge i { display: none; }
.fs-topic-icon { color: var(--ls-danger); margin-right: .5rem; font-size: 1.125rem; line-height: 1; }
.fs-widget-more { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; font-size: .8125rem; color: var(--fs-muted); white-space: nowrap; }
.fs-design .ls-board-link { color: var(--fs-muted); background: none; }
.fs-design .ls-post-tags { margin-top: .5rem; }
.fs-design .ls-tag-item { background: var(--fs-surface-muted); color: var(--fs-secondary); border: 0; border-radius: var(--fs-radius-pill); }
.fs-design :is(.ls-widget-card,.ls-card) {
  background: var(--fs-surface);
  border-color: var(--fs-border);
  border-radius: var(--fs-radius-panel);
  box-shadow: none;
}
.fs-design .ls-widget-card { padding: 1rem 1.125rem; margin-bottom: .875rem; }
.fs-design .ls-widget-header { padding: 0 0 .625rem; margin: 0; border: 0; min-height: 0; }
.fs-design .ls-widget-header h3 { font-size: 1rem; line-height: 1.5; color: var(--fs-foreground); }
.fs-design [data-instance-id="fatestars-design-topics"] .ls-widget-header h3 { display: flex; align-items: center; height: 1.625rem; }
.fs-design .ls-widget-header h3::before, .fs-design .ls-widget-header h3::after { display: none; }
.fs-design .ls-widget-body { padding: 0; }
.fs-design .jinsom-module-widget-tags-list-card-list { counter-reset: fs-topics; }
.fs-design .jinsom-module-widget-tags-list-card-item {
  display: flex;
  gap: .875rem;
  min-height: 2.125rem;
  padding: .375rem 0;
  margin: 0;
  border: 0;
  background: transparent;
}
.fs-design .jinsom-module-widget-tags-list-card-item::before {
  counter-increment: fs-topics;
  content: counter(fs-topics);
  width: 1rem;
  flex-shrink: 0;
  color: var(--fs-muted);
}
.fs-design .jinsom-module-widget-tags-list-card-item:nth-child(-n+3)::before { color: var(--ls-danger); }
.fs-design .jinsom-module-widget-tags-list-card-icon { display: none; }
.fs-design .jinsom-module-widget-tags-list-card-info { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; flex: 1; }
.fs-design .jinsom-module-widget-tags-list-card-name { font-size: .875rem; min-width: 0; }
.fs-design .jinsom-module-widget-tags-list-card-meta { font-size: .75rem; color: var(--fs-muted); margin: 0; flex-shrink: 0; }
.fs-design .jinsom-module-widget-hot-topic-list-item { padding: .3125rem 0; min-height: 2rem; height: 2rem; line-height: 1.375rem; gap: .875rem; background: none; }
.fs-design .jinsom-module-widget-hot-topic-list-list { gap: 0; }
.fs-design .jinsom-module-widget-hot-topic-list-info { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.fs-design .jinsom-module-widget-hot-topic-list-name { font-size: .875rem; }
.fs-design .jinsom-module-widget-hot-topic-list-meta { font-size: .8125rem; color: var(--fs-muted); margin: 0; flex-shrink: 0; }
.fs-design .jinsom-module-widget-hot-topic-list-rank { background: none; width: 1rem; font-size: .9375rem; }
.fs-design .jinsom-module-widget-hot-topic-list-item:nth-child(-n+3) .jinsom-module-widget-hot-topic-list-rank { color: var(--ls-danger); }
.fs-design .jinsom-module-widget-recommend-follow-user-list-item { padding: .5rem 0; gap: .625rem; }
.fs-design .jinsom-module-widget-recommend-follow-user-list-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--fs-radius-pill); }
.fs-design .jinsom-module-widget-recommend-follow-user-list-avatar img { border-radius: var(--fs-radius-pill); }
.fs-design .jinsom-module-widget-recommend-follow-user-list-follow-btn {
  border: 1px solid var(--fs-border);
  background: var(--fs-surface);
  color: var(--fs-secondary);
  border-radius: var(--fs-radius-pill);
  min-height: 2rem;
  min-width: 3.75rem;
}
.fs-design .jinsom-module-widget-recommend-follow-user-list-follow-btn:hover { background: var(--fs-surface-muted); }
.fs-design :is(.ls-bbs-page,.ls-author-page,.ls-article-page,.ls-search-page,.ls-tag-page) {
  width: var(--ls-width);
  max-width: 100rem;
  min-width: 0;
  margin-inline: auto;
}
.fs-design .ls-article-detail-page { width: min(72rem,var(--ls-width)); max-width: 72rem; margin-inline: auto; }
.fs-design .ls-article-detail-main { min-width: 0; }
.fs-design .ls-search-page::before { content: none; }
.fs-design .ls-article-body { overflow-wrap: anywhere; }
.fs-design .ls-article-body img { max-width: 100%; height: auto; }
.fs-design .YXYH-pc-page-bbs-hall {
  width: var(--ls-width);
  max-width: 100rem;
  margin: 1rem auto;
  color: var(--fs-foreground);
}
.fs-design .YXYH-pc-page-bbs-hall :is(.board-card,.bbs-hero-section) {
  background: var(--fs-surface);
  border-color: var(--fs-border);
  border-radius: var(--fs-radius);
  box-shadow: none;
}
.fs-design .YXYH-pc-page-bbs-hall .bbs-category-block { background: none; padding-inline: 0; border: 0; border-radius: 0; box-shadow: none; }
.fs-design .YXYH-pc-page-bbs-hall .category-title-wrap h2 { font-size: 1.25rem; }
.fs-design .YXYH-pc-page-bbs-hall .bbs-board-grid { gap: 1rem; }
.fs-design .YXYH-pc-page-bbs-hall .bbs-hero-section { padding: 1.5rem; }
.fs-design .YXYH-pc-page-bbs-hall .bbs-hero-content h1 { font-size: 1.75rem; }
.fs-design .ls-footer { margin-top: 2rem; background: var(--fs-sidebar-surface); border-top: 1px solid var(--fs-border); }
.fs-design .ls-footer-inner { width: var(--ls-width); }
.fs-design .ls-float-menu { bottom: 1rem; }
.fs-design .ls-float-menu-item { background: var(--fs-surface); color: var(--fs-secondary); }
/* Native actions retain host handlers; presentation follows shared motion tokens. */
.fs-skin :is(a,button,[role="button"],.ls-action-btn,.ls-nav-item,.ls-float-menu-item) {
  -webkit-tap-highlight-color: transparent;
  transition: color var(--ls-transition), background-color var(--ls-transition),
    border-color var(--ls-transition), box-shadow var(--ls-transition), transform var(--ls-transition);
}
.fs-skin :is(button,[role="button"],.ls-create-btn,.fs-hero-actions a):active {
  transform: translateY(.0625rem) scale(.985);
}
.fs-skin :is(button,[role="button"],a):focus-visible { outline: .125rem solid var(--fs-accent); outline-offset: .1875rem; }
.fs-design .ls-action-btn:hover { color: var(--fs-foreground); transform: translateY(-.0625rem); }
.fs-design :is(.ls-icon-btn,.ls-float-menu-item,.ls-post-more):hover { background: var(--fs-surface-muted); }
.fs-design :is(.ls-article-thumb-item,.ls-article-cover-box) img { transition: transform var(--ls-transition); }
.fs-design .ls-post-article:hover :is(.ls-article-thumb-item,.ls-article-cover-box) img { transform: scale(1.025); }
.fs-design .ls-post-article:hover .ls-article-title { text-decoration: underline; text-underline-offset: .1875rem; }
.fs-design :is(.jinsom-module-widget-hot-topic-list-item,.fs-creator-row,.board-card):hover { background: var(--fs-surface-muted); }
.fs-skin button[aria-busy="true"] { opacity: .65; }
@media (prefers-reduced-motion: reduce) {
  .fs-skin *, .fs-skin *::before, .fs-skin *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .fs-skin :is(a,button,[role="button"],img):is(:hover,:active) { transform: none !important; }
}
.fs-directory { width: min(72rem,calc(100% - 2rem)); margin: 1.5rem auto; color: var(--fs-foreground); }
.fs-directory > h1 { font-size: 2rem; line-height: 1.4; margin-bottom: .75rem; }
.fs-directory > p { color: var(--fs-secondary); line-height: 1.75; }
.fs-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 2rem; margin-block: 1.5rem; }
.fs-directory-grid > a { display: block; padding: 1.5rem 0; border-bottom: 1px solid var(--fs-border); color: inherit; }
.fs-directory-grid > a > i { font-size: 1.5rem; color: var(--fs-secondary); }
.fs-directory-grid h2 { font-size: 1.125rem; margin: .625rem 0; }
.fs-directory-grid p { margin: 0; color: var(--fs-muted); line-height: 1.6; }
.fs-directory-grid a:hover h2 { text-decoration: underline; }
@media (max-width: 48rem) {
  .fs-directory-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-height: 52rem) and (min-width: 70rem) {
  .fs-side-account { min-height: 0; }
  .fs-design .ls-nav-item > a { min-height: 2.375rem; padding-block: .5rem; }
  .fs-side-account .ls-stats-grid { margin-block: .75rem; }
  .fs-side-account .fs-account-links { flex-direction: row; justify-content: space-between; }
  .fs-side-account .fs-account-links a { padding: .5rem; }
  .fs-side-account .fs-account-links span { display: none; }
}
@media (max-width: 82rem) {
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr) 19rem; }
  .fs-design .ls-top-nav { gap: 1.125rem; }
  .fs-hero-copy { padding-inline: 2rem; }
  .fs-design .fs-hero h1 { font-size: 2.5rem; }
  .fs-design .fs-hero-subtitle { font-size: 1.4375rem; }
  .fs-design .fs-hero-description { font-size: .9375rem; }
  .fs-category > div { left: .625rem; right: .625rem; }
  .fs-category > i { bottom: .5rem; right: .375rem; }
  .fs-category strong { font-size: .9375rem; }
  .fs-category span { font-size: .6875rem; }
  .fs-design .jinsom-module-widget-tags-list-card-info { align-items: flex-start; }
  .fs-design .jinsom-module-widget-tags-list-card-meta { font-size: .6875rem; }
}
@media (max-width: 70rem) and (min-width: 48.001rem) {
  .fs-hero-note { display: none; }
  :root { --fs-sidebar: 4.75rem; }
  .fs-design .ls-header-left { padding-inline: .625rem; }
  .fs-design .ls-logo { justify-content: center; padding: 0; }
  .fs-design .ls-logo-text,
  .fs-design .ls-nav-item > a > span:not(.ls-nav-icon),
  .fs-design .ls-create-btn > span,
  .fs-side-account { display: none; }
  .fs-design .ls-nav-item > a { justify-content: center; padding-inline: .75rem; }
  .fs-design .ls-create-btn { padding-inline: .75rem; }
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr) 18rem; }
  .fs-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 48rem) {
  .fs-hero-note { display: none; }
  :root { --fs-sidebar: 0rem; --fs-header: 7rem; }
  body.fs-design { --ls-width: calc(100% - 1.25rem); padding-left: 0; }
  .fs-design .ls-sns-page { width: var(--ls-width); margin-inline: auto; }
  .fs-design .ls-post-header { height: auto; min-height: 2.25rem; }
  .fs-design .ls-header { height: var(--fs-header); }
  .fs-design .ls-header-inner { display: flex; height: 3.75rem; padding: .5rem .625rem; }
  .fs-design .ls-header-left {
    position: static;
    width: auto;
    height: auto;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
    gap: 0;
  }
  .fs-design .ls-logo { min-height: 2.5rem; height: 2.5rem; padding: 0; gap: .375rem; }
  .fs-design .ls-logo-icon { width: 1.625rem; font-size: 1.75rem; }
  .fs-design .ls-logo-text { font-size: 1.0625rem; }
  .fs-design .ls-main-nav {
    position: absolute;
    inset: 3.75rem 0 auto 0;
    width: 100%;
    height: 2.75rem;
    padding: 0 .625rem;
    display: flex;
    flex-direction: row;
    gap: .375rem;
    background: var(--fs-background);
    overflow: auto;
    scrollbar-width: none;
  }
  .fs-design .ls-nav-item { width: auto; }
  .fs-design .ls-nav-item > a { padding: .5rem .625rem; min-height: 2.5rem; font-size: .8125rem; gap: .375rem; }
  .fs-design .ls-nav-item:nth-child(8) { border: 0; margin: 0; padding: 0; }
  .fs-design .ls-nav-icon { font-size: 1rem; width: 1rem; }
  .fs-design .ls-header-right { gap: .1875rem; }
  .fs-design .ls-header-right .ls-search { min-width: 2rem; max-width: none; margin: 0; }
  .fs-design .ls-search-trigger { min-width: 2rem; width: 100%; padding: .5rem; height: 2.25rem; }
  .fs-design .ls-search-trigger > span { display: none; }
  .fs-design .ls-header-right .ls-icon-btn { width: 2rem; min-width: 2rem; height: 2rem; }
  .fs-design .ls-header-right .ls-user-trigger { padding: 0; }
  .fs-design .ls-header-right .ls-avatar-sm { width: 1.875rem; height: 1.875rem; }
  .fs-design .ls-header-left > .ls-create { position: fixed; right: 1rem; bottom: 1.125rem; margin: 0; z-index: 100; }
  .fs-design .ls-create-btn { padding: .75rem; width: 2.75rem; min-height: 2.75rem; border-radius: var(--fs-radius-pill); }
  .fs-design .ls-create-btn span { display: none; }
  .fs-design .ls-create-btn i { font-size: 1.25rem; }
  .fs-design .ls-header-left .ls-hd-dropdown-create { position: absolute; left: auto; right: 0; bottom: 3.5rem; top: auto; width: min(20rem,calc(100vw - 2rem)); }
  .fs-design .ls-hd-dropdown { position: fixed; top: 3.75rem; right: .5rem; left: auto; max-width: calc(100vw - 1rem); }
  .fs-side-account, .fs-side-guest { display: none; }
  .fs-design .ls-sns-page { display: grid; grid-template-columns: minmax(0,1fr); }
  .fs-design .ls-sns-page > .ls-sidebar-right { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  .fs-design .ls-sns-page > .ls-sns-main { width: auto !important; }
  .fs-design .ls-sns-modules > .ls-sns-html { margin-bottom: .75rem; }
  .fs-hero { min-height: 19.5rem; }
  .fs-hero-image { object-position: 68% center; }
  .fs-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--fs-hero-scrim); }
  .fs-hero-copy { padding: 1.5rem 1.25rem; max-width: 36rem; }
  .fs-design .fs-hero h1 { font-size: 2rem; max-width: 20rem; }
  .fs-design .fs-hero-subtitle { font-size: 1.125rem; margin-top: .5rem; margin-bottom: 1rem; }
  .fs-design .fs-hero-description { font-size: .8125rem; line-height: 1.6; max-width: 28rem; margin-bottom: 1rem; }
  .fs-hero-description br { display: none; }
  .fs-hero-actions { gap: .75rem; }
  .fs-hero-actions a { min-width: 6.5rem; padding-inline: .875rem; }
  .fs-category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-top: .75rem; }
  .fs-category { height: 5.75rem; }
  .fs-category strong { font-size: .9375rem; }
  .fs-category span { font-size: .625rem; }
  .fs-design .ls-top-nav { gap: 1.25rem; padding-inline: .875rem; }
  .fs-design .ls-top-nav-item { font-size: .875rem; }
  .fs-design .ls-post-item { padding: 1rem .875rem; }
  .fs-all-boards { display: none; }
  .fs-design .ls-post-header > .ls-board-link { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; }
  .fs-design .ls-post-header > .ls-board-link span { overflow: hidden; text-overflow: ellipsis; }
  .fs-design .ls-post-item .ls-article-cover-box { aspect-ratio: 2.2; }
  .fs-design .ls-post-item .ls-article-thumbs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fs-design .ls-post-item :is(.ls-post-article,.ls-post-content,.ls-post-tags,.ls-post-footer) { margin-left: 0; }
  .fs-design .ls-footer-inner { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
  .fs-design .ls-footer-inner > * { min-width: 0; width: auto; }
  .fs-design .ls-footer-inner > :first-child { grid-column: 1 / -1; max-width: 100%; }
  .fs-design .ls-article-header { padding: 1.125rem; }
  .fs-design .ls-article-header .ls-article-title { font-size: 1.375rem; line-height: 1.5; }
  .fs-design .ls-article-content-card { padding: 1.125rem; }
  .fs-design .ls-article-body { font-size: 1rem; line-height: 1.8; }
  .fs-design .ls-article-actions { flex-wrap: wrap; gap: .625rem; padding: 1rem; }
  .fs-design .ls-article-act-btn { min-width: 0; flex: 1 1 4rem; }
  .fs-design .ls-search-tabs { display: flex; width: 100%; max-width: 100%; min-width: 0; justify-content: flex-start; overflow-x: auto; }
  .fs-design .ls-search-tab { flex: 0 0 auto; }
  .fs-design .ls-float-menu { right: 1rem; bottom: 5rem; }
  .fs-design .YXYH-pc-page-bbs-hall .bbs-board-grid { grid-template-columns: minmax(0,1fr); }
  .fs-design .YXYH-pc-page-bbs-hall .bbs-hero-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .fs-design .YXYH-pc-page-bbs-hall .bbs-hero-content { min-width: 0; width: 100%; }
  .fs-design .YXYH-pc-page-bbs-hall .bbs-hero-stats-panel { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-design .fs-category:hover img { transform: none; transition: none; }
}

/* reading.css */
/* Shared reading contract; native PC and mobile routing stay independent. */
:is(.fs-design,.ls-mobile) .fs-back-link {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-foreground);
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius);
  font-size: 1.25rem;
}
:is(.fs-design,.ls-mobile) .fs-back-link:hover { background: var(--fs-surface-muted); }
:is(.fs-design,.ls-mobile) .ls-post-item .ls-article-cover-box {
  aspect-ratio: 2.4;
  max-width: 36rem;
  height: auto;
}
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images] {
  display: grid;
  width: 100%;
  gap: .5rem;
  grid-template-columns: repeat(3,minmax(0,1fr));
}
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images] > * {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--fs-radius);
}
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="1"] { grid-template-columns: minmax(0,1fr); max-width: 36rem; }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="1"] > * { aspect-ratio: 2.4; }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="2"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="2"] > * { aspect-ratio: 1.8; }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="3"] > * { aspect-ratio: 1.5; }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="4"] { grid-template-columns: repeat(4,minmax(0,1fr)); }
:is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="4"] > * { aspect-ratio: 2.13; }
:is(.fs-design,.ls-mobile) .ls-post-item .fs-paragraph-preview {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
:is(.fs-design,.ls-mobile) .ls-post-item .ls-article-desc.fs-paragraph-preview {
  -webkit-line-clamp: 3;
  max-height: 4.95em;
  margin-block: .25rem .625rem;
}
:is(.fs-design,.ls-mobile) .ls-post-item .ls-article-img-0 .ls-article-desc.fs-paragraph-preview {
  -webkit-line-clamp: 5;
  max-height: 8.25em;
}
:is(.fs-design,.ls-mobile) .ls-post-content .ls-text p { margin: 0 0 .625em; }
:is(.fs-design,.ls-mobile) .ls-post-content .ls-text p:last-child { margin-bottom: 0; }
@media (max-width: 70rem) {
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr); }
  .fs-design .ls-sns-page > .ls-sidebar-right { display: none; }
  .fs-design .fs-side-guest { display: none; }
}
@media (max-width: 40rem) {
  :is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="4"] { grid-template-columns: repeat(2,minmax(0,1fr)); }
  :is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="4"] > * { aspect-ratio: 1.8; }
  :is(.fs-design,.ls-mobile) .ls-post-item .ls-article-cover-box,
  :is(.fs-design,.ls-mobile) .ls-post-item [data-fs-images="1"] > * { aspect-ratio: 1.8; }
}

/* shell.css */
/* Website-only horizontal shell. Loaded after the legacy presentation adapter. */
:root {
  --fs-sidebar: 0rem;
  --fs-header: 5rem;
  --fs-background: var(--fs-surface);
  --fs-sidebar-surface: var(--fs-surface);
  --fs-page-gutter: 1.75rem;
  --fs-radius-panel: var(--ls-radius-md);
}
:root[data-fs-theme="dark"] { --fs-background: var(--fs-surface); --fs-sidebar-surface: var(--fs-surface); }
body.fs-design { --ls-width: calc(100% - var(--fs-page-gutter) * 2); padding: var(--fs-header) 0 0; }
.fs-design .ls-header { inset: 0 0 auto; width: 100%; background: var(--fs-surface); border-bottom: 1px solid var(--fs-border); }
.fs-design .ls-header-inner { padding: 0 var(--fs-page-gutter); gap: 1.5rem; }
.fs-design .ls-header-left { position: static; width: auto; height: 100%; flex: 1; min-width: 0; padding: 0; flex-direction: row; align-items: center; gap: 2.5rem; border: 0; background: transparent; }
.fs-design .ls-logo { height: auto; min-height: 0; flex-shrink: 0; padding: 0; gap: .5rem; }
.fs-design .ls-logo-text { display: block; font-size: 1.5rem; line-height: 1; }
.fs-design .ls-logo-icon { display: block; width: 2rem; height: 2rem; }
.fs-design .ls-main-nav { flex-direction: row; align-items: center; justify-content: flex-end; width: auto; height: 100%; gap: .375rem; overflow: visible; }
.fs-design .ls-nav-item { width: auto; height: auto; }
.fs-design .ls-nav-item:nth-child(8) { border: 0; margin: 0; padding: 0; }
.fs-design .ls-nav-item > a { height: 2.5rem; min-height: 2.5rem; padding: .5rem .875rem; font-size: .875rem; gap: .375rem; border-radius: var(--fs-radius); }
.fs-design .ls-nav-item > a > span:not(.ls-nav-icon) { display: inline; }
.fs-design .ls-nav-item > a > .ls-nav-icon { display: none; }
.fs-design .ls-header-right { flex: 0 0 auto; gap: .625rem; }
.fs-design .ls-header-right .ls-search { flex: 0 0 auto; width: auto; margin: 0; }
.fs-design .ls-search-trigger { width: 2.5rem; height: 2.5rem; padding: .5rem; justify-content: center; background: transparent; border: 0; }
.fs-design .ls-search-trigger > :not(i) { display: none; }
.fs-design .ls-header-right .ls-messages { display: block; }
.fs-design .ls-header-right .ls-icon-btn { width: 2.5rem; min-width: 2.5rem; height: 2.5rem; }
.fs-design .ls-header-right .ls-create { position: relative; margin: 0; }
.fs-design .ls-create-btn { width: auto; min-height: 2.375rem; padding: .5rem .875rem; font-size: .8125rem; gap: .375rem; }
.fs-design .ls-create-btn span { display: inline; }
.fs-design .ls-header-right .ls-hd-dropdown-create { left: auto; right: 0; top: 100%; bottom: auto; }
.fs-design .ls-header-left .ls-hd-dropdown { max-width: min(24rem,calc(100vw - 2rem)); }
.fs-design :is(.ls-bbs-page,.ls-author-page,.ls-article-page,.ls-search-page,.ls-tag-page,.YXYH-pc-page-bbs-hall,.ls-footer-inner) { width: var(--ls-width); max-width: none; margin-inline: auto; }
.fs-design .ls-sns-page { width: var(--ls-width); max-width: none; margin: 1.25rem auto 2rem; grid-template-columns: minmax(0,1fr) minmax(17rem,22%); gap: 1.75rem; }
.fs-design .ls-sns-page .ls-top-nav-wrap { grid-row: 1; border-radius: 0; height: auto; min-height: 3rem; }
.fs-design .ls-sns-main > .ls-post-list { grid-row: 2; border-radius: 0; }
.fs-design .ls-sns-page > .ls-sidebar-right { grid-row: 1 / span 5; border-left: 1px solid var(--fs-border); padding-left: 1.5rem; }
.fs-design .ls-top-nav { gap: 1.5rem; padding-inline: 0; }
.fs-design .ls-top-nav-item { font-size: .875rem; }
.fs-design .ls-post-item { box-shadow: none; border-radius: 0; padding-block: 1.5rem; }
.fs-design .ls-post-list > .ls-post-item { border-bottom: 1px solid var(--fs-border); }
.fs-design .ls-article-title { font-size: 1.0625rem; }
.fs-design :is(.ls-widget,.ls-sidebar-widget) { box-shadow: none; border-radius: 0; background: transparent; }
.fs-design .YXYH-pc-page-bbs-hall .bbs-board-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.fs-design .YXYH-pc-page-bbs-hall .bbs-hero-section { border: 0; border-bottom: 1px solid var(--fs-border); border-radius: 0; padding-inline: 0; }
.fs-design .ls-footer { background: var(--fs-surface); }
body.fs-design:has([data-fs-experience="gallery"]) :is(.ls-site-page,.ls-custom-page,.ls-site-page-main,.ls-site-page-content,.ls-custom-page-content) { width: 100%; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0; }
body.fs-design:has([data-fs-experience="gallery"]) .fs-reading-backbar { margin-inline: var(--fs-page-gutter); }
.ls-mobile .ls-custom-page-body:has([data-fs-experience]) { padding: 0; }
.ls-mobile .ls-custom-page:has([data-fs-experience]) { padding-inline: 0; }
@media (min-width: 110rem) {
  .fs-design .ls-sns-main > .ls-post-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; column-gap: 2rem; overflow: visible; }
  .fs-design .ls-sns-main > .ls-post-list > .ls-post-item { min-width: 0; }
}
@media (max-width: 68rem) {
  :root { --fs-page-gutter: 1.25rem; }
  .fs-design .ls-header-inner { gap: .75rem; }
  .fs-design .ls-header-left { gap: .875rem; }
  .fs-design .ls-main-nav { gap: 0; }
  .fs-design .ls-nav-item > a { padding-inline: .625rem; }
  .fs-design .ls-logo-text { font-size: 1.25rem; }
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr) 17rem; gap: 1.25rem; }
  .fs-design .ls-header-right { gap: .25rem; }
}
@media (max-width: 70rem) {
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 55rem) {
  :root { --fs-header: 7rem; --fs-page-gutter: 1rem; }
  .fs-design .ls-header-inner { height: 4rem; }
  .fs-design .ls-header-left { height: 4rem; }
  .fs-design .ls-main-nav { position: absolute; top: 4rem; inset-inline: var(--fs-page-gutter); height: 3rem; justify-content: flex-start; gap: .5rem; width: auto; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: var(--fs-surface); }
  .fs-design .ls-nav-item > a { gap: .375rem; font-size: .875rem; }
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .fs-design .ls-sns-page > .ls-sidebar-right { display: none; }
  .fs-design .ls-sns-page > .ls-sns-main { width: auto !important; }
  .fs-design .ls-header-right .ls-messages { display: none; }
  .fs-design .ls-header-right .ls-hd-dropdown { position: fixed; top: 3.75rem; right: .5rem; left: auto; }
}
@media (max-width: 30rem) {
  .fs-design .ls-header-right .ls-icon-btn { width: 2rem; min-width: 2rem; height: 2rem; }
  .fs-design .ls-header-right .ls-create-btn { width: 2.25rem; padding: .5rem; }
  .fs-design .ls-create-btn span { display: none; }
  .fs-design .ls-logo-icon { width: 1.5rem; height: 1.5rem; }
}

/* redesign.css */
/* The shared shell stays native; only the requested page surfaces change. */
:root {
  --fs-radius: 8px;
  --fs-border: #e5e7e7;
  --fs-accent: #111111;
  --fs-muted: #71777b;
  --fs-secondary: #53595e;
}
:root[data-fs-theme="dark"] {
  --fs-border: #36393a;
  --fs-accent: #dddddd;
  --fs-muted: #a5aaa9;
  --fs-secondary: #c1c5c4;
}
.fs-design *, .fsx * { letter-spacing: 0; box-sizing: border-box; }
.fs-design .ls-main-nav { margin-left: auto; }
.fs-design .ls-header { transition: background-color 180ms, border-color 180ms; }
.fs-design .ls-sns-page {
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 24px;
  margin-top: 24px;
}
.fs-design .ls-sns-page .ls-top-nav-wrap {
  display: flex;
  gap: 12px;
  padding: 0 0 18px;
  overflow: visible;
  border: 0;
}
.fs-design .ls-sns-page .ls-top-nav { flex: 1; min-width: 0; gap: 8px; height: auto; }
.fs-design .ls-sns-page .ls-top-nav-item {
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
}
.fs-design .ls-sns-page .ls-top-nav-item::after { display: none; }
.fs-design .ls-sns-page .ls-top-nav-item.ls-active { background: var(--fs-text, #171b1a); color: var(--fs-surface, #fff); }
.fs-design .ls-sns-page select.fs-all-boards {
  display: block;
  flex: 0 0 132px;
  width: 132px;
  min-width: 0;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  background: var(--fs-surface, #fff);
  color: var(--fs-text, #171b1a);
  font: inherit;
  font-size: 12px;
  padding: 0 24px 0 10px;
  cursor: pointer;
}
.fs-design .ls-sns-main > .ls-post-list {
  display: block;
  columns: 4;
  column-gap: 12px;
  border: 0;
  background: transparent;
  overflow: visible;
}
.fs-design .ls-sns-main > .ls-post-list > .ls-post-item {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 12px;
  padding: 15px 14px 12px;
  border: 1px solid var(--fs-border);
  border-radius: 8px;
  background: var(--fs-surface, #fff);
  box-shadow: none;
  overflow: visible;
}
.fs-design .ls-sns-page .ls-post-item :is(.ls-post-article,.ls-post-content,.ls-post-tags,.ls-post-footer) { margin-left: 0; }
.fs-design .ls-sns-page .ls-post-header { gap: 8px; margin-bottom: 12px; min-height: 32px; }
.fs-design .ls-sns-page .ls-post-header .ls-avatar { width: 30px; height: 30px; flex-basis: 30px; }
.fs-design .ls-sns-page .ls-post-user-info { min-width: 0; }
.fs-design .ls-sns-page .ls-post-user-name { font-size: 12px; line-height: 18px; }
.fs-design .ls-sns-page .ls-post-user-name .nickname { color: inherit !important; }
.fs-design .ls-sns-page .ls-post-meta { font-size: 10px; line-height: 15px; }
.fs-design .ls-sns-page .ls-post-user-name .ls-mark,
.fs-design .ls-sns-page .ls-post-user-name .ls-user-title,
.fs-design .ls-sns-page .ls-board-link img { display: none; }
.fs-design .ls-sns-page .ls-board-link { margin-left: auto; padding: 3px 5px; max-width: 76px; font-size: 10px; overflow: hidden; }
.fs-design .ls-sns-page .ls-sticky-badge { font-size: 10px; padding: 0; }
.fs-design .ls-sns-page .ls-article-title { font-size: 14px; line-height: 1.6; font-weight: 600; margin-bottom: 6px; }
.fs-design .ls-sns-page .ls-article-desc,
.fs-design .ls-sns-page .ls-post-content { font-size: 13px; line-height: 1.75; -webkit-line-clamp: 6; }
.fs-design .ls-sns-page .ls-article-cover-box { aspect-ratio: auto; height: auto; margin-top: 8px; }
.fs-design .ls-sns-page .ls-article-cover { height: auto; max-height: 420px; object-fit: contain; display: block; }
.fs-design .ls-sns-page .ls-article-thumbs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; margin-top: 8px; border-radius: 7px; overflow: hidden; }
.fs-design .ls-sns-page .ls-article-thumbs .ls-article-thumb-item { aspect-ratio: 1; border-radius: 0; }
.fs-design .ls-sns-page .ls-post-footer { gap: 8px; padding-top: 10px; margin-top: 4px; }
.fs-design .ls-sns-page .ls-post-footer .ls-spacer { display: none; }
.fs-design .ls-sns-page .ls-actions { width: 100%; justify-content: flex-start; gap: 12px; }
.fs-design .ls-sns-page .ls-action-btn { font-size: 11px; gap: 4px; min-width: 0; }
.fs-design .ls-sns-page .ls-action-btn i { font-size: 15px; }
.fs-design .ls-sns-page .fs-collect span { display: none; }
.fs-design .ls-sns-page .ls-post-more { margin-left: auto; }
.fs-design .ls-sns-page .ls-post-tags { margin-top: 2px; gap: 4px; }
.fs-design .ls-sns-page .ls-tag-item { font-size: 10px; border-radius: 4px; }
.fs-design .ls-sns-page > .ls-sidebar-right { padding-left: 22px; }
.fs-design .ls-sns-page .ls-post-list > :not(.ls-post-item) { break-inside: avoid; }
.fs-design .ls-sns-page .ls-feed-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.fs-design .ls-sns-page :is(.ls-load-more,.ls-empty) { grid-column: 1; }
.fs-design :is(.ls-load-more,.fs-all-boards):focus-visible,
.fsx :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 4px; }
.fs-design:has([data-fs-experience]) .fs-reading-backbar { display: none; }
.fs-design:has([data-fs-experience]) #lsFloatMenu { display: none; }
.fs-design:has([data-fs-experience]) :is(.ls-site-page,.ls-custom-page,.ls-site-page-main,.ls-site-page-content,.ls-custom-page-content) {
  width: 100%; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0;
}

/* Shared editorial surfaces. No global reset is injected into host dialogs. */
.fsx {
  --x-ink: #191d1d;
  --x-muted: #737a7c;
  --x-line: #e6e8e8;
  --x-paper: #fff;
  --x-soft: #f5f6f6;
  --x-accent: #276f5e;
  color: var(--x-ink);
  background: var(--x-paper);
  font: 400 14px/1.65 Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  width: 100%;
  min-width: 0;
}
[data-fs-theme="dark"] .fsx { --x-ink: #eff0ee; --x-muted: #a3aaa8; --x-line: #363938; --x-paper: #1d201f; --x-soft: #272b29; --x-accent: #a3dbc8; }
.fsx :is(h1,h2,h3,p,figure) { margin: 0; }
.fsx a { color: inherit; text-decoration: none; }
.fsx button, .fsx input, .fsx select, .fsx textarea { font: inherit; color: inherit; }
.fsx button { cursor: pointer; }
.fsx button:disabled { opacity: .5; cursor: default; }
.fsx img { max-width: 100%; display: block; }
.fsx h1 { font-size: 30px; line-height: 1.2; font-weight: 600; }
.fsx h2 { font-size: 23px; line-height: 1.4; font-weight: 600; }
.fsx h3 { font-size: 15px; font-weight: 600; line-height: 1.6; }
.fsx .x-wrap { width: calc(100% - 64px); max-width: 1600px; margin-inline: auto; }
.fsx .x-muted { color: var(--x-muted); }
.fsx .x-kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--x-muted); }
.fsx .x-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fsx .x-spacer { flex: 1; }
.fsx .x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; min-height: 40px; border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-paper); line-height: 1.3; font-size: 13px; font-weight: 500; }
.fsx .x-btn:hover { background: var(--x-soft); }
.fsx .x-btn-primary { background: var(--x-ink); color: var(--x-paper); border-color: var(--x-ink); }
.fsx .x-btn-primary:hover { background: #355b51; color: white; }
.fsx .x-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--x-line); background: var(--x-paper); padding: 0; font-size: 16px; }
.fsx .x-icon:hover { background: var(--x-soft); }
.fsx .x-icon[aria-pressed="true"] { color: var(--x-accent); background: var(--x-soft); }
.fsx .x-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; background: var(--x-soft); max-width: 100%; }
.fsx .x-tabs button { padding: 6px 12px; min-height: 30px; border: 0; background: transparent; border-radius: 6px; color: var(--x-muted); white-space: nowrap; font-size: 12px; }
.fsx .x-tabs button[aria-pressed="true"] { background: var(--x-paper); color: var(--x-ink); box-shadow: 0 1px 4px #0000000b; }
.fsx .x-search { display: flex; align-items: center; gap: 8px; background: var(--x-soft); border: 1px solid var(--x-line); border-radius: 8px; padding: 0 12px; min-width: 0; height: 42px; }
.fsx .x-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.fsx .x-search:focus-within { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.fsx .x-search button { border: 0; background: transparent; padding: 5px 0 5px 10px; font-size: 12px; }
.fsx .x-state { text-align: center; color: var(--x-muted); padding: 36px 16px; }
.fsx .x-state .x-btn { margin-top: 12px; }
.fsx .x-section-head { display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.fsx .x-section-head .x-kicker { margin-bottom: 9px; }
.fsx .x-chip { display: inline-flex; font-size: 11px; padding: 3px 8px; border: 1px solid var(--x-line); border-radius: 5px; color: var(--x-muted); }
.fsx .x-section { padding-block: 56px; border-bottom: 1px solid var(--x-line); }
.fsx .x-section a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.fsx :is(h1,h2,h3,p,a,button) { overflow-wrap: anywhere; }
.fsx .x-reveal { opacity: 0; transform: translateY(15px); transition: opacity 450ms, transform 450ms; }
.fsx .x-reveal.x-revealed { opacity: 1; transform: none; }

/* The gallery is image-first, without descriptions between tiles. */
.fsx-gallery { padding: 22px 32px 36px; min-height: 70vh; }
.fsx-gallery > .x-tabs { background: transparent; padding: 0; gap: 8px; margin-bottom: 30px; }
.fsx-gallery > .x-tabs button { border: 1px solid var(--x-line); border-radius: 20px; padding: 7px 17px; }
.fsx-gallery > .x-tabs button[aria-pressed="true"] { background: var(--x-ink); color: var(--x-paper); border-color: var(--x-ink); }
.fsx .x-gallery-tools { display: grid; grid-template-columns: 1fr minmax(240px, 560px) 1fr; gap: 20px; align-items: center; margin-bottom: 30px; }
.fsx .x-gallery-tools > :last-child { justify-self: end; }
.fsx .x-gallery-tools > :first-child { justify-self: start; }
.fsx .x-masonry { columns: 7; column-gap: 12px; }
.fsx .x-masonry[data-density="normal"] { columns: 5; column-gap: 16px; }
.fsx .x-masonry[data-density="large"] { columns: 4; column-gap: 22px; }
.fsx .x-art { position: relative; display: inline-block; vertical-align: top; width: 100%; break-inside: avoid; margin-bottom: 12px; border-radius: 8px; background: var(--x-soft); overflow: hidden; }
.fsx .x-art-open { display: block; width: 100%; border: 0; padding: 0; background: transparent; position: relative; text-align: left; }
.fsx .x-art-media { width: 100%; min-height: 130px; display: grid; }
.fsx .x-art-media > img { width: 100%; height: auto; min-height: 130px; object-fit: cover; }
.fsx .x-art-media.is-collage { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; }
.fsx .x-art-media.is-collage > img { aspect-ratio: .76; height: 100%; min-height: 0; object-fit: cover; }
.fsx .x-art[data-shape="portrait"] .x-art-media:not(.is-collage) > img { aspect-ratio: .72; object-fit: cover; }
.fsx .x-art[data-shape="square"] .x-art-media:not(.is-collage) > img { aspect-ratio: 1; object-fit: cover; }
.fsx .x-art-badge { position: absolute; left: 10px; top: 10px; padding: 3px 7px; background: #191b1bba; color: white; border-radius: 5px; font-size: 10px; line-height: 1.6; display: flex; align-items: center; gap: 4px; }
.fsx .x-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #111b; color: white; font-size: 28px; }
.fsx .x-art-caption { position: absolute; inset: auto 0 0; padding: 34px 12px 12px; background: linear-gradient(transparent,#000b); color: white; opacity: 0; transition: opacity 180ms; font-size: 12px; line-height: 1.5; }
.fsx .x-art-caption strong { display: block; font-weight: 500; }
.fsx .x-art:hover .x-art-caption,.fsx .x-art:focus-within .x-art-caption { opacity: 1; }
.fsx .x-art .x-save { position: absolute; top: 8px; right: 8px; color: white; background: #17191980; border: 0; width: 30px; height: 30px; opacity: 0; }
.fsx .x-art:hover .x-save,.fsx .x-art:focus-within .x-save,.fsx .x-art .x-save[aria-pressed="true"] { opacity: 1; }
.fsx .x-art .x-save[aria-pressed="true"] { color: #fff; }
.fsx .x-art-placeholder { min-height: 200px; padding: 35px 20px; display: grid; place-content: center; text-align: center; gap: 14px; }
.fsx .x-art-placeholder i { font-size: 30px; }

/* Native dialog supplies focus trapping, Escape, and inert page background. */
dialog.fsx { position: fixed; margin: auto; width: min(1120px, calc(100% - 32px)); max-height: calc(100dvh - 40px); border: 1px solid var(--x-line); border-radius: 8px; padding: 0; color: var(--x-ink); background: var(--x-paper); overflow: auto; }
dialog.fsx::backdrop { background: #151717bc; }
.fsx .x-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--x-line); }
.fsx .x-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; }
.fsx .x-preview-stage { min-height: 400px; background: #121414; display: grid; place-items: center; position: relative; }
.fsx .x-preview-stage > img,.fsx .x-preview-stage > video { width: 100%; height: min(66dvh, 680px); object-fit: contain; }
.fsx .x-preview-stage .x-preview-prev { position: absolute; left: 14px; }
.fsx .x-preview-stage .x-preview-next { position: absolute; right: 14px; }
.fsx .x-preview-aside { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.fsx .x-preview-aside p { font-size: 13px; color: var(--x-muted); }
.fsx .x-preview-thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; background: var(--x-soft); }
.fsx .x-preview-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; flex: 0 0 60px; }
.fsx .x-preview-thumbs button[aria-pressed="true"] { border-color: var(--x-accent); }
.fsx .x-preview-thumbs img { width: 60px; height: 52px; object-fit: cover; }

/* Creators: a real representative work, then an unframed wall. */
.fsx .x-creator-hero { min-height: 530px; height: min(740px, calc(100svh - 160px)); position: relative; color: white; background: #282729; isolation: isolate; }
.fsx .x-creator-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fsx .x-creator-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#161719cf,#16171935 80%),linear-gradient(0deg,#161719af,transparent 70%); z-index: -1; }
.fsx .x-hero-creator-copy { position: absolute; left: 6%; bottom: 85px; max-width: 700px; right: 6%; }
.fsx .x-hero-creator-copy .x-kicker { color: #c9e2d7; margin-bottom: 18px; }
.fsx .x-hero-name { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.fsx .x-hero-name img { width: 68px; height: 68px; border-radius: 50%; border: 1px solid #fff7; }
.fsx .x-hero-name h1 { font-size: 64px; line-height: 1.05; overflow-wrap: anywhere; }
.fsx .x-hero-creator-copy > p { color: #e1e1e0; max-width: 530px; }
.fsx .x-hero-meta { display: flex; gap: 28px; margin: 24px 0; }
.fsx .x-hero-meta strong { font-size: 24px; font-weight: 500; }
.fsx .x-hero-meta small { display: block; color: #dadbda; font-size: 11px; }
.fsx .x-hero-creator-copy .x-btn { background: #ffffff10; color: white; border-color: #ffffff55; }
.fsx .x-hero-controls { position: absolute; right: 5%; bottom: 28px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.fsx .x-hero-controls .x-icon { color: white; border-color: #ffffff4d; background: #20202060; }
.fsx .x-work-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; }
.fsx .x-work { min-width: 0; }
.fsx .x-work img { width: 100%; height: 255px; object-fit: cover; border-radius: 7px; margin-bottom: 12px; }
.fsx .x-work:first-child img { height: 330px; }
.fsx .x-work p { font-size: 12px; color: var(--x-muted); }
.fsx .x-creator-wall { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px 20px; }
.fsx .x-creator { min-width: 0; }
.fsx .x-creator-cover { width: 100%; height: 185px; background: var(--x-soft); border-radius: 7px; object-fit: cover; }
.fsx .x-creator-id { display: flex; gap: 10px; align-items: center; margin-top: 16px; min-width: 0; }
.fsx .x-avatar { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; flex: 0 0 38px; }
.fsx .x-creator-id > div { flex: 1; min-width: 0; }
.fsx .x-creator-id h3 { overflow-wrap: anywhere; }
.fsx .x-creator-id p { font-size: 11px; color: var(--x-muted); }
.fsx .x-creator > p { font-size: 12px; color: var(--x-muted); margin: 14px 0; }
.fsx .x-join { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 56px; }
.fsx .x-join h2 { font-size: 29px; margin: 10px 0; }

/* Discover retains working community destinations and focused utilities. */
.fsx-discover { padding-top: 34px; }
.fsx .x-discover-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.fsx .x-discover-heading .x-search { width: 340px; }
.fsx .x-discover-heading p { color: var(--x-muted); margin-top: 10px; }
.fsx .x-discover-feature { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 18px; margin: 24px 0 36px; }
.fsx .x-discover-feature a { min-width: 0; position: relative; height: 245px; color: white; overflow: hidden; border-radius: 8px; background: #292b2b; }
.fsx .x-discover-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.fsx .x-discover-feature a:hover img { transform: scale(1.03); }
.fsx .x-discover-feature span { position: absolute; inset: auto 0 0; padding: 48px 18px 18px; background: linear-gradient(transparent,#161918c9); }
.fsx .x-discover-feature b { display: block; font-size: 18px; font-weight: 500; margin-top: 5px; }
.fsx .x-catalog { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin: 24px 0 40px; }
.fsx .x-catalog-item { border: 1px solid var(--x-line); border-radius: 8px; overflow: hidden; min-width: 0; background: var(--x-paper); }
.fsx .x-catalog-item > img { width: 100%; height: 175px; object-fit: cover; }
.fsx .x-catalog-item > div { padding: 16px; }
.fsx .x-catalog-item p { color: var(--x-muted); font-size: 12px; margin: 6px 0 16px; min-height: 20px; }
.fsx .x-catalog-item .x-btn { font-size: 12px; min-height: 34px; padding: 7px 10px; }
.fsx .x-tool-body { padding: 24px; display: grid; gap: 16px; }
.fsx .x-tool-body label { display: grid; gap: 8px; }
.fsx .x-tool-body textarea { width: 100%; min-height: 260px; resize: vertical; padding: 15px; border: 1px solid var(--x-line); border-radius: 6px; background: var(--x-soft); font-family: monospace; }
.fsx .x-tool-result img { max-height: 360px; object-fit: contain; }
.fsx .x-tool-status { color: var(--x-muted); min-height: 24px; }

/* Nocturne: artwork is the canvas; the brand and real destinations are foreground. */
.fsx-home { background: #232128; color: #f5f4f2; --x-paper: #232128; --x-ink: #f5f4f2; --x-line: #47454a; --x-muted: #b4b2b6; --x-soft: #35333a; }
.fsx .x-nocturne { position: relative; isolation: isolate; height: min(790px, calc(100svh - 150px)); min-height: 570px; overflow: hidden; background: #35333a; }
.fsx .x-nocturne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 52%; z-index: -2; }
.fsx .x-nocturne::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#232128ee 0%,#232128a6 36%,#23212815 74%),linear-gradient(0deg,#23212885,transparent 45%); }
.fsx .x-nocturne-copy { position: absolute; top: 17%; left: 6%; width: 650px; max-width: 80%; }
.fsx .x-nocturne .x-kicker { color: #dedadd; margin-bottom: 25px; }
.fsx .x-nocturne h1 { font-size: 82px; font-weight: 500; line-height: 1.05; margin-bottom: 28px; }
.fsx .x-nocturne h2 { font-size: 32px; font-weight: 400; line-height: 1.5; }
.fsx .x-nocturne-copy > p { max-width: 425px; color: #d1cdd1; font-size: 14px; margin: 18px 0 30px; line-height: 1.9; }
.fsx .x-nocturne .x-btn { background: #f3f2ef; color: #242329; border-color: #f3f2ef; padding: 13px 20px; }
.fsx .x-nocturne .x-btn + .x-btn { background: transparent; color: #f3f2ef; border-color: #ddd8; }
.fsx .x-nocturne-caption { position: absolute; right: 28px; bottom: 28px; color: #e9e7e8; font-size: 11px; text-align: right; }
.fsx .x-nocturne-bottom { position: absolute; left: 6%; bottom: 28px; display: flex; gap: 18px; align-items: center; font-size: 11px; color: #d3cfd5; }
.fsx .x-principles { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 6%; border-bottom: 1px solid #47454a; flex-wrap: wrap; }
.fsx .x-principles strong { font-weight: 500; font-size: 14px; }
.fsx .x-principles span { font-size: 12px; color: #b4b2b6; margin-left: 12px; }
.fsx .x-home-intro { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; }
.fsx .x-home-intro h2 { font-size: 36px; line-height: 1.5; }
.fsx .x-home-intro > div > p { color: #c1bdc4; font-size: 15px; line-height: 2; max-width: 540px; }
.fsx .x-home-links { display: grid; gap: 0; margin-top: 28px; }
.fsx .x-home-links a { display: flex; justify-content: space-between; border-top: 1px solid #47454a; padding: 16px 0; color: #eeecef; }
.fsx-home .x-work img { height: 260px; }
.fsx-home .x-work:first-child img { height: 340px; }
.fsx-home .x-work p { color: #b4b2b6; }
.fsx-home .x-home-community { padding: 56px 0; }
.fsx-home .x-home-community a { color: #eeecef; }

@media (min-width: 1800px) {
  .fs-design .ls-sns-main > .ls-post-list { columns: 5; }
  .fsx .x-masonry { columns: 8; }
}
@media (max-width: 1280px) {
  .fs-design .ls-sns-main > .ls-post-list { columns: 3; }
  .fsx .x-masonry { columns: 5; }
  .fsx .x-masonry[data-density="normal"] { columns: 4; }
  .fsx .x-masonry[data-density="large"] { columns: 3; }
  .fsx .x-gallery-tools { grid-template-columns: auto minmax(180px,1fr) auto; }
  .fsx .x-gallery-tools .x-tabs button { padding-inline: 8px; }
}
@media (max-width: 1000px) {
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr); }
  .fs-design .ls-sns-main > .ls-post-list { columns: 2; }
  .fs-design .ls-sns-page > .ls-sidebar-right { display: none; }
  .fsx .x-gallery-tools { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fsx .x-gallery-tools .x-search { grid-row: 2; grid-column: 1 / -1; }
  .fsx .x-gallery-tools > :last-child { grid-row: 1; grid-column: 2; }
  .fsx .x-catalog, .fsx .x-creator-wall { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fsx .x-preview-layout { grid-template-columns: minmax(0,1fr) 260px; }
  .fsx .x-nocturne h1 { font-size: 70px; }
}
@media (max-width: 768px) {
  .fsx .x-wrap { width: calc(100% - 36px); }
  .fsx-gallery { padding: 20px 16px; }
  .fsx .x-masonry { columns: 3; gap: 10px; }
  .fsx .x-masonry[data-density="normal"] { columns: 2; gap: 12px; }
  .fsx .x-masonry[data-density="large"] { columns: 2; gap: 18px; }
  .fsx .x-catalog,.fsx .x-creator-wall { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; }
  .fsx .x-discover-feature { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fsx .x-discover-feature a:first-child { grid-column: 1 / -1; height: 260px; }
  .fsx .x-discover-feature a { height: 190px; }
  .fsx .x-discover-heading { align-items: stretch; flex-direction: column; gap: 18px; }
  .fsx .x-discover-heading .x-search { width: 100%; }
  .fsx .x-work-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fsx .x-work:first-child { grid-column: 1 / -1; }
  .fsx .x-work img, .fsx-home .x-work img { height: 220px; }
  .fsx .x-hero-name h1 { font-size: 44px; }
  .fsx .x-hero-name img { width: 54px; height: 54px; }
  .fsx .x-section { padding-block: 36px; }
  .fsx .x-section-head { flex-wrap: wrap; gap: 14px; }
  .fsx .x-creator-hero { min-height: 500px; height: calc(100svh - 160px); }
  .fsx .x-preview-layout { grid-template-columns: minmax(0,1fr); }
  .fsx .x-preview-stage { min-height: 250px; }
  .fsx .x-preview-stage > img,.fsx .x-preview-stage > video { height: 44dvh; }
  .fsx .x-preview-aside { gap: 12px; padding: 18px; }
  .fsx .x-join { align-items: flex-start; flex-direction: column; padding-block: 36px; }
  .fsx .x-join h2 { font-size: 24px; }
  .fsx .x-nocturne { height: calc(100svh - 180px); min-height: 520px; }
  .fsx .x-nocturne > img { object-position: 67% 50%; }
  .fsx .x-nocturne::before { background: linear-gradient(90deg,#232128ca,#23212848),linear-gradient(0deg,#23212880,transparent); }
  .fsx .x-nocturne-copy { top: 15%; left: 7%; max-width: 86%; }
  .fsx .x-nocturne h1 { font-size: 56px; }
  .fsx .x-nocturne h2 { font-size: 25px; }
  .fsx .x-nocturne-copy > p { font-size: 13px; max-width: 330px; }
  .fsx .x-nocturne-caption { display: none; }
  .fsx .x-principles { padding: 24px 7%; gap: 14px; }
  .fsx .x-principles span { display: block; margin: 4px 0 0; font-size: 10px; }
  .fsx .x-home-intro { grid-template-columns: 1fr; gap: 25px; }
  .fsx .x-home-intro h2 { font-size: 29px; }
}
@media (max-width: 560px) {
  .fs-design .ls-sns-page { margin-top: 16px; }
  .fs-design #lsFloatMenu { display: none; }
  .fs-design .ls-sns-main > .ls-post-list { columns: 1; }
  .fs-design .ls-sns-page .ls-top-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .fs-design .ls-sns-page .ls-top-nav-item[data-key*="-b"] { display: none; }
  .fs-design .ls-sns-page select.fs-all-boards { flex-basis: 126px; width: 126px; }
  .fsx .x-masonry { columns: 2; gap: 9px; }
  .fsx .x-masonry[data-density="large"] { columns: 1; }
  .fsx .x-density-label { display: none; }
  .fsx .x-gallery-tools { gap: 12px; }
  .fsx .x-gallery-tools .x-tabs button { padding-inline: 9px; }
  .fsx .x-art { margin-bottom: 9px; }
  .fsx .x-art .x-save { opacity: 1; }
  .fsx .x-creator-cover { height: 150px; }
  .fsx .x-creator-id { flex-wrap: wrap; }
  .fsx .x-creator-id .x-btn { padding: 6px 10px; min-height: 32px; }
  .fsx .x-creator-id .x-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .fsx .x-hero-name h1 { font-size: 36px; }
  .fsx .x-hero-name { align-items: flex-start; gap: 12px; }
  .fsx .x-hero-creator-copy { bottom: 80px; }
  .fsx .x-hero-meta { margin: 18px 0; }
  .fsx .x-work img { height: 175px; }
  .fsx .x-work:first-child img { height: 260px; }
  .fsx .x-catalog-item > img { height: 130px; }
  .fsx .x-catalog-item > div { padding: 12px; }
  .fsx .x-catalog-item p { min-height: 40px; }
  .fsx .x-nocturne h1 { font-size: 46px; }
  .fsx .x-nocturne h2 { font-size: 23px; }
  .fsx .x-nocturne-copy { top: 13%; }
  .fsx .x-nocturne .x-btn { padding: 11px 13px; font-size: 12px; }
  .fsx .x-nocturne .x-row { gap: 10px; }
  .fsx .x-nocturne-bottom { left: 7%; right: 7%; justify-content: space-between; gap: 10px; }
}
@media (max-width: 480px) {
  .fs-design .ls-header-inner { gap: 8px; }
  .fs-design .ls-header-inner > .fs-back-link { width: 30px; min-width: 30px; height: 30px; flex-shrink: 0; }
  .fs-design .ls-logo-icon { display: none; }
  .fs-design .ls-logo-text { font-size: 16px; }
  .fs-design .ls-header-right { gap: 2px; }
}
@media (max-width: 360px) {
  .fs-design .ls-header-right .ls-notifications { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fsx *, .fsx *::before, .fsx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fsx .x-reveal { opacity: 1; transform: none; }
}

/* fidelity.css */
/* Reference geometry, layered after the existing host integration. */
@font-face {
  font-family: "FS Audiowide"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("./fonts/audiowide-regular.ttf") format("truetype");
}
@font-face {
  font-family: "FS Shuhei"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("./fonts/alimama-shuhei-bold.woff2") format("woff2");
}
@font-face {
  font-family: "FS Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("./fonts/orbitron-variable.ttf") format("truetype");
}
@font-face {
  font-family: "FS Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("./fonts/space-grotesk-variable.ttf") format("truetype");
}
.fsx[hidden], .fsx [hidden] { display: none !important; }
.fsx-gallery {
  --x-ink: #0a0a0a; --x-muted: #737373; --x-line: #e5e5e5; --x-soft: #f8f8f8;
  padding: 16px 32px 40px;
}
.fsx-gallery > .x-tabs { display: flex; width: max-content; margin-bottom: 32px; }
.fsx.fsx-gallery > .x-tabs button { font-size: 14px; line-height: 20px; padding: 6px 17px; border-radius: 24px; }
.fsx .x-gallery-tools { grid-template-columns: 1fr minmax(240px, 576px) 1fr; margin-bottom: 32px; }
.fsx .x-gallery-tools .x-tabs { height: 40px; padding: 4px; align-items: center; }
.fsx .x-gallery-tools .x-tabs button { display: flex; align-items: center; gap: 6px; height: 32px; padding: 6px 10px; font-size: 12px; line-height: 20px; }
.fsx .x-gallery-tools .x-tabs button > i { font-size: 16px; }
.fsx-gallery .x-search { height: 40px; border-radius: 12px; box-shadow: 0 1px 2px #00000008; }
.fsx-gallery .x-tabs { border-radius: 14px; }
.fsx-gallery .x-tabs button { border-radius: 10px; }
.fsx .x-masonry { --masonry-columns: 8; --masonry-gap: 12; columns: 8; column-gap: 12px; }
.fsx .x-masonry[data-density="normal"] { --masonry-columns: 6; --masonry-gap: 16; columns: 6; }
.fsx .x-masonry[data-density="large"] { --masonry-columns: 4; --masonry-gap: 20; columns: 4; }
[data-masonry-ready="true"] { position: relative; columns: auto !important; display: block !important; }
[data-masonry-ready="true"] > :is(.x-art,.ls-post-item,.ls-feed-ad) { position: absolute; margin: 0 !important; }
.fsx .x-art { border-radius: 16px; margin-bottom: 12px; background: #f5f5f5; }
.fsx .x-art-media { display: block; min-height: 0; overflow: hidden; }
.fsx .x-art-media > img { display: block; width: 100%; height: auto; min-height: 0; }
.fsx .x-art-media.is-collage { display: grid; aspect-ratio: .8; gap: 2px; }
.fsx .x-art-media.is-collage > img { width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; object-fit: cover; }
.fsx .x-art-badge { top: 12px; left: 12px; font: 500 10px/16px Arial, sans-serif; padding: 3px 7px; border-radius: 4px; background: #171717b3; }
.fsx .x-play { width: 48px; height: 48px; background: #151515b3; }
.fsx .x-play > i { font-size: 26px; }
.fsx .x-art-badge > i { font-size: 12px; }
.fsx .x-art-caption { padding: 40px 14px 14px; }
.fsx .x-art-open:focus-visible { outline-offset: -4px; }
.fsx .x-art .x-save { border-radius: 50%; }
.fsx-gallery [aria-busy="true"] { opacity: 1; }
.fsx-gallery .x-state:empty { padding: 0; }

/* A full-viewport native dialog keeps the close control outside the panel. */
dialog.fsx.x-gallery-dialog {
  inset: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none;
  padding: 60px 32px; border: 0; border-radius: 0; background: transparent; overflow: hidden;
}
dialog.fsx.x-gallery-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.x-gallery-dialog > [data-close] {
  position: fixed; left: 24px; top: 24px; z-index: 2; width: 36px; height: 36px;
  border: 0; border-radius: 50%; color: #fff; background: #1b1b1ba6;
}
.fsx .x-gallery-modal {
  display: grid; grid-template-columns: minmax(0, 680fr) minmax(0, 420fr);
  width: min(1100px, 100%); height: 100%; margin: 0 auto; overflow: hidden;
  border-radius: 16px; background: var(--x-paper); box-shadow: 0 18px 70px #0003;
}
.fsx .x-media-pane { position: relative; min-height: 0; min-width: 0; background: #f5f5f5; }
.fsx .x-media-counter {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 2px 10px; border-radius: 20px; font-size: 13px; color: #fff; background: #626262;
}
.fsx .x-media-counter:empty { display: none; }
.fsx .x-media-view { position: absolute; inset: 64px 56px; display: grid; place-items: center; }
.fsx .x-media-view > :is(img,video) { display: block; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 14px; }
.fsx .x-media-view > img { max-height: min(600px, calc(100dvh - 248px)); }
.fsx .x-media-view > video { width: 100%; background: #101010; }
.fsx .x-media-pane > :is([data-prev],[data-next]) {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border: 0; border-radius: 50%; color: #fff; background: #0008;
}
.fsx .x-media-pane > [data-prev] { left: 8px; }
.fsx .x-media-pane > [data-next] { right: 8px; }
.fsx .x-media-pane > .x-icon:disabled { opacity: .28; cursor: default; }
.fsx .x-media-dots { position: absolute; bottom: 18px; left: 40px; right: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.fsx .x-media-dots button { width: 8px; height: 8px; border: 0; border-radius: 10px; background: #888; padding: 0; }
.fsx .x-media-dots button[aria-pressed="true"] { width: 16px; background: #080808; }
.fsx .x-detail-pane { min-height: 0; min-width: 0; border-left: 1px solid var(--x-line); display: flex; flex-direction: column; }
.fsx .x-detail-author { height: 65px; flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid var(--x-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fsx .x-detail-author > a:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.fsx .x-detail-author .x-avatar { width: 40px; height: 40px; }
.fsx .x-detail-author > a:last-child { color: #777; font-size: 18px; flex-shrink: 0; }
.fsx .x-detail-description { height: 362px; max-height: 44%; flex-shrink: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; scrollbar-width: thin; }
.fsx .x-detail-description h2 { font-size: 17px; line-height: 1.5; font-weight: 650; margin: 0 0 2px; }
.fsx .x-detail-description time { font-size: 12px; color: #777; }
.fsx .x-prompt-heading { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 10px; font-size: 12px; color: #777; }
.fsx .x-prompt-heading button { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: 12px; }
.fsx .x-prompt { margin: 0; border-radius: 14px; background: #f8f8f8; color: #111; padding: 14px 12px; font: 13px/2 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.fsx .x-detail-error { color: #8b4d3d; font-size: 12px; }
.fsx .x-detail-error:empty { display: none; }
.fsx .x-detail-comments { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--x-line); overscroll-behavior: contain; scrollbar-width: thin; }
.fsx .x-comment-empty { height: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 24px 124px; }
.fsx .x-comment-empty > i { font-size: 82px; line-height: 1; color: #d0d0d0; }
.fsx .x-comment-empty > :is(button,a) { background: transparent; border: 0; font-size: 14px; }
.fsx .x-detail-footer { height: 60px; min-height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--x-line); }
.fsx .x-detail-footer > button { display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; padding: 0; color: #777; background: none; font-size: 13px; white-space: nowrap; }
.fsx .x-detail-footer > button > i { font-size: 20px; }
.fsx .x-detail-footer .x-comment-entry { border-radius: 24px; height: 40px; line-height: 20px; padding: 8px 12px; background: #f8f8f8; flex: 1; justify-content: flex-start; min-width: 0; gap: 8px; }
.fsx .x-comment-entry span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsx .x-detail-footer .x-icon { flex: 0 0 20px; width: 20px; }
.fsx .x-detail-footer > [aria-pressed="true"] { color: #111; }
.fsx .x-comment-form { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid var(--x-line); }
.fsx .x-comment-form label { display: block; font-size: 12px; }
.fsx .x-comment-form textarea { display: block; width: 100%; min-height: 64px; max-height: 160px; border: 1px solid var(--x-line); background: var(--x-soft); border-radius: 6px; resize: vertical; padding: 8px; }
.fsx .x-comment-form > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; }
.fsx .x-detail-comment { display: flex; align-items: start; gap: 10px; padding: 16px; border-bottom: 1px solid var(--x-line); }
.fsx .x-detail-comment > div { min-width: 0; }
.fsx .x-detail-comment .x-avatar { width: 30px; height: 30px; }
.fsx .x-detail-comment strong { font-size: 12px; }
.fsx .x-detail-comment p { font-size: 13px; margin: 4px 0; }
.fsx .x-detail-comment time,.fsx .x-detail-comment div > a:last-child { color: var(--x-muted); font-size: 11px; margin-right: 8px; }
.fsx .x-comment-more { border: 0; padding: 12px; width: 100%; background: var(--x-soft); font-size: 12px; }
.fsx .x-video-fallback { position: absolute; bottom: 0; font-size: 13px; background: var(--x-paper); padding: 8px 12px; }

/* Forum cards retain the native action handlers and content nodes. */
.fs-design:has(.ls-sns-page) { background: #f8f8f8; }
.fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr) minmax(240px,17%); gap: 0 28px; margin-top: 22px; align-items: start; }
.fs-design .fs-feed-heading { grid-column: 1; grid-row: 1; display: flex; gap: 22px; align-items: center; padding: 0 0 16px; }
.fs-feed-heading a { font-size: 24px; line-height: 32px; color: #aaa; font-weight: 550; text-decoration: none; }
.fs-feed-heading a[aria-current] { color: #080808; }
.fs-feed-heading a:hover { color: #444; }
.fs-design .ls-sns-page .ls-top-nav-wrap { grid-row: 2; grid-column: 1; padding: 0 0 22px; align-items: center; gap: 12px; min-height: 0; background: transparent; border: 0; box-shadow: none; }
.fs-design .ls-sns-page .ls-top-nav { flex-wrap: wrap; gap: 6px; min-height: 0; padding: 0; }
.fs-design .ls-sns-page .ls-top-nav-item { font-size: 12px; font-weight: 400; height: 28px; min-height: 28px; line-height: 20px; padding: 3px 13px; border-radius: 20px; background: #f3f3f3; border-color: #e1e1e1; color: #637080; }
.fs-design .ls-sns-page .ls-top-nav-item.ls-active { background: #e8e8e8; border-color: #cfcfcf; color: #070707; box-shadow: inset 0 0 0 2px #f5f5f5; font-weight: 600; }
.fs-design .ls-sns-page select.fs-all-boards { border-radius: 20px; height: 28px; background: transparent; color: #637080; }
.fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 5; --masonry-gap: 10; grid-row: 3; columns: 5; column-gap: 10px; }
.fs-design .ls-sns-main > .ls-post-list > .ls-post-item { border: 1px solid #e8e8e8; border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.fs-design .ls-sns-main > .ls-post-list > .ls-feed-ad { padding: 0; border: 0; background: transparent; }
.fs-design .ls-sns-page .ls-post-header { align-items: center; gap: 9px; margin: 0 0 10px; min-height: 32px; }
.fs-design .ls-sns-page .ls-post-header .ls-avatar { width: 32px; height: 32px; flex-basis: 32px; }
.fs-design .ls-sns-page .ls-post-user-info { display: block; min-width: 0; flex: 1; }
.fs-design .ls-sns-page .ls-post-user-name { font-size: 12px; font-weight: 600; line-height: 16px; margin: 0; }
.fs-design .ls-sns-page .ls-post-meta { font-size: 11px; line-height: 16px; color: #929ca8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-design .ls-sns-page .ls-post-meta .ls-post-from,
.fs-design .ls-sns-page .ls-post-meta .ls-dot,
.fs-design .ls-sns-page .ls-online-dot { display: none; }
.fs-design .ls-sns-page .ls-board-link { border: 0; padding: 0; background: transparent; color: #9ca3ab; max-width: 70px; font-size: 10px; white-space: nowrap; }
.fs-design .ls-sns-page .ls-article-title { font-size: 13px; line-height: 1.55; font-weight: 500; margin-bottom: 6px; color: #111; }
.fs-design .ls-sns-page :is(.ls-article-desc,.ls-post-content) { font-size: 13px; line-height: 1.6; color: #111; -webkit-line-clamp: 9; }
.fs-design .ls-sns-page .ls-article-cover-box { aspect-ratio: auto; margin-top: 4px; border: 1px solid #e1e1e1; border-radius: 12px; }
.fs-design .ls-sns-page .ls-article-cover { height: auto; max-height: 480px; width: 100%; object-fit: cover; }
.fs-design .ls-sns-page .ls-article-thumbs { gap: 2px; border-radius: 12px; }
.fs-design .ls-sns-page .ls-post-footer { padding-top: 8px; margin: 0; flex-wrap: wrap; gap: 6px; }
.fs-design .ls-sns-page .ls-actions { gap: 12px; width: 100%; color: #a0a0a0; }
.fs-design .ls-sns-page .ls-action-btn { font-size: 11px; gap: 4px; color: #959da6; }
.fs-design .ls-sns-page .ls-action-btn i { font-size: 14px; }
.fs-design .ls-sns-page .fs-collect { margin-left: auto; }
.fs-design .ls-sns-page .ls-post-more { margin-left: 0; font-size: 15px; }
.fs-design .ls-sns-page .ls-post-tags { margin: 0; }
.fs-design .ls-sns-page .ls-tag-item { font-size: 10px; border: 1px solid #dcdeee; color: #77639e; background: #f8f5ff; border-radius: 20px; padding: 1px 6px; }
.fs-design .ls-sns-page .fs-video-post .ls-article-cover-box { order: -1; margin-top: 0; border: 0; }
.fs-design .ls-sns-page .fs-video-post .ls-article-title { font-weight: 600; }
.fs-design .ls-sns-page > .ls-sidebar-right { grid-row: 1 / span 5; width: 100%; min-width: 0; padding-left: 24px; }
.fs-design .ls-sidebar-right :is(.ls-widget,.ls-sidebar-widget) { min-width: 0; width: 100%; }
.fs-design .ls-sidebar-right :is(h3,p,a,span) { overflow-wrap: anywhere; }
.fs-design .ls-sidebar-right .ls-widget-header:has(.newcomer-title-block) { flex-wrap: wrap; gap: 8px; }
.fs-design .ls-sidebar-right .newcomer-title-block { flex: 1 0 auto; }
.fs-design .ls-sidebar-right .newcomer-title-block h3 { white-space: nowrap; }
.fs-design .ls-sidebar-right .newcomer-header-link { flex-basis: 100%; }

/* Creators: marquee, one tall spotlight with four companions, portrait wall. */
.fsx-creators { --x-ink: #090909; --x-muted: #8d8d8d; --x-line: #e6e5e2; }
.fsx-creators .x-wrap { width: calc(100% - 80px); max-width: 1500px; }
.fsx-creators .x-creator-hero { min-height: 660px; height: calc(100svh - 36px); max-height: 1100px; }
.fsx-creators .x-creator-hero > img { object-position: center; animation: x-creator-enter 900ms ease both; }
.fsx-creators .x-creator-hero::before { background: linear-gradient(90deg,#15151585,transparent 85%),linear-gradient(0deg,#111c,transparent 70%); }
.fsx-creators .x-curated { position: absolute; right: 7%; top: 115px; font-size: 11px; color: #fff9; }
.fsx-creators .x-hero-creator-copy { left: 7%; bottom: 110px; right: auto; width: 800px; max-width: 80%; }
.fsx-creators .x-hero-creator-copy .x-kicker { color: #a4cfc4; display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.fsx-creators .x-hero-creator-copy .x-kicker::before { content: ""; width: 45px; height: 1px; background: #89b8aa; }
.fsx-creators .x-hero-name { gap: 24px; margin-bottom: 20px; }
.fsx-creators .x-hero-name img { width: 74px; height: 74px; border: 2px solid #d5cdaa; }
.fsx-creators .x-hero-name h1 { font-family: "FS Orbitron", "Microsoft YaHei", sans-serif; font-size: 112px; line-height: 1.05; color: #d4c078; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.fsx-creators :is(.x-hero-meta strong,.x-creator-stats strong,.x-kicker) { font-family: "FS Orbitron", "Microsoft YaHei", sans-serif; }
.fsx-creators .x-hero-creator-copy > p:not(.x-kicker) { font: 400 23px/1.5 Georgia, "Noto Serif SC", serif; max-width: 610px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fsx-creators .x-hero-meta { gap: 0; margin: 30px 0; }
.fsx-creators .x-hero-meta > div { min-width: 100px; padding: 0 26px; border-left: 1px solid #ffffff30; }
.fsx-creators .x-hero-meta > div:first-child { padding-left: 0; border: 0; }
.fsx-creators .x-hero-meta strong { font-size: 21px; font-weight: 650; }
.fsx-creators .x-hero-meta small { font-size: 10px; color: #c1c1c1; }
.fsx-creators .x-hero-creator-copy .x-btn { font-size: 12px; border-radius: 0; padding: 13px 20px; border-color: #ffffff26; }
.fsx-creators .x-hero-controls { bottom: 38px; right: 7%; }
.fsx-creators .x-hero-controls .x-icon { background: transparent; border: 0; border-radius: 0; }
.fsx-creators .x-creator-scroll { position: absolute; bottom: 26px; left: 50%; display: grid; justify-items: center; gap: 16px; font-size: 10px; color: #e5e5e5; }
.fsx-creators .x-creator-scroll span { height: 40px; width: 1px; background: #d4c078; }
.fsx-creators .x-section { padding: 110px 0 0; border: 0; scroll-margin-top: 72px; }
.fsx-creators .x-section-head { align-items: end; margin-bottom: 36px; }
.fsx-creators .x-section-head h2 { font-size: 64px; line-height: 1.05; font-weight: 700; }
.fsx-creators .x-section-head .x-kicker { color: #429783; font-size: 10px; margin-bottom: 12px; }
.fsx-creators .x-section-head > p { font-size: 11px; color: #888; padding-bottom: 6px; }
.fsx-creators .x-section-rule { height: 1px; flex: 1; background: #d4c07866; margin-bottom: 8px; }
.fsx-creators .x-spotlight-grid { display: grid; grid-template-columns: 2.05fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0,1fr)); gap: 18px; }
.fsx-creators .x-spotlight-grid > .x-creator:first-child { grid-row: 1 / span 2; }
.fsx-creators .x-creator { min-width: 0; border: 1px solid #e6e5e2; border-radius: 14px; overflow: hidden; background: #fff; position: relative; }
.fsx-creators .x-creator-art { display: block; overflow: hidden; aspect-ratio: 1; }
.fsx-creators .x-creator-cover { height: 100%; width: 100%; object-fit: cover; border-radius: 0; transition: transform 500ms; }
.fsx-creators .x-creator-art:hover .x-creator-cover { transform: scale(1.035); }
.fsx-creators .x-creator-card-body { padding: 14px 14px 12px; }
.fsx-creators .x-creator-id { margin: 0 0 12px; gap: 10px; flex-wrap: nowrap; }
.fsx-creators .x-creator-id h3 { font-size: 13px; line-height: 1.5; }
.fsx-creators .x-creator-id p { font-size: 10px; line-height: 1.5; color: #8d8d8d; margin-top: 3px; }
.fsx-creators .x-creator-id .x-avatar { width: 38px; height: 38px; flex-basis: 38px; border: 1px solid #e5dcc0; padding: 2px; }
.fsx-creators .x-creator-arrow { align-self: start; }
.fsx-creators .x-creator-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.fsx-creators .x-creator-stats > div { padding: 0 8px; border-left: 1px solid #ddd; }
.fsx-creators .x-creator-stats > div:first-child { padding-left: 0; border: 0; }
.fsx-creators .x-creator-stats strong { font-size: 14px; line-height: 1.4; }
.fsx-creators .x-creator-stats small { display: block; font-size: 10px; color: #8d8d8d; }
.fsx-creators .x-spotlight-grid > .x-creator:first-child .x-creator-art { position: absolute; inset: 0; aspect-ratio: auto; }
.fsx-creators .x-spotlight-grid > .x-creator:first-child .x-creator-card-body { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; background: linear-gradient(transparent,#000c); padding: 80px 26px 26px; }
.fsx-creators .x-spotlight-grid > .x-creator:first-child :is(p,small) { color: #e1e1e1; }
.fsx-creators .x-spotlight-grid > .x-creator:first-child h3 { font-size: 22px; }
.fsx-creators #constellation > .x-search { width: 300px; margin: 0 0 24px auto; background: transparent; border-radius: 0; height: 38px; }
.fsx-creators .x-creator-wall { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px; }
.fsx-creators .x-creator-wall .x-creator-art { aspect-ratio: .85; }
.fsx-creators .x-join { text-align: center; flex-direction: column; justify-content: center; padding: 140px 0 110px; }
.fsx-creators .x-join h2 { font-size: 48px; margin: 18px 0; }
.fsx-creators .x-join .x-kicker { font-size: 10px; color: #429783; }
.fsx-creators .x-join .x-btn { border-radius: 0; border-color: #222; padding: 14px 28px; }
@keyframes x-creator-enter { from { opacity: .4; transform: scale(1.02); } to { opacity: 1; transform: none; } }

/* Shared branding and transparent-to-glass navigation. */
.fs-design .ls-logo-icon img,.fs-design[data-fs-theme="dark"] .ls-logo-icon img { filter: none; }
.fs-design .ls-footer-logo { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.fs-design .ls-footer-logo .ls-logo-icon { height: 32px; width: 32px; flex-shrink: 0; }
.fs-design .ls-footer-logo :is(.ls-logo-image,.ls-logo-svg) { max-width: 200px; max-height: 48px; object-fit: contain; }
.fs-design .ls-logo-image { max-height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.fs-design .ls-header-right .fs-menu-toggle { display: none; }
.fs-design .ls-main-nav { justify-content: center; }
body.fs-design.fs-immersive { padding-top: 0; }
.fs-design.fs-immersive .ls-header { background: #2321280a; border-bottom: 1px solid #ffffff20; color: #fff; backdrop-filter: none; }
.fs-design.fs-immersive .ls-header :is(.ls-logo-text,.ls-nav-item > a,.ls-icon-btn,.ls-search-trigger) { color: #fff !important; }
.fs-design.fs-immersive .ls-header .ls-nav-item > a { background: transparent; }
.fs-design.fs-immersive .ls-header .ls-nav-item > a:hover { background: #ffffff15; }
.fs-design.fs-immersive.fs-header-scrolled .ls-header { background: #232128db; backdrop-filter: blur(16px); border-bottom-color: #ffffff20; }
.fs-design.fs-immersive .fs-back-link { color: #fff; background: transparent; border-color: #ffffff40; }
.fs-design.fs-immersive .ls-create-btn { background: #fff; color: #222; border-color: #fff; }

/* Tokyo Nocturne uses the document palette and a continuous photographic plane. */
.fsx-home { --nocturne-bg: #232128; --nocturne-surface: #35333a; --nocturne-mid: #535156; --nocturne-muted: #8b898b; --nocturne-white: #f2f1ee; }
.fsx-home .x-nocturne { min-height: 640px; height: calc(100svh - 64px); max-height: 1100px; }
.fsx-home .x-nocturne > img { object-position: center; filter: saturate(.08) brightness(1.2) contrast(.75); animation: x-nocturne-drift 22s ease-in-out infinite alternate; }
.fsx-home.x-motion-paused .x-nocturne > img { animation-play-state: paused; }
.fsx-home [data-home-motion] { position: absolute; right: 4%; top: 104px; border-radius: 50%; border-color: #ffffff40; color: #eee; background: #23212860; }
.fsx-home .x-nocturne::before { background: linear-gradient(180deg,#16141966,transparent 38%,#23212880); }
.fsx-home .x-nocturne-copy { top: 126px; left: 4%; width: 960px; max-width: 85%; }
.fsx-home .x-nocturne .x-kicker { font-size: 10px; color: #ddd; margin: 0 0 16px; }
.fsx-home .x-nocturne h1 { font-family: "FS Space Grotesk", sans-serif; font-size: 132px; font-weight: 600; line-height: .93; margin: 0; color: #f0efeb; }
.fsx-home .x-nocturne h1 span { display: block; white-space: nowrap; }
.fsx-home .x-nocturne-subtitle { display: flex; justify-content: space-between; width: 735px; max-width: 100%; font-size: 18px; color: #dedbde; margin-top: 18px; }
.fsx-home .x-nocturne-story { position: absolute; left: 53%; bottom: 18%; width: 410px; max-width: 42%; }
.fsx-home .x-nocturne-story > p { font-size: 14px; color: #e6e3e6; line-height: 1.9; margin-bottom: 24px; }
.fsx-home .x-nocturne .x-btn { padding: 12px 18px; border-radius: 0; font-size: 12px; }
.fsx-home .x-nocturne-bottom { left: 4%; bottom: 28px; }
.fsx-home .x-nocturne-caption { right: 4%; bottom: 28px; }
.fsx-home .x-wrap { max-width: 1280px; }
.fsx-home .x-principles { padding: 28px 4%; background: #232128; }
.fsx-home .x-section { padding-block: 96px; }
.fsx-home .x-reveal { transition: opacity 600ms, transform 600ms; }
@keyframes x-nocturne-drift { from { transform: scale(1); } to { transform: scale(1.04); } }
body.fs-design:has(.fsx-home) .ls-footer {
  --fs-surface: #232128; --fs-surface-muted: #35333a; --fs-foreground: #e5e3e8;
  --fs-secondary: #bcb9c1; --fs-muted: #bcb9c1; --fs-border: #535156;
  background: #232128; color: #e5e3e8; border-color: #535156;
}
body.fs-design:has(.fsx-home) .ls-footer :is(.ls-footer-main,.ls-footer-bottom) {
  background: #232128; color: #e5e3e8; border-color: #535156;
}
body.fs-design:has(.fsx-home) .ls-footer :is(a,h4,.ls-logo-text) { color: #e5e3e8 !important; }
body.fs-design:has(.fsx-home) .ls-footer :is(p,.ls-footer-desc) { color: #bcb9c1; }

@media (max-width: 1700px) {
  .fsx .x-masonry { --masonry-columns: 7; columns: 7; }
  .fsx .x-masonry[data-density="normal"] { --masonry-columns: 5; columns: 5; }
  .fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 4; columns: 4; }
}
@media (max-width: 1400px) {
  .fsx .x-masonry { --masonry-columns: 6; columns: 6; }
  .fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 3; columns: 3; }
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr) minmax(230px,21%); gap: 0 24px; }
  .fsx-home .x-nocturne h1 { font-size: 108px; }
  .fsx-home .x-nocturne-subtitle { width: 610px; }
  .fsx-creators .x-hero-name h1 { font-size: 72px; }
}
@media (max-width: 1100px) {
  .fsx .x-masonry { --masonry-columns: 4; columns: 4; }
  .fsx .x-masonry[data-density="normal"] { --masonry-columns: 3; columns: 3; }
  .fsx .x-masonry[data-density="large"] { --masonry-columns: 2; columns: 2; }
  .fsx .x-gallery-tools { grid-template-columns: auto minmax(180px,1fr) auto; gap: 16px; }
  .fsx .x-gallery-tools .x-search { grid-row: auto; grid-column: auto; }
  .fsx .x-gallery-tools > :last-child { grid-row: auto; grid-column: auto; }
  .fsx-gallery { padding-inline: 24px; }
  .fs-design .ls-sns-page { grid-template-columns: minmax(0,1fr); }
  .fs-design .ls-sns-page > .ls-sidebar-right { display: none; }
  .fsx-creators .x-wrap { width: calc(100% - 48px); }
  .fsx-creators .x-section { padding-top: 72px; }
  .fsx-creators .x-section-head h2 { font-size: 48px; }
  .fsx-creators .x-spotlight-grid { gap: 12px; }
  .fsx-creators .x-creator-wall { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
  .fsx-home .x-nocturne h1 { font-size: 88px; }
  .fsx-home .x-nocturne-subtitle { width: 495px; }
}
@media (max-width: 880px) {
  :root { --fs-header: 64px; }
  .fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 2; columns: 2; }
  .fs-design .ls-header { height: 64px; }
  .fs-design .ls-main-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0; width: 100%;
    height: auto; max-height: calc(100dvh - 64px); padding: 16px; flex-direction: column;
    align-items: stretch; background: var(--fs-surface); border-bottom: 1px solid var(--fs-border);
  }
  .fs-design .fs-menu-open .ls-main-nav { display: flex; }
  .fs-design .ls-nav-item > a { width: 100%; justify-content: flex-start; }
  .fs-design .ls-header-right .fs-menu-toggle { display: inline-grid; place-items: center; }
  .fs-design.fs-immersive .ls-main-nav { background: #232128f5; backdrop-filter: blur(16px); }
  .fsx .x-gallery-tools { grid-template-columns: 1fr auto; gap: 16px; }
  .fsx .x-gallery-tools > .x-search { grid-column: 1 / -1; grid-row: 2; }
  .fsx .x-gallery-tools > :last-child { grid-column: 2; grid-row: 1; }
  .fsx .x-gallery-modal { grid-template-columns: minmax(0,1fr) minmax(0,340px); }
  .fsx .x-media-view { inset: 54px 32px; }
  dialog.fsx.x-gallery-dialog { padding: 56px 20px 24px; }
  .fsx .x-detail-footer { gap: 8px; padding-inline: 12px; }
  .fsx .x-detail-footer > button:not(.x-comment-entry) > span { display: none; }
  .fsx-creators .x-creator-hero { min-height: 600px; }
  .fsx-creators .x-hero-name h1 { font-size: 56px; }
  .fsx-creators .x-spotlight-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .fsx-creators .x-spotlight-grid > .x-creator:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 1.4; }
}
@media (max-width: 640px) {
  .fsx-gallery { padding: 18px 16px 24px; }
  .fsx-gallery > .x-tabs { margin-bottom: 26px; }
  .fsx .x-gallery-tools { margin-bottom: 22px; gap: 14px 8px; }
  .fsx .x-masonry { --masonry-columns: 2; --masonry-gap: 10; columns: 2; }
  .fsx .x-masonry[data-density="normal"] { --masonry-columns: 2; --masonry-gap: 16; columns: 2; }
  .fsx .x-masonry[data-density="large"] { --masonry-columns: 1; columns: 1; }
  .fsx .x-density-label { display: none; }
  .fsx .x-gallery-tools .x-tabs { gap: 0; padding: 3px; }
  .fsx .x-gallery-tools .x-tabs button { padding: 6px 9px; }
  .fsx .x-art { border-radius: 12px; }
  .fsx .x-art .x-save { opacity: 0; }
  .fsx .x-art:focus-within .x-save,.fsx .x-art .x-save[aria-pressed="true"] { opacity: 1; }
  .fsx .x-art-badge { top: 8px; left: 8px; }
  dialog.fsx.x-gallery-dialog { padding: 48px 8px 8px; }
  .x-gallery-dialog > [data-close] { top: 8px; left: 12px; width: 32px; height: 32px; }
  .fsx .x-gallery-modal { display: flex; flex-direction: column; border-radius: 12px; overflow-y: auto; }
  .fsx .x-media-pane { height: 48dvh; min-height: 260px; flex: 0 0 48dvh; }
  .fsx .x-media-view { inset: 38px 34px 28px; }
  .fsx .x-media-view > img { max-height: calc(48dvh - 66px); }
  .fsx .x-media-dots { bottom: 12px; }
  .fsx .x-media-pane > .x-icon { width: 30px; height: 30px; }
  .fsx .x-media-pane > [data-prev] { left: 4px; }
  .fsx .x-media-pane > [data-next] { right: 4px; }
  .fsx .x-detail-pane { min-height: 420px; flex: 1 0 auto; border-left: 0; }
  .fsx .x-detail-author { height: 56px; }
  .fsx .x-detail-description { height: 220px; max-height: none; }
  .fsx .x-detail-comments { min-height: 170px; max-height: 350px; flex: 1 0 170px; }
  .fsx .x-detail-footer { position: sticky; bottom: 0; background: var(--x-paper); min-height: 56px; }
  .fsx .x-comment-empty > i { font-size: 50px; }
  .fsx .x-comment-empty { padding: 24px; }
  .fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 2; columns: 2; }
  .fs-design .fs-feed-heading { gap: 20px; padding-bottom: 12px; }
  .fs-feed-heading a { font-size: 22px; }
  .fs-design .ls-sns-page .ls-top-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fs-design .ls-sns-page .ls-top-nav-item { flex-shrink: 0; }
  .fs-design .ls-sns-page .ls-top-nav-item[data-key*="-b"] { display: none; }
  .fsx-creators .x-wrap { width: calc(100% - 32px); }
  .fsx-creators .x-creator-hero { min-height: 560px; max-height: 800px; height: calc(100svh - 30px); }
  .fsx-creators .x-hero-creator-copy { bottom: 112px; max-width: 86%; }
  .fsx-creators .x-hero-name h1 { font-size: 42px; }
  .fsx-creators .x-hero-name { gap: 14px; }
  .fsx-creators .x-hero-name img { width: 52px; height: 52px; }
  .fsx-creators .x-hero-creator-copy .x-kicker { margin-bottom: 20px; font-size: 10px; }
  .fsx-creators .x-hero-creator-copy > p:not(.x-kicker) { font-size: 18px; }
  .fsx-creators .x-hero-meta > div { min-width: 90px; padding-inline: 18px; }
  .fsx-creators .x-curated { top: 94px; }
  .fsx-creators .x-hero-controls { bottom: 32px; }
  .fsx-creators .x-creator-scroll { left: 7%; bottom: 26px; }
  .fsx-creators .x-creator-scroll span { height: 24px; }
  .fsx-creators .x-section { padding-top: 56px; }
  .fsx-creators .x-section-head { gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
  .fsx-creators .x-section-head h2 { font-size: 40px; }
  .fsx-creators .x-section-head > p { flex-basis: 100%; }
  .fsx-creators .x-creator-wall { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .fsx-creators .x-creator-card-body { padding: 10px; }
  .fsx-creators .x-creator-id { gap: 7px; align-items: start; }
  .fsx-creators .x-creator-id .x-avatar { width: 28px; height: 28px; flex-basis: 28px; }
  .fsx-creators .x-creator-id h3 { font-size: 12px; }
  .fsx-creators .x-creator-id p { font-size: 9px; }
  .fsx-creators .x-creator-arrow { display: none; }
  .fsx-creators .x-creator-stats > div { padding-inline: 5px; }
  .fsx-creators .x-creator-stats small { font-size: 9px; }
  .fsx-creators .x-creator-stats strong { font-size: 12px; }
  .fsx-creators #constellation > .x-search { width: 100%; }
  .fsx-creators .x-join { padding: 80px 0 72px; }
  .fsx-creators .x-join h2 { font-size: 30px; }
  .fsx-home .x-nocturne { min-height: 620px; height: calc(100svh - 48px); }
  .fsx-home .x-nocturne-copy { top: 126px; left: 6%; max-width: 88%; }
  .fsx-home .x-nocturne h1 { font-size: 56px; line-height: 1; }
  .fsx-home .x-nocturne-subtitle { width: 100%; font-size: 13px; margin-top: 12px; }
  .fsx-home .x-nocturne-story { left: 6%; right: 6%; width: auto; max-width: none; bottom: 100px; }
  .fsx-home .x-nocturne-story > p { font-size: 13px; }
  .fsx-home .x-nocturne-bottom { left: 6%; right: 6%; bottom: 26px; }
  .fsx-home .x-section { padding-block: 64px; }
  .fsx-home .x-principles { padding: 24px 6%; gap: 20px; }
  .fs-design .ls-logo-icon { display: block; width: 28px; height: 28px; }
  .fs-design .ls-header-right { gap: 0; }
}
@media (max-width: 440px) {
  .fs-design .ls-sns-main > .ls-post-list { --masonry-columns: 1; columns: 1; }
  .fs-design .ls-logo-text { font-size: 17px; }
  .fs-design .ls-header-right .ls-notifications { display: none; }
  .fsx-home .x-nocturne h1 { font-size: 46px; }
}
[data-fs-theme="dark"] .fsx-gallery,
[data-fs-theme="dark"] .fsx-creators { --x-ink: #f3f3f3; --x-muted: #b0b0b0; --x-line: #393939; --x-soft: #272727; --x-paper: #1b1b1b; }
[data-fs-theme="dark"] .fsx :is(.x-media-pane,.x-prompt,.x-comment-entry,.x-creator) { background: #252525; color: #eee; }
.fs-design[data-fs-theme="dark"]:has(.ls-sns-page) { background: #191919; }
.fs-design[data-fs-theme="dark"] .ls-sns-page :is(.ls-post-item,.ls-top-nav-item) { background: #222; border-color: #363636; color: #ccc; }
.fs-design[data-fs-theme="dark"] :is(.fs-feed-heading a[aria-current],.ls-article-title,.ls-article-desc,.ls-post-content) { color: #eee; }
.fs-design[data-fs-theme="dark"] .ls-sns-page .ls-top-nav-item.ls-active { background: #444; box-shadow: none; color: white; }
@media (prefers-reduced-motion: reduce) {
  .fsx *, .fsx *::before, .fsx *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .fsx-home [data-home-motion] { display: none; }
}

/* reference.css */
/* The live content and native actions remain owned by LightSNS. */
:root, body.fs-design, body.fs-skin {
  --fs-accent:#111; --fs-accent-hover:#333; --fs-on-accent:#fff;
  --ls-primary:#111; --ls-primary-hover:#333; --ls-primary-light:#f2f2f2;
  --ls-color-primary:#111; --ls-primary-rgb:17,17,17;
  --ls-success:#333; --ls-success-rgb:51,51,51;
  --fs-header:88px; --fs-announcement-height:0px;
}
.fsx, .fsx * { letter-spacing:0; }
.fsx { --x-ink:#111; --x-muted:#7b7b7b; --x-line:#e6e6e6; --x-soft:#f8f8f8; --x-paper:#fff; }
.fsx .x-btn-primary { background:#111; border-color:#111; color:#fff; }
.fsx .x-btn-primary:hover { background:#333; border-color:#333; }
.fs-design .ls-header :is(.ls-logo-text,.ls-nav-item>a) { letter-spacing:0; }
body.fs-design { padding-top:calc(var(--fs-header) + var(--fs-announcement-height)); }
body.fs-design.fs-has-announcement { --fs-announcement-height:40px; }
.fs-announcement {
  position:fixed; z-index:1002; inset:0 0 auto; height:40px; display:flex;
  align-items:center; justify-content:center; background:#171717; color:#fff;
  font-size:12px; line-height:20px; padding:0 50px;
}
.fs-announcement>a { display:flex; align-items:center; gap:12px; min-width:0; max-width:900px; color:inherit; text-decoration:none; }
.fs-announcement b { border-radius:20px; font:700 9px/15px Arial,sans-serif; padding:0 7px; color:#111; background:#fff; }
.fs-announcement a>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-announcement strong { white-space:nowrap; font-weight:500; flex-shrink:0; }
.fs-announcement>button { position:absolute; right:20px; color:#aaa; border:0; background:none; width:24px; height:24px; cursor:pointer; }
.fs-design>.ls-header {
  top:var(--fs-announcement-height); height:var(--fs-header); border-bottom:1px solid #f0f0f0;
  box-shadow:none; background:#ffffffec; backdrop-filter:blur(18px);
  transition:background .25s,border-color .25s,color .25s;
}
.fs-design .ls-header-inner { max-width:none; width:100%; padding:0 32px; gap:24px; }
.fs-design .ls-header-left { flex:1; min-width:0; gap:40px; }
.fs-design .ls-logo { flex-shrink:0; gap:10px; }
.fs-design .ls-logo-text { font-family:"FS Orbitron",sans-serif; font-size:25px; font-weight:600; }
.fs-design .ls-logo-icon { height:36px; width:36px; }
.fs-design .ls-main-nav { margin-left:auto; gap:8px; width:auto; flex:0 1 auto; }
.fs-design .ls-nav-item>a {
  border-radius:0; font-size:14px; font-weight:500; height:40px; padding:8px 10px;
  color:#737373; transition:color .2s,opacity .2s; background:none!important;
}
.fs-design .ls-nav-item>a:hover,.fs-design .ls-nav-item>a[aria-current="page"] { color:#111; }
.fs-design .ls-nav-item>a>i:not(.ls-nav-arrow) { display:none; }
.fs-design .ls-header-right { gap:12px; flex-shrink:0; }
.fs-design .ls-icon-btn,.fs-design .ls-search-trigger { width:32px; height:32px; border:0; background:none; }
.fs-design .ls-create-btn { border-radius:24px; height:34px; padding:6px 16px; font-size:12px; background:#111; color:#fff; }
.fs-design .ls-create-menu-icon { background:#ececec!important; color:#111!important; }
.fs-design.fs-immersive { padding-top:var(--fs-announcement-height); }
.fs-design.fs-immersive>.ls-header { background:#1515150d; border-bottom-color:#ffffff12; }
.fs-design.fs-immersive.fs-header-scrolled>.ls-header { background:#111111df; border-bottom-color:#ffffff1a; }
.fs-design.fs-immersive .ls-header :is(.ls-logo-text,.ls-nav-item>a,.ls-icon-btn,.ls-search-trigger) { color:#fff!important; }
.fs-design.fs-immersive .ls-nav-item>a { opacity:.65; }
.fs-design.fs-immersive .ls-nav-item>a:hover,.fs-design.fs-immersive .ls-nav-item>a[aria-current] { opacity:1; }
.fs-design.fs-immersive .ls-create-btn { color:#111; background:#fff; border-color:#fff; }
.fs-design .ls-nav-badge { color:#555!important; background:#eee!important; }
.fs-design.fs-immersive .ls-nav-badge { color:#111!important; background:#fff!important; }
.fs-design :is(.ls-btn-primary,.ls-login-btn,.ls-guest-login) { background:#111; border-color:#111; color:#fff; }
.fs-design :is(.ls-online-dot,.ls-status-online) { background:#777!important; }
.fs-design :is(.ls-text-success,.text-green-500,.text-emerald-500) { color:#444!important; }
.fs-design :is(.ls-tag-item,.ls-badge-verify) { color:#555; }
.fsx .x-art { transition:box-shadow .25s,opacity .25s; }
.fsx .x-art-open img { transition:transform .5s ease; }
.fsx .x-art-open:hover img { transform:scale(1.025); }
.fsx .x-art-open { display:block; width:100%; text-align:left; }
.fsx-gallery { padding-top:20px; }
.fsx-gallery>.x-tabs { margin-bottom:28px; }
.fsx .x-art-media.is-collage { aspect-ratio:.8; }
.fsx .x-gallery-tools { margin-bottom:32px; }
.fsx .x-art-badge { font-size:11px; }
.fsx .x-discover-caption {
  display:grid; gap:5px; padding:16px 42px 16px 16px; position:relative; background:var(--x-paper);
  border:1px solid var(--x-line); border-top:0; border-radius:0 0 16px 16px;
}
.fsx .x-discover-caption strong { font-size:15px; font-weight:600; }
.fsx .x-discover-caption>span { font-size:12px; line-height:1.7; color:var(--x-muted); }
.fsx .x-discover-caption>i { position:absolute; right:16px; top:17px; font-size:18px; }
.fsx-discover .x-art-media { aspect-ratio:4/3; }
.fsx-discover .x-art-media img { height:100%; object-fit:cover; }
.fsx-discover .x-gallery-tools { grid-template-columns:1fr minmax(240px,576px) 1fr; }
.fsx-discover .x-catalog-masonry { --masonry-columns:4; --masonry-gap:20; }

/* Forum categories take the place of the removed secondary heading. */
.fs-design .ls-sns-page { gap:28px; grid-template-columns:minmax(0,1fr) minmax(250px,18%); }
.fs-design .ls-sns-page .ls-top-nav-wrap { grid-column:1/-1; grid-row:1; padding:0 0 2px; gap:24px; }
.fs-design .ls-sns-page .ls-top-nav { gap:24px; flex:1; min-width:0; flex-wrap:nowrap; overflow:auto; scrollbar-width:none; }
.fs-design .ls-sns-page .ls-top-nav-item {
  font-size:22px; line-height:32px; height:auto; min-height:36px; padding:0; color:#a3a3a3;
  font-weight:650; border:0; background:none; border-radius:0; white-space:nowrap;
  box-shadow:none; flex-shrink:0; transition:color .2s;
}
.fs-design .ls-sns-page .ls-top-nav-item.ls-active,
.fs-design .ls-sns-page .ls-top-nav-item:hover { color:#111; border:0; background:none; box-shadow:none; }
.fs-design .ls-sns-page .ls-top-nav-item:after { display:none; }
.fs-design .ls-sns-page select.fs-all-boards {
  border:0; border-radius:0; min-width:110px; width:auto; max-width:180px;
  height:36px; background:none; color:#555; font-size:14px; padding:0 22px 0 8px;
}
.fs-design .ls-sns-main>.ls-post-list { grid-row:2; }
.fs-design .ls-sns-page :is(.ls-post-article,.ls-action-btn,.ls-post-more,.ls-top-nav-item) { cursor:pointer; }
.fs-design .ls-sns-page :is(.ls-post-article,.ls-action-btn,.ls-post-more,.ls-top-nav-item):is(:hover,:active) { transform:none; }
.fs-design .ls-sns-page .ls-post-article :is(.ls-article-title,.ls-article-desc,img) { cursor:inherit; }
.fs-design .ls-sns-page>.ls-sidebar-right { grid-row:2/span 5; padding-left:20px; }
.fs-design .ls-sns-page .ls-post-tags .ls-tag-item { color:#666; background:#f6f6f6; border-color:#e4e4e4; }
.fs-design .ls-sidebar-right :is(.newcomer-primary-btn,.ls-btn-primary) { background:#111!important; border-color:#111!important; color:#fff!important; }
.fs-design .ls-sidebar-right :is(.sign-btn.is-signed,.newcomer-action-btn.is-follow) { background:#f2f2f2!important; color:#444!important; border-color:#ddd!important; }
.fs-design .ls-sidebar-right :is(.sign-btn.is-signed,.newcomer-action-btn.is-follow) * { color:inherit!important; }
.fs-design:has([data-fs-experience],.ls-sns-page)>.ls-header .fs-back-link { display:none; }

/* Creator geometry follows the editorial reference; all UI accents are neutral. */
.fsx-creators .x-hero-creator-copy .x-kicker { color:#ddd; }
.fsx-creators .x-hero-creator-copy .x-kicker:before,
.fsx-creators .x-creator-scroll span { background:#ddd; }
.fsx-creators .x-hero-name h1 { color:#fff; }
.fsx-creators .x-hero-name img,.fsx-creators .x-creator-id .x-avatar { border-color:#ddd; }
.fsx-creators .x-section-head .x-kicker,.fsx-creators .x-join .x-kicker { color:#666; }
.fsx-creators .x-section-rule { background:#ddd; }
.fsx-creators .x-creator-hero { height:calc(100svh - 40px); }
.fsx-creators .x-spotlight-grid[data-count="2"] { grid-template-columns:1.5fr 1fr; grid-template-rows:auto; }
.fsx-creators .x-spotlight-grid[data-count="2"]>.x-creator:first-child { grid-row:auto; }
.fsx-creators .x-spotlight-grid[data-count="1"] { grid-template-columns:minmax(0,680px); grid-template-rows:auto; }
.fsx-creators .x-spotlight-grid[data-count="1"]>.x-creator { grid-row:auto; aspect-ratio:1; }
.fsx-creators .x-creator-hero:has(.x-hero-creator-copy:only-child) { background:#151515; }

/* Full-bleed moving image, followed by the four reference editorial chapters. */
.fsx-reference-home { background:#080808; color:#f4f4f4; --x-ink:#f4f4f4; --x-muted:#aaa; --x-line:#292929; --x-paper:#111; }
.fsx-reference-home .x-reel { height:calc(100svh - 60px); min-height:600px; max-height:1100px; position:relative; isolation:isolate; overflow:hidden; background:#111; }
.x-reel-video,.x-reel-shade { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.x-reel-poster { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; }
.x-reel-video { opacity:0; transition:opacity .65s ease; }
.x-reel-video.is-playing { opacity:1; }
.x-reel-controls { position:absolute; bottom:28px; left:32px; display:flex; align-items:center; gap:10px; z-index:2; }
.x-reel-controls>button { width:32px; height:32px; color:#fff; font-size:20px; border-radius:50%; border:1px solid #fff5; background:#1115; }
.x-reel-controls>div { display:flex; flex-wrap:wrap; max-width:160px; gap:6px; }
.x-reel-controls [data-reel-index] { width:7px; height:7px; border:0; border-radius:6px; padding:0; background:#fff6; }
.x-reel-controls [aria-pressed="true"] { width:16px; background:#fff; }
[data-home-creator-cover]>video { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.x-reel-shade { background:linear-gradient(180deg,#0002 0%,transparent 35%,#08080820 55%,#080808 100%); pointer-events:none; }
.x-reel-copy { position:absolute; bottom:13%; left:24px; right:24px; text-align:center; display:grid; justify-items:center; gap:20px; }
.fsx-reference-home .x-reel-copy h1 { font:600 96px/1.13 "FS Orbitron","Microsoft YaHei",sans-serif; color:#fff; max-width:100%; margin:0; overflow-wrap:anywhere; }
.fsx-reference-home .x-reel-copy>p { font-size:19px; line-height:1.6; color:#ccc; margin:0 0 22px; }
.x-reel-cta { display:flex; align-items:center; justify-content:center; gap:14px; font-size:14px; font-weight:600; color:#fff; border:1px solid #ffffff45; border-radius:30px; padding:11px 30px; min-height:42px; background:#ffffff12; backdrop-filter:blur(12px); transition:background .25s,transform .25s; }
.x-reel-cta:hover { color:#111; background:#fff; transform:translateY(-2px); }
.x-reel-scroll { position:absolute; left:calc(50% - 24px); bottom:24px; width:48px; height:48px; display:grid; place-items:center; border:1px solid #ffffff50; color:#ddd; border-radius:50%; font-size:26px; animation:fs-scroll-hint 3s ease-in-out infinite; }
.x-reel-motion { position:absolute; right:32px; bottom:28px; height:36px; width:36px; border:1px solid #ffffff40; border-radius:50%; background:#0004; color:#fff; cursor:pointer; }
.fsx-reference-home [data-home-motion] { top:auto; bottom:28px; }
.x-home-editorial { max-width:1440px; width:calc(100% - 96px); margin:auto; }
.fsx-reference-home .x-home-editorial>section { padding:96px 0; scroll-margin-top:150px; }
.x-chapter-meta { display:flex; gap:24px; color:#9b9b9b; font:11px/1.5 "FS Space Grotesk",sans-serif; border-top:1px solid #333; padding-top:24px; margin-bottom:56px; }
.x-chapter-meta>span:last-child { margin-left:auto; }
.x-live-dot:before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; margin:0 8px 2px 0; background:#eee; box-shadow:0 0 0 4px #ffffff12; }
.fsx .x-eyebrow { font:11px/1.5 "FS Space Grotesk",sans-serif; color:#aaa; margin:0 0 18px; }
.fsx-reference-home h2 { font-size:52px; line-height:1.25; font-weight:600; color:inherit; }
.fsx-reference-home .x-section-deck { font-size:15px; line-height:1.8; color:#aaa; margin-top:24px; }
.x-live-grid { display:grid; grid-template-columns:1.3fr 1fr .8fr; gap:24px; margin-top:48px; }
.x-live-grid>a { min-width:0; min-height:350px; position:relative; overflow:hidden; border-top:1px solid #444; padding:26px; color:#eee; background:#131313; border-radius:8px; display:flex; flex-direction:column; gap:16px; }
.x-live-grid .x-live-work { padding:0; border:0; }
.x-live-work>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.x-live-work:hover>img { transform:scale(1.035); }
.x-live-work>div { margin-top:auto; position:relative; padding:80px 24px 24px; background:linear-gradient(transparent,#000d); }
.x-live-grid h3 { color:#fff; font-size:24px; line-height:1.5; margin:12px 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.x-live-grid p { font:11px/1.5 "FS Space Grotesk",sans-serif; color:#bbb; }
.x-live-grid span { font-size:13px; line-height:1.9; color:#aaa; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.x-live-grid>a>i { margin-top:auto; align-self:flex-end; font-size:24px; }
.x-editorial-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:42px; }
.x-editorial-heading>a { color:#ddd; font-size:13px; flex-shrink:0; padding-bottom:7px; }
.x-editorial-heading>a>i { font-size:22px; }
.x-home-forum-grid { display:grid; grid-template-columns:1.05fr 1fr; column-gap:50px; }
.x-home-forum-grid>a { border-top:1px solid #353535; padding:24px 0; color:#ddd; }
.x-home-forum-grid .x-forum-lead { grid-row:span 3; position:relative; padding:0; overflow:hidden; min-height:480px; border:0; background:#151515; }
.x-forum-lead>img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:.65; }
.x-forum-lead>div { position:absolute; bottom:0; left:0; right:0; padding:90px 32px 32px; background:linear-gradient(transparent,#000d); }
.x-home-forum-grid h3 { font-size:22px; font-weight:500; line-height:1.45; margin:12px 0; color:#fff; }
.x-home-forum-grid p { color:#999; font-size:13px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-home-forum-grid :is(small,span) { color:#aaa; font-size:10px; }
.x-home-forum-grid span { display:flex; justify-content:space-between; margin-top:18px; }
.x-home-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 24px; }
.x-home-gallery-grid>a { min-width:0; color:#eee; }
.x-home-gallery-grid img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:4px; transition:filter .3s; }
.x-home-gallery-grid a:nth-child(3n+2) img { aspect-ratio:1; }
.x-home-gallery-grid a:hover img { filter:brightness(1.1); }
.x-home-gallery-grid h3 { font-size:17px; line-height:1.5; font-weight:500; margin:8px 0; color:inherit; }
.x-home-gallery-grid small { display:block; margin-top:16px; font-size:10px; color:#999; }
.x-home-gallery-grid span { font-size:11px; color:#888; }
.x-home-creator-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.x-home-creator-grid>a { position:relative; color:#fff; border-top:1px solid #333; padding:20px 0; display:grid; gap:10px; }
.x-home-creator-grid img { width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:8px; border-radius:8px; }
.x-home-creator-grid strong { font-size:17px; }
.x-home-creator-grid span { font-size:11px; color:#aaa; }
.x-home-creator-grid>a>i { position:absolute; right:0; bottom:30px; }
.x-final-frame { position:relative; height:580px; display:grid; place-items:center; overflow:hidden; isolation:isolate; text-align:center; }
.x-final-frame>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.4); z-index:-2; }
.x-final-frame:after { content:""; position:absolute; inset:0; background:linear-gradient(#080808,transparent 40%,#080808aa); z-index:-1; }
.x-final-frame>div { padding:32px; }
.x-final-frame .x-row { justify-content:center; margin-top:30px; gap:16px; }
.x-final-frame h2 { margin-bottom:20px; }
.x-final-frame .x-btn { background:#ffffff10; border-color:#ffffff60; color:#fff; border-radius:30px; padding:12px 24px; }
.x-final-frame .x-btn:first-child { color:#111; background:#fff; }
.x-home-reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
.x-home-reveal.is-visible { opacity:1; transform:none; }
@keyframes fs-scroll-hint { 50% { transform:translateY(5px); } }

/* Academy: reference intro, segmented filters and editorial course cards. */
.fsx-academy { background:var(--x-paper); min-height:75svh; padding:0 0 80px; }
.x-academy-wrap { width:calc(100% - 108px); max-width:1440px; margin:auto; }
.x-academy-intro { display:flex; justify-content:space-between; align-items:end; gap:32px; padding:0 0 26px; border-bottom:1px solid var(--x-line); }
.x-academy-intro .x-kicker { font:600 11px/1.5 "FS Orbitron",sans-serif; color:#777; margin:0 0 4px; }
.x-academy-intro h1 { font-size:32px; line-height:1.25; color:var(--x-ink); margin:0 0 8px; font-weight:650; }
.x-academy-intro p:last-child { font-size:13px; color:var(--x-muted); line-height:1.8; margin:0; }
.x-academy-intro .x-row { flex-shrink:0; gap:12px; }
.x-academy-intro .x-btn { border-radius:24px; font-size:13px; gap:8px; }
.x-academy-intro [data-learning][aria-pressed="true"] { background:#eee; border-color:#bbb; color:#111; }
.x-academy-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0 20px; }
.x-academy-heading .x-kicker { color:#888; font-size:11px; margin:0 0 8px; }
.x-academy-heading h2 { font-size:24px; font-weight:600; margin:0; }
.x-academy-filters { display:flex; padding:4px; gap:4px; border:1px solid var(--x-line); border-radius:30px; }
.x-academy-filters button { border:0; color:#777; background:transparent; padding:8px 14px; font:inherit; font-size:13px; display:flex; gap:6px; align-items:center; cursor:pointer; border-radius:24px; white-space:nowrap; transition:background .2s,color .2s; }
.x-academy-filters button[aria-pressed="true"] { color:#fff; background:#111; }
.x-academy-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 18px; font-size:12px; color:#888; }
.x-academy-search { display:flex; gap:8px; align-items:center; }
.x-academy-search input { background:none; color:var(--x-ink); border:0; border-bottom:1px solid var(--x-line); width:180px; height:30px; outline-offset:4px; font-size:12px; }
.x-course-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.x-course { border:1px solid var(--x-line); border-radius:24px; background:var(--x-paper); overflow:hidden; min-width:0; display:flex; flex-direction:column; transition:box-shadow .25s,transform .25s; }
.x-course:hover { transform:translateY(-4px); box-shadow:0 12px 32px #00000009; }
.x-course-cover { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; }
.x-course-cover>img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.x-course:hover .x-course-cover>img { transform:scale(1.035); }
.x-course-kind { position:absolute; left:16px; top:16px; display:flex; align-items:center; gap:6px; border-radius:20px; padding:5px 10px; font-size:11px; background:#fffffff2; color:#333; }
.x-course-placeholder { display:grid; place-items:center; width:100%; height:100%; background:#eee; color:#bbb; font-size:54px; }
.x-course-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.x-course-date { display:flex; justify-content:space-between; gap:12px; color:#aaa; font-size:10px; }
.x-course h3 { font-size:23px; font-weight:650; line-height:1.4; min-height:66px; margin:18px 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.x-course-excerpt { color:#888; font-size:13px; line-height:2; min-height:52px; margin:0 0 18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.x-course-updated { font-size:11px; color:#888; margin:auto 0 18px; }
.x-course footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--x-line); padding-top:14px; gap:12px; font-size:11px; }
.x-course-author { display:flex; align-items:center; gap:10px; min-width:0; }
.x-course-author img { height:40px; width:40px; border-radius:50%; object-fit:cover; }
.x-course-author strong { font-weight:600; overflow-wrap:anywhere; }
.x-course-open { flex-shrink:0; padding:6px 0; border-bottom:1px solid #bbb; }
.x-academy-empty { min-height:310px; display:grid; align-content:center; justify-items:center; gap:18px; color:#999; }
.x-academy-empty>i { font-size:50px; color:#ccc; }
.x-academy-empty h3 { font-size:17px; font-weight:500; }
body.fs-design:has(.fsx-reference-home) .ls-footer,
body.fs-design:has(.fsx-reference-home) .ls-footer :is(.ls-footer-main,.ls-footer-bottom) { background:#080808; border-color:#252525; }
html:has(body.fs-home-page),body.fs-home-page,
body.fs-design:has(.fsx-reference-home) { background:#080808; }
body.fs-design:has(.fsx-reference-home) .ls-footer { margin-top:0; }

@media(min-width:1701px) { .x-course-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:1700px) { .x-course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1250px) {
  .fs-design .ls-header-inner { padding-inline:24px; gap:16px; }
  .fs-design .ls-header-left { gap:20px; }
  .fs-design .ls-header-right { gap:4px; }
  .fs-design .ls-main-nav { gap:2px; }
  .fs-design .ls-nav-item>a { padding-inline:8px; }
  .fs-design .ls-sns-page { grid-template-columns:minmax(0,1fr) 250px; gap:24px; }
  .fs-design .ls-sns-page .ls-top-nav-item { font-size:20px; }
  .fsx-reference-home .x-reel-copy h1 { font-size:78px; }
  .x-home-editorial { width:calc(100% - 64px); }
  .x-live-grid { gap:16px; }
  .x-live-grid h3 { font-size:20px; }
  .x-course-grid { gap:24px; }
  .x-academy-wrap { width:calc(100% - 64px); }
  .x-course-body { padding:20px; }
  .x-course h3 { font-size:20px; }
}
@media(max-width:1100px) {
  .fs-design .ls-sns-page { grid-template-columns:minmax(0,1fr); }
  .fs-design .ls-sns-page>.ls-sidebar-right { display:none; }
  .fs-design .ls-header-right .ls-notifications { display:none; }
  .x-home-creator-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .x-live-grid { grid-template-columns:1.2fr 1fr; }
  .x-live-grid .x-live-community { grid-column:1/-1; min-height:160px; }
  .x-academy-intro { align-items:start; padding-top:20px; }
  .x-academy-intro .x-row { flex-direction:column; align-items:stretch; }
}
@media(max-width:960px) {
  :root,body.fs-design { --fs-header:72px; }
  .fs-design .ls-header-left { gap:0; }
  .fs-design .ls-main-nav {
    display:none; position:absolute; top:72px; left:0; right:0; width:100%; height:auto;
    max-height:calc(100dvh - 112px); overflow:auto; padding:24px; flex-direction:column;
    background:var(--fs-surface); border-bottom:1px solid var(--fs-border); align-items:stretch; margin:0;
  }
  .fs-design .fs-menu-open .ls-main-nav { display:flex; animation:fs-nav-in .2s ease both; }
  .fs-design .ls-header-right .fs-menu-toggle { display:grid; }
  .fs-design .ls-nav-item>a { height:44px; width:100%; justify-content:flex-start; font-size:16px; }
  .fs-design.fs-immersive .ls-main-nav { background:#151515f5; }
  .fsx-discover .x-catalog-masonry { --masonry-columns:3; }
  .x-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .x-academy-heading { align-items:start; }
  .x-home-editorial>section { padding-block:64px!important; }
  .fsx-reference-home h2 { font-size:38px; }
  .x-home-forum-grid { column-gap:24px; }
  .x-home-gallery-grid { gap:28px 18px; }
  .x-home-gallery-grid h3 { font-size:15px; }
  .x-home-creator-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:640px) {
  :root,body.fs-design { --fs-header:64px; }
  body.fs-design.fs-has-announcement { --fs-announcement-height:32px; }
  .fs-announcement { height:32px; padding:0 34px 0 16px; font-size:10px; }
  .fs-announcement>a { gap:8px; }
  .fs-announcement strong { display:none; }
  .fs-announcement>button { right:6px; }
  .fs-design .ls-header-inner { padding-inline:16px; }
  .fs-design .ls-logo-text { font-size:20px; }
  .fs-design .ls-logo-icon { height:28px; width:28px; }
  .fs-design .ls-main-nav { top:64px; }
  .fs-design .ls-header-right .ls-create { display:none; }
  .fs-design .ls-header-right { gap:2px; }
  .fs-design .ls-sns-page .ls-top-nav-wrap { gap:12px; }
  .fs-design .ls-sns-page .ls-top-nav { gap:20px; }
  .fs-design .ls-sns-page .ls-top-nav-item { font-size:18px; display:block!important; }
  .fs-design .ls-sns-page select.fs-all-boards { min-width:92px; max-width:104px; font-size:12px; }
  .fsx-discover .x-gallery-tools { grid-template-columns:1fr; }
  .fsx-discover .x-catalog-masonry { --masonry-columns:2; --masonry-gap:12; }
  .fsx .x-discover-caption { padding:12px; }
  .fsx .x-discover-caption>i { display:none; }
  .fsx .x-discover-caption strong { font-size:13px; }
  .fsx .x-discover-caption>span { font-size:11px; }
  .fsx-reference-home .x-reel { height:calc(100svh - 52px); min-height:550px; }
  .x-reel-copy { bottom:18%; left:16px; right:16px; gap:18px; }
  .fsx-reference-home .x-reel-copy h1 { font-size:46px; line-height:1.25; }
  .fsx-reference-home .x-reel-copy>p { font-size:14px; margin-bottom:16px; }
  .x-reel-motion { right:16px; bottom:30px; }
  .x-home-editorial { width:calc(100% - 40px); }
  .x-chapter-meta { margin-bottom:40px; }
  .fsx-reference-home h2 { font-size:30px; }
  .x-live-grid,.x-home-forum-grid { grid-template-columns:1fr; }
  .x-live-grid>a { min-height:240px; }
  .x-live-grid .x-live-work { min-height:380px; }
  .x-live-grid .x-live-community { grid-column:auto; min-height:200px; }
  .x-editorial-heading { flex-wrap:wrap; align-items:center; gap:20px; }
  .x-editorial-heading .x-eyebrow { font-size:9px; }
  .x-home-forum-grid .x-forum-lead { min-height:400px; grid-row:auto; margin-bottom:20px; }
  .x-home-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; }
  .x-home-gallery-grid a img,.x-home-gallery-grid a:nth-child(3n+2) img { aspect-ratio:4/5; }
  .x-home-gallery-grid h3 { font-size:14px; }
  .x-home-creator-grid { gap:20px; }
  .x-home-creator-grid strong { font-size:15px; }
  .x-final-frame { height:480px; }
  .x-final-frame .x-row { flex-wrap:wrap; }
  .x-final-frame .x-btn { font-size:12px; }
  .x-academy-wrap { width:calc(100% - 32px); }
  .x-academy-intro { display:block; padding-top:20px; }
  .x-academy-intro h1 { font-size:28px; }
  .x-academy-intro .x-row { flex-direction:row; margin-top:20px; flex-wrap:wrap; }
  .x-academy-intro .x-btn { font-size:12px; }
  .x-academy-heading { flex-direction:column; gap:20px; }
  .x-academy-filters { width:100%; justify-content:space-between; }
  .x-academy-filters button { padding:7px 10px; font-size:12px; }
  .x-course-grid { grid-template-columns:1fr; gap:24px; }
  .x-course-body { padding:22px; }
  .x-course h3 { min-height:0; font-size:22px; }
  .fsx-creators .x-spotlight-grid[data-count="2"] { grid-template-columns:1fr; }
  .fsx-creators .x-spotlight-grid[data-count="2"]>.x-creator:first-child { aspect-ratio:1; }
}
@media(max-width:380px) {
  .fsx-reference-home .x-reel-copy h1 { font-size:40px; }
  .fs-design .ls-logo-text { font-size:18px; }
  .fs-design .ls-header-right #searchTrigger { display:none; }
}
[data-fs-theme="dark"] .fsx { --x-ink:#eee; --x-muted:#aaa; --x-line:#333; --x-soft:#252525; --x-paper:#171717; }
.fs-design[data-fs-theme="dark"] { --fs-accent:#ddd; --fs-accent-hover:#fff; --fs-on-accent:#111; }
.fs-design[data-fs-theme="dark"]>.ls-header { background:#181818ed; border-color:#333; }
.fs-design[data-fs-theme="dark"] .ls-nav-item>a { color:#aaa; }
.fs-design[data-fs-theme="dark"] .ls-nav-item>a[aria-current] { color:#fff; }
.fs-design[data-fs-theme="dark"] .ls-sns-page .ls-top-nav-item { background:none; box-shadow:none; color:#888; }
.fs-design[data-fs-theme="dark"] .ls-sns-page .ls-top-nav-item.ls-active { color:#fff; }
.fs-design[data-fs-theme="dark"] .ls-sns-page select.fs-all-boards { color:#ddd; }
[data-fs-theme="dark"] .x-academy-filters button[aria-pressed="true"] { color:#111; background:#eee; }
[data-fs-theme="dark"] .fsx-creators .x-section-head .x-kicker { color:#bbb; }
@keyframes fs-nav-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) {
  .fs-design *, .fsx *, .fsx *:before, .fsx *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .x-home-reveal { opacity:1; transform:none; }
  .fsx-home [data-home-motion] { display:block; }
}

/* Native mobile pages share the same backend branding and editorial shell. */
.ls-mobile { --fs-accent:#111; --fs-accent-hover:#333; --ls-primary:#111; --ls-primary-rgb:17,17,17; }
.ls-mobile .ls-page:has([data-fs-experience]) { padding-top:0!important; }
.ls-mobile .ls-custom-page:has([data-fs-experience]),
.ls-mobile .ls-custom-page-body:has([data-fs-experience]) { padding:0!important; margin:0; max-width:none; }
.ls-mobile .ls-tab-content:has(> [data-fs-experience]) { padding-top:0!important; }
.ls-mobile .ls-page:has([data-fs-experience]) .ls-page-navbar,
html[data-fs-mobile-experience] .ls-mobile #ls-navbar { display:none!important; }
.ls-mobile [data-fs-experience] { position:relative; padding-top:calc(64px + env(safe-area-inset-top)); }
.ls-mobile [data-fs-experience="home"],
.ls-mobile [data-fs-experience="creators"] { padding-top:0; }
.fs-mobile-header {
  position:absolute; inset:0 0 auto; z-index:30; min-height:64px; display:flex; align-items:center;
  gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; background:#ffffffed; color:#111; border-bottom:1px solid #eee;
}
.fs-mobile-brand { display:flex; align-items:center; gap:8px; margin-right:auto; min-width:0; font:600 20px/1.2 "FS Orbitron",sans-serif; color:inherit; }
.fs-mobile-brand img { width:auto; height:30px; max-width:200px; object-fit:contain; }
.fs-mobile-brand .fs-mobile-logo-symbol { width:28px; height:28px; }
.fs-mobile-header>button,.fs-mobile-search { width:32px; height:36px; border:0; background:none; color:inherit; display:grid; place-items:center; font-size:22px; }
.fs-mobile-header nav { position:absolute; top:calc(64px + env(safe-area-inset-top)); left:0; right:0; padding:16px; background:#fff; border-bottom:1px solid #eee; }
.ls-mobile .fs-mobile-header a { color:inherit; }
.fs-mobile-header nav:not([hidden]) { display:grid; gap:4px; }
.fs-mobile-header nav a { color:inherit; padding:12px 8px; font-size:16px; }
.fs-mobile-header nav a[aria-current] { font-weight:700; }
:is([data-fs-experience="home"],[data-fs-experience="creators"])>.fs-mobile-header { background:#0001; color:#fff; border-bottom-color:#ffffff18; }
:is([data-fs-experience="home"],[data-fs-experience="creators"])>.fs-mobile-header img { filter:brightness(0) invert(1); }
:is([data-fs-experience="home"],[data-fs-experience="creators"])>.fs-mobile-header nav { background:#171717; border-color:#333; }
.ls-mobile .fsx { font-size:14px; }
.ls-mobile .fsx-reference-home .x-reel { min-height:520px; height:calc(100svh - 70px); }
.ls-mobile .fsx-creators .x-creator-hero { height:calc(100svh - 70px); }

/* Creator wall: measured reference proportions, with the site's monochrome theme. */
.cw-wall { --cw-display:"FS Audiowide","FS Orbitron","Microsoft YaHei",sans-serif; background:var(--x-paper); color:var(--x-ink); }
.cw-wall :is(h1,h2) { font-family:"FS Orbitron","FS Shuhei","Microsoft YaHei",sans-serif; font-weight:500; }
.cw-marquee { min-height:max(100svh,680px); position:relative; overflow:hidden; background:#171717; }
.cw-marquee-media,.cw-veil { position:absolute; inset:0; }
.cw-marquee-media { animation:cw-fade .65s cubic-bezier(.16,1,.3,1) both; }
.cw-marquee-media>img,.cw-marquee-media>video { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:center 34%; }
.cw-marquee-media>img { animation:cw-drift 12s linear both; }
.cw-veil { background:linear-gradient(90deg,#050505cc,#0505056b 48%,#05050524 75%),linear-gradient(0deg,var(--x-paper),transparent 38%,#05050538); pointer-events:none; }
.cw-number { position:absolute; top:110px; right:5%; writing-mode:vertical-rl; color:#fff8; font:500 9px var(--cw-display); }
.cw-content { position:absolute; z-index:2; bottom:clamp(96px,12vh,140px); left:8%; width:min(770px,68%); color:#fff; animation:cw-content-in .65s cubic-bezier(.16,1,.3,1) both; }
.cw-eyebrow { display:flex; align-items:center; gap:13px; color:#ddd; font:500 10px var(--cw-display); margin-bottom:22px; }
.cw-eyebrow>span { width:46px; height:1px; background:#ccc; }
.cw-hero-identity { display:flex; align-items:center; gap:28px; min-width:0; margin:30px 0 14px; }
.cw-hero-avatar { flex:0 0 60px; width:60px; height:60px; border:1px solid #fff6; border-radius:50%; overflow:hidden; box-shadow:0 16px 46px #0005; }
.cw-hero-avatar img { width:100%; height:100%; object-fit:cover; }
.cw-wall .cw-content h1 { font-size:115px; line-height:.95; font-weight:600; margin:0; min-width:0; max-width:100%; white-space:nowrap; overflow-wrap:anywhere; color:#fff; text-shadow:0 6px 48px #0007; }
.cw-content>p { color:#fffd; font:400 21px/1.7 Georgia,"Songti SC","Noto Serif SC",serif; max-width:590px; margin:0 0 25px; }
.cw-stats { display:flex; width:fit-content; align-items:stretch; font-family:var(--cw-display); }
.cw-stats>span { min-width:82px; margin-right:20px; padding-right:20px; border-right:1px solid #8885; }
.cw-stats>span:last-child { border:0; margin:0; padding:0; }
.cw-stats b,.cw-stats small { display:block; }
.cw-stats b { color:inherit; font:600 17px/1.1 var(--cw-display); }
.cw-stats small { opacity:.6; margin-top:5px; font:400 8px/1.35 var(--cw-display); white-space:nowrap; }
.cw-outline { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:44px; padding:0 19px; border:1px solid #8887; background:transparent; color:inherit; font-size:11px; transition:border-color .2s,color .2s,background .2s,transform .2s; }
.cw-content>.cw-outline { margin-top:30px; }
.cw-outline:hover { border-color:currentColor; color:inherit; transform:translateY(-2px); }
.cw-controls { position:absolute; z-index:3; bottom:104px; right:5%; display:flex; align-items:center; gap:15px; color:#fff; }
.cw-controls button { width:38px; height:38px; display:grid; place-items:center; color:inherit; border:1px solid #ffffff3d; border-radius:50%; background:#05050566; backdrop-filter:blur(12px); font-size:16px; }
.cw-controls button:hover { border-color:#fff; background:#05050599; }
.cw-controls>span { color:#fff8; font:500 10px var(--cw-display); }
.cw-controls b { color:#fff; font-size:16px; }
.cw-controls [data-cw-pause] { width:42px; height:30px; border-radius:20px; font-size:14px; }
.cw-progress { position:absolute; bottom:86px; right:5%; width:186px; height:1px; background:#fff4; }
.cw-progress>i { display:block; width:100%; height:100%; transform-origin:left; background:#fff; }
.cw-scroll { position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%); display:grid; place-items:center; gap:7px; color:#fff8; font:500 8px var(--cw-display); }
.cw-scroll>span { width:1px; height:26px; background:linear-gradient(#fff,transparent); animation:cw-scroll 1.8s ease-in-out infinite; }
.cw-section { width:min(1500px,calc(100% - 64px)); margin:auto; padding:132px 0 24px; }
.cw-heading { display:grid; grid-template-columns:auto minmax(80px,1fr) auto; align-items:end; gap:24px; margin-bottom:42px; }
.cw-heading>div>span,.cw-join>div>span { display:block; margin-bottom:8px; color:#777; font:600 8px var(--cw-display); }
.cw-wall .cw-heading h2 { font-size:61px; line-height:.95; color:inherit; margin:0; }
.cw-rule { height:1px; margin-bottom:8px; background:linear-gradient(90deg,#999,var(--x-line)); }
.cw-heading>p { color:var(--x-muted); font-size:10px; margin:0 0 4px; }
.cw-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:dense; align-items:stretch; gap:18px; perspective:1400px; }
.cw-cell { min-width:0; position:relative; }
.cw-cell:hover { z-index:4; }
.cw-cell-poster { grid-column:span 6; grid-row:span 2; }
.cw-cell-standard { grid-column:span 3; }
.cw-card { display:grid; grid-template-rows:minmax(0,1fr) auto; position:relative; isolation:isolate; overflow:hidden; width:100%; min-width:0; height:100%; color:inherit; border:1px solid var(--x-line); border-radius:14px; background:var(--x-soft); transform:perspective(1000px) rotateX(var(--cw-rx,0deg)) rotateY(var(--cw-ry,0deg)); transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.65,.3,1),border-color .25s,box-shadow .3s; }
.cw-card:hover { transform:perspective(1000px) rotateX(var(--cw-rx,0deg)) rotateY(var(--cw-ry,0deg)) translateY(-5px); box-shadow:0 24px 65px #0003; border-color:#999; color:inherit; }
.cw-card-poster,.cw-card-standard { aspect-ratio:3/4; }
.cw-card-compact { aspect-ratio:4/5; }
.cw-card-media { min-height:0; position:relative; overflow:hidden; }
.cw-card-media>img,.cw-card-media>video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transform:scale(1.025); transition:opacity .65s,transform 1.8s cubic-bezier(.2,.65,.3,1); }
.ls-mobile .cw-wall :is(.cw-marquee-media,.cw-card-media,.cw-avatar,.cw-hero-avatar)>:is(img,video),
.ls-mobile .fsx-reference-home .x-reel>:is(img,video) { width:100%; height:100%; max-height:none; object-fit:cover; }
.ls-mobile .cw-wall a { color:inherit; }
.ls-mobile .cw-wall .cw-join>a { color:var(--x-paper); }
.cw-card:hover .cw-card-media>:is(img,video) { transform:scale(1.065); }
.cw-card-veil { position:absolute; inset:0; pointer-events:none; background:linear-gradient(transparent 58%,#050505c2); }
.cw-cover-empty { display:grid; place-items:center; height:100%; width:100%; color:#999; background:#292929; font:600 80px var(--cw-display); }
.cw-card-info { position:relative; z-index:2; display:grid; gap:14px; padding:17px; background:var(--x-paper); border-top:1px solid var(--x-line); }
.cw-identity { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:11px; align-items:center; }
.cw-identity>span { min-width:0; }
.cw-identity strong,.cw-identity small { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.cw-identity strong { font:600 14px/1.4 var(--cw-display); }
.cw-identity small { font-size:9px; margin-top:4px; color:var(--x-muted); }
.cw-identity>i { font-size:17px; color:var(--x-muted); transition:transform .2s; }
.cw-card:hover .cw-identity>i { transform:translate(2px,-2px); color:var(--x-ink); }
.cw-avatar { height:40px; width:40px; display:block; border-radius:50%; overflow:hidden; }
.cw-avatar img { width:100%; height:100%; object-fit:cover; }
.cw-card .cw-stats { width:100%; }
.cw-card .cw-stats>span { flex:1; min-width:0; margin-right:11px; padding-right:11px; }
.cw-card .cw-stats>span:last-child { margin:0; padding:0; }
.cw-card .cw-stats b { font-size:11px; }
.cw-card :is(.cw-stats small) { font-size:8px; }
.cw-card-standard .cw-card-info,.cw-card-compact .cw-card-info { gap:10px; padding:13px; }
.cw-card-compact .cw-identity strong { font-size:12px; }
.cw-constellation { padding-bottom:132px; }
.cw-toolbar { border-block:1px solid var(--x-line); padding:13px 0; margin-bottom:28px; }
.cw-search { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; min-height:42px; max-width:520px; padding:0 14px; background:var(--x-soft); border:1px solid var(--x-line); }
.cw-search input { width:100%; background:none; border:0; color:inherit; font-size:11px; min-height:40px; }
.cw-search button { border:0; background:none; font-size:18px; }
.cw-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.cw-status:empty { display:none; }
.cw-status { min-height:160px; display:grid; place-content:center; gap:20px; color:var(--x-muted); }
.cw-join { display:flex; align-items:end; justify-content:space-between; gap:48px; background:var(--x-soft); border-top:1px solid var(--x-line); padding:80px max(32px,calc((100% - 1500px)/2)); }
.cw-wall .cw-join h2 { font-size:46px; line-height:1.1; color:inherit; margin:13px 0 8px; }
.cw-join p { color:var(--x-muted); font-size:11px; }
.cw-join>a { flex-shrink:0; background:var(--x-ink); color:var(--x-paper); }
[data-cw-reveal] { opacity:0; transform:translateY(32px); transition:opacity .8s var(--cw-delay,0ms),transform .8s cubic-bezier(.16,1,.3,1) var(--cw-delay,0ms); }
.cw-cell[data-cw-reveal] { transform-origin:50% 100%; transform:translate3d(0,70px,-100px) rotateX(-12deg); }
[data-cw-reveal].cw-visible { opacity:1; transform:none; }
@keyframes cw-fade { from { opacity:0; } to { opacity:1; } }
@keyframes cw-content-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes cw-drift { from { transform:scale(1); } to { transform:scale(1.06); } }
@keyframes cw-scroll { 50% { opacity:.4; transform:translateY(5px); } }
@media(max-width:1100px) {
  .cw-bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cw-cell-poster { grid-column:1/-1; grid-row:auto; }
  .cw-cell-standard { grid-column:span 1; }
  .cw-card-poster { aspect-ratio:16/10; }
  .cw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .cw-marquee { min-height:max(100svh,650px); }
  .cw-veil { background:linear-gradient(0deg,var(--x-paper),transparent 18%),linear-gradient(90deg,#050505a6,#05050557); }
  .cw-marquee-media>:is(img,video) { object-position:center 30%; }
  .cw-content { width:calc(100% - 44px); left:22px; bottom:138px; }
  .cw-wall .cw-content h1 { font-size:60px; line-height:1; }
  .cw-hero-identity { gap:18px; margin-bottom:16px; }
  .cw-hero-avatar { height:44px; width:44px; flex-basis:44px; }
  .cw-content>p { display:none; }
  .cw-eyebrow { font-size:8px; margin-bottom:14px; }
  .cw-content>.cw-outline { margin-top:24px; }
  .cw-controls { bottom:78px; right:20px; }
  .cw-progress { bottom:67px; right:20px; width:164px; }
  .cw-number { top:92px; right:18px; }
  .cw-scroll { display:none; }
  .cw-section { width:calc(100% - 32px); padding-top:90px; }
  .cw-heading { grid-template-columns:auto 1fr; gap:14px; }
  .cw-heading>p { grid-column:1/-1; }
  .cw-wall .cw-heading h2 { font-size:40px; }
  .cw-bento { grid-template-columns:1fr; gap:14px; }
  .cw-card-poster,.cw-card-standard { aspect-ratio:4/5; }
  .cw-card:hover { transform:none; }
  .cw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cw-card-compact .cw-card-info { padding:10px; }
  .cw-card-compact .cw-avatar { display:none; }
  .cw-card-compact .cw-identity { grid-template-columns:minmax(0,1fr) auto; }
  .cw-card-compact .cw-stats>span { padding-right:5px; margin-right:5px; }
  .cw-card-compact .cw-stats b { font-size:9px; }
  .cw-join { flex-direction:column; align-items:stretch; padding:64px 22px; gap:32px; }
  .cw-wall .cw-join h2 { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-cw-reveal],.cw-cell[data-cw-reveal] { opacity:1; transform:none; }
}

/* The composer overlays the comments; opening it never changes either reading pane. */
.fsx .x-detail-pane { position:relative; }
.fsx .x-detail-description { height:auto; max-height:62%; flex:1.7 1 0; min-height:0; }
.fsx .x-detail-comments { flex:1 1 0; min-height:110px; }
.fsx .x-comment-empty { padding:24px; min-height:110px; }
.fsx .x-comment-empty>i { font-size:52px; }
.fsx .x-comment-form {
  position:absolute; z-index:5; bottom:68px; left:12px; right:12px; padding:12px;
  max-height:calc(100% - 90px); overflow:visible; background:var(--x-paper);
  border:1px solid var(--x-line); border-radius:12px; box-shadow:0 8px 38px #0003;
  animation:fs-nav-in .18s ease both;
}
.fsx .x-comment-form>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.fsx .x-comment-form>header label { font-size:13px; font-weight:600; }
.fsx .x-comment-form>header button { width:26px; height:26px; border:0; background:none; font-size:18px; }
.fsx .x-comment-form textarea,.fsx .x-comment-form .ls-editor {
  display:block; border:1px solid var(--x-line); border-radius:8px; padding:10px; background:var(--x-soft);
  min-height:100px; max-height:180px; overflow:auto; font-family:inherit; font-size:14px; line-height:1.7; resize:vertical; color:var(--x-ink);
}
.fsx .x-comment-form .ls-editor { font-size:14px; line-height:1.7; }
.fsx .x-comment-form .ls-editor:empty:before { content:attr(data-placeholder); color:var(--x-muted); pointer-events:none; }
.fsx .x-comment-form .ls-editor .ls-emoji { display:inline-block; width:26px; height:26px; vertical-align:middle; }
.fsx .x-comment-form>.x-composer-extras { display:block; margin:0; position:static; }
.x-composer-tools { display:flex; align-items:center; gap:4px; margin-top:6px; }
.x-composer-tools button { width:32px; height:32px; font-size:19px; border:0; border-radius:6px; background:none; color:var(--x-muted); }
.x-composer-tools button:hover,.x-composer-tools button[aria-expanded="true"] { color:var(--x-ink); background:var(--x-soft); }
.fsx .x-comment-submit-row { display:flex; align-items:center; gap:12px; margin-top:4px; }
.x-comment-submit-row [role="status"] { flex:1; font-size:12px; }
.x-comment-submit-row button { min-height:34px; font-size:12px; padding:7px 14px; }
.x-composer-panel { position:absolute; z-index:6; bottom:48px; left:0; right:0; max-height:min(260px,50dvh); overflow:auto; margin-bottom:8px; padding:10px; border:1px solid var(--x-line); border-radius:10px; background:var(--x-paper); box-shadow:0 4px 24px #0002; }
.x-emoji-tabs { display:flex; gap:4px; overflow:auto; border-bottom:1px solid var(--x-line); margin-bottom:8px; }
.x-emoji-tabs button { flex-shrink:0; font-size:12px; padding:7px 9px; border:0; background:none; color:var(--x-muted); }
.x-emoji-tabs [aria-selected="true"] { color:var(--x-ink); box-shadow:inset 0 -2px currentColor; }
.x-emoji-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; max-height:186px; overflow:auto; }
.x-emoji-grid button { display:grid; place-items:center; aspect-ratio:1; border:0; padding:3px; background:none; border-radius:5px; overflow:hidden; font-size:11px; }
.x-emoji-grid button:hover { background:var(--x-soft); }
.x-emoji-grid img { width:100%; height:100%; object-fit:contain; }
.x-composer-attachments { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.x-composer-attachments:empty,.x-composer-mentions:empty { display:none; }
.x-composer-attachments>span { width:54px; height:54px; position:relative; }
.x-composer-attachments img { width:100%; height:100%; object-fit:cover; border-radius:5px; }
.x-composer-attachments button { position:absolute; top:0; right:0; width:20px; height:20px; padding:0; border:0; background:#111c; color:#fff; }
.x-composer-mentions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.x-composer-mentions button { border:0; background:var(--x-soft); color:var(--x-ink); padding:3px 6px; font-size:12px; }
.x-composer-panel input { width:100%; border:1px solid var(--x-line); background:var(--x-soft); color:var(--x-ink); border-radius:5px; padding:7px 9px; }
[data-people] { max-height:180px; overflow:auto; margin-top:8px; }
[data-people]>button { display:flex; align-items:center; width:100%; gap:10px; padding:7px; border:0; background:none; color:var(--x-ink); text-align:left; }
[data-people]>button:hover { background:var(--x-soft); }
[data-people] img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.x-comment-content { margin:7px 0; font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.x-comment-content .x-comment-emoji { display:inline-block; width:28px; height:28px; object-fit:contain; vertical-align:middle; }
.x-comment-images { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.x-comment-images>a { display:block; width:72px; height:72px; }
.x-comment-images img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
@media(max-width:640px) {
  .fsx .x-detail-pane { min-height:540px; }
  .fsx .x-detail-description { height:300px; flex:0 0 300px; max-height:none; }
  .fsx .x-detail-comments { min-height:180px; max-height:300px; flex:1 0 180px; }
  .fsx .x-comment-form { position:fixed; bottom:70px; left:16px; right:16px; max-height:calc(100dvh - 110px); }
  .x-composer-panel { max-height:220px; }
}