:root {
  color-scheme: light;
  --paper: #f5f3eb;
  --ink: #172820;
  --muted: #4e5d54;
  --forest: #163a30;
  --light: #fffdf5;
  --gold: #f6d994;
  --line: #d5d8ca;
  --focus: #285cbd;
  --gutter: 1.125rem;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, select { font: inherit; }
button, summary, select { cursor: pointer; }
button, a, summary, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.container {
  width: min(100% - var(--gutter) - var(--gutter), 42rem);
  margin-inline: auto;
}

.topbar { border-bottom: 1px solid var(--line); }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.6875rem;
}
.brand { font-weight: 750; letter-spacing: 0.07em; }
main { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }
.intro { padding-block: 1.6875rem 1.5rem; }
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.dot { width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #718076; }
h1, h2 { line-height: 1.18; margin: 0; }
h1 { font-size: clamp(2.1rem, 8vw, 3.15rem); font-weight: 780; letter-spacing: -0.035em; }
h2 { font-size: 1.34rem; }
p { margin: 0.625rem 0 0; }
.goal { color: var(--muted); }

.listen {
  padding: 1.375rem;
  border-radius: 1.0625rem;
  color: var(--light);
  background: var(--forest);
}
.listen > p, .listen .translation { color: #e5eee5; }
.listen :focus-visible { outline-color: var(--gold); }
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.0625rem; }
.button {
  min-height: 2.875rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.4375rem 0.875rem;
  font-weight: 690;
}
.primary { padding-inline: 1.125rem; color: #29251b; background: var(--gold); }
.secondary { color: var(--forest); background: var(--light); border-color: #a7b5a9; }
.button:active { filter: brightness(0.92); }
.button[aria-pressed="true"] { color: var(--light); background: var(--forest); }
.play::before {
  content: "";
  display: inline-block;
  margin-right: 0.55em;
  border: 0.36em solid transparent;
  border-left: 0.57em solid currentColor;
  border-right: 0;
}
.play[data-playing]::before {
  width: 0.55em;
  height: 0.65em;
  border: 0;
  background: linear-gradient(90deg, currentColor 32%, transparent 32% 68%, currentColor 68%);
}
.rate { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.875rem; }
.rate select {
  min-height: 2.75rem;
  padding: 0 0.5rem;
  border: 1px solid #8ca79c;
  border-radius: 0.4375rem;
  color: var(--light);
  background: var(--forest);
}
.lesson-rate { margin: 0 0 1rem; color: var(--muted); }
.lesson-rate select { background: var(--light); color: var(--forest); }
.audio-kind { color: #e5eee5; font-size: 0.875rem; }
.human-audio { margin: 0 0 1.125rem; padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; }
.audio-credit { margin-top: 0.5rem; overflow-wrap: anywhere; }
.audio-credit a { color: var(--forest); }
.connected-focus { color: var(--forest); }
#grammar-topic { margin: 0.65rem 0 0; font-size: 1.06rem; }
.feedback { font-size: 0.875rem; }
.feedback:empty { display: none; }

details { margin-top: 0.75rem; border-top: 1px solid var(--line); }
.listen details { border-color: #627f72; }
summary { padding: 0.625rem 0; min-height: 2.75rem; font-weight: 620; }
details p { margin: 0 0 0.4375rem; }
details p:last-child { margin-bottom: 0; }
.block { margin-top: 1.6875rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.instruction { margin-top: 1px; color: var(--muted); font-size: 0.94rem; }
.phrases { margin: 0.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.phrases li { padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.phrases p { margin: 0; }
.english { font-family: "Atkinson Hyperlegible Next", "Inter", system-ui, sans-serif; font-size: 1.12rem; font-weight: 630; overflow-wrap: anywhere; }
.translation { color: var(--muted); font-size: 0.94rem; }
.finish { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.4375rem; }
.finish p { margin: 0; }
.course-directory { margin: 0 0 1.125rem; border-bottom: 1px solid var(--line); }
.course-directory ol { margin: 0 0 0.5rem; padding: 0; list-style: none; }
.course-directory a { display: block; min-height: 2.75rem; padding: 0.5625rem 0.75rem; color: var(--forest); }
.course-directory a[aria-current="page"] { border-radius: 0.5rem; background: var(--light); font-weight: 700; }
.lesson-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.lesson-nav a { display: inline-flex; align-items: center; text-decoration: none; }

@media (min-width: 650px) {
  :root:not(.virtual-phone) .intro { padding-block: 2.3125rem 1.75rem; }
  :root:not(.virtual-phone) .listen { padding: 1.625rem 1.875rem; }
}

@media (max-width: 649px) {
  :root { font-size: 18px; --gutter: 0.875rem; }
}

:root.virtual-phone { font-size: calc(18px * var(--phone-scale)); --gutter: 0.875rem; }
.brand { color: var(--ink); text-decoration: none; }
audio { display: block; width: 100%; margin-top: 0.75rem; }
#rate { background: var(--light); color: var(--ink); }
[lang="ja"] { font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", "Noto Sans CJK JP", sans-serif; }
p[lang="ja"] { font-size: 1.08rem; line-height: 1.85; overflow-wrap: anywhere; }
.listen .phrases { margin-bottom: 0; }
.listen .phrases li { border-color: #627f72; }
.audio-credit { margin-top: 1.5rem; }