/* PROJECT X — the locked-in core design (2026-08-20).
   Video console with the funding bar welded to its bottom edge, THE CREDITS
   panel beside it, mission control sticky above the fold, LOOT-only copy.
   Navy LOOR brand palette. Every selector scoped under .px-root (the <body>
   class of the ProjectX root layout) so nothing leaks to other pages.
   Rebuilt from four design generations: only live rules kept.
*/
:root {
  --bg:           #14142a;
  --surface:      #1c1b33;
  --surface-2:    #23223d;
  --border:       #42405c;
  --border-soft:  #2c2b47;
  /* HARD RULE (2026-08-27): no grey type anywhere on PROJECT X. The three
     historical grey tiers resolve to the bright text color, so any rule —
     present or future — that reaches for a dim token gets white. The only
     non-white type allowed: gold, green, the countdown's alarm red, and
     dark ink on bright (gold/green) surfaces. */
  --text-bright:  #f2ede4;
  --text-mid:     #f2ede4;
  --text-dim:     #f2ede4;
  --text-faint:   #f2ede4;
  --gold:         #f5c518;
  --gold-bright:  #f8d44f;
  --gold-deep:    #c9a447;
  --gold-dim:     #8a6e2a;
  --green:        #21e458;
  --green-bright: #5eef86;
  --green-deep:   #1b9f42;
  --blue:         #53b6e8;
  --screen:       #0c0b1a;
}
.px-root .fak.fa-loor-money-oct { font-size: 1.15em; vertical-align: -0.05em; }
.px-root *,
.px-root *::before,
.px-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.px-root img,
.px-root video,
.px-root iframe { display: block; max-width: 100%; }
.px-root button { font: inherit; cursor: pointer; border: none; background: none; }
.px-root {
  background: var(--bg);
  color: var(--text-bright);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.px-root::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
.px-root .btn {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: opacity 0.15s, transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.px-root .btn:hover { opacity: 0.92; }
.px-root .btn:active { transform: translateY(1px); }
.px-root .btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}
.px-root .btn-green {
  background: var(--green);
  color: #06210f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(33, 228, 88, 0.28);
}
.px-root .btn-outline {
  background: transparent;
  border: 1px solid rgba(201, 164, 71, 0.5);
  color: var(--gold-deep);
}
.px-root .btn-outline::before { display: none; }
.px-root .btn-gold {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: #241a05;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(245, 197, 24, 0.25);
}
.px-root .stage {
  padding: 20px 16px 0;
}
.px-root .trailer-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--screen);
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 90px rgba(245, 197, 24, 0.05);
}
.px-root .trailer-inner {
  position: absolute; inset: 0;
}
.px-root .trailer-inner iframe {
  width: 100%; height: 100%;
  border: none;
}
.px-root .trailer-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 72%, rgba(6, 6, 14, 0.55) 100%);
}
/* Big, obvious play button on the trailer poster (user test: "I didn't even
   know there was a play button"). Plyr's overlaid control is overridden here
   because `.px-root button { background: none }` and `.px-root * { padding: 0 }`
   otherwise flatten it to a bare 18px triangle. Plyr itself hides it while the
   video plays; the .plyr--playing rule is a belt-and-braces. */
