/*
  MuDream content kit — styles of admin HTML articles (news: .nl, server info: .si).
  Served by the site at https://mudream.online/content-kit.css; the admin preview links the same file.
  Guide for authors: https://dreamassets.fra1.cdn.digitaloceanspaces.com/content-kit/guide.md
  On the site the theme tokens come from body.theme-*; every var() keeps a fallback for the admin.
*/

/* Admin preview only: <body data-cms-theme="red|violet|blue|green|yellow">. The site never sets this attribute. */
[data-cms-theme="red"] {
  --main-bg: #140000;
  --box-bg: #1E0A02;
  --box-accent-bg: radial-gradient(486.23% 486.23% at 219.37% -391.79%, #FC3D3D 0%, rgba(252, 61, 61, 0.00) 100%), #2E1B13;
  --border-color: rgba(255, 255, 255, 0.1);
  --main-color: #FFD333;
  --theme-main-color: #FFD333;
  --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(210, 161, 0, 0.50) 0%, rgba(210, 164, 0, 0.00) 100%), #DF0505;
  --gold-text-gradient: linear-gradient(0deg, #FF6600, #FFD333);
  --text-primary-color: #fff;
  --text-secondary-color: #9A8787;
  --white: #fff;
  --red: #FF3F3F;
  --yellow: #FFECA7;
  --yellow-acent: #FFB800;
  --yellow-brigth: #FFEA00;
  --bright-orange: #E67E23;
  --light-bronze: #D08A4A;
  --dark-bronze: #BB7239;
  --light-blue: #2BA8FB;
  --green-acent: #47D000;
  --purple: #d800f1;
  --purple-lighth: #AE6CF1;
}
[data-cms-theme="violet"] {
  --main-bg: #0d0d10;
  --box-bg: #18181D;
  --box-accent-bg: radial-gradient(160.62% 458.93% at 219.37% -391.79%, #3D4EFC 0%, rgba(61, 78, 252, 0) 100%), #202438;
  --border-color: rgba(255, 255, 255, 0.1);
  --main-color: #c406c7;
  --theme-main-color: #c406c7;
  --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(210, 0, 120, 0.5) 0%, rgba(210, 0, 120, 0) 100%), #7000FF;
  --gold-text-gradient: linear-gradient(0deg, #FF6600, #FFD333);
  --text-primary-color: #fff;
  --text-secondary-color: #89879a;
  --white: #fff;
  --red: #FF3F3F;
  --yellow: #FFECA7;
  --yellow-acent: #FFB800;
  --yellow-brigth: #ffd600;
  --bright-orange: #E67E23;
  --light-bronze: #D08A4A;
  --dark-bronze: #BB7239;
  --light-blue: #2BA8FB;
  --green-acent: #47D000;
  --purple: #d800f1;
  --purple-lighth: #AE6CF1;
}
[data-cms-theme="blue"] {
  --main-bg: #030C14;
  --box-bg: #051F35;
  --box-accent-bg: linear-gradient(180deg, #16294F 0%, #1A3366 100%), linear-gradient(0deg, #16294F 0%, #16294F 100%), #1C1E26;
  --border-color: rgba(255, 255, 255, 0.1);
  --main-color: #FF9533;
  --theme-main-color: #FF9533;
  --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(255, 113, 28, 0.50) 0%, rgba(255, 113, 28, 0.00) 100%), #ef5e06;
  --gold-text-gradient: linear-gradient(0deg, #FF6600, #FFD333);
  --text-primary-color: #fff;
  --text-secondary-color: #9A8787;
  --white: #fff;
  --red: #FF3F3F;
  --yellow: #FFECA7;
  --yellow-acent: #FFB800;
  --yellow-brigth: #ffd600;
  --bright-orange: #E67E23;
  --light-bronze: #D08A4A;
  --dark-bronze: #BB7239;
  --light-blue: #2BA8FB;
  --green-acent: #47D000;
  --purple: #d800f1;
  --purple-lighth: #AE6CF1;
}
[data-cms-theme="green"] {
  --main-bg: #07190F;
  --box-bg: #0E2618;
  --box-accent-bg: radial-gradient(486.23% 486.23% at 219.37% -391.79%, #6BFFB0 0%, rgba(107, 255, 184, 0.00) 100%), #1A3A28;
  --border-color: rgba(255, 255, 255, 0.1);
  --main-color: #5BF39C;
  --theme-main-color: #5BF39C;
  --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(45, 235, 150, 0.50) 0%, rgba(45, 235, 150, 0.00) 100%), #1FC163;
  --gold-text-gradient: linear-gradient(0deg, #1FCF7A, #A6FFD0);
  --text-primary-color: #fff;
  --text-secondary-color: #9BB0A3;
  --white: #fff;
  --red: #FF3F3F;
  --yellow: #FFECA7;
  --yellow-acent: #FFB800;
  --yellow-brigth: #ffd600;
  --bright-orange: #E67E23;
  --light-bronze: #D08A4A;
  --dark-bronze: #BB7239;
  --light-blue: #2BA8FB;
  --green-acent: #47D000;
  --purple: #d800f1;
  --purple-lighth: #AE6CF1;
}
[data-cms-theme="yellow"] {
  --main-bg: #0A0805;
  --box-bg: #15110A;
  --box-accent-bg: radial-gradient(486.23% 486.23% at 219.37% -391.79%, #FFC94A 0%, rgba(255, 201, 74, 0.00) 100%), #221B10;
  --border-color: #2E2616;
  --main-color: #FFC94A;
  --theme-main-color: #FFC94A;
  --gradient-btn-primary: radial-gradient(421.99% 144.78% at 100% 157.5%, rgba(255, 228, 155, 0.55) 0%, rgba(255, 228, 155, 0.00) 100%), linear-gradient(180deg, #FFD264 0%, #F0A41E 100%);
  --btn-primary-text: #1A1204;
  --gold-text-gradient: linear-gradient(0deg, #F0A41E 0%, #FFE49B 100%);
  --text-primary-color: #F7F3EA;
  --text-secondary-color: #A89C86;
  --white: #F7F3EA;
  --red: #FF5A4A;
  --yellow: #FFC94A;
  --yellow-acent: #F0A41E;
  --yellow-brigth: #FFE49B;
  --bright-orange: #E67E23;
  --light-bronze: #D08A4A;
  --dark-bronze: #BB7239;
  --light-blue: #2BA8FB;
  --green-acent: #5FD01E;
  --purple: #d800f1;
  --purple-lighth: #AE6CF1;
}
[data-cms-theme] {
  --gold: color-mix(in srgb, var(--yellow-brigth) 65%, var(--bright-orange));
  --gold-grad: linear-gradient(100deg, var(--yellow-brigth) 0%, var(--bright-orange) 100%);
  --on-gold: rgba(0, 0, 0, 0.86);
  --line-soft: rgba(255, 255, 255, 0.09);
  --text-soft: rgba(255, 255, 255, 0.84);
  --text-muted: rgba(255, 255, 255, 0.72);
  --text-dim: rgba(255, 255, 255, 0.56);

  background: var(--main-bg);
  color: var(--white);
  font-family: Circe, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== Server info: .si ===== */

@keyframes border-animation {
  0% {
    border-color: #00ccb1;
    box-shadow: 0 0 16px rgba(0, 204, 177, 0.5), 0 0 16px rgba(0, 204, 177, 0.3);
  }
  25% {
    border-color: #7b61ff;
    box-shadow: 0 0 16px rgba(123, 97, 255, 0.5), 0 0 16px rgba(123, 97, 255, 0.3);
  }
  50% {
    border-color: #ffc414;
    box-shadow: 0 0 16px rgba(255, 196, 20, 0.5), 0 0 16px rgba(255, 196, 20, 0.3);
  }
  75% {
    border-color: #1ca0fb;
    box-shadow: 0 0 16px rgba(28, 160, 251, 0.5), 0 0 16px rgba(28, 160, 251, 0.3);
  }
  100% {
    border-color: #00ccb1;
  }
}
.si {
  --si-hl: var(--yellow-brigth, #ffd600);
  --si-hl-alt: var(--bright-orange, #E67E23);
  --si-grad: linear-gradient(100deg, var(--si-hl) 0%, var(--si-hl-alt) 100%);
  --si-line: rgba(255, 255, 255, 0.06);
  --si-muted: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--pd-5, 20px);
  container-type: inline-size;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--font-md, 16px);
  line-height: 1.6;
}
.si :where(p, span, b, i, ul, ol, li) {
  font-size: inherit;
  line-height: inherit;
}
.si p {
  margin: 0;
}
.si b {
  color: var(--white, #fff);
  font-weight: 700;
}
.si .si-hl-alt,
.si .si-hl-alt b {
  color: var(--si-hl-alt);
}
.si .si-hl,
.si-start b,
.si-card-title,
.si-list dd {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
}
.si-banner {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200/450;
  object-fit: cover;
  border-radius: 12px;
}
.si-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--si-hl-alt);
  background: color-mix(in srgb, var(--si-hl-alt) 14%, transparent);
}
.si-icon svg {
  --size: 22px;
  width: var(--size);
  height: var(--size);
  color: inherit;
}
.si-start .si-icon,
.si-callout .si-icon {
  color: var(--white, #fff);
  background: var(--si-grad);
  box-shadow: 0 5px 20px color-mix(in srgb, var(--si-hl-alt) 25%, transparent), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.3);
}
.si-start {
  display: flex;
  align-items: center;
  gap: var(--pd-4, 12px);
  padding: var(--pd-4, 12px) var(--pd-5, 20px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 35%, transparent);
  border-radius: 12px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--si-hl) 8%, transparent), color-mix(in srgb, var(--si-hl-alt) 8%, transparent));
}
.si-start p {
  color: var(--white, #fff);
  font-size: var(--font-xslg, 20px);
  font-weight: 700;
  line-height: 1.3;
}
.si-lead {
  color: var(--white, #fff);
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  line-height: 1.35;
}
.si-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--pd-4, 12px);
}
.si-point {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-4, 12px);
  padding: var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.si-callout {
  display: flex;
  align-items: center;
  gap: var(--pd-4, 12px);
  padding: var(--pd-5, 20px);
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-hl) 10%, transparent), color-mix(in srgb, var(--si-hl-alt) 8%, transparent) 50%, transparent);
}
.si-callout p {
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.45;
}
.si-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--pd-4, 12px);
}
.si-card {
  overflow: hidden;
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.si-card-title {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  margin: 0;
  padding: var(--pd-4, 12px) var(--pd-4, 12px);
  border-bottom: 1px solid var(--si-line);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.2;
}
.si-card-title svg {
  --size: 16px;
  flex: none;
  box-sizing: content-box;
  width: var(--size);
  height: var(--size);
  padding: 6px;
  border-radius: 8px;
  color: var(--white, #fff);
  background: var(--si-grad);
}
.si-list {
  margin: 0;
  padding: var(--pd-1, 2px) 0;
}
.si-list > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pd-1, 2px) var(--pd-4, 12px);
  padding: 9px var(--pd-4, 12px);
}
.si-list > div + div {
  border-top: 1px solid var(--si-line);
}
.si-list dt {
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
}
.si-list dd {
  margin: 0 0 0 auto;
  font-weight: 700;
  text-align: right;
}
.si-list-bars > div::after {
  flex-basis: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--si-hl-alt) var(--value), rgba(255, 255, 255, 0.08) var(--value));
  content: "";
}
.si-fact {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  padding: var(--pd-4, 12px);
}
.si-fact > span {
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
  line-height: 1.2;
}
.si-fact + .si-fact {
  border-top: 1px solid var(--si-line);
}
.si .si-fact-value {
  font-size: var(--font-xxlg, 26px);
  line-height: 1.1;
}
.si-formula {
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 25%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--si-hl-alt) 8%, transparent);
  color: var(--white, #fff);
  font-size: var(--font-md, 16px);
  font-weight: 700;
  line-height: 1.35;
}
.si-chars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.si-chars img {
  display: block;
  width: 100%;
  max-width: 40px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.si-chars img:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--si-hl-alt);
}
@media (prefers-reduced-motion: reduce) {
  .si-chars img {
    transition: none;
  }
}
.si-title {
  margin: 0;
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  line-height: 1.2;
}
.si-hero {
  position: relative;
  display: grid;
  gap: var(--pd-5, 20px);
  overflow: hidden;
  padding: var(--pd-6, 30px) var(--pd-5, 20px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 28%, transparent);
  border-radius: 16px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--si-hl-alt) 22%, transparent), transparent 60%), radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--si-hl) 10%, transparent), transparent 70%), rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.si-hero::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--si-hl), var(--si-hl-alt), transparent);
  content: "";
}
.si-hero .si-title {
  font-size: var(--font-xmlg, 30px);
  line-height: 1.1;
}
.si-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-4, 12px);
  min-width: 0;
}
.si-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  padding: 4px var(--pd-3, 10px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--si-hl-alt) 12%, transparent);
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.si-eyebrow svg {
  --size: 14px;
  flex: none;
  width: var(--size);
  height: var(--size);
}
.si-hero-lead {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-lg, 18px);
  line-height: 1.55;
}
.si-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-3, 10px);
  margin: var(--pd-2, 5px) 0 0;
  padding: 0;
  list-style: none;
}
.si-hero-facts li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 84px;
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.si-hero-facts b {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-xslg, 20px);
  line-height: 1.1;
}
.si-hero-facts span {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.si-hero-art::before {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--si-hl-alt) 35%, transparent), transparent 70%);
  filter: blur(20px);
  content: "";
}
.si-hero-icons {
  position: relative;
  display: flex;
  gap: var(--pd-3, 10px);
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0));
}
.si-hero-icons img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.45);
}
@container (min-width: 760px) {
  .si-hero {
    padding: var(--pd-7, 40px) var(--pd-6, 30px);
  }
  .si-hero .si-title {
    font-size: var(--font-slg, 38px);
  }
  .si-hero-facts li {
    flex: none;
    min-width: 96px;
  }
  .si-hero-facts b {
    font-size: var(--font-xxlg, 26px);
  }
  .si-hero:has(> .si-hero-art) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }
  .si-hero-icons {
    display: grid;
    grid-template-columns: repeat(4, 56px);
    justify-content: center;
    overflow: visible;
    padding-bottom: 28px;
    mask-image: radial-gradient(circle at center, rgb(0, 0, 0) 40%, rgba(0, 0, 0, 0) 72%);
  }
  .si-hero-icons img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }
  .si-hero-icons img:nth-child(even) {
    transform: translateY(28px);
  }
}
.si-land {
  display: flex;
  flex-direction: column;
  gap: var(--pd-6, 30px);
  padding: var(--pd-6, 30px) var(--pd-5, 20px);
  border: 1px solid var(--si-line);
  border-radius: 16px;
  background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--si-hl-alt) 12%, transparent), transparent 70%), rgba(255, 255, 255, 0.02);
}
.si-land-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-3, 10px);
  text-align: center;
}
.si .si-land-title {
  margin: 0;
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-xxlg, 26px);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.si-land-sub {
  max-width: 56ch;
  color: var(--si-muted);
  font-size: var(--font-md, 16px);
}
.si-how-steps {
  --si-how-badge: 48px;
  --si-how-gap: var(--pd-5, 20px);
  display: grid;
  gap: var(--si-how-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  min-width: 0;
  padding-left: calc(var(--si-how-badge) + var(--pd-4, 12px));
}
.si-how-step:not(:last-child)::before, .si-how-step:not(:last-child)::after {
  position: absolute;
  top: calc(var(--si-how-badge) / 2);
  left: calc(var(--si-how-badge) / 2 - 1px);
  width: 2px;
  height: calc(100% + var(--si-how-gap));
  border-radius: 2px;
  content: "";
}
.si-how-step::before {
  background: rgba(255, 255, 255, 0.08);
}
.si-how-step::after {
  background: linear-gradient(180deg, var(--si-hl), var(--si-hl-alt));
  box-shadow: 0 0 8px color-mix(in srgb, var(--si-hl-alt) 45%, transparent);
  transform-origin: top center;
}
.si-how-step h3 {
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.25;
}
.si-how-step p {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--font-sm, 14px);
  line-height: 1.6;
}
.si-how-n {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--si-how-badge);
  height: var(--si-how-badge);
  border-radius: 50%;
  background: var(--si-grad);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--si-hl-alt) 14%, transparent), 0 8px 24px color-mix(in srgb, var(--si-hl-alt) 35%, transparent), inset 0 2px 2px rgba(255, 255, 255, 0.35);
  color: rgba(0, 0, 0, 0.8);
  font-size: var(--font-xslg, 20px);
  font-weight: 700;
}
.si-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  margin: 0 2px;
  padding: 0 0.45em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white, #fff);
  font-family: inherit;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
