/* ============================================================================
 * Custom Donation Goal — стили конструктора
 * ----------------------------------------------------------------------------
 * Все значения (цвета, размеры, прозрачности, скорости) приходят из
 * config.custom через CSS-переменные и инлайн-стили — здесь только
 * «механика». Правка этого файла пользователю не нужна.
 *
 * Правила для OBS:
 *  • анимируются только transform и opacity (композитор, ~60 FPS);
 *  • blur-фильтры статичные (рисуются один раз), не анимируются;
 *  • backdrop-filter — только если включён в настройках «Настоящий
 *    backdrop-filter»; по умолчанию стекло имитируется своими слоями;
 *  • mix-blend-mode — только у украшений по выбору пользователя и только
 *    внутри изолированного контейнера (isolation: isolate), чтобы режим
 *    смешивался с самим виджетом, а не с прозрачным фоном OBS.
 * ========================================================================== */

/* страница виджета: прозрачная, без полос прокрутки (для OBS) */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
#widget-root { width: 100%; height: 100%; }

.cg {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
  -webkit-font-smoothing: antialiased;
}
.cg *, .cg *::before, .cg *::after { box-sizing: border-box; }
.cg-frame { position: relative; flex: none; transform-origin: 50% 50%; }
.cg-idle, .cg-fx { position: absolute; inset: 0; transform-origin: 50% 50%; }
.cg-layer { position: absolute; inset: 0; pointer-events: none; }
.cg-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }

/* непрерывность фазы зацикленных анимаций при перестройке (живое превью) */
.cg .cga { animation-delay: calc(var(--d, 0s) - var(--clock, 0s)) !important; }

/* мгновенная установка уровня (без «наливания» при каждом изменении в превью) */
.cg.cg-instant .cg-move, .cg.cg-instant .cg-body { transition: none !important; }

/* ============================================================================
 *  ПРОГРЕСС: заливка внутри формы и отдельная полоса
 *  .cg-move  — сдвигается к уровню (край заливки);
 *  .cg-body  — сдвигается обратно → градиент «проявляется», а не едет.
 * ========================================================================== */
.cg-fill { position: absolute; }
.cg-move, .cg-body {
  position: absolute; inset: 0;
  transition: transform var(--fill-dur, 1.6s) var(--fill-ease, cubic-bezier(.25, .85, .3, 1));
  will-change: transform;
}
.cg-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cg-body > * { position: absolute; inset: 0; }

[data-dir="ltr"] .cg-move { transform: translateX(calc((var(--pf, var(--p)) - 1) * 100%)); }
[data-dir="ltr"] .cg-body { transform: translateX(calc((1 - var(--pf, var(--p))) * 100%)); }
[data-dir="rtl"] .cg-move { transform: translateX(calc((1 - var(--pf, var(--p))) * 100%)); }
[data-dir="rtl"] .cg-body { transform: translateX(calc((var(--pf, var(--p)) - 1) * 100%)); }
[data-dir="btt"] .cg-move { transform: translateY(calc((1 - var(--pf, var(--p))) * 100%)); }
[data-dir="btt"] .cg-body { transform: translateY(calc((var(--pf, var(--p)) - 1) * 100%)); }
[data-dir="ttb"] .cg-move { transform: translateY(calc((var(--pf, var(--p)) - 1) * 100%)); }
[data-dir="ttb"] .cg-body { transform: translateY(calc((1 - var(--pf, var(--p))) * 100%)); }

.cg-gloss {
  background: linear-gradient(180deg,
    rgba(255,255,255,var(--gloss, .5)) 0%,
    rgba(255,255,255,calc(var(--gloss, .5) * .22)) 36%,
    rgba(255,255,255,0) 56%);
}
.cg-depth { -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 35%, transparent 80%);
            mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 35%, transparent 80%); }

/* свет у ведущего края (стили glass / glow) */
.cg-lead { position: absolute; inset: 0; opacity: var(--lead, .5); }
[data-dir="ltr"] .cg-lead { background: linear-gradient(90deg,  transparent 55%, rgba(255,255,255,.55)); }
[data-dir="rtl"] .cg-lead { background: linear-gradient(270deg, transparent 55%, rgba(255,255,255,.55)); }
[data-dir="btt"] .cg-lead { background: linear-gradient(0deg,   transparent 55%, rgba(255,255,255,.55)); }
[data-dir="ttb"] .cg-lead { background: linear-gradient(180deg, transparent 55%, rgba(255,255,255,.55)); }

/* светящийся край заливки */
.cg-edge { position: absolute; background: var(--edge-light, rgba(255,255,255,.9));
  box-shadow: 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.8)); }
[data-dir="ltr"] .cg-edge { right: -1px; top: 0; bottom: 0; width: var(--edge-w, 2px); }
[data-dir="rtl"] .cg-edge { left: -1px;  top: 0; bottom: 0; width: var(--edge-w, 2px); }
[data-dir="btt"] .cg-edge { top: -1px;    left: 0; right: 0; height: var(--edge-w, 2px); }
[data-dir="ttb"] .cg-edge { bottom: -1px; left: 0; right: 0; height: var(--edge-w, 2px); }
.cg.is-empty .cg-edge, .cg.is-empty .cg-crest-wrap, .cg.is-empty .cg-tip, .cg.is-empty .cg-eb, .cg.is-empty .cg-eg { opacity: 0; }

/* гребень волны на краю заливки (маска-волна, движется transform'ом) */
.cg-crest-wrap { position: absolute; }
.cg-crest-sway, .cg-crest { position: absolute; inset: 0; }
.cg-crest { background: var(--edge, #9ad); will-change: transform; }
.cg-crest.back { background: var(--edge2, rgba(255,255,255,.5)); opacity: .75; }
.cg-crest.hi { background: rgba(255,255,255,.9); opacity: .38; }

[data-dir="ltr"] .cg-crest-wrap, [data-dir="rtl"] .cg-crest-wrap { top: 0; bottom: 0; width: 16px; }
[data-dir="ltr"] .cg-crest-wrap { right: -8px; }
[data-dir="rtl"] .cg-crest-wrap { left: -8px; transform: scaleX(-1); }
[data-dir="ltr"] .cg-crest, [data-dir="rtl"] .cg-crest {
  top: -64px; bottom: -64px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='64'><path d='M0 0 H8 C14.5 8 14.5 24 8 32 C1.5 40 1.5 56 8 64 H0 Z'/></svg>") 0 0 / 16px 64px repeat-y;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='64'><path d='M0 0 H8 C14.5 8 14.5 24 8 32 C1.5 40 1.5 56 8 64 H0 Z'/></svg>") 0 0 / 16px 64px repeat-y;
  animation: cg-crest-v var(--crest-dur, 3s) linear infinite;
}
[data-dir="ltr"] .cg-crest.back, [data-dir="rtl"] .cg-crest.back { transform: translateX(3px); animation-direction: reverse; animation-duration: calc(var(--crest-dur, 3s) * 1.4); }

[data-dir="btt"] .cg-crest-wrap, [data-dir="ttb"] .cg-crest-wrap { left: 0; right: 0; height: 16px; }
[data-dir="btt"] .cg-crest-wrap { top: -8px; }
[data-dir="ttb"] .cg-crest-wrap { bottom: -8px; transform: scaleY(-1); }
[data-dir="btt"] .cg-crest, [data-dir="ttb"] .cg-crest {
  left: -64px; right: -64px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='16'><path d='M0 16 V8 C8 1.5 24 1.5 32 8 C40 14.5 56 14.5 64 8 V16 Z'/></svg>") 0 0 / 64px 16px repeat-x;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='16'><path d='M0 16 V8 C8 1.5 24 1.5 32 8 C40 14.5 56 14.5 64 8 V16 Z'/></svg>") 0 0 / 64px 16px repeat-x;
  animation: cg-crest-h var(--crest-dur, 3s) linear infinite;
}
[data-dir="btt"] .cg-crest.back, [data-dir="ttb"] .cg-crest.back { transform: translateY(-3px); animation-direction: reverse; animation-duration: calc(var(--crest-dur, 3s) * 1.4); }
[data-dir="ltr"] .cg-crest.hi, [data-dir="rtl"] .cg-crest.hi, [data-dir="btt"] .cg-crest.hi, [data-dir="ttb"] .cg-crest.hi { animation-duration: calc(var(--crest-dur, 3s) * 0.72); }

@keyframes cg-crest-v { from { transform: translateY(0); } to { transform: translateY(64px); } }
@keyframes cg-crest-h { from { transform: translateX(0); } to { transform: translateX(64px); } }

/* «живая поверхность» — лёгкое покачивание гребня */
.cg-crest-sway.on { animation: cg-sway calc(4.6s / var(--surf-speed, 1)) ease-in-out infinite; }
@keyframes cg-sway {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.35, 1.35); }
}

/* пузырьки и блёстки внутри заливки */
.cg-fb {
  position: absolute; bottom: -12px; border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.98) 0 9%, transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,.5) 0 6%, transparent 15%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(255,255,255,.3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  opacity: 0; will-change: transform, opacity;
  animation: cg-rise var(--dur, 4s) ease-in infinite;
}
.cg-fs {
  position: absolute; opacity: 0;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  background: radial-gradient(circle, #fff 0 30%, rgba(255,255,255,.7) 60%);
  animation: cg-sparkle var(--dur, 2.6s) ease-in-out infinite;
}
.cg-shimmer {
  position: absolute; top: -30%; bottom: -30%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: cg-shimmer calc(3.4s / var(--shim-speed, 1)) ease-in-out infinite;
}
@keyframes cg-shimmer {
  0%       { transform: skewX(-20deg) translateX(-160%); opacity: 0; }
  10%      { opacity: 1; }
  70%, 100%{ transform: skewX(-20deg) translateX(560%); opacity: 0; }
}

/* перламутр и голографический перелив внутри заливки */
.cg-body > .cg-pearl { inset: -30%; opacity: .72; animation: cg-pearl 15s ease-in-out infinite; will-change: transform; }
@keyframes cg-pearl {
  0%   { transform: translate(0, 0) rotate(0) scale(1); }
  33%  { transform: translate(7%, -5%) rotate(6deg) scale(1.1); }
  66%  { transform: translate(-6%, 4%) rotate(-5deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
.cg-body > .cg-holowater { right: auto; width: 300%; opacity: .55;
  background:
    repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,.07) 14px 15px, transparent 15px 30px),
    linear-gradient(100deg, transparent 0%, rgba(150,236,255,.3) 18%, rgba(200,184,255,.38) 38%,
      rgba(252,246,255,.26) 52%, rgba(255,194,232,.32) 70%, rgba(160,190,255,.28) 86%, transparent 100%) 0 0 / 33.3334% 100% repeat-x;
  animation: cg-slide 9s linear infinite; will-change: transform; }

/* отдельная полоса прогресса */
.cg-bar { position: absolute; overflow: hidden; }
.cg-bar > .cg-track { position: absolute; inset: 0; }

/* ============================================================================
 *  ПРОГРЕСС v2 — форма края, дорожка, «трубка», сверх цели, вид при цели
 *  (всё статично или на transform/opacity; ничего тяжёлого)
 * ========================================================================== */
/* дорожка: пустая часть внутри формы, под заливкой */
.cg-ptrackbox { position: absolute; pointer-events: none; }
.cg-ptrack, .cg-ptrack > div { position: absolute; inset: 0; }

/* форма ведущего края заливки: --capr задаёт JS (меньше к 100 %, чтобы форма «закрывалась») */
.cap-round[data-dir="ltr"] .cg-clip { border-radius: 0 var(--capr, 0) var(--capr, 0) 0; }
.cap-round[data-dir="rtl"] .cg-clip { border-radius: var(--capr, 0) 0 0 var(--capr, 0); }
.cap-round[data-dir="btt"] .cg-clip { border-radius: var(--capr, 0) var(--capr, 0) 0 0; }
.cap-round[data-dir="ttb"] .cg-clip { border-radius: 0 0 var(--capr, 0) var(--capr, 0); }
/* светящийся край повторяет скругление */
.cap-round > .cg-move > .cg-edge { inset: 0; width: auto; height: auto; background: none;
  box-shadow: inset calc(-1 * var(--cap-line, 2px)) 0 0 0 var(--edge-light, #fff), 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.8)); }
.cap-round[data-dir="ltr"] > .cg-move > .cg-edge { border-radius: 0 var(--capr, 0) var(--capr, 0) 0; }
.cap-round[data-dir="rtl"] > .cg-move > .cg-edge { border-radius: var(--capr, 0) 0 0 var(--capr, 0);
  box-shadow: inset var(--cap-line, 2px) 0 0 0 var(--edge-light, #fff), 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.8)); }
.cap-round[data-dir="btt"] > .cg-move > .cg-edge { border-radius: var(--capr, 0) var(--capr, 0) 0 0;
  box-shadow: inset 0 var(--cap-line, 2px) 0 0 var(--edge-light, #fff), 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.8)); }
.cap-round[data-dir="ttb"] > .cg-move > .cg-edge { border-radius: 0 0 var(--capr, 0) var(--capr, 0);
  box-shadow: inset 0 calc(-1 * var(--cap-line, 2px)) 0 0 var(--edge-light, #fff), 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.8)); }
.cap-round .cg-lead { display: none; }

/* косой срез */
.cap-slant[data-dir="ltr"] .cg-clip { clip-path: polygon(0 0, 100% 0, calc(100% - var(--capr, 0px)) 100%, 0 100%); }
.cap-slant[data-dir="rtl"] .cg-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--capr, 0px) 100%); }
.cap-slant[data-dir="btt"] .cg-clip { clip-path: polygon(0 0, 100% var(--capr, 0px), 100% 100%, 0 100%); }
.cap-slant[data-dir="ttb"] .cg-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--capr, 0px))); }
.cap-slant > .cg-move > .cg-edge { transform: skewX(-19deg); transform-origin: 50% 50%; }
.cap-slant[data-dir="rtl"] > .cg-move > .cg-edge { transform: skewX(19deg); }
.cap-slant[data-dir="btt"] > .cg-move > .cg-edge, .cap-slant[data-dir="ttb"] > .cg-move > .cg-edge { transform: none; }

/* мягкий край: плавное растворение у границы */
.cap-soft[data-dir="ltr"] .cg-clip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); }
.cap-soft[data-dir="rtl"] .cg-clip { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); }
.cap-soft[data-dir="btt"] .cg-clip { -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); }
.cap-soft[data-dir="ttb"] .cg-clip { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - var(--capr, 0px)), rgba(0,0,0,.62) calc(100% - var(--capr, 0px) * .62), rgba(0,0,0,.2) calc(100% - var(--capr, 0px) * .25), transparent); }
.cap-soft .cg-lead, .cap-soft > .cg-move > .cg-edge { opacity: .35; }

/* «трубка»: свет сверху, тень снизу, узкий блик — заливка выглядит объёмной */
.cg-tube { background:
  linear-gradient(180deg, transparent 10%, rgba(255,255,255,calc(.34 * var(--depth, .5))) 20%, rgba(255,255,255,0) 38%),
  linear-gradient(180deg, rgba(255,255,255,calc(.5 * var(--depth, .5))) 0%, rgba(255,255,255,0) 30%,
    rgba(0,0,0,0) 52%, rgba(8,10,40,calc(.42 * var(--depth, .5))) 100%); }
[data-dir="btt"] .cg-tube, [data-dir="ttb"] .cg-tube { background:
  linear-gradient(90deg, transparent 10%, rgba(255,255,255,calc(.34 * var(--depth, .5))) 20%, rgba(255,255,255,0) 38%),
  linear-gradient(90deg, rgba(255,255,255,calc(.5 * var(--depth, .5))) 0%, rgba(255,255,255,0) 30%,
    rgba(0,0,0,0) 52%, rgba(8,10,40,calc(.42 * var(--depth, .5))) 100%); }

