.hero {
  position: relative;
  overflow: hidden;
  background-color: #063a46;
  background-image:
    linear-gradient(90deg, rgba(3, 18, 27, .30) 0%, rgba(3, 18, 27, .13) 55%, rgba(3, 18, 27, .28) 100%),
    url("assets/retro-english-lab-hero.png");
  background-position: center, center 45%;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom-color: rgba(190, 224, 213, .16);
}

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

.hero .back,
.hero h1,
.hero .intro {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38);
}

.controls .stop {
  background: transparent;
  border: 1px solid #75697a;
}

.hero .recommendations {
  margin-top: 12px;
}

.segment-settings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #dbe9dc;
  font-size: 13px;
  font-weight: 700;
}

.segment-settings > span {
  margin-right: 2px;
}

.segment-settings button {
  border: 1px solid #4e7a7a;
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(5, 37, 47, .48);
  color: #fff0c5;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.segment-settings button[aria-pressed="true"] {
  border-color: #e46b39;
  background: #185660;
  color: #fff8e7;
}

.video-form .subtitle-download {
  border: 1px solid #78627d;
  border-radius: 12px;
  padding: 14px 17px;
  background: #312a37;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.video-form .subtitle-download:hover {
  border-color: #c34ceb;
  background: #452150;
}

.playback-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #c6bacd;
  font-size: 13px;
}

.listen-mode,
.speed-setting {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.listen-mode > span {
  margin-right: 2px;
}

.listen-mode button,
.speed-setting select {
  border: 1px solid #665a6d;
  border-radius: 8px;
  background: #29242e;
  color: #e5ddea;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.listen-mode button {
  padding: 7px 9px;
}

.listen-mode button[aria-pressed="true"] {
  border-color: #c34ceb;
  background: #452150;
  color: #fff;
}

.speed-setting select {
  padding: 7px 9px;
}

.speed-setting-primary,
.speed-toggle {
  margin-left: auto;
  color: #c6bacd;
  font-size: 13px;
}

.speed-toggle {
  border: 1px solid #665a6d;
  border-radius: 9px;
  padding: 9px 12px;
  background: #29242e;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.speed-toggle.is-slow {
  border-color: #c34ceb;
  background: #452150;
}

.playback-options .translation {
  border: 1px solid #6d5c73;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: #e5ddea;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mirror-drawer {
  position: relative;
  margin: 2px 0 18px;
}

.mirror-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #765785;
  border-radius: 999px;
  padding: 8px 12px;
  background: #211725;
  color: #ead8f3;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.mirror-drawer.is-open .mirror-toggle {
  border-color: #c34ceb;
  background: #452150;
}

.mirror-stage {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .25s ease, opacity .2s ease;
}

.mirror-drawer.is-open .mirror-stage {
  grid-template-rows: 1fr;
  opacity: 1;
}

.mirror-stage > * {
  min-height: 0;
}

.mirror-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #7d4990;
  border-radius: 15px;
  background: radial-gradient(circle at 50% 20%, #3a2344, #151119 70%);
}

.mirror-frame::after {
  position: absolute;
  right: 11px;
  bottom: 9px;
  content: "MIRROR";
  color: #ead8f3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  opacity: .75;
}

#mirrorVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.mirror-status {
  margin: 8px 0 0;
  color: #bcaec3;
  font-size: 12px;
  line-height: 1.5;
}

.mirror-status.error {
  color: #ffafbc;
}

.workbench {
  align-items: stretch;
}

.left,
.transcript-panel {
  min-width: 0;
  min-height: 0;
}

/* On larger screens the transcript panel shares the same grid-row height as
   the video and practice area.  The list takes only the remaining room, so
   opening the mirror reduces visible sentences instead of extending the page. */
.transcript-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mirror-drawer {
  flex: 0 0 auto;
}

.transcript,
.mirror-drawer.is-open + .transcript {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 900px) {
  .transcript-panel {
    display: block;
    overflow: visible;
  }

  .transcript,
  .mirror-drawer.is-open + .transcript {
    display: block;
    height: auto;
    max-height: 600px;
  }
}

