:root {
  /* Deep space backgrounds */
  --bg: #08041a;
  --bg-elev: #140a2e;
  --bg-card: #1a0f38;
  --bg-card-open: #251646;

  /* Cosmic text — slight lavender white */
  --text: #ece5f7;
  --text-dim: #9b8db8;
  --text-soft: #c8bcde;

  /* Neon purple borders */
  --border: #2e1f52;
  --border-strong: #4d3585;

  /* Neon negative — hot pink */
  --neg-accent: #ff6b9d;
  --neg-accent-soft: rgba(255, 107, 157, 0.14);
  --neg-flip: #ffd93d;

  /* Neon positive — cyan-teal */
  --pos-accent: #5eead4;
  --pos-accent-soft: rgba(94, 234, 212, 0.14);
  --pos-flip: #ff6b9d;

  /* Brand neon purple */
  --neon: #b768ff;
  --neon-soft: rgba(183, 104, 255, 0.14);
  --neon-glow: rgba(183, 104, 255, 0.45);
  --neon-deep: #7c3aed;

  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  --radius: 10px;
  --radius-sm: 6px;
  --transition: 200ms ease;
}

* { box-sizing: border-box; }

/* Custom scrollbars — match the cosmic palette everywhere they appear. */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 104, 255, 0.45) rgba(10, 4, 30, 0.4);
}
/* WebKit (Chrome, Edge, Safari, Opera, in-app browsers) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(10, 4, 30, 0.4);
  border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(183, 104, 255, 0.55), rgba(124, 58, 237, 0.55));
  border: 2px solid rgba(10, 4, 30, 0.6);
  border-radius: 999px;
  box-shadow: inset 0 0 6px rgba(183, 104, 255, 0.35);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(183, 104, 255, 0.85), rgba(255, 107, 157, 0.65));
  box-shadow: inset 0 0 8px rgba(183, 104, 255, 0.55), 0 0 8px rgba(183, 104, 255, 0.35);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, var(--neon), var(--neg-accent));
}
::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

html {
  background: #050210;
}

body {
  background:
    radial-gradient(ellipse 1200px 800px at 15% 20%, rgba(124, 58, 237, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 1000px 700px at 85% 75%, rgba(236, 72, 153, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 900px 900px at 50% 110%, rgba(79, 70, 229, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 700px 700px at 70% 10%, rgba(183, 104, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, #0a041e 0%, #07021a 50%, #050210 100%);
  background-attachment: fixed;
}

/* Galaxy canvas — drifting starfield behind everything */
.galaxy-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

/* Make sure content sits above the galaxy */
body > * { position: relative; z-index: 1; }
.galaxy-bg { z-index: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* Site navigation — two-tier (categories + sub-pages) */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 4, 30, 0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(183, 104, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.nav-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 28px;
  gap: 32px;
}

.brand {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 50%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(183, 104, 255, 0.25);
  transition: filter var(--transition);
}

.brand:hover { filter: brightness(1.15) drop-shadow(0 0 10px rgba(183, 104, 255, 0.4)); }

.nav-categories {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 1;
}

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

.lang-switcher {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  background: rgba(10, 4, 30, 0.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(10, 4, 30, 0.5);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.download-btn:hover {
  color: var(--text);
  background: rgba(183, 104, 255, 0.10);
  border-color: rgba(183, 104, 255, 0.45);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.25);
}

.download-modal[hidden] { display: none; }

.download-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.download-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 16, 0.78);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.download-modal-card {
  position: relative;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(28, 12, 60, 0.96), rgba(14, 4, 38, 0.98));
  border: 1px solid rgba(183, 104, 255, 0.35);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(183, 104, 255, 0.15);
  animation: modalIn 220ms ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.download-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: all var(--transition);
}
.download-modal-close:hover { color: var(--text); border-color: var(--border); }

.download-modal h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 60%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.download-modal-lede {
  margin: 0 0 20px;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.download-options {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.download-option {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label size"
    "desc  desc"
    "cta   cta";
  gap: 4px 12px;
  padding: 16px 18px;
  background: rgba(10, 4, 30, 0.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.download-option:hover {
  border-color: rgba(183, 104, 255, 0.55);
  background: rgba(20, 8, 46, 0.7);
  box-shadow: 0 0 24px rgba(183, 104, 255, 0.18);
}

.download-option-label {
  grid-area: label;
  font-weight: 600;
  color: var(--text);
  font-size: 1.02rem;
}
.download-option-size {
  grid-area: size;
  align-self: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.download-option-desc {
  grid-area: desc;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}
.download-option-cta {
  grid-area: cta;
  justify-self: start;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--text);
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.22), rgba(255, 107, 157, 0.15));
  border: 1px solid rgba(183, 104, 255, 0.45);
  border-radius: 999px;
}

.download-modal-foot {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  text-align: center;
}
.download-modal-foot code {
  background: rgba(10, 4, 30, 0.6);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.download-modal-license {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}
.download-modal-license strong {
  color: rgba(183, 104, 255, 0.95);
  letter-spacing: 0.04em;
}

.lang-btn {
  background: transparent;
  border: none;
  padding: 3px 8px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  transition: all var(--transition);
}

.lang-btn.active {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.30), rgba(255, 107, 157, 0.20));
  box-shadow: 0 0 12px rgba(183, 104, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-cat {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  padding: 8px 18px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  position: relative;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
  letter-spacing: 0.02em;
}

.nav-cat:hover {
  color: var(--text);
  background: rgba(183, 104, 255, 0.08);
  border-color: rgba(183, 104, 255, 0.18);
}

.nav-cat.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.22), rgba(255, 107, 157, 0.15));
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.18),
    0 0 24px rgba(183, 104, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-sub {
  border-top: 1px solid var(--border);
  padding: 10px 28px;
  background: #14082e;
}

.nav-sub.collapsed { display: none; }

.sub-row {
  display: none;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-start;
  animation: subFadeIn 260ms ease;
}

.sub-row.active {
  display: flex;
}

@keyframes subFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-link {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid transparent;
  padding: 6px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  position: relative;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
  letter-spacing: 0.01em;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(183, 104, 255, 0.06);
}

.nav-link.active {
  color: var(--text);
  background: rgba(183, 104, 255, 0.16);
  border-color: rgba(183, 104, 255, 0.35);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.22);
}

/* View switching */
.view {
  display: none;
  animation: viewFadeIn 360ms ease;
}

.view.active {
  display: block;
}

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

/* Hero */
.hero {
  padding: 64px 24px 36px;
  text-align: center;
  background:
    radial-gradient(ellipse 800px 300px at 50% 0%, rgba(183, 104, 255, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 10, 46, 0.5) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #ece5f7 0%, #d3b5ff 40%, #ff9ec7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(183, 104, 255, 0.18);
}

.subtitle {
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--text-soft);
  font-size: 1.05rem;
}

.controls {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

#search {
  width: 100%;
  max-width: 420px;
  padding: 10px 16px;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#search::placeholder { color: var(--text-dim); }

#search:focus {
  border-color: rgba(183, 104, 255, 0.55);
  background: rgba(28, 15, 56, 0.75);
  box-shadow: 0 0 20px rgba(183, 104, 255, 0.18);
}

.filters {
  display: flex;
  gap: 6px;
}

.filter-btn {
  background: rgba(20, 10, 46, 0.6);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
}

.filter-btn:hover {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.4);
  background: rgba(183, 104, 255, 0.08);
}

.filter-btn.active {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.25), rgba(255, 107, 157, 0.18));
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.25);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.sort-control label {
  letter-spacing: 0.02em;
}

#sort {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(20, 10, 46, 0.6);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 30px 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23b768ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

#sort:hover,
#sort:focus {
  border-color: rgba(183, 104, 255, 0.45);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.15);
}

#sort option {
  background: #14082a;
  color: var(--text);
}

.counts {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.counts .sep {
  margin: 0 8px;
  opacity: 0.5;
}

.scale-note {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.scale-note strong {
  color: var(--text-soft);
  font-weight: 500;
}

/* Columns */
.columns {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 36px 24px 48px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.column h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.column h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.negative-column h2::before {
  background: var(--neg-accent);
  box-shadow: 0 0 12px var(--neg-accent);
}
.positive-column h2::before {
  background: var(--pos-accent);
  box-shadow: 0 0 12px var(--pos-accent);
}

.column-hint {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0 0 18px;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card */
.card {
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.85), rgba(20, 10, 46, 0.85));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card:hover {
  background: linear-gradient(180deg, rgba(37, 22, 70, 0.9), rgba(28, 15, 56, 0.9));
  border-color: rgba(183, 104, 255, 0.35);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.12);
}

.card.open {
  background: linear-gradient(180deg, rgba(37, 22, 70, 0.95), rgba(28, 15, 56, 0.95));
  border-color: rgba(183, 104, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.15),
    0 0 32px rgba(183, 104, 255, 0.18),
    var(--shadow);
}

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

.card-name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card-toggle {
  color: var(--text-dim);
  font-size: 0.85rem;
  transition: transform var(--transition);
  user-select: none;
}

.card.open .card-toggle {
  transform: rotate(180deg);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hz badge — frequency-based color coding (Hawkins Map) — neon glow variant */
.hz-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  transition: opacity var(--transition);
}

.hz-badge[data-band="deep-low"]  { color: #ff5c8a; background: rgba(255, 92, 138, 0.10); box-shadow: 0 0 8px rgba(255, 92, 138, 0.25); }
.hz-badge[data-band="low"]       { color: #ff8060; background: rgba(255, 128, 96, 0.10); box-shadow: 0 0 8px rgba(255, 128, 96, 0.22); }
.hz-badge[data-band="mid-low"]   { color: #ffb84d; background: rgba(255, 184, 77, 0.10); box-shadow: 0 0 8px rgba(255, 184, 77, 0.22); }
.hz-badge[data-band="threshold"] { color: #ffd93d; background: rgba(255, 217, 61, 0.16); box-shadow: 0 0 16px rgba(255, 217, 61, 0.45); }
.hz-badge[data-band="mid-high"]  { color: #a0d873; background: rgba(160, 216, 115, 0.10); box-shadow: 0 0 8px rgba(160, 216, 115, 0.22); }
.hz-badge[data-band="high"]      { color: #5dd882; background: rgba(93, 216, 130, 0.12); box-shadow: 0 0 10px rgba(93, 216, 130, 0.28); }
.hz-badge[data-band="very-high"] { color: #5eead4; background: rgba(94, 234, 212, 0.12); box-shadow: 0 0 12px rgba(94, 234, 212, 0.32); }
.hz-badge[data-band="peace"]     { color: #67e8f9; background: rgba(103, 232, 249, 0.14); box-shadow: 0 0 14px rgba(103, 232, 249, 0.38); }

.card-body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
}

.card.open .card-body {
  display: block;
  animation: fadeIn 220ms ease;
}

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

.definition {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0 0 14px;
}

.flip-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.negative-column .flip-label {
  background: var(--neg-accent-soft);
  color: var(--neg-flip);
}

.positive-column .flip-label {
  background: var(--pos-accent-soft);
  color: var(--pos-flip);
}

.flip-text {
  color: var(--text);
  font-size: 0.95rem;
  margin: 0;
}

/* Pair link */
.pair-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px 8px 14px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
  font-family: inherit;
  letter-spacing: 0.01em;
}

.pair-link:hover {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.5);
  background: rgba(183, 104, 255, 0.08);
  transform: translateX(2px);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.18);
}

.pair-direction {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  opacity: 0.7;
}

.negative-column .pair-direction { color: var(--pos-accent); }
.positive-column .pair-direction { color: var(--neg-accent); }

.pair-name {
  font-weight: 500;
  color: var(--text);
}

.pair-arrow {
  font-size: 0.9rem;
  opacity: 0.5;
  transition: transform var(--transition), opacity var(--transition);
}

.pair-link:hover .pair-arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* Pulse highlight when navigated to */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 var(--pulse-color, rgba(183, 104, 255, 0.55)),
                0 0 32px var(--pulse-color, rgba(183, 104, 255, 0.4)),
                var(--shadow);
    border-color: var(--pulse-border, rgba(183, 104, 255, 0.7));
  }
  60% {
    box-shadow: 0 0 0 18px rgba(183, 104, 255, 0),
                0 0 20px rgba(183, 104, 255, 0.1),
                var(--shadow);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(183, 104, 255, 0),
                var(--shadow);
    border-color: var(--border-strong);
  }
}

.card.pulse {
  animation: pulseGlow 1.4s ease-out;
}

.negative-column .card.pulse {
  --pulse-color: rgba(217, 107, 107, 0.45);
  --pulse-border: var(--neg-accent);
}

.positive-column .card.pulse {
  --pulse-color: rgba(126, 196, 136, 0.45);
  --pulse-border: var(--pos-accent);
}

/* Practice list — numbered or bulleted steps inside pairs-closing */
.practice-list {
  max-width: 580px;
  margin: 12px auto 24px;
  padding: 18px 22px 18px 44px;
  background: rgba(94, 234, 212, 0.05);
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: var(--radius);
  color: var(--text-soft);
  text-align: left;
}

.practice-list li {
  padding: 6px 0;
  font-size: 0.94rem;
  line-height: 1.65;
  letter-spacing: 0.005em;
}

.practice-list li::marker {
  color: #5eead4;
  font-weight: 600;
}

/* Warning list (used inside pairs-closing) */
.warning-list {
  max-width: 640px;
  margin: 12px auto 24px;
  padding: 18px 22px 18px 40px;
  background: rgba(255, 107, 157, 0.06);
  border: 1px solid rgba(255, 107, 157, 0.25);
  border-radius: var(--radius);
  color: var(--text-soft);
  list-style: none;
  text-align: left;
}

.warning-list li {
  position: relative;
  padding: 6px 0 6px 16px;
  font-size: 0.94rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
}

.warning-list li::before {
  content: "▴";
  position: absolute;
  left: -2px;
  top: 6px;
  color: #ff6b9d;
  font-size: 0.8rem;
  text-shadow: 0 0 8px rgba(255, 107, 157, 0.5);
}

/* Footer */
footer {
  text-align: center;
  padding: 32px 24px;
  color: var(--text-dim);
  font-size: 0.82rem;
  border-top: 1px solid var(--border);
  background: #14082e;
}

footer p { margin: 0; }
footer a { color: inherit; }

/* Empty state when filtering */
.column.hidden { display: none; }
.cards.empty::after {
  content: "Nothing here.";
  display: block;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 20px 4px;
  font-style: italic;
}

/* Friendship view */
.manifesto {
  font-size: 1.18rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  max-width: 700px;
  margin: 0 auto 22px;
  letter-spacing: 0.005em;
}

.manifesto-second {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 1.0rem;
  line-height: 1.7;
}

.pairs-grid {
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.85), rgba(20, 10, 46, 0.85));
  border: 1px solid var(--border);
  margin: 36px auto 24px;
  width: calc(100% - 48px);
  max-width: 980px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(183, 104, 255, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.pairs-header,
.pairs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.pairs-header {
  border-bottom: 1px solid var(--border-strong);
}

.pairs-row {
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}

.pairs-row:hover {
  background: rgba(183, 104, 255, 0.06);
}

.true-header,
.false-header {
  padding: 16px 22px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.true-header {
  color: var(--pos-accent);
  border-right: 1px solid var(--border-strong);
}

.false-header {
  color: var(--neg-accent);
}

.true,
.false {
  padding: 18px 22px;
  font-size: 0.98rem;
  line-height: 1.55;
}

.true {
  color: var(--pos-accent);
  border-right: 1px solid var(--border);
  position: relative;
}

.false {
  color: var(--neg-accent);
  font-style: italic;
}

.true::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--pos-accent);
  transition: height var(--transition);
}

.pairs-row:hover .true::before {
  height: 60%;
}

.pairs-closing {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 24px 64px;
  text-align: center;
  color: var(--text-soft);
}

.pairs-closing p {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 22px;
}

/* ============ Breathing circle (Meditation page) ============ */
.breath {
  max-width: 560px;
  margin: 28px auto 56px;
  padding: 28px 20px 24px;
  background: linear-gradient(180deg, rgba(8, 4, 24, 0.55), rgba(14, 6, 36, 0.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.breath-stage {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}
.breath-glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(183, 104, 255, 0.30) 0%,
    rgba(255, 107, 157, 0.14) 35%,
    transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.breath-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 180, 220, 0.85) 0%,
    rgba(183, 104, 255, 0.78) 35%,
    rgba(74, 32, 130, 0.85) 75%,
    rgba(20, 10, 46, 0.95) 100%);
  box-shadow:
    0 0 80px rgba(183, 104, 255, 0.35),
    inset 0 0 60px rgba(255, 200, 230, 0.18);
  transform: translate(-50%, -50%) scale(0.42);
  transition: transform 180ms linear, opacity 200ms linear;
  pointer-events: none;
}
/* Centered text overlay on the stage (not on the scaling circle). */
.breath-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}
.breath-phase {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(10, 4, 30, 0.7);
}
.breath-count {
  margin-top: 6px;
  font-size: 1.1rem;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(10, 4, 30, 0.6);
}
.breath-controls {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.breath-play {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.85), rgba(255, 107, 157, 0.65));
  border: 1px solid rgba(183, 104, 255, 0.5);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}
.breath-play:hover { box-shadow: 0 0 18px rgba(183, 104, 255, 0.35); transform: translateY(-1px); }
.breath-play:active { transform: translateY(0); }
.breath-patterns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.breath-pattern {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.breath-pattern:hover {
  color: var(--text-soft);
  border-color: rgba(183, 104, 255, 0.35);
}
.breath-pattern.active {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.6);
  background: rgba(74, 32, 130, 0.45);
}
.breath-hint {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .breath-stage { width: 260px; height: 260px; }
  .breath-circle { width: 200px; height: 200px; }
  .breath-phase { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .breath-circle { transition: none; }
  .breath-glow { display: none; }
}

/* ============ 12-month vs 13-moon wheels (Calendar page) ============ */
.moonwheels {
  max-width: 760px;
  margin: 12px auto 32px;
}
.moonwheels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  justify-items: center;
}
.wheel-cell {
  margin: 0;
  text-align: center;
}
.wheel-cell figcaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wheel-cell figcaption strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  color: var(--text);
  letter-spacing: 0.02em;
}
.wheel-cell figcaption span {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.wheel {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 22px rgba(0, 0, 0, 0.45));
}
/* Slices */
.wheel-slice path {
  stroke: rgba(20, 10, 46, 0.85);
  stroke-width: 1.2;
  transition: fill 200ms ease, opacity 200ms ease;
}
/* 12-month theme: warm imposed orange/red, alternating shades */
.month-slice:nth-child(odd) path  { fill: rgba(184, 95, 56, 0.78); }
.month-slice:nth-child(even) path { fill: rgba(146, 64, 38, 0.82); }
/* 13-moon theme: cool natural purple/silver, alternating shades */
.moon-slice:nth-child(odd) path   { fill: rgba(120, 90, 200, 0.78); }
.moon-slice:nth-child(even) path  { fill: rgba(78, 56, 152, 0.82); }
.wheel-slice:hover path { fill: rgba(255, 200, 130, 0.92); }
.wheel-moon .wheel-slice:hover path { fill: rgba(220, 200, 255, 0.92); }
/* Labels */
.wheel-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11.5px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  letter-spacing: 0.04em;
}
.wheel-days {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 8.5px;
  fill: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
/* Center text inside the donut */
.wheel-center-top {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  fill: var(--text);
  letter-spacing: 0.05em;
}
.wheel-center-bot {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  fill: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.moonwheels-caption {
  margin: 14px auto 0;
  max-width: 520px;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
@media (max-width: 620px) {
  .moonwheels-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============ Heartfield (Heart page) ============ */
.heartfield {
  max-width: 640px;
  margin: 18px auto 48px;
  padding: 28px 20px 22px;
  background: linear-gradient(180deg, rgba(8, 4, 24, 0.55), rgba(14, 6, 36, 0.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.hf-stage {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto 6px;
}
.hf-heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  fill: #ff5c8a;
  filter: drop-shadow(0 0 28px rgba(255, 92, 138, 0.55));
  animation: hf-beat-coherent 5s ease-in-out infinite;
  transform-origin: center;
}
.is-chaotic .hf-heart {
  fill: #ff7a5c;
  animation: hf-beat-chaotic 0.85s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(255, 122, 92, 0.55));
}
@keyframes hf-beat-coherent {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); }
  50%      { transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes hf-beat-chaotic {
  0%       { transform: translate(-50%, -50%) scale(0.88); }
  18%      { transform: translate(-50%, -50%) scale(1.10); }
  40%      { transform: translate(-50%, -50%) scale(0.96); }
  62%      { transform: translate(-50%, -50%) scale(1.06); }
  100%     { transform: translate(-50%, -50%) scale(0.88); }
}
/* Ripples = the EM field expanding outward. Four staggered loops give an
   "always rippling" feel without scripting anything. */
.hf-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 92, 138, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: hf-ripple-coherent 5s linear infinite;
}
.is-chaotic .hf-ripple {
  border-color: rgba(255, 122, 92, 0.55);
  animation: hf-ripple-chaotic 0.85s linear infinite;
}
.hf-ripple:nth-child(1) { animation-delay: 0s; }
.hf-ripple:nth-child(2) { animation-delay: 1.25s; }
.hf-ripple:nth-child(3) { animation-delay: 2.5s; }
.hf-ripple:nth-child(4) { animation-delay: 3.75s; }
.is-chaotic .hf-ripple:nth-child(1) { animation-delay: 0s; }
.is-chaotic .hf-ripple:nth-child(2) { animation-delay: 0.21s; }
.is-chaotic .hf-ripple:nth-child(3) { animation-delay: 0.43s; }
.is-chaotic .hf-ripple:nth-child(4) { animation-delay: 0.64s; }
@keyframes hf-ripple-coherent {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(2.8);  opacity: 0; }
}
@keyframes hf-ripple-chaotic {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(2.4);  opacity: 0; }
}
/* HRV canvas */
.hf-hrv {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 90px;
  margin: 6px auto 12px;
  background: rgba(10, 4, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Controls — two-pill toggle */
.hf-controls {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 4px 0 0;
}
.hf-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.hf-toggle:hover { color: var(--text-soft); }
.hf-toggle.active[data-state="coherent"] {
  color: var(--text);
  background: rgba(74, 32, 130, 0.45);
  border-color: rgba(183, 104, 255, 0.55);
}
.hf-toggle.active[data-state="chaotic"] {
  color: var(--text);
  background: rgba(130, 38, 38, 0.45);
  border-color: rgba(220, 90, 90, 0.55);
}
.hf-caption {
  margin: 14px auto 0;
  max-width: 480px;
  font-size: 0.86rem;
  color: var(--text-dim);
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .hf-heart, .hf-ripple { animation: none; }
}

/* ============ Frequency visualizer (Frequency page) ============ */
.freqviz {
  max-width: 760px;
  margin: 18px auto 44px;
  padding: 22px 20px 22px;
  background: linear-gradient(180deg, rgba(8, 4, 24, 0.55), rgba(14, 6, 36, 0.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.fv-wave {
  display: block;
  width: 100%;
  max-width: 700px;
  height: 160px;
  margin: 0 auto 6px;
  background: rgba(10, 4, 28, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.fv-readout {
  margin-top: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}
.fv-readout .fv-unit {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  margin-left: 6px;
  vertical-align: 0.55em;
}
.fv-label {
  margin: 4px 0 16px;
  font-size: 0.95rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.fv-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.fv-preset {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.fv-preset:hover {
  color: var(--text-soft);
  border-color: rgba(183, 104, 255, 0.35);
}
.fv-preset.active {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.6);
  background: rgba(74, 32, 130, 0.45);
}
.fv-audio {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.fv-audio:hover:not(.disabled) {
  color: var(--text);
  border-color: rgba(255, 200, 120, 0.55);
}
.fv-audio.on {
  color: var(--text);
  background: rgba(140, 90, 30, 0.45);
  border-color: rgba(255, 200, 120, 0.65);
}
.fv-audio.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.fv-hint {
  margin: 14px auto 0;
  max-width: 520px;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* ============ Starfield (Cosmology page) ============ */
.view-cosmology { position: relative; }
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
/* Make sure the cosmology content sits above the starfield. */
.view-cosmology > *:not(.starfield) {
  position: relative;
  z-index: 1;
}

/* ============ Inversion flip-cards (Inversion page) ============ */
.inversions {
  max-width: 880px;
  margin: 18px auto 44px;
}
.iv-hint {
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0 0 18px;
  letter-spacing: 0.04em;
}
.inversions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.iv-card {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  perspective: 700px;
  cursor: pointer;
  font-family: inherit;
  display: block;
  width: 100%;
  height: 100px;
}
.iv-card .iv-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 700ms cubic-bezier(0.45, 0.05, 0.30, 1);
  transform-style: preserve-3d;
}
.iv-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.iv-front {
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.7), rgba(20, 10, 46, 0.7));
  color: var(--text-soft);
}
.iv-back {
  background: linear-gradient(180deg, rgba(120, 30, 30, 0.6), rgba(74, 32, 130, 0.6));
  color: rgba(255, 220, 180, 0.95);
  transform: rotateY(180deg);
  border-color: rgba(255, 170, 80, 0.45);
  box-shadow: inset 0 0 22px rgba(255, 170, 80, 0.12);
}
.iv-card.flipped .iv-inner { transform: rotateY(180deg); }
@media (hover: hover) {
  .iv-card:hover .iv-inner { transform: rotateY(180deg); }
  .iv-card.flipped:hover .iv-inner { transform: rotateY(360deg); }
}
.iv-card:focus-visible {
  outline: 2px solid rgba(183, 104, 255, 0.7);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .iv-card .iv-inner { transition: none; }
}

/* ============ Silence overlay (Silence page) ============ */
.sil-callout {
  max-width: 520px;
  margin: 12px auto 40px;
  padding: 28px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(8, 4, 24, 0.55), rgba(14, 6, 36, 0.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sil-enter {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(40, 20, 80, 0.85), rgba(74, 32, 130, 0.65));
  border: 1px solid rgba(183, 104, 255, 0.45);
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  padding: 12px 36px;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.sil-enter:hover {
  box-shadow: 0 0 22px rgba(183, 104, 255, 0.28);
  transform: translateY(-1px);
}
.sil-callout-hint {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
/* The overlay itself. */
.sil-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at center, #06030f 0%, #02010a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 600ms ease;
}
.sil-overlay.in { opacity: 1; }
.sil-word {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: 0.12em;
  color: rgba(255, 240, 220, 0.92);
  text-shadow: 0 0 32px rgba(183, 104, 255, 0.25);
  animation: sil-breathe 7s ease-in-out infinite;
}
@keyframes sil-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.sil-counter {
  position: absolute;
  bottom: 9%;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: rgba(255, 220, 180, 0.0);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transition: color 1500ms ease;
}
.sil-counter.visible { color: rgba(255, 220, 180, 0.45); }
.sil-hint {
  position: absolute;
  top: 8%;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: rgba(200, 180, 230, 0.45);
  text-transform: uppercase;
  transition: opacity 1200ms ease;
}
.sil-hint.fading { opacity: 0; }
/* While the overlay is open, hide the body scrollbar so nothing competes. */
body.sil-active { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .sil-overlay, .sil-word { animation: none; transition: none; }
  .sil-overlay { opacity: 1; }
}

/* ============ Now clock (Now page) ============ */
.nowclock {
  max-width: 360px;
  margin: 18px auto 44px;
  text-align: center;
}
.nc-face {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.nc-ring {
  fill: none;
  stroke: rgba(183, 104, 255, 0.18);
  stroke-width: 1.2;
}
.nc-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  fill: rgba(220, 200, 255, 0.45);
}
.nc-center {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 32px;
  letter-spacing: 0.1em;
  fill: var(--text);
}
.nc-hand line {
  stroke: rgba(183, 104, 255, 0.85);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.nc-hand circle {
  fill: rgba(255, 200, 230, 0.9);
  filter: drop-shadow(0 0 6px rgba(183, 104, 255, 0.55));
}
.nc-caption {
  margin: 16px 0 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.55;
}

/* ============ Sunrise backdrop (Awakening page) ============ */
.view-awakening { position: relative; }
.sunrise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sr-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6, 4, 22) 0%, rgb(12, 10, 38) 100%);
  transition: background 600ms ease;
}
.sr-sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 250, 230, 1) 0%,
    rgba(255, 220, 150, 0.95) 40%,
    rgba(255, 170, 100, 0.85) 75%,
    rgba(230, 110,  60, 0.6)  100%);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 600ms ease, opacity 600ms ease, box-shadow 600ms ease;
}
.sr-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
}
.view-awakening > *:not(.sunrise) {
  position: relative;
  z-index: 1;
}
/* Keep the pairs grid readable against bright sunrise — give it a quiet panel. */
.view-awakening .pairs-grid {
  background: rgba(8, 4, 20, 0.42);
  border-radius: 10px;
  padding: 18px 14px;
}
@media (prefers-reduced-motion: reduce) {
  .sr-sky, .sr-sun { transition: none; }
}

/* ============ Sacred geometry (Magic page) ============ */
.magicgeo {
  max-width: 480px;
  margin: 14px auto 40px;
  text-align: center;
}
.mg-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 24px rgba(183, 104, 255, 0.18));
}
/* Form groups: hidden by default, fade in when .visible. */
.mg-form {
  opacity: 0;
  transition: opacity 800ms ease;
}
.mg-form.visible { opacity: 1; }

/* Circles draw via stroke-dashoffset. */
.mg-circle {
  fill: none;
  stroke: rgba(183, 104, 255, 0.7);
  stroke-width: 1.1;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}
.mg-form.visible .mg-circle {
  animation: mg-draw-circle 1100ms ease-out forwards;
}
@keyframes mg-draw-circle {
  to { stroke-dashoffset: 0; }
}

/* Lines (Metatron) — drawn after the dots so they look like the form
   completing itself. */
.mg-line {
  stroke: rgba(255, 200, 230, 0.45);
  stroke-width: 0.7;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.mg-form.visible .mg-line {
  animation: mg-draw-line 1200ms ease-out forwards;
}
@keyframes mg-draw-line {
  to { stroke-dashoffset: 0; }
}

.mg-label {
  margin: 14px 0 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  color: var(--text);
  letter-spacing: 0.04em;
}
.mg-dots {
  display: inline-flex;
  gap: 8px;
  margin: 4px 0 10px;
}
.mg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(183, 104, 255, 0.25);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.mg-dot:hover { background: rgba(183, 104, 255, 0.55); }
.mg-dot.active {
  background: rgba(255, 200, 230, 0.95);
  transform: scale(1.25);
}
.mg-caption {
  margin: 4px auto 0;
  max-width: 380px;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .mg-form { transition: none; }
  .mg-circle, .mg-line { animation: none; stroke-dashoffset: 0 !important; }
}

/* ============ Discernment game (Discernment page) ============ */
.discern {
  position: relative;
  max-width: 640px;
  margin: 18px auto 44px;
  padding: 26px 22px 44px;
  background: linear-gradient(180deg, rgba(8, 4, 24, 0.55), rgba(14, 6, 36, 0.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.dc-hint {
  margin: 0 0 16px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
}
/* ===== Quiz Hub — category landing ====================================== */
.quiz-hub {
  max-width: 980px;
  margin: 28px auto 60px;
}
.quiz-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .quiz-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .quiz-hub-grid { grid-template-columns: 1fr; }
}
.quiz-cat-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 22px 20px 18px;
  text-align: left;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.55), rgba(20, 10, 46, 0.55));
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 14px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.quiz-cat-card::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(183, 104, 255, 0.18), transparent 65%);
  pointer-events: none;
  filter: blur(4px);
  opacity: 0.7;
  transition: opacity var(--transition);
}
.quiz-cat-card:hover {
  border-color: rgba(183, 104, 255, 0.65);
  box-shadow: 0 0 28px rgba(183, 104, 255, 0.25), 0 12px 36px rgba(8, 4, 22, 0.45);
  transform: translateY(-3px);
}
.quiz-cat-card:hover::after { opacity: 1; }
.quiz-cat-icon {
  font-size: 1.9rem;
  line-height: 1;
  background: linear-gradient(135deg, #b768ff, #ff6b9d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(183, 104, 255, 0.45));
}
.quiz-cat-card[data-cat-tone="all"]       .quiz-cat-icon { background: linear-gradient(135deg, #ece5f7, #b768ff); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="history"]   .quiz-cat-icon { background: linear-gradient(135deg, #ffd166, #ff9933); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="money"]     .quiz-cat-icon { background: linear-gradient(135deg, #b8ff3a, #6ec96e); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="body"]      .quiz-cat-icon { background: linear-gradient(135deg, #00f0ff, #66ddaa); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="media"]     .quiz-cat-icon { background: linear-gradient(135deg, #ff8a2b, #ff4e88); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="pharma"]    .quiz-cat-icon { background: linear-gradient(135deg, #ff2db5, #c060ff); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="inner"]     .quiz-cat-icon { background: linear-gradient(135deg, #ff6b9d, #ff9966); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="parenting"] .quiz-cat-icon { background: linear-gradient(135deg, #ffe066, #ffa66c); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-card[data-cat-tone="mind"]      .quiz-cat-icon { background: linear-gradient(135deg, #80b3ff, #c060ff); -webkit-background-clip: text; background-clip: text; }
.quiz-cat-body { flex: 1; }
.quiz-cat-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.quiz-cat-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-soft);
  font-style: italic;
}
.quiz-cat-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid rgba(183, 104, 255, 0.12);
  padding-top: 10px;
}
.quiz-cat-best { color: rgba(183, 104, 255, 0.85); }

/* ===== Geo Quiz — world map country picker ============================== */
/* When the geo tab is active, ditch the galaxy and go full-bleed. */
/* Geo tab keeps the galaxy starfield visible — perfect backdrop for the globe.
 * (Earlier versions hid it; now the map grid is transparent so it shows through.) */
body[data-view="geo"] .galaxy-bg { display: block; opacity: 0.95; }
body[data-view="geo"] main { padding: 0; }
body[data-view="geo"] .view-geo { padding: 0; max-width: none; position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Geo Layout — two-column: sidebar (country picker) + map stage.
 * ═══════════════════════════════════════════════════════════════════════════ */
body[data-view="geo"] .geo-layout {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: calc(100vh - 60px);
  min-height: 480px;
}

body[data-view="geo"] .geo-sidebar {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 80% at 0% 0%, rgba(183, 104, 255, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 10, 46, 0.72) 0%, rgba(8, 4, 22, 0.92) 70%, rgba(5, 2, 16, 0.96) 100%);
  border-right: 1px solid rgba(183, 104, 255, 0.22);
  box-shadow: inset -12px 0 24px -16px rgba(183, 104, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 6;
}

body[data-view="geo"] .geo-sidebar-header {
  position: relative;
  flex: 0 0 auto;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(183, 104, 255, 0.18);
}
body[data-view="geo"] .geo-sidebar-header::after {
  /* Soft fade into the list area below */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 18px;
  background: linear-gradient(180deg, rgba(5, 2, 16, 0) 0%, rgba(5, 2, 16, 0.5) 100%);
  pointer-events: none;
}

body[data-view="geo"] .geo-sidebar-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(183, 104, 255, 0.4) transparent;
}
body[data-view="geo"] .geo-sidebar-list::-webkit-scrollbar { width: 8px; }
body[data-view="geo"] .geo-sidebar-list::-webkit-scrollbar-track { background: transparent; }
body[data-view="geo"] .geo-sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(183, 104, 255, 0.35);
  border-radius: 4px;
}
body[data-view="geo"] .geo-sidebar-list::-webkit-scrollbar-thumb:hover { background: rgba(183, 104, 255, 0.55); }

body[data-view="geo"] .geo-side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(20, 10, 46, 0.0);
  color: rgba(236, 229, 247, 0.92);
  font: 500 0.92rem/1.2 inherit;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
  /* Cascade reveal — each item fades + slides in 30ms after its predecessor.
   * The --i custom prop is set inline in geo.js so the stagger is deterministic. */
  animation: geo-side-item-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes geo-side-item-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="geo"] .geo-side-item { animation: none; }
}
body[data-view="geo"] .geo-side-item:hover {
  background: rgba(40, 22, 84, 0.55);
  border-color: rgba(183, 104, 255, 0.35);
  transform: translateX(2px);
}
body[data-view="geo"] .geo-side-item:focus-visible {
  outline: none;
  border-color: rgba(183, 104, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(183, 104, 255, 0.3);
}
body[data-view="geo"] .geo-side-item.active {
  background: linear-gradient(90deg, rgba(183, 104, 255, 0.32) 0%, rgba(40, 22, 84, 0.55) 100%);
  border-color: rgba(183, 104, 255, 0.6);
  color: #fff7ec;
  box-shadow:
    inset 3px 0 0 #b768ff,
    0 0 18px rgba(183, 104, 255, 0.25);
}

body[data-view="geo"] .geo-side-flag {
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.45);
}
body[data-view="geo"] .geo-side-flag-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #2a1054, #4e1f9a);
  color: #ece5f7;
  font-size: 1rem;
  box-shadow: 0 0 0 1px rgba(183, 104, 255, 0.45), 0 0 10px rgba(183, 104, 255, 0.35);
}

