/* A block that folds shut: one grid row from 1fr to 0fr — the way the
   collections menu, the answer list and the custom-answer field close.
   In step with the deck's move: opening, the room comes first and the
   content fades in over the second half; shutting, the content fades out
   over the first half and the room folds over the second. The one child
   clips; `.shut` folds it. */._fold_1feza_7 {
  --half: calc(var(--animation-duration, 250ms) / 2);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    margin-top var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--half) ease-out var(--half);
}._fold_1feza_7 > * {
  min-height: 0;
  overflow: hidden;
}/* The room has half the move to fold; eased in and out, so it does not
   take off with a jolt. */._shut_1feza_6 {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--half) ease-in,
    grid-template-rows var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half),
    margin-top var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half);
}/* A folding column of rows — answers under a card's first line, or under the
   lesson's field: the room it takes above folds with it. */._list_1feza_37 {
  width: 100%;
  margin-top: 12px;
}._list_1feza_37 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}._list_1feza_37._shut_1feza_6 {
  margin-top: 0;
}@media (prefers-reduced-motion: reduce) {
  ._fold_1feza_7 {
    transition: none;
  }
}

html,
body {
  height: 100%;
}

._app_15egt_6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  transition: height var(--keyboard-animation-duration, 250ms) var(--keyboard-animation-curve, ease-in-out);
  height: calc(var(--viewport-height) - var(--keyboard-height, 0px));
}

/* Unpicked, and staying the colour it had while the card was open — the save
   changes nothing on screen but the picked variants going blue. */
._leftover_15egt_21 {
  color: var(--ink);
}

._crashed_15egt_25 {
  align-items: center;
  justify-content: center;
  gap: 1em;
  text-align: center;
  padding: 2em;
}

._avatar_15egt_34 {
  width: 32px;
  height: 32px;
  border-radius: 24px;
}

/* Registered, so the arc grows instead of jumping when a lesson moves it. */
@property --known {
  syntax: '<number>';
  /* Inherited, or the ::before drawing the arc gets the initial 0 instead. */
  inherits: true;
  initial-value: 0;
}

._ring_15egt_48 {
  --arc: var(--brand-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: --known var(--animation-duration, 250ms) ease-in-out;
}

/* The whole ring goes golden while the collection has something to review. */
._ring_15egt_48._due_15egt_58 {
  --arc: var(--golden);
}

/* A pseudo-element, so the mask that hollows the arc out leaves the photo it
   wraps untouched — the arc frames the photo from outside, over a faded track
   of its own color. */
._ring_15egt_48::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: conic-gradient(
    var(--arc) calc(var(--known, 0) * 360deg),
    color-mix(in srgb, var(--arc) 25%, transparent) 0
  );
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}

/* The header's action buttons: bold pills, a spinner riding along inside. */
._action_15egt_78 {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: none;
  outline: none;
  font-weight: bold;
  height: 32px;
}

/* Golden like the ring it sits across from: the deck has something due, and
   the button says how much. */
._learn_15egt_91 {
  /* Dark on the golden pill in either scheme. */
  --ink: #161513;
  gap: 0.4em;
  background: var(--golden);
  color: var(--ink);
  padding: 0 8px;

  ._count_15egt_100 {
    color: color-mix(in srgb, var(--ink) 50%, transparent);
  }
}

._actionWrapper_15egt_105 {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  position: relative;
}

._delete_15egt_112 {
  background: color-mix(in srgb, #dc2626 15%, transparent);
  color: #dc2626;
  padding: 0 8px;
}

._save_15egt_119 {
  background: color-mix(in srgb, var(--brand-color) 15%, transparent);
  color: var(--brand-color);
  padding: 0 8px;
}

input,
button {
  padding: 0.33em 0.66em;
  border-radius: 100px;
  font-size: inherit;
  font-family: inherit;
}

input {
  border: none;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

._collections_15egt_139 {
  /* The deck asks for the whole app height, so a shrinkable menu gets squeezed
     and its last items land under the fold's clip. */
  flex-shrink: 0;
  padding: 0 16px;
  will-change: grid-template-rows, opacity;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    font-weight: bold;

    li {
      cursor: pointer;
      padding: 16px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      justify-content: center;
      border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);

      ._avatar_15egt_34 {
        width: 24px;
        height: 24px;
      }
    }
  }

  button {
    background: none;
    border: none;
    padding: 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5em;
  }

  ._dev_15egt_181 button {
    color: #888;
  }

  ._new_15egt_185 button {
    color: var(--brand-color);
  }
}

