/* Sister Melvera's Dream of the Stars Theme */
/* 2022 Wikidot Theme */
/* By Mercuresphere, Based off The Flowing Night Sky Theme by wallowing and Neo Liminal Theme by Dr Hormress */
/* Header Image: https://pixabay.com/illustrations/banner-header-sky-night-stars-1557834/ */
/* CC BY-SA 3.0 */
@import url("https://fastly.jsdelivr.net/gh/Crimone/wanderers-dustjacket-fonts@4.3.8/typefaces.css"); 
@import url("https://fastly.jsdelivr.net/gh/Crimone/wanderers-dustjacket-fonts@4.3.8/fonts.css"); 
@import url("https://fastly.jsdelivr.net/gh/Crimone/typefaces@main/whz/whz.css"); 

/* ----BEGIN---- */

:root, :root:lang(cn) {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* must be either "nuscp" or "sigma9" */
    --theme-id: "dream-of-the-stars";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Sister Melvera's Dream of the Stars Theme";
    /* set this to your theme's full name */
    /* ===STANDARD THEME COLORS=== */
    --white-monochrome: 252, 252, 252;
    --pale-gray-monochrome: 233, 240, 255;
    --light-pale-gray-monochrome: 251, 242, 255;
    --very-light-gray-monochrome: 220, 222, 230;
    --light-gray-monochrome: 91, 97, 138;
    --gray-monochrome: 43, 14, 116;
    --dark-gray-monochrome: 41, 26, 91;
    --bright-accent: 255, 219, 90;
    --medium-accent: 228, 180, 28;
    --dark-accent: 41, 26, 91;
    --alt-accent: 153, 0, 255;
    --light-alt-accent: 117,89,136;
    --gradient-header: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/flowing.jpg");
    --header-background-image-size: cover;
    --link-color: 48, 0, 171;
    --visited-link-color: 48, 0, 171;
    --hover-link-color: 205, 0, 189;
    --body-width-on-desktop: 61.250rem;
    
    --swatch-menutxt-light-color: var(--bright-accent);
    --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
    --rating-module-text-color: var(--bright-accent);
    --hoverblock-header-bg: var(--swatch-primary);
    --hoverblock-header-txt: var(--dark-accent);
    --modal-bg: var(--white-monochrome);
    --pager-selected-link: var(--dark-accent);
    
    --toggle-icon-color: rgb(var(--swatch-menutxt-light-color));
    --toggle-button-bg: rgb(var(--dark-gray-monochrome));
    --toggle-border-color: rgb(var(--medium-accent));
    scrollbar-color: rgb(var(--medium-accent)) rgb(var(--dark-gray-monochrome));
    
    --user-account-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/user-circle.svg");
    --search-top-box-mask: url("https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/search-top-box-mask.svg");
}

:root:lang(cn) {
    --body-font: Texturina, Optima, Segoe, Segoe UI, Candara, Calibri, Arial, 'Noto Sans SC', sans-serif;
    --header-font: zuijinregular,'HanWang WeiBeiMedium-Gb5', 'Ma Shan Zheng', '华文隶书', 'lisu', 'Noto Serif SC', Big Caslon, Book Antiqua, Palatino Linotype, Georgia, serif;
    --title-font: "EB Garamond", 'HanWang WeiBeiMedium-Gb5', 'Ma Shan Zheng', '华文隶书', 'lisu', 'Noto Serif SC', Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif;
    --UI-font: "EB Garamond", Big Caslon, Book Antiqua, Palatino Linotype, 'Noto Serif SC', Georgia, serif;
    --mono-font: Recursive, Consolas, monaco, '仿宋', 'Noto Serif SC', monospace;
}

#main-content {
    --blockquote-bg-color: var(--very-light-gray-monochrome);
    --toc-body-bg-color: var(--pale-gray-monochrome);
}

#skrollr-body {
    background: none;
}

/* ===header=== */
#header h1 a::after {
    background: url(https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: cover;
    -webkit-text-fill-color: transparent;
}

#header h2 span::after {
    background: url(https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: cover;
    -webkit-text-fill-color: transparent;
}

