:root {
  --soul-yellow: #f3d562;
  --soul-gold: #d9a92c;
  --soul-cream: #fff9dc;
  --soul-teal: #167a82;
  --soul-ink: #2f332d;
  --soul-coral: #d95b42;
}

.soul-course-page {
  margin: 0;
  color: var(--soul-ink);
  background: var(--soul-cream);
}

.soul-course-nav {
  position: relative;
  z-index: 50;
  background: rgba(255, 253, 243, .96);
}

.soul-course-nav .nav-course-trigger.active { color: var(--soul-teal); }

.soul-hero {
  position: relative;
  min-height: calc(100vh - 86px);
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 12%, rgba(255,255,255,.86) 0 5%, transparent 26%),
    radial-gradient(circle at 46% 105%, rgba(241,164,126,.32), transparent 34%),
    linear-gradient(118deg, #fffbe8 0 42%, #f7de78 72%, #efcb4d 100%);
}

.soul-hero::before,
.soul-hero::after {
  content: "✦";
  position: absolute;
  color: rgba(255,255,255,.82);
  font-size: 42px;
  line-height: 1;
}

.soul-hero::before { left: 3.2%; top: 8%; }
.soul-hero::after { right: 3%; bottom: 8%; font-size: 28px; }

.soul-hero-grid {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 132px);
  display: grid;
  grid-template-columns: minmax(430px, .9fr) minmax(610px, 1.1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 88px);
  padding-block: 64px 50px;
}

.soul-hero-copy { max-width: 590px; }

.soul-kicker {
  margin: 0 0 18px;
  color: var(--soul-teal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
}

.soul-hero h1 {
  margin: 0 0 26px;
  color: var(--soul-coral);
  font: 700 clamp(54px, 5.6vw, 86px)/1.08 "Noto Serif TC", serif;
  letter-spacing: -.055em;
}

.soul-hero h1 em { color: var(--soul-ink); font-style: normal; }

.soul-positioning {
  max-width: 560px;
  margin: 0;
  padding-left: 19px;
  border-left: 4px solid var(--soul-teal);
  color: #42453e;
  font: 600 20px/1.85 "Noto Serif TC", serif;
}

.soul-methods {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 24px 0 36px;
  color: var(--soul-teal);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
}

.soul-methods i { color: var(--soul-coral); font-style: normal; }

.soul-path {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
  align-items: center;
  padding-top: 25px;
  border-top: 1px solid rgba(47,51,45,.2);
}

.soul-path div { min-width: 0; }
.soul-path small,
.soul-path b { display: block; }
.soul-path small { margin-bottom: 4px; color: var(--soul-coral); font-size: 11px; letter-spacing: .12em; }
.soul-path b { white-space: nowrap; font-size: 15px; }
.soul-path > span { height: 1px; background: rgba(22,122,130,.55); position: relative; }
.soul-path > span::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 5px solid var(--soul-teal); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }

.soul-journey {
  position: relative;
  min-height: 850px;
  isolation: isolate;
}

