:root {
  color-scheme: dark;
  --work-bg: #101720;
  --work-panel: #151f2a;
  --work-ink: #eef5f4;
  --work-soft: #b4c5c7;
  --work-muted: #819499;
  --work-cyan: #7be6d1;
  --work-amber: #e5b76d;
  --work-line: rgba(222, 241, 238, 0.16);
}

* { box-sizing: border-box; }

html { background: var(--work-bg); }

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  background: var(--work-bg);
  color: var(--work-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
a { font: inherit; }

button { cursor: pointer; }

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

.skip-link {
  position: fixed;
  z-index: 3;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  border-radius: 6px;
  background: var(--work-cyan);
  color: #06241f;
  padding: 10px 12px;
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.work-topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--work-line);
  padding: 10px max(20px, calc((100vw - 1120px) / 2));
}

.work-back {
  width: max-content;
  color: var(--work-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.work-back::before { content: "← "; color: var(--work-cyan); }

.work-brand {
  color: var(--work-cyan);
  font-size: 12px;
  font-weight: 900;
}

.work-status {
  justify-self: end;
  color: var(--work-soft);
  font-size: 12px;
  font-weight: 800;
}

.speech-work { width: min(100%, 1120px); margin: 0 auto; padding: 0 32px 64px; }

.work-loading,
.work-error {
  min-height: 62dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--work-soft);
  text-align: center;
}

.work-loading[hidden],
.work-error[hidden],
.work-article[hidden] { display: none !important; }

.work-loading img { width: 52px; height: 52px; object-fit: contain; transform: scale(2.25); }

.work-error h1 { margin: 0; color: var(--work-ink); font-size: 28px; }
.work-error p { max-width: 440px; margin: 0; line-height: 1.6; }
.work-error a { color: var(--work-cyan); font-weight: 800; }

.work-hero {
  min-height: min(52dvh, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: end;
  gap: 28px;
  border-bottom: 1px solid var(--work-line);
  padding: 70px 0 44px;
}

.work-hero-copy { max-width: 760px; }
.work-kicker,
.speech-section-label,
.work-quote > span {
  margin: 0 0 12px;
  color: var(--work-cyan);
  font-size: 12px;
  font-weight: 900;
}

.work-hero h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--work-ink);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: 0;
}

.work-subtitle { max-width: 580px; margin: 20px 0 0; color: var(--work-soft); font-size: 18px; line-height: 1.55; }

.work-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; color: var(--work-muted); font-size: 13px; font-weight: 700; }
.work-meta span + span { border-left: 1px solid var(--work-line); padding-left: 18px; }

.work-hero-actions { display: grid; gap: 8px; align-self: end; min-width: 164px; }