/* сверх цели: яркая полоса вдоль заливки растёт с перевыполнением */
.cg-overbox { position: absolute; pointer-events: none; }
.cg-over { position: absolute; border-radius: 99px; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, var(--edge-light, #fff), var(--edge-glow-c, #fff));
  box-shadow: 0 0 8px var(--edge-glow-c, rgba(255,255,255,.8));
  transition: transform 1.4s cubic-bezier(.25, .85, .3, 1), opacity .6s; }
.cg.is-over .cg-over { opacity: .95; }
[data-dir="ltr"] > .cg-over, .cg-overbox[data-dir="ltr"] > .cg-over { left: 5%; right: 5%; bottom: 5px; height: 4px; transform-origin: 0 50%; transform: scaleX(var(--ov, 0)); }
.cg-overbox[data-dir="rtl"] > .cg-over { left: 5%; right: 5%; bottom: 5px; height: 4px; transform-origin: 100% 50%; transform: scaleX(var(--ov, 0)); }
.cg-overbox[data-dir="btt"] > .cg-over { top: 5%; bottom: 5%; left: 5px; width: 4px; transform-origin: 50% 100%; transform: scaleY(var(--ov, 0)); }
.cg-overbox[data-dir="ttb"] > .cg-over { top: 5%; bottom: 5%; left: 5px; width: 4px; transform-origin: 50% 0; transform: scaleY(var(--ov, 0)); }
.cg-overbox.cg-overbar[data-dir] > .cg-over { left: 0; right: 0; top: 0; bottom: 0; height: auto; width: auto; }
.cg.cg-instant .cg-over { transition: none; }

/* вид при достигнутой цели (постоянный, пока цель выполнена) */
.cg-fin-shine { position: absolute; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg) translateX(-160%); }
.cg.is-complete .cg-fin-shine { animation: cg-fin-sweep 3.8s ease-in-out infinite; }
@keyframes cg-fin-sweep {
  0%, 20%  { opacity: 0; transform: skewX(-18deg) translateX(-160%); }
  30%      { opacity: 1; }
  72%      { opacity: 1; }
  82%,100% { opacity: 0; transform: skewX(-18deg) translateX(var(--sweep, 520%)); }
}
.cg.fin-rim.is-complete .cg-l-border { filter: brightness(1.35) drop-shadow(0 0 5px var(--edge-glow-c, rgba(255,255,255,.8))); }
.cg.fin-pulse.is-complete .cg-fill { animation: cg-fin-pulse 2.6s ease-in-out infinite; }
@keyframes cg-fin-pulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.cg.cg-static .cg-fin-shine, .cg.cg-still .cg-fin-shine, .cg.cg-still.fin-pulse .cg-fill { animation: none !important; }

/* ============================================================================
 *  ПОВЕРХНОСТЬ: глянец, металл, сатин, фаска
 * ========================================================================== */
.cg-surface > * { position: absolute; pointer-events: none; }
.cg-surface > svg { left: 0; top: 0; overflow: visible; }

/* ============================================================================
 *  СТЕКЛО И БЛИКИ
 * ========================================================================== */
.cg-glass > div, .cg-hl > div { position: absolute; inset: 0; }
.cg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.35'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.cg-hl > .cg-glint-rot { inset: -60%; overflow: visible; }
.cg-glint {
  position: absolute; top: 0; bottom: 0; left: 0; width: 13%;
  background: linear-gradient(90deg, transparent, var(--hl, #fff), transparent);
  animation: cg-glint-move calc(6.5s / var(--hl-speed, 1)) ease-in-out infinite;
}
@keyframes cg-glint-move {
  0%, 18%   { transform: translateX(-140%); }
  62%, 100% { transform: translateX(780%); }
}
.cg-hl > .cg-holo { inset: -45%;
  background: conic-gradient(from 200deg at 38% 32%,
    rgba(150,236,255,.5), rgba(200,184,255,.58), rgba(252,246,255,.46),
    rgba(255,194,232,.5), rgba(160,190,255,.5), rgba(150,236,255,.5));
  animation: cg-spin calc(22s / var(--hl-speed, 1)) linear infinite;
}
@keyframes cg-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.cg-hl > .cg-irid { right: auto; width: 300%;
  background: linear-gradient(100deg, transparent 0%, rgba(150,236,255,.5) 16%, rgba(200,184,255,.58) 34%,
    rgba(252,246,255,.42) 50%, rgba(255,194,232,.5) 66%, rgba(160,190,255,.45) 82%, transparent 96%) 0 0 / 33.3334% 100% repeat-x;
  animation: cg-slide calc(12s / var(--hl-speed, 1)) linear infinite;
}
@keyframes cg-slide { from { transform: translateX(0); } to { transform: translateX(-33.3334%); } }
.cg.cg-static .cg-holo, .cg.cg-static .cg-irid { animation: none !important; }

/* ============================================================================
 *  ДЕКОР (каждый элемент: <i> = позиция/анимация/свечение, <b> = форма)
 * ========================================================================== */
.cg-d { position: absolute; display: block; will-change: transform, opacity; transform: rotate(var(--rot, 0deg)); }
.cg-d > b, .cg-d > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cg-d > img { object-fit: contain; }

.cg-d-bubbles > b { border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.98) 0 8%, transparent 20%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,.6) 0 6%, transparent 15%),
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(255,255,255,.16) 76%, rgba(255,255,255,.46) 100%),
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.2), transparent 62%);
  box-shadow: inset 0 0 0 1px var(--dc), inset -1px -2px 5px rgba(255,255,255,.4); }
.cg-d-stars > b {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  /* огранка: лучи чередуют светлую и тёмную грань + сердцевина */
  background:
    radial-gradient(circle at 50% 50%, #fff 0 12%, rgba(255,255,255,0) 40%),
    repeating-conic-gradient(from -18deg at 50% 52%, rgba(255,255,255,.6) 0 36deg, rgba(0,0,0,.14) 36deg 72deg),
    var(--dc); }
.cg-d-sparkles > b {
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  background:
    radial-gradient(circle, #fff 0 16%, rgba(255,255,255,0) 52%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, rgba(0,0,0,.14) 50%),
    var(--dc); }
.cg-d-hearts > b {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21C4 15 1 11 1 7a5.5 5.5 0 0 1 11-1.5A5.5 5.5 0 0 1 23 7c0 4-3 8-11 14z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M12 21C4 15 1 11 1 7a5.5 5.5 0 0 1 11-1.5A5.5 5.5 0 0 1 23 7c0 4-3 8-11 14z'/></svg>") center / contain no-repeat;
  background:
    radial-gradient(ellipse 30% 20% at 30% 27%, rgba(255,255,255,.95), rgba(255,255,255,0) 80%),
    linear-gradient(160deg, rgba(255,255,255,.7) -10%, var(--dc) 52%, rgba(0,0,0,.2) 140%); }
.cg-d-crystals > b {
  clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%);
  /* три плоскости: светлая верхняя грань, левая светлее правой, ребро-блик */
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0 30%, transparent 30%),
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 49%, transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.3) 0 50%, rgba(0,0,0,.16) 50% 100%),
    linear-gradient(160deg, #fff 0%, var(--dc) 55%, rgba(255,255,255,.7) 100%); }
.cg-d-droplets > b {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M12 1C12 1 3 13 3 19a9 9 0 0 0 18 0C21 13 12 1 12 1z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M12 1C12 1 3 13 3 19a9 9 0 0 0 18 0C21 13 12 1 12 1z'/></svg>") center / contain no-repeat;
  background:
    radial-gradient(ellipse 14% 24% at 34% 52%, rgba(255,255,255,.95), rgba(255,255,255,0) 90%),
    radial-gradient(ellipse 40% 20% at 50% 90%, rgba(255,255,255,.4), rgba(255,255,255,0) 100%),
    radial-gradient(circle at 40% 55%, rgba(255,255,255,.55) 0 8%, var(--dc) 60%, rgba(0,0,0,.18) 110%); }
.cg-d-circles > b { border-radius: 50%; box-shadow: inset 0 0 0 var(--ring, 1.5px) var(--dc), 0 0 0 .5px rgba(255,255,255,.35);
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.4), transparent 42%); }

/* висюльки: нить от точки крепления + кристаллик; качаются от точки крепления */
.cg-d-charms { transform-origin: 50% 0; }
.cg-d-charms > s { position: absolute; left: 50%; top: 0; width: 1px; height: var(--len, 26px); margin-left: -.5px;
  background: linear-gradient(180deg, var(--dc), rgba(255,255,255,.12)); opacity: .85; }
.cg-d-charms > b { top: auto; bottom: 0; height: calc(100% - var(--len, 26px));
  clip-path: polygon(50% 0%, 100% 30%, 78% 100%, 22% 100%, 0% 30%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0 30%, transparent 30%),
    linear-gradient(100deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%),
    linear-gradient(90deg, rgba(255,255,255,.28) 0 50%, rgba(0,0,0,.16) 50% 100%),
    linear-gradient(165deg, #ffffff 0%, var(--dc) 55%, rgba(255,255,255,.75) 100%); }
.cg.fx-active .cg-d-charms.a-swing { animation-duration: 1.1s; }

/* сердечко-акцент у нижней точки формы */
.cg-accent { position: absolute; display: block; }
.cg-accent > b { position: absolute; inset: 0; display: block;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 2 11 2 8a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 3-2 7-8 13z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C4 15 2 11 2 8a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 3-2 7-8 13z'/></svg>") center / contain no-repeat; }
.cg-accent.pulse { animation: cg-tip 3s ease-in-out infinite; }
@keyframes cg-tip { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.cg-d-glints > b {
  background:
    radial-gradient(circle, #fff 0 5%, transparent 16%),
    linear-gradient(90deg, transparent, var(--dc), transparent) 50% 50% / 100% 9% no-repeat,
    linear-gradient(0deg, transparent, var(--dc), transparent) 50% 50% / 9% 58% no-repeat; }

/* анимации декора — только transform/opacity */
.cg-d.a-rise    { animation: cg-rise    var(--dur, 5s) ease-in infinite; }
.cg-d.a-bob     { animation: cg-bob     var(--dur, 6s) ease-in-out infinite; }
.cg-d.a-twinkle { animation: cg-twinkle var(--dur, 3s) ease-in-out infinite; }
.cg-d.a-sparkle { animation: cg-sparkle var(--dur, 2.6s) ease-in-out infinite; }
.cg-d.a-beat    { animation: cg-beat    var(--dur, 2.4s) ease-in-out infinite; }
.cg-d.a-swing   { animation: cg-swing   var(--dur, 4s) ease-in-out infinite; }
.cg-d.a-drip    { animation: cg-drip    var(--dur, 4s) ease-in infinite; }
.cg-d.a-pulse   { animation: cg-pulse   var(--dur, 3.4s) ease-in-out infinite; }
.cg-d.a-glint   { animation: cg-glint   var(--dur, 3.2s) ease-in-out infinite; }

@keyframes cg-rise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: .85; }
  100% { transform: translate(var(--drift, 4px), calc(-1 * var(--rise, 60px))) scale(1.08); opacity: 0; }
}
@keyframes cg-bob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-6px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes cg-twinkle {
  0%, 100% { transform: scale(.55) rotate(var(--rot, 0deg)); opacity: .35; }
  50%      { transform: scale(1) rotate(calc(var(--rot, 0deg) + 24deg)); opacity: 1; }
}
@keyframes cg-sparkle {
  0%, 100% { transform: scale(0) rotate(var(--rot, 0deg)); opacity: 0; }
  50%      { transform: scale(1) rotate(calc(var(--rot, 0deg) + 45deg)); opacity: 1; }
}
@keyframes cg-beat {
  0%, 100% { transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
  35%      { transform: translateY(-4px) scale(1.14) rotate(var(--rot, 0deg)); }
  55%      { transform: translateY(-2px) scale(.98) rotate(var(--rot, 0deg)); }
}
@keyframes cg-swing {
  0%, 100% { transform: rotate(calc(var(--rot, 0deg) - 9deg)); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 9deg)); }
}
@keyframes cg-drip {
  0%   { transform: translateY(-5px) scale(.7) rotate(var(--rot, 0deg)); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translateY(12px) scale(1) rotate(var(--rot, 0deg)); opacity: 0; }
}
@keyframes cg-pulse {
  0%, 100% { transform: scale(.82); opacity: .45; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes cg-glint {
  0%, 100% { transform: scale(.15) rotate(var(--rot, 0deg)); opacity: 0; }
  45%, 55% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}

/* ============================================================================
 *  ТЕКСТ
 * ========================================================================== */
.cg-text { position: absolute; display: grid; align-content: center; overflow: hidden; }
/* по горизонтали — обрезка с многоточием, по вертикали — НЕ обрезаем: у крупных
   цифр и шрифтов вроде Unbounded глифы выше строки (line-height), и
   overflow: hidden срезал бы их низ. overflow-x: clip не делает блок
   прокручиваемым и не трогает вертикаль. */
.cg-t {
  display: block; min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: visible; overflow-x: clip; text-overflow: ellipsis;
  font-size: calc(var(--fs, 16px) * var(--fit, 1) * var(--fit-el, 1));
  font-variant-numeric: tabular-nums;
}
.cg-title.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; overflow: hidden; }
.cg-amounts { display: flex; align-items: baseline; min-width: 0; max-width: 100%; overflow: visible; overflow-x: clip; white-space: nowrap; }
.cg-t.cg-fit-hide { display: none; }
.cg-amounts > .cg-t { flex: none; overflow: visible; max-width: none; }

/* ============================================================================
 *  АНИМАЦИИ: ожидание / донат / цель достигнута
 * ========================================================================== */
.cg-idle[data-idle="float"]   { animation: cg-float   calc(6s / var(--idle-speed, 1)) ease-in-out infinite; }
.cg-idle[data-idle="breathe"] { animation: cg-breathe calc(5s / var(--idle-speed, 1)) ease-in-out infinite; }
@keyframes cg-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1px * var(--idle-amp, 4))); } }
@keyframes cg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--idle-amp, 4) * .004)); } }

/* «желе» — мягкое неравномерное дыхание (как у сердца-оригинала) */
.cg-idle[data-idle="jelly"] { transform-origin: 50% 40%; animation: cg-jelly calc(5s / var(--idle-speed, 1)) ease-in-out infinite; }
@keyframes cg-jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(calc(1 + .018 * var(--idle-amp, 1)), calc(1 - .018 * var(--idle-amp, 1))); }
  50% { transform: scale(calc(1 - .014 * var(--idle-amp, 1)), calc(1 + .014 * var(--idle-amp, 1))); }
  75% { transform: scale(calc(1 + .01 * var(--idle-amp, 1)), calc(1 - .01 * var(--idle-amp, 1))); }
}

/* пульсация свечения в покое */
.cg-glowpulse { animation: cg-glowpulse calc(4.5s / var(--idle-speed, 1)) ease-in-out infinite; will-change: opacity; }
@keyframes cg-glowpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.cg.fx-pulse  .cg-fx { animation: cg-fx-pulse  var(--fx-dur, 1.4s) cubic-bezier(.2, .8, .3, 1); }
.cg.fx-bounce .cg-fx { animation: cg-fx-bounce var(--fx-dur, 1.4s) cubic-bezier(.2, .8, .3, 1); }
.cg.fx-jelly  .cg-fx { transform-origin: 50% 40%; animation: cg-fx-jelly var(--fx-dur, 1.4s) cubic-bezier(.22, .68, .3, 1); }
@keyframes cg-fx-jelly {
  0%   { transform: scale(1, 1); }
  28%  { transform: scale(calc(1 + .075 * var(--fx-i, .6)), calc(1 - .075 * var(--fx-i, .6))); }
  55%  { transform: scale(calc(1 - .036 * var(--fx-i, .6)), calc(1 + .043 * var(--fx-i, .6))); }
  76%  { transform: scale(calc(1 + .02 * var(--fx-i, .6)), calc(1 - .016 * var(--fx-i, .6))); }
  90%  { transform: scale(calc(1 - .006 * var(--fx-i, .6)), calc(1 + .008 * var(--fx-i, .6))); }
  100% { transform: scale(1, 1); }
}
@keyframes cg-fx-pulse {
  0%   { transform: scale(1); }
  28%  { transform: scale(calc(1 + .07 * var(--fx-i, .6))); }
  60%  { transform: scale(calc(1 - .018 * var(--fx-i, .6))); }
  100% { transform: scale(1); }
}
@keyframes cg-fx-bounce {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(calc(-16px * var(--fx-i, .6))) scale(.98, 1.03); }
  42%  { transform: translateY(0) scale(1.04, .96); }
  62%  { transform: translateY(calc(-5px * var(--fx-i, .6))) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
.cg-flashfx, .cg-cglow { opacity: 0; will-change: opacity; }
.cg.fx-glow .cg-flashfx { animation: cg-flash var(--fx-dur, 1.4s) ease-out; }
@keyframes cg-flash { 0% { opacity: 0; } 18% { opacity: calc(.25 + .75 * var(--fx-i, .6)); } 100% { opacity: 0; } }
.cg.fx-wave .cg-crest-wrap > .cg-crest-sway { animation: cg-boost var(--fx-dur, 1.4s) ease-out; }
@keyframes cg-boost { 0%, 100% { transform: scale(1, 1); } 22% { transform: scale(1.9, 1.9); } 55% { transform: scale(.9, .9); } }

.cg.is-complete .cg-cglow { animation: cg-cglow calc(2.4s / var(--cx-speed, 1)) ease-in-out infinite; }
@keyframes cg-cglow { 0%, 100% { opacity: calc(.3 * var(--cx-i, .7)); } 50% { opacity: calc(.95 * var(--cx-i, .7)); } }
.cg-complete-extra { display: none; }
.cg.is-complete .cg-complete-extra { display: block; }

/* одноразовые всплески (донат / цель) */
.cg-burst { position: absolute; inset: 0; pointer-events: none; }
.cg-b { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.cg-b > b { position: absolute; inset: 0; display: block; }
.cg-b.k-bubble { border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.98) 0 9%, transparent 22%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,.55) 0 6%, transparent 15%),
    radial-gradient(circle at 50% 50%, transparent 56%, rgba(255,255,255,.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75);
  animation: cg-b-rise var(--dur, 2.4s) cubic-bezier(.3, .6, .4, 1) forwards; }
