Enlightened Eyes Theme

PARAWATCH
▶
ACTIVE THREADS
▶
2026
▶
BLINDED WINDMILLS

There has been (1) new message!

RageTheComic
2026-04-08 11:55 PM (EST)
#123408234
none
OP

I believe, like many things, it starts with a story.

A story of two brothers, sitting in a lonely field, staring off into the sunset. Along the horizon dotted countless windmills, rotating against the push and pull of the Midwestern wind. I can remember us counting all of the windmills that never moved; us theorizing why they weren't active. Did they not have enough wind?

But that was long ago, and things are different now. Much more different.

My brother lost his sight 3 years ago, in a chemical accident. The changes to our lives were extreme. He always prided himself on his independence — a topic we often try our best to joke about today. He used to talk about wanting to climb up one of those windmills someday, maybe to appreciate the view or even just understand what it feels like. To be so high above the ground.

Look at the turbines.

One time we stopped by our spot in that field, and he looked at me, as if something became so clear to him.

"Have you seen them?" He asked with a smile.

"The 'mills?" I replied. Was this some kind of joke?

"You're not paying attention!" He grabbed my head and forced my eyes closed. I tried to resist, tell him off, but he held his finger to my mouth and whispered his question again.

"Have you seen them?"

I'm not really sure what happened next. It's like my mind forgot where my eyes were. All I could see were the countless colors and lines dancing inside my eyelids. Again and again I witnessed pulsating shapes, exotic hues, and alien creatures that I could never hope to describe to anyone else.

And in the midst of all that was when I noticed it. A group of flocking bird-like creatures, high in the sky. Their wings, sharper than razorblades, rotating eccentrically around their torso. I could feel their eyes on me—each one a fixed, unblinking point of attention, waiting.

I was absolutely horrified.

I turned to my brother again, who only smiled and held his finger to his own lips. "Be quiet," he whispered. "Those who see will be safe."

I opened my eyes and the windmills appeared again. This time, however, I noticed something odd. The turbines had a new shape that I had previously never noticed. Between their spinning blades, I could make out an outline of a large pupil, staring off into the distance.

And that's when it started to click, I think. When I realized that the world around me was nothing like the world that hides from me.

How I had to blind myself to witness what really exists beyond my sights.

#narrative #windmills #first-person #blind▲ 243▼ 28

denjistan
2026-04-08 12:16 AM (EST)
#34598242
none
none

wow, cool story bro. neat.

none▲ 123▼ 44

MOD_adam-smashing
2026-04-08 12:18 AM (EST)
#34595439
🗿
MOD

@denjistan really? Knock it off, this is the second time you've done this.

none▲ none▼ none

denjistan
2026-04-08 12:19 AM (EST)
#345954493
none
none

pee pee poo poo.

none▲ 2▼ 32

neoknight
2026-04-08 12:24 AM (EST)
#345954459
🗿
MOD

Moderator Notice

User denjistan has been banned.

none▲ none▼ none

sadgilmore
2026-04-08 1:04 AM (EST)
#345655448
none
QA

uh, do you know the difference between a windmill and a wind turbine?

/define windmill wind-turbine

none▲ 223▼ 16

FLOM
2026-04-08 1:05 AM (EST)
#345655449
🤖
BOT

• Windmill (noun): a mill or machine operated by the wind usually acting on oblique vanes or sails that radiate from a horizontal shaft.
• Wind turbine (noun): a wind-driven turbine for generating electricity.

#bot #tool▲ none▼ none

space_enjoyer38 2026-04-08 1:08 AM (EST)
#345655682
none
none

Thanks @sadgilmore. Downvoted.

none▲ 1▼ 2

EarthCollapser
2026-04-08 2:08 AM (EST)
#345698342
none
none

Not to necropost, but is nobody going to talk about why this thread looks so different from everything else onsite?

did they #enshitify the parawatch wiki?

none▲ 235▼ 12

---

JakdragonX
2026-04-18 1:34PM (EST)
#001
📌
THEME

Hello,

