.platform-subpages { --ps-line: #fff0c538; --ps-background: #211e17fa; --ps-ink: #fff5df; --ps-soft: #c8baa1; --ps-accent: #ffe58a; --ps-hover: #ffe58a0d; }
.platform-subpages[hidden] { display: none; }
.platform-subpages {
  position: fixed;
  inset: auto 12px calc(76px + env(safe-area-inset-bottom));
  z-index: 35;
  width: min(420px, calc(100vw - 24px));
  max-height: min(60dvh, calc(100dvh - 120px));
  margin-inline: auto;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ps-line);
  border-radius: 16px;
  background: var(--ps-background);
  color: var(--ps-ink);
  box-shadow: 0 12px 48px #0008;
  font-family: inherit;
}
.platform-subpages header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 8px 10px; }
.platform-subpages h2 { margin: 0; font-weight: 600; font-family: inherit; font-size: 1rem; line-height: 1.4; letter-spacing: normal; }
.platform-subpages button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ps-soft); font-size: 1.75rem; cursor: pointer; }
.platform-subpages p { margin: 0 10px 12px; color: var(--ps-soft); font-size: .875rem; line-height: 1.5; }
.platform-subpages ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.platform-subpages a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--ps-ink); text-decoration: none; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.platform-subpages a:hover, .platform-subpages button:hover { background: var(--ps-hover); color: var(--ps-accent); }
.platform-subpages :is(a,button):focus-visible { outline: 2px solid var(--ps-accent); outline-offset: -2px; background: var(--ps-hover); }
:is(.ud-mobile-nav,.mobile-primary-nav,.platform-mobile-nav) > a { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }

/* A floating bubble stays above the thumb; every layer lets taps pass through. */
.platform-hold-progress {
  position: fixed;
  z-index: 38;
  width: 132px;
  height: 176px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}
.platform-hold-progress *, .platform-hold-progress *::before { pointer-events: none; }
.platform-balloon-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 18px #a1e8ff30); }
.platform-balloon-inflate { transform-origin: 60px 64px; animation: platform-balloon-inflate var(--platform-hold-duration, 450ms) cubic-bezier(.16,.6,.35,1) both; }
.platform-balloon-wobble { transform-origin: 60px 64px; animation: platform-balloon-pressure var(--platform-hold-duration, 450ms) linear both; }
.platform-balloon-confetti { position: absolute; left: 50%; top: 40%; width: 7px; height: 11px; border-radius: 2px; opacity: 0; }
.platform-balloon-confetti:nth-of-type(2n) { width: 7px; height: 7px; border-radius: 50%; }
.platform-balloon-confetti:nth-of-type(3n) { width: 5px; height: 14px; }
.platform-balloon-halo { position: absolute; left: 50%; top: 40%; width: 96px; height: 96px; overflow: visible; opacity: 0; transform: translate(-50%, -50%); }
.platform-hold-complete .platform-balloon-inflate { animation: platform-balloon-pop 140ms ease-out both; }
.platform-hold-complete .platform-balloon-wobble { animation: none; }
.platform-hold-complete .platform-balloon-confetti { animation: platform-balloon-confetti 720ms cubic-bezier(.15,.7,.3,1) var(--confetti-delay) both; }
.platform-hold-complete .platform-balloon-halo { animation: platform-balloon-halo 420ms ease-out both; }
@keyframes platform-balloon-inflate {
  0% { transform: translateY(10px) scale(.3); opacity: 0; }
  18% { opacity: 1; }
  65% { transform: translateY(-5px) scale(.83,.93); }
  85% { transform: translateY(-2px) scale(1.05,.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes platform-balloon-pressure {
  0%, 45% { transform: rotate(-5deg); }
  65% { transform: rotate(4deg); }
  78% { transform: rotate(-5deg) scaleX(1.02); }
  86% { transform: rotate(5deg) scaleY(1.02); }
  93% { transform: rotate(-4deg) scaleX(1.04); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes platform-balloon-pop { from { transform: scale(1); opacity: 1; } to { transform: scale(1.24,1.14); opacity: 0; } }
@keyframes platform-balloon-halo {
  from { opacity: .7; transform: translate(-50%,-50%) scale(.5); }
  to { opacity: 0; transform: translate(-50%,-50%) scale(2.1); }
}
@keyframes platform-balloon-confetti {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(0deg); }
  10% { opacity: 1; }
  32%, 62% { opacity: 1; transform: translate(var(--confetti-x),var(--confetti-y)) scale(1) rotate(var(--confetti-turn)); }
  100% { opacity: 0; transform: translate(var(--confetti-x),calc(var(--confetti-y) + 58px)) scale(.65) rotate(calc(var(--confetti-turn) + 90deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .platform-balloon-inflate, .platform-balloon-wobble { animation: none; }
  .platform-balloon-inflate { transform: scale(.8); }
  .platform-hold-complete .platform-balloon-inflate { animation: none; transform: scale(1); }
  .platform-hold-complete .platform-balloon-confetti, .platform-hold-complete .platform-balloon-halo { animation: none; display: none; }
}