.cg-b.k-pop { animation: cg-b-pop var(--dur, 1.2s) ease-out forwards; }
.cg-b.k-fly { animation: cg-b-fly var(--dur, 1.6s) cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes cg-b-rise {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(1.1); opacity: 0; }
}
@keyframes cg-b-pop {
  0%   { transform: translate(0, 0) scale(0) rotate(0); opacity: 0; }
  30%  { transform: translate(calc(var(--dx, 0) * .4), calc(var(--dy, 0) * .4)) scale(1.15) rotate(40deg); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.2) rotate(110deg); opacity: 0; }
}
@keyframes cg-b-fly {
  0%   { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1) rotate(var(--rot, 90deg)); opacity: 0; }
}

/* ============================================================================
 *  УКРАШЕНИЯ ИЗ БИБЛИОТЕКИ (assets/library → core/ornaments.js)
 *  .oa-p — одна деталь (уголок, торец, навершие, маркер, веха): качается
 *          вокруг своей точки крепления (transform-origin задан в разметке);
 *  .oa-g — весь рисунок слоя (рамка, свет, финал): origin — центр формы.
 *  Анимируются только transform / opacity; «переливы» и «неон» — filter
 *  на маленьком svg слоя (в Performance Mode выключены).
 * ========================================================================== */
.cg-orn > svg { overflow: visible; }
.cg-orn .oa-p { transform-box: fill-box; }
.cg-orn .oa-g { transform-box: view-box; }
.cg-orn { --oa-sp: 1; }

.oa-sway.oa-pc .oa-p, .oa-sway.oa-gr .oa-g { animation: oa-sway calc(3.6s / var(--oa-sp)) ease-in-out infinite; }
.oa-bob.oa-pc .oa-p, .oa-bob.oa-gr .oa-g { animation: oa-bob calc(3.2s / var(--oa-sp)) ease-in-out infinite; }
.oa-pulse.oa-pc .oa-p, .oa-pulse.oa-gr .oa-g { animation: oa-pulse calc(2.8s / var(--oa-sp)) ease-in-out infinite; }
.oa-spin.oa-pc .oa-p, .oa-spin.oa-gr .oa-g { animation: oa-spin calc(14s / var(--oa-sp)) linear infinite; }
.oa-flap.oa-pc .oa-p, .oa-flap.oa-gr .oa-g { animation: oa-flap calc(1.6s / var(--oa-sp)) ease-in-out infinite; }
.oa-bounce.oa-pc .oa-p, .oa-bounce.oa-gr .oa-g { animation: oa-bounce calc(2.2s / var(--oa-sp)) cubic-bezier(.3, .7, .4, 1) infinite; }
.oa-drift.oa-pc .oa-p, .oa-drift.oa-gr .oa-g { animation: oa-drift calc(12s / var(--oa-sp)) ease-in-out infinite; }
.oa-glitch.oa-pc .oa-p, .oa-glitch.oa-gr .oa-g { animation: oa-glitch calc(4s / var(--oa-sp)) steps(1, end) infinite; }
.oa-twinkle.oa-tws .tw1, .oa-twinkle.oa-tws .tw2 { animation: oa-tw calc(2.6s / var(--oa-sp)) ease-in-out infinite; }
.oa-twinkle.oa-pc:not(.oa-tws) .oa-p { animation: oa-twp calc(2.6s / var(--oa-sp)) ease-in-out infinite; }
.oa-shimmer > svg { animation: oa-shimmer calc(3.4s / var(--oa-sp)) ease-in-out infinite; }
.oa-glow > svg { animation: oa-glow calc(2.8s / var(--oa-sp)) ease-in-out infinite; }
.oa-hue > svg { animation: oa-hue calc(8s / var(--oa-sp)) linear infinite; }
.oa-flicker > svg { animation: oa-flicker calc(5s / var(--oa-sp)) linear infinite; }

@keyframes oa-sway    { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes oa-bob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes oa-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes oa-spin    { to { transform: rotate(360deg); } }
@keyframes oa-flap    { 0%, 100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-14deg) scaleY(.9); } }
@keyframes oa-bounce  { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px); } 40% { transform: translateY(0); } 47% { transform: translateY(-1.5px); } }
@keyframes oa-drift   { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6px, -4px) scale(1.05); } 66% { transform: translate(-6px, 3px) scale(.97); } }
@keyframes oa-glitch  { 0%, 86%, 100% { transform: translate(0, 0); } 88% { transform: translate(-2px, 0); } 90% { transform: translate(2px, -1px); } 92% { transform: translate(-1px, 1px); } 94% { transform: translate(0, 0); } }
@keyframes oa-tw      { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes oa-twp     { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes oa-shimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) saturate(1.15); } }
@keyframes oa-glow    { 0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: .9; } 50% { filter: drop-shadow(0 0 5px rgba(255,255,255,.85)); opacity: 1; } }
@keyframes oa-hue     { to { filter: hue-rotate(360deg); } }
@keyframes oa-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .45; } }