@container (min-width: 760px) {
  .si-land {
    padding: var(--pd-7, 40px) var(--pd-6, 30px);
  }
  .si .si-land-title {
    font-size: var(--font-xmlg, 30px);
  }
  .si-how-steps {
    --si-how-badge: 56px;
    --si-how-gap: var(--pd-6, 30px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .si-how-step {
    align-items: center;
    padding: calc(var(--si-how-badge) + var(--pd-4, 12px)) 0 0;
    text-align: center;
  }
  .si-how-step:not(:last-child)::before, .si-how-step:not(:last-child)::after {
    top: calc(var(--si-how-badge) / 2 - 1px);
    left: 50%;
    width: calc(100% + var(--si-how-gap));
    height: 2px;
  }
  .si-how-step::after {
    background: linear-gradient(90deg, var(--si-hl), var(--si-hl-alt));
    transform-origin: left center;
  }
  .si-how-step p {
    max-width: 34ch;
  }
  .si-how-n {
    left: 50%;
    transform: translateX(-50%);
  }
}
@container (min-width: 760px) {
  .si:has(> .si-note-corner) {
    position: relative;
  }
  .si-note-corner {
    position: absolute;
    top: var(--pd-4, 12px);
    right: var(--pd-4, 12px);
    width: min(54%, 500px);
  }
  .si-note-corner .si-note {
    align-items: center;
    justify-content: flex-end;
    gap: var(--pd-2, 5px);
    padding: 0;
    border: 0;
    background: none;
    color: var(--si-muted);
    font-size: var(--font-xs, 12px);
    line-height: 1.4;
    text-align: right;
  }
  .si-note-corner .si-note > svg {
    --size: 22px;
    order: 1;
    padding: 4px;
  }
  .si-note-corner .si-note > p {
    align-self: auto;
  }
}
.si-section {
  display: flex;
  align-items: center;
  gap: var(--pd-4, 12px);
  margin: var(--pd-3, 10px) 0 0;
  font-size: var(--font-xslg, 20px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.si-section::before, .si-section::after {
  flex: 1 1 var(--pd-5, 20px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--si-hl-alt) 50%, transparent));
  content: "";
}
.si-section::after {
  transform: scaleX(-1);
}
.si-title,
.si-section {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
}
.si-video {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}
.si-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.si-grid {
  --si-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--si-cols), minmax(0, 1fr));
  gap: var(--pd-4, 12px);
}
@container (min-width: 520px) {
  .si-grid {
    --si-cols: 2;
  }
  .si-grid > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
@container (min-width: 760px) {
  .si-grid:has(> :nth-child(3):last-child) {
    --si-cols: 3;
  }
  .si-grid:has(> :nth-child(3):last-child) > :last-child {
    grid-column: auto;
  }
}
@container (min-width: 980px) {
  .si-grid:has(> :nth-child(4):last-child) {
    --si-cols: 4;
  }
}
.si-grid:has(> :nth-child(5)) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.si-grid:has(> :nth-child(5)) > :nth-child(n) {
  grid-column: auto;
}
.si-grid:has(> .si-tile):not(:has(> :not(.si-tile))) {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.si-grid:has(> .si-tile):not(:has(> :not(.si-tile))) > :nth-child(n) {
  grid-column: auto;
}
@container (min-width: 760px) {
  .si-grid:has(> .si-tile:first-child):has(> :not(.si-tile)):has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(140px, 0.6fr) minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .si-grid:has(> .si-tile:first-child):has(> :not(.si-tile)):has(> :nth-child(2):last-child) {
    grid-template-columns: minmax(140px, 0.5fr) minmax(0, 1.5fr);
  }
}
@container (min-width: 520px) {
  .si-grid:has(.si-table-wrap) {
    --si-cols: 2;
  }
  .si-grid:has(.si-table-wrap) > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
.si-step {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  min-width: 0;
  padding: var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--font-sm, 14px);
  line-height: 1.55;
}
.si-step:not(:has(.si-step-title, .si-sub, .si-kv, .si-reqs, .si-note, .si-items, .si-shot, .si-video, .si-table-wrap, ul, ol)) {
  justify-content: center;
  container-type: inline-size;
  gap: clamp(var(--pd-3, 10px), 2.2cqi, var(--pd-5, 20px));
  padding: clamp(var(--pd-4, 12px), 3cqi, var(--pd-6, 30px));
}
.si-step:not(:has(.si-step-title, .si-sub, .si-kv, .si-reqs, .si-note, .si-items, .si-shot, .si-video, .si-table-wrap, ul, ol)) > p,
.si-step:not(:has(.si-step-title, .si-sub, .si-kv, .si-reqs, .si-note, .si-items, .si-shot, .si-video, .si-table-wrap, ul, ol)) > :is(ul, ol) {
  font-size: clamp(var(--font-sm, 14px), 3.8cqi, var(--font-xslg, 20px));
  line-height: 1.55;
}
.si-step :is(ul, ol):not([class]) {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  margin: 0;
  padding-left: var(--pd-5, 20px);
}
.si-step li::marker {
  color: var(--si-hl-alt);
}
.si-step-title {
  margin: 0;
  color: var(--si-hl-alt);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.2;
}
.si-shot {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  margin: 0 auto;
  border: 1px solid var(--si-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.si-divider {
  width: 100%;
  margin: var(--pd-2, 5px) 0;
  border: 0;
  border-top: 1px solid var(--si-line);
}
.si .si-warn,
.si .si-warn b {
  color: var(--red, #FF3F3F);
}
.si-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--pd-4, 12px);
}
.si-spec {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-4, 12px);
  padding: var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--font-sm, 14px);
  line-height: 1.45;
}
.si-spec:has(p + p) {
  grid-column: 1/-1;
}
.si-spec-icon {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.si-spec-body {
  display: flex;
  flex-direction: column;
  gap: var(--pd-1, 2px);
  min-width: 0;
}
.si-spec-body p {
  color: var(--white, #fff);
}
.si-spec-body b {
  color: var(--si-hl-alt);
}
.si-spec-label {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-clip {
  overflow: hidden;
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}
.si-clip video {
  display: block;
  width: 100%;
  height: auto;
}
.si-kv {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.si-kv > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-1, 2px) var(--pd-3, 10px);
  padding: 7px 0;
}
.si-kv > div + div {
  border-top: 1px solid var(--si-line);
}
.si-kv dt {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-kv dt svg {
  --size: 16px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-kv dd {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pd-1, 2px);
  margin: 0 0 0 auto;
  color: var(--white, #fff);
  font-weight: 700;
  text-align: right;
}
.si-kv > .si-kv-long {
  flex-direction: column;
  align-items: flex-start;
}
.si-kv > .si-kv-long dd {
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}
.si-perk {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--pd-3, 10px) 0;
}
.si-perk + .si-perk {
  border-top: 1px solid var(--si-line);
}
.si-buff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-2, 5px);
  font-size: var(--font-xs, 12px);
}
.si-buff > svg {
  --size: 14px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-buff b {
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
}
.si-buff-label {
  color: var(--si-muted);
}
.si .si-term {
  color: var(--si-hl-alt);
}
.si-reqs {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-reqs li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-2, 5px);
  color: var(--white, #fff);
}
.si-qty {
  flex: none;
  min-width: 34px;
  padding: 2px var(--pd-2, 5px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-hl-alt) 16%, transparent);
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  text-align: center;
}
.si-qty-empty {
  background: none;
}
.si-legend {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-legend li {
  display: flex;
  align-items: baseline;
  gap: var(--pd-3, 10px);
  break-inside: avoid;
  padding: 3px 0;
  color: var(--white, #fff);
}
.si-legend-cols {
  display: block;
  column-width: 300px;
  column-gap: var(--pd-6, 30px);
}
.si-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 var(--pd-1, 2px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-hl-alt) 16%, transparent);
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
}
.si-aside {
  color: var(--si-muted);
}
.si-loc {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
}
.si-loc > svg {
  --size: 16px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-faq {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
}
.si-faq-item {
  overflow: hidden;
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.si-faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  padding: var(--pd-4, 12px);
  color: var(--white, #fff);
  font-size: var(--font-md, 16px);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.si-faq-item summary::-webkit-details-marker {
  display: none;
}
.si-faq-item summary:hover {
  background: color-mix(in srgb, var(--si-hl-alt) 8%, transparent);
}
.si-faq-item summary svg {
  --size: 18px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-faq-item summary svg:last-child {
  --size: 14px;
  margin-left: auto;
  color: var(--si-muted);
  transition: transform 0.2s ease;
}
.si-faq-item[open] summary {
  border-bottom: 1px solid var(--si-line);
}
.si-faq-item[open] summary svg:last-child {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .si-faq-item summary,
.si-faq-item summary svg:last-child {
    transition: none;
  }
}
.si-faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  padding: var(--pd-4, 12px);
  font-size: var(--font-sm, 14px);
  line-height: 1.6;
}
.si-media {
  gap: var(--pd-2, 5px);
  padding: var(--pd-2, 5px);
  border-color: transparent;
  background: none;
}
.si-media .si-shot {
  max-height: 240px;
  border: 0;
  border-radius: 0;
  background: none;
}
.si-media p {
  font-size: var(--font-xs, 12px);
}
.si-grid:has(> .si-media):not(:has(> :not(.si-media))) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.si-grid:has(> .si-media):not(:has(> :not(.si-media))) > :nth-child(n) {
  grid-column: auto;
}
.si-step:has(> .si-shot:only-child) {
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
}
.si-step:has(> .si-shot:only-child) .si-shot {
  border: 0;
  background: none;
}
.si-sub {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  margin: var(--pd-2, 5px) 0 0;
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}
.si-sub svg {
  --size: 16px;
  width: var(--size);
  height: var(--size);
}
.si-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.si-items > img {
  box-sizing: border-box;
  min-width: 56px;
  max-width: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 6px;
  border: 1px solid var(--si-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  object-fit: contain;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.si-items > img:hover {
  border-color: color-mix(in srgb, var(--si-hl-alt) 45%, transparent);
  background: color-mix(in srgb, var(--si-hl-alt) 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .si-items > img {
    transition: none;
  }
}
.si-recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-2, 5px) var(--pd-3, 10px);
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.si-recipe-item {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
}
.si-op {
  color: var(--si-hl-alt);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
}
.si-note {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-3, 10px);
  padding: var(--pd-2, 5px) var(--pd-4, 12px) var(--pd-2, 5px) var(--pd-3, 10px);
  border: 1px solid color-mix(in srgb, var(--red, #FF3F3F) 22%, var(--si-line));
  border-left: 3px solid color-mix(in srgb, var(--red, #FF3F3F) 75%, transparent);
  border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--red, #FF3F3F) 8%, transparent), rgba(255, 255, 255, 0.02));
  font-size: var(--font-sm, 14px);
  line-height: 1.45;
}
.si-note > svg {
  --size: 28px;
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  padding: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red, #FF3F3F) 16%, transparent);
  color: var(--red, #FF3F3F);
}
.si-note > p {
  align-self: center;
}
.si-note .si-note-label {
  margin-right: var(--pd-1, 2px);
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--red, #FF3F3F) 18%, transparent);
  color: var(--red, #FF3F3F);
  font-size: var(--font-xs, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.si-note .si-warn {
  color: var(--white, #fff);
}
.si-tile {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.si-tile p,
.si-tile .si-items {
  justify-content: center;
}
.si-sets {
  display: grid;
  gap: var(--pd-5, 20px) var(--pd-6, 30px);
}
.si-set {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  min-width: 0;
}
.si-set-title {
  display: flex;
  align-items: baseline;
  gap: var(--pd-2, 5px);
  margin: 0;
  padding-bottom: var(--pd-3, 10px);
  border-bottom: 1px solid var(--si-line);
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.si-set-title span {
  color: var(--si-hl-alt);
}
.si-buffs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--pd-3, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-buffs li {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  min-width: 0;
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  line-height: 1.3;
}
.si-buffs img {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
@container (min-width: 760px) {
  .si-sets {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
  .si-buffs {
    grid-template-columns: minmax(0, 1fr);
  }
}
.si-mobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--pd-4, 12px);
}
.si-mob {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--si-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.si-mob:hover {
  border-color: color-mix(in srgb, var(--si-hl-alt) 40%, transparent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--si-hl-alt) 14%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .si-mob {
    transition: none;
  }
}
.si-mob-stage {
  position: relative;
  height: 220px;
  background: rgb(0, 0, 0);
}
.si-mob-stage > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.si-mob-stage::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  content: "";
}
.si .si-mob-name {
  position: absolute;
  z-index: 1;
  bottom: var(--pd-3, 10px);
  left: var(--pd-4, 12px);
  margin: 0;
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-xxlg, 26px);
  font-weight: 700;
  line-height: 1.1;
}
.si-mob-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  padding: var(--pd-4, 12px);
}
.si-mob-body::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--si-hl), var(--si-hl-alt), transparent);
  content: "";
}
.si-mob-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-2, 5px);
  margin: 0;
}
.si-mob-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--pd-3, 10px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.si-mob-stats > div:first-child {
  grid-column: 1/-1;
}
.si-mob-stats dt {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-mob-stats dt svg {
  --size: 14px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-mob-stats dd {
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  line-height: 1.35;
}
.si-mob-reward {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  margin-top: auto;
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 30%, transparent);
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-hl) 12%, transparent), color-mix(in srgb, var(--si-hl-alt) 6%, transparent));
}
.si-mob-reward > svg {
  --size: 18px;
  flex: none;
  box-sizing: content-box;
  width: var(--size);
  height: var(--size);
  padding: 8px;
  border-radius: 50%;
  background: var(--si-grad);
  color: var(--white, #fff);
}
.si-mob-reward span {
  display: block;
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-mob-reward b {
  display: block;
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  line-height: 1.35;
}
@container (min-width: 760px) {
  .si-mob-stage {
    height: 240px;
  }
}
.si-anim,
.si-shot[src$=".gif"],
.si-shot[src*="/about/classes/"] {
  border: 0;
  border-radius: 10px;
  background: none;
}
.si-step > .si-anim {
  width: min(100%, 300px);
  height: 260px;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
  background: rgb(0, 0, 0);
  box-shadow: 0 0 0 1px var(--si-line);
}
.si-text:has(> .si-kv:only-child) {
  padding: var(--pd-4, 12px) var(--pd-5, 20px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.si-text:has(> .si-kv:only-child) > .si-kv {
  flex-flow: row wrap;
  gap: var(--pd-4, 12px) var(--pd-6, 30px);
}
.si-text:has(> .si-kv:only-child) > .si-kv > div,
.si-text:has(> .si-kv:only-child) > .si-kv > .si-kv-long {
  flex: 1 1 200px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--pd-2, 5px);
  padding: 0;
  border-top: 0;
}
.si-text:has(> .si-kv:only-child) > .si-kv > div:has(dd img) {
  flex-grow: 2;
  flex-basis: 320px;
}
.si-text:has(> .si-kv:only-child) > .si-kv dd {
  justify-content: flex-start;
  margin: 0;
  text-align: left;
  line-height: 1.6;
}
.si-kv dd img {
  width: auto;
  height: 1.6em;
  margin: 0 2px;
  vertical-align: middle;
  object-fit: contain;
}
.si-media > .si-anim {
  width: min(100%, 200px);
  height: 220px;
}
.si-profile {
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--pd-4, 12px);
}
.si-profile > .si-anim {
  flex: none;
  width: 150px;
  height: 180px;
  margin: 0;
}
.si-profile .si-step-title {
  font-size: var(--font-xlg, 24px);
}
.si-profile-body {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  min-width: 0;
}
@container (min-width: 760px) {
  .si-grid:has(> .si-profile:not(.si-boss)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .si-grid:has(> .si-profile:not(.si-boss)) > :nth-child(n) {
    grid-column: auto;
  }
  .si-grid > .si-profile:has(.si-items) {
    order: -1;
    display: grid;
    grid-template-rows: auto 1fr;
    align-self: start;
    align-content: start;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: var(--pd-2, 5px) var(--pd-4, 12px);
  }
  .si-grid > .si-profile:has(.si-items) > .si-anim {
    grid-area: 1/1/span 2;
  }
  .si-grid > .si-profile:has(.si-items) > .si-profile-body {
    display: contents;
  }
  .si-grid > .si-profile:has(.si-items) .si-step-title,
.si-grid > .si-profile:has(.si-items) .si-kv {
    grid-column: 2;
  }
  .si-grid > .si-profile:has(.si-items) .si-kv:has(.si-items-wrap),
.si-grid > .si-profile:has(.si-items) .si-sub,
.si-grid > .si-profile:has(.si-items) .si-items,
.si-grid > .si-profile:has(.si-items) .si-items-wrap {
    grid-column: 1/-1;
  }
  .si-grid > :is(.si-boss, .si-apex):has(.si-items) {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}
.si-boss {
  padding: var(--pd-5, 20px);
}
.si-boss > .si-anim {
  width: 180px;
  height: 220px;
}
.si-boss .si-step-title {
  font-size: var(--font-xxlg, 26px);
}
.si-boss .si-kv > div {
  padding: var(--pd-3, 10px) 0;
}
.si-boss .si-kv > .si-kv-long {
  gap: var(--pd-3, 10px);
}
.si-boss .si-kv dt {
  gap: var(--pd-3, 10px);
  font-size: var(--font-sm, 14px);
}
.si-boss .si-kv dt svg {
  --size: 20px;
}
.si-boss .si-kv > div:first-child dd {
  color: var(--si-hl);
}
.si-tier-1,
.si-tier-title[data-tier="1"] {
  --si-pip-on: var(--si-hl);
  --si-rank: 1;
}
.si-boss,
.si-tier-title[data-tier="2"] {
  --si-pip-on: var(--si-hl-alt);
  --si-rank: 2;
}
.si-apex,
.si-tier-title[data-tier="3"] {
  --si-pip-on: var(--purple-lighth, #AE6CF1);
  --si-rank: 3;
}
:is(.si-tier-1, .si-boss, .si-apex) .si-step-title,
.si-tier-title {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
}
:is(.si-tier-1, .si-boss, .si-apex) .si-step-title::after,
.si-tier-title::after {
  flex: none;
  margin-left: auto;
  width: 66px;
  height: 22px;
  background: linear-gradient(90deg, var(--si-pip-on) calc(var(--si-rank) / 3 * 100%), rgba(255, 255, 255, 0.16) 0);
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.5 5.6 21.1 7 14 1.7 9l7.2-.9z%27/%3E%3C/svg%3E") 0 50%/22px 22px repeat-x;
  content: "";
}
.si-tier-title {
  margin: var(--pd-3, 10px) 0 0;
  padding-bottom: var(--pd-2, 5px);
  border-bottom: 1px solid color-mix(in srgb, var(--si-pip-on) 45%, transparent);
  color: var(--white, #fff);
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.si-step.si-profile {
  --si-acc: var(--si-pip-on, var(--si-hl));
  padding: var(--pd-4, 12px);
  border: 1px solid color-mix(in srgb, var(--si-acc) 10%, var(--si-line));
  border-radius: 14px;
  background: radial-gradient(ellipse 70% 120px at 50% 0, color-mix(in srgb, var(--si-acc) 5%, transparent), transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--si-acc) 16%, transparent), 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease;
}
.si-step.si-profile:hover {
  border-color: color-mix(in srgb, var(--si-acc) 25%, transparent);
}
.si-step.si-profile > .si-anim {
  border-radius: 10px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--si-acc) 22%, transparent), 0 0 0 4px rgba(0, 0, 0, 0.3), 0 10px 22px rgba(0, 0, 0, 0.35);
}
.si-step.si-profile .si-step-title {
  color: var(--si-name, var(--si-acc));
  letter-spacing: 0.01em;
  text-shadow: none;
}
.si-step.si-profile .si-kv > div + div {
  border-top-color: rgba(255, 255, 255, 0.05);
}
.si-step.si-profile .si-kv dt svg {
  color: color-mix(in srgb, var(--si-acc) 70%, var(--si-muted));
}
.si-step.si-profile .si-sub {
  color: color-mix(in srgb, var(--si-acc) 65%, var(--si-muted));
  font-size: var(--font-xs, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.si-step.si-profile .si-sub::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-acc) 18%, transparent), transparent);
  content: "";
}
.si-step.si-profile .si-items {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.si-step.si-profile .si-items::-webkit-scrollbar {
  display: none;
}
.si-step.si-profile .si-items > img {
  flex: none;
  scroll-snap-align: start;
}
.si-step.si-profile .si-items > img {
  border-color: rgba(255, 255, 255, 0.07);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--white, #fff) 7%, var(--box-bg, #051F35)), var(--box-bg, #051F35) 75%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.si-step.si-profile .si-items > img:hover {
  border-color: color-mix(in srgb, var(--si-acc) 60%, transparent);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--si-acc) 22%, var(--box-bg, #051F35)), var(--box-bg, #051F35) 75%);
}
.si-profile.si-tier-1 {
  --si-acc: rgba(255, 255, 255, 0.45);
  --si-name: var(--white, #fff);
}
.si-profile.si-tier-1 .si-step-title {
  font-size: var(--font-lg, 18px);
  text-shadow: none;
}
.si-profile.si-tier-1 .si-step-title::after {
  opacity: 0.6;
  filter: none;
}
.si-profile.si-boss {
  padding: var(--pd-5, 20px);
  background: radial-gradient(ellipse 70% 140px at 50% 0, color-mix(in srgb, var(--si-acc) 5%, transparent), transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.si-profile.si-apex {
  --si-name: var(--white, #fff);
  border-color: color-mix(in srgb, var(--si-acc) 14%, var(--si-line));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--si-acc) 45%, transparent), 0 8px 20px rgba(0, 0, 0, 0.22);
}
.si-profile.si-apex > .si-anim {
  width: 180px;
  height: 220px;
  box-shadow: 0 0 0 1px var(--si-line), 0 0 0 4px rgba(0, 0, 0, 0.3), 0 10px 22px rgba(0, 0, 0, 0.35);
}
.si-profile.si-apex .si-step-title {
  font-size: var(--font-xxlg, 26px);
  text-shadow: none;
}
.si-profile.si-apex .si-kv dt svg {
  color: var(--si-muted);
}
.si-profile.si-apex .si-sub {
  color: var(--si-muted);
}
.si-profile.si-vertical {
  --si-acc: var(--light-bronze, #D08A4A);
  background: radial-gradient(ellipse 80% 110px at 50% 0, color-mix(in srgb, var(--yellow-acent, #FFB800) 6%, transparent), transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.si-profile.si-vertical .si-step-title {
  background: linear-gradient(180deg, var(--yellow, #FFECA7) 0%, var(--yellow-acent, #FFB800) 55%, var(--dark-bronze, #BB7239) 100%);
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .si-profile {
    transition: none;
  }
}
.si-profile .si-kv > div:has(> dd > .si-items-wrap) {
  flex-flow: column nowrap;
  align-items: stretch;
  gap: var(--pd-1, 2px);
}
.si-profile .si-kv > div:has(> dd > .si-items-wrap) > dd {
  display: block;
  min-width: 0;
  margin: 0;
  text-align: left;
}
.si-profile .si-kv > div:has(> dd > .si-items-wrap) .si-items-wrap {
  margin-top: var(--pd-2, 5px);
}
.si-kv dd.si-drops,
.si-panel-loot .si-drops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: var(--pd-2, 5px);
  width: 100%;
}
.si-kv dd.si-drops > span,
.si-panel-loot .si-drops > span {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  min-width: 0;
  padding: 4px var(--pd-2, 5px);
  border: 1px solid var(--si-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  font-size: var(--font-xs, 12px);
  line-height: 1.2;
}
.si-kv dd.si-drops img,
.si-panel-loot .si-drops img {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  object-fit: contain;
}
.si-kv dd.si-drops span span,
.si-panel-loot .si-drops span span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-kv dd.si-drops b,
.si-panel-loot .si-drops b {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-hl-alt) 16%, transparent);
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
}
.si-grid:has(> .si-boss) {
  grid-template-columns: minmax(0, 1fr);
}
.si-grid:has(> .si-boss) > :nth-child(n) {
  grid-column: auto;
}
@container (min-width: 820px) {
  .si-grid:has(> .si-boss) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 760px) {
  .si-grid:has(> .si-profile) > :last-child:nth-child(odd) {
    grid-column: 1/-1;
    justify-self: center;
    width: calc(50% - var(--pd-4, 12px) / 2);
  }
}
@container (min-width: 760px) {
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) {
    grid-column: 1/-1;
    justify-self: stretch;
    display: flex;
    align-items: flex-start;
    width: auto;
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) > .si-profile-body {
    display: flex;
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-kv {
    flex-flow: row wrap;
    gap: var(--pd-3, 10px);
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-kv > div {
    flex: 1 1 170px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pd-2, 5px);
    padding: var(--pd-3, 10px) var(--pd-4, 12px);
    border: 1px solid var(--si-line);
    border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--white, #fff) 3%, var(--box-bg, #051F35)), var(--box-bg, #051F35));
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-kv dt {
    font-size: var(--font-xs, 12px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-kv dt svg {
    --size: 18px;
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-kv dd {
    justify-content: flex-start;
    margin: 0;
    font-size: var(--font-md, 16px);
    line-height: 1.3;
    text-align: left;
  }
  .si-grid > .si-profile:is(.si-boss, .si-apex):has(.si-items) .si-items > img {
    min-width: 64px;
    max-width: 64px;
    min-height: 64px;
    max-height: 64px;
    padding: 7px;
  }
}
.si-vertical {
  flex-direction: column;
  align-items: stretch;
}
.si-vertical > .si-anim {
  width: 100%;
  height: 200px;
}
.si-vertical .si-profile-body {
  flex: none;
}
.si-vertical-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-3, 10px);
}
.si-vertical-head > .si-step-title {
  min-width: 0;
}
.si-vertical-head > img {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.si-grid:has(> .si-profile.si-vertical) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.si-grid:has(> .si-profile.si-vertical) > :nth-child(n) {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}
@container (min-width: 760px) {
  .si-grid:has(> .si-profile.si-vertical) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .si-grid:has(> .si-profile.si-vertical) > :nth-child(n) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}
.si-loc-title {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  margin: var(--pd-2, 5px) 0 0;
  color: var(--white, #fff);
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  line-height: 1.2;
}
.si-loc-title > svg {
  --size: 24px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-loc-title::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-hl-alt) 45%, transparent), transparent);
  content: "";
}
.si-box-title > span {
  background: linear-gradient(180deg, var(--yellow, #FFECA7) 0%, var(--yellow-acent, #FFB800) 60%, var(--dark-bronze, #BB7239) 100%);
  background-clip: text;
  color: transparent;
}
.si-box-title::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--light-bronze, #D08A4A) 50%, transparent), transparent);
}
.si-box-title > img {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.si-loc-title + .si-grid {
  margin-top: calc(var(--pd-1, 2px) * -1);
}
.si-hero-video .si-video {
  max-width: none;
}
@container (min-width: 760px) {
  .si-hero.si-hero-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@container (min-width: 940px) {
  .si-hero.si-hero-video {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}
.si-point > div {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  min-width: 0;
}
.si-point > div h3 {
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.25;
}
.si-point > div p {
  font-size: var(--font-sm, 14px);
}
.si-points:has(> :nth-child(3):last-child),
.si-points:has(> :nth-child(4):last-child) {
  grid-template-columns: minmax(0, 1fr);
  counter-reset: si-point;
}
.si-points:has(> :nth-child(3):last-child) > .si-point,
.si-points:has(> :nth-child(4):last-child) > .si-point {
  position: relative;
  overflow: hidden;
  counter-increment: si-point;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.si-points:has(> :nth-child(3):last-child) > .si-point::after,
.si-points:has(> :nth-child(4):last-child) > .si-point::after {
  position: absolute;
  top: var(--pd-2, 5px);
  right: var(--pd-4, 12px);
  color: rgba(255, 255, 255, 0.05);
  font-size: var(--font-xxxlg, 48px);
  font-weight: 800;
  line-height: 1;
  content: counter(si-point, decimal-leading-zero);
  pointer-events: none;
}
.si-points:has(> :nth-child(3):last-child) > .si-point:hover,
.si-points:has(> :nth-child(4):last-child) > .si-point:hover {
  border-color: color-mix(in srgb, var(--si-hl-alt) 35%, transparent);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .si-points:has(> :nth-child(3):last-child) > .si-point,
.si-points:has(> :nth-child(4):last-child) > .si-point {
    transition: none;
  }
  .si-points:has(> :nth-child(3):last-child) > .si-point:hover,
.si-points:has(> :nth-child(4):last-child) > .si-point:hover {
    transform: none;
  }
}
@container (min-width: 900px) {
  .si-points:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .si-points:has(> :nth-child(3):last-child) > .si-point {
    flex-direction: column;
    padding: var(--pd-5, 20px);
  }
}
@container (min-width: 640px) {
  .si-points:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .si-points:has(> :nth-child(4):last-child) > .si-point {
    padding: var(--pd-5, 20px);
  }
}
.si-land-open {
  display: flex;
  flex-direction: column;
  gap: var(--pd-6, 30px);
  padding-block: var(--pd-5, 20px) var(--pd-6, 30px);
}
.si-land-open > .si-shot {
  width: min(100%, 600px);
  max-height: none;
}
.si-land-open > .si-shot,
.si-land-open > .si-video {
  border-color: color-mix(in srgb, var(--si-hl-alt) 25%, transparent);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--si-hl-alt) 15%, transparent);
}
.si-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-5, 20px);
  overflow: hidden;
  padding: var(--pd-7, 40px) var(--pd-5, 20px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 28%, transparent);
  border-radius: 16px;
  background: radial-gradient(60% 90% at 50% 100%, color-mix(in srgb, var(--si-hl-alt) 22%, transparent), transparent 70%), radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--si-hl) 8%, transparent), transparent 70%), rgba(0, 0, 0, 0.25);
  text-align: center;
}
.si-cta::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--si-hl), var(--si-hl-alt), transparent);
  content: "";
}
.si-cta-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-4, 12px);
  min-width: 0;
}
.si-cta-body > p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-lg, 18px);
  line-height: 1.55;
}
.si-cta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pd-3, 10px);
  margin-top: var(--pd-2, 5px);
}
.si-crew {
  position: relative;
  display: flex;
  order: -1;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 200px;
}
.si-crew::after {
  position: absolute;
  right: 12%;
  bottom: -6px;
  left: 12%;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--si-hl-alt) 40%, transparent), transparent);
  content: "";
}
.si-crew img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 82%;
  margin-inline: -30px;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55));
}
.si-crew img:nth-child(2) {
  z-index: 2;
  height: 100%;
}
.si-crew img:last-child {
  height: 66%;
}
@container (min-width: 760px) {
  .si-cta:has(> .si-crew) {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    padding-block: var(--pd-6, 30px);
    text-align: left;
  }
  .si-cta:has(> .si-crew) .si-cta-body {
    align-items: flex-start;
  }
  .si-cta:has(> .si-crew) .si-cta-links {
    justify-content: flex-start;
  }
  .si-crew {
    order: 0;
    height: 280px;
  }
  .si-crew img {
    margin-inline: -46px;
  }
}
.si-levels {
  --si-rail: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pd-6, 30px);
  padding-left: var(--si-rail);
}
.si-levels::before {
  position: absolute;
  top: 14px;
  bottom: 0;
  left: calc(var(--si-rail) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--si-hl-alt), color-mix(in srgb, var(--si-hl-alt) 25%, transparent) 70%, transparent);
  content: "";
}
.si-level {
  display: flex;
  flex-direction: column;
  gap: var(--pd-4, 12px);
}
.si-level-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pd-4, 12px);
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.si-level-title::before {
  position: absolute;
  top: 50%;
  left: calc(var(--si-rail) / -2);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--si-grad);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--si-hl-alt) 18%, transparent), 0 0 18px color-mix(in srgb, var(--si-hl-alt) 60%, transparent);
  transform: translate(-50%, -50%) rotate(45deg);
  content: "";
}
.si-level-title::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-hl-alt) 45%, transparent), transparent);
  content: "";
}
.si-npcs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pd-4, 12px);
}
@container (min-width: 760px) {
  .si-npcs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.si-npc {
  --si-stage: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-2, 5px);
  min-width: 0;
  padding: var(--pd-4, 12px) var(--pd-4, 12px) var(--pd-5, 20px);
  border: 1px solid var(--si-line);
  border-radius: 14px;
  background: radial-gradient(ellipse 30% 12px at 50% calc(var(--pd-4, 12px) + var(--si-stage) - 4px), rgba(0, 0, 0, 0.55), transparent), radial-gradient(ellipse 45% 26px at 50% calc(var(--pd-4, 12px) + var(--si-stage) - 4px), color-mix(in srgb, var(--si-hl-alt) 28%, transparent), transparent), radial-gradient(ellipse 60% 42% at 50% 38%, color-mix(in srgb, var(--si-hl-alt) 12%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--si-hl-alt) 16%, transparent), 0 8px 20px rgba(0, 0, 0, 0.22);
  font-size: var(--font-xs, 12px);
  line-height: 1.45;
  text-align: center;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.si-npc > img {
  display: block;
  width: 100%;
  height: var(--si-stage);
  max-height: none;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s ease;
}
.si-npc h4 {
  margin: var(--pd-2, 5px) 0 0;
  color: var(--white, #fff);
  font-size: var(--font-md, 16px);
  font-weight: 700;
  line-height: 1.25;
}
.si-npc p {
  color: var(--si-muted);
}
.si-npc:hover {
  border-color: color-mix(in srgb, var(--si-hl-alt) 40%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--si-hl-alt) 30%, transparent), 0 12px 26px rgba(0, 0, 0, 0.35), 0 0 22px color-mix(in srgb, var(--si-hl-alt) 14%, transparent);
  transform: translateY(-3px);
}
.si-npc:hover > img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .si-npc,
.si-npc > img {
    transition: none;
  }
  .si-npc:hover, .si-npc:hover > img {
    transform: none;
  }
}
@container (max-width: 519px) {
  .si-levels {
    --si-rail: 24px;
  }
  .si-npc {
    --si-stage: 150px;
    padding: var(--pd-3, 10px) var(--pd-3, 10px) var(--pd-4, 12px);
  }
}
.si-catalog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pd-6, 30px);
}
.si-catalog:has(.si-filter-input:focus-visible) .si-filters {
  outline: 1px solid var(--si-muted);
  outline-offset: 2px;
}
.si-mon-none,
.si-mon-input,
.si-filter-input,
.si-group-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.si-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-3, 10px) var(--pd-6, 30px);
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.si-filters-title {
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.si-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-2, 5px);
  transition: opacity 0.2s ease;
}
.si-filter-group > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--pd-3, 10px);
  border: 1px solid var(--si-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.si-filter-group > label svg {
  --size: 14px;
}
.si-filter-group > label:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--white, #fff);
}
.si-filter-label {
  margin-right: var(--pd-2, 5px);
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.si-filter-stars {
  --si-n: 1;
}
.si-filter-stars[data-tier="2"] {
  --si-n: 2;
}
.si-filter-stars[data-tier="3"] {
  --si-n: 3;
}
.si-filter-stars::before {
  width: calc(var(--si-n) * 14px);
  height: 14px;
  background: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.5 5.6 21.1 7 14 1.7 9l7.2-.9z%27/%3E%3C/svg%3E") 0 50%/14px 14px repeat-x;
}
.si-filter-stars > span,
.si-panel-close > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.si-f-kind-all:checked ~ .si-filters label[for=si-f-kind-all] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-kind-all:checked ~ .si-filters label[for=si-f-kind-all].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-kind-boss:checked ~ .si-filters label[for=si-f-kind-boss] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-kind-boss:checked ~ .si-filters label[for=si-f-kind-boss].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-kind-elite:checked ~ .si-filters label[for=si-f-kind-elite] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-kind-elite:checked ~ .si-filters label[for=si-f-kind-elite].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-kind-gold:checked ~ .si-filters label[for=si-f-kind-gold] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-kind-gold:checked ~ .si-filters label[for=si-f-kind-gold].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-tier-all:checked ~ .si-filters label[for=si-f-tier-all] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-tier-all:checked ~ .si-filters label[for=si-f-tier-all].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-tier-1:checked ~ .si-filters label[for=si-f-tier-1] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-tier-1:checked ~ .si-filters label[for=si-f-tier-1].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-tier-2:checked ~ .si-filters label[for=si-f-tier-2] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-tier-2:checked ~ .si-filters label[for=si-f-tier-2].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-tier-3:checked ~ .si-filters label[for=si-f-tier-3] {
  border-color: color-mix(in srgb, var(--main-color, #FF9533) 70%, transparent);
  background: color-mix(in srgb, var(--main-color, #FF9533) 16%, transparent);
  color: var(--white, #fff);
}
.si-f-tier-3:checked ~ .si-filters label[for=si-f-tier-3].si-filter-stars {
  color: var(--main-color, #FF9533);
}
.si-f-kind-gold:checked ~ .si-filters .si-filter-tier {
  opacity: 0.35;
  pointer-events: none;
}
.si-f-kind-boss:checked ~ .si-groups > .si-group:not([data-kind=boss]),
.si-f-kind-elite:checked ~ .si-groups > .si-group:not([data-kind=elite]),
.si-f-kind-gold:checked ~ .si-groups > .si-group:not([data-kind=gold]),
.si-f-kind-gold:not(:checked) ~ .si-f-tier-all:not(:checked) ~ .si-groups > .si-group[data-kind=gold] {
  display: none;
}
.si-f-kind-gold:not(:checked) ~ .si-f-tier-1:checked ~ .si-groups .si-group-tiles > label:not([data-tier="1"]),
.si-f-kind-gold:not(:checked) ~ .si-f-tier-1:checked ~ .si-groups .si-group-tiles > label:not([data-tier="1"]) + .si-panel {
  display: none;
}
.si-f-kind-gold:not(:checked) ~ .si-f-tier-2:checked ~ .si-groups .si-group-tiles > label:not([data-tier="2"]),
.si-f-kind-gold:not(:checked) ~ .si-f-tier-2:checked ~ .si-groups .si-group-tiles > label:not([data-tier="2"]) + .si-panel {
  display: none;
}
.si-f-kind-gold:not(:checked) ~ .si-f-tier-3:checked ~ .si-groups .si-group-tiles > label:not([data-tier="3"]),
.si-f-kind-gold:not(:checked) ~ .si-f-tier-3:checked ~ .si-groups .si-group-tiles > label:not([data-tier="3"]) + .si-panel {
  display: none;
}
.si-groups {
  display: flex;
  flex-direction: column;
  gap: var(--pd-6, 30px);
}
.si-group {
  --si-group-acc: rgba(255, 255, 255, 0.6);
  display: grid;
  grid-template-areas: "head count" "body body";
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--pd-2, 5px);
  counter-reset: si-group-n;
}
.si-group[data-kind=boss] {
  --si-group-acc: var(--si-hl-alt);
}
.si-group[data-kind=elite] {
  --si-group-acc: var(--purple-lighth, #AE6CF1);
}
.si-group[data-kind=gold] {
  --si-group-acc: var(--light-bronze, #D08A4A);
}
.si-group-head {
  display: inline-flex;
  grid-area: head;
  align-items: center;
  gap: var(--pd-2, 5px);
  padding: var(--pd-1, 2px) var(--pd-2, 5px) var(--pd-1, 2px) 0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.si-group-head > svg {
  --size: 16px;
  height: var(--size);
  color: var(--si-muted);
  transition: transform 0.2s ease;
}
.si-group-head:hover > svg {
  color: var(--white, #fff);
}
.si-group-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--pd-3, 10px) 3px var(--pd-2, 5px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-group-acc) 16%, transparent);
  color: color-mix(in srgb, var(--si-group-acc) 80%, var(--white, #fff));
  font-size: var(--font-sm, 14px);
  font-weight: 700;
}
.si-group-tag svg {
  --size: 14px;
  height: var(--size);
}
.si-group-count {
  grid-area: count;
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
}
.si-group-count::before {
  content: counter(si-group-n);
}
.si-group-toggle:focus-visible + .si-group-head {
  outline: 1px solid var(--si-muted);
  outline-offset: 2px;
}
.si-group-body {
  display: grid;
  grid-area: body;
  grid-template-rows: 1fr;
  margin-top: var(--pd-2, 5px);
  padding-top: var(--pd-3, 10px);
  border-top: 1px solid var(--si-line);
  transition: grid-template-rows 0.25s ease;
}
.si-group-toggle:checked + .si-group-head > svg {
  transform: rotate(-90deg);
}
.si-group-toggle:checked ~ .si-group-body {
  grid-template-rows: 0fr;
  padding-top: 0;
}
.si-group-toggle:checked ~ .si-group-body > .si-group-tiles {
  overflow: hidden;
}
.si-group-tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  grid-auto-flow: row dense;
  gap: 6px;
  min-height: 0;
}
.si-group-tiles > label {
  --si-acc: rgba(255, 255, 255, 0.45);
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: rgb(0, 0, 0);
  box-shadow: 0 0 0 1px var(--si-line), 0 6px 14px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  counter-increment: si-group-n;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.si-group-tiles > label[data-tier="2"] {
  --si-acc: var(--si-hl-alt);
}
.si-group-tiles > label[data-tier="3"] {
  --si-acc: var(--purple-lighth, #AE6CF1);
}
.si-group-tiles > label:not([data-tier]) {
  --si-acc: var(--light-bronze, #D08A4A);
}
.si-group-tiles > label::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: color-mix(in srgb, var(--si-acc) 80%, transparent);
  content: "";
}
.si-group-tiles > label img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.85);
  transform: scale(1.06);
  transition: transform 0.3s ease, filter 0.2s ease;
}
.si-group-tiles > label b {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: var(--pd-5, 20px) 6px 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
  color: var(--white, #fff);
  font-size: var(--font-xs, 12px);
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.si-group-tiles > label:hover {
  z-index: 2;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--si-acc) 60%, transparent), 0 12px 26px rgba(0, 0, 0, 0.55);
  transform: scale(1.06);
}
.si-group-tiles > label:hover img {
  filter: none;
  transform: scale(1.12);
}
.si-group-tiles > label:hover b {
  opacity: 1;
  transform: none;
}
.si-mon-input:checked + label {
  z-index: 1;
  box-shadow: 0 0 0 2px var(--main-color, #FF9533), 0 0 22px color-mix(in srgb, var(--main-color, #FF9533) 45%, transparent), 0 10px 20px rgba(0, 0, 0, 0.45);
}
.si-mon-input:checked + label img {
  filter: none;
}
.si-mon-input:checked + label b {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--main-color, #FF9533) 70%, rgb(0, 0, 0)));
  opacity: 1;
  transform: none;
}
.si-mon-input:focus-visible + label {
  outline: 2px solid var(--white, #fff);
  outline-offset: 2px;
}
@media (hover: none) {
  .si-group-tiles > label b {
    opacity: 1;
    transform: none;
  }
}
.si-panel {
  --si-acc: rgba(255, 255, 255, 0.45);
  position: relative;
  display: none;
  grid-column: 1/-1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--pd-6, 30px);
  min-height: 420px;
  margin: var(--pd-2, 5px) 0;
  padding: var(--pd-6, 30px) var(--pd-7, 40px);
  overflow: hidden;
  border: 1px solid var(--si-line);
  border-radius: 16px;
  background: radial-gradient(ellipse 34% 60% at 50% 55%, color-mix(in srgb, var(--si-acc) 20%, transparent), transparent 70%), radial-gradient(ellipse 55% 22% at 50% 100%, color-mix(in srgb, var(--si-acc) 12%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.3));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--si-acc) 60%, transparent);
  scroll-margin: calc(var(--header-height, 70px) + var(--pd-5, 20px)) 0 var(--pd-5, 20px);
}
.si-panel[data-tier="2"] {
  --si-acc: var(--si-hl-alt);
}
.si-panel[data-tier="3"] {
  --si-acc: var(--purple-lighth, #AE6CF1);
}
.si-panel[data-kind=gold] {
  --si-acc: var(--light-bronze, #D08A4A);
}
.si-mon-input:checked + label + .si-panel {
  display: grid;
}
.si-panel-close {
  position: absolute;
  top: var(--pd-3, 10px);
  right: var(--pd-3, 10px);
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid var(--si-line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.si-panel-close::before, .si-panel-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--si-muted);
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.si-panel-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.si-panel-close:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.si-panel-close:hover::before, .si-panel-close:hover::after {
  background: var(--white, #fff);
}
.si-panel-info {
  display: flex;
  flex-direction: column;
  gap: var(--pd-5, 20px);
  min-width: 0;
}
.si-panel-info::before {
  width: 48px;
  height: 3px;
  margin-bottom: calc(var(--pd-3, 10px) * -1);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--si-acc), transparent);
  content: "";
}
.si-panel-info .si-step-title {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-3, 10px);
  color: var(--white, #fff);
  font-size: clamp(var(--font-xxlg, 26px), 3.6cqi, var(--font-xxxlg, 48px));
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-transform: uppercase;
}
.si-panel-info .si-step-title::after {
  --si-star: 34px;
  width: calc(var(--si-star) * 3);
  height: var(--si-star);
  margin-left: 0;
  opacity: 1;
  mask-size: var(--si-star) var(--si-star);
}
.si-panel-info .si-kv {
  gap: var(--pd-2, 5px);
}
.si-panel-info .si-kv > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: var(--pd-2, 5px) var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-left: 3px solid color-mix(in srgb, var(--si-acc) 70%, transparent);
  border-radius: 8px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-acc) 8%, transparent), rgba(255, 255, 255, 0.02));
}
.si-panel-info .si-kv dt {
  font-size: var(--font-xs, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.si-panel-info .si-kv dt svg {
  --size: 16px;
  color: var(--si-acc);
}
.si-panel-info .si-kv dd {
  justify-content: flex-start;
  margin: 0;
  font-size: var(--font-md, 16px);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
.si-panel-stage {
  display: flex;
  justify-content: center;
}
.si-panel-stage > .si-anim {
  width: min(100%, 320px);
  height: 360px;
  max-height: none;
  margin: 0;
  border-radius: 14px;
  background: rgb(0, 0, 0);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--si-acc) 45%, transparent), 0 0 40px color-mix(in srgb, var(--si-acc) 28%, transparent), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.si-panel-loot {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  min-width: 0;
}
.si-panel-loot .si-sub {
  margin: var(--pd-1, 2px) 0 0;
  color: color-mix(in srgb, var(--si-acc) 70%, var(--si-muted));
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.si-panel-loot .si-sub:first-child {
  margin-top: 0;
}
.si-panel-loot .si-items {
  gap: 5px;
}
.si-panel-loot .si-items > img {
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 5px;
  border-color: color-mix(in srgb, var(--si-acc) 22%, var(--si-line));
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35) 75%);
}
.si-panel-loot p {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
}
.si-panel-loot p.si-loot-text {
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  line-height: 1.6;
}
.si-panel-loot p.si-loot-text img {
  height: 1.8em;
  margin: 0 2px;
  vertical-align: middle;
}
.si-panel-loot .si-kv {
  --si-chance-w: 104px;
  flex-direction: column;
  gap: var(--pd-3, 10px);
}
.si-panel-loot .si-kv > div {
  position: relative;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  border: 0;
  background: none;
}
.si-panel-loot .si-kv dt {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.75;
  color: color-mix(in srgb, var(--si-acc) 70%, var(--si-muted));
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.si-panel-loot .si-kv dt svg {
  --size: 14px;
  color: currentcolor;
}
.si-panel-loot .si-kv dd {
  display: block;
  margin: 0;
  padding-right: var(--si-chance-w);
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  line-height: 1.4;
  text-align: left;
}
.si-panel-loot .si-kv dd img {
  height: 1.5em;
}
.si-panel-loot .si-kv dd .si-items-wrap {
  margin-right: calc(-1 * var(--si-chance-w));
}
.si-panel-loot .si-kv dd .si-items {
  flex-basis: 100%;
  margin-top: var(--pd-1, 2px);
}
.si-panel-loot .si-kv dd .si-items > img {
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  max-height: 48px;
  height: auto;
  margin: 0;
  padding: 5px;
}
.si-view > .si-section-title {
  margin-top: var(--pd-7, 40px);
}
.si-view > .si-section-title:first-child {
  margin-top: 0;
}
@container (max-width: 759px) {
  .si-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: var(--pd-4, 12px);
  }
  .si-panel-stage {
    order: -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .si-group-tiles > label,
.si-group-tiles img,
.si-group-head > svg,
.si-group-body {
    transition: none;
  }
}
.si-views {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--pd-5, 20px);
}
.si-view-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.si-views-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-3, 10px) var(--pd-5, 20px);
  min-height: 48px;
  margin-bottom: var(--pd-2, 5px);
}
.si-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-1, 2px);
  padding: var(--pd-1, 2px);
  border: 1px solid var(--si-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}
.si-tabs label {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  padding: var(--pd-2, 5px) var(--pd-5, 20px);
  border-radius: 999px;
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.si-tabs label:hover {
  color: var(--white, #fff);
}
.si-tabs label svg {
  --size: 16px;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-view-input:nth-of-type(1):checked ~ .si-views-head .si-tabs label:nth-of-type(1),
.si-view-input:nth-of-type(2):checked ~ .si-views-head .si-tabs label:nth-of-type(2) {
  background: var(--si-grad);
  color: var(--white, #fff);
}
.si-view-input:nth-of-type(1):checked ~ .si-views-head .si-tabs label:nth-of-type(1) svg,
.si-view-input:nth-of-type(2):checked ~ .si-views-head .si-tabs label:nth-of-type(2) svg {
  color: currentcolor;
}
.si-view-input:focus-visible ~ .si-views-head .si-tabs {
  outline: 1px solid var(--si-hl-alt);
}
.si-view {
  display: none;
  flex-direction: column;
  gap: var(--pd-5, 20px);
}
.si-view-input:nth-of-type(1):checked ~ .si-view:nth-of-type(2),
.si-view-input:nth-of-type(2):checked ~ .si-view:nth-of-type(3) {
  display: flex;
}
@media (prefers-reduced-motion: reduce) {
  .si-tabs label {
    transition: none;
  }
}
.si-step-title:has(> svg, > .si-num) {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
}
.si-step-title > svg {
  --size: 20px;
  flex: none;
  width: var(--size);
  height: var(--size);
}
.si-step:has(> .si-split) {
  container-type: inline-size;
}
.si-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--pd-4, 12px);
}
.si-split > div {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  min-width: 0;
}
.si-split > .si-shot {
  width: auto;
  height: 220px;
  max-height: none;
}
@container (min-width: 440px) {
  .si-split {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .si-split:has(> .si-shot:first-child) {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.si-rules {
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-rules > li {
  position: relative;
  padding: var(--pd-2, 5px) 0 var(--pd-2, 5px) var(--pd-5, 20px);
}
.si-rules > li::before {
  position: absolute;
  top: calc(var(--pd-2, 5px) + 0.775em - 3px);
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--si-hl-alt);
  content: "";
}
.si-rules > li:has(> svg:first-child)::before {
  display: none;
}
.si-rules > li > svg:first-child {
  --size: 16px;
  position: absolute;
  top: calc(var(--pd-2, 5px) + 0.775em - 8px);
  left: 0;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-rules > li + li {
  border-top: 1px solid var(--si-line);
}
.si-step-warn {
  border-color: color-mix(in srgb, var(--red, #FF3F3F) 22%, var(--si-line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--red, #FF3F3F) 6%, transparent), rgba(255, 255, 255, 0.02));
}
.si-step-warn .si-step-title {
  color: var(--red, #FF3F3F);
}
.si-step-warn .si-rules > li::before {
  background: var(--red, #FF3F3F);
}
.si-kv > .si-kv-hl {
  margin-inline: calc(var(--pd-2, 5px) * -1);
  padding-inline: var(--pd-2, 5px);
  border-radius: 8px;
  background: color-mix(in srgb, var(--si-hl-alt) 12%, transparent);
}
.si-kv > .si-kv-hl dt {
  color: var(--si-hl-alt);
}
.si-kv > .si-kv-hl dd {
  color: var(--si-hl);
}
.si-kv > .si-kv-hl,
.si-kv > .si-kv-hl + div {
  border-top-color: transparent;
}
.si-figures {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: var(--pd-3, 10px);
  margin: 0;
  padding: var(--pd-3, 10px);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.si-figures > figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-1, 2px);
  margin: 0;
}
.si-figures img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
}
.si-figures figcaption {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.si-grid > .si-video {
  align-self: center;
}
.si-feats {
  display: grid;
  gap: var(--pd-5, 20px);
}
.si-feat,
.si-prize {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--si-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.si-feat:hover,
.si-prize:hover {
  border-color: color-mix(in srgb, var(--si-hl-alt) 35%, transparent);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .si-feat,
.si-prize {
    transition: none;
  }
}
.si-feat {
  grid-template-rows: auto 1fr;
}
.si-prize {
  border-color: color-mix(in srgb, var(--si-hl) 30%, transparent);
  background: radial-gradient(70% 120% at 0% 50%, color-mix(in srgb, var(--si-hl) 12%, transparent), transparent 60%), rgba(255, 255, 255, 0.03);
}
.si-feat-media,
.si-prize-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 240px;
  padding: var(--pd-4, 12px) var(--pd-4, 12px) 0;
  background: radial-gradient(60% 70% at 50% 100%, color-mix(in srgb, var(--si-hl-alt) 28%, transparent), transparent 70%), rgba(0, 0, 0, 0.25);
}
.si-feat-media img,
.si-prize-media img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6));
}
.si-feat-media-ui {
  align-items: center;
  padding-bottom: var(--pd-4, 12px);
}
.si-feat-media-ui img {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  filter: none;
}
.si-feat-body,
.si-prize-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-3, 10px);
  min-width: 0;
  padding: var(--pd-5, 20px);
  font-size: var(--font-sm, 14px);
  line-height: 1.6;
}
.si-feat-body > .si-rules,
.si-prize-body > .si-rules {
  align-self: stretch;
}
.si-feat-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  padding: 3px var(--pd-3, 10px);
  border: 1px solid var(--si-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--si-hl);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.4;
}
.si-feat-tag svg {
  --size: 14px;
  flex: none;
  width: var(--size);
  height: var(--size);
}
.si .si-feat-title {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-xslg, 20px);
  font-weight: 700;
  line-height: 1.2;
}
.si-feat-media {
  position: relative;
  border-bottom: 1px solid var(--si-line);
}
.si-feat-media > .si-feat-tag {
  position: absolute;
  z-index: 1;
  top: var(--pd-4, 12px);
  left: var(--pd-4, 12px);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.45);
}
.si-feat-step {
  position: absolute;
  top: var(--pd-2, 5px);
  right: var(--pd-4, 12px);
  color: rgba(255, 255, 255, 0.08);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.si-feat-tag + .si-feat-title {
  margin-top: calc(var(--pd-1, 2px) * -1);
}
.si-feat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-self: stretch;
  gap: 2px var(--pd-4, 12px);
  padding-bottom: var(--pd-4, 12px);
  border-bottom: 1px solid var(--si-line);
}
.si-feat-icon {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 40%, transparent);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--si-hl) 22%, transparent), color-mix(in srgb, var(--si-hl-alt) 8%, transparent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--si-hl-alt) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--si-hl);
}
.si-feat-icon svg {
  --size: 24px;
  width: var(--size);
  height: var(--size);
}
.si-feat-sub {
  color: var(--si-muted);
  font-size: var(--font-md, 16px);
  line-height: 1.4;
}
.si-feat-body > p:not([class]) {
  color: rgba(255, 255, 255, 0.85);
}
.si-feat-note {
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  gap: var(--pd-2, 5px);
  padding: var(--pd-2, 5px) var(--pd-3, 10px);
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--si-hl-alt) 8%, transparent);
  line-height: 1.5;
}
.si-feat-note > svg {
  --size: 16px;
  flex: none;
  width: var(--size);
  height: var(--size);
  margin-top: 2px;
  color: var(--si-hl-alt);
}
.si-feat-more {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: var(--pd-1, 2px);
  margin-top: var(--pd-1, 2px);
  padding-top: var(--pd-3, 10px);
  border-top: 1px solid var(--si-line);
  color: var(--si-muted);
}
.si-zones-n {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--si-grad);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--si-hl-alt) 14%, transparent);
  color: rgba(0, 0, 0, 0.8);
  font-size: var(--font-md, 16px);
  font-weight: 700;
  line-height: 1;
}
.si-zones {
  display: grid;
  align-items: center;
  gap: var(--pd-5, 20px);
}
.si-zones-map {
  justify-self: center;
  width: min(100%, 266px);
  margin: 0;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--si-hl-alt) 30%, transparent);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 40px color-mix(in srgb, var(--si-hl-alt) 15%, transparent);
}
.si-zones-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.si-zones-list {
  --si-zone-n: 36px;
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-zones-list > li::before {
  position: absolute;
  top: calc(var(--pd-3, 10px) + var(--si-zone-n) / 2);
  left: calc(var(--pd-4, 12px) + var(--si-zone-n) / 2 - 1px);
  width: 2px;
  height: calc(100% + var(--pd-3, 10px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), var(--si-hl-alt));
  content: "";
}
.si-zones-list > li:nth-child(2)::before {
  background: linear-gradient(180deg, var(--si-hl-alt), var(--si-hl));
}
.si-zones-list > li:last-child::before {
  content: none;
}
.si-zones-list > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--pd-4, 12px);
  padding: var(--pd-3, 10px) var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--font-sm, 14px);
  line-height: 1.55;
}
.si-zones-list .si-zones-n {
  position: relative;
  z-index: 1;
  width: var(--si-zone-n);
  height: var(--si-zone-n);
}
.si-zones-list h3 {
  margin: 0 0 2px;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.25;
}
.si-zones-list > li:nth-child(1) .si-zones-n {
  background: color-mix(in srgb, var(--white, #fff) 16%, var(--box-bg, #051F35));
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05);
  color: var(--white, #fff);
}
.si-zones-list > li:nth-child(2) .si-zones-n {
  background: var(--si-hl-alt);
}
.si-zones-list > li:nth-child(2) h3 {
  color: var(--si-hl-alt);
}
.si-zones-list > li:nth-child(3) {
  border-color: color-mix(in srgb, var(--si-hl) 35%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-hl) 12%, transparent), rgba(255, 255, 255, 0.02));
}
.si-zones-list > li:nth-child(3) .si-zones-n {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--si-hl) 22%, transparent), 0 0 22px color-mix(in srgb, var(--si-hl) 50%, transparent);
}
.si-zones-list > li:nth-child(3) h3 {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
}
.si-arena {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--pd-2, 5px);
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--pd-4, 12px) var(--pd-3, 10px) var(--pd-3, 10px);
}
.si-arena::before {
  position: absolute;
  right: 4%;
  bottom: 22px;
  left: 4%;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--si-hl-alt) 35%, transparent), transparent);
  content: "";
}
.si-arena > figure {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-2, 5px);
  margin: 0;
}
.si-arena img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}
.si-arena figcaption {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.si-arena-link {
  position: relative;
  z-index: 1;
  flex: 1 1 24px;
  align-self: stretch;
  min-width: 16px;
  max-width: 120px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--si-hl-alt) 70%, transparent) 0 8px, transparent 8px 14px) 0 45%/100% 2px no-repeat;
}
.si-arena-crown img {
  max-height: 80px;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--si-hl) 45%, transparent)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}
