/* Page shell: the parts every product page shares around its own content.
   Skip link, site header (name, NN/g credential, nav, theme switch, menu button, scroll progress),
   mobile menu, site footer and the decorative backdrop (grain, aura, drifting glows, engraved lines).
   Load after tokens.css and components.css. Behavior lives in shell.js; markup is in docs/shell.md.

   The backdrop values (blur radii, opacities, sizes, the noise images) are carried over unchanged from the
   portfolio, where they were tuned by eye. They are recorded as an exception in DECISIONS.md (2026-11-12)
   instead of being turned into one-off tokens. */
@layer components {

  /* ---- Page wrapper: holds the backdrop and clips the glows at the page edge.
     clip, not hidden: it does not make a scroll container, so sticky bars inside the page keep working. ---- */
  .pm-page {
    position: relative;
    width: 100%;
    overflow: clip;
    background: var(--pm-color-surface-page);
  }

  /* ---- Skip link: off-screen until it receives keyboard focus ---- */
  .pm-skip-link {
    position: fixed;
    top: var(--pm-space-3);
    left: var(--pm-space-3);
    z-index: 10000;
    padding: var(--pm-space-3) var(--pm-space-5);
    border-radius: var(--pm-radius-md);
    border: 2px solid var(--pm-color-accent-secondary);
    background: var(--pm-color-surface-page);
    color: var(--pm-color-text-primary);
    font-weight: var(--pm-font-weight-semibold);
    text-decoration: none;
    transform: translateY(-200%);
  }
  .pm-skip-link:focus { transform: translateY(0); }
  main:focus { outline: none; }

  /* ---- Site header ---- */
  .pm-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--pm-z-nav);
    height: var(--pm-layout-nav-height);
    display: flex;
    align-items: center;
    background: var(--pm-color-surface-page);
  }
  .pm-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--pm-layout-content-max);
    margin: 0 auto;
    padding: 0 var(--pm-layout-gutter);
  }
  /* 3px rule along the bottom edge, with the reading-progress bar drawn over it */
  .pm-site-header__rule,
  .pm-site-header__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
  }
  .pm-site-header__rule { right: 0; background: color-mix(in srgb, var(--pm-color-text-primary) 18%, transparent); }
  .pm-site-header__progress { width: 0%; background: var(--pm-gradient-brand); }

  /* the margin keeps a minimum space between the name block and whatever sits to its right */
  .pm-site-header__brand {
    margin-right: var(--pm-space-6);
    display: flex;
    align-items: center;
    gap: var(--pm-space-3);
    font-size: var(--pm-type-body-size);
    font-weight: var(--pm-font-weight-bold);
    letter-spacing: var(--pm-font-tracking-wide);
  }
  .pm-site-header__name {
    color: var(--pm-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--pm-duration-base) ease;
  }
  a.pm-site-header__name:hover { color: var(--pm-color-text-accent); }
  .pm-site-header__cred {
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
    margin-left: var(--pm-space-2);
    padding-left: var(--pm-space-4);
    border-left: 1px solid var(--pm-color-border-strong);
    text-decoration: none;
  }
  .pm-site-header__badge { display: block; flex-shrink: 0; width: auto; height: 20px; }
  .pm-site-header__badge-label {
    font-size: var(--pm-type-caption-size);
    font-weight: var(--pm-font-weight-semibold);
    letter-spacing: var(--pm-font-tracking-caps);
    color: var(--pm-color-text-tertiary);
    white-space: nowrap;
  }

  /* ---- Desktop nav ---- */
  .pm-site-nav { display: flex; align-items: center; gap: var(--pm-space-10); margin-left: auto; }
  .pm-site-nav__link {
    position: relative;
    padding: var(--pm-space-2) var(--pm-space-0-5);
    font-size: var(--pm-type-body-size);
    color: var(--pm-color-text-secondary);
    text-decoration: none;
  }
  .pm-site-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: var(--pm-radius-xs);
    background: var(--pm-gradient-brand);
    background-size: 200% 100%;
    background-position: 0% 50%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pm-duration-base) ease;
  }
  .pm-site-nav__link:hover { color: var(--pm-color-text-primary); }
  .pm-site-nav__link:hover::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: no-preference) {
    .pm-site-nav__link:hover::after { animation: pm-nav-underline 1.6s linear infinite; }
  }
  @keyframes pm-nav-underline { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
  /* current page: accent text plus a solid underline, so color is not the only cue */
  .pm-site-nav__link[aria-current="page"],
  .pm-site-nav__link[aria-current="page"]:hover { color: var(--pm-color-text-accent); }
  .pm-site-nav__link[aria-current="page"]::after,
  .pm-site-nav__link[aria-current="page"]:hover::after {
    transform: scaleX(1);
    background: var(--pm-color-accent-primary);
    animation: none;
  }
  /* the header's call to action is a ghost button, a step smaller than the default */
  .pm-site-nav__cta.pm-btn { padding: var(--pm-space-3) var(--pm-space-5); font-size: var(--pm-type-small-size); }
  .pm-site-nav__cta .pm-icon { width: 16px; height: 16px; }

  /* Compact header (the Lab tools): name, credential, one call to action and the theme switch; no nav or menu.
     The button sits at the right edge, stays on phones, and turns icon-only below 600px so the row fits. */
  .pm-site-header__cta.pm-btn { flex: none; width: auto; margin-left: auto; padding: var(--pm-space-3) var(--pm-space-5); font-size: var(--pm-type-small-size); white-space: nowrap; }
  .pm-site-header__cta .pm-icon { width: 16px; height: 16px; }
  /* a theme switch after the button sits right beside it, at every width */
  .pm-site-header__cta + .pm-theme-toggle.pm-btn { margin-left: var(--pm-space-3); margin-right: 0; }
  @media (max-width: 599px) {
    .pm-site-header__cta.pm-btn { padding: var(--pm-space-3); }
    .pm-site-header__cta-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  }

  /* ---- Theme switch: shows the theme it switches to ---- */
  .pm-theme-toggle.pm-btn { flex-shrink: 0; width: 44px; min-height: 44px; height: 44px; padding: 0; margin-left: var(--pm-space-4); }
  .pm-theme-toggle__sun, .pm-theme-toggle__moon { width: 18px; height: 18px; }
  .pm-theme-toggle__moon { display: none; }
  :root[data-theme="light"] .pm-theme-toggle__sun { display: none; }
  :root[data-theme="light"] .pm-theme-toggle__moon { display: inline-block; }

  /* ---- Menu button (phones) ---- */
  .pm-menu-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pm-space-1);
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--pm-radius-md);
    border: 1px solid var(--pm-button-ghost-border);
    background: transparent;
    color: var(--pm-color-text-primary);
    font: inherit;
    cursor: pointer;
  }
  .pm-menu-btn__bar { width: 16px; height: 2px; border-radius: var(--pm-radius-xs); background: var(--pm-color-text-primary); }
  .pm-menu-btn--close { display: flex; border-color: var(--pm-color-accent-primary); }
  .pm-menu-btn:focus-visible { outline: var(--pm-focus-ring-width) solid var(--pm-color-focus-ring); outline-offset: var(--pm-focus-ring-offset); }

  /* ---- Mobile menu (full-screen) ---- */
  .pm-site-menu {
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-nav);
    display: none;
    flex-direction: column;
    padding: var(--pm-space-6);
    background: var(--pm-color-surface-page);
  }
  .pm-site-menu.is-open { display: flex; }
  @media (prefers-reduced-motion: no-preference) {
    .pm-site-menu.is-open { animation: pm-menu-in var(--pm-duration-fast) ease; }
  }
  @keyframes pm-menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
  .pm-site-menu__bar { display: flex; justify-content: flex-end; }
  .pm-site-menu__nav { display: flex; flex-direction: column; margin-top: var(--pm-space-6); }
  .pm-site-menu__nav a {
    padding: var(--pm-space-4) 0;
    border-bottom: 1px solid var(--pm-color-border-subtle);
    font-family: var(--pm-font-family-display);
    font-size: var(--pm-type-heading-md-size);
    color: var(--pm-color-text-primary);
    text-decoration: none;
  }
  .pm-site-menu__nav a[aria-current="page"] { color: var(--pm-color-text-accent); border-bottom-color: var(--pm-color-accent-primary); }
  .pm-site-menu__cta { display: flex; align-items: center; gap: var(--pm-space-3); }
  .pm-site-menu__cta svg { flex: none; width: .9em; height: .9em; }

  @media (max-width: 860px) {
    .pm-site-nav { display: none; }
    .pm-theme-toggle.pm-btn { margin-left: auto; margin-right: var(--pm-space-3); }
    .pm-menu-btn { display: flex; }
    /* the credential sits under the name, so the full "NNg Certified - ID" fits at every phone width */
    .pm-site-header__brand { flex-direction: column; align-items: flex-start; gap: var(--pm-space-1); min-width: 0; }
    .pm-site-header__name { font-size: var(--pm-type-small-size); }
    .pm-site-header__cred { margin-left: 0; padding-left: 0; border-left: 0; }
    .pm-site-header__badge { height: 15px; }
  }
  /* narrow desktop (861–1140px): the full header is wider than the window, so the links close up and the
     credential keeps only its ID; otherwise the theme switch is pushed off the right edge */
  @media (min-width: 861px) and (max-width: 1140px) {
    .pm-site-nav { gap: var(--pm-space-6); }
    .pm-site-header__badge-prefix { display: none; }
  }
  /* under 360px only the ID stays, or the label runs into the buttons */
  @media (max-width: 359px) {
    .pm-site-header__badge-prefix { display: none; }
  }

  /* ---- Site footer ---- */
  .pm-site-footer {
    position: relative;
    z-index: var(--pm-z-content);
    border-top: 1px solid var(--pm-color-border-subtle);
  }
  .pm-site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--pm-space-2);
    max-width: var(--pm-layout-content-max);
    margin: 0 auto;
    padding: var(--pm-space-6) var(--pm-layout-gutter);
    color: var(--pm-color-text-tertiary);
    font-size: var(--pm-type-caption-size);
  }
  @media (min-width: 861px) {
    .pm-site-footer__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: var(--pm-space-3); padding-top: var(--pm-space-8); padding-bottom: var(--pm-space-8); }
  }
  .pm-site-footer a { color: inherit; }
  /* tool logos inline with the "Built with" line (sprite: dist/logos.svg) */
  .pm-site-footer__logo { display: inline-block; width: .72em; height: .72em; margin-left: .3em; margin-right: -.12em; fill: var(--pm-color-text-primary); vertical-align: baseline; }
  .pm-site-footer__logo--human { width: .6em; height: .92em; margin-left: .25em; margin-right: -.1em; vertical-align: -.1em; }

  /* ---- Magnetic buttons: shell.js moves [data-magnetic] toward the pointer ---- */
  [data-magnetic] { transition: transform var(--pm-duration-fast) var(--pm-easing-emphasized); }

  /* ---- Mailto copy confirmation: shell.js copies the address and says so, for computers with no mail app ---- */
  .pm-copy-tip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--pm-z-toast);
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
    padding: var(--pm-space-2) var(--pm-space-4);
    border: 1px solid var(--pm-color-border-subtle);
    border-radius: var(--pm-radius-full);
    background: var(--pm-color-surface-card);
    color: var(--pm-color-text-primary);
    font-size: var(--pm-type-small-size);
    line-height: var(--pm-font-line-height-none);
    white-space: nowrap;
    box-shadow: var(--pm-shadow-elevation-1);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--pm-duration-fast) ease, transform var(--pm-duration-fast) ease;
  }
  .pm-copy-tip.is-visible { opacity: 1; transform: none; }
  .pm-copy-tip svg { flex-shrink: 0; color: var(--pm-color-status-success); }

  /* ---- Backdrop ---- */
  .pm-backdrop__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: pm-grain-flicker 2.2s steps(8) infinite;
  }
  @keyframes pm-grain-flicker { 0%, 100% { opacity: .16; } 20% { opacity: .1; } 35% { opacity: .21; } 55% { opacity: .13; } 70% { opacity: .19; } 85% { opacity: .11; } }

  /* still noise over the top of the page, masked to fade out downward */
  .pm-backdrop__noise {
    position: absolute;
    inset: 0;
    z-index: var(--pm-z-raised);
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
    background-size: 95px 95px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 65%);
    mask-image: linear-gradient(to bottom, black, transparent 65%);
    animation: pm-noise-pan var(--pm-duration-slow) steps(3) infinite;
  }
  @keyframes pm-noise-pan { 0% { background-position: 0 0; } 33% { background-position: -42px 21px; } 66% { background-position: 25px -36px; } 100% { background-position: 0 0; } }

  /* set on <html> by shell.js on screens that can't keep up: the animated noise holds still */
  [data-fx="lite"] .pm-backdrop__grain,
  [data-fx="lite"] .pm-backdrop__noise { animation: none; }

  /* dither: the soft glows are 8-bit gradients and step in visible bands. A faint full-color noise layer breaks the steps up. */
  .pm-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--pm-z-raised);
    pointer-events: none;
    opacity: .016;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='3 0 0 0 -1.3  0 3 0 0 -1.3  0 0 3 0 -1.3  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
  }

  .pm-backdrop__aura {
    position: absolute;
    top: -320px;
    left: 50%;
    z-index: var(--pm-z-base);
    width: 920px;
    height: 920px;
    margin-left: -460px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--pm-color-accent-primary-muted), var(--pm-color-accent-secondary-subtle), var(--pm-color-accent-primary-muted), var(--pm-color-accent-primary-muted));
    filter: blur(100px);
    opacity: .55;
    pointer-events: none;
    animation: pm-aura-spin 34s linear infinite;
  }
  @keyframes pm-aura-spin { to { transform: rotate(360deg); } }

  /* a soft disc of page color that clears the grain around a glow */
  .pm-backdrop__clear {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, var(--pm-color-surface-page) 0%, var(--pm-color-surface-page) 28%, transparent 68%);
  }
  .pm-backdrop__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; }
  .pm-backdrop__blob--coral { background: radial-gradient(circle at 35% 35%, var(--pm-color-accent-primary) 0%, transparent 70%); }
  .pm-backdrop__blob--cyan { background: radial-gradient(circle at 65% 65%, var(--pm-color-accent-secondary) 0%, transparent 70%); }

  /* engraved line pattern, drawn by shell.js only inside the glows and the aura */
  .pm-backdrop__lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--pm-z-raised);
    width: 100%;
    height: 1100px;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .15;
  }

  @media (max-width: 860px) {
    .pm-backdrop__aura { top: -200px; width: 520px; height: 520px; margin-left: -260px; filter: blur(70px); }
    .pm-backdrop__blob { filter: blur(60px); }
    .pm-backdrop__lines { height: 800px; }
    .pm-backdrop__group--desktop { display: none; }
  }

  /* light theme: the lines print as ink and the glows are quieter and warmer, a soft wash instead of a colored smudge */
  :root[data-theme="light"] .pm-backdrop__lines { mix-blend-mode: multiply; opacity: .45; }
  :root[data-theme="light"] .pm-page::before { mix-blend-mode: multiply; }
  :root[data-theme="light"] [data-blob-group] { opacity: .5; }
  :root[data-theme="light"] .pm-backdrop__blob--coral { background: radial-gradient(circle at 35% 35%, var(--pm-color-coral-300) 0%, transparent 70%); }
  :root[data-theme="light"] .pm-backdrop__blob--cyan { background: radial-gradient(circle at 65% 65%, var(--pm-color-cyan-400) 0%, transparent 70%); }
  :root[data-theme="light"] .pm-backdrop__aura {
    opacity: .3;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--pm-color-coral-300) 35%, transparent), color-mix(in srgb, var(--pm-color-cyan-400) 25%, transparent), color-mix(in srgb, var(--pm-color-coral-300) 35%, transparent), color-mix(in srgb, var(--pm-color-coral-300) 35%, transparent));
  }

  @media (prefers-reduced-motion: reduce) {
    .pm-backdrop__grain, .pm-backdrop__noise, .pm-backdrop__aura { animation: none; }
  }

  /* ---- Type motion ----
     Number and title pop-in, adapted from transitions.dev "Number pop-in": each character rises from below, pulls back
     and springs into place past full size, staggered left to right. shell.js splits page titles (every h1 in .pm-page)
     into words and characters and adds .is-animating; a product can do the same for any figure (pmShell.numPop). */
  .pm-num-pop {
    --np-dur: 600ms;
    --np-stagger: 40ms;
    --np-distance: 0.52em;
    --np-blur: max(0.067em, 0.171em - 2.1px);
    --np-lift: 0.125em;
    --np-start-scale: 0.7;
    --np-peak: 1.03;
  }
  .pm-num-pop .pm-num-pop__ch { display: inline-block; white-space: pre; opacity: 0; font: inherit; color: inherit; letter-spacing: inherit }
  .pm-num-pop.is-animating .pm-num-pop__ch {
    animation: pm-num-pop-in var(--np-dur) linear both;
    animation-delay: calc(var(--np-base, 0ms) + var(--np-stagger) * var(--np-i, 0));
  }
  @keyframes pm-num-pop-in {
    0% { transform: translateY(calc(var(--np-distance) * 1 + var(--np-lift) * 0)) scale(var(--np-start-scale)); opacity: 0; filter: blur(calc(var(--np-blur) * 1)); }
    5% { transform: translateY(calc(var(--np-distance) * 0.941 + var(--np-lift) * 0.216)) scale(var(--np-start-scale)); opacity: 0.059; filter: blur(calc(var(--np-blur) * 1)); }
    10% { transform: translateY(calc(var(--np-distance) * 0.755 + var(--np-lift) * 0.648)) scale(var(--np-start-scale)); opacity: 0.245; filter: blur(calc(var(--np-blur) * 1)); }
    15% { transform: translateY(calc(var(--np-distance) * 0.475 + var(--np-lift) * 0.972)) scale(var(--np-start-scale)); opacity: 0.525; filter: blur(calc(var(--np-blur) * 1)); }
    20% { transform: translateY(calc(var(--np-distance) * 0.206 + var(--np-lift) * 0.792)) scale(calc(1 + (var(--np-start-scale) - 1) * 0.792)); opacity: 0.794; filter: blur(calc(var(--np-blur) * 0.9)); }
    25% { transform: translateY(calc(var(--np-distance) * 0.041 + var(--np-lift) * 0.392)) scale(calc(1 + (var(--np-start-scale) - 1) * 0.392)); opacity: 0.959; filter: blur(calc(var(--np-blur) * 0.75)); }
    30% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.033)) scale(calc(1 + (var(--np-start-scale) - 1) * 0.033)); opacity: 1; filter: blur(calc(var(--np-blur) * 0.6)); }
    35% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.194)) scale(calc(1 + (var(--np-peak) - 1) * 0.711)); opacity: 1; filter: blur(calc(var(--np-blur) * 0.45)); }
    40% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.272)) scale(calc(1 + (var(--np-peak) - 1) * 0.997)); opacity: 1; filter: blur(calc(var(--np-blur) * 0.3)); }
    45% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.238)) scale(calc(1 + (var(--np-peak) - 1) * 0.87)); opacity: 1; filter: blur(calc(var(--np-blur) * 0.15)); }
    50% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.146)) scale(calc(1 + (var(--np-peak) - 1) * 0.535)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    55% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.05)) scale(calc(1 + (var(--np-peak) - 1) * 0.183)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    60% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.019)) scale(calc(1 + (var(--np-peak) - 1) * -0.069)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    65% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.05)) scale(calc(1 + (var(--np-peak) - 1) * -0.185)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    70% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.051)) scale(calc(1 + (var(--np-peak) - 1) * -0.187)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    75% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.035)) scale(calc(1 + (var(--np-peak) - 1) * -0.128)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    80% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.016)) scale(calc(1 + (var(--np-peak) - 1) * -0.057)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    85% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0.002)) scale(calc(1 + (var(--np-peak) - 1) * -0.007)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    90% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.004)) scale(calc(1 + (var(--np-peak) - 1) * 0.013)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    95% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * -0.003)) scale(calc(1 + (var(--np-peak) - 1) * 0.011)); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
    100% { transform: translateY(calc(var(--np-distance) * 0 + var(--np-lift) * 0)) scale(1); opacity: 1; filter: blur(calc(var(--np-blur) * 0)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pm-num-pop .pm-num-pop__ch { opacity: 1 }
    .pm-num-pop.is-animating .pm-num-pop__ch { animation: none }
  }
  /* titles: words stay whole so lines only break between them; the older word-rise and fade-up title entrances are off */
  .pm-title-pop.fade-in, .pm-title-pop .split-word { animation: none; opacity: 1; transform: none; }
  .pm-title-pop .pm-num-pop__word { white-space: nowrap; }

  /* stat values and step numbers whose color follows the glows (pmShell.colorSlots) fade between colors */
  [data-color-slot] { transition: color 5s ease-in-out; }

}