/* The landing pages' styles, on the homepage and the examples page after common.css: their tokens
   for each color scheme, the page spacing, the homepage's hero, typing demo, features and
   comparison, the examples page's hero, the larger headings, and the arrow icon and gradient mark. */

/**
 * Color schemes
 */

/* Light color scheme (Default)
   Can be forced with data-theme="light" */
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
  /* Demo border gradient */
  --femto-demo-border-gradient-colors: transparent 33%, rgb(232.5, 202.75, 231.75), rgb(220.8, 205.8, 244.3), rgb(208.35, 210.5, 242.25), rgb(202.8, 211.6, 245.4);
  /* Cards */
  --femto-card-box-shadow: var(--femto-box-shadow);
  --femto-card-component-outline-width: 0.0625rem;
  --femto-card-component-outline-color: transparent;
  /* Mark gradient */
  --femto-mark-gradient: linear-gradient(to right, rgb(132, 38, 108.5), rgb(111.2, 57.1, 132.9), rgb(93.45, 63.5, 153.8), rgb(67.2, 71.6, 157.4));
  /* Features icon color */
  --femto-features-icon-color: rgb(146.9, 76.9, 174.8);
  /* Comparison gradients */
  --femto-comparison-gradient-valid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(122.5, 177.5, 197.75), rgb(90, 166.25, 163.75), rgb(100, 154.5, 102));
  --femto-comparison-gradient-invalid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(207.5, 160.5, 99.5), rgb(207.125, 126.125, 109.375), rgb(212.25, 108.25, 99.25));
}

/* Dark color scheme (Auto)
   Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host:not([data-theme]) {
    /* Demo border gradient */
    --femto-demo-border-gradient-colors: transparent 33%, rgb(74.2, 20.8, 68.4), rgb(58.5, 32.5, 85.75), rgb(45, 36.6, 100.9), rgb(26.4, 42.9, 106.7);
    /* Cards */
    --femto-card-box-shadow: none;
    --femto-card-background-color: rgb(21.5, 25.25, 33.75);
    --femto-card-component-outline-width: 0.0625rem;
    --femto-card-component-outline-color: rgb(28, 33, 43.5);
    --femto-card-border-color: var(--femto-card-component-outline-color);
    /* Mark gradient */
    --femto-mark-gradient: linear-gradient(to right, rgb(215.4, 140.8, 210.2), rgb(184.5, 153, 237.75), rgb(156.6, 165.3, 232.6), rgb(142.75, 168.95, 240.05));
    /* Features icon color */
    --femto-features-icon-color: rgb(184.5, 153, 237.75);
    /* Comparison gradients */
    --femto-comparison-gradient-valid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(79.25, 123.5, 148.25), rgb(58.125, 112.625, 115.625), rgb(63, 101.5, 67));
    --femto-comparison-gradient-invalid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(138.5, 110, 76.5), rgb(153, 77.625, 63.25), rgb(151.75, 54.5, 52.25));
  }
}

/* Dark color scheme (Forced)
   Enabled if forced with data-theme="dark" */
[data-theme=dark] {
  /* Demo border gradient */
  --femto-demo-border-gradient-colors: transparent 33%, rgb(74.2, 20.8, 68.4), rgb(58.5, 32.5, 85.75), rgb(45, 36.6, 100.9), rgb(26.4, 42.9, 106.7);
  /* Cards */
  --femto-card-box-shadow: none;
  --femto-card-background-color: rgb(21.5, 25.25, 33.75);
  --femto-card-component-outline-width: 0.0625rem;
  --femto-card-component-outline-color: rgb(28, 33, 43.5);
  --femto-card-border-color: var(--femto-card-component-outline-color);
  /* Mark gradient */
  --femto-mark-gradient: linear-gradient(to right, rgb(215.4, 140.8, 210.2), rgb(184.5, 153, 237.75), rgb(156.6, 165.3, 232.6), rgb(142.75, 168.95, 240.05));
  /* Features icon color */
  --femto-features-icon-color: rgb(184.5, 153, 237.75);
  /* Comparison gradients */
  --femto-comparison-gradient-valid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(79.25, 123.5, 148.25), rgb(58.125, 112.625, 115.625), rgb(63, 101.5, 67));
  --femto-comparison-gradient-invalid: linear-gradient(var(--femto-comparison-gradient-direction, to bottom), rgb(138.5, 110, 76.5), rgb(153, 77.625, 63.25), rgb(151.75, 54.5, 52.25));
}

