@import url('https://fonts.bunny.net/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap');
@import url(https://fonts.bunny.net/css?family=reddit-mono:200,300,400,500,600,700,800,900);
@import url('https://fonts.bunny.net/css2?family=Fragment+Mono:ital@0;1&display=swap');
@import url('https://fonts.bunny.net/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* --- Root variables --- */
:root {
    --header-logo: url(https://scp-wiki.wikidot.com/local--files/theme:enlightened-eyes/blinded_rook.png);
    --header-title: "观谬维基";
    --header-subtitle: "异常观测网络";
    --page-subtitle: '迷思风车 - #风车 #叙事';
    --pager-previous-button: "";
    --pager-next-button: "";
    --header-logo-size: 3rem;
    --title-size: 2rem;
    --subtitle-size: 0.62rem;
    --main-content-width: 65rem;
    --main-content-top-margin: 1.25rem;
    --base-font-size: 1.15rem;
    --side-bar-width: 18rem;
    --basalt-page-content-font-weight: 400;
    --header-font-primary: 'Reddit Mono';
    --UI-font-primary: 'Space Mono';
    --body-font-primary: 'Red Hat Text';
    --mono-font-primary: 'Fragment Mono';
    --basalt-overtone: 243, 85, 65;
    --basalt-undertone: 232, 221, 212;
    --title-border-color: 243, 85, 65;
    --basalt-UI-dark-palette: 212, 169, 106;
    --basalt-bright-element-color: 232, 221, 212;
    --basalt-dark-element-color: 147, 142, 139;
    --basalt-primary-color: 14, 14, 14;
    --basalt-secondary-color: 21, 21, 25;
    --basalt-tertiary-color: 28, 28, 32;
    --basalt-main-text-color: 200, 192, 184;
    --side-bar-resources-background-color: none;
    --general-border-color: 30, 30, 36;
    --modal-fader-background-color: 0, 0, 0;
    --link-color: var(--basalt-overtone);
    --top-bar-dropdown-background-hover: var(--basalt-bright-element-color);
    --rate-module-upvote-color: var(--basalt-overtone);
    --rate-module-downvote-color: var(--basalt-dark-element-color);
    --rate-module-background-color: var(--basalt-secondary-color);
    --bg: rgb(10, 10, 11);
    --surface: rgb(17, 17, 20);
    --surface2: rgb(18, 18, 21);
    --surface3: rgb(28, 28, 32);
    --border: rgb(30, 30, 36);
    --text: rgb(200, 192, 184);
    --text-dim: rgb(188 183 180);
    --text-faint: rgb(171, 171, 171);
    --text-bright: rgb(234, 227, 222);
    --accent: rgb(139, 26, 26);
    --accent2: rgb(192, 57, 43);
    --warm: rgb(212, 169, 106);
    --warm-dim: rgb(122, 92, 48);
    --_accent: rgb(var(--basalt-overtone));
}

/* --- Top Bar --- */
#top-bar {
    background: rgb(var(--surface));
    border-bottom: 1px solid var(--border);
    position: relative;
    --top-bar-link-color-hover: rgb(var(--basalt-primary-color));
    --side-bar-link-color-hover: rgb(var(--basalt-primary-color));
}
#top-bar div[class*=top-bar]>ul {
    justify-content: center;
    padding: 0 1rem;
}

#top-bar div[class*=top-bar]>ul>li>a {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    transition: color 0.15s ease, background 0.15s ease;
}

#top-bar div[class*=top-bar]>ul>li>a:hover {
    color: rgb(var(--basalt-primary-color));
    background: rgb(var(--basalt-UI-dark-palette));
}

#top-bar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(192, 57, 43, 0.35), rgba(212, 169, 106, 0.2), transparent);
    pointer-events: none;
}

#top-bar div[class*=top-bar]>ul>li.sfhover>a, #top-bar div[class*=top-bar]>ul>li:focus-within>a, #top-bar div[class*=top-bar]>ul>li>a:focus, #top-bar div[class*=top-bar]>ul>li>a:hover {
    color: rgb(var(--basalt-primary-color));
}

/* --- Header --- */
#header {
    background-color: var(--surface);
    background-image:
        repeating-linear-gradient(to right, rgba(26, 26, 32, 0.9) 0px, rgba(26, 26, 32, 0.9) 1px, transparent 1px, transparent 44px),
        repeating-linear-gradient(to bottom, rgba(26, 26, 32, 0.9) 0px, rgba(26, 26, 32, 0.9) 1px, transparent 1px, transparent 22px);
}

#header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 120% at 50% 50%, transparent 20%, var(--surface) 100%);
    pointer-events: none;
    z-index: 0;
}

#header h1, #header h2 {
    position: relative;
    z-index: 1;
}

#header h1 a {
    padding-left: calc(var(--base-header-height) * 0.15);
    padding-right: calc(var(--base-header-height) * 0.25);
}

#header h1 span {
    letter-spacing: 0.12em;
    margin-left: 0.4rem;
    color: var(--text-bright);
}

#header h1 a span::before {
    margin-bottom: 5px;
}

#header h1 a span::after {
    margin-bottom: 6px;
    margin-top: 3px;
    color: var(--accent2);
}

#header h2 span {
    font-family: var(--UI-font-primary);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    color: var(--text-faint);
    text-transform: uppercase;
}

@keyframes pw-grid-drift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 44px 22px, 44px 22px; }
}

#header {
    animation: pw-grid-drift 60s linear infinite;
}

/* --- Sidebar --- */
#side-bar {
    background: var(--surface);
    border-right: 1px solid var(--border);
}

#side-bar .side-block {
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
}

