/* ==========================================================================
   SilverMU guide articles (/guide/en/*, 63 pages, one template): the reading layout.
   Loaded after css/silver-inner.css by guide/_guide_shared.php, which also runs the article
   enhancer (ids, contents, reading time, cards) and adds js/silver-guide.js.

   Same mechanic as the shared sheet: everything in @layer sv-inner, every declaration !important
   (layered !important beats the legacy sheets and the per-guide inline <style> blocks).
   Scope: body.svp-inner--guide. Never opacity/transform/transition on section or .white-box (fx.js).

   Markup after the enhancer:
   article.white-box.guide-article
     > h1.page-title                       first child (the masthead band keys on it)
     > p.guide-updated                     small "Last updated", .svp-gmeta__read, .svp-gmeta__note?
     > div.svp-glayout[--solo]             >= 1200px: [intro | rail] over [body | rail]
         > div.svp-gintro.svp-prose        the paragraphs before the first h2
         > details.svp-gtoc                "In this guide" (rail >= 1200, collapsible below)
         > div.svp-gbody.svp-prose         h2[id] sections, tables, callouts, FAQ cards
     > div.svp-gcta                        guests only
     > section.related-guides > ul.svp-grel-list > li.svp-grel (a.svp-grel__link + span.svp-grel__blurb)

   Composition: one left edge for the title, the meta line, the text and the related cards.
   Widths: column 600px (30em at 20px, about 74 characters), rail 256px, gap 64px = 920px,
   centred in the panel from 1200px; 760px below (single column); phones full width.
   The article's own padding centres the composition (percentages are of the panel width).

   CONTENTS
    0  Article frame, masthead band      6  Tables
    1  Title and meta line               7  Callouts, item cards, tier chain, pills, pre
    2  Layout                            8  FAQ
    3  Contents (rail and collapsible)   9  Closing call to action
    4  Prose                            10  Related guides
    5  Provenance labels, rating chips  11  Tablet, phone, motion
   ========================================================================== */
@layer sv-inner {

/* --------------------------------------------------------------------------
   0. Article frame and masthead band
   The band is the article's ::before (under the content): the art sits on the right of the band,
   the title side is clean night. overflow:clip (not hidden) so the contents rail can stick.
   -------------------------------------------------------------------------- */
body.svp-inner--guide .guide-article {
  --g-band: 224px;
  --g-wide: 920px;
  --g-col: 600px;
  --g-rail: 256px;
  --g-gap: 64px;
  --g-night: #080c16;
  /* The art is a patch at the band's bottom right (moon citadel and dragon), blended into the night
     on its left and top: at 600px its moon stays right of the longest title line. */
  --g-art: 600px;
  --g-art-h: calc(var(--g-art) * 0.318);
  position: relative !important;
  isolation: isolate !important;
  overflow: clip !important;
  max-width: none !important;
  padding: 0 max(40px, calc((100% - var(--g-wide)) / 2)) 48px !important;
}
body.svp-inner--guide .guide-article::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: var(--g-band) !important;
  margin: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  background:
    var(--sv-corner) left 8px top 8px / 22px 22px no-repeat,
    var(--sv-corner-tr) right 8px top 8px / 22px 22px no-repeat,
    linear-gradient(90deg, transparent 6%, rgba(238, 242, 248, 0.42) 50%, transparent 94%) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--g-night) calc(100% - var(--g-art)), rgba(8, 12, 22, 0) calc(100% - var(--g-art) + 220px)),
    linear-gradient(180deg, var(--g-night) calc(100% - var(--g-art-h)), rgba(8, 12, 22, 0) calc(100% - var(--g-art-h) + 44px)),
    linear-gradient(180deg, rgba(5, 7, 13, 0) 40%, rgba(8, 12, 22, 0.55) 100%),
    radial-gradient(26% 72% at 91% 122%, rgba(255, 122, 47, 0.2), transparent 70%),
    var(--svp-art) right bottom / var(--g-art) auto no-repeat,
    radial-gradient(48% 120% at 16% 112%, rgba(124, 200, 255, 0.075), transparent 70%),
    var(--g-night) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent) !important;
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent) !important;
  box-shadow: none !important;
  filter: none !important;
}
/* The centred filigree was a third alignment axis */
body.svp-inner--guide .guide-article::after {
  content: none !important;
  display: none !important;
}
/* Blocks of an article the enhancer could not rebuild still keep the reading measure */
body.svp-inner--guide .guide-article > :is(p:not(.guide-updated), ul, ol, h2, h3, .table-wrap, .tip-box, .warn-box, .toc-box, .step-callout, .item-card-grid, .tier-chain, .faq-item, pre) {
  max-width: var(--g-col) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* ... and the same gap under the meta line and the same lead as the rebuilt layout
   (40px here, 36px on tablets, 22px on phones, as .svp-glayout) */
body.svp-inner--guide .guide-article > p.guide-updated + :not(.svp-glayout) {
  margin-top: 40px !important;
}
body.svp-inner--guide .guide-article > p.guide-updated + p {
  color: #dfe5ee !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
}

/* --------------------------------------------------------------------------
   1. Title and meta line
   40px Cinzel without caps (Cinzel lowercase is small caps), metal face, at most 820px wide: 57 of
   the 63 titles take two lines (measured), and the longest line still ends before the citadel.
   Bottom-aligned in the band: the metal ramp is anchored at the bottom, one tile per line.
   -------------------------------------------------------------------------- */
body.svp-inner--guide .guide-article > h1.page-title {
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 820px !important;
  min-height: calc(var(--g-band) - 74px) !important;
  margin: 0 !important;
  padding: 36px 0 0 !important;
  border: 0 !important;
  background: var(--sv-metal) left bottom / 100% 1.12em repeat-y !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--svp-font-display) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-wrap: balance !important;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(124, 200, 255, 0.16)) !important;
}
body.svp-inner--guide .guide-article > h1.page-title::before,
body.svp-inner--guide .guide-article > h1.page-title::after {
  content: none !important;
}
/* Laptops: the panel is narrower than the 1400px it reaches at 1550px, so the moon comes closer:
   the title steps down to 38px and stops 24px short of it (half the panel + 131px, measured) */