._collectionsCollapsed_15egt_190 {
}
._wrapper_1oydq_1 {
  position: relative;
  overflow: visible;
  height: 100%;
  container-type: size;
  contain: layout style;
}
._disable-transition_1oydq_8 * {
  transition: none !important;
}
._container_1oydq_11 {
  overflow-y: auto;
  overflow-anchor: none;
  --animation-duration: 250ms;
  display: flex;
  flex-direction: column;

  padding-left: 16px;
  padding-right: 16px;

  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--bottom-spacing));
  left: 0;
  right: 0;
}

._container_1oydq_11::after {
  content: '';
  display: block;
  height: var(--bottom-spacing);
  flex-shrink: 0;
}

._container_1oydq_11::-webkit-scrollbar {
  display: none;
}

._container_1oydq_11._selected_1oydq_39 {
  overflow: hidden;
}

/* The open card fills the viewport and the deck's own scroll is off, so a
   card taller than the screen scrolls inside its own slot — the whole card
   travels, background and bottom edge with it. */
._container_1oydq_11._selected_1oydq_39 ._item_1oydq_46._selected_1oydq_39 {
  max-height: calc(100cqh + var(--scroll-overhang));
  overflow-y: auto;
  /* Focus scrolls (scrollIntoView) aim above the overhang and clear of the
     keyboard, not at the edge hanging under it. */
  scroll-padding-bottom: calc(var(--scroll-overhang) + 16px);
  /* Clipped to the card's own corners: the pinned question leaves them
     uncovered, and the card sliding underneath would show through. */
  border-radius: var(--card-radius);
}

._container_1oydq_11._selected_1oydq_39 ._item_1oydq_46._selected_1oydq_39::-webkit-scrollbar {
  display: none;
}

._container_1oydq_11._lastSticky_1oydq_61 ._sticky_1oydq_61 {
  bottom: var(--bottom-spacing);
}

._spacer_1oydq_65 {
  flex: 1 0;
  margin-top: 0;
  will-change: margin-top;
  transform: translateZ(0);
}

._item_1oydq_46 {
  width: 100%;
  position: sticky;
  top: 0;

  will-change: transform, min-height, height;
  contain: layout style;
  transition:
    transform var(--animation-duration) ease-in-out,
    opacity var(--animation-duration) ease-in-out;
  margin-bottom: 0;
}

._item_1oydq_46._removed_1oydq_85 {
  margin-bottom: calc(var(--content-height) * -1);
  pointer-events: none;
}

/* The depth fold hinges on the sticky pin: with the origin on the top edge,
   scale keeps the y=0 line fixed, rotate3d(1,0,0,θ) passes its axis through
   it, and perspective leaves the z=0 plane alone — so the card's top stays
   glued to the container top for any fold ratio. Centered (the default),
   each of them pulls the top edge down by up to half the card height. */
._item_1oydq_46 > * {
  transform-origin: top;
}

._content_1oydq_99 {
  transition:
    transform var(--animation-duration) ease-in-out,
    opacity var(--animation-duration) ease-in-out;
}

/* Parked below the open slot, not just below the edge: the slot hangs past
   the edge by the overhang, and a sticky parked inside it reads as covering
   the card — the depth fold would snap in on the first frame of deselect. */
._container_1oydq_11._selected_1oydq_39 ._sticky_1oydq_61:not(._selected_1oydq_39) {
  transform: translateY(calc(100% + var(--scroll-overhang)));
  visibility: hidden;
}
._header_ujepl_1 {
  min-height: 64px;
  position: relative;
}

