@import url("./styles.v156.css");

/* HSK 1 standalone listening — Learn, Part Practice, and Full Mock. */
.hsk-lis-page {
  --lis-ink: #181917;
  --lis-paper: #fbfaf6;
  --lis-line: rgba(24, 25, 23, 0.13);
  --lis-coral: #e86f4b;
  --lis-coral-soft: #fff0e9;
  --lis-green: #247a5b;
  --lis-violet: #6f55d9;
  width: min(100% - 2rem, 68rem);
  margin: 1rem auto 5rem;
  color: var(--lis-ink);
}

/* HSK 1 Day 1 pilot · v285
   One compact listen-then-speak lesson. The type scale stays deliberately
   readable in Burmese and the single licensed photo is reused throughout. */
.day1-page {
  --day1-ink: #171719;
  --day1-paper: #fffefa;
  --day1-lilac: #7652ea;
  --day1-lilac-soft: #f0ebff;
  --day1-mint: #dbf2e9;
  --day1-coral: #c65d4b;
  --day1-line: #ded9d1;
  width: min(100% - 2rem, 72rem);
  margin: 1rem auto 0;
  padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  color: var(--day1-ink);
}
.day1-header {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  width: min(100% - 2rem, 72rem);
  margin: 0 auto;
  padding: 1rem 0 .85rem;
  background: color-mix(in srgb, var(--surface, #faf8ff) 90%, transparent);
  backdrop-filter: blur(18px);
}
.day1-header > a {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid #ded9d1;
  border-radius: 50%;
  color: inherit;
  background: #fff;
}
.day1-header > div:not(.day1-header__progress) { min-width: 0; }
.day1-header span,
.day1-header b { display: block; }
.day1-header > div > span { color: #766f7d; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.day1-header > div > b { margin-top: .1rem; overflow: hidden; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.day1-header > strong { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; font-weight: 600; }
.day1-header__progress { grid-column: 1 / -1; height: .24rem; overflow: hidden; border-radius: 999px; background: #e9e5ef; }
.day1-header__progress > span { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b76a5f, #7652ea); transition: width 360ms ease; }
.day1-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .75fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  min-height: min(66rem, calc(100dvh - 13rem));
  padding: clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
  border: 1px solid var(--day1-line);
  border-radius: clamp(1.8rem, 4vw, 3.5rem);
  background:
    radial-gradient(circle at 83% 18%, rgba(118,82,234,.13), transparent 28%),
    linear-gradient(145deg, #fffefa, #f8f5ff);
  box-shadow: 0 2rem 6rem rgba(54, 43, 82, .1);
}
.day1-kicker { display: inline-flex; align-items: center; gap: .55rem; color: #786c7d; font-size: .76rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.day1-kicker i { width: .55rem; height: .55rem; border-radius: 50%; background: #c65d4b; box-shadow: 0 0 0 .4rem rgba(198,93,75,.11); }
.day1-intro h1,
.day1-complete h1 { max-width: 11ch; margin: 1.8rem 0 0; font-size: clamp(3.2rem, 7vw, 7rem); font-weight: 760; letter-spacing: -.055em; line-height: 1.13; }
.day1-intro h1 em,
.day1-complete h1 em { color: #a74739; font-family: var(--font-display, Georgia, serif); font-weight: 520; }
.day1-intro h2 { max-width: 24ch; margin: 1.1rem 0 0; color: #66616a; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.4rem, 3vw, 2.35rem); font-weight: 500; line-height: 1.25; }
.day1-intro__copy > p { max-width: 43rem; margin: 1.4rem 0 0; color: #6f6972; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 2; }
.day1-intro__facts { display: flex; gap: 0; margin-top: 2rem; border-top: 1px solid var(--day1-line); }
.day1-intro__facts > span { min-width: 6.5rem; padding: 1rem 1rem 0 0; }
.day1-intro__facts b,
.day1-intro__facts small { display: block; }
.day1-intro__facts b { font-family: var(--font-display, Georgia, serif); font-size: 1.8rem; font-weight: 600; }
.day1-intro__facts small { margin-top: .15rem; color: #8b858e; font-size: .74rem; font-weight: 700; }
.day1-intro figure { position: relative; margin: 0; }
.day1-photo { display: block; width: 100%; height: auto; object-fit: cover; }
.day1-intro figure > .day1-photo { aspect-ratio: 4 / 5; border-radius: 48% 48% 2rem 2rem; object-position: 50% center; box-shadow: 0 1.5rem 4rem rgba(51,42,68,.13); }
.day1-intro figcaption { position: absolute; right: -1rem; bottom: 1.5rem; min-width: 12rem; padding: 1rem 1.2rem; border: 1px solid rgba(222,217,209,.8); border-radius: 1.2rem; background: rgba(255,255,255,.9); box-shadow: 0 1rem 2.5rem rgba(42,34,56,.12); backdrop-filter: blur(16px); }
.day1-intro figcaption span,
.day1-intro figcaption small { display: block; }
.day1-intro figcaption span { font-size: 1.35rem; font-weight: 800; }
.day1-intro figcaption small { margin-top: .25rem; color: #827c84; font-size: .7rem; }
.day1-sequence { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--day1-line); border-radius: 1.5rem; background: #fff; }
.day1-sequence > div { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .8rem; align-items: center; }
.day1-sequence > div > .material-symbols-outlined { grid-row: 1 / 3; display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; color: #6644d2; background: var(--day1-lilac-soft); }
.day1-sequence b,
.day1-sequence small { display: block; }
.day1-sequence b { font-size: 1rem; }
.day1-sequence small { color: #88828a; font-size: .75rem; }
.day1-sequence > .material-symbols-outlined { color: #a29ba5; }
.day1-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 5rem;
  padding: 1rem 1.4rem;
  border: 0;
  border-radius: 1.5rem;
  color: #fff;
  background: var(--day1-ink);
  box-shadow: 0 1.1rem 2.5rem rgba(23,23,25,.18);
  font: inherit;
  text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.day1-primary:hover { transform: translateY(-2px); box-shadow: 0 1.4rem 3rem rgba(23,23,25,.22); }
.day1-primary span > small { display: block; margin-top: .15rem; color: rgba(255,255,255,.58); font-size: .74rem; }
.day1-primary span:first-child { font-size: 1.05rem; font-weight: 850; }
.day1-disclosure { max-width: 54rem; margin: 1rem auto 0; color: #918a93; font-size: .78rem; line-height: 1.7; text-align: center; }
.day1-phase-heading { display: grid; grid-template-columns: 4rem minmax(0,1fr) 4rem; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: clamp(1.1rem,3vw,2rem); border: 1px solid var(--day1-line); border-radius: 2rem; background: linear-gradient(135deg, #fffdf9, #f6f1ff); }
.day1-phase-heading__number { color: #9a4860; font-family: var(--font-display, Georgia, serif); font-size: 2rem; }
.day1-phase-heading small { display: block; color: #8d7181; font-size: .72rem; font-weight: 850; letter-spacing: .1em; }
.day1-phase-heading h1 { margin: .35rem 0 0; font-size: clamp(1.45rem, 3vw, 2.4rem); line-height: 1.45; }
.day1-phase-heading__icon { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 1.25rem; color: #7852e8; background: #e9e1ff; }
.day1-phase-heading--speak { background: linear-gradient(135deg, #fffdf9, #edf8f4); }
.day1-phase-heading--speak .day1-phase-heading__icon { color: #17765f; background: #dff3ec; }
.day1-task-card { padding: clamp(1.1rem, 4vw, 3rem); border: 1px solid var(--day1-line); border-radius: clamp(1.6rem,3vw,2.5rem); background: var(--day1-paper); box-shadow: 0 1.5rem 4rem rgba(53,43,74,.08); }
.day1-task-card > header { max-width: 44rem; margin: 0 auto; text-align: center; }
.day1-task-card > header h2 { margin: 0; font-size: clamp(1.2rem,2.5vw,1.75rem); line-height: 1.7; }
.day1-task-card > header p { margin: .35rem 0 0; color: #817a83; font-size: .9rem; }
.day1-task-photo,
.day1-speaking-photo { width: min(100%, 32rem); margin: 1.4rem auto; overflow: hidden; border-radius: 1.6rem; background: #eee9e4; }
.day1-task-photo .day1-photo { aspect-ratio: 16 / 10; object-position: center 42%; }
.day1-speaking-photo { width: min(100%, 24rem); }
.day1-speaking-photo .day1-photo { aspect-ratio: 16 / 9; object-position: center 42%; }
.day1-audio-button { display: flex; align-items: center; gap: .9rem; width: min(100%, 25rem); min-height: 4.6rem; margin: 1.5rem auto 0; padding: .7rem 1rem; border: 0; border-radius: 1.35rem; color: #fff; background: var(--day1-ink); font: inherit; text-align: left; }
.day1-audio-button > .material-symbols-outlined { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; color: #7550e6; background: #fff; }
.day1-audio-button span > small { display: block; margin-top: .1rem; color: rgba(255,255,255,.58); font-size: .7rem; }
.day1-audio-button.is-playing > .material-symbols-outlined { animation: day1Pulse 680ms ease-in-out infinite alternate; }
.day1-audio-button.has-played > .material-symbols-outlined { color: #166f59; }
.day1-audio-error { width: min(100%, 32rem); margin: .8rem auto 0; padding: .8rem 1rem; border-radius: 1rem; color: #9e4133; background: #fff0ec; font-size: .85rem; line-height: 1.7; text-align: center; }
.day1-choices { display: grid; gap: .65rem; width: min(100%, 38rem); margin: 1.5rem auto 0; }
.day1-choices.is-binary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.day1-choices > button { display: grid; grid-template-columns: 2.25rem minmax(0,1fr) auto; align-items: center; gap: .8rem; min-height: 5.1rem; padding: .8rem 1rem; border: 1px solid var(--day1-line); border-radius: 1.25rem; color: inherit; background: #fff; font: inherit; text-align: left; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.day1-choices > button:not(:disabled):hover { transform: translateY(-2px); border-color: #8d73df; }
.day1-choices > button > span { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: 50%; color: #7f7881; background: #f0ede8; font-size: .76rem; font-weight: 850; }
.day1-choices b,
.day1-choices small,
.day1-choices strong,
.day1-choices em { display: block; }
.day1-choices b { font-size: 1.25rem; }
.day1-choices small { margin-top: .15rem; color: #7e7781; font-size: .78rem; }
.day1-choices strong { font-size: .98rem; line-height: 1.6; }
.day1-choices em { color: #99929b; font-size: .72rem; font-style: normal; }
.day1-choices > button > i { color: #26745d; }
.day1-choices > button.is-correct { opacity: 1; border-color: #76ad99; background: #edf8f3; }
.day1-choices > button.is-wrong { opacity: 1; border-color: #d48979; background: #fff0ec; }
.day1-choices > button.is-muted { opacity: .42; }
.day1-explanation { width: min(100%, 42rem); margin: 1.4rem auto 0; padding: clamp(1rem,3vw,1.6rem); border: 1px solid #bcd9ce; border-radius: 1.5rem; background: #edf8f3; }
.day1-explanation.is-wrong { border-color: #e1b2a8; background: #fff1ed; }
.day1-explanation > header { display: flex; align-items: center; gap: .7rem; }
.day1-explanation > header > .material-symbols-outlined { color: #23735a; }
.day1-explanation.is-wrong > header > .material-symbols-outlined { color: #ad4737; }
.day1-explanation > header b,
.day1-explanation > header small { display: block; }
.day1-explanation > header small { color: #7d777e; font-size: .72rem; }
.day1-explanation__section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(23,23,25,.1); }
.day1-explanation__section > span { display: block; margin-bottom: .55rem; color: #6e6870; font-size: .74rem; font-weight: 850; letter-spacing: .05em; }
.day1-explanation__section > p { margin: 0; font-size: .96rem; line-height: 1.9; }
.day1-explanation__section.is-clue { padding: .9rem 1rem; border: 0; border-radius: 1rem; background: rgba(255,255,255,.72); }
.day1-explanation__section ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.1rem; color: #625c64; font-size: .88rem; line-height: 1.75; }
.day1-transcript__line { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .65rem; align-items: start; margin-top: .8rem; }
.day1-transcript__line:first-of-type { margin-top: 0; }
.day1-transcript__line > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; color: #fff; background: #27252a; font-size: .7rem; font-weight: 850; }
.day1-transcript__line b { display: block; font-size: 1.35rem; line-height: 1.45; }
.day1-transcript__line small { display: block; margin-top: .15rem; color: #756e78; font-size: .8rem; }
.day1-transcript__line p { margin: .25rem 0 0; font-size: .9rem; }
.day1-transcript__line p + p { margin-top: .12rem; }
.day1-transcript__line .day1-transcript__en { color: #756e78; }
.day1-transfer { margin-top: 1rem; border: 1px solid rgba(23,23,25,.12); border-radius: 1rem; background: rgba(255,255,255,.68); }
.day1-transfer summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; cursor: pointer; font-weight: 800; list-style: none; }
.day1-transfer summary::-webkit-details-marker { display: none; }
.day1-transfer p { margin: 0; padding: .2rem 1rem .6rem; line-height: 1.75; }
.day1-transfer strong { display: block; padding: .7rem 1rem; border-top: 1px solid rgba(23,23,25,.09); color: #4e38a8; }
.day1-explanation > button { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; padding: .65rem .9rem; border: 1px solid rgba(23,23,25,.15); border-radius: 999px; color: inherit; background: #fff; font: inherit; font-size: .8rem; font-weight: 800; }
.day1-nav { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); gap: .75rem; margin-top: 1rem; }
.day1-nav > button { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 4.8rem; padding: .8rem 1rem; border: 1px solid var(--day1-line); border-radius: 1.35rem; color: inherit; background: #fff; font: inherit; }
.day1-nav > button.is-primary { color: #fff; border-color: var(--day1-ink); background: var(--day1-ink); }
.day1-nav > button:disabled { opacity: .35; }
.day1-nav span > small { display: block; margin-top: .12rem; color: #918a93; font-size: .7rem; }
.day1-nav .is-primary span > small { color: rgba(255,255,255,.55); }
.day1-speaking-note { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; padding: .9rem 1rem; border-radius: 1.2rem; color: #4f4a55; background: #ece8f8; }
.day1-speaking-note > .material-symbols-outlined { color: #7154cc; }
.day1-speaking-note p { margin: 0; font-size: .86rem; line-height: 1.75; }
.day1-speaking-prompt { width: min(100%, 32rem); margin: 1rem auto 0; padding: 1rem; border-radius: 1.2rem; background: #f4f0fb; text-align: center; }
.day1-speaking-prompt > span,
.day1-speaking-prompt > b,
.day1-speaking-prompt > small,
.day1-speaking-prompt > p { display: block; }
.day1-speaking-prompt > span,
.day1-speaking-prompt div > span { color: #776f7c; font-size: .72rem; font-weight: 850; }
.day1-speaking-prompt > b { margin-top: .45rem; font-size: 1.65rem; }
.day1-speaking-prompt > small { margin-top: .15rem; color: #7c7480; }
.day1-speaking-prompt > p { margin: .4rem 0 0; }
.day1-speaking-prompt > div { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(23,23,25,.1); }
.day1-speaking-prompt > div b,
.day1-speaking-prompt > div small { display: block; }
.day1-speaking-prompt > div b { margin-top: .35rem; font-size: 1.35rem; }
.day1-speaking-prompt > div p { margin: .35rem 0 0; color: #625c68; font-size: .86rem; }
.day1-record-box { display: grid; justify-items: center; gap: .75rem; width: min(100%, 38rem); margin: 1.25rem auto 0; padding: 1.25rem; border-radius: 2rem; background: linear-gradient(145deg, #f7f3ff, #eee8ff); }
.day1-record-box [data-spk-record]:disabled,
.day1-record-box [data-spk-no-record]:disabled { opacity: .35; cursor: not-allowed; }
.day1-speak-orb { position: relative; isolation: isolate; display: flex; width: 10.5rem; aspect-ratio: 1; align-items: center; justify-content: center; flex-direction: column; gap: .55rem; padding: 1rem; border: 1px solid #6640db; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 25%, #a78bfa 0, #7c3aed 42%, #5b21b6 100%); box-shadow: 0 1.1rem 2.8rem rgba(91,33,182,.26), inset 0 1px 0 rgba(255,255,255,.34); font: inherit; font-weight: 850; cursor: pointer; transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease; }
.day1-speak-orb::before { position: absolute; z-index: -1; inset: -.4rem; border: 2px solid rgba(124,58,237,.42); border-radius: inherit; content: ''; opacity: 0; }
.day1-speak-orb > .material-symbols-outlined { font-size: 2rem; }
.day1-speak-orb > span:last-child { max-width: 7.5rem; font-size: .94rem; line-height: 1.35; text-align: center; }
.day1-speak-orb:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 1.35rem 3.2rem rgba(91,33,182,.32), inset 0 1px 0 rgba(255,255,255,.34); }
.day1-speak-orb.is-holding { transform: scale(.97); filter: saturate(1.12); }
.day1-speak-orb.is-holding::before { animation: day1SpeakRing 1.15s ease-out infinite; }
.day1-speak-clock { display: none; min-width: 4.6rem; padding: .38rem .75rem; border-radius: 999px; color: #5f40b7; background: rgba(255,255,255,.82); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .82rem; text-align: center; }
.day1-speak-orb.is-holding + .day1-speak-clock { display: block; }
.day1-speak-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.day1-take-button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.8rem; padding: .55rem .9rem; border: 1px solid rgba(91,33,182,.18); border-radius: 999px; color: #593cab; background: rgba(255,255,255,.82); font: inherit; font-size: .78rem; font-weight: 800; }
.day1-take-button:disabled { display: none; }
.day1-sound-check { width: min(100%, 38rem); margin: 1rem auto 0; padding: 1.2rem 1.3rem; border: 1px solid #cfc2f8; border-radius: 1.5rem; background: linear-gradient(145deg, #fbfaff, #f2edff); }
.day1-sound-check > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.day1-sound-check > header > span { display: inline-flex; align-items: center; gap: .45rem; color: #66547b; font-size: .82rem; font-weight: 850; }
.day1-sound-check > header > strong { color: #6336d8; font-family: var(--font-display, Georgia, serif); font-size: 1.65rem; line-height: 1; }
.day1-sound-check > p { margin: .85rem 0 0; font-size: clamp(1.45rem,4vw,2.15rem); line-height: 1.45; }
.day1-voice-feedback { width: min(100%, 38rem); margin: 1rem auto 0; }
.day1-voice-feedback [data-spk-match-score] { max-width: 15rem; font-size: .75rem; line-height: 1.35; text-align: right; }
.day1-complete { padding: clamp(1.5rem,5vw,5rem); border: 1px solid var(--day1-line); border-radius: clamp(1.8rem,4vw,3.5rem); background: radial-gradient(circle at 85% 15%, rgba(118,82,234,.13),transparent 27%), linear-gradient(145deg,#fffefa,#f6f2ff); box-shadow: 0 2rem 6rem rgba(54,43,82,.1); }
.day1-complete__mark { display: grid; width: 5.4rem; height: 5.4rem; margin-bottom: 1.5rem; place-items: center; border-radius: 1.7rem; color: #fff; background: #171719; box-shadow: 0 1rem 2.5rem rgba(23,23,25,.18); }
.day1-complete__mark .material-symbols-outlined { font-size: 2.2rem; }
.day1-complete > p { max-width: 42rem; margin: 1.2rem 0 0; color: #6f6972; font-size: 1.05rem; line-height: 1.9; }
.day1-complete__summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-top: 2rem; }
.day1-complete__summary > span { padding: 1rem; border: 1px solid var(--day1-line); border-radius: 1.2rem; background: rgba(255,255,255,.72); }
.day1-complete__summary b,
.day1-complete__summary small { display: block; }
.day1-complete__summary b { font-family: var(--font-display, Georgia, serif); font-size: 1.65rem; }
.day1-complete__summary small { margin-top: .2rem; color: #827b84; font-size: .72rem; }
.day1-complete > section { margin: 1rem 0; padding: 1rem; border-radius: 1.1rem; background: #ece8f8; }
.day1-complete > section p { margin: .35rem 0 0; color: #625c68; font-size: .86rem; line-height: 1.75; }
.day1-secondary { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.8rem; margin-top: .7rem; color: #554d59; font-weight: 800; text-decoration: none; }
@keyframes day1Pulse { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes day1SpeakRing { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.26); opacity: 0; } }

body.theme-dark .day1-page { --day1-ink: #f7f5f0; --day1-paper: #1e1f1c; --day1-line: rgba(255,255,255,.14); color: #f7f5f0; }
body.theme-dark .day1-header > a,
body.theme-dark .day1-sequence,
body.theme-dark .day1-task-card,
body.theme-dark .day1-choices > button,
body.theme-dark .day1-nav > button { color: #f7f5f0; background: #1e1f1c; }
body.theme-dark .day1-intro,
body.theme-dark .day1-complete { background: radial-gradient(circle at 85% 15%,rgba(118,82,234,.18),transparent 27%),linear-gradient(145deg,#191a17,#24202d); }
body.theme-dark .day1-phase-heading { background: linear-gradient(135deg,#1d1e1b,#282230); }
body.theme-dark .day1-nav > button.is-primary,
body.theme-dark .day1-primary { color: #191a17; background: #f7f5f0; }
body.theme-dark .day1-primary span > small,
body.theme-dark .day1-nav .is-primary span > small { color: rgba(25,26,23,.55); }
body.theme-dark .day1-speaking-prompt { background: #29252f; }
body.theme-dark .day1-record-box { background: linear-gradient(145deg,#2a2435,#33284a); }
body.theme-dark .day1-speak-clock,
body.theme-dark .day1-take-button { color: #e9e0ff; background: rgba(255,255,255,.1); }
body.theme-dark .day1-sound-check { border-color: rgba(183,157,255,.3); background: linear-gradient(145deg,#292332,#302743); }
body.theme-dark .day1-sound-check > header > span { color: #cfc3df; }
body.theme-dark .day1-sound-check > header > strong { color: #b99cff; }
body.theme-dark .day1-speaking-note,
body.theme-dark .day1-complete > section { color: #e8e2ef; background: #302943; }
body.theme-dark .day1-explanation { color: #e9f6f1; background: #21342e; }
body.theme-dark .day1-explanation.is-wrong { color: #ffede8; background: #3a2925; }
body.theme-dark .day1-explanation__section.is-clue,
body.theme-dark .day1-transfer { background: rgba(0,0,0,.18); }

@media (max-width: 640px) {
  .day1-page { width: min(100% - 1rem, 72rem); margin-top: .35rem; }
  .day1-header { width: min(100% - 1rem,72rem); }
  .day1-intro { grid-template-columns: minmax(0,1fr) 9.2rem; gap: .9rem; min-height: 0; padding: 1.15rem; border-radius: 1.7rem; }
  .day1-intro__copy { min-width: 0; }
  .day1-intro h1 { margin-top: 1rem; font-size: clamp(2.15rem,10.5vw,3.25rem); line-height: 1.22; }
  .day1-intro h2 { margin-top: .7rem; font-size: 1.18rem; }
  .day1-intro__copy > p { grid-column: 1 / -1; margin-top: .9rem; font-size: .9rem; line-height: 1.8; }
  .day1-intro__facts { grid-column: 1 / -1; margin-top: 1rem; }
  .day1-intro__facts > span { min-width: 0; flex: 1; padding-right: .4rem; }
  .day1-intro__facts b { font-size: 1.35rem; }
  .day1-intro figure > .day1-photo { aspect-ratio: 3 / 4.6; border-radius: 4rem 4rem 1rem 1rem; object-position: center; }
  .day1-intro figcaption { right: -.2rem; bottom: .4rem; min-width: 0; width: calc(100% + .4rem); padding: .6rem; border-radius: .8rem; }
  .day1-intro figcaption span { font-size: .9rem; }
  .day1-intro figcaption small { display: none; }
  .day1-sequence { gap: .35rem; padding: .7rem; }
  .day1-sequence > div { grid-template-columns: 2.5rem minmax(0,1fr); gap: .5rem; }
  .day1-sequence > div > .material-symbols-outlined { width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
  .day1-sequence b { font-size: .85rem; }
  .day1-sequence small { font-size: .62rem; }
  .day1-phase-heading { grid-template-columns: 2.7rem minmax(0,1fr) 3rem; gap: .65rem; padding: 1rem; border-radius: 1.4rem; }
  .day1-phase-heading__number { font-size: 1.4rem; }
  .day1-phase-heading__icon { width: 3rem; height: 3rem; border-radius: 1rem; }
  .day1-phase-heading h1 { font-size: 1.25rem; }
  .day1-task-card { padding: 1rem; border-radius: 1.4rem; }
  .day1-task-card > header h2 { font-size: 1.05rem; }
  .day1-task-photo { margin-top: 1rem; border-radius: 1.1rem; }
  .day1-speaking-photo { width: min(100%,20rem); margin-block: 1rem; }
  .day1-record-box { padding: 1rem; border-radius: 1.5rem; }
  .day1-speak-orb { width: 9.25rem; }
  .day1-sound-check { padding: 1rem; border-radius: 1.2rem; }
  .day1-audio-button { min-height: 4.25rem; margin-top: 1rem; }
  .day1-choices.is-binary { grid-template-columns: 1fr; }
  .day1-choices > button { min-height: 4.7rem; padding: .7rem .8rem; }
  .day1-choices strong { font-size: .92rem; }
  .day1-explanation { padding: .9rem; border-radius: 1.2rem; }
  .day1-explanation__section > p { font-size: .9rem; }
  .day1-nav { grid-template-columns: .78fr 1.35fr; gap: .55rem; }
  .day1-nav > button { min-height: 4.4rem; padding-inline: .65rem; }
  .day1-speaking-note { font-size: .8rem; }
  .day1-complete { padding: 1.2rem; border-radius: 1.7rem; }
  .day1-complete h1 { font-size: 2.45rem; }
  .day1-complete__summary { gap: .45rem; }
  .day1-complete__summary > span { padding: .75rem .55rem; }
  .day1-complete__summary b { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .day1-header__progress > span,
  .day1-primary,
  .day1-choices > button { transition: none; }
  .day1-audio-button.is-playing > .material-symbols-outlined { animation: none; }
  .day1-speak-orb,
  .day1-speak-orb::before { animation: none !important; transition: none; }
  .day1-primary:hover,
  .day1-choices > button:not(:disabled):hover,
  .day1-speak-orb:not(:disabled):hover { transform: none; }
}

.hsk-lis-header {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
}
.hsk-lis-header > a {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid var(--surface-container, #e7e3da);
  border-radius: 50%;
  color: inherit;
  background: white;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}
.hsk-lis-header > a:hover { transform: translateY(-2px); border-color: var(--lis-coral); }
.hsk-lis-header > div { min-width: 0; text-align: center; }
.hsk-lis-header > div span,
.hsk-lis-header > div b { display: block; }
.hsk-lis-header > div span { color: #8b877f; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.hsk-lis-header > div b { margin-top: 0.15rem; overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }

.hsk-lis-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4.5vw, 4rem);
  border: 1px solid var(--lis-line);
  border-radius: clamp(1.6rem, 4vw, 3rem);
  background:
    radial-gradient(circle at 86% 15%, rgba(232, 111, 75, 0.18), transparent 27%),
    linear-gradient(140deg, #fffdf8 0%, #f9f0ec 100%);
  box-shadow: 0 1.8rem 5rem rgba(73, 44, 33, 0.1);
}
.hsk-lis-kicker { display: flex; align-items: center; gap: 0.75rem; color: #77645e; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.hsk-lis-kicker i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--lis-coral); box-shadow: 0 0 0 0.38rem rgba(232, 111, 75, 0.12); }
.hsk-lis-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; margin-top: 2.25rem; }
.hsk-lis-intro__grid > span { color: rgba(232, 111, 75, 0.13); font-size: clamp(6rem, 18vw, 13rem); font-weight: 700; line-height: 0.78; }
.hsk-lis-intro h1 { max-width: 14ch; margin: 0; font-size: clamp(2.25rem, 5.4vw, 4.8rem); font-weight: 780; line-height: 1.28; letter-spacing: -0.045em; }
.hsk-lis-intro h2 { margin: 0.8rem 0 0; color: #69645e; font-family: var(--font-display, Georgia, serif); font-size: clamp(1.5rem, 3vw, 2.55rem); font-weight: 520; letter-spacing: -0.035em; }
.hsk-lis-intro p { max-width: 46rem; margin: 1.3rem 0 0; color: #68635e; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.85; }
.hsk-lis-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 2.5rem 0 1.5rem; border-block: 1px solid var(--lis-line); }
.hsk-lis-facts > span { padding: 1rem; border-right: 1px solid var(--lis-line); text-align: center; }
.hsk-lis-facts > span:last-child { border-right: 0; }
.hsk-lis-facts b,
.hsk-lis-facts small { display: block; }
.hsk-lis-facts b { font-family: var(--font-display, Georgia, serif); font-size: clamp(1.6rem, 3vw, 2.5rem); }
.hsk-lis-facts small { margin-top: 0.15rem; color: #857f78; font-size: 0.72rem; letter-spacing: 0.04em; }
.hsk-lis-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 28rem);
  min-height: 4.6rem;
  padding: 0.85rem 1.4rem;
  border: 0;
  border-radius: 1.4rem;
  color: white;
  background: var(--lis-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 1rem 2.2rem rgba(24, 25, 23, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hsk-lis-primary:hover { transform: translateY(-2px); box-shadow: 0 1.2rem 2.8rem rgba(24, 25, 23, 0.21); }
.hsk-lis-primary > span:first-child,
.hsk-lis-primary > small { display: block; }
.hsk-lis-primary > span:first-child { font-size: 1.05rem; font-weight: 800; }
.hsk-lis-primary > small { grid-column: 1; color: rgba(255, 255, 255, 0.64); font-size: 0.78rem; }
.hsk-lis-primary > .material-symbols-outlined { grid-row: 1 / span 2; grid-column: 2; }

.hsk-lis-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1.5rem; }
.hsk-lis-parts article,
.hsk-lis-result__parts article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; min-height: 5.4rem; padding: 0.9rem 1rem; border: 1px solid var(--lis-line); border-radius: 1.35rem; background: white; }
.hsk-lis-parts article > span,
.hsk-lis-result__parts article > span { color: var(--lis-coral); font-family: var(--font-display, Georgia, serif); font-size: 1.15rem; }
.hsk-lis-parts b,
.hsk-lis-parts small,
.hsk-lis-result__parts b,
.hsk-lis-result__parts small { display: block; }
.hsk-lis-parts b,
.hsk-lis-result__parts b { font-size: 0.94rem; }
.hsk-lis-parts small,
.hsk-lis-result__parts small { margin-top: 0.2rem; color: #8a857e; font-size: 0.74rem; }
.hsk-lis-parts strong { color: #8e8982; }
.hsk-lis-note { display: flex; align-items: center; gap: 0.5rem; margin: 1.2rem 0 0; color: #8a857e; font-size: 0.78rem; }
.hsk-lis-note .material-symbols-outlined { font-size: 1.05rem; }

.hsk-lis-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.8rem; margin-bottom: 1rem; padding: 0.3rem 0.4rem; }
.hsk-lis-progress > div:first-child span,
.hsk-lis-progress > div:first-child b { display: block; }
.hsk-lis-progress > div:first-child span { color: var(--lis-coral); font-size: 0.75rem; font-weight: 850; letter-spacing: 0.08em; }
.hsk-lis-progress > div:first-child b { margin-top: 0.2rem; font-size: 0.94rem; }
.hsk-lis-progress > strong { font-family: var(--font-display, Georgia, serif); font-size: 2rem; font-weight: 600; }
.hsk-lis-progress > strong small { color: #9b968f; font-family: var(--font-body, sans-serif); font-size: 0.78rem; }
.hsk-lis-progress > time { justify-self: end; padding: 0.45rem 0.75rem; border-radius: 999px; color: #8e3524; background: var(--lis-coral-soft); font-size: 0.9rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.hsk-lis-progress__track { grid-column: 1 / -1; height: 0.38rem; overflow: hidden; border-radius: 999px; background: #ebe8e2; }
.hsk-lis-progress__track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lis-coral), #efaa68); transition: width 360ms ease; }

.hsk-lis-task { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--lis-line); border-radius: clamp(1.5rem, 4vw, 2.4rem); background: var(--lis-paper); box-shadow: 0 1.4rem 4rem rgba(38, 34, 29, 0.08); }
.hsk-lis-task > header { max-width: 46rem; }
.hsk-lis-part-badge { display: inline-flex; padding: 0.42rem 0.7rem; border-radius: 999px; color: #a5452b; background: var(--lis-coral-soft); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; }
.hsk-lis-task h1 { margin: 1rem 0 0; font-size: clamp(1.65rem, 3.5vw, 2.7rem); line-height: 1.45; }
.hsk-lis-task header p { margin: 0.55rem 0 0; color: #6f6a64; font-size: 1rem; line-height: 1.75; }
.hsk-lis-task header small { display: block; margin-top: 0.2rem; color: #9a958e; line-height: 1.5; }
.hsk-lis-play { display: flex; align-items: center; gap: 0.85rem; width: min(100%, 24rem); min-height: 4.6rem; margin: 2rem auto 0; padding: 0.8rem 1rem; border: 0; border-radius: 1.35rem; color: white; background: var(--lis-ink); font: inherit; text-align: left; transition: transform 180ms ease, opacity 180ms ease; }
.hsk-lis-play:not(:disabled):hover { transform: translateY(-2px); }
.hsk-lis-play > .material-symbols-outlined { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; color: var(--lis-ink); background: white; }
.hsk-lis-play b,
.hsk-lis-play small { display: block; }
.hsk-lis-play b { font-size: 0.98rem; }
.hsk-lis-play small { margin-top: 0.15rem; color: rgba(255, 255, 255, 0.58); font-size: 0.72rem; }
.hsk-lis-play.is-playing .material-symbols-outlined { animation: hskLisPulse 700ms ease-in-out infinite alternate; }
.hsk-lis-play:disabled { opacity: 0.46; }
.hsk-lis-audio-error { margin: 0.8rem auto 0; color: #b34234; font-size: 0.82rem; text-align: center; }

.hsk-lis-single-picture { display: grid; width: min(100%, 26rem); min-height: 15rem; margin: 1.5rem auto; place-items: center; border: 1px solid var(--lis-line); border-radius: 1.8rem; background: white; }
.hsk-lis-single-picture > .material-symbols-outlined { color: #3e3d39; font-size: clamp(5rem, 16vw, 9rem); font-variation-settings: 'FILL' 0, 'wght' 300; }
.hsk-lis-single-picture small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hsk-lis-truefalse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: min(100%, 32rem); margin: 0 auto; }
.hsk-lis-truefalse button,
.hsk-lis-picture-choices button,
.hsk-lis-text-choices button { border: 1px solid var(--lis-line); color: inherit; background: white; font: inherit; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.hsk-lis-truefalse button:not(:disabled):hover,
.hsk-lis-picture-choices button:not(:disabled):hover,
.hsk-lis-text-choices button:not(:disabled):hover { transform: translateY(-2px); border-color: var(--lis-coral); }
.hsk-lis-truefalse button { display: grid; min-height: 7rem; place-items: center; padding: 1rem; border-radius: 1.3rem; }
.hsk-lis-truefalse .material-symbols-outlined { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; color: var(--lis-coral); background: var(--lis-coral-soft); }
.hsk-lis-truefalse b,
.hsk-lis-truefalse small { display: block; }
.hsk-lis-truefalse b { margin-top: 0.55rem; }
.hsk-lis-truefalse small { color: #928d86; font-size: 0.72rem; }
.hsk-lis-picture-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.8rem; }
.hsk-lis-picture-choices button { position: relative; display: grid; min-height: clamp(9rem, 20vw, 13rem); place-items: center; padding: 1.1rem; border-radius: 1.5rem; }
.hsk-lis-picture-choices button > span { position: absolute; top: 0.75rem; left: 0.8rem; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: 50%; color: #827d76; background: #f2efe9; font-size: 0.76rem; font-weight: 800; }
.hsk-lis-picture-choices button > i { color: #393a36; font-size: clamp(3.3rem, 9vw, 6rem); font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 300; }
.hsk-lis-picture-choices button > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hsk-lis-picture-choices button > b { font-size: clamp(1.2rem, 3vw, 2rem); }
.hsk-lis-text-choices { display: grid; gap: 0.7rem; width: min(100%, 38rem); margin: 1.8rem auto 0; }
.hsk-lis-text-choices button { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: 0.8rem; min-height: 4.8rem; padding: 0.75rem 1rem; border-radius: 1.25rem; text-align: left; }
.hsk-lis-text-choices button > span { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: 50%; color: #746f68; background: #f1eee8; font-size: 0.76rem; font-weight: 800; }
.hsk-lis-text-choices button > b { font-size: 1.45rem; }
.hsk-lis-text-choices button > div { min-width: 0; }
.hsk-lis-text-choices button > div small,
.hsk-lis-text-choices button > div b { display: block; }
.hsk-lis-text-choices button > div small { margin-bottom: 0.18rem; color: #8b867f; font-size: 0.76rem; }
.hsk-lis-text-choices button > div b { font-size: 1.45rem; }
.hsk-lis-truefalse button.is-correct,
.hsk-lis-picture-choices button.is-correct,
.hsk-lis-text-choices button.is-correct { opacity: 1; border-color: #7bb49d; background: #ecf7f2; }
.hsk-lis-truefalse button.is-wrong,
.hsk-lis-picture-choices button.is-wrong,
.hsk-lis-text-choices button.is-wrong { opacity: 1; border-color: #dc9180; background: #fff0ec; }
.hsk-lis-truefalse button.is-selected,
.hsk-lis-picture-choices button.is-selected,
.hsk-lis-text-choices button.is-selected { border-color: var(--lis-violet); background: #f2efff; box-shadow: 0 0 0 3px rgba(111, 85, 217, 0.12); }
.hsk-lis-truefalse button.is-muted,
.hsk-lis-picture-choices button.is-muted,
.hsk-lis-text-choices button.is-muted { opacity: 0.42; }

.hsk-lis-evidence { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.8rem; margin-top: 1.2rem; padding: 1rem; border-radius: 1.2rem; background: #eef6f1; }
.hsk-lis-evidence.is-wrong { background: #fff0ec; }
.hsk-lis-evidence > .material-symbols-outlined { color: var(--lis-green); }
.hsk-lis-evidence.is-wrong > .material-symbols-outlined { color: #b54434; }
.hsk-lis-evidence b,
.hsk-lis-evidence small { display: block; }
.hsk-lis-evidence small { margin-top: 0.1rem; color: #7f7a73; }
.hsk-lis-evidence__transcript,
.hsk-lis-evidence__explanation { grid-column: 1 / -1; padding-top: 0.8rem; border-top: 1px solid rgba(24, 25, 23, 0.08); }
.hsk-lis-evidence__transcript > span,
.hsk-lis-evidence__explanation > span { display: block; margin-bottom: 0.35rem; color: #77716b; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.04em; }
.hsk-lis-evidence__transcript p,
.hsk-lis-evidence__explanation p { margin: 0; }
.hsk-lis-evidence__transcript p { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.65; }
.hsk-lis-evidence__explanation p { color: #3f453f; font-size: 0.98rem; line-height: 1.85; }
.hsk-lis-nav { display: grid; grid-template-columns: 1fr 1.35fr; gap: 0.75rem; margin-top: 1rem; }
.hsk-lis-nav button { display: flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 4.6rem; padding: 0.8rem 1rem; border: 1px solid var(--lis-line); border-radius: 1.35rem; color: inherit; background: white; font: inherit; }
.hsk-lis-nav button.is-primary { color: white; border-color: var(--lis-ink); background: var(--lis-ink); }
.hsk-lis-nav button:disabled { opacity: 0.35; }
.hsk-lis-nav button span > small { display: block; margin-top: 0.1rem; color: #928e87; font-size: 0.7rem; }
.hsk-lis-nav button.is-primary span > small { color: rgba(255, 255, 255, 0.55); }

.hsk-lis-result { padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--lis-line); border-radius: clamp(1.7rem, 4vw, 3rem); background: linear-gradient(145deg, #fffdf8, #f6f0ff); box-shadow: 0 1.8rem 5rem rgba(49, 40, 75, 0.1); }
.hsk-lis-result__score { display: flex; align-items: flex-end; gap: 0.7rem; margin: 2rem 0 1.3rem; }
.hsk-lis-result__score > strong { font-family: var(--font-display, Georgia, serif); font-size: clamp(5rem, 15vw, 10rem); font-weight: 520; line-height: 0.75; }
.hsk-lis-result__score > span { color: #7f7a83; font-size: 1.35rem; }
.hsk-lis-result__score small { display: block; margin-top: 0.4rem; font-size: 0.78rem; }
.hsk-lis-result h1 { max-width: 20ch; margin: 1.5rem 0 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.35; }
.hsk-lis-result > p { margin: 0.65rem 0 0; color: #7f7a83; }
.hsk-lis-result__parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.hsk-lis-result__parts article > strong { font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; }
.hsk-lis-result__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 1.5rem; }
.hsk-lis-result__actions button,
.hsk-lis-result__actions a { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 4.5rem; padding: 0.8rem 1rem; border: 1px solid var(--lis-line); border-radius: 1.3rem; color: inherit; background: white; font: inherit; font-weight: 800; text-decoration: none; }
.hsk-lis-result__actions a { color: white; border-color: var(--lis-ink); background: var(--lis-ink); }
.hsk-lis-result__note { display: block; margin-top: 1rem; color: #97928a; text-align: center; }

/* Corrected HSK 1 listening information architecture. */
.hsk-lis-intro--v2 { margin-bottom: 1rem; }
.hsk-lis-intro--v2 .hsk-lis-intro__grid {
  grid-template-columns: minmax(0, 1fr) 9rem;
  align-items: center;
}
.hsk-lis-intro--v2 h1 {
  max-width: 21ch;
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  line-height: 1.34;
}
.hsk-lis-intro--v2 .hsk-lis-intro__grid > span {
  justify-self: end;
  font-size: clamp(6rem, 11vw, 9rem);
}
.hsk-lis-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.hsk-lis-mode-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  min-height: 21rem;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--lis-line);
  border-radius: 1.8rem;
  color: var(--lis-ink);
  background: white;
  font: inherit;
  text-align: left;
  box-shadow: 0 1rem 3rem rgba(38, 34, 29, 0.06);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.hsk-lis-mode-card:hover { transform: translateY(-3px); border-color: rgba(232, 111, 75, 0.55); box-shadow: 0 1.4rem 3.4rem rgba(38, 34, 29, 0.11); }
.hsk-lis-mode-card.is-featured { color: white; border-color: var(--lis-ink); background: var(--lis-ink); }
.hsk-lis-mode-card__number { color: #aaa49d; font-family: var(--font-display, Georgia, serif); font-size: 1.15rem; }
.hsk-lis-mode-card > .material-symbols-outlined:not(:last-child) { display: grid; width: 3.2rem; height: 3.2rem; margin: 1.3rem 0 1.6rem; place-items: center; border-radius: 1rem; color: #a5452b; background: var(--lis-coral-soft); }
.hsk-lis-mode-card b,
.hsk-lis-mode-card strong,
.hsk-lis-mode-card small,
.hsk-lis-mode-card em { display: block; }
.hsk-lis-mode-card b { font-size: 1.13rem; line-height: 1.55; }
.hsk-lis-mode-card strong { margin-top: 0.15rem; color: #6c6761; font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; font-weight: 550; }
.hsk-lis-mode-card small { margin-top: 1rem; color: #66615b; font-size: 0.86rem; line-height: 1.75; }
.hsk-lis-mode-card em { margin-top: 0.25rem; color: #99938c; font-size: 0.72rem; font-style: normal; line-height: 1.5; }
.hsk-lis-mode-card > i { justify-self: end; margin-top: 1.2rem; font-style: normal; }
.hsk-lis-mode-card.is-featured strong,
.hsk-lis-mode-card.is-featured small { color: rgba(255,255,255,0.76); }
.hsk-lis-mode-card.is-featured em,
.hsk-lis-mode-card.is-featured .hsk-lis-mode-card__number { color: rgba(255,255,255,0.48); }

.hsk-lis-section-heading { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.1rem; align-items: start; margin-bottom: 1.1rem; padding: clamp(1.3rem, 4vw, 2.4rem); border: 1px solid var(--lis-line); border-radius: 2rem; background: linear-gradient(135deg, #fffdf9, #f8f2ec); }
.hsk-lis-section-heading > button { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border: 1px solid var(--lis-line); border-radius: 50%; color: inherit; background: white; }
.hsk-lis-section-heading span { color: var(--lis-coral); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.hsk-lis-section-heading h1 { margin: 0.35rem 0 0; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.4; }
.hsk-lis-section-heading p { max-width: 45rem; margin: 0.5rem 0 0; color: #746e68; line-height: 1.75; }
.hsk-lis-part-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.hsk-lis-part-grid > button { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; min-height: 9rem; padding: 1.2rem; border: 1px solid var(--lis-line); border-radius: 1.6rem; color: inherit; background: white; font: inherit; text-align: left; transition: transform 180ms ease, border-color 180ms ease; }
.hsk-lis-part-grid > button:hover { transform: translateY(-2px); border-color: var(--lis-coral); }
.hsk-lis-part-grid > button > span { color: var(--lis-coral); font-family: var(--font-display, Georgia, serif); font-size: 1.35rem; }
.hsk-lis-part-grid b,
.hsk-lis-part-grid strong,
.hsk-lis-part-grid small { display: block; }
.hsk-lis-part-grid b { font-size: 1rem; line-height: 1.6; }
.hsk-lis-part-grid strong { margin-top: 0.12rem; color: #77716b; font-size: 0.78rem; }
.hsk-lis-part-grid small { margin-top: 0.65rem; color: #969089; font-size: 0.75rem; line-height: 1.55; }

.hsk-lis-auto-player { display: flex; align-items: center; gap: 0.9rem; width: min(100%, 25rem); min-height: 4.6rem; margin: 2rem auto 0; padding: 0.8rem 1rem; border-radius: 1.35rem; color: white; background: var(--lis-ink); }
.hsk-lis-auto-player > .material-symbols-outlined { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 1rem; color: var(--lis-coral); background: white; animation: hskLisPulse 700ms ease-in-out infinite alternate; }
.hsk-lis-auto-player.is-ready > .material-symbols-outlined { color: var(--lis-green); animation: none; }
.hsk-lis-auto-player b,
.hsk-lis-auto-player small { display: block; }
.hsk-lis-auto-player small { margin-top: 0.15rem; color: rgba(255,255,255,0.58); font-size: 0.72rem; }
.hsk-lis-audio-retry { width: min(100%, 28rem); margin: 0.9rem auto 0; padding: 0.9rem; border-radius: 1rem; color: #9f3f30; background: #fff0ec; text-align: center; }
.hsk-lis-audio-retry p { margin: 0; font-size: 0.82rem; line-height: 1.6; }
.hsk-lis-audio-retry button { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; padding: 0.55rem 0.85rem; border: 1px solid #d98d7c; border-radius: 999px; color: inherit; background: white; font: inherit; font-size: 0.78rem; font-weight: 800; }

.hsk-lis-scene { display: block; width: 100%; height: auto; color: #e6dfd6; }
.hsk-lis-single-picture { position: relative; width: min(100%, 30rem); min-height: 0; padding: 0.7rem; overflow: hidden; }
.hsk-lis-single-picture .hsk-lis-scene { max-height: 20rem; }
.hsk-lis-picture-choices button { padding: 0.55rem; overflow: hidden; }
.hsk-lis-picture-choices button > span { z-index: 2; background: rgba(255,255,255,0.92); box-shadow: 0 0.35rem 1rem rgba(40,35,30,0.1); }
.hsk-lis-picture-choices button .hsk-lis-scene { width: 100%; max-height: 12rem; }
.hsk-lis-picture-choices.is-shared-bank { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hsk-lis-picture-choices.is-shared-bank button { min-height: 9rem; }
.hsk-lis-bank-note { max-width: 42rem; margin: 1.3rem auto 0; color: #7b756e; font-size: 0.82rem; line-height: 1.65; text-align: center; }

.hsk-lis-nav.is-mock { grid-template-columns: 1fr; }
.hsk-lis-nav.is-mock > button { width: min(100%, 32rem); justify-self: center; }
.hsk-lis-review { margin-top: 1.2rem; border: 1px solid var(--lis-line); border-radius: 1.35rem; background: white; }
.hsk-lis-review summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; font-weight: 800; list-style: none; }
.hsk-lis-review summary::-webkit-details-marker { display: none; }
.hsk-lis-review > div { display: grid; gap: 0; border-top: 1px solid var(--lis-line); }
.hsk-lis-review article { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.8rem; padding: 1rem; border-bottom: 1px solid var(--lis-line); }
.hsk-lis-review article:last-child { border-bottom: 0; }
.hsk-lis-review article > span { color: var(--lis-coral); font-size: 0.72rem; font-weight: 850; }
.hsk-lis-review p { margin: 0; font-size: 1.1rem; line-height: 1.6; }
.hsk-lis-review small { display: block; margin-top: 0.3rem; color: #77716b; }
.hsk-lis-review .hsk-lis-review__explanation { margin: 0.7rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--lis-line); color: #57524c; font-size: 0.9rem; line-height: 1.75; }
.hsk-lis-review .hsk-lis-review__explanation b { display: block; margin-bottom: 0.2rem; color: #8d4935; font-size: 0.72rem; letter-spacing: 0.04em; }
.hsk-lis-perfect { display: flex; align-items: center; gap: 0.55rem; margin: 1.2rem 0 0; padding: 1rem; border-radius: 1.2rem; color: #26725a; background: #ecf7f2; font-weight: 800; }
.hsk-lis-result__actions button:last-child { color: white; border-color: var(--lis-ink); background: var(--lis-ink); }

body.theme-dark .hsk-lis-page { --lis-ink: #f6f4ee; --lis-paper: #181916; --lis-line: rgba(255,255,255,0.13); --lis-coral-soft: #3e2923; color: #f6f4ee; }
body.theme-dark .hsk-lis-intro,
body.theme-dark .hsk-lis-section-heading { background: linear-gradient(140deg, #1b1c19, #29211f); }
body.theme-dark .hsk-lis-mode-card,
body.theme-dark .hsk-lis-part-grid > button,
body.theme-dark .hsk-lis-task,
body.theme-dark .hsk-lis-single-picture,
body.theme-dark .hsk-lis-truefalse button,
body.theme-dark .hsk-lis-picture-choices button,
body.theme-dark .hsk-lis-text-choices button,
body.theme-dark .hsk-lis-review,
body.theme-dark .hsk-lis-result__actions button { color: #f6f4ee; background: #20211e; }
body.theme-dark .hsk-lis-mode-card.is-featured,
body.theme-dark .hsk-lis-auto-player,
body.theme-dark .hsk-lis-result__actions button:last-child { color: #181917; background: #f6f4ee; }
body.theme-dark .hsk-lis-mode-card.is-featured strong,
body.theme-dark .hsk-lis-mode-card.is-featured small { color: rgba(24,25,23,0.72); }
body.theme-dark .hsk-lis-mode-card.is-featured em,
body.theme-dark .hsk-lis-mode-card.is-featured .hsk-lis-mode-card__number { color: rgba(24,25,23,0.5); }
body.theme-dark .hsk-lis-auto-player small { color: rgba(24,25,23,0.62); }
body.theme-dark .hsk-lis-auto-player > .material-symbols-outlined { background: #262722; }
body.theme-dark .hsk-lis-result { background: linear-gradient(145deg, #1b1c19, #241f2e); }
body.theme-dark .hsk-lis-evidence__explanation p,
body.theme-dark .hsk-lis-review .hsk-lis-review__explanation { color: rgba(246,244,238,0.82); }

.spk-finish[data-spk-finish] { max-width: 42rem; margin-inline: auto; }
.spk-finish[data-spk-finish] > p { max-width: 38rem; line-height: 1.7; }

@keyframes hskLisPulse { from { transform: scale(0.92); } to { transform: scale(1.07); } }

@media (max-width: 640px) {
  .hsk-lis-page { width: min(100% - 1rem, 68rem); margin-top: 0.35rem; }
  .hsk-lis-header { padding-inline: 0.65rem; }
  .hsk-lis-intro__grid { grid-template-columns: 1fr; gap: 0; }
  .hsk-lis-intro__grid > span { position: absolute; top: 4rem; right: -0.5rem; font-size: 7rem; }
  .hsk-lis-intro h1 { max-width: 11ch; font-size: clamp(2rem, 10vw, 3rem); }
  .hsk-lis-facts { grid-template-columns: repeat(2, 1fr); }
  .hsk-lis-facts > span:nth-child(2) { border-right: 0; }
  .hsk-lis-facts > span:nth-child(-n + 2) { border-bottom: 1px solid var(--lis-line); }
  .hsk-lis-parts,
  .hsk-lis-result__parts { grid-template-columns: 1fr; }
  .hsk-lis-picture-choices { gap: 0.45rem; }
  .hsk-lis-picture-choices button { min-height: 8.5rem; padding: 0.7rem; }
  .hsk-lis-picture-choices button > i { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .hsk-lis-nav { grid-template-columns: 0.8fr 1.4fr; }
  .hsk-lis-nav button { min-height: 4.25rem; padding-inline: 0.65rem; }
  .hsk-lis-result__actions { grid-template-columns: 1fr; }
  .hsk-lis-modes,
  .hsk-lis-part-grid { grid-template-columns: 1fr; }
  .hsk-lis-intro--v2 .hsk-lis-intro__grid { grid-template-columns: 1fr; }
  .hsk-lis-intro--v2 h1 { max-width: 15ch; font-size: clamp(2rem, 8.8vw, 2.75rem); }
  .hsk-lis-intro--v2 .hsk-lis-intro__grid > span { top: 4.5rem; right: -0.4rem; font-size: 6.2rem; }
  .hsk-lis-mode-card { min-height: 17rem; }
  .hsk-lis-section-heading { grid-template-columns: 2.8rem minmax(0, 1fr); padding: 1rem; }
  .hsk-lis-section-heading > button { width: 2.7rem; height: 2.7rem; }
  .hsk-lis-part-grid > button { min-height: 8.2rem; }
  .hsk-lis-picture-choices.is-shared-bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsk-lis-picture-choices.is-shared-bank button { min-height: 7.7rem; }
  .hsk-lis-progress > time { grid-row: 1; grid-column: 2; }
  .hsk-lis-progress > strong { grid-row: 2; grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .hsk-lis-header > a,
  .hsk-lis-primary,
  .hsk-lis-play,
  .hsk-lis-truefalse button,
  .hsk-lis-picture-choices button,
  .hsk-lis-text-choices button,
  .hsk-lis-progress__track > span { transition: none; }
  .hsk-lis-play.is-playing .material-symbols-outlined { animation: none; }
  .hsk-lis-mode-card,
  .hsk-lis-part-grid > button { transition: none; }
  .hsk-lis-auto-player > .material-symbols-outlined { animation: none; }
}
.flashcard-navigation {
  display: grid;
  width: min(calc(100% - 3rem), 42rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .15rem auto .35rem;
}
.flashcard-navigation-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border: 2px solid #0b6bff;
  border-radius: 999px;
  background: #fff;
  color: #0b6bff;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -20px rgba(11, 107, 255, .9);
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}
.flashcard-navigation-button.is-next { background: #0b6bff; color: #fff; }
.flashcard-navigation-button:not(:disabled):active { transform: scale(.98); }
.flashcard-navigation-button:disabled { cursor: not-allowed; opacity: .34; box-shadow: none; }
.flashcard-navigation-button .material-symbols-outlined { font-size: 1.25rem; }
.dark .flashcard-navigation-button.is-previous { background: #1f2230; }

@media (max-width: 420px) {
  .flashcard-navigation { width: calc(100% - 2rem); gap: .55rem; }
  .flashcard-navigation-button { min-height: 3rem; padding-inline: .75rem; font-size: .82rem; }
}

/* HSK 1 Day 1 — compact real-photo listen-and-speak prototype. */
.ls-context-card {
  display: grid;
  grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  margin-top: 1.4rem;
  padding: 0.8rem;
  border: 1px solid var(--ls-line);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.78);
}
.ls-context-photo,
.ls-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
  border-radius: 1rem;
}
.ls-context-copy { align-self: center; padding: 0.45rem; }
.ls-context-copy > span {
  display: block;
  color: #756d83;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}
.ls-context-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.8rem;
}
.ls-context-words > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.05rem 0.55rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.9rem;
  background: #f4f1fb;
}
.ls-context-words b { grid-row: 1 / span 2; font-size: 1.25rem; }
.ls-context-words small { color: var(--ls-violet); font-size: 0.68rem; }
.ls-context-words span { color: #6f6975; font-size: 0.78rem; }
.ls-question h3 { margin: 1rem 0 0; color: var(--ls-ink); font-size: 1.05rem; line-height: 1.65; }
.ls-question-instruction { margin: 0.15rem 0 0; color: #817c87; font-size: 0.78rem; line-height: 1.5; }
.ls-question-photo { width: min(100%, 30rem); margin-top: 0.9rem; }
.ls-question-photo .ls-photo { aspect-ratio: 16 / 10; min-height: 0; }
.ls-choice-grid button b,
.ls-choice-grid button small { display: block; }

/* Google account button: neutral treatment with Google's approved four-colour G. */
.google-auth-button {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 0.65rem 1rem;
  border: 1px solid #747775;
  border-radius: 0.875rem;
  background: #fff;
  color: #1f1f1f;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.google-auth-button:hover {
  border-color: #1f1f1f;
  background: #f8fafd;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.18);
}
.google-auth-button:focus-visible {
  outline: 3px solid rgba(26, 115, 232, 0.25);
  outline-offset: 2px;
}
.google-auth-button:disabled { cursor: wait; opacity: 0.62; }
.google-auth-logo { display: block; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; }
.google-auth-copy { display: grid; gap: 0.0625rem; text-align: left; line-height: 1.25; }
.google-auth-copy strong { font-family: Arial, sans-serif; font-size: 0.875rem; font-weight: 500; }
.google-auth-copy small { color: #5f6368; font-size: 0.7rem; font-weight: 650; }
.ls-choice-grid button small { margin-top: 0.15rem; color: #8b8590; font-size: 0.72rem; }
.ls-choice-grid--text { grid-template-columns: 1fr; }
.ls-choice-grid--text button {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(0, 1fr);
  gap: 0.12rem 1rem;
  align-items: center;
  min-height: 5.5rem;
  padding: 0.9rem 1rem;
  text-align: left;
}
.ls-choice-grid--text .ls-choice-zh { grid-row: 1 / span 2; font-size: 1.35rem; }
.ls-choice-grid--text .ls-choice-pinyin { color: var(--ls-violet); font-size: 0.75rem; font-weight: 760; }
.ls-choice-grid--text b { font-size: 0.9rem; line-height: 1.55; }
.ls-choice-grid--photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-choice-grid--binary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls-choice-grid .ls-photo-choice {
  position: relative;
  min-height: 0;
  padding: 0.35rem;
  overflow: hidden;
}
.ls-choice-grid .ls-photo-choice:disabled { opacity: 1; filter: saturate(0.72); }
.ls-choice-grid .ls-photo-choice.is-correct,
.ls-choice-grid .ls-photo-choice.is-wrong { filter: none; }
.ls-photo-choice__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.7rem;
}
.ls-photo-choice > .material-symbols-outlined {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
}
.ls-photo-choice.is-correct > .material-symbols-outlined { color: white; background: #258064; }
.ls-evidence-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; margin-top: 0.75rem; }
.ls-evidence-line + .ls-evidence-line { padding-top: 0.75rem; border-top: 1px solid rgba(111, 85, 217, 0.14); }
.ls-evidence-line > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: white; background: var(--ls-violet); font-size: 0.68rem; font-weight: 850; }
.ls-evidence-line p { margin: 0; font-size: 1.35rem; }
.ls-evidence-line small,
.ls-evidence-line strong { display: block; margin-top: 0.15rem; }
.ls-evidence-line small { color: var(--ls-violet); font-size: 0.74rem; }
.ls-evidence-line strong { color: #696371; font-size: 0.82rem; line-height: 1.55; }
.ls-evidence .ls-explanation-my { margin: 0.9rem 0 0; padding-top: 0.85rem; border-top: 1px solid rgba(111, 85, 217, 0.14); font-size: 0.92rem; line-height: 1.75; }
.ls-evidence .ls-explanation-en { margin: 0.25rem 0 0; color: #78717f; font-size: 0.78rem; line-height: 1.6; }
.spk-scene img { object-fit: cover; }
.spk-match-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}
.spk-match-comparison > div {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(111, 85, 217, 0.14);
  border-radius: 0.9rem;
  background: rgba(111, 85, 217, 0.055);
}
.spk-match-comparison small { display: block; color: #777080; font-size: 0.7rem; font-weight: 780; }
.spk-match-comparison p { margin: 0.4rem 0 0; font-size: 1.25rem; line-height: 1.45; overflow-wrap: anywhere; }

body.theme-dark .ls-context-card,
body.theme-dark .ls-question { background: rgba(29, 28, 32, 0.86); }
body.theme-dark .ls-context-words > div { background: #292630; }
body.theme-dark .ls-context-words span,
body.theme-dark .ls-question-instruction,
body.theme-dark .ls-evidence-line strong,
body.theme-dark .ls-evidence .ls-explanation-en { color: #bbb4c1; }

/* Bilingual Madmi account entrance and dedicated auth pages. */
.auth-shell {
  width: min(100%, 36rem);
  margin-inline: auto;
}
.madmi-auth-choice {
  display: flex;
  width: min(100%, 34rem);
  min-height: calc(100dvh - 10rem);
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4rem, 12vh, 7rem);
}
.madmi-auth-choice > img {
  display: block;
  width: min(22rem, 82vw);
  height: auto;
  aspect-ratio: 1250 / 460;
  object-fit: contain;
}
.madmi-auth-choice-logo-fallback {
  font-family: var(--font-display, sans-serif);
  font-size: clamp(3.25rem, 15vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
}
.madmi-auth-choice-actions {
  display: grid;
  width: 100%;
  gap: 1rem;
}
.madmi-auth-choice-primary,
.madmi-auth-choice-secondary {
  display: flex;
  min-height: 5.15rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 2px solid #1c1f1d;
  border-radius: 1.4rem;
  box-shadow: 0 .4rem 0 #1c1f1d;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.madmi-auth-choice-primary {
  background: #1c1f1d;
  color: #fff;
}
.madmi-auth-choice-secondary {
  background: #fffefa;
  color: #1c1f1d;
}
.madmi-auth-choice-primary:active,
.madmi-auth-choice-secondary:active {
  transform: translateY(.25rem);
  box-shadow: 0 .15rem 0 #1c1f1d;
}
.madmi-auth-choice-primary span:first-child,
.madmi-auth-choice-secondary span:first-child {
  display: grid;
  gap: .18rem;
  text-align: left;
}
.madmi-auth-choice-primary strong,
.madmi-auth-choice-secondary strong {
  font-size: 1.05rem;
  font-weight: 800;
}
.madmi-auth-choice-primary small,
.madmi-auth-choice-secondary small {
  font-size: .78rem;
  font-weight: 650;
  opacity: .78;
}
.madmi-auth-choice-primary > .material-symbols-outlined {
  color: #c5fa42;
}
.madmi-auth-form-logo {
  display: block;
  width: min(13.5rem, 62vw);
  height: auto;
  aspect-ratio: 1250 / 460;
  object-fit: contain;
}
body.theme-dark .madmi-auth-choice-secondary {
  border-color: #f4f3ed;
  background: #1d2020;
  color: #f8f7f1;
  box-shadow: 0 .4rem 0 #f4f3ed;
}

@media (max-width: 420px) {
  .madmi-auth-choice { min-height: calc(100dvh - 9rem); gap: 3.75rem; }
  .madmi-auth-choice > img { width: min(19rem, 82vw); }
  .madmi-auth-choice-primary,
  .madmi-auth-choice-secondary { min-height: 4.85rem; }
}

@media (max-width: 640px) {
  .ls-listening-step { padding: 1rem; border-radius: 1.35rem; }
  .ls-context-card { grid-template-columns: 1fr; }
  .ls-context-photo { min-height: 0; aspect-ratio: 4 / 5; object-position: center 38%; }
  .ls-question-photo .ls-photo { aspect-ratio: 4 / 5; object-position: center 38%; }
  .spk-task-panel .spk-scene { aspect-ratio: 4 / 5; }
  .spk-task-panel .spk-scene img { object-position: center 38%; }
  .ls-context-words { gap: 0.4rem; }
  .ls-context-words > div { padding: 0.62rem; }
  .ls-question { padding: 1rem; }
  .ls-choice-grid--text button { grid-template-columns: 1fr; gap: 0.08rem; min-height: 0; }
  .ls-choice-grid--text .ls-choice-zh { grid-row: auto; }
  .spk-match-comparison { grid-template-columns: 1fr; }
  .ls-choice-grid--photos { gap: 0.4rem; }
  .ls-photo-choice > .material-symbols-outlined { right: 0.5rem; bottom: 0.5rem; width: 1.7rem; height: 1.7rem; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-choice-grid button,
  .ls-audio-button { transition: none; }
}

/* Whole-word HSK stroke writing. Stroke JSON remains lazy and only the active
   canvas is mounted; the character row is lightweight text/CSS. */
.hanzi-word-card-action {
  display: grid;
  grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  border: 1px solid var(--color-surface-container, #e6e4dc);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--color-primary, #0867f2) 6%, white);
  padding: .75rem .85rem;
  color: var(--color-text-main, #181917);
}
.hanzi-word-card-action__chars {
  display: grid;
  grid-template-columns: repeat(var(--hanzi-count), minmax(0, 1fr));
  gap: .18rem;
}
.hanzi-word-card-action__chars span {
  display: grid;
  place-items: center;
  min-width: 1.65rem;
  min-height: 2.1rem;
  border-radius: .55rem;
  background: white;
  font-family: var(--font-chinese, sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 .12rem .35rem rgba(16, 24, 40, .08);
}
.hanzi-word-card-action__label { min-width: 0; }
.hanzi-word-card-action__label strong,
.hanzi-word-card-action__label small { display: block; }
.hanzi-word-card-action__label strong { font-size: .82rem; }
.hanzi-word-card-action__label small { margin-top: .16rem; color: var(--color-text-sub, #73766f); font-size: .68rem; }

.hanzi-word-writing {
  width: min(100%, 43rem);
  margin: 0 auto;
  padding: .25rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
}
.hanzi-word-writing__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin: .25rem 0 1rem;
}
.hanzi-word-writing__eyebrow {
  color: var(--color-outline, #747870);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hanzi-word-writing__intro h1 {
  margin-top: .25rem;
  font-size: clamp(2.55rem, 12vw, 4.4rem);
  font-weight: 850;
  line-height: 1;
}
.hanzi-word-writing__pinyin {
  display: block;
  margin-top: .35rem;
  color: var(--color-text-sub, #747870);
  font-size: .95rem;
}
.hanzi-word-writing__meaning {
  max-width: 12rem;
  text-align: right;
}
.hanzi-word-writing__meaning > span,
.hanzi-word-writing__meaning > strong,
.hanzi-word-writing__meaning > small { display: block; }
.hanzi-word-writing__meaning > span { color: var(--color-outline, #747870); font-size: .66rem; font-weight: 700; }
.hanzi-word-writing__meaning > strong { margin-top: .25rem; font-size: .82rem; line-height: 1.35; }
.hanzi-word-writing__meaning > small { margin-top: .4rem; color: #15945d; font-size: .68rem; font-weight: 800; }
.hanzi-word-writing__meaning .material-symbols-outlined { margin-right: .15rem; font-size: .85rem; vertical-align: -.15rem; }
.hanzi-word-writing__practice-card {
  border: 1px solid var(--color-surface-container, #e4e3dc);
  border-radius: 1.8rem;
  background: var(--color-surface, #fff);
  padding: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(21, 25, 31, .08);
}
.hanzi-word-writing__round-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hanzi-word-writing__round-row h2 { margin-top: .18rem; font-size: 1.02rem; font-weight: 800; }
.hanzi-word-writing__practice-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: .4rem;
}
.hanzi-word-writing__sound-toggle {
  display: inline-flex;
  min-height: 2.15rem;
  align-items: center;
  gap: .25rem;
  border: 1px solid var(--color-surface-container, #dfded7);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface-container, #f2f1ed) 45%, white);
  padding: .42rem .62rem;
  color: var(--color-text-sub, #747870);
  font-size: .64rem;
  font-weight: 800;
}
.hanzi-word-writing__sound-toggle .material-symbols-outlined { font-size: 1rem; }
.hanzi-word-writing__sound-toggle.is-on {
  border-color: color-mix(in srgb, #15945d 32%, transparent);
  background: color-mix(in srgb, #15945d 11%, white);
  color: #117a4c;
}
.hanzi-word-writing__mode-badge {
  flex: none;
  border-radius: 999px;
  background: #e9f3ff;
  padding: .45rem .72rem;
  color: #075fdb;
  font-size: .68rem;
  font-weight: 800;
}
.hanzi-word-writing__mode-badge.is-plain { background: #eef0eb; color: #575b54; }
@media (max-width: 390px) {
  .hanzi-word-writing__sound-toggle [data-hanzi-sound-label] { display: none; }
  .hanzi-word-writing__sound-toggle { width: 2.15rem; justify-content: center; padding: .4rem; }
}
.hanzi-word-selector {
  display: grid;
  grid-template-columns: repeat(var(--hanzi-count), minmax(0, 1fr));
  gap: .45rem;
  margin: .9rem 0;
}
.hanzi-word-selector__tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 4.25rem;
  border: 1.5px solid var(--color-surface-container, #e3e1da);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-surface-container, #f2f1ec) 52%, white);
  color: var(--color-text-main, #181917);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hanzi-word-selector__tile span { font-size: clamp(1.9rem, 10vw, 3rem); font-weight: 850; line-height: 1; }
.hanzi-word-selector__tile small {
  position: absolute;
  right: .42rem;
  bottom: .28rem;
  color: var(--color-outline, #7b7e77);
  font-size: .56rem;
  font-weight: 800;
}
.hanzi-word-selector__tile.is-active {
  border-color: var(--color-primary, #0867f2);
  background: color-mix(in srgb, var(--color-primary, #0867f2) 10%, white);
  transform: translateY(-.08rem);
  box-shadow: 0 .35rem .9rem rgba(8, 103, 242, .12);
}
.hanzi-word-selector__tile.is-complete::after {
  content: 'check';
  position: absolute;
  top: .28rem;
  right: .34rem;
  color: #16a467;
  font-family: 'Material Symbols Outlined';
  font-size: .9rem;
  font-variation-settings: 'FILL' 1;
}
.hanzi-word-writing__canvas-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 20rem);
  margin: 0 auto;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1.5px solid var(--color-surface-container, #deddd6);
  border-radius: 1.45rem;
  background-color: color-mix(in srgb, var(--color-surface-container, #f4f3ef) 45%, white);
  background-image:
    linear-gradient(90deg, transparent 49.75%, rgba(108,112,105,.12) 50%, transparent 50.25%),
    linear-gradient(transparent 49.75%, rgba(108,112,105,.12) 50%, transparent 50.25%),
    linear-gradient(45deg, transparent 49.75%, rgba(108,112,105,.07) 50%, transparent 50.25%),
    linear-gradient(-45deg, transparent 49.75%, rgba(108,112,105,.07) 50%, transparent 50.25%);
  touch-action: none;
}
.hanzi-word-writer-target { width: 100%; height: 100%; display: grid; place-items: center; }
.hanzi-word-writer-target svg { max-width: 100%; max-height: 100%; touch-action: none; }
.hanzi-word-writing__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  background: color-mix(in srgb, var(--color-surface, #fff) 88%, transparent);
  color: var(--color-text-sub, #747870);
  font-size: .72rem;
  font-weight: 700;
}
.hanzi-word-writing__loading[hidden],
.hanzi-word-writing__next[hidden] {
  display: none;
}
.hanzi-word-writing__loading .material-symbols-outlined { color: var(--color-primary, #0867f2); font-size: 1.7rem; }
.hanzi-word-writing__status {
  min-height: 1.25rem;
  margin: .75rem auto 0;
  color: var(--color-text-sub, #747870);
  text-align: center;
  font-size: .72rem;
  line-height: 1.45;
}
.hanzi-word-writing__status[data-tone='mistake'] { color: #d73f45; }
.hanzi-word-writing__status[data-tone='complete'] { color: #138a58; font-weight: 800; }
.hanzi-word-writing__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .8rem;
}
.hanzi-word-control {
  display: flex;
  min-width: 0;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  border: 1px solid var(--color-surface-container, #dfded7);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-surface-container, #f2f1ed) 40%, white);
  color: var(--color-text-main, #181917);
  font-size: .68rem;
  font-weight: 800;
}
.hanzi-word-control .material-symbols-outlined { font-size: 1.05rem; }
.hanzi-word-control:disabled { opacity: .42; }
.hanzi-word-writing__next {
  display: flex;
  width: 100%;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .65rem;
  border-radius: 1rem;
  background: var(--color-primary, #0867f2);
  padding: .75rem 1rem;
  color: white;
  font-size: .8rem;
  font-weight: 850;
  box-shadow: 0 .35rem 0 color-mix(in srgb, var(--color-primary, #0867f2) 58%, #111 42%);
}
.hanzi-word-writing__help {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-top: .8rem;
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--color-primary, #0867f2) 7%, white);
  padding: .9rem 1rem;
  color: var(--color-text-sub, #747870);
  font-size: .72rem;
  line-height: 1.5;
}
.hanzi-word-writing__help .material-symbols-outlined { color: var(--color-primary, #0867f2); font-size: 1.15rem; }

body.theme-dark .hanzi-word-card-action,
body.theme-dark .hanzi-word-writing__practice-card,
body.theme-dark .hanzi-word-writing__canvas-wrap,
body.theme-dark .hanzi-word-control,
body.theme-dark .hanzi-word-writing__help { background-color: #1b1d22; border-color: #343740; }
body.theme-dark .hanzi-word-card-action__chars span,
body.theme-dark .hanzi-word-selector__tile { background: #24272e; }
body.theme-dark .hanzi-word-selector__tile.is-active { background: #142a4d; }
body.theme-dark .hanzi-word-writing__loading { background: rgba(27,29,34,.9); }

@media (max-width: 420px) {
  .hanzi-word-writing { padding-inline: .9rem; }
  .hanzi-word-writing__intro { align-items: flex-start; }
  .hanzi-word-writing__meaning { max-width: 9rem; }
  .hanzi-word-selector__tile { min-height: 3.8rem; border-radius: .85rem; }
  .hanzi-word-control { flex-direction: column; gap: .08rem; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hanzi-word-selector__tile { transition: none; }
}