@font-face {
  font-family: "Espial";
  src: url("assets/Espial-Regular-15.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #09031c;
  --paper-bright: #11082b;
  --ink: #fbf8ff;
  --forest: #7138ed;
  --forest-2: #9658ff;
  --clay: #ff3d9d;
  --mist: #190d3b;
  --dark: #05010f;
  --white: #ffffff;
  --cyan: #4be8ff;
  --lime: #d9ff43;
  --yellow: #ffe74b;
  --violet: #8f4dff;
  --line: rgba(255, 255, 255, 0.2);
  --line-light: rgba(255, 255, 255, 0.28);
  --aurato-clouds: url("assets/aurato-clouds-hd-landscape.jpg");
  --serif: "Espial", Arial, sans-serif;
  --mono: "Espial", "SFMono-Regular", monospace;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html,
body {
  color: var(--ink);
  background: var(--paper);
}

body {
  letter-spacing: -0.01em;
}

body::before {
  position: fixed;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 1, 19, 0.12), rgba(6, 1, 19, 0.92)),
    var(--aurato-clouds) center 36% / cover no-repeat;
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.noise {
  z-index: 180;
  opacity: 0.08;
  mix-blend-mode: screen;
}

.site-header {
  padding: 0 30px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(5, 1, 15, 0.78), transparent);
}

.site-header.scrolled {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--white);
  background: rgba(9, 3, 28, 0.82);
  backdrop-filter: blur(22px) saturate(150%);
}

.brand {
  gap: 11px;
  color: var(--yellow);
  font-family: "Espial", sans-serif;
  font-size: 17px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(75, 232, 255, 0.35));
}

.brand-word {
  padding-top: 2px;
}

.desktop-nav {
  font-family: "Espial", sans-serif;
  font-size: 10px;
  letter-spacing: 0.13em;
}

.desktop-nav .nav-cta {
  padding: 10px 17px;
  border-color: rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

.desktop-nav .nav-cta:hover,
.desktop-nav .nav-cta:focus-visible {
  color: #0a031c;
  border-color: var(--lime);
  background: var(--lime);
}

.language-switcher {
  position: relative;
}

.language-toggle {
  min-width: 58px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.055);
  font-family: "Espial", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.language-toggle:hover,
.language-toggle:focus-visible,
.language-switcher.is-open .language-toggle {
  color: #09031c;
  border-color: var(--cyan);
  background: var(--cyan);
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 156px;
  display: grid;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(10, 3, 29, 0.94);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity 180ms ease, transform 220ms var(--ease), visibility 180ms;
  backdrop-filter: blur(20px);
}

.language-switcher.is-open .language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-menu button {
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font-family: var(--sans);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.language-menu button:hover,
.language-menu button:focus-visible,
.language-menu button.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.menu-toggle {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(11, 4, 32, 0.6);
}

.mobile-menu {
  background:
    linear-gradient(180deg, rgba(7, 2, 21, 0.5), rgba(7, 2, 21, 0.95)),
    var(--aurato-clouds) center / cover no-repeat;
}

.mobile-menu a,
.mobile-menu button {
  font-family: "Espial", sans-serif;
  font-size: clamp(29px, 10vw, 50px);
  letter-spacing: 0;
}

.eyebrow,
.scene-kicker,
.chapter-index,
.visual-tag,
.section-label {
  color: var(--cyan);
  font-family: "Espial", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(7, 2, 22, 0.22) 0%, rgba(8, 2, 26, 0.04) 35%, rgba(8, 2, 26, 0.68) 80%, #09031c 100%),
    var(--aurato-clouds) center 46% / cover no-repeat;
}

.home-hero::before {
  position: absolute;
  inset: -30% -15%;
  background: url("assets/aurato-penta-gradient.png") center / min(72vw, 920px) auto no-repeat;
  content: "";
  opacity: 0.14;
  filter: blur(14px) saturate(112%);
  mix-blend-mode: screen;
  animation: aura-breathe 8s ease-in-out infinite alternate;
}

.home-hero::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0 24%, rgba(6, 1, 20, 0.14) 46%, rgba(6, 1, 20, 0.58) 100%);
  content: "";
  pointer-events: none;
}

.home-hero-inner {
  position: relative;
  z-index: 2;
}

.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 48px);
  margin: 4px auto 24px;
  animation: brand-float 6s ease-in-out infinite alternate;
}

.hero-brand-mark {
  width: clamp(140px, 16vw, 210px);
  height: auto;
  flex: 0 0 auto;
  margin: 0;
  filter: drop-shadow(0 0 28px rgba(83, 218, 255, 0.35));
}

.home-hero h1 {
  margin: 0;
  font-family: "Espial", sans-serif;
  font-size: clamp(84px, 13vw, 168px);
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-shadow: 0 8px 38px rgba(0, 0, 0, 0.42);
}

.hero-product-line {
  margin: 18px 0 24px;
  color: var(--white);
  font-family: "Espial", sans-serif;
  font-size: clamp(12px, 1.5vw, 18px);
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan), var(--lime), var(--clay), var(--cyan));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spectrum-shift 9s linear infinite;
}

.hero-deck {
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.045em;
  text-shadow: 0 4px 22px rgba(3, 0, 15, 0.65);
}

.button {
  min-height: 50px;
  padding: 13px 22px;
  border-color: rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: var(--white);
  background: rgba(9, 3, 28, 0.34);
  font-family: "Espial", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  backdrop-filter: blur(14px);
}

.button:hover,
.button:focus-visible {
  color: #0b031d;
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 0 28px rgba(217, 255, 67, 0.28);
}

.button.secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.course-section {
  position: relative;
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 61, 157, 0.14), transparent 34%),
    radial-gradient(circle at 15% 75%, rgba(75, 232, 255, 0.12), transparent 32%),
    #09031c;
}

.course-intro h2,
.manifesto h2 {
  font-family: "Espial", sans-serif;
  letter-spacing: -0.035em;
}

.course-intro p {
  color: rgba(255, 255, 255, 0.7);
}

.course-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  border: 0;
}

.chapter-card {
  min-height: 220px;
  grid-template-columns: 42px 1fr 34px;
  align-items: end;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  color: var(--white);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
}

.chapter-card::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 75% 25%, rgba(255, 61, 157, 0.18), transparent 38%);
  content: "";
  opacity: 0;
  transition: opacity 350ms ease;
}

.chapter-card:hover,
.chapter-card:focus-visible {
  color: var(--white);
  border-color: rgba(75, 232, 255, 0.55);
  background: linear-gradient(145deg, rgba(113, 56, 237, 0.42), rgba(255, 61, 157, 0.13));
  box-shadow: 0 26px 70px rgba(1, 0, 12, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-7px);
}

.chapter-card:hover::before,
.chapter-card:focus-visible::before {
  opacity: 1;
}

.card-number {
  align-self: start;
  color: var(--lime);
  font-family: "Espial", sans-serif;
}

.card-copy,
.card-arrow {
  position: relative;
  z-index: 2;
}

.card-title {
  font-family: "Espial", sans-serif;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.025em;
}

.card-summary {
  color: rgba(255, 255, 255, 0.66);
}

.card-glyph {
  right: -25px;
  bottom: -28px;
  width: 180px;
  height: 180px;
  border: 0;
  border-radius: 0;
  background: url("assets/aurato-logo-v2.png") center / contain no-repeat;
  opacity: 0.055;
}

.card-glyph::before,
.card-glyph::after {
  display: none;
}

.chapter-card:hover .card-glyph,
.chapter-card:focus-visible .card-glyph {
  opacity: 0.2;
  transform: rotate(12deg) translate(-18px, -18px) scale(1.08);
}

.manifesto {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(9, 3, 28, 0.9), rgba(9, 3, 28, 0.52)),
    url("assets/aurato-penta-gradient.png") center / cover no-repeat;
}

.manifesto::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent, rgba(6, 1, 18, 0.78));
  content: "";
}

.manifesto-inner {
  position: relative;
  z-index: 2;
}

.grammar-token {
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(8, 2, 26, 0.36);
  backdrop-filter: blur(12px);
}

.chapter-hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(7, 2, 23, 0.3), rgba(7, 2, 23, 0.88)),
    var(--aurato-clouds) center 42% / cover no-repeat;
}

.chapter-hero::before {
  position: absolute;
  width: min(42vw, 530px);
  aspect-ratio: 1;
  background: url("assets/aurato-logo-v2.png") center / contain no-repeat;
  content: "";
  opacity: 0.13;
  filter: drop-shadow(0 0 30px rgba(75, 232, 255, 0.35));
  animation: brand-float 8s ease-in-out infinite alternate;
}

.chapter-hero-inner {
  position: relative;
  z-index: 2;
}

.title-frame {
  border-color: rgba(255, 255, 255, 0.25);
  border-radius: 34px;
  background: rgba(9, 3, 28, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 28px 80px rgba(4, 0, 16, 0.35);
  backdrop-filter: blur(18px);
}

.title-frame h1 {
  font-family: "Espial", sans-serif;
  letter-spacing: -0.035em;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.42);
}

.chapter-subtitle {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.chapter-outcome {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.78);
}

.chapter-outcome strong {
  color: var(--lime);
  font-family: "Espial", sans-serif;
}

.chapter-progress span {
  background: linear-gradient(90deg, var(--cyan), var(--lime), var(--clay));
  box-shadow: 0 0 16px rgba(75, 232, 255, 0.55);
}

.scene,
.scene.tone-mist,
.scene.tone-dark {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.1);
}

.scene {
  background:
    radial-gradient(circle at 80% 28%, rgba(75, 232, 255, 0.075), transparent 30%),
    #09031c;
}

.scene.tone-mist {
  background:
    radial-gradient(circle at 15% 70%, rgba(255, 61, 157, 0.12), transparent 36%),
    #150933;
}

.scene.tone-dark {
  background:
    radial-gradient(circle at 72% 72%, rgba(113, 56, 237, 0.16), transparent 38%),
    #05010f;
}

