@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-italic-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-bold-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-bold-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-bold-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.account-page .grid, .add {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  gap: 1rem; }

table.list th, table.words th {
  text-align: left;
  font-weight: 400;
  color: #5d6673;
  font-size: .85rem;
  border-bottom: 1px solid #d5dae0; }

* {
  box-sizing: border-box; }

html {
  font-size: 17px; }

body {
  margin: 0;
  background: #e9ecef;
  color: #1d232b;
  font-family: 'PT Sans', 'Noto Sans', 'DejaVu Sans', sans-serif;
  line-height: 1.45;
  font-variant-numeric: tabular-nums; }

a {
  color: #33415a;
  text-underline-offset: 2px; }
  a:hover {
    color: #1d232b; }

:focus-visible {
  outline: 2px solid #33415a;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #ffd84a; }

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

h1 {
  font-size: 1.9rem;
  line-height: 1.15;
  margin: .2rem 0 .4rem;
  overflow-wrap: anywhere; }

h2 {
  font-size: 1.3rem;
  margin: 2.2rem 0 .6rem; }

p {
  margin: .4rem 0; }

.lead {
  color: #5d6673;
  max-width: 42rem;
  margin-bottom: 1.2rem; }

.muted {
  color: #5d6673; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; }

.file-name {
  color: #5d6673;
  font-size: .85rem;
  overflow-wrap: anywhere; }

.error {
  color: #a2322b; }
  .error::first-letter {
    text-transform: uppercase; }

div.error {
  margin: 0 0 1rem; }
  div.error p {
    margin: 0 0 .6rem; }

.credit {
  font-size: .85rem;
  color: #5d6673;
  margin-top: 2rem; }

.keys {
  color: #5d6673;
  font-size: .85rem; }

.top {
  background: #ffffff;
  border-bottom: 1px solid #d5dae0; }
  .top nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: .7rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.4rem; }
  .top a {
    text-decoration: none; }
    .top a.here {
      color: #1d232b;
      font-weight: 700; }
  .top .brand {
    color: #1d232b;
    font-weight: 700;
    font-size: 1.25rem;
    margin-right: .4rem; }
  .top .account {
    margin-left: auto;
    display: flex;
    gap: 1.2rem; }
  .top form.logout {
    display: inline; }
  .top button.link {
    border: 0;
    background: none;
    padding: 0;
    color: #33415a;
    font: inherit; }
    .top button.link:hover {
      color: #1d232b;
      background: none; }

.due {
  background: #ffd84a;
  color: #1d232b;
  border-radius: 1em;
  padding: 0 .45em;
  font-size: .85em;
  font-weight: 700; }

.flash {
  max-width: calc(1100px - 2rem);
  margin: 1rem auto 0;
  padding: .6rem 1rem;
  background: #ffffff;
  border-left: 4px solid #33415a; }
  .flash::first-letter {
    text-transform: uppercase; }
  .flash.alert {
    border-left-color: #a2322b; }

main {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.4rem 1rem 3rem; }

.foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
  color: #5d6673;
  font-size: .9rem; }
  .foot form {
    border-top: 1px solid #d5dae0;
    padding-top: 1rem; }
  .foot label {
    display: inline;
    margin: 0; }
  .foot select, .foot button {
    font-size: .9rem;
    padding: .25rem .5rem; }

button, a.button {
  font: inherit;
  font-size: .9rem;
  line-height: 1.2;
  padding: .38rem .8rem;
  border: 1px solid #33415a;
  border-radius: 4px;
  background: #ffffff;
  color: #33415a;
  cursor: pointer;
  display: inline-block;
  text-decoration: none; }
  button:hover, a.button:hover {
    background: #eef1f5; }
  button.primary, a.button.primary {
    background: #33415a;
    color: #ffffff; }
    button.primary:hover, a.button.primary:hover {
      background: #262f41; }
  button.danger, a.button.danger {
    border-color: #a2322b;
    color: #a2322b; }

input[type="text"], input[type="password"], input[type="search"], textarea, select {
  font: inherit;
  padding: .4rem .55rem;
  border: 1px solid #8a94a1;
  border-radius: 4px;
  background: #ffffff;
  color: #1d232b; }

input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #33415a; }

input[type="file"] {
  font: inherit;
  font-size: .9rem;
  max-width: 100%;
  color: #5d6673; }
  input[type="file"]::file-selector-button {
    font: inherit;
    padding: .38rem .8rem;
    margin-right: .7rem;
    border: 1px solid #33415a;
    border-radius: 4px;
    background: #ffffff;
    color: #33415a;
    cursor: pointer; }

textarea {
  width: 100%; }

label {
  display: block;
  margin: .7rem 0 .2rem; }

label input[type="text"], label input[type="password"], label textarea {
  display: block;
  width: 100%;
  margin-top: .25rem; }

label.check {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .25rem 1rem .25rem 0; }

.panel {
  background: #ffffff;
  border: 1px solid #d5dae0;
  border-radius: 6px;
  padding: 1rem 1.2rem; }

.panel > label:first-of-type {
  margin-top: 0; }

.narrow {
  max-width: 26rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center; }

.callout {
  background: #ffffff;
  border-left: 4px solid #ffd84a;
  padding: .7rem 1rem;
  margin: 1rem 0; }

form.callout label.check {
  display: inline;
  margin: 0; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 1rem; }
  .tabs a, .tabs b {
    padding: .35rem .8rem;
    border-radius: 4px;
    text-decoration: none; }
  .tabs b {
    background: #33415a;
    color: #ffffff; }
  .tabs.scenes {
    font-size: .9rem;
    margin: .4rem 0 .8rem; }
    .tabs.scenes a, .tabs.scenes b {
      padding: .25rem .6rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  margin: .6rem 0; }
  .toolbar form {
    display: flex;
    gap: .4rem;
    align-items: center; }

.pages {
  display: flex;
  gap: 1rem;
  margin-top: 1rem; }

.more {
  margin: .7rem 0 0; }

.sub {
  display: inline;
  background: #262f41;
  color: #ffd84a;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 3px;
  line-height: 1.75;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
  .sub b {
    color: #ffffff; }
  .sub .at {
    color: #a9b3c2;
    font-weight: 400;
    font-size: .8em;
    margin-right: .5em;
    text-shadow: none; }

.coverage {
  margin: 1rem 0 1.2rem; }
  .coverage .bar {
    position: relative;
    height: .7rem;
    background: #d5dae0;
    border-radius: 1rem;
    max-width: 42rem; }
  .coverage .have {
    position: absolute;
    inset: 0 auto 0 0;
    background: #2f7d5b;
    border-radius: 1rem; }
  .coverage .goal {
    position: absolute;
    top: -.25rem;
    bottom: -.25rem;
    width: 2px;
    background: #1d232b; }
  .coverage p {
    margin-top: .5rem; }

.takeaway {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  margin: .8rem 0 .4rem; }
  .takeaway label {
    display: inline;
    margin: 0; }
  .takeaway form {
    gap: .4rem; }

.bulk {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e9ecef;
  padding: .55rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center; }
  .bulk span {
    color: #5d6673;
    margin-right: .2rem; }
  .bulk.floating {
    position: fixed;
    top: auto;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 2rem);
    background: #262f41;
    padding: .6rem .9rem;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(29, 35, 43, 0.35); }
    .bulk.floating span {
      color: #ffd84a;
      font-weight: 700; }
  .bulk[hidden] {
    display: none; }

table.words {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #d5dae0; }
  table.words caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    font-size: 1.3rem;
    padding: 1.6rem 0 .5rem; }
  table.words th {
    padding: .45rem .6rem; }
  table.words td {
    padding: .6rem;
    vertical-align: top; }
  table.words tr.w td {
    border-top: 1px solid #d5dae0; }
  table.words tr.current td, table.words tr.current + tr.ex td {
    background: #eef1f5; }
  table.words tr.ex td {
    padding-top: 0; }
  table.words tr.goal-line td {
    border-top: 2px dashed #2f7d5b;
    color: #2f7d5b;
    font-size: .85rem;
    font-weight: 700;
    padding: .35rem .6rem; }
  table.words td.pick {
    width: 2rem;
    padding-top: .7rem; }
  table.words td.num, table.words th.num {
    text-align: right;
    color: #5d6673;
    white-space: nowrap; }
  table.words td.act {
    text-align: right;
    white-space: nowrap; }
  table.words td.meaning {
    max-width: 30rem; }
  table.words .m {
    display: -webkit-inline-box;
    vertical-align: top;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; }

a.w {
  color: #1d232b;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none; }
  a.w:hover {
    text-decoration: underline; }

tr.learning a.w, h1 > .learning {
  background: linear-gradient(transparent 58%, #ffd84a 58%); }

tr.known a.w {
  color: #5d6673;
  font-weight: 400; }

.ts {
  color: #5d6673;
  font-size: .85rem;
  margin-left: .25rem;
  white-space: nowrap; }

.state {
  font-size: .75rem;
  background: #ffd84a;
  color: #1d232b;
  border-radius: 3px;
  padding: 0 .35em;
  margin-left: .3rem;
  white-space: nowrap; }

.kind {
  font-size: .75rem;
  color: #33415a;
  border: 1px solid #33415a;
  border-radius: 3px;
  padding: 0 .3em;
  margin-left: .3rem; }

.machine {
  font-style: italic; }

.m.machine::before {
  content: "\2248\00a0";
  color: #5d6673;
  font-style: normal; }

.note {
  color: #8a6400; }

td.meaning .note {
  display: block;
  font-size: .85rem;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(30rem, 100%); }

.say {
  border: 0;
  background: none;
  color: #33415a;
  padding: .15rem .3rem;
  vertical-align: middle;
  line-height: 0;
  cursor: pointer; }
  .say:hover {
    background: none;
    color: #1d232b; }
  .say svg {
    display: block; }

.word {
  display: inline-flex;
  gap: .3rem; }
  .word button {
    font-size: .8rem;
    padding: .22rem .55rem; }

table.list {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #d5dae0; }
  table.list th {
    padding: .45rem .7rem; }
  table.list td {
    padding: .6rem .7rem;
    border-top: 1px solid #d5dae0;
    vertical-align: top; }
  table.list td.num, table.list th.num {
    text-align: right;
    white-space: nowrap; }
  table.list tr.show td:first-child a {
    font-weight: 700; }
  table.list tr.episode td:first-child {
    padding-left: 2rem; }
  table.list.episodes {
    margin-bottom: 1.2rem; }
  table.list .pct {
    display: inline-block;
    width: 4rem;
    height: .45rem;
    background: #d5dae0;
    border-radius: 1rem;
    margin-right: .4rem;
    vertical-align: middle;
    overflow: hidden; }
    table.list .pct span {
      display: block;
      height: 100%;
      background: #2f7d5b; }

.add {
  margin-bottom: 1.5rem; }
  .add h2 {
    margin-top: 0; }
  .add form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center; }

.add form.find {
  align-items: flex-end; }

form.find label {
  margin: 0;
  font-size: .85rem;
  color: #5d6673;
  min-width: 0; }

form.find label input {
  display: block;
  width: 100%;
  margin-top: .2rem;
  font-size: 1rem;
  color: #1d232b; }

form.find .title {
  flex: 999 1 14rem; }

form.find .fields {
  flex: 1 1 auto;
  display: flex;
  gap: .5rem;
  align-items: flex-end;
  min-width: 0; }

form.find .fields label {
  flex: 1 1 5.5rem;
  width: 5.5rem; }

form.find .fields button {
  flex: none;
  min-height: 2.5rem; }

table.found .release {
  overflow-wrap: anywhere; }

table.found .detail {
  display: none; }

table.found .from {
  color: #33415a;
  font-weight: 700;
  margin-left: .3rem;
  white-space: nowrap; }

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.2rem; }
  .steps li {
    counter-increment: step;
    position: relative;
    padding-left: 2.4rem;
    color: #5d6673; }
  .steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #262f41;
    color: #ffd84a;
    font-weight: 700;
    text-align: center;
    line-height: 1.7rem; }
  .steps b {
    color: #1d232b;
    display: block; }
  .steps.watch {
    margin: 1.2rem 0 .4rem; }
    .steps.watch li {
      color: #1d232b; }
    .steps.watch form {
      margin-top: .5rem; }
    .steps.watch p {
      margin: .5rem 0 0; }

.word-page .meta {
  color: #5d6673;
  margin-bottom: .8rem; }

.word-page > .word button {
  font-size: .9rem;
  padding: .38rem .8rem; }

.word-page h2.first, .word-page .panel h2 {
  margin-top: 0; }

.word-page .cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.2rem;
  margin-top: 1rem; }

.word-page fieldset {
  border: 0;
  padding: 0;
  margin: 0; }

.word-page legend {
  padding: 0;
  margin-bottom: .3rem; }

.word-page dl.defs {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .9rem; }
  .word-page dl.defs dt {
    color: #5d6673; }
  .word-page dl.defs dd {
    margin: 0; }

.word-page ul.films {
  list-style: none;
  margin: 0;
  padding: 0; }
  .word-page ul.films li {
    padding: .5rem 0;
    border-top: 1px solid #d5dae0; }
    .word-page ul.films li:first-child {
      border-top: 0;
      padding-top: 0; }

.review {
  max-width: 40rem;
  margin: 0 auto; }
  .review .screen {
    background: #262f41;
    border-radius: 8px;
    padding: 2.2rem 1.5rem 2rem;
    text-align: center;
    color: #ffffff; }
  .review .screen h1 {
    color: #ffffff;
    font-size: 2.4rem;
    margin: 0; }
  .review .screen .ts {
    color: #a9b3c2;
    font-size: 1rem; }
  .review .screen .say {
    color: #a9b3c2; }
    .review .screen .say:hover {
      color: #ffffff; }
  .review .screen .line {
    color: #ffd84a;
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 1.4rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
    .review .screen .line b {
      color: #ffffff; }
  .review .prompt {
    font-size: 1.5rem;
    margin: 0;
    color: #ffffff; }
    .review .prompt.machine {
      font-style: italic; }
  .review .gap {
    color: #ffffff;
    letter-spacing: .05em; }
  .review .verdict {
    text-align: center;
    font-weight: 700;
    margin: 1rem 0 0; }
    .review .verdict.right {
      color: #27674b; }
    .review .verdict.wrong {
      color: #a2322b; }
  .review .line-tr {
    text-align: center;
    color: #5d6673;
    font-style: italic;
    margin: .7rem 0 0; }
  .review .answer {
    font-size: 1.35rem;
    margin: 1.2rem 0 .3rem;
    text-align: center; }
  .review .english {
    text-align: center;
    max-width: 34rem;
    margin: .4rem auto 0; }
  .review .note {
    text-align: center;
    margin: 0 0 .6rem; }
  .review .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    margin-top: 1rem; }
    .review .actions button, .review .actions a {
      font-size: 1.05rem;
      padding: .55rem 1.3rem; }
  .review .check input[type="text"] {
    font-size: 1.1rem;
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 20rem; }
  .review .count, .review .keys {
    color: #5d6673;
    text-align: center; }
  .review .keys {
    font-size: .85rem;
    margin-top: .6rem; }
  .review .review-links {
    text-align: center;
    margin-top: 2rem; }
  .review .session {
    text-align: center;
    color: #5d6673;
    margin: 0 0 .6rem; }
  .review .screen .cue {
    color: #a9b3c2;
    margin: 0 0 .5rem; }
  .review .screen .from {
    color: #a9b3c2;
    font-size: .85rem;
    margin: .7rem 0 0; }
  .review .screen .play {
    font-size: 1.05rem;
    padding: .55rem 1.3rem;
    margin-top: 1rem; }
  .review .grades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
    margin: 1.2rem 0 .9rem; }
    .review .grades button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .15rem;
      padding: .55rem .3rem;
      font-size: 1.05rem; }
    .review .grades span {
      font-size: .8rem;
      opacity: .8; }
    .review .grades .again {
      border-color: #a2322b;
      color: #a2322b; }
  .review .settings {
    margin-top: 1rem; }
    .review .settings summary {
      cursor: pointer;
      text-align: center;
      color: #33415a; }
    .review .settings form {
      margin-top: .6rem; }
    .review .settings fieldset {
      border: 0;
      padding: 0;
      margin: 0; }
    .review .settings legend {
      padding: 0;
      margin-bottom: .2rem; }

.stats-page .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem; }

.stats-page .tile {
  background: #ffffff;
  border: 1px solid #d5dae0;
  border-radius: 6px;
  padding: .9rem 1rem; }
  .stats-page .tile b {
    display: block;
    font-size: 2rem;
    line-height: 1.1; }
  .stats-page .tile span {
    color: #5d6673;
    font-size: .9rem; }

.stats-page .panel {
  margin-bottom: 1rem; }
  .stats-page .panel h2 {
    margin: 0 0 .5rem;
    font-size: 1.1rem; }

.stats-page .legend {
  color: #5d6673;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem; }

.stats-page .key {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 2px;
  margin-left: .6rem; }
  .stats-page .key:first-child {
    margin-left: 0; }
  .stats-page .key.good {
    background: #3f6fb0; }
  .stats-page .key.again {
    background: #c56b2c; }

.stats-page .plot {
  position: relative;
  padding-left: 2rem; }

.stats-page .ymax {
  position: absolute;
  left: 0;
  top: -.4rem;
  color: #5d6673;
  font-size: .8rem; }

.stats-page .bars {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 10rem;
  border-bottom: 1px solid #d5dae0; }

.stats-page .day {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  outline-offset: 1px; }
  .stats-page .day span {
    display: block;
    min-height: 0; }
  .stats-page .day .good {
    background: #3f6fb0; }
  .stats-page .day .again {
    background: #c56b2c; }
  .stats-page .day span:last-child {
    border-radius: 4px 4px 0 0; }
  .stats-page .day:hover, .stats-page .day:focus {
    background: rgba(51, 65, 90, 0.08); }
  .stats-page .day:hover::after, .stats-page .day:focus::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    background: #1d232b;
    color: #ffffff;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 3; }

.stats-page .axis {
  display: flex;
  justify-content: space-between;
  padding-left: 2rem;
  color: #5d6673;
  font-size: .8rem;
  margin-top: .3rem; }

.stats-page details {
  margin-top: .8rem; }
  .stats-page details summary {
    cursor: pointer;
    color: #33415a; }
  .stats-page details table {
    margin-top: .5rem; }

code {
  font-family: ui-monospace, 'DejaVu Sans Mono', monospace;
  font-size: .9em;
  background: #eef1f5;
  padding: .05rem .3rem;
  border-radius: 3px;
  overflow-wrap: anywhere; }

ul.plain {
  list-style: none;
  margin: 0;
  padding: 0; }
  ul.plain li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    padding: .5rem 0;
    border-top: 1px solid #d5dae0; }
    ul.plain li:first-child {
      border-top: 0;
      padding-top: 0; }
  ul.plain form.inline {
    margin-left: auto; }

.consent ul {
  margin: .4rem 0 .8rem;
  padding-left: 1.2rem; }

.account-page .panel h2 {
  margin: 0 0 .3rem;
  font-size: 1.1rem; }

.account-page dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .9rem;
  margin: 0; }
  .account-page dl dt {
    color: #5d6673; }
  .account-page dl dd {
    margin: 0;
    overflow-wrap: anywhere; }

.account-page details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.3rem;
  margin: 2.2rem 0 .6rem; }

.account-page details.delete summary {
  font-size: 1rem;
  font-weight: 400;
  color: #a2322b; }

@media (hover: none) {
  .kbd {
    display: none; } }

@media (pointer: coarse), (max-width: 720px) {
  button, a.button, input[type="text"], input[type="password"], input[type="search"], select {
    min-height: 2.5rem; }
  input[type="file"]::file-selector-button {
    min-height: 2.5rem; }
  input[type="checkbox"], input[type="radio"] {
    width: 1.5rem;
    height: 1.5rem; }
  .takeaway > a {
    display: inline-block;
    padding: .55rem 0; }
  .top nav {
    padding-top: .1rem;
    padding-bottom: .1rem;
    row-gap: 0; }
  .top nav a, .top button.link {
    display: inline-block;
    padding: .6rem 0; }
  .tabs a, .tabs b, .tabs.scenes a, .tabs.scenes b {
    padding: .6rem .8rem; }
  .toolbar a {
    display: inline-block;
    padding: .55rem 0; }
  .say {
    min-width: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center; }
  summary {
    padding: .55rem 0; }
  label.check {
    min-height: 2.5rem; } }

@media (max-width: 720px) {
  html {
    font-size: 16px; }
  .word button {
    font-size: .85rem;
    padding: .45rem .75rem; }
  .top .account {
    margin-left: 0; }
  .bulk.floating {
    bottom: .6rem;
    gap: .35rem;
    padding: .5rem .6rem; }
    .bulk.floating button {
      padding: .35rem .55rem;
      font-size: .85rem; }
  table.words th.num, table.words td.num {
    display: none; }
  table.words td.meaning {
    max-width: none;
    min-width: 0; }
  table.words thead {
    display: none; }
  table.words tr.w {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    border-top: 1px solid #d5dae0; }
    table.words tr.w td {
      border-top: 0; }
  table.words tr.w td.pick {
    grid-row: span 2; }
  table.words tr.w td.head {
    padding-bottom: .1rem; }
  table.words tr.w td.act {
    grid-column: 3;
    grid-row: 1; }
  table.words tr.w td.meaning {
    grid-column: 2 / 4;
    padding-top: 0; }
  table.words tr.w td.when {
    display: block;
    grid-column: 2 / 4;
    grid-row: 3;
    padding-top: 0;
    text-align: left;
    font-size: .85rem; }
    table.words tr.w td.when::before {
      content: "Review "; }
  table.words tr.goal-line {
    display: block; }
    table.words tr.goal-line td {
      display: block; }
    table.words tr.goal-line td:first-child {
      display: none; }
  table.words tr.ex {
    display: block; }
    table.words tr.ex td {
      display: block;
      padding-left: 2.6rem; }
    table.words tr.ex td:first-child {
      display: none; }
  table.list th.hide, table.list td.hide {
    display: none; }
  table.found .detail {
    display: block;
    color: #5d6673;
    font-size: .85rem;
    overflow-wrap: anywhere;
    margin-top: .15rem; }
  .word-page .cols {
    grid-template-columns: 1fr; }
    .word-page .cols > .panel {
      order: 2; } }