:root {
  --music-dock-space: 0px;
  --page-content-inset: clamp(16px, 2vw, 24px);
  --music-safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  --bg: #1e1f22;
  --surface: #2b2d31;
  --surface-raised: #313338;
  --surface-hover: #35373c;
  --line: #242529;
  --line-bright: #404249;
  --text: #f2f3f5;
  --muted: #b5bac1;
  --subtle: #949ba4;
  --accent: #5865f2;
  --accent-bright: #7983f5;
  --accent-wash: rgba(88, 101, 242, 0.14);
  --success: #23a559;
  --radius: 12px;
  --radius-small: 8px;
  --shell: min(1180px, calc(100% - 40px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Writer dashboard links open the exact living-ledger row. */
.question-ledger-table tr:target { background: var(--accent-wash); outline: 1px solid var(--accent-bright); scroll-margin-top: 100px; }

/* A single audio owner survives navigation while ordinary pages keep their
   own document lifecycle in the reading frame. No styling leaks between pages. */
.music-dock-open:not(.music-shell-active) body { padding-bottom: var(--music-dock-space); }
.music-shell-active, .music-shell-active body { height: 100%; overflow: hidden; }
.music-shell-active .music-shell-original { display: none !important; }
#music-reading-frame { position: fixed; inset: 0; width: 100%; height: calc(100% - var(--music-dock-space)); border: 0; background: var(--bg); z-index: 1000; }
.music-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200; display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(140px, 1fr) auto; align-items: center; gap: 16px; padding: 12px max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) calc(12px + var(--music-safe-bottom)) max(16px, calc(env(safe-area-inset-left, 0px) + 12px)); background: #202125; border-top: 1px solid #454750; color: var(--text); box-shadow: 0 -4px 20px #0003; }
.music-dock[hidden], .music-dock [hidden] { display: none !important; }
.music-dock-track { display: flex; gap: 10px; align-items: center; min-width: 0; }
.music-dock-track img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.music-dock-track > div { min-width: 0; width: 100%; }
.music-dock-kicker { display: block; color: var(--subtle); font-size: 10px; margin-left: 8px; }
.music-dock-buttons, .music-dock-options { display: flex; align-items: center; gap: 4px; min-width: 0; }
.music-dock button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--text); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .music-dock button:hover { background: var(--surface-hover); }
  /* Touch browsers can retain :active after release, like sticky hover. */
  .music-dock button:active { opacity: .7; }
}
.music-dock button.music-dock-play { background: var(--accent); color: white; }
.music-dock [data-action="repeat"] { position: relative; color: var(--subtle); }
.music-dock [data-action="repeat"][aria-pressed="true"] { color: #b3acff; }
.music-repeat-mark { position: absolute; right: 3px; bottom: 2px; font-size: 10px; font-weight: 700; }
.music-dock button:focus-visible, .music-dock select:focus-visible, .music-dock input:focus-visible { outline: 2px solid #aba5ff; outline-offset: 2px; }
.music-dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.music-dock-progress { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.music-dock input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; min-width: 40px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.music-dock input[type="range"]::-webkit-slider-runnable-track { height: 3px; border: 0; border-radius: 3px; background: #51535c; }
.music-dock input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: #c1baff; }
.music-dock input[type="range"]::-moz-range-track { height: 3px; border: 0; border-radius: 3px; background: #51535c; }
.music-dock input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #c1baff; }
.music-dock-queue { display: block; min-width: 0; }
.music-dock select { width: 100%; min-width: 0; min-height: 36px; padding: 0 28px 0 8px; font: inherit; font-size: 13px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; background-color: transparent; color: var(--text); text-overflow: ellipsis; }
.music-dock select option { background: var(--bg); }
.music-dock-error { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #efbf85; }
.music-page > .site-header { padding-top: env(safe-area-inset-top, 0px); }
.music-shell-active #music-reading-frame { top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); height: calc(100% - var(--music-dock-space) - env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) {
  .music-dock { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .music-dock-track { grid-column: 1 / -1; }
  .music-dock-buttons { grid-column: 1; grid-row: 2; }
  .music-dock-options { grid-column: 2; grid-row: 2; }
  .music-dock-progress { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 480px) {
  .music-dock { padding: 8px max(16px, calc(env(safe-area-inset-right, 0px) + 12px)) max(20px, calc(8px + var(--music-safe-bottom))) max(16px, calc(env(safe-area-inset-left, 0px) + 12px)); gap: 2px 4px; }
  .music-dock-track img { width: 32px; height: 36px; }
  .music-dock-kicker { display: none; }
  .music-dock select { min-height: 44px; font-size: 12px; }
  .music-dock-buttons, .music-dock-options { gap: 0; }
}

/* Items and artefacts archive */
.items-page {
  --item-line: #3b3e46;
  --item-panel: #26282d;
  --item-deep: #1c1d21;
  --item-accent: #9aa2ff;
}

.items-page [hidden] {
  display: none !important;
}

.items-scroll,
#items-catalog-view,
.item-detail {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 56px;
}

.items-scroll {
  padding: clamp(28px, 4vw, 58px);
}

.items-breadcrumbs {
  margin: 0;
}

.items-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: end;
  gap: clamp(32px, 6vw, 90px);
  padding: clamp(28px, 4vw, 54px) 0 12px;
  border-bottom: 1px solid var(--item-line);
}

.items-hero h1 {
  margin: 8px 0 20px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.7rem, 8vw, 8rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.065em;
}

.items-hero > div > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.7;
}

.items-hero dl {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 8px;
  background: var(--item-panel);
}

.items-hero dl div {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
}

.items-hero dl div + div {
  border-top: 1px solid var(--item-line);
}

.items-hero dt,
.items-hero dd {
  margin: 0;
}

.items-hero dt {
  color: #9ca1ab;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.items-hero dd {
  color: #d5d8df;
  font-family: var(--mono);
  font-size: .82rem;
}

.items-scope {
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
  background: var(--item-panel);
}

.items-scope > header {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--item-line);
}

.items-scope > header > span,
.item-identity-panel > div:first-child > span,
.item-record-top span,
.item-story-link > span {
  color: var(--item-accent);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.items-scope h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.items-scope > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.items-scope article {
  min-height: 190px;
  padding: 26px;
}

.items-scope article + article {
  border-left: 1px solid var(--item-line);
}

.items-scope article > span,
.item-form-grid article > span,
.item-property-grid article > span {
  color: #7e86f6;
  font-family: var(--mono);
  font-size: .7rem;
}

.items-scope article strong {
  display: block;
  margin-top: 35px;
  color: #e6e7eb;
  font-size: 1rem;
}

.items-scope article p,
.item-form-grid p,
.item-property-grid p,
.item-story-link p {
  margin: 10px 0 0;
  color: #aeb2bb;
  line-height: 1.6;
}

.items-section-heading {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.items-section-heading > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.items-section-heading > div > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #303238;
  color: var(--item-accent);
  font-family: var(--mono);
  font-size: .74rem;
}

.items-section-heading h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  line-height: 1.08;
}

.items-section-heading > p {
  grid-column: 2;
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.item-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 18px;
}

.item-record-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr);
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
  background: var(--item-panel);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.item-record-card:first-child:last-child {
  grid-column: 1 / -1;
}

.item-record-card:hover,
.item-record-card:focus-visible {
  border-color: #6871dc;
  background: #2b2d33;
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}

.item-record-visual,
.item-detail-visual {
  display: grid;
  place-items: center;
  background: var(--item-deep);
}

.item-record-visual {
  min-height: 330px;
  align-content: center;
  gap: 32px;
  border-right: 1px solid var(--item-line);
}

.item-record-visual small,
.item-detail-visual > small {
  color: #777d87;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.item-object-mark {
  position: relative;
  width: 128px;
  height: 176px;
}

.item-object-mark-neutral {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.item-object-mark-neutral::after { content: none; }
.item-object-mark-neutral svg { width: 80px; height: 110px; fill: none; stroke: currentColor; stroke-width: 2; }
.item-record-image { display: block; width: 100%; max-height: 400px; object-fit: contain; }

.item-object-mark > span,
.item-object-mark > i,
.item-object-mark > b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  background: #30333b;
}

.item-object-mark > span {
  top: 18px;
  bottom: 0;
  left: 34px;
  width: 60px;
  border: 2px solid #8992ff;
  border-top-width: 5px;
  border-radius: 30px 30px 12px 12px;
  transform: perspective(180px) rotateX(-3deg);
}

.item-object-mark > i,
.item-object-mark > b {
  top: 44px;
  width: 31px;
  height: 95px;
  border: 2px solid #626aaf;
}

.item-object-mark > i {
  left: 15px;
  border-right: 0;
  transform: rotate(13deg);
}

.item-object-mark > b {
  right: 15px;
  border-left: 0;
  transform: rotate(-13deg);
}

.item-object-mark::after {
  position: absolute;
  top: 38px;
  bottom: 16px;
  left: 63px;
  width: 1px;
  background: #6971bd;
  content: "";
}

.item-object-mark-detail {
  transform: scale(1.25);
}

.item-record-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.item-record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.item-record-top b {
  color: #858a94;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.item-record-copy h3 {
  margin: 18px 0 12px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 2.8vw, 2.5rem);
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.item-record-copy > p {
  max-width: 760px;
  margin: 0;
  color: #b8bbc2;
  line-height: 1.7;
}

.item-card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 0;
  border-top: 1px solid var(--item-line);
  border-bottom: 1px solid var(--item-line);
}

.item-card-meta div {
  padding: 15px 14px 15px 0;
}

.item-card-meta div + div {
  padding-left: 14px;
  border-left: 1px solid var(--item-line);
}

.item-card-meta dt,
.item-detail-facts dt {
  color: #858b95;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.item-card-meta dd,
.item-detail-facts dd {
  margin: 6px 0 0;
  color: #d8dbe0;
  font-size: .76rem;
  line-height: 1.45;
}

.item-open-label {
  margin-top: 24px;
  color: #b3b9ff;
  font-size: .72rem;
  font-weight: 750;
}

.item-detail-hero {
  display: grid;
  min-height: 500px;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1fr) minmax(250px, .55fr);
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
  background: var(--item-panel);
}

.item-detail-visual {
  align-content: center;
  gap: 54px;
  border-right: 1px solid var(--item-line);
}

.item-detail-copy {
  align-self: center;
  padding: clamp(32px, 5vw, 64px);
}

.item-detail-copy h1 {
  margin: 12px 0 22px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.055em;
}

.item-detail-copy > p:last-child {
  max-width: 680px;
  margin: 0;
  color: #bcc0c7;
  font-size: 1rem;
  line-height: 1.7;
}

.item-detail-facts {
  display: grid;
  align-content: center;
  margin: 0;
  border-left: 1px solid var(--item-line);
}

.item-detail-facts div {
  padding: 20px 22px;
}

.item-detail-facts div + div {
  border-top: 1px solid var(--item-line);
}

.item-identity-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
  background: var(--item-panel);
}

.item-identity-panel > div {
  padding: clamp(28px, 4vw, 48px);
}

.item-identity-panel > div + div {
  border-left: 1px solid var(--item-line);
}

.item-identity-panel strong {
  display: block;
  margin: 15px 0 12px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 500;
}

.item-identity-panel p {
  margin: 0;
  color: #aeb2bb;
  line-height: 1.65;
}

.item-identity-links {
  display: grid;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 18px;
}

.item-identity-links a {
  align-self: start;
  color: #d9dcff;
  font-weight: 750;
}

.item-identity-links p + a {
  margin-top: 18px;
}

.item-identity-links p + a + p {
  margin-top: 18px;
}

.item-form-grid,
.item-property-grid,
.item-story-links {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
}

.item-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.item-form-grid article {
  min-height: 250px;
  padding: 26px;
}

.item-form-grid article + article {
  border-left: 1px solid var(--item-line);
}

.item-form-grid h3 {
  margin: 78px 0 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 500;
}

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

.item-property-grid article {
  display: grid;
  min-height: 170px;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: start;
  gap: 9px 14px;
  padding: 28px;
}

.item-property-grid article:nth-child(even) {
  border-left: 1px solid var(--item-line);
}

.item-property-grid article:nth-child(n + 3) {
  border-top: 1px solid var(--item-line);
}

.item-property-grid article > span {
  grid-row: 1 / 3;
}

.item-property-grid strong {
  color: #f2f3f5;
}

.item-property-grid p {
  font-size: .84rem;
}

.item-limit-list,
.item-chronology {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--item-line);
  border-radius: 9px;
  list-style: none;
}

.item-limit-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
}

.item-limit-list li + li,
.item-chronology li + li {
  border-top: 1px solid var(--item-line);
}

.item-limit-list span {
  color: #7e86f6;
  font-family: var(--mono);
  font-size: .7rem;
}

.item-limit-list p {
  margin: 0;
  color: #c4c7cd;
  line-height: 1.6;
}

.item-chronology li {
  display: grid;
  min-height: 170px;
  grid-template-columns: 150px minmax(0, 1fr);
}

.item-chronology li > span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--item-line);
  background: var(--item-deep);
  color: var(--item-accent);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.item-chronology li > div {
  align-self: center;
  padding: 28px;
}

.item-chronology small {
  color: #858a94;
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.item-chronology h3 {
  margin: 8px 0 10px;
  color: #f2f3f5;
  font-size: 1.1rem;
}

.item-chronology p {
  margin: 0;
  color: #aeb2bb;
  line-height: 1.65;
}

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

.item-story-link {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 28px;
  color: inherit;
  text-decoration: none;
  transition: background .18s ease;
}

.item-story-link:nth-child(even) {
  border-left: 1px solid var(--item-line);
}

.item-story-link:nth-child(n + 3) {
  border-top: 1px solid var(--item-line);
}

.item-story-link:hover,
.item-story-link:focus-visible {
  background: #2b2d33;
  color: inherit;
  text-decoration: none;
}

.item-story-link strong {
  margin-top: 14px;
  color: #f2f3f5;
  font-size: 1rem;
}

.item-story-link p {
  font-size: .8rem;
}

.item-story-link small {
  margin-top: auto;
  padding-top: 20px;
  color: #b3b9ff;
  font-size: .69rem;
  font-weight: 750;
}

.item-load-error {
  padding: 20px;
  border: 1px solid #884f55;
  border-radius: 6px;
  background: #38272a;
  color: #f2b6bc;
}

.world-record-items {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}

.world-record-items .world-record-visual span {
  font-family: Georgia, "Times New Roman", serif;
}

@media (max-width: 1050px) {
  .item-detail-hero {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .item-detail-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--item-line);
    border-left: 0;
  }

  .item-detail-facts div + div {
    border-top: 0;
    border-left: 1px solid var(--item-line);
  }

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

  .item-form-grid article:nth-child(odd) {
    border-left: 0;
  }

  .item-form-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--item-line);
  }
}

@media (max-width: 820px) {
  .items-scroll,
  #items-catalog-view,
  .item-detail {
    gap: 42px;
  }

  .items-scroll {
    padding: 24px;
  }

  .items-hero,
  .item-record-card,
  .item-identity-panel {
    grid-template-columns: 1fr;
  }

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

  .items-hero dl div {
    min-height: 74px;
    align-items: start;
    flex-direction: column;
    justify-content: center;
  }

  .items-hero dl div + div {
    border-top: 0;
    border-left: 1px solid var(--item-line);
  }

  .item-record-visual,
  .item-identity-panel > div + div {
    border-left: 0;
  }

  .item-record-visual {
    min-height: 240px;
    grid-template-columns: auto auto;
    border-right: 0;
    border-bottom: 1px solid var(--item-line);
  }

  .item-object-mark-catalog {
    transform: scale(.78);
  }

  .item-identity-panel > div + div {
    border-top: 1px solid var(--item-line);
  }
}

@media (max-width: 700px) {
  .world-record-items {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .items-scroll,
  #items-catalog-view,
  .item-detail {
    gap: 36px;
  }

  .items-scroll {
    padding: 18px 14px 32px;
  }

  .items-hero h1 {
    font-size: clamp(3.3rem, 18vw, 5rem);
  }

  .items-hero dl,
  .items-scope > div,
  .item-card-meta,
  .item-form-grid,
  .item-property-grid,
  .item-story-links,
  .item-detail-facts {
    grid-template-columns: 1fr;
  }

  .items-hero dl div {
    min-height: 56px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .items-hero dl div + div {
    border-top: 1px solid var(--item-line);
    border-left: 0;
  }

  .items-scope > header,
  .items-section-heading {
    grid-template-columns: 1fr;
  }

  .items-scope article + article,
  .item-form-grid article + article,
  .item-property-grid article:nth-child(even),
  .item-story-link:nth-child(even),
  .item-detail-facts div + div {
    border-left: 0;
  }

  .items-scope article + article,
  .item-form-grid article + article,
  .item-property-grid article + article,
  .item-story-link + .item-story-link,
  .item-detail-facts div + div {
    border-top: 1px solid var(--item-line);
  }

  .items-section-heading > p {
    grid-column: 1;
  }

  .item-record-visual {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .item-card-meta div + div {
    padding-left: 0;
    border-top: 1px solid var(--item-line);
    border-left: 0;
  }

  .item-detail-hero {
    grid-template-columns: 1fr;
  }

  .item-detail-visual {
    min-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--item-line);
  }

  .item-detail-copy {
    padding: 32px 24px;
  }

  .item-detail-facts {
    grid-column: auto;
  }

  .item-identity-links {
    grid-template-columns: 1fr;
  }

  .item-identity-links p + a,
  .item-identity-links p + a + p {
    margin-top: 10px;
  }

  .item-form-grid article {
    min-height: 210px;
  }

  .item-form-grid h3 {
    margin-top: 48px;
  }

  .item-chronology li {
    grid-template-columns: 1fr;
  }

  .item-chronology li > span {
    min-height: 54px;
    border-right: 0;
    border-bottom: 1px solid var(--item-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-record-card,
  .item-story-link {
    transition: none;
  }
}

/* Weapons archive */
.weapons-page {
  --weapon-line: #3b3e46;
  --weapon-panel: #26282d;
  --weapon-deep: #1c1d21;
  --weapon-silver: #c6cbd3;
}

.weapons-scroll {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 56px;
  padding: clamp(28px, 4vw, 58px);
}

.weapons-page .docs-main-pane,
.weapon-hierarchy-section,
.weapon-catalog-section {
  min-width: 0;
}

.weapons-breadcrumbs {
  margin: 0;
}

.weapons-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: end;
  padding: clamp(28px, 4vw, 54px) 0 12px;
  border-bottom: 1px solid var(--weapon-line);
}

.weapons-hero h1 {
  margin: 8px 0 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(4.3rem, 9vw, 8.8rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .82;
}

.weapons-hero > div > p:last-child {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.7;
}

.weapons-hero dl {
  display: grid;
  border: 1px solid var(--weapon-line);
  border-radius: 8px;
  background: var(--weapon-panel);
}

.weapons-hero dl div {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
}

.weapons-hero dl div + div {
  border-top: 1px solid var(--weapon-line);
}

.weapons-hero dt,
.weapons-hero dd {
  margin: 0;
}

.weapons-hero dt {
  color: #9ca1ab;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.weapons-hero dd {
  color: var(--weapon-silver);
  font-family: var(--mono);
  font-size: .82rem;
}

.weapons-fiction-notice {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid #424650;
  border-left: 3px solid #7c84f8;
  border-radius: 7px;
  background: #24262b;
}

.weapons-fiction-notice span,
.manufacturer-location,
.weapon-design-copy > span,
.weapon-character-note > span,
.weapon-reference-list > span {
  color: #aeb4ff;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.weapons-fiction-notice p {
  margin: 0;
  color: #c3c6cd;
  line-height: 1.65;
}

.weapons-section-heading {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 24px;
  align-items: start;
  margin-bottom: 24px;
}

.weapons-section-heading > div {
  display: flex;
  gap: 14px;
  align-items: center;
}

.weapons-section-heading > div > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: #303238;
  color: #aeb4ff;
  font-family: var(--mono);
  font-size: .74rem;
}

.weapons-section-heading h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  line-height: 1.08;
}

.weapons-section-heading > p {
  grid-column: 2;
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.manufacturer-panel {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(250px, .55fr);
  border: 1px solid var(--weapon-line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--weapon-panel);
}

.manufacturer-mark {
  position: relative;
  display: grid;
  min-height: 240px;
  place-items: center;
  border-right: 1px solid var(--weapon-line);
  background: var(--weapon-deep);
  overflow: hidden;
}

.manufacturer-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 108px;
  height: 132px;
  object-fit: contain;
  opacity: .9;
}

.manufacturer-mark i {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid #4a4e58;
  transform: rotate(45deg);
}

.manufacturer-copy {
  padding: clamp(28px, 4vw, 48px);
}

.manufacturer-copy h3 {
  margin: 8px 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.3rem, 4vw, 4.6rem);
  font-weight: 500;
  line-height: 1;
}

.manufacturer-copy p {
  max-width: 680px;
  color: #c5c8cf;
  line-height: 1.65;
}

.manufacturer-tradition {
  padding-top: 16px;
  border-top: 1px solid var(--weapon-line);
}

.manufacturer-status {
  display: grid;
  margin: 0;
  border-left: 1px solid var(--weapon-line);
}

.manufacturer-status div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 82px;
  padding: 20px;
}

.manufacturer-status div + div {
  border-top: 1px solid var(--weapon-line);
}

.manufacturer-status dt {
  color: #8f949d;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.manufacturer-status dd {
  margin: 0;
  color: #e5e7eb;
  font-weight: 700;
}

.weapon-hierarchy-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--weapon-line);
  border-radius: 9px;
  background: var(--weapon-deep);
  scrollbar-color: #555bda #202126;
  scrollbar-width: thin;
}

.weapon-hierarchy-node {
  position: relative;
  display: grid;
  min-height: 190px;
  align-content: start;
  gap: 5px;
  padding: 22px 18px;
  color: var(--text);
  transition: background .18s ease, color .18s ease;
}

.weapon-hierarchy-node + .weapon-hierarchy-node {
  border-left: 1px solid var(--weapon-line);
}

.weapon-hierarchy-node::after {
  position: absolute;
  right: -4px;
  bottom: 25px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6971ee;
  box-shadow: 0 0 0 4px var(--weapon-deep);
  content: '';
}

.weapon-hierarchy-node:last-child::after {
  display: none;
}

.weapon-hierarchy-node:hover,
.weapon-hierarchy-node:focus-visible {
  background: #2d3036;
}

.weapon-hierarchy-index {
  margin-bottom: 25px;
  color: #7f86f6;
  font-family: var(--mono);
  font-size: .72rem;
}

.weapon-hierarchy-node strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.55rem;
  font-weight: 500;
}

.weapon-hierarchy-node small {
  color: #9ea3ad;
  font-family: var(--mono);
  font-size: .68rem;
}

.weapon-hierarchy-node p {
  margin: 10px 0 0;
  color: #a8acb5;
  font-size: .75rem;
  line-height: 1.45;
}

.weapon-record-list {
  display: grid;
  gap: 22px;
}

.weapon-record {
  display: grid;
  grid-template-columns: minmax(260px, .36fr) minmax(0, 1fr);
  border: 1px solid var(--weapon-line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--weapon-panel);
  scroll-margin-top: 90px;
}

.weapon-visual-bay {
  display: grid;
  grid-template-rows: minmax(310px, 1fr) auto;
  min-width: 0;
  margin: 0;
  border-right: 1px solid var(--weapon-line);
  background: #202126;
}

.weapon-visual-bay.has-approved-image {
  grid-template-rows: auto auto;
  align-content: start;
}

.weapon-image-placeholder {
  position: relative;
  display: grid;
  min-height: 310px;
  place-content: center;
  gap: 6px;
  padding: 24px;
  overflow: hidden;
  color: #858a94;
  text-align: center;
}

.weapon-image-approved {
  display: grid;
  min-height: 310px;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  background: #f2f2f1;
}

.weapon-image-approved img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 330px;
  object-fit: contain;
}

.weapon-image-placeholder::before {
  position: absolute;
  inset: 20px;
  border: 1px dashed #424650;
  border-radius: 5px;
  content: '';
}

.weapon-image-placeholder span {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.weapon-image-placeholder b {
  color: #c7cad0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2rem;
  font-weight: 500;
}

.weapon-image-placeholder em {
  position: absolute;
  right: 34px;
  bottom: 30px;
  color: #666b75;
  font-family: var(--mono);
  font-size: .74rem;
  font-style: normal;
}

.weapon-placeholder-line {
  position: absolute;
  height: 1px;
  background: #373a41;
  transform-origin: center;
}

.weapon-placeholder-line-one {
  top: 34%;
  right: -10%;
  left: -10%;
  transform: rotate(-18deg);
}

.weapon-placeholder-line-two {
  right: -10%;
  bottom: 28%;
  left: -10%;
  transform: rotate(13deg);
}

.weapon-visual-bay figcaption {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 18px;
  border-top: 1px solid var(--weapon-line);
}

.weapon-visual-bay figcaption strong {
  color: #e6e7eb;
}

.weapon-visual-bay figcaption span {
  color: #858a94;
  font-size: .68rem;
}

.weapon-record-body {
  min-width: 0;
  padding: clamp(26px, 4vw, 46px);
}

.weapon-record-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--weapon-line);
}

.weapon-model {
  color: #aeb4ff;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.weapon-record-header h3 {
  margin: 5px 0 8px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .92;
}

.weapon-record-header p {
  margin: 0;
  color: #a6abb4;
}

.weapon-caliber {
  display: grid;
  flex: 0 0 auto;
  gap: 5px;
  min-width: 145px;
  padding: 13px 15px;
  border: 1px solid #444852;
  border-radius: 6px;
  background: #202126;
}

.weapon-caliber span {
  color: #858b95;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.weapon-caliber strong {
  color: #d9dce2;
  font-family: var(--mono);
  font-size: .78rem;
}

.weapon-primary-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-bottom: 1px solid var(--weapon-line);
}

.weapon-primary-facts > div {
  min-width: 0;
  padding: 20px 24px 20px 0;
}

.weapon-primary-facts > div:nth-child(even) {
  padding-right: 0;
  padding-left: 24px;
  border-left: 1px solid var(--weapon-line);
}

.weapon-primary-facts > div:nth-child(n + 3) {
  border-top: 1px solid var(--weapon-line);
}

.weapon-primary-facts > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  padding-right: 0;
}

.weapon-primary-facts dt {
  margin-bottom: 8px;
  color: #8c929d;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.weapon-primary-facts dd {
  margin: 0;
  color: #d2d4da;
  line-height: 1.55;
}

.weapon-design-copy {
  padding: 24px 0 18px;
}

.weapon-design-copy p {
  margin: 8px 0 0;
  color: #c3c6cd;
  line-height: 1.7;
}

.weapon-characteristics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 1px solid var(--weapon-line);
  border-radius: 6px;
  list-style: none;
}

.weapon-characteristics li {
  position: relative;
  min-height: 58px;
  padding: 17px 18px 17px 38px;
  color: #c5c8cf;
  font-size: .8rem;
  line-height: 1.45;
}

.weapon-characteristics li::before {
  position: absolute;
  top: 23px;
  left: 18px;
  width: 7px;
  height: 7px;
  background: #7179ef;
  content: '';
  transform: rotate(45deg);
}

.weapon-characteristics li:nth-child(even) {
  border-left: 1px solid var(--weapon-line);
}

.weapon-characteristics li:nth-child(n + 3) {
  border-top: 1px solid var(--weapon-line);
}

.weapon-options {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--weapon-line);
  border-radius: 6px;
  background: #25272c;
}

.weapon-options > span {
  color: #aeb4ff;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .12em;
}

.weapon-options > p {
  margin: 8px 0 16px;
  color: #b5bac3;
  font-size: .82rem;
  line-height: 1.55;
}

.weapon-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--weapon-line);
}

.weapon-option-list article {
  padding: 16px 16px 0 0;
}

.weapon-option-list article + article {
  padding-right: 0;
  padding-left: 16px;
  border-left: 1px solid var(--weapon-line);
}

.weapon-option-list strong {
  color: #e2e4e8;
  font-size: .82rem;
}

.weapon-option-list p {
  margin: 6px 0 0;
  color: #aeb2bb;
  font-size: .77rem;
  line-height: 1.55;
}

.weapon-record-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .65fr);
  gap: 24px;
  padding-top: 24px;
}

.weapon-character-note p {
  margin: 8px 0 0;
  color: #aaafb8;
  font-size: .8rem;
  line-height: 1.55;
}

.weapon-character-links {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--weapon-line);
}

.weapon-character-links > span {
  color: #aeb4ff;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .12em;
}

.weapon-character-links > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.weapon-character-links a {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--weapon-line);
  border-radius: 5px;
  background: #25272c;
  color: #f2f3f5;
  text-decoration: none;
}

.weapon-character-links a:hover,
.weapon-character-links a:focus-visible {
  border-color: #676fb7;
  background: #2b2d33;
}

.weapon-character-links a strong {
  font-size: .76rem;
}

.weapon-character-links a small {
  color: #a8adb6;
  font-size: .64rem;
  line-height: 1.45;
}

.weapon-reference-list {
  padding-left: 24px;
  border-left: 1px solid var(--weapon-line);
}

.weapon-reference-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.weapon-reference-list small {
  padding: 6px 8px;
  border-radius: 4px;
  background: #32343a;
  color: #b5bac3;
  font-size: .67rem;
}

.weapon-load-error {
  padding: 20px;
  border: 1px solid #884f55;
  border-radius: 6px;
  background: #38272a;
  color: #f2b6bc;
}

@media (max-width: 1180px) {
  .manufacturer-panel {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .manufacturer-status {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--weapon-line);
    border-left: 0;
  }

  .manufacturer-status div + div {
    border-top: 0;
    border-left: 1px solid var(--weapon-line);
  }

  .weapon-record {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  .weapon-future-card:nth-child(n + 4) {
    border-top: 1px solid var(--weapon-line);
  }
}

@media (max-width: 820px) {
  .weapons-scroll {
    gap: 42px;
    padding: 24px;
  }

  .weapons-hero {
    grid-template-columns: 1fr;
  }

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

  .weapons-hero dl div {
    min-height: 74px;
    align-items: start;
    flex-direction: column;
    justify-content: center;
  }

  .weapons-hero dl div + div {
    border-top: 0;
    border-left: 1px solid var(--weapon-line);
  }

  .weapons-fiction-notice,
  .weapons-section-heading {
    grid-template-columns: 1fr;
  }

  .weapons-section-heading > p {
    grid-column: 1;
  }

  .weapon-record {
    grid-template-columns: 1fr;
  }

  .weapon-visual-bay {
    grid-template-rows: minmax(250px, 1fr) auto;
    border-right: 0;
    border-bottom: 1px solid var(--weapon-line);
  }

  .weapon-image-placeholder {
    min-height: 250px;
  }

  .weapon-image-approved {
    min-height: 250px;
  }
}

@media (max-width: 620px) {
  .weapons-scroll {
    gap: 36px;
    padding: 18px 14px 32px;
  }

  .weapons-hero {
    padding-top: 18px;
  }

  .weapons-hero h1 {
    font-size: clamp(3.8rem, 21vw, 5.3rem);
  }

  .weapons-hero dl {
    grid-template-columns: 1fr;
  }

  .weapons-hero dl div {
    min-height: 56px;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .weapons-hero dl div + div {
    border-top: 1px solid var(--weapon-line);
    border-left: 0;
  }

  .weapons-fiction-notice {
    gap: 10px;
  }

  .manufacturer-panel {
    grid-template-columns: 1fr;
  }

  .manufacturer-mark {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid var(--weapon-line);
  }

  .manufacturer-logo {
    width: 76px;
    height: 92px;
  }

  .manufacturer-status {
    grid-template-columns: 1fr;
  }

  .manufacturer-status div + div {
    border-top: 1px solid var(--weapon-line);
    border-left: 0;
  }

  .weapon-record-body {
    padding: 24px 18px;
  }

  .weapon-record-header {
    align-items: stretch;
    flex-direction: column;
  }

  .weapon-caliber {
    min-width: 0;
  }

  .weapon-primary-facts,
  .weapon-record-footer,
  .weapon-characteristics {
    grid-template-columns: 1fr;
  }

  .weapon-primary-facts > div,
  .weapon-primary-facts > div:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-left: 0;
  }

  .weapon-primary-facts > div + div {
    border-top: 1px solid var(--weapon-line);
  }

  .weapon-characteristics li:nth-child(even) {
    border-left: 0;
  }

  .weapon-characteristics li + li {
    border-top: 1px solid var(--weapon-line);
  }

  .weapon-option-list {
    grid-template-columns: 1fr;
  }

  .weapon-option-list article {
    padding: 14px 0;
  }

  .weapon-option-list article + article {
    padding-left: 0;
    border-top: 1px solid var(--weapon-line);
    border-left: 0;
  }

  .weapon-reference-list {
    padding-top: 20px;
    padding-left: 0;
    border-top: 1px solid var(--weapon-line);
    border-left: 0;
  }

  .weapon-character-links > div {
    grid-template-columns: 1fr;
  }

}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.archive-entity-link {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.archive-entity-link:hover {
  color: inherit;
  text-decoration: none;
}

.archive-entity-link:focus-visible {
  outline: 2px solid #8f97f7;
  outline-offset: 3px;
}

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

button,
input {
  font: inherit;
}

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

.shell {
  width: var(--shell);
  margin-inline: auto;
}

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--accent);
  color: #fff;
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(42, 46, 56, .75);
  background: rgba(16, 17, 22, .82);
  backdrop-filter: blur(18px);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 750;
  letter-spacing: -.02em;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid var(--line-bright);
  transform: rotate(45deg);
}

.brand-mark::before,
.brand-mark::after,
.brand-mark span {
  position: absolute;
  background: var(--accent-bright);
  content: "";
}

.brand-mark::before {
  width: 9px;
  height: 9px;
}

.brand-mark::after {
  width: 3px;
  height: 21px;
  opacity: .65;
}

.brand-mark span {
  width: 21px;
  height: 3px;
  opacity: .65;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  transition: color .2s ease, background .2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: var(--surface-raised);
  color: var(--text);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease, background .2s ease;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary,
.world-section-page .nav-dropdown summary {
  background: var(--surface-raised);
  color: var(--text);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 80;
  display: grid;
  width: 270px;
  padding: 7px;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .34);
  transform: translateX(-50%);
}

.nav-links .nav-submenu a {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 5px;
}

.nav-submenu a span {
  color: #dbdee1;
  font-size: .79rem;
}

.nav-submenu a small {
  color: #8f949c;
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.35;
}

.nav-links .nav-submenu a:hover,
.nav-links .nav-submenu a[aria-current="page"] {
  background: #35373c;
}

.nav-submenu a[aria-current="page"] span {
  color: #fff;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle > span:not(.sr-only) {
  display: block;
  width: 16px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .2s ease;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(87,184,138,.1);
}

.hero {
  display: grid;
  min-height: calc(100vh - 68px);
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 64px;
  padding-block: 80px;
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.25rem, 7vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.065em;
}

