:root {
  --type:
    'Helvetica Neue', Helvetica, 'Nimbus Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Yu Gothic', 'Noto Sans JP', sans-serif;
  --margin: 20px;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  --tabs-h: 74px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --disc: 184px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--kami);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--kami);
  color: var(--sumi);
  font-family: var(--type);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button:focus-visible {
  outline: 3px solid var(--sumi);
  outline-offset: 3px;
}

ol,
ul {
  list-style: none;
}

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

.screen {
  position: relative;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--top) var(--margin) calc(var(--tabs-h) + var(--bottom) + 24px);
  overflow: hidden;
}

.toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-top: 10px;
}

.help-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -2px;
  border: 2px solid var(--sumi);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 80ms linear,
    color 80ms linear;
}

.practice .help-btn {
  flex: none;
}

.help-btn.is-pressed {
  background: var(--sumi);
  color: var(--kami);
  transition: none;
}

.notice {
  margin-top: 8px;
  max-width: 34ch;
  font-size: 15px;
  color: var(--sumi);
}

.dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mist);
}

.dot-met,
.sample-met {
  background: transparent;
  box-shadow: none;
  border: 2px solid var(--sumi);
}

.dot-known,
.sample-known {
  background: var(--hinomaru);
}

.five {
  display: flex;
  gap: 12px;
}

.practice .five-ten {
  gap: 8px;
}

.today-dots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dot-key {
  display: flex;
  gap: 16px;
  font-size: 13px;
  line-height: 16px;
  color: var(--sumi);
}

.dot-key li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot-key .dot {
  width: 10px;
  height: 10px;
}

.dot-key .sample-met {
  border-width: 1.5px;
}

.done .dot-key {
  margin-top: 4px;
}

.slot {
  position: relative;
  padding-bottom: 8px;
  padding-top: 8px;
}

.slot.is-current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sumi);
}

.situation {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--stone);
  font-size: 15px;
}

.picto {
  flex: none;
  color: var(--sumi);
}

.practice-situation {
  margin-top: 40px;
}

.flood-japanese {
  font-size: clamp(36px, 11vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.english {
  max-width: 10em;
  margin-top: 16px;
  font-size: clamp(32px, 9.6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.instruction {
  width: fit-content;
  max-width: 100%;
}

.flood-romaji {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.instruction {
  margin-top: 24px;
  color: var(--stone);
}

.unsure {
  margin-top: 4px;
  color: var(--stone);
}

.disc,
.sun,
.intro-sun {
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    var(--hinomaru) 0,
    var(--hinomaru) 92%,
    var(--beni) 100%
  );
}

.reveal-disc {
  position: absolute;
  right: -24px;
  bottom: calc(var(--tabs-h) + var(--bottom) + 32px);
  width: var(--disc);
  height: var(--disc);
  padding-right: 24px;
  color: var(--kami);
  font-size: 20px;
  font-weight: 700;
  transition: background 80ms linear;
}

.reveal-disc.is-pressed {
  background: var(--beni);
  transition: none;
}

.reveal-disc:focus-visible {
  outline-offset: 4px;
}

#flood {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--top) var(--margin) calc(var(--bottom) + 20px);
  color: var(--kami);
  background: radial-gradient(
    circle farthest-corner at var(--cx, 70%) var(--cy, 70%),
    var(--hinomaru) 0,
    var(--hinomaru) 92%,
    var(--beni) 100%
  );
  opacity: 1;
  will-change: clip-path;
}

#flood.is-draining {
  opacity: 0;
}

#flood > * {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
  visibility: hidden;
}

#flood.is-inked > * {
  visibility: visible;
}

.help-on-red {
  border-color: var(--kami);
  color: var(--kami);
}

.help-on-red.is-pressed {
  background: var(--kami);
  color: var(--hinomaru);
}

.help-on-red:focus-visible,
.answer:focus-visible {
  outline-color: var(--kami);
}

.flood-text {
  flex: 1;
  padding-top: 24px;
}

