/* Readable, actionable content when an older browser cannot use the modern
   Tailwind colour pipeline. This does not change native application support. */
@supports not (color: oklch(0% 0 0)) {
  html { scroll-behavior: auto; }
  body { margin: 0; background: #0a0a0c; color: #f5f5f5; font-family: system-ui, sans-serif; line-height: 1.6; }
  nav, main, section, footer { position: static !important; max-width: 72rem; margin: 0 auto; padding: 1rem; }
  a { color: #67e8f9; text-decoration: underline; }
  a, button { overflow-wrap: anywhere; }
  button { cursor: pointer; color: #f5f5f5; background: #18333b; border: 1px solid #67e8f9; padding: .6rem 1rem; border-radius: .5rem; }
  img, canvas { max-width: 100%; height: auto; }
  h1, h2, h3, p { color: inherit; }
  .text-transparent { color: #67e8f9; }
  .opacity-0 { opacity: 1; }
  .pointer-events-none { pointer-events: none; }
  .hidden { display: none; }
  .fixed { position: static; }
  .absolute { position: relative; }
  .relative { position: relative; }
  .grid, .flex { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
  .flex-col { flex-direction: column; }
  .overflow-hidden, .overflow-x-hidden { overflow: visible; }
  header > canvas, #root > div > canvas { display: none; }
}