/* =========================================================
   计算机软件工程师 · 新拟物 Web 演示
   Stage: 1600 x 900 / 16:9
   ========================================================= */

:root {
  /* 基底色：选中性浅灰，新拟物的同色系前提 */
  --neu-bg: #e0e5ec;
  --neu-text: #2d3748;
  --neu-text-muted: #718096;
  --neu-text-secondary: #4d5b6e;
  --neu-accent: #4a6fa5;
  --neu-accent-soft: #a3b8d1;

  /* 深度系统：0 为基底，+1 为凸起面，-1 为凹陷槽，+/-2 为微型件。
     所有可见阴影只使用下列 token，避免同一页面出现多套光影。 */
  --shadow-light: -8px -8px 16px #ffffff;
  --shadow-dark: 8px 8px 16px #a3b1c6;
  --neu-raised: var(--shadow-dark), var(--shadow-light);
  --neu-inset: inset var(--shadow-dark), inset var(--shadow-light);

  --shadow-light-sm: -4px -4px 8px #ffffff;
  --shadow-dark-sm: 4px 4px 8px #a3b1c6;
  --neu-raised-sm: var(--shadow-dark-sm), var(--shadow-light-sm);
  --neu-inset-sm: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;

  --shadow-light-xs: -1px -1px 2px #ffffff;
  --shadow-dark-xs: 1px 1px 2px #a3b1c6;
  --neu-raised-xs: var(--shadow-dark-xs), var(--shadow-light-xs);
  --neu-inset-xs: inset 1px 1px 2px #a3b1c6, inset -1px -1px 2px #ffffff;

  /* 内嵌缝线：用于列表分隔、轨道与结构连接线 */
  --neu-divider: inset 0 -1px 0 rgba(163, 177, 198, 0.36);
  --neu-divider-strong: inset 0 -2px 0 rgba(163, 177, 198, 0.38);
  --neu-groove-h: inset 0 1px 0 #a3b1c6, inset 0 -1px 0 #ffffff;
  --neu-groove-v: inset 1px 0 0 #a3b1c6, inset -1px 0 0 #ffffff;

  /* 压印文字：仅用于超大装饰数字与标记 */
  --neu-emboss: 1px 1px 0 rgba(255, 255, 255, 0.9), -1px -1px 0 rgba(163, 177, 198, 0.35);

  /* 按下态：内凹加深，与凸起面形成明确反馈 */
  --neu-pressed: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  /* 正文字号基准：由 js/main.js 的 BODY_FONT_SIZE 覆盖 */
  --body-font-size: 16px;

  --page-x: 72px;
  --page-top: 86px;
  --page-bottom: 88px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html {
  background: var(--neu-bg);
}

body {
  background: var(--neu-bg);
  color: var(--neu-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  color: inherit;
  font: inherit;
}

h1,
h2,
h3,
p,
dl,
dd,
dt,
blockquote,
figure,
ol,
ul {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 650;
  letter-spacing: 0;
}

strong {
  font-weight: 650;
}

::selection {
  color: var(--neu-text);
  background: var(--neu-accent-soft);
}

:focus-visible {
  outline: 3px solid rgba(74, 111, 165, 0.58);
  outline-offset: 4px;
}

.page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--neu-bg);
}

/* =========================================================
   Stage
   ========================================================= */

#deck {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  background: var(--neu-bg);
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
  transform-origin: center center;
  isolation: isolate;
}

#deck::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border-radius: 30px;
  box-shadow: inset 0 0 50px rgba(163, 177, 198, 0.13);
  pointer-events: none;
}

/* =========================================================
   HUD
   ========================================================= */

.topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-accent);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.brand-copy strong {
  font-size: 15px;
  font-weight: 650;
}

