/* Player chrome. Picks up the page's own tokens so it belongs to each page. */
.pp {
  --pp-ink: var(--sc-ink, #f6f1e8);
  --pp-bg: var(--sc-canvas, #12100e);
  --pp-accent: var(--sc-accent, #ff7a45);
  --pp-accent-ink: var(--sc-accent-ink, #14100c);
  position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483000; display: flex; justify-content: center; padding: 0 16px;
  pointer-events: none; font-family: var(--sc-font-text, system-ui, sans-serif);
}
.pp button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.pp svg { width: 100%; height: 100%; display: block; }
.pp-invite {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 8px 22px 8px 8px; border-radius: 999px;
  background: var(--pp-bg) !important; color: var(--pp-ink) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 0 0 1px color-mix(in srgb, var(--pp-ink) 18%, transparent);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pp-invite[hidden] { display: none; }
.pp-invite:hover { transform: translateY(-2px); }
.pp-invite:focus-visible, .pp-btn:focus-visible, .pp-track:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }
.pp-disc {
  position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; padding: 12px 11px 12px 13px;
  background: var(--pp-accent); color: var(--pp-accent-ink);
}
.pp-disc::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pp-accent);
  animation: pp-ring 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes pp-ring { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
.pp-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.pp-words b { font-weight: 600; font-size: 15px; }
.pp-words small { font-size: 12.5px; opacity: .72; }
.pp-bar {
  pointer-events: auto; width: min(760px, 100%); padding: 14px 14px 10px; border-radius: 18px;
  background: color-mix(in srgb, var(--pp-bg) 92%, transparent); color: var(--pp-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4), 0 0 0 1px color-mix(in srgb, var(--pp-ink) 14%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pp-bar[hidden] { display: none; }
.pp-caption { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.4; min-height: 2.8em; padding: 0 4px 10px; text-wrap: pretty; }
.pp-row { display: flex; align-items: center; gap: 8px; }
.pp-btn { width: 40px; height: 40px; flex: none; padding: 10px; border-radius: 50%; }
.pp-btn:hover { background: color-mix(in srgb, var(--pp-ink) 12%, transparent); }
.pp-music[aria-pressed="false"] { opacity: .4; }
.pp-toggle { background: var(--pp-accent) !important; color: var(--pp-accent-ink) !important; }
.pp-track { flex: 1; display: flex; gap: 3px; align-items: center; height: 40px; min-width: 0; }
.pp-seg { display: block; height: 40px; position: relative; cursor: pointer; min-width: 6px; }
.pp-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--pp-ink) 22%, transparent); }
.pp-seg i { position: absolute; left: 0; right: 0; top: 18px; height: 4px; border-radius: 2px; background: var(--pp-accent); transform: scaleX(0); transform-origin: left; }
.pp-time { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .75; width: 34px; text-align: right; }
.pp[data-state="yielded"] .pp-caption { opacity: .6; }
@media (max-width: 560px) {
  .pp-bar { padding: 12px 10px 8px; }
  .pp-caption { font-size: 15px; min-height: 4.2em; }
  .pp-time { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-disc::after { animation: none; opacity: 0; } .pp-invite { transition: none; } }

/* Reading: the invitation steps aside. */
.pp--small { justify-content: flex-end; }
.pp--small .pp-invite { padding: 6px; min-height: 0; }
.pp--small .pp-words { display: none; }