/* «цель достигнута»: показывается только при 100 %, появление — один раз */
.cg-orn-complete { display: none; }
.cg.is-complete .cg-orn-complete { display: block; }
.oa-pop .oa-g   { animation: oa-pop   .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.oa-rise .oa-g  { animation: oa-rise  .9s cubic-bezier(.2, .9, .3, 1) both; }
.oa-drop .oa-g  { animation: oa-drop  .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.oa-swing .oa-g { animation: oa-drop  .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.oa-stamp .oa-g { animation: oa-stamp .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes oa-pop   { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes oa-rise  { from { transform: translateY(18px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oa-drop  { from { transform: translateY(-22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oa-stamp { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* маркер: скрыт на 0 %, если так настроено */
.cg-orn-marker { transition: opacity .3s ease; }
.cg-orn-marker.is-zero { opacity: 0 !important; }

/* вехи: невзятая / взятая; при взятии — короткий «поп» */
.cg-orn .ms .ms-on { display: none; }
.cg-orn .ms.reached .ms-on { display: inline; }
.cg-orn .ms.reached .ms-off { display: none; }
.cg-orn-milestones:not(.oa-pc) .ms.reached .ms-on > g > .oa-p { animation: oa-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }

/* непрерывность фазы при перестройке в живом превью (как у .cga);
   появление «цель достигнута» не сдвигается — оно должно проиграться */
.cg .cg-orn:not(.cg-orn-complete).oa-pc .oa-p, .cg .cg-orn:not(.cg-orn-complete).oa-gr .oa-g,
.cg .cg-orn:not(.cg-orn-complete) > svg, .cg .oa-twinkle.oa-tws .tw1 { animation-delay: calc(0s - var(--clock, 0s)); }
.cg .oa-twinkle.oa-tws .tw2 { animation-delay: calc(-1.3s / var(--oa-sp) - var(--clock, 0s)); }

/* узоры (заливка / фон): плитка с запасом, чтобы не было краёв при повороте и сдвиге */
.cg-tex { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cg-tex-rot { position: absolute; inset: -60%; }
.cg-tex-tile { position: absolute; inset: 0; background-repeat: repeat; }
.cg-tex-tile.oa-slide { inset: calc(-1 * var(--th, 32px)) 0 0 calc(-1 * var(--tw, 32px));
  animation: oa-slide var(--dur, 14s) linear infinite; will-change: transform; }
@keyframes oa-slide { to { transform: translate(var(--tw, 32px), var(--th, 32px)); } }

/* плашки под текстом */
.cg-plates { position: absolute; inset: 0; pointer-events: none; }
.cg-plates > .cg-plate { position: absolute; overflow: visible; }
.cg-tx { display: inline; }

.cg.cg-static .oa-shimmer > svg, .cg.cg-static .oa-hue > svg, .cg.cg-static .oa-flicker > svg,
.cg.cg-static .oa-glow > svg { animation: none; }

/* «уменьшить движение» и выключенные анимации */
.cg.cg-still, .cg.cg-still * { animation: none !important; transition-duration: 0s !important; }

/* ============================================================================
 *  БЕЗОПАСНАЯ ЗОНА (только превью кастомайзера)
 * ========================================================================== */
.cg-safe { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 2000; }
body.dg-safe .cg-safe { display: block; }
.cg-safe > i { position: absolute; border: 1px dashed rgba(255, 70, 160, .9); }
.cg-safe > i.f { border-color: rgba(70, 190, 255, .9); }
.cg-safe > i.t { border-color: rgba(255, 200, 60, .95); }
body.dg-safe #widget-root { outline: 1px dashed rgba(70, 190, 255, .55); outline-offset: -1px; }


/* ============================================================================
 *  v5 · КОМПОНЕНТЫ: края заливки, границы, блики, декор, финиш, оформление текста
 *  (всё статично или на transform/opacity; ничего тяжёлого)
 * ========================================================================== */

/* кончик заливки: мениск / кристалл. Маска — та же форма, что и рисунок кончика */
.cap-tip[data-dir="ltr"] > .cg-move > .cg-clip {
  -webkit-mask: var(--tipm) 100% 0 / var(--capr, 0px) 100% no-repeat, linear-gradient(#000, #000) 0 0 / calc(100% - var(--capr, 0px) + 1px) 100% no-repeat;
          mask: var(--tipm) 100% 0 / var(--capr, 0px) 100% no-repeat, linear-gradient(#000, #000) 0 0 / calc(100% - var(--capr, 0px) + 1px) 100% no-repeat; }
.cap-tip[data-dir="rtl"] > .cg-move > .cg-clip {
  -webkit-mask: var(--tipm) 0 0 / var(--capr, 0px) 100% no-repeat, linear-gradient(#000, #000) 100% 0 / calc(100% - var(--capr, 0px) + 1px) 100% no-repeat;
          mask: var(--tipm) 0 0 / var(--capr, 0px) 100% no-repeat, linear-gradient(#000, #000) 100% 0 / calc(100% - var(--capr, 0px) + 1px) 100% no-repeat; }
.cap-tip[data-dir="btt"] > .cg-move > .cg-clip {
  -webkit-mask: var(--tipm) 0 0 / 100% var(--capr, 0px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--capr, 0px) + 1px) no-repeat;
          mask: var(--tipm) 0 0 / 100% var(--capr, 0px) no-repeat, linear-gradient(#000, #000) 0 100% / 100% calc(100% - var(--capr, 0px) + 1px) no-repeat; }
.cap-tip[data-dir="ttb"] > .cg-move > .cg-clip {
  -webkit-mask: var(--tipm) 0 100% / 100% var(--capr, 0px) no-repeat, linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--capr, 0px) + 1px) no-repeat;
          mask: var(--tipm) 0 100% / 100% var(--capr, 0px) no-repeat, linear-gradient(#000, #000) 0 0 / 100% calc(100% - var(--capr, 0px) + 1px) no-repeat; }
.cap-tip .cg-lead, .cap-tip > .cg-move > .cg-edge { display: none; }
.cg-tip { position: absolute; display: block; pointer-events: none; }
.cg-tip > svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-dir="ltr"] .cg-tip { right: 0; top: 0; bottom: 0; width: var(--capr, 0px); }
[data-dir="rtl"] .cg-tip { left: 0; top: 0; bottom: 0; width: var(--capr, 0px); }
[data-dir="btt"] .cg-tip { top: 0; left: 0; right: 0; height: var(--capr, 0px); }
[data-dir="ttb"] .cg-tip { bottom: 0; left: 0; right: 0; height: var(--capr, 0px); }

/* граница «свечение» и «голограмма»: шлейф света за краем (не зависит от внешнего glow) */
.cg-edge.e-glow::before, .cg-edge.e-holo::before { content: ""; position: absolute; pointer-events: none; border-radius: inherit; }
[data-dir="ltr"] .cg-edge { --ea: 90deg;  --ep: 180deg; }
[data-dir="rtl"] .cg-edge { --ea: 270deg; --ep: 180deg; }
[data-dir="btt"] .cg-edge { --ea: 0deg;   --ep: 90deg; }
[data-dir="ttb"] .cg-edge { --ea: 180deg; --ep: 90deg; }
[data-dir="ltr"] .cg-edge.e-glow::before, [data-dir="ltr"] .cg-edge.e-holo::before { right: 100%; top: 0; bottom: 0; width: var(--edge-span, 14px); margin-right: -1px; }
[data-dir="rtl"] .cg-edge.e-glow::before, [data-dir="rtl"] .cg-edge.e-holo::before { left: 100%; top: 0; bottom: 0; width: var(--edge-span, 14px); margin-left: -1px; }
[data-dir="btt"] .cg-edge.e-glow::before, [data-dir="btt"] .cg-edge.e-holo::before { top: 100%; left: 0; right: 0; height: var(--edge-span, 14px); margin-top: -1px; }
[data-dir="ttb"] .cg-edge.e-glow::before, [data-dir="ttb"] .cg-edge.e-holo::before { bottom: 100%; left: 0; right: 0; height: var(--edge-span, 14px); margin-bottom: -1px; }
/* у скруглённого края «рамка» занимает весь блок — шлейф внутри него, по скруглению */
.cap-round[data-dir="ltr"] > .cg-move > .cg-edge.e-glow::before, .cap-round[data-dir="ltr"] > .cg-move > .cg-edge.e-holo::before { right: 0; margin: 0; }
.cap-round[data-dir="rtl"] > .cg-move > .cg-edge.e-glow::before, .cap-round[data-dir="rtl"] > .cg-move > .cg-edge.e-holo::before { left: 0; margin: 0; }
.cap-round[data-dir="btt"] > .cg-move > .cg-edge.e-glow::before, .cap-round[data-dir="btt"] > .cg-move > .cg-edge.e-holo::before { top: 0; margin: 0; }
.cap-round[data-dir="ttb"] > .cg-move > .cg-edge.e-glow::before, .cap-round[data-dir="ttb"] > .cg-move > .cg-edge.e-holo::before { bottom: 0; margin: 0; }
.cg-edge.e-glow::before { background: linear-gradient(var(--ea, 90deg), transparent, var(--edge-light, #fff)); opacity: .4; }
.cg-edge.e-holo::before {
  background: linear-gradient(var(--ep, 180deg), #96ecff, #c8b8ff 32%, #fcf6ff 56%, #ffc2e8 78%, #a0beff);
  -webkit-mask-image: linear-gradient(var(--ea, 90deg), transparent, #000); mask-image: linear-gradient(var(--ea, 90deg), transparent, #000);
  opacity: .78; }

/* граница «пузырьки» и «блик» */
.cg-eb, .cg-eg { position: absolute; display: block; pointer-events: none; }
.cg-eb { border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.98) 0 10%, transparent 24%),
    radial-gradient(circle at 68% 76%, rgba(255,255,255,.5) 0 7%, transparent 18%),
    radial-gradient(circle, rgba(255,255,255,.05) 50%, rgba(255,255,255,.3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78); }
.cg-eb.cga { will-change: transform; animation: cg-ebob var(--dur, 3s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-ebob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.5px, -2.6px); } }
.cg-eg { clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  background: radial-gradient(circle, #fff 0 26%, rgba(255,255,255,.78) 62%, rgba(255,255,255,.5)); }
.cg-eg.cga { animation: cg-etw var(--dur, 3.4s) ease-in-out infinite; }
@keyframes cg-etw { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.06); } }
[data-dir="ltr"] .cg-eb, [data-dir="ltr"] .cg-eg { right: var(--ex, 0px); top: var(--ey, 50%); }
[data-dir="rtl"] .cg-eb, [data-dir="rtl"] .cg-eg { left: var(--ex, 0px); top: var(--ey, 50%); }
[data-dir="btt"] .cg-eb, [data-dir="btt"] .cg-eg { top: var(--ex, 0px); left: var(--ey, 50%); }
[data-dir="ttb"] .cg-eb, [data-dir="ttb"] .cg-eg { bottom: var(--ex, 0px); left: var(--ey, 50%); }
.cg.cg-static .cg-eb, .cg.cg-static .cg-eg, .cg.cg-still .cg-eb, .cg.cg-still .cg-eg { animation: none !important; }

/* каустика: световая сеть, два слоя плывут навстречу друг другу */
.cg-caustic { position: absolute; inset: 0; opacity: .42; overflow: hidden; pointer-events: none; }
.cg-caustic > i { position: absolute; inset: -60px 0 -60px -200px; display: block;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'120'%3E%3Cfilter%20id%3D'c'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.02%20.04'%20numOctaves%3D'2'%20seed%3D'4'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%203%200%200%200%20-1'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'table'%20tableValues%3D'0%200%200%200%200%200%200%200%20.22%20.75%201%20.75%20.22%200%200%200%200%200%200%200%200'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E"); background-size: 200px 120px;
  animation: cg-caus-a 18s linear infinite; will-change: transform; }
.cg-caustic > i.b { inset: -45px -150px -45px 0; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'90'%3E%3Cfilter%20id%3D'c'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%20color-interpolation-filters%3D'sRGB'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.028%20.05'%20numOctaves%3D'2'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%203%200%200%200%20-1'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'table'%20tableValues%3D'0%200%200%200%200%200%200%200%20.22%20.75%201%20.75%20.22%200%200%200%200%200%200%200%200'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E"); background-size: 150px 90px; opacity: .7; animation: cg-caus-b 24s linear infinite; }
@keyframes cg-caus-a { from { transform: translate(0, 0); } to { transform: translate(200px, 60px); } }
@keyframes cg-caus-b { from { transform: translate(0, 0); } to { transform: translate(-150px, -45px); } }
.cg.cg-static .cg-caustic > i, .cg.cg-still .cg-caustic > i { animation: none; }

/* блики: голографический проход, искры кристалла */
.cg-hl .cg-sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 26%; opacity: .5;
  background: linear-gradient(90deg, transparent, rgba(150,236,255,.46) 22%, rgba(204,188,255,.62) 46%, rgba(252,246,255,.5) 58%, rgba(255,194,232,.48) 76%, transparent);
  transform: skewX(-18deg) translateX(-160%);
  animation: cg-sweep calc(8s / var(--hl-speed, 1)) ease-in-out infinite; }
@keyframes cg-sweep {
  0%, 24%  { transform: skewX(-18deg) translateX(-160%); }
  70%, 100%{ transform: skewX(-18deg) translateX(480%); }
}
.cg.cg-static .cg-sweep, .cg.cg-still .cg-sweep { animation: none; transform: skewX(-18deg) translateX(150%); }
.cg-twk { transform-box: fill-box; transform-origin: center; animation: cg-twk 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-twk { 0%, 100% { transform: scale(.72); } 50% { transform: scale(1.06); } }
.cg.cg-static .cg-twk, .cg.cg-still .cg-twk { animation: none; }

/* вид при цели: голографический проход, искры, пузырьки, цветение, волна */
.cg-fin-shine.holo { background: linear-gradient(90deg, transparent, rgba(150,236,255,.5) 24%, rgba(204,188,255,.7) 46%, rgba(252,246,255,.6) 58%, rgba(255,194,232,.52) 76%, transparent); }
.cg-fin-gl, .cg-fin-bub, .cg-fin-bloom, .cg-fin-ripple { position: absolute; display: block; opacity: 0; pointer-events: none; }
.cg-fin-gl { clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  background: radial-gradient(circle, #fff 0 28%, rgba(255,255,255,.76) 62%, rgba(255,255,255,.45)); }
.cg.is-complete .cg-fin-gl { animation: cg-fin-tw 2.9s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-tw { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(28deg); } }
.cg-fin-bub { border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.98) 0 10%, transparent 24%),
    radial-gradient(circle, rgba(255,255,255,.06) 50%, rgba(255,255,255,.32) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.cg.is-complete .cg-fin-bub { animation: cg-rise var(--dur, 4s) ease-in infinite; animation-delay: var(--d, 0s); }
.cg-fin-bloom { transform: rotate(var(--rot, 0deg)) scale(.15); }
.cg-fin-bloom > b { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cg.is-complete .cg-fin-bloom { animation: cg-bloom 1.15s cubic-bezier(.2, 1.35, .4, 1) both; animation-delay: var(--d, 0s); }
@keyframes cg-bloom { 0% { opacity: 0; transform: rotate(calc(var(--rot, 0deg) - 40deg)) scale(.15); } 100% { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); } }
.cg-fin-ripple { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--edge-light, #fff), 0 0 10px var(--edge-glow-c, rgba(255,255,255,.6)); }
.cg.is-complete .cg-fin-ripple { animation: cg-fin-rip 3.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-rip { 0% { opacity: 0; transform: scale(.22); } 14% { opacity: .75; } 100% { opacity: 0; transform: scale(1.06); } }
/* без анимации: итоговое состояние (искры и цветы остаются, пузырьки/волна — нет) */
.cg.cg-static.is-complete .cg-fin-gl, .cg.cg-still.is-complete .cg-fin-gl { animation: none !important; opacity: .9; transform: scale(1); }
.cg.cg-static.is-complete .cg-fin-bloom, .cg.cg-still.is-complete .cg-fin-bloom { animation: none !important; opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
.cg.cg-static .cg-fin-bub, .cg.cg-still .cg-fin-bub, .cg.cg-static .cg-fin-ripple, .cg.cg-still .cg-fin-ripple { animation: none !important; opacity: 0; }

/* ============================================================================
 *  v5 · ДЕКОР: отдельные «кирпичики» (цветок, лепесток, осколок, жемчужина)
 * ========================================================================== */
.cg-d-flowers > b, .cg-d-petals > b, .cg-d-shards > b { transform: scaleX(var(--flip, 1)); }
/* цветок: пять передних лепестков и пять задних (темнее, выглядывают между ними), сердцевина-жемчужинка */
.cg-d-flowers > b, .cg-fin-bloom > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(72%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(144%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(216%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(288%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(36%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(108%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(180%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(252%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(324%2050%2050)'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(72%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(144%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(216%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'29'%20rx%3D'13'%20ry%3D'22'%20transform%3D'rotate(288%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(36%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(108%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(180%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(252%2050%2050)'%2F%3E%3Cellipse%20cx%3D'50'%20cy%3D'33'%20rx%3D'10.5'%20ry%3D'17'%20transform%3D'rotate(324%2050%2050)'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.34) 0 13%, rgba(0,0,0,0) 34%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 52%, rgba(255,255,255,.26) 88%),
    repeating-conic-gradient(from -36deg at 50% 50%, rgba(0,0,0,.26) 0 6deg, rgba(255,255,255,.42) 6deg 36deg, rgba(255,255,255,.04) 36deg 66deg, rgba(0,0,0,.26) 66deg 72deg),
    var(--dc); }
.cg-d-flowers > b::after, .cg-fin-bloom > b::after { content: ""; position: absolute; inset: 37%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, #ffeaa6 42%, #d9a63e 100%);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.22), 0 .5px 1px rgba(0,0,0,.25); }
/* лепесток: капля с жилкой и светлым кончиком */
.cg-d-petals > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2080'%3E%3Cpath%20d%3D'M30%202%20C46%2016%2056%2042%2030%2078%20C4%2042%2014%2016%2030%202Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2080'%3E%3Cpath%20d%3D'M30%202%20C46%2016%2056%2042%2030%2078%20C4%2042%2014%2016%2030%202Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background:
    radial-gradient(ellipse 5% 40% at 50% 56%, rgba(255,255,255,.55), rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 62% 38% at 50% 14%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    linear-gradient(100deg, rgba(255,255,255,.4) 0 18%, rgba(255,255,255,0) 52%, rgba(0,0,0,.24) 100%),
    var(--dc); }
/* осколок: вытянутый неровный кристалл, три плоскости, острое ребро-блик */
.cg-d-shards > b {
  clip-path: polygon(46% 0, 74% 30%, 66% 72%, 52% 100%, 30% 74%, 24% 34%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0 22%, transparent 22%),
    linear-gradient(112deg, transparent 34%, rgba(255,255,255,.95) 41% 45%, transparent 52%),
    linear-gradient(90deg, rgba(255,255,255,.28) 0 50%, rgba(0,0,0,.2) 50% 100%),
    linear-gradient(170deg, #fff 0%, var(--dc) 52%, rgba(255,255,255,.55) 100%); }
/* жемчужина: объём, главный и малый блик, переливчатый «шёлк», контактная тень */
.cg-d-pearls > b { border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, #fff 0 10%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.5), rgba(255,255,255,0) 38%),
    conic-gradient(from 210deg at 50% 50%, rgba(160,240,255,.42), rgba(255,170,230,.42), rgba(255,246,190,.38), rgba(190,170,255,.42), rgba(160,240,255,.42)),
    radial-gradient(circle at 42% 38%, #fff, var(--dc) 62%, rgba(0,0,0,.28) 125%);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.28); }
.cg-d.a-fall { animation: cg-fall var(--dur, 5.4s) ease-in-out infinite; }
@keyframes cg-fall {
  0%   { transform: translate(0, -4px) rotate(var(--rot, 0deg)); opacity: 0; }
  16%  { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translate(7px, 17px) rotate(calc(var(--rot, 0deg) + 52deg)); opacity: 0; }
}
.cg.cg-static .cg-d.a-fall, .cg.cg-still .cg-d.a-fall { animation: none; opacity: 1; }

/* ============================================================================
 *  v5 · ОФОРМЛЕНИЕ НАЗВАНИЯ И СУММ (атрибуты ставит рендерер)
 * ========================================================================== */
.cg-text[data-td="underline"] .cg-title .cg-tx {
  background: linear-gradient(90deg, transparent, var(--td-c) 14%, var(--td-c) 86%, transparent) 0 100% / 100% 1.5px no-repeat; padding-bottom: .16em; }
.cg-text[data-td="holo"] .cg-title .cg-tx {
  background: linear-gradient(90deg, transparent, #96ecff 12%, #c8b8ff 36%, #fcf6ff 54%, #ffc2e8 72%, #a0beff 90%, transparent) 0 100% / 100% 2px no-repeat; padding-bottom: .18em; }
.cg-text[data-td="pearl"] .cg-title .cg-tx::before { content: ""; display: inline-block; width: .44em; height: .44em; margin-right: .5em; border-radius: 50%; vertical-align: .08em;
  background:
    radial-gradient(circle at 31% 27%, #fff 0 14%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 42% 38%, #fff, var(--td-c) 64%, rgba(0,0,0,.3) 130%);
  box-shadow: 0 .05em .1em rgba(0,0,0,.28); }
.cg-text[data-td="crystal"] .cg-title .cg-tx::before, .cg-text[data-td="crystal"] .cg-title .cg-tx::after {
  content: ""; display: inline-block; vertical-align: .02em;
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
  background:
    linear-gradient(105deg, rgba(255,255,255,.92) 0 42%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0 40%, transparent 40%),
    var(--td-c); }
.cg-text[data-td="crystal"] .cg-title .cg-tx::before { width: .5em; height: .62em; margin-right: .5em; }
.cg-text[data-td="crystal"] .cg-title .cg-tx::after { width: .32em; height: .4em; margin-left: .5em; }
.cg-text[data-td="label"] .cg-title .cg-tx { padding: .1em .72em; border-radius: 99px; background: var(--td-bg);
  box-shadow: inset 0 0 0 1px var(--td-rim), inset 0 1px 0 rgba(255,255,255,.42); }
.cg-text[data-td="side"] .cg-title .cg-tx::before, .cg-text[data-td="side"] .cg-title .cg-tx::after {
  content: ""; display: inline-block; width: 1.15em; height: 1px; vertical-align: .32em; }
.cg-text[data-td="side"] .cg-title .cg-tx::before { margin-right: .55em;
  background: radial-gradient(circle at 100% 50%, var(--td-c) 0 2px, transparent 2.6px), linear-gradient(90deg, transparent, var(--td-c)); }
.cg-text[data-td="side"] .cg-title .cg-tx::after { margin-left: .55em;
  background: radial-gradient(circle at 0% 50%, var(--td-c) 0 2px, transparent 2.6px), linear-gradient(270deg, transparent, var(--td-c)); }

.cg-text[data-au-amount="chip"] .cg-current { padding: .02em .55em; border-radius: 99px; background: var(--am-bg);
  box-shadow: inset 0 0 0 1px var(--am-rim), inset 0 1px 0 rgba(255,255,255,.4); }
.cg-text[data-au-amount="line"] .cg-current {
  background: linear-gradient(90deg, transparent, var(--am-c) 14%, var(--am-c) 86%, transparent) 0 100% / 100% 1.5px no-repeat; padding-bottom: .12em; }
.cg-text[data-au-amount="holo"] .cg-current, .cg-text[data-au-percent="holo"] .cg-percent .cg-tx {
  padding: .02em .55em; border-radius: 99px; border: 1px solid transparent;
  background: linear-gradient(var(--am-bg), var(--am-bg)) padding-box, linear-gradient(100deg, #96ecff, #c8b8ff 32%, #fcf6ff 54%, #ffc2e8 76%, #a0beff) border-box; }
.cg-text[data-au-percent="holo"] .cg-percent .cg-tx { background: linear-gradient(var(--pc-bg), var(--pc-bg)) padding-box, linear-gradient(100deg, #96ecff, #c8b8ff 32%, #fcf6ff 54%, #ffc2e8 76%, #a0beff) border-box; }
.cg-text[data-au-goal="pill"] .cg-target { padding: .02em .5em; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--am-rim); }
.cg-text[data-au-goal="soft"] .cg-target { padding: .02em .5em; border-radius: 99px; background: var(--am-bg); }
.cg-text[data-au-percent="chip"] .cg-percent .cg-tx { padding: .02em .55em; border-radius: 99px; background: var(--pc-bg);
  box-shadow: inset 0 0 0 1px var(--pc-rim), inset 0 1px 0 rgba(255,255,255,.4); }


/* ============================================================================
 *  v5b · КРАЯ (лезвие, курсор, пиксель), ОВЕРЛЕИ, ЗАВЕРШЕНИЕ, ПУТЬ, ЦИФРЫ
 * ========================================================================== */
.cg-ec { position: absolute; display: block; pointer-events: none; }
[data-dir="ltr"] .cg-ec { right: 0; top: 0; bottom: 0; width: 0; --ea: 90deg; }
[data-dir="rtl"] .cg-ec { left: 0; top: 0; bottom: 0; width: 0; --ea: 270deg; }
[data-dir="btt"] .cg-ec { top: 0; left: 0; right: 0; height: 0; --ea: 0deg; }
[data-dir="ttb"] .cg-ec { bottom: 0; left: 0; right: 0; height: 0; --ea: 180deg; }
.cg-ec::before, .cg-ec::after { content: ""; position: absolute; display: block; }
.cg.is-empty .cg-ec { opacity: 0; }
/* курсор: яркий блок с мигающим «шагом» и тонкой колонкой развёртки позади */
[data-dir="ltr"] .cg-ec.e-cursor::before { right: 0; top: 50%; width: var(--eb-t, 5px); height: var(--eb-l, 62%); transform: translateY(-50%); }
[data-dir="rtl"] .cg-ec.e-cursor::before { left: 0; top: 50%; width: var(--eb-t, 5px); height: var(--eb-l, 62%); transform: translateY(-50%); }
[data-dir="btt"] .cg-ec.e-cursor::before { top: 0; left: 50%; height: var(--eb-t, 5px); width: var(--eb-l, 62%); transform: translateX(-50%); }
[data-dir="ttb"] .cg-ec.e-cursor::before { bottom: 0; left: 50%; height: var(--eb-t, 5px); width: var(--eb-l, 62%); transform: translateX(-50%); }
.cg-ec.e-cursor::before { background: var(--edge-light, #fff); box-shadow: 0 0 var(--edge-glow, 6px) var(--edge-glow-c, rgba(255,255,255,.8)); animation: cg-blink 1.15s steps(1, end) infinite; }
[data-dir="ltr"] .cg-ec.e-cursor::after { right: var(--eb-t, 5px); top: 0; bottom: 0; width: var(--edge-span, 24px); }
[data-dir="rtl"] .cg-ec.e-cursor::after { left: var(--eb-t, 5px); top: 0; bottom: 0; width: var(--edge-span, 24px); }
[data-dir="btt"] .cg-ec.e-cursor::after { top: var(--eb-t, 5px); left: 0; right: 0; height: var(--edge-span, 24px); }
[data-dir="ttb"] .cg-ec.e-cursor::after { bottom: var(--eb-t, 5px); left: 0; right: 0; height: var(--edge-span, 24px); }
.cg-ec.e-cursor::after { background: repeating-linear-gradient(var(--ea, 90deg), rgba(255,255,255,0) 0 3px, rgba(255,255,255,.34) 3px 4px);
  -webkit-mask-image: linear-gradient(var(--ea, 90deg), transparent, #000); mask-image: linear-gradient(var(--ea, 90deg), transparent, #000); }
@keyframes cg-blink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .25; } }
/* лезвие: тонкая косая кромка света и длинный мягкий хвост за ней */
[data-dir="ltr"] .cg-ec.e-blade::before { right: -1px; top: -3px; bottom: -3px; width: 2px; transform: skewX(-19deg); }
[data-dir="rtl"] .cg-ec.e-blade::before { left: -1px; top: -3px; bottom: -3px; width: 2px; transform: skewX(19deg); }
[data-dir="btt"] .cg-ec.e-blade::before { top: -1px; left: -3px; right: -3px; height: 2px; }
[data-dir="ttb"] .cg-ec.e-blade::before { bottom: -1px; left: -3px; right: -3px; height: 2px; }
.cg-ec.e-blade::before { background: var(--edge-light, #fff); box-shadow: 0 0 var(--edge-glow, 8px) var(--edge-glow-c, rgba(255,255,255,.85)); }
[data-dir="ltr"] .cg-ec.e-blade::after { right: 1px; top: 0; bottom: 0; width: var(--edge-span, 34px); transform: skewX(-19deg); transform-origin: 100% 50%; }
[data-dir="rtl"] .cg-ec.e-blade::after { left: 1px; top: 0; bottom: 0; width: var(--edge-span, 34px); transform: skewX(19deg); transform-origin: 0 50%; }
[data-dir="btt"] .cg-ec.e-blade::after { top: 1px; left: 0; right: 0; height: var(--edge-span, 34px); }
[data-dir="ttb"] .cg-ec.e-blade::after { bottom: 1px; left: 0; right: 0; height: var(--edge-span, 34px); }
.cg-ec.e-blade::after { background: linear-gradient(var(--ea, 90deg), rgba(255,255,255,0), rgba(255,255,255,.5)); }
/* пиксельный курсор: ступенчатый «блок» из квадратов, мигает без плавности */
.cg-ec.e-pixel::before { width: var(--eb-t, 6px); height: var(--eb-t, 6px); top: 50%; margin-top: calc(var(--eb-t, 6px) * -.5); background: var(--edge-light, #fff);
  box-shadow: 0 calc(var(--eb-t, 6px) * -1) 0 var(--edge-light, #fff), 0 var(--eb-t, 6px) 0 var(--edge-light, #fff),
              calc(var(--eb-t, 6px) * -1) 0 0 rgba(255,255,255,.62), calc(var(--eb-t, 6px) * -1) calc(var(--eb-t, 6px) * -1) 0 rgba(255,255,255,.32), calc(var(--eb-t, 6px) * -1) var(--eb-t, 6px) 0 rgba(255,255,255,.32);
  animation: cg-pxblink 1s steps(1, end) infinite; }
[data-dir="ltr"] .cg-ec.e-pixel::before { right: 0; }
[data-dir="rtl"] .cg-ec.e-pixel::before { left: 0; transform: scaleX(-1); }
[data-dir="btt"] .cg-ec.e-pixel::before { top: 0; left: 50%; margin: 0 0 0 calc(var(--eb-t, 6px) * -.5); transform: rotate(-90deg); }
[data-dir="ttb"] .cg-ec.e-pixel::before { bottom: 0; top: auto; left: 50%; margin: 0 0 0 calc(var(--eb-t, 6px) * -.5); transform: rotate(90deg); }
@keyframes cg-pxblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; } }
.cg.cg-still .cg-ec::before { animation: none; }

/* сегменты: нить, объём жемчужины, пиксельная фаска */
.cg-segdeco { position: absolute; inset: 0; pointer-events: none; background-repeat: repeat; }
.cg-thread { position: absolute; inset: 0; }

/* оверлеи заливки */
.cg-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cg-ov > i, .cg-ov > div { position: absolute; display: block; }
.ov-lens { border-radius: 60% 60% 50% 50% / 100% 100% 40% 40%;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(255,255,255,.3) 62%, rgba(255,255,255,.04)); }
.ov-dot { border-radius: 50%; background: rgba(255,255,255,.88); }
.ov-low { left: 8%; right: 12%; bottom: 9%; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62) 30%, rgba(255,255,255,.2) 80%, transparent); }
.ov-pearl { inset: -25%;
  background:
    radial-gradient(40% 60% at 24% 32%, rgba(252,246,255,.78), transparent 70%),
    radial-gradient(44% 64% at 70% 58%, rgba(204,188,255,.56), transparent 70%),
    radial-gradient(50% 70% at 48% 105%, rgba(150,236,255,.5), transparent 72%),
    radial-gradient(30% 50% at 88% 20%, rgba(255,194,232,.46), transparent 70%);
  animation: cg-pearl 17s ease-in-out infinite; will-change: transform; }
.ov-fac { inset: 0; }
.ov-fac > svg { display: block; }
.cg-facetlight { position: absolute; display: block; pointer-events: none; top: 0; bottom: 0; right: 0; width: 28%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42)); }
[data-dir="rtl"] .cg-facetlight { right: auto; left: 0; background: linear-gradient(270deg, rgba(255,255,255,0), rgba(255,255,255,.42)); }
[data-dir="btt"] .cg-facetlight { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 34%; background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,.42)); }
[data-dir="ttb"] .cg-facetlight { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 34%; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.42)); }
.ov-holo { top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(100deg, rgba(150,236,255,0) 0%, rgba(150,236,255,.46) 14%, rgba(200,184,255,.56) 32%, rgba(252,246,255,.42) 46%,
    rgba(255,194,232,.5) 62%, rgba(160,190,255,.46) 80%, rgba(150,236,255,0) 100%) 0 0 / 33.3334% 100% repeat-x;
  animation: cg-slide 14s linear infinite; will-change: transform; }
.ov-wave { will-change: transform; animation: cg-ovwave var(--dur, 12s) linear infinite; }
@keyframes cg-ovwave { to { transform: translateX(calc(-1 * var(--per, 80px))); } }
.ov-dust { inset: 0; background:
  radial-gradient(60% 80% at 20% 30%, rgba(190,170,255,.22), transparent 70%),
  radial-gradient(50% 70% at 80% 70%, rgba(150,200,255,.2), transparent 70%); }
.ov-star { border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(255,255,255,.85); }
.ov-star.tw { animation: cg-ovtw 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-ovtw { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.ov-lines { inset: 0 -40px;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 12px, rgba(255,255,255,.22) 12px 14px);
  animation: cg-ovl 2.4s linear infinite; will-change: transform; }
@keyframes cg-ovl { to { transform: translateX(14px); } }
.ov-pulse { top: 0; bottom: 0; left: 0; width: 18%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation: cg-ovpulse 2.8s ease-in infinite; will-change: transform; }
@keyframes cg-ovpulse { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
[data-dir="rtl"] .ov-pulse { animation-direction: reverse; }
.ov-px { background: #fff; opacity: 0; animation: cg-ovpx var(--dur, 1.8s) steps(1, end) infinite; animation-delay: var(--d, 0s); }
@keyframes cg-ovpx { 0%, 100% { opacity: 0; } 40%, 60% { opacity: .95; } }
.ov-light { inset: -20%;
  background:
    radial-gradient(34% 50% at 28% 24%, rgba(255,250,214,.55), transparent 72%),
    radial-gradient(30% 46% at 74% 62%, rgba(214,255,220,.36), transparent 72%);
  animation: cg-pearl 20s ease-in-out infinite; will-change: transform; }
.ov-leaf { background: rgba(4,38,24,.26); opacity: .42; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%20100'%3E%3Cpath%20d%3D'M30%202%20C52%2022%2056%2062%2030%2098%20C4%2062%208%2022%2030%202Z'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%20100'%3E%3Cpath%20d%3D'M30%202%20C52%2022%2056%2062%2030%2098%20C4%2062%208%2022%2030%202Z'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  transform: rotate(var(--rot, 0deg)); animation: cg-ovleaf 11s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-ovleaf {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 6deg)) translate(8px, -4px); }
}
.cg.cg-still .cg-ov *, .cg.cg-static .cg-ov * { animation: none !important; }
.cg.cg-still .ov-px, .cg.cg-static .ov-px { opacity: .7; }

/* завершение: переливание, вспышка, жемчуг, созвездие, заряд, пиксели */
.cg-fin-spill, .cg-fin-drop, .cg-fin-flash, .cg-fin-pearl, .cg-fin-const, .cg-fin-chargeflash, .cg-fin-bar, .cg-fin-px {
  position: absolute; display: block; opacity: 0; pointer-events: none; }
.cg-fin-spill { background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.34) 60%, rgba(255,255,255,0));
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'10'%3E%3Cpath%20d%3D'M0%200%20H48%20V5%20Q36%2010%2024%205%20T0%205%20Z'%2F%3E%3C%2Fsvg%3E") 0 100% / 48px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat;
          mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'48'%20height%3D'10'%3E%3Cpath%20d%3D'M0%200%20H48%20V5%20Q36%2010%2024%205%20T0%205%20Z'%2F%3E%3C%2Fsvg%3E") 0 100% / 48px 10px repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 9px) no-repeat;
  transform: translateY(-105%); }
.cg.is-complete .cg-fin-spill { animation: cg-fin-spill 7s ease-in-out infinite; }
@keyframes cg-fin-spill {
  0%   { opacity: 1; transform: translateY(-105%); }
  16%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 1; transform: translateY(-6%); }
  54%  { opacity: 1; transform: translateY(-105%); }
  100% { opacity: 1; transform: translateY(-105%); }
}
.cg-fin-drop { border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 34% 30%, #fff 0 18%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.25)); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.8); }
.cg.is-complete .cg-fin-drop { animation: cg-fin-drop 7s ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-drop {
  0%, 8%  { opacity: 0; transform: translateY(0) scale(.5); }
  14%     { opacity: 1; transform: translateY(0) scale(1); }
  42%     { opacity: .95; transform: translateY(var(--fall, 30px)) scale(1, 1.2); }
  48%, 100% { opacity: 0; transform: translateY(var(--fall, 30px)) scale(1, 1.2); }
}
.cg-fin-flash { background: linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.78) 46%, rgba(255,255,255,0) 64%); }
.cg.is-complete .cg-fin-flash { animation: cg-fin-flash 6.5s ease-out infinite; }
@keyframes cg-fin-flash { 0%, 100% { opacity: 0; } 5% { opacity: 1; } 15% { opacity: 0; } }
.cg.is-complete .cg-fin-gl.cg-fin-big { animation: cg-fin-bigtw 6.5s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-bigtw { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 5% { opacity: 1; transform: scale(1.15) rotate(20deg); } 20% { opacity: 0; transform: scale(.6) rotate(40deg); } }
.cg-fin-pearl { border-radius: 50%; }
.cg-fin-pearl > b { position: absolute; inset: 0; display: block; border-radius: 50%; }
.cg.is-complete .cg-fin-pearl { animation: cg-fin-pearl 6.5s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-pearl {
  0%   { opacity: 0; transform: translate(0, 0) scale(.2); }
  6%   { opacity: 1; transform: translate(0, 0) scale(1); }
  42%  { opacity: .95; transform: translate(var(--dx, 30px), var(--dy, 10px)) scale(1); }
  56%, 100% { opacity: 0; transform: translate(var(--dx, 30px), var(--dy, 10px)) scale(.9); }
}
.cg.is-complete .cg-fin-const { opacity: 1; }
.cg-fin-const .cl { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.cg.is-complete .cg-fin-const .cl { animation: cg-fin-line 8s ease-in-out infinite; }
@keyframes cg-fin-line { 0%, 8% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: .85; } 46% { stroke-dashoffset: 0; opacity: .85; } 78% { stroke-dashoffset: 0; opacity: .85; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.cg-fin-const .st { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cg.is-complete .cg-fin-const .st { animation: cg-fin-st 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .38s); }
@keyframes cg-fin-st { 0%, 4% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; transform: scale(1.25); } 18% { transform: scale(1); } 78% { opacity: 1; } 92%, 100% { opacity: 0; } }
.cg-fin-chargeflash { background: rgba(255,255,255,.55); }
.cg.is-complete .cg-fin-chargeflash { animation: cg-fin-chg 5.5s steps(1, end) infinite; }
@keyframes cg-fin-chg { 0% { opacity: .65; } 5% { opacity: .1; } 8% { opacity: .5; } 12%, 100% { opacity: 0; } }
.cg-fin-bar { background: linear-gradient(180deg, rgba(255,255,255,0), #fff 18% 82%, rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(255,255,255,.7); }
.cg.is-complete .cg-fin-bar { animation: cg-fin-barx 5.5s steps(14, end) infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-barx { 0% { opacity: 1; transform: translateX(0); } 30% { opacity: 1; transform: translateX(var(--span, 200px)); } 31%, 100% { opacity: 0; transform: translateX(var(--span, 200px)); } }
.cg-fin-px { background: #fff; }
.cg.is-complete .cg-fin-px { animation: cg-fin-pxb 3s steps(1, end) infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-pxb { 0%, 100% { opacity: 0; } 20% { opacity: .95; } 40% { opacity: 0; } 60% { opacity: .8; } 72% { opacity: 0; } }
.cg.cg-still .cg-fin-spill, .cg.cg-static .cg-fin-spill, .cg.cg-still .cg-fin-drop, .cg.cg-static .cg-fin-drop,
.cg.cg-still .cg-fin-flash, .cg.cg-static .cg-fin-flash, .cg.cg-still .cg-fin-pearl, .cg.cg-static .cg-fin-pearl,
.cg.cg-still .cg-fin-chargeflash, .cg.cg-static .cg-fin-chargeflash, .cg.cg-still .cg-fin-bar, .cg.cg-static .cg-fin-bar,
.cg.cg-still .cg-fin-px, .cg.cg-static .cg-fin-px { animation: none !important; opacity: 0; }
.cg.cg-still.is-complete .cg-fin-const .st, .cg.cg-static.is-complete .cg-fin-const .st { animation: none !important; opacity: 1; transform: none; }
.cg.cg-still.is-complete .cg-fin-const .cl, .cg.cg-static.is-complete .cg-fin-const .cl { animation: none !important; opacity: .8; stroke-dashoffset: 0; }

/* путь вместо полосы */
.cg-pathlayer { position: absolute; inset: 0; pointer-events: none; }
.cg-path { position: absolute; }
.cg-path > svg { display: block; overflow: visible; }
.cg-pm { transform: scaleX(var(--pf, var(--p))); transition: transform var(--fill-dur, 1.6s) var(--fill-ease, cubic-bezier(.25, .85, .3, 1)); }
.cg.cg-instant .cg-pm { transition: none !important; }
.pn .pnn { transform: scale(0); opacity: 0; transform-origin: 0 0; transition: transform .55s cubic-bezier(.2, 1.5, .4, 1), opacity .25s ease; }
.pn.on .pnn { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 2px var(--edge-glow-c, rgba(255,255,255,.8))); }
.pn.tw.on .pnn { animation: cg-ovtw 3.2s ease-in-out infinite; }
.cg.cg-still .pn .pnn, .cg.cg-static .pn.tw.on .pnn { animation: none; }

/* реакция цифр на новый донат */
.cg-text.nfx-lift .cg-current, .cg-text.nfx-lift .cg-percent .cg-tx { display: inline-block; animation: nfx-lift .9s cubic-bezier(.2, .8, .3, 1); }
@keyframes nfx-lift { 0% { transform: translateY(0); filter: brightness(1); } 28% { transform: translateY(-2px); filter: brightness(1.3); } 100% { transform: translateY(0); filter: brightness(1); } }
.cg-text.nfx-glow .cg-current, .cg-text.nfx-glow .cg-percent .cg-tx { animation: nfx-glow 1s ease-out; }
@keyframes nfx-glow { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 10px var(--num-c, #fff), 0 0 2px var(--num-c, #fff); } 100% { text-shadow: 0 0 0 transparent; } }
.cg-text.nfx-shimmer .cg-current, .cg-text.nfx-shimmer .cg-percent .cg-tx {
  background: linear-gradient(100deg, var(--num-c, #fff) 38%, #fff 50%, var(--num-c, #fff) 62%) 130% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: nfx-sh .95s ease-out; }
@keyframes nfx-sh { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* движение маркера (необязательное): блик, орбита, жидкое покачивание */
.oa-glint.oa-pc .oa-p { animation: oa-glint calc(3.4s / var(--oa-sp)) ease-in-out infinite; }
.oa-orbit.oa-pc .oa-p { animation: oa-orbit calc(5s / var(--oa-sp)) linear infinite; }
.oa-wobble.oa-pc .oa-p { animation: oa-wobble calc(3.8s / var(--oa-sp)) ease-in-out infinite; }
@keyframes oa-glint { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.7) saturate(1.1) drop-shadow(0 0 3px rgba(255,255,255,.9)); } 90% { filter: brightness(1); } }
@keyframes oa-orbit { from { transform: rotate(0deg) translateX(1.6px) rotate(0deg); } to { transform: rotate(360deg) translateX(1.6px) rotate(-360deg); } }
@keyframes oa-wobble { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.06, .95); } 50% { transform: scale(.96, 1.05); } 75% { transform: scale(1.04, .97); } }

/* оформление названия: подвесная табличка, стеклянный ярлык, жемчужный разделитель, кристальные вкладки, веточки */
.cg-text[data-td="hanging"] .cg-title .cg-tx { position: relative; display: inline-block; padding: .12em .8em; margin-top: .42em; border-radius: .5em; background: var(--td-bg);
  box-shadow: inset 0 0 0 1px var(--td-rim), inset 0 1px 0 rgba(255,255,255,.4); }
.cg-text[data-td="hanging"] .cg-title .cg-tx::before { content: ""; position: absolute; left: 20%; right: 20%; top: -.44em; height: .44em;
  background: linear-gradient(var(--td-c), var(--td-c)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--td-c), var(--td-c)) 100% 0 / 1px 100% no-repeat,
              radial-gradient(circle at 0 0, var(--td-c) 0 .09em, transparent .1em) 0 0 / 100% 100% no-repeat, radial-gradient(circle at 100% 0, var(--td-c) 0 .09em, transparent .1em) 0 0 / 100% 100% no-repeat; }
.cg-text[data-td="tag"] .cg-title .cg-tx { display: inline-block; position: relative; padding: .1em .8em .1em 1.25em;
  clip-path: polygon(.55em 0, 100% 0, 100% 100%, .55em 100%, 0 50%); background: linear-gradient(180deg, var(--td-bg), var(--td-bg)); }
.cg-text[data-td="tag"] .cg-title .cg-tx::before { content: ""; position: absolute; left: .62em; top: 50%; width: .3em; height: .3em; margin-top: -.15em; border-radius: 50%;
  background: var(--td-c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.cg-text[data-td="pearls"] .cg-title .cg-tx::after { content: ""; display: block; height: .42em; margin-top: .14em;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 .05em, var(--td-c) .06em .16em, transparent .17em) center / .42em .42em no-repeat,
    linear-gradient(90deg, transparent, var(--td-c) 30%, var(--td-c) 41%, transparent 41% 59%, var(--td-c) 59% 70%, transparent) center / 100% 1px no-repeat; }
.cg-text[data-td="tabs"] .cg-title .cg-tx::before, .cg-text[data-td="tabs"] .cg-title .cg-tx::after {
  content: ""; display: inline-block; width: .9em; height: .46em; vertical-align: .1em;
  background: linear-gradient(105deg, rgba(255,255,255,.8) 0 38%, transparent 38%), var(--td-c); }
.cg-text[data-td="tabs"] .cg-title .cg-tx::before { margin-right: .5em; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.cg-text[data-td="tabs"] .cg-title .cg-tx::after { margin-left: .5em; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); transform: scaleX(1); }
.cg-text[data-td="botanical"] .cg-title .cg-tx::before, .cg-text[data-td="botanical"] .cg-title .cg-tx::after {
  content: ""; display: inline-block; width: 1.5em; height: .72em; vertical-align: -.05em; background: var(--td-c);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2020'%3E%3Crect%20x%3D'1'%20y%3D'9.4'%20width%3D'36'%20height%3D'1.3'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M9%2010%20C8%203%2014%201%2019%202%20C19%208%2015%2011%209%2010Z'%2F%3E%3Cpath%20d%3D'M19%2010%20C19%2017%2025%2019%2030%2018%20C30%2012%2026%209%2019%2010Z'%2F%3E%3Cpath%20d%3D'M30%2010%20C31%205%2036%203%2041%204%20C40%209%2036%2011%2030%2010Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2044%2020'%3E%3Crect%20x%3D'1'%20y%3D'9.4'%20width%3D'36'%20height%3D'1.3'%20rx%3D'.6'%2F%3E%3Cpath%20d%3D'M9%2010%20C8%203%2014%201%2019%202%20C19%208%2015%2011%209%2010Z'%2F%3E%3Cpath%20d%3D'M19%2010%20C19%2017%2025%2019%2030%2018%20C30%2012%2026%209%2019%2010Z'%2F%3E%3Cpath%20d%3D'M30%2010%20C31%205%2036%203%2041%204%20C40%209%2036%2011%2030%2010Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.cg-text[data-td="botanical"] .cg-title .cg-tx::before { margin-right: .45em; }
.cg-text[data-td="botanical"] .cg-title .cg-tx::after { margin-left: .45em; transform: scaleX(-1); }


/* ============================================================================
 *  v5c · ДЕКОР: лист, луна, руны, кибер-узел, созвездие, ветка
 * ========================================================================== */
.cg-d-leaves > b, .cg-d-moons > b, .cg-d-branches > b { transform: scaleX(var(--flip, 1)); }
.cg-d-leaves > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%20100'%3E%3Cpath%20d%3D'M31%202%20C%2056%2022%2C%2054%2066%2C%2028%2098%20C%206%2066%2C%206%2024%2C%2031%202Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%20100'%3E%3Cpath%20d%3D'M31%202%20C%2056%2022%2C%2054%2066%2C%2028%2098%20C%206%2066%2C%206%2024%2C%2031%202Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 47%, rgba(255,255,255,.55) 49.5% 50.5%, rgba(255,255,255,0) 53%),
    linear-gradient(100deg, rgba(255,255,255,.4) 0 18%, rgba(255,255,255,0) 52%, rgba(0,0,0,.26) 100%),
    var(--dc); }
.cg-d-moons > b {
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 70% 36%, transparent 0 54%, #000 56%); mask-image: radial-gradient(circle at 70% 36%, transparent 0 54%, #000 56%);
  background:
    radial-gradient(circle at 24% 62%, rgba(0,0,0,.2) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 78%, rgba(0,0,0,.16) 0 4%, transparent 5%),
    linear-gradient(140deg, rgba(255,255,255,.85) -5%, var(--dc) 38%, rgba(0,0,0,.34) 125%); }
.cg-d-runes > b { background: var(--dc); }
.cg-d-runes.rg0 > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8%203%20V21%20M8%208%20L17%203%20M8%2013%20L17%208'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M8%203%20V21%20M8%208%20L17%203%20M8%2013%20L17%208'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.cg-d-runes.rg1 > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021%20V4%20M12%2011%20L5%204%20M12%2011%20L19%204'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021%20V4%20M12%2011%20L5%204%20M12%2011%20L19%204'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.cg-d-runes.rg2 > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%20L19%2010%20L12%2017%20L5%2010%20Z%20M12%2017%20V21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%20L19%2010%20L12%2017%20L5%2010%20Z%20M12%2017%20V21'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.cg-d-runes.rg3 > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2021%20V3%20H14%20L18%207%20L14%2011%20H7%20M11%2011%20L18%2021'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'2.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%2021%20V3%20H14%20L18%207%20L14%2011%20H7%20M11%2011%20L18%2021'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.cg-d-nodes > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.9'%20stroke-linecap%3D'square'%3E%3Cpath%20d%3D'M12%204.2%20L18.6%208%20V16%20L12%2019.8%20L5.4%2016%20V8%20Z'%2F%3E%3Cpath%20d%3D'M12%20.8%20V3.6%20M12%2020.4%20V23.2%20M.8%2012%20H3.6%20M20.4%2012%20H23.2'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.9'%20stroke-linecap%3D'square'%3E%3Cpath%20d%3D'M12%204.2%20L18.6%208%20V16%20L12%2019.8%20L5.4%2016%20V8%20Z'%2F%3E%3Cpath%20d%3D'M12%20.8%20V3.6%20M12%2020.4%20V23.2%20M.8%2012%20H3.6%20M20.4%2012%20H23.2'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background: radial-gradient(circle at 50% 50%, #fff 0 16%, var(--dc) 18% 100%); }
.cg-d-constellations > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2040'%3E%3Cpath%20d%3D'M7%2031%20L19%2015%20L33%2023%20L48%208%20L56%2019'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M7%2026%20L8.6%2029.4%20L12%2031%20L8.6%2032.6%20L7%2036%20L5.4%2032.6%20L2%2031%20L5.4%2029.4Z%20M19%209%20L20.8%2013.2%20L25%2015%20L20.8%2016.8%20L19%2021%20L17.2%2016.8%20L13%2015%20L17.2%2013.2Z%20M33%2019%20L34.2%2021.8%20L37%2023%20L34.2%2024.2%20L33%2027%20L31.8%2024.2%20L29%2023%20L31.8%2021.8Z%20M48%202%20L50.2%206%20L54.4%208%20L50.2%2010%20L48%2014.4%20L45.8%2010%20L41.6%208%20L45.8%206Z%20M56%2015%20L57.2%2017.8%20L60%2019%20L57.2%2020.2%20L56%2023%20L54.8%2020.2%20L52%2019%20L54.8%2017.8Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2060%2040'%3E%3Cpath%20d%3D'M7%2031%20L19%2015%20L33%2023%20L48%208%20L56%2019'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M7%2026%20L8.6%2029.4%20L12%2031%20L8.6%2032.6%20L7%2036%20L5.4%2032.6%20L2%2031%20L5.4%2029.4Z%20M19%209%20L20.8%2013.2%20L25%2015%20L20.8%2016.8%20L19%2021%20L17.2%2016.8%20L13%2015%20L17.2%2013.2Z%20M33%2019%20L34.2%2021.8%20L37%2023%20L34.2%2024.2%20L33%2027%20L31.8%2024.2%20L29%2023%20L31.8%2021.8Z%20M48%202%20L50.2%206%20L54.4%208%20L50.2%2010%20L48%2014.4%20L45.8%2010%20L41.6%208%20L45.8%206Z%20M56%2015%20L57.2%2017.8%20L60%2019%20L57.2%2020.2%20L56%2023%20L54.8%2020.2%20L52%2019%20L54.8%2017.8Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background: linear-gradient(120deg, #fff 0%, var(--dc) 50%, rgba(255,255,255,.8) 100%); }
.cg-d-branches > b {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2060'%3E%3Cpath%20d%3D'M20%2059%20C%2019%2042%2C%2023%2024%2C%2017%203'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20%2044%20C%2012%2042%2C%206%2036%2C%205%2029%20C%2012%2029%2C%2018%2033%2C%2020%2044Z%20M20.6%2036%20C%2028%2034%2C%2034%2028%2C%2035%2021%20C%2028%2021%2C%2022%2026%2C%2020.6%2036Z%20M19.2%2024%20C%2012%2022%2C%208%2016%2C%208%2010%20C%2014%2011%2C%2019%2015%2C%2019.2%2024Z%20M18.4%2014%20C%2024%2012%2C%2028%207%2C%2028%202%20C%2022%203%2C%2018.6%207%2C%2018.4%2014Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2060'%3E%3Cpath%20d%3D'M20%2059%20C%2019%2042%2C%2023%2024%2C%2017%203'%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%2F%3E%3Cpath%20d%3D'M20%2044%20C%2012%2042%2C%206%2036%2C%205%2029%20C%2012%2029%2C%2018%2033%2C%2020%2044Z%20M20.6%2036%20C%2028%2034%2C%2034%2028%2C%2035%2021%20C%2028%2021%2C%2022%2026%2C%2020.6%2036Z%20M19.2%2024%20C%2012%2022%2C%208%2016%2C%208%2010%20C%2014%2011%2C%2019%2015%2C%2019.2%2024Z%20M18.4%2014%20C%2024%2012%2C%2028%207%2C%2028%202%20C%2022%203%2C%2018.6%207%2C%2018.4%2014Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background:
    linear-gradient(100deg, rgba(255,255,255,.4) 0 20%, rgba(255,255,255,0) 55%, rgba(0,0,0,.26) 100%),
    var(--dc); }


/* гребень волны вдоль кривой края (круглый, косой, мениск, кристалл): контейнер на линии фронта, рисунок — SVG */
.cg-crestc { position: absolute; pointer-events: none; }
.cg-crestc[data-dir="ltr"] { right: 0; top: 0; bottom: 0; width: 0; }
.cg-crestc[data-dir="rtl"] { left: 0; top: 0; bottom: 0; width: 0; }
.cg-crestc[data-dir="btt"] { top: 0; left: 0; right: 0; height: 0; }
.cg-crestc[data-dir="ttb"] { bottom: 0; left: 0; right: 0; height: 0; }
.cg-crestc > svg { position: absolute; left: 0; top: 0; }
.cg.is-empty .cg-crestc { opacity: 0; }


/* ============================================================================
 *  v6 · окно прогресса, задняя пластина, прикреплённый пузырь, отражение
 * ========================================================================== */
.cg-winrim { position: absolute; pointer-events: none; }
.cg-winrim > svg { display: block; }
.cg-backplate { position: absolute; inset: 0; pointer-events: none; }
.cg-backplate > svg { position: absolute; left: 0; top: 0; overflow: visible; }

.cg-attlayer { position: absolute; inset: 0; pointer-events: none; }
.cg-att { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.cg-att-t { display: block; position: relative; z-index: 1; }
.att-bubble { border-radius: 50%; }
.att-badge  { border-radius: 50%; box-shadow: 0 0 0 3px var(--att-ring, rgba(255,255,255,.55)); }
.att-tag    { border-radius: 999px; }
/* хвостик пузыря смотрит на форму */
.att-bubble::after { content: ""; position: absolute; width: 22%; height: 22%; background: inherit; z-index: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%); border-radius: 0 0 0 40%; }
.att-bubble[data-anchor^="top"]::after { left: 14%; bottom: -8%; transform: rotate(-8deg); }
.att-bubble[data-anchor^="bottom"]::after { left: 14%; top: -8%; transform: scaleY(-1) rotate(-8deg); }
.att-bubble[data-anchor="left"]::after { right: -8%; top: 38%; transform: rotate(135deg); }
.att-bubble[data-anchor="right"]::after { left: -8%; top: 38%; transform: rotate(-45deg); }
.att-bubble[data-anchor="top"]::after { left: 38%; bottom: -8%; }
.att-bubble[data-anchor="bottom"]::after { left: 38%; top: -8%; transform: scaleY(-1); }
.st-glass { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); font-weight: 800;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.8), rgba(255,255,255,.2) 48%, rgba(120,160,255,.28) 100%);
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.75), inset 0 -6px 10px rgba(30,50,120,.25), 0 6px 14px rgba(0,0,20,.28); }
.st-pearl { color: #4a2f55; font-weight: 800;
  background: radial-gradient(circle at 34% 28%, #fff 0 12%, rgba(255,247,252,.96) 30%, #f2dfee 62%, #d4bfe0 100%);
  box-shadow: inset 0 -5px 10px rgba(150,100,180,.25), 0 5px 12px rgba(40,10,60,.3), inset 0 0 0 1px rgba(255,255,255,.8); }
.st-pearl::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from 200deg, rgba(150,236,255,.35), rgba(255,194,232,.38), rgba(204,188,255,.35), rgba(252,246,255,.3), rgba(150,236,255,.35)); mix-blend-mode: normal; opacity: .75; }
.st-crystal { color: #1d2850; font-weight: 800; border-radius: 0 !important;
  clip-path: polygon(50% 0, 92% 22%, 92% 78%, 50% 100%, 8% 78%, 8% 22%);
  background: linear-gradient(115deg, rgba(255,255,255,.95) 0 36%, rgba(200,225,255,.9) 36% 62%, rgba(150,180,240,.95) 62%); }
.st-holo { color: #2a2150; font-weight: 800;
  background: linear-gradient(135deg, #96ecff, #c8b8ff 30%, #fcf6ff 52%, #ffc2e8 76%, #a0beff);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), 0 5px 12px rgba(40,20,90,.28); }
.st-cyber { color: #8ff4ff; font-weight: 700; letter-spacing: .06em; border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(6,16,36,.92), rgba(4,10,26,.96));
  box-shadow: inset 0 0 0 1px #52e5ff, 0 0 10px rgba(82,229,255,.35); text-shadow: 0 0 6px rgba(82,229,255,.6); }
.st-minimal { color: #1d1d1f; font-weight: 700; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.18); }

.cg-refl { position: absolute; inset: 0; pointer-events: none; }
.cg-refl > i { position: absolute; display: block; }
.rf-streak { border-radius: 60% 60% 50% 50% / 100% 100% 40% 40%; }
.rf-drop { border-radius: 50%; }
.rf-band { transform: skewX(-22deg); }
.rf-band.thin { opacity: .8; }
.rf-film { will-change: transform; animation: cg-rf-film 14s ease-in-out infinite alternate; }
@keyframes cg-rf-film { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.cg.cg-still .rf-film, .cg.cg-static .rf-film { animation: none; }


/* ============================================================================
 *  v6b · ДОРОЖКИ-КАНАЛЫ, ПОВЕРХНОСТЬ ЗАЛИВКИ, ПОДЛОЖКА, СЛЕД, ГЛИФЫ, ГОТОВО, ПОДПИСИ
 * ========================================================================== */
.cg-tkf { position: absolute; inset: 0; pointer-events: none; }
.cg-tkf > .tk-in { position: absolute; inset: 0; display: block; }
.tk-liquid { background: linear-gradient(180deg, rgba(0,18,56,.5), rgba(0,56,108,.28) 62%, rgba(140,225,255,.2));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(170,235,255,.55); }
.tk-liquid > .tk-in { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'32'%20height%3D'6'%3E%3Cpath%20d%3D'M0%203%20Q8%200%2016%203%20T32%203'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'1'%20stroke-opacity%3D'.7'%2F%3E%3C%2Fsvg%3E") 0 18% / 32px 6px repeat-x; opacity: .5; }
.tk-crystal { background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(180deg, rgba(20,24,64,.55), rgba(70,80,140,.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(255,255,255,.25), inset 0 3px 6px rgba(0,0,20,.4); }
.tk-pearl { background: linear-gradient(180deg, rgba(110,80,130,.3), rgba(255,255,255,.22)); box-shadow: inset 0 2px 4px rgba(60,20,80,.35), inset 0 -1px 0 rgba(255,255,255,.7); }
.tk-pearl > .tk-in { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'9'%20height%3D'9'%3E%3Ccircle%20cx%3D'4.5'%20cy%3D'4.5'%20r%3D'2'%20fill%3D'white'%20fill-opacity%3D'.9'%2F%3E%3C%2Fsvg%3E") 0 50% / 9px 9px repeat-x; opacity: .95; }
.tk-holo { background: linear-gradient(90deg, rgba(150,236,255,.22), rgba(200,184,255,.26) 35%, rgba(252,246,255,.2) 55%, rgba(255,194,232,.24) 75%, rgba(160,190,255,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.tk-botanical { background: linear-gradient(180deg, transparent calc(50% - 1px), rgba(111,207,140,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.tk-botanical > .tk-in { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'22'%20height%3D'14'%3E%3Cpath%20d%3D'M3%207%20Q7%201%2011%203%20Q9%207%203%207Z%20M3%207%20Q7%2013%2011%2011%20Q9%207%203%207Z'%20fill%3D'%236fcf8c'%20fill-opacity%3D'.85'%2F%3E%3C%2Fsvg%3E") 0 50% / 22px 14px repeat-x; opacity: .9; }
.tk-celestial { background: linear-gradient(180deg, transparent calc(50% - .5px), rgba(255,255,255,.35) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.tk-celestial > .tk-in { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'40'%20height%3D'12'%3E%3Cpath%20d%3D'M20%201%20L21.2%205%20L25%206%20L21.2%207%20L20%2011%20L18.8%207%20L15%206%20L18.8%205Z'%20fill%3D'white'%20fill-opacity%3D'.9'%2F%3E%3Ccircle%20cx%3D'4'%20cy%3D'6'%20r%3D'.9'%20fill%3D'white'%20fill-opacity%3D'.7'%2F%3E%3Ccircle%20cx%3D'36'%20cy%3D'6'%20r%3D'.9'%20fill%3D'white'%20fill-opacity%3D'.7'%2F%3E%3C%2Fsvg%3E") 0 50% / 40px 12px repeat-x; }
.tk-gothic { background: linear-gradient(180deg, rgba(10,6,18,.78), rgba(44,28,60,.58)); box-shadow: inset 0 1px 0 var(--tk2, #cfc3e0), inset 0 -1px 0 var(--tk2, #cfc3e0), inset 0 3px 6px rgba(0,0,0,.5); }
.tk-gothic > .tk-in { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'28'%20height%3D'12'%3E%3Cpath%20d%3D'M14%202%20L18%206%20L14%2010%20L10%206Z'%20fill%3D'%23d9c8ef'%20fill-opacity%3D'.9'%20stroke%3D'%23000'%20stroke-opacity%3D'.35'%20stroke-width%3D'.5'%2F%3E%3C%2Fsvg%3E") 0 50% / 28px 12px repeat-x; }
.tk-cyber { background: linear-gradient(180deg, rgba(4,10,26,.82), rgba(10,24,52,.7)); box-shadow: inset 0 0 0 1px rgba(82,229,255,.55); }
.tk-cyber::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: repeating-linear-gradient(90deg, rgba(82,229,255,.6) 0 1px, transparent 1px 10px); }
.tk-pixel { background: rgba(10,6,30,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.tk-pixel::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'8'%20height%3D'8'%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'4'%20height%3D'4'%20fill%3D'white'%20fill-opacity%3D'.6'%2F%3E%3C%2Fsvg%3E") 0 50% / 8px 8px repeat-x; opacity: .45; }
.tk-line { background: linear-gradient(180deg, transparent calc(50% - .5px), var(--tk, #fff) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); opacity: .7; }

/* подложка под дорожкой (back surface) */
.cg-backs { position: absolute; pointer-events: none; inset: 0; }
.cg-ptrackbox + .cg-fill, .cg-backs { }
.bs-glass { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.bs-ink { background: linear-gradient(180deg, rgba(6,8,26,.72), rgba(12,16,44,.6)); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.bs-frost { background: rgba(255,255,255,.3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 6px 10px rgba(255,255,255,.2); }
.bs-pearl { background: linear-gradient(180deg, rgba(255,247,252,.55), rgba(236,222,246,.4)); box-shadow: inset 0 -3px 6px rgba(150,100,180,.25), inset 0 0 0 1px rgba(255,255,255,.7); }

/* поверхность заливки (fill surface) */
.cg-fs2 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fs-water { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 36%, rgba(0,30,96,.34)); }
.fs-water > .fs-w1, .fs-water > .fs-w2 { position: absolute; left: 0; right: 0; height: 6px; display: block; background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'32'%20height%3D'6'%3E%3Cpath%20d%3D'M0%203%20Q8%200%2016%203%20T32%203'%20fill%3D'none'%20stroke%3D'white'%20stroke-width%3D'1'%20stroke-opacity%3D'.7'%2F%3E%3C%2Fsvg%3E") 0 0 / 32px 6px repeat-x; opacity: .32; }
.fs-water > .fs-w1 { top: 28%; } .fs-water > .fs-w2 { top: 58%; opacity: .2; }
.fs-liquidGlass { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06) 40%, rgba(10,20,70,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 8px 14px rgba(255,255,255,.3), inset 0 -10px 16px rgba(10,20,60,.22); }
.fs-milkyPearl { background:
  radial-gradient(40% 80% at 18% 30%, rgba(255,255,255,.6), transparent 70%), radial-gradient(40% 80% at 78% 70%, rgba(255,214,236,.5), transparent 70%),
  linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.28) 55%, rgba(255,226,244,.36)); }
.fs-crystal { background:
  repeating-linear-gradient(60deg, rgba(255,255,255,.18) 0 16px, rgba(255,255,255,0) 16px 32px),
  repeating-linear-gradient(-60deg, rgba(0,0,40,.12) 0 18px, rgba(0,0,40,0) 18px 36px), linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 30%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.fs-holoFluid { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 50%); }
.fs-holo { position: absolute; top: 0; bottom: 0; left: 0; width: 300%; display: block;
  background: linear-gradient(100deg, rgba(150,236,255,0) 0%, rgba(150,236,255,.5) 14%, rgba(200,184,255,.6) 32%, rgba(252,246,255,.45) 46%, rgba(255,194,232,.55) 62%, rgba(160,190,255,.5) 80%, rgba(150,236,255,0) 100%) 0 0 / 33.3334% 100% repeat-x;
  animation: cg-slide 11s linear infinite; }
.fs-magicEnergy { background: radial-gradient(70% 120% at 50% 50%, rgba(214,170,255,.5), rgba(120,70,220,.25) 60%, rgba(40,10,90,.35)); box-shadow: inset 0 0 18px rgba(200,150,255,.6); }
.fs-sp { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.85); display: block; }
.fs-sp.cga { animation: cg-ovtw 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fs-cyberEnergy { background: repeating-linear-gradient(90deg, rgba(82,229,255,.28) 0 2px, transparent 2px 9px),
  linear-gradient(180deg, transparent calc(50% - 1px), rgba(255,255,255,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.fs-softResin { background: radial-gradient(120% 140% at 28% 0%, rgba(255,255,255,.6), transparent 56%), linear-gradient(180deg, transparent 52%, rgba(0,0,0,.24));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.55), inset 0 -4px 6px rgba(0,0,0,.28); }
.fs-pixel { background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'4'%20height%3D'4'%3E%3Crect%20width%3D'2'%20height%3D'2'%20fill%3D'white'%20fill-opacity%3D'.45'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'white'%20fill-opacity%3D'.45'%2F%3E%3C%2Fsvg%3E") 0 0 / 4px 4px; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.35); }

/* след за краем заливки */
.cg-trail { position: absolute; pointer-events: none; }
.cg-trail[data-dir="ltr"] { right: 0; top: 0; bottom: 0; width: 0; --sx: -1; --sy: 0; }
.cg-trail[data-dir="rtl"] { left: 0; top: 0; bottom: 0; width: 0; --sx: 1; --sy: 0; }
.cg-trail[data-dir="btt"] { top: 0; left: 0; right: 0; height: 0; --sx: 0; --sy: 1; }
.cg-trail[data-dir="ttb"] { bottom: 0; left: 0; right: 0; height: 0; --sx: 0; --sy: -1; }
.cg-trail .tr-p { position: absolute; display: block; width: var(--s, 3px); height: var(--s, 3px); opacity: 0; }
[data-dir="ltr"] .cg-trail .tr-p, [data-dir="rtl"] .cg-trail .tr-p { top: var(--cr, 50%); }
[data-dir="btt"] .cg-trail .tr-p, [data-dir="ttb"] .cg-trail .tr-p { left: var(--cr, 50%); }
.cg-trail .tr-p.cga { animation: cg-tr var(--dur, 2.2s) ease-out infinite; animation-delay: var(--d, 0s); will-change: transform, opacity; }
@keyframes cg-tr { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 14% { opacity: .95; } 100% { opacity: 0; transform: translate(calc(var(--sx, -1) * var(--back, 40px)), calc(var(--sy, 0) * var(--back, 40px))) scale(1); } }
.tr-bubbles .tr-p { border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.85); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 18%, transparent 40%); }
.tr-particles .tr-p { border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%); }
.tr-sparkle .tr-p { background: #fff; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); width: calc(var(--s, 3px) * 2.4); height: calc(var(--s, 3px) * 2.4); }
.tr-stars .tr-p { background: #fff; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: calc(var(--s, 3px) * 2.6); height: calc(var(--s, 3px) * 2.6); }
.tr-cyber .tr-p { background: #52e5ff; width: calc(var(--s, 1.3px) * 12); height: var(--s, 1.3px); box-shadow: 0 0 5px #52e5ff; animation-timing-function: steps(5, end); }
[data-dir="btt"] .tr-cyber .tr-p, [data-dir="ttb"] .tr-cyber .tr-p { width: var(--s, 1.3px); height: calc(var(--s, 1.3px) * 12); }
.tr-pixel .tr-p { background: #fff; animation-timing-function: steps(3, end); }
.tr-streak { position: absolute; display: block; opacity: .85; }
[data-dir="ltr"] .tr-streak { right: 0; top: 14%; bottom: 14%; width: calc(var(--back, 40px) * 1.3); background: linear-gradient(270deg, rgba(255,255,255,.7), rgba(150,236,255,.5) 25%, rgba(200,184,255,.45) 50%, rgba(255,194,232,.3) 75%, transparent); }
[data-dir="rtl"] .tr-streak { left: 0; top: 14%; bottom: 14%; width: calc(var(--back, 40px) * 1.3); background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(150,236,255,.5) 25%, rgba(200,184,255,.45) 50%, rgba(255,194,232,.3) 75%, transparent); }
[data-dir="btt"] .tr-streak { top: 0; left: 14%; right: 14%; height: calc(var(--back, 40px) * 1.3); background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(150,236,255,.5) 25%, rgba(200,184,255,.45) 50%, rgba(255,194,232,.3) 75%, transparent); }
[data-dir="ttb"] .tr-streak { bottom: 0; left: 14%; right: 14%; height: calc(var(--back, 40px) * 1.3); background: linear-gradient(0deg, rgba(255,255,255,.7), rgba(150,236,255,.5) 25%, rgba(200,184,255,.45) 50%, rgba(255,194,232,.3) 75%, transparent); }
.cg.is-empty .cg-trail { opacity: 0; }

/* граница: призма и глифы */
.cg-edge.e-prism { background: #fff; box-shadow: -1.6px 0 0 rgba(150,236,255,.9), 1.6px 0 0 rgba(255,194,232,.9), 0 0 8px rgba(200,184,255,.6); }
[data-dir="btt"] .cg-edge.e-prism, [data-dir="ttb"] .cg-edge.e-prism { box-shadow: 0 -1.6px 0 rgba(150,236,255,.9), 0 1.6px 0 rgba(255,194,232,.9), 0 0 8px rgba(200,184,255,.6); }
.cg-edge.e-prism::before { content: ""; position: absolute; pointer-events: none; border-radius: inherit;
  background: linear-gradient(var(--ep, 180deg), #96ecff, #c8b8ff 32%, #fcf6ff 56%, #ffc2e8 78%, #a0beff);
  -webkit-mask-image: linear-gradient(var(--ea, 90deg), transparent, #000); mask-image: linear-gradient(var(--ea, 90deg), transparent, #000); opacity: .7; }
[data-dir="ltr"] .cg-edge.e-prism::before { right: 100%; top: 0; bottom: 0; width: var(--edge-span, 14px); }
[data-dir="rtl"] .cg-edge.e-prism::before { left: 100%; top: 0; bottom: 0; width: var(--edge-span, 14px); }
[data-dir="btt"] .cg-edge.e-prism::before { top: 100%; left: 0; right: 0; height: var(--edge-span, 14px); }
[data-dir="ttb"] .cg-edge.e-prism::before { bottom: 100%; left: 0; right: 0; height: var(--edge-span, 14px); }
.cg-ec > svg { position: absolute; display: block; width: var(--eb-s, 24px); height: var(--eb-s, 24px); overflow: visible; }
[data-dir="ltr"] .cg-ec > svg { right: calc(var(--eb-s, 24px) * -.5); top: 50%; margin-top: calc(var(--eb-s, 24px) * -.5); }
[data-dir="rtl"] .cg-ec > svg { left: calc(var(--eb-s, 24px) * -.5); top: 50%; margin-top: calc(var(--eb-s, 24px) * -.5); transform: scaleX(-1); }
[data-dir="btt"] .cg-ec > svg { top: calc(var(--eb-s, 24px) * -.5); left: 50%; margin-left: calc(var(--eb-s, 24px) * -.5); transform: rotate(-90deg); }
[data-dir="ttb"] .cg-ec > svg { bottom: calc(var(--eb-s, 24px) * -.5); left: 50%; margin-left: calc(var(--eb-s, 24px) * -.5); transform: rotate(90deg); }
.cg-ec.e-pearl::before, .cg-ec.e-pearl::after, .cg-ec.e-star::before, .cg-ec.e-star::after, .cg-ec.e-growth::before, .cg-ec.e-growth::after, .cg-ec.e-rune::before, .cg-ec.e-rune::after { display: none; }
.cg-ec.e-star > svg { filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.cg-ec.e-rune > svg { filter: drop-shadow(0 0 3px rgba(190,160,255,.9)); }

/* состояние «цель достигнута»: эмблема, значок, яркая граница */
.cg-donebadge { position: absolute; opacity: 0; transform: scale(.4); pointer-events: none; transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .25s; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.cg.done-badge .cg-donebadge { opacity: 1; transform: scale(1); }
.cg.done-emblem .cg-orn-marker .cg-mk-r, .cg.done-emblem .cg-orn-markerHolder .cg-mk-r { transform: scale(1.28) !important; }
.cg.done-emblem .cg-orn-marker { filter: drop-shadow(0 0 7px rgba(255,255,255,.8)); }
.cg.done-edge .cg-edge, .cg.done-edge .cg-ec, .cg.done-edge .cg-tip { filter: brightness(1.6) drop-shadow(0 0 5px rgba(255,255,255,.9)); }

/* завершение: пузыри, кристальный венчик, вспышка самоцвета, магическая печать */
.cg-fin-bbl, .cg-fin-cs, .cg-fin-jw, .cg-fin-seal { position: absolute; display: block; opacity: 0; pointer-events: none; }
.cg-fin-bbl { border-radius: 50%; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.9); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 14%, rgba(255,255,255,.12) 55%, transparent 70%); }
.cg.is-complete .cg-fin-bbl { animation: cg-fin-bbl 5.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-bbl { 0% { opacity: 0; transform: scale(.2); } 10% { opacity: 1; transform: scale(.8); } 34% { opacity: .95; transform: scale(1.5); } 40% { opacity: .9; transform: scale(1.9); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.7); } 48%, 100% { opacity: 0; transform: scale(2.3); } }
.cg-fin-cs { transform-origin: 50% 100%; }
.cg.is-complete .cg-fin-cs { animation: cg-fin-cs 6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-fin-cs { 0%, 4% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(0) scale(.2); } 14% { opacity: 1; transform: rotate(var(--a, 0deg)) translateY(-14%) scale(1.05); } 30% { opacity: .95; transform: rotate(var(--a, 0deg)) translateY(-8%) scale(1); } 48%, 100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(-18%) scale(.9); } }
.cg-fin-jw { background:
  conic-gradient(from 45deg, transparent 0 20deg, rgba(255,255,255,.95) 22deg 24deg, transparent 26deg 90deg, rgba(255,255,255,.95) 92deg 94deg, transparent 96deg 360deg),
  radial-gradient(circle, #fff 0 8%, rgba(255,255,255,.7) 16%, rgba(255,255,255,0) 60%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.cg.is-complete .cg-fin-jw { animation: cg-fin-jw 6.2s ease-out infinite; }
@keyframes cg-fin-jw { 0%, 3% { opacity: 0; transform: scale(.2) rotate(0deg); } 8% { opacity: 1; transform: scale(1.1) rotate(20deg); } 20% { opacity: 0; transform: scale(.7) rotate(45deg); } 100% { opacity: 0; } }
.cg.is-complete .cg-fin-seal { animation: cg-fin-seal 7.5s ease-in-out infinite; }
@keyframes cg-fin-seal { 0%, 6% { opacity: 0; transform: scale(.5) rotate(-40deg); } 16% { opacity: .95; transform: scale(1) rotate(0deg); } 40% { opacity: .9; transform: scale(1.04) rotate(60deg); } 58%, 100% { opacity: 0; transform: scale(1.2) rotate(110deg); } }
.cg.cg-still .cg-fin-bbl, .cg.cg-static .cg-fin-bbl, .cg.cg-still .cg-fin-cs, .cg.cg-static .cg-fin-cs,
.cg.cg-still .cg-fin-jw, .cg.cg-static .cg-fin-jw, .cg.cg-still .cg-fin-seal, .cg.cg-static .cg-fin-seal { animation: none !important; opacity: 0; }
.cg.cg-static.is-complete .cg-fin-seal, .cg.cg-still.is-complete .cg-fin-seal { opacity: .8; transform: none; }

/* магический оверлей */
.ov-ring { left: 50%; top: 50%; width: 140%; aspect-ratio: 1; margin: -70% 0 0 -70%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); opacity: 0; }
.ov-ring.cga { animation: cg-ovring 3.4s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes cg-ovring { 0% { opacity: 0; transform: scale(.1); } 15% { opacity: .8; } 100% { opacity: 0; transform: scale(1); } }
.ov-spark { border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255,255,255,.8); opacity: .8; }
.ov-spark.cga { animation: cg-ovtw 2.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* название: иконка рядом */
.cg-ticon { display: inline-block; vertical-align: -.2em; margin-right: .38em; }

/* контейнеры сумм (отдельно от типографики): парящее стекло, жемчужный тег, кристальная пластина, голо-полоса, кибер-счётчик */
.cg-text[data-au-amount="float"] .cg-current { padding: .06em .62em; border-radius: .6em; background: var(--am-bg);
  box-shadow: 0 8px 18px rgba(0,0,0,.3), inset 0 0 0 1px var(--am-rim), inset 0 1px 0 rgba(255,255,255,.5); transform: translateY(-2px); }
.cg-text[data-au-amount="pearl"] .cg-current { position: relative; padding: .04em .6em .04em 1.5em; border-radius: 99px; background: var(--am-bg); box-shadow: inset 0 0 0 1px var(--am-rim); }
.cg-text[data-au-amount="pearl"] .cg-current::before { content: ""; position: absolute; left: .42em; top: 50%; width: .62em; height: .62em; margin-top: -.31em; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, #fdf3fb 40%, #cdb8e0); box-shadow: 0 .05em .12em rgba(60,20,80,.35); }
.cg-text[data-au-amount="crystal"] .cg-current { padding: .04em .85em; clip-path: polygon(.45em 0, calc(100% - .45em) 0, 100% 50%, calc(100% - .45em) 100%, .45em 100%, 0 50%);
  background: linear-gradient(115deg, rgba(255,255,255,.55) 0 30%, var(--am-bg) 30%); }
.cg-text[data-au-amount="strip"] .cg-current { padding: .08em .7em; border-block: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(90deg, rgba(150,236,255,.28), rgba(200,184,255,.34) 35%, rgba(252,246,255,.26) 55%, rgba(255,194,232,.3) 75%, rgba(160,190,255,.26)); }
.cg-text[data-au-amount="cyber"] .cg-current { position: relative; padding: .08em .7em; background: linear-gradient(180deg, rgba(4,10,26,.85), rgba(8,18,44,.9)); color: #8ff4ff !important;
  box-shadow: inset 0 0 0 1px rgba(82,229,255,.6); letter-spacing: .06em; text-shadow: 0 0 6px rgba(82,229,255,.55); font-variant-numeric: tabular-nums; }
.cg-text[data-au-amount="cyber"] .cg-current::before { content: ""; position: absolute; left: -2px; top: -2px; width: .5em; height: .5em; border-left: 2px solid #52e5ff; border-top: 2px solid #52e5ff; }
.cg-text[data-au-amount="cyber"] .cg-current::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: .5em; height: .5em; border-right: 2px solid #52e5ff; border-bottom: 2px solid #52e5ff; }
.cg-text[data-au-percent="pearl"] .cg-percent .cg-tx { padding: .04em .6em; border-radius: 99px; background: var(--pc-bg); box-shadow: inset 0 0 0 1px var(--pc-rim), 0 .05em .14em rgba(60,20,80,.25); }
.cg-text[data-au-percent="crystal"] .cg-percent .cg-tx { padding: .04em .8em; clip-path: polygon(.4em 0, calc(100% - .4em) 0, 100% 50%, calc(100% - .4em) 100%, .4em 100%, 0 50%); background: linear-gradient(115deg, rgba(255,255,255,.55) 0 30%, var(--pc-bg) 30%); }

/* соединитель вех и подписи */
.cg-conn { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.cg-conn .cn-r { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pf, var(--p))); transition: stroke-dashoffset var(--fill-dur, 1.6s) var(--fill-ease, cubic-bezier(.25, .85, .3, 1)); }
.cg.cg-instant .cg-conn .cn-r { transition: none; }
.cg-conn .cn-n { opacity: .35; transition: opacity .3s; }
.cg-conn .cn-n.on { opacity: 1; }
.cg-ml { position: absolute; transform: translate(-50%, 6px); padding: .12em .55em; font: 700 11px/1.1 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; border-radius: 999px; opacity: .72; transition: opacity .3s, transform .3s; pointer-events: none; }
.cg-ml.up { transform: translate(-50%, calc(-100% - 6px)); }
.cg-ml.on { opacity: 1; }
.ml-glass { color: #fff; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ml-crystal { color: #1d2850; background: linear-gradient(115deg, #fff 0 36%, #cfe2ff 36%); border-radius: 3px; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); padding: .12em .9em; }
.ml-pearl { color: #4a2f55; background: radial-gradient(circle at 30% 30%, #fff, #f3e3f1 60%, #d9c3e2); box-shadow: 0 1px 3px rgba(60,20,80,.3); }
.ml-cyber { color: #8ff4ff; background: rgba(4,10,26,.88); border-radius: 3px; box-shadow: inset 0 0 0 1px #52e5ff; letter-spacing: .08em; }
.ml-minimal { color: #1d1d1f; background: rgba(255,255,255,.88); box-shadow: 0 0 0 1px rgba(0,0,0,.14); }

/* декор: бабочка, лента, самоцвет */
.cg-d-butterflies > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2080'%3E%3Cpath%20d%3D'M50%2028%20C%2040%206%2C%2014%200%2C%206%2014%20C%200%2026%2C%2014%2040%2C%2046%2040%20C%2046%2040%2C%2030%2044%2C%2022%2058%20C%2016%2070%2C%2034%2082%2C%2044%2062%20C%2047%2056%2C%2049%2050%2C%2050%2046%20C%2051%2050%2C%2053%2056%2C%2056%2062%20C%2066%2082%2C%2084%2070%2C%2078%2058%20C%2070%2044%2C%2054%2040%2C%2054%2040%20C%2086%2040%2C%20100%2026%2C%2094%2014%20C%2086%200%2C%2060%206%2C%2050%2028Z%20M49%2018%20H51%20V50%20H49Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2080'%3E%3Cpath%20d%3D'M50%2028%20C%2040%206%2C%2014%200%2C%206%2014%20C%200%2026%2C%2014%2040%2C%2046%2040%20C%2046%2040%2C%2030%2044%2C%2022%2058%20C%2016%2070%2C%2034%2082%2C%2044%2062%20C%2047%2056%2C%2049%2050%2C%2050%2046%20C%2051%2050%2C%2053%2056%2C%2056%2062%20C%2066%2082%2C%2084%2070%2C%2078%2058%20C%2070%2044%2C%2054%2040%2C%2054%2040%20C%2086%2040%2C%20100%2026%2C%2094%2014%20C%2086%200%2C%2060%206%2C%2050%2028Z%20M49%2018%20H51%20V50%20H49Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transform: scaleX(var(--flip, 1));
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85) 0 10%, transparent 40%), linear-gradient(100deg, rgba(255,255,255,.35), var(--dc) 40%, rgba(0,0,0,.3)); }
.cg-d.a-flutter { animation: cg-flutter var(--dur, 4s) ease-in-out infinite; }
@keyframes cg-flutter { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)) scale(1, 1); } 25% { transform: translateY(-3px) rotate(calc(var(--rot, 0deg) + 6deg)) scale(.92, 1); } 50% { transform: translateY(-1px) rotate(var(--rot, 0deg)) scale(1.04, 1); } 75% { transform: translateY(-4px) rotate(calc(var(--rot, 0deg) - 6deg)) scale(.94, 1); } }
.cg-d-ribbons > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2064'%3E%3Cpath%20d%3D'M50%2030%20C%2040%206%2C%208%200%2C%205%2018%20C%202%2036%2C%2030%2040%2C%2050%2030Z%20M50%2030%20C%2060%206%2C%2092%200%2C%2095%2018%20C%2098%2036%2C%2070%2040%2C%2050%2030Z%20M47%2033%20C%2040%2046%2C%2032%2054%2C%2020%2062%20L%2034%2038Z%20M53%2033%20C%2060%2046%2C%2068%2054%2C%2080%2062%20L%2066%2038Z'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'30'%20r%3D'6.5'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2064'%3E%3Cpath%20d%3D'M50%2030%20C%2040%206%2C%208%200%2C%205%2018%20C%202%2036%2C%2030%2040%2C%2050%2030Z%20M50%2030%20C%2060%206%2C%2092%200%2C%2095%2018%20C%2098%2036%2C%2070%2040%2C%2050%2030Z%20M47%2033%20C%2040%2046%2C%2032%2054%2C%2020%2062%20L%2034%2038Z%20M53%2033%20C%2060%2046%2C%2068%2054%2C%2080%2062%20L%2066%2038Z'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'30'%20r%3D'6.5'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transform: scaleX(var(--flip, 1));
  background: linear-gradient(110deg, rgba(255,255,255,.55) 0, var(--dc) 36%, rgba(0,0,0,.28) 100%); }
.cg-d-jewels > b { -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2050'%3E%3Cpath%20d%3D'M20%201%20L36%2014%20L30%2044%20L20%2049%20L10%2044%20L4%2014Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2050'%3E%3Cpath%20d%3D'M20%201%20L36%2014%20L30%2044%20L20%2049%20L10%2044%20L4%2014Z'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  background: linear-gradient(115deg, rgba(255,255,255,.9) 0 24%, transparent 24%), linear-gradient(180deg, rgba(255,255,255,.5) 0 28%, transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.25) 0 50%, rgba(0,0,0,.25) 50%), var(--dc); }

/* v6b·правки */
.cg-fin-cs > b { position: absolute; inset: 0; display: block; }
.cg-fin-cs > b { background: linear-gradient(112deg, rgba(255,255,255,.95), var(--dc, #e6f3ff) 46%, rgba(120,150,220,.7)); clip-path: polygon(46% 0, 74% 30%, 66% 72%, 52% 100%, 30% 74%, 24% 34%); }
@keyframes cg-fin-seal { 0%, 6% { opacity: 0; transform: scale(.5) rotate(-40deg); } 16% { opacity: .62; transform: scale(1) rotate(0deg); } 40% { opacity: .55; transform: scale(1.04) rotate(60deg); } 58%, 100% { opacity: 0; transform: scale(1.2) rotate(110deg); } }
.tr-streak { opacity: .6; }
[data-dir="ltr"] .tr-streak, [data-dir="rtl"] .tr-streak { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
[data-dir="btt"] .tr-streak, [data-dir="ttb"] .tr-streak { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
[data-dir="rtl"] .cg-edge.e-prism::before { --ea: 270deg; }
[data-dir="btt"] .cg-edge.e-prism::before { --ea: 180deg; }
[data-dir="ttb"] .cg-edge.e-prism::before { --ea: 0deg; }
[data-dir="btt"] .cg-edge.e-prism::before, [data-dir="ttb"] .cg-edge.e-prism::before { --ep: 90deg; }

/* ============================================================================
 *  v7 · ФОРМЫ-СОСУДЫ: детали, свечение текста, моргание лица
 * ========================================================================== */
.cg-details { overflow: visible; }
.cg-text[data-glow] .cg-t {
  text-shadow: var(--ts, 0 0 0 transparent),
    0 0 calc(3px + 7px * var(--tg-a, .5)) var(--tg-c, currentColor),
    0 0 calc(9px + 22px * var(--tg-a, .5)) var(--tg-c, currentColor);
}
.oa-blink .eye { transform-box: fill-box; transform-origin: 50% 50%; animation: oa-blink 4.8s ease-in-out infinite; animation-delay: calc(-1.2s - var(--clock, 0s)); }
@keyframes oa-blink { 0%, 43%, 50%, 100% { transform: scaleY(1); } 46.5% { transform: scaleY(.08); } }
.cg.cg-still .oa-blink .eye, .cg.cg-static .oa-blink .eye { animation: none; }