.speech-play,
.speech-stop,
.line-play {
  min-height: 44px;
  border: 1px solid var(--work-line);
  border-radius: 7px;
  background: transparent;
  color: var(--work-ink);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.speech-play:hover,
.speech-stop:hover,
.line-play:hover { border-color: rgba(123, 230, 209, 0.6); background: rgba(123, 230, 209, 0.09); }
.speech-play:active,
.speech-stop:active,
.line-play:active { transform: scale(0.97); }
.speech-play.is-primary { border-color: var(--work-cyan); background: var(--work-cyan); color: #06241f; }
.speech-play:disabled,
.speech-stop:disabled,
.line-play:disabled { cursor: wait; opacity: 0.56; }

.work-quote {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--work-line);
  padding: 34px 0;
}

.work-quote blockquote { max-width: 890px; margin: 0; color: #d9f3ee; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 3.1vw, 40px); line-height: 1.32; }
.work-quote blockquote::before { content: "“"; color: var(--work-amber); }
.work-quote blockquote::after { content: "”"; color: var(--work-amber); }

.speech-sections { display: grid; }

.speech-section {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 52px;
  gap: 24px;
  align-items: start;
  border-bottom: 1px solid var(--work-line);
  padding: 42px 0;
}

.speech-section-number { color: var(--work-amber); font-size: 13px; font-weight: 900; line-height: 1.6; }
.speech-section-copy { min-width: 0; max-width: 790px; }
.speech-section-label { margin-bottom: 6px; }
.speech-section h2 { margin: 0; color: var(--work-ink); font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: 0; }
.speech-lines { display: grid; gap: 10px; margin-top: 20px; }

.speech-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.speech-line p { margin: 0; color: var(--work-soft); font-size: 18px; line-height: 1.62; }
.line-play { min-width: 58px; color: var(--work-cyan); }

.speech-section-mascot {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
  transform: scale(2.25);
}

.work-closing { display: flex; align-items: center; gap: 16px; padding: 38px 0 6px 66px; }
.work-closing img { width: 52px; height: 52px; object-fit: contain; transform: scale(2.25); }
.work-closing p { max-width: 680px; margin: 0; color: #d9f3ee; font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.45; }

@media (max-width: 720px) {
  .work-topbar { grid-template-columns: 1fr auto; padding-inline: 18px; }
  .work-brand { display: none; }
  .speech-work { padding: 0 20px 44px; }
  .work-hero { min-height: 0; grid-template-columns: 1fr; gap: 24px; padding: 54px 0 32px; }
  .work-hero h1 { max-width: none; font-size: 42px; }
  .work-hero-actions { width: 100%; grid-template-columns: 1fr 1fr; }
  .work-subtitle { font-size: 16px; }
  .work-meta span + span { border-left: 0; padding-left: 0; }
  .speech-section { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 30px 0; }
  .speech-section-mascot { display: none; }
  .speech-line { grid-template-columns: 1fr; gap: 8px; }
  .speech-line p { font-size: 17px; }
  .line-play { width: 100%; }
  .work-closing { padding-left: 0; }
  .work-quote blockquote { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Editorial light treatment for a finished learner-created article. */
:root {
  color-scheme: light;
  --work-bg: #eef0f2;
  --work-panel: #ffffff;
  --work-ink: #27313b;
  --work-soft: #5d6974;
  --work-muted: #7b8791;
  --work-cyan: #3b8f8a;
  --work-amber: #a97836;
  --work-line: rgba(71, 85, 105, 0.18);
}

html,
body { background: var(--work-bg); color: var(--work-ink); }

.work-topbar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(71, 85, 105, 0.16);
}

.work-back { color: #52606b; }
.work-brand { color: #367e7a; }
.work-status { color: #687580; }
.speech-work { width: min(100%, 1120px); }

.work-hero {
  min-height: 0;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.52);
  padding: 42px 28px 34px;
}

.work-hero-image-wrap { width: 180px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #dce1e5; }
.work-topic-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.work-hero h1 { max-width: 22ch; color: #27313b; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
.work-subtitle { color: #5d6974; font-size: 17px; }
.work-kicker,
.speech-section-label,
.work-quote > span { color: #3b8f8a; }
.work-meta { color: #7b8791; }
.work-meta span + span { border-left-color: rgba(71, 85, 105, 0.22); }

.work-author { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: #52606b; }
.work-author img { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; background: #dce1e5; }
.work-author span { display: grid; gap: 2px; }
.work-author b { color: #34414b; font-size: 13px; }
.work-author small { color: #7b8791; font-size: 11px; }

.speech-play,
.speech-stop,
.line-play { border-color: rgba(71, 85, 105, 0.24); color: #34414b; background: rgba(255, 255, 255, 0.72); }
.speech-play:hover,
.speech-stop:hover,
.line-play:hover { border-color: rgba(59, 143, 138, 0.6); background: #f0f7f6; }
.speech-play.is-primary { border-color: #3b8f8a; background: #3b8f8a; color: #ffffff; }
.work-quote blockquote { color: #3e5960; }
.speech-section h2 { color: #303b45; }
.speech-section-number { color: #a97836; }
.speech-line p { color: #5d6974; }
.line-play { color: #367e7a; }
.work-closing p { color: #3e5960; }

@media (max-width: 720px) {
  .work-hero { grid-template-columns: 1fr; padding: 28px 0 30px; background: transparent; }
  .work-hero-image-wrap { width: min(100%, 320px); }
  .work-hero h1 { font-size: 38px; }
}