.hero h1 span {
  color: var(--subtle);
}

.hero-intro {
  max-width: 640px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  font-size: .91rem;
  font-weight: 700;
  transition: transform .2s var(--ease), background .2s ease, border-color .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

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

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

.button-secondary {
  border-color: var(--line-bright);
  background: var(--surface-raised);
}

.button-secondary:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
}

.text-link {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  transition: color .2s ease;
}

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

.hero-sigil {
  position: relative;
  width: min(36vw, 440px);
  aspect-ratio: 1;
  margin-left: auto;
}

.sigil {
  position: absolute;
  inset: 0;
  margin: auto;
  border: 1px solid var(--line-bright);
  border-radius: 50%;
}

.sigil::before,
.sigil::after {
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--line-bright);
  content: "";
  transform: translate(-50%, -50%);
}

.sigil::before { width: 110%; height: 1px; }
.sigil::after { width: 1px; height: 110%; }
.sigil-outer { width: 100%; height: 100%; animation: rotate-slow 42s linear infinite; }
.sigil-outer::before { transform: translate(-50%, -50%) rotate(45deg); }
.sigil-outer::after { transform: translate(-50%, -50%) rotate(45deg); }
.sigil-middle { width: 72%; height: 72%; border-style: dashed; opacity: .72; animation: rotate-reverse 28s linear infinite; }
.sigil-inner { width: 42%; height: 42%; border-color: var(--accent); box-shadow: 0 0 70px rgba(124,132,244,.13); }

.sigil-core {
  position: absolute;
  inset: 0;
  display: grid;
  width: 76px;
  height: 76px;
  margin: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  transform: rotate(45deg);
}

.sigil-core span {
  border: 1px solid var(--accent-bright);
  background: var(--accent-wash);
}

.sigil-label {
  position: absolute;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  letter-spacing: .12em;
}

.sigil-label-one { top: 14%; right: -2%; }
.sigil-label-two { bottom: 20%; left: -4%; color: var(--success); }

@keyframes rotate-slow { to { transform: rotate(360deg); } }
@keyframes rotate-reverse { to { transform: rotate(-360deg); } }

.world-section,
.featured-section {
  padding-block: 110px;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 42px;
  align-items: end;
}

.section-heading h2,
.featured-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.section-heading > p,
.featured-copy > p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.signal-grid {
  border-top: 1px solid var(--line);
}

.signal-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  padding: 32px 12px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .3s var(--ease), background .3s ease;
}

.signal-card:hover {
  padding-left: 22px;
  background: var(--accent-wash);
}

.signal-number,
.record-code {
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  letter-spacing: .08em;
}

.signal-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.signal-card p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
}

.featured-panel {
  display: grid;
  min-height: 390px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.featured-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(36px, 6vw, 72px);
}

.featured-copy > p {
  margin: 22px 0 30px;
}

.pixel-party {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: #181a20;
}

.pixel-party::before {
  content: none;
}

.mini-chibi,
.chibi-placeholder {
  display: grid;
  place-items: center;
  font-weight: 800;
  image-rendering: pixelated;
}

.character-chibi {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter .3s ease, transform .4s var(--ease);
}

.character-card:hover .character-chibi {
  filter: brightness(1.04);
  transform: scale(1.018);
}

.mini-chibi {
  position: absolute;
  bottom: 19%;
  width: 72px;
  height: 90px;
  border: 8px solid #2a2e3a;
  border-radius: 24px 24px 10px 10px;
  background: #333848;
  box-shadow: 0 12px 0 #17191f;
}

.mini-chibi::before {
  position: absolute;
  top: -32px;
  width: 62px;
  height: 52px;
  border: 8px solid #2a2e3a;
  border-radius: 22px 22px 16px 16px;
  background: #464c5f;
  content: "";
}

