:root {
  color-scheme: light;
  --ink: #211b33;
  --muted: #625a70;
  --paper: #f8f6f0;
  --purple: #6942a6;
  --lime: #e4f59f;
  --line: #e2dce7;
  --nav-size: 84px;
  --hero-size: clamp(720px, 94svh, 940px);
  --display: "Noto Serif CJK SC", "Songti SC", "SimSun", Georgia, serif;
  --body: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--body); }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
button { color: inherit; font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #a080de; outline-offset: 4px; }
.wrap { width: min(100% - 96px, 1220px); margin-inline: auto; }
.skip {
  position: fixed;
  z-index: 5;
  inset: 8px auto auto 8px;
  transform: translateY(-150%);
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--lime);
  color: var(--ink);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.opening { position: relative; isolation: isolate; }
.hero-art {
  position: absolute;
  inset: 0 0 auto;
  height: var(--hero-size);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 89% 49%, #49297c 0, transparent 47%),
    radial-gradient(ellipse at 18% 85%, #4b237c 0, transparent 52%),
    linear-gradient(155deg, #19122d, #100d20 60%, #20123b);
}
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 83% 42%, #24654e, transparent 57%), radial-gradient(ellipse at 18% 81%, #264c62, transparent 58%), #0c231f;
  opacity: 0;
  transition: opacity .7s ease;
}
.opening[data-banner="trade"] .hero-art::before { opacity: 1; }
.opening[data-banner="trade"] .signal { filter: hue-rotate(-72deg); }
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, #100c22d9 2%, #100c2270 37%, transparent 71%);
}
.signal { position: absolute; width: 100%; height: 100%; }
.hero-grid { opacity: .42; }
.signal-body { transform-box: fill-box; transform-origin: center; }
.signal-halo { opacity: .54; }
.signal-dash { stroke-dasharray: 4 48 70 1520; stroke-dashoffset: 78; opacity: .88; }
.signal-body { animation: wave-lean 12s ease-in-out infinite alternate paused; }
.signal-dash { animation: signal-travel 8.5s linear infinite paused; }
.signal-points { animation: signal-glint 4.6s ease-in-out infinite paused; }
.is-moving :is(.signal-body, .signal-dash, .signal-points) { animation-play-state: running; }
@keyframes wave-lean {
  from { transform: translate(-21px, 21px) rotate(-2deg) scale(1.03); }
  to { transform: translate(17px, -48px) rotate(3deg) scale(1.06); }
}
@keyframes signal-travel {
  to { stroke-dashoffset: -1564; }
}
@keyframes signal-glint {
  0%, 100% { opacity: .4; }
  52% { opacity: .97; }
}

.top { position: relative; z-index: 2; color: #f9f4ff; }
.top-inner { display: grid; height: var(--nav-size); grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.brand img { flex: none; border: 1px solid #ffffff2b; border-radius: 12px; }
.brand b { display: block; font: 700 26px/.98 Georgia, serif; letter-spacing: -.025em; }
.brand small { display: block; margin-top: 5px; color: #d1c4e7; font-size: 10px; letter-spacing: .22em; }
.top nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); font-size: 13px; }
.top nav a { color: #e5dcf3; transition: color .2s ease; }
.top nav a:hover { color: var(--lime); }
.top-cta { justify-self: end; padding: 9px 16px; border: 1px solid #dfd1f84f; border-radius: 999px; font-size: 13px; transition: background .2s ease; }
.top-cta:hover { background: #ffffff17; }

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(var(--hero-size) - var(--nav-size));
  padding: 22px 0 126px;
  color: #fffaf5;
}
.banner-slide {
  display: grid;
  grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
  align-items: center;
  gap: clamp(28px, 5.2vw, 75px);
  animation: banner-enter .52s cubic-bezier(.2,.66,.24,1) both;
}
@keyframes banner-enter {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hero-copy { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: var(--purple); font-size: 12px; font-weight: 750; letter-spacing: .13em; }
.eyebrow > span:not(.beacon) { width: 19px; height: 1px; background: currentColor; opacity: .48; }
.hero .eyebrow { margin-bottom: 21px; color: #ede3fc; }
.beacon { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #d8f38f; box-shadow: 0 0 16px #dbf7a082; }
.banner-slide h2 {
  margin: 0;
  font: 700 clamp(3rem, 6.2vw, 6.4rem)/1.02 var(--display);
  letter-spacing: -.064em;
  text-shadow: 0 9px 45px #0906175e;
}
.banner-slide h2 em { color: #eaf7b5; font-style: normal; }
[data-banner="trade"] .banner-slide h2 em { color: #cdf3b6; }
.hero-text { margin: 22px 0 0; max-width: 25em; color: #ece5f6; text-wrap: balance; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.btn { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; gap: 14px; padding: 9px 18px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 720; transition: background .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.strong { background: var(--lime); color: #272237; }
.btn.strong:hover { background: #f1fccb; }
.btn.outline { background: #1b142d71; border-color: #d7c9ee5e; color: #f7f0ff; }
.btn.outline:hover { background: #402b59; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover { background: #44305f; }
.hero-foot {
  position: absolute;
  inset: auto 0 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e5d6ff36;
  padding-top: 13px;
  color: #e0d6f2;
  font-size: 12px;
}
.banner-tabs { display: flex; gap: 7px; }
.banner-tabs button {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border: 1px solid #ddd1f44a;
  border-radius: 12px;
  padding: 6px 15px;
  background: #19132960;
  color: #efe9f9;
  font-size: 13px;
  font-weight: 650;
}
.banner-tabs button span { margin-right: 5px; color: #c2b5df; font-size: 10px; font-variant-numeric: tabular-nums; }
.banner-tabs button[aria-pressed="true"] { border-color: #e4f59f77; background: #eff3d9; color: #231e32; }
.banner-tabs button[aria-pressed="true"] span { color: #544e6b; }
.banner-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: #7d9b4d; transform: scaleX(0); transform-origin: left; }
.is-moving .banner-tabs button[aria-pressed="true"]::after { animation: banner-fill 8.6s linear forwards; }
@keyframes banner-fill { to { transform: scaleX(1); } }

.banner-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: 13px;
  min-width: 0;
  min-height: 373px;
  overflow: hidden;
  border: 1px solid #c8b0f65e;
  border-radius: 25px;
  padding: clamp(19px, 2.5vw, 33px);
  background: radial-gradient(ellipse at 92% 16%, #61408c, transparent 68%), #24173d;
  box-shadow: 0 22px 75px #08041561;
}
.banner-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle, #d4b7ff49 1px, transparent 1.5px) 0 0 / 22px 22px;
  mask-image: linear-gradient(133deg, transparent 15%, #000 85%);
}
.banner-trade { border-color: #adf5d35c; background: radial-gradient(ellipse at 96% 8%, #2e6d59, transparent 73%), #153630; }
.banner-trade::before { background: repeating-linear-gradient(0deg, transparent 0 23px, #b4eed322 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #b4eed322 23px 24px); }
.banner-route { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .72; }
.banner-route-signal { stroke-dasharray: 77 720; animation: banner-scan 3.8s linear infinite paused; }
.banner-route-ring { transform-box: fill-box; transform-origin: center; animation: route-ping 2.5s ease-out infinite paused; }
.is-moving :is(.banner-route-signal, .banner-route-ring) { animation-play-state: running; }
@keyframes banner-scan { to { stroke-dashoffset: -797; } }
.banner-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #efe3fb; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.banner-trade .banner-visual-head { color: #e2f5e9; }
.banner-visual-head > span:last-child { border: 1px solid #ffffff40; border-radius: 999px; padding: 2px 8px; background: #ffffff13; font-size: 10px; white-space: nowrap; }
.banner-alert {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #ffffff4b;
  border-radius: 13px;
  padding: 10px 12px;
  background: #ecddff1c;
  animation: banner-enter .56s .12s both;
}
.banner-alert-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #f5e5ff23; color: var(--lime); font-size: 20px; }
.banner-alert small, .banner-checks small { display: block; color: #eee1fb; font-size: 11px; }
.banner-alert b, .banner-checks b { display: block; font-size: 15px; }
.banner-status { border-radius: 999px; padding: 3px 9px; background: #ecf6b2; color: #2c243b; font-size: 11px; font-weight: 750; white-space: nowrap; }
.banner-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.banner-checks > div { display: flex; align-items: center; gap: 8px; border: 1px solid #dfc8ff48; border-radius: 12px; padding: 10px; background: #23193dc7; animation: banner-enter .54s .42s both; }
.banner-checks > div:nth-child(2) { border-color: #d4f19773; animation-delay: .67s; }
.banner-checks > div > span { color: #d9c3fe; font-size: 11px; font-variant-numeric: tabular-nums; }
.banner-echo { display: flex; align-items: center; gap: 9px; border-radius: 12px; padding: 8px 10px; background: #efe8f8; color: #272034; animation: banner-enter .53s .93s both; }
.banner-echo img { flex: none; }
.banner-echo b { display: block; color: #5d397b; font-size: 11px; }
.banner-echo p { margin: 1px 0 0; font-size: 13px; line-height: 1.5; }
.banner-trade .banner-echo { background: #e7f4e6; color: #163c32; }
.banner-trade .banner-echo b { color: #3c6655; }
.banner-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: #e3f5e5; font-size: 13px; }
.banner-metric strong { color: #edfbd5; font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.banner-metric strong > span[aria-hidden] { color: #b5eca5; }
.banner-chart { display: grid; gap: 9px; border: 1px solid #d1f7e34e; border-radius: 13px; padding: 10px 12px; background: #e1ffe313; }
.banner-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.banner-chart-head small, .banner-chart-row > span { color: #d9eee0; font-size: 11px; }
.banner-chart-row { display: grid; grid-template-columns: 45px minmax(0,1fr) 61px; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.banner-chart-row > div { height: 9px; overflow: hidden; border-radius: 999px; background: #d4f8dc28; }
.banner-chart-row i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #c8f1b6; transform-origin: left; animation: chart-rise 1s .25s both; }
.banner-chart-row i.banner-bar-promo { width: 29.7%; background: #f3d998; animation-delay: .54s; }
.banner-chart-row b { justify-self: end; color: #f6fdeb; font-size: 14px; }
.motion-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; font-size: 12px; }
.hero-foot .motion-toggle:hover { border-color: #cdb5ed83; background: #ffffff14; }
.pause-glyph { display: block; flex: none; width: 10px; height: 11px; background: linear-gradient(90deg, currentColor 0 31%, transparent 31% 69%, currentColor 69%); }
[data-paused="true"] .pause-glyph { background: currentColor; clip-path: polygon(11% 0, 100% 50%, 11% 100%); }

.page-body {
  position: relative;
  z-index: 1;
  margin-top: -31px;
  border-radius: 36px 36px 0 0;
  padding-block: clamp(64px, 8vw, 108px);
  background: var(--paper);
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(34px, 6.4vw, 96px);
  align-items: center;
  scroll-margin-top: 42px;
}
.feature-copy { min-width: 0; }
.feature-copy h2, .finish h2 {
  margin: 0;
  font: 700 clamp(2.25rem, 4.1vw, 4.05rem)/1.11 var(--display);
  letter-spacing: -.059em;
}
.feature-copy > p:not(.eyebrow) { margin: 19px 0 0; max-width: 35ch; color: var(--muted); line-height: 1.85; }
.phase-links { display: grid; gap: 0; max-width: 340px; margin-top: 26px; border-top: 1px solid var(--line); }
.phase-links a { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 7px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; transition: color .2s ease, padding .2s ease; }
.phase-links a > span { color: var(--purple); font-size: 11px; font-variant-numeric: tabular-nums; }
.phase-links i { font-style: normal; }
.phase-links a:hover { padding-inline: 8px; color: var(--purple); }
.text-link { display: inline-flex; align-items: center; gap: 13px; margin-top: 22px; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--purple); font-weight: 700; }
.text-link:hover { color: var(--ink); }

.case-player { --scene-base: #211637; --scene-light: #573885; --beat: #e3f59e; min-width: 0; overflow: hidden; border: 1px solid #dcd2e8; border-radius: 25px; background: #efe9f6; box-shadow: 0 22px 64px #3619581f; }
.case-player[data-scene="1"] { --scene-base: #212036; --scene-light: #5e517e; --beat: #f9dda2; }
.case-player[data-scene="2"] { --scene-base: #162332; --scene-light: #346069; --beat: #d2f5b4; }
.player-visual { position: relative; isolation: isolate; min-height: 375px; padding: 20px 24px 24px; color: #fdf9ff; background: radial-gradient(ellipse at 89% 18%, var(--scene-light), transparent 73%), var(--scene-base); }
.route-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .78; transition: transform .65s ease; }
.case-player[data-scene="1"] .route-art { transform: translate(-5px, -10px) rotate(-4deg) scale(1.08); }
.case-player[data-scene="2"] .route-art { transform: translate(4px, 4px) rotate(4deg) scale(1.06); }
.route-line { stroke-dasharray: 93 460; stroke-dashoffset: -58; }
.route-ping { transform-box: fill-box; transform-origin: center; opacity: .58; }
.is-playing .route-line { animation: route-scan 3s linear infinite; }
.is-playing .route-ping { animation: route-ping 3s ease-out infinite; }
@keyframes route-scan { to { stroke-dashoffset: -611; } }
@keyframes route-ping { 0%, 100% { transform: scale(.38); opacity: .84; } 68% { transform: scale(1.46); opacity: 0; } }
.player-head, .trade-head, .film-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .11em; }
.player-head { color: #ded3f4; }
.player-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ffffff34; border-radius: 30px; padding: 3px 8px; background: #ffffff0d; letter-spacing: .05em; }
.player-badge i, .film-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--beat, #64469d); }
.player-frame { width: min(100%, 418px); margin-top: 24px; }
.frame-copy { min-height: 100px; }
.frame-step { margin: 0 0 2px; color: var(--beat); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.frame-copy h3 { margin: 3px 0 2px; font: 700 clamp(1.6rem, 3.15vw, 2.75rem)/1.12 var(--display); letter-spacing: -.038em; }
.frame-copy p:last-child { margin: 7px 0 0; color: #efe5fb; font-size: 14px; }
.receipt-chip { display: grid; grid-template-columns: 33px 1fr auto; align-items: center; gap: 11px; margin-top: 12px; border: 1px solid #ffffff35; border-radius: 13px; padding: 9px 11px; background: #f9f2ff13; backdrop-filter: blur(10px); }
.receipt-chip > span:first-child { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: #dac1ff26; color: var(--beat); font-size: 17px; font-weight: 750; }
.receipt-chip small, .receipt-chip b { display: block; line-height: 1.4; }
.receipt-chip small { color: #e1d4ef; font-size: 10px; }
.receipt-chip b { font-size: 14px; }
.receipt-status { padding: 4px 8px; border-radius: 999px; background: var(--beat); color: #261f31; font-size: 10px; font-weight: 750; white-space: nowrap; }
.coach-note { display: flex; align-items: start; gap: 10px; margin-top: 12px; padding: 9px 11px; border-radius: 13px; background: #eee9f5; color: #282134; box-shadow: 0 10px 25px #13082031; }
.coach-note img { flex: none; margin-top: 2px; }
.coach-note b { display: block; font-size: 12px; }
.coach-note b span { margin-left: 5px; color: #715394; font-size: 9px; letter-spacing: .15em; }
.coach-note p { margin: 1px 0 0; font-size: 13px; line-height: 1.55; }
.player-frame.is-changing { animation: frame-in .5s cubic-bezier(.22,.68,.28,1) both; }
@keyframes frame-in { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.player-controls { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.phase-tabs { display: grid; flex: 1; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.phase-tabs button { position: relative; overflow: hidden; min-height: 42px; border: 1px solid transparent; border-radius: 10px; padding: 5px; background: transparent; color: #594f69; font-size: 13px; font-weight: 700; white-space: nowrap; }
.phase-tabs button span { margin-right: 3px; font-size: 10px; }
.phase-tabs button:hover { border-color: #d4c8df; }
.phase-tabs button[aria-pressed="true"] { border-color: #d5c5e7; background: #fdfbff; color: #33274d; }
.phase-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: #7c58bf; transform: scaleX(0); transform-origin: left; }
.is-playing .phase-tabs button[aria-pressed="true"]::after { animation: progress-fill 6.4s linear forwards; }
@keyframes progress-fill { to { transform: scaleX(1); } }
.player-toggle { width: 37px; height: 37px; flex: none; border-color: #d9cee5; background: #fbf8ff; color: #49336d; }
.player-toggle:hover { background: #e4d7f4; }

.feature-trade { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); margin-top: clamp(62px, 8.2vw, 116px); border-top: 1px solid var(--line); padding-top: clamp(60px, 8.2vw, 116px); }
.feature-trade .feature-copy { grid-area: 1 / 2; }
.trade-art {
  position: relative;
  grid-area: 1 / 1;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #d1ded2;
  border-radius: 24px;
  padding: clamp(22px, 3.15vw, 43px);
  background: radial-gradient(ellipse at 90% 6%, #f6fbe3, transparent 61%), #e4efe6;
  color: #1e3f35;
}
.trade-art::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .45; background: repeating-linear-gradient(0deg, transparent 0 23px, #a9c7af 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #a9c7af 23px 24px); mask-image: linear-gradient(115deg, transparent 21%, #000 98%); }
.trade-head { color: #3c5e4d; }
.trade-head span:last-child { padding: 3px 9px; border: 1px solid #bdd0c0; border-radius: 999px; background: #f8fbf0; letter-spacing: .03em; }
.chart-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 9px; margin-top: 19px; font: 700 clamp(1.65rem, 2.9vw, 2.55rem)/1.28 var(--display); }
.chart-caption span:last-child { color: #4f675a; font: 600 12px var(--body); }
.chart { display: grid; gap: 15px; margin-top: 12px; padding: 15px; border: 1px solid #cddfd0; border-radius: 14px; background: #fbfdf6cc; }
.chart-row { display: grid; grid-template-columns: 53px minmax(0,1fr) 68px; align-items: center; gap: 10px; }
.chart-row > span { color: #3a5a4e; font-size: 13px; }
.chart-row > strong { justify-self: end; font-size: 18px; font-variant-numeric: tabular-nums; }
.chart-track { height: 13px; overflow: hidden; border-radius: 99px; background: #e2ece2; }
.chart-bar { display: block; width: 100%; height: 100%; border-radius: inherit; background: #376955; transform-origin: left; }
.chart-bar.promotion { width: 29.7%; background: #7e9b62; }
.trade-art.is-visible .chart-bar { animation: chart-rise .95s cubic-bezier(.2,.8,.26,1) both; }
.trade-art.is-visible .chart-bar.promotion { animation-delay: .15s; }
@keyframes chart-rise { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.trade-note { display: flex; align-items: start; gap: 9px; margin-top: 17px; border-top: 1px solid #aabfaf; padding-top: 12px; }
.trade-note > span { font-size: 20px; line-height: 1; }
.trade-note b { display: block; font-size: 13px; }
.trade-note p { margin: 1px 0 0; color: #4f695b; font-size: 13px; }

.learning { background: #ece4f7; padding-block: clamp(65px, 8vw, 105px); }
.learning-steps { list-style: none; display: grid; gap: 9px; margin: 24px 0 0; padding: 0; }
.learning-steps li { display: flex; align-items: start; gap: 10px; }
.learning-steps li > span { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border: 1px solid #d1bce4; border-radius: 50%; color: #633c92; font-size: 11px; }
.learning-steps b { display: block; font-size: 14px; }
.learning-steps p { margin: 1px 0 0; color: #514762; font-size: 14px; }
.lesson-film { min-width: 0; margin: 0; border: 1px solid #d9c9e8; border-radius: 22px; padding: 12px; background: #fbf8ff; box-shadow: 0 18px 48px #3919641c; }
.film-head { padding: 2px 4px 10px; color: #695981; font-size: 10px; }
.film-head span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.lesson-film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 13px; background: #241c37; }
.lesson-film figcaption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; padding: 10px 4px 2px; font-size: 13px; }
.lesson-film figcaption a { color: var(--purple); font-size: 12px; }
.lesson-film figcaption a:hover { text-decoration: underline; }
.finish { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 19px; padding-block: clamp(56px, 7vw, 94px); }
.finish .eyebrow { margin-bottom: 9px; }
.finish h2 { font-size: clamp(2.1rem, 3.85vw, 3.7rem); }
.footer { background: #20182f; color: #f5effa; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; min-height: 104px; padding-block: 20px; }
.footer-inner b { display: block; font-size: 16px; }
.footer-inner small { display: block; color: #cec2dc; font-size: 12px; }
.footer-inner > div { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.footer-inner a:hover { color: var(--lime); }

@media (max-width: 880px) {

  :root { --hero-size: clamp(765px, 100svh, 930px); }
  .hero { padding: 33px 0 111px; }
  .banner-slide { grid-template-columns: minmax(0,1fr); gap: 24px; text-align: center; }
  .hero .eyebrow, .hero-actions { justify-content: center; }
  .hero-text { margin-inline: auto; }
  .banner-visual { width: min(100%, 525px); min-height: 0; margin-inline: auto; text-align: left; }
  .wrap { width: min(100% - 54px, 700px); }
  .feature { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .feature-trade .feature-copy, .trade-art { grid-area: auto; }
  .feature-copy > p:not(.eyebrow) { max-width: 52ch; }
  .phase-links { max-width: none; }
}
@media (max-width: 560px) {
  :root { --nav-size: 65px; --hero-size: clamp(744px, 99svh, 842px); }
  .wrap { width: calc(100% - 36px); }
  .top-inner { grid-template-columns: 1fr auto; gap: 12px; }
  .top nav { display: none; }
  .brand img { width: 36px; height: 36px; border-radius: 10px; }
  .brand b { font-size: 22px; }
  .brand small { font-size: 9px; }
  .top-cta { padding: 5px 10px; font-size: 12px; }

  .hero { padding: 24px 0 98px; }
  .banner-slide { gap: 19px; }
  .hero .eyebrow { margin-bottom: 11px; }
  .banner-slide h2 { font-size: clamp(2.38rem, 11.2vw, 3.8rem); }
  .hero-text { margin-top: 13px; font-size: 14px; text-wrap: balance; }
  .hero-actions { gap: 7px; margin-top: 15px; }
  .banner-visual { gap: 8px; padding: 12px; border-radius: 18px; }
  .banner-visual-head { font-size: 11px; }
  .banner-alert { gap: 7px; padding: 7px 8px; }
  .banner-alert-icon { width: 27px; height: 27px; font-size: 16px; }
  .banner-alert b, .banner-checks b { font-size: 12px; }
  .banner-alert small, .banner-checks small { font-size: 10px; }
  .banner-status { padding: 3px 5px; font-size: 9px; }
  .banner-checks { gap: 6px; }
  .banner-checks > div { padding: 6px; gap: 5px; }
  .banner-checks > div > span { font-size: 9px; }
  .banner-echo { gap: 7px; padding: 6px 7px; }
  .banner-echo img { width: 28px; height: 28px; }
  .banner-echo p { font-size: 11px; }
  .banner-metric strong { font-size: 1.9rem; }
  .banner-chart { gap: 6px; padding: 8px; }
  .banner-chart-row { grid-template-columns: 39px minmax(0,1fr) 51px; gap: 6px; }
  .banner-chart-row b { font-size: 12px; }
  .banner-tabs { gap: 4px; }
  .banner-tabs button { min-height: 35px; padding: 5px 8px; font-size: 11px; }
  .banner-tabs button span { margin-right: 2px; font-size: 9px; }
  .btn { min-height: 42px; gap: 6px; padding-inline: 12px; font-size: 12px; }
  .hero-foot { bottom: 47px; padding-top: 11px; font-size: 11px; }
  .hero-foot .motion-toggle { padding-inline: 4px; font-size: 11px; }
  .page-body { margin-top: -22px; border-radius: 23px 23px 0 0; }
  .feature { gap: 22px; }
  .feature-copy h2 { font-size: clamp(2rem, 9vw, 2.65rem); }
  .feature-copy > p:not(.eyebrow) { margin-top: 13px; font-size: 14px; }
  .phase-links { margin-top: 18px; }
  .case-player { border-radius: 18px; }
  .player-visual { min-height: 310px; padding: 15px 13px 16px; }
  .player-frame { margin-top: 18px; }
  .frame-copy { min-height: 85px; }
  .frame-copy p:last-child { font-size: 13px; }
  .receipt-chip { gap: 7px; padding: 8px; }
  .receipt-chip b { font-size: 12px; }
  .coach-note { margin-top: 9px; }
  .coach-note p { font-size: 12px; }
  .player-controls { gap: 5px; padding: 7px 6px; }
  .phase-tabs { gap: 3px; }
  .phase-tabs button { min-height: 38px; padding-inline: 3px; font-size: 11px; }
  .phase-tabs button span { margin-right: 2px; font-size: 9px; }
  .player-toggle { width: 33px; height: 33px; }
  .trade-art { padding: 19px 15px; border-radius: 18px; }
  .chart { padding: 11px 8px; }
  .chart-row { grid-template-columns: 47px minmax(0,1fr) 56px; gap: 6px; }
  .chart-row > strong { font-size: 16px; }
  .chart-row > span { font-size: 12px; }
  .lesson-film { border-radius: 16px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.student-feature {
  margin-top: clamp(52px, 7.6vw, 105px);
  padding: clamp(18px, 3.8vw, 48px);
  gap: clamp(21px, 4.3vw, 60px);
  border: 1px solid #376976;
  border-radius: 23px;
  background: linear-gradient(118deg, #112f3e, #184856);
  color: #f1faff;
}
.student-feature .feature-copy > p:not(.eyebrow) {
  color: #c9e1e8;
}
.student-feature .eyebrow, .student-feature .text-link {
  color: #a5eee8;
}
.student-feature .text-link:hover {
  color: #e5ffff;
}
.student-feature-art {
  position: relative;
  min-width: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #4b7d8a;
  border-radius: 17px;
  background: #102d39;
  color: white;
  text-decoration: none;
}
.student-feature-art img {
  display: block;
  width: 100%;
  height: clamp(175px, 30vw, 340px);
  object-fit: cover;
  object-position: center 40%;
}
.student-feature-art span {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 19px 17px 14px;
  background: linear-gradient(transparent, #102d39f2);
  font-size: 15px;
  font-weight: 750;
}

.edition-opening {
  --hero-size: clamp(665px, 82svh, 840px);
}
.edition-opening .hero-art {
  background:
    radial-gradient(ellipse at 90% 30%, #215961, transparent 50%),
    radial-gradient(ellipse at 11% 88%, #174552, transparent 60%),
    #0b202a;
}
.edition-opening .hero-art::after {
  background: linear-gradient(90deg, #061b2645, transparent 76%);
}
.edition-opening[data-banner="students"] .signal {
  filter: grayscale(1);
  opacity: .34;
}
.edition-opening .top nav a, .edition-opening .brand small {
  color: #cce5e4;
}
.edition-opening .top nav a:hover {
  color: #fff;
}
.edition-opening .top-cta {
  border-color: #acd9d066;
}
.edition-opening[data-banner="students"] .hero .eyebrow {
  color: #a7eee5;
}
.edition-opening[data-banner="students"] .beacon {
  background: #96eee0;
  box-shadow: 0 0 15px #96eee08c;
}
.edition-opening[data-banner="students"] .hero-text {
  color: #d5e7ea;
}
.edition-opening[data-banner="students"] .btn.strong {
  background: #b5f4e8;
  color: #103133;
}
.edition-opening[data-banner="students"] .btn.strong:hover {
  background: #ddfff7;
}
.edition-opening .btn.outline, .edition-opening .banner-tabs button {
  border-color: #c2dedc57;
  background: #102d325e;
  color: #f2fbfa;
}
.edition-opening .btn.outline:hover {
  background: #f1fff524;
}
.edition-opening .hero-foot {
  border-color: #c2dedc41;
  color: #d5ebe9;
}
.edition-opening[data-banner="students"] .banner-tabs button[aria-pressed="true"] {
  border-color: #8bdcd0;
  background: #c7eee8;
  color: #173635;
}
.edition-opening[data-banner="students"] .banner-tabs button[aria-pressed="true"]::after {
  background: #478a7f;
}
.banner-students {
  align-content: end;
  min-height: clamp(282px, 32vw, 410px);
  margin: 0;
  border-color: #bcece962;
  padding: 0;
  background: #133846;
  box-shadow: 0 22px 75px #03172185;
}
.banner-students img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.banner-students::before {
  background: linear-gradient(180deg, transparent 60%, #0b212edb 100%);
  mask-image: none;
}
.banner-students figcaption {
  padding: 17px 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
}
@keyframes student-banner-pan {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}
.is-moving .banner-students img {
  animation: student-banner-pan 8.6s ease-out both;
}
.editions-body {
  padding-block: clamp(46px, 6vw, 88px);
}
.public-edition, .service-edition {
  scroll-margin-top: 28px;
}
.edition-heading {
  margin-bottom: clamp(20px, 3vw, 34px);
}
.edition-heading h2 {
  margin: 0;
  font: 700 clamp(2.4rem, 4.7vw, 4.25rem)/1.1 var(--display);
  letter-spacing: -.055em;
}
.edition-heading > p:not(.service-status) {
  margin: 8px 0 0;
  color: var(--muted);
}
.public-practices {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
}
.public-practices .feature {
  margin: 0;
}
.public-practices .feature-copy h3 {
  margin: 0;
  font: 700 clamp(2.05rem, 3.8vw, 3.75rem)/1.12 var(--display);
  letter-spacing: -.055em;
}
.public-practices .feature-trade {
  gap: clamp(21px, 4.3vw, 60px);
  border: 1px solid #c9dacb;
  border-radius: 23px;
  padding: clamp(18px, 3.8vw, 48px);
  background: #f2f6ed;
}
.public-practices .feature-trade .eyebrow, .public-practices .feature-trade .text-link {
  color: #315d4c;
}
.public-practices .trade-art {
  border-radius: 17px;
}
.outbound-feature {
  gap: clamp(21px, 4.3vw, 60px);
  border: 1px solid #523878;
  border-radius: 23px;
  padding: clamp(18px, 3.8vw, 48px);
  background: linear-gradient(130deg, #221734, #382252);
  color: #fbf6ff;
}
.outbound-feature .eyebrow, .outbound-feature .text-link {
  color: #e8d4ff;
}
.outbound-feature .feature-copy > p:not(.eyebrow) {
  color: #e1d2ee;
}
.outbound-feature-art {
  display: block;
  overflow: hidden;
  border-radius: 17px;
}
.outbound-feature-art img {
  display: block;
  width: 100%;
  height: clamp(175px, 28vw, 320px);
  object-fit: cover;
}
.service-edition {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 6vw, 92px);
  margin-top: clamp(44px, 6.8vw, 96px);
  border: 1px solid #d6cbb6;
  border-radius: 23px;
  padding: clamp(24px, 4vw, 55px);
  background: linear-gradient(125deg, #eee4d1, #f6eee0 75%);
  color: #332b23;
}
.service-edition .edition-heading {
  margin: 0;
}
.service-status {
  width: fit-content;
  margin: 0 0 11px;
  border: 1px solid #cdb998;
  border-radius: 999px;
  padding: 3px 11px;
  background: #fbf5e8;
  color: #654b2d;
  font-size: 13px;
  font-weight: 700;
}
.service-description {
  border-left: 1px solid #ccbea7;
  padding-left: clamp(18px, 4vw, 49px);
}
.service-description h3 {
  margin: 0;
  font: 700 clamp(1.36rem, 2.45vw, 2.15rem)/1.23 var(--display);
}
.service-description p {
  max-width: 30em;
  margin: 9px 0 0;
  color: #5e5044;
}
@media (max-width: 880px) {
  .edition-opening {
    --hero-size: clamp(730px, 90svh, 840px);
  }
  .banner-students {
    min-height: 290px;
    margin-inline: auto;
  }
}
@media (max-width: 560px) {
  .edition-opening {
    --nav-size: 108px;
    --hero-size: clamp(680px, 88svh, 770px);
  }
  .edition-opening .top-inner {
    grid-template-rows: 57px 44px;
    gap: 0 9px;
  }
  .edition-opening .top nav {
    display: flex;
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: stretch;
    border-top: 1px solid #c2dedc3b;
    gap: 22px;
  }
  .edition-opening .top nav a, .edition-opening .top-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .edition-opening .top-cta {
    grid-area: 1 / 2;
    gap: 5px;
  }
  .edition-opening .hero {
    padding-top: 13px;
  }
  .edition-opening .hero-foot .motion-toggle, .edition-opening .banner-tabs button {
    min-height: 44px;
  }
  .banner-students {
    min-height: clamp(180px, 60vw, 275px);
    padding: 0;
  }
  .banner-students figcaption {
    padding: 11px 15px;
    font-size: 12px;
  }
  .service-edition {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .service-description {
    border-top: 1px solid #ccbea7;
    border-left: 0;
    padding: 17px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .edition-opening .banner-students img {
    animation: none;
  }
}

.edition-opening .banner-slide,
.public-practices .student-feature,
.public-practices .feature-trade,
.service-edition {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.student-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
}
.student-gallery a {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-width: 0;
  width: 100%;
  min-height: 98px;
  aspect-ratio: 1.55;
  overflow: hidden;
  border: 1px solid #56838b;
  border-radius: 12px;
  background: #102c39;
  color: #fff;
}
.student-gallery img {
  position: absolute;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 39%;
  transition: transform .3s ease;
}
.student-gallery a:hover img {
  transform: scale(1.045);
}
.student-gallery a > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px;
  padding: 21px 10px 8px;
  background: linear-gradient(transparent, #071d29f6 85%);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 720;
}
@media (max-width: 880px) {
  .edition-opening .banner-slide, .public-practices .student-feature, .public-practices .feature-trade {
    grid-template-columns: minmax(0,1fr);
  }
}
@media (max-width: 560px) {
  .service-edition {
    grid-template-columns: minmax(0,1fr);
  }
  .student-gallery {
    gap: 6px;
  }
  .student-gallery a > span {
    padding-inline: 7px;
  }
  .student-gallery a {
    min-height: 84px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .student-gallery img {
    transition: none;
  }
}

.student-gallery .student-gallery-feature {
  grid-column: 1 / -1;
  min-height: 120px;
  aspect-ratio: 3.2;
}
.student-gallery-feature img {
  object-position: center 43%;
}
.student-gallery .student-gallery-feature > span {
  font-size: clamp(13px, 1.25vw, 17px);
}
@media (max-width: 560px) {
  .student-gallery .student-gallery-feature {
    min-height: 100px;
  }
}