body[data-view="geo"] .geo-side-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-view="geo"] .geo-side-best {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #b768ff;
  background: rgba(183, 104, 255, 0.14);
  border: 1px solid rgba(183, 104, 255, 0.32);
}

/* Stage column: map + quiz overlay */
body[data-view="geo"] .geo-stage-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Quiz overlay — floats over the map as a glass panel instead of replacing it.
 * Pinned to top-LEFT so it doesn't collide with the map controls (top-right). */
body[data-view="geo"] .geo-stage-overlay {
  position: absolute;
  z-index: 7;
  top: 16px;
  left: 16px;
  right: auto;
  width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(40, 22, 84, 0.55), rgba(20, 10, 46, 0.62));
  border: 1px solid rgba(183, 104, 255, 0.4);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(183, 104, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  animation: geo-stage-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes geo-stage-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body[data-view="geo"] .geo-stage-overlay::-webkit-scrollbar { width: 8px; }
body[data-view="geo"] .geo-stage-overlay::-webkit-scrollbar-track { background: transparent; }
body[data-view="geo"] .geo-stage-overlay::-webkit-scrollbar-thumb {
  background: rgba(183, 104, 255, 0.35); border-radius: 4px;
}

/* Sidebar collapses to top bar on mobile */
@media (max-width: 720px) {
  body[data-view="geo"] .geo-layout {
    flex-direction: column;
    height: calc(100vh - 60px);
  }
  body[data-view="geo"] .geo-sidebar {
    flex: 0 0 auto;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid rgba(183, 104, 255, 0.22);
  }
  body[data-view="geo"] .geo-stage-overlay {
    top: 8px; left: 8px; right: 8px; width: auto;
    max-height: calc(100% - 16px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Geo quiz overlay — antique parchment cartouche.
 *
 * Scoped tightly to `.geo-stage-overlay` so the rest of the Discernment quiz
 * UI keeps its purple-glass look. Palette + typography mirror the antique
 * map theme (cream parchment land #ecd3a0, ink-brown borders #5c3a1a, dark
 * ink labels #2e1a0a, Cormorant Garamond italic serifs).
 * ═══════════════════════════════════════════════════════════════════════════ */
body[data-view="geo"] .geo-stage-overlay {
  /* Override the purple-glass defaults from the block above with parchment.
   * Layered: warm vignette + cream gradient + paper-grain SVG noise + a
   * dark cartouche frame. The inset double-line ink rule below the border
   * makes this read as a hand-drawn map cartouche.
   *
   * Position is INHERITED from the base rule (absolute, top/left). Don't
   * set position here — overriding `absolute` with `relative` would yank
   * the panel back into the document flow and hide it. */
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.10 0 0 0 0 0.04 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 10%, rgba(255, 240, 200, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 90%, rgba(94, 63, 31, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #f3dcaa 0%, #ecd3a0 60%, #d8b988 100%) !important;
  background-blend-mode: multiply, normal, normal, normal;
  border: 1px solid #5c3a1a !important;
  box-shadow:
    0 18px 50px rgba(46, 26, 10, 0.45),
    0 0 0 4px rgba(92, 58, 26, 0.06),
    inset 0 0 0 1px rgba(46, 26, 10, 0.25),   /* inner double-line cartouche rule */
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(46, 26, 10, 0.15),
    inset 0 1px 0 rgba(255, 240, 200, 0.55),
    inset 0 -1px 0 rgba(78, 53, 32, 0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  padding: 22px 24px 22px !important;
}
/* Cartouche corner ornaments — four ink curls anchored to each corner. */
body[data-view="geo"] .geo-stage-overlay::before,
body[data-view="geo"] .geo-stage-overlay::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M2 20 L2 10 Q2 2 10 2 L20 2' fill='none' stroke='%232e1a0a' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='20' r='1.4' fill='%232e1a0a'/%3E%3Ccircle cx='20' cy='2' r='1.4' fill='%232e1a0a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
}
body[data-view="geo"] .geo-stage-overlay::before {
  top: 8px;
  left: 8px;
}
body[data-view="geo"] .geo-stage-overlay::after {
  bottom: 8px;
  right: 8px;
  transform: rotate(180deg);
}
/* Inner-content corners (top-right + bottom-left) — pseudo on the .discern
 * child since the overlay already used both ::before and ::after. */
body[data-view="geo"] .geo-stage-overlay .discern {
  position: relative;
}
body[data-view="geo"] .geo-stage-overlay .discern::before,
body[data-view="geo"] .geo-stage-overlay .discern::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M2 20 L2 10 Q2 2 10 2 L20 2' fill='none' stroke='%232e1a0a' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='20' r='1.4' fill='%232e1a0a'/%3E%3Ccircle cx='20' cy='2' r='1.4' fill='%232e1a0a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.85;
}
body[data-view="geo"] .geo-stage-overlay .discern::before {
  /* Top-right of the panel, anchored against the .discern's top */
  top: -28px;
  right: -10px;
  transform: scaleX(-1);
}
body[data-view="geo"] .geo-stage-overlay .discern::after {
  /* Bottom-left, anchored against panel bottom */
  bottom: -10px;
  left: -10px;
  transform: scaleX(-1) rotate(180deg);
}
body[data-view="geo"] .geo-stage-overlay::-webkit-scrollbar-thumb {
  background: rgba(92, 58, 26, 0.45) !important;
}

/* Top bar — double-rule ink line with diamond ornament, italic country
 * name in serif flanked by cartouche brackets. */
body[data-view="geo"] .geo-stage-overlay .quiz-stage-bar {
  border-bottom: 1px solid rgba(46, 26, 10, 0.5);
  padding-bottom: 10px;
  margin-bottom: 14px;
  position: relative;
}
body[data-view="geo"] .geo-stage-overlay .quiz-stage-bar::after {
  /* Diamond ornament floating on the rule, like a printed type-flower. */
  content: "❦";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ecd3a0;
  color: #5c3a1a;
  padding: 0 8px;
  font-size: 0.95rem;
  line-height: 1;
}
body[data-view="geo"] .geo-stage-overlay .quiz-back {
  background: rgba(255, 240, 200, 0.55);
  border: 1px solid rgba(92, 58, 26, 0.55);
  color: #2e1a0a;
  font-family: inherit;
  font-style: italic;
  font-size: 0.95rem;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
body[data-view="geo"] .geo-stage-overlay .quiz-back:hover {
  background: #fae6b5;
  border-color: #2e1a0a;
}
body[data-view="geo"] .geo-stage-overlay .quiz-stage-cat {
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
/* Bracket flourishes around the country name — a small "» NAME «" cartouche
 * read. Uses ::before / ::after on the parent label. */
body[data-view="geo"] .geo-stage-overlay .quiz-stage-cat::before {
  content: "·\00a0";
  color: rgba(46, 26, 10, 0.6);
  font-style: normal;
}
body[data-view="geo"] .geo-stage-overlay .quiz-stage-cat::after {
  content: "\00a0·";
  color: rgba(46, 26, 10, 0.6);
  font-style: normal;
}
body[data-view="geo"] .geo-stage-overlay .quiz-stage-icon {
  display: none;  /* the country flag/name carries identity, no neon sigil needed */
}

/* Ornamental section divider — used before the statement and before
 * the verdict buttons via decorative ::before/::after on container. */
body[data-view="geo"] .geo-stage-overlay .dc-statement {
  position: relative;
  margin-top: 8px;
}
body[data-view="geo"] .geo-stage-overlay .dc-statement::before {
  content: "✦";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(92, 58, 26, 0.55);
  font-size: 0.9rem;
}

/* Progress bar — ink-ruled line filled with sepia ink. */
body[data-view="geo"] .geo-stage-overlay .dc-progress-bar {
  background: rgba(92, 58, 26, 0.18);
  border: 1px solid rgba(92, 58, 26, 0.35);
  height: 6px;
}
body[data-view="geo"] .geo-stage-overlay .dc-progress-fill {
  background: linear-gradient(90deg, #8a5a2a, #5c3a1a) !important;
}

/* Hint / labels — italic serif. */
body[data-view="geo"] .geo-stage-overlay .dc-hint,
body[data-view="geo"] .geo-stage-overlay .dc-size-label,
body[data-view="geo"] .geo-stage-overlay .dc-audio-label {
  color: rgba(46, 26, 10, 0.78);
  font-family: inherit;
  font-style: italic;
}

/* Round-length + audio buttons — cream surface, ink border. */
body[data-view="geo"] .geo-stage-overlay .dc-size-btn,
body[data-view="geo"] .geo-stage-overlay .dc-audio-toggle {
  background: rgba(255, 240, 200, 0.55);
  border: 1px solid rgba(92, 58, 26, 0.45);
  color: #2e1a0a;
  font-family: inherit;
  border-radius: 2px;
}
body[data-view="geo"] .geo-stage-overlay .dc-size-btn:hover,
body[data-view="geo"] .geo-stage-overlay .dc-audio-toggle:hover {
  background: #fae6b5;
  border-color: #2e1a0a;
}
body[data-view="geo"] .geo-stage-overlay .dc-size-btn.active {
  background: #5c3a1a;
  color: #f3dcaa;
  border-color: #2e1a0a;
}
body[data-view="geo"] .geo-stage-overlay .dc-audio-volume {
  accent-color: #5c3a1a;
}

/* The statement card — slightly inset parchment, larger serif type for reading. */
body[data-view="geo"] .geo-stage-overlay .dc-statement {
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.6) 0%, rgba(236, 211, 160, 0.4) 100%);
  border: 1px solid rgba(92, 58, 26, 0.55);
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  padding: 16px 18px;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.45),
    inset 0 0 18px rgba(94, 63, 31, 0.10);
}

/* Truth / Inversion verdict buttons — wax-seal pair with idle accents
 * (gold-foil ring for Truth, sealing-wax red for Inversion). Side-by-side
 * with a faint mid-divider so they read as a paired choice. */
body[data-view="geo"] .geo-stage-overlay .dc-buttons {
  gap: 10px;
}
body[data-view="geo"] .geo-stage-overlay .dc-btn {
  background: linear-gradient(180deg, #f3dcaa, #d8b988);
  border: 1px solid #5c3a1a;
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
body[data-view="geo"] .geo-stage-overlay .dc-btn[data-pick="truth"] {
  /* Gold-foil rim, idle */
  box-shadow:
    0 2px 6px rgba(46, 26, 10, 0.3),
    0 0 0 2px rgba(200, 147, 82, 0.55),
    inset 0 1px 0 rgba(255, 240, 200, 0.7);
}
body[data-view="geo"] .geo-stage-overlay .dc-btn[data-pick="inversion"] {
  /* Sealing-wax red rim, idle */
  box-shadow:
    0 2px 6px rgba(46, 26, 10, 0.3),
    0 0 0 2px rgba(160, 80, 40, 0.55),
    inset 0 1px 0 rgba(255, 240, 200, 0.7);
}
body[data-view="geo"] .geo-stage-overlay .dc-btn:hover {
  background: linear-gradient(180deg, #fae6b5, #ecd3a0);
  border-color: #2e1a0a;
  transform: translateY(-1px);
}
body[data-view="geo"] .geo-stage-overlay .dc-btn[data-pick="truth"]:hover {
  box-shadow:
    0 4px 10px rgba(46, 26, 10, 0.35),
    0 0 0 2px rgba(200, 147, 82, 0.95),
    0 0 18px rgba(200, 147, 82, 0.35),
    inset 0 1px 0 rgba(255, 240, 200, 0.7);
}
body[data-view="geo"] .geo-stage-overlay .dc-btn[data-pick="inversion"]:hover {
  box-shadow:
    0 4px 10px rgba(46, 26, 10, 0.35),
    0 0 0 2px rgba(160, 80, 40, 0.95),
    0 0 18px rgba(160, 80, 40, 0.32),
    inset 0 1px 0 rgba(255, 240, 200, 0.7);
}
body[data-view="geo"] .geo-stage-overlay .dc-btn:disabled {
  opacity: 0.65;
  cursor: default;
  transform: none;
}

/* Compact the music/round-length cluster — these are utility controls, not
 * the main content. Tighter padding + smaller type keeps them out of the way. */
body[data-view="geo"] .geo-stage-overlay .dc-audio-control,
body[data-view="geo"] .geo-stage-overlay .dc-size-control {
  font-size: 0.85rem;
  margin-bottom: 8px;
}
body[data-view="geo"] .geo-stage-overlay .dc-size-btn,
body[data-view="geo"] .geo-stage-overlay .dc-audio-toggle {
  padding: 4px 10px;
  font-size: 0.85rem;
}

/* Feedback line — reads like a hand-pressed verdict stamp. The "✓ Truth"
 * or "✗ Inversion" verdict gets a coloured side-bar plus an ornament. */
body[data-view="geo"] .geo-stage-overlay .dc-feedback {
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
  background: rgba(255, 248, 220, 0.45);
  border: 1px solid rgba(92, 58, 26, 0.4);
  border-left: 4px solid #5c3a1a;
  border-radius: 0 3px 3px 0;
  padding: 12px 14px;
  margin-top: 10px;
  position: relative;
}
body[data-view="geo"] .geo-stage-overlay .dc-feedback.correct {
  border-color: rgba(138, 96, 36, 0.5);
  border-left-color: #8a6024;  /* dark gold */
  background: rgba(250, 230, 181, 0.55);
  box-shadow: inset 0 0 18px rgba(138, 96, 36, 0.12);
}
body[data-view="geo"] .geo-stage-overlay .dc-feedback.incorrect {
  border-color: rgba(160, 80, 40, 0.5);
  border-left-color: #a05028;  /* dark sealing-wax red */
  background: rgba(245, 215, 195, 0.55);
  box-shadow: inset 0 0 18px rgba(160, 80, 40, 0.12);
}

/* Score + tier card — sealed certificate of completion. Inset double-rule
 * frame, italic serif headings, ornament glyphs above and below the name. */
body[data-view="geo"] .geo-stage-overlay .dc-score,
body[data-view="geo"] .geo-stage-overlay .dc-tier {
  color: #2e1a0a;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
}
body[data-view="geo"] .geo-stage-overlay .dc-tier {
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.6) 0%, rgba(236, 211, 160, 0.45) 100%);
  border: 1px solid #5c3a1a;
  border-radius: 3px;
  padding: 16px 18px;
  text-align: center;
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, 0.5),
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(46, 26, 10, 0.18),
    inset 0 0 24px rgba(94, 63, 31, 0.12);
}
body[data-view="geo"] .geo-stage-overlay .dc-tier::before {
  content: "✦  ✦  ✦";
  display: block;
  color: rgba(92, 58, 26, 0.55);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  margin-bottom: 6px;
}
body[data-view="geo"] .geo-stage-overlay .dc-tier::after {
  content: "✦  ✦  ✦";
  display: block;
  color: rgba(92, 58, 26, 0.55);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  margin-top: 6px;
}
body[data-view="geo"] .geo-stage-overlay .dc-tier-name {
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: #2e1a0a;
  margin: 4px 0;
}
body[data-view="geo"] .geo-stage-overlay .dc-tier-label,
body[data-view="geo"] .geo-stage-overlay .dc-tier-desc,
body[data-view="geo"] .geo-stage-overlay .dc-tier-best {
  color: rgba(46, 26, 10, 0.78);
  font-style: italic;
  font-family: inherit;
}

/* Next / Replay — match the verdict-button treatment. */
body[data-view="geo"] .geo-stage-overlay .dc-next,
body[data-view="geo"] .geo-stage-overlay .dc-replay {
  background: linear-gradient(180deg, #f3dcaa, #d8b988);
  border: 1px solid #5c3a1a;
  color: #2e1a0a;
  font-family: inherit;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
}
body[data-view="geo"] .geo-stage-overlay .dc-next:hover,
body[data-view="geo"] .geo-stage-overlay .dc-replay:hover {
  background: linear-gradient(180deg, #fae6b5, #ecd3a0);
  border-color: #2e1a0a;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Geo Hero — atlas-style cartouche (now lives inside the sidebar header).
 *
 * Layered look: soft top-down atmospheric vignette gradient (so the title sits
 * on a readable backdrop without a hard edge), then a small glass-panel card
 * containing a compass sigil + italic serif title with metallic gradient text
 * + a decorative hairline flourish + a subtle subtitle.
 *
 * Pointer-events: none lets drag gestures pass through the gradient; the
 * card itself re-enables them so the badge stays interactive if we ever
 * make it clickable.
 * ═══════════════════════════════════════════════════════════════════════════ */
body[data-view="geo"] .view-geo .geo-hero {
  display: flex;
  justify-content: center;
  padding: 0;
  background: none;
  animation: geo-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes geo-hero-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

body[data-view="geo"] .geo-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 4px 8px;
  text-align: center;
}

body[data-view="geo"] .geo-hero-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 8px rgba(183, 104, 255, 0.55))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  animation: geo-hero-mark-spin 60s linear infinite;
}
@keyframes geo-hero-mark-spin {
  to { transform: rotate(360deg); }
}

body[data-view="geo"] .geo-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 100%;
}

body[data-view="geo"] .geo-hero h1 {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', 'IM Fell English', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.65rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  background: linear-gradient(135deg, #fff7ec 0%, #ece5f7 35%, #b768ff 65%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 28px rgba(183, 104, 255, 0.25);
}

body[data-view="geo"] .geo-hero-flourish {
  display: block;
  height: 8px;
  margin: 4px 0 2px;
  opacity: 0.85;
  width: 100%;
  max-width: 220px;
}
body[data-view="geo"] .geo-hero-flourish svg { display: block; width: 100%; height: 100%; }

body[data-view="geo"] .geo-hero .subtitle {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  line-height: 1.3;
  max-width: 270px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="geo"] .view-geo .geo-hero { animation: none; }
  body[data-view="geo"] .geo-hero-mark { animation: none; }
}

.geo-hub {
  margin: 0;
  max-width: none;
  width: 100%;
  position: relative;
}
.geo-hub-grid {
  width: 100%;
  height: 100%;
  /* Transparent so the global galaxy starfield (canvas#galaxy) shows through. */
  background: transparent;
  position: relative;
  overflow: hidden;
}
body[data-view="geo"] .geo-hub { width: 100%; height: 100%; position: relative; }
.geo-map {
  display: block;
  width: 100%;
  height: 100%;
}
.geo-map path {
  stroke: rgba(183, 104, 255, 0.22);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  transition: filter 0.15s, opacity 0.15s;
}
.geo-map .geo-map-pending {
  cursor: not-allowed;
  /* Flag is rendered, but desaturated and dimmed to signal "no quiz yet". */
  filter: saturate(0.35) brightness(0.55);
  opacity: 0.85;
}
.geo-map .geo-map-pending:hover {
  filter: saturate(0.6) brightness(0.75);
  opacity: 1;
}
/* In globe view, the flag is an <image>, the path is a transparent border target.
   Dim the image when its corresponding path is pending. */
.geo-map image.geo-map-pending {
  filter: saturate(0.35) brightness(0.55);
  opacity: 0.85;
}
.geo-map .geo-map-covered {
  cursor: pointer;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.6;
}
.geo-map .geo-map-covered:hover,
.geo-map .geo-map-covered:focus {
  filter: brightness(1.25) drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
  outline: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
}

/* Microstate markers — keep at least 1px stroke regardless of zoom. */
.geo-map .geo-map-mini {
  stroke-width: 0.8;
}

/* Contested / occupied region polygons (Tibet, Xinjiang, Crimea, Kurdistan, Tigray) */
.geo-map path[data-contested="1"] {
  stroke: rgba(255, 215, 100, 0.85);
  stroke-width: 1.2;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.geo-map path[data-contested="1"]:hover {
  stroke: rgba(255, 240, 180, 1);
  stroke-width: 2;
}
/* Micro-state pending markers use the same saturate/brightness as larger pending. */

/* Drag-to-pan cursor + zoom controls */
.geo-hub-grid { cursor: grab; }
.geo-hub-grid.geo-map-dragging,
.geo-hub-grid.geo-map-dragging .geo-map { cursor: grabbing; }
.geo-map-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Status bar — glass pill at the bottom of the map showing live center
 * coordinates + zoom, plus share/paste buttons for view sharing.
 * ═══════════════════════════════════════════════════════════════════════════ */
.geo-map-statusbar {
  /* Bottom-left corner, anchored just to the right of the 320px sidebar.
   * Avoids covering Antarctica (which lives at the bottom-center of the
   * flat-map viewBox) — the corner is over open ocean. */
  position: fixed;
  bottom: 14px;
  left: 336px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 22, 84, 0.55), rgba(20, 10, 46, 0.62));
  border: 1px solid rgba(183, 104, 255, 0.32);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(183, 104, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  color: rgba(236, 229, 247, 0.92);
  font: 500 0.78rem/1 ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  white-space: nowrap;
  user-select: none;
}
.geo-stat-coord, .geo-stat-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.geo-stat-mark {
  color: #b768ff;
  font-size: 0.9rem;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(183, 104, 255, 0.55));
}
.geo-stat-num {
  /* tabular-nums keeps digits from jittering as values change */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 5.6ch;
  text-align: right;
}
.geo-stat-sep { opacity: 0.45; padding: 0 1px; }
.geo-stat-divider {
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(183, 104, 255, 0.5), transparent);
}
.geo-stat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(183, 104, 255, 0.35);
  background: rgba(20, 10, 46, 0.55);
  color: rgba(236, 229, 247, 0.95);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition, 0.18s ease),
              border-color var(--transition, 0.18s ease),
              transform 0.1s ease;
}
.geo-stat-btn:hover {
  background: rgba(40, 22, 84, 0.85);
  border-color: rgba(183, 104, 255, 0.75);
}
.geo-stat-btn:active { transform: scale(0.94); }

.geo-map-toast {
  position: fixed;
  left: 336px;
  bottom: 60px;
  transform: translateY(8px);
  z-index: 8;
  pointer-events: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(20, 10, 46, 0.92);
  border: 1px solid rgba(183, 104, 255, 0.55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(183, 104, 255, 0.25);
  color: #fff7ec;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.geo-map-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  /* Sidebar collapses to a top bar on mobile — anchor against the left edge. */
  .geo-map-statusbar { left: 12px; gap: 8px; padding: 6px 10px; font-size: 0.72rem; }
  .geo-map-toast    { left: 12px; }
  .geo-stat-num { min-width: 5ch; }
  .geo-stat-btn { width: 24px; height: 24px; font-size: 0.85rem; }
}
.geo-map-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(183, 104, 255, 0.4);
  background: rgba(20, 10, 46, 0.85);
  color: #ece5f7;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--transition), border-color var(--transition);
}
.geo-map-btn:hover {
  background: rgba(40, 20, 80, 0.95);
  border-color: rgba(183, 104, 255, 0.85);
}
.geo-map-btn-reset { font-size: 1.1rem; }
.geo-map-btn-globe { font-size: 1.2rem; }
.geo-map-btn-flags { font-size: 1.05rem; }
/* Flag toggle is only meaningful in flat-map mode. Hide it on the globe
 * (flag fills are not rendered on the globe view). */
.geo-map-globe .geo-map-btn-flags { display: none; }

/* ===== Antique / parchment mode (flags off) — old-explorer atlas look ===== */
.geo-flags-off .geo-map image[data-iso-img] {
  display: none !important;
}
.geo-flags-off.geo-hub-grid {
  /* Warm leather/desk surround with a subtle ink-shadow vignette */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 230, 200, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(80, 50, 20, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at center, #c4a679 0%, #8c6e44 55%, #4e3520 100%) !important;
}
/* Calm aged sea — muted desaturated teal that reads "water" against parchment land. */
.geo-flags-off .geo-map .geo-map-ocean {
  fill: #88a3a8 !important;
  stroke: #45575a !important;
  stroke-width: 0.9 !important;
  vector-effect: non-scaling-stroke;
}
.geo-flags-off .geo-map path[data-iso] {
  fill: #ecd3a0 !important;
  stroke: #5c3a1a !important;
  stroke-width: 0.7 !important;
  vector-effect: non-scaling-stroke;
  filter: none !important;
  opacity: 1 !important;
}
.geo-flags-off .geo-map path[data-iso].geo-map-pending {
  fill: #d8b988 !important;
}
.geo-flags-off .geo-map path[data-iso].geo-map-covered:hover,
.geo-flags-off .geo-map path[data-iso].geo-map-covered:focus {
  fill: #fae6b5 !important;
  stroke: #2e1a0a !important;
  stroke-width: 1.2 !important;
  filter: drop-shadow(0 0 6px rgba(94, 63, 31, 0.7)) !important;
}
.geo-flags-off .geo-map path[data-contested="1"] {
  fill: rgba(160, 80, 40, 0.35) !important;
  stroke: #5c3a1a !important;
  stroke-width: 1 !important;
  stroke-dasharray: 4 2;
}
/* Spotlight markers: lose their flag, become parchment-tinted dots */
.geo-flags-off .geo-map-spotlight {
  background-image: none !important;
  background-color: #d8b988 !important;
  border-color: #5c3a1a !important;
  box-shadow: 0 0 0 1px #2e1a0a, 0 0 8px rgba(94, 63, 31, 0.5) !important;
}
.geo-flags-off .geo-map-spotlight-special {
  background-color: #c89352 !important;
  border-color: #2e1a0a !important;
}
.geo-flags-off .geo-map-spotlight-pending {
  filter: none !important;
  opacity: 0.7 !important;
}

/* Ink-styled country name labels — only visible in antique (flags-off) mode. */
.geo-country-label {
  display: none;
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  fill: #2e1a0a;
  letter-spacing: 0.05em;
  /* Halo via paint-order: a light cream stroke under the dark fill makes labels readable
     against any country tint without needing a separate drop-shadow filter. */
  paint-order: stroke fill;
  stroke: rgba(255, 240, 200, 0.85);
  stroke-width: 1.2;
  stroke-linejoin: round;
  user-select: none;
  -webkit-user-select: none;
}
.geo-flags-off .geo-country-label {
  display: block;
}

/* ===== Label editor (dev tool) ===== */
.geo-map-btn-edit { font-size: 1.05rem; opacity: 0.65; }
.geo-map-btn-edit.active {
  opacity: 1;
  background: rgba(196, 30, 58, 0.35);
  border-color: rgba(255, 100, 120, 0.9);
}
.geo-label-editor-on .geo-country-label {
  display: block !important;
  cursor: move;
  pointer-events: auto !important;
  fill: #c41e3a !important;
  stroke: rgba(255, 235, 220, 0.95) !important;
  stroke-width: 2 !important;
}
.geo-label-editor-on .geo-country-label:hover {
  filter: drop-shadow(0 0 6px rgba(255, 100, 120, 0.85));
}
.geo-label-editor-panel {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(20, 10, 46, 0.92);
  border: 1px solid rgba(255, 100, 120, 0.55);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 12;
  color: var(--text);
}
.geo-label-editor-panel[hidden] { display: none; }
.geo-label-editor-help {
  font-size: 0.78rem;
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  font-style: italic;
}
.geo-label-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.geo-label-editor-actions button {
  background: rgba(40, 20, 80, 0.85);
  border: 1px solid rgba(183, 104, 255, 0.45);
  color: #ece5f7;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.geo-label-editor-actions button:hover {
  background: rgba(60, 30, 120, 0.95);
  border-color: rgba(255, 100, 120, 0.8);
}

/* ===== Globe view ===== */
.geo-hub-grid.geo-map-globe {
  background: radial-gradient(ellipse at center, #02010a 0%, #050210 100%);
}
.geo-map-globe .geo-map .geo-map-covered:hover,
.geo-map-globe .geo-map .geo-map-covered:focus {
  filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

/* ===== Map themes — shared across flat + globe view ===================== */
.geo-theme-picker { position: relative; }
.geo-theme-menu {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  padding: 6px;
  background: rgba(20, 10, 46, 0.92);
  border: 1px solid rgba(183, 104, 255, 0.45);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  z-index: 11;
}
.geo-theme-menu[hidden] { display: none; }
.geo-theme-option {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 14px;
  text-align: left;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition);
}
.geo-theme-option:hover {
  background: rgba(183, 104, 255, 0.22);
}
.geo-theme-option.active {
  background: rgba(183, 104, 255, 0.38);
  color: #fff;
  font-weight: 600;
}
.geo-theme-option.active::before {
  content: "● ";
  color: rgba(255, 215, 100, 0.9);
}

/* ── Vector theme (default — clean, refined, dark-space backdrop) ── */
.geo-theme-vector.geo-hub-grid {
  background: radial-gradient(ellipse at center, #0a0820 0%, #050210 80%);
}
.geo-theme-vector .geo-map-ocean {
  fill: #0a1a3a;
  stroke: rgba(183, 104, 255, 0.35);
  stroke-width: 0.5;
}
.geo-theme-vector .geo-map path[data-iso] {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.geo-theme-vector .geo-map .geo-map-covered {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 0.6;
}
.geo-theme-vector .geo-map-spotlight {
  border-radius: 3px;
}

/* ── Toon theme (cel-shaded — thick black outlines, saturated ocean) ── */
.geo-theme-toon.geo-hub-grid {
  background: radial-gradient(ellipse at center, #6caedd 0%, #2e5d8a 90%);
}
.geo-theme-toon .geo-map-ocean {
  fill: #4a9be0;
  stroke: #000;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}
.geo-theme-toon .geo-map path[data-iso] {
  stroke: #000;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: contrast(1.18) saturate(1.45) brightness(1.05);
}
.geo-theme-toon .geo-map .geo-map-covered {
  stroke: #000;
  stroke-width: 2.5;
}
.geo-theme-toon .geo-map path[data-contested="1"] {
  stroke: #b8860b;
  stroke-width: 3;
  stroke-dasharray: 4 3;
}
.geo-theme-toon .geo-map-spotlight {
  border: 2.5px solid #000;
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.geo-theme-toon .geo-map-spotlight-special {
  border-color: #b8860b;
}

/* ── Pixel theme (8-bit / retro arcade — chunky borders, pixelated images) ── */
.geo-theme-pixel.geo-hub-grid {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #0c0820 0%, #06030f 100%);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.geo-theme-pixel .geo-map {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  shape-rendering: crispEdges;
}
.geo-theme-pixel .geo-map image {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.geo-theme-pixel .geo-map-ocean {
  fill: #2244aa;
  stroke: #ffd700;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.geo-theme-pixel .geo-map path[data-iso] {
  stroke: #0a0a18;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.geo-theme-pixel .geo-map .geo-map-covered {
  stroke: #ffd700;
  stroke-width: 1.5;
}
.geo-theme-pixel .geo-map .geo-map-covered:hover {
  stroke: #ffff66;
  stroke-width: 2;
  filter: brightness(1.3);
}
.geo-theme-pixel .geo-map path[data-contested="1"] {
  stroke: #ff5599;
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.geo-theme-pixel .geo-map-spotlight {
  border-radius: 0;
  border: 2px solid #ffd700;
  box-shadow: 2px 2px 0 #0a0a18;
  image-rendering: pixelated;
}
.geo-theme-pixel .geo-map-spotlight-special {
  border-color: #ff5599;
}
.geo-theme-pixel .geo-map-spotlight:hover {
  transform: scale(1.5);
  box-shadow: 3px 3px 0 #0a0a18, 0 0 12px #ffd700;
}

/* ===== Spotlight overlay — always-visible markers for tiny entities ===== */
.geo-spotlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.geo-map-spotlight {
  position: absolute;
  width: 18px;
  height: 12px;
  margin-left: -9px;
  margin-top: -6px;
  padding: 0;
  pointer-events: auto;
  background: rgba(20, 10, 46, 0.9);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(8, 4, 22, 0.95), 0 0 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s, border-color 0.12s, filter 0.12s;
}
.geo-map-spotlight:hover,
.geo-map-spotlight:focus {
  transform: scale(1.8);
  box-shadow: 0 0 0 1px rgba(8, 4, 22, 0.95), 0 0 14px rgba(183, 104, 255, 0.85);
  border-color: rgba(255, 255, 255, 1);
  z-index: 10;
  outline: none;
}
.geo-map-spotlight-pending {
  filter: saturate(0.4) brightness(0.7);
}
.geo-map-spotlight-pending:hover { filter: saturate(0.85) brightness(0.95); }
.geo-map-spotlight-special {
  border-color: rgba(255, 215, 100, 0.95);
  box-shadow: 0 0 0 1px rgba(8, 4, 22, 0.95), 0 0 10px rgba(255, 215, 100, 0.6);
}
.geo-map-spotlight-special:hover {
  border-color: rgba(255, 240, 180, 1);
  box-shadow: 0 0 0 1px rgba(8, 4, 22, 0.95), 0 0 14px rgba(255, 215, 100, 0.95);
}

/* Loading state while the 10m world map data is fetched */
.geo-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text-soft);
  background: radial-gradient(ellipse at center, #0a0820 0%, #050210 80%);
}
.geo-map-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(183, 104, 255, 0.18);
  border-top-color: rgba(183, 104, 255, 0.85);
  border-radius: 50%;
  animation: geo-spin 1s linear infinite;
}
/* Premium loading state: rotating compass sigil + pulsing aura + status. */
.geo-map-loading-aura {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(183, 104, 255, 0.32) 0%,
    rgba(183, 104, 255, 0.10) 40%,
    transparent 70%);
  filter: blur(20px);
  animation: geo-map-loading-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes geo-map-loading-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.92); }
  50%      { opacity: 1.0; transform: scale(1.05); }
}
.geo-map-loading-sigil {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  filter:
    drop-shadow(0 0 14px rgba(183, 104, 255, 0.65))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
  animation: geo-map-loading-spin 8s linear infinite;
}
.geo-map-loading-sigil svg { display: block; }
@keyframes geo-map-loading-spin {
  to { transform: rotate(360deg); }
}
.geo-map-loading-text {
  font-family: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #fff7ec 0%, #ece5f7 35%, #b768ff 65%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 24px rgba(183, 104, 255, 0.2);
}
.geo-map-loading-hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  max-width: 320px;
  text-align: center;
  line-height: 1.4;
}
@keyframes geo-spin {
  to { transform: rotate(360deg); }
}
.geo-map-loading-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 60%;
}
@media (max-width: 720px) {
  .geo-hub-grid { height: calc(100vh - 60px); min-height: 360px; }
  body[data-view="geo"] .view-geo .geo-hero { padding: 12px 12px 32px; }
  body[data-view="geo"] .geo-hero-card { gap: 12px; padding: 8px 14px 10px; }
  body[data-view="geo"] .geo-hero-mark { width: 28px; height: 28px; }
  body[data-view="geo"] .geo-hero-mark svg { width: 22px; height: 22px; }
  body[data-view="geo"] .geo-hero h1 { font-size: 1.5rem; letter-spacing: 0.05em; }
  body[data-view="geo"] .geo-hero-flourish { display: none; }
  body[data-view="geo"] .geo-hero .subtitle { font-size: 0.76rem; }
}

.geo-country-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
  text-align: left;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.55), rgba(20, 10, 46, 0.55));
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 14px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.geo-country-card:hover {
  border-color: rgba(183, 104, 255, 0.65);
  box-shadow: 0 0 28px rgba(183, 104, 255, 0.25), 0 14px 38px rgba(8, 4, 22, 0.5);
  transform: translateY(-3px);
}

/* Flag area — the visual hero of each card */
.geo-flag {
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.geo-flag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8, 4, 22, 0.55));
  pointer-events: none;
}
.geo-flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}
.geo-flag-all {
  font-size: 4rem;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 50%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(183, 104, 255, 0.5));
}