This is Enlightened Eyes, a theme based around Basalt. It's very much inspired for the Parawatch universe, and should be used for Parawatch-related articles. The challenge I gave myself was simple: what if Parawatch had a Wikijump?

It would be impossible to replace or shift the sentiment that the OG Parawatch theme has, and that's really a testament to the various authors who contributed to it. Rather, this is my take on a Parawatch that has fully matured, embraced its roots and wants itself to be taken seriously. I understand this is not a headcanon for most—and that's fine. I've provided some methods below to alter the theme if you desire to use it for other purposes, change the icon at the top, etc.

To use the theme:

[[include :scp-wiki:theme:basalt]]
[[include :scp-wiki:theme:enlightened-eyes]]

Built-in Parawatch post component

This theme comes with a built-in Parawatch post component. If you're curious, you're free to peruse the source code here, but it essentially only serves some needed HTML and should otherwise be ignored for 99% of purposes.

There are also some additional variables I'd like to point out that you can edit at your leisure:

[[module CSS]]
:root {
--header-logo: url('[link_here]');
--header-title: '[header_here]';
--header-subtitle: '[header_subtitle]';
--page-subtitle: '[page_subtitle]';
}
[[/module]]

There are quite the number of features packed into this theme that make it a solid alternative from the base Sigma Parawatch:

