/* =========================================================================
   THE RING — PORTED VERBATIM FROM THE APP, NOT REDRAWN
   =========================================================================
   Carlos, 2026-08-27: "remove the radial glint from hero and add the STANDARD
   CIRCLE WITH GLINT!!!!!! EXACTLY THE SAME AS THIS ONE" — pointing at
   span.cs-home-hero-ring.cs-ring-soft.cs-sheet-icon.cs-sheet-glyph on
   /sync/videos/, the app's own home hero.

   What was here before was a lookalike: a conic rim and two orbiting dots that
   I wrote against the rail's simplified copy of this object. It was close and it
   was not the same, which is exactly the mistake cs-stage.css already records
   being made once on the rail ("THE SUCCESS RING — THE APP'S OWN, NOT A
   LOOKALIKE"). So this file is not a reimplementation. Every rule below is
   COPIED, declaration for declaration, out of cdn/css/choreosync.css, and each
   block is stamped with the source line it came from.

   TWO EDITS, BOTH MECHANICAL, BOTH APPLIED BY SCRIPT:

     1. `.choreosync-mode ` is the APP's body class and this site has no such
        body. Every selector is re-scoped to the ring element instead.

     2. ⚠ AND THAT RE-SCOPING IS LOAD-BEARING, NOT TIDYING. This site ALREADY
        has `.cs-ring-glint`, `.cs-ring-glint-a` and `.cs-ring-glint-b` — the
        rail's stations and /welcome/'s success ring use them, from the older and
        simpler port in cs-stage.css. Left unscoped, the app's versions (which
        carry a ::before halo and a ::after core the site's copy does not) would
        land on those too and silently repaint every ring on the site. Nothing
        here may be written as a bare `.cs-ring-*` selector.

   ⚠ DO NOT HAND-EDIT THE PORTED BLOCKS. If the ring changes in the app, re-copy
   them. Values were tuned against the reference art and are not worth
   re-eyeballing — the app's own file says so in as many words.

   ⚠ SIZE IS THE ONE THING THAT IS *NOT* SHARED, and that is the app's rule, not
   an exception to it. choreosync.css:8546 — "ONE RADIUS PER RING, DECLARED NEXT
   TO ITS DIAMETER — the glyph's 144/126, the hero's 230/165, the splash's
   min(78vw,400px)." Every ring picks its own diameter and sets --cs-ring-orbit
   to exactly half of it. This one is sized to clear the marketing hero's phone;
   see the placement rule at the foot of the file.
   ========================================================================= */

/* ---- the ring palette, choreosync.css:262-274 + the tokens those resolve to.
        Scoped to the ring, not :root, so nothing else on this site inherits a
        second set of colour tokens. ---- */
.cs-hero-ring {
  --cs-purple-rgb: 108, 67, 206;
  --cs-ring-1: #6e43cc;
  --cs-ring-2: #8155dc;
  --cs-ring-3: #aa82ef;
  --cs-ring-4: #d7c2ff;
  --cs-ring-glow-1: rgba(221, 204, 255, 0.85);
  --cs-ring-glow-2: rgba(163, 112, 245, 0.48);
  --cs-ring-glow-3: rgba(108, 67, 206, 0.27);
  --cs-ring-rgb: var(--cs-purple-rgb);
  --cs-glint-pale-rgb: 218, 195, 255;
  --cs-glint-deep-rgb: 145, 95, 245;
  --cs-glint-blur: 5px;
  --cs-glint-sunset-hue: 118deg;
  --cs-purple-soft: rgba(108, 67, 206, 0.18);
  --cs-text: #ffffff;
  --cs-w-08: rgba(255, 255, 255, 0.08);
  --cs-w-13: rgba(255, 255, 255, 0.13);
  /* choreosync.css:  the app's own blur token, so the glass matches. */
  --filter-blur: blur(3rem) saturate(200%);
}