/**
 * Layout
 */
body {
  overflow: hidden;
}

/* Page spacing, larger at each breakpoint */
body > main {
  --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 5);
  --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 3.5);
  padding: 0;
}

@media (min-width: 576px) {
  body > main {
    --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 6);
    --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 4);
  }
}

@media (min-width: 768px) {
  body > main {
    --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 7);
    --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 4.5);
  }
}

@media (min-width: 1024px) {
  body > main {
    --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 8);
    --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 4);
  }
}

@media (min-width: 1280px) {
  body > main {
    --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 9);
    --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 5.5);
  }
}

@media (min-width: 1536px) {
  body > main {
    --femto-homepage-spacing-vertical: calc(var(--femto-spacing) * 10);
    --femto-homepage-spacing-horizontal: calc(var(--femto-spacing) * 6);
  }
}

section {
  margin-block: var(--femto-homepage-spacing-vertical);
}

/**
 * Homepage
 */

/* Hero */
body > main.homepage > .hero {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--femto-homepage-spacing-horizontal);
  row-gap: calc(var(--femto-homepage-spacing-vertical) / 2);
  justify-items: center;
  margin-top: calc(var(--femto-homepage-spacing-vertical) / 2);
  margin-bottom: 0;
}

body > main.homepage > .hero .demo,
body > main.homepage > .hero .hook {
  width: 100%;
  min-width: 0;
}

body > main.homepage > .hero .hook {
  z-index: 1;
  position: relative;
}

@media (min-width: 1024px) {
  body > main.homepage > .hero .hook {
    max-width: 700px;
  }
}

@media (min-width: 1280px) {
  body > main.homepage > .hero .hook {
    max-width: 950px;
  }
}

body > main.homepage > .hero .hook h1,
body > main.homepage > .hero .hook p {
  text-wrap: balance;
}

@media (min-width: 576px) {
  body > main.homepage > .hero .hook h1,
  body > main.homepage > .hero .hook p {
    text-align: center;
  }
}

body > main.homepage > .hero .hook h1 {
  margin-bottom: calc(var(--femto-spacing) * 2);
}

body > main.homepage > .hero .hook .grid.ctas {
  --femto-form-element-spacing-horizontal: 2rem;
  margin-top: calc(var(--femto-spacing) * 4);
  margin-bottom: calc(var(--femto-spacing) * 0.5);
}

@media (min-width: 576px) {
  body > main.homepage > .hero .hook .grid.ctas {
    display: flex;
    justify-content: center;
  }
}

body > main.homepage > .hero .hook .grid.ctas a[role=button] > span[role=img] {
  margin-left: calc(var(--femto-spacing) * 0.25);
  font-size: 1rem;
}

/* Demo */
body > main.homepage > .hero > .demo {
  --angle: 0deg;
  --demo-border-gradient: linear-gradient(var(--angle), var(--femto-demo-border-gradient-colors));
  display: flex;
  position: relative;
  flex-direction: column;
}

/* Hack to avoid lag on Safari */
@supports (-webkit-hyphens: none) {
  body > main.homepage > .hero > .demo {
    animation: none;
  }
}

@media (min-width: 768px) {
  body > main.homepage > .hero > .demo {
    max-width: 700px;
  }
}

@media (min-width: 1280px) {
  body > main.homepage > .hero > .demo {
    max-width: 950px;
  }
}

