:root {
  --bg: #0c0b0d;
  --surface-1: #141315;
  --surface-2: #1b1a1d;
  --surface-3: #232126;
  --surface-4: #2d2b31;
  --line-1: #232125;
  --line-2: #34313a;
  --plate: rgb(9 8 10 / 0.66);
  --plate-strong: rgb(7 6 8 / 0.84);
  --fg-1: #ecebef;
  --fg-2: #9c9ba4;
  --fg-3: #888893;
  --fg-4: #7e7d87;
  --weapon-rgb: 222 162 70;
  --vitality-rgb: 104 192 116;
  --spirit-rgb: 178 132 236;
  --ability-rgb: 230 122 178;
  --souls-rgb: 90 198 192;
  --nerf-rgb: 222 104 100;
  --weapon: rgb(var(--weapon-rgb));
  --vitality: rgb(var(--vitality-rgb));
  --spirit: rgb(var(--spirit-rgb));
  --ability: rgb(var(--ability-rgb));
  --souls: rgb(var(--souls-rgb));
  --buff: var(--vitality);
  --nerf: rgb(var(--nerf-rgb));
  --weapon-tint: rgb(var(--weapon-rgb) / 0.10);
  --weapon-edge: rgb(var(--weapon-rgb) / 0.30);
  --weapon-box: rgb(var(--weapon-rgb) / 0.14);
  --vitality-tint: rgb(var(--vitality-rgb) / 0.10);
  --vitality-edge: rgb(var(--vitality-rgb) / 0.30);
  --vitality-box: rgb(var(--vitality-rgb) / 0.14);
  --spirit-tint: rgb(var(--spirit-rgb) / 0.10);
  --spirit-edge: rgb(var(--spirit-rgb) / 0.30);
  --spirit-box: rgb(var(--spirit-rgb) / 0.14);
  --ability-tint: rgb(var(--ability-rgb) / 0.10);
  --ability-edge: rgb(var(--ability-rgb) / 0.30);
  --ability-box: rgb(var(--ability-rgb) / 0.14);
  --souls-tint: rgb(var(--souls-rgb) / 0.10);
  --souls-edge: rgb(var(--souls-rgb) / 0.30);
  --souls-box: rgb(var(--souls-rgb) / 0.14);
  --nerf-tint: rgb(var(--nerf-rgb) / 0.12);
  --font-sans:
    "Inter Variable",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --font-display:
    "Inter Tight Variable",
    "Inter Variable",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  --font-mono:
    ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    monospace;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;
  --text-5xl: 3.5rem;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --lh-display: 0.95;
  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-normal: 1.55;
  --tracking-display: -0.02em;
  --tracking-tight: -0.012em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 13px;
  --radius-pill: 999px;
  --container: 1280px;
  --bar-h: 58px;
  --control-h: 34px;
  --gutter: clamp(1rem, 3vw, 1.75rem);
  --pop-shadow: 0 12px 36px -8px rgb(0 0 0 / 0.6), 0 2px 8px rgb(0 0 0 / 0.4);
  --z-bar: 50;
  --z-pop: 100;
  --z-loader: 200;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
  scrollbar-color: var(--line-2) transparent;
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg-1);
  font-size: var(--text-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--fg-1);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--fg-1);
}
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-display);
}
h1 {
  font-size: var(--text-3xl);
}
h2 {
  font-size: var(--text-xl);
}
h3 {
  font-size: var(--text-lg);
}
h4 {
  font-size: var(--text-md);
}
p {
  line-height: var(--lh-normal);
}
small {
  font-size: var(--text-xs);
}
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.88em;
}
hr {
  border: 0;
  border-top: 1px solid var(--line-1);
}
table {
  width: 100%;
  border-collapse: collapse;
}
details summary {
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
:focus-visible {
  outline: 2px solid var(--spirit);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.phead {
  margin-bottom: var(--space-5);
}
.phead__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.phead__row h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.phead__n {
  font-size: var(--text-md);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.phead__intro {
  margin-top: var(--space-2);
  max-width: 84ch;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
::selection {
  background: rgb(var(--spirit-rgb) / 0.32);
  color: var(--fg-1);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-track {
  background: transparent;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.crumb a:hover {
  color: var(--fg-1);
}
.crumb__sep {
  color: var(--fg-4);
}
.sample__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.sample__tag::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-4);
}
.hx {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hx-top {
  margin-bottom: var(--space-5);
}
.hx-top__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.hx-top__row h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.hx-top__n {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.hx-top__lead {
  max-width: 72ch;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.extremes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.ext {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 var(--space-3) 0 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}
.ext:hover {
  background: var(--surface-2);
}
.ext img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
}
.ext__k {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ext__n {
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.ext__v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.ext--vitality .ext__v {
  color: var(--vitality);
}
.ext--weapon .ext__v {
  color: var(--weapon);
}
.ext--neutral .ext__v {
  color: var(--fg-1);
}
.hx-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.hx-tools__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.viewseg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.viewseg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--fg-3);
}
.viewseg button + button {
  border-left: 1px solid var(--line-1);
}
.viewseg button svg {
  width: 14px;
  height: 14px;
}
.viewseg button:hover {
  color: var(--fg-1);
}
.viewseg button.on {
  color: var(--fg-1);
  background: var(--surface-3);
}
.viewseg button small {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.hx-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--fg-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.hx-toggle:hover {
  color: var(--fg-1);
}
.hx-toggle.on {
  color: var(--fg-1);
}
.hx-toggle.on .dot {
  background: var(--fg-1);
}
.hx-toggle--np.on {
  color: var(--fg-1);
}
.hx-toggle--np.on .dot {
  background: var(--fg-1);
}
.hx-pane[hidden] {
  display: none;
}
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: var(--space-2);
  align-items: start;
}
.rcell {
  position: relative;
  min-width: 0;
}
.rcell[hidden] {
  display: none;
}
.rcell__pick {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--plate-strong);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.rcell:hover .rcell__pick,
.rcell__pick.has {
  opacity: 1;
}
@media (hover: none) {
  .rcell__pick {
    opacity: 1;
  }
}
.cmpbox {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--surface-3);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.cmpbox:checked {
  background: var(--spirit);
}
.cmpbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 7px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.htable-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-1);
}
.htable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.htable th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
  text-align: right;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.htable th:first-child {
  text-align: left;
}
.htable th[data-col]:hover {
  color: var(--fg-1);
}
.htable th.sorted {
  color: var(--fg-1);
}
.htable th .caret {
  opacity: 0;
  margin-left: 2px;
}
.htable th.sorted .caret {
  opacity: 1;
}
.htable td {
  padding: 5px var(--space-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  border-top: 1px solid var(--line-1);
  white-space: nowrap;
}
.htable td:first-child {
  text-align: left;
}
.htable tbody tr:hover td {
  background: var(--surface-2);
}
.htable__hero {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.htable__hero img {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
  flex-shrink: 0;
}
.htable__hname {
  font-weight: var(--fw-medium);
}
.htable__htags {
  display: block;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
}
.cellbar {
  position: relative;
}
.cellbar__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  border-radius: 2px;
  opacity: 0.16;
}
.cellbar__v {
  position: relative;
}
.cellbar--vitality .cellbar__fill {
  background: var(--vitality);
}
.cellbar--weapon .cellbar__fill {
  background: var(--weapon);
}
.cellbar--neutral .cellbar__fill {
  background: var(--fg-2);
}
.cdots {
  display: inline-flex;
  gap: 3px;
}
.cdot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--surface-4);
}
.cdot.on {
  background: var(--ability);
}
.wrv.wr--hi {
  color: var(--vitality);
}
.wrv.wr--lo {
  color: var(--nerf);
}
.cmptray {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
}
.cmptray.show {
  display: flex;
}
.cmptray__items {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.cmptray__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px 0 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.cmptray__chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.cmptray__chip button {
  color: var(--fg-3);
  display: inline-flex;
}
.cmptray__chip button:hover {
  color: var(--fg-1);
}
.cmptray__hint {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.cmptray__go {
  height: 28px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-4);
  color: var(--fg-1);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.cmptray__go:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cmptray__clear {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.cmptray__clear:hover {
  color: var(--fg-1);
}
.hx-compare[hidden] {
  display: none;
}
.cmpgrid {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-1);
}
.cmptable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cmptable th,
.cmptable td {
  padding: var(--space-2) var(--space-3);
  text-align: center;
  border-top: 1px solid var(--line-1);
  white-space: nowrap;
}
.cmptable thead th {
  border-top: none;
}
.cmptable tbody th {
  text-align: left;
  color: var(--fg-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.cmptable__hero {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cmptable__hero img {
  width: 56px;
  height: 70px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
}
.cmptable__hero span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.cmptable td {
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.cmptable td.best {
  color: var(--vitality);
  font-weight: var(--fw-semibold);
}
.hx-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.hpage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hhead {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hhead__case {
  position: relative;
  min-height: 208px;
  background: var(--surface-2);
  overflow: hidden;
}
.hhead__case > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hhead__case > .hmodel-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hhead__case.is-model-active > .hmodel-canvas {
  opacity: 1;
}
.hhead__case.is-model-active > img {
  opacity: 0;
}
.hhead__live {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--plate-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hhead__case.is-model-active .hhead__live {
  opacity: 1;
}
.hhead__live .dot {
  width: 5px;
  height: 5px;
  background: var(--vitality);
}
.hhead__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  min-width: 0;
}
.hh-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.hh-name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}
.hh-wr {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
}
.hh-wr b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.hh-wr span {
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.hh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.metachip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.metachip svg {
  width: 12px;
  height: 12px;
  color: var(--fg-3);
}
.metachip--weapon {
  color: var(--weapon);
}
.metachip--weapon svg {
  color: var(--weapon);
}
.cxpips {
  display: inline-flex;
  gap: 3px;
}
.cxpip {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--surface-4);
  transform: rotate(45deg);
}
.cxpip.on {
  background: var(--ability);
}
.hh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tagchip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.hh-play {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.hh-play .kw {
  color: var(--fg-1);
}
.kitrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-3);
}
.kiticon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  flex: none;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  transition: outline-color 0.12s ease;
  cursor: pointer;
}
.kiticon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kiticon > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-3);
}
.kiticon--weapon {
  background: rgb(var(--weapon-rgb) / 0.16);
  color: var(--weapon);
}
.kiticon--weapon svg {
  width: 56%;
  height: 56%;
}
.kiticon:hover,
.kiticon:focus-visible {
  outline-color: var(--fg-1);
}
.is-cue {
  box-shadow: 0 0 0 2px rgb(var(--spirit-rgb) / 0.8);
  border-radius: var(--radius);
}
.acard.is-cue {
  box-shadow: inset 0 0 0 2px rgb(var(--spirit-rgb) / 0.8);
}
.hbody {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.hcol {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.block {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.block__h {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.block__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.block__n {
  font-size: var(--text-xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.block__x {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.block__x:hover {
  color: var(--fg-1);
}
.akit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.acard {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.acard__acc {
  height: 2px;
  background: var(--line-2);
}
.acard--spirit .acard__acc {
  background: var(--spirit);
}
.acard--weapon .acard__acc {
  background: var(--weapon);
}
.acard--vitality .acard__acc {
  background: var(--vitality);
}
.acard__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}
.acard__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-3);
  flex-shrink: 0;
}
.acard__id {
  min-width: 0;
  flex: 1;
}
.acard__slot {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.acard__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}
.acard__cd {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.acard__cd-ic {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--fg-3);
}
.acard__cd-ic svg {
  width: 100%;
  height: 100%;
}
.acard__body {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.acard__act {
  display: none;
}
.acard__desc {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.acard__desc a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.acard .pop__stats {
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 5px;
}
.acard .statbox {
  padding: 5px 7px;
}
.acard .statbox__v {
  font-size: var(--text-md);
}
.aups {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: var(--space-1);
  border-top: 1px solid var(--line-1);
}
.aup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
}
.aup__ap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: var(--ability);
  font-variant-numeric: tabular-nums;
}
.aup__dia {
  width: 6px;
  height: 6px;
  background: var(--ability);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.aup__ap i {
  font-style: normal;
  font-size: 0.85em;
  font-weight: var(--fw-semibold);
  color: var(--fg-4);
}
.aup__t {
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aup__t .kw {
  color: var(--fg-2);
}
.skillorder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.so-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-2xs);
  color: var(--fg-2);
}
.so-step img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.so-sep {
  color: var(--fg-4);
}
.wpanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.wtop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.wtop__img {
  width: 84px;
  height: 48px;
  object-fit: contain;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  flex-shrink: 0;
}
.wtop__id {
  min-width: 0;
  flex: 1;
}
.wtop__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.wtop__arch {
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--weapon);
}
.wstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 5px;
}
.wstat {
  padding: 5px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.wstat__v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.wstat__v small {
  font-size: 0.6em;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  margin-left: 1px;
}
.wstat__l {
  margin-top: 1px;
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.wstat--amber .wstat__v {
  color: var(--weapon);
}
.wstat__sub {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.falloff {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.falloff__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--text-2xs);
}
.falloff__h b {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.falloff__h span {
  color: var(--fg-4);
}
.falloff__bar {
  position: relative;
  height: 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}
.falloff__full {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgb(var(--weapon-rgb) / 0.5);
}
.falloff__drop {
  position: absolute;
  top: 0;
  bottom: 0;
  background:
    linear-gradient(
      to right,
      rgb(var(--weapon-rgb) / 0.5),
      rgb(var(--weapon-rgb) / 0.1));
}
.falloff__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.melee {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.melee__k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.melee__g {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--fg-3);
}
.melee__g svg {
  width: 100%;
  height: 100%;
}
.mbadge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.mbadge b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.build {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.build__lean {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.build__lean b {
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}
.bphase {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-1);
}
.bphase__k {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bphase__k b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.bphase__cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-2xs);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.bphase__cost .dot {
  width: 5px;
  height: 5px;
}
.bphase__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bphase__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bphase__items .itile {
  width: 56px;
  flex: none;
}
.bphase__items .itile__name {
  font-size: var(--text-2xs);
}
.bphase__note {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.bphase__note .kw {
  color: var(--fg-2);
}
.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.radar {
  width: 100%;
  max-width: 230px;
  margin: 0 auto;
}
.radar svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.radar__grid {
  fill: none;
  stroke: var(--line-2);
}
.radar__spoke {
  stroke: var(--line-1);
}
.radar__area {
  fill: rgb(var(--spirit-rgb) / 0.16);
  stroke: var(--spirit);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.radar__pt {
  fill: var(--spirit);
}
.radar__axis {
  fill: var(--fg-3);
  font-size: 9px;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.radar__axisv {
  fill: var(--fg-1);
  font-size: 9px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.statbars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sb {
  display: grid;
  grid-template-columns: 11ch minmax(40px, 1fr) 5.5ch;
  align-items: center;
  gap: var(--space-2);
}
.sb__l {
  font-size: var(--text-xs);
  color: var(--fg-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb__track {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.sb__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  background: var(--fg-3);
}
.sb--vitality .sb__fill {
  background: var(--vitality);
}
.sb--weapon .sb__fill {
  background: var(--weapon);
}
.sb--spirit .sb__fill {
  background: var(--spirit);
}
.sb--movement .sb__fill {
  background: var(--souls);
}
.sb__v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.mupcol__h {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.mupcol--strong .mupcol__h {
  color: var(--vitality);
}
.mupcol--weak .mupcol__h {
  color: var(--nerf);
}
.mup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 4px;
  border-radius: var(--radius-sm);
}
.mup:hover {
  background: var(--surface-2);
}
.mup img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
  flex-shrink: 0;
}
.mup__name {
  font-size: var(--text-xs);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mup__wr {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.mupcol--strong .mup__wr {
  color: var(--vitality);
}
.mupcol--weak .mup__wr {
  color: var(--nerf);
}
.lore p {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.lore p + p {
  margin-top: var(--space-2);
}
.upd {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.upd > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.upd > summary::-webkit-details-marker {
  display: none;
}
.upd__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.upd__n {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.upd__chev {
  margin-left: auto;
  color: var(--fg-3);
  transition: transform 0.15s ease;
}
.upd[open] .upd__chev {
  transform: rotate(180deg);
}
.upd__body {
  padding: 0 var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.uhrow__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.uhrow__t {
  font-size: var(--text-sm);
  color: var(--fg-1);
  font-weight: var(--fw-medium);
}
.uhrow__d {
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.uhrow__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.uhrow__list li {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  padding-left: var(--space-3);
  position: relative;
}
.uhrow__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fg-4);
}
.hraw {
  margin-top: var(--space-1);
}
@media (max-width: 1040px) {
  .hbody {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .hhead {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .hhead__case {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .hhead__case > img {
    object-position: center 22%;
  }
  .hhead__main {
    padding: var(--space-4);
  }
  .hh-name {
    font-size: var(--text-2xl);
  }
  .hh-wr {
    margin-left: 0;
  }
  .kitrow {
    margin-top: var(--space-3);
  }
  .akit {
    grid-template-columns: 1fr;
  }
  .hx-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hx-tools::-webkit-scrollbar {
    display: none;
  }
  .viewseg,
  .bar-select,
  .hx-toggle {
    flex-shrink: 0;
  }
  .roster {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media (max-width: 460px) {
  .roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mups {
    grid-template-columns: 1fr;
  }
}
.hfaq__item {
  padding: var(--space-2) 0;
}
.hfaq__item + .hfaq__item {
  border-top: 1px solid var(--line-1);
}
.hfaq__q {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  color: var(--fg-1);
  margin-bottom: 3px;
}
.hfaq__item .mq__q {
  padding: 0;
}

.v-neutral {
  color: var(--fg-1);
}
.v-movement {
  color: var(--souls);
}
.souls {
  color: var(--souls);
}
.is-hi {
  color: var(--vitality);
}
.is-lo {
  color: var(--nerf);
}
.statbox--movement {
  background: rgb(var(--souls-rgb) / 0.10);
}
.statbox--movement .statbox__g,
.statbox--movement .statbox__v {
  color: var(--souls);
}
.ix-head {
  margin-bottom: var(--space-4);
}
.ix-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.ix-head__row h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.ix-head__facts {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.ix-head__facts b {
  color: var(--fg-2);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ix-head__sep {
  color: var(--fg-4);
  margin: 0 2px;
}
.ix {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ix-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.ix-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ix:not(.ix--table) .ix-cat {
  display: none;
}
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.seg button + button {
  border-left: 1px solid var(--line-1);
}
.seg button svg {
  width: 14px;
  height: 14px;
}
.seg button:hover {
  color: var(--fg-1);
}
.seg button.on {
  color: var(--fg-1);
  background: var(--surface-3);
}
.sel {
  height: var(--control-h);
  padding: 0 26px 0 var(--space-3);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: var(--text-md);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6b75' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sel:hover {
  color: var(--fg-1);
  background-color: var(--surface-3);
}
.sel--sort {
  margin-left: auto;
}
.ix-pane[hidden] {
  display: none;
}
.ix-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.ix-note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-4);
  line-height: var(--lh-snug);
}
.iwrap {
  display: contents;
}
.iwrap[hidden] {
  display: none;
}
.board.is-blank {
  display: none;
}
.itbl-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-1);
}
.itbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.itbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
  text-align: right;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.itbl th[data-col]:hover {
  color: var(--fg-1);
}
.itbl th.sorted {
  color: var(--fg-1);
}
.itbl th .caret {
  opacity: 0;
  margin-left: 2px;
}
.itbl th.sorted .caret {
  opacity: 1;
}
.itbl th:first-child,
.itbl th.itbl__stath,
.itbl th.itbl__heroh {
  text-align: left;
  cursor: default;
}
.itbl td {
  padding: 6px var(--space-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  border-top: 1px solid var(--line-1);
  white-space: nowrap;
}
.itbl tbody tr:hover td {
  background: var(--surface-2);
}
.itbl tbody tr[hidden] {
  display: none;
}
.itbl__item {
  text-align: left;
}
.itbl__item a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.itbl__dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}
.itbl__item img {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-3);
  flex-shrink: 0;
}
.itbl__name {
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}
.itbl__item:hover .itbl__name {
  color: var(--fg-1);
}
.itbl__tier {
  margin-left: 2px;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  flex-shrink: 0;
}
.itbl__gives {
  text-align: left;
  color: var(--fg-3);
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.itbl__gives b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.itbl__cost {
  position: relative;
}
.itbl__bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 58%;
  border-radius: 2px;
  background: var(--souls);
  opacity: 0.14;
}
.itbl__cost .souls {
  position: relative;
  font-weight: var(--fw-semibold);
}
.itbl__hero {
  text-align: left;
  color: var(--fg-2);
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ihead {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.ihead__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--surface-3);
  flex-shrink: 0;
}
.ihead.is-weapon .ihead__icon {
  background: rgb(var(--weapon-rgb) / 0.14);
}
.ihead.is-vitality .ihead__icon {
  background: rgb(var(--vitality-rgb) / 0.14);
}
.ihead.is-spirit .ihead__icon {
  background: rgb(var(--spirit-rgb) / 0.14);
}
.ihead__icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.ihead__ph {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface-4);
}
.ihead__id {
  min-width: 0;
}
.ihead__name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.ihead__meta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.imeta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--fw-medium);
}
.imeta .dot {
  width: 6px;
  height: 6px;
}
.imeta--weapon {
  color: var(--weapon);
}
.imeta--vitality {
  color: var(--vitality);
}
.imeta--spirit {
  color: var(--spirit);
}
.imeta--act-active {
  color: var(--weapon);
}
.imeta--act-imbue {
  color: var(--spirit);
}
.imeta__sep {
  color: var(--fg-4);
}
.ihead__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.ihead__cost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.ihead__cost .dot {
  width: 7px;
  height: 7px;
}
.ihead__timings {
  display: inline-flex;
  gap: 6px;
}
.itiming {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.itiming__g {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--fg-4);
}
.itiming__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.idash {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  grid-auto-flow: row dense;
  align-items: start;
}
.icard {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.icard--effect {
  grid-column: span 6;
}
.icard--effect.is-solo {
  grid-column: span 3;
}
.icard--heroes {
  grid-column: span 3;
}
.icard--perf {
  grid-column: span 3;
}
.icard--value {
  grid-column: span 2;
}
.icard--tree {
  grid-column: span 2;
}
.icard--scale {
  grid-column: span 2;
}
.icard--mech {
  grid-column: span 3;
}
.icard--patch {
  grid-column: span 3;
}
.icard__h {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.icard__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.icard__hint {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.icard__more {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.icard__more:hover {
  color: var(--fg-1);
}
.sample__tag {
  margin-left: auto;
}
.effect {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.effect--solo {
  grid-template-columns: 1fr;
}
.effect__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.effect__lead {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.effect__lead a,
.effsec__desc a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.effsec {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.effsec__h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.effsec__cd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.effsec__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.effect__hint {
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--fg-4);
  line-height: var(--lh-snug);
}
.effect__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-2);
  align-content: start;
}
.bestwith {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.bestwith:hover {
  background: var(--surface-3);
}
.bestwith img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
}
.bestwith__txt {
  font-size: var(--text-sm);
  color: var(--fg-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bestwith__txt b {
  color: var(--fg-3);
  font-weight: var(--fw-semibold);
}
.bestwith__wr {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.bestwith__wr small {
  font-size: 0.6em;
  font-weight: var(--fw-semibold);
  margin-left: 1px;
}
.herolist {
  display: flex;
  flex-direction: column;
}
.herorow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) minmax(64px, 90px) 3.5ch;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
}
.herorow + .herorow {
  border-top: 1px solid var(--line-1);
}
.herorow:hover .herorow__n {
  color: var(--fg-1);
}
.herorow__ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
}
.herorow__n {
  font-size: var(--text-sm);
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.herorow__bar {
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}
.herorow__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--fg-3);
  opacity: 0.5;
}
.herorow__bv {
  position: relative;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
}
.herorow__wr {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  text-align: right;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.herolist__foot {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.perfstats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.pstat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.pstat__v {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-xl);
  line-height: 1.05;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.pstat__v small {
  font-size: 0.5em;
  font-weight: var(--fw-bold);
  color: var(--fg-3);
}
.pstat__l {
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.itrend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.itrend__h {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.itrend__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  align-items: end;
  height: 60px;
}
.itrend__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}
.itrend__bar {
  width: 100%;
  max-width: 20px;
  border-radius: 3px 3px 0 0;
  background: var(--spirit);
  opacity: 0.5;
}
.itrend__col:last-child .itrend__bar {
  opacity: 0.85;
}
.itrend__x {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.costline {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.costline span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.costline__n {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.costline__n i {
  font-style: normal;
  color: var(--fg-4);
  font-weight: var(--fw-semibold);
}
.ieff {
  display: flex;
  flex-direction: column;
}
.effrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 0;
}
.effrow + .effrow {
  border-top: 1px solid var(--line-1);
}
.effrow__l {
  font-size: var(--text-sm);
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.effrow__v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.effrow__s {
  margin-left: 3px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--spirit);
}
.effrow__per {
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.effrow__per i {
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  font-weight: var(--fw-semibold);
  margin-left: 1px;
}
.effrow--weapon .effrow__per {
  color: var(--weapon);
}
.effrow--vitality .effrow__per {
  color: var(--vitality);
}
.effrow--spirit .effrow__per {
  color: var(--spirit);
}
.effrow--movement .effrow__per {
  color: var(--souls);
}
.itree {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.itree__step {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.itree__step--self {
  position: relative;
}
.itree__lbl {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.itree__row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ichipitem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-2) 0 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.ichipitem:hover {
  background: var(--surface-3);
}
.ichipitem img {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-3);
  flex-shrink: 0;
}
.ichipitem__n {
  font-weight: var(--fw-medium);
}
.ichipitem__c {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.ichipitem__c::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--souls);
}
.ichipitem--self {
  background: var(--surface-3);
}
.ichipitem--self .ichipitem__n {
  font-weight: var(--fw-bold);
}
.iscale {
  display: flex;
  flex-direction: column;
}
.scalerow {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 0;
}
.scalerow + .scalerow {
  border-top: 1px solid var(--line-1);
}
.scalerow__l {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.scalerow__v {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.scalerow__s {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--spirit);
}
.ilinks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ilink {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.ilink:hover {
  background: var(--surface-3);
  color: var(--fg-1);
}
.patchlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.patchrow__h {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.patchrow__h span {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  flex-shrink: 0;
}
.patchrow__h:hover {
  color: var(--fg-1);
}
.patchrow__list {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.patchrow__list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.patchrow__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fg-4);
}
.hraw {
  margin-top: var(--space-1);
}
.hraw__body {
  gap: var(--space-4);
}
.hraw__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.hraw__grid h4,
.hraw__body h4 {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--space-2);
}
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  font-size: var(--text-xs);
}
.kv dt {
  color: var(--fg-3);
}
.kv dd {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rawtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.rawtable th {
  text-align: left;
  padding: 4px var(--space-2);
  color: var(--fg-3);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-2xs);
}
.rawtable td {
  padding: 4px var(--space-2);
  border-top: 1px solid var(--line-1);
  color: var(--fg-2);
  vertical-align: top;
}
.rawtable td code,
.kv code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-3);
}
html.idlg-open {
  overflow: hidden;
}
.idlg {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.idlg[hidden] {
  display: none;
}
.idlg__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(6 5 7 / 0.7);
}
.idlg__panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: min(90vh, 880px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-shadow);
  overflow: hidden;
}
.idlg__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  height: 44px;
  padding: 0 var(--space-3);
  flex-shrink: 0;
}
.idlg__full {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.idlg__full:hover {
  color: var(--fg-1);
}
.idlg__close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--fg-2);
}
.idlg__close:hover {
  background: var(--surface-4);
  color: var(--fg-1);
}
.idlg__scroll {
  overflow-y: auto;
  padding: 0 var(--space-5) var(--space-5);
  -webkit-overflow-scrolling: touch;
}
.idlg__loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: var(--bg);
}
.idlg.is-loading .idlg__loading {
  display: grid;
}
.idlg .crumb {
  display: none;
}
.idlg #itemdoc {
  gap: var(--space-3);
}
@media (max-width: 980px) {
  .idash {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .icard {
    grid-column: span 1;
  }
  .icard--effect,
  .icard--heroes {
    grid-column: span 2;
  }
  .icard--effect.is-solo {
    grid-column: span 1;
  }
}
@media (max-width: 760px) {
  .ihead {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .ihead__icon {
    width: 48px;
    height: 48px;
  }
  .ihead__icon img {
    width: 38px;
    height: 38px;
  }
  .ihead__right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .ihead__name {
    font-size: var(--text-xl);
  }
  .effect {
    grid-template-columns: 1fr;
  }
  .sel--sort {
    margin-left: 0;
  }
}
@media (max-width: 620px) {
  .idash {
    grid-template-columns: 1fr;
  }
  .icard--effect,
  .icard--heroes {
    grid-column: span 1;
  }
  .tcol__grid {
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  }
}
.icard--guide {
  grid-column: span 6;
}
@media (max-width: 900px) {
  .icard--guide {
    grid-column: span 2;
  }
}
@media (max-width: 560px) {
  .icard--guide {
    grid-column: span 1;
  }
}

.mlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mlist__head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.mlist__lead {
  margin-top: var(--space-1);
  max-width: 64ch;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.mlist__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.mlist__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.mpane[hidden] {
  display: none;
}
.mempty {
  padding: var(--space-8);
  text-align: center;
  color: var(--fg-3);
  font-size: var(--text-sm);
}
.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.mcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.mcard:hover {
  background: var(--surface-2);
}
.mcard[hidden] {
  display: none;
}
.mcard__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
}
.mcard__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mcard__cat .dot {
  background: var(--fg-4);
}
.mcard__thumbs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.mthumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
}
.mcard__more {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.mcard__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}
.mcard__d {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.jstep[hidden] {
  display: none;
}
.jstep__h {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.jstep__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  color: var(--fg-2);
  flex-shrink: 0;
}
.jstep__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.jstep__t:hover {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.jstep__n {
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.jstep__goal {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
.mgroup {
  margin-bottom: var(--space-6);
}
.mgroup[hidden] {
  display: none;
}
.mgroup__h {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.mgroup__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.mgroup__n {
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.mpage {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mhead {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mhead__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mhead__kicker .dot {
  background: var(--fg-4);
}
.mhead__kicker .imeta__sep {
  color: var(--fg-4);
}
.mhead__name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-3xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.mlead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.mlead__txt {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.mlead__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  max-width: 22ch;
  flex-shrink: 0;
}
.mlead__v {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.mlead__v.souls {
  color: var(--souls);
}
.mlead__l {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.mbody {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.mcol {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.mprose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mprose p {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.mprose a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.mprose a:hover {
  text-decoration-color: var(--fg-3);
}
.msec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
}
.msec__h {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.mplay {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mplay__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.mplay__i {
  margin-top: 3px;
  width: 14px;
  height: 14px;
  color: var(--fg-3);
}
.mplay__i svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mnote {
  font-size: var(--text-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.mnote--rework {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
}
.mnote--rework b {
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}
.mref {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mref__grp {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mref__h {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.refrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: var(--text-sm);
}
.refrow__l {
  color: var(--fg-2);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.refrow__v {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.refrow__v.souls {
  color: var(--souls);
}
.refsw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgb(255 255 255 / 0.12);
}
.mrel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mrel__grp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.mrel__h {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mrel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mq {
  display: flex;
  flex-direction: column;
}
.mq__q {
  padding: 6px 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.mq__q + .mq__q {
  border-top: 1px solid var(--line-1);
}
.mq__q a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.rcalc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.rcalc__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rcalc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  align-items: center;
  gap: var(--space-2);
}
.rcalc__lb {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.rcalc__row--weapon .rcalc__lb {
  color: var(--weapon);
}
.rcalc__row--spirit .rcalc__lb {
  color: var(--spirit);
}
.rcalc__row--shred .rcalc__lb {
  color: var(--nerf);
}
.rcalc__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.rcalc__field input {
  width: 100%;
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  background: none;
  border: none;
  -moz-appearance: textfield;
}
.rcalc__field input::-webkit-outer-spin-button,
.rcalc__field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rcalc__field input:focus {
  outline: none;
}
.rcalc__field i {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--fg-4);
}
.rcalc__out {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rcalc__cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.rcalc__v {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.rcalc__l {
  font-size: var(--text-2xs);
  color: var(--fg-3);
  text-align: right;
}
.rcalc__formula {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.ccbars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ccbar {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}
.ccbar__l {
  font-size: var(--text-sm);
  color: var(--fg-1);
  white-space: nowrap;
}
.ccbar__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.ccbar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-pill);
  background: var(--fg-3);
}
.ccbar__v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.ccbar__ex {
  grid-column: 2 / -1;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  margin-top: -2px;
}
.mtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.mtable th {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.mtable th.num,
.mtable td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mtable td {
  padding: 6px var(--space-2);
  border-top: 1px solid var(--line-1);
  color: var(--fg-2);
  vertical-align: top;
  line-height: var(--lh-snug);
}
.mtable td.k {
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.mtable__ap {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.mtable__ex {
  color: var(--fg-3);
}
.ochain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-1);
}
.onode {
  flex: 1 1 96px;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.onode--final {
  background: var(--surface-3);
}
.onode__n {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.onode__s {
  display: flex;
  flex-wrap: wrap;
  gap: 1px var(--space-2);
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.onode__b {
  color: var(--souls);
}
.ochain__arr {
  align-self: center;
  color: var(--fg-4);
  flex-shrink: 0;
}
.idlg #mechdoc {
  gap: var(--space-3);
}
@media (max-width: 920px) {
  .mbody {
    grid-template-columns: 1fr;
  }
  .rcalc {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .mlist__filters {
    margin-left: 0;
    width: 100%;
  }
  .mhead__name {
    font-size: var(--text-2xl);
  }
  .mlead {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4);
  }
  .mlead__stat {
    align-items: flex-start;
    text-align: left;
  }
  .mlead__txt {
    font-size: var(--text-lg);
  }
  .mlead__v {
    font-size: var(--text-3xl);
  }
}
.mfig {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 240px;
}
.mfig img {
  width: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

.lb-reg {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: 4px;
  background: var(--surface-1);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}
.lb-reg__b {
  flex-shrink: 0;
  height: 32px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.lb-reg__b:hover {
  color: var(--fg-1);
}
.lb-reg__b.on {
  color: var(--fg-1);
  background: var(--surface-3);
}
.icard--lbmeta {
  grid-column: span 3;
}
.icard--lbladder {
  grid-column: span 3;
}
.icard--lbmatrix {
  grid-column: span 3;
}
.icard--lbplayers {
  grid-column: span 3;
}
.icard--lbhow {
  grid-column: span 6;
}
.lb-dash [hidden] {
  display: none;
}
.lb-dash {
  align-items: stretch;
}
.icard--lbmeta .herolist,
.icard--lbladder .lb-ladder {
  flex: 1;
}
.lb-ladder {
  display: flex;
  flex-direction: column;
}
.lb-rung {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 0;
}
.lb-rung + .lb-rung {
  border-top: 1px solid var(--line-1);
}
.lb-rung__b {
  width: 26px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.lb-rung__b--ph {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.lb-rung__n {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.lb-rung__here {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.lb-rung.is-top {
  margin: 0 calc(-1 * var(--space-2));
  padding: 6px var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.lb-rung.is-top + .lb-rung {
  border-top: 0;
}
.lb-rung.is-top .lb-rung__n {
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}
.lb-mx-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.lb-mx {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
}
.lb-mx__corner,
.lb-mx__rh {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 0 var(--space-1) 5px;
  white-space: nowrap;
}
.lb-mx__corner {
  text-align: left;
  width: 38%;
}
.lb-mx__rh {
  text-align: center;
}
.lb-mx__rh.is-activecol {
  color: var(--fg-1);
}
.lb-mx__hero {
  text-align: left;
}
.lb-mx__hero a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: var(--space-2);
  min-width: 0;
}
.lb-mx__hero img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
  flex-shrink: 0;
}
.lb-mx__hero span {
  font-size: var(--text-sm);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-mx__hero a:hover span {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.lb-mx__cell {
  text-align: center;
  padding: 7px 2px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.lb-mx__cell.is-lead {
  color: var(--fg-1);
  font-weight: var(--fw-bold);
}
.lb-mx__cell.is-activecol {
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg-1);
}
.lb-find {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  margin-left: auto;
  padding: 0 var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-pill);
  color: var(--fg-3);
}
.lb-find input {
  width: 6.5rem;
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.lb-find input::placeholder {
  color: var(--fg-4);
}
.lb-players {
  flex: 1;
  min-height: 0;
  max-height: 460px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 0 calc(-1 * var(--space-1));
}
.lb-prow {
  display: grid;
  grid-template-columns: 2.1rem 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-1);
  border-radius: var(--radius-sm);
}
.lb-prow:hover {
  background: var(--surface-2);
}
.lb-prow__rk {
  text-align: right;
  font-size: var(--text-sm);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.lb-prow__b {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.lb-prow__id {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.lb-prow__flag {
  flex-shrink: 0;
  font-size: 0.95em;
  line-height: 1;
}
.lb-prow__n {
  font-size: var(--text-sm);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
a.lb-prow__n:hover {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.lb-prow__stream {
  flex-shrink: 0;
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--fg-4);
}
.lb-prow__stream svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lb-prow:hover .lb-prow__stream {
  color: var(--fg-2);
}
.lb-prow__mains {
  display: flex;
  gap: 4px;
}
.lb-prow__m {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
  flex-shrink: 0;
}
.lb-prow__m img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.lb-prow__m:hover {
  outline: 1px solid var(--fg-2);
  outline-offset: -1px;
}
.lb-players__empty {
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.lb-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-how li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.lb-how li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-4);
}
.lb-api {
  font-family: var(--font-mono);
}
@media (max-width: 980px) {
  .icard--lbhow {
    grid-column: span 2;
  }
  .icard--lbmeta,
  .icard--lbladder,
  .icard--lbmatrix,
  .icard--lbplayers {
    grid-column: span 1;
  }
}
@media (max-width: 620px) {
  .icard--lbhow,
  .icard--lbmeta,
  .icard--lbladder,
  .icard--lbmatrix,
  .icard--lbplayers {
    grid-column: span 1;
  }
  .lb-reg {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lb-reg::-webkit-scrollbar {
    display: none;
  }
  .lb-players {
    max-height: 320px;
  }
}

.up-c {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.up-c__a {
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.up-c__a svg {
  width: 100%;
  height: 100%;
  display: block;
}
.up-c--buff {
  color: var(--buff);
}
.up-c--nerf {
  color: var(--nerf);
}
.pcount .pcount__a {
  display: inline-flex;
  width: 8px;
  height: 8px;
}
.pcount .pcount__a svg {
  width: 100%;
  height: 100%;
  display: block;
}
.up-feat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
}
.up-feat__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.up-feat__title:hover {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.up-feat__counts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.up-feat__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.up-time {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.up-month__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-1);
}
.up-month__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
  text-transform: capitalize;
}
.up-month__n {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.up-list {
  display: flex;
  flex-direction: column;
}
.up-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: var(--space-3);
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
}
.up-row:hover {
  background: var(--surface-1);
}
.up-row__date {
  font-size: var(--text-sm);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.up-row__title {
  font-size: var(--text-md);
  color: var(--fg-1);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-row:hover .up-row__title {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.up-row__mix {
  display: flex;
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-3);
}
.up-row__seg--buff {
  background: var(--buff);
}
.up-row__seg--nerf {
  background: var(--nerf);
}
.up-row__counts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}
.up-row__total {
  font-size: var(--text-sm);
  color: var(--fg-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.up-foot {
  margin-top: var(--space-8);
}
.up-foot__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.up-foot__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.up-foot__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fg-4);
}
.up-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.up-meta b {
  font-family: var(--font-display);
  color: var(--fg-2);
}
.up-meta__date {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.up-meta__chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.up-meta__chip--build {
  font-family: var(--font-mono);
  color: var(--fg-3);
}
.up-meta__sep {
  color: var(--line-2);
}
.chbar {
  position: sticky;
  top: var(--bar-h);
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: var(--space-2) 0;
  background: var(--bg);
}
.chfilter {
  display: inline-flex;
  gap: var(--space-1);
  padding: 4px;
  background: var(--surface-1);
  border-radius: var(--radius);
}
.chfilter__b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
}
.chfilter__b:hover {
  color: var(--fg-1);
}
.chfilter__b.on {
  background: var(--surface-3);
  color: var(--fg-1);
}
.chfilter__b--buff.on {
  color: var(--buff);
}
.chfilter__b--nerf.on {
  color: var(--nerf);
}
.chfilter__a {
  display: inline-flex;
  width: 9px;
  height: 9px;
}
.chfilter__a svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chfilter__n {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.chfilter__b.on .chfilter__n {
  color: currentColor;
  opacity: 0.7;
}
.up-src {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.up-src__k {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.up-src a {
  color: var(--fg-2);
}
.up-src a:hover {
  color: var(--fg-1);
}
.chwrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.chgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.chg {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.chg--general {
  grid-column: 1 / -1;
}
.chg__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-1);
}
.chg__ic {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-3);
  flex-shrink: 0;
}
.chg__ic--ph {
  background: var(--surface-3);
}
.chg__id {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.chg__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
a.chg__name:hover {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.chg__kind {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.chg__counts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
.chg__lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chg__lines--cols {
  column-width: 320px;
  column-gap: var(--space-6);
}
.chg__lines--cols .chline {
  break-inside: avoid;
}
.chline {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 2px 0;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.chline__m {
  flex: none;
  width: 10px;
  height: 10px;
  position: relative;
  top: 1px;
  color: var(--fg-4);
}
.chline__m svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chline__m--buff {
  color: var(--buff);
}
.chline__m--nerf {
  color: var(--nerf);
}
.chline__t {
  min-width: 0;
}
.chnum {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.chnum--buff {
  color: var(--buff);
}
.chnum--nerf {
  color: var(--nerf);
}
.chwrap[data-filter=buff] .chline:not(.is-buff) {
  display: none;
}
.chwrap[data-filter=nerf] .chline:not(.is-nerf) {
  display: none;
}
.chwrap[data-filter=buff] .chg:not(:has(.chline.is-buff)) {
  display: none;
}
.chwrap[data-filter=nerf] .chg:not(:has(.chline.is-nerf)) {
  display: none;
}
.up-api {
  margin-top: var(--space-6);
}
.news-up {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  align-items: stretch;
}
.news-up__feat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.news-up__feat:hover {
  background: var(--surface-2);
}
.news-up__k {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.news-up__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  line-height: var(--lh-tight);
}
.news-up__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.news-up__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.news-up__sh {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.news-up__sht {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-2);
}
.news-up__all {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.news-up__all:hover {
  color: var(--fg-1);
}
.news-up__list {
  display: flex;
  flex-direction: column;
}
.np-row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
}
.np-row:hover {
  background: var(--surface-2);
}
.np-row__date {
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.np-row__title {
  font-size: var(--text-sm);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-row:hover .np-row__title {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 2px;
}
.np-row__counts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.news-srcfilter {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: 4px;
  background: var(--surface-1);
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}
.news-srcfilter__b {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.news-srcfilter__b:hover {
  color: var(--fg-1);
}
.news-srcfilter__b.on {
  color: var(--fg-1);
  background: var(--surface-3);
}
.news-srcfilter__n {
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.news-feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-3);
}
.ncard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.ncard:hover {
  background: var(--surface-2);
}
.ncard__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ncard__src {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.ncard__src--official {
  color: var(--fg-1);
}
.ncard__date {
  font-size: var(--text-2xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.ncard__ext {
  display: inline-flex;
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--fg-4);
}
.ncard__ext svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ncard:hover .ncard__ext {
  color: var(--fg-2);
}
.ncard__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ncard__sum {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.narticle {
  max-width: 70ch;
  margin-inline: auto;
}
.narticle__head {
  margin: var(--space-2) 0 var(--space-6);
}
.narticle__k {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.narticle__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.narticle__date {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.narticle__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.narticle__body p {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--fg-2);
}
.narticle__src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-8);
  height: var(--control-h);
  padding: 0 var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.narticle__src:hover {
  background: var(--surface-3);
}
@media (max-width: 760px) {
  .narticle__title {
    font-size: var(--text-2xl);
  }
  .up-feat {
    padding: var(--space-4);
  }
  .up-feat__title {
    font-size: var(--text-lg);
  }
  .up-feat__date {
    margin-left: 0;
    width: 100%;
  }
  .up-row {
    grid-template-columns: minmax(0, 1fr) 44px auto 2rem;
    gap: var(--space-2);
  }
  .up-row__date {
    grid-column: 1 / -1;
    order: -1;
    text-align: left;
  }
  .chbar {
    top: 0;
  }
  .news-up {
    grid-template-columns: 1fr;
  }
  .news-up__title {
    font-size: var(--text-lg);
  }
}

.skn-official {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.skn-official__k {
  flex-shrink: 0;
  align-self: flex-start;
  height: 19px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.skn-official__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin-bottom: 4px;
}
.skn-official__txt p {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.skn-sub {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.skn-heroes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: var(--space-2);
}
.skn-hero {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.skn-hero__art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.skn-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.skn-hero:hover .skn-hero__art img {
  filter: brightness(1.1);
}
.skn-hero__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-2);
}
.skn-hero__n {
  font-size: var(--text-xs);
  color: var(--fg-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skn-hero:hover .skn-hero__n {
  color: var(--fg-1);
}
.skn-install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.skn-install__col {
  min-width: 0;
}
.skn-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.skn-src {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius);
}
.skn-src:hover {
  background: var(--surface-2);
}
.skn-src__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.skn-src__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.skn-src__tag {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.skn-src__ext {
  display: inline-flex;
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--fg-4);
}
.skn-src__ext svg {
  width: 100%;
  height: 100%;
  display: block;
}
.skn-src:hover .skn-src__ext {
  color: var(--fg-2);
}
.skn-src__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.skn-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.skn-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.skn-step__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.skn-step__t {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  padding-top: 1px;
}
.skn-step__t code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.skn-gotcha {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.skn-gotcha__g {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--weapon);
  position: relative;
  top: 2px;
}
.skn-gotcha__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.skn-safety {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.sknh-id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sknh-id__ic {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center top;
  background: var(--surface-3);
  flex-shrink: 0;
}
.sknh-id__ph {
  background: var(--surface-3);
}
.sknh-id__name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.sknh-id__back {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.sknh-id__back:hover {
  color: var(--fg-1);
}
.sknh-card--unofficial,
.sknh-card--official,
.sknh-card--install {
  grid-column: span 2;
}
.sknh-body {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.sknh-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}
.sknh-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.sknh-link:hover {
  background: var(--surface-3);
}
.sknh-link__g {
  display: inline-flex;
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: var(--fg-4);
}
.sknh-link__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sknh-link:hover .sknh-link__g {
  color: var(--fg-2);
}
@media (max-width: 760px) {
  .skn-official {
    flex-direction: column;
    gap: var(--space-2);
  }
  .skn-install {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .sknh-card--unofficial,
  .sknh-card--official,
  .sknh-card--install {
    grid-column: span 1;
  }
  .skn-heroes {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}

.art-mech {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.art-mech:hover {
  background: var(--surface-2);
}
.art-mech__ic {
  flex-shrink: 0;
  display: inline-flex;
  width: 26px;
  height: 26px;
  color: var(--fg-3);
}
.art-mech__ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.art-mech:hover .art-mech__ic {
  color: var(--fg-1);
}
.art-mech__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.art-mech__t {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.art-mech__n {
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.art-mech__d {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
.art-mech__cta {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.art-mech:hover .art-mech__cta {
  color: var(--fg-1);
}
.art-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}
.art-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.art-card:hover {
  background: var(--surface-2);
}
.art-card__tag {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.art-card__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.art-card__d {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-size: var(--text-2xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.art-card__sep {
  color: var(--line-2);
}
.art {
  max-width: 41rem;
  margin-inline: auto;
}
.art__crumb {
  justify-content: flex-start;
}
.art__head {
  margin: var(--space-2) 0 var(--space-6);
}
.art__tag {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.art__title {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.art__sub {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.art__meta {
  margin-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.art__sep {
  color: var(--line-2);
}
.art__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.art__p {
  font-size: 0.9375rem;
  line-height: 1.78;
  color: var(--fg-2);
}
.art__h {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.art__embed {
  margin: var(--space-2) 0;
}
.art__heroes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.art__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.art-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius);
  min-width: 0;
}
.art-item:hover {
  background: var(--surface-2);
}
.art-item__ic {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--surface-3);
  flex-shrink: 0;
}
.art-item__n {
  font-size: var(--text-sm);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.art-item__c {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.art-item__c .dot {
  width: 6px;
  height: 6px;
}
.art__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0;
}
@media (max-width: 620px) {
  .art-mech {
    flex-wrap: wrap;
  }
  .art-mech__cta {
    margin-left: 0;
  }
  .art__title {
    font-size: var(--text-2xl);
  }
}

.hcard {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.itile {
  content-visibility: auto;
  contain-intrinsic-size: auto 92px;
}
.htable tbody tr,
.itbl tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
}
.rtools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.rtools__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.rcount {
  font-size: var(--text-sm);
  color: var(--fg-3);
  min-width: 2ch;
  text-align: right;
}
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--fg-3);
}
.seg button + button {
  border-left: 1px solid var(--line-1);
}
.seg button small {
  color: var(--fg-3);
  font-size: var(--text-xs);
}
.seg button:hover {
  color: var(--fg-1);
}
.seg button.on {
  color: var(--fg-1);
  background: var(--surface-3);
}
.rtoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-h);
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--fg-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.rtoggle:hover {
  color: var(--fg-1);
}
.rtoggle.on {
  color: var(--fg-1);
}
.rtoggle.on .dot {
  background: var(--buff);
}
.rcell {
  min-width: 0;
}
.rcell[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .rtools {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rtools::-webkit-scrollbar {
    display: none;
  }
  .seg,
  .bar-select,
  .rtoggle {
    flex-shrink: 0;
  }
  .rtools__end {
    margin-left: var(--space-2);
  }
}
.hcard__art {
  position: relative;
}
.hcard__art > .hmodel-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hcard__art.is-model-active > .hmodel-canvas {
  opacity: 1;
}
.hcard__art.is-model-active > img {
  opacity: 0;
}
.hcard__art > .hcard__plate,
.hcard__art > .hcard__wr,
.hcard__art > .hcard__flag {
  z-index: 3;
}
.hmodel-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: hmodel-spin 0.7s linear infinite;
}
.hcard__art.is-model-loading > .hmodel-loader {
  opacity: 1;
}
@keyframes hmodel-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hcard__art > .hmodel-canvas {
    transition: none;
  }
  .hmodel-loader {
    animation: none;
  }
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main {
  flex: 1;
  width: 100%;
  padding-block: var(--space-6) var(--space-12);
}
.site-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  background: var(--bg);
}
.site-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--bar-h);
}
.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--fg-1);
  white-space: nowrap;
}
.brand__wm {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.brand__wm i {
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  letter-spacing: 0;
  text-transform: lowercase;
}
.brand:hover .brand__wm i {
  color: var(--fg-2);
}
.nav {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.nav a {
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.nav a:hover {
  color: var(--fg-1);
  background: var(--surface-2);
}
.nav a[aria-current=page] {
  color: var(--fg-1);
  background: var(--surface-2);
}
.bar-spacer {
  flex: 1;
}
.search {
  position: relative;
  flex-shrink: 1;
  min-width: 7rem;
  width: clamp(8rem, 22vw, 17rem);
}
.search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding-inline: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
}
.search__field:focus-within {
  background: var(--surface-3);
}
.search__icon {
  flex-shrink: 0;
  color: var(--fg-3);
}
.search input {
  width: 100%;
  font-size: var(--text-md);
  color: var(--fg-1);
}
.search input::placeholder {
  color: var(--fg-3);
}
.search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-pop);
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--pop-shadow);
}
.search__results[hidden] {
  display: none;
}
.search__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.search__result:hover {
  background: var(--surface-3);
}
.search__result img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.search__result-name {
  font-size: var(--text-md);
  color: var(--fg-1);
}
.search__result-kind {
  margin-left: auto;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}
.search__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.bar-select {
  flex-shrink: 0;
  height: var(--control-h);
  padding-inline: var(--space-3);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
  font-size: var(--text-md);
}
.bar-select:hover {
  color: var(--fg-1);
  background: var(--surface-3);
}
.eyebrow,
.kicker {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.muted {
  color: var(--fg-2);
}
.muted-3 {
  color: var(--fg-3);
}
.tnum {
  font-variant-numeric: tabular-nums;
}
.dnum {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--fg-3);
}
.dot--weapon {
  background: var(--weapon);
}
.dot--vitality {
  background: var(--vitality);
}
.dot--spirit {
  background: var(--spirit);
}
.dot--ability {
  background: var(--ability);
}
.dot--souls {
  background: var(--souls);
}
.v-weapon {
  color: var(--weapon);
}
.v-vitality {
  color: var(--vitality);
}
.v-spirit {
  color: var(--spirit);
}
.v-ability {
  color: var(--ability);
}
.v-souls {
  color: var(--souls);
}
.v-buff {
  color: var(--buff);
}
.v-nerf {
  color: var(--nerf);
}
.shead {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.shead h1,
.shead h2,
.shead__t {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.shead__n {
  font-size: var(--text-sm);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.shead__link {
  margin-left: auto;
  font-size: var(--text-sm);
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shead__link:hover {
  color: var(--fg-1);
}
.home-block {
  margin-bottom: var(--space-12);
}
.svc__lead {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.svc__p {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.svc__muted {
  color: var(--fg-3);
}
.svc__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.svc__build {
  font-size: var(--text-xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.pulse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.pulse__lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.pulse__k {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.pulse__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse__counts {
  display: inline-flex;
  gap: var(--space-2);
}
.pcount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.pcount--buff {
  color: var(--buff);
  background: var(--vitality-tint);
}
.pcount--nerf {
  color: var(--nerf);
  background: var(--nerf-tint);
}
.pcount__a {
  width: 8px;
  height: 8px;
  fill: currentColor;
  flex-shrink: 0;
}
.pulse__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.chip-e {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--space-2) 0 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.chip-e:hover {
  background: var(--surface-3);
}
.chip-e img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chip-e__dir {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
}
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.hcard {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  max-width: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-1);
}
.hcard__art {
  position: relative;
  height: 100%;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
}
.hcard__art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hcard__wr {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  height: 23px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  background: var(--plate-strong);
}
.hcard__wr-l {
  align-self: center;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}
.hcard__wr-v {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.hcard__wr-v small {
  font-size: 0.68em;
  font-weight: var(--fw-semibold);
  margin-left: 0.5px;
}
.hcard__wr.wr--hi .hcard__wr-v {
  color: var(--vitality);
}
.hcard__wr.wr--lo .hcard__wr-v {
  color: var(--nerf);
}
.hcard__flag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 23px;
  padding: 0 7px 0 6px;
  border-radius: var(--radius-sm);
  background: var(--plate-strong);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.hcard__flag-i {
  display: inline-flex;
  width: 9px;
  height: 9px;
}
.hcard__flag-i svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hcard__flag.is-buff {
  color: var(--buff);
}
.hcard__flag.is-nerf {
  color: var(--nerf);
}
.hcard__flag.is-mixed {
  color: var(--fg-2);
  padding: 0 6px;
}
.hcard__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--plate-strong);
  -webkit-mask-image:
    linear-gradient(
      to top,
      #000 72%,
      transparent);
  mask-image:
    linear-gradient(
      to top,
      #000 72%,
      transparent);
}
.hcard__name {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: var(--text-xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hcard__sub {
  position: relative;
  min-height: 24px;
  display: flex;
  align-items: center;
}
.hcard__role {
  max-width: 100%;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.16s ease;
}
.hcard__skills {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.hcard__kit {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.hskill {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: rgb(8 7 9 / 0.55);
  flex: none;
}
.hskill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hskill:hover {
  outline: 1px solid var(--fg-1);
  outline-offset: -1px;
}
.hskill--weapon {
  display: grid;
  place-items: center;
  background: rgb(8 7 9 / 0.7);
}
.hskill__g {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--weapon);
}
.hskill__g svg {
  width: 62%;
  height: 62%;
  display: block;
}
@media (hover: hover) {
  .hcard:hover .hcard__role {
    opacity: 0;
  }
  .hcard:hover .hcard__skills {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hcard__role,
  .hcard__skills {
    transition: none;
  }
}
.devph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  color: var(--fg-4);
}
.devph svg {
  width: 36%;
  height: 36%;
}
.shop {
  display: block;
}
.shop__tabs {
  display: none;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.vtab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  background: var(--surface-1);
  color: var(--fg-2);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
}
.vtab__g {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.vtab__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vtab__n {
  font-size: var(--text-2xs);
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
}
.vtab--weapon .vtab__g {
  color: var(--weapon);
}
.vtab--vitality .vtab__g {
  color: var(--vitality);
}
.vtab--spirit .vtab__g {
  color: var(--spirit);
}
.vtab--weapon.on {
  background: color-mix(in srgb, var(--weapon) 13%, var(--surface-1));
  color: var(--weapon);
}
.vtab--vitality.on {
  background: color-mix(in srgb, var(--vitality) 13%, var(--surface-1));
  color: var(--vitality);
}
.vtab--spirit.on {
  background: color-mix(in srgb, var(--spirit) 13%, var(--surface-1));
  color: var(--spirit);
}
.board {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.board:last-child {
  margin-bottom: 0;
}
.board--weapon {
  background: color-mix(in srgb, var(--weapon) 5%, var(--surface-1));
}
.board--vitality {
  background: color-mix(in srgb, var(--vitality) 5%, var(--surface-1));
}
.board--spirit {
  background: color-mix(in srgb, var(--spirit) 5%, var(--surface-1));
}
.board__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.board__g {
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.board__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.board__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}
.board__count {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.board--weapon .board__g,
.board--weapon .board__name {
  color: var(--weapon);
}
.board--vitality .board__g,
.board--vitality .board__name {
  color: var(--vitality);
}
.board--spirit .board__g,
.board--spirit .board__name {
  color: var(--spirit);
}
.board__tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
}
.tcol {
  min-width: 0;
}
.tcol__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--souls) 14%, transparent);
}
.tcol__cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.tcol__cost .dot {
  align-self: center;
  width: 6px;
  height: 6px;
}
.tcol__n {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-4);
}
.tcol__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: var(--space-2);
  align-content: start;
}
.itile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.itile__icon {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}
.itile__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.itile:hover .itile__name {
  color: var(--fg-1);
}
.itile__act {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.itile__act--active {
  background: var(--weapon);
}
.itile__act--imbue {
  background: var(--spirit);
}
.itile__name {
  width: 100%;
  font-size: var(--text-2xs);
  line-height: 1.18;
  color: var(--fg-2);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.itile--dev .itile__icon {
  display: grid;
  place-items: center;
  color: var(--fg-4);
}
.itile--dev .itile__icon svg {
  width: 42%;
  height: 42%;
}
.itile:hover .itile__icon {
  filter: brightness(1.12);
}
.board.is-focus .itile {
  opacity: 0.24;
}
.board.is-focus .itile.is-on,
.board.is-focus .itile.is-rel {
  opacity: 1;
}
.board.is-focus .itile.is-on .itile__name {
  color: var(--fg-1);
}
.board.is-focus .itile.is-rel .itile__name {
  color: var(--souls);
}
.mech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--space-3);
}
.mcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.mcard:hover {
  background: var(--surface-2);
}
.mcard__thumbs {
  display: flex;
  gap: 5px;
  margin-bottom: 2px;
}
.mthumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3);
}
.mcard__more {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.mcard__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}
.mcard__d {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.explore {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
  gap: var(--space-3);
}
.xcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border-radius: var(--radius);
}
.xcard:hover {
  background: var(--surface-2);
}
.xcard__h {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.xcard__ic {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.xcard__ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.xcard:hover .xcard__ic {
  color: var(--fg-1);
}
.xcard__t {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}
.xcard__d {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.datamine {
  margin-top: var(--space-10);
}
.datamine__sum {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
}
.datamine__sum::before {
  content: "{ }";
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}
.datamine__sumt {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}
.datamine__sumt b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
}
.datamine__sumt span {
  font-size: var(--text-xs);
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datamine__chev {
  margin-left: auto;
  color: var(--fg-3);
}
.datamine[open] .datamine__chev {
  transform: rotate(180deg);
}
.datamine__sum:hover .datamine__chev,
.datamine__sum:hover .datamine__sumt b {
  color: var(--fg-1);
}
.datamine__body {
  padding-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.datamine__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.metric {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
}
.metric b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.metric span {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.endpoints {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 1px var(--space-3);
}
.endpoint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
}
.endpoint:hover {
  background: var(--surface-1);
}
.endpoint__m {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  flex-shrink: 0;
}
.endpoint__p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.endpoint:hover .endpoint__p {
  color: var(--fg-1);
}
.endpoint__l {
  margin-left: auto;
  padding-left: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--fg-4);
  flex-shrink: 0;
}
.site-foot {
  background: var(--bg);
  margin-top: var(--space-16);
  border-top: 1px solid var(--line-1);
}
.site-foot__inner {
  padding-block: var(--space-10) var(--space-10);
}
.site-foot__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.1fr;
  gap: var(--space-6) var(--space-5);
}
.site-foot__brand {
  min-width: 0;
}
.site-foot__lead {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: var(--space-3) 0 0;
  max-width: 42ch;
}
.site-foot__note {
  font-size: var(--text-xs);
  color: var(--fg-3);
  margin: var(--space-2) 0 0;
}
.site-foot__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}
.site-foot__social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.site-foot__social a:hover {
  color: var(--fg-1);
}
.site-foot__social svg {
  color: var(--fg-3);
}
.site-foot__social a:hover svg {
  color: var(--fg-1);
}
.site-foot__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-foot__col h4 {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.site-foot__col a {
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.site-foot__col a:hover {
  color: var(--fg-1);
}
.site-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-1);
  font-size: var(--text-2xs);
  color: var(--fg-4);
}
.site-foot__tm {
  max-width: 92ch;
  line-height: var(--lh-snug);
}
.site-foot__build {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site-foot__sep {
  color: var(--line-2);
}
.switches {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.switches label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--fg-2);
  cursor: pointer;
}
.switches input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  margin: 0;
}
.switches input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-3);
}
.switches input:checked {
  background: var(--surface-4);
}
.switches input:checked::after {
  left: 16px;
  background: var(--fg-1);
}
html.hide-unreleased [data-unreleased] {
  display: none !important;
}
html.hide-unreleased [data-filter=status] {
  display: none;
}
.loader {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--fg-2);
  animation: dl-spin 0.7s linear infinite;
}
@keyframes dl-spin {
  to {
    transform: rotate(360deg);
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hc-layer {
  position: fixed;
  z-index: var(--z-pop);
  inset: 0;
  pointer-events: none;
}
.hc-layer[hidden] {
  display: none;
}
.pop {
  position: absolute;
  width: 384px;
  max-width: calc(100vw - 16px);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-shadow);
  pointer-events: auto;
  overflow: hidden;
}
.pop__acc {
  height: 3px;
  background: var(--line-2);
}
.pop--weapon .pop__acc {
  background: var(--weapon);
}
.pop--vitality .pop__acc {
  background: var(--vitality);
}
.pop--spirit .pop__acc {
  background: var(--spirit);
}
.pop--ability .pop__acc {
  background: var(--ability);
}
.pop--souls .pop__acc {
  background: var(--souls);
}
.pop__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.pop__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--surface-3);
  flex-shrink: 0;
}
.pop__icon--ph {
  display: grid;
  place-items: center;
}
.pop__icon--wide {
  width: 78px;
  height: 44px;
  object-fit: contain;
  background: var(--surface-3);
  padding: 3px;
}
.pop__id {
  min-width: 0;
  flex: 1;
}
.pop__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.pop__meta {
  margin-top: 2px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.pop__rng {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.pop__rng-g {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--fg-3);
}
.pop__rng-g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pop__tag {
  flex-shrink: 0;
  align-self: center;
  height: 20px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-2);
}
.pop__cost {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--souls);
  font-variant-numeric: tabular-nums;
}
.pop__cd {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.pop__cd-ic {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.pop__cd-ic svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pop__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pop__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.pop__desc--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pop__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 23px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}
.pill__g {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: var(--fg-3);
}
.pill__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cardsec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cardsec__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cardsec__type {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.cardsec__cd {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.secbadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.secbadge__i {
  display: inline-flex;
  width: 9px;
  height: 9px;
}
.secbadge__i svg {
  width: 100%;
  height: 100%;
  display: block;
}
.secbadge--active {
  background: var(--surface-4);
  color: var(--fg-1);
}
.secbadge--passive,
.secbadge--innate {
  padding-left: 0;
  color: var(--fg-3);
}
.kw {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.kw--spirit {
  color: var(--spirit);
}
.kw--weapon {
  color: var(--weapon);
}
.kw--vitality {
  color: var(--vitality);
}
.pop__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--space-2);
}
.statbox {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.statbox__top {
  display: flex;
  align-items: center;
  gap: 5px;
}
.statbox__g {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--fg-3);
}
.statbox__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.statbox__v {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.statbox__s {
  margin-left: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--spirit);
}
.statbox__l {
  margin-top: 3px;
  font-size: var(--text-2xs);
  color: var(--fg-3);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.statbox--spirit {
  background: rgb(var(--spirit-rgb) / 0.10);
}
.statbox--spirit .statbox__g,
.statbox--spirit .statbox__v {
  color: var(--spirit);
}
.statbox--weapon {
  background: rgb(var(--weapon-rgb) / 0.10);
}
.statbox--weapon .statbox__g,
.statbox--weapon .statbox__v {
  color: var(--weapon);
}
.statbox--vitality {
  background: rgb(var(--vitality-rgb) / 0.10);
}
.statbox--vitality .statbox__g,
.statbox--vitality .statbox__v {
  color: var(--vitality);
}
.statbox--nerf .statbox__v {
  color: var(--nerf);
}
.srows {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.srow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.srow__ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.85;
}
.srow__lb {
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.srow__v {
  margin-left: auto;
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.melee {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-1);
}
.melee__k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.melee__g {
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: var(--fg-3);
}
.melee__g svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mbadge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  height: 23px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-2xs);
  color: var(--fg-3);
}
.mbadge b {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  color: var(--fg-1);
}
.utiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.utier {
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.utier__ap {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--fg-2);
}
.utier__ap i {
  font-style: normal;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-4);
}
.utier__t {
  font-size: var(--text-2xs);
  line-height: var(--lh-snug);
  color: var(--fg-2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mini__ic {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  object-fit: cover;
}
.mini__t {
  font-size: var(--text-2xs);
  color: var(--fg-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop__sub {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.pop__tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.treegrp {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.treegrp__h {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
.treegrp__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.treeitem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--text-xs);
  color: var(--fg-1);
}
.treeitem:hover {
  background: var(--surface-4);
}
.treeitem img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 920px) {
  .shop__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .vtab__n {
    display: none;
  }
  .board {
    display: none;
    margin-bottom: 0;
    padding: var(--space-2) 0 0;
    background: none !important;
  }
  .board.is-active {
    display: block;
  }
  .board__head {
    display: none;
  }
  .board__tiers {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .site-foot__top {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-foot__top > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .site-bar__inner {
    flex-wrap: wrap;
    height: auto;
    gap: var(--space-2);
    padding-block: var(--space-2);
  }
  .brand {
    order: 0;
  }
  .bar-select {
    order: 1;
    margin-left: auto;
  }
  .bar-spacer {
    display: none;
  }
  .search {
    order: 2;
    width: 100%;
  }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .pulse {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pulse::-webkit-scrollbar {
    display: none;
  }
  .pulse__lead {
    flex-shrink: 0;
  }
  .pulse__chips {
    margin-left: var(--space-2);
    flex-wrap: nowrap;
  }
  .pulse__chips .chip-e > span:not(.chip-e__dir) {
    display: none;
  }
  .pulse__chips .chip-e {
    padding-right: 5px;
  }
  .roster {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--space-2);
  }
  .hcard__name {
    font-size: var(--text-lg);
  }
  .hcard__plate {
    padding: var(--space-4) var(--space-2) var(--space-2);
  }
  .site-foot__top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-foot__top {
    grid-template-columns: 1fr;
  }
}