/* ---- choreosync.css:2292 ---- */
.cs-hero-ring.cs-sheet-icon.cs-sheet-glyph {
  position: relative;

  width: 144px;
  height: 144px;
  /* THE GLINT ORBIT RADIUS = HALF THE DIAMETER, and it lives beside the diameter on every
     ring for exactly that reason — the two cannot be allowed to drift. See the orbit block
     for why this is the radius and not the 35.36% the static positions use. */
  --cs-ring-orbit: 72px;
  flex: 0 0 auto;
  /* AUTO, not a pixel basis. This is a COLUMN flex item, so flex-basis sets its HEIGHT — a
     hard 96px basis pinned the height while width/height above went to 144px, and the ring
     rendered as an ellipse (the ::before mask is closest-side, so it follows the box). auto
     makes the basis follow width/height, so the ring stays circular at any size. */

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 22px;

  border-radius: 50%;

  color: var(--cs-text);

  /*
     * Slight visible glass inside.
     * Your current version lets too much background straight through.
     */
  background: radial-gradient(
    circle at 42% 38%,
    var(--cs-w-13) 0%,
    rgba(130, 105, 180, 0.09) 38%,
    rgba(41, 32, 65, 0.22) 70%,
    rgba(18, 15, 30, 0.28) 100%
  );

  /*
     * The actual luminous edge comes from ::before.
     */
  border: 0;

  box-shadow:
    0 0 8px rgba(166, 120, 255, 0.28),
    0 0 20px var(--cs-purple-soft),
    inset 0 0 18px rgba(170, 135, 240, 0.08),
    inset 0 1px 0 var(--cs-w-13);

  -webkit-backdrop-filter: var(--filter-blur);
  backdrop-filter: var(--filter-blur);

  isolation: isolate;

  /* RING PALETTE — the ::before conic reads these, so a tone re-points four colours
     instead of restating the whole gradient. Stops run darkest -> brightest -> darkest,
     which gives the ring its uneven, lit-from-two-arcs look. Purple is the default. */

  /* GLINT TINTS — RGB TRIPLES, not colours, because the glint shadows use the same hue
     at eight different alphas. The specular highlights were the last purple left: the
     ring and its bloom re-tinted per tone but the two glints stayed lavender, so a red
     danger ring had violet sparkles on it. */
}

/* ---- choreosync.css:2355 ---- */
.cs-hero-ring.cs-sheet-icon.cs-sheet-glyph::before {
  content: "";

  position: absolute;
  inset: -1px;

  border-radius: 50%;

  /*
     * This creates the purple-to-lavender variation
     * actually visible in the reference.
     */
  background: conic-gradient(
    from 205deg,

    var(--cs-ring-1) 0deg,
    var(--cs-ring-2) 55deg,
    var(--cs-ring-3) 105deg,
    var(--cs-ring-4) 155deg,

    var(--cs-ring-3) 210deg,
    var(--cs-ring-2) 260deg,
    var(--cs-ring-1) 315deg,
    var(--cs-ring-1) 360deg
  );

  /*
     * 2px luminous ring.
     */
  padding: 1.75px;

  -webkit-mask:
    linear-gradient(var(--cs-text) 0 0) content-box,
    linear-gradient(var(--cs-text) 0 0);

  -webkit-mask-composite: xor;

  mask:
    linear-gradient(var(--cs-text) 0 0) content-box,
    linear-gradient(var(--cs-text) 0 0);

  mask-composite: exclude;

  filter: drop-shadow(0 0 2px var(--cs-ring-glow-1))
    drop-shadow(0 0 6px var(--cs-ring-glow-2))
    drop-shadow(0 0 12px var(--cs-ring-glow-3));

  pointer-events: none;

  z-index: 1;
}

/* ---- choreosync.css:2409 ---- */
.cs-hero-ring.cs-sheet-icon.cs-sheet-glyph::after {
  content: "";

  position: absolute;
  inset: 7px;

  border-radius: 50%;

  background: radial-gradient(
    circle at 38% 30%,
    var(--cs-w-08),
    transparent 52%
  );

  pointer-events: none;

  z-index: 0;
}

/* ---- choreosync.css:2466 ---- */
.cs-hero-ring .cs-ring-glint-a,
.cs-hero-ring .cs-ring-glint-b {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  background: transparent;
  transform: translate(-50%, -50%);
  z-index: +1;
}

/* ---- choreosync.css:2488 ---- */
.cs-hero-ring .cs-ring-glint-a {
  width: 15%;
  height: 15%;

  top: 14.64%;
  left: 14.64%;
  right: auto;
  bottom: auto;
}

