/* Generated by scripts/build-sample-bundles.py from assets/js/samples.js and assets/css/samples.css. Do not edit. */
/* =====================================================================
   Parsa Dev live samples (shown on the Features pages)
   Every colour comes from the site theme (--primary, --accent, --ink …), so samples follow the palette
   picker and Light / Night. Each sample is fenced under its own pds- class. ".is-playing" plays a
   sample once on phones, which can't hover.
   Licence note: PDS-01 to PDS-05 started from MIT-licensed Uiverse.io designs (credits beside each).
   ===================================================================== */

/* keyboard users get the same effect as a mouse hover, plus a clear focus ring */
.pds-ink:focus-visible, .pds-plane:focus-visible, .pds-glide:focus-visible,
.pds-bloom__tile:focus-visible, .pds-petal:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 4px;
}

/* ---------- people who turn motion off on their device get instant, still changes ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="pds-"], [class*="pds-"]::before { transition: none !important; animation: none !important; }
}

/* ---------- shared scroll window for header samples (PDS-11 onwards) ---------- */
.pds-win {
  position: relative; width: min(100%, 520px); height: 320px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); scrollbar-width: thin;
}
.pds-win:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pds-win__page { margin-top: -3.6rem; }
.pds-win__hero { display: grid; place-items: end start; height: 210px; padding: 1.2rem; color: #fff; font-family: var(--font-display, Georgia, serif); font-size: 1.3rem;
  background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-win__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 1rem; }
.pds-win__row i { height: 90px; border-radius: 12px; background: linear-gradient(160deg, var(--primary-tint), color-mix(in srgb, var(--accent) 55%, var(--surface))); }
.pds-win__row i:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 45%, var(--surface)), var(--primary-tint)); }
.pds-win__band { height: 140px; margin: 0 1rem 1rem; border-radius: 14px; background: linear-gradient(90deg, var(--gold), var(--primary)); }
.pds-win__band--alt { background: linear-gradient(90deg, var(--accent), var(--primary-deep)); }

/* ---------- PDS-01 Ink Reveal (started from a Uiverse.io design by satyamchaudharydev, MIT) ---------- */
.pds-ink {
  --pds-ink-line: var(--ink-muted);
  --pds-ink-fill: var(--accent);
  position: relative; margin: 0; padding: 0 .1em; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display, Georgia, serif); font-size: clamp(1.5rem, 3.2vw, 2rem);
  letter-spacing: 4px; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--pds-ink-line);
}
.pds-ink__fill {
  position: absolute; inset: 0; box-sizing: border-box; width: 0%; overflow: hidden; padding: 0 .1em;
  color: var(--pds-ink-fill); -webkit-text-stroke: 1px var(--pds-ink-fill);
  border-right: 4px solid var(--pds-ink-fill); transition: width .6s cubic-bezier(.22, 1, .36, 1), filter .6s;
}
:is(.pds-ink:hover, .pds-ink:focus-visible, .is-playing .pds-ink) .pds-ink__fill {
  width: 100%; filter: drop-shadow(0 0 18px var(--pds-ink-fill));
}

/* ---------- PDS-02 Paper Plane (started from a Uiverse.io design by adamgiebl, MIT) ---------- */
.pds-plane {
  display: flex; align-items: center; overflow: hidden; cursor: pointer;
  font-family: inherit; font-size: 20px; font-weight: 600; color: #fff;
  padding: .7em 1.15em .7em .95em; border: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--primary) 60%, transparent);
  transition: transform .2s;
}
.pds-plane__label { display: block; margin-left: .35em; transition: transform .3s ease-in-out; }
.pds-plane svg { display: block; transform-origin: center center; transition: transform .3s ease-in-out; }
.pds-plane__wrap1, .pds-plane__wrap { display: block; }
:is(.pds-plane:hover, .pds-plane:focus-visible, .is-playing .pds-plane) .pds-plane__wrap { animation: pds-plane-fly .6s ease-in-out infinite alternate; }
:is(.pds-plane:hover, .pds-plane:focus-visible, .is-playing .pds-plane) svg { transform: translateX(1.25em) rotate(45deg) scale(1.1); }
:is(.pds-plane:hover, .pds-plane:focus-visible, .is-playing .pds-plane) .pds-plane__label { transform: translateX(5em); }
.pds-plane:active { transform: scale(.95); }
@keyframes pds-plane-fly { from { transform: translateY(.1em); } to { transform: translateY(-.1em); } }