#side-bar .heading {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--accent2);
    text-transform: uppercase;
    padding: 0.2rem 1rem 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#side-bar .heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(192, 57, 43, 0.25), transparent);
}

#side-bar .menu-item a {
    font-family: var(--UI-font-primary);
    font-size: 0.8rem;
    color: var(--text-faint);
    letter-spacing: 0.06em;
    padding: 0.3rem 1rem 0.3rem 1.2rem;
    display: block;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#side-bar .menu-item a:hover {
    color: rgb(var(--basalt-primary-color));
    border-left-color: rgba(192, 57, 43, 0.4);
    background: rgba(192, 57, 43, 0.04);
}

#side-bar .menu-item.selected a, #side-bar .menu-item.active a {
    color: var(--text);
    border-left-color: var(--accent2);
    background: rgba(192, 57, 43, 0.06);
}

:is(#side-bar,#interwiki) .heading {
    background-color:  transparent;
}

/* --- Container --- */
@keyframes pw-hatch-drift {
    from { background-position: 0 0; }
    to   { background-position: 56px 56px; }
}

#container-wrap-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 56L56 0M-14 14L14 -14M42 70L70 42' stroke='rgba(26,26,32,0.8)' stroke-width='1'/%3E%3Cpath d='M0 0L56 56M-14 42L14 70M42 -14L70 14' stroke='rgba(26,26,32,0.8)' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 56px 56px;
    mask-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, black 15%, transparent 60%);
    -webkit-mask-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 0%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, black 15%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, black 15%, transparent 60%);
    mask-composite: add;
    -webkit-mask-composite: source-over;
    pointer-events: none;
    z-index: 0;
    animation: pw-hatch-drift 20s linear infinite;
    will-change: background-position;
}

#container-wrap-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        rgba(243, 85, 65,0.5),
        rgba(212,169,106,0.2) 25%,
        rgba(30,30,36,0.2) 70%,
        transparent
    );
    pointer-events: none;
    z-index: 1;
}

/* --- Page Content --- */
#page-content {
    padding-block: 0.5rem;
}

#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
    font-family: var(--UI-font-primary);
    letter-spacing: 0.08em;
    color: var(--text-bright);
    position: relative;
    padding-bottom: 0.35rem;
}

#page-content h1::after, #page-content h2::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--_accent);
}

/*--- Links ---*/
#page-content a:not(.collapsible-block-link):not([onclick*="collapsible"]) {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--_accent) 30%, transparent);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s ease;
}

#page-content a:not(.collapsible-block-link):not([onclick*="collapsible"]):hover {
    text-decoration-color: var(--_accent);
}

/* --- Global Elements --- */
blockquote, div.blockquote {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--_accent) 15%, var(--border));
    border-left: 3px solid var(--_accent);
    border-radius: 0 3px 3px 0;
    box-sizing: border-box;
    margin: 1.25rem auto;
    max-width: calc(var(--main-content-width) * 0.825);
    overflow: auto;
    padding: 0.125rem 1.45rem;
}

blockquote blockquote,
div.blockquote div.blockquote,
blockquote div.blockquote,
div.blockquote blockquote {
    background: color-mix(in srgb, var(--_accent) 2%, var(--surface));
    border-left-color: color-mix(in srgb, var(--_accent) 50%, var(--border)); opacity: 0.85;
}

:is(blockquote, div.blockquote) :is(blockquote, div.blockquote) :is(blockquote, div.blockquote) {
    border-left-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
    opacity: 0.7;
}

/* Horizontal Lines */

#page-content hr:not(div.parapost-body hr) {
    border-top: none; background-color: rgb(68, 38, 33);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem auto;
}

div.parapost-body hr {
    border-top-color: color-mix(in srgb, var(--_accent) 35%, var(--border));
}

:is(:where(#page-content) table:not(.form),table.wiki-content-table) th {
    font-family: var(--body-font-primary);
}

:is(#page-content table:not(.form), table.wiki-content-table) td {
    border-color: var(--border);
}

:is(#page-content table:not(.form), table.wiki-content-table) tr:nth-child(even) td {
    background: rgba(192, 57, 43, 0.02);
}

@keyframes pw-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

#page-content {
    animation: pw-fadein 0.4s ease-out both;
}

.hovertip .footnote {
    font-family: var(--body-font-primary);
}

.hovertip .content .footnote .f-heading,
.hovertip .content .reference .r-heading,
.hovertip .content .footnote::before,
.hovertip .content .reference::before,
.bibitems .title,
.footnotes-footer .title,
.bibitems::before,
.footnotes-footer::before {
    background-color: rgb(var(--basalt-overtone));
    text-transform: uppercase;
}

/* Footnotes & Footer */

div.footnotes-footer {
    border-top: 1px solid var(--border);
    margin-top: 2rem;
    padding-top: 0.75rem;
    position: relative;
}

