/* OneOneTyping v6 — marketing pages (home, membership).
 *
 * A faithful port of andromeld.catchingnow.com/zh-Hans. Every value here was
 * measured off the live page (computed styles + its own stylesheet) rather than
 * eyeballed, so the rhythm matches: the 1072px column, the 168/208px hero
 * padding, the clamp() type scale, the 5fr/6fr split rows, the sticky-head FAQ,
 * the 560px closing CTA band and the whole responsive ladder at
 * 920 / 640 / 560px.
 *
 * Two deliberate departures:
 *
 *   1. The accent is OneOneTyping's light blue rather than andromeld's green.
 *      The *relationships* are preserved exactly — accent → accent-soft at 10%
 *      alpha, a lighter same-hue glow plus a contrasting teal glow, a darker
 *      button fill with a 45%-alpha shadow at the same hue.
 *   2. The body font is andromeld's own system stack, not Quicksand. That is
 *      what makes the page read the way it does, and it renders Chinese with
 *      PingFang SC natively. The app pages keep Quicksand (typing.com style).
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --mk-bg: #ffffff;
  --mk-bg-soft: #f3f7fa;          /* his #f3f7f4, one hue over */
  --mk-ink: #101012;              /* headings — his are near-black */
  --mk-ink-2: #56565e;            /* body — his exact value */
  --mk-ink-3: #6f7378;
  --mk-line: rgba(0, 0, 0, 0.11);
  --mk-line-soft: rgba(0, 0, 0, 0.07);

  /* The accent, matched to andromeld's green on L* and contrast rather than
     picked by eye — see the derivation in tokens.css. */
  --mk-accent: #0d76c9;
  --mk-accent-soft: #eaf4fd;
  --mk-accent-line: rgba(13, 118, 201, 0.24);
  --mk-glow-a: rgba(63, 165, 240, 0.16);
  --mk-glow-b: rgba(90, 130, 230, 0.12);
  --mk-btn-bg: #0c6dbd;           /* 5.33:1 with white */
  --mk-btn-ink: #ffffff;
  --mk-btn-shadow: rgba(12, 109, 189, 0.45);
  --mk-heading: #101012;

  --mk-nav-bg: rgba(255, 255, 255, 0.8);
  --mk-shot-border: rgba(0, 0, 0, 0.1);
  --mk-shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    0 28px 60px -28px rgba(10, 20, 15, 0.3);
  /* the same column as the app pages (tokens.css --max, with --gutter inside), so the nav and every
     page's content line up whichever stylesheet the page uses */
  --mk-maxw: var(--max);

  /* The system stack andromeld uses — no webfont anywhere on the page. */
  --mk-font: -apple-system, system-ui, 'SF Pro Text', 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', Helvetica, Arial,
    sans-serif;
  --mk-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}


html[data-theme='dark'] {
  --mk-bg: #0a0a0b;
  --mk-bg-soft: #101519;
  --mk-ink: #f4f4f5;
  --mk-ink-2: #a6a6ad;
  --mk-ink-3: #929299;
  --mk-line: rgba(255, 255, 255, 0.13);
  --mk-line-soft: rgba(255, 255, 255, 0.08);

  --mk-accent: #3d9ae4;
  --mk-accent-soft: rgba(63, 159, 232, 0.14);
  --mk-accent-line: rgba(63, 159, 232, 0.28);
  --mk-glow-a: rgba(63, 159, 232, 0.14);
  --mk-glow-b: rgba(90, 130, 230, 0.1);
  --mk-btn-bg: #1a659e;
  --mk-btn-ink: #ffffff;
  --mk-btn-shadow: rgba(0, 0, 0, 0.6);
  --mk-heading: #f4f4f5;

  --mk-nav-bg: rgba(12, 12, 13, 0.78);
  --mk-shot-border: rgba(255, 255, 255, 0.14);
  --mk-shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 32px 70px -30px rgba(0, 0, 0, 0.9);
}

/* Marketing pages opt out of the app font and page floor. */
body.mk {
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: var(--mk-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

.mk .wrap {
  max-width: var(--mk-maxw);
}

/* -------------------------------------------------------------- nav bar */

.mk .nav {
  height: 56px;
  background: var(--mk-nav-bg);
  border-bottom: 1px solid var(--mk-line-soft);
}

.mk .nav-inner {
  justify-content: space-between;
}

.mk .brand {
  gap: 9px;
  color: var(--mk-ink);
  font-size: 16px;
  font-weight: 800;
}

.mk .brand-mark {
  width: 34px;
  height: 34px;
}

.mk .nav-links {
  gap: 22px;
}

.mk .nav-links a {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--mk-ink-2);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}

.mk .nav-links a:hover {
  color: var(--mk-ink);
  background: none;
}

.mk .nav-links a[aria-current='page'] {
  color: var(--mk-ink);
  font-weight: 650;
  background: none;
}

/* 会员 is the one accented nav item, the same gold pill as on every other page */
.mk .nav-links a.nav-vip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: var(--fw-bold);
}

.mk .nav-links a.nav-vip:hover,
.mk .nav-links a.nav-vip[aria-current='page'] {
  background: var(--gold-dark);
  color: var(--gold-ink);
}

.mk .nav-icon-btn {
  width: 30px;
  height: 30px;
  border-color: var(--mk-line);
  color: var(--mk-ink-2);
}

.mk .nav-avatar {
  border-color: var(--mk-line);
  color: var(--mk-ink);
  font-weight: 500;
}

/* ------------------------------------------------------------- the hero */