@media (max-width: 560px) {
  .playback-options {
    align-items: flex-start;
  }

  .speed-setting {
    width: 100%;
    justify-content: space-between;
  }

  .speed-setting-primary {
    width: auto;
    margin-left: 0;
  }

  .speed-toggle {
    margin-left: 0;
  }

  .transcript,
  .mirror-drawer.is-open + .transcript {
    height: auto;
    max-height: 390px;
  }
}

/* Retro teal colour system sampled from the hero artwork. */
:root {
  --bg: #061a23;
  --panel: #0b2c36;
  --line: #27535e;
  --ink: #fff4d6;
  --muted: #c6d3c9;
  --purple: #d9552e;
  --purple-soft: #12424c;
}

body {
  background: var(--bg);
}

.back {
  color: #fff0c5;
}

.eyebrow {
  color: #f1b544;
}

.intro {
  color: #d8e2d7;
}

.video-form input {
  border-color: #4d767a;
  background: #082631;
  color: #fff8e7;
}

.video-form input:focus,
button:focus-visible {
  outline: 3px solid #8fc8c0;
  outline-offset: 2px;
}

.primary,
.controls .record {
  background: #d9552e;
  color: #fff9e9;
}

.primary:hover,
.controls .record:hover {
  background: #ea6938;
}

.file-button,
.video-form .subtitle-download {
  border-color: #4d767a;
  background: #103842;
  color: #fff1ce;
}

.file-button:hover,
.video-form .subtitle-download:hover {
  border-color: #e46b39;
  background: #164955;
}

.player-shell {
  background: #082630;
  box-shadow: 0 0 0 1px rgba(239, 184, 70, .18);
}

.empty-player {
  color: #dbe5d7;
  background: radial-gradient(circle at 50% 22%, #14515b, #07212a 72%);
}

.status,
.record-status {
  color: #c4d7cc;
}

.recommendations button {
  border-color: #4e7a7a;
  background: rgba(5, 37, 47, .46);
  color: #fff0c5;
}

.recommendations button:hover {
  border-color: #efb94a;
  background: #123f49;
}

.practice {
  background: #0b2c36;
  box-shadow: inset 0 0 0 1px rgba(102, 155, 150, .13);
}

.practice > p:first-child,
.number {
  color: #b8cbc0;
}

.controls button {
  background: #173943;
  color: #fff4d6;
}

.controls .stop {
  border-color: #4d767a;
  background: transparent;
  color: #dbece2;
}

.controls .record.is-recording {
  background: #c94138;
}

.record-status.error,
.mirror-status.error {
  color: #ffad8d;
}

.sentence {
  border-color: #315660;
  background: #0c2933;
  color: #fff5dc;
}

.sentence:hover {
  border-color: #629496;
  background: #10333d;
}

.sentence.active {
  border-color: #e46b39;
  background: #12434d;
  box-shadow: inset 0 0 0 1px #e46b39;
}

.chinese {
  color: #f3c45b;
}

.listen-mode,
.playback-options,
.speed-setting-primary,
.speed-toggle {
  color: #c6d7cd;
}

.listen-mode button,
.speed-setting select,
.speed-toggle,
.playback-options .translation {
  border-color: #4b777c;
  background: #12343e;
  color: #fff0cc;
}

.listen-mode button[aria-pressed="true"],
.speed-toggle.is-slow {
  border-color: #e46b39;
  background: #185660;
  color: #fff6df;
}

.playback-options .translation {
  background: transparent;
}

.mirror-toggle {
  border-color: #57868a;
  background: #103641;
  color: #fff0c5;
}

.mirror-drawer.is-open .mirror-toggle {
  border-color: #e46b39;
  background: #185660;
}

.mirror-frame {
  border-color: #4d767a;
  background: radial-gradient(circle at 50% 20%, #1d5a60, #08232c 70%);
}

.mirror-frame::after {
  color: #fff0c5;
}

.mirror-status {
  color: #c2d4c7;
}