div.footnotes-footer .title {
    font-family: var(--UI-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Collapsibles --- */
.collapsible-block-link {
    font-family: var(--UI-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--warm);
    opacity: 0.8;
}
.collapsible-block-link:hover {
    opacity: 1;
    color: var(--warm);
}

.collapsible-block {
    margin: 0.75rem 0;
}

.collapsible-block-folded .collapsible-block-link,
.collapsible-block-unfolded-link .collapsible-block-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: color-mix(in srgb, var(--_accent) 1%, var(--surface2));
    border: 1px solid color-mix(in srgb, var(--_accent) 25%, var(--border));
    border-left: 3px solid var(--_accent);
    border-radius: 2px;
    color: color-mix(in srgb, var(--_accent) 30%, var(--text));
    font-family: var(--UI-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    padding: 3px 10px 3px 8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-weight: bold;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.collapsible-block-folded .collapsible-block-link::before {
    content: '▶';
    font-size: 0.85em;
    color: var(--_accent);
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.collapsible-block-unfolded-link .collapsible-block-link::before {
    content: '▼';
    font-size: 0.85em;
    color: var(--_accent);
    opacity: 0.7;
}

.collapsible-block-folded .collapsible-block-link:hover,
.collapsible-block-unfolded-link .collapsible-block-link:hover {
    background: color-mix(in srgb, var(--_accent) 14%, var(--surface2));
    border-color: color-mix(in srgb, var(--_accent) 45%, var(--border));
    border-left-color: color-mix(in srgb, var(--_accent) 80%, white);
    color: color-mix(in srgb, var(--_accent) 40%, var(--text-bright));
}

.collapsible-block-content {
    border-left: 2px solid color-mix(in srgb, var(--_accent) 20%, var(--border));
    margin-top: 4px;
    padding-left: 1em;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
}

@keyframes pw-collapse-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.collapsible-block-content {
    animation: pw-collapse-in 0.25s ease-out both;
}

/* --- Tabs --- */
.yui-navset .yui-nav li {
    background: var(--surface2);
    border-color: var(--border);
}

.yui-navset .yui-nav li a {
    border-color: var(--border);
    color: var(--text-dim);
    font-family: var(--UI-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.yui-navset .yui-nav li a:hover {
    background: var(--surface3);
    color: var(--text);
}

.yui-navset .yui-nav .selected, .yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
    background: color-mix(in srgb, var(--_accent) 15%, var(--surface3));
    border-color: color-mix(in srgb, var(--_accent) 30%, var(--border));
    color: var(--text-bright);
}

.yui-navset .yui-content {
    background: var(--surface);
    border-color: var(--border);
}

#page-content .yui-navset a,
#page-content .yui-navset a:hover,
#page-content .collapsible-block-link,
#page-content .collapsible-block-link:hover,
#page-content .collapsible-block-folded a,
#page-content .collapsible-block-folded a:hover,
#page-content .collapsible-block-unfolded-link a,
#page-content .collapsible-block-unfolded-link a:hover,
#page-content .pager a,
#page-content .pager a:hover,
#page-content .page-tags a,
#page-content .page-tags a:hover,
#page-content div.parapost-foot a,
#page-content div.parapost-foot a:hover,
#page-content div.parapost-head a,
#page-content div.parapost-head a:hover {
    text-decoration: none;
    text-underline-offset: unset;
}

#page-content .yui-navset .yui-nav a,
#page-content .yui-navset .yui-nav a:link,
#page-content .yui-navset .yui-nav a:visited,
#page-content .yui-navset .yui-nav a:hover,
#page-content .yui-navset .yui-nav a:focus,
#page-content .yui-navset .yui-nav .selected a,
#page-content .yui-navset .yui-nav .selected a:link,
#page-content .yui-navset .yui-nav .selected a:visited,
#page-content .yui-navset .yui-nav .selected a:hover,
#page-content .yui-navset .yui-nav .selected a:focus {
    text-decoration: none;
    text-underline-offset: unset;
}

/*--- Page Tags ---*/

#main-content>.page-tags>span a {
    z-index: 1;
}

#main-content>.page-tags>span a:is(:hover,:focus) {
   background-color: rgb(var(--basalt-overtone));
   z-index: 1;
}

/*--- Code Block ---*/
div.parapost-body .code,
#page-content .code {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--_accent) 30%, var(--border)) transparent;
}

#page-content code, #page-content tt,
div.parapost-body code, div.parapost-body tt {
    background: none;
    border: none;
    color: color-mix(in srgb, var(--_accent) 60%, var(--text));
    font-family: var(--mono-font-primary);
    font-size: 0.95em;
    padding: 0;
}

#page-content .code::-webkit-scrollbar {
    height: 2px;
}

#page-content .code::-webkit-scrollbar-track {
    background: transparent;
}

#page-content .code::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--_accent) 30%, var(--border)); border-radius: 1px;
}

div.parapost-body .code::-webkit-scrollbar {
    height: 2px;
}

div.parapost-body .code::-webkit-scrollbar-track {
    background: transparent;
}

div.parapost-body .code::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--_accent) 30%, var(--border)); border-radius: 1px;
}

/* --- Page Title --- */
#page-title, .meta-title {
    font-family: var(--UI-font-primary);
    font-size: 1.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-bright);
    position: relative;
    padding-bottom: 0.5rem;
    padding-top: 1.5rem;
    border-bottom: solid 0.15rem rgba(var(--title-border-color), 0.1);
}

#page-title::before {
    content: var(--page-subtitle, "");
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    font-weight: 400;
}

#page-title::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: var(--_accent);
}

/* --- Action Bar --- */
#action-area {
    border-top: 1px solid var(--border);
    background: var(--surface);
    position: relative;
}

#action-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(243, 85, 65,0.2), rgba(212,169,106,0.1), transparent);
    pointer-events: none;
}

#action-area a {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

/*--- Page Options ---*/
div[id*=page-options-bottom]>a {
   font-family: var(--UI-font-primary);
}

/* --- Breadcrumbs / Page Info / Footer --- */
#breadcrumbs, .pseudocrumbs {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hovertip {
    background: var(--surface2);
    border: 1px solid color-mix(in srgb, var(--_accent) 25%, var(--border));
    border-radius: 3px;
    font-family: var(--UI-font-primary);
    letter-spacing: 0.04em;
}

#page-info {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    text-transform: uppercase;
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#page-info a {
    color: var(--text-dim);
}

#page-info a:hover {
    color: var(--_accent);
}

#footer {
    background: var(--surface); border-top: 1px solid var(--border);
    z-index: 1;
}

