/* Values from the live .tt-demo-showcase (research/demo-showcase-staging.md)
   and the new mockup: tabs above the frame, toolbar under the demo.
   Light and dark colors use the --tt-dark space toggle (Button.module.css). */
.xOZsDg7FisGbAkFk6E6F {
  /* The frame's padding plus the stage border: heading and toggle line up
     with the white edge of the demo. */
  --_frame-pad: 0.6rem;
  --_edge: calc(var(--_frame-pad) + 1px);
  --_min-height: 20rem;
  --_header-gap: 1.25rem;
  /* Tighter than the frame padding: the toolbar sits close under the demo
     and close to the frame's bottom edge. */
  --_toolbar-space: 0.25rem;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--_header-gap);
  width: 100%;
}

.xOZsDg7FisGbAkFk6E6F[data-header-gap="x-small"] { --_header-gap: 0.5rem; }
.xOZsDg7FisGbAkFk6E6F[data-header-gap="small"] { --_header-gap: 0.75rem; }
.xOZsDg7FisGbAkFk6E6F[data-header-gap="large"] { --_header-gap: 2rem; }
.xOZsDg7FisGbAkFk6E6F[data-header-gap="x-large"] { --_header-gap: 3rem; }

.xOZsDg7FisGbAkFk6E6F *,
.xOZsDg7FisGbAkFk6E6F *::before,
.xOZsDg7FisGbAkFk6E6F *::after {
  box-sizing: border-box;
}

/* ---------- Header: heading slot and tabs ---------- */
.xOZsDg7FisGbAkFk6E6F [data-part="header"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  padding-inline: var(--_edge);
  /* The toggle row is wider than the screen when it scrolls; without this its
     width would push the showcase (and a grid or flex parent) wider too. */
  contain: inline-size;
}

/* The heading element lives in the Shadow DOM, so Webflow's tag styles don't
   reach it; only the text inside is slot content and inherits from here. */
.xOZsDg7FisGbAkFk6E6F [data-part="heading"] {
  --_hs: var(--tt-heading-md, clamp(1.4rem, 1.192rem + 0.781vw, 1.6rem));
  --_hlh: var(--tt-heading-md-lh, 1.1);

  min-width: 0;
  margin: 0;
  color: var(--tt-heading-color);
  font-size: var(--_hs);
  line-height: var(--_hlh);
  font-weight: var(--tt-heading-weight, 600);
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
  text-wrap: balance;
}

.xOZsDg7FisGbAkFk6E6F[data-heading-size="xx-small"] [data-part="heading"] {
  --_hs: var(--tt-heading-sm, 1rem);
  --_hlh: var(--tt-heading-sm-lh, 1.2);
}

.xOZsDg7FisGbAkFk6E6F[data-heading-size="x-small"] [data-part="heading"] {
  --_hs: var(--tt-heading-base, clamp(1.2rem, 1.096rem + 0.391vw, 1.3rem));
  --_hlh: var(--tt-heading-base-lh, 1.2);
}

.xOZsDg7FisGbAkFk6E6F[data-heading-size="medium"] [data-part="heading"] {
  --_hs: var(--tt-heading-lg, clamp(1.7rem, 1.492rem + 0.781vw, 1.9rem));
  --_hlh: var(--tt-heading-lg-lh, 1.1);
}

.xOZsDg7FisGbAkFk6E6F[data-heading-size="large"] [data-part="heading"] {
  --_hs: var(--tt-heading-xl, clamp(1.9rem, 1.276rem + 2.344vw, 2.5rem));
  --_hlh: var(--tt-heading-xl-lh, 1);
}

/* The heading lines up with the white demo, the toggle with the frame's outer
   edges: a Track never reaches past them, Pills scroll on to the screen edge. */
.xOZsDg7FisGbAkFk6E6F [data-part="toggle"] {
  min-width: 0;
  max-width: calc(100% + var(--_edge) * 2);
  margin-inline: calc(var(--_edge) * -1);
}