.hero {
  position: relative;
  padding: 168px 0 84px;
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 640px;
  background: radial-gradient(
    900px 460px at 50% -120px,
    var(--mk-glow-a),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 940px;
  margin: 0 auto 24px;
  color: var(--mk-heading);
  font-size: clamp(34px, 6.2vw, 62px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: normal;
  text-wrap: balance;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero .tagline {
  max-width: 820px;
  margin: 0 auto 38px;
  color: var(--mk-ink-2);
  font-size: clamp(19px, 2.5vw, 25px);
  font-weight: 550;
  line-height: 1.42;
  text-wrap: balance;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both;
}

.hero-alt-link {
  margin-top: 0;
  color: var(--mk-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--mk-line);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.hero-alt-link:hover {
  color: var(--mk-accent);
  text-decoration-color: var(--mk-accent);
}

.hero-requirements {
  margin: 20px auto;
  padding: 0 16px;
  color: var(--mk-ink-2);
  font-size: 14px;
}

.hero-points {
  max-width: 1080px;
  margin: 72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  text-align: left;
  animation: rise 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s both;
}

.hero-points p {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--mk-line);
  color: var(--mk-ink-2);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.5;
}

.hero-points strong {
  display: block;
  margin-bottom: 5px;
  color: var(--mk-ink);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}

.hero-points span {
  display: block;
  text-wrap: balance;
}

/* --------------------------------------------------------- store button */

.appstore-btn {
  --btn-radius: 22px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 12px 24px 12px 20px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--mk-btn-bg);
  color: var(--mk-btn-ink);
  text-align: left;
  box-shadow: 0 10px 26px -14px var(--mk-btn-shadow);
  transition: box-shadow 0.24s, filter 0.24s;
}

.appstore-btn::after {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: calc(var(--btn-radius) + 16px);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
      95% 120% at 42% 46%,
      color-mix(in srgb, var(--mk-btn-bg) 34%, transparent),
      transparent 64%
    ),
    radial-gradient(84% 105% at 62% 58%, var(--mk-glow-b), transparent 74%);
}

.appstore-btn:hover {
  color: var(--mk-btn-ink);
  box-shadow: 0 16px 34px -17px var(--mk-btn-shadow);
  filter: saturate(1.04);
}

.appstore-btn:hover::after {
  opacity: 0.52;
  animation: appstoreGlowDrift 3.8s cubic-bezier(0.45, 0, 0.35, 1) infinite
    alternate;
}

.appstore-btn > * {
  position: relative;
}

.appstore-btn svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  flex: 0 0 auto;
}

.appstore-btn small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  opacity: 0.75;
}

.appstore-btn b {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}

@keyframes appstoreGlowDrift {
  0% {
    transform: translate3d(-4px, 1px, 0) scale(0.98);
  }
  45% {
    transform: translate3d(4px, -2px, 0) scale(1.01);
  }
  100% {
    transform: translate3d(-2px, 2px, 0) scale(0.99);
  }
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes capSwap {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- hero video carousel */

.hero-shot {
  position: relative;
  margin-top: 60px;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.38s both;
}

.hero-shot::before {
  content: '';
  position: absolute;
  inset: 10% -3% -8%;
  pointer-events: none;
  background: radial-gradient(
      58% 55% at 28% 62%,
      var(--mk-glow-a),
      transparent 66%
    ),
    radial-gradient(52% 50% at 76% 38%, var(--mk-glow-b), transparent 66%);
}

.shot-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 1920 / 1246;
  overflow: hidden;
  border: 1px solid var(--mk-shot-border);
  border-radius: clamp(8px, 1.4vw, 14px);
  background: var(--mk-bg-soft);
  box-shadow: var(--mk-shot-shadow);
  touch-action: pan-y;
  user-select: none;
  cursor: pointer;
  will-change: transform;
}

.shot-frame:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 3px;
}

.shot-frame.is-dragging {
  cursor: grabbing;
}

.shot-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.22, 1);
}

.shot-frame.is-dragging .shot-track {
  transition: none;
}

.shot-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

.shot-slide video,
.shot-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Placeholder shown until the real videos land. Drop a <video> or <img>
   inside .shot-slide and this is simply never rendered. */
.shot-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: linear-gradient(
    150deg,
    var(--mk-accent-soft),
    var(--mk-bg-soft) 52%,
    var(--mk-glow-b)
  );
}

.shot-ph .ph-keys {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 620px;
}

.shot-ph .ph-keys b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--mk-line);
  border-radius: 9px;
  background: var(--mk-bg);
  color: var(--mk-ink-2);
  font-family: var(--mk-mono);
  font-size: 17px;
  font-weight: 500;
  box-shadow: 0 2px 0 var(--mk-line);
}

.shot-ph .ph-keys b.on {
  border-color: var(--mk-accent);
  color: var(--mk-accent);
  box-shadow: 0 2px 0 var(--mk-accent);
}

.shot-ph .ph-keys b.ok {
  border-color: #7fc47a;
  color: #4f8a49;
  box-shadow: 0 2px 0 #7fc47a;
}

.shot-ph .ph-note {
  color: var(--mk-ink-3);
  font-family: var(--mk-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shot-playpause {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(16, 18, 17, 0.44);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background-color 0.2s;
}

.shot-playpause svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.shot-playpause .pp-pause {
  display: none;
}

.shot-playpause.is-playing .pp-pause {
  display: block;
}

.shot-playpause.is-playing .pp-play {
  display: none;
}

.shot-playpause:hover {
  background: rgba(16, 18, 17, 0.62);
}

.shot-expand {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 18, 17, 0.4);
  color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.shot-expand svg {
  width: 14px;
  height: 14px;
}

.shot-captions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 18px;
  margin-top: 26px;
  text-align: left;
}
/* 六段说明在平板宽度挤成一行四个字：放不下就排成三列两行 */
@media (max-width: 1000px) { .shot-captions { grid-template-columns: repeat(3, 1fr); row-gap: 6px; } }

.shot-cap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: baseline;
  padding: 13px 2px 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  color: var(--mk-ink-3);
  cursor: pointer;
  transition: color 0.3s;
}

.shot-cap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--mk-line-soft);
}

.shot-cap:hover {
  color: var(--mk-ink-2);
}

.shot-cap.is-on {
  color: var(--mk-ink);
}

.cap-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}

.cap-bar i {
  position: absolute;
  inset: 0;
  background: var(--mk-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.cap-idx {
  font-style: normal;
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.3s;
}

.shot-cap.is-on .cap-idx {
  color: var(--mk-accent);
}

.cap-label {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}

/* Mobile collapses the three captions into one line of text. */
.shot-caption-current {
  display: none;
  margin-top: 14px;
  color: var(--mk-ink-2);
  font-size: 14px;
}

.shot-caption-current.swap {
  animation: capSwap 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------- sections */

.sec {
  padding: 42px 0 84px;
  scroll-margin-top: 56px;
}

.sec-rule {
  border-top: 1px solid var(--mk-line-soft);
}

.sec-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.sec h2 {
  color: var(--mk-heading);
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: normal;
  text-wrap: balance;
}

.sec-lead {
  margin-top: 14px;
  color: var(--mk-ink-2);
  font-size: 16.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
}

.kicker i {
  font-style: normal;
  color: var(--mk-ink-3);
  letter-spacing: 0.06em;
}

.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 32px;
}

.col h3 {
  margin-bottom: 7px;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

.col p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

.col .chip-icon,
.hp-tint .chip-icon {
  display: flex;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--mk-accent);
  transition: transform 0.25s;
}

.col .chip-icon svg,
.hp-tint .chip-icon svg {
  width: 24px;
  height: 24px;
}

.col:hover .chip-icon {
  transform: translateY(-2px);
}

.sec-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px 64px;
  align-items: start;
}

.sec-grid .sec-head {
  margin-bottom: 0;
}

.split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 72px;
  align-items: center;
}

.split .sec-head {
  margin-bottom: 0;
}