#footer p, #footer a {
    font-family: var(--UI-font-primary);
    letter-spacing: 0.1em;
    color: var(--text-faint);
    text-transform: uppercase;
}

#footer a:hover {
    color: var(--text-dim);
}

#footer>a:last-child {
    margin-left: 1.375ch;
}

/*--- Scrollbar ---*/
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 85, 65,0.4) rgb(var(--basalt-tertiary-color));
}

/*--- Pager ---*/
.pager .target a, .pager .current {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    border-radius: 2px;
}

.pager .current {
    background: color-mix(in srgb, var(--_accent) 15%, var(--surface2));
    border-color: color-mix(in srgb, var(--_accent) 30%, var(--border));
    color: var(--text-bright);
}

#main-content .pager span>a:is(:hover,:focus) {
    color: rgb(var(--basalt-primary-color));
    font-weight: bolder;
    background-color: rgb(var(--basalt-main-text-color));
}

#main-content .pager span>a::before {
    background-color: rgb(var(--basalt-UI-dark-palette))
}

/*--- Global SCP Image Block ---*/

div.scp-image-block {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

div.scp-image-block div.scp-image-caption {
    font-family: var(--UI-font-primary);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    background: var(--surface3);
    border-top: 1px solid var(--border);
    padding: 6px 10px;
}

/*--- TOC ---*/
#toc-action-bar { display: none; }

.table-of-contents {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--_accent) 40%, var(--border));
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
}

.table-of-contents .title {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--_accent);
    text-transform: uppercase;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-of-contents .title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, color-mix(in srgb, var(--_accent) 25%, transparent), transparent);
}

.table-of-contents ul { padding: 6px 0; margin: 0; list-style: none; }

.table-of-contents ul li a {
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 3px 12px;
    display: block;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    text-decoration: none;
}

.table-of-contents ul li a:hover {
    color: var(--_accent);
    border-left-color: rgba(243, 85, 65,0.4);
    background: rgba(243, 85, 65,0.04);
}

/* --- Parapost --- */
div.parapost-wrap {
    box-sizing: border-box;
    width: 85%;
    padding-left: 0;
    margin: 14px auto 0;
}

div.parapost {
    --_accent: var(--post-accent, rgb(var(--basalt-overtone)));
    --link-color: var(--post-accent-triplet, var(--basalt-overtone));
    background: color-mix(in srgb, var(--_accent) 3%, var(--surface));
    border-left: 5px solid var(--_accent);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0.35rem;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
    transition: border-left-color 0.2s ease, background 0.2s ease;
}

div.parapost:hover {
    background: color-mix(in srgb, var(--_accent) 6%, var(--surface));
    border-left-color: color-mix(in srgb, var(--_accent) 70%, white);
}

div.parapost.conclude {
    border-bottom: 5px solid var(--_accent);
    transition: border-left-color 0.2s ease, border-bottom-color 0.2s ease, background 0.2s ease;
}

div.parapost.conclude:hover {
    border-bottom-color: color-mix(in srgb, var(--_accent) 70%, white);
}

div.parapost.log div.parapost-body {
    background: color-mix(in srgb, var(--_accent) 6%, rgb(10, 11, 10));
    border-left: 2px solid color-mix(in srgb, var(--_accent) 30%, rgb(10, 11, 10));
    border-radius: 2px;
    color: color-mix(in srgb, var(--_accent) 55%, var(--text));
    font-family: var(--mono-font-primary);
    line-height: 1.75;
    margin: 8px;
    padding: 10px 14px;
}

div.parapost.censor div.parapost-body {
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 4px, rgb(58, 56, 62) 4px, rgb(58, 56, 62) 24px, transparent 24px, transparent 30px);
    color: transparent;
    transition: color 0.3s ease, background 0.3s ease;
    user-select: none;
}

div.parapost.censor div.parapost-body:hover {
    background: repeating-linear-gradient(to bottom, transparent 0px, transparent 4px, rgb(38, 37, 40) 4px, rgb(38, 37, 40) 24px, transparent 24px, transparent 30px);
    color: var(--text);
    user-select: text;
}

/* --- Post Header --- */
div.parapost-head {
    background: color-mix(in srgb, var(--_accent) 5%, var(--surface2));
    border-bottom: 1px solid color-mix(in srgb, var(--_accent) 20%, var(--border));
    font-size: 14px;
    padding: 5px 12px 3px;
}

div.parapost-head-top {
    align-items: center;
    column-gap: 10px;
    display: grid;
    grid-auto-rows: 0;
    grid-template-areas: "emoji user meta postno badge";
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: 1fr;
    min-height: 1.9em;
}

div.parapost-head-top p {
    display: contents;
    margin: 0;
}

div.parapost-head-top::before, div.parapost-head-top::after {
    content: none;
    display: none;
}

span.parapost-emoji {
    align-self: center;
    grid-area: emoji;
    white-space: nowrap;
}

span.parapost-emoji:empty {
    display: none;
}

