[data-progress-style="neon"] {
  --cpp-progress-fill: linear-gradient(90deg,#10f7ff 0%,#7b61ff 42%,#e35cff 70%,#10f7ff 100%);
  --cpp-progress-size: 240px 100%;
  --cpp-progress-end: -240px 50%;
  --cpp-progress-head: #bdfcff;
  --cpp-progress-glow: 0 0 4px #10f7ff,0 0 10px #7b61ff;
  --cpp-progress-duration: 12s;
}

[data-progress-style="aurora_crown"] {
 --cpp-progress-fill: radial-gradient(circle,#fff7bd 0 1px,transparent 2px) 0 0/23px 10px,linear-gradient(90deg,#173c72,#39e3ba,#b7f9db,#927bff,#173c72);
 --cpp-progress-size: 23px 10px,280px 100%; --cpp-progress-end: -23px 50%,-280px 50%; --cpp-progress-head: #fff5b0; --cpp-progress-glow: 0 0 5px #a8ffdb,0 0 12px #56dfc0; --cpp-progress-duration: 12s;
}
[data-progress-style="cosmic_dragon"] {
 --cpp-progress-fill: radial-gradient(circle,#fff6b2 0 1px,transparent 2px) 0 0/19px 9px,repeating-linear-gradient(120deg,#46126a 0 8px,#b62e77 9px 14px,#ffb34d 15px 19px,#46126a 20px 28px);
 --cpp-progress-size: 19px 9px,56px 100%; --cpp-progress-end: -19px 50%,-56px 50%; --cpp-progress-head: #fff1a8; --cpp-progress-glow: 0 0 5px #ffba4d,0 0 12px #d52eaa; --cpp-progress-duration: 9s;
}

[data-progress-style="rainbow"] {
  --cpp-progress-fill: linear-gradient(90deg,#ff365d,#ffad27,#f8ef4a,#4be38b,#32a9ff,#9d55ef,#ff365d);
  --cpp-progress-size: 280px 100%;
  --cpp-progress-end: -280px 50%;
  --cpp-progress-head: #fff2b3;
  --cpp-progress-glow: 0 0 4px #fff8,0 0 8px #d954ff99;
  --cpp-progress-duration: 16s;
}

[data-progress-style="arcade"] {
  --cpp-progress-fill: repeating-linear-gradient(90deg,#baff36 0 6px,#31d35c 6px 12px,#087f4c 12px 18px);
  --cpp-progress-size: 36px 100%;
  --cpp-progress-end: -36px 50%;
  --cpp-progress-head: #d9ff69;
  --cpp-progress-glow: 0 0 0 2px #082d1b,0 0 7px #63ff5c;
  --cpp-progress-duration: 6s;
}

[data-progress-style="comet"] {
  --cpp-progress-fill: linear-gradient(90deg,#27234d 0%,#446dba 46%,#88ddff 70%,#fff 82%,#85e9ff 88%,#27234d 100%);
  --cpp-progress-size: 320px 100%;
  --cpp-progress-end: -320px 50%;
  --cpp-progress-head: #fff;
  --cpp-progress-glow: 0 0 5px #fff,0 0 12px #70d9ff;
  --cpp-progress-duration: 14s;
}

[data-progress-style="wave"] {
  --cpp-progress-fill: radial-gradient(ellipse at 50% 120%,#bcefff 0 24%,#26a7e8 25% 48%,#075bb8 49% 68%,transparent 69%) 0 0/30px 18px,#084e9b;
  --cpp-progress-size: 30px 18px,auto;
  --cpp-progress-end: -30px 50%,0 50%;
  --cpp-progress-head: #d8f7ff;
  --cpp-progress-glow: 0 0 4px #9deaff,0 0 9px #168cff;
  --cpp-progress-duration: 8s;
}

[data-progress-style="sparks"] {
  --cpp-progress-fill: radial-gradient(circle,#fff6b0 0 1px,transparent 2px) 0 0/17px 9px,linear-gradient(90deg,#c8530c,#ff9d16,#ffd65a,#c8530c);
  --cpp-progress-size: 17px 9px,240px 100%;
  --cpp-progress-end: -17px 50%,-240px 50%;
  --cpp-progress-head: #fff0a1;
  --cpp-progress-glow: 0 0 4px #ffd45c,0 0 10px #ff7b19;
  --cpp-progress-duration: 12s;
}

[data-progress-style="kawaii"] {
  --cpp-progress-fill: radial-gradient(circle,#f2ecd4 0 1px,transparent 1.7px) 0 0/32px 12px,linear-gradient(90deg,#45658a,#97b9da 48%,#e6e9e1 72%,#45658a);
  --cpp-progress-size: 32px 12px,256px 100%;
  --cpp-progress-end: -32px 50%,-256px 50%;
  --cpp-progress-head: #f1ecd9;
  --cpp-progress-glow: 0 0 2px #fff4,0 0 7px #99bee85e;
  --cpp-progress-duration: 24s;
}

[data-progress-style="energy_cells"] {
  --cpp-progress-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-1 4C7 4 9 14 17 14S25 4 33 4' stroke='%23dffcff' stroke-width='2.6'/%3E%3Cpath d='M-1 14C7 14 9 4 17 4S25 14 33 14' stroke='%2379aee6' stroke-width='2.6'/%3E%3Cpath d='M3 6.5v5M11 6.5v5M19 6.5v5M27 6.5v5' stroke='%239ac9e8' stroke-width='1' opacity='.68'/%3E%3C/g%3E%3C/svg%3E");
  --cpp-progress-size: 32px 18px;
  --cpp-progress-end: -32px 50%;
  --cpp-progress-head: transparent;
  --cpp-progress-glow: none;
  --cpp-progress-duration: 2.4s;
  --cpp-progress-animation: cpp-progress-helix-flow var(--cpp-progress-duration) linear infinite;
}

:is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .progress-style-card-head {
  border-color: transparent;
}

[data-progress-style="plasma"] {
  --cpp-progress-fill: linear-gradient(110deg,transparent 0 34%,#f2dcff99 46%,#bdeeffb8 52%,transparent 64%),linear-gradient(90deg,#17104a,#3f49c9 22%,#b44bd5 48%,#35b9d1 72%,#5940bd 88%,#17104a);
  --cpp-progress-size: 84px 100%,300px 100%;
  --cpp-progress-end: -84px 50%,-300px 50%;
  --cpp-progress-head: #d9c9f4;
  --cpp-progress-glow: 0 0 2px #e4b9f5,0 0 5px #6656d3;
  --cpp-progress-duration: 10s;
}

[data-progress-style="stardust"] {
  --cpp-progress-fill: radial-gradient(circle at 50% 50%,#fff 0 1px,#ffd86f 1.5px,transparent 3px),linear-gradient(90deg,#171142,#402068 34%,#1e3b79 68%,#171142);
  --cpp-progress-size: 24px 12px,288px 100%;
  --cpp-progress-end: -24px 50%,-288px 50%;
  --cpp-progress-head: #fff4b3;
  --cpp-progress-glow: 0 0 4px #fff,0 0 10px #bc84ff;
  --cpp-progress-duration: 14s;
}

[data-progress-style="iridescent"] {
  --cpp-progress-fill: linear-gradient(115deg,transparent 0 34%,#fff9 43%,#fff 49%,#fff8 55%,transparent 64%),linear-gradient(90deg,#ff8fce,#9ee8ff 24%,#b8ffcf 45%,#fff0a8 66%,#c8afff 84%,#ff8fce);
  --cpp-progress-size: 72px 100%,216px 100%;
  --cpp-progress-end: -72px 50%,-216px 50%;
  --cpp-progress-head: #fff;
  --cpp-progress-glow: 0 0 4px #fff,0 0 9px #a9dfff;
  --cpp-progress-duration: 12s;
}

[data-progress-style="grass"] {
  --cpp-progress-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cpath d='M0 18Q1 10 3 3q1 9 3 15Z' fill='%233b812f'/%3E%3Cpath d='M4 18Q5 7 8 1q0 11 2 17Z' fill='%2367ad42'/%3E%3Cpath d='M8 18q2-8 6-13-1 9 0 13Z' fill='%2390c957'/%3E%3Cpath d='M13 18q1-12 4-16 1 9 1 16Z' fill='%23478e35'/%3E%3Cpath d='M17 18q3-8 7-12-2 8-2 12Z' fill='%237dbb49'/%3E%3Cpath d='M21 18q2-13 5-16 0 10 1 16Z' fill='%23559b39'/%3E%3Cpath d='M26 18q2-8 6-12-2 8-1 12Z' fill='%23a0d262'/%3E%3Cpath d='M0 16q5-1 10 .3t11-.2q6-.7 11 .2V18H0Z' fill='%23366f2d'/%3E%3C/svg%3E");
  --cpp-progress-size: 32px 18px;
  --cpp-progress-end: 0 50%;
  --cpp-progress-head: transparent;
  --cpp-progress-glow: none;
  --cpp-progress-duration: 2.8s;
  --cpp-progress-animation: cpp-progress-grass-sway var(--cpp-progress-duration) ease-in-out infinite;
}

:is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .ytfp-progress-fill {
  overflow: visible;
  clip-path: inset(-18px 0 0);
}

:is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .ytfp-progress-wrap--ad .ytfp-progress-fill::before {
  content: none;
  animation: none;
}

:is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .ytfp-progress-fill {
  background: none !important;
  box-shadow: none;
  animation: none !important;
}

:is(#movie_player,#shorts-player):is([data-progress-style="energy_cells"],[data-progress-style="grass"]):not(.ad-showing) .cpp-native-progress-shape-fill::before,
:is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .ytfp-progress-fill::before {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 18px;
  background: var(--cpp-progress-fill) repeat-x 0 50% / var(--cpp-progress-size);
  box-shadow: var(--cpp-progress-glow);
  pointer-events: none;
  transform: scaleX(var(--cpp-progress-inverse-scale,1));
  transform-origin: left bottom;
  animation: var(--cpp-progress-animation);
  animation-play-state: paused;
}

:is(#movie_player,#shorts-player):is([data-progress-style="energy_cells"],[data-progress-style="grass"]):not(.ad-showing) .cpp-native-progress-shape {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

:is(#movie_player,#shorts-player):is([data-progress-style="energy_cells"],[data-progress-style="grass"]):not(.ad-showing) .cpp-native-progress-shape-fill {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  overflow: visible;
  clip-path: inset(-18px 0 0);
}

:is(#movie_player,#shorts-player)[data-progress-style]:not(.ad-showing) .ytp-play-progress {
  background: transparent !important;
  background-size: var(--cpp-progress-size) !important;
  box-shadow: var(--cpp-progress-glow);
  overflow: hidden;
}

:is(#movie_player,#shorts-player)[data-progress-style]:not(.ad-showing) .ytp-play-progress::before,
[data-progress-style] .ytfp-progress-fill {
  background: var(--cpp-progress-fill);
  background-size: var(--cpp-progress-size) !important;
  box-shadow: var(--cpp-progress-glow);
  animation: var(--cpp-progress-animation,cpp-progress-flow var(--cpp-progress-duration) linear infinite);
  animation-play-state: paused;
}

:is(#movie_player,#shorts-player)[data-progress-style]:not(.ad-showing) .ytp-play-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: scaleX(var(--cpp-progress-inverse-scale,1));
  transform-origin: left center;
}

:is(#movie_player,#shorts-player):is([data-progress-style="energy_cells"],[data-progress-style="grass"]):not(.ad-showing) .ytp-play-progress::before {
  content: none;
}

:is(#movie_player,#shorts-player)[data-progress-style]:not(.ad-showing) .ytp-scrubber-button {
  border-color: transparent;
  background: var(--cpp-progress-head);
  box-shadow: var(--cpp-progress-glow);
}

:is(#movie_player,#shorts-player)[data-progress-style][data-progress-motion="on"]:not(.ad-showing) .ytp-play-progress::before,
[data-progress-style][data-progress-motion="on"] .ytfp-progress-fill,
:is(#movie_player,#shorts-player):is([data-progress-style="energy_cells"],[data-progress-style="grass"])[data-progress-motion="on"]:not(.ad-showing) .cpp-native-progress-shape-fill::before,
:is([data-progress-style="energy_cells"],[data-progress-style="grass"])[data-progress-motion="on"] .ytfp-progress-fill::before {
  animation-play-state: running;
}

@keyframes cpp-progress-flow {
  from { background-position: 0 50%,0 50%; }
  to { background-position: var(--cpp-progress-end); }
}

@keyframes cpp-progress-helix-flow {
  from { background-position: 0 50%; }
  to { background-position: -32px 50%; }
}

@keyframes cpp-progress-grass-sway {
  0%,100% { transform: scaleX(var(--cpp-progress-inverse-scale,1)) skewX(-2.5deg); background-position: 0 50%; }
  50% { transform: scaleX(var(--cpp-progress-inverse-scale,1)) skewX(2.5deg); background-position: -1px 50%; }
}

@media (prefers-reduced-motion:reduce) {
  :is(#movie_player,#shorts-player)[data-progress-style] .ytp-play-progress::before,
  :is(#movie_player,#shorts-player)[data-progress-style] .cpp-native-progress-shape-fill::before,
  [data-progress-style] .ytfp-progress-fill,
  :is([data-progress-style="energy_cells"],[data-progress-style="grass"]) .ytfp-progress-fill::before {
    animation: none;
  }
}

[data-progress-style="aurora_crown"] {
 --cpp-progress-fill: radial-gradient(circle,#fff7bd 0 1px,transparent 2px) 0 0/23px 10px,linear-gradient(90deg,#173c72,#39e3ba,#b7f9db,#927bff,#173c72);
 --cpp-progress-size: 23px 10px,280px 100%; --cpp-progress-end: -23px 50%,-280px 50%; --cpp-progress-head: #fff5b0; --cpp-progress-glow: 0 0 5px #a8ffdb,0 0 12px #56dfc0; --cpp-progress-duration: 12s;
}
[data-progress-style="cosmic_dragon"] {
 --cpp-progress-fill: radial-gradient(circle,#fff6b2 0 1px,transparent 2px) 0 0/19px 9px,repeating-linear-gradient(120deg,#46126a 0 8px,#b62e77 9px 14px,#ffb34d 15px 19px,#46126a 20px 28px);
 --cpp-progress-size: 19px 9px,56px 100%; --cpp-progress-end: -19px 50%,-56px 50%; --cpp-progress-head: #fff1a8; --cpp-progress-glow: 0 0 5px #ffba4d,0 0 12px #d52eaa; --cpp-progress-duration: 9s;
}

/* The support uses the same trusted palette as the runtime pet platform. */
.progress-style-card-platform {
 position:absolute;z-index:3;left:68%;top:-14px;width:44px;height:2px;
 border-radius:2px;transform:translateX(-50%);
 background:var(--cpp-platform-fill,var(--cpp-progress-fill,linear-gradient(90deg,#b9c4d0,#edf2f7,#b9c4d0)));
 background-size:var(--cpp-platform-size,var(--cpp-progress-size,100% 100%));background-position:center;box-shadow:0 1px 2px #0005;
}
.progress-style-card-platform > span {
 position:absolute;left:50%;top:2px;width:1px;height:20px;
 background:var(--cpp-platform-post,var(--cpp-progress-head,#cbd5e1));opacity:.65;
}
[data-progress-style="classic"] .progress-style-card-platform {
 background:linear-gradient(90deg,#b9c4d0,#edf2f7,#b9c4d0);
}
[data-progress-style="classic"] .progress-style-card-platform > span {background:#cbd5e1}

/* Solid pet supports keep shaped progress textures readable at 2px. */
[data-progress-style="energy_cells"] {
 --cpp-platform-fill:repeating-linear-gradient(90deg,#315e78 0 1px,#d8fcff 1px 7px,#79d3e9 7px 10px);
 --cpp-platform-size:20px 100%;--cpp-platform-post:#8ed7e8;
}
[data-progress-style="grass"] {
 --cpp-platform-fill:linear-gradient(180deg,#a6d973 0 35%,#59983c 35% 62%,#46512c 62% 100%);
 --cpp-platform-size:100% 100%;--cpp-platform-post:#7a8c50;
}
[data-progress-style="cosmic_dragon"] {
 --cpp-platform-fill:repeating-linear-gradient(135deg,#f3c878 0 2px,#9660bc 2px 6px,#3a215e 6px 10px);
 --cpp-platform-size:20px 100%;--cpp-platform-post:#dbad69;
}