.flood-japanese {
  margin-top: 16px;
}

.chunk {
  display: inline-block;
}

.flood-english {
  margin-top: 32px;
  max-width: 20em;
  font-size: 17px;
  line-height: 1.3;
}

.listen {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  margin-left: -2px;
  color: var(--kami);
  font-size: 17px;
  font-weight: 700;
}

.listen[hidden] {
  display: none;
}

.listen-ring {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding-left: 4px;
  border: 2px solid var(--kami);
  border-radius: 50%;
  transition:
    background-color 80ms linear,
    color 80ms linear;
}

.listen.is-playing .listen-ring,
.listen.is-pressed .listen-ring {
  background: var(--kami);
  color: var(--hinomaru);
}

.listen:focus-visible {
  outline-color: var(--kami);
}

.grade-guide {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.3;
}

.answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.answer {
  height: 64px;
  font-size: 18px;
  font-weight: 700;
  transition:
    background-color 80ms linear,
    color 80ms linear;
}

.answer-notyet {
  border: 2px solid var(--kami);
  color: var(--kami);
}

.answer-notyet.is-pressed {
  background: var(--kami);
  color: var(--sumi);
  transition: none;
}

.answer-got {
  background: var(--kami);
  color: var(--sumi);
}

.answer-got.is-pressed {
  background: var(--mist);
  transition: none;
}

.sun {
  position: absolute;
  top: calc(var(--top) + 76px);
  right: var(--margin);
  width: 136px;
  height: 136px;
}

.streak-block {
  margin-top: 128px;
  margin-left: 0;
}

.done-offer .streak-block {
  margin-top: 96px;
}

.done-locked {
  height: 100dvh;
  overflow-y: auto;
  padding-bottom: calc(var(--tabs-h) + var(--bottom) + 24px);
}

.done-locked .streak-block {
  margin-top: 70px;
}

.done.done-locked .five {
  margin-top: 28px;
}

.done-locked .more-note {
  margin-top: 16px;
}

.numeral {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.streak {
  display: flex;
  margin-left: -9px;
  font-size: 160px;
}

.digit {
  display: inline-block;
  height: 0.85em;
  overflow: hidden;
}

.digit-strip {
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--ease);
}

.digit-strip.is-rolled {
  transform: translateY(-50%);
}

.digit-face {
  display: block;
  height: 0.85em;
}

.numeral-label {
  margin-top: 16px;
  font-size: 15px;
}

.done .five {
  margin-top: 40px;
}

.tomorrow {
  margin-top: 24px;
  color: var(--stone);
}

.not-yet-first {
  color: var(--stone);
}

.more-btn {
  display: block;
  min-width: 168px;
  height: 64px;
  margin-top: 28px;
  padding: 0 24px;
  background: var(--sumi);
  color: var(--kami);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.more-btn.is-pressed {
  background: var(--stone);
}

.more-btn:focus-visible {
  outline-offset: 4px;
}

.more-note {
  margin-top: 24px;
  max-width: 28ch;
  font-size: 15px;
}

.done-mixed {
  margin-top: 8px;
  max-width: 30ch;
}

.known-count {
  margin-top: 16px;
  margin-left: -7px;
  font-size: 144px;
}

.invite {
  margin-top: 16px;
  max-width: 24ch;
  font-size: 15px;
}

.known-note {
  margin-top: 6px;
  color: var(--stone);
  font-size: 13px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 32px;
  color: var(--stone);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.group {
  margin-top: 32px;
}

.group-head {
  color: var(--sumi);
}

.field,
.harder-field {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  margin-top: 8px;
  margin-left: -10px;
  margin-right: -10px;
}

.field-cell {
  position: relative;
  display: grid;
  place-items: center;
  height: 36px;
}

.field .dot,
.harder-field .dot {
  width: 16px;
  height: 16px;
}

.field .dot.is-new,
.harder-field .dot.is-new {
  animation: fill-known 160ms linear both;
}

@keyframes fill-known {
  from {
    background: transparent;
    border: 2px solid var(--sumi);
  }
  to {
    background: var(--hinomaru);
    border: 0 solid var(--hinomaru);
  }
}

.strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabs-h) + var(--bottom));
  z-index: 8;
  max-width: 430px;
  margin: 0 auto;
  padding: 20px var(--margin) 20px;
  background: var(--sumi);
  color: var(--kami);
}

