:root {
      --bg: #FBF7F1;
      --bg2: #F3E9DA;
      --p: #FBF7F1;
      --p2: #F3E9DA;
      --sk: rgba(15, 27, 46, .14);
      --sk2: rgba(42, 47, 54, .11);
      --mu: #4D6E91;
      --so: #2A2F36;
      --tx: #2A2F36;
      --st: #0F1B2E;
      --bl: #0F1B2E;
      --cy: #4D6E91;
      --gn: #4D6E91;
      --am: #24B47E;
      --rd: #8B3A1F;
      --vi: #B8693E;
      --pk: #188D68;
      --tl: #4A6B3A;
      --r: 16px;
      --r2: 12px;
      --r3: 8px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--tx);
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: 14px;
    }

    html.docai-preinit body {
      opacity: 0;
    }

    html:not(.docai-preinit) body {
      opacity: 1;
      transition: opacity .12s ease;
    }

    .app {
      min-height: 100vh;
      overflow-x: hidden;
      background:
        linear-gradient(180deg, #FBF7F1 0%, #F3E9DA 54%, #FBF7F1 100%);
    }

    .app::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: linear-gradient(rgba(15, 27, 46, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 27, 46, .035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 80%);
      opacity: .18;
    }