MediaWiki:Common.css: Difference between revisions

Revision as of 14:50, 10 November 2025

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@font-face {
    font-family: "Daedalus";
    src: url("/fonts/000webfont.ttf") format("truetype");
}
:root,
.view-dark {
    --content-link-color: #ffc05f;
    --content-border-color: #feffe5;
    --heading-font-family: "Daedalus", sans-serif;
    --body-font-family: "Outfit", serif;
    --accent-link-color: #22214d;
    --content-link-label-color: #0b101b;
}

:root{
    --is-top-logo: 1;
    --logo-file-width: 160;
    --logo-file-height: 160;
    --logo-height: calc(var(--logo-file-height)*1px);
    --logo-margin: 15px;
    --is-navigation-inside-content: 0;
}

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
    image-rendering: pixelated !important;
    --pi-background: var(--background-color-base);
    --pi-secondary-background: var(--color-progressive);
    --pi-secondary-background-label: var(--content-link-label-color);
    --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
    text-align:center;
    font-size:1.5em;
    background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
    color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
    background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
    font-size: 115%;
    word-wrap: normal;
}

.miniboss-box .portable-infobox {
    box-shadow: 3px 3px 6px var(--content-border-color);
}

.portable-infobox .pi-image {
    padding: 8px;
}

.pi-image-thumbnail {
    max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
    background: var(--pi-secondary-background);
    color: var(--pi-secondary-background-label);
}

.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
    text-shadow: 0 0 5px var(--color-progressive);
    border-bottom: 0;
    font-family: var(--heading-font-family);
    font-weight: 550;
    margin: 0;
    word-wrap: normal;
}

.mw-body .portable-infobox  {
    border-radius:5px;
    border-image-source: var(--border-image-base);
    border-image-slice: 15 16;
    border-image-width: 15px;
    border-image-repeat: stretch;
}

.mw-body .portable-infobox h3 {
    font-size: 80%;
    font-weight: 500;
}
/*****************************
*   End PortableInfoboxes    *
******************************/

/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    /*
     * don't trust the note that says margin doesn't work with inline
     * removing margin: 0 makes dds have margins again
     * We also want to reset margin-right in Minerva
     */
    margin: 0; 
    display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
    display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
    content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
    /* "space, Middle Dot, space" 
    We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
    The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
    /* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space" 
       There may (and likely) be an extra whitespace between <li>s, 
       therefore we have to use a space character as last character of this sequence. 
       By this way, the last space and the next whitespce will collapse as a single space,
       to make the whitespace on both sides of the middle dot the same width.
    */
    content: "\20\A0\2022\A0\20"; 
    font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
    content: "\20(";
    font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
    content: ")";
    font-weight: inherit;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}

.hlist ol > li {
    counter-increment: listitem;
}

.hlist ol > li::before {
    content: " " counter(listitem) ".\20";
}

/* Progressive enhancement:
 * try to make the dot always follow the list item in same line
 */
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
    display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: none;
  --navbox-margin: 0.5em auto;
  --navbox-padding: 4px;
  --navbox-gap: 3px;
  --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
  --navbox-outer-border-width: 1px;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-font-size: calc(1em - 2px);
  --navbox-title-color: var(--content-link-label-color);
  --navbox-title-font-size: calc(125%);
  --navbox-title-background: var(--color-progressive);
  --navbox-title-icon-color: var(--content-link-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-title-padding--y: 0.5em;
  --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
  --navbox-above-color: var(--color-base);
  --navbox-above-padding: var(--navbox-list-padding);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-color);
  --navbox-below-padding: var(--navbox-above-padding);
  --navbox-header-color: var(--navbox-title-color);
  --navbox-header-font-size: calc(110%);
  --navbox-header-background: var(--navbox-title-background);
  --navbox-header-icon-color: var(--navbox-title-icon-color);
  --navbox-header-link-color: var(--navbox-title-link-color);
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-header-padding--y: 0.3em;
  --navbox-subheader-font-size: calc(100%);
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
  --navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
  --navbox-list-color: var(--color-base);
  --navbox-list-padding: 0.25em 0.5em;
  --navbox-group-text-align: left;
  --navbox-group-text-align--mobile: left;
  --navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
  --navbox-group-color: var(--color-base);
  --navbox-group-padding: var(--navbox-list-padding);
  --navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: var(--navbox-pill-background);
  --navbox-list-background: none;
  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
    .ranger-navbox {
        --navbox-above-background: var(--background-color-neutral-subtle);
        --navbox-list-background: transparent;
        --navbox-list-background--striped: var(--background-color-neutral-subtle);
        --navbox-group-background: var(--background-color-neutral-subtle);
        --navbox-tree-line-color: var(--background-color-neutral-subtle);
    }
    .ranger-navbox.pill, 
    .ranger-navbox.pill-mobile {
      --navbox-pill-background: var(--background-color-neutral-subtle);
      --navbox-list-background--striped: transparent;
    }
}
/***************
* End fallback *
****************/

.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: var(--navbox-font-size);
  margin: var(--navbox-margin);
  background: var(--navbox-background);
  line-height: 1.5;
  clear:both;
}

.ranger-navbox * {
  border: 0;
}
.ranger-navbox .center *{
  margin-left: unset;
  margin-right: unset;
}
.ranger-navbox, 
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: var(--navbox-title-font-size);
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
    text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
    text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-header-color);
  background: var(--navbox-header-background);
  font-size: var(--navbox-header-font-size);
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
  font-size: var(--navbox-subheader-font-size);
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
    text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
    text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
  font-size: var(--navbox-title-font-size);
  position: absolute;
  left: var(--navbox-icon-offset--x);
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  --mask: var(--icon-metalinks);
  display: block;
  width: 0.84em; /* based on the icon graph */
  height: 0.84em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
    display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: var(--navbox-icon-offset--x);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
  transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-list{
  width: unset;
  padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
  padding: var(--navbox-above-padding);
  width: unset;
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
  padding: var(--navbox-below-padding);
  width: unset;
}
.ranger-navbox .ranger-sublist{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
  margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
  padding: var(--navbox-group-padding);
  width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
  --navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
  --navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
  --navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
  --navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
  --navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
  --navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
    display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
  text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
  text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
  text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: var(--navbox-group-text-align--mobile);
    white-space: normal;
  }
  
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }
  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
  }
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap); 
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
    /* remove middle dots betweem items */
    .ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
    .ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
      display: none;
    }
    /* remove parentheses around nested lists*/
    .ranger-navbox.pill-mobile .hlist dd ol::before,
    .ranger-navbox.pill-mobile .hlist dd ul::before,
    .ranger-navbox.pill-mobile .hlist dd dl::before,
    .ranger-navbox.pill-mobile .hlist dt ol::before,
    .ranger-navbox.pill-mobile .hlist dt ul::before,
    .ranger-navbox.pill-mobile .hlist dt dl::before,
    .ranger-navbox.pill-mobile .hlist li ol::before,
    .ranger-navbox.pill-mobile .hlist li ul::before,
    .ranger-navbox.pill-mobile .hlist li dl::before,
    .ranger-navbox.pill-mobile .hlist dd ol::after,
    .ranger-navbox.pill-mobile .hlist dd ul::after,
    .ranger-navbox.pill-mobile .hlist dd dl::after,
    .ranger-navbox.pill-mobile .hlist dt ol::after,
    .ranger-navbox.pill-mobile .hlist dt ul::after,
    .ranger-navbox.pill-mobile .hlist dt dl::after,
    .ranger-navbox.pill-mobile .hlist li ol::after,
    .ranger-navbox.pill-mobile .hlist li ul::after,
    .ranger-navbox.pill-mobile .hlist li dl::after {
      display: none;
    }
    /* make lists inline-flex */
    .ranger-navbox.pill-mobile .hlist ul,
    .ranger-navbox.pill-mobile .hlist ol,
    .ranger-navbox.pill-mobile .hlist dl{
      display: inline-flex;
      gap: var(--navbox-pill-gap);
      flex-wrap: wrap;
    }
    .ranger-navbox.pill-mobile .hlist li,
    .ranger-navbox.pill-mobile .hlist dt,
    .ranger-navbox.pill-mobile .hlist dd{
      padding: var(--navbox-pill-padding);
      border-radius: var(--navbox-pill-border-radius);
      box-shadow: var(--navbox-pill-box-shadow);
      background: var(--navbox-pill-background);
      display: flex;
      align-items: center;
      gap: var(--navbox-pill-gap);
      flex-wrap: wrap;
    }
    /* Add a hover / focus feedback style */
    .ranger-navbox.pill-mobile .hlist dd:hover,
    .ranger-navbox.pill-mobile .hlist dd:focus,
    .ranger-navbox.pill-mobile .hlist dt:hover,
    .ranger-navbox.pill-mobile .hlist dt:focus,
    .ranger-navbox.pill-mobile .hlist li:hover,
    .ranger-navbox.pill-mobile .hlist li:focus {
      box-shadow: var(--navbox-pill-box-shadow--hover);
      background: var(--navbox-pill-background--hover);
    }
}
/*********************
* End Template:Navbox*
**********************/


/*******************
* Main page layout *
********************/
#mp-box-welcome {grid-area: welcome;}
#mp-box-about {grid-area: about;}
#mp-box-links {grid-area: links;}
#mp-box-contribute {grid-area: contribute;}
#mp-box-featured {grid-area: featured;}
#mp-box-basics {grid-area: basics;}
#mp-box-gallery {grid-area: gallery;}
#mp-box-iconlists {grid-area: iconlists;}

/* Example Main Page 1 Grid Layout */
#mp-layout1-container {
    display:grid;
    grid-template-areas:
        "welcome"
        "about"
        "featured"
        "basics"
        "gallery"
        "links"
        "contribute";
    grid-template-columns:100%;
    gap:10px;
}

@media screen and (min-width:990px) {
    #mp-layout1-container {
        grid-template-areas:
            "welcome welcome"
            "about about"
            "featured basics"
            "gallery links"
            "contribute contribute";
        grid-template-columns:1fr 1fr;
    }
}

@media screen and (min-width:1350px) {
    #mp-layout1-container {
        grid-template-areas:
            "welcome welcome welcome"
            "about about basics"
            "featured featured basics"
            "gallery links links"
            "contribute contribute contribute";
        grid-template-columns: 2fr 1fr 2fr;
  }
}

/* Example Main Page 2 Grid Layout */
#mp-layout2-container {
    display:grid;
    grid-template-areas:
        "welcome"
        "links"
        "about"
        "gallery"
        "iconlists"
        "contribute";
    grid-template-columns:100%;
    gap:10px;
}

@media screen and (min-width:990px) {
    #mp-layout2-container {
        grid-template-areas:
            "welcome links"
            "gallery about"
            "iconlists about"
            "iconlists contribute";
        grid-template-columns: 3fr 2fr;
    }
}

@media screen and (min-width:1350px) {
    #mp-layout2-container {
        grid-template-areas:
            "welcome welcome links"
            "welcome welcome about"
            "gallery gallery about"
            "iconlists iconlists contribute";
        grid-template-columns: 3fr 2fr 2fr;
  }
}

/* Example Main Page 3 Grid Layout */
#mp-layout3-container {
    display:grid;
    grid-template-areas:
    "welcome"
    "about"
    "featured"
    "four"
    "priority"
        "projects"
    "wiki";
    grid-template-columns:100%;
    gap:10px;
}

@media screen and (min-width:990px) {
    #mp-layout3-container {
        grid-template-areas:
      "welcome welcome"
      "about about"
      "featured four"
            "priority projects"
      "wiki wiki";
        grid-template-columns:1fr 1fr;
    }
}

@media screen and (min-width:1350px) {
    #mp-layout3-container {
        grid-template-areas:
      "welcome welcome welcome"
      "about about four"
            "featured featured four"
            "priority projects projects"
            "wiki wiki wiki";
        grid-template-columns:2fr 1fr 2fr;
  }
}

.mp-box {
    display:flex;
    flex-flow:column nowrap;
    width: calc(100% - 2px);
    box-sizing: border-box;
    background-color: var(--background-color-transparent);
    padding:0;
    box-shadow: 0 0 40px 10px #000000;
    margin-top: 1em;
}

.mp-body {
    height: 100%;
    display: flex;
    padding:0.5em;
    flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
}

.mp-box.has-floating-image {
    display:block;
}

.mp-box.has-floating-image .mp-body {
    height:unset;
    display:block;
}

.mp-box h2 {
    text-align:center;
    font-weight:bold;
    font-family: "Daedalus";
    overflow: initial;
    font-size: 4em;
    margin: 0;
    text-shadow: 0 0 20px #000000;
    color:var(--content-border-color);
    background: radial-gradient(circle, var(--background-color-base), transparent);
    border-radius: 20%;
}

.mp-box .welcome-message {
    font-size: 5em;
    margin: 0;
    padding: 5px 0;
    color: #fff;
    filter: drop-shadow(0px 2px 3px #000);
}

#mp-banner-container {
    position: relative;
}

#mp-box-welcome {
    text-align:center;
    position:relative;
    overflow:hidden;
}

#mp-welcome {
    display:flex;
    flex-flow:column nowrap;
    position: relative;
    height: 100%;
    font-family: var(--heading-font-family);
    z-index: 2;
    box-sizing: border-box;
}

#mp-welcome .welcome-subtitle {
    height: 100%;
    font-family: var(--body-font-family);
    background: color-mix(in srgb, var(--background-color-base) 90%, transparent);
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}

#mp-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    z-index: -1;
    background: url(/images/e/e0/MP_banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.view-dark #mp-banner {
    filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
    filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
  --gap:10px;
  font-size: 1.5em;
}

.mp-links > ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin: 2px;
    gap:var(--gap);
}

.mp-main > .mp-links > ul { display: grid; grid-template-columns: repeat(3, minmax(5em, 1fr));}

.mp-links > ul > li {
    display:flex;
    flex-flow:column nowrap;
    align-items:stretch;
    text-align: center;
    box-sizing:border-box;
    padding-top: 0.5em;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
}

.mp-main > .mp-links > ul > li {
    background: linear-gradient(to bottom, #42a2f160, #4c57b560);
    margin: 0 3em;
    box-shadow: inset 0 0 10px 7px #42a2f180;
    border-radius: 4px;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

.mp-links > ul > li::before {
    transition: opacity 0.5s ease-in-out; 
    z-index: 0;
    pointer-events: none; 
}
.mp-links > ul > li:hover::before {
    opacity: 0.2;
}
.mp-links > ul > li:hover {
    background-color: #42a2f180; 
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}

.mp-links > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    flex:1 1 auto;
    box-sizing:border-box;
    padding:5px;
}

.mp-links > ul > li > a:first-child {
  height:100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
  height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
    height:100%;
}

.mp-links.side-image li {
    flex-flow:row nowrap;
}

/* MP icon lists */
.mp-iconlists {
    display: flex;
    flex-flow: wrap;
    gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
    flex: 1;
    min-width: fit-content;
}

.mp-iconlist {
    font-size: 4em;
}

.mp-iconlist > h3 {
    padding: 0;
    margin: 0;
}

.mp-iconlist > ul {
    list-style: none;
    margin: 0;
}

/* MP gallery */
.mp-box ul.gallery {
    display: flex;
    flex-flow: wrap;
    gap: 5px 10px;
    align-items: flex-end;
    justify-content: space-evenly;
    margin: 0;
}

.mp-box ul.gallery .gallerytext {
    margin-top: 1em;
    padding: 0;
    background-color: var(--background-color-neutral-subtle);
}

.mp-box .gallerybox:hover .gallerytext {
    background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
}

.mp-box ul.gallery .gallerytext > p {
    margin: 0;
}

.mp-box ul.gallery .gallerytext a {
    display: block;
    padding: .5em 0;
}

/***********************
* End main page layout *
************************/

/***********************
* Start DRUID infoboxes *
************************/

.druid-container {
    --druid-background-color: var(--background-color-base);
    --druid-secondary-background-color: var(--color-progressive);
    --druid-secondary-background-label-color: var(--content-link-label-color);
    --druid-tertiary-background-color: var(--background-color-neutral-subtle);
    --druid-border-color: var(--content-border-color);
    --druid-link-color: var(--content-link-color);
    --druid-link-label-color: var(--content-link-label-color);
}

.npc-infobox {
    border-radius:5px;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat;
}

.druid-container {
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    padding: 0.5em;
    width:100%;
    max-width:26em;
    box-sizing: border-box;
    border-collapse: separate;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    text-align:center;
    font-size:3em;
    padding:1px;
    border-radius: 0.1em;
}

.npc-infobox .druid-title,
.npc-infobox .druid-section {
    background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
    color:var(--druid-secondary-background-label-color);
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}

.druid-label {
    font-weight:bold;
    text-align: right;
    box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 40%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
    padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
    padding: 0.35em;
}

.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
    text-align: center;
}

