._pill_1bo3e_1 {
  border: none;
  border-radius: 100px;
  cursor: pointer;
}._tinted_1bo3e_7 {
  color: var(--pill-color, var(--brand-color));
  background: color-mix(in srgb, var(--pill-color, var(--brand-color)) var(--pill-opacity, 15%), transparent);
}

html,
body {
  height: 100%;
}

._app_1mxzf_6 {
  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));
  container-type: size;
}

._cardDebug_1mxzf_16 {
  width: 100%;
  min-height: 80px;
  margin: 16px 0 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  font-size: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}

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

._notice_1mxzf_38 {
}

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

/* The people panel takes the screen: the deck slides off the bottom, sticky
   card and all, and slides back once the panel closes. */
._deck_1mxzf_50 {
  transition: transform var(--animation-duration, 250ms) ease-in-out;
}

/* By the deck's visible height, not its own — that runs a screen further
   down, under the sticky card, and would make the slide a blink. */
._deckHidden_1mxzf_56 {
  transform: translateY(100cqh);
  pointer-events: none;
}

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

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

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

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

._delete_1mxzf_95 {
  --pill-color: #dc2626;
}

._save_1mxzf_101 {
}

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);
}

/* The deck asks for the whole app height, so a shrinkable drawer gets squeezed
   and its last rows land under the fold's clip. */
._drawer_1mxzf_121 {
  flex-shrink: 0;
}

._collections_1mxzf_125 {
  padding: 0 16px;
  will-change: grid-template-rows, opacity;
  > div > 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);
    }
  }

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

  ._dev_1mxzf_158 button {
    color: #888;
  }

  ._destructive_1mxzf_162 button {
    color: #dc2626;
  }
}

/* The wheel in the header, centred on its highlighted row: shut, the grid
   row is 0fr and the bar's 64px are exactly that row; open, the row grows to
   the wheel's height around it, so the title slides down into the list. */
._wheel_1mxzf_170 {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  align-content: center;
  min-height: 64px;
  overflow: hidden;
  font-weight: bold;
  transition:
    grid-template-rows var(--animation-duration, 250ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--animation-duration, 250ms) ease-in-out;

  > * {
    min-height: 0;
    align-self: center;
  }

  [data-rwp-option],
  [data-rwp-highlight-item] {
    gap: 8px;
    font-size: inherit;
  }

  [data-rwp-highlight-wrapper] {
    overflow: clip;
    background: var(--bg);
    font-size: inherit;
    font-weight: inherit;
  }

  [data-rwp-highlight-item] {
    position: relative;
  }

  /* The picture keeps the bar's corner, where the profile control sits on
     other screens; the name stays centred. */
  ._ring_1mxzf_206 {
    position: absolute;
    left: 16px;
  }

  /* Hung off the name's left, out of the centring; only the highlighted
     row shows it. */
  ._chevron_1mxzf_213 {
    position: absolute;
    right: calc(100% + 0.5em);
    top: 0.1em;
    color: #aaa;
    transition: transform var(--animation-duration, 250ms) ease-in-out;
  }

  [data-rwp-option] ._chevron_1mxzf_213 {
    visibility: hidden;
  }

  ._name_1mxzf_225 {
    font-size: inherit;
  }
}

._newCollectionLabel_1mxzf_230,
._newCollection_1mxzf_230 input::placeholder {
  color: #999;
  opacity: 1;
}

._newCollection_1mxzf_230 {
  width: calc(100% - 128px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  input {
    all: unset;
    display: none;
    width: 100%;
    min-width: 0;
    text-align: center;
    pointer-events: none;
    user-select: text;
    -webkit-user-select: text;
  }
}

[data-rwp-highlight-item] ._newCollection_1mxzf_230:has(input:not([hidden])) {
  ._newCollectionLabel_1mxzf_230 {
    display: none;
  }

  input {
    display: block;
  }
}

._name_1mxzf_225 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;

  small {
    font-size: 11px;
    font-weight: normal;
    color: #999;
  }
}

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

._open_1mxzf_286 {
  grid-template-rows: 1fr;

  ._chevron_1mxzf_213 {
    transform: rotate(180deg);
  }
}