.scene::before {
  position: absolute;
  width: min(44vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("assets/aurato-penta-gradient.png") center / contain no-repeat;
  content: "";
  opacity: 0.035;
  filter: blur(18px);
  pointer-events: none;
}

.scene:nth-child(odd)::before {
  right: -14%;
  bottom: -30%;
}

.scene:nth-child(even)::before {
  top: -28%;
  left: -14%;
}

.scene-headline {
  font-family: "Espial", sans-serif;
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.scene-body {
  color: rgba(255, 255, 255, 0.74);
  text-wrap: pretty;
}

.title-frame h1,
.chapter-subtitle,
.chapter-outcome,
.visual-caption,
.card-title,
.next-link h2,
.footer-tagline {
  text-wrap: balance;
}

.scene-question-list li {
  border-color: rgba(255, 255, 255, 0.2);
}

.scene-question-list li::before {
  color: var(--cyan);
  font-family: "Espial", sans-serif;
}

.scene-question-list strong {
  color: var(--white);
  font-family: "Espial", var(--sans);
  letter-spacing: 0.01em;
}

.evidence-panel {
  border-color: rgba(255, 255, 255, 0.26);
}

.evidence-panel summary,
.interface-copy {
  font-family: "Espial", sans-serif;
}

.evidence-panel summary {
  color: var(--cyan);
}

.interface-copy {
  border-color: rgba(217, 255, 67, 0.5);
  border-radius: 14px;
  color: var(--lime);
  background: rgba(217, 255, 67, 0.055);
}

.visual-stage {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 48%, rgba(113, 56, 237, 0.21), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 34px 80px rgba(2, 0, 15, 0.28);
  backdrop-filter: blur(16px);
}

.visual-stage::before {
  inset: 10%;
  border: 0;
  border-radius: 0;
  background: url("assets/aurato-logo-v2.png") center / contain no-repeat;
  opacity: 0.07;
}

.visual-tag {
  top: 22px;
  left: 24px;
  color: var(--cyan);
  opacity: 0.88;
}

.visual-caption {
  color: rgba(255, 255, 255, 0.56);
  font-family: "Espial", sans-serif;
}

.visual-life-questions {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-life-questions::before {
  display: none;
}

.visual-life-questions .visual-tag {
  z-index: 3;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.32);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.74);
  backdrop-filter: blur(10px);
}

.scene-illustration-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-illustration-labels {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.illustration-label {
  position: absolute;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  color: var(--white);
  background: rgba(9, 3, 28, 0.78);
  box-shadow: 0 8px 24px rgba(2, 0, 15, 0.32);
  font-family: "Espial", var(--sans);
  font-size: clamp(9px, 0.9vw, 12px);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  transform: translateX(-50%);
}

.label-work {
  top: 34%;
  left: 18%;
  border-color: rgba(217, 255, 67, 0.58);
}

.label-relationships {
  top: 34%;
  left: 51.5%;
  border-color: rgba(255, 61, 157, 0.62);
}

.label-recovery {
  bottom: 7%;
  left: 18%;
  border-color: rgba(75, 232, 255, 0.58);
}

.label-timing {
  bottom: 7%;
  left: 46%;
  border-color: rgba(255, 126, 91, 0.6);
}

.label-core {
  top: 57%;
  left: 34.5%;
  border-color: rgba(255, 231, 75, 0.62);
  color: var(--yellow);
}

.visual-resource-map {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-resource-map::before {
  display: none;
}

.visual-resource-map .visual-tag {
  z-index: 3;
  padding: 7px 11px;
  border: 1px solid rgba(217, 255, 67, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.map-label-config {
  top: 8%;
  left: 63%;
  border-color: rgba(255, 231, 75, 0.6);
  color: var(--yellow);
}

.map-label-operation {
  top: 27%;
  left: 84%;
  border-color: rgba(217, 255, 67, 0.58);
}

.map-label-resources {
  top: 48%;
  left: 85%;
  border-color: rgba(75, 232, 255, 0.58);
}

.map-label-exchange {
  top: 72%;
  left: 85%;
  border-color: rgba(255, 61, 157, 0.6);
}

.map-label-weather {
  top: 25%;
  left: 48%;
  border-color: rgba(75, 232, 255, 0.48);
}

.map-label-terrain {
  bottom: 7%;
  left: 55%;
  border-color: rgba(143, 77, 255, 0.62);
}

.map-label-routes {
  bottom: 7%;
  left: 70%;
  border-color: rgba(255, 126, 91, 0.58);
}

.visual-three-questions,
.visual-long-game {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-three-questions::before,
.visual-long-game::before {
  display: none;
}

.visual-three-questions .visual-tag,
.visual-long-game .visual-tag {
  z-index: 4;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.78);
  backdrop-filter: blur(10px);
}

.explainer-label {
  display: grid;
  min-width: 112px;
  max-width: 176px;
  gap: 3px;
  padding: 8px 11px;
  border-radius: 14px;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
}

.explainer-label strong {
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 600;
}

.explainer-label small {
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(7px, 0.68vw, 9px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.question-label-resources {
  top: 9%;
  left: 24%;
  border-color: rgba(75, 232, 255, 0.62);
}

.question-label-change {
  top: 8%;
  left: 70%;
  border-color: rgba(255, 231, 75, 0.62);
}

.question-label-action {
  right: auto;
  bottom: 8%;
  left: 45%;
  border-color: rgba(255, 61, 157, 0.64);
  transform: translateX(-50%);
}

.game-marker {
  position: absolute;
  z-index: 3;
  width: clamp(22px, 2.3vw, 30px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #09031c;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 18px rgba(2, 0, 15, 0.35), 0 0 0 4px rgba(9, 3, 28, 0.35);
  font-family: "Espial", var(--sans);
  font-size: clamp(7px, 0.72vw, 9px);
  line-height: 1;
}

.game-marker-character { top: 55%; left: 30%; }
.game-marker-build { top: 28%; left: 12%; }
.game-marker-abilities { bottom: 13%; left: 48%; }
.game-marker-context { top: 48%; left: 74%; }
.game-marker-timing { top: 22%; left: 66%; }
.game-marker-strategy { top: 13%; right: 7%; }

.game-marker:nth-child(2),
.game-marker:nth-child(3) {
  background: rgba(217, 255, 67, 0.94);
}

.game-marker:nth-child(4) {
  background: rgba(255, 61, 157, 0.95);
}

.game-marker:nth-child(5) {
  background: rgba(75, 232, 255, 0.95);
}

.game-marker:nth-child(6) {
  background: rgba(255, 126, 91, 0.95);
}

.visual-birth-baseline,
.visual-five-energy-landscape,
.visual-energy-availability,
.visual-energy-gallery {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-birth-baseline::before,
.visual-five-energy-landscape::before,
.visual-energy-availability::before,
.visual-energy-gallery::before {
  display: none;
}

.visual-birth-baseline .visual-tag,
.visual-energy-availability .visual-tag {
  z-index: 4;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.visual-five-energy-landscape .visual-tag,
.visual-energy-gallery .visual-tag {
  display: none;
}

.chapter2-label {
  min-width: 0;
  max-width: 122px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(9, 3, 28, 0.68);
  font-size: clamp(7px, 0.76vw, 10px);
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

.baseline-label-date { top: 18%; left: 13%; border-color: rgba(255, 231, 75, 0.6); }
.baseline-label-time { top: 17%; left: 35%; border-color: rgba(75, 232, 255, 0.6); }
.baseline-label-place { top: 18%; left: 52%; border-color: rgba(143, 77, 255, 0.65); }
.baseline-label-pillars { top: 36%; left: 70%; border-color: rgba(255, 61, 157, 0.62); }
.baseline-label-uncertainty { right: 40%; bottom: 5%; left: auto; border-color: rgba(255, 255, 255, 0.48); transform: none; }

.energy-label-wood { top: 8%; left: 10%; border-color: rgba(126, 230, 91, 0.68); }
.energy-label-fire { top: 16%; left: 31%; border-color: rgba(255, 126, 91, 0.7); }
.energy-label-earth { top: 8%; left: 51%; border-color: rgba(255, 203, 102, 0.68); }
.energy-label-metal { top: 16%; left: 72%; border-color: rgba(255, 255, 255, 0.62); }
.energy-label-water { top: 8%; left: 91%; border-color: rgba(75, 165, 255, 0.72); }

.availability-label-quantity { top: 27%; left: 24%; border-color: rgba(255, 61, 157, 0.65); }
.availability-label-conditions { top: 7%; left: 50%; border-color: rgba(255, 231, 75, 0.64); }
.availability-label-usable { top: 28%; left: 78%; border-color: rgba(75, 232, 255, 0.66); }
.availability-label-task { bottom: 5%; left: 55%; border-color: rgba(217, 255, 67, 0.66); }

.gallery-label-wood { top: 21%; left: 21%; border-color: rgba(126, 230, 91, 0.68); }
.gallery-label-fire { top: 21%; left: 37%; border-color: rgba(255, 126, 91, 0.7); }
.gallery-label-earth { top: 21%; left: 53%; border-color: rgba(255, 203, 102, 0.68); }
.gallery-label-metal { top: 21%; left: 70%; border-color: rgba(255, 255, 255, 0.62); }
.gallery-label-water { top: 21%; left: 89%; border-color: rgba(75, 165, 255, 0.72); }

/* Chapter 03 — exchange as a mix of character scenes and readable diagrams */
.visual-function-map,
.visual-output-flow,
.visual-pressure-curve,
.visual-exchange-balance,
.visual-resource-sanctuary,
.visual-peer-bridge,
.visual-wealth-workshop {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-function-map::before,
.visual-output-flow::before,
.visual-pressure-curve::before,
.visual-exchange-balance::before,
.visual-resource-sanctuary::before,
.visual-peer-bridge::before,
.visual-wealth-workshop::before {
  display: none;
}

.visual-resource-sanctuary .visual-tag,
.visual-peer-bridge .visual-tag,
.visual-wealth-workshop .visual-tag {
  display: none;
}

.visual-function-map .visual-tag,
.visual-output-flow .visual-tag,
.visual-pressure-curve .visual-tag,
.visual-exchange-balance .visual-tag {
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.chapter3-label {
  min-width: 0;
  max-width: 126px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(9, 3, 28, 0.7);
  font-size: clamp(7px, 0.72vw, 10px);
  line-height: 1.12;
  text-align: center;
  white-space: normal;
}

.resource-label-learning { top: 13%; left: 15%; border-color: rgba(217, 255, 67, 0.64); }
.resource-label-rest { top: 13%; left: 43%; border-color: rgba(143, 77, 255, 0.68); }
.resource-label-care { top: 13%; left: 67%; border-color: rgba(255, 126, 91, 0.68); }
.resource-label-understanding { top: 36%; left: 14%; border-color: rgba(75, 232, 255, 0.66); }
.resource-label-action { top: 17%; left: 88%; border-color: rgba(255, 231, 75, 0.68); color: var(--yellow); }

.peer-label-support { top: 10%; left: 13%; border-color: rgba(126, 230, 91, 0.68); }
.peer-label-cooperation { top: 10%; left: 35%; border-color: rgba(75, 232, 255, 0.66); }
.peer-label-autonomy { top: 10%; left: 64%; border-color: rgba(255, 231, 75, 0.68); }
.peer-label-competition { top: 10%; left: 86%; border-color: rgba(255, 61, 157, 0.68); }
.peer-label-shared { bottom: 6%; left: 50%; border-color: rgba(255, 255, 255, 0.56); }

.wealth-label-opportunities { top: 8%; left: 14%; border-color: rgba(255, 61, 157, 0.7); }
.wealth-label-assets { bottom: 7%; left: 14%; border-color: rgba(217, 255, 67, 0.68); }
.wealth-label-clients { top: 12%; left: 85%; border-color: rgba(255, 126, 91, 0.68); }
.wealth-label-commitments { bottom: 7%; left: 39%; border-color: rgba(75, 165, 255, 0.7); }
.wealth-label-results { right: 8%; bottom: 7%; left: auto; border-color: rgba(255, 231, 75, 0.68); transform: none; }

.function-map-chart {
  position: absolute;
  inset: 11% 4% 5%;
}

.function-map-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.function-map-lines path:not([d^="M0"]) {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 2.2;
  stroke-dasharray: 5 7;
  animation: chapter3-line-flow 6s linear infinite;
}

.function-map-lines marker path {
  fill: currentColor;
}

.function-map-lines .line-resource { color: #7ee65b; stroke: currentColor; }
.function-map-lines .line-peer { color: #4be8ff; stroke: currentColor; }
.function-map-lines .line-output { color: #ff7e5b; stroke: currentColor; }
.function-map-lines .line-wealth { color: #ffe74b; stroke: currentColor; }
.function-map-lines .line-power { color: #ff3d9d; stroke: currentColor; }

.function-node,
.function-core {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 3px;
  place-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
  color: var(--white);
  background: rgba(12, 5, 35, 0.88);
  box-shadow: 0 12px 28px rgba(2, 0, 15, 0.3);
  font-family: var(--sans);
  line-height: 1.05;
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(12px);
}

.function-node strong,
.function-core strong {
  font-size: clamp(11px, 1.1vw, 15px);
  white-space: nowrap;
}

.function-node small,
.function-core small {
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(7px, 0.7vw, 9px);
  font-weight: 500;
}

.function-core {
  top: 50%;
  left: 50%;
  width: 132px;
  aspect-ratio: 1.35;
  border-color: rgba(255, 61, 157, 0.76);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 61, 157, 0.42), rgba(24, 7, 56, 0.94) 67%);
  box-shadow: 0 0 38px rgba(255, 61, 157, 0.22);
}

.function-resource { top: 8%; left: 50%; border-color: rgba(126, 230, 91, 0.6); }
.function-peer { top: 50%; left: 12%; border-color: rgba(75, 232, 255, 0.62); }
.function-output { top: 50%; left: 88%; border-color: rgba(255, 126, 91, 0.64); }
.function-power { top: 88%; left: 34%; border-color: rgba(255, 61, 157, 0.66); }
.function-wealth { top: 88%; left: 66%; border-color: rgba(255, 231, 75, 0.64); }

.function-node {
  width: clamp(84px, 10vw, 112px);
  box-sizing: border-box;
}

.output-flow-chart {
  position: absolute;
  inset: 15% 7% 7%;
  display: grid;
  grid-template-columns: 128px 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
}

.output-reservoir {
  width: 118px;
  aspect-ratio: 0.86;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px solid rgba(75, 232, 255, 0.58);
  border-radius: 60px 60px 28px 28px;
  background: linear-gradient(180deg, rgba(75, 232, 255, 0.12), rgba(75, 232, 255, 0.45));
  box-shadow: inset 0 -54px 44px rgba(75, 232, 255, 0.22), 0 0 32px rgba(75, 232, 255, 0.12);
  font-family: var(--sans);
  text-align: center;
}

.output-reservoir span { color: rgba(255, 255, 255, 0.68); font-size: 10px; }
.output-reservoir strong { font-family: "Espial", var(--sans); font-size: 34px; }

.output-stream {
  position: relative;
  height: 4px;
  background: linear-gradient(90deg, #4be8ff, #ff3d9d);
  box-shadow: 0 0 14px rgba(75, 232, 255, 0.5);
}

.output-stream::after {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--clay);
  border-right: 2px solid var(--clay);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.output-stream i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 12px var(--cyan);
  animation: output-particle 3s linear infinite;
}

.output-stream i:nth-child(2) { animation-delay: -0.75s; }
.output-stream i:nth-child(3) { animation-delay: -1.5s; }
.output-stream i:nth-child(4) { animation-delay: -2.25s; }

.output-destinations {
  display: grid;
  gap: 10px;
}

.output-stop {
  display: grid;
  grid-template-columns: 86px minmax(60px, 1fr) 28px;
  gap: 8px;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
}

.output-level {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.output-level i {
  width: var(--remaining);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--clay));
  transform-origin: left;
  animation: output-level-in 900ms var(--ease) both;
  animation-delay: calc(var(--step) * 130ms);
}

.output-stop strong {
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
}

.output-cost {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 10px 0 0;
  padding: 8px 13px;
  border: 1px solid rgba(255, 61, 157, 0.48);
  border-radius: 999px;
  color: var(--clay);
  background: rgba(255, 61, 157, 0.08);
  font-family: "Espial", var(--sans);
  font-size: 10px;
}

.pressure-chart {
  position: absolute;
  inset: 17% 5% 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pressure-zone {
  position: relative;
  z-index: 2;
  align-self: start;
  display: grid;
  gap: 3px;
  padding: 9px 7px;
  font-family: var(--sans);
  line-height: 1.1;
  text-align: center;
}

.pressure-zone strong { font-size: clamp(10px, 1vw, 13px); }
.pressure-zone span { color: rgba(255, 255, 255, 0.56); font-size: clamp(7px, 0.72vw, 9px); }
.pressure-useful { color: var(--lime); }
.pressure-high { color: var(--clay); }
.pressure-low { color: var(--cyan); }

.pressure-line {
  position: absolute;
  inset: 12% 0 6%;
  width: 100%;
  height: 82%;
}

.pressure-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.11);
  stroke-width: 1.5;
}

.pressure-plot {
  fill: none;
  stroke: url(#pressure-gradient);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(143, 77, 255, 0.52));
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: pressure-draw 1.6s var(--ease) forwards;
}

.pressure-line circle {
  fill: #09031c;
  stroke: var(--white);
  stroke-width: 4;
}

.pressure-axis {
  position: absolute;
  right: 4%;
  bottom: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--sans);
  font-size: 9px;
}

.exchange-balance-chart {
  position: absolute;
  inset: 16% 8% 8%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.exchange-meter {
  display: grid;
  grid-template-rows: auto 152px auto;
  gap: 8px;
  justify-items: center;
  font-family: var(--sans);
}

.exchange-name { font-size: clamp(10px, 1.1vw, 14px); font-weight: 700; }

.exchange-track {
  position: relative;
  width: min(82px, 70%);
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
}

.exchange-track i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--level);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), var(--meter-color));
  transform-origin: bottom;
  animation: exchange-rise 1.1s var(--ease) both;
}

.meter-output { --meter-color: #ff3d9d; }
.meter-resource { --meter-color: #4be8ff; }

.exchange-track strong {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Espial", var(--sans);
  font-size: 25px;
}

.exchange-meter small {
  color: var(--meter-color);
  font-size: 9px;
}

.exchange-operator {
  align-self: center;
  padding-bottom: 18px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 26px;
  text-align: center;
}

.exchange-result {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(217, 255, 67, 0.4);
  border-radius: 14px;
  background: rgba(217, 255, 67, 0.06);
  font-family: var(--sans);
}

.exchange-result span {
  color: var(--clay);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.exchange-result strong {
  color: var(--lime);
  font-size: clamp(10px, 1vw, 13px);
  line-height: 1.25;
}

@keyframes chapter3-line-flow { to { stroke-dashoffset: -60; } }
@keyframes output-particle { from { transform: translate(-5px, -50%); } to { transform: translate(52px, -50%); } }
@keyframes output-level-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pressure-draw { to { stroke-dashoffset: 0; } }
@keyframes exchange-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 640px) {
  .chapter3-label {
    max-width: 78px;
    padding: 4px 6px;
    font-size: 7px;
  }

  .function-map-chart {
    inset: 13% 1% 4%;
  }

  .function-node {
    width: 84px;
    padding: 7px 6px;
  }

  .function-node strong,
  .function-core strong {
    font-size: 10px;
  }

  .function-node small,
  .function-core small {
    font-size: 6.5px;
  }

  .function-core {
    width: 104px;
  }

  .output-flow-chart {
    inset: 17% 4% 6%;
    grid-template-columns: 90px 30px minmax(0, 1fr);
  }

  .output-reservoir {
    width: 86px;
  }

  .output-reservoir strong {
    font-size: 25px;
  }

  .output-stop {
    grid-template-columns: 64px minmax(45px, 1fr) 22px;
    gap: 5px;
    font-size: 8px;
  }

  .exchange-meter {
    grid-template-rows: auto 112px auto;
  }

  .exchange-result {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 9px;
    text-align: center;
  }

  .pressure-zone span {
    font-size: 6.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .function-map-lines path,
  .output-stream i,
  .output-level i,
  .pressure-plot,
  .exchange-track i {
    animation: none !important;
  }
}

/* Chapter 04 — transfer, regulation and two-way effects */
.visual-relation-spectrum,
.visual-generating-orbit-v2,
.visual-support-cost-reservoir,
.visual-regulating-star-v2,
.visual-useful-boundary-garden,
.visual-peer-resonance-stage,
.visual-generating-guide,
.visual-regulating-guide {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-relation-spectrum::before,
.visual-generating-orbit-v2::before,
.visual-support-cost-reservoir::before,
.visual-regulating-star-v2::before,
.visual-useful-boundary-garden::before,
.visual-peer-resonance-stage::before,
.visual-generating-guide::before,
.visual-regulating-guide::before {
  display: none;
}

.visual-support-cost-reservoir .visual-tag,
.visual-useful-boundary-garden .visual-tag,
.visual-peer-resonance-stage .visual-tag {
  display: none;
}

.visual-relation-spectrum .visual-tag,
.visual-generating-orbit-v2 .visual-tag,
.visual-regulating-star-v2 .visual-tag,
.visual-generating-guide .visual-tag,
.visual-regulating-guide .visual-tag {
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.chapter4-label {
  min-width: 0;
  max-width: 138px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(9, 3, 28, 0.72);
  font-size: clamp(7px, 0.72vw, 10px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.support-cost-provider { top: 12%; left: 13%; border-color: rgba(75, 165, 255, 0.7); }
.support-cost-capacity { bottom: 7%; left: 15%; border-color: rgba(255, 61, 157, 0.66); }
.support-cost-flow { top: 66%; left: 53%; border-color: rgba(75, 232, 255, 0.68); }
.support-cost-receiver { top: 10%; left: 79%; border-color: rgba(126, 230, 91, 0.68); }
.support-cost-growth { top: 35%; left: 91%; border-color: rgba(217, 255, 67, 0.68); }

.boundary-label-low { top: 8%; left: 16%; border-color: rgba(75, 232, 255, 0.64); }
.boundary-label-useful { top: 8%; left: 50%; max-width: 164px; border-color: rgba(217, 255, 67, 0.7); color: var(--lime); }
.boundary-label-high { top: 8%; left: 84%; border-color: rgba(255, 61, 157, 0.68); }

.resonance-label-resonance { top: 11%; left: 14%; border-color: rgba(255, 126, 91, 0.7); }
.resonance-label-shared { top: 12%; left: 40%; border-color: rgba(255, 231, 75, 0.68); }
.resonance-label-competition { top: 12%; left: 66%; border-color: rgba(255, 61, 157, 0.68); }
.resonance-label-blindspot { top: 14%; left: 90%; border-color: rgba(143, 77, 255, 0.72); }

.relation-spectrum-chart {
  position: absolute;
  inset: 17% 6% 7%;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 84px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
}

.relation-orb {
  width: 80px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.22), rgba(113, 56, 237, 0.28) 44%, rgba(9, 3, 28, 0.92));
  box-shadow: 0 0 28px rgba(143, 77, 255, 0.18);
  font-family: var(--sans);
  text-align: center;
}

.relation-orb small { color: rgba(255, 255, 255, 0.58); font-size: 8px; }
.relation-orb strong { font-family: "Espial", var(--sans); font-size: 27px; }
.relation-orb-b { background: radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.2), rgba(255, 61, 157, 0.24) 44%, rgba(9, 3, 28, 0.92)); }

.relation-bands {
  display: grid;
  gap: 6px;
}

.relation-band {
  position: relative;
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--band-color) 58%, transparent);
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--band-color) 15%, transparent), rgba(255, 255, 255, 0.025));
  font-family: var(--sans);
  animation: relation-band-in 700ms var(--ease) both;
  animation-delay: calc(var(--band) * 90ms);
}

.relation-band span { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.relation-band strong { color: var(--band-color); font-size: 10px; }
.relation-band small { color: rgba(255, 255, 255, 0.56); font-size: 8px; }
.relation-band i { color: var(--band-color); font-size: 17px; font-style: normal; text-align: right; }
.band-similarity { --band-color: #4be8ff; }
.band-support { --band-color: #7ee65b; }
.band-output { --band-color: #ff7e5b; }
.band-management { --band-color: #ffe74b; }
.band-pressure { --band-color: #ff3d9d; }

.relation-note {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--sans);
  font-size: 9px;
}

.generating-orbit-chart {
  position: absolute;
  inset: 9% 11% 4%;
}

.generating-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 77, 255, 0.15), transparent 63%);
  box-shadow: inset 0 0 32px rgba(143, 77, 255, 0.12);
  transform: translate(-50%, -50%);
}

.generating-node,
.generating-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-119px) rotate(var(--reverse));
}

.generating-node {
  width: 72px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--node-color);
  border-radius: 999px;
  color: var(--white);
  background: rgba(9, 3, 28, 0.88);
  box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 24%, transparent);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
}

.generating-arrow {
  z-index: 1;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--sans);
  font-size: 22px;
  animation: generating-pulse 1.7s ease-in-out infinite;
  animation-delay: calc(var(--node) * 160ms);
}

.generating-node.node-wood { --node-color: #7ee65b; }
.generating-node.node-fire { --node-color: #ff7e5b; }
.generating-node.node-earth { --node-color: #ffcb66; }
.generating-node.node-metal { --node-color: #f8f6ff; }
.generating-node.node-water { --node-color: #4ba5ff; }

.generating-core,
.regulating-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 61, 157, 0.62);
  border-radius: 50%;
  color: var(--white);
  background: radial-gradient(circle, rgba(255, 61, 157, 0.3), rgba(15, 5, 42, 0.94) 70%);
  box-shadow: 0 0 38px rgba(255, 61, 157, 0.18);
  font-family: var(--sans);
  text-align: center;
  transform: translate(-50%, -50%);
}

.generating-core strong,
.regulating-core strong { font-size: 13px; }
.generating-core small,
.regulating-core small { max-width: 100px; color: rgba(255, 255, 255, 0.58); font-size: 7px; line-height: 1.25; }

.regulating-star-chart {
  position: absolute;
  inset: 9% 8% 3%;
}

.regulating-star-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.regulating-star-lines > path {
  fill: none;
  stroke: rgba(255, 61, 157, 0.64);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  marker-end: url(#regulating-arrow);
  animation: regulation-flow 6s linear infinite;
}

.regulating-star-lines marker path { fill: var(--clay); }

.regulating-node {
  position: absolute;
  z-index: 2;
  width: 70px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--reg-color);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.9);
  box-shadow: 0 0 18px color-mix(in srgb, var(--reg-color) 20%, transparent);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.reg-wood { top: 13%; left: 50%; --reg-color: #7ee65b; }
.reg-fire { top: 42%; left: 84%; --reg-color: #ff7e5b; }
.reg-earth { top: 86%; left: 77%; --reg-color: #ffcb66; }
.reg-metal { top: 86%; left: 23%; --reg-color: #f8f6ff; }
.reg-water { top: 42%; left: 16%; --reg-color: #4ba5ff; }
.regulating-core { width: 116px; border-color: rgba(217, 255, 67, 0.62); background: radial-gradient(circle, rgba(217, 255, 67, 0.16), rgba(15, 5, 42, 0.94) 70%); }

.generating-guide-chart,
.regulating-guide-chart {
  position: absolute;
  inset: 17% 6% 6%;
  display: grid;
  gap: 7px;
}

.generating-guide-row {
  display: grid;
  grid-template-columns: 52px 20px 52px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(143, 77, 255, 0.07));
  font-family: var(--sans);
  animation: relation-band-in 650ms var(--ease) both;
  animation-delay: calc(var(--row) * 80ms);
}

.guide-element {
  min-height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
}

.guide-arrow { color: var(--cyan); font-size: 15px; text-align: center; }
.guide-meaning { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 5px; align-items: center; }
.guide-meaning small { color: rgba(255, 255, 255, 0.56); font-size: 8px; }
.guide-meaning i { color: var(--clay); font-size: 11px; font-style: normal; text-align: center; }
.guide-meaning strong { color: var(--white); font-size: 9px; }

.guide-wood-fire .guide-element:first-child,
.guide-water-wood .guide-element:nth-of-type(3) { border-color: rgba(126, 230, 91, 0.64); }
.guide-wood-fire .guide-element:nth-of-type(3),
.guide-fire-earth .guide-element:first-child { border-color: rgba(255, 126, 91, 0.66); }
.guide-fire-earth .guide-element:nth-of-type(3),
.guide-earth-metal .guide-element:first-child { border-color: rgba(255, 203, 102, 0.66); }
.guide-earth-metal .guide-element:nth-of-type(3),
.guide-metal-water .guide-element:first-child { border-color: rgba(255, 255, 255, 0.58); }
.guide-metal-water .guide-element:nth-of-type(3),
.guide-water-wood .guide-element:first-child { border-color: rgba(75, 165, 255, 0.66); }

.regulating-guide-chart {
  grid-template-rows: repeat(5, 1fr) auto;
}

.regulating-guide-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  font-family: var(--sans);
}

.regulating-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  font-size: 8px;
  text-align: center;
}

.regulating-pair span { color: rgba(255, 255, 255, 0.36); font-size: 7px; text-transform: uppercase; }

.regulating-balance {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), rgba(255, 255, 255, 0.15) 48%, var(--clay));
}

.regulating-balance i {
  position: absolute;
  top: 50%;
  left: var(--balance);
  width: 14px;
  height: 14px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: #14072f;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.32);
  transform: translate(-50%, -50%);
  animation: regulating-balance-in 800ms var(--ease) both;
  animation-delay: calc(var(--row) * 90ms);
}

.regulating-question {
  justify-self: center;
  margin: 3px 0 0;
  padding: 7px 12px;
  border: 1px solid rgba(217, 255, 67, 0.42);
  border-radius: 999px;
  color: var(--lime);
  background: rgba(217, 255, 67, 0.06);
  font-family: var(--sans);
  font-size: 9px;
}

@keyframes relation-band-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes generating-pulse { 50% { color: var(--lime); transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-119px) rotate(var(--reverse)) scale(1.28); } }
@keyframes regulation-flow { to { stroke-dashoffset: -75; } }
@keyframes regulating-balance-in { from { left: 50%; opacity: 0; } to { left: var(--balance); opacity: 1; } }

@media (max-width: 640px) {
  .chapter4-label {
    max-width: 82px;
    padding: 4px 6px;
    font-size: 7px;
  }

  .relation-spectrum-chart {
    inset: 18% 3% 5%;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 8px;
  }

  .relation-orb { width: 55px; }
  .relation-orb strong { font-size: 20px; }
  .relation-band { min-height: 29px; padding: 4px 6px; }
  .relation-band span { grid-template-columns: 58px minmax(0, 1fr); gap: 4px; }
  .relation-band strong { font-size: 7px; }
  .relation-band small { font-size: 6px; }

  .generating-ring { width: 190px; }
  .generating-node,
  .generating-arrow { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-91px) rotate(var(--reverse)); }
  .generating-node { width: 58px; height: 30px; font-size: 8px; }
  .generating-core { width: 100px; }

  .regulating-star-chart { inset: 10% 2% 2%; }
  .regulating-node { width: 56px; height: 30px; font-size: 8px; }
  .regulating-core { width: 96px; }

  .generating-guide-chart,
  .regulating-guide-chart { inset: 18% 3% 4%; }
  .generating-guide-row { grid-template-columns: 40px 14px 40px minmax(0, 1fr); gap: 4px; padding: 4px; }
  .guide-element { min-height: 23px; font-size: 7px; }
  .guide-meaning small,
  .guide-meaning strong { font-size: 6.5px; }

  .regulating-guide-row { grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
  .regulating-pair { font-size: 6.5px; }
  .regulating-question { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .relation-band,
  .generating-arrow,
  .regulating-star-lines > path,
  .generating-guide-row,
  .regulating-balance i {
    animation: none !important;
  }
}

/* Chapter 05 — directional matching and relationship timing */
.visual-matching-separate-merge,
.visual-directional-exchange,
.visual-matching-dimensions,
.visual-water-wood-matching,
.visual-matching-evidence-stack,
.visual-timing-relationship-shift,
.visual-matching-dashboard {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-matching-separate-merge::before,
.visual-directional-exchange::before,
.visual-matching-dimensions::before,
.visual-water-wood-matching::before,
.visual-matching-evidence-stack::before,
.visual-timing-relationship-shift::before,
.visual-matching-dashboard::before {
  display: none;
}

.visual-matching-separate-merge .visual-tag,
.visual-water-wood-matching .visual-tag,
.visual-timing-relationship-shift .visual-tag {
  display: none;
}

.visual-directional-exchange .visual-tag,
.visual-matching-dimensions .visual-tag,
.visual-matching-evidence-stack .visual-tag,
.visual-matching-dashboard .visual-tag {
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.chapter5-label {
  min-width: 0;
  max-width: 150px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(9, 3, 28, 0.76);
  font-size: clamp(7px, 0.72vw, 10px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.separate-label-a { top: 6%; left: 17%; border-color: rgba(199, 214, 255, 0.68); }
.separate-label-shared { top: 7%; left: 50%; border-color: rgba(75, 232, 255, 0.68); color: var(--cyan); }
.separate-label-b { top: 6%; left: 83%; border-color: rgba(255, 203, 102, 0.7); }

.waterwood-label-source { top: 55%; left: 12%; border-color: rgba(75, 165, 255, 0.72); }
.waterwood-label-cost { bottom: 6%; left: 17%; border-color: rgba(255, 61, 157, 0.7); }
.waterwood-label-flow { top: 48%; left: 44%; border-color: rgba(75, 232, 255, 0.72); color: var(--cyan); }
.waterwood-label-boundary { top: 67%; left: 57%; border-color: rgba(255, 203, 102, 0.72); }
.waterwood-label-growth { top: 9%; left: 83%; border-color: rgba(126, 230, 91, 0.72); color: var(--lime); }

.timing-label-baseline { top: 7%; left: 17%; border-color: rgba(255, 203, 102, 0.72); }
.timing-label-activation { top: 7%; left: 50%; border-color: rgba(75, 232, 255, 0.72); color: var(--cyan); }
.timing-label-amplified { top: 7%; left: 83%; border-color: rgba(255, 61, 157, 0.72); }
.timing-label-path { right: 3%; bottom: 5%; left: auto; max-width: 180px; border-color: rgba(217, 255, 67, 0.68); color: var(--lime); transform: none; }

.directional-exchange-chart {
  position: absolute;
  inset: 18% 6% 7%;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 104px;
  gap: 16px;
  align-items: center;
}

.direction-person {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(143, 77, 255, 0.22) 46%, rgba(9, 3, 28, 0.96));
  box-shadow: 0 0 30px rgba(143, 77, 255, 0.2);
  font-family: var(--sans);
  text-align: center;
}

.direction-person-b { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), rgba(255, 61, 157, 0.2) 46%, rgba(9, 3, 28, 0.96)); }
.direction-person small { color: rgba(255, 255, 255, 0.55); font-size: 7px; }
.direction-person strong { font-family: "Espial", var(--sans); font-size: 28px; }
.direction-person span { margin-top: 2px; color: rgba(255, 255, 255, 0.55); font-size: 6.5px; }
.direction-person > i { position: relative; width: 58px; height: 4px; margin: 5px auto 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }
.direction-person > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--capacity); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); }

.direction-lanes { display: grid; gap: 14px; }
.direction-lane {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(75, 232, 255, 0.46);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(75, 232, 255, 0.12), rgba(143, 77, 255, 0.06));
  font-family: var(--sans);
  animation: direction-lane-in 750ms var(--ease) both;
}

.direction-lane span { display: grid; gap: 4px; }
.direction-lane strong { color: var(--cyan); font-size: 10px; }
.direction-lane small { color: rgba(255, 255, 255, 0.56); font-size: 8px; }
.direction-lane > i { color: var(--cyan); font-size: 25px; font-style: normal; text-align: center; }
.lane-return { grid-template-columns: 34px minmax(0, 1fr); border-color: rgba(255, 61, 157, 0.46); background: linear-gradient(90deg, rgba(143, 77, 255, 0.06), rgba(255, 61, 157, 0.12)); animation-delay: 120ms; }
.lane-return strong,
.lane-return > i { color: var(--clay); }
.direction-lanes > p { margin: 0; color: rgba(255, 255, 255, 0.55); font-family: var(--sans); font-size: 8px; text-align: center; }

.matching-radar-chart { position: absolute; inset: 10% 4% 3%; font-family: var(--sans); }
.matching-radar-svg { position: absolute; inset: 2% 6% 5%; width: 88%; height: 91%; overflow: visible; }
.matching-radar-svg line,
.matching-radar-grid { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1.5; }
.matching-radar-a { fill: rgba(75, 232, 255, 0.16); stroke: var(--cyan); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(75, 232, 255, 0.28)); animation: radar-rise 800ms var(--ease) both; transform-origin: 50% 55%; }
.matching-radar-b { fill: rgba(255, 61, 157, 0.13); stroke: var(--clay); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(255, 61, 157, 0.25)); animation: radar-rise 800ms var(--ease) 120ms both; transform-origin: 50% 55%; }
.matching-axis { position: absolute; z-index: 2; max-width: 118px; color: rgba(255, 255, 255, 0.78); font-size: 8px; font-weight: 700; line-height: 1.15; text-align: center; transform: translate(-50%, -50%); }
.matching-radar-legend { position: absolute; top: 11%; right: 2%; display: grid; gap: 6px; color: rgba(255, 255, 255, 0.62); font-size: 7px; }
.matching-radar-legend span { display: flex; gap: 6px; align-items: center; }
.matching-radar-legend i { width: 15px; height: 4px; border-radius: 999px; background: var(--cyan); }
.matching-radar-legend span:last-child i { background: var(--clay); }

.matching-evidence-chart {
  position: absolute;
  inset: 16% 6% 5%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 45px minmax(0, 0.85fr);
  gap: 5px;
  font-family: var(--sans);
}

.matching-meaning-layer,
.matching-proof-layer { padding: 11px 13px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 18px; background: rgba(255, 255, 255, 0.035); }
.matching-meaning-layer { border-color: rgba(75, 232, 255, 0.35); background: linear-gradient(135deg, rgba(75, 232, 255, 0.09), rgba(143, 77, 255, 0.05)); }
.matching-proof-layer { border-color: rgba(255, 61, 157, 0.33); background: linear-gradient(135deg, rgba(143, 77, 255, 0.05), rgba(255, 61, 157, 0.08)); }
.matching-layer-title { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.matching-proof-layer .matching-layer-title { color: var(--clay); }
.matching-meaning-layer > div,
.matching-proof-layer > div { display: flex; flex-wrap: wrap; gap: 6px; }
.matching-meaning-layer > div span,
.matching-proof-layer > div span { padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--cyan) 44%, transparent); border-radius: 999px; color: rgba(255, 255, 255, 0.8); background: rgba(9, 3, 28, 0.68); font-size: 7.5px; animation: evidence-chip-in 600ms var(--ease) both; animation-delay: calc(var(--chip) * 70ms); }
.matching-proof-layer > div span { border-color: color-mix(in srgb, var(--clay) 42%, transparent); }
.matching-why-gate { justify-self: center; align-self: center; display: flex; gap: 8px; align-items: center; padding: 7px 14px; border: 1px solid rgba(217, 255, 67, 0.55); border-radius: 999px; color: var(--lime); background: rgba(217, 255, 67, 0.07); font-family: "Espial", var(--sans); font-size: 10px; }
.matching-why-gate i { font-style: normal; animation: why-bounce 1.5s ease-in-out infinite; }

.matching-dashboard-chart { position: absolute; inset: 17% 5% 5%; display: grid; gap: 7px; }
.matching-dashboard-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-left-color: var(--row-color);
  border-radius: 13px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--row-color) 10%, transparent), rgba(255, 255, 255, 0.025));
  font-family: var(--sans);
  animation: relation-band-in 650ms var(--ease) both;
  animation-delay: calc(var(--row) * 75ms);
}
.matching-dashboard-index { color: var(--row-color); font-size: 8px; font-weight: 700; }
.matching-dashboard-copy { min-width: 0; display: grid; gap: 2px; }
.matching-dashboard-copy strong { color: var(--white); font-size: 8.5px; }
.matching-dashboard-copy small { color: rgba(255, 255, 255, 0.5); font-size: 7px; }
.matching-dashboard-question { padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.72); font-size: 7.5px; line-height: 1.25; }
.row-understanding { --row-color: #4be8ff; }
.row-resource { --row-color: #7ee65b; }
.row-rhythm { --row-color: #ffe74b; }
.row-boundary { --row-color: #ff7e5b; }
.row-recovery { --row-color: #ff3d9d; }

@keyframes direction-lane-in { from { opacity: 0; transform: scaleX(0.84); } to { opacity: 1; transform: scaleX(1); } }
@keyframes radar-rise { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes evidence-chip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes why-bounce { 50% { transform: translateY(3px); } }

@media (max-width: 640px) {
  .chapter5-label { max-width: 90px; padding: 4px 6px; font-size: 7px; }
  .timing-label-path { max-width: 112px; }

  .directional-exchange-chart { inset: 19% 3% 5%; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 7px; }
  .direction-person strong { font-size: 21px; }
  .direction-person span { display: none; }
  .direction-person > i { width: 39px; }
  .direction-lanes { gap: 8px; }
  .direction-lane { min-height: 55px; grid-template-columns: minmax(0, 1fr) 25px; padding: 6px 7px; }
  .lane-return { grid-template-columns: 25px minmax(0, 1fr); }
  .direction-lane strong { font-size: 7px; }
  .direction-lane small { font-size: 6px; }

  .matching-radar-chart { inset: 12% 1% 2%; }
  .matching-axis { max-width: 78px; font-size: 6.5px; }
  .matching-radar-legend { right: 0; font-size: 6px; }

  .matching-evidence-chart { inset: 18% 3% 4%; }
  .matching-meaning-layer,
  .matching-proof-layer { padding: 8px; }
  .matching-layer-title { margin-bottom: 5px; font-size: 7px; }
  .matching-meaning-layer > div,
  .matching-proof-layer > div { gap: 4px; }
  .matching-meaning-layer > div span,
  .matching-proof-layer > div span { padding: 4px 6px; font-size: 6px; }

  .matching-dashboard-chart { inset: 18% 3% 4%; gap: 5px; }
  .matching-dashboard-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 0.85fr); gap: 5px; padding: 5px 6px; }
  .matching-dashboard-copy strong { font-size: 7px; }
  .matching-dashboard-copy small,
  .matching-dashboard-question { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .direction-lane,
  .matching-radar-a,
  .matching-radar-b,
  .matching-meaning-layer > div span,
  .matching-proof-layer > div span,
  .matching-why-gate i,
  .matching-dashboard-row {
    animation: none !important;
  }
}

/* Chapter 06 — four life positions and contextual meaning */
.visual-life-windows-overview,
.visual-year-pillar-environment,
.visual-month-pillar-workshop,
.visual-day-pillar-inner,
.visual-hour-pillar-future,
.visual-position-context-switch,
.visual-life-windows-guide {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-life-windows-overview::before,
.visual-year-pillar-environment::before,
.visual-month-pillar-workshop::before,
.visual-day-pillar-inner::before,
.visual-hour-pillar-future::before,
.visual-position-context-switch::before,
.visual-life-windows-guide::before {
  display: none;
}

.visual-year-pillar-environment .visual-tag,
.visual-month-pillar-workshop .visual-tag,
.visual-day-pillar-inner .visual-tag,
.visual-hour-pillar-future .visual-tag {
  display: none;
}

.visual-life-windows-overview .visual-tag,
.visual-position-context-switch .visual-tag,
.visual-life-windows-guide .visual-tag {
  z-index: 5;
  padding: 7px 11px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.76);
  backdrop-filter: blur(10px);
}

.chapter6-label {
  min-width: 0;
  max-width: 158px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(9, 3, 28, 0.76);
  font-size: clamp(7px, 0.72vw, 10px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.year-label-origin { top: 7%; left: 13%; border-color: rgba(255, 203, 102, 0.72); }
.year-label-learning { top: 7%; left: 37%; border-color: rgba(126, 230, 91, 0.68); }
.year-label-impression { top: 7%; left: 62%; border-color: rgba(75, 232, 255, 0.68); }
.year-label-world { top: 7%; left: 86%; border-color: rgba(143, 77, 255, 0.72); }

.month-label-field { top: 7%; left: 14%; border-color: rgba(255, 203, 102, 0.72); }
.month-label-season { top: 7%; left: 50%; border-color: rgba(126, 230, 91, 0.7); color: var(--lime); }
.month-label-work { top: 7%; left: 86%; border-color: rgba(75, 232, 255, 0.68); }
.month-label-family { bottom: 5%; left: 25%; border-color: rgba(255, 126, 91, 0.7); }
.month-label-duty { bottom: 5%; left: 75%; border-color: rgba(255, 61, 157, 0.7); }

.day-label-self { top: 7%; left: 16%; border-color: rgba(248, 246, 255, 0.72); }
.day-label-needs { top: 7%; left: 50%; border-color: rgba(255, 203, 102, 0.72); }
.day-label-bond { top: 7%; left: 84%; border-color: rgba(75, 165, 255, 0.72); }
.day-label-private { right: 4%; bottom: 5%; left: auto; border-color: rgba(143, 77, 255, 0.72); transform: none; }

.hour-label-work { top: 7%; left: 15%; border-color: rgba(255, 126, 91, 0.7); }
.hour-label-ideal { top: 7%; left: 39%; border-color: rgba(143, 77, 255, 0.72); }
.hour-label-next { top: 7%; left: 64%; border-color: rgba(255, 203, 102, 0.72); }
.hour-label-result { top: 7%; left: 87%; border-color: rgba(75, 232, 255, 0.68); }

.life-windows-chart {
  position: absolute;
  inset: 17% 5% 6%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.life-window {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 13px 15px;
  overflow: hidden;
  border: 1px solid var(--window-color);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--window-color) 20%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.035);
  font-family: var(--sans);
  animation: life-window-in 700ms var(--ease) both;
  animation-delay: calc(var(--window) * 90ms);
}

.life-window::after { content: ""; position: absolute; right: -17px; bottom: -22px; width: 92px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--window-color) 26%, transparent); border-radius: 50%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--window-color) 6%, transparent); }
.life-window > span { align-self: start; color: var(--window-color); font-size: 8px; font-weight: 700; }
.life-window > div { min-width: 0; display: grid; gap: 3px; }
.life-window small { color: color-mix(in srgb, var(--window-color) 82%, white); font-size: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.life-window strong { color: var(--white); font-size: 11px; }
.life-window p { margin: 0; color: rgba(255, 255, 255, 0.54); font-size: 7.5px; line-height: 1.25; }
.window-year { --window-color: #4be8ff; }
.window-month { --window-color: #ffe74b; }
.window-day { --window-color: #ff3d9d; }
.window-hour { --window-color: #8f4dff; }

.life-windows-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 110px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px solid rgba(217, 255, 67, 0.62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 255, 67, 0.14), rgba(9, 3, 28, 0.96) 68%);
  box-shadow: 0 0 34px rgba(217, 255, 67, 0.14);
  font-family: var(--sans);
  text-align: center;
  transform: translate(-50%, -50%);
}
.life-windows-core strong { color: var(--lime); font-size: 12px; }
.life-windows-core small { color: rgba(255, 255, 255, 0.55); font-size: 7px; }

.position-context-chart {
  position: absolute;
  inset: 17% 5% 6%;
  display: grid;
  grid-template-columns: 112px 48px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
  font-family: var(--sans);
}

.position-signal {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(75, 232, 255, 0.52);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 232, 255, 0.15), rgba(9, 3, 28, 0.94) 70%);
  text-align: center;
}
.position-signal small { color: rgba(255, 255, 255, 0.5); font-size: 7px; }
.position-signal strong { color: var(--cyan); font-size: 12px; }
.position-signal span { color: rgba(255, 255, 255, 0.68); font-size: 8px; }

.position-route { height: 72%; display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; }
.position-route i { position: relative; height: 2px; background: linear-gradient(90deg, var(--cyan), rgba(255, 255, 255, 0.18)); }
.position-route i::after { content: "›"; position: absolute; top: 50%; right: -2px; color: var(--cyan); font-style: normal; transform: translateY(-54%); }

.position-contexts { display: grid; gap: 8px; }
.position-context {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--context-color);
  border-radius: 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--context-color) 11%, transparent), rgba(255, 255, 255, 0.025));
  animation: position-context-in 650ms var(--ease) both;
  animation-delay: calc(var(--context) * 100ms);
}
.position-context > span { color: var(--context-color); font-size: 8px; font-weight: 700; }
.position-context > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 3px 10px; align-items: baseline; }
.position-context small { color: color-mix(in srgb, var(--context-color) 80%, white); font-size: 7px; }
.position-context strong { color: var(--white); font-size: 9px; }
.position-context p { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, 0.54); font-size: 7px; }
.context-month { --context-color: #ffe74b; }
.context-day { --context-color: #ff3d9d; }
.context-hour { --context-color: #8f4dff; }
.position-context-note { grid-column: 1 / -1; justify-self: center; margin: 0; padding: 6px 10px; border: 1px solid rgba(217, 255, 67, 0.4); border-radius: 999px; color: var(--lime); font-size: 8px; }

.life-windows-guide-chart { position: absolute; inset: 18% 5% 5%; display: grid; gap: 8px; }
.life-guide-row {
  display: grid;
  grid-template-columns: 28px 82px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-left-color: var(--guide-color);
  border-radius: 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--guide-color) 10%, transparent), rgba(255, 255, 255, 0.02));
  font-family: var(--sans);
  animation: relation-band-in 650ms var(--ease) both;
  animation-delay: calc(var(--row) * 90ms);
}
.life-guide-index { color: var(--guide-color); font-size: 8px; font-weight: 700; }
.life-guide-pillar { color: color-mix(in srgb, var(--guide-color) 80%, white); font-size: 8px; font-weight: 700; }
.life-guide-copy { min-width: 0; display: grid; gap: 3px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.life-guide-copy strong { color: var(--white); font-size: 9px; }
.life-guide-copy small { color: rgba(255, 255, 255, 0.52); font-size: 7px; line-height: 1.25; }
.guide-year { --guide-color: #4be8ff; }
.guide-month { --guide-color: #ffe74b; }
.guide-day { --guide-color: #ff3d9d; }
.guide-hour { --guide-color: #8f4dff; }

@keyframes life-window-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes position-context-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 640px) {
  .chapter6-label { max-width: 88px; padding: 4px 6px; font-size: 7px; }
  .life-windows-chart { inset: 18% 3% 4%; gap: 7px; }
  .life-window { grid-template-columns: 19px minmax(0, 1fr); gap: 5px; padding: 8px; border-radius: 15px; }
  .life-window small { font-size: 6px; }
  .life-window strong { font-size: 8px; }
  .life-window p { font-size: 6px; }
  .life-windows-core { width: 78px; }
  .life-windows-core strong { font-size: 9px; }

  .position-context-chart { inset: 18% 3% 4%; grid-template-columns: 78px 26px minmax(0, 1fr); gap: 6px; }
  .position-signal strong { font-size: 9px; }
  .position-context { padding: 6px; }
  .position-context > div { grid-template-columns: 60px minmax(0, 1fr); gap: 2px 5px; }
  .position-context small,
  .position-context p { font-size: 6px; }
  .position-context strong { font-size: 7px; }

  .life-windows-guide-chart { inset: 19% 3% 4%; gap: 6px; }
  .life-guide-row { grid-template-columns: 20px 60px minmax(0, 1fr); gap: 5px; padding: 7px; }
  .life-guide-pillar,
  .life-guide-copy strong { font-size: 7px; }
  .life-guide-copy small { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .life-window,
  .position-context,
  .life-guide-row {
    animation: none !important;
  }
}

.v-label,
.profile-bar,
.grammar-line,
.method-node,
.cycle-token,
.pillar-name,
.calendar-cell,
.input-box,
.pipeline-node,
.context-card,
.strategy-card,
.flip-demo small,
.flip-demo em,
.daily-top,
.daily-evidence {
  font-family: "Espial", sans-serif;
}

.calendar-cell,
.cycle-token,
.element-node,
.cycle-node-five,
.pillar-char,
.input-box,
.pipeline-node,
.context-card,
.strategy-card,
.method-node {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.calendar-cell.active,
.context-card:hover,
.strategy-card:hover,
.strategy-card.active,
.method-node.changed {
  color: #09031c;
  background: var(--lime);
  border-color: var(--lime);
  box-shadow: 0 0 22px rgba(217, 255, 67, 0.22);
}

.element-core,
.v-dot,
.network-visual circle.active,
.profile-fill {
  background: var(--clay);
}

.network-visual circle,
.evidence-card,
.tone-dark .evidence-card {
  color: var(--white);
  fill: #100629;
  background: #100629;
}

.pillar-char.branch,
.tone-dark .pillar-char.branch,
.flip-back {
  color: var(--white);
  background: linear-gradient(145deg, #3f1a91, #8f2eaa);
}

.flip-front {
  color: var(--white);
  background: linear-gradient(145deg, #150934, #28105b);
}

.flip-demo:hover .flip-front,
.flip-demo:focus-visible .flip-front,
.flip-demo:hover .flip-back,
.flip-demo:focus-visible .flip-back {
  box-shadow: 12px 12px 0 rgba(75, 232, 255, 0.16), 0 0 40px rgba(255, 61, 157, 0.2);
}

.avatar-glyph {
  box-shadow: 0 0 44px color-mix(in srgb, var(--avatar-color), transparent 45%);
}

.visual-day-master,
.visual-avatar-wood-yang,
.visual-avatar-wood-yin,
.visual-avatar-fire-yang,
.visual-avatar-fire-yin,
.visual-avatar-earth-yang,
.visual-avatar-earth-yin,
.visual-avatar-metal-yang,
.visual-avatar-metal-yin,
.visual-avatar-water-yang,
.visual-avatar-water-yin {
  overflow: hidden;
  color: #fff;
  background: #0a041b;
}

.visual-day-master::before,
.visual-avatar-wood-yang::before,
.visual-avatar-wood-yin::before,
.visual-avatar-fire-yang::before,
.visual-avatar-fire-yin::before,
.visual-avatar-earth-yang::before,
.visual-avatar-earth-yin::before,
.visual-avatar-metal-yang::before,
.visual-avatar-metal-yin::before,
.visual-avatar-water-yang::before,
.visual-avatar-water-yin::before {
  display: none;
}

.visual-day-master .visual-tag,
.visual-avatar-wood-yang .visual-tag,
.visual-avatar-wood-yin .visual-tag,
.visual-avatar-fire-yang .visual-tag,
.visual-avatar-fire-yin .visual-tag,
.visual-avatar-earth-yang .visual-tag,
.visual-avatar-earth-yin .visual-tag,
.visual-avatar-metal-yang .visual-tag,
.visual-avatar-metal-yin .visual-tag,
.visual-avatar-water-yang .visual-tag,
.visual-avatar-water-yin .visual-tag {
  z-index: 8;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}

.day-master-explorer,
.avatar-character-single,
.day-master-portrait {
  position: absolute;
  inset: 0;
}

.day-master-portrait,
.avatar-character-single {
  background: #100629;
}

.day-master-portrait img,
.avatar-character-single > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.005);
  transition: opacity 180ms ease, transform 700ms var(--ease);
}

.day-master-portrait.is-changing img {
  opacity: 0.45;
  transform: scale(1.035);
}

.day-master-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 1, 15, 0.12) 34%, rgba(4, 1, 15, 0.38) 62%, rgba(4, 1, 15, 0.94) 100%);
  pointer-events: none;
}

.day-master-identity {
  position: absolute;
  z-index: 5;
  right: 76px;
  bottom: 86px;
  left: 76px;
  display: grid;
  gap: 4px;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.82);
}

.day-master-identity strong {
  font-family: "Espial", var(--sans);
  font-size: clamp(18px, 2.1vw, 28px);
  font-weight: 400;
  letter-spacing: 0.025em;
}

.day-master-identity > span {
  color: rgba(255, 255, 255, 0.74);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.day-master-nav {
  position: absolute;
  z-index: 7;
  top: 48%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 2, 26, 0.34);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.day-master-nav.previous { left: 18px; }
.day-master-nav.next { right: 18px; }

.day-master-nav:hover,
.day-master-nav:focus-visible {
  color: #09031c;
  background: var(--lime);
  transform: scale(1.08);
  outline: none;
}

.day-master-choices {
  position: absolute;
  z-index: 7;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 17px;
  background: rgba(8, 2, 26, 0.56);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(15px);
}

.day-master-choice {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.day-master-choice img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.day-master-choice span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #09031c;
  background: rgba(255, 255, 255, 0.9);
  font-family: var(--serif);
  font-size: 10px;
  line-height: 1;
}

.day-master-choice:hover,
.day-master-choice:focus-visible {
  z-index: 2;
  border-color: var(--cyan);
  transform: translateY(-3px) scale(1.06);
  outline: none;
}

.day-master-choice.is-active {
  border-color: var(--lime);
  box-shadow: 0 0 0 2px rgba(217, 255, 67, 0.32), 0 0 22px rgba(217, 255, 67, 0.3);
}

.day-master-choice.is-active span {
  background: var(--lime);
}

.avatar-character-single .day-master-identity {
  bottom: 26px;
}

@media (max-width: 640px) {
  .day-master-identity {
    right: 56px;
    bottom: 69px;
    left: 56px;
  }

  .day-master-identity strong {
    font-size: 17px;
  }

  .day-master-nav {
    width: 36px;
    height: 36px;
  }

  .day-master-nav.previous { left: 10px; }
  .day-master-nav.next { right: 10px; }

  .day-master-choices {
    right: 8px;
    bottom: 8px;
    left: 8px;
    gap: 3px;
    padding: 4px;
    border-radius: 12px;
  }

  .day-master-choice {
    border-radius: 7px;
  }

  .day-master-choice span {
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
}

.chapter-next {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(110deg, rgba(15, 5, 43, 0.78), rgba(5, 1, 15, 0.94)),
    var(--aurato-clouds) center 72% / cover no-repeat;
}

.next-link h2 {
  font-family: "Espial", sans-serif;
}

.next-arrow {
  position: relative;
  display: grid;
  width: clamp(72px, 8vw, 104px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0 0 4px 4px;
  border-radius: 50%;
  color: #09031c;
  background: var(--lime);
  box-shadow:
    0 0 0 1px rgba(217, 255, 67, 0.24),
    0 18px 48px rgba(217, 255, 67, 0.22);
  font-family: "Espial", sans-serif;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1;
  transition:
    transform 160ms var(--ease),
    box-shadow 200ms var(--ease);
}

.next-arrow::before {
  position: absolute;
  inset: -2px;
  border: 2px solid var(--lime);
  border-radius: inherit;
  content: "";
  opacity: 0.22;
  pointer-events: none;
  transform: scale(0.94);
  will-change: opacity, transform;
  animation: next-arrow-breathe 3.2s var(--ease-in-out) infinite;
}

.next-link:focus-visible .next-arrow {
  outline: 2px solid var(--white);
  outline-offset: 6px;
  transform: none;
}

.next-link:active .next-arrow {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .next-link:hover .next-arrow {
    box-shadow:
      0 0 0 1px rgba(217, 255, 67, 0.36),
      0 22px 58px rgba(217, 255, 67, 0.3);
    transform: translate(7px, -7px) scale(1.04);
  }
}

@keyframes next-arrow-breathe {
  0%, 100% {
    opacity: 0.18;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.64;
    transform: scale(1.22);
  }
}

.all-sections,
.site-footer {
  color: var(--white);
  background: #09031c;
}

.chapter-mini-grid {
  gap: 8px;
  border: 0;
}

.chapter-mini {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.chapter-mini:hover,
.chapter-mini.current {
  color: #09031c;
  border-color: var(--cyan);
  background: var(--cyan);
}

.chapter-mini strong,
.footer-top h2 {
  font-family: "Espial", sans-serif;
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(5, 1, 15, 0.9), #05010f),
    var(--aurato-clouds) center bottom / cover no-repeat;
}

.footer-links a,
.footer-links button {
  font-family: "Espial", sans-serif;
}

.methodology-dialog {
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 61, 157, 0.16), transparent 32%),
    #100629;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.methodology-dialog::backdrop {
  background: rgba(3, 0, 12, 0.82);
}

.dialog-head h2 {
  font-family: "Espial", sans-serif;
}

.dialog-close {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  font-family: var(--sans);
}

.methodology-list,
.methodology-item {
  border-color: rgba(255, 255, 255, 0.15);
}

.methodology-item strong {
  color: var(--lime);
  font-family: "Espial", sans-serif;
}

.dialog-note {
  border-color: var(--clay);
  background: rgba(255, 61, 157, 0.11);
}

@keyframes brand-float {
  from { transform: translateY(-7px); }
  to { transform: translateY(8px); }
}

@keyframes aura-breathe {
  from { opacity: 0.18; transform: scale(0.94); }
  to { opacity: 0.34; transform: scale(1.05); }
}

@keyframes spectrum-shift {
  to { background-position: 220% 0; }
}

@media (max-aspect-ratio: 4 / 5) {
  :root {
    --aurato-clouds: url("assets/aurato-clouds-hd.jpg");
  }
}

@media (max-width: 980px) {
  .course-list {
    grid-template-columns: 1fr;
  }

  .scene-copy {
  text-align: left;
}

.mobile-language-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.mobile-menu .mobile-language-options button {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.mobile-menu .mobile-language-options button.is-active {
  color: #09031c;
  border-color: var(--lime);
  background: var(--lime);
}
}

@media (max-width: 640px) {
  .site-header {
    padding: 0 16px;
  }

  .brand {
    font-size: 14px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
  }

  .home-hero {
    padding-top: 88px;
    background-position: center;
  }

  .home-hero::before {
    inset: -14% -60%;
    background-size: 140vw auto;
  }

  .hero-brand-mark {
    width: 86px;
  }

  .hero-lockup {
    gap: 14px;
    margin-bottom: 20px;
  }

  .home-hero h1 {
    font-size: clamp(58px, 18vw, 72px);
  }

  .hero-product-line {
    margin: 14px 0 20px;
    font-size: 11px;
  }

  .hero-deck {
    font-size: 24px;
  }

  .chapter-card {
    min-height: 184px;
    grid-template-columns: 28px 1fr 24px;
    padding: 23px 19px;
    border-radius: 20px;
  }

  .chapter-hero::before {
    width: 76vw;
  }

  .title-frame {
    border-radius: 24px;
  }

  .scene {
    padding-right: 18px;
    padding-left: 18px;
  }

  .scene-headline {
    font-size: clamp(34px, 10.5vw, 50px);
  }

  .visual-stage {
    border-radius: 28px;
  }

  .chapter-mini-grid {
    gap: 7px;
  }

  .next-link {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 12px;
  }

  .next-arrow {
    width: 64px;
    font-size: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lockup,
  .home-hero::before,
  .chapter-hero::before,
  .hero-product-line {
    animation: none !important;
  }

  .next-arrow::before {
    opacity: 0.32;
    transform: scale(1.06);
    animation: none !important;
  }
}

html[data-locale="zh-Hant"] {
  --serif: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

html[data-locale="ja"] {
  --serif: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --mono: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}

html[data-locale="zh-Hant"] body,
html[data-locale="ja"] body {
  letter-spacing: 0;
  line-break: strict;
}

html[data-locale="zh-Hant"] :where(
  .desktop-nav,
  .mobile-menu a,
  .mobile-menu button,
  .eyebrow,
  .scene-kicker,
  .chapter-index,
  .visual-tag,
  .section-label,
  .button,
  .course-intro h2,
  .card-title,
  .manifesto h2,
  .title-frame h1,
  .scene-headline,
  .next-link h2,
  .chapter-mini strong,
  .footer-top h2,
  .footer-links,
  .dialog-head h2,
  .methodology-item strong,
  .not-found h1
),
html[data-locale="ja"] :where(
  .desktop-nav,
  .mobile-menu a,
  .mobile-menu button,
  .eyebrow,
  .scene-kicker,
  .chapter-index,
  .visual-tag,
  .section-label,
  .button,
  .course-intro h2,
  .card-title,
  .manifesto h2,
  .title-frame h1,
  .scene-headline,
  .next-link h2,
  .chapter-mini strong,
  .footer-top h2,
  .footer-links,
  .dialog-head h2,
  .methodology-item strong,
  .not-found h1
) {
  font-family: var(--sans);
  letter-spacing: 0;
}

html[data-locale="zh-Hant"] :where(.title-frame h1, .scene-headline, .course-intro h2, .manifesto h2, .next-link h2, .footer-top h2),
html[data-locale="ja"] :where(.title-frame h1, .scene-headline, .course-intro h2, .manifesto h2, .next-link h2, .footer-top h2) {
  line-height: 1.12;
}

html[data-locale="zh-Hant"] :where(.desktop-nav, .eyebrow, .scene-kicker, .chapter-index, .visual-tag, .section-label),
html[data-locale="ja"] :where(.desktop-nav, .eyebrow, .scene-kicker, .chapter-index, .visual-tag, .section-label) {
  letter-spacing: 0.045em;
}

html[data-locale="zh-Hant"] :where(.brand, .brand-word, .home-hero h1),
html[data-locale="ja"] :where(.brand, .brand-word, .home-hero h1) {
  font-family: "Espial", sans-serif;
}

/* Chapter 07 — moving time, activation and scale */
.visual-timing-baseline-orbit,
.visual-timing-layer-stack,
.visual-timing-activation-convergence,
.visual-timing-scale-weather,
.visual-daily-energy-briefing,
.visual-timing-layer-guide {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-timing-baseline-orbit::before,
.visual-timing-layer-stack::before,
.visual-timing-activation-convergence::before,
.visual-timing-scale-weather::before,
.visual-daily-energy-briefing::before,
.visual-timing-layer-guide::before {
  display: none;
}

.visual-timing-baseline-orbit .visual-tag,
.visual-timing-activation-convergence .visual-tag,
.visual-timing-scale-weather .visual-tag {
  display: none;
}

.visual-timing-layer-stack .visual-tag,
.visual-daily-energy-briefing .visual-tag,
.visual-timing-layer-guide .visual-tag {
  z-index: 5;
  padding: 8px 13px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.78);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.15;
  backdrop-filter: blur(10px);
}

.chapter7-label {
  min-width: 0;
  max-width: 168px;
  padding: 6px 9px;
  border-radius: 11px;
  background: rgba(9, 3, 28, 0.8);
  font-size: clamp(8px, 0.78vw, 11px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.baseline-label-natal { top: 6%; left: 13%; border-color: rgba(217, 255, 67, 0.72); color: var(--lime); }
.baseline-label-luck { top: 6%; left: 42%; border-color: rgba(143, 77, 255, 0.76); }
.baseline-label-year { top: 6%; left: 70%; border-color: rgba(255, 126, 91, 0.74); }
.baseline-label-near { right: 3%; bottom: 5%; left: auto; border-color: rgba(75, 232, 255, 0.72); color: var(--cyan); transform: none; }

.activation-label-repeat { top: 6%; left: 15%; border-color: rgba(255, 61, 157, 0.74); }
.activation-label-contact { top: 6%; left: 49%; border-color: rgba(75, 165, 255, 0.74); }
.activation-label-converge { top: 6%; left: 83%; border-color: rgba(75, 232, 255, 0.72); }
.activation-label-result { right: 3%; bottom: 5%; left: auto; border-color: rgba(217, 255, 67, 0.72); color: var(--lime); transform: none; }

.scale-label-decade { top: 6%; left: 13%; border-color: rgba(143, 77, 255, 0.76); }
.scale-label-year { top: 6%; left: 39%; border-color: rgba(255, 126, 91, 0.74); }
.scale-label-month { top: 6%; left: 66%; border-color: rgba(255, 231, 75, 0.74); }
.scale-label-day { top: 6%; right: 3%; left: auto; border-color: rgba(75, 232, 255, 0.72); color: var(--cyan); transform: none; }

.scene:has(.visual-timing-baseline-orbit) .scene-headline,
.scene:has(.visual-daily-energy-briefing) .scene-headline {
  font-size: clamp(38px, 3.5vw, 48px);
}

.timing-layer-stack-chart {
  position: absolute;
  inset: 17% 5% 5%;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
  font-family: var(--sans);
}

.timing-layer-row {
  display: grid;
  grid-template-columns: 28px 128px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--timing-color) 52%, transparent);
  border-radius: 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--timing-color) 12%, transparent), rgba(255, 255, 255, 0.025));
  animation: timing-layer-in 700ms var(--ease) both;
  animation-delay: calc(var(--row) * 90ms);
}

.timing-layer-index { color: var(--timing-color); font-size: 12px; font-weight: 700; }
.timing-layer-row > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.timing-layer-row small { color: var(--timing-color); font-size: 11px; font-weight: 700; }
.timing-layer-row strong { color: var(--white); font-size: 13px; }
.timing-layer-row p { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 11px; }
.timing-layer-row > i { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.timing-layer-row > i b { width: var(--duration); height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--timing-color), color-mix(in srgb, var(--timing-color) 34%, white)); box-shadow: 0 0 16px color-mix(in srgb, var(--timing-color) 30%, transparent); transform-origin: left; animation: timing-duration-in 900ms var(--ease) both; animation-delay: calc(var(--row) * 100ms); }
.timing-layer-luck { --timing-color: #8f4dff; }
.timing-layer-year { --timing-color: #ff7e5b; }
.timing-layer-month { --timing-color: #ffe74b; }
.timing-layer-day { --timing-color: #4be8ff; }
.timing-stack-note { justify-self: center; margin: 0; padding: 6px 11px; border: 1px solid rgba(217, 255, 67, 0.38); border-radius: 999px; color: var(--lime); font-size: 11px; }

.daily-briefing-chart {
  position: absolute;
  inset: 17% 5% 5%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  font-family: var(--sans);
}

.daily-briefing-top { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1px solid rgba(75, 232, 255, 0.36); border-radius: 15px; background: rgba(75, 232, 255, 0.06); }
.daily-briefing-top span { color: var(--cyan); font-size: 12px; font-weight: 700; }
.daily-briefing-top strong { padding: 5px 11px; border-radius: 999px; color: #09031c; background: var(--lime); font-size: 13px; }
.daily-briefing-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.daily-briefing-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--step-color) 48%, transparent); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--step-color) 11%, transparent), rgba(255, 255, 255, 0.02)); }
.daily-briefing-step > span { color: var(--step-color); font-size: 11px; font-weight: 700; }
.daily-briefing-step > div { min-width: 0; display: grid; gap: 2px; }
.daily-briefing-step small { color: rgba(255, 255, 255, 0.62); font-size: 11px; }
.daily-briefing-step strong { color: var(--white); font-size: 13px; }
.step-cyan { --step-color: #4be8ff; }
.step-magenta { --step-color: #ff3d9d; }
.step-yellow { --step-color: #ffe74b; }
.step-lime { --step-color: #d9ff43; }
.daily-briefing-capacity { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.daily-briefing-capacity span { color: rgba(255, 255, 255, 0.72); font-size: 11px; }
.daily-briefing-capacity i { position: relative; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.09); }
.daily-briefing-capacity i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--level); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--clay)); }
.daily-briefing-chart > p { justify-self: center; margin: 0; padding: 7px 13px; border: 1px solid rgba(217, 255, 67, 0.46); border-radius: 999px; color: var(--lime); background: rgba(217, 255, 67, 0.06); font-size: 12px; font-weight: 700; }

.timing-layer-guide-chart {
  position: absolute;
  inset: 17% 5% 5%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  font-family: var(--sans);
}

.timing-guide-direction { display: flex; justify-content: center; gap: 12px; align-items: center; margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 12px; }
.timing-guide-direction i { color: var(--lime); font-size: 18px; font-style: normal; }
.timing-guide-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.timing-guide-card { position: relative; display: grid; grid-template-rows: auto 48px auto auto auto; gap: 5px; justify-items: center; align-content: center; padding: 10px 8px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--guide-color) 52%, transparent); border-radius: 18px; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--guide-color) 15%, transparent), transparent 48%), rgba(255, 255, 255, 0.025); text-align: center; animation: timing-guide-in 700ms var(--ease) both; animation-delay: calc(var(--column) * 100ms); }
.timing-guide-card > span { color: var(--guide-color); font-size: 11px; font-weight: 700; }
.timing-guide-card > i { width: 44px; aspect-ratio: 1; align-self: center; border: 2px solid var(--guide-color); border-radius: 50%; box-shadow: 0 0 18px color-mix(in srgb, var(--guide-color) 25%, transparent); }
.timing-guide-card:nth-child(2) > i { width: 37px; }
.timing-guide-card:nth-child(3) > i { width: 30px; }
.timing-guide-card:nth-child(4) > i { width: 23px; }
.timing-guide-card strong { color: var(--white); font-size: 13px; }
.timing-guide-card small { color: color-mix(in srgb, var(--guide-color) 80%, white); font-size: 11px; }
.timing-guide-card p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 11px; }
.timing-guide-luck { --guide-color: #8f4dff; }
.timing-guide-year { --guide-color: #ff7e5b; }
.timing-guide-month { --guide-color: #ffe74b; }
.timing-guide-day { --guide-color: #4be8ff; }

@keyframes timing-layer-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes timing-duration-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes timing-guide-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 640px) {
  .chapter7-label { max-width: 92px; padding: 4px 6px; font-size: 7px; }
  .baseline-label-natal,
  .activation-label-repeat,
  .scale-label-decade { left: 14%; }
  .baseline-label-luck { left: 48%; }
  .baseline-label-year { top: 18%; left: 82%; }
  .activation-label-contact { left: 52%; }
  .activation-label-converge { top: 18%; left: 85%; }
  .scale-label-year { left: 43%; }
  .scale-label-month { left: 72%; }
  .scale-label-day { top: 18%; right: 3%; left: auto; }

  .visual-timing-layer-stack,
  .visual-daily-energy-briefing { min-height: 310px; aspect-ratio: auto; }
  .visual-timing-layer-guide { min-height: 280px; aspect-ratio: auto; }
  .visual-timing-layer-stack .visual-tag,
  .visual-daily-energy-briefing .visual-tag,
  .visual-timing-layer-guide .visual-tag { padding: 6px 9px; font-size: 10px; }

  .timing-layer-stack-chart { inset: 17% 3% 4%; gap: 6px; }
  .timing-layer-row { grid-template-columns: 22px 102px minmax(0, 1fr); gap: 6px; padding: 6px 7px; }
  .timing-layer-index,
  .timing-layer-row strong { font-size: 9px; }
  .timing-layer-row small,
  .timing-layer-row p,
  .timing-stack-note { font-size: 8px; }

  .daily-briefing-chart { inset: 17% 3% 4%; gap: 7px; }
  .daily-briefing-top { padding: 7px 9px; }
  .daily-briefing-top span,
  .daily-briefing-top strong { font-size: 9px; }
  .daily-briefing-flow { gap: 6px; }
  .daily-briefing-step { grid-template-columns: 21px minmax(0, 1fr); gap: 6px; padding: 7px; }
  .daily-briefing-step > span,
  .daily-briefing-step small { font-size: 8px; }
  .daily-briefing-step strong { font-size: 9px; }
  .daily-briefing-capacity { grid-template-columns: 82px minmax(0, 1fr); padding: 7px; }
  .daily-briefing-capacity span,
  .daily-briefing-chart > p { font-size: 8px; }

  .timing-layer-guide-chart { inset: 18% 3% 4%; gap: 8px; }
  .timing-guide-direction { gap: 8px; font-size: 8px; }
  .timing-guide-columns { gap: 5px; }
  .timing-guide-card { grid-template-rows: auto 35px auto auto auto; gap: 3px; padding: 7px 4px; border-radius: 13px; }
  .timing-guide-card > span,
  .timing-guide-card small,
  .timing-guide-card p { font-size: 7px; }
  .timing-guide-card strong { font-size: 8px; }
  .timing-guide-card > i { width: 32px; }
  .timing-guide-card:nth-child(2) > i { width: 27px; }
  .timing-guide-card:nth-child(3) > i { width: 22px; }
  .timing-guide-card:nth-child(4) > i { width: 17px; }

  .scene:has(.visual-timing-baseline-orbit) .scene-headline,
  .scene:has(.visual-daily-energy-briefing) .scene-headline { font-size: clamp(32px, 9.6vw, 42px); }
}

@media (prefers-reduced-motion: reduce) {
  .timing-layer-row,
  .timing-layer-row > i b,
  .timing-guide-card { animation: none !important; }
}

/* Chapter 08 — four action strategies and one shared engine */
.visual-strategy-attack-launch,
.visual-strategy-defend-boundary,
.visual-strategy-repair-atelier,
.visual-strategy-prepare-terraces,
.visual-unified-engine-flow,
.visual-agency-compass-map,
.visual-strategy-quick-reference,
.visual-product-engine-map {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.visual-strategy-attack-launch::before,
.visual-strategy-defend-boundary::before,
.visual-strategy-repair-atelier::before,
.visual-strategy-prepare-terraces::before,
.visual-unified-engine-flow::before,
.visual-agency-compass-map::before,
.visual-strategy-quick-reference::before,
.visual-product-engine-map::before {
  display: none;
}

.visual-strategy-attack-launch .visual-tag,
.visual-strategy-defend-boundary .visual-tag,
.visual-strategy-repair-atelier .visual-tag,
.visual-strategy-prepare-terraces .visual-tag {
  display: none;
}

.visual-unified-engine-flow .visual-tag,
.visual-agency-compass-map .visual-tag,
.visual-strategy-quick-reference .visual-tag,
.visual-product-engine-map .visual-tag {
  z-index: 8;
  padding: 8px 13px;
  border: 1px solid rgba(75, 232, 255, 0.4);
  border-radius: 999px;
  background: rgba(9, 3, 28, 0.82);
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.15;
  backdrop-filter: blur(10px);
}

.chapter8-label {
  min-width: 0;
  max-width: 172px;
  padding: 7px 10px;
  border-radius: 11px;
  background: rgba(9, 3, 28, 0.84);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  backdrop-filter: blur(10px);
}

.scene:has(.visual-product-engine-map) .scene-headline {
  font-size: clamp(36px, 3.35vw, 50px);
}

.attack-label-resource { top: 6%; left: 4%; border-color: rgba(217, 255, 67, 0.78); color: var(--lime); transform: none; }
.attack-label-window { top: 6%; right: 4%; left: auto; border-color: rgba(75, 232, 255, 0.78); color: var(--cyan); transform: none; }
.attack-label-risk { right: 4%; bottom: 5%; left: auto; border-color: rgba(255, 126, 91, 0.78); transform: none; }

.defend-label-pressure { top: 6%; left: 4%; border-color: rgba(255, 61, 157, 0.76); color: #ff91c7; transform: none; }
.defend-label-boundary { top: 6%; right: 4%; left: auto; border-color: rgba(143, 77, 255, 0.82); transform: none; }
.defend-label-essential { bottom: 5%; left: 4%; border-color: rgba(217, 255, 67, 0.78); color: var(--lime); transform: none; }

.repair-label-damage { top: 6%; left: 4%; border-color: rgba(255, 126, 91, 0.78); transform: none; }
.repair-label-connect { top: 42%; left: 4%; border-color: rgba(75, 232, 255, 0.78); color: var(--cyan); transform: none; }
.repair-label-restore { right: 4%; bottom: 5%; left: auto; border-color: rgba(217, 255, 67, 0.78); color: var(--lime); transform: none; }

.prepare-label-research { top: 6%; left: 4%; border-color: rgba(75, 232, 255, 0.78); color: var(--cyan); transform: none; }
.prepare-label-practise { top: 39%; left: 4%; border-color: rgba(217, 255, 67, 0.78); color: var(--lime); transform: none; }
.prepare-label-position { bottom: 5%; left: 4%; border-color: rgba(255, 61, 157, 0.76); transform: none; }
.prepare-label-window { top: 6%; right: 4%; left: auto; border-color: rgba(255, 231, 75, 0.78); color: #ffe74b; transform: none; }

.unified-engine-chart,
.agency-map-chart,
.strategy-reference-grid,
.product-engine-chart {
  position: absolute;
  inset: 17% 5% 5%;
  font-family: var(--sans);
}

.unified-engine-chart {
  display: grid;
  grid-template-rows: auto 11px auto minmax(0, 1fr) auto;
  gap: 8px;
}

.engine-input-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.engine-input-row span {
  padding: 8px 9px;
  border: 1px solid rgba(75, 232, 255, 0.38);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(75, 232, 255, 0.06);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.engine-flow-line { position: relative; }
.engine-flow-line::before,
.engine-flow-line::after { content: ""; position: absolute; left: 50%; background: rgba(75, 232, 255, 0.54); transform: translateX(-50%); }
.engine-flow-line::before { top: 0; width: 1px; height: 100%; }
.engine-flow-line::after { bottom: -1px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 12px rgba(75, 232, 255, 0.72); }

.engine-core-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(217, 255, 67, 0.5);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 130%, rgba(217, 255, 67, 0.2), transparent 58%), rgba(255, 255, 255, 0.035);
  text-align: center;
}

.engine-core-node small { color: var(--lime); font-size: 12px; font-weight: 700; }
.engine-core-node strong { position: relative; z-index: 2; color: var(--white); font-size: clamp(14px, 1.35vw, 18px); }
.engine-pulse { position: absolute; bottom: -38px; width: 110px; height: 72px; border: 2px solid rgba(217, 255, 67, 0.24); border-radius: 50%; animation: engine-pulse 2.4s ease-in-out infinite alternate; }

.engine-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.engine-output-grid > div {
  min-height: 48px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(143, 77, 255, 0.42);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(143, 77, 255, 0.11), rgba(255, 255, 255, 0.025));
  animation: strategy-card-in 650ms var(--ease) both;
  animation-delay: calc(var(--product) * 70ms);
}

.engine-output-grid > div > span { color: var(--cyan); font-size: 11px; font-weight: 700; }
.engine-output-grid strong { color: var(--white); font-size: 12px; line-height: 1.2; }
.engine-sync-note { justify-self: center; margin: 0; padding: 6px 11px; border-radius: 999px; color: #09031c; background: var(--lime); font-size: 11px; font-weight: 800; }

.agency-map-chart {
  display: grid;
  grid-template-columns: 31% 10% 18% minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.agency-signal-stack { display: grid; gap: 9px; }
.agency-signal-stack > div {
  min-height: 58px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(75, 232, 255, 0.34);
  border-radius: 14px;
  background: rgba(75, 232, 255, 0.045);
}
.agency-signal-stack > div > span { color: var(--cyan); font-size: 11px; font-weight: 700; }
.agency-signal-stack div div { display: grid; gap: 2px; }
.agency-signal-stack strong { color: var(--white); font-size: 13px; }
.agency-signal-stack small { color: rgba(255, 255, 255, 0.62); font-size: 11px; line-height: 1.2; }

.agency-route { position: relative; height: 72%; }
.agency-route::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--lime)); }
.agency-route i { position: absolute; right: 0; left: 0; height: 1px; background: rgba(75, 232, 255, 0.32); transform-origin: right; }
.agency-route i:nth-child(1) { top: 22%; transform: rotate(18deg); }
.agency-route i:nth-child(2) { top: 50%; }
.agency-route i:nth-child(3) { top: 78%; transform: rotate(-18deg); }

.agency-compass-core { position: relative; width: 82px; max-width: 100%; aspect-ratio: 1; justify-self: center; border: 2px solid rgba(217, 255, 67, 0.68); border-radius: 50%; box-shadow: inset 0 0 30px rgba(143, 77, 255, 0.22), 0 0 26px rgba(217, 255, 67, 0.12); }
.agency-compass-core::before,
.agency-compass-core::after { content: ""; position: absolute; inset: 13%; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; }
.agency-compass-core::after { inset: 38%; background: var(--clay); box-shadow: 0 0 18px rgba(255, 61, 157, 0.72); }
.agency-compass-core span { position: absolute; top: 11%; bottom: 11%; left: 50%; width: 1px; background: rgba(255, 255, 255, 0.15); }
.agency-compass-core i { position: absolute; top: 19%; left: calc(50% - 3px); width: 6px; height: 34%; border-radius: 999px 999px 45% 45%; background: linear-gradient(var(--lime), var(--cyan)); box-shadow: 0 0 12px rgba(217, 255, 67, 0.44); transform-origin: 50% 92%; transform: rotate(33deg); }

.agency-choice-card { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(255, 61, 157, 0.44); border-radius: 20px; background: radial-gradient(circle at 100% 0, rgba(255, 61, 157, 0.14), transparent 46%), rgba(255, 255, 255, 0.03); }
.agency-choice-card > small { color: #ff91c7; font-size: 12px; font-weight: 700; }
.agency-choice-card > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.agency-choice-card > div span { padding: 7px 5px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: rgba(255, 255, 255, 0.72); font-size: 11px; text-align: center; }
.agency-choice-card > strong { color: var(--lime); font-size: clamp(14px, 1.3vw, 18px); line-height: 1.2; }

.strategy-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.strategy-reference-card {
  --strategy-color: var(--cyan);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 3px 8px;
  align-content: center;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--strategy-color) 54%, transparent);
  border-radius: 18px;
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--strategy-color) 16%, transparent), transparent 45%), rgba(255, 255, 255, 0.028);
  animation: strategy-card-in 650ms var(--ease) both;
  animation-delay: calc(var(--strategy) * 90ms);
}
.strategy-reference-card > span { grid-row: 1 / -1; color: var(--strategy-color); font-size: 12px; font-weight: 800; }
.strategy-reference-card strong { color: var(--white); font-size: clamp(15px, 1.4vw, 19px); }
.strategy-reference-card small { color: color-mix(in srgb, var(--strategy-color) 78%, white); font-size: 12px; font-weight: 700; line-height: 1.2; }
.strategy-reference-card p { margin: 4px 0 0; color: rgba(255, 255, 255, 0.65); font-size: 12px; line-height: 1.25; }
.reference-attack { --strategy-color: #ff7e5b; }
.reference-defend { --strategy-color: #8f4dff; }
.reference-repair { --strategy-color: #4be8ff; }
.reference-prepare { --strategy-color: #d9ff43; }

.product-engine-chart { display: grid; grid-template-columns: 31% 9% minmax(0, 1fr); gap: 5px; align-items: stretch; }
.product-engine-source { align-self: center; display: grid; gap: 7px; padding: 14px; border: 1px solid rgba(217, 255, 67, 0.5); border-radius: 20px; background: radial-gradient(circle at 50% 100%, rgba(217, 255, 67, 0.14), transparent 55%), rgba(255, 255, 255, 0.03); text-align: center; }
.product-engine-source small { color: var(--lime); font-size: 12px; font-weight: 700; }
.product-engine-source strong { color: var(--white); font-size: clamp(17px, 1.7vw, 22px); }
.product-engine-source span { padding: 5px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 999px; color: rgba(255, 255, 255, 0.64); font-size: 11px; }
.product-engine-spine { position: relative; display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; }
.product-engine-spine i { position: absolute; top: 10%; bottom: 10%; left: 50%; width: 1px; background: linear-gradient(var(--lime), var(--cyan), var(--clay)); }
.product-engine-spine b { position: relative; width: 9px; height: 9px; justify-self: center; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(75, 232, 255, 0.58); }
.product-engine-products { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; }
.product-engine-row { display: grid; grid-template-columns: 29px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--product-color) 44%, transparent); border-radius: 13px; background: linear-gradient(90deg, color-mix(in srgb, var(--product-color) 10%, transparent), rgba(255, 255, 255, 0.02)); animation: strategy-card-in 650ms var(--ease) both; animation-delay: calc(var(--product) * 70ms); }
.product-engine-row > span { color: var(--product-color); font-size: 11px; font-weight: 800; }
.product-engine-row > div { min-width: 0; display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 8px; align-items: baseline; }
.product-engine-row strong { color: var(--white); font-size: 12px; line-height: 1.15; }
.product-engine-row small { color: rgba(255, 255, 255, 0.62); font-size: 11px; line-height: 1.2; }
.product-core { --product-color: #ff7e5b; }
.product-energy { --product-color: #d9ff43; }
.product-wealth { --product-color: #ffe74b; }
.product-matching { --product-color: #ff3d9d; }
.product-daily { --product-color: #4be8ff; }

@keyframes engine-pulse { from { opacity: 0.34; transform: scale(0.86); } to { opacity: 0.76; transform: scale(1.1); } }
@keyframes strategy-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
  .chapter8-label { max-width: 102px; padding: 5px 7px; font-size: 8px; }
  .repair-label-connect { top: 48%; }
  .prepare-label-practise { top: 43%; }

  .visual-unified-engine-flow,
  .visual-agency-compass-map,
  .visual-strategy-quick-reference,
  .visual-product-engine-map { min-height: 360px; aspect-ratio: auto; }
  .visual-unified-engine-flow .visual-tag,
  .visual-agency-compass-map .visual-tag,
  .visual-strategy-quick-reference .visual-tag,
  .visual-product-engine-map .visual-tag { padding: 6px 9px; font-size: 10px; }
  .unified-engine-chart,
  .agency-map-chart,
  .strategy-reference-grid,
  .product-engine-chart { inset: 17% 3% 4%; }

  .unified-engine-chart { grid-template-rows: auto 9px auto minmax(0, 1fr) auto; gap: 6px; }
  .engine-input-row { gap: 5px; }
  .engine-input-row span { padding: 6px 4px; font-size: 9px; }
  .engine-core-node { padding: 9px 7px; }
  .engine-core-node small { font-size: 10px; }
  .engine-core-node strong { font-size: 12px; }
  .engine-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .engine-output-grid > div { min-height: 39px; grid-template-columns: 18px minmax(0, 1fr); padding: 5px; }
  .engine-output-grid > div > span { font-size: 9px; }
  .engine-output-grid strong { font-size: 10px; }
  .engine-sync-note { padding: 5px 8px; font-size: 9px; }

  .agency-map-chart { grid-template-columns: 34% 8% 17% minmax(0, 1fr); gap: 5px; }
  .agency-signal-stack { gap: 6px; }
  .agency-signal-stack > div { min-height: 54px; grid-template-columns: 20px minmax(0, 1fr); gap: 5px; padding: 7px 6px; }
  .agency-signal-stack > div > span,
  .agency-signal-stack small { font-size: 9px; }
  .agency-signal-stack strong { font-size: 10px; }
  .agency-compass-core { width: 48px; }
  .agency-choice-card { gap: 7px; padding: 9px 7px; }
  .agency-choice-card > small { font-size: 9px; }
  .agency-choice-card > div { gap: 4px; }
  .agency-choice-card > div span { padding: 5px 2px; font-size: 8px; }
  .agency-choice-card > strong { font-size: 11px; }

  .strategy-reference-grid { gap: 7px; }
  .strategy-reference-card { grid-template-columns: 22px minmax(0, 1fr); padding: 9px 7px; border-radius: 14px; }
  .strategy-reference-card > span { font-size: 9px; }
  .strategy-reference-card strong { font-size: 13px; }
  .strategy-reference-card small { font-size: 10px; }
  .strategy-reference-card p { font-size: 9px; }

  .product-engine-chart { grid-template-columns: 30% 7% minmax(0, 1fr); gap: 3px; }
  .product-engine-source { gap: 5px; padding: 9px 6px; border-radius: 15px; }
  .product-engine-source small { font-size: 9px; }
  .product-engine-source strong { font-size: 14px; }
  .product-engine-source span { padding: 4px 2px; font-size: 8px; }
  .product-engine-products { gap: 5px; }
  .product-engine-row { grid-template-columns: 22px minmax(0, 1fr); gap: 4px; padding: 6px 5px; }
  .product-engine-row > span { font-size: 9px; }
  .product-engine-row > div { grid-template-columns: 1fr; gap: 2px; }
  .product-engine-row strong { font-size: 10px; }
  .product-engine-row small { font-size: 9px; }

  .scene:has(.visual-product-engine-map) .scene-headline { font-size: clamp(30px, 8.9vw, 39px); }
}

@media (prefers-reduced-motion: reduce) {
  .engine-pulse,
  .engine-output-grid > div,
  .strategy-reference-card,
  .product-engine-row { animation: none !important; }
}

/* Chart readability — keep diagram copy legible at the two-column course size. */
.visual-caption {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.45;
}

:is(
  .visual-function-map,
  .visual-output-flow,
  .visual-pressure-curve,
  .visual-exchange-balance,
  .visual-relation-spectrum,
  .visual-generating-orbit-v2,
  .visual-regulating-star-v2,
  .visual-generating-guide,
  .visual-regulating-guide,
  .visual-directional-exchange,
  .visual-matching-dimensions,
  .visual-matching-evidence-stack,
  .visual-matching-dashboard,
  .visual-life-windows-overview,
  .visual-position-context-switch,
  .visual-life-windows-guide
) .visual-tag {
  padding: 8px 13px;
  font-size: clamp(12px, 0.95vw, 14px);
  line-height: 1.15;
}

.function-node strong,
.function-core strong,
.pressure-zone strong,
.exchange-name,
.relation-band strong,
.generating-node,
.regulating-node,
.generating-core strong,
.regulating-core strong,
.guide-element,
.guide-meaning strong,
.direction-lane strong,
.matching-layer-title,
.matching-dashboard-copy strong,
.life-window strong,
.life-windows-core strong,
.position-signal strong,
.position-context strong,
.life-guide-pillar,
.life-guide-copy strong {
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.2;
}

.function-node small,
.function-core small,
.output-reservoir span,
.output-stop,
.pressure-zone span,
.pressure-axis,
.exchange-meter small,
.exchange-result span,
.relation-orb small,
.relation-band small,
.relation-note,
.generating-core small,
.regulating-core small,
.guide-meaning small,
.regulating-pair,
.regulating-pair span,
.regulating-question,
.direction-person small,
.direction-person span,
.direction-lane small,
.direction-lanes > p,
.matching-meaning-layer > div span,
.matching-proof-layer > div span,
.matching-dashboard-copy small,
.matching-dashboard-question,
.life-window > span,
.life-window small,
.life-window p,
.life-windows-core small,
.position-signal small,
.position-signal span,
.position-context > span,
.position-context small,
.position-context p,
.position-context-note,
.life-guide-index,
.life-guide-copy small {
  font-size: clamp(10px, 0.82vw, 12px);
}

.output-stop strong,
.output-cost,
.exchange-result strong {
  font-size: clamp(11px, 0.9vw, 13px);
}

.matching-axis {
  max-width: 138px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.2;
}

.matching-radar-legend {
  gap: 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(11px, 0.86vw, 13px);
  line-height: 1.2;
}

.matching-radar-legend i {
  width: 22px;
  height: 5px;
}

.matching-dashboard-index,
.life-guide-index {
  font-size: clamp(11px, 0.86vw, 13px);
}

@media (max-width: 640px) {
  .visual-caption {
    font-size: 12.5px;
  }

  .visual-exchange-balance {
    min-height: 260px;
    aspect-ratio: auto;
  }

  .visual-matching-dashboard {
    min-height: 300px;
    aspect-ratio: auto;
  }

  :is(
    .visual-function-map,
    .visual-output-flow,
    .visual-pressure-curve,
    .visual-exchange-balance,
    .visual-relation-spectrum,
    .visual-generating-orbit-v2,
    .visual-regulating-star-v2,
    .visual-generating-guide,
    .visual-regulating-guide,
    .visual-directional-exchange,
    .visual-matching-dimensions,
    .visual-matching-evidence-stack,
    .visual-matching-dashboard,
    .visual-life-windows-overview,
    .visual-position-context-switch,
    .visual-life-windows-guide
  ) .visual-tag {
    padding: 6px 9px;
    font-size: 10px;
  }

  .function-node strong,
  .function-core strong,
  .pressure-zone strong,
  .exchange-name,
  .relation-band strong,
  .generating-node,
  .regulating-node,
  .generating-core strong,
  .regulating-core strong,
  .guide-element,
  .guide-meaning strong,
  .direction-lane strong,
  .matching-layer-title,
  .matching-dashboard-copy strong,
  .life-window strong,
  .life-windows-core strong,
  .position-signal strong,
  .position-context strong,
  .life-guide-pillar,
  .life-guide-copy strong {
    font-size: 10.5px;
  }

  .function-node small,
  .function-core small,
  .output-reservoir span,
  .output-stop,
  .pressure-zone span,
  .pressure-axis,
  .exchange-meter small,
  .exchange-result span,
  .relation-orb small,
  .relation-band small,
  .relation-note,
  .generating-core small,
  .regulating-core small,
  .guide-meaning small,
  .regulating-pair,
  .regulating-pair span,
  .regulating-question,
  .direction-person small,
  .direction-person span,
  .direction-lane small,
  .direction-lanes > p,
  .matching-meaning-layer > div span,
  .matching-proof-layer > div span,
  .matching-dashboard-copy small,
  .matching-dashboard-question,
  .life-window > span,
  .life-window small,
  .life-window p,
  .life-windows-core small,
  .position-signal small,
  .position-signal span,
  .position-context > span,
  .position-context small,
  .position-context p,
  .position-context-note,
  .life-guide-index,
  .life-guide-copy small {
    font-size: 9px;
  }

  .matching-axis {
    max-width: 88px;
    font-size: 10.5px;
  }

  .matching-radar-legend {
    gap: 5px;
    font-size: 9px;
  }

  .matching-radar-legend i {
    width: 16px;
    height: 4px;
  }

  .matching-dashboard-index,
  .life-guide-index,
  .output-stop strong,
  .output-cost,
  .exchange-result strong {
    font-size: 9.5px;
  }
}