.split-media img,
.split-media video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--mk-shot-border);
  box-shadow: var(--mk-shot-shadow);
  background: var(--mk-bg-soft);
}

.ticks {
  display: grid;
  gap: 14px;
}

.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  color: var(--mk-ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.ticks li b {
  color: var(--mk-ink);
  font-weight: 600;
}

.ticks svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--mk-accent);
  flex: 0 0 auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  padding: 28px 26px;
  border: 1px solid var(--mk-line-soft);
  border-radius: 18px;
  background: var(--mk-bg-soft);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.card:hover {
  border-color: var(--mk-line);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: 7px;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

.card p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --------------------------------------------------------------- pricing */

.price-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.price-plan h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.price-plan.is-featured {
  border-top: 2px solid var(--mk-accent);
  padding-top: 18px;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.price-amt {
  color: var(--mk-ink);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.price-per {
  color: var(--mk-ink-3);
  font-size: 13.5px;
}

.price-sub {
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.price-action {
  margin-top: 20px;
}

.price-note {
  max-width: 62ch;
  margin-top: 26px;
  color: var(--mk-ink-3);
  font-size: 13px;
}

.price-compare {
  width: 100%;
  margin-top: 36px;
  border-collapse: collapse;
  text-align: left;
}

.price-compare th,
.price-compare td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line-soft);
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 400;
}

.price-compare thead th {
  color: var(--mk-ink);
  font-weight: 600;
}

.price-compare th:first-child {
  width: 58%;
}

.price-compare td:last-child,
.price-compare thead th:last-child {
  color: var(--mk-accent);
}

/* ------------------------------------------------------------------- faq */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(0, 1fr);
  gap: 32px 88px;
  align-items: start;
}

.faq-grid .sec-head {
  position: sticky;
  top: 88px;
  margin-bottom: 0;
  align-self: start;
}

.faq-list {
  max-width: 760px;
  justify-self: stretch;
}

.faq-list details {
  border-top: 1px solid var(--mk-line-soft);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--mk-line-soft);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  color: var(--mk-ink);
  font-size: 16.5px;
  font-weight: 600;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--mk-ink-3);
  transition: transform 0.25s, color 0.2s;
}

.faq-list details[open] summary svg {
  transform: rotate(135deg);
  color: var(--mk-accent);
}