.druid-section-container > .druid-collapsible {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
    content:'\2013';
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
    font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
    content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
}

div.druid-row + div.druid-row {
    margin-top: 0;
}

.npc-infobox div.druid-row > .druid-label {
    background: var(--druid-tertiary-background-color);
}

.druid-infobox .druid-title {
  font-weight: 700;
  font-family: var(--heading-font-family);
}

.druid-infobox #toc {
    display:none;
}

/***********************
* End DRUID infoboxes  *
************************/

/*** Miscellaneous ***/
.responsive-image {
    max-width:100%;
    height:auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
    filter:invert(100%);
}

@media screen and (min-width:720px) {
    .mobileonly {
        display:none;
    }
}
@media screen and (max-width:720px) {
    .nomobile {
        display:none;
    }
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
    border: 1px solid var(--content-border-color);
    border-left: 10px solid var(--ambox-color);
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: .6em;
    margin: 1em 0;
    padding: 3px .6em;
    background-color: var(--background-color-neutral-subtle);
    box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
    .ambox {
        margin-inline: 10%;
    }
}

.ambox.tiny {
    padding: .04rem .5em;
    margin-inline: 0;
    width: fit-content;
}

.ambox + .ambox {
    margin-top: -.6em;
}

.ambox-content p {
    margin: .15em 0;
}

.ambox-title {
    font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
    padding: 1px 0 1px 1.6em;
    margin-bottom: 0.5em;
    font-style: italic;
    border-top: 1px solid var(--border-color-subtle);
    border-bottom: 1px solid var(--border-color-subtle);
}

.hatnote.icon {
    padding-left: 0;    
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
  background-color: rgb(127, 127, 127);
  transition: all 0.3s;
  cursor: pointer;
}

.spoiler-content > span {
  opacity: 0;
  transition: all 0.3s;
}

.spoiler-content > * {
  pointer-events:none;
}

.spoiler-content.show > * {
  pointer-events:unset;
}

.spoiler-content.show {
  background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
  opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
    display: inline-flex; 
    align-items: center;
    height: var(--link-icon-line-height);
    vertical-align: bottom;
}

.link-icon .regular {
    align-self: center;
}

.link-icon .regular a {
    display: flex;
}

.link-icon .regular img {
    height: var(--link-icon-size);
    max-width: var(--link-icon-size);
}

.link-icon .fallback {
    outline: 1px solid var(--color-base);
    border-radius: 50%;
    text-align: center;
    width: var(--link-icon-size);
    line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
    display: inline-block;
}

.link-icon.notext {
    display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
    background: var(--background-color-neutral-subtle);
    border-radius: 5px;
    border: 2px solid var(--content-border-color);
    margin: .5em 0;
    padding: .5em;
}

.quote .block {
    display: block;
}

.quote .title {
    font-size: large;
    font-weight: bold;
}

.quote .content {
    font-style: italic;
}

.quote .author {
    font-weight: bold;
    text-align: end;
}

.quote .marks-wrapper {
    display: flex;
    gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
    font-size: 100px;
    line-height: 0px;
}

.quote .marks-wrapper::before {
    content: "\201C";
    margin-top: 40px;
}

.quote .marks-wrapper::after {
    content: "\201D";
    align-self: end;
    margin-bottom: -10px;
}

/************************
* End Modular Templates *
*************************/

.button-expand-header {
    margin-top: 0.5em;
    width: 100%;
    padding: 14px 18px;
    padding-right: 60px;
    background: var(--background-color-base);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
}

.button-expand-header:hover {
    background: var(--background-color-transparent);
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 30px #4c57b580,
                0 0 10px #4c57b5a0;
}

.button-expand-header:active {
    border-radius: 20px;
    transition: 0.2s;
}

.button-expand-header::before {
    content: '[ + ]';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.button-expand-header:has(+ .mw-collapsible:not(.mw-collapsed))::before {
    content: '[ - ]';
}

.button-expand-header > span:not([typeof]) {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.2s;
}




@media screen and (max-width:720px) {
    h2.mw-customtoggle > span:not([typeof])::after {
        display: none;
    }
}

a.tabber__tab {
    margin-top: 0.7em;
    font-size: 2em;
    margin-left: 0.6em;
    margin-bottom: 0.7em;
}

header.tabber__header {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

a.tabber__tab[aria-selected="true"]{
    background: var(--background-color-transparent);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
}

@media (hover: hover) {
    .tabber__tab:hover {
        box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 30px #4c57b580,
                0 0 10px #4c57b5a0;
        background-color: var(--background-color-base); 
    }
}

.tabber__panel > div.mw-heading.mw-heading2 > h2 {
    border-bottom: 1px solid var(--color-progressive) !important;
    padding-bottom: 0.5em;
    text-shadow: 0 0 20px black;
}

.tabber__panel > div > h2 > span {
    text-shadow: 0 0 10px black;
    color: var(--content-link-color);
    margin-left: 0.1em;
    padding: 0 0.5em 0;
}

header.tabber__header {
    box-shadow: none;
}

.tabber__header .tabber__header__prev::after, .tabber__header .tabber__header__next::after {
    display: block;
    width: inherit;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1em;
}
@media screen and (max-width: 720px) {
    .button-expand-header {
        background-color: #8dbec280;
        box-shadow: 0 0 40px var(--color-progressive);
    }
    .button-expand-header > span:after {
        position: relative;
        font-size: 1em;
        opacity: 1;
        left: 0;
        bottom: 0;
        text-align: inherit;
    }
}

.button-expand-header > img { 
    padding: 0 1em 0;
}

.button-expand-header:hover > span:after{
  opacity: 1;
  font-size: 0.75em;
}

.class-box {
    box-shadow: 0 0 20px #000000;
    padding: 0 0.5em 0;
}


/* ===============================
   MP elements
   =============================== */

.main-page-links {
    font-weight: bold;
    text-shadow: 0 0 6px #000000;
    margin: 1em;
}

.mp-box pre {
    font-family: var(--body-font-family);
    color: var(--color-progressive);
    border-radius:5px;
    border-image-source: var(--border-image-base);
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
    text-align: center;
}


/* ===============================
   DRUID Boss Infoboxes
   =============================== */
/* UNHOLY */
.druid-data-Unholy a, .druid-data-Unholy a:visited {
    color: black;
    text-shadow: 
    0 0 5px white, 0 0 10px white, 0 0 15px white;
}
/* VOIDBOUND */
.druid-data-Voidbound a, .druid-data-Voidbound a:visited {
    color: #e48cff;
    text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
}
/* BLOODSHOT */
.druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
    color: #d23c3c;
    text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
}
/* ROYAL */
.druid-data-Royal a, .druid-data-Royal a:visited {
    color: #a86dff;
    text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
}
/* GILDED */
.druid-data-Gilded a, .druid-data-Gilded a:visited {
    color: #ffb84d;
    text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
}
/* IRRADIATED */
.druid-data-Irradiated a, .druid-data-Irradiated a:visited {
    color: #4dff4d;
    text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
}
/* COMPANION */
.druid-data-Companion a, .druid-data-Companion a:visited {
    color: #ffd700;
    text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
}
/* RUNES */
.druid-data-Rune a, .druid-data-Rune a:visited {
    color: #bfbfbf;
    text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
}

.druid-row[data-druid-section-row="Loot"] div {
    border-top: 1px solid var(--content-border-color);
    padding-top: 0.75em;
    padding-bottom: 0.5em;
    flex-wrap: nowrap;
    flex-direction: row;
    display: block;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 100%;
}

div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
    border-top: none;
}

.druid-data .image {
    margin-left: 0%;
}

.boss-percent {
    float: right;
    color: var(--content-border-color);
    text-shadow: 0 0 2px var(--background-color-base), 0 0 6px var(--background-color-base), 0 0 10px var(--background-color-base);
}

.loot-data-infobox {
    float: left;
    display: contents;
    align-items: center;
}

.item-infobox div[data-druid-section] > .druid-section {
    font-weight: bolder;
    text-shadow: 0px 2px black;
}

.druid-infobox .druid-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-border-color);
    font-family: "Daedalus", sans-serif;
    line-height: 1em;
    font-weight: 1000;
    font-size: 3em;
    min-height: 2.2em;
    flex-wrap: wrap;
    text-shadow: 0 0 20px black;
}

.boss-infobox-subtitle {
    font-weight: 500;
    font-size: 0.75em;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    width: 100%
}
/* ===============================
   Dungeon Page CSS
   =============================== */


.dungeon-page-box {
    background-color: transparent;
    box-shadow: none;
    transition: 0.5s;
    padding: 1em;
    position: relative;
    padding: 0 1em;
    border-radius: 0px;
}

.dungeon-page-smaller-box li {
    display: inline-block;
    width: 18%;
    margin: 0 1% 1% 0;
    vertical-align: top;
    text-align: center;
    vertical-align: middle;
}

.dungeon-page-smaller-box a {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    vertical-align: middle;
}

.mp-links.dungeon-page-smaller-box > ul > li:hover {
    background-color: #42a2f110; 
}

.pre-dungeon {
    width: 50%;
}

.dungeon-enemies {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    justify-content: center;
}

.dungeon-enemies .druid-container {
    margin: 2%;
}

.tipstricks {
    display: block flex;
    width: 75%;
}

.pre-dungeon {
    width: -moz-fit-content;   /* Firefox, Safari, Chromium */
    width: -webkit-fit-content;
    width: fit-content;   
    display: grid;
}

.pre-dungeon p {
    margin: 2% 0;
    border-radius: 2px 20px 10px 20px;
    padding-bottom: 1%;
    box-shadow: 0.3em 0.3em 20px #000000;
    display: block;
    width: auto;
    padding: 1em;
    background: linear-gradient(to right, var(--background-color-base), transparent);
}

.dlog {
    margin-bottom: 2%;
    background: linear-gradient(to right,rgba(31, 35, 77, 1) 0%,rgba(31, 35, 77, 1) 75%,rgba(31, 35, 77, 0) 100%);
    padding: 0.5%;
    border: 3px solid;
    border-image: linear-gradient(to right, rgba(71, 75, 117, 1) 0%, rgba(71, 75, 117, 1) 75%, rgba(71, 75, 117, 0) 100%) 1 stretch;
    border-right: none;
    border-top: none;
    border-bottom: none;
    min-width: 20%;
    max-width: 70%;
    width: fit-content;
    text-wrap: balance;
    font-size: 2em;
}

.dlog::before {
    content: url("/wiki/Special:Redirect/file/DNexus.png") " " url("/wiki/Special:Redirect/file/Dlog-text.png");
    display: inline-block;
    background: linear-gradient(to right, var(--color-progressive--hover), transparent);
    padding: 0.5em 0;
    border-radius: 2px 0 0 2px;
    margin-right: 10px;
}

.dlog p {
    position: relative;
    color: #f1f1f1;
    font-family: "Daedalus", Sans-Serif;
    font-size: 1em;
    line-height: 1.2;
    text-shadow: 0 0 2px #41a0ee, 0 0 4px #2a5bc7;
    word-wrap: break-word;
    padding: 1%;
    padding-top: 0.3%;
}

@media only screen and (max-width: 768px) {
  .daedalus-log {
    display: none;
  }
}


/* ===============================
   Skill Tree
   =============================== */
   /**
 * ==============================
 * Tooltips Gadget (Base Styles)
 * ==============================
 */
.main-tooltip {
    border-radius:5px;
    border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
    border-image-slice: 6;
    border-image-width: 6px;
    border-image-repeat: repeat repeat;
    box-shadow: 0 0 10px black;
    margin-bottom: 5px;
    padding: 1em 1em;
    background-color: #312b38;
}

#tooltip-wrapper {
    padding: 0.3em;
}

.has-redlinks,
.tooltip-loading,
.advanced-tooltip .tooltip-contents {
    display: none;
}

.tooltips-init-complete {
    cursor: help;
}

.main-tooltip img {
    vertical-align: middle;
}

.advanced-tooltip img {
    box-shadow: 0 0 10px #000000;
}

.advanced-tooltip .imhoveringit {
    position: relative;
    display: inline-block;
}

.advanced-tooltip .tooltip-base-image,
.advanced-tooltip .tooltip-hover-image {
    transition: opacity 0.2s ease;
}

.advanced-tooltip .tooltip-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.advanced-tooltip .tooltip-base-image {
    opacity: 1;
}

.advanced-tooltip:hover .tooltip-base-image {
    opacity: 0;
}

.advanced-tooltip:hover .tooltip-hover-image {
    opacity: 1;
    pointer-events: auto;
}

.tabber__panel {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabber__panel::-webkit-scrollbar {
    display: none;
}
/**
 * ==============================
 * Skill Tree Layout
 * ==============================
 */
.skill-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px; /* vertical spacing between rows */
}

/* Rows */
.skill-tree .row {
    display: flex;
    justify-content: center;
}
.skill-tree .row-1 { gap: 0; }
.skill-tree .row-2 { gap: 40px; }
.skill-tree .row-3 { gap: 20px; }
.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */

/* Nodes */
.node {
    display: inline-block;
    width: 80px; /* keeps nodes aligned */
    text-align: center;
}

/* Node Title Style */
.skill-title {
  font-weight: bold;
  color: #fca801;
  text-shadow: 2px 2px 8px black;
  border-bottom: 1px solid #fca801;
  padding-bottom: 0.5em;
}
.main-tooltip p {
    color: #54fc55;
}
.main-tooltip span {
    color: #54fcfc;
    text-shadow: 0 0 2px #54fcfc;
}


/* item pages */

.display-items {
    display: flex;
    flex-wrap: wrap;
}

a.tabber__tab {
    font-size: 2em;
    text-shadow: 1px 1px 12px black;
}
.druid-main-images-label {
    font-size: 1.2em;
}
.druid-main-images-label.focused {
    box-shadow: 0 0 20px var(--druid-link-color);
}

.hoverbox:hover {
    background-color: #1a1a22E0;
    box-shadow: 0 0 30px 30px var(--background-color-base);
    border-radius: 0 0 15px 15px;
    border-top: 0.1em solid var(--color-progressive--hover);
    transition: 0.4s;
}

.hoverbox {
    background-color: transparent;
    box-shadow: none;
    transition: 0.5s;
    padding: 1em;
    margin-left: -0.5em;
    position: relative;
    z-index: 0;
    padding: 0 1em;
    padding-bottom: 1em;
    border-radius: 0px;
    border-top: 0.1em solid var(--color-progressive);
    margin: 1em 0;
    overflow: hidden;
}

.hoverbox > div > h3 > a {
    border-bottom: 2px solid currentColor;
    background: no-repeat cover;
}

.mp-main {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    aspect-ratio: 16 / 9;
    padding-top: 1em;
    padding-bottom: 1em;
}

.class-rarities {
    display:flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    align-items: center;
}

.class-rarities > div {
    margin: 1em 0 1em;
    padding: 0 1em 0;
    border-radius: 25px;
}

.class-rarities > div > p > img {
    margin: 0 2em 0 0;
    border-radius: 100px;
    background: #1a1a2280;
    box-shadow: 0 0 10px black;
}

.class-rarities > div > p > span > img {
    text-shadow: 0 0 10px black;
}

.class-rarities > div > p > a {
    text-shadow: 0 0 10px black;
}

.class-irradiated {
    box-shadow: 0 0 20px #4dff4d;
    background-color: #4dff4d80;
}

.class-gilded {
    box-shadow: 0 0 20px #ffb84d;
    background-color: #ffb84d80;
}

.class-royal{
   box-shadow: 0 0 20px #a86dff;
   background-color: #a86dff80;
}

.class-bloodshot {
    box-shadow: 0 0 20px #d23c3c;
    background-color: #d23c3c80;
}

.class-voidbound{
    box-shadow: 0 0 20px #e48cff;
    background-color: #e48cff80;
}

.class-unholy {
    box-shadow: 0 0 20px black;
    background-color: #00000080;
}