.px-root .trailer-inner .plyr__control--overlaid {
  width: 84px; height: 84px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--text-bright);
  color: var(--text-bright);
  opacity: 1;
  z-index: 3;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.px-root .trailer-inner .plyr__control--overlaid svg {
  width: 30px; height: 30px;
  left: 3px;
  position: relative;
}
.px-root .trailer-inner .plyr__control--overlaid:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.05);
}
.px-root .trailer-inner .plyr__control--overlaid:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.px-root .trailer-inner .plyr--playing .plyr__control--overlaid {
  opacity: 0; visibility: hidden; pointer-events: none;
}
@media (max-width: 480px) {
  .px-root .trailer-inner .plyr__control--overlaid { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-root .trailer-inner .plyr__control--overlaid { transition: none; }
  .px-root .trailer-inner .plyr__control--overlaid:hover { transform: translate(-50%, -50%); }
}
.px-root .px-countdown {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 12px;
}
.px-root .px-countdown-label {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.px-root .px-countdown-clock {
  font-size: 20px; font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.px-root .px-countdown-low .px-countdown-clock { color: #ff5f57; }
.px-root .px-countdown-out .px-countdown-clock { color: var(--text-faint); }
.px-root .px-countdown-gain {
  font-size: 13px; font-weight: 800;
  color: var(--green);
  opacity: 0;
}
.px-root .px-gain-flash {
  animation: px-gain 2.4s ease-out forwards;
}
.px-root .ladder { padding-top: 20px; }
/* Page 1 of the funnel (no slider): the dock's pick arrives highlighted;
   tapping an option moves it. Shared bits across the three test variants. */
.px-root .px-picker { display: flex; flex-direction: column; gap: 12px; }
.px-root .px-pack-loot { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.px-root .px-pack-price { font-size: 12px; font-weight: 800; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.px-root .px-deal-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
}
.px-root .px-deal-seat {
  text-align: center;
  font-size: 12px; color: var(--text-dim);
  margin: 0;
}
.px-root .px-deal-seat b { color: var(--gold); font-weight: 800; }
/* The value ladder. The bar IS the information — the gold segment is the
   starter pack's LOOT-per-dollar, the green overshoot is the bonus. */
.px-root .px-deal-list { display: flex; flex-direction: column; gap: 6px; }
.px-root .px-deal-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 16px 64px;
  align-items: center; gap: 12px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.px-root .px-deal-row:hover { border-color: rgba(245, 197, 24, 0.45); }
.px-root .px-deal-row.is-active {
  border-color: var(--gold);
  background: rgba(245, 197, 24, 0.08);
}
.px-root .px-deal-row.is-active .px-pack-loot { color: var(--gold); }
.px-root .px-deal-row.is-active .px-pack-price { color: var(--text-bright); }
.px-root .px-deal-row .px-pack-price { text-align: right; }
.px-root .px-deal-meter {
  position: relative;
  height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.px-root .px-deal-meter-base {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.px-root .px-deal-meter-bonus {
  position: absolute; top: 0; bottom: 0;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #17a844, var(--green));
  box-shadow: 0 0 10px rgba(33, 228, 88, 0.5);
}
.px-root .px-deal-star {
  color: var(--green);
  font-size: 13px; line-height: 1;
  text-align: center;
}
.px-root .px-deal-value-line {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0;
  font-size: 12px; font-weight: 800; color: var(--green);
}
.px-root .px-deal-value-swatch {
  width: 18px; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #17a844, var(--green));
  box-shadow: 0 0 8px rgba(33, 228, 88, 0.5);
}
/* Page 2: the pick + its value riding along to the account screen. */
.px-root .px-express-deal {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
}
.px-root .px-express-deal-pick {
  font-size: 13px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.px-root .px-express-deal-artist {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px; color: var(--text-faint);
}
/* Page 2 of the funnel: the optional PFP on the account screen. */
.px-root .px-avatar-field { display: flex; align-items: center; gap: 12px; }
.px-root .px-avatar-preview {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-2);
  border: 2px dashed rgba(245, 197, 24, 0.4);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.px-root .px-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.px-root .px-avatar-blank { color: var(--text-faint); font-size: 22px; font-weight: 800; line-height: 1; }
.px-root .px-avatar-btn {
  position: relative; overflow: hidden;
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.px-root .px-avatar-btn:hover { color: var(--text-bright); border-color: rgba(245, 197, 24, 0.45); }
.px-root .px-avatar-btn input[type="file"] {
  position: absolute; inset: 0;
  width: 100%;
  opacity: 0; cursor: pointer;
}
.px-root .px-avatar-hint { font-size: 11px; color: var(--text-faint); }
.px-root .slider-track-wrap {
  position: relative; padding: 8px 0; margin-bottom: 8px;
}
.px-root .slider-track-bg {
  height: 7px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 4px; position: absolute; inset: 7px 0;
}
.px-root .slider-gold-fill {
  position: absolute; top: 8px; height: 5px; border-radius: 3px;
  background: linear-gradient(to right, var(--gold-dim), var(--gold));
}
.px-root .loot-slider {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  height: 100%; margin: 0;
  -webkit-appearance: none;
  touch-action: none;
}
/* Solid yellow circle, black LOOT mark centered — no ring, no white. */
.px-root .slider-thumb {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold);
  border: none;
  top: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s;
}
.px-root .slider-thumb.gold-mode {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5), 0 0 12px rgba(245, 197, 24, 0.45);
}
.px-root .slider-thumb { color: #14142a; }
.px-root .slider-thumb .px-loot-mark { width: 10px; height: 13px; }
/* The inline LOOT mark: sized like a glyph, colored by currentColor. */
.px-root .px-loot-mark {
  display: inline-block;
  width: 0.79em; height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}
.px-root .slider-thumb.at-max { animation: bump 0.25s ease-out; }
.px-root .actions {
  padding: 18px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.px-root #fund-btn:disabled,
.px-root #px-fund-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.px-root .btn-green.btn-funded {
  opacity: 1 !important;
  background: var(--green);
  box-shadow: 0 2px 24px rgba(33, 228, 88, 0.35);
  cursor: pointer;
}
.px-root .btn-green.btn-funded::before { display: none; }
.px-root .fund-trust {
  padding-top: 12px;
  font-size: 13px; line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}
.px-root .fund-trust b { color: var(--text-mid); font-weight: 700; }
.px-root .about {
  margin: 40px 24px 0;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 32px;
}
.px-root .maker {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0;
}
.px-root .maker + .maker { border-top: 1px solid var(--border-soft); }
.px-root .maker-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-deep);
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(245, 197, 24, 0.15);
}
.px-root .maker-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900;
  background: var(--surface-2); color: var(--gold-deep);
}
.px-root .maker-info { min-width: 0; }
.px-root .maker-name {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text-bright);
}
.px-root .maker-title {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 2px 0 8px;
}
.px-root .maker-bio {
  font-size: 13px; line-height: 1.6; color: var(--text-mid);
  max-width: 52ch;
}
.px-root .maker-bio p + p { margin-top: 8px; }
.px-root .maker-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px; font-weight: 700;
  color: var(--green);
  text-decoration: none;
}
.px-root .maker-link:hover { color: var(--green-bright); }
.px-root .stills-strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.px-root .still {
  height: 130px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.px-root .pitch {
  margin: 40px 24px 0;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
}
.px-root .how {
  margin: 28px 24px 0;
  display: flex; flex-direction: column; gap: 22px;
}
@media (max-width: 480px) {.px-root .stage { padding: 14px 10px 0; }
.px-root .still { height: 100px; }


}
.px-root .store-header {
  padding: 36px 24px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.px-root .store-header::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 320px; height: 180px;
  background: radial-gradient(ellipse, rgba(245, 197, 24, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.px-root .store-eyebrow {
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 12px;
}
.px-root .store-title {
  font-size: 40px; font-weight: 900; letter-spacing: -0.035em;
  color: var(--text-bright); margin-bottom: 8px; line-height: 1;
}
.px-root .store-sub {
  font-size: 13px; color: var(--text-mid);
}
.px-root .tiers { padding: 8px 20px 24px; }
.px-root .tier {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.px-root .tier:first-of-type { border-top: 1px solid var(--border-soft); }
@media (max-width: 480px) {.px-root .store-title { font-size: 32px; }


}
.px-root .trailer-tabs {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  max-width: calc(100% - 20px);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 20;
}
.px-root .trailer-tabs::-webkit-scrollbar { display: none; }
/* Pills with a visible edge and a dark fill so they read as buttons over the
   poster (user test: "I saw them. I didn't realize they were active"). The
   active pill is filled gold with dark ink, like the page's primary buttons. */
.px-root .trailer-tab {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-bright);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(242, 237, 228, 0.45);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: color 200ms, background 200ms, border-color 200ms;
  white-space: nowrap;
}
.px-root .trailer-tab:hover { border-color: var(--gold); }
.px-root .trailer-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.px-root .trailer-tab-active,
.px-root .trailer-tab-active:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--screen);
}
@media (max-width: 480px) {
  /* Five pills squeezed to fit a 375px phone on one row (a second row would
     collide with the play button); narrower screens scroll sideways. */
  .px-root .trailer-tabs { gap: 2px; top: 8px; max-width: calc(100% - 8px); padding: 2px; }
  .px-root .trailer-tab { font-size: 12px; letter-spacing: 0; padding: 8px 8px; }
}
.px-root .rank-congrats {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(13px, 1vw, 13px);
  background: rgba(12, 11, 26, 0.97);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 40px 32px;
  width: 100%; max-width: 420px;
  z-index: 20;
  animation: congrats-in 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.px-root .rank-congrats-eyebrow {
  font-size: clamp(13px, 1.3vw, 13px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
}
.px-root .rank-congrats-number {
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-bright);
}
.px-root .rank-congrats-title {
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.px-root .rank-congrats-sub {
  font-size: clamp(13px, 1.2vw, 13px);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.px-root .trailer-inner video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.px-root .credit-name {
  font-size: clamp(14px, 2.8vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  line-height: 1.25;
  word-break: break-word;
}
.px-root .px-preview-overlay {
  position: absolute; inset: 0;
  display: none;
  z-index: 10;
}
.px-root .px-preview-overlay.px-preview-active { display: block; }
.px-root .px-modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 7, 15, 0.7);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.px-root .px-modal {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.px-root .px-modal-title {
  font-size: 21px; font-weight: 900; letter-spacing: -0.02em;
  color: var(--text-bright);
}
.px-root .px-modal-copy {
  font-size: 13px; color: var(--text-mid); line-height: 1.55;
}
.px-root .px-modal-form { display: flex; flex-direction: column; gap: 10px; }
.px-root .px-modal-error { font-size: 13px; color: #ff5f57; }
.px-root .px-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0e0e20;
  color: var(--text-bright);
  font: inherit;
  font-size: 14px;
}
.px-root .px-input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.16);
}
.px-root .px-input::placeholder { color: var(--text-faint); }
.px-root .px-toast {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: 440px; width: calc(100% - 40px);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-bright);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.px-root .px-toast-error { border-color: #a13c37; }
.px-root .px-toast-info { border-color: var(--gold-deep); }
.px-root .px-modal-switch {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: center;
}
.px-root .px-modal-switch:hover { color: var(--text-mid); }
@media (min-width: 1024px) {.px-root .stage { padding: 44px 0 0; }
.px-root .about {
    margin: 56px 8px 0;
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    column-gap: 64px;
    align-items: start;
  }
.px-root .still { height: 150px; }
.px-root .pitch {
    margin: 56px 8px 0;
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    column-gap: 64px;
    align-items: start;
  }
.px-root .how { margin: 0 8px 0 0; gap: 24px; }
.px-root .pitch .how { margin: 0; }


}
.px-root .px-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(20, 20, 42, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.px-root .px-tagline {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.px-root .px-header-right {
  display: flex; align-items: center; gap: 18px;
}
.px-root .px-header-link {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-bright); text-decoration: none;
  white-space: nowrap;
}
.px-root .px-header-link:hover { color: var(--text-bright); }
.px-root .px-header-name {
  cursor: default;
  text-transform: none;
  letter-spacing: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-root .px-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* The hamburger: the PX auth loop's front door. */
.px-root .px-menu { position: relative; display: flex; align-items: center; }
.px-root .px-menu-btn {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.px-root .px-menu-btn:hover { border-color: rgba(245, 197, 24, 0.5); }
.px-root .px-menu-btn span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--text-bright);
}
.px-root .px-menu-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 160px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.px-root .px-menu-item {
  display: block; width: 100%;
  padding: 10px 14px;
  background: none; border: none;
  text-align: left;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-bright);
  border-radius: 7px;
  cursor: pointer;
}
.px-root .px-menu-item:hover { color: var(--text-bright); background: var(--surface-2); }
.px-root .px-header-balance {
  font-size: 13px; font-weight: 800; color: var(--gold);
  white-space: nowrap;
}
.px-root .px-header-logo {
  font-size: 22px; line-height: 1;
  color: var(--text-bright); text-decoration: none;
  display: flex; align-items: center;
}
.px-root .px-logo-word { height: 20px; width: auto; display: block; fill: currentColor; }
.px-root .px-logo-tv { height: 20px; width: auto; display: block; margin-left: 4px; fill: var(--gold); }

/* Share: the header button and the mini arrow beside the title category.
   Both copy the page link; "copied" flashes green. */
.px-root .px-share { display: flex; align-items: center; }
.px-root .px-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-bright);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.px-root .px-share-btn:hover { border-color: rgba(245, 197, 24, 0.5); }
.px-root .px-share-btn .px-share-mark { width: 13px; height: 13px; }
.px-root .px-share-btn.px-share-copied { color: var(--green); border-color: rgba(33, 228, 88, 0.6); }
.px-root .px-share-mini {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 10px;
  padding: 4px;
  color: var(--text-bright);
  cursor: pointer;
  vertical-align: middle;
  transition: color 120ms ease;
}
.px-root .px-share-mini:hover { color: var(--gold); }
.px-root .px-share-mini .px-share-mark { width: 14px; height: 14px; }
.px-root .px-share-mini.px-share-copied { color: var(--green); }
.px-root .px-sheet-close {
  position: absolute; top: 12px; right: 14px;
  font-size: 22px; line-height: 1;
  color: var(--text-dim);
  padding: 6px;
}
.px-root .px-sheet-close:hover { color: var(--text-bright); }
.px-root #px-express-modal { z-index: 55; }
.px-root .px-info { background: var(--screen); }
.px-root .px-info-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 78px 26px 26px;
  display: flex; flex-direction: column; gap: 22px;
}
.px-root .px-info-block { max-width: 60ch; }
.px-root .px-info-heading {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.px-root .px-info-copy { font-size: 14px; line-height: 1.6; color: var(--text-mid); }
.px-root .px-title-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 16px 4px 0;
}
.px-root .px-title {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 900; letter-spacing: -0.02em;
  color: var(--text-bright);
}
.px-root .px-title-meta {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.px-root .px-title-logline {
  flex-basis: 100%;
  font-size: 14px; line-height: 1.5; color: var(--text-bright);
  max-width: 72ch;
}
.px-root .px-countdown {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  padding: 20px 4px 0;
}
.px-root .px-countdown-label {
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-bright);
}
.px-root .px-countdown-clock {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 900; letter-spacing: 0.04em;
  color: var(--text-bright);
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
  font-variant-numeric: tabular-nums;
}
.px-root .px-credits {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--screen) 130%);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.px-root .px-seats {
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-evenly;
  gap: 4px;
  padding: 14px 20px 18px;
  text-align: center;
}
.px-root .px-seat { padding: 8px 0; }
.px-root .px-seat-role {
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 4px;
}
.px-root .px-seat-1 .px-seat-role { color: var(--gold); }
.px-root .px-seat-name {
  font-size: 20px; font-weight: 700; color: var(--text-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.px-root .px-seat-1 .px-seat-name {
  font-size: 25px; font-weight: 900;
  color: var(--gold);
}
.px-root .px-seat-amt {
  font-size: 16px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--text-mid); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.px-root .px-seat-1 .px-seat-amt { color: var(--gold); }
.px-root .px-seat-open .px-seat-role { color: var(--text-faint); }
.px-root .px-seat-open-name { color: var(--text-dim); font-weight: 500; font-style: italic; }
.px-root .px-seat-claim { color: var(--green); }
.px-root .px-seat-pin {
  border-top: 1px dashed var(--border);
  margin-top: 4px; padding-top: 12px;
}
.px-root .px-seat-projected {
  animation: px-seat-glow 1.4s ease-in-out infinite;
  border-radius: 10px;
}
.px-root .px-credits .px-preview-overlay {
  position: absolute; inset: 0;
  display: none;
  background: linear-gradient(180deg, var(--surface), var(--screen) 130%);
  z-index: 10;
  overflow-y: auto;
}
.px-root .px-credits .px-preview-overlay.px-preview-active { display: block; }
.px-root .px-seats-preview { min-height: 100%; }
.px-root .px-buy-modal { max-width: 460px; }
.px-root .px-buy-cta { margin-top: 14px; }
.px-root .px-buy-form { display: block; }
@media (min-width: 1024px) {.px-root .px-credits { min-height: 100%; }


}
.px-root .px-seat-role,
.px-root .px-seat-1 .px-seat-role,
.px-root .px-seat-open .px-seat-role { color: var(--gold); }
/* LOOT amounts read green and sit under the name in the hierarchy. */
.px-root .px-seat-amt,
.px-root .px-seat-1 .px-seat-amt {
  color: var(--green);
  font-size: 13px;
}
/* Names are the stars of the credits: bigger than the LOOT. */
.px-root .px-seat-name,
.px-root .px-seat-1 .px-seat-name,
.px-root .px-seat-you .px-seat-name,
.px-root .px-seat-you.px-seat-1 .px-seat-name {
  font-size: 20px;
  font-weight: 800;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-bright);
  filter: none;
  text-shadow: none;
}
.px-root .px-seat-open .px-seat-name {
  font-size: 17px; font-weight: 500;
  color: var(--text-bright);
  text-shadow: none;
}
.px-root .px-seat-open .px-seat-amt { font-size: 14px; }
/* The plaque (locked in 2026-08-28): your titled seat wears a gold frame
   and a corner chip claiming it. */
.px-root .px-you-plaque {
  position: relative;
  border: 1px solid rgba(245, 197, 24, 0.65);
  border-radius: 10px;
  background: rgba(245, 197, 24, 0.05);
  box-shadow: 0 0 22px rgba(245, 197, 24, 0.12);
  padding: 14px 10px 12px;
}
.px-root .px-you-chip {
  position: absolute; top: -9px; right: 10px;
  padding: 3px 10px;
  background: var(--gold);
  color: #1a1204;
  font-size: 9px; font-weight: 900;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px;
}

/* Your standing, always visible in the panel's foot. */
/* Label left, rank + LOOT pinned right — one line, nothing ever wraps. */
.px-root .px-credits-you {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px dashed var(--border);
  white-space: nowrap;
}
/* One size for all three: label (gold), rank (gold), LOOT (green). */
.px-root .px-credits-you-label {
  font-size: 16px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
.px-root .px-credits-you-rank {
  font-size: 16px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.px-root .px-credits-you-loot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 16px; font-weight: 800; color: var(--green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.px-root .px-credits-you-none {
  font-size: 14px; font-style: italic; color: var(--text-bright);
}




@keyframes px-gain {
  0%   { opacity: 0; transform: translateY(4px); }
  12%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes bump {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}


@keyframes congrats-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}




@keyframes px-seat-glow {
  0%, 100% { background: rgba(33, 228, 88, 0.06); }
  50% { background: rgba(33, 228, 88, 0.14); }
}
@keyframes px-dock-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 -8px 44px rgba(33, 228, 88, 0.35); }
}
@keyframes px-dock-pulse {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 8px 44px rgba(33, 228, 88, 0.4); }
}/* ===========================================================================
   CORE STRUCTURE — the locked-in design (2026-08-20).
   Screen with the funding bar welded to its bottom edge, THE CREDITS
   beside it, mission control sticky above the fold. Authored fresh when
   the video-bottom bar became the one true design.
   =========================================================================== */
/* -- Page -- */
.px-root .page {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 56px;
}
/* -- Stage: screen | credits -- */
.px-root .px-stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.px-root .px-main { min-width: 0; }
/* The screen and its funding bar are one welded block: bar under the
   video, full width; the stack owns the radius and shadow. */
.px-root .px-main .px-screen-stack {
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.px-root .px-main .trailer-wrap {
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom: 0;
  overflow: hidden;
  background: var(--screen);
}
/* -- THE funding bar: welded to the screen's bottom edge -- */
.px-root .px-hbar {
  position: relative;
  height: 44px;
  overflow: hidden;
  background: #0e0e20;
  border: 1px solid var(--border-soft);
  border-top: 1px solid rgba(7, 7, 15, 0.9);
  border-radius: 0 0 14px 14px;
}
.px-root .px-hbar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--pct, 0%);
  background: linear-gradient(to right, var(--green-deep), var(--green));
  transition: width 0.6s ease-out;
}
.px-root .px-hbar-fill::after {
  content: '';
  position: absolute; top: 0; bottom: 0; right: -1px;
  width: 3px;
  background: var(--green-bright);
  box-shadow: 0 0 12px 3px rgba(33, 228, 88, 0.5);
}
.px-root .px-hbar-preview {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--pct, 0%);
  background: repeating-linear-gradient(
    -55deg,
    rgba(94, 239, 134, 0.4) 0 5px,
    rgba(94, 239, 134, 0.18) 5px 10px
  );
  transition: width 0.15s linear;
}
/* Plain bold — no shadow/outline: the ink copy sits exactly on top of
   this light copy over the fill, so any shadow here spills out as a halo.
   Totals ride on the RIGHT; the percent takes the left. */
.px-root .px-hbar-label {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: 16px;
  font-size: 17px; font-weight: 900;
  color: #fff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Both halves of the total read as one line: same size, same color. */
.px-root .px-hbar-goal { font-size: inherit; color: inherit; font-weight: inherit; margin-left: 6px; }
/* Ink copy revealed by the fill: the clip's extent mirrors the fill's. */
/* Full-width overlay clipped to the fill's extent — clip-path (not width)
   so right-anchored children keep the exact position of the light copy. */
.px-root .px-hbar-inkclip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0);
  overflow: hidden; pointer-events: none;
  transition: clip-path 0.6s ease-out;
}
.px-root .px-hbar-label-ink { color: #06210f; text-shadow: none; }
/* White with an ink shadow so it reads on the green fill AND the dark
   remainder — the text straddles the fill edge at most percentages. */
.px-root .px-hbar-pct {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 16px;
  font-size: 17px; font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}
.px-root .px-hbar-pct-full { color: var(--gold); }
/* Funded and taking tips (/show): the whole bar turns yellow and carries
   the total tipped, in ink. */
.px-root .px-hbar-tips .px-hbar-fill { background: linear-gradient(to right, var(--gold-deep), var(--gold)); }
.px-root .px-hbar-tips .px-hbar-fill::after { display: none; }
.px-root .px-hbar-tips .px-hbar-label,
.px-root .px-hbar-tips .px-hbar-pct { color: #1f1700; text-shadow: none; }
/* Creator preview: an empty bar with a caption, never a LOOT goal. */
.px-root .px-hbar-note {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 16px; right: 16px;
  font-size: 14px; font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* -- Mission control: sticky card above the fold -- */
.px-root .px-dock {
  position: sticky;
  top: 55px;              /* rides just under the sticky .px-header */
  z-index: 35;            /* under the header (40), over the stage */
  display: flex; align-items: center; justify-content: center; gap: 22px;
  margin: 14px 0 20px;
  padding: 14px 22px;
  background: rgba(20, 20, 42, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.px-root .px-dock-spotlight {
  border-color: var(--green);
  animation: px-dock-pulse 1.6s ease-in-out 5;
}


@keyframes px-dock-pulse {
  0%, 100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 8px 44px rgba(33, 228, 88, 0.4); }
}.px-root .px-dock-mc {
  display: flex; align-items: center; gap: 20px;
  width: 100%; max-width: 1180px;
  min-width: 0;
}
.px-root .px-dock-label {
  display: block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 2px;
}
.px-root .px-dock-balance { white-space: nowrap; flex-shrink: 0; }
.px-root .px-dock-balance-amt {
  font-size: 16px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.px-root .px-dock-controls { flex: 1; display: flex; align-items: center; gap: 18px; min-width: 0; }
.px-root .px-dock-slider {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.px-root .px-dock-track { flex: 1; }
/* FUND and Top up share one explicit height so they read as a matched pair
   regardless of border/line-height differences. FUND's width is reserved for
   the largest number it can hold — otherwise every slider tick resizes it and
   the whole dock reflows (visible flicker). */
.px-root .px-dock-fund,
.px-root .px-dock-topup {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  height: 52px;
  width: auto; padding: 0 26px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.px-root .px-dock-fund { min-width: 230px; }
.px-root .px-dock-topup { min-width: 140px; margin-left: 6px; cursor: pointer; }
.px-root .px-dock-topup:hover { border-color: var(--gold); }
.px-root .px-num-reserve { display: inline-block; text-align: left; }
.px-root .px-dock-cta {
  flex: 1;
  max-width: 460px;
  font-size: 15px;
  padding: 18px 28px;
}
/* Fully funded: the tip jar's heading sits where the balance used to. */
.px-root .px-dock-tipping-head { flex-shrink: 0; white-space: nowrap; }
.px-root .px-dock-tipping-title { font-size: 16px; font-weight: 900; color: var(--text-bright); }
.px-root .px-dock-tip-total { flex-shrink: 0; white-space: nowrap; }
.px-root .px-dock-tip-fans { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--text-faint); }
.px-root .px-dock-fund:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}
/* -- Desktop stage -- */
@media (min-width: 1024px) {.px-root .page {
    max-width: 1280px;
    padding: 24px 32px 64px;
  }
.px-root .px-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: stretch;
  }
.px-root .px-credits { min-height: 100%; }


}
/* -- Mobile: mission control wraps --
   The slider takes its own full-width row; Fund and Top up share the row
   beneath it (Fund stretches, Top up keeps its label width). The controls
   wrapper steps out of the layout (display: contents) so Fund and Top up —
   which live in different parents — can sit in one flex row of .px-dock-mc. */
@media (max-width: 1023px) {.px-root .px-dock-mc { flex-wrap: wrap; gap: 10px; }
.px-root .px-dock-controls { display: contents; }
.px-root .px-dock-controls .px-dock-slider { flex-basis: 100%; order: 3; }
.px-root .px-dock-fund { order: 4; flex: 1 1 0; min-width: 0; }
.px-root .px-dock-topup { order: 5; flex: 0 0 auto; min-width: 0; margin-left: 0; }
.px-root .px-dock-tipping-head { flex-basis: 100%; order: 1; text-align: center; }
.px-root .px-dock-tip-total { flex-basis: 100%; order: 2; text-align: center; }


}
@media (max-width: 480px) {.px-root .px-dock-fund,
.px-root .px-dock-topup { padding: 0 16px; }


}
/* -- Anonymous mission control: the account CTA -- */
.px-root .px-dock-anon {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 0;
}
.px-root .px-dock-anon-copy {
  font-size: 14px; font-weight: 700;
  color: var(--text-mid);
  letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.px-root .px-dock-anon-actions {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.px-root .px-dock-anon-login { width: auto; padding: 14px 22px; white-space: nowrap; }
.px-root .px-dock-anon-create { width: auto; padding: 14px 26px; white-space: nowrap; }
@media (max-width: 700px) {.px-root .px-dock-anon { flex-direction: column; align-items: stretch; text-align: center; }
.px-root .px-dock-anon-copy { white-space: normal; }
.px-root .px-dock-anon-actions { justify-content: center; }


}
/* ===========================================================================
   BACKERS CREDIT SCROLL + ARTIST/LOOR PANES + ANONYMOUS STARTER LADDER
   =========================================================================== */
/* Stats row at the top of the Backers scroll */
.px-root .px-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.px-root .px-stat {
  text-align: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
}
.px-root .px-stat-num {
  display: block;
  font-size: 17px; font-weight: 900;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.px-root .px-stat-label {
  display: block; margin-top: 3px;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
}
/* The credit roll: same calm anatomy as the credits panel */
/* Backers pane: stats pinned up top, the credits crawling beneath. */
.px-root .px-backers {
  text-align: center;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 78px 26px 0;
}
.px-root .px-backers .px-stats { flex-shrink: 0; }
/* Phones: a 16:9 console is ~190px tall, less than the tabs' clearance plus
   the stats grid, which left the credits roll zero pixels. While the Backers
   tab is open (.px-console-backers, bound in px_console) the console may grow
   past 16:9, the stats tighten into a 2x2 grid, and the roll keeps a
   readable minimum. The other tabs keep the trailer's 16:9. */
@media (max-width: 639px) {
  /* A fixed height, not min-height: with aspect-ratio still on, a
     min-height transfers into a min-width and widens the console. */
  .px-root .px-console-backers { aspect-ratio: auto; height: 360px; }
  .px-root .px-backers { padding: 58px 16px 0; }
  .px-root .px-backers .px-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  .px-root .px-backers .px-stat { padding: 8px 6px; }
  .px-root .px-backers .px-stat-num { font-size: 15px; }
  .px-root .px-backers .px-roll { min-height: 140px; }
}
/* Scroll-driven crawl (pxRoll in project_x.js): auto-advances via
   scrollTop so the viewer can grab it with the wheel or a finger;
   scrollbar hidden for the film look. Hovering pauses it; scrolling it by
   hand stops the crawl and hides the duplicate copy so it scrolls once. */
.px-root .px-roll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  /* Scrolling inside the credits stays inside the credits — never chains
     out to the page, even at the roll's edges. */
  overscroll-behavior: contain;
  /* No scroll anchoring: a backer added above the visible line must not
     shift scrollTop, which pxRoll would read as the viewer scrolling. */
  overflow-anchor: none;
  position: relative;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.px-root .px-roll::-webkit-scrollbar { display: none; }
.px-root .px-roll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.px-root .px-roll-copy { padding: 18px 0 40px; }
.px-root .px-roll-copy[hidden] { display: none; }
.px-root .px-backer-credit { margin-bottom: 22px; }
.px-root .px-backer-role {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 5px;
}
.px-root .px-backer-name {
  font-size: 17px; font-weight: 700; color: var(--text-bright);
}
.px-root .px-backer-amt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-bright); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
/* Special Thanks: wrapped name-and-amount entries */
.px-root .px-thanks {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 28px;
  margin-top: 6px;
}
.px-root .px-thanks-entry { text-align: center; }
.px-root .px-thanks-name {
  display: block;
  font-size: 14px; font-weight: 700; color: var(--text-bright);
}
.px-root .px-thanks-amt {
  display: block;
  font-size: 10px; font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* LOOR pane CTA */
.px-root .px-loor-cta { max-width: 320px; margin: 0 auto; }
.px-root .px-loor-cta-sub { text-align: center; margin-top: 10px; font-size: 12px; }
.px-root .px-info-block .px-loor-cta + .px-loor-cta-sub { color: var(--text-dim); }
/* Anonymous starter ladder in the dock */
/* Dev-only demo-session chip (?demo=1) */
.px-root .px-demo-chip {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  padding: 8px 14px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1204;
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   CREATOR SUBMISSIONS (/submit) — the Film/Game intake wizard. Shares the
   PX shell (px-root, px-header, px-input, btn-gold) so both surfaces read
   as one product. Same hard rules apply: no grey type, LOOT amounts always
   carry the LOOT mark.
   ══════════════════════════════════════════════════════════════════════════ */

/* Header entry point — always visible on every PROJECT X page. */
.px-root .px-submit-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.px-root .px-submit-link:hover { background: var(--gold); color: var(--bg); }

/* Small screens: the right side gives way so it never covers the logo. */
.px-root .px-header-logo { flex-shrink: 0; }
.px-root .px-header-right { min-width: 0; }
.px-root .px-submit-short { display: none; }
@media (max-width: 760px) {
  .px-root .px-header { padding: 10px 14px; gap: 10px; }
  .px-root .px-header-right { gap: 10px; }
  .px-root .px-tagline,
  .px-root .px-header-name { display: none; }
  .px-root .px-share-btn > span { display: none; }
  .px-root .px-share-btn { padding: 8px 10px; }
}
@media (max-width: 480px) {
  .px-root .px-submit-long { display: none; }
  .px-root .px-submit-short { display: inline; }
  .px-root .px-submit-link { padding: 7px 10px; }
}
@media (max-width: 380px) {
  /* The dock right below shows the balance; the header copy can go. */
  .px-root .px-header-balance { display: none; }
  .px-root .px-header-right { gap: 8px; }
}

.px-root .px-header-logout {
  color: var(--text-bright);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── shell ── */
.px-root .px-sub {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 18px 80px;
}
.px-root .px-sub-shell { display: flex; flex-direction: column; gap: 18px; }
.px-root .px-sub-h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.px-root .px-sub-lede { font-size: 15px; line-height: 1.55; }
.px-root .px-sub-flash {
  background: var(--surface-2);
  border: 1px solid var(--gold-deep);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 14px;
}
.px-root .px-sub-autosave { font-size: 12.5px; text-align: center; opacity: 0.9; }

/* ── form fields ── */
.px-root .px-sub-form { display: flex; flex-direction: column; gap: 20px; }
.px-root .px-sub-field { display: flex; flex-direction: column; gap: 7px; }
.px-root .px-sub-label { font-size: 14px; font-weight: 700; }
.px-root .px-sub-req { color: var(--gold); }
.px-root .px-sub-holds p {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.8;
}
.px-root .px-sub-help { font-size: 12.5px; line-height: 1.45; opacity: 0.9; }
.px-root .px-sub-error { font-size: 13px; font-weight: 600; color: #ff5f57; }
.px-root .px-sub-field-error .px-input { border-color: #ff5f57; }
.px-root .px-sub-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.px-root .px-sub-select { appearance: auto; }

/* pills (radio + multi) */
.px-root .px-sub-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.px-root .px-sub-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.px-root .px-sub-pill input { position: absolute; opacity: 0; pointer-events: none; }
.px-root .px-sub-pill-on,
.px-root .px-sub-pill:has(input:checked) { border-color: var(--gold); background: var(--gold); color: var(--bg); }
.px-root .px-sub-pill:hover { border-color: var(--gold-deep); }
.px-root .px-sub-pill-on:hover,
.px-root .px-sub-pill:has(input:checked):hover { border-color: var(--gold); }
.px-root .px-sub-pill:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Visible choice marks: a circle for pick-one, a square for pick-any.
   Drawn on ::before so the (hidden) native inputs stay the real controls.
   Unselected = hollow, selected = filled with a ring (radio) or tick (box). */
.px-root .px-sub-pill::before,
.px-root label.px-sub-path-card::before {
  content: "";
  box-sizing: border-box;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(242, 237, 228, 0.6);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}
.px-root .px-sub-pill::before { margin-right: 9px; }
.px-root .px-sub-pill:has(input[type="checkbox"])::before { border-radius: 4px; }

/* selected pill (gold ground): dark mark. Keyed to the input itself, so it
   is right even while an exclusive option is clearing its siblings. */
.px-root .px-sub-pill:has(input:checked)::before {
  border-color: var(--bg);
  background-color: var(--bg);
}
.px-root .px-sub-pill:has(input[type="radio"]:checked)::before { box-shadow: inset 0 0 0 3px var(--gold); }
.px-root .px-sub-pill:has(input[type="checkbox"]:checked)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.6 2.6 5-5.6' fill='none' stroke='%23f5c518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* USD inputs */
.px-root .px-sub-usd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.px-root .px-sub-usd-sign { font-weight: 800; font-size: 16px; }
.px-root .px-sub-usd-input { max-width: 180px; font-variant-numeric: tabular-nums; }

/* upload warnings: the file was kept, this is only advice */
.px-root .px-sub-uploadwarn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 10px 12px;
}
.px-root .px-sub-uploadwarn .px-sub-warn { font-size: 13px; font-weight: 600; margin: 0; }
.px-root .px-sub-uploadwarn .px-sub-help { margin: 0; }
.px-root .px-sub-warn { color: var(--gold); }

/* wizard nav: Back and Save and exit are outlined secondary buttons grouped
   on the left, Next (gold) on the right. Under 480px Next takes its own full
   row on top and the two secondary buttons share the row below. */
.px-root .px-sub-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.px-root .px-sub-nav-secondary {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.px-root .px-sub-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-bright);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.px-root .px-sub-nav-btn:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.04); }
.px-root .px-sub-nav-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Plain underlined text link ("Back", "Edit", etc.) used outside the wizard nav. */
.px-root .px-sub-back {
  color: var(--text-bright);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.px-root .px-sub-next {
  width: auto;
  min-width: 140px;
  min-height: 48px;
  margin-left: auto;
  padding: 12px 28px;
}
.px-root .px-sub-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) {
  .px-root .px-sub-next { order: -1; width: 100%; margin-left: 0; }
  .px-root .px-sub-nav-secondary { width: 100%; }
  .px-root .px-sub-nav-secondary .px-sub-nav-btn { flex: 1; }
}

/* ── one-question-per-page shell ─────────────────────────────────────── */
.px-root .px-sub-barwrap { display: flex; align-items: center; gap: 12px; }
.px-root .px-sub-bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; }
.px-root .px-sub-bar-fill { height: 100%; background: var(--gold); transition: width 200ms ease; }
.px-root .px-sub-bar-text { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.px-root .px-sub-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.px-root .px-sub-req-note { font-size: 12px; color: var(--text-dim); }
.px-root .px-sub-list { display: flex; flex-direction: column; gap: 8px; }
.px-root .px-sub-listrow { display: flex; gap: 8px; align-items: center; }
.px-root .px-sub-listrow .px-input { flex: 1; }
.px-root .px-sub-listrow .px-sub-fileremove { flex-shrink: 0; }
.px-root .px-sub-listadd { align-self: flex-start; color: var(--gold); font-size: 14px; font-weight: 600; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.px-root .px-sub-hub { display: flex; flex-direction: column; gap: 12px; }
.px-root .px-sub-hubcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; }
.px-root .px-sub-hubtitle { font-weight: 700; }
.px-root .px-sub-hubcount { font-size: 13px; color: var(--text-dim); }
.px-root .px-sub-verify { border: 1px solid var(--gold); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.px-root .px-sub-verify-btn { align-self: flex-start; color: var(--gold); border: 1px solid var(--gold); background: none; border-radius: 8px; padding: 10px 14px; font-weight: 700; text-transform: uppercase; font-size: 13px; cursor: pointer; }
.px-root .px-sub-inline-error { color: #ff8a8a; font-size: 14px; margin: 0 0 8px; }

/* path split cards */
.px-root .px-sub-paths { display: flex; flex-direction: column; gap: 14px; }
.px-root .px-sub-path-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
  color: var(--text-bright);
}
.px-root .px-sub-path-card:hover { border-color: var(--gold-deep); }
.px-root .px-sub-path-on,
.px-root .px-sub-path-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

/* choice cards (radio inputs) get a circle top-right; the Film/Game split
   cards are buttons (actions), so they stay unmarked */
.px-root label.px-sub-path-card { padding-right: 48px; }
.px-root label.px-sub-path-card::before { position: absolute; top: 18px; right: 18px; }
.px-root label.px-sub-path-card:hover::before { border-color: var(--gold-deep); }
.px-root label.px-sub-path-card:has(input:checked)::before {
  border-color: var(--gold);
  background-color: var(--gold);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.px-root .px-sub-path-name {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.px-root .px-sub-path-copy { font-size: 14px; line-height: 1.5; }
.px-root label.px-sub-path-card { position: relative; cursor: pointer; }
.px-root .px-sub-card-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.px-root .px-sub-path-card:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* auth gate */
.px-root .px-sub-gate { max-width: 480px; margin: 26px auto 0; }
.px-root .px-sub-authbox {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 18px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.px-root .px-sub-namerow { display: flex; gap: 10px; }
.px-root .px-sub-namerow .px-input { flex: 1 1 0; min-width: 0; }
.px-root .px-sub-authswitch { font-size: 13.5px; text-align: center; opacity: 0.9; }
.px-root .px-sub-authswitch button {
  color: var(--text-bright);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 720px) {
  .px-root .px-sub { padding-top: 44px; }
  .px-root .px-sub-h1 { font-size: 32px; }
  .px-root .px-sub-paths { flex-direction: row; flex-wrap: wrap; }
  .px-root .px-sub-paths .px-sub-path-card { flex: 1 1 0; }
  .px-root .px-sub-paths .px-sub-error,
  .px-root .px-sub-paths .px-sub-nav { flex-basis: 100%; }
}

/* live character counters */
.px-root .px-sub-countwrap { display: flex; flex-direction: column; gap: 5px; }
.px-root .px-sub-count {
  align-self: flex-end;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.px-root .px-sub-count-low { color: var(--gold); }

/* path-details additions */
.px-root .px-sub-int { max-width: 140px; font-variant-numeric: tabular-nums; }
.px-root .px-sub-checkpill { line-height: 1.4; text-align: left; }
.px-root .px-sub-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.px-root .px-sub-checkbox input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  display: grid;
  place-content: center;
  cursor: pointer;
}
.px-root .px-sub-checkbox input[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background: var(--bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
}
.px-root .px-sub-checkbox input[type="checkbox"]:checked { border-color: var(--gold); background: var(--gold); }
.px-root .px-sub-checkbox input[type="checkbox"]:checked::before { transform: scale(1); }
.px-root .px-sub-checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.px-root .px-sub-checkbox:hover input[type="checkbox"]:not(:checked) { border-color: var(--gold-deep); }

/* assets step — upload slots */
.px-root .px-sub-uploadbox {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  gap: 10px;
}
.px-root .px-sub-filerow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 8px 12px;
}
.px-root .px-sub-filename {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
}
.px-root .px-sub-filesize,
.px-root .px-sub-fileprogress {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.px-root .px-sub-fileprogress { color: var(--gold); font-weight: 700; }
.px-root .px-sub-filepending { border-style: dashed; }
.px-root .px-sub-fileremove {
  color: var(--text-bright);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.px-root .px-sub-thumb {
  display: block;
  max-width: 220px;
  max-height: 140px;
  border-radius: 6px;
  object-fit: contain;
  margin-bottom: 6px;
}
.px-root .px-sub-pickfile { display: inline-flex; cursor: pointer; }
.px-root .px-sub-pickfile input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.px-root .px-sub-pickfile-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.px-root .px-sub-pickfile:hover .px-sub-pickfile-btn { background: var(--gold); color: var(--bg); }
.px-root .px-sub-flash-info { border-color: var(--green-deep); }

/* legal & submit step */
.px-root .px-sub-legal-link {
  display: inline-block;
  margin-top: 2px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The Content Creator Agreement, scrolling above its checkbox. The
   "local" gradients cover the shadows at either end until there is more
   text that way, so the shadow shows where the text continues. */
.px-root .px-sub-agreement {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(var(--surface) 30%, rgba(28, 27, 51, 0)) center top / 100% 40px no-repeat local,
    linear-gradient(rgba(28, 27, 51, 0), var(--surface) 70%) center bottom / 100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.55), transparent) center top / 100% 14px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.55), transparent) center bottom / 100% 14px no-repeat scroll,
    var(--surface);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.px-root .px-sub-agreement:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.px-root .px-sub-agreement h1 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.px-root .px-sub-agreement h1 + p { margin: 2px 0 16px; font-size: 12.5px; opacity: 0.8; }
.px-root .px-sub-agreement h2 {
  margin: 24px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--gold);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}
.px-root .px-sub-agreement p { margin: 0 0 12px; }
.px-root .px-sub-agreement ul { margin: 0 0 12px; padding-left: 22px; list-style: none; }
.px-root .px-sub-agreement li { margin-bottom: 6px; }
.px-root .px-sub-agreement strong { font-weight: 700; }
.px-root .px-sub-agreement a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.px-root .px-sub-agreement > :last-child { margin-bottom: 0; }
.px-root .px-sub-verify {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--gold-deep);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
  font-size: 14px;
  line-height: 1.5;
}
.px-root .px-sub-verify-btn {
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.px-root .px-sub-verify-btn:hover { background: var(--gold); color: var(--bg); }
/* Honeypot: parked far off-canvas, never display:none (bots check that). */
.px-root .px-sub-hp { position: absolute; left: -6000px; top: 0; height: 1px; overflow: hidden; }

/* start-screen submission list */
.px-root .px-sub-mine {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}
.px-root .px-sub-mine-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.px-root .px-sub-minerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.px-root .px-sub-minename { font-size: 14.5px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.px-root .px-sub-minestep { font-size: 12.5px; font-weight: 600; opacity: 0.8; }
.px-root .px-sub-minerow .px-sub-back { white-space: nowrap; }
.px-root .px-sub-minestatus { font-size: 13px; white-space: nowrap; }
.px-root .px-sub-mine-review { color: var(--gold); font-weight: 700; }

/* Profile settings (/profile): section cards reuse .px-sub-uploadbox, stat
   tiles reuse .px-stats — only the photo row is new. */
.px-root .px-prof-avatarrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.px-root .px-prof-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
}
.px-root .px-sub-uploadbox > .px-sub-mine-title { margin-bottom: 2px; }

/* Header menu identity block (the /submit hamburger's user panel). */
.px-root .px-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.px-root .px-menu-who { font-size: 13.5px; font-weight: 800; color: var(--text-bright); }
.px-root .px-menu-email { font-size: 12px; opacity: 0.75; word-break: break-all; }
.px-root .px-menu-step { font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 3px; }
.px-root .px-menu-item { text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   VERIFIED CREATOR BADGE (design locked 2026-09-10). Trophy coin + white
   brush-taper check, 20px beside the artist name. Hover/focus grows it into
   the VERIFIED pill; click (focus-within) opens the tooltip. Pure CSS
   states — no Alpine, no icon kit — so LiveView patches can't strand it.
   ══════════════════════════════════════════════════════════════════════════ */
.px-root .maker-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.px-root .px-vb { position: relative; display: inline-flex; align-items: center; }
.px-root .px-vb-btn {
  display: inline-flex; align-items: center;
  padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer;
  color: var(--gold);
  transition: background .28s ease, border-color .28s ease, padding .28s ease;
}
.px-root .px-vb-seal { display: inline-flex; transition: transform .28s ease; }
.px-root .px-vb-svg { display: block; flex-shrink: 0; overflow: visible; }
.px-root .px-vb-word {
  display: inline-block; max-width: 0; overflow: hidden; opacity: 0;
  white-space: nowrap; margin-left: 0;
  font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--gold);
  transition: max-width .32s ease, opacity .22s ease, margin-left .28s ease;
}
.px-root .px-vb-btn:hover,
.px-root .px-vb-btn:focus,
.px-root .px-vb-btn:focus-visible {
  background: var(--surface-2); border-color: var(--gold);
  padding: 2px 10px 2px 2px; outline: none;
}
.px-root .px-vb-btn:hover .px-vb-word,
.px-root .px-vb-btn:focus .px-vb-word { max-width: 90px; opacity: 1; margin-left: 7px; }
.px-root .px-vb-btn:hover .px-vb-seal,
.px-root .px-vb-btn:focus .px-vb-seal { transform: scale(1.12); }
.px-root .px-vb-tip {
  position: absolute; left: 0; top: calc(100% + 12px); width: 262px; z-index: 5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.px-root .px-vb-tip::before {
  content: ""; position: absolute; left: 14px; top: -7px; width: 12px; height: 12px;
  background: var(--surface-2); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.px-root .px-vb:focus-within .px-vb-tip { opacity: 1; transform: translateY(0); pointer-events: auto; }
.px-root .px-vb-tip-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.px-root .px-vb-tip-body { font-size: 12.5px; line-height: 1.5; color: var(--text-bright); }

/* ── Launch preview (/submit/:id/launch/preview) ── */
.px-root .px-preview-banner { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; background: #C9A447; color: #1D232F; font-weight: 600; }
.px-root .px-preview-poster { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; display: flex; align-items: flex-end; }
.px-root .px-preview-caption { margin: 0; padding: 12px 16px; width: 100%; background: rgba(0, 0, 0, 0.6); font-size: 14px; }
.px-root .px-preview-note { font-weight: 400; }
.px-root .px-preview-elsewhere { max-width: 1100px; margin: 32px auto 48px; padding: 0 16px; }
.px-root .px-preview-elsewhere h2 { margin: 0 0 4px; font-size: 20px; }
.px-root .px-preview-elsewhere-lede { margin: 0 0 16px; opacity: 0.75; }
.px-root .px-preview-elsewhere-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.px-root .px-preview-elsewhere figure { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.px-root .px-preview-elsewhere figcaption { font-size: 13px; opacity: 0.8; }
.px-root .px-preview-portrait { width: 160px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.px-root .px-preview-share { width: 360px; max-width: 100%; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; overflow: hidden; }
.px-root .px-preview-share img, .px-root .px-preview-share .px-preview-empty { display: flex; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: rgba(255, 255, 255, 0.06); }
.px-root .px-preview-share-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 13px; }
.px-root .px-preview-share-text span:first-child { text-transform: uppercase; font-size: 11px; opacity: 0.6; }
.px-root .px-preview-empty { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 13px; opacity: 0.6; border: 1px dashed rgba(255, 255, 255, 0.25); }

/* ── Launch page builder (/submit/:id/launch) ── */
.px-root .px-launch-ready { color: #3DDC84; font-weight: 600; }
.px-root .px-launch-needs { color: #C9A447; font-weight: 600; }
.px-root .px-launch-shows { margin: 0 0 4px; font-size: 12px; opacity: 0.7; }
.px-root .px-launch-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }
.px-root .px-launch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 12px; }
.px-root .px-launch-hint { font-size: 14px; opacity: 0.75; }
.px-root .px-launch-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.px-root .px-launch-fieldset:disabled { opacity: 0.6; }
.px-root .px-launch-split { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .px-root .px-launch-split { grid-template-columns: 3fr 2fr; align-items: start; } }
.px-root .px-launch-maker { padding: 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; }
.px-root .px-launch-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.px-root .px-launch-thumbrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.px-root .px-launch-thumb { display: block; width: 100%; border-radius: 8px; }

/* -- Step rail: Get LOOT → Fund → Your name in the credits --
   The first row of mission control. Stacks the dock vertically so the rail
   sits above the controls; the active step glows green, done steps tick off
   in gold. Phones show only the active label (dots for the rest). */
.px-root .px-dock { flex-direction: column; gap: 12px; }
.px-root .px-steps {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  width: 100%; max-width: 1180px;
}
.px-root .px-steps-list {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.px-root .px-step {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.55;
}
.px-root .px-step + .px-step::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--border);
  margin-right: 3px;
}
.px-root .px-step-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 800;
}
.px-root .px-step-done { opacity: 0.85; }
.px-root .px-step-done .px-step-dot { border-color: var(--gold-deep); color: var(--gold); }
.px-root .px-step-on { opacity: 1; color: var(--green); }
.px-root .px-step-on .px-step-dot {
  border-color: var(--green); background: var(--green); color: var(--bg);
}
.px-root .px-steps-tour {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-bright);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.px-root .px-steps-tour:hover,
.px-root .px-steps-tour:focus-visible { border-color: var(--gold); color: var(--gold); }
@media (max-width: 639px) {
  .px-root .px-steps { justify-content: space-between; }
  .px-root .px-steps-list { gap: 6px; }
  .px-root .px-step + .px-step::before { width: 10px; margin-right: 0; }
  .px-root .px-step:not(.px-step-on) .px-step-label { display: none; }
}

/* "Slide, then Fund": a coach-mark pill hanging under the spotlighted dock
   after a purchase; fades once the pulse is done. */
.px-root .px-dock-tip {
  position: absolute; left: 50%; bottom: -14px;
  transform: translate(-50%, 0);
  padding: 4px 12px; border-radius: 999px;
  background: var(--green); color: var(--bg);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
  white-space: nowrap; pointer-events: none;
  animation: px-tip-out 9s ease forwards;
}
@keyframes px-tip-out {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* -- Receipt: LOOT received -- */
.px-root .px-receipt { text-align: center; align-items: center; max-width: 360px; }
.px-root .px-receipt-amt {
  font-size: clamp(28px, 6vw, 36px); font-weight: 900; letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--gold);
  animation: congrats-in 420ms cubic-bezier(.2, .9, .3, 1.2) both;
}
.px-root .px-receipt-meta { font-size: 13px; font-variant-numeric: tabular-nums; }
.px-root .px-receipt-cta { margin-top: 8px; }

/* -- Tour: spotlight cutout + one-line card --
   Above the header (40) and dock (35), under the modals (50). */
.px-root .px-tour { position: fixed; inset: 0; z-index: 45; }
.px-root .px-tour-scrim { position: absolute; inset: 0; }
.px-root .px-tour-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(7, 7, 15, 0.72);
  outline: 2px solid var(--gold); outline-offset: 2px;
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}
.px-root .px-tour-card {
  position: fixed;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  transition: top 220ms ease, left 220ms ease;
}
.px-root .px-tour-count {
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold);
}
.px-root .px-tour-text { font-size: 15px; font-weight: 700; line-height: 1.4; margin: 6px 0 12px; }
.px-root .px-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.px-root .px-tour-skip { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.px-root .px-tour-next { width: auto; margin-left: auto; padding: 9px 18px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .px-root .px-tour-spot,
  .px-root .px-tour-card { transition: none; }
}

/* -- J's colors on the X show page (colors only: Inter, layout, copy and
   behaviour are untouched) --
   Scoped under .px-jc, a class only the X root layout puts on <body>, so the
   other pages that share this file (/profile, /submit) keep the navy look.
   Near-black surfaces, a gold line under the header, gold money buttons and
   LOOT amounts; the funding bar stays green. */
.px-root.px-jc {
  --bg:          #07070f;
  --surface:     #0f0f1e;
  --surface-2:   #17172c;
  --screen:      #07070f;
  --border:      rgba(242, 237, 228, 0.26);
  --border-soft: rgba(242, 237, 228, 0.13);
}
.px-root.px-jc::after { display: none; }
.px-root.px-jc .px-header {
  background: rgba(7, 7, 15, 0.95);
  backdrop-filter: none;
  border-bottom: 3px solid var(--gold);
}
.px-root.px-jc .px-dock {
  background: rgba(15, 15, 30, 0.96);
  backdrop-filter: none;
  box-shadow: none;
}
.px-root.px-jc .px-hbar { background: #1c1c30; }
.px-root.px-jc .px-countdown-clock { text-shadow: none; }
.px-root.px-jc .px-credits {
  background: var(--surface);
  box-shadow: none;
  border-color: var(--border-soft);
}
.px-root.px-jc .px-seat-amt,
.px-root.px-jc .px-seat-1 .px-seat-amt,
.px-root.px-jc .px-seat-claim { color: var(--gold); }
.px-root.px-jc .btn-green:not(.btn-funded) {
  background: var(--gold);
  color: #1a1300;
  box-shadow: none;
}
.px-root.px-jc .btn-gold {
  background: var(--gold);
  box-shadow: none;
}
.px-root.px-jc .trailer-tab {
  background: rgba(7, 7, 15, 0.62);
  border-color: rgba(242, 237, 228, 0.3);
}
.px-root.px-jc .trailer-tab:hover { border-color: var(--gold); }
.px-root.px-jc .trailer-tabs .trailer-tab-active,
.px-root.px-jc .trailer-tabs .trailer-tab-active:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1300;
}