/* ---------- PDS-03 Arrow Glide (started from a Uiverse.io design by cssbuttons-io, MIT) ---------- */
.pds-glide {
  position: relative; display: inline-block; width: 12.5rem; padding: 0; border: 0; outline: none;
  vertical-align: middle; background: transparent; cursor: pointer; font: inherit;
}
.pds-glide__circle {
  position: relative; display: block; margin: 0; width: 3.25rem; height: 3.25rem; border-radius: 1.75rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  transition: all .45s cubic-bezier(.65, 0, .076, 1);
}
.pds-glide__arrow {
  position: absolute; top: 0; bottom: 0; left: .7rem; margin: auto;
  width: 1.125rem; height: .125rem; background: none;
  transition: all .45s cubic-bezier(.65, 0, .076, 1);
}
.pds-glide__arrow::before {
  content: ""; position: absolute; top: -.29rem; right: .0625rem; width: .625rem; height: .625rem;
  border-top: .125rem solid #fff; border-right: .125rem solid #fff; transform: rotate(45deg);
}
.pds-glide__text {
  position: absolute; inset: 0; margin: 0 0 0 2rem; padding: .85rem 0;
  color: var(--ink); font-weight: 700; line-height: 1.6; letter-spacing: .04em; text-align: center; text-transform: uppercase;
  transition: all .45s cubic-bezier(.65, 0, .076, 1);
}
:is(.pds-glide:hover, .pds-glide:focus-visible, .is-playing .pds-glide) .pds-glide__circle { width: 100%; }
:is(.pds-glide:hover, .pds-glide:focus-visible, .is-playing .pds-glide) .pds-glide__arrow { background: #fff; transform: translate(1rem, 0); }
:is(.pds-glide:hover, .pds-glide:focus-visible, .is-playing .pds-glide) .pds-glide__text { color: #fff; }

/* ---------- PDS-04 Social Bloom (started from a Uiverse.io design by Praashoo7, MIT) ---------- */
.pds-bloom {
  position: relative; isolation: isolate; display: flex; flex-wrap: wrap; width: 13.5em;
  align-items: center; justify-content: center; font-size: 16px;
}
.pds-bloom__back {
  position: absolute; inset: 0; margin: auto; width: 10.5em; height: 10.5em; z-index: -2;
  border-radius: 14px; transform: rotate(90deg);
  background: linear-gradient(270deg, var(--primary), var(--accent), var(--gold));
  box-shadow: inset 0 0 160px 4px var(--surface);
  transition: opacity .4s ease-in-out;
}
.pds-bloom__tile {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  padding: 0; cursor: pointer; border: 1px solid transparent; border-radius: 0;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;
}
.pds-bloom__tile:nth-child(1) { border-top-left-radius: 14px; }
.pds-bloom__tile:nth-child(3) { border-top-right-radius: 14px; }
.pds-bloom__tile:nth-child(7) { border-bottom-left-radius: 14px; }
.pds-bloom__tile:nth-child(9) { border-bottom-right-radius: 14px; }
.pds-bloom__tile svg, .pds-bloom__pd { opacity: 0; transition: .2s ease-in-out; }
.pds-bloom .is-instagram svg { fill: #cc39a4; }
.pds-bloom .is-x svg { fill: #03a9f4; }
.pds-bloom .is-dribbble svg path:first-child { fill: #ffb5d2; }
.pds-bloom .is-linkedin svg { fill: #0a66c2; }
.pds-bloom .is-github svg { fill: var(--ink); }
.pds-bloom .is-discord svg { fill: #8c9eff; }
.pds-bloom .is-telegram svg > path:first-child { fill: #29b6f6; }
.pds-bloom .is-email svg { fill: var(--primary); }
.pds-bloom__pd, .pds-petal__pd {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pds-bloom__text {
  position: absolute; z-index: 3; margin: 0; pointer-events: none; text-align: center;
  font-size: .7em; font-weight: 700; letter-spacing: .33em; color: var(--ink);
  transition: .4s ease-in-out;
}
:is(.pds-bloom:hover, .pds-bloom:focus-within, .is-playing .pds-bloom) { cursor: pointer; }
:is(.pds-bloom:hover, .pds-bloom:focus-within, .is-playing .pds-bloom) .pds-bloom__back { opacity: 0; }
:is(.pds-bloom:hover, .pds-bloom:focus-within, .is-playing .pds-bloom) .pds-bloom__tile {
  margin: .2em; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--surface) 30%, transparent);
  background: color-mix(in srgb, var(--surface) 20%, transparent);
  box-shadow: 0 4px 30px color-mix(in srgb, var(--ink) 10%, transparent);
}
:is(.pds-bloom:hover, .pds-bloom:focus-within, .is-playing .pds-bloom) .pds-bloom__text { opacity: 0; z-index: -3; }
:is(.pds-bloom:hover, .pds-bloom:focus-within, .is-playing .pds-bloom) :is(.pds-bloom__tile svg, .pds-bloom__pd) { opacity: 1; }
.pds-bloom .is-instagram:is(:hover, :focus-visible) { background: #cc39a4; }
.pds-bloom .is-x:is(:hover, :focus-visible) { background: #03a9f4; }
.pds-bloom .is-dribbble:is(:hover, :focus-visible) { background: #ffb5d2; }
.pds-bloom .is-linkedin:is(:hover, :focus-visible) { background: #0a66c2; }
.pds-bloom .is-pd:is(:hover, :focus-visible) { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-bloom .is-discord:is(:hover, :focus-visible) { background: #8c9eff; }
.pds-bloom .is-github:is(:hover, :focus-visible) { background: var(--ink); }
.pds-bloom .is-telegram:is(:hover, :focus-visible) { background: #29b6f6; }
.pds-bloom .is-email:is(:hover, :focus-visible) { background: var(--primary); }
.pds-bloom :is(.is-instagram, .is-x, .is-linkedin, .is-discord, .is-email):is(:hover, :focus-visible) svg { fill: #fff; }
.pds-bloom .is-dribbble:is(:hover, :focus-visible) svg path:first-child { fill: #fff; }
.pds-bloom .is-github:is(:hover, :focus-visible) svg { fill: var(--bg); }
.pds-bloom .is-telegram:is(:hover, :focus-visible) svg > path:first-child { fill: #fff; }
.pds-bloom .is-telegram:is(:hover, :focus-visible) svg > path:not(:first-child) { fill: #29b6f6; }
.pds-bloom .is-pd:is(:hover, :focus-visible) .pds-bloom__pd { color: #fff; background: none; -webkit-text-fill-color: #fff; }

/* ---------- PDS-05 Petal Socials (started from a Uiverse.io design by Praashoo7, MIT) ---------- */
.pds-petals { display: flex; flex-direction: column; gap: .5em; font-size: 16px; }
.pds-petals__row { display: flex; gap: .5em; }
.pds-petal {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; padding: 0; border: none; outline: none; cursor: pointer;
  background: var(--surface); transition: .2s ease-in-out;
  box-shadow: color-mix(in srgb, var(--ink) 22%, transparent) 0 2px 6px -1px,
              color-mix(in srgb, var(--ink) 28%, transparent) 0 1px 3px -1px;
}
.pds-petal svg, .pds-petal__pd { transition: .2s ease-in-out; }
.pds-petal.is-instagram { border-radius: 84px 8px 8px 8px; }
.pds-petal.is-instagram svg { translate: 7px 7px; fill: #cc39a4; }
.pds-petal.is-linkedin { border-radius: 8px 84px 8px 8px; }
.pds-petal.is-linkedin svg { translate: -7px 7px; fill: #0a66c2; }
.pds-petal.is-email { border-radius: 8px 8px 8px 84px; }
.pds-petal.is-email svg { translate: 7px -7px; fill: var(--primary); }
.pds-petal.is-pd { border-radius: 8px 8px 84px 8px; }
.pds-petal.is-pd .pds-petal__pd { translate: -7px -7px; }
.pds-petal:is(:hover, :focus-visible), .is-playing .pds-petal { scale: 1.08; }
.pds-petal.is-instagram:is(:hover, :focus-visible) { background: #cc39a4; }
.pds-petal.is-linkedin:is(:hover, :focus-visible) { background: #0a66c2; }
.pds-petal.is-email:is(:hover, :focus-visible) { background: var(--primary); }
.pds-petal.is-pd:is(:hover, :focus-visible) { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-petal:is(.is-instagram, .is-linkedin, .is-email):is(:hover, :focus-visible) svg { fill: #fff; }
.pds-petal.is-pd:is(:hover, :focus-visible) .pds-petal__pd { color: #fff; background: none; -webkit-text-fill-color: #fff; }

/* ---------- PDS-24 Day & Night Rover ---------- */
/* ---------- PDS-24 Day & Night Rover ---------- */
.pds-rover, .pds-rover * { box-sizing: border-box; }
.pds-rover { --pds-rover-ease: cubic-bezier(.22, 1, .36, 1); display: grid; justify-items: center; gap: 1rem; padding: .5rem; font: inherit; text-align: center; color: var(--ink); }
.pds-rover .pds-rover__switch { position: relative; isolation: isolate; display: block; width: 170px; height: 90px; margin: 0; padding: 0; overflow: hidden;
  cursor: pointer; border: 0; border-radius: 999px; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 18%, var(--primary-tint)), color-mix(in srgb, var(--primary-tint) 55%, var(--surface)));
  box-shadow: 0 0 0 1px var(--border), 0 18px 32px -20px color-mix(in srgb, var(--primary-deep) 70%, transparent);
  transition: transform .25s var(--pds-rover-ease), box-shadow .5s var(--pds-rover-ease); }
.pds-rover .pds-rover__switch::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 3px 8px color-mix(in srgb, var(--primary-deep) 24%, transparent), inset 0 -2px 5px color-mix(in srgb, var(--primary-deep) 12%, transparent); }
.pds-rover[data-look="night"] .pds-rover__switch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--primary) 65%, transparent); }
.pds-rover .pds-rover__switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pds-rover .pds-rover__switch > span { position: absolute; }

/* sky, sun, moon, stars, cloud */
.pds-rover .pds-rover__night { inset: 0; opacity: 0; transition: opacity .55s var(--pds-rover-ease);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, #060915), color-mix(in srgb, var(--primary) 20%, #121a36)); }
.pds-rover[data-look="night"] .pds-rover__night { opacity: 1; }
.pds-rover .pds-rover__stars { inset: 0; opacity: 0; transition: opacity .45s ease; }
.pds-rover[data-look="night"] .pds-rover__stars { opacity: 1; transition-delay: .2s; }
.pds-rover .pds-rover__star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 30%, #fff);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.pds-rover .pds-rover__star:nth-child(1) { left: 56px; top: 15px; }
.pds-rover .pds-rover__star:nth-child(2) { left: 74px; top: 40px; width: 2px; height: 2px; }
.pds-rover .pds-rover__star:nth-child(3) { left: 96px; top: 12px; }
.pds-rover .pds-rover__star:nth-child(4) { left: 110px; top: 34px; width: 2px; height: 2px; }
.pds-rover .pds-rover__star:nth-child(5) { left: 142px; top: 9px; width: 2px; height: 2px; }
.pds-rover[data-look="night"] .pds-rover__star { animation: pds-rover-twinkle 2.4s ease-in-out infinite alternate; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(2) { animation-delay: -.8s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(3) { animation-delay: -1.6s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(4) { animation-delay: -.4s; }
.pds-rover[data-look="night"] .pds-rover__star:nth-child(5) { animation-delay: -1.2s; }
.pds-rover .pds-rover__sun { top: 12px; right: 18px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--gold) 45%, #fff), var(--gold) 65%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 22px 6px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: transform .6s var(--pds-rover-ease), opacity .35s ease; }
.pds-rover[data-look="night"] .pds-rover__sun { transform: translateY(68px); opacity: 0; transition-delay: 0s, .22s; }
.pds-rover .pds-rover__moon { top: 12px; left: 24px; width: 22px; height: 22px; border-radius: 50%; opacity: 0; transform: translateY(68px);
  background: radial-gradient(circle at 34% 40%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 2.5px, transparent 3px),
    radial-gradient(circle at 64% 66%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 3.5px, transparent 4px),
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--primary) 12%, #d6d0bf) 0 1.5px, transparent 2px),
    color-mix(in srgb, var(--gold) 18%, #f7f4ea);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent), 0 0 18px 4px color-mix(in srgb, var(--gold) 32%, transparent);
  transition: transform .6s var(--pds-rover-ease), opacity .3s ease; }
.pds-rover[data-look="night"] .pds-rover__moon { transform: none; opacity: 1; transition-delay: .12s; }
.pds-rover .pds-rover__cloud { top: 27px; left: 74px; width: 28px; height: 9px; border-radius: 999px; opacity: .95;
  background: color-mix(in srgb, #fff 82%, var(--primary-tint)); transition: opacity .4s ease, transform .6s var(--pds-rover-ease); }
.pds-rover .pds-rover__cloud::before, .pds-rover .pds-rover__cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.pds-rover .pds-rover__cloud::before { left: 5px; top: -6px; width: 12px; height: 12px; }
.pds-rover .pds-rover__cloud::after { left: 13px; top: -4px; width: 10px; height: 10px; }
.pds-rover[data-look="night"] .pds-rover__cloud { opacity: 0; transform: translateX(-18px); }

/* sand and dunes */
.pds-rover .pds-rover__hills { left: 0; right: 0; bottom: 0; height: 30px; }
.pds-rover .pds-rover__hills::before, .pds-rover .pds-rover__hills::after { content: ""; position: absolute; border-radius: 50%; transition: background-color .55s var(--pds-rover-ease); }
.pds-rover .pds-rover__hills::before { right: -24px; bottom: -12px; width: 120px; height: 36px; background-color: color-mix(in srgb, var(--gold) 45%, var(--surface)); }
.pds-rover .pds-rover__hills::after { left: -18px; right: -18px; bottom: -22px; height: 36px; background-color: color-mix(in srgb, var(--gold) 82%, var(--ink)); }
.pds-rover[data-look="night"] .pds-rover__hills::before { background-color: color-mix(in srgb, var(--primary) 30%, #151b38); }
.pds-rover[data-look="night"] .pds-rover__hills::after { background-color: color-mix(in srgb, var(--gold) 32%, #10142a); }

/* the Parsa Dev rover */
.pds-rover .pds-rover__bot { left: 12px; bottom: 9px; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 38px;
  transition: transform .6s var(--pds-rover-ease); }
.pds-rover[data-look="night"] .pds-rover__bot { transform: translateX(108px); }
.pds-rover .pds-rover__bot::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -3px; z-index: -1; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-deep) 32%, transparent); }
.pds-rover .pds-rover__top { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  transition: transform .45s var(--pds-rover-ease); }
.pds-rover .pds-rover__head { position: relative; display: block; width: 30px; height: 20px; padding: 3px; border-radius: 9px 9px 7px 7px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 86%, var(--primary)));
  border: 1.5px solid var(--border-strong); box-shadow: 0 2px 4px -1px color-mix(in srgb, var(--primary-deep) 35%, transparent); }
.pds-rover .pds-rover__head::before, .pds-rover .pds-rover__head::after { content: ""; position: absolute; top: 4px; width: 4px; height: 8px; border-radius: 2px; background: var(--primary); }
.pds-rover .pds-rover__head::before { left: -5.5px; }
.pds-rover .pds-rover__head::after { right: -5.5px; }
.pds-rover .pds-rover__visor { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 5px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 40%, #0a0f1f) 0 45%, color-mix(in srgb, var(--primary) 24%, #0a0f1f) 45%); }
.pds-rover .pds-rover__eyes { display: flex; gap: 5px; transition: transform .35s var(--pds-rover-ease); }
.pds-rover .pds-rover__eye { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 80%, transparent); animation: pds-rover-blink 5s ease-in-out infinite; }
.pds-rover[data-look="night"] .pds-rover__eye { box-shadow: 0 0 7px 1px var(--accent); }
.pds-rover .pds-rover__neck { display: block; width: 6px; height: 7px; margin-top: -1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface) 70%, var(--ink)), var(--surface) 50%, color-mix(in srgb, var(--surface) 70%, var(--ink))); }
.pds-rover .pds-rover__wheel { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -3px; border-radius: 50%;
  background: repeating-conic-gradient(var(--primary) 0 24deg, var(--primary-deep) 24deg 30deg);
  box-shadow: 0 2px 5px -1px color-mix(in srgb, var(--primary-deep) 45%, transparent); transition: transform .6s var(--pds-rover-ease); }
.pds-rover[data-look="night"] .pds-rover__wheel { transform: rotate(326deg); }
.pds-rover .pds-rover__hub { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface) 0 40%, color-mix(in srgb, var(--surface) 84%, var(--ink)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-deep) 30%, transparent); }
.pds-rover .pds-rover__badge { display: block; padding: 2px 3px; border-radius: 4px; font: inherit; font-size: 7px; font-weight: 800; line-height: 1;
  letter-spacing: .04em; color: #fff; background: var(--primary); }

/* rolling: the head sways while the wheel travels */
.pds-rover.is-moving[data-look="night"] .pds-rover__top { animation: pds-rover-tilt-r .7s ease-in-out; }
.pds-rover.is-moving[data-look="day"] .pds-rover__top { animation: pds-rover-tilt-l .7s ease-in-out; }

/* hover / focus: the rover peeks at the other side */
@media (hover: hover) {
  .pds-rover .pds-rover__switch:hover { transform: translateY(-2px); }
  .pds-rover .pds-rover__switch:hover .pds-rover__top { transform: rotate(5deg); }
  .pds-rover[data-look="night"] .pds-rover__switch:hover .pds-rover__top { transform: rotate(-5deg); }
  .pds-rover .pds-rover__switch:hover .pds-rover__eyes { transform: translateX(2.5px); }
  .pds-rover[data-look="night"] .pds-rover__switch:hover .pds-rover__eyes { transform: translateX(-2.5px); }
}
.pds-rover .pds-rover__switch:focus-visible .pds-rover__eyes { transform: translateX(2.5px); }
.pds-rover[data-look="night"] .pds-rover__switch:focus-visible .pds-rover__eyes { transform: translateX(-2.5px); }
.pds-rover .pds-rover__switch:active { transform: scale(.97); }

/* Auto / Day / Night */
.pds-rover .pds-rover__seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px;
  background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-rover .pds-rover__seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 6px 14px -8px color-mix(in srgb, var(--primary-deep) 60%, transparent);
  transition: transform .45s var(--pds-rover-ease); }
.pds-rover[data-choice="off"] .pds-rover__seg::before { transform: translateX(100%); }
.pds-rover[data-choice="on"] .pds-rover__seg::before { transform: translateX(200%); }
.pds-rover .pds-rover__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; margin: 0;
  padding: .45rem .8rem; cursor: pointer; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2;
  color: var(--ink-muted); -webkit-appearance: none; appearance: none; transition: color .3s; }
.pds-rover .pds-rover__opt svg { flex: none; width: 14px; height: 14px; transition: color .3s; }
.pds-rover .pds-rover__opt:hover, .pds-rover .pds-rover__opt[aria-pressed="true"] { color: var(--ink); }
.pds-rover .pds-rover__opt[aria-pressed="true"] svg { color: var(--primary); }
.pds-rover .pds-rover__opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pds-rover .pds-rover__note { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .78rem; line-height: 1.4; color: var(--ink-muted); }
.pds-rover .pds-rover__note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); transition: background-color .4s, box-shadow .4s; }
.pds-rover[data-look="night"] .pds-rover__note::before { background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }

/* no sliding about on first paint, and calm for reduced motion */
.pds-rover:not(.is-ready) *, .pds-rover:not(.is-ready) *::before, .pds-rover:not(.is-ready) *::after { transition: none !important; }
@keyframes pds-rover-twinkle { from { opacity: 1; transform: scale(1); } to { opacity: .3; transform: scale(.6); } }
@keyframes pds-rover-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes pds-rover-tilt-r { 30% { transform: rotate(-14deg); } 72% { transform: rotate(7deg); } }
@keyframes pds-rover-tilt-l { 30% { transform: rotate(14deg); } 72% { transform: rotate(-7deg); } }
@media (prefers-reduced-motion: reduce) {
  .pds-rover *, .pds-rover *::before, .pds-rover *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-29 Stack Socials ---------- */
/* ---------- PDS-29 Stack Socials ---------- */
.pds-stack, .pds-stack * { box-sizing: border-box; }
.pds-stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.8rem 1.4rem; width: min(100%, 30rem); margin: 0 auto;
  padding: 9.4rem 1rem 2.6rem; list-style: none; font: inherit; color: var(--ink); }
.pds-stack .pds-stack__item { position: relative; z-index: 0; margin: 0; padding: 0; }
.pds-stack .pds-stack__item:is(:hover, :focus-within) { z-index: 2; }
.pds-stack .pds-stack__btn { position: relative; display: block; width: 55px; height: 55px; margin: 0; padding: 0; border: 0; border-radius: 15px;
  background: none; font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.pds-stack .pds-stack__btn:focus-visible { outline: none; }
.pds-stack .pds-stack__btn:focus-visible .pds-stack__top { outline: 2px solid var(--primary); outline-offset: 3px; }

/* real brand colours, shown only on hover / focus */
.pds-stack .is-instagram { --pds-stack-brand: #dc2743; --pds-stack-glyph: #fff;
  --pds-stack-fill: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); }
.pds-stack .is-linkedin { --pds-stack-brand: #0a66c2; --pds-stack-fill: #0a66c2; --pds-stack-glyph: #fff; }
.pds-stack .is-x { --pds-stack-brand: var(--ink); --pds-stack-fill: var(--ink); --pds-stack-glyph: var(--bg); }
.pds-stack .is-youtube { --pds-stack-brand: #ff0000; --pds-stack-fill: #ff0000; --pds-stack-glyph: #fff; }
.pds-stack .is-tiktok { --pds-stack-brand: #fe2c55; --pds-stack-fill: var(--ink); --pds-stack-glyph: var(--bg);
  --pds-stack-glow: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
.pds-stack .is-instagram .pds-stack__layers > span:nth-child(1) { --pds-stack-line: #f09433; }
.pds-stack .is-instagram .pds-stack__layers > span:nth-child(2) { --pds-stack-line: #e6683c; }
.pds-stack .is-instagram .pds-stack__layers > span:nth-child(4) { --pds-stack-line: #cc2366; }
.pds-stack .is-instagram .pds-stack__layers > span:nth-child(5) { --pds-stack-line: #bc1888; }
.pds-stack .is-tiktok .pds-stack__layers > span:nth-child(odd) { --pds-stack-line: #25f4ee; }

/* the five stacked layers */
.pds-stack .pds-stack__layers { position: absolute; inset: 0; display: block; transition: transform .3s ease; }
.pds-stack .pds-stack__layers > span { position: absolute; inset: 0; display: block; border: 1px solid var(--border-strong); border-radius: 15px;
  background: transparent; transition: transform .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease, color .3s ease; }
.pds-stack .pds-stack__layers > .pds-stack__top { display: grid; place-items: center; color: var(--ink-muted); background: var(--surface);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--ink) 45%, transparent); }
.pds-stack .pds-stack__top::before { content: ""; position: absolute; inset: -1px; border-radius: 16px; background: var(--pds-stack-fill);
  opacity: 0; transition: opacity .3s ease; }
.pds-stack .pds-stack__top svg { position: relative; display: block; width: 24px; height: 24px; transition: filter .3s ease; }
.pds-stack .is-instagram .pds-stack__top svg { width: 26px; height: 26px; }
.pds-stack .pds-stack__text { position: absolute; top: 100%; left: 50%; z-index: 1; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  line-height: 1.2; white-space: nowrap; color: var(--ink-muted); opacity: 0; transform: translate(-50%, -.6rem); pointer-events: none;
  transition: transform .3s ease, opacity .3s ease, color .3s ease; }

/* hover, keyboard focus and the phone play-through */
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers { transform: rotate(-35deg) skew(20deg); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span {
  --pds-stack-on: var(--pds-stack-line, var(--pds-stack-brand));
  border-color: var(--pds-stack-on); background-color: color-mix(in srgb, var(--pds-stack-on) 12%, transparent);
  box-shadow: -1px 1px 3px color-mix(in srgb, var(--pds-stack-on) 55%, transparent); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span:nth-child(1) { opacity: .2; }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span:nth-child(2) { opacity: .4; transform: translate(5px, -5px); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span:nth-child(3) { opacity: .6; transform: translate(10px, -10px); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span:nth-child(4) { opacity: .8; transform: translate(15px, -15px); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__layers > span:nth-child(5) {
  opacity: 1; transform: translate(20px, -20px); color: var(--pds-stack-glyph); background-color: var(--surface); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__top::before { opacity: 1; }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__top svg { filter: var(--pds-stack-glow, none); }
:is(.pds-stack .pds-stack__btn:is(:hover, :focus-visible), .is-playing .pds-stack .pds-stack__btn) .pds-stack__text {
  opacity: 1; transform: translate(-50%, .7rem); color: color-mix(in srgb, var(--pds-stack-brand) 78%, var(--ink)); }

/* profile tooltip above the hovered icon */
.pds-stack .pds-stack__tip { position: absolute; bottom: calc(100% + 2.6rem); left: 50%; z-index: 3; display: block; width: max-content; min-width: 9.5rem;
  padding: .65rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink);
  text-align: left; line-height: 1.3; white-space: nowrap; pointer-events: none;
  box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--ink) 40%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 14%, transparent);
  opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--pds-stack-nudge, 0px)), .5rem) scale(.95); transform-origin: 50% 100%;
  transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .3s; }
.pds-stack .pds-stack__tip::after { content: ""; position: absolute; left: calc(50% - var(--pds-stack-nudge, 0px)); bottom: -6px; width: 11px; height: 11px;
  margin-left: -5.5px; border: solid var(--border); border-width: 0 1px 1px 0; background: var(--surface); transform: rotate(45deg); }
.pds-stack .pds-stack__btn:is(:hover, :focus-visible) .pds-stack__tip, .is-playing .pds-stack .is-linkedin .pds-stack__tip {
  opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--pds-stack-nudge, 0px)), 0) scale(1); }
.pds-stack .pds-stack__user { display: flex; align-items: center; gap: .6rem; }
.pds-stack .pds-stack__avatar { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 10px;
  font-family: var(--font-display, Georgia, serif); font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--pds-stack-brand); }
.pds-stack .pds-stack__who { display: grid; }
.pds-stack .pds-stack__who b { font-size: .9rem; font-weight: 700; color: var(--ink); }
.pds-stack .pds-stack__who span { font-size: .76rem; color: var(--ink-muted); }
.pds-stack .pds-stack__about { display: flex; align-items: center; gap: .45rem; margin-top: .55rem; padding-top: .5rem;
  border-top: 1px solid var(--border); font-size: .74rem; color: var(--ink-muted); }
.pds-stack .pds-stack__about::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pds-stack-fill); }

/* phones: the five tiles fan in a quick wave, LinkedIn shows the card */
.pds-stack .pds-stack__layers, .pds-stack .pds-stack__layers > span, .pds-stack .pds-stack__top::before, .pds-stack .pds-stack__text {
  transition-delay: var(--pds-stack-delay, 0s); }
.is-playing .pds-stack .pds-stack__item:nth-child(2) { --pds-stack-delay: .08s; z-index: 2; }
.is-playing .pds-stack .pds-stack__item:nth-child(3) { --pds-stack-delay: .16s; }
.is-playing .pds-stack .pds-stack__item:nth-child(4) { --pds-stack-delay: .24s; }
.is-playing .pds-stack .pds-stack__item:nth-child(5) { --pds-stack-delay: .32s; }
.is-playing .pds-stack .is-linkedin .pds-stack__tip { transition-delay: .25s; }

/* narrow screens: three over two, edge cards nudged inwards */
@media (max-width: 480px) {
  .pds-stack { width: min(100%, 17rem); padding-inline: .75rem; }
  .pds-stack .pds-stack__item:nth-child(1) { --pds-stack-nudge: 1.75rem; }
  .pds-stack .pds-stack__item:nth-child(3) { --pds-stack-nudge: -1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pds-stack *, .pds-stack *::before, .pds-stack *::after { transition: none !important; }
}

/* ---------- PDS-30 Lantern Glow ---------- */
.pds-lantern, .pds-lantern * { box-sizing: border-box; }
.pds-lantern { --pds-lantern-ease: cubic-bezier(.22, 1, .36, 1); --pds-lantern-a: var(--primary); --pds-lantern-b: var(--accent);
  --pds-lantern-shade: color-mix(in srgb, var(--primary) 18%, #000);
  display: grid; justify-items: center; gap: 1.6rem; width: min(100%, 460px); margin: 0 auto; padding: 1.75rem .5rem 1rem;
  font: inherit; text-align: center; color: var(--ink); }
.pds-lantern[data-tone="accent"] { --pds-lantern-a: var(--accent); --pds-lantern-b: var(--gold); }
.pds-lantern[data-tone="gold"] { --pds-lantern-a: var(--gold); --pds-lantern-b: var(--primary); }
.pds-lantern .pds-lantern__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem 1.3rem; }
/* the button itself is see-through: the glow sits under a separate face so it never covers the label */
.pds-lantern .pds-lantern__btn { position: relative; isolation: isolate; display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; font: inherit; color: inherit; background: none; -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--pds-lantern-ease); }
.pds-lantern .pds-lantern__face { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.55rem;
  border-radius: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pds-lantern .pds-lantern__btn--main .pds-lantern__face { color: var(--bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 90%, #fff), var(--primary) 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary-deep) 30%, transparent); }
.pds-lantern .pds-lantern__btn--ghost .pds-lantern__face { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pds-lantern .pds-lantern__face svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--pds-lantern-ease); }
/* the glow: a blurred brand gradient that breathes slowly */
.pds-lantern .pds-lantern__aura { position: absolute; inset: 4px 8px -8px; z-index: 0; border-radius: inherit; pointer-events: none; opacity: .85; filter: blur(16px);
  transition: opacity .5s var(--pds-lantern-ease), inset .5s var(--pds-lantern-ease), filter .5s var(--pds-lantern-ease); }
.pds-lantern .pds-lantern__aura::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, var(--pds-lantern-a), var(--pds-lantern-b) 50%, var(--pds-lantern-a));
  animation: pds-lantern-breathe 3.6s ease-in-out infinite; }
.pds-lantern .pds-lantern__btn--ghost .pds-lantern__aura { opacity: 0; }
/* hover, keyboard focus and the phone play-through all brighten it */
:is(.pds-lantern .pds-lantern__btn:hover, .pds-lantern .pds-lantern__btn:focus-visible, .is-playing .pds-lantern .pds-lantern__btn--main) { transform: translateY(-2px); }
:is(.pds-lantern .pds-lantern__btn:hover, .pds-lantern .pds-lantern__btn:focus-visible, .is-playing .pds-lantern .pds-lantern__btn--main) .pds-lantern__aura {
  inset: -8px -12px -14px; opacity: 1; filter: blur(22px); }
:is(.pds-lantern .pds-lantern__btn:hover, .pds-lantern .pds-lantern__btn:focus-visible, .is-playing .pds-lantern .pds-lantern__btn--main) svg { transform: translateX(3px); }
.pds-lantern .pds-lantern__btn--ghost:is(:hover, :focus-visible) .pds-lantern__aura { inset: -4px -8px -10px; opacity: .55; }
.pds-lantern .pds-lantern__btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.pds-lantern .pds-lantern__btn--main::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.pds-lantern .pds-lantern__btn--main.is-burst::after { animation: pds-lantern-ring .8s var(--pds-lantern-ease); }
.pds-lantern :is(.pds-lantern__btn, .pds-lantern__tone):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* glow colour picker */
.pds-lantern .pds-lantern__tones { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .3rem; border-radius: 999px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 12px 24px -18px color-mix(in srgb, var(--pds-lantern-shade) 60%, transparent); }
.pds-lantern .pds-lantern__tone { --pds-lantern-sw: var(--primary); display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .42rem .8rem;
  border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-muted); background: none;
  transition: color .3s, background-color .3s; }
.pds-lantern .pds-lantern__tone[data-tone="accent"] { --pds-lantern-sw: var(--accent); }
.pds-lantern .pds-lantern__tone[data-tone="gold"] { --pds-lantern-sw: var(--gold); }
.pds-lantern .pds-lantern__tone i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--pds-lantern-sw);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pds-lantern-sw) 22%, transparent), 0 0 10px color-mix(in srgb, var(--pds-lantern-sw) 70%, transparent); }
.pds-lantern .pds-lantern__tone:hover { color: var(--ink); }
.pds-lantern .pds-lantern__tone[aria-pressed="true"] { color: var(--ink); background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pds-lantern .pds-lantern__note { min-height: 2.8em; max-width: 30ch; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-muted); }
@keyframes pds-lantern-breathe { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes pds-lantern-ring {
  from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pds-lantern-a) 65%, transparent); }
  to { opacity: 0; box-shadow: 0 0 0 20px color-mix(in srgb, var(--pds-lantern-a) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-lantern *, .pds-lantern *::before, .pds-lantern *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-31 Light Sweep ---------- */
.pds-sweep, .pds-sweep * { box-sizing: border-box; }
.pds-sweep { --pds-sweep-ease: cubic-bezier(.22, 1, .36, 1); --pds-sweep-glide: cubic-bezier(.45, 0, .2, 1);
  --pds-sweep-shade: color-mix(in srgb, var(--primary) 18%, #000);
  display: grid; justify-items: center; gap: 1.6rem; width: min(100%, 460px); margin: 0 auto; padding: 1.75rem .5rem 1rem;
  font: inherit; text-align: center; color: var(--ink); }
.pds-sweep .pds-sweep__btn { position: relative; isolation: isolate; display: inline-flex; margin: 0; padding: 0; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; background: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 20px 36px -20px color-mix(in srgb, var(--primary) 80%, transparent), 0 3px 8px -4px color-mix(in srgb, var(--pds-sweep-shade) 50%, transparent);
  transition: transform .45s var(--pds-sweep-ease), box-shadow .45s var(--pds-sweep-ease); }
/* a deep brand fill in Light and Night, so the white label and the light band always read */
.pds-sweep .pds-sweep__face { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.75rem; border-radius: inherit;
  font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: #fff;
  background: radial-gradient(120% 120% at 50% -20%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 40%, #0d1120), color-mix(in srgb, var(--primary) 22%, #06080f));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent); }
.pds-sweep .pds-sweep__spark { width: 1.1em; height: 1.1em; fill: color-mix(in srgb, var(--gold) 55%, #fff); transition: transform .6s var(--pds-sweep-ease); }
.pds-sweep .pds-sweep__shine { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pds-sweep .pds-sweep__shine::before { content: ""; position: absolute; inset: 0; translate: -100% 0;
  background: linear-gradient(105deg, transparent 32%, color-mix(in srgb, #fff 16%, transparent) 42%, color-mix(in srgb, #fff 60%, transparent) 50%,
    color-mix(in srgb, #fff 16%, transparent) 58%, transparent 68%); }
/* the sweep takes about a second; the rest of each loop is the pause you choose */
.pds-sweep[data-pace="2"] .pds-sweep__shine::before { animation: pds-sweep-2 2s var(--pds-sweep-glide) infinite; }
.pds-sweep[data-pace="4"] .pds-sweep__shine::before { animation: pds-sweep-4 4s var(--pds-sweep-glide) infinite; }
.pds-sweep[data-pace="7"] .pds-sweep__shine::before { animation: pds-sweep-7 7s var(--pds-sweep-glide) infinite; }
:is(.pds-sweep .pds-sweep__btn:hover, .pds-sweep .pds-sweep__btn:focus-visible, .is-playing .pds-sweep .pds-sweep__btn) { transform: translateY(-2px);
  box-shadow: 0 26px 44px -20px color-mix(in srgb, var(--primary) 90%, transparent), 0 3px 8px -4px color-mix(in srgb, var(--pds-sweep-shade) 50%, transparent); }
:is(.pds-sweep .pds-sweep__btn:hover, .pds-sweep .pds-sweep__btn:focus-visible, .is-playing .pds-sweep .pds-sweep__btn) .pds-sweep__shine::before {
  animation: pds-sweep-now 1.5s var(--pds-sweep-glide) infinite; }
:is(.pds-sweep .pds-sweep__btn:hover, .pds-sweep .pds-sweep__btn:focus-visible, .is-playing .pds-sweep .pds-sweep__btn) .pds-sweep__spark { transform: rotate(90deg) scale(1.1); }
.pds-sweep .pds-sweep__btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.pds-sweep.is-calm .pds-sweep__btn .pds-sweep__shine::before { animation: none; }
.pds-sweep :is(.pds-sweep__btn, .pds-sweep__opt, .pds-sweep__calm):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* timing and reduced-motion controls */
.pds-sweep .pds-sweep__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem 1rem; }
.pds-sweep .pds-sweep__pace { display: inline-flex; gap: .2rem; padding: .28rem; border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), 0 12px 24px -18px color-mix(in srgb, var(--pds-sweep-shade) 60%, transparent); }
.pds-sweep .pds-sweep__opt { margin: 0; padding: .42rem .7rem; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 600;
  white-space: nowrap; color: var(--ink-muted); background: none; transition: color .3s, background-color .3s; }
.pds-sweep .pds-sweep__opt b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.pds-sweep .pds-sweep__opt:hover { color: var(--ink); }
.pds-sweep .pds-sweep__opt[aria-pressed="true"] { color: var(--primary-deep); background: var(--primary-tint); }
.pds-sweep .pds-sweep__calm { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .3rem .25rem; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-muted); background: none; }
.pds-sweep .pds-sweep__track { position: relative; flex: none; width: 2.2rem; height: 1.25rem; border-radius: 999px; background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color .3s; }
.pds-sweep .pds-sweep__knob { position: absolute; top: .2rem; left: .2rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--ink-faint);
  transition: transform .35s var(--pds-sweep-ease), background-color .3s; }
.pds-sweep .pds-sweep__calm[aria-checked="true"] { color: var(--ink); }
.pds-sweep .pds-sweep__calm[aria-checked="true"] .pds-sweep__track { background: var(--primary); box-shadow: none; }
.pds-sweep .pds-sweep__calm[aria-checked="true"] .pds-sweep__knob { background: var(--bg); transform: translateX(.95rem); }
.pds-sweep .pds-sweep__note { min-height: 2.8em; max-width: 32ch; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-muted); }
@keyframes pds-sweep-2 { 0% { translate: -100% 0; } 50%, 100% { translate: 100% 0; } }
@keyframes pds-sweep-4 { 0% { translate: -100% 0; } 26%, 100% { translate: 100% 0; } }
@keyframes pds-sweep-7 { 0% { translate: -100% 0; } 15%, 100% { translate: 100% 0; } }
@keyframes pds-sweep-now { 0% { translate: -100% 0; } 70%, 100% { translate: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .pds-sweep *, .pds-sweep *::before, .pds-sweep *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-32 Orbit Border ---------- */
.pds-orbit, .pds-orbit * { box-sizing: border-box; }
.pds-orbit { --pds-orbit-ease: cubic-bezier(.22, 1, .36, 1); --pds-orbit-fs: 1rem; --pds-orbit-shade: color-mix(in srgb, var(--primary) 18%, #000);
  display: grid; justify-items: center; gap: 1.5rem; width: min(100%, 480px); margin: 0 auto; padding: 1.5rem .5rem 1rem;
  font: inherit; text-align: center; color: var(--ink); }
.pds-orbit[data-size="s"] { --pds-orbit-fs: .85rem; }
.pds-orbit[data-size="l"] { --pds-orbit-fs: 1.18rem; }
.pds-orbit .pds-orbit__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.1rem; min-height: 5rem; }
/* 2px of padding is the border: the turning colour shows through it around the fill */
.pds-orbit .pds-orbit__btn { position: relative; isolation: isolate; display: inline-flex; margin: 0; padding: 2px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: var(--pds-orbit-fs); font-weight: 700; color: var(--ink); background: none; -webkit-tap-highlight-color: transparent;
  transition: font-size .5s var(--pds-orbit-ease), transform .3s var(--pds-orbit-ease); }
.pds-orbit .pds-orbit__ring, .pds-orbit .pds-orbit__glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pds-orbit .pds-orbit__glow { inset: 1px; filter: blur(12px); opacity: .35; transition: opacity .5s var(--pds-orbit-ease), inset .5s var(--pds-orbit-ease); }
.pds-orbit .pds-orbit__ring::before, .pds-orbit .pds-orbit__glow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(var(--primary), var(--accent) 20%, var(--gold) 34%, var(--primary) 50%, var(--accent) 70%, var(--primary-deep) 85%, var(--primary));
  animation: pds-orbit-spin 6s linear infinite; }
.pds-orbit .pds-orbit__btn--round :is(.pds-orbit__ring, .pds-orbit__glow)::before { animation-duration: 4.5s; animation-direction: reverse; }
.pds-orbit .pds-orbit__fill { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.1em; padding: 0 1.45em; border-radius: inherit; white-space: nowrap; background: var(--surface);
  transition: background-color .4s var(--pds-orbit-ease); }
.pds-orbit .pds-orbit__btn--round .pds-orbit__fill { width: 3.1em; height: 3.1em; padding: 0; font-family: var(--font-display, Georgia, serif); font-weight: 600; letter-spacing: .03em; }
.pds-orbit .pds-orbit__arrow { width: 1.05em; height: 1.05em; fill: none; stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--pds-orbit-ease); }
:is(.pds-orbit .pds-orbit__btn:hover, .pds-orbit .pds-orbit__btn:focus-visible, .is-playing .pds-orbit .pds-orbit__btn) .pds-orbit__glow { inset: -3px; opacity: .85; }
:is(.pds-orbit .pds-orbit__btn:hover, .pds-orbit .pds-orbit__btn:focus-visible, .is-playing .pds-orbit .pds-orbit__btn) .pds-orbit__fill {
  background-color: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
:is(.pds-orbit .pds-orbit__btn:hover, .pds-orbit .pds-orbit__btn:focus-visible, .is-playing .pds-orbit .pds-orbit__btn) .pds-orbit__arrow { transform: translateX(3px); }
.pds-orbit .pds-orbit__btn:active { transform: scale(.97); }
.pds-orbit :is(.pds-orbit__btn, .pds-orbit__size):focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
/* size picker */
.pds-orbit .pds-orbit__sizes { display: inline-flex; align-items: center; gap: .2rem; padding: .28rem; border-radius: 999px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), 0 12px 24px -18px color-mix(in srgb, var(--pds-orbit-shade) 60%, transparent); }
.pds-orbit .pds-orbit__cap { padding: 0 .45rem 0 .65rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pds-orbit .pds-orbit__size { min-width: 2.25rem; margin: 0; padding: .42rem .6rem; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .78rem; font-weight: 600; color: var(--ink-muted); background: none;
  transition: color .3s, background-color .3s; }
.pds-orbit .pds-orbit__size:hover { color: var(--ink); }
.pds-orbit .pds-orbit__size[aria-pressed="true"] { color: var(--primary-deep); background: var(--primary-tint); }
.pds-orbit .pds-orbit__note { min-height: 2.8em; max-width: 32ch; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-muted); }
@keyframes pds-orbit-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .pds-orbit *, .pds-orbit *::before, .pds-orbit *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-33 Keycap Press ---------- */
.pds-keycap, .pds-keycap * { box-sizing: border-box; }
.pds-keycap { --pds-keycap-ease: cubic-bezier(.3, .7, .4, 1); --pds-keycap-spring: cubic-bezier(.3, .7, .4, 1.5);
  display: grid; justify-items: center; gap: 1.5rem; width: min(100%, 470px); margin: 0 auto; padding: 1.75rem .5rem 1rem;
  font: inherit; text-align: center; color: var(--ink); }
.pds-keycap .pds-keycap__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.7rem 1.3rem; padding-top: .5rem; }
/* three layers: a soft shadow, the darker side of the key, and the face that moves */
.pds-keycap .pds-keycap__key { --pds-keycap-face: linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary) 70%);
  --pds-keycap-edge: color-mix(in srgb, var(--primary) 58%, #000); --pds-keycap-text: var(--bg);
  position: relative; display: inline-block; margin: 0; padding: 0; border: 0; border-radius: 16px; outline: none; cursor: pointer;
  font: inherit; background: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.pds-keycap .pds-keycap__key--soft { --pds-keycap-face: linear-gradient(180deg, color-mix(in srgb, var(--primary-tint) 90%, #fff), var(--primary-tint) 70%);
  --pds-keycap-edge: color-mix(in srgb, color-mix(in srgb, var(--primary-tint) 80%, var(--primary)) 55%, #000); --pds-keycap-text: var(--primary-deep); }
.pds-keycap .pds-keycap__shadow { position: absolute; inset: 0; border-radius: inherit; filter: blur(5px); transform: translateY(4px);
  background: color-mix(in srgb, color-mix(in srgb, var(--primary) 20%, #000) 40%, transparent); transition: transform .5s var(--pds-keycap-spring); }
.pds-keycap .pds-keycap__edge { position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pds-keycap-edge) 75%, #000), var(--pds-keycap-edge) 8% 92%, color-mix(in srgb, var(--pds-keycap-edge) 75%, #000)); }
.pds-keycap .pds-keycap__front { position: relative; display: flex; align-items: center; gap: .55rem; padding: 1rem 1.75rem; border-radius: inherit;
  font-size: 1.06rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; color: var(--pds-keycap-text); background: var(--pds-keycap-face);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--pds-keycap-edge) 30%, transparent);
  transform: translateY(-6px); transition: transform .5s var(--pds-keycap-spring); will-change: transform; }
.pds-keycap .pds-keycap__front svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* lifts a little on hover, sinks fast when pressed, springs back with a small overshoot */
:is(.pds-keycap .pds-keycap__key:hover, .pds-keycap .pds-keycap__key:focus-visible) .pds-keycap__front { transform: translateY(-8px); transition: transform .25s var(--pds-keycap-spring); }
:is(.pds-keycap .pds-keycap__key:hover, .pds-keycap .pds-keycap__key:focus-visible) .pds-keycap__shadow { transform: translateY(6px); transition: transform .25s var(--pds-keycap-spring); }
:is(.pds-keycap .pds-keycap__key:active, .pds-keycap .pds-keycap__key.is-down) .pds-keycap__front { transform: translateY(-1px); transition: transform 40ms linear; }
:is(.pds-keycap .pds-keycap__key:active, .pds-keycap .pds-keycap__key.is-down) .pds-keycap__shadow { transform: translateY(1px); transition: transform 40ms linear; }
.pds-keycap .pds-keycap__key:focus-visible .pds-keycap__front { outline: 2px solid var(--primary); outline-offset: 3px; }
.is-playing .pds-keycap .pds-keycap__key:first-child .pds-keycap__front { animation: pds-keycap-tap 1.5s var(--pds-keycap-ease) .25s both; }
.pds-keycap .pds-keycap__note { min-height: 2.8em; max-width: 32ch; margin: 0; font-size: .82rem; line-height: 1.4; color: var(--ink-muted); }
@keyframes pds-keycap-tap {
  0%, 100% { transform: translateY(-6px); } 15%, 32% { transform: translateY(-1px); } 46% { transform: translateY(-10px); }
  62% { transform: translateY(-5px); } 78% { transform: translateY(-6.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-keycap *, .pds-keycap *::before, .pds-keycap *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-34 Quick Copy ---------- */
.pds-copy, .pds-copy * { box-sizing: border-box; }
.pds-copy { --pds-copy-ease: cubic-bezier(.22, 1, .36, 1); --pds-copy-shade: color-mix(in srgb, var(--primary) 18%, #000);
  width: min(100%, 390px); margin: 0 auto; font: inherit; text-align: start; color: var(--ink); }
.pds-copy .pds-copy__card { display: grid; gap: .5rem; padding: 1.3rem 1.2rem 1.05rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--pds-copy-shade) 60%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--pds-copy-shade) 25%, transparent); }
.pds-copy .pds-copy__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.pds-copy .pds-copy__logo { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 11px;
  font-family: var(--font-display, Georgia, serif); font-size: .9rem; font-weight: 600; color: var(--bg);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-copy .pds-copy__title { display: grid; gap: .1rem; margin: 0; line-height: 1.25; }
.pds-copy .pds-copy__title b { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; font-weight: 600; }
.pds-copy .pds-copy__title small { font-size: .76rem; color: var(--ink-muted); }
.pds-copy .pds-copy__eyebrow { margin: .3rem 0 0; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pds-copy .pds-copy__row { display: flex; gap: .5rem; }
.pds-copy .pds-copy__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; height: 2.9rem; padding: 0 .8rem;
  border-radius: 12px; background: var(--surface-sunk); border: 1px solid var(--border); cursor: text; transition: border-color .3s, box-shadow .3s; }
.pds-copy .pds-copy__field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.pds-copy .pds-copy__row.is-done .pds-copy__field { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.pds-copy .pds-copy__row.is-manual .pds-copy__field { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
.pds-copy .pds-copy__field svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.pds-copy .pds-copy__swatch { flex: none; width: 1rem; height: 1rem; border-radius: 5px; background: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent); }
.pds-copy .pds-copy__text { flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ink);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .8rem; font-variant-ligatures: none; text-overflow: ellipsis; }
.pds-copy .pds-copy__text::selection { color: var(--ink); background: color-mix(in srgb, var(--gold) 38%, transparent); }
.pds-copy .pds-copy__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the copy buttons */
.pds-copy .pds-copy__btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 6.2rem; height: 2.9rem;
  margin: 0; padding: 0 .9rem; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
  color: var(--bg); background: var(--primary); -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent), 0 10px 20px -12px color-mix(in srgb, var(--primary) 85%, transparent);
  transition: background-color .35s var(--pds-copy-ease), color .35s, box-shadow .35s, transform .2s var(--pds-copy-ease); }
.pds-copy .pds-copy__btn:hover { background-color: color-mix(in srgb, var(--primary) 86%, var(--ink)); }
.pds-copy .pds-copy__btn:active { transform: scale(.96); }
.pds-copy .pds-copy__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-copy .pds-copy__btn.is-done { color: var(--accent-deep); background-color: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.pds-copy .pds-copy__btn.is-manual { color: var(--ink); background-color: color-mix(in srgb, var(--gold) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.pds-copy .pds-copy__label { display: inline-block; }
.pds-copy .pds-copy__btn:is(.is-done, .is-manual) .pds-copy__label { animation: pds-copy-pop .45s var(--pds-copy-ease); }
/* icon-only variant: copy icon turns into a drawn tick, with a small tip above */
.pds-copy .pds-copy__btn--icon { min-width: 0; width: 2.9rem; padding: 0; }
.pds-copy .pds-copy__icons { position: relative; width: 1.15rem; height: 1.15rem; }
.pds-copy .pds-copy__icons svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; transition: opacity .25s, transform .45s var(--pds-copy-ease); }
.pds-copy .pds-copy__done { opacity: 0; transform: scale(.5); }
.pds-copy .pds-copy__done path { stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s var(--pds-copy-ease) .1s; }
.pds-copy .pds-copy__btn.is-done .pds-copy__ic { opacity: 0; transform: scale(.5) rotate(-25deg); }
.pds-copy .pds-copy__btn.is-done .pds-copy__done { opacity: 1; transform: none; }
.pds-copy .pds-copy__btn.is-done .pds-copy__done path { stroke-dashoffset: 0; }
.pds-copy .pds-copy__tip { position: absolute; right: 0; bottom: calc(100% + .55rem); z-index: 3; padding: .35rem .6rem; border-radius: 8px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; color: var(--bg); background: var(--ink); pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .25s, transform .35s var(--pds-copy-ease); }
.pds-copy .pds-copy__tip::after { content: ""; position: absolute; top: 100%; right: calc(1.45rem - 5px); border: 5px solid transparent; border-top-color: var(--ink); }
:is(.pds-copy .pds-copy__btn--icon:hover, .pds-copy .pds-copy__btn--icon:focus-visible, .pds-copy .pds-copy__btn--icon.is-done,
  .pds-copy .pds-copy__btn--icon.is-manual, .is-playing .pds-copy .pds-copy__btn--icon) .pds-copy__tip { opacity: 1; transform: none; }
.pds-copy .pds-copy__note { min-height: 2.6em; margin: .35rem 0 0; font-size: .78rem; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere; }
@keyframes pds-copy-pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pds-copy *, .pds-copy *::before, .pds-copy *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-35 Share Pop ---------- */
.pds-share, .pds-share * { box-sizing: border-box; }
.pds-share { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  width: min(100%, 330px); min-height: 384px; margin: 0 auto; color: var(--ink); text-align: start; }
.pds-share :where(p) { margin: 0; }
.pds-share :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.pds-share :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-share svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pds-share .pds-share__card { position: relative; overflow: hidden; border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 50px -32px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-share .pds-share__cover { position: relative; height: 164px; overflow: hidden;
  background: radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 62%),
    linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-share .pds-share__ring { position: absolute; right: -60px; bottom: -120px; width: 200px; height: 200px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--surface) 45%, transparent); }
.pds-share .pds-share__ring--b { right: auto; bottom: auto; left: 34px; top: -44px; width: 96px; height: 96px; border-color: color-mix(in srgb, var(--surface) 30%, transparent); }
.pds-share .pds-share__tag { position: absolute; left: 14px; bottom: 12px; padding: .3rem .6rem; border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pds-share .pds-share__body { padding: .9rem 1rem 1rem; }
.pds-share .pds-share__url { font-family: var(--font-mono, ui-monospace, monospace); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep); }
.pds-share .pds-share__title { margin: .3rem 0 .35rem; font-family: var(--font-display, Georgia, serif); font-size: 1.14rem; line-height: 1.25; }
.pds-share .pds-share__meta { font-size: .74rem; color: var(--ink-faint); }
.pds-share .pds-share__btn { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem .5rem .7rem; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ink) 60%, transparent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, background-color .25s, color .25s; }
.pds-share .pds-share__btn svg { color: var(--primary); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.pds-share .pds-share__btn:is(:hover, :focus-visible), .is-playing .pds-share .pds-share__btn { transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-share .pds-share__btn:is(:hover, :focus-visible) svg, .is-playing .pds-share .pds-share__btn svg { transform: translateY(-2px); }
.pds-share .pds-share__btn[aria-expanded="true"] { color: var(--bg); background: var(--ink); }
.pds-share .pds-share__btn[aria-expanded="true"] svg { color: inherit; }
.pds-share .pds-share__pop { position: absolute; top: 58px; right: 10px; z-index: 3; width: min(calc(100% - 20px), 252px); padding: .4rem;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--ink) 60%, transparent), 0 2px 8px -2px color-mix(in srgb, var(--ink) 14%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.94); transform-origin: calc(100% - 44px) 0;
  transition: opacity .2s, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s .4s; }
.pds-share.is-open .pds-share__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pds-share .pds-share__preview { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; padding: .5rem; border-radius: 12px; background: var(--surface-sunk); }
.pds-share .pds-share__thumb { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  font-family: var(--font-display, Georgia, serif); font-size: .8rem; font-weight: 600; color: var(--bg);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-share .pds-share__ptext { display: grid; min-width: 0; line-height: 1.3; }
.pds-share .pds-share__ptext small { font-family: var(--font-mono, ui-monospace, monospace); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pds-share .pds-share__ptext b { overflow: hidden; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.pds-share .pds-share__ptext span { font-family: var(--font-mono, ui-monospace, monospace); font-size: .62rem; color: var(--primary-deep); }
.pds-share .pds-share__menu { display: grid; gap: 1px; }
.pds-share .pds-share__item { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .36rem .45rem; border-radius: 10px;
  font-size: .84rem; font-weight: 600; text-align: left; color: var(--ink); opacity: 0; transform: translateY(-4px);
  transition: background-color .2s, opacity .3s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.pds-share .pds-share__item:focus-visible { outline-offset: 1px; }
.pds-share.is-open .pds-share__item { opacity: 1; transform: none; }
.pds-share.is-open .pds-share__item:nth-child(2) { transition-delay: 0s, .03s, .03s; }
.pds-share.is-open .pds-share__item:nth-child(3) { transition-delay: 0s, .06s, .06s; }
.pds-share.is-open .pds-share__item:nth-child(4) { transition-delay: 0s, .09s, .09s; }
.pds-share.is-open .pds-share__item:nth-child(5) { transition-delay: 0s, .12s, .12s; }
.pds-share .pds-share__ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--primary); background: var(--primary-tint);
  transition: color .25s, background-color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pds-share .pds-share__item small { margin-left: auto; padding: .12rem .35rem; border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pds-share .pds-share__item:is(:hover, :focus-visible) { background: var(--surface-sunk); }
.pds-share .pds-share__item:is(:hover, :focus-visible) .pds-share__ico { color: var(--bg); background: var(--primary); transform: rotate(-6deg) scale(1.06); }
.pds-share .pds-share__foot { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; padding: .5rem .45rem .2rem; border-top: 1px solid var(--border);
  font-size: .66rem; line-height: 1.35; color: var(--ink-muted); }
.pds-share .pds-share__foot svg { width: .9rem; height: .9rem; color: var(--primary); }
.pds-share .pds-share__status { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.7rem; padding: .55rem 1rem;
  border-radius: 999px; border: 1px dashed var(--border-strong); font-size: .8rem; font-weight: 600; text-align: center; color: var(--ink-muted);
  transition: background-color .3s, border-color .3s, color .3s; }
.pds-share .pds-share__status.is-done { border-style: solid; border-color: color-mix(in srgb, var(--accent-deep) 45%, transparent); color: var(--ink);
  background: color-mix(in srgb, var(--accent-deep) 12%, var(--surface)); animation: pds-share-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.pds-share .pds-share__status.is-done::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  font-size: .7rem; font-weight: 800; color: var(--bg); background: var(--accent-deep); }
@keyframes pds-share-pop { from { transform: scale(.92); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .pds-share *, .pds-share *::before { transition: none !important; animation: none !important; }
}

/* ---------- PDS-36 Send Tick ---------- */
.pds-sendtick, .pds-sendtick * { box-sizing: border-box; }
.pds-sendtick { display: grid; gap: .85rem; width: min(100%, 320px); margin: 0 auto; padding: 1.1rem; border-radius: 24px; color: var(--ink); text-align: start;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 26px 54px -34px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-sendtick :where(p) { margin: 0; }
.pds-sendtick svg { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pds-sendtick .pds-sendtick__head { display: flex; align-items: center; gap: .65rem; }
.pds-sendtick .pds-sendtick__avatar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: .68rem; font-weight: 700;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-sendtick .pds-sendtick__who { display: grid; line-height: 1.3; }
.pds-sendtick .pds-sendtick__who b { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; }
.pds-sendtick .pds-sendtick__who small { font-size: .72rem; color: var(--ink-faint); }
.pds-sendtick .pds-sendtick__msg { padding: .75rem .85rem; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-sendtick .pds-sendtick__msg small { display: block; margin-bottom: .3rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pds-sendtick .pds-sendtick__msg p { font-size: .84rem; line-height: 1.5; color: var(--ink-muted); }
.pds-sendtick .pds-sendtick__btn { position: relative; justify-self: center; width: 100%; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 999px;
  overflow: hidden; isolation: isolate; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 700; color: var(--bg);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--primary) 80%, transparent);
  transition: width .55s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.pds-sendtick .pds-sendtick__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--accent-deep); transition: opacity .35s; }
.pds-sendtick .pds-sendtick__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; z-index: -1; width: 30%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 35%, transparent), transparent); opacity: 0; }
.pds-sendtick .pds-sendtick__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-sendtick .pds-sendtick__btn:is(:hover, :focus-visible), .is-playing .pds-sendtick .pds-sendtick__btn { transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px color-mix(in srgb, var(--primary) 90%, transparent); }
.pds-sendtick[data-state="idle"] .pds-sendtick__btn:is(:hover, :focus-visible)::after, .is-playing .pds-sendtick[data-state="idle"] .pds-sendtick__btn::after {
  opacity: 1; animation: pds-sendtick-sheen 1.1s cubic-bezier(.22, 1, .36, 1); }
.pds-sendtick .pds-sendtick__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  opacity: 0; transform: translateY(60%); transition: opacity .25s, transform .45s cubic-bezier(.22, 1, .36, 1); }
.pds-sendtick[data-state="idle"] .pds-sendtick__face--idle,
.pds-sendtick[data-state="done"] .pds-sendtick__face--done,
.pds-sendtick[data-state="fail"] .pds-sendtick__face--fail { opacity: 1; transform: none; transition-delay: .15s; }
.pds-sendtick .pds-sendtick__plane { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.pds-sendtick .pds-sendtick__btn:is(:hover, :focus-visible) .pds-sendtick__plane, .is-playing .pds-sendtick .pds-sendtick__plane { transform: translate(3px, -3px) rotate(-6deg); }
.pds-sendtick .pds-sendtick__spin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--bg) 35%, transparent); border-top-color: var(--bg); opacity: 0; scale: .4;
  transition: opacity .2s, scale .35s cubic-bezier(.22, 1, .36, 1); }
.pds-sendtick[data-state="busy"] .pds-sendtick__btn { width: 52px; cursor: progress; }
.pds-sendtick[data-state="busy"] .pds-sendtick__spin { opacity: 1; scale: 1; transition-delay: .2s; animation: pds-sendtick-spin .75s linear infinite; }
.pds-sendtick[data-state="done"] .pds-sendtick__btn { cursor: default; box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent-deep) 80%, transparent); }
.pds-sendtick[data-state="done"] .pds-sendtick__btn::before { opacity: 1; }
.pds-sendtick .pds-sendtick__tick { stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s ease .35s; }
.pds-sendtick[data-state="done"] .pds-sendtick__tick { stroke-dashoffset: 0; }
.pds-sendtick[data-state="fail"] .pds-sendtick__btn { box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--ink) 70%, transparent);
  animation: pds-sendtick-shake .5s cubic-bezier(.36, .07, .19, .97); }
.pds-sendtick[data-state="fail"] .pds-sendtick__btn::before { opacity: 1; background: var(--ink); }
.pds-sendtick .pds-sendtick__note { min-height: 2.5em; font-size: .78rem; line-height: 1.4; text-align: center; color: var(--ink-muted); }
.pds-sendtick[data-state="done"] .pds-sendtick__note, .pds-sendtick[data-state="fail"] .pds-sendtick__note { color: var(--ink); }
.pds-sendtick[data-state="done"] .pds-sendtick__note::before, .pds-sendtick[data-state="fail"] .pds-sendtick__note::before {
  content: "✓"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: .4rem; border-radius: 50%; vertical-align: -.15em;
  font-size: .64rem; font-weight: 800; color: var(--bg); background: var(--accent-deep); }
.pds-sendtick[data-state="fail"] .pds-sendtick__note::before { content: "!"; background: var(--gold); }
.pds-sendtick .pds-sendtick__fail { position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .76rem; color: var(--ink-muted); cursor: pointer; }
.pds-sendtick .pds-sendtick__chk { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pds-sendtick .pds-sendtick__sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1.5px var(--border-strong); transition: background-color .25s, box-shadow .25s; }
.pds-sendtick .pds-sendtick__sw::before { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-muted);
  transition: translate .3s cubic-bezier(.22, 1, .36, 1), background-color .25s; }
.pds-sendtick .pds-sendtick__chk:checked + .pds-sendtick__sw { background: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pds-sendtick .pds-sendtick__chk:checked + .pds-sendtick__sw::before { translate: 14px 0; background: var(--bg); }
.pds-sendtick .pds-sendtick__chk:focus-visible + .pds-sendtick__sw { outline: 2px solid var(--primary); outline-offset: 3px; }
@keyframes pds-sendtick-spin { to { rotate: 360deg; } }
@keyframes pds-sendtick-sheen { from { left: -40%; } to { left: 120%; } }
@keyframes pds-sendtick-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
@media (prefers-reduced-motion: reduce) {
  .pds-sendtick *, .pds-sendtick *::before, .pds-sendtick *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-37 Thumb Plus ---------- */
.pds-fab, .pds-fab * { box-sizing: border-box; }
.pds-fab { position: relative; width: min(100%, 240px); height: 430px; margin: 0 auto; padding: 8px; border-radius: 40px; text-align: start;
  background: var(--ink); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 70%, transparent); }
.pds-fab :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.pds-fab :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.pds-fab :where(button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-fab svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.pds-fab .pds-fab__screen { position: relative; height: 100%; overflow: hidden; border-radius: 32px; color: var(--ink); background: var(--bg); }
.pds-fab .pds-fab__screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 34px; pointer-events: none;
  background: linear-gradient(var(--bg) 55%, transparent); }
.pds-fab .pds-fab__island { position: absolute; top: 9px; left: 50%; z-index: 4; width: 62px; height: 18px; border-radius: 20px; background: var(--ink); translate: -50% 0; }
.pds-fab .pds-fab__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 2.2rem .85rem 5.6rem; }
.pds-fab .pds-fab__scroll::-webkit-scrollbar { display: none; }
.pds-fab .pds-fab__scroll:focus-visible { outline-offset: -3px; border-radius: 32px; }
.pds-fab .pds-fab__top { display: flex; align-items: center; justify-content: space-between; }
.pds-fab .pds-fab__logo { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; }
.pds-fab .pds-fab__logo b { padding: .05rem .32rem; border-radius: 6px; font-size: .8em; color: var(--bg); background: var(--primary); }
.pds-fab .pds-fab__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: .6rem; font-weight: 700;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-fab .pds-fab__h { margin-top: .9rem; font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; line-height: 1.2; }
.pds-fab .pds-fab__hint { margin: .15rem 0 .75rem; font-size: .68rem; color: var(--ink-faint); }
.pds-fab .pds-fab__list { display: grid; gap: .5rem; }
.pds-fab .pds-fab__list li { display: flex; align-items: center; gap: .6rem; padding: .55rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.pds-fab .pds-fab__list i { flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-tint), color-mix(in srgb, var(--accent) 45%, var(--surface))); }
.pds-fab .pds-fab__list li:nth-child(3n+2) i { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 50%, var(--surface)), var(--primary-tint)); }
.pds-fab .pds-fab__list li:nth-child(3n) i { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--accent) 70%, var(--primary))); }
.pds-fab .pds-fab__list span { display: grid; min-width: 0; line-height: 1.3; }
.pds-fab .pds-fab__list b { overflow: hidden; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.pds-fab .pds-fab__list small { font-size: .64rem; color: var(--ink-faint); }
.pds-fab .pds-fab__dim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: opacity .35s; }
.pds-fab.is-open .pds-fab__dim { opacity: 1; pointer-events: auto; }
.pds-fab .pds-fab__main { position: absolute; right: 14px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--primary) 75%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s, box-shadow .3s; }
.pds-fab .pds-fab__main svg { width: 24px; height: 24px; stroke-width: 2.4; transition: rotate .45s cubic-bezier(.34, 1.56, .64, 1); }
.pds-fab .pds-fab__main::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; pointer-events: none; }
.pds-fab .pds-fab__main:is(:hover, :focus-visible), .is-playing .pds-fab .pds-fab__main { transform: translateY(-2px) scale(1.05); }
.pds-fab .pds-fab__main:hover::after, .is-playing .pds-fab .pds-fab__main::after { animation: pds-fab-ping 1.3s cubic-bezier(.22, 1, .36, 1) infinite; }
.pds-fab.is-open .pds-fab__main svg { rotate: 135deg; }
.pds-fab.is-open .pds-fab__main::after { animation: none; }
.pds-fab.is-tucked:not(.is-open) .pds-fab__main:not(:focus-visible) { transform: translateY(90px) scale(.6); opacity: 0; pointer-events: none; }
.pds-fab .pds-fab__acts { position: absolute; right: 14px; bottom: 82px; z-index: 3; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .55rem;
  visibility: hidden; transition: visibility 0s .35s; }
.pds-fab.is-open .pds-fab__acts { visibility: visible; transition-delay: 0s; }
.pds-fab .pds-fab__acts li { opacity: 0; transform: translateY(14px) scale(.6); transform-origin: calc(100% - 21px) 50%; transition: opacity .2s, transform .25s ease; }
.pds-fab.is-open .pds-fab__acts li { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.pds-fab.is-open .pds-fab__acts li:nth-child(2) { transition-delay: .05s; }
.pds-fab.is-open .pds-fab__acts li:nth-child(3) { transition-delay: .1s; }
.pds-fab.is-open .pds-fab__acts li:nth-child(4) { transition-delay: .15s; }
.pds-fab .pds-fab__act { display: flex; align-items: center; gap: .5rem; border-radius: 999px; }
.pds-fab .pds-fab__lbl { padding: .38rem .68rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--ink) 60%, transparent);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.pds-fab .pds-fab__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--primary); background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--ink) 55%, transparent);
  transition: color .25s, background-color .25s, border-color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pds-fab .pds-fab__ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.pds-fab .pds-fab__act:is(:hover, :focus-visible) .pds-fab__ico { color: var(--bg); background: var(--primary); border-color: var(--primary); transform: scale(1.06); }
.pds-fab .pds-fab__act:is(:hover, :focus-visible) .pds-fab__lbl { transform: translateX(-3px); }
.pds-fab .pds-fab__snack { position: absolute; left: 12px; right: 80px; bottom: 22px; z-index: 3; padding: .5rem .7rem; border-radius: 12px;
  font-size: .68rem; font-weight: 600; line-height: 1.3; color: var(--bg); background: var(--ink);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1); }
.pds-fab .pds-fab__snack.is-shown { opacity: 1; transform: none; }
@keyframes pds-fab-ping { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.6; } }
@media (prefers-reduced-motion: reduce) {
  .pds-fab *, .pds-fab *::before, .pds-fab *::after { transition: none !important; animation: none !important; }
}

/* ---------- PDS-38 Progress Fill ---------- */
.pds-dlbar, .pds-dlbar * { box-sizing: border-box; }
.pds-dlbar { --pds-dlbar-p: 0; display: grid; gap: .9rem; width: min(100%, 340px); margin: 0 auto; padding: 1.1rem; border-radius: 24px; color: var(--ink); text-align: start;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 26px 54px -34px color-mix(in srgb, var(--ink) 55%, transparent); }
.pds-dlbar :where(p) { margin: 0; }
.pds-dlbar :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.pds-dlbar :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-dlbar svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pds-dlbar .pds-dlbar__file { display: flex; align-items: center; gap: .85rem; }
.pds-dlbar .pds-dlbar__doc { position: relative; flex: none; width: 46px; height: 58px; overflow: hidden; border-radius: 8px; background: var(--surface-sunk);
  border: 1px solid var(--border-strong); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--ink) 50%, transparent); }
.pds-dlbar .pds-dlbar__doc::before { content: ""; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-bottom-left-radius: 4px;
  background: linear-gradient(to bottom left, var(--surface) 50%, var(--border-strong) 50%); }
.pds-dlbar .pds-dlbar__doc::after { content: ""; position: absolute; left: 8px; right: 12px; top: 16px; height: 16px;
  background: repeating-linear-gradient(var(--border-strong) 0 2px, transparent 2px 6px); }
.pds-dlbar .pds-dlbar__doc b { position: absolute; left: 6px; bottom: 6px; padding: .1rem .28rem; border-radius: 4px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .52rem; letter-spacing: .06em; color: var(--bg); background: var(--primary); }
.pds-dlbar .pds-dlbar__info { display: grid; gap: .1rem; min-width: 0; line-height: 1.3; }
.pds-dlbar .pds-dlbar__info > b { font-family: var(--font-display, Georgia, serif); font-size: 1.06rem; font-weight: 600; }
.pds-dlbar .pds-dlbar__info > small { font-size: .74rem; color: var(--ink-muted); }
.pds-dlbar .pds-dlbar__chips { display: flex; gap: .3rem; margin-top: .2rem; }
.pds-dlbar .pds-dlbar__chips span { padding: .12rem .4rem; border-radius: 6px; font-family: var(--font-mono, ui-monospace, monospace); font-size: .6rem;
  letter-spacing: .06em; color: var(--primary-deep); background: var(--primary-tint); }
.pds-dlbar .pds-dlbar__btn { position: relative; isolation: isolate; display: grid; align-items: center; width: 100%; min-height: 66px; padding: .7rem 1rem;
  overflow: hidden; border-radius: 16px; text-align: left; color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--primary) 85%, transparent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, color .3s; }
.pds-dlbar .pds-dlbar__btn::before, .pds-dlbar .pds-dlbar__btn::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; opacity: 0; transition: opacity .35s; }
.pds-dlbar .pds-dlbar__btn::before { background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--border-strong); }
.pds-dlbar .pds-dlbar__btn::after { z-index: -1; background: var(--accent-deep); }
.pds-dlbar[data-state="idle"] .pds-dlbar__btn:is(:hover, :focus-visible), .is-playing .pds-dlbar[data-state="idle"] .pds-dlbar__btn {
  transform: translateY(-2px); box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--primary) 90%, transparent); }