/* eslint-disable css/no-important -- the oracle's: the demo card keeps its own block spacing over the article spacing that the responsive-spacings option sets at each breakpoint */
body > main.homepage > .hero > .demo article.component {
  --femto-block-spacing-horizontal: var(--femto-spacing) !important;
  --femto-block-spacing-vertical: calc(var(--femto-spacing) * 1.5) !important;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: 100%;
  height: calc(22.8125rem + var(--femto-block-spacing-vertical));
  margin-bottom: 0;
  margin-inline: auto;
  overflow: visible;
  outline: 0;
  background-color: var(--femto-background-color);
  box-shadow: none;
  pointer-events: none;
  -webkit-user-select: none;
  /* eslint-disable-next-line css/use-baseline -- Safari has only the -webkit- form above; femto writes the same pair */
  user-select: none;
}

@media (min-width: 576px) {
  body > main.homepage > .hero > .demo article.component {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 1.5) !important;
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 2) !important;
    height: calc(24.5rem + var(--femto-block-spacing-vertical));
  }
}

@media (min-width: 768px) {
  body > main.homepage > .hero > .demo article.component {
    height: calc(24.5rem + var(--femto-block-spacing-vertical));
  }
}

@media (min-width: 1024px) {
  body > main.homepage > .hero > .demo article.component {
    height: calc(24rem + var(--femto-block-spacing-vertical));
  }
}

@media (min-width: 1280px) {
  body > main.homepage > .hero > .demo article.component {
    --femto-block-spacing-horizontal: calc(var(--femto-spacing) * 3) !important;
    --femto-block-spacing-vertical: calc(var(--femto-spacing) * 3) !important;
    height: 24rem;
  }
}
/* eslint-enable css/no-important */

@media (min-width: 1536px) {
  body > main.homepage > .hero > .demo article.component {
    height: calc(23.5rem + var(--femto-block-spacing-vertical));
  }
}

body > main.homepage > .hero > .demo article.component form button,
body > main.homepage > .hero > .demo article.component form input:only-child,
body > main.homepage > .hero > .demo article.component form input[aria-invalid=true],
body > main.homepage > .hero > .demo article.component form[role=group],
body > main.homepage > .hero > .demo article.component form[role=search] {
  margin-bottom: 0;
}

body > main.homepage > .hero > .demo article.component form small {
  margin-top: 0.25rem;
  margin-bottom: 0;
}

body > main.homepage > .hero > .demo article.component form label {
  margin-bottom: 0;
}

/* Focused group form */
body > main.homepage > .hero > .demo article.component form[role=group].is-focused,
body > main.homepage > .hero > .demo article.component form[role=search].is-focused {
  --femto-group-box-shadow: var(--femto-group-box-shadow-focus-with-button);
}

body > main.homepage > .hero > .demo article.component form[role=group].is-focused input:not([type=checkbox], [type=radio]),
body > main.homepage > .hero > .demo article.component form[role=group].is-focused select,
body > main.homepage > .hero > .demo article.component form[role=search].is-focused input:not([type=checkbox], [type=radio]),
body > main.homepage > .hero > .demo article.component form[role=search].is-focused select {
  border-color: transparent;
}

body > main.homepage > .hero > .demo article.component form[role=group].is-focused button,
body > main.homepage > .hero > .demo article.component form[role=search].is-focused button {
  box-shadow: none;
}

/* Input */
body > main.homepage > .hero > .demo article.component form input {
  -webkit-user-select: none;
  /* eslint-disable-next-line css/use-baseline -- Safari has only the -webkit- form above; femto writes the same pair */
  user-select: none;
}

body > main.homepage > .hero > .demo article.component form input:not([type=range]).is-focused {
  --femto-border-color: var(--femto-form-element-active-border-color);
  --femto-box-shadow: 0 0 0 var(--femto-outline-width) var(--femto-form-element-focus-color);
}