#header h1 a::before {
    -webkit-text-stroke: 4px rgb(var(--dark-accent));
}

#header h2 span::before {
    -webkit-text-stroke: 3px rgb(var(--dark-accent));
}

div#extra-div-1 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-on-desktop);
}

div#extra-div-1 {
    z-index: -2;
    background: linear-gradient(to bottom, rgba(30, 55, 30, 1) 0%, rgba(30, 55, 30, 1) 30%, rgba(255, 219, 90, 1) 100%);
    background: var(--gradient-header);
    background-repeat: repeat;
    background-size: var(--header-background-image-size);
    background-position: center;
}

/* ===yui-tabs=== */
#main-content {
    --tabs-bg: var(--swatch-secondary-color);
    --tabs-txt: var(--swatch-text-tertiary-color);
    --tabs-hover-bg: var(--gray-monochrome);
    --tabs-hover-txt: var(--swatch-text-secondary-color);
    --tabs-selected-bg: var(--dark-gray-monochrome);
    --tabs-selected-txt: var(--swatch-text-secondary-color);
    --tabs-selected-outline: var(--dark-gray-monochrome);
    --tabs-bottom-border-color: var(--gray-monochrome);
    --tabs-content-bg-color: var(--swatch-secondary-color), 0.25;
    --tabs-content-border-color: var(--swatch-tertiary-color);
}

.yui-navset .yui-nav .selected {
    background-color: rgb(var(--dark-gray-monochrome));
}

/* Rating Module */
#page-content .rate-box-with-credit-button, .page-rate-widget-box {
    box-shadow: none;
}

.page-rate-widget-box {
    background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%);
    background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%);
    letter-spacing: 0.05em;
}

.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    font-family: var(--body-font);
    line-height: 2ch;
    --wght: 500;
}

/* Rating Module With Credit Button */
.rate-box-with-credit-button .page-rate-widget-box {
    background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%);
    background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%);
    letter-spacing: 0.05em;
}

.rate-box-with-credit-button .creditButton {
    background: linear-gradient(to top, rgba(30, 55, 30, 1) 0, rgba(130, 160, 135, 1) 100%);
    background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%);
    letter-spacing: 0.05em;
}

.rate-box-with-credit-button>.creditButton>p>a {
    display: flex;
    margin-left: 0;
    border-left: none;
    background: linear-gradient(to top, rgba(var(--swatch-menubg-dark-color), 1) 0, rgba(var(--swatch-menubg-medium-color), 1) 100%);
}

#page-content .rate-box-with-credit-button>.creditButton>p>a:after {
    background-color: rgba(var(--rating-module-text-color), 50%);
}

.rate-box-with-credit-button .page-rate-widget-box .rate-points, .rate-box-with-credit-button .page-rate-widget-box .rateup, .rate-box-with-credit-button .page-rate-widget-box .ratedown, .rate-box-with-credit-button .page-rate-widget-box .cancel, .rate-box-with-credit-button .page-rate-widget-box .rateup a, .rate-box-with-credit-button .page-rate-widget-box .ratedown a, .rate-box-with-credit-button .page-rate-widget-box .cancel a {
    font-family: var(--body-font);
    line-height: 2ch;
    --wght: 500;
}

/* ===compatibility patch=== */
div.earthworm div.inner, div.earthworm div.inner > div {
    display: contents;
}

/* ===hr and border=== */
hr {
    height: .125rem;
    border: 0;
    border-top: 0.0625rem solid transparent;
    background: url(https://wanderers-library.wikidot.com/local--files/component:dustjacket-theme/goldfoil.png);
    background-color: rgba(255, 219, 90);
    background-color: rgba(var(--bright-accent));
    background-size: cover;
}

hr:not(.fancyhr hr), #page-title::before, .meta-title::before, #page-title::after, .meta-title::after {
    filter: hue-rotate(207deg) saturate(109.23%) brightness(16%);
}