.pds-dlbar .pds-dlbar__fill { position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: calc(var(--pds-dlbar-p) * 100%); opacity: 0;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--primary) 34%, transparent) 0 10px, color-mix(in srgb, var(--primary) 22%, transparent) 10px 20px);
  background-size: 28.28px 28.28px; box-shadow: inset -2px 0 0 var(--primary), inset 0 -3px 0 var(--primary);
  transition: opacity .3s; animation: pds-dlbar-stripes .9s linear infinite paused; }
.pds-dlbar .pds-dlbar__face { grid-area: 1 / 1; display: flex; align-items: center; gap: .75rem; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s .4s; }
.pds-dlbar .pds-dlbar__face--busy { justify-content: space-between; }
.pds-dlbar[data-state="idle"] .pds-dlbar__face--idle, .pds-dlbar[data-state="busy"] .pds-dlbar__face--busy, .pds-dlbar[data-state="done"] .pds-dlbar__face--done {
  opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
.pds-dlbar .pds-dlbar__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--bg) 20%, transparent); }
.pds-dlbar .pds-dlbar__ic svg { width: 18px; height: 18px; stroke-width: 2.2; }
.pds-dlbar[data-state="idle"] .pds-dlbar__btn:is(:hover, :focus-visible) .pds-dlbar__ic svg, .is-playing .pds-dlbar[data-state="idle"] .pds-dlbar__ic svg {
  animation: pds-dlbar-bob .9s ease-in-out infinite; }