/* ---- choreosync.css:2500 ---- */
.cs-hero-ring .cs-ring-glint-b {
  width: 9.5%;
  height: 9.5%;

  top: 85.36%;
  left: 85.36%;
  right: auto;
  bottom: auto;
  opacity: 0.7;
}

/* ---- choreosync.css:2517 ---- */
.cs-hero-ring .cs-ring-glint-a::before,
/* B's halo matches A's. Carlos, 2026-08-06: "glint b need more of a halo like glint a." It was
   deliberately weaker — inset -65% and a lighter blur — which on top of B being smaller made it
   read as a dot rather than a light. Same inset and blur as A now; B still lands smaller because
   the glint itself is 9.5% against A's 15%. */
.cs-hero-ring .cs-ring-glint-b::before {
  content: "";
  position: absolute;
  inset: -80%;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(var(--cs-glint-pale-rgb), 0.68) 12%,
    rgba(var(--cs-glint-deep-rgb), 0.44) 28%,
    rgba(var(--cs-glint-deep-rgb), 0.2) 52%,
    transparent 76%
  );

  /* --cs-glint-blur IS A TOKEN because the splash's sunset animates `filter`, and the
     shorthand takes the blur with it — a keyframe that hard-coded 5px would quietly
     re-blur B, whose halo is tighter. One value per glint, read by both. */
  --cs-glint-blur: 5px;
  filter: blur(var(--cs-glint-blur));
  mix-blend-mode: screen;
}

/* ---- choreosync.css:2545 ---- */
.cs-hero-ring .cs-ring-glint-a::before {
  inset: -80%;
  --cs-glint-blur: 5px;
  filter: blur(var(--cs-glint-blur));

  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.42),
    0 0 20px rgba(var(--cs-glint-pale-rgb), 0.4),
    0 0 34px rgba(var(--cs-glint-deep-rgb), 0.28),
    0 0 52px rgba(var(--cs-glint-deep-rgb), 0.18);
}

/* ---- choreosync.css:2576 ---- */
.cs-hero-ring .cs-ring-glint-a::after,
.cs-hero-ring .cs-ring-glint-b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background: var(--cs-text);
  border-radius: 50%;

  filter: none;
  z-index: 2;
}

/* ---- choreosync.css:2594 ---- */
.cs-hero-ring .cs-ring-glint-a::after {
  width: 22%;
  height: 22%;

  box-shadow:
    0 0 1px var(--cs-text),
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(var(--cs-glint-pale-rgb), 0.75);
}

/* ---- choreosync.css:8674 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-a,
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-b {
  /* Re-anchored to the centre; the rotate+translate above does the placing. */
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;

  /* 2.2s with a LONGER TAIL than the old 1.6s expo-out. Carlos, 2026-08-06: the slowdown
     should run longer and settle like a sunset. x2 pulled in from 0.3 to 0.12 is what does
     the work — the same 720deg is spent in the first third and the rest of the time is the
     crawl into place, which is the part being asked for.

     ⚠ ON THE SPLASH IT OUTLIVES THE SCREEN ON A WARM LOAD, ON PURPOSE. cs-splash.php holds
     for 900ms then fades over 500ms, so a cached load sees roughly the first 1.4s and the tail
     plays out THROUGH the fade. That is the intended reading: the light is still settling as
     it dims. Raising the floor far enough to show all 2.2s would put ~1.5s of dead time in
     front of every returning member, which is not worth it. On a genuine cold start
     window.load is well past 2.2s and the whole thing plays. The hero and the alert glyphs
     have no such deadline and always play in full — same animation, longer to watch it. */
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.05, 0.85, 0.12, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  /* Normally 0. choreosync.js writes a NEGATIVE value here when a ring is re-inserted
     mid-flight, which seeks the restarted animation to where the old one had got to. See the
     settled block below for why a ring gets re-inserted at all. */
  animation-delay: var(--cs-ring-delay, 0s);
}