.fancyhr hr {
    box-sizing: border-box;
    height: 0;
    border-top: 2vw solid transparent;
    background: none;
    background-color: rgba(255, 219, 90, 0);
    background-color: rgba(var(--bright-accent), 0);
    border-image-source: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/wl_hr.png");
    border-image-repeat: round;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
}

.fancyborder {
    box-sizing: border-box;
    padding: 2vw;
    border: 2vw solid rgba(0, 0, 0, 0.5);
    border-image: url("https://evernight-aquarium.wdfiles.com/local--files/tale%3Aextracts/wl_border.png") 600 round;
    border-image-width: 6;
}

blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
    border: 0.1875rem outset rgb(131, 124, 156);
}

/* ===link hover=== */
div.page-watch-options a, div.page-watch-options a:visited {
    --hover-link-color: var(--hover-link-color);
}

#footer {
    --footer-link-hover-color: var(--dark-gray-monochrome);
}

#license-area {
    --license-link-hover-color: var(--dark-gray-monochrome);
}

div#extra-div-1 {
    background-position: center;
}

#breadcrumbs a:before, #breadcrumbs a:visited:before, .pseudocrumbs a:before, .pseudocrumbs a:visited:before {
    box-shadow: .0625rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1),.25rem .0625rem 0 0 rgba(255,255,255,.85),.25rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1),.3125rem .0625rem 0 0 rgba(var(--dark-gray-monochrome),1);
}

#breadcrumbs a:active:before, #breadcrumbs a:hover:before, .pseudocrumbs a:active:before, .pseudocrumbs a:hover:before {
    background-color: rgb(var(--gray-monochrome));
    box-shadow: 0 0 0 .25rem rgba(var(--gray-monochrome),1),0 0 0 0 rgba(var(--background-gradient-color),0),0 0 0 0 rgba(var(--swatch-background),0),0 0 0 0 rgba(var(--gray-monochrome),0)
}

#breadcrumbs a:focus-within:before,.pseudocrumbs a:focus-within:before {
    background-color: rgb(var(--gray-monochrome));
    box-shadow: 0 0 0 .25rem rgba(var(--gray-monochrome),1),0 0 0 0 rgba(var(--background-gradient-color),0),0 0 0 0 rgba(var(--swatch-background),0),0 0 0 0 rgba(var(--gray-monochrome),0)
}

#breadcrumbs,.pseudocrumbs {
    --swatch-text-secondary-color: var(--bright-accent);
}

#page-content .rate-box-with-credit-button > .creditButton > p > a:after {
    background-color: rgba(var(--light-alt-accent), 0.75);
}

div.page-watch-options a:active, div.page-watch-options a:hover {
    color: rgb(var(--dark-gray-monochrome));
}

/* ===用户和搜索栏=== */

@media only screen and (max-width: 56.25rem) {
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        background-color: rgba(0, 0, 0, 0);
    }
}

@media (min-width: 36rem) {
    #login-status {
        flex-grow: unset;
        left: unset;
        right: unset;
    }

    #login-status:not(:hover):not(:focus-within) {
        visibility: hidden;
    }

    #login-status::before {
        visibility: visible;
    }
}

#search-top-box {
    display: flex;
    z-index: 12;
    position: absolute;
    top: 1.5em;
    right: calc(3% - .25em);
    align-items: center;
    justify-content: center;
    width: auto;
    height: calc(0.9375rem * 1.8);
    transform: translateY(-50%);
    font-size: calc(0.9375rem * .86667);
}

#search-top-box, #search-top-box * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1), max-width .6s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}

#search-top-box:focus-within, #search-top-box:focus-within *, #search-top-box:focus-within :after, #search-top-box:focus-within :before {
    margin: 0;
    padding: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), font-variation-settings .2s cubic-bezier(.4, 0, .2, 1), font-weight .2s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), right .2s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), max-width .3s cubic-bezier(.4, 0, .2, 1);
    will-change: box-shadow, font-variation-settings, font-weight, background-color, color, right, width, padding, max-width;
}

#search-top-box:focus-within {
    background: rgba(var(--dark-gray-monochrome), .7);
    box-shadow: calc(calc(0.9375rem * 1.8) / 2 * -1) 0 calc(calc(0.9375rem * 1.8) / 2) rgba(var(--dark-gray-monochrome));
}