._hidden_1mxzf_294 {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  ._wheel_1mxzf_170,
  ._wheel_1mxzf_170 ._chevron_1mxzf_213 {
    transition: none;
  }
}
._wrapper_1ua10_1 {
  position: relative;
  overflow: visible;
  height: 100%;
  container-type: size;
  contain: layout style;
}
/* Not inherited: only the open item's own slot reads it, and a swipe writes
   it every move — the whole card under it need not restyle each time. */
@property --pull {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

._disable-transition_1ua10_16 * {
  transition: none !important;
}
._container_1ua10_19 {
  overflow-x: hidden;
  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_1ua10_19::after {
  content: '';
  display: block;
  height: var(--bottom-spacing);
  flex-shrink: 0;
}

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

._container_1ua10_19._selected_1ua10_48 {
  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_1ua10_19._selected_1ua10_48 ._item_1ua10_55._selected_1ua10_48 {
  /* --pull: how much of its top a swipe has taken from the slot. */
  max-height: calc(100cqh + var(--scroll-overhang) - var(--pull, 0px));
  overflow-x: hidden;
  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_1ua10_19._selected_1ua10_48 ._item_1ua10_55._selected_1ua10_48::-webkit-scrollbar {
  display: none;
}

._container_1ua10_19._lastSticky_1ua10_72 ._sticky_1ua10_72 {
  bottom: var(--bottom-spacing);
}

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

._item_1ua10_55 {
  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_1ua10_55._removed_1ua10_96 {
  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_1ua10_55 > * {
  transform-origin: top;
}

._content_1ua10_110 {
  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_1ua10_19._selected_1ua10_48 ._sticky_1ua10_72:not(._selected_1ua10_48) {
  transform: translateY(calc(100% + var(--scroll-overhang)));
  visibility: hidden;
}

/* Parked the same way on request — under the collection list, say. Visibility
   rides the slide out, so the card leaves over the edge instead of blinking;
   on the way back the base transition takes over and shows it at once. */
._container_1ua10_19._stickyHidden_1ua10_127 ._sticky_1ua10_72 {
  transform: translateY(calc(100% + var(--scroll-overhang)));
  visibility: hidden;
  transition-property: transform, opacity, visibility;
}
._pill_1bo3e_1 {
  border: none;
  border-radius: 100px;
  cursor: pointer;
}._tinted_1bo3e_7 {
  color: var(--pill-color, var(--brand-color));
  background: color-mix(in srgb, var(--pill-color, var(--brand-color)) var(--pill-opacity, 15%), transparent);
}
/* Unshrinkable: the app column would squeeze it for the deck. */
._header_15qk6_2 {
  min-height: 64px;
  position: relative;
  flex-shrink: 0;
}

/* The bar keeps its height however tall the header's flow content grows. */
._layer_15qk6_9 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

._entering_15qk6_23 { animation: _fade_15qk6_1 var(--animation-duration, 250ms) ease-in-out backwards }
._leaving_15qk6_24 {
  animation: _fade_15qk6_1 var(--animation-duration, 250ms) ease-in-out reverse forwards;
  pointer-events: none;
}

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

/* An overlay, so the title stays visually centered no matter how wide the
   side controls are. */
._title_15qk6_36 {
  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;
}

._titleLine_15qk6_48 {
  display: flex;
  align-items: center;
  font-weight: bold;
}

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

._clickable_15qk6_59 {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: inherit;
  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_15qk6_71 {
  display: flex;
  align-items: center;
  z-index: 1;
}

/* The round controls in the header's corners: a bare hit area for something
   that brings its own picture, a grey chip for a bare icon. Either gives the
   finger 44px: six pixels of padding around the 32px picture, pulled back by
   the same margin so the picture keeps its place. */
._round_15qk6_81 {
  display: flex;
  align-items: center;
  padding: 6px;
  margin: -6px;
  background: none;
}

/* The grey keeps to the picture: a layer under the icon, inset by the hit
   padding. */
._chip_15qk6_92 {
  position: relative;
  isolation: isolate;
  padding: 10px;
  color: gray;

  &::before {
    content: '';
    position: absolute;
    inset: 6px;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}
/* 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;
  }
}
[data-rwp-wrapper] ul{margin:0;padding:0;list-style:none}[data-rwp-wrapper] li{margin:0;padding:0}[data-rwp-wrapper]{position:relative;overflow:hidden;display:flex;width:100%;align-items:stretch;justify-content:space-between;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;overflow:hidden;flex:1;cursor:default;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp]:focus-visible{outline:none}[data-rwp-highlight-wrapper]{position:absolute;overflow:hidden;top:50%;width:100%;transform:translateY(-50%);font-size:1rem;font-weight:500}[data-rwp-highlight-list]{position:absolute;width:100%}[data-rwp-options]{position:absolute;top:50%;left:0;display:block;width:100%;height:0;margin:0 auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}[data-rwp-option],[data-rwp-highlight-item]{display:flex;align-items:center;justify-content:center}[data-rwp-option][data-disabled],[data-rwp-highlight-item][data-disabled]{pointer-events:none}
._examples_1vipi_1 {
  width: 100%;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

._list_1vipi_8 {
  padding: 21px;
}

._example_1vipi_1 {
  font-family: var(--serif-font);
  font-size: 17px;
}

._example_1vipi_1 + ._example_1vipi_1 {
  margin-top: 12px;
}

._example_1vipi_1 strong {
  font-weight: 500;
}

._examples_1vipi_1 pre {
  overflow: visible;
  overscroll-behavior: auto;
}
/* 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_hq43g_3 {
  color: var(--ink);
}
/* Stands off the divider above; whatever follows brings the room below. */
._container_ypa7p_2 {
  width: 100%;
  padding: 21px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif-font);
  font-size: 21px;
}

._variant_ypa7p_12 {
  position: relative;
  width: 100%;
  padding-inline: 13px;
  text-align: center;
  max-width: 100%;
  color: var(--ink);
}

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

/* Everything after the first answer, folding as one. */
._rest_ypa7p_28 {}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_urqye_31[aria-pressed='true'] {
  color: var(--brand-color);
}._examples_1vipi_1 {
  width: 100%;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}._list_1vipi_8 {
  padding: 21px;
}._example_1vipi_1 {
  font-family: var(--serif-font);
  font-size: 17px;
}._example_1vipi_1 + ._example_1vipi_1 {
  margin-top: 12px;
}._example_1vipi_1 strong {
  font-weight: 500;
}._examples_1vipi_1 pre {
  overflow: visible;
  overscroll-behavior: auto;
}

._container_ielcl_1 {
  width: 100%;
}

._sense_ielcl_5 {
  position: relative;
  padding: 21px;
}

._sense_ielcl_5 > * {
  transition: opacity var(--animation-duration, 250ms);
}

/* A meaning left out of the card; its translations mute themselves. */
._faded_ielcl_15 > :not(._translations_ielcl_15) {
  opacity: .35;
}

._rest_ielcl_19 ._sense_ielcl_5 {
  border-top: 1px dotted color-mix(in srgb, var(--ink) 10%, transparent);
}

._meta_ielcl_23 {
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;
  display: flex;
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans-serif-font);
  font-size: 12px;
  line-height: 14px;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

._meta_ielcl_23 > :last-child {
  white-space: nowrap;
}

._translations_ielcl_15 {
  display: flex;
  flex-direction: column;
  text-transform: lowercase;
  overflow-wrap: anywhere;
  /* The answers' padding widens where a tap lands, not the room around them. */
  margin-block: -8px;
}

/* Picking — in the draft, and through its save: each translation behind a
   check as far in from the edge as the question's icons, blue on the card,
   muted left out; the meaning moves in from both sides for them. */
._picking_ielcl_56 {
  padding-inline: 44px;
}

._sense_ielcl_5 ._translations_ielcl_15 > * {
  padding: 8px 0;
  text-align: center;
}

._picking_ielcl_56 ._translations_ielcl_15 > * {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color);
}

._picking_ielcl_56 ._translations_ielcl_15 > *::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -36px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--brand-color);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

._picking_ielcl_56 ._translations_ielcl_15 > [aria-pressed='false'],
._picking_ielcl_56 ._translations_ielcl_15 > ._off_ielcl_86 {
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

._picking_ielcl_56 ._translations_ielcl_15 > [aria-pressed='false']::before,
._picking_ielcl_56 ._translations_ielcl_15 > ._off_ielcl_86::before {
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}

._example_ielcl_95 {
  margin-top: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  opacity: 0.5;
  font-size: 15px;
  text-align: center;
  margin-bottom: -0.5em;
}

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

._concealed_ielcl_110 {
  filter: blur(16px);
}

._collapsed_ielcl_114 {
  padding-bottom: 0;
  text-align: center;
}

._collapsed_ielcl_114 ._translations_ielcl_15 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._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));
}
._container_gxm7c_1 {
  overflow: visible;
}

/* Keep the end of the slot's content above its viewport overhang. */
._container_gxm7c_1::after {
  content: '';
  display: block;
  height: calc(16px + var(--scroll-overhang));
  flex-shrink: 0;
}

._card_gxm7c_13 {
  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_gxm7c_13::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_gxm7c_13 ._question_gxm7c_36 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

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

._notches_gxm7c_44._half_gxm7c_52 > :last-child {
  opacity: .4;
}

._card_gxm7c_13 ._answer_gxm7c_56 {
  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_gxm7c_13._expanded_gxm7c_67 ._question_gxm7c_36 {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

._card_gxm7c_13._expanded_gxm7c_67 ._question_gxm7c_36::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_gxm7c_13 ._answer_gxm7c_56 {
  filter: none;
  transition: filter 0ms var(--animation-duration);
  transform: translate3d(0, 0, 0);
}

._card_gxm7c_13:not(._reveal_gxm7c_96)._expanded_gxm7c_67 ._answer_gxm7c_56 {
  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_gxm7c_13._active_gxm7c_105::after,
  ._card_gxm7c_13._active_gxm7c_105._expanded_gxm7c_67 ._question_gxm7c_36::after {
    border-color: var(--ink);
  }
}

@media (prefers-color-scheme: dark) {
  ._card_gxm7c_13._active_gxm7c_105,
  ._card_gxm7c_13._active_gxm7c_105._expanded_gxm7c_67 ._question_gxm7c_36 {
    background: color-mix(in srgb, var(--card), var(--ink) 5%);
  }
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_urqye_31[aria-pressed='true'] {
  color: var(--brand-color);
}._text_1dqq9_1 {
  overflow: hidden;
  text-overflow: ellipsis;
}
._speaker_12o5z_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: GrayText;
  cursor: pointer;
}

._speaker_12o5z_1:active {
  color: var(--brand-color);
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

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

._question_1ua1s_1 {
  width: 100%;
}

._line_1ua1s_5 {
  position: relative;
}

._word_1ua1s_9 {
  display: grid;
  border: none;
  border-radius: 0;
  padding-inline: 44px;
  cursor: pointer;
}

._word_1ua1s_9:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: -4px;
}

._word_1ua1s_9 > span {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

._previous_1ua1s_37 {
  animation: _leave_1ua1s_1 200ms ease-in both;
}

._incoming_1ua1s_41 {
  animation: _arrive_1ua1s_1 200ms ease-out 100ms both;
}

@keyframes _leave_1ua1s_1 {
  to { opacity: 0; }
}

@keyframes _arrive_1ua1s_1 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ._previous_1ua1s_37 { display: none; }
  ._incoming_1ua1s_41 { animation: none; }
  ._word_1ua1s_9 { transition: none; }
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

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

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

._translation_1uqjc_8 {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  text-transform: lowercase;
}

._translation_1uqjc_8._active_1uqjc_20 {
  color: var(--brand-color);
}

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

._suggestions_1uqjc_31 {
  width: 100%;
}

._customTranslation_1uqjc_35 {
  width: 100%;
}

._customFold_1uqjc_39 {
  width: 100%;
}
/* Shut, it still holds the card's bottom margin: the list above brings none,
   the open field's own padding does. */
._closed_1uqjc_44 {
  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_1uqjc_35 {
  transition:
    font-size var(--animation-duration, 250ms) ease-in-out,
    padding var(--animation-duration, 250ms) ease-in-out;
}
._customFold_1uqjc_39._trailing_1uqjc_57 ._custom_1uqjc_35 {
  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;
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_urqye_31[aria-pressed='true'] {
  color: var(--brand-color);
}/* Stands off the divider above; whatever follows brings the room below. */._container_ypa7p_2 {
  width: 100%;
  padding: 21px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif-font);
  font-size: 21px;
}._variant_ypa7p_12 {
  position: relative;
  width: 100%;
  padding-inline: 13px;
  text-align: center;
  max-width: 100%;
  color: var(--ink);
}._clipped_ypa7p_21 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}/* Everything after the first answer, folding as one. */._rest_ypa7p_28 {}

._lesson_ne7mh_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_ne7mh_13 {
  background: var(--bg);
  transition: opacity var(--animation-duration, 250ms) ease-in-out;
  @starting-style { opacity: 0 }
}

._sheet_ne7mh_19 {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: transform var(--animation-duration, 250ms) ease-in-out;
  @starting-style { transform: translateY(calc(100% + 60px)) }
}

/* 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. */
._lesson_ne7mh_1._closing_ne7mh_32 ._chrome_ne7mh_13 { opacity: 0 }
._lesson_ne7mh_1._closing_ne7mh_32 ._sheet_ne7mh_19 { transform: translateY(calc(100% + 60px)) }

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

/* The mascot's place along the card edge carries the progress; the count is a
   footnote. */
._progress_ne7mh_41 {
  display: flex;
  align-items: center;
  gap: 8px;

  ._count_ne7mh_47 {
    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_ne7mh_56 {
  color: var(--golden);
  font-weight: 700;
  transition: transform 200ms ease-in, opacity 200ms ease-in;
}

._eaten_ne7mh_62 {
  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_ne7mh_69 {
  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_ne7mh_1 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms backwards;
}

@keyframes _mascot-drop_ne7mh_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_ne7mh_97 {
  overflow: hidden !important;
}

/* The keyboard stays up through the lesson, over the card's end: the card
   scrolls in its own slot, as far again as the keyboard covers. */
._stack_ne7mh_97 > [data-id] {
  max-height: 100cqh;
  overflow-y: auto;
  padding-bottom: calc(var(--keyboard-height, 0px) - var(--scroll-overhang));
  border-radius: var(--card-radius);
}

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

/* The pass got this card wrong — marked on the side the speaker leaves free. */
._repeat_ne7mh_116 {
  right: auto;
  left: -2px;
}

._answer_ne7mh_122 {
  padding-bottom: 21px;
}

._answers_ne7mh_127 {
  padding-bottom: 21px;
}

._form_ne7mh_131 {
  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_ne7mh_131._empty_ne7mh_138 {
  position: absolute;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

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

._form_ne7mh_131._empty_ne7mh_138 + ._variants_ne7mh_146 {
  margin-top: 0;
}

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

._input_ne7mh_156 {
  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_ne7mh_156._correct_ne7mh_54,
._matched_ne7mh_170 ._word_ne7mh_170 {
  font-size: 1.2em;
}

._input_ne7mh_156._wrong_ne7mh_174 {
  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_ne7mh_131._voice_ne7mh_180 ._input_ne7mh_156 {
  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_ne7mh_188 {
  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_ne7mh_188._masked_ne7mh_201 {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}

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

._word_ne7mh_170 {
  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_ne7mh_170 ._heard_ne7mh_206 {
  opacity: 0;
  font-size: 0;
  animation: _heard-out_ne7mh_1 550ms;
}

@keyframes _heard-out_ne7mh_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_ne7mh_170 ._word_ne7mh_170 {
  animation: _word-grow_ne7mh_1 550ms ease-in-out;
}

@keyframes _word-grow_ne7mh_1 {
  0%, 45% {
    font-size: 1em;
  }
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

  svg {
    height: 24px;
  }
}._sideButton_urqye_31[aria-pressed='true'] {
  color: var(--brand-color);
}._pill_1bo3e_1 {
  border: none;
  border-radius: 100px;
  cursor: pointer;
}._tinted_1bo3e_7 {
  color: var(--pill-color, var(--brand-color));
  background: color-mix(in srgb, var(--pill-color, var(--brand-color)) var(--pill-opacity, 15%), transparent);
}

._draftQuestion_hvens_1 {
  width: 100%;
}

._canonicalRow_hvens_5 {
  position: relative;
  margin: 0 8px 16px;
}

._canonicalLabel_hvens_10 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .5;
}

._canonical_hvens_5 {
  --pill-opacity: 10%;
  display: block;
  width: fit-content;
  max-width: calc(100% - 42px);
  margin: 0 auto;
  padding: 0px 6px;
  min-height: 32px;
  overflow-wrap: anywhere;
}

._canonical_hvens_5:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: -4px;
}
._text_urqye_1 {
  font-family: var(--serif-font);
  font-weight: 400;
  font-size: 21px;
}/* One line a card speaks in — the question, an answer being typed: serif at
   answer size, centered, never wrapping. */._line_urqye_9 {
  padding: 21px;
  background: transparent;
  width: 100%;
  outline: none;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}/* A footnote in the card's margin — a part of speech, the lesson's count. */._caption_urqye_21 {
  font-family: var(--sans-serif-font);
  font-size: 10px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}/* A control in the question row's corner
 — the photo picker, the translate
   switch, the lesson's speaker; lit while pressed. */._sideButton_urqye_31 {
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background: none;
  color: GrayText;

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

._form_1q07f_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_1q07f_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_1q07f_15._wide_1q07f_27 {
  width: auto;
  height: 100%;
}

._text_1q07f_32 {
}

._sideButton_1q07f_36 {
}


._bar_1q07f_41 {
  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;
    }
  }
}
/* 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_1rrtg_9 {
  --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_1rrtg_9._due_1rrtg_19 {
  --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_1rrtg_9::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));
}
/* A field whose label sits in the empty input and floats up above it once
   the field is focused or filled — tandem's `.float`, without the form lib. */
._float_nnvz5_2 {
  display: flex;
  position: relative;
  margin-top: 1.75em;
  width: 100%;
}

._float_nnvz5_2 label {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: GrayText;
  pointer-events: none;
  transform: translateY(-1.1em);
  transition: all 0.1s ease-in-out;
}

._float_nnvz5_2 select:not(:has(option[value='']:checked)) ~ label,
._float_nnvz5_2 input:not(:placeholder-shown) ~ label,
._float_nnvz5_2 input:focus-visible ~ label {
  font-size: smaller;
}

._float_nnvz5_2 select:has(option[value='']:checked) ~ label,
._float_nnvz5_2 input:not(:focus-visible):placeholder-shown ~ label {
  transform: none;
  height: 100%;
}

._float_nnvz5_2 input,
._float_nnvz5_2 select {
  width: 100%;
  margin: 0;
  padding: 0.125em 0;
  font: inherit;
  color: inherit;
  line-height: 1.5em;
  background: none;
  border: 0;
  border-bottom: 2px solid color-mix(in srgb, GrayText 35%, transparent);
  border-radius: 0;
  outline: 0;
  transition: border-bottom-color 0.25s ease-in-out;
}

._float_nnvz5_2 input:focus-visible,
._float_nnvz5_2 select:focus-visible {
  border-bottom-color: GrayText;
}

._float_nnvz5_2 input:disabled,
._float_nnvz5_2 select:disabled {
  border-bottom-color: transparent;
}

._float_nnvz5_2 select {
  cursor: pointer;
  appearance: none;
  padding-right: 1.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._file_nnvz5_74 {
  cursor: pointer;
  caret-color: transparent;
  padding-right: 2em;
}

._clear_nnvz5_80 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
._signOut_2rnjy_1 {
  margin-top: 2em;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-color);
  cursor: pointer;
}
/* Alone on the panel, so it takes the room under the header and sits at
   its middle — above the keyboard, once that comes up. The deck asks for the
   whole app height and would never leave the fold any, so the room comes off
   the app itself, less the header. */
._signIn_1q83j_5 {
  min-height: calc(100cqh - 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  font-size: 20px;
}

/* He stands on the field's underline at its right end, tail curling over it:
   his canvas runs 12px below his feet, and he keeps 57px (his EDGE at scale 3)
   short of its end — hung that far past the line, his snout meets its end. */
._mascot_1q83j_17 {
  position: absolute;
  right: -57px;
  bottom: -10px;
  width: 177px;
  height: 48px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Room for him at the end of the line: the address stops short of his feet. */
._signIn_1q83j_5 input[type=email] {
  padding-right: 66px;
}

/* The link is on its way: the note takes the field's place. */
._sent_1q83j_33 {
  align-items: center;
  gap: 1em;
  text-align: center;
}

._another_1q83j_40 {
}
._signOut_2rnjy_1 {
  margin-top: 2em;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand-color);
  cursor: pointer;
}
:root {
  interpolate-size: allow-keywords;  /* enable globally */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color-scheme: light dark;
  background: var(--bg);
  touch-action: manipulation;
  --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: #0088ff;
}

@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;
}