.strategy-view {
  --strategy-marker: #a6aaa6;
  --strategy-marker-size: 7px;
  --strategy-nav-text: #6b6b6b;
  --strategy-nav-bg: #efefef;
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: min(760px, calc(100dvh - 100px));
  min-height: 0;
}

[data-theme=dark] .strategy-view {
  --strategy-nav-text: #b7b7b7;
  --strategy-nav-bg: #303030;
}

.strategy-view-nav {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 148px;
  display: grid;
  align-content: safe center;
  justify-items: start;
  gap: 3px;
  min-height: 0;
  overflow: auto;
  padding: 3px;
  scrollbar-width: thin;
  pointer-events: none;
}

.strategy-view-nav button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 42px;
  padding: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
  pointer-events: auto;
}

.strategy-view-nav button:not(:last-of-type)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: 1px;
  height: calc(100% + 3px);
  translate: -50% 0;
  background: var(--line);
  pointer-events: none;
}

.strategy-view-nav small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.strategy-current-label { display: none; }

.strategy-nav-dot {
  position: relative;
  z-index: 1;
  width: var(--strategy-marker-size);
  height: var(--strategy-marker-size);
  border-radius: 50%;
  background: var(--strategy-marker);
  transition: background-color 180ms ease;
}

.strategy-view-nav button[aria-pressed=true] .strategy-nav-dot {
  background: var(--ink);
}

.strategy-nav-label {
  --label-rest: -4px -50%;
  --label-shown: 0 -50%;
  position: absolute;
  z-index: 2;
  inset: 50% auto auto calc(100% + 2px);
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--strategy-nav-bg);
  color: var(--strategy-nav-text);
  font-weight: 600;
  opacity: 0;
  translate: var(--label-rest);
  pointer-events: none;
  transition: opacity 180ms ease, translate 220ms ease;
}

.strategy-view-nav [data-label-visible] .strategy-nav-label {
  opacity: 1;
  translate: var(--label-shown);
}

@media (hover: hover) {
  .strategy-view-nav button:hover:not([aria-pressed=true]) .strategy-nav-dot { background: var(--muted); }
  .strategy-view-nav:has(button:hover) button:not(:hover) .strategy-nav-label {
    opacity: 0;
    translate: var(--label-rest);
  }
  .strategy-view-nav button:hover .strategy-nav-label {
    opacity: 1;
    translate: var(--label-shown);
  }
}

.strategy-view-nav button:focus-visible { outline: none; }
.strategy-view-nav button:focus-visible .strategy-nav-dot {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.strategy-deck {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  container-type: size;
}

.strategy-slide {
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  align-content: safe center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 12px clamp(44px, 6cqw, 72px);
}

.strategy-slide :is(dl, dd, figure) { margin: 0; }
.strategy-slide dl { font-size: clamp(12px, 1.75cqw, 15px); }
.strategy-slide dd { color: var(--muted); line-height: 1.7; }
.strategy-slide dt { font-weight: 600; }

.strategy-foundation,
.strategy-plan {
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(20px, 5cqw, 58px);
}

.strategy-extraction {
  display: block;
  width: 100%;
  max-height: 100%;
}

.strategy-extraction-content { min-width: 0; }
.strategy-extraction-compact { display: none; }

.strategy-extraction text {
  fill: var(--muted);
  font-size: 16px;
  dominant-baseline: central;
}

.strategy-extraction .strategy-tree-label { fill: var(--ink); }
.strategy-tree-lines { fill: none; stroke: var(--line); stroke-dasharray: 2 2; }

.strategy-position,
.strategy-guidelines {
  display: grid;
  gap: clamp(16px, 4.3cqh, 32px);
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--line);
}

.strategy-guidelines { gap: clamp(10px, 2.7cqh, 24px); }
.strategy-position > div, .strategy-guidelines > div { position: relative; }

.strategy-position > div::before,
.strategy-guidelines > div::before {
  position: absolute;
  inset-inline-start: -22px;
  top: .78em;
  width: var(--strategy-marker-size);
  height: var(--strategy-marker-size);
  border-radius: 50%;
  background: var(--strategy-marker);
  content: '';
}

.strategy-position dt,
.strategy-guidelines dt,
.strategy-answers dt { font-size: clamp(15px, 2.15cqw, 19px); }
.strategy-position dd,
.strategy-guidelines dd,
.strategy-answers dd { margin-top: 4px; }

.strategy-feature-map {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(50cqh, 380px);
}

.strategy-feature-map svg {
  position: absolute;
  inset: 52% auto auto 50%;
  width: 37%;
  transform: translate(-50%, -37%);
}

.strategy-pentagon { fill: var(--strategy-marker); opacity: .13; }

.strategy-features {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  row-gap: clamp(22px, 6cqh, 56px);
  text-align: center;
}

.strategy-features > div:nth-child(1) { grid-column: 2 / 6; }
.strategy-features > div:nth-child(2) { grid-column: 1 / 3; }
.strategy-features > div:nth-child(3) { grid-column: 5 / 7; }
.strategy-features > div:nth-child(4) { grid-column: 1 / 4; }
.strategy-features > div:nth-child(5) { grid-column: 4 / 7; }
.strategy-features dt { font-size: clamp(15px, 3cqw, 25px); }
.strategy-features dd { margin-top: 4px; text-wrap: balance; }

.strategy-guidelines > div:has(.strategy-sample) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
}

.strategy-guidelines > div:has(.strategy-sample) > dd:first-of-type { grid-area: 2 / 1; }
.strategy-guidelines .strategy-sample { grid-area: 1 / 2 / 3; align-self: center; }
.strategy-palette, .strategy-weights { display: flex; align-items: end; gap: 7px; }
.strategy-palette span, .strategy-weights small, .strategy-shape small { font-size: 8px; white-space: nowrap; }