#search-top-box:after, #search-top-box:before {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: 100%;
    content: " ";
}

#search-top-box:before {
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-image: var(--search-top-box-mask);
    ; z-index: 14;
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-gray-monochrome));
    text-align: center;
    cursor: pointer;
    mask-image: var(--search-top-box-mask);
    ; mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) / 2) calc(calc(0.9375rem * 1.8) / 2);
    pointer-events: none;
}

#search-top-box:not(:focus-within):hover:before {
    background-color: rgb(var(--bright-accent));
}

#search-top-box:after {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: 13;
    clip-path: var(--clip-path);
    pointer-events: none;
    background-color: transparent;
}

#search-top-box:not(:focus-within):after {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    background-color: rgb(var(--bright-accent), 0);
}

#search-top-box form[id=search-top-box-form] {
    display: flex;
    visibility: visible;
    position: relative;
    right: 0;
    max-width: 100%;
    height: calc(0.9375rem * 1.8);
}

#search-top-box form[id=search-top-box-form]:not(:focus-within) {
    max-width: calc(0.9375rem * 15);
}

#search-top-box form[id=search-top-box-form] input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
}

#search-top-box form[id=search-top-box-form] input[type=text] {
    z-index: 13;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 15);
    max-width: calc(0.9375rem * 15);
    height: 100%;
    padding: 0 calc(0.9375rem * 1.8) 0 1em;
    outline: 0 solid rgb(var(--bright-accent));
    background-color: rgb(var(--dark-gray-monochrome), .7);
    box-shadow: 0 0 0 .125rem rgb(var(--bright-accent));
    color: rgba(var(--bright-accent));
}

#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    max-width: calc(0.9375rem * 1.8);
    padding: 0;
    outline-width: 0;
    background-color: rgba(var(--dark-gray-monochrome), 0);
    box-shadow: 0 0 0 0 rgb(var(--bright-accent));
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text]:hover {
    background-color: rgba(var(--dark-gray-monochrome), 1);
}

#search-top-box form[id=search-top-box-form] input[type=submit] {
    visibility: visible;
    z-index: 14;
    position: absolute;
    right: 0;
    width: calc(0.9375rem * 1.8);
    height: calc(0.9375rem * 1.8);
    outline: 0 solid rgb(var(--bright-accent));
    background-color: transparent;
    box-shadow: 0 0 0 .125rem rgb(var(--bright-accent));
    color: t;
    font-size: calc(0.9375rem * .86667);
    cursor: pointer;
    pointer-events: all;
}

#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=submit] {
    box-shadow: 0 0 0 0 rgb(var(--bright-accent));
    pointer-events: none;
}

#login-status {
    --wght: var(--ui-wght);
    display: flex;
    z-index: 11;
    position: absolute;
    top: 1.5em;
    right: calc(3% + calc(0.9375rem * 1.8) - .25em);
    align-items: center;
    justify-content: center;
    height: 2em;
    margin: 0 0 0 .5em;
    transform: translateY(-50%);
    color: rgb(var(--bright-accent));
    font-weight: var(--wght);
    font-size: 1em;
    font-family: var(--UI-font);
    white-space: nowrap;
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}

#search-top-box:focus-within ~ #login-status {
    opacity: 0;
}

#login-status span.printuser a:first-of-type {
    width: 1.75em;
}

#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in {
    margin: 0 1em;
    background-color: rgb(var(--pale-gray-monochrome));
    color: rgb(var(--dark-gray-monochrome));
    padding: 0.1em 1em;
    text-decoration: none;
}

#login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:active, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:hover, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-create-account:focus-within, #login-status:not(.page-rate-widget-box):not(#search-top-box-form) > a.login-status-sign-in:focus-within {
    background-color: rgba(var(--bright-accent), 1);
    color: rgb(var(--dark-accent));
    text-decoration: none;
}

#login-status span.printuser {
    --wght: var(--ui-wght);
    margin-right: .5em;
    color: rgb(var(--bright-accent));
    font-weight: var(--wght);
}