span.parapost-user {
    color: var(--_accent);
    font-family: var(--mono-font-primary);
    font-weight: bold;
    grid-area: user;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

span.parapost-meta {
    font-family: var(--UI-font-primary);
    grid-area: meta;
    letter-spacing: 0.06em;
    min-width: 0;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.parapost-postno {
    border: 1px solid color-mix(in srgb, var(--_accent) 85%, var(--border));
    border-radius: 2px;
    font-family: var(--UI-font-primary);
    font-size: 0.75em;
    grid-area: postno;
    letter-spacing: 0.04em;
    opacity: 0.75;
    padding: 0px 6px;
    white-space: nowrap;
}

span.parapost-badge {
    align-self: center;
    background: color-mix(in srgb, var(--_accent) 12%, rgb(10, 10, 10));
    border: 1px solid var(--_accent);
    color: var(--_accent);
    font-family: var(--UI-font-primary);
    font-weight: bold;
    grid-area: badge;
    justify-self: end;
    letter-spacing: 0.15em;
    padding: 1px 8px;
    white-space: nowrap;
}

span.parapost-badge:empty {
    display: none;
}

/* --- Post Body --- */
div.parapost-body {
    line-height: 1.65;
    padding: 10px 14px 12px;
    position: relative;
}

div.parapost-body .code {
    background: color-mix(in srgb, var(--_accent) 5%, rgb(10, 11, 10));
    border-left: 2px solid color-mix(in srgb, var(--_accent) 25%, var(--border));
    border-radius: 2px;
    color: color-mix(in srgb, var(--_accent) 40%, var(--text));
    font-family: var(--mono-font-primary);
    font-size: 0.88em;
    margin: 8px 0;
    overflow-x: auto;
    padding: 10px 14px;
}

#page-content div.parapost a, #page-content div.parapost a:link {
    color: var(--_accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--_accent) 30%, transparent);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

#page-content div.parapost a:hover {
    color: color-mix(in srgb, var(--_accent) 70%, white);
    text-decoration-color: color-mix(in srgb, var(--_accent) 70%, white);
}

#page-content div.parapost a:visited {
    color: color-mix(in srgb, var(--_accent) 60%, var(--text-dim));
}

/* --- Post Footer --- */
div.parapost-foot {
    align-items: center;
    background: color-mix(in srgb, var(--_accent) 5%, var(--surface2));
    border-top: 1px solid color-mix(in srgb, var(--_accent) 15%, var(--border));
    display: grid;
    font-size: 12px;
    gap: 0 8px;
    grid-template-columns: 1fr auto auto;
    padding: 5px 14px 7px;
}

div.parapost-foot p {
    display: contents;
    margin: 0;
}

div.parapost-foot:not(:has(span.parapost-tags, span.parapost-upvotes, span.parapost-downvotes)) {
    display: none;
}

span.parapost-tags {
    align-self: center;
    font-family: var(--UI-font-primary);
    font-size: 0.8em;
    grid-column: 1;
    justify-self: start;
    letter-spacing: 0.06em;
    min-width: 0;
    opacity: 0.9;
    white-space: normal;
    word-break: break-word;
}

span.parapost-upvotes {
    align-self: center;
    color: color-mix(in srgb, var(--_accent) 40%, var(--text));
    font-family: var(--UI-font-primary);
    font-size: 0.8em;
    grid-column: 2;
    justify-self: end;
    letter-spacing: 0.06em;
    opacity: 0.85;
    white-space: nowrap;
}

span.parapost-downvotes {
    align-self: center;
    color: var(--fnColor);
    font-family: var(--UI-font-primary);
    font-size: 0.8em;
    grid-column: 3;
    justify-self: end;
    letter-spacing: 0.06em;
    opacity: 0.6;
    white-space: nowrap;
}

/* --- Reply Depth --- */
div.parapost-wrap.one   {
    margin-left: calc(7.5% + 2em);  
    width: calc(85% - 2em);
}

div.parapost-wrap.two   {
    margin-left: calc(7.5% + 3.5em);
    width: calc(85% - 3.5em);
}

div.parapost-wrap.three {
    margin-left: calc(7.5% + 5em);   
    width: calc(85% - 5em);
}

div.parapost-wrap.four  {
    margin-left: calc(7.5% + 6.5em);
    width: calc(85% - 6.5em);
}

div.parapost-wrap.five  {
    margin-left: calc(7.5% + 8em);   
    width: calc(85% - 8em);
}

div.parapost-wrap.one div.parapost,
div.parapost-wrap.two div.parapost,
div.parapost-wrap.three div.parapost,
div.parapost-wrap.four div.parapost,
div.parapost-wrap.five div.parapost {
    background: color-mix(in srgb, var(--_accent) 3%, var(--surface2));
}

div.parapost-wrap.one div.parapost-head,
div.parapost-wrap.two div.parapost-head,
div.parapost-wrap.three div.parapost-head,
div.parapost-wrap.four div.parapost-head,
div.parapost-wrap.five div.parapost-head {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface3));
}

div.parapost-wrap.one div.parapost-foot,
div.parapost-wrap.two div.parapost-foot,
div.parapost-wrap.three div.parapost-foot,
div.parapost-wrap.four div.parapost-foot,
div.parapost-wrap.five div.parapost-foot {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface3));
}

div.parapost-wrap.one div.parapost:hover,
div.parapost-wrap.two div.parapost:hover,
div.parapost-wrap.three div.parapost:hover,
div.parapost-wrap.four div.parapost:hover,
div.parapost-wrap.five div.parapost:hover {
    background: color-mix(in srgb, var(--_accent) 6%, var(--surface2));
}

/* --- Inline Spans --- */
span.pw-mention {
    --_mention: var(--mention-accent, var(--_accent));
    background: color-mix(in srgb, var(--_mention) -3%, var(--surface3));
    border: 1px solid color-mix(in srgb, var(--_mention) 30%, var(--border));
    border-radius: 2px;
    color: var(--_mention);
    font-family: var(--UI-font-primary);
    font-size: 0.85em;
    font-weight: bold;
    letter-spacing: 0.04em;
    padding: 0px 5px;
    white-space: nowrap;
}