.strip .text-btn:focus-visible {
  outline-color: var(--kami);
}

.field-cell.is-selected::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  background: var(--sumi);
}

.strip-english {
  margin-top: 8px;
  font-size: 15px;
}

.strip-japanese {
  padding-right: 72px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  line-break: strict;
}

.strip-romaji {
  margin-top: 4px;
  font-size: 17px;
}

.text-btn {
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.strip-close {
  position: absolute;
  top: 6px;
  right: 16px;
}

#tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 var(--margin) var(--bottom);
  background: var(--kami);
}

.nav-top {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  max-width: 390px;
  height: 18px;
  margin: 0 auto;
  color: var(--stone);
  font-size: 13px;
  line-height: 18px;
}

.sync-status {
  flex: none;
}

.nav-top .user-name {
  font-size: 13px;
}

.tabs-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, auto) 1fr;
  column-gap: clamp(7px, 2vw, 12px);
  max-width: 390px;
  height: calc(var(--tabs-h) - 18px);
  margin: 0 auto;
}

.tabs-inner .sign-out {
  justify-self: end;
  padding-top: 10px;
}

.tab {
  height: 100%;
  padding-top: 10px;
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 700;
  color: var(--stone);
}

/* Alternating greys keep neighbouring tab words apart. */
.tab:nth-child(even of .tab) {
  color: var(--ash);
}

.tab[aria-current='page'] {
  color: var(--sumi);
}

.tab-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: var(--hinomaru);
  transition:
    transform 120ms var(--ease),
    width 120ms var(--ease);
}

.intro {
  padding-bottom: calc(var(--bottom) + 12px);
  display: flex;
  flex-direction: column;
}

.intro-sun {
  position: absolute;
  top: calc(var(--top) + 8px);
  right: -22px;
  width: 96px;
  height: 96px;
}

.intro-title {
  margin-top: 114px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.steps {
  counter-reset: step;
  margin-top: 24px;
  font-size: 17px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 4px 0;
}

.steps li::before {
  content: counter(step);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.body {
  margin-top: 16px;
  max-width: 34ch;
}

.quiet {
  color: var(--stone);
}

.block-btn {
  width: 100%;
  height: 64px;
  margin-top: auto;
  background: var(--sumi);
  color: var(--kami);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  padding: 0 20px;
  transition: background-color 80ms linear;
}

.block-btn.is-pressed {
  background: var(--stone);
  transition: none;
}

.intro-start {
  flex: none;
  margin-top: auto;
}

.legacy-intro .intro-title {
  margin-top: 112px;
}

.legacy-intro .steps {
  margin-top: 12px;
}

.legacy-intro .name-label {
  margin-top: 12px;
}

.legacy-intro .name-hint {
  margin-bottom: 12px;
}

.restore-progress {
  min-height: 44px;
  padding: 0;
  margin-bottom: 12px;
  align-self: flex-start;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sign-in {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.name-label {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
}

.name-input {
  width: 100%;
  height: 56px;
  margin-top: 8px;
  padding: 0 16px;
  border: 2px solid var(--sumi);
  border-radius: 0;
  background: var(--kami);
  color: var(--sumi);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  appearance: none;
}

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

.name-hint {
  min-height: 24px;
  margin-bottom: 24px;
  padding-top: 6px;
  font-size: 15px;
}

.name-hint.is-error {
  color: var(--hinomaru);
  font-weight: 700;
}

.other-names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  margin: -8px 0 16px;
}

.other-label {
  font-size: 15px;
}

.other-name {
  padding: 0;
  font-size: 17px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.user-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
  padding-top: 10px;
}

.user-name {
  overflow: hidden;
  min-width: 0;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-out {
  flex: none;
  display: flex;
  align-items: flex-start;
  min-height: 44px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--sumi);
  text-decoration: underline;
  text-underline-offset: 4px;
}

#help {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--kami);
  transform: translateY(-100%);
  transition: transform 200ms var(--ease);
}

#help.is-open {
  transform: none;
}

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--top) + 32px) var(--margin) 24px;
}