#login-status a#my-account, #login-status a[href*="account/messages"] {
    color: rgb(var(--bright-accent));
}

#login-status a#my-account {
    --wght: var(--ui-wght);
    -webkit-text-decoration: underline rgb(var(--dark-accent)) .125em;
    display: flex;
    align-items: center;
    padding: 0 .5em;
    background-color: initial;
    box-shadow: inset 0 0 0 0 rgb(var(--dark-accent));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--dark-accent)) .125em;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1);
}

#login-status a#my-account:active, #login-status a#my-account:hover {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--dark-accent)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--dark-accent)) 0;
}

#login-status a#my-account:focus-within {
    --wght: var(--ui-hvr-wght);
    -webkit-text-decoration: underline rgb(var(--dark-accent)) 0;
    box-shadow: inset 0 -2em 0 0 rgb(var(--dark-accent));
    color: rgb(var(--bright-accent));
    font-weight: var(--wght);
    text-decoration: underline rgb(var(--dark-accent)) 0;
}

#login-status #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    position: relative;
    width: var(--account-height);
    height: var(--account-height);
    margin: 0;
    padding: 0;
    background-color: rgb(var(--bright-accent));
    color: transparent;
    clip-path: var(--clip-path);
    transition: -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .1s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .1s cubic-bezier(.4, 0, .2, 1);
}

#login-status #account-options {
    display: block !important;
    z-index: 12;
    position: absolute;
    top: 1.5rem;
    right: 0;
    width: 10em;
    margin: .25em 0 0;
    padding: 0;
    overflow: hidden;
    background-image: var(--gradient-header);
    background-color: rgb(var(--dark-gray-monochrome));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}

#login-status #account-options:focus-within, #login-status #account-topbutton:active + #account-options, #login-status #account-topbutton:focus + #account-options {
    opacity: 1;
    pointer-events: all;
}

@media (pointer: coarse) {
    #login-status #account-options:hover, #login-status #account-topbutton:hover + #account-options {
        opacity: 1;
        pointer-events: all;
    }
}

#login-status #account-options * {
    margin: 0;
    padding: 0;
}

#login-status #account-options ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 2em;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    font-size: .85em;
}

#login-status #account-options ul li {
    position: relative;
}

#login-status #account-options ul li, #login-status #account-options ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#login-status #account-options a {
    --box-shadow: rgba(var(--dark-gray-monochrome));
    --wght: var(--ui-wght);
    position: relative;
    flex-grow: 1;
    height: 100%;
    max-height: 2em;
    padding: 0 .25em;
    box-shadow: inset 0 0 0 .0625rem var(--dark-gray-monochrome);
    font-weight: var(--wght);
    transition: color .15s cubic-bezier(.4, 0, .2, 1), font-weight .15s cubic-bezier(.4, 0, .2, 1), font-variation-settings .15s cubic-bezier(.4, 0, .2, 1);
}

#login-status #account-options li > a, #login-status #account-options li > a:visited {
    color: rgb(var(--bright-accent));
}

#login-status #account-options li > a:active, #login-status #account-options li > a:hover {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--dark-accent));
    font-weight: var(--wght);
    text-decoration: none;
}

#login-status #account-options li > a:focus-within {
    --wght: var(--ui-hvr-wght);
    color: rgb(var(--dark-accent));
    font-weight: var(--wght);
    text-decoration: none;
}

#login-status #account-options li > a[href*="/messages"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 0;
}

#login-status #account-options li > a[href*="/messages"]:after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    content: "Messages";
    font-size: calc(0.9375rem * .765);
    pointer-events: none;
}

#login-status #account-options li > a:before {
    --clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    z-index: -1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--bright-accent));
    content: " ";
    clip-path: var(--clip-path);
    pointer-events: none;
    transition: -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
    transition: clip-path .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}

#login-status #account-options li > a:active:before, #login-status #account-options li > a:hover:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}

#login-status #account-options li > a:focus-within:before {
    --clip-path: polygon(-15% 0, 115% 0, 100% 100%, 0 100%);
}