._layer_ujepl_6 {
  position: absolute;
  inset: 0;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._entering_ujepl_17 { animation: _fade_ujepl_1 var(--animation-duration, 250ms) ease-in-out backwards }
._leaving_ujepl_18 {
  animation: _fade_ujepl_1 var(--animation-duration, 250ms) ease-in-out reverse forwards;
  pointer-events: none;
}

@keyframes _fade_ujepl_1 {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* An overlay, so the title stays visually centered no matter how wide the
   side controls are. */
._title_ujepl_30 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* A non-clickable title lets clicks fall through to whatever is beneath. */
  pointer-events: none;

  svg { color: #aaa }
}

._titleLine_ujepl_44 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: bold;
}

._subtitle_ujepl_51 {
  font-size: 11px;
  color: #999;
}

._clickable_ujepl_56 {
  cursor: pointer;
  pointer-events: auto;
}

/* Chrome owns the stacking: side slots sit above the title overlay so their
   controls stay clickable regardless of what content they hold. */
._side_ujepl_63 {
  display: flex;
  align-items: center;
  z-index: 1;
}

._close_ujepl_69 {
  display: flex;
  align-items: center;
  padding: 4px;
  border: none;
  outline: none;
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: gray;
}
._container_1r97n_1 {
  overflow: visible;
}

/* The card overflows this box by design, so the gap under it has to be a box
   of its own — an open card scrolls on its overflow, and end padding on the
   scroller would not be part of it. */
._container_1r97n_1::after {
  content: '';
  display: block;
  height: calc(16px + var(--scroll-overhang));
}

._card_1r97n_14 {
  background: var(--card);
  position: relative;

  --border-radius: var(--card-radius);
  border-radius: var(--border-radius);
}

/* The new card's outline, on the light scheme only. Mimic `outline` but with
   `border` so that it placed inside and do not reduce box space. */
._card_1r97n_14::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: var(--border-radius);
  border: 2px solid transparent;
  transition: border var(--animation-duration) ease-in-out;
}

._card_1r97n_14 ._question_1r97n_37 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 12%, transparent);
}

._notches_1r97n_45 {
  position: absolute;
  top: 6px;
  left: 8px;
  display: flex;
  color: color-mix(in srgb, var(--ink) 25%, transparent);
}

._card_1r97n_14 ._answer_1r97n_53 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* An open card scrolls in its slot, and the question stays put while the rest
   of it travels underneath. The card's edge is drawn in one piece by ::after,
   so the question takes over the top of it — its own edge and radius — and
   the card keeps the sides and the bottom that ride along. */
._card_1r97n_14._expanded_1r97n_64 ._question_1r97n_37 {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

._card_1r97n_14._expanded_1r97n_64 ._question_1r97n_37::after {
  content: '';
  position: absolute;
  /* Down to the border box: inset stops at the padding box, and the row the
     divider occupies would break the edge — the question's own background
     covers the card's edge underneath it. The -1px is .question's
     border-bottom width; keep them in step. */
  inset: 0 0 -1px;
  pointer-events: none;
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  transition: border var(--animation-duration) ease-in-out;
}

._card_1r97n_14 ._answer_1r97n_53 {
  filter: none;
  transition: filter 0ms var(--animation-duration);
  transform: translate3d(0, 0, 0);
}

._card_1r97n_14:not(._reveal_1r97n_93)._expanded_1r97n_64 ._answer_1r97n_53 {
  filter: blur(16px);
  transition: none;
}

/* What sets the new card apart: an outline on the light scheme, a shade
   lighter than the saved ones on the dark. Its pinned question paints over
   the card and needs the same. */
@media (prefers-color-scheme: light) {
  ._card_1r97n_14._active_1r97n_102::after,
  ._card_1r97n_14._active_1r97n_102._expanded_1r97n_64 ._question_1r97n_37::after {
    border-color: var(--ink);
  }
}

@media (prefers-color-scheme: dark) {
  ._card_1r97n_14._active_1r97n_102,
  ._card_1r97n_14._active_1r97n_102._expanded_1r97n_64 ._question_1r97n_37 {
    background: color-mix(in srgb, var(--card), var(--ink) 5%);
  }
}
/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_tbcep_3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A control in the question row's corner — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_tbcep_18 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_tbcep_18[aria-pressed='true'] {
  color: var(--brand-color);
}._text_1dqq9_1 {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_tbcep_3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A control in the question row's corner — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_tbcep_18 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_tbcep_18[aria-pressed='true'] {
  color: var(--brand-color);
}

._form_m6ean_1 {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  overflow: hidden;
  /* The deck's own move (Stack sets --animation-duration, ease-in-out), so
     the question's grow/shrink runs in step with expand/collapse. Scoped to
     min-height: `all` would also ease the photo drag, lagging the finger. */
  transition: min-height var(--animation-duration, 250ms) ease-in-out;
}

/* The picked photo: sized to cover the clamped-ratio window along one axis
   and dragged with a composited transform — no repaints in the gesture. */
._photo_m6ean_15 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  will-change: transform;
}

/* Ultrawide photos fill the window's height and overflow horizontally. */
._photo_m6ean_15._wide_m6ean_27 {
  width: auto;
  height: 100%;
}

._text_m6ean_32 {
}

._translate_m6ean_36 {
}

._image_m6ean_40 {
}