.sheet-scroll > * {
  max-width: 390px;
}

.sheet-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.sheet-head {
  margin-top: 32px;
  font-size: 15px;
  font-weight: 700;
}

#help .legend {
  margin-top: 12px;
}

.legend-stack {
  flex-direction: column;
  color: var(--sumi);
}

.legend-stack li {
  align-items: baseline;
  gap: 12px;
}

.legend-stack .dot {
  flex: none;
  transform: translateY(2px);
}

.terms {
  margin-top: 32px;
}

.terms dt {
  margin-top: 16px;
  font-weight: 700;
}

.sheet-foot {
  padding: 12px var(--margin) calc(var(--bottom) + 16px);
}

.sheet-foot .block-btn {
  max-width: 390px;
}

#vignette,
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#vignette {
  z-index: 15;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, var(--sumi) 140%);
  opacity: 0.03;
}

#grain {
  z-index: 40;
  background-size: 128px 128px;
  mix-blend-mode: multiply;
  opacity: 0.035;
}

@media (max-height: 600px) {
  :root {
    --disc: 152px;
  }

  .done .streak-block {
    margin-top: 24px;
  }

  .done .five {
    margin-top: 24px;
  }

  .done .more-btn {
    margin-top: 20px;
  }

  .done .tomorrow {
    margin-top: 16px;
  }

  .practice-situation {
    margin-top: 24px;
  }

  .english {
    margin-top: 8px;
  }

  .instruction {
    margin-top: 16px;
  }

  .intro-sun {
    width: 112px;
    height: 112px;
  }

  .intro-title {
    margin-top: 152px;
  }

  .legacy-intro .intro-title {
    max-width: 220px;
    margin-top: 80px;
    font-size: 30px;
  }
}

@media (max-height: 430px) {
  #flood {
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

.intro .toprow {
  position: absolute;
  top: var(--top);
  right: var(--margin);
  left: var(--margin);
  z-index: 1;
}

.intro .toprow {
  justify-content: flex-start;
}

.intro .toprow span {
  display: none;
}

.intro .steps {
  margin-top: 12px;
  font-size: 15px;
}

.intro .name-label {
  margin-top: 12px;
}

.intro .name-input {
  height: 48px;
  margin-top: 4px;
}

.intro .name-hint {
  margin-bottom: 8px;
}

@media (max-height: 600px) {
  .intro-title {
    margin-top: 76px;
    font-size: 30px;
  }

  .intro-sun {
    width: 80px;
    height: 80px;
  }

  .intro .steps {
    margin-top: 4px;
  }

  .intro .steps li {
    padding: 2px 0;
  }

  .intro .name-label {
    margin-top: 6px;
  }

  .intro .name-input {
    height: 44px;
  }

  .intro .name-hint {
    margin-bottom: 0;
  }
}

.settings-open {
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--sumi);
}

.word-views {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}

.word-view {
  position: relative;
  min-height: 44px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--stone);
  text-align: left;
}

.word-view[aria-pressed='true'] {
  color: var(--sumi);
}

.word-view[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--sumi);
}

.word-search {
  width: 100%;
  height: 52px;
  margin-top: 20px;
  padding: 0 14px;
  border: 2px solid var(--sumi);
  border-radius: 0;
  background: var(--kami);
  color: var(--sumi);
  font: inherit;
  font-size: 17px;
  appearance: none;
}

.word-search::placeholder {
  color: var(--stone);
}

