html,
    body {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #F2F4F8;
      color: #252833;
    }

    html[data-theme="dark"],
    html[data-theme="dark"] body {
      background: #0B0E13;
      color: #E8EAF0;
    }

    body {
      display: flex;
      flex-direction: column;
    }

    #root {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      background: inherit;
      color: inherit;
    }

@layer {
  [data-react-aria-pressable] {
    touch-action: pan-x pan-y pinch-zoom;
  }
}

/* Visible before application JavaScript; neutral until the site is verified. */
[data-web-bootstrap] {
  margin: auto;
  padding: var(--spacing-6, 1.5rem);
  font-family: system-ui, sans-serif;
  line-height: var(--line-height-relaxed, 1.6);
}

/* The pre-JS and React states share geometry and semantic colors. */
.web-loading[data-web-bootstrap] {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, currentColor);
  background: var(--bg-app, inherit);
}
.web-loading-layout { display: flex; flex: 1; min-width: 0; }
.web-loading-block {
  display: block;
  width: 100%;
  height: 0.875rem;
  border-radius: var(--radius-sm, 0.25rem);
  background: color-mix(in srgb, currentColor 10%, transparent);
  animation: web-loading-breathe 1.8s ease-in-out infinite;
}
.web-loading-heading { width: 55%; height: 1.75rem; }
.web-loading-subtitle { width: 75%; }
.web-loading-short { width: 40%; }
.web-loading-control { height: 2.75rem; }
.web-loading-stack { display: grid; gap: var(--spacing-4, 1rem); margin-top: var(--spacing-6, 1.5rem); width: 100%; }
.web-loading-access { box-sizing: border-box; width: min(100%, 30rem); padding: var(--spacing-8, 2rem); margin: auto; }
.web-loading-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4, 1rem); }
.web-loading-sidebar { box-sizing: border-box; width: 16rem; flex-shrink: 0; padding: var(--spacing-6, 1.5rem); background: var(--bg-secondary, color-mix(in srgb, currentColor 3%, transparent)); }
.web-loading-sidebar > .web-loading-control { margin-top: var(--spacing-8, 2rem); }
.web-loading-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.web-loading-toolbar { padding: var(--spacing-6, 1.5rem); }
.web-loading-main .web-loading-body { box-sizing: border-box; width: min(100%, 48rem); padding: var(--spacing-8, 2rem); margin: auto; align-items: center; }
.web-loading-composer { box-sizing: border-box; width: 100%; margin-top: var(--spacing-8, 2rem); min-height: 8rem; padding: var(--spacing-6, 1.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-6, 1.5rem); background: var(--bg-secondary, color-mix(in srgb, currentColor 3%, transparent)); border-radius: var(--radius-lg, 0.75rem); }
.web-loading-status { position: absolute; bottom: var(--spacing-6, 1.5rem); inset-inline: 0; padding-inline: var(--spacing-6, 1.5rem); text-align: center; font-size: var(--font-size-sm, 0.875rem); }
.web-loading-status p { margin: 0; }
.web-loading-status a { display: inline-block; margin-top: var(--spacing-2, 0.5rem); color: var(--text-link, inherit); text-decoration: underline; }
.web-loading-status a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@keyframes web-loading-breathe { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .web-loading-block { animation: none; } }
@media (max-width: 640px) {
  .web-loading-sidebar { display: none; }
  .web-loading-main .web-loading-body { padding: var(--spacing-6, 1.5rem); }
}
@media (max-height: 480px) {
  .web-loading-access { padding-block: var(--spacing-4, 1rem); }
  .web-loading-access .web-loading-stack { gap: var(--spacing-2, 0.5rem); margin-top: 0; }
  .web-loading-status { position: static; align-self: center; padding: var(--spacing-4, 1rem); }
}

.web-loading-static-recovery { visibility: hidden; animation: web-loading-recovery 0s 15s forwards; }
@keyframes web-loading-recovery { to { visibility: visible; } }