.faq-list details p {
  max-width: 64ch;
  padding: 0 2px 22px;
  color: var(--mk-ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}

.faq-more {
  grid-column: 2;
  max-width: 760px;
  padding: 0 2px;
  color: var(--mk-ink-2);
  font-size: 15px;
}

.faq-more a {
  color: var(--mk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- cta band */

.cta {
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 154px 0 148px;
  border-top: 1px solid var(--mk-line-soft);
  background: radial-gradient(
      900px 520px at 50% 4%,
      var(--mk-glow-a),
      transparent 74%
    ),
    var(--mk-accent-soft);
  text-align: center;
}

.cta .wrap {
  width: 100%;
}

.cta h2 {
  margin-bottom: 66px;
  color: var(--mk-heading);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.cta .hero-cta {
  margin: 0 auto;
  gap: 34px;
}

/* ---------------------------------------------------------------- footer */

.mk .footer {
  border-top: 1px solid var(--mk-line-soft);
  background: var(--mk-bg-soft);
}

/* --------------------------------------------------- marketing controls
   The marketing pages reuse the app's .btn/.chip classes, so their colours
   are re-pointed at the marketing palette here. */

.mk .btn {
  border-radius: 980px;
  font-size: 15px;
  font-weight: 600;
}

.mk .btn-ghost {
  border-color: var(--mk-line);
  color: var(--mk-ink);
  background: transparent;
}

.mk .btn-ghost:hover {
  border-color: var(--mk-accent);
  color: var(--mk-accent);
  background: var(--mk-accent-soft);
  box-shadow: none;
}

.mk .chip {
  background: var(--mk-bg-soft);
  color: var(--mk-ink-2);
}

.mk .chip-gold {
  background: var(--gold-soft);
  color: var(--gold-soft-ink);
}

.mk .chip-green {
  background: var(--green-soft);
  color: var(--green-ink);
}

/* ------------------------------------------------------------ responsive */

@media (min-width: 921px) {
  .hero {
    padding-top: 208px;
  }

  .hero h1 {
    margin-bottom: 32px;
  }

  .hero .tagline {
    margin-bottom: 50px;
  }

  .hero-points {
    margin-top: 94px;
  }

  .hero-shot {
    margin-top: 84px;
  }
}

@media (min-width: 921px) and (max-height: 820px) {
  .hero {
    padding-top: 168px;
  }

  .hero h1 {
    margin-bottom: 24px;
  }

  .hero .tagline {
    margin-bottom: 38px;
  }

  .hero-points {
    margin-top: 72px;
  }

  .hero-shot {
    margin-top: 60px;
  }
}

@media (hover: hover) {
  .shot-frame:hover .shot-playpause {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

.shot-frame.is-paused .shot-playpause {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@media (max-width: 920px) {
  .cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 28px;
  }

  .sec-grid,
  .split,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sec-grid .sec-head {
    margin-bottom: 0;
  }

  .split {
    gap: 40px;
  }

  .split.media-first-mobile .split-media {
    order: -1;
  }

  .faq-grid {
    gap: 36px;
  }

  .faq-grid .sec-head {
    position: static;
    margin-bottom: 0;
  }

  .faq-list {
    max-width: 760px;
    justify-self: stretch;
  }

  .faq-more {
    grid-column: 1;
    margin-top: -16px;
  }

  .cards,
  .cards-2,
  .price-plans {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .sec {
    padding: 34px 0 68px;
  }

  .sec-head {
    margin-bottom: 36px;
  }

  .hero {
    padding: 108px 0 68px;
  }

  .hero-points {
    margin-top: 48px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero-points p {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 640px) {
  .shot-captions {
    gap: 0 10px;
    margin-top: 20px;
  }

  .shot-cap {
    display: block;
    padding: 10px 0 12px;
  }

  .shot-cap .cap-idx,
  .shot-cap .cap-label {
    display: none;
  }

  .shot-caption-current {
    display: block;
  }

  .shot-frame {
    cursor: pointer;
  }
}

@media (max-width: 560px) {
  .cols-4 {
    grid-template-columns: 1fr;
  }

  .hero {
    text-align: left;
  }

  .hero h1 {
    margin-left: 0;
    font-size: 30px;
  }

  .hero .tagline {
    margin-left: 0;
    margin-bottom: 30px;
  }

  .hero-cta {
    align-items: flex-start;
    gap: 16px;
  }

  .hero-shot {
    margin-top: 44px;
  }

  .cta .hero-cta {
    align-items: center;
  }

  .cta {
    min-height: 0;
    padding: 90px 0 86px;
  }

  .cta h2 {
    margin-bottom: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appstore-btn:hover::after {
    animation: none;
  }
}

/* ------------------------------------------------------- member panel
   The member's own view on the membership page: status and unlocked benefits,
   not another pitch. */

.member-card {
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--mk-line);
  border-radius: 18px;
  background: var(--mk-bg);
  overflow: hidden;
}

.member-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--mk-line-soft);
  background: var(--mk-accent-soft, rgba(13, 118, 201, 0.06));
}

.member-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--blue-deep, #2470a6);
  color: #fff;
}

.member-mark svg {
  width: 24px;
  height: 24px;
}

.member-id {
  flex: 1 1 auto;
  min-width: 0;
}

.member-id b {
  display: block;
  color: var(--mk-ink);
  font-size: 17px;
  font-weight: 600;
}

.member-id span {
  display: block;
  margin-top: 2px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

.member-body {
  padding: 20px 22px 22px;
}

.member-h {
  margin-bottom: 12px;
  color: var(--mk-ink);
  font-size: 15px;
  font-weight: 600;
}

.member-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-list li {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  color: var(--mk-ink-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.member-list li b {
  color: var(--mk-ink);
  font-weight: 600;
}

.member-note {
  margin-top: 16px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .member-list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Course cards are links to the course, so the whole card is the target. */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-meta {
  display: block;
  margin-top: 10px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

/* Product previews use the same quiet surfaces as the practice workspace. */
.mk .hero { padding-top: clamp(68px, 8vw, 120px); }
.home-membership-callout { display:flex; align-items:center; gap:32px; justify-content:space-between; padding:32px; border:1px solid var(--mk-line); border-radius:20px; background:var(--mk-bg-soft); }
.home-membership-callout h3 { margin:0 0 12px; }
.home-membership-callout p { margin:0; max-width:650px; color:var(--mk-ink-2); }
.home-membership-callout .btn { flex:none; }
@media(max-width:640px) { .home-membership-callout { align-items:flex-start; flex-direction:column; padding:24px; gap:20px; } }

.product-preview { width:100%; min-height:490px; padding:28px 42px; box-sizing:border-box; background:var(--mk-bg); color:var(--mk-ink); text-align:left; }
.preview-top,.preview-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; color:var(--mk-ink-3); }
.preview-top { padding-bottom:20px; border-bottom:1px solid var(--mk-line-soft); }
.preview-top > span { display:flex; align-items:center; gap:8px; color:var(--mk-ink-2); font-weight:600; }
.preview-top i { width:7px;height:7px;background:#42a77f;border-radius:50%; }
.preview-copy { padding:26px 0 14px; }
.preview-eyebrow { font-size:12px; color:var(--mk-accent); font-weight:600; }
.preview-copy h3 { font-size:26px; margin:7px 0 10px; letter-spacing:-.6px; }
.preview-copy p { margin:0; font-size:14px; color:var(--mk-ink-2); }
.preview-passage { font:clamp(20px,3.5vw,38px)/1.6 var(--mk-mono); color:var(--mk-ink-3); padding:14px 0 20px; white-space:nowrap; }
.preview-passage > span { color:#298261; }
.preview-passage > b { color:var(--mk-ink); border-bottom:3px solid var(--mk-accent); font-weight:500; }
.preview-passage em { color:#c54251;background:rgba(220,70,90,.1);border-radius:4px; font-style:normal; }
.preview-keyboard { display:grid; gap:7px; margin:0 auto 20px; max-width:590px; }
.preview-key-row { display:flex; justify-content:center; gap:7px; }
.preview-key-row kbd { display:flex; justify-content:center; align-items:center; width:43px;height:34px;border:1px solid var(--mk-line); border-bottom-width:3px;border-radius:6px;background:var(--mk-bg-soft);font:14px var(--mk-mono);text-transform:uppercase; }
.preview-key-row kbd.is-target { color:white;background:var(--mk-accent);border-color:var(--mk-accent); }
.preview-bottom { border-top:1px solid var(--mk-line-soft);padding-top:15px; }
.preview-feedback { display:flex;align-items:center;gap:16px;padding:24px;background:var(--mk-bg-soft);border-radius:12px;margin:12px 0 30px;font-size:14px; }
.preview-feedback p { font-size:13px;color:var(--mk-ink-2);margin:5px 0 0; }
.preview-feedback kbd { margin-left:auto;font-size:26px; }
.feedback-dot { width:8px;height:8px;border-radius:50%;background:#c54251; }
.preview-bars { display:grid;gap:18px;padding:20px 0 32px; }
.preview-bars > div { display:flex;align-items:center;gap:18px;font-size:13px; }
.preview-bars kbd { width:24px;font:18px var(--mk-mono); }
.preview-bars span { height:13px;border-radius:4px;flex:1;background:var(--mk-bg-soft);overflow:hidden; }
.preview-bars i { display:block;height:100%;border-radius:4px;background:var(--mk-accent);opacity:.65; }
.preview-bars small { min-width:50px;color:var(--mk-ink-2); }
@media(max-width:640px) { .product-preview { min-height:410px;padding:20px; } .preview-copy h3 {font-size:22px;} .preview-copy p {font-size:12px;} .preview-key-row {gap:4px;} .preview-key-row kbd {width:24px;height:28px;font-size:11px;} .preview-passage {overflow:hidden;} .preview-bottom {font-size:10px;} .preview-top small {font-size:10px;} }
/* Keep every preview visible on narrow screens; its text is not a video crop. */
.shot-frame { aspect-ratio: auto; }
.product-preview { height: 100%; }
.hero-points #homeCourseCount { display: inline; font: inherit; color: inherit; }


/* ---- games collage: the first cover large, the other two beneath ---- */
.home-games {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-games a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 40px -26px rgba(16, 17, 19, 0.45);
  transition: transform 0.25s ease;
}

.home-games a:first-child {
  grid-column: 1 / -1;
}

.home-games a:hover {
  transform: translateY(-3px);
}

.home-games svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ======================================================================
   Home sections laid out after andromeld's rhythm: each section a different
   arrangement, so the page reads as a sequence, not a stack of the same box.
   ====================================================================== */

/* Big heading left, content right (andromeld Finder / Essentials). */
.hp-split {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 32px 64px;
  align-items: start;
}

.hp-split .sec-head {
  margin-bottom: 0;
}

.hp-split .sec-head h2 {
  font-size: clamp(28px, 3.8vw, 40px);
}

.hp-checks {
  grid-template-columns: 1fr 1fr;
  gap: 22px 36px;
}

.hp-note {
  margin-top: 26px;
  color: var(--mk-ink-3);
  font-size: 14px;
}

.hp-note a,
.hp-link {
  color: var(--mk-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mk-accent) 35%, transparent);
  text-underline-offset: 3px;
}

.hp-note a:hover,
.hp-link:hover {
  text-decoration-color: currentColor;
}

/* Three tinted cards (andromeld Continuity). */
.hp-tint-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.hp-tint {
  display: block;
  padding: 28px 26px 30px;
  border: 1px solid var(--mk-line-soft);
  border-radius: 18px;
  background: var(--mk-bg-soft);
  color: inherit;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}

.hp-tint:hover {
  border-color: var(--mk-line);
  transform: translateY(-2px);
}

.hp-tint .chip-icon {
  margin-bottom: 26px;
}

.hp-tint h3 {
  margin-bottom: 8px;
  color: var(--mk-ink);
  font-size: 17px;
  font-weight: 600;
}

.hp-tint p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Four columns, each ending in a link (andromeld Camera, calls). */
.hp-cols-links .col {
  display: flex;
  flex-direction: column;
}

.hp-cols-links .col p {
  flex: 1 1 auto;
}

.hp-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14.5px;
}

/* Right-hand three columns with a hairline on top (andromeld Essentials). */
.hp-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.hp-cols-3 .col {
  padding-top: 22px;
  border-top: 1px solid var(--mk-line);
}

.hp-cols-3 .col p {
  color: var(--mk-ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.kicker-new {
  align-self: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mk-accent);
  color: #fff;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.hp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Pricing: three plan columns, then a free/member table (andromeld Pricing). */
.hp-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 8px;
}

.hp-plan {
  padding-top: 20px;
  border-top: 1px solid var(--mk-line-soft);
}

.hp-plan.is-featured {
  border-top: 2px solid var(--mk-accent);
}

.hp-plan > span {
  color: var(--mk-ink-2);
  font-size: 14px;
  font-weight: 600;
}

.hp-plan b {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 6px;
  color: var(--mk-ink);
  font-size: 30px;
  font-weight: 700;
}

.hp-plan b small {
  color: var(--mk-ink-3);
  font-size: 13px;
  font-weight: 500;
}

.hp-plan p {
  color: var(--mk-ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.hp-fine {
  margin-top: 18px;
  color: var(--mk-ink-3);
  font-size: 12.5px;
}

.hp-compare {
  width: 100%;
  margin-top: 36px;
  border-collapse: collapse;
  font-size: 14px;
}

.hp-compare th {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line);
  color: var(--mk-ink);
  font-weight: 600;
  text-align: left;
}

.hp-compare th:last-child,
.hp-compare td.is-pro {
  color: var(--mk-accent);
}

.hp-compare td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mk-line-soft);
  color: var(--mk-ink-2);
}

.hp-compare td:first-child {
  color: var(--mk-ink);
  width: 50%;
}
@media (max-width: 600px) { .hp-compare td:first-child { width: 38%; } .hp-compare th, .hp-compare td { padding-left: 8px; padding-right: 8px; } }

@media (max-width: 900px) {
  .hp-split,
  .hp-checks,
  .hp-tint-cards,
  .hp-cols-3,
  .hp-plans {
    grid-template-columns: 1fr;
  }
}

/* Real screenshots in the hero frame (1920 x 1200, 16:10). */
.shot-frame {
  aspect-ratio: 16 / 10;
}

.shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.hp-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  vertical-align: 3px;
}

/* 小一 & 小零 sitting on the hero button (home.js heroDuo): the button's top
   edge is the edge they sit on (sprite row 48 of 52). */
.cta-duo {
  position: absolute;
  left: 8px;
  right: 8px;
  top: -72px;
  height: 78px;
  pointer-events: none;
  z-index: 2;
}
.cta-duo > span { position: absolute; bottom: 0; display: flex; }
.cta-duo-xiaoyi { left: 0; }
.cta-duo-xiaoling { right: 0; }
.cta-duo .xy-shadow { display: none; }
.has-duo { padding-top: 34px; }
@media (max-width: 560px) {
  .cta-duo { transform: scale(0.8); transform-origin: bottom center; }
  .has-duo { padding-top: 46px; }
}

/* ---- the site's scene language on the home page -------------------------- */
.hero > .wrap { position: relative; z-index: 1; }
.hero-scene {
  position: absolute;
  inset: 0 0 auto 0;
  height: 640px;
  background: linear-gradient(180deg, #d9edff 0%, #eef7ff 48%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
[data-theme='dark'] .hero-scene { background: linear-gradient(180deg, #16263d 0%, #121c2c 55%, rgba(0, 0, 0, 0) 100%); }
.hero-art { position: absolute; top: 110px; height: 250px; width: auto; }
.hero-art.is-left { left: max(16px, calc(50% - 700px)); }
.hero-art.is-right { right: max(16px, calc(50% - 700px)); }
@media (max-width: 1180px) { .hero-art { display: none; } }

/* Course covers (same art as the course center). */
/* Homepage courses: three tabs of compact rows (home.js courseCards). */
.hc-tabs { margin-bottom: 20px; }
/* the tab bar scrolls inside its column; without this the column grows to the bar's full width */
.hp-split > *, .hc-tabs { min-width: 0; }
.hc-tablist { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--mk-tint, #f1f5fa); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hc-tablist::-webkit-scrollbar { display: none; }
.hc-tablist button { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--mk-ink-2, #475569); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.hc-tablist button span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 12px; line-height: 20px; text-align: center; }
.hc-tablist button:hover { color: var(--mk-ink, #0f172a); }
.hc-tablist button[aria-selected='true'] { background: #fff; color: var(--accent, #0d76c9); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -6px rgba(15, 23, 42, 0.18); }
.hc-tablist button:focus-visible { outline: 2px solid var(--accent, #0d76c9); outline-offset: 2px; }
.hc-lead { margin: 14px 2px 10px; font-size: 14px; color: var(--mk-ink-3, #64748b); }
.hc-list { display: flex; flex-direction: column; gap: 8px; }
.hc-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 14px 8px 8px; border: 1px solid var(--mk-line-soft, #e8edf3); border-radius: 14px; background: #fff; color: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.hc-row:hover { color: inherit; border-color: color-mix(in srgb, var(--ca) 45%, transparent); box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ca) 90%, transparent); transform: translateY(-1px); }
.hc-step { flex: none; width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; background: var(--ca-soft); color: var(--ca-deep); font-style: normal; font-size: 13px; font-weight: 800; line-height: 24px; text-align: center; }
.hc-thumb { flex: none; width: 88px; height: 46px; border-radius: 9px; overflow: hidden; background: var(--ca-soft); }
.hc-thumb svg { display: block; width: 100%; height: 100%; }
.hc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-text b { font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-text small { font-size: 12.5px; color: var(--mk-ink-3, #64748b); }
.hc-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--ca-soft); color: var(--ca-deep); font-style: normal; font-size: 12px; font-weight: 700; }
.hc-go { flex: none; width: 16px; height: 16px; color: var(--mk-ink-3, #94a3b8); transition: transform 0.15s, color 0.15s; }
.hc-row:hover .hc-go { transform: translateX(2px); color: var(--ca-deep); }
.hc-list.is-path .hc-row:not(:last-child)::after { content: ''; position: absolute; left: 23px; bottom: -9px; width: 2px; height: 10px; background: var(--mk-line-soft, #e2e8f0); }
.hc-all { display: inline-block; margin-top: 14px; }
.hp-checks.is-compact li:first-child { display: none; }
[data-theme='dark'] .hc-row { background: var(--bg-elevated); }
[data-theme='dark'] .hc-tablist button[aria-selected='true'] { background: var(--bg-elevated); }
@media (max-width: 640px) {
  /* six tabs do not fit a phone: they keep their width and the bar scrolls sideways
     (stretching them to fit wrapped every label a character to a line) */
  .hc-tablist { width: 100%; }
  .hc-tablist button { flex: 1 0 auto; justify-content: center; padding: 0 12px; white-space: nowrap; }
  .hc-thumb { width: 64px; height: 40px; }
  .hc-tag { display: none; }
}

/* A real clip in a section (测速): the frame keeps the video's own shape. */
.shot-frame.hp-video { aspect-ratio: 16 / 10; cursor: default; }
.shot-frame.hp-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The clips' sound switch: a small pill in the frame's corner. */
.shot-sound {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px 0 11px;
  border: 0;
  border-radius: 9999px;
  background: rgba(14, 22, 40, 0.72);
  color: #fff;
  font: 700 13px var(--font-sans);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.shot-sound:hover { background: rgba(14, 22, 40, 0.86); transform: translateY(-1px); }
.shot-sound svg { width: 18px; height: 18px; }
.shot-sound .snd-on { display: none; }
.shot-sound.is-on .snd-on { display: inline; }
.shot-sound.is-on .snd-off { display: none; }
.shot-sound:not(.is-on) svg { animation: snd-nudge 2.4s var(--ease) 1.5s 3; }
@keyframes snd-nudge { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-10deg) scale(1.08); } 90% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .shot-sound:not(.is-on) svg { animation: none; } }

/* hero: two buttons side by side, no fine print */
.hero-cta.is-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cta .hero-cta.is-row { gap: 14px; }
.hero-ghost-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 22px;
  background: color-mix(in srgb, var(--mk-bg, #fff) 70%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--mk-line);
  color: var(--mk-ink); font-size: 17px; font-weight: 600; line-height: 1.15;
  transition: box-shadow 0.2s, color 0.2s, transform 0.2s;
}
.hero-ghost-btn svg { width: 22px; height: 22px; flex: none; }
.hero-ghost-btn:hover { color: var(--mk-accent); box-shadow: inset 0 0 0 1.5px var(--mk-accent); }
.hero .appstore-btn { padding: 14px 28px 14px 22px; }
.hero-points.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 920px) { .hero-points.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; } }
@media (max-width: 560px) {
  .hero-cta.is-row { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
  .hero-cta.is-row > a { justify-content: center; }
  .hero-points.is-four { grid-template-columns: 1fr; }
}

/* ======================================================= home v3 (2026-09-30)
   学·玩·比 pillars, course features, the game grid, growth cards, the
   free/member table and price cards, captions over the hero clips. */
.sec-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head.is-center .kicker { justify-content: center; }

/* captions over the hero clips (home.js captions) */
.shot-slide { position: relative; }
.shot-sub { position: absolute; left: 50%; bottom: 15%; transform: translate(-50%, 6px); max-width: 86%; margin: 0; padding: 10px 20px; border-radius: 14px; background: rgba(12, 22, 40, 0.78); color: #fff; font-size: clamp(14px, 1.9vw, 22px); font-weight: 700; line-height: 1.45; text-align: center; letter-spacing: 0.02em; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; backdrop-filter: blur(4px); }
.shot-sub.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) { .shot-sub { bottom: 16%; padding: 6px 12px; font-size: 13px; border-radius: 10px; } }

/* 学 · 玩 · 比 */
.hp-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.hp-pillar { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mk-line-soft); border-radius: 20px; background: var(--mk-bg); color: inherit; transition: transform 0.18s, box-shadow 0.18s; }
.hp-pillar:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(13, 60, 120, 0.45); color: inherit; }
.hp-pillar-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mk-bg-soft); border-bottom: 1px solid var(--mk-line-soft); }
.hp-pillar-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-pillar-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.hp-pillar-no { font-style: normal; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--mk-accent); }
.hp-pillar-body b { font-size: 19px; color: var(--mk-heading); }
.hp-pillar-body > span { color: var(--mk-ink-2); font-size: 14.5px; line-height: 1.65; }
.hp-pillar-body .hp-link { margin-top: 4px; font-style: normal; }

/* course features, under the course heading */
.hp-features { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hp-features li { display: flex; gap: 12px; align-items: flex-start; }
.hp-features svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--mk-accent-soft); color: var(--mk-accent); }
.hp-features span { display: flex; flex-direction: column; gap: 2px; color: var(--mk-ink-2); font-size: 14px; line-height: 1.5; }
.hp-features b { color: var(--mk-heading); font-size: 15px; }

/* the game grid */
.hp-games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.hp-game { grid-column: span 2; }
.hp-game { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mk-line-soft); border-radius: 16px; background: var(--mk-bg); color: inherit; transition: transform 0.16s, box-shadow 0.16s; }
.hp-game:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -24px rgba(13, 60, 120, 0.5); color: inherit; }
.hp-game.is-big { grid-column: span 3; }
.hp-game-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mk-bg-soft); }
.hp-game-cover svg, .hp-game-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-game-body { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.hp-game-body b { font-size: 15.5px; color: var(--mk-heading); padding-right: 92px; }
.hp-game-body > span { color: var(--mk-ink-3); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-game-body em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.hp-game-body em.is-free { background: #e6f6ec; color: #1f8a4c; }
.hp-game-body em.is-part { background: #fff3d6; color: #9a6a0c; }

/* 测速 · 段位 · 好友 */
.hp-grow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.hp-grow-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; transition: transform 0.16s; }
.hp-grow-card:hover { transform: translateY(-2px); color: inherit; }
.hp-grow-card > b { margin-top: 8px; font-size: 18px; color: var(--mk-heading); }
.hp-grow-card > span:last-child { color: var(--mk-ink-2); font-size: 14px; line-height: 1.65; }
.hp-grow-stat, .hp-grow-ranks, .hp-grow-duo { display: flex; align-items: center; justify-content: center; gap: 18px; height: 170px; border-radius: 18px; background: var(--mk-bg-soft); border: 1px solid var(--mk-line-soft); }
.hp-grow-card:hover .hp-grow-stat, .hp-grow-card:hover .hp-grow-ranks, .hp-grow-card:hover .hp-grow-duo { border-color: var(--mk-line); }
.hp-grow-stat { flex-wrap: wrap; align-content: center; gap: 6px 26px; }
.hp-grow-stat > span { display: flex; flex-direction: column; align-items: center; }
.hp-grow-stat b { font-size: 40px; line-height: 1; color: var(--mk-heading); font-variant-numeric: tabular-nums; }
.hp-grow-stat small { margin-top: 4px; color: var(--mk-ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.hp-grow-stat em { flex-basis: 100%; text-align: center; font-style: normal; font-size: 13px; font-weight: 800; color: #9a6a0c; }
.hp-grow-ranks { gap: 6px; padding: 0 10px; overflow: hidden; }
.hp-grow-ranks > span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hp-grow-ranks small { font-size: 11.5px; font-weight: 700; color: var(--mk-ink-3); }
.hp-grow-duo { gap: 28px; align-items: flex-end; padding-bottom: 18px; }
.hp-minis { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hp-minis li { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; }
.hp-minis svg { grid-row: span 2; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--mk-accent-soft); color: var(--mk-accent); }
.hp-minis b { font-size: 14px; color: var(--mk-heading); }
.hp-minis span { font-size: 12.5px; color: var(--mk-ink-3); line-height: 1.45; }

/* 免费与会员 */
.hp-price { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; margin-top: 30px; align-items: start; }
.hp-compare-wrap { overflow-x: auto; border: 1px solid var(--mk-line-soft); border-radius: 18px; background: var(--mk-bg); }
.hp-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.hp-compare th, .hp-compare td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--mk-line-soft); }
.hp-compare tbody tr:last-child th, .hp-compare tbody tr:last-child td { border-bottom: 0; }
.hp-compare thead th { font-size: 12.5px; color: var(--mk-ink-3); font-weight: 800; letter-spacing: 0.06em; background: var(--mk-bg-soft); }
.hp-compare thead th:last-child { color: #9a6a0c; }
.hp-compare tbody th { font-weight: 600; color: var(--mk-heading); }
.hp-compare td { color: var(--mk-ink-2); white-space: nowrap; }
.hp-compare td.is-yes { color: #1f8a4c; font-weight: 700; }
.hp-compare td:last-child { background: rgba(244, 201, 101, 0.08); }
.hp-price-cards { display: flex; flex-direction: column; gap: 14px; }
.hp-price-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--mk-line-soft); background: var(--mk-bg); color: inherit; transition: transform 0.16s; }
.hp-price-card:hover { transform: translateY(-2px); color: inherit; }
.hp-price-card b { font-size: 42px; line-height: 1.1; color: var(--mk-heading); font-variant-numeric: tabular-nums; }
.hp-price-card b small { font-size: 22px; margin-right: 2px; }
.hp-price-card b i { font-style: normal; }
.hp-price-card > span:not(.hp-price-tag) { color: var(--mk-ink-2); font-size: 13.5px; }
.hp-price-tag { font-size: 12.5px; font-weight: 800; color: var(--mk-ink-3); letter-spacing: 0.04em; }
.hp-price-tag i { font-style: normal; }
.hp-price-card em { align-self: flex-start; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #fff1c4; color: #8a5a00; }
.hp-price-card.is-founder { background: linear-gradient(160deg, #1d3767, #0e1e3f); border-color: rgba(246, 205, 110, 0.55); }
.hp-price-card.is-founder b { color: #f8dc8e; }
.hp-price-card.is-founder .hp-price-tag, .hp-price-card.is-founder > span:not(.hp-price-tag) { color: rgba(248, 220, 142, 0.82); }
.hp-price-card.is-gone { opacity: 0.55; }
.hp-price-cards .hp-fine { margin: 2px 0 0; font-size: 12.5px; color: var(--mk-ink-3); line-height: 1.6; }

@media (max-width: 960px) {
  .hp-pillars, .hp-grow { grid-template-columns: minmax(0, 1fr); }
  .hp-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-game, .hp-game.is-big { grid-column: auto; }
  .hp-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-price { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hp-games { grid-template-columns: minmax(0, 1fr); }
  .hp-game.is-big { grid-column: auto; }
  .hp-minis { grid-template-columns: minmax(0, 1fr); }
  .hp-compare th, .hp-compare td { padding: 10px 10px; font-size: 13px; }
  .hp-compare td { white-space: normal; }
}

/* the last strip under the five games: everything else, on the games page.
   It spans the whole row — a half-empty fifth cell looked like a mistake. */
.hp-game-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 24px; border: 1.5px dashed var(--mk-line); border-radius: 16px; background: var(--mk-bg-soft); color: inherit; transition: border-color 0.16s, transform 0.16s; }
.hp-game-more:hover { border-color: var(--mk-accent, #0d76c9); transform: translateY(-3px); color: inherit; }
.hp-game-more b { color: var(--mk-heading); font-size: 18px; }
.hp-game-more span { color: var(--mk-ink-3); font-size: 13.5px; line-height: 1.5; }
.hp-game-more i { margin-left: auto; align-self: center; color: var(--mk-accent, #0d76c9); }
.hp-game-more i svg { display: block; width: 22px; height: 22px; }

/* ------------------------------------------------------------ 今天
   home.js renderToday: a slim banner across the top of the hero for someone
   who has been here before. The landing under it is unchanged. */
.today { position: relative; z-index: 2; margin: 0 0 40px; text-align: left; }
.has-today .hero { padding-top: 92px; }
.tb { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 14px; border: 1px solid var(--line-soft); border-radius: 16px; background: color-mix(in srgb, var(--bg-elevated) 88%, transparent); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); }
.tb-ring { flex: none; width: 36px; height: 36px; transform: rotate(-90deg); }
.tb-ring circle { fill: none; stroke-width: 4.5; }
.tb-ring .tr-bg { stroke: var(--bg-soft); }
.tb-ring .tr-fg { stroke: var(--accent); stroke-linecap: round; }
.tb-ring.is-done .tr-fg { stroke: var(--green); }
.tb-me { display: flex; flex-direction: column; min-width: 0; }
.tb-me b { color: var(--text-strong); font-size: 14.5px; white-space: nowrap; }
.tb-me span { display: flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.tb-me span svg { width: 13px; height: 13px; color: #f08a24; }
.tb-daily { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; padding-left: 16px; border-left: 1px solid var(--line-soft); }
.tb-daily > svg { flex: none; width: 18px; height: 18px; color: #d69e2e; }
.tb-daily span { color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.tb-daily b { overflow: hidden; color: var(--text-strong); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.tb-acts { display: flex; gap: 8px; flex: none; }
.tb-acts .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tb-acts .btn svg { width: 15px; height: 15px; }
.tb-acts em { max-width: 9em; overflow: hidden; color: var(--text-dim); font-size: 12.5px; font-style: normal; text-overflow: ellipsis; }
.tb-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; }
.tb-x:hover { background: var(--bg-soft); color: var(--text-strong); }
@media (max-width: 900px) {
  .has-today .hero { padding-top: 80px; }
  .today { margin-bottom: 28px; }
  .tb { flex-wrap: wrap; gap: 10px 12px; }
  .tb-daily { order: 3; flex: 1 1 100%; margin-left: 0; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .tb-acts { order: 4; flex: 1 1 100%; }
  .tb-acts .btn { flex: 1; justify-content: center; }
  .tb-acts em { display: none; }
  .tb-x { margin-left: auto; }
}
/* the sky's keycaps and keyboard sit beside the headline, below the banner */
.has-today .hero-art { top: 170px; }
.hc-tag.is-new { background: #e5577a; color: #fff; letter-spacing: .06em; }

/* --------------------------------------------------- v6.1 秋季大更新 */
/* hero 顶上的版本条：点了跳到「这次更新了什么」 */
.hero-badge { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 auto 22px; padding: 5px 14px 5px 5px; border: 1px solid color-mix(in srgb, var(--mk-accent) 25%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--mk-bg) 80%, transparent); color: var(--mk-ink); font-size: 14.5px; font-weight: 600; backdrop-filter: blur(6px); animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: border-color 0.15s, box-shadow 0.15s; }
.hero-badge:hover { color: var(--mk-ink); border-color: var(--mk-accent); box-shadow: 0 8px 22px -14px var(--mk-accent); }
.hero-badge em { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--mk-accent); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; }
.hero-badge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-badge svg { flex: none; width: 15px; height: 15px; color: var(--mk-accent); transition: transform 0.15s; }
.hero-badge:hover svg { transform: translateX(2px); }

/* 这次更新了什么：两张大卡 + 四张小卡 */
.hp-new { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.hp-new-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border: 1px solid var(--mk-line-soft); border-radius: 18px; background: var(--mk-bg); color: inherit; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.hp-new-card:hover { color: inherit; transform: translateY(-2px); border-color: color-mix(in srgb, var(--nc) 40%, transparent); box-shadow: 0 18px 36px -26px color-mix(in srgb, var(--nc) 80%, transparent); }
.hp-new-card.is-big { grid-column: span 2; padding: 26px 28px 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--nc) 10%, var(--mk-bg)), var(--mk-bg) 70%); }
.hp-new-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in srgb, var(--nc) 14%, transparent); color: var(--nc); }
.hp-new-ico svg { width: 22px; height: 22px; }
.hp-new-card b { color: var(--mk-ink); font-size: 17px; line-height: 1.35; }
.hp-new-card.is-big b { font-size: 21px; }
.hp-new-card > span:not(.hp-new-ico) { color: var(--mk-ink-2); font-size: 14.5px; line-height: 1.6; }
.hp-new-card.is-big > span:not(.hp-new-ico) { font-size: 15.5px; }
.hp-new-card .hp-link { margin-top: auto; padding-top: 8px; color: var(--nc); }
@media (max-width: 900px) { .hp-new { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hp-new { grid-template-columns: 1fr; } .hp-new-card.is-big { grid-column: auto; } }

/* 认识小一和小零 */
.hp-meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.hp-buddy { --bc: #2f8be0; --bs: #e8f2fc; display: flex; align-items: center; gap: 22px; padding: 22px 26px 22px 18px; border: 1px solid var(--mk-line-soft); border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--bc) 9%, var(--mk-bg)), var(--mk-bg) 60%); }
.hp-buddy.is-ling { --bc: #e86096; --bs: #fdeef4; }
.hp-buddy-art { flex: none; display: grid; place-items: end center; width: 150px; height: 150px; border-radius: 24px; background: color-mix(in srgb, var(--bc) 12%, transparent); overflow: hidden; }
.hp-buddy-body { min-width: 0; flex: 1; }
.hp-buddy-name { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.hp-buddy-name b { color: var(--mk-ink); font-size: 24px; }
.hp-buddy-name em { color: var(--bc); font-style: normal; font-size: 13.5px; font-weight: 700; }
.hp-buddy-say { position: relative; min-height: 3.2em; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--mk-bg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bc) 30%, transparent); color: var(--mk-ink); font-size: 15.5px; font-weight: 550; line-height: 1.55; }
.hp-buddy-say::before { content: ''; position: absolute; left: -7px; top: 18px; width: 12px; height: 12px; background: inherit; box-shadow: -2px 2px 0 0 color-mix(in srgb, var(--bc) 30%, transparent); transform: rotate(45deg); }
.hp-buddy-voices { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-voice { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--bc) 35%, transparent); border-radius: 999px; background: var(--mk-bg); color: var(--bc); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.hp-voice svg { width: 16px; height: 16px; }
.hp-voice:hover, .hp-voice.is-playing { background: var(--bc); color: #fff; }
.hp-voice.is-playing svg { animation: hpVoicePulse 0.8s ease-in-out infinite alternate; }
.hp-voice:focus-visible { outline: 2px solid var(--bc); outline-offset: 2px; }
@keyframes hpVoicePulse { to { transform: scale(1.18); } }
@media (max-width: 900px) { .hp-meet { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hp-buddy { flex-direction: column; align-items: stretch; padding: 18px; } .hp-buddy-art { width: 100%; height: 130px; } .hp-buddy-say::before { display: none; } }

/* 首页课程列表：每类先放 6 门，其余点开 */
.hc-row.is-more { display: none; }
.hc-list.is-open .hc-row.is-more { display: flex; }
.hc-more { align-self: flex-start; margin-top: 4px; padding: 6px 4px; border: 0; background: none; color: var(--mk-accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hc-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hc-list.is-path:not(.is-open) .hc-row:has(+ .hc-row.is-more)::after { display: none; }

/* 首页视频章节 01–06：手机上只有 22px 高，点的范围上下各扩 10px（样子不变，2026-10-16） */
@media (pointer: coarse) {
  .shot-cap::after { content: ''; position: absolute; inset: -10px 0; }
}

/* 首页：学生 / 老师两个入口（教学版第②步） */
.hero-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 18px auto 0; }
.hero-who a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: color-mix(in srgb, var(--bg-elevated) 70%, transparent); color: var(--text-muted); font-size: 13.5px; white-space: nowrap; }
.hero-who a:hover { border-color: var(--line); color: var(--accent); }
.hero-who svg { width: 15px; height: 15px; }