/* Generated once with Tailwind v4 from the old Svelte styles (they used @apply) plus the utilities
   quizapp.js and audio.js use. The source is the style blocks of the old quizapp-frontend.svelte and
   quiz-audio.svelte; small changes can go straight here. */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-teal-200: oklch(91% 0.096 180.426);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-purple-50: oklch(97.7% 0.014 308.299);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-200: oklch(89.2% 0.058 10.001);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-900: oklch(41% 0.159 10.272);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .top-0 {
    top: 0px;
  }
  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .right-0 {
    right: 0px;
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }
  .left-1\/2 {
    left: calc(1 / 2 * 100%);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .m-auto {
    margin: auto;
  }
  .\!mt-0 {
    margin-top: 0px !important;
  }
  .mt-1 {
    margin-top: var(--spacing);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .h-3\/4 {
    height: calc(3 / 4 * 100%);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .min-w-0 {
    min-width: 0px;
  }
  .flex-1 {
    flex: 1;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .flex-col {
    flex-direction: column;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-bl-xl {
    border-bottom-left-radius: var(--radius-xl);
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-sky-800 {
    background-color: var(--color-sky-800);
  }
  .bg-sky-800\/70 {
    background-color: color-mix(in srgb, oklch(44.3% 0.11 240.79) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-800) 70%, transparent);
    }
  }
  .bg-slate-500 {
    background-color: var(--color-slate-500);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-teal-400 {
    color: var(--color-teal-400);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  @media (hover: hover) {
    .hover\:bg-sky-400:hover {
      background-color: var(--color-sky-400);
    }
    .hover\:bg-sky-500:hover {
      background-color: var(--color-sky-500);
    }
    .hover\:bg-white\/20:hover {
      background-color: color-mix(in srgb, #fff 20%, transparent);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }
  }
  @media (width >= 40rem) {
    .sm\:inline {
      display: inline;
    }
    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }
    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
}
html {
  background: #334;
  color: white;
  min-height: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
html, body {
  overflow-x: hidden;
}
@layer base {
  p {
    max-width: var(--container-2xl);
    &:hover {
      @media (hover: hover) {
        color: var(--color-yellow-300);
      }
    }
  }
}
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@layer base {
  .main-frame {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 5);
    width: 100%;
    max-width: var(--container-2xl);
    overflow: hidden;
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    transition: all 1s;
  }
  .time-strip {
    height: calc(var(--spacing) * 1.5);
    width: 100%;
    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-500) 60%, transparent);
    }
    transition: width 0.1s linear, background-color 0.6s;
  }
  .time-warn {
    background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
  }
  .time-danger {
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-500) 80%, transparent);
    }
  }
  .time-up {
    opacity: 0.5;
    pointer-events: none;
  }
  .ended-animation {
    animation: bounce-in 1s;
  }
  .testing-message-first {
    animation: bounce-in 1s 0.5s both;
  }
  .testing-message-second {
    animation: bounce-in 1s 1s both;
  }
  .picker {
    padding: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 44);
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 4);
    }
    @media (width >= 40rem) {
      padding-bottom: calc(var(--spacing) * 44);
    }
  }
  .picker-toolbar {
    margin-bottom: calc(var(--spacing) * 4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .tool-button {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    white-space: nowrap;
    color: var(--color-slate-200);
    transition: background 0.2s;
    &:hover {
      background-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
  }
  .tool-hot {
    background-color: color-mix(in srgb, oklch(75% 0.183 55.934) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-400) 30%, transparent);
    }
    color: var(--color-orange-100);
    &:hover {
      background-color: color-mix(in srgb, oklch(75% 0.183 55.934) 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-orange-400) 40%, transparent);
      }
    }
  }
  .quiz-grid {
    display: grid;
    gap: calc(var(--spacing) * 3);
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  }
  @media (max-width: 400px) {
    .quiz-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(var(--spacing) * 2);
    }
  }
  .quiz-card {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, oklch(27.9% 0.041 260.031) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-800) 60%, transparent);
    }
    text-align: left;
    aspect-ratio: 4 / 3;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s, transform 0.2s;
    &:hover {
      transform: translateY(-2px);
    }
    &:hover .quiz-card-image {
      transform: scale(1.06);
    }
  }
  .quiz-card-image {
    position: absolute;
    inset: 0px;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s, filter 0.3s;
    filter: saturate(0.75) brightness(0.75);
  }
  .quiz-card-shade {
    position: absolute;
    inset: 0px;
    background: linear-gradient(to top, rgba(10, 12, 24, 0.92) 0%, rgba(10, 12, 24, 0.45) 45%, rgba(10, 12, 24, 0.05) 100%);
  }
  .quiz-card-key {
    position: absolute;
    top: calc(var(--spacing) * 1.5);
    left: calc(var(--spacing) * 1.5);
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
    text-align: center;
    font-size: 11px;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-slate-300);
  }
  .quiz-card-text {
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: calc(var(--spacing) * 2);
  }
  .quiz-card-name {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--color-slate-100);
  }
  .quiz-card-count {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: 11px;
    color: var(--color-slate-400);
  }
  .card-selected {
    outline-color: #38bdf8;
    .quiz-card-image {
      filter: saturate(1) brightness(1);
    }
    .quiz-card-name {
      color: var(--color-sky-100);
    }
  }
  .picker-bar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 20;
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .picker-bar-inner {
    margin-inline: auto;
    display: flex;
    max-width: var(--container-2xl);
    align-items: stretch;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 3);
    background: rgba(24, 27, 46, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .picker-thumb {
    display: none;
    height: calc(var(--spacing) * 16);
    width: calc(var(--spacing) * 16);
    flex-shrink: 0;
    border-radius: var(--radius-xl);
    @media (width >= 40rem) {
      display: block;
    }
  }
  .picker-info {
    min-width: 0px;
    flex: 1;
    align-self: center;
  }
  .picker-name {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    color: var(--color-orange-200);
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .picker-description {
    margin-top: calc(var(--spacing) * 0.5);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .picker-chips {
    margin-top: calc(var(--spacing) * 1.5);
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 1.5);
  }
  .chip {
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: 11px;
    white-space: nowrap;
    color: var(--color-slate-300);
    @media (width >= 40rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .chip-hot {
    background-color: color-mix(in srgb, oklch(75% 0.183 55.934) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-400) 25%, transparent);
    }
    color: var(--color-orange-200);
  }
  .go-button {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 5);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-sky-100);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 7);
    }
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
    background: rgba(56, 189, 248, 0.18);
    transition: background 0.2s, transform 0.2s;
    &:hover:not(:disabled) {
      background: rgba(56, 189, 248, 0.35);
      transform: scale(1.03);
    }
    &:disabled {
      cursor: default;
      opacity: 50%;
    }
  }
  .ans-col-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .ans-col-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ans-col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ans-col-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ans-col-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ans-col-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .ans-col-7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    @media (width >= 48rem) {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }
  }
  .ans-col-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    @media (width >= 48rem) {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
  .question-screen {
    position: relative;
    padding-bottom: calc(var(--spacing) * 28);
  }
  .seed-tag {
    position: absolute;
    top: var(--spacing);
    right: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-600);
  }
  .question-title {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 3);
    text-align: center;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
    color: var(--color-slate-100);
  }
  .multi-hint {
    padding-bottom: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-purple-300) 80%, transparent);
    }
  }
  .question-image-frame {
    padding-inline: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 3);
    }
  }
  .question-image {
    margin-inline: auto;
    width: 100%;
    max-width: var(--container-xl);
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
    max-height: 34vh;
  }
  @media (min-width: 640px) {
    .question-image {
      max-height: 46vh;
    }
  }
  .question-audio {
    margin-inline: auto;
    max-width: var(--container-xl);
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
  }
  .answer-grid {
    display: grid;
    gap: calc(var(--spacing) * 2);
    padding: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 3);
    }
  }
  .answer-block {
    position: relative;
    display: flex;
    min-height: calc(var(--spacing) * 14);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-300);
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    &:hover {
      border-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-sky-300) 30%, transparent);
      }
      background-color: color-mix(in srgb, oklch(90.1% 0.058 230.902) 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-sky-200) 15%, transparent);
      }
    }
    &:active {
      transform: scale(0.98);
    }
  }
  .answer-text {
    text-align: center;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .answer-index {
    position: absolute;
    top: var(--spacing);
    left: calc(var(--spacing) * 1.5);
    font-size: 11px;
    color: var(--color-slate-500);
    -webkit-user-select: none;
    user-select: none;
  }
  .multi-select-mode .answer-block:hover {
    border-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-300) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(90.2% 0.063 306.703) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-200) 15%, transparent);
    }
  }
  .hint-panel {
    margin-inline: calc(var(--spacing) * 2);
    margin-top: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 40%, transparent);
    }
    background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-300) 5%, transparent);
    }
    padding: calc(var(--spacing) * 2);
    @media (width >= 40rem) {
      margin-inline: calc(var(--spacing) * 3);
    }
  }
  .hint-line {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-100) 90%, transparent);
    }
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .hint-level {
    height: calc(var(--spacing) * 5);
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-300) 25%, transparent);
    }
    text-align: center;
    font-size: 11px;
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
    color: var(--color-amber-100);
  }
  .hint-text {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .hint-controls {
    margin-top: var(--spacing);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
  }
  .hint-button {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-300) 15%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-amber-100);
    transition: background 0.2s;
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
      }
    }
    &:disabled {
      cursor: default;
      opacity: 40%;
    }
  }
  .hint-costly {
    background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
    }
    color: var(--color-rose-100);
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 30%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-rose-400) 30%, transparent);
      }
    }
  }
  .hint-armed {
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-500) 40%, transparent);
    }
    color: var(--color-rose-50);
    animation: bounce-in 0.4s;
  }
  .hint-pool {
    margin-left: auto;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }
  .hint-pool-empty {
    color: color-mix(in srgb, oklch(89.2% 0.058 10.001) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-rose-200) 70%, transparent);
    }
  }
  .hint-done {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-400);
  }
  .hint-penalty-note {
    margin-top: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, oklch(89.2% 0.058 10.001) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-rose-200) 80%, transparent);
    }
  }
  .review-hints {
    margin-top: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-300) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-300) 5%, transparent);
    }
    padding: calc(var(--spacing) * 2);
  }
  .review-hint-line {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 0.5);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-100) 80%, transparent);
    }
  }
  .numeric-answer {
    padding-inline: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 6);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .numeric-readout {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-sky-200);
    --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,);
    @media (width >= 40rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }
  .numeric-unset {
    color: var(--color-slate-600);
  }
  .numeric-unit {
    margin-left: var(--spacing);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    color: var(--color-slate-400);
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .numeric-slider {
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    &::-webkit-slider-runnable-track {
      height: calc(var(--spacing) * 2);
      border-radius: calc(infinity * 1px);
      background: rgba(255, 255, 255, 0.12);
    }
    &::-moz-range-track {
      height: calc(var(--spacing) * 2);
      border-radius: calc(infinity * 1px);
      background: rgba(255, 255, 255, 0.12);
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: calc(var(--spacing) * 7);
      width: calc(var(--spacing) * 7);
      border-radius: calc(infinity * 1px);
      background-color: var(--color-sky-300);
      margin-top: -0.625rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
      transition: transform 0.1s;
    }
    &::-moz-range-thumb {
      height: calc(var(--spacing) * 7);
      width: calc(var(--spacing) * 7);
      border-radius: calc(infinity * 1px);
      background-color: var(--color-sky-300);
      border: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
    &:active::-webkit-slider-thumb {
      transform: scale(1.15);
    }
    &:focus {
      outline: none;
    }
  }
  .numeric-bounds {
    margin-top: calc(var(--spacing) * 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
    --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,);
  }
  .numeric-hint {
    text-align: center;
    color: var(--color-slate-500);
  }
  .numeric-exact {
    margin-top: calc(var(--spacing) * 4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
    input {
      width: calc(var(--spacing) * 28);
      border-radius: var(--radius-lg);
      padding-inline: calc(var(--spacing) * 2);
      padding-block: var(--spacing);
      text-align: center;
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
      color: var(--color-sky-200);
      --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,);
      background: #1c1c24;
      border: 1px solid rgba(255, 255, 255, 0.1);
      &:focus {
        outline: none;
        border-color: rgba(90, 181, 206, 0.6);
      }
    }
  }
  .numeric-track {
    position: relative;
    margin-top: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 2);
    width: 100%;
    border-radius: calc(infinity * 1px);
    background: rgba(255, 255, 255, 0.08);
  }
  .numeric-band {
    position: absolute;
    inset-block: 0px;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent);
    }
    min-width: 2px;
  }
  .numeric-mark {
    position: absolute;
    width: var(--spacing);
    border-radius: calc(infinity * 1px);
    top: -0.25rem;
    bottom: -0.25rem;
    transform: translateX(-50%);
  }
  .mark-correct {
    background-color: var(--color-emerald-300);
  }
  .mark-user {
    background-color: var(--color-sky-200);
  }
  .numeric-track-bounds {
    margin-top: var(--spacing);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-slate-600);
    --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,);
  }
  .order-answer {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 5);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .order-edge {
    padding-block: var(--spacing);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .order-edges-row {
    display: flex;
    justify-content: space-between;
    padding-inline: var(--spacing);
    padding-bottom: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .order-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1.5);
  }
  .order-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .order-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    -webkit-user-select: none;
    user-select: none;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-200);
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
    transition: transform 0.17s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s, border-color 0.15s;
  }
  .order-row .order-item {
    width: auto;
    padding-block: calc(var(--spacing) * 1.5);
    touch-action: pan-y;
  }
  .order-untouched {
    --tw-border-style: dashed;
    border-style: dashed;
    color: var(--color-slate-400);
  }
  .order-dragged {
    position: relative;
    z-index: 20;
    cursor: grabbing;
    border-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-300) 50%, transparent);
    }
    background-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-300) 20%, transparent);
    }
    color: var(--color-sky-50);
    transition: background 0.15s, border-color 0.15s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    scale: 1.03;
  }
  .order-settling .order-item {
    transition: none;
  }
  .order-picked {
    border-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-300) 50%, transparent);
    }
    background-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-300) 15%, transparent);
    }
    color: var(--color-purple-50);
  }
  .order-handle {
    flex-shrink: 0;
    cursor: grab;
    padding-inline: var(--spacing);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    --tw-leading: 1;
    line-height: 1;
    color: var(--color-slate-500);
    touch-action: none;
  }
  .order-dragged .order-handle {
    cursor: grabbing;
    color: var(--color-sky-200);
  }
  .order-position {
    height: calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
    color: var(--color-slate-300);
    --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,);
  }
  .order-text {
    min-width: 0px;
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .order-list:not(.order-row) .order-text {
    flex: 1;
  }
  .order-hint {
    margin-top: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .order-review {
    margin-top: var(--spacing);
    display: grid;
    gap: var(--spacing);
  }
  .order-review-row {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
  }
  .order-row-hit {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
    }
    color: var(--color-emerald-200);
  }
  .order-row-key {
    color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-300) 90%, transparent);
    }
  }
  .order-review-mark {
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    text-align: center;
  }
  .order-review-should {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }
  .typed-answer {
    padding: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 5);
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 5);
    }
  }
  .typed-answer-label {
    margin-bottom: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-400);
  }
  .times-up {
    pointer-events: none;
    position: absolute;
    inset: 0px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 14, 28, 0.55);
  }
  .times-up-text {
    border-radius: var(--radius-2xl);
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
    color: var(--color-orange-300);
    @media (width >= 40rem) {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    background: rgba(0, 0, 0, 0.45);
    animation: bounce-in 0.6s both;
  }
  .quiz-nav {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 20;
    width: 100%;
    padding-inline: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }
  .quiz-nav-inner {
    margin-inline: auto;
    display: flex;
    max-width: var(--container-2xl);
    align-items: center;
    gap: calc(var(--spacing) * 3);
    border-radius: var(--radius-2xl);
    padding: calc(var(--spacing) * 2);
    background: rgba(24, 27, 46, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-button {
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--radius-xl);
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 2.5);
    white-space: nowrap;
    color: var(--color-slate-200);
    transition: background 0.2s, opacity 0.2s;
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
    &:disabled {
      cursor: default;
      opacity: 25%;
    }
  }
  .nav-next {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
    }
    color: var(--color-sky-100);
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 35%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-sky-400) 35%, transparent);
      }
    }
  }
  .nav-end {
    background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
    }
    color: var(--color-emerald-100);
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 35%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-emerald-400) 35%, transparent);
      }
    }
  }
  .nav-skip {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    color: var(--color-slate-400);
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
  }
  .nav-progress {
    min-width: 0px;
    flex: 1;
  }
  .nav-counter {
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-300);
  }
  .nav-segments {
    margin-top: var(--spacing);
    display: flex;
    gap: calc(var(--spacing) * 0.5);
  }
  .segment {
    height: var(--spacing);
    flex: 1;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    transition: background 0.3s;
  }
  .segment-done {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
    }
  }
  .segment-current {
    background-color: var(--color-slate-100);
  }
  .selected {
    background: #567a8a;
    * {
      color: var(--color-teal-200);
    }
    &:hover {
      background: #5c899c;
    }
  }
  .multi-select-mode {
    background-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
    .selected {
      background: #4d5484;
      * {
        color: var(--color-purple-100);
      }
      &:hover {
        background: #5e60a5;
      }
    }
  }
  .disabled {
    scale: 20;
    filter: hue-rotate(180deg);
    transition: all 1s;
    opacity: 0;
  }
  img {
    object-fit: cover;
  }
  .answer-with-audio {
    justify-content: flex-start;
    text-align: left;
    .answer-text {
      text-align: left;
    }
  }
  .user-input {
    width: 100%;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 3);
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
    background: #1c1c24;
    color: #5ab5ce;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s;
    &::placeholder {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
      color: var(--color-slate-600);
    }
    &:focus {
      outline: none;
      border-color: rgba(90, 181, 206, 0.6);
    }
  }
  .score-panel {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 5);
  }
  .score-percentage {
    text-align: center;
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
    --tw-leading: 1;
    line-height: 1;
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .score-bar {
    margin-inline: auto;
    margin-top: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 2);
    width: 100%;
    max-width: var(--container-md);
    overflow: hidden;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .score-bar-fill {
    height: 100%;
    border-radius: calc(infinity * 1px);
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .score-good {
    color: var(--color-emerald-300);
    &.score-bar-fill {
      background-color: var(--color-emerald-400);
    }
  }
  .score-mid {
    color: var(--color-amber-300);
    &.score-bar-fill {
      background-color: var(--color-amber-400);
    }
  }
  .score-bad {
    color: var(--color-rose-300);
    &.score-bar-fill {
      background-color: var(--color-rose-400);
    }
  }
  .score-counts {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-slate-300);
  }
  .ai-warning {
    margin-inline: calc(var(--spacing) * 2);
    margin-top: calc(var(--spacing) * 3);
    border-radius: 0.25rem;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
    }
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
    padding: calc(var(--spacing) * 2);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-200) 90%, transparent);
    }
  }
  .answer-review-section {
    padding-inline: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 20);
  }
  .review-filters {
    margin-bottom: calc(var(--spacing) * 3);
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
  }
  .review-filter {
    cursor: pointer;
    border-radius: calc(infinity * 1px);
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
    padding-inline: calc(var(--spacing) * 4);
    padding-block: calc(var(--spacing) * 1.5);
    color: var(--color-slate-300);
    transition: all 0.2s;
    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, #fff 15%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }
    &:disabled {
      cursor: default;
      opacity: 30%;
    }
  }
  .filter-active {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
    }
    color: var(--color-sky-100);
    &:hover {
      background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-sky-400) 40%, transparent);
      }
    }
  }
  .review-legend {
    margin-bottom: calc(var(--spacing) * 4);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .review-card {
    margin-bottom: calc(var(--spacing) * 3);
    border-radius: var(--radius-lg);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
    padding: calc(var(--spacing) * 3);
    border-left-width: 4px;
  }
  .review-correct {
    border-left-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-left-color: color-mix(in oklab, var(--color-emerald-400) 70%, transparent);
    }
    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 10%, transparent);
    }
  }
  .review-partial {
    border-left-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-left-color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
    background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-900) 10%, transparent);
    }
  }
  .review-wrong {
    border-left-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-left-color: color-mix(in oklab, var(--color-rose-400) 70%, transparent);
    }
    background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-900) 10%, transparent);
    }
  }
  .review-skipped {
    border-left-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-left-color: color-mix(in oklab, var(--color-slate-400) 50%, transparent);
    }
  }
  .review-head {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spacing) * 3);
  }
  .review-thumb {
    width: calc(var(--spacing) * 24);
    flex-shrink: 0;
    border-radius: 0.25rem;
    aspect-ratio: 16 / 9;
  }
  .review-meta {
    margin-bottom: var(--spacing);
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .review-points {
    margin-left: auto;
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    white-space: nowrap;
    color: var(--color-slate-400);
  }
  .review-question {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    color: var(--color-slate-100);
  }
  .review-options {
    margin-top: calc(var(--spacing) * 3);
    display: grid;
    gap: var(--spacing);
  }
  .review-option {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: var(--spacing);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-500);
  }
  .review-option-mark {
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    text-align: center;
  }
  .option-hit {
    background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
    }
    color: var(--color-emerald-200);
  }
  .option-miss {
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-500) 15%, transparent);
    }
    color: var(--color-rose-200);
    text-decoration-line: line-through;
    text-decoration-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
    }
  }
  .option-picked {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--color-slate-100);
  }
  .option-missed {
    color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-300) 90%, transparent);
    }
  }
  .review-label {
    margin-top: calc(var(--spacing) * 3);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: var(--color-slate-500);
  }
  .review-typed {
    margin-top: var(--spacing);
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-sky-200);
    white-space: pre-wrap;
  }
  .review-llm {
    margin-top: var(--spacing);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-purple-300) 80%, transparent);
    }
  }
  .review-correct-answer {
    margin-top: var(--spacing);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    color: var(--color-emerald-300);
  }
  .review-note {
    margin-top: calc(var(--spacing) * 2);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }
  .review-explanation {
    margin-top: calc(var(--spacing) * 3);
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
    border-color: color-mix(in srgb, oklch(71.4% 0.203 305.504) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-400) 40%, transparent);
    }
    background-color: color-mix(in srgb, #000 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 25%, transparent);
    }
    padding-inline: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: var(--color-slate-300);
  }
}
@keyframes fly-up {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
}
@keyframes fly-down {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
}
@keyframes fly-left {
  from {
    transform: translate(calc(-50% + 200px), 0);
    opacity: 0;
  }
}
.fly-up {
  animation: fly-up .25s ease-out;
}
.fly-down {
  animation: fly-down .2s ease-out;
}
.fly-left {
  animation: fly-left .4s ease-out;
}
.fly-up-slow {
  animation: fly-up-small .3s ease-out both;
}
@keyframes fly-up-small {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
}
.qa-player {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  background-color: color-mix(in srgb, #000 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
  }
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
}
.qa-play {
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
  }
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  transition: all 0.2s;
  &:hover {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 40%, transparent);
    }
  }
}
.qa-bar {
  position: relative;
  height: calc(var(--spacing) * 2);
  flex: 1;
  cursor: pointer;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
}
.qa-bar-fill {
  display: block;
  height: 100%;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-300) 80%, transparent);
  }
  transition: width 0.1s linear;
}
.qa-time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--color-slate-400);
  --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,);
}
.qa-replay {
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, #fff 5%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
  }
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  &:hover {
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
  }
}
.qa-active {
  background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-400) 50%, transparent);
  }
}
.qa-blocked {
  margin-top: var(--spacing);
  text-align: center;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
  }
}
.qa-mini {
  position: relative;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in srgb, #000 40%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
  }
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  transition: all 0.2s;
  &:hover {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
}
.qa-mini-bar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: var(--spacing);
  background-color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 80%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-sky-300) 80%, transparent);
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
    }
  }
}

