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

/* Main elements */

body {
  /* Under the cards' darkest stop, so they stand off it. */
  background: #224337;
  /* Dynamic, not 100vh: on a phone 100vh is the viewport with the browser's toolbar hidden,
     which is taller than what you can see, so a page with nothing in it still scrolled. The
     bottom bar is fixed, and that scroll is what lets the toolbar collapse and drag it. The
     plain vh line is the fallback for a browser without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: #F7F1E3;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      circle at 25% 25%,
      rgb(34 176 123 / 7%) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgb(44 200 141 / 7%) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: -1;
}

ul {
  list-style-position: inside;
}

/* Header */

.header-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 10px;
  text-decoration: none;
}

.header-link,
.header-link:visited,
.header-link:hover,
.header-link:active {
  text-decoration: none;
  cursor: pointer;
}

/* Forms */

.helptext {
  display: None;
}

.errorlist {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.account-icon {
  height: 40px;
}

.arrow-down {
  height: 20px;
}

/* The answer cards.
 *
 * Two shapes, because the two kinds of answer are not the same problem. Words want a wide, short
 * card that fills the column; a flag wants a square with room to be looked at. A round has one
 * kind or the other, never both.
 *
 * minmax(0, 1fr) rather than 1fr: a 1fr track is min-width:auto underneath, so a single long
 * unbroken answer would push the grid wider than the card holding it.
 *
 * The row height stays a definite number in both shapes. game.js shrinks an answer that does not
 * fit by measuring it against the box; if the box grew to fit the text instead, nothing would
 * ever be measured as overflowing, and the grid would change height from question to question. */

.answer-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 4.5rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .answer-grid {
    gap: 1rem;
    grid-auto-rows: 5rem;
  }
}

/* Picture answers, declared after the word-card rules and after their breakpoint on purpose:
 * both selectors are one class, so whichever is written last wins, and a square cell has to beat
 * the row height the word cards ask for at the same width. Written the other way round, a flag
 * came out 240 wide and 80 tall. */

.answer-grid--visual {
  --answer-size: min(40vw, 9.5rem);
  grid-template-columns: repeat(2, var(--answer-size));
  grid-auto-rows: var(--answer-size);
}

@media (min-width: 640px) {
  .answer-grid--visual {
    --answer-size: 15rem;
  }
}

/* The radio is invisible but still there, covering the whole card: display:none would take it
 * out of the tab order and leave the answers unreachable from a keyboard. Sized to the card so
 * its own focus ring traces the card's edge, with no :has() needed to reach the parent. */

.answer-grid > label > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}

.answer-grid > label > input[type="radio"]:focus-visible {
  outline: 3px solid #2CC88D;
  outline-offset: 2px;
}

#countdown {
  font-size: 4.5rem;
  line-height: 1;
  white-space: nowrap;
}

/* justify-content is `safe` centred: a centred flex column that outgrows its box overflows at
 * both ends, and the top end cannot be scrolled back to. `safe` gives up and aligns to the top
 * in that case, which is what keeps a long game-over heading on screen. */

#question-area {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: 0;
}

/* A live round is sized by what is in it; the countdown needs a floor to sit in the middle of;
 * the result screen is the one state allowed to run past the bottom of the screen. */

.question-area--live,
.question-area--countdown {
  min-height: 23rem;
}

/* On a phone the round is capped to the screen it is played on: the panel gets what is left
 * after the app header, the HUD and the page padding, and the question picture inside it is the
 * one thing allowed to flex. That is what keeps every round on one screen without knowing how
 * tall the phone is or whether its browser is showing a toolbar. */

.question-area--live {
  /* 10.25rem is what the round needs above and below the panel: the app header, the page
     padding top and bottom, the HUD bar and the gap under it, plus a couple of pixels of
     margin for error. */
  max-height: calc(100dvh - 10.25rem);
}

@media (min-width: 640px) {
  .question-area--live,
  .question-area--countdown {
    min-height: 34rem;
  }

  /* Desktop has the room, and a window that is short rather than small should scroll rather
     than squeeze the picture down to nothing. */

  .question-area--live {
    max-height: none;
  }
}