/* ---- choreosync.css:8767 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-a::before,
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-b::before {
  animation: cs-glint-sunset 2.2s ease-in-out forwards;
  animation-delay: var(--cs-ring-delay, 0s);
}

/* ---- choreosync.css:8804 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-a::after,
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-b::after {
  /* ease-in-out, NOT the orbit's expo-out: that curve spends the whole change in the opening
     half second, while the glints are still moving too fast to read. This spreads it evenly
     across the 2.2s instead. */
  animation: cs-glint-core 2.2s ease-in-out forwards;
  animation-delay: var(--cs-ring-delay, 0s);
}

/* ---- choreosync.css:8818 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-a {
  transform: translate(-50%, -50%) rotate(-45deg)
    translateY(calc(-1 * var(--cs-ring-orbit)));
  animation-name: cs-glint-orbit-a;
}

/* ---- choreosync.css:8823 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph .cs-ring-glint-b {
  transform: translate(-50%, -50%) rotate(135deg)
    translateY(calc(-1 * var(--cs-ring-orbit)));
  animation-name: cs-glint-orbit-b;
}

/* ---- choreosync.css:8857 ---- */
.cs-hero-ring.cs-ring-settled .cs-ring-glint-a,
.cs-hero-ring.cs-ring-settled .cs-ring-glint-b,
.cs-hero-ring.cs-ring-settled .cs-ring-glint-a::before,
.cs-hero-ring.cs-ring-settled .cs-ring-glint-b::before,
.cs-hero-ring.cs-ring-settled .cs-ring-glint-a::after,
.cs-hero-ring.cs-ring-settled .cs-ring-glint-b::after {
  animation: none;
}

/* ---- choreosync.css:8884 ---- */
.cs-hero-ring.cs-sheet-icon.cs-ring-soft.cs-sheet-glyph {
  --cs-ring-k: 0.45;
}

/* ---- choreosync.css:8888 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph::before {
  inset: -5px;

  /* FADES OUT AROUND THE CIRCUMFERENCE. The alert glyph's conic runs colour the
     whole way round — right for a 96px badge, wrong here: a closed circle behind a
     dancer reads as a drawn shape. Transparent segments break it into arcs of light
     that appear and dissolve, which is what the reference does. */
  background: conic-gradient(
    from 195deg,
    transparent 0deg,
    rgba(var(--cs-ring-rgb), 0.35) 18deg,
    var(--cs-ring-3) 62deg,
    var(--cs-ring-4) 104deg,
    var(--cs-ring-3) 148deg,
    rgba(var(--cs-ring-rgb), 0.3) 186deg,
    transparent 214deg,
    transparent 262deg,
    var(--cs-ring-2) 306deg,
    rgba(var(--cs-ring-rgb), 0.25) 338deg,
    transparent 360deg
  );

  /* SOFT, not a hairline. Blurring the rim itself is what separates "light" from
     "a drawn circle" — the drop-shadows alone only bloom outward from a sharp edge. */
  filter: blur(calc(4px * var(--cs-ring-k, 1)))
    drop-shadow(0 0 calc(14px * var(--cs-ring-k, 1)) var(--cs-ring-glow-1))
    drop-shadow(0 0 calc(26px * var(--cs-ring-k, 1)) var(--cs-ring-glow-2))
    drop-shadow(0 0 calc(60px * var(--cs-ring-k, 1)) var(--cs-ring-glow-3))
    drop-shadow(
      0 0 calc(110px * var(--cs-ring-k, 1)) rgba(var(--cs-ring-rgb), 0.5)
    );

  /* SOFT-EDGED BAND, not a hard annulus. The glyph builds its rim by cutting a
     content-box hole out of a solid disc (padding + two-layer mask + composite:
     exclude) — that gives crisp inner and outer edges, which is right for a 96px
     badge. blur() then softens the WHOLE band evenly and cannot fade just its edges.

     A single radial mask replaces the whole trick: the band ramps up from nothing at
     72%, peaks across the middle, and falls away again by 100%. The edges dissolve
     while the core stays bright — which is what makes it read as light rather than a
     drawn ring. `closest-side` makes 100% = the radius, so these stops are
     proportional and survive any diameter change.

     ⚠ All four mask properties are reset here. Leaving the glyph's
     `mask-composite: exclude` in place would XOR this gradient against itself and
     punch the ring back out. */
  -webkit-mask: radial-gradient(
    closest-side,
    transparent 68%,
    rgba(255, 255, 255, 0.15) 78%,
    rgba(255, 255, 255, 0.75) 88%,
    #fff 93%,
    rgba(255, 255, 255, 0.45) 97%,
    transparent 100%
  );
  -webkit-mask-composite: source-over;
  mask: radial-gradient(
    closest-side,
    transparent 68%,
    rgba(255, 255, 255, 0.15) 78%,
    rgba(255, 255, 255, 0.75) 88%,
    #fff 93%,
    rgba(255, 255, 255, 0.45) 97%,
    transparent 100%
  );
  mask-composite: add;
}

