.tab-panel {
      display: none;
    }

    .tab-panel.is-active {
      display: block;
      will-change: transform;
    }

    :root {
      --cp-sky-1: #d7e5ef;
      --cp-sky-2: #bfd2df;
      --cp-sky-3: #a7bfce;
      --cp-cloud-1-size-x: 95rem;
      --cp-cloud-1-size-y: 42rem;
      --cp-cloud-1-pos-x: -12%;
      --cp-cloud-1-pos-y: -8%;
      --cp-cloud-1-opacity: 0.84;
      --cp-cloud-2-size-x: 72rem;
      --cp-cloud-2-size-y: 34rem;
      --cp-cloud-2-pos-x: 30%;
      --cp-cloud-2-pos-y: 2%;
      --cp-cloud-2-opacity: 0.74;
      --cp-cloud-3-size-x: 94rem;
      --cp-cloud-3-size-y: 40rem;
      --cp-cloud-3-pos-x: 110%;
      --cp-cloud-3-pos-y: -6%;
      --cp-cloud-3-opacity: 0.8;
      --cp-cloud-4-size-x: 65rem;
      --cp-cloud-4-size-y: 30rem;
      --cp-cloud-4-pos-x: 70%;
      --cp-cloud-4-pos-y: 40%;
      --cp-cloud-4-opacity: 0.36;
      --cp-noise-opacity: 0.72;
      --cp-noise-size-0: 420px 420px;
      --cp-noise-size-1: 5px 5px;
      --cp-noise-size-2: 5px 5px;
      --cp-noise-size-3: 4.2px 4.2px;
      --cp-noise-filter: contrast(190%) brightness(1120%) saturate(138%);
      --cp-noise-blend: overlay;
      --cp-noise-gradient-angle: 0deg;
      --cp-noise-gradient-start: rgba(70, 136, 235, 0.66);
      --cp-noise-gradient-end: rgba(0, 0, 0, 0);
      --cp-line-angle-a: 20deg;
      --cp-line-angle-b: 110deg;
      --cp-line-dark-a: rgba(13, 53, 95, 0.22);
      --cp-line-light-a: rgba(235, 247, 255, 0.12);
      --cp-line-dark-b: rgba(13, 53, 95, 0.18);
      --cp-line-light-b: rgba(235, 247, 255, 0.08);
      --cp-dot-origin-x: 0;
      --cp-dot-origin-y: 0;
      --cp-dot-color: rgba(255, 255, 255, 0.24);
      --cp-dot-size-a: 1.4px;
      --cp-dot-size-b: 4.2px;
      --cp-speckle-color: rgba(6, 26, 48, 0.34);
      --cp-speckle-size-a: 0.9px;
      --cp-speckle-size-b: 1.8px;
      --cp-speckle-grid: 1.6px 1.6px;
    }

    .cloud-pattern-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-color: var(--cp-sky-1);
      background-image:
        radial-gradient(var(--cp-cloud-1-size-x) var(--cp-cloud-1-size-y) at var(--cp-cloud-1-pos-x) var(--cp-cloud-1-pos-y), rgb(255 255 255 / var(--cp-cloud-1-opacity)) 0 36%, transparent 37%),
        radial-gradient(var(--cp-cloud-2-size-x) var(--cp-cloud-2-size-y) at var(--cp-cloud-2-pos-x) var(--cp-cloud-2-pos-y), rgb(255 255 255 / var(--cp-cloud-2-opacity)) 0 34%, transparent 35%),
        radial-gradient(var(--cp-cloud-3-size-x) var(--cp-cloud-3-size-y) at var(--cp-cloud-3-pos-x) var(--cp-cloud-3-pos-y), rgb(255 255 255 / var(--cp-cloud-3-opacity)) 0 35%, transparent 36%),
        radial-gradient(var(--cp-cloud-4-size-x) var(--cp-cloud-4-size-y) at var(--cp-cloud-4-pos-x) var(--cp-cloud-4-pos-y), rgb(255 255 255 / var(--cp-cloud-4-opacity)) 0 30%, transparent 31%),
        linear-gradient(180deg, var(--cp-sky-1) 0%, var(--cp-sky-2) 58%, var(--cp-sky-3) 100%);
    }

    .pixel-fuzz-overlay {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: var(--cp-noise-opacity);
      background-image:
        linear-gradient(var(--cp-noise-gradient-angle), var(--cp-noise-gradient-start), var(--cp-noise-gradient-end)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
        repeating-linear-gradient(var(--cp-line-angle-a), var(--cp-line-dark-a) 0 1px, var(--cp-line-light-a) 1px 2px),
        repeating-linear-gradient(var(--cp-line-angle-b), var(--cp-line-dark-b) 0 1px, var(--cp-line-light-b) 1px 2px),
        repeating-radial-gradient(circle at var(--cp-dot-origin-x) var(--cp-dot-origin-y), var(--cp-dot-color) 0 var(--cp-dot-size-a), transparent var(--cp-dot-size-a) var(--cp-dot-size-b)),
        repeating-radial-gradient(circle at 100% 100%, var(--cp-speckle-color) 0 var(--cp-speckle-size-a), transparent var(--cp-speckle-size-a) var(--cp-speckle-size-b));
      background-size: 100% 100%, var(--cp-noise-size-0), var(--cp-noise-size-1), var(--cp-noise-size-2), var(--cp-noise-size-3), var(--cp-speckle-grid);
      filter: var(--cp-noise-filter);
      mix-blend-mode: var(--cp-noise-blend);
      image-rendering: pixelated;
    }

    .ambient-bg {
      position: relative;
      z-index: 2;
      background: transparent;
    }

    .ambient-bg .landing-hero-shell {
      background-color: rgb(255 255 255 / 0.82) !important;
      border-color: rgb(255 255 255 / 0.9) !important;
      backdrop-filter: blur(10px) saturate(1.15);
      -webkit-backdrop-filter: blur(10px) saturate(1.15);
    }

    .ambient-bg > main > section > .card {
      background-color: rgb(255 255 255 / 0.82) !important;
      border-color: rgb(255 255 255 / 0.9) !important;
      backdrop-filter: blur(10px) saturate(1.15);
      -webkit-backdrop-filter: blur(10px) saturate(1.15);
    }

    .ambient-bg .footer-shell {
      background-color: rgb(255 255 255 / 0.82) !important;
      border-color: rgb(255 255 255 / 0.9) !important;
      backdrop-filter: blur(10px) saturate(1.15);
      -webkit-backdrop-filter: blur(10px) saturate(1.15);
    }

    .ambient-bg .glass-mockup {
      overflow: hidden;
      padding-top: 0 !important;
      background-color: rgb(255 255 255 / 0.32) !important;
      border-color: rgb(255 255 255 / 0.62) !important;
      backdrop-filter: blur(10px) saturate(1.2);
      -webkit-backdrop-filter: blur(10px) saturate(1.2);
    }

    .ambient-bg .glass-mockup::before {
      display: none !important;
    }

    .ambient-bg .glass-mockup > .mockup-window-body {
      background-color: rgb(255 255 255 / 0.15) !important;
      border-color: rgb(255 255 255 / 0.45) !important;
    }

    .ambient-bg .results-ready-pill {
      background-color: rgb(255 255 255 / 0.78) !important;
      border-color: rgb(255 255 255 / 0.9) !important;
      color: var(--color-base-content) !important;
      backdrop-filter: blur(8px) saturate(1.1);
      -webkit-backdrop-filter: blur(8px) saturate(1.1);
    }

    .ambient-bg .mockup-bar-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      min-height: 3.35rem;
      gap: 0.75rem;
      padding: 0.72rem 0.95rem;
      border-bottom: 1px solid rgb(255 255 255 / 0.45);
      pointer-events: none;
    }

    .ambient-bg .mockup-dots {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      flex: 0 0 auto;
      color: rgb(60 86 122 / 0.46);
    }

    .ambient-bg .mockup-dot {
      width: 0.95rem;
      height: 0.95rem;
      border-radius: 9999px;
      background-color: currentColor;
      opacity: 0.55;
    }

    .ambient-bg .mockup-url {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-width: 0;
      color: rgb(60 86 122 / 0.76);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ambient-bg .icon-copy-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      column-gap: 1rem;
    }

    .ambient-bg .icon-copy-row .icon-copy-image,
    .ambient-bg .icon-copy-row > svg {
      width: 4rem;
      height: 4rem;
      display: block;
      opacity: 0.9;
      flex-shrink: 0;
    }

    .ambient-bg .icon-copy-row .icon-copy-text {
      margin: 0;
    }

    /* Audience toggle styles */
    .ambient-bg .audience-tablist {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 0.35rem 0.35rem;
      border-radius: 9999px;
      border: 1px solid rgb(62 88 124 / 0.24);
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.66);
      isolation: isolate;
      touch-action: pan-y;
      user-select: none;
      -webkit-user-select: none;
    }

    .ambient-bg [data-demo-tabs] {
      touch-action: pan-y;
    }

    .ambient-bg .audience-tab {
      position: relative;
      z-index: 1;
      min-height: 3rem;
      min-width: 12.25rem;
      border-radius: 9999px;
      border: 1px solid transparent !important;
      padding: 0.72rem 1.6rem;
      text-align: center;
      font-weight: 700;
      letter-spacing: 0.01em;
      mix-blend-mode: multiply;
      outline: none;
      transition: none !important;
      will-change: transform;
    }

    .ambient-bg .audience-tab-yellow {
      margin-right: -1.1rem;
      background: #ffe600 !important;
      border-color: #d2b400 !important;
      color: #4d3700;
    }

    .ambient-bg .audience-tab-blue {
      margin-left: -1.1rem;
      background: #0090ff !important;
      border-color: #2f78cf !important;
      color: #0f3a73;
    }

    .ambient-bg .audience-tab[aria-selected="false"] {
      outline: none;
    }

    .ambient-bg .audience-tab-yellow[aria-selected="true"] {
      outline: 3px solid #cca800;
      outline-offset: 0;
    }

    .ambient-bg .audience-tab-blue[aria-selected="true"] {
      outline: 3px solid #006abf;
      outline-offset: 0;
    }

    @media (max-width: 640px) {
      .ambient-bg .icon-copy-row {
        column-gap: 0.75rem;
      }

      .ambient-bg .icon-copy-row .icon-copy-image,
      .ambient-bg .icon-copy-row > svg {
        width: 3rem;
        height: 3rem;
      }

      .ambient-bg .audience-tablist {
        padding: 0.35rem 0.35rem;
      }

      .ambient-bg .audience-tab {
        min-width: 10.7rem;
        padding: 0.68rem 1.25rem;
      }

      .ambient-bg .audience-tab-yellow {
        margin-right: -1rem;
      }

      .ambient-bg .audience-tab-blue {
        margin-left: -1rem;
      }
    }