div.class-rarities > div > p > a {
    font-weight: bold;
}
/* TABLES */

.wikitable td,
.wikitable th {
  border: none !important;
}

.wikitable {
    margin: 0;
}

td > div.mw-collapsible > button {
    margin: 1.5em;
    padding: 1.2em;
    background-color: #8dbec280;
    box-shadow: 0 0 20px #8dbec2FF;
    border-radius: 30px;
}

.wikitable td,
.wikitable th {
    font-size: 1.1em;
}

td > div.mw-collapsible > button > span.mw-collapsible-text {
    text-shadow: 0 0 4px black;
}

td > div.mw-collapsible > button > span.mw-collapsible-text:hover {
    text-decoration: none;
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::after {
    content: '';
}

td > div.mw-collapsible > button.mw-collapsible-toggle-default::before {
    content: '';
}

/* Inline Image Template */

.inline-image-image > p > span > span > img {
    box-shadow: 0 0 20px black;
    border-radius: 12px;
    border: 2px solid black;
}

.inline-image-caption > p > span {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 4px;
}

.inline-image-caption > p > span::before {
    content: '❖ ';
}

/* dynamic gif display css ONLY TOUCH IF YOU KNOW WHAT YOU ARE DOING */
.dynamic-gif-container {
    padding-top: 8em;
    width: 100%;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    z-index: 100;
    transition: all 0.3s ease;
    display: block !important;
    visibility: visible !important;
    clear: both;
}

.dynamic-gif-container.expanded .gif-display-area {
    max-height: none;
    height: auto;
    opacity: 1;
    padding: 15px;
    overflow: visible;
}

.gif-display-area {
    background: #1a1a22c0;
    border-radius: 8px;
    overflow: visible;
    height: auto;
    min-height: 80px;
    opacity: 1;
    padding: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px black;
    border: 1px solid var(--color-progressive);
    display: block !important;
    visibility: visible !important;
}

.gif-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-progressive);
}

.gif-title {
    font-size: 2em;
    font-weight: bold;
    font-family: var(--heading-font-family);
    color: var(--color-progressive);
    margin: 0;
}

.gif-toggle-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s ease;
}

.gif-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #5a5a5a;
}

.gif-image-container {
    width: 100%;
    min-height: 200px;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color-base);
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
}

.gif-image-container img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 4px;
    object-fit: contain;
}

.gif-image-container.loading::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-progressive--hover);
    border-top-color: #e0e0e0;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gif-error {
    color: var(--color-destructive);
    font-size: 1em;
    text-align: center;
    padding: 20px;
}

.gif-caption {
    text-align: center;
    color: var(--color-base);
    font-size: 1em;
    font-style: italic;
    padding: 5px;
    background: var(--color-progressive--hover);
    border-radius: 4px;
    text-shadow: 0 0 5px var(--content-border-color);
    display: none;
}

.gif-placeholder {
    color: var(--color-progressive--hover);
    font-size: 1em;
    text-align: center;
    padding: 60px 20px;
    height: 500px;
}

@media (max-width: 768px) {
    .dynamic-gif-container {
        position: relative;
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    .dynamic-gif-container.expanded .gif-display-area {
        max-height: none;
    }
}

.skill-tree-section::after {
    content: "";
    display: table;
    clear: both;
}

.tabber .tabbertab {
    clear: both;
    overflow: auto;
}

.gif-tabber-display-container {
    display: block;
}

.decor-page {
    border-image: url(/wiki/Special:Redirect/file/Wiki-border-book.png);
    border-image-slice: 65 122 65 122;
    border-image-width: 100% 100% 100% 100%;
    border-image-repeat: stretch stretch;
    border-image-outset: 0px 0px 0px 0px;
    border-style: solid;
    color: var(--background-color-base);
    width: 492px;
    height: 262px;
}

.decor-page > p{
    padding: 3.5em;
    font-family: var(--heading-font-family);
}
.swap-silverling {
  position: relative;
  display: inline-block;
  width: 7em; 
  text-align: left;
  text-shadow: 0 0 10px currentColor;
  font-weight: bold;
}
.swap-silverling::before,
.swap-silverling::after {
  position: absolute;
  left: 0;
  bottom: -0.45em;
  width: 140%;
  text-align: inherit;
  animation: fadeSwap 5s infinite ease-in-out;
}
.swap-silverling::before {
  content: "Silverlings.";
  opacity: 1;
}
.swap-silverling::after {
  content: "Players.";
  opacity: 0;
  animation-delay: 2.5s; 
}
@keyframes fadeSwap {
  0%, 40%   { opacity: 1; }
  50%, 90%  { opacity: 0; }
  100%      { opacity: 1; }
}
.main-welcome {
    text-shadow: 0 0 2px black;
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.5em;
    padding: 14px 18px;
    padding-right: 60px;
    background: var(--background-color-base);
    color: var(--color-progressive);
    border: 2px solid var(--color-progressive);
    cursor: pointer;
    font-family: var(--body-font-family);
    font-size: 16px;
    font-weight: 700;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 0 2px #0f0f0f,
                inset 0 0 20px #42a2f180;
    padding: 1em;
}

.welcome-text {
  flex: 2;
  min-width: 300px;
  border-left: 2px solid var(--color-progressive);
  padding: 1em;
}

div.main-welcome > .mp-links {
  flex: 1;
  min-width: 250px;
  margin: 1em;
}

.mw-collapsible {
    padding-top: 2em;
}

.tab-gif-container {
    background: #1a1a22c0;
    border: 1px solid var(--color-progressive);
    border-radius: 8px;
    padding: 15px;
    margin: 1em 0;
    box-shadow: 0 2px 20px black;
    display: inline-block;
    max-width: 800px;
    width: auto;
    min-width: 400px;
}

.tab-gif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 2em;
    border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-title {
    font-size: 1.5em;
    font-weight: bold;
    font-family: var(--heading-font-family);
    color: var(--color-progressive);
    margin: 0;
}

.tab-gif-toggle-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.tab-gif-toggle-btn:hover {
    background: #2a2a2a;
    border-color: #5a5a5a;
}

.tab-gif-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-progressive);
}

.tab-gif-tab {
    background: var(--background-color-base);
    color: var(--color-progressive--hover);
    border: 1px solid var(--color-progressive);
    font-family: var(--body-font-family);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-gif-tab:hover {
    background: var(--color-progressive--hover);
    color: #ffffff;
    border-color: var(--color-progressive);
    box-shadow: 0 0 8px var(--color-progressive);
}

.tab-gif-tab.tab-gif-active {
    background: var(--color-progressive);
    color: #ffffff;
    border-color: var(--color-progressive);
    font-weight: bold;
    box-shadow: 0 0 12px var(--color-progressive);
}

.tab-gif-display-area {
    background: var(--background-color-base);
    border-radius: 6px;
    padding: 10px;
    min-height: 200px;
}

.tab-gif-display-area .gif-image-container {
    width: 100%;
    min-height: 200px;
    max-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background-color-base);
    border-radius: 4px;
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
}

.tab-gif-display-area .gif-image-container img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
    border-radius: 4px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.tab-gif-display-area .gif-image-container.loading::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-progressive--hover);
    border-top-color: #e0e0e0;
    border-radius: 50%;
    animation: tab-gif-spin 1s linear infinite;
}

@keyframes tab-gif-spin {
    to { transform: rotate(360deg); }
}

.tab-gif-display-area .gif-placeholder {
    color: var(--color-progressive--hover);
    font-size: 1em;
    text-align: center;
    padding: 60px 20px;
    font-style: italic;
}

.tab-gif-display-area .gif-error {
    color: var(--color-destructive);
    font-size: 1em;
    text-align: center;
    padding: 20px;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 4px;
}

.tab-gif-display-area .gif-caption {
    text-align: center;
    color: var(--color-base);
    font-size: 1em;
    font-style: italic;
    padding: 5px;
    background: var(--color-progressive--hover);
    border-radius: 4px;
    text-shadow: 0 0 5px var(--content-border-color);
    margin-top: 5px;
}

@media (max-width: 768px) {
    .tab-gif-container {
        display: block;
        width: 100%;
        min-width: auto;
        margin: 1em 0;
    }
    
    .tab-gif-tabs {
        flex-direction: column;
    }
    
    .tab-gif-tab {
        width: 100%;
        text-align: center;
    }
    
    .tab-gif-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .tab-gif-toggle-btn {
        width: 100%;
    }
}

.tab-gif-container.full-width {
    display: block;
    width: 100%;
    max-width: 100%;
}

.tab-gif-container.float-left {
    float: left;
    margin-right: 1em;
}

.tab-gif-container.float-right {
    float: right;
    margin-left: 1em;
}

@@ Line 4: / Line 4: @@
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
 @font-face {
-	font-family: "Daedalus";
+    font-family: "Daedalus";
-	src: url("/fonts/000webfont.ttf") format("truetype");
+    src: url("/fonts/000webfont.ttf") format("truetype");
 }
 :root,
 .view-dark {
-     --wiki-body-background-image: url(/wiki/Special:Redirect/file/Site-background-image.jpg);
+     --content-link-color: #ffc05f;
-    --wiki-body-background-color: #1a1a22;
+     --content-border-color: #feffe5;
-    --wiki-body-background-color--rgb: 26,26,34;
+     --heading-font-family: "Daedalus", sans-serif;
-    --wiki-body-dynamic-color: #ffffff;
+     --body-font-family: "Outfit", serif;
-    --wiki-body-dynamic-color--rgb: 255,255,255;
+     --accent-link-color: #22214d;
-    --wiki-body-dynamic-color--inverted: #000000;
+     --content-link-label-color: #0b101b;
-    --wiki-body-dynamic-color--inverted--rgb: 0,0,0;
-    --wiki-body-dynamic-color--secondary: #dddddd;
-    --wiki-body-dynamic-color--secondary--rgb: 221,221,221;
-    --wiki-body-dynamic-color--secondary--inverted: #333333;
-    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
-    --wiki-body-font-family: "Outfit", serif;
-    --wiki-pixel-font: "Silkscreen", sans-serif;
-    --wiki-content-background-color: #1a1a22;
-    --wiki-content-background-color--rgb: 26,26,34;
-    --wiki-content-background-opacity: 0.92;
-    --wiki-content-background-color--secondary: #1b1b1b;
-    --wiki-content-background-color--secondary--rgb: 11,0,0;
-    --wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
-     --wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
-    --wiki-content-border-color: #feffe5;
-     --wiki-content-border-color--rgb: 254,255,229;
-    --wiki-content-text-color: #ededed;
-    --wiki-content-text-color--rgb: 237,237,237;
-    --wiki-content-link-color: #ffc05f;
-    --wiki-content-link-color--rgb: 255,192,95;
-    --wiki-content-link-label-color: #0b101b;
-    --wiki-content-link-label-color--rgb: 11,16,27;
-    --wiki-content-link-color--visited: var(--wiki-content-link-color);
-    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-content-link-color--hover: var(--wiki-content-link-color);
-    --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-content-redlink-color: #f57c51;
-    --wiki-content-redlink-color--rgb: 245,124,81;
-    --wiki-content-text-mix-color: #868686;
-    --wiki-content-text-mix-color--rgb: 134,134,134;
-    --wiki-content-text-mix-color-95: #2a2a2a;
-    --wiki-content-text-mix-color-95--rgb: 42,42,42;
-    --wiki-content-dynamic-color: #ffffff;
-    --wiki-content-dynamic-color--rgb: 255, 255, 255;
-    --wiki-content-dynamic-color--inverted: #000000;
-    --wiki-content-dynamic-color--inverted--rgb: 0, 0, 0;
-    --wiki-content-dynamic-color--secondary: #dddddd;
-    --wiki-content-dynamic-color--secondary--rgb: 221, 221, 221;
-    --wiki-content-dynamic-color--secondary--inverted: #333333;
-    --wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51;
-    --wiki-heading-color:  var(--wiki-content-text-color);
-    --wiki-heading-color--rgb: var(--wiki-content-text-color--rgb);
-    --wiki-heading-font-family: "Daedalus", sans-serif;
-     --wiki-accent-color: #42a2f1;
-    --wiki-accent-color--rgb: 66, 162, 241;
-    --wiki-accent-color--hover: #ba453c;
-    --wiki-accent-color--hover--rgb: 186,69,60;
-    --wiki-accent-label-color: #0b101b;
-    --wiki-accent-label-color--rgb: 11,16,27;
-     --wiki-accent-link-color: #22214d;
-     --wiki-accent-link-color--rgb: 34, 33, 77;
-    --wiki-sidebar-background-color: var(--wiki-content-background-color);
-    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
-    --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
-    --wiki-sidebar-border-color: var(--wiki-content-border-color);
-    --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
-    --wiki-sidebar-link-color: var(--wiki-content-link-color);
-    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-sidebar-heading-color: var(--wiki-heading-color);
-    --wiki-sidebar-heading-color--rgb: var(--wiki-heading-color--rgb);
-    --wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
-    --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
-    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
-    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
-    --wiki-navigation-border-color: var(--wiki-content-border-color);
-    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
-    --wiki-navigation-text-color: var(--wiki-content-link-color);
-    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
-    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
-    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
-    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
-    --wiki-navigation-selected-border-color--rgb: var(--wiki-navigation-border-color--rgb);
-    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
-    --wiki-navigation-selected-text-color-rgb: var(--wiki-content-text-color--rgb);
-    --wiki-alert-color: #ce0018;
-    --wiki-alert-color--rgb: 206,0,24;
-    --wiki-alert-label-color: #000000;
-    --wiki-alert-label-color--rgb: 0,0,0;
-    --wiki-warning-color:#cf721c;
-    --wiki-warning-color--rgb: 207,114,28;
-    --wiki-warning-label-color: #000000;
-    --wiki-warning-label-color--rgb: 0, 0, 0;
-    --wiki-success-color: #0c742f;
-    --wiki-success-color--rgb: 12,116,47;
-    --wiki-success-label-color: #000000;
-    --wiki-success-label-color--rgb: 0,0,0;
-    --wiki-icon-general-filter: invert(100%);
-    --wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%);
-    --wiki-content-border-image: url(/wiki/Special:Redirect/file/Wiki-border.png);
 }
 :root{
-		/***********************
+    --is-top-logo: 1;
-	  start logo position
+    --logo-file-width: 160;
-	----------------------*/
+    --logo-file-height: 160;
-	--wiki-is-top-logo: 1; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
+    --logo-height: calc(var(--logo-file-height)*1px);
+    --logo-margin: 15px;
-	--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
+    --is-navigation-inside-content: 0;
-	--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */
-	--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px); /* Valid only when --wiki-is-top-logo is 1. The height the logo should be shown */
-	--wiki-logo-margin: 15px; /* the width of margin below the logo. When --wiki-is-top-logo is 1, this is also the default value of --wiki-top-spacing */
-	/*-----------------------
-	   end logo position
-	***********************/
-	--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */
 }
@@ Line 135: / Line 30: @@
 ******************************/
 :root {
-	image-rendering: pixelated !important;
+    image-rendering: pixelated !important;
-	--pi-background: var(--wiki-content-background-color);
+    --pi-background: var(--background-color-base);
-	--pi-secondary-background: var(--wiki-accent-color);
+    --pi-secondary-background: var(--color-progressive);
-	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
+    --pi-secondary-background-label: var(--content-link-label-color);
-	--pi-secondary-background-label: var(--wiki-accent-label-color);
+    --pi-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
-	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
 }
 .portable-infobox .pi-title,
 .portable-infobox .pi-header {
-	text-align:center;
+    text-align:center;
-	font-size:1.5em;
+    font-size:1.5em;
-	background:rgba(var(--pi-secondary-background--rgb), 0.75);
+    background: color-mix(in srgb, var(--color-progressive) 75%, transparent);
-	color:var(--pi-secondary-background-label);
+    color:var(--pi-secondary-background-label);
 }
 .portable-infobox .pi-data {
-	background:rgba(var(--pi-secondary-background--rgb), 0.18);
+    background: color-mix(in srgb, var(--color-progressive) 18%, transparent);
-	font-size: 115%;
+    font-size: 115%;
-	word-wrap: normal;
+    word-wrap: normal;
 }