.compass-backdrop {
  position: absolute;
  z-index: -2;
  width: 720px;
  height: 720px;
  right: -170px;
  top: 350px;
  transform: translateY(-50%);
  background: url("assets/soul-navigation/compass-backdrop-v2.webp") center 47% / cover no-repeat;
  opacity: .98;
  filter: saturate(1.06) brightness(1.04);
  -webkit-mask-image: radial-gradient(ellipse 47% 49% at 50% 48%, #000 0 58%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.42) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 47% 49% at 50% 48%, #000 0 58%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.42) 82%, transparent 100%);
}

.journey-caption {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 4px;
  margin: 0;
  max-width: none;
  width: max-content;
  text-align: right;
}

.journey-caption span,
.journey-caption b { display: block; }
.journey-caption span { color: var(--soul-teal); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.journey-caption b { margin-top: 5px; color: #34372f; font: 600 17px/1.65 "Noto Serif TC", serif; white-space: nowrap; }

.journey-line {
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 1%;
  top: 79%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(22,122,130,.6) 8% 92%, transparent);
}

.journey-line::after {
  content: "";
  position: absolute;
  right: 2%;
  top: -4px;
  border-left: 9px solid var(--soul-teal);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.journey-card {
  position: absolute;
  z-index: 1;
  width: 168px;
  margin: 0;
  transition: transform .28s ease, filter .28s ease;
}

.journey-card:hover { transform: translateY(-10px) rotate(0deg); filter: drop-shadow(0 20px 24px rgba(70,50,10,.18)); z-index: 5; }
.journey-card img { display: block; width: 100%; border: 5px solid rgba(255,255,255,.92); border-radius: 18px; box-shadow: 0 18px 40px rgba(74,53,8,.2); }
.journey-card figcaption { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 12px; color: #3b3d36; }
.journey-card figcaption small { color: var(--soul-teal); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.journey-card figcaption b { font: 700 16px "Noto Serif TC", serif; }

.card-talent { left: 0; top: 490px; transform: rotate(-5deg); }
.card-past { left: 24%; top: 460px; transform: rotate(-2deg); }
.card-present { left: 49%; top: 488px; transform: rotate(2deg); }
.card-future { right: 0; top: 447px; transform: rotate(5deg); }

.soul-hero-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 25px;
  color: rgba(47,51,45,.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
}

.soul-hero-footer i { flex: 1; height: 1px; background: rgba(47,51,45,.18); }

@media (max-width: 1120px) {
  .soul-hero-grid { grid-template-columns: .92fr 1.08fr; gap: 28px; }
  .journey-card { width: 145px; }
  .compass-backdrop { width: 650px; height: 650px; right: -175px; }
}

@media (max-width: 900px) {
  .soul-course-nav .desktop-nav { display: none; }
  .soul-course-nav .course-back { display: inline-flex; }
  .soul-hero { min-height: auto; }
  .soul-hero-grid { min-height: auto; grid-template-columns: 1fr; padding-block: 52px 30px; }
  .soul-hero-copy { max-width: 680px; }
  .soul-journey { min-height: 820px; }
  .compass-backdrop { right: -13%; width: 660px; height: 660px; opacity: .92; }
  .journey-card { width: 22%; }
  .card-talent { left: 0; }
  .card-past { left: 25.5%; }
  .card-present { left: 51%; }
  .card-future { right: 0; }
}

@media (max-width: 600px) {
  .soul-course-nav { height: 72px; }
  .soul-course-nav .studio-name small { display: none; }
  .soul-hero h1 { font-size: clamp(46px, 15vw, 62px); }
  .soul-positioning { font-size: 17px; line-height: 1.75; }
  .soul-methods { gap: 5px 8px; font-size: 12px; }
  .soul-path { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .soul-path > span { display: none; }
  .soul-path div { position: relative; padding: 13px 11px; border: 1px solid rgba(22,122,130,.25); border-radius: 12px; background: rgba(255,255,255,.35); }
  .soul-journey { min-height: 690px; margin-top: 5px; }
  .journey-caption { top: 0; left: 0; right: auto; max-width: 310px; text-align: left; }
  .journey-caption b { white-space: normal; }
  .journey-caption b { font-size: 15px; }
  .compass-backdrop { width: 525px; height: 525px; right: -225px; top: 300px; opacity: .88; }
  .journey-line { top: 79%; }
  .journey-card { width: 29%; }
  .journey-card img { border-width: 3px; border-radius: 12px; }
  .journey-card figcaption { gap: 4px; margin-top: 8px; }
  .journey-card figcaption small { display: none; }
  .journey-card figcaption b { font-size: 14px; }
  .card-talent { left: 0; top: 390px; }
  .card-past { left: 23.5%; top: 365px; }
  .card-present { left: 47%; top: 390px; }
  .card-future { right: 0; top: 348px; }
  .soul-hero-footer { gap: 10px; letter-spacing: .1em; }
}

/* 01 — About the deck */
.deck-concept {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 10vw, 150px) 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(243, 213, 98, .28), transparent 24%),
    linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
}

.deck-concept::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  left: -290px;
  top: 320px;
  border: 1px solid rgba(22, 122, 130, .15);
  border-radius: 50%;
}

.deck-concept-intro {
  display: grid;
  grid-template-columns: 120px minmax(390px, 1fr) minmax(360px, .85fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}

.deck-concept-index span,
.deck-concept-index small { display: block; }
.deck-concept-index span { color: var(--soul-coral); font: 700 58px/1 "Noto Serif TC", serif; }
.deck-concept-index i { display: block; width: 72px; height: 1px; margin: 18px 0; background: var(--soul-teal); }
.deck-concept-index small { color: var(--soul-teal); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.deck-concept-kicker { margin: 0 0 20px; color: var(--soul-teal); font-size: 14px; font-weight: 700; letter-spacing: .07em; }
.deck-concept-heading h2 { margin: 0; font: 700 clamp(38px, 4.6vw, 66px)/1.4 "Noto Serif TC", serif; letter-spacing: -.055em; }
.deck-concept-heading h2 em { color: var(--soul-coral); font-style: normal; }
.deck-concept-copy > p { margin: 0 0 18px; color: #55574f; font-size: 17px; line-height: 2; }
.wisdom-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.wisdom-tags span { padding: 9px 14px; border: 1px solid rgba(22, 122, 130, .25); border-radius: 999px; background: rgba(255,255,255,.74); color: var(--soul-teal); font-size: 13px; font-weight: 700; }

.concept-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(230px, .8fr) minmax(320px, 1fr) minmax(230px, .8fr);
  gap: clamp(24px, 3.2vw, 50px);
  align-items: center;
  margin-top: clamp(80px, 9vw, 140px);
  padding: clamp(54px, 6vw, 88px);
  border-radius: 42px;
  background:
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.35), transparent 30%),
    #f3d562;
  box-shadow: 0 30px 70px rgba(112, 83, 7, .12);
}

.concept-board-title p { margin: 0 0 14px; color: var(--soul-teal); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.concept-board-title h3 { margin: 0 0 24px; font: 700 clamp(29px, 3vw, 43px)/1.55 "Noto Serif TC", serif; }
.concept-board-title h3 em { color: var(--soul-coral); font-style: normal; }
.concept-board-title > span { display: inline-block; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.72); color: #665c2e; font-size: 13px; }
.concept-card { position: relative; z-index: 2; margin: 0; }
.concept-card img { position: relative; z-index: 2; display: block; width: 100%; border-radius: 28px; box-shadow: 0 28px 48px rgba(74, 50, 4, .22); }
.concept-card-aura { position: absolute; z-index: 1; inset: 8% -12%; border: 1px solid rgba(255,255,255,.8); border-radius: 48%; }
.concept-callouts { display: grid; gap: clamp(34px, 5vh, 58px); margin: 0; padding: 0; list-style: none; }
.concept-callouts li { position: relative; display: grid; grid-template-columns: 39px 1fr; gap: 13px; align-items: start; }
.concept-callouts li::after { content: ""; position: absolute; top: 19px; height: 1px; width: 34px; background: rgba(255,255,255,.9); }
.concept-callouts-left li::after { right: -31px; }
.concept-callouts-right li::after { left: -31px; }
.concept-callouts b { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--soul-teal); border-radius: 50%; color: var(--soul-teal); font: italic 17px "Noto Serif TC", serif; }
.concept-callouts strong,
.concept-callouts span { display: block; }
.concept-callouts strong { font: 700 16px/1.6 "Noto Serif TC", serif; }
.concept-callouts span { margin-top: 5px; color: #655d35; font-size: 13px; line-height: 1.65; }

@media (max-width: 1050px) {
  .deck-concept-intro { grid-template-columns: 90px 1fr; }
  .deck-concept-copy { grid-column: 2; }
  .concept-board { grid-template-columns: 1fr 1fr 1fr; }
  .concept-board-title { grid-column: 1 / -1; text-align: center; }
}

@media (max-width: 760px) {
  .deck-concept { padding: 80px 0; }
  .deck-concept-intro { display: block; }
  .deck-concept-index { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; }
  .deck-concept-index span { font-size: 40px; }
  .deck-concept-index i { width: 42px; margin: 0; }
  .deck-concept-heading h2 { font-size: 38px; }
  .deck-concept-copy { margin-top: 30px; }
  .concept-board { grid-template-columns: 1fr 1fr; gap: 34px 20px; margin-top: 70px; padding: 38px 22px; border-radius: 25px; }
  .concept-board-title { grid-column: 1 / -1; }
  .concept-card { grid-column: 1 / -1; grid-row: 2; width: min(76%, 330px); margin: 0 auto; }
  .concept-callouts { gap: 28px; align-self: start; }
  .concept-callouts-left { grid-column: 1; grid-row: 3; }
  .concept-callouts-right { grid-column: 2; grid-row: 3; }
  .concept-callouts li { display: block; }
  .concept-callouts li::after { display: none; }
  .concept-callouts b { margin-bottom: 10px; }
  .concept-callouts strong { font-size: 14px; }
}

@media (max-width: 460px) {
  .concept-board { grid-template-columns: 1fr; }
  .concept-card { grid-column: 1; }
  .concept-callouts-left,
  .concept-callouts-right { grid-column: 1; grid-row: auto; }
  .concept-callouts li { display: grid; }
}

/* 01 redesign — editorial opening + illustrated map */
.deck-concept { padding: 0; background: #fffdf7; }
.deck-concept::before { display: none; }

.concept-opening {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(243,213,98,.34), transparent 25%),
    radial-gradient(circle at 7% 86%, rgba(22,122,130,.08), transparent 25%),
    #fffdf7;
}
.concept-opening::after {
  content: "";
  position: absolute;
  right: -11vw;
  bottom: -26vw;
  width: 53vw;
  height: 53vw;
  border: 1px solid rgba(22,122,130,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(243,213,98,.08), 0 0 0 160px rgba(243,213,98,.045);
}
.concept-opening-inner { position: relative; z-index: 2; min-height: 760px; padding-top: 105px; padding-bottom: 100px; }
.concept-opening-ghost {
  position: absolute;
  right: -1.5vw;
  top: 60px;
  color: rgba(217,91,66,.055);
  font: 700 clamp(90px,14vw,220px)/.78 "Noto Serif TC",serif;
  letter-spacing: -.08em;
  text-align: right;
  pointer-events: none;
}
.concept-section-mark { display: flex; align-items: center; gap: 22px; }
.concept-section-mark > span { color: var(--soul-coral); font: 700 66px/1 "Noto Serif TC",serif; }
.concept-section-mark > div { padding-left: 20px; border-left: 1px solid rgba(22,122,130,.35); }
.concept-section-mark small,
.concept-section-mark b { display: block; }
.concept-section-mark small { margin-bottom: 7px; color: var(--soul-teal); font-size: 10px; letter-spacing: .21em; }
.concept-section-mark b { font: 600 20px/1.55 "Noto Serif TC",serif; }
.concept-opening blockquote {
  width: min(840px, 74%);
  margin: 68px 0 0 9%;
  color: #2f332d;
  font: 700 clamp(42px,5.4vw,78px)/1.42 "Noto Serif TC",serif;
  letter-spacing: -.055em;
}
.concept-opening blockquote em { position: relative; color: var(--soul-coral); font-style: normal; }
.concept-opening blockquote em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.02em;
  right: -.08em;
  bottom: .12em;
  height: .22em;
  background: #f3d562;
  transform: rotate(-1.2deg);
}
.concept-intro-copy {
  display: grid;
  grid-template-columns: 80px minmax(320px,650px);
  gap: 25px;
  align-items: start;
  margin: 62px 0 0 auto;
  width: min(760px,64%);
}
.concept-intro-copy i { height: 1px; margin-top: 17px; background: var(--soul-teal); }
.concept-intro-copy p { margin: 0; color: #55574f; font-size: 17px; line-height: 2.15; }
.concept-orbit { position: absolute; left: 0; bottom: 72px; display: flex; align-items: center; gap: 8px; }
.concept-orbit span { position: relative; padding: 0 18px; color: var(--soul-teal); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.concept-orbit span:first-child { padding-left: 0; }
.concept-orbit span:not(:last-child)::after { content: "×"; position: absolute; right: -5px; color: var(--soul-coral); }

.concept-diagram {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.34), transparent 31%),
    #f3d562;
}
.concept-diagram::before,
.concept-diagram::after { content: "✦"; position: absolute; color: rgba(156,117,16,.28); font-size: 58px; }
.concept-diagram::before { left: 5%; top: 46%; }
.concept-diagram::after { right: 5%; bottom: 9%; font-size: 32px; }
.concept-diagram-inner { position: relative; min-height: 920px; padding-top: 58px; padding-bottom: 58px; }
.concept-diagram-title { display: flex; justify-content: center; align-items: center; gap: 25px; text-align: center; }
.concept-diagram-title > span { color: #98720d; font-size: 23px; }
.concept-diagram-title small { color: var(--soul-teal); font-size: 10px; font-weight: 700; letter-spacing: .22em; }
.concept-diagram-title h3 { margin: 8px 0 0; padding: 8px 50px 10px; background: #9c7819; color: white; font: 600 clamp(22px,2.3vw,34px) "Noto Serif TC",serif; clip-path: polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%); }
.concept-card { position: absolute; z-index: 3; left: 50%; top: 178px; width: 315px; margin: 0; transform: translateX(-50%) rotate(-1deg); }
.concept-card img { position: relative; z-index: 2; display: block; width: 100%; border-radius: 30px; box-shadow: 0 28px 45px rgba(74,50,4,.25); }
.concept-card-halo { position: absolute; inset: -44px -70px; border: 1px solid rgba(255,255,255,.78); border-radius: 48%; transform: rotate(8deg); }
.concept-card-halo::after { content: ""; position: absolute; inset: 25px -35px; border: 1px solid rgba(22,122,130,.18); border-radius: 50%; transform: rotate(-15deg); }
.concept-points { margin: 0; padding: 0; list-style: none; }
.concept-points li { position: absolute; z-index: 4; display: flex; align-items: flex-start; gap: 12px; width: 300px; }
.concept-points b { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--soul-teal); border-radius: 50%; color: var(--soul-teal); font: italic 21px "Noto Serif TC",serif; }
.concept-points strong,
.concept-points span { display: block; }
.concept-points strong { font: 600 17px/1.6 "Noto Serif TC",serif; }
.concept-points span { margin-top: 4px; color: #665d33; font-size: 13px; line-height: 1.7; }
.concept-points i { position: absolute; top: 49px; height: 1px; background: rgba(255,255,255,.94); }
.concept-points i::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: white; }
.point-1 { left: 3%; top: 245px; }.point-2 { left: 1%; top: 450px; }.point-3 { left: 4%; top: 665px; }
.point-4 { right: 2%; top: 245px; }.point-5 { right: 0; top: 450px; }.point-6 { right: 3%; top: 665px; }
.concept-points .point-1 i,.concept-points .point-2 i,.concept-points .point-3 i { left: 44px; width: calc(50vw - 312px); min-width: 170px; }
.concept-points .point-1 i::after,.concept-points .point-2 i::after,.concept-points .point-3 i::after { right: 0; }
.concept-points .point-4 i,.concept-points .point-5 i,.concept-points .point-6 i { right: calc(100% - 44px); width: calc(50vw - 312px); min-width: 170px; }
.concept-points .point-4 i::after,.concept-points .point-5 i::after,.concept-points .point-6 i::after { left: 0; }
.concept-example { position: absolute; left: 50%; bottom: 28px; margin: 0; color: rgba(82,67,25,.6); font-size: 9px; font-weight: 700; letter-spacing: .18em; transform: translateX(-50%); white-space: nowrap; }

@media (max-width: 1000px) {
  .concept-opening blockquote { width: 88%; margin-left: 3%; }
  .concept-intro-copy { width: 75%; }
  .concept-diagram-inner { min-height: 920px; }
  .concept-card { width: 285px; }
  .concept-points li { width: 245px; }
  .point-1,.point-2,.point-3 { left: 0; }
  .point-4,.point-5,.point-6 { right: 0; }
  .concept-points .point-1 i,.concept-points .point-2 i,.concept-points .point-3 i,
  .concept-points .point-4 i,.concept-points .point-5 i,.concept-points .point-6 i { width: 150px; min-width: 0; }
}

@media (max-width: 760px) {
  .concept-opening { min-height: auto; }
  .concept-opening-inner { min-height: auto; padding-top: 72px; padding-bottom: 82px; }
  .concept-opening-ghost { top: 150px; font-size: 92px; }
  .concept-section-mark > span { font-size: 45px; }
  .concept-opening blockquote { width: 100%; margin: 54px 0 0; font-size: clamp(36px,10.5vw,50px); }
  .concept-opening blockquote br { display: none; }
  .concept-intro-copy { grid-template-columns: 44px 1fr; width: 100%; margin-top: 45px; }
  .concept-intro-copy p { font-size: 16px; line-height: 2; }
  .concept-orbit { position: relative; bottom: auto; flex-wrap: wrap; margin-top: 42px; }
  .concept-diagram-inner { min-height: 0; padding-block: 45px 70px; }
  .concept-diagram-title { gap: 10px; }
  .concept-diagram-title h3 { padding-inline: 28px; font-size: 20px; line-height: 1.55; }
  .concept-card { position: relative; left: auto; top: auto; width: min(72%,330px); margin: 75px auto 65px; transform: rotate(-1deg); }
  .concept-points { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 18px; }
  .concept-points li { position: relative; inset: auto; width: auto; }
  .concept-points i { display: none; }
  .concept-points b { width: 38px; height: 38px; font-size: 18px; }
  .concept-points strong { font-size: 14px; }
  .concept-example { position: static; margin-top: 45px; text-align: center; transform: none; white-space: normal; }
}

@media (max-width: 460px) {
  .concept-section-mark { align-items: flex-start; }
  .concept-section-mark b { font-size: 17px; line-height: 1.6; }
  .concept-orbit span { padding-inline: 11px; }
  .concept-orbit span:first-child { padding-left: 0; }
  .concept-points { grid-template-columns: 1fr; }
}

/* Requested refinements */
.concept-opening blockquote {
  width: min(960px, 86%);
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.65;
}
.concept-section-mark b { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.35; letter-spacing: -.025em; }
.concept-opening blockquote em { color: var(--soul-coral); }
.concept-opening blockquote span { margin-left: .2em; color: var(--soul-ink); }
.concept-opening blockquote em::after { display: none; }
.concept-opening-inner { padding-top: 88px; padding-bottom: 82px; }
.concept-opening blockquote { margin: 52px 0 0 5%; }
.concept-intro-copy { width: min(780px,68%); margin: 42px 3% 0 auto; }
.concept-intro-copy p { font-size: 19px; line-height: 2.12; }
.concept-intro-copy p strong { color: #34352f; font-weight: 700; }

.concept-orbit { display: none; }
.concept-system {
  position: absolute;
  left: 0;
  bottom: 54px;
  display: grid;
  grid-template-columns: 142px repeat(3, minmax(150px, 1fr));
  align-items: stretch;
  width: min(780px, 68%);
}
.concept-system > div { position: relative; min-height: 72px; padding: 15px 18px; border-top: 1px solid rgba(22,122,130,.34); border-bottom: 1px solid rgba(22,122,130,.18); background: rgba(255,255,255,.68); }
.concept-system-core { display: flex; flex-direction: column; justify-content: center; background: var(--soul-teal) !important; color: white; }
.concept-system-core::after { content: ""; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; background: var(--soul-teal); transform: translateY(-50%) rotate(45deg); }
.concept-system-item { margin-left: 14px; }
.concept-system-item:not(:last-child)::after { content: "×"; position: absolute; right: -12px; top: 25px; z-index: 2; color: var(--soul-coral); font-weight: 700; }
.concept-system small,.concept-system b { display: block; }
.concept-system small { margin-bottom: 6px; color: var(--soul-coral); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.concept-system-core small { color: rgba(255,255,255,.65); }
.concept-system b { font: 700 14px/1.45 "Noto Serif TC",serif; white-space: nowrap; }

/* Three-system learning map — main course section */
.concept-wisdom { margin: 62px auto 0; padding-top: 45px; border-top: 1px solid rgba(22,122,130,.16); }
.concept-wisdom > header { text-align: center; }
.concept-wisdom > header small { color: var(--soul-coral); font: 700 10px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .22em; }
.concept-wisdom > header h3 { margin: 9px 0 0; color: var(--soul-ink); font: 700 clamp(28px,3.2vw,42px)/1.3 "Noto Serif TC",serif; }
.concept-wisdom-map { position: relative; width: min(100%,920px); height: 600px; margin: 14px auto 0; }
.concept-wisdom-map > svg { position: absolute; inset: 10px 0 auto; width: 100%; height: 560px; overflow: visible; }
.concept-wisdom-map > svg path:first-child { fill: rgba(243,213,98,.09); stroke: rgba(156,120,25,.38); stroke-width: 1.4; }
.concept-wisdom-map > svg path:last-child { fill: none; stroke: rgba(156,120,25,.2); stroke-width: 1; stroke-dasharray: 5 7; }
.concept-wisdom-node { position: absolute; z-index: 2; width: 280px; min-height: 198px; padding: 27px 25px 23px; background: rgba(255,255,255,.94); box-shadow: 0 16px 42px rgba(70,51,25,.1); text-align: center; }
.concept-wisdom-node::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: currentColor; }
.concept-wisdom-node > span { position: absolute; left: 15px; top: 14px; opacity: .16; font: 700 42px/1 "Noto Serif TC",serif; }
.concept-wisdom-node small { display: block; margin-bottom: 8px; font: 700 10px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .15em; }
.concept-wisdom-node h4 { margin: 0 0 8px; color: #29231d; font: 700 23px/1.4 "Noto Serif TC",serif; }
.concept-wisdom-node p { min-height: 45px; margin: 0 0 15px; color: #5f574e; font: 500 14px/1.65 "Noto Sans TC",sans-serif; }
.concept-wisdom-node button { padding: 9px 16px; border: 1px solid var(--node-accent); border-radius: 100px; background: transparent; color: var(--node-accent); font: 700 12px/1.3 "Noto Sans TC",sans-serif; cursor: pointer; transition: color .2s ease,background .2s ease,transform .2s ease; }
.concept-wisdom-node button:hover,.concept-wisdom-node button:focus-visible { background: var(--node-accent); color: #fff; transform: translateY(-2px); }
.concept-wisdom-tarot { --node-accent: #df5534; top: 2px; left: 50%; color: var(--node-accent); transform: translateX(-50%); }
.concept-wisdom-chakra { --node-accent: #16868a; left: 0; bottom: 28px; color: var(--node-accent); }
.concept-wisdom-insight { --node-accent: #96701a; right: 0; bottom: 28px; color: var(--node-accent); }
.concept-wisdom-core { position: absolute; z-index: 3; left: 50%; top: 57%; display: flex; width: 184px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border-radius: 50%; background: linear-gradient(145deg,#f8df72,#f1c944); box-shadow: 0 18px 44px rgba(155,113,18,.18); text-align: center; transform: translate(-50%,-50%); }
.concept-wisdom-core small { margin-bottom: 7px; color: #795a13; font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .14em; }
.concept-wisdom-core strong { color: #2d261e; font: 700 20px/1.42 "Noto Serif TC",serif; }
.concept-wisdom-core span { margin-top: 7px; color: #684f18; font: 600 11px/1.5 "Noto Sans TC",sans-serif; }

.concept-diagram-inner { min-height: 1010px; }
.concept-card {
  top: 235px;
  width: 280px;
  transform: translateX(-50%);
}
.concept-card-halo { display: none !important; }

.concept-points li { width: 305px; }
.point-1 { left: 3%; top: 270px; }.point-2 { left: 1%; top: 505px; }.point-3 { left: 4%; top: 735px; }
.point-4 { right: 2%; top: 270px; }.point-5 { right: 0; top: 505px; }.point-6 { right: 3%; top: 735px; }

/* precise elbow leaders matching the supplied reference */
.concept-points i {
  top: 37px;
  width: 158px !important;
  min-width: 0 !important;
  height: var(--leader-drop, 26px);
  background: none;
  border-top: 1px solid rgba(255,255,255,.96);
}
.concept-points i::after { top: auto; bottom: -4px; }
.concept-points .point-1 i,
.concept-points .point-2 i,
.concept-points .point-3 i {
  left: 84px;
  border-right: 1px solid rgba(255,255,255,.96);
}
.concept-points .point-4 i,
.concept-points .point-5 i,
.concept-points .point-6 i {
  right: 100%;
  border-left: 1px solid rgba(255,255,255,.96);
}
.concept-points .point-1 i::after,
.concept-points .point-2 i::after,
.concept-points .point-3 i::after { right: -4px; }
.concept-points .point-4 i::after,
.concept-points .point-5 i::after,
.concept-points .point-6 i::after { left: -4px; }
.concept-points .point-1 i,.concept-points .point-4 i { --leader-drop: 28px; }
.concept-points .point-2 i,.concept-points .point-5 i { --leader-drop: 48px; }
.concept-points .point-3 i,.concept-points .point-6 i { --leader-drop: 64px; }

@media (max-width: 1000px) {
  .concept-system { width: 82%; }
  .concept-system b { font-size: 13px; }
  .concept-card { width: 260px; }
  .concept-points li { width: 235px; }
  .concept-points i { width: 105px !important; }
}

@media (max-width: 760px) {
  .concept-section-mark b { font-size: clamp(27px,7.5vw,35px); }
  .concept-opening blockquote { width: 100%; font-size: clamp(21px,5.8vw,28px); }
  .concept-opening-inner { padding-top: 70px; padding-bottom: 70px; }
  .concept-opening blockquote { margin-top: 46px; margin-left: 0; }
  .concept-intro-copy { width: 100%; margin: 38px 0 0; }
  .concept-intro-copy p { font-size: 18px; }
  .concept-wisdom { margin-top: 56px; }
  .concept-wisdom-map { display: grid; height: auto; gap: 22px; margin-top: 30px; }
  .concept-wisdom-map > svg { display: none; }
  .concept-wisdom-node { position: relative; inset: auto; width: 100%; min-height: 0; padding: 24px 20px 22px; transform: none; }
  .concept-wisdom-node:not(:last-of-type)::after { content: "↓"; position: absolute; left: 50%; bottom: -22px; color: #ac8422; font: 700 14px/1 "Noto Sans TC",sans-serif; transform: translateX(-50%); }
  .concept-wisdom-node p { min-height: 0; }
  .concept-wisdom-core { position: relative; left: auto; top: auto; grid-row: 4; width: min(210px,72vw); margin: 4px auto 0; transform: none; }
  .concept-system { position: relative; left: auto; bottom: auto; grid-template-columns: 1fr; gap: 0; width: 100%; margin-top: 45px; }
  .concept-system > div { min-height: auto; }
  .concept-system-core::after { right: auto; left: 32px; top: auto; bottom: -7px; width: 14px; height: 14px; }
  .concept-system-item { margin: 8px 0 0 0; padding-left: 25px !important; }
  .concept-system-item:not(:last-child)::after { content: "×"; right: auto; left: 7px; top: auto; bottom: -16px; }
  .concept-system b { white-space: normal; font-size: 15px; }
  .concept-diagram-inner { min-height: 0; }
  .concept-card { position: relative; top: auto; width: min(70%,300px); margin-top: 95px; transform: none; }
  .concept-points li { width: auto; }
}

/* Exact desktop leader geometry from the approved reference */
@media (min-width: 761px) {
  .concept-diagram-inner { max-width: 1120px; min-height: 910px; }
  .concept-card { top: 190px; width: 278px; }

  .concept-points li { width: 305px; }
  .point-1 { left: 2%; top: 245px; }
  .point-2 { left: 2%; top: 430px; }
  .point-3 { left: 2%; top: 625px; }
  .point-4 { right: 2%; top: 245px; }
  .point-5 { right: 2%; top: 430px; }
  .point-6 { right: 2%; top: 625px; }

  .concept-points i {
    display: block;
    width: auto !important;
    height: auto;
    min-width: 0 !important;
    background: none;
    border: 0;
  }
  .concept-points i::before,
  .concept-points i::after { content: ""; position: absolute; }

  /* 01: name — across, up, then into the card title */
  .concept-points .point-1 i {
    left: 36px;
    top: -19px;
    width: 248px !important;
    height: 58px;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
  }
  .concept-points .point-1 i::before { right: -75px; top: 0; width: 75px; border-top: 1px solid white; }
  .concept-points .point-1 i::after { right: -79px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: white; }

  /* 02: classic Waite imagery — direct horizontal pointer */
  .concept-points .point-2 i {
    left: 36px;
    top: 42px;
    width: 323px !important;
    border-top: 1px solid white;
  }
  .concept-points .point-2 i::after { right: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: white; }

  /* 03: insight sentence — across, down, then into the footer */
  .concept-points .point-3 i {
    left: 36px;
    top: 44px;
    width: 248px !important;
    height: 73px;
    border-top: 1px solid white;
    border-right: 1px solid white;
  }
  .concept-points .point-3 i::before { right: -75px; bottom: 0; width: 75px; border-bottom: 1px solid white; }
  .concept-points .point-3 i::after { right: -79px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: white; }

  /* right side mirrors the supplied artwork */
  .concept-points .point-4 i {
    right: 100%;
    top: -19px;
    width: 71px !important;
    height: 58px;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
  }
  .concept-points .point-4 i::before { left: -76px; top: 0; width: 76px; border-top: 1px solid white; }
  .concept-points .point-4 i::after { left: -80px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: white; }

  .concept-points .point-5 i {
    right: 100%;
    top: -3px;
    width: 30px !important;
    height: 45px;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
  }
  .concept-points .point-5 i::before { left: -128px; top: 0; width: 128px; border-top: 1px solid white; }
  .concept-points .point-5 i::after { left: -132px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: white; }

  .concept-points .point-6 i {
    right: 100%;
    top: 42px;
    width: 147px !important;
    border-top: 1px solid white;
  }
  .concept-points .point-6 i::after { left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: white; }
}

/* Final alignment of labels and card targets */
@media (min-width: 761px) {
  .concept-points .point-1 i {
    top: -30px;
    height: 55px;
  }
  .concept-points .point-2 i {
    top: 56px;
  }
  .concept-points .point-3 i {
    top: 27px;
    height: 15px;
  }
  .concept-points .point-5 i {
    top: -205px;
    height: 247px;
  }
  .concept-points .point-5 i::before {
    left: -227px;
    width: 227px;
  }
  .concept-points .point-5 i::after {
    left: -231px;
  }
  .concept-points .point-6 i {
    top: -60px;
  }
  .concept-points .point-6 strong {
    white-space: nowrap;
  }
}

/* The diagram stays as live HTML so every label remains selectable. */
.concept-diagram {
  background: #f2d466;
  border: 0;
  box-shadow: none;
}
.concept-diagram::before,
.concept-diagram::after { display: none; }
.concept-diagram,
.concept-diagram * { font-family: "Noto Serif TC", serif; }

@media (min-width: 761px) {
  .concept-diagram-inner {
    max-width: 1120px;
    min-height: 1080px;
    padding-top: 72px;
    padding-bottom: 145px;
  }
  .concept-card {
    top: 220px;
    width: 292px;
    transform: translateX(-50%);
  }
  .point-1,
  .point-4 { top: 282px; }
  .point-2,
  .point-5 { top: 485px; }
  .point-3,
  .point-6 { top: 705px; }
  .concept-example { bottom: 86px; }
}

@media (max-width: 760px) {
  .concept-diagram { background: #f2d466; }
  .concept-diagram-inner { padding-bottom: 88px; }
}

/* Fine-tune the three requested desktop callouts. */
@media (min-width: 761px) {
  /* 03 points directly to the insight sentence at the card footer. */
  .concept-points .point-3 i {
    top: -8px;
    width: 323px !important;
    height: 0;
    border-top: 1px solid white;
    border-right: 0;
  }
  .concept-points .point-3 i::before { display: none; }
  .concept-points .point-3 i::after {
    right: -4px;
    top: -4px;
    bottom: auto;
  }

  /* 05 rises to the heart-chakra icon at the top of the card. */
  .concept-points .point-5 i {
    top: -225px;
    height: 267px;
  }
  .concept-points .point-5 i::before {
    left: -175px;
    width: 175px;
  }
  .concept-points .point-5 i::after { left: -179px; }

  /* 06 label sits above its horizontal leader line. */
  .point-6 { top: 620px; }
  .concept-points .point-6 i { top: 22px; }

  /* Lower the complete diagram composition without changing its geometry. */
  .concept-diagram-title { position: relative; top: 40px; }
  .concept-card { top: 260px; }
  .concept-points li { transform: translateY(40px); }
  .deck-detail-trigger { top: 835px; }
}

/* Detailed deck story */
.deck-detail-trigger {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 835px;
  min-width: 230px;
  padding: 15px 26px;
  border: 1px solid rgba(91, 56, 15, .16);
  border-radius: 999px;
  background: #e95b38;
  box-shadow: 0 14px 28px rgba(111, 52, 22, .2);
  color: #fff;
  font: 600 16px/1.4 "Noto Serif TC", serif;
  letter-spacing: .08em;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.deck-detail-trigger:hover {
  background: #cf4528;
  box-shadow: 0 18px 34px rgba(111, 52, 22, .28);
  transform: translateX(-50%) translateY(-2px);
}
.deck-detail-trigger:focus-visible {
  outline: 3px solid rgba(255,255,255,.92);
  outline-offset: 4px;
}

/* 02 — interpretation abilities and knowledge systems */
.course-abilities {
  position: relative;
  overflow: hidden;
  padding: clamp(86px,10vw,138px) 0 clamp(96px,11vw,150px);
  background:
    radial-gradient(circle at 90% 8%,rgba(243,213,98,.3),transparent 25%),
    radial-gradient(circle at 4% 88%,rgba(22,122,130,.1),transparent 27%),
    #fffdf7;
}
.course-abilities::before { content: "02"; position: absolute; right: -1vw; top: 1vw; color: rgba(217,91,66,.045); font: 700 clamp(150px,24vw,360px)/1 "Noto Serif TC",serif; pointer-events: none; }
.course-abilities > .shell { position: relative; z-index: 1; }
.abilities-heading { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 38px; max-width: 930px; }
.abilities-number { color: var(--soul-coral); font: 700 clamp(72px,8vw,112px)/1 "Noto Serif TC",serif; border-right: 1px solid rgba(22,122,130,.35); }
.abilities-heading-copy small { color: var(--soul-teal); font: 700 11px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .22em; }
.abilities-heading-copy h2 { margin: 10px 0 13px; color: #2e312d; font: 700 clamp(34px,4.5vw,58px)/1.35 "Noto Serif TC",serif; letter-spacing: -.035em; }
.abilities-heading-copy p { margin: 0; color: #66645c; font: 500 17px/1.9 "Noto Sans TC",sans-serif; }
.abilities-frameworks { display: grid; grid-template-columns: 1fr; gap: 30px; margin: 62px 0 0; }
.ability-framework { position: relative; min-height: 430px; padding: 34px 34px 30px; overflow: hidden; border: 1px solid rgba(92,72,31,.11); background: rgba(255,255,255,.78); box-shadow: 0 16px 44px rgba(66,48,23,.055); }
.ability-framework::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--framework-color); }
.ability-framework > header { position: relative; z-index: 2; }
.ability-framework > header small { color: var(--framework-color); font: 700 10px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .16em; }
.ability-framework > header h3 { margin: 9px 0 8px; color: #2d2e2a; font: 700 clamp(23px,2.1vw,31px)/1.45 "Noto Serif TC",serif; }
.ability-framework > header p { margin: 0; color: #69655c; font: 500 14px/1.75 "Noto Sans TC",sans-serif; }
.ability-path-framework { --framework-color: #167a82; }
.ability-system-framework { --framework-color: #d95b42; }
.ability-path-framework { min-height: 375px; }
.ability-system-framework { min-height: 575px; }
.framework-detail-trigger { margin-top: 18px; padding: 10px 18px; border: 1px solid var(--framework-color); border-radius: 100px; background: transparent; color: var(--framework-color); font: 700 13px/1.3 "Noto Sans TC",sans-serif; cursor: pointer; transition: background .2s,color .2s,transform .2s; }
.framework-detail-trigger:hover,.framework-detail-trigger:focus-visible { background: var(--framework-color); color: #fff; transform: translateY(-2px); }
.ability-path-map { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 72px 0 0; padding: 0; list-style: none; }
.ability-path-map::before { content: ""; position: absolute; left: 9%; right: 9%; top: 25px; height: 1px; background: linear-gradient(90deg,rgba(22,122,130,.25),rgba(217,91,66,.85)); }
.ability-path-map li { position: relative; z-index: 1; text-align: center; }
.ability-path-map li:not(:last-child)::after { content: ""; position: absolute; right: -10px; top: 21px; width: 8px; height: 8px; border-top: 1px solid #d95b42; border-right: 1px solid #d95b42; transform: rotate(45deg); }
.ability-path-map span { display: grid; width: 50px; height: 50px; margin: 0 auto 18px; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: #fffdf7; color: #167a82; font: 700 13px/1 "Noto Sans TC",sans-serif; box-shadow: 0 8px 20px rgba(22,122,130,.08); }
.ability-path-map li:nth-child(2) span { color: #3c8b78; }.ability-path-map li:nth-child(3) span { color: #b7891d; }.ability-path-map li:nth-child(4) span { color: #d95b42; }
.ability-path-map strong,.ability-path-map small { display: block; }
.ability-path-map strong { color: #34342f; font: 700 17px/1.45 "Noto Serif TC",serif; }
.ability-path-map small { margin-top: 6px; color: #777168; font: 500 12px/1.5 "Noto Sans TC",sans-serif; }
.ability-system-map { position: relative; width: min(100%,680px); height: 400px; margin: 20px auto 0; }
.ability-system-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ability-system-map > svg path:first-child { fill: rgba(243,213,98,.12); stroke: rgba(183,137,29,.38); stroke-width: 1.2; }
.ability-system-map > svg path:last-child { fill: none; stroke: rgba(217,91,66,.22); stroke-width: 1; stroke-dasharray: 5 6; }
.system-node { position: absolute; z-index: 2; width: 132px; padding: 11px 8px; background: #fffdf7; box-shadow: 0 9px 23px rgba(72,52,25,.08); text-align: center; }
.system-node span,.system-node strong,.system-node small { display: block; }
.system-node span { margin-bottom: 3px; color: var(--node-color); font: 700 10px/1 "Noto Sans TC",sans-serif; letter-spacing: .1em; }
.system-node strong { color: #36332e; font: 700 16px/1.4 "Noto Serif TC",serif; }
.system-node small { margin-top: 4px; color: #756f65; font: 500 10px/1.45 "Noto Sans TC",sans-serif; }
.system-node-tarot { --node-color: #d95b42; left: 50%; top: 3px; transform: translateX(-50%); }
.system-node-chakra { --node-color: #167a82; left: 0; bottom: 3px; }
.system-node-insight { --node-color: #b7891d; right: 0; bottom: 3px; }
.system-map-core { position: absolute; z-index: 3; left: 50%; top: 55%; display: grid; width: 98px; height: 98px; place-content: center; border-radius: 50%; background: linear-gradient(145deg,#f7dd72,#f0ca48); box-shadow: 0 13px 28px rgba(144,105,18,.18); text-align: center; transform: translate(-50%,-50%); }
.system-map-core small { color: #876614; font: 700 8px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .1em; }
.system-map-core strong { margin-top: 3px; color: #352c20; font: 700 18px/1.35 "Noto Serif TC",serif; }
.abilities-stage { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: clamp(34px,5vw,74px); align-items: start; }
.abilities-stage + .abilities-stage { margin-top: 82px; padding-top: 82px; border-top: 1px solid rgba(92,72,31,.14); }
.abilities-stage > header { position: sticky; top: 110px; padding: 26px 24px 30px; background: var(--soul-teal); color: #fff; }
.abilities-stage-professional > header { background: var(--soul-coral); }
.abilities-stage > header span { font: 700 10px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .2em; opacity: .7; }
.abilities-stage > header h3 { margin: 18px 0 22px; font: 700 26px/1.55 "Noto Serif TC",serif; }
.abilities-stage > header p { margin: 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.32); font: 700 10px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .15em; }
.abilities-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.ability-card { position: relative; min-height: 520px; padding: 30px 25px 32px; overflow: hidden; border: 1px solid rgba(92,72,31,.11); background: rgba(255,255,255,.88); box-shadow: 0 14px 42px rgba(66,48,23,.055); }
.ability-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--ability-color); }
.ability-card::after { content: ""; position: absolute; right: -55px; top: -55px; width: 155px; height: 155px; border: 1px solid var(--ability-color); border-radius: 50%; opacity: .12; }
.ability-coral { --ability-color: #d95b42; }.ability-gold { --ability-color: #b7891d; }.ability-teal { --ability-color: #167a82; }.ability-violet { --ability-color: #8b638f; }
.ability-icon { display: grid; width: 64px; height: 64px; margin-bottom: 34px; place-items: center; border-radius: 50%; background: color-mix(in srgb,var(--ability-color) 12%,white); color: var(--ability-color); }
.ability-icon svg { width: 37px; height: 37px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ability-index { display: block; margin-bottom: 8px; color: var(--ability-color); font: 700 12px/1 "Noto Sans TC",sans-serif; letter-spacing: .15em; }
.ability-card h4 { margin: 0 0 15px; color: #2d2e2a; font: 700 24px/1.45 "Noto Serif TC",serif; }
.ability-card strong { display: block; min-height: 70px; margin-bottom: 18px; color: var(--ability-color); font: 700 16px/1.75 "Noto Serif TC",serif; }
.ability-card p { margin: 0; color: #5a574f; font: 400 15px/1.95 "Noto Sans TC",sans-serif; }
.abilities-stage-foundation .abilities-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.abilities-stage-foundation .ability-card { min-height: 455px; }
.abilities-detail-dialog { width: min(1220px,calc(100% - 32px)); max-height: 90vh; padding: 0; border: 0; border-radius: 28px; background: #fffdf7; box-shadow: 0 34px 95px rgba(42,31,20,.3); overflow: auto; }
.abilities-detail-dialog::backdrop { background: rgba(34,28,21,.7); backdrop-filter: blur(6px); }
.abilities-detail-sheet { position: relative; padding: clamp(42px,6vw,76px); }
.abilities-detail-sheet > form { position: sticky; z-index: 5; top: 0; height: 0; text-align: right; }
.abilities-detail-close { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(39,33,27,.16); border-radius: 50%; background: rgba(255,253,247,.96); color: #2c251e; font: 300 28px/1 "Noto Sans TC",sans-serif; cursor: pointer; }
.abilities-detail-dialog .abilities-stage { padding-top: 8px; }
.abilities-detail-dialog .abilities-stage + .abilities-stage { margin-top: 0; padding-top: 8px; border-top: 0; }
.abilities-detail-panel[hidden] { display: none; }
.abilities-detail-dialog .abilities-stage > header { position: relative; top: auto; }

/* 04 — life exploration map */
.life-map-section { position: relative; overflow: hidden; padding: clamp(90px,10vw,145px) 0 clamp(105px,12vw,165px); background: linear-gradient(145deg,#f5d75d 0%,#f8e796 48%,#fff9e7 100%); }
.life-map-section::before { content: "04"; position: absolute; right: -1vw; top: 0; color: rgba(217,91,66,.075); font: 700 clamp(160px,25vw,370px)/1 "Noto Serif TC",serif; pointer-events: none; }
.life-map-section > .shell { position: relative; z-index: 1; }
.life-map-heading { display: grid; grid-template-columns: 145px minmax(0,850px); gap: 40px; align-items: start; }
.life-map-number { color: #d95b42; font: 700 clamp(72px,8vw,110px)/1 "Noto Serif TC",serif; border-right: 1px solid rgba(22,122,130,.38); }
.life-map-heading small { color: #167a82; font: 700 11px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .22em; }
.life-map-heading h2 { margin: 10px 0 20px; color: #2d302b; font: 700 clamp(35px,4.5vw,60px)/1.34 "Noto Serif TC",serif; letter-spacing: -.035em; }
.life-map-heading p { margin: 0; color: #615b4d; font: 500 17px/1.95 "Noto Sans TC",sans-serif; }
.life-map-heading p strong { color: #3a3932; font-family: "Noto Serif TC",serif; font-size: 19px; }
.life-map-board { position: relative; min-height: 890px; margin-top: 72px; border: 1px solid rgba(126,95,20,.16); background: rgba(255,253,245,.54); box-shadow: 0 26px 70px rgba(103,77,20,.09); }
.life-map-contours { position: absolute; inset: 0; overflow: hidden; opacity: .34; }
.life-map-contours i { position: absolute; border: 1px solid rgba(22,122,130,.3); border-radius: 48% 52% 44% 56%; transform: rotate(-12deg); }
.life-map-contours i:nth-child(1) { left: -7%; top: 4%; width: 48%; height: 56%; }.life-map-contours i:nth-child(2) { right: -10%; top: 12%; width: 50%; height: 54%; transform: rotate(17deg); }.life-map-contours i:nth-child(3) { left: 22%; bottom: -28%; width: 56%; height: 58%; transform: rotate(4deg); }
.life-map-route { position: absolute; inset: 4% 3%; width: 94%; height: 92%; overflow: visible; }
.life-map-route path { fill: none; stroke: #d95b42; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 14; }
.life-stop { --stop-color: #d95b42; position: absolute; z-index: 2; width: 265px; min-height: 235px; padding: 25px 24px 22px; border-top: 4px solid var(--stop-color); background: rgba(255,255,255,.94); box-shadow: 0 17px 38px rgba(79,57,20,.1); }
.life-stop::after { content: ""; position: absolute; width: 11px; height: 11px; border: 3px solid #fffdf5; border-radius: 50%; background: var(--stop-color); box-shadow: 0 0 0 1px var(--stop-color); }
.life-stop-pin { position: absolute; right: 17px; top: 14px; color: color-mix(in srgb,var(--stop-color) 20%,transparent); font: 700 43px/1 "Noto Serif TC",serif; }
.life-stop > small { color: var(--stop-color); font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .14em; }
.life-stop h3 { margin: 8px 0 11px; color: #302f2a; font: 700 25px/1.35 "Noto Serif TC",serif; }
.life-stop strong { display: block; min-height: 50px; color: #4d4a42; font: 600 15px/1.7 "Noto Serif TC",serif; }
.life-stop p { margin: 13px 0 17px; color: #7a7160; font: 600 12px/1.55 "Noto Sans TC",sans-serif; }
.life-stop button { padding: 8px 14px; border: 1px solid var(--stop-color); border-radius: 100px; background: transparent; color: var(--stop-color); font: 700 12px/1.3 "Noto Sans TC",sans-serif; cursor: pointer; transition: background .2s,color .2s,transform .2s; }
.life-stop button:hover,.life-stop button:focus-visible { background: var(--stop-color); color: #fff; transform: translateY(-2px); }
.life-stop-1 { left: 6%; top: 7%; }.life-stop-1::after { right: -22px; bottom: 28px; }
.life-stop-2 { left: 38%; top: 2%; --stop-color: #167a82; }.life-stop-2::after { left: 50%; bottom: -23px; }
.life-stop-3 { right: 6%; top: 16%; --stop-color: #b7891d; }.life-stop-3::after { left: -22px; bottom: 34px; }
.life-stop-4 { right: 12%; bottom: 8%; --stop-color: #8b638f; }.life-stop-4::after { left: -22px; top: 34px; }
.life-stop-5 { left: 39%; bottom: 2%; --stop-color: #d95b42; }.life-stop-5::after { left: 50%; top: -23px; }
.life-stop-6 { left: 7%; bottom: 13%; --stop-color: #167a82; }.life-stop-6::after { right: -22px; top: 34px; }
.life-map-start,.life-map-destination { position: absolute; z-index: 1; display: grid; width: 118px; height: 118px; place-content: center; border-radius: 50%; text-align: center; }
.life-map-start { left: 41%; top: 39%; border: 1px solid rgba(22,122,130,.35); background: rgba(255,255,255,.74); color: #167a82; }
.life-map-destination { right: 34%; top: 43%; background: #d95b42; color: #fff; box-shadow: 0 15px 32px rgba(217,91,66,.2); }
.life-map-start span,.life-map-destination span { font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .17em; opacity: .7; }
.life-map-start b,.life-map-destination b { margin-top: 5px; font: 700 16px/1.4 "Noto Serif TC",serif; }

.life-topic-dialog { width: min(760px,calc(100% - 32px)); padding: 0; border: 0; border-radius: 26px; background: #fffaf0; box-shadow: 0 32px 90px rgba(45,29,8,.32); }
.life-topic-dialog::backdrop { background: rgba(38,28,16,.68); backdrop-filter: blur(7px); }
.life-topic-sheet { position: relative; padding: clamp(42px,7vw,72px); }
.life-topic-sheet > form { position: absolute; right: 20px; top: 20px; }
.life-topic-close { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(35,29,24,.15); border-radius: 50%; background: #fffdf7; color: #2b241d; font: 300 28px/1 "Noto Sans TC",sans-serif; cursor: pointer; }
.life-topic-sheet article > small { color: #167a82; font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .18em; }
.life-topic-sheet h2 { margin: 12px 0 10px; color: #d95b42; font: 700 clamp(34px,5vw,52px)/1.25 "Noto Serif TC",serif; }
.life-topic-sheet h3 { margin: 0 0 25px; color: #2f302c; font: 700 clamp(19px,2.6vw,26px)/1.65 "Noto Serif TC",serif; }
.life-topic-sheet article > p { margin: 0; color: #565249; font: 400 17px/2 "Noto Sans TC",sans-serif; }
.life-topic-sheet article > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; padding-top: 23px; border-top: 1px solid rgba(105,81,33,.15); }
.life-topic-sheet article > div b { width: 100%; margin-bottom: 3px; color: #3a352d; font: 700 13px/1.4 "Noto Sans TC",sans-serif; }
.life-topic-sheet article > div span { padding: 7px 13px; border-radius: 100px; background: #f8e8a9; color: #765b16; font: 600 13px/1.4 "Noto Sans TC",sans-serif; }

@media (max-width: 1000px) {
  .life-map-board { min-height: 1040px; }
  .life-stop-1 { left: 4%; }.life-stop-2 { left: auto; right: 4%; top: 6%; }.life-stop-3 { right: 5%; top: 38%; }.life-stop-4 { right: 5%; bottom: 5%; }.life-stop-5 { left: 5%; bottom: 5%; }.life-stop-6 { left: 5%; bottom: auto; top: 38%; }
  .life-map-start { left: 42%; top: 29%; }.life-map-destination { right: 42%; top: 62%; }
  .ability-framework { min-height: 390px; }
  .ability-system-framework { min-height: 560px; }
  .ability-system-map { width: min(100%,520px); margin-inline: auto; }
  .abilities-stage { grid-template-columns: 1fr; }
  .abilities-stage > header { position: relative; top: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 24px; }
  .abilities-stage > header h3 { margin: 0; font-size: 23px; }
  .abilities-stage > header p { padding: 0 0 0 18px; border-top: 0; border-left: 1px solid rgba(255,255,255,.32); }
  .abilities-grid { gap: 14px; }
  .ability-card { min-height: 540px; padding-inline: 20px; }
}

@media (max-width: 760px) {
  .life-map-section { padding-block: 78px 92px; }
  .life-map-heading { grid-template-columns: 82px 1fr; gap: 20px; }
  .life-map-number { font-size: 62px; }
  .life-map-heading h2 { font-size: 31px; }
  .life-map-heading p { font-size: 15px; }
  .life-map-heading p strong { font-size: 16px; }
  .life-map-board { display: grid; min-height: 0; gap: 18px; margin-top: 50px; padding: 26px 18px; }
  .life-map-route { left: 42px; top: 50px; bottom: 50px; width: 1px; height: auto; background: linear-gradient(#d95b42,#167a82); }
  .life-map-route path,.life-map-contours,.life-map-start,.life-map-destination { display: none; }
  .life-stop { position: relative; inset: auto; width: auto; min-height: 0; margin-left: 35px; padding: 24px 22px 22px; }
  .life-stop::after { left: -42px; right: auto; top: 25px; bottom: auto; }
  .life-stop strong { min-height: 0; }
  .course-abilities { padding-block: 78px 90px; }
  .abilities-heading { grid-template-columns: 82px 1fr; gap: 20px; align-items: start; }
  .abilities-number { font-size: 62px; }
  .abilities-heading-copy h2 { font-size: 31px; }
  .abilities-heading-copy p { font-size: 15px; }
  .abilities-frameworks { margin: 44px 0 56px; }
  .ability-framework { min-height: 0; padding: 28px 20px; }
  .ability-system-framework { min-height: 0; }
  .ability-path-map { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
  .ability-path-map::before { left: 24px; right: auto; top: 25px; bottom: 25px; width: 1px; height: auto; }
  .ability-path-map li { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; column-gap: 17px; min-height: 82px; text-align: left; }
  .ability-path-map li:not(:last-child)::after { display: none; }
  .ability-path-map span { grid-row: 1 / 3; margin: 0; }
  .ability-path-map strong { align-self: end; }
  .ability-path-map small { align-self: start; }
  .ability-system-map { height: 280px; }
  .system-node { width: 118px; padding-inline: 5px; }
  .abilities-stage { gap: 22px; }
  .abilities-stage + .abilities-stage { margin-top: 58px; padding-top: 58px; }
  .abilities-stage > header { grid-template-columns: auto 1fr; gap: 12px; }
  .abilities-stage > header h3 { font-size: 19px; }
  .abilities-stage > header p { display: none; }
  .abilities-grid { grid-template-columns: 1fr; }
  .abilities-stage-foundation .abilities-grid { grid-template-columns: 1fr; }
  .ability-card { min-height: 0; padding: 28px 25px 31px; }
  .ability-icon { width: 58px; height: 58px; margin-bottom: 25px; }
  .ability-card h4 { font-size: 23px; }
  .ability-card strong { min-height: 0; font-size: 16px; }
  .ability-card p { font-size: 15px; }
}

.deck-detail-dialog {
  width: min(1080px, calc(100% - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: 0 32px 90px rgba(45, 29, 8, .32);
  color: #231d18;
  overflow: auto;
}
.deck-detail-dialog::backdrop {
  background: rgba(38, 28, 16, .68);
  backdrop-filter: blur(7px);
}
.deck-detail-sheet { position: relative; padding: clamp(45px,7vw,82px); }
.deck-detail-close-wrap { position: sticky; z-index: 3; top: 18px; height: 0; margin: 0; text-align: right; }
.deck-detail-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(35,29,24,.14);
  border-radius: 50%;
  background: rgba(255,250,240,.92);
  color: #2b241d;
  font: 300 28px/1 "Noto Sans TC", sans-serif;
  cursor: pointer;
}
.deck-detail-header { max-width: none; margin-bottom: 42px; }
.deck-detail-header > p {
  margin: 0 0 14px;
  color: #a87616;
  font: 700 12px/1.4 "Noto Sans TC", sans-serif;
  letter-spacing: .18em;
}
.deck-detail-header h2 {
  margin: 0 0 22px;
  color: #e05232;
  font: 700 clamp(28px,4vw,48px)/1.25 "Noto Serif TC", serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.deck-detail-header strong {
  display: block;
  max-width: none;
  color: #27211b;
  font: 600 clamp(17px,2vw,23px)/1.75 "Noto Serif TC", serif;
  white-space: nowrap;
}
.deck-detail-keywords { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; color: #1f7f82; }
.deck-detail-keywords b { padding: 4px 8px; background: #e95b38; color: #fff; font: 700 11px/1.2 "Noto Sans TC",sans-serif; letter-spacing: .08em; }
.deck-detail-keywords span { font: 700 14px/1.4 "Noto Sans TC", sans-serif; letter-spacing: .08em; }
.deck-detail-keywords i { width: 4px; height: 4px; border-radius: 50%; background: #e95b38; }
.deck-detail-content { font: 400 17px/2 "Noto Serif TC", serif; }
.deck-detail-content > p { margin: 0 0 24px; }
.deck-system-map { display: grid; grid-template-columns: 1fr 66px 1fr 66px 1fr; align-items: stretch; margin: 36px 0 40px; }
.deck-system-card { padding: 25px; border: 1px solid rgba(123,83,20,.16); background: #fffdf7; }
.deck-system-card svg { width: 54px; height: 54px; margin-bottom: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.system-card-tarot { color: #df5534; }.system-card-chakra { color: #16868a; }.system-card-insight { color: #97731c; }
.deck-system-card small { display: block; margin-bottom: 7px; font: 700 11px/1.2 "Noto Sans TC",sans-serif; letter-spacing: .16em; }
.deck-system-card h3 { margin: 0 0 12px; color: #29221c; font: 700 25px/1.35 "Noto Serif TC",serif; }
.deck-system-card p { margin: 0; color: #443b32; font-size: 16px; line-height: 1.85; }
.deck-system-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #aa7d18; }
.deck-system-link::before,.deck-system-link::after { content: ""; width: 1px; flex: 1; max-height: 60px; background: rgba(170,125,24,.35); }
.deck-system-link span { font: 400 34px/1 "Noto Sans TC",sans-serif; }
.deck-system-link b { font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .1em; writing-mode: vertical-rl; }
.wisdom-systems { margin: 46px 0 68px; }
.wisdom-heading { max-width: 720px; margin: 0 auto 18px; text-align: center; }
.wisdom-heading small { color: #e05232; font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .2em; }
.wisdom-heading h3 { margin: 10px 0 12px; color: #27211b; font: 700 clamp(30px,4vw,44px)/1.25 "Noto Serif TC",serif; }
.wisdom-heading p { margin: 0; color: #675d52; font: 500 16px/1.8 "Noto Sans TC",sans-serif; }
.wisdom-triangle { position: relative; width: min(100%,900px); height: 570px; margin: 0 auto 50px; }
.wisdom-triangle-lines { position: absolute; inset: 18px 0 0; width: 100%; height: 540px; overflow: visible; }
.wisdom-triangle-lines path:first-child { fill: rgba(242,211,91,.1); stroke: rgba(166,125,22,.34); stroke-width: 1.4; }
.wisdom-triangle-lines path:last-child { fill: none; stroke: rgba(166,125,22,.19); stroke-width: 1; stroke-dasharray: 5 7; }
.wisdom-node { position: absolute; z-index: 2; width: 245px; padding: 22px 24px 20px; background: rgba(255,253,247,.96); box-shadow: 0 14px 38px rgba(77,57,27,.1); text-align: center; }
.wisdom-node::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: currentColor; }
.wisdom-node > span { position: absolute; left: 14px; top: 14px; opacity: .2; font: 700 36px/1 "Noto Serif TC",serif; }
.wisdom-node small { display: block; margin-bottom: 7px; font: 700 10px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .16em; }
.wisdom-node h4 { margin: 0 0 5px; color: #29221c; font: 700 22px/1.4 "Noto Serif TC",serif; }
.wisdom-node p { margin: 0 0 9px; color: #5c5147; font: 500 13px/1.6 "Noto Sans TC",sans-serif; }
.wisdom-node b { display: inline-block; color: currentColor; font: 700 13px/1.4 "Noto Sans TC",sans-serif; }
.wisdom-node-tarot { top: 38px; left: 50%; color: #df5534; transform: translateX(-50%); }
.wisdom-node-chakra { bottom: 18px; left: 0; color: #16868a; }
.wisdom-node-insight { right: 0; bottom: 18px; color: #9b741b; }
.wisdom-core { position: absolute; z-index: 3; left: 50%; top: 54%; display: flex; width: 210px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border-radius: 50%; background: linear-gradient(145deg,#f7dc6c,#f2cd4f); box-shadow: 0 20px 48px rgba(158,119,24,.2); text-align: center; transform: translate(-50%,-50%); }
.wisdom-core small { margin-bottom: 7px; color: #816012; font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .14em; }
.wisdom-core strong { color: #2d251c; font: 700 23px/1.45 "Noto Serif TC",serif; }
.wisdom-core span { margin-top: 7px; color: #6d551e; font: 600 11px/1.5 "Noto Sans TC",sans-serif; }
.wisdom-details { display: grid; gap: 28px; }
.wisdom-detail { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.55fr); min-height: 430px; overflow: hidden; background: #fffdf7; border: 1px solid rgba(102,76,27,.11); box-shadow: 0 15px 45px rgba(63,46,25,.06); }
.wisdom-detail-chakra { grid-template-columns: minmax(0,1.55fr) minmax(220px,.72fr); }
.wisdom-detail-chakra .wisdom-detail-visual { order: 2; }
.wisdom-detail-visual { position: relative; display: flex; min-height: 100%; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.wisdom-detail-visual::before,.wisdom-detail-visual::after { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; opacity: .22; }
.wisdom-detail-visual::before { width: 270px; height: 270px; }
.wisdom-detail-visual::after { width: 190px; height: 190px; }
.wisdom-detail-visual > span { position: absolute; left: 26px; top: 18px; opacity: .18; font: 700 82px/1 "Noto Serif TC",serif; }
.wisdom-detail-visual svg { position: relative; z-index: 1; width: 82px; height: 82px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wisdom-detail-visual small { position: relative; z-index: 1; margin-top: 18px; font: 700 10px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .18em; }
.wisdom-detail-tarot .wisdom-detail-visual { color: #d94d2e; background: linear-gradient(145deg,#f4d561,#f7e594); }
.wisdom-detail-chakra .wisdom-detail-visual { color: #177b80; background: linear-gradient(145deg,#d7efeb,#f4dc73); }
.wisdom-detail-insight .wisdom-detail-visual { color: #986f14; background: linear-gradient(145deg,#f7e8b0,#f1d05e); }
.wisdom-detail-copy { align-self: center; padding: clamp(34px,5vw,66px); }
.wisdom-kicker { margin: 0 0 13px !important; color: #e05232; font: 700 12px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .1em; }
.wisdom-detail-chakra .wisdom-kicker { color: #177b80; }
.wisdom-detail-insight .wisdom-kicker { color: #92701c; }
.wisdom-detail-copy h4 { margin: 0 0 22px; color: #28211b; font: 700 clamp(24px,3.1vw,35px)/1.5 "Noto Serif TC",serif; }
.wisdom-detail-copy > p:not(.wisdom-kicker) { margin: 0 0 26px; color: #51483f; font-size: 16px; line-height: 1.95; }
.wisdom-learning { padding-top: 19px; border-top: 1px solid rgba(87,67,34,.15); }
.wisdom-learning > b { display: block; margin-bottom: 12px; color: #2f2923; font: 700 12px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .08em; }
.wisdom-learning > div { display: flex; flex-wrap: wrap; gap: 8px; }
.wisdom-learning span { padding: 7px 12px; border-radius: 100px; background: #fff5cf; color: #6f5416; font: 600 12px/1.45 "Noto Sans TC",sans-serif; }
.wisdom-detail-chakra .wisdom-learning span { background: #e3f3f0; color: #176c70; }
.wisdom-detail-insight .wisdom-learning span { background: #f8eabc; color: #765813; }
.insight-dimensions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0 0 24px; }
.insight-dimensions span { padding: 9px 8px; border: 1px solid rgba(151,112,20,.24); border-radius: 100px; color: #775918; font: 600 12px/1.35 "Noto Sans TC",sans-serif; text-align: center; }

.wisdom-learning-dialog { width: min(1040px,calc(100% - 40px)); max-height: 90vh; padding: 0; border: 0; border-radius: 26px; background: #fffdf7; box-shadow: 0 34px 90px rgba(42,31,20,.28); }
.wisdom-learning-dialog::backdrop { background: rgba(28,26,23,.72); backdrop-filter: blur(5px); }
.wisdom-learning-sheet { position: relative; }
.wisdom-learning-sheet > form { position: absolute; z-index: 5; right: 18px; top: 18px; }
.wisdom-learning-close { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(39,33,27,.16); border-radius: 50%; background: rgba(255,253,247,.94); color: #2c251e; font: 300 28px/1 "Noto Sans TC",sans-serif; cursor: pointer; }
.wisdom-learning-panel { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); min-height: 640px; }
.wisdom-learning-panel[hidden] { display: none; }
.wisdom-learning-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.wisdom-learning-visual::before { content: ""; position: absolute; inset: 9%; border: 1px solid currentColor; border-radius: 48%; opacity: .14; transform: rotate(-6deg); }
.wisdom-visual-label { position: absolute; z-index: 4; left: 22px; top: 20px; display: flex; align-items: baseline; gap: 9px; }
.wisdom-visual-label span { font: 700 22px/1 "Noto Serif TC",serif; }
.wisdom-visual-label small { font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .16em; }
.panel-tarot .wisdom-learning-visual { color: #d94f30; background: linear-gradient(145deg,#f4d561,#f8e8a3); }
.panel-chakra .wisdom-learning-visual { color: #177b80; background: linear-gradient(145deg,#d9f0ec,#f2dc73); }
.panel-insight .wisdom-learning-visual { color: #946d15; background: linear-gradient(145deg,#f9ecbb,#f2d15f); }
.wisdom-tarot-card,.wisdom-chakra-figure { position: relative; z-index: 2; margin: 42px 0 0; }
.wisdom-tarot-card { width: min(65%,255px); }
.wisdom-tarot-card img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 22px 44px rgba(32,77,83,.24); }
.wisdom-chakra-figure { width: min(92%,410px); height: 540px; }
.wisdom-chakra-figure img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(64,58,38,.16)); }
.insight-path-map { position: relative; z-index: 2; width: min(90%,400px); margin-top: 38px; padding: 28px 18px 18px; color: #4a402b; }
.insight-path-map header { position: relative; z-index: 2; margin-bottom: 18px; text-align: center; }
.insight-path-map header small,.insight-path-map header strong { display: block; }
.insight-path-map header small { color: #8a6818; font: 700 9px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .18em; }
.insight-path-map header strong { margin-top: 6px; color: #332b21; font: 700 21px/1.4 "Noto Serif TC",serif; }
.insight-path-map > svg { position: absolute; z-index: 0; left: 3%; top: 92px; width: 94%; height: 390px; overflow: visible; }
.insight-path-map > svg path { fill: none; stroke: rgba(255,255,255,.78); stroke-width: 28; stroke-linecap: round; stroke-linejoin: round; }
.insight-path-map ol { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3,110px); gap: 18px 64px; margin: 0; padding: 0; list-style: none; }
.insight-path-map li { display: flex; width: 112px; height: 78px; align-self: center; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 42px; background: #fffdf4; box-shadow: 0 10px 24px rgba(95,70,17,.12); text-align: center; }
.insight-path-map li:nth-child(even) { justify-self: end; }
.insight-path-map li:nth-child(3) { grid-column: 2; grid-row: 2; }
.insight-path-map li:nth-child(4) { grid-column: 1; grid-row: 2; }
.insight-path-map li:nth-child(5) { grid-column: 1; grid-row: 3; }
.insight-path-map li:nth-child(6) { grid-column: 2; grid-row: 3; }
.insight-path-map li b { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #d3ae37; color: #fff; font: 700 10px/1 "Noto Sans TC",sans-serif; }
.insight-path-map li span { color: #3c3428; font: 700 13px/1.35 "Noto Sans TC",sans-serif; }
.wisdom-learning-copy { align-self: center; padding: clamp(46px,6vw,76px); }
.wisdom-learning-copy h2 { margin: 0 0 28px; color: #28211b; font: 700 clamp(28px,3.3vw,43px)/1.5 "Noto Serif TC",serif; }
.wisdom-learning-copy > p:not(.wisdom-kicker) { margin: 0 0 30px; color: #51483f; font: 400 17px/2 "Noto Serif TC",serif; }
.deck-guide-edition { display: grid; grid-template-columns: minmax(240px,360px) 1fr; align-items: center; gap: clamp(34px,6vw,74px); margin: 58px 0 54px; padding: clamp(30px,5vw,55px); background: linear-gradient(135deg,#e9f5f3 0%,#f7fbf9 58%,#f5dc75 100%); }
.deck-guide-visual { position: relative; max-width: 330px; margin: 0 auto; }
.deck-guide-visual::before { content: ""; position: absolute; inset: 7% -11%; border: 1px solid rgba(31,127,130,.28); border-radius: 50%; transform: rotate(-7deg); }
.deck-guide-visual img { position: relative; display: block; width: 100%; border-radius: 26px; box-shadow: 0 24px 50px rgba(32,83,88,.19); }
.deck-guide-edition figcaption small { color: #1f7f82; font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .15em; }
.deck-guide-edition figcaption h3 { margin: 10px 0 18px; color: #27211b; font: 700 34px/1.3 "Noto Serif TC",serif; }
.deck-guide-edition figcaption p { margin: 0 0 22px; color: #443b32; font-size: 17px; line-height: 1.9; }
.deck-guide-edition figcaption span { display: inline-block; padding: 8px 13px; background: #e95b38; color: #fff; font: 700 14px/1.5 "Noto Sans TC",sans-serif; letter-spacing: .04em; }
.deck-detail-questions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 34px 0 38px;
  background: rgba(156,120,25,.19);
  border: 1px solid rgba(156,120,25,.19);
}
.deck-detail-questions p {
  min-height: 128px;
  margin: 0;
  padding: 24px 26px;
  background: #f6df78;
  font-weight: 600;
  line-height: 1.75;
}
.deck-detail-questions span {
  display: block;
  margin-bottom: 8px;
  color: #df5534;
  font: 700 12px/1 "Noto Sans TC", sans-serif;
  letter-spacing: .14em;
}
.deck-detail-unique { margin: 42px 0; padding: 32px 36px; border-top: 1px solid rgba(224,82,50,.35); border-bottom: 1px solid rgba(224,82,50,.35); background: rgba(255,255,255,.52); }
.deck-detail-unique small { display: block; margin-bottom: 12px; color: #e05232; font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .18em; }
.deck-detail-unique p { margin: 0 0 15px; }
.deck-detail-unique p strong { color: #e05232; font-weight: 800; }
.deck-detail-unique > b { color: #1f7f82; font-size: 18px; line-height: 1.7; }
.deck-journey-section { margin: 46px 0; }
.deck-journey-section > header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; }
.deck-journey-section > header small { color: #a87616; font: 700 11px/1.3 "Noto Sans TC",sans-serif; letter-spacing: .17em; }
.deck-journey-section > header h3 { margin: 0; font: 700 26px/1.35 "Noto Serif TC",serif; }
.deck-journey-path { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.deck-journey-path > div { position: relative; min-height: 150px; padding: 0 0 22px; background: #f4d766; overflow: visible; }
.deck-journey-path > div:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -20px; top: 50%; color: #e05232; font: 700 22px/1 "Noto Sans TC",sans-serif; transform: translateY(-50%); }
.deck-journey-path img { display: block; width: 100%; aspect-ratio: 827/1418; margin-bottom: 20px; border-radius: 0; object-fit: cover; }
.deck-journey-path span { display: block; margin: 0 20px 12px; color: #e05232; font: 700 12px/1 "Noto Sans TC",sans-serif; }
.deck-journey-path b { display: block; min-height: 52px; margin: 0 20px; font-size: 17px; line-height: 1.55; }
.deck-journey-path small { display: inline-block; margin: 10px 20px 0; padding: 4px 9px; background: #fff9df; color: #1f7f82; font: 700 12px/1.4 "Noto Sans TC",sans-serif; letter-spacing: .06em; }
.deck-detail-content blockquote {
  margin: 44px 0 0;
  padding: 30px 34px;
  border-left: 5px solid #e95b38;
  background: #f2d466;
  color: #282019;
  font: 700 clamp(20px,2.5vw,29px)/1.75 "Noto Serif TC", serif;
}

@media (max-width: 760px) {
  .deck-detail-trigger {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: min(86%, 300px);
    margin: -28px auto 62px;
    transform: none;
  }
  .deck-detail-trigger:hover { transform: translateY(-2px); }
  .deck-detail-dialog { width: calc(100% - 20px); max-height: 92vh; border-radius: 20px; }
  .deck-detail-sheet { padding: 46px 24px 38px; }
  .deck-detail-close-wrap { top: 10px; }
  .deck-detail-header { margin-bottom: 30px; padding-right: 0; }
  .deck-detail-header h2 { font-size: clamp(16px,4.8vw,27px); }
  .deck-detail-header strong { font-size: clamp(12px,3.1vw,16px); letter-spacing: -.08em; }
  .deck-detail-keywords { gap: 8px; }
  .deck-detail-keywords span { font-size: 12px; }
  .deck-detail-content { font-size: 16px; line-height: 1.9; }
  .deck-system-map { grid-template-columns: 1fr; gap: 0; }
  .deck-system-link { min-height: 74px; flex-direction: row; }
  .deck-system-link::before,.deck-system-link::after { width: auto; height: 1px; max-height: none; max-width: 58px; }
  .deck-system-link b { writing-mode: horizontal-tb; }
  .wisdom-systems { margin: 38px 0 48px; }
  .wisdom-heading { margin-bottom: 28px; }
  .wisdom-heading p { font-size: 14px; }
  .wisdom-triangle { display: grid; width: 100%; height: auto; gap: 24px; margin-bottom: 38px; }
  .wisdom-triangle-lines { display: none; }
  .wisdom-node { position: relative; inset: auto; width: 100%; padding: 20px 18px; transform: none; }
  .wisdom-node:not(:last-of-type)::after { content: "↓"; position: absolute; left: 50%; bottom: -24px; color: #b58921; font: 700 15px/1 "Noto Sans TC",sans-serif; transform: translateX(-50%); }
  .wisdom-core { position: relative; left: auto; top: auto; grid-row: 4; width: min(210px,74vw); margin: 4px auto 0; transform: none; }
  .wisdom-detail,.wisdom-detail-chakra { grid-template-columns: 1fr; min-height: 0; }
  .wisdom-detail-chakra .wisdom-detail-visual { order: 0; }
  .wisdom-detail-visual { min-height: 230px; }
  .wisdom-detail-visual::before { width: 210px; height: 210px; }
  .wisdom-detail-visual::after { width: 145px; height: 145px; }
  .wisdom-detail-visual > span { font-size: 60px; }
  .wisdom-detail-visual svg { width: 66px; height: 66px; }
  .wisdom-detail-copy { padding: 30px 22px 34px; }
  .wisdom-detail-copy h4 { font-size: 25px; }
  .wisdom-detail-copy > p:not(.wisdom-kicker) { font-size: 15px; }
  .insight-dimensions { grid-template-columns: repeat(2,1fr); }
  .wisdom-learning-dialog { width: calc(100% - 20px); border-radius: 20px; }
  .wisdom-learning-panel { grid-template-columns: 1fr; min-height: 0; }
  .wisdom-learning-visual { min-height: 500px; }
  .wisdom-visual-label { left: 18px; top: 17px; }
  .wisdom-tarot-card { width: min(58%,240px); margin-top: 48px; }
  .wisdom-chakra-figure { width: min(88%,380px); height: 480px; margin-top: 30px; }
  .insight-path-map { width: min(94%,400px); margin: 52px auto 22px; }
  .wisdom-learning-copy { padding: 34px 24px 42px; }
  .wisdom-learning-copy h2 { font-size: 27px; }
  .wisdom-learning-copy > p:not(.wisdom-kicker) { font-size: 16px; }
  .deck-guide-edition { grid-template-columns: 1fr; gap: 34px; padding: 34px 22px; }
  .deck-guide-visual { width: min(76%,320px); }
  .deck-guide-edition figcaption { text-align: center; }
  .deck-guide-edition figcaption h3 { font-size: 29px; }
  .deck-detail-questions { grid-template-columns: 1fr; }
  .deck-detail-questions p { min-height: 0; padding: 20px; }
  .deck-detail-unique { padding: 26px 22px; }
  .deck-journey-path { grid-template-columns: 1fr; gap: 18px; }
  .deck-journey-path > div { min-height: 0; }
  .deck-journey-path > div:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -20px; transform: translateX(50%); }
  .deck-journey-path b { min-height: 0; }
  .deck-detail-content blockquote { padding: 24px 22px; font-size: 20px; }
  .deck-detail-content blockquote br { display: none; }
}

/* 04 — second profession and reader role */
.reader-profession{padding:100px 0 90px;background:#fffdf5;color:var(--soul-ink)}
.reader-section-heading{display:flex;gap:28px;align-items:flex-start;margin-bottom:48px}
.reader-section-number{font-size:76px;line-height:1;font-weight:700;color:var(--soul-teal);letter-spacing:-.06em}
.reader-section-heading small{font-size:13px;letter-spacing:.15em;color:var(--soul-teal);font-weight:700}
.reader-section-heading h2{font-size:clamp(28px,3.3vw,44px);line-height:1.5;margin:10px 0 0}
.reader-specialty{display:grid;grid-template-columns:1.15fr .85fr;background:#fff;border:1px solid #e2e5d8;border-radius:24px;overflow:hidden}
.reader-specialty-copy{padding:44px 46px}
.reader-eyebrow{font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--soul-teal);margin:0 0 12px}
.reader-profession h3{font-size:clamp(25px,2.6vw,34px);line-height:1.5;margin:0 0 8px}
.reader-english{font-size:14px;letter-spacing:.04em;color:#677169;margin:0 0 25px}
.reader-system-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.reader-system-tags span{font-size:14px;padding:8px 12px;border-radius:6px;background:#e9f3ef;color:#17646a;font-weight:600}
.reader-body{font-size:16px;line-height:2;margin:0;color:#51594f}
.reader-body strong{color:#17646a;font-weight:700}
.reader-card-visual{margin:0;padding:34px 30px;background:linear-gradient(145deg,#f8eaa5,#f4d563);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;overflow:hidden}
.reader-visual-label{text-align:center;display:grid;gap:9px;color:#544c30}
.reader-visual-label small{font-size:12px;letter-spacing:.16em;font-weight:700}
.reader-visual-label span{font-size:16px;font-weight:600}
.reader-card-pair{display:flex;align-items:center;justify-content:center;padding:10px 8px 4px;gap:14px}
.reader-card-pair img{width:43%;max-width:145px;height:auto;border-radius:10px;box-shadow:0 14px 25px #725a232b;transform:rotate(-9deg)}
.reader-card-pair img+img{transform:rotate(9deg) translateY(10px)}
.reader-card-visual figcaption{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:700;color:#544c30;margin-top:8px}
.reader-card-visual figcaption i{font-style:normal;opacity:.6}
.reader-role{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;padding:52px 0 44px;margin-top:8px}
.reader-role-heading{border-left:4px solid var(--soul-gold);padding-left:24px}
.reader-role-heading h3{font-size:clamp(24px,2.5vw,32px)}
.reader-role-lead{font-size:23px;line-height:1.7;color:var(--soul-teal);font-weight:600;margin:28px 0 0}
.reader-exploration{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0}
.reader-exploration span{border-bottom:2px solid #d9a92c;padding:12px 2px;text-align:center;font-size:14px;font-weight:700;color:#465249;background:#fff7d8}
.reader-process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d7dfd7;border-bottom:1px solid #d7dfd7;padding:28px 0;gap:24px}
.reader-process>div{display:grid;gap:10px;border-left:1px solid #d7dfd7;padding-left:20px}
.reader-process>div:first-child{border-left:none;padding-left:0}
.reader-process small{font-size:12px;color:var(--soul-teal);letter-spacing:.08em;font-weight:700}
.reader-process b{font-size:20px}
.reader-process span{font-size:14px;color:#667063;line-height:1.7}
.reader-quote{margin:48px 0 0;padding:34px 24px;background:var(--soul-teal);border-radius:18px;text-align:center;color:#fff;font-size:clamp(20px,2.2vw,28px);line-height:1.9;font-weight:600}
.reader-quote span{color:#ffe488}
@media(max-width:800px){.reader-profession{padding:64px 0}.reader-section-heading{gap:20px;margin-bottom:30px}.reader-section-number{font-size:58px}.reader-specialty{grid-template-columns:1fr}.reader-specialty-copy{padding:30px 26px}.reader-card-visual{padding:28px;gap:20px}.reader-card-pair img{max-width:135px}.reader-role{grid-template-columns:1fr;gap:28px;padding:38px 0}.reader-role-lead{margin-top:18px}.reader-exploration{grid-template-columns:repeat(2,1fr)}.reader-process{grid-template-columns:repeat(2,1fr);gap:28px 18px}.reader-process>div:nth-child(3){border-left:none;padding-left:0}.reader-quote{margin-top:32px;padding:28px 16px}}
@media(prefers-reduced-motion:reduce){.reader-profession *{scroll-behavior:auto}}

/* Refined professional identities and four-card spread */
.reader-section-heading h2,.reader-profession h3{font-family:"Noto Serif TC",serif;font-weight:700;letter-spacing:-.035em}
.reader-specialty{grid-template-columns:1fr 1fr;border-color:#ded5b3;box-shadow:0 10px 36px #69592408}
.reader-specialty-copy{position:relative;background:linear-gradient(135deg,#fff 65%,#fbf5df);padding:40px 36px}
.reader-specialty-copy:before,.reader-role-heading:before{content:"";position:absolute;inset:10px;border:1px solid #bc9b4f40;border-radius:15px;pointer-events:none}
.reader-specialty-copy:after,.reader-role-heading:after{content:"";position:absolute;right:20px;top:20px;width:65px;height:65px;background:repeating-linear-gradient(45deg,transparent 0 7px,#b79b4f26 7px 8px);border:1px solid #b79b4f30;border-radius:50%;pointer-events:none}
.reader-identity-label{display:grid;gap:10px;position:relative;z-index:1;padding-bottom:14px;border-bottom:1px solid #cbb46d55;margin-bottom:22px}
.reader-identity-label span{font-size:12px;font-weight:600;letter-spacing:.13em;color:#8a753d}
.reader-profession .reader-specialty h3,.reader-profession .reader-role h3{font-size:clamp(25px,2.7vw,36px);position:relative;z-index:1}
.reader-role{grid-template-columns:1fr 1.2fr;align-items:center;gap:38px}
.reader-role-heading{position:relative;border:none;border-radius:20px;padding:35px;background:radial-gradient(circle at 0 0,#c3dcd55c 1px,transparent 1.5px) 0 0/12px 12px,linear-gradient(135deg,#f0f6f2,#fff8df)}
.reader-card-visual{padding:34px 22px;gap:24px;background:radial-gradient(ellipse at center,#fff4c4,transparent 65%),linear-gradient(135deg,#f9eab0,#f2d465)}
.reader-card-fan{width:100%;max-width:420px;height:310px;position:relative;margin:12px 0 5px}
.reader-card-fan img{position:absolute;width:35%;height:auto;left:32.5%;top:25px;border-radius:9px;box-shadow:0 12px 20px #67522230;transform-origin:50% 110%}
.reader-card-fan img:nth-child(1){transform:translateX(-72%) rotate(-21deg);z-index:1}
.reader-card-fan img:nth-child(2){transform:translateX(-24%) rotate(-7deg);z-index:2}
.reader-card-fan img:nth-child(3){transform:translateX(24%) rotate(7deg);z-index:3}
.reader-card-fan img:nth-child(4){transform:translateX(72%) rotate(21deg);z-index:4}
.reader-spread{padding:34px 30px 30px;border:1px solid #d6dfd6;border-radius:22px;background:#f2f6f1}
.reader-spread header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}
.reader-spread header small{font-size:12px;letter-spacing:.13em;color:#167a82;font-weight:700}
.reader-spread header h3{font-size:28px;margin:8px 0 0}
.reader-spread header p{font-size:14px;color:#667063;line-height:1.8;margin:0}
.reader-spread-path{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.reader-spread-path:before{content:"";position:absolute;left:12%;right:12%;top:18px;height:1px;background:#a9bcb2}
.reader-spread-path li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.spread-marker{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;background:#f2f6f1;border:1px solid #a9bcb2;border-radius:50%;font-size:12px;color:#167a82;font-weight:700;margin-bottom:18px}
.spread-card-symbol{display:grid;place-items:center;width:62px;height:90px;border:1px solid #b29a57;border-radius:7px;outline:1px solid #b29a5755;outline-offset:-6px;background:repeating-linear-gradient(45deg,transparent 0 10px,#b29a5710 10px 11px),#fffaf0;color:#93804a;font:600 24px Georgia,serif;box-shadow:0 6px 12px #5265500b;margin-bottom:18px}
.reader-spread-path small{font-size:15px;color:#167a82;font-weight:700}
.reader-spread-path h4{font-family:"Noto Serif TC",serif;font-size:18px;line-height:1.65;margin:8px 0 0}
@media(max-width:1000px) and (min-width:801px){.reader-card-fan{height:265px}.reader-specialty-copy{padding:34px 28px}.reader-role-heading{padding:30px 25px}.reader-spread-path h4{font-size:16px}}
@media(max-width:800px){.reader-specialty{grid-template-columns:1fr}.reader-specialty-copy{padding:32px 26px}.reader-role{grid-template-columns:1fr;gap:26px}.reader-role-heading{padding:30px 26px}.reader-card-fan{max-width:390px;height:300px}.reader-spread{padding:28px 18px}.reader-spread header{display:block}.reader-spread header p{margin-top:12px}.reader-spread-path{grid-template-columns:repeat(2,1fr);gap:28px 16px}.reader-spread-path:before{display:none}.reader-spread-path li{padding:18px 6px;background:#ffffff8c;border:1px solid #d6dfd6;border-radius:14px}.spread-marker{margin-bottom:14px}.reader-spread-path h4{font-size:16px}}
@media(max-width:400px){.reader-card-fan{height:260px}.reader-card-visual{padding-left:18px;padding-right:18px}.reader-visual-label span{font-size:14px}}

/* Matte gold professional titles */
.reader-profession .reader-specialty h3,
.reader-profession .reader-role-heading h3 {
  color:#896324;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .reader-profession .reader-specialty h3,
  .reader-profession .reader-role-heading h3 {
    background:linear-gradient(112deg,#79521b 0%,#98712d 23%,#aa8236 42%,#856024 57%,#a17b32 76%,#79551e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
  }
}
@media (forced-colors:active) {
  .reader-profession .reader-specialty h3,
  .reader-profession .reader-role-heading h3 {
    background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;
  }
}

.reader-system-tags-expanded{gap:8px}.reader-system-tags-expanded .reader-full-reading{flex-basis:100%;display:grid;gap:7px;padding:15px 16px;background:#edf3e9;border:1px solid #d6dfc9}.reader-full-reading b{font-size:16px;line-height:1.6}.reader-system-tags-expanded .reader-full-reading small{font-size:14px;font-weight:400;line-height:1.7;color:#536657}.reader-system-tags-expanded>span:not(.reader-full-reading){font-size:14px;line-height:1.6;padding:9px 11px}

/* Role actions: title and concise supporting copy. */
.reader-exploration span{padding:16px 10px}
.reader-exploration b{display:block;font-size:16px;line-height:1.5}
.reader-exploration small{display:block;margin-top:8px;font-size:14px;font-weight:400;line-height:1.7}

.spread-card-back{display:block;width:100px;max-width:75%;height:auto;border-radius:8px;box-shadow:0 8px 18px #62542b20;margin-bottom:18px}.reader-quote{font-family:"Noto Serif TC",serif;font-weight:700;letter-spacing:-.035em}@media(max-width:800px){.spread-card-back{width:90px}}

/* Three balanced system panels aligned with the full reading panel */
.reader-system-tags-expanded{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.reader-system-tags-expanded .reader-full-reading{grid-column:1/-1}
.reader-system-tags-expanded>span:not(.reader-full-reading){display:flex;align-items:center;justify-content:center;text-align:center;min-height:68px;padding:12px 9px;box-sizing:border-box;border:1px solid;line-height:1.7}
.reader-system-tags-expanded>span:nth-child(2){background:#e8f1fa;color:#285b81;border-color:#bfd4e8}
.reader-system-tags-expanded>span:nth-child(3){background:#f0eafa;color:#665086;border-color:#d7c8e9}
.reader-system-tags-expanded>span:nth-child(4){background:#e8f3eb;color:#356c4f;border-color:#c3ddcd}
@media(max-width:430px){.reader-system-tags-expanded{grid-template-columns:1fr}.reader-system-tags-expanded>span:not(.reader-full-reading){min-height:52px}}

.reader-section-number{font-family:"Noto Serif TC",serif;font-weight:700}.reader-system-tags-expanded .reader-full-reading{text-align:center;justify-items:center}.reader-dimension-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;width:100%}.reader-dimension-list em{display:inline-flex;align-items:center;gap:6px;font-style:normal}.dimension-icon{width:23px;height:23px;color:#167a82;background:#fff9;border-radius:50%;padding:3px;box-sizing:border-box;flex-shrink:0}.reader-system-tags-expanded>span:not(.reader-full-reading){flex-direction:column;gap:12px;min-height:120px;padding:16px 8px}.reader-system-icon{width:36px;height:36px;padding:8px;box-sizing:content-box;background:#ffffff80;border-radius:50%;box-shadow:0 3px 9px #323b4410}.reader-system-tags-expanded>span>b{font-size:14px;line-height:1.7}.life-topic-sheet [data-life-content="self"] p strong{color:#167a82}@media(max-width:430px){.reader-system-tags-expanded>span:not(.reader-full-reading){flex-direction:row;justify-content:flex-start;text-align:left;min-height:76px;padding:12px 16px}.reader-system-icon{width:28px;height:28px}.reader-dimension-list{gap:10px 12px}}

.reader-system-tags-expanded .reader-chakra-icon-pair{display:flex;align-items:center;justify-content:center;gap:9px;height:60px;padding:0;background:none;border:none}.reader-chakra-icon-pair img{display:block;width:60px;height:60px;object-fit:contain}.reader-rainbow-icon{width:46px;height:46px;display:block}@media(max-width:430px){.reader-system-tags-expanded .reader-chakra-icon-pair{height:52px;gap:5px;flex-shrink:0}.reader-chakra-icon-pair img{width:48px;height:48px}.reader-rainbow-icon{width:34px;height:34px}}

/* Four accompaniment actions: semantic icons using the existing teal/gold palette. */
.reader-exploration>span{display:flex;flex-direction:column;align-items:center;text-align:center}
.reader-exploration .reader-action-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;flex:0 0 60px;margin:0 auto 16px;border:1px solid #d4c485;border-radius:50%;background:#fffdf4;color:#5d7969;box-shadow:0 5px 14px #b4a56812}
.reader-action-icon svg{display:block;width:40px;height:40px}
.reader-exploration>span:nth-child(2) .reader-action-icon{color:#78819b}
.reader-exploration>span:nth-child(3) .reader-action-icon{color:#97804f}
.reader-exploration>span:nth-child(4) .reader-action-icon{color:#547b7c}
@media(max-width:600px){.reader-exploration .reader-action-icon{width:52px;height:52px;flex-basis:52px;margin-bottom:12px}.reader-action-icon svg{width:35px;height:35px}}

/* Prominent entry points for the two framework reading panels. */
.framework-detail-trigger[data-abilities-panel="interpretation"]{background:#117f88;border-color:#117f88;color:#fff;box-shadow:0 5px 14px #117f8826}
.framework-detail-trigger[data-abilities-panel="knowledge"]{background:#cf4c38;border-color:#cf4c38;color:#fff;box-shadow:0 5px 14px #cf4c3826}
.framework-detail-trigger[data-abilities-panel="interpretation"]:hover{background:#09636b;border-color:#09636b;color:#fff}
.framework-detail-trigger[data-abilities-panel="knowledge"]:hover{background:#b43b29;border-color:#b43b29;color:#fff}
.framework-detail-trigger:focus-visible{outline:3px solid #d7ae45;outline-offset:4px}

.system-node-read{display:block;width:100%;margin:10px auto 0;padding:8px 4px;border:0;border-radius:20px;background:var(--node-color);color:#fff;font:700 10px/1.5 "Noto Sans TC",sans-serif;cursor:pointer;transition:filter .2s,transform .2s}
.system-node-read:hover{filter:brightness(.9);transform:translateY(-1px)}
.system-node-read:focus-visible{outline:3px solid #e8c655;outline-offset:3px}
.system-node-insight .system-node-read{background:#956e13}
@media(max-width:600px){.system-node-read{font-size:9px;padding:8px 2px}}

/* Professional role and service positioning: a full-width identity and four dimensions. */
.reader-role.reader-role-service{display:block;padding:40px 0 44px}
.reader-role-service .reader-role-heading{padding:30px 36px;border-radius:22px 22px 0 0;background:radial-gradient(circle at 0 0,#c3dcd55c 1px,transparent 1.5px) 0 0/12px 12px,linear-gradient(110deg,#f0f6f2,#fff8df)}
.reader-role-service .reader-role-heading:before{border-radius:14px 14px 0 0}
.reader-role-service .reader-role-heading h3{margin:18px 0 10px}
.reader-role-service .reader-english{margin-bottom:0}
.reader-service{padding:36px;background:#fffdf6;border:1px solid #e9e0c7;border-top:0;border-radius:0 0 22px 22px}
.reader-service-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.reader-service-label{display:flex;gap:14px;align-items:center;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.08em;color:#9c8046}
.reader-service-label span{font-size:9px;letter-spacing:.13em;color:#a39e8f}
.reader-service h4{margin:0;font:700 clamp(23px,2.4vw,30px)/1.65 "Noto Serif TC",serif;color:#157a80}
.reader-service-intro .reader-body{margin:0;padding-left:28px;border-left:1px solid #ddcfab;font-size:16px;line-height:1.95}
.reader-service-items-label{margin-top:32px;padding-top:26px;border-top:1px solid #e9e1cf}
.reader-service-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0}
.reader-service-items li{--service-accent:#5d8270;padding:22px 18px;border-radius:14px;background:#edf3ee;border:1px solid #dce6dc}
.reader-service-items li:nth-child(2){--service-accent:#a87958;background:#faf0e6;border-color:#eedfcf}
.reader-service-items li:nth-child(3){--service-accent:#8a7599;background:#f2edf7;border-color:#e5dced}
.reader-service-items li:nth-child(4){--service-accent:#5d8598;background:#eaf2f7;border-color:#d8e6ed}
.reader-service-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.reader-service-item-top i{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#ffffffb3;color:var(--service-accent)}
.reader-service-item-top svg{width:35px;height:35px}
.reader-service-item-top span{font:500 24px/1 "Noto Serif TC",serif;color:var(--service-accent);opacity:.65}
.reader-service-items h5{margin:0 0 8px;color:var(--service-accent);font:700 20px/1.5 "Noto Serif TC",serif}
.reader-service-items p{margin:0;font-size:14px;line-height:1.8;color:#626d64}
@media(max-width:800px){.reader-service-intro{grid-template-columns:1fr;gap:22px}.reader-service-intro .reader-body{padding-left:0;border:0}.reader-service-items{grid-template-columns:repeat(2,minmax(0,1fr))}.reader-service{padding:28px 24px}.reader-role-service .reader-role-heading{padding:28px 24px}.reader-service-label{flex-wrap:wrap;gap:7px 12px}.reader-service-items li{padding:18px 15px}}
@media(max-width:430px){.reader-service-items{gap:10px}.reader-service{padding:24px 18px}.reader-service-items h5{font-size:18px}.reader-service-items p{font-size:13px}.reader-service-item-top span{font-size:20px}}

/* One service journey, expressed through the four spread positions. */
.reader-spread-integrated{margin-top:34px;padding:30px 0 0;border:0;border-top:1px solid #e9e1cf;border-radius:0;background:transparent}
.reader-spread-integrated header{display:block;margin-bottom:26px}
.reader-spread-integrated header h3{font:700 26px/1.6 "Noto Serif TC",serif;color:#157a80}
.reader-spread-integrated header h3 span{display:block;margin-top:4px;font-size:17px;color:#68786e;font-weight:500}
.reader-spread-integrated header p{margin-top:10px}
.reader-spread-integrated .reader-spread-path{gap:16px;padding-top:18px}
.reader-spread-integrated .reader-spread-path:before{top:18px;left:11%;right:11%;background:linear-gradient(90deg,#87a38f,#c59b7f,#ab97b9,#89aab9)}
.reader-spread-integrated .reader-spread-path li{--spread-accent:#5d8270;padding:26px 16px 22px;border:1px solid #dce6dc;border-radius:18px;background:linear-gradient(180deg,#f4f8f3,#eaf2eb);box-shadow:0 6px 18px #485c4806}
.reader-spread-integrated .reader-spread-path li:nth-child(2){--spread-accent:#a87958;border-color:#eedfcf;background:linear-gradient(180deg,#fff7ef,#f7ecdf)}
.reader-spread-integrated .reader-spread-path li:nth-child(3){--spread-accent:#8a7599;border-color:#e5dced;background:linear-gradient(180deg,#f9f5fc,#eee7f4)}
.reader-spread-integrated .reader-spread-path li:nth-child(4){--spread-accent:#5d8598;border-color:#d8e6ed;background:linear-gradient(180deg,#f2f8fc,#e5eff5)}
.reader-spread-integrated .spread-marker{position:absolute;top:-18px;background:#fffdf6;border-color:var(--spread-accent);color:var(--spread-accent);margin:0;font-family:"Noto Serif TC",serif}
.spread-purpose{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px}
.spread-purpose i{display:grid;place-items:center;width:50px;height:50px;color:var(--spread-accent);background:#ffffffb8;border-radius:50%}
.spread-purpose svg{width:34px;height:34px}
.reader-spread-integrated .spread-purpose h4{font-size:21px;color:var(--spread-accent);margin:0}
.reader-spread-integrated .spread-card-back{width:100px;max-width:75%;height:auto;transform:none;margin:0 0 18px;box-shadow:0 7px 14px #40351d18}
.reader-spread-integrated .reader-spread-path small{color:var(--spread-accent);font-size:16px;letter-spacing:.08em}
.spread-description{margin:12px 0 0;font-size:14px;line-height:1.85;color:#59645e;max-width:15em}
@media(max-width:800px){.reader-spread-integrated{padding:26px 0 0}.reader-spread-integrated .reader-spread-path{gap:36px 14px}.reader-spread-integrated header h3{font-size:24px}.reader-spread-integrated .reader-spread-path li{padding:26px 12px 20px}.reader-spread-integrated .spread-purpose h4{font-size:19px}.reader-spread-integrated .spread-card-back{width:90px}}
@media(max-width:430px){.reader-spread-integrated .reader-spread-path{gap:32px 10px}.spread-description{font-size:13px}.reader-spread-integrated header h3 span{font-size:15px}}

/* Section 05: possibilities orbit and photographic application stories. */
.development-section{padding:90px 0;background:linear-gradient(180deg,#fff,#fafbf7 48%,#fff)}
.development-intro{max-width:780px;margin:-18px 0 38px;font-size:17px;line-height:1.95;color:#667269}.development-intro strong{color:#167a82}
.development-orbit{position:relative;max-width:1000px;height:560px;margin:0 auto;background:radial-gradient(ellipse at center,#ebf4ec88,transparent 64%)}
.development-orbit-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#c8d6cc;stroke-width:1;stroke-dasharray:4 7;pointer-events:none}
.development-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:235px;height:235px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #b7cfc4;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fffef4,#eaf4ec);box-shadow:0 0 0 12px #fff9,0 0 0 13px #dce7dc;z-index:1;text-align:center}
.development-core small{font-size:10px;letter-spacing:.16em;color:#7b9988}.development-core strong{font:700 27px/1.5 "Noto Serif TC",serif;color:#167a82}.development-core>span{font-size:20px;color:#af9554;margin:2px 0}.development-core p{font:600 18px/1.5 "Noto Serif TC",serif;margin:0;color:#526c60}.development-core em{font-style:normal;font-size:12px;color:#8d978c;margin-top:14px}
.development-tone-1{--dev-accent:#4f8274;--dev-soft:#e9f3ee;--dev-line:#c7dcd1}.development-tone-2{--dev-accent:#a4813b;--dev-soft:#faf3dd;--dev-line:#e9ddb7}.development-tone-3{--dev-accent:#6b899d;--dev-soft:#eaf2f8;--dev-line:#cbdeea}.development-tone-4{--dev-accent:#96768f;--dev-soft:#f4edf5;--dev-line:#e2d1e0}.development-tone-5{--dev-accent:#ae795d;--dev-soft:#fbefe6;--dev-line:#ebd3c1}
.development-node{position:absolute;transform:translate(-50%,-50%);width:155px;height:155px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--dev-soft);border:1px solid var(--dev-line);color:var(--dev-accent);text-decoration:none;box-shadow:0 0 0 7px #fff9;transition:box-shadow .2s,background .2s;z-index:2}
.development-node:nth-of-type(1){left:50%;top:13%}.development-node:nth-of-type(2){left:85%;top:36%}.development-node:nth-of-type(3){left:72%;top:82%}.development-node:nth-of-type(4){left:28%;top:82%}.development-node:nth-of-type(5){left:15%;top:36%}
.development-node:hover{background:#fff;box-shadow:0 0 0 7px var(--dev-soft),0 8px 24px #37534414}.development-node:focus-visible{outline:3px solid var(--dev-accent);outline-offset:7px}
.development-node-icon svg{width:39px;height:39px}.development-node small{font-size:10px;letter-spacing:.12em}.development-node strong{font:700 15px/1.6 "Noto Serif TC",serif}.development-map-hint{text-align:center;font-size:12px;letter-spacing:.08em;color:#8b998e;margin:16px 0 65px}
.development-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center;padding:55px 25px;border-top:1px solid #e4e9e0;scroll-margin-top:100px}
.development-story:nth-child(even){grid-template-columns:1.1fr .9fr}.development-story:nth-child(even) .development-photo{order:2}.development-story:nth-child(even) .development-copy{order:1}
.development-photo{position:relative;width:100%;max-width:355px;aspect-ratio:1;margin:auto;padding:16px;box-sizing:border-box}
.development-photo:before{content:"";position:absolute;inset:0;border:1px solid var(--dev-line);border-radius:50%}.development-photo:after{content:"";position:absolute;left:0;bottom:22px;width:52px;height:52px;background:var(--dev-soft);border:1px solid var(--dev-line);border-radius:50%;z-index:0}
.development-photo-circle{height:100%;border-radius:50%;background:radial-gradient(circle at 28% 22%,#ffffffa6,transparent 55%),var(--dev-soft);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;overflow:hidden;color:var(--dev-accent);position:relative;border:1px solid #fff}
.development-photo-icon{width:100px;height:100px;display:grid;place-items:center;border:1px solid var(--dev-line);border-radius:50%;background:#ffffff6b}.development-photo-icon svg{width:66px;height:66px}.development-photo-label{font:600 15px/1.7 "Noto Serif TC",serif}.development-photo-circle small{font-size:9px;letter-spacing:.13em;opacity:.65}.development-photo-circle img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.development-photo-number{position:absolute;right:12px;top:20px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#fffdf5;border:1px solid var(--dev-line);font:600 23px "Noto Serif TC",serif;color:var(--dev-accent)}
.development-kicker{display:flex;align-items:center;gap:14px;color:var(--dev-accent);font:600 24px "Noto Serif TC",serif;margin:0 0 14px}.development-kicker span{font:600 10px/1.7 sans-serif;letter-spacing:.16em}.development-copy h3{font:700 clamp(23px,2.5vw,30px)/1.5 "Noto Serif TC",serif;margin:0 0 16px;color:#304c43;letter-spacing:-.03em}.development-lead{font-size:16px;line-height:1.8;color:var(--dev-accent);font-weight:700;margin:0 0 14px}.development-body{font-size:15px;line-height:1.95;color:#647067;margin:0 0 22px}.development-tags{display:flex;flex-wrap:wrap;gap:8px}.development-tags span{padding:6px 11px;border-radius:20px;background:var(--dev-soft);color:var(--dev-accent);border:1px solid var(--dev-line);font-size:12px}
.development-closing{text-align:center;padding:38px 20px;margin:35px 0 0;font:600 24px/1.9 "Noto Serif TC",serif;color:#167a82;background:linear-gradient(90deg,transparent,#edf4e9,transparent)}
@media(max-width:800px){.development-section{padding:64px 0}.development-intro{margin:0 0 30px;font-size:15px}.development-orbit{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;padding:18px 0}.development-orbit-lines{display:none}.development-core{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;justify-self:center;width:200px;height:200px;margin-bottom:20px}.development-node:nth-of-type(n){position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:1;max-width:155px;justify-self:center;box-shadow:none}.development-node strong{font-size:13px}.development-node-icon svg{width:32px;height:32px}.development-map-hint{margin:20px 0 35px}.development-story,.development-story:nth-child(even){grid-template-columns:1fr;gap:28px;padding:38px 0}.development-story:nth-child(even) .development-photo,.development-story:nth-child(even) .development-copy{order:initial}.development-photo{max-width:280px}.development-copy h3{font-size:24px}.development-closing{font-size:21px}.development-photo-label{font-size:14px}}
@media(max-width:450px){.development-orbit{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.development-node:last-child{grid-column:1/-1;width:145px}.development-node strong{font-size:14px}.development-photo{max-width:260px}.development-body{font-size:15px}.development-closing{font-size:19px}}
@media(prefers-reduced-motion:reduce){.development-node{transition:none}}



/* Section 05: soft aqua light, with warm edges to ease the transition. */
#development{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 75% 21% at 85% 12%,#c8e9e580,transparent 78%),radial-gradient(ellipse 85% 24% at 0% 49%,#d1eee980,transparent 78%),radial-gradient(ellipse 75% 22% at 100% 81%,#cae7e780,transparent 80%),linear-gradient(180deg,#fffdf5 0%,#f3faf7 15%,#f7fbf8 85%,#fffdf5 100%)}
#development>.shell{position:relative;z-index:1}
#development:before{content:"";position:absolute;width:660px;height:660px;right:-370px;top:300px;border-radius:50%;border:1px solid #81bdb726;box-shadow:0 0 0 52px #8bc5be08,0 0 0 104px #8bc5be06;pointer-events:none}
#development:after{content:"";position:absolute;width:540px;height:540px;left:-350px;top:58%;border-radius:50%;border:1px solid #81bdb722;box-shadow:0 0 0 60px #8bc5be06;pointer-events:none}
#development .development-orbit{background:radial-gradient(ellipse at center,#d9eeea90,transparent 70%)}
#development .development-core{background:radial-gradient(circle at 30% 20%,#fffdf2,#e0f1ec);border-color:#a9cec4;box-shadow:0 0 0 12px #ffffff80,0 0 0 13px #beddd3}
#development .development-story{border-top-color:#b9d8cf80}
#development .development-closing{background:radial-gradient(ellipse at center,#cce9e480,transparent 74%)}
@media(max-width:800px){#development:before,#development:after{opacity:.5}}

/* Stronger aqua depth and alternating pools of light in section 05. */
#development{background:radial-gradient(ellipse 90% 20% at 100% 13%,#85cbc4b3,transparent 78%),radial-gradient(ellipse 85% 24% at 0% 49%,#9bd4cbb3,transparent 78%),radial-gradient(ellipse 90% 23% at 100% 82%,#8fcacdb3,transparent 80%),linear-gradient(180deg,#fffdf5 0%,#dcefe8 16%,#e8f4ed 36%,#d1eae4 58%,#e4f1eb 80%,#f8fbf3 100%)}
#development:before{border-color:#429c9459;box-shadow:0 0 0 52px #62b9ae14,0 0 0 104px #62b9ae0e}
#development:after{border-color:#429c9452;box-shadow:0 0 0 60px #62b9ae12}
#development .development-orbit{background:radial-gradient(ellipse at center,#fffdf0b3 0%,#b2ded680 40%,transparent 72%)}
#development .development-orbit-lines{stroke:#6ba89d;stroke-width:1.2}
#development .development-core{background:radial-gradient(circle at 30% 20%,#fffdf0,#cae9df);border-color:#76b3a4;box-shadow:0 0 0 12px #fff8,0 0 0 13px #8dbeb0,0 14px 34px #386e6120}
#development .development-story,#development .development-story:nth-child(even){padding:38px 30px;border:1px solid #a6cfc380;border-radius:24px;background:linear-gradient(120deg,#fffef4d9,#ffffff80);box-shadow:0 10px 28px #3b756510}
#development .development-story:nth-child(even){background:linear-gradient(240deg,#fffef4d9,#ffffff80)}
#development .development-stories{display:grid;gap:28px}
#development .development-closing{background:radial-gradient(ellipse at center,#9fd5ca99,transparent 75%)}
@media(max-width:800px){#development .development-story,#development .development-story:nth-child(even){padding:30px 20px}#development .development-stories{gap:22px}#development:before,#development:after{opacity:.7}}

/* White-led ocean palette: distinct aqua edges, clear reading surfaces. */
#development{background:radial-gradient(ellipse 54% 13% at 100% 16%,#b2e4ed99,transparent 78%),radial-gradient(ellipse 50% 15% at 0% 52%,#b9e9e780,transparent 78%),radial-gradient(ellipse 48% 13% at 100% 83%,#b6e2ef80,transparent 80%),#fff}
#development:before{border-color:#79c7d22e;box-shadow:0 0 0 52px #79c7d207,0 0 0 104px #79c7d204}
#development:after{border-color:#79c7d22b;box-shadow:0 0 0 60px #79c7d206}
#development .development-orbit{background:radial-gradient(ellipse at center,#e7f8fb99,transparent 68%)}
#development .development-core{background:radial-gradient(circle at 30% 20%,#fff 20%,#e2f6fa 100%);border-color:#8bc9d1;box-shadow:0 0 0 12px #ffffffcc,0 0 0 13px #c7e8ed,0 12px 30px #3d9aae12}
#development .development-core p{color:#426f7a}
#development .development-orbit-lines{stroke:#8fc7d0}
#development .development-story,#development .development-story:nth-child(even){background:#ffffffed;border-color:#cce8ec;box-shadow:0 8px 28px #428d9d08}
#development .development-photo:before{border-color:#b0d9df}
#development .development-closing{background:radial-gradient(ellipse at center,#d5f1f780,transparent 72%)}

.reader-guidance{margin-top:38px;padding-top:32px;border-top:1px solid #ddcfab}
.reader-guidance header small{font-size:11px;letter-spacing:.16em;font-weight:700;color:#9a8146}
.reader-guidance header h4{margin:10px 0 22px;font:700 26px/1.6 "Noto Serif TC",serif;color:#157a80}
.reader-guidance header h4 span{display:inline-block;margin-left:16px;padding-left:16px;border-left:1px solid #d8c590;font-size:17px;color:#6e7563;font-weight:500}
.reader-guidance-intro{margin:0 0 26px;font-size:16px;line-height:1.95;color:#616c61}.reader-guidance strong{color:#167a82}
.reader-guidance-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0;counter-reset:guidance}
.reader-guidance-steps li{--guide-color:#62816e;position:relative;padding:24px 14px 22px;text-align:center;background:linear-gradient(180deg,#fff7d8,#fffbee);border:1px solid #eadcae;border-bottom:3px solid #c5a348;border-radius:14px}
.reader-guidance-steps li:nth-child(2){--guide-color:#817d9e}.reader-guidance-steps li:nth-child(3){--guide-color:#9c824b}.reader-guidance-steps li:nth-child(4){--guide-color:#5c8588}
.reader-guidance-symbol{position:relative;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border:1px solid #d5bd75;border-radius:50%;background:#fffdf4;color:var(--guide-color)}
.reader-guidance-symbol svg{width:43px;height:43px}.reader-guidance-symbol span{position:absolute;top:-5px;left:-7px;background:#fff8df;padding:3px 5px;color:#9d874b;font-size:10px;letter-spacing:.05em}
.reader-guidance-steps h5{margin:0 0 10px;font:700 21px/1.5 "Noto Serif TC",serif;color:#4c5e53}.reader-guidance-steps p{margin:0;font-size:14px;line-height:1.85;color:#687062}
.reader-guidance-note{display:flex;align-items:flex-start;gap:16px;margin-top:24px;padding:20px 22px;background:#edf3eb;border-left:3px solid #7c9b83;border-radius:0 12px 12px 0}.reader-guidance-note>span{color:#aa9049;font-size:22px}.reader-guidance-note p{margin:0;font-size:15px;line-height:1.9;color:#667062}
@media(max-width:800px){.reader-guidance-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reader-guidance header h4 span{display:block;margin:4px 0 0;padding:0;border:0}.reader-guidance-intro{font-size:15px}.reader-guidance-note{padding:18px 16px;gap:10px}.reader-guidance-steps h5{font-size:19px}}

.edition-section{position:relative;padding:90px 0;background:linear-gradient(145deg,#f5d75d 0%,#f8e796 48%,#fff9e7 100%);color:#44554b}
.edition-intro{max-width:780px;margin:-12px 0 38px;font-size:16px;line-height:1.95}.edition-intro>span{padding:0 12px;color:#b19139}.edition-intro>strong{display:block;color:#167a82;margin:14px 0 6px;font-size:18px}
.edition-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.edition-card{--edition-accent:#947743;background:#fffdf5;border:1px solid #dece9d;border-radius:24px;overflow:hidden;box-shadow:0 12px 30px #7962290a}.edition-text{--edition-accent:#387e8b;border-color:#bcd8d6}
.edition-card>header{padding:28px 30px 24px;background:linear-gradient(120deg,#f8e8af,#fff5d9)}.edition-text>header{background:linear-gradient(120deg,#dcefe9,#eef8f2)}.edition-card header small{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--edition-accent)}.edition-card h3{font:700 29px/1.5 "Noto Serif TC",serif;margin:10px 0 6px;color:#167a82}.edition-card header p{font-size:15px;margin:0;color:#647165}
.edition-card figure{margin:0;padding:32px 20px 22px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at center,#f2e4b766,transparent 70%)}.edition-text figure{background:radial-gradient(ellipse at center,#b8e1e266,transparent 70%)}.edition-card figure img{width:auto;max-width:90%;height:360px;object-fit:contain;border-radius:10px;box-shadow:0 10px 25px #444a3d26}.edition-card figcaption{font-size:11px;color:#7c8275;margin-top:18px}
.edition-description{padding:4px 30px 28px}.edition-description>p{font-size:15px;line-height:1.9;margin:0 0 22px;color:#647064}.edition-description ul{list-style:none;padding:0;margin:0}.edition-description li{padding:14px 0;border-top:1px solid #dedccf}.edition-description li b{display:block;font-size:15px;color:var(--edition-accent);margin-bottom:5px}.edition-description li span{font-size:14px;line-height:1.8;color:#687466}.edition-description .edition-use{font-size:12px;line-height:1.9;margin:18px 0 0;padding:12px 14px;border-radius:10px;background:#f5f0dc;color:#70654c}.edition-text .edition-use{background:#eaf3ed;color:#52746c}
.edition-comparison{margin-top:42px}.edition-comparison>h3{font:700 25px/1.6 "Noto Serif TC",serif;color:#167a82;margin:0 0 18px}.edition-table-wrap{border:1px solid #d9cdab;border-radius:16px;overflow:auto;background:#fffdf7}.edition-comparison table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.8}.edition-comparison th,.edition-comparison td{padding:18px 22px;text-align:left;border-bottom:1px solid #e8e2ce}.edition-comparison thead th{background:#f5e9c4;color:#68562f}.edition-comparison thead th:last-child{background:#e3efdf;color:#426b60}.edition-comparison tbody th{width:20%;color:#64725e;white-space:nowrap}.edition-comparison tbody tr:last-child>*{border-bottom:0}
.edition-together{display:grid;grid-template-columns:.8fr 1.6fr;gap:30px;margin-top:38px;padding:32px;background:#fffdf5;border:1px solid #dccc9f;border-radius:20px}.edition-together small{font-size:10px;letter-spacing:.15em;color:#9b8143;font-weight:700}.edition-together h3{font:700 24px/1.7 "Noto Serif TC",serif;margin:12px 0 0;color:#167a82}.edition-together ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:0;align-items:center}.edition-together li{border-left:1px solid #ded2af;padding-left:18px}.edition-together li b{display:block;font:600 22px "Noto Serif TC",serif;color:#b59b57;margin-bottom:10px}.edition-together li strong{color:#527663;font-size:16px}.edition-together li p{font-size:13px;line-height:1.8;color:#6b7667;margin:8px 0 0}
@media(max-width:800px){.edition-section{padding:64px 0}.edition-intro{margin:0 0 28px}.edition-pair{grid-template-columns:1fr;gap:24px}.edition-card figure img{height:340px}.edition-together{grid-template-columns:1fr;padding:26px 22px}.edition-together ol{gap:12px}.edition-together li{padding-left:12px}.edition-comparison th,.edition-comparison td{padding:14px 12px;font-size:13px}.edition-card header,.edition-description{padding-left:24px;padding-right:24px}}
@media(max-width:430px){.edition-together ol{grid-template-columns:1fr;gap:20px}.edition-together li{display:grid;grid-template-columns:35px 1fr;column-gap:12px}.edition-together li b{grid-row:1/3;margin:0}.edition-together li p{margin:4px 0 0}.edition-card figure img{height:320px}}
#edition-title .edition-title-sub{display:block;margin-top:16px;font:600 clamp(18px,2vw,25px)/1.7 "Noto Serif TC",serif;letter-spacing:0;color:#647565}
#deck-editions .reader-section-heading>div{min-width:0}
#edition-title{font-size:clamp(25px,3.1vw,40px)}
@media(min-width:801px){#edition-title{white-space:nowrap}}
.edition-bundle{display:grid;grid-template-columns:.75fr 1.25fr;gap:36px;margin-top:38px;border:1px solid #b6d1bd;border-radius:24px;overflow:hidden;background:linear-gradient(120deg,#edf5e9,#fffdf2 75%);box-shadow:0 12px 30px #576b3410}
.edition-bundle-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 24px;background:radial-gradient(ellipse at center,#fff6c7,transparent 70%),linear-gradient(150deg,#e1eddb,#f4e8b5)}
.edition-bundle-seal{position:absolute;z-index:2;right:18px;top:20px;display:grid;place-content:center;width:76px;height:76px;border-radius:50%;background:#fff9e6;border:1px solid #b69c54;color:#827039;text-align:center;font-size:11px;line-height:1.7;box-shadow:0 0 0 4px #fff8}.edition-bundle-seal b{font-size:14px}
.edition-bundle-cards{display:flex;justify-content:center;align-items:center;padding:26px 0 18px;width:100%}.edition-bundle-cards img{width:44%;max-width:145px;height:auto;border-radius:8px;box-shadow:0 12px 25px #42554230}.edition-bundle-cards img:first-child{transform:rotate(-9deg);margin-right:-9px}.edition-bundle-cards img:last-child{transform:rotate(8deg);margin-left:-9px}
.edition-bundle-visual>p{position:relative;font-size:12px;color:#61705a;margin:15px 0 0}.edition-bundle-visual>p span{padding:0 8px;color:#a4873c}
.edition-bundle-copy{padding:38px 34px 38px 0}.edition-bundle-copy>small{font-size:10px;font-weight:700;letter-spacing:.13em;color:#8d7841}.edition-bundle-copy h3{font:700 clamp(23px,2.4vw,29px)/1.7 "Noto Serif TC",serif;color:#167a82;margin:14px 0 20px}.edition-bundle-copy p{font-size:15px;line-height:1.95;color:#657060;margin:0}.edition-bundle-copy strong{color:#267c75}.edition-bundle-copy .edition-bundle-highlight{margin-top:20px;padding-top:18px;border-top:1px solid #d6ddc9}
@media(max-width:800px){#edition-title{font-size:clamp(25px,5vw,36px)}.edition-bundle{grid-template-columns:1fr;gap:0}.edition-bundle-copy{padding:28px 24px}.edition-bundle-visual{padding:24px}.edition-bundle-cards img{max-width:125px}.edition-bundle-copy h3{font-size:24px}}
/* Preserve supplied cover typography in a code-rendered packaging mockup. */
.edition-card figure{min-height:420px;box-sizing:border-box;justify-content:center;background:#fff}.edition-text figure{background:#fff}
.edition-card figure img.edition-real-box{height:350px;max-width:100%;border-radius:0;box-shadow:none;object-fit:contain}
.guide-box-mockup{position:relative;width:194px;height:300px;margin:20px 14px 20px 42px;transform:skewY(1.5deg);filter:drop-shadow(0 16px 13px #314b4624);flex-shrink:0}
.guide-box-mockup .guide-box-front{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;border-radius:0 3px 3px 0;box-shadow:inset 0 0 0 1px #3b8a8833;border:1px solid #69a5a7;box-sizing:border-box}
.guide-box-spine{position:absolute;width:38px;height:100%;left:-38px;top:0;transform:skewY(-12deg);transform-origin:right top;background:linear-gradient(90deg,#438e91,#77b9b9);border:1px solid #438689;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:5px;color:#fff8dc}
.guide-box-spine span{writing-mode:vertical-rl;font:600 12px/1.5 "Noto Serif TC",serif;letter-spacing:.1em}.guide-box-spine small{writing-mode:vertical-rl;font-size:7px;letter-spacing:.1em;color:#fff}
.guide-box-top{position:absolute;width:100%;height:9px;top:-9px;left:0;background:linear-gradient(180deg,#99c8c5,#6ca7a7);transform:skewX(-77deg);transform-origin:left bottom;border:1px solid #76acaa;box-sizing:border-box}
.edition-bundle-cards{align-items:center;gap:8px;padding-top:40px}
.edition-bundle-cards img.bundle-real-box{width:56%;max-width:190px;height:auto;transform:none;margin:0;border-radius:0;box-shadow:none;mix-blend-mode:multiply}
.edition-bundle-cards .guide-box-mockup{width:95px;height:147px;margin:0 8px 0 17px;transform:skewY(1.5deg)}
.edition-bundle-cards .guide-box-front{width:100%;max-width:none;transform:none!important;margin:0!important;border-radius:0;box-shadow:none}
.edition-bundle-cards .guide-box-spine{width:18px;left:-18px}.edition-bundle-cards .guide-box-spine span{font-size:7px}.edition-bundle-cards .guide-box-spine small{display:none}.edition-bundle-cards .guide-box-top{height:4px;top:-4px}
@media(max-width:800px){.edition-card figure{min-height:390px}.edition-card figure img.edition-real-box{height:320px}.edition-bundle-cards{max-width:340px}}
/* Restore the two sample cards in the edition comparison panels. */
.edition-pair .edition-art figure{min-height:0;background:radial-gradient(ellipse at center,#f2e4b766,transparent 70%)}
.edition-pair .edition-text figure{min-height:0;background:radial-gradient(ellipse at center,#b8e1e266,transparent 70%)}
/* Full-width packaging gallery above the course-inclusions copy. */
.edition-bundle{grid-template-columns:1fr;gap:0;background:#fffdf5}
.edition-bundle-visual{padding:38px 36px 28px;background:linear-gradient(120deg,#f3f8ef,#fff9df)}
.edition-bundle-seal{position:relative;right:auto;top:auto;width:auto;height:auto;border-radius:30px;padding:9px 22px;display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:26px;box-shadow:none}.edition-bundle-seal br{display:none}.edition-bundle-seal b{font-size:15px}
.edition-bundle-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1000px;width:100%;padding:0}
.edition-bundle-cards figure{margin:0;min-width:0;background:#fff;border:1px solid #e1e6d8;border-radius:18px;overflow:hidden}
.edition-bundle-cards a{display:block;padding:12px;line-height:0}.edition-bundle-cards a:focus-visible{outline:3px solid #167a82;outline-offset:-4px}
.edition-bundle-cards figure img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:1;object-fit:contain;transform:none!important;margin:0!important;border-radius:0;box-shadow:none;mix-blend-mode:normal}
.edition-bundle-cards figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;background:#fafbf5;border-top:1px solid #e5e8db;font:600 17px/1.5 "Noto Serif TC",serif;color:#167a82}.edition-bundle-cards figcaption small{font:400 11px/1.5 sans-serif;color:#748171}
.edition-bundle-copy{padding:32px 42px 38px;border-top:1px solid #dce3cb}.edition-bundle-copy h3{max-width:950px}.edition-bundle-copy p{max-width:1000px}
@media(max-width:800px){.edition-bundle-visual{padding:26px 20px}.edition-bundle-cards{max-width:none;gap:16px}.edition-bundle-copy{padding:28px 24px}.edition-bundle-cards figcaption{padding:12px;display:block;font-size:15px}.edition-bundle-cards figcaption small{display:block;margin-top:5px}}
@media(max-width:540px){.edition-bundle-cards{grid-template-columns:1fr;gap:20px}.edition-bundle-cards figure img{max-width:none}.edition-bundle-cards figcaption{display:flex}.edition-bundle-cards figcaption small{margin:0}}