.brand-copy span {
  color: var(--neu-text-muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.keyboard-hint {
  color: var(--neu-text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.deck-rail {
  position: absolute;
  top: 303px;
  left: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  color: rgba(113, 128, 150, 0.62);
  font-size: 10px;
  letter-spacing: 0.22em;
  pointer-events: none;
}

.rail-kicker,
.rail-year {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.rail-kicker {
  font-weight: 600;
}

.rail-line {
  width: 2px;
  height: 74px;
  border-radius: 99px;
  background: var(--neu-bg);
  box-shadow: var(--neu-groove-v);
}

.footer-hud {
  position: absolute;
  right: 60px;
  bottom: 20px;
  left: 60px;
  z-index: 20;
  display: grid;
  align-items: center;
  grid-template-columns: 170px minmax(0, 1fr) 170px;
  gap: 26px;
  height: 54px;
}

.neu-btn {
  border: none;
  border-radius: var(--radius-md);
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
  color: var(--neu-text);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.neu-btn:active {
  box-shadow: var(--neu-pressed);
}

.neu-btn:disabled {
  color: rgba(113, 128, 150, 0.52);
  cursor: not-allowed;
  box-shadow: var(--neu-inset-sm);
}

.neu-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.fullscreen-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.fullscreen-icon::before {
  content: "F";
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 150px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
}

#prevBtn {
  justify-self: start;
}

#nextBtn {
  justify-self: end;
}

.nav-arrow {
  color: var(--neu-accent);
  font-size: 16px;
  line-height: 1;
}

.progress-cluster {
  justify-self: center;
  width: min(100%, 520px);
}

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--neu-text-muted);
  font-size: 11px;
  letter-spacing: 0.13em;
}

#pageReadout {
  color: var(--neu-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.neu-inset-track {
  width: 100%;
  height: 11px;
  padding: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inset-sm);
}

.neu-progress-fill {
  width: 7.6923%;
  height: 100%;
  border-radius: 999px;
  background: var(--neu-accent);
}

/* =========================================================
   Slide shell
   ========================================================= */

.slide {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  padding: var(--page-top) var(--page-x) var(--page-bottom);
  font-size: var(--body-font-size);
}

.slide.is-active {
  display: flex;
  animation: slide-enter 0.3s ease both;
}

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

.slide-head {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 28px;
  margin-bottom: 22px;
}

.slide-heading {
  min-width: 0;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 13px;
  color: var(--neu-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
}

.kicker-num {
  color: var(--neu-accent);
  font-size: 13px;
  font-weight: 750;
}

.kicker-rule {
  display: block;
  width: 48px;
  height: 2px;
  border-radius: 99px;
  background: var(--neu-accent-soft);
}

.slide h1 {
  font-size: 48px;
  font-weight: 680;
  line-height: 1.08;
  text-wrap: balance;
}

.slide-sub {
  max-width: 820px;
  margin-top: 12px;
  color: var(--neu-text-muted);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.slide-stamp {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 1px;
  padding-top: 5px;
  color: var(--neu-text-muted);
  text-align: right;
}

.slide-stamp span {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.18em;
}

.slide-stamp strong {
  color: rgba(74, 111, 165, 0.22);
  font-size: 48px;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: var(--neu-emboss);
}

.slide-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* =========================================================
   Cover
   ========================================================= */

.cover-field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 0;
}

.cover-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 1120px;
  min-height: 520px;
  padding: 54px 80px 48px;
  border-radius: 40px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
  text-align: center;
}

.cover-plate::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  width: 54px;
  height: 4px;
  border-radius: 99px;
  background: var(--neu-accent);
  transform: translateX(-50%);
}

.cover-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--neu-text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
}

.cover-kicker span {
  display: block;
  width: 36px;
  height: 2px;
  border-radius: 99px;
  background: var(--neu-accent-soft);
}

.cover-plate h1 {
  margin-top: 34px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.12;
}

.cover-plate h1 span,
.cover-plate h1 strong {
  display: block;
  font-weight: inherit;
}

.cover-plate h1 strong {
  color: var(--neu-accent);
  font-weight: 720;
}

.cover-sub {
  margin-top: 22px;
  color: var(--neu-text-secondary);
  font-size: 19px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.cover-rule {
  width: 74px;
  height: 3px;
  margin: 30px auto 24px;
  border-radius: 99px;
  background: var(--neu-accent-soft);
}

.cover-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.cover-meta span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cover-meta span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neu-accent-soft);
}

.cover-foot {
  margin-top: 22px;
  color: var(--neu-text-muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.5;
}

.source-note {
  margin-top: 12px;
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.035em;
}

.source-note::before {
  content: "DATA";
  display: inline-block;
  margin-right: 8px;
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.micro-label {
  color: var(--neu-text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  line-height: 1.4;
}

.card-copy {
  color: var(--neu-text);
  font-size: 15.5px;
  line-height: 1.75;
}

.card-copy.compact {
  color: var(--neu-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.en-label {
  margin-top: 3px;
  color: var(--neu-text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.18em;
}

/* =========================================================
   Slide 01
   ========================================================= */

.background-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 1.12fr 0.94fr 0.94fr;
  gap: 22px;
  min-height: 0;
}

.info-card {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding: 28px 28px 24px;
  border-radius: 28px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.info-card-target::after {
  content: "";
  position: absolute;
  top: 0;
  left: 34px;
  width: 52px;
  height: 4px;
  border-radius: 0 0 99px 99px;
  background: var(--neu-accent);
}

.card-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
}

.card-index {
  color: rgba(74, 111, 165, 0.34);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.info-card h2 {
  max-width: 420px;
  font-size: 29px;
  line-height: 1.22;
}

.info-card-target h2 {
  font-size: 39px;
  line-height: 1.14;
}

.info-card-target .card-copy {
  max-width: 400px;
  margin-top: 19px;
}

.research-question {
  margin-top: auto;
  padding: 15px 16px 16px;
  border-radius: 14px;
  box-shadow: var(--neu-inset-sm);
}

.research-question > span {
  color: var(--neu-accent);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.11em;
}

.research-question p {
  max-width: 390px;
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.7;
}

.research-question strong {
  color: var(--neu-accent);
  font-size: 17px;
  font-weight: 700;
}

.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 15px;
}

.meta-pills span {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 12px;
}

.method-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
}

.method-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.method-row > span {
  display: grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 12px;
  font-weight: 700;
}

.method-row p {
  color: var(--neu-text);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.55;
}

.method-note {
  margin-top: auto;
  padding: 11px 13px;
  border-radius: 11px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.source-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  margin-top: 2px;
}

.source-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--neu-text);
  font-size: 14.5px;
}

.source-list span::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--neu-accent-soft);
  box-shadow: var(--neu-raised-xs);
}