/* ---- choreosync.css:8959 ---- */
.cs-hero-ring.cs-ring-soft.cs-sheet-glyph {
  /* CONCENTRIC ECHOES. Each entry is blur + spread, so they read as soft rings
     rippling outward from the main rim rather than one flat halo. box-shadow does
     this without extra markup — the element only has two pseudo-elements and both
     are already spoken for (rim and internal reflection). */
  /* --cs-ring-k SCALES THE WHOLE LIGHT. Every radius below is multiplied by it, so one
     definition serves a 400px hero ring and a 96px sheet glyph. Absolute values tuned for the
     hero read as a solid blob at glyph size — the bloom does not shrink with the element. */
  --cs-ring-k: 1;
  box-shadow:
    0 0 calc(14px * var(--cs-ring-k)) calc(2px * var(--cs-ring-k))
      rgba(var(--cs-ring-rgb), 0.3),
    0 0 calc(20px * var(--cs-ring-k)) calc(18px * var(--cs-ring-k))
      rgba(var(--cs-ring-rgb), 0.1),
    0 0 calc(30px * var(--cs-ring-k)) calc(38px * var(--cs-ring-k))
      rgba(var(--cs-ring-rgb), 0.07),
    0 0 calc(46px * var(--cs-ring-k)) calc(64px * var(--cs-ring-k))
      rgba(var(--cs-ring-rgb), 0.04),
    inset 0 0 calc(50px * var(--cs-ring-k)) rgba(var(--cs-ring-rgb), 0.16);
  -webkit-backdrop-filter: blur(5px) saturate(125%);
  backdrop-filter: blur(5px) saturate(125%);
}

/* ---- choreosync.css:8651 ---- */
@keyframes cs-glint-orbit-a {
  from {
    transform: translate(-50%, -50%) rotate(-765deg)
      translateY(calc(-1 * var(--cs-ring-orbit)));
  }
  to {
    transform: translate(-50%, -50%) rotate(-45deg)
      translateY(calc(-1 * var(--cs-ring-orbit)));
  }
}

/* ---- choreosync.css:8662 ---- */
@keyframes cs-glint-orbit-b {
  from {
    transform: translate(-50%, -50%) rotate(-585deg)
      translateY(calc(-1 * var(--cs-ring-orbit)));
  }
  to {
    transform: translate(-50%, -50%) rotate(135deg)
      translateY(calc(-1 * var(--cs-ring-orbit)));
  }
}

/* ---- choreosync.css:8743 ---- */
@keyframes cs-glint-sunset {
  0% {
    filter: blur(var(--cs-glint-blur)) saturate(1) brightness(1)
      hue-rotate(0deg);
  }
  35% {
    filter: blur(calc(var(--cs-glint-blur) * 1.1)) saturate(1.15)
      brightness(1.2) hue-rotate(calc(var(--cs-glint-sunset-hue) * 0.12));
  }
  72% {
    filter: blur(calc(var(--cs-glint-blur) * 1.5)) saturate(1.7)
      brightness(1.85) hue-rotate(var(--cs-glint-sunset-hue));
  }
  100% {
    filter: blur(var(--cs-glint-blur)) saturate(1) brightness(1)
      hue-rotate(0deg);
  }
}