.xOZsDg7FisGbAkFk6E6F [data-empty] {
  display: none;
}

/* When heading and toggle don't fit side by side, the toggle wraps below
   instead of squeezing the heading; on its own line it scrolls if needed. */
.xOZsDg7FisGbAkFk6E6F[data-header="split"] [data-part="header"] {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
}

.xOZsDg7FisGbAkFk6E6F[data-header="split"] [data-part="heading"] {
  flex: 1 0 auto;
  max-width: 100%;
}

.xOZsDg7FisGbAkFk6E6F[data-header="split"] [data-part="toggle"] {
  flex: 0 1 auto;
}

.xOZsDg7FisGbAkFk6E6F[data-header="centered"] [data-part="header"] {
  align-items: center;
  text-align: center;
}

@media (max-width: 767px) {
  .xOZsDg7FisGbAkFk6E6F[data-header="split"] [data-part="header"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}

/* ---------- Frame: background, demo, toolbar ----------
   The frame is also a popover for full screen; these rules replace the
   browser's popover defaults. */
.xOZsDg7FisGbAkFk6E6F [data-part="frame"] {
  --_d-ink: var(--tt-dark) var(--white-a-90, rgba(255, 255, 255, 0.9));

  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  gap: var(--_toolbar-space);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--_frame-pad) var(--_frame-pad) var(--_toolbar-space);
  border: 0;
  border-radius: 1.2rem;
  background: var(--_bg);
  color: var(--_d-ink, var(--black-a-80, rgba(0, 0, 0, 0.8)));
  overflow: visible;
  box-shadow:
    0 12px 33px rgba(0, 0, 0, 0.06),
    0 3.6px 10px rgba(0, 0, 0, 0.04),
    0 1.5px 4px rgba(0, 0, 0, 0.03);
}

.xOZsDg7FisGbAkFk6E6F[data-dark] [data-part="frame"] {
  --tt-dark: ;
}