.geo-country-body {
  padding: 14px 18px 6px;
}
.geo-country-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.geo-country-desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-soft);
  font-style: italic;
}
.geo-country-meta {
  margin: 6px 18px 0;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid rgba(183, 104, 255, 0.12);
}
.geo-country-best { color: rgba(183, 104, 255, 0.85); }

.geo-stage-flag {
  width: 28px;
  height: 19px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
}

/* ===== Quiz Stage — wrapper around the running widget =================== */
.quiz-stage {
  max-width: 720px;
  margin: 16px auto 48px;
}
.quiz-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 14px;
}
.quiz-back {
  background: transparent;
  border: 1px solid rgba(183, 104, 255, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.quiz-back:hover {
  background: rgba(183, 104, 255, 0.15);
  border-color: rgba(183, 104, 255, 0.7);
  color: var(--text);
}
.quiz-stage-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.quiz-stage-icon {
  font-size: 1.2rem;
  background: linear-gradient(135deg, #b768ff, #ff6b9d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-stage-cat[data-cat-tone="history"]   .quiz-stage-icon { background: linear-gradient(135deg, #ffd166, #ff9933); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="money"]     .quiz-stage-icon { background: linear-gradient(135deg, #b8ff3a, #6ec96e); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="body"]      .quiz-stage-icon { background: linear-gradient(135deg, #00f0ff, #66ddaa); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="media"]     .quiz-stage-icon { background: linear-gradient(135deg, #ff8a2b, #ff4e88); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="pharma"]    .quiz-stage-icon { background: linear-gradient(135deg, #ff2db5, #c060ff); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="inner"]     .quiz-stage-icon { background: linear-gradient(135deg, #ff6b9d, #ff9966); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="parenting"] .quiz-stage-icon { background: linear-gradient(135deg, #ffe066, #ffa66c); -webkit-background-clip: text; background-clip: text; }
.quiz-stage-cat[data-cat-tone="mind"]      .quiz-stage-icon { background: linear-gradient(135deg, #80b3ff, #c060ff); -webkit-background-clip: text; background-clip: text; }

/* Progress bar at top of widget */
.dc-progress-bar {
  height: 4px;
  background: rgba(183, 104, 255, 0.12);
  border-radius: 999px;
  margin: 0 0 18px;
  overflow: hidden;
}
.dc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b768ff, #ff6b9d);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(183, 104, 255, 0.5);
}

.dc-cta {
  display: block;
  max-width: 640px;
  margin: 18px auto 44px;
  padding: 22px 22px;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.55), rgba(20, 10, 46, 0.6));
  border: 1px solid rgba(183, 104, 255, 0.32);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.dc-cta:hover {
  border-color: rgba(183, 104, 255, 0.7);
  box-shadow: 0 0 24px rgba(183, 104, 255, 0.25);
  transform: translateY(-2px);
}
.dc-cta-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.dc-cta-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.dc-cta-sub {
  display: block;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.dc-tier {
  margin: 22px auto 14px;
  padding: 18px 22px;
  max-width: 480px;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.55), rgba(20, 10, 46, 0.6));
  border: 1px solid rgba(183, 104, 255, 0.35);
  border-radius: var(--radius-sm);
  text-align: center;
  animation: dc-tier-in 480ms ease;
}
@keyframes dc-tier-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dc-tier-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.dc-tier-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.dc-tier-name[data-tier="witness"]   { background: linear-gradient(135deg, #b8ff3a 0%, #00f0ff 100%); -webkit-background-clip: text; background-clip: text; }
.dc-tier-name[data-tier="sovereign"] { background: linear-gradient(135deg, #c060ff 0%, #ff6b9d 100%); -webkit-background-clip: text; background-clip: text; }
.dc-tier-name[data-tier="asleep"]    { background: linear-gradient(135deg, #a0a0c0 0%, #6060a0 100%); -webkit-background-clip: text; background-clip: text; }
.dc-tier-desc {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.55;
  font-style: italic;
}
.dc-tier-best {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.dc-audio-control {
  position: absolute;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  opacity: 0.6;
  transition: opacity var(--transition);
}
.dc-audio-control:hover,
.dc-audio-control:focus-within {
  opacity: 1;
}
.dc-audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 999px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.dc-audio-toggle:hover {
  border-color: rgba(183, 104, 255, 0.55);
  color: var(--text);
}
.dc-audio-toggle.active {
  background: rgba(183, 104, 255, 0.2);
  border-color: rgba(183, 104, 255, 0.7);
  color: var(--text);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.3);
}
.dc-audio-icon { color: currentColor; }
.dc-audio-icon-on { display: none; }
.dc-audio-toggle.active .dc-audio-icon-off { display: none; }
.dc-audio-toggle.active .dc-audio-icon-on { display: inline; }
.dc-audio-label { display: none; }
.dc-audio-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(183, 104, 255, 0.25);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.dc-audio-volume:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dc-audio-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b768ff, #ff6b9d);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(183, 104, 255, 0.5);
}
.dc-audio-volume::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #b768ff, #ff6b9d);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(183, 104, 255, 0.5);
}

.dc-size-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 0 18px;
}
.dc-size-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dc-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dc-size-btn {
  padding: 6px 12px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 999px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.dc-size-btn:hover {
  border-color: rgba(183, 104, 255, 0.55);
  color: var(--text);
}
.dc-size-btn.active {
  background: rgba(183, 104, 255, 0.2);
  border-color: rgba(183, 104, 255, 0.7);
  color: var(--text);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.3);
}
.dc-statement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text);
  min-height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 4px;
}
.dc-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 0;
}
.dc-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.dc-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.55);
}
.dc-btn:disabled { cursor: default; }
.dc-btn.right {
  color: var(--text);
  background: rgba(60, 130, 70, 0.45);
  border-color: rgba(140, 220, 150, 0.6);
}
.dc-btn.wrong {
  color: var(--text);
  background: rgba(150, 50, 50, 0.45);
  border-color: rgba(255, 130, 130, 0.6);
}
.dc-feedback {
  margin: 18px auto 0;
  max-width: 540px;
  min-height: 4em;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 300ms ease;
}
.dc-feedback.show { opacity: 1; }
.dc-feedback strong { color: var(--text); margin-right: 4px; }
.dc-feedback.good   { color: rgba(190, 230, 200, 0.95); }
.dc-feedback.bad    { color: rgba(255, 200, 180, 0.95); }
.dc-feedback.ok     { color: var(--text-soft); }
.dc-score {
  margin: 6px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}
.dc-next, .dc-replay {
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.85), rgba(255, 107, 157, 0.65));
  border: 1px solid rgba(183, 104, 255, 0.5);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 8px 26px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 14px;
  display: none;
  transition: box-shadow var(--transition), transform var(--transition);
}
.dc-next.visible, .dc-replay.visible { display: inline-block; }
.dc-next:hover, .dc-replay:hover {
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.35);
  transform: translateY(-1px);
}