/* ---- choreosync.css:8794 ---- */
@keyframes cs-glint-core {
  from {
    transform: translate(-50%, -50%) scale(2);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

/* =========================================================================
   PLACEMENT — THE ONLY THING THIS SITE DECIDES
   =========================================================================
   Everything above is the app's ring. This is where it goes and how big it is,
   which choreosync.css:8546 establishes is per-ring: "ONE RADIUS PER RING,
   DECLARED NEXT TO ITS DIAMETER."

   Modelled on the SPLASH ring (choreosync.css:9007), not the app's home hero
   ring — the home hero's is 230px pinned hard right inside a card, and this one
   is centred behind a phone. The splash's is the large, centred, viewport-sized
   case, which is exactly this case.

   ⚠ --cs-ring-orbit MUST STAY HALF THE DIAMETER. It is the radius the glints
   ride; the app's file says a wrong value parks them floating inside the band.
   A calc, because the diameter is viewport-relative here as the splash's is.

   ⚠ THE DIAMETER CLEARS THE PHONE'S HEIGHT, NOT ITS WIDTH. .cs-flow-f is
   min(78vh, 715px) tall and roughly 0.46 of that wide. Size the ring to the
   width and its top and bottom arcs pass behind the screen, so the glints spend
   most of the orbit hidden and surface at the sides looking like a fault.
   Re-derive this whenever the phone is resized — the two numbers are linked.

   ⚠ --cs-ring-k SCALES THE BLOOM AND DOES NOT COME FREE WITH THE SIZE. The app
   sets 0.45 for its 230px hero (choreosync.css:8884); the radii it multiplies
   are absolute, so a ring three times that diameter needs its light scaled back
   up or the halo reads as a thin outline. 1 is the file's own baseline, tuned
   for a large ring.

   ⚠ BEHIND THE DEVICE. z-index 1: above .cs-rays (0), below .cs-hero-screen (2).
   The rule for this whole family is that light goes behind product art. */
.cs-hero-stage .cs-hero-ring.cs-sheet-icon.cs-sheet-glyph {
  position: absolute;
  z-index: 1;
  top: 47%;              /* concentric with .cs-hero-screen, which sits at 47% */
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  width:  min(82vh, 755px);
  height: min(82vh, 755px);
  --cs-ring-orbit: calc(min(82vh, 755px) / 2);
  --cs-ring-k: 1;
  flex: none;

  opacity: 0.75;         /* the splash's own value */
  pointer-events: none;
}

@media (max-width: 991px) {
  .cs-hero-stage .cs-hero-ring.cs-sheet-icon.cs-sheet-glyph {
    width:  min(70vh, 595px);
    height: min(70vh, 595px);
    --cs-ring-orbit: calc(min(70vh, 595px) / 2);
    --cs-ring-k: 0.8;
  }
}
@media (max-width: 575px) {
  .cs-hero-stage .cs-hero-ring.cs-sheet-icon.cs-sheet-glyph {
    width:  min(64vh, 505px);
    height: min(64vh, 505px);
    --cs-ring-orbit: calc(min(64vh, 505px) / 2);
    --cs-ring-k: 0.6;
    opacity: 0.6;
  }
}

/* ---- ONE NEUTRALISER, AND IT IS NOT COSMETIC -------------------------------
   cs-stage.css defines a bare `.cs-ring-glint` (0,1,0) — the RAIL's simpler
   glint, from the older port — and it paints `filter: blur(3.2px)` on the glint
   ELEMENT itself.

   The app's glint does not work that way. Its element is `background:
   transparent` and it draws itself entirely in two pseudo-elements: ::before is
   the halo and carries its own `blur(var(--cs-glint-blur))`, and ::after is a
   SHARP white core that says `filter: none` in as many words. A filter on the
   parent applies to both children, so the rail's blur smears the core and the
   ring loses the two bright points that are the whole object.

   ⚠ THIS IS THE ONLY DECLARATION THAT LEAKS. Everything else the rail's base
   sets — background, position, z-index, radius — is restated by a ported rule at
   (0,2,0) and already loses. `filter` is the one the app never restates on the
   element, because in the app nothing was setting it. Do not "simplify" this
   away, and do not fix it by editing the rail's rule: the rail's glints need
   their blur, they just are not these glints.

   ⚠ ALSO WHY mix-blend-mode: screen ON THE HALO SURVIVES. A filter on the parent
   would give it its own isolation context and the halo would stop blending with
   the ring behind it. */
.cs-hero-ring .cs-ring-glint { filter: none; }