.xOZsDg7FisGbAkFk6E6F[data-bg="gradient"] {
  --_bg:
    radial-gradient(110% 130% at 100% 35%, #7f6fe8 0%, rgba(127, 111, 232, 0) 62%),
    linear-gradient(160deg, #ece9fb 0%, #c6baf4 100%);
}

.xOZsDg7FisGbAkFk6E6F[data-bg="soft"] {
  --_bg: linear-gradient(135deg, #ebf2ff, #f7f2ff) var(--warm-grey-1, #f5f5f4);
}

.xOZsDg7FisGbAkFk6E6F[data-bg="white"] {
  --_bg: var(--tt-color-paper, var(--white-a-100, #fff));
}

.xOZsDg7FisGbAkFk6E6F[data-bg="white"] [data-part="frame"] {
  box-shadow: inset 0 0 0 1px var(--black-a-6, rgba(0, 0, 0, 0.06));
}

.xOZsDg7FisGbAkFk6E6F[data-bg="dark"] {
  --_bg: var(--tt-color-surface-dark, var(--black-900, #1a1919));
}

.xOZsDg7FisGbAkFk6E6F[data-bg="image"] {
  --_bg: var(--_bg-image, none) center / cover no-repeat var(--tt-color-surface-dark, var(--black-900, #1a1919));
}

.xOZsDg7FisGbAkFk6E6F [data-part="stage"] {
  position: relative;
  height: var(--_height-resized, max(var(--_min-height), var(--_height, 65vh)));
  border: 1px solid var(--black-a-6, rgba(0, 0, 0, 0.06));
  border-radius: 0.8rem;
  background: var(--white-a-100, #fff);
  overflow: clip;
  box-shadow: 0 3.6px 10px rgba(0, 0, 0, 0.04);
}

.xOZsDg7FisGbAkFk6E6F iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .xOZsDg7FisGbAkFk6E6F [data-part="stage"] {
    height: var(--_height-resized, max(var(--_min-height), var(--_height-mobile, 70vh)));
  }
}

/* ---------- Resize handle (as in the docs demos) ---------- */
.xOZsDg7FisGbAkFk6E6F [data-part="resize"] {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 0.75rem;
  padding-bottom: 0.25rem;
  cursor: row-resize;
  touch-action: none;
}

.xOZsDg7FisGbAkFk6E6F [data-part="grip"] {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--black-a-20, rgba(0, 0, 0, 0.2));
  transition: background-color 0.2s ease;
}

.xOZsDg7FisGbAkFk6E6F [data-part="resize"]:hover [data-part="grip"],
.xOZsDg7FisGbAkFk6E6F[data-resizing] [data-part="grip"] {
  background: var(--purple-400, #a46bff);
}

.xOZsDg7FisGbAkFk6E6F [data-part="resize"]:focus-visible {
  outline: none;
}

.xOZsDg7FisGbAkFk6E6F [data-part="resize"]:focus-visible [data-part="grip"] {
  background: var(--purple-600, #6a00f5);
}

/* The iframe would swallow the pointer while dragging. */
.xOZsDg7FisGbAkFk6E6F[data-resizing] iframe {
  pointer-events: none;
}

.xOZsDg7FisGbAkFk6E6F[data-resizing] {
  cursor: row-resize;
  user-select: none;
}

.xOZsDg7FisGbAkFk6E6F [data-part="placeholder"] {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--black-a-50, rgba(0, 0, 0, 0.5));
  font-size: 0.8rem;
}

/* ---------- Toolbar ---------- */
.xOZsDg7FisGbAkFk6E6F [data-part="toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  min-height: 2.25rem;
  padding: 0 0.1rem 0 0.3rem;
}

.xOZsDg7FisGbAkFk6E6F [data-part="labels"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.xOZsDg7FisGbAkFk6E6F [data-part="actions"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* "Link copied" above the copy button for COPIED_TIME. Dark on light,
   light on dark (--tt-dark), like the site's .tt-copy-label. */
.xOZsDg7FisGbAkFk6E6F [data-part="copy"] {
  position: relative;
  display: inline-flex;
}

.xOZsDg7FisGbAkFk6E6F [data-part="tooltip"] {
  --_d-tip-bg: var(--tt-dark) var(--white-a-100, #fff);
  --_d-tip-ink: var(--tt-dark) var(--black-900, #1a1919);

  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  z-index: 2;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
  background: var(--_d-tip-bg, var(--black-900, #1a1919));
  color: var(--_d-tip-ink, var(--white-a-100, #fff));
  font-size: 0.7rem;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.25rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.xOZsDg7FisGbAkFk6E6F [data-part="tooltip"][data-show] {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .xOZsDg7FisGbAkFk6E6F [data-part="tooltip"] {
    transition: opacity 0.2s ease;
    transform: translate(-50%, 0);
  }
}

.xOZsDg7FisGbAkFk6E6F [data-part="status"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Full screen ---------- */
.xOZsDg7FisGbAkFk6E6F [data-part="frame"]:popover-open {
  position: fixed;
  inset: 1.5rem;
  max-width: none;
  max-height: none;
}

.xOZsDg7FisGbAkFk6E6F [data-part="frame"]:popover-open [data-part="stage"] {
  flex: 1;
  height: auto;
  min-height: 0;
}

.xOZsDg7FisGbAkFk6E6F [data-part="frame"]::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

@media (max-width: 479px) {
  .xOZsDg7FisGbAkFk6E6F {
    --_frame-pad: 0.4rem;
  }

  .xOZsDg7FisGbAkFk6E6F [data-part="frame"] {
    border-radius: 1rem;
  }

  .xOZsDg7FisGbAkFk6E6F [data-part="frame"]:popover-open {
    inset: 0.5rem;
  }
}

/* Values from the live site: .tt-label (0.8rem bold), Label "Platform
   Gradient", .tt-batch (outline badge, 0.6rem).

   Gradients: Product is the platform gradient (dark backgrounds #6085FF
   #75ACFF #A46BFF, light backgrounds #033EFF #0060F0 #5900E8). Green and Blue
   are derived the same way: three stops, a lighter set for dark backgrounds
   and a deeper one for light backgrounds. The set is picked with the --tt-dark
   space toggle (see Button.module.css): --_d-g only exists when dark. */
.cjQoqVs3VqSYANFvJFBU {
  --_g: none;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  /* As wide as its text in any parent (grid, flex, block). */
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  /* Variable font: 600 reads as bold enough and matches the headings. */
  font-weight: 600;
  /* Same stylistic sets as the site's headings and buttons. */
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
}

.c02wqn5j0_pCupzmPUjp {
  display: block;
}

/* ---------- Size and case ----------
   Text and badges step differently: text labels grow more towards the top,
   badges stay compact.
   Text:  X-Small 0.7, Small 0.8 (.tt-label), Medium 0.9, Large 1.1, X-Large 1.3rem.
   Badge: X-Small 0.5, Small 0.55, Medium 0.6 (.tt-batch), Large 0.7
          (.tt-batch.large), X-Large 0.8rem. */

.cjQoqVs3VqSYANFvJFBU[data-size="x-small"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="small"] { font-size: 0.8rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="large"] { font-size: 1.1rem; }
.cjQoqVs3VqSYANFvJFBU[data-size="x-large"] { font-size: 1.3rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase] {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Blend ----------
   Lets the label mix with what's behind it, e.g. a shader: Plus Lighter
   glows on dark, Multiply sinks into light. Auto picks by the --tt-dark
   toggle, like the Quote. */
.cjQoqVs3VqSYANFvJFBU[data-blend="auto"] {
  --_d-blend: var(--tt-dark) plus-lighter;

  mix-blend-mode: var(--_d-blend, multiply);
}

.cjQoqVs3VqSYANFvJFBU[data-blend="plus-lighter"] { mix-blend-mode: plus-lighter; }
.cjQoqVs3VqSYANFvJFBU[data-blend="multiply"] { mix-blend-mode: multiply; }

/* ---------- Colors ---------- */

/* Muted: the text color around it, toned down like the Heading Group subline. */
.cjQoqVs3VqSYANFvJFBU[data-muted] {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-color="product"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #6085ff 10%, #75acff 38%, #a46bff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #033eff 10%, #0060f0 38%, #5900e8 90%));
}

/* Stays within greens: a fresh green, a lighter mint, a cooler green. */
.cjQoqVs3VqSYANFvJFBU[data-color="green"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #3ddc84 10%, #86efac 45%, #2bc48a 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #00873e 10%, #12a150 45%, #047857 90%));
}

.cjQoqVs3VqSYANFvJFBU[data-color="blue"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #4c9bff 10%, #7fd0ff 45%, #6b7cff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #0055e5 10%, #0089d1 45%, #3442e0 90%));
}

/* Stays within the brand purples (--tt-color-brand #6f00ff, brand-soft #8b33ff). */
.cjQoqVs3VqSYANFvJFBU[data-color="purple"] {
  --_d-g: var(--tt-dark) linear-gradient(90deg, #a46bff 10%, #c39bff 45%, #8b33ff 90%);
  --_g: var(--_d-g, linear-gradient(90deg, #5900e8 10%, #8b33ff 45%, #6f00ff 90%));
}

/* Text in color: the gradient fills the letters. */
.cjQoqVs3VqSYANFvJFBU[data-color] [data-part="text"] {
  background-image: var(--_g);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Badges ---------- */

/* Padding in em, so every size keeps the same proportions. The text is
   nudged down by --_shift (less padding below than above) because the font's
   line box sits a little high; capitals have no descenders and need a bit
   more. The total height stays the same either way. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"],
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"] {
  --_shift: 0.04em;

  padding: calc(0.3em + var(--_shift)) 0.55em calc(0.3em - var(--_shift));
  border-radius: 0.6em;
  font-size: 0.6rem;
  line-height: 1.1;
  font-weight: 600;
}

.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-small"] { font-size: 0.5rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="small"] { font-size: 0.55rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="large"] { font-size: 0.7rem; }
.cjQoqVs3VqSYANFvJFBU:is([data-style="badge"], [data-style="badge-filled"])[data-size="x-large"] { font-size: 0.8rem; }

.cjQoqVs3VqSYANFvJFBU[data-uppercase]:is([data-style="badge"], [data-style="badge-filled"]) {
  --_shift: 0.06em;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge"]:not([data-color]) {
  border: 1px solid color-mix(in srgb, currentColor 80%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"]:not([data-color]) {
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: color-mix(in srgb, currentColor 80%, transparent);
}

.cjQoqVs3VqSYANFvJFBU[data-muted]:is([data-style="badge"], [data-style="badge-filled"]) {
  color: color-mix(in srgb, currentColor var(--tt-text-muted-opacity, 60%), transparent);
}

/* Colored badge: a 1px gradient border, drawn on a layer whose middle is
   cut out with a mask, so the gradient can also run through the border. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge"][data-color]::before,
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: var(--_g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Filled: a light tint of the gradient behind the text. */
.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--_g);
  opacity: 0.14;
}

.cjQoqVs3VqSYANFvJFBU[data-style="badge-filled"][data-color]::before {
  opacity: 0.5;
}

/* ---------- Animated ----------
   The gradient is three times as wide as the label and slides back and
   forth, in the text and the border alike. */

.cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
.cjQoqVs3VqSYANFvJFBU[data-animated]::before,
.cjQoqVs3VqSYANFvJFBU[data-animated]::after {
  background-size: 300% 100%;
  animation: Tl0mQjlzMCz5aiuOUZw4 4s ease-in-out infinite alternate;
}

@keyframes Tl0mQjlzMCz5aiuOUZw4 {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cjQoqVs3VqSYANFvJFBU[data-animated] [data-part="text"],
  .cjQoqVs3VqSYANFvJFBU[data-animated]::before,
  .cjQoqVs3VqSYANFvJFBU[data-animated]::after {
    animation: none;
  }
}

/* Toggle: Track (grey track, white pill, from the Ownership switch) or Pills.
   Radii follow the Button of the same size (0.5 / 0.6 / 0.8rem); the pill
   inside the track is smaller by the track's padding, so both curves stay parallel.
   Light and dark colors use the --tt-dark space toggle (see Button.module.css). */
.tRW6ByTonaofv2rjtj3r {
  --_radius: 0.6rem;
  --_pad: 0.2rem;
  --_px: 0.8rem;
  --_py: 0.45rem;
  --_font: 0.75rem;
  --_bleed-end: 0px;

  --_d-text: var(--tt-dark) var(--white-a-60, rgba(255, 255, 255, 0.6));
  --_d-text-active: var(--tt-dark) var(--white-a-100, #fff);
  --_d-track: var(--tt-dark) var(--white-a-10, rgba(255, 255, 255, 0.1));
  --_d-hover: var(--tt-dark) var(--white-a-5, rgba(255, 255, 255, 0.05));
  --_d-pill: var(--tt-dark) rgba(255, 255, 255, 0.14);

  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-family: Yellixvf, Arial, sans-serif;
}

.tRW6ByTonaofv2rjtj3r *,
.tRW6ByTonaofv2rjtj3r *::before,
.tRW6ByTonaofv2rjtj3r *::after {
  box-sizing: border-box;
}

.tRW6ByTonaofv2rjtj3r[data-size="x-small"] {
  --_radius: 0.5rem;
  --_pad: 0.15rem;
  --_px: 0.6rem;
  --_py: 0.35rem;
  --_font: 0.65rem;
}

.tRW6ByTonaofv2rjtj3r[data-size="medium"] {
  --_radius: 0.8rem;
  --_pad: 0.25rem;
  --_px: 1.1rem;
  --_py: 0.6rem;
  --_font: 0.9rem;
}

/* The row scrolls; its block padding leaves room for the active pill's shadow. */
.tRW6ByTonaofv2rjtj3r [data-part="row"] {
  display: flex;
  padding-block: 0.25rem;
  margin-block: -0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="row"]::-webkit-scrollbar {
  display: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="track"] {
  position: relative;
  display: flex;
  flex: none;
  gap: 0.15rem;
}

/* The active pill: one element that slides and resizes to the active item. */
.tRW6ByTonaofv2rjtj3r [data-part="indicator"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--_w, 0px);
  border-radius: calc(var(--_radius) - var(--_pad));
  background: var(--_d-pill, var(--white-a-100, #fff));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05);
  transform: translateX(var(--_x, 0px));
  pointer-events: none;
}

.tRW6ByTonaofv2rjtj3r [data-part="indicator"][data-ready] {
  transition:
    transform 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tRW6ByTonaofv2rjtj3r [data-part="indicator"][data-ready] {
    transition: none;
  }
}

/* The grey track is the toggle itself, so it stays in place and the items
   scroll inside it instead of the track being cut off at the edge. */
.tRW6ByTonaofv2rjtj3r[data-style="track"] {
  padding: var(--_pad);
  border-radius: var(--_radius);
  background: var(--_d-track, var(--black-a-6, rgba(0, 0, 0, 0.06)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"] {
  position: relative;
  flex: none;
  padding: var(--_py) var(--_px) calc(var(--_py) - 0.05rem);
  border: 0;
  border-radius: calc(var(--_radius) - var(--_pad));
  background: transparent;
  color: var(--_d-text, var(--black-a-60, rgba(0, 0, 0, 0.6)));
  font: inherit;
  font-size: var(--_font);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.tRW6ByTonaofv2rjtj3r [data-part="item"]:not([data-active]):hover {
  color: var(--_d-text-active, var(--black-a-96, rgba(0, 0, 0, 0.96)));
}

.tRW6ByTonaofv2rjtj3r[data-style="pills"] [data-part="item"]:not([data-active]):hover {
  background: var(--_d-hover, var(--black-a-6, rgba(0, 0, 0, 0.06)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"][data-active] {
  color: var(--_d-text-active, var(--black-a-96, rgba(0, 0, 0, 0.96)));
}

.tRW6ByTonaofv2rjtj3r [data-part="item"]:focus-visible {
  outline: 2px solid var(--tt-color-brand, #6f00ff);
  outline-offset: 2px;
}

.tRW6ByTonaofv2rjtj3r[data-style="pills"] {
  --_pad: 0rem;
}

/* Bleed: the row runs on to the right screen edge (cut-off items show there
   is more). Its end padding lets the last item scroll back to the box edge. */
.tRW6ByTonaofv2rjtj3r[data-bleed] [data-part="row"] {
  margin-right: calc(var(--_bleed-end) * -1);
  padding-right: var(--_bleed-end);
}

/* Fill: the parent's full width, shared equally by the items. */
.tRW6ByTonaofv2rjtj3r[data-fill] {
  width: 100%;
}

.tRW6ByTonaofv2rjtj3r[data-fill] [data-part="track"] {
  flex: 1;
}

.tRW6ByTonaofv2rjtj3r[data-fill] [data-part="item"] {
  flex: 1 1 0;
  min-width: 0;
}

.tRW6ByTonaofv2rjtj3r [data-part="row"][data-dragging] {
  cursor: grabbing;
  user-select: none;
}