html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: #f4f4f6;
      overflow-x: hidden;
    }

    .ambient-bg {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(42rem 28rem at 8% 12%, color-mix(in srgb, var(--accent-1) 25%, transparent), transparent 72%),
        radial-gradient(36rem 24rem at 92% 18%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 74%),
        radial-gradient(44rem 30rem at 30% 100%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 78%),
        linear-gradient(180deg, #fbfbfc 0%, #f4f4f6 45%, #eeeeef 100%);
    }

    .ambient-bg::before,
    .ambient-bg::after {
      content: "";
      position: absolute;
      inset: auto;
      width: 120vw;
      height: 42vh;
      left: -10vw;
      border-radius: 999px;
      filter: blur(42px);
      opacity: 0.38;
      transform: rotate(-8deg);
      background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-4), var(--accent-3));
    }

    .ambient-bg::before {
      top: 18vh;
    }

    .ambient-bg::after {
      top: 58vh;
      transform: rotate(7deg);
      opacity: 0.26;
    }

    .frost-layer {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.16);
    }

    .glass-surface {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(20px) saturate(130%);
      -webkit-backdrop-filter: blur(20px) saturate(130%);
    }

    .public-shell {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    .public-header {
      position: fixed;
      top: 1.25rem;
      left: 0;
      right: 0;
      z-index: 70;
    }

    .brand-badge {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.95rem;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(120deg, var(--accent-1), var(--accent-2));
      color: #fff;
      font-size: 0.75rem;
      font-weight: 800;
      box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-1) 28%, transparent);
    }

    .header-chip {
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.65);
      background: rgba(255, 255, 255, 0.38);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 24px rgba(17, 24, 39, 0.08);
      padding: .55rem 1rem;
      font-size: .8rem;
      font-weight: 800;
      color: #334155;
      transition: all .2s ease;
    }

    .header-chip:hover {
      color: #111827;
      background: rgba(255,255,255,.58);
    }

    .public-ribbon {
      position: fixed;
      top: 5.85rem;
      left: 0;
      right: 0;
      z-index: 65;
    }

    .public-nav {
      display: flex;
      gap: 0.4rem;
      padding: 0.45rem;
      border-radius: 999px;
      overflow-x: auto;
      position: relative;
    }

    .public-nav a {
      flex: 1;
      text-align: center;
      font-size: .86rem;
      font-weight: 800;
      color: #52525b;
      border-radius: 999px;
      padding: 0.65rem 0.85rem;
      transition: color 0.25s ease;
      white-space: nowrap;
      position: relative;
      z-index: 1;
    }

    .public-nav a:hover {
      color: #111827;
    }

    .public-nav.has-lens a {
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .public-nav a.is-active {
      color: #0f172a;
      background: rgba(255,255,255,.62);
      box-shadow: inset 0 2px 7px rgba(15, 23, 42, 0.12);
    }

    .public-nav.has-lens a.is-active {
      background: transparent;
      box-shadow: none;
    }

    .public-nav-lens {
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 0;
      border-radius: 999px;
      pointer-events: none;
      opacity: 0;
      z-index: 0;
      background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.55) 58%, rgba(255, 255, 255, 0.35));
      border: 1px solid rgba(255, 255, 255, 0.98);
      box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.96),
        inset 0 -10px 18px rgba(255, 255, 255, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.38),
        0 9px 20px rgba(15, 23, 42, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(14px) saturate(165%);
      -webkit-backdrop-filter: blur(14px) saturate(165%);
      transform: translate3d(0, 0, 0);
      transition:
        transform 330ms cubic-bezier(0.2, 0.9, 0.25, 1),
        width 330ms cubic-bezier(0.2, 0.9, 0.25, 1),
        height 330ms cubic-bezier(0.2, 0.9, 0.25, 1),
        opacity 180ms ease,
        box-shadow 250ms ease;
      will-change: transform, width, height;
    }

    .public-nav-lens::before {
      content: "";
      position: absolute;
      left: 14%;
      right: 14%;
      top: 2px;
      height: 42%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.02));
      opacity: 0.88;
    }

    @media (prefers-reduced-motion: reduce) {
      .public-nav-lens {
        transition: none;
      }
    }

    .public-main {
      position: relative;
      z-index: 1;
      padding-top: 10.6rem;
      padding-bottom: 2.2rem;
      min-height: calc(100vh - 14rem);
    }

    .public-footer {
      margin-bottom: 1rem;
      border-radius: 1.6rem;
      padding: 1rem;
    }

    .public-card,
    main .rounded-2xl.border,
    main .rounded-3xl.border,
    main .rounded-2xl[class*="bg-white"],
    main .rounded-3xl[class*="bg-white"] {
      background: linear-gradient(165deg, rgba(255,255,255,.58), rgba(255,255,255,.26)) !important;
      border: 1px solid rgba(255,255,255,.62) !important;
      box-shadow: 0 16px 40px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.72) !important;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    main input,
    main select,
    main textarea {
      width: 100%;
      padding: .85rem 1rem;
      border-radius: .95rem;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(255, 255, 255, 0.76);
      color: #0f172a;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 18px rgba(15, 23, 42, 0.06);
      transition: all 0.2s ease;
      outline: none;
    }

    main input:focus,
    main select:focus,
    main textarea:focus {
      border-color: color-mix(in srgb, var(--accent-1) 40%, white);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-1) 16%, transparent), 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    main a.rounded-xl.bg-slate-900,
    main button.rounded-xl.bg-slate-900,
    .public-primary-btn {
      background: linear-gradient(120deg, var(--accent-1), color-mix(in srgb, var(--accent-2) 70%, var(--accent-1))) !important;
      color: #fff !important;
      border: 1px solid rgba(255,255,255,.45);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 34px color-mix(in srgb, var(--accent-1) 24%, transparent);
    }

    @media (max-width: 1023px) {
      .public-header {
        top: .7rem;
      }

      .public-ribbon {
        top: 4.85rem;
      }

      .public-shell {
        padding: 0 .75rem;
      }

      .public-main {
        padding-top: 9.4rem;
      }
    }