/* The ranking of a quiz with `ranking: true` (written by hand, after the generated part): the line in
   the picker's bar, the box under the score and the ranking's own panel. */
.ranking-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-slate-400);
}
.ranking-note-test {
  color: var(--color-amber-200);
}
.ranking-note-error {
  color: var(--color-orange-300);
}
.ranking-link {
  cursor: pointer;
  color: var(--color-sky-300);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  &:hover {
    color: var(--color-sky-100);
  }
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}
.go-button.go-test {
  background: rgba(251, 191, 36, 0.2);
  color: var(--color-amber-100);
  &:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.35);
  }
}
.ranking-result {
  margin: 0.75rem auto 0;
  max-width: 32rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-slate-300);
}
.ranking-result-test {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-amber-100);
}
.ranking-result-title {
  font-size: 1.15rem;
  color: var(--color-amber-200);
}
.ranking-result-buttons {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.ranking-share {
  cursor: pointer;
  border-radius: var(--radius-xl);
  padding: 0.4rem 1rem;
  background: rgba(251, 191, 36, 0.25);
  color: var(--color-amber-100);
  transition: background 0.2s;
  &:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.4);
  }
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }
}
.ranking-shared {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-slate-300);
}
.reveal-box {
  margin: 0 auto 0.75rem;
  max-width: 40rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-slate-300);
}
.reveal-warning {
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.4);
  color: var(--color-orange-100);
}
.reveal-title {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
  color: var(--color-orange-200);
}
.reveal-confirm {
  background: rgba(251, 146, 60, 0.3);
  color: var(--color-orange-50);
  &:hover:not(:disabled) {
    background: rgba(251, 146, 60, 0.45);
  }
}
.ranking-panel {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  z-index: 30;
  width: min(100%, 32rem);
  max-height: 85vh;
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 1rem;
  border-radius: var(--radius-xl);
  background: rgba(24, 27, 46, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.ranking-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--color-slate-400);
  &:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-slate-200);
  }
}
.ranking-title {
  padding-right: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: var(--color-amber-200);
}
.ranking-empty {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--color-slate-400);
}
.ranking-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ranking-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.03);
}
.ranking-mine {
  background: rgba(56, 189, 248, 0.15);
}
.ranking-place {
  width: 1.75rem;
  flex-shrink: 0;
  text-align: right;
  color: var(--color-slate-400);
  font-variant-numeric: tabular-nums;
}
.ranking-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ranking-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-slate-100);
}
.ranking-comment {
  font-size: 0.75rem;
  color: var(--color-slate-400);
  overflow-wrap: anywhere;
}
.ranking-comment-line {
  margin-top: 0.4rem;
  color: var(--color-slate-300);
  overflow-wrap: anywhere;
}
.ranking-comment-hidden,
.ranking-comment-error {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-orange-300);
}
.ranking-comment-form {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  .ranking-comment-error {
    flex-basis: 100%;
  }
}
.ranking-comment-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  color: var(--color-slate-100);
}
.ranking-detail {
  font-size: 0.75rem;
  color: var(--color-slate-400);
  white-space: nowrap;
}
.ranking-score {
  width: 3rem;
  text-align: right;
  color: var(--color-emerald-300);
  font-variant-numeric: tabular-nums;
}
.ranking-me {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-slate-300);
}
.ranking-all {
  display: block;
  margin-top: 0.75rem;
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-sky-300);
  &:hover {
    color: var(--color-sky-100);
  }
}