/* Self-hosted so the family resolves without a third-party font host. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("geist-latin.woff2") format("woff2");
}

.pp-scope {
  
  --pp-r-panel: 5px; --pp-r-ctl: 5px;

  --pp-sans:  var(--ui-font, var(--body-font, "Geist", "Public Sans", system-ui, sans-serif));
  --pp-title: var(--title-font, var(--ui-font, var(--body-font, "Geist", "Public Sans", system-ui, sans-serif)));
  --pp-mono: var(--tertiary-font, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  --pp-fs-body:  var(--text-size, 14px);
  --pp-fs-micro: calc(var(--text-size, 14px) * .857);
  --pp-fs-meta:  calc(var(--text-size, 14px) * .857);
  --pp-fs-lead:  var(--title-size-m, 20px);
  --pp-fs-head:  var(--title-size-m, 20px);
  --pp-fs-hero:  var(--title-size-xl, 30px);
  --pp-track: .09em;

  color: var(--pp-ink);
  font-family: var(--pp-sans);
  font-size: var(--pp-fs-body); line-height: 1.6;
}
.pp-scope *, .pp-scope *::before, .pp-scope *::after { box-sizing: border-box; }

.pp-scope :where(button) { font: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; }

.pp-scope :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pp-accent2); outline-offset: 2px;
}

.pp-k, .pp-eyebrow {
  font-size: var(--pp-fs-micro); font-weight: 700; letter-spacing: var(--pp-track);
  text-transform: uppercase; color: var(--pp-muted);
}
.pp-k-dim { color: var(--pp-faint); }

.pp-wrap { width: min(100% - 40px, var(--main-width, 1200px)); margin-inline: auto; }
body.pp-tight-top .main.ts-contain { margin-top: 18px; }

.pp-phead { margin: 0 0 26px; }
.pp-phead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 26px; flex-wrap: wrap; }

.pp-phead-row-mid { align-items: center; }
.pp-phead-eyebrow {
  font-size: var(--pp-fs-micro); font-weight: 700; letter-spacing: var(--pp-track);
  text-transform: uppercase; color: var(--pp-accent-ink); margin-bottom: 7px;
}
.pp-scope .pp-phead-title, .pp-scope h1.pp-phead-title {
  font-family: var(--pp-title); font-size: var(--pp-fs-hero); line-height: 1.1;
  font-weight: 800; letter-spacing: -.02em; color: var(--pp-ink);
  margin: 0 0 9px; padding: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pp-phead-sub { font-size: var(--pp-fs-meta); color: var(--pp-muted); margin: 0; }
.pp-phead-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
@media (max-width: 600px) { .pp-scope .pp-phead-title { font-size: calc(var(--pp-fs-hero) * .74); } }

.pp-btn, .pp-scope a.pp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 14px; border-radius: var(--pp-r-ctl); border: none; line-height: 1;
  background: var(--pp-grad); color: var(--pp-on-accent); font-size: var(--pp-fs-body); font-weight: 700;
  text-decoration: none; text-align: center; text-transform: none; letter-spacing: normal;
  transition: background .15s;
}

.pp-btn:not([disabled]):hover { background: var(--pp-grad-hi); color: var(--pp-on-accent); }
/* `display: block` would undo the flex centring the base relies on. */
.pp-btn-wide { display: flex; width: 100%; }
.pp-btn-sm { height: 28px; padding: 0 11px; font-size: var(--pp-fs-meta); }

.pp-scope .pp-btn-primary, .pp-scope a.pp-btn-primary {
  background: var(--pp-grad); color: var(--pp-on-accent); border: none; border-radius: var(--pp-r-ctl);
  height: 34px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--pp-fs-body); font-weight: 700; line-height: 1; text-align: center; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transition: background .15s, color .15s;
}
.pp-scope .pp-btn-primary:not([disabled]):hover, .pp-scope a.pp-btn-primary:hover {
  background: var(--pp-grad-hi); color: var(--pp-on-accent);
}