/* ============ Witness eye (Witness page) ============ */
.witness {
  max-width: 520px;
  margin: 18px auto 44px;
  text-align: center;
}
.wt-eye {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 28px rgba(183, 104, 255, 0.18));
}
.wt-sclera { fill: rgba(245, 240, 255, 0.96); }
.wt-outline {
  fill: none;
  stroke: rgba(20, 10, 46, 0.85);
  stroke-width: 1.6;
}
/* No transition — pupil tracks the cursor in real time. */
.wt-lid-top, .wt-lid-bottom {
  transition: transform 110ms ease-in;
}
.wt-eye.blinking .wt-lid-top    { transform: translateY(200px); }
.wt-eye.blinking .wt-lid-bottom { transform: translateY(-100px); }
.wt-caption {
  margin: 18px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .wt-iris, .wt-pupil, .wt-highlight,
  .wt-lid-top, .wt-lid-bottom { transition: none; }
}

/* ============ Doorway (Death page) — full-viewport background ============ */
.doorway-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 400ms ease;
}
.doorway-bg.ready { opacity: 1; }
.view-death { position: relative; }
.view-death > .hero,
.view-death > .pairs-grid,
.view-death > .pairs-closing,
.view-death > .atlas-books-section,
.view-death > .dw-caption {
  position: relative;
  z-index: 1;
}
/* Dark glow on death-page text so it stays readable against the bright
   doorway light glowing behind. The h1 gets a lighter shadow since its
   thick strokes would otherwise look smudged. */
.view-death h2,
.view-death p,
.view-death .subtitle,
.view-death .manifesto-second,
.view-death .true,
.view-death .false,
.view-death .true-header,
.view-death .false-header,
.view-death .pairs-final,
.view-death .atlas-books-h,
.view-death .atlas-books-intro,
.view-death .dw-caption {
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.85),
    0 0 16px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.9);
}
.dw-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 50%,
    rgba(255, 250, 220, 1) 0%,
    rgba(255, 225, 160, 0.85) 22%,
    rgba(255, 180, 110, 0.45) 48%,
    rgba(255, 130, 70, 0.18) 70%,
    transparent 90%);
  opacity: 0;
  transform: translateZ(-300px) scale(0.35);
  transform-origin: 50% 50%;
  transition: opacity 600ms linear, transform 600ms linear;
  filter: blur(8px);
}
.dw-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 30%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, #3a2360 0%, #1c0e3a 50%, #0a0418 100%);
  transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.04),
    inset 0 0 120px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.dw-door::before {
  content: "";
  position: absolute;
  inset: 6% 18%;
  border: 2px solid rgba(255, 200, 230, 0.12);
  border-radius: 60% 60% 0 0 / 10% 10% 0 0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}
/* Knob — single sphere pushed dramatically forward in Z so the depth is
   obvious from any angle. Strong cast shadow offset below the knob on the
   door surface sells the protrusion even when the door is closed. */
.dw-knob {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%,
    #fff8d8 0%,
    #f4cd88 16%,
    #c89a55 40%,
    #7d4d22 72%,
    #2e1a08 100%);
  box-shadow:
    0 0 22px rgba(255, 210, 140, 0.7),
    inset -6px -7px 9px rgba(0, 0, 0, 0.6),
    inset 4px 4px 6px rgba(255, 250, 215, 0.85);
  transform: translateZ(70px);
}
/* Cast shadow below the knob — offset so even with no rotation the knob
   appears to hover off the door surface. Sits flat on the door (z=0). */
.dw-door .dw-knob-shadow {
  position: absolute;
  top: calc(50% + 4px);
  width: 52px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    transparent 100%);
  filter: blur(6px);
}
.dw-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(90deg,
    rgba(255, 245, 200, 1) 0%,
    rgba(255, 200, 130, 0.85) 50%,
    rgba(200, 130, 80, 0.5) 100%);
  box-shadow:
    0 0 40px rgba(255, 210, 140, 0.7),
    0 0 80px rgba(255, 180, 100, 0.4);
}
.dw-door-left {
  left: 0;
  transform-origin: left center;
}
.dw-door-left .dw-knob        { right: calc(12% - 20px); }
.dw-door-left .dw-knob-shadow { right: calc(12% - 26px); }
.dw-door-left .dw-edge {
  right: 0;
  transform-origin: right center;
  transform: rotateY(-90deg);
}
.dw-door-right {
  right: 0;
  transform-origin: right center;
}
.dw-door-right .dw-knob        { left: calc(12% - 20px); }
.dw-door-right .dw-knob-shadow { left: calc(12% - 26px); }
.dw-door-right .dw-edge {
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg,
    rgba(200, 130, 80, 0.5) 0%,
    rgba(255, 200, 130, 0.85) 50%,
    rgba(255, 245, 200, 1) 100%);
}
.dw-caption {
  margin: 48px auto 8px;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .dw-door, .dw-light { transition: none; }
}

/* ============ Counterfeit Power Pyramid (Power page) ============ */
.power-pyramid {
  max-width: 1000px;
  margin: 56px auto 44px;
  padding: 0 16px;
  text-align: center;
}
.pp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 6px;
}
.pp-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0 0 22px;
  font-style: italic;
}
.pp-stage {
  position: relative;
  width: 100%;
}
.pp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.pp-line {
  stroke: rgba(180, 140, 80, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  opacity: 0;
  transition: opacity 700ms ease, stroke 200ms ease, stroke-width 200ms ease;
}
.pp-line.drawn { opacity: 0.5; }
.pp-line.hover { stroke: rgba(255, 210, 130, 0.85); stroke-width: 1.5; opacity: 1; }
.pp-line.active { stroke: rgba(255, 220, 140, 1); stroke-width: 2; opacity: 1; stroke-dasharray: none; }

.pp-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.pp-owner {
  min-width: 150px;
  padding: 14px 18px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(60, 30, 80, 0.85) 0%,
    rgba(30, 10, 50, 0.95) 100%);
  border: 1px solid rgba(255, 200, 130, 0.35);
  box-shadow:
    0 0 22px rgba(255, 180, 90, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.45);
  position: relative;
}
.pp-o-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  color: rgba(255, 230, 180, 0.95);
  letter-spacing: 0.05em;
}
.pp-o-aum {
  font-size: 0.78rem;
  color: rgba(220, 200, 170, 0.7);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

.pp-mid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 44px;
  max-width: 720px;
}
.pp-corp {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  padding: 12px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}
.pp-corp:hover {
  background: rgba(40, 26, 60, 0.85);
  border-color: rgba(255, 200, 130, 0.4);
  color: var(--text);
}
.pp-corp.active {
  background: rgba(80, 50, 30, 0.9);
  border-color: rgba(255, 220, 140, 0.9);
  color: rgba(255, 245, 215, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}

.pp-you {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 8px 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--text-dim);
  letter-spacing: 0.18em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 8px;
}

.pp-details {
  max-width: 380px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(20, 14, 30, 0.85);
  border: 1px solid rgba(255, 200, 130, 0.4);
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.pp-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pp-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.pp-d-row, .pp-d-total {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  padding: 3px 0;
  color: var(--text-soft);
}
.pp-d-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 220, 140, 1);
  font-weight: 600;
}

.pp-footer {
  max-width: 640px;
  margin: 32px auto 0;
  font-size: 0.96rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .pp-mid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-owner { min-width: 120px; padding: 10px 14px; }
  .pp-o-name { font-size: 1.05rem; }
  .pp-corp { font-size: 0.78rem; padding: 10px 6px; }
}
@media (max-width: 420px) {
  .pp-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-line, .pp-corp, .pp-details { transition: none; }
}

/* ============ Media Pyramid (Media page) ============ */
.media-pyramid {
  max-width: 1100px;
  margin: 40px auto 32px;
  padding: 0 16px;
  text-align: center;
}
.mp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 6px;
}
.mp-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0 0 22px;
  font-style: italic;
}
.mp-stage {
  position: relative;
  width: 100%;
}
.mp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.mp-line {
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  opacity: 0;
  transition: opacity 700ms ease, stroke-width 200ms ease;
}
.mp-line.drawn { opacity: 0.35; }
.mp-line.hover { opacity: 0.85; stroke-width: 1.5; }
.mp-line.active { opacity: 1; stroke-width: 2; stroke-dasharray: none; }

.mp-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 48px;
}
.mp-parent {
  appearance: none;
  padding: 10px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg,
    rgba(30, 18, 50, 0.85) 0%,
    rgba(15, 8, 30, 0.95) 100%);
  border: 1px solid var(--c, rgba(255, 255, 255, 0.15));
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 0 0 var(--c);
}
.mp-parent span {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.mp-parent:hover {
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.95), rgba(20, 12, 40, 1));
  transform: translateY(-2px);
}
.mp-parent.active {
  background: linear-gradient(180deg, rgba(50, 30, 80, 0.95), rgba(25, 14, 50, 1));
  box-shadow: 0 0 18px var(--c), 0 6px 14px rgba(0, 0, 0, 0.5);
  color: var(--text);
  transform: translateY(-2px);
}

.mp-mid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}
.mp-outlet {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  padding: 10px 6px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
  line-height: 1.2;
}
.mp-outlet:hover {
  background: rgba(40, 26, 60, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}
.mp-outlet.active {
  background: rgba(60, 38, 90, 0.95);
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 245, 215, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.mp-outlet.highlight {
  background: rgba(50, 32, 75, 0.92);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.mp-details {
  max-width: 560px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(20, 14, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.mp-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mp-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.mp-d-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 3px 0;
  color: var(--text-soft);
}
.mp-d-sib {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.mp-d-sib span {
  color: var(--text-dim);
  font-style: italic;
}

.mp-footer {
  max-width: 720px;
  margin: 32px auto 0;
  font-size: 0.96rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
}

@media (max-width: 820px) {
  .mp-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-mid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mp-parent { font-size: 0.78rem; padding: 8px 6px; }
  .mp-parent span { font-size: 0.62rem; }
}
@media (max-width: 480px) {
  .mp-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-outlet { font-size: 0.72rem; padding: 8px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-line, .mp-outlet, .mp-parent, .mp-details { transition: none; }
}

/* ============ Money Clock (Money page) ============ */
.moneyclock {
  max-width: 760px;
  margin: 48px auto 36px;
  padding: 28px 24px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 180, 100, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(28, 20, 14, 0.85), rgba(14, 10, 8, 0.95));
  border: 1px solid rgba(255, 200, 140, 0.18);
  text-align: center;
}
.mc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 230, 180, 1);
  margin: 0 0 4px;
}
.mc-hint {
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 0 0 26px;
  font-style: italic;
}
.mc-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mc-side { min-width: 240px; }
.mc-label {
  font-size: 0.84rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mc-val {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 245, 215, 1);
  font-variant-numeric: tabular-nums;
}
.mc-val-now { color: rgba(255, 170, 100, 1); }
.mc-eq {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--text-dim);
  font-weight: 300;
}
.mc-sub {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 0.92rem;
  color: var(--text-soft);
  font-style: italic;
  line-height: 1.5;
}

.mc-since {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 200, 140, 0.12);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 auto 28px;
  max-width: 540px;
  text-align: left;
}
.mc-since-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text-soft);
  gap: 16px;
}
.mc-since-row + .mc-since-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.mc-since-row > span:last-child {
  font-family: 'Courier New', Courier, monospace;
  color: rgba(255, 200, 140, 1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mc-table {
  margin: 0 auto;
  max-width: 540px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 140, 0.12);
}
.mc-tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  font-size: 0.92rem;
  color: var(--text-soft);
}
.mc-tr > span:nth-child(2),
.mc-tr > span:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', Courier, monospace;
}
.mc-tr > span:nth-child(3) {
  color: rgba(255, 170, 100, 1);
}
.mc-tr + .mc-tr {
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.mc-th {
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.mc-th > span:nth-child(2),
.mc-th > span:nth-child(3) {
  color: var(--text-dim);
}

.mc-footer {
  margin: 28px auto 0;
  max-width: 620px;
  font-size: 0.94rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.6;
}

@media (max-width: 560px) {
  .mc-val { font-size: 1.4rem; }
  .mc-eq { display: none; }
  .mc-side { min-width: 0; width: 100%; }
}

/* ============ Timeline (History page) ============ */
.timeline {
  max-width: 1200px;
  margin: 48px auto 32px;
  padding: 0 16px;
}
.tl-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
  text-align: center;
}
.tl-hint {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0 0 18px;
  font-style: italic;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.tl-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.tl-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--c, rgba(255, 255, 255, 0.2));
  color: var(--text-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.tl-chip:hover { color: var(--text); }
.tl-chip.active {
  background: var(--c);
  color: #0a0a0a;
  font-weight: 600;
}

.tl-zoom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tl-zoom-btn {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 14, 30, 0.65);
  color: var(--text-soft);
  font-size: 1.1rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-zoom-btn:hover {
  background: rgba(40, 26, 60, 0.85);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.tl-zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tl-zoom-label {
  font-family: 'Courier New', monospace;
  color: var(--text-soft);
  font-size: 0.86rem;
  min-width: 36px;
  text-align: center;
}
.tl-zoom-reset { font-size: 0.95rem; margin-left: 6px; }

.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.tl-scroll::-webkit-scrollbar { height: 10px; }
.tl-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}
.tl-canvas {
  position: relative;
  min-width: 1100px;
  height: 240px;
}
.tl-canvas[data-zoom="2"] { min-width: 2200px; }
.tl-canvas[data-zoom="4"] { min-width: 4400px; }
.tl-canvas[data-zoom="8"] { min-width: 8800px; }
.tl-canvas[data-zoom="16"] { min-width: 17600px; }
.tl-bands {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tl-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
}
.tl-band:last-child { border-right: 1px dashed rgba(255, 255, 255, 0.08); }
.tl-band-ice  { background: linear-gradient(180deg, rgba(70, 100, 140, 0.10), transparent); }
.tl-band-ant  { background: linear-gradient(180deg, rgba(200, 160, 80, 0.10), transparent); }
.tl-band-med  { background: linear-gradient(180deg, rgba(140, 80, 80, 0.10), transparent); }
.tl-band-emod { background: linear-gradient(180deg, rgba(140, 110, 70, 0.10), transparent); }
.tl-band-mod  { background: linear-gradient(180deg, rgba(80, 140, 100, 0.10), transparent); }
.tl-band-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}
.tl-yearmarks {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  height: 18px;
  z-index: 1;
}
.tl-yearmark {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.tl-yearmark span {
  display: block;
  padding-top: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 4px;
}
.tl-track {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  z-index: 1;
}
.tl-dots {
  position: absolute;
  top: 36px;
  bottom: 60px;
  left: 0;
  right: 0;
  z-index: 2;
}
.tl-dot {
  position: absolute;
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: opacity 160ms ease, transform 160ms ease;
}
.tl-dot::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 12px var(--c);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.tl-dot-title {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  max-width: 110px;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.7);
  padding: 2px 5px;
  border-radius: 3px;
  white-space: normal;
  opacity: 0;
  transition: opacity 160ms ease;
}
.tl-dot:hover {
  transform: translate(-50%, -2px);
  z-index: 5;
}
.tl-dot:hover .tl-dot-title,
.tl-dot.active .tl-dot-title {
  opacity: 1;
  color: var(--text);
}
.tl-dot:hover::after { transform: scale(1.3); }
.tl-dot.active::after {
  transform: scale(1.5);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.8),
    0 0 20px var(--c),
    0 0 40px var(--c);
}
.tl-dot.active .tl-dot-title { font-weight: 600; }
.tl-dot.dim { opacity: 0.12; }
.tl-dot.dim:hover { opacity: 0.5; }
/* When a category filter is active (not "All"), show titles for matching dots. */
.timeline.tl-filtered .tl-dot:not(.dim) .tl-dot-title {
  opacity: 1;
  color: var(--text);
}

.tl-placeholder {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 8px;
}