.word-search:focus-visible {
  outline: 3px solid var(--sumi);
  outline-offset: 3px;
}

.word-area {
  min-height: 120px;
}

.dict-note,
.dict-empty,
.mark-legend {
  margin-top: 16px;
  max-width: 34ch;
  color: var(--stone);
  font-size: 15px;
}

.dict-empty {
  color: var(--sumi);
}

.word-list {
  margin-top: 8px;
}

.word-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 12px;
  padding: 14px 0;
}

.my-word {
  grid-template-columns: 1fr;
}

.word-face {
  display: grid;
  justify-items: start;
  min-width: 0;
  min-height: 44px;
  text-align: left;
  overflow-wrap: anywhere;
}

.word-face.is-speaking .word-romaji {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.word-romaji {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.word-kana {
  font-size: 15px;
  line-height: 1.4;
}

.word-kanji {
  font-size: 24px;
  line-height: 1.3;
}

.word-en {
  margin-top: 2px;
  color: var(--stone);
  font-size: 15px;
  line-height: 1.35;
}

.word-level {
  margin-left: 8px;
  color: var(--sumi);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.word-action {
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.word-add {
  border: 2px solid var(--sumi);
}

.word-add.is-pressed {
  background: var(--sumi);
  color: var(--kami);
}

.word-action.is-mine {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--stone);
  font-size: 13px;
}

.word-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
}

.mark::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--sumi);
  background: var(--kami);
}

.mark[aria-checked='true']::before {
  content: '✓';
  display: grid;
  place-items: center;
  background: var(--sumi);
  color: var(--kami);
  font-size: 16px;
  line-height: 1;
}

.word-remove {
  margin-left: auto;
  color: var(--stone);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mark-legend li::before {
  content: '✓ ';
  color: var(--sumi);
}

.more-words {
  margin-top: 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dict-credit {
  margin-top: 40px;
  max-width: 34ch;
  color: var(--stone);
  font-size: 13px;
}

.dict-credit p + p {
  margin-top: 8px;
}

#settings {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--kami);
  transform: translateY(-100%);
  transition: transform 200ms var(--ease);
}

#settings.is-open {
  transform: none;
}

.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  align-items: start;
  margin-top: 32px;
}

.setting-name {
  font-size: 20px;
  font-weight: 700;
}

.setting-note {
  margin-top: 4px;
  color: var(--stone);
}

.switch {
  position: relative;
  width: 64px;
  height: 36px;
  margin-top: 2px;
  border: 2px solid var(--sumi);
  background: var(--kami);
}

.switch-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sumi);
  transition: transform 120ms var(--ease);
}

.switch[aria-checked='true'] {
  background: var(--sumi);
}

.switch[aria-checked='true'] .switch-knob {
  background: var(--kami);
  transform: translateX(28px);
}

.settings-credit {
  margin-top: 40px;
  font-size: 13px;
}

.settings-credit + .settings-credit {
  margin-top: 8px;
}

.offer {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 150px);
  margin-top: 24px;
}

.done .offer {
  max-width: none;
}

.offer-label {
  color: var(--stone);
  font-size: 13px;
}

.offer-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.offer-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 4px 12px 4px 10px;
  border: 2px solid var(--sumi);
  text-align: left;
}

.offer-word[aria-pressed='true'] {
  background: var(--sumi);
  color: var(--kami);
}

.offer-sign {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.offer-text {
  display: grid;
}

.offer .word-romaji {
  font-size: 15px;
}

.offer .word-kana {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  #settings,
  .switch-knob {
    transition: none;
  }
}

.radio-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.radio-intro {
  max-width: 34ch;
  margin-top: 16px;
}

.radio-player,
.radio-library {
  margin-top: 32px;
}

.radio-now-title,
.radio-list-heading {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.radio-buttons {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.radio-play {
  min-height: 56px;
  background: var(--sumi);
  color: var(--kami);
  font-size: 20px;
  font-weight: 700;
}

.radio-play.is-pressed {
  background: var(--stone);
}

.radio button:disabled {
  cursor: default;
}

.radio-play:disabled {
  background: var(--mist);
  color: var(--sumi);
}

.radio-range {
  display: block;
  width: 100%;
  height: 44px;
  margin: 8px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  accent-color: var(--sumi);
  cursor: pointer;
}

.radio-range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--sumi);
}

.radio-range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -10px;
  border: 2px solid var(--sumi);
  border-radius: 50%;
  background: var(--kami);
  appearance: none;
  -webkit-appearance: none;
}