.pp-scope .pp-btn-ghost, .pp-scope a.pp-btn-ghost, .pp-scope .pp-ibtn, .pp-scope a.pp-ibtn {
  border: 1px solid var(--pp-line); background: var(--pp-surface2); color: var(--pp-ink);
  border-radius: var(--pp-r-ctl); height: 34px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-family: var(--pp-sans); font-size: var(--pp-fs-body); font-weight: 700;
  line-height: 1; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.pp-scope .pp-btn-ghost, .pp-scope a.pp-btn-ghost { padding: 0 13px; text-align: center; }
/* An icon button carries no label, so its glyph is secondary text, not ink. */
.pp-scope .pp-ibtn, .pp-scope a.pp-ibtn { width: 34px; padding: 0; color: var(--pp-muted); }
.pp-scope .pp-ibtn .tsi { font-size: 14px; line-height: 1; }

.pp-scope .pp-btn-ghost:not([disabled]):hover, .pp-scope a.pp-btn-ghost:hover,
.pp-scope .pp-ibtn:not([disabled]):hover, .pp-scope a.pp-ibtn:hover {
  background: var(--pp-surface3); border-color: transparent; color: var(--pp-ink);
}

.pp-scope .pp-btn[disabled], .pp-scope a.pp-btn[disabled],
.pp-scope .pp-btn-primary[disabled], .pp-scope .pp-btn-ghost[disabled], .pp-scope .pp-ibtn[disabled] {
  opacity: .45; cursor: not-allowed; border-color: transparent;
}

.pp-btn-discord, .pp-scope a.pp-btn-discord { background: var(--pp-brand-discord); color: #fff; }
.pp-btn-discord:hover { background: var(--pp-brand-discord-hi); color: #fff; }

/* Provider buttons wear the provider's brand color in BOTH schemes — the
   navy is dark enough to carry white text on a light page too. */
.pp-btn-nexus, .pp-scope a.pp-btn-nexus { background: var(--pp-brand-nexus); color: #fff; }
.pp-btn-nexus:hover { background: var(--pp-brand-nexus-hi); color: #fff; }
/* Their brandbook: below 28px the wordmark is not permitted, the icon is. */
.pp-btn-nexus .pp-btn-mark { height: 18px; width: auto; display: block; flex: none; }

.pp-chip {
  border: 1px solid var(--pp-line); background: var(--pp-surface2); border-radius: var(--pp-r-ctl); padding: 5px 12px;
  font-size: var(--pp-fs-meta); font-weight: 700; letter-spacing: var(--pp-track); text-transform: uppercase;
  color: var(--pp-muted); transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
}

/* Doubled class: the theme ships `.s-dark button:hover { border-color }` at
   (0,2,1), which outranks a single-class rule and repaints the stroke. */
.pp-scope .pp-chip.pp-chip:hover { border-color: var(--pp-line); color: var(--pp-ink); background: var(--pp-surface3); }
.pp-chip.pp-on { background: var(--pp-grad); color: var(--pp-on-accent); border-color: transparent; }
.pp-chip.pp-on:hover { background: var(--pp-grad-hi); color: var(--pp-on-accent); border-color: transparent; }

.pp-chip .pp-dot { width: 9px; height: 9px; border-radius: var(--pp-r-ctl); flex: none; }

.pp-chip-lab { display: inline; }

.pp-tag {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: var(--pp-r-ctl); border: 1px solid transparent;
  background: var(--pp-surface2); color: var(--pp-muted);
  font-size: var(--pp-fs-micro); font-weight: 700; letter-spacing: var(--pp-track);
  text-transform: uppercase;
}

.pp-tag-lucky {
  position: relative; overflow: hidden;
  color: var(--pp-tcg); border-color: transparent;
  background: color-mix(in srgb, var(--pp-tcg) 14%, var(--pp-surface2));
}
.pp-tag-lucky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  
  background: linear-gradient(
    100deg,
    transparent 42%,
    var(--pp-shine) 50%,
    transparent 58%);
  transform: translateX(-165%);
  animation: pp-lucky-shine 4.4s ease-in-out infinite;
}
@keyframes pp-lucky-shine {
  0%, 64%   { transform: translateX(-165%); }
  94%, 100% { transform: translateX(165%); }
}
/* Motion is a preference, not a decoration we get to keep. */
@media (prefers-reduced-motion: reduce) {
  .pp-tag-lucky::after { animation: none; opacity: 0; }
}

.pp-menu { position: relative; display: inline-flex; }

.pp-menu-t { gap: 8px; }
.pp-menu-t[aria-expanded="true"] { background: var(--pp-surface3); color: var(--pp-ink); }
.pp-menu-t.pp-on[aria-expanded="true"] { background: var(--pp-grad-hi); color: var(--pp-on-accent); }
.pp-menu-t .tsi { font-size: .8em; transition: transform .2s; }
.pp-menu-t[aria-expanded="true"] .tsi { transform: rotate(180deg); }

.pp-menu-n { font-variant-numeric: tabular-nums; opacity: .8; }

.pp-menu-p {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 6px;
  background: var(--pp-bg); border-radius: var(--pp-r-panel);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  display: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  max-height: 320px;
}
.pp-menu.pp-open .pp-menu-p { display: block; }
/* Flipped to the right edge by JS, which measures. Nothing assumes a width. */
.pp-menu-p.pp-menu-r { left: auto; right: 0; }

.pp-menu-i {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: var(--pp-r-ctl);
  padding: 7px 10px; cursor: pointer; text-align: left;
  font-size: var(--pp-fs-meta); font-weight: 700; letter-spacing: var(--pp-track);
  text-transform: uppercase; color: var(--pp-muted);
  transition: background .12s, color .12s;
  
  white-space: nowrap;
}
.pp-scope .pp-menu-i:hover { background: var(--pp-surface2); color: var(--pp-ink); }
.pp-menu-i[aria-checked="true"] { color: var(--pp-ink); }

.pp-menu-i:focus-visible,
.pp-menu-t:focus-visible { outline: 2px solid var(--pp-accent2); outline-offset: 2px; }

.pp-menu-c { margin-left: auto; font-weight: 700; opacity: .55; font-variant-numeric: tabular-nums; }

.pp-menu-b, .pp-menu-d { flex: none; position: relative; background: var(--pp-surface2); transition: background .12s; }
.pp-menu-b { width: 15px; height: 15px; border-radius: var(--pp-r-ctl); }   /* multi  */
.pp-menu-d { width: 15px; height: 15px; border-radius: 50%; }               /* single */
.pp-menu-i[aria-checked="true"] .pp-menu-b,
.pp-menu-i[aria-checked="true"] .pp-menu-d { background: var(--pp-accent); }
.pp-menu-b::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--pp-on-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg); opacity: 0; transition: opacity .12s;
}
.pp-menu-d::after {
  content: ''; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--pp-on-accent); opacity: 0; transition: opacity .12s;
}
.pp-menu-i[aria-checked="true"] .pp-menu-b::after,
.pp-menu-i[aria-checked="true"] .pp-menu-d::after { opacity: 1; }

.pp-menu-sep { height: 6px; }

@media (prefers-reduced-motion: reduce) {
  .pp-menu-t, .pp-menu-t .tsi, .pp-menu-i, .pp-menu-b, .pp-menu-d,
  .pp-menu-b::after, .pp-menu-d::after { transition: none; }
}

@media (pointer: coarse) {
  .pp-scope .pp-btn, .pp-scope a.pp-btn,
  .pp-scope .pp-btn-primary, .pp-scope a.pp-btn-primary,
  .pp-scope .pp-btn-ghost, .pp-scope a.pp-btn-ghost { min-height: 44px; }
  .pp-scope .pp-ibtn { min-width: 44px; min-height: 44px; }
  .pp-scope .pp-chip { min-height: 36px; }
  
  .pp-scope .pp-menu-i { min-height: 40px; }
}