.tl-details {
  margin-top: 24px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 22px 26px;
  border-radius: 12px;
  background: rgba(20, 14, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.tl-details.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tl-d-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
.tl-d-year {
  font-family: 'Courier New', monospace;
  font-size: 1.0rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.tl-d-cat {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.tl-d-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 18px;
}
.tl-d-block {
  margin-bottom: 14px;
}
.tl-d-block:last-child { margin-bottom: 0; }
.tl-d-block-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--text-dim);
}
.tl-d-block-body {
  font-size: 0.96rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.tl-d-official .tl-d-block-label { color: #94a3b8; }
.tl-d-hidden   .tl-d-block-label { color: #fcd34d; }
.tl-d-hidden   .tl-d-block-body  { color: var(--text); }

@media (max-width: 720px) {
  .tl-canvas { min-width: 1000px; }
  .tl-dot-title { font-size: 0.6rem; max-width: 80px; }
}

/* ============ Food + Pharma pyramids — shared layout ============
   These reuse the Media pyramid pattern (color-coded parents fanning lines
   down to a grid of recognizable children). Two prefixes (fp-, rp-) keep
   the two widgets independent. */
.food-pyramid, .pharma-pyramid {
  max-width: 1100px;
  margin: 40px auto 32px;
  padding: 0 16px;
  text-align: center;
}
.fp-title, .rp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0 0 6px;
}
.fp-hint, .rp-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin: 0 0 22px;
  font-style: italic;
}
.fp-stage, .rp-stage {
  position: relative;
  width: 100%;
}
.fp-svg, .rp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.fp-line, .rp-line {
  stroke-width: 1;
  stroke-dasharray: 4 3;
  fill: none;
  opacity: 0;
  transition: opacity 700ms ease, stroke-width 200ms ease;
}
.fp-line.drawn, .rp-line.drawn { opacity: 0.35; }
.fp-line.hover, .rp-line.hover { opacity: 0.85; stroke-width: 1.5; }
.fp-line.active, .rp-line.active { opacity: 1; stroke-width: 2; stroke-dasharray: none; }

.fp-top, .rp-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 48px;
}
.fp-parent, .rp-parent {
  appearance: none;
  padding: 10px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg,
    rgba(30, 18, 50, 0.85) 0%,
    rgba(15, 8, 30, 0.95) 100%);
  border: 1px solid var(--c, rgba(255, 255, 255, 0.15));
  color: var(--text-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fp-parent span, .rp-parent span {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.fp-parent:hover, .rp-parent:hover {
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.95), rgba(20, 12, 40, 1));
  transform: translateY(-2px);
}
.fp-parent.active, .rp-parent.active {
  background: linear-gradient(180deg, rgba(50, 30, 80, 0.95), rgba(25, 14, 50, 1));
  box-shadow: 0 0 18px var(--c), 0 6px 14px rgba(0, 0, 0, 0.5);
  color: var(--text);
  transform: translateY(-2px);
}

.fp-mid, .rp-mid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
}
.fp-brand, .rp-prod {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  padding: 10px 6px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
  line-height: 1.2;
}
.fp-brand:hover, .rp-prod:hover {
  background: rgba(40, 26, 60, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}
.fp-brand.active, .rp-prod.active {
  background: rgba(60, 38, 90, 0.95);
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 245, 215, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.fp-brand.highlight, .rp-prod.highlight {
  background: rgba(50, 32, 75, 0.92);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.fp-details, .rp-details {
  max-width: 600px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(20, 14, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.fp-details.visible, .rp-details.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.fp-d-name, .rp-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.fp-d-row, .rp-d-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  padding: 3px 0;
  color: var(--text-soft);
}
.fp-d-sib, .rp-d-sib {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.fp-d-sib span, .rp-d-sib span {
  color: var(--text-dim);
  font-style: italic;
}

.fp-footer, .rp-footer {
  max-width: 720px;
  margin: 32px auto 0;
  font-size: 0.96rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.55;
}

@media (max-width: 820px) {
  .fp-top, .rp-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-mid, .rp-mid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp-parent, .rp-parent { font-size: 0.78rem; padding: 8px 6px; }
  .fp-parent span, .rp-parent span { font-size: 0.6rem; }
}
@media (max-width: 480px) {
  .fp-top, .rp-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-mid, .rp-mid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-brand, .rp-prod { font-size: 0.72rem; padding: 8px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-line, .fp-brand, .fp-parent, .fp-details,
  .rp-line, .rp-prod, .rp-parent, .rp-details { transition: none; }
}

/* ============ Brainwaves selector (Mind page) ============ */
.brainwaves {
  max-width: 880px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 12, 32, 0.85), rgba(10, 6, 20, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.bw-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.bw-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 620px;
  line-height: 1.5;
}
.bw-bands {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.bw-band {
  appearance: none;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--c, rgba(255, 255, 255, 0.15));
  color: var(--text-soft);
  padding: 12px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.bw-band:hover {
  background: rgba(20, 14, 30, 0.7);
  transform: translateY(-2px);
}
.bw-band.active {
  background: linear-gradient(180deg, rgba(40, 24, 70, 0.95), rgba(20, 12, 40, 1));
  box-shadow: 0 0 22px var(--c), inset 0 0 0 1px var(--c);
  color: var(--text);
}
.bw-b-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--c);
  letter-spacing: 0.05em;
}
.bw-b-hz {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  color: var(--text-soft);
}
.bw-b-tag {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-style: italic;
}

.bw-wave {
  display: block;
  width: 100%;
  height: 140px;
  margin: 8px 0 18px;
}

.bw-current {
  max-width: 560px;
  margin: 0 auto 22px;
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.bw-current-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bw-current-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  transition: color 300ms ease;
}
.bw-current-hz {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: var(--text-soft);
}
.bw-current-desc {
  font-size: 0.96rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.bw-audio {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-soft);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.bw-audio:hover {
  background: rgba(40, 26, 60, 0.85);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.bw-audio.on {
  background: rgba(80, 50, 30, 0.85);
  border-color: rgba(255, 220, 140, 0.7);
  color: rgba(255, 245, 215, 1);
}

@media (max-width: 600px) {
  .bw-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bw-b-name { font-size: 0.95rem; }
  .bw-b-tag { font-size: 0.62rem; }
}
@media (max-width: 380px) {
  .bw-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .bw-band, .bw-audio { transition: none; }
}

/* ============ Biofield (Body page) ============ */
.biofield {
  max-width: 760px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.bf-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.bf-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 620px;
  line-height: 1.5;
}
.bf-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.bf-control-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bf-control-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
}
.bf-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--c, rgba(255, 255, 255, 0.2));
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  opacity: 0.5;
}
.bf-toggle.active {
  background: var(--c);
  color: #0a0a0a;
  opacity: 1;
  font-weight: 600;
}

.bf-stage {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  position: relative;
}
.bf-svg {
  display: block;
  width: 100%;
  height: auto;
}
.bf-aura {
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
  transform-origin: 50% 41.6%;
  animation: bf-pulse 6s ease-in-out infinite;
}
.bf-aura.bf-aura-mental    { animation-delay: -1s; }
.bf-aura.bf-aura-emotional { animation-delay: -2s; }
.bf-aura.bf-aura-etheric   { animation-delay: -3s; }
.bf-aura.bf-aura-physical  { animation-delay: -4s; }
.bf-aura:hover    { opacity: 1; transform: scale(1.02); }
.bf-aura.active   { opacity: 1; filter: brightness(1.4); }

@keyframes bf-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

.bf-figure {
  fill: rgba(255, 250, 230, 0.92);
  stroke: rgba(255, 220, 160, 0.4);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 10px rgba(255, 220, 160, 0.5));
  pointer-events: none;
}
.bf-chakra {
  cursor: pointer;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px currentColor);
  transition: r 200ms ease, stroke-width 200ms ease;
}
.bf-chakra:hover  { stroke-width: 2.5; }
.bf-chakra.active {
  stroke-width: 3;
  filter: drop-shadow(0 0 12px currentColor);
}

.bf-details {
  max-width: 560px;
  margin: 22px auto 0;
  padding: 16px 20px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.bf-details.visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.bf-d-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 2px solid;
}
.bf-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
.bf-d-tag {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.bf-d-body {
  font-size: 0.96rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bf-aura { animation: none; transition: none; }
  .bf-chakra { transition: none; }
}

/* ============ Sovereignty Radar ============ */
.radar {
  max-width: 960px;
  margin: 44px auto 32px;
  padding: 26px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.rd-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.rd-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 680px;
  line-height: 1.5;
}
.rd-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.rd-chart {
  position: relative;
  text-align: center;
}
.rd-svg {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(120, 80, 200, 0.25));
}
.rd-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 1;
}
.rd-ring[data-level="10"] { stroke: rgba(255, 255, 255, 0.18); }
.rd-spoke {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.rd-label {
  font-size: 13px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: filter 160ms ease;
}
.rd-label:hover { filter: brightness(1.4); }
.rd-poly {
  fill: rgba(167, 139, 250, 0.18);
  stroke: rgba(167, 139, 250, 0.85);
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: points 280ms ease, fill 280ms ease;
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.4));
}
.rd-dot {
  filter: drop-shadow(0 0 4px currentColor);
  transition: cx 220ms ease, cy 220ms ease;
}
.rd-summary {
  margin-top: 8px;
}
.rd-score-block {
  font-family: 'Courier New', monospace;
  color: rgba(167, 139, 250, 1);
}
.rd-score {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rd-score-of {
  font-size: 1rem;
  color: var(--text-dim);
}
.rd-verdict {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-style: italic;
  margin-top: 2px;
}

.rd-sliders {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-slider-row {
  display: grid;
  grid-template-columns: 85px 1fr 30px;
  align-items: center;
  gap: 10px;
}
.rd-slider-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--c, var(--text-soft));
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: filter 160ms ease;
}
.rd-slider-label::after {
  content: "ⓘ";
  position: relative;
  margin-left: 4px;
  font-size: 0.7em;
  opacity: 0.45;
  transition: opacity 160ms ease;
}
.rd-slider-label:hover { filter: brightness(1.3); }
.rd-slider-label:hover::after { opacity: 1; }
.rd-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.rd-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px var(--c), 0 0 16px var(--c);
  cursor: pointer;
}
.rd-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px var(--c);
  cursor: pointer;
}
.rd-slider-val {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  color: var(--c, var(--text-soft));
  text-align: right;
}

.rd-info {
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  min-height: 70px;
  transition: border-color 220ms ease, background 220ms ease;
}
.rd-info.active {
  border-color: var(--c, rgba(255, 255, 255, 0.3));
  background: rgba(20, 14, 30, 0.7);
}
.rd-info-empty {
  font-size: 0.86rem;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}
.rd-info.active .rd-info-empty { display: none; }
.rd-info-content { display: none; }
.rd-info.active .rd-info-content { display: block; }
.rd-info-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}
.rd-info-body {
  font-size: 0.96rem;
  color: var(--text-soft);
  line-height: 1.6;
}

.rd-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.rd-reset, .rd-export {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-soft);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rd-reset:hover, .rd-export:hover {
  background: rgba(40, 26, 60, 0.85);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.rd-export {
  border-color: rgba(167, 139, 250, 0.5);
  color: rgba(167, 139, 250, 0.95);
}
.rd-export:hover {
  background: rgba(167, 139, 250, 0.18);
  color: rgba(220, 200, 255, 1);
  border-color: rgba(167, 139, 250, 1);
}

.rd-footer {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 0.86rem;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .rd-layout { grid-template-columns: 1fr; }
  .rd-svg { max-width: 360px; }
  .rd-slider-row { grid-template-columns: 95px 1fr 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-poly, .rd-dot { transition: none; }
}

/* ============ Life in Weeks (Time page) ============ */
.lifeweeks {
  max-width: 1100px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lw-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.lw-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 700px;
  text-align: center;
  line-height: 1.5;
}
.lw-input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
.lw-input input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}
.lw-input input::-webkit-calendar-picker-indicator { filter: invert(0.7); }
.lw-prompt {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.86rem;
  margin: 10px 0 16px;
}
.lw-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 20px;
}
.lw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 110px;
}
.lw-stat-num {
  font-family: 'Courier New', monospace;
  color: rgba(167, 139, 250, 1);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
.lw-stat-lbl {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.lw-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}
.lw-row {
  display: flex;
  gap: 1px;
  align-items: center;
}
.lw-tick {
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  color: var(--text-dim);
  width: 22px;
  text-align: right;
  margin-right: 4px;
}
.lw-row:not(:nth-child(10n+1)) .lw-tick { visibility: hidden; }
.lw-dot {
  width: 100%;
  flex: 1;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1px;
  min-width: 6px;
}
.lw-dot.filled.phase-child  { background: #fde047; }
.lw-dot.filled.phase-young  { background: #f59e0b; }
.lw-dot.filled.phase-middle { background: #ef4444; }
.lw-dot.filled.phase-elder  { background: #a855f7; }
.lw-dot.filled.phase-wise   { background: #6366f1; }
.lw-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--text-dim);
  font-style: italic;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* ============ The Onion (Self page) ============ */
.onion {
  max-width: 880px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.on-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.on-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 18px;
  max-width: 640px;
  line-height: 1.5;
}
.on-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.on-svg {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  height: auto;
  cursor: pointer;
}
.on-ring {
  cursor: pointer;
  transition: opacity 380ms ease, transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 200px 200px;
}
.on-ring.peeled {
  opacity: 0;
  transform: scale(1.4);
  pointer-events: none;
}
.on-ring-label {
  fill: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Cormorant Garamond', serif;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: opacity 280ms ease;
}
.on-ring-label.peeled { opacity: 0; }
.on-core {
  fill: rgba(255, 245, 215, 0);
  font-size: 32px;
  letter-spacing: 0.2em;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  transition: fill 600ms ease;
  pointer-events: none;
}
.on-core.visible {
  fill: rgba(255, 245, 215, 1);
  filter: drop-shadow(0 0 12px rgba(255, 220, 160, 0.7));
}
.on-details {
  text-align: left;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  min-height: 200px;
}
.on-d-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 600;
}
.on-d-body {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.on-d-hint {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}
.on-peeled {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  min-height: 30px;
}
.on-peel-chip {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--c);
  color: var(--c);
  opacity: 0.6;
}
.on-reset {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-soft);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: 14px;
  transition: background 160ms ease, color 160ms ease;
}
.on-reset:hover { background: rgba(40, 26, 60, 0.85); color: var(--text); }
@media (max-width: 720px) {
  .on-stage { grid-template-columns: 1fr; }
}

/* ============ Emotion Wheel (Emotions page) ============ */
.emotionwheel {
  max-width: 920px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.ew-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.ew-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 18px;
  max-width: 620px;
  line-height: 1.5;
}
.ew-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.ew-svg {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: auto;
}
.ew-seg {
  cursor: pointer;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 1;
  transition: opacity 180ms ease, filter 180ms ease;
  fill-opacity: 1;
}
.ew-seg-mild     { fill-opacity: 0.5; }
.ew-seg-moderate { fill-opacity: 0.75; }
.ew-seg-intense  { fill-opacity: 1; }
.ew-seg:hover { filter: brightness(1.3); }
.ew-seg.active { filter: brightness(1.4); stroke: #fff; stroke-width: 2; }
.ew-label {
  font-size: 9px;
  font-weight: 600;
  fill: rgba(0, 0, 0, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  pointer-events: none;
  font-family: 'Cormorant Garamond', serif;
}
.ew-details {
  text-align: left;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  min-height: 200px;
  opacity: 0.5;
}
.ew-details.visible { opacity: 1; }
.ew-d-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
.ew-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.ew-d-tag {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ew-d-row {
  margin-bottom: 10px;
}
.ew-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.ew-d-row > span:last-child {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .ew-stage { grid-template-columns: 1fr; }
}

/* ============ Tactic Identifier (Manipulation page) ============ */
.tactics {
  max-width: 1000px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tx-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.tx-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 640px;
  text-align: center;
  line-height: 1.5;
}
.tx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.tx-card {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  padding: 14px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tx-card:hover { background: rgba(40, 26, 60, 0.85); border-color: rgba(255, 200, 100, 0.4); transform: translateY(-2px); }
.tx-card.active {
  background: rgba(80, 50, 30, 0.9);
  border-color: rgba(255, 220, 140, 0.7);
  color: rgba(255, 245, 215, 1);
}
.tx-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.tx-card-tag {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
}
.tx-details {
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 200, 140, 0.18);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.tx-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tx-d-head {
  border-bottom: 1px solid rgba(255, 220, 140, 0.3);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.tx-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  color: rgba(255, 220, 140, 1);
}
.tx-d-block {
  margin-bottom: 12px;
}
.tx-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.tx-d-body {
  display: block;
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.tx-d-anti .tx-d-label { color: rgba(167, 139, 250, 0.9); }
.tx-d-anti .tx-d-body  { color: var(--text); }
@media (max-width: 720px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tx-grid { grid-template-columns: 1fr; } }

/* ============ Shadow Mirror (Shadow page) ============ */
.shadowmirror {
  max-width: 800px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.sm-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.sm-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 18px;
  max-width: 640px;
  line-height: 1.5;
}
.sm-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.sm-input {
  appearance: none;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}
.sm-input:focus {
  outline: none;
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(20, 14, 30, 0.7);
}
.sm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}
.sm-mirror, .sm-reset {
  appearance: none;
  background: rgba(20, 14, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-soft);
  padding: 8px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.sm-mirror {
  border-color: rgba(167, 139, 250, 0.5);
  color: rgba(167, 139, 250, 0.95);
}
.sm-mirror:hover {
  background: rgba(167, 139, 250, 0.18);
  color: rgba(220, 200, 255, 1);
  border-color: rgba(167, 139, 250, 1);
}
.sm-reset:hover { background: rgba(40, 26, 60, 0.85); color: var(--text); }
.sm-output {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}
.sm-output.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.sm-mirror-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(167, 139, 250, 1);
  margin: 14px 0 14px;
}
.sm-card {
  background: rgba(0, 0, 0, 0.4);
  border-left: 3px solid rgba(167, 139, 250, 0.7);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.sm-card-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(220, 200, 255, 1);
  margin-bottom: 10px;
}
.sm-card-q1, .sm-card-q2, .sm-card-q3 {
  margin: 6px 0;
}
.sm-q-label {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.5;
}
.sm-footer {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  line-height: 1.55;
}
.sm-empty {
  text-align: center;
  font-style: italic;
  color: var(--text-dim);
  padding: 12px 0;
}

@media (prefers-reduced-motion: reduce) {
  .lw-dot, .on-ring, .on-ring-label, .on-core, .ew-seg, .tx-card, .tx-details, .sm-output { transition: none; }
}

/* ============ War Clock (War page) ============ */
.warclock {
  max-width: 820px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(239, 68, 68, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(28, 14, 14, 0.85), rgba(14, 8, 8, 0.95));
  border: 1px solid rgba(239, 68, 68, 0.2);
  text-align: center;
}
.wc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(252, 165, 165, 1);
  margin: 0 0 6px;
}
.wc-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 580px;
  line-height: 1.5;
}
.wc-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(239, 68, 68, 0.15);
  max-width: 640px;
  margin: 0 auto 18px;
}
.wc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 10px 16px;
  background: rgba(20, 12, 12, 0.6);
  align-items: baseline;
  gap: 18px;
  text-align: left;
}
.wc-label {
  font-size: 0.92rem;
  color: var(--text-soft);
}
.wc-val {
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: rgba(248, 113, 113, 1);
  white-space: nowrap;
}
.wc-row-civ .wc-val { color: rgba(255, 220, 140, 1); }
.wc-time-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin: 14px 0;
}
.wc-time-row .wc-time {
  font-family: 'Courier New', monospace;
  color: var(--text-soft);
}
.wc-footer {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.6;
}

/* ============ Sacred Plant Teachers (Plants page) ============ */
.plants {
  max-width: 1000px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 22, 14, 0.85), rgba(8, 14, 8, 0.95));
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.pl-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(187, 247, 208, 1);
  text-align: center;
  margin: 0 0 6px;
}
.pl-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 640px;
  text-align: center;
  line-height: 1.5;
}
.pl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.pl-card {
  appearance: none;
  background: rgba(15, 22, 14, 0.7);
  border: 1px solid rgba(34, 197, 94, 0.18);
  color: var(--text-soft);
  padding: 14px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.pl-card:hover {
  background: rgba(20, 35, 20, 0.85);
  border-color: rgba(134, 239, 172, 0.5);
  transform: translateY(-2px);
}
.pl-card.active {
  background: rgba(34, 70, 34, 0.85);
  border-color: rgba(134, 239, 172, 0.85);
  color: rgba(220, 252, 231, 1);
}
.pl-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.pl-card-orig {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
}
.pl-details {
  padding: 18px 22px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.pl-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pl-d-head {
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
  padding-bottom: 8px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.pl-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  color: rgba(187, 247, 208, 1);
  letter-spacing: 0.05em;
}
.pl-d-orig {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-dim);
}
.pl-d-block { margin-bottom: 12px; }
.pl-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.pl-d-body {
  display: block;
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.6;
}
.pl-footer {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.55;
}
@media (max-width: 720px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pl-grid { grid-template-columns: 1fr; } }

/* ============ Healing Modalities Wheel (Healing page) ============ */
.modalities {
  max-width: 920px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.md-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.md-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 640px;
  line-height: 1.5;
}
.md-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.md-svg {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: auto;
}
.md-slice {
  cursor: pointer;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 1.5;
  fill-opacity: 0.78;
  transition: fill-opacity 180ms ease, filter 180ms ease;
}
.md-slice:hover { fill-opacity: 1; filter: brightness(1.2); }
.md-slice.active { fill-opacity: 1; filter: brightness(1.3); stroke: #fff; stroke-width: 2.5; }
.md-slice-label {
  font-size: 12px;
  font-weight: 600;
  fill: rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  font-family: 'Cormorant Garamond', serif;
}
.md-details {
  text-align: left;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  min-height: 250px;
  opacity: 0.5;
  transition: opacity 220ms ease;
}
.md-details.visible { opacity: 1; }
.md-d-head {
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
.md-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.md-d-block { margin-bottom: 10px; }
.md-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.md-d-body {
  display: block;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.md-footer {
  max-width: 680px;
  margin: 20px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px) { .md-stage { grid-template-columns: 1fr; } }

/* ============ Karpman Drama Triangle (Family page) ============ */
.karpman {
  max-width: 900px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.kp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.kp-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 18px;
  max-width: 640px;
  line-height: 1.5;
}
.kp-toggles {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.kp-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-dim);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.kp-toggle:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.kp-toggle.active {
  background: rgba(255, 255, 255, 0.85);
  color: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.kp-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.kp-svg {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: auto;
}
.kp-edge {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  fill: none;
  marker-end: none;
}
.kp-node { cursor: pointer; }
.kp-node-circle {
  transition: r 200ms ease, filter 200ms ease;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
}
.kp-node:hover .kp-node-circle { filter: brightness(1.25); }
.kp-node.active .kp-node-circle {
  filter: brightness(1.5);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2.5;
}
.kp-node-label {
  font-size: 14px;
  font-weight: 700;
  fill: rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  font-family: 'Cormorant Garamond', serif;
}
.kp-details {
  text-align: left;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  min-height: 250px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.kp-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.kp-d-head {
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
.kp-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.kp-d-block { margin-bottom: 10px; }
.kp-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.kp-d-body {
  display: block;
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.kp-footer {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px) { .kp-stage { grid-template-columns: 1fr; } }

/* ============ Religion Family Tree (Religion page) ============ */
.religiontree {
  max-width: 1100px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.rt-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.rt-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 720px;
  text-align: center;
  line-height: 1.5;
}
.rt-stage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: center;
}
.rt-svg {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: auto;
}
.rt-edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.5;
}
.rt-node { cursor: pointer; }
.rt-node-circle {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1;
  transition: filter 200ms ease, stroke-width 200ms ease;
}
.rt-node:hover .rt-node-circle { filter: brightness(1.25); stroke-width: 2; }
.rt-node.active .rt-node-circle {
  filter: brightness(1.5);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2.5;
}
.rt-node-label {
  font-size: 11px;
  font-weight: 600;
  fill: rgba(0, 0, 0, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  font-family: 'Cormorant Garamond', serif;
}
.rt-node-d0 .rt-node-label { font-size: 13px; }
.rt-details {
  text-align: left;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  min-height: 220px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.rt-details.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rt-d-head {
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
}
.rt-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}
.rt-d-block { margin-bottom: 10px; }
.rt-d-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.rt-d-body {
  display: block;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.rt-footer {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px) { .rt-stage { grid-template-columns: 1fr; } }

/* ============ Ancestor Doubling (Kin page) ============ */
.ancestors {
  max-width: 1000px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.an-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.an-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 720px;
  text-align: center;
  line-height: 1.55;
}
.an-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}
.an-svg {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  height: auto;
}
.an-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}
.an-me {
  filter: drop-shadow(0 0 8px currentColor);
}
.an-me-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  fill: var(--text);
  font-family: 'Cormorant Garamond', serif;
}
.an-dot {
  filter: drop-shadow(0 0 2px currentColor);
}
.an-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.an-card {
  display: grid;
  grid-template-columns: 80px 100px 1fr;
  align-items: baseline;
  padding: 6px 14px;
  border-left: 3px solid var(--c, rgba(255, 255, 255, 0.2));
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  gap: 12px;
}
.an-card-num {
  font-family: 'Courier New', monospace;
  color: var(--c, var(--text));
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.an-card-gen {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.an-card-lbl {
  font-size: 0.88rem;
  color: var(--text-soft);
}
.an-card-you, .an-card-total {
  background: rgba(167, 139, 250, 0.12);
  border-left-color: rgba(167, 139, 250, 0.7);
}
.an-card-you .an-card-num, .an-card-total .an-card-num { color: rgba(220, 200, 255, 1); }
.an-footer {
  max-width: 700px;
  margin: 22px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px) { .an-stage { grid-template-columns: 1fr; } .an-card { grid-template-columns: 70px 1fr; } .an-card-gen { display: none; } }

/* ============ Truth Filter Cascade (Truth page) ============ */
.truthfilters {
  max-width: 760px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.tf-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 6px;
}
.tf-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 640px;
  line-height: 1.55;
}
.tf-input-row {
  display: flex;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto 22px;
}
.tf-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 44px;
}
.tf-input:focus { outline: none; border-color: rgba(167, 139, 250, 0.6); }
.tf-go {
  appearance: none;
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.55);
  color: rgba(220, 200, 255, 1);
  padding: 0 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease;
}
.tf-go:hover { background: rgba(167, 139, 250, 0.35); }
.tf-sentence {
  max-width: 560px;
  margin: 0 auto 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.15);
  border-left: 3px solid rgba(167, 139, 250, 0.8);
  color: rgba(220, 200, 255, 1);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  text-align: left;
  animation: tf-drop 480ms ease;
}
@keyframes tf-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.tf-cascade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}
.tf-filter {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  text-align: left;
  position: relative;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.tf-filter::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
}
.tf-filter:last-child::after { display: none; }
.tf-filter.active {
  background: rgba(20, 14, 30, 0.85);
  border-color: var(--c);
  transform: translateX(4px);
  box-shadow: -3px 0 12px var(--c);
}
.tf-filter.passed { border-left: 3px solid var(--c); padding-left: 12px; }
.tf-f-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c);
  color: #0a0a0a;
  font-family: 'Courier New', monospace;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tf-f-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
  font-weight: 600;
}
.tf-f-q {
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 2px;
  font-style: italic;
}
.tf-f-desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.45;
}
.tf-result {
  max-width: 600px;
  margin: 22px auto 0;
  padding: 16px 20px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms ease;
}
.tf-result.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tf-r-head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(220, 200, 255, 1);
  text-align: center;
  margin-bottom: 10px;
}
.tf-r-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--text);
  text-align: center;
  margin-bottom: 12px;
}
.tf-r-body {
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
  text-align: center;
}
.tf-footer {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .tf-input-row { flex-direction: column; }
}