/* One of the three lives a race is played with. It starts as an empty red ring and fills in
 * solid when a wrong answer takes it, so a round opens quietly and the bar fills up as you go
 * wrong. Red throughout: it is the colour every other mistake in the game is marked in. */

.life {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  border: 1px solid rgb(239 68 68 / 55%);
}

.life--spent {
  background: #ef4444;
  border-color: #ef4444;
  box-shadow: 0 0 6px rgb(239 68 68 / 45%);
}

.life--lost {
  animation: life-lost 0.45s ease-out;
}

.fill-page {
  height: 100%;
  width: 100%;
}

label {
  display: block;
}

#login-form input,
#sign-up-form input,
#change-password-form input {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(15 106 77 / 0.6);
  background-color: rgb(10 59 46 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

#login-form input::-moz-placeholder, #sign-up-form input::-moz-placeholder, #change-password-form input::-moz-placeholder {
  color: rgb(247 241 227 / 0.4);
}

#login-form input::placeholder,
#sign-up-form input::placeholder,
#change-password-form input::placeholder {
  color: rgb(247 241 227 / 0.4);
}

#login-form input,
#sign-up-form input,
#change-password-form input {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#login-form input:focus,
#sign-up-form input:focus,
#change-password-form input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

#login-form input,
#sign-up-form input,
#change-password-form input {
  margin-bottom: 1rem;
  width: 100%;
  max-width: 24rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/*
 * The reCAPTCHA v2 checkbox renders at a fixed 304px width, which leaves it
 * narrower than the inputs on wide screens and overflowing the form column on
 * narrow ones. It is scaled to match the inputs at runtime (see signup.html);
 * these rules anchor the scale transform and align its spacing with the inputs.
 */

#sign-up-form .g-recaptcha {
  margin-bottom: 1rem;
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Other */

  #change-password-form {
    width: 300px;
  }

  .image-container {
    padding: 0px;
    margin-right: 10px;
  }
}

/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

/* One focus ring for everything a keyboard can reach. Fields override it with their own
     border-and-ring look, which is why they set focus:outline-none. */

:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #2CC88D;
}

/* Every button is a primary one unless it says otherwise: solid gold with forest ink, which is
     5.2:1, so there should be one per screen; the rest take .btn-secondary or .btn-quiet. Hover brightens rather than lifts, so nothing moves out
     from under the pointer. */

button,
  .link-as-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(199 162 75 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 59 46 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (hover: hover) and (pointer: fine) {
  button:hover,
  .link-as-button:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(214 180 99 / var(--tw-bg-opacity));
  }
}

button:active,
  .link-as-button:active {
  --tw-bg-opacity: 1;
  background-color: rgb(168 132 47 / var(--tw-bg-opacity));
}

