.site-discord {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem; border-radius: 0.85rem;
  background: rgb(var(--color-voon-800)); border: 1px solid rgb(255 255 255 / 0.08);
  color: #fff; font-size: 1.2rem; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.site-discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; transform: translateY(-1px); }
.site-discord:focus-visible { outline: 2px solid rgb(var(--color-indigo-400)); outline-offset: 2px; }
.site-header-tools { display: flex; align-items: center; gap: 1rem; }
.site-mobile-tools { display: flex; align-items: center; gap: 0.5rem; }

.pm {
  --pm-card: rgb(var(--color-voon-card));
  --pm-sunk: rgb(var(--color-neutral-900) / 0.75);
  --pm-tile: rgb(255 255 255 / 0.04);
  --pm-line: rgb(255 255 255 / 0.08);
  --pm-line-strong: rgb(255 255 255 / 0.16);
  --pm-text: rgb(255 255 255 / 0.92);
  --pm-muted: rgb(255 255 255 / 0.62);
  --pm-faint: rgb(255 255 255 / 0.55);
  --pm-fill: rgb(var(--cl-fill, var(--color-indigo-600)));
  --pm-fill-hover: rgb(var(--color-indigo-700));
  --pm-accent: rgb(var(--color-indigo-500));
  --pm-accent-text: rgb(var(--color-indigo-300));
  --pm-accent-soft: rgb(var(--color-indigo-500) / 0.14);
  --pm-accent-line: rgb(var(--color-indigo-500) / 0.5);
  --pm-green: 52 211 153;
  --pm-amber: 251 191 36;
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; color: var(--pm-text);
  background: rgb(0 0 0 / 0.58);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease, background-color .22s ease, backdrop-filter .22s ease, -webkit-backdrop-filter .22s ease;
}
.pm[hidden] { display: none; }
.pm.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  background: rgb(0 0 0 / 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pm.is-hiding { pointer-events: none; }
.pm *, .pm *::before, .pm *::after { box-sizing: border-box; }

.pm-dialog {
  position: relative; width: 100%; max-width: 32rem; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 0.9rem; border: 1px solid rgb(255 255 255 / 0.12);
  background:
    radial-gradient(120% 70% at 0% 0%, rgb(var(--color-indigo-500) / 0.16), transparent 55%),
    linear-gradient(180deg, rgb(var(--color-voon-card) / 0.97) 0%, rgb(var(--color-voon-900) / 0.98) 100%);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.55);
  padding: 1.5rem;
  outline: none;
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity .22s ease, transform .22s ease;
}
.pm.is-visible .pm-dialog { opacity: 1; transform: none; }

.pm-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; border: 0;
  background: transparent; color: rgb(255 255 255 / 0.78); font-size: 1.25rem; cursor: pointer;
  transition: transform .2s ease, color .15s ease, background-color .15s ease;
}
.pm-close:hover { transform: rotate(90deg); color: #fff; background: rgb(255 255 255 / 0.06); }

.pm-head { padding-right: 2.75rem; }
.pm-title { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 800; color: #f5f5f5; letter-spacing: 0.01em; }
.pm-subtitle { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--pm-muted); }

.pm-view { margin-top: 1.25rem; }
.pm-view[hidden] { display: none; }
.pm.is-visible .pm-view { animation: pm-view-in .2s ease-out; }
@keyframes pm-view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pm-section-title {
  margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pm-faint); outline: none;
}