@media (min-width: 1200px) and (max-width: 1549px) {
  body.svp-inner--guide .guide-article > h1.page-title {
    max-width: min(820px, calc(46.5vw + 104px)) !important;
    font-size: 38px !important;
  }
}
body.svp-inner--guide .guide-article > p.guide-updated {
  display: block !important;
  max-width: 760px !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}
body.svp-inner--guide .guide-article > p.guide-updated :is(small, time) {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}
body.svp-inner--guide .svp-gmeta__sep {
  color: var(--svp-ink-faint) !important;
  padding: 0 4px !important;
}
body.svp-inner--guide .svp-gmeta__read {
  color: var(--svp-ink) !important;
}
body.svp-inner--guide .svp-gmeta__note {
  display: block !important;
  max-width: 40em !important;
  margin: 6px 0 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
body.svp-inner--guide .svp-gmeta__dash {
  display: none !important;
}
/* The note followed a dash ("... 2026 &mdash; this page is revised ..."); on its own line it starts
   with a capital (the text itself is unchanged) */
body.svp-inner--guide .svp-gmeta__note::first-letter {
  text-transform: uppercase !important;
}
body.svp-inner--guide .svp-gmeta__note a {
  color: var(--svp-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(124, 200, 255, 0.45) !important;
  text-underline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   2. Layout
   >= 1200px: a grid [intro | rail] over [body | rail]; the rail spans both rows so the contents
   stick from the intro to the end of the body. Below: one column, contents after the intro.
   -------------------------------------------------------------------------- */
body.svp-inner--guide .svp-glayout {
  display: block !important;
  max-width: none !important;
  margin: 40px 0 0 !important;
  padding: 0 !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) {
  display: flow-root !important;
  min-width: 0 !important;
  max-width: var(--g-col) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: var(--svp-prose) !important;
  line-height: var(--svp-prose-lh) !important;
}
body.svp-inner--guide .svp-gintro > :last-child,
body.svp-inner--guide .svp-gintro > :has(+ [hidden]:last-child),
body.svp-inner--guide .svp-gbody > :last-child {
  margin-bottom: 0 !important;
}
body.svp-inner--guide .svp-gbody > :first-child {
  margin-top: 48px !important;
}
@media (min-width: 1200px) {
  body.svp-inner--guide .svp-glayout {
    display: grid !important;
    grid-template-columns: minmax(0, var(--g-col)) var(--g-rail) !important;
    grid-template-areas: "intro rail" "body rail" !important;
    column-gap: var(--g-gap) !important;
    row-gap: 0 !important;
    align-items: start !important;
  }
  body.svp-inner--guide .svp-glayout--solo {
    grid-template-columns: minmax(0, var(--g-col)) !important;
    grid-template-areas: "intro" "body" !important;
  }
  body.svp-inner--guide .svp-gintro {
    grid-area: intro !important;
  }
  body.svp-inner--guide .svp-gbody {
    grid-area: body !important;
  }
}

/* --------------------------------------------------------------------------
   3. Contents: details.svp-gtoc > summary.svp-gtoc__sum + nav.svp-gtoc__nav > ol.svp-gtoc__list
   Wide: a sticky rail, open (js/silver-guide.js), the current section marked aria-current.
   Narrow: a closed well after the intro; open, it lists the sections (two columns on tablets).
   -------------------------------------------------------------------------- */
body.svp-inner--guide details.svp-gtoc {
  box-sizing: border-box !important;
  max-width: var(--g-col) !important;
  margin: 32px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: var(--svp-r-sm) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--svp-ink) !important;
}
body.svp-inner--guide .svp-gtoc__sum {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  list-style: none !important;
  cursor: pointer !important;
  border-radius: var(--svp-r-sm) !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
body.svp-inner--guide .svp-gtoc__sum::-webkit-details-marker {
  display: none !important;
}
body.svp-inner--guide .svp-gtoc__name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.svp-inner--guide .svp-gtoc__name::before {
  content: "" !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--svp-ember) !important;
  clip-path: var(--svp-diamond) !important;
}
body.svp-inner--guide .svp-gtoc__count {
  margin-left: auto !important;
  color: var(--svp-ink-muted) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}
body.svp-inner--guide .svp-gtoc__sum::after {
  content: "" !important;
  flex: none !important;
  width: 12px !important;
  height: 8px !important;
  background: var(--svp-ice) !important;
  -webkit-mask: var(--svp-chev-down) center / contain no-repeat !important;
  mask: var(--svp-chev-down) center / contain no-repeat !important;
  transition: transform 0.2s ease !important;
}
body.svp-inner--guide details.svp-gtoc[open] > .svp-gtoc__sum::after {
  transform: rotate(180deg) !important;
}
body.svp-inner--guide .svp-gtoc__sum:hover {
  color: #ffffff !important;
}
body.svp-inner--guide .svp-gtoc__sum:focus-visible {
  outline: 2px solid var(--svp-ice) !important;
  outline-offset: 2px !important;
}
body.svp-inner--guide .svp-gtoc__nav {
  margin: 0 !important;
  padding: 4px 18px 16px !important;
  border-top: 1px solid var(--svp-line) !important;
}
body.svp-inner--guide .svp-gtoc__list {
  max-width: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: none !important;
  border-left: 1px solid var(--svp-line-2) !important;
}
body.svp-inner--guide .svp-gtoc__list > li {
  margin: 0 !important;
  padding: 0 !important;
  break-inside: avoid !important;
}
body.svp-inner--guide .svp-gtoc__list > li::before,
body.svp-inner--guide .svp-gtoc__list > li::after {
  content: none !important;
}
body.svp-inner--guide .svp-gtoc__link {
  display: block !important;
  margin: 0 0 0 -1px !important;
  padding: 7px 0 7px 16px !important;
  border-left: 2px solid transparent !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-wrap: pretty !important;
  transition: color 0.16s ease, border-color 0.16s ease !important;
}
body.svp-inner--guide .svp-gtoc__link:hover {
  color: #ffffff !important;
  border-left-color: rgba(124, 200, 255, 0.5) !important;
}
body.svp-inner--guide .svp-gtoc__link:focus-visible {
  outline: 2px solid var(--svp-ice) !important;
  outline-offset: 1px !important;
  border-radius: 4px !important;
}
/* (colour and bar only: a bolder weight would re-wrap the entry and shift the rail while scrolling) */
body.svp-inner--guide .svp-gtoc__link[aria-current] {
  color: var(--svp-link) !important;
  border-left-color: var(--svp-ice) !important;
}
body.svp-inner--guide .svp-gtoc__top {
  display: none !important;
}
/* The hand-made list of how-to-get-maxed is replaced by the generated contents */
body.svp-inner--guide .guide-article .toc-box[hidden] {
  display: none !important;
}
/* Below the rail the open list is numbered (01, 02 ...) instead of the track */
@media (max-width: 1199px) {
  body.svp-inner--guide .svp-gtoc__list {
    counter-reset: svp-gtoc !important;
    border-left: 0 !important;
  }
  body.svp-inner--guide .svp-gtoc__list > li {
    counter-increment: svp-gtoc !important;
  }
  body.svp-inner--guide .svp-gtoc__link {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    border-left: 0 !important;
  }
  body.svp-inner--guide .svp-gtoc__link::before {
    content: counter(svp-gtoc, decimal-leading-zero) !important;
    color: var(--svp-ice) !important;
    font-family: var(--sv-font-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    font-variant-numeric: tabular-nums !important;
    opacity: 0.85 !important;
  }
  body.svp-inner--guide .svp-gtoc__link:hover {
    border-left-color: transparent !important;
  }
}
@media (min-width: 761px) and (max-width: 1199px) {
  body.svp-inner--guide .svp-gtoc__list {
    columns: 2 !important;
    column-gap: 28px !important;
  }
}
@media (min-width: 1200px) {
  body.svp-inner--guide details.svp-gtoc {
    grid-area: rail !important;
    position: sticky !important;
    top: calc(var(--site-header-offset, 78px) + 28px) !important;
    align-self: start !important;
    max-width: none !important;
    margin: 2px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  body.svp-inner--guide .svp-gtoc__sum {
    min-height: 0 !important;
    padding: 0 0 14px !important;
    color: var(--svp-kicker) !important;
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
  }
  /* Open (the script opens it here and keeps it open): a heading, not a toggle. Closed (no script):
     it keeps its chevron and pointer so the list can still be opened. */
  body.svp-inner--guide details.svp-gtoc[open] > .svp-gtoc__sum {
    cursor: default !important;
  }
  body.svp-inner--guide details.svp-gtoc[open] > .svp-gtoc__sum::after,
  body.svp-inner--guide details.svp-gtoc[open] .svp-gtoc__count {
    display: none !important;
  }
  body.svp-inner--guide .svp-gtoc__nav {
    max-height: calc(100vh - var(--site-header-offset, 78px) - 120px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    border: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(124, 200, 255, 0.35) transparent !important;
  }
  body.svp-inner--guide .svp-gtoc__list {
    margin: 0 !important;
  }
  body.svp-inner--guide .svp-gtoc__link {
    padding: 6px 0 6px 16px !important;
    color: var(--svp-ink-muted) !important;
    font-size: 16.5px !important;
  }
  body.svp-inner--guide .svp-gtoc__link:hover {
    color: var(--svp-ink-strong) !important;
  }
  body.svp-inner--guide .svp-gtoc__link[aria-current] {
    color: var(--svp-link) !important;
  }
  body.svp-inner--guide .svp-gtoc__top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 18px 0 0 17px !important;
    padding: 4px 0 !important;
    color: var(--svp-ink-muted) !important;
    font-family: var(--sv-font-ui) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.16s ease !important;
  }
  body.svp-inner--guide .svp-gtoc__top::before {
    content: "" !important;
    width: 11px !important;
    height: 7px !important;
    background: currentColor !important;
    -webkit-mask: var(--svp-chev-down) center / contain no-repeat !important;
    mask: var(--svp-chev-down) center / contain no-repeat !important;
    transform: rotate(180deg) !important;
  }
  body.svp-inner--guide .svp-gtoc__top:hover {
    color: var(--svp-ice) !important;
  }
}

/* --------------------------------------------------------------------------
   4. Prose: 20px / 1.7 EB Garamond on a 600px column (the shared .svp-prose rules do the rest)
   -------------------------------------------------------------------------- */
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) :is(p, ul, ol) {
  max-width: var(--g-col) !important;
  text-wrap: pretty !important;
}
/* The opening paragraph reads as the lead */
body.svp-inner--guide .svp-gintro > p:first-child {
  color: #dfe5ee !important;
  font-size: 22px !important;
  line-height: 1.6 !important;
}
body.svp-inner--guide .svp-gbody > h2:not([class]) {
  margin: 56px 0 16px !important;
  font-size: 26px !important;
  line-height: 1.22 !important;
}
body.svp-inner--guide .svp-gbody > h2:first-child {
  margin-top: 48px !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) h3:not([class]) {
  margin: 36px 0 8px !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
}
body.svp-inner--guide .svp-gbody > h2 + h3:not([class]) {
  margin-top: 20px !important;
}
/* Lists: more air between items; a bold lead-in reads as the item's run-in title */
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) :is(ul, ol) {
  margin: 0 0 1.1em !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) li {
  margin: 0 0 0.55em !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) li:last-child {
  margin-bottom: 0 !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) li > strong:first-child {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) :is(p, li) > :is(strong, b) {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
/* Steps: the numbers sit in a small ice ring */
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) > ol:not([class]) > li {
  padding-left: 2.15em !important;
}
/* em of the 0.7em marker: a 1.75em ring centred on the first 1.7-line (top = (1.7/0.7 - 1.75) / 2) */
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) > ol:not([class]) > li::before {
  top: 0.34em !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 1.75em !important;
  min-width: 0 !important;
  height: 1.75em !important;
  border: 1px solid rgba(124, 200, 255, 0.42) !important;
  border-radius: 50% !important;
  background: rgba(124, 200, 255, 0.07) !important;
  content: counter(svp-ol) !important;
  font-size: 0.7em !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) code {
  font-size: 0.78em !important;
  white-space: nowrap !important;
}
body.svp-inner--guide :is(.svp-gintro, .svp-gbody) a:not([class]) {
  text-underline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   5. Provenance labels ([Official...] = official game behaviour, ice; [Common on private servers...]
      = varies by server, amber) and Strong / Solid / Situational rating chips
   -------------------------------------------------------------------------- */
body.svp-inner--guide .svp-gtag {
  display: inline-block !important;
  margin: 0 2px !important;
  padding: 1px 8px 2px !important;
  border: 1px solid rgba(124, 200, 255, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(124, 200, 255, 0.08) !important;
  color: #cfe9ff !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: 0.14em !important;
  -webkit-text-fill-color: currentColor !important;
}
body.svp-inner--guide .svp-gtag--common {
  border-color: rgba(255, 200, 120, 0.38) !important;
  background: rgba(255, 176, 90, 0.07) !important;
  color: var(--svp-warn-ink) !important;
}
body.svp-inner--guide .svp-gtag--long {
  white-space: normal !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}
/* Inside a heading the label sits on the text's middle */
body.svp-inner--guide :is(h2, h3) .svp-gtag {
  margin-left: 8px !important;
  vertical-align: 0.3em !important;
}
body.svp-inner--guide .svp-grate {
  display: inline-block !important;
  padding: 2px 9px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
body.svp-inner--guide .svp-grate--strong {
  border-color: rgba(74, 222, 128, 0.5) !important;
  background: rgba(9, 44, 27, 0.62) !important;
  color: var(--svp-good-ink) !important;
}
body.svp-inner--guide .svp-grate--solid {
  border-color: rgba(124, 200, 255, 0.42) !important;
  background: rgba(9, 32, 56, 0.55) !important;
  color: #d4ecff !important;
}

/* --------------------------------------------------------------------------
   6. Tables: div.table-wrap > table.svp-gtbl (no 16px lip, hairline rows, 13px labels)
   -------------------------------------------------------------------------- */
body.svp-inner--guide .guide-article .table-wrap {
  box-sizing: border-box !important;
  max-width: var(--g-col) !important;
  margin: 28px 0 32px !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: rgba(255, 255, 255, 0.018) !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(124, 200, 255, 0.4) transparent !important;
}
body.svp-inner--guide .guide-article .table-wrap > table {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  font-variant-numeric: lining-nums !important;
}
body.svp-inner--guide .guide-article .table-wrap thead :is(th, td) {
  padding: 11px 14px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--svp-line-2) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
  color: var(--svp-ink-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.07em !important;
  text-align: left !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  vertical-align: bottom !important;
}
body.svp-inner--guide .guide-article .table-wrap tbody :is(td, th),
body.svp-inner--guide .guide-article .table-wrap tr > td {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--svp-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  text-transform: none !important;
  vertical-align: top !important;
}
body.svp-inner--guide .guide-article .table-wrap tbody tr:last-child > * {
  border-bottom: 0 !important;
}
body.svp-inner--guide .guide-article .table-wrap tbody tr:hover > * {
  background: rgba(124, 200, 255, 0.04) !important;
}
/* The first column names the row (not in tables with spans: there a row may start in column 2) */
body.svp-inner--guide .guide-article .table-wrap table:not(.svp-gtbl--span) tbody tr > :first-child {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--guide .guide-article table.svp-gtbl--nw1:not(.svp-gtbl--span) tbody tr > :first-child {
  white-space: nowrap !important;
}
/* Longer row names get room for two or three words a line (the text columns took it all) */
body.svp-inner--guide .guide-article table.svp-gtbl:not(.svp-gtbl--nw1):not(.svp-gtbl--wide):not(.svp-gtbl--span) tbody tr > :first-child {
  min-width: 8.5em !important;
}
body.svp-inner--guide .guide-article .table-wrap td a:not([class]) {
  color: var(--svp-link) !important;
  text-decoration: none !important;
}
body.svp-inner--guide .guide-article .table-wrap td a:not([class]):hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: var(--svp-ice) !important;
}
body.svp-inner--guide .guide-article .table-wrap td code {
  white-space: nowrap !important;
}
/* 3-4 column text tables: a command example may wrap at its spaces, never inside a word.
   The one-line examples made the Syntax column 235-282px wide and squeezed the text columns
   (commands-hotkeys). overflow-wrap:normal is required: the shared code rule has `anywhere`.
   inline-block keeps each example one box: a short one ("/addstr 5000") moves to the next line whole instead of
   breaking at its space (two fragments read as two commands); only an example longer than its column wraps, inside
   its box. Its narrowest width is still its longest word, so the columns stay as narrow as with a plain wrap. */
body.svp-inner--guide .guide-article table.svp-gtbl:not(.svp-gtbl--wide):not(.svp-gtbl--pair) td code {
  display: inline-block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}
/* Never broken inside (marked by the enhancer): the odds after a rate pill ("(1 in 118)") and the
   hyphenated tokens of a command in pre ("Get-FileHash", "-Algorithm") */
body.svp-inner--guide .guide-article .svp-gnw {
  white-space: nowrap !important;
}
/* 5+ columns: compact cells so the matrix fits the column */
body.svp-inner--guide .guide-article table.svp-gtbl--wide thead :is(th, td) {
  padding: 10px 5px 9px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}
body.svp-inner--guide .guide-article table.svp-gtbl--wide tbody :is(td, th) {
  padding: 9px 5px !important;
  font-size: 16px !important;
}
body.svp-inner--guide .guide-article table.svp-gtbl--wide tr > :first-child {
  padding-left: 12px !important;
  padding-right: 8px !important;
}
body.svp-inner--guide .guide-article table.svp-gtbl--wide tr > :last-child {
  padding-right: 10px !important;
}
body.svp-inner--guide .guide-article table.svp-gtbl--wide .svp-grate {
  padding: 1px 6px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
}

/* --------------------------------------------------------------------------
   7. Callouts, item cards, tier chain, rate pills, pre
   -------------------------------------------------------------------------- */
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) {
  position: relative !important;
  box-sizing: border-box !important;
  max-width: var(--g-col) !important;
  margin: 28px 0 32px !important;
  padding: 16px 22px 18px 22px !important;
  border: 1px solid rgba(124, 200, 255, 0.24) !important;
  border-left: 3px solid var(--svp-ice) !important;
  border-radius: var(--svp-r-sm) !important;
  background: linear-gradient(90deg, rgba(124, 200, 255, 0.07), rgba(124, 200, 255, 0.025)) !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
body.svp-inner--guide .guide-article .warn-box {
  border-color: rgba(255, 160, 92, 0.3) !important;
  border-left-color: var(--svp-ember) !important;
  background: linear-gradient(90deg, rgba(255, 138, 43, 0.08), rgba(255, 138, 43, 0.025)) !important;
}
/* A small label tells tip and warning apart before the text does */
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box)::before {
  content: "Tip" !important;
  display: block !important;
  margin: 0 0 4px !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.svp-inner--guide .guide-article .warn-box::before {
  content: "Watch out" !important;
  color: var(--svp-ember-ink) !important;
}
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) :is(p, ul, ol) {
  max-width: none !important;
  margin: 8px 0 0 !important;
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) > :first-child:not(strong) {
  margin-top: 0 !important;
}
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) li {
  margin: 0 0 0.4em !important;
}
body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--guide .guide-article .step-callout > h3 {
  margin: 0 0 4px !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
/* Item cards: icon + name in a two-column list (the icons are 52px art) */
body.svp-inner--guide .guide-article .item-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  max-width: var(--g-col) !important;
  margin: 20px 0 32px !important;
  padding: 0 !important;
}
body.svp-inner--guide .guide-article .item-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 14px 8px 8px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  text-align: left !important;
}
body.svp-inner--guide .guide-article .item-card img {
  flex: none !important;
  width: 44px !important;
  height: 44px !important;
  padding: 2px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: radial-gradient(circle at 50% 45%, rgba(124, 200, 255, 0.14), rgba(124, 200, 255, 0) 70%) !important;
}
body.svp-inner--guide .guide-article .item-card span {
  min-width: 0 !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
/* Tier chain: rungs as chips, the current rung in ice (no RiftMU red) */
body.svp-inner--guide .guide-article .tier-chain {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 6px !important;
  max-width: var(--g-col) !important;
  margin: 20px 0 28px !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
body.svp-inner--guide .guide-article .tier-chain span.tier {
  padding: 6px 13px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 20, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.05em !important;
}
body.svp-inner--guide .guide-article .tier-chain span.arrow {
  color: var(--svp-ink-faint) !important;
  font-size: 16px !important;
  opacity: 1 !important;
}
body.svp-inner--guide .guide-article .tier-chain span.tier--here {
  border-color: rgba(124, 200, 255, 0.75) !important;
  background: rgba(124, 200, 255, 0.15) !important;
  box-shadow: 0 0 0 1px rgba(124, 200, 255, 0.18), 0 0 18px -4px rgba(124, 200, 255, 0.6) !important;
  color: #ffffff !important;
}
/* Rate pills: plain = neutral rate, --great = best (green), --warn = risky (amber), --cap = a limit (ice) */
body.svp-inner--guide .guide-article .rate-pill {
  display: inline-block !important;
  min-height: 0 !important;
  padding: 2px 9px !important;
  border: 1px solid rgba(195, 202, 216, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(91, 101, 120, 0.22) !important;
  box-shadow: none !important;
  color: #e3e8f0 !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}
body.svp-inner--guide .guide-article .rate-pill--great {
  border-color: rgba(74, 222, 128, 0.6) !important;
  background: rgba(9, 44, 27, 0.66) !important;
  color: var(--svp-good-ink) !important;
}
body.svp-inner--guide .guide-article .rate-pill--warn {
  border-color: rgba(255, 196, 110, 0.5) !important;
  background: rgba(64, 40, 8, 0.62) !important;
  color: var(--svp-warn-ink) !important;
}
body.svp-inner--guide .guide-article .rate-pill--cap {
  border-color: rgba(124, 200, 255, 0.55) !important;
  background: rgba(9, 32, 56, 0.6) !important;
  color: #d4ecff !important;
}
body.svp-inner--guide .guide-article pre {
  box-sizing: border-box !important;
  max-width: var(--g-col) !important;
  margin: 20px 0 28px !important;
  padding: 14px 18px !important;
  overflow-x: auto !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: rgba(3, 6, 12, 0.55) !important;
  color: #e6ecf5 !important;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  /* a long command wraps inside the column instead of hiding behind a scroll; the enhancer keeps
     hyphenated tokens whole (span.svp-gnw), so it wraps before "-Algorithm", never after the "-" */
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}
body.svp-inner--guide .guide-article pre code {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: inherit !important;
  white-space: inherit !important;
}

/* --------------------------------------------------------------------------
   8. FAQ: one column of question cards inside the reading column. The enhancer makes
      .svp-faq.svp-gfaq > .svp-qa > (h3|p).svp-qa__q + (div|p).svp-qa__a; private-servers-safe keeps
      its .faq-item > .faq-q + .faq-a blocks, styled the same.
   -------------------------------------------------------------------------- */
body.svp-inner--guide .svp-gfaq {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  max-width: var(--g-col) !important;
  margin: 4px 0 0 !important;
}
body.svp-inner--guide .svp-gfaq .svp-qa,
body.svp-inner--guide .guide-article .faq-item {
  box-sizing: border-box !important;
  max-width: var(--g-col) !important;
  margin: 0 !important;
  padding: 18px 22px 20px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
body.svp-inner--guide .guide-article .faq-item + .faq-item {
  margin-top: 12px !important;
}
body.svp-inner--guide .svp-gfaq .svp-qa__q,
body.svp-inner--guide .guide-article .faq-item .faq-q {
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.svp-inner--guide .svp-gfaq .svp-qa__a,
body.svp-inner--guide .svp-gfaq .svp-qa__a > :is(p, ul, ol),
body.svp-inner--guide .guide-article .faq-item .faq-a {
  max-width: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
body.svp-inner--guide .guide-article .faq-item .faq-a {
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--guide .svp-gfaq .svp-qa__a > :is(p, ul, ol) {
  margin: 0 0 0.6em !important;
}
body.svp-inner--guide .svp-gfaq .svp-qa__a > :last-child {
  margin-bottom: 0 !important;
}
/* A closing line or block after the last answer (the enhancer keeps it out of the last card) */
body.svp-inner--guide .svp-gbody > .svp-gfaq + :not(h2) {
  margin-top: 28px !important;
}

/* --------------------------------------------------------------------------
   9. Closing call to action (guests): one well across the composition, the one fire button
   -------------------------------------------------------------------------- */
body.svp-inner--guide .svp-gcta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px 32px !important;
  box-sizing: border-box !important;
  max-width: none !important;
  margin: 64px 0 0 !important;
  padding: 26px 30px 28px !important;
  border: 1px solid rgba(255, 170, 110, 0.26) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(70% 150% at 100% 0, rgba(255, 122, 47, 0.13), transparent 62%),
    radial-gradient(60% 130% at 0 100%, rgba(124, 200, 255, 0.07), transparent 60%),
    rgba(255, 255, 255, 0.022) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
body.svp-inner--guide .svp-gcta__copy {
  flex: 1 1 340px !important;
  min-width: 0 !important;
}
body.svp-inner--guide .svp-gcta__kicker {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  color: var(--svp-kicker) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
body.svp-inner--guide .svp-gcta__kicker::before {
  content: "" !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--svp-ember) !important;
  clip-path: var(--svp-diamond) !important;
}
body.svp-inner--guide .svp-gcta__line {
  max-width: none !important;
  margin: 0 !important;
  color: var(--svp-head) !important;
  font-family: var(--svp-font-display) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}
body.svp-inner--guide .svp-gcta__text {
  max-width: 34em !important;
  margin: 8px 0 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
body.svp-inner--guide .svp-gcta__acts {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}
body.svp-inner--guide .svp-gcta__acts .sv-btn {
  min-height: 46px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   10. Related guides: a card grid under a hairline (no box in the box). The card is one link
       (the title's ::after covers it); cards with two links stay plain.
   -------------------------------------------------------------------------- */
body.svp-inner--guide .guide-article .related-guides {
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin: 56px 0 0 !important;
  padding: 36px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--svp-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.svp-inner--guide .guide-article .related-guides::before,
body.svp-inner--guide .guide-article .related-guides::after {
  content: none !important;
}
body.svp-inner--guide .guide-article .related-guides > h2 {
  display: block !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-head) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--svp-font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.svp-inner--guide .guide-article .related-guides > h2::before,
body.svp-inner--guide .guide-article .related-guides > h2::after {
  content: none !important;
}
body.svp-inner--guide .guide-article .related-guides > ul {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 15px 40px 17px 18px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  list-style: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li::marker {
  content: none !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li::before {
  content: none !important;
  display: none !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li.svp-grel:has(> .svp-grel__link)::after {
  content: "" !important;
  position: absolute !important;
  top: 21px !important;
  right: 17px !important;
  width: 7px !important;
  height: 11px !important;
  background: var(--svp-ice) !important;
  -webkit-mask: var(--svp-chev) center / contain no-repeat !important;
  mask: var(--svp-chev) center / contain no-repeat !important;
  opacity: 0.75 !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
body.svp-inner--guide .guide-article .related-guides a {
  color: var(--svp-link) !important;
  text-decoration: none !important;
}
body.svp-inner--guide .guide-article .related-guides a.svp-grel__link {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}
body.svp-inner--guide .guide-article .related-guides a.svp-grel__link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
}
body.svp-inner--guide .guide-article .related-guides a.svp-grel__link:focus-visible {
  outline: none !important;
}
body.svp-inner--guide .guide-article .related-guides a.svp-grel__link:focus-visible::after {
  outline: 2px solid var(--svp-ice) !important;
  outline-offset: 2px !important;
}
body.svp-inner--guide .svp-grel__blurb {
  display: block !important;
  color: var(--svp-ink-muted) !important;
}
body.svp-inner--guide .svp-grel__blurb::first-letter {
  text-transform: uppercase !important;
}
/* Plain cards (two links): the links stay links */
body.svp-inner--guide .guide-article .related-guides > ul > li:not(:has(> .svp-grel__link)) {
  display: block !important;
  padding-right: 18px !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li:not(:has(> .svp-grel__link)) a {
  font-weight: 600 !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li:has(> .svp-grel__link):hover {
  border-color: rgba(124, 200, 255, 0.55) !important;
  background: rgba(124, 200, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(124, 200, 255, 0.18), 0 0 24px -12px rgba(124, 200, 255, 0.6) !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li:has(> .svp-grel__link):hover::after {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}
body.svp-inner--guide .guide-article .related-guides > ul > li:has(> .svp-grel__link):hover .svp-grel__link {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   11. Tablet, phone, motion
   -------------------------------------------------------------------------- */
/* Single column (761-1199): a 760px composition, the text column 600px on its left edge */
@media (max-width: 1199px) {
  body.svp-inner--guide .guide-article {
    --g-wide: 760px;
    padding: 0 max(32px, calc((100% - var(--g-wide)) / 2)) 40px !important;
  }
  body.svp-inner--guide .guide-article .related-guides > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 761px) and (max-width: 1199px) {
  body.svp-inner--guide .guide-article {
    --g-band: 200px;
    --g-art: 500px;
  }
  body.svp-inner--guide .guide-article > h1.page-title {
    max-width: min(660px, calc(46.5vw + 84px)) !important;
    min-height: calc(var(--g-band) - 68px) !important;
    padding-top: 30px !important;
    font-size: 35px !important;
  }
  body.svp-inner--guide .svp-glayout,
  body.svp-inner--guide .guide-article > p.guide-updated + :not(.svp-glayout) {
    margin-top: 36px !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner--guide .guide-article {
    padding: 0 max(24px, calc((100% - var(--g-wide)) / 2)) 32px !important;
  }
}
/* Phones: the art is a band above the title (as the shared masthead), the title on plain night */
@media (max-width: 760px) {
  body.svp-inner--guide .guide-article {
    --g-band: 96px;
    padding: 0 18px 24px !important;
  }
  body.svp-inner--guide .guide-article::before {
    height: calc(var(--g-band) + 40px) !important;
    background:
      var(--sv-corner) left 7px top 7px / 20px 20px no-repeat,
      var(--sv-corner-tr) right 7px top 7px / 20px 20px no-repeat,
      linear-gradient(90deg, transparent 6%, rgba(238, 242, 248, 0.42) 50%, transparent 94%) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(5, 7, 13, 0.28) 0, rgba(5, 7, 13, 0) 28px, rgba(8, 12, 22, 0) calc(var(--g-band) - 44px), var(--g-night) calc(var(--g-band) + 4px)),
      var(--svp-art-sm) right 0 top -16px / max(100%, calc(var(--g-band) * 4.4)) auto no-repeat,
      var(--g-night) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent) !important;
    mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent) !important;
  }
  body.svp-inner--guide .guide-article > h1.page-title {
    display: block !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: calc(var(--g-band) + 14px) 0 0 !important;
    /* (the shorthand resets the clip: restate it) */
    background: var(--sv-metal) left top / 100% 1.16em repeat-y !important;
    background-origin: content-box !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 29px !important;
    line-height: 1.16 !important;
  }
  body.svp-inner--guide .guide-article > p.guide-updated {
    margin-top: 10px !important;
    font-size: 14px !important;
  }
  body.svp-inner--guide .svp-gmeta__note {
    font-size: 16px !important;
  }
  body.svp-inner--guide .svp-glayout,
  body.svp-inner--guide .guide-article > p.guide-updated + :not(.svp-glayout) {
    margin-top: 22px !important;
  }
  body.svp-inner--guide :is(.svp-gintro, .svp-gbody) {
    max-width: none !important;
  }
  body.svp-inner--guide .svp-gintro > p:first-child,
  body.svp-inner--guide .guide-article > p.guide-updated + p {
    font-size: 19px !important;
    line-height: 1.6 !important;
  }
  body.svp-inner--guide .svp-gbody > h2:not([class]) {
    margin-top: 44px !important;
    font-size: 23px !important;
  }
  body.svp-inner--guide .svp-gbody > :first-child {
    margin-top: 36px !important;
  }
  body.svp-inner--guide :is(.svp-gintro, .svp-gbody) h3:not([class]) {
    font-size: 20px !important;
  }
  body.svp-inner--guide details.svp-gtoc {
    margin-top: 24px !important;
  }
  body.svp-inner--guide .svp-gtoc__sum {
    padding: 12px 16px !important;
  }
  body.svp-inner--guide .svp-gtoc__nav {
    padding: 2px 16px 14px !important;
  }
  body.svp-inner--guide .svp-gtoc__link {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
  body.svp-inner--guide :is(.svp-gintro, .svp-gbody) code {
    white-space: normal !important;
  }
  /* Tables become one card per row: the first cell is the card title, the others carry their label */
  body.svp-inner--guide .guide-article .table-wrap {
    margin: 22px 0 26px !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack,
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody,
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr,
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr > :is(td, th) {
    display: block !important;
    width: auto !important;
  }
  /* The head row stays for screen readers (each cell visually hidden; the cards show the labels) */
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > thead :is(th, td) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr {
    padding: 14px 16px 15px !important;
    border-bottom: 1px solid var(--svp-line) !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr:last-child {
    border-bottom: 0 !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr > :is(td, th) {
    padding: 0 !important;
    border: 0 !important;
    font-size: 17px !important;
    white-space: normal !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr:hover > * {
    background: none !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr > :first-child {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr > * + * {
    margin-top: 8px !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--stack > tbody > tr > * + *[data-label]::before {
    content: attr(data-label) !important;
    display: block !important;
    margin: 0 0 1px !important;
    color: var(--svp-ink-faint) !important;
    font-family: var(--sv-font-ui) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--pair > tbody > tr > * + *[data-label]::before {
    content: none !important;
  }
  /* Short values (ratings, rates): the card lays them out three across under the name */
  body.svp-inner--guide .guide-article table.svp-gtbl--grid > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--grid > tbody > tr > :first-child {
    grid-column: 1 / -1 !important;
    margin-bottom: 0 !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--grid > tbody > tr > * + * {
    margin-top: 0 !important;
    padding: 0 !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--grid > tbody > tr > * + *[data-label]::before {
    margin-bottom: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.svp-inner--guide .guide-article table.svp-gtbl--pair > tbody > tr > * + * {
    margin-top: 3px !important;
  }
  body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) {
    padding: 14px 16px 16px 16px !important;
  }
  body.svp-inner--guide .guide-article :is(.tip-box, .warn-box, .step-callout) :is(p, ul, ol) {
    font-size: 17px !important;
  }
  body.svp-inner--guide .guide-article .item-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
  body.svp-inner--guide .svp-gfaq .svp-qa,
  body.svp-inner--guide .guide-article .faq-item {
    padding: 16px 16px 18px !important;
  }
  body.svp-inner--guide .svp-gfaq .svp-qa__q,
  body.svp-inner--guide .guide-article .faq-item .faq-q {
    font-size: 19px !important;
  }
  body.svp-inner--guide .svp-gfaq .svp-qa__a,
  body.svp-inner--guide .svp-gfaq .svp-qa__a > :is(p, ul, ol),
  body.svp-inner--guide .guide-article .faq-item .faq-a {
    font-size: 17px !important;
  }
  body.svp-inner--guide .svp-gcta {
    margin-top: 44px !important;
    padding: 20px 18px 20px !important;
  }
  body.svp-inner--guide .svp-gcta__line {
    font-size: 22px !important;
  }
  body.svp-inner--guide .svp-gcta__text {
    font-size: 17px !important;
  }
  body.svp-inner--guide .svp-gcta__acts {
    flex: 1 1 100% !important;
  }
  body.svp-inner--guide .svp-gcta__acts .sv-btn {
    flex: 1 1 auto !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
  body.svp-inner--guide .guide-article .related-guides {
    margin-top: 44px !important;
    padding-top: 28px !important;
  }
  body.svp-inner--guide .guide-article .related-guides > h2 {
    font-size: 22px !important;
    margin-bottom: 16px !important;
  }
  body.svp-inner--guide .guide-article .related-guides > ul {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.svp-inner--guide .guide-article .related-guides > ul > li {
    padding: 14px 38px 15px 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svp-inner--guide :is(.svp-gtoc__link, .svp-gtoc__top, .svp-gtoc__sum),
  body.svp-inner--guide .svp-gtoc__sum::after,
  body.svp-inner--guide .guide-article .related-guides > ul > li,
  body.svp-inner--guide .guide-article .related-guides > ul > li::after {
    transition: none !important;
  }
}

}