/* Carousels & galleries demos. Every rule is scoped under a .cr-* class. */

/* shared slide "photos": sky gradient, a sun (::before) and a land silhouette (::after) */
.cr-art { position: relative; margin: 0; overflow: hidden; background: linear-gradient(var(--s1), var(--s2)); }
.cr-art::before {
  content: ""; position: absolute; left: var(--sx, 62%); top: var(--sy, 16%); width: var(--sw, 18%); aspect-ratio: 1; border-radius: 50%;
  background: var(--sun); box-shadow: 0 0 0 0.35em color-mix(in srgb, var(--sun) 28%, transparent);
}
.cr-art::after { content: ""; position: absolute; inset: 0; background: var(--land); clip-path: var(--shape, none); }
.cr-a1 { --s1: #ffb4a2; --s2: #7b5cff; --sun: #fff1c9; --land: #2a1f5c;
  --shape: polygon(0 100%, 0 70%, 16% 46%, 30% 64%, 50% 34%, 70% 66%, 86% 52%, 100% 64%, 100% 100%); }
.cr-a2 { --s1: #ffd38a; --s2: #ff8f6b; --sun: #fff6d8; --sx: 18%; --land: linear-gradient(#e0782a, #b45309);
  --shape: polygon(0 100%, 0 70%, 14% 64%, 30% 62%, 46% 68%, 62% 76%, 78% 66%, 100% 58%, 100% 100%); }
.cr-a3 { --s1: #6fc2f2; --s2: #d6f0ff; --sun: #fff3b0; --sx: 72%; --land: linear-gradient(transparent 58%, #1d5fa0 58% 76%, #c9a066 76%); }
.cr-a4 { --s1: #0b1d3a; --s2: #1b5f63; --sun: #eaf6ff; --sx: 74%; --sy: 12%; --sw: 9%; --land: #071120;
  --shape: polygon(0 100%, 0 78%, 8% 60%, 14% 78%, 24% 54%, 33% 78%, 44% 62%, 53% 80%, 66% 56%, 77% 78%, 88% 62%, 100% 76%, 100% 100%); }
.cr-a5 { --s1: #ff9a8b; --s2: #4b2a7b; --sun: #ffd6a8; --sx: 26%; --sy: 24%; --land: #1a1433;
  --shape: polygon(0 100%, 0 70%, 10% 70%, 10% 54%, 20% 54%, 20% 64%, 30% 64%, 30% 42%, 40% 42%, 40% 72%, 52% 72%, 52% 50%, 62% 50%, 62% 60%, 74% 60%, 74% 38%, 84% 38%, 84% 66%, 100% 66%, 100% 100%); }
.cr-a6 { --s1: #bfe7ff; --s2: #fff4d6; --sun: #fff1b0; --sx: 66%; --land: linear-gradient(#86c552, #3d7f2a);
  --shape: polygon(0 100%, 0 66%, 12% 60%, 26% 58%, 40% 64%, 54% 70%, 68% 62%, 82% 56%, 100% 60%, 100% 100%); }

.cr-cap { position: absolute; z-index: 1; left: 12px; bottom: 10px; margin: 0; display: grid; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.55), 0 0 14px rgb(0 0 0 / 0.45); text-align: left; }
.cr-cap b { font-size: 14px; font-weight: 750; }
.cr-cap span { font-size: 11.5px; opacity: 0.9; }
.cr-tag {
  position: absolute; z-index: 3; top: 10px; left: 12px; font: 500 10.5px var(--f-mono); padding: 3px 8px; border-radius: 999px;
  background: var(--stage-card); color: var(--stage-ink); border: 1px solid var(--stage-line);
}
.cr-dots { display: flex; justify-content: center; }
.cr-dots button { width: 18px; height: 18px; padding: 0; border: 0; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.cr-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.35; transition: width 0.3s, opacity 0.3s; }
.cr-dots button[aria-current]::before { width: 16px; opacity: 1; }
.cr-arrow {
  position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / 0.92); color: #1f2440; box-shadow: 0 2px 10px rgb(0 0 0 / 0.22); cursor: pointer;
}
.cr-arrow svg { width: 16px; height: 16px; }
.cr-prev { left: 8px; }
.cr-next { right: 8px; }