.card-rule {
  height: 2px;
  margin: 19px 0 15px;
  border-radius: 99px;
  background: var(--neu-bg);
  box-shadow: var(--neu-groove-h);
}

/* =========================================================
   Slide 02
   ========================================================= */

.profile-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 28px;
}

.role-card {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 26px;
  border-radius: 28px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 23px;
}

.role-badge {
  padding: 5px 11px;
  border-radius: 99px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
}

.role-card h2 {
  font-size: 42px;
  line-height: 1.15;
}

.role-en {
  margin-top: 3px;
  color: var(--neu-text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.19em;
}

.role-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 20px;
  margin-top: 27px;
}

.role-facts div {
  min-width: 0;
}

.role-facts dt {
  margin-bottom: 5px;
  color: var(--neu-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.role-facts dd {
  color: var(--neu-text);
  font-size: 14.5px;
  line-height: 1.5;
}

.role-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.role-mode {
  padding: 10px 11px;
  border-radius: 11px;
  box-shadow: var(--neu-inset-sm);
}

.role-mode span {
  color: var(--neu-text);
  font-size: 12.5px;
  font-weight: 650;
}

.role-mode p {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.role-boundary {
  margin-top: 16px;
  padding: 11px 0 0;
  box-shadow: var(--neu-divider);
}

.role-boundary > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin-top: 6px;
}

.role-boundary > div span {
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.role-boundary > div span::before {
  content: "×";
  margin-right: 4px;
  color: var(--neu-accent-soft);
}

.role-quote {
  margin-top: auto;
  padding: 15px 17px;
  border-radius: 16px;
  box-shadow: var(--neu-inset);
  color: var(--neu-text);
  font-size: 15px;
  line-height: 1.65;
}

.role-quote strong {
  color: var(--neu-accent);
}

.org-panel {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 22px;
  border-radius: 28px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.panel-head h2 {
  margin-top: 5px;
  font-size: 25px;
  line-height: 1.3;
}

.panel-note {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 99px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.org-groove {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  margin-top: 17px;
  padding: 18px 20px;
  border-radius: 22px;
  box-shadow: var(--neu-inset);
}

.org-node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 150px;
  padding: 10px 16px;
  border-radius: 15px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  text-align: center;
}

.org-node span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.org-node small {
  margin-top: 1px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.org-company {
  min-width: 240px;
  padding: 9px 18px;
}

.org-center {
  min-width: 320px;
  padding: 10px 18px;
}

.org-role {
  box-shadow: var(--neu-raised-sm);
}

.org-role span {
  color: var(--neu-accent);
}

.org-stem {
  width: 2px;
  height: 17px;
  background: var(--neu-bg);
  box-shadow: var(--neu-groove-v);
}

.org-row {
  display: grid;
  width: 100%;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 12px;
}

.org-footnote {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 0 2px;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--neu-accent);
  box-shadow: var(--neu-raised-xs);
}

.org-footnote p {
  color: var(--neu-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* =========================================================
   Slide 03
   ========================================================= */

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.process-step {
  position: relative;
  display: flex;
  min-height: 232px;
  flex-direction: column;
  padding: 20px 17px 16px;
  border-radius: 22px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.process-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: -14px;
  z-index: 4;
  color: var(--neu-accent-soft);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
}

.step-num {
  color: rgba(74, 111, 165, 0.34);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.process-step h2 {
  margin-top: 28px;
  font-size: 20px;
  line-height: 1.3;
}

.process-step p {
  margin-top: 10px;
  color: var(--neu-text-muted);
  font-size: 13.5px;
  line-height: 1.7;
}

.step-tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 9px;
  border-radius: 99px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.case-groove {
  display: grid;
  flex: 1;
  grid-template-columns: 1.42fr 1fr;
  gap: 34px;
  min-height: 0;
  margin-top: 18px;
  padding: 23px 28px;
  border-radius: 24px;
  box-shadow: var(--neu-inset);
}

.case-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-copy h2 {
  margin-top: 7px;
  font-size: 26px;
  line-height: 1.3;
}

.case-copy > p:last-child {
  max-width: 650px;
  margin-top: 10px;
  color: var(--neu-text);
  font-size: 15px;
  line-height: 1.7;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.case-tags span {
  padding: 4px 9px;
  border-radius: 6px;
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.case-meta {
  display: grid;
  align-content: center;
  gap: 11px;
  padding-left: 28px;
  box-shadow: var(--neu-groove-v);
}

.case-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.case-meta span {
  color: var(--neu-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.case-meta strong {
  color: var(--neu-text);
  font-size: 13px;
  font-weight: 550;
  text-align: right;
}

/* =========================================================
   Charts
   ========================================================= */

.chart-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 22px 24px 16px;
  border-radius: 26px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 4px;
}

.chart-head h2 {
  margin-top: 3px;
  font-size: 20px;
  line-height: 1.3;
}

.chart-unit {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.07em;
}

.chart-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chart {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.chart-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--neu-text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.chart-wrap.is-ready .chart-loading {
  opacity: 0;
  pointer-events: none;
}

.chart-caption {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   Slide 04
   ========================================================= */

.qualification-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 0.84fr);
  gap: 24px;
  min-height: 0;
}

.jd-chart-card {
  min-height: 0;
}

.qualification-side {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
}

.tag-panel {
  padding: 17px 19px 16px;
  border-radius: 22px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.neu-tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text);
  font-size: 12.5px;
  line-height: 1.3;
}

.neu-tag.is-accent {
  color: var(--neu-accent);
  font-weight: 600;
}

.jd-actions {
  padding: 15px 18px 13px;
  border-radius: 20px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.jd-action-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  box-shadow: var(--neu-divider);
}

.jd-action-row:last-child {
  padding-bottom: 1px;
  box-shadow: none;
}

.jd-action-row span {
  flex: 0 0 auto;
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.75;
}

.jd-action-row p {
  color: var(--neu-text);
  font-size: 11.5px;
  line-height: 1.5;
}

.jd-quote {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 126px;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px 15px 23px;
  border-radius: 22px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.quote-mark {
  position: absolute;
  top: 8px;
  left: 14px;
  color: rgba(74, 111, 165, 0.21);
  font-family: Georgia, serif;
  font-size: 45px;
  line-height: 1;
}

.jd-quote p {
  position: relative;
  z-index: 1;
  padding-left: 15px;
  color: var(--neu-text);
  font-size: 14.5px;
  line-height: 1.75;
}

.jd-quote footer {
  margin-top: 9px;
  padding-left: 15px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* =========================================================
   Slide 05
   ========================================================= */

.competency-top {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: 22px;
  min-height: 0;
}

.radar-card {
  min-height: 0;
}

.competency-insight {
  display: flex;
  flex-direction: column;
  padding: 22px 24px 18px;
  border-radius: 26px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.competency-insight h2 {
  margin-top: 7px;
  font-size: 25px;
  line-height: 1.32;
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.insight-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.insight-list li > span {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 700;
}

.insight-list p {
  color: var(--neu-text);
  font-size: 13.5px;
  line-height: 1.55;
}

.insight-note {
  margin-top: auto;
  padding-top: 14px;
  color: var(--neu-text-muted);
  font-size: 11px;
  line-height: 1.55;
}

.ability-bands {
  display: grid;
  height: 124px;
  flex: 0 0 124px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 15px;
}

.ability-band {
  display: flex;
  flex-direction: column;
  padding: 15px 18px 14px;
  border-radius: 20px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.band-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.band-title h2 {
  font-size: 16px;
}

.band-title small {
  margin-left: auto;
  color: var(--neu-text-muted);
  font-size: 10.5px;
}

.band-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neu-accent);
  box-shadow: var(--neu-raised-xs);
}

.is-growable .band-dot {
  background: var(--neu-accent-soft);
}

.band-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.band-tags span {
  padding: 4px 8px;
  border-radius: 7px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text);
  font-size: 11px;
  line-height: 1.4;
}

/* =========================================================
   Slide 06
   ========================================================= */

.environment-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.33fr) minmax(0, 0.87fr);
  gap: 24px;
  min-height: 0;
}

.environment-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 24px 26px 20px;
  border-radius: 28px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.desk-scene {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 15px 0 13px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inset);
}

.desk-glow {
  position: absolute;
  top: 15%;
  left: 12%;
  width: 70%;
  height: 60%;
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(255, 255, 255, 0.56);
  opacity: 0.5;
  pointer-events: none;
}

.monitor {
  position: absolute;
  padding: 8px 10px 12px;
  border-radius: 13px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.monitor::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #b7c1cd;
  transform: translateX(-50%);
}

.monitor::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 52px;
  height: 8px;
  border-radius: 0 0 5px 5px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  transform: translateX(-50%);
}

.monitor-main {
  top: 15%;
  left: 8%;
  width: 42%;
  height: 57%;
  transform: rotate(-1.8deg);
}

.monitor-side {
  top: 24%;
  right: 10%;
  width: 27%;
  height: 43%;
  transform: rotate(2deg);
}

.monitor-cam {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8d9aac;
  transform: translateX(-50%);
}

.screen-brand {
  display: block;
  margin-bottom: 9px;
  color: var(--neu-text-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.code-line {
  display: block;
  height: 4px;
  margin: 7px 0;
  border-radius: 99px;
  background: #b5bfcc;
}

.code-line.accent {
  background: var(--neu-accent-soft);
}

.w-36 { width: 36%; }
.w-40 { width: 40%; }
.w-48 { width: 48%; }
.w-52 { width: 52%; }
.w-60 { width: 60%; }
.w-64 { width: 64%; }
.w-70 { width: 70%; }
.w-76 { width: 76%; }
.w-84 { width: 84%; }

.desk-board {
  position: absolute;
  right: 8%;
  bottom: 22px;
  left: 8%;
  height: 11px;
  border-radius: 99px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
}

.keyboard {
  position: absolute;
  bottom: 48px;
  left: 35%;
  display: grid;
  width: 27%;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  padding: 6px;
  border-radius: 9px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
}

.keyboard span {
  height: 10px;
  border-radius: 3px;
  box-shadow: var(--neu-inset-xs);
}

.mouse {
  position: absolute;
  right: 27%;
  bottom: 49px;
  width: 22px;
  height: 36px;
  border-radius: 11px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
}

.mouse::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 1.5px;
  height: 8px;
  background: var(--neu-accent-soft);
  transform: translateX(-50%);
}

.mug {
  position: absolute;
  right: 9%;
  bottom: 48px;
  width: 31px;
  height: 38px;
  border-radius: 5px 5px 9px 9px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
}

.mug::after {
  content: "";
  position: absolute;
  top: 9px;
  right: -8px;
  width: 10px;
  height: 15px;
  border-radius: 0 8px 8px 0;
  box-shadow: var(--neu-inset-xs);
}

.mug span {
  position: absolute;
  top: -7px;
  left: 8px;
  width: 12px;
  height: 10px;
  border-radius: 50%;
  box-shadow: var(--neu-inset-xs);
}

.workspace-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.workspace-facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 11px;
  box-shadow: var(--neu-groove-v);
}

.workspace-facts span {
  color: var(--neu-text-muted);
  font-size: 10px;
  letter-spacing: 0.09em;
}

.workspace-facts strong {
  font-size: 12.5px;
  line-height: 1.4;
}

.risk-groove {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border-radius: 28px;
  box-shadow: var(--neu-inset);
}

.risk-head h2 {
  margin-top: 5px;
  font-size: 25px;
  line-height: 1.3;
}

.risk-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 0;
  box-shadow: var(--neu-divider);
}

.risk-item:last-of-type {
  box-shadow: none;
}

.risk-index {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 700;
}

.risk-item h3 {
  font-size: 16px;
  line-height: 1.4;
}

.risk-item p {
  margin-top: 4px;
  color: var(--neu-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.risk-guard {
  margin-top: auto;
  padding: 13px 14px;
  border-radius: 15px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
}

.risk-guard span {
  color: var(--neu-accent);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.risk-guard ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 7px;
}

.risk-guard li {
  position: relative;
  padding-left: 11px;
  color: var(--neu-text);
  font-size: 11.5px;
  line-height: 1.5;
}

.risk-guard li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neu-accent-soft);
}

/* =========================================================
   Slide 07
   ========================================================= */

.salary-layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
}

.salary-chart-card {
  flex: 1;
  min-height: 0;
}

.chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 3px;
  color: var(--neu-text-muted);
  font-size: 11px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.legend-dot.is-ai {
  background: var(--neu-accent);
}

.legend-dot.is-trad {
  background: rgba(74, 111, 165, 0.32);
}

.salary-facts {
  display: grid;
  height: 132px;
  flex: 0 0 132px;
  grid-template-columns: 1.03fr 1.22fr 0.9fr;
  gap: 14px;
}

.salary-fact {
  display: flex;
  flex-direction: column;
  padding: 14px 18px 13px;
  border-radius: 20px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.fact-number {
  margin-top: 2px;
  color: var(--neu-accent);
  font-size: 31px;
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.fact-number small {
  margin-left: 3px;
  color: var(--neu-text-muted);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
}

.salary-fact > p:last-child {
  margin-top: auto;
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.benefit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.benefit-tags span {
  padding: 3px 7px;
  border-radius: 5px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text);
  font-size: 10.5px;
  line-height: 1.4;
}

/* =========================================================
   Slide 08
   ========================================================= */

.career-timeline {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.timeline-rail {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 155px;
  width: 2px;
  background: var(--neu-bg);
  box-shadow: var(--neu-groove-v);
}

.career-stage {
  position: relative;
  display: grid;
  flex: 1;
  align-items: stretch;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 40px;
  min-height: 0;
}

.career-node {
  position: absolute;
  top: 50%;
  left: 132px;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  transform: translateY(-50%);
}

.career-node span {
  color: var(--neu-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.career-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  padding-right: 58px;
  text-align: right;
}

.career-meta span {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

.career-meta small {
  color: var(--neu-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.career-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 20px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.career-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.career-title h2 {
  font-size: 20px;
  line-height: 1.3;
}

.career-title > span {
  color: var(--neu-accent);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.career-card > p {
  margin-top: 3px;
  color: var(--neu-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.career-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.career-conditions span {
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text);
  font-size: 10.5px;
  line-height: 1.4;
}

.career-evidence {
  margin-top: 7px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.career-evidence::before {
  content: "◇";
  margin-right: 6px;
  color: var(--neu-accent-soft);
}

.career-card-branch {
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  gap: 12px 18px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.branch-evidence {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 7px;
  box-shadow: var(--neu-divider);
}

.branch {
  min-width: 0;
}

.branch-label {
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.branch h2 {
  margin-top: 1px;
  font-size: 17px;
  line-height: 1.35;
}

.branch p {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.branch-divider {
  width: 2px;
  border-radius: 99px;
  background: var(--neu-bg);
  box-shadow: var(--neu-groove-v);
}

.timeline-note {
  margin-top: 11px;
  color: var(--neu-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.timeline-note::before {
  content: "→";
  margin-right: 8px;
  color: var(--neu-accent);
}

/* =========================================================
   Slide 09
   ========================================================= */

.trend-layout {
  display: grid;
  flex: 1;
  grid-template-columns: 0.92fr 1.3fr 0.92fr;
  grid-template-rows: minmax(0, 1fr) 176px auto;
  gap: 12px;
  min-height: 0;
}

.trend-card {
  display: flex;
  flex-direction: column;
  padding: 20px 21px 18px;
  border-radius: 24px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.trend-card h2 {
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.35;
}

.trend-card > p:not(.micro-label) {
  margin-top: 6px;
  color: var(--neu-text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.trend-layout > .source-note {
  grid-column: 1 / -1;
}

.trend-big {
  margin-top: 4px;
  color: var(--neu-accent);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.trend-big small {
  margin-left: 2px;
  font-size: 22px;
  letter-spacing: 0;
}

.trend-card-stat h2 {
  margin-top: 4px;
}

.trend-service {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 13px;
}

.trend-service span {
  padding: 4px 8px;
  border-radius: 5px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.trend-bar {
  width: 100%;
  height: 9px;
  margin-top: auto;
  padding: 2px;
  border-radius: 99px;
  box-shadow: var(--neu-inset-sm);
}

.trend-bar span {
  display: block;
  width: 69%;
  height: 100%;
  border-radius: 99px;
  background: var(--neu-accent);
}

.trend-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: var(--neu-text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.shift-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.shift-stats > div:not(.shift-arrow) {
  display: flex;
  flex-direction: column;
}

.shift-stats strong {
  color: var(--neu-accent);
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.shift-stats strong small {
  font-size: 15px;
}

.shift-stats span {
  margin-top: 3px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.shift-arrow {
  color: var(--neu-accent-soft);
  font-size: 20px;
}

.trend-card-shift h2 {
  margin-top: 10px;
}

.trend-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.trend-split > div {
  padding: 8px 10px;
  border-radius: 9px;
  box-shadow: var(--neu-inset-sm);
}

.trend-split span {
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.trend-split p {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.trend-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 13px;
}

.trend-keywords span {
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.policy-mark {
  margin-top: 7px;
  color: rgba(74, 111, 165, 0.24);
  font-size: 43px;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: var(--neu-emboss);
}

.risk-strip {
  display: grid;
  align-content: center;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 2px 26px;
  padding: 18px 24px 17px;
  border-radius: 22px;
  box-shadow: var(--neu-inset);
}

.risk-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  grid-column: 1 / -1;
  gap: 20px;
  margin-bottom: 10px;
}

.risk-strip-head p {
  color: var(--neu-text-muted);
  font-size: 11.5px;
}

.risk-half {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.risk-half + .risk-half {
  padding-left: 26px;
  box-shadow: var(--neu-groove-v);
}

.risk-verdict {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-accent);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.risk-half p {
  color: var(--neu-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.risk-half strong {
  color: var(--neu-text);
  font-weight: 600;
}

/* =========================================================
   Slide 10
   ========================================================= */

.table-groove {
  padding: 15px 18px 12px;
  border-radius: 26px;
  box-shadow: var(--neu-inset);
}

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 7px;
  table-layout: fixed;
}

.compare-table caption {
  caption-side: top;
}

.compare-table th,
.compare-table td {
  border: 0;
  text-align: left;
  vertical-align: middle;
}

.compare-table thead th {
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.compare-table thead th:first-child {
  width: 25%;
}

.compare-table thead th:nth-child(2) {
  width: 23%;
}

.compare-table thead th:nth-child(3) {
  width: 16%;
}

.compare-table tbody th,
.compare-table tbody td {
  padding: 17px 16px;
  background: transparent;
  box-shadow: var(--neu-divider);
  color: var(--neu-text);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  box-shadow: none;
}

.compare-table tbody th {
  font-weight: 400;
}

.company-type {
  display: block;
  color: var(--neu-text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}

.compare-table tbody th small {
  display: block;
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.compare-table tbody td strong {
  display: block;
  color: var(--neu-accent);
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.compare-table tbody td span {
  display: block;
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.employer-takeaway {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 13px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.takeaway-title {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.takeaway-title span {
  color: var(--neu-accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
}

.takeaway-title strong {
  font-size: 15px;
  line-height: 1.35;
}

.takeaway-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.takeaway-items span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--neu-text-muted);
  font-size: 11.5px;
}

.takeaway-items span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--neu-accent-soft);
}

.employer-questions {
  display: grid;
  align-items: center;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding: 13px 18px;
  border-radius: 17px;
  box-shadow: var(--neu-inset);
}

.questions-head p {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.question {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-text);
  font-size: 10.5px;
  line-height: 1.45;
}

.question::before {
  content: "?";
  margin-right: 6px;
  color: var(--neu-accent);
  font-size: 11px;
  font-weight: 700;
}

/* =========================================================
   Slide 11
   ========================================================= */

.gap-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1.14fr);
  min-height: 0;
}

.gap-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: 21px 21px 17px;
  border-radius: 24px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.gap-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 13px;
  box-shadow: var(--neu-divider-strong);
}

.gap-num {
  color: rgba(74, 111, 165, 0.3);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.gap-head h2 {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.3;
}

.gap-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 12px 0;
}

.gap-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  box-shadow: var(--neu-divider);
}

.gap-list li:last-child {
  box-shadow: none;
}

.gap-list li > span {
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.45;
}

.gap-list small {
  color: var(--neu-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.gap-foot {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.action-foot {
  color: var(--neu-accent);
}

.gap-arrow {
  display: grid;
  place-items: center;
  color: var(--neu-accent-soft);
  font-size: 20px;
}

.action-timeline {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 4px;
  padding: 12px 0;
}

.action-timeline li {
  position: relative;
  padding: 9px 0 9px 18px;
  box-shadow: var(--neu-divider);
}

.action-timeline li:last-child {
  box-shadow: none;
}

.action-timeline li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neu-accent);
  box-shadow: var(--neu-raised-xs);
}

.action-timeline .week {
  display: block;
  color: var(--neu-accent);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
}

.action-timeline p {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.55;
}

/* =========================================================
   Slide 12
   ========================================================= */

.verdict-layout {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 388px;
  gap: 22px;
  min-height: 0;
}

.conclusion-list {
  display: flex;
  flex-direction: column;
  padding: 10px 18px;
  border-radius: 24px;
  box-shadow: var(--neu-inset);
}

.conclusion {
  display: grid;
  flex: 1;
  align-items: center;
  grid-template-columns: 13px minmax(0, 1fr) 34px;
  gap: 13px;
  padding: 12px 0;
  box-shadow: var(--neu-divider);
}

.conclusion:last-child {
  box-shadow: none;
}

.conclusion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neu-accent);
  box-shadow: var(--neu-raised-xs);
}

.conclusion h2 {
  color: var(--neu-text);
  font-size: 16px;
  line-height: 1.35;
}

.conclusion p {
  margin-top: 2px;
  color: var(--neu-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.conclusion-num {
  color: rgba(74, 111, 165, 0.2);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: right;
}

.verdict-card {
  display: flex;
  flex-direction: column;
  padding: 25px 27px 21px;
  border-radius: 27px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised);
}

.verdict-word {
  margin-top: 15px;
  color: var(--neu-accent);
  font-size: 54px;
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1;
}

.verdict-card h2 {
  margin-top: 10px;
  font-size: 25px;
  line-height: 1.3;
}

.verdict-copy {
  margin-top: 12px;
  color: var(--neu-text-muted);
  font-size: 12.5px;
  line-height: 1.7;
}

.verdict-checks {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  margin-top: 15px;
  padding-top: 15px;
  box-shadow: var(--neu-divider-strong);
}

.verdict-checks .micro-label {
  margin-bottom: 1px;
}

.verdict-checks span {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.45;
}

.verdict-checks i {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.verdict-foot {
  margin-top: auto;
  padding: 9px 11px;
  border-radius: 9px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

/* =========================================================
   Closing
   ========================================================= */

.thank-plate {
  width: 1000px;
  min-height: 470px;
  padding: 52px 72px 44px;
}

.thank-plate h1 {
  font-size: 68px;
}

.thank-sub {
  font-size: 20px;
  letter-spacing: 0.08em;
}

.thank-note {
  margin-top: 24px;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: var(--neu-inset-sm);
  color: var(--neu-text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

/* =========================================================
   Legibility: secondary prose stays darker than metadata.
   ========================================================= */

.slide-sub,
.source-note,
.chart-caption,
.card-copy.compact,
.process-step p,
.risk-item p,
.salary-fact > p:last-child,
.career-card > p,
.career-evidence,
.timeline-note,
.trend-card > p:not(.micro-label),
.trend-split p,
.risk-half p,
.takeaway-items span,
.gap-list small,
.gap-foot,
.conclusion p,
.verdict-copy,
.verdict-foot,
.role-mode p,
.role-boundary > div span {
  color: var(--neu-text-secondary);
}

/* =========================================================
   Body copy scale
   --body-font-size 由 js/main.js 的 BODY_FONT_SIZE 控制。
   仅正文段落、列表与表格正文继承该基准；标题、标签、
   导航与图表字号保持固定，避免整体排版随正文缩放而失衡。
   ========================================================= */

.slide-sub { font-size: 1.125em; }
.card-copy { font-size: 1.0625em; }
.card-copy.compact { font-size: 0.875em; }
.research-question p { font-size: 0.9375em; }
.research-question strong { font-size: 1.2667em; }
.method-row p { font-size: 1.0313em; }
.method-note { font-size: 0.8125em; }
.source-list span { font-size: 1em; }
.role-facts dd { font-size: 0.9688em; }
.role-mode span { font-size: 12.5px; }
.role-mode p { font-size: 10.5px; }
.role-boundary > div span { font-size: 11.5px; }
.role-quote { font-size: 1em; }
.org-node span { font-size: 14px; }
.org-node small { font-size: 10.5px; }
.org-footnote p { font-size: 0.75em; }
.process-step h2 { font-size: 21px; }
.process-step p { font-size: 0.9375em; }
.case-copy > p:last-child { font-size: 1em; }
.case-meta span { font-size: 11px; }
.case-meta strong { font-size: 13px; }
.case-tags span { font-size: 10px; }
.neu-tag { font-size: 12.5px; }
.jd-quote p { font-size: 0.9688em; }
.jd-action-row p { font-size: 0.75em; }
.jd-action-row span { font-size: 9.5px; }
.insight-list p { font-size: 0.875em; }
.insight-note { font-size: 0.7188em; }
.band-tags span { font-size: 11px; }
.risk-item p { font-size: 0.8438em; }
.risk-guard li { font-size: 0.75em; }
.salary-fact > p:last-child { font-size: 0.7188em; }
.benefit-tags span { font-size: 10.5px; }
.career-card > p { font-size: 0.8438em; }
.career-conditions span { font-size: 11px; }
.career-evidence { font-size: 0.6875em; }
.trend-card > p:not(.micro-label) { font-size: 0.8438em; }
.trend-split p { font-size: 0.6875em; }
.trend-service span { font-size: 11px; }
.risk-half p { font-size: 0.8125em; }
.compare-table tbody th,
.compare-table tbody td { font-size: 0.8125em; }
.company-type { font-size: 14.5px; }
.compare-table tbody th small { font-size: 10.5px; }
.takeaway-items span { font-size: 0.75em; }
.question { font-size: 10.5px; }
.questions-head p { font-size: 9.5px; }
.gap-list li > span { font-size: 0.9063em; }
.gap-list small { font-size: 0.7188em; }
.gap-foot { font-size: 0.75em; }
.action-timeline p { font-size: 0.8125em; }
.action-timeline .week { font-size: 10.5px; }
.conclusion h2 { font-size: 16.5px; }
.conclusion p { font-size: 0.7813em; }
.verdict-copy { font-size: 0.8438em; }
.verdict-checks span { font-size: 0.75em; }
.verdict-foot { font-size: 0.6563em; }
.source-note { font-size: 12px; }
.chart-caption { font-size: 11.5px; }

/* Accommodate larger prose without changing the visual rhythm. */
.qualification-side { gap: 10px; }
.tag-panel { padding: 14px 17px 13px; }
.jd-actions { padding: 12px 16px 10px; }
.jd-quote { min-height: 118px; padding: 15px 18px 13px 21px; }
.risk-item { padding: 12px 0; }
.risk-guard { padding: 11px 13px; }
.salary-facts { height: 140px; flex-basis: 140px; }
.employer-takeaway { padding: 11px 18px; }
.employer-questions { padding: 11px 16px; }
.role-card { padding: 24px 28px 20px; }
.role-card-head { margin-bottom: 18px; }
.role-facts { margin-top: 22px; }
.role-modes { margin-top: 16px; }
.role-boundary { margin-top: 12px; }

/* =========================================================
   Helpers
   ========================================================= */

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

.toast {
  position: absolute;
  bottom: 92px;
  left: 50%;
  z-index: 50;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  color: var(--neu-text);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.toast.is-visible {
  opacity: 1;
}

/* =========================================================
   Responsive fit is handled by JS scale; the slide surface
   never reflows so projection, laptop and phone stay identical.
   ========================================================= */

@media (max-width: 900px), (max-height: 560px) {
  .keyboard-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .slide.is-active {
    animation: none;
  }
}

/* =========================================================
   Print / PDF export
   ========================================================= */

@media print {
  @page {
    size: 1600px 900px;
    margin: 0;
  }

  html,
  body {
    width: 1600px;
    height: auto;
    overflow: visible;
    background: var(--neu-bg);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  #deck {
    position: static;
    width: 1600px;
    height: auto;
    overflow: visible;
    transform: none;
    background: var(--neu-bg);
  }

  #deck::after,
  .topbar,
  .deck-rail,
  .footer-hud,
  .toast,
  #liveStatus,
  .chart-loading {
    display: none !important;
  }

  .slide {
    position: relative;
    display: flex !important;
    width: 1600px;
    height: 900px;
    break-after: page;
    page-break-after: always;
    animation: none !important;
  }

  .slide:last-of-type {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}