._bar_m6ean_44 {
  position: absolute;
  right: 8px;
  top: 8px;

  button {
    background: var(--ink);
    color: var(--card);
    border: none;
    padding: 4px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      height: 16px;
      opacity: 1;
    }
  }
}
/* A block that folds shut: one grid row from 1fr to 0fr — the way the
   collections menu, the answer list and the custom-answer field close.
   In step with the deck's move: opening, the room comes first and the
   content fades in over the second half; shutting, the content fades out
   over the first half and the room folds over the second. The one child
   clips; `.shut` folds it. */._fold_1feza_7 {
  --half: calc(var(--animation-duration, 250ms) / 2);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    margin-top var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--half) ease-out var(--half);
}._fold_1feza_7 > * {
  min-height: 0;
  overflow: hidden;
}/* The room has half the move to fold; eased in and out, so it does not
   take off with a jolt. */._shut_1feza_6 {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--half) ease-in,
    grid-template-rows var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half),
    margin-top var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half);
}/* A folding column of rows — answers under a card's first line, or under the
   lesson's field: the room it takes above folds with it. */._list_1feza_37 {
  width: 100%;
  margin-top: 12px;
}._list_1feza_37 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}._list_1feza_37._shut_1feza_6 {
  margin-top: 0;
}@media (prefers-reduced-motion: reduce) {
  ._fold_1feza_7 {
    transition: none;
  }
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_tbcep_3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A control in the question row's corner — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_tbcep_18 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_tbcep_18[aria-pressed='true'] {
  color: var(--brand-color);
}

._container_6u4vz_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

._translation_6u4vz_8 {
  color: var(--ink);
  cursor: pointer;
}

._translation_6u4vz_8._active_6u4vz_13 {
  color: var(--brand-color);
}

._loader_6u4vz_17 {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

._suggestions_6u4vz_24 {
  width: 100%;
}

._folded_6u4vz_29 {
}

._customTranslation_6u4vz_33 {
  width: 100%;
}

._customFold_6u4vz_37 {
  width: 100%;
}
/* Shut, it still holds the card's bottom margin: the list above brings none,
   the open field's own padding does. */
._closed_6u4vz_43 {
  padding-bottom: 21px;
}

/* Alone it is the card's one line, at answer size; under a list it trails
   the answers as a smaller prompt — and grows back in step with the deck's
   move once the list has gone, not with a jump. */
._custom_6u4vz_33 {
  transition:
    font-size var(--animation-duration, 250ms) ease-in-out,
    padding var(--animation-duration, 250ms) ease-in-out;
}
._customFold_6u4vz_37._trailing_6u4vz_57 ._custom_6u4vz_33 {
  font-size: inherit;
  padding: 12px;
}
@keyframes _spin_w7j0v_10 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

._spinner_w7j0v_10 {
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  animation: _spin_w7j0v_10 1s linear infinite;
  color: GrayText;
  opacity: 0.5;
}
/* A block that folds shut: one grid row from 1fr to 0fr — the way the
   collections menu, the answer list and the custom-answer field close.
   In step with the deck's move: opening, the room comes first and the
   content fades in over the second half; shutting, the content fades out
   over the first half and the room folds over the second. The one child
   clips; `.shut` folds it. */._fold_1feza_7 {
  --half: calc(var(--animation-duration, 250ms) / 2);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    margin-top var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--half) ease-out var(--half);
}._fold_1feza_7 > * {
  min-height: 0;
  overflow: hidden;
}/* The room has half the move to fold; eased in and out, so it does not
   take off with a jolt. */._shut_1feza_6 {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--half) ease-in,
    grid-template-rows var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half),
    margin-top var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half);
}/* A folding column of rows — answers under a card's first line, or under the
   lesson's field: the room it takes above folds with it. */._list_1feza_37 {
  width: 100%;
  margin-top: 12px;
}._list_1feza_37 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}._list_1feza_37._shut_1feza_6 {
  margin-top: 0;
}@media (prefers-reduced-motion: reduce) {
  ._fold_1feza_7 {
    transition: none;
  }
}
/* Stands off the divider above; whatever follows brings the room below. */
._container_1clak_2 {
  width: 100%;
  padding: 21px 21px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif-font);
  font-size: 21px;
}

._variant_1clak_12 {
  max-width: 100%;
  color: var(--ink);
}

._clipped_1clak_17 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Everything after the first answer, folding as one. */
._rest_1clak_24 {
}