button:disabled,
  .link-as-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.answer-grid > label {
  position: relative;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #F7F1E3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 241 227 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #EFE7D3 var(--tw-gradient-to-position);
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 231 211 / var(--tw-border-opacity));
  /* Colours only, not `all`. game.js sizes an overlong answer by setting a font-size on this
       element, and font-size is animatable: with `all` the card transitioned into its new size,
       so a long answer visibly shrank over a third of a second every time it appeared. The
       reveal state brings its own transition, and the answer feedback is a keyframe animation,
       so neither loses anything here. */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  overflow-wrap: break-word;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  cursor: pointer;
  --tw-text-opacity: 1;
  color: rgb(10 59 46 / var(--tw-text-opacity));
  font-weight: 600;
  /* 16px, not 18: at 18 a three-line answer overflows a 72px card immediately and game.js
       shrinks it, so the grid ends up with a different type size in every card. */
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .answer-grid > label {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.answer-grid > label {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

@media (min-width: 640px) {
  .answer-grid > label {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* A picture brings its own hairline (see input_option.html), drawn tight around the flag so a
     pale one still reads against the cream card. The card's own border around that made two
     frames a few pixels apart. Transparent rather than removed, so the box keeps its size and
     the answer feedback can still colour the edge. */

.answer-grid--visual > label {
  border-color: transparent;
  padding: 0.5rem;
}

@media (min-width: 640px) {
  .answer-grid--visual > label {
    padding: 0.75rem;
  }
}

/* The score inside the game-over sentences. Styled here rather than with utility classes
     in the template, because those classes sit inside translatable text — restyling them
     changes the msgid and silently drops every translation of the sentence. */

#question-area p > b {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

/* The language picker. Styled here rather than through the form's widget attrs, because
     Tailwind only scans templates — classes named in Python never reach the stylesheet. */

#id_language {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(15 106 77 / 0.6);
  background-color: rgb(10 59 46 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

#id_language::-moz-placeholder {
  color: rgb(247 241 227 / 0.4);
}

#id_language::placeholder {
  color: rgb(247 241 227 / 0.4);
}

#id_language {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#id_language:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

#id_language {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 500;
}

/* The typed answer box. Styled here rather than with utility classes in the template
     because game.js adds its feedback classes at runtime, and Tailwind only scans templates —
     a class it never sees in a template is a class it never generates. */

#typed-answer {
  width: 100%;
  max-width: 28rem;
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #F7F1E3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(247 241 227 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #EFE7D3 var(--tw-gradient-to-position);
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(239 231 211 / var(--tw-border-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 59 46 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  #typed-answer {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

#typed-answer {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

#typed-answer::-moz-placeholder {
  font-weight: 500;
  color: rgb(10 59 46 / 0.4);
}

#typed-answer::placeholder {
  font-weight: 500;
  color: rgb(10 59 46 / 0.4);
}

#typed-answer:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

/* Between answering and the next question the box is disabled, so a second Enter cannot
     submit the same answer against the question that has already moved on. It must not look
     disabled while that happens: browsers fade disabled inputs out — Safari through
     -webkit-text-fill-color, which beats `color` — and the feedback colours are the whole
     point of that moment. */

#typed-answer:disabled {
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

/* The answer-style switch in a game card's corner. The checkbox driving it is visually
     hidden, and the knob sits one level deeper than a peer- variant can reach, so both live
     here. Off, the track goes darker than the card so it reads as a recess; on, it fills with
     cream and the knob inverts. */

.answer-style-switch {
  position: relative;
  display: block;
  height: 0.875rem;
  width: 1.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: rgb(10 59 46 / 0.6);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.answer-style-switch > span {
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: rgb(247 241 227 / 0.7);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.peer:checked ~ .answer-style-switch {
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 227 / var(--tw-bg-opacity));
}

.peer:checked ~ .answer-style-switch > span {
  left: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(10 59 46 / var(--tw-bg-opacity));
}

/* The checkbox takes focus but cannot show it — the switch shows it instead. */

.peer:focus-visible ~ .answer-style-switch {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(247 241 227 / 0.5);
}

/* Block-level so game.js can measure the wrapped text against the fixed box. */

.answer-grid > label > .answer-text {
  display: block;
  width: 100%;
}

@media (hover: hover) {
  .answer-grid > label:hover {
    --tw-text-opacity: 1;
    color: rgb(15 106 77 / var(--tw-text-opacity));
  }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* The surface everything sits on: a page section, a hub tile, a game panel. */

.card {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(247 241 227 / 0.1);
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(15 106 77 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(37 88 69 / 0.9) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* The strip above a round: progress, score, the clock. */

.bar {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(15 106 77 / 0.6);
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(15 106 77 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(37 88 69 / 0.9) var(--tw-gradient-to-position);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* The three kinds of button. .btn is what a bare <button> already is, for links. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(199 162 75 / var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 59 46 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(214 180 99 / var(--tw-bg-opacity));
  }
}

.btn:active {
  --tw-bg-opacity: 1;
  background-color: rgb(168 132 47 / var(--tw-bg-opacity));
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(247 241 227 / 0.2);
  background-color: rgb(247 241 227 / 0.05);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    border-color: rgb(247 241 227 / 0.4);
    background-color: rgb(247 241 227 / 0.1);
  }
}

/* A text box or select on a dark surface. Padding and size are left to where it is used. */

.\!field {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(15 106 77 / 0.6);
  background-color: rgb(10 59 46 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

.\!field::-moz-placeholder {
  color: rgb(247 241 227 / 0.4);
}

.\!field::placeholder {
  color: rgb(247 241 227 / 0.4);
}

.field {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: rgb(15 106 77 / 0.6);
  background-color: rgb(10 59 46 / 0.6);
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

.field::-moz-placeholder {
  color: rgb(247 241 227 / 0.4);
}

.field::placeholder {
  color: rgb(247 241 227 / 0.4);
}

.\!field {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.field {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.\!field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

.field:focus {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

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

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.-inset-2 {
  inset: -0.5rem;
}

.inset-0 {
  inset: 0px;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.right-2 {
  right: 0.5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-8 {
  right: 2rem;
}

.top-0 {
  top: 0px;
}

.top-2 {
  top: 0.5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-8 {
  top: 2rem;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.col-span-full {
  grid-column: 1 / -1;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.-mr-2 {
  margin-right: -0.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.size-1 {
  width: 0.25rem;
  height: 0.25rem;
}

.size-1\.5 {
  width: 0.375rem;
  height: 0.375rem;
}

.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.size-12 {
  width: 3rem;
  height: 3rem;
}

.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

.size-16 {
  width: 4rem;
  height: 4rem;
}

.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}

.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-32 {
  width: 8rem;
  height: 8rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.size-\[18px\] {
  width: 18px;
  height: 18px;
}

.size-\[75px\] {
  width: 75px;
  height: 75px;
}

.h-0 {
  height: 0px;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-12 {
  height: 3rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[50dvh\] {
  height: 50dvh;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-14 {
  min-height: 3.5rem;
}

.min-h-36 {
  min-height: 9rem;
}

.min-h-6 {
  min-height: 1.5rem;
}

.min-h-8 {
  min-height: 2rem;
}

.min-h-\[1\.25rem\] {
  min-height: 1.25rem;
}

.min-h-screen {
  min-height: 100vh;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-8 {
  width: 2rem;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-10 {
  min-width: 2.5rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-\[48\.75rem\] {
  max-width: 48.75rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.list-decimal {
  list-style-type: decimal;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-\[2px\] {
  gap: 2px;
}

.gap-\[3px\] {
  gap: 3px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-cream\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(247 241 227 / 0.1);
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.text-balance {
  text-wrap: balance;
}

.break-all {
  word-break: break-all;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-sm {
  border-radius: 0.125rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-\[4px\] {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-cream\/10 {
  border-color: rgb(247 241 227 / 0.1);
}

.border-cream\/20 {
  border-color: rgb(247 241 227 / 0.2);
}

.border-cream\/30 {
  border-color: rgb(247 241 227 / 0.3);
}

.border-forest\/15 {
  border-color: rgb(10 59 46 / 0.15);
}

.border-gold {
  --tw-border-opacity: 1;
  border-color: rgb(199 162 75 / var(--tw-border-opacity));
}

.border-gold\/30 {
  border-color: rgb(199 162 75 / 0.3);
}

.border-gold\/40 {
  border-color: rgb(199 162 75 / 0.4);
}

.border-gold\/70 {
  border-color: rgb(199 162 75 / 0.7);
}

.border-pine\/60 {
  border-color: rgb(15 106 77 / 0.6);
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity));
}

.border-red-400\/50 {
  border-color: rgb(248 113 113 / 0.5);
}

.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}

.border-spring {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
}

.border-spring\/40 {
  border-color: rgb(34 176 123 / 0.4);
}

.bg-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(247 241 227 / var(--tw-bg-opacity));
}

.bg-cream\/10 {
  background-color: rgb(247 241 227 / 0.1);
}

.bg-cream\/15 {
  background-color: rgb(247 241 227 / 0.15);
}

.bg-cream\/25 {
  background-color: rgb(247 241 227 / 0.25);
}

.bg-cream\/30 {
  background-color: rgb(247 241 227 / 0.3);
}

.bg-cream\/40 {
  background-color: rgb(247 241 227 / 0.4);
}

.bg-cream\/5 {
  background-color: rgb(247 241 227 / 0.05);
}

.bg-cream\/50 {
  background-color: rgb(247 241 227 / 0.5);
}

.bg-cream\/70 {
  background-color: rgb(247 241 227 / 0.7);
}

.bg-cream\/80 {
  background-color: rgb(247 241 227 / 0.8);
}

.bg-current {
  background-color: currentColor;
}

.bg-forest {
  --tw-bg-opacity: 1;
  background-color: rgb(10 59 46 / var(--tw-bg-opacity));
}

.bg-forest\/40 {
  background-color: rgb(10 59 46 / 0.4);
}

.bg-forest\/60 {
  background-color: rgb(10 59 46 / 0.6);
}

.bg-forest\/80 {
  background-color: rgb(10 59 46 / 0.8);
}

.bg-forest\/95 {
  background-color: rgb(10 59 46 / 0.95);
}

.bg-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(199 162 75 / var(--tw-bg-opacity));
}

.bg-gold\/10 {
  background-color: rgb(199 162 75 / 0.1);
}

.bg-mode-classic {
  --tw-bg-opacity: 1;
  background-color: rgb(168 132 47 / var(--tw-bg-opacity));
}

.bg-mode-classic\/15 {
  background-color: rgb(168 132 47 / 0.15);
}

.bg-mode-language {
  --tw-bg-opacity: 1;
  background-color: rgb(34 176 123 / var(--tw-bg-opacity));
}

.bg-mode-language\/15 {
  background-color: rgb(34 176 123 / 0.15);
}

.bg-mode-map {
  --tw-bg-opacity: 1;
  background-color: rgb(194 86 158 / var(--tw-bg-opacity));
}

.bg-mode-map\/15 {
  background-color: rgb(194 86 158 / 0.15);
}

.bg-mode-recall {
  --tw-bg-opacity: 1;
  background-color: rgb(57 135 229 / var(--tw-bg-opacity));
}

.bg-mode-recall\/15 {
  background-color: rgb(57 135 229 / 0.15);
}

.bg-mode-scale {
  --tw-bg-opacity: 1;
  background-color: rgb(224 122 63 / var(--tw-bg-opacity));
}

.bg-mode-scale\/15 {
  background-color: rgb(224 122 63 / 0.15);
}

.bg-pine {
  --tw-bg-opacity: 1;
  background-color: rgb(15 106 77 / var(--tw-bg-opacity));
}

.bg-red-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.bg-red-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-spring {
  --tw-bg-opacity: 1;
  background-color: rgb(34 176 123 / var(--tw-bg-opacity));
}

.bg-spring\/10 {
  background-color: rgb(34 176 123 / 0.1);
}

.bg-spring\/15 {
  background-color: rgb(34 176 123 / 0.15);
}

.bg-transparent {
  background-color: transparent;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-gold {
  --tw-gradient-from: #C7A24B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(199 162 75 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gold-light {
  --tw-gradient-from: #D6B463 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(214 180 99 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pine {
  --tw-gradient-from: #0F6A4D var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pine\/50 {
  --tw-gradient-from: rgb(15 106 77 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-pine\/90 {
  --tw-gradient-from: rgb(15 106 77 / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-spring {
  --tw-gradient-from: #22B07B var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 176 123 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-spring-light {
  --tw-gradient-from: #2CC88D var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(44 200 141 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-forest-raised {
  --tw-gradient-to: #255845 var(--tw-gradient-to-position);
}

.to-forest-raised\/90 {
  --tw-gradient-to: rgb(37 88 69 / 0.9) var(--tw-gradient-to-position);
}

.to-forest\/50 {
  --tw-gradient-to: rgb(10 59 46 / 0.5) var(--tw-gradient-to-position);
}

.to-gold {
  --tw-gradient-to: #C7A24B var(--tw-gradient-to-position);
}

.to-gold-dark {
  --tw-gradient-to: #A8842F var(--tw-gradient-to-position);
}

.to-pine {
  --tw-gradient-to: #0F6A4D var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-rose-400 {
  --tw-gradient-to: #fb7185 var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-\[env\(safe-area-inset-bottom\2c 0px\)\] {
  padding-bottom: env(safe-area-inset-bottom,0px);
}

.pl-5 {
  padding-left: 1.25rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none {
  line-height: 1;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-cream {
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

.text-cream\/40 {
  color: rgb(247 241 227 / 0.4);
}

.text-cream\/60 {
  color: rgb(247 241 227 / 0.6);
}

.text-cream\/70 {
  color: rgb(247 241 227 / 0.7);
}

.text-forest {
  --tw-text-opacity: 1;
  color: rgb(10 59 46 / var(--tw-text-opacity));
}

.text-gold-light {
  --tw-text-opacity: 1;
  color: rgb(214 180 99 / var(--tw-text-opacity));
}

.text-gold-light\/70 {
  color: rgb(214 180 99 / 0.7);
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity));
}

.text-spring-light {
  --tw-text-opacity: 1;
  color: rgb(44 200 141 / var(--tw-text-opacity));
}

.text-spring\/60 {
  color: rgb(34 176 123 / 0.6);
}

.text-transparent {
  color: transparent;
}

.underline {
  text-decoration-line: underline;
}

.accent-spring {
  accent-color: #22B07B;
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* Answer feedback. Right is solid spring with forest ink (4.5:1), wrong is solid red-600 with
 * cream (4.6:1); a gradient through the lighter stop of either drops the text below 4.5. */

@keyframes answer-correct {
  0% {
    background: linear-gradient(
      to bottom right,
      #F7F1E3,
      #EFE7D3
    );
    transform: scale(1);
  }

  30% {
    background: #22B07B;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgb(34 176 123 / 50%);
  }

  100% {
    background: #22B07B;
    transform: scale(1);
    box-shadow: 0 0 10px rgb(34 176 123 / 30%);
  }
}

/* A life going out: the dot flares red at nearly twice the size, then settles. The bar is
 * re-rendered rather than mutated, so there are no two states for a transition to move between —
 * the moment has to be animated on arrival. */

@keyframes life-lost {
  0% {
    transform: scale(1.7);
    box-shadow: 0 0 16px rgb(239 68 68 / 90%);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 6px rgb(239 68 68 / 45%);
  }
}

@keyframes answer-incorrect {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }

  20%,
  40%,
  60% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(0);
  }
}

.answer-grid > label.answer-correct {
  animation: answer-correct 0.4s ease-out forwards;
  color: #0A3B2E !important;
  border-color: #22B07B !important;
}

.answer-grid > label.answer-incorrect {
  animation: answer-incorrect 0.4s ease-out;
  background: #dc2626 !important;
  color: #F7F1E3 !important;
  border-color: #dc2626 !important;
}

/* The same two animations the answer boxes use, on the typed box. */

#typed-answer.answer-correct {
  animation: answer-correct 0.4s ease-out forwards;
  color: #0A3B2E !important;
  border-color: #22B07B !important;
}

#typed-answer.answer-incorrect {
  animation: answer-incorrect 0.4s ease-out;
  background: #dc2626 !important;
  color: #F7F1E3 !important;
  border-color: #dc2626 !important;
}

.answer-grid > label.answer-reveal-correct {
  background: #22B07B !important;
  color: #0A3B2E !important;
  border-color: #22B07B !important;
  transition: all 0.3s ease-out;
}

/* With motion turned down, the feedback still has to say which answer was right. The correct
 * state carries its green inside the keyframes, so switching the animation off without putting
 * the colour back would leave a correct answer looking untouched. */

@media (prefers-reduced-motion: reduce) {
  .answer-grid > label.answer-correct,
  #typed-answer.answer-correct {
    animation: none;
    background: #22B07B !important;
  }

  .answer-grid > label.answer-incorrect,
  #typed-answer.answer-incorrect {
    animation: none;
  }

  .life--lost {
    animation: none;
  }
}

/* Piano: a row of white keys, with the black ones laid over the gaps. piano.js sets each black
 * key's left edge in white-key widths (--at), so the layout stays right at any width and the
 * script never has to measure anything. A held key takes the spring green, lighter the softer
 * it was struck (--force, from 0 to 1). */

.piano-keys {
  --white: 16px;
  position: relative;
  display: flex;
  height: 120px;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
}

.piano-key {
  --force: 1;
  transition: background-color 60ms;
}

.piano-key--white {
  flex: 1 0 var(--white);
  border: 1px solid rgb(10 59 46 / 60%);
  border-radius: 0 0 6px 6px;
  background: #F7F1E3;
}

.piano-key--black {
  position: absolute;
  top: 0;
  left: calc(var(--at) * 100% / var(--whites) - var(--white) * 0.3);
  width: calc(var(--white) * 0.6);
  height: 62%;
  border-radius: 0 0 4px 4px;
  background: #0A3B2E;
  z-index: 1;
}

.piano-key--down {
  background: rgb(34 176 123 / calc(0.45 + 0.55 * var(--force)));
}

.piano-key--black.piano-key--down {
  background: rgb(44 200 141 / calc(0.55 + 0.45 * var(--force)));
}

/* Middle C, marked so there is somewhere to start counting from. */

.piano-key--c4::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(10 59 46 / 35%);
  transform: translateX(-50%);
}

.piano-key--white.piano-key--c4 {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .piano-key {
    transition: none;
  }
}

.placeholder\:text-cream\/40::-moz-placeholder {
  color: rgb(247 241 227 / 0.4);
}

.placeholder\:text-cream\/40::placeholder {
  color: rgb(247 241 227 / 0.4);
}

.focus-within\:border-spring:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-spring\/40:focus-within {
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

@media (hover: hover) and (pointer: fine) {
  .hover\:-translate-y-0:hover {
    --tw-translate-y: -0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .hover\:border-cream\/40:hover {
    border-color: rgb(247 241 227 / 0.4);
  }

  .hover\:border-gold:hover {
    --tw-border-opacity: 1;
    border-color: rgb(199 162 75 / var(--tw-border-opacity));
  }

  .hover\:border-spring:hover {
    --tw-border-opacity: 1;
    border-color: rgb(34 176 123 / var(--tw-border-opacity));
  }

  .hover\:border-spring\/60:hover {
    border-color: rgb(34 176 123 / 0.6);
  }

  .hover\:bg-cream\/10:hover {
    background-color: rgb(247 241 227 / 0.1);
  }

  .hover\:bg-cream\/5:hover {
    background-color: rgb(247 241 227 / 0.05);
  }

  .hover\:bg-gold\/10:hover {
    background-color: rgb(199 162 75 / 0.1);
  }

  .hover\:bg-pine:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(15 106 77 / var(--tw-bg-opacity));
  }

  .hover\:bg-pine\/60:hover {
    background-color: rgb(15 106 77 / 0.6);
  }

  .hover\:bg-red-500\/20:hover {
    background-color: rgb(239 68 68 / 0.2);
  }

  .hover\:from-gold-light:hover {
    --tw-gradient-from: #D6B463 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(214 180 99 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .hover\:to-gold:hover {
    --tw-gradient-to: #C7A24B var(--tw-gradient-to-position);
  }

  .hover\:text-cream:hover {
    --tw-text-opacity: 1;
    color: rgb(247 241 227 / var(--tw-text-opacity));
  }

  .hover\:text-gold-light:hover {
    --tw-text-opacity: 1;
    color: rgb(214 180 99 / var(--tw-text-opacity));
  }

  .hover\:text-green-200:hover {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity));
  }

  .hover\:text-red-300:hover {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity));
  }

  .hover\:text-spring-light:hover {
    --tw-text-opacity: 1;
    color: rgb(44 200 141 / var(--tw-text-opacity));
  }
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

@media (hover: hover) and (pointer: fine) {
  .group:hover .group-hover\:text-spring-light {
    --tw-text-opacity: 1;
    color: rgb(44 200 141 / var(--tw-text-opacity));
  }
}

.peer:checked ~ .peer-checked\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:text-cream {
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

.has-\[\:checked\]\:-translate-y-0\.5:has(:checked) {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.has-\[\:checked\]\:border-gold\/70:has(:checked) {
  border-color: rgb(199 162 75 / 0.7);
}

.has-\[\:checked\]\:border-spring:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(34 176 123 / var(--tw-border-opacity));
}

.has-\[\:checked\]\:bg-spring\/15:has(:checked) {
  background-color: rgb(34 176 123 / 0.15);
}

.has-\[\:checked\]\:from-spring\/25:has(:checked) {
  --tw-gradient-from: rgb(34 176 123 / 0.25) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 176 123 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.has-\[\:checked\]\:to-pine\/25:has(:checked) {
  --tw-gradient-to: rgb(15 106 77 / 0.25) var(--tw-gradient-to-position);
}

.has-\[\:checked\]\:text-cream:has(:checked) {
  --tw-text-opacity: 1;
  color: rgb(247 241 227 / var(--tw-text-opacity));
}

.has-\[\:checked\]\:shadow-spring\/20:has(:checked) {
  --tw-shadow-color: rgb(34 176 123 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.has-\[\:checked\]\:ring-2:has(:checked) {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.has-\[\:checked\]\:ring-spring\/40:has(:checked) {
  --tw-ring-color: rgb(34 176 123 / 0.4);
}

@media (min-width: 640px) {
  .sm\:sticky {
    position: sticky;
  }

  .sm\:inset-auto {
    inset: auto;
  }

  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .sm\:inset-y-2 {
    top: 0.5rem;
    bottom: 0.5rem;
  }

  .sm\:left-0 {
    left: 0px;
  }

  .sm\:top-6 {
    top: 1.5rem;
  }

  .sm\:-mx-6 {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .sm\:mb-1 {
    margin-bottom: 0.25rem;
  }

  .sm\:mb-1\.5 {
    margin-bottom: 0.375rem;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:size-10 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .sm\:size-12 {
    width: 3rem;
    height: 3rem;
  }

  .sm\:size-20 {
    width: 5rem;
    height: 5rem;
  }

  .sm\:size-4 {
    width: 1rem;
    height: 1rem;
  }

  .sm\:size-48 {
    width: 12rem;
    height: 12rem;
  }

  .sm\:h-\[34dvh\] {
    height: 34dvh;
  }

  .sm\:h-auto {
    height: auto;
  }

  .sm\:min-h-44 {
    min-height: 11rem;
  }

  .sm\:w-0 {
    width: 0px;
  }

  .sm\:w-0\.5 {
    width: 0.125rem;
  }

  .sm\:w-24 {
    width: 6rem;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:flex-none {
    flex: none;
  }

  .sm\:shrink-0 {
    flex-shrink: 0;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:gap-1 {
    gap: 0.25rem;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-x-3 {
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:border-cream\/10 {
    border-color: rgb(247 241 227 / 0.1);
  }

  .sm\:bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  }

  .sm\:from-pine\/90 {
    --tw-gradient-from: rgb(15 106 77 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(15 106 77 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .sm\:to-forest-raised\/90 {
    --tw-gradient-to: rgb(37 88 69 / 0.9) var(--tw-gradient-to-position);
  }

  .sm\:p-2 {
    padding: 0.5rem;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:pb-2 {
    padding-bottom: 0.5rem;
  }

  .sm\:pb-6 {
    padding-bottom: 1.5rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pr-6 {
    padding-right: 1.5rem;
  }

  .sm\:pt-8 {
    padding-top: 2rem;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}