.strategy-palette span::before {
  display: block;
  height: 17px;
  margin-bottom: 2px;
  border-radius: 3px;
  background: linear-gradient(125deg, #0a0a0a, #f5f5f5);
  content: '';
}

.strategy-palette span + span::before { background: #ff702a; }
.strategy-weights { font: 500 11px/1.2 MiSans, sans-serif; }
.strategy-weights small, .strategy-shape small { display: block; margin-top: 3px; }

.strategy-shape span {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: var(--ink);
}

.strategy-chapter {
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  gap: clamp(16px, 4cqw, 52px);
}

.strategy-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.1cqw, 20px);
}

.strategy-art figure { width: min(47%, 230px, calc((100cqh - 36px) * 640 / 1321)); }
.strategy-art > figure > img { width: 100%; height: auto; }

.strategy-answers {
  display: grid;
  align-content: start;
  gap: clamp(16px, 4.2cqh, 34px);
}

.strategy-answers > div { position: relative; padding-inline-start: 17px; }
.strategy-answers > div::before {
  position: absolute;
  inset-inline-start: 1px;
  top: .83em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--strategy-marker);
  transform: rotate(45deg);
  content: '';
}

.strategy-complete {
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.strategy-phone {
  position: relative;
  height: min(calc(100cqh - 6px), 640px, calc(100cqw * 1321 / 640));
  aspect-ratio: 640 / 1321;
  isolation: isolate;
  transform-origin: top left;
}

[data-strategy-phone-preview] .strategy-phone {
  width: 100%;
  height: auto;
}

[data-strategy-phone-preview] .strategy-phone-screen { overflow: hidden; }
[data-strategy-phone-preview] .strategy-long-image {
  transform: translateY(calc(-100% * var(--strategy-module-offset)));
}

.strategy-phone-screen {
  position: absolute;
  inset: 1.4% 3.15%;
  overflow: auto;
  padding: 1% 1.1%;
  border-radius: 18% / 8.5%;
  background: #0a0a0a;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.strategy-phone-screen:focus-visible { outline: 1px solid var(--muted); outline-offset: -2px; }
.strategy-complete[data-intro] .strategy-phone-screen { overflow: hidden; touch-action: none; }
.strategy-long-image { width: 100%; height: auto; }
.strategy-phone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .strategy-tree-lines {
    animation: strategy-lines-enter 360ms ease-out;
  }

  .strategy-feature-map svg {
    animation: strategy-map-enter 360ms ease-out;
  }

  .strategy-chapter .strategy-art {
    animation: strategy-art-enter 300ms cubic-bezier(.22,.68,.25,1);
  }

  /* 转到详情页时，手机位置可直接承接当前画面。 */
  .strategy-art[data-strategy-art=storage] {
    --strategy-art-start-opacity: 1;
  }

  @keyframes strategy-lines-enter {
    from { opacity: .3; }
    to { opacity: 1; }
  }

  @keyframes strategy-map-enter {
    from { opacity: .35; translate: 0 4px; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes strategy-art-enter {
    from { opacity: var(--strategy-art-start-opacity, .92); translate: 0 4px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .strategy-view {
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
    gap: 10px;
    height: clamp(200px, calc(100dvh - 100px), 760px);
  }
  .strategy-view-nav {
    position: relative;
    inset: auto;
    width: auto;
    grid-template-columns: repeat(7, minmax(0, 44px));
    justify-content: center;
    overflow: visible;
  }
  .strategy-view-nav button {
    min-height: 40px;
    width: 100%;
  }
  .strategy-view-nav button:not(:last-of-type)::before {
    width: calc(100% + 3px);
    height: 1px;
    translate: 0 -50%;
  }
  .strategy-nav-label { display: none; }
  .strategy-current-label {
    display: block;
    grid-column: 1 / -1;
    justify-self: stretch;
    margin: 0;
    color: var(--strategy-nav-text);
    font-size: 13px;
    text-align: center;
  }
  .strategy-slide:not(.strategy-complete) { padding-inline: clamp(4px, 3cqw, 20px); }
  .strategy-slide, .strategy-phone-screen { touch-action: pan-y pinch-zoom; }
}

@media (prefers-reduced-motion: reduce) {
  .strategy-nav-dot, .strategy-nav-label { transition: none; }
}

@container (max-width: 650px) {
  .strategy-slide:not(.strategy-complete) {
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    overflow-x: hidden;
  }
  .strategy-foundation, .strategy-plan { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .strategy-extraction { display: none; }
  .strategy-extraction-compact { display: grid; gap: 12px; }
  .strategy-extraction-compact section { padding: 12px 14px; border-radius: var(--radius); background: var(--soft); }
  .strategy-extraction-compact h3 { margin: 0 0 8px; font-size: 16px; }
  .strategy-extraction-items { display: grid; gap: 8px; }
  .strategy-extraction-items dd { margin-top: 2px; }
  .strategy-guidelines > div:has(.strategy-sample) { display: block; }
  .strategy-guidelines .strategy-sample { margin-top: 8px; }
}

@container (max-width: 500px) {
  .strategy-chapter { grid-template-columns: minmax(0, 1fr); }
  .strategy-slide dl { font-size: 14px; }
  .strategy-art figure { max-width: 155px; }
  .strategy-feature-map { min-height: 0; }
  .strategy-feature-map svg { display: none; }
  .strategy-features { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: left; }
  .strategy-features > div:nth-child(n) {
    grid-column: auto;
    align-self: stretch;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--soft);
  }
  .strategy-features dd { text-wrap: wrap; }
}