._collapsed_1clak_28 {
}
._figure_1grmg_1 {
  margin: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

._image_1grmg_9 {
  display: block;
  width: 100%;
  /* The picker bakes crops between ultrawide and 4:3, so this cap only
     bites on out-of-contract rows (legacy or imported data). */
  max-height: 75cqw;
  object-fit: cover;
  /* Holds the card open while the image decodes so the deck doesn't
     collapse this slot to zero. */
  min-height: 64px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

._caption_1grmg_22 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 16px 10px;
  text-align: center;
  font-family: var(--serif-font);
  font-size: 17px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_tbcep_3 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A control in the question row's corner — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_tbcep_18 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_tbcep_18[aria-pressed='true'] {
  color: var(--brand-color);
}/* A block that folds shut: one grid row from 1fr to 0fr — the way the
   collections menu, the answer list and the custom-answer field close.
   In step with the deck's move: opening, the room comes first and the
   content fades in over the second half; shutting, the content fades out
   over the first half and the room folds over the second. The one child
   clips; `.shut` folds it. */._fold_1feza_7 {
  --half: calc(var(--animation-duration, 250ms) / 2);
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition:
    grid-template-rows var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    margin-top var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--half) ease-out var(--half);
}._fold_1feza_7 > * {
  min-height: 0;
  overflow: hidden;
}/* The room has half the move to fold; eased in and out, so it does not
   take off with a jolt. */._shut_1feza_6 {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--half) ease-in,
    grid-template-rows var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half),
    margin-top var(--half) cubic-bezier(0.4, 0, 0.2, 1) var(--half);
}/* A folding column of rows — answers under a card's first line, or under the
   lesson's field: the room it takes above folds with it. */._list_1feza_37 {
  width: 100%;
  margin-top: 12px;
}._list_1feza_37 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}._list_1feza_37._shut_1feza_6 {
  margin-top: 0;
}@media (prefers-reduced-motion: reduce) {
  ._fold_1feza_7 {
    transition: none;
  }
}

._lesson_1gt8n_1 {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}

/* The chrome crossfades in place — opaque, so at rest it hides the deck
   header beneath, and fading it out reveals that header where it stands. */
._chrome_1gt8n_13 {
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--animation-duration, 250ms) ease-in-out;
}

._sheet_1gt8n_19 {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  /* 60px past its own height: the mascot rides that far above the top edge
     and has to clear the screen with the sheet, not vanish at unmount. */
  transform: translateY(calc(100% + 60px));
  transition: transform var(--animation-duration, 250ms) ease-in-out;
}

._lesson_1gt8n_1._entered_1gt8n_32 ._chrome_1gt8n_13 { opacity: 1 }
._lesson_1gt8n_1._entered_1gt8n_32 ._sheet_1gt8n_19 { transform: translateY(0) }

/* Closing gets its own opaque backdrop: the deck stays hidden behind it until
   the sheet fully leaves the screen and the lesson unmounts. */
._lesson_1gt8n_1._closing_1gt8n_37 { background: var(--bg) }

/* The mascot's place along the card edge carries the progress; the count is a
   footnote. */
._progress_1gt8n_41 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);

  ._count_1gt8n_49 {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

/* The tally he ends the lesson by eating. Its own name: `.correct` already
   belongs to the answer input, and the two would share every rule. */
._tally_1gt8n_58 {
  color: var(--golden);
  font-weight: 700;
  transition: transform 200ms ease-in, opacity 200ms ease-in;
}

._eaten_1gt8n_64 {
  transform: translateX(-6px) scale(0);
  opacity: 0;
}

/* Keyframes, not an entered-transition: the canvas mounts late (lazy chunk)
   and must still drop in from above whenever it appears. */
._mascot_1gt8n_71 {
  position: absolute;
  /* His feet ride the card's top edge, four sprite rows of tail hanging over
     it: he stands 60px (20 rows at scale 3) below the top of his canvas. The
     rows above him are headroom for the hop and for the tongue he ends on. */
  top: -60px;
  /* Full width, so his tongue can reach the count in the corner; he keeps to
     the middle himself. An explicit width, not `right`: a canvas is a replaced
     element, so an auto width comes from its buffer's aspect ratio and `right`
     is dropped. */
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 2;
  pointer-events: none;
  image-rendering: pixelated;
  animation: _mascot-drop_1gt8n_1 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms backwards;
}

@keyframes _mascot-drop_1gt8n_1 {
  from {
    opacity: 0;
    transform: translateY(-150%);
  }
}

/* The lesson drives navigation itself — no free scrolling. Programmatic
   scrollTo still works on a hidden-overflow scroll container. */
._stack_1gt8n_99 {
  overflow: hidden !important;
}

/* The word's part of speech, under it in the question's own bottom padding —
   out of the flow, so the word stays centered, and clear of the top edge the
   mascot walks. */
._pos_1gt8n_106 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-style: italic;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

/* The question's own switch, on the side the review notches leave free. */
._speaker_1gt8n_120 {
}

._answer_1gt8n_124 {
  width: 100%;
  padding: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif-font);
  font-size: 21px;
}