span.pw-cmd {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface3));
    border: 1px solid color-mix(in srgb, var(--_accent) 20%, var(--border));
    border-bottom: 2px solid color-mix(in srgb, var(--_accent) 60%, var(--border));
    border-radius: 2px;
    color: color-mix(in srgb, var(--_accent) 70%, var(--text));
    font-family: var(--mono-font-primary);
    font-size: 0.85em;
    letter-spacing: 0.04em;
    padding: 0px 5px;
    white-space: nowrap;
}

span.pw-tag {
    color: color-mix(in srgb, var(--_accent) 40%, var(--text-dim));
    font-family: var(--UI-font-primary);
    font-size: 0.85em;
    letter-spacing: 0.04em;
    opacity: 0.95;
}

/*--- Parapost Collapsibles ---*/
#page-content div.parapost .collapsible-block-link,
#page-content div.parapost .collapsible-block-link:hover,
#page-content div.parapost .collapsible-block-folded a,
#page-content div.parapost .collapsible-block-folded a:hover,
#page-content div.parapost .collapsible-block-unfolded-link a,
#page-content div.parapost .collapsible-block-unfolded-link a:hover {
    text-decoration: none;
    text-underline-offset: unset;
}

/*--- Parapost Tabs ---*/
#page-content div.parapost .yui-navset .yui-nav a,
#page-content div.parapost .yui-navset .yui-nav a:hover,
#page-content div.parapost .yui-navset .yui-nav a:focus,
#page-content div.parapost .yui-navset .yui-nav .selected a,
#page-content div.parapost .yui-navset .yui-nav .selected a:hover,
#page-content div.parapost .yui-navset .yui-nav .selected a:focus {
    text-decoration: none;
    text-underline-offset: unset;
}

/* --- Post Tables --- */
#page-content div.parapost-body table {
    border-color: color-mix(in srgb, var(--_accent) 20%, var(--border));
}

#page-content div.parapost-body th {
    background: color-mix(in srgb, var(--_accent) 20%, var(--surface3));
    border-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
    color: var(--text-bright);
    font-family: var(--UI-font-primary);
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

#page-content div.parapost-body td {
    border-color: color-mix(in srgb, var(--_accent) 15%, var(--border));
}

#page-content div.parapost-body tr:nth-child(even) td {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface));
}

/* --- Post Tabs --- */
div.parapost-body .yui-navset .yui-nav li {
    background: color-mix(in srgb, var(--_accent) 2%, var(--surface2));
    border-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
}

div.parapost-body .yui-navset .yui-nav li a {
    border-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
}

div.parapost-body .yui-navset .yui-nav li a:hover {
    background: color-mix(in srgb, var(--_accent) 12%, var(--surface2));
    border-color: color-mix(in srgb, var(--_accent) 35%, var(--border));
}

div.parapost-body .yui-navset .yui-nav li::before {
    background: color-mix(in srgb, var(--_accent) 2%, var(--surface2));
    border-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
}

div.parapost-body .yui-navset .yui-nav li::after {
    border-color: color-mix(in srgb, var(--_accent) 2%, var(--surface2)) transparent transparent transparent;
}

div.parapost-body .yui-navset .yui-nav .selected,
div.parapost-body .yui-navset .yui-nav .selected a,
div.parapost-body .yui-navset .yui-nav .selected a:focus,
div.parapost-body .yui-navset .yui-nav .selected a:hover {
    background: color-mix(in srgb, var(--_accent) 20%, var(--surface3));
    border-color: color-mix(in srgb, var(--_accent) 40%, var(--border));
    color: var(--text-bright);
}

div.parapost-body .yui-navset .yui-nav .selected::before {
    background: color-mix(in srgb, var(--_accent) 20%, var(--surface3));
    border-color: color-mix(in srgb, var(--_accent) 40%, var(--border));
}

div.parapost-body .yui-navset .yui-nav .selected::after {
    border-color: color-mix(in srgb, var(--_accent) 20%, var(--surface3)) transparent transparent transparent;
}

div.parapost-body .yui-navset.yui-navset-top > ul.yui-nav li.selected::before {
    background-color: color-mix(in srgb, var(--_accent) 20%, var(--surface3));
}

div.parapost-body .yui-navset.yui-navset-top > ul.yui-nav li.selected::after {
    border-color: color-mix(in srgb, var(--_accent) 20%, var(--surface3)) transparent transparent transparent;
}

div.parapost-body .yui-navset .yui-content {
    border-color: color-mix(in srgb, var(--_accent) 25%, var(--border));
}

/* --- Post Image Block --- */
div.parapost-body div.scp-image-block {
    background: color-mix(in srgb, var(--_accent) 5%, var(--surface2));
    border: 1px solid color-mix(in srgb, var(--_accent) 20%, var(--border));
    border-radius: 0.35rem; margin: 1em auto;
    overflow: hidden;
    padding: 0;
}
div.parapost-body div.scp-image-block img {
    display: block;
    height: auto;
    width: 100%;
}

div.parapost-body div.scp-image-block.block-right {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

div.parapost-body div.scp-image-block.block-left {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

div.parapost-body div.scp-image-block div.scp-image-caption {
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface3));
    border-top: 1px solid color-mix(in srgb, var(--_accent) 15%, var(--border));
    color: var(--text);
    font-family: var(--UI-font-primary);
    font-size: 0.78em;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin: 0;
    padding: 7px 12px 8px;
}