-/*************************************************
+.miniboss-box .portable-infobox {
-.tiered1 .portable-infobox{
+    box-shadow: 3px 3px 6px var(--content-border-color);
 }
-.tiered2 .portable-infobox{
+.portable-infobox .pi-image {
+    padding: 8px;
 }
-.tiered3 .portable-infobox{
+.pi-image-thumbnail {
+    max-width:100%;
 }
-.tiered4 .portable-infobox{
+.pi-section-navigation .pi-section-tab.pi-section-active,
+.pi-section-navigation .pi-section-tab.current,
+.pi-media-collection .pi-tab-link.current {
+    background: var(--pi-secondary-background);
+    color: var(--pi-secondary-background-label);
 }
-.tiered5 .portable-infobox{
+.mw-body .portable-infobox h2,
+.mw-body .portable-infobox h3 {
+    text-shadow: 0 0 5px var(--color-progressive);
+    border-bottom: 0;
+    font-family: var(--heading-font-family);
+    font-weight: 550;
+    margin: 0;
+    word-wrap: normal;
 }
-.tiered6 .portable-infobox{
+.mw-body .portable-infobox  {
+    border-radius:5px;
+    border-image-source: var(--border-image-base);
+    border-image-slice: 15 16;
+    border-image-width: 15px;
+    border-image-repeat: stretch;
 }
-.tiered7 .portable-infobox{
+.mw-body .portable-infobox h3 {
+    font-size: 80%;
+    font-weight: 500;
 }
+/*****************************
+*   End PortableInfoboxes    *
+******************************/
-.tiered8 .portable-infobox{
+/** as of Module:navbox version 1.2.2 **/
-}
-.tiered9 .portable-infobox{
+/*********************************************************************************************************************
+* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
-}
+**********************************************************************************************************************/
+.hlist dl,
-.tiered10 .portable-infobox{
+.hlist ol,
+.hlist ul {
+    margin: 0;
+    padding: 0;
 }
-.tiered11 .portable-infobox{
+/* Display list items inline */
+.hlist dd,
+.hlist dt,
+.hlist li {
+    /*
+     * don't trust the note that says margin doesn't work with inline
+     * removing margin: 0 makes dds have margins again
+     * We also want to reset margin-right in Minerva
+     */
+    margin: 0;
+    display: inline;
 }
-.companion .portable-infobox{
+/* Display requested top-level lists inline */
+.hlist.inline,
+.hlist.inline dl,
+.hlist.inline ol,
+.hlist.inline ul,
+/* Display nested lists inline */
+.hlist dl dl,
+.hlist dl ol,
+.hlist dl ul,
+.hlist ol dl,
+.hlist ol ol,
+.hlist ol ul,
+.hlist ul dl,
+.hlist ul ol,
+.hlist ul ul {
+    display: inline;
 }
-.irradiated .portable-infobox{
+/* Hide empty list items */
+.hlist .mw-empty-li {
+    display: none;
 }
-.royal .portable-infobox{
+/* TODO: :not() can maybe be used here to remove the later rule. naive test
+ * seems to work. more testing needed. like so: */
-}
+.hlist dt:not(:last-child)::after {
+    content: ":\20";
-.bloodshot .portable-infobox{
 }
+.hlist dd:not(:last-child)::after,
-.cross .portable-infobox{
+.hlist li:not(:last-child)::after {
+    /* "space, Middle Dot, space"
+    We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
+    The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
+    /* content: "\20\00B7\20"; font-weight: bold; */
+    /* "space &nbsp; • &nbsp; space"
+       There may (and likely) be an extra whitespace between <li>s,
+       therefore we have to use a space character as last character of this sequence.
+       By this way, the last space and the next whitespce will collapse as a single space,
+       to make the whitespace on both sides of the middle dot the same width.
+    */
+    content: "\20\A0\2022\A0\20";
+    font-weight: inherit;
 }
-********************************/
-.miniboss-box .portable-infobox {
+/* Add parentheses around nested lists */
-	box-shadow: 3px 3px 6px var(--wiki-content-border-color);
+.hlist dd ol::before,
+.hlist dd ul::before,
+.hlist dd dl::before,
+.hlist dt ol::before,
+.hlist dt ul::before,
+.hlist dt dl::before,
+.hlist li ol::before,
+.hlist li ul::before,
+.hlist li dl::before {
+    content: "\20(";
+    font-weight: inherit;
 }
-.portable-infobox .pi-image {
+.hlist dd ol::after,
-	padding: 8px;
+.hlist dd ul::after,
+.hlist dd dl::after,
+.hlist dt ol::after,
+.hlist dt ul::after,
+.hlist dt dl::after,
+.hlist li ol::after,
+.hlist li ul::after,
+.hlist li dl::after {
+    content: ")";
+    font-weight: inherit;
 }
-.pi-image-thumbnail {
+/* Put ordinals in front of ordered list items */
-	max-width:100%;
+.hlist ol {
+    counter-reset: listitem;
 }
-.pi-section-navigation .pi-section-tab.pi-section-active,
+.hlist ol > li {
-.pi-section-navigation .pi-section-tab.current,
+    counter-increment: listitem;
-.pi-media-collection .pi-tab-link.current {
-	background: var(--pi-secondary-background);
-	color: var(--pi-secondary-background-label);
 }
-/* overqualify these to overwrite normal content heading styles */
+.hlist ol > li::before {
-.mw-body .portable-infobox h2,
+    content: " " counter(listitem) ".\20";
-.mw-body .portable-infobox h3 {
-	text-shadow: var(--wiki-accent-color);
-	border-bottom: 0;
-	font-family: var(--wiki-heading-font-family);
-	font-weight: 550;
-	margin: 0;
-	word-wrap: normal;
 }
-.mw-body .portable-infobox  {
+/* Progressive enhancement:
-	border-radius:5px;
+  * try to make the dot always follow the list item in same line
-	border-image-source: var(--wiki-content-border-image);
+ */
-	border-image-slice: 15 16;
+.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
-	border-image-width: 15px;
+    display: inline-block;
-	border-image-repeat: stretch;
 }
-.mw-body .portable-infobox h3 {
+/********************************************
-	font-size: 80%;
+* End semantically-correct horizontal lists *
-	font-weight: 500;
+*********************************************/
-}
-/*****************************
-*   End PortableInfoboxes    *
-******************************/
-/** as of Module:navbox version 1.2.2 **/
+/**********************************************************
+* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
-/*********************************************************************************************************************
+***********************************************************/
-* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
+.ranger-navbox{
-**********************************************************************************************************************/
+  --navbox-background: none;
-.hlist dl,
+  --navbox-margin: 0.5em auto;
-.hlist ol,
+  --navbox-padding: 4px;
-.hlist ul {
+  --navbox-gap: 3px;
-	margin: 0;
+  --navbox-outer-border-color: color-mix(in srgb, var(--color-progressive) 50%, transparent);
-	padding: 0;
+  --navbox-outer-border-width: 1px;
-}
+  --navbox-outer-border-style: solid;
+  --navbox-outer-border-radius: 0px;
-/* Display list items inline */
+  --navbox-font-size: calc(1em - 2px);
-.hlist dd,
+  --navbox-title-color: var(--content-link-label-color);
-.hlist dt,
+  --navbox-title-font-size: calc(125%);
-.hlist li {
+  --navbox-title-background: var(--color-progressive);
-	/*
+  --navbox-title-icon-color: var(--content-link-label-color);
-	 * don't trust the note that says margin doesn't work with inline
+  --navbox-title-link-color: var(--navbox-title-color);
-	 * removing margin: 0 makes dds have margins again
+  --navbox-title-link-color--visited: var(--navbox-title-link-color);
-	 * We also want to reset margin-right in Minerva
+  --navbox-title-link-color--hover: var(--accent-link-color);
-	 */
+  --navbox-title-redlink-color: var(--navbox-title-link-color);
-	margin: 0;
+  --navbox-title-link-decoration: underline solid;
-	display: inline;
+  --navbox-title-redlink-decoration: underline wavy;
-}
+  --navbox-title-padding--y: 0.5em;
+  --navbox-above-background: color-mix(in srgb, var(--color-base) 15%, transparent);
-/* Display requested top-level lists inline */
+  --navbox-above-color: var(--color-base);
-.hlist.inline,
+  --navbox-above-padding: var(--navbox-list-padding);
-.hlist.inline dl,
+  --navbox-below-background: var(--navbox-above-background);
-.hlist.inline ol,
+  --navbox-below-color: var(--navbox-above-color);
-.hlist.inline ul,
+  --navbox-below-padding: var(--navbox-above-padding);
-/* Display nested lists inline */
+  --navbox-header-color: var(--navbox-title-color);
-.hlist dl dl,
+  --navbox-header-font-size: calc(110%);
-.hlist dl ol,
+  --navbox-header-background: var(--navbox-title-background);
-.hlist dl ul,
+  --navbox-header-icon-color: var(--navbox-title-icon-color);
-.hlist ol dl,
+  --navbox-header-link-color: var(--navbox-title-link-color);
-.hlist ol ol,
+  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
-.hlist ol ul,
+  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
-.hlist ul dl,
+  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
-.hlist ul ol,
+  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
-.hlist ul ul {
+  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
-	display: inline;
+  --navbox-header-padding--y: 0.3em;
-}
+  --navbox-subheader-font-size: calc(100%);
+  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
-/* Hide empty list items */
+  --navbox-list-background: color-mix(in srgb, var(--color-base) 5%, transparent);
-.hlist .mw-empty-li {
+  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 8%, transparent);
-	display: none;
+  --navbox-list-color: var(--color-base);
-}
+  --navbox-list-padding: 0.25em 0.5em;
+  --navbox-group-text-align: left;
-/* TODO: :not() can maybe be used here to remove the later rule. naive test
+  --navbox-group-text-align--mobile: left;
- * seems to work. more testing needed. like so: */
+  --navbox-group-background: color-mix(in srgb, var(--color-progressive) 20%, transparent);
-.hlist dt:not(:last-child)::after {
+  --navbox-group-color: var(--color-base);
-	content: ":\20";
+  --navbox-group-padding: var(--navbox-list-padding);
+  --navbox-tree-line-color: color-mix(in srgb, var(--color-progressive) 30%, transparent);
+  --navbox-tree-line-width: 2px;
+  --navbox-tree-indent: 1em;
+  --navbox-tree-line-indent: 0.5em;
+  --navbox-tree-line-spacing: var(--navbox-gap);
+  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
+  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
+  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
+  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
 }
-.hlist dd:not(:last-child)::after,
+.ranger-navbox.pill,
-.hlist li:not(:last-child)::after {
+.ranger-navbox.pill-mobile{
-	/* "space, Middle Dot, space"
+  --navbox-pill-gap: 0.3em;
-	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
+  --navbox-pill-padding: 0.25em 0.75em;
-	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
+  --navbox-pill-border-radius: 3px;
-	/* content: "\20\00B7\20"; font-weight: bold; */
+  --navbox-pill-box-shadow: none;
-    /* "space &nbsp; • &nbsp; space"
+  --navbox-pill-background: color-mix(in srgb, var(--color-base) 5%, transparent);
-       There may (and likely) be an extra whitespace between <li>s,
+  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
-       therefore we have to use a space character as last character of this sequence.
+  --navbox-pill-background--hover: var(--navbox-pill-background);
-       By this way, the last space and the next whitespce will collapse as a single space,
+  --navbox-list-background: none;
-       to make the whitespace on both sides of the middle dot the same width.
+  --navbox-list-background--striped: color-mix(in srgb, var(--color-base) 3%, transparent);
-    */
-	content: "\20\A0\2022\A0\20";
-	font-weight: inherit;
 }
+.ranger-navbox.no-underline-title-links{
-/* Add parentheses around nested lists */
+  --navbox-title-link-color: var(--accent-link-color);
-.hlist dd ol::before,
+  --navbox-title-link-decoration: none;
-.hlist dd ul::before,
+  --navbox-title-redlink-decoration: none;
-.hlist dd dl::before,
-.hlist dt ol::before,
-.hlist dt ul::before,
-.hlist dt dl::before,
-.hlist li ol::before,
-.hlist li ul::before,
-.hlist li dl::before {
-	content: "\20(";
-	font-weight: inherit;
 }
+.ranger-navbox.noborder,
-.hlist dd ol::after,
+.ranger-navbox.no-border{
-.hlist dd ul::after,
+  --navbox-padding: 0px;
-.hlist dd dl::after,
+  --navbox-outer-border-width: 0px;
-.hlist dt ol::after,
-.hlist dt ul::after,
-.hlist dt dl::after,
-.hlist li ol::after,
-.hlist li ul::after,
-.hlist li dl::after {
-	content: ")";
-	font-weight: inherit;
 }
-/* Put ordinals in front of ordered list items */
+/******************************
-.hlist ol {
+* Fallback for older browsers *
-	counter-reset: listitem;
+*******************************/
+@supports not (color:color-mix(in srgb, #000, transparent)) {
+    .ranger-navbox {
+        --navbox-above-background: var(--background-color-neutral-subtle);
+        --navbox-list-background: transparent;
+        --navbox-list-background--striped: var(--background-color-neutral-subtle);
+        --navbox-group-background: var(--background-color-neutral-subtle);
+        --navbox-tree-line-color: var(--background-color-neutral-subtle);
+    }
+    .ranger-navbox.pill,
+    .ranger-navbox.pill-mobile {
+      --navbox-pill-background: var(--background-color-neutral-subtle);
+      --navbox-list-background--striped: transparent;
+    }
 }
+/***************
+* End fallback *
+****************/
-.hlist ol > li {
+.ranger-navbox{
-	counter-increment: listitem;
+  border-color: var(--navbox-outer-border-color);
+  border-style: var(--navbox-outer-border-style);
+  border-width: var(--navbox-outer-border-width);
+  border-radius: var(--navbox-outer-border-radius);
+  padding: var(--navbox-padding);
+  font-size: var(--navbox-font-size);
+  margin: var(--navbox-margin);
+  background: var(--navbox-background);
+  line-height: 1.5;
+  clear:both;
 }
-.hlist ol > li::before {
+.ranger-navbox * {
-	content: " " counter(listitem) ".\20";
+  border: 0;
 }
+.ranger-navbox .center *{
-/* Progressive enhancement:
+  margin-left: unset;
- * try to make the dot always follow the list item in same line
+  margin-right: unset;
- */
-.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
-	display: inline-block;
 }
+.ranger-navbox,
-/********************************************
+.ranger-navbox .ranger-section,
-* End semantically-correct horizontal lists *
+.ranger-navbox .ranger-listbox{
-*********************************************/
+   display: flex;
+   flex-direction: column;
-/**********************************************************
+   gap: var(--navbox-gap);
-* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
+}
-***********************************************************/
+.ranger-navbox .ranger-title,
-.ranger-navbox{
+.ranger-navbox .ranger-header{
-  --navbox-background: none; /* for entire navbox */
+   text-align: center;
-  --navbox-margin: 0.5em auto;
+   min-height: 1.5em;
-   --navbox-padding: 4px;
+   position: relative;
-   --navbox-gap: 3px; /* when using zero-value, it must be 0px */
+   z-index: 0;
-   --navbox-outer-border-color: var(--wiki-content-border-color--accent);
+   font-weight: bold;
-  --navbox-outer-border-width: 1px;
+}
-   --navbox-outer-border-style: solid;
+.ranger-navbox .ranger-title{
-   --navbox-outer-border-radius: 0px;
+   color: var(--navbox-title-color);
-   --navbox-font-size: calc(1em - 2px);
+   background: var(--navbox-title-background);
-   --navbox-title-color: var(--wiki-accent-label-color);
+   font-size: var(--navbox-title-font-size);
-   --navbox-title-font-size: calc(125%);
+   padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
-  --navbox-title-background: var(--wiki-accent-color);
+}
-  --navbox-title-icon-color: var(--wiki-accent-label-color);
+.ranger-navbox .ranger-title a,
-   --navbox-title-link-color: var(--navbox-title-color);
+.ranger-navbox .ranger-title a:visited,
-   --navbox-title-link-color--visited: var(--navbox-title-link-color);
+.ranger-navbox .ranger-title a:hover,
-   --navbox-title-link-color--hover: var(--wiki-accent-link-color);
+.ranger-navbox .ranger-title a.external,
-   --navbox-title-redlink-color: var(--navbox-title-link-color);
+.ranger-navbox .ranger-title a.external:visited,
-  --navbox-title-link-decoration: underline solid;
+.ranger-navbox .ranger-title a.external:hover {
-  --navbox-title-redlink-decoration: underline wavy;
+    text-decoration: var(--navbox-title-link-decoration);
-  --navbox-title-padding--y: 0.5em;
+}
-  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
+.ranger-navbox .ranger-title a.new,
-  --navbox-above-color: var(--wiki-content-text-color);
+.ranger-navbox .ranger-title a.new:visited {
-  --navbox-above-padding: var(--navbox-list-padding);
+    text-decoration: var(--navbox-title-redlink-decoration);
-  --navbox-below-background: var(--navbox-above-background);
+}
-  --navbox-below-color: var(--navbox-above-color);
+.ranger-navbox .ranger-title a,
-  --navbox-below-padding: var(--navbox-above-padding);
+.ranger-navbox .ranger-title a.external,
-  --navbox-header-color: var(--navbox-title-color);
+.ranger-navbox .ranger-title a.external:visited {
-  --navbox-header-font-size: calc(110%);
+   color: var(--navbox-title-link-color);
-  --navbox-header-background: var(--navbox-title-background);
+}
-  --navbox-header-icon-color: var(--navbox-title-icon-color);
+.ranger-navbox .ranger-title a:visited{
-  --navbox-header-link-color: var(--navbox-title-link-color);
+   color: var(--navbox-title-link-color--visited);
-  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
+}
-  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
+.ranger-navbox .ranger-title a.new,
-  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
+.ranger-navbox .ranger-title a.new:visited{
-  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
+    color:var(--navbox-title-redlink-color);
-  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
-  --navbox-header-padding--y: 0.3em;
-  --navbox-subheader-font-size: calc(100%);
-  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
-  --navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
-  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
-   --navbox-list-color: var(--wiki-content-text-color);
-  --navbox-list-padding: 0.25em 0.5em;
-  /* --navbox-group-* also apply to .ranger-subgroup */
-  --navbox-group-text-align: left;
-  --navbox-group-text-align--mobile: left; /* only for mobile view */
-  --navbox-group-background: color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);
-   --navbox-group-color: var(--wiki-content-text-color);
-  --navbox-group-padding: var(--navbox-list-padding);
-  --navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 30%, transparent);
-  --navbox-tree-line-width: 2px;
-  --navbox-tree-indent: 1em;
-  --navbox-tree-line-indent: 0.5em;
-  --navbox-tree-line-spacing: var(--navbox-gap);
-  --icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-up' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 15l6 -6l6 6'%3E%3C/path%3E%3C/svg%3E");
-  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
-  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
-  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
 }
-.ranger-navbox.pill,
+.ranger-navbox .ranger-title a:hover,
-.ranger-navbox.pill-mobile{
+.ranger-navbox .ranger-title a:visited:hover,
-  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
+.ranger-navbox .ranger-title a.external:hover,
-  --navbox-pill-gap: 0.3em;
+.ranger-navbox .ranger-title a.external:visited:hover {
-  --navbox-pill-padding: 0.25em 0.75em;
+   color:var(--navbox-title-link-color--hover);
-  --navbox-pill-border-radius: 3px;
-  --navbox-pill-box-shadow: none;
-  --navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
-   --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
-  --navbox-pill-background--hover: var(--navbox-pill-background);
-  /* remove list cell background */
-  --navbox-list-background: none;
-  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
 }
-.ranger-navbox.no-underline-title-links{
+.ranger-navbox .ranger-header{
-   --navbox-title-link-color: var(--wiki-accent-link-color);
+  color: var(--navbox-header-color);
-   --navbox-title-link-decoration: none;
+   background: var(--navbox-header-background);
-   --navbox-title-redlink-decoration: none;
+  font-size: var(--navbox-header-font-size);
+   padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
+}
+.ranger-navbox .ranger-sublist .ranger-header{
+  font-size: var(--navbox-subheader-font-size);
+   padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
 }
-.ranger-navbox.noborder,
+.ranger-navbox .ranger-header a,
-.ranger-navbox.no-border{
+.ranger-navbox .ranger-header a:visited,
-  --navbox-padding: 0px;
+.ranger-navbox .ranger-header a:hover,
-  --navbox-outer-border-width: 0px;
+.ranger-navbox .ranger-header a.external,
+.ranger-navbox .ranger-header a.external:visited,
+.ranger-navbox .ranger-header a.external:hover {
+    text-decoration: var(--navbox-header-link-decoration);
 }
+.ranger-navbox .ranger-header a.new,
-/******************************
+.ranger-navbox .ranger-header a.new:visited {
-* Fallback for older browsers *
+    text-decoration: var(--navbox-header-redlink-decoration);
-*******************************/
-@supports not (color:color-mix(in srgb, #000, transparent)) {
-	.ranger-navbox {
-		--navbox-above-background: var(--wiki-content-background-color--secondary);
-		--navbox-list-background: transparent;
-		--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
-		--navbox-group-background: var(--wiki-content-background-color--secondary);
-		--navbox-tree-line-color：var(--wiki-content-background-color--secondary);
-	}
-	.ranger-navbox.pill,
-	.ranger-navbox.pill-mobile {
-	  --navbox-pill-background: var(--wiki-content-background-color--secondary);
-	  --navbox-list-background--striped: transparent;
-	}
 }
-/***************
+.ranger-navbox .ranger-header a,
-* End fallback *
+.ranger-navbox .ranger-header a.external,
-****************/
+.ranger-navbox .ranger-header a.external:visited {
+   color: var(--navbox-header-link-color);
-.ranger-navbox{
-  border-color: var(--navbox-outer-border-color);
-  border-style: var(--navbox-outer-border-style);
-  border-width: var(--navbox-outer-border-width);
-  border-radius: var(--navbox-outer-border-radius);
-   padding: var(--navbox-padding);
-  font-size: var(--navbox-font-size);
-  margin: var(--navbox-margin);
-  background: var(--navbox-background);
-  line-height: 1.5;
-  clear:both;
 }
+.ranger-navbox .ranger-header a:visited{
-.ranger-navbox * {
+   color: var(--navbox-header-link-color--visited);
-   border: 0;
 }
-.ranger-navbox .center *{
+.ranger-navbox .ranger-header a.new,
-  margin-left: unset;
+.ranger-navbox .ranger-header a.new:visited{
-  margin-right: unset;
+    color:var(--navbox-header-redlink-color);
 }
-.ranger-navbox,
+.ranger-navbox .ranger-header a:hover,
-.ranger-navbox .ranger-section,
+.ranger-navbox .ranger-header a:visited:hover,
-.ranger-navbox .ranger-listbox{
+.ranger-navbox .ranger-header a.external:hover,
-  display: flex;
+.ranger-navbox .ranger-header a.external:visited:hover {
-  flex-direction: column;
+   color:var(--navbox-header-link-color--hover);
-   gap: var(--navbox-gap);
 }
-.ranger-navbox .ranger-title,
+.ranger-navbox .ranger-meta{
-.ranger-navbox .ranger-header{
-  text-align: center;
-  min-height: 1.5em;
-  position: relative;
-  z-index: 0;
-  font-weight: bold;
-}
-.ranger-navbox .ranger-title{
-  color: var(--navbox-title-color);
-  background: var(--navbox-title-background);
    font-size: var(--navbox-title-font-size);
-   padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
+   position: absolute;
+  left: var(--navbox-icon-offset--x);
+  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
+  display: block;
 }
-.ranger-navbox .ranger-title a,
+.ranger-navbox .ranger-meta .nv{
-.ranger-navbox .ranger-title a:visited,
+  --mask: var(--icon-metalinks);
-.ranger-navbox .ranger-title a:hover,
+  display: block;
-.ranger-navbox .ranger-title a.external,
+  width: 0.84em; /* based on the icon graph */
-.ranger-navbox .ranger-title a.external:visited,
+  height: 0.84em;
-.ranger-navbox .ranger-title a.external:hover {
+  -webkit-mask: var(--mask);
-	text-decoration: var(--navbox-title-link-decoration);
+  mask: var(--mask);
-}
+  -webkit-mask-size: 100% 100%;
-.ranger-navbox .ranger-title a.new,
+  mask-size: 100% 100%;
-.ranger-navbox .ranger-title a.new:visited {
+  -webkit-mask-position: center center;
-	text-decoration: var(--navbox-title-redlink-decoration);
+  mask-position: center center;
+  background-color: var(--navbox-title-icon-color);
 }
-.ranger-navbox .ranger-title a,
+.ranger-navbox .ranger-meta .nv > a{
-.ranger-navbox .ranger-title a.external,
+  display: block;
-.ranger-navbox .ranger-title a.external:visited {
+  width: 100%;
-   color: var(--navbox-title-link-color);
+  height: 100%;
+   opacity: 0;
 }
-.ranger-navbox .ranger-title a:visited{
+.ranger-navbox .ranger-meta .nv > a > span{
-   color: var(--navbox-title-link-color--visited);
+  display: block;
+  width: 100%;
+  height: 100%;
+   overflow: hidden;
 }
-.ranger-navbox .ranger-title a.new,
+.ranger-navbox .ranger-meta:has(.mw-selflink){
-.ranger-navbox .ranger-title a.new:visited{
+     display: none;
-     color:var(--navbox-title-redlink-color);
 }
-.ranger-navbox .ranger-title a:hover,
+.ranger-navbox,
-.ranger-navbox .ranger-title a:visited:hover,
+.ranger-navbox .ranger-section{
-.ranger-navbox .ranger-title a.external:hover,
+   position: relative;
-.ranger-navbox .ranger-title a.external:visited:hover {
-   color:var(--navbox-title-link-color--hover);
 }
-.ranger-navbox .ranger-header{
+.ranger .mw-collapsible-toggle-placeholder{
-  color: var(--navbox-header-color);
+   display: none;
-  background: var(--navbox-header-background);
-  font-size: var(--navbox-header-font-size);
-   padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
 }
-.ranger-navbox .ranger-sublist .ranger-header{
+.ranger-navbox .ranger-title > .ranger-title-text,
-  font-size: var(--navbox-subheader-font-size);
+.ranger-navbox .ranger-header > .ranger-header-text{
-   padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
+   pointer-events: none;
 }
-.ranger-navbox .ranger-header a,
+.ranger-navbox .ranger-title > .ranger-title-text a,
-.ranger-navbox .ranger-header a:visited,
+.ranger-navbox .ranger-header > .ranger-header-text a{
-.ranger-navbox .ranger-header a:hover,
+  pointer-events: auto;
-.ranger-navbox .ranger-header a.external,
-.ranger-navbox .ranger-header a.external:visited,
-.ranger-navbox .ranger-header a.external:hover {
-	text-decoration: var(--navbox-header-link-decoration);
 }
-.ranger-navbox .ranger-header a.new,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle,
-.ranger-navbox .ranger-header a.new:visited {
+.ranger-navbox .ranger-header > .mw-collapsible-toggle{
-	text-decoration: var(--navbox-header-redlink-decoration);
+  --mask: var(--icon-chevron-down);
-}
+  position: absolute;
-.ranger-navbox .ranger-header a,
+  right: 0;
-.ranger-navbox .ranger-header a.external,
+  top: 0;
-.ranger-navbox .ranger-header a.external:visited {
+  z-index: -1;
-   color: var(--navbox-header-link-color);
+  display: block;
+  width: 100%;
+  height: 100%;
+   overflow:hidden;
 }
-.ranger-navbox .ranger-header a:visited{
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
-   color: var(--navbox-header-link-color--visited);
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+  width: 1.5em;
+  height: 1.5em;
+   right: var(--navbox-icon-offset--x);
 }
-.ranger-navbox .ranger-header a.new,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
-.ranger-navbox .ranger-header a.new:visited{
+  top: var(--navbox-title-padding--y);
-    color:var(--navbox-header-redlink-color);
 }
-.ranger-navbox .ranger-header a:hover,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
-.ranger-navbox .ranger-header a:visited:hover,
+   top: var(--navbox-header-padding--y);
-.ranger-navbox .ranger-header a.external:hover,
-.ranger-navbox .ranger-header a.external:visited:hover {
-   color:var(--navbox-header-link-color--hover);
 }
-.ranger-navbox .ranger-meta{
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
-  font-size: var(--navbox-title-font-size);
+   top: var(--navbox-subheader-padding--y);
-  position: absolute;
-  left: var(--navbox-icon-offset--x);
-   top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
-  display: block;
 }
-.ranger-navbox .ranger-meta .nv{
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
-  --mask: var(--icon-metalinks);
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+  content: "";
    display: block;
-   width: 0.84em; /* based on the icon graph */
+   width: 1.5em;
-   height: 0.84em;
+   height: 1.5em;
+  position: absolute;
+  right: var(--navbox-icon-offset--x);
    -webkit-mask: var(--mask);
    mask: var(--mask);
@@ Line 628: / Line 525: @@
    mask-position: center center;
    background-color: var(--navbox-title-icon-color);
+  transform: scaleY(-1);
 }
-.ranger-navbox .ranger-meta .nv > a{
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
-  display: block;
+   top: var(--navbox-title-padding--y);
-  width: 100%;
-  height: 100%;
-   opacity: 0;
 }
-.ranger-navbox .ranger-meta .nv > a > span{
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
-  display: block;
+   top: var(--navbox-header-padding--y);
-  width: 100%;
-  height: 100%;
-   overflow: hidden;
 }
-.ranger-navbox .ranger-meta:has(.mw-selflink){
+.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
-	display: none;
+  top: var(--navbox-subheader-padding--y);
 }
-.ranger-navbox,
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
-.ranger-navbox .ranger-section{
+.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
-   position: relative;
+  top: 0;
+  right: 0;
+}
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+  background-color: var(--navbox-header-icon-color);
+}
+.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
+   transform: none;
 }
-.ranger .mw-collapsible-toggle-placeholder{
+.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
+.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
+.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
    display: none;
 }
-.ranger-navbox .ranger-title > .ranger-title-text,
+.ranger-navbox .ranger-list{
-.ranger-navbox .ranger-header > .ranger-header-text{
+  width: unset;
-  pointer-events: none;
+  padding: var(--navbox-list-padding);
 }
-.ranger-navbox .ranger-title > .ranger-title-text a,
+.ranger-navbox .ranger-above{
-.ranger-navbox .ranger-header > .ranger-header-text a{
+  background: var(--navbox-above-background);
-   pointer-events: auto;
+  color: var(--navbox-above-color);
+  padding: var(--navbox-above-padding);
+   width: unset;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle,
+.ranger-navbox .ranger-below{
-.ranger-navbox .ranger-header > .mw-collapsible-toggle{
+  background: var(--navbox-below-background);
-   --mask: var(--icon-chevron-down);
+   color: var(--navbox-below-color);
-   position: absolute;
+   padding: var(--navbox-below-padding);
-  right: 0;
+   width: unset;
-  top: 0;
-  z-index: -1;
-  display: block;
-   width: 100%;
-  height: 100%;
-  overflow:hidden;
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
+.ranger-navbox .ranger-sublist{
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+   display: flex;
-   width: 1.5em;
+   flex-direction: column;
-   height: 1.5em;
+   gap: var(--navbox-gap);
-   right: var(--navbox-icon-offset--x);
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
+.ranger-navbox .ranger-section-body{
-   top: var(--navbox-title-padding--y);
+   display: grid;
+  gap: var(--navbox-gap);
+  grid-template-columns: auto minmax(0,1fr);
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
+/* gap fix for collapsed content */
-   top: var(--navbox-header-padding--y);
+.ranger-navbox [class^="ranger-"][hidden="until-found"]{
+   margin-top: calc(0px - var(--navbox-gap)) !important;
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
+.ranger-navbox .ranger-row{
-   top: var(--navbox-subheader-padding--y);
+   display: contents;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
+.ranger-navbox .ranger-group,
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox .ranger-subgroup{
-   content: "";
+   text-align: var(--navbox-group-text-align);
-  display: block;
+   white-space: nowrap;
-  width: 1.5em;
+  font-weight: bold;
-  height: 1.5em;
+   background: var(--navbox-group-background);
-  position: absolute;
+   color: var(--navbox-group-color);
-  right: var(--navbox-icon-offset--x);
+   padding: var(--navbox-group-padding);
-   -webkit-mask: var(--mask);
+   width: unset;
-   mask: var(--mask);
-  -webkit-mask-size: 100% 100%;
-   mask-size: 100% 100%;
-  -webkit-mask-position: center center;
-  mask-position: center center;
-   background-color: var(--navbox-title-icon-color);
-   transform: scaleY(-1);
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
+/* for desktop view */
-   top: var(--navbox-title-padding--y);
+.ranger-navbox.group-align-left .ranger-group,
+.ranger-navbox.group-align-left .ranger-subgroup{
+   --navbox-group-text-align: left;
 }
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox.group-align-center .ranger-group,
-   top: var(--navbox-header-padding--y);
+.ranger-navbox.group-align-center .ranger-subgroup{
+   --navbox-group-text-align: center;
 }
-.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox.group-align-right .ranger-group,
-   top: var(--navbox-subheader-padding--y);
+.ranger-navbox.group-align-right .ranger-subgroup{
+   --navbox-group-text-align: right;
 }
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
+/* for mobile view */
-.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
+.ranger-navbox.mobile-group-align-left .ranger-group,
-   top: 0;
+.ranger-navbox.mobile-group-align-left .ranger-subgroup{
-  right: 0;
+   --navbox-group-text-align--mobile: left;
 }
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
-   background-color: var(--navbox-header-icon-color);
+.ranger-navbox.mobile-group-align-center .ranger-group,
+.ranger-navbox.mobile-group-align-center .ranger-subgroup{
+   --navbox-group-text-align--mobile: center;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
-.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
+.ranger-navbox.mobile-group-align-right .ranger-group,
-   transform: none;
+.ranger-navbox.mobile-group-align-right .ranger-subgroup{
+   --navbox-group-text-align--mobile: right;
 }
-.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
-.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
+.ranger-navbox .ranger-listbox > .ranger-wrap{
-.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
+  background: var(--navbox-list-background);
-.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
+  color: var(--navbox-list-color);
-   display: none;
+   flex-grow: 1;
 }
-.ranger-navbox .ranger-list{
+.ranger-navbox .ranger-sublist{
-   width: unset;
+   flex-grow: var(--count);
-  padding: var(--navbox-list-padding);
 }
-.ranger-navbox .ranger-above{
+.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
-  background: var(--navbox-above-background);
+   grid-column-end: span 2;
-   color: var(--navbox-above-color);
-  padding: var(--navbox-above-padding);
-  width: unset;
 }
-.ranger-navbox .ranger-below{
+.ranger-navbox .ranger-group,
-  background: var(--navbox-below-background);
+.ranger-navbox .ranger-subgroup,
-   color: var(--navbox-below-color);
+.ranger-navbox .ranger-listbox > .ranger-wrap{
-   padding: var(--navbox-below-padding);
+   display: grid;
-   width: unset;
+   justify-items: stretch;
+   align-items: center;
 }
-.ranger-navbox .ranger-sublist{
+.ranger-navbox.striped-even .ranger-even,
-  display: flex;
+.ranger-navbox.striped-odd .ranger-odd{
-  flex-direction: column;
+   background: var(--navbox-list-background--striped);
-   gap: var(--navbox-gap);
 }
-.ranger-navbox .ranger-section-body{
+/* make links use full line height (larger click box)*/
-  display: grid;
+.ranger-navbox .hlist a{
-  gap: var(--navbox-gap);
+    display: inline-block;
-  grid-template-columns: auto minmax(0,1fr);
 }
-/* gap fix for collapsed content */
-.ranger-navbox [class^="ranger-"][hidden="until-found"]{
+.ranger-navbox .align-left,
-   margin-top: calc(0px - var(--navbox-gap)) !important;
+.ranger-navbox .alignleft{
+   text-align: left;
 }
-.ranger-navbox .ranger-row{
+.ranger-navbox .align-center,
-   display: contents;
+.ranger-navbox .aligncenter{
+   text-align: center;
 }
-.ranger-navbox .ranger-group,
+.ranger-navbox .align-right,
-.ranger-navbox .ranger-subgroup{
+.ranger-navbox .alignright{
-  text-align: var(--navbox-group-text-align);
+   text-align: right;
-  white-space: nowrap;
-  font-weight: bold;
-  background: var(--navbox-group-background);
-  color: var(--navbox-group-color);
-  padding: var(--navbox-group-padding);
-  width: unset;
-}
-/* for desktop view */
-.ranger-navbox.group-align-left .ranger-group,
-.ranger-navbox.group-align-left .ranger-subgroup{
-  --navbox-group-text-align: left;
-}
-.ranger-navbox.group-align-center .ranger-group,
-.ranger-navbox.group-align-center .ranger-subgroup{
-  --navbox-group-text-align: center;
-}
-.ranger-navbox.group-align-right .ranger-group,
-.ranger-navbox.group-align-right .ranger-subgroup{
-   --navbox-group-text-align: right;
-}
-/* for mobile view */
-.ranger-navbox.mobile-group-align-left .ranger-group,
-.ranger-navbox.mobile-group-align-left .ranger-subgroup{
-  --navbox-group-text-align--mobile: left;
 }
-.ranger-navbox.mobile-group-align-center .ranger-group,
+/* responsive */
-.ranger-navbox.mobile-group-align-center .ranger-subgroup{
+@media screen and (max-width: 720px) {
-  --navbox-group-text-align--mobile: center;
+  .ranger-navbox .ranger-section-body,
-}
+  .ranger-navbox .ranger-sublist {
+    display: flex;
-.ranger-navbox.mobile-group-align-right .ranger-group,
+    flex-flow: column;
-.ranger-navbox.mobile-group-align-right .ranger-subgroup{
+  }
-  --navbox-group-text-align--mobile: right;
+  .ranger-navbox .ranger-row{
-}
+    display: block;
+  }
-.ranger-navbox .ranger-listbox > .ranger-wrap{
+  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
-  background: var(--navbox-list-background);
+   .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
-   color: var(--navbox-list-color);
+    margin-top: var(--navbox-gap);
-  flex-grow: 1;
+  }
-}
+  .ranger-navbox .ranger-listbox.empty{
-.ranger-navbox .ranger-sublist{
+    display: none;
-  flex-grow: var(--count);
+  }
-}
+  .ranger-navbox .ranger-group,
-.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
+  .ranger-navbox .ranger-subgroup{
-  grid-column-end: span 2;
+    text-align: var(--navbox-group-text-align--mobile);
-}
+    white-space: normal;
-.ranger-navbox .ranger-group,
+   }
-.ranger-navbox .ranger-subgroup,
-.ranger-navbox .ranger-listbox > .ranger-wrap{
+  .ranger-navbox .ranger-sublist {
-  display: grid;
+    padding-left: var(--navbox-tree-indent);
-  justify-items: stretch;
+    margin-left: var(--navbox-tree-line-indent);
-   align-items: center;
+  }
-}
+  .ranger-navbox .ranger-subgroup,
-.ranger-navbox.striped-even .ranger-even,
+  .ranger-navbox .ranger-listbox {
-.ranger-navbox.striped-odd .ranger-odd{
+    position:relative;
-  background: var(--navbox-list-background--striped);
+  }
-}
+  .ranger-navbox .ranger-group br,
-/* make links use full line height (larger click box)*/
+  .ranger-navbox .ranger-subgroup br{
-.ranger-navbox .hlist a{
+    display: none;
-	display: inline-block;
+  }
-}
+  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
+    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
-.ranger-navbox .align-left,
+  }
-.ranger-navbox .alignleft{
+   .ranger-navbox .ranger-sublist .ranger-row > ::before{
-  text-align: left;
+     position: absolute;
-}
+     left: calc(0px - var(--navbox-tree-indent));
-.ranger-navbox .align-center,
+    top: 0;
-.ranger-navbox .aligncenter{
+    width: var(--navbox-tree-line-width);
-  text-align: center;
+    height: 100%;
-}
+    content: '';
-.ranger-navbox .align-right,
-.ranger-navbox .alignright{
-  text-align: right;
-}
-/* responsive */
-@media screen and (max-width: 720px) {
-  .ranger-navbox .ranger-section-body,
-   .ranger-navbox .ranger-sublist {
-     display: flex;
-     flex-flow: column;
-  }
-  .ranger-navbox .ranger-row{
      display: block;
+    background-color: var(--navbox-tree-line-color);
    }
-   .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
+   .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
-   .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
+   .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
-     margin-top: var(--navbox-gap);
+     height: calc(100% + var(--navbox-gap));
    }
-   .ranger-navbox .ranger-listbox.empty{
+   .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
      display: none;
    }
-   .ranger-navbox .ranger-group,
+   .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
-  .ranger-navbox .ranger-subgroup{
+     display: block;
-     text-align: var(--navbox-group-text-align--mobile);
+    height: calc(50% + var(--navbox-tree-line-width)/2);
-    white-space: normal;
    }
+   .ranger-navbox .ranger-subgroup::after,
-   .ranger-navbox .ranger-sublist {
+   .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
-     padding-left: var(--navbox-tree-indent);
+     position: absolute;
-     margin-left: var(--navbox-tree-line-indent);
+    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
+    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
+    height: var(--navbox-tree-line-width);
+    content: '';
+     background-color: var(--navbox-tree-line-color);
    }
-  .ranger-navbox .ranger-subgroup,
+   /* increase height for links */
-  .ranger-navbox .ranger-listbox {
+   .ranger-navbox .hlist{
-    position:relative;
+     line-height: 2;
-  }
-  .ranger-navbox .ranger-group br,
-  .ranger-navbox .ranger-subgroup br{
-    display: none;
-  }
-  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
-    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
-  }
-  .ranger-navbox .ranger-sublist .ranger-row > ::before{
-    position: absolute;
-    left: calc(0px - var(--navbox-tree-indent));
-    top: 0;
-    width: var(--navbox-tree-line-width);
-    height: 100%;
-    content: '';
-    display: block;
-    background-color: var(--navbox-tree-line-color);
-  }
-  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
-  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
-    height: calc(100% + var(--navbox-gap));
-  }
-  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
-    display: none;
-  }
-  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
-    display: block;
-    height: calc(50% + var(--navbox-tree-line-width)/2);
-  }
-  .ranger-navbox .ranger-subgroup::after,
-  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
-    position: absolute;
-    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
-    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
-    height: var(--navbox-tree-line-width);
-    content: '';
-    background-color: var(--navbox-tree-line-color);
-  }
-   /* increase height for links */
-   .ranger-navbox .hlist{
-     line-height: 2;
    }
 }
 /**** `.pill` class: the "pill" style  ****/
 /* remove middle dots betweem items */
 .ranger-navbox.pill .hlist dd:not(:last-child)::after,
 .ranger-navbox.pill .hlist li:not(:last-child)::after{
    display: none;
 }
 /* remove parentheses around nested lists*/
 .ranger-navbox.pill .hlist dd ol::before,
 .ranger-navbox.pill .hlist dd ul::before,
 .ranger-navbox.pill .hlist dd dl::before,
 .ranger-navbox.pill .hlist dt ol::before,
 .ranger-navbox.pill .hlist dt ul::before,
 .ranger-navbox.pill .hlist dt dl::before,
 .ranger-navbox.pill .hlist li ol::before,
 .ranger-navbox.pill .hlist li ul::before,
 .ranger-navbox.pill .hlist li dl::before,
 .ranger-navbox.pill .hlist dd ol::after,
 .ranger-navbox.pill .hlist dd ul::after,
 .ranger-navbox.pill .hlist dd dl::after,
 .ranger-navbox.pill .hlist dt ol::after,
 .ranger-navbox.pill .hlist dt ul::after,
 .ranger-navbox.pill .hlist dt dl::after,
 .ranger-navbox.pill .hlist li ol::after,
 .ranger-navbox.pill .hlist li ul::after,
 .ranger-navbox.pill .hlist li dl::after {
    display: none;
 }
 /* make lists inline-flex */
 .ranger-navbox.pill .hlist ul,
 .ranger-navbox.pill .hlist ol,
@@ Line 977: / Line 801: @@
 /**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
 @media screen and (max-width: 720px) {
-	/* remove middle dots betweem items */
+    /* remove middle dots betweem items */
-	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
+    .ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
-	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
+    .ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
-	  display: none;
+      display: none;
-	}
+    }
-	/* remove parentheses around nested lists*/
+    /* remove parentheses around nested lists*/
-	.ranger-navbox.pill-mobile .hlist dd ol::before,
+    .ranger-navbox.pill-mobile .hlist dd ol::before,
-	.ranger-navbox.pill-mobile .hlist dd ul::before,
+    .ranger-navbox.pill-mobile .hlist dd ul::before,
-	.ranger-navbox.pill-mobile .hlist dd dl::before,
+    .ranger-navbox.pill-mobile .hlist dd dl::before,
-	.ranger-navbox.pill-mobile .hlist dt ol::before,
+    .ranger-navbox.pill-mobile .hlist dt ol::before,
-	.ranger-navbox.pill-mobile .hlist dt ul::before,
+    .ranger-navbox.pill-mobile .hlist dt ul::before,
-	.ranger-navbox.pill-mobile .hlist dt dl::before,
+    .ranger-navbox.pill-mobile .hlist dt dl::before,
-	.ranger-navbox.pill-mobile .hlist li ol::before,
+    .ranger-navbox.pill-mobile .hlist li ol::before,
-	.ranger-navbox.pill-mobile .hlist li ul::before,
+    .ranger-navbox.pill-mobile .hlist li ul::before,
-	.ranger-navbox.pill-mobile .hlist li dl::before,
+    .ranger-navbox.pill-mobile .hlist li dl::before,
-	.ranger-navbox.pill-mobile .hlist dd ol::after,
+    .ranger-navbox.pill-mobile .hlist dd ol::after,
-	.ranger-navbox.pill-mobile .hlist dd ul::after,
+    .ranger-navbox.pill-mobile .hlist dd ul::after,
-	.ranger-navbox.pill-mobile .hlist dd dl::after,
+    .ranger-navbox.pill-mobile .hlist dd dl::after,
-	.ranger-navbox.pill-mobile .hlist dt ol::after,
+    .ranger-navbox.pill-mobile .hlist dt ol::after,
-	.ranger-navbox.pill-mobile .hlist dt ul::after,
+    .ranger-navbox.pill-mobile .hlist dt ul::after,
-	.ranger-navbox.pill-mobile .hlist dt dl::after,
+    .ranger-navbox.pill-mobile .hlist dt dl::after,
-	.ranger-navbox.pill-mobile .hlist li ol::after,
+    .ranger-navbox.pill-mobile .hlist li ol::after,
-	.ranger-navbox.pill-mobile .hlist li ul::after,
+    .ranger-navbox.pill-mobile .hlist li ul::after,
-	.ranger-navbox.pill-mobile .hlist li dl::after {
+    .ranger-navbox.pill-mobile .hlist li dl::after {
-	  display: none;
+      display: none;
-	}
+    }
-	/* make lists inline-flex */
+    /* make lists inline-flex */
-	.ranger-navbox.pill-mobile .hlist ul,
+    .ranger-navbox.pill-mobile .hlist ul,
-	.ranger-navbox.pill-mobile .hlist ol,
+    .ranger-navbox.pill-mobile .hlist ol,
-	.ranger-navbox.pill-mobile .hlist dl{
+    .ranger-navbox.pill-mobile .hlist dl{
-	  display: inline-flex;
+      display: inline-flex;
-	  gap: var(--navbox-pill-gap);
+      gap: var(--navbox-pill-gap);
-	  flex-wrap: wrap;
+      flex-wrap: wrap;
-	}
+    }
-	/* "pill" style for items */
+    .ranger-navbox.pill-mobile .hlist li,
-	.ranger-navbox.pill-mobile .hlist li,
+    .ranger-navbox.pill-mobile .hlist dt,
-	.ranger-navbox.pill-mobile .hlist dt,
+    .ranger-navbox.pill-mobile .hlist dd{
-	.ranger-navbox.pill-mobile .hlist dd{
+      padding: var(--navbox-pill-padding);
-	  /* 100% height */
+      border-radius: var(--navbox-pill-border-radius);
-	  display: flex;
+      box-shadow: var(--navbox-pill-box-shadow);
-	  align-items: center;
+      background: var(--navbox-pill-background);
-	  /* for nested lists */
+      display: flex;
-	  gap: var(--navbox-pill-gap);
+      align-items: center;
-	  flex-wrap: wrap;
+      gap: var(--navbox-pill-gap);
-	}
+      flex-wrap: wrap;
-	/* "pill" style for items */
+    }
-	.ranger-navbox.pill-mobile .hlist li,
+    /* Add a hover / focus feedback style */
-	.ranger-navbox.pill-mobile .hlist dt,
+    .ranger-navbox.pill-mobile .hlist dd:hover,
-	.ranger-navbox.pill-mobile .hlist dd{
+    .ranger-navbox.pill-mobile .hlist dd:focus,
-	  padding: var(--navbox-pill-padding);
+    .ranger-navbox.pill-mobile .hlist dt:hover,
-	  border-radius: var(--navbox-pill-border-radius);
+    .ranger-navbox.pill-mobile .hlist dt:focus,
-	  box-shadow: var(--navbox-pill-box-shadow);
+    .ranger-navbox.pill-mobile .hlist li:hover,
-	  background: var(--navbox-pill-background);
+    .ranger-navbox.pill-mobile .hlist li:focus {
-	  /* 100% height */
+      box-shadow: var(--navbox-pill-box-shadow--hover);
-	  display: flex;
+      background: var(--navbox-pill-background--hover);
-	  align-items: center;
+    }
-	  /* for nested lists */
-	  gap: var(--navbox-pill-gap);
-	  flex-wrap: wrap;
-	}
-	/* Add a hover / focus feedback style */
-	.ranger-navbox.pill-mobile .hlist dd:hover,
-	.ranger-navbox.pill-mobile .hlist dd:focus,
-	.ranger-navbox.pill-mobile .hlist dt:hover,
-	.ranger-navbox.pill-mobile .hlist dt:focus,
-	.ranger-navbox.pill-mobile .hlist li:hover,
-	.ranger-navbox.pill-mobile .hlist li:focus {
-	  box-shadow: var(--navbox-pill-box-shadow--hover);
-	  background: var(--navbox-pill-background--hover);
-	}
 }
 /*********************
@@ Line 1,067: / Line 877: @@
 /* Example Main Page 1 Grid Layout */
 #mp-layout1-container {
-	display:grid;
+    display:grid;
-	grid-template-areas:
+    grid-template-areas:
-		"welcome"
+        "welcome"
-		"about"
+        "about"
-		"featured"
+        "featured"
-		"basics"
+        "basics"
-		"gallery"
+        "gallery"
-		"links"
+        "links"
-		"contribute";
+        "contribute";
-	grid-template-columns:100%;
+    grid-template-columns:100%;
-	gap:10px;
+    gap:10px;
 }
 @media screen and (min-width:990px) {
-	#mp-layout1-container {
+    #mp-layout1-container {
-		grid-template-areas:
+        grid-template-areas:
-			"welcome welcome"
+            "welcome welcome"
-			"about about"
+            "about about"
-			"featured basics"
+            "featured basics"
-			"gallery links"
+            "gallery links"
-			"contribute contribute";
+            "contribute contribute";
-		grid-template-columns:1fr 1fr;
+        grid-template-columns:1fr 1fr;
-	}
+    }
 }
 @media screen and (min-width:1350px) {
-	#mp-layout1-container {
+    #mp-layout1-container {
-		grid-template-areas:
+        grid-template-areas:
-			"welcome welcome welcome"
+            "welcome welcome welcome"
-			"about about basics"
+            "about about basics"
-			"featured featured basics"
+            "featured featured basics"
-			"gallery links links"
+            "gallery links links"
-			"contribute contribute contribute";
+            "contribute contribute contribute";
-		grid-template-columns: 2fr 1fr 2fr;
+        grid-template-columns: 2fr 1fr 2fr;
    }
 }
@@ Line 1,106: / Line 916: @@
 /* Example Main Page 2 Grid Layout */
 #mp-layout2-container {
-	display:grid;
+    display:grid;
-	grid-template-areas:
+    grid-template-areas:
-		"welcome"
+        "welcome"
-		"links"
+        "links"
-		"about"
+        "about"
-		"gallery"
+        "gallery"
-		"iconlists"
+        "iconlists"
-		"contribute";
+        "contribute";
-	grid-template-columns:100%;
+    grid-template-columns:100%;
-	gap:10px;
+    gap:10px;
 }
 @media screen and (min-width:990px) {
-	#mp-layout2-container {
+    #mp-layout2-container {
-		grid-template-areas:
+        grid-template-areas:
-			"welcome links"
+            "welcome links"
-			"gallery about"
+            "gallery about"
-			"iconlists about"
+            "iconlists about"
-			"iconlists contribute";
+            "iconlists contribute";
-		grid-template-columns: 3fr 2fr;
+        grid-template-columns: 3fr 2fr;
-	}
+    }
 }
 @media screen and (min-width:1350px) {
-	#mp-layout2-container {
+    #mp-layout2-container {
-		grid-template-areas:
+        grid-template-areas:
-			"welcome welcome links"
+            "welcome welcome links"
-			"welcome welcome about"
+            "welcome welcome about"
-			"gallery gallery about"
+            "gallery gallery about"
-			"iconlists iconlists contribute";
+            "iconlists iconlists contribute";
-		grid-template-columns: 3fr 2fr 2fr;
+        grid-template-columns: 3fr 2fr 2fr;
    }
 }
@@ Line 1,142: / Line 952: @@
 /* Example Main Page 3 Grid Layout */
 #mp-layout3-container {
-	display:grid;
+    display:grid;
-	grid-template-areas:
+    grid-template-areas:
      "welcome"
      "about"
@@ Line 1,149: / Line 959: @@
      "four"
      "priority"
-		"projects"
+        "projects"
      "wiki";
-	grid-template-columns:100%;
+    grid-template-columns:100%;
-	gap:10px;
+    gap:10px;
 }
 @media screen and (min-width:990px) {
-	#mp-layout3-container {
+    #mp-layout3-container {
-		grid-template-areas:
+        grid-template-areas:
        "welcome welcome"
        "about about"
        "featured four"
-			"priority projects"
+            "priority projects"
        "wiki wiki";
-		grid-template-columns:1fr 1fr;
+        grid-template-columns:1fr 1fr;
-	}
+    }
 }
 @media screen and (min-width:1350px) {
-	#mp-layout3-container {
+    #mp-layout3-container {
-		grid-template-areas:
+        grid-template-areas:
        "welcome welcome welcome"
        "about about four"
-			"featured featured four"
+            "featured featured four"
-			"priority projects projects"
+            "priority projects projects"
-			"wiki wiki wiki";
+            "wiki wiki wiki";
-		grid-template-columns:2fr 1fr 2fr;
+        grid-template-columns:2fr 1fr 2fr;
    }
 }
 .mp-box {
-	display:flex;
+    display:flex;
-	flex-flow:column nowrap;
+    flex-flow:column nowrap;
-	width: calc(100% - 2px);
+    width: calc(100% - 2px);
-	box-sizing: border-box;
+    box-sizing: border-box;
-	background-color: var(--background-color-transparent);
+    background-color: var(--background-color-transparent);
-	padding:0;
+    padding:0;
      box-shadow: 0 0 40px 10px #000000;
      margin-top: 1em;
 }
-/* border-radius:5px;
-    border-image-source: var(--wiki-content-border-image);
-    border-image-slice: 15 16;
-    border-image-width: 15px;
-    border-image-repeat: stretch;
-    */
 .mp-body {
-	height: 100%;
+    height: 100%;
-	display: flex;
+    display: flex;
-	padding:0.5em;
+    padding:0.5em;
-	flex-flow: column nowrap;
+    flex-flow: column nowrap;
 }
 .mp-box.centered-content .mp-body {
-	height: 100%;
+    height: 100%;
-	display: flex;
+    display: flex;
-	flex-flow: column nowrap;
+    flex-flow: column nowrap;
-	justify-content: space-evenly;
+    justify-content: space-evenly;
 }
 .mp-box.has-floating-image {
-	display:block;
+    display:block;
 }
 .mp-box.has-floating-image .mp-body {
-	height:unset;
+    height:unset;
-	display:block;
+    display:block;
 }
 .mp-box h2 {
-	text-align:center;
+    text-align:center;
-	font-weight:bold;
+    font-weight:bold;
-	font-family: "Daedalus";
+    font-family: "Daedalus";
      overflow: initial;
-	font-size: 4em;
+    font-size: 4em;
-	margin: 0;
+    margin: 0;
      text-shadow: 0 0 20px #000000;
-	color:var(--wiki-content-border-color);
+    color:var(--content-border-color);
      background: radial-gradient(circle, var(--background-color-base), transparent);
      border-radius: 20%;
@@ Line 1,236: / Line 1,040: @@
      margin: 0;
      padding: 5px 0;
-	color: #fff;
+    color: #fff;
-	filter: drop-shadow(0px 2px 3px #000);
+    filter: drop-shadow(0px 2px 3px #000);
 }
 #mp-banner-container {
-	position: relative;
+    position: relative;
 }
 #mp-box-welcome {
-	text-align:center;
+    text-align:center;
-	position:relative;
+    position:relative;
-	overflow:hidden;
+    overflow:hidden;
 }
 #mp-welcome {
-	display:flex;
+    display:flex;
-	flex-flow:column nowrap;
+    flex-flow:column nowrap;
-	position: relative;
+    position: relative;
-	height: 100%;
+    height: 100%;
-	font-family: var(--wiki-heading-font-family);
+    font-family: var(--heading-font-family);
-	z-index: 2;
+    z-index: 2;
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 #mp-welcome .welcome-subtitle {
-	height: 100%;
+    height: 100%;
-	font-family: var(--wiki-body-font-family);
+    font-family: var(--body-font-family);
-	background:rgba(var(--wiki-body-background-color--rgb), 0.9);
+    background: color-mix(in srgb, var(--background-color-base) 90%, transparent);
-	margin-left: 4px;
+    margin-left: 4px;
-	margin-right: 4px;
+    margin-right: 4px;
-	margin-bottom: 4px;
+    margin-bottom: 4px;
 }
@@ Line 1,282: / Line 1,086: @@
 .view-dark #mp-banner {
-	filter: blur(5px) brightness(50%);
+    filter: blur(5px) brightness(50%);
 }
 .view-light #mp-banner {
-	filter: blur(5px) contrast(50%);
+    filter: blur(5px) contrast(50%);
 }
@@ Line 1,306: / Line 1,110: @@
 .mp-links > ul > li {
-	display:flex;
+    display:flex;
-	flex-flow:column nowrap;
+    flex-flow:column nowrap;
-	align-items:stretch;
+    align-items:stretch;
-	text-align: center;
+    text-align: center;
-	box-sizing:border-box;
+    box-sizing:border-box;
      padding-top: 0.5em;
      border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
@@ Line 1,339: / Line 1,143: @@
 }
-.mp-links > ul > li {
+.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
-}
-.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
 .mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
 .mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
@@ Line 1,350: / Line 1,150: @@
 .mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
 .mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
-.mp-links > ul > li:hover a {
-}
 .mp-links > ul > li > a {
-	display: flex;
+    display: flex;
-	align-items: center;
+    align-items: center;
-	justify-content: center;
+    justify-content: center;
-	height:100%;
+    height:100%;
-	flex:1 1 auto;
+    flex:1 1 auto;
-	box-sizing:border-box;
+    box-sizing:border-box;
-	padding:5px;
+    padding:5px;
 }
@@ Line 1,374: / Line 1,171: @@
 .mp-links.stretch,
 .mp-links.stretch > ul {
-	height:100%;
+    height:100%;
 }
 .mp-links.side-image li {
-	flex-flow:row nowrap;
+    flex-flow:row nowrap;
 }
 /* MP icon lists */
 .mp-iconlists {
-	display: flex;
+    display: flex;
      flex-flow: wrap;
      gap: 5px 20px;
@@ Line 1,389: / Line 1,186: @@
 .mp-iconlists > .mp-iconlist {
-	flex: 1;
+    flex: 1;
      min-width: fit-content;
 }
 .mp-iconlist {
-	font-size: 4em;
+    font-size: 4em;
 }
 .mp-iconlist > h3 {
-	padding: 0;
+    padding: 0;
-	margin: 0;
+    margin: 0;
 }
 .mp-iconlist > ul {
-	list-style: none;
+    list-style: none;
-	margin: 0;
+    margin: 0;
 }
@@ Line 1,418: / Line 1,215: @@
 .mp-box ul.gallery .gallerytext {
-	margin-top: 1em;
+    margin-top: 1em;
-	padding: 0;
+    padding: 0;
-     background-color: var(--wiki-content-background-color--secondary);
+     background-color: var(--background-color-neutral-subtle);
 }
 .mp-box .gallerybox:hover .gallerytext {
-     background-color: rgba(var(--wiki-content-link-color--rgb), 0.2);
+     background-color: color-mix(in srgb, var(--content-link-color) 20%, transparent);
 }
 .mp-box ul.gallery .gallerytext > p {
-	margin: 0;
+    margin: 0;
 }
 .mp-box ul.gallery .gallerytext a {
-	display: block;
+    display: block;
      padding: .5em 0;
 }
@@ Line 1,445: / Line 1,242: @@
 .druid-container {
-    /* These variables are designed to inherit from your wiki's color variables.
+     --druid-background-color: var(--background-color-base);
-       If your wiki uses a different naming scheme, change the inner names to match yours.
+     --druid-secondary-background-color: var(--color-progressive);
-       If your wiki doesn't use color variables you should consider doing so,
+     --druid-secondary-background-label-color: var(--content-link-label-color);
-       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
+     --druid-tertiary-background-color: var(--background-color-neutral-subtle);
-    */
+     --druid-border-color: var(--content-border-color);
-    --druid-background-color: var(--wiki-content-background-color, #ffffff);
+     --druid-link-color: var(--content-link-color);
-     --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
+     --druid-link-label-color: var(--content-link-label-color);
-     --druid-secondary-background-color: var(--wiki-accent-color, #36c);
-    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
-     --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
-    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
-    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
-     --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
-    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
-     --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
-     --druid-link-color: var(--wiki-content-link-color, #0645ad);
-    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
-     --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
-    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
 }
@@ Line 1,484: / Line 1,265: @@
      margin: 0 0 1em 1em;
      padding: 0.5em;
-	width:100%;
+    width:100%;
-	max-width:26em;
+    max-width:26em;
      box-sizing: border-box;
      border-collapse: separate;
@@ Line 1,524: / Line 1,305: @@
      font-weight:bold;
      text-align: right;
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
@@ Line 1,534: / Line 1,315: @@
 .druid-row > .druid-label,
 .druid-row > .druid-data {
-	padding-inline: 0.3em;
+    padding-inline: 0.3em;
 }
@@ Line 1,591: / Line 1,372: @@
      display:grid;
      gap: 0.3em;
-	padding: 0.35em;
+    padding: 0.35em;
 }
@@ Line 1,603: / Line 1,384: @@
 .druid-grid-item > .druid-label,
 .druid-grid-item > .druid-data {
-	text-align: center;
+    text-align: center;
 }
 .druid-section-container > .druid-collapsible {
-	display: flex;
+    display: flex;
-	justify-content: space-between;
+    justify-content: space-between;
-	align-items: center;
+    align-items: center;
 }
@@ Line 1,649: / Line 1,430: @@
 div.druid-row + div.druid-row {
-	margin-top: 0;
+    margin-top: 0;
-}
-div.druid-row > .druid-label {
 }
@@ Line 1,661: / Line 1,439: @@
 .druid-infobox .druid-title {
    font-weight: 700;
-   font-family: var(--wiki-heading-font-family);
+   font-family: var(--heading-font-family);
 }
@@ Line 1,675: / Line 1,452: @@
 /*** Miscellaneous ***/
 .responsive-image {
-	max-width:100%;
+    max-width:100%;
-	height:auto;
+    height:auto;
 }
@@ Line 1,685: / Line 1,462: @@
 @media screen and (min-width:720px) {
-	.mobileonly {
+    .mobileonly {
-		display:none;
+        display:none;
-	}
+    }
 }
 @media screen and (max-width:720px) {
-	.nomobile {
+    .nomobile {
-		display:none;
+        display:none;
-	}
+    }
 }
@@ Line 1,701: / Line 1,478: @@
 /********* [[Template:Ambox]] *********/
 .ambox {
-	border: 1px solid var(--wiki-content-border-color);
+    border: 1px solid var(--content-border-color);
-	border-left: 10px solid var(--ambox-color);
+    border-left: 10px solid var(--ambox-color);
-	border-radius: 2px;
+    border-radius: 2px;
-	display: flex;
+    display: flex;
-	align-items: center;
+    align-items: center;
-	gap: .6em;
+    gap: .6em;
-	margin: 1em 0;
+    margin: 1em 0;
-	padding: 3px .6em;
+    padding: 3px .6em;
-	background-color: var(--wiki-content-background-color--secondary);
+    background-color: var(--background-color-neutral-subtle);
-	box-shadow: 2px 2px 5px 0px #0002;
+    box-shadow: 2px 2px 5px 0px #0002;
 }
 @media (min-width: 720px) {
-	.ambox {
+    .ambox {
-		margin-inline: 10%;
+        margin-inline: 10%;
-	}
+    }
 }
 .ambox.tiny {
-	padding: .04rem .5em;
+    padding: .04rem .5em;
-	margin-inline: 0;
+    margin-inline: 0;
      width: fit-content;
 }
 .ambox + .ambox {
-	margin-top: -.6em;
+    margin-top: -.6em;
 }
 .ambox-content p {
-	margin: .15em 0;
+    margin: .15em 0;
 }
 .ambox-title {
-	font-weight: bold;
+    font-weight: bold;
 }
@@ Line 1,742: / Line 1,519: @@
      margin-bottom: 0.5em;
      font-style: italic;
-     border-top: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
+     border-top: 1px solid var(--border-color-subtle);
-     border-bottom: 1px solid var(--wiki-body-dynamic-color--secondary--inverted);
+     border-bottom: 1px solid var(--border-color-subtle);
 }
 .hatnote.icon {
-	padding-left: 0;
+    padding-left: 0;
 }
@@ Line 1,780: / Line 1,557: @@
 /********* [[Template:Link icon]] *********/
 .link-icon {
-	display: inline-flex;
+    display: inline-flex;
-	align-items: center;
+    align-items: center;
      height: var(--link-icon-line-height);
      vertical-align: bottom;
@@ Line 1,791: / Line 1,568: @@
 .link-icon .regular a {
-	display: flex;
+    display: flex;
 }
 .link-icon .regular img {
-	height: var(--link-icon-size);
+    height: var(--link-icon-size);
-	max-width: var(--link-icon-size);
+    max-width: var(--link-icon-size);
 }
 .link-icon .fallback {
-	outline: 1px solid var(--wiki-content-text-color);
+    outline: 1px solid var(--color-base);
-	border-radius: 50%;
+    border-radius: 50%;
-	text-align: center;
+    text-align: center;
-	width: var(--link-icon-size);
+    width: var(--link-icon-size);
-	line-height: var(--link-icon-size);
+    line-height: var(--link-icon-size);
 }
 .link-icon.notext .fallback {
-	display: inline-block;
+    display: inline-block;
 }
@@ Line 1,817: / Line 1,594: @@
 /********* [[Template:Quote]] *********/
 .quote {
-     background: var(--wiki-content-background-color--secondary);
+     background: var(--background-color-neutral-subtle);
      border-radius: 5px;
-     border: 2px solid var(--wiki-content-border-color);
+     border: 2px solid var(--content-border-color);
      margin: .5em 0;
      padding: .5em;
@@ Line 1,825: / Line 1,602: @@
 .quote .block {
-	display: block;
+    display: block;
 }
 .quote .title {
-	font-size: large;
+    font-size: large;
      font-weight: bold;
 }
 .quote .content {
-	font-style: italic;
+    font-style: italic;
 }
 .quote .author {
-	font-weight: bold;
+    font-weight: bold;
-	text-align: end;
+    text-align: end;
 }
 .quote .marks-wrapper {
-	display: flex;
+    display: flex;
-	gap: 5px;
+    gap: 5px;
 }
 .quote .marks-wrapper::before,
 .quote .marks-wrapper::after {
-	font-size: 100px;
+    font-size: 100px;
      line-height: 0px;
 }
 .quote .marks-wrapper::before {
-	content: "\201C";
+    content: "\201C";
-	margin-top: 40px;
+    margin-top: 40px;
 }
 .quote .marks-wrapper::after {
-	content: "\201D";
+    content: "\201D";
-	align-self: end;
+    align-self: end;
-	margin-bottom: -10px;
+    margin-bottom: -10px;
 }
@@ Line 1,867: / Line 1,644: @@
 * End Modular Templates *
 *************************/
-/* ===============================
-   Random Page Classes (Lots of legacy)
-   =============================== */
 .button-expand-header {
@@ Line 1,967: / Line 1,740: @@
 .tabber__panel > div > h2 > span {
      text-shadow: 0 0 10px black;
-     color: var(--wiki-content-link-color);
+     color: var(--content-link-color);
      margin-left: 0.1em;
      padding: 0 0.5em 0;
@@ Line 1,984: / Line 1,757: @@
      background-size: 1em;
 }
-/*mobile*/
 @media screen and (max-width: 720px) {
      .button-expand-header {
          background-color: #8dbec280;
-         box-shadow: 0 0 40px var(--wiki-accent-color);
+         box-shadow: 0 0 40px var(--color-progressive);
      }
      .button-expand-header > span:after {
@@ Line 2,010: / Line 1,782: @@
 .class-box {
-	box-shadow: 0 0 20px #000000;
+    box-shadow: 0 0 20px #000000;
      padding: 0 0.5em 0;
 }
@@ Line 2,020: / Line 1,792: @@
 .main-page-links {
-	font-weight: bold;
+    font-weight: bold;
-	text-shadow: 0 0 6px #000000;
+    text-shadow: 0 0 6px #000000;
      margin: 1em;
 }
 .mp-box pre {
-	font-family: var(--wiki-body-font-family);
+    font-family: var(--body-font-family);
-	color: var(--wiki-accent-color);
+    color: var(--color-progressive);
-	border-radius:5px;
+    border-radius:5px;
-	border-image-source: url("/wiki/Special:Redirect/file/Wiki-border-kurva.png");
+    border-image-source: var(--border-image-base);
-	border-image-slice: 6;
+    border-image-slice: 6;
      border-image-width: 6px;
      border-image-repeat: repeat repeat;
-	text-align: center;
+    text-align: center;
 }
@@ Line 2,042: / Line 1,814: @@
 /* UNHOLY */
 .druid-data-Unholy a, .druid-data-Unholy a:visited {
-	color: black;
+    color: black;
-	text-shadow:
+    text-shadow:
 0 5px white, 0 0 10px white, 0 0 15px white;
 }
 /* VOIDBOUND */
 .druid-data-Voidbound a, .druid-data-Voidbound a:visited {
-	color: #e48cff;
+    color: #e48cff;
-	text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
+    text-shadow: 0 0 4px #e48cff, 0 0 8px #b94dff, 0 0 12px #7a1d9a;
 }
 /* BLOODSHOT */
 .druid-data-Bloodshot a, .druid-data-Bloodshot a:visited {
-	color: #d23c3c;
+    color: #d23c3c;
-	text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
+    text-shadow: 0 0 4px #d23c3c, 0 0 8px #8b0000, 0 0 12px #ff4d4d;
 }
 /* ROYAL */
 .druid-data-Royal a, .druid-data-Royal a:visited {
-	color: #a86dff;
+    color: #a86dff;
-	text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
+    text-shadow: 0 0 4px #a86dff, 0 0 8px #6a00ff, 0 0 12px #330066;
 }
 /* GILDED */
 .druid-data-Gilded a, .druid-data-Gilded a:visited {
-	color: #ffb84d;
+    color: #ffb84d;
-	text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
+    text-shadow: 0 0 4px #ffb84d, 0 0 8px #ff8000, 0 0 12px #cc6600;
 }
 /* IRRADIATED */
 .druid-data-Irradiated a, .druid-data-Irradiated a:visited {
-	color: #4dff4d;
+    color: #4dff4d;
-	text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
+    text-shadow: 0 0 4px #4dff4d, 0 0 8px #00cc00, 0 0 12px #006600;
 }
 /* COMPANION */
 .druid-data-Companion a, .druid-data-Companion a:visited {
-	color: #ffd700;
+    color: #ffd700;
-	text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
+    text-shadow: 0 0 4px #ffd700, 0 0 8px #ffaa00, 0 0 12px #cc8400;
 }
 /* RUNES */
 .druid-data-Rune a, .druid-data-Rune a:visited {
-	color: #bfbfbf;
+    color: #bfbfbf;
-	text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
+    text-shadow: 0 0 4px #bfbfbf, 0 0 8px #666, 0 0 12px #333;
 }
 .druid-row[data-druid-section-row="Loot"] div {
-     border-top: 1px solid var(--wiki-content-border-color);
+     border-top: 1px solid var(--content-border-color);
      padding-top: 0.75em;
      padding-bottom: 0.5em;
@@ Line 2,096: / Line 1,868: @@
 div[data-druid-section="Loot"] + div[data-druid-section-row="Loot"] div {
-	border-top: none;
+    border-top: none;
 }
 .druid-data .image {
-	margin-left: 0%;
+    margin-left: 0%;
 }
 .boss-percent {
-	float: right;
+    float: right;
-	color: var(--wiki-content-border-color);
+    color: var(--content-border-color);
-	text-shadow: 0 0 2px var(--wiki-body-background-color), 0 0 6px var(--wiki-body-background-color), 0 0 10px var(--wiki-body-background-color);
+    text-shadow: 0 0 2px var(--background-color-base), 0 0 6px var(--background-color-base), 0 0 10px var(--background-color-base);
 }
 .loot-data-infobox {
-	float: left;
+    float: left;
-	display: contents;
+    display: contents;
      align-items: center;
 }
@@ Line 2,121: / Line 1,893: @@
 .druid-infobox .druid-title {
-	display: flex;
+    display: flex;
      align-items: center;
      justify-content: center;
-     color: var(--wiki-content-border-color);
+     color: var(--content-border-color);
      font-family: "Daedalus", sans-serif;
      line-height: 1em;
@@ Line 2,148: / Line 1,920: @@
 .dungeon-page-box {
-	background-color: transparent;
+    background-color: transparent;
      box-shadow: none;
      transition: 0.5s;
@@ Line 2,158: / Line 1,930: @@
 .dungeon-page-smaller-box li {
-	display: inline-block;
+    display: inline-block;
-	width: 18%;
+    width: 18%;
-	margin: 0 1% 1% 0;
+    margin: 0 1% 1% 0;
-	vertical-align: top;
+    vertical-align: top;
-	text-align: center;
+    text-align: center;
-	vertical-align: middle;
+    vertical-align: middle;
 }
 .dungeon-page-smaller-box a {
-	display: flex;
+    display: flex;
-	flex-direction: column;
+    flex-direction: column;
-	align-items: center;
+    align-items: center;
-	text-align: center;
+    text-align: center;
-	vertical-align: middle;
+    vertical-align: middle;
 }
@@ Line 2,179: / Line 1,951: @@
 .pre-dungeon {
-	width: 50%;
+    width: 50%;
 }
 .dungeon-enemies {
-	display: flex;
+    display: flex;
      flex-wrap: wrap;
-	width: 90%;
+    width: 90%;
      justify-content: center;
 }
 .dungeon-enemies .druid-container {
-	margin: 2%;
+    margin: 2%;
 }
 .tipstricks {
-	display: block flex;
+    display: block flex;
-	width: 75%;
+    width: 75%;
 }
@@ Line 2,206: / Line 1,978: @@
 .pre-dungeon p {
-	margin: 2% 0;
+    margin: 2% 0;
-	border-radius: 2px 20px 10px 20px;
+    border-radius: 2px 20px 10px 20px;
      padding-bottom: 1%;
      box-shadow: 0.3em 0.3em 20px #000000;
-	display: block;
+    display: block;
-	width: auto;
+    width: auto;
-	padding: 1em;
+    padding: 1em;
      background: linear-gradient(to right, var(--background-color-base), transparent);
 }
@@ Line 2,242: / Line 2,014: @@
 .dlog p {
-	position: relative;
+    position: relative;
      color: #f1f1f1;
      font-family: "Daedalus", Sans-Serif;
@@ Line 2,355: / Line 2,127: @@
 /* Rows */
 .skill-tree .row {
+    display: flex;
+    justify-content: center;
+}
+.skill-tree .row-1 { gap: 0; }
+.skill-tree .row-2 { gap: 40px; }
+.skill-tree .row-3 { gap: 20px; }
+.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */
+/* Nodes */
+.node {
+    display: inline-block;
+    width: 80px; /* keeps nodes aligned */
+    text-align: center;
+}
+/* Node Title Style */
+.skill-title {
+  font-weight: bold;
+  color: #fca801;
+  text-shadow: 2px 2px 8px black;
+  border-bottom: 1px solid #fca801;
+  padding-bottom: 0.5em;
+}
+.main-tooltip p {
+    color: #54fc55;
+}
+.main-tooltip span {
+    color: #54fcfc;
+    text-shadow: 0 0 2px #54fcfc;
+}
+/* item pages */
+.display-items {
      display: flex;
-    justify-content: center;
-}
-.skill-tree .row-1 { gap: 0; }
-.skill-tree .row-2 { gap: 40px; }
-.skill-tree .row-3 { gap: 20px; }
-.skill-tree .wide-gap { gap: 80px; } /* For Trap tree rows */
-/* Nodes */
-.node {
-    display: inline-block;
-    width: 80px; /* keeps nodes aligned */
-    text-align: center;
-}
-/* Node Title Style */
-.skill-title {
-  font-weight: bold;
-  color: #fca801;
-  text-shadow: 2px 2px 8px black;
-  border-bottom: 1px solid #fca801;
-  padding-bottom: 0.5em;
-}
-.main-tooltip p {
-	color: #54fc55;
-}
-.main-tooltip span {
-	color: #54fcfc;
-    text-shadow: 0 0 2px #54fcfc;
-}
-/* item pages */
-.display-items {
-	display: flex;
      flex-wrap: wrap;
 }
@@ Line 2,612: / Line 2,384: @@
      font-size: 2em;
      font-weight: bold;
-     font-family: var(--wiki-heading-font-family);
+     font-family: var(--heading-font-family);
      color: var(--color-progressive);
      margin: 0;
@@ Line 2,681: / Line 2,453: @@
 .gif-caption {
      text-align: center;
-     color: var(--wiki-content-text-color);
+     color: var(--color-base);
      font-size: 1em;
      font-style: italic;
@@ Line 2,687: / Line 2,459: @@
      background: var(--color-progressive--hover);
      border-radius: 4px;
-     text-shadow: 0 0 5px var(--wiki-content-border-color);
+     text-shadow: 0 0 5px var(--content-border-color);
      display: none;
 }
@@ Line 2,734: / Line 2,506: @@
      border-image-outset: 0px 0px 0px 0px;
      border-style: solid;
-     color: var(--wiki-body-background-color);
+     color: var(--background-color-base);
      width: 492px;
      height: 262px;
@@ Line 2,741: / Line 2,513: @@
 .decor-page > p{
      padding: 3.5em;
-     font-family: var(--wiki-heading-font-family);
+     font-family: var(--heading-font-family);
 }
 .swap-silverling {
@@ Line 2,788: / Line 2,560: @@
      border: 2px solid var(--color-progressive);
      cursor: pointer;
-     font-family: var(--wiki-body-font-family);
+     font-family: var(--body-font-family);
      font-size: 16px;
      font-weight: 700;
@@ Line 2,840: / Line 2,612: @@
      font-size: 1.5em;
      font-weight: bold;
-     font-family: var(--wiki-heading-font-family);
+     font-family: var(--heading-font-family);
      color: var(--color-progressive);
      margin: 0;
@@ Line 2,874: / Line 2,646: @@
      color: var(--color-progressive--hover);
      border: 1px solid var(--color-progressive);
-     font-family: var(--wiki-body-font-family);
+     font-family: var(--body-font-family);
      padding: 8px 16px;
      border-radius: 4px;
@@ Line 2,965: / Line 2,737: @@
 .tab-gif-display-area .gif-caption {
      text-align: center;
-     color: var(--wiki-content-text-color);
+     color: var(--color-base);
      font-size: 1em;
      font-style: italic;
@@ Line 2,971: / Line 2,743: @@
      background: var(--color-progressive--hover);
      border-radius: 4px;
-     text-shadow: 0 0 5px var(--wiki-content-border-color);
+     text-shadow: 0 0 5px var(--content-border-color);
      margin-top: 5px;
 }