._form_1gt8n_134 {
  position: relative;
  width: 100%;
}

/* Out of the flex flow, so the row gap goes with it — the field keeps focus
   and the keyboard up while the answers stand on their own. */
._form_1gt8n_134._empty_1gt8n_141 {
  position: absolute;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* The answers left to show, folding as one. */
._variants_1gt8n_149 {
}

._collapsed_1gt8n_153 {
}

._form_1gt8n_134._empty_1gt8n_141 + ._variants_1gt8n_149 {
  margin-top: 0;
}

._variant_1gt8n_149 {
  color: var(--ink);
}

._input_1gt8n_165 {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  text-align: center;
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  color: var(--ink);
  transition: font-size var(--animation-duration, 250ms) ease-in-out;
}

._input_1gt8n_165._correct_1gt8n_56,
._matched_1gt8n_179 ._word_1gt8n_179 {
  font-size: 1.2em;
}

._input_1gt8n_165._wrong_1gt8n_183 {
  text-decoration: line-through;
}

/* Dictation mode: the input stays in flow and keeps setting the form height,
   it just goes blank while the transcript overlay speaks for it. */
._form_1gt8n_134._voice_1gt8n_189 ._input_1gt8n_165 {
  color: transparent;
  caret-color: transparent;
}

/* Centered while it fits; once it overflows, the unreachable left overhang of
   centered inline content plus scrollLeft-follow turn it into a ticker that
   trails the newest words. */
._transcript_1gt8n_197 {
  position: absolute;
  inset: 0;
  align-content: center;
  overflow: hidden;
  text-align: center;
  white-space: pre;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
  /* Dictation capitalizes utterances no matter what autocapitalize says. */
  text-transform: lowercase;
  pointer-events: none;
}

._transcript_1gt8n_197._masked_1gt8n_210 {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}

._heard_1gt8n_215 svg {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
}

._word_1gt8n_179 {
  color: var(--ink);
}

/* First the noise fades, then it collapses (font-size, so the icon and the
   em margin shrink along) — the clamped scroll and centering walk the heard
   word to the middle while it grows to the correct-answer size. Keyframes,
   not transitions: the spans mount already matched, with no prior state to
   transition from. Both end at the plain .matched style, so the submit rides
   the word's animationend. */
._matched_1gt8n_179 ._heard_1gt8n_215 {
  opacity: 0;
  font-size: 0;
  animation: _heard-out_1gt8n_1 550ms;
}

@keyframes _heard-out_1gt8n_1 {
  0% {
    opacity: 1;
    font-size: 1em;
    animation-timing-function: ease-out;
  }
  45% {
    opacity: 0;
    font-size: 1em;
    animation-timing-function: ease-in-out;
  }
}

._matched_1gt8n_179 ._word_1gt8n_179 {
  animation: _word-grow_1gt8n_1 550ms ease-in-out;
}

@keyframes _word-grow_1gt8n_1 {
  0%, 45% {
    font-size: 1em;
  }
}
:root {
  interpolate-size: allow-keywords;  /* enable globally */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color-scheme: light dark;
  background: var(--bg);
  --serif-font: 'New York', 'Times New Roman', Times, serif;
  --sans-serif-font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
    
  --golden: #F2BE68;
  --bg: #eee;
  --card: #fff;
  --ink: #161513;

  --card-radius: 16px;

  /* How far an open card's scroll area hangs below the app, under the
     keyboard: the cut edge of the scroll lands there instead of across a
     line of text, and the card's trailing gap makes up for it. */
  --scroll-overhang: 32px;

  --brand-color: #6495ed;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --card: #1c1c1e;
    --ink: #ecebe8;
  }
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*:not(input):not(textarea) {
  user-select: none;
  -webkit-user-select: none;
}

input[disabled] {
  opacity: 1;
}

/* The engine's own placeholder grey is lighter than the one the cards use for
   everything else muted — one tone for all fields. */
input::placeholder {
  color: GrayText;
}

body {
  margin: 0;
  font-family: var(--sans-serif-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: visible;
}

#root {
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

svg {
  width: auto;
  vertical-align: middle;
}