.si-arena-crown figcaption {
  color: var(--si-hl);
}
.si-outcomes-box {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
}
.si .si-outcomes-title {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.3;
}
.si .si-outcomes-title svg {
  --size: 18px;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl-alt);
}
.si-outcomes {
  display: grid;
  gap: var(--pd-3, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-outcomes > li {
  --si-tone: var(--si-hl-alt);
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  min-width: 0;
  padding: var(--pd-4, 12px);
  border: 1px solid color-mix(in srgb, var(--si-tone) 25%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--si-tone) 10%, transparent), transparent 70%), rgba(255, 255, 255, 0.02);
  font-size: var(--font-sm, 14px);
  line-height: 1.5;
}
.si-outcomes > .si-outcome-ok {
  --si-tone: var(--green-acent, #47D000);
}
.si-outcomes > .si-outcome-bad {
  --si-tone: var(--red, #FF3F3F);
}
.si-outcomes svg {
  --size: 22px;
  width: var(--size);
  height: var(--size);
  color: var(--si-tone);
}
.si-outcomes span {
  color: var(--si-muted);
}
.si .si-outcomes b {
  color: var(--si-tone);
  font-size: var(--font-md, 16px);
  line-height: 1.35;
}
.si-podium-lead,
.si-podium-note {
  text-align: center;
}
.si-podium-lead {
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
}
.si-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--pd-3, 10px);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.si-podium > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
.si .si-podium b {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-xxlg, 26px);
  line-height: 1.1;
}
.si-podium > .si-podium-1 {
  order: 2;
}
.si-podium > .si-podium-2 {
  order: 1;
}
.si-podium > .si-podium-3 {
  order: 3;
}
.si-podium-place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.si-podium-place svg {
  --size: 14px;
  width: var(--size);
  height: var(--size);
  color: var(--si-hl);
}
.si-podium-unit {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
}
.si-podium-step {
  display: flex;
  align-self: stretch;
  justify-content: center;
  height: 48px;
  margin-top: var(--pd-2, 5px);
  padding-top: var(--pd-1, 2px);
  border: 1px solid var(--si-line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  line-height: 1.2;
}
.si-podium-1 .si-podium-step {
  height: 76px;
  border-color: color-mix(in srgb, var(--si-hl) 40%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--si-hl) 22%, transparent), transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--si-hl) 18%, transparent);
  color: var(--si-hl);
}
.si .si-podium-1 b {
  font-size: var(--font-xmlg, 30px);
}
.si-podium-3 .si-podium-step {
  height: 34px;
}
@container (min-width: 760px) {
  .si-land:has(> .si-prize):has(> .si-podium) {
    display: grid;
    grid-template: "head head" auto "prize lead" 1fr "prize podium" auto "prize note" 1fr/minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--pd-4, 12px) var(--pd-5, 20px);
  }
  .si-land:has(> .si-prize):has(> .si-podium) > .si-land-head {
    grid-area: head;
    margin-bottom: var(--pd-2, 5px);
  }
  .si-land:has(> .si-prize):has(> .si-podium) > .si-prize {
    grid-area: prize;
  }
  .si-land:has(> .si-prize):has(> .si-podium) > .si-podium-lead {
    grid-area: lead;
    align-self: end;
  }
  .si-land:has(> .si-prize):has(> .si-podium) > .si-podium {
    grid-area: podium;
  }
  .si-land:has(> .si-prize):has(> .si-podium) > .si-podium-note {
    grid-area: note;
    align-self: start;
  }
  .si-land:has(> .si-podium) > .si-prize {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .si-land:has(> .si-podium) > .si-prize .si-prize-media {
    align-items: center;
    min-height: 0;
    padding: var(--pd-4, 12px) var(--pd-2, 5px);
  }
  .si-land:has(> .si-podium) > .si-prize .si-prize-media img {
    width: 100%;
    height: auto;
    max-height: 240px;
  }
  .si-land:has(> .si-podium) > .si-prize .si-prize-body {
    gap: var(--pd-2, 5px);
    padding: var(--pd-4, 12px) var(--pd-5, 20px);
  }
}
.si-land:has(> .si-podium) .si-prize-body .si-feat-title {
  margin-bottom: 2px;
  font-size: var(--font-xlg, 24px);
}
.si-land:has(> .si-podium) .si-prize-body > p {
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
  line-height: 1.6;
}
.si-land:has(> .si-podium) .si-prize-body > p b {
  color: rgba(255, 255, 255, 0.88);
}
.si-land:has(> .si-podium) .si-prize-body > p:first-of-type {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--font-md, 16px);
  line-height: 1.5;
}
.si-land:has(> .si-podium) .si-prize-body > p:first-of-type b {
  color: var(--white, #fff);
}
.si-land:has(> .si-podium) .si-prize-body > p:has(+ .si-loc) {
  align-self: stretch;
  margin-top: var(--pd-1, 2px);
  padding-top: var(--pd-3, 10px);
  border-top: 1px solid var(--si-line);
}
.si-land:has(> .si-podium) .si-prize-body > .si-loc {
  padding: 4px var(--pd-3, 10px);
  border: 1px solid var(--si-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.4;
}
.si-land:has(> .si-podium) > .si-podium-lead {
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
  line-height: 1.5;
}
.si-land:has(> .si-podium) > .si-podium-lead b {
  color: rgba(255, 255, 255, 0.88);
}
.si-land:has(> .si-podium) > .si-podium-note {
  padding-top: var(--pd-3, 10px);
  border-top: 1px solid var(--si-line);
  font-size: var(--font-sm, 14px);
  line-height: 1.5;
}
.si-versus {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  margin: 0;
  container-type: inline-size;
}
.si-versus > div {
  --si-tone: var(--si-hl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-1, 2px) var(--pd-4, 12px);
  padding: var(--pd-2, 5px) var(--pd-3, 10px);
  border: 1px solid var(--si-line);
  border-left: 3px solid var(--si-tone);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.si-versus > .si-versus-def {
  --si-tone: var(--red, #FF3F3F);
}
.si-versus dt {
  flex: 1 0 100%;
  color: var(--white, #fff);
  font-weight: 700;
}
@container (min-width: 400px) {
  .si-versus dt {
    flex: 1 1 auto;
  }
}
.si-versus dd {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
}
.si .si-versus b {
  color: var(--si-tone);
  font-size: var(--font-md, 16px);
}
.si-versus-note {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
}
@container (min-width: 560px) {
  .si-outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 760px) {
  .si-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .si-feat-media {
    height: 240px;
  }
  .si-prize {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }
  .si-prize-media {
    height: auto;
    min-height: 320px;
    padding-top: var(--pd-5, 20px);
  }
  .si-prize-body {
    justify-content: center;
    padding: var(--pd-6, 30px);
  }
  .si-zones {
    grid-template-columns: 266px minmax(0, 1fr);
    align-items: stretch;
    gap: var(--pd-7, 40px);
  }
  .si-zones-map {
    align-self: center;
  }
  .si-zones-list {
    flex-direction: column-reverse;
  }
  .si-zones-list > li {
    flex: 1 1 0;
    align-items: center;
  }
  .si-zones-list > li::before {
    top: 50%;
  }
  .si-zones-list > li:first-child::before {
    content: none;
  }
  .si-zones-list > li:nth-child(2)::before {
    background: linear-gradient(180deg, var(--si-hl-alt), rgba(255, 255, 255, 0.25));
  }
  .si-zones-list > li:last-child::before {
    background: linear-gradient(180deg, var(--si-hl), var(--si-hl-alt));
    content: "";
  }
  .si-arena img {
    max-height: 150px;
  }
  .si-arena-crown img {
    max-height: 180px;
  }
}
@container (min-width: 900px) {
  .si-outcomes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.si-hero > .si-hero-bg.si-hero-bg-full {
  object-position: 50% 40%;
  opacity: 1;
  filter: brightness(1.25) saturate(1.15);
  mask-image: none;
}
.si-hero:has(> .si-hero-bg-full)::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
  content: "";
}
.si-hero:has(> .si-hero-bg-full) > .si-hero-art {
  order: -1;
  min-height: 170px;
}
@container (min-width: 760px) {
  .si-hero:has(> .si-hero-bg-full)::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.66) 32%, rgba(0, 0, 0, 0.1) 56%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 35%);
  }
  .si-hero:has(> .si-hero-bg-full) > .si-hero-art {
    order: 0;
    min-height: 0;
  }
}
.si .si-play {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-3, 10px);
  color: var(--white, #fff);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
}
.si-play-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--gradient-btn-primary, linear-gradient(180deg, #ffd264 0%, #f0a41e 100%));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--si-hl-alt) 22%, transparent), 0 14px 40px color-mix(in srgb, var(--si-hl-alt) 45%, transparent), inset 0 2px 2px rgba(255, 255, 255, 0.35);
  transition: transform 0.25s ease;
}
.si-play-icon::before {
  width: 26px;
  height: 30px;
  margin-left: 6px;
  background: var(--white, #fff);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}
.si-play-icon::after {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--si-hl-alt) 80%, transparent);
  border-radius: 50%;
  content: "";
}
@media (prefers-reduced-motion: reduce) {
  .si-play-icon {
    transition: none;
  }
}
.si-play:hover .si-play-icon {
  transform: scale(1.07);
}
@container (min-width: 760px) {
  .si-play-icon {
    width: 104px;
    height: 104px;
  }
}
.si-hero-slogan {
  margin: calc(var(--pd-2, 5px) * -1) 0 0;
  color: var(--white, #fff);
  font-size: var(--font-xslg, 20px);
  font-weight: 700;
  line-height: 1.3;
}
@container (min-width: 760px) {
  .si-hero-slogan {
    font-size: var(--font-xlg, 24px);
  }
}
.si-how-step.si-how-final .si-how-n {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--si-hl) 25%, transparent), 0 0 30px color-mix(in srgb, var(--si-hl) 55%, transparent), inset 0 2px 2px rgba(255, 255, 255, 0.35);
}
.si-how-step.si-how-final .si-how-n svg {
  width: 50%;
  height: 50%;
  color: rgba(0, 0, 0, 0.8);
}
.si-how-step.si-how-final .si-how-n::after {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--si-hl) 80%, transparent);
  border-radius: 50%;
  content: "";
}
.si-how-step.si-how-final h3 {
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
}
.si-how-step.si-how-final p {
  color: var(--si-hl-alt);
  font-weight: 700;
}
.si-hero:has(> .si-hero-bg) > .si-hero-art {
  z-index: 1;
}
.si-hero-art > .si-video {
  position: relative;
  border-color: color-mix(in srgb, var(--si-hl-alt) 35%, transparent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.si-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-3, 10px);
}
.si .si-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  height: var(--btn-height, 44px);
  padding: 0 var(--pd-5, 20px);
  border-radius: 10px;
  background: var(--gradient-btn-primary, linear-gradient(180deg, #ffd264 0%, #f0a41e 100%));
  color: var(--white, #fff);
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.si .si-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.si .si-btn svg {
  --size: 16px;
  flex: none;
  width: var(--size);
  height: var(--size);
}
@media (prefers-reduced-motion: reduce) {
  .si .si-btn {
    transition: none;
  }
}
.si .si-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.si [id] {
  scroll-margin-top: 100px;
}
@container (min-width: 760px) {
  .si-hero:has(> .si-hero-bg):has(> .si-hero-art) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .si-hero:has(> .si-hero-bg):has(> .si-hero-art) .si-hero-body {
    max-width: none;
  }
  .si-hero:has(> .si-hero-bg):has(> .si-hero-art:empty) {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .si-hero:has(> .si-hero-bg) .si-hero-facts {
    align-self: stretch;
  }
  .si-how-steps:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.si-text {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  line-height: 1.65;
}
.si-text > p {
  max-width: 80ch;
}
.si :is(p, li, dd) img {
  max-height: 2.4em;
  object-fit: contain;
  vertical-align: middle;
}
.si-inline-img {
  display: inline-block;
  max-height: 1.5em;
  vertical-align: middle;
}
.si-table-wrap {
  overflow: auto;
  max-height: min(70vh, 720px);
  border: 1px solid var(--si-line);
  border-radius: 12px;
  background: var(--box-bg, #051F35);
  overscroll-behavior: contain;
}
.si-table-wrap::-webkit-scrollbar {
  width: var(--scroll-thumb-size, 6px);
  height: var(--scroll-thumb-size, 6px);
}
.si-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.si-table-wrap::-webkit-scrollbar-thumb {
  width: var(--scroll-thumb-size, 6px);
  height: var(--scroll-thumb-size, 6px);
  border-radius: 2px;
  background: #444254;
}
@-moz-document url-prefix() {
  .si-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: #444254 transparent;
  }
}
.si-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  font-size: var(--font-sm, 14px);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.si-table th,
.si-table td {
  padding: var(--pd-2, 5px) var(--pd-4, 12px);
  border: 0;
  border-bottom: 1px solid var(--si-line);
  overflow-wrap: normal;
}
.si-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom-color: color-mix(in srgb, var(--si-hl-alt) 45%, transparent);
  background: color-mix(in srgb, var(--si-hl-alt) 10%, var(--box-bg, #051F35));
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
}
.si-table td {
  color: rgba(255, 255, 255, 0.85);
}
.si-table th:first-child,
.si-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--box-bg, #051F35);
}
.si-table th:first-child {
  z-index: 3;
  background: color-mix(in srgb, var(--si-hl-alt) 10%, var(--box-bg, #051F35));
}
.si-table td:first-child {
  color: var(--white, #fff);
  font-weight: 700;
}
.si-table tbody tr:nth-child(even) td:not(:first-child) {
  background: rgba(255, 255, 255, 0.025);
}
.si-table tbody tr:hover td:not(:first-child) {
  background: color-mix(in srgb, var(--si-hl-alt) 8%, transparent);
}
.si-table .si-tier-start td {
  border-top: 1px solid color-mix(in srgb, var(--si-hl-alt) 45%, transparent);
}
.si-table .si-tier-start td:nth-child(2) {
  color: var(--si-hl-alt);
  font-weight: 700;
}
.si-table .si-hl {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  font-weight: 700;
}
.si-table img {
  vertical-align: middle;
}
.si [data-diff=normal] {
  --si-diff: var(--light-blue, #2BA8FB);
}
.si [data-diff=hard] {
  --si-diff: var(--bright-orange, #E67E23);
}
.si [data-diff=nightmare] {
  --si-diff: var(--purple-lighth, #AE6CF1);
}
.si [data-diff=expert] {
  --si-diff: color-mix(in srgb, var(--light-blue, #2BA8FB) 45%, var(--green-acent, #47D000));
}
.si-table th[data-diff] {
  color: var(--si-diff);
}
.si-diff {
  --si-acc: var(--si-diff, var(--si-hl-alt));
  border-color: color-mix(in srgb, var(--si-acc) 22%, var(--si-line));
  background: radial-gradient(ellipse 80% 140px at 0 0, color-mix(in srgb, var(--si-acc) 12%, transparent), transparent), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--si-acc) 55%, transparent);
}
.si-diff .si-sub {
  color: color-mix(in srgb, var(--si-acc) 70%, var(--si-muted));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.si-diff .si-sub::after {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--si-acc) 25%, transparent), transparent);
  content: "";
}
.si-diff .si-kv > div {
  gap: 6px;
  padding: var(--pd-3, 10px) 0;
}
.si-diff .si-kv > div:first-child {
  padding-top: 0;
}
.si-diff .si-kv > div + div {
  border-top-color: rgba(255, 255, 255, 0.08);
}
.si-diff .si-kv dt {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.si-diff .si-kv dt svg {
  color: var(--si-acc);
}
.si-diff .si-kv dd.si-drops {
  gap: 6px;
  text-align: left;
}
.si-diff .si-kv dd.si-drops > span {
  padding: 5px var(--pd-2, 5px);
  font-weight: 500;
}
.si-diff .si-kv dd.si-drops span span {
  overflow: visible;
  white-space: normal;
}
.si-diff .si-kv dd.si-drops b {
  background: color-mix(in srgb, var(--si-acc) 18%, transparent);
  color: var(--si-acc);
}
.si-diff .si-kv > .si-kv-hl {
  margin-top: var(--pd-1, 2px);
  padding: var(--pd-3, 10px) var(--pd-2, 5px);
  background: color-mix(in srgb, var(--si-acc) 14%, transparent);
}
.si-diff .si-kv > .si-kv-hl dt {
  color: var(--si-acc);
}
.si-diff .si-kv > .si-kv-hl dd {
  color: var(--white, #fff);
}
.si-diff .si-kv > .si-kv-hl,
.si-diff .si-kv > .si-kv-hl + div {
  border-top-color: transparent;
}
.si-diff-head {
  display: flex;
  align-items: center;
  gap: var(--pd-4, 12px);
}
.si-diff-head > img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--si-acc) 40%, transparent));
}
.si-diff-head > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pd-2, 5px);
  min-width: 0;
}
.si-diff-name {
  margin: 0;
  color: var(--si-acc);
  font-size: var(--font-xlg, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}
.si .si-diff-req {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-1, 2px) var(--pd-2, 5px);
  padding: 2px var(--pd-2, 5px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-acc) 14%, transparent);
  color: var(--white, #fff);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1.5;
}
.si .si-diff-req img {
  width: 20px;
  height: 20px;
}
.si-diff-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pd-4, 12px);
}
.si-diff-row > .si-profile {
  --si-pip-on: var(--si-diff);
  flex-direction: column;
  align-items: stretch;
}
.si-diff-row > .si-profile > .si-anim {
  width: 100%;
  height: 190px;
}
.si-diff-row > .si-profile .si-profile-body {
  flex: none;
}
@container (min-width: 760px) {
  .si-diff-row {
    grid-template-columns: minmax(0, 0.9fr) repeat(2, minmax(0, 1fr));
  }
}
.si-diff-row > .si-diff {
  justify-content: center;
  text-align: center;
}
.si-diff-row > .si-diff .si-diff-head {
  flex-direction: column;
}
.si-diff-row > .si-diff .si-diff-head > img {
  width: 112px;
  height: 112px;
}
.si-diff-row > .si-diff .si-diff-head > div {
  align-items: center;
}
.si-diff-row > .si-diff .si-kv > .si-kv-long {
  align-items: center;
}
.si-diff-row > .si-diff .si-kv > .si-kv-long dd {
  justify-content: center;
  text-align: center;
}
.si-step > .si-list {
  padding: 0;
}
.si-step > .si-list > div {
  padding-inline: 0;
}
.si-reqs li > img {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.si-hero > .si-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 35%;
  opacity: 0.3;
  mask-image: linear-gradient(180deg, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.si-hero-emblems {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.si-hero-emblems img {
  --si-r: 0deg;
  --si-y: 0px;
  flex: none;
  width: 84px;
  height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--si-diff) 50%, transparent));
  transform: translateY(var(--si-y)) rotate(var(--si-r));
}
.si-hero-emblems img + img {
  margin-left: -14px;
}
.si-hero-emblems img:first-child {
  --si-r: -12deg;
  --si-y: 10px;
}
.si-hero-emblems img:last-child {
  --si-r: 12deg;
  --si-y: 10px;
}
.si-hero-emblems img:nth-child(2):not(:nth-last-child(2)) {
  --si-r: -4deg;
}
.si-hero-emblems img:nth-child(3):not(:last-child) {
  --si-r: 4deg;
}
.si-hero-emblems img:nth-child(2):nth-last-child(2) {
  --si-y: -6px;
  z-index: 1;
  width: 100px;
  height: 100px;
}
@container (max-width: 759px) {
  .si-hero:has(> .si-hero-bg) .si-hero-facts:has(> li:nth-child(4):last-child) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 760px) {
  .si-hero:has(> .si-hero-bg) .si-hero-facts {
    flex-wrap: nowrap;
  }
  .si-hero:has(> .si-hero-bg) .si-hero-facts li {
    flex: 1 1 0;
    min-width: 0;
    max-width: 170px;
    background: rgba(0, 0, 0, 0.35);
  }
  .si-hero > .si-hero-bg {
    opacity: 0.5;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 35%, rgb(0, 0, 0) 85%);
  }
  .si-hero-emblems img {
    width: 130px;
    height: 130px;
  }
  .si-hero-emblems img + img {
    margin-left: -34px;
  }
  .si-hero-emblems img:nth-child(2):nth-last-child(2) {
    width: 156px;
    height: 156px;
  }
}
.si-land > .si-recipe {
  align-self: center;
}
.si-prep {
  display: grid;
  gap: var(--pd-4, 12px);
}
@container (min-width: 760px) {
  .si-prep {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.si-prep-card {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  min-width: 0;
  padding: var(--pd-4, 12px);
  border: 1px solid var(--si-line);
  border-radius: 14px;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--si-hl-alt) 8%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.si-prep-title {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--font-lg, 18px);
  font-weight: 700;
  line-height: 1.2;
}
.si-prep-title > svg {
  --size: 18px;
  flex: none;
  box-sizing: content-box;
  width: var(--size);
  height: var(--size);
  padding: 8px;
  border-radius: 10px;
  background: var(--si-grad);
  color: var(--white, #fff);
}
.si-prep-pill {
  margin-left: auto;
  padding: 2px var(--pd-3, 10px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--si-hl-alt) 16%, transparent);
  color: var(--si-hl-alt);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  white-space: nowrap;
}
.si-craft-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-craft-in li {
  display: flex;
  align-items: center;
  gap: var(--pd-2, 5px);
  min-width: 0;
  padding: 5px var(--pd-2, 5px);
  border: 1px solid var(--si-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--white, #fff);
  font-size: var(--font-xs, 12px);
  line-height: 1.25;
}
.si-craft-in span {
  flex: 1;
}
.si-craft-in b {
  flex: none;
  padding: 0 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--si-hl-alt) 18%, transparent);
  color: var(--si-hl-alt);
  line-height: 1.5;
}
.si .si-craft-in img {
  flex: none;
  width: 26px;
  height: 26px;
  max-height: none;
  object-fit: contain;
}
.si .si-craft-glyph {
  flex: none;
  width: 26px;
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  text-align: center;
}
.si-vbars {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--pd-2, 5px);
  height: 140px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.si-vbars li {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--pd-2, 5px);
  min-width: 0;
  text-align: center;
}
.si-vbars b {
  display: flex;
  align-self: end;
  justify-content: center;
  height: var(--value);
  min-height: 2.4em;
  padding-top: 6px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--si-hl) 0%, var(--si-hl-alt) 100%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--si-hl-alt) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: rgba(0, 0, 0, 0.8);
  font-size: var(--font-sm, 14px);
  font-weight: 700;
  line-height: 1.2;
  transform-origin: 50% 100%;
}
.si-vbars span {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
}
.si-vbars + p {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  text-align: center;
}
@media (max-width: 767px) {
  .si-title {
    font-size: var(--font-xslg, 20px);
  }
  .si-section {
    font-size: var(--font-lg, 18px);
  }
  .si-start p {
    font-size: var(--font-lg, 18px);
  }
  .si-lead {
    font-size: var(--font-xslg, 20px);
  }
  .si-callout p {
    font-size: var(--font-md, 16px);
  }
}
.si-roster {
  position: relative;
}
.si-roster [data-cls=dw] {
  --si-acc: var(--light-blue, #2BA8FB);
}
.si-roster [data-cls=dk] {
  --si-acc: var(--bright-orange, #E67E23);
}
.si-roster [data-cls=elf] {
  --si-acc: var(--green-acent, #47D000);
}
.si-roster [data-cls=mg] {
  --si-acc: var(--purple-lighth, #AE6CF1);
}
.si-roster [data-cls=dl] {
  --si-acc: var(--yellow-acent, #FFB800);
}
.si-roster [data-cls=sum] {
  --si-acc: var(--purple, #d800f1);
}
.si-roster [data-cls=rf] {
  --si-acc: var(--red, #FF3F3F);
}
.si-cls-none,
.si-cls-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.si-roster-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--pd-3, 10px);
}
.si-roster-tiles > label {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 5/7;
  border: 1px solid var(--si-line);
  border-radius: 14px;
  background: radial-gradient(80% 45% at 50% 100%, color-mix(in srgb, var(--si-acc) 45%, transparent), transparent 75%), radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--si-acc) 14%, transparent), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.si-roster-tiles > label::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--si-acc), transparent);
  content: "";
}
.si-roster-tiles > label img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  filter: saturate(0.9) brightness(0.9);
  transition: transform 0.35s ease, filter 0.25s ease;
}
.si-roster-tiles > label:hover {
  border-color: color-mix(in srgb, var(--si-acc) 55%, transparent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 26px color-mix(in srgb, var(--si-acc) 30%, transparent);
  transform: translateY(-4px);
}
.si-roster-tiles > label:hover img {
  filter: none;
  transform: scale(1.05);
}
.si-roster-cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pd-7, 40px) var(--pd-2, 5px) var(--pd-3, 10px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85) 55%);
  text-align: center;
}
.si-roster-cap b {
  font-size: var(--font-sm, 14px);
  line-height: 1.2;
}
.si-roster-cap span {
  color: color-mix(in srgb, var(--si-acc) 65%, var(--white, #fff));
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
  text-wrap: balance;
}
.si-cls-input:checked + label {
  border-color: var(--si-acc);
  box-shadow: 0 0 0 1px var(--si-acc), 0 0 30px color-mix(in srgb, var(--si-acc) 45%, transparent), 0 14px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-4px);
}
.si-cls-input:checked + label img {
  filter: none;
}
.si-roster-tiles:has(.si-cls-input:checked) > .si-cls-input:not(:checked) + label img {
  filter: grayscale(0.6) brightness(0.6);
}
.si-cls-input:focus-visible + label {
  outline: 2px solid var(--white, #fff);
  outline-offset: 2px;
}
.si-cls-input:checked + label + .si-panel {
  display: grid;
}
.si-cls-panel .si-eyebrow {
  align-self: flex-start;
  border-color: color-mix(in srgb, var(--si-acc) 40%, transparent);
  background: color-mix(in srgb, var(--si-acc) 14%, transparent);
  color: color-mix(in srgb, var(--si-acc) 80%, var(--white, #fff));
}
.si .si-cls-name {
  margin: calc(var(--pd-2, 5px) * -1) 0 0;
  color: var(--white, #fff);
  font-size: clamp(var(--font-xxlg, 26px), 3.6cqi, var(--font-xxxlg, 48px));
  letter-spacing: 0.03em;
  line-height: 1.05;
  text-transform: uppercase;
}
.si-cls-pitch {
  color: rgba(255, 255, 255, 0.8);
}
.si-cls-art {
  width: 100%;
  max-width: 380px;
  height: 400px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--si-acc) 40%, transparent)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}
.si-cls-side {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
  min-width: 0;
}
.si-cls-side .si-btn {
  align-self: flex-start;
  margin-top: var(--pd-2, 5px);
}
.si .si-cls-h {
  margin: 0;
  color: color-mix(in srgb, var(--si-acc) 70%, var(--si-muted));
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.si-cls-h ~ .si-cls-h {
  margin-top: var(--pd-2, 5px);
}
.si-cls-path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-cls-path li {
  display: flex;
  align-items: center;
  gap: var(--pd-3, 10px);
  padding: 6px var(--pd-3, 10px);
  border: 1px solid var(--si-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.si-cls-path li:last-child {
  border-color: color-mix(in srgb, var(--si-acc) 45%, transparent);
  background: color-mix(in srgb, var(--si-acc) 10%, transparent);
}
.si-cls-path span {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--si-acc) 28%, transparent);
  color: var(--white, #fff);
  font-size: var(--font-xs, 12px);
  font-weight: 700;
  line-height: 1;
}
.si-cls-path b {
  font-size: var(--font-sm, 14px);
}
.si-cls-note {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
}
.si-cls-stats {
  display: flex;
  flex-direction: column;
  gap: var(--pd-2, 5px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.si-cls-stats li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: var(--pd-2, 5px);
  align-items: center;
}
.si-cls-stats svg {
  --size: 18px;
  grid-row: span 2;
  width: var(--size);
  height: var(--size);
  color: var(--si-acc);
}
.si-cls-stats b {
  font-size: var(--font-sm, 14px);
  line-height: 1.2;
}
.si-cls-stats span {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
@container (min-width: 520px) {
  .si-roster-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (min-width: 860px) {
  .si-roster-tiles {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@container (max-width: 759px) {
  .si-cls-art {
    height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .si-roster-tiles > label,
.si-roster-tiles img {
    transition: none;
  }
}
.si-hero-start {
  display: flex;
  align-items: flex-start;
  gap: var(--pd-2, 5px);
  color: var(--si-muted);
  font-size: var(--font-sm, 14px);
  line-height: 1.5;
}
.si-hero-start svg {
  --size: 16px;
  flex: none;
  width: var(--size);
  height: var(--size);
  margin-top: 0.2em;
  color: var(--si-hl-alt);
}
.si-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  border-block: 1px solid var(--si-line);
}
.si-stats > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pd-2, 5px);
  padding: var(--pd-5, 20px) var(--pd-3, 10px);
  box-shadow: -1px 0 0 var(--si-line), 0 -1px 0 var(--si-line);
  text-align: center;
}
.si-stats dt {
  color: var(--si-muted);
  font-size: var(--font-xs, 12px);
  line-height: 1.3;
}
.si-stats dd {
  margin: 0;
  background: var(--si-grad);
  background-clip: text;
  color: transparent;
  font-size: var(--font-xxlg, 26px);
  font-weight: 700;
  line-height: 1.1;
}
@container (min-width: 520px) {
  .si-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (min-width: 900px) {
  .si-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .si-stats dd {
    font-size: var(--font-xmlg, 30px);
  }
}
.si-land-open > .si-shot.si-shot-wide {
  width: 100%;
}
.si-ui-shot {
  display: block;
  width: 125px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--si-line);
  border-radius: 10px;
}
.si-rates {
  display: flex;
  flex-direction: column;
  gap: var(--pd-3, 10px);
}
.si-vbars-many {
  height: 200px;
}
@container (max-width: 559px) {
  .si-vbars-many {
    grid-auto-flow: row;
    gap: 6px;
    height: auto;
  }
  .si-vbars-many li {
    grid-template-columns: 3.5em minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    text-align: left;
  }
  .si-vbars-many span {
    order: -1;
  }
  .si-vbars-many b {
    justify-content: flex-end;
    width: var(--value);
    min-width: 4em;
    height: auto;
    white-space: nowrap;
    min-height: 0;
    padding: 3px var(--pd-3, 10px);
    border-radius: 4px 10px 10px 4px;
    background: linear-gradient(90deg, var(--si-hl-alt) 0%, var(--si-hl) 100%);
  }
}

@keyframes si-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.si-panel {
  animation: si-panel-in 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .si-panel {
    animation: none;
  }
}
@keyframes si-hero-drift {
  from {
    transform: rotate(-10deg) translateY(6px);
  }
  to {
    transform: rotate(-10deg) translateY(-6px);
  }
}
@container (min-width: 760px) {
  .si-hero-icons {
    transform: rotate(-10deg);
    animation: si-hero-drift 6s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  .si-hero-icons {
    animation: none;
  }
}
@keyframes si-emblems-float {
  from {
    transform: translateY(6px);
  }
  to {
    transform: translateY(-6px);
  }
}
@container (min-width: 760px) {
  .si-hero-emblems {
    animation: si-emblems-float 5s ease-in-out infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  .si-hero-emblems {
    animation: none;
  }
}
@keyframes si-how-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
@keyframes si-how-fill-y {
  from {
    scale: 1 0;
  }
}
@keyframes si-how-fill-x {
  from {
    scale: 0 1;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .si-how-step {
      view-timeline: --si-how-step block;
      animation: si-how-rise linear both;
      animation-timeline: --si-how-step;
      animation-range: entry 0% entry 55%;
    }
    .si-how-step:nth-child(2) {
      animation-range: entry 12% entry 67%;
    }
    .si-how-step:nth-child(3) {
      animation-range: entry 24% entry 79%;
    }
    .si-how-step:nth-child(4) {
      animation-range: entry 36% entry 91%;
    }
    .si-how-step::after {
      animation: si-how-fill-y linear both;
      animation-timeline: --si-how-step;
      animation-range: entry 45% entry 85%;
    }
    .si-how-step:nth-child(2)::after {
      animation-range: entry 65% entry 100%;
    }
    @container (min-width: 760px) {
      .si-how-step::after {
        animation-name: si-how-fill-x;
      }
    }
  }
}
@keyframes si-vbar-grow {
  from {
    scale: 1 0;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .si-vbars {
      view-timeline: --si-vbars block;
    }
    .si-vbars b {
      animation: si-vbar-grow ease-out both;
      animation-timeline: --si-vbars;
      animation-range: entry 10% entry 70%;
    }
    .si-vbars li:nth-child(2 b) {
      animation-range: entry 18% entry 78%;
    }
    .si-vbars li:nth-child(3 b) {
      animation-range: entry 26% entry 86%;
    }
    .si-vbars li:nth-child(4 b) {
      animation-range: entry 34% entry 94%;
    }
    .si-vbars li:nth-child(5 b) {
      animation-range: entry 42% entry 100%;
    }
  }
}
@keyframes si-play-ripple {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}
.si-play-icon::after,
.si-how-final .si-how-n::after {
  animation: si-play-ripple 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .si-play-icon::after,
.si-how-final .si-how-n::after {
    animation: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.si a[href^="#"]) {
    scroll-behavior: smooth;
  }
}


/* ===== News: .nl ===== */

/* News landing (nl-*). Self-contained: theme tokens with fallbacks, so it also reads right in the admin preview. */
.nl {
  --nl-hl: var(--theme-main-color, #ffc94a);
  --nl-hl2: var(--bright-orange, #e67e23);
  --nl-line: rgba(255, 255, 255, 0.07);
  --nl-panel: rgba(255, 255, 255, 0.035);
  --nl-muted: rgba(255, 255, 255, 0.6);
  --nl-text: rgba(255, 255, 255, 0.8);
  --nl-grad: var(--gold-text-gradient, linear-gradient(0deg, #f0a41e 0%, #ffe49b 100%));
  --nl-btn: var(--gradient-btn-primary, linear-gradient(180deg, #ffd264 0%, #f0a41e 100%));
  --nl-radius: 16px;

  display: flex;
  flex-direction: column;
  color: var(--nl-text);
  font-size: 16px;
  line-height: 1.65;
}

/* Reset of the site's article typography inside the landing.
   :where() keeps these at one-class specificity: enough to beat the site's tag rules,
   but an author's own class on the element (.sr-q …) still wins. */
.nl :where(p, span, b, i, strong) { font-size: inherit; line-height: inherit; }
.nl :where(p) { margin: 0 0 0.8em; }
.nl :where(p:last-child) { margin-bottom: 0; }
.nl :where(h2, h3, figure) { margin: 0; }
.nl :where(a) { color: var(--nl-hl); }
.nl :where(strong) { color: #fff; }
.nl :where(img) { max-width: 100%; }

.nl .nl-hl { color: var(--nl-hl); font-weight: 600; }
.nl .nl-hl2 { color: var(--nl-hl2); font-weight: 600; }
.nl .nl-hot {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #e0352b;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.06em;
  vertical-align: 2px;
}

/* ---------- Media ---------- */
.nl .nl-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.nl .nl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nl .nl-lead-video { margin-bottom: 28px; }
.nl .nl-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nl-line);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.nl .nl-shot img, .nl .nl-class-img img, .nl .nl-boss-img img { display: block; width: 100%; height: auto; }
/* Same frame for every portrait in a row; the whole model stays visible. */
.nl .nl-class-img img { aspect-ratio: 3 / 4; object-fit: contain; }
.nl .nl-boss-img img { aspect-ratio: 1 / 1; object-fit: contain; }
.nl .nl-boss-wide .nl-boss-img img { aspect-ratio: 16 / 9; }
.nl .nl-wide img { aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- Intro and contents ---------- */
.nl .nl-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 4px 0 8px; }
.nl .nl-eyebrow {
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nl-hl) 12%, transparent);
  color: var(--nl-hl);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nl .nl-lead-text { max-width: 880px; color: rgba(255, 255, 255, 0.86); font-size: 18px; line-height: 1.7; }
.nl .nl-toc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  margin-top: 10px;
  color: var(--nl-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nl .nl-toc-title::after { flex: 1; height: 1px; background: var(--nl-line); content: ''; }
.nl .nl-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; align-self: stretch; }
.nl .nl-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid var(--nl-line);
  border-radius: 12px;
  background: var(--nl-panel);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.nl .nl-toc a:hover {
  border-color: color-mix(in srgb, var(--nl-hl) 45%, transparent);
  background: color-mix(in srgb, var(--nl-hl) 8%, transparent);
  transform: translateY(-2px);
}
.nl .nl-toc-n {
  flex: none;
  min-width: 22px;
  background: var(--nl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 15px;
  font-weight: 800;
}

/* ---------- Sections ---------- */
.nl .nl-sec {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 64px;
  scroll-margin-top: calc(var(--header-height, 70px) + 16px);
}
.nl .nl-head { display: flex; align-items: center; gap: 16px; }

/* Back to the contents, at the end of every section's rule line. */
.nl .nl-up {
  display: grid;
  flex: none;
  order: 2;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nl-line);
  border-radius: 50%;
  background: var(--nl-panel);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nl .nl-up::before {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-top: 2px solid var(--nl-muted);
  border-left: 2px solid var(--nl-muted);
  transform: rotate(45deg);
  content: '';
}
@media (pointer: coarse) {
  .nl .nl-up { width: 44px; height: 44px; }
}
.nl .nl-up:hover { border-color: color-mix(in srgb, var(--nl-hl) 45%, transparent); background: color-mix(in srgb, var(--nl-hl) 10%, transparent); }
.nl .nl-up:hover::before { border-color: var(--nl-hl); }
.nl .nl-toc-title { scroll-margin-top: calc(var(--header-height, 70px) + 16px); }

/* Keyboard focus stays visible on every link of the landing. */
.nl a:focus-visible { outline: 2px solid var(--nl-hl); outline-offset: 3px; }
.nl .nl-up:focus-visible, .nl .nl-btn:focus-visible { outline-offset: 4px; }

/* Contents links glide to their section, unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.nl) { scroll-behavior: smooth; }
}
.nl .nl-head::before,
.nl .nl-head::after {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nl-hl) 45%, transparent), transparent);
  content: '';
}
.nl .nl-head::before { order: -1; transform: scaleX(-1); }

.nl .nl-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nl-hl) 12%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--nl-hl) 18%, transparent);
  color: var(--nl-hl);
  font-size: 15px;
  font-weight: 800;
}
.nl .nl-title {
  background: var(--nl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nl .nl-subhead { color: #fff; font-size: 18px; font-weight: 700; line-height: 1.4; }

/* Text and picture side by side; nl-rev puts the picture first. */
.nl .nl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
.nl .nl-split.nl-rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.nl .nl-split.nl-rev > :last-child { order: -1; }
.nl .nl-split-top { align-items: start; }
.nl .nl-text { max-width: 600px; }

/* ---------- Cards ---------- */
.nl .nl-cards, .nl .nl-videos, .nl .nl-compare { display: grid; gap: 16px; }
.nl .nl-cards-2, .nl .nl-videos, .nl .nl-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl .nl-cards-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.nl .nl-compare { align-items: start; }

.nl .nl-card {
  padding: 22px 24px;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nl .nl-card-accent {
  border-color: color-mix(in srgb, var(--nl-hl) 30%, transparent);
  background: color-mix(in srgb, var(--nl-hl) 6%, transparent);
}
.nl .nl-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 12px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.nl .nl-card-title .nl-hl, .nl .nl-card-title .nl-hl2 { font-weight: 800; }
.nl .nl-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.nl .nl-icons img { width: 44px; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* A card with a picture of its subject on the left (event monster). */
.nl .nl-card-avatar { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 18px; }
.nl .nl-avatar { overflow: hidden; border: 1px solid var(--nl-line); border-radius: 12px; background: #000; }
.nl .nl-avatar img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

.nl .nl-note {
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 18%, transparent);
  border-left: 3px solid var(--nl-hl);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nl-hl) 5%, transparent);
}
.nl .nl-note-row { display: flex; align-items: center; gap: 16px; }
.nl .nl-note-row .nl-icons { flex: none; margin: 0; }
.nl .nl-note-row .nl-icons img { width: 36px; }

/* One item per row: icon, name and change. */
.nl .nl-rows { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 14px; }
.nl .nl-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--nl-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* A paragraph that opened with a warning sign. */
.nl .nl-callout {
  position: relative;
  margin-top: 14px;
  padding: 12px 14px 12px 46px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 25%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nl-hl) 8%, transparent);
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.55;
}
.nl .nl-callout::before {
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nl-hl);
  color: #111;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  content: '!';
}

/* Label / value rows: boss and monster stats. */
.nl .nl-kvs { display: flex; flex-direction: column; }
.nl .nl-kv {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--nl-line);
  font-size: 14px;
  line-height: 1.5;
}
.nl .nl-kv:first-child { padding-top: 0; }
.nl .nl-kv:last-child { padding-bottom: 0; border-bottom: 0; }
.nl .nl-k {
  padding-top: 2px;
  color: var(--nl-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nl .nl-v { color: #fff; font-weight: 600; }
.nl .nl-kv-card .nl-kv { grid-template-columns: 150px minmax(0, 1fr); font-size: 15px; }

/* ---------- Master skills ---------- */
.nl .nl-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.nl .nl-skill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--nl-line);
  border-radius: 14px;
  background: var(--nl-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nl .nl-skill-icon { flex: none; width: 52px; }
.nl .nl-skill-icon img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.nl .nl-skill-name { display: block; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.3; }
.nl .nl-skill-desc { display: block; margin-top: 3px; color: var(--nl-muted); font-size: 14px; line-height: 1.45; }

/* ---------- Socket recipes as numbered steps ---------- */
.nl .nl-steps { display: flex; flex-direction: column; gap: 14px; }
.nl .nl-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px);
  align-items: start;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nl .nl-step-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--nl-hl) 12%, transparent);
  color: var(--nl-hl);
  font-size: 15px;
  font-weight: 800;
}
.nl .nl-step-body { min-width: 0; }

/* ---------- Recipes: title + success rate, result line, ingredient table, notes ---------- */
.nl .nl-recipe { display: flex; flex-direction: column; gap: 14px; }
.nl .nl-recipe > p { margin: 0; }
.nl .nl-recipe-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.nl .nl-recipe-head-end { justify-content: flex-end; }
.nl .nl-recipe-head .nl-card-title { min-height: 36px; margin: 0; }
.nl .nl-rate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nl-hl) 8%, transparent);
  white-space: nowrap;
}
.nl .nl-rate-k { color: var(--nl-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nl .nl-rate-v {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--nl-btn);
  color: var(--btn-primary-text, #1a1204);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

/* The line that says what the recipe makes, with its item icons in small tiles. */
.nl .nl-recipe-intro { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 2.2; }
.nl .nl-recipe-intro img {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  margin: 0 2px;
  padding: 4px;
  border: 1px solid var(--nl-line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  object-fit: contain;
  vertical-align: middle;
}

.nl .nl-ingr {
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--nl-line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  list-style: none;
}
.nl .nl-ingr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid var(--nl-line);
  font-size: 15px;
  line-height: 1.4;
}
.nl .nl-ingr-row:last-child { border-bottom: 0; }
.nl .nl-qty {
  flex: none;
  width: 44px;
  color: var(--nl-hl);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Wide enough for an armor icon, so names line up whatever the item is. */
.nl .nl-ic { display: flex; flex: none; align-items: center; justify-content: center; gap: 4px; min-width: 60px; }
.nl .nl-ic img { max-height: 36px; width: auto; object-fit: contain; vertical-align: middle; }
.nl .nl-name { min-width: 0; color: #fff; font-weight: 600; }
.nl .nl-ingr-zen .nl-name { color: var(--nl-hl); font-weight: 800; font-variant-numeric: tabular-nums; }
/* "Any of these six": the icons wrap and the name follows them instead of being pushed out of the card. */
.nl .nl-ingr-multi { flex-wrap: wrap; }
.nl .nl-ingr-multi .nl-ic { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-start; }
.nl .nl-recipe > p:not(.nl-recipe-intro):not(.nl-callout) { color: var(--nl-muted); font-size: 14px; line-height: 1.6; }

/* Seed Sphere levels: 2 × 2, so each card has room for a one-line ingredient table. */
.nl .nl-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl .nl-step .nl-shot { box-shadow: none; }

/* ---------- Class sets, monsters, glow levels ---------- */
.nl .nl-classes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.nl .nl-classes.nl-classes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nl .nl-classes-3 .nl-class { padding: 8px 8px 10px; }
.nl .nl-classes-3 figcaption { font-size: 11px; }
.nl .nl-class {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 12px;
  border: 1px solid var(--nl-line);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--nl-hl) 14%, transparent), transparent 70%), var(--nl-panel);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.nl .nl-class:hover { border-color: color-mix(in srgb, var(--nl-hl) 40%, transparent); transform: translateY(-3px); }
.nl .nl-class-img { overflow: hidden; border-radius: 10px; background: #000; }
.nl .nl-class figcaption { color: #fff; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; }

/* ---------- Bosses ---------- */
.nl .nl-bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.nl .nl-boss {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.nl .nl-boss-img { border-bottom: 1px solid var(--nl-line); background: #000; }
.nl .nl-boss-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.nl .nl-boss-body .nl-card-title { margin: 0; font-size: 16px; }
.nl .nl-bosses .nl-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; }
.nl .nl-boss-wide .nl-boss-body { padding: 20px 22px 22px; }

/* ---------- Before / after ---------- */
.nl .nl-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nl .nl-tag-hl { background: var(--nl-hl); color: #111; }

/* ---------- Lists of updates and fixes ---------- */
/* Markers instead of rule lines: in two columns rules never line up across the columns. */
.nl .nl-list { padding-top: 14px; padding-bottom: 14px; }
.nl .nl-li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.nl .nl-li::before {
  position: absolute;
  top: calc(8px + 0.62em);
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nl-hl) 70%, transparent);
  content: '';
}
.nl .nl-li-hot::before { background: #e0352b; box-shadow: 0 0 8px rgba(224, 53, 43, 0.7); }
.nl .nl-li p { margin: 0 0 0.35em; }
.nl .nl-li p:last-child { margin-bottom: 0; }
/* Icons inside a line stay at text height instead of stretching the row. */
.nl .nl-li img { max-height: 28px; width: auto; vertical-align: middle; }

/* A titled group, e.g. "Castle Siege fixes:", with its own items. */
.nl .nl-li-head { color: #fff; font-weight: 700; }
.nl .nl-sub { margin-top: 6px; }
.nl .nl-sub-item { position: relative; padding: 4px 0 4px 16px; color: var(--nl-text); font-size: 14px; line-height: 1.55; }
.nl .nl-sub-item::before {
  position: absolute;
  top: calc(4px + 0.7em);
  left: 0;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--nl-muted);
  content: '';
}

.nl .nl-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Building blocks used by other patch notes ---------- */
.nl .nl-stack { display: flex; flex-direction: column; gap: 14px; }
.nl .nl-stack > p { margin: 0; }
.nl .nl-subhead-sm { margin: -4px 0 10px; color: var(--nl-muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.nl .nl-classes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl .nl-class-item { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 40px; }
.nl .nl-class-item img { max-height: 44px; width: auto; }
.nl .nl-classes-4 .nl-class-img img { aspect-ratio: 1 / 1; }
.nl .nl-chips-lg .nl-chip { padding: 6px 14px; font-size: 14px; }
.nl .nl-bosses .nl-v img { max-height: 34px; width: auto; vertical-align: middle; }
.nl .nl-step-body:last-child { grid-column: 2 / -1; }
.nl .nl-step .nl-recipe { max-width: 760px; }
.nl .nl-craft-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.nl .nl-craft-pair > .nl-card { align-self: stretch; }
.nl .nl-craft-npc { margin: 0; }
.nl .nl-craft-npc img { display: block; width: 96px; height: auto; }
/* Drop chances: a badge with the chance, then the reward. */
.nl .nl-odds { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.nl .nl-odds:last-child { margin-bottom: 0; }
.nl .nl-odd { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.nl .nl-odd-p {
  flex: none;
  min-width: 52px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nl-hl) 16%, transparent);
  color: var(--nl-hl);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}
.nl .nl-odd-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: #fff; font-size: 14px; font-weight: 600; }
.nl .nl-odd-v img, .nl .nl-odds-head img { max-height: 32px; width: auto; vertical-align: middle; }
.nl .nl-odds-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; color: #fff; font-weight: 700; }
.nl .nl-skcs.nl-skcs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl .nl-split-wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.nl .nl-shot-portrait { justify-self: center; max-width: 300px; }
/* Item tiles: the icon above its name. */
.nl .nl-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nl .nl-item-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 150px;
  padding: 16px 10px 14px;
  border: 1px solid var(--nl-line);
  border-radius: 12px;
  background: var(--nl-panel);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
.nl .nl-item-cell img { max-height: 96px; width: auto; }
/* Reward chips: icon and name. */
.nl .nl-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nl .nl-reward {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--nl-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.nl .nl-reward img { max-height: 30px; width: auto; }
/* Leaderboard prizes. */
.nl .nl-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nl .nl-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
  text-align: center;
}
.nl .nl-place:first-child { border-color: color-mix(in srgb, var(--nl-hl) 45%, transparent); background: color-mix(in srgb, var(--nl-hl) 8%, var(--nl-panel)); }
.nl .nl-place-medal { font-size: 34px; line-height: 1; }
.nl .nl-place-k { color: var(--nl-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nl .nl-place-v { color: #fff; font-size: 18px; font-weight: 800; }
.nl .nl-classes.nl-classes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.nl .nl-classes-2 .nl-class-img img { aspect-ratio: 4 / 3; object-fit: cover; }
.nl .nl-table-kv td:first-child { color: var(--nl-hl); font-weight: 700; }
.nl .nl-card-avatar.nl-card-avatar-lg { grid-template-columns: 150px minmax(0, 1fr); }
.nl .nl-shot-bar { width: 100%; max-width: 800px; margin-inline: auto; }
.nl .nl-cards.nl-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nl .nl-classes-bare .nl-class { padding: 8px; }
.nl .nl-class-solo { justify-self: center; width: 100%; max-width: 300px; }
.nl .nl-pvp { display: flex; flex-direction: column; align-items: flex-start; }
.nl .nl-pvp-icon { display: grid; place-items: center; width: 100%; height: 120px; margin-bottom: 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.nl .nl-pvp-icon img { max-height: 104px; width: auto; }
/* Numbered rules. */
.nl .nl-bosses.nl-bosses-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl .nl-bosses.nl-bosses-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl .nl-bosses.nl-bosses-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nl .nl-classes.nl-classes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nl .nl-class-place { display: block; margin-top: 4px; color: var(--nl-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nl .nl-muted { color: var(--nl-muted); }
.nl .nl-item-grid.nl-item-grid-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.nl .nl-item-grid-7 .nl-item-cell { min-height: 120px; padding: 12px 6px 10px; font-size: 11px; }
.nl .nl-item-grid-7 .nl-item-cell img { max-height: 72px; }
.nl .nl-odd-note { margin-right: 4px; color: var(--nl-muted); font-weight: 600; }
.nl .nl-odds-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nl .nl-icon-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 4px; }
.nl .nl-classes-wide .nl-class-img img { aspect-ratio: 4 / 3; }
.nl .nl-diffs.nl-diffs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nl .nl-diff .nl-subhead-sm { margin: 6px 0 2px; }
.nl .nl-table-dense td { padding: 8px 6px; font-size: 13px; text-align: center; white-space: nowrap; }
.nl .nl-table-dense td:first-child { padding-left: 12px; color: #fff; font-weight: 700; text-align: left; white-space: normal; }
.nl .nl-harmony { display: flex; flex-direction: column; gap: 16px; }
.nl .nl-harmony .nl-card-title img { max-height: 40px; width: auto; }
.nl .nl-list-plain { padding: 0; }
/* Guild Shrine buffs: icon and name. */
.nl .nl-buffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.nl .nl-buff { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; border: 1px solid var(--nl-line); border-radius: 12px; background: var(--nl-panel); color: #fff; font-size: 13px; font-weight: 700; }
.nl .nl-buff-icon { flex: none; margin: 0; }
.nl .nl-buff-icon img { display: block; width: 40px; height: 40px; border-radius: 8px; }
.nl .nl-look { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.nl .nl-look figcaption { color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.nl .nl-ol { display: flex; flex-direction: column; gap: 12px; counter-reset: nl-ol; }
.nl .nl-ol-item { position: relative; min-height: 28px; padding-left: 42px; counter-increment: nl-ol; }
.nl .nl-ol-item::before {
  content: counter(nl-ol);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--nl-hl) 12%, transparent);
  color: var(--nl-hl);
  font-size: 13px;
  font-weight: 800;
}
.nl .nl-shot-sm { align-self: center; max-width: 320px; }
.nl .nl-icons-end { justify-content: flex-end; margin: 10px 0 0; }
.nl .nl-icons-end img { width: auto; max-height: 72px; box-shadow: none; }
.nl .nl-step-label {
  margin-bottom: 10px;
  color: var(--nl-hl);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nl .nl-card-warn {
  border-color: color-mix(in srgb, #e0352b 45%, transparent);
  background: color-mix(in srgb, #e0352b 9%, transparent);
}

/* Lists written with "- " in the admin. */
.nl .nl-dashes { display: flex; flex-direction: column; margin: 4px 0 10px; }
.nl .nl-dashes .nl-li { padding-top: 6px; padding-bottom: 6px; }
.nl .nl-dashes .nl-li::before { top: calc(6px + 0.62em); }

/* Tables: header row, hairlines, numbers easy to scan. */
.nl .nl-table { overflow-x: auto; border: 1px solid var(--nl-line); border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.nl .nl-table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.nl .nl-table td { padding: 10px 14px; border: 0; border-bottom: 1px solid var(--nl-line); color: #fff; vertical-align: middle; }
.nl .nl-table tr:last-child td { border-bottom: 0; }
.nl .nl-table .nl-th td {
  background: color-mix(in srgb, var(--nl-hl) 10%, transparent);
  color: var(--nl-hl);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nl .nl-table tr:not(.nl-th):hover td { background: rgba(255, 255, 255, 0.03); }
.nl .nl-table img { max-height: 28px; width: auto; margin-right: 8px; vertical-align: middle; }

/* Skill cards: picture, name, attribute chips, what it does. */
.nl .nl-skcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nl .nl-skc {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
}
.nl .nl-skc-shot { border-bottom: 1px solid var(--nl-line); background: #000; }
.nl .nl-skc-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nl .nl-skc-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.nl .nl-skc-body .nl-card-title { margin: 0; font-size: 17px; }
.nl .nl-skc-body .nl-card-title img { width: 32px; height: auto; border-radius: 8px; }
.nl .nl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nl .nl-chip {
  display: inline-flex;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--nl-line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.nl .nl-chip-k { color: var(--nl-muted); font-weight: 500; }
.nl .nl-skc-desc { color: var(--nl-muted); font-size: 14px; line-height: 1.55; }

/* Dungeon difficulties: emblem and final reward, then the bosses of that level. */
.nl .nl-diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nl .nl-diff {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--nl-line);
  border-radius: var(--nl-radius);
  background: var(--nl-panel);
}
.nl .nl-diff-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--nl-line); }
.nl .nl-diff-head .nl-card-title { margin: 0 0 6px; font-size: 20px; }
.nl .nl-diff-emblem img { display: block; width: 72px; height: 72px; object-fit: contain; }
.nl .nl-diff-boss { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 14px; }
.nl .nl-diff-boss .nl-avatar img { aspect-ratio: 1 / 1; object-fit: cover; }
.nl .nl-diff-boss-name { display: block; margin-bottom: 6px; color: #fff; font-size: 15px; font-weight: 800; }
.nl .nl-diff .nl-kv { grid-template-columns: 110px minmax(0, 1fr); padding: 5px 0; font-size: 13px; }

/* ---------- Closing call to action ---------- */
.nl .nl-cta {
  margin-top: 72px;
  padding: 44px 32px;
  border: 1px solid color-mix(in srgb, var(--nl-hl) 30%, transparent);
  border-radius: 20px;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--nl-hl) 18%, transparent) 0%, transparent 60%), var(--nl-panel);
  text-align: center;
}
.nl .nl-cta-title {
  background: var(--nl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.nl .nl-cta p { margin-top: 10px; color: var(--nl-muted); }
.nl .nl-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.nl .nl-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--nl-btn);
  color: var(--btn-primary-text, #fff);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.nl .nl-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.nl .nl-btn-ghost { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .nl .nl-toc a, .nl .nl-class, .nl .nl-btn { transition: none; }
  .nl .nl-toc a:hover, .nl .nl-class:hover, .nl .nl-btn:hover { transform: none; }
}

/* Long lists of updates and fixes: two columns on wide screens. */
@media (min-width: 1101px) {
  .nl .nl-list { column-gap: 44px; columns: 2; }
  .nl .nl-li { break-inside: avoid; }
}

@media (max-width: 1100px) {
  .nl .nl-classes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nl .nl-step { grid-template-columns: auto minmax(0, 1fr); }
  .nl .nl-step > .nl-shot { grid-column: 2; max-width: 420px; }
}

@media (max-width: 1100px) {
  .nl .nl-skcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl .nl-bosses.nl-bosses-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl .nl-bosses.nl-bosses-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl .nl-item-grid.nl-item-grid-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nl .nl-diffs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .nl .nl-skcs { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-craft-pair { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-skcs.nl-skcs-2, .nl .nl-split-wide { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nl .nl-cards.nl-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-bosses.nl-bosses-2, .nl .nl-bosses.nl-bosses-4, .nl .nl-diffs.nl-diffs-3 { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-table-dense td:first-child { min-width: 150px; }
  .nl .nl-bosses.nl-bosses-3, .nl .nl-odds-cols { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-item-grid.nl-item-grid-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nl .nl-item-cell { min-height: 120px; }
  .nl .nl-item-cell img { max-height: 72px; }
  .nl .nl-podium { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nl .nl-place { flex-direction: row; gap: 12px; padding: 12px 14px; text-align: left; }
  .nl .nl-place-medal { font-size: 28px; }
  .nl .nl-place-v { margin-left: auto; font-size: 16px; }
  .nl .nl-card-avatar.nl-card-avatar-lg .nl-avatar { width: 96px; }
  .nl .nl-table td { padding: 9px 8px; font-size: 13px; }
  .nl .nl-table td:first-child { padding-left: 12px; }
  /* Steps with an eyebrow: the number sits beside it, the title below gets the full width. */
  .nl .nl-step-label { display: flex; align-items: center; min-height: 36px; margin-bottom: 8px; padding-left: 48px; }
  .nl .nl-step-label + .nl-recipe .nl-recipe-head { padding-left: 0; }
  .nl .nl-craft-npc { justify-self: center; }
  .nl .nl-craft-npc img { width: 64px; }
  .nl .nl-classes-4 { grid-template-columns: none; }
  .nl .nl-diff-head, .nl .nl-diff-boss { grid-template-columns: 56px minmax(0, 1fr); }
  .nl .nl-diff-emblem img { width: 56px; height: 56px; }
  .nl .nl-diff .nl-kv { grid-template-columns: minmax(0, 1fr); }
  .nl { font-size: 15px; }
  .nl .nl-lead-text { font-size: 16px; }
  .nl .nl-sec { gap: 20px; padding-top: 44px; }
  .nl .nl-head { gap: 12px; }
  .nl .nl-title { font-size: 22px; }
  .nl .nl-cta-title { font-size: 24px; }
  .nl .nl-num { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
  .nl .nl-split, .nl .nl-split.nl-rev, .nl .nl-cards-2, .nl .nl-cards-4, .nl .nl-videos, .nl .nl-compare { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nl .nl-ingr { padding: 2px 10px; }
  .nl .nl-ingr-row { gap: 8px; font-size: 14px; }
  .nl .nl-qty { width: 34px; }
  .nl .nl-ic { min-width: 44px; }
  .nl .nl-recipe-head { flex-direction: column; align-items: flex-start; }
  /* Steps: the number sits beside the title, so the recipe gets the full card width. */
  .nl .nl-step { display: flex; flex-direction: column; position: relative; }
  .nl .nl-step-n { position: absolute; top: 16px; left: 16px; }
  .nl .nl-step .nl-recipe-head { padding-left: 48px; }
  .nl .nl-step .nl-recipe-head .nl-card-title { min-height: 36px; }
  .nl .nl-split > .nl-shot { order: -1; }
  .nl .nl-card { padding: 18px; }
  .nl .nl-note { padding: 16px; }
  .nl .nl-note-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* The event monster floats beside the first lines instead of squeezing the whole text into a column. */
  /* Bosses: portrait on the left, stats on the right, so five of them do not take five screens. */
  .nl .nl-bosses { grid-template-columns: minmax(0, 1fr); }
  .nl .nl-boss { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .nl .nl-boss-img { border-right: 1px solid var(--nl-line); border-bottom: 0; }
  .nl .nl-boss-img img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  .nl .nl-boss-body { padding: 14px; }
  .nl .nl-bosses .nl-kv { padding: 6px 0; }
  .nl .nl-card-avatar { display: block; }
  .nl .nl-card-avatar .nl-avatar { float: left; width: 72px; margin: 0 14px 8px 0; }
  .nl .nl-step { gap: 14px; padding: 16px; }
  .nl .nl-step > .nl-shot { grid-column: 1 / -1; max-width: none; }
  .nl .nl-kv, .nl .nl-kv-card .nl-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nl .nl-wide img { aspect-ratio: 16 / 9; }
  .nl .nl-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nl .nl-toc a { gap: 8px; min-height: 48px; padding: 10px; font-size: 11px; }
  .nl .nl-toc-n { min-width: 18px; font-size: 13px; }
  /* Class sets: one row that pages sideways instead of a stack of seven. */
  .nl .nl-classes {
    grid-template-columns: none;
    grid-auto-columns: 42%;
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .nl .nl-classes > * { scroll-snap-align: start; }
  .nl .nl-classes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
  .nl .nl-classes-2 { grid-auto-flow: row; overflow: visible; }
  .nl .nl-cta { margin-top: 48px; padding: 28px 18px; }
}

/* ===== Site layout overrides (news redesign): keep last, they win over the blocks above. ===== */
/* The site shows a news page without the contents block: section numbers and "back to contents" go with it. */
.nl .nl-toc, .nl .nl-toc-title, .nl .nl-up, .nl .nl-num { display: none; }
.nl .nl-title { text-align: center; }

/* Lone text blocks keep a readable line length; text + picture rows use the full width. */
.nl .nl-sec > :is(p, ul, ol, .nl-callout, .nl-note, .nl-list, .nl-subhead) { width: 100%; max-width: 900px; margin-inline: auto; }