/* --- Responsive --- */
@media (max-width: 579px) {
    div.parapost-wrap {
        margin: 0.5em auto;
        width: 95%;
    }

    div.parapost-wrap.one {
        margin-left: calc(2.5% + 0.75em);
        width: calc(95% - 0.75em);
    }

    div.parapost-wrap.two {
        margin-left: calc(2.5% + 1.25em);
        width: calc(95% - 1.25em);
    }

    div.parapost-wrap.three {
        margin-left: calc(2.5% + 1.75em);
        width: calc(95% - 1.75em);
    }

    div.parapost-wrap.four {
        margin-left: calc(2.5% + 2.25em);
        width: calc(95% - 2.25em);
    }

    div.parapost-wrap.five {
        margin-left: calc(2.5% + 2.75em);
        width: calc(95% - 2.75em);
    }

    div.parapost-head-top {
        grid-auto-rows: 0;
        grid-template-areas: "user badge" "meta postno";
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        row-gap: 2px;
    }

    span.parapost-emoji {
        display: none;
    }

    span.parapost-meta {
        align-self: start;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    span.parapost-postno {
        align-self: start;
        justify-self: end;
        opacity: 0.25;
        padding: 0;
    }
}

@media (min-width: 580px) and (max-width: 768px) {
    div.parapost-wrap {
        margin: 0.5em auto;
        width: 92%;
    }

    div.parapost-wrap.one {
        margin-left: calc(4% + 1em);
        width: calc(92% - 1em);
    }

    div.parapost-wrap.two {
        margin-left: calc(4% + 2em);   
        width: calc(92% - 2em);
    }

    div.parapost-wrap.three {
        margin-left: calc(4% + 3em);   
        width: calc(92% - 3em);
    }

    div.parapost-wrap.four {
        margin-left: calc(4% + 4em);   
        width: calc(92% - 4em);
    }

    div.parapost-wrap.five {
        margin-left: calc(4% + 5em);
        width: calc(92% - 5em);
    }
}

/*--- Parapost Element Hiding ---*/
span.parapost-emoji:empty,
span.parapost-emoji.emoji-none {
    display: none;
}

span.parapost-badge:empty,
span.parapost-badge.badge-none {
    display: none;
}

span.parapost-tags.tags-none {
    display: none;
}

span.parapost-upvotes.upvotes-none {
    display: none;
}

span.parapost-downvotes.downvotes-none {
    display: none;
}

/* hide foot entirely if all three are none */
div.parapost-foot:has(
    span.parapost-tags.tags-none,
    span.parapost-upvotes.upvotes-none,
    span.parapost-downvotes.downvotes-none
):not(:has(
    span.parapost-tags:not(.tags-none),
    span.parapost-upvotes:not(.upvotes-none),
    span.parapost-downvotes:not(.downvotes-none)
)) {
    display: none;
}

/*--- Rate Module ---*/
.page-rate-widget-box {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
    font-family: var(--UI-font-primary);
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    margin: 0.5rem 0;
}

.page-rate-widget-box .rate-points {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-right: 1px solid var(--border);
    color: var(--text-faint);
    position: relative;
}

/* signal bar decorations after the number */
.page-rate-widget-box .rate-points::after {
    content: '';
    display: inline-block;
    align-self: center;
    width: 16px;
    height: 10px;
    margin-left: 4px;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--_accent) 90%, transparent) 100%, transparent 100%) 0px bottom / 2px 4px no-repeat,
        linear-gradient(to top, color-mix(in srgb, var(--_accent) 90%, transparent) 100%, transparent 100%) 4px bottom / 2px 5px no-repeat,
        linear-gradient(to top, color-mix(in srgb, var(--_accent) 50%, transparent) 100%, transparent 100%) 8px bottom / 2px 7px no-repeat,
        linear-gradient(to top, color-mix(in srgb, var(--_accent) 25%, transparent) 100%, transparent 100%) 12px bottom / 2px 9px no-repeat
}

.page-rate-widget-box .number {
    font-family: var(--UI-font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--_accent);
    letter-spacing: 0.06em;
    min-width: 2ch;
    text-align: center;
}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    padding: 0;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

div.page-rate-widget-box .rate-points {
    font-size: 0.875rem;
}

#page-content div.page-rate-widget-box span.btn > a,
#page-content div.rate-box-with-credit-button .creditButton > p > a {
    text-underline-offset: 0px;
    text-decoration: none;
}

.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 4px 0;
    font-family: var(--UI-font-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--text-faint);
    transition: color 0.15s ease, background 0.15s ease;
}

.page-rate-widget-box .rateup a:hover {
    background: rgba(243, 85, 65,0.1);
    color: var(--_accent);
}

.page-rate-widget-box .ratedown a:hover {
    background: rgba(106,100,96,0.1);
    color: var(--text-dim);
}

.page-rate-widget-box .cancel a:hover {
    background: rgba(106,100,96,0.08);
    color: var(--text-dim);
}

/*--- Parawatch Tables ---*/

table.pw-table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--UI-font-primary);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    border-left: 2px solid color-mix(in srgb, var(--_accent) 40%, var(--border));
    margin: 1rem 0;
}

table.pw-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-dim);
    vertical-align: middle;
    background: var(--surface);
}

table.pw-table tr:last-child td { border-bottom: none; }
table.pw-table td:last-child { border-right: none; }

/* header row */
table.pw-table tr.pw-row-head td {
    background: color-mix(in srgb, var(--_accent) 12%, var(--surface2));
    color: var(--text-bright);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid color-mix(in srgb, var(--_accent) 30%, var(--border));
    font-weight: 600;
}

table.pw-table tr.pw-row-alert td {
    background: color-mix(in srgb, var(--_accent) 6%, var(--surface));
    border-bottom-color: color-mix(in srgb, var(--_accent) 20%, var(--border));
}

table.pw-table tr.pw-row-dim td {
    background: color-mix(in srgb, var(--_accent) 2%, var(--surface));
    opacity: 0.75;
}

td.pw-cell-key {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    text-transform: uppercase;
    background: color-mix(in srgb, var(--_accent) 4%, var(--surface2));
    border-right: 1px solid color-mix(in srgb, var(--_accent) 15%, var(--border));
    width: 110px;
    white-space: nowrap;
}

