:root {
  --primary-color: #9c2525; /* Imperial Red */
  --secondary-color: #2c2c2c; /* Ink Black */
  --accent-color: #d4af37; /* Metallic Gold */
  --bg-color: #ffffff; /* Pure White */
  --text-color: #333;
  --font-classic: "Noto Serif SC", "Songti SC", SimSun, serif;
  --font-artistic: "Noto Serif SC", "Songti SC", SimSun, serif;
  --font-serif: "Noto Serif SC", "Playfair Display", serif;
  --font-sans: "Inter", "Noto Sans SC", sans-serif;
  --page-title-index-size: clamp(2rem, 4vw, 3.2rem);
  --page-title-index-line-height: 1.05;
  --page-title-parent-size: clamp(2rem, 4vw, 3.2rem);
  --page-title-parent-line-height: 1.05;
  --page-title-child-size: 2.2rem;
  --page-title-child-line-height: 1.2;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
}

.lang-en {
  font-family: var(--font-sans) !important;
}

.lang-en p,
.lang-en div,
.lang-en span,
.lang-en .detail-card h2,
.lang-en .content-body p,
.lang-en .accent-desc {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

/* Base Headings & Artistic Text */
h1, h2, h3, .zh-text, .section-header .desc, .main-titles .subtitle {
  font-family: var(--font-classic);
}

/* Language-Specific Readability Overrides */
/* Use clear Sans-Serif (Inter) for English headings/subtitles to fix hard-to-read italic-like mobile render */
.lang-en h1,
.lang-en h2,
.lang-en h3,
.lang-en .subtitle,
.lang-en .section-home-link span,
.lang-en .element-nav-item span {
  font-family: var(--font-sans) !important;
  font-style: normal;
  letter-spacing: normal;
}

.lang-en h1 {
  font-size: 2.2rem;
  font-weight: 700;
}

.lang-en h2 {
  font-size: 2rem;
  font-weight: 700;
}

.lang-en h3 {
  font-size: 1.4rem;
  font-weight: 600;
}

.lang-en .subtitle {
  font-weight: 400;
  opacity: 0.8;
}

/* Restore Classic font for actual Chinese characters within English pages if any */
.lang-en .zh-text {
  font-family: var(--font-classic) !important;
}

/* Background Texture */
body::before {
  content: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: none;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

nav .container.nav-content {
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

body.lang-en:not(.hd-landing-page):not(.book-page):not(.chapter-page) nav .container.nav-content,
body.lang-zh:not(.hd-landing-page):not(.book-page):not(.chapter-page) nav .container.nav-content {
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

main.container {
  padding-top: 60px;
  margin-bottom: 40px;
}

main.container.page-main {
  max-width: 1680px;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Header & Nav */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.8rem 0;
  background: #1a1a1a; /* Sleek Dark Gray */
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  border-bottom: 1px solid #333;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px; /* Reduced from 12px */
  text-decoration: none;
  font-weight: 700;
  font-size: 1.6rem;
  color: #ffffff; /* White text for dark nav */
  letter-spacing: 4px;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
}

.nav-logo-img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}

.logo span {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  margin-left: 4px; /* Reduced from 10px */
  font-size: 1.2rem;
  color: #cccccc;
}

.nav-tagline {
  display: none;
}

.domain-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.domain-tab {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.42rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
  position: relative;
  z-index: 3;
}

.domain-tab:hover,
.domain-tab.active {
  color: #fff;
  border-color: rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.12);
}

/* Dropdown Menu */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
  margin-right: 1.5rem;
}

/* Language Selector */
.lang-switch {
  display: flex;
  gap: 10px;
  margin-left: 2rem;
}

.nav-content > div:last-child {
  margin-left: auto;
}

.lang-btn {
  background: none;
  border: 1px solid #444;
  color: #888;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.75rem;
  transition: var(--transition);
}

.lang-btn.active {
  color: #ffffff;
  border-color: #ffffff;
  background: rgba(255,255,255,0.1);
}

/* Multilingual Visibility */



.dropbtn {
  background: rgba(255,255,255,0.05);
  border: 1px solid #444;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
}

.dropbtn:hover {
  border-color: #666;
  background: rgba(255,255,255,0.05); /* Minimal light background */
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #242424; /* Dark dropdown */
  min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 1001;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #333;
  margin-top: 0; /* Removed gap to prevent flickering */
  top: 100%; /* Align exactly below button */
  padding-top: 5px; /* Visual gap inside the interactive container */
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-content a {
  color: #e0e0e0;
  padding: 14px 20px;
  text-decoration: none;
  display: block;
  font-size: 0.85rem;
  transition: var(--transition);
}

.dropdown-content a:hover {
  background-color: #333;
  color: #ffffff;
  padding-left: 25px;
}

.nav-dropdown:hover .dropdown-content {
  display: block;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-titles {
  text-align: center;
  margin: 1.5rem 0 2rem;
}

.main-titles h1 {
  font-size: 2.2rem;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.main-titles .subtitle {
  font-size: 1rem;
  color: var(--secondary-color);
  letter-spacing: 1px;
}

.center-logo {
  width: 100%;
  background: white;
  padding: 4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.center-logo-inner {
  width: 240px;
}

.center-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  /* Removed mix-blend-mode for white background asset */
}

.hero-visual {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  background: transparent; /* Merge into white body */
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Sections Grid */
.sections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 2.5rem 3.5rem 2.5rem 3.5rem !important;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: url('i/mural/XM1005_C_v1.webp') no-repeat center 20%;
  background-size: cover;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  width: min(85vw, 1360px) !important;
  margin: 3.5rem auto 50px !important;
}

.sections-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(245, 245, 235, 0.60);
  z-index: 0;
  pointer-events: none;
}

.section-card {
  background: transparent;
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
  border-right: 1px solid rgba(212, 175, 55, 0.1);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  z-index: 1;
}

.section-card:hover {
  background: rgba(212, 175, 55, 0.05); /* Very subtle gold tint only */
  transform: scale(1.02);
  z-index: 2;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
}

.section-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

.section-card > * {
  position: relative;
  z-index: 1;
}

.section-card:hover {
  transform: translateY(-10px);
}

.section-card:hover h3, .section-card:hover p {
  color: #000000 !important;
}

.section-card:hover::after {
  opacity: 1;
}

.section-card h3 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--primary-color);
}

.section-card p {
  font-family: var(--font-classic);
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
  margin: 0;
}

.section-card .cb-index-pill {
  font-size: 0.7rem;
  color: rgba(120,120,120,0.85);
  background: rgba(180,180,180,0.12);
  border: 1px solid rgba(150,150,150,0.30);
  padding: 1px 10px;
  border-radius: 12px;
  margin: 0 auto 0.9rem auto;
  display: inline-block;
  line-height: 1.4;
}

.section-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
  color: var(--secondary-color);
}

img.section-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(1.2) brightness(1.15); /* Aggressive whitening for difficult backgrounds */
}

.domain-gateway .main-titles,
.domain-placeholder .main-titles {
  margin-bottom: 2rem;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 50px;
}

.domain-card {
  min-height: 260px;
  padding: 1.6rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
  transition: var(--transition);
}

.domain-card:hover {
  transform: translateY(-6px);
  border-color: rgba(156,37,37,0.28);
}

.domain-card.is-active {
  border-color: rgba(156,37,37,0.35);
}

.domain-kicker {
  color: var(--accent-color);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.domain-card h2,
.placeholder-band h2 {
  color: var(--primary-color);
  font-size: 1.5rem;
}

.domain-card p,
.placeholder-band p {
  color: #555;
  font-family: var(--font-sans);
}

.domain-status {
  color: #111;
  font-weight: 700;
  font-size: 0.85rem;
}

.placeholder-band {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  padding: 2rem;
  max-width: 720px;
  margin: 0 auto 50px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
}

/* Element Preview List */
.element-strip {
  background: var(--secondary-color);
  color: white;
  padding: 4rem 0;
  margin: 4rem 0;
  overflow: hidden;
}

.marquee {
  display: flex;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
}

.marquee span.logo {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-logo-img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}

.marquee span {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  margin-right: 4rem;
  color: var(--accent-color);
  opacity: 0.8;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Footer */
footer {
  padding: 4rem 0 2rem;
  text-align: center;
  color: #888;
  background-color: #000000;
  border-top: 1px solid #111;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  text-align: left;
  padding: 0 2rem;
}

.footer-column h4 {
  color: #fff;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-family: var(--font-sans);
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 0.8rem;
}

.footer-column ul li a {
  color: #aaa;
  text-decoration: none;
  font-size: 0.75rem;
  transition: var(--transition);
}

.footer-column ul li a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem 0;
  font-size: 0.7rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: #aaa;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

.back-to-top {
  position: absolute;
  right: 2rem;
  top: -25px;
  background: #000;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: var(--transition);
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid #333;
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: #222;
}

.back-to-top::after {
  content: "▲";
  font-size: 1rem;
}

footer {
  position: relative;
}

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* v0.1.21 History hierarchy after removing dynasty and event rails */
.muzi-nav-v21.h-index-page main.container.page-main,
.muzi-nav-v21.hd-landing-page:not(.chapter-page) main.container.page-main {
  padding-top: 0 !important;
}

.muzi-nav-v21.h-index-page .section-header,
.muzi-nav-v21.hd-landing-page:not(.chapter-page) .section-header {
  padding-top: 2.25rem !important;
}

@media (max-width: 700px) {
  .muzi-nav-v21.h-index-page .section-header,
  .muzi-nav-v21.hd-landing-page:not(.chapter-page) .section-header {
    padding-top: 1.5rem !important;
  }
}

/* v0.1.21 shared navigation alignment after removing the legacy C rails */
.muzi-nav-v21.book-page main.container,
.muzi-nav-v21.chapter-page main.container {
  padding-top: 0 !important;
}

.muzi-nav-v21 .site-search.site-header-search {
  margin: 0 !important;
}

.muzi-nav-v21.book-page .section-header,
.muzi-nav-v21.chapter-page .section-header {
  padding-top: 2.25rem !important;
}

@media (max-width: 700px) {
  .muzi-nav-v21.book-page .section-header,
  .muzi-nav-v21.chapter-page .section-header {
    padding-top: 1.5rem !important;
  }
}

/* ===========================================================================
   v0.1.21 Shared Header and Dockable Navigation Shell
   =========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.muzi-nav-v21 {
  --site-header-height: 68px;
  --site-sidebar-width: 270px;
  padding-top: var(--site-header-height);
  overflow-x: clip;
}

.muzi-nav-v21.lang-zh,
.muzi-nav-v21.lang-tc {
  --site-sidebar-width: 202.5px;
}

.muzi-nav-v21 .site-header {
  position: fixed;
  z-index: 1200;
  inset: 0 0 auto 0;
  height: var(--site-header-height);
  display: grid;
  grid-template-columns: 34px minmax(170px, auto) auto minmax(280px, 1fr) auto;
  align-items: center;
  column-gap: 0.55rem;
  padding: 0.55rem 1.25rem;
  box-sizing: border-box;
  background: rgba(250, 247, 238, 0.98);
  border-bottom: 1px solid rgba(62, 53, 42, 0.16);
  box-shadow: 0 2px 12px rgba(58, 45, 28, 0.06);
}

.site-menu-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #302b24;
  background: transparent;
  cursor: pointer;
}

.site-menu-toggle span {
  width: 16px;
  height: 1.7px;
  background: currentColor;
}

.site-menu-toggle:hover,
.site-menu-toggle:focus-visible {
  color: #9c2525;
  background: rgba(156, 37, 37, 0.06);
  box-shadow: 0 0 0 3px rgba(156, 37, 37, 0.1);
}

.site-header-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #25231f;
  text-decoration: none;
}

.site-header-brand .nav-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
}

.site-header-wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}

.site-header-wordmark strong {
  font: 700 1.25rem/1 Georgia, serif;
  letter-spacing: 0.12em;
}

.site-header-wordmark small {
  margin-top: 0.22rem;
  color: #6e665b;
  font-size: 0.68rem;
  white-space: nowrap;
}

.muzi-nav-v21 .site-header-search {
  position: relative;
  width: 300px !important;
  max-width: 100%;
  justify-self: center;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .muzi-nav-v21 .site-header-search {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.muzi-nav-v21 .site-header-search .site-search-form {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin: 0;
}

.muzi-nav-v21 .site-header-search .site-search-input,
.muzi-nav-v21 .site-header-search .site-search-form button {
  height: 38px;
  border-radius: 0;
}

.muzi-nav-v21 .site-header-search .site-search-input {
  border: 1px solid rgba(42, 37, 31, 0.34);
  border-right: 0;
  background: #fff;
}

.muzi-nav-v21 .site-header-search .site-search-form button {
  border: 1px solid #333333;
  padding: 0 1rem;
  background: #454545;
  color: #ffffff;
}

.muzi-nav-v21 .site-header-search .site-search-input:focus {
  border-color: rgba(55, 55, 55, 0.5);
  box-shadow: 0 0 0 3px rgba(55, 55, 55, 0.08);
}

.muzi-nav-v21 .site-header-search .site-search-form button:hover,
.muzi-nav-v21 .site-header-search .site-search-form button:focus-visible {
  background: #363636;
  border-color: #2b2b2b;
}

.muzi-nav-v21 .site-header-search .site-search-results {
  position: absolute;
  z-index: 1250;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  width: 100% !important;
  grid-template-columns: 1fr !important;
  margin: 0 !important;
  padding: 0.35rem;
  box-sizing: border-box;
  background: #fffdf8;
  border: 1px solid rgba(62, 53, 42, 0.18);
  box-shadow: 0 10px 28px rgba(54, 43, 28, 0.16);
}

.muzi-nav-v21 .site-header-search .site-search-results:empty {
  display: none;
}

.site-language {
  justify-self: start;
}

.muzi-nav-v21 .site-language .lang-switch {
  width: 96px;
  min-width: 96px;
  height: 34px;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  padding: 0 1rem 0 0.1rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #302b24;
  field-sizing: fixed;
}

.muzi-nav-v21 .site-language .lang-switch:focus {
  outline: none;
}

.muzi-nav-v21 .site-language .lang-switch:focus-visible {
  outline: 2px solid rgba(62, 53, 42, 0.45);
  outline-offset: 2px;
}

.site-sidebar {
  position: fixed;
  z-index: 1150;
  top: var(--site-header-height);
  bottom: 0;
  left: 0;
  width: min(var(--site-sidebar-width), 88vw);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f3e8;
  border-right: 1px solid rgba(62, 53, 42, 0.16);
  box-shadow: 8px 0 28px rgba(54, 43, 28, 0.14);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 180ms;
}

.site-sidebar-temporary-open .site-sidebar,
.site-sidebar-docked .site-sidebar {
  transform: translateX(0);
  visibility: visible;
}

.site-sidebar-docked .site-sidebar {
  box-shadow: none;
}

.site-sidebar-toolbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(62, 53, 42, 0.14);
}

.site-sidebar-toolbar strong {
  color: #302b24;
  font-size: 0.82rem;
}

.site-sidebar-mode {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(62, 53, 42, 0.26);
  border-radius: 3px;
  background: #fffdf7;
  color: #5c5145;
  font-size: 0.72rem;
  cursor: pointer;
}

.site-sidebar-nav {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.55rem 0.5rem;
  overflow: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-sidebar-l1-list {
  display: grid;
  gap: 0;
  padding-bottom: 0.55rem;
}

.site-sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 15px;
  padding: 0.22rem 0.5rem;
  box-sizing: border-box;
  border-radius: 4px;
  color: #3f3931;
  text-decoration: none;
}

.site-sidebar-l1 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.site-sidebar-link:hover {
  background: rgba(156, 37, 37, 0.06);
}

.site-sidebar-link:focus-visible,
.site-sidebar-group summary:focus-visible,
.site-sidebar-child:focus-visible,
.site-sidebar-mode:focus-visible {
  outline: 2px solid #7e1e1e;
  outline-offset: 1px;
}

.site-sidebar-link.active {
  background: rgba(156, 37, 37, 0.09);
  color: #7e1e1e;
  font-weight: 700;
}

.site-sidebar-link.active::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: #9c2525;
}

.site-sidebar-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
}

.site-sidebar-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-sidebar-icon svg.site-sidebar-hourglass {
  width: 17px;
  height: 14px;
}

.site-sidebar-parent-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-right: 0.28rem;
  object-fit: contain;
  border-radius: 2px;
}

.site-sidebar-parent-link {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.site-sidebar-l2 {
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.55rem 0 10px;
  overflow: visible;
  border-top: 1px solid rgba(62, 53, 42, 0.13);
}

/* v0.1.35 Meshes */
body.x-matrix-body {
  color: #e8fff2;
  background-color: #020705;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(22, 255, 128, 0.16), transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(0, 214, 255, 0.15), transparent 30%),
    radial-gradient(circle at 54% 78%, rgba(244, 201, 111, 0.12), transparent 38%),
    linear-gradient(135deg, #030806 0%, #07100e 48%, #010203 100%);
}

body.x-matrix-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(78, 255, 164, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 230, 255, 0.07) 1px, transparent 1px),
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 11px);
  background-size: 38px 38px, 38px 38px, 100% 12px;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 82%);
}

.x-matrix-page {
  width: min(1540px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 92px 0 3rem;
  color: #eafff3;
}

.x-matrix-page a {
  color: inherit;
}

.x-hero {
  position: relative;
  margin-bottom: 1.2rem;
}

.x-hero .site-breadcrumb-row {
  justify-content: center;
  margin-bottom: 1rem;
}

.x-hero-grid {
  position: relative;
  overflow: hidden;
  padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(99, 255, 178, 0.26);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 18%, rgba(99, 255, 178, 0.22), transparent 31%),
    radial-gradient(circle at 82% 16%, rgba(0, 214, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(2, 20, 14, 0.94), rgba(8, 12, 22, 0.92));
  box-shadow: inset 0 1px rgba(210, 255, 230, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), 0 0 48px rgba(38, 255, 145, 0.1);
}

.x-hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(109, 255, 185, 0.14) 33%, transparent 45%),
    repeating-linear-gradient(90deg, rgba(115, 255, 186, 0.06) 0 1px, transparent 1px 42px);
}

.x-kicker,
.x-lede,
.x-stat-row,
.x-hero h1 {
  position: relative;
  z-index: 1;
}

.x-kicker {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 0.4rem;
  color: #7cffbd;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.x-hero h1 {
  margin: 0;
  color: #f2fff8;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-shadow: 0 0 26px rgba(84, 255, 174, 0.36), 0 16px 42px rgba(0, 0, 0, 0.5);
}

.x-lede {
  max-width: 820px;
  margin: 1rem 0 0;
  color: rgba(232, 255, 242, 0.78);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.x-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.x-stat-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(124, 255, 189, 0.22);
  border-radius: 999px;
  color: rgba(232, 255, 242, 0.82);
  background: rgba(2, 18, 12, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.x-stat-row b {
  color: #7cffbd;
}

.x-signal-panel,
.x-lane {
  border: 1px solid rgba(124, 255, 189, 0.2);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  box-shadow: inset 0 1px rgba(255,255,255,0.1), 0 20px 54px rgba(0, 0, 0, 0.28);
}

.x-signal-panel {
  margin-bottom: 1.2rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.x-signal-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.x-signal-head span {
  color: #ffe39b;
  font-size: 1.2rem;
  font-weight: 900;
}

.x-signal-head p {
  margin: 0;
  color: rgba(232, 255, 242, 0.62);
  font-size: 0.9rem;
}

.x-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.x-signal-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.8rem;
  border: 1px solid rgba(118, 255, 189, 0.22);
  border-radius: 18px;
  text-decoration: none;
  background:
    radial-gradient(circle at 95% 10%, rgba(0, 214, 255, 0.16), transparent 32%),
    rgba(1, 11, 8, 0.76);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.x-signal-card:hover,
.x-signal-card:focus-visible,
.x-signal-card.is-x-linked {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 189, 0.72);
  box-shadow: 0 0 28px rgba(84, 255, 174, 0.22);
  outline: none;
}

.x-signal-label {
  color: #7cffbd;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.x-signal-card strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff5cf;
}

.x-signal-card small,
.x-signal-card em {
  color: rgba(232, 255, 242, 0.64);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
}

.x-lattice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.x-lane {
  min-width: 0;
  padding: 1rem;
}

.x-lane-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  margin-bottom: 0.9rem;
}

.x-domain-code {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #06100a;
  background: linear-gradient(135deg, #7cffbd, #38dfff);
  font-weight: 950;
  box-shadow: 0 0 30px rgba(84, 255, 174, 0.28);
}

.x-lane-head h2 {
  margin: 0;
  color: #f4fff8;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.x-lane-head p {
  margin: 0.25rem 0 0;
  color: rgba(232, 255, 242, 0.62);
  font-size: 0.88rem;
  line-height: 1.4;
}

.x-lane-stats {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.45rem;
  color: rgba(232, 255, 242, 0.72);
  font-size: 0.78rem;
}

.x-lane-stats b {
  color: #ffe39b;
}

.x-lane-stats span::before {
  content: "/";
  color: rgba(232, 255, 242, 0.32);
}

.x-parent-grid {
  display: grid;
  gap: 0.75rem;
}

.x-parent-card {
  overflow: hidden;
  border: 1px solid rgba(124, 255, 189, 0.16);
  border-radius: 20px;
  background: rgba(0, 9, 6, 0.72);
}

.x-parent-head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem;
  text-decoration: none;
}

.x-parent-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255, 227, 155, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.x-parent-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.x-parent-copy small {
  color: #7cffbd;
  font-weight: 900;
}

.x-parent-copy strong {
  color: #fff5cf;
  line-height: 1.1;
}

.x-parent-copy em {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(232, 255, 242, 0.58);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.35;
}

.x-child-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.75rem 0.75rem;
}

.x-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  min-height: 30px;
  padding: 0.22rem 0.38rem;
  border: 1px solid rgba(124, 255, 189, 0.16);
  border-radius: 999px;
  color: rgba(232, 255, 242, 0.82);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.x-node-chip:hover,
.x-node-chip:focus-visible,
.x-node-chip.is-x-linked {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(124, 255, 189, 0.75);
  background: rgba(80, 255, 165, 0.14);
  box-shadow: 0 0 22px rgba(84, 255, 174, 0.2);
  outline: none;
}

.x-node-chip.is-x-source {
  box-shadow: 0 0 24px rgba(255, 227, 155, 0.34);
}

.x-node-chip.is-x-target {
  box-shadow: 0 0 24px rgba(56, 223, 255, 0.34);
}

.x-child-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  object-fit: cover;
}

.x-icon-fallback {
  display: inline-grid;
  place-items: center;
}

.x-lane-c { border-color: rgba(255, 108, 91, 0.28); }
.x-lane-h { border-color: rgba(255, 227, 155, 0.28); }
.x-lane-a { border-color: rgba(56, 223, 255, 0.28); }

.m-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.m-module-tile {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: grid;
  align-content: end;
  gap: 0.75rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid rgba(124, 255, 189, 0.24);
  border-radius: 30px;
  text-decoration: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(124, 255, 189, 0.24), transparent 31%),
    radial-gradient(circle at 80% 22%, rgba(56, 223, 255, 0.2), transparent 35%),
    linear-gradient(145deg, rgba(3, 24, 17, 0.94), rgba(4, 7, 14, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 28px 70px rgba(0, 0, 0, 0.34);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.m-module-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.78;
  background:
    repeating-linear-gradient(90deg, rgba(124, 255, 189, 0.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(56, 223, 255, 0.055) 0 1px, transparent 1px 46px);
  mask-image: linear-gradient(135deg, #000, transparent 78%);
}

.m-module-tile:hover,
.m-module-tile:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(124, 255, 189, 0.68);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), 0 0 44px rgba(84, 255, 174, 0.2), 0 34px 80px rgba(0, 0, 0, 0.42);
  outline: none;
}

.m-module-id,
.m-module-tile strong,
.m-module-tile p,
.m-module-tile em {
  position: relative;
  z-index: 1;
}

.m-module-id {
  width: fit-content;
  padding: 0.36rem 0.58rem;
  border: 1px solid rgba(124, 255, 189, 0.3);
  border-radius: 999px;
  color: #7cffbd;
  background: rgba(0, 0, 0, 0.32);
  font-weight: 950;
  letter-spacing: 0.12em;
}

.m-module-tile strong {
  color: #f4fff8;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.m-module-tile p {
  max-width: 560px;
  margin: 0;
  color: rgba(232, 255, 242, 0.72);
  line-height: 1.55;
}

.m-module-tile em {
  color: #ffe39b;
  font-style: normal;
  font-weight: 900;
}

.m-cascade-tree {
  overflow: hidden;
  padding: clamp(0.9rem, 2.4vw, 1.4rem);
  border: 1px solid rgba(124, 255, 189, 0.18);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(13, 16, 16, 0.96), rgba(4, 7, 7, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 28px 70px rgba(0, 0, 0, 0.38);
}

.m-tree-root,
.m-tree-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  color: rgba(235, 244, 239, 0.78);
  background: rgba(255, 255, 255, 0.035);
}

.m-tree-root {
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, 0.06);
}

.m-tree-root-folder,
.m-tree-domain-code,
.m-tree-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #09100b;
  background: linear-gradient(135deg, #ffe39b, #7cffbd);
  font-weight: 950;
  object-fit: cover;
}

.m-tree-domain-code {
  color: #06100a;
  background: linear-gradient(135deg, #7cffbd, #38dfff);
}

.m-tree-folder,
.m-tree-domain {
  position: relative;
}

.m-tree-folder summary,
.m-tree-domain summary {
  cursor: pointer;
  list-style: none;
  padding-left: 1.5rem;
}

.m-tree-folder summary::-webkit-details-marker,
.m-tree-domain summary::-webkit-details-marker {
  display: none;
}

.m-tree-folder > summary::before,
.m-tree-domain > summary::before {
  content: "▸";
  position: absolute;
  left: 0.5rem;
  color: rgba(124, 255, 189, 0.96);
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 10px rgba(124, 255, 189, 0.48);
  transition: transform 120ms ease;
}

.m-tree-folder[open] > summary::before,
.m-tree-domain[open] > summary::before {
  transform: rotate(90deg);
}

.m-tree-children {
  position: relative;
  margin-left: 1.2rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(124, 255, 189, 0.13);
}

.m-tree-pill {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.36rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.m-tree-pill-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.m-tree-tagline {
  display: block;
  width: 100%;
  overflow: hidden;
  color: rgba(232, 255, 242, 0.5);
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.m-tree-copy {
  min-width: 0;
  display: contents;
}

.m-tree-copy strong {
  overflow: hidden;
  color: rgba(244, 255, 248, 0.92);
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

.m-tree-copy small {
  display: block;
  overflow: hidden;
  color: rgba(232, 255, 242, 0.5);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin-top: 0.05rem;
}

.m-tree-id {
  flex: 0 0 auto;
  color: rgba(232, 255, 242, 0.55);
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 850;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}

.m-tree-row.m-tree-row--with-targets {
  grid-template-columns: 36px minmax(0, 1fr);
}

.m-tree-row--with-targets > .m-tree-pill {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.m-tree-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.m-tree-host-link,
.m-tree-icon-link {
  color: inherit;
  text-decoration: none;
}

.m-tree-host-link:hover,
.m-tree-host-link:focus-visible,
.m-tree-icon-link:hover,
.m-tree-icon-link:focus-visible {
  outline: none;
}

.m-tree-icon-link {
  display: inline-grid;
  place-items: center;
}

.m-tree-target-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem 0.18rem 0.18rem;
  border: 1px solid rgba(124, 255, 189, 0.32);
  border-radius: 999px;
  background: rgba(124, 255, 189, 0.07);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease, border-color 140ms ease;
  max-width: 22rem;
  min-width: 0;
}

.m-tree-target-pill:hover,
.m-tree-target-pill:focus-visible {
  background: rgba(124, 255, 189, 0.18);
  border-color: rgba(124, 255, 189, 0.65);
  transform: translateY(-1px);
  outline: none;
}

.m-tree-target-pill-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  object-fit: cover;
  background: linear-gradient(135deg, #ffe39b, #7cffbd);
}

.m-tree-target-pill .m-tree-pill {
  flex-direction: row;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  gap: 0.4rem;
}

.m-tree-target-pill .m-tree-pill-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.m-tree-target-pill .m-tree-copy strong {
  font-size: 0.86rem;
  color: rgba(244, 255, 248, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.m-tree-target-pill .m-tree-tagline {
  display: none;
}

.m-tree-target-pill .m-tree-id {
  font-size: 0.74rem;
  color: rgba(124, 255, 189, 0.85);
}

/* ---------------------------------------------------------------------------
   ME101 popover
   --------------------------------------------------------------------------- */

.me101-popover {
  width: min(560px, calc(100vw - 2rem));
  max-width: 560px;
  padding: 0;
  border: 1px solid rgba(124, 255, 189, 0.42);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(8, 18, 14, 0.98), rgba(20, 12, 8, 0.98));
  color: rgba(244, 255, 248, 0.92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 255, 189, 0.18) inset;
}

.me101-popover::backdrop {
  background: rgba(4, 10, 8, 0.62);
  backdrop-filter: blur(2px);
}

.me101-popover-inner {
  position: relative;
  padding: 1.1rem 1.25rem 1rem;
}

.me101-popover-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(232, 255, 242, 0.85);
  font-size: 1.05rem;
  cursor: pointer;
}

.me101-popover-close:hover,
.me101-popover-close:focus-visible {
  background: rgba(124, 255, 189, 0.18);
  outline: none;
}

.me101-popover-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.me101-popover-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  object-fit: cover;
  background: linear-gradient(135deg, #ffe39b, #7cffbd);
}

.me101-popover-icon--target {
  background: linear-gradient(135deg, #7cffbd, #38dfff);
}

.me101-popover-titles {
  min-width: 0;
  display: grid;
  gap: 0.05rem;
  flex: 1 1 auto;
}

.me101-popover-titles h3 {
  margin: 0;
  font-size: 0.94rem;
  color: rgba(244, 255, 248, 0.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me101-popover-titles small {
  color: rgba(232, 255, 242, 0.55);
  font-size: 0.74rem;
}

.me101-popover-arrow {
  font-size: 1.05rem;
  color: rgba(124, 255, 189, 0.95);
  flex: 0 0 auto;
}

.me101-popover-taglines {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.me101-popover-tagline {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: rgba(232, 255, 242, 0.78);
  line-height: 1.45;
}

.me101-popover-tagline-label {
  color: rgba(124, 255, 189, 0.85);
  font-weight: 850;
  font-feature-settings: "tnum";
}

.me101-popover-section {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(124, 255, 189, 0.16);
  border-radius: 10px;
  background: rgba(124, 255, 189, 0.04);
}

.me101-popover-section-label {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(124, 255, 189, 0.85);
  font-weight: 850;
}

.me101-popover-notation {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(244, 255, 248, 0.92);
}

.me101-popover-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.me101-popover-open {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(124, 255, 189, 0.55);
  background: linear-gradient(135deg, rgba(124, 255, 189, 0.22), rgba(56, 223, 255, 0.12));
  color: rgba(244, 255, 248, 0.95);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.me101-popover-open:hover,
.me101-popover-open:focus-visible {
  background: linear-gradient(135deg, rgba(124, 255, 189, 0.36), rgba(56, 223, 255, 0.22));
  outline: none;
}

.m-tree-leaf {
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
}

.m-tree-leaf:hover,
.m-tree-leaf:focus-visible {
  transform: translateX(2px);
  background: rgba(124, 255, 189, 0.08);
  outline: none;
}

.m-tree-row.is-mid-target {
  border-color: rgba(124, 255, 189, 0.42);
  background: linear-gradient(90deg, rgba(70, 255, 145, 0.18), rgba(56, 223, 255, 0.08)) !important;
  box-shadow: inset 3px 0 0 rgba(124, 255, 189, 0.9), 0 0 28px rgba(84, 255, 174, 0.14);
}

body.m-mesh-body .site-breadcrumb-row {
  opacity: 1;
}

body.m-mesh-body .site-breadcrumb-pill {
  color: #eafff3 !important;
  border-color: rgba(124, 255, 189, 0.42) !important;
  background: linear-gradient(180deg, rgba(7, 22, 17, 0.92), rgba(3, 11, 8, 0.86)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 20px rgba(84, 255, 174, 0.12) !important;
}

body.m-mesh-body .site-breadcrumb-separator {
  color: rgba(124, 255, 189, 0.8) !important;
  text-shadow: 0 0 10px rgba(124, 255, 189, 0.34);
}

@media (max-width: 1024px) {
  .x-lattice {
    grid-template-columns: 1fr;
  }

  .m-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .x-matrix-page {
    width: min(100% - 1rem, 1540px);
    padding-top: 82px;
  }

  .x-signal-head {
    align-items: start;
    flex-direction: column;
  }

  .x-hero h1 {
    font-size: clamp(2.5rem, 16vw, 4rem);
  }

  .m-tree-row,
  .m-tree-root {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .m-tree-row.m-tree-row--with-targets {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .m-tree-row--with-targets > .m-tree-pill {
    grid-template-columns: 1fr;
    row-gap: 0.45rem;
  }

  .m-tree-targets {
    grid-column: auto;
    justify-content: flex-start;
    margin-left: 0;
    margin-top: 0.4rem;
  }

  .m-tree-target-pill {
    max-width: 100%;
  }

  .m-tree-pill {
    flex-wrap: wrap;
  }
}

.site-sidebar-domain-branch {
  border-radius: 6px;
}

.site-sidebar-matrix-wrap {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(62, 53, 42, 0.13);
}

.site-sidebar-domain-branch.is-active {
  margin: 0.08rem 0 0.18rem;
  padding: 0.08rem 0 0.2rem;
  background: rgba(156, 37, 37, 0.035);
}

.site-sidebar-attached-l2 {
  margin: 0.08rem 0 0 0.52rem;
  padding: 0.12rem 0 0.06rem 0.28rem;
  border-left: 1px solid rgba(156, 37, 37, 0.18);
}

.site-sidebar-attached-l2 .site-sidebar-section-label {
  display: none;
}

.site-sidebar-attached-l2 .site-sidebar-groups {
  gap: 0;
}

.site-sidebar-attached-l2 .site-sidebar-group summary {
  min-height: 24px;
  padding-left: 0.36rem;
}

.site-sidebar-attached-l2 .site-sidebar-children {
  padding-left: 0.72rem;
}

.site-sidebar-groups {
  display: grid;
  gap: 0;
}

.site-sidebar-group {
  border-radius: 4px;
}

.site-sidebar-group summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26px;
  padding: 0.12rem 0.5rem;
  box-sizing: border-box;
  border-radius: 4px;
  color: #4a433a;
  cursor: pointer;
  list-style: none;
}

.site-sidebar-group summary::-webkit-details-marker {
  display: none;
}

.site-sidebar-group summary::after {
  content: "\25BE";
  margin-left: auto;
  flex: 0 0 0.8rem;
  color: #7c7266;
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.site-sidebar-group[open] > summary::after {
  transform: rotate(180deg);
}

.site-sidebar-group summary:hover,
.site-sidebar-group.site-sidebar-parent-active > summary {
  background: rgba(156, 37, 37, 0.06);
}

.site-sidebar-group.site-sidebar-parent-active > summary {
  color: #7e1e1e;
  font-weight: 700;
}

.site-sidebar-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.site-sidebar-children {
  display: grid;
  gap: 0;
  padding: 0 0 0.06rem 0.8rem;
}

.site-sidebar-child {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.28rem;
  min-height: 24px;
  padding: 0.1rem 0.35rem;
  box-sizing: border-box;
  border-radius: 4px;
  color: #5a5248;
  font-size: 0.8rem;
  line-height: 1.2;
  text-decoration: none;
}

.lang-en .site-sidebar-group summary {
  font-size: 0.78rem;
}

.lang-en .site-sidebar-l1 {
  font-size: 0.82rem;
}

.lang-en .site-sidebar-child {
  font-size: 0.72rem;
}

.lang-en .site-sidebar-l3 {
  font-size: 0.74rem;
}

.lang-zh .site-sidebar-l1,
.lang-tc .site-sidebar-l1 {
  font-size: 0.86rem;
}

.lang-en .site-sidebar-game-link {
  font-size: 0.82rem;
}

.lang-zh .site-sidebar-game-link,
.lang-tc .site-sidebar-game-link {
  font-size: 0.86rem;
}

.lang-zh .site-sidebar-group summary,
.lang-tc .site-sidebar-group summary {
  font-size: 0.82rem;
}

.lang-zh .site-sidebar-child,
.lang-tc .site-sidebar-child {
  font-size: 0.78rem;
}

.site-sidebar-child:hover,
.site-sidebar-child.active {
  background: rgba(156, 37, 37, 0.08);
}

.site-sidebar-child.active {
  color: #8b2020;
  font-weight: 700;
}

.site-sidebar-child-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-top: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.site-sidebar-child-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 0.02rem;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(62, 53, 42, 0.16);
}

.site-sidebar-child.active .site-sidebar-child-dot {
  opacity: 1;
}

.site-sidebar-l3-wrap {
  margin-top: 0;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(62, 53, 42, 0.13);
}

.site-sidebar-section-label {
  display: block;
  padding: 0 0.5rem 0.15rem;
  color: #8b8174;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-sidebar-l3 {
  min-height: 28px;
  color: #8a8176;
  font-size: 0.78rem;
}

.site-sidebar-link.is-future {
  cursor: default;
  opacity: 0.62;
}

.site-sidebar-backdrop {
  position: fixed;
  z-index: 1100;
  inset: var(--site-header-height) 0 0 0;
  display: block;
  border: 0;
  padding: 0;
  background: rgba(32, 29, 24, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms;
}

.site-sidebar-temporary-open .site-sidebar-backdrop {
  opacity: 1;
  visibility: visible;
}

.site-sidebar-docked .site-sidebar-backdrop {
  display: none;
}

.site-navigation-locked {
  overflow: hidden;
}

.muzi-nav-v21 .site-page-shell {
  min-height: calc(100vh - var(--site-header-height));
  transition: margin-left 180ms ease;
}

.muzi-nav-v21 .root-gateway {
  padding-top: 3rem !important;
}

.muzi-nav-v21 .domain-placeholder {
  padding-top: 3rem !important;
}

@media (min-width: 1024px) {
  .site-sidebar-docked .muzi-nav-v21 .site-page-shell,
  html.site-sidebar-docked .muzi-nav-v21 .site-page-shell {
    margin-left: var(--site-sidebar-width);
  }
}

@media (max-width: 1023px) {
  .site-sidebar-mode {
    display: none;
  }

  .muzi-nav-v21 .site-header {
    grid-template-columns: 34px minmax(140px, auto) auto minmax(220px, 1fr) auto;
    gap: 0.55rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (max-width: 700px) {
  .muzi-nav-v21 {
    --site-header-height: 112px;
  }

  .muzi-nav-v21 .site-header {
    height: var(--site-header-height);
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-rows: 48px 44px;
    gap: 0.35rem 0.6rem;
  }

  .site-menu-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header-brand {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .site-save-button,
  .site-vote-button {
    width: 34px;
    min-width: 34px;
    padding: 0;
    gap: 0;
  }

  .site-save-button [data-save-label],
  .site-vote-button [data-vote-label] {
    display: none;
  }

  .site-language {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .site-header-search {
    grid-column: 2 / -1;
    grid-row: 2;
    width: 100% !important;
  }

  .muzi-nav-v21 .gateway-slogan {
    width: auto;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .site-header-wordmark small {
    display: none;
  }

  .site-header-brand .nav-logo-img {
    width: 40px;
    height: 40px;
  }

  .site-header-wordmark strong {
    font-size: 1rem;
  }

  .muzi-nav-v21 .site-language .lang-switch {
    padding-left: 0.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-sidebar,
  .site-sidebar-backdrop,
  .muzi-nav-v21 .site-page-shell {
    transition: none !important;
  }
}

/* Section Specifics */
.section-header {
  padding: 2.25rem 0 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chapter-header {
  padding-top: calc(2.25rem - 15px);
}

.section-header h1 {
  font-size: 2.2rem !important;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-family: var(--font-classic);
}

.section-header .subtitle {
  font-family: var(--font-classic);
  font-size: 1.3rem;
  color: var(--secondary-color);
  max-width: 800px;
  margin: 0 auto;
}

.section-page-logo {
  width: 240px;
  height: 240px;
  object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
  mix-blend-mode: multiply;
  filter: contrast(1.1) brightness(1.05); /* Aggressively whiten the light-gray edges for better multiplication */
}

.book-page-logo {
  width: 120px;
  height: 120px;
}

/* Horizontal Element Navigation */
.element-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 auto 1rem;
  padding: 0.42rem 0.35rem;
  max-width: 100%;
  width: 100vw;
  position: fixed;
  top: 69px;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(255,255,255,0.94) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);
  align-items: center; /* Ensure vertical alignment for divider */
}

.lang-en .element-nav {
  flex-wrap: nowrap;
  gap: 0.45rem;
  max-width: 100%;
}

.nav-divider {
  width: 1px;
  height: 25px; /* Back to a subtle height */
  background: rgba(212, 175, 55, 0.3);
  margin: 0 0.75rem;
}

.element-nav-return {
  color: var(--secondary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.element-nav-return:hover {
  color: var(--primary-color);
  transform: translateX(-3px);
}

.section-home-icon {
  width: 40px !important;  /* Balanced size */
  height: 40px !important;
  border-radius: 6px;
  filter: grayscale(0%) !important;
  opacity: 0.95;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Lighter shadow */
}

.section-home-link:hover .section-home-icon {
  transform: scale(1.1);
  opacity: 1 !important;
}

.section-home-link {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Precise centering */
  min-width: 98px;
  text-decoration: none;
  margin-top: 2px; /* Slight nudge for balance */
}

.lang-en .section-home-link {
  min-width: 104px;
}

.element-nav-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  opacity: 0.7;
  padding: 0 0.5rem;
}

.lang-en .element-nav-item {
  padding: 0 0.22rem;
  min-width: 0;
}

.element-nav-item:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.element-nav-item .nav-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 0.25rem;
  filter: grayscale(100%);
  transition: all 0.4s ease;
}

.lang-en .element-nav-item .nav-icon {
  width: 28px;
  height: 28px;
}

.element-nav-item:hover .nav-icon {
  filter: grayscale(0%);
  transform: scale(1.1);
}

.element-nav-item span, .section-home-link span {
  font-family: var(--font-classic);
  font-size: 0.7rem;
  color: var(--secondary-color);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.lang-en .element-nav-item span,
.lang-en .section-home-link span {
  font-size: 0.58rem !important;
  line-height: 1.15;
  white-space: nowrap;
}

.element-nav-item .zh-char {
  font-size: 0.9rem;
  margin-top: 0.1rem;
}

/* Active State for Current Element Page */
.element-nav-item.active {
  opacity: 1;
  pointer-events: none;
}

.element-nav-item.active .nav-icon {
  filter: grayscale(0%);
  transform: scale(1.1);
}

.element-nav-item.active::after {
  width: 90%;
  background: var(--accent-color);
  box-shadow: 0 0 12px var(--accent-color);
}

.element-nav-item.active span {
  color: var(--primary-color);
  font-weight: bold;
}

/* Ink Brush Ripple Animation */
.element-nav-item::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transform: translateX(-50%);
  transition: width 0.4s ease;
  box-shadow: 0 0 10px var(--primary-color);
}

.element-nav-item:hover::after {
  width: 80%;
}

.section-header .desc {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.3rem;
  color: #666;
}

.p100-timebar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 1040px);
  margin: 1.45rem auto 1.25rem;
  padding: 0 0 0.15rem;
  font-family: var(--font-sans);
}

.p100-timebar-rail {
  position: relative;
  flex: 1;
  height: 24px;
  overflow: visible;
  background: #ede9e0;
  border: 1px solid #e0d9ce;
  border-radius: 4px;
}

.p100-timebar-boundary {
  color: #8c8577;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.p100-timebar-window.he-timebar-window {
  font-size: 0.68rem;
  font-weight: 600;
}

.p100-timebar-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(20% - 1px),
      #f8f5ef calc(20% - 1px),
      #f8f5ef calc(20% + 1px),
      transparent calc(20% + 1px),
      transparent calc(40% - 1px),
      #f8f5ef calc(40% - 1px),
      #f8f5ef calc(40% + 1px),
      transparent calc(40% + 1px),
      transparent calc(60% - 1px),
      #f8f5ef calc(60% - 1px),
      #f8f5ef calc(60% + 1px),
      transparent calc(60% + 1px),
      transparent calc(80% - 1px),
      #f8f5ef calc(80% - 1px),
      #f8f5ef calc(80% + 1px),
      transparent calc(80% + 1px));
}

.p100-timebar-window {
  position: absolute;
  top: -3px;
  height: 30px;
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: #efe4c8;
  border: 2px solid #b99a50;
  color: #7c642f;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.p100-timebar-window-label {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  color: #8c8577;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.p100-timebar-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  color: #8c8577;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.element-table {
  width: 100%;
  max-width: min(1280px, calc(100vw - 3rem));
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0.75rem auto 6rem;
  background: white;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  left: 0;
}

.element-table th, .element-table td {
  padding: 1.5rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.element-table td {
  font-family: var(--font-classic);
  font-size: 1.1rem;
  white-space: nowrap;
}

.chapter-main-cell {
  width: 200px; /* Ensure enough space for ID and Title */
}

.chapter-link-unified {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  display: inline-block;
}

.chapter-link-unified:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

.chapter-num-inline {
  margin-right: 12px;
  /* Font and style are inherited from parent td/link */
}

.element-table {
  width: 100%;
  max-width: min(1280px, calc(100vw - 3rem));
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 4rem;
  font-family: var(--font-sans);
}

.element-table th, .element-table td {
  padding: 1.15rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid #eee;
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: 0.82rem;
}

.desc-cell {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: 0.82rem;
  white-space: normal !important;
  line-height: 1.55;
}

.chapter-main-cell {
  width: 18%;
}

.element-table thead th {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.element-table th {
  background: var(--secondary-color);
  color: white;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.element-link, .chapter-link-unified {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 1rem;
}

.element-table tr:hover {
  background: #fff9f9;
}



.element-table .id-cell {
  color: #888;
  font-family: "JetBrains Mono", monospace, var(--font-sans);
  font-weight: 500;
  font-size: 0.85rem;
  width: 56px;
  text-align: center;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

.element-table th:nth-child(3),
.element-table td:nth-child(3) {
  width: auto;
}

.table-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: contrast(1.1) brightness(1.1);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--secondary-color);
  margin-bottom: 1.6rem;
  font-weight: 700;
  font-family: var(--font-classic);
  transition: var(--transition);
}

.lang-en .back-link {
  font-family: var(--font-sans);
}

.back-link:hover {
  color: var(--primary-color);
  transform: translateX(-5px);
}

/* Responsive */
@media (max-width: 1024px) {
  .sections-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .sections-grid {
    grid-template-columns: repeat(2, 1fr);
    width: min(100%, calc(100vw - 2rem)) !important;
    margin: 2rem auto 30px !important;
    padding: 1.5rem 2.2rem !important;
  }

  .hero h1 { font-size: 3rem; }
  .nav-links, .nav-tagline { display: none; }

  .sections-grid {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 2rem)) !important;
    margin: 1.5rem auto 20px !important;
    padding: 1rem 1.5rem !important;
  }

  .section-card {
    padding: 2rem;
  }

  .section-page-logo {
    width: 160px;
    height: 160px;
  }

  .element-nav {
    margin-top: 60px;
    gap: 0.5rem;
  }

  .element-nav-item .nav-icon {
    width: 28px;
    height: 28px;
  }

  .detail-card {
    padding: 1.5rem;
  }

  .element-table th, .element-table td {
    padding: 1rem;
  }

  .element-table .zh {
    font-size: 1.2rem;
    width: 100px;
  }
}

/* Element Detail Styles */
.element-link {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  display: inline-block;
  margin-left: 8px; /* space between ID and Title */
}

.element-link:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

.element-id-badge {
  display: inline-block;
  padding: 0.2rem 1rem;
  background: var(--primary-color);
  color: white;
  font-weight: 700;
  border-radius: 20px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.element-title {
  margin-bottom: 1.5rem !important;
}

.accent-desc {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--primary-color) !important;
  font-size: 1.25rem !important;
}

.element-details {
  display: grid;
  gap: 3rem;
  margin-bottom: 6rem;
}

.detail-card {
  background: white;
  padding: 3rem;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  border-left: 5px solid var(--primary-color);
  position: relative;
}
}

.detail-card h2 {
  font-size: 1.8rem;
  color: var(--secondary-color);
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.content-body {
  padding-top: 30px;
}

.content-body p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: #444;
}

.content-body strong {
  font-family: inherit;
  font-size: 1.05rem;
  color: inherit !important;
}

.inline-link {
  color: inherit !important;
  text-decoration: none;
}

.inline-link:hover {
  text-decoration: underline;
  color: var(--primary-color) !important;
}

.element-header-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.element-page-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.element-header-text {
  text-align: left;
}

.element-layout {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 2rem;
  margin-bottom: 6rem;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  left: 0;
}

.docx-section-group {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.docx-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4rem;
  align-items: start;
}

.docx-label {
  font-family: var(--font-classic);
  font-size: 1.25rem;
  color: var(--primary-color);
  text-align: right;
  line-height: 1.2;
  padding-right: 2rem;
  border-right: 1px solid rgba(156, 37, 37, 0.15);
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.docx-content {
  font-family: var(--font-classic);
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
  text-align: justify;
}

.muzi-comment-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2rem;
  padding: 3rem 0;
  border-top: 1px double rgba(0,0,0,0.1);
}

.muzi-comment-text {
  font-family: var(--font-artistic);
  font-size: 1.4rem;
  color: #555;
  background: rgba(156, 37, 37, 0.02);
  padding: 2rem;
  border-radius: 4px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .nav-content {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 2rem;
  }
  .domain-tabs {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-top: 0.5rem;
  }
  .nav-tagline {
    display: none;
  }
  .domain-grid {
    grid-template-columns: 1fr;
  }
  .docx-row, .muzi-comment-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .docx-label {
    text-align: left;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid rgba(156, 37, 37, 0.1);
    padding-right: 0;
    padding-bottom: 1rem;
    font-size: 1.15rem;
  }
}

/* v0.1.7 Book Pages */
.book-page main.container {
  max-width: 1440px;
  padding-top: 104px;
}

.book-page .section-header {
  padding: 3.5rem 0 1.7rem;
}

.book-subnav {
  position: fixed;
  top: 69px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 950;
  padding: 0.42rem 0;
  background: #eeeeeb;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.book-subnav-content {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.book-subnav-home {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--secondary-color);
  text-decoration: none;
  min-width: 0;
}

.book-subnav-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 6px;
  mix-blend-mode: multiply;
  filter: contrast(1.08) brightness(1.05);
  flex: 0 0 auto;
}

.book-subnav-home span {
  font-family: var(--font-classic);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-en .book-subnav-home span {
  font-family: var(--font-sans) !important;
  font-size: 0.82rem;
}

.book-subnav-dropdown {
  margin-left: auto;
}

.book-subnav .dropbtn {
  background: #ffffff;
  border-color: rgba(44,44,44,0.16);
  color: var(--secondary-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.book-subnav .dropbtn:hover {
  background: #f9f8f5;
  border-color: rgba(156,37,37,0.28);
}

.book-chapter-grid {
  width: min(1180px, calc(100vw - 4rem));
  margin: 0 auto 2.8rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  background: #f6f4ee;
  border: 1px solid rgba(178,151,86,0.24);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,0.045);
}

.book-chapter-card {
  min-height: 188px;
  padding: 1.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.24);
  border-right: 1px solid rgba(178,151,86,0.14);
  border-bottom: 1px solid rgba(178,151,86,0.14);
  transition: var(--transition);
}

.book-chapter-card:hover {
  background: rgba(212,175,55,0.09);
  transform: translateY(-4px);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.025);
}

.book-chapter-card h3 {
  margin: 0 0 0.65rem;
  color: var(--cb-theme-color, var(--primary-color));
  font-size: 1.05rem;
  line-height: 1.2;
}

.book-chapter-card p {
  margin: 0;
  color: #5c5a55;
  font-family: var(--font-classic);
  font-size: 0.94rem;
  line-height: 1.42;
}

.lang-en .book-chapter-card p {
  font-family: var(--font-sans) !important;
  font-size: 0.88rem;
  line-height: 1.36;
}

.book-chapter-card-empty {
  pointer-events: none;
  background: rgba(255,255,255,0.38);
}

.book-chapter-card-empty::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 auto;
  background: rgba(178,151,86,0.28);
}

.book-hero-mark {
  display: flex;
  justify-content: center;
  margin: 0 auto 4.2rem;
}

.book-hero-mark .book-page-logo {
  margin: 0;
}

@media (max-width: 900px) {
  .book-chapter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, calc(100vw - 2rem));
  }

  .book-subnav-home span {
    max-width: 48vw;
  }
}

@media (max-width: 560px) {
  .book-page main.container {
    padding-top: 118px;
  }

  .book-subnav-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .book-subnav-home span {
    display: none;
  }

  .book-chapter-grid {
    grid-template-columns: 1fr;
  }

  .book-chapter-card {
    min-height: 154px;
  }
}

/* v0.1.7 compact nav patch */
nav {
  padding: 0.42rem 0;
}

.logo {
  gap: 6px;
  font-size: 1.55rem;
  letter-spacing: 3px;
  line-height: 1;
  align-items: center;
}

.nav-logo-img {
  height: 27px;
}

.logo span {
  font-size: 1.1rem;
  margin-left: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.domain-tab {
  padding: 0.28rem 0.62rem;
  font-size: 0.78rem;
}

.lang-switch {
  background: #1a1a1a;
  color: #ccc;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.72rem;
  cursor: pointer;
  margin-left: 1rem;
  outline: none;
}

.lang-switch option {
  background: #1a1a1a;
  color: #ccc;
}

.lang-switch:focus {
  border-color: rgba(247,213,132,0.4);
}

.dropbtn {
  padding: 0.34rem 0.85rem;
  font-size: 0.78rem;
  min-height: 32px;
}

.dropdown-content a {
  padding: 10px 16px;
  font-size: 0.8rem;
}

.dropdown-content a:hover {
  padding-left: 20px;
}

.book-page main.container,
.chapter-page main.container {
  padding-top: 82px;
}

.book-page .section-header,
.chapter-page .section-header {
  padding: 2.45rem 0 1.2rem;
}

.book-subnav {
  top: 52px;
  padding: 0.22rem 0;
  background: #d8d8d2;
  border-bottom-color: rgba(0,0,0,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.book-subnav-content {
  min-height: 36px;
}

.book-subnav-logo {
  width: 30px;
  height: 30px;
}

.book-subnav-home span {
  font-size: 0.88rem;
}

.lang-en .book-subnav-home span {
  font-size: 0.82rem;
}

.book-subnav .dropbtn {
  background: #f5f5f2;
  border-color: rgba(44,44,44,0.24);
  color: #222;
}

.book-subnav .dropbtn:hover {
  background: #ffffff;
  border-color: rgba(156,37,37,0.36);
}

.chapter-subnav {
  background: #d8d8d2;
}

.chapter-tile-id {
  color: #80725b;
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 700;
  margin-right: 0.25rem;
}

.book-chapter-card h3 {
  line-height: 1.28;
}

@media (max-width: 560px) {
  .book-page main.container,
  .chapter-page main.container {
    padding-top: 98px;
  }
}

/* v0.1.7 emoji and title patch */
.book-subnav-label {
  cursor: default;
}

.book-subnav-book-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.book-subnav-book-link:hover span {
  color: var(--primary-color);
}

.chapter-subnav-title {
  flex-direction: row;
  gap: 0.6rem;
}

.chapter-subnav-title strong {
  color: var(--primary-color);
  font-family: var(--font-classic);
  font-size: 0.96rem;
  white-space: nowrap;
}

.lang-en .chapter-subnav-title strong {
  font-family: var(--font-sans) !important;
  font-size: 0.86rem;
}

.book-subnav-separator {
  color: #777;
  font-weight: 700;
}

.book-tagline {
  max-width: 760px;
  margin: 0.8rem auto 0;
  color: #666;
  font-size: 1.25rem;
  line-height: 1.55;
}

.lang-en .book-tagline {
  font-size: 1rem;
  line-height: 1.45;
}

.chapter-tile-emoji {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.75rem;
  filter: saturate(0.92);
}

.chapter-tile-emoji .ce-icon {
  width: 1.725em !important;
  height: 1.725em !important;
  object-fit: cover;
  background: rgba(60, 60, 60, 0.70);
  border: 3px solid rgba(60, 60, 60, 0.70);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(60, 60, 60, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}

.book-chapter-card h3 {
  font-family: var(--font-classic);
  font-weight: 700;
  color: var(--cb-theme-color, var(--primary-color));
}

.lang-en .book-chapter-card h3 {
  font-family: var(--font-sans) !important;
  font-size: 1rem;
}

.chapter-tile-id {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin-right: 0.18rem;
}

.chapter-hero-emoji {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  border-radius: 18px;
  background: #f7f3e8;
  border: 1px solid rgba(178,151,86,0.38);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  font-size: 3.1rem;
  line-height: 1;
}


/* v0.1.7 chapter emoji placement patch */
.chapter-hero-mark {
  display: flex;
  justify-content: center;
  margin: 0 auto 4.2rem;
}

.chapter-hero-mark .chapter-hero-emoji {
  margin: 0;
}


/* v0.1.7 standard emoji guide, rail nav, and header alignment patch */
.book-page main.container {
  padding-top: 88px;
}

.book-page .section-header {
  padding: 2.7rem 0 2rem;
}

.book-page .section-header h1,
.page-main .main-titles h1 {
  font-size: 2.2rem !important;
  line-height: 1.2;
  margin-bottom: 0 !important;
}

.book-title-icon {
  width: 65px;
  height: 65px;
  object-fit: contain;
  flex-shrink: 0;
  mix-blend-mode: multiply;
  filter: contrast(1.1) brightness(1.05);
}

.book-tagline,
.page-main .main-titles .subtitle {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--secondary-color);
  margin-top: 0;
}

.book-chapter-grid,
.sections-grid {
  margin-top: 0;
}

.dropdown-link-with-icon {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  position: relative;
}

.dropdown-link-with-icon span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-link-with-icon.is-active {
  background: rgba(212, 175, 55, 0.16);
  color: #ffffff;
  box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.92);
}

.dropdown-link-with-icon.is-active::after {
  content: "\203A";
  margin-left: auto;
  color: #d4af37;
  font-size: 1.15rem;
  line-height: 1;
}

.dropdown-link-with-icon.is-active:hover {
  background: rgba(212, 175, 55, 0.22);
  padding-left: 20px;
}

.dropdown-book-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 5px;
  flex: 0 0 auto;
}

.dropdown-chapter-emoji {
  width: 1.55rem;
  min-width: 1.55rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
}

.chapter-page main.container {
  padding-top: 122px;
}

.chapter-page .section-header {
  padding: 2.05rem 0 1.15rem;
}

.chapter-rail {
  top: 52px;
  min-height: 74px;
  padding: 0.34rem 1rem;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0.9rem;
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  backdrop-filter: blur(4px);
}

.chapter-rail-home {
  min-width: 120px;
  flex: 0 0 auto;
}

.chapter-rail-home .section-home-icon {
  width: 44px !important;
  height: 44px !important;
}

.chapter-rail-home span {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-rail .nav-divider {
  flex: 0 0 auto;
  height: 42px;
}

.chapter-rail-items {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
}

.chapter-rail-item {
  min-width: 54px;
  padding: 0 0.25rem;
}

.chapter-rail-emoji {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.22rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.46);
  filter: grayscale(100%);
  opacity: 0.52;
  font-size: 1.45rem;
  line-height: 1;
  transition: var(--transition);
}

.chapter-rail-item:hover .chapter-rail-emoji,
.chapter-rail-item.active .chapter-rail-emoji {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.chapter-rail-item.active span:last-child {
  color: var(--primary-color);
  font-weight: 700;
}

.chapter-rail-dropdown {
  flex: 0 0 auto;
  margin-left: 0.65rem;
}

.chapter-rail-dropdown .dropdown-content {
  min-width: 280px;
  max-height: min(72vh, 560px);
  overflow-y: auto;
}

.chapter-rail-dropdown .dropbtn {
  background: #fff;
  border-color: rgba(156,37,37,0.28);
  color: #222;
}

@media (max-width: 900px) {
  .chapter-rail {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .chapter-rail-items {
    flex: 0 0 auto;
  }

  .chapter-rail-dropdown {
    position: sticky;
    right: 0;
    background: rgba(255,255,255,0.94);
  }
}


/* v0.1.7 chapter rail full-title patch */
.chapter-rail {
  min-height: 86px;
  padding: 0.34rem 1.4rem;
}

.chapter-page main.container {
  padding-top: 134px;
}

.chapter-rail-items {
  justify-content: space-between;
  gap: 0.65rem;
}

.chapter-rail-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0.18rem;
}

.chapter-rail-emoji {
  width: auto;
  height: auto;
  min-width: 0;
  margin-bottom: 0.28rem;
  border-radius: 0;
  background: transparent;
  filter: none;
  opacity: 1;
  font-size: 2rem;
  line-height: 1;
}

.chapter-rail-item:hover .chapter-rail-emoji,
.chapter-rail-item.active .chapter-rail-emoji {
  filter: none;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.chapter-rail-item > span:last-child {
  width: 100%;
  color: var(--secondary-color);
  font-size: 0.68rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-en .chapter-rail-item > span:last-child {
  font-size: 0.58rem !important;
}

.chapter-page:not(.hd-page) .chapter-rail-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 22.6px !important;
}

.chapter-rail-dropdown {
  display: none !important;
}

@media (max-width: 900px) {
  .chapter-rail-item {
    flex: 0 0 86px;
  }
}


/* v0.1.7 compact centered chapter rail and content width patch */
.chapter-rail {
  min-height: 58px;
  padding: 0.18rem 1.15rem;
  gap: 0.65rem;
  align-items: center;
}

.chapter-rail-home,
.chapter-rail-item {
  justify-content: center;
  align-items: center;
}

.chapter-rail-home {
  min-width: 116px;
  margin-top: 0;
}

.chapter-rail-home .section-home-icon {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 0.12rem;
}

.chapter-rail-home span {
  line-height: 1.1;
}

.chapter-rail .nav-divider {
  height: 32px;
  margin: 0 0.45rem;
}

.chapter-rail-items {
  align-items: center;
  gap: 0.45rem;
}

.chapter-rail-item {
  min-height: 48px;
  padding: 0.08rem 0.18rem 0.2rem;
  border-radius: 6px;
  opacity: 0.72;
  position: relative;
}

.chapter-rail-emoji {
  font-size: 2rem;
  margin-bottom: 0.15rem;
}

.chapter-rail-item > span:last-child {
  line-height: 1.05;
}

.chapter-rail-item.active {
  opacity: 1;
  background: rgba(212,175,55,0.10);
  box-shadow: inset 0 -3px 0 var(--accent-color);
}

.chapter-rail-item.active::after {
  width: 70%;
  bottom: 0;
  height: 2px;
  background: var(--primary-color);
  box-shadow: none;
}

.chapter-page .p100-timebar {
  width: min(100%, 1040px);
  margin: 1.05rem auto 1.25rem;
}

.chapter-page .content-body {
  padding-top: 0.6rem;
}

.chapter-page .element-layout {
  max-width: min(1040px, calc(100vw - 3rem));
  width: min(1040px, calc(100vw - 3rem));
  margin-top: 0;
}

.chapter-page .docx-row,
.chapter-page .muzi-comment-row {
  grid-template-columns: 220px 1fr;
  gap: 3rem;
}


/* v0.1.7 rail title centering and timebar spacing patch */
.chapter-rail-item {
  text-align: center;
}

.chapter-rail-item > span:last-child {
  display: block;
  text-align: center;
  align-self: stretch;
  margin: 0 auto;
}

.chapter-rail-emoji {
  font-size: 4rem;
  margin-bottom: 0.08rem;
}

.chapter-rail {
  min-height: 78px;
}

.chapter-rail-item {
  min-height: 68px;
}

.chapter-page main.container {
  padding-top: 126px;
}

.chapter-page .p100-timebar {
  margin-top: 20px;
  margin-bottom: 20px;
}


/* v0.1.7 C-page rail logo sizing and timebar spacing patch */
.chapter-rail-home .section-home-icon {
  width: 50px !important;
  height: 50px !important;
}

.chapter-rail-emoji {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  line-height: 1;
}

.chapter-page .p100-timebar {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}


/* v0.1.7 C-page rail visual logo balance patch */
.chapter-rail-home .section-home-icon {
  width: 28px !important;
  height: 28px !important;
}

.chapter-rail-emoji {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 28px;
  transform: scale(1.18);
  transform-origin: center;
}

.chapter-rail-item:hover .chapter-rail-emoji,
.chapter-rail-item.active .chapter-rail-emoji {
  transform: scale(1.18);
}


/* v0.1.7 slim grey rail and white body patch */
body::before {
  display: none;
}

body,
.chapter-page {
  background: #fff !important;
}

.chapter-rail {
  min-height: 52px;
  padding: 0.08rem 1.15rem;
  background: #e2e2dc !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  backdrop-filter: none;
}

.chapter-page main.container {
  padding-top: 96px;
}



.chapter-rail-home,
.chapter-rail-item {
  min-height: 44px;
}

.chapter-rail-home .section-home-icon {
  margin-bottom: 0.02rem;
}

.chapter-rail-emoji {
  width: 24px;
  height: 24px;
  min-width: 24px;
  font-size: 24px;
  margin-bottom: 0.02rem;
  transform: scale(1.12);
}

.chapter-rail-item:hover .chapter-rail-emoji,
.chapter-rail-item.active .chapter-rail-emoji {
  transform: scale(1.12);
}

.chapter-rail-item > span:last-child,
.chapter-rail-home span {
  font-size: 0.62rem;
  line-height: 1.05;
}

.chapter-rail-item.active {
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 -2px 0 var(--accent-color);
}


/* v0.1.7 C-page active rail tab merge patch */
.chapter-rail {
  background: #d8d8d2 !important;
  border-bottom-color: rgba(0,0,0,0.12) !important;
}

.chapter-rail-item.active {
  background: #fff !important;
  box-shadow: none !important;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  padding-bottom: calc(0.2rem + 1px);
}

.chapter-rail-item.active::after {
  display: none !important;
  content: none !important;
}

.chapter-rail-item.active .chapter-rail-emoji {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 40px;
  transform: scale(1);
}

.chapter-rail-item.active:hover .chapter-rail-emoji {
  transform: scale(1);
}


/* v0.1.7 active rail seamless merge patch */
.chapter-rail {
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
}

.chapter-rail-items {
  overflow: visible !important;
}

.chapter-rail-item.active {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: -2px;
  padding-bottom: calc(0.2rem + 2px);
  position: relative;
}

.chapter-rail-item.active::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 6px !important;
  background: #fff !important;
  z-index: 10 !important;
}

.chapter-rail-item.active .chapter-rail-emoji {
  width: 35px;
  height: 35px;
  min-width: 35px;
  font-size: 35px;
}


/* v0.1.7 D1 mural asset refresh patch */
.sections-grid {
  background: url('i/mural/XM1005_C_v1.webp') no-repeat center 20%;
  background-size: cover;
}

.book-chapter-grid {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f6f4ee;
}

.book-chapter-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 240, 0.84);
  z-index: 0;
  pointer-events: none;
}

.book-chapter-card,
.book-chapter-card-empty {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.32);
}

.book-chapter-card:hover {
  background: rgba(255,255,255,0.56);
}

.book-chapter-card h3,
.book-chapter-card p,
.chapter-tile-emoji {
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}


/* v0.1.7 B-page body mural and red tile hover patch */
.book-page {
  background-image: var(--book-mural) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.book-page::before {
  display: none;
}

.book-page main.container {
  background: rgba(255,255,255,0.78);
}

.book-page .book-chapter-grid {
  background-image: none !important;
  background-color: rgba(246,244,238,0.18);
}

.book-page .book-chapter-grid::before {
  background: rgba(255,255,255,0.90);
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 152px !important;
}

.book-page .book-chapter-card:hover,
.book-page .book-chapter-card:focus-visible {
  background: rgba(156,37,37,0.14);
  box-shadow: inset 0 0 0 2px rgba(156,37,37,0.28), 0 10px 22px rgba(156,37,37,0.08);
}

.book-page .book-chapter-card:hover h3,
.book-page .book-chapter-card:focus-visible h3 {
  color: #9c2525 !important;
}

.book-page .book-chapter-card:hover p,
.book-page .book-chapter-card:focus-visible p {
  color: #4b3f3f !important;
}


/* v0.1.7 B-page mural visibility rebalance patch */
.book-page main.container {
  background: transparent !important;
}

.book-page {
  background-size: cover !important;
  background-position: center 52px !important;
}

.book-page .section-header {
  background: rgba(255,255,255,0.68);
  border-radius: 0;
}

.book-page .book-chapter-grid {
  background-color: rgba(246,244,238,0.08);
  box-shadow: 0 18px 42px rgba(0,0,0,0.05);
}

.book-page .book-chapter-grid::before {
  background: rgba(255,255,255,0.68);
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  background: rgba(255,255,255,0.18);
}

.book-page .book-chapter-card h3,
.book-page .book-chapter-card p,
.book-page .chapter-tile-emoji {
  text-shadow: 0 1px 2px rgba(255,255,255,0.88), 0 0 8px rgba(255,255,255,0.62);
}

/* v0.1.7 B-page mural visibility hardening patch */
.book-page {
  background-color: #fff !important;
  background-image: var(--book-mural) !important;
  background-repeat: no-repeat !important;
  background-position: center 52px !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.book-page .section-header {
  background: rgba(255,255,255,0.42) !important;
}

.book-page .book-chapter-grid {
  background-color: rgba(246,244,238,0.04) !important;
}

.book-page .book-chapter-grid::before {
  background: rgba(255,255,255,0.44) !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  background: rgba(255,255,255,0.08) !important;
}

/* v0.1.7 B-page grid mural/domain-grid alignment patch */
.book-page {
  background: #fff !important;
}

.book-page main.container {
  max-width: 100% !important;
  background: transparent !important;
}

.book-page .section-header {
  background: transparent !important;
}

.book-page .book-chapter-grid {
  width: min(1400px, calc(100vw - 2rem)) !important;
  min-height: 640px !important;
  margin: 0 auto 2.8rem !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  border: 1px solid rgba(197, 166, 82, 0.35) !important;
  background-image: var(--book-grid-mural) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 80% !important;
  background-color: #f6f4ee !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

.book-page .book-chapter-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(250,248,240,0.78) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 213px !important;
  padding: 1.25rem !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-right: 2px solid rgba(140,115,55,0.85) !important;
  border-bottom: 2px solid rgba(140,115,55,0.85) !important;
  box-shadow: none !important;
}

.book-page .book-chapter-card:hover,
.book-page .book-chapter-card:focus-visible {
  background: rgba(156,37,37,0.10) !important;
  box-shadow: inset 0 0 0 2px rgba(156,37,37,0.22) !important;
}



/* v0.1.7 B-page grid width/tile density/mural visibility patch */
.book-page .book-chapter-grid {
  width: 90vw !important;
  min-height: 640px !important;
}

.book-page .book-chapter-grid::before {
  background: rgba(250,248,240,0.58) !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 213px !important;
  padding: 5px 0 !important;
}

.book-page .book-chapter-card {
  justify-content: center !important;
  gap: 0.35rem !important;
}

.book-page .chapter-tile-emoji {
  margin-bottom: 0.15rem !important;
}

.book-page .book-chapter-card h3 {
  margin-bottom: 0.25rem !important;
}

.book-page .book-chapter-card p {
  margin: 0 auto !important;
  max-width: calc(100% - 16px) !important;
}

@media (max-width: 900px) {
  .book-page .book-chapter-grid {
    width: min(92vw, 100%) !important;
  }
}

/* v0.1.7 B-page mural visibility and tile vertical trim patch */
.book-page .book-chapter-grid {
  width: 90vw !important;
  min-height: 480px !important;
  background-image: var(--book-grid-mural) !important;
}

.book-page .book-chapter-grid::before {
  background: rgba(250,248,240,0.28) !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 250px !important;
  padding: 0.8rem 0.7rem !important;
}

.book-page .book-chapter-card {
  justify-content: center !important;
  gap: 0.2rem !important;
}

.book-page .chapter-tile-emoji {
  margin: 0 auto 0.15rem auto !important;
  line-height: 1 !important;
  font-size: 1.8rem !important;
}

.book-page .book-chapter-card h3 {
  font-size: 1.2rem !important;
  margin: 0 0 0.25rem 0 !important;
  text-align: center !important;
}

.book-page .book-chapter-card h3 {
  margin: 0.1rem 0 0.15rem !important;
}

.book-page .book-chapter-card .ce-index-pill {
  font-size: 0.7rem !important;
  color: rgba(120,120,120,0.85) !important;
  background: rgba(180,180,180,0.12) !important;
  border: 1px solid rgba(150,150,150,0.30) !important;
  padding: 1px 10px !important;
  border-radius: 12px !important;
  margin: 0.15rem auto 0.3rem auto !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

.book-page .book-chapter-card p {
  margin: 0 auto !important;
  line-height: 1.35 !important;
}


/* v0.1.7 B-page mural wash tuning patch */
.book-page .book-chapter-grid::before {
  background: rgba(250,248,240,0.94) !important;
}
/* v0.1.7 B-page grid line contrast tuning patch */
.book-page .book-chapter-grid {
  border-color: rgba(197,166,82,0.46) !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  border-right-color: rgba(197,166,82,0.28) !important;
  border-bottom-color: rgba(197,166,82,0.28) !important;
}
/* v0.1.7 B-page mural framing and tile top alignment patch */
.book-page .book-chapter-grid {
  background-position: left top !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  justify-content: flex-start !important;
  align-items: center !important;
}

.book-page .book-chapter-card {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/* v0.1.7 B-page tile center alignment restore patch */
.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  justify-content: center !important;
}
/* v0.1.7 B-page grid height and tagline scale patch */
.book-page .book-chapter-grid {
  min-height: 528px !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 250px !important;
}

.book-page .book-tagline {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin-top: 0.5rem !important;
}

/* v0.1.18 B-page 5x2 chapter grid patch */
.book-page .book-chapter-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  min-height: 300px !important;
}

.book-page .book-chapter-card,
.book-page .book-chapter-card-empty {
  min-height: 250px !important;
}

/* v0.1.7 compact two-column footer patch */
.site-footer-compact {
  background: #000;
  color: #fff;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.site-footer-compact-inner {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
}

.site-footer-logo img {
  width: 58px;
  height: 58px;
  display: block;
}

.site-footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
  text-align: right;
}

.site-footer-info p {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  line-height: 1.35;
  margin: 0;
}

.site-footer-info a {
  color: inherit;
  text-decoration: none;
}

.site-footer-copy {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.75rem !important;
}

@media (max-width: 560px) {
  .site-footer-compact-inner {
    grid-template-columns: 48px 1fr;
    gap: 0.75rem;
  }

  .site-footer-logo img {
    width: 44px;
    height: 44px;
  }
}

/* v0.1.7 footer logo aspect-ratio fix */
.site-footer-logo img {
  width: 48px !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

@media (max-width: 560px) {
  .site-footer-logo img {
    width: 38px !important;
  }
}

.domain-card-C > * {
  position: relative;
  z-index: 1;
}

.site-footer-compact-inner {
  grid-template-columns: 1fr 96px !important;
}

.site-footer-info {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.site-footer-logo {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

@media (max-width: 560px) {
  .site-footer-compact-inner {
    grid-template-columns: 1fr 48px !important;
  }
}

/* v0.1.7 sticky footer for site and placeholder landing pages */
html,
body {
  min-height: 100%;
}

body.lang-en {
  --font-classic: "Georgia", "Baskerville", "Garamond", "Times New Roman", serif;
  --font-artistic: "Playfair Display", "Georgia", serif;
  --font-serif: "Playfair Display", "Georgia", serif;
}

body.lang-en,
body.lang-zh {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.lang-en > main,
body.lang-zh > main {
  flex: 1 0 auto;
}

body.lang-en > .site-footer-compact,
body.lang-zh > .site-footer-compact,
body.lang-en > footer,
body.lang-zh > footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* v0.1.7 site landing domain tile vertical spacing patch */
.domain-gateway .domain-grid {
  margin-top: 3.25rem !important;
}

@media (max-width: 900px) {
  .domain-gateway .domain-grid {
    margin-top: 2rem !important;
  }
}

/* v0.1.7 chapter title/tagline scale alignment patch */
.chapter-page .section-header h1 {
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
  margin-bottom: 0 !important;
}

.chapter-page .chapter-title-with-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 21px;
}

.chapter-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  font-size: 65px;
  line-height: 1;
  flex-shrink: 0;
}

.chapter-page .section-header .subtitle,
.chapter-page .section-header .desc {
  color: var(--secondary-color) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 auto !important;
  max-width: 760px !important;
}

/* v0.1.8 chapter source content polish */
.source-content-body .docx-content p + p {
  margin-top: 0.9rem;
}

.source-content-body .docx-content .inline-link {
  color: inherit !important;
  text-decoration: none;
  font-weight: 700;
}

.source-content-body .docx-content .inline-link:hover {
  color: var(--primary-color) !important;
  text-decoration: underline;
}

.chapter-page .chapter-hero-mark {
  margin-top: 100px !important;
}

/* v0.1.8 section spacing patch */
.chapter-page .docx-section-group {
  gap: 2rem !important;
}

/* v0.1.8 title top spacing patch */
.chapter-page main.container {
  padding-top: 68px !important;
}

.chapter-page .section-header {
  padding: 0.85rem 0 1.15rem !important;
}

.book-page main.container {
  padding-top: 110px !important;
}

main.container.page-main {
  padding-top: 110px !important;
}





/* v0.1.10 D1/B shared spacing, landing dropdown, connection graph, and Muzi commentary mascot */
.d1-landing-page .section-header,
.book-page:not(.d1-landing-page) .section-header {
  padding-bottom: 1.55rem !important;
}

.d1-landing-page .sections-grid,
.book-page:not(.d1-landing-page) .book-chapter-grid {
  margin-top: 2.1rem !important;
}

.d1-book-rail .rail-book-dropdown {
  flex: 0 0 auto;
  margin-left: 0.75rem;
}

.d1-book-rail .rail-book-dropdown .dropdown-content {
  right: 0;
  left: auto;
  min-width: 250px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
}

.connection-graph {
  --graph-red: #9c2525;
  display: grid;
  grid-template-columns: minmax(145px, 0.72fr) minmax(260px, 1.5fr);
  gap: 1.25rem;
  align-items: center;
  width: min(100%, 960px);
  padding: 0.3rem 0;
}

.connection-core {
  position: relative;
  min-height: 132px;
  border: 1px solid rgba(156,37,37,0.28);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: var(--graph-red);
  background: radial-gradient(circle at 50% 30%, #fffdf8 0%, #f7efe1 64%, #ead8b0 100%);
  box-shadow: 0 12px 28px rgba(156,37,37,0.08);
}

.connection-core::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  top: 50%;
  width: 1.25rem;
  border-top: 1px solid rgba(156,37,37,0.28);
}

.connection-core-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(156,37,37,0.68);
  margin-bottom: 0.3rem;
  font-family: var(--font-sans);
}

.connection-core-title {
  font-family: var(--font-classic);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.connection-node-cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 0.9rem 1rem;
  position: relative;
}

.connection-node-cluster::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 10%;
  bottom: 10%;
  border-left: 1px solid rgba(156,37,37,0.22);
}

.connection-node {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 88px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(197,166,82,0.38);
  border-radius: 12px;
  background: rgba(255,255,255,0.72);
  color: #27211f;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.04);
  transition: var(--transition);
}

.connection-node::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 1rem;
  border-top: 1px solid rgba(156,37,37,0.22);
}

.connection-node:hover,
.connection-node:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(156,37,37,0.42);
  background: rgba(255,250,244,0.94);
  box-shadow: 0 14px 24px rgba(156,37,37,0.10);
}

.connection-edge-label {
  align-self: flex-start;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.25;
  color: var(--graph-red);
  background: rgba(156,37,37,0.08);
  font-family: var(--font-sans);
  font-weight: 700;
}

.connection-node-title {
  font-family: var(--font-classic);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.25;
}

.muzi-commentary-mascot {
  float: right;
  width: 170px;
  margin: -0.35rem 0 0.75rem 1.2rem;
  padding: 0.45rem;
  border-radius: 14px;
  border: 1px solid rgba(214,189,117,0.55);
  background: rgba(255,250,240,0.86);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  text-align: center;
}

.muzi-commentary-mascot svg {
  display: block;
  width: 100%;
  height: auto;
}

.muzi-commentary-mascot span {
  display: block;
  margin-top: 0.25rem;
  color: #9c2525;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.muzi-commentary-text ul {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .connection-graph {
    grid-template-columns: 1fr;
  }

  .connection-core::after,
  .connection-node-cluster::before,
  .connection-node::before {
    display: none;
  }

  .connection-node-cluster {
    grid-template-columns: 1fr;
  }

  .muzi-commentary-mascot {
    float: none;
    width: min(180px, 100%);
  margin: 0 auto;
  }
}

/* v0.1.10 in-version patch: site-nav dropdown, open commentary mascot, directed connection graph */
.d1-book-rail .rail-book-dropdown {
  display: none !important;
}

.connection-graph-directed {
  --graph-red: #9c2525;
  display: grid !important;
  grid-template-columns: minmax(190px, 1fr) minmax(210px, 1fr) minmax(190px, 1fr) !important;
  grid-template-areas:
    "incoming core outgoing"
    "parallel parallel parallel" !important;
  gap: 1.35rem 1.6rem !important;
  align-items: stretch !important;
  width: min(100%, 1040px) !important;
  padding: 0.35rem 0 !important;
}

.connection-column {
  display: grid;
  gap: 0.9rem;
  align-content: center;
}

.connection-column-incoming { grid-area: incoming; }
.connection-column-outgoing { grid-area: outgoing; }
.connection-parallel {
  grid-area: parallel;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 0.95rem 1.2rem;
  margin-top: 0.2rem;
}

.connection-branch {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: center;
}

.connection-branch .connection-node,
.connection-graph-directed .connection-core {
  width: 100%;
  min-height: 92px !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid rgba(197,166,82,0.42) !important;
  background: rgba(255,255,255,0.76) !important;
  color: #27211f !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.035) !important;
  text-align: center;
  justify-content: center;
}

.connection-graph-directed .connection-core {
  grid-area: core;
  align-self: center;
  background: linear-gradient(135deg, rgba(255,252,244,0.98), rgba(239,225,196,0.78)) !important;
  border-color: rgba(156,37,37,0.34) !important;
  box-shadow: 0 12px 28px rgba(156,37,37,0.08) !important;
}

.connection-core::after,
.connection-node-cluster::before,
.connection-node::before {
  display: none !important;
}

.connection-line {
  position: absolute;
  top: 50%;
  height: 1px;
  background: rgba(156,37,37,0.24);
  z-index: 0;
  pointer-events: none;
}

.connection-line span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.12rem 0.58rem;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--graph-red);
  background: rgba(252,248,240,0.96);
  border: 1px solid rgba(156,37,37,0.12);
  font-family: var(--font-sans);
  font-weight: 700;
}

.connection-incoming .connection-line {
  right: -1.6rem;
  width: 1.6rem;
}

.connection-outgoing .connection-line {
  left: -1.6rem;
  width: 1.6rem;
}

.connection-parallel-branch .connection-line {
  left: 50%;
  top: -0.95rem;
  width: 1px;
  height: 0.95rem;
}

.connection-parallel-branch .connection-line span {
  top: 0;
}

.connection-branch .connection-node {
  position: relative;
  z-index: 1;
}

.connection-node-title {
  font-family: var(--font-classic);
  font-weight: 700;
  font-size: clamp(1rem, 1.55vw, 1.3rem) !important;
  line-height: 1.25;
}

.connection-core-kicker {
  font-size: 0.75rem;
  color: rgba(156,37,37,0.66);
  margin-bottom: 0.28rem;
  font-family: var(--font-sans);
  font-weight: 700;
}

.muzi-commentary-row .docx-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.muzi-commentary-mascot {
  float: none !important;
  width: min(170px, 100%) !important;
  margin: 0.1rem auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

.muzi-commentary-mascot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.muzi-commentary-mascot span {
  display: block;
  margin-top: 0.18rem;
  color: #9c2525;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .connection-graph-directed {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "core"
      "incoming"
      "outgoing"
      "parallel" !important;
  }

  .connection-parallel {
    grid-template-columns: 1fr;
  }

  .connection-line {
    display: none;
  }
}

/* v0.1.10 in-version patch: quieter connection graph and commentary bubbles */
.connection-graph-directed {
  grid-template-columns: minmax(150px, 0.9fr) minmax(170px, 0.95fr) minmax(150px, 0.9fr) !important;
  gap: 0.9rem 1.15rem !important;
  width: min(100%, 920px) !important;
  padding: 0.15rem 0 !important;
}

.connection-column {
  gap: 0.55rem !important;
}

.connection-parallel {
  grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  gap: 0.6rem 0.85rem !important;
  margin-top: 0 !important;
}

.connection-branch {
  min-height: 66px !important;
}

.connection-branch .connection-node,
.connection-graph-directed .connection-core {
  min-height: 66px !important;
  border-radius: 9px !important;
  padding: 0.45rem 0.62rem !important;
  box-shadow: 0 5px 12px rgba(0,0,0,0.025) !important;
}

.connection-node-title {
  font-size: clamp(0.78rem, 1.05vw, 0.98rem) !important;
  line-height: 1.18 !important;
}

.connection-core-kicker {
  font-size: 0.58rem !important;
  margin-bottom: 0.12rem !important;
}

.connection-line span {
  padding: 0.08rem 0.42rem !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

.connection-incoming .connection-line {
  right: -1.15rem !important;
  width: 1.15rem !important;
}

.connection-outgoing .connection-line {
  left: -1.15rem !important;
  width: 1.15rem !important;
}

.connection-parallel-branch .connection-line {
  top: -0.6rem !important;
  height: 0.6rem !important;
}

.muzi-commentary-row .docx-label {
  align-items: flex-end !important;
  text-align: right !important;
  gap: 0.45rem !important;
}

.muzi-commentary-mascot {
  width: min(105px, 100%) !important;
  margin: 0.25rem 0 0 auto !important;
}

.muzi-commentary-mascot span {
  font-size: 0.6rem !important;
  line-height: 1.18 !important;
}

.muzi-commentary-row .docx-content ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 0.72rem !important;
}

.muzi-commentary-row .docx-content li {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0.58rem 0.82rem 0.58rem 2.05rem !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255,250,241,0.96), rgba(249,241,226,0.72)) !important;
  border: 1px solid rgba(197,166,82,0.28) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.035) !important;
  line-height: 1.55 !important;
}

.muzi-commentary-row .docx-content li::before {
  content: "" !important;
  position: absolute !important;
  left: 0.78rem !important;
  top: 0.96rem !important;
  width: 0.48rem !important;
  height: 0.48rem !important;
  border-radius: 999px !important;
  background: #9c2525 !important;
  box-shadow: 0 0 0 5px rgba(156,37,37,0.08) !important;
}

@media (max-width: 900px) {
  .connection-graph-directed {
    width: 100% !important;
  }

  .connection-parallel {
    grid-template-columns: 1fr !important;
  }

  .muzi-commentary-row .docx-label {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .muzi-commentary-mascot {
    margin-left: 0 !important;
  }
}

/* v0.1.10 in-version patch: bottom connection graph and unified header spacing */
.d1-landing-page .section-header,
.book-page:not(.d1-landing-page) .section-header,
.chapter-page .section-header {
  padding-bottom: 1.55rem !important;
}

.d1-landing-page .section-header h1,
.book-page:not(.d1-landing-page) .section-header h1,
.chapter-page .section-header h1,
.page-main .main-titles h1 {
  margin-bottom: 0.5rem !important;
}

.d1-landing-page .section-header .subtitle,
.d1-landing-page .section-header .desc,
.book-page:not(.d1-landing-page) .section-header .subtitle,
.book-page:not(.d1-landing-page) .section-header .desc,
.chapter-page .section-header .subtitle,
.chapter-page .section-header .desc,
.page-main .main-titles .subtitle {
  margin-top: 0.5rem !important;
}

/* v0.1.22 C-domain neutral background */
.d1-landing-page,
.book-page:not(.hd-landing-page),
.chapter-page:not(.hd-page) {
  background: #f4f3f0 !important;
}

.chapter-page .connection-graph-section {
  width: min(80%, 1040px) !important;
  margin: 3.25rem auto 0 !important;
}

.chapter-page .connection-graph-section .connection-graph-directed {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
}

.muzi-commentary-row .docx-label {
  justify-content: flex-start !important;
  align-items: flex-end !important;
  text-align: right !important;
  padding-top: 0 !important;
}

.muzi-commentary-row .docx-label:empty {
  min-height: 0 !important;
}

.muzi-commentary-row .muzi-commentary-mascot {
  margin: 0 0 0 auto !important;
  width: min(92px, 100%) !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section {
    width: min(92%, 760px) !important;
  }

  .muzi-commentary-row .docx-label {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* v0.1.10 in-release patch: connection divider and wider graph canvas */
.chapter-page .connection-graph-section {
  width: min(90%, 1200px) !important;
  margin: 25px auto 0 !important;
  padding-top: 25px !important;
  border-top: 1px solid rgba(197,166,82,0.24) !important;
}

.chapter-page .connection-graph-section .connection-graph-directed {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(145px, 220px) minmax(155px, 230px) minmax(145px, 220px) !important;
  justify-content: space-between !important;
  column-gap: 3.8rem !important;
  row-gap: 0.75rem !important;
}

.chapter-page .connection-graph-section .connection-parallel {
  grid-template-columns: repeat(2, minmax(180px, 260px)) !important;
  justify-content: center !important;
  column-gap: 2rem !important;
}

.chapter-page .connection-graph-section .connection-branch .connection-node,
.chapter-page .connection-graph-section .connection-core {
  min-height: 66px !important;
  padding: 0.58rem 0.8rem !important;
}

.chapter-page .connection-graph-section .connection-node-title {
  font-size: clamp(1.05rem, 1.25vw, 1.22rem) !important;
}

.chapter-page .connection-graph-section .connection-incoming .connection-line {
  right: -3.8rem !important;
  width: 3.8rem !important;
}

.chapter-page .connection-graph-section .connection-outgoing .connection-line {
  left: -3.8rem !important;
  width: 3.8rem !important;
}

.chapter-page .connection-graph-section .connection-line span {
  padding: 0.08rem 0.5rem !important;
  font-size: 0.62rem !important;
  background: rgba(255,252,247,0.98) !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section {
    width: min(92%, 760px) !important;
  }

  .chapter-page .connection-graph-section .connection-graph-directed {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* v0.1.10 in-version patch: 80px graph separation and connected edge bus */
.chapter-page .connection-graph-section {
  position: relative !important;
  margin-top: 100px !important;
  padding-top: 100px !important;
  border-top: none !important;
}

.chapter-page .connection-graph-section::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  top: 0 !important;
  height: 1px !important;
  background: rgba(197,166,82,0.24) !important;
  border: none !important;
  pointer-events: none !important;
}

.chapter-page .connection-graph-section .connection-graph-directed {
  position: relative !important;
  overflow: visible !important;
}

.chapter-page .connection-graph-section .connection-line {
  display: block !important;
  background: rgba(156,37,37,0.30) !important;
}

.chapter-page .connection-graph-section .connection-parallel {
  position: relative !important;
  padding-top: 1.4rem !important;
  overflow: visible !important;
}

.chapter-page .connection-graph-section .connection-parallel::before {
  content: "" !important;
  position: absolute !important;
  left: calc(50% - 1rem - 130px) !important;
  right: calc(50% - 1rem - 130px) !important;
  top: 0.68rem !important;
  height: 1px !important;
  background: rgba(156,37,37,0.24) !important;
  pointer-events: none !important;
}

.chapter-page .connection-graph-section .connection-parallel::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -0.75rem !important;
  width: 1px !important;
  height: 1.43rem !important;
  background: rgba(156,37,37,0.24) !important;
  pointer-events: none !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line {
  top: 0.68rem !important;
  height: 1.4rem !important;
  background: rgba(156,37,37,0.30) !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line span {
  top: 0.5rem !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section {
    margin-top: 32px !important;
    padding-top: 32px !important;
  }

  .chapter-page .connection-graph-section .connection-parallel {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .chapter-page .connection-graph-section .connection-parallel::before,
  .chapter-page .connection-graph-section .connection-parallel::after,
  .chapter-page .connection-graph-section .connection-line {
    display: none !important;
  }
}

/* v0.1.10 in-version patch: visible home-node edges and reddish core */
.chapter-page .connection-graph-section .connection-core {
  background: linear-gradient(135deg, rgba(255,242,240,0.98), rgba(234,196,190,0.84)) !important;
  border-color: rgba(156,37,37,0.50) !important;
  box-shadow: 0 12px 30px rgba(156,37,37,0.12) !important;
}

.chapter-page .connection-graph-section .connection-line {
  height: 2px !important;
  background: rgba(156,37,37,0.42) !important;
  z-index: 2 !important;
}

.chapter-page .connection-graph-section .connection-incoming .connection-line {
  right: -3.9rem !important;
  width: 3.95rem !important;
}

.chapter-page .connection-graph-section .connection-outgoing .connection-line {
  left: -3.9rem !important;
  width: 3.95rem !important;
}

.chapter-page .connection-graph-section .connection-line span {
  z-index: 3 !important;
  border-color: rgba(156,37,37,0.22) !important;
}

.chapter-page .connection-graph-section .connection-parallel::before,
.chapter-page .connection-graph-section .connection-parallel::after,
.chapter-page .connection-graph-section .connection-parallel-branch .connection-line {
  background: rgba(156,37,37,0.34) !important;
}

/* v0.1.10 in-version patch: full-width top-row connection edge */
.chapter-page .connection-graph-section .connection-graph-directed::before {
  content: "" !important;
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: 29px !important;
  height: 2px !important;
  background: rgba(156,37,37,0.38) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.chapter-page .connection-graph-section .connection-column,
.chapter-page .connection-graph-section .connection-parallel {
  position: relative !important;
  z-index: 1 !important;
}

.chapter-page .connection-graph-section .connection-core {
  position: relative !important;
  z-index: 3 !important;
}

.chapter-page .connection-graph-section .connection-line {
  z-index: 2 !important;
}

.chapter-page .connection-graph-section .connection-line span {
  z-index: 3 !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section .connection-graph-directed::before {
    display: none !important;
  }
}

/* v0.1.10 in-version patch: segmented edges with labels outside nodes */
.chapter-page .connection-graph-section .connection-graph-directed {
  grid-template-columns: minmax(145px, 220px) minmax(155px, 230px) minmax(145px, 220px) !important;
  justify-content: center !important;
  column-gap: 7rem !important;
}

.chapter-page .connection-graph-section .connection-graph-directed::before {
  display: none !important;
}

.chapter-page .connection-graph-section .connection-incoming .connection-line {
  right: -7rem !important;
  width: 7rem !important;
}

.chapter-page .connection-graph-section .connection-outgoing .connection-line {
  left: -7rem !important;
  width: 7rem !important;
}

.chapter-page .connection-graph-section .connection-line {
  height: 2px !important;
  background: rgba(156,37,37,0.36) !important;
}

.chapter-page .connection-graph-section .connection-line span {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(255,252,247,0.98) !important;
}

.chapter-page .connection-graph-section .connection-parallel {
  padding-top: 2rem !important;
}

.chapter-page .connection-graph-section .connection-parallel::before {
  top: 0.85rem !important;
}

.chapter-page .connection-graph-section .connection-parallel::after {
  top: -0.9rem !important;
  height: 1.75rem !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line {
  top: 0.85rem !important;
  height: 1.15rem !important;
  width: 2px !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line span {
  top: 0 !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section .connection-graph-directed {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
}

/* v0.1.10 in-version patch: keep parallel edge labels outside node cards */
.chapter-page .connection-graph-section .connection-parallel {
  padding-top: 4.09rem !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch {
  align-items: flex-start !important;
  min-height: 58px !important;
  padding-top: 1.45rem !important;
  box-sizing: content-box !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-node {
  min-height: 66px !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line {
  top: -3.37rem !important;
  height: 4.82rem !important;
  width: 2px !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line .connection-line-labels {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line .connection-line-label {
  left: auto !important;
  transform: none !important;
  top: auto !important;
}

.chapter-page .connection-graph-section .connection-parallel::before {
  top: 0.72rem !important;
}

.chapter-page .connection-graph-section .connection-parallel {
  margin-top: 3.33rem !important;
}

.chapter-page .connection-graph-section .connection-parallel::after {
  top: -4.68rem !important;
  height: 5.4rem !important;
}

.connection-node-title,
.connection-core-title-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.38rem !important;
  width: auto !important;
}

.connection-node-title .node-emoji,
.connection-core-title-container .node-emoji {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.lang-en.chapter-page .connection-graph-section .connection-node-title {
  font-size: clamp(0.88rem, 1.02vw, 1rem) !important;
  line-height: 1.14 !important;
}

.lang-en.chapter-page .connection-graph-section .connection-core-title {
  font-size: clamp(0.94rem, 1.08vw, 1.06rem) !important;
}

.lang-en.chapter-page .connection-graph-section .connection-node-title .node-emoji,
.lang-en.chapter-page .connection-graph-section .connection-core-title-container .node-emoji {
  font-size: 1.28rem !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line {
  z-index: 1 !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-node {
  position: relative !important;
  z-index: 4 !important;
}

.chapter-page .connection-graph-section .connection-parallel-branch .connection-line .connection-line-labels {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
}

.chapter-page .connection-graph-section .connection-parallel.has-parallel.parallel-count-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 1.15rem !important;
  row-gap: 0 !important;
}

.chapter-page .connection-graph-section .connection-parallel.has-parallel.parallel-count-4::before {
  left: calc(12.5% - 0.43rem) !important;
  right: calc(12.5% - 0.43rem) !important;
}

.chapter-page .connection-graph-section .connection-parallel.has-parallel.parallel-count-4 .connection-parallel-branch {
  min-width: 0 !important;
}

.chapter-page .connection-graph-section .connection-parallel.has-parallel.parallel-count-4 .connection-node {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.chapter-page .connection-graph-section .connection-parallel-shared-label {
  position: absolute !important;
  left: 50% !important;
  top: -1.7rem !important;
  z-index: 5 !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.08rem 0.5rem !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  color: var(--graph-red) !important;
  background: rgba(255,252,247,0.98) !important;
  border: 1px solid rgba(156,37,37,0.22) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.chapter-page .connection-graph-section .connection-parallel-shared-label[data-reasoning] {
  cursor: help !important;
  pointer-events: auto !important;
}

.chapter-page .connection-graph-section .connection-parallel-shared-label[data-reasoning]::after {
  content: attr(data-reasoning);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  width: max-content;
  max-width: min(28rem, 78vw);
  transform: translateX(-50%);
  z-index: 12;
  display: none;
  white-space: normal;
  padding: 0.48rem 0.68rem;
  border-radius: 6px;
  border: 1px solid rgba(156,37,37,0.22);
  background: rgba(255,252,247,0.98);
  box-shadow: 0 10px 24px rgba(45,38,31,0.16);
  color: #382b25;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.chapter-page .connection-graph-section .connection-parallel-shared-label[data-reasoning]:hover::after,
.chapter-page .connection-graph-section .connection-parallel-shared-label[data-reasoning]:focus-visible::after {
  display: block;
}

/* v0.1.10 C-page grey edge nodes styling */
.chapter-page .connection-graph-section .connection-branch .connection-node {
  background: linear-gradient(135deg, #f5efe0, #eae1cd) !important;
  border: 1px solid rgba(188, 160, 110, 0.5) !important;
  color: #27211f !important;
  box-shadow: 0 12px 28px rgba(156, 37, 37, 0.08) !important;
}

.chapter-page .connection-graph-section .connection-branch .connection-node:hover,
.chapter-page .connection-graph-section .connection-branch .connection-node:focus-visible {
  border-color: rgba(156, 37, 37, 0.5) !important;
  background: linear-gradient(135deg, #fbf7ed, #efe7d3) !important;
  color: #27211f !important;
  box-shadow: 0 18px 36px rgba(156, 37, 37, 0.15) !important;
}

/* v0.1.10 in-release patch: C-title icon sizing and graph divider spacing */
.chapter-title-icon {
  width: 65px !important;
  height: 65px !important;
  line-height: 1 !important;
  object-fit: cover;
  background: rgba(60, 60, 60, 0.70);
  border: 3px solid rgba(60, 60, 60, 0.70);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(60, 60, 60, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.chapter-page .chapter-title-with-icon {
  align-items: center !important;
}

.chapter-page.hd-page .chapter-title-with-icon.he-title-with-code {
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem !important;
}

.chapter-page.hd-page .he-id-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  background: #efe4c8 !important;
  border: 2px solid #b99a50 !important;
  border-radius: 4px !important;
  color: #7c642f !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  margin: 0.3rem 0 0.15rem !important;
}

@media (max-width: 900px) {
  .chapter-page.hd-page main.container {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-x: hidden;
  }

  .chapter-page.hd-page .chapter-title-with-icon.he-title-with-code {
    width: min(100%, calc(100vw - 2rem));
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.75rem, 4vw, 2rem) !important;
    line-height: 1.14 !important;
    gap: 0.42rem 0.55rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .chapter-page.hd-page .chapter-title-with-icon.he-title-with-code > span:first-child {
    display: block;
    flex-basis: 100%;
    max-width: calc(100vw - 2.25rem);
    min-width: 0;
    text-align: center;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .chapter-page.hd-page .chapter-title-with-icon.he-title-with-code .chapter-title-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 42px !important;
    transform: none !important;
  }

  .chapter-page.hd-page .element-layout {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
  }

  .chapter-page.hd-page .section-header .desc {
    max-width: calc(100vw - 3rem) !important;
    overflow-wrap: anywhere !important;
  }

  .chapter-page.hd-page .docx-row,
  .chapter-page.hd-page .muzi-commentary-row,
  .chapter-page.hd-page .muzi-comment-row {
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
  }

  .chapter-page.hd-page .docx-label,
  .chapter-page.hd-page .muzi-commentary-row .docx-label {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(156, 37, 37, 0.12) !important;
    padding: 0 0 0.72rem !important;
    font-size: clamp(1.1rem, 5vw, 1.25rem) !important;
  }

  .chapter-page.hd-page .docx-content {
    min-width: 0 !important;
    font-size: 1rem !important;
    line-height: 1.68 !important;
    text-align: left !important;
  }
}

.chapter-page .connection-graph-section {
  margin-top: 36px !important;
  padding-top: 72px !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section {
    margin-top: 24px !important;
    padding-top: 44px !important;
  }
}

/* v0.1.10 in-release patch: P103 relationship reasoning hover labels */
.chapter-page .connection-graph-section .connection-line span[data-reasoning] {
  cursor: help !important;
  pointer-events: auto !important;
}

.chapter-page .connection-graph-section .connection-line span[data-reasoning]::after {
  content: attr(data-reasoning);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.3rem);
  top: auto !important;
  width: max-content;
  max-width: min(28rem, 78vw);
  transform: translateX(-50%);
  z-index: 99999 !important;
  display: none;
  white-space: normal;
  padding: 0.48rem 0.68rem;
  border-radius: 6px;
  border: 1px solid rgba(156,37,37,0.22);
  background: rgba(255,252,247,0.98);
  box-shadow: 0 10px 24px rgba(45,38,31,0.16);
  color: #382b25;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.chapter-page .connection-graph-section .connection-line span[data-reasoning]:hover::after,
.chapter-page .connection-graph-section .connection-line span[data-reasoning]:focus-visible::after {
  display: block;
}

.chapter-page .connection-graph-section .connection-line .connection-line-labels {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.08rem !important;
  width: max-content !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-page .connection-graph-section .connection-line .connection-line-label {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.08rem 0.5rem !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  color: var(--graph-red) !important;
  background: rgba(255,252,247,0.98) !important;
  border: 1px solid rgba(156,37,37,0.22) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.chapter-page .connection-graph-section .connection-line:has(.connection-line-label + .connection-line-label) {
  left: -5rem !important;
  width: 5rem !important;
}

.chapter-page .connection-graph-section .connection-column-incoming.has-multiple .connection-line:has(.connection-line-label + .connection-line-label) {
  right: -5rem !important;
  left: auto !important;
  width: 5rem !important;
}

/* v0.1.10 in-release patch: cleaner graph bus lines and no empty parallel rails */
.chapter-page .connection-graph-section .connection-parallel.no-parallel {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chapter-page .connection-graph-section .connection-parallel.no-parallel::before,
.chapter-page .connection-graph-section .connection-parallel.no-parallel::after {
  display: none !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple {
  position: relative !important;
}

.chapter-page .connection-graph-section:has(.connection-column.has-multiple) {
  width: min(98vw, 1280px) !important;
}

.chapter-page .connection-graph-section .connection-graph-directed:has(.connection-column.has-multiple) {
  grid-template-columns: minmax(128px, 184px) minmax(150px, 204px) minmax(128px, 184px) !important;
  justify-content: center !important;
  column-gap: 10rem !important;
  width: min(100%, calc(100vw - 2rem)) !important;
}

.chapter-page .connection-graph-section .connection-graph-directed:has(.connection-column.has-multiple) .connection-branch .connection-node,
.chapter-page .connection-graph-section .connection-graph-directed:has(.connection-column.has-multiple) .connection-core {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple::before,
.chapter-page .connection-graph-section .connection-column.has-multiple::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  background: rgba(156,37,37,0.34) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple::before {
  top: 33px !important;
  bottom: 33px !important;
  width: 2px !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple::after {
  top: 50% !important;
  width: 6.1rem !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
}

.chapter-page .connection-graph-section .connection-column-outgoing.has-multiple::before {
  left: -5rem !important;
}

.chapter-page .connection-graph-section .connection-column-outgoing.has-multiple::after {
  left: -10rem !important;
  width: calc(5rem + 1px) !important;
}

.chapter-page .connection-graph-section .connection-column-incoming.has-multiple::before {
  right: -5rem !important;
}

.chapter-page .connection-graph-section .connection-column-incoming.has-multiple::after {
  right: -10rem !important;
  width: calc(5rem + 1px) !important;
}

.chapter-page .connection-graph-section .connection-column-outgoing.has-multiple .connection-line {
  left: -5rem !important;
  width: 5rem !important;
  transform: translateY(-50%) !important;
}

.chapter-page .connection-graph-section .connection-column-incoming.has-multiple .connection-line {
  right: -5rem !important;
  width: 5rem !important;
  transform: translateY(-50%) !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple .connection-line > span {
  transform: translate(-50%, -50%) !important;
}

.chapter-page .connection-graph-section .connection-column.has-multiple .connection-node::after {
  display: none !important;
}

.chapter-page .connection-graph-section .connection-graph-directed:has(.connection-column.has-multiple) .connection-column-incoming:not(.has-multiple) .connection-line {
  right: -10rem !important;
  width: 10rem !important;
}

.chapter-page .connection-graph-section .connection-graph-directed:has(.connection-column.has-multiple) .connection-column-outgoing:not(.has-multiple) .connection-line {
  left: -10rem !important;
  width: 10rem !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section .connection-column.has-multiple::before,
  .chapter-page .connection-graph-section .connection-column.has-multiple::after,
  .chapter-page .connection-graph-section .connection-column.has-multiple .connection-node::after {
    display: none !important;
  }
}

/* v0.1.10 C-page active and inactive rail logo sizing adjustments */
.chapter-rail-item .chapter-rail-emoji,
.chapter-rail-item.active .chapter-rail-emoji {
  width: 22.6px !important;
  height: 22.6px !important;
  min-width: 22.6px !important;
  font-size: 22.6px !important;
  transform: scale(1) !important;
  margin-bottom: 2px !important;
}

.chapter-rail-item:hover .chapter-rail-emoji {
  transform: scale(1.08) !important;
  transition: transform 0.2s ease !important;
}

/* v0.1.10 C-page active rail tab seamless merge line fix */
.chapter-rail-item.active {
  z-index: 100 !important;
  background: #fff !important;
  position: relative !important;
  margin-bottom: -15px !important;
  padding-bottom: 15px !important;
}

.chapter-rail-item.active::after {
  display: none !important;
}

/* v0.1.11.3 custom styled mouse-over tooltips for connection node taglines matching edge labels style */
.chapter-page .connection-graph-section .connection-node[data-tagline],
.chapter-page .connection-graph-section .connection-core[data-tagline] {
  position: relative !important;
  cursor: help !important;
}

.chapter-page .connection-graph-section .connection-node[data-tagline]::after,
.chapter-page .connection-graph-section .connection-core[data-tagline]::after {
  content: attr(data-tagline);
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1.25rem);
  top: auto !important;
  width: max-content;
  max-width: min(28rem, 78vw);
  transform: translateX(-50%);
  z-index: 99999 !important;
  display: none;
  white-space: normal;
  padding: 0.48rem 0.68rem;
  border-radius: 6px;
  border: 1px solid rgba(156,37,37,0.22) !important;
  background: rgba(255,252,247,0.98) !important;
  box-shadow: 0 10px 24px rgba(45,38,31,0.16) !important;
  color: #382b25 !important;
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  pointer-events: none !important;
}

.chapter-page .connection-graph-section .connection-node[data-tagline]:hover::after,
.chapter-page .connection-graph-section .connection-node[data-tagline]:focus-visible::after,
.chapter-page .connection-graph-section .connection-core[data-tagline]:hover::after,
.chapter-page .connection-graph-section .connection-core[data-tagline]:focus-visible::after {
  display: block !important;
}

/* v0.1.11.4 custom footer alignment & dark mascot patch */
.site-footer-compact-inner {
  max-width: none !important;
  width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (max-width: 900px) {
  .site-footer-compact-inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ==========================================================================
   Chinese Parchment Scroll System - History (H) Domain Integration
   ========================================================================== */

:root {
  --color-patina: #4A5D54;
  --color-patina-glow: rgba(74, 93, 84, 0.35);
  --color-bronze: #8D7B68;
  --color-bronze-dark: #4A3E3D;
  --color-parchment: #F4F0E6;
  --color-scroll-border: #C8BFAB;
  --color-seal-red: #A83232;
  --color-seal-glow: rgba(168, 50, 50, 0.25);
}

/* Scroll Container Setup */
.muzi-scroll-container {
  position: relative;
  width: 100%;
  margin: 2rem 0 3.5rem;
  background: #E8E2D5;
  border: 1px solid var(--color-scroll-border);
  border-radius: 12px;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.12), 0 12px 35px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  user-select: none;
}

/* Viewport & Roller Alignments */
.scroll-viewport-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  background: #E8E2D5;
}

.scroll-viewport {
  flex-grow: 1;
  overflow: auto;
  cursor: grab;
  background: var(--color-parchment);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--color-bronze) var(--color-parchment);
}

.scroll-viewport.grabbing {
  cursor: grabbing !important;
}

.scroll-viewport::-webkit-scrollbar {
  height: 8px;
}
.scroll-viewport::-webkit-scrollbar-track {
  background: var(--color-parchment);
}
.scroll-viewport::-webkit-scrollbar-thumb {
  background-color: var(--color-bronze);
  border-radius: 4px;
}

/* 3D Scroll Rollers */
.scroll-roller {
  width: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease-out;
}

.scroll-roller-left {
  background: linear-gradient(to right, #22140E 0%, #5D4D44 35%, #8D7B68 70%, #22140E 100%);
  border-right: 2px solid #1c100b;
}

.scroll-roller-right {
  background: linear-gradient(to right, #22140E 0%, #8D7B68 30%, #5D4D44 65%, #22140E 100%);
  border-left: 2px solid #1c100b;
}

.scroll-roller::before, .scroll-roller::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 32px;
  height: 12px;
  background: radial-gradient(circle, #8D7B68 20%, #4A3E3D 60%, #1c100b 100%);
  border-radius: 4px;
  transform: translateX(-50%);
}
.scroll-roller::before {
  top: -6px;
}
.scroll-roller::after {
  bottom: -6px;
}

/* Parchment Canvas */
.scroll-canvas {
  position: relative;
  transform-origin: left top;
  transition: transform 0.1s ease-out;
  background-color: #e8dbbe !important;
}

.scroll-mural-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
  z-index: 0;
}

.scroll-mural-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 380px;
  background: linear-gradient(
    to right,
    rgba(232, 219, 190, 0) 0%,
    rgba(232, 219, 190, 0.15) 30%,
    rgba(232, 219, 190, 0.45) 60%,
    rgba(232, 219, 190, 0.8) 85%,
    #e8dbbe 100%
  ) !important;
  pointer-events: none;
  z-index: 1;
}

/* Floating Controls */
.scroll-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-scroll-border);
  border-radius: 8px;
  padding: 4px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.scroll-controls-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 2px;
}

.scroll-controls.static-controls {
  position: static;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.scroll-controls-wrapper + .muzi-scroll-container {
  margin-top: 0.8rem !important;
}

.scroll-ctrl-btn {
  background: none;
  border: none;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--color-bronze-dark);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
}

.scroll-ctrl-btn:hover {
  background: rgba(74, 93, 84, 0.12);
  color: var(--color-patina);
}
.scroll-ctrl-btn:active {
  transform: scale(0.9);
}

.scroll-zoom-label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-bronze-dark);
  min-width: 45px;
  text-align: center;
}

/* Premium Ruyi Sceptre Scroll Controls */
.premium-ruyi-bar {
  position: relative;
  width: 460px;
  height: 58px;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.ruyi-sceptre-wood-bar {
  position: absolute;
  top: 5px;
  left: 0;
  width: 460px;
  height: 48px;
  background: linear-gradient(to bottom, #2b2c28, #181916);
  border: 2px solid #bda871;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 2px 4px rgba(255,255,255,0.1);
  z-index: 0;
}

.ruyi-bronze-capsule-bg {
  position: absolute;
  top: 0;
  left: 50px;
  width: 340px;
  height: 58px;
  z-index: 1;
  pointer-events: none;
}

.ruyi-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 52px;
  z-index: 1;
  pointer-events: none;
}

.ruyi-end-left {
  left: -22px;
}

.ruyi-end-right {
  right: -22px;
}

.ruyi-arrow-flat {
  position: absolute;
  z-index: 2;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ruyi-arrow-flat:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 5px rgba(155, 212, 179, 0.75));
}

.ruyi-arrow-flat:active {
  transform: scale(0.9) !important;
}

.ruyi-zoom-flat {
  position: absolute;
  z-index: 2;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1.8rem !important;
  font-family: 'Georgia', 'Times New Roman', Times, serif !important;
  font-weight: bold !important;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-shadow: 0px 1px 1px rgba(255,255,255,0.3), 0px -1px 1.5px rgba(0,0,0,0.6);
}

.ruyi-scroll-left {
  left: 66px;
  top: 14px;
}

.ruyi-scroll-right {
  left: 330px;
  top: 14px;
}

.ruyi-zoom-out {
  left: 138px;
  top: 13px;
  color: #5c4a24 !important;
}

.ruyi-zoom-in {
  left: 270px;
  top: 13px;
  color: #5c4a24 !important;
}

.ruyi-zoom-flat:hover {
  color: #ebdcb9 !important;
  transform: scale(1.2);
}

.ruyi-zoom-flat:active {
  transform: scale(0.9);
}

.ruyi-zoom-dial-wrapper {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0;
  z-index: 10;
}

.premium-ruyi-bar .ruyi-zoom-dial-wrapper {
  position: absolute;
  left: 184px;
  top: -7px;
  z-index: 3;
}

.ruyi-zoom-dial {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 35% 35%, #3c3c3a 0%, #1c1c1a 60%, #0d0d0c 100%);
  border: 4px solid #bda871;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ebdcb9;
  font-family: 'Georgia', 'Times New Roman', Times, serif;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-shadow: 0px 2px 3px rgba(0,0,0,0.8), 0 0 4px rgba(235, 220, 185, 0.3);
  position: relative;
  overflow: hidden;
}

.ruyi-zoom-dial::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 10%;
  width: 80%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50% / 100% 100% 0% 0%;
  pointer-events: none;
}

.ruyi-reset-btn {
  position: absolute;
  left: 412px;
  top: 13px;
  z-index: 2;
  background: radial-gradient(circle at 35% 35%, #d1bc8a, #826b3e) !important;
  border: 1.5px solid #785e2b !important;
  border-radius: 50%;
  color: #222 !important;
  font-size: 1.1rem !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.ruyi-reset-btn:hover {
  background: radial-gradient(circle at 35% 35%, #f3e2b3, #9a8148) !important;
  transform: scale(1.08);
}

.ruyi-reset-btn:active {
  transform: scale(0.92);
}

/* Glowing Thread Path Layer */
.scroll-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.glowing-thread {
  fill: none;
  stroke: #D7A72F;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 6;
  filter: drop-shadow(0 0 6px rgba(215, 167, 47, 0.88));
  animation: pulseThread 40s linear infinite;
}

@keyframes pulseThread {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1000;
  }
}

/* Interactive Canvas Nodes */
.scroll-node {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(254, 252, 247, 0.95);
  border: 1.8px solid var(--color-bronze);
  border-radius: 50px;
  padding: 6px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.25), box-shadow 0.25s, border-color 0.25s;
  text-decoration: none;
  transform: translate(-50%, -50%);
  width: max-content;
}

.scroll-node:hover, .scroll-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--color-seal-red);
  box-shadow: 0 8px 25px rgba(168, 50, 50, 0.2);
  z-index: 99999 !important;
}

.scroll-node-emblem {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: rgba(74, 93, 84, 0.08);
  border-radius: 50%;
}

.scroll-node-emblem img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.scroll-node-info {
  display: flex;
  flex-direction: column;
}

.scroll-node-info h3 {
  margin: 0;
  color: #1A1F26;
  font-family: var(--font-classic);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.scroll-node-info p {
  margin: 2px 0 0;
  color: #55606E;
  font-size: 0.72rem;
  line-height: 1.2;
  font-family: var(--font-sans);
}

/* Wax Seal Node Specifics */
.scroll-seal-node {
  background: rgba(254, 252, 247, 0.96);
  border: 2px solid var(--color-seal-red);
  box-shadow: 0 5px 18px rgba(168, 50, 50, 0.15);
  border-radius: 8px;
  padding: 8px 18px;
}

.scroll-node-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: radial-gradient(circle, #D44242 0%, var(--color-seal-red) 70%, #701c1c 100%);
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.4);
  box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), 0 3px 8px rgba(0,0,0,0.25);
  animation: sealPulse 3s infinite alternate;
}

.scroll-node-seal .seal-icon {
  font-size: 1.4rem;
  color: #FFF;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

@keyframes sealPulse {
  0% {
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), 0 3px 8px rgba(0,0,0,0.25), 0 0 0 0 var(--color-seal-glow);
  }
  100% {
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.3), 0 3px 8px rgba(0,0,0,0.25), 0 0 8px 4px var(--color-seal-glow);
  }
}

/* Dynasty Cards Timeline Path landing specifics */
.scroll-dynasty-card {
  background: rgba(254, 252, 247, 0.97) !important;
  border: 2.2px solid var(--color-patina) !important;
  border-radius: 12px !important;
  width: 180px !important; /* Balanced for larger logo and fonts */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-shadow: 0 6px 20px rgba(74, 93, 84, 0.12) !important;
  padding: 16px 12px !important;
  gap: 10px !important;
}

.scroll-dynasty-card:hover, .scroll-dynasty-card:focus-visible {
  border-color: var(--color-seal-red) !important;
  box-shadow: 0 10px 30px var(--color-seal-glow) !important;
}

.scroll-dynasty-card .scroll-node-emblem {
  position: relative !important;
  width: 52px !important; /* Reduced by 10% to prevent title crowding */
  height: 52px !important; /* Reduced by 10% to prevent title crowding */
  background: transparent !important; /* Removed circle shade/background */
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scroll-dynasty-card .scroll-node-emblem img {
  width: 54px !important; /* Substantially enlarged to stand out beautifully without the circle boundary */
  height: 54px !important;
  object-fit: contain !important;
}

.scroll-dynasty-card .scroll-node-info {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.scroll-dynasty-card .scroll-node-info h3 {
  font-size: 1.15rem !important; /* Increased by one full step (click) */
  margin: 0 !important;
}

.scroll-dynasty-card .dynasty-years {
  font-family: var(--font-classic) !important;
  font-weight: bold;
  color: var(--color-patina) !important;
  font-size: 0.88rem !important; /* Increased by one full step (click) */
  margin: 2px 0 !important;
}

.scroll-dynasty-card .scroll-node-info p {
  font-size: 0.82rem !important; /* Increased by one full step (click) */
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Weathered Patina Aesthetic Classes */
.d2-mascot {
  filter: drop-shadow(0 2px 6px var(--color-patina-glow));
}

.d2-dynasty-rail {
  background-color: #E2E8E5 !important;
  border-bottom: 1.5px solid var(--color-patina-glow) !important;
}

.d2-dynasty-rail .element-nav-item.active {
  background-color: var(--color-parchment) !important;
  color: var(--color-patina) !important;
  border-bottom: 2.5px solid var(--color-patina) !important;
}

/* v0.1.11 HD dynasty interior page artifact polish */
.hd-page {
  background:
    radial-gradient(circle at 16% 18%, rgba(170, 55, 42, 0.055), transparent 26rem),
    radial-gradient(circle at 82% 8%, rgba(168, 141, 76, 0.12), transparent 30rem),
    linear-gradient(180deg, #f7f3eb 0%, #f0e8d7 54%, #e9deca 100%) !important;
}

.hd-page .hd-page-inscription {
  width: min(640px, 100%);
  margin: 2.25rem auto 1.15rem !important;
  padding: 0.85rem 1.25rem 0.95rem !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)),
    repeating-linear-gradient(0deg, rgba(98, 73, 42, 0.045) 0 1px, transparent 1px 9px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72) !important;
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.045);
}

.hd-page .hd-page-inscription h1 {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.8rem !important;
  color: #4b251e !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.05 !important;
  text-shadow: 0 8px 24px rgba(91, 45, 28, 0.14);
}

.hd-page .hd-page-inscription .book-title-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(40, 27, 18, 0.18);
}

.hd-page .hd-page-inscription .dynasty-id-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.42rem;
  min-width: 2.25rem;
  padding: 0.16rem 0.44rem;
  border: 1px solid rgba(121, 89, 54, 0.18);
  border-radius: 999px;
  color: rgba(82, 67, 47, 0.54);
  background: rgba(255, 252, 238, 0.68);
  font: 700 0.66rem/1 var(--font-sans);
  letter-spacing: 0.1em;
}

.hd-page .hd-page-inscription .subtitle {
  margin: 0.55rem 0 0 !important;
  color: rgba(72, 65, 53, 0.74) !important;
  font-size: 1rem !important;
}

.hd-page .scroll-controls-wrapper {
  transform: scale(0.675);
  transform-origin: center;
}

.hd-page .ruyi-zoom-dial-wrapper {
  transform: scale(0.8);
  transform-origin: center;
}

.hd-page #historyScrollContainer {
  filter: drop-shadow(0 28px 38px rgba(68, 45, 23, 0.18));
}

.hd-page .scroll-viewport-wrapper {
  overflow: visible !important;
  border-radius: 6px !important;
  background: #d8c5a1 !important;
  box-shadow:
    0 22px 50px rgba(54, 38, 20, 0.18),
    inset 0 0 0 1px rgba(114, 82, 40, 0.14) !important;
}

.hd-page .scroll-viewport {
  background: rgba(232, 219, 190, 0.9) !important;
}

.hd-page .scroll-canvas {
  background-size: cover !important;
  box-shadow: none !important;
}

.hd-page .scroll-roller {
  width: 30px !important;
  box-shadow:
    0 20px 32px rgba(31, 20, 12, 0.32),
    0 0 22px rgba(0, 0, 0, 0.24),
    inset 5px 0 12px rgba(255,255,255,0.12),
    inset -6px 0 14px rgba(0,0,0,0.28) !important;
}

.hd-page .scroll-zoom-layer {
  position: absolute;
  inset: 0;
  width: 2470px;
  height: 600px;
  transform-origin: left top;
}

.hd-page .scroll-node {
  min-width: 170px;
  max-width: 219px;
  transform: translate(-72%, -50%) !important;
  align-items: flex-start !important;
  gap: 0.68rem !important;
  padding: 1.05rem 1rem 0.78rem !important;
  border: 1px solid rgba(116, 93, 62, 0.22) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 252, 238, 0.72), rgba(243, 230, 196, 0.42)),
    repeating-linear-gradient(0deg, rgba(94, 66, 34, 0.04) 0 1px, transparent 1px 7px) !important;
  box-shadow: 0 10px 24px rgba(72, 48, 24, 0.13), inset 0 1px rgba(255,255,255,0.42) !important;
  backdrop-filter: blur(3px) saturate(1.08);
}

.hd-page .scroll-node:hover,
.hd-page .scroll-node:focus-visible {
  transform: translate(-72%, -50%) scale(1.04) !important;
  border-color: rgba(154, 48, 38, 0.42) !important;
  box-shadow: 0 16px 34px rgba(125, 56, 38, 0.21), inset 0 1px rgba(255,255,255,0.44) !important;
  z-index: 99999 !important;
}

.hd-page .scroll-node-emblem,
.hd-page .scroll-node-seal {
  width: 38px !important;
  height: 38px !important;
  margin-top: 0.45rem;
  background: transparent !important;
  box-shadow: none !important;
}

.hd-page .scroll-node-info {
  min-width: 0;
  gap: 0.04rem;
}

.hd-page .scroll-node .card-title-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.38rem !important;
  min-width: 0 !important;
  width: 100% !important;
}

.hd-page .scroll-node .card-title-row .scroll-node-emblem,
.hd-page .scroll-node .card-title-row .scroll-node-seal {
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  margin-top: 0 !important;
}

.hd-page .scroll-node-info .event-id-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  height: 24px !important;
  padding: 0 10px !important;
  background: #efe4c8 !important;
  border: 2px solid #b99a50 !important;
  border-radius: 4px !important;
  color: #7c642f !important;
  font: 800 0.6rem/1 var(--font-sans) !important;
  white-space: nowrap !important;
  margin: 0.02rem 0 !important;
}

.hd-page .scroll-node-info h3 {
  color: #40261d !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 1.22rem !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hd-page .scroll-node-info p {
  color: rgba(65, 60, 51, 0.64) !important;
  font-size: 0.75rem !important;
  line-height: 1.32 !important;
  margin-top: 0.02rem !important;
  margin-bottom: 0 !important;
}

.lang-en.hd-page .scroll-node {
  width: max-content !important;
  min-width: 0;
  max-width: 340px;
  transform: translate(-36%, -50%) !important;
  gap: 0.56rem !important;
  padding: 0.95rem 0.9rem !important;
}

.lang-en.hd-page .scroll-node:hover,
.lang-en.hd-page .scroll-node:focus-visible {
  transform: translate(-36%, -50%) scale(1.04) !important;
}

.lang-en.hd-page .scroll-node .card-title-row {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 15px !important;
}

.lang-en.hd-page .scroll-node-info {
  width: max-content;
  max-width: 100%;
}

.lang-en.hd-page .scroll-node-info h3 {
  flex: 0 1 auto !important;
  max-width: 265px !important;
  font-size: 0.76rem !important;
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.lang-en.hd-page .scroll-node-info p {
  max-width: var(--en-card-copy-width, 205px) !important;
  font-size: 0.72rem !important;
  line-height: 1.28 !important;
}

.hd-page .glowing-thread {
  stroke: rgba(196, 148, 38, 0.9);
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(215, 167, 47, 0.55));
}

.hd-page .dropdown-link-with-icon .dropdown-title {
  min-width: 0;
}

.hd-page .dropdown-link-with-icon .dropdown-code,
.hd-page .chapter-rail-item .dynasty-rail-code {
  color: rgba(92, 73, 49, 0.52);
  font: 700 0.58rem/1 var(--font-sans);
  letter-spacing: 0.06em;
}

.hd-page .chapter-rail-item {
  gap: 0.12rem !important;
}

.hd-page .chapter-rail-item .dynasty-rail-title {
  color: inherit;
}

.hd-page .chapter-rail-item .dynasty-rail-code {
  margin-top: 0.05rem;
}

/* v0.1.11 H landing immersive scroll artifact redesign */
.hd-landing-page {
  background:
    radial-gradient(circle at 15% 18%, rgba(178, 51, 39, 0.08), transparent 24rem),
    radial-gradient(circle at 82% 12%, rgba(189, 168, 113, 0.16), transparent 26rem),
    linear-gradient(180deg, #f7f3ea 0%, #efe6d3 46%, #e8ddc8 100%) !important;
}

.hd-landing-page > nav:first-of-type {
  top: 14px !important;
  left: 50% !important;
  width: min(1440px, calc(100% - 32px)) !important;
  padding: 0.46rem 0 !important;
  transform: translateX(-50%) !important;
  background:
    linear-gradient(90deg, rgba(17, 20, 21, 0.94), rgba(43, 38, 31, 0.92) 48%, rgba(17, 20, 21, 0.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 13px) !important;
  border: 1px solid rgba(218, 191, 132, 0.32) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 44px rgba(31, 24, 16, 0.28), inset 0 1px rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) saturate(1.1);
}

.hd-page.hd-landing-page > nav:first-of-type {
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
}

.hd-landing-page > nav:first-of-type .nav-content {
  min-height: 42px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.hd-landing-page > nav:first-of-type .logo {
  color: #f7edd5 !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 1px 10px rgba(218, 191, 132, 0.22);
}

.hd-landing-page > nav:first-of-type .domain-tab,
.hd-landing-page > nav:first-of-type .dropbtn,
.hd-landing-page > nav:first-of-type .lang-btn {
  border-color: transparent !important;
  color: rgba(247, 237, 213, 0.74) !important;
  background: transparent !important;
}

.hd-landing-page > nav:first-of-type .domain-tab.active,
.hd-landing-page > nav:first-of-type .domain-tab:hover,
.hd-landing-page > nav:first-of-type .lang-btn.active,
.hd-landing-page > nav:first-of-type .dropbtn:hover {
  color: #fff8e8 !important;
  background: rgba(139, 39, 31, 0.22) !important;
  box-shadow: inset 0 -2px 0 rgba(188, 76, 61, 0.78);
}

.d2-dynasty-rail {
  position: fixed !important;
  top: 66px !important;
  left: 50% !important;
  width: min(1440px, calc(100% - 32px)) !important;
  min-height: 48px !important;
  padding: 0.18rem 0.9rem 0.28rem !important;
  transform: translateX(-50%) !important;
  background:
    linear-gradient(90deg, rgba(47, 49, 44, 0.84), rgba(83, 74, 58, 0.78), rgba(47, 49, 44, 0.84)) !important;
  border: 1px solid rgba(218, 191, 132, 0.22) !important;
  border-top: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 0 0 18px 18px !important;
  box-shadow: 0 24px 42px rgba(31, 24, 16, 0.24) !important;
  backdrop-filter: blur(12px) saturate(1.05);
  z-index: 999 !important;
}

.d2-dynasty-rail .chapter-rail-home,
.d2-dynasty-rail .chapter-rail-item {
  min-height: 38px !important;
  opacity: 0.82 !important;
  border-radius: 999px !important;
  padding: 0.14rem 0.34rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.08rem !important;
}

.d2-dynasty-rail .chapter-rail-home span {
  color: rgba(247, 237, 213, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
}

.d2-dynasty-rail .chapter-rail-item span {
  color: rgba(255, 250, 237, 0.78) !important;
  font-size: 0.58rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  text-align: center !important;
}

.d2-dynasty-rail .chapter-rail-emoji {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  opacity: 0.66;
  border-radius: 5px !important;
  box-shadow: none !important;
  filter: sepia(0.32) saturate(0.72) brightness(0.88) contrast(0.88) !important;
}

.d2-dynasty-rail .section-home-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  opacity: 0.66;
  border-radius: 5px !important;
  box-shadow: none !important;
  filter: sepia(0.32) saturate(0.72) brightness(0.88) contrast(0.88) !important;
}

/* H-domain rail active/hover state mirrors the H-page top-nav active
   domain-tab treatment: dark red tint background, white text, and a
   soft red inset bottom accent line. This keeps the title clearly
   visible while still differentiating the active tab. */
.d2-dynasty-rail .chapter-rail-home.active,
.d2-dynasty-rail .chapter-rail-item.active,
.d2-dynasty-rail .chapter-rail-item:hover {
  background: rgba(139, 39, 31, 0.22) !important;
  box-shadow: inset 0 -2px 0 rgba(188, 76, 61, 0.78) !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

.d2-dynasty-rail .chapter-rail-item.active span:last-child,
.d2-dynasty-rail .chapter-rail-item:hover span:last-child {
  color: #fff8e8 !important;
  font-weight: 700 !important;
}

.d2-dynasty-rail .chapter-rail-home.active .section-home-icon,
.d2-dynasty-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-dynasty-rail .chapter-rail-item:hover .chapter-rail-emoji {
  opacity: 0.82 !important;
  filter: sepia(0.22) saturate(0.82) brightness(0.96) contrast(0.92) !important;
}

.d2-dynasty-rail .chapter-rail-item.active {
  position: relative !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0.14rem 0.34rem !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.d2-dynasty-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-dynasty-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 32px !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Underline indicator removed: the bottom bar extended past the
   item width and rendered off-center. Active state now relies on
   the radial-gradient background, opacity boost, and translateY. */
.d2-dynasty-rail .chapter-rail-home.active::after,
.d2-dynasty-rail .chapter-rail-item.active::after {
  display: none !important;
}

.hd-page .ce-axis-band {
  position: absolute;
  left: 5.5%;
  right: 5.5%;
  bottom: 8px;
  height: 42px;
  z-index: 8;
  pointer-events: none;
}

.hd-page .ce-axis-band-split {
  height: 72px;
}

.hd-page .ce-axis-line {
  display: none;
}

.hd-page .ce-axis-marker {
  position: absolute;
  width: 110px;
  min-height: 33px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.31rem 0.46rem;
  border: 1px solid rgba(146, 113, 56, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 253, 242, 0.68), rgba(230, 216, 178, 0.34)),
    repeating-linear-gradient(0deg, rgba(62, 45, 25, 0.035) 0 1px, transparent 1px 5px);
  color: rgba(70, 55, 36, 0.72);
  box-shadow: 0 5px 14px rgba(54, 40, 22, 0.06), inset 0 1px 0 rgba(255,255,255,0.4);
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.hd-page .ce-axis-marker:hover,
.hd-page .ce-axis-marker:focus-visible {
  color: rgba(74, 38, 28, 0.92);
  border-color: rgba(168, 50, 50, 0.32);
  background: linear-gradient(180deg, rgba(255, 250, 232, 0.82), rgba(232, 206, 164, 0.48));
  box-shadow: 0 8px 18px rgba(156, 37, 37, 0.1), inset 0 1px 0 rgba(255,255,255,0.48);
}

.hd-page .ce-axis-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 0;
  font-size: 0.97rem;
  background: transparent;
  box-shadow: none;
}

.hd-page .ce-axis-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
}

.hd-page .ce-axis-code {
  color: rgba(118, 86, 43, 0.62);
  font: 700 0.53rem/1 var(--font-sans);
  letter-spacing: 0.03em;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.hd-page .ce-axis-title {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font: 700 0.66rem/1.05 var(--font-classic);
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

.lang-en.hd-page .ce-axis-marker {
  width: max-content;
  min-width: 110px;
  max-width: 220px;
}

.lang-en.hd-page .ce-axis-title {
  max-width: none;
}

.lang-en.hd-page .ce-axis-marker-dense,
.lang-en.hd-page .ce-axis-band-split .ce-axis-marker-dense {
  width: max-content;
  min-width: 88px;
  max-width: 220px;
}

.lang-en.hd-page .ce-axis-marker-dense .ce-axis-title,
.lang-en.hd-page .ce-axis-band-split .ce-axis-marker-dense .ce-axis-title {
  display: inline;
  max-width: none;
}

.hd-page .ce-axis-marker-dense {
  width: 65px;
  min-height: 26px;
  gap: 0.24rem;
  padding: 0.2rem 0.28rem;
  opacity: 0.86;
}

.hd-page .ce-axis-marker-dense .ce-axis-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 0.8rem;
}

.hd-page .ce-axis-marker-dense .ce-axis-code {
  font-size: 0.48rem;
}

.hd-page .ce-axis-band-split .ce-axis-line {
  top: 36px;
}

.hd-page .ce-axis-marker-dense .ce-axis-year {
  display: none;
}

.hd-page .ce-axis-marker-dense .ce-axis-title {
  display: none;
}

/* When the CE axis uses a two-row split (e.g. HD5 with 23 CE markers),
   every box must show its title so users can read the matched
   Civilization elements without losing the CE code/year context. */
.hd-page .ce-axis-band-split .ce-axis-marker-dense .ce-axis-title {
  display: inline;
  font-size: 0.6rem;
  max-width: 78px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-page .ce-axis-band-split {
  min-height: 80px;
  padding-bottom: 8px;
}

.hd-page .ce-axis-band-split .ce-axis-marker-dense {
  width: 105px;
  min-height: 28px;
  padding: 0.18rem 0.32rem;
}

.hd-page .ce-axis-band-split .ce-axis-line {
  top: 38px;
}

.hd-landing-page main.container.page-main {
  max-width: min(1440px, calc(100% - 32px)) !important;
}

.hd-landing-page .h-scroll-inscription {
  width: min(640px, 100%) !important;
  margin: 0 auto 0.6rem !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
  display: block !important;
  align-items: center !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.36), rgba(255,255,255,0.10)),
    repeating-linear-gradient(0deg, rgba(98, 73, 42, 0.045) 0 1px, transparent 1px 9px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72);
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.04);
}

/* v0.1.xx C/G/L domain landing pages — red inscription bar */
.d1-landing-page .h-scroll-inscription {
  width: min(640px, 100%) !important;
  margin: 0 auto 0.6rem !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
  display: block !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(248,243,228,0.32), rgba(215,200,170,0.08)),
    repeating-linear-gradient(0deg, rgba(90,70,45,0.035) 0 1px, transparent 1px 7px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72);
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.04);
}

.d1-landing-page .h-scroll-inscription .c-page-title-flex {
  justify-content: flex-start !important;
}

.d1-landing-page .h-scroll-inscription .subtitle {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* CB book page — red inscription bar (640px, warm cream texture) */
.book-page:not(.hd-landing-page):not(.d1-landing-page) .h-scroll-inscription {
  width: min(640px, 100%) !important;
  margin: 0 auto 0.6rem !important;
  padding: 0.85rem 1.25rem 0.95rem !important;
  display: block !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(248,243,228,0.32), rgba(215,200,170,0.08)),
    repeating-linear-gradient(0deg, rgba(90,70,45,0.035) 0 1px, transparent 1px 7px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72) !important;
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.045);
}

.book-page:not(.hd-landing-page):not(.d1-landing-page) .h-scroll-inscription .page-heading-stack {
  margin-inline: 0 !important;
}

.book-page:not(.hd-landing-page):not(.d1-landing-page) .h-scroll-inscription .c-page-title-flex {
  justify-content: flex-start !important;
}

.book-page:not(.hd-landing-page):not(.d1-landing-page) .h-scroll-inscription .subtitle {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* CE element page — red inscription bar (640px, warm cream texture) */
.chapter-page:not(.hd-page) .h-scroll-inscription {
  width: min(640px, 100%);
  margin: 0 auto 3.5rem !important;
  padding: 0.85rem 1.2rem 2rem !important;
  display: block !important;
  text-align: left !important;
  background:
    linear-gradient(90deg, rgba(248,243,228,0.32), rgba(215,200,170,0.08)),
    repeating-linear-gradient(0deg, rgba(90,70,45,0.035) 0 1px, transparent 1px 7px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72);
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.04);
}

.chapter-page:not(.hd-page) .h-scroll-inscription .page-heading-stack {
  margin-inline: 0 !important;
}

.chapter-page:not(.hd-page) .h-scroll-inscription .chapter-title-with-icon {
  justify-content: flex-start !important;
}

.chapter-page:not(.hd-page) .h-scroll-inscription .desc {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.hd-landing-page .h-scroll-inscription h1 {
  margin: 0 !important;
  color: #4b251e !important;
  text-shadow: 0 8px 24px rgba(91, 45, 28, 0.14);
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
}

.hd-landing-page .h-scroll-inscription .subtitle {
  margin: 0.55rem 0 0 !important;
  color: rgba(72, 65, 53, 0.78) !important;
  font-size: clamp(0.92rem, 1.8vw, 1.18rem) !important;
  line-height: 1.45 !important;
}

.hd-landing-page .inscription-divider {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin: 0 0.45rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 51, 39, 0.95), rgba(160, 51, 39, 0.18) 70%, transparent 72%);
  vertical-align: 0.08em;
}

.hd-landing-page .inscription-seal {
  margin-left: 0;
  padding: 0.28rem;
  border: 1px solid rgba(159, 136, 98, 0.42);
  border-radius: 14px;
  background: rgba(75, 65, 45, 0.80);
  box-shadow: 0 8px 20px rgba(116, 44, 32, 0.14);
  width: 66px !important;
  height: 66px !important;
}

.hd-landing-page .h-landing-footer,
.h-landing-footer,
body.lang-en > .h-landing-footer,
body.lang-zh > .h-landing-footer {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto 26px;
  padding: 0 !important;
  text-align: initial !important;
  background:
    linear-gradient(90deg, rgba(17, 20, 21, 0.94), rgba(43, 38, 31, 0.92) 48%, rgba(17, 20, 21, 0.94)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 13px);
  background-color: transparent !important;
  border: 1px solid rgba(218, 191, 132, 0.28);
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(31, 24, 16, 0.22), inset 0 1px rgba(255,255,255,0.08);
  color: rgba(247, 237, 213, 0.72);
}

.hd-landing-page .h-landing-footer-inner,
.h-landing-footer-inner,
body.lang-en > .h-landing-footer-inner,
body.lang-zh > .h-landing-footer-inner {
  min-height: 64px;
  padding: 0.5rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.hd-landing-page .h-footer-brand,
.h-footer-brand,
body.lang-en > .h-landing-footer .h-footer-brand,
body.lang-zh > .h-landing-footer .h-footer-brand,
body.lang-tc > .h-landing-footer .h-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #f7edd5;
  font: 700 1.4rem/1 var(--font-classic);
  letter-spacing: 0.18em;
  white-space: nowrap;
  text-align: right;
}

.hd-landing-page .h-footer-brand span,
.h-footer-brand span,
body.lang-en > .h-landing-footer .h-footer-brand span,
body.lang-zh > .h-landing-footer .h-footer-brand span,
body.lang-tc > .h-landing-footer .h-footer-brand span,
body.lang-en > .h-footer-brand span,
body.lang-zh > .h-footer-brand span,
body.lang-tc > .h-footer-brand span {
  color: rgba(247, 237, 213, 0.72);
  font-size: 1.0rem;
  letter-spacing: 0.08em;
}

.hd-landing-page .h-footer-info,
.h-footer-info,
body.lang-en > .h-landing-footer .h-footer-info,
body.lang-zh > .h-landing-footer .h-footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
}

.h-footer-info a,
.h-footer-info a:visited,
.h-footer-info a:hover,
.h-footer-info a:active,
.h-footer-info a:focus,
body.lang-en > .h-landing-footer .h-footer-info a,
body.lang-en > .h-landing-footer .h-footer-info a:visited,
body.lang-en > .h-landing-footer .h-footer-info a:hover,
body.lang-en > .h-landing-footer .h-footer-info a:active,
body.lang-en > .h-landing-footer .h-footer-info a:focus,
body.lang-zh > .h-landing-footer .h-footer-info a,
body.lang-zh > .h-landing-footer .h-footer-info a:visited,
body.lang-zh > .h-landing-footer .h-footer-info a:hover,
body.lang-zh > .h-landing-footer .h-footer-info a:active,
body.lang-zh > .h-landing-footer .h-footer-info a:focus,
.hd-page .h-footer-info a,
.hd-page .h-footer-info a:visited,
.hd-page .h-footer-info a:hover,
.hd-page .h-footer-info a:active,
.hd-page .h-footer-info a:focus {
  color: rgba(247, 237, 213, 0.78) !important;
  text-decoration: underline;
  text-decoration-color: rgba(247, 237, 213, 0.42);
  text-underline-offset: 2px;
}

.h-footer-info a:hover,
body.lang-en > .h-landing-footer .h-footer-info a:hover,
body.lang-zh > .h-landing-footer .h-footer-info a:hover,
.hd-page .h-footer-info a:hover {
  color: rgba(247, 237, 213, 0.96) !important;
  text-decoration-color: rgba(247, 237, 213, 0.78);
}

.hd-landing-page .h-footer-info p,
body.lang-en > .h-landing-footer .h-footer-info p,
body.lang-zh > .h-landing-footer .h-footer-info p,
.h-footer-info p {
  margin: 0;
  color: rgba(247, 237, 213, 0.64);
  font-size: 0.7rem;
  line-height: 1.35;
}

.hd-landing-page .h-footer-info a {
  color: inherit;
  text-decoration: none;
}

.hd-landing-page #historyScrollContainer {
  filter: drop-shadow(0 30px 38px rgba(68, 45, 23, 0.22));
}

.hd-landing-page .scroll-viewport-wrapper {
  overflow: visible !important;
  border-radius: 6px !important;
  background: #d8c5a1 !important;
  box-shadow:
    0 24px 54px rgba(54, 38, 20, 0.22),
    0 8px 18px rgba(54, 38, 20, 0.13),
    inset 0 0 0 1px rgba(114, 82, 40, 0.16) !important;
}

.hd-landing-page .scroll-viewport {
  background: rgba(232, 219, 190, 0.9) !important;
}

.hd-landing-page .scroll-canvas {
  box-shadow: none !important;
}

.hd-landing-page .scroll-roller {
  width: 30px !important;
  box-shadow:
    0 20px 32px rgba(31, 20, 12, 0.32),
    0 0 22px rgba(0, 0, 0, 0.24),
    inset 5px 0 12px rgba(255,255,255,0.12),
    inset -6px 0 14px rgba(0,0,0,0.28) !important;
}

.hd-landing-page .scroll-dynasty-card {
  width: 246px !important;
  gap: 10px !important;
  padding: 22px 18px 24px !important;
  background: rgba(120, 110, 90, 0.80) !important;
  border: 1px solid rgba(247, 237, 213, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(4px) saturate(1.08);
  position: absolute !important;
}

.hd-landing-page .scroll-dynasty-card:hover,
.hd-landing-page .scroll-dynasty-card:focus-visible {
  border-color: rgba(247, 213, 132, 0.4) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255,255,255,0.08) !important;
  z-index: 60 !important;
}

.hd-landing-page .scroll-dynasty-card .dynasty-id-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  padding: 0.2rem 0.6rem !important;
  background: #efe4c8 !important;
  border: 2px solid #b99a50 !important;
  border-radius: 4px !important;
  color: #7c642f !important;
  font: 800 0.64rem/1 var(--font-sans) !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 6px rgba(72, 48, 24, 0.08) !important;
  margin: 0.15rem 0 !important;
}

.hd-landing-page .scroll-dynasty-card .dynasty-id-badge .badge-years {
  font-weight: 600;
}

.hd-landing-page .scroll-dynasty-card .scroll-node-info h3 {
  color: #f7edd5 !important;
  font-size: 1.5rem !important;
  line-height: 1.08 !important;
  text-align: left !important;
}

.lang-en .hd-landing-page .scroll-dynasty-card .scroll-node-info h3 {
  font-size: 1rem !important;
}

.hd-landing-page .scroll-dynasty-card .dynasty-years {
  color: rgba(247, 237, 213, 0.72) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
}

.hd-landing-page .scroll-dynasty-card .dynasty-card-tagline {
  color: rgba(247, 237, 213, 0.58) !important;
  font-size: 0.83rem !important;
  line-height: 1.32 !important;
  text-align: left !important;
}

.hd-landing-page .scroll-dynasty-card .card-title-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.hd-landing-page .scroll-dynasty-card .scroll-node-emblem {
  width: 36px !important;
  height: 36px !important;
  margin-left: 10px !important;
  margin-right: 6px !important;
}

.hd-landing-page .scroll-dynasty-card .scroll-node-emblem img {
  width: 36px !important;
  height: 36px !important;
  filter: none !important;
}

.hd-landing-page .scroll-dynasty-card .scroll-node-info {
  align-items: flex-start !important;
  gap: 0.05rem !important;
}

.hd-landing-page .scroll-dynasty-card .dynasty-id-badge {
  margin: 0.02rem 0 !important;
}

.hd-landing-page .scroll-controls-wrapper {
  transform: scale(0.675);
  transform-origin: center;
}

.hd-landing-page .scroll-zoom-layer {
  position: absolute;
  inset: 0;
  width: 2470px;
  height: 600px;
  transform-origin: left top;
}

.hd-landing-page .ruyi-zoom-dial-wrapper {
  transform: scale(0.8);
  transform-origin: center;
}

@media (max-width: 900px) {
  .hd-landing-page > nav:first-of-type,
  .hd-landing-page .d2-dynasty-rail {
    width: calc(100% - 18px) !important;
  }

  .hd-landing-page > nav:first-of-type .nav-content {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.28rem 0.75rem !important;
  }

  .hd-landing-page > nav:first-of-type .domain-tabs {
    order: 3;
    flex: 0 0 100% !important;
    justify-content: center !important;
    overflow-x: auto !important;
    padding-bottom: 0.1rem;
  }

  .hd-landing-page > nav:first-of-type .nav-content > div:last-child {
    margin-left: 0 !important;
  }

  .hd-landing-page > nav:first-of-type .nav-dropdown {
    display: none !important;
  }

  .hd-landing-page > nav:first-of-type .lang-switch {
    margin-left: 0 !important;
  }

  .hd-landing-page .d2-dynasty-rail {
    top: 126px !important;
    overflow-x: auto !important;
  }

  .hd-landing-page main.container.page-main {
    padding-top: 13.65rem !important;
  }

  .hd-landing-page .h-scroll-inscription {
    text-align: left !important;
  }

  .hd-landing-page .h-scroll-inscription h1 {
    justify-content: flex-start !important;
    gap: 0.35rem !important;
  }

  .hd-landing-page .inscription-seal {
    width: 42px !important;
    height: 42px !important;
  }

  .hd-landing-page .h-landing-footer,
  .h-landing-footer {
    width: calc(100% - 18px);
    margin-bottom: 16px;
  }

  .hd-landing-page .h-landing-footer-inner,
  .h-landing-footer-inner {
    flex-direction: column;
    gap: 0.45rem;
    text-align: center;
  }

  .hd-landing-page .h-footer-info,
  .h-footer-info {
  align-items: center !important;
    text-align: center;
  }

  .hd-landing-page .scroll-controls-wrapper {
    transform: scale(0.567);
    transform-origin: center;
  }
}

/* v0.1.11 HE mobile readability guard */
@media (max-width: 900px) {
  .chapter-page.hd-page main.container {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-x: hidden !important;
  }

  .chapter-page.hd-page .chapter-title-with-icon.he-title-with-code {
    width: min(100%, calc(100vw - 2rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1.75rem, 4vw, 2rem) !important;
    line-height: 1.14 !important;
    gap: 0.42rem 0.55rem !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .chapter-page.hd-page .chapter-title-with-icon.he-title-with-code > span:first-child {
    display: block !important;
    flex-basis: 100% !important;
    max-width: calc(100vw - 2.25rem) !important;
    min-width: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  .chapter-page.hd-page .section-header .desc {
    max-width: calc(100vw - 3rem) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .chapter-page.hd-page .docx-row,
  .chapter-page.hd-page .muzi-commentary-row,
  .chapter-page.hd-page .muzi-comment-row {
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
  }

  .chapter-page.hd-page .docx-content {
    min-width: 0 !important;
    text-align: left !important;
  }
}

.d2-dynasty-rail .chapter-rail-emoji,
.d2-dynasty-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-dynasty-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  flex-basis: 32px !important;
  font-size: 32px !important;
  transform: none !important;
}

/* HE sibling rail must match HD dynasty rail outer height exactly.
   d2-event-rail extends d2-dynasty-rail; do not override the outer
   min-height/padding here — let the d2-dynasty-rail rule (min-height
   48px, padding 0.18rem 0.9rem 0.28rem) govern the rail bar.
   Only inner item and emoji sizes are adjusted below. */
.d2-event-rail {
  overflow: visible !important;
}

.d2-event-rail .chapter-rail-items {
  align-items: center !important;
  overflow: visible !important;
}

.d2-event-rail .chapter-rail-item,
.d2-event-rail .chapter-rail-item.active,
.d2-event-rail .chapter-rail-item:hover {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0.14rem 0.28rem !important;
  gap: 0.08rem !important;
  overflow: visible !important;
}

.d2-event-rail .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item:hover .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  flex-basis: 36px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  color: rgba(255, 250, 237, 0.88) !important;
}

.d2-event-rail .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item:hover .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active:hover .rail-emoji-glyph {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 31px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center center !important;
}

/* v0.1.12 shared H rail typography and HE icon balance */
.d2-dynasty-rail .chapter-rail-home > span:last-child,
.d2-dynasty-rail .chapter-rail-item > span:last-child,
.d2-event-rail .chapter-rail-home > span:last-child,
.d2-event-rail .chapter-rail-item > span:last-child {
  font-size: 0.58rem !important;
  line-height: 1.05 !important;
  font-weight: 500 !important;
}

.d2-event-rail .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item:hover .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  flex-basis: 36px !important;
}

.d2-event-rail .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item:hover .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active:hover .rail-emoji-glyph {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  font-size: 31px !important;
}

.hd-page .scroll-zoom-layer .ce-axis-band {
  bottom: 34px !important;
}

/* v0.1.13 landing rhythm, H tile mural, and site search */
.root-gateway {
  padding-top: 110px !important;
}

.root-gateway .gateway-header {
  margin-bottom: 1.45rem !important;
}

.root-gateway .gateway-header h1 {
  margin: 0 !important;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem) !important;
}

.root-gateway .title-mascot-svg {
  width: 65px !important;
  height: 65px !important;
}

.root-gateway .domain-grid {
  margin-bottom: 5.1rem !important;
}

.root-gateway .domain-card {
  border: 1px solid rgba(28, 26, 22, 0.2) !important;
  box-shadow: 0 24px 54px rgba(31, 25, 18, 0.15), 0 8px 18px rgba(31, 25, 18, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.82) !important;
}

.root-gateway .domain-card:hover {
  border-color: rgba(126, 42, 35, 0.44) !important;
  box-shadow: 0 30px 64px rgba(31, 25, 18, 0.2), 0 10px 22px rgba(126, 42, 35, 0.12) !important;
}

.root-gateway .domain-card p {
  margin-top: calc(-2.05rem - 20px) !important;
  margin-bottom: 0 !important;
  transform: translateY(-20px) !important;
}

.root-gateway .domain-card h2 {
  margin-top: 0.65rem !important;
}

.site-search {
  width: min(629px, 100%);
  margin: 0 auto 2rem;
}

.site-search-inner {
  padding-top: 0;
}

.site-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  width: min(528px, 100%);
  margin: 0 auto;
}

.site-search-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(33, 33, 33, 0.14);
  border-radius: 8px;
  padding: 0 0.8rem;
  color: #333;
  background: rgba(255, 255, 255, 0.92);
  font: 0.86rem/1.2 var(--font-sans);
  outline: none;
}

.site-search-input:focus {
  border-color: rgba(156, 37, 37, 0.45);
  box-shadow: 0 0 0 3px rgba(156, 37, 37, 0.08);
}

.site-search-form button {
  height: 38px;
  border: 1px solid rgba(33, 33, 33, 0.22);
  border-radius: 8px;
  padding: 0 0.95rem;
  color: #f7edd5;
  background: #1f211f;
  font: 700 0.82rem/1 var(--font-sans);
  cursor: pointer;
}

.site-search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.site-search-result {
  min-height: 62px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 8px;
  padding: 0.58rem 0.68rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.site-search-result:hover {
  transform: translateY(-2px);
  border-color: rgba(156, 37, 37, 0.3);
}

.site-search-result strong,
.site-search-result span {
  display: block;
}

.site-search-result strong {
  color: rgba(70, 70, 70, 0.78);
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 700;
}

.site-search-result span {
  margin-top: 0.28rem;
  color: rgba(34, 34, 34, 0.62);
  font-size: 0.7rem;
  line-height: 1.35;
}

.site-search-result mark {
  background: rgba(212, 175, 55, 0.22);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.site-search-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #777;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .root-gateway {
    padding-top: 96px !important;
  }

  .root-gateway .gateway-header {
    margin-bottom: 1rem !important;
  }

  .root-gateway .title-mascot-svg {
    width: 72px !important;
    height: 72px !important;
  }

  .root-gateway .domain-grid {
    margin-bottom: 3.6rem !important;
  }

  .site-search-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .root-gateway .gateway-header h1 {
    gap: 12px !important;
  }

  .site-search-form {
    grid-template-columns: 1fr;
  }
}

/* v0.1.14 search box layout adjustments & centering patch */
body.lang-en > main,
  margin: 0 !important;
  line-height: 1.05;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem) !important;
}

.root-gateway .title-mascot-svg {
  width: 65px !important;
  height: 65px !important;
}

.root-gateway .domain-grid {
  margin-bottom: 5.1rem !important;
}

.root-gateway .domain-card {
  border: 1px solid rgba(28, 26, 22, 0.2) !important;
  box-shadow: 0 24px 54px rgba(31, 25, 18, 0.15), 0 8px 18px rgba(31, 25, 18, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.82) !important;
}

.root-gateway .domain-card:hover {
  border-color: rgba(126, 42, 35, 0.44) !important;
  box-shadow: 0 30px 64px rgba(31, 25, 18, 0.2), 0 10px 22px rgba(126, 42, 35, 0.12) !important;
}

.root-gateway .domain-card p {
  margin-top: calc(-2.05rem - 20px) !important;
  margin-bottom: 0 !important;
  transform: translateY(-20px) !important;
}

.root-gateway .domain-card h2 {
  margin-top: 0.65rem !important;
}

.site-search {
  width: min(629px, 100%);
  margin: 0 auto 2rem;
}

.site-search-inner {
  padding-top: 0;
}

.site-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  width: min(528px, 100%);
  margin: 0 auto;
}

.site-search-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(33, 33, 33, 0.14);
  border-radius: 8px;
  padding: 0 0.8rem;
  color: #333;
  background: rgba(255, 255, 255, 0.92);
  font: 0.86rem/1.2 var(--font-sans);
  outline: none;
}

.site-search-input:focus {
  border-color: rgba(156, 37, 37, 0.45);
  box-shadow: 0 0 0 3px rgba(156, 37, 37, 0.08);
}

.site-search-form button {
  height: 38px;
  border: 1px solid rgba(33, 33, 33, 0.22);
  border-radius: 8px;
  padding: 0 0.95rem;
  color: #f7edd5;
  background: #1f211f;
  font: 700 0.82rem/1 var(--font-sans);
  cursor: pointer;
}

.site-search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.6rem;
}

.site-search-result {
  min-height: 62px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 8px;
  padding: 0.58rem 0.68rem;
  color: inherit;
  background: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.site-search-result:hover {
  transform: translateY(-2px);
  border-color: rgba(156, 37, 37, 0.3);
}

.site-search-result strong,
.site-search-result span {
  display: block;
}

.site-search-result strong {
  color: rgba(70, 70, 70, 0.78);
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 700;
}

.site-search-result span {
  margin-top: 0.28rem;
  color: rgba(34, 34, 34, 0.62);
  font-size: 0.7rem;
  line-height: 1.35;
}

.site-search-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: #777;
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .root-gateway {
    padding-top: 96px !important;
  }

  .root-gateway .gateway-header {
    margin-bottom: 1rem !important;
  }

  .root-gateway .title-mascot-svg {
    width: 72px !important;
    height: 72px !important;
  }

  .root-gateway .domain-grid {
    margin-bottom: 3.6rem !important;
  }

  .site-search-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .root-gateway .gateway-header h1 {
    gap: 12px !important;
  }

  .site-search-form {
    grid-template-columns: 1fr;
  }
}

/* v0.1.14 search box layout adjustments & centering patch */
body.lang-en > main,
body.lang-zh > main {
  display: flex !important;
  flex-direction: column !important;
}

.site-search {
  width: min(629px, 100%) !important;
  margin: auto auto !important; /* vertically and horizontally centered in flex main */
  padding-top: 4.0rem !important;
  padding-bottom: 3.5rem !important;
  box-sizing: border-box !important;
}

/* Ensure a consistent layout margin separation for bottom search bars on content pages */
.chapter-page .site-search {
  margin: 4.0rem auto !important;
  padding-top: 0 !important;
}
.book-page .site-search {
  margin: 4.0rem auto !important;
  padding-top: 0 !important;
}

/* Reduce width of matching tiles by an additional 3% (from 566px to 550px) */
.site-search-results {
  width: min(550px, 87%) !important;
  margin: 0.6rem auto 0 !important;
}

/* Reset margin-bottom on preceding content elements to center the search box between content and footer */
.root-gateway .domain-grid,
.placeholder-band,
.sections-grid,
.book-chapter-grid,
.chapter-hero-mark,
.muzi-scroll-container {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .root-gateway .domain-grid {
    margin-bottom: 0 !important;
  }
}




/* v0.1.14: History Domain Layout Overrides moved from generator templates to global stylesheet */
/* HD Landing Page Layout */
.hd-landing-page main.container.page-main {
  padding-top: 9.6rem !important;
}
.hd-landing-page .section-header {
  padding-top: 0 !important;
  padding-bottom: 1.15rem !important;
}
.hd-landing-page .scroll-controls-wrapper {
  margin-top: 0.45rem !important;
  margin-bottom: 1.05rem !important;
}
.hd-landing-page #historyScrollContainer {
  margin-top: 0 !important;
  margin-bottom: 58px !important;
}
.hd-landing-page .scroll-dynasty-card .scroll-node-emblem {
  position: relative !important;
}
@media (max-width: 900px) {
  .hd-landing-page main.container.page-main {
    padding-top: 13.65rem !important;
  }
}

/* HE Chapter Page Layout & Specificity Fixes */
body.hd-page.chapter-page {
  background:
    radial-gradient(circle at 16% 18%, rgba(170, 55, 42, 0.055), transparent 26rem),
    radial-gradient(circle at 82% 8%, rgba(168, 141, 76, 0.12), transparent 30rem),
    linear-gradient(180deg, #f7f3eb 0%, #f0e8d7 54%, #e9deca 100%) !important;
}
.chapter-page main.container {
  padding-top: 9.6rem !important;
}
.chapter-page.hd-page .source-content-body {
  padding-bottom: 25px;
}
.d2-event-rail {
  overflow: visible !important;
}
.d2-event-rail .chapter-rail-items {
  align-items: center !important;
  overflow: visible !important;
}
.d2-event-rail .chapter-rail-item,
.d2-event-rail .chapter-rail-item.active,
.d2-event-rail .chapter-rail-item:hover {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 0.14rem 0.28rem !important;
  gap: 0.08rem !important;
  overflow: visible !important;
}
.d2-event-rail .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item:hover .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active .chapter-rail-emoji,
.d2-event-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  flex: 0 0 36px !important;
  flex-basis: 36px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
.d2-event-rail .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item:hover .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active .rail-emoji-glyph,
.d2-event-rail .chapter-rail-item.active:hover .rail-emoji-glyph {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 31px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transform-origin: center center !important;
}
.d2-event-rail .section-home-link.chapter-rail-home {
  min-height: 46px !important;
  height: auto !important;
  overflow: visible !important;
}
.p100-timebar-window-label {
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  color: #8c8577 !important;
}
@media (max-width: 900px) {
  .chapter-page main.container {
    padding-top: 13.65rem !important;
  }
}

/* CE Relationship Graph Containment Card Layout */
.chapter-page .connection-graph-section,
.chapter-page .connection-graph-section:has(.connection-column.has-multiple) {
  position: relative !important;
  width: 90vw !important;
  max-width: 1200px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 4.5rem 0 2.5rem !important;
  padding: 3rem 2.5rem !important;
  background: rgba(226, 226, 220, 0.78) !important;
  border: 1px solid rgba(220, 210, 185, 0.45) !important;
  border-radius: 16px !important;
  box-shadow:
    0 10px 30px rgba(188, 170, 135, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.02) !important;
  backdrop-filter: blur(8px) !important;
  box-sizing: border-box !important;
}

/* Hide the pseudo-element screen-wide top divider line */
.chapter-page .connection-graph-section::before,
.chapter-page .connection-graph-section:has(.connection-column.has-multiple)::before {
  display: none !important;
}

@media (max-width: 900px) {
  .chapter-page .connection-graph-section,
  .chapter-page .connection-graph-section:has(.connection-column.has-multiple) {
    width: 92vw !important;
    max-width: 760px !important;
    margin: 2.5rem 0 1.5rem !important;
    padding: 1.75rem 1.25rem !important;
    border-radius: 12px !important;
  }
}

/* Elevate connection-column/parallel when hovered/focused to raise reasoning tooltips above connection-core */
.chapter-page .connection-graph-section .connection-column:hover,
.chapter-page .connection-graph-section .connection-column:focus-within,
.chapter-page .connection-graph-section .connection-parallel:hover,
.chapter-page .connection-graph-section .connection-parallel:focus-within {
  z-index: 10 !important;
}

/* Site-wide search box to footer fixed 75px spacing layout */
.site-search,
.chapter-page .site-search,
.book-page .site-search {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

main.container,
.chapter-page main.container,
.book-page main.container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.h-landing-footer,
.hd-landing-page .h-landing-footer,
body.lang-en > .h-landing-footer,
body.lang-zh > .h-landing-footer {
  margin-top: 75px !important;
}

/* v0.1.15 Batch B canonical H landing layout and controls */
.h-index-page main.container.page-main {
  padding-top: 9.6rem !important;
}

.h-index-page .section-header {
  padding-top: 0 !important;
  padding-bottom: 1.15rem !important;
}

.h-index-page .scroll-controls-wrapper {
  margin-top: 0.45rem !important;
  margin-bottom: 1.05rem !important;
}

.h-index-page #historyScrollContainer {
  margin-top: 0 !important;
  margin-bottom: 58px !important;
}

.h-index-page .scroll-dynasty-card .scroll-node-emblem {
  position: relative !important;
}

@media (max-width: 900px) {
  .h-index-page main.container.page-main {
    padding-top: 13.65rem !important;
  }
}

/* Muzi Mascot Hover and Active Animation States */
.nav-mascot-svg, .title-mascot-svg {
  transition: transform 0.3s !important;
  cursor: pointer !important;
}

.nav-mascot-svg:hover, .title-mascot-svg:hover {
  transform: scale(1.1) rotate(5deg) !important;
}

.nav-mascot-svg:active, .title-mascot-svg:active {
  transform: scale(1.15) rotate(-12deg) !important;
}

.title-mascot-svg.inscription-seal {
  transition: transform 0.3s !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.title-mascot-svg.inscription-seal:hover {
  transform: scale(1.08) rotate(4deg) !important;
}

.title-mascot-svg.inscription-seal:active {
  transform: scale(1.12) rotate(-10deg) !important;
}

/* Rail-Bar Mascot Transparency */
.section-home-icon {
  box-shadow: none !important;
  background: transparent !important;
}

.section-home-icon > rect:first-of-type {
  display: none !important;
}

/* Commentary Mascot Transparency & Layout overrides */
.muzi-commentary-mascot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.muzi-commentary-mascot svg > rect:first-of-type {
  display: none !important;
}

/* ==========================================================================
   v0.1.16 Aura landing: C/H/G/L domain architecture
   ========================================================================== */
:root {
  --aura-paper: #fcfbfa;
  --aura-ink: #1a1a24;
  --aura-cinnabar: #9e2a2b;
  --aura-cool-gray: #7a7a8a;
}

body:has(.root-gateway), body:has(.about-page), body:has(.contact-page) {
  color: var(--aura-ink);
  background-color: var(--aura-paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(26, 26, 36, 0.018) 0, rgba(26, 26, 36, 0.018) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(122, 122, 138, 0.014) 0, rgba(122, 122, 138, 0.014) 1px, transparent 1px, transparent 11px);
}

.about-page, .contact-page {
  width: 80% !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

.about-page .section-header, .contact-page .section-header {
  padding-top: 2.25rem !important;
}

.root-gateway {
  width: min(1180px, calc(100% - 3rem));
  padding-top: 92px !important;
}

.root-gateway .gateway-header {
  margin-bottom: 2rem !important;
}

.root-gateway .gateway-header h1 {
  color: var(--aura-ink);
}

.root-gateway .gateway-slogan {
  margin: -0.15rem auto 0;
  color: var(--aura-cool-gray);
  font-family: var(--font-classic);
  font-size: 0.82rem;
  letter-spacing: 0;
  text-align: left;
  width: max-content;
}

.root-gateway .domain-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "history civilization atlas";
  gap: 0.9rem;
}

.root-gateway .domain-card-H { grid-area: history; }
.root-gateway .domain-card-C { grid-area: civilization; }
.root-gateway .domain-card-A { grid-area: atlas; }

.root-gateway .domain-card {
  position: relative;
  min-height: 178px;
  padding: 1.35rem 1.5rem;
  overflow: hidden;
  justify-content: flex-end;
  border: 1px solid rgba(26, 26, 36, 0.16) !important;
  border-radius: 6px;
  color: var(--aura-ink);
  background-color: rgba(252, 251, 250, 0.9) !important;
  box-shadow: 0 14px 34px rgba(26, 26, 36, 0.08) !important;
  isolation: isolate;
}

.root-gateway .domain-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(252, 251, 250, 1.0) 0%, rgba(252, 251, 250, 0.93) 58%, rgba(252, 251, 250, 0.63) 100%);
}

.root-gateway .domain-card:hover,
.root-gateway .domain-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--aura-cinnabar) !important;
  box-shadow: 0 18px 38px rgba(26, 26, 36, 0.12), 0 0 0 1px rgba(158, 42, 43, 0.16) !important;
  outline: none;
}

.root-gateway .domain-card-copy {
  position: relative;
  z-index: 2;
  max-width: 82%;
}

.root-gateway .domain-card h2 {
  margin: 0 0 0.55rem !important;
  color: var(--aura-cinnabar);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.18;
}

.root-gateway .domain-card p {
  margin: 0 !important;
  transform: none !important;
  color: rgba(26, 26, 36, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.root-gateway .domain-code {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  z-index: 2;
  color: rgba(122, 122, 138, 0.22);
  font-family: var(--font-classic);
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 1;
  transition: color 180ms ease, transform 180ms ease;
}

.root-gateway .domain-card:hover .domain-code,
.root-gateway .domain-card:focus-visible .domain-code {
  color: rgba(158, 42, 43, 0.72);
  transform: translateY(-2px);
}

.root-gateway .domain-card-C {
  background-image: url("i/mural/XM1003_C_v2.webp") !important;
  background-position: center 44% !important;
  background-size: cover !important;
}

.root-gateway .domain-card-H {
  background-image: url("i/mural/XM1003_H_v2.webp") !important;
  background-position: center 44% !important;
  background-size: cover !important;
}

.root-gateway .domain-card-A {
  background-image: url("i/mural/XM1005_A_v2.webp") !important;
  background-position: center 52% !important;
  background-size: cover !important;
}

.root-gateway .site-search {
  margin: 0 auto !important;
  padding-top: 5rem !important;
}

@media (max-width: 900px) {
  .root-gateway {
    width: min(760px, calc(100% - 2rem));
    padding-top: 132px !important;
  }

  .root-gateway .domain-card {
    min-height: 168px;
  }
}

@media (max-width: 560px) {
  .root-gateway {
    width: min(100% - 1.5rem, 520px);
  }

  .root-gateway .domain-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "history"
      "civilization"
      "atlas";
  }

  .root-gateway .domain-card {
    min-height: 158px;
    padding: 1.2rem;
  }

  .root-gateway .domain-card-copy {
    max-width: 86%;
  }

  .root-gateway .domain-code {
    font-size: 4rem;
  }

  .root-gateway .gateway-slogan {
    font-size: 0.84rem;
  }
}
.ce-tabs {
  width: 100%;
  margin-top: 1.35rem;
}

.chapter-page .ce-tabs + .site-search {
  margin-top: 4.0rem !important;
}

.ce-tab-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(26, 26, 36, 0.2);
}

.ce-tabs.has-origin .ce-tab-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ce-tab {
  position: relative;
  min-width: 0;
  min-height: 48px;
  padding: 0.75rem 0.6rem;
  border: 0;
  background: transparent;
  color: #6b6b78;
  font: 600 0.95rem/1.25 var(--font-sans);
  overflow-wrap: anywhere;
  letter-spacing: 0;
  cursor: pointer;
}

.ce-tab::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 18%;
  height: 2px;
  background: #9e2a2b;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.ce-tab:hover {
  color: #1a1a24;
  background: rgba(158, 42, 43, 0.035);
}

.ce-tab.is-active {
  color: #1a1a24;
}

.ce-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.ce-tab:focus-visible {
  outline: 2px solid #9e2a2b;
  outline-offset: -3px;
}

.ce-tab-panel {
  min-height: 20rem;
  padding-top: 1.75rem;
}

#ce-metaphor,
#ce-illustration,
#ce-fable {
  padding-top: 1.75rem;
}

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

.ce-tab-panel .p100-timebar {
  margin: 0 auto 2.25rem;
}

.ce-tab-panel .source-content-body {
  margin-top: 0;
}

.ce-tab-panel .docx-section-group {
  border-top: 0;
}

.ce-tab-panel .ce-element-layout {
  width: 100%;
}

.ce-tab-panel .ce-panel-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.ce-tab-panel .ce-panel-content-grid.has-label-rail {
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.18fr);
}

.ce-tab-panel .ce-panel-main {
  display: grid;
  gap: 1.15rem;
  min-width: 0;
}

.ce-tab-panel .ce-content-row {
  min-width: 0;
}

.ce-tab-panel .ce-content-main {
  min-width: 0;
  padding-left: 0 !important;
  text-align: left !important;
}

.ce-tab-panel .ce-content-main p:first-child {
  margin-top: 0;
}

.ce-tab-panel .ce-content-main p:last-child {
  margin-bottom: 0;
}

.ce-tab-panel .ce-tab-label-placeholder {
  display: grid;
  gap: 0.58rem;
  padding-top: 0.05rem;
}

.ce-tab-panel .ce-tab-label-placeholder span {
  display: block;
  height: 28px;
  border: 1px dashed rgba(117, 63, 28, 0.18);
  border-radius: 5px;
  background: rgba(255, 250, 238, 0.5);
}

.ce-tab-panel .connection-graph-section {
  margin-top: 0;
}

.fable-explanation-box {
  margin-top: 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(158, 42, 43, 0.18);
  background-color: #faf8f5;
  border-radius: 6px;
  box-shadow: inset 0 0 8px rgba(158, 42, 43, 0.03);
}

.fable-explanation-box p {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: #555566 !important;
}

.lang-en .docx-content,
.lang-en .docx-content p,
.lang-en .fable-explanation-box,
.lang-en .fable-explanation-box p {
  font-family: "Georgia", "Baskerville", "Garamond", "Times New Roman", serif !important;
}

#ce-relations {
  padding-top: 0.7rem !important;
}

#ce-relations .source-content-body,
#ce-relations .element-layout,
#ce-relations .docx-section-group {
  margin-top: 0 !important;
}

#ce-relations .muzi-commentary-mascot {
  margin: 0 auto 0 0 !important;
  float: left !important;
  width: 92px !important;
}

#ce-relations .connection-graph-section {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 1.5rem 0 !important;
  border-top: 0 !important;
}

/* ── CE Illustration Panel ── */

.ce-illustration-figure {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 0.5rem;
  overflow: visible;
  border: 3px solid rgba(72, 63, 42, 0.28);
  background: rgba(255, 252, 244, 0.78);
  box-shadow: 0 14px 34px rgba(41, 35, 22, 0.12);
  border-radius: 12px;
  padding: 8px;
}

.ce-illustration-image {
  display: block;
  width: 1200px;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.ce-illustration-legend {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 6rem;
}

.ce-illustration-legend p {
  margin: 0;
  color: #5c5243;
  font: 400 0.92rem/1.65 var(--font-classic);
  text-align: center;
}

.ce-illustration-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: auto;
}

.ce-illustration-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  background: rgba(158, 42, 43, 0.88);
  color: #fff;
  font: 600 0.7rem/1.35 var(--font-sans);
  white-space: nowrap;
  cursor: default;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transition: background 140ms ease;
}

.ce-illustration-hotspot:hover .ce-illustration-pill {
  background: rgba(198, 52, 53, 0.94);
}

.ce-illustration-hotspot:hover {
  z-index: 20 !important;
}

.ce-illustration-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  max-width: 260px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(72, 63, 42, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.97);
  box-shadow: 0 10px 24px rgba(41, 35, 22, 0.18);
  color: #4d4032;
  font: 400 0.78rem/1.45 var(--font-sans);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 140ms ease;
  z-index: 10;
}

.ce-illustration-hotspot:hover .ce-illustration-tooltip {
  opacity: 1;
  visibility: visible;
}

.ce-illustration-hd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ce-hd-tab {
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255, 220, 140, 0.28);
  border-radius: 999px;
  color: rgba(255, 232, 173, 0.82);
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ce-hd-tab:hover {
  border-color: rgba(255, 220, 140, 0.55);
  color: #ffe5a6;
}

.ce-hd-tab--active {
  color: #32220e;
  background: linear-gradient(180deg, #ffe899, #d09a38 64%, #a76d1d);
  border-color: rgba(255, 238, 164, 0.76);
}

.ce-illustration-hotspot-hd-active {
  z-index: 6;
}

.ce-illustration-hotspot-hd-active .ce-illustration-pill {
  background: rgba(180, 36, 36, 0.72);
  border-color: rgba(255, 110, 110, 0.9);
  box-shadow: 0 0 16px rgba(220, 48, 48, 0.55);
  transform: scale(1.5);
  transform-origin: center center;
}

.ce-illustration-hotspot-hd-hidden {
  display: none;
}

#ce-illustration {
  padding-top: 3rem !important;
}

@media (max-width: 900px) {
  .chapter-page main.container {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .chapter-page .chapter-header {
    width: 100%;
    min-width: 0;
  }

  .chapter-page .chapter-title-with-icon {
    max-width: 100%;
    font-size: 2rem !important;
    overflow-wrap: anywhere;
  }

  .chapter-page .chapter-header .desc {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ce-tabs,
  .ce-tab-list,
  .ce-tab-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .ce-tab-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .ce-tab {
    flex: 0 0 auto;
    min-width: 8.5rem;
    padding-inline: 1rem;
  }

  .ce-tab-panel {
    padding-top: 1.25rem;
    overflow-x: clip;
  }

  #ce-origin,
  #ce-illustration,
  #ce-metaphor,
  #ce-fable {
    padding-top: 1.25rem;
  }

  .ce-tab-panel .docx-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .ce-tab-panel .docx-label {
    padding: 0 0 0.45rem;
    border-right: 0;
    border-bottom: 1px solid rgba(158, 42, 43, 0.2);
    text-align: left;
  }

  .ce-tab-panel .docx-content {
    min-width: 0;
    padding-left: 0;
  }

  .ce-tab-panel .ce-panel-content-grid,
  .ce-tab-panel .ce-panel-content-grid.has-label-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .ce-tab-panel .ce-tab-label-placeholder {
    display: none;
  }
}

/* ===========================================================================
   v0.1.17 Inline Style Reduction (Bucket A)
   =========================================================================== */
.logo.logo-flex {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-domain-tabs-flex {
  display: flex !important;
  align-items: center !important;
}

.chapter-rail-emoji {
  object-fit: contain !important;
}

.section-icon {
  mix-blend-mode: multiply !important;
  filter: contrast(1.1) brightness(1.1) !important;
}

.c-page-title-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-title-index,
.page-title-parent,
.page-title-child {
  font-family: var(--font-classic) !important;
  font-weight: 700 !important;
}

.page-title-index {
  font-size: var(--page-title-index-size) !important;
  line-height: var(--page-title-index-line-height) !important;
}

.page-title-parent {
  font-size: var(--page-title-parent-size) !important;
  line-height: var(--page-title-parent-line-height) !important;
}

.page-title-child {
  font-size: var(--page-title-child-size) !important;
  line-height: var(--page-title-child-line-height) !important;
}

.c-index-title-flex { gap: 16px !important; }
.cb-title-flex { gap: 26px !important; }

.c-index-title-flex .d1-mascot {
  width: 66px !important;
  height: 66px !important;
  flex-shrink: 0 !important;
  margin-left: 0;
  padding: 0.15rem;
  border: 1.5px solid rgba(156, 37, 37, 0.80);
  border-radius: 14px;
  background: rgba(156, 37, 37, 0.80);
  box-shadow: 0 8px 20px rgba(116, 44, 32, 0.14);
}

.cb-header-pill,
.ce-header-pill {
  font-size: 0.8rem;
  color: rgba(120,120,120,0.85);
  background: rgba(180,180,180,0.12);
  border: 1px solid rgba(150,150,150,0.30);
  padding: 2px 14px;
  border-radius: 14px;
  margin: 0 0 1.5rem;
  display: inline-block;
  line-height: 1.4;
}

a.cb-header-pill,
a.ce-header-pill,
a.pill-box,
a.he-id-badge {
  text-decoration: none;
}


.section-header {
  padding: 2.25rem 0 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chapter-header {
  padding-top: calc(2.25rem - 15px);
}

.page-heading-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.page-heading-stack > h1 {
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.site-breadcrumb-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  margin: 12px 0 8px;
  line-height: 1;
}

.site-breadcrumb-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  border: 1px solid rgba(150,150,150,0.22);
  border-radius: 16px;
  background: rgba(180,180,180,0.08);
  color: rgba(120,120,120,0.75);
  font: 500 0.82rem/1.4 var(--font-sans);
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.site-breadcrumb-pill:hover {
  border-color: rgba(153, 45, 35, 0.38);
  background: rgba(153, 45, 35, 0.08);
  color: var(--primary-color);
}

.site-breadcrumb-pill:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.site-breadcrumb-separator {
  margin: 0 0.55rem;
  color: rgba(150,150,150,0.45);
  font-size: 0.72rem;
  line-height: 1;
}

.page-heading-stack > .site-breadcrumb-row {
  margin-top: 0;
}

.c-page-bottom-spacer { height: 25px !important; }

.commentary-mascot-wrapper { margin: 0 auto 0 0 !important; }

.chapter-page:not(.hd-page) .chapter-title-with-icon {
  font-family: var(--font-classic) !important;
  font-size: 4rem;
  margin-top: 0 !important;
}

.scroll-chevron-svg { width: 100%; height: 100%; }

.ruyi-chevron-svg { width: 44px; height: 30px; }

.he-title-with-code,
.chapter-page:not(.hd-page) .chapter-title-with-icon.he-title-with-code {
  font-family: var(--font-classic) !important;
  font-size: clamp(1.75rem, 4vw, 3.5rem) !important;
  margin: 1rem auto 0 !important;
  width: min(100%, calc(100vw - 2rem)) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.he-code-badge {
  position: static !important;
  font-size: 0.8rem !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  margin-left: 4px !important;
}

.page-heading-stack .he-code-badge {
  margin-left: 0 !important;
}

.inscription-seal {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  padding: 0.2rem !important;
  background: rgba(120, 110, 90, 0.80) !important;
}

.he-page-title-flex {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.he-title-text {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  text-wrap: balance !important;
}

.pill-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  background: #efe4c8 !important;
  border: 2px solid #b99a50 !important;
  border-radius: 4px !important;
  color: #7c642f !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hd-landing-page .h-scroll-inscription h1.he-page-title-flex {
  display: flex !important;
  gap: 100px !important;
  justify-content: flex-start !important;
}

.hd-landing-page .h-scroll-inscription .page-heading-stack {
  margin-left: 0;
  margin-right: 0;
}

.chapter-page.hd-page .section-header.chapter-header {
  text-align: left !important;
  margin: 0 auto 3.5rem !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
  padding-bottom: 2rem !important;
  width: min(640px, 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.36), rgba(255,255,255,0.10)),
    repeating-linear-gradient(0deg, rgba(98, 73, 42, 0.045) 0 1px, transparent 1px 9px) !important;
  border-left: 3px solid rgba(153, 45, 35, 0.72);
  box-shadow: inset 18px 0 28px rgba(144, 88, 39, 0.04);
}

.chapter-page.hd-page .section-header.chapter-header h1 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 3rem !important;
  justify-content: flex-start !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.chapter-page.hd-page .section-header.chapter-header .he-title-text {
  flex: 0 1 auto !important;
  max-width: none !important;
  white-space: normal !important;
}

.chapter-page.hd-page .section-header.chapter-header .chapter-title-icon {
  flex: 0 0 auto !important;
}

.chapter-page.hd-page .section-header.chapter-header .he-id-badge.pill-box,
.chapter-page.hd-page .section-header.chapter-header .desc {
  display: flex !important;
  width: min(520px, calc(100% - 2rem)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.chapter-page.hd-page .section-header.chapter-header .he-id-badge.pill-box {
  width: fit-content !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 0.45rem !important;
}

.chapter-page.hd-page .section-header.chapter-header .page-heading-stack {
  width: min(520px, calc(100% - 2rem));
}

.h-index-page .scroll-mural-bg {
  width: 100% !important;
  background-size: cover !important;
}

.chapter-page.hd-page .d2-event-rail .chapter-rail-emoji,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item:hover .chapter-rail-emoji,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item.active .chapter-rail-emoji,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item.active:hover .chapter-rail-emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  flex-basis: 28px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

.chapter-page.hd-page .d2-event-rail .chapter-rail-item .rail-emoji-glyph,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item:hover .rail-emoji-glyph,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item.active .rail-emoji-glyph,
.chapter-page.hd-page .d2-event-rail .chapter-rail-item.active:hover .rail-emoji-glyph {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 23px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ===========================================================================
   v0.1.19 Inline Style Reduction (Bucket A)
   =========================================================================== */
.gateway-title-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}

.placeholder-title-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* v0.1.20 Backdrop-to-core spacing inside CE Guide tab */
.ce-backdrop-spacer {
  margin-top: 1.5rem;
}

/* ===========================================================================
   v0.1.19 Mobile Grid Responsive Alignment Overrides
   =========================================================================== */
@media (max-width: 1024px) {
  .book-page .book-chapter-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .book-page .book-chapter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: min(100%, calc(100vw - 2rem)) !important;
  }
}

@media (max-width: 560px) {
  .book-page .book-chapter-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .book-page .book-chapter-card {
    border-right: none !important;
  }
  .book-page .book-chapter-card-empty {
    display: none !important;
  }
}

/* ===========================================================================
   v0.1.20 H-domain Mobile Card List (replaces scroll timeline at <560px)
   =========================================================================== */
.dynasty-mobile-list,
.event-mobile-list {
  display: none !important;
}

@media (max-width: 560px) {
  .hd-landing-page .scroll-controls-wrapper,
  .hd-landing-page .muzi-scroll-container {
    display: none !important;
  }

  .hd-page .scroll-controls-wrapper,
  .hd-page .muzi-scroll-container {
    display: none !important;
  }

  .hd-landing-page .dynasty-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding: 0 0 1.5rem 0 !important;
  }

  .hd-page .event-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    padding: 0 0 1.5rem 0 !important;
  }

  .dynasty-mobile-card,
  .event-mobile-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.78rem 0.9rem !important;
    background: linear-gradient(145deg, rgba(255, 252, 238, 0.72), rgba(243, 230, 196, 0.42));
    border: 1px solid rgba(116, 93, 62, 0.22);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(72, 48, 24, 0.08);
  }

  .dynasty-mobile-card h3,
  .event-mobile-card h3 {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    margin: 0 0 0.12rem 0 !important;
    color: #462b21 !important;
  }

  .lang-en .dynasty-mobile-card h3,
  .lang-en .event-mobile-card h3 {
    font-family: var(--font-sans) !important;
  }

  .dynasty-mobile-card .dynasty-id-badge,
  .event-mobile-card .event-id-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.12rem 0.45rem !important;
    background: #efe4c8 !important;
    border: 1px solid #b99a50 !important;
    border-radius: 4px !important;
    color: #7c642f !important;
    font: 700 0.65rem/1 var(--font-sans) !important;
    margin: 0.08rem 0 !important;
  }

  .dynasty-mobile-card .dynasty-card-tagline,
  .event-mobile-card p {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    color: rgba(65, 60, 51, 0.7) !important;
    margin: 0.1rem 0 0 0 !important;
  }

  .dynasty-mobile-card-icon {
    flex-shrink: 0 !important;
    width: 34px !important;
    height: 34px !important;
  }

  .dynasty-mobile-card-icon img {
    width: 34px !important;
    height: 34px !important;
    filter: sepia(0.6) saturate(0.8) brightness(1.25) !important;
  }

  .event-mobile-emoji {
    flex-shrink: 0 !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    width: 34px !important;
    text-align: center !important;
  }

  .dynasty-mobile-card-body,
  .event-mobile-card-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* Shared C/H page-title tiers. Keep this contract after legacy page patches. */
body .section-header h1.page-title-index,
body .section-header h1.page-title-parent,
body .section-header h1.page-title-child {
  font-family: var(--font-classic) !important;
  font-weight: 700 !important;
}

body.lang-en .section-header h1.page-title-index,
body.lang-en .section-header h1.page-title-parent,
body.lang-en .section-header h1.page-title-child {
  font-family: var(--font-sans) !important;
}

body .section-header h1.page-title-index {
  font-size: var(--page-title-index-size) !important;
  line-height: var(--page-title-index-line-height) !important;
}

body .section-header h1.page-title-parent {
  font-size: var(--page-title-parent-size) !important;
  line-height: var(--page-title-parent-line-height) !important;
}

body .section-header h1.page-title-child {
  font-size: var(--page-title-child-size) !important;
  line-height: var(--page-title-child-line-height) !important;
}

/* CE page title font size/style mirrors CB */
body.chapter-page .section-header h1.page-title-child {
  font-size: var(--page-title-parent-size) !important;
  line-height: var(--page-title-parent-line-height) !important;
}

@media (max-width: 760px) {
  .c-index-title-flex .d1-mascot {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Breadcrumb Dropdown Navigation */

/* ===========================================================================
   v0.1.23 Atlas domain grids
   =========================================================================== */
.atlas-index-page .atlas-index-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(1120px, calc(100vw - 2rem)) !important;
  min-height: 540px;
  background-image: var(--atlas-index-mural) !important;
  background-position: center 35% !important;
  background-size: cover !important;
}

.atlas-index-page .atlas-index-grid::before {
  background: rgba(245, 245, 235, 0.90) !important;
}

.atlas-index-page .atlas-section-card {
  min-height: 170px;
  justify-content: center;
}

.atlas-index-page .atlas-section-icon,
.atlas-page .atlas-title-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 0.9rem;
  font-size: 2.2rem;
  line-height: 1;
}

.atlas-page .atlas-title-emoji {
  margin: 0;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
}

.atlas-section-icon .atlas-book-icon-img,
.atlas-title-emoji .atlas-book-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(60, 60, 60, 0.70);
  border: 3px solid rgba(60, 60, 60, 0.70);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(60, 60, 60, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.atlas-page .atlas-ae-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: min(1180px, calc(100vw - 2rem)) !important;
  min-height: 720px !important;
  background-image: url("i/mural/XM1005_A_v2.webp") !important;
  background-position: center 35% !important;
  background-size: cover !important;
  padding-bottom: 5px !important;
}

.atlas-page .atlas-ae-grid::before {
  background: rgba(250, 248, 240, 0.90) !important;
}

.atlas-page .atlas-ae-card {
  min-height: 180px !important;
  padding: 0.85rem 0.75rem !important;
}

.atlas-ae-grid .chapter-tile-emoji {
  font-size: 3.3rem !important;
}

.atlas-ae-grid .chapter-tile-icon-img {
  border: 3px solid rgba(156, 37, 37, 0.70);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(156, 37, 37, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.atlas-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  margin: 0;
  flex-wrap: wrap;
}

.atlas-service-hero {
  position: relative;
}

.atlas-service-hero .page-heading-stack {
  width: 100%;
}

.atlas-hero-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 0.35rem;
}

.atlas-hero-topline .site-breadcrumb-row {
  min-width: 0;
  margin: 0;
}

.atlas-hero-map-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.atlas-hero-id-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
}

.atlas-page .cb-header-pill,
.atlas-page .cb-index-pill,
.atlas-page.book-page .atlas-ae-grid .book-chapter-card .ce-index-pill {
  display: inline-grid !important;
  min-width: 36px;
  min-height: 20px;
  place-items: center;
  padding: 2px 7px !important;
  box-sizing: border-box;
  border: 1px solid rgba(216, 174, 82, 0.62) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #653026 !important;
  font-size: 10px !important;
  font-weight: 800;
  line-height: 1 !important;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.82);
}

.atlas-hero-id-row .cb-header-pill,
.atlas-ar-detail-id-row .cb-header-pill {
  min-height: 27px;
  height: 27px;
  margin: 0;
  padding: 2px 0.52rem !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

/* v0.1.43 homepage Atlas gateway: expose the six Atlas journeys in the first viewport. */
.root-gateway .gateway-hero-copy {
  justify-self: start;
  text-align: left;
}

.root-gateway .gateway-hero-overline {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: #f4c96f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.root-gateway .gateway-title-flex {
  justify-content: flex-start;
  text-align: left;
}

.root-gateway .gateway-slogan,
.root-gateway .gateway-lede {
  text-align: left;
}

.root-gateway .gateway-actions {
  justify-content: flex-start;
  margin-top: 1.1rem;
  padding-top: 0;
}

.root-gateway .atlas-experience-guide {
  margin-top: 1.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 230, 164, 0.2);
}

.root-gateway .atlas-experience-guide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.root-gateway .atlas-experience-guide-head span {
  color: #ffe39b;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.root-gateway .atlas-experience-guide-head small {
  color: rgba(244, 239, 228, 0.52);
  font-size: 0.72rem;
}

.root-gateway .atlas-experience-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.root-gateway .atlas-experience-card {
  position: relative;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
  min-height: 48px;
  padding: 0.42rem 0.48rem;
  border: 1px solid rgba(255, 230, 164, 0.18);
  border-radius: 11px;
  color: #fff3d0;
  background: rgba(4, 6, 5, 0.94);
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.root-gateway .atlas-experience-card:hover,
.root-gateway .atlas-experience-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 230, 164, 0.58);
  background: rgba(255, 230, 164, 0.1);
  outline: none;
}

.root-gateway .atlas-experience-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #f4c96f;
  font-size: 1.25rem;
  line-height: 1;
}

.root-gateway .atlas-experience-icon img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.root-gateway .atlas-experience-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.root-gateway .atlas-experience-copy {
  display: grid;
  min-width: 0;
  gap: 0.06rem;
}

.root-gateway .atlas-experience-copy strong {
  overflow: hidden;
  color: #fff4d5;
  font-size: 0.92rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-gateway .atlas-experience-copy small {
  overflow: hidden;
  color: rgba(244, 239, 228, 0.58);
  font-size: 0.59rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-gateway .atlas-experience-arrow {
  color: rgba(255, 227, 155, 0.68);
  font-size: 0.78rem;
  line-height: 1;
}

@media (max-width: 1023px) {
  .root-gateway .gateway-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "atlas" "picks";
  }

  .root-gateway .gateway-hero-copy {
    width: 100%;
    min-height: 0;
  }

  .root-gateway .atlas-experience-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .root-gateway .gateway-hero-copy {
    text-align: left;
  }

  .root-gateway .atlas-experience-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-gateway .atlas-experience-copy small {
    display: none;
  }
}

/* Atlas detail heroes: AB scope pages and AE entries share the A.html treatment. */
.atlas-detail-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(760px, calc(100svh - 78px));
  overflow: hidden;
  background-color: #202622;
  background-position: center;
  background-size: cover;
  color: #fffdf3;
}

.atlas-detail-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7, 14, 11, 0.88) 0%, rgba(7, 14, 11, 0.63) 40%, rgba(7, 14, 11, 0.22) 76%, rgba(7, 14, 11, 0.48) 100%),
    linear-gradient(0deg, rgba(7, 14, 11, 0.76) 0%, rgba(7, 14, 11, 0.08) 58%, rgba(7, 14, 11, 0.42) 100%);
  content: "";
}

.atlas-detail-hero-nav {
  position: absolute;
  top: 1.35rem;
  left: clamp(1rem, 5vw, 5.5rem);
  z-index: 2;
}

.atlas-detail-hero-nav .site-section-pulldown-pill,
.atlas-detail-hero-nav .site-breadcrumb-pill,
.atlas-detail-hero-nav .site-breadcrumb-trigger {
  border-color: rgba(244, 218, 139, 0.68) !important;
  background: rgba(7, 17, 12, 0.76) !important;
  color: #fffdf5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px);
}

.atlas-detail-hero-copy {
  align-self: center;
  width: min(720px, 52vw);
  margin-left: clamp(1rem, 10vw, 11rem);
  padding: 6rem 0 7rem;
}

.atlas-detail-hero-copy > span {
  display: block;
  color: #eed883;
  font: 900 0.72rem/1.25 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atlas-detail-hero-copy h1 {
  max-width: 760px;
  margin: 0.4rem 0 0;
  color: #fffdf5;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.94;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
}

.atlas-detail-hero-copy > p {
  max-width: 620px;
  margin: 1rem 0 0;
  color: rgba(255, 253, 243, 0.86);
  font: 400 1.04rem/1.65 var(--font-classic);
}

.atlas-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.45rem;
}

.atlas-detail-hero-actions > a {
  border: 1px solid rgba(238, 216, 131, 0.78);
  background: rgba(10, 16, 12, 0.58);
  color: #fffdf3;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);
}

.atlas-detail-hero-feature {
  position: absolute;
  right: clamp(1rem, 8vw, 9rem);
  bottom: 15%;
  display: grid;
  gap: 0.42rem;
  width: min(360px, 29vw);
  padding: 1rem 1.1rem 1.05rem;
  border-left: 2px solid #eed883;
  background: rgba(7, 13, 10, 0.72);
  color: #fffdf3;
  text-decoration: none;
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(5px);
  transition: background 150ms ease, transform 150ms ease;
}

.atlas-detail-hero-feature:hover,
.atlas-detail-hero-feature:focus-visible {
  background: rgba(7, 13, 10, 0.9);
  transform: translateY(-0.2rem);
}

.atlas-detail-hero-feature > span {
  color: #eed883;
  font: 900 0.65rem/1.25 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atlas-detail-hero-feature strong {
  font: 800 1.35rem/1.1 var(--font-classic);
}

.atlas-detail-hero-feature small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 253, 243, 0.76);
  font: 400 0.82rem/1.45 var(--font-classic);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.atlas-detail-hero-badge {
  position: absolute;
  right: clamp(1rem, 8vw, 9rem);
  bottom: 16%;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 112px;
  padding: 0.7rem;
  border: 1px solid rgba(238, 216, 131, 0.68);
  background: rgba(7, 13, 10, 0.72);
  box-shadow: 0 0.7rem 2rem rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(5px);
}

.atlas-detail-hero-badge .atlas-entry-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
}

.atlas-detail-hero-badge strong {
  color: #eed883;
  font: 900 0.72rem/1 var(--font-sans);
  letter-spacing: 0.08em;
}

.atlas-detail-hero .atlas-entry-filters {
  position: absolute;
  right: clamp(1rem, 5vw, 5.5rem);
  bottom: 2rem;
  left: clamp(1rem, 10vw, 11rem);
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  width: auto;
  margin-top: 0;
}

.atlas-detail-hero .atlas-entry-type-row,
.atlas-detail-hero .atlas-entry-location-rows,
.atlas-detail-hero .atlas-entry-location-row {
  flex-wrap: nowrap;
  align-items: center;
}

.atlas-detail-hero .atlas-entry-location-rows {
  width: auto;
  max-width: none;
}

.atlas-detail-hero .atlas-ae-header-pill-item,
.atlas-detail-hero .atlas-ae-header-pill,
.atlas-detail-hero .atlas-ae-header-pill-toggle {
  border-color: rgba(244, 218, 139, 0.62) !important;
  background: rgba(7, 17, 12, 0.74) !important;
  color: #fffdf3 !important;
}

.atlas-detail-legacy-head {
  display: none;
}

@media (max-width: 760px) {
  .atlas-detail-hero {
    min-height: 700px;
  }

  .atlas-detail-hero-copy {
    align-self: start;
    width: auto;
    margin: 0;
    padding: 9rem 1.2rem 12rem;
  }

  .atlas-detail-hero .atlas-entry-filters {
    right: 1.2rem;
    bottom: 1.25rem;
    left: 1.2rem;
    flex-wrap: wrap;
  }

  .atlas-detail-hero .atlas-entry-type-row,
  .atlas-detail-hero .atlas-entry-location-rows,
  .atlas-detail-hero .atlas-entry-location-row {
    flex-wrap: wrap;
  }

  .atlas-detail-hero-copy h1 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .atlas-detail-hero-feature,
  .atlas-detail-hero-badge {
    right: 1.2rem;
    bottom: 1.4rem;
    left: 1.2rem;
    width: auto;
  }

  .atlas-detail-hero-badge {
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    align-items: center;
  }

  .atlas-detail-hero-badge .atlas-entry-icon {
    width: 48px;
    height: 48px;
  }
}

/* Matrix landing hero: use the full-screen Atlas treatment from A.html. */
.atlas-matrix-index-main {
  min-height: 0;
  overflow: visible;
}

.atlas-matrix-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  isolation: isolate;
  background-color: #27302b;
  background-position: center center;
  background-size: cover;
  color: #fffdf3;
}

.atlas-matrix-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(12, 16, 14, 0.84), rgba(12, 16, 14, 0.36) 50%, rgba(12, 16, 14, 0.62)),
    linear-gradient(0deg, rgba(10, 14, 12, 0.96), transparent 48%, rgba(10, 14, 12, 0.2));
}

.atlas-matrix-hero-copy {
  align-self: flex-start;
  width: min(590px, calc(100% - 2rem));
  margin: 0 auto 0 clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(6.5rem, 14vh, 12rem) + 100px) 0 13rem;
  text-align: left;
}

.atlas-matrix-hero-nav {
  position: absolute;
  top: 1.35rem;
  left: clamp(1rem, 5vw, 5.5rem);
  z-index: 3;
}

.atlas-matrix-hero-nav .site-breadcrumb-row {
  margin: 12px 0 8px;
}

.atlas-matrix-hero-nav .site-section-pulldown-pill,
.atlas-matrix-hero-nav .site-breadcrumb-pill,
.atlas-matrix-hero-nav .site-breadcrumb-trigger {
  color: #fffdf5 !important;
  border-color: rgba(244, 218, 139, 0.68) !important;
  background: rgba(7, 17, 12, 0.76) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px);
}

.atlas-matrix-hero-nav .site-section-pulldown-separator,
.atlas-matrix-hero-nav .site-breadcrumb-separator {
  color: rgba(244, 218, 139, 0.9) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

.atlas-matrix-hero-nav .site-section-pulldown-pill:hover,
.atlas-matrix-hero-nav .site-breadcrumb-pill:hover,
.atlas-matrix-hero-nav .site-breadcrumb-trigger:hover {
  color: #fffdf5 !important;
  border-color: #eed883 !important;
  background: rgba(47, 31, 17, 0.88) !important;
}

.atlas-matrix-hero-kicker {
  display: block;
  color: #eed883;
  font: 800 0.76rem/1.3 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.atlas-matrix-hero h1 {
  max-width: 800px;
  margin: 0;
  color: #fffdf3;
  font-size: clamp(3.5rem, 8vw, 6.8rem);
  line-height: 0.96;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}

.atlas-matrix-hero-copy > p {
  max-width: 560px;
  margin: 1.2rem 0 0;
  color: rgba(255, 253, 243, 0.92);
  font: 400 1.08rem/1.65 var(--font-classic);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.atlas-matrix-hero-actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.45rem;
}

.atlas-matrix-hero-actions:empty {
  display: none;
}

.atlas-matrix-hero-actions > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(238, 216, 131, 0.72);
  background: rgba(20, 24, 21, 0.5);
  color: #fffdf3;
  font: 800 0.74rem/1 var(--font-sans);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.atlas-matrix-hero-actions > a:hover,
.atlas-matrix-hero-actions > a:focus-visible {
  background: #eed883;
  color: #211f1b;
  outline: none;
}

.atlas-matrix-hero-actions .atlas-map-service-button {
  border-color: rgba(238, 216, 131, 0.72);
  box-shadow: none;
}

.atlas-matrix-hero-feature-wrapper {
  position: absolute;
  top: calc(1.35rem + 12px);
  right: clamp(1rem, 5vw, 5.5rem);
  bottom: auto;
  z-index: 10;
}

.atlas-matrix-hero-feature {
  position: relative;
  top: auto;
  right: auto;
  transform: none;
  display: grid;
  width: min(285px, 24vw);
  margin: 0;
  padding: 0.7rem 2.2rem 0.7rem 0.85rem;
  border-left: 2px solid #eed883;
  background: rgba(12, 16, 14, 0.42);
  color: #fffdf3;
  text-align: left;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 150ms ease;
  border-radius: 4px;
}

.atlas-matrix-hero-feature:hover,
.atlas-matrix-hero-feature:focus-visible {
  background: rgba(12, 16, 14, 0.78);
  color: #fffdf3;
  outline: none;
}

.atlas-matrix-hero-feature > span:first-child {
  color: #eed883;
  font: 800 0.62rem/1.25 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.atlas-matrix-hero-feature strong {
  margin-top: 0.22rem;
  font-family: var(--font-sans) !important;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  color: #fffbea;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.atlas-matrix-hero-feature small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.3rem;
  color: rgba(255, 253, 243, 0.78);
  font-family: var(--font-sans) !important;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.atlas-matrix-scope-rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  min-height: 116px;
  background: rgba(9, 13, 11, 0.9);
  border-top: 1px solid rgba(238, 216, 131, 0.28);
}

.atlas-matrix-scope-rail-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon copy";
  align-items: center;
  align-content: center;
  min-width: 0;
  min-height: 116px;
  padding: 0.85rem 1rem;
  gap: 0.65rem;
  border-right: 1px solid rgba(238, 216, 131, 0.18);
  color: #fffdf3;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.atlas-matrix-scope-rail-card:last-child {
  border-right: 0;
}

.atlas-matrix-scope-rail-card:hover,
.atlas-matrix-scope-rail-card:focus-visible {
  background: rgba(73, 67, 46, 0.78);
  color: #fffdf3;
  outline: none;
}

.atlas-matrix-scope-rail-card::after {
  position: absolute;
  bottom: calc(100% + 0.55rem);
  left: 50%;
  z-index: 8;
  width: max-content;
  max-width: min(20rem, 80vw);
  padding: 0.42rem 0.62rem;
  border: 1px solid rgba(238, 216, 131, 0.7);
  border-radius: 0.28rem;
  background: rgba(7, 13, 10, 0.96);
  box-shadow: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.35);
  color: #fffdf3;
  content: attr(data-atlas-scope-title);
  font: 700 0.78rem/1.25 var(--font-sans);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.35rem);
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
  white-space: normal;
}

.atlas-matrix-scope-rail-card:hover::after,
.atlas-matrix-scope-rail-card:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.atlas-matrix-scope-rail-card .atlas-matrix-scope-rail-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 1px solid rgba(238, 216, 131, 0.32);
  border-radius: 5px;
  background: rgba(42, 41, 31, 0.58);
  color: #eed883;
  font-size: 1rem;
  opacity: 0.9;
}

.atlas-matrix-scope-rail-card .atlas-matrix-scope-rail-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.atlas-matrix-scope-rail-card .atlas-matrix-scope-rail-copy {
  grid-area: copy;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.atlas-matrix-scope-rail-card strong {
  overflow: hidden;
  font: 800 0.82rem/1.18 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-matrix-scope-rail-card small {
  overflow: hidden;
  color: rgba(255, 251, 234, 0.62);
  font: 600 0.62rem/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-matrix-filter-band {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(238, 216, 131, 0.22);
  background: #101612;
}

.atlas-matrix-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.atlas-matrix-filter label {
  display: grid;
  gap: 0.35rem;
  min-width: min(22rem, 100%);
}

.atlas-matrix-filter label > span {
  color: #eed883;
  font: 800 0.68rem/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atlas-matrix-filter select {
  min-height: 2.45rem;
  padding: 0.45rem 2.2rem 0.45rem 0.7rem;
  border: 1px solid rgba(238, 216, 131, 0.55);
  border-radius: 999px;
  background: #18211b;
  color: #fffdf3;
  font: 700 0.8rem/1.2 var(--font-sans);
}

.atlas-matrix-filter > strong {
  color: #eed883;
  font: 800 0.72rem/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.atlas-matrix-scope-rail-card[hidden] {
  display: none;
}

/* AE deep-link pages use the same Atlas Hero rail treatment as AR detail
   pages, but expose only the three views that accept the active region filter. */
.atlas-ae-hero-routes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.atlas-ae-hero-routes .atlas-aa-route-rail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atlas-ae-hero-routes[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .atlas-matrix-scope-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .atlas-matrix-scope-rail-card:nth-child(5) {
    border-right: 0;
  }
}

@media (max-width: 640px) {
  .atlas-matrix-hero {
    min-height: calc(100svh - 60px);
    align-items: flex-start;
  }

  .atlas-matrix-hero-copy {
    width: calc(100% - 2rem);
    margin: 0 1rem;
    padding-top: 3.2rem;
    padding-bottom: 23rem;
  }

  .atlas-matrix-hero h1 {
    font-size: 3.4rem;
  }

  .atlas-matrix-hero-copy > p {
    font-size: 0.94rem;
  }

  .atlas-matrix-hero-feature {
    top: auto;
    right: 1rem;
    bottom: 10rem;
    width: min(320px, calc(100% - 2rem));
    transform: none;
  }

  .atlas-matrix-scope-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .atlas-matrix-scope-rail-card {
    min-height: 92px;
  }

  .atlas-matrix-scope-rail-card:nth-child(5) {
    border-right: 1px solid rgba(238, 216, 131, 0.18);
  }

  .atlas-matrix-scope-rail-card:nth-child(even) {
    border-right: 0;
  }

  .atlas-matrix-hero-copy {
    padding-bottom: 20rem;
  }

  .atlas-ae-hero-routes .atlas-aa-route-rail {
    grid-template-columns: 1fr;
  }
}

/* Dark Matrix table treatment for AB child-entry cards. */
.atlas-book-page {
  background: #0c100e;
  color: #fffbea;
}

.atlas-book-page .atlas-book-browser {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  box-sizing: border-box;
  padding-top: 1.5rem;
  padding-right: clamp(1rem, 6vw, 6rem);
  padding-left: clamp(1rem, 6vw, 6rem);
  background:
    linear-gradient(rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    rgba(12, 16, 14, 0.88);
  background-size: 52px 52px, 52px 52px, auto;
  border-top: 2px solid #9c2525;
  backdrop-filter: blur(10px);
}

.atlas-book-page .atlas-book-browser-head {
  border-bottom-color: rgba(238, 216, 131, 0.42);
}

.atlas-book-page .atlas-book-browser-head > div > span,
.atlas-book-page .atlas-book-browser-head > strong {
  color: #eed883;
}

.atlas-book-page .atlas-book-browser-head {
  align-items: center;
}

.atlas-book-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: min(25rem, 70vw);
  color: #fffdf3;
  font: 800 0.72rem/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.atlas-book-filter-icon {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid rgba(238, 216, 131, 0.58);
  border-radius: 50%;
  color: #eed883;
  font-size: 1rem;
}

.atlas-book-filter select {
  min-width: 13rem;
  padding: 0.55rem 2rem 0.55rem 0.7rem;
  border: 1px solid rgba(238, 216, 131, 0.52);
  border-radius: 999px;
  outline: none;
  background: #18221a;
  color: #fffdf3;
  font: 700 0.72rem/1 var(--font-sans);
  cursor: pointer;
}

.atlas-book-filter select:focus-visible {
  border-color: #eed883;
  box-shadow: 0 0 0 3px rgba(238, 216, 131, 0.18);
}

.atlas-book-page .atlas-book-entry-grid {
  border-left-color: rgba(239, 221, 157, 0.2);
  background:
    linear-gradient(rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    rgba(12, 16, 14, 0.72);
  background-size: 52px 52px, 52px 52px, auto;
}

.atlas-book-page .atlas-book-entry-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "icon copy";
  align-items: center;
  align-content: center;
  row-gap: 0;
  min-height: 160px;
  padding: 1.65rem 1.5rem;
  border-right-color: rgba(239, 221, 157, 0.2);
  border-bottom-color: rgba(239, 221, 157, 0.2);
  background: rgba(12, 16, 14, 0.72);
  color: #fffbea;
}

.atlas-book-page .atlas-book-entry-card:hover,
.atlas-book-page .atlas-book-entry-card:focus-visible {
  background: rgba(228, 196, 99, 0.13);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.atlas-book-page .atlas-book-entry-icon {
  border-color: rgba(238, 216, 131, 0.42);
  transform: translateY(0.375rem);
}

.atlas-book-page .atlas-book-entry-copy strong {
  color: #fffdf3;
}

.atlas-book-page .atlas-book-entry-copy small {
  color: rgba(255, 251, 234, 0.62);
}

.atlas-book-page .atlas-book-entry-copy {
  transform: translateY(0.375rem);
}

.atlas-book-page .atlas-book-entry-title {
  position: relative;
  grid-area: title;
  min-width: 0;
  color: #eed883;
  font: 800 1.15rem/1.15 var(--font-serif);
}

.atlas-book-page .atlas-book-entry-card[hidden] {
  display: none !important;
}

.atlas-map-service-button {
  --atlas-service-gold: #d6b85c;
  --atlas-service-ink: #07120d;
  --atlas-service-jade: #143323;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 27px;
  max-width: calc(100vw - 2rem);
  padding: 2px 0.52rem 2px 3px;
  border: 1px solid rgba(214, 184, 92, 0.82);
  border-radius: 999px;
  background:
    radial-gradient(circle at 21px 50%, rgba(214, 184, 92, 0.18), transparent 25px),
    linear-gradient(135deg, rgba(20, 51, 35, 0.98), rgba(7, 18, 13, 0.98));
  box-shadow:
    0 0 0 1px rgba(6, 12, 9, 0.9),
    0 8px 18px rgba(28, 20, 9, 0.18),
    0 0 16px rgba(214, 184, 92, 0.16);
  color: #fff4bf;
  font: 800 0.76rem/1.2 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.atlas-map-service-button:hover,
.atlas-map-service-button:focus-visible {
  color: #fff9d6;
  border-color: #f2d979;
  box-shadow:
    0 0 0 1px rgba(6, 12, 9, 0.9),
    0 10px 22px rgba(28, 20, 9, 0.22),
    0 0 20px rgba(242, 217, 121, 0.28);
}

.atlas-map-service-medallion {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255, 233, 153, 0.74);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe9a0, #c89536 62%, #5c3214);
  box-shadow: inset 0 0 0 1px rgba(48, 26, 12, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #1a170b;
  flex: 0 0 auto;
}

.atlas-map-service-medallion svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.atlas-map-service-medallion svg path:last-child {
  fill: rgba(26, 23, 11, 0.22);
}

.atlas-map-service-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-map-service-medallion.atlas-map-title-compass {
  width: 54px;
  height: 54px;
  border-width: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(48, 26, 12, 0.55),
    0 4px 12px rgba(60, 42, 16, 0.24);
}

.atlas-map-service-medallion.atlas-map-title-compass svg {
  width: 39px;
  height: 39px;
  stroke-width: 1.45;
}

.atlas-ab-view-switch {
  position: relative;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 2rem);
  margin: 0 auto 1.15rem;
  padding: 3px;
  transform: translateX(-50%);
  border: 1px solid rgba(91, 75, 54, 0.2);
  border-radius: 6px;
  background: rgba(255, 253, 247, 0.9);
  box-shadow: 0 2px 8px rgba(45, 37, 27, 0.08);
}

.atlas-ab-view-switch a {
  min-width: 78px;
  padding: 0.48rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #655c4d;
  font: 700 0.82rem/1.2 var(--font-sans);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
}

.atlas-ab-view-switch a:hover,
.atlas-ab-view-switch a:focus-visible {
  color: var(--primary-color);
  background: rgba(153, 45, 35, 0.05);
}

.atlas-ab-view-switch a[aria-current="page"] {
  border-color: #8f2f2b;
  color: #fffaf1;
  background: #992f2a;
}

.atlas-map-page .atlas-map-main {
  width: 100%;
  max-width: none;
}

.atlas-map-shell {
  --atlas-canvas-bg: #030905;
  --atlas-land-fill: #143323;
  --atlas-map-fit-width: 1475px;
  position: relative;
  box-sizing: border-box;
  width: min(var(--atlas-map-fit-width, 980px), calc(100vw - 2rem));
  margin: 0 0 0 50%;
  transform: translateX(-50%);
}

.atlas-map-tool {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: var(--atlas-map-aspect, 2.175);
  overflow: hidden;
  border: 6px solid #411d18;
  border-radius: 4px;
  outline: 1px solid rgba(119, 78, 42, 0.72);
  background: #160b09;
  box-shadow:
    0 24px 46px rgba(50, 31, 20, 0.26),
    0 7px 14px rgba(39, 17, 13, 0.22),
    inset 0 0 0 1px rgba(222, 190, 112, 0.88),
    inset 0 0 18px rgba(0, 0, 0, 0.78);
  color: #edf4ef;
  font-family: var(--font-sans);
}

.atlas-map-tool::before,
.atlas-map-tool::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.atlas-map-tool::before {
  z-index: 24;
  inset: 2px;
  border: 1px solid rgba(218, 184, 103, 0.78);
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 2px rgba(44, 18, 14, 0.7),
    0 0 0 1px rgba(95, 46, 31, 0.74);
}

.atlas-map-tool::after {
  z-index: 18;
  inset: 8px;
  border: 1px solid rgba(183, 148, 76, 0.34);
  background:
    linear-gradient(135deg, rgba(226, 190, 104, 0.92) 0 2px, transparent 2px 8px, rgba(174, 132, 65, 0.66) 8px 9px, transparent 9px) top left / 34px 34px no-repeat,
    linear-gradient(225deg, rgba(226, 190, 104, 0.92) 0 2px, transparent 2px 8px, rgba(174, 132, 65, 0.66) 8px 9px, transparent 9px) top right / 34px 34px no-repeat,
    linear-gradient(45deg, rgba(226, 190, 104, 0.92) 0 2px, transparent 2px 8px, rgba(174, 132, 65, 0.66) 8px 9px, transparent 9px) bottom left / 34px 34px no-repeat,
    linear-gradient(315deg, rgba(226, 190, 104, 0.92) 0 2px, transparent 2px 8px, rgba(174, 132, 65, 0.66) 8px 9px, transparent 9px) bottom right / 34px 34px no-repeat;
  box-shadow: inset 0 0 22px rgba(202, 171, 94, 0.08);
}

.atlas-map-viewport {
  position: absolute;
  z-index: 1;
  inset: 8px;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(216, 190, 129, 0.015) 0 1px, transparent 1px 5px),
    var(--atlas-canvas-bg);
  cursor: grab;
  outline: none;
  touch-action: none;
  user-select: none;
  transition: background-color 160ms ease;
}

.atlas-map-viewport:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(232, 197, 102, 0.82);
}

.atlas-map-viewport.is-dragging {
  cursor: grabbing;
}

.atlas-map-scene,
.atlas-map-host,
.atlas-map-host > svg,
.atlas-map-province-layer,
.atlas-map-prefecture-layer,
.atlas-map-ar-region-layer,
.atlas-map-compact-ae-layer,
.atlas-map-leader-layer,
.atlas-map-marker-layer {
  position: absolute;
}

.atlas-map-host,
.atlas-map-host > svg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.atlas-map-host > svg {
  display: block;
  overflow: visible;
  background: var(--atlas-canvas-bg) !important;
  transition: background-color 160ms ease;
}

.atlas-map-host #export-background {
  fill: var(--atlas-canvas-bg) !important;
  transition: fill 160ms ease;
}

.atlas-map-host #province-layer .province,
.atlas-map-host #province-layer path[data-adcode] {
  fill: var(--atlas-land-fill) !important;
  transition: fill 180ms ease;
}

.atlas-map-host #m1-ingest-markers,
.atlas-map-host #grid-layer,
.atlas-map-host #export-frame,
.atlas-map-host #atlas-layer circle.apoint {
  display: none !important;
}

.atlas-map-host [data-ae] {
  cursor: pointer;
  transition: opacity 150ms ease, filter 150ms ease;
}

.atlas-map-host [data-ae].m1-selected,
.atlas-map-host [data-ae].m1-hovered {
  filter: brightness(1.32) saturate(1.25) drop-shadow(0 0 5px rgba(240, 212, 131, 0.92));
}

.atlas-map-host [data-ae].m1-hovered {
  opacity: 1 !important;
}

.atlas-map-host [data-ae].m1-muted {
  opacity: 0.38 !important;
  filter: saturate(0.62) brightness(0.82);
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host #atlas-layer [data-ae].m1-muted {
  opacity: 0.2 !important;
  filter: grayscale(0.82) saturate(0.34) brightness(0.7);
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host #atlas-layer [data-ae].m1-hovered {
  opacity: 1 !important;
  filter: none;
}

.atlas-map-host .atlas-natural-area-source,
.atlas-map-host .atlas-natural-ridge-source,
.atlas-map-host .mountain-range,
.atlas-map-host #m2-create_AB-terrain,
.atlas-map-host .terrain-feature {
  display: none !important;
  opacity: 0 !important;
}

.atlas-map-host .atlas-natural-area-fill {
  fill: rgba(218, 170, 80, 0.05);
  stroke: none;
  pointer-events: all;
  transition: fill 220ms ease;
}

.atlas-map-host .atlas-natural-area-contour {
  fill: none;
  stroke: rgba(215, 175, 95, 0.42);
  stroke-width: 1.0;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 220ms ease, stroke-width 220ms ease, filter 220ms ease;
}

.atlas-map-host .atlas-natural-plateau-inner-contour {
  fill: none;
  stroke: rgba(215, 175, 95, 0.20);
  stroke-width: 0.85;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.atlas-map-host .atlas-natural-basin-fill {
  fill: rgba(35, 75, 70, 0.06);
  stroke: none;
  pointer-events: all;
  transition: fill 220ms ease;
}

.atlas-map-host .atlas-natural-basin-contour {
  fill: none;
  stroke: rgba(100, 155, 145, 0.40);
  stroke-width: 1.0;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 220ms ease, stroke-width 220ms ease, filter 220ms ease;
}

.atlas-map-host .atlas-natural-basin-inner-contour {
  fill: none;
  stroke: rgba(100, 155, 145, 0.18);
  stroke-width: 0.85;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-area-fill,
.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-basin-fill {
  fill: rgba(255, 239, 139, 0.22);
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-area-contour,
.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-basin-contour {
  stroke: rgba(255, 252, 158, 1);
  stroke-width: 3.2;
  stroke-dasharray: none;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 204, 1))
    drop-shadow(0 0 6px rgba(255, 225, 90, 0.72))
    drop-shadow(0 0 12px rgba(255, 194, 54, 0.3));
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .apoly:not(.atlas-natural-area-source) {
  fill: rgba(255, 239, 139, 0.16) !important;
  stroke: rgba(255, 252, 158, 1) !important;
  stroke-width: 3.2 !important;
  stroke-dasharray: none !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 204, 0.96))
    drop-shadow(0 0 10px rgba(255, 213, 75, 0.48));
}

.atlas-map-host .atlas-natural-ridge-shadow,
.atlas-map-host .atlas-natural-ridge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.atlas-map-host .atlas-natural-ridge-shadow {
  stroke: rgba(10, 18, 15, 0.88);
  stroke-width: 4.8;
}

.atlas-map-host .atlas-natural-ridge {
  stroke: rgba(240, 205, 120, 0.95);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px rgba(220, 175, 80, 0.5));
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-ridge-shadow {
  stroke: rgba(255, 211, 82, 0.38);
  stroke-width: 8;
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .atlas-natural-ridge,
.atlas-map-shell[data-target-status="active"] .atlas-map-host [data-ae].m1-hovered > .aline:not(.atlas-natural-ridge-source) {
  stroke: rgba(255, 250, 151, 1) !important;
  stroke-width: 3 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 204, 1))
    drop-shadow(0 0 10px rgba(255, 211, 70, 0.76));
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-source {
  display: none !important;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-shadow,
.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-body,
.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-highlight,
.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-hit,
.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-tower-guide {
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-shadow {
  stroke: rgba(35, 16, 12, 0.94) !important;
  stroke-width: 6.4 !important;
  filter: drop-shadow(0 1px 2px rgba(12, 5, 3, 0.78)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-body {
  stroke: #c76448 !important;
  stroke-width: 4.1 !important;
  filter: drop-shadow(0 0 2px rgba(202, 91, 60, 0.42)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-highlight {
  stroke: rgba(244, 207, 142, 0.92) !important;
  stroke-width: 1.05 !important;
  stroke-dasharray: 5 2.4;
  stroke-linecap: butt;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .is-secondary.atlas-great-wall-shadow {
  stroke-width: 4.4 !important;
  opacity: 0.72;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .is-secondary.atlas-great-wall-body {
  stroke-width: 2.55 !important;
  opacity: 0.78;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .is-secondary.atlas-great-wall-highlight {
  stroke-width: 0.7 !important;
  opacity: 0.64;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-hit {
  stroke: transparent !important;
  stroke-width: 13 !important;
  pointer-events: stroke;
  cursor: pointer;
}

.atlas-map-host #atlas-layer [data-ae="AE51"] > .atlas-great-wall-tower-guide {
  stroke: transparent !important;
  stroke-width: 1.15 !important;
  filter: none !important;
}

.atlas-map-host .atlas-great-wall-tower-shape {
  fill: #c76448;
  stroke: #ffe0a0;
  stroke-width: 0.86;
  stroke-linejoin: miter;
  filter:
    drop-shadow(0 0.7px 0.6px rgba(24, 9, 5, 0.9))
    drop-shadow(0 0 1px rgba(255, 210, 128, 0.5));
}

.atlas-map-host .atlas-great-wall-tower-opening {
  fill: #2b1510;
  stroke: rgba(255, 219, 151, 0.74);
  stroke-width: 0.34;
}

.atlas-map-host #atlas-layer [data-ae="AE51"].m1-hovered > .atlas-great-wall-shadow,
.atlas-map-host #atlas-layer [data-ae="AE51"].m1-selected > .atlas-great-wall-shadow {
  stroke: rgba(54, 22, 14, 0.98) !important;
  stroke-width: 8 !important;
}

.atlas-map-host #atlas-layer [data-ae="AE51"].m1-hovered > .atlas-great-wall-body,
.atlas-map-host #atlas-layer [data-ae="AE51"].m1-selected > .atlas-great-wall-body {
  stroke: #e57c58 !important;
  stroke-width: 5 !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 184, 116, 0.78))
    drop-shadow(0 0 9px rgba(205, 76, 43, 0.64)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE51"].m1-hovered > .atlas-great-wall-highlight,
.atlas-map-host #atlas-layer [data-ae="AE51"].m1-selected > .atlas-great-wall-highlight {
  stroke: #fff0b8 !important;
  stroke-width: 1.35 !important;
}

.atlas-map-host #atlas-layer [data-ae="AE49"] > .atlas-water-route {
  stroke: #58b6d1 !important;
  stroke-width: 2.35 !important;
  stroke-opacity: 0.94 !important;
  filter:
    drop-shadow(0 0 1px rgba(196, 241, 255, 0.7))
    drop-shadow(0 0 4px rgba(26, 123, 157, 0.48)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE49"].m1-hovered > .atlas-water-route,
.atlas-map-host #atlas-layer [data-ae="AE49"].m1-selected > .atlas-water-route {
  stroke: #a9e8f7 !important;
  stroke-width: 3.35 !important;
  stroke-opacity: 1 !important;
  filter:
    drop-shadow(0 0 3px rgba(213, 248, 255, 0.96))
    drop-shadow(0 0 10px rgba(43, 164, 199, 0.74)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE52"] > .aline {
  stroke: #82958a !important;
  stroke-width: 2.25 !important;
  stroke-opacity: 0.94 !important;
  filter:
    drop-shadow(0 0 1px rgba(205, 220, 211, 0.6))
    drop-shadow(0 0 4px rgba(56, 86, 70, 0.48)) !important;
}

.atlas-map-host #atlas-layer [data-ae="AE52"].m1-hovered > .aline,
.atlas-map-host #atlas-layer [data-ae="AE52"].m1-selected > .aline {
  stroke: #c3d0c8 !important;
  stroke-width: 3.2 !important;
  stroke-opacity: 1 !important;
  filter:
    drop-shadow(0 0 3px rgba(230, 239, 233, 0.9))
    drop-shadow(0 0 9px rgba(93, 125, 107, 0.65)) !important;
}

.atlas-map-shell[data-target-status="active"] .atlas-map-host #atlas-layer [data-ae].m1-hovered > circle.apoint {
  display: block !important;
  opacity: 1 !important;
  fill: rgba(255, 249, 150, 0.96) !important;
  stroke: rgba(255, 255, 211, 1) !important;
  stroke-width: 2.4 !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 202, 1))
    drop-shadow(0 0 13px rgba(255, 210, 65, 0.9));
}

.atlas-map-province-layer,
.atlas-map-prefecture-layer,
.atlas-map-ar-region-layer,
.atlas-map-compact-ae-layer,
.atlas-map-leader-layer,
.atlas-map-marker-layer {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.atlas-map-province-layer {
  z-index: 6;
  opacity: 0;
  transition: opacity 100ms ease;
}

.atlas-map-prefecture-layer {
  z-index: 2;
  opacity: 0;
  transition: opacity 100ms ease;
}

.atlas-map-ar-region-layer {
  z-index: 8;
  opacity: 0;
  transition: opacity 100ms ease;
}

.atlas-map-province-layer.is-visible,
.atlas-map-ar-region-layer.is-visible {
  opacity: 1;
}

.atlas-map-leader-layer {
  z-index: 3;
}

.atlas-map-leader {
  opacity: 0;
  transition: opacity 140ms ease;
}

.atlas-map-leader.is-visible.is-persistent {
  opacity: 0.4;
}

.atlas-map-leader.is-visible.is-active {
  opacity: 1;
}

.atlas-map-leader.is-camera-hidden {
  opacity: 0 !important;
}

.atlas-map-leader-path {
  fill: none;
  stroke: rgba(224, 190, 105, 0.72);
  stroke-width: 1;
  stroke-dasharray: 2 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

.atlas-map-leader-anchor {
  fill: #d74337;
  stroke: rgba(255, 225, 147, 0.8);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(235, 67, 54, 0.9));
}

.atlas-map-province-layer.is-visible {
  opacity: 1;
}

.atlas-map-province-layer.has-ar-t1-priority {
  z-index: 6000 !important;
}

.atlas-map-prefecture-layer.is-visible {
  opacity: 1;
}

.atlas-map-province-name {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  color: #858f89;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(149, 164, 154, 0.7);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-shadow: 0 1px 0 #020604, 0 0 3px rgba(2, 6, 4, 0.9);
}

.atlas-map-province-control {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
}

.atlas-map-province-layer.is-visible .atlas-map-province-control {
  pointer-events: auto !important;
}

.atlas-map-province-control:hover,
.atlas-map-province-control:focus-visible {
  color: #f0d483;
  text-decoration-color: #f0d483;
  outline: none;
}

.atlas-map-province-name.is-ar-t1-target {
  z-index: 5000 !important;
  min-width: 0;
  padding: 1px 5px;
  border: 1px solid #f6dc82;
  border-radius: 999px;
  color: #fff7d0;
  background: rgba(20, 12, 7, 0.96);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 0 #020604, 0 0 4px rgba(2, 6, 4, 0.95);
  box-shadow:
    0 0 0 2px rgba(240, 212, 131, 0.18),
    0 0 14px rgba(240, 212, 131, 0.72),
    0 4px 10px rgba(0, 0, 0, 0.72);
}

.atlas-map-province-name.is-ar-t1-target:hover,
.atlas-map-province-name.is-ar-t1-target:focus-visible {
  color: #fffbe8;
  border-color: #fff3b2;
  outline: none;
}

.atlas-map-host #province-layer [data-ar-selected] {
  fill: rgba(206, 153, 64, 0.72) !important;
  stroke: #f6dc82 !important;
  stroke-width: 2.8 !important;
  stroke-opacity: 1 !important;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px rgba(240, 212, 131, 0.95))
    drop-shadow(0 0 10px rgba(240, 212, 131, 0.72));
}

.atlas-map-host #province-layer .atlas-ar-selected-outline {
  fill: none !important;
  stroke: #f6dc82 !important;
  stroke-width: 3.2 !important;
  stroke-opacity: 1 !important;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  pointer-events: none !important;
  filter:
    drop-shadow(0 0 4px rgba(240, 212, 131, 0.98))
    drop-shadow(0 0 11px rgba(240, 212, 131, 0.78));
}

.atlas-map-ar-region-marker {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: auto;
}

.atlas-map-ar-region-layer.is-visible .atlas-map-ar-region-marker,
.atlas-map-ar-region-layer.is-visible .atlas-map-ar-region-unit {
  pointer-events: auto !important;
}

.atlas-map-ar-region-unit {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #f0d483;
  text-decoration: none;
  outline: none;
  pointer-events: auto;
}

.atlas-map-ar-region-dot {
  position: absolute;
  inset: 5px;
  display: block;
  border: 1px solid rgba(255, 235, 165, 0.95);
  border-radius: 50%;
  background: #c98d3c;
  box-shadow: 0 0 0 2px rgba(16, 30, 24, 0.8), 0 0 8px rgba(240, 212, 131, 0.75);
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.atlas-map-ar-region-title {
  position: absolute;
  top: 14px;
  left: 50%;
  display: none;
  max-width: 150px;
  transform: translateX(-50%);
  color: rgba(226, 235, 228, 0.86);
  font: 600 10px/1.15 var(--font-sans);
  text-align: center;
  text-shadow: 0 1px 2px #020604, 0 0 4px #020604;
  white-space: nowrap;
  pointer-events: none;
}

.atlas-map-ar-region-marker.is-label-visible .atlas-map-ar-region-title {
  display: block;
}

.atlas-map-ar-region-marker.is-capital-marker .atlas-map-ar-region-dot {
  border-color: #ffe7bd;
  background: #d74337;
  box-shadow:
    0 0 0 2px rgba(16, 30, 24, 0.88),
    0 0 8px rgba(255, 92, 72, 0.98),
    0 0 15px rgba(215, 67, 55, 0.78);
}

.atlas-map-ar-region-unit:hover .atlas-map-ar-region-dot,
.atlas-map-ar-region-unit:focus-visible .atlas-map-ar-region-dot,
.atlas-map-ar-region-marker.is-spotlight .atlas-map-ar-region-dot {
  transform: scale(1.45);
  filter: brightness(1.18);
  box-shadow: 0 0 0 2px rgba(16, 30, 24, 0.8), 0 0 12px rgba(240, 212, 131, 1);
}

.atlas-map-ar-region-marker.is-selected-ar-host .atlas-map-ar-region-dot {
  transform: scale(2);
}

.atlas-map-prefecture-name {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  color: rgba(185, 199, 190, 0.5);
  font-size: 10px;
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 1px 0 #020604, 0 0 2px rgba(2, 6, 4, 0.82);
}

.atlas-map-prefecture-name.is-hidden {
  visibility: hidden;
}

.atlas-map-compact-ae-layer {
  z-index: 3;
  opacity: 0;
  transition: opacity 120ms ease;
}

.atlas-map-compact-ae-layer.is-visible.is-ready {
  opacity: 1;
}

.atlas-map-compact-ae-layer.is-settling {
  pointer-events: none;
}

.atlas-map-compact-ae {
  position: absolute;
  width: 0;
  height: 0;
}

.atlas-map-compact-ae[hidden] {
  display: none;
}

.atlas-map-compact-ae-trigger {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: none;
}

.atlas-map-compact-ae.is-cluster-lead .atlas-map-compact-ae-trigger {
  pointer-events: auto;
}

.atlas-map-compact-ae-icon {
  display: block;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid rgba(231, 199, 112, 0.7);
  border-radius: 2px;
  background: #15231a;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(18, 10, 6, 0.82),
    0 1px 3px rgba(0, 0, 0, 0.8);
  opacity: 0.78;
  transition: opacity 100ms ease, filter 100ms ease, box-shadow 100ms ease;
}

.atlas-map-compact-ae-trigger:hover .atlas-map-compact-ae-icon,
.atlas-map-compact-ae-trigger:focus-visible .atlas-map-compact-ae-icon,
.atlas-map-compact-ae.is-preview-open .atlas-map-compact-ae-icon {
  opacity: 1;
  filter: brightness(1.2) saturate(1.12);
  box-shadow:
    0 0 0 1px #f0d483,
    0 0 7px rgba(240, 212, 131, 0.76);
}

.atlas-map-compact-ae-trigger:focus-visible {
  outline: 1px solid #f0d483;
  outline-offset: 1px;
}

.has-map-spotlight .atlas-map-compact-ae-layer {
  opacity: 0.24;
}

.atlas-map-marker-layer {
  z-index: 4;
  opacity: 0;
}

.atlas-map-marker-layer.is-ready {
  opacity: 1;
}

.atlas-map-marker {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: auto;
  transition: opacity 150ms ease, filter 150ms ease;
}

.has-map-spotlight .atlas-map-marker:not(.is-spotlight):not(.is-selected) {
  opacity: 1;
  filter: brightness(0.48) saturate(0.5) contrast(0.92);
}

.atlas-map-shell.is-home-map.has-map-spotlight .atlas-map-marker:not(.is-spotlight):not(.is-selected) {
  opacity: 1;
  filter: none;
}

/* AB book maps keep every entry marker readable while a popup is open. */
.atlas-map-shell[data-map-book^="AT"].has-map-spotlight .atlas-map-marker:not(.is-spotlight):not(.is-selected) {
  opacity: 1;
  filter: none;
}

.atlas-map-marker.is-spotlight,
.atlas-map-marker.is-selected {
  opacity: 1;
  filter: none;
}

.atlas-map-marker-unit {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.atlas-map-marker-icon {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 1px);
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  transform: translateX(-50%);
  border: 1px solid rgba(235, 206, 117, 0.72);
  border-radius: 50%;
  object-fit: cover;
  background: #0a120e;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

.atlas-map-marker.is-label-only .atlas-map-marker-icon {
  display: none;
}

.atlas-map-marker.is-camera-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

.atlas-map-marker-fallback {
  display: grid;
  place-items: center;
  color: #f0d483;
  font-size: 8px;
  font-weight: 800;
}

.atlas-map-marker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  max-width: 180px;
  padding: 3px 10px 4px 8px;
  overflow: hidden;
  border: 1px solid rgba(133, 169, 153, 0.43);
  border-radius: 999px;
  color: #f2f6f3;
  background: #040e0a;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.56);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

.atlas-map-marker-dot {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #e43e3a;
  box-shadow: 0 0 0 2px rgba(228, 62, 58, 0.18), 0 0 7px 2px rgba(255, 58, 53, 0.82);
}

.atlas-map-marker[data-ae="AE49"] .atlas-map-marker-dot {
  background: #58b6d1;
  box-shadow: 0 0 0 2px rgba(88, 182, 209, 0.2), 0 0 7px 2px rgba(88, 182, 209, 0.8);
}

.atlas-map-marker[data-ae="AE51"] .atlas-map-marker-dot {
  border-radius: 1px;
  background: #d16b4d;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgba(209, 107, 77, 0.2), 0 0 7px 2px rgba(209, 107, 77, 0.82);
}

.atlas-map-marker[data-ae="AE52"] .atlas-map-marker-dot {
  background: #82958a;
  box-shadow: 0 0 0 2px rgba(130, 149, 138, 0.2), 0 0 7px 2px rgba(130, 149, 138, 0.78);
}

.atlas-map-marker-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-map-shell.is-home-map .atlas-map-marker-icon {
  bottom: calc(100% + 4px);
  width: 30px;
  height: 30px;
  border-color: rgba(232, 193, 98, 0.76);
  border-radius: 8px;
  box-shadow:
    0 0 0 2px rgba(91, 43, 29, 0.72),
    0 5px 12px rgba(0, 0, 0, 0.62);
}

.atlas-map-shell.is-home-map .atlas-map-marker-label {
  min-height: 28px;
  max-width: 210px;
  gap: 7px;
  justify-content: center;
  padding: 4px 10px;
  border-color: rgba(221, 184, 94, 0.62);
  background: #12100c;
}

.atlas-map-shell.is-home-map .atlas-map-marker-label-text {
  display: block;
  flex: 0 1 auto;
  white-space: nowrap;
  text-align: center;
}

.lang-en .atlas-map-marker-unit {
  white-space: normal;
}

.lang-en .atlas-map-marker-label {
  display: flex;
  width: max-content;
  min-width: 52px;
  max-width: 158px;
  font-size: 11px;
  overflow-wrap: normal;
  word-break: normal;
  text-overflow: clip;
}

.lang-en .atlas-map-marker-label-text {
  display: -webkit-box;
  min-width: min-content;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.atlas-map-marker-unit:hover .atlas-map-marker-icon,
.atlas-map-marker-unit:focus-visible .atlas-map-marker-icon,
.atlas-map-marker.is-spotlight .atlas-map-marker-icon,
.atlas-map-marker.is-touch-armed .atlas-map-marker-icon,
.atlas-map-marker.is-selected .atlas-map-marker-icon {
  border-color: #f0d483;
  box-shadow: 0 0 0 2px rgba(240, 212, 131, 0.2), 0 2px 8px rgba(0, 0, 0, 0.78);
}

.atlas-map-marker-unit:hover .atlas-map-marker-label,
.atlas-map-marker-unit:focus-visible .atlas-map-marker-label,
.atlas-map-marker.is-spotlight .atlas-map-marker-label,
.atlas-map-marker.is-touch-armed .atlas-map-marker-label,
.atlas-map-marker.is-selected .atlas-map-marker-label {
  border-color: rgba(240, 212, 131, 0.78);
  background: #0c1811;
}

.atlas-map-marker-unit:focus-visible {
  outline: 2px solid #f0d483;
  outline-offset: 4px;
}

.atlas-map-marker:hover,
.atlas-map-marker:focus-within,
.atlas-map-marker.is-spotlight,
.atlas-map-marker.is-selected,
.atlas-map-marker.is-touch-armed {
  z-index: 2000 !important;
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) {
  opacity: 0.42;
  filter: grayscale(0.9) saturate(0.26) brightness(0.68);
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-icon {
  opacity: 0.34;
  border-color: rgba(142, 151, 133, 0.32);
  filter: grayscale(1) brightness(0.58);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-label {
  border-color: rgba(133, 169, 153, 0.18);
  color: rgba(232, 236, 229, 0.58);
  background: rgba(4, 14, 10, 0.72);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
  text-shadow: none;
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-dot {
  opacity: 0.48;
  box-shadow: 0 0 0 2px rgba(96, 72, 60, 0.12), 0 0 4px rgba(176, 116, 91, 0.32);
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-leader.is-visible:not(.is-active) {
  opacity: 0.14;
}

.atlas-map-shell[data-target-status="active"][data-target-ae] .atlas-map-marker.is-spotlight {
  opacity: 1;
  filter: none;
}

/* Keep the full AB scope readable even when a deep-link target is active. */
.atlas-map-shell[data-map-book^="AT"][data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) {
  opacity: 1;
  filter: none;
}

.atlas-map-shell[data-map-book^="AT"][data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-icon {
  opacity: 1;
  border-color: rgba(235, 206, 117, 0.72);
  filter: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

.atlas-map-shell[data-map-book^="AT"][data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-label {
  border-color: rgba(133, 169, 153, 0.43);
  color: #f2f6f3;
  background: #040e0a;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.56);
  text-shadow: 0 1px 2px #000;
}

.atlas-map-shell[data-map-book^="AT"][data-target-status="active"][data-target-ae] .atlas-map-marker:not(.is-spotlight):not(.is-selected) .atlas-map-marker-dot {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(228, 62, 58, 0.18), 0 0 7px 2px rgba(255, 58, 53, 0.82);
}

.atlas-map-control-strip {
  position: absolute;
  z-index: 37;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  max-width: calc(100% - 36px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.atlas-map-search {
  position: relative;
  z-index: auto;
  display: block;
  width: 222px;
  min-width: 210px;
  color: #edf2ee;
  font-family: var(--font-sans);
}

.atlas-map-search-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 38px 0 10px;
  border: 1px solid rgba(205, 166, 85, 0.72);
  border-radius: 4px 0 0 4px;
  color: #f0e7ce;
  background: rgba(24, 13, 11, 0.96);
  box-shadow: none;
  font: 750 0.78rem/1 var(--font-sans);
  letter-spacing: 0;
  outline: none;
}

.atlas-map-search-input::placeholder {
  color: rgba(232, 221, 195, 0.62);
}

.atlas-map-search-input:focus {
  border-color: rgba(240, 212, 131, 0.94);
  background: rgba(48, 29, 23, 0.98);
}

.atlas-map-search-affordance {
  position: absolute;
  top: 5px;
  right: 4px;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  pointer-events: none;
}

.atlas-map-search-affordance::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(240, 212, 131, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 212, 131, 0.22) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(6, 14, 10, 0.84), rgba(49, 31, 23, 0.72));
  box-shadow: inset 0 0 0 1px rgba(7, 16, 12, 0.78);
}

.atlas-map-search-glyph {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 2px solid #f0d483;
  border-radius: 50%;
  opacity: 0.82;
}

.atlas-map-search-glyph::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: #f0d483;
  transform: rotate(45deg);
}

.atlas-map-search:focus-within .atlas-map-search-affordance::before,
.atlas-map-shell.has-map-search-results .atlas-map-search-affordance::before {
  border-color: rgba(240, 212, 131, 0.76);
  box-shadow:
    0 0 10px rgba(240, 212, 131, 0.18),
    inset 0 0 0 1px rgba(7, 16, 12, 0.78);
}

.atlas-map-search:focus-within .atlas-map-search-glyph,
.atlas-map-shell.has-map-search-results .atlas-map-search-glyph {
  opacity: 1;
}

.atlas-map-search-results {
  display: grid;
  gap: 3px;
  max-height: min(310px, calc(100vh - 170px));
  margin-top: 2px;
  padding: 5px;
  overflow-y: auto;
  border: 1px solid rgba(205, 166, 85, 0.56);
  border-radius: 5px;
  background: rgba(7, 15, 11, 0.98);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(237, 205, 124, 0.06);
}

.atlas-map-search-results[hidden] {
  display: none;
}

.atlas-map-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 38px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #cbd5cf;
  text-decoration: none;
}

.atlas-map-search-result:hover,
.atlas-map-search-result:focus-visible {
  border-color: rgba(134, 164, 150, 0.36);
  color: #fff1bd;
  background: rgba(51, 65, 58, 0.62);
  outline: none;
}

.atlas-map-search-result-id {
  display: inline-grid;
  min-width: 38px;
  min-height: 20px;
  place-items: center;
  padding: 2px 7px;
  box-sizing: border-box;
  border: 1px solid rgba(216, 174, 82, 0.62);
  border-radius: 999px;
  color: #ebc76d;
  background: rgba(101, 40, 29, 0.5);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.atlas-map-search-result-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  text-align: left;
  justify-items: start;
}

.atlas-map-search-result-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  overflow: visible;
  text-align: left;
  text-overflow: clip;
  white-space: normal;
}

.atlas-map-search-result-copy strong,
.atlas-map-search-result-copy > span:not(.atlas-map-search-result-heading),
.atlas-map-search-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-map-search-result-copy strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 750;
}

.atlas-map-search-result-heading strong {
  flex: 0 1 auto;
}

.atlas-map-search-result-heading .atlas-map-search-result-id {
  flex: 0 0 auto;
  order: 2;
}

.atlas-map-search-result-copy > span:not(.atlas-map-search-result-heading),
.atlas-map-search-empty {
  color: #9fb2a7;
  font-size: 11px;
  line-height: 1.25;
}

.atlas-map-search-empty {
  margin: 0;
  padding: 8px 9px;
}

.atlas-map-book-menu {
  position: absolute;
  z-index: 36;
  top: 18px;
  left: 18px;
  width: min(250px, calc(100% - 36px));
  color: #edf2ee;
  font-family: var(--font-sans);
}

.atlas-map-book-menu summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px auto;
  gap: 8px;
  min-height: 38px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(205, 166, 85, 0.68);
  border-radius: 5px;
  background: rgba(29, 17, 14, 0.96);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(237, 205, 124, 0.08);
  cursor: pointer;
  list-style: none;
}

.atlas-map-book-menu summary::-webkit-details-marker {
  display: none;
}

.atlas-map-book-menu summary::after {
  order: 2;
  width: 7px;
  height: 7px;
  border-right: 2px solid #d9b765;
  border-bottom: 2px solid #d9b765;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 120ms ease;
}

.atlas-map-book-menu[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.atlas-map-book-menu summary:hover,
.atlas-map-book-menu summary:focus-visible {
  border-color: rgba(240, 212, 131, 0.94);
  background: rgba(48, 29, 23, 0.98);
}

.atlas-map-book-menu summary:focus-visible {
  outline: 2px solid rgba(240, 212, 131, 0.88);
  outline-offset: 3px;
}

.atlas-map-book-menu-id {
  display: inline-grid;
  min-width: 36px;
  min-height: 20px;
  place-items: center;
  padding: 2px 7px;
  box-sizing: border-box;
  border: 1px solid rgba(216, 174, 82, 0.62);
  border-radius: 999px;
  color: #ebc76d;
  background: rgba(101, 40, 29, 0.5);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.atlas-map-book-menu summary > .atlas-map-book-menu-id {
  order: 3;
}

.atlas-map-book-menu-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.atlas-map-book-menu-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(222, 185, 96, 0.58);
  border-radius: 3px;
  color: #e9c86d;
  background: #0a130e;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  font-size: 13px;
}

.atlas-map-book-menu-icon .atlas-book-icon-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: cover;
}

.atlas-map-book-menu-icon .atlas-map-book-menu-compass {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
}

.atlas-map-book-menu-icon .atlas-map-book-menu-compass svg {
  width: 17px;
  height: 17px;
}

.atlas-map-book-menu-home-glyph {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #f0cf76;
  background: radial-gradient(circle at 50% 45%, rgba(146, 56, 39, 0.8), rgba(38, 22, 16, 0.94));
  font: 800 11px/1 var(--font-serif);
  letter-spacing: 0;
}

.atlas-map-book-menu-current {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-map-book-menu-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-map-book-menu nav {
  position: static;
  inset: auto;
  z-index: auto;
  display: grid;
  gap: 2px;
  width: 100%;
  max-height: min(390px, calc(100vh - 180px));
  margin-top: 6px;
  padding: 5px;
  box-sizing: border-box;
  overflow-y: auto;
  border: 1px solid rgba(205, 166, 85, 0.56);
  border-radius: 5px;
  background: rgba(7, 15, 11, 0.98);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.62),
    inset 0 0 0 1px rgba(237, 205, 124, 0.06);
}

.atlas-map-book-menu nav a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 34px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #cbd5cf;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-decoration: none;
}

.atlas-map-book-menu nav a[hidden] {
  display: none;
}

.atlas-map-book-menu nav a.atlas-map-book-menu-child {
  width: calc(100% - 15px);
  margin-left: 15px;
}

.atlas-map-book-menu nav a.atlas-map-book-menu-child::before {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 7px;
  height: 12px;
  border-bottom: 1px solid rgba(202, 169, 91, 0.36);
  border-left: 1px solid rgba(202, 169, 91, 0.36);
  content: "";
  transform: translateY(-65%);
  pointer-events: none;
}

.atlas-map-book-menu nav a:hover,
.atlas-map-book-menu nav a:focus-visible {
  border-color: rgba(134, 164, 150, 0.36);
  color: #fff1bd;
  background: rgba(51, 65, 58, 0.62);
  outline: none;
}

.atlas-map-book-menu nav a[aria-current="page"] {
  border-color: rgba(222, 178, 84, 0.54);
  color: #fff4c6;
  background: rgba(110, 40, 30, 0.48);
  box-shadow: inset 3px 0 0 #c6483d;
}

.atlas-map-book-menu nav a[aria-current="page"] .atlas-map-book-menu-id {
  border-color: rgba(237, 197, 104, 0.86);
  color: #fff1b3;
  background: rgba(142, 54, 38, 0.66);
}

.atlas-map-book-menu nav a[aria-disabled="true"] {
  cursor: default;
}

.atlas-map-book-menu nav a.is-map-parent {
  border-color: rgba(209, 179, 103, 0.42);
  color: #f7e6b2;
  background: rgba(43, 67, 55, 0.5);
  box-shadow: inset 3px 0 0 rgba(206, 173, 91, 0.76);
}

.atlas-map-book-menu nav a.is-map-parent .atlas-map-book-menu-id {
  border-color: rgba(225, 193, 112, 0.72);
  color: #ffe7a0;
  background: rgba(87, 75, 42, 0.54);
}

.atlas-map-preview {
  --atlas-preview-pointer-x: 50%;
  position: absolute;
  /* Info-boxes always sit above markers, labels, borders, and map controls. */
  z-index: 10000 !important;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  width: min(410px, calc(100% - 24px));
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(226, 185, 96, 0.82);
  border-radius: 5px;
  color: #edf4ef;
  background: rgba(8, 16, 12, 0.98);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(74, 33, 24, 0.92),
    inset 0 0 0 2px rgba(235, 203, 124, 0.08);
  opacity: 1;
  transform: translate(-50%, -100%);
  transition: opacity 140ms ease, transform 160ms ease;
  pointer-events: auto;
}

.atlas-map-preview[hidden] {
  display: none;
}

.atlas-map-preview-close {
  position: absolute;
  top: 3px;
  right: 5px;
  z-index: 1;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(225, 188, 98, 0.42);
  border-radius: 50%;
  color: rgba(243, 217, 141, 0.82);
  background: rgba(31, 20, 14, 0.78);
  font: 700 14px/1 var(--font-sans);
  cursor: pointer;
}

.atlas-map-preview-close:hover,
.atlas-map-preview-close:focus-visible {
  border-color: rgba(240, 212, 131, 0.9);
  color: #fff3c5;
  background: rgba(130, 48, 35, 0.5);
  outline: none;
}

.atlas-map-compact-preview {
  position: absolute;
  /* Info-boxes always sit above markers, labels, borders, and map controls. */
  z-index: 10000 !important;
  display: block;
  width: max-content;
  max-width: min(520px, calc(100% - 24px));
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 110ms ease, transform 110ms ease;
}

.atlas-map-compact-preview[hidden] {
  display: none;
}

.atlas-map-compact-preview-close {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 1;
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(225, 188, 98, 0.42);
  border-radius: 50%;
  color: rgba(243, 217, 141, 0.82);
  background: rgba(31, 20, 14, 0.9);
  font: 700 14px/1 var(--font-sans);
  cursor: pointer;
}

.atlas-map-compact-preview-close:hover,
.atlas-map-compact-preview-close:focus-visible {
  border-color: rgba(240, 212, 131, 0.9);
  color: #fff3c5;
  background: rgba(130, 48, 35, 0.5);
  outline: none;
}

.atlas-map-compact-preview.is-below {
  transform: translate(-50%, -50%);
}

.atlas-map-compact-preview.is-closing {
  opacity: 0;
}

.atlas-map-compact-preview nav {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  width: max-content;
  max-width: min(500px, calc(100vw - 48px));
  max-height: min(260px, 50vh);
  margin: 0;
  padding: 0;
  overflow: visible;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.atlas-map-compact-preview-link {
  position: relative;
  display: flex;
  width: max-content;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: center;
  min-width: 64px;
  color: #f2f6f3;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.atlas-map-compact-preview-link .atlas-map-marker-label {
  width: max-content;
  min-width: 64px;
}

.atlas-map-compact-preview-link .atlas-map-marker-label-text {
  flex: 0 0 auto;
}

.lang-en .atlas-map-compact-preview-link {
  white-space: normal;
}

.lang-en .atlas-map-compact-preview-link .atlas-map-marker-label-text {
  flex: 0 1 auto;
  white-space: normal;
}

.atlas-map-compact-preview-logo {
  position: absolute;
  top: auto;
  bottom: calc(100% - 1px);
  left: 50%;
  display: block;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border: 1px solid rgba(235, 206, 117, 0.72);
  border-radius: 50%;
  object-fit: cover;
  background: #0a120e;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

.atlas-map-compact-preview.is-below .atlas-map-compact-preview-logo {
  top: calc(100% - 1px);
  bottom: auto;
}

.atlas-map-compact-ae.is-preview-open .atlas-map-compact-ae-icon {
  opacity: 0;
  filter: none;
  box-shadow: none;
}

.atlas-map-compact-preview-link:hover .atlas-map-compact-preview-logo,
.atlas-map-compact-preview-link:focus-visible .atlas-map-compact-preview-logo {
  border-color: #f0d483;
  box-shadow: 0 0 0 2px rgba(240, 212, 131, 0.2), 0 2px 8px rgba(0, 0, 0, 0.78);
}

.atlas-map-compact-preview-link:hover .atlas-map-marker-label,
.atlas-map-compact-preview-link:focus-visible .atlas-map-marker-label {
  border-color: rgba(240, 212, 131, 0.78);
  background: rgba(12, 24, 17, 0.96);
}

.atlas-map-compact-preview-link:focus-visible {
  outline: 2px solid #f0d483;
  outline-offset: 3px;
}

.atlas-map-compact-preview-link[data-map-book-target="AE49"] .atlas-map-marker-dot {
  background: #58b6d1;
  box-shadow: 0 0 0 2px rgba(88, 182, 209, 0.2), 0 0 7px 2px rgba(88, 182, 209, 0.8);
}

.atlas-map-compact-preview-link[data-map-book-target="AE51"] .atlas-map-marker-dot {
  border-radius: 1px;
  background: #d16b4d;
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgba(209, 107, 77, 0.2), 0 0 7px 2px rgba(209, 107, 77, 0.82);
}

.atlas-map-compact-preview-link[data-map-book-target="AE52"] .atlas-map-marker-dot {
  background: #82958a;
  box-shadow: 0 0 0 2px rgba(130, 149, 138, 0.2), 0 0 7px 2px rgba(130, 149, 138, 0.78);
}

.atlas-map-shell[data-target-status="active"] .atlas-map-preview {
  pointer-events: auto;
  cursor: pointer;
}

.atlas-map-preview.is-below {
  transform: translate(-50%, 0);
}

.atlas-map-preview.is-entering,
.atlas-map-preview.is-closing {
  opacity: 0;
  transform: translate(-50%, calc(-100% - 5px));
}

.atlas-map-preview.is-below.is-entering,
.atlas-map-preview.is-below.is-closing {
  transform: translate(-50%, 5px);
}

.atlas-map-preview.is-switching .atlas-map-preview-banner-frame,
.atlas-map-preview.is-switching .atlas-map-preview-copy {
  animation: atlas-map-preview-switch 180ms ease;
}

@keyframes atlas-map-preview-switch {
  0% { opacity: 0.2; transform: translateY(3px); }
  100% { opacity: 1; transform: translateY(0); }
}

.atlas-map-preview::before {
  position: absolute;
  bottom: -8px;
  left: var(--atlas-preview-pointer-x);
  width: 0;
  height: 0;
  border-top: 8px solid rgba(226, 185, 96, 0.9);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.atlas-map-preview.is-below::before {
  top: -8px;
  bottom: auto;
  border-top: 0;
  border-bottom: 8px solid rgba(226, 185, 96, 0.9);
}

.atlas-map-preview-banner-frame {
  position: relative;
  display: block;
  width: 180px;
  height: 90px;
  overflow: hidden;
  border: 1px solid rgba(230, 200, 119, 0.58);
  border-radius: 3px;
  background: #07100b;
  box-shadow: inset 0 0 0 2px rgba(8, 13, 10, 0.7);
}

.atlas-map-preview-banner-frame::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 239, 190, 0.18);
  content: "";
  pointer-events: none;
}

.atlas-map-preview-banner {
  display: block;
  width: 180px;
  height: 90px;
  object-fit: cover;
}

.atlas-map-preview.has-no-banner {
  grid-template-columns: 1fr;
  width: min(240px, calc(100% - 24px));
}

.atlas-map-preview.has-no-banner .atlas-map-preview-banner-frame {
  display: none;
}

.atlas-map-preview-copy {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 7px;
  min-width: 0;
  align-content: center;
  align-items: center;
  padding: 2px 2px 2px 0;
}

.atlas-map-preview-heading {
  display: flex;
  min-width: 0;
  grid-column: 1 / -1;
  align-items: center;
  gap: 7px;
}

.atlas-map-preview-id {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  margin-bottom: 0;
  padding: 1px 7px;
  border: 1px solid rgba(204, 159, 72, 0.62);
  border-radius: 999px;
  color: #e9c76f;
  background: rgba(110, 40, 30, 0.46);
  font: 800 0.66rem/1 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-preview-title {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff3c5;
  font: 800 0.98rem/1.2 var(--font-sans);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.atlas-map-preview-tagline {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  color: #cdd8d1;
  font: 400 0.65rem/1.38 var(--font-sans);
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview {
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  width: min(275px, calc(100% - 24px));
  padding: 8px;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview.has-no-banner {
  grid-template-columns: minmax(0, 1fr);
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview.has-no-banner .atlas-map-preview-copy {
  grid-template-columns: auto minmax(0, 1fr);
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-copy {
  display: contents;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview-banner-frame,
.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview-banner {
  width: 54px;
  height: 54px;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview-banner-frame {
  align-self: center;
  border-radius: 8px;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview-tagline {
  -webkit-line-clamp: 5;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-heading {
  grid-column: 1 / -1;
  grid-row: 1;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-id {
  flex: 0 0 auto;
  order: 2;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-banner-frame {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-tagline {
  grid-column: 2;
  grid-row: 2;
}

.atlas-map-shell:is(.is-home-map, .is-ae-target-map, [data-map-book^="AT"]) .atlas-map-preview:not(.has-no-banner) .atlas-map-preview-actions {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
}

.atlas-map-preview-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
}

.atlas-map-preview-actions .atlas-map-preview-link {
  grid-column: auto;
  justify-self: start;
}

.atlas-map-preview-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-height: 20px;
  align-items: center;
  justify-self: end;
  margin-top: 1px;
  padding: 0 5px;
  border: 1px solid rgba(225, 188, 98, 0.28);
  border-radius: 3px;
  color: rgba(243, 217, 141, 0.74);
  background: rgba(130, 48, 35, 0.08);
  font: 700 0.56rem/1 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.atlas-map-preview-actions .atlas-map-preview-link {
  min-width: 0;
}

.atlas-map-preview-actions button.atlas-map-preview-link {
  appearance: none;
  cursor: pointer;
}

.atlas-map-preview-link[hidden] {
  display: none !important;
}

.atlas-map-preview-link:hover,
.atlas-map-preview-link:focus-visible {
  border-color: rgba(225, 188, 98, 0.58);
  color: #f3d98d;
  background: rgba(130, 48, 35, 0.22);
}

.atlas-map-preview-link:focus-visible {
  outline: 2px solid #f0d483;
  outline-offset: 2px;
}

.atlas-map-preview-link.is-current-map,
.atlas-map-preview-link[aria-disabled="true"] {
  border-color: rgba(225, 188, 98, 0.16);
  color: rgba(243, 217, 141, 0.34);
  background: rgba(130, 48, 35, 0.03);
  cursor: not-allowed;
  opacity: 0.62;
  pointer-events: none;
}

.atlas-map-toolbar {
  position: relative;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 1px 1px 1px 4px;
  border: 0;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: transparent;
  box-shadow: none;
}

.atlas-map-toolbar button,
.atlas-map-detail-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(146, 174, 162, 0.3);
  border-radius: 5px;
  color: #e7eeea;
  background: #202b27;
  font: 800 1rem/1 var(--font-sans);
  letter-spacing: 0;
  cursor: pointer;
}

.atlas-map-toolbar button:hover,
.atlas-map-toolbar button:focus-visible,
.atlas-map-detail-close:hover,
.atlas-map-detail-close:focus-visible {
  background: #2c3934;
  border-color: rgba(240, 212, 131, 0.72);
}

.atlas-map-zoom-readout {
  display: inline-grid;
  width: 50px;
  height: 34px;
  place-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  color: #e7eee9;
  background: transparent;
  font: 800 0.74rem/1 var(--font-sans);
  letter-spacing: 0;
  user-select: none;
}

.atlas-map-toolbar button {
  border-color: rgba(202, 165, 86, 0.38);
  color: #f0e7ce;
  background: #2b1c18;
  box-shadow: none;
}

.atlas-map-toolbar button:hover,
.atlas-map-toolbar button:focus-visible {
  border-color: rgba(240, 212, 131, 0.84);
  color: #fff4c6;
  background: #443029;
}

.atlas-map-toolbar button:focus-visible {
  outline: 2px solid #f0d483;
  outline-offset: 2px;
}

.atlas-map-zoom-cluster {
  display: flex;
  align-items: center;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(202, 165, 86, 0.38);
  border-left: 1px solid rgba(202, 165, 86, 0.48);
  border-right: 0;
  border-radius: 0;
  background: #2b1c18;
}

.atlas-map-history-cluster {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(202, 165, 86, 0.38);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #2b1c18;
}

.atlas-map-history-cluster .atlas-map-control {
  width: 24px;
  height: 34px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  color: #f0d483;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  transition: color 140ms ease, background 140ms ease;
}

.atlas-map-history-cluster .atlas-map-control:hover,
.atlas-map-history-cluster .atlas-map-control:focus-visible {
  color: #fff4c6;
  background: #443029;
}

.atlas-map-history-cluster .atlas-map-control:disabled {
  background: rgba(33, 23, 18, 0.72);
}

.atlas-map-zoom-cluster .atlas-map-control,
.atlas-map-zoom-cluster .atlas-map-zoom-readout {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.atlas-map-zoom-cluster .atlas-map-control {
  width: 28px;
}

.atlas-map-zoom-cluster .atlas-map-zoom-readout {
  width: 44px;
}

.atlas-map-zoom-cluster .atlas-map-control:hover,
.atlas-map-zoom-cluster .atlas-map-control:focus-visible {
  background: #443029;
}

.atlas-map-palette-toggle {
  flex: 0 0 34px;
  border-left: 1px solid rgba(202, 165, 86, 0.48) !important;
  border-radius: 0 5px 5px 0 !important;
  background: #2b1c18 !important;
}

.atlas-map-toolbar button:disabled {
  opacity: 0.38;
  color: #a99e8a;
  background: #211712;
  cursor: not-allowed;
}

.atlas-map-toolbar button:disabled:hover {
  border-color: rgba(202, 165, 86, 0.38);
  background: #211712;
}

.atlas-map-reset {
  margin-left: 0;
  border-color: transparent !important;
  color: #f4d987 !important;
  font-size: 1.18rem !important;
}

.atlas-map-palette-toggle {
  position: relative;
}

.atlas-map-palette-icon {
  display: block;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(248, 228, 171, 0.68);
  border-radius: 50%;
  background:
    conic-gradient(from 45deg, #56745f 0 25%, #506a89 0 50%, #8b4a42 0 75%, #80644a 0);
  box-shadow:
    inset 0 0 0 3px var(--atlas-palette-current, #030905),
    0 1px 2px rgba(0, 0, 0, 0.72);
}

.atlas-map-palette-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 32px);
  gap: 6px;
  width: auto;
  padding: 8px;
  border: 1px solid rgba(215, 177, 90, 0.68);
  border-radius: 5px;
  background: rgba(12, 13, 11, 0.97);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px rgba(239, 205, 122, 0.07);
}

.atlas-map-palette-panel[hidden] {
  display: none;
}

.atlas-map-toolbar .atlas-map-palette-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(236, 220, 178, 0.32);
  border-radius: 4px;
  background: var(--atlas-palette-color);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.025);
}

.atlas-map-toolbar .atlas-map-palette-swatch:hover,
.atlas-map-toolbar .atlas-map-palette-swatch:focus-visible {
  border-color: #f0d483;
  background: var(--atlas-palette-color);
}

.atlas-map-toolbar .atlas-map-palette-swatch[aria-pressed="true"]::after {
  position: absolute;
  inset: 6px;
  border: 2px solid #f4d987;
  border-top: 0;
  border-left: 0;
  content: "";
  transform: translate(1px, -2px) rotate(45deg);
}

.atlas-map-legend {
  position: absolute;
  z-index: 21;
  right: 18px;
  bottom: 18px;
  color: #e7eee9;
  font-family: var(--font-sans);
  transition: opacity 120ms ease;
}

.atlas-map-legend summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(208, 170, 85, 0.58);
  border-radius: 4px;
  color: #e9dfc5;
  background: rgba(22, 14, 11, 0.94);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.45);
  font: 700 0.72rem/1 var(--font-sans);
  letter-spacing: 0;
  cursor: pointer;
  list-style: none;
}

.atlas-map-legend summary::-webkit-details-marker {
  display: none;
}

.atlas-map-legend summary:hover,
.atlas-map-legend summary:focus-visible {
  border-color: rgba(240, 212, 131, 0.88);
  color: #fff3c2;
  background: rgba(48, 30, 23, 0.98);
}

.atlas-map-legend summary:focus-visible {
  outline: 2px solid #f0d483;
  outline-offset: 2px;
}

.atlas-map-legend-mark {
  position: relative;
  display: block;
  width: 16px;
  height: 12px;
  border: 1px dotted rgba(224, 185, 91, 0.86);
  border-radius: 48% 42% 54% 46%;
}

.atlas-map-legend-mark::after {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dd4037;
  box-shadow: 0 0 5px rgba(239, 65, 55, 0.92);
  content: "";
}

.atlas-map-legend-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  display: grid;
  gap: 4px;
  width: 205px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid rgba(208, 170, 85, 0.58);
  border-radius: 4px;
  background: rgba(6, 14, 10, 0.98);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.56);
}

.atlas-map-legend-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  min-height: 28px;
  align-items: center;
  padding: 2px 5px;
  color: #cbd6cf;
  font: 600 0.7rem/1.25 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-legend-swatch {
  position: relative;
  display: block;
  width: 30px;
  height: 12px;
}

.atlas-map-legend-swatch.is-point::before {
  position: absolute;
  top: 3px;
  left: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #dd4037;
  box-shadow: 0 0 0 2px rgba(221, 64, 55, 0.16), 0 0 6px rgba(239, 65, 55, 0.9);
  content: "";
}

.atlas-map-legend-swatch.is-area {
  height: 8px;
  border: 1px dotted rgba(224, 185, 91, 0.9);
  border-radius: 48% 42% 54% 46%;
  background: rgba(184, 148, 72, 0.08);
}

.atlas-map-legend-swatch.is-range {
  background: linear-gradient(135deg, transparent 43%, #d8ad59 44% 56%, transparent 57%) 0 50% / 9px 9px repeat-x;
}

.atlas-map-legend-swatch.is-route::before,
.atlas-map-legend-swatch.is-route::after {
  position: absolute;
  right: 1px;
  left: 1px;
  height: 1px;
  content: "";
}

.atlas-map-legend-swatch.is-route::before {
  top: 4px;
  background: rgba(213, 174, 84, 0.92);
  transform: rotate(-5deg);
}

.atlas-map-legend-swatch.is-route::after {
  bottom: 3px;
  background: rgba(103, 173, 187, 0.9);
  transform: rotate(4deg);
}

.has-map-detail .atlas-map-legend {
  opacity: 0;
  pointer-events: none;
}

.atlas-map-loading {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #dce7df;
  font: 700 0.9rem/1.4 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-loading[hidden] {
  display: none;
}

.atlas-map-compass {
  position: absolute;
  z-index: 19;
  right: auto;
  bottom: 18px;
  left: 18px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(226, 190, 102, 0.82);
  border-radius: 50%;
  background: rgba(12, 16, 12, 0.88);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.48),
    inset 0 0 0 2px rgba(42, 24, 17, 0.92),
    inset 0 0 0 4px rgba(214, 176, 88, 0.2);
  pointer-events: none;
}

.atlas-map-compass::before,
.atlas-map-compass::after {
  position: absolute;
  background: rgba(215, 182, 103, 0.48);
  content: "";
}

.atlas-map-compass::before {
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
}

.atlas-map-compass::after {
  top: 50%;
  right: 8px;
  left: 8px;
  height: 1px;
}

.atlas-map-compass-n {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 50%;
  color: #f1d47f;
  font: 800 8px/1 var(--font-serif);
  letter-spacing: 0;
  text-shadow: 0 1px 2px #000;
  transform: translateX(-50%);
}

.atlas-map-compass-needle {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: calc(50% - 4px);
  width: 8px;
  height: 28px;
}

.atlas-map-compass-needle::before,
.atlas-map-compass-needle::after {
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.atlas-map-compass-needle::before {
  top: 0;
  border-bottom: 14px solid #c94338;
  filter: drop-shadow(0 0 2px rgba(222, 66, 54, 0.62));
}

.atlas-map-compass-needle::after {
  bottom: 0;
  border-top: 14px solid #d9c78f;
}

.atlas-map-compass-center {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid #efd27e;
  border-radius: 50%;
  background: #2d1712;
  box-shadow: 0 0 3px rgba(239, 210, 126, 0.62);
  transform: translate(-50%, -50%);
}

.atlas-map-detail {
  position: absolute;
  z-index: 22;
  right: 10px;
  bottom: 10px;
  width: min(360px, calc(100% - 20px));
  padding: 16px;
  border: 1px solid rgba(160, 189, 174, 0.34);
  border-radius: 6px;
  background: rgba(8, 17, 13, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
}

.atlas-map-detail[hidden] {
  display: none;
}

.atlas-map-detail-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.atlas-map-detail-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-right: 34px;
}

.atlas-map-detail-icon {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(235, 206, 117, 0.58);
  border-radius: 50%;
  object-fit: cover;
  background: #0a120e;
}

.atlas-map-detail h2 {
  margin: 0;
  color: #f4f0df;
  font: 700 1rem/1.25 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-detail-head p {
  margin: 4px 0 0;
  color: #aab9b1;
  font: 600 0.75rem/1.35 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-detail-tagline {
  margin: 12px 0;
  color: #d6dfda;
  font: 400 0.84rem/1.5 var(--font-sans);
  letter-spacing: 0;
}

.atlas-map-detail-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(235, 206, 117, 0.52);
  border-radius: 5px;
  color: #f0d483;
  font: 700 0.78rem/1 var(--font-sans);
  letter-spacing: 0;
  text-decoration: none;
}

.atlas-map-detail-link:hover,
.atlas-map-detail-link:focus-visible {
  color: #fff4c6;
  background: rgba(240, 212, 131, 0.1);
}

@media (max-width: 700px) {
  .atlas-map-shell {
    left: auto;
    width: calc(100vw - 1rem);
    margin-right: 0;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .atlas-map-tool {
    aspect-ratio: auto;
    height: min(68vh, 610px);
    min-height: 480px;
  }

  .atlas-ab-view-switch {
    max-width: calc(100vw - 1rem);
  }

  .atlas-map-detail {
    right: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    max-height: 42%;
    overflow: auto;
  }

  .atlas-map-book-menu {
    top: 10px;
    left: 10px;
    width: min(180px, calc(100% - 206px));
  }

  .atlas-map-control-strip {
    top: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .atlas-map-search {
    flex: 1 1 auto;
    width: min(222px, calc(100% - 150px));
    min-width: 0;
  }

  .atlas-map-search-input {
    height: 32px;
    padding-right: 36px;
  }

  .atlas-map-search-affordance {
    top: 2px;
    right: 3px;
  }

  .atlas-map-toolbar {
    display: flex;
    gap: 0;
    padding: 4px 4px 4px 0;
  }

  .atlas-map-zoom-cluster {
    height: 30px;
  }

  .atlas-map-zoom-cluster .atlas-map-control {
    width: 26px;
  }

  .atlas-map-zoom-cluster .atlas-map-zoom-readout {
    width: 38px;
  }

  .atlas-map-history-cluster {
    height: 30px;
  }

  .atlas-map-history-cluster .atlas-map-control {
    width: 24px;
    height: 30px;
  }

  .atlas-map-toolbar button {
    width: 30px;
    height: 30px;
  }

  .atlas-map-palette-toggle {
    flex-basis: 30px;
  }

  .atlas-map-zoom-readout {
    width: 38px;
    height: 30px;
    font-size: 0.66rem;
  }

  .atlas-map-reset {
    margin-left: 0;
  }

  .atlas-map-palette-panel {
    grid-template-columns: repeat(4, 28px);
    gap: 5px;
    padding: 7px;
  }

  .atlas-map-toolbar .atlas-map-palette-swatch {
    width: 28px;
    height: 28px;
  }

  .atlas-map-legend {
    right: 10px;
    bottom: 10px;
  }

  .atlas-map-compass {
    bottom: 10px;
    left: 10px;
  }
}

@media (hover: none), (pointer: coarse) {
  .atlas-map-preview {
    pointer-events: auto;
  }

  .atlas-map-preview-link {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-map-host [data-ae],
  .atlas-map-marker,
  .atlas-map-leader,
  .atlas-map-preview,
  .atlas-map-legend {
    transition: none;
  }

  .atlas-map-preview.is-switching .atlas-map-preview-banner-frame,
  .atlas-map-preview.is-switching .atlas-map-preview-copy {
    animation: none;
  }
}

@media (max-width: 420px) {
  .atlas-map-tool {
    height: 560px;
    min-height: 0;
  }

  .atlas-ab-view-switch a {
    min-width: 82px;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .atlas-map-marker-label {
    max-width: 112px;
    font-size: 11px;
  }

  .lang-en .atlas-map-marker-label {
    max-width: 148px;
  }

  .atlas-map-preview {
    grid-template-columns: 1fr;
    width: min(220px, calc(100% - 20px));
  }

  .atlas-map-preview-banner-frame {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 360px) {
  .atlas-map-book-menu {
    width: min(155px, calc(100% - 165px));
  }

  .atlas-map-control-strip {
    top: 10px;
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .atlas-map-search {
    width: min(170px, calc(100% - 150px));
  }

  .atlas-map-zoom-readout {
    display: none;
  }
}

.atlas-element-page .atlas-element-body {
  width: min(980px, calc(100vw - 2rem));
  margin: 0 auto;
}

.atlas-element-page .atlas-ae-figure {
  position: relative;
  width: min(980px, calc(100vw - 2rem));
  margin: 0 auto 0;
  overflow: hidden;
  border: 1px solid rgba(72, 63, 42, 0.18);
  background: rgba(255, 252, 244, 0.78);
  box-shadow: 0 14px 34px rgba(41, 35, 22, 0.12);
}

.atlas-element-page .atlas-ae-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}

.atlas-ae-figure.ae-zoomed .atlas-ae-image {
  cursor: grab;
}

.atlas-ae-figure.ae-zoomed .atlas-ae-image.ae-grabbing {
  cursor: grabbing;
}

.atlas-ae-zoom-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.atlas-ae-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(30, 30, 30, 0.72);
  color: #ddd;
  font: 700 1.1rem/1 var(--font-sans);
  cursor: pointer;
  transition: background 120ms, opacity 120ms;
}

.atlas-ae-zoom-btn:hover {
  background: rgba(50, 50, 50, 0.85);
  color: #fff;
}

.atlas-ae-zoom-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.atlas-ae-zoom-btn:disabled:hover {
  background: rgba(30, 30, 30, 0.72);
  color: #ddd;
}

.atlas-ae-zoom-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(30, 30, 30, 0.72);
  color: #eee;
  font: 700 0.78rem/1 var(--font-sans);
  padding: 0 6px;
  user-select: none;
}

.atlas-element-page .atlas-ae-watermark {
  position: absolute;
  bottom: 8px;
  right: 12px;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  clip-path: circle(50% at 50% 50%);
  cursor: pointer;
  z-index: 2;
}

.atlas-element-page .atlas-ae-watermark:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(153, 45, 35, 0.45);
}

.atlas-ae-copyright-popover {
  position: absolute;
  right: 14px;
  bottom: 92px;
  z-index: 4;
  max-width: min(220px, calc(100% - 28px));
  padding: 8px 12px;
  border: 1px solid rgba(72, 63, 42, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.96);
  box-shadow: 0 10px 24px rgba(41, 35, 22, 0.18);
  color: #4d4032;
  font: 600 0.78rem/1.35 var(--font-sans);
  text-align: center;
}

.atlas-ae-copyright-popover[hidden] {
  display: none;
}

.atlas-ae-scroll-bar {
  position: relative;
  width: min(980px, calc(100vw - 2rem));
  height: 18px;
  margin: -0.75rem auto 0;
}

.atlas-ae-scroll-bar-top {
  margin: 0 auto -0.5rem;
}

.atlas-ae-scroll-bar-bottom {
  margin: 0.35rem auto 0;
}

.atlas-ae-scroll-bar-top .atlas-ae-scroll-thumb {
  right: 12px;
  left: auto;
}

.atlas-ae-scroll-rail {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom, #3a3a3a, #1a1a1a);
  border: 1px solid #555;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.08);
}

.atlas-ae-scroll-thumb {
  position: absolute;
  top: 1px;
  left: 12px;
  width: 180px;
  height: 6px;
  background: linear-gradient(to bottom, #5a5a5a, #3a3a3a);
  border: 1px solid #777;
  border-radius: 3px;
}

.atlas-ae-scroll-end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 28px;
  background: linear-gradient(to bottom, #444, #222);
  border: 1px solid #555;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.atlas-ae-scroll-end-left {
  left: -11px;
  border-radius: 6px 0 0 6px;
}

.atlas-ae-scroll-end-right {
  right: -11px;
  border-radius: 0 6px 6px 0;
}

.atlas-ae-scroll-bar-bottom .atlas-ae-scroll-rail {
  top: 5px;
  height: 6px;
  border-radius: 4px;
}

.atlas-ae-scroll-bar-bottom .atlas-ae-scroll-end {
  width: 16px;
  height: 22px;
}

.atlas-ae-scroll-bar-bottom .atlas-ae-scroll-end-left {
  left: -8px;
}

.atlas-ae-scroll-bar-bottom .atlas-ae-scroll-end-right {
  right: -8px;
}

.atlas-ae-header-pills {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  flex-wrap: wrap;
}

.atlas-ae-header-pill-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.atlas-ae-location-pill-item {
  gap: 0;
}

.atlas-ae-header-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 12px;
  border: 1px solid rgba(150,150,150,0.30);
  border-radius: 14px;
  background: rgba(180,180,180,0.10);
  color: rgba(100,100,100,0.85);
  font: 500 0.78rem/1.4 var(--font-sans);
  white-space: nowrap;
}

.atlas-ae-header-pill-link {
  cursor: pointer;
}

.atlas-ae-header-pill-ar-link {
  border-radius: 14px 0 0 14px;
  text-decoration: none;
}

.atlas-ae-header-pill-toggle {
  border-left: 0;
  border-radius: 0 14px 14px 0;
  cursor: pointer;
  padding-left: 8px;
  padding-right: 8px;
}

.atlas-ae-header-pill-ar-link:hover,
.atlas-ae-header-pill-toggle:hover,
.atlas-ae-header-pill-toggle:focus-visible {
  border-color: rgba(153, 45, 35, 0.38);
  background: rgba(153, 45, 35, 0.08);
  color: var(--primary-color);
}

.atlas-ae-pill-twister {
  font-size: 0.65rem;
  margin-left: 5px;
  opacity: 0.6;
}

.atlas-ae-header-pill-link:hover {
  border-color: rgba(153, 45, 35, 0.38);
  background: rgba(153, 45, 35, 0.08);
  color: var(--primary-color);
}

.atlas-ae-header-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  min-width: 180px;
  background: #fcfaf5;
  border: 1px solid rgba(150,150,150,0.25);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(40,30,20,0.12);
  z-index: 10;
}

.atlas-ae-header-pill-item.is-open .atlas-ae-header-dropdown {
  display: block;
}

.atlas-ae-header-dropdown .site-breadcrumb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  color: #3d3427;
  text-decoration: none;
  font: 400 0.82rem/1.5 var(--font-sans);
  white-space: nowrap;
}

.atlas-ae-header-dropdown .site-breadcrumb-dropdown-item:hover {
  background: rgba(153, 45, 35, 0.06);
  color: var(--primary-color);
}

.atlas-ae-header-dropdown .site-breadcrumb-dropdown-item.is-active {
  font-weight: 700;
  color: var(--primary-color);
}

.atlas-ae-header-dropdown .dropdown-chapter-emoji {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.atlas-ae-header-dropdown .dropdown-chapter-emoji img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin: 0 auto;
}

.atlas-ae-caption {
  width: min(980px, calc(100vw - 2rem));
  margin: 15px auto 0;
}

.atlas-ae-caption p {
  margin: 0;
  color: #5c5243;
  font: 400 0.92rem/1.65 var(--font-classic);
}

.atlas-element-page .atlas-icon-frame {
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  transform: none !important;
  padding: 0.2rem;
  background: rgba(156, 37, 37, 0.80);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(156, 37, 37, 0.18);
}

.atlas-element-page .atlas-icon-frame img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.atlas-element-page .element-layout {
  max-width: none;
  width: 100%;
}

@media (max-width: 900px) {
  .atlas-index-page .atlas-index-grid,
  .atlas-page .atlas-ae-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, calc(100vw - 2rem)) !important;
  }

  .atlas-ae-grid .chapter-tile-emoji {
    font-size: 2.97rem !important;
  }
}

@media (max-width: 560px) {
  .atlas-index-page .atlas-index-grid,
  .atlas-page .atlas-ae-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .atlas-index-page .atlas-section-card,
  .atlas-page .atlas-ae-card {
    min-height: 168px !important;
    border-right: none !important;
  }
}
.site-breadcrumb-item-container {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  vertical-align: middle;
}

.site-breadcrumb-item-container .site-breadcrumb-pill {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}

.site-breadcrumb-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px !important;
  margin: 0 !important;
  border: 1px solid rgba(150,150,150,0.22) !important;
  border-left: 1px solid rgba(150,150,150,0.15) !important;
  border-top-right-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  background: rgba(180,180,180,0.08) !important;
  color: rgba(120,120,120,0.75) !important;
  font: 500 0.85rem/1.4 var(--font-sans) !important;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease !important;
}

.site-breadcrumb-trigger:hover {
  border-color: rgba(153, 45, 35, 0.38) !important;
  background: rgba(153, 45, 35, 0.08) !important;
  color: var(--primary-color) !important;
}

.site-breadcrumb-trigger:focus-visible {
  outline: 2px solid var(--primary-color) !important;
  outline-offset: 2px;
}

.site-breadcrumb-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 187px;
  background: #f0efe9;
  border: 1px solid rgba(178,151,86,0.3);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  z-index: 1000;
  padding: 6px 0;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-breadcrumb-dropdown.is-open {
  display: block;
}
.site-breadcrumb-dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 6px 0;
}
.site-breadcrumb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #4a4a4a;
  font: 500 0.88rem/1.4 var(--font-sans);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-breadcrumb-dropdown-item:hover {
  background: rgba(153, 45, 35, 0.08);
  color: var(--primary-color);
}

.site-breadcrumb-dropdown-item .dropdown-book-logo {
  width: 20px !important;
  height: 20px !important;
}

.site-breadcrumb-dropdown-item .dropdown-chapter-emoji {
  width: 1.3rem !important;
  min-width: 1.3rem !important;
  font-size: 1.05rem !important;
}

.site-breadcrumb-dropdown-item.is-active {
  font-weight: 700;
  color: #fff8e8 !important;
  background: #992d23 !important;
}

.site-breadcrumb-dropdown-item.is-active:hover {
  background: #82221b !important;
}

/* v0.1.27 root gateway attraction redesign */
body:has(.root-gateway) {
  color: #f4efe4;
  background-color: #0e1118;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(177, 57, 45, 0.26), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(212, 175, 55, 0.18), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(54, 84, 128, 0.2), transparent 38%),
    linear-gradient(135deg, #111620 0%, #15120f 46%, #090b10 100%);
}

body:has(.root-gateway)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 18%, #000 0%, transparent 78%);
}

.root-gateway {
  width: min(1500px, calc(100% - 2rem));
  max-width: 1500px;
  padding-top: 92px !important;
  color: #f4efe4;
}

@media (min-width: 1320px) {
  .root-gateway {
    width: max(1200px, 90vw);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

.root-gateway .gateway-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(350px, 1.16fr) minmax(280px, 0.95fr);
  grid-template-areas: "atlas title picks";
  gap: 1.4rem;
  align-items: start;
  margin-bottom: 1.65rem !important;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  overflow: visible;
  border: 1px solid rgba(232, 204, 134, 0.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 211, 118, 0.22), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(201, 64, 52, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(34, 30, 25, 0.9), rgba(14, 20, 31, 0.88));
  box-shadow: inset 0 1px rgba(255, 242, 204, 0.12), 0 32px 80px rgba(0, 0, 0, 0.34);
  isolation: isolate;
}

.root-gateway .gateway-hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 26px;
  background:
    linear-gradient(115deg, transparent 0 31%, rgba(255, 224, 146, 0.11) 32%, transparent 46%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 38px);
}

.root-gateway .gateway-hero-copy {
  position: relative;
  z-index: 1;
  grid-area: title;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  min-height: 348px;
  justify-self: center;
  align-self: start;
  padding-top: 0.35rem;
  text-align: center;
}

.root-gateway .gateway-section-heading span,
.root-gateway .attraction-meta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  color: #f4c96f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.root-gateway .gateway-title-flex {
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0.1rem 0 0 !important;
  color: #fff6df !important;
  text-align: center;
  font-size: clamp(2.7rem, 6vw, 5.7rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.065em;
}

.root-gateway .gateway-title-flex span {
  color: #fff6df !important;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.root-gateway .title-mascot-svg {
  width: clamp(52px, 8vw, 84px) !important;
  height: clamp(52px, 8vw, 84px) !important;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
}

.root-gateway .gateway-slogan {
  width: auto;
  margin: 0.8rem 0 0 !important;
  color: #f0d9a3;
  font-family: var(--font-sans) !important;
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 700;
  text-align: center;
}

.root-gateway .gateway-lede {
  max-width: 680px;
  margin: 0.85rem auto 0 !important;
  color: #f0d9a3 !important;
  font-size: clamp(0.78rem, 1.3vw, 0.92rem);
  line-height: 1.65;
  white-space: pre-line;
}

.root-gateway .gateway-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.root-gateway .atlas-highlight-card {
  position: relative;
  z-index: 1;
  grid-area: atlas;
  align-self: start;
  min-height: 0;
  width: 320px;
  padding: 16px;
  border: 1px solid rgba(126, 226, 255, 0.24);
  border-radius: 22px;
  color: #fff7df;
  background:
    radial-gradient(circle at 50% 18%, rgba(107, 226, 255, 0.22), transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(244, 201, 111, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045));
  box-shadow: inset 0 1px rgba(255,255,255,0.13), 0 18px 42px rgba(0,0,0,0.22);
  overflow: hidden;
}

.root-gateway .atlas-highlight-card::before {
  content: "";
  position: absolute;
  inset: -35% -18% auto auto;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(132, 233, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 44px rgba(86, 210, 255, 0.12);
}

.root-gateway .atlas-highlight-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.root-gateway .atlas-highlight-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: rgba(244, 239, 228, 0.7);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.root-gateway .atlas-highlight-refresh {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 230, 164, 0.26);
  border-radius: 999px;
  color: #ffe39b;
  background: rgba(255,255,255,0.09);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.root-gateway .atlas-highlight-refresh:hover,
.root-gateway .atlas-highlight-refresh:focus-visible {
  transform: rotate(18deg) scale(1.05);
  border-color: rgba(255, 230, 164, 0.56);
  background: rgba(255,255,255,0.16);
  outline: none;
}

.root-gateway .atlas-highlight-link {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.root-gateway .atlas-highlight-orb {
  width: 288px;
  max-width: 100%;
  height: 144px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,0.38), transparent 30%),
    linear-gradient(145deg, rgba(255, 226, 151, 0.22), rgba(93, 213, 255, 0.16));
  border: 1px solid rgba(255, 232, 173, 0.28);
  box-shadow: inset 0 1px rgba(255,255,255,0.22), 0 18px 32px rgba(0,0,0,0.24), 0 0 34px rgba(86, 210, 255, 0.18);
}

.root-gateway .atlas-highlight-img {
  width: 288px;
  max-width: 100%;
  height: 144px;
  object-fit: cover;
  border-radius: 16px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28));
}

.root-gateway .atlas-highlight-emoji {
  font-size: 3rem;
}

.root-gateway .atlas-highlight-copy {
  display: grid;
  gap: 0.28rem;
}

.root-gateway .atlas-highlight-id {
  width: fit-content;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  color: #25190a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.625rem;
  font-weight: 900;
}

.root-gateway .atlas-highlight-copy strong {
  color: #fff4d5;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.root-gateway .atlas-highlight-copy span:last-child {
  color: rgba(244, 239, 228, 0.75);
  font-size: 0.88rem;
  line-height: 1.45;
}

.root-gateway .atlas-highlight-routes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 0.75rem;
}

.root-gateway .atlas-highlight-routes a {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  height: 27px;
  border: 1px solid rgba(255, 230, 164, 0.24);
  color: rgba(255, 244, 213, 0.82);
  background: rgba(8, 10, 14, 0.24);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

body.lang-en .root-gateway .atlas-highlight-routes a {
  font-size: 0.56rem;
}

.root-gateway .atlas-highlight-routes a:hover,
.root-gateway .atlas-highlight-routes a:focus-visible {
  border-color: rgba(255, 230, 164, 0.58);
  color: #fff4d5;
  background: rgba(255, 255, 255, 0.11);
  outline: none;
}

.root-gateway .gateway-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.root-gateway .gateway-action:hover,
.root-gateway .gateway-action:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.root-gateway .gateway-action-primary,
.root-gateway .gateway-action-secondary {
  color: #21150a;
  background: linear-gradient(135deg, #ffe39b, #d99a36 62%, #a84a32);
  border: 1px solid rgba(255, 232, 173, 0.32);
  box-shadow: 0 14px 30px rgba(205, 116, 42, 0.28);
}

.root-gateway .gateway-action-secondary {
  background: linear-gradient(135deg, #f8d986, #c98934 62%, #8f4f28);
}

.root-gateway .matrix-picks-box {
  grid-area: picks;
  align-self: start;
  justify-self: end;
  width: min(320px, 100%);
  padding: 1rem;
  border: 1px solid rgba(255, 230, 164, 0.24);
  border-radius: 20px;
  color: #fff2cf;
  background:
    radial-gradient(circle at 85% 8%, rgba(244, 201, 111, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 18px 38px rgba(0, 0, 0, 0.2);
}

.root-gateway .matrix-picks-head {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  margin-bottom: 0.8rem;
}

.root-gateway .matrix-picks-head span {
  color: rgba(244, 239, 228, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.root-gateway .matrix-picks-head strong {
  color: #ffe59f;
  font-size: 1.12rem;
  line-height: 1.15;
}

.root-gateway .matrix-picks-head small {
  color: rgba(244, 239, 228, 0.52);
  font-size: 0.75rem;
}

.root-gateway .matrix-picks-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.root-gateway .matrix-picks-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(255, 232, 173, 0.24);
  border-radius: 50%;
  color: #ffe59f;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 220ms ease, background-color 180ms ease, border-color 180ms ease;
}

.root-gateway .matrix-picks-refresh:hover,
.root-gateway .matrix-picks-refresh:focus-visible {
  transform: rotate(180deg);
  border-color: rgba(255, 224, 146, 0.5);
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.root-gateway .matrix-picks-lane-select {
  display: none !important;
}

.root-gateway .matrix-picks-select-custom {
  position: relative;
  width: 100%;
  margin: 0.1rem 0 0.2rem;
}

.root-gateway .matrix-picks-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.25rem 0.45rem;
  border: 1px solid rgba(255, 232, 173, 0.2);
  border-radius: 8px;
  color: #ffe59f;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s;
}

.root-gateway .matrix-picks-select-trigger:hover,
.root-gateway .matrix-picks-select-trigger:focus-visible {
  border-color: rgba(255, 224, 146, 0.4);
  outline: none;
}

.root-gateway .matrix-picks-select-trigger-content {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.root-gateway .matrix-picks-select-trigger-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.root-gateway .matrix-picks-select-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-gateway .matrix-picks-select-trigger-arrow {
  color: rgba(255, 229, 159, 0.6);
  font-size: 0.8rem;
  margin-left: 0.25rem;
}

.root-gateway .matrix-picks-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 0.25rem;
  border: 1px solid rgba(255, 232, 173, 0.22);
  border-radius: 8px;
  background: #110e0a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.root-gateway .matrix-picks-select-dropdown.is-open {
  display: block;
}

.root-gateway .matrix-picks-select-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #fff8e6;
  background: transparent;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.root-gateway .matrix-picks-select-option:last-child {
  border-bottom: none;
}

.root-gateway .matrix-picks-select-option:hover,
.root-gateway .matrix-picks-select-option:focus-visible {
  background: rgba(255, 229, 159, 0.12);
  color: #ffe59f;
  outline: none;
}

.root-gateway .matrix-picks-select-option.is-selected {
  background: rgba(255, 229, 159, 0.2);
  color: #fff;
}

.root-gateway .matrix-picks-select-option-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.root-gateway .matrix-picks-items {
  display: grid;
  gap: 0.45rem;
}

.root-gateway .matrix-pick-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-height: 48px;
  padding: 0.45rem;
  color: #fff7e6;
  text-decoration: none;
  border: 1px solid rgba(255, 232, 173, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.root-gateway .matrix-pick-item:hover,
.root-gateway .matrix-pick-item:focus-visible {
  transform: translateX(3px);
  border-color: rgba(255, 224, 146, 0.34);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.root-gateway .matrix-pick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 1.28rem;
  line-height: 1;
}

.root-gateway .matrix-pick-icon-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

.root-gateway .matrix-pick-copy {
  min-width: 0;
  display: grid;
  gap: 0.05rem;
}

.root-gateway .matrix-pick-copy strong {
  overflow: hidden;
  color: #fff7e6;
  font-size: 0.92rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-gateway .matrix-pick-copy small {
  width: fit-content;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  color: #25190a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.625rem;
  font-weight: 900;
}

.root-gateway .latest-attractions {
  margin: 4rem 0 1.9rem;
}

.root-gateway .gateway-section-heading {
  margin: 0 0 0.8rem;
}

.root-gateway .gateway-section-desc {
  margin: 0.4rem 0 0;
  color: rgba(75, 43, 24, 0.72);
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 600px;
}

.root-gateway .gateway-section-heading h2 {
  margin: 0.2rem 0 0 !important;
  color: #4b2b18;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: 0 1px rgba(255, 248, 230, 0.48);
}

.root-gateway .attraction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.root-gateway .gateway-hero > .matrix-picks-box {
  align-self: start;
}

.root-gateway .attraction-card {
  position: relative;
  min-height: 250px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  color: #fff8e6;
  text-decoration: none;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 230, 150, 0.2), transparent 26%),
    linear-gradient(145deg, rgba(48, 38, 28, 0.92), rgba(18, 24, 34, 0.9));
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.1), 0 22px 48px rgba(0, 0, 0, 0.26);
  isolation: isolate;
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.root-gateway .attraction-card:hover,
.root-gateway .attraction-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(255, 216, 128, 0.48);
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.14), 0 30px 68px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 196, 88, 0.12);
  outline: none;
}

.root-gateway .attraction-card-ge1 {
  background:
    radial-gradient(circle at 78% 18%, rgba(249, 190, 73, 0.28), transparent 30%),
    radial-gradient(circle at 22% 88%, rgba(158, 42, 43, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(55, 41, 27, 0.94), rgba(23, 22, 21, 0.92));
}

.root-gateway .attraction-card-ge2 {
  background:
    radial-gradient(circle at 78% 18%, rgba(231, 235, 222, 0.23), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(50, 82, 120, 0.28), transparent 36%),
    linear-gradient(145deg, rgba(25, 31, 38, 0.96), rgba(12, 13, 16, 0.93));
}

.root-gateway .attraction-card-ge3 {
  background:
    radial-gradient(circle at 68% 22%, rgba(180, 90, 60, 0.28), transparent 32%),
    radial-gradient(circle at 32% 82%, rgba(120, 50, 40, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(35, 28, 24, 0.96), rgba(16, 18, 22, 0.93));
}

.root-gateway .attraction-card-ge4 {
  background:
    radial-gradient(circle at 78% 18%, rgba(120, 160, 80, 0.28), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(80, 120, 40, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(35, 45, 28, 0.94), rgba(18, 24, 18, 0.92));
}

.root-gateway .attraction-card-ge5 {
  background:
    radial-gradient(circle at 78% 18%, rgba(210, 180, 100, 0.30), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(180, 130, 60, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(48, 40, 24, 0.94), rgba(22, 20, 16, 0.92));
}

.root-gateway .attraction-card-ge6 {
  background:
    radial-gradient(circle at 78% 18%, rgba(210, 150, 70, 0.28), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(160, 100, 40, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(45, 32, 22, 0.94), rgba(20, 16, 12, 0.92));
}

.root-gateway .attraction-card-ge7 {
  background:
    radial-gradient(circle at 78% 18%, rgba(140, 150, 170, 0.26), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(100, 110, 130, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(30, 34, 42, 0.96), rgba(14, 16, 20, 0.93));
}

.root-gateway .attraction-card-ge8 {
  background:
    radial-gradient(circle at 78% 18%, rgba(220, 100, 60, 0.30), transparent 30%),
    radial-gradient(circle at 24% 86%, rgba(180, 50, 30, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(48, 28, 24, 0.96), rgba(18, 14, 16, 0.93));
}

.root-gateway .attraction-orbit {
  position: absolute;
  right: -48px;
  top: -48px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 231, 170, 0.16);
  border-radius: 50%;
}

.root-gateway .attraction-orbit::after {
  content: "";
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(255, 231, 170, 0.1);
  border-radius: 50%;
}

.root-gateway .attraction-icon {
  position: absolute;
  right: 1.1rem;
  top: 0.95rem;
  color: rgba(255, 246, 223, 0.88);
  font-size: 2.35rem;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.26));
}

.root-gateway .attraction-badge {
  width: max-content;
  max-width: calc(100% - 4.6rem);
  padding: 0.34rem 0.62rem;
  border: 1px solid rgba(255, 232, 173, 0.24);
  border-radius: 999px;
  color: #f7dc9a;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 800;
}

.root-gateway .attraction-copy {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  max-width: 82%;
}

.root-gateway .attraction-copy h3 {
  margin: 0.28rem 0 0.55rem !important;
  color: #fff8e6;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.root-gateway .attraction-copy p {
  margin: 0 !important;
  color: rgba(244, 239, 228, 0.73) !important;
  font-size: 0.96rem;
  line-height: 1.55;
}

.root-gateway .attraction-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 232, 173, 0.12);
  color: rgba(244, 239, 228, 0.68);
  font-size: 0.83rem;
}

.root-gateway .attraction-footer strong {
  color: #ffe59f;
  white-space: nowrap;
}

.root-gateway .gateway-domain-heading {
  margin-top: 4rem;
}

.root-gateway .domain-grid {
  gap: 1rem;
}

.root-gateway .domain-card {
  min-height: 170px;
  border-color: rgba(255, 232, 173, 0.14) !important;
  border-radius: 18px;
  color: #fff6df;
  background-color: rgba(16, 18, 24, 0.82) !important;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 18px 44px rgba(0, 0, 0, 0.25) !important;
}

.root-gateway .domain-card::after {
  background: linear-gradient(90deg, rgba(12, 14, 18, 0.92) 0%, rgba(18, 20, 26, 0.78) 54%, rgba(18, 20, 26, 0.28) 100%);
}

.root-gateway .domain-card:hover,
.root-gateway .domain-card:focus-visible {
  border-color: rgba(244, 201, 111, 0.46) !important;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.1), 0 24px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(244, 201, 111, 0.1) !important;
}

.root-gateway .domain-card h2 {
  color: #ffe2a0;
}

.root-gateway .domain-card p {
  color: rgba(244, 239, 228, 0.72) !important;
}

.root-gateway .domain-code {
  color: rgba(255, 232, 173, 0.18);
}

.root-gateway .domain-card:hover .domain-code,
.root-gateway .domain-card:focus-visible .domain-code {
  color: rgba(255, 222, 146, 0.6);
}

body.lang-en .root-gateway .gateway-title-flex {
  font-size: clamp(2.05rem, 4.2vw, 4.25rem) !important;
}

body.lang-en .root-gateway .title-mascot-svg {
  width: clamp(48px, 6.5vw, 74px) !important;
  height: clamp(48px, 6.5vw, 74px) !important;
}

body.lang-en .root-gateway .gateway-slogan {
  font-size: clamp(0.9rem, 1.55vw, 1.12rem);
}

body.lang-en .root-gateway .gateway-lede {
  font-size: clamp(0.74rem, 1.1vw, 0.86rem);
}

.root-gateway .domain-card {
  min-height: 292px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.45rem;
}

.root-gateway .domain-card-copy {
  max-width: 88%;
}

.root-gateway .domain-card-main-link {
  position: relative;
  z-index: 2;
  color: inherit;
  text-decoration: none;
}

.root-gateway .domain-card-main-link:hover h2,
.root-gateway .domain-card-main-link:focus-visible h2 {
  color: #fff0bc;
}

.root-gateway .domain-child-menu {
  position: relative;
  z-index: 3;
  margin-top: auto;
}

.root-gateway .domain-child-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  min-height: 42px;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 14px;
  color: #ffe59f;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  list-style: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.root-gateway .domain-child-menu summary::-webkit-details-marker {
  display: none;
}

.root-gateway .domain-child-menu summary::after {
  content: "\25BE";
  color: rgba(255, 232, 173, 0.78);
  font-size: 0.9rem;
  transition: transform 140ms ease;
}

.root-gateway .domain-child-menu[open] summary::after {
  transform: rotate(180deg);
}

.root-gateway .domain-child-menu summary:hover,
.root-gateway .domain-child-menu summary:focus-visible {
  border-color: rgba(255, 224, 146, 0.42);
  background: rgba(255, 255, 255, 0.13);
  outline: none;
}

.root-gateway .domain-child-menu summary span {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.root-gateway .domain-child-menu summary strong {
  margin-left: auto;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  color: #24160a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.72rem;
  font-weight: 900;
}

.root-gateway .domain-child-list {
  max-height: 240px;
  margin-top: 0.55rem;
  display: grid;
  gap: 0.34rem;
  overflow: auto;
  padding-right: 0.16rem;
  scrollbar-color: rgba(255, 247, 230, 0.5) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.root-gateway .domain-child-list::-webkit-scrollbar {
  width: 8px;
}

.root-gateway .domain-child-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.root-gateway .domain-child-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 247, 230, 0.5);
}

.root-gateway .domain-child-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 247, 230, 0.68);
}

.root-gateway .domain-child-link {
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.34rem 0.45rem;
  border: 1px solid rgba(255, 232, 173, 0.12);
  border-radius: 10px;
  color: #fff7e6;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.065);
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.root-gateway .domain-child-link:hover,
.root-gateway .domain-child-link:focus-visible {
  transform: translateX(3px);
  border-color: rgba(255, 224, 146, 0.32);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.root-gateway .domain-child-icon {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.22);
}

.root-gateway .domain-child-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffe59f;
  background: rgba(255, 255, 255, 0.1);
}

.root-gateway .domain-child-id {
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  color: #25190a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.6rem;
  font-weight: 900;
}

.root-gateway .domain-child-title {
  overflow: hidden;
  color: rgba(255, 247, 230, 0.88);
  font-size: 0.8rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.root-gateway .matrix-pick-copy {
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.root-gateway .matrix-pick-copy small {
  flex: 0 0 auto;
  padding: 0.08rem 0.32rem;
  border-radius: 999px;
  color: #25190a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.2;
}

.root-gateway .matrix-pick-copy strong {
  min-width: 0;
}

.root-gateway .domain-card-C::before,
.root-gateway .domain-card-H::before,
.root-gateway .domain-card-A::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

.root-gateway .domain-card-C::before {
  background: linear-gradient(135deg, rgba(158, 42, 43, 0.16), transparent 48%), repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 232, 173, 0.06) 28px 29px);
}

.root-gateway .domain-card-H::before {
  background: radial-gradient(circle at 24% 18%, rgba(244, 201, 111, 0.18), transparent 30%), linear-gradient(180deg, transparent 42%, rgba(255, 232, 173, 0.08) 43%, transparent 45%);
}

.root-gateway .domain-card-A::before {
  background: radial-gradient(circle at 78% 16%, rgba(126, 226, 255, 0.17), transparent 32%), repeating-linear-gradient(145deg, transparent 0 18px, rgba(126, 226, 255, 0.055) 18px 19px);
}

@media (max-width: 900px) {
  .root-gateway .domain-card {
    min-height: 250px;
  }
}

@media (max-width: 560px) {
  .root-gateway .domain-card {
    min-height: 0;
  }
}

body.lang-en .root-gateway .gateway-action {
  min-height: 38px;
  padding: 0.58rem 0.86rem;
  font-size: 0.84rem;
}

body.lang-en .root-gateway .atlas-highlight-copy strong {
  font-size: clamp(1.06rem, 1.55vw, 1.32rem);
}

body.lang-en .root-gateway .matrix-picks-box,
body.lang-en .root-gateway .atlas-highlight-card {
  font-size: 0.94rem;
}

body:has(.root-gateway) .h-landing-footer {
  color: rgba(244, 239, 228, 0.72);
  background: rgba(8, 10, 14, 0.78) !important;
  border-color: rgba(255, 232, 173, 0.12) !important;
}

body:has(.root-gateway) .h-landing-footer a,
body:has(.root-gateway) .h-footer-brand {
  color: #f4c96f !important;
}

@media (max-width: 900px) {
  .root-gateway {
    width: min(760px, calc(100% - 2rem));
    padding-top: 132px !important;
  }

  .root-gateway .gateway-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "title title"
      "atlas picks";
  }

  .root-gateway .gateway-hero-copy {
    width: 100%;
    min-height: 0;
  }

  .root-gateway .matrix-picks-box {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
  }

  .root-gateway .attraction-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .root-gateway .gateway-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "atlas"
      "picks";
  }

  .root-gateway .atlas-highlight-card,
  .root-gateway .matrix-picks-box {
    width: 100%;
  }

  .root-gateway .atlas-highlight-orb,
  .root-gateway .atlas-highlight-img {
    width: min(288px, 100%);
    height: auto;
    aspect-ratio: 65 / 36;
  }
}

@media (max-width: 560px) {
  .root-gateway {
    width: min(100% - 1rem, 572px);
  }

  .root-gateway .gateway-hero {
    padding: 1.2rem;
    border-radius: 20px;
  }

  .root-gateway .gateway-title-flex {
    font-size: clamp(2.25rem, 13vw, 3.9rem) !important;
  }

  .root-gateway .gateway-actions {
    flex-direction: column;
  }

  .root-gateway .gateway-action {
    width: 100%;
  }

  .root-gateway .attraction-card {
    min-height: 236px;
    padding: 1.1rem;
  }

  .root-gateway .attraction-copy {
    max-width: 100%;
    margin-top: 2.6rem;
  }

  .root-gateway .attraction-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* v0.1.34 root retention redesign */
.root-gateway .root-language-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
}

.root-gateway .root-language-bar > span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #9b6a21;
}

.root-gateway .root-language-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.root-gateway .root-language-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.38rem 0.78rem;
  border: 1px solid rgba(184, 138, 52, 0.33);
  border-radius: 999px;
  color: #6b4218;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.42);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.root-gateway .root-language-link:hover,
.root-gateway .root-language-link:focus-visible,
.root-gateway .root-language-link.is-active {
  transform: translateY(-1px);
  border-color: rgba(158, 42, 43, 0.42);
  color: #fff8e6;
  background: linear-gradient(135deg, #9e2a2b, #c9822e);
  outline: none;
}

.root-gateway .root-route-section,
.root-gateway .root-domain-sections {
  margin-top: 3rem;
}

.root-gateway .root-route-section .gateway-section-heading h2,
.root-gateway .latest-attractions .gateway-section-heading h2,
.root-gateway .root-domain-section h2 {
  color: #ffe2a0 !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.root-gateway .root-route-section .gateway-section-heading span {
  width: auto;
  color: rgba(244, 239, 228, 0.68);
  text-transform: none;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
}

.root-gateway .root-route-grid,
.root-gateway .root-spotlight-grid {
  display: grid;
  gap: 0.85rem;
}

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

.root-gateway .root-domain-sections {
  display: grid;
  gap: 1.2rem;
}

.root-gateway .root-domain-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.68fr) minmax(0, 1.5fr);
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.55rem);
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 96% 10%, rgba(244, 201, 111, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(22, 24, 32, 0.9), rgba(12, 14, 20, 0.9));
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 24px 58px rgba(0, 0, 0, 0.28);
}

.root-gateway .root-domain-section-H {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 85% 18%, rgba(212, 155, 70, 0.22), transparent 32%),
    linear-gradient(145deg, rgba(52, 34, 20, 0.94), rgba(18, 12, 8, 0.96));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.root-gateway .root-domain-section-C {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 86% 14%, rgba(178, 82, 148, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(38, 18, 38, 0.94), rgba(14, 10, 22, 0.96));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.root-gateway .root-domain-section-M {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 86% 16%, rgba(79, 195, 247, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(14, 28, 48, 0.94), rgba(8, 12, 28, 0.96));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.root-gateway .root-section-group {
  margin-top: 3.8rem;
}

.root-gateway .root-domain-section-A {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 86% 16%, rgba(126, 226, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(20, 30, 36, 0.92), rgba(12, 14, 20, 0.92));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.root-gateway .root-domain-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
}

.root-gateway .root-domain-code {
  width: max-content;
  padding: 0.16rem 0.52rem;
  border-radius: 999px;
  color: #25190a;
  background: linear-gradient(135deg, #ffe7a6, #7ee2ff);
  font-size: 0.68rem;
  font-weight: 900;
}

.root-gateway .root-domain-intro h2 {
  margin: 0 !important;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.02;
}

.root-gateway .root-domain-intro p {
  margin: 0 !important;
  color: rgba(244, 239, 228, 0.76) !important;
  font-size: 0.98rem;
  line-height: 1.58;
}

.root-gateway .root-domain-link {
  width: max-content;
  margin-top: 0.2rem;
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(255, 232, 173, 0.28);
  border-radius: 999px;
  color: #21150a;
  background: linear-gradient(135deg, #ffe39b, #d99a36 62%, #a84a32);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 900;
}

.root-gateway .root-domain-link:hover,
.root-gateway .root-domain-link:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

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

.root-gateway .root-spotlight-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  min-height: 210px;
  padding: 0.86rem;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.14);
  border-radius: 18px;
  color: #fff7e6;
  text-decoration: none;
  background: rgba(36, 32, 26, 0.94);
  transition: transform 170ms ease, border-color 170ms ease, background-color 170ms ease;
}

.root-gateway .root-spotlight-card:hover,
.root-gateway .root-spotlight-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 224, 146, 0.42);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.root-gateway .root-spotlight-media,
.root-gateway .root-spotlight-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.root-gateway .root-spotlight-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
}

.root-gateway .root-spotlight-icon-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
}

.root-gateway .root-spotlight-icon-fallback {
  color: #ffe59f;
  font-size: 2.35rem;
}

.root-gateway .root-spotlight-copy {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.root-gateway .root-spotlight-copy small {
  color: #f4c96f;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.root-gateway .root-spotlight-copy strong {
  color: #fff3c7;
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.12;
}

.root-gateway .root-spotlight-copy span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: rgba(244, 239, 228, 0.72);
  font-size: 0.84rem;
  line-height: 1.42;
}

.root-gateway .root-domain-section-M .root-spotlight-card-compact {
  grid-template-rows: 1fr;
  min-height: 0;
  padding: 0.88rem 1rem 0.95rem;
}

.root-gateway .root-domain-section-M .root-spotlight-card-compact .root-spotlight-copy {
  gap: 0.25rem;
}

.root-gateway .root-domain-section-M .root-spotlight-title-row {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin: 0 0 0.22rem;
  min-width: 0;
}

.root-gateway .root-domain-section-M .root-spotlight-title-icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  color: #ffe59f;
  font-size: 1.42rem;
  line-height: 1;
}

.root-gateway .root-domain-section-M .root-spotlight-title-icon-img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
}

.root-gateway .root-domain-section-M .root-spotlight-title-row strong {
  min-width: 0;
  margin: 0;
}

.root-gateway .root-domain-section-M .root-spotlight-copy span:last-child {
  -webkit-line-clamp: 2;
}

@media (max-width: 1024px) {
  .root-gateway .root-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-gateway .root-domain-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .root-gateway .root-spotlight-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .root-gateway .root-language-bar {
    align-items: stretch;
    border-radius: 18px;
    flex-direction: column;
  }

  .root-gateway .root-language-links,
  .root-gateway .root-language-link,
  .root-gateway .root-domain-link {
    width: 100%;
  }

  .root-gateway .root-language-link,
  .root-gateway .root-domain-link {
    justify-content: center;
  }

  .root-gateway .root-route-grid {
    grid-template-columns: 1fr;
  }

  .root-gateway .root-domain-section {
    border-radius: 20px;
  }
}

/* v0.1.34 root refinement pass */
.root-gateway .root-route-section {
  padding: clamp(1.1rem, 2vw, 1.45rem);
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(244, 201, 111, 0.32), transparent 30%),
    linear-gradient(145deg, rgba(58, 34, 14, 0.96), rgba(36, 20, 8, 0.97));
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 24px 58px rgba(0, 0, 0, 0.28);
}

.root-gateway .root-route-section .root-spotlight-media {
  height: 140px;
  overflow: hidden;
}

.root-gateway .root-route-section .root-spotlight-image {
  object-fit: cover;
  object-position: 50% 50% !important;
  min-height: 140px;
}

.root-gateway .root-route-section .gateway-section-heading {
  margin-bottom: 1rem;
}

.root-gateway .root-route-section .gateway-section-heading h2,
.root-gateway .root-matrix-zone .gateway-section-heading h2,
.root-gateway .latest-attractions .gateway-section-heading h2 {
  color: #ffe59f !important;
}

.root-gateway .root-route-section .gateway-section-heading span,
.root-gateway .root-matrix-zone .gateway-section-heading span,
.root-gateway .latest-attractions .gateway-section-heading span {
  color: rgba(255, 247, 230, 0.78) !important;
}

.root-gateway .root-route-section .root-spotlight-card {
  background: rgba(48, 38, 20, 0.94);
  border-color: rgba(255, 232, 173, 0.2);
}

.root-gateway .root-route-section .root-spotlight-copy strong,
.root-gateway .root-domain-section .root-spotlight-copy strong {
  color: #fff2bf;
}

.root-gateway .root-route-section .root-spotlight-copy span:last-child,
.root-gateway .root-domain-section .root-spotlight-copy span:last-child {
  color: rgba(255, 247, 230, 0.82);
}

.root-gateway .latest-attractions {
  margin: 3.2rem 0 2.6rem;
}

.root-gateway .attraction-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.root-gateway .attraction-card {
  min-height: 176px;
  padding: 1rem;
  border-radius: 18px;
}

.root-gateway .attraction-icon {
  right: 0.95rem;
  top: 0.82rem;
  font-size: 1.82rem;
}

.root-gateway .attraction-orbit {
  right: -64px;
  top: -64px;
  width: 170px;
  height: 170px;
}

.root-gateway .attraction-badge {
  padding: 0.26rem 0.52rem;
  font-size: 0.68rem;
}

.root-gateway .attraction-copy {
  max-width: 88%;
  margin-top: 2.15rem;
}

.root-gateway .attraction-copy h3 {
  margin: 0.22rem 0 0.38rem !important;
  font-size: clamp(1.15rem, 2vw, 1.52rem);
}

.root-gateway .attraction-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.82rem;
  line-height: 1.35;
}

.root-gateway .attraction-footer {
  margin-top: 0.85rem;
  padding-top: 0.62rem;
  font-size: 0.74rem;
}

.root-gateway .latest-attractions .gateway-section-heading h2,
.root-gateway .root-matrix-zone .gateway-section-heading h2 {
  color: #6b4218 !important;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}

.root-gateway .latest-attractions .gateway-section-heading span,
.root-gateway .root-matrix-zone .gateway-section-heading span {
  color: #9b6a21 !important;
}

.root-gateway .root-matrix-zone {
  margin-top: 3.4rem;
}

.root-gateway .root-domain-sections {
  margin-top: 1rem;
  gap: 1.8rem;
}

.root-gateway .root-domain-section {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.root-gateway .root-spotlight-card {
  min-height: 206px;
}

.root-gateway .root-spotlight-media,
.root-gateway .root-spotlight-icon {
  height: 120px;
  background: rgba(0, 0, 0, 0.26);
}

.root-gateway .root-spotlight-card-hd .root-spotlight-image {
  object-fit: cover;
}

.root-gateway .root-bottom-search {
  margin: 2.5rem auto 1.8rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.root-gateway .root-bottom-search .site-search {
  margin: 0 auto !important;
}

.root-gateway .root-bottom-search .site-search-inner {
  max-width: 860px;
  margin: 0 auto;
}

.root-gateway .root-bottom-search .site-search-input {
  color: #333 !important;
  background: #fff !important;
  border: 1px solid rgba(33, 33, 33, 0.32) !important;
  border-radius: 8px;
}

.root-gateway .root-bottom-search .site-search-input::placeholder {
  color: rgba(85, 85, 85, 0.62) !important;
}

.root-gateway .root-bottom-search .site-search-form button {
  color: #f7edd5 !important;
  background: #1f211f !important;
  border-color: rgba(33, 33, 33, 0.32) !important;
}


/* S2-J1 Task-4: one-box Muzi Search field with passive magnifier. */
.site-search-form {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

.site-search-input {
  box-sizing: border-box !important;
  padding-right: 44px !important;
}

.site-search-form button {
  display: none !important;
}

.site-search-affordance {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  pointer-events: none;
  transform: translateY(-50%);
}

.site-search-affordance::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(72, 64, 51, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(72, 64, 51, 0.14) 0 2px, transparent 2px),
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.site-search-glyph {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(61, 55, 46, 0.76);
  border-radius: 50%;
  opacity: 0.82;
}

.site-search-glyph::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(61, 55, 46, 0.76);
  transform: rotate(45deg);
}

.site-search:focus-within .site-search-affordance::before {
  border-color: rgba(156, 37, 37, 0.42);
  box-shadow:
    0 0 10px rgba(156, 37, 37, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.site-search:focus-within .site-search-glyph {
  border-color: rgba(118, 38, 35, 0.9);
  opacity: 1;
}

.site-search:focus-within .site-search-glyph::after {
  background: rgba(118, 38, 35, 0.9);
}

.muzi-nav-v21 .site-header-search .site-search-form {
  display: block !important;
  width: 100%;
}

.muzi-nav-v21 .site-header-search .site-search-input {
  height: 38px;
  border: 1px solid rgba(42, 37, 31, 0.34);
  border-radius: 0;
  background: #fff;
}

.muzi-nav-v21 .site-header-search .site-search-affordance {
  right: 7px;
}

.root-gateway .root-bottom-search .site-search-affordance::before {
  border-color: rgba(33, 33, 33, 0.28);
}

@media (max-width: 900px) {
  .root-gateway .attraction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .root-gateway .attraction-grid {
    grid-template-columns: 1fr;
  }

  .root-gateway .attraction-card {
    min-height: 166px;
  }
}

/* v0.1.35 title section pulldown layout */
.site-header-pill-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.5rem;
  max-width: 100%;
  flex-wrap: wrap;
}

.site-header-pill-row > * {
  margin: 0 !important;
}



/* Muzi Section Pulldown (v0.1.35) */
.site-section-pulldown-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  border: 1px solid rgba(150,150,150,0.22);
  border-radius: 16px;
  background: rgba(180,180,180,0.08);
  color: rgba(120,120,120,0.75);
  font: 500 0.82rem/1.4 var(--font-sans);
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.site-section-pulldown-pill:hover {
  border-color: rgba(153, 45, 35, 0.38);
  background: rgba(153, 45, 35, 0.08);
  color: var(--primary-color);
}
.site-section-pulldown-pill:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.site-section-pulldown-separator {
  margin: 0 0.55rem;
  color: rgba(150,150,150,0.45);
  font-size: 0.72rem;
}
.site-breadcrumb-item-container .site-section-pulldown-pill {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}


/* Muzi Section Pulldown Dropdown Icons (v0.1.35) */
.dropdown-section-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.dropdown-section-icon svg.site-sidebar-hourglass {
  width: 17px;
  height: 14px;
}
.dropdown-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
  flex-shrink: 0;
}


/* Muzi Index Page Heading Stack Left Alignment (v0.1.35) */
.d1-landing-page .h-scroll-inscription .page-heading-stack,
.hd-landing-page .h-scroll-inscription .page-heading-stack {
  margin-inline: 0 !important;
}

/* Muzi M/Mesh dark-theme breadcrumb overrides (v0.1.35) */
body.m-mesh-body .site-section-pulldown-pill {
  color: #eafff3 !important;
  border-color: rgba(124, 255, 189, 0.42) !important;
  background: linear-gradient(180deg, rgba(7, 22, 17, 0.92), rgba(3, 11, 8, 0.86)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 0 20px rgba(84, 255, 174, 0.12) !important;
}
body.m-mesh-body .site-section-pulldown-pill:hover {
  border-color: rgba(124, 255, 189, 0.7) !important;
  background: linear-gradient(180deg, rgba(12, 36, 28, 0.96), rgba(6, 18, 14, 0.92)) !important;
  color: #b4ffe0 !important;
}
body.m-mesh-body .site-section-pulldown-separator {
  color: rgba(124, 255, 189, 0.8) !important;
  text-shadow: 0 0 10px rgba(124, 255, 189, 0.34);
}

body.m-mesh-body .site-breadcrumb-row .site-section-pulldown-separator,
body.m-mesh-body .site-breadcrumb-row .site-breadcrumb-separator {
  color: rgba(18, 38, 29, 0.92) !important;
  text-shadow: none !important;
}
body.m-mesh-body .site-breadcrumb-trigger {
  color: #eafff3 !important;
  border-color: rgba(124, 255, 189, 0.42) !important;
  background: linear-gradient(180deg, rgba(7, 22, 17, 0.92), rgba(3, 11, 8, 0.86)) !important;
}
body.m-mesh-body .site-breadcrumb-trigger:hover {
  border-color: rgba(124, 255, 189, 0.7) !important;
  color: #b4ffe0 !important;
}
/* Force dropdown menu to always use dark-on-light even on dark M pages */
body.m-mesh-body .site-breadcrumb-dropdown {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}
body.m-mesh-body .site-breadcrumb-dropdown-item {
  color: #4a4a4a !important;
}
body.m-mesh-body .site-breadcrumb-dropdown-item:hover {
  background: rgba(153, 45, 35, 0.08) !important;
  color: var(--primary-color) !important;
}
body.m-mesh-body .site-breadcrumb-dropdown-item.is-active {
  font-weight: 700 !important;
  color: #fff8e8 !important;
  background: #992d23 !important;
}
body.m-mesh-body .site-breadcrumb-dropdown-item.is-active:hover {
  background: #82221b !important;
}
body.m-mesh-body .site-breadcrumb-dropdown-item .dropdown-section-icon {
  color: inherit !important;
}


/* Muzi ME Relations Map (v0.1.35) */
.me-relations-page {
  width: min(1540px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 92px 0 3rem;
  color: #eafff3;
}
.me-relations-hero {
  margin-bottom: 2rem;
}
.me-selector-container {
  margin-top: 1.5rem;
  max-width: 480px;
}
.me-select {
  width: 100%;
  padding: 10px 16px;
  background: rgba(180, 180, 180, 0.08);
  border: 1px solid rgba(124, 255, 189, 0.42);
  border-radius: 12px;
  color: #eafff3;
  font: 500 0.9rem var(--font-sans);
  outline: none;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.me-select option, .me-select optgroup {
  background: #07100e;
  color: #eafff3;
}
.me-select:hover, .me-select:focus-visible {
  border-color: rgba(124, 255, 189, 0.8);
  box-shadow: 0 0 12px rgba(84, 255, 174, 0.16);
}
.me-explorer-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 1.05rem auto 0;
  max-width: 1240px;
}
.me-explorer-layout.dir-mode {
  grid-template-columns: 1fr;
}
.me-source-panel {
  display: flex;
  flex-direction: column;
}
.me-detail-common-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(150, 150, 150, 0.08);
}
.me-back-link {
  font-size: 0.9rem;
  color: rgba(124, 255, 189, 0.8);
  text-decoration: none;
  font-weight: 600;
  transition: color 140ms ease;
}
.me-back-link:hover {
  color: #7cffbd;
}
.me-connections-count {
  font-size: 0.9rem;
  color: rgba(232, 255, 242, 0.6);
}
.me-connections-count strong {
  color: #7cffbd;
}

/* v0.1.36 compact M surfaces */
.x-matrix-page {
  padding-top: 54px;
}

.x-matrix-page .x-hero {
  margin-bottom: 0.85rem;
}

.x-matrix-page .x-hero .site-breadcrumb-row {
  margin-bottom: 0.45rem;
}

.x-matrix-page .x-hero-grid {
  padding: clamp(0.85rem, 1.9vw, 1.35rem);
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(210, 255, 230, 0.1), 0 16px 42px rgba(0, 0, 0, 0.32), 0 0 28px rgba(38, 255, 145, 0.08);
}


.x-matrix-page .x-hero-grid {
  overflow: visible;
}

.x-matrix-page .x-hero-grid > .site-breadcrumb-row {
  position: relative;
  z-index: 2;
  justify-content: flex-start;
  max-width: 100%;
  margin-bottom: 0.7rem;
}
.x-matrix-page .x-hero h1 {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.x-matrix-page .x-kicker {
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}

.x-matrix-page .x-lede {
  max-width: 760px;
  margin-top: 0.45rem;
  font-size: clamp(0.88rem, 1.3vw, 1rem);
  line-height: 1.45;
}

.x-matrix-page .x-stat-row {
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.x-matrix-page .x-stat-row span {
  padding: 0.36rem 0.58rem;
  font-size: 0.82rem;
}
.x-matrix-page .x-hero-grid:has(> .x-stat-row) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
  grid-template-areas:
    "nav nav"
    "title stats"
    "lede stats";
  column-gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
}

.x-matrix-page .x-hero-grid:has(> .x-stat-row) > .site-breadcrumb-row {
  grid-area: nav;
}

.x-matrix-page .x-hero-grid:has(> .x-stat-row) > h1 {
  grid-area: title;
}

.x-matrix-page .x-hero-grid:has(> .x-stat-row) > .x-lede {
  grid-area: lede;
}

.x-matrix-page .x-hero-grid:has(> .x-stat-row) > .x-stat-row {
  grid-area: stats;
  justify-self: end;
  align-self: center;
  width: min(100%, 230px);
  margin-top: 0;
  padding: 0.48rem;
  display: grid;
  gap: 0.42rem;
  border: 1px solid rgba(124, 255, 189, 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(1, 18, 12, 0.7), rgba(2, 11, 9, 0.44));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.18);
}

.x-matrix-page .x-hero-grid:has(> .x-stat-row) > .x-stat-row span {
  width: 100%;
  justify-content: space-between;
  border-radius: 10px;
  padding: 0.46rem 0.62rem;
}

@media (max-width: 760px) {
  .x-matrix-page .x-hero-grid:has(> .x-stat-row) {
    display: block;
  }

  .x-matrix-page .x-hero-grid:has(> .x-stat-row) > .x-stat-row {
    width: 100%;
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
  }

  .x-matrix-page .x-hero-grid:has(> .x-stat-row) > .x-stat-row span {
    width: auto;
    justify-content: flex-start;
    border-radius: 999px;
  }
}

.x-matrix-page .m-module-grid {
  gap: clamp(0.8rem, 1.8vw, 1.1rem);
}

.x-matrix-page .m-module-tile {
  min-height: 220px;
  aspect-ratio: 1.08 / 1;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: 22px;
}

.x-matrix-page .m-module-tile strong {
  font-size: clamp(1.35rem, 2.7vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.x-matrix-page.m-landing-page .m-module-grid,
.x-matrix-page.m-cascade-page .m-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.85rem;
}

.x-matrix-page.m-landing-page .m-module-tile,
.x-matrix-page.m-cascade-page .m-module-tile {
  min-height: 130px;
  aspect-ratio: auto;
  align-content: start;
  gap: 0.45rem;
  padding: 0.9rem;
  border-radius: 18px;
}

.x-matrix-page.m-landing-page .m-module-tile strong,
.x-matrix-page.m-cascade-page .m-module-tile strong {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.x-matrix-page.m-landing-page .m-module-id,
.x-matrix-page.m-cascade-page .m-module-id {
  padding: 0.24rem 0.46rem;
  font-size: 0.68rem;
}

.x-matrix-page.m-landing-page .m-module-tile p,
.x-matrix-page.m-cascade-page .m-module-tile p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.x-matrix-page .m-me-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
}

.x-matrix-page .m-me-module-grid .m-module-tile {
  min-height: 178px;
  aspect-ratio: auto;
  align-content: start;
  gap: 0.58rem;
  padding: clamp(1rem, 1.6vw, 1.25rem);
  border-radius: 20px;
}

.x-matrix-page .m-me-module-grid .m-module-tile strong {
  font-size: clamp(1.24rem, 2vw, 1.82rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.x-matrix-page .m-me-module-grid .m-module-id,
.x-matrix-page .m-me-module-grid .m-module-stats {
  padding: 0.28rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.x-matrix-page .m-me-module-grid .m-module-tile p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.x-matrix-page .m-module-grid,
.x-matrix-page.m-landing-page .m-module-grid,
.x-matrix-page.m-cascade-page .m-module-grid,
.x-matrix-page .m-me-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 300px));
  justify-content: start;
  align-items: stretch;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
}

.x-matrix-page .m-module-tile,
.x-matrix-page.m-landing-page .m-module-tile,
.x-matrix-page.m-cascade-page .m-module-tile,
.x-matrix-page .m-me-module-grid .m-module-tile {
  min-height: 0;
  aspect-ratio: 1 / 0.92;
  align-content: end;
  gap: 0.6rem;
  padding: clamp(1rem, 1.8vw, 1.3rem);
  border-radius: 18px;
}

.x-matrix-page .m-module-tile strong,
.x-matrix-page.m-landing-page .m-module-tile strong,
.x-matrix-page.m-cascade-page .m-module-tile strong,
.x-matrix-page .m-me-module-grid .m-module-tile strong {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.x-matrix-page .m-module-tile p,
.x-matrix-page.m-landing-page .m-module-tile p,
.x-matrix-page.m-cascade-page .m-module-tile p,
.x-matrix-page .m-me-module-grid .m-module-tile p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.x-matrix-page .m-module-id,
.x-matrix-page .m-module-stats,
.x-matrix-page.m-landing-page .m-module-id,
.x-matrix-page.m-cascade-page .m-module-id,
.x-matrix-page .m-me-module-grid .m-module-id,
.x-matrix-page .m-me-module-grid .m-module-stats {
  padding: 0.26rem 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.m-module-stats,
.m-module-id {
  position: relative;
  z-index: 1;
}

.m-module-stats {
  width: fit-content;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(56, 223, 255, 0.24);
  border-radius: 999px;
  color: rgba(232, 255, 242, 0.72);
  background: rgba(0, 0, 0, 0.24);
  font-size: 0.78rem;
  font-weight: 800;
}

/* v0.1.36 compact ME detail diagram */
.me-detail-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.me-connector-svg {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.me-connector-path {
  fill: none;
  stroke: rgba(23, 58, 47, 0.7);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(23, 58, 47, 0.12));
}

.me-connector-dot {
  fill: rgba(23, 58, 47, 0.78);
  filter: drop-shadow(0 0 4px rgba(23, 58, 47, 0.16));
}

.me-detail-host-row {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 20px;
  background: transparent;
  border: 0;
}

.me-detail-host-wrap {
  position: relative;
  z-index: 3;
  width: min(360px, 100%);
}

.me-connector-stem {
  width: 2px;
  height: 34px;
  margin: 0 auto -1px;
  background: transparent;
  box-shadow: none;
}

.me-detail-targets-row {
  position: relative;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 0 1rem 1.25rem;
  border-radius: 20px;
  background: transparent;
  border: 0;
  scrollbar-gutter: stable;
}

.me-detail-targets-wrap {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: max-content;
  min-width: min-content;
  gap: 1rem;
  padding-top: 1rem;
  margin: 0 auto;
}

.me-detail-targets-wrap::before {
  display: none;
}

.me-detail-targets-wrap.me-detail-empty::before {
  display: none;
}

.me-target-item {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 280px;
  width: 280px;
  flex-direction: column;
}

.me-target-item::before {
  display: none;
}

.me-target-notation {
  position: relative;
  z-index: 3;
  min-height: 2.15rem;
  margin: 0 0 0.38rem;
  padding: 0 0.25rem;
  text-align: center;
}

.me-target-notation p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(23, 58, 47, 0.82);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.me-relation-card {
  text-decoration: none;
  color: inherit;
}
.me-source-card {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 24px;
  border: 1px solid rgba(124, 255, 189, 0.22);
  background: linear-gradient(180deg, rgba(7, 22, 17, 0.86), rgba(3, 11, 8, 0.92));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}
.me-theme-c .me-source-card { border-color: rgba(255, 108, 91, 0.3); background: linear-gradient(180deg, rgba(28, 9, 7, 0.86), rgba(15, 4, 3, 0.92)); }
.me-theme-h .me-source-card { border-color: rgba(255, 227, 155, 0.3); background: linear-gradient(180deg, rgba(26, 22, 11, 0.86), rgba(13, 11, 5, 0.92)); }
.me-theme-a .me-source-card { border-color: rgba(56, 223, 255, 0.3); background: linear-gradient(180deg, rgba(7, 20, 26, 0.86), rgba(3, 10, 13, 0.92)); }

.me-domain-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
  background: rgba(124, 255, 189, 0.16);
  color: #7cffbd;
}
.me-theme-c .me-domain-badge { background: rgba(255, 108, 91, 0.16); color: #ff6c5b; }
.me-theme-h .me-domain-badge { background: rgba(255, 227, 155, 0.16); color: #ffe39b; }
.me-theme-a .me-domain-badge { background: rgba(56, 223, 255, 0.16); color: #38dfff; }

.me-source-icon {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  object-fit: cover;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.me-source-id {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(232, 255, 242, 0.48);
  margin-bottom: 0.4rem;
}
.me-source-title {
  font: 700 1.6rem/1.2 var(--font-classic);
  color: #ffffff;
  margin: 0 0 0.8rem;
}
.me-source-tagline {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(232, 255, 242, 0.76);
  margin-bottom: 1.5rem;
}
.me-source-stats {
  font-size: 0.82rem;
  color: rgba(232, 255, 242, 0.6);
  border-top: 1px solid rgba(150, 150, 150, 0.12);
  padding-top: 1rem;
  width: 100%;
  margin-bottom: 1.2rem;
}
.me-source-stats strong {
  font-size: 1.2rem;
  color: #eafff3;
  margin-right: 0.2rem;
}
.me-back-btn {
  font-size: 0.82rem;
  color: rgba(124, 255, 189, 0.76);
  text-decoration: none;
  transition: color 140ms ease;
}
.me-back-btn:hover {
  color: #7cffbd;
}

/* Right Connections Panel */
.me-connections-panel {
  min-width: 0;
}
.me-filter-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.me-filter-btn {
  background: rgba(180, 180, 180, 0.06);
  border: 1px solid rgba(150, 150, 150, 0.16);
  color: rgba(232, 255, 242, 0.64);
  padding: 6px 14px;
  border-radius: 18px;
  font: 500 0.8rem var(--font-sans);
  cursor: pointer;
  transition: all 140ms ease;
}
.me-filter-btn:hover {
  border-color: rgba(124, 255, 189, 0.42);
  color: #eafff3;
}
.me-filter-btn.active {
  background: rgba(124, 255, 189, 0.16);
  border-color: #7cffbd;
  color: #eafff3;
}
.me-connections-grid { }
.me-no-relations {
  grid-column: 1 / -1;
  padding: 3rem;
  text-align: center;
  color: rgba(232, 255, 242, 0.42);
  border: 1px dashed rgba(150, 150, 150, 0.12);
  border-radius: 18px;
}
.me-relation-card {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border-radius: 20px;
  border: 1px solid rgba(150, 150, 150, 0.14);
  background: linear-gradient(135deg, rgba(8, 22, 16, 0.72) 0%, rgba(3, 10, 8, 0.88) 100%);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.me-detail-mode .me-relation-card {
  width: 100%;
  min-height: 172px;
  justify-content: space-between;
  padding: 0.9rem;
  border-radius: 18px;
}

.me-detail-mode .me-host-card {
  min-height: 176px;
}
.me-relation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 189, 0.45);
  box-shadow: 0 8px 24px rgba(84, 255, 174, 0.14);
}
.me-card-theme-c { border-color: rgba(255, 108, 91, 0.14); }
.me-card-theme-h { border-color: rgba(255, 227, 155, 0.14); }
.me-card-theme-a { border-color: rgba(56, 223, 255, 0.14); }

.me-card-theme-c:hover { border-color: rgba(255, 108, 91, 0.45); box-shadow: 0 8px 24px rgba(255, 108, 91, 0.12); }
.me-card-theme-h:hover { border-color: rgba(255, 227, 155, 0.45); box-shadow: 0 8px 24px rgba(255, 227, 155, 0.12); }
.me-card-theme-a:hover { border-color: rgba(56, 223, 255, 0.45); box-shadow: 0 8px 24px rgba(56, 223, 255, 0.12); }

.me-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}
.me-card-pid {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(232, 255, 242, 0.45);
  letter-spacing: 0.06em;
}
.me-card-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}
.me-card-badge.cross-badge {
  background: rgba(124, 255, 189, 0.16);
  color: #7cffbd;
}
.me-card-badge.intra-badge {
  background: rgba(150, 150, 150, 0.12);
  color: rgba(232, 255, 242, 0.64);
}
.me-card-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.me-detail-mode .me-card-body {
  flex: 1;
  gap: 0.85rem;
  margin-bottom: 0;
}

.me-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
}

.m-relations-page .me-card-icon {
  width: 65px;
  height: 65px;
  flex: 0 0 65px;
  border: 3px solid rgba(60, 60, 60, 0.7);
  border-radius: 8px;
  background: rgba(60, 60, 60, 0.7);
  box-shadow: 0 4px 12px rgba(60, 60, 60, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.me-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.me-card-tagline {
  font-size: 0.78rem;
  color: rgba(232, 255, 242, 0.58);
  margin: 0.15rem 0 0;
}

.me-detail-mode .me-card-tagline {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.me-card-copy small {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(232, 255, 242, 0.38);
}
.me-card-copy strong {
  font: 600 1.05rem var(--font-sans);
  color: #ffffff;
}

.me-detail-mode .me-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.me-card-notation {
  border-top: 1px solid rgba(150, 150, 150, 0.08);
  padding-top: 0.6rem;
}
.me-card-notation p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(232, 255, 242, 0.72);
  margin: 0;
}

/* Directory Dashboard Mode */
.me-directory-container {
  width: 100%;
}
.me-directory-lede {
  font-size: 1.05rem;
  color: rgba(232, 255, 242, 0.64);
  margin-bottom: 2.5rem;
}
.me-directory-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.me-dir-lane-title {
  font: 700 1.25rem var(--font-sans);
  color: #ffffff;
  margin-bottom: 1.2rem;
  border-left: 3px solid #7cffbd;
  padding-left: 0.6rem;
}
.me-dir-lane-c .me-dir-lane-title { border-left-color: #ff6c5b; }
.me-dir-lane-h .me-dir-lane-title { border-left-color: #ffe39b; }
.me-dir-lane-a .me-dir-lane-title { border-left-color: #38dfff; }

.me-dir-lane-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.me-dir-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  background: rgba(180, 180, 180, 0.04);
  border: 1px solid rgba(150, 150, 150, 0.1);
  cursor: pointer;
  transition: all 140ms ease;
}
.me-dir-card:hover {
  transform: translateX(4px);
  background: rgba(124, 255, 189, 0.06);
  border-color: rgba(124, 255, 189, 0.38);
}
.me-dir-lane-c .me-dir-card:hover { background: rgba(255, 108, 91, 0.06); border-color: rgba(255, 108, 91, 0.38); }
.me-dir-lane-h .me-dir-card:hover { background: rgba(255, 227, 155, 0.06); border-color: rgba(255, 227, 155, 0.38); }
.me-dir-lane-a .me-dir-card:hover { background: rgba(56, 223, 255, 0.06); border-color: rgba(56, 223, 255, 0.38); }

.me-dir-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}
.me-dir-card-copy {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.me-dir-card-copy small {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(232, 255, 242, 0.34);
}
.me-dir-card-copy strong {
  font-size: 0.92rem;
  color: #eafff3;
}
.me-dir-count {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(150, 150, 150, 0.1);
  color: rgba(232, 255, 242, 0.6);
}
.me-dir-card:hover .me-dir-count {
  background: rgba(124, 255, 189, 0.2);
  color: #7cffbd;
}
.me-dir-lane-c .me-dir-card:hover .me-dir-count { background: rgba(255, 108, 91, 0.2); color: #ff6c5b; }
.me-dir-lane-h .me-dir-card:hover .me-dir-count { background: rgba(255, 227, 155, 0.2); color: #ffe39b; }
.me-dir-lane-a .me-dir-card:hover .me-dir-count { background: rgba(56, 223, 255, 0.2); color: #38dfff; }

.x-chip-count {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.75;
  margin-left: 0.2rem;
  color: rgba(124, 255, 189, 0.72);
}

@media (max-width: 1024px) {
  .x-matrix-page .m-me-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .me-detail-host-row,
  .me-detail-targets-row {
    padding: 1.2rem;
  }
  .me-detail-targets-wrap {
    gap: 0.75rem;
  }
  .me-target-item {
    flex-basis: 260px;
    width: 260px;
  }
  .me-detail-targets-wrap::before {
    left: 130px;
    right: 130px;
  }
  .me-directory-lanes {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 760px) {
  .x-matrix-page .m-me-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .x-matrix-page .m-me-module-grid {
    grid-template-columns: 1fr;
  }
}


/* M module cards: compact balanced tile system */
.x-matrix-page .m-module-grid,
.x-matrix-page.m-landing-page .m-module-grid,
.x-matrix-page.m-cascade-page .m-module-grid,
.x-matrix-page .m-me-module-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 292px));
  justify-content: center;
  align-items: stretch;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

.x-matrix-page .m-module-tile,
.x-matrix-page.m-landing-page .m-module-tile,
.x-matrix-page.m-cascade-page .m-module-tile,
.x-matrix-page .m-me-module-grid .m-module-tile {
  min-height: 0;
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: auto auto minmax(0.8rem, 0.85fr) auto minmax(0.7rem, 1fr) auto;
  align-content: stretch;
  align-items: start;
  gap: 0.52rem;
  padding: clamp(1.05rem, 1.8vw, 1.28rem);
  border-radius: 20px;
  border-color: rgba(153, 255, 210, 0.28);
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 255, 189, 0.18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(56, 223, 255, 0.16), transparent 34%),
    linear-gradient(150deg, rgba(8, 36, 25, 0.96) 0%, rgba(5, 17, 18, 0.98) 48%, rgba(7, 11, 16, 0.98) 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.11), inset 0 -1px rgba(124, 255, 189, 0.08), 0 22px 46px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.x-matrix-page .m-module-tile::before {
  opacity: 0.62;
  background:
    repeating-linear-gradient(90deg, rgba(124, 255, 189, 0.055) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(56, 223, 255, 0.04) 0 1px, transparent 1px 42px);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, 0.7) 42%, transparent 82%);
}

.x-matrix-page .m-module-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(124, 255, 189, 0.28) 0 1px, transparent 1px 36%),
    linear-gradient(315deg, rgba(56, 223, 255, 0.18) 0 1px, transparent 1px 42%);
  clip-path: polygon(0 0, 100% 0, 100% 31%, 72% 31%, 35% 100%, 0 100%);
  opacity: 0.34;
}

.x-matrix-page .m-module-tile:hover,
.x-matrix-page .m-module-tile:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(124, 255, 189, 0.64);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(124, 255, 189, 0.16), 0 0 34px rgba(84, 255, 174, 0.14), 0 30px 60px rgba(0, 0, 0, 0.34);
}

.x-matrix-page .m-module-id,
.x-matrix-page .m-module-stats,
.x-matrix-page .m-module-tile strong,
.x-matrix-page .m-module-tile p {
  position: relative;
  z-index: 1;
}

.x-matrix-page .m-module-id,
.x-matrix-page.m-landing-page .m-module-id,
.x-matrix-page.m-cascade-page .m-module-id,
.x-matrix-page .m-me-module-grid .m-module-id {
  order: 1;
  grid-row: 1;
  width: fit-content;
  padding: 0.32rem 0.58rem;
  border-color: rgba(124, 255, 189, 0.4);
  color: #8dffc8;
  background: rgba(1, 13, 10, 0.58);
  box-shadow: 0 0 18px rgba(124, 255, 189, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.x-matrix-page .m-module-stats,
.x-matrix-page .m-me-module-grid .m-module-stats {
  order: 3;
  grid-row: 4;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  padding: 0;
  border: 0;
  color: rgba(232, 255, 242, 0.76);
  background: transparent;
  box-shadow: none;
  font-size: 0.72rem;
  letter-spacing: 0;
}

.x-matrix-page .m-module-stats > span,
.x-matrix-page .m-me-module-grid .m-module-stats > span {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.26rem 0.54rem;
  border: 1px solid rgba(56, 223, 255, 0.26);
  border-radius: 999px;
  color: rgba(232, 255, 242, 0.78);
  background: rgba(1, 13, 18, 0.46);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 0 16px rgba(56, 223, 255, 0.06);
}

.x-matrix-page .m-module-tile strong,
.x-matrix-page.m-landing-page .m-module-tile strong,
.x-matrix-page.m-cascade-page .m-module-tile strong,
.x-matrix-page .m-me-module-grid .m-module-tile strong {
  order: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: #f5fff8;
  font-size: clamp(1.58rem, 2.2vw, 2.05rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.x-matrix-page .m-module-tile p,
.x-matrix-page.m-landing-page .m-module-tile p,
.x-matrix-page.m-cascade-page .m-module-tile p,
.x-matrix-page .m-me-module-grid .m-module-tile p {
  order: 4;
  grid-row: 6;
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(232, 255, 242, 0.74);
  min-height: 2.92em;
  font-size: 0.86rem;
  line-height: 1.46;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 760px) {
  .x-matrix-page .m-module-grid,
  .x-matrix-page.m-landing-page .m-module-grid,
  .x-matrix-page.m-cascade-page .m-module-grid,
  .x-matrix-page .m-me-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

@media (max-width: 520px) {
  .x-matrix-page .m-module-grid,
  .x-matrix-page.m-landing-page .m-module-grid,
  .x-matrix-page.m-cascade-page .m-module-grid,
  .x-matrix-page .m-me-module-grid {
    grid-template-columns: 1fr;
  }

  .x-matrix-page .m-module-tile,
  .x-matrix-page.m-landing-page .m-module-tile,
  .x-matrix-page.m-cascade-page .m-module-tile,
  .x-matrix-page .m-me-module-grid .m-module-tile {
    aspect-ratio: auto;
    min-height: 208px;
  }
}
@media (max-width: 520px) {
  .m-he200-page .he200-axis-pulldown {
    flex-basis: 20px;
  }
}
/* ME# Directory Listing Cards (v0.1.35) */
.me-dir-relation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
  margin-top: 0.95rem;
}
.me-dir-relation-card {
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(150, 150, 150, 0.14);
  background: linear-gradient(135deg, rgba(8, 22, 16, 0.72) 0%, rgba(3, 10, 8, 0.88) 100%);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.me-dir-relation-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 255, 189, 0.45);
  box-shadow: 0 8px 24px rgba(84, 255, 174, 0.14);
}
.me-dir-relation-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #7cffbd;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}
.me-dir-relation-elements {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.me-dir-element {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.me-dir-id {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(232, 255, 242, 0.4);
}
.me-dir-element strong {
  font-size: 0.82rem;
  color: #ffffff;
}
.me-dir-arrow {
  font-size: 1.1rem;
  color: rgba(232, 255, 242, 0.3);
}
.me-dir-notation {
  border-top: 1px solid rgba(150, 150, 150, 0.08);
  padding-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(232, 255, 242, 0.72);
  margin: 0;
}

/* ME# Directory Combined Source Cards (v0.1.36) */
.me-dir-relation-grid {
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
}

.me-dir-relation-card-combined {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 150px;
  padding: 1rem;
}

.me-dir-relation-card-combined .me-dir-relation-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.me-dir-relation-count {
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: rgba(124, 255, 189, 0.1);
  color: rgba(232, 255, 242, 0.64);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.me-dir-combined-elements {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

.me-dir-combined-elements .me-dir-arrow {
  align-self: center;
  display: grid;
  min-height: 100%;
  place-items: center;
}

.me-dir-source-element {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.55rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 0.36rem 0.58rem;
  border: 1px solid rgba(232, 255, 242, 0.26);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 189, 0.08), 0 0 10px rgba(232, 255, 242, 0.04);
}

.me-dir-source-element strong {
  font-size: 1.02rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.me-dir-source-element .me-dir-id {
  flex: 0 0 auto;
  font-size: 0.66rem;
  color: rgba(232, 255, 242, 0.48);
}

.me-dir-target-list {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.38rem;
  min-width: 0;
}

.me-dir-target {
  min-width: 0;
}

.me-dir-target-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0.34rem 0.52rem;
  border: 1px solid rgba(232, 255, 242, 0.26);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 189, 0.08), 0 0 10px rgba(232, 255, 242, 0.04);
}

.me-dir-target-heading strong {
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.me-dir-target .me-dir-id {
  flex: 0 0 auto;
  font-size: 0.66rem;
  color: rgba(232, 255, 242, 0.48);
}

@media (max-width: 760px) {
  .me-dir-relation-grid {
    grid-template-columns: 1fr;
  }

  .me-dir-combined-elements {
    grid-template-columns: 1fr;
  }

  .me-dir-combined-elements .me-dir-arrow {
    display: none;
  }
}

/* ME# Cascade Directory Rows (v0.1.36) */
.me-cascade-container {
  max-width: 1180px;
}

.me-cascade-list {
  display: grid;
  gap: 1rem;
  margin-top: 0.95rem;
}

.me-cascade-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid rgba(124, 255, 189, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8, 22, 16, 0.44) 0%, rgba(3, 10, 8, 0.58) 100%);
}

.me-cascade-parent {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  padding: 0.28rem 0.58rem;
  border: 1px solid rgba(124, 255, 189, 0.18);
  border-radius: 999px;
  color: #7cffbd;
  background: rgba(0, 0, 0, 0.2);
}

.me-cascade-parent strong {
  color: rgba(232, 255, 242, 0.88);
  font-size: 0.86rem;
  line-height: 1.15;
}

.me-cascade-parent-id {
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.me-cascade-rows {
  display: grid;
  gap: 0.42rem;
}

.me-cascade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  min-height: 54px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(232, 255, 242, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.me-cascade-row:hover,
.me-cascade-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(124, 255, 189, 0.38);
  background: rgba(124, 255, 189, 0.055);
  box-shadow: 0 8px 24px rgba(84, 255, 174, 0.08);
  outline: none;
}

.me-cascade-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.52rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 0.34rem 0.58rem;
  border: 1px solid rgba(232, 255, 242, 0.26);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(124, 255, 189, 0.08), 0 0 10px rgba(232, 255, 242, 0.04);
}

.me-cascade-pill strong {
  color: #ffffff;
  font-size: 0.92rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.me-cascade-pill small {
  flex: 0 0 auto;
  color: rgba(232, 255, 242, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
}

.me-cascade-source-pill {
  justify-self: end;
}

.me-cascade-arrow {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: rgba(232, 255, 242, 0.34);
  font-size: 1.1rem;
}

.me-cascade-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.36rem;
  min-width: 0;
}

@media (max-width: 760px) {
  .me-cascade-row {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .me-cascade-source-pill,
  .me-cascade-targets {
    justify-self: start;
  }

  .me-cascade-arrow {
    display: none;
  }
}

/* =========================================================================
 * MB2 / ME200 - Canon Spacetime and Canon Dual Axis zoom maps
 * ========================================================================= */

.m-he200-page .x-stat-row.he200-stat-row {
  gap: 1.4rem;
  margin-top: 0.6rem;
}

.he200-toolbar,
.he200-tabs {
  display: none;
}

.he200-control-strip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem auto 0;
  width: 85vw;
  max-width: 1600px;
  padding: 0.42rem 0.72rem;
  background: rgba(245, 240, 230, 0.92);
  border: 1px solid rgba(40, 30, 18, 0.12);
  border-radius: 999px;
  font-size: 0.78rem;
  color: rgba(40, 30, 18, 0.78);
  box-shadow: 0 2px 8px rgba(40, 30, 18, 0.06);
}

.he200-strip-btn {
  background: rgba(40, 30, 18, 0.06);
  border: 1px solid rgba(40, 30, 18, 0.12);
  color: rgba(40, 30, 18, 0.78);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.he200-strip-btn:hover,
.he200-strip-btn:focus-visible {
  background: rgba(244, 200, 111, 0.18);
  border-color: rgba(244, 200, 111, 0.45);
  color: #6b4f1c;
  outline: none;
}

.he200-strip-btn.is-disabled,
.he200-strip-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.he200-strip-btn.is-copied {
  background: rgba(102, 187, 106, 0.22);
  border-color: rgba(102, 187, 106, 0.55);
  color: #2e7d32;
}

.he200-strip-hint {
  flex: 1 1 auto;
  font-size: 0.72rem;
  color: rgba(40, 30, 18, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.he200-strip-tabs {
  display: inline-flex;
  background: rgba(40, 30, 18, 0.06);
  border: 1px solid rgba(40, 30, 18, 0.08);
  border-radius: 999px;
  padding: 2px;
  flex: 0 0 auto;
}

.he200-strip-tab {
  background: transparent;
  border: none;
  color: rgba(40, 30, 18, 0.62);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.18rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.he200-strip-tab:hover {
  color: rgba(40, 30, 18, 0.9);
}

.he200-strip-tab.is-active {
  background: #f4c96f;
  color: #2a1e0a;
  box-shadow: 0 1px 3px rgba(40, 30, 18, 0.2);
}

.he200-strip-tab:focus-visible {
  outline: 2px solid #f4c96f;
  outline-offset: 1px;
}

.he200-tab-panel {
  margin: 0.85rem auto 1.6rem;
  width: 85vw;
  max-width: 1600px;
  display: none;
}

.he200-tab-panel.is-active {
  display: block;
}

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

.m-he200-page .he200-control-strip,
.m-he200-page .he200-tab-panel,
.m-he200-page .he200-grid {
  width: 100%;
  max-width: none;
}
.he200-grid {
  --he200-row-h: 36px;
  --he200-cell-gap: 1px;
  background: rgba(245, 240, 230, 0.7);
  border: 1px solid rgba(40, 30, 18, 0.18);
  border-radius: 14px;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 85vw;
  max-width: 1600px;
  margin: 0 auto;
  overflow: visible;
}

.he200-row {
  display: grid;
  grid-template-columns: 132px repeat(var(--he200-cols, 13), minmax(60px, 1fr));
  gap: 0;
  align-items: stretch;
  position: relative;
}

.he200-corner-spacer {
  min-height: 0;
}

.he200-col-spacer {
  min-height: 0;
}

.he200-row-footer .he200-corner-spacer {
  align-self: end;
}

.he200-row-top-spacer {
  display: grid;
  grid-template-columns: 132px repeat(var(--he200-cols, 13), minmax(60px, 1fr));
  gap: 0;
  min-height: 6px;
}

.he200-axis-x-label {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border-left: 1px solid rgba(40, 30, 18, 0.12);
  border-top: 1px solid rgba(40, 30, 18, 0.12);
  background: #fafaf6;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.he200-row-footer .he200-axis-x-label {
  background: #f4f4ee;
  border-top: 2px solid rgba(40, 30, 18, 0.18);
}

.he200-axis-x-label .he200-axis-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: 100%;
  min-height: 28px;
  padding: 0.18rem 0.4rem;
  background: transparent;
  border: none;
  color: #1a1208;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
}

.he200-axis-x-id {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.06rem 0.36rem;
  border-radius: 6px;
  background: rgba(40, 30, 18, 0.08);
  color: #1a1208;
  flex: 0 0 auto;
}

.he200-axis-x-title {
  font-size: 0.72rem;
  color: #1a1208;
  font-weight: 500;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
  word-break: keep-all;
}

.he200-axis-btn:hover,
.he200-axis-btn:focus-visible,
.he200-axis-x-label .he200-axis-btn:hover,
.he200-axis-x-label .he200-axis-btn:focus-visible {
  background: rgba(244, 200, 111, 0.18);
  outline: none;
}

.he200-axis-x-label.is-drilled .he200-axis-btn,
.he200-axis-y-label.is-drilled .he200-axis-btn {
  background: #f4c96f;
  color: #1a1208;
}

.he200-axis-x-label.is-drilled,
.he200-axis-y-label.is-drilled {
  background: rgba(244, 200, 111, 0.25);
}

.he200-axis-btn {
  background: transparent;
  border: none;
  color: inherit;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  padding: 0.18rem 0.55rem;
}

.he200-axis-y-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.36rem;
  background: #fafaf6;
  border-left: 1px solid rgba(40, 30, 18, 0.12);
  border-top: 1px solid rgba(40, 30, 18, 0.12);
  border-radius: 0;
  padding: 0.18rem 0.45rem;
  font-size: 0.74rem;
  position: sticky;
  left: 0;
  z-index: 3;
  min-height: 22px;
  flex-wrap: wrap;
}

.he200-axis-x-label:hover,
.he200-axis-x-label:focus-within,
.he200-axis-y-label:hover,
.he200-axis-y-label:focus-within {
  z-index: 300;
}

.he200-axis-y-label .he200-axis-btn {
  padding: 0.06rem 0.36rem;
  font-weight: 700;
  font-size: 0.7rem;
  background: rgba(40, 30, 18, 0.08);
  color: #1a1208;
  border-radius: 6px;
}

.he200-axis-y-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
  color: #1a1208;
  font-weight: 500;
  word-break: keep-all;
  flex: 1 1 auto;
}

.he200-axis-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: calc(100% - 0.32rem);
  margin-inline: auto;
  min-width: 0;
  border-radius: 999px;
  background: #f8f4e9;
  border: 1px solid rgba(40, 30, 18, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  z-index: 2;
}

.he200-axis-main.he200-axis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.28rem;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-radius: 999px 0 0 999px;
  padding: 0.12rem 0.32rem;
  background: transparent;
}

.he200-axis-split:hover,
.he200-axis-split:focus-within,
.he200-axis-split.is-open {
  z-index: 320;
}

.he200-axis-y-label .he200-axis-main.he200-axis-btn {
  background: transparent;
}

.he200-axis-pulldown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  border: 0;
  border-left: 1px solid rgba(40, 30, 18, 0.14);
  border-radius: 0 999px 999px 0;
  background: rgba(40, 30, 18, 0.06);
  color: #1a1208;
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}

.he200-axis-pulldown:hover,
.he200-axis-pulldown:focus-visible,
.he200-axis-split.is-open .he200-axis-pulldown {
  background: rgba(244, 200, 111, 0.38);
  outline: none;
}

.he200-axis-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 350;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  width: max-content;
  min-width: min(210px, 68vw);
  max-width: min(260px, 76vw);
  max-height: min(72vh, 620px);
  overflow-y: auto;
  padding: 0.45rem;
  border-radius: 14px;
  background: #fffdf5;
  border: 1px solid rgba(40, 30, 18, 0.18);
  box-shadow: 0 18px 42px rgba(25, 18, 10, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
}

.he200-axis-y-label .he200-axis-menu {
  top: calc(100% + 8px);
  bottom: auto;
}

.he200-axis-split.is-menu-right .he200-axis-menu {
  left: auto;
  right: 0;
}


.he200-axis-pulldown:hover + .he200-axis-menu,
.he200-axis-pulldown:focus-visible + .he200-axis-menu,
.he200-axis-menu:hover,
.he200-axis-split.is-open .he200-axis-menu {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.he200-axis-child {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.28rem 0.38rem;
  border: 1px solid rgba(40, 30, 18, 0.08);
  border-radius: 9px;
  background: rgba(40, 30, 18, 0.035);
  color: rgba(40, 30, 18, 0.42);
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
}

.he200-axis-child.is-matched {
  background: rgba(244, 200, 111, 0.2);
  border-color: rgba(170, 111, 12, 0.28);
  color: #1a1208;
  cursor: pointer;
}

.he200-axis-child.is-matched:hover,
.he200-axis-child.is-matched:focus-visible {
  background: rgba(244, 200, 111, 0.36);
  outline: none;
}

.he200-axis-child-title {
  white-space: normal;
  word-break: keep-all;
  font-weight: 650;
}

.he200-axis-child-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #1f180e;
  color: #f4c96f;
  font-size: 0.68rem;
  font-weight: 800;
}

.he200-coarse-cell {
  position: relative;
  min-height: var(--he200-row-h);
  border-radius: 0;
  background: #fdfdf8;
  border-left: 1px solid rgba(40, 30, 18, 0.08);
  border-top: 1px solid rgba(40, 30, 18, 0.08);
  display: grid;
  place-items: center;
  font: inherit;
  transition: background 0.15s ease, transform 0.18s ease;
}

.he200-coarse-cell::before {
  content: none;
}

.he200-coarse-cell-empty {
  background: #fdfdf8;
  cursor: default;
}

.he200-coarse-cell {
  cursor: pointer;
  background: #fdfdf8;
}

.he200-coarse-cell:hover,
.he200-coarse-cell:focus-visible {
  background: rgba(244, 200, 111, 0.18);
  outline: none;
  z-index: 20;
}

.he200-coarse-cell:hover .he200-cell-popover,
.he200-coarse-cell:focus-visible .he200-cell-popover,
.he200-coarse-cell:focus-within .he200-cell-popover {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -8px);
  pointer-events: auto;
}

.he200-cell-popover {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 4px);
  z-index: 220;
  min-width: 200px;
  max-width: min(520px, 70vw);
  max-height: none;
  overflow: visible;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  background: #110e0a;
  color: rgba(244, 239, 228, 0.95);
  border: 1px solid rgba(244, 200, 111, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.78rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  pointer-events: none;
}

.he200-collapse-axis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  height: 22px;
  margin-left: 0.18rem;
  border: 1px solid rgba(40, 30, 18, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #1a1208;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.he200-collapse-axis:hover,
.he200-collapse-axis:focus-visible {
  background: rgba(244, 200, 111, 0.42);
  outline: none;
}

.he200-cell-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #110e0a;
  border-right: 1px solid rgba(244, 200, 111, 0.4);
  border-bottom: 1px solid rgba(244, 200, 111, 0.4);
  transform: translateX(-50%) rotate(45deg);
}

.he200-ce-popover-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: #fff7df;
  border: 1px solid rgba(170, 111, 12, 0.26);
  font-size: 0.72rem;
  line-height: 1.25;
  color: #1a1208;
}

.he200-ce-popover-pill em {
  display: inline-flex;
  align-items: center;
  padding: 0.02rem 0.26rem;
  border-radius: 999px;
  background: rgba(40, 30, 18, 0.08);
  color: rgba(26, 18, 8, 0.72);
  font-style: normal;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-size: 0.58rem;
}

.he200-ce-popover-pill strong {
  font-weight: 700;
  color: #1a1208;
}

.he200-coarse-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f4c96f;
  color: #2a1e0a;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Drilled layout (L1): columns are HE children of a single drilled HD. */
.he200-grid.is-drilled-x {
  --he200-cols: 12;
}

.he200-grid.is-drilled-y {
  --he200-cols: 13;
}

.he200-axis-x-label.is-fine-col {
  background: rgba(244, 200, 111, 0.05);
  border-style: solid;
  border-color: rgba(244, 200, 111, 0.2);
}

.he200-axis-y-label.is-fine-row {
  background: rgba(244, 200, 111, 0.05);
  border-style: solid;
  border-color: rgba(244, 200, 111, 0.2);
}

.he200-drilled-cell {
  background: #fdfdf8;
  border-left: 1px solid rgba(40, 30, 18, 0.08);
  border-top: 1px solid rgba(40, 30, 18, 0.08);
  border-radius: 0;
  min-height: var(--he200-row-h);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: stretch;
  justify-content: flex-start;
}

.he200-drilled-cell-empty {
  background: transparent;
  border-style: dashed;
  border-color: rgba(244, 239, 228, 0.08);
}

.he200-row.is-fine-row-band .he200-coarse-cell,
.he200-row.is-fine-row-band .he200-drilled-cell,
.he200-coarse-cell.is-fine-band,
.he200-drilled-cell.is-fine-band {
  background: #fff7df;
}

.he200-ce-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(20, 16, 12, 0.55);
  border: 1px solid rgba(244, 239, 228, 0.16);
  border-radius: 10px;
  padding: 0.45rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  text-decoration: none;
  color: inherit;
}

.he200-ce-pill-card {
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  background: #fff7df;
  border-color: rgba(170, 111, 12, 0.28);
  color: #1a1208;
  padding: 0.24rem 0.52rem;
  border-radius: 999px;
}

.he200-ce-pill-card:hover,
.he200-ce-pill-card:focus-visible {
  background: rgba(244, 200, 111, 0.28);
  border-color: rgba(170, 111, 12, 0.32);
}

.he200-ce-card:hover,
.he200-ce-card:focus-visible {
  background: rgba(244, 200, 111, 0.16);
  border-color: rgba(244, 200, 111, 0.55);
  transform: translateY(-1px);
  outline: none;
}

.he200-ce-card-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.he200-ce-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 26px;
}

.he200-ce-card-icon-fallback {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  background: rgba(244, 239, 228, 0.12);
  color: rgba(244, 239, 228, 0.7);
  font-weight: 700;
  border-radius: 6px;
  flex: 0 0 26px;
}

.he200-ce-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.he200-ce-card-copy strong {
  font-size: 0.82rem;
  color: rgba(244, 239, 228, 0.95);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.he200-ce-pill-card .he200-ce-card-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  color: #1a1208;
  word-break: keep-all;
}

.he200-ce-pill-card .he200-ce-card-copy strong em {
  display: inline-flex;
  align-items: center;
  padding: 0.02rem 0.24rem;
  border-radius: 999px;
  background: rgba(40, 30, 18, 0.08);
  color: rgba(26, 18, 8, 0.68);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 0.58rem;
}

.he200-ce-pill-card .he200-ce-card-copy strong span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.he200-ce-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.he200-mid-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(244, 239, 228, 0.08);
  border: 1px solid rgba(244, 239, 228, 0.14);
  font-size: 0.7rem;
  color: rgba(244, 239, 228, 0.84);
  font-variant-numeric: tabular-nums;
}

.he200-mid-pill--he {
  background: rgba(96, 138, 224, 0.18);
  border-color: rgba(96, 138, 224, 0.45);
  color: #c9d8ff;
}

.he200-mid-pill--ae {
  background: rgba(212, 167, 106, 0.16);
  border-color: rgba(212, 167, 106, 0.4);
  color: #f3d8a8;
}

.he200-mid-pill em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

/* Full Map tab layout */
.he200-grid-full {
  --he200-row-h: 36px;
}

.he200-grid-full .he200-row,
.he200-grid-full .he200-row-top-spacer {
  grid-template-columns: 132px repeat(var(--he200-cols, 13), minmax(60px, 1fr));
}

.he200-full-col {
  background: #f4f4ee;
  border-left: 1px solid rgba(40, 30, 18, 0.12);
  border-top: 2px solid rgba(40, 30, 18, 0.18);
  border-radius: 0;
  padding: 0.24rem 0.45rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  min-height: 42px;
  line-height: 1.05;
}

.he200-full-col-bottom {
  flex-direction: column;
  gap: 0.12rem;
}

.he200-full-col-parent {
  color: rgba(40, 30, 18, 0.5);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1;
  text-align: center;
}

.he200-full-col-id {
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(244, 200, 111, 0.16);
  border: 1px solid rgba(244, 200, 111, 0.4);
  color: #f4c96f;
  flex: 0 0 auto;
}

.he200-full-col-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
  color: rgba(40, 30, 18, 0.86);
  word-break: keep-all;
  flex: 1 1 auto;
  text-align: center;
}

.he200-full-cell {
  background: #fdfdf8;
  border-left: 1px solid rgba(40, 30, 18, 0.1);
  border-top: 1px solid rgba(40, 30, 18, 0.1);
  border-radius: 0;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: var(--he200-row-h);
}

.he200-full-cell-empty {
  background: #fdfdf8;
  border-style: solid;
  border-color: rgba(40, 30, 18, 0.08);
}

.he200-ce-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.52rem;
  border-radius: 999px;
  background: #fff7df;
  color: #1a1208;
  font-weight: 600;
  font-size: 0.74rem;
  border: 1px solid rgba(170, 111, 12, 0.28);
  text-decoration: none;
  white-space: normal;
  word-break: keep-all;
}

.he200-ce-pill em {
  flex: 0 0 auto;
  padding: 0.02rem 0.24rem;
  border-radius: 999px;
  background: rgba(40, 30, 18, 0.08);
  color: #1a1208;
  font-style: normal;
  font-weight: 800;
  font-size: 0.58rem;
}

.he200-ce-pill span {
  min-width: 0;
  white-space: normal;
}

.he200-ce-pill:hover {
  background: rgba(244, 200, 111, 0.3);
  color: #1a1208;
}

/* ME200 unified matrix theme: same grid language for L0, L1, and Full Map. */
.m-he200-page .he200-grid {
  --he200-matrix-bg: #12100c;
  --he200-matrix-panel: rgba(20, 18, 13, 0.96);
  --he200-matrix-cell: rgba(31, 29, 22, 0.86);
  --he200-matrix-cell-alt: rgba(52, 43, 24, 0.9);
  --he200-matrix-line: rgba(244, 200, 111, 0.18);
  --he200-matrix-line-strong: rgba(244, 200, 111, 0.38);
  --he200-matrix-text: rgba(255, 247, 222, 0.92);
  background:
    radial-gradient(circle at 12% 8%, rgba(244, 200, 111, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 246, 211, 0.04), transparent 42%),
    var(--he200-matrix-panel);
  border: 1px solid rgba(244, 200, 111, 0.28);
  box-shadow: 0 18px 50px rgba(14, 10, 5, 0.34), inset 0 0 0 1px rgba(255, 245, 210, 0.03);
  color: var(--he200-matrix-text);
}

.m-he200-page .he200-row-top-spacer,
.m-he200-page .he200-col-spacer,
.m-he200-page .he200-corner-spacer {
  background: rgba(15, 13, 10, 0.85);
}

.m-he200-page .he200-axis-x-label,
.m-he200-page .he200-axis-y-label,
.m-he200-page .he200-full-col {
  background: rgba(24, 22, 17, 0.94);
  border-color: var(--he200-matrix-line-strong);
  color: var(--he200-matrix-text);
}

.m-he200-page .he200-row-footer .he200-axis-x-label,
.m-he200-page .he200-row-footer .he200-full-col {
  background: rgba(33, 29, 20, 0.98);
  border-top-color: rgba(244, 200, 111, 0.52);
}

.m-he200-page .he200-axis-split {
  background: rgba(255, 247, 222, 0.08);
  border-color: rgba(244, 200, 111, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 247, 222, 0.08), 0 0 12px rgba(244, 200, 111, 0.08);
}

.m-he200-page .he200-axis-x-title,
.m-he200-page .he200-axis-y-title,
.m-he200-page .he200-full-col-title {
  color: rgba(255, 247, 222, 0.92);
  font-weight: 700;
}

.m-he200-page .he200-full-col-parent {
  color: rgba(244, 200, 111, 0.62);
}

.m-he200-page .he200-axis-main.he200-axis-btn,
.m-he200-page .he200-axis-y-label .he200-axis-btn,
.m-he200-page .he200-axis-x-label .he200-axis-btn {
  color: rgba(255, 247, 222, 0.95);
  background: transparent;
}

.m-he200-page .he200-axis-btn:hover,
.m-he200-page .he200-axis-btn:focus-visible {
  background: rgba(244, 200, 111, 0.15);
}

.m-he200-page .he200-axis-pulldown {
  background: rgba(244, 200, 111, 0.12);
  border-left-color: rgba(244, 200, 111, 0.3);
  color: rgba(255, 247, 222, 0.9);
}

.m-he200-page .he200-axis-pulldown:hover,
.m-he200-page .he200-axis-pulldown:focus-visible,
.m-he200-page .he200-axis-split.is-open .he200-axis-pulldown {
  background: rgba(244, 200, 111, 0.36);
  color: #1a1208;
}

.m-he200-page .he200-axis-menu {
  background: rgba(22, 19, 14, 0.98);
  border-color: rgba(244, 200, 111, 0.36);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 247, 222, 0.05);
}

.m-he200-page .he200-axis-child {
  background: rgba(255, 247, 222, 0.045);
  border-color: rgba(244, 200, 111, 0.12);
  color: rgba(255, 247, 222, 0.4);
}

.m-he200-page .he200-axis-child.is-matched {
  background: rgba(244, 200, 111, 0.18);
  border-color: rgba(244, 200, 111, 0.42);
  color: rgba(255, 247, 222, 0.94);
}

.m-he200-page .he200-axis-child-count {
  background: #f4c96f;
  color: #15110b;
}

.m-he200-page .he200-coarse-cell,
.m-he200-page .he200-coarse-cell-empty,
.m-he200-page .he200-drilled-cell,
.m-he200-page .he200-full-cell,
.m-he200-page .he200-full-cell-empty {
  background:
    linear-gradient(135deg, rgba(255, 247, 222, 0.035), transparent 62%),
    var(--he200-matrix-cell);
  border-color: var(--he200-matrix-line);
}
.m-he200-page .he200-coarse-cell,
.m-he200-page .he200-drilled-cell,
.m-he200-page .he200-full-cell {
  overflow: visible;
}
.m-he200-page .he200-drilled-cell,
.m-he200-page .he200-full-cell {
  position: relative;
  z-index: 1;
}

.m-he200-page .he200-drilled-cell.has-ce-pills,
.m-he200-page .he200-full-cell.has-ce-pills {
  z-index: 12;
}

.m-he200-page .he200-drilled-cell.has-ce-pills:hover,
.m-he200-page .he200-full-cell.has-ce-pills:hover,
.m-he200-page .he200-drilled-cell.has-ce-pills:focus-within,
.m-he200-page .he200-full-cell.has-ce-pills:focus-within {
  z-index: 30;
}
.m-he200-page .he200-drilled-cell {
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
}

.m-he200-page .he200-row.is-fine-row-band .he200-coarse-cell,
.m-he200-page .he200-row.is-fine-row-band .he200-drilled-cell,
.m-he200-page .he200-coarse-cell.is-fine-band,
.m-he200-page .he200-drilled-cell.is-fine-band,
.m-he200-page .he200-axis-x-label.is-fine-col,
.m-he200-page .he200-axis-y-label.is-fine-row {
  background: linear-gradient(135deg, rgba(244, 200, 111, 0.16), rgba(55, 44, 23, 0.92));
  border-color: rgba(244, 200, 111, 0.38);
}

.m-he200-page .he200-row.is-fine-row-band .he200-coarse-cell,
.m-he200-page .he200-row.is-fine-row-band .he200-drilled-cell,
.m-he200-page .he200-coarse-cell.is-fine-band,
.m-he200-page .he200-drilled-cell.is-fine-band {
  background:
    linear-gradient(135deg, rgba(255, 247, 222, 0.035), transparent 62%),
    var(--he200-matrix-cell);
  border-color: var(--he200-matrix-line);
}

.m-he200-page .he200-axis-x-label.is-fine-col,
.m-he200-page .he200-axis-y-label.is-fine-row {
  background: rgba(24, 22, 17, 0.94);
  border-color: var(--he200-matrix-line);
}
.m-he200-page .he200-coarse-cell.is-summary-band,
.m-he200-page .he200-coarse-cell-empty.is-summary-band,
.m-he200-page .he200-drilled-cell.is-summary-band,
.m-he200-page .he200-drilled-cell-empty.is-summary-band,
.m-he200-page .he200-row.is-fine-row-band .he200-coarse-cell.is-summary-band,
.m-he200-page .he200-row.is-fine-row-band .he200-drilled-cell.is-summary-band,
.m-he200-page .he200-coarse-cell.is-fine-band.is-summary-band,
.m-he200-page .he200-drilled-cell.is-fine-band.is-summary-band {
  background:
    linear-gradient(135deg, rgba(180, 205, 166, 0.14), transparent 58%),
    rgba(39, 43, 31, 0.9);
  border-color: rgba(184, 205, 145, 0.26);
}

.m-he200-page .he200-coarse-cell.is-summary-band:hover,
.m-he200-page .he200-coarse-cell.is-summary-band:focus-visible {
  background:
    linear-gradient(135deg, rgba(180, 205, 166, 0.18), transparent 58%),
    rgba(48, 51, 36, 0.94);
  border-color: rgba(184, 205, 145, 0.36);
}
.m-he200-page .he200-row-footer .he200-axis-x-label.is-drilled,
.m-he200-page .he200-axis-y-label.is-drilled {
  background:
    linear-gradient(135deg, rgba(180, 205, 166, 0.14), transparent 58%),
    rgba(39, 43, 31, 0.9);
  border-color: rgba(184, 205, 145, 0.26);
}

.m-he200-page .he200-row-footer .he200-axis-x-label.is-drilled .he200-axis-split,
.m-he200-page .he200-axis-y-label.is-drilled .he200-axis-split {
  background:
    linear-gradient(135deg, rgba(180, 205, 166, 0.16), transparent 60%),
    rgba(43, 47, 34, 0.94);
  border-color: rgba(184, 205, 145, 0.34);
}

.m-he200-page .he200-row-footer .he200-axis-x-label.is-drilled .he200-axis-main.he200-axis-btn,
.m-he200-page .he200-axis-y-label.is-drilled .he200-axis-main.he200-axis-btn {
  color: rgba(255, 247, 222, 0.95);
  background: transparent;
}

.m-he200-page .he200-axis-split-static {
  width: calc(100% - 0.32rem);
  border-color: rgba(244, 200, 111, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 247, 222, 0.06);
}

.m-he200-page .he200-axis-split-static .he200-axis-main.he200-axis-btn {
  border-radius: 999px;
}
.m-he200-page .he200-axis-static {
  cursor: default;
  pointer-events: none;
}
.m-he200-page .he200-coarse-cell:hover,
.m-he200-page .he200-coarse-cell:focus-visible {
  background: rgba(244, 200, 111, 0.26);
  border-color: rgba(244, 200, 111, 0.64);
}

.m-he200-page .he200-ce-pill-card,
.m-he200-page .he200-ce-pill {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: none;
  justify-content: center;
  gap: 0.28rem;
  background: #f4c96f;
  border: 1px solid rgba(244, 200, 111, 0.76);
  box-shadow: 0 0 0 3px rgba(244, 200, 111, 0.12), 0 0 14px rgba(244, 200, 111, 0.28);
  color: #15110b;
  overflow: visible;
  font-family: var(--font-classic);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.m-he200-page .he200-ce-pill-card::before,
.m-he200-page .he200-ce-pill::before {
  content: "";
  position: absolute;
  inset: -5px -10px;
  z-index: 0;
  border-radius: 999px;
  background: transparent;
}

.m-he200-page .he200-ce-pill-card > *,
.m-he200-page .he200-ce-pill > * {
  position: relative;
  z-index: 1;
}

.m-he200-page .he200-ce-popover-pill {
  width: auto;
  max-width: 100%;
  justify-content: center;
  gap: 0.36rem;
  background: rgba(255, 247, 222, 0.94);
  border: 1px solid rgba(244, 200, 111, 0.58);
  box-shadow: 0 0 0 1px rgba(30, 22, 10, 0.05), 0 5px 16px rgba(0, 0, 0, 0.18);
  color: #17110a;
}

.m-he200-page .he200-ce-pill-card:hover,
.m-he200-page .he200-ce-pill-card:focus-visible,
.m-he200-page .he200-ce-pill:hover {
  background: #ffd97d;
  border-color: rgba(255, 217, 125, 0.88);
}

.m-he200-page .he200-ce-pill-card .he200-ce-card-copy {
  width: max-content;
  min-width: max-content;
  overflow: visible;
}
.m-he200-page .he200-ce-pill-icon {
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 1.08rem;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(21, 17, 11, 0.16), 0 1px 2px rgba(21, 17, 11, 0.22);
}

.m-he200-page .he200-ce-pill-icon-fallback {
  display: inline-grid;
  place-items: center;
  background: rgba(21, 17, 11, 0.12);
  color: rgba(21, 17, 11, 0.72);
  font-size: 0.56rem;
  font-weight: 800;
}

.m-he200-page .he200-ce-pill-card .he200-ce-card-copy strong,
.m-he200-page .he200-ce-pill {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.14;
  white-space: nowrap;
  overflow: visible;
}

.m-he200-page .he200-ce-pill-card .he200-ce-card-copy strong span,
.m-he200-page .he200-ce-pill span {
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: #15110b;
  font-weight: 700;
}

.m-he200-page .he200-ce-popover-pill strong {
  min-width: 0;
  color: #17110a;
  font-weight: 800;
}

.m-he200-page .he200-ce-pill-card .he200-ce-card-copy strong em,
.m-he200-page .he200-ce-pill em {
  display: none;
}

.m-he200-page .he200-ce-popover-pill em {
  flex: 0 0 auto;
  font-size: 0.56rem;
  line-height: 1;
  padding: 0.08rem 0.24rem;
  background: rgba(23, 17, 10, 0.1);
  color: rgba(23, 17, 10, 0.7);
}

.m-he200-page .he200-cell-popover {
  background: rgba(18, 15, 10, 0.98);
  border-color: rgba(244, 200, 111, 0.48);
}

.m-he200-page .he200-cell-popover::after {
  background: rgba(18, 15, 10, 0.98);
}

.m-he200-page .he200-coarse-bubble {
  background: #f4c96f;
  color: #15110b;
  box-shadow: 0 0 0 4px rgba(244, 200, 111, 0.12), 0 0 18px rgba(244, 200, 111, 0.36);
}

.m-he200-page .he200-collapse-axis {
  background: rgba(255, 247, 222, 0.12);
  border-color: rgba(244, 200, 111, 0.35);
  color: rgba(255, 247, 222, 0.86);
}

.m-he200-page .he200-collapse-axis:hover,
.m-he200-page .he200-collapse-axis:focus-visible {
  background: rgba(244, 200, 111, 0.38);
  color: #15110b;
}

/* Popover (CE detail) */
.he200-popover {
  width: min(560px, 92vw);
  border: none;
  border-radius: 18px;
  padding: 0;
  background: rgba(20, 16, 12, 0.96);
  color: rgba(244, 239, 228, 0.94);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(244, 200, 111, 0.25);
}

.he200-popover::backdrop {
  background: rgba(8, 6, 4, 0.6);
  backdrop-filter: blur(2px);
}

.he200-popover-form {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  margin: 0;
}

.he200-popover-close {
  background: rgba(244, 239, 228, 0.08);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: rgba(244, 239, 228, 0.86);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.he200-popover-close:hover {
  background: rgba(244, 200, 111, 0.22);
  color: #f4c96f;
}

.he200-popover-body {
  padding: 1.5rem 1.5rem 1rem;
  display: grid;
  gap: 0.85rem;
}

.he200-popover-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.he200-popover-head img,
.he200-popover-head .he200-popover-icon-fallback {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(244, 239, 228, 0.1);
}

.he200-popover-head .he200-popover-icon-fallback {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: rgba(244, 239, 228, 0.6);
}

.he200-popover-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #f4c96f;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.he200-popover-head small {
  font-size: 0.8rem;
  color: rgba(244, 239, 228, 0.66);
}

.he200-popover-tagline {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(244, 239, 228, 0.78);
}

.he200-popover-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(244, 239, 228, 0.12);
}

.he200-popover-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 200, 111, 0.7);
  font-weight: 700;
}

.he200-popover-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.he200-popover-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: rgba(244, 239, 228, 0.04);
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(244, 239, 228, 0.08);
  font-size: 0.86rem;
}

.he200-popover-row strong {
  font-weight: 600;
  color: rgba(244, 239, 228, 0.92);
}

.he200-popover-row small {
  color: rgba(244, 239, 228, 0.58);
  margin-left: 0.3rem;
}

.he200-popover-footer {
  padding: 0.85rem 1.5rem 1.4rem;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(244, 239, 228, 0.08);
}

.he200-popover-open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: rgba(244, 200, 111, 0.22);
  border: 1px solid rgba(244, 200, 111, 0.55);
  border-radius: 999px;
  color: #f4c96f;
  font-size: 0.86rem;
  text-decoration: none;
  font-weight: 600;
}

.he200-popover-open:hover {
  background: rgba(244, 200, 111, 0.35);
  color: #fff3d0;
}

/* Responsive collapse */
@media (max-width: 980px) {
  .he200-control-strip {
    flex-wrap: wrap;
  }
  .he200-row,
  .he200-row-top-spacer {
    grid-template-columns: 96px repeat(var(--he200-cols, 13), minmax(36px, 1fr));
  }
}

@media (max-width: 720px) {
  .he200-axis-x-title,
  .he200-axis-y-title,
  .he200-full-col-title {
    display: none;
  }
  .he200-coarse-bubble {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }
  .he200-row,
  .he200-row-top-spacer {
    grid-template-columns: 80px repeat(var(--he200-cols, 13), minmax(28px, 1fr));
  }
  .he200-ce-card-copy strong {
    font-size: 0.72rem;
  }
  .he200-mid-pill {
    font-size: 0.62rem;
  }
}

@media (max-width: 560px) {
  .he200-grid {
    --he200-row-h: 28px;
    width: 95%;
  }
  .he200-row,
  .he200-row-top-spacer {
    grid-template-columns: 68px repeat(var(--he200-cols, 13), minmax(22px, 1fr));
  }
  .he200-axis-x-id,
  .he200-full-col-id {
    font-size: 0.62rem;
    padding: 0.04rem 0.28rem;
  }
  .he200-axis-y-label .he200-axis-btn {
    font-size: 0.64rem;
    padding: 0.04rem 0.28rem;
  }
  .he200-coarse-bubble {
    width: 18px;
    height: 18px;
    font-size: 0.62rem;
  }
  .he200-ce-card {
    padding: 0.32rem;
  }
  .he200-ce-card-copy strong {
    font-size: 0.68rem;
  }
  .he200-mid-pill {
    font-size: 0.56rem;
    padding: 0.08rem 0.32rem;
  }
  .he200-strip-hint {
    display: none;
  }
}

/* ME200 two-band grid overhaul */
.m-he200-page .he200-grid-two-band {
  --he200-y-outer-w: 126px;
  --he200-y-inner-w: 118px;
  --he200-col-min: 76px;
  display: grid;
  grid-template-columns: var(--he200-y-outer-w) repeat(var(--he200-cols, 13), minmax(var(--he200-col-min), 1fr));
  grid-auto-rows: minmax(var(--he200-row-h), auto);
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: auto;
}

.m-he200-page .he200-grid-full.he200-grid-two-band {
  --he200-col-min: 104px;
}

.m-he200-page .he200-grid-two-band.has-y-inner {
  grid-template-columns: var(--he200-y-outer-w) var(--he200-y-inner-w) repeat(var(--he200-cols, 13), minmax(var(--he200-col-min), 1fr));
}

.m-he200-page .he200-grid-two-band .he200-axis-x-label,
.m-he200-page .he200-grid-two-band .he200-axis-y-label,
.m-he200-page .he200-grid-two-band .he200-axis-y-inner-placeholder,
.m-he200-page .he200-grid-two-band .he200-axis-x-inner-placeholder,
.m-he200-page .he200-grid-two-band .he200-corner-spacer {
  min-width: 0;
  min-height: var(--he200-row-h);
  border: 1px solid var(--he200-matrix-line);
  background: rgba(24, 22, 17, 0.94);
  color: var(--he200-matrix-text);
  position: relative;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-outer,
.m-he200-page .he200-grid-two-band .he200-axis-x-outer {
  background: linear-gradient(135deg, rgba(180, 205, 166, 0.13), transparent 58%), rgba(39, 43, 31, 0.9);
  border-color: rgba(184, 205, 145, 0.28);
  z-index: 4;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-inner,
.m-he200-page .he200-grid-two-band .he200-axis-x-inner {
  background: rgba(24, 22, 17, 0.96);
  border-color: var(--he200-matrix-line-strong);
  z-index: 5;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-inner-placeholder,
.m-he200-page .he200-grid-two-band .he200-axis-x-inner-placeholder,
.m-he200-page .he200-grid-two-band .he200-corner-spacer {
  background: linear-gradient(135deg, rgba(255, 247, 222, 0.025), transparent 60%), rgba(18, 16, 12, 0.96);
  border-color: rgba(244, 200, 111, 0.12);
}

.m-he200-page .he200-grid-two-band .he200-axis-y-label,
.m-he200-page .he200-grid-two-band .he200-axis-x-label {
  padding: 0.14rem;
  align-items: center;
  justify-content: center;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-label .he200-axis-split,
.m-he200-page .he200-grid-two-band .he200-axis-x-label .he200-axis-split,
.m-he200-page .he200-grid-two-band .he200-axis-split-static {
  width: calc(100% - 0.18rem);
  max-width: calc(100% - 0.18rem);
}

.m-he200-page .he200-grid-two-band .he200-axis-y-outer .he200-axis-split,
.m-he200-page .he200-grid-two-band .he200-axis-x-outer .he200-axis-split {
  background: linear-gradient(135deg, rgba(180, 205, 166, 0.16), transparent 60%), rgba(43, 47, 34, 0.94);
  border-color: rgba(184, 205, 145, 0.34);
}

.m-he200-page .he200-grid-two-band .he200-axis-main.he200-axis-btn {
  min-width: 0;
  overflow: hidden;
}

.m-he200-page .he200-grid-two-band .he200-axis-x-title,
.m-he200-page .he200-grid-two-band .he200-axis-y-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-outer .he200-axis-y-title,
.m-he200-page .he200-grid-two-band .he200-axis-x-outer .he200-axis-x-title {
  white-space: normal;
  word-break: keep-all;
  text-align: center;
}

.m-he200-page .he200-grid-two-band .he200-axis-parent.is-drilled,
.m-he200-page .he200-grid-two-band .is-axis-focus {
  border-color: rgba(184, 205, 145, 0.48);
  box-shadow: inset 0 0 0 1px rgba(184, 205, 145, 0.16);
}

.m-he200-page .he200-grid-two-band .he200-coarse-cell,
.m-he200-page .he200-grid-two-band .he200-coarse-cell-empty,
.m-he200-page .he200-grid-two-band .he200-drilled-cell {
  min-width: 0;
  min-height: var(--he200-row-h);
  border-radius: 0;
  border: 1px solid var(--he200-matrix-line);
}

.m-he200-page .he200-grid-two-band .he200-drilled-cell {
  padding: 0.3rem;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.m-he200-page .he200-grid-two-band .he200-drilled-cell.has-ce-pills {
  z-index: 12;
}

.m-he200-page .he200-grid-two-band .he200-coarse-cell.is-fine-band,
.m-he200-page .he200-grid-two-band .he200-drilled-cell.is-fine-band {
  background: linear-gradient(135deg, rgba(255, 247, 222, 0.035), transparent 62%), var(--he200-matrix-cell);
}

@media (max-width: 900px) {
  .m-he200-page .he200-grid-two-band {
    --he200-y-outer-w: 104px;
    --he200-y-inner-w: 96px;
    --he200-col-min: 66px;
  }
}

@media (max-width: 560px) {
  .m-he200-page .he200-grid-two-band {
    --he200-y-outer-w: 82px;
    --he200-y-inner-w: 76px;
    --he200-col-min: 54px;
    width: 100%;
  }
}

/* ME200 expanded L1 focus plane */
.m-he200-page .he200-grid-two-band {
  --he200-focus-fill: rgba(74, 78, 55, 0.98);
  --he200-focus-line: rgba(215, 210, 145, 0.58);
}

.m-he200-page .he200-grid-two-band .he200-coarse-cell.is-expanded-area,
.m-he200-page .he200-grid-two-band .he200-drilled-cell.is-expanded-area {
  background: var(--he200-focus-fill);
  border-color: rgba(244, 200, 111, 0.24);
  box-shadow: none;
}

.m-he200-page .he200-grid-two-band .he200-coarse-cell.is-y-expanded-area,
.m-he200-page .he200-grid-two-band .he200-drilled-cell.is-y-expanded-area,
.m-he200-page .he200-grid-two-band .he200-coarse-cell.is-x-expanded-area,
.m-he200-page .he200-grid-two-band .he200-drilled-cell.is-x-expanded-area {
  background: var(--he200-focus-fill);
}

.m-he200-page .he200-grid-two-band .is-expanded-top {
  border-top-color: var(--he200-focus-line) !important;
}

.m-he200-page .he200-grid-two-band .is-expanded-bottom {
  border-bottom-color: var(--he200-focus-line) !important;
}

.m-he200-page .he200-grid-two-band .is-expanded-left {
  border-left-color: var(--he200-focus-line) !important;
}

.m-he200-page .he200-grid-two-band .is-expanded-right {
  border-right-color: var(--he200-focus-line) !important;
}

.m-he200-page .he200-grid-two-band .he200-axis-y-inner.is-expanded-inner,
.m-he200-page .he200-grid-two-band .he200-axis-x-inner.is-expanded-inner {
  background: rgba(66, 72, 50, 0.98);
  border-color: rgba(215, 210, 145, 0.52);
  box-shadow: inset 0 0 0 1px rgba(244, 238, 172, 0.12), 0 0 14px rgba(190, 205, 140, 0.1);
  z-index: 8;
}

.m-he200-page .he200-grid-two-band .he200-axis-parent.is-drilled {
  background: rgba(43, 51, 35, 0.96);
  box-shadow: inset 0 0 0 1px rgba(184, 205, 145, 0.2), 0 0 18px rgba(180, 205, 166, 0.06);
}

.m-he200-page .he200-grid-two-band .he200-drilled-cell.has-ce-pills.is-expanded-area {
  z-index: 18;
}


.m-he200-page .he200-grid-two-band .he200-axis-ae-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.35rem;
  align-items: center;
  gap: 0.16rem;
}

.m-he200-page .he200-grid-two-band .he200-axis-ae-pill .he200-axis-main.he200-axis-btn {
  gap: 0.3rem;
  padding-left: 0.24rem;
  padding-right: 0.18rem;
}

.m-he200-page .he200-axis-ae-icon {
  width: 1.02rem;
  height: 1.02rem;
  flex: 0 0 1.02rem;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(246, 215, 134, 0.82);
  border: 1px solid rgba(255, 245, 188, 0.72);
  box-shadow: inset 0 0 0 1px rgba(56, 42, 16, 0.26), 0 0 8px rgba(244, 200, 111, 0.2);
}

.m-he200-page .he200-axis-ae-icon.x-icon-fallback {
  display: inline-grid;
  place-items: center;
  color: #1e180e;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
}

.m-he200-page .he200-axis-page-link {
  display: inline-grid;
  place-items: center;
  width: 1.18rem;
  height: 1.18rem;
  border-radius: 999px;
  color: rgba(255, 247, 222, 0.94);
  background: rgba(244, 200, 111, 0.2);
  border: 1px solid rgba(244, 200, 111, 0.42);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  box-shadow: inset 0 1px 0 rgba(255, 247, 222, 0.1);
}

.m-he200-page .he200-axis-page-link:hover,
.m-he200-page .he200-axis-page-link:focus-visible {
  color: #1f1608;
  background: rgba(244, 200, 111, 0.9);
  border-color: rgba(255, 238, 169, 0.96);
  outline: none;
}

/* v0.1.37 membership auth shell */
.site-header-actions {
  justify-self: end;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
}

.site-auth {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.site-auth-button[hidden],
.site-auth-profile[hidden] {
  display: none !important;
}

.site-auth-button,
.site-auth-profile,
.user-home-sign-in,
.site-auth-google,
.site-auth-secondary {
  border: 1px solid rgba(62, 53, 42, 0.18);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-auth-button,
.site-auth-profile {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  max-width: 160px;
  padding: 0 0.72rem 0 0.34rem;
  color: #302b24;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.68);
}

.site-auth-button:hover,
.site-auth-button:focus-visible,
.site-auth-profile:hover,
.site-auth-profile:focus-visible,
.user-home-sign-in:hover,
.user-home-sign-in:focus-visible,
.site-auth-google:hover,
.site-auth-google:focus-visible,
.site-auth-secondary:hover,
.site-auth-secondary:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(156, 37, 37, 0.34);
  outline: none;
}

.site-auth-profile {
  background: rgba(24, 48, 37, 0.92);
  color: #f8f3e7;
  border-color: rgba(126, 185, 142, 0.32);
}

.site-auth-avatar,
.user-home-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3d77b, #ffffff);
  color: #1e3228;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(62, 53, 42, 0.14);
}

.site-auth-avatar {
  width: 24px;
  height: 24px;
  font-size: 0.74rem;
}

.site-auth-avatar img,
.user-home-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-auth-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.82rem;
}

.site-auth-modal[hidden] {
  display: none !important;
}

.site-auth-modal {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.site-auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 14, 10, 0.56);
  backdrop-filter: blur(5px);
}

.site-auth-dialog {
  position: relative;
  width: min(100%, 420px);
  padding: 1.35rem;
  border: 1px solid rgba(209, 177, 99, 0.28);
  border-radius: 8px;
  background: #17130f;
  color: #f8f0de;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.site-auth-dialog h2 {
  margin: 0 2rem 0.55rem 0;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.site-auth-dialog p {
  margin: 0;
  color: rgba(248, 240, 222, 0.78);
  line-height: 1.7;
}

.site-auth-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  color: #f8f0de;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.site-auth-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.site-auth-google,
.site-auth-secondary,
.user-home-sign-in {
  min-height: 38px;
  padding: 0.55rem 1rem;
}

.site-auth-google,
.user-home-sign-in {
  color: #18251c;
  background: linear-gradient(135deg, #f5d879, #fff2bc);
}

.site-auth-secondary {
  color: #f8f0de;
  background: rgba(255, 255, 255, 0.08);
}

.root-gateway .root-language-bar {
  justify-content: space-between;
}

.root-gateway .root-language-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  min-width: 0;
}

.root-gateway .root-language-main > span {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #9b6a21;
}

.root-gateway .root-language-bar > span {
  display: none;
}


.site-auth-signout,
.site-save-button {
  height: 34px;
  padding: 0 0.72rem;
  color: #302b24;
  background: rgba(255, 255, 255, 0.62);
}

.site-save-button.is-saved {
  color: #173b27;
  border-color: rgba(78, 130, 85, 0.38);
  background: rgba(201, 231, 188, 0.72);
}


.site-auth-signout[hidden] {
  display: none !important;
}

.site-auth-signout,
.site-save-button {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(62, 53, 42, 0.18);
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-auth-signout:hover,
.site-auth-signout:focus-visible,
.site-save-button:hover,
.site-save-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(156, 37, 37, 0.34);
  outline: none;
}
.user-home-favorite-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.user-home-favorite-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.54rem 0.65rem;
  border: 1px solid rgba(42, 62, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.user-home-favorite-list a {
  min-width: 0;
  color: #1f3d2a;
  font-weight: 850;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-home-favorite-list span {
  flex: 0 0 auto;
  color: rgba(48, 43, 36, 0.58);
  font-size: 0.76rem;
  font-weight: 800;
}
.user-home-body .site-page-shell {
  background: radial-gradient(circle at 18% 0%, rgba(77, 112, 80, 0.14), transparent 34%), #f5f3ec;
}

.user-home-page {
  max-width: 1080px;
}

.user-home-hero {
  margin-bottom: 1.2rem;
}

.user-home-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.7rem;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  color: #f8f3e7;
  background: #1d382b;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.user-home-shell {
  padding: 1.2rem;
  border: 1px solid rgba(42, 62, 42, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 48px rgba(48, 43, 36, 0.10);
}

/* Root language bar final alignment */
.root-gateway .root-language-bar {
  justify-content: center !important;
  text-align: center;
}

.root-gateway .root-language-main {
  width: 100%;
  justify-content: center !important;
  gap: 1rem;
}

.root-gateway .root-language-links {
  justify-content: center;
}

.root-gateway .root-language-main > span {
  text-align: center;
}

@media (max-width: 560px) {
  .root-gateway .root-language-main {
    gap: 0.65rem;
  }
}


.user-home-signed-out[hidden],
.user-home-signed-in[hidden] {
  display: none !important;
}
.user-home-signed-out {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.user-home-signed-out p {
  margin: 0;
  color: #3d3a32;
  font-weight: 700;
}

.user-home-profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(42, 62, 42, 0.14);
}

.user-home-avatar {
  width: 58px;
  height: 58px;
  font-size: 1.3rem;
}

.user-home-profile-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.user-home-profile-card p {
  margin: 0 0 0.4rem;
  color: #625d52;
}

.user-home-tier {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  color: #17432d;
  background: rgba(63, 126, 84, 0.12);
  font-size: 0.78rem;
  font-weight: 900;
}

.user-home-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}

.user-home-stat,
.user-home-panels article {
  padding: 1rem;
  border: 1px solid rgba(42, 62, 42, 0.12);
  border-radius: 8px;
  background: rgba(248, 246, 238, 0.86);
}

.user-home-stat span {
  display: block;
  color: #17432d;
  font-size: 1.65rem;
  font-weight: 900;
}

.user-home-stat strong {
  color: #625d52;
  font-size: 0.86rem;
}

.user-home-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.user-home-panels h2 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.user-home-panels p {
  margin: 0;
  color: #625d52;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .site-header-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 0.5rem;
  }

  .site-language {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .site-auth-button,
  .site-auth-profile {
    max-width: 118px;
    padding-right: 0.52rem;
  }

  .root-gateway .root-language-bar,
  .root-gateway .root-language-main,

.user-home-signed-out[hidden],
.user-home-signed-in[hidden] {
  display: none !important;
}
.user-home-signed-out {
    flex-direction: column;
  }

  .root-gateway .root-language-bar {
    justify-content: center;
  }


.user-home-signed-out[hidden],
.user-home-signed-in[hidden] {
  display: none !important;
}
.user-home-signed-out {
    align-items: flex-start;
  }

  .user-home-stat-grid,
  .user-home-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .site-auth-label {
    max-width: 52px;
  }

  .site-auth-button,
  .site-auth-profile {
    max-width: 86px;
  }
}

/* Membership account menu */
.site-auth .site-auth-menu-trigger {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.site-auth .site-auth-menu-trigger:hover,
.site-auth .site-auth-menu-trigger:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.site-auth .site-auth-menu-trigger .site-auth-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
  color: #f8f3e7;
  background: #173f49;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.site-auth-menu[hidden] {
  display: none !important;
}

.site-auth-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 2300;
  width: min(78vw, 248px);
  padding: 0.75rem 0;
  border: 1px solid rgba(35, 31, 26, 0.1);
  border-radius: 6px;
  background: #fff;
  color: #1f2428;
  box-shadow: 0 18px 42px rgba(20, 16, 10, 0.18);
}

.site-auth-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 10px;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(35, 31, 26, 0.08);
  border-top: 1px solid rgba(35, 31, 26, 0.08);
  background: #fff;
}

.site-auth-menu a,
.site-auth-menu .site-auth-signout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  height: auto;
  padding: 0.66rem 1rem;
  border: 0;
  border-radius: 0;
  color: #202327;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 850;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-auth-menu a:hover,
.site-auth-menu a:focus-visible,
.site-auth-menu .site-auth-signout:hover,
.site-auth-menu .site-auth-signout:focus-visible {
  transform: none;
  color: #132c24;
  background: #f6f4ee;
  outline: none;
}

.site-auth-menu-separator {
  height: 1px;
  margin: 0.45rem 0;
  background: rgba(32, 35, 39, 0.12);
}

.site-save-button {
  gap: 0.42rem;
  padding: 0 0.3rem;
  border-color: transparent;
  color: #4e4a43;
  background: transparent;
  box-shadow: none;
}

.site-save-button:hover,
.site-save-button:focus-visible {
  color: #9c2525;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.36);
}

.site-save-heart {
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1;
}

.site-save-button.is-saved {
  color: #9c2525;
  border-color: transparent;
  background: transparent;
}

.site-save-button.is-saved .site-save-heart {
  color: #9c2525;
}

@media (max-width: 520px) {
  .site-auth-menu {
    right: -0.35rem;
    width: min(86vw, 232px);
  }
}

/* Membership account menu compact identity header */
.site-auth-menu {
  padding: 0.42rem 0;
}

.site-auth-menu-user {
  position: relative;
  z-index: 1;
  padding: 0.54rem 1rem 0.48rem;
  color: #1f2420;
  cursor: default;
}

.site-auth-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.18;
}

.site-auth-menu-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.18rem;
  color: rgba(35, 31, 26, 0.58);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.18;
}

.site-auth-menu a,
.site-auth-menu .site-auth-signout {
  min-height: 34px;
  padding: 0.34rem 1rem;
  line-height: 1.16;
}

.site-auth-menu-separator {
  margin: 0.28rem 0;
}

/* Refined membership account card */
.site-auth-menu {
  width: min(82vw, 270px);
  padding: 0.38rem 0 0.42rem;
  overflow: hidden;
}

.site-auth-menu-user {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 64px;
  padding: 0.72rem 1rem 0.68rem;
  background: linear-gradient(180deg, #fbfaf6 0%, #f4f0e8 100%);
  border-bottom: 1px solid rgba(32, 35, 39, 0.1);
}

.site-auth-menu-avatar {
  display: inline-flex;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  color: #f8f3e7;
  background: #173f49;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 5px 14px rgba(22, 36, 32, 0.14);
}

.site-auth-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.site-auth-menu-meta {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

.site-auth-menu-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2420;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.16;
}

.site-auth-menu-email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(35, 31, 26, 0.58);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.16;
}

.site-auth-menu-user + .site-auth-menu-separator {
  display: none;
}

.site-auth-menu a,
.site-auth-menu .site-auth-signout {
  min-height: 36px;
  padding: 0.38rem 1rem;
}

/* Simple signed-out login button */
.site-auth .site-auth-button {
  gap: 0;
  min-width: auto;
  padding: 0 0.78rem;
  background: rgba(255, 255, 255, 0.72);
}

.site-auth .site-auth-button .site-auth-label {
  white-space: nowrap;
}

/* v0.1.37 membership data pages */
.user-home-panels-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-home-panel,
.user-home-detail-card {
  min-width: 0;
}

.user-home-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
  gap: 0.9rem;
}

.user-home-vote-form {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.8rem;
}

.user-home-vote-form label {
  display: grid;
  gap: 0.28rem;
  color: #514a3f;
  font-size: 0.82rem;
  font-weight: 850;
}

.user-home-vote-form input {
  width: 100%;
  height: 38px;
  padding: 0 0.72rem;
  border: 1px solid rgba(42, 62, 42, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #221f1a;
  font: inherit;
  font-weight: 750;
}

.user-home-vote-form button,
.user-home-signout,
.user-home-inline-action {
  border: 1px solid rgba(43, 69, 48, 0.22);
  border-radius: 999px;
  background: #1d382b;
  color: #fff8e7;
  font-weight: 900;
  cursor: pointer;
}

.user-home-vote-form button {
  min-height: 38px;
  padding: 0 0.95rem;
  justify-self: start;
}

.user-home-form-message {
  min-height: 1.2em;
  color: #8a4e18;
  font-size: 0.84rem;
  font-weight: 800;
}

.user-home-activity-list {
  display: grid;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.user-home-activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(42, 62, 42, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.user-home-activity-list strong {
  min-width: 0;
  overflow: hidden;
  color: #1f3d2a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-home-activity-list span,
.user-home-activity-list small {
  color: rgba(48, 43, 36, 0.62);
  font-size: 0.76rem;
  font-weight: 850;
}

.user-home-activity-list[data-user-score-list] {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 17rem));
  align-items: stretch;
  gap: 0.8rem;
}

.user-home-activity-list[data-user-score-list] li {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title score"
    "status status"
    "date date";
  align-content: start;
  min-height: 7.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(219, 178, 82, 0.32);
  border-radius: 8px;
  background: rgba(250, 246, 228, 0.86);
  box-shadow: 0 10px 24px rgba(16, 27, 18, 0.1);
}

.user-home-activity-list[data-user-score-list] strong {
  grid-area: title;
  white-space: normal;
  font-size: 1rem;
  line-height: 1.2;
}

.user-home-activity-list[data-user-score-list] strong a {
  color: inherit;
  text-decoration: none;
}

.user-home-activity-list[data-user-score-list] strong a:hover,
.user-home-activity-list[data-user-score-list] strong a:focus-visible {
  color: #8a641f;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.user-home-activity-list[data-user-score-list] span {
  grid-area: status;
  justify-self: start;
  color: rgba(31, 61, 42, 0.72);
  line-height: 1.25;
}

.user-home-activity-list[data-user-score-list] > li > span:nth-of-type(2) {
  grid-area: score;
  justify-self: end;
  min-width: 2.1rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(219, 178, 82, 0.24);
  color: #1f3d2a;
  text-align: center;
}

.user-home-activity-list[data-user-score-list] small {
  grid-area: date;
  justify-self: start;
}

.user-home-inline-action {
  padding: 0.26rem 0.58rem;
  background: rgba(255, 255, 255, 0.62);
  color: #274533;
  font-size: 0.72rem;
}

.user-home-settings-card {
  max-width: 760px;
}

.user-home-settings-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(42, 62, 42, 0.12);
}

.user-home-settings-head h2,
.user-home-settings-head p {
  margin: 0;
}

.user-home-settings-head p {
  margin-top: 0.18rem;
  color: #625d52;
}

.user-home-settings-list {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0;
}

.user-home-settings-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.58rem 0.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.user-home-settings-list dt {
  color: #625d52;
  font-weight: 850;
}

.user-home-settings-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #1f3d2a;
  font-weight: 850;
}

.user-home-signout {
  min-height: 38px;
  padding: 0 1rem;
  background: rgba(88, 42, 36, 0.92);
}

@media (max-width: 860px) {
  .user-home-panels-three,
  .user-home-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .user-home-settings-list div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* XE membership console redesign */
body.user-home-body .site-page-shell {
  min-height: calc(100vh - 58px);
  background:
    linear-gradient(90deg, rgba(222, 198, 120, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(222, 198, 120, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(67, 109, 72, 0.18), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(150, 42, 38, 0.11), transparent 26%),
    #f3f1e9;
  background-size: 64px 64px, 64px 64px, auto, auto, auto;
}

body.user-home-body .user-home-page {
  width: min(100% - 2rem, 1360px);
  max-width: none;
  padding-top: 0.7rem !important;
}

body.user-home-body .user-home-hero.section-header {
  position: relative;
  display: grid;
  gap: 0.36rem;
  margin: 0 auto 1.45rem;
  padding: 1.25rem 1.65rem 1.35rem !important;
  overflow: hidden;
  border: 1px solid rgba(117, 169, 124, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(107, 154, 99, 0.22), rgba(10, 19, 20, 0.54)),
    linear-gradient(90deg, rgba(220, 194, 121, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(220, 194, 121, 0.07) 1px, transparent 1px),
    #111a18;
  background-size: auto, 72px 72px, 72px 72px, auto;
  box-shadow: 0 18px 42px rgba(25, 31, 27, 0.16);
  text-align: left;
}

body.user-home-body .user-home-hero::before {
  content: "";
  position: absolute;
  inset: -30% 52% -20% 18%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(146, 201, 143, 0.16), transparent);
  pointer-events: none;
}

body.user-home-body .user-home-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #183225;
  background: linear-gradient(135deg, #f2d77d, #fff1b8);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

body.user-home-body .user-home-hero .page-title-index {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f7f1df;
  font-size: clamp(2.45rem, 5vw, 4.4rem);
  line-height: 1;
  text-align: left;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

body.user-home-body .user-home-hero .book-tagline {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0;
  color: rgba(245, 239, 222, 0.82);
  font-size: 1rem;
  text-align: left;
}

body.user-home-body .user-home-hero-main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.36rem;
  justify-items: start;
  min-width: 0;
}

.user-home-hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

body.user-home-body .user-home-profile-card-hero {
  width: min(100%, 320px);
  padding: 0.95rem 1.05rem;
  border: 1px solid rgba(244, 205, 120, 0.28);
  border-radius: 14px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 132, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(66, 47, 20, 0.92), rgba(19, 24, 22, 0.94));
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.09), 0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

body.user-home-body .user-home-profile-card-hero .user-home-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.15rem;
}


.user-home-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}

.user-home-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.9rem;
  border: 1px solid rgba(42, 62, 42, 0.18);
  border-radius: 999px;
  color: #28362d;
  background: rgba(255, 255, 255, 0.68);
  font-weight: 900;
  text-decoration: none;
}

.user-home-nav-link:hover,
.user-home-nav-link:focus-visible,
.user-home-nav-link.is-active {
  color: #fff8dc;
  background: #203a2d;
  border-color: rgba(232, 205, 116, 0.48);
  outline: none;
}

.user-home-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.22rem;
  width: min(100%, 1220px);
  margin: 0 auto -1px;
  padding: 0 1.65rem;
}

.user-home-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.5rem;
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid rgba(216, 190, 103, 0.2);
  border-bottom-color: rgba(216, 190, 103, 0.32);
  border-radius: 10px 10px 0 0;
  color: rgba(246, 238, 214, 0.68);
  background: #151c18;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}

.user-home-tab:hover,
.user-home-tab:focus-visible {
  color: #fff8dc;
  border-color: rgba(232, 205, 116, 0.46);
  background: #1d2a22;
  outline: none;
}

.user-home-tab.is-active {
  min-height: 44px;
  color: #231707;
  border-color: rgba(255, 232, 173, 0.82);
  border-bottom-color: #203429;
  background: linear-gradient(135deg, #ffe39b, #d99a36);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
}

.user-home-detail-page .user-home-hero.section-header {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  align-items: center;
  column-gap: 1.5rem;
  border-top-left-radius: 0;
}

@media (max-width: 860px) {
  .user-home-detail-page .user-home-hero.section-header {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .user-home-hero-side {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .user-home-tabs {
    padding: 0 0.75rem;
    overflow-x: auto;
  }

  .user-home-tab {
    min-width: 6.6rem;
    white-space: nowrap;
  }

  .user-home-hero-side {
    width: 100%;
  }

  body.user-home-body .user-home-profile-card-hero {
    width: min(100%, 340px);
  }
}

body.user-home-body .user-home-shell {
  border: 1px solid rgba(202, 177, 104, 0.35);
  background:
    linear-gradient(90deg, rgba(222, 198, 120, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(222, 198, 120, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(18, 29, 25, 0.94), rgba(12, 15, 16, 0.96));
  background-size: 56px 56px, 56px 56px, auto;
  box-shadow: 0 24px 70px rgba(22, 25, 20, 0.22);
}

body.user-home-body .user-home-panel,
body.user-home-body .user-home-detail-card,
body.user-home-body .user-home-stat {
  border-color: rgba(216, 190, 103, 0.26);
  background: rgba(241, 232, 196, 0.08);
  color: #f6eed6;
}

body.user-home-body .user-home-panels h2,
body.user-home-body .user-home-detail-card h2 {
  color: #fff4c6;
}

body.user-home-body .user-home-panels p,
body.user-home-body .user-home-detail-card p {
  color: rgba(246, 238, 214, 0.72);
}

body.user-home-body .user-home-favorite-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.78rem;
  margin-top: 0.9rem;
}

body.user-home-body .user-home-favorite-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.user-home-favorite-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 72px;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(228, 203, 115, 0.28);
  border-radius: 8px;
  color: #fff6cf;
  background: linear-gradient(135deg, #263d2c, #111616);
  text-decoration: none;
  box-shadow: inset 0 1px rgba(255, 247, 205, 0.07), 0 12px 28px rgba(0, 0, 0, 0.22);
}

.user-home-favorite-card:hover,
.user-home-favorite-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(244, 216, 118, 0.62);
  outline: none;
}

.user-home-favorite-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 147, 0.48);
  border-radius: 8px;
  background: rgba(246, 219, 127, 0.16);
}

.user-home-favorite-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-home-favorite-icon-fallback {
  color: #213322;
  background: linear-gradient(135deg, #f1d678, #fff3be);
  font-size: 0.72rem;
  font-weight: 950;
}

.user-home-favorite-copy {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.user-home-favorite-copy strong {
  overflow: hidden;
  color: #fff8dc;
  font-size: 1.02rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-home-favorite-copy small {
  color: rgba(246, 238, 214, 0.66);
  font-size: 0.76rem;
  font-weight: 850;
}

.user-home-favorite-lang {
  align-self: start;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  color: #173024 !important;
  background: rgba(244, 215, 120, 0.92);
  font-size: 0.68rem !important;
  font-weight: 950 !important;
}

body.user-home-body .user-home-inline-action {
  align-self: center;
  min-height: 34px;
  border-color: rgba(244, 215, 120, 0.28);
  color: #f8edd1;
  background: rgba(255, 255, 255, 0.08);
}

body.user-home-body .user-home-inline-action:hover,
body.user-home-body .user-home-inline-action:focus-visible {
  color: #241a10;
  background: #f0d477;
  outline: none;
}

@media (max-width: 720px) {
  body.user-home-body .user-home-page {
    width: min(100% - 1rem, 1360px);
    padding-top: 0.5rem !important;
  }

  body.user-home-body .user-home-hero.section-header {
    padding: 1rem !important;
  }

  .user-home-favorite-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .user-home-favorite-lang {
    grid-column: 2;
    width: fit-content;
  }

  body.user-home-body .user-home-favorite-list li {
    grid-template-columns: 1fr;
  }
}

/* XE favorite card remove control refinement */
body.user-home-body .user-home-favorite-list li {
  position: relative;
  display: block;
}

body.user-home-body .user-home-favorite-card {
  padding-right: 2.8rem;
}

.user-home-favorite-remove {
  position: absolute;
  top: 50%;
  right: 0.68rem;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid rgba(244, 215, 120, 0.32);
  border-radius: 999px;
  color: rgba(255, 248, 220, 0.84);
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.user-home-favorite-remove:hover,
.user-home-favorite-remove:focus-visible {
  color: #251a0e;
  background: #f0d477;
  border-color: rgba(255, 238, 163, 0.94);
  outline: none;
}

/* XE language-filtered favorite cards */
.user-home-favorite-lang {
  display: none !important;
}

body.user-home-body .user-home-favorite-card {
  grid-template-columns: 54px minmax(0, 1fr);
}

@media (max-width: 720px) {
  .user-home-favorite-lang {
    display: none !important;
  }
}

/* XE compact saved-card grid */
body.user-home-body .user-home-favorite-list {
  grid-template-columns: repeat(auto-fill, minmax(235px, 300px));
  justify-content: start;
}

body.user-home-body .user-home-favorite-card {
  min-height: 64px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.48rem 2.6rem 0.48rem 0.62rem;
}

body.user-home-body .user-home-favorite-icon {
  width: 46px;
  height: 46px;
}

/* XE saved pages: architecture section grouping */
body.user-home-body .user-home-favorite-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.05rem;
  margin-top: 0.85rem;
}

body.user-home-body .user-home-favorite-list > .user-home-favorite-section {
  position: relative;
  display: grid;
  gap: 0.58rem;
  padding: 0.72rem 0.78rem 0.82rem;
  border: 1px solid rgba(222, 198, 120, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(215, 201, 151, 0.07), rgba(16, 25, 22, 0.24));
}

.user-home-favorite-section-head {
  display: flex;
  align-items: baseline;
  gap: 0.72rem;
  min-width: 0;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid rgba(222, 198, 120, 0.16);
}

.user-home-favorite-section-head h3,
.user-home-favorite-section-head p {
  margin: 0;
}

.user-home-favorite-section-head h3 {
  flex: 0 0 auto;
  color: #fff4c6;
  font-size: 0.98rem;
  font-weight: 950;
}

.user-home-favorite-section-head p {
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 238, 214, 0.58);
  font-size: 0.74rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-home-favorite-section-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 252px));
  justify-content: start;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.user-home-body .user-home-favorite-section-list > li {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.user-home-body .user-home-favorite-card {
  min-height: 58px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.58rem;
  padding: 0.46rem 2.3rem 0.46rem 0.54rem;
  border-color: rgba(228, 203, 115, 0.26);
}

body.user-home-body .user-home-favorite-icon {
  width: 40px;
  height: 40px;
}

body.user-home-body .user-home-favorite-copy {
  gap: 0.1rem;
}

body.user-home-body .user-home-favorite-copy strong {
  font-size: 0.92rem;
}

body.user-home-body .user-home-favorite-copy small {
  overflow: hidden;
  color: rgba(246, 238, 214, 0.58);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.user-home-body .user-home-favorite-remove {
  right: 0.5rem;
  width: 24px;
  height: 24px;
  font-size: 0.92rem;
}

@media (max-width: 720px) {
  .user-home-favorite-section-head {
    display: grid;
    gap: 0.18rem;
  }

  .user-home-favorite-section-head p {
    white-space: normal;
  }

  .user-home-favorite-section-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* XE saved pages: domain boxes inside architecture sections */
body.user-home-body .user-home-favorite-list {
  grid-template-columns: 1fr;
  gap: 0.95rem;
}

body.user-home-body .user-home-favorite-list > .user-home-favorite-section {
  gap: 0.72rem;
  padding: 0.75rem 0 0;
  background:
    linear-gradient(90deg, rgba(222, 198, 120, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(222, 198, 120, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(47, 70, 49, 0.38), rgba(13, 19, 18, 0.58));
  background-size: 56px 56px, 56px 56px, auto;
}

.user-home-favorite-section-head {
  align-items: center;
  padding-bottom: 0.36rem;
}

.user-home-favorite-section-head h3 {
  color: #f6e7a8;
  font-size: 1.04rem;
}

.user-home-favorite-section-head p {
  display: none;
}

.user-home-favorite-domain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-home-favorite-domain {
  display: grid;
  gap: 0.56rem;
  min-width: 0;
  padding: 0.58rem;
  border: 1px solid rgba(220, 196, 112, 0.22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(235, 223, 176, 0.075), rgba(7, 13, 13, 0.48));
  box-shadow: inset 0 1px rgba(255, 243, 190, 0.06);
}

.user-home-favorite-domain-head {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  min-width: 0;
}

.user-home-favorite-domain-head span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.38rem;
  border: 1px solid rgba(244, 215, 120, 0.3);
  border-radius: 999px;
  color: #173024;
  background: linear-gradient(135deg, #f1d678, #fff3be);
  font-size: 0.68rem;
  font-weight: 950;
}

.user-home-favorite-domain-head h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff6cf;
  font-size: 0.92rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-home-favorite-domain .user-home-favorite-section-list {
  grid-template-columns: repeat(auto-fill, minmax(205px, 252px));
  gap: 0.5rem;
}

body.user-home-body .user-home-favorite-card {
  min-height: 56px;
}

@media (max-width: 720px) {
  .user-home-favorite-domain-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-home-favorite-domain .user-home-favorite-section-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* XE saved pages: gateway-like separated section/domain layout */
body.user-home-body [data-user-favorites].user-home-panel,
body.user-home-body [data-user-favorites].user-home-detail-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.user-home-body [data-user-favorites] > h2 {
  display: none;
}

body.user-home-body .user-home-favorite-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin-top: 0;
}

body.user-home-body .user-home-favorite-list > .user-home-favorite-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1.66fr);
  gap: 1rem;
  min-height: 150px;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 96% 10%, rgba(244, 201, 111, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(24, 31, 27, 0.94), rgba(10, 15, 15, 0.96));
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 20px 50px rgba(0, 0, 0, 0.22);
}

body.user-home-body .user-home-favorite-list > .user-home-favorite-section:nth-child(2n) {
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 88% 12%, rgba(132, 174, 120, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(34, 42, 30, 0.94), rgba(10, 15, 15, 0.96));
  background-size: 42px 42px, 42px 42px, auto, auto;
}

body.user-home-body .user-home-favorite-section-head {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-width: 0;
  padding: 0;
  border: 0;
}

body.user-home-body .user-home-favorite-section-head::before {
  content: "";
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe39b, rgba(255, 227, 155, 0.12));
}

body.user-home-body .user-home-favorite-section-head h3 {
  margin: 0;
  color: #ffe2a0;
  font-family: var(--font-classic);
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  font-weight: 950;
  line-height: 1.05;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

body.user-home-body .user-home-favorite-domain-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-content: start;
  gap: 0.82rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.user-home-body .user-home-favorite-domain {
  position: relative;
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 232, 173, 0.16);
  border-radius: 16px;
  background: #24201a;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08);
}

body.user-home-body .user-home-favorite-domain-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid rgba(255, 232, 173, 0.13);
}

body.user-home-body .user-home-favorite-domain-head span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.42rem;
  border-radius: 999px;
  color: #21150a;
  background: linear-gradient(135deg, #ffe39b, #d99a36 62%, #a84a32);
  font-size: 0.68rem;
  font-weight: 950;
}

body.user-home-body .user-home-favorite-domain-head h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff7e6;
  font-size: 1rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.user-home-body .user-home-favorite-domain .user-home-favorite-section-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 250px));
  gap: 0.52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}


body.user-home-body .user-home-favorite-tier {
  display: grid;
  gap: 0.44rem;
  min-width: 0;
}

body.user-home-body .user-home-favorite-tier + .user-home-favorite-tier {
  margin-top: 0.12rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(255, 232, 173, 0.12);
}

body.user-home-body .user-home-favorite-tier h5 {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.12rem 0.48rem;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 999px;
  color: rgba(255, 247, 218, 0.88);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.25;
}

body.user-home-body .user-home-favorite-tier-chapters h5 {
  color: #221507;
  background: linear-gradient(135deg, #ffe39b, #d99a36);
}

body.user-home-body .user-home-favorite-tier .user-home-favorite-section-list {
  margin-top: 0;
}


body.user-home-body .user-home-favorite-parent-group {
  display: grid;
  grid-template-columns: minmax(132px, 0.25fr) minmax(0, 1fr);
  gap: 0.7rem;
  min-width: 0;
  padding: 0.66rem;
  border: 1px solid rgba(255, 232, 173, 0.13);
  border-radius: 13px;
  background: linear-gradient(90deg, #29291e, #1c201a);
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.06);
}

body.user-home-body .user-home-favorite-parent-group + .user-home-favorite-parent-group {
  margin-top: 0.1rem;
}

body.user-home-body .user-home-favorite-parent-head {
  display: grid;
  align-content: start;
  gap: 0.34rem;
  min-width: 0;
  padding-top: 0.1rem;
}

body.user-home-body .user-home-favorite-parent-head span {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-width: 44px;
  height: 22px;
  padding: 0 0.52rem;
  border: 1px solid rgba(255, 232, 173, 0.32);
  border-radius: 999px;
  color: #221507;
  background: linear-gradient(135deg, #ffe39b, #d99a36);
  font-size: 0.68rem;
  font-weight: 950;
}

body.user-home-body .user-home-favorite-parent-head h5 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff7df;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.user-home-body .user-home-favorite-parent-group .user-home-favorite-section-list {
  grid-template-columns: repeat(auto-fill, minmax(205px, 246px));
  align-content: start;
}

@media (max-width: 720px) {
  body.user-home-body .user-home-favorite-parent-group {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  body.user-home-body .user-home-favorite-list > .user-home-favorite-section {
    grid-template-columns: 1fr;
  }

  body.user-home-body .user-home-favorite-domain-list,
  body.user-home-body .user-home-favorite-domain .user-home-favorite-section-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Membership voting action and XE2 vote ledger */
.site-vote-button {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.36rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #4e4a43;
  background: transparent;
  box-shadow: none;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-vote-button:hover,
.site-vote-button:focus-visible {
  transform: translateY(-1px);
  color: #8a5a00;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.36);
  outline: none;
}

.site-vote-button.is-voted {
  color: #7a5200;
}

.site-vote-mark {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.02rem;
  line-height: 1;
}

.user-home-vote-card {
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center;
  padding-right: 0.54rem !important;
}

.user-home-vote-meta {
  display: grid;
  gap: 0.04rem;
  min-width: 0;
  overflow: visible !important;
  color: rgba(246, 238, 214, 0.72) !important;
  line-height: 1.18;
  white-space: normal !important;
}

.user-home-vote-meta span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(246, 238, 214, 0.76) !important;
  font-size: 0.62rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-home-vote-meta span:first-child {
  color: #d7c083 !important;
  font-weight: 950;
}

.user-home-vote-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  padding: 0;
  border: 0;
  color: #4fd27b;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 16px rgba(79, 210, 123, 0.22);
  white-space: nowrap;
}

body.user-home-body [data-user-votes].user-home-panel,
body.user-home-body [data-user-votes].user-home-detail-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.user-home-body [data-user-votes] > h2 {
  display: none;
}


body.user-home-body .user-home-profile-card h2 {
  color: #fff4c6 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36);
}

body.user-home-body .user-home-profile-card p {
  color: rgba(246, 238, 214, 0.86) !important;
}

body.user-home-body [data-user-tier] {
  color: #183724 !important;
  background: #d8c26f !important;
}

body.user-home-body .user-home-stat span {
  color: #4fd27b !important;
  text-shadow: 0 0 16px rgba(79, 210, 123, 0.22);
}

body.user-home-body .user-home-stat strong {
  color: rgba(246, 238, 214, 0.88) !important;
}

body.user-home-body .user-home-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-home-vote-rules {
  margin: 0 0 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 232, 173, 0.18);
  border-radius: 10px;
  background: #1d241d;
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.06);
}

.user-home-vote-rules h3 {
  margin: 0 0 0.55rem;
  color: #fff4c6;
  font-size: 1rem;
  font-weight: 950;
}

.user-home-vote-rules ol {
  display: grid;
  gap: 0.38rem;
  margin: 0;
  padding-left: 1.25rem;
}

.user-home-vote-rules li {
  color: rgba(246, 238, 214, 0.86);
  font-size: 0.86rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  body.user-home-body .user-home-stat-grid {
    grid-template-columns: 1fr;
  }
}

body.user-home-body [data-user-votes] .user-home-favorite-domain-list {
  grid-template-columns: 1fr;
}

body.user-home-body [data-user-votes] .user-home-favorite-domain {
  width: 100%;
}

body.user-home-body [data-user-votes] .user-home-favorite-copy strong {
  color: #fff8dc !important;
}

body.user-home-body [data-user-votes] .user-home-vote-meta span {
  color: rgba(255, 246, 211, 0.82) !important;
}

body.user-home-body [data-user-votes] .user-home-vote-meta span:first-child {
  color: #f5d879 !important;
}


body.user-home-body [data-user-votes] .user-home-vote-points {
  color: #4fd27b !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
  opacity: 1 !important;
  text-shadow: 0 0 16px rgba(79, 210, 123, 0.28);
}


body.user-home-body [data-user-votes] .user-home-favorite-parent-group {
  grid-template-columns: minmax(108px, 0.2fr) minmax(0, 1fr);
}

body.user-home-body [data-user-votes] .user-home-favorite-parent-head {
  gap: 0.12rem;
}

body.user-home-body [data-user-votes] .user-home-favorite-parent-head h5 {
  order: 1;
  color: #fff7df;
  font-size: 0.9rem;
  line-height: 1.22;
  white-space: normal;
}

body.user-home-body [data-user-votes] .user-home-favorite-parent-head span {
  order: 2;
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(246, 238, 214, 0.66);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.2;
}


body.user-home-body [data-user-favorites] .user-home-favorite-parent-group {
  grid-template-columns: minmax(108px, 0.2fr) minmax(0, 1fr);
}

body.user-home-body [data-user-favorites] .user-home-favorite-parent-head {
  gap: 0.12rem;
}

body.user-home-body [data-user-favorites] .user-home-favorite-parent-head h5 {
  order: 1;
  color: #fff7df;
  font-size: 0.9rem;
  line-height: 1.22;
  white-space: normal;
}

body.user-home-body [data-user-favorites] .user-home-favorite-parent-head span {
  order: 2;
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(246, 238, 214, 0.66);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.2;
}


body.user-home-body [data-user-favorites] .user-home-favorite-domain-list {
  grid-template-columns: 1fr;
}

body.user-home-body [data-user-favorites] .user-home-favorite-domain {
  width: 100%;
}

/* XE clarity refresh: calmer member workspace */
body.user-home-body .user-home-detail-page {
  width: min(100% - 2rem, 1180px);
}

body.user-home-body .user-home-detail-page .user-home-hero.section-header {
  grid-template-columns: 1fr !important;
  gap: 0.45rem;
  margin: 0 auto 0.8rem;
  padding: 1.15rem 1.35rem 1.2rem !important;
  border-radius: 14px;
}

body.user-home-body .user-home-detail-page .user-home-hero.section-header:has(.user-home-hero-side:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
  align-items: center;
  column-gap: 1.25rem;
}

body.user-home-body .user-home-detail-page .user-home-hero-side {
  justify-content: flex-end;
}

body.user-home-body .user-home-detail-page .user-home-hero-side[hidden] {
  display: none !important;
}

body.user-home-body .user-home-detail-page .user-home-profile-card-hero {
  width: min(100%, 260px);
  min-height: 0;
  padding: 0.68rem 0.78rem;
  gap: 0.72rem;
  border-radius: 12px;
  border-bottom: 1px solid rgba(244, 205, 120, 0.24);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 132, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(54, 40, 20, 0.88), rgba(16, 20, 18, 0.9));
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18);
}

body.user-home-body .user-home-detail-page .user-home-profile-card-hero .user-home-avatar {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

body.user-home-body .user-home-detail-page .user-home-profile-card-hero h2 {
  margin-bottom: 0.12rem;
  font-size: 1rem;
  line-height: 1.1;
}

body.user-home-body .user-home-detail-page .user-home-profile-card-hero p {
  max-width: 168px;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.user-home-body .user-home-detail-page .user-home-profile-card-hero .user-home-tier {
  margin-top: 0.28rem;
  min-height: 21px;
  padding: 0.12rem 0.46rem;
  font-size: 0.68rem;
}

body.user-home-body .user-home-detail-page .user-home-hero .book-tagline {
  max-width: 760px;
}


body.user-home-body .user-home-external-actions {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 0.58rem;
}

body.user-home-body .user-home-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.88rem;
  border: 1px solid rgba(234, 205, 114, 0.42);
  border-radius: 999px;
  color: #fff4c6;
  background: rgba(22, 34, 27, 0.54);
  font-size: 0.86rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.user-home-body .user-home-external-link:hover,
body.user-home-body .user-home-external-link:focus-visible {
  color: #251806;
  background: linear-gradient(135deg, #f3df95, #c89539);
  outline: none;
}
body.user-home-body .user-home-detail-page .page-title-index {
  font-size: clamp(2rem, 4vw, 3.25rem);
}

body.user-home-body .user-home-tabs {
  align-items: center;
  width: min(100%, 1180px);
  margin: -0.25rem auto 0.65rem;
  padding: 0.22rem;
  border: 1px solid rgba(232, 205, 116, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(28, 38, 31, 0.88), rgba(13, 18, 17, 0.92));
  box-shadow: inset 0 1px rgba(255, 245, 214, 0.05), 0 12px 26px rgba(8, 14, 12, 0.14);
}

body.user-home-body .user-home-detail-page:has(.user-home-signed-in[hidden]) .user-home-tabs {
  display: none;
}

body.user-home-body .user-home-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 8rem;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(246, 238, 214, 0.72);
  font-size: 0.84rem;
}

body.user-home-body .user-home-tab:hover,
body.user-home-body .user-home-tab:focus-visible {
  color: #fff8dc;
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}

body.user-home-body .user-home-tab.is-active {
  min-height: 36px;
  color: #241805;
  background: linear-gradient(135deg, #f3df95, #c89539);
  box-shadow: inset 0 1px rgba(255, 249, 218, 0.35), 0 4px 12px rgba(8, 14, 12, 0.16);
}

body.user-home-body .user-home-detail-page .user-home-shell {
  padding: 1.05rem;
  border-radius: 14px;
}

body.user-home-body .user-home-detail-page .user-home-signed-out {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 620px;
  margin: 0 auto;
  padding: 1.6rem 1rem;
  text-align: center;
}

body.user-home-body .user-home-detail-page .user-home-signed-out p {
  color: rgba(246, 238, 214, 0.82) !important;
  font-weight: 750;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.24);
}

body.user-home-body .user-home-detail-page .user-home-signed-in {
  display: grid;
  gap: 1rem;
}

body.user-home-body .user-home-detail-page .user-home-stat-grid {
  gap: 0.65rem;
}

body.user-home-body .user-home-detail-page .user-home-stat {
  min-height: 5.8rem;
  padding: 0.85rem 0.95rem;
}

body.user-home-body .user-home-detail-page .user-home-vote-rules ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.2rem;
}

body.user-home-body .user-home-detail-page [data-user-favorites] .user-home-favorite-parent-group,
body.user-home-body .user-home-detail-page [data-user-votes] .user-home-favorite-parent-group {
  grid-template-columns: minmax(140px, 0.22fr) minmax(0, 1fr);
  gap: 0.85rem;
}

body.user-home-body .user-home-detail-page .user-home-favorite-parent-group .user-home-favorite-section-list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body.user-home-body .user-home-detail-page .user-home-activity-list[data-user-score-list] {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
body.user-home-body .user-home-detail-page .user-home-activity-list[data-user-score-list] {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.9rem;
}

body.user-home-body .user-home-detail-page .user-home-activity-list[data-user-score-list] li.user-home-score-card {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  grid-template-areas: "icon copy score";
  align-items: center;
  column-gap: 0.85rem;
  min-height: 6.1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(231, 205, 127, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(35, 50, 39, 0.94), rgba(16, 20, 18, 0.98)),
    radial-gradient(circle at 14% 10%, rgba(221, 177, 70, 0.18), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 222, 0.08), 0 14px 30px rgba(8, 12, 10, 0.24);
}

body.user-home-body .user-home-game-emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 2.15rem;
  line-height: 1;
}

/* ---- G-domain Matrix background and breadcrumb overhaul (Shift-3) ---- */
body.play-page {
  background-color: #0d0a08 !important;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(255, 205, 85, 0.14) 0%, transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(80, 220, 255, 0.12) 0%, transparent 30%),
    radial-gradient(circle at 54% 78%, rgba(230, 57, 70, 0.1) 0%, transparent 38%),
    linear-gradient(135deg, #0d0a08 0%, #1a1410 48%, #0a0c10 100%) !important;
  color: #f5f5f7 !important;
}
body.play-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  display: block !important;
  background-image:
    linear-gradient(rgba(255, 210, 98, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 220, 255, 0.13) 1px, transparent 1px),
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255, 255, 255, 0.04) 10px 11px) !important;
  background-size: 38px 38px, 38px 38px, 100% 12px !important;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 82%) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 82%) !important;
}

body.play-page .site-section-pulldown-pill,
body.play-page .site-breadcrumb-pill {
  color: #e8dcc8 !important;
  border-color: rgba(220, 180, 110, 0.28) !important;
  background: rgba(100, 80, 50, 0.12) !important;
}
body.play-page .site-section-pulldown-pill:hover,
body.play-page .site-breadcrumb-pill:hover {
  border-color: rgba(255, 210, 98, 0.7) !important;
  background: rgba(255, 210, 98, 0.12) !important;
  color: #fff9e8 !important;
}
body.play-page .site-breadcrumb-trigger {
  color: #e8dcc8 !important;
  border-color: rgba(220, 180, 110, 0.28) !important;
  background: rgba(100, 80, 50, 0.12) !important;
}
body.play-page .site-breadcrumb-trigger:hover {
  border-color: rgba(255, 210, 98, 0.7) !important;
  background: rgba(255, 210, 98, 0.12) !important;
  color: #fff9e8 !important;
}
body.play-page .site-section-pulldown-separator,
body.play-page .site-breadcrumb-separator {
  color: rgba(220, 180, 110, 0.6) !important;
}
body.play-page .site-breadcrumb-dropdown {
  background: rgba(25, 20, 15, 0.95) !important;
  border-color: rgba(220, 180, 110, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
body.play-page .site-breadcrumb-dropdown-item {
  color: #d2c3aa !important;
}
body.play-page .site-breadcrumb-dropdown-item:hover {
  background: rgba(255, 210, 98, 0.08) !important;
  color: #fff9e8 !important;
}
body.play-page .site-breadcrumb-dropdown-item.is-active {
  color: var(--game-accent, #ffd166) !important;
  background: rgba(255, 210, 98, 0.05) !important;
}

body.user-home-body .user-home-detail-page .user-home-score-icon {
  grid-area: icon !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(236, 203, 105, 0.34);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(224, 176, 70, 0.24), rgba(255, 245, 166, 0.1));
  color: #ffe992 !important;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 220, 0.14);
}

body.user-home-body .user-home-detail-page .user-home-score-copy {
  grid-area: copy !important;
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  color: rgba(247, 239, 210, 0.74) !important;
}

body.user-home-body .user-home-detail-page .user-home-score-copy strong {
  color: #fff7d3 !important;
  font-size: 1rem;
  line-height: 1.18;
  white-space: normal;
}

body.user-home-body .user-home-detail-page .user-home-score-copy strong a {
  color: inherit !important;
  text-decoration: none;
}

body.user-home-body .user-home-detail-page .user-home-score-copy strong a:hover,
body.user-home-body .user-home-detail-page .user-home-score-copy strong a:focus-visible {
  color: #f2cf72 !important;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

body.user-home-body .user-home-detail-page .user-home-score-status {
  grid-area: auto !important;
  color: rgba(247, 239, 210, 0.72) !important;
  font-size: 0.82rem;
  line-height: 1.28;
}

body.user-home-body .user-home-detail-page .user-home-score-date {
  grid-area: auto !important;
  color: rgba(247, 239, 210, 0.55) !important;
  font-size: 0.75rem;
  letter-spacing: 0;
}

body.user-home-body .user-home-detail-page .user-home-score-value {
  grid-area: score !important;
  justify-self: end;
  min-width: 2.15rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2dc8b, #bf8c2f);
  color: #241805 !important;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 8px 18px rgba(191, 140, 47, 0.18);
}

@media (max-width: 720px) {
  body.user-home-body .user-home-detail-page .user-home-activity-list[data-user-score-list] li.user-home-score-card {
    grid-template-columns: 2.55rem minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "score score";
    row-gap: 0.7rem;
  }

  body.user-home-body .user-home-detail-page .user-home-score-icon {
    width: 2.45rem;
    height: 2.45rem;
  }

  body.user-home-body .user-home-detail-page .user-home-score-value {
    justify-self: start;
  }
}
@media (max-width: 860px) {
  body.user-home-body .user-home-detail-page .user-home-hero.section-header:has(.user-home-hero-side:not([hidden])) {
    grid-template-columns: 1fr !important;
  }

  body.user-home-body .user-home-detail-page .user-home-hero-side {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body.user-home-body .user-home-detail-page {
    width: min(100% - 1rem, 1180px);
  }

  body.user-home-body .user-home-tabs {
    padding: 0.28rem;
  }

  body.user-home-body .user-home-tab {
    flex: 0 0 auto;
    min-width: 6.9rem;
  }

  body.user-home-body .user-home-detail-page .user-home-shell {
    padding: 0.75rem;
  }

  body.user-home-body .user-home-detail-page .user-home-vote-rules ol {
    grid-template-columns: 1fr;
  }

  body.user-home-body .user-home-detail-page [data-user-favorites] .user-home-favorite-parent-group,
  body.user-home-body .user-home-detail-page [data-user-votes] .user-home-favorite-parent-group {
    grid-template-columns: 1fr;
  }
}
.site-auth-modal[hidden] {
  display: none !important;
}

.site-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 12, 10, 0.42);
}

.site-auth-modal-card {
  position: relative;
  width: min(92vw, 380px);
  padding: 1.25rem;
  border: 1px solid rgba(255, 232, 173, 0.22);
  border-radius: 14px;
  background: #fffdf5;
  color: #252018;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.site-auth-modal-card h2,
.site-auth-modal-card p {
  margin: 0 0 0.8rem;
}

.site-auth-modal-card h2 {
  color: #252018 !important;
}

.site-auth-modal-card p {
  color: rgba(37, 32, 24, 0.74) !important;
}

.site-auth-modal-link {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 0.8rem;
  color: #8a641f !important;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-auth-modal-link[hidden] {
  display: none !important;
}

.site-auth-modal-link:hover,
.site-auth-modal-link:focus-visible {
  color: #5c3c12 !important;
}

.site-auth-modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  color: #252018;
  background: rgba(32, 35, 39, 0.08);
  cursor: pointer;
}

.site-auth-google {
  min-height: 38px;
  padding: 0 0.95rem;
  border: 1px solid rgba(43, 69, 48, 0.22);
  border-radius: 999px;
  color: #fff8e7;
  background: #1d382b;
  font-weight: 900;
  cursor: pointer;
}

/* ==========================================================================
   Domain R (Rankings) — Dark Matrix Leaderboard Design
   ========================================================================== */

/* ---- Full-page dark beige-black matrix background ---- */
body:has(.rankings-page) .site-page-shell,
body.rankings-hub-body .site-page-shell {
  background-color: #1c1a13;
  background-image:
    repeating-linear-gradient(0deg, rgba(220, 205, 160, 0.035) 0, rgba(220, 205, 160, 0.035) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(220, 205, 160, 0.02) 0, rgba(220, 205, 160, 0.02) 1px, transparent 1px, transparent 14px);
  color: #e0ddd4;
}

body.rankings-hub-body,
body:has(.rankings-page) {
  background-color: #1c1a13;
  color: #e0ddd4;
}

/* ---- Constrain title header to middle third, left-aligned content ---- */
.rankings-page .section-header {
  padding-top: 0.75rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid rgba(220, 205, 160, 0.12);
  margin-bottom: 0;
  max-width: 38%;
  min-width: 280px;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.015);
  border-radius: 8px;
  padding-inline: 1.5rem;
  text-align: left !important;
  align-items: flex-start !important;
}

.rankings-page .page-heading-stack {
  margin-bottom: 0.3rem;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

/* Force subtitle/tagline left-align inside the narrow header */
.rankings-page .section-header .subtitle,
.rankings-page .section-header .book-tagline {
  text-align: left !important;
  margin-inline: 0 !important;
}

/* ---- Page title — use strong body-qualified selector to win cascade ---- */
body:has(.rankings-page) .section-header h1.page-title-index,
body:has(.rankings-page) .section-header h1,
.rankings-page .section-header h1,
.rankings-page .page-title-index {
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

/* ---- Subtitle / tagline — visible but not loud ---- */
.rankings-page .subtitle,
.rankings-page .book-tagline {
  color: rgba(228, 230, 237, 0.72) !important;
}

/* ---- Breadcrumb pills — adapt for dark bg ---- */
body:has(.rankings-page) .rankings-page .site-section-pulldown-pill,
body:has(.rankings-page) .rankings-page .site-breadcrumb-pill,
.rankings-page .site-section-pulldown-pill,
.rankings-page .site-breadcrumb-pill {
  color: rgba(255, 210, 60, 0.88) !important;
  background: rgba(255, 210, 60, 0.09) !important;
  border-color: rgba(255, 210, 60, 0.22) !important;
}

.rankings-page .site-section-pulldown-pill:hover,
.rankings-page .site-breadcrumb-pill:hover {
  color: #ffd23c !important;
  background: rgba(255, 210, 60, 0.15) !important;
}

.rankings-page .site-breadcrumb-trigger {
  color: rgba(255, 210, 60, 0.7) !important;
}

.rankings-page .site-section-pulldown-separator,
.rankings-page .site-breadcrumb-separator {
  color: rgba(228, 230, 237, 0.35) !important;
}

/* ---- Breadcrumb dropdown — dark glass ---- */
.rankings-page .site-breadcrumb-dropdown {
  background: rgba(16, 20, 28, 0.97) !important;
  border-color: rgba(255, 210, 60, 0.14) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
}

.rankings-page .site-breadcrumb-dropdown-item {
  color: rgba(228, 230, 237, 0.8) !important;
}

.rankings-page .site-breadcrumb-dropdown-item:hover {
  background: rgba(255, 210, 60, 0.08) !important;
  color: #ffd23c !important;
}

.rankings-page .site-breadcrumb-dropdown-item.is-active {
  color: #ffd23c !important;
  background: rgba(255, 210, 60, 0.1) !important;
}

.rankings-page .site-breadcrumb-dropdown-divider {
  border-color: rgba(255, 210, 60, 0.08) !important;
}

/* ---- Footer on dark rankings pages ---- */
body:has(.rankings-page) .h-landing-footer,
body.rankings-hub-body .h-landing-footer {
  background: rgba(10, 13, 18, 0.85);
  border-top: 1px solid rgba(255, 210, 60, 0.08);
  color: rgba(228, 230, 237, 0.45);
}

body:has(.rankings-page) .h-landing-footer a,
body.rankings-hub-body .h-landing-footer a {
  color: rgba(255, 210, 60, 0.5) !important;
}

body:has(.rankings-page) .h-landing-footer a:hover,
body.rankings-hub-body .h-landing-footer a:hover {
  color: rgba(255, 210, 60, 0.85) !important;
}

/* ---- Hub Grid ---- */
.rankings-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
  margin-top: 1.4rem;
}

/* ---- Ranking Card base ---- */
.ranking-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.2rem;
  border: 1px solid rgba(255, 210, 60, 0.1);
  border-top: 3px solid rgba(255, 210, 60, 0.45);
  border-radius: 10px;
  background: rgba(16, 21, 31, 0.94);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Ghost decorative symbol in top-right of each card */
.ranking-card::before {
  content: "★";
  position: absolute;
  top: -0.6rem;
  right: 0.8rem;
  font-size: 6.5rem;
  font-weight: 900;
  color: rgba(255, 210, 60, 0.055);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: color 0.3s ease;
}

.ranking-card:hover {
  transform: translateY(-3px);
}

/* ---- Category colour: Saves / Favorites (Amber-Gold) ---- */
.ranking-card:has([data-hub-saves-list]),
.ranking-card:has([data-saves-all-list]),
.ranking-card:has([data-saves-ce-list]),
.ranking-card:has([data-saves-ae-list]),
.ranking-card:has([data-saves-he-list]),
[data-muzi-rankings^="saves"] .ranking-card {
  border-top-color: #f5a623;
}

.ranking-card:has([data-hub-saves-list])::before,
.ranking-card:has([data-saves-all-list])::before,
.ranking-card:has([data-saves-ce-list])::before,
.ranking-card:has([data-saves-ae-list])::before,
.ranking-card:has([data-saves-he-list])::before,
[data-muzi-rankings^="saves"] .ranking-card::before {
  content: "♥";
  color: rgba(245, 166, 35, 0.09);
}

.ranking-card:has([data-hub-saves-list]) h2,
.ranking-card:has([data-saves-all-list]) h2,
.ranking-card:has([data-saves-ce-list]) h2,
.ranking-card:has([data-saves-ae-list]) h2,
.ranking-card:has([data-saves-he-list]) h2,
[data-muzi-rankings^="saves"] .ranking-card h2 {
  color: #f5a623 !important;
}

.ranking-card:has([data-hub-saves-list]):hover,
[data-muzi-rankings^="saves"] .ranking-card:hover {
  border-color: rgba(245, 166, 35, 0.5);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 166, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ranking-card:has([data-hub-saves-list]):hover::before,
[data-muzi-rankings^="saves"] .ranking-card:hover::before {
  color: rgba(245, 166, 35, 0.14);
}

/* Saves score color */
.ranking-card:has([data-hub-saves-list]) .ranking-score,
.ranking-card:has([data-saves-all-list]) .ranking-score,
.ranking-card:has([data-saves-ce-list]) .ranking-score,
.ranking-card:has([data-saves-ae-list]) .ranking-score,
.ranking-card:has([data-saves-he-list]) .ranking-score,
[data-muzi-rankings^="saves"] .ranking-score {
  color: rgba(245, 166, 35, 0.7);
}

/* Saves view-all button */
.ranking-card:has([data-hub-saves-list]) .ranking-view-all,
.ranking-card:has([data-saves-all-list]) .ranking-view-all,
.ranking-card:has([data-saves-ce-list]) .ranking-view-all,
.ranking-card:has([data-saves-ae-list]) .ranking-view-all,
.ranking-card:has([data-saves-he-list]) .ranking-view-all,
[data-muzi-rankings^="saves"] .ranking-view-all {
  background: rgba(245, 166, 35, 0.14);
  border-color: rgba(245, 166, 35, 0.38);
  color: rgba(245, 166, 35, 0.9) !important;
}
.ranking-card:has([data-hub-saves-list]) .ranking-view-all:hover,
[data-muzi-rankings^="saves"] .ranking-view-all:hover {
  background: rgba(245, 166, 35, 0.22);
  box-shadow: 0 0 14px rgba(245, 166, 35, 0.22);
}

/* ---- Category colour: Votes (Crimson-Coral) ---- */
.ranking-card:has([data-hub-votes-list]),
.ranking-card:has([data-votes-ce-list]),
.ranking-card:has([data-votes-ae-list]),
.ranking-card:has([data-votes-he-list]),
[data-muzi-rankings^="votes"] .ranking-card {
  border-top-color: #e63946;
}

.ranking-card:has([data-hub-votes-list])::before,
.ranking-card:has([data-votes-ce-list])::before,
.ranking-card:has([data-votes-ae-list])::before,
.ranking-card:has([data-votes-he-list])::before,
[data-muzi-rankings^="votes"] .ranking-card::before {
  content: "▲";
  color: rgba(230, 57, 70, 0.1);
}

.ranking-card:has([data-hub-votes-list]) h2,
.ranking-card:has([data-votes-ce-list]) h2,
.ranking-card:has([data-votes-ae-list]) h2,
.ranking-card:has([data-votes-he-list]) h2,
[data-muzi-rankings^="votes"] .ranking-card h2 {
  color: #e87480 !important;
}

.ranking-card:has([data-hub-votes-list]):hover,
[data-muzi-rankings^="votes"] .ranking-card:hover {
  border-color: rgba(230, 57, 70, 0.55);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(230, 57, 70, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ranking-card:has([data-hub-votes-list]):hover::before,
[data-muzi-rankings^="votes"] .ranking-card:hover::before {
  color: rgba(230, 57, 70, 0.15);
}

.ranking-card:has([data-hub-votes-list]) .ranking-score,
.ranking-card:has([data-votes-ce-list]) .ranking-score,
.ranking-card:has([data-votes-ae-list]) .ranking-score,
.ranking-card:has([data-votes-he-list]) .ranking-score,
[data-muzi-rankings^="votes"] .ranking-score {
  color: rgba(232, 116, 128, 0.75);
}

.ranking-card:has([data-hub-votes-list]) .ranking-view-all,
.ranking-card:has([data-votes-ce-list]) .ranking-view-all,
.ranking-card:has([data-votes-ae-list]) .ranking-view-all,
.ranking-card:has([data-votes-he-list]) .ranking-view-all,
[data-muzi-rankings^="votes"] .ranking-view-all {
  background: rgba(230, 57, 70, 0.12);
  border-color: rgba(230, 57, 70, 0.38);
  color: rgba(232, 116, 128, 0.92) !important;
}
.ranking-card:has([data-hub-votes-list]) .ranking-view-all:hover,
[data-muzi-rankings^="votes"] .ranking-view-all:hover {
  background: rgba(230, 57, 70, 0.2);
  box-shadow: 0 0 14px rgba(230, 57, 70, 0.22);
}

/* ---- Category colour: Games (Electric Teal) ---- */
.ranking-card:has([data-hub-games-list]),
.ranking-card:has([data-games-list]),
[data-muzi-rankings^="games"] .ranking-card {
  border-top-color: #00c4b4;
}

.ranking-card:has([data-hub-games-list])::before,
.ranking-card:has([data-games-list])::before,
[data-muzi-rankings^="games"] .ranking-card::before {
  content: "◆";
  color: rgba(0, 196, 180, 0.1);
}

.ranking-card:has([data-hub-games-list]) h2,
.ranking-card:has([data-games-list]) h2,
[data-muzi-rankings^="games"] .ranking-card h2 {
  color: #00c4b4 !important;
}

.ranking-card:has([data-hub-games-list]):hover,
[data-muzi-rankings^="games"] .ranking-card:hover {
  border-color: rgba(0, 196, 180, 0.5);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 196, 180, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ranking-card:has([data-hub-games-list]):hover::before,
[data-muzi-rankings^="games"] .ranking-card:hover::before {
  color: rgba(0, 196, 180, 0.15);
}

.ranking-card:has([data-hub-games-list]) .ranking-score,
.ranking-card:has([data-games-list]) .ranking-score,
[data-muzi-rankings^="games"] .ranking-score {
  color: rgba(0, 196, 180, 0.72);
}

.ranking-card:has([data-hub-games-list]) .ranking-view-all,
.ranking-card:has([data-games-list]) .ranking-view-all,
[data-muzi-rankings^="games"] .ranking-view-all {
  background: rgba(0, 196, 180, 0.1);
  border-color: rgba(0, 196, 180, 0.36);
  color: rgba(0, 196, 180, 0.92) !important;
}
.ranking-card:has([data-hub-games-list]) .ranking-view-all:hover,
[data-muzi-rankings^="games"] .ranking-view-all:hover {
  background: rgba(0, 196, 180, 0.18);
  box-shadow: 0 0 14px rgba(0, 196, 180, 0.2);
}

/* ---- Card heading (shared) ---- */
.ranking-card h2 {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: rgba(255, 210, 60, 0.88);
  font-size: 1.22rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.65rem;
}

/* ---- Ranking List ---- */
.ranking-list {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0.9rem;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.58rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 5px;
  transition: background-color 0.15s ease;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* ---- Rank Badges ---- */
.ranking-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(228, 230, 237, 0.42);
  font-family: var(--font-classic, serif);
}

.ranking-badge.rank-1 {
  background: linear-gradient(135deg, #ffe566 0%, #f5a623 100%);
  color: #5d3a00;
  box-shadow: 0 2px 10px rgba(245, 166, 35, 0.48);
}

.ranking-badge.rank-2 {
  background: linear-gradient(135deg, #e0e8f0 0%, #aabacb 100%);
  color: #263040;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ranking-badge.rank-3 {
  background: linear-gradient(135deg, #e0975a 0%, #a85520 100%);
  color: #2f1400;
  box-shadow: 0 2px 8px rgba(168, 85, 32, 0.38);
}

/* ---- Ranking Icon ---- */
.ranking-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.ranking-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.ranking-player-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(92, 113, 124, 0.95), rgba(49, 63, 73, 0.95));
  color: #e8dcc8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.ranking-badge.rank-2 + .ranking-player-avatar {
  background: linear-gradient(135deg, #e0975a 0%, #c45c1e 100%);
  color: #fff6e7;
}

/* ---- Ranking Details ---- */
.ranking-details {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ranking-details a {
  text-decoration: none;
  color: #d8dce8;
  font-size: 0.9rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.ranking-details a:hover {
  color: #ffd23c;
}

.ranking-details small {
  font-size: 0.7rem;
  color: rgba(228, 230, 237, 0.35);
  letter-spacing: 0.04em;
  font-family: var(--font-classic, serif);
}

/* ---- Ranking Score (default) ---- */
.ranking-score {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(228, 230, 237, 0.4);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ---- Card Footer ---- */
.ranking-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding-top: 0.2rem;
}

/* ---- View-all button (default / generic) ---- */
.ranking-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 60, 0.32);
  background: rgba(255, 210, 60, 0.1);
  color: rgba(255, 210, 60, 0.88) !important;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ranking-view-all:hover {
  background: rgba(255, 210, 60, 0.18);
  box-shadow: 0 0 14px rgba(255, 210, 60, 0.18);
  transform: scale(1.02);
}

/* ---- Detail Container (RB1, RB2, RE100 etc.) ---- */
.rankings-detail-container {
  position: relative;
  padding: 1.5rem;
  border: 1px solid rgba(255, 210, 60, 0.1);
  border-radius: 10px;
  background: rgba(16, 21, 31, 0.94);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  margin-top: 1.5rem;
  overflow: hidden;
}

.rankings-detail-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 210, 60, 0.012) 0, rgba(255, 210, 60, 0.012) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(255, 210, 60, 0.009) 0, rgba(255, 210, 60, 0.009) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
  z-index: 0;
}

.rankings-detail-container .ranking-item {
  position: relative;
  z-index: 1;
  padding: 0.85rem 0.75rem;
}

.rankings-detail-container .ranking-icon {
  width: 34px;
  height: 34px;
}

.rankings-detail-container .ranking-details a {
  font-size: 1rem;
}

/* ---- Mobile responsiveness ---- */
@media (max-width: 680px) {
  .rankings-hub-grid {
    grid-template-columns: 1fr;
  }
}

body.user-home-body .user-home-game-emoji-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 2.15rem;
  line-height: 1;
}


/* GE score summary card */
body.user-home-body [data-user-score-list] > .user-home-score-grand-total-item {
  grid-column: 1 / -1;
}

body.user-home-body [data-user-score-list] .user-home-score-total-card {
  grid-template-columns: 64px minmax(0, 1fr) minmax(104px, auto) !important;
  min-height: 112px;
  padding: 1rem 1.15rem !important;
  border: 1px solid rgba(244, 210, 126, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(68, 88, 62, 0.88), rgba(24, 35, 31, 0.94)),
    radial-gradient(circle at 18% 12%, rgba(244, 210, 126, 0.24), transparent 34%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 248, 216, 0.16);
}

body.user-home-body [data-user-score-list] .user-home-score-total-icon {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  color: #1f271d;
  font-size: 1.35rem;
  font-weight: 950;
  background: linear-gradient(180deg, #fff1a8, #d7aa45);
  border: 1px solid rgba(255, 252, 216, 0.62);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

body.user-home-body [data-user-score-list] .user-home-score-total-card strong {
  color: #fff5c7 !important;
  font-size: 1.32rem;
  line-height: 1.05;
}

body.user-home-body [data-user-score-list] .user-home-score-total-card .user-home-vote-meta span:first-child {
  color: rgba(255, 244, 199, 0.9) !important;
}

body.user-home-body [data-user-score-list] .user-home-vote-points {
  flex-direction: column;
  gap: 0.05rem;
  align-items: flex-end;
  justify-content: center;
  min-width: 3.8rem;
  line-height: 1;
  text-align: right;
}

body.user-home-body [data-user-score-list] .user-home-vote-points > span {
  color: #58db82;
  font-size: 1.08rem;
  font-weight: 950;
  text-shadow: 0 0 16px rgba(79, 210, 123, 0.22);
}

body.user-home-body [data-user-score-list] .user-home-vote-points > small {
  color: rgba(246, 238, 214, 0.62);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
}

body.user-home-body [data-user-score-list] .user-home-score-grand-points > span {
  color: #f6d76f;
  font-size: 1.72rem;
}

body.user-home-body [data-user-score-list] .user-home-score-grand-points > small {
  color: rgba(255, 245, 201, 0.78);
  font-size: 0.68rem;
}

@media (max-width: 640px) {
  body.user-home-body [data-user-score-list] .user-home-score-total-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon copy"
      "score score";
    gap: 0.8rem !important;
  }

  body.user-home-body [data-user-score-list] .user-home-score-total-card .user-home-vote-points {
    grid-area: score;
    align-items: flex-start;
    text-align: left;
  }

  body.user-home-body [data-user-score-list] .user-home-score-total-icon {
    width: 50px;
    height: 50px;
  }
}

/* XE member alias settings */
.user-home-alias-form {
  display: grid;
  gap: 0.45rem;
  margin: 1rem 0;
  padding: 0.85rem;
  border: 1px solid rgba(216, 190, 103, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.user-home-alias-form label {
  color: #fff4c6;
  font-weight: 900;
}

.user-home-alias-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.user-home-alias-row input {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(216, 190, 103, 0.32);
  border-radius: 8px;
  padding: 0 0.8rem;
  background: rgba(8, 18, 14, 0.72);
  color: #fff8e7;
  font: inherit;
  font-weight: 800;
}

.user-home-alias-row input:focus {
  outline: 2px solid rgba(245, 205, 86, 0.72);
  outline-offset: 2px;
}

.user-home-alias-help {
  margin: -0.12rem 0 0;
  color: rgba(246, 238, 214, 0.64) !important;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 650;
}

.user-home-alias-saved {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(136, 224, 141, 0.34);
  border-radius: 999px;
  background: rgba(53, 112, 68, 0.28);
  color: #c8f4c8 !important;
  font-size: 0.86rem;
  font-weight: 900;
}

.user-home-alias-saved[hidden] {
  display: none !important;
}

.user-home-alias-saved strong {
  color: #fff4c6;
}

.user-home-alias-status {
  min-height: 1.4em;
  margin: 0;
  color: #88e08d;
  font-size: 0.88rem;
  line-height: 1.55;
  font-weight: 850;
}

.user-home-alias-status.is-error {
  color: #ffb3a7;
}

@media (max-width: 560px) {
  .user-home-alias-row {
    grid-template-columns: 1fr;
  }
}
.ranking-login-required {
  align-items: center;
  min-height: 4.75rem;
  border: 1px dashed rgba(108, 211, 198, 0.36);
  background: rgba(108, 211, 198, 0.07);
}

.ranking-login-required .ranking-details {
  min-width: 0;
}

.ranking-login-required .ranking-details small {
  color: rgba(238, 231, 202, 0.78);
  font-size: 0.82rem;
  line-height: 1.35;
}

.ranking-login-button {
  margin-left: auto;
  border: 1px solid rgba(108, 211, 198, 0.45);
  border-radius: 999px;
  background: rgba(108, 211, 198, 0.13);
  color: #c8fff8;
  cursor: pointer;
  font-weight: 800;
  padding: 0.48rem 0.78rem;
  white-space: nowrap;
}

.ranking-login-button:hover,
.ranking-login-button:focus-visible {
  background: rgba(108, 211, 198, 0.23);
  outline: none;
}

@media (max-width: 520px) {
  .ranking-login-required {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ranking-login-button {
    margin-left: 3.15rem;
  }
}

/* XR1012 ranking media cards */
.ranking-card.ranking-media-card {
  padding-top: 8.45rem;
  background: rgba(16, 21, 31, 0.95);
}

.ranking-card.ranking-media-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7.25rem;
  background-image: linear-gradient(180deg, rgba(9, 11, 16, 0.08), rgba(9, 11, 16, 0.7)), var(--ranking-card-banner);
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(255, 210, 60, 0.12);
  pointer-events: none;
  z-index: 0;
}

.ranking-card.ranking-media-card h2 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 40px;
}

.ranking-card-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.ranking-page-media {
  position: relative;
  width: 100%;
  display: block;
  min-height: clamp(132px, 22vw, 220px);
  margin-top: 1.2rem;
  border: 1px solid rgba(255, 210, 60, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(9, 11, 16, 0.18), rgba(9, 11, 16, 0.78)), var(--ranking-card-banner);
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.36);
}

.ranking-page-media-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 30%, rgba(255, 210, 60, 0.22), transparent 34%);
  pointer-events: none;
}

.ranking-page-media-icon {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  width: 66px;
  height: 66px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(7, 9, 13, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.35rem;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

@media (max-width: 680px) {
  .ranking-card.ranking-media-card {
    padding-top: 7.35rem;
  }

  .ranking-card.ranking-media-card::after {
    height: 6.35rem;
  }

  .ranking-page-media {
    min-height: 118px;
  }

  .ranking-page-media-icon {
    width: 52px;
    height: 52px;
    left: 0.9rem;
    bottom: 0.85rem;
  }
}
/* XR1012 RB/RE hero balance */
body:has(.rankings-page) main.rankings-page,
body.rankings-hub-body main.rankings-page,
body.rankings-detail-body main.rankings-page {
  padding-top: 2.4rem !important;
}

body:has(.rankings-page) .rankings-page .section-header,
body.rankings-hub-body .rankings-page .section-header,
body.rankings-detail-body .rankings-page .section-header {
  width: min(920px, calc(100vw - 3rem)) !important;
  max-width: min(920px, calc(100vw - 3rem)) !important;
  min-width: 0 !important;
  margin: 0 auto 1.55rem !important;
  padding: 1.1rem 1.2rem 1.15rem !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr) !important;
  grid-template-areas:
    "heading media"
    "tagline media" !important;
  column-gap: clamp(1.2rem, 3vw, 2.4rem) !important;
  row-gap: 0.3rem !important;
  align-items: center !important;
  text-align: left !important;
  border: 1px solid rgba(255, 210, 60, 0.12) !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.035)) !important;
}

body:has(.rankings-page) .rankings-page .section-header .page-heading-stack,
body.rankings-hub-body .rankings-page .section-header .page-heading-stack,
body.rankings-detail-body .rankings-page .section-header .page-heading-stack {
  grid-area: heading;
  align-self: end;
  width: 100%;
  margin: 0 !important;
}

body:has(.rankings-page) .rankings-page .section-header .subtitle,
body:has(.rankings-page) .rankings-page .section-header .book-tagline,
body.rankings-hub-body .rankings-page .section-header .subtitle,
body.rankings-hub-body .rankings-page .section-header .book-tagline,
body.rankings-detail-body .rankings-page .section-header .subtitle,
body.rankings-detail-body .rankings-page .section-header .book-tagline {
  grid-area: tagline;
  align-self: start;
  max-width: 100% !important;
  margin: 0 !important;
}

body:has(.rankings-page) .rankings-page .ranking-page-media,
body.rankings-hub-body .rankings-page .ranking-page-media,
body.rankings-detail-body .rankings-page .ranking-page-media {
  grid-area: media;
  min-height: clamp(142px, 16vw, 190px) !important;
  height: 100% !important;
  margin: 0 !important;
  background-image: linear-gradient(90deg, rgba(9, 11, 16, 0.03), rgba(9, 11, 16, 0.38)), var(--ranking-card-banner) !important;
  background-position: center right !important;
}

body:has(.rankings-page) .rankings-page .ranking-page-media-icon,
body.rankings-hub-body .rankings-page .ranking-page-media-icon,
body.rankings-detail-body .rankings-page .ranking-page-media-icon {
  left: 1rem;
  bottom: 1rem;
}

@media (max-width: 760px) {
  body:has(.rankings-page) main.rankings-page,
  body.rankings-hub-body main.rankings-page,
  body.rankings-detail-body main.rankings-page {
    padding-top: 1.35rem !important;
  }

  body:has(.rankings-page) .rankings-page .section-header,
  body.rankings-hub-body .rankings-page .section-header,
  body.rankings-detail-body .rankings-page .section-header {
    width: min(100%, calc(100vw - 1.4rem)) !important;
    max-width: min(100%, calc(100vw - 1.4rem)) !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "heading"
      "tagline"
      "media" !important;
    padding: 0.95rem !important;
  }

  body:has(.rankings-page) .rankings-page .ranking-page-media,
  body.rankings-hub-body .rankings-page .ranking-page-media,
  body.rankings-detail-body .rankings-page .ranking-page-media {
    min-height: 128px !important;
    margin-top: 0.35rem !important;
  }
}
/* XR1012 R index and RB/RE hero proportion refinements */
body:has(.rankings-page) .rankings-page:not([data-muzi-rankings="hub"]) .section-header,
body.rankings-detail-body .rankings-page .section-header {
  width: min(820px, calc(100vw - 3rem)) !important;
  max-width: min(820px, calc(100vw - 3rem)) !important;
  margin-bottom: 2.35rem !important;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.75fr) !important;
}

body:has(.rankings-page) .rankings-page:not([data-muzi-rankings="hub"]) .ranking-page-media,
body.rankings-detail-body .rankings-page .ranking-page-media {
  width: 75% !important;
  justify-self: end !important;
  min-height: clamp(93px, 9.75vw, 122px) !important;
  max-height: 122px !important;
}

body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .section-header,
body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .section-header {
  width: min(640px, calc(100vw - 3rem)) !important;
  max-width: min(640px, calc(100vw - 3rem)) !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "heading"
    "tagline" !important;
  padding: 1rem 1.2rem 1.05rem !important;
}

body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid,
body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid {
  width: min(100%, 1200px);
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, minmax(290px, 370px)) !important;
  justify-content: center;
}

body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .ranking-card.ranking-media-card::after,
body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .ranking-card.ranking-media-card::after {
  background-position: center center;
}

@media (max-width: 1120px) {
  body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid,
  body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid {
    grid-template-columns: repeat(2, minmax(280px, 350px)) !important;
  }
}

@media (max-width: 680px) {
  body:has(.rankings-page) .rankings-page:not([data-muzi-rankings="hub"]) .section-header,
  body.rankings-detail-body .rankings-page .section-header,
  body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .section-header,
  body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .section-header {
    width: min(100%, calc(100vw - 1.4rem)) !important;
    max-width: min(100%, calc(100vw - 1.4rem)) !important;
  }

  body:has(.rankings-page) .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid,
  body.rankings-hub-body .rankings-page[data-muzi-rankings="hub"] .rankings-hub-grid {
    grid-template-columns: minmax(0, 370px) !important;
  }

  body:has(.rankings-page) .rankings-page:not([data-muzi-rankings="hub"]) .section-header,
  body.rankings-detail-body .rankings-page .section-header {
    margin-bottom: 1.75rem !important;
  }

  body:has(.rankings-page) .rankings-page:not([data-muzi-rankings="hub"]) .ranking-page-media,
  body.rankings-detail-body .rankings-page .ranking-page-media {
    width: 100% !important;
    min-height: 112px !important;
    max-height: none !important;
  }
}


/* GE rule panel tab layout (Shift-23) */
.ge-rules-panel {
    width: min(100%, 760px);
    margin: 1rem auto 0;
    text-align: left;
}
.ge-rules-panel details {
    overflow: hidden;
    border: 1px solid rgba(255, 210, 98, 0.22);
    border-radius: 8px;
    background:
radial-gradient(circle at 12% 0%, rgba(255, 210, 98, 0.1), transparent 42%),
rgba(14, 12, 10, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.06), 0 12px 26px rgba(0, 0, 0, 0.18);
}
.ge-rules-panel summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0.45rem 0 0.55rem;
    color: #ffe59f;
    cursor: pointer;
    font: 850 0.94rem var(--font-sans);
    list-style: none;
    user-select: none;
}
.ge-rules-panel summary::-webkit-details-marker {
    display: none;
}
.ge-rules-panel summary::before {
    content: "\1F4A1";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: rgba(255, 210, 98, 0.12);
    color: #ffd262;
    font-size: 0.78rem;
}
.ge-rules-panel details[open] summary {
    border-bottom: 1px solid rgba(255, 210, 98, 0.12);
}
.ge-rules-content {
    padding: 0.75rem 0 0;
    color: rgba(244, 239, 228, 0.84);
    font-size: 0.88rem;
    line-height: 1.58;
}
.ge-rules-content-tabbed {
    padding: 0.75rem 0 0;
}
.ge-rules-tabs {
    display: grid;
    gap: 0.8rem;
}
.ge-rules-tab-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.ge-rules-tab-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.25rem;
    border: 1px solid rgba(255, 210, 98, 0.16);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
}
.ge-rules-tab-list label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.48rem 0.7rem;
    border-radius: 6px;
    color: rgba(244, 239, 228, 0.76);
    font: 900 0.86rem var(--font-sans);
    cursor: pointer;
    text-align: center;
}
.ge-rules-tab-list label:hover {
    color: #fff1bf;
    background: rgba(255, 210, 98, 0.08);
}
.ge-rules-tab-radio:first-of-type:focus-visible ~ .ge-rules-tab-list label:first-child,
.ge-rules-tab-radio:nth-of-type(2):focus-visible ~ .ge-rules-tab-list label:nth-child(2) {
    outline: 2px solid rgba(142, 228, 255, 0.72);
    outline-offset: 2px;
}
.ge-rules-tab-radio:first-of-type:checked ~ .ge-rules-tab-list label:first-child,
.ge-rules-tab-radio:nth-of-type(2):checked ~ .ge-rules-tab-list label:nth-child(2) {
    color: #211606;
    background: linear-gradient(135deg, #ffe07b, #ffc253);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ge-rules-tab-pane {
    display: none !important;
}
.ge-rules-tab-radio:first-of-type:checked ~ .ge-rules-tab-panes .ge-rules-game-pane,
.ge-rules-tab-radio:nth-of-type(2):checked ~ .ge-rules-tab-panes .ge-rules-score-pane {
    display: block !important;
}
.ge-rules-game-body ul,
.ge-rules-game-body ol,
.ge-rules-content ul,
.ge-rules-content ol {
    margin: 0 !important;
    padding-left: 1.55rem !important;
    list-style-position: outside !important;
}
.ge-rules-game-body li,
.ge-rules-content li {
    padding-left: 0.18rem;
}
.ge-rules-game-body li + li,
.ge-rules-content li + li {
    margin-top: 0.42rem;
}
.ge-rules-content strong,
.ge-rules-score-standard strong {
    color: #fff1bf;
}
.ge-rules-score-standard {
    padding: 0.88rem 0.95rem;
    border: 1px solid rgba(91, 214, 255, 0.24);
    border-radius: 8px;
    background: rgba(91, 214, 255, 0.08);
    color: rgba(232, 250, 255, 0.9);
}
.ge-rules-score-standard strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #8ee4ff;
    font-size: 0.9rem;
}
.ge-rules-score-standard p {
    margin: 0.3rem 0 0;
    color: rgba(232, 250, 255, 0.84);
    font-size: 0.83rem;
    line-height: 1.48;
}

/* ---- XR1009 G media assets and Muzi Hero alignment (Shift-20) ---- */
body.play-page .site-sidebar-child-asset,
body.play-page .site-sidebar-child-emoji {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  border-radius: 0.28rem;
  flex: 0 0 1.05rem;
  margin-right: 0.4rem;
}

body.play-page .site-sidebar-child-emoji {
  display: inline-grid;
  place-items: center;
  font-size: 0.9rem;
  background: rgba(255, 244, 196, 0.08);
}

/* Atlas region mode */
.atlas-ar-page {
  --ar-ink: #292923;
  --ar-muted: #6f7065;
  --ar-rule: rgba(70, 71, 61, 0.2);
  --ar-paper: #f5f3eb;
  --ar-accent: #7a392f;
  --ar-olive: #5e6545;
  background: #eeece4;
  color: var(--ar-ink);
}

/* AR landing and Region detail heroes use the same full-screen Atlas treatment
   as AA, AB, and AE. The directory/detail content remains source-specific. */
.atlas-ar-landing-hero,
.atlas-ar-detail-hero {
  min-height: min(760px, calc(100svh - 78px));
}

.atlas-ar-landing-hero {
  min-height: calc(100svh - 72px);
  background-position: center;
  background-size: cover;
}

.atlas-ar-landing-hero::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 10, 0.9), rgba(8, 13, 10, 0.28) 54%, rgba(8, 13, 10, 0.62)),
    linear-gradient(0deg, rgba(8, 12, 9, 0.98), transparent 52%, rgba(8, 12, 9, 0.2));
}

.atlas-ar-landing-hero-copy {
  width: min(650px, calc(100% - 2rem));
  margin-left: clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(5.5rem, 11vh, 9rem) + 100px) 0 9rem;
}

.atlas-ar-landing-hero-nav {
  top: 1.35rem;
  left: clamp(1rem, 5vw, 5.5rem);
}

.atlas-ar-hero-feature-wrapper {
  top: calc(1.35rem + 12px);
  right: clamp(1rem, 5vw, 5.5rem);
}

.atlas-ar-hero-refresh {
  position: absolute;
  z-index: 2;
  top: 0.42rem;
  right: 0.42rem;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(238, 216, 131, 0.5);
  opacity: 0.65;
  cursor: pointer;
  font: 700 1rem/1 var(--font-sans);
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.atlas-ar-hero-refresh:hover,
.atlas-ar-hero-refresh:focus-visible {
  background: rgba(238, 216, 131, 0.15);
  color: #eed883;
  opacity: 1;
  transform: rotate(28deg);
}

.atlas-ar-hero-refresh:disabled {
  opacity: 0.36;
  cursor: default;
}

.atlas-ar-landing-hero .atlas-detail-hero-copy,
.atlas-ar-detail-hero .atlas-detail-hero-copy {
  width: min(760px, 56vw);
}

.atlas-ar-landing-hero .atlas-detail-hero-feature {
  right: clamp(1rem, 8vw, 9rem);
  bottom: 16%;
}

.atlas-ar-search-outside {
  padding-top: 2.5rem;
  padding-bottom: 3rem;
  background: var(--ar-paper);
}

.atlas-ar-main,
.atlas-ar-detail-main {
  min-height: 72vh;
}

.atlas-ar-mast {
  padding-top: 4.2rem;
  padding-bottom: 2.6rem;
}

.atlas-ar-kicker,
.atlas-ar-detail-title > span,
.atlas-ar-directory-head span,
.atlas-ar-family-head span {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ar-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlas-ar-mast h1,
.atlas-ar-detail-title h1 {
  margin: 0;
  color: var(--ar-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5vw, 5.8rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0;
}

.atlas-ar-detail-id-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.95rem;
}

.atlas-ar-mast > p,
.atlas-ar-detail-title > p {
  max-width: 48rem;
  margin: 1.15rem 0 0;
  color: var(--ar-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.lang-en .atlas-ar-mast > p,
.lang-en .atlas-ar-detail-title > p {
  font-family: Georgia, "Times New Roman", serif !important;
}

.atlas-ar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2.5rem;
  border-top: 1px solid var(--ar-rule);
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-stats > div {
  min-width: 0;
  padding: 1.1rem 1.25rem 1.05rem 0;
  border-right: 1px solid var(--ar-rule);
}

.atlas-ar-stats > div:not(:first-child) {
  padding-left: 1.25rem;
}

.atlas-ar-stats > div:last-child {
  border-right: 0;
}

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

.atlas-ar-stats strong {
  color: var(--ar-accent);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.atlas-ar-stats span {
  margin-top: 0.18rem;
  color: var(--ar-muted);
  font-size: 0.72rem;
}

.atlas-ar-directory-band,
.atlas-ar-family-band {
  padding: 2.8rem 0 3.5rem;
  background: var(--ar-paper);
  border-top: 1px solid var(--ar-rule);
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-directory-head,
.atlas-ar-family-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.atlas-ar-directory-head h2,
.atlas-ar-family-head h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: 0;
}

.atlas-ar-directory-head output,
.atlas-ar-family-head > strong {
  color: var(--ar-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.atlas-ar-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1.5fr) minmax(12rem, 0.75fr);
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.atlas-ar-search,
.atlas-ar-parent-filter {
  position: relative;
  display: block;
}

.atlas-ar-search input,
.atlas-ar-parent-filter select {
  width: 100%;
  height: 2.75rem;
  padding: 0 2.7rem 0 0.85rem;
  border: 1px solid rgba(84, 83, 71, 0.42);
  border-radius: 4px;
  background: #fffef9;
  color: var(--ar-ink);
  font: inherit;
  font-size: 0.82rem;
}

.atlas-ar-parent-filter select {
  padding-right: 0.8rem;
}

.atlas-ar-source-note {
  display: flex;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  color: var(--ar-muted);
  font-size: 0.72rem;
}

.atlas-ar-source-note span {
  color: var(--ar-accent);
  font-weight: 800;
}

.atlas-ar-groups {
  border-top: 1px solid var(--ar-rule);
}

.atlas-ar-group {
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-group[hidden],
.atlas-ar-child-row[hidden] {
  display: none;
}

.atlas-ar-group summary {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 7rem;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  cursor: pointer;
  list-style: none;
}

.atlas-ar-group summary::-webkit-details-marker {
  display: none;
}

.atlas-ar-group summary::after {
  content: "+";
  grid-column: 3;
  color: var(--ar-accent);
  font-size: 1.15rem;
}

.atlas-ar-group[open] summary::after {
  content: "−";
}

.atlas-ar-group-code,
.atlas-ar-group-count {
  color: var(--ar-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.atlas-ar-group-name {
  min-width: 0;
}

.atlas-ar-group-name strong,
.atlas-ar-group-tagline {
  display: block;
}

.atlas-ar-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.atlas-ar-group-title strong {
  font-size: 1rem;
}

.atlas-ar-group-tagline {
  margin-top: 0.14rem;
  overflow: hidden;
  color: var(--ar-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-ar-detail-id-row .atlas-map-service-button {
  height: 27px;
  min-height: 27px;
  box-sizing: border-box;
  margin: 0;
}

.atlas-ar-child-list {
  margin: 0 0 0.75rem;
  border-top: 1px solid var(--ar-rule);
}

.atlas-ar-child-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.15rem;
  color: var(--ar-ink);
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-row-title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.atlas-ar-row-title small,
.atlas-ar-row-open,
.atlas-ar-row-map {
  color: var(--ar-muted);
  font-size: 0.68rem;
}

.atlas-ar-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

.atlas-ar-row-open,
.atlas-ar-row-map {
  text-decoration: none;
  white-space: nowrap;
}

.atlas-ar-row-open {
  text-align: right;
}

.atlas-ar-child-row:hover .atlas-ar-row-open,
.atlas-ar-child-row:hover .atlas-ar-row-map,
.atlas-ar-child-row:focus-within .atlas-ar-row-open,
.atlas-ar-child-row:focus-within .atlas-ar-row-map {
  color: var(--ar-accent);
}

.atlas-ar-group-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.atlas-ar-group-detail {
  display: inline-block;
  color: var(--ar-accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.atlas-ar-group-map {
  color: var(--ar-muted);
  font-size: 0.72rem;
  text-decoration: none;
}

.atlas-ar-group-map:hover,
.atlas-ar-group-map:focus-visible {
  color: var(--ar-accent);
}

.atlas-ar-empty {
  padding: 2rem 0;
  color: var(--ar-muted);
}

.atlas-ar-detail-head {
  padding-top: 3.5rem;
  padding-bottom: 2.2rem;
}

.atlas-ar-detail-primary {
  display: grid;
  grid-template-columns: minmax(17rem, 0.85fr) minmax(25rem, 1.5fr);
  gap: 2rem;
  padding-bottom: 3rem;
}

.atlas-ar-coordinate-field {
  position: relative;
  display: grid;
  min-height: 19rem;
  overflow: hidden;
  border: 1px solid rgba(94, 101, 69, 0.38);
  border-radius: 4px;
  background-color: #d8d8c8;
  background-image:
    linear-gradient(rgba(94, 101, 69, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 101, 69, 0.14) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

.atlas-ar-coordinate-field::before,
.atlas-ar-coordinate-field::after {
  position: absolute;
  content: "";
  background: var(--ar-accent);
  opacity: 0.62;
}

.atlas-ar-coordinate-field::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
}

.atlas-ar-coordinate-field::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
}

.atlas-ar-coordinate-field > div {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 1.25rem;
  background: rgba(245, 243, 235, 0.92);
}

.atlas-ar-coordinate-field span,
.atlas-ar-coordinate-field strong,
.atlas-ar-coordinate-field small {
  display: block;
}

.atlas-ar-coordinate-field span,
.atlas-ar-coordinate-field small {
  color: var(--ar-muted);
  font-size: 0.7rem;
}

.atlas-ar-coordinate-field strong {
  margin: 0.35rem 0;
  color: var(--ar-accent);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.atlas-ar-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ar-rule);
}

.atlas-ar-facts > div {
  min-width: 0;
  padding: 1.15rem 1rem 1rem 0;
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-facts > div:nth-child(even) {
  padding-left: 1rem;
  border-left: 1px solid var(--ar-rule);
}

.atlas-ar-facts span,
.atlas-ar-facts strong,
.atlas-ar-facts small {
  display: block;
}

.atlas-ar-facts span {
  color: var(--ar-muted);
  font-size: 0.68rem;
}

.atlas-ar-facts strong {
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.atlas-ar-facts small {
  margin-top: 0.25rem;
  color: var(--ar-olive);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
}

.atlas-ar-relations {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(20rem, 1.5fr);
  gap: 2rem;
  padding-top: 1.25rem;
  padding-bottom: 2.8rem;
  border-top: 1px solid var(--ar-rule);
}

.atlas-ar-relations > div > span,
.atlas-ar-relations > div > strong {
  display: block;
}

.atlas-ar-relations > div > span,
.atlas-ar-relations p {
  color: var(--ar-muted);
  font-size: 0.72rem;
}

.atlas-ar-relations > div > strong {
  margin-top: 0.35rem;
  color: var(--ar-accent);
  font-size: 1.4rem;
}

.atlas-ar-relation-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  border-left: 1px solid var(--ar-rule);
}

.atlas-ar-relation-counts span {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.65rem;
  color: var(--ar-muted);
  border-right: 1px solid var(--ar-rule);
  font-size: 0.72rem;
}

.atlas-ar-relation-counts strong {
  color: var(--ar-ink);
}

.atlas-ar-relation-counts small {
  color: var(--ar-accent);
  font-size: 0.72rem;
}

.atlas-ar-family-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ar-rule);
}

.atlas-ar-family-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.55rem 0.8rem 0.55rem 0;
  border-bottom: 1px solid var(--ar-rule);
}

.atlas-ar-family-detail {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ar-ink);
  text-decoration: none;
}

.atlas-ar-family-entry:nth-child(odd) {
  padding-right: 1.4rem;
  border-right: 1px solid var(--ar-rule);
}

.atlas-ar-family-entry:nth-child(even) {
  padding-left: 1.4rem;
}

.atlas-ar-family-detail[aria-current="page"] {
  color: var(--ar-accent);
}

.atlas-ar-family-detail span:first-child,
.atlas-ar-family-detail strong,
.atlas-ar-family-detail small {
  display: block;
}

.atlas-ar-family-detail small,
.atlas-ar-family-map {
  color: var(--ar-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.atlas-ar-family-map {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.atlas-ar-family-map:hover,
.atlas-ar-family-map:focus-visible {
  color: var(--ar-accent);
}

.atlas-sidebar-context-label {
  display: block;
  padding: 0.8rem 0.75rem 0.35rem;
  color: var(--gold-muted, #a78d4f);
  font-size: 0.68rem;
  font-weight: 800;
}

.atlas-sidebar-ar-children {
  margin-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.atlas-sidebar-ar-child {
  padding-left: 1.25rem;
}

@media (max-width: 760px) {
  .atlas-ar-landing-hero,
  .atlas-ar-detail-hero {
    min-height: 700px;
  }

  .atlas-ar-mast {
    padding-top: 2.5rem;
  }

  .atlas-ar-mast h1,
  .atlas-ar-detail-title h1 {
    font-size: 2.35rem;
  }

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

  .atlas-ar-stats > div:nth-child(2) {
    border-right: 0;
  }

  .atlas-ar-stats > div:nth-child(n+3) {
    border-top: 1px solid var(--ar-rule);
  }

  .atlas-ar-stats > div:nth-child(3) {
    padding-left: 0;
  }

  .atlas-ar-toolbar,
  .atlas-ar-detail-primary,
  .atlas-ar-relations {
    grid-template-columns: 1fr;
  }

  .atlas-ar-group summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
  }

  .atlas-ar-group summary::after {
    grid-column: 2;
    grid-row: 1;
  }

  .atlas-ar-group-count {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0.2rem;
  }

  .atlas-ar-group-tagline {
    display: none;
  }

  .atlas-ar-child-list {
    margin-left: 0;
  }

  .atlas-ar-child-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .atlas-ar-row-open {
    display: none;
  }

  .atlas-ar-row-actions {
    gap: 0;
  }

  .atlas-ar-group-detail {
    margin-left: 0;
  }

  .atlas-ar-group-actions {
    gap: 0.75rem;
  }

  .atlas-ar-detail-primary {
    gap: 1rem;
  }

  .atlas-ar-coordinate-field {
    min-height: 15rem;
  }

  .atlas-ar-relations {
    gap: 1rem;
  }

  .atlas-ar-relation-counts {
    border-top: 1px solid var(--ar-rule);
  }

  .atlas-ar-family-list {
    grid-template-columns: 1fr;
  }

  .atlas-ar-family-entry:nth-child(odd),
  .atlas-ar-family-entry:nth-child(even) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }
}

@media (max-width: 440px) {
  .atlas-ar-directory-head,
  .atlas-ar-family-head {
    align-items: start;
  }

  .atlas-ar-facts {
    grid-template-columns: 1fr;
  }

  .atlas-ar-facts > div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .atlas-ar-row-title {
    display: block;
  }

  .atlas-ar-relation-counts {
    grid-template-columns: repeat(5, minmax(2.5rem, 1fr));
  }
}

/* ---- Atlas v3 attractions (S3-J1 Phase 3) ---- */
.atlas-sidebar-aa-context {
  display: grid;
  gap: 1px;
}

.atlas-sidebar-context-link.is-current {
  background: rgba(126, 30, 30, 0.1);
  color: #7e1e1e;
}

.atlas-aa-main,
.atlas-aa-detail-main {
  background: #f4f1ea;
  color: #292d2a;
}

.atlas-aa-hero {
  position: relative;
  min-height: clamp(390px, 62vh, 680px);
  display: flex;
  align-items: flex-end;
  background-color: #26342d;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.atlas-aa-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 17, 12, 0.92) 0%, rgba(7, 17, 12, 0.2) 65%, rgba(7, 17, 12, 0.06) 100%);
}

.atlas-aa-hero-copy {
  width: min(1160px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0 3.1rem;
  color: #fffdf5;
}

.atlas-aa-hero .site-breadcrumb-row {
  opacity: 1;
}

.atlas-aa-hero .site-section-pulldown-pill,
.atlas-aa-hero .site-breadcrumb-pill,
.atlas-aa-hero .site-breadcrumb-trigger {
  color: rgba(255, 253, 245, 0.92) !important;
  border-color: rgba(244, 218, 139, 0.48) !important;
  background: rgba(7, 17, 12, 0.62) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(5px);
}

.atlas-aa-hero .site-section-pulldown-pill:hover,
.atlas-aa-hero .site-breadcrumb-pill:hover,
.atlas-aa-hero .site-breadcrumb-trigger:hover {
  color: #fffdf5 !important;
  border-color: rgba(244, 218, 139, 0.82) !important;
  background: rgba(47, 31, 17, 0.78) !important;
}

.atlas-aa-hero .site-section-pulldown-separator,
.atlas-aa-hero .site-breadcrumb-separator {
  color: rgba(244, 218, 139, 0.82) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.atlas-aa-hero-copy .breadcrumb,
.atlas-aa-hero-copy .breadcrumb a {
  color: rgba(255, 253, 245, 0.82);
}

.atlas-aa-hero-copy > span {
  display: block;
  margin-top: 1.2rem;
  color: #f0d483;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlas-aa-hero-copy h1 {
  max-width: 760px;
  margin: 0.42rem 0 0;
  color: #fffdf5;
  font-size: clamp(2.7rem, 5rem, 5rem);
  line-height: 1;
  letter-spacing: 0;
}

.atlas-aa-hero-copy p {
  max-width: 620px;
  margin: 0.8rem 0 0;
  color: rgba(255, 253, 245, 0.88);
  font-size: 1rem;
  line-height: 1.55;
}

.atlas-aa-browser-band {
  padding: 2.4rem 0 4.5rem;
  border-top: 4px solid #7e1e1e;
}

.atlas-aa-browser-heading {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

.atlas-aa-browser-heading h2 {
  margin: 0;
  color: #24352d;
  font-size: 1.55rem;
  letter-spacing: 0;
}

.atlas-aa-browser-heading output {
  color: #7e1e1e;
  font-size: 0.78rem;
  font-weight: 800;
}

.atlas-aa-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(145px, 0.72fr));
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid rgba(36, 53, 45, 0.16);
  border-radius: 6px;
  background: #fff;
}

.atlas-aa-filter-bar label {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  color: #6e665e;
  font-size: 0.64rem;
  font-weight: 700;
}

.atlas-aa-filter-bar input,
.atlas-aa-filter-bar select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 0.72rem;
  border: 1px solid #bbb5aa;
  border-radius: 4px;
  background: #fbfcfa;
  color: #292d2a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
}

.atlas-aa-search-control {
  align-self: end;
}

.atlas-aa-search-control input {
  padding-right: 2.4rem;
}

.atlas-aa-search-icon {
  position: absolute;
  right: 0.82rem;
  bottom: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid #7e1e1e;
  border-radius: 50%;
  pointer-events: none;
}

.atlas-aa-search-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  right: -5px;
  bottom: -2px;
  background: #7e1e1e;
  transform: rotate(45deg);
}

.atlas-aa-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.atlas-aa-card {
  overflow: hidden;
  border: 1px solid rgba(168, 145, 75, 0.34);
  border-radius: 10px;
  background: #101612;
  box-shadow: 0 8px 22px rgba(16, 22, 18, 0.18);
}

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

.atlas-aa-card-media {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background: #24352d;
}

.atlas-aa-card-media.is-empty {
  background:
    linear-gradient(135deg, rgba(238, 216, 131, 0.08), transparent 58%),
    #18241d;
}

.atlas-aa-card-image-id,
.atlas-aa-card-image-type {
  position: absolute;
  top: 0.65rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0.16rem 0.42rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #111;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.atlas-aa-card-image-id {
  left: 0.65rem;
}

.atlas-aa-card-image-type {
  right: 0.65rem;
}

.atlas-aa-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 240ms ease;
}

.atlas-aa-card:hover .atlas-aa-card-media img {
  transform: scale(1.025);
}

.atlas-aa-card-body {
  display: grid;
  gap: 0.42rem;
  padding: 0.95rem 1rem 0.82rem;
}

.atlas-aa-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.28rem;
  border: 1px solid rgba(184, 161, 83, 0.34);
  border-radius: 999px;
  color: #c8b873;
  font-size: 0.57rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.atlas-aa-card-tag span {
  color: #9d936b;
  font-size: 0.52rem;
  font-weight: 700;
}

.atlas-aa-card-tag:hover,
.atlas-aa-card-tag:focus-visible {
  border-color: #d2b85f;
  color: #f0df9c;
  background: rgba(210, 184, 95, 0.1);
}

.atlas-aa-card h2 {
  margin: 0;
  padding-top: 0.12rem;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.atlas-aa-card h2 a {
  color: #f5f0e1;
  text-decoration: none;
}

.atlas-aa-card p {
  min-height: 3.9em;
  margin: 0;
  color: #c8c3b6;
  font-family: var(--font-classic) !important;
  font-size: 0.75rem;
  line-height: 1.45;
}

.atlas-aa-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 24px;
  margin-top: -0.42rem;
  padding-top: 0;
}

.atlas-aa-empty {
  padding: 4rem 1rem;
  color: #6f6a62;
  text-align: center;
}

.atlas-aa-detail-head {
  padding-top: 2.1rem;
  padding-bottom: 1.4rem;
}

.atlas-aa-detail-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.72rem;
  margin-top: 1rem;
}

.atlas-aa-detail-title-row > span {
  flex: 0 0 auto;
  padding: 0.2rem 0.48rem;
  border-radius: 3px;
  background: #7e1e1e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.atlas-aa-detail-title-row h1 {
  margin: 0;
  color: #24352d;
  font-size: 2.45rem;
  line-height: 1.08;
  letter-spacing: 0;
}

.atlas-aa-detail-head > p {
  max-width: 780px;
  margin: 0.75rem 0 0;
  color: #565d58;
  font-size: 0.96rem;
  line-height: 1.55;
}

.atlas-aa-detail-visual {
  width: min(1400px, 100%);
  margin: clamp(1.75rem, 3.5vw, 3.25rem) auto 0;
  background: #101813;
}

.atlas-aa-display-stage {
  position: relative;
  aspect-ratio: 16 / 8.4;
  overflow: hidden;
}

.atlas-aa-display-stage > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1;
  transition: opacity 180ms ease;
}

.atlas-aa-display-stage > img.is-switching {
  opacity: 0.72;
}

.atlas-aa-display-title,
.atlas-aa-display-caption {
  position: absolute;
  color: #fff;
}

.atlas-aa-display-title {
  inset: 0 0 auto;
  padding: 1rem 1.15rem 3.2rem;
  background: linear-gradient(180deg, rgba(5, 14, 9, 0.78), transparent);
}

.atlas-aa-display-title strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.atlas-aa-display-caption {
  inset: auto 0 0;
  padding: 3.2rem 1.15rem 0.9rem;
  background: linear-gradient(0deg, rgba(5, 14, 9, 0.9), transparent);
}

.atlas-aa-display-caption p {
  max-width: min(78ch, 88%);
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font: 400 0.78rem/1.45 var(--font-classic);
}

.atlas-aa-image-reel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 3px;
  background: #101813;
}

.atlas-aa-image-reel button {
  min-width: 0;
  aspect-ratio: 2.4 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 3px;
  background: #24352d;
  cursor: pointer;
  opacity: 0.62;
}

.atlas-aa-image-reel button[aria-current="true"] {
  border-color: #f0d483;
  opacity: 1;
}

.atlas-aa-image-reel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.atlas-aa-detail-info {
  padding-top: 1.5rem;
  padding-bottom: 4.5rem;
}

.atlas-aa-detail-routes {
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(240, 212, 131, 0.26);
  border-bottom: 1px solid rgba(240, 212, 131, 0.28);
  background: #0d1410;
}

.atlas-ar-hero-routes {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.atlas-ar-hero-routes .atlas-aa-route-rail {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}

/* Keep the AR detail route rail in the Hero's bottom row.  An explicit grid
   row prevents the rail from being promoted into document flow above the
   background image when the viewport or browser scale changes. */
.atlas-ar-detail-hero {
  grid-template-rows: minmax(0, 1fr) auto;
}

/* The shared site rule fixes every <nav> to the viewport header.  The AR
   route rail is content inside the Hero, so keep this nav in the Hero's
   bottom grid row instead of letting it float at the top of the viewport. */
.atlas-ar-detail-hero .atlas-ar-hero-routes .atlas-aa-route-rail {
  position: static !important;
  inset: auto !important;
  width: 100%;
}

.atlas-ar-detail-hero .atlas-detail-hero-copy {
  grid-row: 1;
}

.atlas-ar-detail-hero .atlas-ar-hero-routes {
  position: static;
  grid-row: 2;
  align-self: stretch;
  width: 100%;
  z-index: 3;
}

/* Keep the AE deep-link rail inside the Matrix Hero.  The shared site rule
   fixes every <nav> to the viewport header; this late, component-specific
   override prevents the AE rail from reappearing above the Hero after a
   navigation or stylesheet cascade change. */
.atlas-matrix-hero .atlas-ae-hero-routes {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 3;
}

.atlas-matrix-hero .atlas-ae-hero-routes .atlas-aa-route-rail {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
}

/* AT-L1 views keep their child Matrix types in the Hero instead of adding a
   second, full-size content grid below it. */
.atlas-matrix-at-l1-hero-browser {
  position: absolute;
  right: auto;
  bottom: 5.5rem;
  left: clamp(2rem, 11vw, 12rem);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - clamp(2rem, 11vw, 12rem) - 1rem);
  overflow-x: auto;
  margin: 0;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.65rem;
  width: max-content;
  max-width: none;
  margin-top: 0;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile {
  flex: 0 0 clamp(190px, 15vw, 220px);
  width: clamp(190px, 15vw, 220px);
  min-height: 162px;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(238, 216, 131, 0.28);
  border-radius: 10px;
  background: rgba(10, 14, 12, 0.10);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile:hover {
  border-color: rgba(238, 216, 131, 0.8);
  background: rgba(18, 24, 20, 0.38);
  backdrop-filter: blur(10px);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 16px rgba(238, 216, 131, 0.2);
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile[hidden] {
  display: none;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile .atlas-aa-card-body {
  align-content: start;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.7rem 0.85rem 0.65rem;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-label {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.2rem;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-icon {
  display: block;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(238, 216, 131, 0.46);
  border-radius: 8px;
  object-fit: cover;
  opacity: 0.9;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0;
  font-size: 1.15rem;
  line-height: 1.12;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-label h2 {
  display: block;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile h2 a {
  color: #fffdf3;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile p {
  display: block !important;
  overflow: visible !important;
  min-height: 0;
  color: rgba(255, 253, 243, 0.82);
  font-size: 0.74rem;
  line-height: 1.3;
  -webkit-line-clamp: none !important;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-id,
.atlas-matrix-at-l1-hero-browser .atlas-at-type-count {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 253, 243, 0.65) !important;
  background: rgba(255, 255, 255, 0.05);
  font: 600 0.54rem/1 var(--font-sans);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .atlas-matrix-at-l1-hero-browser .atlas-at-type-grid {
    width: max-content;
  }

  .atlas-matrix-at-l1-hero-browser .atlas-at-type-tile {
    flex-basis: 170px;
    width: 170px;
  }
}

@media (max-width: 640px) {
  .atlas-matrix-at-l1-hero-browser {
    right: 1rem;
    bottom: 4.5rem;
    left: 1rem;
    max-width: calc(100% - 2rem);
  }

  .atlas-matrix-at-l1-hero-browser .atlas-at-type-grid {
    width: max-content;
  }

  .atlas-matrix-at-l1-hero-browser .atlas-at-type-tile {
    flex-basis: 150px;
    width: 150px;
  }
}

/* AT.html uses the same card language as AT-L1 pages, but keeps all nine
   AT-L1 routes on a single inner-AT rail row. */
/* AT.html uses the 3x3 grid layout for AT-L1 scope cards. */
.atlas-matrix-hero {
  flex-direction: column;
}

.atlas-matrix-hero-copy {
  align-self: flex-start;
  width: min(680px, calc(100% - 2rem));
  margin: 0 auto 0 clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(5.5rem, 11vh, 9rem) + 100px) 0 0;
  text-align: left;
}

.atlas-at-landing-rail {
  position: relative;
  inset: auto;
  width: min(700px, calc(100% - 4rem));
  max-width: 100%;
  margin: 3.35rem 0 clamp(3.5rem, 8vh, 6rem) clamp(2rem, 11vw, 12rem);
  padding: 0;
  overflow: visible;
  background: transparent;
  border-top: 0;
  backdrop-filter: none;
  z-index: 10;
}

.atlas-at-landing-rail .atlas-at-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 0.8rem;
  width: 100%;
}

.atlas-at-landing-rail .atlas-at-l1-route-tile {
  width: 100%;
  min-width: 0;
  min-height: 86px;
  height: auto;
  aspect-ratio: auto;
  border: 1px solid rgba(238, 216, 131, 0.28);
  border-radius: 10px;
  background: rgba(10, 14, 12, 0.03);
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.atlas-at-landing-rail .atlas-at-l1-route-tile:hover {
  border-color: rgba(238, 216, 131, 0.8);
  background: rgba(18, 24, 20, 0.20);
  backdrop-filter: blur(6px);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(238, 216, 131, 0.2);
}

.atlas-at-landing-rail .atlas-at-type-tile .atlas-aa-card-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 86px;
  padding: 1.05rem 1.1rem;
  box-sizing: border-box;
}

/* Left Column: Icon centered vertically */
.atlas-at-landing-rail .atlas-at-card-left {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.atlas-at-landing-rail .atlas-at-type-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid rgba(238, 216, 131, 0.35);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px;
  flex-shrink: 0;
}

/* Right Column: 2 Rows */
.atlas-at-landing-rail .atlas-at-card-right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.atlas-at-landing-rail .atlas-at-card-top {
  display: flex;
  align-items: center;
  min-width: 0;
}

.atlas-at-landing-rail .atlas-at-card-top h2,
.atlas-at-landing-rail a.atlas-at-l1-route-tile .atlas-at-card-top h2 {
  display: block;
  font-size: clamp(1.3rem, 1.55vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fffbea !important;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

body.lang-en .atlas-at-landing-rail .atlas-at-card-top h2,
body.lang-en .atlas-at-landing-rail a.atlas-at-l1-route-tile .atlas-at-card-top h2 {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.15rem, 1.35vw, 1.48rem);
  font-weight: 700;
  color: #fffbea !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.atlas-at-landing-rail .atlas-at-card-bottom {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.atlas-at-landing-rail .atlas-at-type-id,
.atlas-at-landing-rail .atlas-at-type-count {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 253, 243, 0.65) !important;
  background: rgba(255, 255, 255, 0.05);
  font: 600 0.54rem/1 var(--font-sans);
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-left: 0;
  text-align: left;
}

/* AT.html keeps the internal nine-route rail above a compact cross-A route.
   The former Atlas Map action is represented here as a true rail item. */
.atlas-matrix-cross-a-rail {
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 50px;
  border-top: 1px solid rgba(239, 221, 157, 0.24);
  background: rgba(12, 16, 14, 0.78);
  backdrop-filter: blur(8px);
}

.atlas-matrix-cross-a-rail .atlas-matrix-cross-a-mode {
  width: 190px;
  min-height: 50px;
  padding: 0.42rem 0.85rem;
}

.atlas-matrix-cross-a-rail .atlas-matrix-cross-a-mode:hover,
.atlas-matrix-cross-a-rail .atlas-matrix-cross-a-mode:focus-visible {
  background: rgba(238, 216, 131, 0.14);
  outline: none;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile {
  position: relative;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile .atlas-aa-card-body {
  position: relative;
  height: 100%;
}

.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile .atlas-aa-card-foot {
  position: absolute;
  right: 0.9rem;
  bottom: 0.75rem;
  margin: 0;
}

.atlas-matrix-at-l1-hero-browser:not(.atlas-at-landing-rail) .atlas-at-type-tile h2 {
  color: #fffdf3;
}

/* AT route cards are full-card links. Keep their descriptive copy visually
   native to the card instead of inheriting browser/link underline styling. */
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile,
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile:hover,
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile:focus-visible {
  color: #fffdf3;
  text-decoration: none !important;
}

.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile h2,
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile p,
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile .atlas-at-type-id,
.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile .atlas-at-type-count {
  text-decoration: none !important;
}

.atlas-matrix-at-l1-hero-browser a.atlas-at-type-tile p {
  color: rgba(255, 253, 243, 0.72);
}

/* Final AT landing-page polish: keep the English hero heading on one desktop
   line, keep AT IDs as true content-sized pillboxes, and use the same classic
   serif voice for card taglines as for AT titles. */
@media (min-width: 761px) {
  body.lang-en .atlas-matrix-hero h1 {
    max-width: none;
    font-size: clamp(3rem, 6.4vw, 5.6rem);
    white-space: nowrap;
  }
}

/* Standardized CJK hero title size across Atlas domain A for ZH and TC */
.lang-zh .atlas-home-hero-copy h1,
.lang-tc .atlas-home-hero-copy h1,
.lang-zh .atlas-matrix-hero h1,
.lang-tc .atlas-matrix-hero h1,
.lang-zh .atlas-detail-hero-copy h1,
.lang-tc .atlas-detail-hero-copy h1 {
  font-size: clamp(3.6rem, 7.5vw, 5.8rem);
}

.atlas-at-landing-rail .atlas-at-type-label,
.atlas-matrix-at-l1-hero-browser .atlas-at-type-label {
  justify-items: start;
}

.atlas-at-landing-rail .atlas-at-type-id,
.atlas-matrix-at-l1-hero-browser .atlas-at-type-id {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  flex: 0 0 auto;
}

.atlas-at-landing-rail .atlas-at-type-tile p,
.atlas-matrix-at-l1-hero-browser .atlas-at-type-tile p {
  font-family: var(--font-classic) !important;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 1100px) {
  .atlas-at-landing-rail {
    overflow-x: auto;
  }

  .atlas-at-landing-rail .atlas-at-type-grid {
    grid-template-columns: repeat(9, minmax(112px, 1fr));
    min-width: 1040px;
  }
}

@media (max-width: 640px) {
  .atlas-at-landing-rail .atlas-at-type-grid {
    grid-template-columns: repeat(9, 112px);
  }
}

.atlas-at-parent-pill[hidden] {
  display: none !important;
}

/* AT-L2 parent navigation stays on the hero breadcrumb line and exposes its
   sibling AT-L2 entries from the right-hand trigger. */
.atlas-matrix-hero-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.65rem;
  width: max-content;
  max-width: calc(100% - 2rem);
}

.atlas-matrix-hero-nav > .site-breadcrumb-row,
.atlas-matrix-hero-nav > .atlas-at-parent-container {
  flex: 0 0 auto;
  margin: 12px 0 8px;
}

.atlas-at-parent-container[hidden] {
  display: none !important;
}

.atlas-at-parent-container .site-breadcrumb-dropdown {
  z-index: 20;
}

.atlas-aa-sequence span {
  color: #7e1e1e;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.atlas-aa-route-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
}

.atlas-aa-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 112px;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.1rem;
  border: 0;
  border-right: 1px solid rgba(240, 212, 131, 0.16);
  border-radius: 0;
  background: #101813;
  color: #f7f0dd;
  text-decoration: none;
}

/* A-domain route rail height: keep the compact override after the shared base
   card rule so the former 112px height and padding cannot win the cascade. */
.atlas-aa-route {
  height: 50px;
  min-height: 50px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.atlas-aa-route:last-child {
  border-right: 0;
}

.atlas-aa-route-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(240, 212, 131, 0.38);
  border-radius: 50%;
  background: rgba(240, 212, 131, 0.08);
  font-size: 1.22rem;
  line-height: 1;
}

.atlas-aa-route-map-logo {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f0d483;
}

.atlas-aa-route-map-logo svg {
  width: 1.35rem;
  height: 1.35rem;
}

.atlas-aa-route-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.atlas-aa-route strong {
  color: #f0d483;
  font-size: 0.88rem;
  line-height: 1.2;
}

.atlas-aa-route-copy > span:not(.atlas-aa-route-detail):not(.atlas-aa-region-links):not(.atlas-aa-route-pill) {
  color: rgba(247, 240, 221, 0.72);
  font-size: 0.76rem;
  line-height: 1.35;
}

.atlas-aa-route-detail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.atlas-aa-route-primary {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fffaf0;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.atlas-aa-matrix-links {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.28rem;
}

.atlas-aa-matrix-links a {
  padding: 0.24rem 0.42rem;
  border: 1px solid rgba(247, 240, 221, 0.48);
  border-radius: 999px;
  color: #fffaf0;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.atlas-aa-route-pill,
.atlas-aa-route-copy > .atlas-aa-route-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(247, 240, 221, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(247, 240, 221, 0.58) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.atlas-aa-route-pill .atlas-aa-route-id {
  margin-left: 0.22rem;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}

.atlas-aa-region-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.atlas-aa-region-links a {
  color: #fffaf0;
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
}

.atlas-ar-attractions {
  padding: 2.7rem 0 3rem;
  border-top: 1px solid var(--ar-rule);
  background: #e8e7dd;
}

.atlas-ar-attractions-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.atlas-ar-attractions-head span {
  color: var(--ar-muted);
  font-size: 0.68rem;
}

.atlas-ar-attractions-head h2 {
  margin: 0.2rem 0 0;
  font-size: 1.5rem;
}

.atlas-ar-attractions-head > strong {
  color: var(--ar-accent);
  font-size: 0.72rem;
}

.atlas-ar-attraction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.atlas-ar-attraction-card {
  display: grid;
  grid-template-rows: 145px 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 101, 69, 0.28);
  border-radius: 4px;
  background: #f6f4ec;
}

.atlas-ar-attraction-media,
.atlas-ar-attraction-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.atlas-ar-attraction-media img {
  object-fit: cover;
}

.atlas-ar-attraction-card > div {
  display: grid;
  align-content: start;
  padding: 0.85rem;
}

.atlas-ar-attraction-card h3 {
  margin: 0;
  font-size: 1rem;
}

.atlas-ar-attraction-card h3 a,
.atlas-ar-attraction-open {
  color: var(--ar-ink);
  text-decoration: none;
}

.atlas-ar-attraction-card p {
  display: -webkit-box;
  margin: 0.42rem 0 0;
  overflow: hidden;
  color: var(--ar-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.atlas-ar-attraction-open {
  justify-self: end;
  margin-top: 0.7rem;
  color: var(--ar-accent);
  font-size: 0.66rem;
  font-weight: 750;
}

@media (max-width: 900px) {
  .atlas-ar-attraction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .atlas-ar-attraction-grid {
    grid-template-columns: 1fr;
  }

  .atlas-ar-attraction-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: minmax(118px, auto);
  }
}

.atlas-aa-route-primary:hover,
.atlas-aa-matrix-links a:hover,
.atlas-aa-route-pill:hover,
.atlas-aa-route-pill:focus-visible,
.atlas-aa-region-links a:hover {
  border-color: #ffe9a0;
  background: #f0d483;
  box-shadow: 0 0 0 2px rgba(240, 212, 131, 0.16);
  color: #1a170b;
  text-decoration: none;
}

.atlas-aa-route-pill:hover .atlas-aa-route-id,
.atlas-aa-route-pill:focus-visible .atlas-aa-route-id {
  color: rgba(26, 23, 11, 0.72);
}

.atlas-aa-route.is-live {
  border-color: rgba(126, 30, 30, 0.35);
}

.atlas-aa-route.is-live:hover {
  background: #18281e;
  box-shadow: inset 0 3px 0 #f0d483;
}

.atlas-aa-route.is-pending {
  opacity: 0.76;
}

.atlas-aa-route.is-pending[data-source-ready="true"] .atlas-aa-route-copy > span:last-child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #47745c;
}

.atlas-aa-sequence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.2rem;
}

.atlas-aa-sequence a {
  display: grid;
  gap: 0.22rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(36, 53, 45, 0.22);
  color: #29362f;
  text-decoration: none;
}

.atlas-aa-sequence a:last-child {
  text-align: right;
}

.atlas-aa-sequence strong {
  font-size: 0.78rem;
}

@media (max-width: 940px) {
  .atlas-aa-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

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

  .atlas-aa-route-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .atlas-aa-hero {
    min-height: 440px;
  }

  .atlas-aa-hero-copy {
    width: calc(100% - 1.25rem);
    padding-bottom: 2rem;
  }

  .atlas-aa-hero-copy h1 {
    font-size: 2.45rem;
  }

  .atlas-aa-filter-bar,
  .atlas-aa-grid,
  .atlas-aa-route-rail {
    grid-template-columns: 1fr;
  }

  .atlas-aa-card p {
    min-height: 0;
  }

  .atlas-aa-detail-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .atlas-aa-detail-title-row h1 {
    font-size: 1.8rem;
  }

  .atlas-aa-display-stage {
    aspect-ratio: 4 / 3;
  }

  .atlas-aa-display-caption {
    padding: 3rem 0.85rem 0.7rem;
  }

  .atlas-aa-display-title {
    padding: 0.8rem 0.85rem 2.7rem;
  }

  .atlas-aa-display-caption p {
    max-width: 100%;
    font-size: 0.72rem;
  }

  .atlas-aa-image-reel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas-aa-image-reel button {
    aspect-ratio: 1 / 1;
  }

  .atlas-aa-sequence {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .atlas-aa-sequence a:last-child {
    text-align: left;
  }

  .atlas-map-shell[data-target-status="active"][data-target-family="AA"] .atlas-map-legend {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- Atlas v3 mode-first sidebar (S3-J1 Phase 1) ---- */
.atlas-sidebar-modes {
  display: grid;
  gap: 0;
}

.atlas-sidebar-mode-list {
  display: grid;
  gap: 0;
  padding-bottom: 0.36rem;
}

.atlas-sidebar-mode-group {
  border-radius: 4px;
}

.atlas-sidebar-mode-group > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 0 0.24rem;
  border-radius: 3px;
  color: #4f473e;
  cursor: pointer;
  list-style: none;
}

.atlas-sidebar-mode-direct > .atlas-sidebar-mode-link {
  min-height: 22px;
  padding: 0 0.24rem;
  border-radius: 3px;
}

.atlas-sidebar-mode-group > summary::-webkit-details-marker {
  display: none;
}

.atlas-sidebar-mode-group > summary::after {
  content: "\25BE";
  width: 0.58rem;
  margin-left: auto;
  color: #7c7266;
  font-size: 0.7rem;
  line-height: 1;
  text-align: center;
  transition: transform 140ms ease;
}

.atlas-sidebar-mode-group[open] > summary::after {
  transform: rotate(180deg);
}

.atlas-sidebar-mode-group > summary:hover,
.atlas-sidebar-mode-group.is-active > summary,
.atlas-sidebar-mode-direct > .atlas-sidebar-mode-link:hover {
  background: rgba(126, 30, 30, 0.08);
}

.atlas-sidebar-mode-group.is-active > summary {
  color: #7e1e1e;
}

.atlas-sidebar-mode-link {
  display: grid;
  grid-template-columns: 1.05rem minmax(0, 1fr);
  align-items: center;
  gap: 0.24rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.atlas-sidebar-mode-group.is-planned {
  color: #81786d;
  opacity: 0.72;
}

.atlas-sidebar-mode-icon {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: #7e1e1e;
}

.atlas-sidebar-mode-icon svg {
  width: 0.76rem;
  height: 0.76rem;
}

.atlas-sidebar-mode-copy {
  display: block;
  min-width: 0;
}

.atlas-sidebar-mode-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-sidebar-mode-copy strong {
  font-size: 0.72rem;
  line-height: 1;
}

.atlas-sidebar-mode-children {
  padding: 0.18rem 0.18rem 0.38rem 0.42rem;
  border-left: 1px solid rgba(126, 30, 30, 0.13);
}

.atlas-sidebar-mode-children .site-sidebar-groups {
  max-height: none;
}

.atlas-sidebar-map-context {
  display: grid;
  gap: 1px;
}

.atlas-sidebar-context-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 27px;
  padding: 0.18rem 0.4rem;
  border-radius: 4px;
  color: #5a5248;
  font-size: 0.72rem;
  line-height: 1.15;
  text-decoration: none;
}

.atlas-sidebar-context-link:hover,
.atlas-sidebar-context-link.is-overview {
  background: rgba(156, 37, 37, 0.06);
}

.atlas-sidebar-context-link small {
  color: #8b2020;
  font-size: 0.61rem;
  font-weight: 700;
}

.lang-zh .atlas-sidebar-mode-copy strong,
.lang-tc .atlas-sidebar-mode-copy strong {
  font-size: 0.75rem;
}

@media (max-width: 420px) {
  .atlas-sidebar-mode-group > summary,
  .atlas-sidebar-mode-direct > .atlas-sidebar-mode-link {
    min-height: 32px;
  }

}

body.play-page .site-sidebar-parent-asset {
  width: 1.3rem;
  height: 1.3rem;
  object-fit: contain;
  border-radius: 0.35rem;
  flex: 0 0 1.3rem;
  margin-right: 0.35rem;
  background: rgba(255, 244, 196, 0.1);
}

body.play-page .gb-index-card,
body.play-page .gb-child-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.play-page .gb-index-card {
  padding-top: 7.15rem !important;
}

body.play-page .gb-child-card {
  padding-top: 6.35rem !important;
}

body.play-page .gb-index-card-media,
body.play-page .gb-child-card-media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 6.05rem;
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(9, 12, 14, 0.05), rgba(9, 12, 14, 0.72)), var(--g-card-banner);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(245, 201, 83, 0.2);
}

body.play-page .gb-child-card-media {
  height: 5.35rem;
}

body.play-page .gb-index-card:not([style*="--g-card-banner"]) .gb-index-card-media,
body.play-page .gb-child-card:not([style*="--g-card-banner"]) .gb-child-card-media {
  display: none;
}

body.play-page .gb-child-icon-img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  border-radius: 0.55rem;
  background: rgba(255, 247, 211, 0.12);
  box-shadow: 0 0 0 1px rgba(245, 201, 83, 0.25);
  vertical-align: middle;
}

body.play-page .gb-child-icon-img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.55rem;
}

body.play-page .gb-child-title {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

body.play-page .g-lobby-hero,
body.play-page .gb-book-hero,
body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) {
  width: min(820px, calc(100vw - 2rem)) !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(1.35rem, 2.4vw, 2rem) clamp(1.45rem, 3.6vw, 2.6rem) !important;
  text-align: left !important;
}

body.play-page .g-lobby-hero .page-heading-stack,
body.play-page .gb-book-hero .page-heading-stack,
body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .page-heading-stack {
  display: grid !important;
  justify-items: start !important;
  align-items: start !important;
  width: 100% !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .site-breadcrumb-row {
  justify-content: flex-start !important;
  margin: 0 0 0.55rem !important;
  width: 100% !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) h1.cb-title-flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 29%);
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(1rem, 3vw, 2.25rem) !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) h1.cb-title-flex > span:first-child,
body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) h1.cb-title-flex .he-title-text {
  justify-self: start !important;
  text-align: left !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .book-title-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: end !important;
  width: min(220px, 28vw) !important;
  height: 108px !important;
  padding: 0.45rem !important;
  border: 1px solid rgba(245, 201, 83, 0.26) !important;
  border-radius: 0.5rem !important;
  background: linear-gradient(135deg, rgba(255, 239, 164, 0.1), rgba(19, 15, 10, 0.52)) !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.play-page .g-hero-banner-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0.35rem !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .cb-header-pill,
body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .pill-box,
body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .book-tagline {
  justify-self: start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .book-tagline {
  max-width: calc(100% - 220px) !important;
  width: 100% !important;
}

body.play-page .h-scroll-inscription.gb-book-hero {
  width: min(820px, 100%) !important;
  max-width: min(820px, 100%) !important;
  min-height: 0 !important;
  padding: 0.9rem 1.1rem 1rem !important;
  margin-top: 0 !important;
  margin-bottom: 1.05rem !important;
}

body.play-page .gb-book-hero .page-heading-stack {
  gap: 0.35rem !important;
}

body.play-page .gb-book-hero .site-breadcrumb-row {
  margin-bottom: 0.25rem !important;
}

body.play-page .gb-book-hero h1.cb-title-flex {
  grid-template-columns: minmax(0, 1fr) minmax(142px, 164px) !important;
  gap: 0.9rem !important;
  align-items: center !important;
}

body.play-page .gb-book-hero h1.cb-title-flex > span:first-child {
  font-size: clamp(2.35rem, 4vw, 3.05rem) !important;
  line-height: 1.02 !important;
}

body.play-page .gb-book-hero .book-title-icon {
  width: 164px !important;
  height: 72px !important;
  padding: 0.3rem !important;
}

body.play-page .gb-book-hero .cb-header-pill {
  margin-top: 0.05rem !important;
}

body.play-page .gb-book-hero .book-tagline {
  margin-top: 0.38rem !important;
  font-size: 0.98rem !important;
  line-height: 1.38 !important;
  max-width: 34rem !important;
}

@media (max-width: 720px) {
  body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) h1.cb-title-flex {
    grid-template-columns: 1fr;
  }

  body.play-page .section-header.h-scroll-inscription:has(.book-title-icon) .book-title-icon {
    justify-self: start !important;
    width: min(100%, 260px) !important;
    height: 112px !important;
  }

  body.play-page .gb-index-card,
  body.play-page .gb-child-card {
    padding-top: 6.3rem !important;
  }
}

/* ---- GE Game Score Panel Modal Overlay ---- */
.ge-score-panel {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(13, 10, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

.ge-score-panel-card {
  position: relative;
  width: min(92vw, 420px);
  padding: 2.25rem 2rem;
  background: rgba(26, 20, 16, 0.95);
  border: 1px solid rgba(220, 180, 110, 0.35);
  border-radius: 16px;
  color: #f5f5f7;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 40px rgba(220, 180, 110, 0.1);
  text-align: center;
  animation: ge-score-modal-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ge-score-modal-in {
  from {
    transform: scale(0.92) translateY(10px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.ge-score-panel-copy {
  margin-bottom: 2rem;
}

.ge-score-kicker {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(220, 180, 110, 0.78);
  margin-bottom: 0.6rem;
}

.ge-score-panel-card h2 {
  font-size: 1.9rem;
  font-weight: 700;
  color: #ffd166;
  margin: 0 0 1.25rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(255, 209, 102, 0.25);
}

.ge-score-balance {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.25rem 0;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.ge-score-balance span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}

.ge-score-balance em {
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(245, 245, 247, 0.62);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.ge-score-balance strong {
  font-size: 1.55rem;
  font-weight: 700;
  color: #ffd166;
}

.ge-score-panel-card p[data-ge-score-detail] {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(245, 245, 247, 0.8);
  margin: 0 0 1.25rem;
}

.ge-score-status {
  min-height: 1.2rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #ffd166;
  margin: 0.5rem 0 0;
  transition: all 0.2s ease;
}

.ge-score-status.is-error {
  color: #ff6b6b;
}

.ge-score-auth-card {
  margin: 1rem 0 0;
  padding: 0.9rem;
  border: 1px solid rgba(255, 209, 102, 0.24);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.08), rgba(255, 255, 255, 0.035));
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ge-score-auth-card[hidden] {
  display: none !important;
}

.ge-score-auth-copy {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.ge-score-auth-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #2f1400;
  background: linear-gradient(135deg, #ffd166, #e0a96d);
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.22);
  font-size: 0.82rem;
}

.ge-score-auth-copy strong {
  display: block;
  color: #fff3cf;
  font-size: 0.86rem;
  line-height: 1.25;
}

.ge-score-auth-copy p {
  margin: 0.22rem 0 0;
  color: rgba(245, 245, 247, 0.68);
  font-size: 0.72rem;
  line-height: 1.42;
}

.ge-score-auth-button {
  width: 100%;
  min-height: 42px;
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 209, 102, 0.62);
  border-radius: 8px;
  color: #231100;
  background: linear-gradient(135deg, #ffe08a, #d9a832);
  box-shadow: 0 5px 16px rgba(217, 168, 50, 0.22);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.ge-score-auth-button:hover,
.ge-score-auth-button:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #fff0b8, #e7b947);
  box-shadow: 0 7px 20px rgba(255, 209, 102, 0.32);
  outline: none;
}

.ge-score-auth-button span {
  font-size: 1rem;
  line-height: 1;
}

.ge-score-auth-card small {
  display: block;
  margin-top: 0.55rem;
  color: rgba(245, 245, 247, 0.52);
  font-size: 0.64rem;
  line-height: 1.35;
  text-align: center;
}

.ge-score-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ge-score-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.8rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(220, 180, 110, 0.4);
  background: rgba(220, 180, 110, 0.08);
  color: #e8dcc8;
}

.ge-score-btn:hover {
  background: rgba(220, 180, 110, 0.16);
  border-color: rgba(255, 209, 102, 0.6);
  color: #fff9e8;
}

.ge-score-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ge-score-btn-primary {
  background: linear-gradient(135deg, #e0a96d 0%, #b8860b 100%);
  border: none;
  color: #2f1400;
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35);
  font-weight: 700;
}

.ge-score-btn-primary:hover {
  background: linear-gradient(135deg, #ffd166 0%, #e0a96d 100%);
  color: #1a0800;
  box-shadow: 0 6px 18px rgba(255, 209, 102, 0.5);
  transform: translateY(-1px);
}

.ge-score-btn-quiet {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(245, 245, 247, 0.54);
}

.ge-score-btn-quiet:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: transparent;
  color: #f5f5f7;
}

/* Global play-page tagline positioning clearance (Shift-39) */
body.play-page .book-tagline {
  max-width: calc(100% - 220px) !important;
}

@media (max-width: 560px) {
  body.play-page .book-tagline {
    max-width: 100% !important;
  }
}

/* ===========================================================================
   v0.1.42 Atlas viewpoint routes: A1 / A2 / A3
   =========================================================================== */
.atlas-home-page {
  background: #f3f0e9;
  color: #211f1b;
}

.atlas-home-main,
.atlas-viewpoint-main,
.atlas-a3-main {
  min-width: 0;
}

.atlas-viewpoint-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(440px, calc(100% - 2rem));
  min-height: 42px;
  margin: 0 auto;
  border: 1px solid rgba(70, 59, 40, 0.28);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(250, 248, 242, 0.96);
  box-shadow: 0 4px 16px rgba(32, 27, 20, 0.08);
}

.atlas-home-main > .atlas-viewpoint-tabs,
.atlas-viewpoint-main > .atlas-viewpoint-tabs,
.atlas-a3-main > .container .atlas-viewpoint-tabs {
  margin-top: 0.85rem;
  margin-bottom: 0.85rem;
}

.atlas-viewpoint-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 0;
  min-height: 42px;
  padding: 0.4rem 0.65rem;
  border-right: 1px solid rgba(70, 59, 40, 0.18);
  color: #514a3f;
  text-decoration: none;
  letter-spacing: 0;
}

.atlas-viewpoint-tab:last-child {
  border-right: 0;
}

.atlas-viewpoint-tab span {
  color: #8d2d25;
  font: 800 0.68rem/1 var(--font-sans);
}

.atlas-viewpoint-tab strong {
  overflow: hidden;
  font: 700 0.79rem/1.15 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-viewpoint-tab[aria-current="page"] {
  background: #2c2924;
  color: #fff9ea;
}

.atlas-viewpoint-tab[aria-current="page"] span {
  color: #e7c86c;
}

.atlas-viewpoint-tab:hover,
.atlas-viewpoint-tab:focus-visible {
  background: #453e32;
  color: #fff9ea;
  outline: none;
}

.atlas-home-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  background-color: #24302c;
  background-position: center 43%;
  background-size: cover;
  color: #fffdf3;
  isolation: isolate;
}

.atlas-home-hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: linear-gradient(90deg, rgba(14, 18, 17, 0.83) 0%, rgba(14, 18, 17, 0.46) 46%, rgba(14, 18, 17, 0.08) 75%), linear-gradient(0deg, rgba(12, 16, 14, 0.9) 0%, transparent 42%);
}

.atlas-home-hero-copy {
  align-self: flex-start;
  width: min(620px, calc(100% - 2rem));
  margin: 0 auto 0 clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(6.5rem, 14vh, 12rem) + 100px) 0 7.8rem;
}

.atlas-home-kicker,
.atlas-viewpoint-header > span,
.atlas-a3-map-copy > span {
  display: block;
  margin-bottom: 0.7rem;
  color: #eed883;
  font: 800 0.72rem/1.3 var(--font-sans);
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlas-home-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  color: #fffdf3;
  font-size: clamp(3.6rem, 7.5vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58);
}

.atlas-home-hero-copy p {
  max-width: 540px;
  margin: 1rem 0 0;
  color: rgba(255, 253, 243, 0.9);
  font-size: 1.05rem;
  line-height: 1.65;
  letter-spacing: 0;
}

.atlas-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.atlas-home-actions a,
.atlas-a3-map-copy > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.42rem 0.82rem;
  border: 1px solid rgba(238, 216, 131, 0.72);
  border-radius: 4px;
  background: rgba(21, 26, 22, 0.62);
  color: #fff1ba;
  font: 800 0.76rem/1.2 var(--font-sans);
  text-decoration: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
}

.atlas-home-action-icon {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.atlas-home-actions a svg,
.atlas-a3-map-copy > a svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #eed883;
  transition: color 0.2s ease;
}

.atlas-home-actions a:hover,
.atlas-home-actions a:focus-visible,
.atlas-a3-map-copy > a:hover,
.atlas-a3-map-copy > a:focus-visible {
  background: #e4c463;
  color: #211d15;
  outline: none;
}

.atlas-home-actions a:hover svg,
.atlas-home-actions a:focus-visible svg,
.atlas-a3-map-copy > a:hover svg,
.atlas-a3-map-copy > a:focus-visible svg {
  color: #211d15;
}

.atlas-home-mode-rail {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 92px;
  border-top: 1px solid rgba(239, 221, 157, 0.4);
  background: rgba(12, 16, 14, 0.88);
  backdrop-filter: blur(10px);
}

.atlas-home-image-link {
  position: absolute;
  right: 1rem;
  bottom: 104px;
  z-index: 1;
  display: grid;
  max-width: min(360px, calc(100% - 2rem));
  justify-items: end;
  color: rgba(255, 253, 243, 0.72);
  font: 600 0.67rem/1.35 var(--font-sans);
  text-align: right;
  text-decoration: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.atlas-home-image-link span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-home-image-link small {
  color: rgba(238, 216, 131, 0.8);
  font-size: 0.6rem;
}

.atlas-home-image-link:hover,
.atlas-home-image-link:focus-visible {
  color: #fffdf3;
  outline: none;
}

.atlas-home-mode {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border-right: 1px solid rgba(239, 221, 157, 0.2);
  color: #fffbea;
  text-decoration: none;
}

/* The home Hero's AG highlighter keeps the selected MZP image visible as a
   real image card, rather than exposing only the background-image credit. */
.atlas-home-mzp-highlighter {
  position: absolute;
  top: calc(1.35rem + 12px);
  right: clamp(1rem, 5vw, 5.5rem);
  bottom: auto;
  z-index: 10;
  width: min(340px, 27vw);
  border-left: 2px solid #eed883;
  background: rgba(12, 16, 14, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.atlas-home-mzp-highlighter .atlas-home-image-link {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "image title"
    "image credit";
  align-items: center;
  justify-items: start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.65rem 2.2rem 0.65rem 0.75rem;
  color: #fffbea;
  text-decoration: none;
  box-sizing: border-box;
}

.atlas-home-mzp-highlighter img {
  grid-area: image;
  display: block;
  width: 96px;
  height: 72px;
  border: 1px solid rgba(238, 216, 131, 0.48);
  border-radius: 5px;
  object-fit: cover;
}

.atlas-home-mzp-highlighter span {
  grid-area: title;
  align-self: end;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fffbea;
  text-align: left;
}

.atlas-home-mzp-highlighter small {
  grid-area: credit;
  align-self: start;
  font: 400 0.72rem/1.2 var(--font-sans);
  color: rgba(238, 216, 131, 0.8);
}

.atlas-home-mzp-highlighter .atlas-home-image-link:hover span {
  color: #eed883;
}

.atlas-home-mzp-refresh {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: rgba(238, 216, 131, 0.5);
  opacity: 0.65;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
}

.atlas-home-mzp-refresh:hover {
  background: rgba(238, 216, 131, 0.15);
  color: #eed883;
  opacity: 1;
}

.atlas-home-mode:last-child {
  border-right: 0;
}

.atlas-home-mode-code {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8cb69;
  font: 900 0.78rem/1 var(--font-sans);
}

.atlas-home-mode-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.atlas-home-mode-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.atlas-home-mode-copy strong {
  overflow: hidden;
  font: 800 1.12rem/1.2 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-home-mode-copy small {
  overflow: hidden;
  color: rgba(255, 251, 234, 0.62);
  font: 600 0.64rem/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-home-mode.is-planned {
  color: rgba(255, 251, 234, 0.62);
}

.atlas-home-mode em {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  color: rgba(255, 251, 234, 0.45);
  font: normal 700 0.56rem/1 var(--font-sans);
}

a.atlas-home-mode:hover,
a.atlas-home-mode:focus-visible {
  background: rgba(228, 196, 99, 0.13);
  outline: none;
}

.atlas-home-intro-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 2.5rem;
}

.atlas-home-intro-band > span {
  color: #9c2525;
  font: 800 3rem/1 var(--font-serif);
}

.atlas-home-intro-band h2,
.atlas-home-intro-band p {
  margin: 0;
  letter-spacing: 0;
}

.atlas-home-intro-band h2 {
  font-size: 1.35rem;
}

.atlas-home-intro-band p {
  margin-top: 0.25rem;
  color: #665f54;
  font-size: 0.88rem;
}

.atlas-home-search {
  padding-bottom: 2.75rem;
}

.atlas-viewpoint-main {
  width: min(1120px, calc(100% - 2rem));
  padding-bottom: 4rem;
}

.atlas-viewpoint-header {
  margin: 1.6rem 0 1.35rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(63, 52, 36, 0.22);
}

.atlas-viewpoint-header .site-breadcrumb-row {
  margin-bottom: 1.3rem;
}

.atlas-viewpoint-header h1 {
  margin: 0;
  color: #24211c;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: 0;
}

.atlas-viewpoint-header p {
  max-width: 620px;
  margin: 0.7rem 0 0;
  color: #675f52;
  font-size: 0.9rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.atlas-command-table {
  overflow: hidden;
  border-top: 2px solid #2d2923;
  border-bottom: 1px solid rgba(63, 52, 36, 0.28);
}

.atlas-command-head,
.atlas-command-row {
  display: grid;
  grid-template-columns: 56px minmax(190px, 1.1fr) minmax(140px, 0.75fr) minmax(170px, 0.95fr) 90px 62px;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid rgba(63, 52, 36, 0.16);
}

.atlas-command-head {
  min-height: 36px;
  background: #e7e1d6;
  color: #6a6155;
  font: 800 0.65rem/1 var(--font-sans);
  text-transform: uppercase;
}

.atlas-command-head > span,
.atlas-command-row > span {
  min-width: 0;
  padding: 0.6rem 0.8rem;
}

.atlas-command-row:hover {
  background: rgba(255, 255, 255, 0.52);
}

.atlas-command-row.is-planned {
  color: #81796d;
}

.atlas-command-code {
  color: #9c2525;
  font: 900 0.72rem/1 var(--font-sans);
}

.atlas-command-name {
  display: grid;
  gap: 0.18rem;
}

.atlas-command-name strong {
  font: 800 0.88rem/1.2 var(--font-sans);
}

.atlas-command-name small,
.atlas-command-coverage,
.atlas-command-status {
  color: #6a6257;
  font: 600 0.7rem/1.35 var(--font-sans);
}

.atlas-command-focus a {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  color: #332f29;
  font: 700 0.7rem/1.25 var(--font-sans);
  text-decoration: none;
}

.atlas-command-focus a span {
  color: #9c2525;
  font-size: 0.58rem;
  font-weight: 900;
}

.atlas-command-focus a:hover,
.atlas-command-focus a:focus-visible {
  color: #9c2525;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.atlas-command-action a {
  color: #8e2925;
  font: 800 0.7rem/1 var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.atlas-command-sources {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1rem;
  padding: 1.35rem 0 0;
}

.atlas-command-sources h2 {
  margin: 0;
  color: #2f2b25;
  font: 800 0.76rem/1.2 var(--font-sans);
  letter-spacing: 0;
}

.atlas-command-sources p {
  margin: 0.35rem 0 0;
  color: #766d60;
  font: 600 0.66rem/1.4 var(--font-sans);
  letter-spacing: 0;
}

.atlas-command-sources ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(63, 52, 36, 0.22);
  list-style: none;
}

.atlas-command-sources li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.22rem 0.4rem;
  min-width: 0;
  padding: 0.58rem 0.7rem;
  border-right: 1px solid rgba(63, 52, 36, 0.14);
  border-bottom: 1px solid rgba(63, 52, 36, 0.14);
  font-family: var(--font-sans);
}

.atlas-command-sources li span {
  color: #322e28;
  font-size: 0.65rem;
  font-weight: 900;
}

.atlas-command-sources li strong {
  min-width: 0;
  overflow: hidden;
  color: #71685c;
  font-size: 0.57rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-command-sources li em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  color: #55705b;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.atlas-command-sources li em.is-draft {
  color: #9c5e25;
}

.atlas-a3-main {
  padding-bottom: 3rem;
}

.atlas-a3-map-stage {
  position: relative;
  min-height: min(660px, calc(100vh - 155px));
  overflow: hidden;
  border-top: 1px solid rgba(80, 68, 47, 0.24);
  border-bottom: 1px solid rgba(80, 68, 47, 0.24);
  background: #d7d4c8;
}

.atlas-a3-map-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 241, 232, 0.98) 0%, rgba(244, 241, 232, 0.72) 31%, rgba(244, 241, 232, 0.04) 64%);
}

.atlas-a3-map-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.atlas-a3-map-copy {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding-top: 8rem;
}

.atlas-a3-map-copy h1 {
  max-width: 440px;
  margin: 0;
  color: #23211d;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0;
}

.atlas-a3-map-copy p {
  max-width: 390px;
  margin: 1rem 0 1.3rem;
  color: #4e493f;
  font-size: 0.95rem;
  line-height: 1.6;
  letter-spacing: 0;
}

.atlas-a3-map-copy > a {
  background: #25231f;
}

.atlas-a3-scopes {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(63, 52, 36, 0.2);
}

.atlas-a3-scopes > strong {
  padding-top: 0.35rem;
  color: #5e564a;
  font: 800 0.67rem/1.3 var(--font-sans);
  text-transform: uppercase;
}

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

.atlas-a3-scopes a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.32rem 0.65rem;
  border-left: 1px solid rgba(63, 52, 36, 0.17);
  color: #332f29;
  font: 700 0.7rem/1.25 var(--font-sans);
  text-decoration: none;
}

.atlas-a3-scopes a span {
  color: #9c2525;
  font-size: 0.6rem;
  font-weight: 900;
}

.atlas-a3-scopes a:hover,
.atlas-a3-scopes a:focus-visible {
  color: #9c2525;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.atlas-a3-connected {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1rem;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.2rem 0 0;
}

.atlas-a3-connected > strong {
  padding-top: 0.35rem;
  color: #5e564a;
  font: 800 0.67rem/1.3 var(--font-sans);
  text-transform: uppercase;
}

.atlas-a3-connected > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(63, 52, 36, 0.22);
}

.atlas-a3-connected a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.18rem 0.55rem;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border-right: 1px solid rgba(63, 52, 36, 0.17);
  color: #332f29;
  font-family: var(--font-sans);
  text-decoration: none;
}

.atlas-a3-connected a > span {
  grid-row: 1 / span 2;
  color: #9c2525;
  font-size: 0.62rem;
  font-weight: 900;
}

.atlas-a3-connected a > strong,
.atlas-a3-connected a > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-a3-connected a > strong {
  font-size: 0.68rem;
}

.atlas-a3-connected a > small {
  color: #756c60;
  font-size: 0.58rem;
  font-weight: 600;
}

.atlas-a3-connected a:hover strong,
.atlas-a3-connected a:focus-visible strong {
  color: #9c2525;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 980px) {
  .atlas-home-mode-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 156px;
  }

  .atlas-home-image-link {
    bottom: 168px;
  }

  .atlas-home-mzp-highlighter {
    top: auto;
    right: 1rem;
    bottom: 168px;
    width: min(320px, calc(100% - 2rem));
  }

  .atlas-home-hero-copy {
    padding-bottom: 11.5rem;
  }

  .atlas-home-mode:nth-child(3) {
    border-right: 0;
  }

  .atlas-home-mode:nth-child(-n + 3) {
    border-bottom: 1px solid rgba(239, 221, 157, 0.2);
  }

  .atlas-command-head,
  .atlas-command-row {
    grid-template-columns: 50px minmax(180px, 1.05fr) minmax(125px, 0.7fr) minmax(150px, 0.9fr) 78px 58px;
  }

  .atlas-command-sources ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .atlas-a3-connected > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .atlas-home-hero {
    min-height: 700px;
    background-position: 58% center;
  }

  .atlas-home-hero::before {
    background: linear-gradient(90deg, rgba(14, 18, 17, 0.86), rgba(14, 18, 17, 0.28)), linear-gradient(0deg, rgba(12, 16, 14, 0.96) 0%, transparent 62%);
  }

  .atlas-home-hero-copy {
    align-self: flex-start;
    margin: 0 1rem;
    padding-top: 4.2rem;
    padding-bottom: 17.5rem;
  }

  .atlas-home-hero-copy h1 {
    font-size: 3.25rem;
  }

  .atlas-home-mode-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 246px;
  }

  .atlas-home-image-link {
    right: 0.75rem;
    bottom: 258px;
    left: 0.75rem;
  }

  .atlas-home-mzp-highlighter {
    top: auto;
    right: 0.75rem;
    bottom: 258px;
    left: auto;
    width: min(320px, calc(100% - 1.5rem));
  }

  .atlas-home-mode:nth-child(3) {
    border-right: 1px solid rgba(239, 221, 157, 0.2);
  }

  .atlas-home-mode:nth-child(2n) {
    border-right: 0;
  }

  .atlas-home-mode:nth-child(-n + 4) {
    border-bottom: 1px solid rgba(239, 221, 157, 0.2);
  }

  .atlas-home-intro-band {
    align-items: start;
    padding-top: 1.5rem;
  }

  .atlas-command-head {
    display: none;
  }

  .atlas-command-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "code name action"
      "code coverage status"
      "code focus focus";
    min-height: 108px;
    padding: 0.4rem 0;
  }

  .atlas-command-code { grid-area: code; }
  .atlas-command-name { grid-area: name; }
  .atlas-command-coverage { grid-area: coverage; }
  .atlas-command-focus { grid-area: focus; }
  .atlas-command-status { grid-area: status; }
  .atlas-command-action { grid-area: action; }

  .atlas-command-row > span {
    padding: 0.28rem 0.45rem;
  }

  .atlas-command-sources {
    grid-template-columns: 1fr;
  }

  .atlas-command-sources ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atlas-a3-map-stage {
    min-height: 620px;
  }

  .atlas-a3-map-stage::after {
    background: linear-gradient(180deg, rgba(244, 241, 232, 0.98) 0%, rgba(244, 241, 232, 0.78) 40%, rgba(244, 241, 232, 0.04) 74%);
  }

  .atlas-a3-map-image {
    object-position: 62% center;
  }

  .atlas-a3-map-copy {
    padding-top: 4rem;
  }

  .atlas-a3-map-copy h1 {
    max-width: 320px;
    font-size: 2.55rem;
  }

  .atlas-a3-scopes {
    grid-template-columns: 1fr;
  }

  .atlas-a3-connected {
    grid-template-columns: 1fr;
  }

  .atlas-a3-scopes > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .atlas-viewpoint-tabs {
    width: calc(100% - 1rem);
  }

  .atlas-viewpoint-tab {
    gap: 0.25rem;
    padding: 0.35rem 0.3rem;
  }

  .atlas-viewpoint-tab strong {
    font-size: 0.7rem;
  }

  .atlas-home-mode {
    gap: 0.42rem;
    padding: 0.68rem 0.62rem;
  }

  .atlas-home-mode-copy strong {
    font-size: 1.02rem;
  }

  .atlas-home-mode-copy small {
    font-size: 0.58rem;
  }

  .atlas-viewpoint-header h1 {
    font-size: 2rem;
  }

  .atlas-a3-scopes > div {
    grid-template-columns: 1fr;
  }

  .atlas-a3-scopes a {
    min-height: 34px;
  }

  .atlas-command-sources ul,
  .atlas-a3-connected > div {
    grid-template-columns: 1fr;
  }
}

/* Atlas Sim3D */
.atlas-sim-page .site-page-shell {
  background: #f2f0ea;
}

.atlas-sim-main {
  color: #1c211e;
}

.atlas-sim-head {
  padding-top: 1.2rem;
  padding-bottom: 1rem;
}

.atlas-sim-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  align-items: end;
  gap: 2rem;
  margin-top: 0.65rem;
}

.atlas-sim-heading > div > span {
  color: #82651e;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.atlas-sim-heading h1 {
  margin: 0.22rem 0 0.3rem;
  font-size: clamp(2rem, 3rem, 3rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.atlas-sim-heading p {
  max-width: 720px;
  margin: 0;
  color: #52605a;
  font-size: 0.95rem;
  line-height: 1.55;
}

.atlas-sim-target-picker {
  display: grid;
  gap: 0.35rem;
}

.atlas-sim-target-picker[hidden],
.atlas-sim-stage[hidden],
.atlas-sim-catalog[hidden] {
  display: none;
}

.atlas-sim-target-picker > span {
  color: #66716c;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.atlas-sim-target-picker select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #a99a72;
  border-radius: 4px;
  background: #fff;
  color: #202722;
  padding: 0.5rem 2.2rem 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
}

.atlas-sim-stage {
  --atlas-sim-preview: none;
  position: relative;
  width: 100%;
  height: min(82svh, 920px);
  min-height: 680px;
  overflow: hidden;
  background: #07100c;
  border-top: 1px solid #8c743b;
  border-bottom: 1px solid #8c743b;
}

.atlas-sim-catalog {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
}

.atlas-sim-catalog-label {
  margin: 0 0 0.6rem;
  color: #756a59;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.atlas-sim-experience-card {
  position: relative;
  display: block;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid #9a8450;
  border-radius: 5px;
  background: #07100c;
  color: #fff;
  text-decoration: none;
}

.atlas-sim-experience-card > img,
.atlas-sim-experience-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atlas-sim-experience-card > img {
  object-fit: cover;
  transition: transform 400ms ease;
}

.atlas-sim-experience-shade {
  background: linear-gradient(90deg, rgba(4, 12, 8, 0.92), rgba(4, 12, 8, 0.38) 55%, rgba(4, 12, 8, 0.08));
}

.atlas-sim-experience-copy {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(1.5rem, 5vw, 4rem);
  display: grid;
  max-width: 580px;
  gap: 0.45rem;
}

.atlas-sim-experience-copy small {
  justify-self: start;
  border: 1px solid rgba(220, 190, 111, 0.72);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  color: #e4c76f;
  font-size: 0.68rem;
  font-weight: 800;
}

.atlas-sim-experience-copy strong {
  font-family: "STSong", "SimSun", serif;
  font-size: 3.5rem;
  line-height: 1;
}

.atlas-sim-experience-copy > span {
  color: #d9ddd8;
  font-size: 0.95rem;
  line-height: 1.55;
}

.atlas-sim-experience-copy b {
  justify-self: start;
  margin-top: 0.55rem;
  border-bottom: 1px solid #e4c76f;
  color: #f1d77d;
  padding-bottom: 0.2rem;
  font-size: 0.78rem;
}

.atlas-sim-experience-copy i {
  margin-left: 0.4rem;
  font-style: normal;
}

.atlas-sim-experience-card:hover > img,
.atlas-sim-experience-card:focus-visible > img {
  transform: scale(1.018);
}

.atlas-sim-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(90deg, rgba(4, 12, 8, 0.94) 0%, rgba(4, 12, 8, 0.72) 40%, rgba(4, 12, 8, 0.08) 78%),
    var(--atlas-sim-preview);
  background-position: center;
  background-size: cover;
}

.atlas-sim-poster[hidden] {
  display: none;
}

.atlas-sim-poster-copy {
  width: min(680px, 62vw);
  padding: clamp(2rem, 5vw, 5rem);
  color: #f7f3e8;
}

.atlas-sim-poster-copy > span {
  display: inline-block;
  border: 1px solid rgba(220, 190, 111, 0.72);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  color: #e4c76f;
  font-size: 0.68rem;
  font-weight: 800;
}

.atlas-sim-poster-copy h2 {
  margin: 0.65rem 0 0.55rem;
  color: #fff;
  font-size: clamp(2.2rem, 4.6rem, 4.6rem);
  line-height: 1;
  letter-spacing: 0;
}

.atlas-sim-poster-copy p {
  max-width: 580px;
  margin: 0;
  color: #d9ddd8;
  font-size: 1rem;
  line-height: 1.6;
}

.atlas-sim-launch-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.atlas-sim-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 42px;
  border: 1px solid #d9bd65;
  border-radius: 4px;
  background: #f0d476;
  color: #182019;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.atlas-sim-launch > span {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.atlas-sim-launch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.atlas-sim-launch-row small {
  color: #aeb7b1;
  font-size: 0.68rem;
}

.atlas-sim-runtime,
.atlas-sim-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.atlas-sim-runtime {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.atlas-sim-frame {
  display: block;
  background: #07100c;
}

.atlas-sim-loading,
.atlas-sim-error {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: #07100c;
  color: #e8e2d2;
}

.atlas-sim-loading[hidden],
.atlas-sim-error[hidden] {
  display: none;
}

.atlas-sim-loading > span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(225, 198, 118, 0.24);
  border-top-color: #e1c676;
  border-radius: 50%;
  animation: atlas-sim-spin 0.9s linear infinite;
}

.atlas-sim-error {
  flex-direction: column;
}

.atlas-sim-error button {
  border: 1px solid #8f7a43;
  border-radius: 4px;
  background: transparent;
  color: #e5cc86;
  padding: 0.45rem 0.72rem;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

@keyframes atlas-sim-spin {
  to { transform: rotate(360deg); }
}

.atlas-sim-toolbar {
  position: absolute;
  z-index: 7;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  border: 1px solid rgba(206, 183, 117, 0.52);
  border-radius: 4px;
  background: rgba(7, 15, 11, 0.88);
  color: #e8e1ce;
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.atlas-sim-toolbar[hidden] {
  display: none;
}

.atlas-sim-status-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.atlas-sim-toolbar button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-left: 1px solid rgba(206, 183, 117, 0.4);
  background: rgba(7, 15, 11, 0.94);
  color: #eee5d0;
  cursor: pointer;
}

.atlas-sim-toolbar button:first-child {
  border-left: 0;
}

.atlas-sim-toolbar .atlas-sim-labels > span {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 16px;
  height: 16px;
}

.atlas-sim-toolbar .atlas-sim-labels > span::before {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  content: "";
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.atlas-sim-toolbar .atlas-sim-labels > span::after {
  position: absolute;
  top: 4px;
  right: 0;
  width: 6px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
  content: "";
}

.atlas-sim-toolbar .atlas-sim-labels.is-active {
  background: rgba(7, 15, 11, 0.94);
  color: #f0d57c;
}

.atlas-sim-toolbar .atlas-sim-tour-play > span,
.atlas-sim-toolbar .atlas-sim-tour-play > span::before,
.atlas-sim-toolbar .atlas-sim-tour-play > span::after {
  position: absolute;
  content: "";
}

.atlas-sim-toolbar .atlas-sim-tour-play > span {
  top: 10px;
  left: 12px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.atlas-sim-toolbar .atlas-sim-tour-play.is-playing {
  background: rgba(7, 15, 11, 0.94);
  color: #f0d57c;
}

.atlas-sim-toolbar .atlas-sim-tour-play.is-playing > span {
  top: 10px;
  left: 11px;
  width: 12px;
  height: 14px;
  border: 0;
}

.atlas-sim-toolbar .atlas-sim-tour-play.is-playing > span::before,
.atlas-sim-toolbar .atlas-sim-tour-play.is-playing > span::after {
  top: 0;
  width: 3px;
  height: 14px;
  background: currentColor;
}

.atlas-sim-toolbar .atlas-sim-tour-play.is-playing > span::before {
  left: 0;
}

.atlas-sim-toolbar .atlas-sim-tour-play.is-playing > span::after {
  right: 0;
}

.atlas-sim-toolbar .atlas-sim-fullscreen > span {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor 0 0) left top / 6px 2px no-repeat,
    linear-gradient(currentColor 0 0) left top / 2px 6px no-repeat,
    linear-gradient(currentColor 0 0) right top / 6px 2px no-repeat,
    linear-gradient(currentColor 0 0) right top / 2px 6px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 6px 2px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 2px 6px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 6px 2px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 2px 6px no-repeat;
}

.atlas-sim-search {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.atlas-sidebar-mode-children [data-sim-target].is-current,
.atlas-sidebar-mode-children [data-sim-overview].is-current {
  border-color: #9f7e2d;
  background: rgba(174, 137, 47, 0.12);
  color: #684f16;
}

.atlas-sim-service-medallion {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 900;
}

.atlas-gallery-service-medallion {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 0.82rem;
  line-height: 1;
}

.atlas-sim-stage:fullscreen {
  height: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .atlas-sim-head {
    padding-top: 0.85rem;
  }

  .atlas-sim-heading {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .atlas-sim-heading h1 {
    font-size: 2rem;
  }

  .atlas-sim-heading p {
    font-size: 0.82rem;
  }

  .atlas-sim-stage {
    height: 74svh;
    min-height: 560px;
  }

  .atlas-sim-experience-card {
    min-height: 420px;
  }

  .atlas-sim-experience-shade {
    background: linear-gradient(180deg, rgba(4, 12, 8, 0.08), rgba(4, 12, 8, 0.88) 72%);
  }

  .atlas-sim-experience-copy {
    right: 1.25rem;
    left: 1.25rem;
    bottom: 1.25rem;
  }

  .atlas-sim-experience-copy strong {
    font-size: 2.4rem;
  }

  .atlas-sim-poster {
    background-image:
      linear-gradient(180deg, rgba(4, 12, 8, 0.14) 0%, rgba(4, 12, 8, 0.92) 68%),
      var(--atlas-sim-preview);
  }

  .atlas-sim-poster-copy {
    width: 100%;
    padding: 1.25rem;
  }

  .atlas-sim-poster-copy h2 {
    font-size: 2.2rem;
  }

  .atlas-sim-poster-copy p {
    font-size: 0.82rem;
  }

  .atlas-sim-launch-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .atlas-sim-toolbar {
    top: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-sim-loading > span {
    animation-duration: 1.8s;
  }
}

/* AS Hero overhaul: landing and target modes are mutually exclusive,
   viewport-sized visual fields. Target navigation and controls live inside
   the Sim3D canvas, matching AM's full-canvas service composition. */
.atlas-sim-page .site-page-shell {
  overflow: clip;
}

.atlas-sim-main {
  position: relative;
  min-height: 0;
}

.atlas-sim-landing-hero[hidden] {
  display: none;
}

.atlas-sim-landing-hero {
  min-height: calc(100svh - 72px);
  background-position: center;
  background-size: cover;
}

.atlas-sim-landing-hero::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 10, 0.9), rgba(8, 13, 10, 0.26) 54%, rgba(8, 13, 10, 0.62)),
    linear-gradient(0deg, rgba(8, 12, 9, 0.98), transparent 52%, rgba(8, 12, 9, 0.2));
}

.atlas-sim-landing-hero-copy {
  width: min(650px, calc(100% - 2rem));
  margin-left: clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(5.5rem, 11vh, 9rem) + 100px) 0 5rem;
}

.atlas-sim-hero-tile {
  position: absolute;
  z-index: 4;
  bottom: clamp(7rem, 18vh, 9.5rem);
  left: clamp(2rem, 11vw, 12rem);
  display: block;
  width: min(300px, calc(100% - 3rem));
  aspect-ratio: 16 / 10;
  overflow: visible;
  border: 1px solid rgba(220, 190, 111, 0.72);
  border-radius: 7px;
  background: #07100c;
  color: #fff;
  text-decoration: none;
  transform: perspective(1100px) rotateX(3deg) rotateY(8deg);
  transform-origin: left center;
  box-shadow:
    0 30px 52px rgba(0, 0, 0, 0.5),
    13px 13px 0 rgba(191, 156, 73, 0.13);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.atlas-sim-hero-tile::before {
  position: absolute;
  z-index: -1;
  inset: 8px -9px -9px 8px;
  border: 1px solid rgba(217, 184, 101, 0.34);
  border-radius: inherit;
  background: rgba(5, 12, 9, 0.72);
  content: "";
}

.atlas-sim-hero-tile-media,
.atlas-sim-hero-tile-media > img,
.atlas-sim-hero-tile-media > span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.atlas-sim-hero-tile-media {
  overflow: hidden;
}

.atlas-sim-hero-tile-media > img {
  object-fit: cover;
  transition: transform 360ms ease;
}

.atlas-sim-hero-tile-media > span {
  background:
    linear-gradient(180deg, rgba(4, 12, 8, 0.08), rgba(4, 12, 8, 0.9) 78%),
    linear-gradient(90deg, rgba(4, 12, 8, 0.52), transparent 72%);
}

.atlas-sim-hero-tile-copy {
  position: absolute;
  z-index: 1;
  right: 1.2rem;
  bottom: 1.1rem;
  left: 1.2rem;
  display: grid;
  gap: 0.28rem;
  text-shadow: 0 2px 9px rgba(0, 0, 0, 0.72);
}

.atlas-sim-hero-tile-copy small {
  color: #e2c772;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.atlas-sim-hero-tile-copy small em {
  margin-left: 0.35rem;
  font-style: normal;
  opacity: 0.72;
}

.atlas-sim-hero-tile-copy strong {
  font-family: "STSong", "SimSun", serif;
  font-size: clamp(1.65rem, 2.4vw, 2.3rem);
  line-height: 1;
}

.atlas-sim-hero-tile-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(245, 243, 235, 0.82);
  font-size: 0.78rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.atlas-sim-hero-tile-copy b {
  justify-self: start;
  margin-top: 0.28rem;
  border-bottom: 1px solid rgba(228, 199, 111, 0.8);
  padding-bottom: 0.12rem;
  color: #f1d77d;
  font-size: 0.72rem;
}

.atlas-sim-hero-tile-copy i {
  margin-left: 0.35rem;
  font-style: normal;
}

.atlas-sim-hero-tile:hover,
.atlas-sim-hero-tile:focus-visible {
  transform: perspective(1100px) rotateX(1deg) rotateY(2deg) translateY(-7px) scale(1.01);
  box-shadow:
    0 38px 62px rgba(0, 0, 0, 0.56),
    8px 10px 0 rgba(210, 177, 92, 0.18);
}

.atlas-sim-hero-tile:hover .atlas-sim-hero-tile-media > img,
.atlas-sim-hero-tile:focus-visible .atlas-sim-hero-tile-media > img {
  transform: scale(1.035);
}

.atlas-sim-stage {
  width: 100%;
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);
  min-height: 560px;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.atlas-sim-canvas-nav {
  top: 22px;
  left: 22px;
  z-index: 10;
  max-width: calc(100% - 720px);
}

.atlas-sim-canvas-nav .site-section-pulldown-pill,
.atlas-sim-canvas-nav .site-breadcrumb-pill,
.atlas-sim-canvas-nav .site-breadcrumb-trigger {
  border-color: rgba(215, 177, 90, 0.72) !important;
  background: rgba(24, 13, 11, 0.9) !important;
  color: #f4e8c8 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.atlas-sim-toolbar .atlas-sim-control-select {
  position: relative;
  display: block;
  min-width: 0;
  border-left: 1px solid rgba(206, 183, 117, 0.4);
  background: transparent;
}

.atlas-sim-toolbar .atlas-sim-control-select[hidden],
.atlas-sim-toolbar .atlas-sim-tour-play[hidden] {
  display: none;
}

.atlas-sim-toolbar .atlas-sim-control-select:first-child {
  border-left: 0;
}

.atlas-sim-toolbar .atlas-sim-control-select > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.atlas-sim-toolbar .atlas-sim-control-select select {
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4e8c8;
  color-scheme: dark;
  padding: 0.34rem 1.8rem 0.34rem 0.68rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}

.atlas-sim-toolbar .atlas-sim-control-select option {
  background: #101a14;
  color: #f4e8c8;
  font-size: 0.72rem;
}

.atlas-sim-toolbar .atlas-sim-weather-picker select {
  width: 112px;
}

.atlas-sim-toolbar .atlas-sim-target-picker select {
  width: 194px;
}

.atlas-sim-stage .atlas-sim-toolbar {
  top: 18px;
  right: 18px;
  z-index: 10;
  max-width: calc(100% - 36px);
}

.atlas-sim-main.is-target-view > .atlas-sim-search {
  display: none;
}

@media (max-width: 760px) {
  .atlas-sim-landing-hero {
    min-height: 720px;
  }

  .atlas-sim-landing-hero-copy {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    padding: 14rem 0 13rem;
  }

  .atlas-sim-landing-hero-copy h1 {
    font-size: clamp(2.7rem, 15vw, 4.2rem);
  }

  .atlas-sim-hero-tile {
    right: auto;
    bottom: 1.5rem;
    left: 1rem;
    width: min(300px, calc(100% - 2rem));
    max-height: 270px;
    transform: perspective(900px) rotateX(2deg) rotateY(-3deg);
  }

  .atlas-sim-stage {
    height: calc(100vh - 76px);
    height: calc(100svh - 76px);
    min-height: 540px;
  }

  .atlas-sim-canvas-nav {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 116px);
  }

  .atlas-sim-stage .atlas-sim-toolbar {
    top: 58px;
    right: 12px;
    max-width: calc(100% - 24px);
    overflow-x: auto;
  }

  .atlas-sim-toolbar .atlas-sim-weather-picker select {
    width: 94px;
  }

  .atlas-sim-toolbar .atlas-sim-target-picker select {
    width: 150px;
  }

}

@media (max-width: 460px) {
  .atlas-sim-stage {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    min-height: 520px;
  }
}


/* Atlas Gallery */
.atlas-gallery-page {
  --ag-ink: #171714;
  --ag-paper: #f3f0e7;
  --ag-gold: #a98942;
  --ag-jade: #49685c;
  --ag-cinnabar: #9a453a;
  background: var(--ag-paper);
  color: var(--ag-ink);
}

.atlas-gallery-page .site-page-shell {
  overflow: clip;
}

.atlas-gallery-head {
  padding-top: 2rem;
  padding-bottom: 1.3rem;
}

.atlas-gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-top: 1.2rem;
}

.atlas-gallery-heading > div > span,
.atlas-gallery-section-label > span,
.atlas-gallery-browser-head > div > span {
  display: block;
  color: var(--ag-cinnabar);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.atlas-gallery-heading h1 {
  margin: 0.2rem 0 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: 0;
}

.atlas-gallery-heading p {
  max-width: 48rem;
  margin: 0;
  color: #4f504b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.6;
}

.atlas-gallery-style-switch {
  display: inline-grid;
  grid-template-columns: repeat(5, auto);
  align-items: center;
  overflow: hidden;
  border: 1px solid #aaa597;
  background: #e8e4da;
}

.atlas-gallery-style-switch a {
  min-width: 3rem;
  padding: 0.58rem 0.72rem;
  border-right: 1px solid #c5c0b3;
  color: #454640;
  font-size: 0.76rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.atlas-gallery-style-switch a:last-child {
  border-right: 0;
}

.atlas-gallery-style-switch a:hover,
.atlas-gallery-style-switch a[aria-current="true"] {
  background: var(--ag-ink);
  color: #fffdf6;
}

.atlas-gallery-feature {
  position: relative;
  width: 100%;
  height: min(56svh, 620px);
  min-height: 430px;
  overflow: hidden;
  background: #111;
}

.atlas-gallery-feature > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 180ms ease;
}

.atlas-gallery-feature::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 10, 8, 0.72) 0%, rgba(9, 10, 8, 0.22) 46%, rgba(9, 10, 8, 0.03) 72%);
  content: "";
  pointer-events: none;
}

.atlas-gallery-feature-copy {
  position: absolute;
  z-index: 1;
  left: max(2rem, calc((100% - 1180px) / 2));
  bottom: 2.8rem;
  width: min(34rem, calc(100% - 4rem));
  color: #fffdf5;
}

.atlas-gallery-feature-copy > span {
  display: inline-block;
  padding: 0.28rem 0.46rem;
  border-left: 3px solid #d8ba68;
  background: rgba(10, 12, 10, 0.68);
  color: #f1d78d;
  font-size: 0.72rem;
  font-weight: 800;
}

.atlas-gallery-feature-copy h2 {
  margin: 0.65rem 0 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

.atlas-gallery-feature-copy p {
  display: -webkit-box;
  max-width: 31rem;
  margin: 0 0 1rem;
  overflow: hidden;
  color: #efeee7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.94rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.atlas-gallery-feature-copy button {
  padding: 0.58rem 0.82rem;
  border: 1px solid rgba(240, 216, 151, 0.7);
  background: rgba(15, 17, 14, 0.72);
  color: #fff2c8;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
}

.atlas-gallery-feature-copy button:hover {
  background: #fff9e8;
  color: #1d1e1a;
}

.atlas-gallery-reel-band {
  border-bottom: 1px solid #d3cec1;
  background: #e9e5dc;
  padding: 1.05rem 0 1.2rem;
}

.atlas-gallery-reel-band .container {
  display: grid;
  grid-template-columns: minmax(11rem, 0.55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 1.4rem;
}

.atlas-gallery-section-label strong {
  display: block;
  margin-top: 0.3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 500;
}

.atlas-gallery-reel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.atlas-gallery-reel button {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 2px solid transparent;
  background: #23251f;
  cursor: pointer;
  padding: 0;
}

.atlas-gallery-reel button[aria-current="true"] {
  border-color: var(--ag-cinnabar);
}

.atlas-gallery-reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}

.atlas-gallery-reel button:hover img,
.atlas-gallery-reel button[aria-current="true"] img {
  opacity: 1;
}

.atlas-gallery-reel span {
  position: absolute;
  right: 0.35rem;
  bottom: 0.3rem;
  padding: 0.16rem 0.3rem;
  background: rgba(14, 15, 13, 0.78);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
}

.atlas-gallery-browser {
  padding-top: 3.3rem;
  padding-bottom: 3rem;
}

.atlas-gallery-browser-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.9fr);
  gap: 2rem;
  align-items: end;
}

.atlas-gallery-browser-head h2 {
  margin: 0.25rem 0 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0;
}

.atlas-gallery-browser-head p {
  margin: 0;
  color: #62635d;
}

.atlas-gallery-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.atlas-gallery-filters label {
  display: grid;
  gap: 0.3rem;
  color: #63645e;
  font-size: 0.7rem;
  font-weight: 750;
}

.atlas-gallery-filters input,
.atlas-gallery-filters select {
  width: 100%;
  min-height: 2.55rem;
  border: 1px solid #aaa597;
  border-radius: 0;
  background: #fffdf7;
  color: #22231f;
  font: inherit;
  font-size: 0.82rem;
  padding: 0 0.7rem;
}

.atlas-gallery-result-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.6rem;
  margin-top: 1.5rem;
  border-top: 1px solid #c9c4b7;
  color: #5e6059;
  font-size: 0.76rem;
}

.atlas-gallery-result-line > span {
  color: var(--ag-cinnabar);
  text-align: right;
}

.atlas-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.atlas-gallery-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #22231f;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

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

.atlas-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, opacity 220ms ease;
}

.atlas-gallery-card > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.6rem 0.72rem 0.65rem;
  background: linear-gradient(transparent, rgba(11, 12, 10, 0.9));
  color: #fffdf5;
}

.atlas-gallery-card strong,
.atlas-gallery-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-gallery-card strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  letter-spacing: 0;
}

.atlas-gallery-card small {
  margin-top: 0.18rem;
  color: #d9d7ce;
  font-size: 0.65rem;
}

.atlas-gallery-card:hover img,
.atlas-gallery-card:focus-visible img {
  transform: scale(1.025);
  opacity: 0.88;
}

.atlas-gallery-empty {
  padding: 3rem 0;
  color: #676860;
  text-align: center;
}

.atlas-gallery-detail {
  inset: 0;
  width: min(90vw, 1600px);
  max-width: none;
  max-height: 92svh;
  margin: auto;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #8b846f;
  border-radius: 2px;
  background: #10120f;
  color: #fffdf5;
  padding: 0;
}

.atlas-gallery-detail::backdrop {
  background: rgba(10, 11, 9, 0.86);
}

.atlas-gallery-detail figure {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(18rem, 0.72fr);
  margin: 0;
  max-height: 92svh;
  overflow: auto;
}

.atlas-gallery-detail-media {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: #080907;
}

.atlas-gallery-detail-media > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: calc(92svh - 7.2rem);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #080907;
}

.atlas-gallery-detail-watermark {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 0.95rem;
  color: rgba(255, 253, 243, 0.44);
  font: 800 0.68rem/1 var(--font-sans);
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
}

.atlas-gallery-detail-reel-shell {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr) 2.7rem;
  align-items: stretch;
  gap: 0.42rem;
  padding: 0.46rem;
  border-top: 1px solid rgba(213, 184, 105, 0.28);
  background: #0d100d;
}

.atlas-gallery-detail-reel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.42rem;
  min-width: 0;
}

.atlas-gallery-detail-reel button {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  background: #070806;
  color: #fff;
  cursor: pointer;
  opacity: 0.68;
}

.atlas-gallery-detail-reel button:hover,
.atlas-gallery-detail-reel button:focus-visible,
.atlas-gallery-detail-reel button[aria-current="true"] {
  border-color: #d5b869;
  opacity: 1;
}

.atlas-gallery-detail-reel button[aria-current="true"] {
  box-shadow: inset 0 0 0 1px #d5b869;
}

.atlas-gallery-detail-reel img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.atlas-gallery-detail-reel span {
  position: absolute;
  right: 0.18rem;
  bottom: 0.18rem;
  left: 0.18rem;
  padding: 0.12rem 0.22rem;
  overflow: hidden;
  background: rgba(7, 8, 6, 0.76);
  color: #f5e9bd;
  font-size: 0.55rem;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-gallery-detail figcaption {
  align-self: center;
  padding: 2.2rem 2rem;
}

.atlas-gallery-detail figcaption > span {
  color: #d5b869;
  font-size: 0.72rem;
  font-weight: 800;
}

.atlas-gallery-detail h2 {
  margin: 0.45rem 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
}

.atlas-gallery-detail p {
  color: #d6d5cc;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.6;
}

.atlas-gallery-detail-links {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

.atlas-gallery-detail-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.42rem 0.82rem;
  border: 1px solid rgba(238, 216, 131, 0.72);
  border-radius: 4px;
  background: rgba(21, 26, 22, 0.62);
  color: #fff1ba;
  font: 800 0.76rem/1.2 var(--font-sans);
  text-decoration: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
}

.atlas-gallery-detail-links .atlas-gallery-detail-action {
  justify-content: flex-start;
  min-width: 8.5rem;
}

.atlas-gallery-detail-links a svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #eed883;
  transition: color 0.2s ease;
}

.atlas-gallery-detail-links a:hover,
.atlas-gallery-detail-links a:focus-visible {
  background: #e4c463;
  color: #211d15;
  outline: none;
}

.atlas-gallery-detail-links a:hover svg,
.atlas-gallery-detail-links a:focus-visible svg {
  color: #211d15;
}

.atlas-gallery-detail-close,
.atlas-gallery-detail-step {
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(12, 14, 11, 0.78);
  color: #fff;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

.atlas-gallery-detail-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.25rem;
}

.atlas-gallery-detail-step {
  position: static;
  width: 100%;
  height: auto;
  min-height: 100%;
  font-size: 1.75rem;
}
.atlas-gallery-search { padding-bottom: 2rem; }

/* Atlas Matrix / entry redesign: shared with the current A.html and AG.html language. */
.atlas-matrix-index-page,
.atlas-book-page,
.atlas-element-page {
  background: #f3f0e9;
  color: #211f1b;
}

.atlas-matrix-index-main,
.atlas-book-main,
.atlas-entry-main {
  min-height: calc(100vh - 78px);
  overflow: clip;
}

.atlas-matrix-index-head,
.atlas-book-head,
.atlas-entry-head {
  padding-top: 2rem;
  padding-bottom: 2.2rem;
}

.atlas-matrix-index-heading,
.atlas-book-heading,
.atlas-entry-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
  margin-top: 1.35rem;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid rgba(63, 52, 36, 0.22);
}

.atlas-matrix-index-heading > div:first-child > span,
.atlas-book-heading-copy > span,
.atlas-entry-heading-copy > span,
.atlas-matrix-section-label > span,
.atlas-book-browser-head > div > span {
  display: block;
  color: #9c2525;
  font: 900 0.68rem/1.25 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atlas-matrix-index-heading h1,
.atlas-book-heading h1,
.atlas-entry-heading h1 {
  max-width: 780px;
  margin: 0.35rem 0 0;
  color: #211f1b;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.atlas-matrix-index-heading p,
.atlas-book-heading-copy p,
.atlas-entry-heading-copy p {
  max-width: 650px;
  margin: 0.9rem 0 0;
  color: #625a4e;
  font: 400 0.98rem/1.65 var(--font-classic);
}

.atlas-matrix-index-actions,
.atlas-book-actions,
.atlas-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.25rem;
}

.atlas-matrix-index-actions .atlas-map-service-button,
.atlas-book-actions .atlas-map-service-button,
.atlas-entry-actions .atlas-map-service-button {
  box-shadow: 0 8px 20px rgba(51, 43, 29, 0.12);
}

.atlas-book-emblem,
.atlas-entry-mark {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.4rem;
  min-width: 116px;
  min-height: 116px;
  padding: 0.85rem;
  border: 1px solid #b99544;
  background: #25231f;
  color: #f4dc87;
  box-shadow: 0 14px 28px rgba(43, 36, 24, 0.15);
}

.atlas-book-emblem strong,
.atlas-entry-mark strong {
  font: 900 0.72rem/1 var(--font-sans);
  letter-spacing: 0.08em;
}

.atlas-matrix-index-browser,
.atlas-book-browser {
  padding-bottom: 2.8rem;
}

.atlas-matrix-section-label,
.atlas-book-browser-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0 0.75rem;
  border-bottom: 2px solid #2d2923;
}

.atlas-matrix-section-label strong,
.atlas-book-browser-head > strong {
  color: #6a6155;
  font: 700 0.68rem/1 var(--font-sans);
  text-transform: uppercase;
}

.atlas-matrix-scope-grid,
.atlas-book-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid rgba(63, 52, 36, 0.16);
}

.atlas-matrix-scope-card,
.atlas-book-entry-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "code code arrow"
    "icon copy arrow";
  gap: 0.8rem;
  min-width: 0;
  min-height: 178px;
  padding: 1.15rem 1rem 1.1rem;
  border-right: 1px solid rgba(63, 52, 36, 0.16);
  border-bottom: 1px solid rgba(63, 52, 36, 0.16);
  color: #302c25;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.atlas-matrix-scope-card {
  grid-template-areas:
    "head head arrow"
    "icon copy arrow";
}

.atlas-matrix-scope-card:hover,
.atlas-matrix-scope-card:focus-visible,
.atlas-book-entry-card:hover,
.atlas-book-entry-card:focus-visible {
  z-index: 1;
  background: #fffaf0;
  box-shadow: 0 12px 24px rgba(55, 44, 28, 0.12);
  outline: none;
  transform: translateY(-2px);
}

.atlas-matrix-scope-code,
.atlas-book-entry-code {
  grid-area: code;
  color: #9c2525;
  font: 900 0.68rem/1 var(--font-sans);
  letter-spacing: 0.05em;
}

.atlas-matrix-scope-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
}

.atlas-matrix-scope-head strong {
  overflow: hidden;
  color: #25221d;
  font: 800 1rem/1.15 var(--font-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-matrix-scope-icon,
.atlas-book-entry-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(156, 37, 37, 0.45);
  border-radius: 8px;
  background: #302b25;
  color: #eed883;
  font-size: 2.2rem;
}

.atlas-matrix-scope-icon img,
.atlas-book-entry-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.atlas-matrix-scope-copy,
.atlas-book-entry-copy {
  grid-area: copy;
  display: grid;
  align-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.atlas-matrix-scope-copy small {
  -webkit-line-clamp: 4;
}

.atlas-matrix-scope-copy strong,
.atlas-book-entry-copy strong {
  color: #25221d;
  font: 800 1rem/1.15 var(--font-serif);
}

.atlas-matrix-scope-copy small,
.atlas-book-entry-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: #6f6659;
  font: 400 0.72rem/1.45 var(--font-classic);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.atlas-matrix-scope-arrow,
.atlas-book-entry-arrow {
  grid-area: arrow;
  align-self: end;
  color: #9c2525;
  font: 700 1.2rem/1 var(--font-sans);
}

.atlas-matrix-index-search,
.atlas-book-search,
.atlas-entry-search {
  padding-bottom: 2.5rem;
}

.atlas-matrix-featured {
  display: grid;
  grid-template-columns: minmax(150px, 0.92fr) minmax(0, 1.08fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b99544;
  background: #25231f;
  color: #fffaf0;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(43, 36, 24, 0.14);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.atlas-matrix-featured:hover,
.atlas-matrix-featured:focus-visible {
  color: #fffaf0;
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(43, 36, 24, 0.2);
}

.atlas-matrix-featured-media {
  min-height: 250px;
  background: #3a352c;
}

.atlas-matrix-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 220ms ease, opacity 220ms ease;
}

.atlas-matrix-featured:hover .atlas-matrix-featured-media img,
.atlas-matrix-featured:focus-visible .atlas-matrix-featured-media img {
  opacity: 1;
  transform: scale(1.025);
}

.atlas-matrix-featured-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.35rem 1.25rem;
}

.atlas-matrix-featured-copy > span:first-child {
  color: #eed883;
  font: 800 0.64rem/1.3 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atlas-matrix-featured-copy h2 {
  margin: 0.5rem 0 0;
  color: #fffaf0;
  font: 800 clamp(1.25rem, 2.4vw, 1.8rem)/1.08 var(--font-serif);
}

.atlas-matrix-featured-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0.7rem 0 0;
  color: rgba(255, 250, 240, 0.78);
  font: 400 0.78rem/1.55 var(--font-classic);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.atlas-matrix-featured-action {
  margin-top: 1rem;
  color: #eed883;
  font: 800 0.7rem/1 var(--font-sans);
}

.atlas-matrix-featured-action b {
  margin-left: 0.35rem;
  font-size: 1rem;
}

.atlas-book-emblem > span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
}

.atlas-book-emblem > span img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.atlas-book-browser-head h2 {
  margin: 0.25rem 0 0;
  color: #2a2721;
  font: 700 1.45rem/1.1 var(--font-serif);
}

.atlas-book-entry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.atlas-book-entry-card {
  min-height: 160px;
  padding: 0.95rem 0.85rem;
}

.atlas-book-entry-icon {
  width: 48px;
  height: 48px;
}

.atlas-book-entry-copy strong {
  font-size: 0.92rem;
}

.atlas-book-entry-copy small {
  font-size: 0.68rem;
}

.atlas-entry-head {
  padding-bottom: 1.4rem;
}

.atlas-entry-heading {
  align-items: center;
}

.atlas-entry-heading h1 {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
}

.atlas-entry-mark {
  min-width: 132px;
  min-height: 132px;
}

.atlas-entry-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
}

.atlas-entry-icon .atlas-icon-frame {
  display: grid;
  place-items: center;
  width: 76px !important;
  height: 76px !important;
  padding: 0.25rem;
  border-radius: 10px;
  background: #8d2927;
  box-shadow: none;
}

.atlas-entry-icon .atlas-icon-frame img {
  width: 62px;
  height: 62px;
}

.atlas-entry-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: 1rem;
}

.atlas-entry-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
}

.atlas-entry-location-rows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  width: max-content;
  max-width: 100%;
}

.atlas-entry-location-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.atlas-entry-location-row-t2 {
  order: 1;
}

.atlas-entry-location-row-t1 {
  order: 2;
}

.atlas-entry-filters > .atlas-ae-header-pill-item {
  margin-right: 0.15rem;
}

.atlas-entry-filters .atlas-ae-header-pill {
  height: 32px;
  box-sizing: border-box;
  padding: 3px 14px;
  border-color: rgba(244, 218, 139, 0.68) !important;
  background: rgba(7, 17, 12, 0.76) !important;
  color: #fffdf5 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 3px 12px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(5px);
  font: 700 0.82rem/1.4 var(--font-sans);
}

.atlas-entry-filters .atlas-ae-header-pill-label,
.atlas-entry-filters .atlas-ae-header-pill-ar-link {
  border-radius: 16px 0 0 16px;
  text-decoration: none;
}

.atlas-entry-filters .atlas-ae-header-pill-toggle {
  min-width: 38px;
  border-left: 1px solid rgba(244, 218, 139, 0.38) !important;
  border-radius: 0 16px 16px 0;
  padding: 3px 10px;
}

.atlas-entry-filters .atlas-ae-header-pill-label:only-child,
.atlas-entry-filters .atlas-ae-header-pill-ar-link:only-child {
  border-radius: 16px;
}

.atlas-entry-filters .atlas-ae-header-pill-label:hover,
.atlas-entry-filters .atlas-ae-header-pill-ar-link:hover,
.atlas-entry-filters .atlas-ae-header-pill-toggle:hover,
.atlas-entry-filters .atlas-ae-header-pill-toggle:focus-visible {
  border-color: #eed883 !important;
  background: rgba(47, 31, 17, 0.88) !important;
  color: #fffdf5 !important;
}

/* AE detail Heroes use a quieter one-step-down filter pill scale. */
.atlas-element-page .atlas-entry-filters .atlas-ae-header-pill {
  height: 28px;
  padding: 2px 11px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.atlas-element-page .atlas-entry-filters .atlas-ae-header-pill-toggle {
  min-width: 32px;
  padding: 2px 8px;
}

.atlas-entry-feature {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 6vw, 6rem);
  border-top: 2px solid #9c2525;
  background:
    linear-gradient(rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 221, 157, 0.055) 1px, transparent 1px),
    rgba(12, 16, 14, 0.88);
  background-size: 52px 52px, 52px 52px, auto;
  color: #fffbea;
}

.atlas-entry-feature .atlas-ae-figure {
  width: min(100%, 1280px);
  margin: 0;
  border: 1px solid rgba(239, 221, 157, 0.2);
  background: rgba(12, 16, 14, 0.72);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.atlas-entry-feature .atlas-ae-image {
  aspect-ratio: 16 / 8.6;
}

.atlas-entry-caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  width: min(100%, 900px);
  margin: 0.85rem auto 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(239, 221, 157, 0.2);
}

.atlas-entry-caption > span {
  color: #9c2525;
  font: 900 0.68rem/1.35 var(--font-sans);
}

.atlas-entry-caption p {
  margin: 0;
  color: rgba(255, 251, 234, 0.68);
  font: 400 0.82rem/1.55 var(--font-classic);
}

@media (max-width: 900px) {
  .atlas-matrix-scope-grid,
  .atlas-book-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .atlas-matrix-index-head,
  .atlas-book-head,
  .atlas-entry-head {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;
  }

  .atlas-matrix-index-heading,
  .atlas-book-heading,
  .atlas-entry-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  .atlas-matrix-index-heading h1,
  .atlas-book-heading h1,
  .atlas-entry-heading h1 {
    font-size: 3rem;
  }

  .atlas-book-emblem,
  .atlas-entry-mark {
    justify-self: start;
    min-width: 92px;
    min-height: 92px;
  }

  .atlas-book-emblem > span {
    width: 52px;
    height: 52px;
  }

  .atlas-entry-mark {
    grid-template-columns: auto auto;
    justify-items: start;
    min-width: 0;
    min-height: 0;
  }

  .atlas-entry-icon,
  .atlas-entry-icon .atlas-icon-frame {
    width: 56px !important;
    height: 56px !important;
  }

  .atlas-entry-icon .atlas-icon-frame img {
    width: 44px;
    height: 44px;
  }

  .atlas-matrix-scope-grid,
  .atlas-book-entry-grid {
    grid-template-columns: 1fr;
  }

  .atlas-matrix-scope-card {
    min-height: 146px;
  }

  .atlas-matrix-featured {
    grid-template-columns: 1fr;
  }

  .atlas-matrix-featured-media,
  .atlas-matrix-featured-media img {
    min-height: 180px;
  }

  .atlas-book-entry-card {
    min-height: 132px;
  }

  .atlas-book-browser-head {
    align-items: start;
    flex-direction: column;
  }

  .atlas-entry-feature .atlas-ae-image {
    aspect-ratio: 4 / 3;
  }

  .atlas-entry-caption {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (max-width: 920px) {
  .atlas-gallery-heading,
  .atlas-gallery-browser-head {
    grid-template-columns: 1fr;
  }

  .atlas-gallery-style-switch {
    justify-self: start;
  }

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

  .atlas-gallery-detail figure {
    grid-template-columns: 1fr;
  }

  .atlas-gallery-detail-media > img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .atlas-gallery-detail figcaption {
    padding: 1.4rem;
  }
}

@media (max-width: 640px) {
  .atlas-gallery-head {
    padding-top: 1rem;
  }

  .atlas-gallery-heading {
    gap: 1rem;
  }

  .atlas-gallery-heading h1 {
    font-size: 2.25rem;
  }

  .atlas-gallery-style-switch {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .atlas-gallery-style-switch a {
    min-width: 0;
    padding: 0.55rem 0.2rem;
    font-size: 0.68rem;
  }

  .atlas-gallery-feature {
    height: 42svh;
    min-height: 330px;
  }

  .atlas-gallery-feature::after {
    background: linear-gradient(0deg, rgba(9, 10, 8, 0.8), rgba(9, 10, 8, 0.03) 72%);
  }

  .atlas-gallery-feature-copy {
    right: 1rem;
    bottom: 1.2rem;
    left: 1rem;
    width: auto;
  }

  .atlas-gallery-feature-copy h2 {
    font-size: 1.65rem;
  }

  .atlas-gallery-feature-copy p {
    -webkit-line-clamp: 2;
  }

  .atlas-gallery-reel-band .container {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .atlas-gallery-reel {
    gap: 0.35rem;
  }

  .atlas-gallery-reel button {
    aspect-ratio: 1;
  }

  .atlas-gallery-browser {
    padding-top: 2.2rem;
  }

  .atlas-gallery-filters {
    grid-template-columns: 1fr;
  }

  .atlas-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .atlas-gallery-card {
    aspect-ratio: 1;
  }

  .atlas-gallery-card > span {
    padding: 1.4rem 0.5rem 0.48rem;
  }

  .atlas-gallery-detail {
    width: calc(100vw - 0.75rem);
    max-height: calc(100svh - 0.75rem);
  }

  .atlas-gallery-detail figure {
    max-height: calc(100svh - 0.75rem);
  }

  .atlas-gallery-detail-media > img {
    aspect-ratio: 4 / 3;
  }

  .atlas-gallery-detail h2 {
    padding-right: 1.8rem;
    font-size: 1.35rem;
  }

  .atlas-gallery-detail-step {
    min-height: 3rem;
  }

  .atlas-gallery-detail-reel-shell {
    grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem;
  }

  .atlas-gallery-detail-reel {
    display: flex;
    overflow-x: auto;
  }

  .atlas-gallery-detail-reel button {
    flex: 0 0 42%;
  }
}

/* AA heroes inherit the shared Atlas detail treatment used by AB and AE. */
.atlas-aa-attractions-hero,
.atlas-aa-detail-hero {
  min-height: min(760px, calc(100svh - 78px));
  background-position: center;
  background-size: cover;
}

.atlas-aa-attractions-hero .atlas-detail-hero-nav,
.atlas-aa-detail-hero .atlas-detail-hero-nav {
  top: 1.35rem;
  left: clamp(1rem, 5vw, 5.5rem);
}

.atlas-aa-attractions-hero .atlas-detail-hero-copy,
.atlas-aa-detail-hero .atlas-detail-hero-copy {
  width: min(720px, 52vw);
  margin-left: clamp(1rem, 10vw, 11rem);
}

.atlas-aa-attractions-hero .atlas-detail-hero-feature {
  right: clamp(1rem, 8vw, 9rem);
  bottom: 15%;
}

.atlas-aa-detail-hero .atlas-detail-hero-copy > p {
  font-family: var(--font-classic) !important;
}

@media (max-width: 760px) {
  .atlas-aa-attractions-hero,
  .atlas-aa-detail-hero {
    min-height: 700px;
  }

  .atlas-aa-attractions-hero .atlas-detail-hero-nav,
  .atlas-aa-detail-hero .atlas-detail-hero-nav {
    top: 1rem;
    left: 1.2rem;
  }

  .atlas-aa-attractions-hero .atlas-detail-hero-copy,
  .atlas-aa-detail-hero .atlas-detail-hero-copy {
    width: auto;
    margin: 0;
    padding: 9rem 1.2rem 12rem;
  }
}

/* AR T1 directory follows the AA image-first card language while retaining every region detail page. */
.atlas-ar-t1-toolbar {
  grid-template-columns: minmax(16rem, 28rem);
}

.atlas-ar-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.atlas-ar-tile {
  min-width: 0;
}

.atlas-ar-detail-tile-grid {
  margin-top: 0;
}

@media (max-width: 1040px) {
  .atlas-ar-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .atlas-ar-tile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .atlas-ar-landing-hero {
    min-height: 720px;
  }

  .atlas-ar-landing-hero-copy {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    padding: 14rem 0 8rem;
  }

  .atlas-ar-landing-hero-copy h1 {
    font-size: clamp(2.7rem, 15vw, 4.2rem);
  }

  .atlas-ar-hero-feature-wrapper {
    top: 5.2rem;
    right: 1rem;
    left: 1rem;
  }

  .atlas-ar-hero-feature {
    width: 100%;
  }

  .atlas-matrix-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .atlas-matrix-filter label {
    min-width: 0;
  }

  .atlas-ar-hero-routes {
    position: static;
  }

  .atlas-ar-hero-routes .atlas-aa-route-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atlas-ar-detail-hero .atlas-detail-hero-copy {
    align-self: start;
    padding-bottom: 3rem;
  }
}

@media (max-width: 460px) {
  .atlas-ar-hero-routes .atlas-aa-route-rail {
    grid-template-columns: 1fr;
  }
}

/* AE detail controls: keep location/type metadata with the Hero copy and
   reserve the shared compact A-domain rail for Map/Gallery services. */
.atlas-element-page .atlas-detail-hero {
  grid-template-rows: minmax(0, 1fr) auto;
}

.atlas-element-page .atlas-detail-hero-copy {
  grid-row: 1;
}

.atlas-element-page .atlas-detail-hero .atlas-entry-hero-metadata {
  position: static !important;
  inset: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: auto;
  max-width: 100%;
  margin-top: 1rem;
}

.atlas-element-page .atlas-detail-hero .atlas-entry-hero-metadata .atlas-entry-location-rows,
.atlas-element-page .atlas-detail-hero .atlas-entry-hero-metadata .atlas-entry-type-row {
  flex-wrap: wrap;
}

.atlas-element-page .atlas-ae-detail-rail {
  position: static;
  grid-row: 2;
  align-self: stretch;
  width: 100%;
  z-index: 3;
}

.atlas-element-page .atlas-ae-detail-rail .atlas-aa-route-rail {
  position: static !important;
  inset: auto !important;
  width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

@media (max-width: 460px) {
  .atlas-element-page .atlas-ae-detail-rail .atlas-aa-route-rail {
    grid-template-columns: 1fr;
  }
}

/* AT.html's compact cross-A item also carries the shared home-rail class for
   its visual language.  Keep the shared class from expanding it or applying
   its full rail backdrop to the AT Hero. */
.atlas-matrix-hero > .atlas-matrix-hero-copy {
  position: relative;
  z-index: 1;
}

.atlas-matrix-hero > .atlas-at-landing-rail {
  z-index: 3;
}

.atlas-matrix-hero > .atlas-matrix-cross-a-rail {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  grid-template-columns: none;
  width: auto;
  min-height: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid rgba(239, 221, 157, 0.24);
  background: rgba(12, 16, 14, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.atlas-matrix-hero > .atlas-matrix-cross-a-rail > .atlas-matrix-cross-a-mode {
  flex: 0 0 190px;
  width: 190px;
  min-height: 50px;
  height: 50px;
}

/* AM map hero overhaul: the map is the page-width visual field and its
   breadcrumb navigation lives inside the canvas rather than above it. */
.atlas-map-hero-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.atlas-map-hero-page > .section-header {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(1.2rem, 2.5vw, 2.2rem) 0 1rem;
}

.atlas-map-hero-page .atlas-map-shell.atlas-map-hero {
  width: 100%;
  margin: 0;
  transform: none;
}

.atlas-map-hero-page .atlas-map-tool {
  height: calc(100vh - 80px);
  height: calc(100svh - 80px);
  min-height: 560px;
  aspect-ratio: auto;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.atlas-map-hero-page .atlas-map-viewport {
  border-radius: 0;
}

.atlas-map-hero-nav {
  position: absolute;
  z-index: 40;
  top: 22px;
  left: 22px;
  max-width: calc(100% - 390px);
  pointer-events: auto;
}

.atlas-map-hero-nav .site-breadcrumb-row {
  margin: 0;
  align-items: center;
}

.atlas-map-hero-nav .site-section-pulldown-pill,
.atlas-map-hero-nav .site-breadcrumb-pill,
.atlas-map-hero-nav .site-breadcrumb-trigger {
  border-color: rgba(215, 177, 90, 0.72) !important;
  color: #f4e8c8 !important;
  background: rgba(24, 13, 11, 0.94) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.atlas-map-hero-nav .site-section-pulldown-pill:hover,
.atlas-map-hero-nav .site-section-pulldown-pill:focus-visible,
.atlas-map-hero-nav .site-breadcrumb-pill:hover,
.atlas-map-hero-nav .site-breadcrumb-pill:focus-visible,
.atlas-map-hero-nav .site-breadcrumb-trigger:hover,
.atlas-map-hero-nav .site-breadcrumb-trigger:focus-visible {
  border-color: rgba(240, 212, 131, 0.94) !important;
  color: #fff4c6 !important;
  background: rgba(68, 48, 41, 0.98) !important;
}

.atlas-map-hero-nav .site-breadcrumb-separator,
.atlas-map-hero-nav .site-section-pulldown-separator {
  color: rgba(240, 212, 131, 0.72);
}

.atlas-map-hero-nav .site-breadcrumb-dropdown {
  width: max-content;
  min-width: 184px;
  max-width: min(280px, calc(100vw - 2rem));
  border-color: rgba(178, 151, 86, 0.72);
  background: #f0efe9;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.atlas-map-hero-nav .site-breadcrumb-dropdown-item {
  gap: 6px;
  padding: 6px 11px;
  font-size: 0.82rem;
}

.atlas-map-hero-nav .site-breadcrumb-dropdown-item .dropdown-book-logo {
  width: 18px !important;
  height: 18px !important;
}

.atlas-map-hero-nav .site-breadcrumb-dropdown-item.is-disabled {
  opacity: 0.52;
  cursor: not-allowed;
  user-select: none;
}

.atlas-map-hero-nav .site-breadcrumb-dropdown-item.is-disabled:hover {
  color: #4a4a4a;
  background: transparent;
}

@media (max-width: 700px) {
  .atlas-map-hero-page > .section-header {
    width: calc(100% - 1.5rem);
    padding-top: 1rem;
    padding-bottom: 0.75rem;
  }

  .atlas-map-hero-page .atlas-map-tool {
    height: calc(100vh - 76px);
    height: calc(100svh - 76px);
    min-height: 540px;
  }

  .atlas-map-hero-nav {
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
  }

  .atlas-map-hero-nav .site-breadcrumb-row {
    align-items: flex-start;
  }

  .atlas-map-hero-nav .site-section-pulldown-pill,
  .atlas-map-hero-nav .site-breadcrumb-pill,
  .atlas-map-hero-nav .site-breadcrumb-trigger {
    font-size: 0.74rem !important;
  }
}

@media (max-width: 480px) {
  .atlas-map-hero-page .atlas-map-tool {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    min-height: 520px;
  }

  .atlas-map-hero-nav .site-breadcrumb-row {
    max-width: calc(100vw - 1.5rem);
  }

  .atlas-map-hero-nav .site-breadcrumb-separator,
  .atlas-map-hero-nav .site-section-pulldown-separator {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
}

/* AM canvas finish: center search over the hero and carry the Muzi matrix
   mesh into the area outside the China silhouette. */
.atlas-map-hero-page .atlas-map-control-strip {
  top: 0;
  right: 0;
  left: 0;
  display: block;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.atlas-map-hero-page .atlas-map-control-strip > .atlas-map-search {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(256px, calc(100% - 520px));
  min-width: 192px;
  transform: translateX(-50%);
  pointer-events: auto;
}

.atlas-map-hero-page .atlas-map-control-strip > .atlas-map-toolbar {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
  pointer-events: auto;
}

.atlas-map-hero-page .atlas-map-viewport,
.atlas-map-hero-page .atlas-map-host > svg {
  background-color: #020705 !important;
  background-image:
    linear-gradient(rgba(78, 255, 164, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65, 230, 255, 0.13) 1px, transparent 1px),
    radial-gradient(circle at 14% 12%, rgba(22, 255, 128, 0.16), transparent 34%),
    radial-gradient(circle at 84% 8%, rgba(0, 214, 255, 0.15), transparent 30%),
    radial-gradient(circle at 54% 78%, rgba(244, 201, 111, 0.12), transparent 38%),
    linear-gradient(135deg, #030806 0%, #07100e 48%, #010203 100%) !important;
  background-size: 38px 38px, 38px 38px, auto, auto, auto, auto !important;
}

.atlas-map-hero-page .atlas-map-host #export-background {
  fill: transparent !important;
}

@media (max-width: 700px) {
  .atlas-map-hero-page .atlas-map-control-strip > .atlas-map-search {
    top: 62px;
    width: min(224px, calc(100% - 24px));
    min-width: 0;
  }

  .atlas-map-hero-page .atlas-map-control-strip > .atlas-map-toolbar {
    top: 10px;
    right: 10px;
  }
}

/* AM taxonomy breadcrumb: expose the live AT-L1/AT-L2 path without making
   the centered search compete with a longer navigation row. */
.atlas-map-at-taxonomy[hidden] {
  display: none !important;
}

.atlas-map-at-taxonomy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.atlas-map-at-taxonomy-item {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
}

.atlas-map-at-taxonomy-separator {
  flex: 0 0 auto;
  margin: 0 0.45rem;
}

.atlas-map-hero-nav .atlas-map-at-taxonomy .site-breadcrumb-pill,
.atlas-map-hero-nav .atlas-map-at-taxonomy .site-breadcrumb-trigger,
.atlas-map-hero-nav .atlas-map-at-taxonomy .site-breadcrumb-pill.is-active,
.atlas-map-hero-nav [data-map-at-taxonomy] .site-breadcrumb-pill,
.atlas-map-hero-nav [data-map-at-taxonomy] .site-breadcrumb-trigger {
  border-color: rgba(215, 177, 90, 0.72) !important;
  color: #f4e8c8 !important;
  background: #180d0b !important;
  background-image: none !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26) !important;
}

.atlas-map-hero-nav .site-breadcrumb-dropdown-item.is-active {
  color: #2b1c09 !important;
  font-weight: 800;
  background: rgba(214, 173, 76, 0.36) !important;
  box-shadow: inset 3px 0 0 #b8791c;
}

.atlas-map-hero-page.has-at-taxonomy .atlas-map-control-strip > .atlas-map-search {
  left: auto;
  right: 260px;
  width: min(256px, calc(100% - 560px));
  transform: none;
}

@media (max-width: 700px) {
  .atlas-map-hero-page.has-at-taxonomy .atlas-map-control-strip > .atlas-map-search {
    top: 62px;
    right: auto;
    left: 50%;
    width: min(224px, calc(100% - 24px));
    transform: translateX(-50%);
  }
}

@media (min-width: 701px) {
  .atlas-map-hero-page .atlas-map-control-strip {
    top: 18px;
    right: 18px;
    left: auto;
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: max-content;
    max-width: calc(100% - 36px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }

  .atlas-map-hero-page .atlas-map-control-strip > .atlas-map-search {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 230px;
    flex: 0 0 230px;
    min-width: 0;
    transform: none;
  }

  .atlas-map-hero-page.has-at-taxonomy .atlas-map-control-strip > .atlas-map-search {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 230px;
    flex-basis: 230px;
    transform: none;
  }

  .atlas-map-hero-page .atlas-map-search-input {
    border: 1px solid rgba(205, 166, 85, 0.72);
    border-radius: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.52);
  }

  .atlas-map-hero-page .atlas-map-control-strip > .atlas-map-search {
    margin-right: 150px;
  }

  .atlas-map-hero-page .atlas-map-control-strip > .atlas-map-toolbar {
    position: relative;
    top: auto;
    right: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
  }
}

/* AG Gallery overhaul: MWF0023 Atlas hero, cascading taxonomy rail, and
   one-tile-per-four-style MZP set browser. */
.atlas-gallery-page .site-page-shell,
.atlas-gallery-main {
  overflow: visible;
}

.atlas-gallery-hero {
  min-height: calc(100svh - 72px);
  background-position: center;
  background-size: cover;
}

.atlas-gallery-hero::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 10, 0.9), rgba(8, 13, 10, 0.28) 54%, rgba(8, 13, 10, 0.62)),
    linear-gradient(0deg, rgba(8, 12, 9, 0.98), transparent 52%, rgba(8, 12, 9, 0.2));
}

.atlas-gallery-hero-copy {
  width: min(650px, calc(100% - 2rem));
  margin-left: clamp(2rem, 11vw, 12rem);
  padding: calc(clamp(5.5rem, 11vh, 9rem) + 100px) 0 9rem;
}

.atlas-gallery-hero-copy h1 {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
}

.atlas-gallery-hero-feature-wrapper {
  top: calc(1.35rem + 12px);
  right: clamp(1rem, 5vw, 5.5rem);
}

.atlas-gallery-hero-refresh {
  position: absolute;
  z-index: 2;
  top: 0.42rem;
  right: 0.42rem;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(238, 216, 131, 0.5);
  opacity: 0.65;
  cursor: pointer;
  font: 700 1rem/1 var(--font-sans);
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.atlas-gallery-hero-refresh:hover,
.atlas-gallery-hero-refresh:focus-visible {
  background: rgba(238, 216, 131, 0.15);
  color: #eed883;
  opacity: 1;
  transform: rotate(28deg);
}

.atlas-gallery-hero-refresh:disabled {
  opacity: 0.36;
  cursor: default;
}

.atlas-gallery-hero-feature {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  cursor: pointer;
  font: inherit;
}

.atlas-gallery-hero-feature small {
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  color: rgba(255, 253, 243, 0.76);
  font: 400 0.72rem/1.42 var(--font-sans);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.atlas-gallery-hero-style-switch {
  position: absolute;
  z-index: 13;
  right: clamp(1rem, 5vw, 5.5rem);
  bottom: calc(6.3rem + 100px);
}

.atlas-gallery-hero-style-switch .atlas-gallery-style-switch {
  grid-template-columns: repeat(4, minmax(4.4rem, auto));
  border: 1px solid rgba(238, 216, 131, 0.3);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 22, 18, 0.54), rgba(8, 12, 10, 0.72));
  box-shadow: inset 0 1px rgba(255, 248, 216, 0.08), 0 10px 24px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px) saturate(0.82);
}

.atlas-gallery-hero-style-switch .atlas-gallery-style-switch a {
  padding: 0.62rem 0.82rem;
  border-right-color: rgba(238, 216, 131, 0.2);
  background: transparent;
  color: rgba(255, 251, 232, 0.72);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.72);
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.atlas-gallery-hero-style-switch .atlas-gallery-style-switch a:hover,
.atlas-gallery-hero-style-switch .atlas-gallery-style-switch a[aria-current="true"] {
  background: linear-gradient(180deg, rgba(238, 216, 131, 0.17), rgba(238, 216, 131, 0.07));
  color: #fffbea;
  box-shadow: inset 0 -2px rgba(238, 216, 131, 0.82);
}

.atlas-gallery-filter-rail {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid rgba(240, 212, 131, 0.34);
  background: rgba(8, 15, 11, 0.94);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px);
}

.atlas-gallery-filter-unit {
  display: grid;
  min-width: 0;
  gap: 0.32rem;
  padding: 0.62rem 0.8rem 0.72rem;
  border-right: 1px solid rgba(240, 212, 131, 0.16);
  color: #f7f0dd;
}

.atlas-gallery-filter-unit:last-child {
  border-right: 0;
}

.atlas-gallery-filter-unit:focus-within {
  background: rgba(240, 212, 131, 0.08);
  box-shadow: inset 0 2px #d8ba68;
}

.atlas-gallery-filter-unit > span {
  color: rgba(240, 212, 131, 0.72);
  font: 800 calc(0.6rem + 6px)/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atlas-gallery-filter-unit > span b {
  margin-left: 0.32rem;
  color: rgba(247, 240, 221, 0.52);
  font: 650 0.72em/1 var(--font-sans);
  letter-spacing: 0;
}

.atlas-gallery-filter-unit select {
  width: 100%;
  min-width: 0;
  height: 1.8rem;
  padding: 0 1.25rem 0 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  background-color: transparent;
  color: #fffdf3;
  font: 750 0.8rem/1 var(--font-sans);
  text-overflow: ellipsis;
  cursor: pointer;
}

.atlas-gallery-filter-unit option {
  background: #f4f0e5;
  color: #1d211d;
}

.atlas-gallery-browser {
  padding-top: 1.1rem;
  padding-bottom: 3rem;
}

.atlas-gallery-browser-head {
  display: block;
}

.atlas-gallery-browser-head > div {
  max-width: 54rem;
}

.atlas-gallery-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-top: 0;
  padding: 0.9rem 0 0.65rem;
  border: 0;
}

.atlas-gallery-grid-toolbar > div,
.atlas-gallery-search-filter {
  display: grid;
  gap: 0.35rem;
}

.atlas-gallery-toolbar-label,
.atlas-gallery-search-filter > span {
  color: #63645e;
  font-size: 0.68rem;
  font-weight: 800;
}

.atlas-gallery-style-switch {
  grid-template-columns: repeat(4, minmax(4.4rem, auto));
}

.atlas-gallery-search-filter {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(15.4rem, 29.4vw);
  margin-right: auto;
}

.atlas-gallery-search-filter input {
  width: 100%;
  min-height: 2.45rem;
  padding: 0 2.55rem 0 0.75rem;
  border: 1px solid #aaa597;
  border-radius: 0;
  background: #fffdf7;
  color: #22231f;
  font: 0.82rem/1 var(--font-sans);
}

.atlas-gallery-search-icon {
  position: absolute;
  top: 50%;
  right: 0.88rem;
  width: 12px;
  height: 12px;
  border: 2px solid #71623c;
  border-radius: 50%;
  pointer-events: none;
  transform: translateY(-58%);
}

.atlas-gallery-search-icon::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  background: #71623c;
  content: "";
  transform: rotate(45deg);
  transform-origin: center;
}

.atlas-gallery-result-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.62rem;
  min-height: 2.6rem;
  margin-top: 0.9rem;
  border-top: 0;
  transform: translateY(-4px);
}

.atlas-gallery-result-line > strong {
  color: #3f413c;
  font-weight: 900;
  white-space: nowrap;
}

.atlas-gallery-page-status {
  color: var(--ag-cinnabar);
  white-space: nowrap;
}

.atlas-gallery-result-line .atlas-gallery-pagination {
  position: static;
  display: flex !important;
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  z-index: auto;
  justify-content: flex-end;
  margin-top: 0;
}

.atlas-gallery-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.72rem;
}

.atlas-gallery-card {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(75, 77, 69, 0.22);
  background: #171a16;
}

.atlas-gallery-card > .atlas-gallery-card-caption {
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem 0.72rem 0.68rem;
}

.atlas-gallery-card > .atlas-gallery-card-style,
.atlas-gallery-card > .atlas-gallery-card-id {
  position: absolute;
  top: 0.48rem;
  bottom: auto;
  z-index: 2;
  width: auto;
  max-width: calc(50% - 0.72rem);
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: rgba(55, 58, 54, 0.9);
  font: 800 0.58rem/1 var(--font-sans);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.82);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-gallery-card > .atlas-gallery-card-style {
  left: 0.48rem;
  right: auto;
}

.atlas-gallery-card > .atlas-gallery-card-id {
  left: auto;
  right: 0.48rem;
}

.atlas-gallery-card strong {
  font-size: 0.82rem;
}

.atlas-gallery-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
}

.atlas-gallery-pagination[hidden] {
  display: none !important;
}

.atlas-gallery-pagination button {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.45rem;
  border: 1px solid #aaa597;
  background: #ece8de;
  color: #353731;
  cursor: pointer;
  font: 800 0.76rem/1 var(--font-sans);
}

.atlas-gallery-pagination button:hover,
.atlas-gallery-pagination button[aria-current="page"] {
  border-color: var(--ag-gold);
  background: #171714;
  color: #fffdf6;
}

.atlas-gallery-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 1100px) {
  .atlas-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas-gallery-filter-rail {
    grid-template-columns: repeat(6, minmax(9rem, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 820px) {
  .atlas-gallery-hero {
    min-height: 720px;
  }

  .atlas-gallery-hero-copy {
    margin-left: 1.25rem;
    padding-top: calc(7.5rem + 100px);
  }

  .atlas-gallery-hero-feature-wrapper {
    top: 5rem;
    right: 1rem;
  }

  .atlas-gallery-hero-feature {
    width: min(250px, 44vw);
  }

  .atlas-gallery-hero-style-switch {
    right: 1rem;
  }

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

@media (max-width: 640px) {
  .atlas-gallery-hero {
    min-height: 680px;
  }

  .atlas-gallery-hero-copy {
    width: calc(100% - 2rem);
    margin-left: 1rem;
    padding: 14rem 0 8rem;
  }

  .atlas-gallery-hero-copy h1 {
    font-size: clamp(2.7rem, 15vw, 4.2rem);
  }

  .atlas-gallery-hero-feature-wrapper {
    top: 5.2rem;
    right: 1rem;
    left: 1rem;
  }

  .atlas-gallery-hero-feature {
    width: 100%;
  }

  .atlas-gallery-hero-style-switch {
    right: 1rem;
    left: 1rem;
  }

  .atlas-gallery-hero-style-switch .atlas-gallery-style-switch {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas-gallery-grid-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .atlas-gallery-style-switch {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas-gallery-search-filter {
    width: 100%;
  }

  .atlas-gallery-result-line {
    flex-wrap: wrap;
  }

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

/* v0.1.43 homepage Atlas gateway final cascade overrides. */
.root-gateway .gateway-hero-copy {
  justify-self: start;
  text-align: left;
}

.root-gateway .gateway-title-flex {
  justify-content: flex-start;
  text-align: left;
}

.root-gateway .gateway-slogan,
.root-gateway .gateway-lede {
  text-align: left;
}

.root-gateway .gateway-actions {
  justify-content: flex-start;
  margin-top: 1.1rem;
  padding-top: 0;
}

@media (max-width: 1023px) {
  .root-gateway .gateway-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "atlas" "picks";
  }

  .root-gateway .gateway-hero-copy {
    width: 100%;
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .root-gateway .gateway-hero-copy,
  .root-gateway .gateway-slogan,
  .root-gateway .gateway-lede {
    text-align: left;
  }
}

/* v0.1.43 homepage Atlas Hero refinement. */
.root-gateway .root-language-bar {
  display: none;
}

.root-gateway .gateway-hero.atlas-gateway-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.78fr);
  grid-template-areas:
    "title atlas"
    "rail rail"
    "picks picks";
  gap: 1.1rem 2rem;
  min-height: 0;
  padding: clamp(2rem, 4vw, 3.4rem);
  background-size: cover;
  background-position: center;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .gateway-hero-copy {
  grid-area: title;
  align-self: center;
  min-height: 0;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .atlas-highlight-card {
  grid-area: atlas;
  width: min(100%, 420px);
  justify-self: end;
  align-self: center;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .atlas-experience-guide {
  grid-area: rail;
  width: 100%;
  margin-top: 0.2rem;
}

.root-gateway .atlas-experience-rail {
  position: static;
  inset: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box {
  grid-area: picks;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(180px, 0.38fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 1rem;
  border-radius: 16px;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box .matrix-picks-head {
  margin: 0;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box .matrix-picks-items {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
}

.root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box .matrix-pick-item {
  min-height: 42px;
}

@media (max-width: 1023px) {
  .root-gateway .gateway-hero.atlas-gateway-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "atlas" "rail" "picks";
  }

  .root-gateway .gateway-hero.atlas-gateway-hero > .atlas-highlight-card {
    justify-self: start;
  }

  .root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box {
    grid-template-columns: 1fr;
  }

  .root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box .matrix-picks-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-gateway .atlas-experience-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .root-gateway .atlas-experience-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .root-gateway .gateway-hero.atlas-gateway-hero > .matrix-picks-box .matrix-picks-items {
    grid-template-columns: 1fr;
  }
}

/* v0.1.43 homepage Muzi-first Hero refinement. */
.root-gateway .gateway-hero.muzi-matrix-hero {
  grid-template-columns: minmax(250px, 0.88fr) minmax(420px, 1.32fr) minmax(250px, 0.88fr);
  grid-template-areas: "atlas title picks";
  gap: 1.5rem;
  min-height: 0;
  padding: clamp(2.3rem, 4vw, 3.5rem);
  background-image:
    radial-gradient(circle at 50% 12%, rgba(255, 218, 137, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(36, 32, 27, 0.97), rgba(14, 20, 31, 0.97));
  background-size: auto, auto;
}

.root-gateway .gateway-hero.muzi-matrix-hero > .gateway-hero-copy {
  grid-area: title;
  align-self: center;
  justify-self: center;
  align-items: center;
  min-height: 0;
  max-width: 620px;
  text-align: center;
}

.root-gateway .gateway-hero.muzi-matrix-hero .gateway-title-flex,
.root-gateway .gateway-hero.muzi-matrix-hero .gateway-slogan,
.root-gateway .gateway-hero.muzi-matrix-hero .gateway-lede {
  text-align: center;
}

.root-gateway .gateway-hero.muzi-matrix-hero > .atlas-highlight-card {
  grid-area: atlas;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: 340px;
}

.root-gateway .gateway-hero.muzi-matrix-hero > .matrix-picks-box {
  grid-area: picks;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  max-width: 340px;
}

.root-gateway > .atlas-attraction-band {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto 1.65rem;
  min-height: 148px;
  padding: 1.25rem 1.1rem 1.35rem;
  border: 1px solid rgba(255, 230, 164, 0.18);
  border-radius: 18px;
  background-color: #11191c;
  background-position: center 44%;
  background-size: cover;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.root-gateway > .atlas-attraction-band .atlas-experience-guide-head {
  margin-bottom: 0.65rem;
}

.root-gateway > .atlas-attraction-band .atlas-experience-guide-head span {
  display: inline-flex;
  padding: 0.18rem 0.52rem;
  border: 1px solid rgba(255, 230, 164, 0.22);
  border-radius: 999px;
  color: #ffe39b;
  background: rgba(7, 12, 16, 0.72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.root-gateway > .atlas-attraction-band .atlas-experience-guide-head small {
  color: rgba(255, 245, 220, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.root-gateway > .atlas-attraction-band .atlas-experience-rail {
  position: static;
  inset: auto;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 1100px) {
  .root-gateway .gateway-hero.muzi-matrix-hero {
    grid-template-columns: minmax(220px, 0.82fr) minmax(360px, 1.2fr) minmax(220px, 0.82fr);
  }

  .root-gateway .gateway-hero.muzi-matrix-hero .gateway-title-flex {
    font-size: clamp(2.4rem, 5vw, 4.5rem) !important;
  }
}

@media (max-width: 1023px) {
  .root-gateway .gateway-hero.muzi-matrix-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "atlas" "picks";
  }

  .root-gateway .gateway-hero.muzi-matrix-hero > .gateway-hero-copy,
  .root-gateway .gateway-hero.muzi-matrix-hero > .atlas-highlight-card,
  .root-gateway .gateway-hero.muzi-matrix-hero > .matrix-picks-box {
    justify-self: center;
    width: min(100%, 620px);
    max-width: 620px;
  }

  .root-gateway > .atlas-attraction-band .atlas-experience-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .root-gateway > .atlas-attraction-band .atlas-experience-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}