@layer rf.effects {
  .rf-loop-view { overflow: auto; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); scroll-padding: 1rem; }
  .rf-loop-track, .rf-loop-group { display: flex; inline-size: max-content; }
  .rf-loop-group { flex: none; gap: 1rem; padding-block: 1rem; padding-inline-start: 1rem; }
  .rf-loop-group > figure { flex: none; inline-size: 15rem; margin: 0; }
  .rf-loop-group img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--rf-radius); }
  .rf-loop-group figcaption { margin-block-start: .5rem; }
  [data-rf-loop="y"] .rf-loop-view { block-size: 14rem; }
  [data-rf-loop="y"] .rf-loop-track, [data-rf-loop="y"] .rf-loop-group { flex-direction: column; inline-size: 100%; }
  [data-rf-loop="y"] .rf-loop-group { gap: 0; padding: 0; }
  [data-rf-loop="y"] .rf-loop-group > p { margin: 0; padding: 1rem; font-size: clamp(1.5rem, 5vw, 3rem); line-height: 1.3; font-weight: 700; }
  [data-rf-loop="x"]:not([data-rf-loop-initialized]) .rf-loop-track { inline-size: 100%; }
  [data-rf-loop="x"]:not([data-rf-loop-initialized]) .rf-loop-group { inline-size: 100%; flex-wrap: wrap; padding-inline: 1rem; }
  [data-rf-loop="x"]:not([data-rf-loop-initialized]) figure { max-inline-size: 100%; }
  [data-rf-loop="y"]:not([data-rf-loop-initialized]) .rf-loop-view { block-size: auto; }
  [data-rf-loop-ready] .rf-loop-view { overflow: hidden; cursor: grab; }
  [data-rf-loop="x"][data-rf-loop-ready] .rf-loop-view { touch-action: pan-y; }
  [data-rf-loop="y"][data-rf-loop-ready] .rf-loop-view { touch-action: pan-x; }
  [data-rf-loop-ready] .rf-loop-track { transform: translateX(var(--rf-loop-offset, 0px)); }
  [data-rf-loop="y"][data-rf-loop-ready] .rf-loop-track { transform: translateY(var(--rf-loop-offset, 0px)); }
  .rf-flip-text { display: inline-block; font-size: clamp(1.5rem, 5vw, 3rem); font-weight: 700; text-decoration: none; }
  .rf-flip-text [aria-hidden] { display: inline-flex; flex-wrap: wrap; gap: .03em; }
  .rf-flip-text [aria-hidden] > span { display: inline-block; transition: transform 450ms ease; }
  .rf-flip-text:focus-visible [aria-hidden] > span, .rf-flip-text [aria-hidden] > span:hover { transform: perspective(12em) rotateX(360deg) translateY(-.12em); }
  .rf-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; transition: grid-template-columns 600ms ease; }
  @media (min-width: 36.001rem) {
    .rf-showcase:has(> :first-child:hover) { grid-template-columns: 1.2fr .8fr; }
    .rf-showcase:has(> :last-child:hover) { grid-template-columns: .8fr 1.2fr; }
    .rf-showcase:has(> :first-child:focus-within) { grid-template-columns: 1.2fr .8fr; }
    .rf-showcase:has(> :last-child:focus-within) { grid-template-columns: .8fr 1.2fr; }
  }
  .rf-showcase > * { min-inline-size: 0; border: 1px solid var(--rf-border); border-radius: var(--rf-radius); padding: clamp(1rem, 4vw, 2rem); background: var(--rf-surface); }
  .rf-showcase > :last-child { border-inline-start-style: dashed; }
  @supports (transition-timing-function: linear(0, 1)) { .rf-showcase { transition-timing-function: linear(0, .13, .4, .68, .9, 1.04, 1.08, 1.06, 1.03, 1.01, 1); } }
  @media (max-width: 36rem) { .rf-showcase { grid-template-columns: 1fr; } }
  @media (prefers-reduced-motion: reduce) { .rf-flip-text [aria-hidden] > span { transform: none !important; transition: none; } .rf-showcase { transition: none; } }
  @media (forced-colors: active) { .rf-showcase > *, .rf-loop-view { border-color: CanvasText; } }
}