/* ============ Boundary Map (Boundaries page) ============ */
.boundarymap {
  max-width: 1100px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.bm-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.bm-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 22px;
  max-width: 720px;
  text-align: center;
  line-height: 1.55;
}
.bm-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.bm-stage {
  position: relative;
}
.bm-svg {
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  height: auto;
}
.bm-ring {
  transition: fill-opacity 200ms ease;
}
.bm-ring-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'Cormorant Garamond', serif;
  pointer-events: none;
}
.bm-me {
  fill: rgba(255, 245, 215, 1);
  filter: drop-shadow(0 0 8px rgba(255, 220, 160, 0.8));
}
.bm-chip-text {
  font-size: 11px;
  font-weight: 600;
  font-family: 'Cormorant Garamond', serif;
  pointer-events: none;
}
.bm-chip { cursor: default; }
.bm-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bm-input-row {
  display: flex;
  gap: 8px;
}
.bm-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}
.bm-input:focus { outline: none; border-color: rgba(167, 139, 250, 0.6); }
.bm-add {
  appearance: none;
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.55);
  color: rgba(220, 200, 255, 1);
  padding: 0 18px;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  transition: background 160ms ease;
}
.bm-add:hover { background: rgba(167, 139, 250, 0.35); }
.bm-ring-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bm-ring-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--c, rgba(255, 255, 255, 0.2));
  color: var(--text-dim);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.bm-ring-btn:hover { color: var(--text); }
.bm-ring-btn.active {
  background: var(--c);
  color: #0a0a0a;
  font-weight: 600;
}
.bm-list-wrap {
  max-height: 280px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 10px;
}
.bm-empty {
  font-size: 0.84rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 10px;
  text-align: center;
}
.bm-list-row {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(20, 14, 30, 0.5);
  border-left: 3px solid var(--c);
  border-radius: 4px;
  margin-bottom: 4px;
}
.bm-list-name { font-size: 0.92rem; color: var(--text); }
.bm-list-ring {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c);
}
.bm-list-del {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: background 160ms ease, color 160ms ease;
}
.bm-list-del:hover { background: rgba(239, 68, 68, 0.25); color: rgba(252, 165, 165, 1); }
.bm-footer {
  max-width: 720px;
  margin: 22px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .bm-layout { grid-template-columns: 1fr; }
}

/* ============ Places map (Places page) ============ */
.places {
  max-width: 1200px;
  margin: 44px auto 32px;
  padding: 24px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 10, 30, 0.85), rgba(8, 5, 18, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pls-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
  margin: 0 0 6px;
}
.pls-hint {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 0 auto 18px;
  max-width: 720px;
  text-align: center;
  line-height: 1.5;
}
.pls-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.pls-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--c, rgba(255, 255, 255, 0.2));
  color: var(--text-soft);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.pls-chip:hover { color: var(--text); }
.pls-chip.active {
  background: var(--c);
  color: #0a0a0a;
  font-weight: 600;
}

.pls-stage {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch;
  min-height: 440px;
}
.pls-map {
  height: 100%;
  min-height: 440px;
  background: linear-gradient(180deg, rgba(30, 18, 60, 0.6), rgba(15, 10, 30, 0.85));
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  overflow: hidden;
}
/* Leaflet overrides — match site theme */
.leaflet-container {
  background: linear-gradient(180deg, rgba(30, 18, 60, 0.7), rgba(15, 10, 30, 0.9)) !important;
  font-family: inherit;
}
.leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}
.leaflet-control-zoom a {
  background: rgba(20, 14, 30, 0.92) !important;
  color: rgba(220, 200, 255, 0.95) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  border-bottom: none !important;
  font-weight: 400;
  transition: background 160ms ease, color 160ms ease;
}
.leaflet-control-zoom a:hover {
  background: rgba(50, 32, 80, 0.95) !important;
  color: rgba(255, 245, 215, 1) !important;
}
.leaflet-control-zoom a:last-child {
  border-bottom: 1px solid rgba(167, 139, 250, 0.35) !important;
}
.leaflet-control-zoom a.leaflet-disabled {
  background: rgba(15, 10, 30, 0.6) !important;
  color: rgba(120, 100, 160, 0.5) !important;
}
.leaflet-control-attribution {
  background: rgba(15, 10, 30, 0.85) !important;
  color: var(--text-dim) !important;
  border-top-left-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 0.66rem !important;
}
.leaflet-control-attribution a {
  color: rgba(167, 139, 250, 0.85) !important;
}
.leaflet-control-attribution a:hover {
  color: rgba(220, 200, 255, 1) !important;
}
.pls-details {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  text-align: left;
  opacity: 0.4;
  transition: opacity 220ms ease, border-color 220ms ease;
  overflow-y: auto;
}
.pls-details.visible { opacity: 1; }
.pls-d-head {
  padding-bottom: 8px;
  border-bottom: 2px solid;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pls-d-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.pls-d-cat {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pls-d-where {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 10px;
}
.pls-d-body {
  font-size: 0.94rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}
.pls-d-timeline {
  display: inline-block;
  color: rgba(167, 139, 250, 1);
  text-decoration: none;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border: 1px solid rgba(167, 139, 250, 0.5);
  border-radius: 999px;
  transition: background 160ms ease;
}
.pls-d-timeline:hover { background: rgba(167, 139, 250, 0.15); }

.pls-fallback {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
}
.pls-fallback-msg {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-soft);
  text-align: center;
}

.pls-list-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin: 24px 0 12px;
  text-align: center;
  text-transform: uppercase;
}
.pls-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.pls-list-card {
  appearance: none;
  background: rgba(20, 14, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--c);
  color: var(--text-soft);
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.pls-list-card:hover {
  background: rgba(35, 24, 55, 0.85);
  transform: translateY(-1px);
}
.pls-list-card.active {
  background: rgba(50, 32, 75, 0.92);
  border-color: var(--c);
}
.pls-list-cat {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c);
}
.pls-list-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--text);
  margin: 3px 0 2px;
}
.pls-list-where {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}

.pls-footer {
  max-width: 740px;
  margin: 22px auto 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.6;
}

/* Leaflet marker styling — overrides default. */
.pls-marker {
  background: transparent;
  border: none;
}
.pls-marker span {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 12px var(--c), 0 0 24px var(--c);
  animation: pls-pulse 3s ease-in-out infinite;
}
@keyframes pls-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.pls-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(15, 10, 30, 0.95);
  color: var(--text);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.pls-popup-wrap .leaflet-popup-tip { background: rgba(15, 10, 30, 0.95); }
.pls-popup-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.pls-popup-where {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-dim);
  margin-top: 2px;
}

@media (max-width: 720px) {
  .pls-stage { grid-template-columns: 1fr; }
  .pls-map { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .pls-marker span { animation: none; }
}

/* The atlas-facets cards have their own panel backgrounds — let those keep
   their cards readable. The text-only parts (hero, blockquote, close) let
   stars peek through their padding. */

.pairs-final {
  margin-top: 32px !important;
  font-size: 1.12rem !important;
  color: var(--text) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.8 !important;
}

/* ============ Atlas pages (book-anchored World/Body entries) ============ */
.atlas-page { max-width: 980px; margin: 0 auto; padding: 0 20px 64px; }
.atlas-intro {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text-soft);
  text-align: center;
}
.atlas-pattern {
  max-width: 760px;
  margin: 18px auto 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-soft);
  text-align: center;
  font-style: italic;
}
.atlas-facets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 36px;
}
.atlas-facet {
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.55), rgba(20, 10, 46, 0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.atlas-facet:hover {
  border-color: rgba(183, 104, 255, 0.35);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.12);
}
.atlas-facet-h {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.24rem;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.25;
}
.atlas-facet-b {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-soft);
}
.atlas-quote {
  max-width: 720px;
  margin: 36px auto;
  padding: 18px 28px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
  border-left: 2px solid rgba(183, 104, 255, 0.5);
  border-right: 2px solid rgba(183, 104, 255, 0.5);
}
.atlas-books-section {
  margin: 56px auto 36px;
  max-width: 880px;
  padding: 36px 20px 0;
  border-top: 1px solid var(--border);
}
.atlas-books-h {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: var(--text);
  text-align: center;
}
.atlas-books-intro {
  margin: 0 auto 24px;
  max-width: 640px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.94rem;
}
.atlas-books {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.atlas-books > .atlas-book {
  flex: 1 1 240px;
  max-width: 320px;
}
.atlas-book {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.55), rgba(20, 10, 46, 0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.atlas-book:hover {
  border-color: rgba(183, 104, 255, 0.4);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.14);
}
.atlas-book-cover {
  width: 56px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--text);
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.18), rgba(255, 107, 157, 0.10));
  border: 1px solid rgba(183, 104, 255, 0.3);
  border-radius: 3px;
}
.atlas-book-title {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.06rem;
  color: var(--text);
  line-height: 1.2;
}
.atlas-book-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.atlas-close {
  max-width: 720px;
  margin: 36px auto 0;
  text-align: center;
}
.atlas-close p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 22px;
}
@media (max-width: 700px) {
  .atlas-facets { grid-template-columns: 1fr; }
  .atlas-quote { font-size: 1.12rem; padding: 14px 18px; }
}

/* Landing page */
.landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.landing-hero {
  text-align: center;
  padding: 40px 0 64px;
  position: relative;
}

.landing-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(183, 104, 255, 0.20) 0%, rgba(255, 107, 157, 0.08) 35%, transparent 70%);
  z-index: -1;
  filter: blur(40px);
  pointer-events: none;
}

.landing-title {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #ece5f7 0%, #d3b5ff 25%, #b768ff 50%, #ff6b9d 75%, #5eead4 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 100px rgba(183, 104, 255, 0.5);
  animation: titleShift 14s ease-in-out infinite;
}

@keyframes titleShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.landing-tagline {
  font-size: 1.3rem;
  color: var(--text-soft);
  margin: 0 0 40px;
  font-style: italic;
  letter-spacing: 0.01em;
}

.landing-intro {
  font-size: 1.05rem;
  color: var(--text-soft);
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.85;
  letter-spacing: 0.005em;
}

.landing-begin {
  display: inline-block;
  padding: 14px 40px;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.28), rgba(255, 107, 157, 0.20));
  border: 1px solid rgba(183, 104, 255, 0.6);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  transition: all 260ms ease;
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.15),
    0 0 32px rgba(183, 104, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-begin:hover {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.45), rgba(255, 107, 157, 0.35));
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.25),
    0 0 48px rgba(183, 104, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.landing-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0 60px;
}

.room-card {
  display: block;
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.85), rgba(20, 10, 46, 0.85));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

.room-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.0), rgba(255, 107, 157, 0.0));
  border-radius: var(--radius);
  pointer-events: none;
  transition: background var(--transition);
}

.room-card:hover {
  background: linear-gradient(180deg, rgba(37, 22, 70, 0.92), rgba(28, 15, 56, 0.92));
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.15),
    0 0 32px rgba(183, 104, 255, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
}

.room-card h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.room-desc {
  margin: 0 0 14px;
  color: var(--text-soft);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.005em;
}

.room-pages {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  line-height: 1.7;
}
.room-page-link {
  position: relative;
  z-index: 1;
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.room-page-link:hover {
  color: var(--text);
  background: rgba(183, 104, 255, 0.18);
}
.room-page-link:not(:last-child)::after {
  content: " · ";
  color: rgba(183, 104, 255, 0.45);
  margin-left: 4px;
  pointer-events: none;
}

/* ===== Landing — Stumble block ========================================= */
.landing-stumble {
  margin: 64px auto 0;
  max-width: 720px;
  padding: 36px 28px 30px;
  text-align: center;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.45), rgba(20, 10, 46, 0.55));
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 20px;
  box-shadow:
    0 14px 48px rgba(8, 4, 22, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
.landing-stumble::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(183, 104, 255, 0.18), transparent 60%);
  pointer-events: none;
  filter: blur(4px);
}
.stumble-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  color: var(--text);
  margin: 0 0 22px;
  letter-spacing: 0.02em;
}
.stumble-pools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.stumble-pool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(20, 10, 46, 0.55);
  border: 1px solid rgba(183, 104, 255, 0.22);
  border-radius: 999px;
  color: var(--text-soft);
  font-size: 0.92rem;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.stumble-pool:hover {
  border-color: rgba(183, 104, 255, 0.5);
  color: var(--text);
}
.stumble-pool.active {
  background: rgba(183, 104, 255, 0.18);
  border-color: rgba(183, 104, 255, 0.65);
  color: var(--text);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.stumble-pool-icon {
  font-size: 1rem;
  color: rgba(183, 104, 255, 0.8);
  transition: color var(--transition), transform var(--transition);
}
.stumble-pool.active .stumble-pool-icon {
  color: #d9b3ff;
  transform: rotate(20deg);
}
.stumble-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 44px;
  font-size: 1.1rem;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #b768ff 0%, #ff6b9d 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(183, 104, 255, 0.4), 0 2px 10px rgba(255, 107, 157, 0.3);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.stumble-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(183, 104, 255, 0.55), 0 4px 18px rgba(255, 107, 157, 0.45);
  filter: brightness(1.08);
}
.stumble-btn:active { transform: translateY(0); }
.stumble-btn:disabled {
  filter: grayscale(0.6) brightness(0.7);
  cursor: not-allowed;
  box-shadow: none;
}
.stumble-btn-glow {
  position: absolute;
  inset: -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 255, 255, 0.4) 60deg, transparent 120deg);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.stumble-btn.spinning .stumble-btn-glow {
  opacity: 1;
  animation: stumble-spin 0.7s linear;
}
.stumble-btn-label {
  position: relative;
  z-index: 1;
}
@keyframes stumble-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.stumble-hint {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

@media (max-width: 640px) {
  .landing-stumble { margin: 48px 12px 0; padding: 28px 18px 22px; }
  .stumble-prompt { font-size: 1.15rem; }
  .stumble-btn { padding: 12px 32px; font-size: 1rem; }
}

/* Brief flash when stumble lands on a specific element (dict term, etc.) */
.stumble-flash {
  animation: stumble-flash 1.6s ease-out;
}
@keyframes stumble-flash {
  0%   { box-shadow: 0 0 0 0 rgba(183, 104, 255, 0); background-color: rgba(183, 104, 255, 0); }
  20%  { box-shadow: 0 0 28px 6px rgba(183, 104, 255, 0.55); background-color: rgba(183, 104, 255, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(183, 104, 255, 0); background-color: rgba(183, 104, 255, 0); }
}

.landing-closing {
  text-align: center;
  padding: 64px 0 20px;
  color: var(--text-soft);
}

.landing-closing p {
  font-size: 1.05rem;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}

.landing-final {
  font-size: 1.25rem !important;
  margin-top: 32px !important;
  font-weight: 500;
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 50%, #ff6b9d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}

/* License notice (Music page hero) */
.license-notice {
  max-width: 640px;
  margin: 28px auto 4px;
  padding: 16px 20px 18px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.07), rgba(183, 104, 255, 0.07));
  border: 1px solid rgba(94, 234, 212, 0.30);
  border-radius: var(--radius);
  text-align: left;
  color: var(--text-soft);
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.12);
}

.license-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5eead4;
  padding: 3px 10px;
  border: 1px solid rgba(94, 234, 212, 0.45);
  border-radius: 999px;
  background: rgba(94, 234, 212, 0.08);
  margin-bottom: 10px;
}

.license-notice p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.7;
  letter-spacing: 0.005em;
}

.license-notice strong {
  color: var(--text);
  font-weight: 600;
}

.license-notice em {
  color: var(--text-dim);
  font-style: italic;
}

/* Music page */
.music-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 24px 96px;
}

.music-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

#music-search {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  padding: 10px 16px;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#music-search::placeholder { color: var(--text-dim); }

#music-search:focus {
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.18);
}

.music-count {
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.song-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.song-row {
  display: grid;
  grid-template-columns: 36px 44px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.6), rgba(20, 10, 46, 0.6));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.song-row:hover {
  background: linear-gradient(180deg, rgba(37, 22, 70, 0.75), rgba(28, 15, 56, 0.75));
  border-color: rgba(183, 104, 255, 0.4);
  box-shadow: 0 0 16px rgba(183, 104, 255, 0.14);
}

.song-row.playing {
  border-color: rgba(183, 104, 255, 0.6);
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.18), rgba(255, 107, 157, 0.10));
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.2),
    0 0 28px rgba(183, 104, 255, 0.28);
}

.song-num {
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.song-row.playing .song-num {
  color: #b768ff;
}

.song-play {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.song-play:hover {
  background: rgba(183, 104, 255, 0.15);
  border-color: rgba(183, 104, 255, 0.6);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.3);
}

.song-row.playing .song-play {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.32), rgba(255, 107, 157, 0.22));
  border-color: rgba(183, 104, 255, 0.7);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.42);
  color: #fff;
}

.song-play-icon { line-height: 0; }

/* EQ bars — animated indicator on the currently playing song */
.eq-bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.song-row.playing:not(.paused) .song-play-icon { display: none; }
.song-row.playing:not(.paused) .eq-bars { display: inline-flex; }

.eq-bars i {
  display: inline-block;
  width: 3px;
  background: #d3b5ff;
  border-radius: 1px;
  animation: eqBar 1s ease-in-out infinite;
}

.eq-bars i:nth-child(1) { animation-delay: 0s; height: 50%; }
.eq-bars i:nth-child(2) { animation-delay: 0.18s; height: 80%; }
.eq-bars i:nth-child(3) { animation-delay: 0.36s; height: 60%; }
.eq-bars i:nth-child(4) { animation-delay: 0.54s; height: 90%; }

@keyframes eqBar {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

.song-title {
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.song-row.playing .song-title {
  background: linear-gradient(135deg, #ece5f7 0%, #d3b5ff 50%, #ff9ec7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}

.song-download {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1rem;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.song-download:hover {
  color: var(--text);
  background: rgba(94, 234, 212, 0.10);
  border-color: rgba(94, 234, 212, 0.55);
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.28);
}

/* Sticky right-side player — collapsible */
.sticky-player {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translate(110%, -50%);
  z-index: 60;
  width: 300px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, rgba(28, 15, 56, 0.96), rgba(20, 10, 46, 0.96));
  border: 1px solid rgba(183, 104, 255, 0.45);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.12),
    0 0 36px rgba(183, 104, 255, 0.28),
    -10px 10px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 360ms cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 240ms ease,
    width 320ms cubic-bezier(0.2, 0.9, 0.3, 1),
    padding 320ms ease;
}

.sticky-player.visible {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}

.sticky-player.collapsed {
  width: 64px;
  padding: 12px 10px;
}

.sticky-player.collapsed .player-info,
.sticky-player.collapsed .player-progress,
.sticky-player.collapsed .player-volume,
.sticky-player.collapsed .player-close,
.sticky-player.collapsed #player-prev,
.sticky-player.collapsed #player-next {
  display: none;
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sticky-player.collapsed .player-header {
  justify-content: center;
}

.player-toggle {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: all var(--transition);
}

.player-toggle:hover {
  color: var(--text);
  border-color: rgba(183, 104, 255, 0.6);
  background: rgba(183, 104, 255, 0.12);
  box-shadow: 0 0 12px rgba(183, 104, 255, 0.25);
}

.player-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-close,
.player-dl-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 1rem;
  line-height: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.player-close:hover {
  color: #ff6b9d;
  border-color: rgba(255, 107, 157, 0.6);
  background: rgba(255, 107, 157, 0.08);
}

.player-dl-btn:hover {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.6);
  background: rgba(94, 234, 212, 0.08);
  box-shadow: 0 0 12px rgba(94, 234, 212, 0.3);
}

.player-dl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.player-dl-btn.downloading {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.6);
  animation: dlPulse 1.2s ease-in-out infinite;
}

@keyframes dlPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(94, 234, 212, 0.3); }
  50% { box-shadow: 0 0 16px rgba(94, 234, 212, 0.6); }
}

.player-cover {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.35), rgba(255, 107, 157, 0.25), rgba(94, 234, 212, 0.20));
  box-shadow: inset 0 0 12px rgba(183, 104, 255, 0.25), 0 0 14px rgba(183, 104, 255, 0.3);
  align-self: center;
}

.player-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.player-bars i {
  display: inline-block;
  width: 3px;
  background: #fff;
  border-radius: 1px;
  animation: eqBar 1s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.player-bars i:nth-child(1) { animation-delay: 0s; height: 55%; }
.player-bars i:nth-child(2) { animation-delay: 0.2s; height: 90%; }
.player-bars i:nth-child(3) { animation-delay: 0.4s; height: 65%; }
.player-bars i:nth-child(4) { animation-delay: 0.6s; height: 100%; }

/* Pause the EQ bars when the audio is paused */
.sticky-player.paused .player-bars i { animation-play-state: paused; }

.player-info {
  min-width: 0;
  text-align: center;
}

.player-title {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-time {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.player-progress {
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.player-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b768ff, #ff6b9d, #5eead4);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(183, 104, 255, 0.6);
  transition: width 120ms linear;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.player-controls button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.player-controls button:hover {
  background: rgba(183, 104, 255, 0.12);
  border-color: rgba(183, 104, 255, 0.6);
  box-shadow: 0 0 12px rgba(183, 104, 255, 0.3);
}

.player-controls button.primary {
  width: 44px;
  height: 44px;
  font-size: 0.95rem;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.5), rgba(255, 107, 157, 0.35));
  border-color: rgba(183, 104, 255, 0.7);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.42);
}

.player-controls button.primary:hover {
  transform: scale(1.06);
  box-shadow: 0 0 24px rgba(183, 104, 255, 0.6);
}

/* Volume */
.player-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 0;
}

.mute-btn {
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  font-family: inherit;
  line-height: 1;
  transition: color var(--transition), text-shadow var(--transition);
  flex-shrink: 0;
}