body > main.homepage > .hero > .demo article.component form input:not([type=checkbox]).is-focused {
  --femto-background-color: var(--femto-form-element-active-background-color);
}

body > main.homepage > .hero > .demo article.component form input[type=range].is-focused {
  --femto-range-border-color: var(--femto-range-active-border-color);
  --femto-range-thumb-color: var(--femto-range-thumb-active-color);
}

/* Slider Thumb */
body > main.homepage > .hero > .demo article.component form input[type=range].is-focused::-webkit-slider-thumb {
  transform: scale(1.25);
}

body > main.homepage > .hero > .demo article.component form input[type=range].is-focused::-moz-range-thumb {
  transform: scale(1.25);
}

/* Focused button */
body > main.homepage > .hero > .demo article.component form button.is-focused {
  --femto-background-color: var(--femto-primary-hover-background);
  --femto-border-color: var(--femto-primary-hover-border);
  --femto-color: var(--femto-primary-inverse);
  --femto-box-shadow: var(--femto-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--femto-outline-width) var(--femto-primary-focus);
}

body > main.homepage > .hero > .demo article.component form * {
  transition: border-radius var(--femto-transition);
}

body > main.homepage > .hero > .demo article.component footer.code {
  background: 0 0;
}

body > main.homepage > .hero > .demo article.component footer.code pre {
  overflow: hidden;
}

/* The pause control (demo.js, WCAG 2.2.2): a small outline button at the card's bottom right. Its
   box has the card's background, so code that reaches the corner passes under it, and it takes
   clicks although the card does not (pointer-events: none) */
body > main.homepage > .hero > .demo article.component .controls {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: var(--femto-spacing);
  border-radius: var(--femto-border-radius);
  background-color: var(--femto-background-color);
  pointer-events: auto;
}

body > main.homepage > .hero > .demo article.component .controls button {
  --femto-form-element-spacing-vertical: 0.25rem;
  --femto-form-element-spacing-horizontal: 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}

/* Border gradient */
body > main.homepage > .hero > .demo::before {
  z-index: 0;
  position: absolute;
  inset: -3rem;
  border-radius: var(--femto-border-radius);
  /* eslint-disable-next-line css/no-invalid-properties -- a false positive: the rule substitutes the custom property's text from this file and misreads the var() nested in its gradient; browsers resolve it */
  background: var(--demo-border-gradient);
  content: "";
  filter: blur(3rem);
  opacity: 0.25;
}

body > main.homepage > .hero > .demo::after {
  z-index: -1;
  position: absolute;
  inset: -1px;
  border-radius: var(--femto-border-radius);
  /* eslint-disable-next-line css/no-invalid-properties -- a false positive: the rule substitutes the custom property's text from this file and misreads the var() nested in its gradient; browsers resolve it */
  background: var(--demo-border-gradient);
  content: "";
}

/* Features */
body > main.homepage > .features > hgroup {
  max-width: 950px;
  margin-bottom: calc(var(--femto-homepage-spacing-vertical) * 0.75);
  margin-inline: auto;
}

@media (min-width: 576px) {
  body > main.homepage > .features > hgroup {
    text-align: center;
  }
}

body > main.homepage > .features > hgroup > h2 {
  margin-bottom: calc(var(--femto-spacing) * 1);
}

body > main.homepage > .features > hgroup > :not(:first-child):last-child {
  --femto-color: var(--femto-color);
  /* eslint-disable-next-line css/use-baseline -- the oracle's; a browser without it wraps as usual, a progressive enhancement femto's feature tiers allow */
  text-wrap: pretty;
}

body > main.homepage > .features > .grid {
  column-gap: calc(var(--femto-homepage-spacing-horizontal) / 2);
  row-gap: calc(var(--femto-homepage-spacing-vertical) / 2);
}

@media (min-width: 768px) {
  body > main.homepage > .features > .grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  body > main.homepage > .features > .grid {
    grid-template-columns: 1fr 1fr;
  }
}

