/* Line up the pipe (2.71.0; fragments/signup_bot.html, static/join.js): big, for old eyes and thick fingers. */
.pp { margin: 6px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp .pp-open { font-size: 16px; padding: 10px 14px; width: 100%; }
.pp-done { font-size: 16px; font-weight: 700; color: var(--up, #3fb950); }
.pp-dlg { border: 0; padding: 0; background: transparent; width: min(760px, 96vw); max-width: 96vw; }
.pp-dlg::backdrop { background: rgba(0, 0, 0, .7); }
.pp-card { position: relative; background: var(--bg-panel, #1e1e1e); color: var(--text-main, #ececec); border: 1px solid var(--border-hairline, rgba(127, 127, 127, .3));
  border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.pp-head { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.pp-how { margin: 0 0 12px; font-size: 17px; line-height: 1.45; color: var(--text-muted, #a6a6a6); }
.pp-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-hairline, rgba(127, 127, 127, .3));
  background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.pp-pic { position: relative; width: 100%; aspect-ratio: 640 / 220; border-radius: 10px; overflow: hidden; background: #6b4d33; user-select: none; touch-action: none; }
.pp-pic img { display: block; pointer-events: none; -webkit-user-drag: none; }
.pp-bg { width: 100%; height: 100%; }
.pp-piece { position: absolute; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.pp-slide { -webkit-appearance: none; appearance: none; width: 100%; height: 52px; margin: 14px 0 6px; background: transparent; cursor: grab; }
.pp-slide:focus-visible { outline: 3px solid var(--accent, #5b9be0); outline-offset: 2px; border-radius: 26px; }
.pp-slide::-webkit-slider-runnable-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--text-muted, #a6a6a6) 45%, transparent); }
.pp-slide::-moz-range-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--text-muted, #a6a6a6) 45%, transparent); }
.pp-slide::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 52px; margin-top: -19px; border-radius: 50%;
  background: var(--accent, #5b9be0); border: 3px solid var(--text-main, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.pp-slide::-moz-range-thumb { width: 46px; height: 46px; border-radius: 50%; background: var(--accent, #5b9be0); border: 3px solid var(--text-main, #fff); }
.pp-slide:disabled { opacity: .5; cursor: default; }
.pp-msg { min-height: 1.4em; margin: 0; font-size: 18px; }