.mute-btn:hover {
  color: var(--text);
  text-shadow: 0 0 8px rgba(183, 104, 255, 0.5);
}

#player-vol {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background-image: linear-gradient(90deg, #b768ff 0%, #b768ff var(--vol, 85%), rgba(255,255,255,0.08) var(--vol, 85%), rgba(255,255,255,0.08) 100%);
}

#player-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(183, 104, 255, 0.8);
  box-shadow: 0 0 10px rgba(183, 104, 255, 0.6);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

#player-vol::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(183, 104, 255, 0.85);
}

#player-vol::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(183, 104, 255, 0.8);
  box-shadow: 0 0 10px rgba(183, 104, 255, 0.6);
  cursor: pointer;
}

#player-vol::-moz-range-track {
  height: 4px;
  background: transparent;
}

/* Dictionary */
.dictionary {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

.dict-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

#dict-search {
  width: 100%;
  max-width: 460px;
  padding: 10px 18px;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

#dict-search::placeholder { color: var(--text-dim); }

#dict-search:focus {
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.18);
}

.dict-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  margin: 0 0 24px;
  background: rgba(20, 10, 46, 0.4);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: sticky;
  top: calc(var(--nav-h, 96px) + 4px);
  z-index: 20;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dict-jump button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all var(--transition);
}

.dict-jump button:hover {
  color: var(--text);
  background: rgba(183, 104, 255, 0.12);
  border-color: rgba(183, 104, 255, 0.45);
  box-shadow: 0 0 10px rgba(183, 104, 255, 0.3);
}

.dict-jump button.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.45), rgba(255, 107, 157, 0.30));
  border-color: rgba(183, 104, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(183, 104, 255, 0.25),
    0 0 18px rgba(183, 104, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}

.dict-group {
  margin-bottom: 32px;
  scroll-margin-top: calc(var(--nav-h, 96px) + 80px);
}

.dict-letter {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(135deg, #ece5f7 0%, #b768ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(183, 104, 255, 0.2);
}

.dict-entry {
  padding: 10px 14px;
  margin: 6px 0;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.dict-entry:hover {
  background: rgba(183, 104, 255, 0.06);
}

.dict-term {
  display: inline;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.005em;
  margin-right: 8px;
}

.dict-term::after {
  content: " — ";
  color: var(--text-dim);
  font-weight: 400;
}

.dict-def {
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

.dict-link {
  color: #b768ff;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(183, 104, 255, 0.35);
  transition: color var(--transition), border-color var(--transition);
}

.dict-link:hover {
  color: #ff9ec7;
  border-bottom-color: rgba(255, 158, 199, 0.7);
}

.dict-books-slot {
  display: inline;
}
.dict-books-slot:empty { display: none; }
.dict-books-slot:not(:empty) {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.dict-book-label {
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-right: 4px;
}
.dict-book-link {
  color: rgba(255, 200, 120, 0.95);
  text-decoration: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  cursor: pointer;
  border-bottom: 1px dotted rgba(255, 200, 120, 0.4);
  transition: color var(--transition), border-color var(--transition);
}
.dict-book-link:hover {
  color: rgba(255, 220, 180, 1);
  border-bottom-color: rgba(255, 220, 180, 0.8);
}
.dict-book-sep {
  color: var(--text-dim);
  opacity: 0.6;
}

.dict-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-style: italic;
}

/* Responsive */
@media (max-width: 800px) {
  .columns {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 24px 16px 32px;
  }
  .hero { padding: 36px 16px 24px; }
  .hero h1 { font-size: 1.9rem; }
  .subtitle { font-size: 0.98rem; }
  .manifesto { font-size: 1.06rem; }
  .manifesto-second { font-size: 0.96rem; }

  .nav-main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand   actions"
      "cats    cats";
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
  }

  .nav-main .brand { grid-area: brand; }
  .nav-main .nav-actions { grid-area: actions; margin-left: 0; }
  .nav-main .nav-categories {
    grid-area: cats;
    justify-content: center;
    gap: 4px;
  }

  .nav-sub {
    padding: 8px 12px;
  }

  .nav-cat {
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  .nav-cat.active::after {
    bottom: -12px;
    left: 10px;
    right: 10px;
  }

  .nav-link {
    padding: 5px 9px;
    font-size: 0.83rem;
  }

  .pairs-header,
  .pairs-row {
    grid-template-columns: 1fr;
  }

  .true,
  .true-header {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .false-header,
  .false {
    padding-top: 10px;
  }

  .true-header,
  .false-header {
    font-size: 0.72rem;
  }

  .pairs-grid {
    width: calc(100% - 32px);
    margin: 24px auto;
  }

  .landing { padding: 32px 16px 48px; }
  .landing-hero { padding: 20px 0 40px; }
  .landing-title { font-size: 2.2rem; letter-spacing: 0.01em; }
  .landing-tagline { font-size: 1.1rem; }
  .landing-intro { font-size: 0.98rem; }
  .landing-rooms { grid-template-columns: 1fr; gap: 14px; }
  .landing-final { font-size: 1.1rem !important; }
}

@media (max-width: 1100px) and (min-width: 801px) {
  .landing-rooms { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .dictionary { padding: 20px 14px 60px; }
  .dict-jump { padding: 8px; }
  .dict-jump button { width: 26px; height: 26px; font-size: 0.74rem; }
  .dict-letter { font-size: 1.4rem; }
  .dict-def { font-size: 0.88rem; }
}

@media (max-width: 800px) {
  .music-page { padding: 24px 14px 140px; }

  .song-row {
    grid-template-columns: 28px 40px 1fr 40px;
    gap: 8px;
    padding: 8px 10px;
  }

  .song-title { font-size: 0.88rem; }
  .song-num { font-size: 0.72rem; }

  .sticky-player {
    width: min(280px, calc(100% - 24px));
    padding: 12px 14px;
  }

  .sticky-player.collapsed {
    width: 56px;
    padding: 10px 8px;
  }

  .player-controls button { width: 30px; height: 30px; }
  .player-controls button.primary { width: 40px; height: 40px; }

  .player-cover { width: 40px; height: 40px; }
  .player-title { font-size: 0.88rem; }
}

/* ===== LIBRARY ============================================================= */

.library-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 96px;
}

.library-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

#library-search {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  padding: 10px 16px;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#library-search::placeholder { color: var(--text-dim); }
#library-search:focus {
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow: 0 0 18px rgba(183, 104, 255, 0.18);
}

.library-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.library-sort select {
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 8px 14px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.lib-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(26, 15, 56, 0.6), rgba(20, 10, 46, 0.6));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
  align-items: start;
}
.lib-card:hover {
  border-color: rgba(183, 104, 255, 0.4);
  box-shadow: 0 0 16px rgba(183, 104, 255, 0.14);
}
.lib-card.open {
  grid-column: 1 / -1;
  grid-template-columns: 96px 1fr;
  background: linear-gradient(180deg, rgba(37, 22, 70, 0.8), rgba(26, 15, 56, 0.7));
  border-color: rgba(183, 104, 255, 0.5);
  box-shadow: 0 0 28px rgba(183, 104, 255, 0.18);
}

.lib-card-cover {
  width: 72px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--text);
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.18), rgba(255, 107, 157, 0.10));
  border: 1px solid rgba(183, 104, 255, 0.3);
  border-radius: 4px;
  user-select: none;
}
.lib-card.open .lib-card-cover { width: 96px; height: 130px; font-size: 3rem; }

.lib-card-body { min-width: 0; }
.lib-card-title {
  margin: 0 0 4px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.lib-card-author {
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.lib-card-sub {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.4;
}

.lib-card-na { opacity: 0.7; }
.lib-card-na .lib-card-cover {
  background: linear-gradient(135deg, rgba(120, 120, 140, 0.18), rgba(120, 120, 140, 0.08));
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}
.lib-card-na:hover { opacity: 1; }
.lib-card-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 200, 120, 0.95);
  background: rgba(255, 170, 80, 0.12);
  border: 1px solid rgba(255, 170, 80, 0.3);
  border-radius: 999px;
}
.lib-detail-notice {
  margin-bottom: 12px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: rgba(255, 220, 180, 0.95);
  background: rgba(255, 170, 80, 0.08);
  border: 1px solid rgba(255, 170, 80, 0.25);
  border-left: 3px solid rgba(255, 170, 80, 0.55);
  border-radius: 4px;
}
.reader-fallback {
  margin: 0 auto 24px;
  max-width: 760px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: rgba(255, 220, 180, 0.95);
  background: rgba(255, 170, 80, 0.08);
  border: 1px solid rgba(255, 170, 80, 0.25);
  border-left: 3px solid rgba(255, 170, 80, 0.55);
  border-radius: 4px;
  text-align: center;
  letter-spacing: 0.02em;
}

.lib-detail {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
}
.lib-detail-summary {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.lib-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 4px 0 16px;
  padding: 14px;
  background: rgba(20, 10, 46, 0.4);
  border: 1px solid rgba(183, 104, 255, 0.18);
  border-radius: 8px;
}
.lib-stat {
  text-align: center;
  min-width: 0;
}
.lib-stat-num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
.lib-stat-lbl {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}
@media (max-width: 700px) {
  .lib-stats { grid-template-columns: repeat(2, 1fr); }
  .lib-stat-num { font-size: 1.4rem; }
}
.lib-detail-struct {
  margin: 12px 0;
  font-size: 0.88rem;
}
.lib-detail-struct summary {
  cursor: pointer;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.lib-detail-struct ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.lib-detail-struct li.lib-struct-row {
  padding: 0;
  background: rgba(20, 10, 46, 0.4);
  border-left: 2px solid rgba(183, 104, 255, 0.4);
  border-radius: 2px;
  color: var(--text-soft);
}
.lib-detail-struct li.lib-struct-row > details > summary,
.lib-detail-struct li.lib-struct-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.lib-detail-struct li.lib-struct-row > details {
  flex: 1 1 auto;
  min-width: 0;
}
.lib-detail-struct li.lib-struct-row > details > summary {
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition);
}
.lib-detail-struct li.lib-struct-row > details > summary::-webkit-details-marker { display: none; }
.lib-detail-struct li.lib-struct-row > details > summary::marker { content: ""; }
.lib-detail-struct li.lib-struct-row > details[open] > summary { background: rgba(183, 104, 255, 0.08); }
.lib-detail-struct li.lib-struct-row > details > summary:hover { background: rgba(183, 104, 255, 0.06); }
.lib-detail-struct li.lib-struct-row:not(:has(details)) { padding: 8px 12px; }
.lib-struct-h {
  flex: 1;
  min-width: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  color: var(--text);
}
.lib-struct-meta {
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.lib-struct-sum {
  margin: 0;
  padding: 4px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-soft);
  border-top: 1px solid rgba(183, 104, 255, 0.12);
}
.lib-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.btn-read, .btn-pdf, .btn-disabled {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn-read {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.85), rgba(255, 107, 157, 0.65));
  border: 1px solid rgba(183, 104, 255, 0.5);
  color: #fff;
}
.btn-read:hover {
  box-shadow: 0 0 22px rgba(183, 104, 255, 0.4);
}
.btn-pdf {
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-pdf:hover { border-color: rgba(183, 104, 255, 0.4); }
.btn-disabled {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  cursor: default;
}

.library-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}

/* ===== WORD WALL ========================================================== */

.view-wordwall { display: none; }
.view-wordwall.active { display: block; }

.view-dictwall { display: none; }
.view-dictwall.active { display: block; }

.wwall-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 96px;
}
.wwall-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 32px;
}
.wwall-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wwall-source-label {
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#wwall-source,
#wwall-sort,
#dwall-sort {
  padding: 9px 16px;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  min-width: 200px;
  max-width: 320px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#wwall-source:focus,
#wwall-sort:focus,
#dwall-sort:focus {
  border-color: rgba(183, 104, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(183, 104, 255, 0.15);
}
/* Context-aware action button — its role swaps with the Sort mode:
 *   • shuffle mode → re-shuffle (icon spins on click)
 *   • freq/alpha/length → reverse direction (icon flips 180°)
 * Same button slot so the controls row stays clean and consistent. */
.wwall-action {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
  padding: 0;
}
.wwall-action:hover {
  color: var(--text);
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}
.wwall-action-icon {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Reverse mode: icon flips 180° to indicate the sort is now inverted. */
.wwall-action.reversed .wwall-action-icon { transform: rotate(180deg); }
/* Shuffle-spin: full 360° each time the button is clicked. The class is
 * toggled in JS so the rotation re-triggers. */
.wwall-action.spinning .wwall-action-icon { transform: rotate(360deg); }
.wwall-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0;
  flex-basis: 100%;
  font-style: italic;
}

.wwall-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 14px 22px;
  padding: 44px 28px;
  background: radial-gradient(ellipse at center, rgba(20, 8, 44, 0.85), rgba(6, 2, 16, 0.95));
  border: 1px solid var(--border);
  border-radius: 18px;
  min-height: 320px;
  line-height: 1.05;
  transition: opacity var(--transition);
}
.wwall-cloud.wwall-loading { opacity: 0.4; }
.wwall-empty {
  color: var(--text-dim);
  margin: auto;
  font-style: italic;
}

/* Glow-strength custom property — animated by the pulse keyframes so the
 * neon halos breathe gently. Requires @property for smooth interpolation. */
@property --glow {
  syntax: '<number>';
  initial-value: 1;
  inherits: false;
}

.wwall-word {
  display: inline-block;
  padding: 2px 4px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: default;
  --glow: 1;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  /* Inline delay into the shorthand so both animations get their own offsets.
   * Pulse duration is also per-word (--pulse-dur) so words drift in and out
   * of phase relative to each other — a true scatter, not a wave. */
  animation:
    wwall-bloom 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--bloom-delay, 0s) forwards,
    wwall-pulse var(--pulse-dur, 4.2s) ease-in-out var(--pulse-delay, 0s) infinite;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.wwall-word:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.3);
  z-index: 1;
}

@keyframes wwall-bloom {
  0%   { opacity: 0; transform: translateY(8px) scale(0.94); --glow: 0.2; }
  60%  { opacity: 1; --glow: 1.35; }
  100% { opacity: 1; transform: translateY(0) scale(1); --glow: 1; }
}

@keyframes wwall-pulse {
  0%, 100% { --glow: 0.85; }
  50%      { --glow: 1.35; }
}

/* Five neon tints — saturated colors with matching glow halos that
 * breathe via var(--glow). Applied in rotation. */
.wwall-t1 {
  color: #ff2db5;
  text-shadow:
    0 0 6px  rgba(255, 45, 181, calc(0.85 * var(--glow))),
    0 0 14px rgba(255, 45, 181, calc(0.55 * var(--glow))),
    0 0 28px rgba(255, 45, 181, calc(0.35 * var(--glow)));
}
.wwall-t2 {
  color: #00f0ff;
  text-shadow:
    0 0 6px  rgba(0, 240, 255, calc(0.85 * var(--glow))),
    0 0 14px rgba(0, 240, 255, calc(0.55 * var(--glow))),
    0 0 28px rgba(0, 240, 255, calc(0.35 * var(--glow)));
}
.wwall-t3 {
  color: #b8ff3a;
  text-shadow:
    0 0 6px  rgba(184, 255, 58, calc(0.85 * var(--glow))),
    0 0 14px rgba(184, 255, 58, calc(0.50 * var(--glow))),
    0 0 28px rgba(184, 255, 58, calc(0.32 * var(--glow)));
}
.wwall-t4 {
  color: #c060ff;
  text-shadow:
    0 0 6px  rgba(192, 96, 255, calc(0.85 * var(--glow))),
    0 0 14px rgba(192, 96, 255, calc(0.55 * var(--glow))),
    0 0 28px rgba(192, 96, 255, calc(0.35 * var(--glow)));
}
.wwall-t5 {
  color: #ffa831;
  text-shadow:
    0 0 6px  rgba(255, 168, 49, calc(0.85 * var(--glow))),
    0 0 14px rgba(255, 168, 49, calc(0.50 * var(--glow))),
    0 0 28px rgba(255, 168, 49, calc(0.32 * var(--glow)));
}

/* Respect users who prefer reduced motion — kill the breathing pulse but
 * keep a brief fade-in so words don't pop instantly. */
@media (prefers-reduced-motion: reduce) {
  .wwall-word {
    animation: wwall-bloom 0.25s ease-out forwards;
    animation-delay: var(--bloom-delay, 0s);
  }
}

@media (max-width: 720px) {
  .wwall-page { padding: 24px 14px 96px; }
  .wwall-cloud { padding: 24px 14px; gap: 8px 14px; }
}

/* Word wall — clickable words */
.wwall-word { cursor: pointer; }
.wwall-word:focus { outline: none; }
.wwall-word:focus-visible {
  outline: 2px solid rgba(0, 240, 255, 0.6);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ===== WORD WALL POPOVER ================================================== */

.wwall-popover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wwall-popover[hidden] { display: none; }

.wwall-popover-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 2, 16, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: wwp-fade 0.22s ease-out;
}

.wwall-popover-card {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 32px 28px;
  background: linear-gradient(160deg, rgba(28, 12, 56, 0.95), rgba(10, 4, 24, 0.98));
  border: 1px solid var(--accent-neon, rgba(183, 104, 255, 0.4));
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 30px var(--accent-neon-glow, rgba(183, 104, 255, 0.25)),
    0 24px 60px rgba(0, 0, 0, 0.5);
  animation: wwp-rise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes wwp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wwp-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wwall-popover-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(20, 10, 46, 0.5);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), border-color var(--transition);
}
.wwall-popover-close:hover {
  color: var(--text);
  border-color: rgba(255, 45, 181, 0.5);
}

.wwall-popover-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 22px;
  letter-spacing: 0.01em;
  color: var(--accent-neon, #ff2db5);
  text-shadow:
    0 0 8px var(--accent-neon-glow, rgba(255, 45, 181, 0.7)),
    0 0 22px var(--accent-neon-glow, rgba(255, 45, 181, 0.45));
}

.wwp-section { margin: 22px 0 0; }
.wwp-section:first-child { margin-top: 0; }
.wwp-section-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.wwp-def {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text);
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--accent-neon, rgba(183, 104, 255, 0.6));
  border-radius: 6px;
}
.wwp-def a { color: inherit; text-decoration: underline; }

.wwp-quote {
  display: block;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--accent-neon, rgba(183, 104, 255, 0.5));
  border-radius: 6px;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform 0.15s ease;
}
.wwp-quote:hover {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--accent-neon, rgba(255, 45, 181, 0.9));
  transform: translateX(2px);
}
.wwp-quote-text { font-style: italic; }
.wwp-quote-source {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  font-style: normal;
}

