.f-uni {
  --f-uni-plate-w: clamp(260px, 34vw, 520px);
  --f-uni-gap: 2.5rem;
  --f-uni-stop: 1rem;
  --f-uni-pad: clamp(16px, 4vw, 48px);
  padding: clamp(56px, 7vw, 96px) var(--f-uni-pad) 0;
}
.f-uni-head, .f-uni-stage {
  margin-inline: calc(-1 * var(--f-uni-pad));
  padding-inline: var(--f-uni-pad);
  width: calc(100% + var(--f-uni-pad) + var(--f-uni-pad));
  box-sizing: border-box;
}
.f-uni.f-uni-join-previous { margin-block-start: 0; }
.f-uni-head {
  background: var(--f-uni-sky, var(--brand-bg, #FCFCFC));
}
.f-uni-light {
  background: var(--f-uni-sky, var(--brand-bg, #FCFCFC));
  color: var(--brand-ink, #333333);
  --f-uni-ink: var(--brand-ink-strong, #1A1A1A);
  --f-uni-halo: rgb(255 255 255 / 0.34);
}
.f-uni-dark {
  background: var(--brand-ink-strong, #1A1A1A);
  color: var(--brand-bg, #FCFCFC);
  --f-uni-ink: var(--brand-bg, #FCFCFC);
  --f-uni-halo: rgb(0 0 0 / 0.34);
}
.f-uni-head {
  text-align: center;
  padding-bottom: clamp(82px, 9vw, 138px);
}
.f-uni-h, .f-uni-intro { width: min(1220px, 100%); margin-inline: auto; }
.f-uni-h {
  font-family: var(--brand-font-display, system-ui);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--f-h2);
  line-height: var(--f-lh-h2);
  letter-spacing: var(--f-track-h2);
  margin-block: 0 1.25rem;
  color: var(--f-uni-ink);
  text-align: center;
}
.f-uni-intro {
  margin: 0 auto;
  max-width: 52ch;
  font-size: var(--f-step-1, clamp(1.0625rem, 1.6vw, 1.1875rem));
  line-height: 1.55;
}
.f-uni-stage {
  position: relative;
  background: var(--f-uni-plate-ground, transparent);
}
.f-uni-plate {
  position: relative;
  width: var(--f-uni-plate-w);
  margin: 0 auto;
  display: block;
}
.f-uni-plate img {
  display: block;
  width: 100%;
  height: auto;
}
.f-uni-notes { list-style: none; margin: 0; padding: 0; }
.f-uni-note { position: relative; }
.f-uni-t {
  font-family: var(--brand-font-display, system-ui);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--f-step-0, 1.0625rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.375rem;
  color: var(--f-uni-ink);
}
.f-uni-b { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.f-uni-spec {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.f-uni-line, .f-uni-dot { display: none; }
@media (min-width: 981px) {
  .f-uni-plate { width: var(--f-uni-plate-w); }
  .f-uni-plate img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .f-uni-note {
    position: absolute;
    top: calc(var(--y) * 100%);
    width: 16rem;
    transform: translateY(-50%);
    text-align: center;
  }
  .f-uni-note-r { left: calc(50% + var(--f-uni-plate-w) / 2 + var(--f-uni-gap)); }
  .f-uni-note-l {
    right: calc(50% + var(--f-uni-plate-w) / 2 + var(--f-uni-gap));
  }
  .f-uni-line {
    display: block;
    position: absolute;
    top: calc(var(--y) * 100%);
    height: 1px;
    background: var(--f-uni-ink);
    opacity: 0.45;
  }
  .f-uni-line-r {
    left: calc(50% - var(--f-uni-plate-w) / 2 + var(--x) * var(--f-uni-plate-w));
    right: calc(50% - var(--f-uni-plate-w) / 2 - var(--f-uni-gap) + var(--f-uni-stop));
    transform-origin: left center;
  }
  .f-uni-line-l {
    left: calc(50% - var(--f-uni-plate-w) / 2 - var(--f-uni-gap) + var(--f-uni-stop));
    right: calc(50% + var(--f-uni-plate-w) / 2 - var(--x) * var(--f-uni-plate-w));
    transform-origin: right center;
  }
  .f-uni-dot {
    display: block;
    position: absolute;
    top: calc(var(--y) * 100%);
    left: calc(50% - var(--f-uni-plate-w) / 2 + var(--x) * var(--f-uni-plate-w));
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--f-uni-ink);
    box-shadow: 0 0 0 3px var(--f-uni-halo);
  }
}
@media (min-width: 981px) {
  @supports (animation-timeline: view()) and (animation-range: cover 0% cover 100%) {
    @media (prefers-reduced-motion: no-preference) {
      .f-uni-stage { view-timeline: --f-uni-plate block; }
      .f-uni-dot, .f-uni-line, .f-uni-note {
        animation: linear both;
        animation-timeline: --f-uni-plate;
        animation-range: cover calc(18% + var(--i) * 4.5%) cover calc(34% + var(--i) * 4.5%);
      }
      .f-uni-dot  { animation-name: f-uni-dot-in; }
      .f-uni-line { animation-name: f-uni-line-in; }
      .f-uni-note { animation-name: f-uni-note-in; }
      @keyframes f-uni-dot-in {
        0%        { opacity: 0; transform: scale(0.2); }
        22%, 100% { opacity: 1; transform: scale(1); }
      }
      @keyframes f-uni-line-in {
        0%, 14%   { transform: scaleX(0); opacity: 0.45; }
        72%, 100% { transform: scaleX(1); opacity: 0.45; }
      }
      @keyframes f-uni-note-in {
        0%, 46%   { opacity: 0; transform: translateY(calc(-50% + 0.5rem)); }
        100%      { opacity: 1; transform: translateY(-50%); }
      }
    }
  }
}
@media (max-width: 980px) {
  .f-uni {
    padding-inline: 0;
    padding-bottom: 0;
    background: var(--f-uni-sky, var(--brand-bg, #FCFCFC));
  }
  .f-uni-stage { padding-inline: 0; background: none; }
  .f-uni-notes {
    background: linear-gradient(180deg,
      var(--f-uni-floor, var(--brand-bg, #FCFCFC)) 0%,
      var(--f-uni-floor, var(--brand-bg, #FCFCFC)) 78%,
      var(--brand-bg, #FCFCFC) 100%);
    border: 0;
  }
  .f-uni-head { padding-inline: clamp(24px, 7vw, 38px); }
  .f-uni-plate {
    width: 106%;
    margin-left: -3%;
    overflow: hidden;
  }
  .f-uni-notes {
    counter-reset: f-uni-c;
    display: grid;
    gap: 1.5rem;
    padding: clamp(28px, 7vw, 44px) clamp(20px, 5vw, 28px) clamp(28px, 6vw, 40px);
  }
  .f-uni-notes > * { width: 100%; margin-inline: 0; }
  .f-uni-note {
    padding-left: 2.5rem;
    text-align: left;
  }
  .f-uni-note::before {
    content: counter(f-uni-c);
    counter-increment: f-uni-c;
    position: absolute;
    left: 0;
    top: 0.0625rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--f-uni-ink);
    color: var(--brand-bg, #FCFCFC);
    font-size: 0.75rem;
    font-weight: 500;
    display: grid;
    place-items: center;
  }
  .f-uni-dark .f-uni-note::before { color: var(--brand-ink-strong, #1A1A1A); }
}