/* ===默认收起用户信息栏和搜索栏=== */
#search-top-box {
    top: 23px;
    right: calc(3%);
}

#login-status {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    top: 24px;
    right: calc(3% + calc(0.9375rem * 1.8) + .25em);
    color: transparent;
    pointer-events: none;
    transition: color .2s cubic-bezier(.4, 0, .2, 1);
    user-select: none;
}

@media only screen and (min-width: 980px) {
    #search-top-box {
        right: calc(3% + (-100vw + var(--header-width-on-desktop)) / 2);
    }

    #login-status {
        right: calc(3% + calc(0.9375rem * 1.8) + .25em + (-100vw + var(--header-width-on-desktop)) / 2);
    }
}

#login-status:active, #login-status:hover {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--bright-accent));
    pointer-events: all;
    user-select: auto;
}

#login-status:focus-within {
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    color: rgb(var(--bright-accent));
    pointer-events: all;
    user-select: auto;
}

#login-status:active #account-options, #login-status:hover #account-options {
    pointer-events: all;
}

#login-status:focus-within #account-options {
    pointer-events: all;
}

#login-status > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 0;
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1), text-decoration .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), clip-path .2s cubic-bezier(.4, 0, .2, 1), opacity .2s cubic-bezier(.4, 0, .2, 1), -webkit-text-decoration .2s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .2s cubic-bezier(.4, 0, .2, 1);
}

#login-status:active > :not(#account-topbutton):not([href*="account/messages"]), #login-status:hover > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}

#login-status:focus-within > :not(#account-topbutton):not([href*="account/messages"]) {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    opacity: 1;
}

#login-status #account-topbutton {
    margin-left: 0;
    background-color: initial;
    pointer-events: all;
    transition: clip-path .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), -webkit-clip-path .15s cubic-bezier(.4, 0, .2, 1);
}

#login-status:hover #account-topbutton {
    background-color: rgb(var(--bright-accent));
}

#login-status:before {
    -webkit-mask-image: var(--user-account-mask);
    -webkit-mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    -webkit-mask-position: center right;
    -webkit-mask-repeat: no-repeat;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bright-accent), 1);
    content: "";
    cursor: pointer;
    mask-image: var(--user-account-mask);
    mask-position: center right;
    mask-repeat: no-repeat;
    mask-size: calc(calc(0.9375rem * 1.8) - .5em);
    pointer-events: all;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}

#login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-color), 1);
}

#login-status:active:after, #login-status:active:before, #login-status:hover:after, #login-status:hover:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}

#login-status:focus-within:after, #login-status:focus-within:before {
    background-color: rgba(var(--search-icon-hover-bg-color), 0);
    cursor: auto;
    pointer-events: none;
}

#login-status #account-topbutton {
    --clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgba(var(--bright-accent), 0);
    clip-path: var(--clip-path);
}

#login-status:active #account-topbutton, #login-status:hover #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--bright-accent));
    clip-path: var(--clip-path);
}

#login-status:focus-within #account-topbutton {
    --clip-path: polygon(30% 35%, 70% 35%, 50% 60%, 50% 60%);
    -webkit-clip-path: var(--clip-path);
    background-color: rgb(var(--bright-accent));
    clip-path: var(--clip-path);
}

#login-status #account-options {
    margin: 0;
}

#login-status a[href*="account/messages"] {
    color: rgb(var(--bright-accent));
    pointer-events: all;
}

#account-topbutton {
    border: none;
}

#account-options {
    border: none;
}

#top-bar {
    --dropdown-links-hover-color: var(--dark-gray-monochrome);
}

#main-content {
    --ui-icon-color: var(--dark-gray-monochrome);
    --ui-icon-hover-color: var(--dark-gray-monochrome);
    --ui-icon-bg: var(--bright-accent);
    --ui-button-hover-txt: var(--dark-gray-monochrome);
}

#interwiki, #side-bar {
    --sidebar-links-hover-text-color: var(--dark-gray-monochrome);
}