.radio-range::-moz-range-track {
  height: 4px;
  background: var(--sumi);
}

.radio-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sumi);
  border-radius: 50%;
  background: var(--kami);
}

.radio-range:focus-visible {
  outline: 3px solid var(--sumi);
  outline-offset: 3px;
}

.radio-range:disabled {
  opacity: 0.45;
  cursor: default;
}

.radio-time,
.radio-speed-heading,
.radio-speed-labels,
.radio-episode-meta,
.radio-saved-state {
  font-variant-numeric: tabular-nums;
}

.radio-time {
  font-size: 13px;
}

.radio-speed-control {
  margin-top: 24px;
}

.radio-speed-heading {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.radio-speed-heading output {
  font-size: 20px;
  line-height: 1;
}

.radio-speed-labels {
  position: relative;
  height: 20px;
  margin: -6px 12px 0;
  font-size: 13px;
}

.radio-speed-labels span {
  position: absolute;
  transform: translateX(-50%);
}

.radio-speed-labels span:nth-child(1) {
  left: 23.08%;
}

.radio-speed-labels span:nth-child(2) {
  left: 38.46%;
}

.radio-speed-labels span:nth-child(3) {
  left: 61.54%;
}

.radio-list-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Small and quiet; the ::after keeps a 44px tap target. */
.radio-info-btn {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--stone);
  font-size: 14px;
  color: var(--stone);
}

.radio-info-btn::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.radio-info-btn[aria-expanded='true'] {
  border-color: var(--sumi);
  background: var(--sumi);
  color: var(--kami);
}

.radio-info {
  margin-bottom: 8px;
}

.radio-note {
  margin-top: 8px;
  max-width: 34ch;
  color: var(--stone);
}

.radio-status:not(:empty) {
  margin-top: 24px;
}

.radio-caption-section {
  margin-top: 24px;
}