/* carousel */
.cr-basic { position: absolute; inset: 12px 12px 6px; display: grid; grid-template-rows: 1fr auto; gap: 4px; color: var(--stage-ink); }
.cr-basic-view { position: relative; overflow: hidden; border-radius: 12px; touch-action: pan-y; }
.cr-basic-track { display: flex; height: 100%; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); }
.cr-basic-track > .cr-art { flex: 0 0 100%; }

/* scroll-snap carousel */
.cr-snap { position: absolute; inset: 12px 0 38px; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.cr-snap-h { margin: 0 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-snap-h b { font-size: 15px; white-space: nowrap; }
@container (max-width: 440px) { .cr-snap-h span { display: none; } }
.cr-snap-h span { font: 500 10.5px var(--f-mono); opacity: 0.7; }
.cr-snap-row {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 0 14px 2px;
  scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 4px;
}
.cr-snap-row::-webkit-scrollbar { display: none; }
.cr-snap-card { flex: 0 0 40%; min-width: 128px; margin: 0; scroll-snap-align: start; display: grid; grid-template-rows: 1fr auto; gap: 6px; }
.cr-snap-card .cr-art { border-radius: 10px; }
.cr-snap-card figcaption { display: grid; }
.cr-snap-card b { font-size: 13px; }
.cr-snap-card span { font-size: 11.5px; opacity: 0.7; }

/* peek carousel */
.cr-peek { position: absolute; inset: 0 0 38px; }
.cr-peek-view { position: absolute; inset: 42px 0 0; overflow: hidden; touch-action: pan-y; }
.cr-peek-track { position: relative; display: flex; gap: 12px; height: 100%; padding-inline: 12px; transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.cr-peek-slide { flex: 0 0 80%; border-radius: 12px; cursor: pointer; }

/* center-mode carousel */
.cr-center { position: absolute; inset: 14px 0 40px; }
.cr-center-view { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.cr-center-track { position: relative; display: flex; height: 100%; transition: transform 0.45s ease-out; }
.cr-center-slide { flex: 0 0 56%; border-radius: 12px; scale: 0.84; opacity: 0.45; cursor: pointer; transition: scale 0.45s ease-out, opacity 0.45s ease-out; }
.cr-center-slide.is-active { scale: 1; opacity: 1; cursor: default; }

/* coverflow */
.cr-cf { position: absolute; inset: 0; perspective: 800px; outline: none; }
.cr-cf-row { position: absolute; inset: 0; transform-style: preserve-3d; }
.cr-cf-item {
  position: absolute; left: 50%; top: 42%; width: 30cqi; max-width: 56%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px;
  background: var(--g); cursor: pointer; display: grid; align-items: end; justify-items: start;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5); transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s;
  -webkit-box-reflect: below 2px linear-gradient(transparent 64%, rgb(255 255 255 / 0.22));
}
.cr-cf-item span { padding: 8px; font-size: 12px; font-weight: 800; color: #fff; text-align: left; line-height: 1.1; text-shadow: 0 1px 6px rgb(0 0 0 / 0.4); }
.cr-cf-cap { position: absolute; right: 14px; bottom: 10px; margin: 0; display: grid; text-align: right; color: #e9ebf7; }
.cr-cf-cap b { font-size: 14px; }
.cr-cf-cap span { font-size: 11.5px; opacity: 0.7; }

/* card stack */
.cr-cs { position: absolute; inset: 14px 16px 34px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.cr-cs-deck { position: relative; isolation: isolate; width: 44cqi; max-width: 60%; height: 100%; touch-action: none; }
.cr-cs-card {
  position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 34px); padding: 7px; border-radius: 14px;
  display: grid; grid-template-rows: 1fr auto; gap: 6px; background: var(--stage-card); box-shadow: 0 6px 18px rgb(20 24 60 / 0.2);
  transform: translateX(var(--x, 0px)) translateY(calc(var(--pos) * 11px)) rotate(var(--r, 0deg)) scale(calc(1 - var(--pos) * 0.06));
  transform-origin: 50% 100%; transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.38s; user-select: none; cursor: grab;
}
.cr-cs-card .cr-art { border-radius: 9px; pointer-events: none; }
.cr-cs-card p { margin: 0 4px 2px; display: grid; }
.cr-cs-card b { font-size: 14px; }
.cr-cs-card span { font-size: 11.5px; opacity: 0.7; }
.cr-cs-card.is-drag { transition: none; cursor: grabbing; }
.cr-cs-card.is-gone { opacity: 0 !important; }
.cr-cs-card.is-reset { transition: none; }
.cr-cs-btns { display: grid; gap: 8px; }
.cr-cs-btns button {
  font: 650 12.5px var(--f-display); padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stage-line); background: var(--stage-card); color: var(--stage-ink);
}
.cr-cs-btns .cr-cs-yes { background: var(--d-violet); border-color: var(--d-violet); color: #fff; }

/* fade carousel */
.cr-fade { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.cr-fade-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease-in-out; }
.cr-fade-slide.is-on { opacity: 1; }
.cr-fade-cap {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 48px 142px 14px 16px; display: grid; gap: 2px; color: #fff;
  background: linear-gradient(transparent, rgb(10 10 30 / 0.6)); text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}
.cr-fade-cap span { font-size: 11.5px; opacity: 0.85; }
.cr-fade-cap b { font-size: clamp(17px, 6cqi, 25px); font-weight: 800; font-stretch: 108%; line-height: 1.08; letter-spacing: -0.01em; }
.cr-fade-ui { position: absolute; z-index: 100000; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 6px; color: #fff; }
.cr-fade-pause {
  font: 600 11px var(--f-display); padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgb(255 255 255 / 0.6); background: rgb(0 0 0 / 0.25); color: #fff;
}

/* cube carousel */
.cr-cube-wrap { position: absolute; inset: 0 0 30px; perspective: 1000px; display: grid; place-items: center; }
.cr-cube {
  position: relative; width: 54cqi; height: 34cqi; transform-style: preserve-3d;
  transform: translateZ(-27cqi) rotateY(calc(var(--i, 0) * -90deg)); transition: transform 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}
.cr-cube-face { position: absolute; inset: 0; border-radius: 4px; transform: rotateY(calc(var(--n) * 90deg)) translateZ(27cqi); backface-visibility: hidden; }

/* ring carousel */
.cr-ring { position: absolute; inset: 0; perspective: 1000px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.cr-ring:active { cursor: grabbing; }
.cr-ring-spin { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-8deg); }
.cr-ring-card {
  position: absolute; left: 0; top: 0; width: 17cqi; aspect-ratio: 3 / 4; padding: 6px; border-radius: 8px; background: var(--g);
  display: grid; align-items: end; box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
}
.cr-ring-card span { font-size: 10px; font-weight: 750; line-height: 1.1; color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / 0.4); }

/* marquee */
.cr-mq { width: 100%; display: grid; gap: 14px; padding-bottom: 24px; }
.cr-mq-k { margin: 0; text-align: center; font: 500 11.5px var(--f-mono); opacity: 0.7; }
.cr-mq-row { overflow: hidden; -webkit-mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.cr-mq-move { display: flex; width: max-content; animation: cr-mq 22s linear infinite; }
.cr-mq-rev .cr-mq-move { animation-direction: reverse; animation-duration: 28s; }
.cr-mq-row:hover .cr-mq-move { animation-play-state: paused; }
.cr-mq-set { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.cr-mq-logo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 19px; line-height: 1; color: var(--stage-ink); opacity: 0.8; }
.cr-l1 { font-weight: 800; font-style: italic; letter-spacing: -0.02em; }
.cr-l2 { font-weight: 300; letter-spacing: 0.12em; font-stretch: 125%; }
.cr-l3 { font-weight: 900; font-stretch: 62%; letter-spacing: 0.16em; font-size: 18px; }
.cr-l4 { font-family: var(--f-body); font-style: italic; font-size: 22px; }
.cr-l5 { font-family: var(--f-mono); font-weight: 600; font-size: 16px; }
.cr-l6 { font-weight: 700; }
.cr-l6::before { content: ""; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: currentColor; }
.cr-l7 { font-weight: 600; font-stretch: 112%; }
.cr-l7::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid currentColor; }
.cr-l8 { font-weight: 500; letter-spacing: 0.3em; font-size: 15px; }
@keyframes cr-mq { to { transform: translateX(-50%); } }

/* thumbnail carousel */
.cr-th { position: absolute; inset: 12px 12px 38px; display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.cr-th-main { position: relative; overflow: hidden; border-radius: 10px; isolation: isolate; }
.cr-th-img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.cr-th-img.is-on { opacity: 1; }
.cr-th-strip { display: flex; justify-content: center; gap: 6px; }
.cr-th-thumb { width: 15%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 6px; cursor: pointer; opacity: 0.5; transition: opacity 0.2s; }
.cr-th-thumb:hover { opacity: 0.8; }
.cr-th-thumb[aria-current] { opacity: 1; outline: 2px solid var(--stage-ink); outline-offset: 2px; }

/* stories */
.cr-st { position: absolute; inset: 10px 14px 36px; display: flex; align-items: center; justify-content: center; gap: 22px; }
.cr-st-phone { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); user-select: none; touch-action: manipulation; }
.cr-st-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; }
.cr-st-slide.is-on { opacity: 1; }
.cr-st-slide p { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 12px; margin: 0; color: #fff; font-size: 12.5px; font-weight: 750; line-height: 1.2; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.cr-st-bars { position: absolute; z-index: 2; top: 7px; left: 7px; right: 7px; display: flex; gap: 3px; }
.cr-st-bars i { flex: 1; height: 2.5px; border-radius: 2px; overflow: hidden; background: rgb(255 255 255 / 0.4); }
.cr-st-bars b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.cr-st-who { position: absolute; z-index: 2; top: 15px; left: 8px; display: flex; align-items: center; gap: 5px; color: #fff; font-size: 10.5px; text-shadow: 0 1px 4px rgb(0 0 0 / 0.5); }
.cr-st-who i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--d-amber), var(--d-pink)); border: 1.5px solid #fff; }
.cr-st-who span { opacity: 0.75; }
.cr-st-back, .cr-st-next { position: absolute; z-index: 3; top: 0; bottom: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.cr-st-back { left: 0; width: 30%; }
.cr-st-next { left: 30%; right: 0; }
.cr-st-back:focus-visible, .cr-st-next:focus-visible { outline-offset: -3px; }
.cr-st-phone.is-held .cr-st-bars { opacity: 0.5; }
.cr-st-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 500 11.5px var(--f-mono); }
.cr-st-legend b { display: block; font: 700 13px var(--f-display); }

/* Ken Burns */
.cr-kb { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.cr-kb .cr-tag { z-index: 100000; }
.cr-kb-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.2s ease-in-out; }
.cr-kb-slide.is-on { opacity: 1; }
.cr-kb-img { position: absolute; inset: 0; transform-origin: var(--ox) var(--oy); }
.cr-kb-slide.is-on .cr-kb-img { animation: cr-kb 6s linear both; }
.cr-kb-slide:nth-child(1) .cr-kb-img { --ox: 30%; --oy: 40%; --tx: -3%; --ty: 1.5%; }
.cr-kb-slide:nth-child(2) .cr-kb-img { --ox: 70%; --oy: 60%; --tx: 3%; --ty: -1.5%; }
.cr-kb-slide:nth-child(3) .cr-kb-img { --ox: 50%; --oy: 25%; --tx: 0%; --ty: 3%; }
@keyframes cr-kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.18) translate(var(--tx), var(--ty)); } }

/* expanding panels */
.cr-xp { position: absolute; inset: 12px 12px 38px; display: flex; gap: 6px; }
.cr-xp-p { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 12px; font: inherit; color: #fff; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.cr-xp-p.is-active { flex: 5; }
.cr-xp:hover .cr-xp-p.is-active { flex: 1; }
.cr-xp .cr-xp-p:hover { flex: 5; }
.cr-xp-v, .cr-xp-cap { position: absolute; z-index: 1; white-space: nowrap; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); transition: opacity 0.3s; }
.cr-xp-v { left: 50%; bottom: 10px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: 11.5px; font-weight: 700; }
.cr-xp-cap { left: 12px; bottom: 10px; display: grid; text-align: left; font-size: 11.5px; opacity: 0; }
.cr-xp-cap b { font-size: 15px; }
.cr-xp-p.is-active .cr-xp-cap { opacity: 1; }
.cr-xp-p.is-active .cr-xp-v { opacity: 0; }
.cr-xp:hover .cr-xp-p .cr-xp-cap { opacity: 0; }
.cr-xp:hover .cr-xp-p .cr-xp-v { opacity: 1; }
.cr-xp .cr-xp-p:hover .cr-xp-cap { opacity: 1; }
.cr-xp .cr-xp-p:hover .cr-xp-v { opacity: 0; }

/* before/after slider */
.cr-ba { position: absolute; inset: 12px 12px 38px; overflow: hidden; border-radius: 12px; }
.cr-ba-img { position: absolute; inset: 0; filter: saturate(1.25); }
.cr-ba-before { filter: grayscale(0.9) contrast(0.82) brightness(1.08); clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cr-ba-lab { position: absolute; z-index: 2; bottom: 10px; font: 600 11px var(--f-mono); padding: 3px 8px; border-radius: 999px; background: rgb(0 0 0 / 0.45); color: #fff; pointer-events: none; }
.cr-ba-l { left: 10px; }
.cr-ba-r { right: 10px; }
.cr-ba-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgb(0 0 0 / 0.3); pointer-events: none; }
.cr-ba-line i { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #1f2440; box-shadow: 0 2px 10px rgb(0 0 0 / 0.3); }
.cr-ba-line svg { width: 12px; height: 12px; }
.cr-ba input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cr-ba:has(input:focus-visible) .cr-ba-line i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* lightbox */
.cr-lb { position: absolute; inset: 0; }
.cr-lb-grid { position: absolute; inset: 12px 12px 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cr-lb-thumb { padding: 0; border: 0; border-radius: 8px; cursor: zoom-in; }
.cr-lb-box {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 8px;
  background: rgb(8 9 20 / 0.9); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
}
.cr-lb-box.is-open { opacity: 1; visibility: visible; }
.cr-lb-img { width: 58%; aspect-ratio: 16 / 10; border-radius: 6px; scale: 0.9; transition: scale 0.3s cubic-bezier(0.3, 0.7, 0.2, 1); }
.cr-lb-box.is-open .cr-lb-img { scale: 1; }
.cr-lb-cap { margin: 0; display: flex; gap: 10px; align-items: baseline; color: #fff; font-size: 12.5px; }
.cr-lb-cap span { font: 500 11px var(--f-mono); opacity: 0.7; }
.cr-lb-close { position: absolute; top: 8px; right: 46px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer; }
.cr-lb-close svg { width: 14px; height: 14px; }

/* page indicator */
.cr-pi { width: 100%; max-width: 360px; padding: 0 16px; display: grid; gap: 13px; }
.cr-pi-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 18px; }
.cr-pi-row > span { font: 500 11px var(--f-mono); text-align: right; opacity: 0.7; }
.cr-pi-dots { display: flex; align-items: center; gap: 6px; }
.cr-pi-dots i { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--stage-ink); opacity: 0.25; transition: width 0.3s, opacity 0.3s, background-color 0.3s, scale 0.3s; }
.cr-pi-dots i.is-on { opacity: 1; background: var(--d-violet); }
.cr-pi-pill i.is-on { width: 24px; }
.cr-pi-win { width: 64px; overflow: hidden; }
.cr-pi-dyn { transform: translateX(calc((2 - var(--i, 0)) * 14px)); transition: transform 0.3s; }
.cr-pi-dyn i { scale: max(0.25, calc(1 - var(--d, 0) * 0.3)); }
.cr-pi-frac { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-pi-frac b { color: var(--d-violet); }
.cr-pi-bar { max-width: 180px; height: 4px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--stage-ink) 15%, transparent); }
.cr-pi-bar i { display: block; height: 100%; background: var(--d-violet); transform: scaleX(0.125); transform-origin: left; transition: transform 0.3s; }