/*---- tags ----*/
#main-content .page-tags a[href^="/system:page-tags/tag/_"] {
    display: none;
}

#main-content .page-tags span {
    justify-content: flex-start;
}

#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -webkit-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
    clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}

#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -moz-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}

#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"]) {
    --wght: 500;
    display: inline;
    position: relative;
    flex-grow: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 1.175em;
    margin: 0 0 0 0.5125rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 1rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--swatch-menutxt-light-color));
    font-size: 0.6875rem;
    line-height: 0.8125rem;
    text-decoration: none;
    -webkit-clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
    clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}

#main-content .page-tags span a:hover:not([href^="/system:page-tags/tag/_"]), #main-content .page-tags span a:active:not([href^="/system:page-tags/tag/_"]) {
    color: rgb(var(--swatch-menutxt-dark-color));
}

#main-content .page-tags span a:focus-within:not([href^="/system:page-tags/tag/_"]) {
    color: rgb(var(--swatch-menutxt-dark-color));
}

#main-content .page-tags span a:-webkit-any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}

#main-content .page-tags span a:-moz-any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}

#main-content .page-tags span a:any-link:not([href^="/system:page-tags/tag/_"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    width: 0.25rem;
    height: 0.25rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgb(var(--swatch-background));
    box-shadow: -0.0625rem -0.0625rem 0.125rem rgb(var(--swatch-menubg-dark-color));
}

.page-tags span {
    border-top: .5rem solid transparent;
}

[id*=u-credit] .credit.first, [id*=u-credit] .credit.otherwise {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* ===吸附顶栏=== */


div#extrac-div-1 {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

div#extrac-div-1 span {
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: calc(-1 * (var(--header-height-on-desktop) + 0.125rem));
    right: 0;
    left: 0;
    box-sizing: inherit;
    align-items: center;
    width: 100%;
    height: var(--final-header-height-on-desktop);
    margin: 0;
    margin-top: 0;
    padding: 0;
    background: var(--gradient-topmenu);
    background-size: 100% var(--final-header-height-on-desktop);
}

#top-bar br {
    display: none;
}

#header div[class*="top-bar"] li a {
    transition: font-weight 300ms cubic-bezier(0.4,0,0.2,1),font-variation-settings 300ms cubic-bezier(0.4,0,0.2,1);
}

#header {
    position: -webkit-sticky;
    position: sticky;
    top: calc((var(--header-height-on-desktop) + 0.125rem) * -1);
}

/* ===页面元素颜色调整=== */

    table.page-history tr:nth-of-type(2) td:not(:nth-of-type(7)):before {
        color: rgb(var(--dark-accent));
    }

/* ===内置解决saving pages问题的模块=== */
body[class="wait"] #odialog-shader-iframe, body[class="wait"] #odialog-shader {
    display: none !important;
}

#odialog-container {
    position: fixed !important;
}

body[class="wait"] #odialog-container {
    z-index: -1;
}

body[class="wait"] #odialog-container #owindow-1 {
    display: none !important;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info {
    background-color: rgb(var(--dark-accent));
    border: 1px solid rgb(var(--bright-accent));
}

div#lock-info {
    font-size: 0!important;
    margin: .8rem 0!important;
    padding: 0.4rem .8rem!important;
}

div#lock-info::before {
    content: '您握有一个独占的15 分钟锁定，这将会阻止其他人编辑您正在作业的页面。\A这个锁定将在闲置 ';
    display: inline;
    font-size: .82rem;
    white-space: pre-wrap;
}

div#lock-info>strong {
    font-size: .82rem;
}

div#lock-info>br {
    display: none;
}

div#lock-info::after {
    content: ' 秒后失效。';
    display: inline;
    font-size: .82rem;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::before {
    content: '保存页面中……\A若此提示已经显示了很长时间，建议将编辑框中的内容复制到剪切板然后刷新本页重新编辑。';
    display: inline;
    font-size: .82rem;
    color: rgb(var(--bright-accent));
    white-space: pre-wrap;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size: 0;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info>strong {
    font-size: 0;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size: 0;
}

/* ----END---- */