.radio-caption-toggle {
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.radio-captions {
  position: relative;
  max-height: 280px;
  margin: 8px -8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.radio-caption {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 8px;
  text-align: left;
  overflow-wrap: anywhere;
}

.radio-caption[aria-current='true'] {
  background: var(--sumi);
  color: var(--kami);
}

.radio-caption:focus-visible {
  outline-offset: -3px;
}

.radio-caption[aria-current='true']:focus-visible {
  outline-color: var(--kami);
}

.radio-speaker {
  font-size: 13px;
  font-weight: 700;
}

.radio-caption-romaji {
  font-size: 20px;
  line-height: 1.3;
}

.radio-caption-ja,
.radio-caption-kana {
  display: none;
}

.show-japanese .radio-caption-ja,
.show-japanese .radio-caption-kana {
  display: block;
}

.radio-caption-ja {
  font-size: 24px;
  line-height: 1.3;
}

.radio-caption-kana {
  font-size: 17px;
}

.radio-list {
  margin-top: 24px;
}

.radio-episode + .radio-episode {
  margin-top: 32px;
}

.radio-episode-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.radio-episode-meta {
  margin-top: 8px;
}

.radio-saved-state {
  color: var(--stone);
  font-size: 13px;
}

.radio-episode-actions {
  display: flex;
  gap: 24px;
  margin-top: 4px;
}

.radio-episode-actions .text-btn {
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.radio-empty {
  max-width: 34ch;
}

/* Four destinations fit the phone's single tab row at full size; very narrow phones step down. */
@media (max-width: 330px) {
  .tabs-inner .tab {
    font-size: 13px;
  }
}

.lessons-chapter + .lessons-chapter,
.radio-section + .radio-section {
  margin-top: 24px;
}

.list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
  align-items: start;
}

.list-heading {
  min-width: 0;
}

.list-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 4px 0;
  text-align: left;
}

.list-toggle-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.list-toggle-title,
.list-toggle-meta {
  display: block;
}

.list-heading .list-toggle-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.list-toggle-meta {
  margin-top: 4px;
  color: var(--stone);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.list-chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.list-toggle[aria-expanded='true'] .list-chevron {
  transform: rotate(45deg);
}

.list-toggle:active {
  background: var(--mist);
}

.list-finished,
.list-older {
  margin-top: 24px;
}

.list-finished .list-toggle,
.list-older .list-toggle {
  font-size: 15px;
  font-weight: 700;
}

.list-content > ol:empty {
  display: none;
}

.lessons-chapter-actions {
  margin-top: 0;
  flex-wrap: wrap;
  gap: 0;
}

.lessons-chapter-actions .text-btn {
  width: 100%;
  min-height: 44px;
  text-align: left;
  line-height: 1.4;
}

.lessons-chapter-list {
  margin-top: 24px;
}

.lessons-part {
  font-weight: 700;
}

/* Generate a lesson: a closed panel under the Chapters heading. */
.lessons-generate {
  margin: 24px 0 40px;
}

.lessons-generate-open {
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.lessons-generate-form {
  margin-top: 8px;
}

.lessons-label {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
}

.lessons-scenario {
  height: auto;
  padding: 12px 16px;
  font-size: 17px;
  line-height: 1.4;
  resize: vertical;
}

.lessons-focus {
  font-size: 17px;
}

.lessons-levels {
  margin: 0;
  padding: 0;
  border: 0;
}

.lessons-level {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 17px;
}

.lessons-level input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--sumi);
}

.lessons-request[data-status='failed'] .radio-episode-meta {
  color: var(--stone);
}

/* The name at the top opens the account menu (Sign out). A 44px target inside the 18px row. */
.nav-top .user-name {
  min-height: 0;
  margin: -13px 0;
  padding: 13px 0;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-menu {
  max-width: 390px;
  margin: 0 auto;
  padding: 16px 0 8px;
}

.account-who {
  color: var(--stone);
  font-size: 15px;
}

.account-actions {
  display: flex;
  gap: 24px;
}

.account-actions .sign-out {
  padding-top: 10px;
}

/* Words: Cards | Known | Dictionary, a second row of tab words above each part. */
.words-switch {
  display: flex;
  gap: 24px;
  padding-top: 12px;
}

.words-part {
  position: relative;
  min-height: 44px;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--stone);
}

.words-part[aria-current='page'] {
  color: var(--sumi);
}

.words-part[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 4px;
  background: var(--hinomaru);
}

.words-switch + .toprow {
  height: 52px;
  padding-top: 0;
}

/* Flash cards. Level bands use the greys: Starter mist, N5 stone, N4 ash; red only marks known. */
.cards-count {
  margin-top: 8px;
  margin-left: -7px;
  font-size: 144px;
}

.starter-progress {
  margin-top: 32px;
}

.starter-locked {
  font-size: 17px;
  font-weight: 700;
}

.starter-line {
  margin-top: 4px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

#starter-practise {
  margin-top: 8px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.deck-group {
  margin-top: 40px;
}

.deck-group-head {
  color: var(--stone);
  font-size: 15px;
  font-weight: 700;
}

.deck-list {
  margin-top: 8px;
}

.deck-row {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 10px 0;
  text-align: left;
}

.deck-row .card-band {
  grid-row: 1 / 3;
  align-self: stretch;
  width: 4px;
  padding: 0;
  font-size: 0;
}

.deck-title {
  font-size: 20px;
  font-weight: 700;
}

.deck-count {
  color: var(--stone);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.deck-meter {
  grid-column: 2 / 4;
  height: 2px;
  margin-top: 8px;
  background: var(--mist);
}

.deck-meter-fill {
  display: block;
  height: 100%;
  background: var(--sumi);
}

.card-band {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--kami);
}

.card-band-starter {
  background: var(--mist);
  color: var(--sumi);
}

.card-band-5 {
  background: var(--stone);
}

.card-band-4 {
  background: var(--ash);
}

.card-mark {
  width: 14px;
  height: 14px;
  border: 2px solid var(--sumi);
  border-radius: 50%;
}

.card-mark.is-known {
  border-color: var(--hinomaru);
  background: var(--hinomaru);
}

.cards-session-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.cards-back {
  padding-left: 0;
}

.cards-deck-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-position {
  color: var(--stone);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* A card on a deck: the top card flips in place; one more card edge shows beneath it. */
.card-stage {
  margin-top: 24px;
}

.flash-card {
  position: relative;
  height: min(400px, 58dvh);
  margin: 0 8px 8px 0;
  perspective: 1200px;
}

.flash-card::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  border: 2px solid var(--sumi);
  background: var(--mist);
}

.card-inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  /* Symmetric, so the card is edge-on at 210ms, exactly when the faces swap. */
  transition: transform 420ms ease-in-out;
}

.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px 20px;
  border: 2px solid var(--sumi);
  background: var(--kami);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Safari can show a back face through the front; each face also hides itself at the turn's
   halfway point, so only the face that is up is ever drawn. */
.card-front {
  transform: rotateY(0deg);
  cursor: pointer;
  transition: visibility 0s 210ms;
}

.card-back {
  transform: rotateY(180deg);
  visibility: hidden;
  transition: visibility 0s 210ms;
}

.is-flipped .card-front {
  visibility: hidden;
}

.is-flipped .card-back {
  visibility: visible;
}

.is-flipped .card-front,
.card-stage:not(.is-flipped) .card-back {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-inner,
  .card-front,
  .card-back {
    transition: none;
  }
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-english {
  margin-top: 32px;
  max-width: 10em;
  font-size: clamp(32px, 9.6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.card-hint {
  margin-top: auto;
  max-width: 30ch;
  color: var(--stone);
  font-size: 15px;
}

.card-japanese {
  margin-top: 24px;
  font-size: clamp(40px, 12vw, 56px);
  font-weight: 600;
  line-height: 1.1;
}

.card-kana {
  margin-top: 8px;
  font-size: 24px;
}

.card-romaji {
  margin-top: 4px;
  font-size: 20px;
}

.card-english-small {
  margin-top: 24px;
  color: var(--stone);
  font-size: 15px;
}

.card-hear {
  align-self: flex-start;
  margin-top: 8px;
  padding-left: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.card-actions {
  margin-top: 24px;
}

.card-actions-back,
.cards-done-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card-stage:not(.is-flipped) .card-actions-back,
.card-stage.is-flipped .card-actions-front {
  display: none;
}

.card-actions .block-btn {
  margin-top: 0;
}

.card-notyet,
.level-no {
  border: 2px solid var(--sumi);
  background: transparent;
  color: var(--sumi);
}

.cards-done-title,
.level-title {
  max-width: 12ch;
  margin-top: 48px;
  font-size: clamp(32px, 9.6vw, 40px);
  font-weight: 700;
  line-height: 1.15;
}

/* "New to Japanese?" and graduation: one question or one numeral, then the choices. */
.level-choices {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.level-choices .block-btn {
  margin-top: 0;
}

.graduated .numeral {
  margin-top: 48px;
  margin-left: -7px;
  font-size: 144px;
}

.graduated .level-title {
  margin-top: 16px;
}

.graduate-stay {
  justify-self: start;
  padding-left: 0;
}

/* Help opens on the current tab's section; the others follow under their own heading. */
.help-others {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--sumi);
}

.sheet-subhead {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
}