@layer base {
  body {
    font-family: var(--cx-font-family);
    background:
      radial-gradient(circle at top left, rgba(212, 175, 55, .18), transparent 30rem),
      radial-gradient(circle at top right, rgba(48, 125, 126, .24), transparent 28rem),
      var(--cx-bg);
    color: var(--cx-text);
    line-height: 1.55;
  }

  :focus-visible {
    outline: 3px solid rgba(212, 175, 55, .7);
    outline-offset: 3px;
  }

  .cx-noscript,
  .cx-boot-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--cx-space-6);
  }

  .cx-boot-card {
    width: min(420px, 100%);
    padding: var(--cx-space-8);
    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-xl);
    background: rgba(255,255,255,.86);
    box-shadow: var(--cx-shadow-card);
    text-align: center;
    backdrop-filter: blur(16px);
  }

  .cx-loader {
    inline-size: 3rem;
    block-size: 3rem;
    margin: 0 auto var(--cx-space-4);
    border: 4px solid var(--cx-brand-soft);
    border-block-start-color: var(--cx-brand-strong);
    border-radius: 999px;
    animation: cx-spin 850ms linear infinite;
  }

  @keyframes cx-spin { to { transform: rotate(360deg); } }
}