/*
 * Legacy Android WebView fallback.
 *
 * Tailwind v4 uses @layer and modern colour functions. WebViews old enough to
 * ignore @layer render the site as unstyled HTML. These deliberately plain
 * rules cover the shared layout primitives and are harmless when Tailwind is
 * available because they use the same values.
 */
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #1c1917; font-family: Arial, "Microsoft YaHei", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }

[class~="flex"] { display: -webkit-flex; display: flex; }
[class~="grid"] { display: grid; }
[class~="hidden"] { display: none; }
[class~="block"] { display: block; }
[class~="inline-block"] { display: inline-block; }
[class~="flex-col"] { -webkit-flex-direction: column; flex-direction: column; }
[class~="flex-wrap"] { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
[class~="items-center"] { -webkit-align-items: center; align-items: center; }
[class~="items-start"] { -webkit-align-items: flex-start; align-items: flex-start; }
[class~="items-baseline"] { -webkit-align-items: baseline; align-items: baseline; }
[class~="justify-between"] { -webkit-justify-content: space-between; justify-content: space-between; }
[class~="justify-center"] { -webkit-justify-content: center; justify-content: center; }
[class~="shrink-0"] { -webkit-flex-shrink: 0; flex-shrink: 0; }
[class~="flex-1"] { -webkit-flex: 1; flex: 1; }
[class~="mx-auto"] { margin-left: auto; margin-right: auto; }
[class~="ml-auto"] { margin-left: auto; }
[class~="w-full"] { width: 100%; }
[class~="max-w-full"] { max-width: 100%; }
[class~="max-w-[640px]"] { max-width: 640px; }
[class~="max-w-[1180px]"] { max-width: 1180px; }
[class~="max-w-[1600px]"] { max-width: 1600px; }
[class~="min-w-0"] { min-width: 0; }

[class~="grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[class~="gap-1"] { gap: .25rem; }
[class~="gap-2"] { gap: .5rem; }
[class~="gap-3"] { gap: .75rem; }
[class~="gap-4"] { gap: 1rem; }
[class~="gap-5"] { gap: 1.25rem; }
[class~="gap-x-4"] { column-gap: 1rem; }
[class~="gap-x-6"] { column-gap: 1.5rem; }
[class~="gap-y-2"] { row-gap: .5rem; }
[class~="space-y-3"] > :not(:last-child) { margin-bottom: .75rem; }
[class~="space-y-4"] > :not(:last-child) { margin-bottom: 1rem; }

[class~="p-2"] { padding: .5rem; }
[class~="p-3"] { padding: .75rem; }
[class~="p-4"] { padding: 1rem; }
[class~="px-2"] { padding-left: .5rem; padding-right: .5rem; }
[class~="px-3"] { padding-left: .75rem; padding-right: .75rem; }
[class~="px-4"] { padding-left: 1rem; padding-right: 1rem; }
[class~="px-5"] { padding-left: 1.25rem; padding-right: 1.25rem; }
[class~="px-8"] { padding-left: 2rem; padding-right: 2rem; }
[class~="py-0.5"] { padding-top: .125rem; padding-bottom: .125rem; }
[class~="py-1"] { padding-top: .25rem; padding-bottom: .25rem; }
[class~="py-1.5"] { padding-top: .375rem; padding-bottom: .375rem; }
[class~="py-2"] { padding-top: .5rem; padding-bottom: .5rem; }
[class~="py-2.5"] { padding-top: .625rem; padding-bottom: .625rem; }
[class~="py-3"] { padding-top: .75rem; padding-bottom: .75rem; }
[class~="py-8"] { padding-top: 2rem; padding-bottom: 2rem; }
[class~="py-10"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
[class~="mt-1"] { margin-top: .25rem; }
[class~="mt-2"] { margin-top: .5rem; }
[class~="mt-3"] { margin-top: .75rem; }
[class~="mt-4"] { margin-top: 1rem; }
[class~="mt-6"] { margin-top: 1.5rem; }
[class~="mt-8"] { margin-top: 2rem; }
[class~="mt-10"] { margin-top: 2.5rem; }
[class~="mb-5"] { margin-bottom: 1.25rem; }
[class~="mb-6"] { margin-bottom: 1.5rem; }

[class~="text-xs"] { font-size: .75rem; }
[class~="text-sm"] { font-size: .875rem; }
[class~="text-lg"] { font-size: 1.125rem; }
[class~="text-xl"] { font-size: 1.25rem; }
[class~="text-2xl"] { font-size: 1.5rem; }
[class~="text-3xl"] { font-size: 1.875rem; }
[class~="font-medium"] { font-weight: 500; }
[class~="font-semibold"] { font-weight: 600; }
[class~="text-center"] { text-align: center; }
[class~="text-stone-400"] { color: #a8a29e; }
[class~="text-stone-500"] { color: #78716c; }
[class~="text-stone-600"] { color: #57534e; }
[class~="text-stone-800"] { color: #292524; }
[class~="text-stone-900"] { color: #1c1917; }
[class~="text-white"] { color: #fff; }
[class~="bg-white"] { background: #fff; }
[class~="bg-stone-100"] { background: #f5f5f4; }
[class~="bg-stone-200"] { background: #e7e5e4; }
[class~="bg-stone-500"] { background: #78716c; }
[class~="bg-stone-800"] { background: #292524; }
[class~="border"] { border: 1px solid #d6d3d1; }
[class~="border-b"] { border-bottom: 1px solid #e7e5e4; }
[class~="border-stone-200"] { border-color: #e7e5e4; }
[class~="border-stone-300"] { border-color: #d6d3d1; }
[class~="rounded"] { border-radius: .25rem; }
[class~="rounded-md"] { border-radius: .375rem; }
[class~="rounded-lg"] { border-radius: .5rem; }
[class~="rounded-full"] { border-radius: 999px; }
[class~="overflow-hidden"] { overflow: hidden; }
[class~="truncate"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 640px) {
  [class~="sm:px-8"] { padding-left: 2rem; padding-right: 2rem; }
  [class~="sm:py-8"] { padding-top: 2rem; padding-bottom: 2rem; }
  [class~="sm:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 700px) and (max-height: 700px) and (orientation: landscape) {
  .practice-player { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: center; justify-content: center; gap: 1.25rem; }
  .practice-board { width: 60vw; max-width: 640px; margin-left: 0; margin-right: 0; }
  .practice-sidebar { width: 34vw; max-width: 20rem; }
}

/* This stylesheet loads after Tailwind, so it must also restore the normal
   desktop two-column layout rather than letting its plain `.flex-col` rule
   win the cascade. */
@media (min-width: 1024px) {
  .practice-player { -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: center; justify-content: center; gap: 2rem; }
  .practice-board { margin-left: 0; margin-right: 0; }
  .practice-sidebar { width: 20rem; }
}