.wwp-books {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wwp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.wwp-chip:hover {
  border-color: var(--accent-neon, rgba(0, 240, 255, 0.5));
  background: rgba(255, 255, 255, 0.06);
}
.wwp-chip-count {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.wwp-empty {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
}

/* The popover inherits the clicked word's neon tint via inline --accent-neon
 * + --accent-neon-glow custom properties, so the card framing matches the
 * word's color. */

/* ===== READER ============================================================== */

.view-reader { display: none; }
.view-reader.active { display: block; }

.reader-shell {
  position: fixed;
  inset: 0;
  /* Darker than --bg so chapter "sheets" pop out as pages on a backdrop */
  background:
    radial-gradient(1200px 800px at 30% 20%, rgba(40, 20, 80, 0.35), transparent 70%),
    #03020a;
  /* Above the sticky site-nav (z-index: 50) so the reader bar isn't covered. */
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.reader-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(8, 4, 26, 0.92);
  backdrop-filter: blur(8px);
}
.reader-back { flex-shrink: 0; }
.reader-title { flex: 1; min-width: 0; }
.reader-bar > .reader-tool,
.reader-bar > .reader-toc-toggle { flex-shrink: 0; }
.reader-back {
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.reader-back:hover { border-color: rgba(183, 104, 255, 0.4); }
.reader-title {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-toc-toggle {
  display: none;
  background: rgba(20, 10, 46, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  width: 36px;
  height: 32px;
  cursor: pointer;
}
.reader-tool {
  background: rgba(20, 10, 46, 0.85);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  padding: 0;
  transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}
.reader-tool:hover {
  color: var(--text);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
  transform: scale(1.08);
}
.reader-tool.active {
  color: var(--text);
  border-color: rgba(0, 240, 255, 0.65);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
}

/* Reader rail — floating button column docked at the start of the content
 * column (right of the TOC sidebar) and pinned to the vertical middle of
 * the viewport. Stays put while the reader scrolls. */
.reader-rail {
  position: fixed;
  /* TOC sidebar width is 280px; sit just inside the content column. */
  left: 296px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: rgba(8, 4, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
/* On mobile the TOC becomes a slide-out drawer (hidden by default), so the
 * rail anchors to the left edge of the viewport. */
@media (max-width: 720px) {
  .reader-rail { left: 12px; }
}

/* Reader panels — fly out from the rail to the right, anchored to the rail
 * button row's vertical center. */
.reader-search-panel,
.reader-settings-panel {
  position: fixed;
  /* Sit right of the rail: 296 + rail width(60) + gap(12) ≈ 368. */
  left: 368px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 115;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(8, 4, 26, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 18px;
  box-shadow:
    0 0 28px rgba(0, 240, 255, 0.25),
    0 12px 30px rgba(0, 0, 0, 0.6);
  animation: reader-panel-in 0.22s ease-out;
}
.reader-settings-panel {
  flex-wrap: wrap;
  max-width: min(640px, calc(100vw - 392px));
}
.reader-search-panel { max-width: min(560px, calc(100vw - 392px)); }
.reader-search-panel[hidden],
.reader-settings-panel[hidden] { display: none; }

@keyframes reader-panel-in {
  from { opacity: 0; transform: translate(-8px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}

@media (max-width: 720px) {
  .reader-search-panel,
  .reader-settings-panel {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 18px;
    transform: none;
    max-width: none;
    animation: none;
  }
}
#reader-search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 14px;
  background: rgba(10, 4, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}
#reader-search-input:focus { border-color: rgba(0, 240, 255, 0.55); }
.reader-search-count {
  font-size: 0.85rem;
  color: var(--text-dim);
  min-width: 70px;
  text-align: right;
}
.reader-search-nav, .reader-search-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 4, 24, 0.7);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color var(--transition), border-color var(--transition);
}
.reader-search-nav:hover, .reader-search-close:hover {
  color: var(--text);
  border-color: rgba(0, 240, 255, 0.55);
}

/* Search highlights inside the reader content */
.reader-search-hit {
  background: rgba(255, 232, 100, 0.18);
  border-bottom: 1px solid rgba(255, 232, 100, 0.55);
  border-radius: 2px;
}
.reader-search-hit.current {
  background: rgba(0, 240, 255, 0.28);
  border-bottom-color: rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.5);
}

/* Settings panel rows */
.reader-setting {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reader-setting label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.reader-setting-buttons {
  display: inline-flex;
  gap: 4px;
  background: rgba(10, 4, 24, 0.7);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.reader-setting-buttons button {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.reader-setting-buttons button:hover { color: var(--text); }
.reader-setting-buttons button.active {
  background: rgba(0, 240, 255, 0.18);
  color: var(--text);
}

/* Reader text-size variations (applied to .reader-content) */
.reader-content[data-size="small"]  { font-size: 0.95rem; }
.reader-content[data-size="medium"] { font-size: 1.05rem; }
.reader-content[data-size="large"]  { font-size: 1.18rem; }
.reader-content[data-size="xlarge"] { font-size: 1.32rem; }

/* Reader line-height variations */
.reader-content[data-line="tight"]  { line-height: 1.5; }
.reader-content[data-line="normal"] { line-height: 1.75; }
.reader-content[data-line="loose"]  { line-height: 2.0; }

/* Reader font family */
.reader-content[data-font="sans"]   { font-family: var(--font-sans, "Inter", system-ui, sans-serif); }
.reader-content[data-font="serif"]  { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ===== READER THEMES ====================================================== */
/* data-theme is on .reader-shell so we can paint both the TOC sidebar AND
 * the reading column from one attribute. Bar, rail, and popout panels are
 * deliberately NOT themed — they keep the WakeUpYourSoul look in every
 * theme so the chrome stays consistent.
 *
 * WakeUpYourSoul is the default — no overrides needed. */

/* --- Paper: clean off-white -------------------------------------------- */
.reader-shell[data-theme="paper"] .reader-content { background: #e8e0d2; color: #2a221a; }
.reader-shell[data-theme="paper"] .reader-chapter {
  background: linear-gradient(180deg, #fbf6ec, #f3ece0);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.reader-shell[data-theme="paper"] .reader-content strong,
.reader-shell[data-theme="paper"] .reader-content h1,
.reader-shell[data-theme="paper"] .reader-content h2,
.reader-shell[data-theme="paper"] .reader-content h3 { color: #1a1410; }
.reader-shell[data-theme="paper"] .reader-content blockquote {
  background: rgba(0, 0, 0, 0.04);
  border-left-color: rgba(120, 60, 30, 0.5);
  color: #2a221a;
}
.reader-shell[data-theme="paper"] .line-num { color: rgba(42, 34, 26, 0.35); }
.reader-shell[data-theme="paper"] .reader-toc {
  background: rgba(232, 224, 210, 0.92);
  border-right-color: rgba(0, 0, 0, 0.08);
}
.reader-shell[data-theme="paper"] .reader-toc h3 { color: rgba(42, 34, 26, 0.6); }
.reader-shell[data-theme="paper"] .reader-toc-item { color: rgba(42, 34, 26, 0.78); }
.reader-shell[data-theme="paper"] .reader-toc-item:hover { background: rgba(0, 0, 0, 0.05); color: #1a1410; }
.reader-shell[data-theme="paper"] .reader-toc-item.active {
  background: rgba(0, 0, 0, 0.08);
  color: #1a1410;
  border-left-color: rgba(120, 60, 30, 0.5);
}

/* --- Cardboard: warm tan / kraft paper --------------------------------- */
.reader-shell[data-theme="cardboard"] .reader-content { background: #b8a07a; color: #3a2e22; }
.reader-shell[data-theme="cardboard"] .reader-chapter {
  background: linear-gradient(180deg, #e6d2b2, #d8c098);
  border-color: rgba(58, 46, 34, 0.16);
  box-shadow: 0 6px 22px rgba(58, 30, 10, 0.22);
}
.reader-shell[data-theme="cardboard"] .reader-content strong,
.reader-shell[data-theme="cardboard"] .reader-content h1,
.reader-shell[data-theme="cardboard"] .reader-content h2,
.reader-shell[data-theme="cardboard"] .reader-content h3 { color: #2a1d12; }
.reader-shell[data-theme="cardboard"] .reader-content blockquote {
  background: rgba(58, 46, 34, 0.1);
  border-left-color: rgba(120, 60, 30, 0.6);
  color: #3a2e22;
}
.reader-shell[data-theme="cardboard"] .line-num { color: rgba(58, 46, 34, 0.42); }
.reader-shell[data-theme="cardboard"] .reader-toc {
  background: rgba(168, 142, 102, 0.92);
  border-right-color: rgba(58, 46, 34, 0.18);
}
.reader-shell[data-theme="cardboard"] .reader-toc h3 { color: rgba(58, 46, 34, 0.65); }
.reader-shell[data-theme="cardboard"] .reader-toc-item { color: rgba(58, 46, 34, 0.82); }
.reader-shell[data-theme="cardboard"] .reader-toc-item:hover { background: rgba(58, 46, 34, 0.08); color: #2a1d12; }
.reader-shell[data-theme="cardboard"] .reader-toc-item.active {
  background: rgba(58, 46, 34, 0.14);
  color: #2a1d12;
  border-left-color: rgba(120, 60, 30, 0.6);
}

/* --- Custom: user-defined background + text colors --------------------- */
.reader-shell[data-theme="custom"] .reader-content {
  background: var(--r-custom-bg, #d4b896);
  color: var(--r-custom-text, #3a2e22);
}
.reader-shell[data-theme="custom"] .reader-chapter {
  /* Slightly tinted variant of the bg so sheets read as elevated. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--r-custom-bg, #d4b896) 85%, #ffffff),
                            color-mix(in srgb, var(--r-custom-bg, #d4b896) 92%, #ffffff));
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 18%, transparent);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="custom"] .reader-content strong,
.reader-shell[data-theme="custom"] .reader-content h1,
.reader-shell[data-theme="custom"] .reader-content h2,
.reader-shell[data-theme="custom"] .reader-content h3 {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 85%, #000000);
}
.reader-shell[data-theme="custom"] .reader-content blockquote {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 45%, transparent);
  color: var(--r-custom-text, #3a2e22);
}
.reader-shell[data-theme="custom"] .line-num {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 45%, transparent);
}
.reader-shell[data-theme="custom"] .reader-toc {
  background: color-mix(in srgb, var(--r-custom-bg, #d4b896) 92%, #000000);
  border-right-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 18%, transparent);
}
.reader-shell[data-theme="custom"] .reader-toc h3 {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 65%, transparent);
}
.reader-shell[data-theme="custom"] .reader-toc-item {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 82%, transparent);
}
.reader-shell[data-theme="custom"] .reader-toc-item:hover {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 8%, transparent);
  color: var(--r-custom-text, #3a2e22);
}
.reader-shell[data-theme="custom"] .reader-toc-item.active {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 14%, transparent);
  color: var(--r-custom-text, #3a2e22);
  border-left-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 60%, transparent);
}

/* The "+" custom button shows as a circular pill icon, distinct from the
 * text-labeled theme buttons. */
.reader-setting-buttons #reader-theme-custom-btn {
  min-width: 28px;
  padding: 6px 10px;
  font-size: 1rem;
  font-weight: 600;
}

/* Custom-color picker panel — only visible when the custom theme is active.
 * Sits beneath the theme button row inside the settings popout. */
.reader-custom-panel {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  flex-basis: 100%;
}
.reader-custom-panel[hidden] { display: none; }
.reader-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.reader-custom-row input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.reader-custom-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.reader-custom-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }

/* ===== READER THEMES — OVERLAYS (rail + search + settings panels) ========= */
/* The default (WakeUpYourSoul) leaves overlays glassy-dark with cyan accents.
 * Each non-default theme re-skins:
 *   • .reader-rail            — floating pill background + border
 *   • .reader-tool            — round buttons inside the rail
 *   • .reader-search-panel    — popout container + border + glow
 *   • #reader-search-input    — search input field
 *   • .reader-search-nav      — ↑↓ buttons
 *   • .reader-search-close    — ✕ button
 *   • .reader-search-count    — match counter text
 *   • .reader-settings-panel  — popout container + border
 *   • .reader-setting label   — section labels
 *   • .reader-setting-buttons — pill group (Aa, themes, etc.)
 */

/* --- Paper overlays ---------------------------------------------------- */
.reader-shell[data-theme="paper"] .reader-rail {
  background: rgba(243, 236, 224, 0.85);
  border-color: rgba(0, 0, 0, 0.14);
}
.reader-shell[data-theme="paper"] .reader-tool {
  background: rgba(0, 0, 0, 0.05);
  color: #2a221a;
  border-color: rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="paper"] .reader-tool:hover,
.reader-shell[data-theme="paper"] .reader-tool.active {
  color: #1a1410;
  border-color: rgba(120, 60, 30, 0.55);
  box-shadow: 0 0 14px rgba(120, 60, 30, 0.25);
}
.reader-shell[data-theme="paper"] .reader-search-panel,
.reader-shell[data-theme="paper"] .reader-settings-panel {
  background: rgba(243, 236, 224, 0.96);
  border-color: rgba(120, 60, 30, 0.4);
  box-shadow: 0 0 28px rgba(120, 60, 30, 0.2), 0 12px 30px rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="paper"] #reader-search-input {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1410;
  border-color: rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="paper"] #reader-search-input:focus { border-color: rgba(120, 60, 30, 0.55); }
.reader-shell[data-theme="paper"] .reader-search-nav,
.reader-shell[data-theme="paper"] .reader-search-close {
  background: rgba(0, 0, 0, 0.06);
  color: #2a221a;
  border-color: rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="paper"] .reader-search-nav:hover,
.reader-shell[data-theme="paper"] .reader-search-close:hover { color: #1a1410; border-color: rgba(120, 60, 30, 0.55); }
.reader-shell[data-theme="paper"] .reader-search-count,
.reader-shell[data-theme="paper"] .reader-setting label { color: rgba(42, 34, 26, 0.7); }
.reader-shell[data-theme="paper"] .reader-setting-buttons {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.18);
}
.reader-shell[data-theme="paper"] .reader-setting-buttons button { color: rgba(42, 34, 26, 0.72); }
.reader-shell[data-theme="paper"] .reader-setting-buttons button:hover { color: #1a1410; }
.reader-shell[data-theme="paper"] .reader-setting-buttons button.active {
  background: rgba(120, 60, 30, 0.18);
  color: #1a1410;
}
.reader-shell[data-theme="paper"] .reader-search-hit { background: rgba(180, 110, 20, 0.22); border-bottom-color: rgba(180, 110, 20, 0.7); }
.reader-shell[data-theme="paper"] .reader-search-hit.current { background: rgba(120, 60, 30, 0.42); border-bottom-color: rgba(80, 30, 10, 0.9); box-shadow: 0 0 14px rgba(120, 60, 30, 0.5); }

/* --- Cardboard overlays ----------------------------------------------- */
.reader-shell[data-theme="cardboard"] .reader-rail {
  background: rgba(184, 160, 122, 0.85);
  border-color: rgba(58, 46, 34, 0.25);
}
.reader-shell[data-theme="cardboard"] .reader-tool {
  background: rgba(58, 46, 34, 0.08);
  color: #2a1d12;
  border-color: rgba(58, 46, 34, 0.25);
}
.reader-shell[data-theme="cardboard"] .reader-tool:hover,
.reader-shell[data-theme="cardboard"] .reader-tool.active {
  color: #1a1108;
  border-color: rgba(120, 60, 30, 0.6);
  box-shadow: 0 0 14px rgba(120, 60, 30, 0.3);
}
.reader-shell[data-theme="cardboard"] .reader-search-panel,
.reader-shell[data-theme="cardboard"] .reader-settings-panel {
  background: rgba(216, 192, 152, 0.96);
  border-color: rgba(120, 60, 30, 0.45);
  box-shadow: 0 0 28px rgba(120, 60, 30, 0.25), 0 12px 30px rgba(58, 30, 10, 0.3);
}
.reader-shell[data-theme="cardboard"] #reader-search-input {
  background: rgba(58, 46, 34, 0.08);
  color: #1a1108;
  border-color: rgba(58, 46, 34, 0.25);
}
.reader-shell[data-theme="cardboard"] #reader-search-input:focus { border-color: rgba(120, 60, 30, 0.6); }
.reader-shell[data-theme="cardboard"] .reader-search-nav,
.reader-shell[data-theme="cardboard"] .reader-search-close {
  background: rgba(58, 46, 34, 0.1);
  color: #2a1d12;
  border-color: rgba(58, 46, 34, 0.25);
}
.reader-shell[data-theme="cardboard"] .reader-search-nav:hover,
.reader-shell[data-theme="cardboard"] .reader-search-close:hover { color: #1a1108; border-color: rgba(120, 60, 30, 0.6); }
.reader-shell[data-theme="cardboard"] .reader-search-count,
.reader-shell[data-theme="cardboard"] .reader-setting label { color: rgba(58, 46, 34, 0.7); }
.reader-shell[data-theme="cardboard"] .reader-setting-buttons {
  background: rgba(58, 46, 34, 0.08);
  border-color: rgba(58, 46, 34, 0.25);
}
.reader-shell[data-theme="cardboard"] .reader-setting-buttons button { color: rgba(58, 46, 34, 0.72); }
.reader-shell[data-theme="cardboard"] .reader-setting-buttons button:hover { color: #1a1108; }
.reader-shell[data-theme="cardboard"] .reader-setting-buttons button.active {
  background: rgba(120, 60, 30, 0.2);
  color: #1a1108;
}
.reader-shell[data-theme="cardboard"] .reader-search-hit { background: rgba(180, 110, 20, 0.25); border-bottom-color: rgba(180, 110, 20, 0.75); }
.reader-shell[data-theme="cardboard"] .reader-search-hit.current { background: rgba(120, 60, 30, 0.45); border-bottom-color: rgba(80, 30, 10, 0.9); box-shadow: 0 0 14px rgba(120, 60, 30, 0.55); }

/* --- Custom overlays (derived from --r-custom-bg / --r-custom-text) ---- */
.reader-shell[data-theme="custom"] .reader-rail {
  background: color-mix(in srgb, var(--r-custom-bg, #d4b896) 82%, transparent);
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 25%, transparent);
}
.reader-shell[data-theme="custom"] .reader-tool {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 8%, var(--r-custom-bg, #d4b896));
  color: var(--r-custom-text, #3a2e22);
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 24%, transparent);
}
.reader-shell[data-theme="custom"] .reader-tool:hover,
.reader-shell[data-theme="custom"] .reader-tool.active {
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--r-custom-text, #3a2e22) 30%, transparent);
}
.reader-shell[data-theme="custom"] .reader-search-panel,
.reader-shell[data-theme="custom"] .reader-settings-panel {
  background: color-mix(in srgb, var(--r-custom-bg, #d4b896) 96%, var(--r-custom-text, #3a2e22));
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 40%, transparent);
  box-shadow:
    0 0 28px color-mix(in srgb, var(--r-custom-text, #3a2e22) 18%, transparent),
    0 12px 30px rgba(0, 0, 0, 0.3);
}
.reader-shell[data-theme="custom"] #reader-search-input {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 8%, var(--r-custom-bg, #d4b896));
  color: var(--r-custom-text, #3a2e22);
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 22%, transparent);
}
.reader-shell[data-theme="custom"] #reader-search-input:focus {
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 55%, transparent);
}
.reader-shell[data-theme="custom"] .reader-search-nav,
.reader-shell[data-theme="custom"] .reader-search-close {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 10%, var(--r-custom-bg, #d4b896));
  color: var(--r-custom-text, #3a2e22);
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 22%, transparent);
}
.reader-shell[data-theme="custom"] .reader-search-count,
.reader-shell[data-theme="custom"] .reader-setting label {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 70%, transparent);
}
.reader-shell[data-theme="custom"] .reader-setting-buttons {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 8%, var(--r-custom-bg, #d4b896));
  border-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 22%, transparent);
}
.reader-shell[data-theme="custom"] .reader-setting-buttons button {
  color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 72%, transparent);
}
.reader-shell[data-theme="custom"] .reader-setting-buttons button:hover {
  color: var(--r-custom-text, #3a2e22);
}
.reader-shell[data-theme="custom"] .reader-setting-buttons button.active {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 18%, transparent);
  color: var(--r-custom-text, #3a2e22);
}
.reader-shell[data-theme="custom"] .reader-search-hit {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 22%, transparent);
  border-bottom-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 55%, transparent);
}
.reader-shell[data-theme="custom"] .reader-search-hit.current {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 40%, transparent);
  border-bottom-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 85%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--r-custom-text, #3a2e22) 45%, transparent);
}

/* --- Per-theme scrollbars on TOC sidebar + content -------------------- */
/* WUYS default: keep current purple-on-dark look (no override). */
.reader-toc::-webkit-scrollbar,
.reader-content::-webkit-scrollbar { width: 10px; }
.reader-toc::-webkit-scrollbar-track,
.reader-content::-webkit-scrollbar-track { background: transparent; }
.reader-toc::-webkit-scrollbar-thumb,
.reader-content::-webkit-scrollbar-thumb {
  background: rgba(183, 104, 255, 0.32);
  border-radius: 6px;
}
.reader-toc::-webkit-scrollbar-thumb:hover,
.reader-content::-webkit-scrollbar-thumb:hover { background: rgba(183, 104, 255, 0.5); }
.reader-toc, .reader-content { scrollbar-color: rgba(183, 104, 255, 0.4) transparent; scrollbar-width: thin; }

/* Paper */
.reader-shell[data-theme="paper"] .reader-toc,
.reader-shell[data-theme="paper"] .reader-content {
  scrollbar-color: rgba(120, 60, 30, 0.45) transparent;
}
.reader-shell[data-theme="paper"] .reader-toc::-webkit-scrollbar-thumb,
.reader-shell[data-theme="paper"] .reader-content::-webkit-scrollbar-thumb {
  background: rgba(120, 60, 30, 0.4);
}
.reader-shell[data-theme="paper"] .reader-toc::-webkit-scrollbar-thumb:hover,
.reader-shell[data-theme="paper"] .reader-content::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 60, 30, 0.65);
}

/* Cardboard */
.reader-shell[data-theme="cardboard"] .reader-toc,
.reader-shell[data-theme="cardboard"] .reader-content {
  scrollbar-color: rgba(80, 50, 25, 0.5) transparent;
}
.reader-shell[data-theme="cardboard"] .reader-toc::-webkit-scrollbar-thumb,
.reader-shell[data-theme="cardboard"] .reader-content::-webkit-scrollbar-thumb {
  background: rgba(80, 50, 25, 0.45);
}
.reader-shell[data-theme="cardboard"] .reader-toc::-webkit-scrollbar-thumb:hover,
.reader-shell[data-theme="cardboard"] .reader-content::-webkit-scrollbar-thumb:hover {
  background: rgba(80, 50, 25, 0.7);
}

/* Custom */
.reader-shell[data-theme="custom"] .reader-toc,
.reader-shell[data-theme="custom"] .reader-content {
  scrollbar-color: color-mix(in srgb, var(--r-custom-text, #3a2e22) 45%, transparent) transparent;
}
.reader-shell[data-theme="custom"] .reader-toc::-webkit-scrollbar-thumb,
.reader-shell[data-theme="custom"] .reader-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 40%, transparent);
}
.reader-shell[data-theme="custom"] .reader-toc::-webkit-scrollbar-thumb:hover,
.reader-shell[data-theme="custom"] .reader-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--r-custom-text, #3a2e22) 65%, transparent);
}

.reader-body {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  overflow: hidden;
}

.reader-toc {
  background: rgba(20, 10, 46, 0.4);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  overflow-y: auto;
}
.reader-toc h3 {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reader-toc nav { display: flex; flex-direction: column; gap: 2px; }
.reader-toc-item {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.reader-toc-item:hover {
  background: rgba(183, 104, 255, 0.08);
  color: var(--text);
}
.reader-toc-item.active {
  background: rgba(183, 104, 255, 0.16);
  color: var(--text);
  border-left: 2px solid rgba(183, 104, 255, 0.6);
  padding-left: 8px;
}

.reader-content {
  overflow-y: auto;
  padding: 32px 24px 96px;
  width: 100%;
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 1.05rem;
  background: transparent;
}
.reader-content h1, .reader-content h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text);
  margin: 1.8em 0 0.6em;
}
.reader-chapter-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--text);
  margin-bottom: 1.2em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border);
}
.reader-content h3, .reader-content h4, .reader-content h5 {
  color: var(--text);
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-weight: 500;
}
.reader-content p { margin: 0 0 1.1em; }
.reader-content ul { padding-left: 1.4em; margin: 0 0 1.1em; }
.reader-content li { margin-bottom: 0.4em; }
.reader-content blockquote {
  border-left: 2px solid rgba(183, 104, 255, 0.4);
  padding: 0 1em;
  margin: 1em 0;
  color: var(--text-dim);
  font-style: italic;
}
.reader-content strong { color: var(--text); }
.reader-content em { color: var(--text); font-style: italic; }

/* Each chapter is its own "sheet of paper" centered in the reader.
   Gap between chapters tells the reader a new one has begun.
   Extra padding-left reserves a gutter for line numbers (see counters below). */
.reader-chapter {
  max-width: 800px;
  margin: 0 auto 36px;
  padding: 56px 64px 64px 96px;
  background:
    linear-gradient(180deg, rgba(26, 15, 56, 0.92), rgba(20, 10, 46, 0.88));
  border: 1px solid rgba(183, 104, 255, 0.16);
  border-radius: 10px;
  box-shadow:
    0 10px 44px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(183, 104, 255, 0.06);
  scroll-margin-top: 24px;
  counter-reset: line;
}
.reader-chapter:first-child { margin-top: 8px; }
.reader-chapter:last-child  { margin-bottom: 12px; }

/* Make the chapter the positioning context for absolutely-placed line numbers. */
.reader-chapter { position: relative; }

/* Per-line numbers in the chapter gutter. Each span is inserted by JS at the
   exact top of the visual line it labels. font-size, line-height AND
   font-family are all set inline to mirror the labelled block — that's what
   makes the baseline of the number match the baseline of the line of text. */
.line-num {
  position: absolute;
  left: 0;
  width: 72px;
  padding-right: 18px;
  text-align: right;
  color: var(--text-dim);
  opacity: 0.42;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 800px) {
  .library-page { padding: 24px 14px 96px; }
  .library-grid { grid-template-columns: 1fr; }
  .lib-card { grid-template-columns: 56px 1fr; padding: 12px; }
  .lib-card-cover { width: 56px; height: 78px; font-size: 1.8rem; }
  .lib-card.open .lib-card-cover { width: 56px; height: 78px; font-size: 1.8rem; }

  .reader-body { grid-template-columns: 1fr; }
  .reader-toc {
    position: fixed;
    inset: 56px 0 0 -100%;
    width: 84%;
    max-width: 320px;
    z-index: 5;
    background: var(--bg-elev);
    transition: inset var(--transition);
  }
  .reader-shell.toc-open .reader-toc { inset: 56px 0 0 0; }
  .reader-toc-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .reader-content { padding: 18px 12px 96px; }
  .reader-chapter { padding: 32px 22px 36px 52px; margin-bottom: 22px; border-radius: 8px; }
  .line-num { width: 44px; padding-right: 10px; }
  .reader-chapter-h { font-size: 1.5rem; }
}

/* ===== Onboarding Tour ================================================== */
.tour-replay-link {
  display: inline-block;
  margin-top: 28px;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid rgba(183, 104, 255, 0.4);
  border-radius: 999px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.tour-replay-link:hover {
  background: rgba(183, 104, 255, 0.12);
  border-color: rgba(183, 104, 255, 0.7);
  color: var(--text);
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.tour-overlay[hidden] { display: none; }
.tour-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(8, 4, 18, 0.78);
  outline: 2px solid rgba(183, 104, 255, 0.55);
  outline-offset: 2px;
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tour-spotlight.tour-spotlight-center {
  /* Center mode: no hole, just a flat dim. */
  box-shadow: 0 0 0 9999px rgba(8, 4, 18, 0.78);
  outline: none;
}
.tour-card {
  position: fixed;
  width: min(380px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  background: linear-gradient(165deg, rgba(40, 20, 80, 0.96), rgba(20, 10, 46, 0.96));
  border: 1px solid rgba(183, 104, 255, 0.4);
  border-radius: 16px;
  box-shadow:
    0 18px 56px rgba(8, 4, 22, 0.7),
    0 0 0 1px rgba(183, 104, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text);
  pointer-events: auto;
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.tour-step-counter {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.tour-title {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  color: var(--text);
  letter-spacing: 0.02em;
}
.tour-body {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.tour-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.tour-skip {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 6px 8px;
  transition: color var(--transition);
}
.tour-skip:hover { color: var(--text); }
.tour-nav {
  display: flex;
  gap: 8px;
}
.tour-prev, .tour-next, .tour-done {
  background: rgba(183, 104, 255, 0.14);
  border: 1px solid rgba(183, 104, 255, 0.35);
  border-radius: 999px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  padding: 8px 16px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.tour-prev:hover, .tour-next:hover, .tour-done:hover {
  background: rgba(183, 104, 255, 0.28);
  border-color: rgba(183, 104, 255, 0.6);
}
.tour-next, .tour-done {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.5), rgba(255, 107, 157, 0.5));
  border-color: rgba(183, 104, 255, 0.7);
}
.tour-next:hover, .tour-done:hover {
  background: linear-gradient(135deg, rgba(183, 104, 255, 0.7), rgba(255, 107, 157, 0.7));
  transform: translateY(-1px);
}
.tour-prev[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .tour-card { padding: 18px 18px 14px; }
  .tour-title { font-size: 1.2rem; }
  .tour-body { font-size: 0.9rem; }
}