@font-face {
  font-family: "Distant Stars Cover";
  src: url("./fonts/AreminiscentSmile-Regular.ttf") format("truetype");
  font-display: block;
}

@font-face {
  font-family: "Distant Stars English";
  src: url("./fonts/Micross.ttf") format("truetype");
  unicode-range: U+0000-024F;
  font-display: swap;
}

@font-face {
  font-family: "Distant Stars Chinese";
  src: url("./fonts/XingyiWensong.ttf") format("truetype");
  unicode-range: U+3000-303F, U+3400-9FFF, U+F900-FAFF;
  font-display: swap;
}

@font-face {
  font-family: "Distant Stars Cover Chinese";
  src: url("./fonts/HanyiLiuliZhuan55u.ttf") format("truetype");
  unicode-range: U+3000-303F, U+3400-9FFF, U+F900-FAFF;
  font-display: swap;
}

:root {
  /* Solaris is the pre-JavaScript fallback so first-time visitors receive
     the same night-sky design before saved settings finish loading. */
  --distant-stars-page: #222440;
  --distant-stars-surface: #2b2d4c;
  --distant-stars-text: #f8f7ff;
  --distant-stars-muted: #bbb9d3;
  --distant-stars-border: #5a5b7b;
  --distant-stars-button: #d5d8ff;
  --distant-stars-button-text: #252742;
  --distant-stars-background-color: #222440;
  --distant-stars-background-image: linear-gradient(180deg, #403854, #222440);
  color: var(--distant-stars-text);
  background: var(--distant-stars-page);
  font-family: "Distant Stars English", "Distant Stars Chinese", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--distant-stars-background-color);
  background-image: var(--distant-stars-background-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

html.distant-stars-fonts-loading body { visibility: hidden; }
html.distant-stars-fonts-ready body { visibility: visible; }

body {
  overflow-x: hidden;
  color: var(--distant-stars-text);
  background-color: var(--distant-stars-background-color);
  background-image: var(--distant-stars-background-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: normal;
}

body.distant-stars-pending > main,
body.distant-stars-pending > .global-nav {
  visibility: hidden;
}

/* Solaris adds a quiet, slow point-star field behind every page. The layer
   is visible through the theme's transparent page canvas and never catches
   pointer input or overlaps cards and controls. */
.solaris-starfield {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.solaris-star {
  position: absolute;
  width: var(--solaris-star-size);
  height: var(--solaris-star-size);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 4px #ffffff, 0 0 11px rgba(220, 232, 255, .82);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  animation: solaris-star-glimmer var(--solaris-star-duration) ease-in-out forwards;
}

@keyframes solaris-star-glimmer {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  40% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
  67% { opacity: .34; transform: translate(-50%, -50%) scale(.86); }
}

html[data-distant-stars-palette="solaris"] body > main {
  position: relative;
  z-index: 1;
  background-color: transparent;
  background-image: none;
}

body > main {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: var(--distant-stars-background-color);
  background-image: var(--distant-stars-background-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-is-entering > main {
  opacity: 0;
  transform: translateY(12px);
}

body.page-is-leaving > main {
  opacity: 0;
  transform: translateY(-8px);
}

body.page-is-leaving {
  pointer-events: none;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

.cover-screen,
.gallery-screen {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.cover-screen {
  position: relative;
  display: grid;
  place-items: center;
  padding: 32px;
  background: linear-gradient(to bottom, #403854 0%, #222440 100%);
}

.cover-screen.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  animation: cover-leave 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  pointer-events: none;
}

.cover-stars {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cover-star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  color: #ffffff;
  opacity: 0;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 4px currentColor, 0 0 10px rgba(220, 232, 255, .88);
  filter: drop-shadow(0 0 1px rgba(7, 8, 32, .9));
  transform: translate(-50%, -50%) scale(.7);
  animation: cover-dot-star-flash var(--star-duration) ease-in-out forwards;
}

@keyframes cover-dot-star-flash {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  38% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  62% { opacity: .48; transform: translate(-50%, -50%) scale(.86); }
}

.admin-entry {
  position: absolute;
  top: 30px;
  right: 32px;
  color: #161616;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.admin-entry::after {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 4px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.admin-entry:hover::after,
.admin-entry:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cover-content {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.22, 1, .36, 1);
}

.cover-screen.is-intro-ready .cover-content { opacity: 1; transform: translateY(0) scale(1); }
.cover-screen .cover-content .eyebrow,
.cover-screen .cover-content #site-title,
.cover-screen .cover-content #site-title-zh { min-height: 1em; }
.cover-screen .cover-content .eyebrow {
  white-space: nowrap;
  word-spacing: .4em;
}
.cover-screen .cover-content .cover-subtitle,
.cover-screen .cover-content #site-title {
  font-family: "Distant Stars Cover", "Distant Stars English", sans-serif;
}
.cover-screen .cover-content .cover-subtitle,
.cover-screen .cover-content #site-title,
.cover-screen .cover-content #site-title-zh,
.cover-screen .cover-content .enter-button {
  position: absolute;
  left: 50%;
}
.cover-screen .cover-content .cover-subtitle {
  bottom: calc(50% + clamp(74px, 8.5vw, 138px));
  margin: 0;
  transform: translateX(-50%);
}
.cover-screen .cover-content #site-title-zh {
  top: calc(50% + clamp(100px, 10.5vw, 160px));
  margin: 0;
  color: var(--distant-stars-muted);
  font-family: "Distant Stars Cover Chinese", "Distant Stars Chinese", serif;
  font-size: clamp(25px, 4vw, 54px);
  letter-spacing: .12em;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 720ms ease, transform 880ms cubic-bezier(.22, 1, .36, 1);
}
.cover-screen .cover-content #site-title-zh.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cover-scramble-character { display: inline-block; white-space: pre; text-align: center; }
.cover-screen .cover-content .enter-button,
.cover-screen .cover-content .admin-entry { opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.cover-screen.is-intro-complete .cover-content .enter-button,
.cover-screen.is-intro-complete .cover-content .admin-entry { opacity: 1; pointer-events: auto; }
.cover-screen.is-intro-complete .cover-content .enter-button { transition-delay: 140ms; }
.cover-screen.is-intro-complete .cover-content .admin-entry { transition-delay: 240ms; }

.eyebrow {
  margin: 0 0 16px;
  color: #777;
  font-size: 11px;
  letter-spacing: 0.16em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 36px;
  font-size: clamp(64px, 16vw, 190px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.cover-screen .cover-content #site-title {
  width: 100%;
  top: 50%;
  margin: 0;
  font-size: clamp(44px, 9vw, 128px);
  letter-spacing: -0.055em;
  line-height: 1.12;
  padding-block: .12em;
  overflow: visible;
  white-space: nowrap;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cover-screen .cover-content .cover-subtitle {
  font-size: clamp(13px, 1.35vw, 18px);
}
.cover-screen .cover-content .enter-button {
  top: calc(50% + clamp(178px, 17vw, 262px));
  min-width: 104px;
  padding: 11px 24px;
  letter-spacing: .18em;
  transform: translateX(-50%);
}

.enter-button {
  min-width: 82px;
  padding: 10px 18px;
  border: 1px solid #161616;
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  transition: background 180ms ease, color 180ms ease;
}

.enter-button:hover,
.enter-button:focus-visible {
  background: transparent;
  color: #161616;
}

.gallery-screen {
  padding: 30px 32px 56px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-screen.is-entering {
  opacity: 0;
  transform: translateY(20px);
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gallery-header .admin-entry {
  position: static;
}

.back-button {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.gallery-content {
  width: 100%;
  max-width: 1040px;
  width: min(100%, 1040px);
  margin: clamp(72px, 15vh, 150px) auto 0;
}

.intro {
  text-align: center;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.06em;
}

.intro p:not(.eyebrow) {
  margin-bottom: 5px;
  color: #707070;
  font-size: 14px;
  line-height: 1.6;
}

.intro-description {
  width: min(100%, 620px);
  margin: 0 auto;
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--distant-stars-editable-background, rgba(243, 223, 226, .16));
}

.intro-description p { display: block; }

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

.gallery-group { margin-top: 66px; }
.gallery-group .card-grid { margin-top: 28px; }
.association-group { margin-top: 92px; padding-bottom: 80px; }
.association-card-grid { grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.association-card-grid .association-card-shell:nth-child(-n + 2) { grid-column: span 3; }
.association-card-grid .association-card-shell:nth-child(3) { grid-column: span 6; }
.association-card-grid .association-card { aspect-ratio: 3 / 2; }
.association-card-grid .association-card-shell:nth-child(3) .association-card { aspect-ratio: 6 / 2; }

.gallery-section-title {
  margin: 0;
  color: #161616;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
}

.series-more-toggle {
  display: block;
  margin: 28px auto 0;
  border: 0;
  border-bottom: 1px solid #9a9a9a;
  padding: 3px 2px;
  background: transparent;
  color: #555;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.series-more-toggle:hover,
.series-more-toggle:focus-visible { color: #161616; border-bottom-color: #161616; outline: none; }

.content-card {
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  background: #fafafa;
  color: #a0a0a0;
  font-size: 12px;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.content-card:not(.series-card):hover,
.content-card:not(.series-card):focus-visible {
  border-color: #a8a8a8;
  background: #f4f4f4;
  transform: translateY(-3px);
}

.series-card-shell {
  min-width: 0;
}

.series-card {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  transform: translateY(0) scale(1) !important;
}

.series-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.32));
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.series-card.manage-image-preview {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background 220ms ease;
}

.series-card.manage-image-preview::before,
.series-card:hover::before {
  opacity: 1;
}

.series-card.manage-image-preview:hover,
.series-card.manage-image-preview:focus-visible {
  background-position: center center;
  background-size: cover !important;
  transform: translateY(-1px) scale(1) !important;
}

.series-card > span {
  position: relative;
  z-index: 1;
}

.series-card-title {
  display: block;
  max-width: 100%;
  margin-top: auto;
  overflow: hidden;
  color: #3a2c2a;
  color: var(--distant-stars-text, #3a2c2a);
  -webkit-text-fill-color: #3a2c2a;
  -webkit-text-fill-color: var(--distant-stars-text, #3a2c2a);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  paint-order: stroke fill;
  /* A 3px white stroke swallows small Chinese glyphs in QQ WebView. */
  -webkit-text-stroke: 1px #fff;
  text-shadow: 0 0 1px #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-card.manage-image-preview .series-card-title {
  color: #3a2c2a;
  color: var(--distant-stars-text, #3a2c2a);
  -webkit-text-fill-color: #3a2c2a;
  -webkit-text-fill-color: var(--distant-stars-text, #3a2c2a);
}

.series-card-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.series-card-actions button,
.series-manager-controls button {
  border: 0;
  background: transparent;
  color: #666;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.manage-mode .series-card-title[contenteditable="true"] { cursor: text; outline: 1px dashed transparent; outline-offset: 4px; }
.manage-mode .series-card-title[contenteditable="true"]:hover,
.manage-mode .series-card-title[contenteditable="true"]:focus { outline-color: rgba(255, 255, 255, .9); }
.manage-mode .manage-detail-copy-editor { cursor: text; outline: 1px dashed transparent; outline-offset: 4px; }
.manage-mode .manage-detail-copy-editor:hover,
.manage-mode .manage-detail-copy-editor:focus { outline-color: var(--distant-stars-border); }

.association-card-actions { justify-content: center; }

.series-manager-controls {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 42px;
}

.series-manager-controls button:last-child {
  padding: 9px 14px;
  border: 1px solid #161616;
  border-radius: 999px;
  color: #161616;
  text-decoration: none;
}

.series-manager-controls button:last-child:hover,
.series-manager-controls button:last-child:focus-visible {
  background: #161616;
  color: #fff;
}

.detail-page,
.article-page,
.admin-page {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 30px 32px 100px;
}

/* The top bar is fixed, so it should not shift the login card upward.
   Let the login view own the full viewport and center its contents in it. */
.admin-page {
  padding-top: 0;
  padding-bottom: 0;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-header .back-button {
  text-decoration: none;
}

.detail-admin-entry {
  color: #161616;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.detail-hero {
  margin-top: clamp(72px, 13vh, 144px);
}

.detail-hero h1 {
  margin-bottom: clamp(42px, 7vw, 84px);
  font-size: clamp(52px, 10vw, 132px);
  text-align: center;
}

.hero-card-layout {
  display: grid;
  grid-template-columns: minmax(140px, 230px) minmax(220px, 360px) minmax(140px, 230px);
  align-items: stretch;
  justify-content: center;
  gap: clamp(18px, 3vw, 44px);
}

.portrait-card {
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  border-radius: 18px;
  background: #f3f3f3;
  color: #a0a0a0;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.portrait-card-right {
  background: #eaeaea;
}

body[data-collection^="series-"] .hero-card-layout {
  grid-template-columns: minmax(180px, 320px) minmax(180px, 300px) minmax(180px, 320px);
  gap: clamp(32px, 6vw, 92px);
}

body[data-collection^="series-"] .portrait-card {
  aspect-ratio: 4 / 5;
}

.hero-copy {
  /* The copy panel grows only with its text and stays centered between the images. */
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--distant-stars-editable-background);
  color: #686868;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.hero-copy p {
  margin-bottom: 2px;
}

.detail-section {
  margin-top: clamp(100px, 18vw, 220px);
}

.section-intro {
  width: min(100%, 560px);
  margin-bottom: clamp(62px, 10vw, 130px);
}

.section-intro h2 {
  margin-bottom: 20px;
}

.section-intro > p:last-child {
  color: #707070;
  font-size: 15px;
  line-height: 1.8;
}

.detail-rows {
  display: grid;
  gap: clamp(60px, 11vw, 150px);
}

.detail-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 9vw, 150px);
}

.detail-image-link {
  width: 100%;
  max-width: 500px;
  color: inherit;
  text-decoration: none;
}

.detail-image-link:hover .detail-image-placeholder,
.detail-image-link:focus-visible .detail-image-placeholder {
  transform: scale(1.012);
}

.detail-row:nth-child(even) .detail-image-link {
  order: 2;
  justify-self: end;
}

.detail-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  border-radius: 18px;
  background: #f2f2f2;
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.article-image {
  max-width: 500px;
  justify-self: start;
  background-position: center;
  background-size: cover;
}

.detail-row:nth-child(even) .article-image {
  order: 2;
  justify-self: end;
}

.article-row:nth-child(even) .detail-row-copy {
  justify-self: start;
}

.article-row-text {
  display: block;
}

.article-row-text .detail-row-copy {
  width: min(100%, 1040px);
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid #e4e4e4;
  border-radius: 18px;
}

.article-row-text .detail-row-copy p {
  white-space: pre-wrap;
}

.detail-row.cool .detail-image-placeholder {
  background: #edf1f2;
}

.manage-detail-remove {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  border: 0;
  background: #161616;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 7px 9px;
}

.manage-article-title-toggle {
  border: 0;
  background: transparent;
  color: #555;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-article-title-toggle:hover,
.manage-article-title-toggle:focus-visible {
  color: #161616;
  outline: none;
}

.manage-mode .detail-row {
  position: relative;
}

.manage-detail-add {
  display: block;
  margin: clamp(60px, 10vw, 120px) auto 0;
  padding: 11px 17px;
  border: 1px solid #161616;
  border-radius: 999px;
  background: #fff;
  color: #161616;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.manage-detail-add:hover,
.manage-detail-add:focus-visible {
  background: #161616;
  color: #fff;
}

.detail-row.rose .detail-image-placeholder {
  background: #f4eeee;
}

.detail-row.stone .detail-image-placeholder {
  background: #efefec;
}

.detail-row-copy {
  max-width: 360px;
}

.detail-row:nth-child(even) .detail-row-copy {
  justify-self: end;
}

.article-row:not(.article-row-text) {
  grid-template-columns: minmax(0, 500px) minmax(0, 560px);
  justify-content: space-between;
}

.article-row:not(.article-row-text) .detail-row-copy {
  width: 100%;
  max-width: 560px;
}

.article-row:not(.article-row-text):nth-child(odd) .detail-row-copy {
  justify-self: end;
}

.article-row:not(.article-row-text):nth-child(even) .detail-row-copy {
  justify-self: start;
}

.row-number {
  display: block;
  margin-bottom: 18px;
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.detail-row h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.detail-row-copy p {
  margin-bottom: 0;
  color: #707070;
  font-size: 14px;
  line-height: 1.8;
}

.detail-row-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.detail-row-link:hover,
.detail-row-link:focus-visible {
  opacity: 0.68;
  outline: none;
  transform: translateY(-4px);
}

.article-intro {
  width: min(100%, 680px);
  margin: clamp(90px, 15vh, 160px) auto 0;
  text-align: center;
}

.article-intro h1 {
  margin-bottom: 20px;
  font-size: clamp(46px, 8vw, 100px);
}

.article-intro h2 {
  margin-bottom: 28px;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.association-page main { width: min(100%, 1080px); margin: 0 auto; padding: 30px 32px 100px; }
.site-topbar { position: fixed; z-index: 1900; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px max(32px, calc((100vw - 1080px) / 2)); background: color-mix(in srgb, var(--distant-stars-surface) 92%, transparent); backdrop-filter: blur(12px); }
.site-topbar-brand, .site-topbar .back-button { color: var(--distant-stars-text); font-size: 16px; font-weight: 600; letter-spacing: -0.04em; text-decoration: none; }
.site-topbar-brand { font-family: "Distant Stars Cover", "Distant Stars English", sans-serif; font-weight: 400; letter-spacing: -0.025em; }
.site-topbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.site-topbar-settings { border: 0; padding: 0; background: transparent; color: var(--distant-stars-muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.site-topbar-login, .site-topbar .admin-entry { position: static; color: var(--distant-stars-text); font-size: 13px; text-decoration: none; }
.site-topbar-login:hover, .site-topbar-login:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.site-ai-help-dialog { position: fixed; z-index: 3700; inset: 0; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, #000 48%, transparent); }
.site-ai-help-panel { box-sizing: border-box; width: min(100%, 520px); border: 1px solid var(--distant-stars-border); border-radius: 18px; padding: clamp(24px, 5vw, 36px); background: var(--distant-stars-surface); color: var(--distant-stars-text); box-shadow: 0 22px 80px rgba(0, 0, 0, .24); }
.site-ai-help-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.site-ai-help-head h2 { margin: 0; font-size: clamp(28px, 5vw, 40px); }
.site-ai-help-head button { border: 0; padding: 0 4px; background: transparent; color: var(--distant-stars-muted); cursor: pointer; font: inherit; font-size: 25px; line-height: 1; }
.site-ai-help-panel > p { margin: 0 0 10px; line-height: 1.75; }
.site-ai-help-note, .site-ai-help-status { color: var(--distant-stars-muted); font-size: 13px; }
.site-ai-help-note { margin-top: 20px !important; }
.site-ai-help-status { min-height: 1.75em; margin-top: 16px !important; }
.site-ai-help-action { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid var(--distant-stars-button); border-radius: 999px; background: var(--distant-stars-button); color: var(--distant-stars-button-text); cursor: pointer; font: inherit; }
.site-ai-help-action:hover, .site-ai-help-action:focus-visible { background: color-mix(in srgb, var(--distant-stars-button) 78%, #000); outline: none; }
.site-ai-help-action:disabled { cursor: default; opacity: .62; }
.association-hero { width: min(100%, 720px); margin: clamp(90px, 15vh, 160px) auto 0; text-align: center; }
.association-hero h1 { margin: 0 0 20px; font-size: clamp(46px, 8vw, 100px); }
/* The decorative body font adds short flourish strokes to a few Chinese
   glyphs (notably in the default association introduction). This short,
   functional description uses a clean system Chinese face instead. */
.association-description,
.association-hero .manage-rich-editor {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-variant-ligatures: none;
  -webkit-text-emphasis: none;
  text-decoration: none;
}
.association-description { margin: 0 auto; color: #6f6f6f; font-size: 15px; line-height: 1.9; }
.association-placeholder { display: grid; min-height: 220px; margin: clamp(90px, 13vw, 160px) auto 0; place-items: center; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; color: #888; font-size: 14px; }
.association-content { margin-top: clamp(70px, 11vw, 130px); }
.info-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #dedede; padding-bottom: 14px; }
.info-tags, .info-order, .info-manage-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.info-toolbar button, .info-manage-tags button, .info-pagination button { border: 1px solid #d0d0d0; border-radius: 999px; padding: 7px 11px; background: #fff; color: #515151; cursor: pointer; font: inherit; font-size: 12px; }
.info-toolbar .info-tag { border-color: transparent; }
.info-toolbar .info-tag.is-active, .info-pagination .info-page.is-active { border-color: #161616; background: #161616; color: #fff; }
.info-manage-tags { justify-content: flex-end; margin-top: 12px; }
.info-posts { display: grid; gap: 18px; margin-top: 30px; }
.info-post-card { border: 1px solid #e1e1e1; border-radius: 16px; padding: 18px; background: #fff; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.info-post-manage { display: flex; justify-content: flex-end; gap: 8px; margin: -4px -4px 12px; }
.info-post-manage button { border: 0; padding: 3px 5px; background: transparent; color: #777; cursor: pointer; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.info-post-card:hover, .info-post-card:focus-visible { outline: none; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07); transform: translateY(-2px); }
.info-post-copy { position: relative; overflow: hidden; color: #4f4f4f; font-size: 14px; line-height: 1.8; white-space: normal; }
.info-post-copy.is-long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.info-post-copy.is-long::after { position: absolute; right: 0; bottom: 0; left: 0; display: grid; height: 2.15em; place-items: end center; padding-bottom: .05em; background: linear-gradient(180deg, transparent 0%, #fff 72%); color: #666; content: '查看更多'; font-size: 12px; line-height: 1.8; }
.info-media-grid { display: grid; width: 100%; max-width: 480px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 14px; margin-right: auto; margin-left: auto; }
.info-media-grid.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
.info-media-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 16px; padding: 0; background: #eee; cursor: zoom-in; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.info-media-thumb img, .info-media-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.info-media-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 20px; }
.info-empty { margin: 70px 0; color: #888; text-align: center; font-size: 14px; }
.info-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; color: #515151; font: inherit; font-size: 12px; }
.info-pagination label { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: inherit; }
.info-pagination input { box-sizing: border-box; width: 40px; height: 31px; border: 1px solid #d0d0d0; border-radius: 999px; padding: 0 6px; background: #fff; color: inherit; font: inherit; font-size: inherit; text-align: center; }
.info-dialog, .info-media-viewer { position: fixed; z-index: 3400; inset: 0; display: grid; place-items: center; overflow-x: hidden; overflow-y: auto; padding: 28px; background: rgba(0, 0, 0, 0.58); }
.info-composer, .info-post-full { box-sizing: border-box; width: min(100%, 720px); min-width: 0; max-width: 100%; max-height: min(82svh, 880px); overflow-x: hidden; overflow-y: auto; border-radius: 16px; padding: 22px; background: #fff; }
.info-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.info-dialog-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.info-post-full .info-dialog-head h2 { min-width: 0; flex: 1; }
.info-dialog-head button, .info-composer-actions button { border: 1px solid #c8c8c8; border-radius: 999px; padding: 7px 12px; background: #fff; color: #333; cursor: pointer; font: inherit; font-size: 12px; }
.info-rich-editor { margin-top: 0; }
.info-rich-editor [data-post-editor] { box-sizing: border-box; min-height: 180px; color: #333; }
.info-rich-editor [data-post-editor]:empty::before { color: #999; content: attr(data-placeholder); pointer-events: none; }
.info-post-title-field { display: grid; gap: 6px; margin-bottom: 12px; color: var(--distant-stars-muted); font-size: 12px; }
.info-post-title-field input { width: 100%; border: 1px solid var(--distant-stars-border); border-radius: 9px; padding: 10px 11px; background: var(--distant-stars-surface); color: var(--distant-stars-text); font: inherit; font-size: 14px; }
.info-post-title-field + .manage-inline-title-align { width: fit-content; max-width: 100%; margin: -5px 0 12px; }
.info-composer-media { display: grid; gap: 6px; margin-top: 12px; }
.info-composer-media > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; border-bottom: 1px solid #eee; padding: 7px 0; color: #777; font-size: 12px; }
.info-composer-media span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-composer-media button { border: 0; background: none; color: #777; cursor: pointer; text-decoration: underline; }
.info-composer-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.info-composer-actions button[type="submit"] { border-color: #161616; background: #161616; color: #fff; }
.info-post-full-copy { color: #444; font-size: 15px; line-height: 1.9; white-space: normal; }
.info-post-full-media { display: grid; gap: 12px; margin-top: 20px; }
.info-post-full-media button { width: 100%; border: 0; padding: 0; background: #f2f2f2; cursor: zoom-in; }
.info-post-full-media img, .info-post-full-media video { display: block; width: 100%; max-width: 100%; height: auto; }
.info-media-viewer { z-index: 3500; padding-top: 84px; background: rgba(0, 0, 0, 0.92); }
.info-viewer-tools { position: absolute; top: 20px; right: 24px; display: flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; }
.info-viewer-tools button { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 7px 10px; background: rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer; }
.info-viewer-stage { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; }
.info-viewer-stage img, .info-viewer-stage video { max-width: min(92vw, 1440px); max-height: calc(100svh - 128px); transform-origin: center; transition: transform 140ms ease-out; }
.card-type-dialog.media-choice-dialog { z-index: 3600; }

.record-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.record-new-button, .record-confirm { border: 1px solid #161616; border-radius: 999px; padding: 9px 14px; background: #161616; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.record-grid > .info-empty { width: 100%; grid-column: 1 / -1; }
.record-card { position: relative; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 16px; background: #fff; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.record-card:hover, .record-card:focus-visible { outline: none; box-shadow: 0 12px 28px rgba(0,0,0,.07); transform: translateY(-2px); }
.record-cover { position: relative; display: grid; aspect-ratio: 4 / 5; place-items: center; overflow: hidden; background: #fff; color: #aaa; font-size: 12px; }
.record-cover img, .record-cover video { width: 100%; height: 100%; object-fit: cover; }
.record-card-copy { padding: 16px; }
.record-card-copy h2 { margin: 0; color: #222; font-size: 18px; font-weight: 500; }
.record-card-copy p { margin: 9px 0 0; color: #777; font-size: 13px; line-height: 1.65; }
.record-year { color: #999 !important; font-size: 11px !important; letter-spacing: .08em; }
.record-lock { display: inline-block; margin-top: 11px; color: #777; font-size: 11px; }
.record-card-manage { display: flex; justify-content: flex-end; gap: 8px; padding: 0 12px 12px; }
.record-card-manage button { border: 0; padding: 2px 4px; background: transparent; color: #777; cursor: pointer; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.record-meta-form, .record-editor, .record-reader { width: min(100%, 820px); max-height: min(86svh, 960px); overflow-y: auto; border-radius: 16px; padding: 22px; background: #fff; }
.record-meta-form, .record-editor { display: grid; gap: 13px; }
.record-meta-form label, .record-editor-meta label { display: grid; gap: 6px; color: #555; font-size: 12px; }
.record-meta-form input, .record-meta-form textarea, .record-editor input, .record-editor textarea { box-sizing: border-box; width: 100%; border: 1px solid #d8d8d8; border-radius: 9px; padding: 10px 11px; color: #333; font: inherit; font-size: 14px; line-height: 1.65; }
.record-meta-form textarea, .record-editor textarea { resize: vertical; }
.record-cover-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #555; font-size: 12px; }
.record-cover-picker button, .record-txt-picker { border: 1px solid #d0d0d0; border-radius: 999px; padding: 7px 11px; background: #fff; color: #555; cursor: pointer; font: inherit; font-size: 12px; }
.record-cover-picker small { color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-editor-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.record-editor-meta label:nth-last-child(-n + 2) { grid-column: 1 / -1; }
.record-editor-meta small { color: #999; font-size: 11px; font-weight: 400; }
.record-text-actions { display: flex; align-items: center; gap: 12px; color: #888; font-size: 12px; }
.record-txt-picker input { display: none; }
.record-body-input { min-height: min(52svh, 620px); font-family: inherit !important; line-height: 1.95 !important; }
.record-reader { width: min(100%, 760px); }
.record-reader .info-dialog-head { align-items: flex-start; }
.record-reader .info-dialog-head h2 { color: #222; font-size: clamp(28px, 5vw, 42px); }
.record-reader-actions { display: flex; align-items: center; gap: 8px; }
.record-reader-actions button { border: 1px solid #c8c8c8; border-radius: 999px; padding: 7px 12px; background: #fff; color: #333; cursor: pointer; font: inherit; font-size: 12px; }
.record-summary { margin: 22px 0 30px; color: #666; font-size: 14px; line-height: 1.85; }
.record-summary p { margin: 0; }
.record-reading-area { margin-top: 18px; border: 1px solid #e2e2e2; border-radius: 10px; padding: clamp(20px, 4vw, 38px); background: #fcfcfc; }
.record-reading-area .eyebrow { margin-bottom: 20px; }
.record-reading-body { color: #3f3f3f; font-size: 16px; line-height: 2; }
.record-postscript { margin-top: 42px; color: #666; font-size: 14px; line-height: 1.85; }
.record-postscript h3 { margin: 0 0 10px; color: #333; font-size: 16px; font-weight: 500; }
.record-postscript p { margin: 0; }
.record-password-form { width: min(100%, 420px); border-radius: 16px; padding: 22px; background: #fff; }
.record-password-form > p { color: #666; font-size: 14px; line-height: 1.7; }
.record-password-hint { color: #555 !important; }
.record-password-form label { display: grid; gap: 6px; margin: 18px 0; color: #555; font-size: 12px; }
.record-password-form input { box-sizing: border-box; width: 100%; border: 1px solid #d8d8d8; border-radius: 9px; padding: 10px 11px; font: inherit; }
.record-password-error { min-height: 1.2em; margin: 10px 0 0; color: #a12b2b; font-size: 12px; }
.other-actions { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.other-actions button { border: 1px solid #161616; border-radius: 999px; padding: 9px 14px; background: #161616; color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.other-card-list { display: grid; gap: 18px; }
.other-card-list > .other-detail-row { margin: clamp(20px, 4vw, 52px) 0; }
.other-detail-row { position: relative; }
.other-detail-row .row-number { text-align: center; }
.other-card-list .other-detail-row-right .other-article-image { order: 2; justify-self: end; }
.other-card-list .other-detail-row-right .detail-row-copy { justify-self: start; }
.other-article-image { height: auto; min-height: 0; aspect-ratio: auto; padding: 0; background: transparent; }
.other-article-image { overflow: hidden; border-radius: 18px; }
.other-article-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.other-detail-copy { color: #707070; font-size: 14px; line-height: 1.8; }
.article-row-text .other-detail-copy { white-space: pre-wrap; }
.other-card { position: relative; display: grid; grid-template-columns: minmax(220px, 34%) 1fr; align-items: start; overflow: hidden; border: 1px solid #e1e1e1; border-radius: 16px; background: #fff; }
.other-card-right { grid-template-columns: 1fr minmax(180px, 34%); }
.other-card-right > img { order: 2; }
.other-card > img { display: block; width: 100%; height: auto; object-fit: contain; background: #f7f7f7; }
.other-card-copy { align-self: center; padding: 28px; color: #555; font-size: 14px; line-height: 1.85; }
.other-card-copy h2 { margin: 0 0 14px; color: #222; font-size: 22px; font-weight: 500; }
.other-card-text, .other-card-info, .other-card-record { display: block; min-height: 120px; padding: 28px 34px; }
.other-card-text .other-card-copy, .other-card-info .other-card-copy, .other-card-record .other-card-copy { text-align: center; }
.other-card-actions { position: absolute; right: 12px; top: 12px; display: flex; gap: 8px; }
.other-card-actions button { border: 0; background: rgba(255,255,255,.88); color: #666; cursor: pointer; font: inherit; font-size: 11px; text-decoration: underline; }
.other-post-card { position: relative; }
.other-card-number { margin-bottom: 14px; text-align: center; }
.other-post-title { display: block; margin-bottom: 10px; color: #222; font-size: 18px; font-weight: 500; }
.other-post-card .record-year { display: block; margin-bottom: 10px; }
.other-txt-card .info-post-copy { text-align: center; }
.other-post-media { margin-right: auto; margin-left: auto; }
.other-post-card .info-post-manage { position: absolute; top: 12px; right: 12px; }
.other-post-card .info-post-manage + .info-post-copy { padding-right: 70px; }
.other-txt-preview { position: relative; overflow: hidden; color: #4f4f4f; font-size: 14px; line-height: 1.8; }
.other-txt-preview.is-long { max-height: 9em; }
.other-txt-preview.is-long::after { position: absolute; right: 0; bottom: 0; left: 0; display: grid; height: 2.15em; place-items: end center; padding-bottom: .05em; background: linear-gradient(180deg, transparent 0%, #fff 72%); color: #666; content: '查看更多'; font-size: 12px; line-height: 1.8; }
.other-txt-card > .other-post-title,
.other-txt-card > .record-year,
.other-txt-card .other-txt-summary { text-align: center; }
.other-txt-summary { margin-bottom: 12px; }
.other-txt-body { min-width: 0; border: 1px solid #e2e2e2; border-radius: 10px; padding: 14px 16px; background: #fcfcfc; text-align: left; }
.other-card-form { box-sizing: border-box; display: grid; gap: 14px; width: min(100%, 620px); min-width: 0; max-width: 100%; max-height: 86svh; overflow-x: hidden; overflow-y: auto; border-radius: 16px; padding: 22px; background: #fff; }
.other-card-form label { display: grid; gap: 6px; color: #555; font-size: 12px; }
.other-card-form input, .other-card-form textarea, .other-card-form select { box-sizing: border-box; width: 100%; border: 1px solid #d8d8d8; border-radius: 9px; padding: 10px 11px; background: #fff; color: #333; font: inherit; font-size: 14px; }
.other-card-form textarea { resize: vertical; }
.other-image-fields { display: grid; min-width: 0; justify-items: start; gap: 8px; color: #777; font-size: 12px; }
.other-image-fields button { border: 1px solid #d0d0d0; border-radius: 999px; padding: 7px 11px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.other-image-upload { display: flex; justify-content: flex-start; min-width: 0; }
.other-image-upload button { border: 1px solid #d0d0d0; border-radius: 999px; padding: 7px 11px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.other-image-fields [data-other-image-name] { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-selected-media { display: grid; gap: 6px; min-width: 0; margin-top: -5px; }
.other-selected-media > div { display: flex; min-width: 0; align-items: center; gap: 10px; border-bottom: 1px solid var(--distant-stars-border); padding: 5px 0; color: var(--distant-stars-muted); font-size: 12px; }
.other-selected-media span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-selected-media button { flex: 0 0 auto; border: 0; padding: 2px 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12px; text-decoration: underline; }
.other-card-form .manage-inline-title-align { width: fit-content; max-width: 100%; margin: -7px 0 1px; }
.other-image-fields label { min-width: 150px; }
.other-type-choice { width: min(100%, 620px); border-radius: 16px; padding: 22px; background: #fff; }
.other-type-choice > p { color: #666; font-size: 14px; line-height: 1.7; }
.other-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.other-type-options button { display: grid; min-height: 120px; gap: 9px; border: 1px solid #d6d6d6; border-radius: 12px; padding: 16px; background: #fff; color: #333; cursor: pointer; text-align: left; font: inherit; }
.other-type-options button:hover, .other-type-options button:focus-visible { border-color: #161616; background: #fafafa; outline: none; }
.other-type-options strong { font-size: 16px; font-weight: 500; }
.other-type-options small { color: #777; font-size: 12px; line-height: 1.5; }
.other-type-label { margin: -3px 0 4px; color: #777; font-size: 12px; }
.other-rich-editor { margin-top: 4px; }
.other-rich-editor [data-other-editable] { min-height: 150px; color: #333; }
.other-rich-editor [data-other-editable]:empty::before { color: #999; content: attr(data-placeholder); pointer-events: none; }
.other-reader { max-height: min(86svh, 960px); overflow-y: auto; }

.article-description {
  margin: 0 auto;
  color: #707070;
  font-size: 15px;
  line-height: 1.9;
}

.article-content {
  margin-top: clamp(100px, 18vw, 220px);
}

.admin-header, .editor-heading, .editor-section-heading, .editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-status { margin: 0; color: #777; font-size: 12px; }
.login-view {
  display: grid;
  min-height: 100svh;
  min-height: 100dvh;
  place-items: center;
}
.login-card { width: min(100%, 440px); }
.login-back-button { display: inline-block; margin-top: 28px; color: var(--distant-stars-text); font-size: 13px; text-underline-offset: 4px; }
.login-card h1, .editor-heading h1 { margin-bottom: 18px; font-size: clamp(40px, 6vw, 68px); }
.login-intro, .demo-note, .editor-section-heading p { color: #777; font-size: 14px; line-height: 1.7; }
.login-form, .editor-fields, .editor-row-fields { display: grid; gap: 18px; }
.login-form { margin-top: 34px; }
.login-form label, .editor-section > label, .editor-fields label, .editor-row-fields label { display: grid; gap: 8px; color: #555; font-size: 13px; }
.login-form input, .editor-section input, .editor-section textarea { width: 100%; border: 1px solid #d8d8d8; border-radius: 10px; background: #fff; padding: 12px 13px; color: #161616; font: inherit; outline: none; }
.editor-section textarea { resize: vertical; line-height: 1.6; }
.login-form input:focus, .editor-section input:focus, .editor-section textarea:focus { border-color: #161616; }
.admin-primary-button, .admin-secondary-button { border-radius: 999px; padding: 12px 18px; font-size: 14px; }
.admin-primary-button { border: 1px solid #161616; background: #161616; color: #fff; }
.admin-secondary-button { border: 1px solid #161616; background: #fff; color: #161616; }
.text-button { border: 0; background: transparent; color: #161616; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.demo-note, .form-message { margin: 0; }
.demo-note { margin-top: 24px; }
.demo-note code { color: #161616; }
.form-message { min-height: 1.5em; color: #777; font-size: 13px; }
.editor-view { margin-top: clamp(72px, 12vw, 130px); }
.editor-section { margin-top: 64px; padding-top: 28px; border-top: 1px solid #e5e5e5; }
.editor-section h2 { margin: 0; font-size: 24px; font-weight: 500; }
.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.editor-rows { display: grid; gap: 14px; margin-top: 28px; }
.editor-row { display: grid; grid-template-columns: 32px 1fr 30px; gap: 14px; align-items: start; padding: 18px; border: 1px solid #e2e2e2; border-radius: 16px; }
.row-order { padding-top: 9px; color: #999; font-size: 12px; }
.image-input span { color: #888; font-size: 12px; }
.remove-row-button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f2f2f2; color: #666; font-size: 18px; }
.editor-actions { justify-content: flex-end; margin-top: 36px; }
.editor-preview { margin-top: clamp(80px, 12vw, 160px); padding-top: 30px; border-top: 1px solid #161616; }
.preview-canvas { margin-top: 38px; padding: clamp(46px, 8vw, 100px) clamp(20px, 6vw, 82px); border: 1px solid #e2e2e2; border-radius: 24px; background: #fcfcfc; }
.preview-canvas .article-intro { margin-top: 0; }
.preview-rows { margin-top: clamp(76px, 12vw, 140px); }
.detail-image-placeholder.has-image { overflow: hidden; padding: 0; background: #eee; }
.detail-image-placeholder.has-image img { width: 100%; height: 100%; object-fit: cover; }

.manage-bar { position: fixed; z-index: 2000; top: 22px; left: 50%; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 999px; background: #161616; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2); color: #fff; font-size: 13px; transform: translateX(-50%); }
.manage-bar small { color: #bcbcbc; font-size: 11px; }
.manage-bar button { border: 1px solid #666; border-radius: 999px; background: transparent; color: #fff; padding: 6px 10px; font: inherit; font-size: 12px; }
.manage-bar button:hover, .manage-bar button:focus-visible { border-color: #fff; }
.manage-mode [contenteditable="true"] { cursor: text; color: var(--distant-stars-text); outline: 1px dashed transparent; outline-offset: 5px; transition: outline-color 160ms ease, background 160ms ease; }
.manage-mode [contenteditable="true"]:hover, .manage-mode [contenteditable="true"]:focus { outline-color: #777; background: rgba(255, 241, 161, 0.24); }
.manage-title-align-controls,
.manage-inline-title-align {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 7px 0 12px;
  padding: 3px;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  background: #fff;
}
.manage-title-align-controls { width: 100%; clear: both; }
.manage-title-align-controls button,
.manage-inline-title-align button {
  min-width: 25px;
  height: 23px;
  padding: 0 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #666;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}
.manage-title-align-controls button:hover,
.manage-title-align-controls button.is-active,
.manage-inline-title-align button:hover,
.manage-inline-title-align button.is-active {
  background: #161616;
  color: #fff;
}
.manage-mode .detail-section .section-intro {
  margin-right: auto;
  margin-left: auto;
}
.manage-mode .manage-image-target { position: relative; background-position: center; background-size: cover; }
.managed-media-video,
.series-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.manage-video-preview { overflow: hidden; }
.manage-video-preview > :not(.managed-media-video):not(.series-card-video):not(.manage-image-upload-inline) { position: relative; z-index: 1; }
.manage-mode .portrait-card.manage-image-preview > span,
.manage-mode .detail-image-placeholder.manage-image-preview > span { opacity: 0; }
.manage-card-shell { display: grid; gap: 8px; min-width: 0; }
.manage-card-shell .content-card { background-position: center; background-size: cover; }
.manage-card-upload, .manage-image-upload-inline { border: 0; background: transparent; color: #666; cursor: pointer; font: inherit; font-size: 11px; letter-spacing: 0.04em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.manage-card-upload { justify-self: center; padding: 2px 4px; }
.manage-image-upload-inline { position: absolute; right: 0; top: calc(100% + 8px); z-index: 2; padding: 2px 0; }
.manage-card-upload:hover, .manage-card-upload:focus-visible, .manage-image-upload-inline:hover, .manage-image-upload-inline:focus-visible { color: #161616; outline: none; }

.media-link-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.media-link-form input {
  min-width: 0;
  border: 1px solid #d4d4d4;
  padding: 10px 11px;
  font: inherit;
}

.media-link-error { min-height: 1.3em; margin: 8px 0 0; color: #a12b2b; font-size: 12px; }
.manage-text-source { display: none !important; }
.visitor-copy-hidden { display: none !important; }
.manage-rich-editor { width: 100%; margin-top: 14px; }
.manage-editor-toolbar { display: flex; align-items: center; gap: 4px; margin: 0 0 7px; color: #555; }
.manage-editor-toolbar button, .manage-editor-toolbar label { display: grid; width: 29px; height: 27px; place-items: center; margin: 0; padding: 0; border: 1px solid #d0d0d0; border-radius: 6px; background: #fff; color: #444; cursor: pointer; font: inherit; font-size: 12px; line-height: 1; }
.manage-editor-toolbar button:nth-of-type(2) { text-align: left; }
.manage-editor-toolbar button:nth-of-type(3) { text-align: center; }
.manage-editor-toolbar button:nth-of-type(4) { text-align: right; }
.manage-editor-toolbar button:last-child { width: auto; padding: 0 7px; font-size: 11px; }
.manage-editor-toolbar button:hover, .manage-editor-toolbar button:focus-visible, .manage-editor-toolbar label:hover { border-color: #161616; outline: none; }
.manage-editor-toolbar label { position: relative; overflow: hidden; font-size: 11px; }
.manage-editor-toolbar input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; opacity: 0; }
.manage-textarea { display: block; width: 100%; min-height: 132px; margin: 0; overflow: auto; border: 1px dashed #aaa; border-radius: 10px; background: rgba(255, 255, 255, 0.76); color: #707070; font: inherit; font-size: 14px; line-height: 1.8; outline: none; padding: 14px; white-space: pre-wrap; }
.hero-copy .manage-rich-editor { align-self: center; }
.hero-copy .manage-textarea { color: #686868; font-size: 15px; line-height: 1.8; text-align: center; }
.intro .manage-rich-editor, .article-intro .manage-rich-editor { margin-right: auto; margin-left: auto; }
.intro .manage-textarea, .article-intro .manage-textarea { text-align: center; }
.detail-row-copy .manage-rich-editor { max-width: 360px; }
.article-row:not(.article-row-text) .manage-rich-editor { max-width: 560px; }
.article-row:not(.article-row-text) .manage-textarea { min-height: calc(1.8em + 28px); resize: none; }
.article-row-text .detail-row-copy { text-align: center; }
.article-row-text .row-number,
.article-row-text h3 { text-align: center; }
.article-row-text .manage-rich-editor { max-width: none; margin-top: 24px; }
.article-row-text .manage-editor-toolbar { justify-content: center; }
.article-row-text .manage-textarea { min-height: 1.8em; border: 0; border-radius: 0; background: transparent; padding: 0; text-align: center; resize: none; }
.article-row-text .manage-textarea:focus { background: transparent; }
.manage-article-title-slot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.manage-article-title-slot h3 { flex: 1; margin: 0; }
.manage-article-title-slot .manage-inline-title-align { width: 100%; order: 3; margin: 0 0 4px; }
.article-row-text .manage-article-title-slot { justify-content: center; }
.manage-textarea:focus { border-color: #161616; background: #fff; }
.manage-spoiler { position: relative; display: inline-block; cursor: pointer; }
.manage-spoiler::after { position: absolute; z-index: 1; inset: -1px -2px; border-radius: 3px; background: #161616; content: ""; opacity: 1; pointer-events: none; transition: opacity 160ms ease; }
.manage-spoiler.spoiler-revealed::after { opacity: 0; }
.manage-spoiler:focus-visible { outline: 1px dashed currentColor; outline-offset: 3px; }
.manage-mode .manage-spoiler { cursor: text; text-decoration: underline dotted; text-underline-offset: 3px; }
.manage-mode .manage-spoiler::after { display: none; }

body.media-viewer-open {
  overflow: hidden;
}

.media-viewer {
  position: fixed;
  z-index: 3200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 84px 24px 28px;
  background: rgba(0, 0, 0, 0.92);
}

.media-viewer-toolbar {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.media-viewer-toolbar button {
  min-width: 38px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.media-viewer-toolbar button[data-media-action="close"] {
  padding: 0 13px;
}

.media-viewer-toolbar button:hover,
.media-viewer-toolbar button:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.media-viewer-stage {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.media-viewer-stage.is-dragging {
  cursor: grabbing;
}

.media-viewer-stage img {
  max-width: min(92vw, 1440px);
  max-height: calc(100svh - 128px);
  user-select: none;
  transform-origin: center;
  transition: transform 120ms ease-out;
}

.card-type-dialog {
  position: fixed;
  z-index: 3100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.38);
}

.card-type-dialog-box {
  width: min(100%, 500px);
  padding: clamp(28px, 5vw, 44px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.24);
}

.card-type-dialog-box h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 5vw, 44px);
}

.card-type-dialog-box > p:not(.eyebrow) {
  margin-bottom: 28px;
  color: #707070;
  font-size: 14px;
  line-height: 1.7;
}

.card-type-dialog-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.card-type-dialog-actions button,
.card-type-dialog-cancel {
  min-height: 68px;
  border: 1px solid #161616;
  border-radius: 12px;
  background: #fff;
  color: #161616;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.card-type-dialog-actions button:hover,
.card-type-dialog-actions button:focus-visible {
  background: #161616;
  color: #fff;
  outline: none;
}

.card-type-dialog-cancel {
  width: 100%;
  min-height: auto;
  margin-top: 16px;
  border: 0;
  color: #777;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.detail-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(100px, 16vw, 200px);
}

.return-button {
  padding: 10px 18px;
  border: 1px solid #161616;
  border-radius: 999px;
  color: #161616;
  font-size: 14px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.return-button:hover,
.return-button:focus-visible {
  background: #161616;
  color: #fff;
}

.global-nav {
  position: fixed;
  right: 52px;
  bottom: 26px;
  z-index: 1000;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.global-nav-main,
.scroll-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-circle,
.scroll-controls button {
  display: grid;
  place-items: center;
  border: 1px solid #161616;
  background: rgba(255, 255, 255, 0.92);
  color: #161616;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  backdrop-filter: blur(8px);
}

.nav-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border-color: #161616;
  background: #161616;
  color: #fff;
  font-size: 17px;
}

.nav-map {
  font-size: 10px;
  letter-spacing: 0.04em;
}

.nav-home {
  font-size: 24px;
  line-height: 1;
}

.scroll-controls {
  gap: 7px;
  margin-top: 2px;
}

.scroll-controls button {
  position: relative;
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  backdrop-filter: none;
}

.scroll-controls button + button {
  border-top: 0;
}

.scroll-controls button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  transform: translate(-50%, -50%);
}

.scroll-controls button[data-action="top"]::after {
  border-right: 7px solid transparent;
  border-bottom: 10px solid #161616;
  border-left: 7px solid transparent;
}

.scroll-controls button[data-action="bottom"]::after {
  border-top: 10px solid #161616;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}

.nav-circle:hover,
.nav-circle:focus-visible {
  background: #161616;
  color: #fff;
  outline: none;
}

.nav-circle:hover,
.nav-circle:focus-visible {
  transform: scale(1.05);
}

.scroll-controls button:hover,
.scroll-controls button:focus-visible {
  background: transparent;
  outline: none;
  transform: scale(1.15);
}

.map-panel {
  position: fixed;
  right: 126px;
  bottom: 28px;
  width: fit-content;
  min-width: 176px;
  max-width: calc(100vw - 154px);
  height: min(430px, 62svh);
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom: 2px;
  padding: 14px;
  border: 1px solid #161616;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
}

.map-panel[hidden] {
  display: none !important;
}

.map-panel-title {
  margin: 0 0 10px;
  color: #777;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.map-panel a {
  display: block;
  padding: 6px 0;
  color: #161616;
  font-size: 13px;
  text-decoration: none;
}

.map-series {
  padding: 3px 0;
}

.map-group + .map-group { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e1e1e1; }
.map-group-title { margin: 3px 0 4px; color: #999; font-size: 10px; letter-spacing: 0.12em; }
.map-association { padding: 1px 0; }

.map-home > [data-series-map] {
  display: grid;
  gap: 1px;
  margin: 1px 0 4px 8px;
  padding-left: 9px;
  border-left: 1px solid #bdbdbd;
}

.map-home > [data-series-map][hidden] {
  display: none;
}

.map-series-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.map-panel .map-series-title {
  padding: 5px 0;
  font-size: 13px;
}

.map-series-toggle {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border: 1px solid #d0d0d0;
  border-radius: 50%;
  background: transparent;
  color: #555;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.map-series-toggle:hover,
.map-series-toggle:focus-visible {
  border-color: #161616;
  color: #161616;
  outline: none;
}

.map-series-children {
  display: grid;
  gap: 1px;
  margin: 1px 0 4px 10px;
  padding-left: 9px;
  border-left: 1px solid #d7d7d7;
}

.map-panel .map-series-children a {
  padding: 3px 0;
  color: #777;
  font-size: 11px;
}

.map-panel a:hover,
.map-panel a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes cover-leave {
  to {
    opacity: 0;
    transform: scale(1.015);
  }
}

@media (max-width: 640px) {
  .cover-screen,
  .gallery-screen {
    width: 100%;
    max-width: 100%;
    padding: 56px 20px 32px;
    padding-top: calc(56px + env(safe-area-inset-top));
    padding-right: calc(20px + env(safe-area-inset-right));
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
    padding-left: calc(20px + env(safe-area-inset-left));
  }

  .cover-screen .cover-content {
    width: 100%;
  }

  .cover-screen .cover-content .eyebrow {
    max-width: 100%;
    font-size: clamp(7px, 2.2vw, 11px);
    letter-spacing: .08em;
  }

  .cover-screen .cover-content .cover-subtitle {
    font-size: clamp(10px, 2.6vw, 14px);
  }

  .cover-screen .cover-content #site-title {
    max-width: 100%;
    /* Keep a legacy-browser fallback before clamp() so Via and older Edge
       never fall back to the oversized desktop heading. */
    font-size: 36px;
    font-size: clamp(32px, 9vw, 60px);
    line-height: .95;
    text-align: center !important;
    white-space: nowrap;
  }

  .intro-description {
    display: block;
    max-width: 100%;
    white-space: normal;
  }

  .intro-description p {
    display: block;
    margin: 0;
    font-size: clamp(8px, 2.6vw, 14px);
    line-height: 1.5;
  }

  .series-card-title,
  .series-card.manage-image-preview .series-card-title { -webkit-text-stroke-width: .35px; }

  .admin-entry {
    top: 22px;
    right: 20px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 52px;
  }

  .association-card-grid { grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .association-card-grid .association-card-shell:nth-child(-n + 2) { grid-column: span 1; }
  .association-card-grid .association-card-shell:nth-child(3) { grid-column: span 2; }

  .site-topbar { padding: 20px; }
  .record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .record-editor-meta { grid-template-columns: 1fr; }
  .record-editor-meta label:nth-last-child(-n + 2) { grid-column: auto; }
  .record-toolbar { align-items: flex-start; flex-direction: column; }

  .detail-page,
  .article-page,
  .admin-page,
  .association-page main {
    padding: 22px 20px 72px;
  }

  .admin-page {
    padding-top: 0;
    padding-bottom: 0;
  }

  .two-columns { grid-template-columns: 1fr; }
  .editor-section-heading { align-items: flex-start; }
  .editor-row { grid-template-columns: 24px 1fr; }
  .remove-row-button { grid-column: 2; }

  .detail-hero {
    margin-top: 82px;
  }

  .hero-card-layout {
    /* Keep the series-page hero as two images with centered copy between
       them on small screens.  The middle column is intentionally narrower,
       but it remains part of the same row and the same height. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr);
    gap: clamp(6px, 2.4vw, 12px);
  }

  body[data-collection^="series-"] .hero-card-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr);
    gap: clamp(6px, 2.4vw, 12px);
  }

  .portrait-card {
    min-width: 0;
    padding: clamp(7px, 2vw, 12px);
    border-radius: 12px;
    font-size: 9px;
  }

  .hero-copy {
    min-width: 0;
    border-radius: 10px;
    padding: 6px;
    font-size: clamp(8px, 2.35vw, 13px);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .detail-section {
    margin-top: 100px;
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .detail-row:nth-child(even) .detail-image-link {
    order: 0;
    justify-self: stretch;
  }

  .detail-row:nth-child(even) .detail-row-copy {
    justify-self: start;
  }

  .article-row:nth-child(even) .article-image {
    order: 0;
    justify-self: stretch;
  }

  .detail-image-placeholder {
    max-width: none;
  }

  .global-nav {
    right: 28px;
    bottom: 16px;
  }

  .map-panel {
    right: 86px;
    bottom: 16px;
    max-width: calc(100vw - 116px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body > main {
    transition: none;
  }

  .cover-screen.is-leaving {
    animation: none;
  }

  .gallery-screen {
    transition: none;
  }

  .nav-circle,
  .scroll-controls button {
    transition: none;
  }
}

/* Website design settings.  These selectors deliberately sit last so a theme
   changes the existing visual system without changing its layout rules. */
body, .cover-screen, .gallery-screen, .detail-page, .article-page, .association-page, .admin-page { color: var(--distant-stars-text); }
.eyebrow, .intro p:not(.eyebrow), .association-description, .detail-row-copy p, .article-description, .section-intro > p:last-child, .site-settings-note { color: var(--distant-stars-muted); }
.content-card:not(.manage-image-preview), .info-post-card, .record-card, .other-card, .record-reader, .record-meta-form, .record-editor, .info-composer, .info-post-full, .map-panel, .preview-canvas, .login-card, .record-password-form { background-color: var(--distant-stars-surface); border-color: var(--distant-stars-border); }
.enter-button, .admin-primary-button, .record-new-button, .record-confirm, .other-actions button, .info-toolbar .info-tag.is-active, .info-pagination .info-page.is-active { border-color: var(--distant-stars-button); background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
.admin-secondary-button, .info-toolbar button, .info-manage-tags button, .info-pagination button, .record-cover-picker button, .record-txt-picker, .info-dialog-head button, .info-composer-actions button, .record-reader-actions button { border-color: var(--distant-stars-border); background: var(--distant-stars-surface); color: var(--distant-stars-text); }
.enter-button:hover, .enter-button:focus-visible { background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
.global-nav-main .nav-circle, .global-nav-main .nav-map { background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
.scroll-controls button, .site-topbar-settings { color: var(--distant-stars-text); }
.manage-mode .manage-textarea, .manage-mode input, .manage-mode textarea, .manage-mode select { color: var(--distant-stars-text); background-color: var(--distant-stars-surface); border-color: var(--distant-stars-border); }
.manage-mode .manage-textarea::placeholder, .manage-mode input::placeholder, .manage-mode textarea::placeholder { color: var(--distant-stars-muted); }
.map-panel, .map-panel a, .map-panel-title, .map-series-toggle, .map-home, .map-series-head { color: var(--distant-stars-text); }
html[data-distant-stars-palette="night"] body,
html[data-distant-stars-palette="night"] body a,
html[data-distant-stars-palette="night"] body button,
html[data-distant-stars-palette="night"] body input,
html[data-distant-stars-palette="night"] body textarea,
html[data-distant-stars-palette="night"] body select { color: #ffffff; }
html[data-distant-stars-palette="night"] .manage-editor-toolbar,
html[data-distant-stars-palette="night"] .manage-editor-toolbar button,
html[data-distant-stars-palette="night"] .manage-editor-toolbar label { background: #050505; border-color: #484848; color: #ffffff; }
html[data-distant-stars-palette="night"] .manage-mode .manage-textarea,
html[data-distant-stars-palette="night"] .manage-mode input,
html[data-distant-stars-palette="night"] .manage-mode textarea,
html[data-distant-stars-palette="night"] .manage-mode select { background: #050505; color: #ffffff; }

/* Theme-aware controls that previously used fixed light colors. */
.manage-title-align-controls,
.manage-inline-title-align { border-color: var(--distant-stars-border); background: var(--distant-stars-surface); }
.manage-title-align-controls button,
.manage-inline-title-align button { color: var(--distant-stars-text); }
.manage-title-align-controls button:hover,
.manage-title-align-controls button.is-active,
.manage-inline-title-align button:hover,
.manage-inline-title-align button.is-active { background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
.enter-button,
.site-settings-actions .admin-primary-button { border-color: #777777; background: #777777; color: #ffffff; }
.enter-button:hover,
.enter-button:focus-visible,
.site-settings-actions .admin-primary-button:hover,
.site-settings-actions .admin-primary-button:focus-visible { border-color: #5f5f5f; background: #5f5f5f; color: #ffffff; }
.scroll-controls button { border-color: var(--distant-stars-button); background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
html[data-distant-stars-palette="night"] .manage-title-align-controls,
html[data-distant-stars-palette="night"] .manage-inline-title-align { background: #050505; border-color: #484848; }
html[data-distant-stars-palette="night"] .manage-title-align-controls button,
html[data-distant-stars-palette="night"] .manage-inline-title-align button { color: #ffffff; }
html[data-distant-stars-palette="night"] .manage-title-align-controls button:hover,
html[data-distant-stars-palette="night"] .manage-title-align-controls button.is-active,
html[data-distant-stars-palette="night"] .manage-inline-title-align button:hover,
html[data-distant-stars-palette="night"] .manage-inline-title-align button.is-active { background: #000000; color: #ffffff; }

/* Apply the selected palette to legacy fixed-color components as well. */
html[data-distant-stars-palette] .gallery-section-title,
html[data-distant-stars-palette] .detail-hero h1,
html[data-distant-stars-palette] .section-intro h2,
html[data-distant-stars-palette] .article-intro h1,
html[data-distant-stars-palette] .article-intro h2,
html[data-distant-stars-palette] .association-hero h1 { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .series-more-toggle,
html[data-distant-stars-palette] .series-card-actions button,
html[data-distant-stars-palette] .series-manager-controls button,
html[data-distant-stars-palette] .detail-admin-entry,
html[data-distant-stars-palette] .return-button { color: var(--distant-stars-text); border-color: var(--distant-stars-border); }
html[data-distant-stars-palette] .portrait-card { background: var(--distant-stars-surface); color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .portrait-card-right { background: color-mix(in srgb, var(--distant-stars-surface) 78%, var(--distant-stars-border)); }
html[data-distant-stars-palette] .hero-copy { color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .content-card:not(.manage-image-preview) { border-color: var(--distant-stars-border); background: var(--distant-stars-surface); color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .series-manager-controls button:last-child,
html[data-distant-stars-palette] .return-button { border-color: var(--distant-stars-button); }
html[data-distant-stars-palette] .series-manager-controls button:last-child:hover,
html[data-distant-stars-palette] .series-manager-controls button:last-child:focus-visible,
html[data-distant-stars-palette] .return-button:hover,
html[data-distant-stars-palette] .return-button:focus-visible { background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
html[data-distant-stars-palette] .info-post-copy,
html[data-distant-stars-palette] .info-post-full-copy,
html[data-distant-stars-palette] .other-detail-copy,
html[data-distant-stars-palette] .other-card-copy,
html[data-distant-stars-palette] .record-summary,
html[data-distant-stars-palette] .record-postscript { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .record-card-copy h2,
html[data-distant-stars-palette] .record-reader .info-dialog-head h2,
html[data-distant-stars-palette] .other-card-copy h2,
html[data-distant-stars-palette] .other-post-title { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .record-card-copy p,
html[data-distant-stars-palette] .record-lock,
html[data-distant-stars-palette] .record-year,
html[data-distant-stars-palette] .record-meta-form label,
html[data-distant-stars-palette] .record-editor-meta label,
html[data-distant-stars-palette] .record-cover-picker,
html[data-distant-stars-palette] .other-card-form label { color: var(--distant-stars-muted); }

.site-settings-dialog { position: fixed; z-index: 4200; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .56); }
.site-settings-panel { width: min(100%, 780px); max-height: min(88svh, 900px); overflow: auto; border-radius: 18px; padding: 24px; background: var(--distant-stars-surface); color: var(--distant-stars-text); box-shadow: 0 28px 80px rgba(0,0,0,.28); }
.site-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.site-settings-head h2 { margin: 0; font-size: clamp(30px, 5vw, 46px); }
.site-settings-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--distant-stars-text); font-size: 28px; line-height: 1; }
.site-settings-tabs { display: flex; gap: 8px; margin: 24px 0 10px; border-bottom: 1px solid var(--distant-stars-border); }
.site-settings-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 9px 3px; background: transparent; color: var(--distant-stars-muted); font: inherit; font-size: 14px; }
.site-settings-tabs button.is-active { border-color: var(--distant-stars-text); color: var(--distant-stars-text); }
.site-settings-note { margin: 0 0 22px; font-size: 13px; }
.site-settings-form { display: grid; gap: 22px; }
.site-settings-section { border-top: 1px solid var(--distant-stars-border); padding-top: 18px; }
.site-settings-section h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.site-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.site-settings-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; }
.site-settings-field { display: grid; gap: 7px; color: var(--distant-stars-muted); font-size: 12px; }
.site-settings-field input, .site-settings-field select { width: 100%; min-height: 38px; border: 1px solid var(--distant-stars-border); border-radius: 8px; padding: 7px 9px; background: var(--distant-stars-page); color: var(--distant-stars-text); font: inherit; }
.site-settings-field input[type="color"] { min-height: 42px; padding: 3px; }
.site-settings-field input[type="range"] { padding: 0; accent-color: var(--distant-stars-button); }
.site-settings-upload { display: grid; gap: 7px; align-content: start; }
.site-settings-upload input[type="file"] { max-width: 100%; color: var(--distant-stars-muted); font: inherit; font-size: 12px; }
.site-settings-upload small { color: var(--distant-stars-muted); font-size: 11px; }
.site-settings-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 9px; color: var(--distant-stars-text); font-size: 13px; cursor: pointer; }
.site-settings-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--distant-stars-button); }
.site-settings-toggle small { grid-column: 2; color: var(--distant-stars-muted); font-size: 11px; }
.site-settings-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.site-music-enable { position: fixed; z-index: 3900; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); border: 1px solid var(--distant-stars-border); border-radius: 999px; padding: 10px 14px; background: color-mix(in srgb, var(--distant-stars-surface) 92%, transparent); color: var(--distant-stars-text); box-shadow: 0 9px 28px rgba(0, 0, 0, .24); backdrop-filter: blur(10px); font: inherit; font-size: 13px; }
.site-music-enable[hidden] { display: none; }
@media (max-width: 640px) { .site-settings-dialog { padding: 12px; } .site-settings-panel { padding: 19px; } .site-settings-grid, .site-settings-inline { grid-template-columns: 1fr; } .site-topbar-actions { gap: 11px; } }

/* Login page and management chrome inherit the same theme without a white card
   cutting through the page background. */
html[data-distant-stars-palette] .admin-page,
html[data-distant-stars-palette] .login-view,
html[data-distant-stars-palette] .login-card { background: transparent; }
html[data-distant-stars-palette] .site-topbar { color: var(--distant-stars-text); background: color-mix(in srgb, var(--distant-stars-surface) 92%, transparent); }
html[data-distant-stars-palette] .login-card h1,
html[data-distant-stars-palette] .login-form label,
html[data-distant-stars-palette] .login-intro,
html[data-distant-stars-palette] .form-message,
html[data-distant-stars-palette] .login-back-button { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .login-form input { border-color: var(--distant-stars-border); background: var(--distant-stars-surface); color: var(--distant-stars-text); }

/* Non-night themes use their own accent for action buttons. Night mode uses
   the requested neutral gray for the cover and settings actions. */
.enter-button,
.site-settings-actions .admin-primary-button { border-color: var(--distant-stars-button); background: var(--distant-stars-button); color: var(--distant-stars-button-text); }
.enter-button:hover,
.enter-button:focus-visible,
.site-settings-actions .admin-primary-button:hover,
.site-settings-actions .admin-primary-button:focus-visible { border-color: color-mix(in srgb, var(--distant-stars-button) 78%, #000); background: color-mix(in srgb, var(--distant-stars-button) 78%, #000); color: var(--distant-stars-button-text); }
html[data-distant-stars-palette="night"] .enter-button,
html[data-distant-stars-palette="night"] .site-settings-actions .admin-primary-button { border-color: #777777; background: #777777; color: #ffffff; }
html[data-distant-stars-palette="night"] .enter-button:hover,
html[data-distant-stars-palette="night"] .enter-button:focus-visible,
html[data-distant-stars-palette="night"] .site-settings-actions .admin-primary-button:hover,
html[data-distant-stars-palette="night"] .site-settings-actions .admin-primary-button:focus-visible { border-color: #5f5f5f; background: #5f5f5f; color: #ffffff; }

/* The scroll triangles have no button box; only the triangle follows the
   theme accent. */
.scroll-controls button { border: 0; background: transparent; color: var(--distant-stars-button); }
.scroll-controls button[data-action="top"]::after { border-bottom-color: var(--distant-stars-button); }
.scroll-controls button[data-action="bottom"]::after { border-top-color: var(--distant-stars-button); }
html[data-distant-stars-palette="night"] .scroll-controls button[data-action="top"]::after { border-bottom-color: #ffffff; }
html[data-distant-stars-palette="night"] .scroll-controls button[data-action="bottom"]::after { border-top-color: #ffffff; }

/* Management floating bar and the remaining legacy text controls follow the
   same text/surface variables instead of fixed black and white values. */
html[data-distant-stars-palette] .manage-bar { border: 1px solid var(--distant-stars-border); background: var(--distant-stars-surface); color: var(--distant-stars-text); }
html[data-distant-stars-palette] .manage-bar small { color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .manage-bar button { border-color: var(--distant-stars-border); color: var(--distant-stars-text); }
html[data-distant-stars-palette] .manage-bar button:hover,
html[data-distant-stars-palette] .manage-bar button:focus-visible { border-color: var(--distant-stars-text); }
html[data-distant-stars-palette] .series-more-toggle,
html[data-distant-stars-palette] .info-toolbar,
html[data-distant-stars-palette] .info-pagination,
html[data-distant-stars-palette] .info-empty,
html[data-distant-stars-palette] .info-post-manage button,
html[data-distant-stars-palette] .record-card-manage button,
html[data-distant-stars-palette] .other-card-actions button,
html[data-distant-stars-palette] .other-image-fields,
html[data-distant-stars-palette] .other-type-label,
html[data-distant-stars-palette] .card-type-dialog-cancel { color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .editor-section,
html[data-distant-stars-palette] .editor-row,
html[data-distant-stars-palette] .preview-canvas { border-color: var(--distant-stars-border); background-color: var(--distant-stars-surface); }
html[data-distant-stars-palette] .map-panel .map-series-children a,
html[data-distant-stars-palette] .info-rich-editor [data-post-editor],
html[data-distant-stars-palette] .other-rich-editor [data-other-editable],
html[data-distant-stars-palette] .record-reading-body,
html[data-distant-stars-palette] .record-postscript h3 { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .info-post-copy.is-long::after,
html[data-distant-stars-palette] .other-txt-preview.is-long::after { background: linear-gradient(180deg, transparent 0%, var(--distant-stars-surface) 72%); color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .other-txt-preview { color: var(--distant-stars-text); }
html[data-distant-stars-palette] .other-txt-body { border-color: var(--distant-stars-border); background: color-mix(in srgb, var(--distant-stars-surface) 88%, var(--distant-stars-border)); }
html[data-distant-stars-palette] .record-reading-area { border-color: var(--distant-stars-border); background: color-mix(in srgb, var(--distant-stars-surface) 88%, var(--distant-stars-border)); }

/* Series detail-card management controls follow the active site theme. */
html[data-distant-stars-palette] .manage-detail-remove {
  border: 1px solid var(--distant-stars-button);
  border-radius: 0 10px 0 10px;
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
}
html[data-distant-stars-palette] .manage-detail-remove:hover,
html[data-distant-stars-palette] .manage-detail-remove:focus-visible {
  background: color-mix(in srgb, var(--distant-stars-button) 78%, #000);
  color: var(--distant-stars-button-text);
  outline: none;
}
html[data-distant-stars-palette] .manage-detail-add {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-surface);
  color: var(--distant-stars-button);
}
html[data-distant-stars-palette] .manage-detail-add:hover,
html[data-distant-stars-palette] .manage-detail-add:focus-visible {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
  outline: none;
}
html[data-distant-stars-palette] .manage-article-title-toggle {
  color: var(--distant-stars-muted);
}
html[data-distant-stars-palette] .manage-article-title-toggle:hover,
html[data-distant-stars-palette] .manage-article-title-toggle:focus-visible {
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .card-type-dialog-box {
  background: var(--distant-stars-surface);
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .card-type-dialog-box > p:not(.eyebrow) {
  color: var(--distant-stars-muted);
}
html[data-distant-stars-palette] .card-type-dialog-actions button {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-surface);
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .card-type-dialog-actions button:hover,
html[data-distant-stars-palette] .card-type-dialog-actions button:focus-visible {
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
}
html[data-distant-stars-palette] .card-type-dialog-cancel {
  border-color: transparent;
  background: transparent;
  color: var(--distant-stars-muted);
}

/* Cover titles retain their white outline while the filled character color
   follows the active site theme. */
.series-card-title,
.series-card.manage-image-preview .series-card-title { color: var(--distant-stars-text); -webkit-text-fill-color: var(--distant-stars-text); -webkit-text-stroke-color: #ffffff; text-shadow: 0 0 1px #ffffff; }
html[data-distant-stars-palette="night"] .series-card-title,
html[data-distant-stars-palette="night"] .series-card.manage-image-preview .series-card-title { color: #000000; -webkit-text-fill-color: #000000; -webkit-text-stroke: 3px #8f63c7; text-shadow: 0 0 0 #ffffff, 2px 0 #ffffff, -2px 0 #ffffff, 0 2px #ffffff, 0 -2px #ffffff; }

/* Editable writing areas get a soft themed, rounded surface. */
.manage-mode [contenteditable="true"],
.manage-mode .manage-textarea,
.manage-mode [data-post-editor],
.manage-mode [data-other-editable] { border-radius: 10px; background: var(--distant-stars-editable-background); }
.manage-mode [contenteditable="true"] { padding: 2px 7px; }
.manage-mode .manage-textarea { border-color: color-mix(in srgb, var(--distant-stars-border) 72%, transparent); }
.manage-mode .article-row-text .manage-textarea { border-radius: 10px; padding: 8px 10px; background: var(--distant-stars-editable-background); }
.manage-mode [data-post-editor],
.manage-mode [data-other-editable] { padding: 12px; border: 1px solid color-mix(in srgb, var(--distant-stars-border) 72%, transparent); }
html[data-distant-stars-palette="night"] .manage-mode [contenteditable="true"],
html[data-distant-stars-palette="night"] .manage-mode .manage-textarea,
html[data-distant-stars-palette="night"] .manage-mode [data-post-editor],
html[data-distant-stars-palette="night"] .manage-mode [data-other-editable] { background: var(--distant-stars-editable-background); }
.manage-mode .hero-copy .manage-rich-editor { align-self: stretch; margin-top: 0; }
.manage-mode .hero-copy .manage-textarea { min-height: 4.8em; border: 0; padding: 0; background: transparent; }

/* The same editable copy surfaces remain visible to visitors. Titles are
   intentionally excluded: only descriptions, explanations and body copy get
   the themed rounded background. */
html[data-distant-stars-palette] .intro > p:not(.eyebrow),
html[data-distant-stars-palette] .intro-description,
html[data-distant-stars-palette] .hero-copy,
html[data-distant-stars-palette] .section-intro > p:last-child,
html[data-distant-stars-palette] .detail-row-copy > p,
html[data-distant-stars-palette] .article-description,
html[data-distant-stars-palette] .association-description,
html[data-distant-stars-palette] .other-detail-copy,
html[data-distant-stars-palette] .info-post-copy > div:last-child,
html[data-distant-stars-palette] .info-post-full-copy,
html[data-distant-stars-palette] .record-summary > p,
html[data-distant-stars-palette] .record-postscript > p {
  border-radius: 12px;
  padding: 9px 14px;
  background: var(--distant-stars-editable-background);
}
html[data-distant-stars-palette] .detail-row-copy > p,
html[data-distant-stars-palette] .other-detail-copy { width: 100%; }
html[data-distant-stars-palette] .article-description,
html[data-distant-stars-palette] .association-description,
html[data-distant-stars-palette] .info-post-full-copy { width: min(100%, 720px); }

/* Legacy sections were written before the theme system. Keep every visible
   label on the active palette instead of allowing original near-black rules
   to reappear in mobile WebViews. User-authored rich text is excluded so its
   editor-selected colours stay intact. */
html[data-distant-stars-palette] .admin-entry,
html[data-distant-stars-palette] .back-button,
html[data-distant-stars-palette] .detail-admin-entry,
html[data-distant-stars-palette] .series-more-toggle,
html[data-distant-stars-palette] .card-type-dialog-box,
html[data-distant-stars-palette] .card-type-dialog-actions button,
html[data-distant-stars-palette] .return-button,
html[data-distant-stars-palette] .map-panel a,
html[data-distant-stars-palette] .map-series-toggle,
html[data-distant-stars-palette] .login-form input,
html[data-distant-stars-palette] .editor-section input,
html[data-distant-stars-palette] .editor-section textarea,
html[data-distant-stars-palette] .admin-secondary-button,
html[data-distant-stars-palette] .text-button,
html[data-distant-stars-palette] .demo-note code,
html[data-distant-stars-palette] .manage-card-upload,
html[data-distant-stars-palette] .manage-image-upload-inline,
html[data-distant-stars-palette] .manage-editor-toolbar button,
html[data-distant-stars-palette] .manage-editor-toolbar label,
html[data-distant-stars-palette] .info-toolbar button,
html[data-distant-stars-palette] .info-manage-tags button,
html[data-distant-stars-palette] .info-pagination button,
html[data-distant-stars-palette] .info-pagination,
html[data-distant-stars-palette] .info-pagination input,
html[data-distant-stars-palette] .info-dialog-head button,
html[data-distant-stars-palette] .info-composer-actions button,
html[data-distant-stars-palette] .info-rich-editor [data-post-editor],
html[data-distant-stars-palette] .record-card-copy h2,
html[data-distant-stars-palette] .record-meta-form input,
html[data-distant-stars-palette] .record-meta-form textarea,
html[data-distant-stars-palette] .record-editor input,
html[data-distant-stars-palette] .record-editor textarea,
html[data-distant-stars-palette] .record-cover-picker button,
html[data-distant-stars-palette] .record-txt-picker,
html[data-distant-stars-palette] .other-image-upload button,
html[data-distant-stars-palette] .record-reader .info-dialog-head h2,
html[data-distant-stars-palette] .record-reader-actions button,
html[data-distant-stars-palette] .record-reading-body,
html[data-distant-stars-palette] .record-postscript h3,
html[data-distant-stars-palette] .record-password-form input,
html[data-distant-stars-palette] .other-type-options button,
html[data-distant-stars-palette] .other-card-copy h2,
html[data-distant-stars-palette] .other-post-title,
html[data-distant-stars-palette] .other-card-form input,
html[data-distant-stars-palette] .other-card-form textarea,
html[data-distant-stars-palette] .other-card-form select,
html[data-distant-stars-palette] .other-rich-editor [data-other-editable] { color: var(--distant-stars-text); }

html[data-distant-stars-palette] .admin-entry,
html[data-distant-stars-palette] .return-button,
html[data-distant-stars-palette] .card-type-dialog-actions button,
html[data-distant-stars-palette] .map-panel,
html[data-distant-stars-palette] .map-series-toggle,
html[data-distant-stars-palette] .login-form input,
html[data-distant-stars-palette] .editor-section input,
html[data-distant-stars-palette] .editor-section textarea,
html[data-distant-stars-palette] .admin-secondary-button,
html[data-distant-stars-palette] .info-toolbar button,
html[data-distant-stars-palette] .info-manage-tags button,
html[data-distant-stars-palette] .info-pagination button,
html[data-distant-stars-palette] .info-pagination input,
html[data-distant-stars-palette] .info-dialog-head button,
html[data-distant-stars-palette] .info-composer-actions button,
html[data-distant-stars-palette] .record-cover-picker button,
html[data-distant-stars-palette] .record-txt-picker,
html[data-distant-stars-palette] .other-image-upload button,
html[data-distant-stars-palette] .record-reader-actions button,
html[data-distant-stars-palette] .record-password-form input,
html[data-distant-stars-palette] .other-type-options button,
html[data-distant-stars-palette] .other-card-form input,
html[data-distant-stars-palette] .other-card-form textarea,
html[data-distant-stars-palette] .other-card-form select { border-color: var(--distant-stars-border); background-color: var(--distant-stars-surface); }

html[data-distant-stars-palette] .admin-primary-button,
html[data-distant-stars-palette] .info-toolbar .info-tag.is-active,
html[data-distant-stars-palette] .info-pagination .info-page.is-active,
html[data-distant-stars-palette] .info-composer-actions button[type="submit"],
html[data-distant-stars-palette] .record-new-button,
html[data-distant-stars-palette] .record-confirm,
html[data-distant-stars-palette] .other-actions button { border-color: var(--distant-stars-button); background: var(--distant-stars-button); color: var(--distant-stars-button-text); }

html[data-distant-stars-palette] .record-card-copy p,
html[data-distant-stars-palette] .record-lock,
html[data-distant-stars-palette] .record-meta-form label,
html[data-distant-stars-palette] .record-editor-meta label,
html[data-distant-stars-palette] .record-cover-picker,
html[data-distant-stars-palette] .record-text-actions,
html[data-distant-stars-palette] .record-summary,
html[data-distant-stars-palette] .record-postscript,
html[data-distant-stars-palette] .record-password-form > p,
html[data-distant-stars-palette] .record-password-form label,
html[data-distant-stars-palette] .other-detail-copy,
html[data-distant-stars-palette] .other-card-copy,
html[data-distant-stars-palette] .other-card-form label,
html[data-distant-stars-palette] .other-image-fields,
html[data-distant-stars-palette] .other-type-label,
html[data-distant-stars-palette] .other-type-options small,
html[data-distant-stars-palette] .info-post-copy,
html[data-distant-stars-palette] .info-post-manage button,
html[data-distant-stars-palette] .info-composer-media > div,
html[data-distant-stars-palette] .info-composer-media button,
html[data-distant-stars-palette] .info-empty { color: var(--distant-stars-muted); }

html[data-distant-stars-palette] .manage-spoiler::after { background: var(--distant-stars-button); }

/* Explicit title coverage for desktop Edge and mobile WebViews. These
   selectors win over the older fixed-color title declarations above. */
html[data-distant-stars-palette] .gallery-section-title,
html[data-distant-stars-palette] .detail-hero h1,
html[data-distant-stars-palette] .section-intro h2,
html[data-distant-stars-palette] .detail-row h3,
html[data-distant-stars-palette] .article-intro h1,
html[data-distant-stars-palette] .article-intro h2,
html[data-distant-stars-palette] .association-hero h1,
html[data-distant-stars-palette] .info-dialog-head h2,
html[data-distant-stars-palette] .record-card-copy h2,
html[data-distant-stars-palette] .record-reader .info-dialog-head h2,
html[data-distant-stars-palette] .record-postscript h3,
html[data-distant-stars-palette] .other-card-copy h2,
html[data-distant-stars-palette] .other-post-title,
html[data-distant-stars-palette] .card-type-dialog-box h2,
html[data-distant-stars-palette] .login-card h1,
html[data-distant-stars-palette] .editor-heading h1,
html[data-distant-stars-palette] .editor-section h2,
html[data-distant-stars-palette] .site-settings-head h2,
html[data-distant-stars-palette] .site-settings-section h3 { color: var(--distant-stars-text); }

/* The cover's voyage control intentionally remains a transparent outline in
   every palette, so it does not compete with the three-line title. */
.cover-screen .cover-content .enter-button,
.cover-screen .cover-content .enter-button:hover,
.cover-screen .cover-content .enter-button:focus-visible {
  border-color: #fff8dc;
  background: transparent !important;
  color: #fff8dc;
}
.cover-screen .cover-content .enter-button:hover,
.cover-screen .cover-content .enter-button:focus-visible {
  border-color: #ffd36e;
  color: #ffd36e;
}

/* Cover-only night-sky gradient: a deeper, less-saturated purple-blue at
   the top, blending into a muted navy at the bottom. These fixed light values preserve contrast
   for the title, outline control and star field. */
.cover-screen { color: #fff8e8; }
.cover-screen .admin-entry { color: #fff8e8; }
.cover-screen .cover-content .cover-subtitle { color: #ffe6a8; }
.cover-screen .cover-content #site-title-zh { color: #f4e8ff; }

/* Distant Stars fades from solid white at its crown into a translucent lower
   half. The same fill is applied to its animated character slots. */
.cover-screen .cover-content #site-title,
.cover-screen .cover-content #site-title .cover-scramble-character {
  color: transparent;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 47%, rgba(235, 242, 255, .34) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* This sits after the compact mobile rule as well, so every viewport keeps
   enough vertical room for the cover font's ascenders. */
.cover-screen .cover-content #site-title {
  line-height: 1.12;
  padding-block: .12em;
  overflow: visible;
}

/* -------------------------------------------------------------------------
   Theme-specific cover art and management controls.
   These sit last so the cover is a deliberate part of each preset rather
   than inheriting an accidental purple sky from Solaris. */
.cover-screen {
  --cover-glow: rgba(151, 132, 214, .24);
  --cover-start: #403854;
  --cover-end: #222440;
  --cover-text: #fff8e8;
  --cover-subtitle: #ffe6a8;
  --cover-title-top: #ffffff;
  --cover-title-bottom: rgba(235, 242, 255, .34);
  --cover-action: #fff8dc;
  --cover-action-hover: #ffd36e;
  background: radial-gradient(circle at 50% 26%, var(--cover-glow), transparent 42%), linear-gradient(160deg, var(--cover-start), var(--cover-end));
  color: var(--cover-text);
}
.cover-screen .admin-entry { color: var(--cover-text); }
.cover-screen .cover-content .cover-subtitle { color: var(--cover-subtitle); }
.cover-screen .cover-content #site-title-zh { color: var(--cover-text); }
.cover-screen .cover-content .enter-button,
.cover-screen .cover-content .enter-button:hover,
.cover-screen .cover-content .enter-button:focus-visible { border-color: var(--cover-action); color: var(--cover-action); }
.cover-screen .cover-content .enter-button:hover,
.cover-screen .cover-content .enter-button:focus-visible { border-color: var(--cover-action-hover); color: var(--cover-action-hover); }
.cover-screen .cover-content #site-title,
.cover-screen .cover-content #site-title .cover-scramble-character {
  background: linear-gradient(to bottom, var(--cover-title-top) 0%, var(--cover-title-top) 47%, var(--cover-title-bottom) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Warm paper, clear water, dusk lavender, and near-black are designed as
   complete covers in their own right. Solaris remains the violet night sky. */
html[data-distant-stars-palette="day"] .cover-screen {
  --cover-glow: rgba(255, 255, 255, .78);
  --cover-start: #eaa9b4;
  --cover-end: #fff3e9;
  --cover-text: #513540;
  --cover-subtitle: #a65369;
  --cover-title-top: #70394e;
  --cover-title-bottom: #c47582;
  --cover-action: #77394e;
  --cover-action-hover: #b3546b;
}
html[data-distant-stars-palette="mist"] .cover-screen {
  --cover-glow: rgba(255, 255, 255, .62);
  --cover-start: #65b4cb;
  --cover-end: #eaf8f7;
  --cover-text: #173b49;
  --cover-subtitle: #34798a;
  --cover-title-top: #1b5266;
  --cover-title-bottom: #559aaa;
  --cover-action: #1e6173;
  --cover-action-hover: #378fa1;
}
html[data-distant-stars-palette="charcoal"] .cover-screen {
  --cover-glow: rgba(227, 212, 255, .26);
  --cover-start: #413b63;
  --cover-end: #94799a;
  --cover-text: #fffaf2;
  --cover-subtitle: #f3dfac;
  --cover-title-top: #ffffff;
  --cover-title-bottom: #ddc6f3;
  --cover-action: #fff3d7;
  --cover-action-hover: #ffe2a3;
}
html[data-distant-stars-palette="night"] .cover-screen {
  --cover-glow: rgba(128, 104, 171, .22);
  --cover-start: #28262f;
  --cover-end: #030303;
  --cover-text: #f7f5fb;
  --cover-subtitle: #c4b5e2;
  --cover-title-top: #ffffff;
  --cover-title-bottom: #a593c8;
  --cover-action: #f4f1fa;
  --cover-action-hover: #cdb9f1;
}

/* Editing copy must always read like a writing surface. In particular, the
   cards created on the Other page no longer turn yellow on pointer hover. */
.manage-mode [data-other-editable],
.manage-mode [data-other-editable]:hover,
.manage-mode [data-other-editable]:focus {
  background: color-mix(in srgb, var(--distant-stars-surface) 94%, var(--distant-stars-page));
  color: var(--distant-stars-text);
}
.manage-mode [data-other-editable]:hover,
.manage-mode [data-other-editable]:focus {
  border-color: var(--distant-stars-button);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--distant-stars-button) 18%, transparent);
}

/* The rich-text toolbar uses named controls, a visible colour swatch and the
   active palette; its functions stay legible on Solaris and every other skin. */
html[data-distant-stars-palette] .manage-editor-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
  padding: 6px;
  border: 1px solid var(--distant-stars-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--distant-stars-surface) 90%, var(--distant-stars-page));
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .manage-editor-toolbar button,
html[data-distant-stars-palette] .manage-editor-toolbar label {
  display: inline-flex;
  width: auto;
  min-width: 48px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-color: var(--distant-stars-border);
  border-radius: 7px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--distant-stars-surface) 78%, var(--distant-stars-page));
  color: var(--distant-stars-text);
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
html[data-distant-stars-palette] .manage-editor-toolbar button:hover,
html[data-distant-stars-palette] .manage-editor-toolbar button:focus-visible,
html[data-distant-stars-palette] .manage-editor-toolbar label:hover,
html[data-distant-stars-palette] .manage-editor-toolbar label:focus-within {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
  outline: none;
}
html[data-distant-stars-palette] .manage-editor-toolbar button.is-cancel-mode {
  border-color: var(--distant-stars-button);
  background: color-mix(in srgb, var(--distant-stars-button) 30%, var(--distant-stars-surface));
  color: var(--distant-stars-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--distant-stars-button) 35%, transparent);
}
html[data-distant-stars-palette] .manage-editor-toolbar strong { font-size: 14px; }
.editor-align-icon { display: inline-block; width: 12px; overflow: hidden; font-size: 16px; line-height: .7; }
.editor-align-left { text-align: left; }
.editor-align-center { text-align: center; }
.editor-align-right { text-align: right; }
html[data-distant-stars-palette] .manage-editor-toolbar label { position: relative; overflow: visible; }
html[data-distant-stars-palette] .manage-editor-toolbar input[type="color"] {
  position: static;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
}

/* Card actions are real, high-contrast controls instead of transparent,
   underlined text that disappears over a card image or a dark theme. */
.other-card-actions,
.other-post-card .info-post-manage,
.info-post-manage {
  gap: 6px;
}
html[data-distant-stars-palette] .other-card-actions button,
html[data-distant-stars-palette] .info-post-manage button,
html[data-distant-stars-palette] .record-card-manage button {
  min-height: 30px;
  border: 1px solid var(--distant-stars-border);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--distant-stars-surface);
  color: var(--distant-stars-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
html[data-distant-stars-palette] .other-card-actions button:hover,
html[data-distant-stars-palette] .other-card-actions button:focus-visible,
html[data-distant-stars-palette] .info-post-manage button:hover,
html[data-distant-stars-palette] .info-post-manage button:focus-visible,
html[data-distant-stars-palette] .record-card-manage button:hover,
html[data-distant-stars-palette] .record-card-manage button:focus-visible {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
  outline: none;
}
html[data-distant-stars-palette] .other-card-actions button[data-delete-other],
html[data-distant-stars-palette] .info-post-manage button[data-delete-other],
html[data-distant-stars-palette] .info-post-manage button[data-delete-post],
html[data-distant-stars-palette] .record-card-manage button[data-delete-record] { border-color: color-mix(in srgb, #cf5660 62%, var(--distant-stars-border)); color: #c84652; }
html[data-distant-stars-palette] .other-card-actions button[data-delete-other]:hover,
html[data-distant-stars-palette] .other-card-actions button[data-delete-other]:focus-visible,
html[data-distant-stars-palette] .info-post-manage button[data-delete-other]:hover,
html[data-distant-stars-palette] .info-post-manage button[data-delete-other]:focus-visible,
html[data-distant-stars-palette] .info-post-manage button[data-delete-post]:hover,
html[data-distant-stars-palette] .info-post-manage button[data-delete-post]:focus-visible,
html[data-distant-stars-palette] .record-card-manage button[data-delete-record]:hover,
html[data-distant-stars-palette] .record-card-manage button[data-delete-record]:focus-visible { border-color: #b53c48; background: #b53c48; color: #ffffff; }
.other-post-card .info-post-manage + .info-post-copy { padding-right: 132px; }

/* The Other-page creation dialogs were still fixed white while their copy
   inherited light Solaris text. Treat the type picker and card form as full
   theme surfaces, with a quieter nested surface for fields and choices. */
html[data-distant-stars-palette] .other-type-choice,
html[data-distant-stars-palette] .other-card-form {
  border: 1px solid var(--distant-stars-border);
  background: var(--distant-stars-surface);
  color: var(--distant-stars-text);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .24);
}
html[data-distant-stars-palette] .other-type-choice > p,
html[data-distant-stars-palette] .other-card-form label,
html[data-distant-stars-palette] .other-card-form .other-type-label,
html[data-distant-stars-palette] .other-card-form .other-image-fields,
html[data-distant-stars-palette] .other-type-options small { color: var(--distant-stars-muted); }
html[data-distant-stars-palette] .other-type-options button {
  border-color: var(--distant-stars-border);
  background: color-mix(in srgb, var(--distant-stars-surface) 76%, var(--distant-stars-page));
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .other-type-options button:hover,
html[data-distant-stars-palette] .other-type-options button:focus-visible {
  border-color: var(--distant-stars-button);
  background: var(--distant-stars-button);
  color: var(--distant-stars-button-text);
  outline: none;
}
html[data-distant-stars-palette] .other-type-options button:hover small,
html[data-distant-stars-palette] .other-type-options button:focus-visible small { color: currentColor; }
html[data-distant-stars-palette] .other-card-form input,
html[data-distant-stars-palette] .other-card-form textarea,
html[data-distant-stars-palette] .other-card-form select {
  border-color: var(--distant-stars-border);
  background: color-mix(in srgb, var(--distant-stars-surface) 68%, var(--distant-stars-page));
  color: var(--distant-stars-text);
}
html[data-distant-stars-palette] .other-card-form input:focus,
html[data-distant-stars-palette] .other-card-form textarea:focus,
html[data-distant-stars-palette] .other-card-form select:focus {
  border-color: var(--distant-stars-button);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--distant-stars-button) 18%, transparent);
  outline: none;
}
html[data-distant-stars-palette] .other-card-form .info-dialog-head button,
html[data-distant-stars-palette] .other-card-form .other-image-fields button,
html[data-distant-stars-palette] .other-card-form .other-image-upload button {
  border-color: var(--distant-stars-border);
  background: color-mix(in srgb, var(--distant-stars-surface) 76%, var(--distant-stars-page));
  color: var(--distant-stars-text);
}

@media (max-width: 540px) {
  .cover-screen { padding: 22px; }
  .manage-editor-toolbar { gap: 5px; }
  .manage-editor-toolbar button,
  .manage-editor-toolbar label { min-width: 44px; padding: 0 7px; font-size: 11px; }
  .other-post-card .info-post-manage + .info-post-copy { padding-right: 0; padding-top: 38px; }
}