.mini-chibi span { z-index: 2; margin-top: -22px; }
.mini-chibi-one { left: 16%; transform: scale(.84); }
.mini-chibi-two { left: 42%; bottom: 21%; border-color: #38343a; background: #5b463d; transform: scale(1.12); z-index: 2; }
.mini-chibi-two::before { border-color: #38343a; background: #6d574e; }
.mini-chibi-three { left: 70%; transform: scale(.76); }

.site-footer {
  display: grid;
  min-height: 120px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-size: .78rem;
}

.site-footer > span { text-align: right; }
.site-footer p { margin: 0; }
.project-ownership { margin-top: 32px; }
.brand-small { color: var(--muted); font-size: .85rem; }
.brand-small .brand-mark { width: 20px; height: 20px; transform: rotate(45deg) scale(.7); }

/* Characters */
.characters-page main {
  min-height: calc(100vh - 188px);
}

.roster-header {
  display: grid;
  grid-template-columns: 1fr minmax(380px, .72fr);
  gap: 80px;
  padding-block: 84px 48px;
  align-items: end;
}

.roster-title h1 {
  margin: 0;
  font-size: clamp(3.7rem, 8vw, 7.5rem);
  line-height: .86;
  letter-spacing: -.07em;
}

.roster-title > p:last-child {
  max-width: 600px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.roster-tools {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-field {
  display: flex;
  height: 46px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.search-field svg {
  width: 18px;
  fill: none;
  stroke: var(--subtle);
  stroke-width: 1.8;
}

.search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.search-field input::placeholder { color: var(--subtle); }

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.filter-chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.filter-chip:hover { border-color: var(--line-bright); color: var(--text); }
.filter-chip.is-active { border-color: rgba(124,132,244,.35); background: var(--accent-wash); color: var(--accent-bright); }

.roster-section {
  padding-bottom: 110px;
}

.roster-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roster-meta p { margin: 0; }
.archive-state .status-dot { width: 6px; height: 6px; }

.character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1px;
  gap: 12px 18px;
  align-items: start;
}

.character-card {
  display: inline-grid;
  width: 100%;
  grid-template-columns: minmax(170px, 42%) 1fr;
  margin: 0;
  vertical-align: top;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  transition: border-color .25s ease, box-shadow .35s var(--ease), opacity .2s ease;
}

.character-card:hover {
  z-index: 2;
  border-color: var(--line-bright);
  box-shadow: 0 16px 42px rgba(0,0,0,.24);
}

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

.character-art {
  position: relative;
  display: flex;
  min-height: 270px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background-color: #1b1e25;
}

.card-featured .character-art { min-height: 330px; }
.card-compact .character-art { min-height: 235px; }
.character-art::after { content: none; }
.art-blue { background-color: #1a2132; }
.art-amber { background-color: #29231f; }
.art-red { background-color: #291d22; }
.art-violet { background-color: #231f30; }
.art-green { background-color: #192821; }
.art-neutral { background-color: #1c1e23; }

.record-code {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
}

.art-note {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 3px 5px;
  border-radius: 3px;
  color: #dbdee1;
  background: rgba(30, 31, 34, .92);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.chibi-placeholder {
  position: relative;
  width: 112px;
  height: 128px;
  border: 10px solid rgba(255,255,255,.09);
  border-radius: 40px 40px 18px 18px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.38);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  box-shadow: 0 14px 0 rgba(0,0,0,.12);
  transform: translateY(16px);
}

.chibi-placeholder::before {
  position: absolute;
  top: -53px;
  left: 50%;
  width: 96px;
  height: 80px;
  border: 10px solid rgba(255,255,255,.09);
  border-radius: 34px 34px 24px 24px;
  background: rgba(255,255,255,.11);
  content: "";
  transform: translateX(-50%);
}

.chibi-placeholder::after {
  position: absolute;
  top: -19px;
  left: 50%;
  width: 39px;
  height: 7px;
  border-right: 6px solid rgba(255,255,255,.34);
  border-left: 6px solid rgba(255,255,255,.34);
  content: "";
  transform: translateX(-50%);
}

.chibi-placeholder span { position: relative; z-index: 2; margin-top: 4px; }

.character-info {
  align-self: center;
  padding: 24px 22px;
}

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

.character-heading p {
  margin: 0 0 5px;
  color: var(--subtle);
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.character-heading h2 {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.035em;
}

.profile-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(124,132,244,.25);
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-bright);
  font-size: .57rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.affiliation-badge {
  display: inline-grid;
  gap: 1px;
  line-height: 1.05;
}

.affiliation-badge small {
  color: currentColor;
  font-size: .47rem;
  font-weight: 650;
  letter-spacing: .045em;
  opacity: .72;
}

.badge-restricted { border-color: rgba(200,100,120,.22); background: rgba(200,100,120,.09); color: #d994a3; }
.badge-active { border-color: rgba(87,184,138,.22); background: rgba(87,184,138,.09); color: #7acba3; }
.badge-pending { border-color: var(--line); background: rgba(255,255,255,.035); color: var(--subtle); }

.faction-badges {
  display: flex;
  max-width: 58%;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.faction-msf {
  border-color: rgba(88, 101, 242, .3);
  background: rgba(88, 101, 242, .14);
  color: #aeb4ff;
}

.faction-independent {
  border-color: rgba(181, 186, 193, .2);
  background: rgba(181, 186, 193, .08);
  color: #c7cbd1;
}

.faction-government {
  border-color: rgba(35, 165, 89, .28);
  background: rgba(35, 165, 89, .11);
  color: #7acb9a;
}

.faction-private-eye {
  border-color: rgba(240, 178, 50, .28);
  background: rgba(240, 178, 50, .1);
  color: #e7c46c;
}

.faction-magiarchy {
  border-color: rgba(171, 111, 232, .28);
  background: rgba(171, 111, 232, .1);
  color: #cba1f0;
}

.faction-academy {
  border-color: rgba(57, 194, 219, .28);
  background: rgba(57, 194, 219, .1);
  color: #85d6e5;
}

.faction-police {
  border-color: rgba(68, 138, 214, .3);
  background: rgba(68, 138, 214, .11);
  color: #91bce8;
}

.faction-church {
  border-color: rgba(194, 183, 158, .28);
  background: rgba(194, 183, 158, .1);
  color: #d1c7b1;
}

.faction-household {
  border-color: rgba(156, 146, 136, .28);
  background: rgba(156, 146, 136, .1);
  color: #c9c1b8;
}

.dispatch-button {
  margin-top: 12px;
}

.character-info > p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.66;
}

.character-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.character-traits span {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--subtle);
  font-size: .63rem;
  font-weight: 650;
}

.empty-state {
  padding: 100px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.empty-pixel {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  place-items: center;
  border: 6px solid var(--line-bright);
  color: var(--subtle);
  font-family: ui-monospace, monospace;
  font-weight: 800;
  image-rendering: pixelated;
}

.empty-state h2 { margin: 0 0 6px; color: var(--text); font-size: 1.2rem; }
.empty-state p { margin: 0; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

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

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 32px, 760px); }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 100px; }
  .hero-sigil { position: absolute; right: -15vw; z-index: -1; width: 55vw; opacity: .28; }
  .section-heading, .featured-panel, .roster-header { grid-template-columns: 1fr; }
  .section-heading { gap: 22px; }
  .pixel-party { min-height: 330px; border-top: 1px solid var(--line); border-left: 0; }
  .roster-header { gap: 44px; padding-top: 72px; }
  .roster-tools { max-width: 520px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer p { display: none; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 14px;
    left: 14px;
    display: grid;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .nav-links a { padding: 12px; }
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown summary {
    justify-content: space-between;
    padding: 12px;
  }
  .nav-submenu {
    position: static;
    width: auto;
    margin: 3px 4px 6px;
    border-color: rgba(0, 0, 0, .25);
    border-radius: 6px;
    box-shadow: none;
    transform: none;
  }
  .nav-links .nav-submenu a {
    padding: 10px;
  }
}
@media (max-width: 620px) {
  :root { --shell: calc(100% - 28px); }
  .hero { padding-block: 80px; }
  .hero h1 { font-size: clamp(3.1rem, 16vw, 5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .world-section, .featured-section { padding-block: 78px; }
  .signal-card { grid-template-columns: 42px 1fr; gap: 12px; }
  .featured-panel { min-height: 0; }
  .featured-copy { padding: 34px 26px 42px; }
  .pixel-party { min-height: 260px; }
  .mini-chibi-one { left: 8%; }
  .mini-chibi-two { left: 39%; }
  .mini-chibi-three { left: 72%; }
  .site-footer { min-height: 100px; }
  .roster-header { padding-block: 62px 38px; }
  .roster-title h1 { font-size: clamp(3.6rem, 19vw, 5.7rem); }
  .roster-title > p:last-child { margin-top: 25px; }
  .character-grid { grid-template-columns: minmax(0, 1fr); }
  .character-card { grid-template-columns: minmax(128px, 38%) 1fr; }
  .character-art, .card-featured .character-art, .card-compact .character-art { min-height: 245px; }
  .character-info { padding: 20px 17px; }
  .character-heading { display: block; }
  .character-heading .profile-badge { display: inline-block; margin-top: 10px; }
  .character-heading .faction-badges {
    max-width: none;
    justify-content: flex-start;
    margin-top: 10px;
  }
  .character-heading .faction-badges .profile-badge { margin-top: 0; }
  .character-heading .faction-badges .affiliation-badge {
    display: inline-grid;
    grid-auto-flow: row;
    gap: 2px;
    align-items: start;
    white-space: nowrap;
  }
  .character-traits { display: none; }
  .roster-meta { align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Discord desktop-app-inspired workspace shell */
body::before {
  display: none;
}

.site-header {
  border-bottom-color: rgba(0, 0, 0, .35);
  background: #1e1f22;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

.navbar {
  width: calc(100% - 24px);
  min-height: 52px;
}

.brand {
  font-size: .9rem;
}

.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.nav-links a {
  padding: 6px 10px;
  font-size: .82rem;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background: #35373c;
}

.nav-dropdown summary {
  padding: 6px 10px;
  font-size: .82rem;
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary,
.world-section-page .nav-dropdown summary {
  background: #35373c;
}

.app-main {
  height: calc(100vh - 53px);
  min-height: 620px;
  overflow: hidden;
}

.home-workspace,
.characters-workspace,
.gallery-workspace,
.docs-workspace {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.home-workspace {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.characters-workspace {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.gallery-workspace {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.docs-workspace {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.channel-sidebar,
.archive-sidebar,
.context-sidebar {
  position: relative;
  min-width: 0;
  background: #2b2d31;
}

.notes-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow-y: auto;
  border-left: 1px solid rgba(0, 0, 0, .2);
  background: #2b2d31;
}

.notes-header {
  display: flex;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .32);
  color: var(--text);
  font-size: .76rem;
}

.notes-header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes-header > div > span {
  color: var(--subtle);
  font-size: .92rem;
}

.notes-header > span {
  padding: 2px 6px;
  border-radius: 4px;
  background: #1e1f22;
  color: var(--subtle);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
}

.notes-board-link { display: flex; min-height: 44px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #41434a; color: #b5b1ff; font-size: .72rem; }

.notes-live-toolbar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  background: #25262a;
}

.notes-connection {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: #8f949c;
  font-size: .59rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.notes-connection i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #777d87;
}

.notes-connection[data-state="online"] i {
  background: #23a559;
}

.notes-connection[data-state="offline"] i {
  background: #f0b232;
}

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

.notes-toolbar-button,
.notes-button,
.note-card-button {
  border: 1px solid #44474f;
  border-radius: 4px;
  background: #313338;
  color: #c9ccd2;
  cursor: pointer;
  font-size: .6rem;
  font-weight: 700;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.notes-toolbar-button {
  padding: 5px 7px;
}

.notes-toolbar-button:hover,
.notes-button:hover,
.note-card-button:hover {
  border-color: #5c606a;
  background: #383a40;
  color: #fff;
}

.notes-toolbar-primary,
.notes-button-primary {
  border-color: #5865f2;
  background: #5865f2;
  color: #fff;
}

.notes-feedback {
  margin: 0;
  padding: 7px 11px;
  border-bottom: 1px solid rgba(0, 0, 0, .22);
  background: #2b2d31;
  color: #aeb2ba;
  font-size: .63rem;
  line-height: 1.45;
}

.notes-feedback[data-tone="success"] {
  color: #67c58a;
}

.notes-feedback[data-tone="error"] {
  color: #f08a8a;
}

.notes-auth-form {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 7px;
}

.notes-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid #41444b;
  border-radius: 7px;
  background: #313338;
}

.notes-editor > strong {
  font-size: .78rem;
}

.notes-auth-form label,
.notes-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #949ba4;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.notes-auth-form input,
.notes-editor input,
.notes-editor textarea,
.notes-editor select {
  width: 100%;
  border: 1px solid #404249;
  border-radius: 4px;
  outline: none;
  background: #1e1f22;
  color: #f2f3f5;
  font: inherit;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.notes-auth-form input,
.notes-editor input,
.notes-editor select {
  height: 30px;
  padding: 0 8px;
}

.notes-editor textarea {
  min-height: 82px;
  padding: 8px;
  line-height: 1.45;
  resize: vertical;
}

.notes-auth-form input:focus,
.notes-editor input:focus,
.notes-editor textarea:focus,
.notes-editor select:focus {
  border-color: #6975f5;
}

.notes-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.notes-button {
  padding: 6px 9px;
}

.notes-button:disabled {
  cursor: wait;
  opacity: .6;
}

.notes-button-muted {
  background: transparent;
}

.note-card-actions {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #3d3f45;
}

.note-card-button {
  padding: 4px 7px;
}

.note-card-delete:hover {
  border-color: #a34f55;
  background: #443034;
  color: #ffb5b5;
}

.note-completed {
  background: rgba(35, 165, 89, .12);
  color: #66c58a;
}

.live-page-note[data-status="completed"] h2,
.live-page-note[data-status="completed"] > p {
  opacity: .68;
}

.page-note {
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 7px;
  background: #313338;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.page-note > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.note-state {
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(88, 101, 242, .14);
  color: #aeb4ff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.note-waiting {
  background: rgba(240, 178, 50, .12);
  color: #e7c46c;
}

.note-number {
  color: #6d6f78;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
}

.page-note h2 {
  margin: 10px 0 5px;
  font-size: .82rem;
  line-height: 1.3;
}

.page-note p,
.notes-empty p,
.notes-footnote {
  color: var(--subtle);
  font-size: .68rem;
  line-height: 1.5;
}

.page-note p {
  margin: 0;
}

.notes-empty {
  padding: 32px 15px;
  border: 1px dashed #404249;
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
}

.notes-empty > span {
  display: grid;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 50%;
  background: rgba(35, 165, 89, .12);
  color: #66c58a;
  font-weight: 800;
}

.notes-empty strong {
  display: block;
  font-size: .76rem;
}

.notes-empty p {
  margin: 4px 0 0;
}

.notes-footnote {
  margin: auto 12px 12px;
  padding-top: 12px;
  border-top: 1px solid #3f4147;
  font-size: .61rem;
}

.channel-sidebar,
.archive-sidebar {
  display: flex;
  flex-direction: column;
}

.workspace-title,
.feed-header {
  display: flex;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .32);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015);
}

.workspace-title {
  color: var(--text);
  font-size: .84rem;
}

.workspace-title > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.workspace-icon {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
}

.channel-group {
  padding: 18px 8px 0;
}

.channel-group > p,
.archive-filter-group > p,
.context-section > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 8px 5px;
  color: var(--subtle);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.channel-link {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 4px;
  color: var(--subtle);
  font-size: .88rem;
  font-weight: 500;
  transition: color .15s ease, background .15s ease;
}

.channel-link > span {
  width: 16px;
  color: #80848e;
  font-size: 1.05rem;
  text-align: center;
}

.channel-link:hover {
  background: #35373c;
  color: #dbdee1;
}

.channel-link.is-active {
  background: #404249;
  color: #fff;
}

.operator-panel {
  display: grid;
  min-height: 52px;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 7px 9px;
  background: #232428;
  color: var(--subtle);
  font-size: .7rem;
}

.operator-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #3f4147;
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: .57rem;
  font-weight: 800;
}

.operator-panel div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.operator-panel strong {
  overflow: hidden;
  color: var(--text);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operator-panel i,
.feed-header i {
  display: inline-block;
  width: 1px;
  height: 20px;
  margin-inline: 10px;
  background: #4e5058;
  vertical-align: middle;
}

.operator-panel div span i {
  width: 6px;
  height: 6px;
  margin: 0 4px 0 0;
  border-radius: 50%;
  background: var(--success);
}

.home-feed,
.character-main-pane,
.gallery-main-pane,
.docs-main-pane {
  min-width: 0;
  background: #313338;
}

.home-feed {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.feed-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #313338;
}

.feed-header > div {
  display: flex;
  min-width: 0;
  align-items: center;
}

.feed-header > div > span {
  margin-right: 9px;
  color: #80848e;
  font-size: 1.35rem;
  font-weight: 500;
}

.feed-header strong {
  font-size: .87rem;
}

.feed-header p {
  overflow: hidden;
  margin: 0;
  color: var(--subtle);
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-status {
  flex: 0 0 auto;
  color: var(--subtle);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.feed-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.welcome-card {
  position: relative;
  max-width: 800px;
  padding: 64px 34px 30px;
}

.welcome-glyph {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 26px;
  place-items: center;
  border-radius: 50%;
  background: #1e1f22;
}

.welcome-glyph span {
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent-bright);
  transform: rotate(45deg);
}

.welcome-card .eyebrow {
  margin-bottom: 9px;
  color: var(--subtle);
  font-size: .66rem;
}

.welcome-card h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.welcome-card h1 span {
  color: var(--muted);
}

.welcome-card > p:not(.eyebrow) {
  max-width: 650px;
  margin: 17px 0 22px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.65;
}

.button {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: 4px;
  font-size: .78rem;
}

.date-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 16px 20px;
  border-top: 1px solid #3f4147;
}

.home-updates-empty {
  margin: 0;
  padding: 18px 24px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}

.date-divider span {
  position: absolute;
  padding: 0 5px;
  background: #313338;
  color: var(--subtle);
  font-size: .63rem;
  font-weight: 700;
}

.dispatch {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 4px 34px 18px 18px;
  scroll-margin-top: 64px;
}

.dispatch:hover {
  background: rgba(0, 0, 0, .045);
}

.dispatch-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #404249;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
}

.avatar-violet { background: #5865f2; }
.avatar-red { background: #da373c; }
.avatar-amber { background: #9b6b32; }
.avatar-green { background: #24845a; }
.avatar-blue { background: #356caa; }
.avatar-neutral { background: #5c5f66; }

.dispatch-author {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dispatch-author strong {
  font-size: .89rem;
}

.dispatch-author span {
  color: var(--subtle);
  font-size: .64rem;
}

.dispatch-body > p {
  max-width: 780px;
  margin: 3px 0 9px;
  color: #dbdee1;
  font-size: .88rem;
  line-height: 1.45;
}

.dispatch-embed {
  display: grid;
  max-width: 540px;
  grid-template-columns: 4px 1fr;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2d31;
}

.dispatch-embed > span {
  background: var(--accent);
}

.dispatch-embed.danger-embed > span {
  background: #da373c;
}

.dispatch-embed > div {
  padding: 12px 14px;
}

.dispatch-embed strong {
  font-size: .78rem;
}

.dispatch-embed p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

.reaction-row {
  display: flex;
  gap: 4px;
}

.reaction-row span {
  padding: 3px 7px;
  border: 1px solid #4e5058;
  border-radius: 7px;
  background: #2b2d31;
  color: var(--muted);
  font-size: .7rem;
}

.system-message {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(35, 165, 89, .09);
  color: #a5d6b8;
  font-size: .7rem;
}

.context-sidebar {
  overflow-y: auto;
  border-left: 1px solid rgba(0, 0, 0, .16);
  padding: 24px 8px;
}

.context-section + .context-section {
  margin-top: 25px;
}

.status-member {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--muted);
}

a.status-member:hover {
  background: #35373c;
}

.member-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: #404249;
  color: #dbdee1;
  font-size: .55rem;
  font-weight: 800;
}

.member-blue { background: #435582; }
.member-amber { background: #6b5144; }

.status-member div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.status-member strong {
  overflow: hidden;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-member small {
  overflow: hidden;
  color: var(--subtle);
  font-size: .63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Character archive app view */
.archive-search-wrap {
  padding: 12px 10px 8px;
}

.archive-search-wrap .search-field {
  height: 32px;
  border-color: transparent;
  background: #1e1f22;
}

.archive-search-wrap .search-field svg {
  width: 14px;
}

.archive-search-wrap .search-field input {
  font-size: .73rem;
}

.archive-filter-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.archive-filter-group > p {
  width: auto;
  margin-top: 6px;
  margin-bottom: 4px;
}

.archive-filter-group .filter-chip {
  display: flex;
  width: 100%;
  height: 34px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--subtle);
  font-size: .82rem;
  font-weight: 550;
  text-align: left;
}

.archive-filter-group .filter-chip span {
  width: 16px;
  color: #80848e;
  text-align: center;
}

.archive-filter-group .filter-chip:hover {
  background: #35373c;
  color: #dbdee1;
}

.archive-filter-group .filter-chip.is-active {
  background: #404249;
  color: #fff;
}

.character-main-pane {
  height: 100%;
  overflow-y: auto;
}

.gallery-main-pane {
  height: 100%;
  overflow-y: auto;
}

.gallery-main-pane .feed-header {
  top: 0;
}

.gallery-heading {
  padding: 28px 30px 18px;
}

.gallery-heading .eyebrow {
  margin-bottom: 8px;
  font-size: .62rem;
}

.gallery-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.gallery-heading > div > p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.image-id-host { position: relative; }
.published-image-meta {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate(-100%, -100%);
  pointer-events: none;
}
.published-image-filename { display: none; }
.published-image-meta[hidden] { display: none; }
.image-id-copy {
  position: relative;
  isolation: isolate;
  min-height: 20px;
  padding: 3px 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e1e2e5;
  font: 400 9px/14px monospace;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
}
.image-id-copy::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 4px; background: rgb(30 31 34 / 76%); }
.image-id-copy:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .image-id-copy:hover::before { background: #383a40; }
}
.image-id-download { position: static; transform: none; width: auto; gap: 8px; flex-wrap: wrap; }
.image-id-download .published-image-filename { display: inline; overflow-wrap: anywhere; min-width: 0; color: var(--subtle); font-size: .7rem; }
.image-id-toast {
  position: fixed;
  z-index: 10000;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 1px solid #585b65;
  border-radius: 6px;
  background: #1e1f22;
  color: #f2f3f5;
  font-size: .8rem;
  pointer-events: none;
}
.image-id-copy-buffer { position: fixed; left: -9999px; top: 0; }
@media (pointer: coarse) {
  .image-id-copy { display: flex; align-items: flex-end; min-height: 44px; }
  .image-id-copy::before { top: auto; bottom: 0; height: 20px; }
}

.gallery-toolbar {
  display: block;
  margin: 0 30px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 7px;
  background: #2b2d31;
}

.gallery-filter-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.gallery-filter-label { flex-shrink: 0; font-size: .75rem; }

.gallery-filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
  flex-shrink: 0;
}

#gallery-filter-count { padding: 1px 5px; border-radius: 4px; background: #404249; font-size: .65rem; }
.gallery-filter-summary { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--subtle); font-size: .7rem; }
.gallery-filter-reset { padding-inline: 8px; color: var(--accent-bright); }
.gallery-filter-reset:disabled { color: var(--subtle); cursor: default; opacity: .55; }
.gallery-filter-reset:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .gallery-filter-reset:enabled:hover { background: #35373c; }
}

.gallery-filter-fields { padding-block: 14px; }
.gallery-filter-header:not([hidden]) + .gallery-filter-fields { border-top: 1px solid #3f4147; }
.gallery-select-options,
.gallery-toggle-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery-select-options { align-items: end; }
.gallery-toolbar .chibi-toggle { min-height: 44px; }

.gallery-select {
  display: flex;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  gap: 5px;
}

.gallery-select > span {
  color: var(--subtle);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.gallery-select select {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 10px;
  border: 1px solid #1e1f22;
  border-radius: 4px;
  outline: 0;
  background: #1e1f22;
  color: var(--text);
  font-family: inherit;
  font-size: .75rem;
  cursor: pointer;
}

.gallery-select select:focus-visible {
  border-color: var(--accent-bright);
}

.gallery-toggle-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #3f4147;
}

.gallery-toggle-pair {
  display: flex;
  flex-direction: column;
}

.chibi-toggle {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.chibi-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  border-radius: 99px;
  background: #1e1f22;
  transition: background .2s ease;
}

.toggle-track span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--subtle);
  transition: transform .2s var(--ease), background .2s ease;
}

.chibi-toggle input:checked + .toggle-track {
  background: var(--accent);
}

.chibi-toggle input:checked + .toggle-track span {
  background: #fff;
  transform: translateX(14px);
}

.chibi-toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.chibi-toggle > span:last-child {
  display: flex;
  flex-direction: column;
}

.chibi-toggle strong {
  font-size: .72rem;
}

.chibi-toggle small {
  color: var(--subtle);
  font-size: .58rem;
}

.gallery-content {
  padding: 0 30px 50px;
}

.gallery-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 13px;
  padding-top: 13px;
  border-top: 1px solid #3f4147;
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gallery-meta p {
  margin: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1px;
  gap: 12px;
  align-items: start;
}

.gallery-card {
  display: inline-block;
  width: 100%;
  margin: 0;
  vertical-align: top;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 7px;
  background: #2b2d31;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .13);
  transition: box-shadow .25s ease, border-color .2s ease;
}

.gallery-card:hover {
  border-color: #4e5058;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
}

body:not(.gallery-fan-service-visible) .gallery-card[data-fan-service="true"],
.gallery-card[hidden] {
  display: none;
}

.gallery-card > a {
  position: relative;
  display: block;
  overflow: hidden;
  background: #1e1f22;
}

.gallery-card > a::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .04);
  content: "";
  pointer-events: none;
}

.gallery-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .45s var(--ease), filter .3s ease;
}

.gallery-card:hover img {
  filter: brightness(1.05);
  transform: scale(1.015);
}

.gallery-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
}

.gallery-card figcaption > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.gallery-card figcaption strong {
  overflow: hidden;
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card figcaption div span {
  color: var(--subtle);
  font-size: .61rem;
}

.media-code {
  flex: 0 0 auto;
  color: #6d6f78;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
}

.gallery-empty {
  margin-top: 12px;
}

.music-library {
  padding: 0 30px 50px;
}

.music-filters { flex-wrap: wrap; }
.music-tag-chips { flex-basis: 100%; }
.archive-toolbar .music-tag-chips[hidden] { display: none; }
.music-filter-reset { padding: 8px 12px; background: #232428; color: #dbdee1; border: 1px solid #45474e; border-radius: 4px; cursor: pointer; }
.music-categories button[aria-pressed="true"] { color: #d2d4ff; border-color: #858aff; background: #35364e; }
.music-filters :focus-visible, .music-empty button:focus-visible { outline: 2px solid #9297ff; outline-offset: 3px; }
.music-results { margin: 14px 0; color: var(--muted); font-size: .72rem; }
.music-empty { padding: 32px 20px; text-align: center; border: 1px dashed #45474e; border-radius: 7px; background: #282a2e; }
.music-empty h2 { font-size: 1rem; }
.music-empty p { color: var(--muted); font-size: .8rem; }
.music-filters[hidden], .music-empty[hidden] { display: none; }

@media (max-width: 620px) {
  .music-filter-fields { grid-template-columns: minmax(0, 1fr) auto; }
  .music-search-field { grid-column: 1 / -1; }
  .music-categories button, .music-filter-reset, .music-filter-fields input, .music-filter-fields select { min-height: 44px; }
}

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

.music-card {
  display: inline-block;
  width: 100%;
  margin: 0;
  vertical-align: top;
  overflow: hidden;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 7px;
  background: #2b2d31;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.music-card-art {
  position: relative;
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .24);
}

.music-card-art::before,
.music-card-art::after {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  content: "";
}

.music-card-art::after {
  width: 62px;
  height: 62px;
}

.music-card-art > span {
  position: absolute;
  top: 12px;
  left: 14px;
  color: rgba(255, 255, 255, .42);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
}

.music-card-art > i {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .68);
  font-size: 1.45rem;
  font-style: normal;
}

.music-card-body {
  padding: 20px;
}

.music-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.music-status {
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.music-card h2 {
  margin: 18px 0 8px;
  color: var(--text);
  font-size: 1.12rem;
  letter-spacing: -.015em;
}

.music-card p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.58;
}

.music-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 18px;
}

.music-tags span {
  padding: 4px 7px;
  border-radius: 4px;
  background: #313338;
  color: var(--subtle);
  font-size: .56rem;
  font-weight: 700;
}

.gallery-reader-view {
  padding: 0 30px 50px;
}

.gallery-reader-view[hidden],
.gallery-heading[hidden],
.gallery-toolbar[hidden],
.gallery-content[hidden] {
  display: none;
}

.gallery-breadcrumbs {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.gallery-detail-card {
  width: min(1040px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #2b2d31;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}

.gallery-detail-image-wrap {
  display: grid;
  min-height: 360px;
  place-items: center;
  padding: 20px;
  background: #1e1f22;
}

.gallery-detail-image-wrap img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 68vh;
  object-fit: contain;
}

.gallery-detail-card figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
}

.gallery-detail-card h1 {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.gallery-detail-card #gallery-detail-meta {
  margin: 0;
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

#gallery-detail-context {
  max-width: 65ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

/* Markdown document library */
.docs-main-pane {
  height: 100%;
  overflow-y: auto;
}

.docs-main-pane .feed-header {
  top: 0;
}

.docs-heading {
  padding: 28px 30px 18px;
}

.docs-heading .eyebrow {
  margin-bottom: 8px;
  font-size: .62rem;
}

.docs-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.docs-heading > div > p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.document-library {
  padding: 0 30px 50px;
}

.document-library[hidden],
.document-reader-view[hidden],
.docs-heading[hidden] {
  display: none;
}

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

.music-status-ready {
  color: #71c69a;
}

.music-player-ready .music-player,
.music-player-ready .music-card-art > i,
.music-icon-pause,
.is-playing .music-icon-play,
.music-volume-off,
.music-mute[aria-pressed="true"] .music-volume-waves {
  display: none;
}

.is-playing .music-icon-pause,
.music-mute[aria-pressed="true"] .music-volume-off {
  display: block;
}

.music-player-ready .music-card-art { min-height: 128px; }

.music-card .music-card-artwork { min-height: clamp(180px, 20vw, 240px); }
.music-card-artwork::before, .music-card-artwork::after { display: none; }
.music-card-artwork > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.music-card-artwork > span { z-index: 1; padding: 5px 8px; background: #232428; color: #dbdee1; border-radius: 4px; }
.music-card-artwork .music-banner-label { padding: 4px 8px; background: #232428; color: #dbdee1; border-radius: 4px; }
.music-connections, .gallery-related-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.music-connections { margin: 8px 0 4px; }
.music-connections a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-bright); font-size: .7rem; text-decoration: none; }
.music-connections a:hover { text-decoration: underline; }
.music-connections a:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 3px; }
.music-card[id] { scroll-margin-top: 100px; }

/* Gallery collections share a destination, but production files are not portraits. */
.gallery-collections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 30px 18px; }
.gallery-collections a { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid #3f4147; border-radius: 7px; background: #232428; color: var(--muted); text-decoration: none; }
.gallery-collections strong { color: #dbdee1; font-size: .85rem; }
.gallery-collections span { font-size: .7rem; }
.gallery-collections a[aria-current] { border-color: #8884ee; background: #35354b; }
.gallery-collections a:hover { background: #35373c; }
.gallery-collections a:focus-visible, .production-card a:focus-visible, .resource-downloads a:focus-visible { outline: 2px solid #a3a0ff; outline-offset: 3px; }
.production-collection, .resource-reader { padding: 0 30px 40px; }
.production-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; padding: 14px; border: 1px solid #3f4147; border-radius: 7px; background: #2b2d31; }
.production-filters .gallery-select { min-width: 0; width: 100%; }
.production-filters input:not([type="checkbox"]), .production-filters select { width: 100%; height: 44px; min-height: 44px; padding: 0 10px; border: 1px solid #41434a; border-radius: 5px; background: #1e1f22; color: #dbdee1; font: inherit; font-size: .78rem; }
.resource-results { margin: 18px 0 12px; color: var(--muted); font-size: .75rem; }
.panel-collection, .panel-reader { padding: 0 30px 40px; }
.production-filters.panel-filters { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.panel-scene-toggles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 28px; }
.panel-scene-toggles .chibi-toggle { min-height: 44px; }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.panel-card { overflow: hidden; min-width: 0; border: 1px solid #41434a; border-radius: 8px; background: #232428; }
.panel-card:hover { border-color: #8884ee; }
.panel-card > a { display: block; color: inherit; text-decoration: none; }
.panel-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: #1e1f22; }
.panel-card-copy { padding: 18px; }
.panel-card h2 { font-size: 1.05rem; margin: 12px 0 8px; }
.panel-card p { color: var(--muted); font-size: .82rem; }
.panel-card-count { color: var(--accent-bright); font-size: .75rem; }
.gallery-page.panel-reading { min-width: 0; }
.panel-reader { container: panel-reader / inline-size; }
.panel-heading { overflow: hidden; margin: 0 0 16px; border: 1px solid var(--line-bright); border-radius: var(--radius-small); background: var(--surface); }
.panel-heading-copy { padding: clamp(24px, 4vw, 44px); }
.panel-heading .eyebrow { margin: 0 0 14px; color: var(--subtle); font-size: .65rem; }
.panel-heading h1 { margin: 0 0 16px; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
#panel-summary { max-width: 65ch; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.panel-heading-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 10px clamp(24px, 4vw, 44px); border-top: 1px solid var(--line-bright); background: #26282c; }
.panel-context, .panel-characters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.panel-context-link { display: inline-flex; align-items: center; min-height: 44px; color: #b8beff; font-size: .75rem; font-weight: 600; text-decoration: none; }
.panel-context-link:hover { color: var(--text); }
.panel-characters { gap: 8px; }
.panel-characters > span { margin-right: 4px; color: var(--subtle); font-size: .65rem; }
.panel-character-link { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line-bright); border-radius: 5px; color: var(--muted); font-size: .7rem; text-decoration: none; }
.panel-character-link:hover { background: var(--surface-hover); color: var(--text); }
.panel-slideshow { margin: 0 0 24px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: var(--radius-small); background: var(--surface); }
.panel-slideshow-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; max-height: 620px; background: #1e1f22; }
.panel-slideshow-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel-scene-summary { position: relative; min-width: 0; min-height: 0; border-left: 1px solid var(--line-bright); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.panel-scene-summary-copy { position: absolute; inset: 0; padding: clamp(16px, 2vw, 28px); }
.panel-scene-summary h2 { margin: 6px 0 16px; font-size: 1.15rem; }
.panel-scene-summary p { font-size: .875rem; line-height: 1.7; color: var(--muted); }
.panel-scene-summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -3px; }
@media (max-width: 700px) {
  .panel-slideshow-body { grid-template-columns: minmax(0, 1fr); }
  .panel-scene-summary { border-left: 0; border-top: 1px solid var(--line-bright); aspect-ratio: 2 / 1; max-height: 240px; }
}
.panel-slideshow-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.8s ease-in-out; }
.panel-slideshow-stage img.is-current { opacity: 1; }
.panel-slideshow-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 10px 16px; border-top: 1px solid var(--line-bright); }
.panel-slideshow-footer > a { min-width: 0; font-size: .75rem; }
.panel-slideshow-controls { display: flex; gap: 4px; margin-left: auto; }
.panel-slideshow-controls button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font: inherit; font-size: .75rem; cursor: pointer; }
.panel-slideshow-controls button:hover { background: var(--surface-hover); color: var(--text); }
.panel-slideshow-controls button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .panel-slideshow-stage img { transition: none; } }
.panel-jump { margin: 0 0 24px; border-block: 1px solid var(--line-bright); }
.panel-jump summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 4px; cursor: pointer; list-style: none; color: var(--muted); font-size: .75rem; }
.panel-jump summary::-webkit-details-marker { display: none; }
.panel-jump summary > span:first-child { color: var(--text); font-weight: 600; }
#panel-count { margin-left: auto; color: var(--subtle); font: .65rem var(--font-mono, monospace); }
.panel-jump summary svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .15s; }
.panel-jump[open] summary svg { transform: rotate(180deg); }
.panel-jump summary:hover { color: var(--text); }
.panel-jump summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
#panel-jump-links { display: grid; padding-bottom: 12px; }
.panel-jump-group { display: grid; grid-template-columns: minmax(0, 1fr) 228px; align-items: center; gap: 20px; padding: 12px 4px; min-width: 0; border-top: 1px solid var(--line-bright); }
.panel-jump-heading { display: flex; align-items: baseline; gap: 12px; }
.panel-jump-heading > span { color: var(--subtle); font: .65rem var(--font-mono, monospace); }
.panel-jump-heading strong { color: var(--muted); font-size: .78rem; line-height: 1.5; font-weight: 500; }
.panel-jump-views { display: flex; flex-wrap: wrap; gap: 12px; }
#panel-jump-links a { display: grid; gap: 6px; width: 108px; padding: 4px; border-radius: 5px; color: var(--muted); font-size: .6rem; line-height: 1.4; text-align: center; text-decoration: none; transition: background-color .15s; }
.panel-jump-preview { display: grid; place-items: center; height: 60px; overflow: hidden; border-radius: 3px; background: var(--bg); }
#panel-jump-links img { display: block; width: 100%; height: 100%; max-height: 60px; object-fit: contain; }
#panel-jump-links a:hover { background: var(--surface-hover); color: var(--text); }
#panel-jump-links a[aria-current] { background: var(--accent-wash); color: #b8beff; box-shadow: inset 0 0 0 1px var(--accent-bright); }
.panel-sequence { display: grid; gap: 28px; }
.panel-beat { min-width: 0; border: 1px solid var(--line-bright); border-radius: var(--radius-small); background: var(--surface); }
.panel-beat-heading { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line-bright); }
.panel-beat-number { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 1px solid var(--line-bright); border-radius: 6px; color: var(--subtle); font: .7rem var(--font-mono, monospace); }
.panel-beat-heading .eyebrow { display: block; margin-bottom: 6px; color: var(--subtle); font-size: .6rem; }
.panel-beat-heading h2 { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.panel-beat-artwork { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
.panel-beat-versions a { min-width: 0; overflow-wrap: anywhere; }
.scene-panel { display: flex; flex-direction: column; margin: 0; min-width: 0; scroll-margin-top: 90px; }
.scene-panel-art { display: grid; place-items: center; flex: 1; border-radius: 4px; background: var(--bg); }
.scene-panel-art img { display: block; width: 100%; height: auto; border-radius: 3px; }
.scene-panel figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0 0; }
.scene-panel .eyebrow { color: var(--subtle); font-size: .6rem; }
.scene-panel h3 { margin: 4px 0 0; color: var(--muted); font-size: .8rem; font-weight: 500; }
.scene-panel .source-link { min-height: 44px; padding: 0; background: transparent; color: #b8beff; font-size: .7rem; white-space: nowrap; }
.scene-panel .source-link:hover { color: var(--text); text-decoration: underline; }
@container panel-reader (min-width: 840px) {
  #panel-jump-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@container panel-reader (max-width: 500px) {
  .panel-heading-copy { padding: 24px 20px; }
  .panel-heading-footer { padding: 8px 20px; }
  .panel-context { gap: 8px 20px; }
  .panel-characters { flex-basis: 100%; padding-bottom: 8px; }
  .panel-jump-group { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel-jump-views { padding-left: 26px; }
  .panel-beat-heading { gap: 12px; padding: 16px; }
  .panel-beat-artwork { padding: 12px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { #panel-jump-links a, .panel-jump summary svg { transition: none; } }
.panel-return { margin-top: 24px; min-height: 44px; }
.panel-reader a:focus-visible, .panel-card a:focus-visible { outline: 2px solid #a3a0ff; outline-offset: -3px; }
.chapter-panel-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.chapter-panel-links a { min-height: 44px; font-size: .8rem; }
@media (max-width: 680px) {
  .panel-collection, .panel-reader { padding: 0 14px 30px; }
  .production-filters.panel-filters { grid-template-columns: minmax(0, 1fr); }
  .panel-scene-toggles { flex-direction: column; align-items: stretch; justify-self: end; width: max-content; max-width: 100%; }
  .scene-panel figcaption { padding: 10px 2px 0; }
  .panel-sequence { gap: 20px; }
}
.resource-empty { padding: 32px; border: 1px solid #3f4147; border-radius: 8px; background: #232428; }
.resource-empty h2 { margin: 0 0 10px; font-size: 1.2rem; }
.resource-empty p { max-width: 55ch; color: var(--muted); font-size: .85rem; }
.resource-empty button { margin: 14px 0 0; }
.production-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.production-card { min-width: 0; overflow: hidden; border: 1px solid #41434a; border-radius: 8px; background: #232428; }
.production-card:hover { border-color: #8884ee; }
.production-card > a { display: block; color: inherit; text-decoration: none; }
.production-card img { display: block; width: 100%; height: 220px; object-fit: contain; background: #1e1f22; }
.production-card-copy { padding: 18px; }
.production-card h2 { margin: 12px 0 8px; font-size: 1.05rem; overflow-wrap: anywhere; }
.production-card p { color: var(--muted); font-size: .82rem; }
.production-card small, .resource-file-label { display: block; color: var(--muted); font-size: .7rem; }
.resource-file-label { margin-top: 14px; color: #b9b5ff; }
.resource-heading { margin: 24px 0; }
.resource-heading h1 { margin: 12px 0; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; overflow-wrap: anywhere; }
.resource-heading > p { max-width: 75ch; color: var(--muted); }
#resource-characters { display: flex; flex-wrap: wrap; gap: 8px; }
#resource-characters a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-bright); text-decoration: none; }
.resource-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 22px; align-items: start; }
.resource-layout > *, .resource-info { min-width: 0; }
.resource-preview figure { margin: 0; border: 1px solid #3f4147; border-radius: 8px; overflow: hidden; background: #1e1f22; }
.resource-preview figure img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin-inline: auto; }
.resource-preview figcaption:not(:empty) { padding: 12px 16px; color: var(--muted); font-size: .78rem; border-top: 1px solid #3f4147; }
.resource-no-preview { display: grid; place-items: center; min-height: 200px; color: var(--subtle); background: #1e1f22; font-size: .8rem; }
.resource-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 12px 3px; }
.resource-preview-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.resource-preview-links a { min-height: 44px; }
.resource-thumbnails button { flex: 0 0 64px; height: 64px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
.resource-thumbnails img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.resource-thumbnails button[aria-pressed="true"] { outline: 2px solid #a3a0ff; outline-offset: 2px; }
.resource-thumbnails button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.resource-files, .resource-specs { padding: 18px; border: 1px solid #3f4147; border-radius: 8px; background: #232428; margin-bottom: 16px; overflow-wrap: anywhere; }
.resource-files header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.resource-files h2, .resource-specs h2 { margin: 0 0 12px; font-size: .95rem; }
.resource-files header span, .resource-files small { color: var(--subtle); font-size: .7rem; }
#resource-downloads { list-style: none; padding: 0; margin: 0; }
#resource-downloads li { padding: 14px 0; border-top: 1px solid #3f4147; }
#resource-downloads li:last-child { padding-bottom: 0; }
#resource-downloads a { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 44px; padding: 10px 12px; border: 1px solid #4c4e57; border-radius: 5px; text-decoration: none; color: #dbdee1; }
#resource-downloads a:hover { background: #35373c; border-color: #8884ee; }
#resource-downloads a:focus-visible { outline: 2px solid #a3a0ff; outline-offset: 2px; }
#resource-downloads a strong { font-size: .85rem; }
#resource-downloads a span { color: #b9b5ff; font-size: .72rem; }
#resource-downloads small { display: block; padding-top: 8px; }
#resource-downloads p, .resource-specs p, #resource-no-files { color: var(--muted); font-size: .8rem; }
.resource-specs dl { margin: 0; }
.resource-specs dt { margin-top: 12px; font-size: .7rem; color: var(--subtle); }
.resource-specs dd { margin: 3px 0 0; font-size: .85rem; }
#resource-related a { display: flex; min-height: 44px; }
.resource-noscript { margin: 20px 30px; }
.gallery-siblings { display: flex; gap: 10px; overflow-x: auto; padding: 14px 18px; }
.gallery-siblings a { flex: 0 0 64px; height: 64px; border-radius: 5px; }
.gallery-siblings img { width: 100%; height: 100%; object-fit: contain; border-radius: 5px; }
.gallery-siblings a[aria-current] { outline: 2px solid #a3a0ff; outline-offset: 2px; }
.gallery-siblings a:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.gallery-season-navigation { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border, #3f4147); }
.gallery-season-navigation a { display: flex; align-items: center; justify-content: center; flex: 1 1 64px; min-height: 44px; padding: 6px 10px; border-radius: 5px; color: var(--muted); font-size: .85rem; text-decoration: none; }
.gallery-season-navigation a:hover { background: #383a40; color: #fff; }
.gallery-season-navigation a[aria-current] { background: #35364b; color: #dddfff; box-shadow: inset 0 0 0 1px #8583d9; }
.gallery-season-navigation a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gallery-image-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; padding: 16px 20px; border-bottom: 1px solid #3f4147; }
.gallery-variant-category { grid-column: 1 / -1; color: #dbdee1; }
.gallery-image-versions > .eyebrow { grid-column: 1 / -1; margin: 0; }
.gallery-image-versions a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 6px; background: #232428; color: #b5bac1; font-size: .85rem; text-decoration: none; }
.gallery-image-versions img { flex: 0 0 48px; width: 48px; height: 56px; object-fit: contain; border-radius: 4px; }
.gallery-image-versions a[aria-current] { background: #35364b; color: #dddfff; box-shadow: inset 0 0 0 1px #8583d9; }
.gallery-image-versions a:hover { color: #fff; background: #383a40; }
.gallery-image-versions a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1100px) { .resource-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .gallery-collections { margin: 0 14px 16px; }
  .gallery-collections a { padding: 12px 10px; }
  .gallery-collections strong { font-size: .78rem; }
  .gallery-collections span { font-size: .65rem; }
  .production-collection, .resource-reader { padding: 0 14px 30px; }
  .production-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .production-filters label:first-child { grid-column: 1 / -1; }
  .production-grid { grid-template-columns: minmax(0, 1fr); }
  .resource-empty { padding: 24px 18px; }
}

.music-banner-toggle:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d9d7ef;
  cursor: pointer;
  font: inherit;
}

.music-banner-toggle:hover { background: rgba(121, 131, 245, .08); }
.music-banner-toggle:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -4px; }
.music-banner-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #77739a; border-radius: 50%; background: #2c2940; }
.music-banner-icon svg { width: 22px; height: 22px; fill: currentColor; }
.music-banner-label { font-size: .65rem; font-weight: 600; }
.is-playing .music-banner-icon { background: #7983f5; border-color: #7983f5; color: #1e1f22; }

.music-transport:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
}
.music-elapsed, .music-duration { flex: 0 0 4ch; }
.music-seek-track { position: relative; flex: 1; min-width: 40px; height: 44px; }
.music-seek-track::before, .music-seek-fill { position: absolute; top: 20px; left: 0; height: 4px; border-radius: 2px; pointer-events: none; }
.music-seek-track::before { content: ""; width: 100%; background: #464851; }
.music-seek-fill { width: 0; background: var(--accent-bright); }
.music-seek { position: relative; display: block; width: 100%; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.music-seek::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.music-seek::-moz-range-track { height: 4px; background: transparent; }
.music-seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--text); -webkit-appearance: none; }
.music-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }
.music-seek:disabled { opacity: .45; cursor: default; }
.music-seek:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 4px; }
.music-mute { display: grid; place-items: center; flex: 0 0 44px; height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.music-mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music-mute:hover { background: var(--surface-raised); color: var(--text); }
.music-mute:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 0; }

.music-player {
  display: block;
  width: 100%;
  min-width: 0;
  height: 54px;
  margin-top: 18px;
  color-scheme: dark;
}

.music-player:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.music-card .music-player-error {
  margin-top: 10px;
  color: #e9a3a3;
}

.music-downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-bright);
}

.music-download-label {
  margin-right: auto;
  color: var(--subtle);
  font-size: .7rem;
}

.music-downloads a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line-bright);
  border-radius: 5px;
  background: #232428;
  color: var(--text);
  font-size: .72rem;
  text-decoration: none;
}

.music-downloads small {
  color: var(--subtle);
  font-size: .6rem;
}

.music-downloads a:hover,
.music-downloads a:focus-visible {
  border-color: var(--accent);
  background: #313338;
  color: var(--accent);
}

.music-downloads a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.document-card {
  display: inline-block;
  width: 100%;
  margin: 0;
  vertical-align: top;
  overflow: hidden;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 7px;
  background: #2b2d31;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.document-card:hover {
  border-color: rgba(88, 101, 242, .32);
  background: #2e3035;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .18);
}

/*
 * Masonry cards stay transform-free while their nested media and controls
 * provide hover feedback. This keeps every measured grid item stable.
 */
.gallery-grid > *,
.music-card-grid > *,
.document-card-grid > *,
.character-grid > *,
.moment-card-grid > * {
  opacity: 1 !important;
  transform: none !important;
}

.document-card-link {
  display: block;
  padding: 22px;
  color: inherit;
}

.document-card-top,
.document-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.document-card-code {
  color: #737680;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  letter-spacing: .06em;
}

.document-card h2 {
  margin: 26px 0 10px;
  color: var(--text);
  font-size: 1.24rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.document-card p {
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.6;
}

.document-card-footer {
  margin-top: 24px;
  padding-top: 13px;
  border-top: 1px solid #3b3d43;
  color: var(--subtle);
  font-size: .58rem;
}

.document-card-arrow {
  color: #aeb4ff;
  font-size: 1rem;
  transition: transform .2s ease;
}

.document-card:hover .document-card-arrow {
  transform: translateX(3px);
}

.document-card-loading {
  padding: 32px 22px;
  color: var(--subtle);
  font-size: .72rem;
}

.chapter-card:nth-child(3n + 1) {
  border-top: 2px solid rgba(88, 101, 242, .5);
}

.chapter-card:nth-child(3n + 2) {
  border-top: 2px solid rgba(240, 178, 50, .45);
}

.chapter-card:nth-child(3n) {
  border-top: 2px solid rgba(171, 111, 232, .45);
}

.story-conflict-lens {
  margin: 0 30px 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #26272b;
}

.story-conflict-lens > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #3b3d43;
  background: #2b2d31;
}

.story-conflict-lens .eyebrow {
  margin: 0 0 5px;
  font-size: .56rem;
}

.story-conflict-lens h2 {
  margin: 0;
  font-size: 1rem;
}

.story-conflict-lens > header > span {
  padding: 4px 7px;
  border: 1px solid rgba(171, 111, 232, .28);
  border-radius: 4px;
  color: #c9a7ef;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.conflict-layer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  padding: 18px;
}

.conflict-layer {
  min-width: 0;
  padding: 16px;
  border: 1px solid #3b3d43;
  border-top-width: 3px;
  border-radius: 6px;
  background: #2b2d31;
}

.conflict-layer-surface {
  border-top-color: #5865f2;
}

.conflict-layer-hidden {
  border-top-color: #ab6fe8;
}

.conflict-layer small {
  color: #9296a3;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.conflict-layer h3 {
  margin: 6px 0 8px;
  font-size: .88rem;
}

.conflict-layer p {
  margin: 0;
  color: var(--subtle);
  font-size: .67rem;
  line-height: 1.52;
}

.conflict-layer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.conflict-layer li {
  padding: 4px 7px;
  border-radius: 3px;
  background: #35373c;
  color: #c8cad0;
  font-size: .56rem;
  font-weight: 700;
}

.conflict-mask {
  display: grid;
  align-content: center;
  justify-items: center;
  color: #747985;
}

.conflict-mask span {
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.conflict-mask i {
  margin-top: 7px;
  color: #8b95ff;
  font-size: .82rem;
  font-style: normal;
}

.conflict-consequence {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 18px 18px;
}

.gradual-reveal {
  display: grid;
  grid-template-columns: minmax(210px, .75fr) minmax(280px, 1.35fr);
  gap: 20px 34px;
  margin: 22px 28px 0;
  padding: 22px 24px;
  border: 1px solid #3b3d43;
  border-left: 3px solid #5865f2;
  border-radius: 6px;
  background: #222327;
}

.gradual-reveal span,
.gradual-reveal b {
  color: #aeb4ff;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.gradual-reveal h3 {
  margin: 7px 0 0;
  color: #fff;
  font-size: 1rem;
}

.gradual-reveal > p {
  margin: 0;
  color: #b5b8c1;
  font-size: .72rem;
  line-height: 1.65;
}

.gradual-reveal ol {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid #3b3d43;
  list-style: none;
}

.gradual-reveal li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  padding: 15px 14px 0 0;
}

.gradual-reveal li + li {
  padding-left: 14px;
  border-left: 1px solid #3b3d43;
}

.gradual-reveal li span {
  color: #b5b8c1;
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: 0;
}

.gradual-reveal aside {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid #3b3d43;
}

.gradual-reveal aside p {
  margin: 0;
  color: #b5b8c1;
  font-size: .66rem;
  line-height: 1.6;
}

.conflict-consequence > span {
  color: #9296a3;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.conflict-consequence ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 5px;
  list-style: none;
}

.conflict-consequence li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  color: #c8cad0;
  font-size: .58rem;
}

.conflict-consequence li + li {
  border-left: 1px solid #3b3d43;
}

.conflict-consequence b {
  color: #8b95ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .5rem;
}

.story-timeline {
  margin: 0 30px 22px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #26272b;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .13);
}

.story-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid #3b3d43;
  background: #2b2d31;
}

.story-timeline-header .eyebrow {
  margin: 0 0 5px;
  font-size: .56rem;
}

.story-timeline-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.timeline-legend {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeline-mock {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(240, 178, 50, .25);
  border-radius: 4px;
  background: rgba(240, 178, 50, .07);
  color: #d8b56b;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.timeline-scroll-cue {
  color: #aeb1ba;
  font-size: .58rem;
  font-weight: 700;
  white-space: nowrap;
}

.timeline-scroll-cue span {
  display: inline-block;
  margin-left: 3px;
  color: #8b95ff;
}

.timeline-track {
  position: relative;
  display: grid;
  grid-auto-columns: 220px;
  grid-auto-flow: column;
  gap: 0;
  margin: 0;
  padding: 24px 18px 22px;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-inline: contain;
  scroll-padding-left: 18px;
  scroll-snap-type: x proximity;
  scrollbar-color: #4e5058 transparent;
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.timeline-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.timeline-track:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.timeline-track::-webkit-scrollbar {
  height: 10px;
}

.timeline-track::-webkit-scrollbar-track {
  background: #202125;
}

.timeline-track::-webkit-scrollbar-thumb {
  border: 3px solid #202125;
  border-radius: 99px;
  background: #4e5058;
}

.timeline-track li {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 10px;
  scroll-snap-align: start;
}

.timeline-track li:not(:last-child)::after {
  position: absolute;
  z-index: -1;
  top: 16px;
  left: 44px;
  width: calc(100% - 10px);
  height: 2px;
  background: #404249;
  content: "";
}

.timeline-marker {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  place-items: center;
  border: 4px solid #26272b;
  border-radius: 50%;
  background: #5865f2;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .35);
}

.timeline-track li.is-chapter-active .timeline-marker {
  background: #23a55a;
  box-shadow: 0 0 0 1px rgba(35, 165, 90, .5), 0 0 16px rgba(35, 165, 90, .28);
}

.timeline-track li.is-chapter-active .timeline-marker::after {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(35, 165, 90, .75);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: chapter-timeline-pulse 1.8s ease-out infinite;
}

.timeline-track li.is-chapter-active h3 {
  color: #9fe6b7;
}

@keyframes chapter-timeline-pulse {
  0% { opacity: .85; transform: scale(.72); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}

.timeline-track small {
  color: #8d91a0;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.timeline-track h3 {
  margin: 5px 0 7px;
  color: var(--text);
  font-size: .82rem;
}

.timeline-track p {
  margin: 0;
  color: var(--subtle);
  font-size: .65rem;
  line-height: 1.48;
}

.chapter-character-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 18px;
}

.chapter-card-timeline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 13px 0 0;
  color: #aeb1ba;
  font-size: .58rem;
  font-weight: 700;
}

.chapter-card-timeline > span:first-child {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #23a55a;
  box-shadow: 0 0 0 3px rgba(35, 165, 90, .1);
}

.chapter-character-list span {
  padding: 4px 7px;
  border: 1px solid #404249;
  border-radius: 4px;
  background: #313338;
  color: #c7cbd1;
  font-size: .58rem;
  font-weight: 700;
}

.chapter-reader-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: min(900px, 100%);
  margin: 0 auto 14px;
}

.chapter-reader-header > div {
  max-width: 700px;
}

.chapter-reader-header p {
  margin: 8px 0 0;
  color: var(--subtle);
  font-size: .72rem;
  line-height: 1.55;
}

.chapter-reader-header .chapter-character-list {
  margin-top: 10px;
}

.chapter-preface {
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto 14px;
  overflow: hidden;
  border: 1px solid #42444c;
  border-radius: 7px;
  background: #26272b;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .13);
}

.chapter-preface::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.chapter-preface-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid #3b3d43;
  background: #313338;
}

.story-reader-open .story-timeline {
  margin-top: 22px;
}

/* Keep the first visible child's margin inside the pane when the feed is hidden. */
.story-reader-open .docs-main-pane {
  display: flow-root;
}

.writer-notice {
  margin-block: 1.5em;
  padding: 16px 18px;
  border: 1px solid #75613b;
  border-left: 3px solid #d8b66a;
  border-radius: 6px;
  background: #302d26;
  color: #e2d6bc;
  font-style: normal;
}

.writer-notice > strong {
  display: block;
  margin-bottom: 6px;
  color: #e9c77e;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chapter-preface-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 16px;
  color: #b1b4bc;
  font-size: .52rem;
}

.chapter-preface-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.chapter-preface-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7580f0;
}

.chapter-preface-legend .is-inferred i {
  background: #bd8adb;
}

.chapter-preface .eyebrow {
  margin: 0 0 5px;
  font-size: .56rem;
}

.chapter-preface h2 {
  margin: 0;
  color: var(--text);
  font-size: .95rem;
}

.chapter-preface table {
  width: 100%;
  border-collapse: collapse;
}

.chapter-preface th,
.chapter-preface td {
  padding: 12px 18px;
  border-bottom: 1px solid #3b3d43;
  text-align: left;
}

.chapter-preface tr:last-child th,
.chapter-preface tr:last-child td {
  border-bottom: 0;
}

.chapter-preface thead th {
  background: #202125;
  color: var(--subtle);
  font-size: .55rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chapter-preface tbody th {
  width: 50px;
  border-right: 1px solid #3b3d43;
  background: rgba(88, 101, 242, .07);
  color: #aeb4ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6rem;
}

.chapter-preface td {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.chapter-preface tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .018);
}

.chapter-preface tbody tr.is-inferred th {
  background: rgba(180, 107, 214, .11);
  color: #d5a9ed;
}

.chapter-preface tbody tr.is-inferred td,
.chapter-preface tbody tr.is-inferred:nth-child(even) td {
  background: rgba(180, 107, 214, .055);
}

@media (max-width: 620px) {
  .chapter-preface-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .chapter-preface-legend {
    justify-content: flex-start;
  }
}

.chapter-body blockquote:first-of-type {
  border-left-color: #f0b232;
  background: rgba(240, 178, 50, .06);
}

.timeline-moment-anchor {
  display: inline-flex;
  margin-top: 11px;
  padding: 5px 7px;
  border: 1px solid rgba(139, 149, 255, .28);
  border-radius: 4px;
  background: rgba(88, 101, 242, .08);
  color: #b8beff;
  font-size: .54rem;
  font-weight: 750;
}

.timeline-moment-anchor:hover {
  border-color: rgba(139, 149, 255, .55);
  background: rgba(88, 101, 242, .14);
  color: #fff;
}

.timeline-track li.is-moment-context .timeline-marker {
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .55), 0 0 16px rgba(139, 92, 246, .24);
}

.timeline-track li.is-moment-context h3 {
  color: #c9b8ff;
}

/* Scene-led Moments archive */
.moments-heading {
  padding-bottom: 24px;
}

.moment-system,
.moment-phase-map,
.moment-library,
.moment-reader {
  margin-inline: 30px;
}

.moment-system {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #26272b;
}

.moment-system > header,
.moment-library-header,
.moment-continuity > header,
.moment-connections > header {
  padding: 16px 18px;
  border-bottom: 1px solid #3b3d43;
  background: #2b2d31;
}

.moment-system .eyebrow,
.moment-library-header .eyebrow,
.moment-continuity .eyebrow,
.moment-connections .eyebrow {
  margin: 0 0 5px;
  font-size: .54rem;
}

.moment-system h2,
.moment-library-header h2,
.moment-continuity h2,
.moment-connections h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: 1rem;
}

.moment-system-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
}

.moment-system-flow > i {
  align-self: center;
  color: #777dff;
  font-style: normal;
  font-size: 1rem;
}

.moment-system-flow article {
  display: grid;
  min-width: 0;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
}

.moment-system-flow article.is-core {
  background: rgba(88, 101, 242, .08);
}

.moment-system-flow article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #454852;
  border-radius: 4px;
  color: #9298ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .53rem;
}

.moment-system-flow small,
.moment-placement small,
.moment-connection-card small {
  color: #8b95ff;
  font-size: .51rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.moment-system-flow h3 {
  margin: 5px 0 6px;
  color: #e8e9ed;
  font-size: .78rem;
}

.moment-system-flow p {
  margin: 0;
  color: var(--subtle);
  font-size: .63rem;
  line-height: 1.5;
}

.moment-phase-map {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #26272b;
}

.moment-phase-track {
  display: grid;
  grid-auto-columns: 180px;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #4e5058 transparent;
  scrollbar-width: thin;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.moment-phase-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.moment-phase-track::-webkit-scrollbar {
  height: 10px;
}

.moment-phase-track::-webkit-scrollbar-track {
  background: #202125;
}

.moment-phase-track::-webkit-scrollbar-thumb {
  border: 3px solid #202125;
  border-radius: 99px;
  background: #4e5058;
}

.moment-phase-track li {
  min-width: 0;
  border-right: 1px solid #3b3d43;
  scroll-snap-align: start;
}

.moment-phase-track button {
  width: 100%;
  min-height: 126px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 16px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.moment-phase-track button:hover,
.moment-phase-track button:focus-visible,
.moment-phase-track li.is-filter-active button {
  background: #303238;
}

.moment-phase-track button:focus-visible {
  outline: 2px solid #8b95ff;
  outline-offset: -2px;
}

.moment-phase-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #4a4d56;
  border-radius: 50%;
  color: #9499a6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .5rem;
}

.moment-phase-track li.has-moments .moment-phase-number,
.moment-phase-track li.is-filter-active .moment-phase-number {
  border-color: rgba(139, 149, 255, .5);
  color: #b8beff;
}

.moment-phase-track small {
  color: #7d818b;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.moment-phase-track h3 {
  margin: 5px 0 8px;
  color: #e2e3e7;
  font-size: .71rem;
}

.moment-phase-track p {
  margin: 0;
  color: #9ca0aa;
  font-size: .56rem;
  line-height: 1.4;
}

.moment-library {
  padding: 24px 0 50px;
}

/* Compact phase cards: one Arc legend, aligned labels, titles, and counts. */
.moment-phase-track.arc-timeline {
  grid-auto-columns: 220px;
  gap: 10px;
  padding: 14px 18px 16px;
  scroll-padding-inline: 18px;
}
.moment-phase-track.arc-timeline > li {
  overflow: hidden;
  border: 1px solid #404249;
  border-top: 3px solid var(--arc-color);
  border-radius: 6px;
  background: #232428;
}
.moment-phase-track.arc-timeline .timeline-arc-band { display: none; }
.moment-phase-track.arc-timeline button {
  display: flex;
  flex-direction: column;
  gap: 12px;
    min-height: 160px;
  height: 100%;
  padding: 14px;
}
.moment-phase-heading { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.moment-phase-heading .moment-phase-number { flex: 0 0 28px; }
.moment-phase-heading small { font-size: .56rem; line-height: 1.5; color: #a4a8b2; }
.moment-phase-copy { display: flex; flex: 1; flex-direction: column; width: 100%; gap: 12px; }
.moment-phase-track .moment-phase-copy h3 { margin: 0; font-size: .82rem; line-height: 1.45; }
.moment-phase-track .moment-phase-copy p { margin-top: auto; font-size: .65rem; }
.moment-phase-track.arc-timeline > li.is-filter-active { border-color: #9297ff; }

.moment-library-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-inline: 0;
  border: 0;
  background: transparent;
}

.moment-library-header > span {
  color: #8f939d;
  font-size: .6rem;
}

.moment-library-header > span strong {
  color: #d7d9de;
}

.moment-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(130px, .65fr));
  align-items: end;
  gap: 10px;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid #3b3d43;
  border-radius: 7px;
  background: #2b2d31;
}

.moment-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.moment-toolbar label > span {
  display: block;
  color: #8d91a0;
  font-size: .51rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.moment-toolbar input,
.moment-toolbar select {
  display: block;
  width: 100%;
  height: 38px;
  min-width: 0;
  margin: 0;
  border: 1px solid #404249;
  border-radius: 4px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: .65rem;
}

.moment-toolbar input {
  -webkit-appearance: none;
  appearance: none;
  padding: 0 11px;
}

.moment-toolbar select {
  padding: 0 28px 0 9px;
}

.moment-toolbar input:focus,
.moment-toolbar select:focus {
  outline: 2px solid rgba(88, 101, 242, .7);
  outline-offset: 1px;
}

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

.moment-card {
  display: inline-block;
  width: 100%;
  margin: 0;
  vertical-align: top;
  overflow: hidden;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 7px;
  background: #2b2d31;
  transition: border-color .18s ease, background .18s ease;
}

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

.moment-card:hover {
  border-color: rgba(139, 149, 255, .4);
  background: #2f3136;
}

.moment-card-link {
  display: block;
  padding: 19px;
  color: inherit;
}

.moment-card-top,
.moment-card-footer,
.moment-card-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.moment-code {
  color: #9fa7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  letter-spacing: .08em;
}

.moment-status {
  padding: 3px 6px;
  border: 1px solid rgba(240, 178, 50, .24);
  border-radius: 3px;
  color: #d8b56b;
  font-size: .49rem;
  font-weight: 800;
  text-transform: uppercase;
}

.moment-card h3 {
  margin: 23px 0 9px;
  color: #f2f3f5;
  font-size: 1.08rem;
}

.moment-card-summary {
  margin: 0;
  color: #b5bac1;
  font-size: .71rem;
  line-height: 1.58;
}

.moment-card-position {
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid #3b3d43;
  border-bottom: 1px solid #3b3d43;
}

.moment-card-position > span {
  color: #c7caff;
  font-size: .61rem;
  font-weight: 750;
}

.moment-card-position small {
  color: #828690;
  font-size: .51rem;
}

.moment-card-meta {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  margin: 10px 0 0;
}

.moment-card-meta dt,
.moment-card-meta dd {
  margin: 0;
  padding: 5px 0;
  font-size: .59rem;
}

.moment-card-meta dt {
  color: #7e828c;
  font-weight: 750;
}

.moment-card-meta dd {
  color: #c0c3c9;
}

.moment-card-people,
.moment-reader-characters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px;
}

.moment-card-people span,
.moment-reader-characters a,
.moment-reader-characters span {
  padding: 4px 7px;
  border: 1px solid #444751;
  border-radius: 4px;
  background: #313338;
  color: #d0d2d7;
  font-size: .55rem;
  font-weight: 750;
}

.moment-reader-characters a:hover {
  border-color: #777dff;
  color: #fff;
}

.moment-card-footer {
  margin-top: 16px;
  padding-top: 11px;
  border-top: 1px solid #3b3d43;
  color: #8f939d;
  font-size: .54rem;
}

.moment-card-footer span:last-child {
  color: #b8beff;
  font-weight: 750;
}

.moment-empty {
  margin-top: 14px;
}

.moment-reader[hidden],
#moments-catalog-view[hidden],
#moment-error[hidden] {
  display: none;
}

.moment-reader {
  padding: 24px 0 50px;
}

.moment-reader .document-breadcrumbs {
  width: 100%;
  margin: 0 0 14px;
}

.moment-reader-hero {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid #3b3d43;
  border-radius: 8px;
  background: #2b2d31;
}

.moment-reader-hero::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #777dff;
  content: "";
}

.moment-reader-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 30px;
  color: #8d91a0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.moment-reader-code span:first-child {
  color: #aeb4ff;
}

.moment-reader-hero .eyebrow {
  margin: 0 0 7px;
  font-size: .58rem;
}

.moment-reader-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #f2f3f5;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.moment-reader-hero > p:not(.eyebrow) {
  max-width: 740px;
  margin: 18px 0 0;
  color: #b5bac1;
  font-size: .82rem;
  line-height: 1.65;
}

.moment-placement,
.moment-continuity,
.moment-connections {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 8px;
  background: #292a2f;
}

.moment-placement > header {
  padding: 15px 18px;
  border-bottom: 1px solid #3b3d43;
}

.moment-placement > header .eyebrow {
  margin: 0 0 5px;
  font-size: .53rem;
}

.moment-placement > header h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: .95rem;
}

.moment-placement > div,
.moment-continuity > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moment-placement > div > *,
.moment-continuity > div > article {
  min-width: 0;
  padding: 18px;
  border-right: 1px solid #3b3d43;
}

.moment-placement > div > *:last-child,
.moment-continuity > div > article:last-child {
  border-right: 0;
}

.moment-placement a {
  color: inherit;
}

.moment-placement strong,
.moment-placement span {
  display: block;
}

.moment-placement strong {
  margin: 7px 0;
  color: #e3e5e8;
  font-size: .77rem;
}

.moment-placement span {
  color: #8f939d;
  font-size: .58rem;
  line-height: 1.45;
}

.moment-placement a span {
  color: #aeb4ff;
}

.moment-reader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.moment-fact-panel {
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 8px;
  background: #2b2d31;
}

.moment-fact-panel > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #3b3d43;
}

.moment-fact-panel > header > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #4a4d56;
  border-radius: 4px;
  color: #aeb4ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .51rem;
}

.moment-fact-panel .eyebrow {
  margin: 0 0 4px;
  font-size: .51rem;
}

.moment-fact-panel h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: .9rem;
}

.moment-fact-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 11px 18px 6px;
  color: #9ca0a9;
  font-size: .49rem;
}

.moment-fact-legend[hidden] { display: none; }
.moment-fact-panel li.is-continuity .moment-fact-number { color: var(--muted); }

.moment-fact-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.moment-fact-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7580f0;
}

.moment-fact-legend .is-inferred i {
  background: #bd8adb;
}

.moment-fact-panel ol {
  margin: 0;
  padding: 5px 18px 15px;
  list-style: none;
}

.moment-fact-panel li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #3b3d43;
}

.moment-fact-panel li:last-child {
  border-bottom: 0;
}

.moment-fact-panel .moment-fact-number {
  color: #7f85e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .5rem;
}

.moment-fact-panel li.is-inferred {
  margin-inline: -18px;
  padding-inline: 18px;
  background: rgba(180, 107, 214, .06);
}

.moment-fact-panel li.is-inferred .moment-fact-number {
  color: #bd8adb;
}

.moment-fact-panel li p {
  max-width: 1180px;
  margin: 0;
  color: #c0c3c9;
  font-size: .67rem;
  line-height: 1.52;
}

.moment-open-panel > header > span {
  border-color: rgba(240, 178, 50, .32);
  color: #d8b56b;
}

.moment-open-panel li > span {
  color: #c7a45e;
}

.moment-continuity > div > article.is-scene {
  background: rgba(88, 101, 242, .08);
}

.moment-continuity article > span {
  display: block;
  margin-bottom: 8px;
  color: #8b95ff;
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.moment-continuity article p {
  margin: 0;
  color: #bdc0c7;
  font-size: .67rem;
  line-height: 1.55;
}

#moment-connection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: #3b3d43;
}

.moment-connection-card {
  display: block;
  min-width: 0;
  padding: 18px;
  background: #292a2f;
  color: inherit;
}

a.moment-connection-card:hover {
  background: #303238;
}

.moment-connection-card strong,
.moment-connection-card p,
.moment-connection-card > span {
  display: block;
}

.moment-connection-card strong {
  margin: 7px 0;
  color: #e3e5e8;
  font-size: .75rem;
}

.moment-connection-card p {
  margin: 0;
  color: #999ea8;
  font-size: .61rem;
  line-height: 1.48;
}

.moment-connection-card > span {
  margin-top: 12px;
  color: #aeb4ff;
  font-size: .55rem;
  font-weight: 750;
}

.moment-neighbors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.moment-neighbors a {
  padding: 14px 16px;
  border: 1px solid #3b3d43;
  border-radius: 6px;
  background: #292a2f;
}

.moment-neighbors a:last-child {
  text-align: right;
}

.moment-neighbors small,
.moment-neighbors strong {
  display: block;
}

.moment-neighbors small {
  margin-bottom: 5px;
  color: #81858f;
  font-size: .5rem;
  text-transform: uppercase;
}

.moment-neighbors strong {
  color: #cdd0d6;
  font-size: .65rem;
}

.docs-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin: 0 30px 18px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 7px;
  background: #2b2d31;
}

.docs-select {
  width: 100%;
}

.document-summary {
  min-width: 0;
}

.doc-topic {
  display: inline-block;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(88, 101, 242, .14);
  color: #aeb4ff;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.document-summary p {
  margin: 5px 0 0;
  color: var(--subtle);
  font-size: .67rem;
}

.source-link {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 11px;
  border-radius: 4px;
  background: #35373c;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}

.source-link:hover {
  background: #404249;
  color: var(--text);
}

.document-reader-view {
  padding: 0 30px 50px;
}

.record-version-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(900px, 100%);
  margin: 0 auto 14px;
  padding: 12px 14px;
  border: 1px solid #3b3d43;
  border-radius: 7px;
  background: #26272b;
}

.record-version-switcher[hidden] {
  display: none;
}

.moment-reader .record-version-switcher {
  width: 100%;
}

.record-version-switcher > div:first-child {
  display: grid;
  gap: 3px;
}

.record-version-switcher small {
  color: #9297a1;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.record-version-switcher strong {
  color: #f2f3f5;
  font-size: .68rem;
}

.record-version-switcher > div:last-child:not(.version-navigation) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.record-version-switcher a {
  padding: 7px 11px;
  border: 1px solid #404249;
  border-radius: 5px;
  background: #1e1f22;
  color: #b5bac1;
  font-size: .58rem;
  font-weight: 750;
  text-decoration: none;
}

.record-version-switcher a:hover,
.record-version-switcher a:focus-visible {
  border-color: #6973dc;
  background: #303239;
  color: #f2f3f5;
}

.record-version-switcher a.is-active {
  border-color: #7780ed;
  background: #5865f2;
  color: #ffffff;
}

@media (max-width: 620px) {
  .record-version-switcher {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .record-version-switcher > div:last-child:not(.version-navigation) {
    justify-content: flex-start;
    width: 100%;
  }

  .record-version-switcher a {
    flex: 1 1 0;
    text-align: center;
  }
}

.record-version-switcher .version-navigation {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto auto;
  gap: 6px;
  min-width: 0;
  width: min(100%, 440px);
}
.version-navigation select, .version-navigation [aria-disabled] {
  min-width: 0;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid #404249;
  border-radius: 5px;
  background: #1e1f22;
  color: #dbdee1;
  font: inherit;
  font-size: .58rem;
}
.version-navigation select { width: 100%; cursor: pointer; color-scheme: dark; }
.version-navigation [aria-disabled] { opacity: .45; }
.record-version-switcher .version-navigation a, .version-navigation [aria-disabled] {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
}
.version-navigation select:focus-visible { outline: 2px solid #9498ff; outline-offset: 2px; }
@media (max-width: 620px) {
  .record-version-switcher .version-navigation { width: 100%; }
}
@media (max-width: 380px) {
  .record-version-switcher .version-navigation { grid-template-columns: 1fr 1fr 1fr; }
  .version-navigation select { grid-column: 1 / -1; grid-row: 1; }
}

.document-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 22px 0 16px;
  color: var(--subtle);
  font-size: .68rem;
}

.document-breadcrumbs a {
  color: #aeb4ff;
}

.document-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-reader-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  width: min(900px, 100%);
  margin: 0 auto 14px;
}

.document-reader-header .document-summary {
  max-width: 680px;
}

.document-shell {
  width: min(900px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #2b2d31;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
}

.document-meta {
  padding: 11px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .24);
  color: var(--subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .59rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.markdown-body {
  padding: clamp(28px, 6vw, 64px);
  color: #dbdee1;
}

.markdown-body h1 {
  max-width: 700px;
  margin: 0 0 38px;
  color: var(--text);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.markdown-body h2,
.markdown-body h3 {
  margin: 32px 0 12px;
  scroll-margin-top: 82px;
  color: var(--text);
  line-height: 1.2;
}

.markdown-body p {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.75;
}

.markdown-body .dialogue-line {
  position: relative;
  min-height: 52px;
  margin: 0 0 7px;
  padding: 13px 18px 13px 122px;
  border-left: 3px solid #4e5058;
  border-radius: 0 5px 5px 0;
  background: #313338;
  font-size: .88rem;
  line-height: 1.58;
}

.markdown-body .dialogue-line strong:first-child {
  position: absolute;
  top: 14px;
  left: 16px;
  color: var(--muted);
  font-size: .69rem;
  letter-spacing: .02em;
}

.markdown-body .speaker-fionn {
  border-left-color: var(--accent);
  background: rgba(88, 101, 242, .07);
}

.markdown-body .speaker-fionn strong:first-child {
  color: #aeb4ff;
}

.markdown-body .speaker-journalist {
  border-left-color: #5c6069;
}

.markdown-body blockquote {
  margin: 24px 0;
  padding: 12px 18px;
  border-left: 3px solid var(--accent);
  background: #313338;
  color: var(--muted);
}

.markdown-body.holumn-testimony-document {
  --testimony-border: #41434a;
  --testimony-panel: #24252a;
}

.markdown-body.holumn-testimony-document > h1 {
  max-width: 820px;
}

.markdown-body.holumn-testimony-document > h2 {
  margin: 42px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--testimony-border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #202125;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: .01em;
}

.markdown-body.holumn-testimony-document > h2 ~ p,
.markdown-body.holumn-testimony-document > h2 ~ h3,
.markdown-body.holumn-testimony-document > h2 ~ blockquote {
  border-inline: 1px solid var(--testimony-border);
  background: var(--testimony-panel);
}

.markdown-body.holumn-testimony-document > h2 ~ p {
  margin: 0;
  padding: 14px 20px;
}

.markdown-body.holumn-testimony-document > h2 ~ h3 {
  margin: 0;
  padding: 24px 20px 8px;
  color: #aeb4ff;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.markdown-body.holumn-testimony-document > h2 ~ blockquote {
  margin: 0;
  padding: 22px 28px;
  border-left: 3px solid #8d92ff;
  color: #eef0f3;
  font-size: 1rem;
  line-height: 1.75;
}

.markdown-body.holumn-testimony-document > h2 ~ h2 {
  border-inline: 1px solid var(--testimony-border);
}

.markdown-body.holumn-testimony-document > h2 ~ h2::before {
  content: '';
}

.markdown-body.holumn-testimony-document > h2 ~ h2 + p,
.markdown-body.holumn-testimony-document > h2 ~ h2 + blockquote {
  padding-top: 20px;
}

.markdown-body.holumn-testimony-document > h2 ~ p:has(+ h2),
.markdown-body.holumn-testimony-document > h2 ~ blockquote:has(+ h2) {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--testimony-border);
  border-radius: 0 0 8px 8px;
}

.markdown-body.holumn-testimony-document > h2:last-of-type ~ p:last-child {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--testimony-border);
  border-radius: 0 0 8px 8px;
}

.markdown-body.character-intimacy-document {
  --intimacy-border: #3f4147;
  --intimacy-panel: #25262b;
  --intimacy-panel-raised: #2b2d31;
  background: #2b2d31;
}

.character-intimacy-document > h1 {
  position: relative;
  max-width: 820px;
  margin-bottom: 24px;
  padding-top: 32px;
}

.character-intimacy-document > h1::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "WRITER'S RELATIONSHIP ARCHIVE";
  color: #aeb4ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .14em;
}

.character-intimacy-document .intimacy-lede {
  max-width: 850px;
  margin-bottom: 34px;
  color: #b5bac1;
  font-size: clamp(.94rem, 1.8vw, 1.08rem);
  line-height: 1.75;
}

.intimacy-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--intimacy-border);
  border-radius: 8px;
  background: var(--intimacy-border);
}

.character-intimacy-document .intimacy-guide h2 {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 22px;
  background: #1e1f22;
  font-size: 1.1rem;
}

.character-intimacy-document .intimacy-guide p {
  min-height: 128px;
  margin: 0;
  padding: 20px 22px;
  background: var(--intimacy-panel);
  color: #b5bac1;
  font-size: .78rem;
  line-height: 1.62;
}

.character-intimacy-document .intimacy-guide p strong {
  display: block;
  margin-bottom: 8px;
  color: #dbdee1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.character-intimacy-document .intimacy-guide p:last-child {
  grid-column: 1 / -1;
  min-height: 0;
  border-left: 3px solid #8790ff;
  background: #232429;
}

.intimacy-character-index {
  margin: 0 0 34px;
  overflow: hidden;
  border: 1px solid var(--intimacy-border);
  border-radius: 8px;
  background: #202125;
}

.intimacy-character-index > span {
  display: block;
  padding: 11px 14px;
  border-bottom: 1px solid var(--intimacy-border);
  color: #949ba4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.intimacy-character-index > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.character-intimacy-document .intimacy-character-index a {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-right: 1px solid #34363c;
  border-bottom: 1px solid #34363c;
  color: #b5bac1;
  text-decoration: none;
  transition: color .16s ease, background .16s ease;
}

.character-intimacy-document .intimacy-character-index a:hover,
.character-intimacy-document .intimacy-character-index a:focus-visible {
  background: #313338;
  color: #d7daff;
}

.intimacy-character-index a small {
  flex: 0 0 auto;
  color: #6f7480;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
}

.intimacy-character-index a span {
  overflow: hidden;
  font-size: .68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intimacy-character {
  margin: 0 0 22px;
  overflow: hidden;
  border: 1px solid #18191d;
  border-top: 3px solid var(--intimacy-accent);
  border-radius: 8px;
  background: #202125;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  scroll-margin-top: 82px;
}

.intimacy-character-header {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--intimacy-border);
  background: #25262b;
}

.intimacy-character-code {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--intimacy-border);
  color: var(--intimacy-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  font-weight: 750;
}

.intimacy-character-header > div {
  padding: 20px 22px 18px;
}

.character-intimacy-document .intimacy-character-header h2 {
  margin: 0 0 8px;
  color: #f2f3f5;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  letter-spacing: -.025em;
}

.character-intimacy-document .intimacy-character-basis {
  display: inline-flex;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #444750;
  border-radius: 4px;
  color: #aeb4bd;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  line-height: 1.25;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.intimacy-character-basis strong {
  font-weight: 700;
}

.intimacy-lens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--intimacy-border);
}

.intimacy-lens {
  position: relative;
  min-width: 0;
  padding: 24px 24px 22px;
  background: var(--intimacy-panel-raised);
}

.intimacy-lens::before {
  position: absolute;
  top: 25px;
  right: 22px;
  content: attr(data-lens);
  color: #676b75;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
}

.character-intimacy-document .intimacy-lens h3 {
  max-width: calc(100% - 46px);
  margin: 0 0 14px;
  color: #e3e5e8;
  font-size: .92rem;
  letter-spacing: -.01em;
}

.character-intimacy-document .intimacy-lens p {
  margin: 0 0 12px;
  color: #b5bac1;
  font-size: .8rem;
  line-height: 1.7;
}

.character-intimacy-document .intimacy-lens p:last-child {
  margin-bottom: 0;
}

.intimacy-lens.is-partner,
.intimacy-lens.is-guardrail {
  grid-column: 1 / -1;
}

.intimacy-lens.is-partner {
  padding-left: 28px;
  border-left: 3px solid var(--intimacy-accent);
  background: #27282e;
}

.character-intimacy-document .intimacy-lens.is-partner h3,
.character-intimacy-document .intimacy-lens.is-guardrail h3 {
  color: var(--intimacy-accent);
}

.intimacy-lens.is-guardrail {
  display: grid;
  grid-template-columns: minmax(140px, .28fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  background: #1f2024;
}

.character-intimacy-document .intimacy-lens.is-guardrail h3 {
  max-width: none;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .67rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.character-intimacy-document .intimacy-lens.is-guardrail p {
  color: #aeb1b8;
  font-size: .76rem;
}

.sexual-tension-module {
  --tension-accent: #cf819b;
  border-top: 1px solid #41434a;
  border-bottom: 1px solid #41434a;
  background: #232429;
}

.sexual-tension-module > header {
  display: grid;
  grid-template-columns: 104px minmax(180px, .42fr) minmax(280px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 15px 20px;
  border-bottom: 1px solid #3b3d43;
  background: #202125;
}

.sexual-tension-module > header > span {
  color: var(--tension-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sexual-tension-module > header h3 {
  margin: 0;
  color: #f2f3f5;
  font-size: .88rem;
}

.sexual-tension-module > header p {
  margin: 0;
  color: #90959f;
  font-size: .64rem;
  line-height: 1.45;
}

.sexual-tension-module > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  padding: 10px;
}

.sexual-tension-entry,
.sexual-tension-empty {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #3d3f46;
  border-left: 3px solid var(--tension-accent);
  border-radius: 6px;
  background: #292a2f;
  color: inherit;
  text-decoration: none;
}

.sexual-tension-entry {
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.sexual-tension-entry:hover,
.sexual-tension-entry:focus-within {
  border-color: #7c5261;
  border-left-color: #e49ab2;
  background: #303137;
  transform: translateY(-1px);
}

.sexual-tension-entry > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}

.sexual-tension-entry > div span {
  padding: 3px 6px;
  border: 1px solid #494b53;
  border-radius: 3px;
  color: #a9adb6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .48rem;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.sexual-tension-entry h4,
.sexual-tension-empty strong {
  display: block;
  margin: 0 0 7px;
  color: #f2f3f5;
  font-size: .78rem;
}

.sexual-tension-entry h4 a,
.sexual-tension-entry h4 a:visited {
  color: inherit;
  text-decoration: none;
}

.sexual-tension-entry h4 a:hover,
.sexual-tension-entry h4 a:focus-visible {
  color: #e49ab2;
  text-decoration: none;
}

.sexual-tension-entry p,
.sexual-tension-empty p {
  margin: 0;
  color: #b8bbc2;
  font-size: .67rem;
  line-height: 1.58;
}

.sexual-tension-entry > small {
  display: block;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #3d3f46;
  color: #989ca6;
  font-size: .62rem;
  line-height: 1.58;
}

.sexual-tension-empty {
  border-left-color: #666a74;
}

.character-intimacy-document .sexual-tension-module {
  border-top: 0;
}

#character-sexual-tension {
  border-bottom: 1px solid #3a3c42;
}

#character-sexual-tension .sexual-tension-module {
  border: 0;
}

.intimacy-principles {
  margin-top: 44px;
  overflow: hidden;
  border: 1px solid var(--intimacy-border);
  border-radius: 8px;
  background: #202125;
}

.character-intimacy-document .intimacy-principles h2 {
  margin: 0;
  padding: 24px 26px;
  border-bottom: 1px solid var(--intimacy-border);
  color: #f2f3f5;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
}

.character-intimacy-document .intimacy-principles ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: intimacy-principle;
}

.character-intimacy-document .intimacy-principles li {
  position: relative;
  min-height: 120px;
  padding: 22px 24px 22px 58px;
  border-right: 1px solid var(--intimacy-border);
  border-bottom: 1px solid var(--intimacy-border);
  color: #b5bac1;
  font-size: .78rem;
  line-height: 1.65;
  counter-increment: intimacy-principle;
}

.character-intimacy-document .intimacy-principles li::before {
  position: absolute;
  top: 23px;
  left: 23px;
  content: counter(intimacy-principle, decimal-leading-zero);
  color: #8790ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .61rem;
  font-weight: 750;
}

@media (max-width: 980px) {
  .intimacy-character-index > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .markdown-body.character-intimacy-document {
    padding: 26px 14px;
  }

  .character-intimacy-document > h1 {
    padding-top: 28px;
    font-size: clamp(2rem, 11vw, 2.8rem);
  }

  .intimacy-guide {
    grid-template-columns: 1fr;
  }

  .character-intimacy-document .intimacy-guide h2,
  .character-intimacy-document .intimacy-guide p,
  .character-intimacy-document .intimacy-guide p:last-child {
    grid-column: 1;
  }

  .character-intimacy-document .intimacy-guide p {
    min-height: 0;
    padding: 17px 18px;
  }

  .intimacy-character-index > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .character-intimacy-document .intimacy-character-index a {
    padding: 10px;
  }

  .intimacy-character-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .intimacy-character-header > div {
    padding: 17px 16px 16px;
  }

  .character-intimacy-document .intimacy-character-header h2 {
    font-size: 1.45rem;
  }

  .character-intimacy-document .intimacy-character-basis {
    display: inline-block;
    font-size: .51rem;
  }

  .intimacy-lens-grid {
    grid-template-columns: 1fr;
  }

  .intimacy-lens,
  .intimacy-lens.is-partner,
  .intimacy-lens.is-guardrail {
    grid-column: 1;
    padding: 20px 18px;
  }

  .intimacy-lens.is-partner {
    padding-left: 20px;
  }

  .intimacy-lens.is-guardrail {
    display: block;
  }

  .character-intimacy-document .intimacy-lens.is-guardrail h3 {
    margin-bottom: 10px;
  }

  .character-intimacy-document .intimacy-lens p {
    font-size: .77rem;
  }

  .sexual-tension-module > header {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 15px 16px;
  }

  .sexual-tension-module > header p {
    font-size: .62rem;
  }

  .sexual-tension-module > div {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  .character-intimacy-document .intimacy-principles ul {
    grid-template-columns: 1fr;
  }

  .character-intimacy-document .intimacy-principles li {
    min-height: 0;
    border-right: 0;
  }
}

.markdown-body.character-behavior-document,
.behavior-tooltip,
.behavior-annotated {
  --behavior-border: #41434a;
  --behavior-panel: #25262b;
  --behavior-female: #d58b9d;
  --behavior-male: #72b8d8;
  --behavior-story: #bd8adb;
}

.markdown-body.character-behavior-document {
  background: #2b2d31;
}

.character-behavior-document > h1 {
  position: relative;
  max-width: 860px;
  margin-bottom: 22px;
  padding-top: 32px;
}

.character-behavior-document > h1::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "WRITER'S BEHAVIOUR ARCHIVE";
  color: #aeb4ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .14em;
}

.character-behavior-document .behavior-lede {
  max-width: 880px;
  margin-bottom: 24px;
  color: #b5bac1;
  font-size: clamp(.92rem, 1.7vw, 1.05rem);
  line-height: 1.72;
}

.behavior-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid var(--behavior-border);
  border-radius: 8px;
  background: var(--behavior-border);
  gap: 1px;
}

.behavior-legend > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: #202125;
  color: #b5bac1;
  font-size: .66rem;
  font-weight: 700;
}

.behavior-marker {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.behavior-legend .is-female .behavior-marker { color: var(--behavior-female); }
.behavior-legend .is-male .behavior-marker { color: var(--behavior-male); }
.behavior-legend .is-story .behavior-marker { color: var(--behavior-story); }

.behavior-legend .behavior-marker {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: .55rem;
  line-height: 1;
}

.behavior-method {
  margin-bottom: 34px;
  overflow: hidden;
  border: 1px solid var(--behavior-border);
  border-radius: 8px;
  background: var(--behavior-panel);
}

.character-behavior-document .behavior-method h2 {
  margin: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--behavior-border);
  background: #1e1f22;
  color: #f2f3f5;
  font-size: 1.08rem;
}

.character-behavior-document .behavior-method ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: behavior-method;
}

.character-behavior-document .behavior-method li {
  position: relative;
  min-height: 108px;
  padding: 19px 20px 19px 52px;
  border-right: 1px solid var(--behavior-border);
  border-bottom: 1px solid var(--behavior-border);
  color: #b5bac1;
  font-size: .75rem;
  line-height: 1.62;
  counter-increment: behavior-method;
}

.character-behavior-document .behavior-method li::before {
  position: absolute;
  top: 20px;
  left: 20px;
  content: counter(behavior-method, decimal-leading-zero);
  color: #8790ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  font-weight: 750;
}

.character-behavior-document .behavior-section-heading {
  position: relative;
  margin: 38px 0 14px;
  padding: 0 0 12px 42px;
  border-bottom: 1px solid var(--behavior-border);
  color: #f2f3f5;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
}

.character-behavior-document .behavior-section-heading::before {
  position: absolute;
  left: 0;
  content: attr(data-section);
  color: #7f85e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
}

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

.behavior-note {
  min-width: 0;
  margin: 0;
  padding: 19px 21px;
  border: 1px solid var(--behavior-border);
  border-left: 3px solid var(--behavior-accent);
  border-radius: 7px;
  background: #27282d;
  color: #b9bcc3;
  font-size: .79rem;
  line-height: 1.68;
}

.behavior-note.is-female { --behavior-accent: var(--behavior-female); }
.behavior-note.is-male { --behavior-accent: var(--behavior-male); }
.behavior-note.is-story { --behavior-accent: var(--behavior-story); }

.behavior-note > header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.behavior-note > header .behavior-marker {
  color: var(--behavior-accent);
}

.behavior-note > header div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.behavior-note strong {
  color: color-mix(in srgb, var(--behavior-accent) 70%, #f2f3f5);
  font-size: .78rem;
}

.behavior-note > header div span {
  color: #878b94;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.behavior-note p {
  margin: 0;
  color: #b9bcc3;
  font-size: inherit;
  line-height: inherit;
}

.behavior-annotated {
  --behavior-accent: var(--behavior-story);
  cursor: pointer;
}

.behavior-annotated:focus-visible {
  outline: 2px solid #7f85e8;
  outline-offset: 5px;
}

.behavior-gutter {
  display: flex;
  min-width: 22px;
  align-items: center;
  align-self: start;
  flex-direction: column;
  gap: 4px;
}

.behavior-gutter-marker {
  --marker-color: var(--behavior-story);
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: #202125;
  color: var(--marker-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.behavior-gutter-marker.is-female { --marker-color: var(--behavior-female); }
.behavior-gutter-marker.is-male { --marker-color: var(--behavior-male); }
.behavior-gutter-marker.is-story { --marker-color: var(--behavior-story); }

.behavior-gutter-marker:hover,
.behavior-gutter-marker:focus-visible,
.behavior-gutter-marker[aria-expanded="true"] {
  background: var(--marker-color);
  color: #16171a;
  outline: 0;
  transform: translateY(-1px);
}

.chapter-body p.behavior-annotated {
  display: grid;
  width: calc(100% + 36px);
  grid-template-columns: 24px minmax(0, 1fr);
  margin-left: -36px;
  gap: 12px;
}

.behavior-paragraph-copy {
  min-width: 0;
}

.moment-fact-panel li.behavior-annotated {
  grid-template-columns: 30px 24px minmax(0, 1fr);
}

.moment-fact-panel li.behavior-annotated .behavior-gutter {
  margin-top: -4px;
}

.behavior-tooltip {
  --behavior-accent: var(--behavior-story);
  position: fixed;
  z-index: 1200;
  width: min(400px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #45474f;
  border-left: 3px solid var(--behavior-accent);
  border-radius: 7px;
  background: #27282d;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
  color: #c2c5cc;
}

.behavior-tooltip[hidden] {
  display: none;
}

.behavior-tooltip.is-female { --behavior-accent: var(--behavior-female); }
.behavior-tooltip.is-male { --behavior-accent: var(--behavior-male); }
.behavior-tooltip.is-story { --behavior-accent: var(--behavior-story); }

.behavior-tooltip > header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 11px;
  padding: 15px 15px 13px;
  border-bottom: 1px solid #3d3f46;
  background: #202125;
}

.behavior-tooltip-marker {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--behavior-accent);
  border-radius: 5px;
  color: var(--behavior-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  font-weight: 800;
}

.behavior-tooltip > header > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.behavior-tooltip-lens,
.behavior-tooltip-basis {
  color: #8e939e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.behavior-tooltip > header strong {
  color: #f2f3f5;
  font-size: .82rem;
}

.behavior-tooltip-close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid #45474f;
  border-radius: 4px;
  background: #2b2d31;
  color: #b5bac1;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.behavior-tooltip-close:hover,
.behavior-tooltip-close:focus-visible {
  border-color: #737783;
  background: #34363c;
  color: #fff;
  outline: 0;
}

.behavior-tooltip-copy {
  margin: 0;
  padding: 16px 17px;
  color: #c2c5cc;
  font-size: .76rem;
  line-height: 1.62;
}

.behavior-tooltip > a {
  display: block;
  padding: 11px 17px 13px;
  border-top: 1px solid #3d3f46;
  color: #aeb4ff;
  font-size: .65rem;
  font-weight: 750;
  text-decoration: none;
}

.behavior-tooltip > a:hover,
.behavior-tooltip > a:focus-visible {
  color: #d7daff;
  outline: 0;
}

@media (max-width: 700px) {
  .markdown-body.character-behavior-document {
    padding: 26px 14px;
  }

  .behavior-legend,
  .behavior-notes-grid,
  .character-behavior-document .behavior-method ul {
    grid-template-columns: 1fr;
  }

  .character-behavior-document .behavior-method li {
    min-height: 0;
    border-right: 0;
  }

  .behavior-note {
    padding: 16px 14px;
    font-size: .76rem;
  }

  .chapter-body p.behavior-annotated {
    width: 100%;
    grid-template-columns: 22px minmax(0, 1fr);
    margin-left: 0;
    gap: 9px;
  }

  .behavior-tooltip {
    top: auto !important;
    right: 12px;
    bottom: 12px;
    left: 12px !important;
    width: auto;
    max-height: min(72vh, 560px);
    overflow-y: auto;
  }
}

.markdown-body ul {
  padding-left: 24px;
  color: var(--muted);
}

.markdown-body code {
  padding: 2px 5px;
  border-radius: 3px;
  background: #1e1f22;
  color: #e5e7eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84em;
}

.markdown-body a {
  color: #aeb4ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.markdown-body a.archive-entity-link,
.markdown-body a.archive-entity-link:visited,
.markdown-body a.archive-entity-link:active {
  color: inherit;
  text-decoration: none;
}

.markdown-body a.archive-entity-link:hover {
  color: inherit;
  text-decoration: none;
}

.markdown-body hr {
  margin: 36px 0;
  border: 0;
  border-top: 1px solid #3f4147;
}

.markdown-body .markdown-table-wrap {
  margin: 24px 0 34px;
  overflow-x: auto;
  border: 1px solid #3f4147;
  border-radius: 8px;
  background: #25262b;
  scrollbar-color: #5865f2 #1e1f22;
}

.markdown-body .markdown-table-wrap:focus-visible {
  outline: 2px solid #8790ff;
  outline-offset: 3px;
}

.markdown-body table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .74rem;
  line-height: 1.55;
}

.markdown-body th,
.markdown-body td {
  padding: 15px 17px;
  border-right: 1px solid #3f4147;
  border-bottom: 1px solid #3f4147;
  text-align: left;
  vertical-align: top;
}

.markdown-body th:last-child,
.markdown-body td:last-child {
  border-right: 0;
}

.markdown-body tbody tr:last-child td {
  border-bottom: 0;
}

.markdown-body th {
  background: #1e1f22;
  color: #949ba4;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.markdown-body td:first-child {
  width: 92px;
  color: #aeb4ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .63rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.markdown-body td:nth-child(2) {
  width: 130px;
  color: #b5bac1;
  font-weight: 700;
}

.markdown-body .question-row-open:hover td {
  background: #2b2d31;
}

.markdown-body .question-row-answered td {
  color: #72767d;
  background: #232428;
}

.markdown-body .question-row-answered td:first-child {
  color: #6fbf91;
}

.markdown-body del {
  color: #72767d;
  text-decoration-color: #6fbf91;
  text-decoration-thickness: 2px;
}

.markdown-body .question-ledger-table table {
  min-width: 0;
  table-layout: fixed;
}

.markdown-body .question-ledger-table {
  overflow-x: clip;
}

.markdown-body .question-ledger-table .table-cell-area {
  width: clamp(112px, 22%, 150px);
  color: #b5bac1;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.markdown-body .question-ledger-table .table-cell-question {
  width: auto;
  color: #dbdee1;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.markdown-body .question-ledger-table .table-cell-confidence {
  display: none;
}

.question-confidence {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #3f4147;
}

.question-confidence-label {
  color: #949ba4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.question-confidence-track {
  height: 5px;
  overflow: hidden;
  border-radius: 2px;
  background: #1e1f22;
}

.question-confidence-track i {
  display: block;
  height: 100%;
  background: #7289da;
}

.question-row-answered .question-confidence-track i {
  background: #3ba55d;
}

@media (max-width: 700px) {
  .markdown-body .question-ledger-table {
    border-radius: 6px;
  }

  .markdown-body .question-ledger-table table,
  .markdown-body .question-ledger-table tbody,
  .markdown-body .question-ledger-table tr,
  .markdown-body .question-ledger-table td {
    display: block;
    width: 100%;
  }

  .markdown-body .question-ledger-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .markdown-body .question-ledger-table tr {
    padding: 14px 15px 16px;
    border-bottom: 1px solid #3f4147;
  }

  .markdown-body .question-ledger-table tr:last-child {
    border-bottom: 0;
  }

  .markdown-body .question-ledger-table td,
  .markdown-body .question-ledger-table .table-cell-area,
  .markdown-body .question-ledger-table .table-cell-question {
    padding: 0;
    border: 0;
  }

  .markdown-body .question-ledger-table .table-cell-area {
    margin-bottom: 8px;
    color: #aeb4ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .56rem;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .markdown-body .question-ledger-table .table-cell-question {
    font-size: .72rem;
    line-height: 1.58;
  }
}

.succession-context {
  max-width: 850px;
  margin: -8px 0 22px;
  padding: 16px 18px;
  border-left: 3px solid #7289da;
  background: #292a2f;
  color: #b5bac1;
  font-size: .78rem;
  line-height: 1.65;
}

.magiarch-selection {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 8px;
  background: #25262b;
}

.magiarch-selection > header {
  padding: clamp(24px, 4vw, 38px);
  border-bottom: 1px solid #3b3d43;
}

.magiarch-selection > header > span {
  color: #8790ff;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.magiarch-selection h3 {
  margin: 12px 0 8px;
  color: #f2f3f5;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.magiarch-selection header p,
.magiarch-selection li p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.6;
}

.magiarch-selection ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.magiarch-selection li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 24px;
}

.magiarch-selection li:nth-child(even) {
  border-left: 1px solid #3b3d43;
}

.magiarch-selection li:nth-child(n + 3) {
  border-top: 1px solid #3b3d43;
}

.magiarch-selection li > span {
  color: #8790ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
}

.magiarch-selection li strong {
  display: block;
  margin-bottom: 7px;
  color: #dbdee1;
}

@media (max-width: 640px) {
  .magiarch-selection ol {
    grid-template-columns: 1fr;
  }

  .magiarch-selection li:nth-child(even) {
    border-left: 0;
  }

  .magiarch-selection li + li {
    border-top: 1px solid #3b3d43;
  }
}

.document-error {
  padding: 80px 20px;
  color: var(--muted);
  text-align: center;
}

.document-error h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1rem;
}

.document-error p {
  margin: 0;
  font-size: .76rem;
}

.character-main-pane .feed-header {
  top: 0;
}

.archive-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px 0;
}

.archive-toolbar .search-field {
  width: min(320px, 36%);
  height: 36px;
  flex: 0 0 auto;
  border-color: transparent;
  background: #1e1f22;
}

.archive-toolbar .search-field svg {
  width: 15px;
}

.archive-toolbar .search-field input {
  font-size: .76rem;
}

.archive-toolbar .filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.archive-toolbar .filter-chip {
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  background: #2b2d31;
  color: var(--subtle);
  font-size: .72rem;
}

.archive-toolbar .filter-chip:hover {
  background: #35373c;
  color: #dbdee1;
}

.archive-toolbar .filter-chip.is-active {
  background: #404249;
  color: #fff;
}

.roster-header {
  display: block;
  padding: 28px 30px 18px;
}

.roster-title h1 {
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1;
  letter-spacing: -.045em;
}

.roster-title > p:last-child {
  max-width: 650px;
  margin-top: 12px;
  font-size: .86rem;
}

.roster-title .eyebrow {
  margin-bottom: 8px;
  font-size: .62rem;
}

.roster-section {
  padding: 0 30px 50px;
}

.roster-meta {
  margin-bottom: 13px;
  padding-top: 13px;
  font-size: .61rem;
}

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

.character-card {
  margin-bottom: 12px;
  border-color: rgba(0, 0, 0, .22);
  border-radius: 7px;
  background: #2b2d31;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.character-card:hover {
  border-color: rgba(0, 0, 0, .3);
  background: #2e3035;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

.character-info {
  padding: 20px;
}

.character-heading h2 {
  font-size: 1.25rem;
}

.character-info > p {
  font-size: .8rem;
  line-height: 1.55;
}

.character-art {
  border-right-color: rgba(0, 0, 0, .22);
}

/* Duchy country profile */
.duchy-workspace {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 280px;
  margin: 0;
  overflow: hidden;
}

.duchy-main-pane {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #1e1f22;
}

.duchy-scroll {
  height: calc(100% - 48px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.duchy-breadcrumbs,
.duchy-section,
.duchy-jumpbar,
.duchy-source-footer {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.duchy-breadcrumbs {
  padding-top: 22px;
}

.duchy-hero {
  display: grid;
  width: min(1120px, calc(100% - 48px));
  min-height: 520px;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  margin: 16px auto 18px;
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.duchy-hero-copy {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 7vw, 86px);
  overflow: hidden;
  border-left: 3px solid #5865f2;
  background: #232428;
}

.duchy-hero-copy::after {
  display: none;
}

.duchy-kicker,
.capital-label,
.duchy-source-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.duchy-kicker {
  position: absolute;
  top: 24px;
  right: 28px;
  left: 28px;
  color: #767a84;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.duchy-hero h1 {
  position: relative;
  z-index: 1;
  margin: 7px 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 7vw, 6.8rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .83;
}

.duchy-hero h1 span {
  color: #9da5ff;
}

.duchy-lede {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0;
  color: #c9cdd3;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

.duchy-hero blockquote {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 32px 0 0;
  padding: 13px 16px;
  border-left: 3px solid #5865f2;
  background: rgba(0, 0, 0, .16);
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-style: italic;
}

.duchy-facts {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  margin: 0;
  background: #18191c;
}

.duchy-facts div {
  display: flex;
  min-height: 72px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 24px;
  border-bottom: 1px solid #2f3136;
  transition: background .2s ease, padding-left .2s ease;
}

.duchy-facts div:hover {
  background: #202225;
}

.duchy-facts dt {
  color: #777d88;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.duchy-facts dd {
  margin: 4px 0 0;
  color: #e4e6eb;
  font-size: .88rem;
  font-weight: 650;
}

.duchy-jumpbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 7px;
  background: #2b2d31;
}

.duchy-jumpbar > span {
  padding: 0 12px;
  color: #747982;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.duchy-jumpbar a {
  padding: 7px 11px;
  border-radius: 5px;
  color: #b5bac1;
  font-size: .72rem;
  font-weight: 650;
  transition: background .2s ease, color .2s ease;
}

.duchy-jumpbar a:hover,
.duchy-jumpbar a:focus-visible {
  background: #383a40;
  color: #fff;
}

.duchy-section {
  padding: 78px 0 18px;
  scroll-margin-top: 50px;
}

.duchy-section-heading {
  display: grid;
  max-width: 900px;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 24px;
  margin-bottom: 28px;
}

.duchy-section-heading > div {
  display: flex;
  grid-row: 1 / span 2;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.duchy-section-heading > div > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #404249;
  border-radius: 50%;
  color: #8f96f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem;
}

.duchy-section-heading h2 {
  grid-column: 2;
  margin: 3px 0 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.duchy-section-heading > p {
  grid-column: 2;
  max-width: 720px;
  margin: 0;
  color: #aeb2ba;
  font-size: .93rem;
  line-height: 1.65;
}

.duchy-image-placeholder,
.duchy-map-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #3d4047;
  background: #242529;
}

.duchy-image-placeholder::before {
  display: none;
}

.duchy-image-placeholder figcaption,
.duchy-map-figure > figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  background: rgba(17, 18, 22, .88);
}

.duchy-image-placeholder figcaption strong,
.duchy-map-figure > figcaption strong {
  font-size: .76rem;
}

.duchy-image-placeholder figcaption span,
.duchy-map-figure > figcaption span {
  color: #858b95;
  font-size: .61rem;
}

.duchy-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  gap: 14px;
  align-items: start;
}

.duchy-map-figure {
  border-radius: 8px;
  background: #202125;
}

.duchy-map-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.duchy-map-flags {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duchy-map-flag {
  margin: 0;
  width: 118px;
}

.duchy-map-flag img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
}

.duchy-map-flag figcaption {
  display: block;
  padding: 5px 3px 0;
  color: #b5bac1;
  font-size: .53rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.duchy-map-hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.duchy-map-hotspot {
  position: absolute;
  top: var(--map-y);
  left: var(--map-x);
  margin-left: var(--map-nudge-x, 0);
  width: 44px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform: translate(-50%, -100%);
}

.duchy-map-hotspot::after {
  position: absolute;
  content: "";
}

.duchy-map-hotspot > span[aria-hidden="true"] {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 18px;
  height: 32px;
  background: #3578ea;
  clip-path: polygon(50% 0, 86% 28%, 72% 76%, 50% 100%, 28% 76%, 14% 28%);
  filter: drop-shadow(0 3px 2px rgba(10, 20, 55, .7)) drop-shadow(0 0 5px rgba(78, 171, 255, .72));
  transform: translateX(-50%);
  animation: map-crystal-float 2.2s ease-in-out infinite;
  transition: filter .18s ease, scale .18s ease;
}

.duchy-map-hotspot > span[aria-hidden="true"]::before {
  position: absolute;
  inset: 3px 4px 10px 5px;
  background: rgba(239, 252, 255, .55);
  clip-path: polygon(42% 0, 100% 31%, 50% 55%, 0 100%, 12% 25%);
  content: "";
}

.duchy-map-hotspot > span[aria-hidden="true"]::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(106, 203, 255, .58);
  clip-path: polygon(50% 0, 86% 28%, 72% 76%, 50% 100%, 28% 76%, 14% 28%);
  content: "";
  opacity: 0;
}

.duchy-map-hotspot::after {
  bottom: 4px;
  left: 50%;
  width: 18px;
  height: 6px;
  border-radius: 50%;
  background: rgba(32, 82, 156, .34);
  transform: translateX(-50%);
  animation: map-crystal-shadow 2.2s ease-in-out infinite;
}

.duchy-map-hotspot:hover > span[aria-hidden="true"],
.duchy-map-hotspot:focus-visible > span[aria-hidden="true"],
.duchy-map-hotspot.is-active > span[aria-hidden="true"] {
  filter: drop-shadow(0 3px 2px rgba(10, 20, 55, .72)) drop-shadow(0 0 9px rgba(97, 210, 255, .95));
  scale: 1.12;
}

.duchy-map-hotspot.is-active > span[aria-hidden="true"] {
  background: #2ba866;
  filter: drop-shadow(0 3px 2px rgba(7, 45, 27, .72)) drop-shadow(0 0 10px rgba(73, 226, 142, .92));
}

.duchy-map-hotspot.is-active > span[aria-hidden="true"]::after {
  border-color: rgba(95, 230, 158, .68);
}

.duchy-map-hotspot.is-active::after {
  background: rgba(31, 151, 87, .35);
}

.duchy-map-hotspot:hover > span[aria-hidden="true"]::after,
.duchy-map-hotspot:focus-visible > span[aria-hidden="true"]::after,
.duchy-map-hotspot.is-active > span[aria-hidden="true"]::after {
  animation: map-crystal-pulse 1.55s ease-out infinite;
}

.duchy-map-hotspot:focus-visible {
  outline: none;
}

.duchy-map-tooltip {
  position: absolute;
  z-index: 6;
  width: min(240px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid #4b4e57;
  border-radius: 6px;
  background: #17181b;
  color: #f2f3f5;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.duchy-map-tooltip.is-above {
  transform: translate(-50%, -100%);
}

.duchy-map-tooltip strong {
  display: block;
  margin-bottom: 5px;
  font-size: .76rem;
}

.duchy-map-tooltip p {
  margin: 0;
  color: #b5bac1;
  font-size: .66rem;
  line-height: 1.5;
}

@keyframes map-crystal-float {
  0%, 100% { transform: translate(-50%, 0) rotate(-1deg); }
  50% { transform: translate(-50%, -7px) rotate(1deg); }
}

@keyframes map-crystal-shadow {
  0%, 100% { opacity: .72; transform: translateX(-50%) scale(1); }
  50% { opacity: .35; transform: translateX(-50%) scale(.68); }
}

@keyframes map-crystal-pulse {
  0% { opacity: .7; transform: scale(.72); }
  80%, 100% { opacity: 0; transform: scale(1.45); }
}

.territory-ledger {
  display: grid;
  grid-template-rows: auto repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.territory-ledger-heading {
  padding: 4px 4px 8px;
}

.territory-ledger-heading > span {
  color: #7d84e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.territory-ledger-heading h3 {
  margin: 5px 0 4px;
  color: #f2f3f5;
  font-size: .92rem;
}

.territory-ledger-heading p {
  margin: 0;
  color: #858b95;
  font-size: .67rem;
  line-height: 1.45;
}

.territory-ledger > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  align-content: center;
  padding: 18px;
  border: 1px solid #34363c;
  border-radius: 7px;
  background: #2b2d31;
}

.territory-ledger > div > span {
  color: #6f76d9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
}

.territory-ledger p {
  margin: 0;
  color: #aeb2ba;
  font-size: .76rem;
  line-height: 1.55;
}

.territory-ledger strong {
  display: block;
  margin-bottom: 4px;
  color: #f2f3f5;
  font-size: .82rem;
}

.capital-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
  align-items: stretch;
}

.capital-card {
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.city-placeholder {
  min-height: 260px;
  border: 0;
  border-bottom: 1px solid #3d4047;
  background: #27292e;
}

.city-silhouette {
  position: absolute;
  right: 12%;
  bottom: 58px;
  left: 12%;
  height: 130px;
  border-bottom: 3px solid #646a75;
}

.city-silhouette span {
  position: absolute;
  bottom: 0;
  background: #373a40;
  border: 2px solid #666c77;
}

.city-silhouette span:nth-child(1) { left: 7%; width: 28%; height: 72%; }
.city-silhouette span:nth-child(2) { left: 38%; width: 25%; height: 100%; }
.city-silhouette span:nth-child(3) { right: 5%; width: 27%; height: 58%; }
.city-silhouette-crown span:nth-child(2)::before { position: absolute; top: -28px; left: 50%; width: 30px; height: 30px; border: 2px solid #666c77; border-bottom: 0; content: ""; transform: translateX(-50%) rotate(45deg); }
.city-silhouette-state span:nth-child(1) { height: 48%; }
.city-silhouette-state span:nth-child(2) { height: 68%; }
.city-silhouette-state span:nth-child(3) { height: 92%; }
.city-silhouette-msf span:nth-child(1) { height: 62%; }
.city-silhouette-msf span:nth-child(2) { height: 82%; }
.city-silhouette-msf span:nth-child(3) { height: 72%; }

.capital-copy {
  padding: 23px;
}

.capital-label span,
.capital-label i {
  font-size: .59rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.capital-label span { color: #949cff; }
.capital-label i { color: #70757e; }

.capital-copy h3 {
  margin: 13px 0 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.capital-copy > p {
  margin: 0;
  color: #afb3ba;
  font-size: .8rem;
  line-height: 1.6;
}

.capital-copy ul,
.power-column ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.capital-copy li,
.power-column li {
  padding: 8px 0 8px 17px;
  border-top: 1px solid #3a3c42;
  color: #c8cbd0;
  font-size: .72rem;
}

.capital-copy li::before,
.power-column li::before {
  float: left;
  margin-left: -17px;
  color: #747ced;
  content: "+";
}

.capital-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #656b75;
}

.capital-link span {
  width: 1px;
  flex: 1;
  background: #3b3e45;
}

.capital-link b {
  padding: 8px 0;
  font-size: .55rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.strategic-city-card {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.strategic-city-card .city-placeholder {
  min-height: 100%;
  border-right: 1px solid #3d4047;
  border-bottom: 0;
}

.capital-copy > .strategic-city-note {
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 2px solid #747ced;
  background: #25272b;
  color: #c8cbd0;
}

.power-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.power-column {
  position: relative;
  padding: 38px;
}

.power-column h3 {
  margin: 8px 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
}

.power-column > p:not(.eyebrow) {
  margin: 0;
  color: #aeb2ba;
  font-size: .8rem;
}

.power-symbol {
  position: absolute;
  top: 22px;
  right: 24px;
  color: rgba(255,255,255,.05);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
}

.power-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 10px;
  border-right: 1px solid #3b3d43;
  border-left: 1px solid #3b3d43;
  background: #222327;
  color: #777d87;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.power-axis > div {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}

.power-axis i {
  height: 1px;
  flex: 1;
  background: #5865f2;
}

.power-axis b {
  color: #aeb4ff;
  font-size: .55rem;
  line-height: 1.4;
  text-align: center;
}

.diplomacy-layout {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.45fr);
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.diplomacy-principle {
  padding: 30px;
  border-right: 1px solid #3b3d43;
  background: #25262a;
}

.diplomacy-principle > span,
.diplomacy-records article div > span,
.language-protocol span {
  color: #949cff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.diplomacy-principle h3,
.language-protocol h3 {
  margin: 12px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
}

.diplomacy-principle > p,
.language-protocol > p {
  margin: 0;
  color: #afb3ba;
  font-size: .78rem;
  line-height: 1.65;
}

.diplomacy-principle dl {
  margin: 24px 0 0;
}

.diplomacy-principle dl div {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #3a3c42;
}

.diplomacy-principle dt {
  color: #747983;
  font-size: .62rem;
  text-transform: uppercase;
}

.diplomacy-principle dd {
  margin: 0;
  color: #d5d7db;
  font-size: .7rem;
}

.diplomacy-records article {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid #3a3c42;
}

.diplomacy-records article:last-child {
  border-bottom: 0;
}

.diplomacy-records time,
.diplomacy-records .diplomacy-years {
  color: #f2f3f5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
}

.diplomacy-years small {
  display: block;
  color: #777c86;
  font-size: .55rem;
  font-weight: 500;
  line-height: 1.4;
}

.diplomacy-records h3 {
  margin: 7px 0 6px;
  font-size: .95rem;
}

.diplomacy-records p {
  margin: 0;
  color: #aeb2b9;
  font-size: .74rem;
  line-height: 1.6;
}

.language-protocol {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
  gap: 34px;
  margin-top: 12px;
  padding: 26px 30px;
  border: 1px solid #3b3d43;
  border-left: 3px solid #5865f2;
  border-radius: 6px;
  background: #292a2f;
}

.language-protocol h3 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.diplomatic-city-note {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
  gap: 34px;
  margin-top: 12px;
  padding: 22px 30px;
  border: 1px solid #3b3d43;
  border-radius: 6px;
  background: #25262a;
}

.diplomatic-city-note span {
  color: #949cff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.diplomatic-city-note h3 {
  margin: 9px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
}

.diplomatic-city-note > p {
  margin: 0;
  color: #afb3ba;
  font-size: .76rem;
  line-height: 1.65;
}

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

.institution-grid article {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border: 1px solid #393b42;
  border-radius: 7px;
  background: #2b2d31;
  transition: border-color .2s ease, background .2s ease;
}

.institution-grid article:hover {
  border-color: #555b8f;
  background: #2e3035;
}

.institution-grid .institution-wide {
  min-height: 150px;
  grid-column: 1 / -1;
}

.institution-code {
  color: #8088ee;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
}

.institution-grid h3 {
  margin: 13px 0 7px;
  font-size: 1rem;
}

.institution-grid p {
  max-width: 620px;
  margin: 0;
  color: #adb1b8;
  font-size: .76rem;
  line-height: 1.6;
}

.institution-grid article > b {
  position: absolute;
  right: 16px;
  bottom: 13px;
  color: #666b75;
  font-size: .57rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.rank-system {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 7px;
  background: #25262a;
}

.rank-intro {
  padding: 32px;
  border-right: 1px solid #393b42;
}

.rank-intro h3 {
  margin: 8px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
}

.rank-intro > p:last-child {
  margin: 0;
  color: #aeb2ba;
  font-size: .76rem;
  line-height: 1.65;
}

.rank-ladder {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rank-ladder li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid #393b42;
}

.rank-ladder li:last-child { border-bottom: 0; }
.rank-ladder span { color: #6f76d9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6rem; }
.rank-ladder strong { font-size: .73rem; font-weight: 650; }
.rank-ladder strong small { display: block; margin-top: 3px; color: #9296a3; font-size: .52rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.rank-ladder .rank-character-reference { background: rgba(88, 101, 242, .055); box-shadow: inset 2px 0 #5865f2; }

.rank-character-office {
  grid-column: 1 / -1;
  padding: 22px 26px;
  border-top: 1px solid #393b42;
  background: #202125;
}

.rank-character-office > span {
  color: #8f96ff;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.rank-character-office h4 {
  margin: 7px 0 9px;
  color: #fff;
  font-size: .9rem;
}

.rank-character-office p {
  max-width: 920px;
  margin: 0 0 12px;
  color: #aeb2ba;
  font-size: .7rem;
  line-height: 1.65;
}

.rank-character-office a {
  color: #aeb4ff;
  font-size: .64rem;
  font-weight: 800;
}

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

.culture-mosaic article {
  min-height: 150px;
  padding: 23px;
  border: 1px solid #393b42;
  border-radius: 7px;
  background: #2b2d31;
}

.culture-mosaic .culture-lead {
  grid-row: span 2;
  border-left: 3px solid #5865f2;
  background: #2b2d31;
}

.culture-mosaic .culture-tension {
  grid-column: span 2;
  min-height: 110px;
  background: #242529;
}

.culture-mosaic span {
  color: #848ced;
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .09em;
}

.culture-mosaic h3 {
  margin: 30px 0 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.1;
}

.culture-mosaic p {
  margin: 16px 0 0;
  color: #b3b6bd;
  font-size: .76rem;
  line-height: 1.65;
}

.duchy-closing {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 30px;
  margin-top: 10px;
  padding: 34px;
  border-left: 3px solid #5865f2;
  background: #292a2f;
}

.duchy-closing > p:last-child {
  margin: 0;
  color: #d1d3d7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  line-height: 1.65;
}

.duchy-source-footer {
  margin-top: 54px;
  margin-bottom: 48px;
  padding: 18px 0;
  border-top: 1px solid #393b42;
  color: #747983;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.duchy-source-footer a {
  color: #aeb4ff;
}

@media (max-width: 1050px) {
  .duchy-workspace {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .duchy-hero {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .power-column {
    padding: 28px;
  }
}

@media (max-width: 820px) {
  .duchy-workspace {
    display: block;
    height: auto;
    overflow: visible;
  }

  .duchy-main-pane,
  .duchy-scroll {
    height: auto;
    overflow: visible;
  }

  .duchy-feed-header {
    display: none;
  }

  .duchy-breadcrumbs,
  .duchy-section,
  .duchy-jumpbar,
  .duchy-source-footer,
  .duchy-hero {
    width: min(100% - 28px, 680px);
  }

  .duchy-hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .duchy-hero-copy {
    min-height: 470px;
    padding: 60px 30px 40px;
  }

  .duchy-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .duchy-jumpbar {
    top: 53px;
    overflow-x: auto;
  }

  .duchy-jumpbar > span,
  .duchy-jumpbar a {
    flex: 0 0 auto;
  }

  .duchy-map-layout,
  .capital-grid,
  .strategic-city-card,
  .diplomacy-layout,
  .power-balance,
  .rank-system {
    grid-template-columns: 1fr;
  }

  .capital-link {
    height: 54px;
    flex-direction: row;
  }

  .capital-link span {
    width: auto;
    height: 1px;
  }

  .capital-link b {
    writing-mode: horizontal-tb;
  }

  .strategic-city-card .city-placeholder {
    min-height: 260px;
    border-right: 0;
    border-bottom: 1px solid #3d4047;
  }

  .diplomacy-principle {
    border-right: 0;
    border-bottom: 1px solid #3b3d43;
  }

  .language-protocol {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .diplomatic-city-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .power-axis {
    min-height: 80px;
    flex-direction: row;
    border-top: 1px solid #3b3d43;
    border-right: 0;
    border-bottom: 1px solid #3b3d43;
    border-left: 0;
  }

  .rank-intro {
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }
}

@media (max-width: 560px) {
  .diplomacy-principle,
  .diplomacy-records article,
  .language-protocol,
  .diplomatic-city-note {
    padding: 22px;
  }

  .diplomacy-records article {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .duchy-hero-copy {
    min-height: 430px;
    padding: 64px 22px 32px;
  }

  .duchy-map-flag {
    width: 64px;
  }

  .duchy-hero h1 {
    font-size: clamp(3.15rem, 18vw, 5rem);
  }

  .duchy-facts,
  .institution-grid,
  .culture-mosaic {
    grid-template-columns: 1fr;
  }

  .institution-grid .institution-wide,
  .culture-mosaic .culture-tension {
    grid-column: auto;
  }

  .culture-mosaic .culture-lead {
    grid-row: auto;
  }

  .duchy-section {
    padding-top: 58px;
  }

  .duchy-section-heading {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .duchy-section-heading > div {
    grid-row: auto;
    flex-direction: row;
    align-items: center;
  }

  .duchy-section-heading h2,
  .duchy-section-heading > p {
    grid-column: 1;
  }

  .duchy-image-placeholder figcaption,
  .duchy-map-figure > figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .duchy-closing {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px;
  }
}

@media (max-width: 1050px) {
  .home-workspace {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .context-sidebar {
    display: none;
  }

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

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

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

  .docs-toolbar {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

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

@media (max-width: 820px) {
  .app-main {
    height: auto;
    overflow: visible;
  }

  .home-workspace,
  .characters-workspace,
  .gallery-workspace,
  .docs-workspace {
    display: block;
    height: auto;
    overflow: visible;
  }

  .home-feed,
  .character-main-pane,
  .gallery-main-pane,
  .docs-main-pane {
    height: auto;
    min-height: calc(100vh - 53px);
    overflow: visible;
  }

  .feed-scroll {
    overflow: visible;
  }

  .notes-sidebar {
    min-height: 260px;
    overflow: visible;
    border-top: 1px solid rgba(0, 0, 0, .32);
    border-left: 0;
  }

  .notes-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .gallery-main-pane .feed-header {
    display: none;
  }

  .docs-main-pane .feed-header {
    display: none;
  }

  .docs-heading {
    padding: 28px 14px 15px;
  }

  .document-library {
    padding: 0 14px 40px;
  }

  .story-timeline {
    margin: 0 14px 18px;
  }

  .story-reader-open .story-timeline {
    margin-top: 18px;
  }

  .moment-system,
  .moment-phase-map,
  .moment-library,
  .moment-reader {
    margin-inline: 14px;
  }

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

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

  .docs-toolbar {
    display: block;
    margin: 0 14px 14px;
  }

  .document-summary {
    margin-top: 10px;
  }

  .document-reader-view {
    padding: 0 14px 30px;
  }

  .document-reader-header {
    align-items: flex-start;
  }

  .document-reader-header .source-link {
    flex: 0 0 auto;
  }

  .markdown-body {
    padding: 26px 18px;
  }

  .markdown-body .dialogue-line {
    padding: 36px 13px 12px;
  }

  .markdown-body .dialogue-line strong:first-child {
    top: 10px;
    left: 12px;
  }

  .gallery-heading {
    padding: 28px 14px 15px;
  }

  .gallery-toolbar {
    margin: 0 14px;
    padding: 0 10px;
  }

  .gallery-select select {
    height: 44px;
    font-size: 16px;
  }

  .gallery-select-options,
  .gallery-toggle-options {
    gap: 12px;
  }

  .chibi-toggle {
    min-height: 44px;
  }

  .gallery-content {
    padding: 0 14px 40px;
  }

  .music-library {
    padding: 0 14px 40px;
  }

  .gallery-reader-view {
    padding: 0 14px 30px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
  }

  .gallery-card {
    margin-bottom: 9px;
  }

  .gallery-card figcaption {
    padding: 9px;
  }

  .media-code {
    display: none;
  }
}

@media (max-width: 560px) {
  .gallery-select-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-season-select { grid-column: 1 / -1; }
  .gallery-toggle-options { grid-template-columns: 1fr; gap: 4px; }
  .gallery-toggle-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery-toolbar .chibi-toggle small { display: none; }
  .gallery-toolbar .chibi-toggle strong { font-size: .72rem; }
  .gallery-filter-header { gap: 6px; }
}

@media (max-width: 380px) {
  .gallery-select-options { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app-main {
    height: auto;
    min-height: calc(100vh - 53px);
    overflow: visible;
  }

  .home-workspace,
  .characters-workspace {
    display: block;
    height: auto;
    overflow: visible;
  }

  .channel-sidebar,
  .context-sidebar {
    display: none;
  }

  .home-feed,
  .character-main-pane {
    height: auto;
    min-height: calc(100vh - 53px);
    overflow: visible;
  }

  .feed-scroll {
    overflow: visible;
  }

  .feed-header {
    top: 52px;
  }

  .feed-header p,
  .feed-status {
    display: none;
  }

  .welcome-card {
    padding: 48px 18px 28px;
  }

  .welcome-card h1 {
    font-size: 2.4rem;
  }

  .dispatch {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 12px 16px;
  }

  .dispatch-avatar {
    width: 34px;
    height: 34px;
  }

  .archive-sidebar {
    position: sticky;
    top: 52px;
    z-index: 12;
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .32);
  }

  .archive-sidebar .workspace-title,
  .archive-sidebar .operator-panel,
  .archive-filter-group > p {
    display: none;
  }

  .archive-search-wrap {
    padding: 0 0 7px;
  }

  .archive-filter-group {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .archive-filter-group .filter-chip {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 10px;
  }

  .character-main-pane .feed-header {
    display: none;
  }

  .archive-toolbar {
    position: sticky;
    top: 52px;
    z-index: 12;
    display: block;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .32);
    background: #2b2d31;
  }

  .archive-toolbar .search-field {
    width: 100%;
    margin-bottom: 7px;
  }

  .archive-toolbar .filter-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .archive-toolbar .filter-chip {
    flex: 0 0 auto;
  }

  .roster-header {
    padding: 28px 14px 15px;
  }

  .roster-section {
    padding: 0 14px 40px;
  }

  .character-card {
    grid-template-columns: minmax(122px, 38%) 1fr;
  }

  .character-info {
    padding: 17px 15px;
  }
}

@media (max-width: 560px) {
  .document-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .music-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-reader-header {
    display: block;
  }

  .document-reader-header .source-link {
    margin-top: 12px;
  }

  .gallery-detail-image-wrap {
    min-height: 240px;
    padding: 10px;
  }

  .gallery-detail-card figcaption {
    display: block;
  }

  .gallery-detail-card .source-link {
    margin-top: 14px;
  }

  .chapter-reader-header {
    display: block;
  }

  .chapter-reader-header .source-link {
    margin-top: 14px;
  }

  .story-timeline-header {
    align-items: flex-start;
  }

  .conflict-layer-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .conflict-mask {
    grid-template-columns: auto auto;
    gap: 7px;
  }

  .conflict-mask span {
    writing-mode: horizontal-tb;
  }

  .conflict-mask i {
    margin: 0;
    transform: rotate(90deg);
  }

  .conflict-consequence {
    grid-template-columns: 1fr;
    gap: 8px;
  }

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

  .conflict-consequence li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #3b3d43;
  }

  .conflict-consequence li:nth-child(4) {
    border-top: 1px solid #3b3d43;
  }

  .gradual-reveal {
    grid-template-columns: 1fr;
    margin: 14px;
    padding: 18px;
  }

  .gradual-reveal ol {
    grid-template-columns: 1fr;
  }

  .gradual-reveal aside {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gradual-reveal li + li {
    padding-left: 0;
    border-top: 1px solid #3b3d43;
    border-left: 0;
  }

  .timeline-legend {
    align-items: flex-end;
    flex-direction: column;
    gap: 7px;
  }

  .timeline-track {
    grid-auto-columns: 210px;
    padding: 20px 14px 18px;
    scroll-padding-left: 14px;
  }

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

  .moment-system-flow > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .moment-system-flow article {
    padding: 16px;
  }

  .moment-phase-track {
    grid-auto-columns: 165px;
  }

  .moment-toolbar,
  .moment-reader-grid,
  .moment-placement > div,
  .moment-continuity > div,
  .moment-neighbors {
    grid-template-columns: 1fr;
  }

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

  .moment-reader-hero {
    padding: 25px 20px;
  }

  .moment-reader-code {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 22px;
  }

  .moment-placement > div > *,
  .moment-continuity > div > article {
    border-right: 0;
    border-bottom: 1px solid #3b3d43;
  }

  .moment-placement > div > *:last-child,
  .moment-continuity > div > article:last-child {
    border-bottom: 0;
  }

  .moment-neighbors a:last-child {
    text-align: left;
  }
}

/* Character-centered profile archive */
.character-card {
  position: relative;
}

.character-card-link {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
}

.character-card:has(.character-card-link:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.character-card-link:focus-visible {
  outline: 0;
}

.character-profile-main-pane {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  background: #313338;
}

.character-profile-main-pane .feed-header {
  top: 0;
}

.character-profile-content {
  padding: 0 30px 60px;
}

.character-breadcrumbs { padding-top: 0; }

.character-profile-hero {
  display: grid;
  grid-template-columns: minmax(260px, 37%) minmax(0, 1fr);
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .28);
  border-radius: 9px;
  background: #2b2d31;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.character-profile-portrait {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .26);
  background: #24262a;
}

.character-profile-portrait::after {
  content: none;
}

.character-profile-portrait.profile-accent-blue { background-color: #25303e; }
.character-profile-portrait.profile-accent-amber { background-color: #3a3024; }
.character-profile-portrait.profile-accent-red { background-color: #392629; }
.character-profile-portrait.profile-accent-violet { background-color: #30283c; }
.character-profile-portrait.profile-accent-green { background-color: #26362f; }
.character-profile-portrait.profile-accent-neutral { background-color: #2a2b2f; }

.character-profile-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 410px;
  object-fit: cover;
  object-position: center top;
}

.profile-portrait-stage { position: absolute; inset: 0; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.profile-portrait-stage img { -webkit-user-drag: none; }
.profile-art-zone { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; height: 100%; appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
.profile-art-zone-previous { left: 0; }
.profile-art-zone-next { right: 0; }
.profile-portrait-stage.is-dragging .profile-art-zone { cursor: grabbing; }
.has-art-browser .profile-art-zone:focus-visible { outline-offset: -4px; }
.character-profile-portrait .profile-portrait-stage img { position: absolute; inset: 0; min-height: 0; object-position: center top; }
.profile-portrait-strip { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.character-profile-portrait .profile-portrait-strip img:first-child { left: -100%; right: auto; }
.character-profile-portrait .profile-portrait-strip img:last-child { left: 100%; right: auto; }
.profile-art-overlay { position: absolute; z-index: 2; bottom: 12px; left: 12px; right: 12px; pointer-events: none; }
.moment-scene-prose { padding: clamp(20px, 4vw, 40px); border: 1px solid #404249; border-radius: 8px; background: #232428; margin: 24px 0; }
.moment-scene-prose p { max-width: 72ch; margin: 0 auto 1.2em; line-height: 1.8; }
.moment-scene-prose h2 { max-width: 36ch; margin: 0 auto 24px; }
.moment-scene-prose[hidden] { display: none; }
.moment-scene-prose.has-behavior-notes { padding-inline-start: clamp(44px, 4vw, 72px); }
.moment-scene-prose p.behavior-annotated { position: relative; }
.moment-scene-prose p.behavior-annotated .behavior-gutter { position: absolute; inset-inline-start: -32px; top: .2em; }
.profile-art-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 0 8px 8px; }
.profile-art-thumbnails button { flex: 0 0 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.profile-art-thumbnails { pointer-events: auto; }
.character-profile-portrait .profile-art-thumbnails img { width: 44px; height: 52px; min-height: 0; border-radius: 6px; object-fit: cover; }
.profile-art-zone[hidden], .profile-art-thumbnails[hidden] { display: none; }
.has-art-browser button:focus-visible { outline: 2px solid #b5b8ff; outline-offset: 2px; }

.timeline-arc-key { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 18px; border-bottom: 1px solid #404249; font-size: .65rem; color: #b5bac1; }
.arc-timeline > li, .timeline-arc-key > span { --arc-color: #85888f; }
.arc-timeline > [data-story-arc="arc-0"], .timeline-arc-key > [data-story-arc="arc-0"] { --arc-color: #c1aa82; }
.arc-timeline > [data-story-arc="arc-1"], .timeline-arc-key > [data-story-arc="arc-1"] { --arc-color: #9599d8; }
.arc-timeline > [data-story-arc="arc-2"], .timeline-arc-key > [data-story-arc="arc-2"] { --arc-color: #80b9b4; }
.timeline-arc-key > span { border-left: 3px solid var(--arc-color); padding-left: 8px; }
.timeline-arc-band { display: block; height: 40px; box-sizing: border-box; padding: 7px 0; border-top: 2px solid var(--arc-color); color: var(--arc-color); font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-track.arc-timeline > li:not(:last-child)::after, .character-timeline-track.arc-timeline > li:not(:last-child)::after { top: 56px; }

.profile-portrait-placeholder {
  display: grid;
  width: 100%;
  min-height: 410px;
  place-items: center;
  color: rgba(255, 255, 255, .6);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -.08em;
}

.profile-portrait-note {
  position: absolute;
  z-index: 2;
  right: 17px;
  bottom: 14px;
  color: rgba(255, 255, 255, .64);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.character-profile-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px);
}

.profile-record-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
  color: #9499a6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-record-line span:last-child {
  padding: 5px 8px;
  border: 1px solid rgba(240, 178, 50, .28);
  border-radius: 4px;
  background: rgba(240, 178, 50, .08);
  color: #d8b56b;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
}

#character-profile-age {
  color: #c7cbd1;
  font-weight: 750;
}

.character-profile-intro h1 {
  margin: 5px 0 16px;
  color: #fff;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: -.055em;
  line-height: .94;
}

.character-profile-summary {
  max-width: 760px;
  margin: 0 0 23px;
  color: #c5c7ce;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  line-height: 1.65;
}

.character-profile-name-meaning {
  max-width: 760px;
  margin: -10px 0 23px;
  color: #aeb2bd;
  font-size: .85rem;
  line-height: 1.6;
  scroll-margin-top: 110px;
}

.character-profile-intro .faction-badges {
  max-width: 100%;
  justify-content: flex-start;
}

.character-personal-timeline {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .26);
  border-radius: 8px;
  background: #27282c;
}

.character-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid #3b3d43;
  background: #2b2d31;
}

.character-section-header .eyebrow {
  margin: 0 0 4px;
  font-size: .55rem;
}

.character-section-header h2 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.character-section-header > span {
  color: #aeb1ba;
  font-size: .58rem;
  font-weight: 700;
  white-space: nowrap;
}

.character-section-header > span span {
  color: #8b95ff;
}

.character-timeline-track {
  display: grid;
  grid-auto-columns: 260px;
  grid-auto-flow: column;
  margin: 0;
  padding: 24px 18px 22px;
  overflow-x: auto;
  list-style: none;
  cursor: grab;
  overscroll-behavior-inline: contain;
  scroll-padding-left: 18px;
  scroll-snap-type: x proximity;
  scrollbar-color: #4e5058 #202125;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.character-timeline-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.character-timeline-track:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}

.character-timeline-track li {
  position: relative;
  min-width: 0;
  padding: 0 12px;
  scroll-snap-align: start;
}

.character-timeline-track li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 16px;
  left: 46px;
  width: calc(100% - 12px);
  height: 2px;
  background: #42444b;
  content: "";
}

.character-timeline-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  place-items: center;
  border: 4px solid #27282c;
  border-radius: 50%;
  background: #5865f2;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .56rem;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(88, 101, 242, .35);
}

.character-timeline-track small {
  color: #8d91a0;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.character-timeline-track h3 {
  margin: 5px 0 7px;
  color: #fff;
  font-size: .84rem;
}

.character-timeline-track p {
  margin: 0;
  color: var(--subtle);
  font-size: .66rem;
  line-height: 1.5;
}

.character-timeline-track li.has-moments .character-timeline-marker {
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .45);
}

.character-timeline-moments {
  display: grid;
  gap: 5px;
  margin-top: 11px;
}

.character-timeline-moments a {
  padding: 5px 7px;
  border: 1px solid rgba(139, 149, 255, .3);
  border-radius: 4px;
  background: rgba(88, 101, 242, .08);
  color: #bec3ff;
  font-size: .53rem;
  font-weight: 750;
  line-height: 1.35;
}

.character-moments {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #2b2d31;
}

.character-moments[hidden] {
  display: none;
}

.character-moments .character-section-header > a {
  color: #aeb4ff;
  font-size: .58rem;
  font-weight: 750;
}

.character-moment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: #3b3d43;
}

.character-moment-card {
  display: block;
  min-width: 0;
  padding: 17px;
  background: #292a2f;
  color: inherit;
}

.character-moment-card:hover {
  background: #303238;
}

.character-moment-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #9298ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .51rem;
}

.character-moment-card > div small {
  color: #858a94;
  font: inherit;
}

.character-moment-card h3 {
  margin: 12px 0 7px;
  color: #f2f3f5;
  font-size: .78rem;
}

.character-moment-card p {
  margin: 0;
  color: #a9adb6;
  font-size: .63rem;
  line-height: 1.5;
}

.character-moment-card > strong {
  display: block;
  margin-top: 12px;
  color: #b8beff;
  font-size: .54rem;
}

.character-profile-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.profile-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: #2b2d31;
}

.profile-section > header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-bottom: 1px solid #3b3d43;
}

.profile-section > header > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 5px;
  background: #35373c;
  color: #9499a6;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
}

.profile-section > header .eyebrow {
  margin: 0 0 3px;
  font-size: .52rem;
}

.profile-section > header h2 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
}

.profile-biography,
.profile-connections,
.profile-nature,
.profile-tradecraft,
.profile-magecraft,
.profile-equipment {
  grid-column: 1 / -1;
}

.profile-equipment > header > span {
  background: rgba(79, 181, 255, .12);
  color: #8cc9f7;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #3a3c42;
}

.equipment-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 170px;
  padding: 20px;
  background: #2b2d31;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease;
}

.equipment-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

a.equipment-card:hover,
a.equipment-card:focus-visible {
  background: #303238;
}

.equipment-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(79, 181, 255, .4);
  border-radius: 5px;
  color: #8cc9f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
}

.equipment-copy small {
  color: #8cc9f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.equipment-copy h3 {
  margin: 6px 0 9px;
  color: #f2f3f5;
  font-size: .9rem;
}

.equipment-copy > p {
  max-width: 900px;
  margin: 12px 0 0;
  color: var(--subtle);
  font-size: .68rem;
  line-height: 1.65;
}

.equipment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equipment-meta span {
  padding: 4px 7px;
  border: 1px solid #41444b;
  border-radius: 4px;
  color: #b6bac4;
  font-size: .56rem;
}

.equipment-link {
  display: inline-block;
  margin-top: 14px;
  color: #8cc9f7;
  font-size: .6rem;
}

.profile-nature > header > span {
  background: rgba(165, 107, 255, .14);
  color: #c39bff;
}

.profile-tradecraft > header > span {
  background: rgba(240, 178, 50, .12);
  color: #e5bf6d;
}

.profile-magecraft > header > span {
  background: rgba(88, 101, 242, .14);
  color: #aeb6ff;
}

.nature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #3a3c42;
}

.nature-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  min-height: 176px;
  padding: 19px 18px;
  background: #2b2d31;
}

.nature-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(165, 107, 255, .48);
  border-radius: 5px;
  color: #c39bff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
}

.nature-card small {
  color: #b98cf4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nature-card h3 {
  margin: 6px 0 8px;
  color: #f2f3f5;
  font-size: .83rem;
}

.nature-card p {
  margin: 0;
  color: var(--subtle);
  font-size: .67rem;
  line-height: 1.6;
}

.magecraft-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #3a3c42;
}

.magecraft-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  min-height: 154px;
  padding: 19px 18px;
  background: #2b2d31;
}

.magecraft-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 0;
}

.magecraft-index {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(88, 101, 242, .48);
  border-radius: 5px;
  color: #aeb6ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
}

.magecraft-card small {
  color: #8f97f7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.magecraft-card h3 {
  margin: 6px 0 8px;
  color: #f2f3f5;
  font-size: .83rem;
}

.magecraft-card p {
  margin: 0;
  color: var(--subtle);
  font-size: .67rem;
  line-height: 1.6;
}

.tradecraft-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #3a3c42;
}

.tradecraft-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  min-height: 170px;
  padding: 18px 16px;
  background: #2b2d31;
}

.tradecraft-index {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(240, 178, 50, .38);
  border-radius: 4px;
  color: #d8b56b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .52rem;
}

.tradecraft-card small {
  color: #c7a75f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .5rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tradecraft-card h3 {
  margin: 6px 0 8px;
  color: #f2f3f5;
  font-size: .8rem;
}

.tradecraft-card p {
  margin: 0;
  color: var(--subtle);
  font-size: .65rem;
  line-height: 1.58;
}

.appearance-ledger {
  display: grid;
  grid-template-columns: minmax(100px, 28%) minmax(0, 1fr);
  margin: 0;
  padding: 4px 18px 14px;
}

.appearance-ledger dt,
.appearance-ledger dd {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid #3a3c42;
  font-size: .69rem;
  line-height: 1.5;
}

.appearance-ledger dt {
  color: #9499a6;
  font-weight: 750;
}

.appearance-ledger dd {
  color: #d4d6dc;
}

.appearance-ledger .appearance-comparison {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
}

.appearance-comparison-disclosure { margin: 0; }
.appearance-comparison-disclosure > summary {
  min-height: 44px;
  padding: 12px 0;
  box-sizing: border-box;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 700;
  cursor: pointer;
}
.appearance-comparison-disclosure > summary::marker { color: var(--accent-bright); }
.appearance-comparison-disclosure > summary:hover { color: var(--text); }
.appearance-comparison-disclosure > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.appearance-comparison-disclosure[open] { padding-bottom: 12px; }

.appearance-comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .64rem;
  line-height: 1.65;
}

.appearance-comparison-table th,
.appearance-comparison-table td {
  padding: 8px 0;
  border-bottom: 1px solid #3a3c42;
  text-align: left;
  vertical-align: top;
}

.appearance-comparison-table th {
  width: 26%;
  padding-right: 10px;
  color: var(--muted);
  font-weight: 500;
}

.appearance-comparison-table tr:last-child > * { border-bottom: 0; }
.appearance-comparison-chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; }
.appearance-comparison-step { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.appearance-comparison-symbol { color: var(--subtle); }
.appearance-comparison-name { display: inline-block; padding: 1px 3px; }
.appearance-comparison-table mark {
  border-radius: 3px;
  background: var(--accent-wash);
  color: #c7ccff;
  box-shadow: inset 0 -1px 0 var(--accent-bright);
  font-weight: 750;
}
.appearance-comparison-key { margin: 7px 0 0; color: var(--subtle); font-size: .55rem; line-height: 1.6; }

.personality-spectrum {
  display: grid;
  gap: 18px;
  padding: 22px 18px 24px;
}

.personality-type-meta {
  --type-color: #d2a8ff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  min-width: 170px;
  margin-left: auto;
  padding-left: 18px;
  border-left: 1px solid #45474e;
  text-align: left;
}

.personality-type-meta strong {
  color: var(--type-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  letter-spacing: .04em;
}

.personality-type-meta span {
  color: #989ca7;
  font-size: .43rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.personality-type-suspected {
  --type-color: #c79ae9;
}

.personality-type-undiscussed {
  --type-color: #858995;
}

.personality-summary {
  margin: 0;
  padding: 0 0 19px;
  border-bottom: 1px solid #3a3c42;
  color: #c9cbd1;
  font-size: .7rem;
  line-height: 1.65;
}

.skill-graph-layout {
  --skill-color: #8b95ff;
  --skill-fill: rgba(88, 101, 242, .2);
  display: grid;
  gap: 14px;
}

.capability-ledger-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 18px 18px;
  padding: 13px 14px;
  border: 1px solid #3f4147;
  border-radius: 6px;
  background: #25262b;
  transition: border-color .18s ease, background .18s ease;
}

.capability-ledger-link:hover,
.capability-ledger-link:focus-visible {
  border-color: #5865f2;
  background: #292b31;
}

.capability-ledger-link span {
  color: #8790ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.capability-ledger-link strong {
  color: #dbdee1;
  font-size: .68rem;
}

.capability-ledger-link i {
  color: #aeb4ff;
  font-style: normal;
}

.skill-accent-amber { --skill-color: #d8b56b; --skill-fill: rgba(240, 178, 50, .17); }
.skill-accent-red { --skill-color: #f07d7f; --skill-fill: rgba(237, 66, 69, .17); }
.skill-accent-violet { --skill-color: #c69aef; --skill-fill: rgba(171, 111, 232, .18); }
.skill-accent-green { --skill-color: #72d99b; --skill-fill: rgba(35, 165, 90, .18); }
.skill-accent-neutral { --skill-color: #b9bdc7; --skill-fill: rgba(174, 177, 186, .14); }

.skill-radar-figure {
  margin: 0;
  padding: 10px 8px 12px;
  border: 1px solid #3a3c42;
  border-radius: 6px;
  background: #25262a;
}

.skill-radar {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.skill-radar-grid {
  fill: none;
  stroke: #41434a;
  stroke-width: 1;
}

.skill-radar-axis {
  stroke: #4b4e56;
  stroke-width: 1;
}

.skill-radar-label {
  fill: #aeb1ba;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.skill-radar-shape {
  fill: var(--skill-fill);
  stroke: var(--skill-color);
  stroke-linejoin: round;
  stroke-width: 2.4;
  animation: skill-radar-arrive .6s var(--ease) both;
}

.skill-radar-point {
  fill: #25262a;
  stroke: var(--skill-color);
  stroke-width: 2;
}

@keyframes skill-radar-arrive {
  from { opacity: 0; transform: scale(.82); transform-origin: 180px 145px; }
  to { opacity: 1; transform: scale(1); transform-origin: 180px 145px; }
}

.skill-radar-figure figcaption {
  max-width: 390px;
  margin: -4px auto 0;
  color: #858995;
  font-size: .55rem;
  line-height: 1.45;
  text-align: center;
}

.skill-graph-ledger {
  display: grid;
  gap: 8px;
}

.skill-graph-extremes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.skill-extreme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 10px 11px;
  border: 1px solid #3a3c42;
  border-radius: 5px;
  background: #25262a;
}

.skill-extreme small {
  grid-column: 1 / -1;
  color: #858995;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.skill-extreme strong {
  color: #dbdee1;
  font-size: .66rem;
}

.skill-extreme span {
  color: var(--skill-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .54rem;
}

.skill-extreme-weak {
  box-shadow: inset 2px 0 #4e5058;
}

.skill-value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr) auto);
  margin: 0;
  overflow: hidden;
  border: 1px solid #3a3c42;
  border-radius: 5px;
  background: #25262a;
}

.skill-value-list dt,
.skill-value-list dd {
  margin: 0;
  padding: 8px 9px;
  border-bottom: 1px solid #36383e;
  font-size: .55rem;
}

.skill-value-list dt {
  color: #aeb1ba;
  font-weight: 700;
}

.skill-value-list dd {
  color: #858995;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.skill-value-list dt:nth-of-type(5),
.skill-value-list dt:nth-of-type(6),
.skill-value-list dd:nth-of-type(5),
.skill-value-list dd:nth-of-type(6) {
  border-bottom: 0;
}

.personality-notes {
  padding-top: 16px;
  border-top: 1px solid #3a3c42;
}

.personality-notes > strong {
  display: block;
  margin-bottom: 8px;
  color: #9296a3;
  font-size: .52rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.personality-notes > div {
  display: grid;
  gap: 6px;
}

.personality-notes article {
  padding: 10px 11px;
  border: 1px solid #3a3c42;
  border-radius: 5px;
  background: #25262a;
}

.personality-notes h3 {
  margin: 0;
  color: #dbdee1;
  font-size: .64rem;
}

.personality-notes p {
  margin: 5px 0 0;
  color: var(--subtle);
  font-size: .59rem;
  line-height: 1.5;
}

.biography-stages,
.motivation-list {
  margin: 0;
  padding: 7px 18px 17px;
  list-style: none;
}

.biography-stages li,
.motivation-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid #3a3c42;
}

.biography-stages li:last-child,
.motivation-list li:last-child {
  border-bottom: 0;
}

.biography-stages li > span,
.motivation-list li > span {
  color: #8b95ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .63rem;
  font-weight: 800;
}

.biography-stages h3,
.motivation-list h3,
.connection-card h3,
.conflict-stack h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: .78rem;
}

.biography-stages p,
.motivation-list p,
.connection-card p,
.conflict-stack p {
  margin: 0;
  color: var(--subtle);
  font-size: .68rem;
  line-height: 1.55;
}

.relationship-map-host {
  border-bottom: 1px solid #3a3c42;
  background: #232428;
}

.relationship-map {
  padding: 18px;
}

.relationship-map-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.relationship-map-meta > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.relationship-map-meta strong {
  color: #dbdee1;
  font-size: .65rem;
}

.relationship-map-meta span {
  color: #858995;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .49rem;
  letter-spacing: .04em;
}

.relationship-map-instruction {
  text-align: right;
}

.relationship-map-stage {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid #383a41;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background-color: #202125;
}

.relationship-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.relationship-map-edge {
  stroke: #555862;
  stroke-width: 1.5;
  opacity: .72;
  transition: stroke .16s ease, stroke-width .16s ease, opacity .16s ease;
}

.relationship-map-edge.is-friction {
  stroke: #925d64;
  stroke-dasharray: 5 5;
}

.relationship-map-edge.is-secondary {
  stroke-width: 1;
  opacity: .34;
}

.relationship-map-edge.is-active {
  stroke: #8993ff;
  stroke-width: 2.2;
  opacity: 1;
}

.relationship-node {
  position: absolute;
  z-index: 2;
  display: grid;
  min-width: 94px;
  justify-items: center;
  gap: 7px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #b5bac1;
  font: inherit;
  transform: translate(-50%, -50%);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  /* Position and string endpoints must update together, including reduced motion. */
  transition-property: color;
}

.relationship-node * {
  -webkit-user-drag: none;
}

.relationship-node.is-center {
  cursor: pointer;
}

.relationship-node.is-dragging {
  z-index: 3;
  cursor: grabbing;
}

.relationship-node-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #4a4d55;
  border-radius: 50%;
  background: #313338;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
  color: #b9bdc7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .64rem;
  font-weight: 800;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.relationship-node.is-center .relationship-node-avatar {
  width: 74px;
  height: 74px;
  border-color: #6973de;
  box-shadow: 0 0 0 5px rgba(88, 101, 242, .1), 0 8px 18px rgba(0, 0, 0, .32);
}

.relationship-node-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.relationship-node-name {
  max-width: 110px;
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 4px;
  background: rgba(35, 36, 40, .92);
  color: #c7c9cf;
  font-size: .55rem;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relationship-node:hover .relationship-node-avatar,
.relationship-node:focus-visible .relationship-node-avatar,
.relationship-node.is-selected .relationship-node-avatar {
  border-color: #8993ff;
  box-shadow: 0 0 0 4px rgba(88, 101, 242, .14), 0 8px 18px rgba(0, 0, 0, .34);
}

.relationship-node:focus-visible {
  outline: 0;
}

.relationship-node:focus-visible .relationship-node-name,
.relationship-node.is-selected .relationship-node-name {
  border-color: #5962b8;
  background: #30323a;
  color: #fff;
}

.timeline-panel-links {
  margin-top: 14px;
  border-top: 1px solid #3f4147;
  padding-top: 10px;
}

.timeline-panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 0;
  border-radius: 4px;
  color: #d5d7df;
  text-decoration: none;
  cursor: pointer;
}

.timeline-panel-link img {
  flex: 0 0 56px;
  width: 56px;
  height: 42px;
  border-radius: 4px;
  object-fit: contain;
  background: #1e1f22;
}

.timeline-panel-link > span { min-width: 0; }
.timeline-panel-label { display: block; margin-bottom: 3px; color: #a5a9b4; font-size: .5rem; line-height: 1.4; }
.timeline-panel-link strong { display: block; font-size: .65rem; line-height: 1.45; font-weight: 650; }
.timeline-panel-link:hover { background: #303238; color: #c4c8ff; }
.timeline-panel-link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.relationship-map-detail {
  border: 1px solid #383a41;
  border-radius: 0 0 7px 7px;
  background: #27282d;
}

.relationship-map-detail-inner {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  width: min(100%, 1180px);
  margin-inline: auto;
  padding: 24px 28px;
  gap: 30px;
}

.relationship-map-detail-visual {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 30px;
  border-right: 1px solid #3b3d43;
}

.relationship-map-detail-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.relationship-map-detail-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #4a4d55;
  border-radius: 50%;
  background: #313338;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
  color: #c1c4cb;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .55rem;
  font-weight: 800;
}

.relationship-map-detail-avatar.is-origin {
  width: 44px;
  height: 44px;
}

.relationship-map-detail-avatar.is-target {
  border-color: #7782ed;
  box-shadow: 0 0 0 4px rgba(88, 101, 242, .1), 0 6px 16px rgba(0, 0, 0, .3);
}

.relationship-map-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.relationship-map-detail-avatar[hidden],
.relationship-map-detail-connector[hidden],
.relationship-map-detail-link[hidden] {
  display: none;
}

.relationship-map-detail-connector {
  position: relative;
  width: 32px;
  height: 1px;
  background: #535762;
}

.relationship-map-detail-connector::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 2px solid #27282d;
  border-radius: 50%;
  background: #8993ff;
  content: "";
  transform: translate(-50%, -50%);
}

.relationship-map-detail-pair.is-current-profile .relationship-map-detail-avatar.is-origin {
  width: 52px;
  height: 52px;
  border-color: #7782ed;
}

.relationship-map-detail-counter {
  margin-top: 11px;
  color: #969aa5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .46rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.relationship-map-detail-pager {
  display: flex;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}

.relationship-map-detail-pager span {
  color: #7e828d;
  font-size: .45rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.relationship-map-detail-pager button {
  display: grid;
  width: 28px;
  height: 25px;
  padding: 0;
  place-items: center;
  border: 1px solid #44474f;
  border-radius: 4px;
  background: #303137;
  color: #c3c7ff;
  cursor: pointer;
  font: inherit;
  font-size: .55rem;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.relationship-map-detail-pager button:hover,
.relationship-map-detail-pager button:focus-visible {
  border-color: #6973de;
  outline: 0;
  background: #373a48;
  color: #fff;
}

.relationship-map-detail-pager button:disabled {
  cursor: default;
  opacity: .34;
}

.relationship-map-detail-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.relationship-map-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.relationship-map-detail-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #8c9099;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .45rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.relationship-map-detail h3 {
  margin: 0;
  color: #f2f3f5;
  font-size: .92rem;
  line-height: 1.2;
}

.relationship-map-detail p {
  max-width: 820px;
  margin: 13px 0 0;
  color: #b8bbc2;
  font-size: .66rem;
  line-height: 1.65;
}

.relationship-map-detail-kind {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(137, 147, 255, .38);
  border-radius: 4px;
  background: rgba(88, 101, 242, .09);
  color: #aeb5ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .45rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.relationship-map-detail-actions {
  display: flex;
  align-items: center;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid #3b3d43;
}

.relationship-map-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #4b4f62;
  border-radius: 5px;
  background: #30323a;
  color: #c2c7ff;
  font-size: .52rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}

.relationship-map-detail-link:hover,
.relationship-map-detail-link:focus-visible {
  border-color: #6f79df;
  outline: 0;
  background: #383b49;
  color: #fff;
}

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

.connection-card {
  padding: 16px;
  border: 1px solid #3a3c42;
  border-radius: 6px;
  background: #27282c;
}

.connection-card small {
  display: block;
  margin-bottom: 11px;
  color: #8b95ff;
  font-size: .51rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.conflict-stack {
  padding: 7px 18px 17px;
}

.conflict-stack article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid #3a3c42;
}

.conflict-stack article:last-child {
  border-bottom: 0;
}

.conflict-stack article > span {
  align-self: start;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(237, 66, 69, .1);
  color: #f08a8c;
  font-size: .52rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.character-profile-error {
  margin: 60px 30px;
}

@media (max-width: 820px) {
  .character-profile-main-pane {
    height: auto;
    min-height: calc(100vh - 53px);
    overflow: visible;
  }

  .character-profile-main-pane .feed-header {
    display: none;
  }

  .character-profile-content {
    padding: 0 14px 40px;
  }

  .character-profile-hero {
    grid-template-columns: minmax(210px, 38%) minmax(0, 1fr);
  }

  .character-profile-intro {
    padding: 28px;
  }

}

@media (max-width: 620px) {
  .character-profile-hero {
    display: block;
  }

  .character-profile-portrait,
  .character-profile-portrait img,
  .profile-portrait-placeholder {
    min-height: 360px;
  }

  .character-profile-portrait {
    height: 360px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .26);
  }

  .character-profile-intro h1 {
    font-size: clamp(2.8rem, 16vw, 4.5rem);
  }

  .profile-personality > header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-personality .personality-type-meta {
    width: calc(100% - 41px);
    min-width: 0;
    margin: 8px 0 0 41px;
    padding: 10px 0 0;
    border-top: 1px solid #3b3d43;
    border-left: 0;
    text-align: left;
  }

  .character-profile-sections {
    display: block;
  }

  .profile-section {
    margin-top: 14px;
  }

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

  .relationship-map {
    padding: 12px;
  }

  .relationship-map-meta,
  .relationship-map-meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .relationship-map-meta {
    gap: 7px;
  }

  .relationship-map-instruction {
    text-align: left;
  }

  .relationship-map-stage {
    min-height: 500px;
    background-size: 30px 30px;
  }

  .relationship-node {
    min-width: 72px;
    gap: 5px;
  }

  .relationship-node-avatar {
    width: 48px;
    height: 48px;
  }

  .relationship-node.is-center .relationship-node-avatar {
    width: 62px;
    height: 62px;
  }

  .relationship-node-name {
    max-width: 82px;
    padding: 3px 5px;
    font-size: .48rem;
  }

  .relationship-map-detail {
    background: #27282d;
  }

  .relationship-map-detail-inner {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }

  .relationship-map-detail-visual {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 0 0 15px;
    border-right: 0;
    border-bottom: 1px solid #3b3d43;
    gap: 4px 12px;
  }

  .relationship-map-detail-pair {
    grid-row: 1 / 3;
    justify-content: flex-start;
    width: auto;
  }

  .relationship-map-detail-counter {
    align-self: end;
    margin: 0;
    white-space: nowrap;
  }

  .relationship-map-detail-pager {
    align-self: start;
    margin: 0;
  }

  .relationship-map-detail-header {
    gap: 12px;
  }

  .relationship-map-detail p {
    margin-top: 11px;
    font-size: .62rem;
  }

  .relationship-map-detail-actions {
    margin-top: 14px;
    padding-top: 12px;
  }

  .magecraft-grid,
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .equipment-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

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

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

  .profile-record-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .character-timeline-track {
    grid-auto-columns: 230px;
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .relationship-map-edge,
  .relationship-node-avatar {
    transition: none;
  }
}

/* World archive and institution records */
.world-workspace {
  display: grid;
  width: 100%;
  max-width: none;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 280px;
  margin: 0;
  overflow: hidden;
}

.world-main-pane {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #1e1f22;
}

.world-scroll {
  height: calc(100% - 48px);
  overflow-y: auto;
  scroll-behavior: smooth;
}

.world-hero,
.world-record-section,
.world-planned,
.world-term-guide,
.world-breadcrumbs,
.institution-hero,
.institution-section,
.canon-gaps {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.world-hero {
  display: grid;
  min-height: 310px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding: clamp(42px, 7vw, 82px);
  border-bottom: 1px solid #393b42;
  background: #232428;
}

.world-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #f2f3f5;
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.world-hero > div > p:last-child {
  max-width: 680px;
  margin: 24px 0 0;
  color: #b5bac1;
  line-height: 1.7;
}

.world-hero dl {
  display: grid;
  grid-template-columns: repeat(2, 108px);
  margin: 0;
  border: 1px solid #393b42;
  border-radius: 7px;
}

.world-hero dl div {
  padding: 18px;
}

.world-hero dl div + div {
  border-left: 1px solid #393b42;
}

.world-hero dt {
  color: #8f949c;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.world-hero dd {
  margin: 7px 0 0;
  color: #dbdee1;
  font-size: 1.45rem;
  font-weight: 750;
}

.world-record-section,
.world-planned {
  padding-block: 58px;
}

.world-section-heading {
  display: grid;
  grid-template-columns: 80px minmax(250px, .75fr) minmax(280px, 1fr);
  align-items: end;
  gap: 28px;
  margin-bottom: 28px;
}

.world-section-heading > div > span,
.institution-section-heading > span {
  color: #8790ff;
  font-family: Consolas, monospace;
  font-size: .74rem;
}

.world-section-heading .eyebrow {
  margin: 6px 0 0;
}

.world-section-heading h2,
.world-planned h2,
.institution-section-heading h2,
.canon-gaps h2 {
  margin: 0;
  color: #f2f3f5;
  font-size: clamp(1.55rem, 2.8vw, 2.65rem);
  letter-spacing: -.035em;
}

.world-section-heading > p {
  margin: 0;
  color: #949ba4;
  line-height: 1.65;
}

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

.world-record-card {
  display: grid;
  min-height: 310px;
  grid-template-columns: minmax(140px, .7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.world-record-card:first-child {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}

.world-record-card:hover,
.world-record-card:focus-visible {
  border-color: #5865f2;
  background: #303238;
  transform: translateY(-2px);
}

.world-record-visual {
  position: relative;
  display: grid;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .26);
  background: #232428;
}

.world-record-visual span {
  z-index: 2;
  color: #b3b9ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 5.6rem);
  font-weight: 700;
}

.world-record-visual i {
  position: absolute;
  width: 160px;
  height: 1px;
  background: #3f424a;
  transform: rotate(45deg);
}

.world-record-visual i + i {
  transform: rotate(-45deg);
}

.world-record-msf .world-record-visual span {
  font-family: Consolas, monospace;
  font-size: clamp(1.8rem, 3.5vw, 3.8rem);
  letter-spacing: .08em;
}

.world-record-church .world-record-visual span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 400;
}

.world-record-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px);
}

.world-record-copy > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.world-record-copy > div span,
.world-record-copy > div b,
.world-record-link,
.world-planned-grid article > b {
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.world-record-copy > div span {
  color: #8790ff;
}

.world-record-copy > div b {
  color: #72767d;
}

.world-record-copy h3 {
  margin: 18px 0 12px;
  color: #f2f3f5;
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  letter-spacing: -.035em;
}

.world-record-copy p {
  margin: 0;
  color: #b5bac1;
  line-height: 1.65;
}

.world-record-link {
  margin-top: 28px;
  color: #b3b9ff;
}

.world-record-link i {
  margin-left: 5px;
  font-style: normal;
}

.world-planned {
  border-top: 1px solid #393b42;
}

.world-planned > header {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(320px, 1.3fr);
  gap: 32px;
  margin-bottom: 24px;
}

.world-planned > header .eyebrow {
  grid-column: 1;
  margin-bottom: 10px;
}

.world-planned > header h2 {
  grid-column: 1;
}

.world-planned > header > p:last-child {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  margin: 0;
  color: #949ba4;
  line-height: 1.65;
}

.world-planned-grid {
  border: 1px solid #393b42;
  border-radius: 8px;
}

.world-planned-grid article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}

.world-planned-grid article + article {
  border-top: 1px solid #393b42;
}

.world-planned-grid article > span {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .68rem;
}

.world-planned-grid h3 {
  margin: 0 0 4px;
  color: #dbdee1;
  font-size: .96rem;
}

.world-planned-grid p {
  margin: 0;
  color: #949ba4;
  font-size: .8rem;
}

.world-planned-grid article > b {
  color: #72767d;
}

.world-breadcrumbs {
  padding-top: 22px;
}

.institution-hero {
  display: grid;
  min-height: 430px;
  grid-template-columns: 230px minmax(0, 1fr) 280px;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.institution-monogram {
  position: relative;
  display: grid;
  align-self: stretch;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .26);
  background: #232428;
}

.institution-monogram span {
  z-index: 2;
  color: #b3b9ff;
  font-family: Consolas, monospace;
  font-size: 2.45rem;
  font-weight: 750;
  letter-spacing: .06em;
}

.institution-monogram i {
  position: absolute;
  width: 1px;
  height: 70%;
  background: #3f424a;
  transform: rotate(35deg);
}

.institution-hero-church .institution-monogram span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6rem;
  font-weight: 400;
}

.institution-hero > div:nth-child(2) {
  padding-block: 48px;
}

.institution-hero h1 {
  margin: 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 5vw, 5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.institution-hero > div:nth-child(2) > p:last-child {
  max-width: 650px;
  margin: 24px 0 0;
  color: #b5bac1;
  line-height: 1.7;
}

.institution-hero dl {
  align-self: stretch;
  display: grid;
  align-content: center;
  margin: 0;
  border-left: 1px solid #393b42;
}

.institution-hero dl div {
  padding: 17px 24px;
}

.institution-hero dl div + div {
  border-top: 1px solid #393b42;
}

.institution-hero dt {
  color: #72767d;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.institution-hero dd {
  margin: 5px 0 0;
  color: #dbdee1;
  font-size: .88rem;
  font-weight: 650;
}

.institution-section {
  padding-top: 64px;
}

.institution-section-heading {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: end;
  margin-bottom: 24px;
}

.institution-section-heading .eyebrow {
  margin-bottom: 8px;
}

.mandate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #393b42;
  border-radius: 8px;
}

.mandate-grid article {
  min-height: 230px;
  padding: 28px;
}

.mandate-grid article + article {
  border-left: 1px solid #393b42;
}

.mandate-grid span,
.knowledge-layers article span,
.relation-matrix article span,
.boundary-record > div > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.mandate-grid h3,
.knowledge-layers h3 {
  margin: 20px 0 12px;
  color: #dbdee1;
  font-size: 1.1rem;
}

.mandate-grid p,
.knowledge-layers p,
.relation-matrix p,
.boundary-record p,
.story-contact p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.msf-private-compact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  border: 1px solid #393b42;
  border-radius: 8px;
  overflow: hidden;
  background: #292b30;
}

.msf-private-principle,
.msf-legal-mafia {
  padding: clamp(26px, 4vw, 44px);
}

.msf-private-principle > span,
.msf-legal-mafia > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.msf-private-principle h3 {
  margin: 18px 0 12px;
  color: #dbdee1;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
}

.msf-private-principle > p,
.msf-legal-mafia p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.7;
}

.msf-private-principle dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 28px 0 0;
  border: 1px solid #3d4048;
  border-radius: 6px;
}

.msf-private-principle dl div {
  padding: 18px;
}

.msf-private-principle dl div + div {
  border-left: 1px solid #3d4048;
}

.msf-private-principle dt {
  color: #72767d;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.msf-private-principle dd {
  margin: 7px 0 0;
  color: #dbdee1;
  line-height: 1.45;
}

.msf-legal-mafia {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid #393b42;
  background: #202126;
}

.msf-legal-mafia blockquote {
  margin: 20px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}

.succession-track {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid #393b42;
  border-radius: 8px;
  list-style: none;
}

.succession-track li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  padding: 24px;
}

.succession-track li + li {
  border-top: 1px solid #393b42;
}

.succession-track li > span {
  color: #72767d;
  font-family: Consolas, monospace;
}

.succession-track b {
  display: block;
  color: #f2f3f5;
  font-size: 1.1rem;
}

.succession-track small {
  color: #8790ff;
}

.succession-track p {
  margin: 9px 0 0;
  color: #aeb1b8;
  line-height: 1.6;
}

.pressure-layout,
.boundary-record,
.story-contact {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(300px, 1.1fr);
  gap: 34px;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid #393b42;
  border-left: 3px solid #5865f2;
  border-radius: 8px;
  background: #232428;
}

.suppression-intro,
.suppression-warning,
.suppression-link {
  border: 1px solid #393b42;
  border-left: 3px solid #a56bff;
  border-radius: 8px;
  background: #232428;
}

.suppression-intro {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr);
  gap: 34px;
  padding: clamp(28px, 5vw, 52px);
}

.suppression-intro > div > span,
.suppression-grid span,
.suppression-warning > span,
.suppression-link > span {
  color: #c39bff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.suppression-intro h3 {
  margin: 18px 0 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.3;
}

.suppression-intro p,
.suppression-grid p,
.suppression-warning p,
.suppression-link p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.suppression-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid #393b42;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #2b2d31;
}

.suppression-grid article {
  min-height: 220px;
  padding: 24px;
}

.suppression-grid article + article {
  border-left: 1px solid #393b42;
}

.suppression-grid h3 {
  margin: 18px 0 10px;
  color: #dbdee1;
  font-size: 1.05rem;
}

.suppression-warning,
.suppression-link {
  margin-top: 12px;
  padding: 20px 24px;
}

.suppression-warning p,
.suppression-link p {
  margin-top: 8px;
}

.suppression-link a {
  display: inline-block;
  margin-top: 12px;
  color: #b3b9ff;
  font-size: .75rem;
  font-weight: 700;
}

.pressure-layout strong {
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.3;
}

.pressure-layout p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.pressure-layout a,
.boundary-record > a,
.story-contact a {
  color: #b3b9ff;
  font-size: .75rem;
  font-weight: 700;
}

.pressure-layout a {
  grid-column: 2;
}

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

.institution-people a {
  display: grid;
  min-height: 110px;
  align-content: end;
  gap: 7px;
  padding: 20px;
  border: 1px solid #393b42;
  border-radius: 7px;
  background: #2b2d31;
  transition: border-color .18s ease, background .18s ease;
}

.institution-people a:hover,
.institution-people a:focus-visible {
  border-color: #5865f2;
  background: #303238;
}

.institution-people span {
  color: #8f949c;
  font-size: .65rem;
}

.institution-people strong {
  color: #f2f3f5;
}

.operator-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.operator-pair article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 24px;
  min-height: 250px;
  padding: clamp(26px, 4vw, 42px);
}

.operator-pair article + article {
  border-left: 1px solid #393b42;
}

.operator-piece {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid #454852;
  border-radius: 7px;
  background: #1e1f22;
  color: #8790ff;
  font-size: 2.2rem;
  line-height: 1;
}

.operator-pair article > div:last-child > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.operator-pair h3 {
  margin: 12px 0 10px;
  color: #f2f3f5;
  font-size: 1.2rem;
}

.operator-pair p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.operator-pair a {
  display: inline-block;
  margin-top: 18px;
  color: #b3b9ff;
  font-size: .75rem;
  font-weight: 700;
}

.canon-gaps {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(340px, 1.3fr);
  gap: 40px;
  margin-top: 64px;
  margin-bottom: 52px;
  padding: 34px;
  border: 1px dashed #4b4e57;
  border-radius: 8px;
}

.canon-gaps ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
  margin: 0;
  padding-left: 20px;
  color: #aeb1b8;
}

.knowledge-layers {
  border: 1px solid #393b42;
  border-radius: 8px;
}

.knowledge-layers article {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 22px;
  padding: 26px;
}

.knowledge-layers article + article {
  border-top: 1px solid #393b42;
}

.knowledge-layers article > b {
  color: #72767d;
  font-family: Consolas, monospace;
  font-weight: 500;
}

.knowledge-layers h3 {
  margin-top: 8px;
}

.relation-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #393b42;
  border-radius: 8px;
}

.relation-matrix article {
  min-height: 190px;
  padding: 28px;
}

.relation-matrix article:nth-child(even) {
  border-left: 1px solid #393b42;
}

.relation-matrix article:nth-child(n + 3) {
  border-top: 1px solid #393b42;
}

.relation-matrix strong {
  display: block;
  margin: 20px 0 10px;
  color: #f2f3f5;
  font-size: 1.08rem;
}

.boundary-record {
  align-items: end;
}

.boundary-record h3 {
  margin: 10px 0 12px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
}

.boundary-record > a {
  justify-self: end;
}

.story-contact > div {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 22px;
}

@media (max-width: 1050px) {
  .world-workspace {
    grid-template-columns: minmax(0, 1fr) 240px;
  }

  .institution-hero {
    grid-template-columns: 170px minmax(0, 1fr) 235px;
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .world-record-card,
  .world-record-card:first-child {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .world-section-heading {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .world-section-heading > p {
    grid-column: 2;
  }

  .institution-hero {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .institution-hero dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .institution-hero dl div + div {
    border-top: 0;
    border-left: 1px solid #393b42;
  }
}

@media (max-width: 820px) {
  .world-workspace {
    display: block;
    height: auto;
    overflow: visible;
  }

  .world-main-pane,
  .world-scroll {
    height: auto;
    overflow: visible;
  }

  .world-feed-header {
    display: none;
  }

  .world-hero,
  .world-record-section,
  .world-planned,
  .world-term-guide,
  .world-breadcrumbs,
  .institution-hero,
  .institution-section,
  .canon-gaps {
    width: min(100% - 28px, 680px);
  }
}

@media (max-width: 700px) {
  .world-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    padding: 42px 26px;
  }

  .world-record-grid {
    grid-template-columns: 1fr;
  }

  .world-record-card,
  .world-record-card:first-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .world-record-visual {
    min-height: 145px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .26);
  }

  .world-planned > header {
    display: block;
  }

  .world-planned > header > p:last-child {
    margin-top: 14px;
  }

  .institution-hero {
    display: block;
  }

  .institution-monogram {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .26);
  }

  .institution-hero > div:nth-child(2) {
    padding: 34px 26px;
  }

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

  .institution-hero dl div:nth-child(3) {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .institution-hero dl div:nth-child(4) {
    border-top: 1px solid #393b42;
  }

  .mandate-grid,
  .msf-private-compact,
  .relation-matrix {
    grid-template-columns: 1fr;
  }

  .mandate-grid article + article,
  .relation-matrix article:nth-child(even) {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .msf-legal-mafia {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

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

  .operator-pair {
    grid-template-columns: 1fr;
  }

  .operator-pair article + article {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .pressure-layout,
  .boundary-record,
  .story-contact,
  .canon-gaps {
    grid-template-columns: 1fr;
  }

  .suppression-intro {
    grid-template-columns: 1fr;
  }

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

  .suppression-grid article:nth-child(odd) + article {
    border-left: 1px solid #393b42;
  }

  .suppression-grid article:nth-child(3),
  .suppression-grid article:nth-child(5) {
    border-top: 1px solid #393b42;
  }

  .suppression-grid article:nth-child(4) {
    border-top: 1px solid #393b42;
    border-left: 1px solid #393b42;
  }

  .pressure-layout a {
    grid-column: 1;
  }

  .boundary-record > a {
    justify-self: start;
  }

  .story-contact > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .msf-private-principle dl {
    grid-template-columns: 1fr;
  }

  .msf-private-principle dl div + div {
    border-top: 1px solid #3d4048;
    border-left: 0;
  }

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

  .suppression-grid article,
  .suppression-grid article:nth-child(3),
  .suppression-grid article:nth-child(4),
  .suppression-grid article:nth-child(5) {
    border-top: 0;
    border-left: 0;
  }

  .suppression-grid article + article {
    border-top: 1px solid #393b42;
  }
}

@media (max-width: 1000px) {
  .nav-links {
    top: calc(100% + 6px);
    right: 8px;
    left: 8px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px;
    max-height: calc(100dvh - 68px);
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-color: #111216;
    border-radius: 10px;
    background: #232428;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .42);
  }

  .nav-links > a {
    display: flex;
    grid-column: span 6;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 6px;
    font-size: .78rem;
  }

  .nav-links > a[href="music.html"],
  .nav-links > a[href="gallery.html"],
  .nav-links > a[href="docs.html"] {
    grid-column: span 6;
  }

  .nav-links > a:hover,
  .nav-links > a[aria-current="page"] {
    box-shadow: inset 0 -2px #5865f2;
  }

  .nav-dropdown {
    grid-column: span 6;
  }

  .nav-dropdown summary {
    position: relative;
    min-height: 40px;
    justify-content: center;
    padding: 0 9px;
    border-radius: 6px;
    background: #18191c;
    font-size: .78rem;
    text-align: center;
  }

  .nav-dropdown[open] {
    grid-column: 1 / -1;
    overflow: hidden;
    border-radius: 6px;
    background: #18191c;
  }

  .nav-dropdown[open] summary {
    border-radius: 6px 6px 0 0;
    border-bottom: 1px solid #2b2d31;
    background: transparent;
    box-shadow: none;
  }

  .nav-dropdown[open] ~ a[href="music.html"],
  .nav-dropdown[open] ~ a[href="gallery.html"],
  .nav-dropdown[open] ~ a[href="docs.html"] {
    grid-column: span 4;
  }

  .nav-submenu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: auto;
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .nav-links .nav-submenu a {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    text-align: center;
  }

  .nav-links .nav-submenu a:first-child {
    grid-column: 1 / -1;
    border-bottom: 1px solid #2b2d31;
    border-radius: 0;
  }

  .nav-submenu a small {
    display: none;
  }
}

@media (max-width: 620px) {
  .world-hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }

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

  .world-section-heading {
    display: block;
  }

  .world-section-heading h2,
  .world-section-heading > p {
    margin-top: 10px;
  }

  .world-record-copy > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .world-planned-grid article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .world-planned-grid article > b {
    grid-column: 2;
  }

  .institution-section-heading {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .institution-people,
  .canon-gaps ul {
    grid-template-columns: 1fr;
  }

  .operator-pair article {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    padding: 24px 20px;
  }

  .operator-piece {
    width: 52px;
    height: 52px;
    font-size: 1.7rem;
  }
}

/* Church special envoys */
.envoy-layout {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.envoy-brief {
  padding: clamp(30px, 5vw, 52px);
  border-right: 1px solid #393b42;
  background: #232428;
}

.envoy-brief > span,
.envoy-traditions article > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.envoy-brief h3,
.envoy-traditions h3 {
  margin: 18px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 500;
  line-height: 1.15;
}

.envoy-brief > p,
.envoy-traditions p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.envoy-brief dl {
  margin: 30px 0 0;
  border-top: 1px solid #393b42;
}

.envoy-brief dl div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
}

.envoy-brief dl div + div {
  border-top: 1px solid #393b42;
}

.envoy-brief dt {
  color: #72767d;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.envoy-brief dd {
  margin: 0;
  color: #dbdee1;
  font-size: .8rem;
}

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

.envoy-domains article {
  display: grid;
  min-height: 160px;
  align-content: start;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 24px;
}

.envoy-domains article:nth-child(even) {
  border-left: 1px solid #393b42;
}

.envoy-domains article:nth-child(n + 3) {
  border-top: 1px solid #393b42;
}

.envoy-domains article > span {
  grid-row: 1 / 3;
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .65rem;
}

.envoy-domains strong {
  color: #f2f3f5;
  font-size: .95rem;
}

.envoy-domains p {
  margin: 8px 0 0;
  color: #949ba4;
  font-size: .78rem;
  line-height: 1.55;
}

.envoy-traditions {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) repeat(2, minmax(220px, .95fr));
  margin-top: 12px;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.envoy-traditions > div,
.envoy-traditions article {
  padding: 28px;
}

.envoy-traditions > * + * {
  border-left: 1px solid #393b42;
}

.envoy-traditions .eyebrow {
  margin-bottom: 0;
}

.envoy-traditions h3 {
  margin: 10px 0 12px;
  font-size: 1.35rem;
}

.envoy-traditions article strong {
  display: block;
  margin: 16px 0 10px;
  color: #dbdee1;
  font-size: .92rem;
}

.envoy-traditions article p {
  font-size: .78rem;
}

@media (max-width: 900px) {
  .envoy-layout {
    grid-template-columns: 1fr;
  }

  .envoy-brief {
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .envoy-traditions {
    grid-template-columns: 1fr 1fr;
  }

  .envoy-traditions > div {
    grid-column: 1 / -1;
    border-bottom: 1px solid #393b42;
  }

  .envoy-traditions > * + * {
    border-left: 0;
  }

  .envoy-traditions article + article {
    border-left: 1px solid #393b42;
  }
}

@media (max-width: 620px) {
  .envoy-domains,
  .envoy-traditions {
    grid-template-columns: 1fr;
  }

  .envoy-domains article:nth-child(even),
  .envoy-traditions article + article {
    border-left: 0;
  }

  .envoy-domains article:nth-child(n + 2),
  .envoy-traditions article + article {
    border-top: 1px solid #393b42;
  }

  .envoy-traditions > div {
    grid-column: auto;
  }
}

/* Magiarchy framework record */
.world-record-magiarchy,
.world-record-weapons {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
}

.world-record-magiarchy .world-record-visual span,
.world-record-weapons .world-record-visual span {
  font-family: Georgia, "Times New Roman", serif;
}

.magiarchy-hero,
.magiarchy-page .institution-section,
.magiarchy-page .canon-gaps {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
}

.magiarchy-hero {
  display: grid;
  min-height: 470px;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 8px;
  background: #2b2d31;
}

.magiarchy-sigil {
  position: relative;
  display: grid;
  align-self: stretch;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(0, 0, 0, .26);
  background: #232428;
}

.magiarchy-sigil span {
  z-index: 2;
  width: 72px;
  height: 72px;
  border: 2px solid #8790ff;
  transform: rotate(45deg);
}

.magiarchy-sigil span::before,
.magiarchy-sigil span::after {
  position: absolute;
  inset: 12px;
  border: 1px solid #4e56ad;
  content: "";
}

.magiarchy-sigil span::after {
  inset: 25px;
  background: #8790ff;
}

.magiarchy-sigil i {
  position: absolute;
  width: 1px;
  height: 70%;
  background: #3f424a;
  transform: rotate(34deg);
}

.magiarchy-sigil i + i {
  transform: rotate(-34deg);
}

.magiarchy-hero-copy {
  padding-block: 52px;
}

.magiarchy-hero h1 {
  margin: 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.magiarchy-hero-copy > p:last-child {
  max-width: 650px;
  margin: 24px 0 0;
  color: #b5bac1;
  line-height: 1.7;
}

.magiarchy-hero > dl {
  align-self: stretch;
  display: grid;
  align-content: center;
  margin: 0;
  border-left: 1px solid #393b42;
}

.magiarchy-hero > dl div {
  padding: 18px 24px;
}

.magiarchy-hero > dl div + div {
  border-top: 1px solid #393b42;
}

.magiarchy-hero dt {
  color: #72767d;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.magiarchy-hero dd {
  margin: 5px 0 0;
  color: #dbdee1;
  font-size: .88rem;
  font-weight: 650;
}

.magiarch-office {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.magiarch-rank {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px);
  border-right: 1px solid #393b42;
  background: #232428;
}

.magiarch-rank > span,
.jurisdiction-scale article > div:last-child > span,
.counterbalance-grid article > span,
.union-prohibition > span,
.anarchy-principle > span,
.known-office-holder > div:first-child > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.magiarch-rank > strong {
  margin: 18px 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1;
}

.magiarch-rank > p,
.magiarch-mandate p,
.jurisdiction-scale p,
.counterbalance-grid p,
.union-prohibition p,
.anarchy-effects p,
.known-office-holder p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.magiarch-mandate {
  display: grid;
}

.magiarch-mandate article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 28px;
}

.magiarch-mandate article + article {
  border-top: 1px solid #393b42;
}

.magiarch-mandate article > span,
.anarchy-effects article > span {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .67rem;
}

.magiarch-mandate strong,
.anarchy-effects strong {
  display: block;
  margin-bottom: 8px;
  color: #f2f3f5;
}

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

.jurisdiction-scale article {
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.jurisdiction-scale article > div:last-child {
  align-self: center;
  padding: 28px;
}

.jurisdiction-scale h3,
.counterbalance-grid h3 {
  margin: 14px 0 12px;
  color: #f2f3f5;
  font-size: 1.2rem;
}

.jurisdiction-map {
  position: relative;
  overflow: hidden;
  border-right: 1px solid #393b42;
  background: #232428;
}

.jurisdiction-map i {
  position: absolute;
  inset: 22%;
  border: 2px solid #727bcf;
  border-radius: 42% 58% 61% 39% / 54% 35% 65% 46%;
  transform: rotate(-8deg);
}

.jurisdiction-map span {
  position: absolute;
  top: 44%;
  left: 48%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8790ff;
}

.jurisdiction-district::after {
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 51%;
  width: 1px;
  background: #727bcf;
  content: "";
  transform: rotate(18deg);
}

.jurisdiction-district b {
  position: absolute;
  top: 61%;
  left: 61%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5865f2;
}

.counterbalance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.counterbalance-grid article {
  min-height: 340px;
  padding: clamp(30px, 5vw, 52px);
  background: #232428;
}

.counterbalance-grid article > div {
  display: flex;
  gap: 14px;
  margin-top: 42px;
}

.counterbalance-grid article > div i {
  width: 34px;
  height: 34px;
  border: 1px solid #5865f2;
  transform: rotate(45deg);
}

.counterbalance-church > div i {
  position: relative;
  border: 0;
  transform: none;
}

.counterbalance-church > div i::before,
.counterbalance-church > div i::after {
  position: absolute;
  background: #8790ff;
  content: "";
}

.counterbalance-church > div i::before {
  top: 0;
  left: 15px;
  width: 3px;
  height: 34px;
}

.counterbalance-church > div i::after {
  top: 10px;
  left: 6px;
  width: 21px;
  height: 3px;
}

.counterbalance-axis {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid #393b42;
  border-left: 1px solid #393b42;
}

.counterbalance-axis span {
  width: 1px;
  flex: 1;
  background: #4e5058;
}

.counterbalance-axis b {
  color: #72767d;
  font-size: .55rem;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.union-prohibition {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 12px;
  padding: 22px 26px;
  border: 1px solid #393b42;
  border-left: 3px solid #5865f2;
  border-radius: 8px;
}

.union-prohibition a,
.known-office-holder a {
  color: #b3b9ff;
  font-size: .74rem;
  font-weight: 700;
}

.anarchy-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.anarchy-principle {
  padding: clamp(32px, 5vw, 56px);
  border-right: 1px solid #393b42;
  background: #232428;
}

.anarchy-principle blockquote {
  margin: 22px 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.8vw, 2.4rem);
  line-height: 1.3;
}

.anarchy-principle > p {
  margin: 0;
  color: #949ba4;
  line-height: 1.65;
}

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

.anarchy-effects article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  gap: 5px 12px;
  padding: 28px;
}

.anarchy-effects article:nth-child(even) {
  border-left: 1px solid #393b42;
}

.anarchy-effects article:nth-child(n + 3) {
  border-top: 1px solid #393b42;
}

.anarchy-effects article > span {
  grid-row: 1 / 3;
}

.known-office-holder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
  padding: clamp(32px, 5vw, 52px);
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.known-office-holder strong {
  display: block;
  margin: 12px 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 500;
}

.known-office-holder > div:last-child {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1050px) {
  .magiarchy-hero {
    grid-template-columns: 170px minmax(0, 1fr) 235px;
    gap: 28px;
  }

  .jurisdiction-scale article {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .magiarchy-hero {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .magiarchy-hero > dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .magiarchy-hero > dl div + div {
    border-top: 0;
    border-left: 1px solid #393b42;
  }

  .jurisdiction-scale {
    grid-template-columns: 1fr;
  }

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

  .counterbalance-axis {
    min-height: 72px;
    flex-direction: row;
    border: 0;
    border-top: 1px solid #393b42;
    border-bottom: 1px solid #393b42;
  }

  .counterbalance-axis span {
    width: auto;
    height: 1px;
  }

  .counterbalance-axis b {
    writing-mode: initial;
  }

  .union-prohibition {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .union-prohibition a {
    grid-column: 2;
  }
}

@media (max-width: 820px) {
  .magiarchy-hero,
  .magiarchy-page .institution-section,
  .magiarchy-page .canon-gaps {
    width: min(100% - 28px, 680px);
  }
}

@media (max-width: 700px) {
  .world-record-magiarchy,
  .world-record-weapons {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .magiarchy-hero {
    display: block;
  }

  .magiarchy-sigil {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .26);
  }

  .magiarchy-hero-copy {
    padding: 36px 26px;
  }

  .magiarchy-hero > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .magiarchy-hero > dl div:nth-child(3) {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .magiarchy-hero > dl div:nth-child(4) {
    border-top: 1px solid #393b42;
  }

  .magiarch-office,
  .anarchy-layout {
    grid-template-columns: 1fr;
  }

  .magiarch-rank,
  .anarchy-principle {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .known-office-holder {
    grid-template-columns: 1fr;
  }

  .known-office-holder > div:last-child {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .jurisdiction-scale article {
    grid-template-columns: 1fr;
  }

  .jurisdiction-map {
    min-height: 150px;
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .union-prohibition {
    grid-template-columns: 1fr;
  }

  .union-prohibition a {
    grid-column: 1;
  }

  .anarchy-effects {
    grid-template-columns: 1fr;
  }

  .anarchy-effects article:nth-child(even) {
    border-left: 0;
  }

  .anarchy-effects article:nth-child(n + 2) {
    border-top: 1px solid #393b42;
  }
}

/* Renegade Magi enforcement */
.renegade-definition {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.renegade-definition > div {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 52px);
  border-right: 1px solid #393b42;
  background: #232428;
}

.renegade-definition > div > span,
.renegade-pursuit article > span,
.enforcement-distrust > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.renegade-definition > div > strong {
  margin: 16px 0;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 500;
}

.renegade-definition p,
.renegade-pursuit p,
.enforcement-distrust p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.renegade-definition ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.renegade-definition li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  gap: 16px;
  padding: 28px;
}

.renegade-definition li + li {
  border-top: 1px solid #393b42;
}

.renegade-definition li > span {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .67rem;
}

.renegade-definition li strong {
  display: block;
  margin-bottom: 7px;
  color: #f2f3f5;
}

.renegade-pursuit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.renegade-pursuit article {
  min-height: 270px;
  padding: clamp(30px, 5vw, 48px);
}

.renegade-pursuit h3 {
  margin: 16px 0 12px;
  color: #f2f3f5;
  font-size: 1.25rem;
}

.renegade-pursuit article a {
  display: inline-block;
  margin-top: 25px;
  color: #b3b9ff;
  font-size: .74rem;
  font-weight: 700;
}

.renegade-pursuit > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 13px;
  border-right: 1px solid #393b42;
  border-left: 1px solid #393b42;
  background: #232428;
}

.renegade-pursuit > div span {
  width: 1px;
  flex: 1;
  background: #4e5058;
}

.renegade-pursuit > div b {
  color: #72767d;
  font-size: .55rem;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.enforcement-distrust {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-top: 12px;
  padding: 22px 26px;
  border: 1px solid #393b42;
  border-left: 3px solid #d19a4a;
  border-radius: 8px;
  background: #232428;
}

.enforcement-distrust > span {
  color: #d8aa68;
}

@media (max-width: 800px) {
  .renegade-pursuit {
    grid-template-columns: 1fr;
  }

  .renegade-pursuit > div {
    min-height: 68px;
    flex-direction: row;
    border: 0;
    border-top: 1px solid #393b42;
    border-bottom: 1px solid #393b42;
  }

  .renegade-pursuit > div span {
    width: auto;
    height: 1px;
  }

  .renegade-pursuit > div b {
    writing-mode: initial;
  }
}

@media (max-width: 620px) {
  .renegade-definition {
    grid-template-columns: 1fr;
  }

  .renegade-definition > div {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .enforcement-distrust {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Unresolved assassination authorship */
.assassination-question {
  margin: 0 18px 18px;
  overflow: hidden;
  border: 1px solid #3b3d43;
  border-radius: 6px;
  background: #232428;
}

.assassination-question > header {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
  align-items: end;
  gap: 24px;
  padding: 18px;
  border-bottom: 1px solid #3b3d43;
}

.assassination-question > header span,
.assassination-candidates article > span,
.assassination-complication > span,
.assassination-question > footer p > span {
  color: #d99b9e;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.assassination-question > header h3 {
  margin: 5px 0 0;
  color: #f2f3f5;
  font-size: 1rem;
}

.assassination-question > header p {
  margin: 0;
  color: #9296a3;
  font-size: .65rem;
  line-height: 1.55;
}

.assassination-candidates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.assassination-candidates article {
  min-width: 0;
  padding: 16px;
}

.assassination-candidates article + article {
  border-left: 1px solid #3b3d43;
}

.assassination-candidates strong {
  display: block;
  margin: 8px 0 7px;
  color: #dbdee1;
  font-size: .72rem;
}

.assassination-candidates p,
.assassination-complication p,
.assassination-question > footer p {
  margin: 0;
  color: #9296a3;
  font-size: .59rem;
  line-height: 1.55;
}

.assassination-complication {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 13px 16px;
  border-top: 1px solid #3b3d43;
  border-left: 3px solid #ab6fe8;
  background: #292a2f;
}

.assassination-complication > span {
  color: #c9a7ef;
}

.assassination-question > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 16px;
  border-top: 1px solid #3b3d43;
}

.assassination-question > footer p > span {
  margin-right: 5px;
}

.assassination-question > footer a {
  color: #b3b9ff;
  font-size: .58rem;
  font-weight: 750;
  white-space: nowrap;
}

.infiltration-possibility,
.envoy-infiltration {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 30px;
  margin-top: 12px;
  padding: 24px 28px;
  border: 1px solid #393b42;
  border-left: 3px solid #ab6fe8;
  border-radius: 8px;
  background: #232428;
}

.infiltration-possibility > div > span,
.envoy-infiltration > span {
  color: #c9a7ef;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.infiltration-possibility h3 {
  margin: 9px 0 0;
  color: #f2f3f5;
  font-size: 1.18rem;
}

.infiltration-possibility > p,
.envoy-infiltration > p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .assassination-question > header,
  .assassination-complication,
  .infiltration-possibility,
  .envoy-infiltration {
    grid-template-columns: 1fr;
    gap: 9px;
  }

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

  .assassination-candidates article:nth-child(3) {
    border-top: 1px solid #3b3d43;
    border-left: 0;
  }

  .assassination-candidates article:nth-child(4) {
    border-top: 1px solid #3b3d43;
  }

  .assassination-question > footer {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .assassination-question > footer a {
    margin-top: 4px;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .assassination-candidates {
    grid-template-columns: 1fr;
  }

  .assassination-candidates article + article,
  .assassination-candidates article:nth-child(4) {
    border-top: 1px solid #3b3d43;
    border-left: 0;
  }
}

/* MSF blue authority protocol */
.blue-protocol {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 240px;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.blue-protocol-visual {
  position: relative;
  display: grid;
  min-height: 390px;
  align-content: center;
  justify-items: center;
  gap: 38px;
  overflow: hidden;
  border-right: 1px solid #393b42;
  background: #232428;
}

.blue-protocol-visual::before,
.blue-protocol-visual::after {
  position: absolute;
  width: 1px;
  height: 75%;
  background: #343740;
  content: "";
  transform: rotate(35deg);
}

.blue-protocol-visual::after {
  transform: rotate(-35deg);
}

.blue-protocol-visual > span {
  position: relative;
  z-index: 2;
  width: 82px;
  height: 142px;
  clip-path: polygon(27% 0, 43% 13%, 57% 13%, 73% 0, 100% 24%, 85% 43%, 85% 100%, 15% 100%, 15% 43%, 0 24%);
  background: #3f61ba;
}

.blue-protocol-visual > span::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #7398f2;
  content: "";
}

.blue-protocol-visual > span i {
  position: absolute;
  top: 30px;
  width: 34px;
  height: 2px;
  background: #7398f2;
}

.blue-protocol-visual > span i:first-child {
  left: 15px;
  transform: rotate(48deg);
}

.blue-protocol-visual > span i:last-child {
  right: 15px;
  transform: rotate(-48deg);
}

.blue-protocol-visual > b {
  z-index: 2;
  color: #8790ff;
  font-family: Consolas, monospace;
  font-size: .65rem;
  letter-spacing: .08em;
}

.blue-protocol-principle {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 54px);
}

.blue-protocol-principle > span,
.blue-protocol-story article > span {
  color: #8790ff;
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.blue-protocol-principle h3 {
  margin: 17px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
}

.blue-protocol-principle > p,
.blue-protocol-story p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.blue-protocol-principle blockquote {
  margin: 26px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid #393b42;
  color: #d8daff;
  font-size: .82rem;
  font-style: italic;
  line-height: 1.6;
}

.blue-protocol-rules {
  align-self: stretch;
  display: grid;
  align-content: center;
  margin: 0;
  border-left: 1px solid #393b42;
  background: #292a2f;
}

.blue-protocol-rules div {
  padding: 18px 22px;
}

.blue-protocol-rules div + div {
  border-top: 1px solid #393b42;
}

.blue-protocol-rules dt {
  color: #72767d;
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.blue-protocol-rules dd {
  margin: 5px 0 0;
  color: #dbdee1;
  font-size: .84rem;
  font-weight: 650;
}

.blue-protocol-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.blue-protocol-story article {
  min-height: 220px;
  padding: clamp(28px, 4vw, 42px);
}

.blue-protocol-story article + article {
  border-left: 1px solid #393b42;
}

.blue-protocol-story strong {
  display: block;
  margin: 14px 0 10px;
  color: #f2f3f5;
  font-size: 1.18rem;
}

.blue-protocol-story a {
  display: inline-block;
  margin-top: 22px;
  color: #b3b9ff;
  font-size: .74rem;
  font-weight: 700;
}

.blue-protocol-failure {
  border-top: 3px solid #b56b70;
  background: #292a2f;
}

.blue-protocol-failure > span {
  color: #d99b9e !important;
}

@media (max-width: 950px) {
  .blue-protocol {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .blue-protocol-rules {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .blue-protocol-rules div + div {
    border-top: 0;
    border-left: 1px solid #393b42;
  }
}

@media (max-width: 700px) {
  .blue-protocol {
    grid-template-columns: 1fr;
  }

  .blue-protocol-visual {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .blue-protocol-visual > span {
    width: 68px;
    height: 118px;
  }

  .blue-protocol-principle {
    padding: 32px 26px;
  }

  .blue-protocol-rules {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blue-protocol-rules div:nth-child(3) {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .blue-protocol-rules div:nth-child(4) {
    border-top: 1px solid #393b42;
  }

  .blue-protocol-story {
    grid-template-columns: 1fr;
  }

  .blue-protocol-story article + article {
    border-left: 0;
  }
}

/* Director's House */
.house-scroll {
  padding-bottom: 72px;
}

.house-hero,
.house-section,
.house-scroll > .canon-gaps {
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
}

.house-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 310px;
  border: 1px solid #3a3c43;
  background: #25262b;
  border-radius: 12px;
  overflow: hidden;
}

.house-mark {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 28px;
  background: #202125;
  border-right: 1px solid #3a3c43;
}

.house-mark span {
  display: block;
  height: 28px;
  border: 2px solid #737bdc;
  background: #2b2d35;
}

.house-mark span:first-child {
  width: 68%;
  justify-self: end;
}

.house-mark span:nth-child(2) {
  width: 84%;
  justify-self: end;
}

.house-mark span:last-child {
  width: 100%;
}

.house-hero-copy {
  min-width: 0;
  padding: 54px 48px;
}

.house-hero h1 {
  margin: 10px 0 18px;
  color: #f2f3f5;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.7rem, 5vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .94;
}

.house-hero-copy > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #b6bac5;
  font-size: 1.04rem;
  line-height: 1.75;
}

.house-facts {
  display: grid;
  margin: 0;
  border-left: 1px solid #3a3c43;
  background: #292a30;
}

.house-facts div {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 24px 28px;
}

.house-facts div + div {
  border-top: 1px solid #3a3c43;
}

.house-facts dt,
.house-floor-number small,
.house-role-overlap > span {
  color: #8f96ae;
  font-family: 'Courier New', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.house-facts dd {
  margin: 0;
  color: #e1e3e8;
  font-weight: 700;
}

.house-section {
  margin-top: 64px;
}

.house-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 22px;
}

.house-section-heading > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #43464f;
  border-radius: 50%;
  color: #8c94ed;
  font-family: 'Courier New', monospace;
  font-size: .72rem;
}

.house-section-heading h2 {
  margin: 4px 0 0;
  color: #f2f3f5;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.08;
}

.house-landscape {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid #3a3c43;
  border-radius: 12px;
  background: #202126;
}

.house-landscape span {
  position: absolute;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid #454852;
  border-radius: 5px;
  background: #202126;
  color: #c9ccd5;
  font-family: 'Courier New', monospace;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.house-landscape-city {
  position: absolute;
  inset: 0 0 54% 0;
  background: #292a31;
  border-bottom: 1px solid #454752;
}

.house-landscape-city span {
  top: 22px;
  right: 24px;
}

.house-landscape-city i {
  position: absolute;
  bottom: 0;
  width: 11%;
  height: 30%;
  background: #343640;
  border: 1px solid #474a56;
}

.house-landscape-city i:nth-of-type(1) { left: 55%; height: 38%; }
.house-landscape-city i:nth-of-type(2) { left: 67%; height: 58%; }
.house-landscape-city i:nth-of-type(3) { left: 79%; height: 46%; }
.house-landscape-city i:nth-of-type(4) { left: 91%; height: 66%; }

.house-landscape-hill {
  position: absolute;
  inset: 31% 42% 18% 6%;
  background: #30343a;
  clip-path: polygon(0 100%, 13% 28%, 38% 9%, 66% 38%, 100% 100%);
}

.house-landscape-hill::after {
  content: '';
  position: absolute;
  left: 34%;
  top: 8%;
  width: 116px;
  height: 92px;
  border: 2px solid #7881de;
  background: #26272d;
  box-shadow: inset 0 -27px #30323a;
}

.house-landscape-hill span {
  left: 34%;
  top: 57%;
}

.house-landscape-garden {
  position: absolute;
  inset: 55% 5% 17% 47%;
  border: 1px solid #4d5b50;
  background: #29312c;
}

.house-landscape-garden span {
  top: 18px;
  left: 18px;
}

.house-landscape-garden i {
  position: absolute;
  bottom: 20px;
  width: 22px;
  height: 42px;
  border-radius: 50% 50% 12px 12px;
  background: #475d4c;
}

.house-landscape-garden i:nth-of-type(1) { left: 34%; }
.house-landscape-garden i:nth-of-type(2) { left: 54%; height: 54px; }
.house-landscape-garden i:nth-of-type(3) { left: 74%; }

.house-landscape-river {
  position: absolute;
  inset: 83% 0 0;
  background: #293945;
  border-top: 1px solid #4d6779;
}

.house-landscape-river span {
  right: 24px;
  top: 15px;
}

.house-setting-note {
  max-width: 850px;
  margin: 20px 0 0 68px;
  color: #aeb2bd;
  line-height: 1.7;
}

.house-cutaway {
  overflow: hidden;
  border: 1px solid #3a3c43;
  border-radius: 12px;
  background: #202126;
}

.house-floor {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 250px;
  min-height: 230px;
}

.house-floor + .house-floor {
  border-top: 1px solid #464850;
}

.house-floor-number {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  background: #1d1e22;
  border-right: 1px solid #3a3c43;
}

.house-floor-number > span {
  color: #8992ef;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.8rem;
}

.house-floor-copy {
  align-self: center;
  padding: 34px 42px;
}

.house-floor-copy h3,
.house-shared-rooms h3,
.house-dual-role h3 {
  margin: 7px 0 12px;
  color: #eceef2;
  font-size: 1.35rem;
}

.house-floor-copy > p:last-child,
.house-shared-rooms p,
.house-dual-role p,
.house-story-links p {
  margin: 0;
  color: #aeb2bd;
  line-height: 1.65;
}

.house-window,
.house-room-grid,
.house-glass-room {
  position: relative;
  margin: 28px;
  border: 1px solid #484b56;
  background: #292b32;
}

.house-window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 18px;
  background: #22262d;
}

.house-window span {
  border: 1px solid #526578;
  background: #2d3a48;
}

.house-window i {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 16%;
  height: 2px;
  background: #7d85dc;
}

.house-room-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  padding: 7px;
  background: #202126;
}

.house-room-grid i {
  border: 1px solid #454751;
  background: #2d2f36;
}

.house-room-grid i:first-child {
  grid-row: 1 / 3;
}

.house-glass-room {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 10px;
  background: #22282b;
}

.house-glass-room span {
  border: 1px solid #5b7077;
  background: #304047;
}

.house-glass-room i {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14%;
  height: 18px;
  background: #465b4b;
}

.house-shared-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #3a3c43;
  border-radius: 10px;
}

.house-shared-rooms article {
  min-height: 190px;
  padding: 28px;
  background: #28292e;
}

.house-shared-rooms article + article {
  border-left: 1px solid #3a3c43;
}

.house-shared-rooms span,
.house-dual-role article > span,
.house-story-links > a > span {
  color: #9299df;
  font-family: 'Courier New', monospace;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.house-dual-role {
  display: grid;
  grid-template-columns: 1fr 230px 1fr;
  overflow: hidden;
  border: 1px solid #3a3c43;
  border-radius: 12px;
}

.house-dual-role > * {
  padding: 36px;
}

.house-dual-role article {
  background: #292a2f;
}

.house-role-overlap {
  display: grid;
  align-content: center;
  gap: 12px;
  background: #222329;
  border-inline: 1px solid #43454e;
  text-align: center;
}

.house-role-overlap strong {
  color: #e5e6eb;
  line-height: 1.35;
}

.house-role-overlap p {
  font-size: .86rem;
}

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

.house-story-links > a {
  position: relative;
  display: grid;
  gap: 9px;
  min-height: 190px;
  padding: 28px 58px 28px 28px;
  border: 1px solid #3a3c43;
  border-radius: 9px;
  background: #292a2f;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.house-story-links > a:hover,
.house-story-links > a:focus-visible {
  border-color: #6870c7;
  background: #2d2e35;
  transform: translateY(-2px);
}

.house-story-links strong {
  color: #eceef2;
  font-size: 1.22rem;
}

.house-story-links i {
  position: absolute;
  right: 26px;
  top: 50%;
  color: #9299df;
  font-style: normal;
  transform: translateY(-50%);
}

.world-record-house .world-record-visual {
  background: #25272c;
}

.world-record-house .world-record-visual span {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2rem;
}

.world-record-house .world-record-visual i {
  width: 70%;
  height: 24px;
  border: 1px solid #7c85df;
  background: #30323a;
}

.world-record-house .world-record-visual i + i {
  width: 86%;
  margin-top: 7px;
}

.msf-residential-node {
  display: grid;
  width: min(1120px, calc(100% - 48px));
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  margin-top: 12px;
  margin-inline: auto;
  padding: 24px 28px;
  border: 1px solid #3a3c43;
  border-radius: 9px;
  background: #25262b;
  color: inherit;
  text-decoration: none;
}

.msf-residential-node > span,
.msf-residential-node > i {
  color: #979eea;
  font-family: 'Courier New', monospace;
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .09em;
}

.msf-residential-node strong {
  display: block;
  margin-bottom: 5px;
  color: #eceef2;
}

.msf-residential-node p {
  margin: 0;
  color: #aeb2bd;
}

.msf-residential-node:hover,
.msf-residential-node:focus-visible {
  border-color: #6870c7;
  background: #2b2c32;
}

@media (max-width: 950px) {
  .house-hero {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .house-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }

  .house-facts div + div {
    border-top: 0;
    border-left: 1px solid #3a3c43;
  }

  .house-floor {
    grid-template-columns: 90px minmax(0, 1fr) 190px;
  }

  .house-dual-role {
    grid-template-columns: 1fr 1fr;
  }

  .house-role-overlap {
    grid-column: 1 / -1;
    grid-row: 2;
    border: 0;
    border-top: 1px solid #43454e;
  }
}

@media (max-width: 700px) {
  .house-hero,
  .house-section,
  .house-scroll > .canon-gaps {
    width: min(100% - 28px, 1180px);
  }

  .house-hero {
    grid-template-columns: 1fr;
  }

  .house-mark {
    grid-template-columns: repeat(3, 1fr);
    padding: 18px;
    border-right: 0;
    border-bottom: 1px solid #3a3c43;
  }

  .house-mark span,
  .house-mark span:first-child,
  .house-mark span:nth-child(2) {
    width: 100%;
  }

  .house-hero-copy {
    padding: 34px 26px;
  }

  .house-hero h1 {
    font-size: clamp(2.45rem, 14vw, 4.2rem);
  }

  .house-facts {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .house-facts div:nth-child(3) {
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }

  .house-facts div:nth-child(4) {
    border-top: 1px solid #3a3c43;
  }

  .house-section {
    margin-top: 46px;
  }

  .house-section-heading {
    gap: 14px;
  }

  .house-section-heading > span {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .house-landscape {
    min-height: 320px;
  }

  .house-landscape-hill {
    inset: 34% 24% 18% 2%;
  }

  .house-landscape-hill::after {
    left: 23%;
    width: 90px;
    height: 72px;
  }

  .house-landscape-hill span {
    left: 20%;
  }

  .house-landscape-garden {
    inset: 58% 2% 17% 42%;
  }

  .house-setting-note {
    margin-left: 0;
  }

  .house-floor {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .house-floor-number > span {
    font-size: 2rem;
  }

  .house-floor-number small {
    display: none;
  }

  .house-floor-copy {
    padding: 28px 22px;
  }

  .house-window,
  .house-room-grid,
  .house-glass-room {
    grid-column: 1 / -1;
    min-height: 140px;
    margin: 0;
    border-width: 1px 0 0;
  }

  .house-shared-rooms,
  .house-dual-role,
  .house-story-links {
    grid-template-columns: 1fr;
  }

  .house-shared-rooms article + article {
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }

  .house-role-overlap {
    grid-column: auto;
    grid-row: auto;
    border-top: 1px solid #43454e;
    border-bottom: 1px solid #43454e;
  }

  .msf-residential-node {
    width: min(100% - 28px, 680px);
    grid-template-columns: 1fr auto;
  }

  .msf-residential-node > span {
    grid-column: 1 / -1;
  }
}

/* Holumn manifestation record */
.holumn-page {
  --holumn-accent: #8790ff;
  --holumn-warning: #c39bff;
}

/* These World compositions respond to their pane, including the Page notes column. */
.institution-scroll { container: institution-pane / inline-size; }
.house-scroll { container: house-pane / inline-size; }

@container institution-pane (max-width: 920px) {
  .institution-scroll .anarchy-layout { grid-template-columns: minmax(0, 1fr); }
  .institution-scroll .anarchy-principle { border-right: 0; border-bottom: 1px solid #393b42; }
}
@container institution-pane (max-width: 620px) {
  .institution-scroll .anarchy-effects { grid-template-columns: minmax(0, 1fr); }
  .institution-scroll .anarchy-effects article:nth-child(even) { border-left: 0; }
  .institution-scroll .anarchy-effects article + article { border-top: 1px solid #393b42; }
}

/* Global archive search */
.global-search-trigger {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
  padding: 0 9px 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #202125;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 650;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.global-search-trigger:hover,
.global-search-trigger[aria-expanded="true"] {
  border-color: var(--line-bright);
  background: var(--surface);
  color: var(--text);
}

.global-search-trigger svg,
.global-search-field svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.global-search-trigger kbd,
.global-search-field kbd,
.global-search-help kbd {
  border: 1px solid #3a3c43;
  border-radius: 4px;
  background: #17181b;
  color: #9da2ab;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 650;
  line-height: 1;
}

.global-search-trigger kbd {
  padding: 4px 5px;
}

.global-search-open {
  overflow: hidden;
}

.global-search-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  justify-items: center;
  padding: clamp(76px, 11vh, 124px) 16px 24px;
}

.global-search-layer[hidden] {
  display: none;
}

.global-search-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 11, 14, .78);
  cursor: default;
}

.global-search-dialog {
  position: relative;
  display: grid;
  width: min(720px, 100%);
  max-height: min(720px, calc(100dvh - 112px));
  align-self: start;
  overflow: hidden;
  border: 1px solid #111216;
  border-radius: 12px;
  background: #25262b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52);
  animation: global-search-enter .18s var(--ease) both;
}

@keyframes global-search-enter {
  from { opacity: 0; transform: translateY(-9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.global-search-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid #3a3c43;
  color: #aeb4ff;
  background: #2b2d31;
}

.global-search-field svg {
  width: 22px;
  height: 22px;
}

.global-search-field input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.08rem;
}

.global-search-field input::placeholder {
  color: #8f949c;
}

.global-search-field kbd {
  padding: 6px 7px;
}

.global-search-body {
  min-height: 210px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4b4d55 transparent;
}

.global-search-status {
  margin: 0;
  padding: 12px 17px 9px;
  color: #8f949c;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search-history {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 12px 18px 0;
  color: var(--muted);
  font-size: .78rem;
  cursor: pointer;
}
.global-search-history input { width: 16px; height: 16px; accent-color: #8b8cff; }
.global-search-history:focus-within { color: var(--text); }

.global-search-results {
  display: grid;
  gap: 2px;
  padding: 0 8px 8px;
}

.global-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}

.global-search-result:hover,
.global-search-result:focus-visible,
.global-search-result.is-active {
  background: #35373c;
  color: inherit;
  text-decoration: none;
}

.global-search-result-marker {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #42444c;
  border-radius: 7px;
  background: #2a2b30;
  color: #9ea6ff;
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 750;
}

.global-search-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.global-search-result-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.global-search-result-heading strong {
  overflow: hidden;
  color: #f2f3f5;
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-heading small {
  flex: none;
  color: #8f949c;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search-result-subtitle,
.global-search-result-excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-result-subtitle {
  color: #b5bac1;
  font-size: .72rem;
}

.global-search-result-excerpt {
  color: #949ba4;
  font-size: .72rem;
  line-height: 1.45;
}

.global-search-result mark {
  border-radius: 2px;
  background: rgba(121, 131, 245, .2);
  color: #d6d9ff;
}

.global-search-empty {
  display: grid;
  min-height: 220px;
  place-content: center;
  justify-items: center;
  padding: 32px;
  text-align: center;
}

.global-search-empty[hidden] {
  display: none;
}

.global-search-empty > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 8px;
  background: #303238;
  color: #9ea6ff;
  font-family: var(--mono);
}

.global-search-empty strong {
  color: var(--text);
}

.global-search-empty p {
  max-width: 390px;
  margin: 7px 0 0;
  color: var(--subtle);
  font-size: .82rem;
  line-height: 1.5;
}

.global-search-help {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid #383a40;
  background: #202125;
  color: #8f949c;
  font-size: .66rem;
}

.global-search-help span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.global-search-help kbd {
  padding: 4px 5px;
}

@media (max-width: 900px) {
  .global-search-trigger span,
  .global-search-trigger kbd {
    display: none;
  }

  .global-search-trigger {
    width: 38px;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 620px) {
  .global-search-trigger {
    margin-right: 8px;
  }

  .global-search-layer {
    align-items: stretch;
    padding: 70px 8px 8px;
  }

  .global-search-dialog {
    width: 100%;
    max-height: calc(100dvh - 78px);
    align-self: stretch;
    border-radius: 10px;
  }

  .global-search-field {
    min-height: 60px;
    gap: 10px;
    padding: 0 13px;
  }

  .global-search-field input {
    font-size: .94rem;
  }

  .global-search-result {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  .global-search-result-marker {
    width: 34px;
    height: 34px;
  }

  .global-search-result-heading small {
    display: none;
  }

  .global-search-result-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  .global-search-help {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-dialog {
    animation: none;
  }
}

.holumn-page .institution-section:last-of-type {
  padding-bottom: 8px;
}

.holumn-monogram span {
  position: relative;
}

.holumn-monogram span::before,
.holumn-monogram span::after {
  position: absolute;
  inset: -22px -18px;
  border: 1px solid #444752;
  content: "";
  transform: rotate(45deg);
}

.holumn-monogram span::after {
  inset: -34px -30px;
  border-color: #34363e;
}

.holumn-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.holumn-form-grid article {
  display: flex;
  min-height: 300px;
  grid-column: span 2;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.holumn-form-grid article:nth-child(n + 4) {
  grid-column: span 3;
}

.holumn-form-grid article > span,
.holumn-reading-grid article > span,
.holumn-countermeasure > div > span,
.holumn-spill-core > span,
.holumn-evidence-link > span,
.holumn-blue-flame > span {
  color: var(--holumn-accent);
  font-size: .6rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.holumn-form-grid h3 {
  margin: auto 0 10px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 500;
}

.holumn-form-grid p,
.holumn-reading-grid p,
.holumn-countermeasure p,
.holumn-spill-record p,
.holumn-evidence-link p,
.holumn-blue-flame p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.holumn-form-mark {
  position: relative;
  width: 84px;
  height: 84px;
  margin-top: 32px;
}

.holumn-form-mark::before,
.holumn-form-mark::after,
.holumn-form-mark i {
  position: absolute;
  content: "";
}

.holumn-form-mark::before {
  inset: 10px;
  border: 1px solid #4b4e5a;
  transform: rotate(45deg);
}

.holumn-form-mark::after {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--holumn-accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.holumn-form-mark i {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #3d4048;
}

.holumn-form-mark i:nth-child(2) {
  transform: rotate(45deg);
}

.holumn-form-mark i:nth-child(3) {
  transform: rotate(-45deg);
}

.holumn-pressure-chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  list-style: none;
}

.holumn-pressure-chain li {
  position: relative;
  display: grid;
  min-height: 260px;
  grid-template-rows: auto 1fr;
  padding: 26px;
  background: #232428;
}

.holumn-pressure-chain li + li {
  border-left: 1px solid #393b42;
}

.holumn-pressure-chain li + li::before {
  position: absolute;
  top: 34px;
  left: -8px;
  width: 15px;
  height: 15px;
  border: 1px solid #4d526f;
  background: #232428;
  content: "";
  transform: rotate(45deg);
}

.holumn-pressure-chain li > span {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .68rem;
}

.holumn-pressure-chain li > div {
  align-self: end;
}

.holumn-pressure-chain small {
  color: var(--holumn-accent);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .08em;
}

.holumn-pressure-chain strong {
  display: block;
  margin: 12px 0 10px;
  color: #f2f3f5;
  line-height: 1.35;
}

.holumn-pressure-chain p {
  margin: 0;
  color: #949ba4;
  line-height: 1.55;
}

.holumn-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.holumn-reading-grid article {
  min-height: 360px;
  padding: clamp(30px, 5vw, 52px);
}

.holumn-reading-grid h3 {
  margin: 18px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
}

.holumn-reading-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.holumn-reading-grid li {
  padding: 6px 9px;
  border-radius: 5px;
  background: #1e1f22;
  color: #949ba4;
  font-size: .68rem;
}

.holumn-reading-axis {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid #393b42;
  border-left: 1px solid #393b42;
}

.holumn-reading-axis span {
  width: 1px;
  flex: 1;
  background: #4e5058;
}

.holumn-reading-axis b {
  color: #72767d;
  font-size: .54rem;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}

.holumn-incident-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
}

.holumn-incident-grid a {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  padding: 28px;
  background: #232428;
  transition: background .18s ease, border-color .18s ease;
}

.holumn-incident-grid a:nth-child(even) {
  border-left: 1px solid #393b42;
}

.holumn-incident-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.holumn-form-grid .holumn-source-links { font-size: .72rem; margin-top: auto; padding-top: 16px; }
.holumn-incident-grid .holumn-incident-limit { font-size: .8rem; color: var(--muted); }

.holumn-incident-grid a:nth-child(n + 3) {
  border-top: 1px solid #393b42;
}

.holumn-incident-grid a:hover,
.holumn-incident-grid a:focus-visible {
  background: #2b2d31;
}

.holumn-incident-grid a > span {
  color: var(--holumn-accent);
  font: .62rem Consolas, monospace;
  letter-spacing: .06em;
}

.holumn-incident-grid h3 {
  margin: 24px 0 12px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  font-weight: 500;
}

.holumn-incident-grid p {
  margin: 0;
  color: #aeb1b8;
  line-height: 1.65;
}

.holumn-incident-grid small {
  margin-top: auto;
  padding-top: 24px;
  color: #72767d;
  font-size: .68rem;
}

.holumn-evidence-link,
.holumn-blue-flame {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 12px;
  padding: 22px 26px;
  border: 1px solid #393b42;
  border-left: 3px solid var(--holumn-accent);
  border-radius: 8px;
  background: #232428;
}

.holumn-evidence-link a,
.holumn-blue-flame a,
.holumn-spill-links a {
  color: #b3b9ff;
  font-size: .74rem;
  font-weight: 700;
}

.holumn-countermeasure {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.holumn-countermeasure > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vw, 52px);
  border-right: 1px solid #393b42;
}

.holumn-countermeasure h3 {
  margin: 18px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  font-weight: 500;
  line-height: 1.15;
}

.holumn-countermeasure ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.holumn-countermeasure li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
}

.holumn-countermeasure li + li {
  border-top: 1px solid #393b42;
}

.holumn-countermeasure li > span {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .67rem;
}

.holumn-countermeasure strong {
  display: block;
  margin-bottom: 8px;
  color: #f2f3f5;
}

.holumn-blue-flame {
  border-left-color: #38a7e8;
}

.holumn-blue-flame > span {
  color: #68c5ff;
}

.holumn-spill-record {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
  overflow: hidden;
  border: 1px solid #393b42;
  border-radius: 8px;
  background: #232428;
}

.holumn-spill-core {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px);
  border-right: 1px solid #393b42;
}

.holumn-spill-core strong {
  margin: 20px 0 14px;
  color: #f2f3f5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
}

.holumn-spill-record ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.holumn-spill-record li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 28px;
  color: #aeb1b8;
}

.holumn-spill-record li + li {
  border-top: 1px solid #393b42;
}

.holumn-spill-record li b {
  color: #72767d;
  font-family: Consolas, monospace;
  font-size: .67rem;
  font-weight: 500;
}

.holumn-spill-links {
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  padding-top: 18px;
}

@media (max-width: 1180px) {
  .holumn-page .institution-hero {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .holumn-page .institution-hero dl {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .holumn-page .institution-hero dl div + div {
    border-top: 0;
    border-left: 1px solid #393b42;
  }
}

@media (max-width: 900px) {
  .holumn-pressure-chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holumn-pressure-chain li:nth-child(odd) {
    border-left: 0;
  }

  .holumn-pressure-chain li:nth-child(n + 3) {
    border-top: 1px solid #393b42;
  }

  .holumn-pressure-chain li:nth-child(3)::before {
    display: none;
  }
}

@media (max-width: 700px) {
  .holumn-form-grid,
  .holumn-pressure-chain,
  .holumn-incident-grid,
  .holumn-countermeasure,
  .holumn-spill-record {
    grid-template-columns: 1fr;
  }

  .holumn-form-grid article,
  .holumn-form-grid article:nth-child(n + 4) {
    min-height: 270px;
    grid-column: auto;
  }

  .holumn-pressure-chain li {
    min-height: 220px;
  }

  .holumn-pressure-chain li + li,
  .holumn-pressure-chain li:nth-child(odd),
  .holumn-pressure-chain li:nth-child(n + 3),
  .holumn-incident-grid a:nth-child(even),
  .holumn-incident-grid a:nth-child(n + 3) {
    border-top: 1px solid #393b42;
    border-left: 0;
  }

  .holumn-pressure-chain li + li::before {
    display: none;
  }

  .holumn-reading-grid {
    grid-template-columns: 1fr;
  }

  .holumn-reading-axis {
    height: 60px;
    flex-direction: row;
    border: 0;
    border-top: 1px solid #393b42;
    border-bottom: 1px solid #393b42;
  }

  .holumn-reading-axis span {
    width: auto;
    height: 1px;
  }

  .holumn-reading-axis b {
    writing-mode: horizontal-tb;
  }

  .holumn-evidence-link,
  .holumn-blue-flame {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .holumn-countermeasure > div,
  .holumn-spill-core {
    border-right: 0;
    border-bottom: 1px solid #393b42;
  }

  .holumn-spill-links {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Preserve HTML visibility semantics when components declare flex or grid display. */
[hidden] {
  display: none !important;
}

/* Compact reader utilities share the archive's flat controls. */
.reader-section-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 16px 0;
  padding: 0;
  background: transparent;
  scroll-margin-top: 110px;
}
.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line-bright);
  background: #26272b;
}
.reader-toolbar .document-meta {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0;
  border: 0;
}
.reader-toolbar .reader-section-nav {
  flex: 0 1 330px;
  width: 100%;
  margin: 0;
}
.reader-toolbar + .markdown-body {
  padding-top: clamp(28px, 4vw, 44px);
}
.world-term-guide {
  container: world-terms / inline-size;
  margin-block: 24px 36px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #41434a;
  border-radius: 8px;
  background: #232428;
}
.world-term-guide h2 {
  margin: 0 0 20px;
  color: #e1e3e8;
  font-size: 1.15rem;
}
.world-term-guide dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
}
.world-term-guide dt {
  margin-bottom: 6px;
  color: #b4b2ed;
  font-size: .9rem;
  font-weight: 600;
}
.world-term-guide dd {
  margin: 0;
  color: #b5bac1;
  font-size: .85rem;
  line-height: 1.65;
}
.reader-section-nav label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
}
.reader-section-nav select {
  flex: 1;
  min-width: 0;
  max-width: 330px;
  height: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #4b4e57;
  border-radius: 5px;
  background: #1e1f22;
  color: #e1e3e8;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
#character-profile-content > .reader-section-nav {
  margin: 18px 0;
}
.timeline-toggle {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #4b4e57;
  border-radius: 5px;
  background: #232428;
  color: #c3c5f5;
  font: inherit;
  font-size: .62rem;
  cursor: pointer;
}
.timeline-toggle:hover {
  background: #303137;
}
.reader-section-nav select:focus-visible, .timeline-toggle:focus-visible {
  outline: 2px solid #a3a1ff;
  outline-offset: 3px;
}
.timeline-content {
  min-width: 0;
}
.timeline-content[hidden] {
  display: none;
}
.story-timeline-header:has(.timeline-toggle), .character-section-header:has(.timeline-toggle) {
  flex-wrap: wrap;
  gap: 12px;
}
.timeline-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 18px;
  margin-left: auto;
}
.timeline-header-actions > span {
  color: #aeb1ba;
  font-size: .58rem;
  font-weight: 700;
  white-space: nowrap;
}
.timeline-header-actions > span span {
  color: #8b95ff;
}
.archive-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #c4c7ce;
  font-size: .7rem;
  cursor: pointer;
}
.archive-check input {
  width: 18px;
  height: 18px;
  accent-color: #9994ff;
}
.profile-art-era {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 4px;
  background: #232428;
  color: #e4e4fa;
  font: 700 .72rem 'Courier New', monospace;
  pointer-events: none;
}
.profile-art-era[hidden] {
  display: none;
}
.chapter-kind {
  margin: 10px 0;
  color: #c4c7ce;
  font-size: .82rem;
}
#chapter-library > .archive-toolbar {
  margin: 0 0 16px;
  padding: 0;
}
#chapter-library > .archive-toolbar .filter-group {
  flex-wrap: wrap;
}
.chapter-preface.is-outline tbody th {
  background: #292b30;
  color: #c4c7ce;
}
.chapter-preface.is-outline {
  border-left-color: #747982;
}
.behavior-tooltip-close {
  width: 44px;
  height: 44px;
}
.behavior-tooltip {
  max-height: min(560px, calc(100dvh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.behavior-tooltip-close:focus-visible {
  outline: 2px solid #d6c2ed;
  outline-offset: 2px;
}

/* Approximate strands are outside numbered chronological tracks. */
.timeline-approximate {
  padding: 20px 24px;
  border-top: 1px solid #41434a;
  background: #232428;
}
.timeline-approximate > h3 {
  margin: 0 0 6px;
  color: #ddd5ec;
  font-size: .75rem;
}
.timeline-approximate > p {
  margin: 0 0 18px;
  color: #b5bac1;
  font-size: .67rem;
  line-height: 1.6;
}
.timeline-approximate-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.timeline-approximate-track > li {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #4c4659;
  border-radius: 6px;
  min-width: 0;
  background: #26272b;
}
.timeline-approximate-track > li::before, .timeline-approximate-track > li::after {
  display: none;
}
.timeline-approximate-track .timeline-arc-band {
  position: static;
  display: block;
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  border: 0;
  height: auto;
  color: #c1a5d7;
  font-size: .72rem;
}
.timeline-approximate-track :is(.timeline-marker, .character-timeline-marker) {
  position: static;
  flex: 0 0 32px;
  transform: none;
  margin: 0;
  color: #c1a5d7;
  background: transparent;
  box-shadow: none;
  border-color: #8c739e;
}
.timeline-approximate-track h3 {
  margin: 6px 0 8px;
  color: #e1e3e8;
  font-size: .82rem;
}
.timeline-approximate-track p {
  margin: 0;
  color: #b5bac1;
  font-size: .67rem;
  line-height: 1.65;
}
.timeline-approximate-track small {
  color: #c1a5d7;
  font-size: .73rem;
}
.timeline-approximate-track > li > button {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.timeline-approximate-track > li.is-chapter-active, .timeline-approximate-track > li.is-moment-context, .timeline-approximate-track > li.is-active {
  border-color: #6fc798;
}
.timeline-approximate-track > li.is-chapter-active .timeline-marker {
  background: #237a48;
  border-color: #6fc798;
  color: #f2f3f5;
}
.timeline-approximate-track > li.is-filter-active {
  border-color: #a99ace;
  background: #302c3d;
}
.timeline-approximate-track :is(.timeline-marker, .moment-phase-number, .character-timeline-marker) {
  font-size: .9rem;
}
.timeline-approximate-track .timeline-moment-anchor {
  margin-top: 12px;
}
.timeline-approximate-track .moment-phase-number {
  border-color: #8c739e;
}
.moment-phase-map .timeline-approximate-track > li > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  min-height: 44px;
}
.timeline-approximate-track .moment-phase-heading {
  grid-column: 1 / -1;
  min-height: 28px;
}
.timeline-approximate-track .moment-phase-copy {
  display: contents;
}
.timeline-approximate-track .moment-phase-copy :is(h3, p) {
  align-self: center;
  margin: 0;
}
.timeline-approximate-track .moment-phase-copy p {
  text-align: right;
}

@container world-terms (max-width: 680px) {
  .world-term-guide dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container world-terms (max-width: 420px) {
  .world-term-guide dl { grid-template-columns: minmax(0, 1fr); }
}

@container house-pane (max-width: 1000px) {
  .house-hero {
    grid-template-columns: 100px minmax(0, 1fr);
  }
  .house-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }
  .house-facts div + div {
    border-top: 0;
    border-left: 1px solid #3a3c43;
  }
  .house-facts div {
    align-content: start;
    grid-template-rows: minmax(2em, auto) auto;
    padding: 20px 18px;
  }
}
@container house-pane (max-width: 650px) {
  .house-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .house-mark {
    display: none;
  }
  .house-hero-copy {
    padding: 32px 24px;
  }
  .house-hero h1 {
    font-size: clamp(2.45rem, 10cqi, 4rem);
  }
  .house-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .house-facts div {
    padding: 18px;
  }
  .house-facts div:nth-child(3) {
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }
  .house-facts div:nth-child(4) {
    border-top: 1px solid #3a3c43;
  }
  .house-facts div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-top: 1px solid #3a3c43;
    border-left: 0;
  }
}
@media (max-width: 620px) {
  .reader-section-nav {
    gap: 10px;
  }
  .reader-toolbar {
    padding: 12px 18px;
  }
  .reader-toolbar .reader-section-nav {
    flex-basis: 100%;
  }
  .reader-section-nav select {
    font-size: 16px;
  }
  .timeline-header-actions {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
  }
  .timeline-header-actions .timeline-toggle {
    margin-left: auto;
  }
  .timeline-approximate {
    padding: 18px 14px;
  }
  .timeline-approximate-track .moment-phase-copy p {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* One inset chevron for native single-choice controls across archive pages. */
:root select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b5bac1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.resource-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.resource-template-badge { display: inline-block; padding: 4px 8px; border: 1px solid #487668; border-radius: 4px; background: #263c35; color: #a4d9c4; font-size: .7rem; font-weight: 700; line-height: 1.3; }
@media (max-width: 640px) {
  .gallery-grid.production-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  :root select:not([multiple]):not([size]) { appearance: auto; -webkit-appearance: auto; background-image: none; }
}
/* Shared content notices use flat archive surfaces and remain separate from canon facts. */
.content-notice { display: block; width: fit-content; max-width: 100%; margin: .5rem 0; padding: .35rem .55rem; border: 1px solid #766445; border-radius: 5px; background: #302c26; color: #dfbd7d; font-size: .75rem; font-weight: 600; line-height: 1.5; }
.content-notice-full { width: auto; padding: .8rem 1rem; margin: 0 0 1rem; }
.content-notice-detail { display: block; color: #c8c4bc; font-size: .85rem; font-weight: 400; margin-top: .25rem; }
.content-filter-toolbar { margin: 1rem 0; }
.content-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.content-filter-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-size: .85rem; color: var(--text-muted, #b5bac1); }
.content-filter-toggle input { accent-color: #9590f5; width: 1rem; height: 1rem; cursor: pointer; }
.content-filter-toggle:focus-within { outline: 2px solid #9590f5; outline-offset: 3px; border-radius: 3px; }
.content-filter-status { color: var(--text-muted, #b5bac1); font-size: .8rem; margin: .6rem 0; }
.holumn-incident-grid > [hidden], .document-card[hidden], .moment-card[hidden] { display: none !important; }
.holumn-incident-grid a > .content-notice { color: #dfbd7d; font-family: inherit; letter-spacing: normal; }

/* Page-start spacing belongs to the container, not whichever child loads first.
   Use page-content-start for future standalone readers. Keep this after the
   responsive padding shorthands; do not inset media or compound card interiors. */
:is(.page-content-start, .gallery-reader-view, .resource-reader, .panel-reader,
    .document-reader-view, .moment-reader, .character-profile-content,
    .institution-scroll, .duchy-scroll) {
  padding-block-start: var(--page-content-inset);
}

:is(.page-content-start, .gallery-reader-view, .resource-reader, .panel-reader,
    .document-reader-view, .moment-reader, .character-profile-content,
    .institution-scroll, .duchy-scroll) > .document-breadcrumbs {
  padding-block-start: 0;
}