1. A new style of Parawatch posts are baked into it (refer below)
2. Some additional styling that does not exist on the regular Parawatch theme
3. All the features of Basalt (if you're into that)

Outside of the obvious Parawatch connections, there are no other strings attached to this theme. Use it for any story or article you'd like. Although the theme is heavily centered around the Parawatch-like posts, you're free to not use them if you desire.

none▲ none▼ none

JakdragonX
2026-04-18 1:34PM (EST)
#002
📌
POSTS

IMPORTANT: Please read this carefully! This is a dark theme. That means very dark, contrasting colors like blue or orange may be extremely painful for eyes! Keep this in mind when using these new Parawatch posts. Don't say I didn't warn you.

---

Before diving in, it may just be easier to show you all of the customizations that are available. Note that there are, broadly, two types of configurations:

1. Special Flags
2. Settings

Take an opportunity to explore each of these before I go into how to actually use them all.

Show Full Parawatch Post Code

NOTE: If you're being lazy and copying from this block directly, please remove the leading spaces besides all of the [[include]] components AND all of the %%%% comments, otherwise things won't work.

 [[include :scp-wiki:component:parawatch-post start=--
| _conclude=
| _log=
| _censor=
| depth=
| color=
| emoji=
| username=
| date=
| postno=
| badge=
]]

[Your text goes here!]

 [[include :scp-wiki:component:parawatch-post end=--
| tags=
| upvotes=
| downvotes=
]]

none▲ none▼ none

Full Example

Code

[[include :scp-wiki:component:parawatch-post start=--
| color=lightgreen
| emoji=none
| username=JakdragonX
| date=Today
| postno=23457893
| badge=NEW
]]

Wow, this is such a neat Parawatch post, JakdragonX!

[[include :scp-wiki:component:parawatch-post end=--
| tags=none
| upvotes=9 mil
| downvotes=0
]]

Showcase

JakdragonX
Today
#23457893
none
NEW

Wow, this is such a neat Parawatch post, JakdragonX!

none▲ 9 mil▼ 0

JakdragonX
2026-04-18 1:34PM (EST)
#003
📌
POSTS

Now that you've seen the above, let's break these down into more digestible concepts. To begin, it's important to note that there are actually two systems at play here, the Parawatch Header and the Parawatch Footer. If you want your post to work, both of these need to be included first:

[[include :scp-wiki:component:parawatch-post start=--
[…]
]]

--> Here's where your cool text should go! <--

[[include :scp-wiki:component:parawatch-post end=--
[…]
]]

Between those components is where your post text should go. The […] are shorthand for the various configurations that both the header and footer are capable of. Let's get into what those look like now.

Parawatch Header

Show Special Flags

| _conclude=
| _log=
| _censor=

These are formatting flags that can change the appearance of your post. These are turned off by default. If you wish to have a specific format, repeat the flag on the opposite side of the equals sign. For example: _conclude=conclude, or _log=log.

Show Settings

| depth=
| color=
| emoji=
| username=
| date=
| postno=
| badge=

These are the various settings you'll have to specify. Some of these can be left blank depending on which toggles you enabled/disabled. Let's go through each of these:

• depth= Specifies the depth of the post. Can range from one to five. Leave this field empty if no depth is needed.
• color= Changes the primary accent color of the post. Accepts base colors, RGB, and HEX values.
• emoji= If you enabled this setting, you can add your emoji here. Use the option "none" if you don't want an emoji.
• username= The username of the Parawatch user who made the post.
• date= The date of the post made.
• postno= The post number, which appears nearby the badge.
• badge= The badge value, which could range from things like OP or ADMIN. I'd recommend keeping these as short as possible. If you doh't want a badge value, simply use "none" as the option (e.g., `badge=none`).

Parawatch Footer

Show Settings

| tags=
| upvotes=
| downvotes=

These control the contents of the footer. All of these support "none" as an option. If you use "none" for all of them, the footer will not display.

• tags= Specifies the tags underneath the post. Any space-separated values can be used here, like #tag1 #tag2 etc.
• upvotes= You can add a number here which will show in the upvotes section of the footer.
• downvotes= Same thing as the upvotes, but less happy.

Spans

If you noticed in the earlier demonstration, there were some special text fields that you can also use in this theme. These special fields can be used to "ping" someone in-universe or format a command. Here's the syntax for each of those:

[[span class="pw-mention"]]@username[[/span]]

[[span class="pw-cmd"]]/command[[/span]]

[[span class="pw-tag"]]#tag[[/span]]

As a note of advice for pw-mention, you can edit the coloring (as seen above) using the following command:

[[span class="pw-mention" style="--mention-accent: color;"]]@user[[/span]]

There are also some other fun little spans and things of use on this theme, like custom tables.

Additional Spans

To use the breadcrumbs seen above, try:

[[span class="pw-path"]]
[[span class="pw-path-seg"]]CRUMB_1[[/span]]
[[span class="pw-arr"]]▶[[/span]]
[[span class="pw-path-seg"]]CRUMB_2[[/span]]
[[span class="pw-arr"]]▶[[/span]]
[[span class="pw-path-seg"]]CRUMB_3[[/span]]
[[span class="pw-arr"]]▶[[/span]]
[[span class="pw-path-seg active"]]etc.[[/span]]
[[/span]]

Additional Tables

Table Template 1

[[table class="pw-table"]]
[[row class="pw-row-head"]][[cell]]Field[[/cell]][[cell]]Value[[/cell]][[/row]]
[[row]][[cell class="pw-cell-key"]]content-here[[/cell]][[cell]]content-here-1[[/cell]][[/row]]
[[row]][[cell class="pw-cell-key"]]content-here-2[[/cell]][[cell class="pw-cell-red"]]content-here-3[[/cell]][[/row]]
[[row]][[cell class="pw-cell-key"]]content-here-4[[/cell]][[cell]]content-here-5[[/cell]][[/row]]
[[row]][[cell class="pw-cell-key"]]content-here-6[[/cell]][[cell]][[span class="pw-redacted"]]content-here-7[[/span]][[/cell]][[/row]]
[[row]][[cell class="pw-cell-key"]]content-here-8[[/cell]][[cell]][[span class="pw-status-open"]]content-here-9[[/span]][[/cell]][[/row]]
[[/table]]

Example Table 1

Field	Value
content-here	content-here-1
content-here-2	content-here-3
content-here-4	content-here-5
content-here-6	content-here-7
content-here-8	content-here-9

Table Template 2

[[table class="pw-table"]]
[[row class="pw-row-head"]][[cell]]content-here-1[[/cell]][[cell]]content-here-2[[/cell]][[cell]]content-here-3[[/cell]][[cell]]content-here-4[[/cell]][[/row]]
[[row]][[cell class="pw-cell-dim"]]content-here-5[[/cell]][[cell class="pw-cell-bright"]]content-here-6[[/cell]][[cell]]content-here-7[[/cell]][[cell]]content-here-8[[/cell]][[/row]]
[[row class="pw-row-alert"]][[cell class="pw-cell-dim"]]content-here-9[[/cell]][[cell class="pw-cell-bright"]]content-here-10[[/cell]][[cell class="pw-cell-amber"]]content-here-11[[/cell]][[cell]]content-here-12[[/cell]][[/row]]
[[row]][[cell class="pw-cell-dim"]]content-here-13[[/cell]][[cell class="pw-cell-bright"]][[span class="pw-redacted"]]content-here-14[[/span]][[/cell]][[cell class="pw-cell-red"]]content-here-15[[/cell]][[cell]]content-here-16[[/cell]][[/row]]
[[/table]]

Example Table 2

content-here-1	content-here-2	content-here-3	content-here-4
content-here-5	content-here-6	content-here-7	content-here-8
content-here-9	content-here-10	content-here-11	content-here-12
content-here-13	content-here-14	content-here-15	content-here-16

none▲ none▼ none

JakdragonX
2026-04-18 1:36PM (EST)
#003
📌
EXAMPLE

Examples

If you're curious about what looks different inside the Parawatch posts, refer to the below examples:

A link you probably visited once, idk

Titles can be created by putting between one and six plus "+" at the start of the line

Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

Why was the shovel so special?

Because it was a groundbreaking invention

Tabulation

More text.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab right here has a really long name.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

This is a	table
You should know	how to make these
already

none▲ none▼ none

---

Base Theme Examples

Enlightened Eyes Logo, made by JakdragonX

I am SICK of the "a horizonal rule can be created with 5 hyphens" lies. You only need 4! Not 5! Every theme seems to copy this same LIE and spreading it across the Wiki! It's a scam, a government scheme, a ploy to take over from the INSIDE OUT!

This is a link by the way. Click it and come back, it does a cool thing called "changing colors."

Oh and titles? Who cares about titles?

Titles

Oh, I guess you like titles. Freak.

Title 1

Title 2 (But smaller)

Title 3 (Are you getting the picture?)

Title 4 (Stop it, you're scaring me).

Title 5 (I can't give you anymore.)

Title 6 (Not even Satan could tolerate this level of greed.)

Tabulator

Why was the shovel so special?

Because it was a groundbreaking invention

Tabulation

I was going to make another joke here, but I forgot it.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab right here has a really long name.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

What are you doing, can't you see there's nothing here? What geek decides to check the last "EMPTY TAB" of a random theme page?

This is a blockquote. If you use ">" to type blockquotes, you will be ignored by me personally.

---

Do you see that horizontal rule above? Guess what, four "-"! Not five!

I'm running out of things to say here.

This is a	table
You should know	how to make these
already

The body font is Red Hat Text.
The header font is Reddit Mono.
The monospace font is Fragment Mono.
The UI font is Space Mono.

‡ Licensing / Citation

Cite this page as:

"Enlightened Eyes Theme" by JakdragonX, from the SCP Wiki. Source: https://scpwiki.com/theme:enlightened-eyes. Licensed under CC BY-SA.

For information on how to use this component, see the License Box component. To read about licensing policy, see the Licensing Guide.

Filename: blinded_rook.png
Link: https://scp-wiki.wikidot.com/local--files/theme:enlightened-eyes/local--files/blinded_rook.png
Name: Blinded Rook Logo
Author: JakdragonX
License: Creative Commons Attribution-Share Alike 4.0 International

Filename: turbines.jpg
Link: https://commons.wikimedia.org/wiki/File:Tenerife_desert_wind_turbines_2.jpg
Name: Tenerife desert wind turbines 2.jpg
Author: ArticCynda
License: Creative Commons Attribution-Share Alike 4.0 International

Show CSS Code

@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: "parawatch";
    --header-subtitle: "ABNORMAL OBSERVATIONS NETWORK";
    --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));
}