body > main.homepage > .features > .grid article {
  margin-bottom: 0;
  margin-block: 0;
  border: var(--femto-card-component-outline-width) solid var(--femto-card-component-outline-color);
}

body > main.homepage > .features > .grid article > svg {
  width: auto;
  height: 1.125rem;
  margin-bottom: calc(var(--femto-spacing) * 0.75);
  color: var(--femto-features-icon-color);
}

/* The features' character icons (Decision 18), in the box and color of the SVG icons they replaced,
   femto's own mark beside them. Each is a one-color silhouette, a transparent glyph and its shadow,
   as Decision 16's toggle is, so the two emoji (⚙️ and ⚡) take the color as the text characters
   do. The shadow's color is explicit: a shadow in currentColor takes the transparent color, and
   Firefox draws no shadow for a glyph whose -webkit-text-fill-color is transparent (checked in
   Chrome 158 and Firefox 160, and the silhouettes seen in Safari, 2026-11-05) */
body > main.homepage > .features > .grid article > span[role=img] {
  display: block;
  width: fit-content;
  margin-bottom: calc(var(--femto-spacing) * 0.75);
  color: transparent;
  font-size: 1.125rem;
  text-shadow: 0 0 0 var(--femto-features-icon-color);
}

/* The Responsive feature's expand character ⤢ is small for its em, so it is drawn larger without
   changing the line. A character has no hook of its own, so the feature is found by its link */
body > main.homepage > .features > .grid article:has(a[href="/docs#typography"]) > span[role=img] {
  transform: scale(1.25);
}

/* The first feature's </> is code: in the code font at 0.75em, without femto's code box */
body > main.homepage > .features > .grid article > span[role=img] > code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 0.75em;
  line-height: inherit;
}

body > main.homepage > .features > .grid article > svg.femto-icon path {
  fill: currentColor;
}

body > main.homepage > .features > .grid article h3 {
  font-size: 1.25rem;
  line-height: 1.2;
}

body > main.homepage > .features > .grid article p {
  margin-bottom: calc(var(--femto-spacing) * 1);
  color: var(--femto-muted-color);
  /* eslint-disable-next-line css/use-baseline -- the oracle's; a browser without it wraps as usual, a progressive enhancement femto's feature tiers allow */
  text-wrap: pretty;
}

body > main.homepage > .features > .grid article p:last-child {
  margin-bottom: 0;
}

body > main.homepage > .features > .grid article p:last-child a > span[role=img] {
  margin-left: calc(var(--femto-spacing) * 0.25);
  font-size: 1rem;
}

/* Comparison */
body > main.homepage > .comparison > hgroup {
  max-width: 700px;
  margin-bottom: calc(var(--femto-homepage-spacing-vertical) * 0.75);
  margin-inline: auto;
}

@media (min-width: 576px) {
  body > main.homepage > .comparison > hgroup {
    text-align: center;
  }
}

@media (min-width: 768px) {
  body > main.homepage > .comparison > hgroup {
    margin-bottom: calc(var(--femto-homepage-spacing-vertical) / 3);
  }
}

body > main.homepage > .comparison > hgroup > h2 {
  margin-bottom: calc(var(--femto-spacing) * 1);
}

@media (min-width: 768px) {
  body > main.homepage > .comparison > hgroup > h2 {
    margin-bottom: calc(var(--femto-spacing) / 2);
  }
}

body > main.homepage > .comparison > hgroup > :not(:first-child):last-child {
  --femto-color: var(--femto-color);
  /* eslint-disable-next-line css/use-baseline -- the oracle's; a browser without it wraps as usual, a progressive enhancement femto's feature tiers allow */
  text-wrap: pretty;
}

body > main.homepage > .comparison > .grid {
  column-gap: calc(var(--femto-homepage-spacing-horizontal) / 2);
  row-gap: calc(var(--femto-homepage-spacing-vertical) / 2);
}

