@import "/lib/pico-2.1.1/pico.min.css" layer(pico);
@layer pico, planalyzer;
@layer onesound {
  :root {
    --color-page-background: rgba(255, 255, 255, 0.15);
    --color-text: rgb(0, 0,, 0, 0.15);
    --pico-form-element-placeholder-color: green;
  }
  body {
    font-size: clamp(14px, 1rem + 1vw, 24px);
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    text-align: center;
  }
  body header {
    position: relative;
    flex: 0 0 auto;
  }
  body main {
    font-size: smaller;
    flex: 1 1 0;
    min-height: 0;
    padding-block: initial;
    position: relative;
  }
  #error {
    display: block;
    border: 1px solid red;
    border-radius: 5px;
    color: orange;
    font-size: smaller;
    font-family: monospace;
    max-height: 20vh;
    overflow: auto;
    margin: 1rem;
    padding: 1rem;
  }
  #error pre {
    color: inherit;
    font-weight: inherit;
    font-family: inherit;
  }
  #error:empty {
    display: none;
  }
  #error:empty + #close-error {
    display: none;
  }
  #error + #close-error {
    position: absolute;
    top: 2rem;
    right: 3rem;
    display: block;
    width: 1rem;
    height: 1rem;
    border: none;
    background-image: var(--pico-icon-close);
    background-position: center;
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.5;
    transition: opacity var(--pico-transition);
  }
  .busy {
    position: relative;
    cursor: wait !important;
  }
  .busy * {
    cursor: wait !important;
  }
  .busy::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
  }
  .busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem; /* half size to center */
    border: 0.3rem solid #ddd;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 11;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
  #continue {
    display: none;
  }
  .reveal button.choice {
    border: 2px solid red;
    position: relative;
  }
  .reveal button.choice:after {
    content: "X";
    color: red;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
  }
  .reveal button.choice.expected {
    border: 2px solid lightgreen;
  }
  .reveal button.choice.expected:after {
    content: "V";
    color: lightgreen;
  }
  .reveal #continue {
    display: inline-block;
  }
  #choices ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    gap: 1em;
    padding-inline-start: 0;
  }
  #choices ul li {
    list-style-type: none;
    flex: 0 1 auto;
  }
  #stats {
    text-align: left;
  }
  #translation {
    margin-top: 1.5em;
  }
  #footer {
    position: sticky;
    bottom: 1em;
    text-align: center;
  }
  /* Phones */
  @media (max-width: 600px) {
    #choices ul {
      gap: 0.25rem;
    }
    #choices ul button.choice h2 {
      font-size: 1.2rem;
    }
  }
}

/*# sourceMappingURL=main.css.map */