/* generated by tools/markers-css.py from website-v2/assets/site.css; do not edit by hand */
.alt { --paper: #ffffff; --paper2: #f7f7f7; --ink: #0b0b0b; --ink2: #4d4d4d; --ink3: #8f8f8f; --line: rgba(0, 0, 0, .14); --line2: rgba(0, 0, 0, .08); --focus: #006FEE; --ease: cubic-bezier(.2, .8, .2, 1); --sans: 'Sora', system-ui, sans-serif; }
/* the markers that ride the piece: one on the shank, one on the centre stone */
.alt .spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.alt .spots[hidden] { display: none; }
.alt .leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.alt .lead { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 5; transition: opacity .3s ease; }
.alt .lead-seed { fill: var(--ink); transition: opacity .3s ease; }
.alt .spot { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .35s ease, transform .18s ease; will-change: transform; }
.alt .spot.is-on { opacity: 1; }
.alt .spot:hover, .alt .spot:focus-visible { transform: scale(1.1); }
.alt .spot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 50%; }
.alt .spot i { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, var(--ink) 29% 100%); border: 1.5px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 3px rgba(11, 11, 11, .1); }
.alt .spot::before, .alt .spot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; animation: spot-pulse 2.6s ease-out infinite; }
.alt .spot::before { animation-delay: 1.3s; }
@keyframes spot-pulse { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
.alt .spot.is-open::before, .alt .spot.is-open::after { animation: none; opacity: 0; }
.alt .spot.is-open i { background: radial-gradient(circle, var(--ink) 0 24%, #fff 29% 100%); border-color: var(--ink); }
.alt .pop { position: absolute; left: 0; top: 0; display: none; pointer-events: auto; transform: translate(-50%, -50%) scale(.94); transform-origin: center; padding: 7px 10px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.alt .pop.is-open { display: flex; align-items: center; gap: 4px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.alt .pop-name { display: none; }
.alt .pop-name b { font-weight: 600; color: var(--ink); }
/* a marker with two rows becomes a small card: one labelled row of chips per choice */
.alt .pop { padding: 6px 8px; }
.alt .pop.pop--card { border-radius: 18px; padding: 6px 8px; }
.alt .pop.pop--card.is-open { flex-direction: column; align-items: center; gap: 2px; }
.alt .prow { display: flex; align-items: center; justify-content: center; gap: 2px; }
.alt .hero3d:not(.retail) .prow[data-retail], .alt .hero3d:not(.retail) .spot[data-retail], .alt .hero3d:not(.retail) .pop[data-retail] { display: none; }
.alt .hero3d.retail .prow[data-retail] { border-top: 1px solid var(--line2); padding-top: 4px; width: 100%; }
/* the part icons are pale renders on light grey, so the geometry chips are larger, zoomed in and a touch harder */
.alt .chip3d.chip3d--geo { width: 48px; height: 48px; }
.alt .chip3d.chip3d--geo i { background: var(--paper); border: 1px solid var(--line2); width: 42px; height: 42px; box-shadow: none; display: grid; place-items: center; color: #767676; }
.alt .chip3d.chip3d--geo i svg { width: 44px; height: 44px; display: block; }
.alt .chip3d.chip3d--geo i svg [stroke] { stroke-width: .75; }
.alt .chip3d.chip3d--geo[aria-checked="true"] i { color: var(--ink); }
.alt .chip3d.chip3d--geo[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.alt .chip3d.chip3d--geo[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.alt .hero3d.is-busy .chip3d { opacity: .55; pointer-events: none; }
.alt .hero3d.is-busy .ring-status { opacity: 1; }
.alt .chip3d { width: 32px; height: 32px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.alt .chip3d i { display: block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 70% 72%, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 34% 28%, var(--a) 0%, var(--b) 44%, var(--c) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.alt .chip3d:hover i { transform: scale(1.1); }
.alt .chip3d[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.alt .chip3d:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 50%; }
/* the swatch rows under the canvas: the state, shown only while the markers are not running */
.alt .ring-ui { display: grid; gap: 4px; padding: 14px 0 0; }
.alt .spots-live .ring-ui { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; margin: -1px; }
/* the configurator heroes' markers (bubbles.js): named rows, text chips for sizes */
.alt .chip3d:disabled { opacity: .35; cursor: not-allowed; }
.alt .cfgl.is-busy .chip3d { opacity: .55; pointer-events: none; }
.alt .chip3d.chip3d--geo i img { width: 40px; height: 40px; object-fit: contain; display: block; }
.alt .hero3d--cfg .ring { background: transparent; }
/* ---------- twentieth pass (2026-10-04): a marker card's rows on one column grid ----------
   The card's rows were centred one by one, and the metal chips (32 px) are narrower than the shank and shape chips
   (48 px), so the columns did not line up. Every row now uses 48 px columns from the card's left edge: a metal sits
   above a shank, a stone above a shape. */
.alt .pop.pop--card:not(.pop--named).is-open { align-items: stretch; gap: 4px; padding: 8px 10px; }
.alt .pop.pop--card:not(.pop--named) .prow { display: grid; grid-auto-flow: column; grid-auto-columns: 48px; justify-content: start; justify-items: center; align-items: center; gap: 4px; width: 100%; }
.alt .pop.pop--card:not(.pop--named) .chip3d:not(.chip3d--geo) { width: 44px; height: 44px; }
.alt .pop.pop--card:not(.pop--named) .chip3d:not(.chip3d--geo) i { width: 28px; height: 28px; }
.alt .pop.pop--card .prow[hidden], .alt .hero3d:not(.retail) .pop.pop--card .prow[data-retail] { display: none; }
/* ---------- twenty-second pass (2026-10-04): the Wedding Band Builder's X-ray markers (xray.js) ----------
   Twenty-seventh pass (2026-10-05): black and white ("make the style Black and white"): black glass at half opacity,
   white lines, no blue; metals as filled discs.
   Prashant: "Let the popup UI be 50% transparent ... Try X ray kind of style", icons instead of words, nothing on the
   band, and motion when it opens. Dark glass at half opacity with a faint film grid; every icon is a bright line on a
   faint body (class xf), as on a radiograph. The card is a narrow rail beside the band (the band slides to make room);
   it opens top to bottom behind a scan line, and its chips come in one after another. While the band rebuilds, the
   scan line runs on. */
.alt .xr { --xr-ink: #ffffff; --xr-dim: rgba(255, 255, 255, .86); --xr-glow: rgba(255, 255, 255, .3); --xr-line: rgba(255, 255, 255, .34); }
.alt .xr svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.alt .xr svg .xf { fill: currentColor; fill-opacity: .24; }
.alt .xr svg .t { stroke-width: 1; opacity: .85; }
.alt .xr svg .dots circle, .alt .xr svg .dot { fill: currentColor; stroke: none; }
.alt .xr-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.alt .xr-lead { fill: none; stroke: #161616; stroke-opacity: .62; stroke-width: 1.4; stroke-dasharray: 1.5 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s ease; }
.alt .xr-seed { fill: #161616; stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; transition: opacity .3s ease; }

/* the markers: a glass disc with the icon of what it changes */
.alt .xr-spot { position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--xr-ink); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 8px 20px -8px rgba(0, 0, 0, .55); opacity: 0; transform: scale(.4);
  transition: opacity .45s ease calc(var(--i, 0) * 90ms), transform .55s cubic-bezier(.2, .9, .25, 1.15) calc(var(--i, 0) * 90ms), box-shadow .2s ease, background-color .2s ease; }
.alt .xr-spot svg { width: 20px; height: 20px; filter: drop-shadow(0 0 2px var(--xr-glow)); }
.alt .xr-spot svg.wide { width: 26px; height: 11px; }
.alt .xr-spot.is-on { opacity: 1; transform: none; }
.alt .xr-spot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); opacity: 0; animation: xr-ping 2.8s ease-out infinite calc(1.2s + var(--i, 0) * .4s); pointer-events: none; }
.alt .xr-spot:hover, .alt .xr-spot:focus-visible { background: rgba(24, 24, 24, .62); box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 0 18px rgba(255, 255, 255, .45); }
.alt .xr-spot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.alt .xr-spot.is-open { background: rgba(255, 255, 255, .28); border-color: var(--xr-ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2), 0 0 20px rgba(255, 255, 255, .55); }
.alt .xr-spot.is-open::after, .alt .xr.has-open .xr-spot::after { animation: none; }
.alt .xr-spot.is-dim { opacity: .38; }
.alt .xr-spot.is-dim:hover { opacity: .9; }
@keyframes xr-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* the card */
.alt .xr-card { position: absolute; left: 0; top: 0; z-index: 4; padding: 8px; border-radius: 16px; color: var(--xr-ink); pointer-events: auto;
  background-color: rgba(0, 0, 0, .5);
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 8px 8px; -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--xr-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 26px rgba(255, 255, 255, .1), 0 22px 44px -22px rgba(0, 0, 0, .6);
  visibility: hidden; opacity: 0; transform: translateX(calc(var(--dir, -1) * -10px)) scale(.97); transform-origin: right 22px;
  clip-path: inset(0 0 100% 0);
  transition: opacity .22s ease, transform .3s ease, clip-path .3s ease, visibility 0s linear .3s; }
.alt .xr-card--r { transform-origin: left 22px; }
.alt .xr-card--b { transform-origin: center top; }
/* a phone (twenty-fifth pass): no room beside the band and the canvas stays put, so the rail lies flat under it */
.alt .xr-card--strip { max-width: calc(100vw - 32px); }
.alt .xr-card--strip .xr-body { flex-direction: column; align-items: stretch; gap: 8px; }
.alt .xr-card--strip .xr-rail { flex-direction: row; justify-content: center; padding: 0 0 6px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.alt .xr-card--strip .xr-opts { display: flex; justify-content: center; }
.alt .xr-card--strip .xr-col { flex-direction: row; justify-content: flex-start; }
.alt .xr-card--strip .xr-head { width: 150px; min-width: 0; margin: 0 auto 8px; }
.alt .xr-card--strip .xr-chip--wide { width: 68px; }
.alt .xr-card.xr-card--strip .xr-label { position: static; left: auto; right: auto; transform: none; margin: 0 0 8px; padding: 0 0 7px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; white-space: normal; }
.alt .xr-card.is-open { visibility: visible; opacity: 1; transform: none; clip-path: inset(-48px -320px -48px -320px);  /* open: the label above and the tip below show too */
  transition: opacity .25s ease, transform .5s cubic-bezier(.2, .9, .2, 1), clip-path .6s cubic-bezier(.2, .85, .2, 1), visibility 0s; }
.alt .xr-card::after { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); box-shadow: 0 0 12px 2px rgba(255, 255, 255, .6); }
.alt .xr-card.is-open::after { animation: xr-scan .7s cubic-bezier(.3, .7, .2, 1) .04s 1 both; }
.alt .xr-card.is-open.is-busy::after { animation: xr-scan 1.05s ease-in-out infinite; }
@keyframes xr-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

.alt .xr-body { display: flex; gap: 6px; align-items: flex-start; }
/* twenty-fifth pass: one line naming what the band shows now, in a pill over the rail (the rail stays narrow) */
.alt .xr-label { position: absolute; bottom: calc(100% + 6px); left: 0; margin: 0; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--xr-line); font: 600 .6875rem/1.2 var(--sans); letter-spacing: .02em; color: var(--xr-ink); white-space: nowrap; pointer-events: none; }
.alt .xr-card--r .xr-label { left: auto; right: 0; }
.alt .xr-card--b .xr-label { left: 50%; transform: translateX(-50%); }
.alt .xr-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.alt .xr-col[hidden], .alt .xr-tab[hidden], .alt .xr-panel[hidden] { display: none; }
.alt .xr-colh { display: grid; place-items: center; width: 40px; height: 28px; color: var(--xr-dim); }
.alt .xr-colh svg { width: 22px; height: 22px; }
.alt .xr-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), auto); gap: 3px; justify-items: center; }
.alt .xr-rail { display: flex; flex-direction: column; gap: 3px; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, .16); }
.alt .xr-opts { min-width: 30px; }

.alt .xr-chip, .alt .xr-tab { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--xr-dim); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.alt .xr-chip svg, .alt .xr-tab svg { width: 24px; height: 24px; }
.alt .xr-chip--wide { width: 72px; height: 36px; }
.alt .xr-chip--wide svg { width: 60px; height: 23px; }
.alt .xr-chip--txt { width: 40px; height: 30px; font: 600 .8125rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.alt .xr-chip:hover, .alt .xr-tab:hover { color: var(--xr-ink); background: rgba(255, 255, 255, .1); }
.alt .xr-chip:hover svg, .alt .xr-tab:hover svg, .alt .xr-chip[aria-checked="true"] svg, .alt .xr-tab[aria-selected="true"] svg { filter: drop-shadow(0 0 2.5px var(--xr-glow)); }
.alt .xr-chip[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 0 14px rgba(255, 255, 255, .32); }
.alt .xr-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.alt .xr-chip:focus-visible, .alt .xr-tab:focus-visible, .alt .xr-sec:focus-visible { outline: 2px solid var(--xr-ink); outline-offset: 1px; }
.alt .xr-chip:disabled { opacity: .28; cursor: not-allowed; background: none; box-shadow: none; }
.alt .xr-ring { display: block; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--a), var(--b) 55%, var(--c)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); opacity: .92; }  /* twenty-seventh pass: a filled disc, not a ring */
.alt .xr-chip--ring[aria-checked="true"] .xr-ring { opacity: 1; }
.alt .cfgl.is-busy .xr-chip, .alt .cfgl.is-busy .xr-sec { pointer-events: none; opacity: .55; }

/* the chips come in one after another: when the card opens, and when a tab changes */
.alt .xr-card.is-open .xr-chip, .alt .xr-card.is-open .xr-tab, .alt .xr-card.is-open .xr-colh { animation: xr-in .42s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(110ms + var(--i, 0) * 24ms); }
.alt .xr-card.is-open .xr-panel.is-on .xr-chip { animation-name: xr-in2; }
@keyframes xr-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes xr-in2 { from { opacity: 0; transform: translateX(-5px) scale(.92); } to { opacity: 1; transform: none; } }

/* the head of the metals card: the band's cross-section */
.alt .xr-head { position: relative; box-sizing: border-box; width: 0; min-width: 100%; margin: 0 0 8px; padding: 2px 2px 0; }  /* the body sets the width */
.alt .xr-head svg { width: 100%; height: auto; }
.alt .xr-head .xr-part { fill-opacity: .58; stroke: none; transition: fill-opacity .25s ease; }
.alt .xr-head .xr-part.is-sel { fill-opacity: .92; }
.alt .xr-head .xr-groove { stroke: rgba(0, 0, 0, .9); stroke-width: 1.3; }
.alt .xr-head .xr-outline { stroke: var(--xr-ink); stroke-width: 1; filter: drop-shadow(0 0 2px var(--xr-glow)); }
.alt .xr-head .xr-stone { fill: rgba(255, 255, 255, .5); stroke: #fff; stroke-width: .6; }
.alt .xr-head .xr-seat { stroke: var(--xr-ink); stroke-width: .7; fill: rgba(0, 0, 0, .55); }
.alt .xr-sec { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.alt .xr-sec[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--xr-ink); }
.alt .xr-sec:hover { background: rgba(255, 255, 255, .1); }

.alt .xr-foot { margin-top: 4px; text-align: center; font: 600 .5625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--xr-dim); }
.alt .xr-tip { position: absolute; left: 50%; top: calc(100% + 6px); padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: var(--xr-ink); font: 600 .625rem/1 var(--sans); letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -3px); transition: opacity .15s ease, transform .15s ease; }
.alt .xr-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .alt .xr-spot, .alt .xr-card, .alt .xr-card.is-open { transition: none; }
  .alt .xr-spot::after, .alt .xr-card::after, .alt .xr-card.is-open .xr-chip, .alt .xr-card.is-open .xr-tab, .alt .xr-card.is-open .xr-colh { animation: none !important; }
}

/* the glass landing's own look (Dasha, 19 Oct): every marker is an icon on a light, half-clear glass disc, as the hero viewer's
   markers, with no dot and no leader line; the choices sit on light glass, centred, the chosen one in the brand blue */
.alt .leads, .alt .xr-leads, .alt .xr-lead, .alt .xr-seed, .alt .spot::before, .alt .spot::after, .alt .xr-spot::after, .alt .xr-card::after { display: none; }
.alt .spot, .alt .xr-spot { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; color: #4a4858;  /* the hero viewer's own markers: 38 px, white glass, a small dark icon */
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(25, 24, 38, .14); }
.alt .spot:hover, .alt .spot:focus-visible, .alt .spot.is-open, .alt .xr-spot:hover, .alt .xr-spot:focus-visible, .alt .xr-spot.is-open {
  background: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .96); box-shadow: 0 0 0 4px rgba(110, 114, 242, .2), 0 10px 24px -10px rgba(25, 24, 38, .36); }
.alt .spot i, .alt .spot.is-open i { position: static; inset: auto; width: 24px; height: 24px; display: grid; place-items: center; background: none; border: 0; border-radius: 0; box-shadow: none; }
.alt .spot i svg { display: block; width: 24px; height: 24px; }
.alt .xr-spot svg { width: 18px; height: 18px; filter: none; stroke-width: 1.6; } .alt .xr-spot svg.wide { width: 22px; height: 10px; }
.alt .xr-spot svg *:not([fill="none"]) { fill: currentColor; fill-opacity: .22; } .alt .xr-spot svg * { stroke: currentColor; }  /* one dark line icon, as the viewer's markers: no metal colour on the disc */
.alt .pop, .alt .xr-card { background-color: rgba(255, 255, 255, .8); background-image: none; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .96); box-shadow: 0 22px 48px -20px rgba(25, 24, 38, .34); }
.alt .chip3d.chip3d--geo i { display: grid; place-items: center; overflow: hidden; background: rgba(255, 255, 255, .78); border: 1px solid rgba(25, 24, 38, .08); color: #6a6878; }
.alt .chip3d.chip3d--geo i svg { width: 32px; height: 32px; margin: 0; }
.alt .chip3d.chip3d--geo i img { width: 34px; height: 34px; margin: 0; border-radius: 50%; object-fit: cover; }
.alt .chip3d[aria-checked="true"] i, .alt .chip3d.chip3d--geo[aria-checked="true"] i { color: #191826; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #6E72F2; }
.alt .ring-ui { display: none; }  /* the configurator's swatch rows: hero-ring.js reads them, the markers show them */
.alt .xr { --xr-ink: #191826; --xr-dim: rgba(25, 24, 38, .6); --xr-glow: transparent; --xr-line: rgba(25, 24, 38, .1); }
.alt .xr-label, .alt .xr-tip { background: rgba(255, 255, 255, .94); color: #191826; border: 1px solid rgba(25, 24, 38, .08); }
.alt .xr-rail { border-right-color: rgba(25, 24, 38, .08); } .alt .xr-card--strip .xr-rail { border-bottom-color: rgba(25, 24, 38, .08); }
.alt .xr-chip:hover, .alt .xr-tab:hover, .alt .xr-sec:hover { background: rgba(25, 24, 38, .05); }
.alt .xr-chip:hover svg, .alt .xr-tab:hover svg, .alt .xr-chip[aria-checked="true"] svg, .alt .xr-tab[aria-selected="true"] svg { filter: none; }
.alt .xr-chip[aria-checked="true"] { color: #191826; background: rgba(110, 114, 242, .12); box-shadow: inset 0 0 0 1.5px #6E72F2; }
.alt .xr-tab[aria-selected="true"] { color: #191826; background: rgba(25, 24, 38, .05); box-shadow: inset 0 0 0 1px rgba(25, 24, 38, .16); }
.alt .xr-ring { box-shadow: inset 0 0 0 1px rgba(25, 24, 38, .14); }
.alt .xr-head .xr-outline { filter: none; stroke: #979797; stroke-width: .8; } .alt .xr-head .xr-stone { fill: rgba(25, 24, 38, .08); stroke: #979797; stroke-width: .5; }
/* the card's icons as the configurator's chips (Dasha, 20 Oct): each on a round white tile with a hairline, fine grey lines,
   the chosen one ringed in the brand blue; the profiles on a rounded tile; the metals as the configurator's own renders */
.alt .xr-card svg { stroke-width: 1; } .alt .xr-card svg .t { stroke-width: .7; } .alt .xr-card svg .xf { fill: #eeedf2; fill-opacity: 1; }
.alt .xr-chip, .alt .xr-tab, .alt .xr-colh { color: #979797; }
.alt .xr-chip { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px rgba(25, 24, 38, .08); }
.alt .xr-chip svg { width: 22px; height: 22px; }
.alt .xr-chip--wide { width: 72px; height: 36px; border-radius: 12px; } .alt .xr-chip--wide svg { width: 58px; height: 22px; }
.alt .xr-chip--txt { width: 42px; height: 30px; border-radius: 10px; font: 500 12px/1 'Sora', system-ui, sans-serif; color: #5e5c70; }
.alt .xr-chip:hover { color: #5e5c70; background: #fff; }
.alt .xr-chip[aria-checked="true"] { color: #5e5c70; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #6E72F2; }
.alt .xr-tab { border-radius: 10px; } .alt .xr-tab:hover { color: #5e5c70; }
.alt .xr-tab[aria-selected="true"] { color: #5e5c70; background: rgba(110, 114, 242, .1); box-shadow: none; }
.alt .xr-ring { width: 30px; height: 30px; opacity: 1; box-shadow: none; background-size: cover; background-position: center; }
.alt .xr-label { padding: 5px 11px; border: 0; border-radius: 999px; background: #fff; font: 500 11px/1.2 'Sora', system-ui, sans-serif; letter-spacing: 0; color: #191826;
  box-shadow: 0 6px 18px -8px rgba(25, 24, 38, .3); }