@media (min-width: 768px) {
  body > main.homepage > .comparison > .grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  body > main.homepage > .comparison > .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}

body > main.homepage > .comparison > .grid > div {
  display: flex;
  flex-direction: column;
}

body > main.homepage > .comparison > .grid > div p .emoji {
  font-size: 1.25rem;
}

body > main.homepage > .comparison > .grid > div .code {
  height: 100%;
  margin-bottom: 0;
  border: var(--femto-card-component-outline-width) solid var(--femto-card-component-outline-color);
  background-color: var(--femto-card-background-color);
}

body > main.homepage > .comparison > .grid > div .code::before {
  display: block;
  position: absolute;
  width: 0.25rem;
  height: 100%;
  inset: 0 auto 0 0;
  content: "";
}

body > main.homepage > .comparison > .grid > div .code pre {
  height: 100%;
}

@media (min-width: 1024px) {
  body > main.homepage > .comparison > .grid > div .code {
    --femto-comparison-gradient-direction: to right;
  }

  body > main.homepage > .comparison > .grid > div .code::before {
    width: 100%;
    height: 0.25rem;
    inset: 0 0 auto;
  }
}

body > main.homepage > .comparison > .grid > div.femto .code::before {
  /* eslint-disable-next-line css/no-invalid-properties -- a false positive: the rule substitutes the custom property's text from this file and misreads the var() nested in its gradient; browsers resolve it */
  background: var(--femto-comparison-gradient-valid);
}

body > main.homepage > .comparison > .grid > div.utility-framework .code::before {
  /* eslint-disable-next-line css/no-invalid-properties -- a false positive: the rule substitutes the custom property's text from this file and misreads the var() nested in its gradient; browsers resolve it */
  background: var(--femto-comparison-gradient-invalid);
}

/**
 * Examples
 */

/* Hero */
body > main.examples > .examples-hero {
  margin-top: calc(var(--femto-homepage-spacing-vertical) / 2);
  margin-bottom: 0;
}

@media (min-width: 576px) {
  body > main.examples > .examples-hero {
    text-align: center;
  }
}

/**
 * Content
 */

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Figtree, var(--femto-font-family);
}

@media (min-width: 576px) {
  h1 {
    --femto-font-size: 2.5rem;
    --femto-line-height: 1.0625;
  }

  h2 {
    --femto-font-size: 2rem;
    --femto-line-height: 1.125;
  }

  h3 {
    --femto-font-size: 1.75rem;
    --femto-line-height: 1.15;
  }

  h4 {
    --femto-font-size: 1.5rem;
    --femto-line-height: 1.175;
  }

  h5 {
    --femto-font-size: 1.25rem;
    --femto-line-height: 1.2;
  }

  h6 {
    --femto-font-size: 1.125rem;
    --femto-line-height: 1.225;
  }
}

@media (min-width: 1536px) {
  h1 {
    --femto-font-size: 3rem;
    --femto-line-height: 1;
  }

  h2 {
    --femto-font-size: 2.5rem;
    --femto-line-height: 1.0625;
  }
}

/**
 * Utils
 */
.fade-in {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fade-in;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/**
 * Components
 */

/* Arrow right icon (Decision 18): on the homepage, a link's span[role=img] is its arrow →, which
   moves right on the link's hover, as the oracle's animated SVG arrow did (its head moved 5 of its
   24 units) */
body > main.homepage a > span[role=img] {
  transition: transform 0.2s ease-in-out;
}

body > main.homepage a:hover > span[role=img] {
  transform: translateX(0.2em);
}

/* Mark */
mark {
  padding: 0;
  background: var(--femto-mark-gradient);
  -webkit-background-clip: text;
  /* eslint-disable-next-line css/use-baseline -- Baseline lists the unprefixed text value as limited, for Safari, where the -webkit- form above clips; prefixed first, as femto writes its pairs */
  background-clip: text;
  color: transparent;
}