.pds-dlbar .pds-dlbar__txt { display: grid; gap: .1rem; min-width: 0; line-height: 1.25; }
.pds-dlbar .pds-dlbar__txt b { display: flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 700; }
.pds-dlbar .pds-dlbar__txt small { font-family: var(--font-mono, ui-monospace, monospace); font-size: .66rem; opacity: .85; font-variant-numeric: tabular-nums; }
.pds-dlbar .pds-dlbar__pct { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.35rem; font-weight: 600; color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.pds-dlbar .pds-dlbar__tick { width: 18px; height: 18px; stroke-width: 2.8; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .45s ease .3s; }
.pds-dlbar[data-state="busy"] .pds-dlbar__btn { color: var(--ink); cursor: progress; box-shadow: none; }
.pds-dlbar[data-state="busy"] .pds-dlbar__btn::before { opacity: 1; }
.pds-dlbar[data-state="busy"] .pds-dlbar__fill { opacity: 1; animation-play-state: running; }
.pds-dlbar[data-state="done"] .pds-dlbar__btn { cursor: default; box-shadow: 0 16px 30px -18px color-mix(in srgb, var(--accent-deep) 85%, transparent); }
.pds-dlbar[data-state="done"] .pds-dlbar__btn::after { opacity: 1; }
.pds-dlbar[data-state="done"] .pds-dlbar__tick { stroke-dashoffset: 0; }
.pds-dlbar .pds-dlbar__after { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.3rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s .45s; }
.pds-dlbar[data-state="done"] .pds-dlbar__after { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.pds-dlbar .pds-dlbar__open { display: inline-flex; align-items: center; gap: .35rem; padding: .48rem .85rem; white-space: nowrap; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--primary-deep); background: var(--primary-tint); transition: color .25s, background-color .25s; }
.pds-dlbar .pds-dlbar__open svg { width: 14px; height: 14px; stroke-width: 2.4; transition: translate .3s cubic-bezier(.22, 1, .36, 1); }
.pds-dlbar .pds-dlbar__open:is(:hover, :focus-visible) { color: var(--bg); background: var(--primary); }
.pds-dlbar .pds-dlbar__open:is(:hover, :focus-visible) svg { translate: 2px -2px; }
.pds-dlbar .pds-dlbar__reset { padding: .45rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink-muted);
  text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: color .25s; }
.pds-dlbar .pds-dlbar__reset:is(:hover, :focus-visible) { color: var(--ink); }
.pds-dlbar .pds-dlbar__note { font-size: .74rem; line-height: 1.4; text-align: center; color: var(--ink-muted); }
@keyframes pds-dlbar-stripes { to { background-position: 28.28px 0; } }
@keyframes pds-dlbar-bob { 50% { translate: 0 3px; } }
@media (prefers-reduced-motion: reduce) {
  .pds-dlbar *, .pds-dlbar *::before, .pds-dlbar *::after { transition: none !important; animation: none !important; }
}