.pm-editions { display: grid; gap: 0.6rem; }
.pm-edition {
  display: flex; align-items: center; gap: 0.9rem; width: 100%;
  padding: 0.9rem 1rem; border-radius: 0.75rem;
  border: 1px solid var(--pm-line); background: var(--pm-tile);
  color: var(--pm-text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.pm-edition:hover { border-color: var(--pm-accent-line); background: var(--pm-accent-soft); }
.pm-edition:active { transform: scale(0.99); }
.pm-edition.is-last { border-color: rgb(var(--color-indigo-500) / 0.35); }
.pm-edition-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.7rem;
  background: rgb(var(--color-indigo-500) / 0.16); color: var(--pm-accent-text); font-size: 1.35rem;
}
.pm-edition-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.pm-edition-name { font-size: 1rem; font-weight: 700; color: #f5f5f5; }
.pm-edition-meta { font-size: 0.78rem; color: var(--pm-muted); }
.pm-edition-last {
  flex: 0 0 auto; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid rgb(var(--color-indigo-400) / 0.4); color: var(--pm-accent-text);
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pm-edition-last[hidden] { display: none; }
.pm-edition-arrow { flex: 0 0 auto; color: rgb(255 255 255 / 0.35); transition: transform .15s ease, color .15s ease; }
.pm-edition:hover .pm-edition-arrow { color: var(--pm-accent-text); transform: translateX(2px); }

.pm-online { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.15rem; font-size: 0.78rem; color: var(--pm-muted); }
.pm-online strong { color: #fff; font-variant-numeric: tabular-nums; }

.pm-view-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.pm-view-head .pm-online { margin-top: 0; margin-left: auto; }
.pm-back {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 2rem; padding: 0 0.75rem;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.14); background: transparent;
  color: rgb(255 255 255 / 0.75); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pm-back:hover { color: #fff; border-color: rgb(255 255 255 / 0.3); }
.pm-view-title { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; color: #f5f5f5; outline: none; }
.pm-view-title i { color: var(--pm-accent-text); }

.pm-fields { display: grid; gap: 0.6rem; }
@media (min-width: 480px) { .pm-fields { grid-template-columns: minmax(0, 1fr) auto; } }
.pm-field-value { white-space: nowrap; }
.pm-field--port .pm-field-value { flex: 0 0 auto; min-width: 3.5ch; }

.pm-field-label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pm-faint); }
.pm-field-row {
  display: flex; align-items: stretch; gap: 0.5rem; padding: 0.35rem;
  border-radius: 0.75rem; border: 1px solid var(--pm-accent-line); background: rgb(var(--color-indigo-500) / 0.08);
}
.pm-field-value {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; font-weight: 600;
  color: #fff; overflow-wrap: anywhere; user-select: all;
}
.pm-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem;
  padding: 0.45rem 0.8rem; border: 0; border-radius: 0.55rem;
  background: var(--pm-fill); color: #fff;
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pm-copy:hover { background: var(--pm-fill-hover); }
.pm-copy.is-copied { background: rgb(var(--pm-green) / 0.18); color: rgb(var(--pm-green)); }

.pm-version { display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--pm-muted); }
.pm-version i { color: rgb(var(--pm-green)); }

.pm-view .pm-section-title { margin-top: 1.25rem; }
.pm-steps { counter-reset: pm-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pm-steps li {
  counter-increment: pm-step; position: relative;
  padding: 0.6rem 0.8rem 0.6rem 3rem; border-radius: 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.06); background: var(--pm-tile);
  font-size: 0.86rem; line-height: 1.5; color: var(--pm-text);
}
.pm-steps li::before {
  content: counter(pm-step); position: absolute; left: 0.7rem; top: 0.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.55rem; height: 1.55rem; border-radius: 0.45rem;
  background: rgb(var(--color-indigo-500) / 0.18); color: var(--pm-accent-text); font-size: 0.75rem; font-weight: 700;
}
.pm-steps strong { color: #fff; }
.pm-steps code { padding: 0.08rem 0.35rem; border-radius: 0.35rem; background: rgb(255 255 255 / 0.08); color: #fff; font-size: 0.85em; overflow-wrap: anywhere; }

.pm-note {
  display: flex; gap: 0.7rem; margin: 0.9rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.75rem;
  background: rgb(var(--pm-amber) / 0.08); border: 1px solid rgb(var(--pm-amber) / 0.25);
  font-size: 0.8rem; line-height: 1.5; color: var(--pm-text);
}
.pm-note i { color: rgb(var(--pm-amber)); margin-top: 0.2rem; }
.pm-note strong { display: block; color: #fff; font-size: 0.82rem; }

.pm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--pm-line); }
.pm-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.6rem;
  padding: 0.55rem 0.9rem; border-radius: 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.04);
  color: var(--pm-text); font-size: 0.84rem; font-weight: 600; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.pm-link:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.24); color: #fff; }
.pm-link--discord:hover { background: #5865f2; border-color: #5865f2; }

.pm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.pm button:focus-visible, .pm a:focus-visible { outline: 2px solid rgb(var(--color-indigo-300)); outline-offset: 2px; }

@media (max-width: 479.98px) {
  .pm { padding: 0.75rem; }
  .pm-dialog { padding: 1.15rem 1rem; max-height: 90vh; }
  .pm-close { top: 0.65rem; right: 0.65rem; }
  .pm-edition { padding: 0.8rem; gap: 0.75rem; }
  .pm-edition-icon { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
  .pm-view-head .pm-online { margin-left: 0; width: 100%; }
  .pm-links { grid-template-columns: 1fr; }
  .pm-copy span { display: none; }
  .pm-copy { padding: 0.45rem 0.7rem; }
  .pm-copy.is-copied span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .pm, .pm-dialog, .pm-close, .pm-edition, .pm-edition-arrow, .pm-back, .pm-copy, .pm-link, .site-discord { transition: none; }
  .pm-dialog { transform: none; }
  .pm.is-visible .pm-view { animation: none; }
  .pm-close:hover, .pm-edition:active, .pm-edition:hover .pm-edition-arrow { transform: none; }
}

html.pm-open, html.pm-open body { overflow: hidden; }