:root {
  color-scheme: light;
  --ink: #253644;
  --muted: #566a78;
  --paper: #f2f5f7;
  --paper-deep: #e3ebef;
  --card: #fcfdfd;
  --line: #cad7df;
  --pine: #314f62;
  --pine-soft: #426a80;
  --jade: #6e9fa3;
  --gold: #8f5d12;
  --gold-dark: #6f430d;
  --gold-on-dark: #f2bd68;
  --danger: #a4413c;
  --focus: #0b70c9;
  --shadow: 0 18px 55px rgb(17 55 67 / 11%);
  --radius: 22px;
  --wrap: 1440px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-serif: Georgia, "Noto Serif", "Noto Serif SC", "Songti SC", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 9% 24%, rgb(60 126 145 / 11%), transparent 29rem),
    linear-gradient(180deg, #eef5f6 0%, var(--paper) 34rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.65;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0.7rem 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.18;
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.65rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

[lang="zh-Hans"] {
  letter-spacing: 0.02em;
}

.wrap {
  margin-inline: auto;
  max-width: var(--wrap);
  padding-left: max(clamp(18px, 4vw, 42px), env(safe-area-inset-left));
  padding-right: max(clamp(18px, 4vw, 42px), env(safe-area-inset-right));
  width: 100%;
}

.skip-link {
  background: #fff;
  color: var(--ink);
  left: 1rem;
  padding: 0.7rem 1rem;
  position: fixed;
  top: -10rem;
  z-index: 100;
}

.skip-link:focus {
  top: 1rem;
}

.hero {
  background: var(--pine);
  color: #fff;
  min-height: min(640px, 72svh);
  overflow: hidden;
  position: relative;
}

.hero__image,
.hero__veil {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hero__image {
  object-fit: cover;
}

.hero__veil {
  background:
    linear-gradient(90deg, rgb(5 34 47 / 90%) 0%, rgb(5 34 47 / 63%) 48%, rgb(5 34 47 / 12%)),
    linear-gradient(0deg, rgb(5 34 47 / 40%), transparent 45%);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(640px, 72svh);
  padding-block: 6rem 5rem;
  position: relative;
}

.eyebrow,
.section-kicker {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  max-width: 900px;
  text-wrap: balance;
}

.hero__title-zh {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  margin-top: 0.25rem;
}

.hero__subtitle,
.hero__subtitle-zh {
  color: rgb(255 255 255 / 88%);
  font-size: clamp(1rem, 2vw, 1.22rem);
  max-width: 660px;
}

.hero__start {
  align-items: center;
  align-self: flex-start;
  background: rgb(255 253 248 / 94%);
  border-radius: 999px;
  color: var(--pine);
  display: inline-flex;
  font-weight: 800;
  gap: 0.6rem;
  margin-top: 1.35rem;
  min-height: 44px;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
}

.hero .eyebrow {
  color: var(--gold-on-dark);
}

.control-bar {
  background: rgb(246 242 233 / 94%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
}

.control-bar__inner {
  align-items: center;
  display: flex;
  gap: 1rem 1.5rem;
  min-height: 82px;
}

.segmented {
  border: 0;
  display: flex;
  margin: 0;
  padding: 0;
}

.segmented legend {
  color: var(--muted);
  float: left;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 2.45rem;
  margin-right: 0.65rem;
  text-transform: uppercase;
}

.segmented label {
  cursor: pointer;
}

.segmented input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.segmented span {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  font-size: 0.84rem;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  min-width: 58px;
  padding: 0.45rem 0.7rem;
  text-align: center;
}

.segmented label:first-of-type span {
  border-radius: 999px 0 0 999px;
}

.segmented label:last-of-type span {
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.segmented label + label span {
  border-left: 0;
}

.segmented input:checked + span {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}

.segmented input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.transcript-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
  min-height: 44px;
}

.transcript-toggle input {
  accent-color: var(--pine);
  height: 1.2rem;
  width: 1.2rem;
}

.transcript-toggle span {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.transcript-toggle small {
  color: var(--muted);
  display: block;
  font-weight: 500;
  margin-top: 0.22rem;
}

.mobile-strip {
  display: none;
}

.page-shell {
  display: grid;
  gap: clamp(24px, 5vw, 64px);
  grid-template-columns: 190px minmax(0, 1fr);
  padding-block: clamp(42px, 8vw, 90px);
}

.side-rail {
  align-self: start;
  position: sticky;
  top: 112px;
}

.side-rail__label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.side-rail nav {
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.side-rail nav a {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.25;
  padding: 0.65rem 0 0.65rem 1rem;
  text-decoration: none;
}

.side-rail nav a.is-active {
  border-left: 3px solid var(--gold);
  color: var(--pine);
  font-weight: 800;
  margin-left: -2px;
}

.side-rail__top {
  color: var(--pine-soft);
  display: inline-block;
  font-size: 0.78rem;
  margin-top: 1rem;
  text-decoration: none;
}

main {
  min-width: 0;
}

.panel {
  background: var(--card);
  border: 1px solid rgb(217 210 196 / 84%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: clamp(30px, 6vw, 64px);
  overflow: hidden;
  padding: clamp(24px, 5vw, 58px);
  scroll-margin-top: 112px;
}

.intro p:not(.section-kicker) {
  color: var(--muted);
  font-size: 1.03rem;
  max-width: 760px;
}

.status-note {
  background: var(--paper-deep);
  border-left: 3px solid var(--jade);
  color: var(--pine);
  font-size: 0.82rem;
  margin-top: 1.3rem;
  padding: 0.7rem 0.9rem;
}

.status-note.is-warning {
  background: #fff6df;
  border-color: var(--gold);
}

.section-card {
  padding: 0;
}

.section-visual {
  aspect-ratio: 16 / 7;
  background: var(--paper-deep);
  overflow: hidden;
}

.section-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.section-body {
  padding: clamp(24px, 5vw, 58px);
}

.section-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.section-number {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 2rem;
}

.section-summary {
  color: var(--muted);
  max-width: 750px;
}

.listen-row {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  margin: 1.35rem 0;
  padding: 0.75rem;
}

.listen-row p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.part-transcript {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: -0.55rem 0 1.35rem;
  overflow: hidden;
}

.part-transcript > summary {
  align-items: center;
  color: var(--pine);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  font-weight: 850;
  justify-content: space-between;
  line-height: 1.4;
  list-style: none;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
}

.part-transcript > summary::-webkit-details-marker {
  display: none;
}

.part-transcript > summary::after {
  color: var(--gold);
  content: "+";
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  margin-left: 0.8rem;
}

.part-transcript[open] > summary {
  border-bottom: 1px solid var(--line);
}

.part-transcript[open] > summary::after {
  content: "−";
}

.part-transcript > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.part-transcript__body {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0.25rem 1rem 1rem;
}

.part-transcript__language {
  min-width: 0;
  padding: 0.75rem 1rem 0.25rem 0;
}

.part-transcript__language--zh {
  border-left: 1px solid var(--line);
  padding-left: 1rem;
  padding-right: 0;
}

.part-transcript__language h3 {
  color: var(--pine);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.part-transcript__paragraph {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.part-transcript__paragraph + .part-transcript__paragraph {
  margin-top: 0.8rem;
}

.part-transcript__language--zh .part-transcript__paragraph {
  color: var(--muted);
  font-family: inherit;
}

.button,
.audio-button {
  align-items: center;
  background: var(--pine);
  border: 1px solid var(--pine);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.79rem;
  font-weight: 800;
  gap: 0.4rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
}

.button:hover,
.audio-button:hover {
  background: var(--pine-soft);
}

.button--ghost,
.audio-button--ghost {
  background: transparent;
  color: var(--pine);
}

.button--ghost:hover,
.audio-button--ghost:hover {
  color: #fff;
}

.button--danger {
  background: var(--danger);
  border-color: var(--danger);
}

.button:disabled,
.audio-button:disabled {
  cursor: not-allowed;
  opacity: 0.43;
}

.sentence-list {
  display: grid;
  gap: 1rem;
}

.sentence-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  container-name: sentence-card;
  container-type: inline-size;
  padding: clamp(17px, 3vw, 25px);
}

.sentence-line {
  align-items: flex-start;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.sentence-line--practice {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sentence-line__copy {
  max-width: 78ch;
}

.sentence-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sentence-actions__record {
  background: var(--danger);
  border-color: var(--danger);
}

.sentence-actions__record:hover {
  background: #873632;
  border-color: #873632;
}

.sentence-en {
  font-family: var(--font-serif);
  font-size: clamp(1.12rem, 2.3vw, 1.42rem);
  line-height: 1.45;
  margin: 0;
}

.sentence-en__word {
  border-radius: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding-block: 0.02em;
  transition: background-color 90ms ease, box-shadow 90ms ease, color 90ms ease;
}

.sentence-en__word.is-active {
  background: #f7dfb8;
  box-shadow: inset 0 -0.13em 0 rgb(164 65 60 / 32%);
  color: #743b32;
}

.sentence-zh {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.35rem 0 0;
}

.prosody {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.prosody span {
  background: var(--paper-deep);
  border-radius: 999px;
  color: var(--pine-soft);
  font-size: 0.73rem;
  padding: 0.24rem 0.55rem;
}

.prosody .stress {
  background: #fbefdc;
  color: #77501f;
}

.sentence-card--prosody-study {
  border-color: #a9c6c8;
  box-shadow: 0 16px 36px rgb(15 69 84 / 9%);
}

.sentence-practice-details {
  border-top: 1px solid var(--line);
  margin-top: 0.9rem;
}

.sentence-practice-details > summary {
  align-items: center;
  color: var(--pine);
  cursor: pointer;
  display: flex;
  font-size: 0.84rem;
  font-weight: 850;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  min-height: 44px;
  padding: 0.55rem 0.15rem 0.15rem;
}

.sentence-practice-details > summary::-webkit-details-marker {
  display: none;
}

.sentence-practice-details > summary::after {
  color: var(--gold);
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1;
  margin-left: 0.75rem;
}

.sentence-practice-details[open] > summary::after {
  content: "−";
}

.sentence-practice-details > summary:focus-visible {
  border-radius: 8px;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sentence-practice-details__body {
  display: flex;
  flex-direction: column;
  padding-top: 0.35rem;
}

.sentence-practice-details__body > .recorder {
  order: -1;
}

.prosody-study {
  background:
    radial-gradient(circle at 94% 8%, rgb(212 154 67 / 13%), transparent 15rem),
    linear-gradient(145deg, var(--card), var(--paper-deep));
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-top: 0.65rem;
  overflow: hidden;
  padding: clamp(0.82rem, 2vw, 1.1rem);
}

.prosody-study__head,
.prosody-study__subhead {
  align-items: flex-start;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.prosody-study__head h4,
.prosody-study__subhead h5 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.prosody-study__head h4 {
  font-size: clamp(1.15rem, 2vw, 1.42rem);
}

.prosody-study__subhead h5 {
  font-size: 1.02rem;
}

.prosody-study__kicker {
  color: var(--pine-soft);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  margin: 0 0 0.18rem;
  text-transform: uppercase;
}

.prosody-study__badge {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--pine);
  flex: 0 0 auto;
  font-size: 0.69rem;
  font-weight: 900;
  padding: 0.36rem 0.6rem;
}

.prosody-study__explanation {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.65;
  margin: 0.5rem 0 0;
}

.prosody-study__annotated {
  color: var(--pine);
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 2vw, 1.3rem);
  line-height: 2.05;
  margin: 0.62rem 0 0;
}

.prosody-study__group {
  border-radius: 0.42rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.08rem 0.1rem;
}

.prosody-study__group:hover {
  background: rgb(255 255 255 / 72%);
}

.prosody-study__word {
  border-radius: 0.18rem;
  white-space: nowrap;
}

.prosody-study__syllable {
  background: linear-gradient(transparent 64%, rgb(212 154 67 / 34%) 64%);
  color: var(--pine);
  font-weight: 900;
  padding-inline: 0.02em;
  text-transform: uppercase;
}

.prosody-study__word.is-prominent .prosody-study__syllable {
  color: var(--pine);
}

.prosody-study__word.is-prominent .prosody-study__syllable::before,
.prosody-study__word.is-name::before {
  color: #805414;
  content: "●";
  font-family: var(--font-sans);
  font-size: 0.48em;
  margin-right: 0.16em;
  vertical-align: 0.72em;
}

.prosody-study__word.is-nuclear .prosody-study__syllable {
  background: linear-gradient(transparent 56%, rgb(164 65 60 / 20%) 56%);
  color: var(--danger);
}

.prosody-study__word.is-nuclear .prosody-study__syllable::before {
  color: var(--danger);
  content: "◆";
  font-size: 0.57em;
}

.prosody-study__word.is-name {
  color: var(--pine);
  font-weight: 800;
}

.prosody-study__tone {
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 0.86em;
  font-weight: 900;
  margin-left: 0.12em;
  white-space: nowrap;
}

.prosody-study__divider {
  background: transparent;
  color: #8ca5aa;
  font-family: var(--font-sans);
  font-weight: 500;
  padding-inline: 0.35rem;
}

.prosody-study__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.55rem;
}

.prosody-study__legend span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #46636a;
  font-size: 0.66rem;
  font-weight: 750;
  padding: 0.3rem 0.52rem;
}

.prosody-study__recorded {
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--line);
  border-radius: 15px;
  margin-top: 0.6rem;
  min-width: 0;
  padding: 0.7rem;
}

.prosody-study__subhead p,
.prosody-study__chart-key,
.prosody-study__recorded-note,
.prosody-study__playback-hint {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.55;
  margin: 0.18rem 0 0;
}

.prosody-study__accent-switch {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 0.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 1 320px;
  margin-top: 0;
  min-width: 0;
  padding: 0.25rem;
  width: min(320px, 100%);
}

.prosody-study__accent-button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #4b656b;
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 850;
  min-height: 44px;
  padding: 0.45rem 0.55rem;
}

.prosody-study__accent-button[aria-pressed="true"] {
  background: #fff;
  box-shadow: 0 3px 10px rgb(15 69 84 / 12%);
  color: var(--pine);
}

.prosody-study__chart {
  background: linear-gradient(180deg, var(--card), var(--paper-deep));
  border: 1px solid #d5e2e2;
  border-radius: 12px;
  display: block;
  height: auto;
  margin-top: 0.5rem;
  width: 100%;
}

.sentence-mobile-prosody-float {
  display: none;
}

.sentence-desktop-prosody-sticky {
  display: none;
}

.prosody-study__chart-grid {
  stroke: #d0dfe0;
  stroke-dasharray: 4 6;
  stroke-width: 1;
}

.prosody-study__chart-zero {
  stroke: #9db5b8;
  stroke-width: 1.2;
}

.prosody-study__chart-boundary {
  stroke: #b8ccce;
  stroke-dasharray: 2 5;
  stroke-width: 1;
}

.prosody-study__chart-label,
.prosody-study__chart-group-label {
  fill: #526b71;
  font-family: var(--font-sans);
  font-size: 11px;
}

.prosody-study__chart-group-label {
  fill: #70878c;
  font-size: 10px;
  font-weight: 800;
}

.prosody-study__chart-path {
  fill: none;
  stroke: var(--pine-soft);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.prosody-study__chart-playhead {
  opacity: 0;
  pointer-events: none;
}

.prosody-study__chart-playhead.is-visible {
  opacity: 1;
}

.prosody-study__chart-playhead line {
  stroke: var(--danger);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.prosody-study__chart-playhead circle {
  fill: var(--danger);
  stroke: #fff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.prosody-study__chart-clip-marker {
  fill: var(--danger);
}

.prosody-study__chart-clip-label {
  fill: var(--danger);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 900;
}

.prosody-study__chart-key {
  margin-top: 0.32rem;
}

.prosody-study__recorded-note {
  background: #fbefdc;
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  color: #654a23;
  margin-top: 0.58rem;
  padding: 0.52rem 0.62rem;
}

.prosody-study__playback-hint {
  margin-top: 0.48rem;
}

.sentence-card--prosody-study .prosody-study + .recorder {
  margin-top: 0.6rem;
}

.practice-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 2rem 0 0.65rem;
  text-transform: uppercase;
}

.recorder {
  background: var(--paper-deep);
  border: 1px solid #cadcdf;
  border-radius: 16px;
  container-name: recorder;
  container-type: inline-size;
  margin-top: 0.95rem;
  padding: 1rem;
}

.recorder__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
}

.recorder__title {
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0;
}

.recorder__limit,
.recorder__privacy {
  color: var(--muted);
  font-size: 0.74rem;
  margin: 0;
}

.recorder__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.recorder__status {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.65rem 0 0;
  min-height: 1.35rem;
}

.recorder.is-recording {
  background: #fff2f0;
  border-color: #e1aaa5;
}

.recorder.is-recording .recorder__status {
  color: var(--danger);
  font-weight: 800;
}

.transcript-box,
.score-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.transcript-input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  display: block;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 7rem;
  padding: 0.8rem;
  resize: vertical;
  width: 100%;
}

.transcript-input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.transcript-input::placeholder,
.practice-writing textarea::placeholder,
.sentence-assessment__improvement-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.transcript-source {
  color: var(--muted);
  font-size: 0.78rem;
}

.transcript-box .transcript-guidance {
  background: #fbefdc;
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  color: #654a23;
  line-height: 1.5;
  margin-top: 0.5rem;
  padding: 0.52rem 0.62rem;
}

.transcript-box[hidden],
.score-box[hidden] {
  display: none;
}

.transcript-box h4,
.score-box h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.transcript-box p,
.score-box p {
  font-size: 0.86rem;
  margin: 0.3rem 0 0;
}

.score-meter {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.6rem;
}

.score-meter div {
  background: var(--paper);
  border-radius: 10px;
  padding: 0.55rem;
  text-align: center;
}

.score-meter strong {
  color: var(--pine);
  display: block;
  font-family: var(--font-serif);
  font-size: 1.45rem;
}

.score-meter span {
  color: var(--muted);
  font-size: 0.68rem;
}

.sentence-assessment {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 0.75rem;
  padding: 0.8rem;
}

.sentence-assessment__head,
.sentence-assessment__section-head {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: space-between;
}

.sentence-assessment__head h4,
.sentence-assessment__section h5,
.sentence-assessment__section legend {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 900;
  margin: 0;
}

.sentence-assessment__head h4 {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

.sentence-assessment__section h5,
.sentence-assessment__section legend {
  font-size: 0.78rem;
}

.sentence-assessment__total,
.sentence-assessment__value {
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  white-space: nowrap;
}

.sentence-assessment__total {
  background: #e8f2f3;
  border: 1px solid #c9dcde;
  border-radius: 999px;
  font-size: 0.86rem;
  padding: 0.34rem 0.62rem;
}

.sentence-assessment__intro,
.sentence-assessment__status,
.sentence-assessment__disclaimer,
.sentence-assessment__note,
.sentence-assessment__timing-detail {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.sentence-assessment__intro {
  margin: 0.36rem 0 0;
}

.sentence-assessment__grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.65rem;
}

.sentence-assessment__section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0;
  min-width: 0;
  padding: 0.65rem;
  position: relative;
}

.sentence-assessment__self-total {
  position: absolute;
  right: 0.65rem;
  top: 0.58rem;
}

.sentence-assessment__row {
  align-items: center;
  border-top: 1px solid #dbe5e6;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 0.38rem 0;
}

.sentence-assessment__row:first-of-type {
  margin-top: 0.35rem;
}

.sentence-assessment__row p,
.sentence-assessment__self-row label {
  color: var(--ink);
  font-size: 0.72rem;
  hyphens: none;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.sentence-assessment__value {
  font-size: 0.76rem;
}

.sentence-assessment__select {
  background: #fff;
  border: 1px solid #b9cfd2;
  border-radius: 9px;
  color: var(--pine);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 850;
  min-height: 44px;
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
}

.sentence-assessment__select:focus-visible,
.sentence-assessment__improvement-input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sentence-assessment__timing-detail,
.sentence-assessment__note {
  margin: 0.35rem 0 0;
}

.content-units {
  border-top: 1px dashed #c5d7da;
  margin-top: 0.2rem;
}

.content-units summary {
  color: var(--pine);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.4;
  min-height: 44px;
  padding: 0.58rem 0.1rem;
}

.content-units__note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  margin: 0 0 0.45rem;
}

.content-units__list {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-units__item {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 9px;
  display: grid;
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 0.42rem 0.5rem;
}

.content-units__label {
  color: var(--ink);
  font-size: 0.73rem;
  line-height: 1.35;
}

.content-units__result {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}

.content-units__item.is-matched {
  background: #edf7f3;
  border-left-color: #3a806e;
}

.content-units__item.is-partial {
  background: #fff7e9;
  border-left-color: var(--gold);
}

.content-units__item.is-missing {
  background: #f3f6f6;
  border-left-color: #8ba2a7;
}

.content-units__item.is-blocked {
  background: #fff1ef;
  border-left-color: var(--danger);
}

.content-units__list--words {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.content-units__item--word {
  align-content: center;
  gap: 0.12rem;
  grid-template-columns: 1fr;
  min-height: 52px;
  padding: 0.38rem 0.42rem;
}

.content-units__item--word .content-units__label {
  font-size: 0.68rem;
  font-weight: 850;
}

.content-units__item--word .content-units__result {
  font-size: 0.64rem;
  text-align: left;
}

.sentence-assessment__improvement {
  margin-top: 0.65rem;
}

.sentence-assessment__improvement-label {
  color: var(--ink);
  display: block;
  font-size: 0.76rem;
  font-weight: 900;
  margin-bottom: 0.32rem;
}

.sentence-assessment__improvement-input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  display: block;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.45;
  min-height: 4.6rem;
  padding: 0.62rem;
  resize: vertical;
  width: 100%;
}

.sentence-practice-details__summary-mobile,
.sentence-review-label__mobile,
.sentence-mobile-reflection__hint {
  display: none;
}

.sentence-assessment__status {
  margin: 0.5rem 0 0;
}

.sentence-assessment__disclaimer {
  border-top: 1px solid var(--line);
  margin: 0.42rem 0 0;
  padding-top: 0.42rem;
}

.qa-block {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.2rem;
}

.qa-block h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 850;
}

.qa-block details {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
}

.qa-block summary {
  cursor: pointer;
  font-weight: 750;
}

.qa-block summary span {
  color: var(--muted);
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.answer {
  background: var(--paper);
  border-radius: 12px;
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
}

.level-grid {
  margin-top: 1.5rem;
  min-width: 0;
}

.speaking-workspace {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
  min-width: 0;
}

.speaking-workspace .level-grid {
  margin-top: 0;
}

.levels-desktop {
  display: block;
  min-width: 0;
}

.levels-desktop__workspace {
  align-items: start;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.7rem);
  grid-template-columns: minmax(165px, 190px) minmax(0, 1fr);
  min-width: 0;
}

.levels-desktop__content {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem);
  min-width: 0;
}

.levels-mobile {
  display: none;
}

.levels-desktop__group {
  min-width: 0;
}

.levels-desktop__group-label {
  color: var(--pine);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  margin: 0 0 0.65rem;
  text-transform: uppercase;
}

.levels-desktop__part-list {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -7px;
  padding: 7px;
}

.levels-desktop__part-button {
  align-items: flex-start;
  background: rgb(255 255 255 / 46%);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  min-height: 84px;
  min-width: 0;
  padding: 0.9rem;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  width: 100%;
}

.levels-desktop__part-button:hover {
  border-color: var(--jade);
  box-shadow: 0 8px 24px rgb(17 55 67 / 9%);
  transform: translateY(-1px);
}

.levels-desktop__part-button.is-active {
  background: var(--pine);
  border-color: var(--pine);
  box-shadow: 0 12px 28px rgb(15 69 84 / 19%);
  color: #fff;
}

.levels-desktop__part-number {
  color: var(--gold);
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  padding-top: 0.08rem;
}

.levels-desktop__part-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.levels-desktop__part-kicker {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.levels-desktop__part-button.is-active .levels-desktop__part-kicker,
.levels-desktop__part-button.is-active .levels-desktop__part-title-zh {
  color: rgb(255 255 255 / 72%);
}

.levels-desktop__part-button.is-active .levels-desktop__part-number,
.levels-desktop__level-button.is-active .levels-desktop__level-number {
  color: var(--gold-on-dark);
}

.levels-desktop__part-title {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.levels-desktop__part-title-zh {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 0.25rem;
}

.levels-desktop__part-group {
  min-width: 0;
}

.levels-desktop__level-list {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr);
  margin: -5px;
  padding: 5px;
}

.levels-desktop__level-group {
  position: sticky;
  top: 104px;
}

.levels-desktop__level-button {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 94px;
  min-width: 0;
  padding: 0.9rem 1rem;
  position: relative;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
  width: 100%;
}

.levels-desktop__level-button::before {
  background: var(--line);
  border-radius: 999px;
  content: "";
  inset: 0.7rem auto 0.7rem 0.35rem;
  position: absolute;
  width: 3px;
}

.levels-desktop__level-button:hover {
  border-color: var(--jade);
}

.levels-desktop__level-button.is-active {
  background: var(--pine);
  border-color: var(--pine);
  box-shadow: 0 10px 24px rgb(15 69 84 / 18%);
  color: #fff;
}

.levels-desktop__level-button.is-active::before {
  background: var(--gold-on-dark);
}

.levels-desktop__level-button.is-active .levels-desktop__level-title-zh {
  color: rgb(255 255 255 / 74%);
}

.levels-desktop__level-number {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin-top: 0.25rem;
}

.levels-desktop__level-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.2;
  margin-top: 0.35rem;
  overflow-wrap: anywhere;
}

.levels-desktop__level-title-zh {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.28rem;
}

.levels-desktop__reader {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  min-width: 0;
  overflow: hidden;
}

.levels-desktop__reader-header {
  background:
    linear-gradient(110deg, rgb(15 69 84 / 9%), transparent 62%),
    var(--paper);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.levels-desktop__meta {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin: 0 0 0.45rem;
}

.levels-desktop__reader h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  max-width: 28ch;
}

.levels-desktop__reader-level {
  color: var(--pine-soft);
  font-size: 0.86rem;
  font-weight: 800;
  margin-top: 0.65rem;
}

.levels-desktop__instruction {
  display: grid;
  gap: 0.15rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.levels-desktop__instruction p {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.levels-desktop__audio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.levels-desktop__passage {
  padding: 0 clamp(1.25rem, 3vw, 2rem);
}

.levels-desktop__paragraph-pair {
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.5rem, 3vw, 2.15rem) 0;
}

.levels-desktop__paragraph-pair + .levels-desktop__paragraph-pair {
  border-top: 1px solid var(--line);
}

.levels-desktop__language {
  margin-inline: auto;
  max-width: 72ch;
  min-width: 0;
  width: 100%;
}

.levels-desktop__chinese {
  border-top: 2px solid var(--paper-deep);
  padding-top: clamp(1.15rem, 2.5vw, 1.8rem);
}

.levels-desktop__language-label {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0 0 0.55rem;
  text-transform: uppercase;
}

.levels-desktop__paragraph {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  margin: 0;
  max-width: 72ch;
}

.levels-desktop__chinese .levels-desktop__paragraph {
  color: #435d65;
  font-family: var(--font-sans);
  font-size: clamp(0.96rem, 1.3vw, 1.04rem);
}

.levels-desktop__pager {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 0 clamp(1.25rem, 3vw, 2rem);
  padding: 1.25rem 0 1.45rem;
}

.levels-desktop__pager-button {
  background: transparent;
  border: 1px solid var(--pine-soft);
  border-radius: 999px;
  color: var(--pine);
  cursor: pointer;
  min-height: 46px;
  padding: 0.6rem 1rem;
}

.levels-desktop__pager-button--next {
  background: var(--pine);
  color: #fff;
}

.levels-desktop__pager-button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.level-card {
  background: rgb(255 255 255 / 58%);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.level-card summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  min-height: 92px;
  padding: 1.15rem;
}

.level-card summary::-webkit-details-marker {
  display: none;
}

.level-card summary::after {
  color: var(--gold);
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1;
}

.level-card[open] summary::after {
  content: "−";
}

.level-card[open] summary {
  border-bottom: 1px solid var(--line);
}

.level-card__body {
  padding: 1.15rem;
}

.level-card__toggle {
  color: var(--muted);
  font-size: 0.73rem;
  margin-left: auto;
  text-align: right;
}

.level-card__number {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.level-card h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 850;
  margin-top: 0.25rem;
}

.level-card__instruction {
  color: var(--muted);
  font-size: 0.82rem;
}

.level-card__part-picker {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  margin-top: 0.9rem;
}

.level-card__part-button {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--pine);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  min-height: 44px;
}

.level-card__part-button.is-active {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}

.level-card__part-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.level-card__full-audio {
  margin-top: 0.75rem;
}

.level-card__sample {
  background: var(--paper);
  border-radius: 11px;
  font-family: var(--font-serif);
  font-size: 0.97rem;
  padding: 0.8rem;
}

.level-part {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1rem;
}

.level-part:first-of-type {
  margin-top: 1.25rem;
}

.level-part h4 {
  color: var(--pine);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 850;
}

.level-part__head {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.level-part__head h4 {
  margin: 0;
}

.level-part__pair {
  background: var(--paper);
  border-radius: 12px;
  margin-top: 0.7rem;
  padding: 0.75rem 0.85rem;
}

.level-part__en {
  font-family: var(--font-serif);
  font-size: 0.98rem;
}

.level-part__zh {
  color: var(--muted);
  font-size: 0.9rem;
}

.part-practice,
.final-retelling {
  background: var(--pine);
  color: #fff;
}

.part-practice .section-kicker,
.final-retelling .section-kicker {
  color: var(--gold-on-dark);
}

.practice-column {
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgb(8 45 57 / 18%);
  min-width: 0;
  padding: 1rem;
}

.practice-column__header {
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  padding: 0.2rem 0.15rem 0.9rem;
}

.practice-column__header h3 {
  font-size: 1.3rem;
}

.practice-column__header p:not(.section-kicker) {
  color: rgb(255 255 255 / 76%);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
}

.practice-writing {
  background: #fff;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 14px;
  color: var(--ink);
  margin-top: 1rem;
  padding: 0.85rem;
}

.practice-writing label {
  color: var(--pine);
  display: block;
  font-size: 0.86rem;
  font-weight: 850;
}

.practice-writing p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.45;
  margin: 0.35rem 0 0.65rem;
}

.practice-writing textarea {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  display: block;
  font: inherit;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 7rem;
  padding: 0.75rem;
  resize: vertical;
  width: 100%;
}

.practice-writing textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.practice-writing textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.practice-column :is(button, textarea):focus-visible {
  outline-color: var(--gold-on-dark);
}

.practice-writing--reflection {
  border-top: 4px solid var(--gold);
}

.practice-session-note {
  color: rgb(255 255 255 / 62%);
  font-size: 0.72rem;
  line-height: 1.45;
  margin: 0.8rem 0.15rem 0;
}

.practice-column .retelling-parts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.practice-column .listen-row {
  align-items: start;
  display: grid;
  justify-items: start;
}

.practice-column .listen-row .audio-button {
  width: 100%;
}

.part-practice__current {
  align-items: center;
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 14px;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0.85rem;
  padding: 0.75rem;
}

.part-practice__current p {
  margin: 0;
}

.part-practice__current-label {
  color: var(--gold-on-dark);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.part-practice__current-title {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  margin-top: 0.18rem !important;
}

.part-practice__current .audio-button {
  width: 100%;
}

.practice-column .recorder {
  padding: 0.85rem;
}

.practice-column .recorder__controls .button {
  flex: 1 1 calc(50% - 0.5rem);
}

.final-retelling {
  border-radius: 20px;
  box-shadow: 0 22px 54px rgb(8 45 57 / 19%);
  margin-top: 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.final-retelling__header {
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  padding: 0.15rem 0.15rem 1rem;
}

.final-retelling__header h3 {
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.final-retelling__header p:not(.section-kicker) {
  color: rgb(255 255 255 / 76%);
  font-size: 0.86rem;
  margin: 0.45rem 0 0;
  max-width: 82ch;
}

.final-retelling__workspace {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.final-retelling__writing textarea {
  min-height: 12rem;
}

.final-model-reference {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 16px;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, auto) minmax(10rem, auto);
  margin-top: 1rem;
  padding: 0.7rem;
}

.final-model-reference__identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  min-width: 0;
}

.final-model-reference__identity h4 {
  color: #fff;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.4;
  margin: 0;
}

.final-model-reference__selector {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}

.final-model-reference__selector label {
  color: rgb(255 255 255 / 72%);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.final-model-reference__selector select {
  background: var(--gold-on-dark);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--pine);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  min-height: 44px;
  min-width: 0;
  padding: 0.5rem 0.65rem;
}

.final-model-reference__selector select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.final-model-reference__listen {
  background: transparent;
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.final-model-reference__listen .audio-button {
  background: #fff;
  border-color: #fff;
  color: var(--pine);
  font-size: 0.78rem;
  min-height: 44px;
  padding: 0.58rem 0.75rem;
  width: 100%;
}

.final-model-reference__listen .audio-button:hover {
  background: var(--paper-deep);
  border-color: var(--paper-deep);
}

.final-model-script {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 12px;
  color: #fff;
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.final-model-script > summary {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.4;
  list-style: none;
  min-height: 44px;
  padding: 0.58rem 2.65rem 0.58rem 0.75rem;
  position: relative;
}

.final-model-script > summary::-webkit-details-marker {
  display: none;
}

.final-model-script > summary::after {
  color: var(--gold-on-dark);
  content: "+";
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1;
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
}

.final-model-script[open] > summary::after {
  color: var(--gold);
  content: "−";
}

.final-model-script[open] {
  background: #fff;
  border-color: rgb(255 255 255 / 46%);
  color: var(--ink);
  grid-column: 1 / -1;
}

.final-model-script[open] > summary {
  color: var(--pine);
}

.final-model-script > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.final-model-script__body {
  border-top: 1px solid var(--line);
}

.final-model-script__pair {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
}

.final-model-script__pair:last-child {
  border-bottom: 0;
}

.final-model-script__language-label {
  color: var(--gold-dark);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  margin: 0 0 0.45rem;
}

.final-model-script__text {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 0.96rem;
  line-height: 1.72;
  margin: 0;
  white-space: pre-wrap;
}

.final-model-script__language--zh {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.final-model-script__language--zh .final-model-script__text {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}

.part-practice > p:not(.section-kicker),
.final-retelling > p:not(.section-kicker) {
  color: rgb(255 255 255 / 78%);
}

.part-practice > .practice-session-note,
.final-retelling > .practice-session-note {
  color: rgb(255 255 255 / 62%);
}

.retelling-guide {
  color: rgb(255 255 255 / 82%);
  font-size: 0.86rem;
  margin: 0.8rem 0 0;
  max-width: 76ch;
}

.retelling-guide--scope {
  color: rgb(255 255 255 / 68%);
  font-size: 0.78rem;
  margin-top: 0.75rem;
}

.retelling-parts__button {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  min-height: 44px;
}

.retelling-parts {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  margin-top: 1rem;
}

.retelling-parts__button {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 22%);
  border-radius: 12px;
  color: rgb(255 255 255 / 78%);
  padding: 0.55rem 0.45rem;
}

.retelling-parts__button.is-active {
  background: var(--gold-on-dark);
  border-color: var(--gold-on-dark);
  color: var(--pine);
}

.retelling-parts__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.retelling-parts__button:focus-visible,
.levels-desktop__level-button:focus-visible,
.levels-desktop__part-button:focus-visible,
.levels-desktop__pager-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.part-practice .recorder,
.final-retelling .recorder {
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 24%);
}

.part-practice .recorder__limit,
.part-practice .recorder__privacy,
.part-practice .recorder__status,
.final-retelling .recorder__limit,
.final-retelling .recorder__privacy,
.final-retelling .recorder__status {
  color: rgb(255 255 255 / 74%);
}

.part-practice .button--ghost,
.final-retelling .button--ghost {
  border-color: #fff;
  color: #fff;
}

.part-practice .retelling-parts__button:focus-visible,
.final-retelling .retelling-parts__button:focus-visible {
  outline-color: var(--gold-on-dark);
}

.part-practice .transcript-box,
.part-practice .score-box,
.final-retelling .transcript-box,
.final-retelling .score-box {
  color: var(--ink);
}

.load-error {
  background: #fff0ef;
  border: 1px solid #db9d98;
  border-radius: var(--radius);
  margin: 3rem auto;
  max-width: 720px;
  padding: 2rem;
}

footer {
  background: #092f3b;
  color: rgb(255 255 255 / 76%);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  padding-block: 2rem;
}

.footer__inner p {
  font-size: 0.78rem;
  margin: 0;
}

@media (max-width: 960px) {
  html {
    scroll-padding-top: 64px;
  }

  .hero,
  .hero__content {
    min-height: clamp(470px, 60svh, 570px);
  }

  .hero__veil {
    background:
      linear-gradient(0deg, rgb(5 34 47 / 90%) 0%, rgb(5 34 47 / 40%) 72%, rgb(5 34 47 / 16%)),
      linear-gradient(90deg, rgb(5 34 47 / 46%), transparent);
  }

  .hero__content {
    justify-content: flex-end;
    padding-bottom: 4rem;
  }

  .control-bar {
    position: static;
  }

  .control-bar__inner {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-block: 0.9rem;
  }

  .transcript-toggle {
    margin-left: 0;
    width: 100%;
  }

  .mobile-strip {
    background: rgb(15 69 84 / 97%);
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.55rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: 0.55rem;
    position: sticky;
    scrollbar-width: none;
    top: 0;
    -webkit-overflow-scrolling: touch;
    z-index: 35;
  }

  .mobile-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-strip a {
    align-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    color: rgb(255 255 255 / 76%);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.74rem;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    text-decoration: none;
  }

  .mobile-strip a.is-active {
    background: #fff;
    color: var(--pine);
    font-weight: 800;
  }

  .page-shell {
    display: block;
    padding-block: 28px 55px;
  }

  .side-rail {
    display: none;
  }

  .panel {
    scroll-margin-top: 68px;
  }

  .section-visual {
    aspect-ratio: 4 / 3;
  }

  .sentence-assessment__grid {
    grid-template-columns: 1fr;
  }

  .levels-desktop {
    display: none;
  }

  .levels-mobile {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .retelling-parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .final-model-reference {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-model-reference__identity {
    grid-column: 1 / -1;
  }
}

@media (min-width: 961px) {
  .section-card--desktop-sticky-trial-scope {
    overflow: clip;
  }

  .sentence-card--desktop-sticky-trial
    .recorder
    [data-action="start-recording"] {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 960px) {
  .sentence-card--desktop-sticky-trial
    .recorder
    [data-action="start-recording"] {
    display: none;
  }
}

@media (min-width: 961px) and (max-width: 1080px) {
  .page-shell {
    gap: 24px;
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .side-rail nav a {
    font-size: 0.78rem;
    padding-left: 0.75rem;
  }

  .levels-desktop__workspace {
    gap: clamp(0.8rem, 2vw, 1.2rem);
    grid-template-columns: minmax(135px, 155px) minmax(0, 1fr);
  }

  .levels-desktop__part-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .levels-desktop__instruction {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1081px) {
  .page-shell {
    gap: clamp(28px, 3vw, 44px);
    grid-template-columns: 172px minmax(0, 1fr);
  }

  #speaking-levels {
    padding-inline: clamp(30px, 3vw, 44px);
  }

  .levels-desktop__workspace {
    gap: clamp(0.9rem, 1.6vw, 1.35rem);
    grid-template-columns: minmax(172px, 190px) minmax(0, 1fr);
  }

  .levels-desktop__content {
    gap: 1rem;
  }

  .levels-desktop__part-list {
    gap: 0.5rem;
  }

  .levels-desktop__part-button {
    gap: 0.45rem;
    min-height: 78px;
    padding: 0.72rem 0.6rem;
  }

  .levels-desktop__part-number {
    font-size: 1.25rem;
  }

  .levels-desktop__part-kicker {
    font-size: 0.68rem;
  }

  .levels-desktop__part-title {
    font-size: 0.78rem;
  }

  .levels-desktop__part-title-zh {
    font-size: 0.74rem;
  }

  .levels-desktop__level-button {
    min-height: 86px;
    padding: 0.75rem 0.85rem;
  }

  .levels-desktop__reader-header {
    padding: 1.25rem 1.5rem;
  }

  .levels-desktop__passage {
    padding-inline: 1.5rem;
  }

  .levels-desktop__paragraph-pair {
    gap: 1.5rem;
    padding: 1.4rem 0;
  }

  .levels-desktop__language {
    margin-inline: 0;
    max-width: none;
  }

  .levels-desktop__paragraph {
    font-size: 1rem;
    line-height: 1.65;
    max-width: none;
  }

  .levels-desktop__chinese .levels-desktop__paragraph {
    font-size: 0.96rem;
    line-height: 1.7;
  }

  .levels-desktop__pager {
    margin-inline: 1.5rem;
    padding-block: 1rem 1.1rem;
  }
}

@container sentence-card (min-width: 860px) {
  .sentence-practice-details__body {
    align-items: start;
    display: grid;
    gap: 0.8rem;
    grid-template-areas: "prosody recorder";
    grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.65fr);
  }

  .sentence-practice-details__body > .prosody-study {
    grid-area: prosody;
    margin-top: 0;
  }

  .sentence-card--desktop-sticky-trial .sentence-practice-details__body > .prosody-study {
    align-self: start;
    position: sticky;
    top: 98px;
    z-index: 2;
  }

  .sentence-practice-details__body > .recorder {
    grid-area: recorder;
    margin-top: 0;
    order: 0;
  }

  .sentence-practice-details__body > .recorder .sentence-assessment__grid {
    grid-template-columns: 1fr;
  }

  .sentence-practice-details__body > .recorder .sentence-assessment__row p,
  .sentence-practice-details__body > .recorder .sentence-assessment__self-row label {
    font-size: 0.875rem;
  }

  .sentence-practice-details__body > .recorder .sentence-assessment__select {
    font-size: 0.85rem;
    min-width: 96px;
  }
}

@media (min-width: 961px) {
  @container sentence-card (min-width: 540px) {
    .sentence-card--desktop-sticky-trial
      .recorder
      [data-action="start-recording"] {
      display: inline-flex;
    }

    .sentence-card--desktop-sticky-trial .sentence-practice-details__body {
      align-items: start;
      display: grid;
      gap: 0.8rem;
      grid-template-areas: "prosody recorder";
      grid-template-columns: minmax(0, 1.15fr) minmax(270px, 0.85fr);
    }

    .sentence-card--desktop-sticky-trial
      .sentence-practice-details__body
      > .prosody-study {
      align-self: stretch;
      background: transparent;
      border: 0;
      border-radius: 0;
      grid-area: prosody;
      margin-top: 0;
      min-width: 0;
      overflow: visible;
      padding: 0;
      position: static;
      z-index: auto;
    }

    .sentence-card--desktop-sticky-trial .prosody-study > .prosody-study__quick,
    .sentence-card--desktop-sticky-trial .prosody-study > .prosody-study__notes,
    .sentence-card--desktop-sticky-trial .prosody-study > .prosody-study__recorded {
      display: none;
    }

    .sentence-card--desktop-sticky-trial .sentence-desktop-prosody-sticky {
      background:
        radial-gradient(circle at 94% 8%, rgb(212 154 67 / 13%), transparent 13rem),
        linear-gradient(145deg, var(--card), var(--paper-deep));
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 12px 30px rgb(15 69 84 / 11%);
      display: block;
      padding: 1rem;
      position: sticky;
      top: 98px;
      z-index: 2;
    }

    .sentence-desktop-prosody-sticky__head {
      align-items: flex-start;
      display: flex;
      gap: 0.8rem;
      justify-content: space-between;
    }

    .sentence-desktop-prosody-sticky__head h5 {
      color: var(--ink);
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 500;
      line-height: 1.25;
      margin: 0;
    }

    .sentence-desktop-prosody-sticky__head p {
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.5;
      margin: 0.22rem 0 0;
    }

    .sentence-desktop-prosody-sticky__accent {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--pine);
      flex: 0 0 auto;
      font-size: 0.68rem;
      font-weight: 900;
      padding: 0.34rem 0.52rem;
      white-space: nowrap;
    }

    .sentence-desktop-prosody-sticky__accent-switch {
      margin-top: 0.72rem;
      max-width: none;
      width: 100%;
    }

    .sentence-desktop-prosody-sticky__label {
      color: var(--pine);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.04em;
      margin: 0.75rem 0 0.28rem;
    }

    .sentence-desktop-prosody-sticky__stress {
      background: rgb(255 255 255 / 72%);
      border: 1px solid var(--line);
      border-radius: 12px;
      font-size: clamp(0.88rem, 1.25vw, 1.08rem);
      line-height: 1.8;
      margin: 0;
      padding: 0.52rem 0.62rem;
    }

    .sentence-desktop-prosody-sticky__chart {
      margin-top: 0;
    }

    .sentence-desktop-prosody-sticky__notes {
      border-top: 1px solid var(--line);
      margin-top: 0.72rem;
      padding-top: 0.55rem;
    }

    .sentence-desktop-prosody-sticky__notes > summary {
      color: var(--pine);
      cursor: pointer;
      font-size: 0.74rem;
      font-weight: 850;
      min-height: 44px;
      padding: 0.55rem 0;
    }

    .sentence-desktop-prosody-sticky__notes-body {
      padding-bottom: 0.2rem;
    }

    .sentence-card--desktop-sticky-trial .sentence-practice-details__body > .recorder {
      grid-area: recorder;
      margin-top: 0;
      order: 0;
    }

    .sentence-card--desktop-sticky-trial
      .sentence-practice-details__body
      > .recorder
      .sentence-assessment__grid {
      grid-template-columns: 1fr;
    }

    .sentence-card--desktop-sticky-trial
      .sentence-practice-details__body
      > .recorder
      .sentence-assessment__row
      p,
    .sentence-card--desktop-sticky-trial
      .sentence-practice-details__body
      > .recorder
      .sentence-assessment__self-row
      label {
      font-size: 0.875rem;
    }

    .sentence-card--desktop-sticky-trial
      .sentence-practice-details__body
      > .recorder
      .sentence-assessment__select {
      font-size: 0.85rem;
      min-width: 96px;
    }
  }
}

@media (min-width: 1180px) {
  .final-retelling__workspace {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-retelling__workspace > #final-recorder-root {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .final-retelling__workspace > .practice-writing--reflection {
    grid-column: 2;
    grid-row: 1;
  }

  .final-model-script__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-model-script__language--zh {
    border-left: 1px solid var(--line);
    border-top: 0;
    padding-left: 1rem;
    padding-top: 0;
  }
}

@media (min-width: 1280px) {
  .levels-desktop__paragraph-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .levels-desktop__chinese {
    border-left: 2px solid var(--paper-deep);
    border-top: 0;
    padding-left: 1.5rem;
    padding-top: 0;
  }
}

@media (min-width: 1240px) {
  .speaking-workspace {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 310px);
  }

  .speaking-workspace .levels-desktop__workspace {
    gap: 0.85rem;
    grid-template-columns: minmax(116px, 132px) minmax(0, 1fr);
  }

  .speaking-workspace .levels-desktop__part-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .speaking-workspace .levels-desktop__paragraph-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .speaking-workspace .levels-desktop__chinese {
    border-left: 0;
    border-top: 2px solid var(--paper-deep);
    padding-left: 0;
    padding-top: 1.15rem;
  }

}

@media (min-width: 1400px) {
  .levels-desktop__part-list {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .speaking-workspace .levels-desktop__part-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(2.8rem, 15vw, 4.4rem);
  }

  .segmented {
    flex-wrap: wrap;
  }

  .segmented legend {
    width: 100%;
  }

  .sentence-line {
    grid-template-columns: 1fr;
  }

  .sentence-line .audio-button {
    justify-self: start;
  }

  .prosody-study {
    border-radius: 14px;
    padding: 0.82rem;
  }

  .prosody-study__head,
  .prosody-study__subhead {
    align-items: stretch;
    flex-direction: column;
  }

  .prosody-study__badge {
    align-self: flex-start;
  }

  .prosody-study__accent-switch {
    flex-basis: auto;
    width: 100%;
  }

  .prosody-study__annotated {
    font-size: 0.98rem;
    line-height: 2.1;
  }

  .prosody-study__divider {
    padding-inline: 0.22rem;
  }

  .score-meter {
    gap: 0.35rem;
  }

  .sentence-assessment__row {
    align-items: start;
  }

  .recorder__controls .button {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .level-card__toggle {
    display: none;
  }

  .level-part__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .retelling-parts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-model-reference {
    grid-template-columns: minmax(0, 1fr);
  }

  .final-model-reference__identity,
  .final-model-reference__selector {
    align-items: stretch;
    flex-direction: column;
  }

  .final-model-reference__selector select {
    width: 100%;
  }

  .score-meter strong {
    font-size: 1.2rem;
  }
}

@media (max-width: 700px) {
  .transcript-toggle {
    display: none;
  }

  .part-transcript__body {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0.9rem;
  }

  .part-transcript__language {
    padding: 0.8rem 0 0.9rem;
  }

  .part-transcript__language--zh {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .sentence-card--mobile-split-trial .sentence-practice-details__summary-desktop,
  .sentence-card--mobile-split-trial .sentence-actions__record-copy,
  .sentence-card--mobile-split-trial .transcript-box,
  .sentence-card--mobile-split-trial [data-action="cloud-transcript"],
  .sentence-card--mobile-split-trial .recorder__privacy,
  .sentence-card--mobile-split-trial .prosody-study__explanation,
  .sentence-card--mobile-split-trial .prosody-study__recorded-note,
  .sentence-card--mobile-split-trial .prosody-study__chart-key,
  .sentence-card--mobile-split-trial .prosody-study__playback-hint,
  .sentence-card--mobile-split-trial .sentence-assessment > :not(.sentence-assessment__improvement) {
    display: none !important;
  }

  .sentence-card--mobile-split-trial .sentence-practice-details__summary-mobile,
  .sentence-card--mobile-split-trial .sentence-review-label__mobile,
  .sentence-card--mobile-split-trial .sentence-mobile-reflection__hint {
    display: block;
  }

  .sentence-card--mobile-split-trial .sentence-review-label__desktop {
    display: none;
  }

  .sentence-card--mobile-split-trial .sentence-assessment {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .sentence-card--mobile-split-trial .sentence-assessment__improvement {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-top: 0;
    padding: 0.78rem;
  }

  .sentence-card--mobile-split-trial .sentence-assessment__improvement-label {
    font-size: 0.92rem;
    margin-bottom: 0.22rem;
  }

  .sentence-card--mobile-split-trial .sentence-mobile-reflection__hint {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0 0 0.5rem;
  }

  .sentence-card--mobile-split-trial .sentence-assessment__improvement-input {
    font-size: 0.9rem;
    min-height: 6.5rem;
  }

  .sentence-card--mobile-split-trial .recorder__quick .button:disabled {
    display: none;
  }
}

@media (max-width: 700px) {
  .sentence-card--mobile-split-trial .sentence-practice-details {
    margin-inline: -0.65rem;
  }

  .sentence-card--mobile-split-trial .sentence-practice-details__body {
    align-items: start;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sentence-card--mobile-split-trial .sentence-practice-details__body > .prosody-study,
  .sentence-card--mobile-split-trial .sentence-practice-details__body > .recorder {
    display: contents;
  }

  .sentence-card--mobile-split-trial .prosody-study__quick,
  .sentence-card--mobile-split-trial .recorder__quick {
    border: 1px solid var(--line);
    border-radius: 14px;
    min-width: 0;
    padding: 0.65rem;
  }

  .sentence-card--mobile-split-trial .prosody-study__quick {
    background:
      radial-gradient(circle at 94% 8%, rgb(212 154 67 / 13%), transparent 10rem),
      linear-gradient(145deg, var(--card), var(--paper-deep));
    grid-column: 1;
    order: 1;
  }

  .sentence-card--mobile-split-trial .recorder__quick {
    background: var(--paper-deep);
    grid-column: 2;
    order: 1;
  }

  .sentence-card--mobile-split-trial .prosody-study__notes,
  .sentence-card--mobile-split-trial .prosody-study__recorded,
  .sentence-card--mobile-split-trial .recorder__privacy,
  .sentence-card--mobile-split-trial .transcript-box,
  .sentence-card--mobile-split-trial .sentence-assessment {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .sentence-card--mobile-split-trial .prosody-study__notes {
    background: #f4f8f8;
    border: 1px solid var(--line);
    border-radius: 12px;
    order: 3;
    padding: 0.55rem;
  }

  .sentence-card--mobile-split-trial .prosody-study__recorded {
    order: 2;
  }

  .sentence-card--mobile-split-trial .sentence-assessment {
    order: 5;
  }

  .sentence-card--mobile-split-trial .prosody-study__head,
  .sentence-card--mobile-split-trial .recorder__head {
    display: block;
  }

  .sentence-card--mobile-split-trial .prosody-study__badge {
    display: inline-flex;
    margin-top: 0.35rem;
  }

  .sentence-card--mobile-split-trial .prosody-study__head h4 {
    font-size: 1rem;
  }

  .sentence-card--mobile-split-trial .prosody-study__explanation {
    font-size: 0.7rem;
    line-height: 1.45;
  }

  .sentence-card--mobile-split-trial .prosody-study__annotated {
    font-size: 0.9rem;
    line-height: 1.95;
  }

  .sentence-card--mobile-split-trial .prosody-study__divider {
    padding-inline: 0.15rem;
  }

  .sentence-card--mobile-split-trial .recorder__title {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .sentence-card--mobile-split-trial .recorder__limit {
    font-size: 0.65rem;
    margin-top: 0.25rem;
  }

  .sentence-card--mobile-split-trial .recorder__quick .recorder__controls {
    gap: 0.35rem;
    margin-top: 0.55rem;
  }

  .sentence-card--mobile-split-trial .recorder__quick .button {
    flex: 1 1 100%;
    font-size: 0.69rem;
    min-height: 44px;
    padding: 0.4rem;
    width: 100%;
  }

  .sentence-card--mobile-split-trial .recorder__status {
    font-size: 0.68rem;
    line-height: 1.4;
    margin-top: 0.5rem;
  }

  .sentence-card--mobile-split-trial .recorder.is-recording .recorder__quick {
    background: #fff2f0;
    border-color: #e1aaa5;
  }

}

@container recorder (max-width: 580px) {
  .sentence-assessment__grid {
    grid-template-columns: 1fr;
  }

  .sentence-assessment__self-total {
    position: static;
  }
}

@container recorder (max-width: 360px) {
  .sentence-assessment__row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .sentence-assessment__select {
    width: 100%;
  }
}

@media (max-width: 370px) {
  .score-meter {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Huangshan: quiet landscape colors and a compact learning entrance. */
:root[data-theme="rose"] { --ink:#402f37; --muted:#755d68; --paper:#f8f2f4; --paper-deep:#f0e3e9; --card:#fffafb; --line:#e2cdd7; --pine:#704857; --pine-soft:#875d70; --jade:#ac8293; --focus:#9b315c; }
:root[data-theme="sage"] { --ink:#2a3c32; --muted:#5b6f61; --paper:#f3f6f2; --paper-deep:#e4ece1; --card:#fcfdf9; --line:#cdd9c8; --pine:#3e5b4e; --pine-soft:#54745e; --jade:#8ba689; --focus:#327443; }
:root[data-theme="lilac"] { --ink:#383044; --muted:#6e627b; --paper:#f5f2f8; --paper-deep:#eae3f1; --card:#fdfbff; --line:#d8cde4; --pine:#66547b; --pine-soft:#7b6692; --jade:#a594b7; --focus:#7254a0; }
:root[data-theme="sand"] { --ink:#40372b; --muted:#766954; --paper:#f8f5ee; --paper-deep:#efe7d8; --card:#fffdf8; --line:#e1d5bf; --pine:#705c40; --pine-soft:#816b4b; --jade:#b4a386; --focus:#8a611e; }
body { background:var(--paper); }
[hidden] { display:none !important; }
.hero { min-height:400px; height:clamp(400px,40vw,490px); }
.hero__content { padding-top:68px; padding-bottom:52px; }
.hero__image { object-position:center 52%; }
.hero__veil { background:linear-gradient(90deg,rgba(19,38,47,.82),rgba(19,38,47,.32) 70%,rgba(19,38,47,.14)); }
.hero h1 { font-size:clamp(3.2rem,6.7vw,6rem); letter-spacing:-.055em; }
.hero__title-zh { font-size:clamp(1.75rem,3vw,2.4rem); letter-spacing:.2em; }
.hero__subtitle { margin-top:1.2rem; font-size:1.1rem; }
.hero__subtitle-zh { font-size:.95rem; }
.hero__start { margin-top:1.2rem; }
.control-bar { background:var(--card); }
.control-bar__inner { display:grid; grid-template-columns:auto auto minmax(180px,1fr); gap:14px 24px; padding-top:14px; padding-bottom:14px; align-items:center; }
.theme-control { justify-self:end; display:flex; gap:10px; align-items:center; color:var(--muted); font-size:.8rem; }
.theme-control select { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; min-height:44px; padding:8px 30px 8px 12px; }
.transcript-toggle { grid-column:1/-1; max-width:none; border-top:1px solid var(--line); padding-top:10px; margin:0; font-size:.78rem; }
.transcript-toggle small { display:inline; margin-left:.5rem; font-size:.72rem; }
select:focus-visible,textarea:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.intro { padding:clamp(20px,3vw,36px); }
.intro h2 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.35; }
.intro h2 span { color:var(--muted); font-size:.7em; letter-spacing:.04em; }
#topic-introduction { max-width:65ch; margin-top:1rem; }
#topic-introduction-zh { margin-top:-.3rem; color:var(--muted); }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:16px; margin-top:26px; }
.overview-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.overview-card > img { width:100%; height:132px; object-fit:cover; background:var(--paper-deep); }
.overview-card > img.is-painting { object-fit:contain; background:#e8e2d6; }
.overview-card__body { padding:14px; }
.overview-card .section-kicker { margin:0 0 6px; font-size:.7rem; letter-spacing:.12em; }
.overview-card h3 { font-family:var(--font-sans); font-size:.94rem; line-height:1.45; min-height:3em; }
.overview-card h3 a { color:var(--ink); text-decoration:none; }
.overview-card h3 a:hover { color:var(--pine-soft); text-decoration:underline; text-underline-offset:3px; }
.overview-card h3 span { color:var(--muted); font-size:.86em; font-weight:400; }
.overview-card .button { width:100%; margin-top:12px; min-height:44px; font-size:.8rem; }
.overview-card .part-transcript { margin:10px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.overview-card .part-transcript summary { padding:10px 0 0; font-size:.72rem; min-height:44px; line-height:1.5; }
.overview-card .part-transcript__body { display:block; padding:8px 0; }
.overview-card .part-transcript__language { padding:0; border:0; }
.overview-card .part-transcript__language h3 { min-height:0; font-size:.82rem; margin:10px 0; }
.overview-card .part-transcript__paragraph { font-size:.86rem; }
.full-narration { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.full-narration > .button { width:100%; }
.full-narration h3 { font-size:1.1rem; line-height:1.5; margin:1.2rem 0 .5rem; }
.button--primary { background:var(--pine); color:#fff; border-color:var(--pine); }
.button--light { background:var(--paper-deep); color:var(--pine); border-color:var(--line); }
.section-visual { display:none; }
.section-body { padding:clamp(20px,3vw,40px); }
.section-heading h2 { font-size:clamp(1.6rem,2.8vw,2.4rem); }
.section-number { color:var(--line); }
.section-summary { display:none; }
.section-card { border-top:3px solid var(--line); }
.part-transcript__language { min-width:0; }
.part-transcript__paragraph { line-height:1.85; }
.credits { width:100%; max-width:100%; padding-top:8px; }
.credits summary { min-height:44px; cursor:pointer; }
.credits p { font-size:.78rem; overflow-wrap:anywhere; }
.credits a { color:inherit; text-underline-offset:3px; }
.footer__inner { flex-wrap:wrap; }
@media(min-width:961px) { .side-rail { width:180px; } .page-shell { grid-template-columns:180px minmax(0,1fr); } }
@media(max-width:960px) {
 .hero { min-height:350px; height:auto; }
 .hero__content { padding-top:48px; padding-bottom:42px; }
 .control-bar__inner { grid-template-columns:auto auto; gap:10px 18px; }
 .theme-control { grid-column:1/-1; justify-self:start; }
 .overview-grid { gap:12px; }
}
@media(max-width:700px) {
 .hero { min-height:315px; }
 .hero__content { padding-top:38px; padding-bottom:30px; }
 .hero h1 { font-size:clamp(2.4rem,9.5vw,3.5rem); }
 .hero__title-zh { font-size:1.6rem; }
 .hero__subtitle { font-size:.95rem; }
 .hero__subtitle-zh { font-size:.82rem; }
 .control-bar__inner { display:flex; flex-wrap:wrap; gap:10px 14px; min-width:0; }
 .segmented { flex-wrap:wrap; }
 .theme-control { width:100%; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px; }
 .transcript-toggle { display:none; }
 .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .overview-card > img { height:100px; }
 .overview-card__body { padding:10px; }
 .overview-card h3 { font-size:.85rem; min-height:4.4em; }
 .overview-card .button { padding:8px 6px; font-size:.73rem; }
 .overview-card .part-transcript summary { font-size:.67rem; }
 .overview-card .part-transcript__paragraph { font-size:.82rem; }
 .page-shell { padding-top:18px; }
 .intro { padding:18px 12px; }
 .section-body { padding:18px 14px; }
 .part-transcript__body { grid-template-columns:minmax(0,1fr); }
 .section-heading { gap:8px; }
 .section-heading h2 { font-size:1.6rem; }
 .section-number { font-size:2.7rem; }
}
@media(max-width:360px) { .overview-grid { grid-template-columns:minmax(0,1fr); } .overview-card h3 { min-height:0; } .overview-card > img { height:140px; } }

/* One mobile player, shared by paragraphs, versions and sentence references. */
.mobile-audio-dock { display:none; }
@media (max-width:960px) {
  #accent-control, #speed-control, .prosody-study__accent-switch { display:none; }
  /* The active reference moves out of this source panel into the shared dock. */
  .sentence-card--mobile-split-trial .sentence-practice-details__body > .prosody-study,
  .sentence-card--mobile-split-trial .sentence-practice-details__summary-desktop {
    display:none;
  }
  .sentence-card--mobile-split-trial .sentence-practice-details__summary-mobile {
    display:block;
  }
  .sentence-card--mobile-split-trial .sentence-practice-details__body {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"recorder";
  }
  .sentence-card--mobile-split-trial .recorder__quick {
    grid-column:1 / -1;
  }
  .levels-mobile .level-part__head { align-items:flex-start; flex-direction:column; }
  .mobile-audio-dock:not([hidden]) {
    display:block;
    position:fixed;
    top:max(8px,env(safe-area-inset-top));
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    max-width:660px;
    margin-inline:auto;
    padding:8px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    color:var(--ink);
    box-shadow:var(--shadow);
    z-index:80;
    touch-action:pan-y pinch-zoom;
  }
  .mobile-audio-dock [hidden] { display:none !important; }
  .mobile-audio-dock__head { display:flex; align-items:center; gap:4px; }
  .mobile-audio-dock__caption { flex:1; min-width:0; padding-inline:3px; }
  .mobile-audio-dock__title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.74rem; line-height:1.35; font-weight:700; overflow-wrap:anywhere; }
  .mobile-audio-dock__status { display:block; font-size:.65rem; color:var(--muted); margin-top:2px; }
  .mobile-audio-dock__action { flex:0 0 44px; width:44px; min-height:44px; padding:4px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--pine); font-size:1rem; cursor:pointer; }
  .mobile-audio-dock__body { max-height:calc(55vh - 60px); max-height:calc(55svh - 60px); overflow-y:auto; overscroll-behavior-y:auto; padding-top:7px; }
  .mobile-audio-dock__settings { display:grid; grid-template-columns:2fr 3fr; gap:8px; }
  .mobile-audio-dock__accent, .mobile-audio-dock__speed { display:flex; gap:4px; min-width:0; }
  .mobile-audio-dock__choice { flex:1; min-width:44px; min-height:44px; padding:3px; font:inherit; font-size:.7rem; font-weight:600; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--pine); cursor:pointer; white-space:nowrap; }
  .mobile-audio-dock__choice[aria-pressed="true"] { background:var(--pine); color:#fff; border-color:var(--pine); font-weight:800; }
  .mobile-audio-dock__choice:disabled { opacity:.55; cursor:not-allowed; }
  .mobile-audio-dock .sentence-mobile-prosody-float:not([hidden]) { display:block; position:static; max-width:none; max-height:none; overflow:visible; padding:0; margin:6px 0 0; border:0; box-shadow:none; background:transparent; }
  .mobile-audio-dock .sentence-mobile-prosody-float__recording-bar { display:block; margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--danger); font-size:.7rem; font-weight:700; }
  .mobile-audio-dock .sentence-mobile-prosody-float__stress { background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:7px; font-size:.78rem !important; line-height:1.6 !important; margin:6px 0 0; }
  .mobile-audio-dock .sentence-mobile-prosody-float__chart { width:100%; margin-top:4px; }
}

@media (max-width:700px) {
  .sentence-card--mobile-split-trial .recorder__quick .button {
    flex:1 1 calc(50% - 0.35rem);
    width:auto;
    font-size:0.85rem;
  }
  .sentence-card--mobile-split-trial .recorder__title {
    font-size:0.95rem;
  }
}