td.pw-cell-red   { color: rgba(243, 85, 65,0.85); }
td.pw-cell-amber { color: rgba(212,169,106,0.8); }
td.pw-cell-dim   { color: var(--text-faint); opacity: 0.7; }
td.pw-cell-bright { color: var(--text-bright); }

span.pw-redacted {
    background: repeating-linear-gradient(90deg, rgba(42,38,48,1) 0, rgba(42,38,48,1) 8px, rgba(34,30,40,1) 8px, rgba(34,30,40,1) 10px);
    color: transparent;
    user-select: none;
    border-radius: 1px;
    padding: 0 2px;
    display: inline-block;
    min-width: 80px;
}

span.pw-status-open {
    color: rgb(var(--basalt-overtone));
    font-weight: 700;
    letter-spacing: 0.1em;
}

span.pw-status-verified {
    color: rgba(212,169,106,0.85);
    font-weight: 700;
    letter-spacing: 0.1em;
}

span.pw-status-closed {
    color: var(--text-faint);
    font-weight: 700;
    letter-spacing: 0.1em;
}

/*--- Path / Breadcrumb Spans ---*/
span.pw-path {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-family: var(--UI-font-primary);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

span.pw-path-seg {
    color: var(--text-faint);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 1px 6px;
    white-space: nowrap;
    background: rgba(0,0,0,0.2);
    text-transform: uppercase;
}

span.pw-path-seg.active {
    color: rgb(var(--basalt-overtone));
    border-color: rgba(243, 85, 65,0.25);
    background: rgba(243, 85, 65,0.05);
}

span.pw-path-arr {
    color: var(--text-faint);
    font-size: 0.55rem;
    opacity: 0.4;
}

/*--- Extra Divs ---*/

#extra-div-1,
#extra-div-2 {
    position: fixed;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 5;
}

#extra-div-1 {
    top: calc(var(--header-final-height) + 1rem);
    height: 0;
}

#extra-div-2 {
    bottom: calc(var(--bottom-area-padding) + 2rem);
    height: 0;
}

#extra-div-1::before,
#extra-div-1::after,
#extra-div-2::before,
#extra-div-2::after {
    content: '';
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    pointer-events: none;
}

/* top-left */
#extra-div-1::before {
    top: 0;
    left: 1rem;
    border-top: 1px solid rgba(243, 85, 65,0.5);
    border-left: 1px solid rgba(243, 85, 65,0.5);
}

/* top-right */
#extra-div-1::after {
    top: 0;
    right: 1rem;
    border-top: 1px solid rgba(243, 85, 65,0.5);
    border-right: 1px solid rgba(243, 85, 65,0.5);
}

/* bottom-left */
#extra-div-2::before {
    bottom: -2rem;
    left: 1rem;
    border-bottom: 1px solid rgba(243, 85, 65,0.3);
    border-left: 1px solid rgba(243, 85, 65,0.3);
}

/* bottom-right */
#extra-div-2::after {
    bottom: -2rem;
    right: 1rem;
    border-bottom: 1px solid rgba(243, 85, 65,0.3);
    border-right: 1px solid rgba(243, 85, 65,0.3);
}

#extra-div-1::before, #extra-div-1::after,
#extra-div-2::before, #extra-div-2::after {
    pointer-events: none;
}

@keyframes pw-sig-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

#extra-div-3 {
    position: fixed;
    top: calc(var(--header-final-height) + 1.85rem);
    right: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--UI-font-primary);
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: rgba(243, 85, 65,0.5);
    text-transform: uppercase;
    pointer-events: none;
    z-index: 0;
}

#extra-div-3::before {
    content: '';
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: rgba(243, 85, 65,0.6);
    flex-shrink: 0;
    animation: pw-sig-pulse 2.5s ease-in-out infinite;
}

#extra-div-3::after {
    content: 'VPN ACTIVE';
}

@media (max-width: 1200px) {
    #extra-div-1,
    #extra-div-2,
    #extra-div-3 {
        display: none;
    }
}

/*--- Disable animations ---*/
@media (prefers-reduced-motion: reduce) {
    #page-content { animation: none; }
    div.parapost-wrap { animation: none; }
    .collapsible-block-content { animation: none; }
    #container-wrap-wrap::before { animation: none; }
    #container-wrap-wrap::after { animation: none; }
    #extra-div-3::before { animation: none; }
}

/*--- Radio buttons ---*/
[type=radio], input[type=checkbox] {
    border-color: rgb(var(--basalt-main-text-color));
}

/*--- User Window/Title ---*/
.owindow .title {
    cursor: initial;
    font-family: var(--body-font-primary);
    font-size: 1.15em;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 .75em;
    display: flex;
    align-items: center;
    font-family: var(--UI-font-primary);
    background-color: transparent;
    height: 2rem;
    justify-content: center;
    opacity: 60%;
    color: rgb(var(--basalt-main-text-color));
}

.owindow .button-bar>a[onclick*=cleanAll]::after {
    background: rgb(var(--basalt-main-text-color));
}

.owindow .button-bar>a[onclick*="cleanAll"]:is(:hover)::after {
    background: rgb(var(--basalt-primary-color));
}

/* FOR CN-WIKI added by ankv */
#side-bar .side-block.admin {
    padding: 0;
    background: unset !important;
}

#side-bar .side-block .collapsible-block {
    margin: 0;
}

#side-bar .side-block .collapsible-block-content {
    padding-left: 0;
}

#side-bar .collapsible-block a.collapsible-block-link:is(:hover,:focus) {
    color: var(--bg);
}