MediaWiki:Common.css: Difference between revisions

Line 1:

/* ============================================================

/*

~~WEBCORE SKIN~~ — ~~Preview App Styles~~

* ============================================================

MS Paint Sidebar × Dark ~~Net × Y2K Neon~~

* MediaWiki:Common.css — Webcore Skin

============================================================ */

* "Static Dream" Edition

* Aesthetic: Webcore / Dark Net / MS-Paint Sidebar / Y2K Digital

*

* COLOR PALETTE:

* Void Black #0a0a1a Deep Navy #0d0d2b

* Cyber Cyan #00e5ff Hot Magenta #ff00cc

* Lime Signal #39ff14 Purple Glow #8b00ff

* Pixel White #e8e8f0 Faded Gray #888899

* Paint Gray #c0c0c0 Bevel Light #f0f0f0

* Bevel Dark #808080 Bevel Shad #404040

* ============================================================

*/

/* ~~── Google Fonts fallback ── */~~

/* ══════════════════════════════════════════════

~~@import url~~(~~'https://fonts.googleapis.com~~/~~css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;700&display=swap');~~

FONT FACES (all preserved from original)

══════════════════════════════════════════════ */

/* ── CSS Variables (~~webcore palette~~) ── */

@font-face {

:~~root~~ {

font-family: "Brown Soda";

--wc-~~void~~: ~~#0a0a1a~~;

src: url("https://static.wikitide.net/thecolorversewikiwiki/a/ad/Brown_Soda.woff2") format("woff2");

--wc-~~navy~~: ~~#0d0d2b~~;

}

--wc-~~deep~~: ~~#12122a~~;

@font-face {

--wc-~~panel~~: ~~#1a1a3a~~;

font-family: "Chunky Playful";

--wc-~~surface~~: ~~#1e1e40~~;

src: url("https://static.wikitide.net/thecolorversewikiwiki/0/04/Chunky_Playful.woff2") format("woff2");

}

@font-face {

font-family: "Destroy All Humans";

src: url("https://static.wikitide.net/thecolorversewikiwiki/a/ab/Destroy_All_Humans%21.woff2") format("woff2");

}

@font-face {

font-family: "Fried Salmon";

src: url("https://static.wikitide.net/thecolorversewikiwiki/0/0a/Fried_Salmon.woff2") format("woff2");

}

@font-face {

font-family: "Geronie";

src: url("https://static.wikitide.net/thecolorversewikiwiki/f/f9/Geronie.woff2") format("woff2");

}

@font-face {

font-family: "Ginger Lemon";

src: url("https://static.wikitide.net/thecolorversewikiwiki/d/d8/Ginger_Lemon.woff2") format("woff2");

}

@font-face {

font-family: "Junk Journal";

src: url("https://static.wikitide.net/thecolorversewikiwiki/4/42/JunkJournal.woff2") format("woff2");

}

@font-face {

font-family: "Los Angeles Games Corp";

src: url("https://static.wikitide.net/thecolorversewikiwiki/8/82/Los_Angeles_Games_Corp.woff2") format("woff2");

}

@font-face {

font-family: "Mexican Brotherhood Black";

src: url("https://static.wikitide.net/thecolorversewikiwiki/e/e6/Mexican_Brotherhood_Black.woff2") format("woff2");

}

@font-face {

font-family: "Mexican Brotherhood";

src: url("https://static.wikitide.net/thecolorversewikiwiki/9/9d/Mexican_Brotherhood.woff2") format("woff2");

}

@font-face {

font-family: "Snake Dynasty";

src: url("https://static.wikitide.net/thecolorversewikiwiki/0/04/Snake_Dynasty_PERSONAL_USE_ONLY%21.woff2") format("woff2");

}

@font-face {

font-family: "Super Mindset";

src: url("https://static.wikitide.net/thecolorversewikiwiki/2/29/Super_Mindset.woff2") format("woff2");

}

@font-face {

font-family: "Wolfsschanze Typewriter";

src: url("https://static.wikitide.net/thecolorversewikiwiki/3/39/Zai_WolfsschanzeTypewriter.woff2") format("woff2");

}

@font-face {

font-family: "Press Start 2P";

src: url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/f389091962d8dab9ec69c5060e2e023c.ttf") format("truetype");

}

@font-face {

font-family: "Swirly";

src: url("https://db.onlinewebfonts.com/t/bd71933179f56c6bcf2c83b7c04f8d77.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/bd71933179f56c6bcf2c83b7c04f8d77.woff") format("woff");

}

@font-face {

font-family: "Starborn";

src: url("https://db.onlinewebfonts.com/t/2afe16b4e1a977f13d988de8a968ae7c.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/2afe16b4e1a977f13d988de8a968ae7c.woff") format("woff");

}

@font-face {

font-family: "Chubby Dinosaur";

src: url("https://db.onlinewebfonts.com/t/1829fc7df3de0550e788bb5a1c77d629.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/1829fc7df3de0550e788bb5a1c77d629.woff") format("woff");

}

@font-face {

font-family: "PALO SANTO";

src: url("https://db.onlinewebfonts.com/t/869b211906a05f17a5de372702e426c4.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/869b211906a05f17a5de372702e426c4.woff") format("woff");

}

@font-face {

font-family: "Fredoka";

src: url("https://db.onlinewebfonts.com/t/0ca2ea96737ff1b488509e1c766d1048.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/0ca2ea96737ff1b488509e1c766d1048.woff") format("woff");

}

@font-face {

font-family: "Bubble Rainbow";

src: url("https://db.onlinewebfonts.com/t/0a392c97a01e18e13d96803790f6e932.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/0a392c97a01e18e13d96803790f6e932.woff") format("woff");

}

@font-face {

font-family: "Coloring Book";

src: url("https://db.onlinewebfonts.com/t/641e0f8bd0605f304a44d576877a26a2.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/641e0f8bd0605f304a44d576877a26a2.woff") format("woff");

}

@font-face {

font-family: "LEMON MILK";

src: url("https://db.onlinewebfonts.com/t/499e6a9eb2ee00ca390df83c1a1b9e47.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/499e6a9eb2ee00ca390df83c1a1b9e47.woff") format("woff");

}

@font-face {

font-family: "Card Characters";

src: url("https://db.onlinewebfonts.com/t/49290f9700f67192ec91550680336dad.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/49290f9700f67192ec91550680336dad.woff") format("woff");

}

@font-face {

font-family: "Roblox 2017";

src: url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/b2582567749a201b8c641993b51ed625.ttf") format("truetype");

}

@font-face {

font-family: "threed";

src: url("https://db.onlinewebfonts.com/t/3c214437d87e656fa363c6bf5e1bb436.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/3c214437d87e656fa363c6bf5e1bb436.woff") format("woff");

}

@font-face {

font-family: "Joystix";

src: url("https://db.onlinewebfonts.com/t/a17af96c10647b3403e18a0e94283536.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/a17af96c10647b3403e18a0e94283536.woff") format("woff");

}

@font-face {

font-family: "F395 equalizer 2";

src: url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/8e4b5512463a289b7a24aac91ee1ee91.ttf") format("truetype");

}

@font-face {

font-family: "ToxigenesisRg-Bold";

src: url("https://db.onlinewebfonts.com/t/b8b034ea1980e6988cc1106f1aae25cb.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/b8b034ea1980e6988cc1106f1aae25cb.woff") format("woff");

}

@font-face {

font-family: "Billie Eilish";

src: url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/081005bf0ec7a25a812a8e39420a477c.ttf") format("truetype");

}

@font-face {

font-family: "Game Paused DEMO";

src: url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/b2de16ea5a7f724666be86b32649f518.ttf") format("truetype");

}

@font-face {

font-family: "Fake Receipt";

src: url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/6bc5fc6bc1dc19f53b824811a448355a.ttf") format("truetype");

}

@font-face {

font-family: "iDroid S";

src: url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/16c3e1876ccccf317c091e4df90ed205.ttf") format("truetype");

}

@font-face {

font-family: "Poxast";

src: url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/681822ee831ebd2565c8d52eca2af768.ttf") format("truetype");

}

@font-face {

font-family: "Subway Ticker";

src: url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/7dc316626726a6192011df8351950103.ttf") format("truetype");

}

@font-face {

font-family: "Senor Saturno V1";

src: url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/c6ae7c2426a9df2a7e51da2f455bb68a.ttf") format("truetype");

}

@font-face {

font-family: "Academy Regular";

src: url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/4b1d0ee8fbe9a000f04e17038f7baa99.ttf") format("truetype");

}

@font-face {

font-family: "PixelFlag Regular";

src: url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/8e377f1e5376f3ebebefb674e2449aa5.ttf") format("truetype");

}

@font-face {

font-family: "F14 Segment LED";

src: url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/303e245ee7159b39227d219e4f19dfbc.ttf") format("truetype");

}

@font-face {

font-family: "TesseraTopaz8x16";

src: url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/f17d7184beb7967ffffdac2db2be3252.ttf") format("truetype");

}

@font-face {

font-family: "Crewniverse";

src: url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.woff2") format("woff2"),

url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.woff") format("woff"),

url("https://db.onlinewebfonts.com/t/9c3b9b699ec505de691a9184317793d8.ttf") format("truetype");

}

~~--wc-cyan: #00e5ff;~~

/* ══════════════════════════════════════════════

~~--wc-cyan-dim~~: ~~#00aabb;~~

SECTION 1: CSS CUSTOM PROPERTIES — WEBCORE PALETTE

~~--wc-cyan-glow: rgba(0, 229, 255, 0.30);~~

══════════════════════════════════════════════ */

--wc-~~magenta~~: #~~ff00cc~~;

:root {

--wc-~~magenta~~-~~dim~~: #~~bb0099~~;

/* ── WEBCORE CORE PALETTE ── */

--wc-~~magenta~~-~~glow~~: ~~rgba(255, 0, 204, 0.28)~~;

--wc-void: #0a0a1a;

--wc-navy: #0d0d2b;

--wc-deep: #12122a;

--wc-panel: #1a1a3a;

--wc-surface: #1e1e40;

--wc-~~lime~~: #~~39ff14~~;

--wc-cyan: #00e5ff;

--wc-~~lime~~-dim: #~~22cc00~~;

--wc-cyan-dim: #00aabb;

--wc-~~lime~~-glow: rgba(57, 255~~, 20~~, 0.28);

--wc-cyan-pale: #00e5ff22;

--wc-cyan-glow: rgba(0, 229, 255, 0.30);

--wc-~~purple~~: #~~8b00ff~~;

--wc-magenta: #ff00cc;

--wc-~~purple~~-~~dim~~: #~~6600cc~~;

--wc-magenta-dim: #bb0099;

--wc-~~purple~~-glow: rgba(~~139~~, 0, ~~255~~, 0.30);

--wc-magenta-pale: #ff00cc1a;

--wc-magenta-glow: rgba(255, 0, 204, 0.28);

--wc-~~pixel~~-~~white~~: #~~e8e8f0~~;

--wc-lime: #39ff14;

--wc-~~pixel~~-~~gray~~: #~~888899~~;

--wc-lime-dim: #22cc00;

--wc-lime-pale: #39ff1415;

--wc-lime-glow: rgba(57, 255, 20, 0.28);

--~~paint~~-bg: #~~c0c0c0~~;

--wc-purple: #8b00ff;

--~~paint~~-~~light: #f0f0f0;~~

--wc-purple-dim: #6600cc;

-~~-paint-mid~~: #~~c0c0c0~~;

--wc-purple-pale: #8b00ff1a;

--~~paint~~-~~dark: #808080;~~

--wc-purple-glow: rgba(139, 0, 255, 0.30);

--~~paint-shadow~~: ~~#404040;~~

~~--paint-text:~~ #~~000000~~;

~~--paint-select:~~ ~~#000080;~~

--~~paint~~-~~select~~-~~txt~~: ~~#ffffff~~;

--wc-~~glow~~-~~cyan~~: ~~0 0 8px rgba(0,229,255,0.8), 0 0 24px rgba(0,229,255,0.4);~~

--wc-pixel-white: #e8e8f0;

~~--wc-glow-magenta: 0 0 8px rgba(255,0,204,0.8), 0 0 24px rgba(255,0,204,0.4)~~;

--wc-pixel-gray: #888899;

--wc-~~glow~~-~~lime~~: ~~0 0 8px rgba(57,255,20,0.8), 0 0 24px rgba(57,255,20,0.4)~~;

--wc-pixel-dim: #444466;

--wc-~~glow~~-~~purple~~: ~~0 0 8px rgba(139,0,255,0.8), 0 0 24px rgba(139,0,255,0.4)~~;

--wc-~~pixel~~: ~~'Press Start 2P', monospace~~;

/* ── MS PAINT BEVEL COLORS ── */

--wc-~~body~~: ~~'Fredoka', 'Nunito', Verdana, sans~~-~~serif~~;

--paint-bg: #c0c0c0;

--wc-~~mono~~: ~~'Courier New', monospace~~;

--paint-light: #f0f0f0;

--paint-mid: #c0c0c0;

--paint-dark: #808080;

--paint-shadow: #404040;

--paint-text: #000000;

--paint-select: #000080;

--paint-select-txt: #ffffff;

--wc-~~radius~~: ~~12px~~;

/* ── EXISTING WIKI VARS — remapped to webcore palette ── */

--wc-~~radius~~-sm: ~~8px~~;

--sidebarBg: var(--wc-panel);

--wc-~~radius~~-~~pill~~:~~999px~~;

--inactiveTabBg: var(--wc-deep);

}

--inactiveTabHoverBg: var(--wc-surface);

--searchInputBg: var(--wc-void);

--searchBtnBg: var(--wc-cyan-pale);

--searchBtnHoverBg: var(--wc-magenta-pale);

--frameContentBg: var(--wc-panel);

--galleryBoxBg: var(--wc-deep);

--quoteBg: var(--wc-surface);

--textColor: var(--wc-pixel-white);

--sidebarText: var(--wc-pixel-white);

--hrColor: var(--wc-cyan);

--activeTabberColor: var(--wc-magenta);

--inactiveTabberColor: var(--wc-cyan-dim);

--successfulEditText: var(--wc-lime);

--notifText: var(--wc-pixel-white);

--recentChangesGreen: var(--wc-lime);

--recentChangesRed: var(--wc-magenta);

--linkColor: var(--wc-cyan);

--externalColor: #00ccff;

--newColor: var(--wc-magenta);

--newVisitedColor: var(--wc-magenta-dim);

--discussTabColor: var(--wc-magenta);

--tabColor: var(--wc-cyan-dim);

--sidebarColor: var(--wc-cyan);

--background-image: url("https://static.miraheze.org/thecolorversewikiwiki/2/26/Background.png");

--bgImg: url("https://static.miraheze.org/thecolorversewikiwiki/2/26/Background.png");

--sidebarImg1: url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");

--sidebarImg2: url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");

--sidebarImg3: url("https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png");

--galleryBoxImg: url(https://static.miraheze.org/thecolorversewikiwiki/c/cd/Boxy_Box.png) 40 / 40px round;

/* ── ~~Base~~ ── */

/* ── WEBCORE THEME DERIVED VARS ── */

*, *::~~before~~, *::after { box-~~sizing~~: ~~border-box~~; }

--wc-glow-cyan: 0 0 8px rgba(0,229,255,0.8), 0 0 24px rgba(0,229,255,0.4);

--wc-glow-magenta: 0 0 8px rgba(255,0,204,0.8), 0 0 24px rgba(255,0,204,0.4);

--wc-glow-lime: 0 0 8px rgba(57,255,20,0.8), 0 0 24px rgba(57,255,20,0.4);

--wc-glow-purple: 0 0 8px rgba(139,0,255,0.8), 0 0 24px rgba(139,0,255,0.4);

~~body {~~

/* Typography */

~~margin: 0;~~

--wc-body: 'Fredoka', 'Nunito', Verdana, sans-serif;

~~padding: 0;~~

--wc-display: 'LEMON MILK', 'Fredoka', Verdana, sans-serif;

~~background-color: var(~~--wc-~~void);~~

--wc-pixel: 'Press Start 2P', 'Joystix', monospace;

~~background-image~~:

--wc-mono: 'F14 Segment LED', 'Subway Ticker', 'Fake Receipt', monospace;

~~repeating-linear-gradient(0deg~~, ~~transparent~~, ~~transparent 2px, rgba(0,229,255,0.012) 2px, rgba(0,229,255,0.012) 4px)~~,

--wc-handscript: 'Ginger Lemon', cursive;

~~repeating~~-~~linear~~-~~gradient(90deg~~, ~~transparent~~, ~~transparent 32px, rgba(139,0,255,0.04) 32px, rgba(139,0,255,0.04) 33px)~~,

~~repeating~~-~~linear~~-~~gradient(0deg, transparent, transparent 32px, rgba(139,0,255,0.04) 32px, rgba(139,0,255,0.04) 33px),~~

~~linear~~-~~gradient(180deg~~, ~~#0a0a1a 0%~~, ~~#0d0d2b 100%)~~;

~~color: var(~~--wc-~~pixel-white)~~;

~~font-family: var(~~--wc-~~body);~~

~~min-height~~: ~~100vh~~;

~~overflow-x: hidden;~~

}

/* ~~── App root ──~~ */

/* Layout */

.wc-~~app-root {~~

--wc-radius: 12px;

~~display~~: ~~flex~~;

--wc-radius-sm: 8px;

~~flex~~-~~direction~~: ~~column~~;

--wc-radius-xs: 4px;

~~min~~-~~height~~: ~~100vh~~;

--wc-radius-pill: 999px;

~~position: relative~~;

}

/* ~~── Floating noise layer ──~~ */

/* Paint bevel border widths */

~~.wc~~-~~noise~~-~~layer {~~

--paint-bevel: 2px;

~~position: fixed;~~

~~inset: 0;~~

~~pointer~~-~~events~~: ~~none;~~

~~z-index: 0;~~

~~background-image:~~

~~radial-gradient(circle 2px at 15% 20%, rgba(0,229,255,0.20) 0%, transparent 100%),~~

~~radial-gradient(circle 1px at 72% 8%, rgba(255,0,204,0.18) 0%, transparent 100%),~~

~~radial-gradient(circle 2px at 88% 35%, rgba(57,255,20,0.15) 0%, transparent 100%),~~

~~radial-gradient(circle 1px at 5% 65%, rgba(139,0,255,0.20) 0%, transparent 100%),~~

~~radial-gradient(circle~~ 2px ~~at 50% 90%, rgba(0,229,255,0.15) 0%, transparent 100%)~~;

}

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~TOP BAR~~ — ~~MS Paint menu bar~~

SECTION 2: BODY & BACKGROUND — WEBCORE VOID

~~══════════════════════════════════════════~~ */

══════════════════════════════════════════════ */

~~.wc-topbar~~ {

html {

~~display~~: ~~flex~~;

background-color: var(--wc-void);

~~align~~-~~items~~: ~~center;~~

background-image:

~~justify~~-~~content: space~~-~~between;~~

/* Scanline overlay */

~~padding:~~ 2px ~~6px;~~

repeating-linear-gradient(

~~background:~~ linear-gradient(~~180deg~~, ~~var~~(~~--paint-light~~) 0%, ~~var(~~--~~paint-mid~~) ~~60%~~, ~~var~~(~~--paint-dark~~) ~~100%~~);

0deg,

~~border~~-~~bottom: 3px solid var~~(~~--wc-cyan);~~

transparent,

~~box-shadow: 0 3px 20px~~ rgba(0,~~229~~,255,0.4);

transparent 2px,

~~position: relative;~~

rgba(0, 229, 255, 0.015) 2px,

z-~~index:~~ 100;

rgba(0, 229, 255, 0.015) 4px

~~user-select: none~~;

),

/* Pixel grid */

repeating-linear-gradient(

90deg,

transparent,

transparent 16px,

rgba(139, 0, 255, 0.06) 16px,

rgba(139, 0, 255, 0.06) 17px

),

repeating-linear-gradient(

0deg,

transparent,

transparent 16px,

rgba(139, 0, 255, 0.06) 16px,

rgba(139, 0, 255, 0.06) 17px

),

/* Cyber diagonal streaks */

repeating-linear-gradient(

62deg,

transparent,

transparent 60px,

rgba(255, 0, 204, 0.03) 60px,

rgba(255, 0, 204, 0.03) 62px

),

/* Deep void gradient */

linear-gradient(180deg, #0a0a1a 0%, #0d0d2b 40%, #0a0a1a 100%);

}

~~.wc-topbar-title~~ {

/* Floating pixel noise overlay */

~~display~~: ~~flex~~;

html::before {

~~align~~-~~items: center~~;

content: '✦ ◆ ✧ ◇ ★ ✦ ◆ ✧ ◇';

~~gap~~: ~~8px~~;

position: fixed;

font-~~family~~: ~~var~~(--wc-pixel);

top: -20px;

~~font~~-~~size~~: ~~7px~~;

left: 5%;

~~color~~: ~~var(--paint-text)~~;

font-size: 10px;

~~letter~~-~~spacing~~: ~~0.04em~~;

color: rgba(0, 229, 255, 0.25);

writing-mode: vertical-rl;

letter-spacing: 50px;

animation: wc-pixel-drift 22s linear infinite;

pointer-events: none;

z-index: 9999;

user-select: none;

}

.wc-~~topbar~~-~~icon {~~

/* Second column of drifting symbols on the right */

~~font~~-~~size~~: ~~14px~~;

html::after {

content: '◈ ✦ ◆ ✧ ◈ ★ ◆ ✦ ◇';

position: fixed;

top: -20px;

right: 3%;

font-size: 10px;

color: rgba(255, 0, 204, 0.20);

writing-mode: vertical-rl;

letter-spacing: 50px;

animation: wc-pixel-drift 28s linear infinite 6s;

pointer-events: none;

z-index: 9999;

user-select: none;

}

.wc-~~topbar~~-~~version~~ {

@keyframes wc-pixel-drift {

~~background~~: ~~var~~(-~~-paint-select~~);

0% { transform: translateY(-40px); opacity: 0; }

~~color~~: ~~white~~;

5% { opacity: 1; }

~~padding~~: ~~1px 5px~~;

90% { opacity: 0.7; }

~~font-size~~: ~~5px~~;

100% { transform: translateY(100vh); opacity: 0; }

~~font-family~~: ~~var~~(~~--wc-pixel~~);

~~letter-spacing~~: 0~~.06em;~~

~~box-shadow: 0 0 6px rgba(0,229,255,0.4)~~;

}

.wc-~~topbar~~-~~menu {~~

body {

~~display: flex~~;

background: transparent;

~~gap~~: ~~2px~~;

color: var(--wc-pixel-white);

font-family: var(--wc-body);

}

~~.wc~~-~~menu~~-~~btn~~ {

#mw-content-block {

background: transparent;

~~border~~: ~~none~~;

position: relative;

~~font~~-~~family~~: ~~var(--wc-pixel);~~

z-index: 1;

~~font-size: 7px;~~

~~color: var(--paint-text);~~

~~padding: 4px 10px;~~

~~cursor: pointer;~~

~~transition: background 0.05s;~~

~~letter-spacing: 0.02em;~~

}

~~.wc-menu-btn:hover {~~

~~background: var(--paint-select);~~

~~color: white~~;

}

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

TOOLBAR ~~STRIP —~~ MS Paint ~~tools row~~

SECTION 3: NAVBAR / DROPDOWN — PAINT TOOLBAR STYLE

~~══════════════════════════════════════════~~ */

Mimics the MS Paint top toolbar: gray beveled bar

with pixel-text labels, inset/raised button effects

══════════════════════════════════════════════ */

.~~wc-toolbar~~-~~strip~~ {

.wiki-navbar {

display: flex;

align-items: center;

flex-wrap: wrap;

~~padding~~: ~~3px 6px~~;

align-items: center;

~~gap~~: 4px;

list-style: none;

background: var(--paint-mid);

margin: 0;

border-~~bottom~~: 2px solid var(--paint-~~dark~~);

padding: 2px 4px;

border-~~top~~: ~~1px~~ solid var(--paint-~~light~~);

/* MS Paint toolbar: raised gray bevel */

position: relative;

background: linear-gradient(180deg, var(--paint-light) 0%, var(--paint-mid) 60%, var(--paint-dark) 100%);

z-index: 99;

border-top: 2px solid var(--paint-light);

box-shadow: 0 ~~2px 10px~~ rgba(0,229,255,0.15);

border-left: 2px solid var(--paint-light);

border-right: 2px solid var(--paint-shadow);

border-bottom: 2px solid var(--paint-shadow);

font-family: var(--wc-pixel);

font-size: 7px;

position: relative;

z-index: 100;

/* Neon underline — webcore signature */

box-shadow:

0 3px 0 var(--wc-cyan),

0 4px 20px rgba(0, 229, 255, 0.5);

}

.wc-~~toolbar~~-~~group~~ {

.dropdown-label,

display: ~~flex~~;

.dropdown-label a {

~~gap~~: 2px;

display: block;

padding: 5px 12px;

color: var(--paint-text);

text-decoration: none;

cursor: pointer;

white-space: nowrap;

transition: background 0.05s ease;

user-select: none;

font-family: var(--wc-pixel);

font-size: 7px;

letter-spacing: 0.02em;

background: transparent;

/* Raised bevel on each nav item */

border-top: 1px solid var(--paint-light);

border-left: 1px solid var(--paint-light);

border-right: 1px solid var(--paint-dark);

border-bottom:1px solid var(--paint-dark);

margin: 2px 1px;

}

.wc-~~tool-btn {~~

.dropdown-label::after {

~~background~~: ~~var(--paint-mid);~~

content: " ▾";

~~border-top~~: ~~2px solid var(--paint-light);~~

font-size: 0.8em;

~~border-left: 2px solid var(--paint-light);~~

color: var(--paint-shadow);

~~border-right: 2px solid var(--paint-shadow);~~

~~border-bottom:2px solid var(--paint-shadow);~~

~~width: 24px;~~

~~height: 22px;~~

~~display: flex;~~

~~align-items: center;~~

~~justify-~~content: ~~center~~;

font-size: ~~11px;~~

~~cursor: pointer;~~

~~transition: all~~ 0.~~05s~~;

~~font-family: var(--wc-pixel);~~

color: var(--paint~~-text);~~

~~font-weight: bold;~~

}

~~.wc-tool-btn:hover {~~

~~background: var(--paint-light);~~

~~box~~-shadow~~: 0 0 6px rgba(0,229,255,0.4);~~

}

~~.wc-tool-btn:active {~~

~~border-top: 2px solid var(--paint-shadow);~~

~~border-left: 2px solid var(--paint-shadow);~~

~~border-right: 2px solid var(--paint-light);~~

~~border-bottom:2px solid var(--paint-light);~~

~~background: var(--paint-mid~~);

}

.wc-~~toolbar~~-~~sep~~ {

/* When open: inset look (pressed) */

~~width~~: ~~2px~~;

.dropdown-menu-item.dropdown-open > .dropdown-label,

~~height: 22px~~;

.dropdown-menu-item.dropdown-open > .dropdown-label a {

~~background~~: var(--paint-~~dark~~);

background: var(--paint-mid);

~~margin~~: ~~0 3px~~;

border-top: 1px solid var(--paint-shadow);

~~box~~-~~shadow~~: 1px ~~0 0~~ var(--paint-light);

border-left: 1px solid var(--paint-shadow);

border-right: 1px solid var(--paint-light);

border-bottom:1px solid var(--paint-light);

color: var(--paint-text);

}

.wc-~~tab-strip~~ {

.dropdown-content {

display: ~~flex~~;

display: none;

~~gap~~: 2px;

position: absolute;

margin-~~left~~: ~~6px~~;

top: 100%;

left: 0;

min-width: 200px;

background: var(--paint-mid);

border-top: 2px solid var(--paint-light);

border-left: 2px solid var(--paint-light);

border-right: 2px solid var(--paint-shadow);

border-bottom:2px solid var(--paint-shadow);

list-style: none;

margin: 0;

padding: 2px 0;

z-index: 200;

box-shadow:

2px 2px 0 var(--paint-shadow),

/* Neon glow on dropdown opening */

0 8px 30px rgba(0, 229, 255, 0.25);

animation: wc-dropdown-in 0.08s ease;

}

.wc-~~tab~~-~~btn {~~

.dropdown-menu-item.dropdown-open .dropdown-content { display: block; }

~~background: var(--paint-mid);~~

~~border-top: 2px solid var(--paint-light);~~

~~border-left: 2px solid var(--paint-light);~~

~~border-right: 2px solid var(--paint-shadow);~~

~~border-bottom:2px solid transparent;~~

~~padding: 4px 12px;~~

~~font-family: var(--wc-pixel);~~

~~font-size: 6px;~~

~~color: var(--paint-text);~~

~~cursor: pointer;~~

~~letter-spacing: 0.04em;~~

~~transition: all 0.05s;~~

~~white-space: nowrap;~~

}

.~~wc-tab-btn:hover:not(.wc-tab-active) {~~

~~background: var(--paint-light);~~

~~box~~-~~shadow: 0 0 6px rgba(0,229,255,0~~.~~3);~~

}

~~.wc~~-~~tab-active~~ {

~~background: var(--paint-select) !important;~~

~~color~~: ~~white !important;~~

~~border-top: 2px solid var(--paint-shadow) !important;~~

~~border-left: 2px solid var(--paint-shadow) !important;~~

~~border-right: 2px solid var(--paint-light) !important;~~

~~border-bottom:2px solid transparent !important;~~

~~box-shadow: 0 0 10px rgba(0,229,255,0.5) !important~~;

}

~~/* ── Status bar (under toolbar) ── */~~

@keyframes wc-dropdown-in {

.wc-~~statusbar~~ {

from { opacity: 0; transform: translateY(-4px); }

~~display~~: ~~flex;~~

to { opacity: 1; transform: translateY(0); }

~~align-items: center;~~

~~padding: 2px 6px~~;

~~background~~: ~~var~~(-~~-paint-mid~~);

~~border-bottom~~: ~~2px solid var(--paint-shadow)~~;

~~border-top~~: ~~1px solid var~~(~~--paint-light~~);

~~gap: 0;~~

~~position: relative;~~

~~z-index: 98;~~

}

.~~wc-status~~-~~cell~~ {

.dropdown-content li a {

~~font-family~~: ~~var(--wc-pixel)~~;

display: block;

~~font-size~~: 5.5px;

padding: 5px 14px;

color: var(--paint-text);

~~padding~~: ~~2px 8px~~;

text-decoration: none;

~~border~~-~~top~~: ~~1px solid~~ var(--~~paint~~-~~shadow~~);

font-family: var(--wc-pixel);

~~border~~-~~left~~: ~~1px solid var(--paint-shadow)~~;

font-size: 7px;

~~border~~-~~right~~: ~~1px solid var(--paint-light)~~;

white-space: nowrap;

~~border-bottom~~:~~1px solid var(--paint-light)~~;

transition: background 0.05s ease;

letter-spacing: 0.~~04em~~;

letter-spacing: 0.02em;

}

.wc-~~status-sep~~ {

.dropdown-content li a:hover {

~~width: 2px;~~

background: var(--paint-select);

~~height: 16px;~~

color: var(--paint-select-txt);

background: var(--paint-~~dark~~);

~~margin~~: 0;

}

.wc-~~status~~-~~blink {~~

.dropdown-heading {

color: var(--wc-~~lime~~);

display: block;

~~animation~~: wc-pixel-~~blink 1s step~~-~~end infinite~~;

padding: 5px 14px 3px;

font-size: 6px;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 0.08em;

color: var(--paint-shadow);

cursor: default;

font-family: var(--wc-pixel);

border-bottom: 1px solid var(--paint-dark);

margin-bottom: 2px;

}

~~/* ══════════════════════════════════════════~~

.dropdown-divider hr {

~~WORKSPACE LAYOUT~~

margin: 2px 8px;

~~══════════════════════════════════════════ */~~

border: none;

border-top: 1px solid var(--paint-dark);

.wc-~~workspace~~ {

~~display~~: ~~flex~~;

~~flex~~: 1;

~~gap~~: 0;

~~position: relative;~~

z-~~index: 1;~~

~~min~~-~~height: 0~~;

}

~~/* ══════════════════════════════════════════~~

@media (max-width: 719px) {

~~SIDEBAR — MS Paint tool panel~~

.wiki-navbar { flex-direction: column; align-items: stretch; }

~~══════════════════════════════════════════ */~~

.dropdown-content {

position: static;

~~.wc-sidebar {~~

box-shadow: none;

~~width: 220px;~~

border-left: 4px solid var(--wc-cyan);

~~min~~-width: ~~220px;~~

}

~~flex-shrink: 0;~~

~~background: var(--paint-mid~~);

~~border~~-~~top: 3px solid var(--paint-light);~~

~~border-left: 3px solid var(--paint-light);~~

~~border-right: 3px solid var(--paint-shadow);~~

~~border-bottom:3px solid var(--paint-shadow);~~

~~padding: 0;~~

~~display: flex;~~

flex-direction: column;

~~gap~~: 0;

~~overflow~~-~~y: auto;~~

position: ~~relative~~;

box-shadow:

~~2px 0 0 var(~~-~~-paint-shadow),~~

~~0 0 0 1px~~ var(--wc-~~void~~),

~~4px 0 24px rgba(0,229,255,0.20),~~

~~0 0 50px rgba(0,229,255,0.08);~~

~~z-index: 10;~~

}

/* ~~Windows title bar on sidebar */~~

/* ══════════════════════════════════════════════

~~.wc-sidebar:~~:~~before {~~

SECTION 4: LINKS — NEON ON DARK

~~content: '■ NAVIGATOR ─ ◻ ✕';~~

══════════════════════════════════════════════ */

~~display: block;~~

~~background: linear-gradient(90deg, #000080 0%, #1084d0 60%, #000080 100%);~~

~~color: white;~~

~~font-family: 'Press Start 2P', monospace;~~

~~font-size: 5px;~~

~~padding: 4px 6px;~~

~~letter-spacing: 0.04em;~~

~~border-bottom: 2px solid var(--wc-cyan);~~

~~box-shadow: 0 2px 10px rgba(0,229,255,0.35);~~

~~position: sticky;~~

~~top: 0;~~

~~z-index: 5;~~

}

~~.wc-sidebar-logo {~~

a, a:active, a:visited, a:hover, a:visited:hover {

~~display~~: ~~flex;~~

color: var(--wc-cyan);

~~align-items~~: ~~center;~~

text-decoration-color: rgba(0, 229, 255, 0.35);

~~gap~~: ~~8px;~~

transition: color 0.15s ease, text-shadow 0.15s ease;

~~padding~~: ~~10px 8px 8px;~~

~~border-bottom~~: ~~1px solid~~ var(--~~paint~~-~~dark~~);

~~border~~-~~top~~: ~~1px solid var~~(~~--paint-light~~);

~~background~~: ~~var(~~-~~-paint-light)~~;

}

a:hover {

~~.wc-logo-pixel~~ {

color: var(--wc-cyan);

~~width: 32px;~~

text-shadow: var(--wc-glow-cyan);

~~height: 32px;~~

text-decoration-color: var(--wc-cyan);

~~background: linear-gradient(135deg, #000080, #1084d0);~~

color~~: white;~~

~~font-family~~: var(--wc-~~pixel~~);

~~font~~-~~size: 14px;~~

~~display: flex;~~

~~align-items~~: ~~center;~~

~~justify-content: center;~~

~~border-top: 2px solid~~ var(--~~paint-light);~~

~~border-left: 2px solid var(~~--~~paint-light~~);

~~border~~-~~right: 2px solid var(~~-~~-paint-shadow);~~

~~border-bottom~~:~~2px solid~~ var(--~~paint~~-~~shadow~~);

~~box-shadow: 0 0 12px rgba(0,229,255,0.4);~~

~~flex-shrink: 0~~;

}

a.external, a.extiw, a.external:visited, a.extiw:visited {

.~~wc-logo-wiki {~~

color: #00ccff !important;

~~font-family~~: ~~var(--wc-pixel);~~

~~font-size~~: ~~7px;~~

color: ~~var(--paint-text);~~

~~letter-spacing: 0.06em;~~

~~text-transform: uppercase~~;

}

a.new { color: var(--wc-magenta); }

a.new:visited { color: var(--wc-magenta-dim); }

~~.wc-logo-sub {~~

/* ══════════════════════════════════════════════

~~font-family~~: ~~var(--wc-pixel);~~

SECTION 5: TYPOGRAPHY & BASIC ELEMENTS

~~font-size: 5px;~~

══════════════════════════════════════════════ */

~~color: var(--paint-shadow);~~

~~letter-spacing: 0.08em;~~

~~text-transform: uppercase;~~

~~margin-top: 2px;~~

}

~~/* Search panel */~~

hr {

~~.wc-search-panel~~ {

border: none;

~~padding~~: ~~6px 6px 8px~~;

border-top: 1px solid transparent;

border-~~bottom~~: 1px solid var(--~~paint~~-~~dark~~);

border-image: linear-gradient(

90deg,

transparent,

var(--wc-cyan),

var(--wc-magenta),

var(--wc-cyan),

transparent

) 1;

margin: 1.2em 0;

box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);

}

~~.wc-search-titlebar~~ {

h1, h2 {

~~background~~: ~~linear-gradient(90deg~~, ~~#000080 0%~~, ~~#1084d0 50%, #000080 100%~~);

font-family: 'LEMON MILK', 'Fredoka', var(--wc-body);

color~~: white;~~

color: var(--wc-cyan);

~~font-family~~: var(--wc-~~pixel~~);

letter-spacing: 0.04em;

~~font-size: 5.5px;~~

~~padding: 3px 6px;~~

letter-spacing: 0.~~06em;~~

~~margin-bottom: 5px;~~

~~box-shadow: 0 1px 0 var(--wc-cyan)~~;

}

~~.wc-search-input~~ {

h1 {

~~width: 100%;~~

font-size: 2em;

~~padding: 4px 6px;~~

text-shadow:

~~background: white;~~

0 0 10px rgba(0, 229, 255, 0.9),

~~border~~-~~top~~: ~~2px solid var(--paint-shadow)~~;

0 0 30px rgba(0, 229, 255, 0.4),

~~border-left: 2px solid var(--paint~~-shadow);

2px 2px 0 var(--wc-purple);

~~border-right~~: ~~2px solid var(--paint-light);~~

~~border-bottom:2px solid var~~(~~--paint-light);~~

~~border-radius:~~ 0;

~~font-family: var(--wc-pixel);~~

~~font-size: 6~~.~~5px;~~

~~color: var(--paint-text~~);

~~outline: none;~~

~~display: block;~~

~~box-sizing: border-box;~~

}

~~.wc-search-input:focus {~~

~~box-shadow: 0~~ 0 0 ~~2px~~ rgba(0,229,255,0.5);

}

~~.wc-search-btn~~ {

h2 {

margin-top: ~~4px~~;

margin-top: 22px;

~~width: 100%;~~

padding-bottom: 4px;

padding: 4px;

border: none;

~~background: var(--paint-mid);~~

position: relative;

~~border-top: 2px solid var(--paint-light);~~

font-size: 1.4em;

~~border-left: 2px solid var(--paint-light);~~

color: var(--wc-cyan);

border~~-right~~: ~~2px solid var(--paint-shadow)~~;

~~border-bottom:2px solid var(--paint-shadow);~~

~~font-family~~: ~~var(--wc-pixel)~~;

font-size: ~~6px~~;

color: var(--~~paint~~-~~text~~);

~~cursor: pointer;~~

~~letter-spacing: 0.06em;~~

~~transition: all 0.05s~~;

}

~~.wc-search-btn~~:~~hover~~ {

h2::after {

~~background~~: ~~var(--paint-light)~~;

content: '';

~~box~~-~~shadow~~: 0 0 ~~8px rgba(0,229,255,0.4)~~;

display: block;

}

position: absolute;

~~.wc~~-~~search-btn:active {~~

bottom: -2px; left: 0; right: 0;

~~border-top: 2px solid~~ var(--~~paint~~-~~shadow~~);

height: 2px;

~~border-left: 2px solid~~ var(--~~paint~~-~~shadow~~);

background: linear-gradient(90deg,

~~border-right: 2px solid~~ var(--~~paint~~-~~light~~);

var(--wc-magenta) 0%,

~~border~~-~~bottom~~:~~2px solid var~~(~~--paint-light~~);

var(--wc-cyan) 50%,

var(--wc-lime) 100%

);

box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);

}

~~/* Portlet */~~

h3 { color: var(--wc-magenta); font-family: var(--wc-body); font-size: 1.15em;

.wc-~~portlet {~~

text-shadow: 0 0 8px rgba(255,0,204,0.5); }

~~border~~-~~bottom~~: ~~1px solid~~ var(--~~paint~~-~~dark~~);

h4 { color: var(--wc-lime); text-shadow: 0 0 6px rgba(57,255,20,0.4); }

~~border~~-~~top~~: ~~1px solid~~ var(--~~paint~~-~~light~~);

h5, h6 { color: var(--wc-purple); }

}

.~~wc-portlet-header~~ {

.toc { margin-top: 20px; }

~~background: linear~~-~~gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%);~~

#toolbar { height: 22px; }

~~color~~: ~~white~~;

.allpagesredirect { font-style: italic; }

~~font-family~~: ~~var(--wc-pixel)~~;

.watchlistredir { font-style: italic; }

font-~~size: 5.5px;~~

~~padding~~: ~~4px 6px~~;

~~display: flex;~~

~~align-items: center;~~

~~gap: 5px;~~

~~letter-spacing: 0~~.~~06em;~~

~~text~~-~~transform~~: ~~uppercase~~;

~~box-shadow: 0 1px 0 var(--wc-cyan), 0 0 10px rgba(0,229,255,0.25);~~

}

~~.wc-portlet-icon {~~

/* ══════════════════════════════════════════════

~~color~~: ~~var(--wc-cyan);~~

SECTION 6: PORTRAIT RING SYSTEM

~~font-size: 8px;~~

(All ring classes preserved, webcore rings added)

~~text-shadow: 0 0 6px var~~(~~--wc-cyan~~);

══════════════════════════════════════════════ */

}

.wc-~~portlet~~-~~list~~ {

.portrait-ring-wrap {

~~list-style~~: ~~none~~;

overflow: hidden;

~~padding~~: ~~3px 4px~~;

border-radius: 50%;

~~margin: 0;~~

display: flex;

~~background: var(--paint-mid);~~

align-items: center;

display: flex;

justify-content: center;

~~flex~~-~~direction~~: ~~column~~;

~~gap~~: ~~2px~~;

}

.portrait-ring-wrap.shape-square { border-radius: 11px; }

.wc-~~nav~~-~~link~~ {

.portrait-ring-wrap figure,

~~display: flex;~~

.portrait-ring-wrap figure a,

~~align~~-~~items~~: ~~center~~;

.portrait-ring-wrap figure img,

~~padding: 4px 8px;~~

.portrait-ring-wrap .mw-file-element,

~~background: var(-~~-~~paint~~-~~mid);~~

.portrait-ring-wrap a,

~~border~~-~~top: 2px solid var(~~--~~paint~~-~~light);~~

.portrait-ring-wrap img {

~~border~~-~~left: 2px solid var(~~--~~paint~~-~~light);~~

width: 100% !important;

~~border~~-~~right: 2px solid var(~~--~~paint~~-~~shadow);~~

height: 100% !important;

~~border-bottom~~:~~2px solid var(--paint-shadow)~~;

object-fit: cover !important;

~~color~~: ~~var(--paint-text)~~;

object-position: top center !important;

~~font~~-~~family~~: ~~var(--wc-pixel)~~;

border-radius: inherit !important;

~~font~~-~~size~~: ~~6.5px~~;

margin: 0 !important;

~~text~~-~~decoration~~: ~~none~~;

padding: 0 !important;

~~letter-spacing~~: 0~~.02em~~;

display: block !important;

~~transition~~: ~~all~~ 0~~.05s~~;

}

.wc-~~nav~~-~~link~~:~~hover {~~

.portrait-ring-wrap figure {

background: ~~var(--paint-light)~~;

border: none !important;

~~box-shadow~~: ~~0 0 8px rgba(0,229,255,0.4)~~;

background: none !important;

~~color~~: ~~var(--paint-text)~~;

width: 100% !important;

height: 100% !important;

}

.wc-~~nav~~-~~link~~:~~active {~~

.portrait-caption {

~~border~~-~~top~~: ~~2px solid var(--paint-shadow)~~;

text-align: center;

~~border-left~~: ~~2px solid~~ var(--~~paint~~-~~shadow~~);

font-size: 0.85em;

~~border~~-~~right~~: ~~2px solid var(--paint-light)~~;

color: var(--wc-cyan-dim);

~~border~~-~~bottom~~:~~2px solid var(--paint-light)~~;

margin-top: 0.4rem;

font-style: italic;

}

.portrait-ring {

~~/* Paint palette */~~

padding: 5px;

.~~wc-paint~~-~~palette~~ {

display: inline-flex;

padding: ~~6px~~;

align-items: center;

~~border-top~~: ~~1px solid var(~~--~~paint~~-~~light)~~;

justify-content: center;

border-~~bottom~~: ~~1px solid var(--paint-dark)~~;

border-radius: 50%;

~~background~~: var(--~~paint~~-~~mid~~);

box-shadow: 0 4px 20px var(--wc-cyan-glow);

}

.portrait-ring.shape-square { border-radius: 16px; }

.wc-~~palette~~-~~title~~ {

.portrait-ring img {

~~font~~-~~family~~: ~~var(--wc-pixel)~~;

width: 148px; height: 148px;

~~font~~-~~size~~: ~~5.5px~~;

object-fit: cover; object-position: top center;

~~color~~: ~~var(--paint-shadow)~~;

border-radius: 50%; display: block;

~~letter~~-~~spacing~~: ~~0.08em~~;

~~margin~~-~~bottom~~: ~~5px~~;

~~text~~-~~transform~~: ~~uppercase~~;

}

.portrait-ring.shape-square img { border-radius: 11px; }

.wc-~~palette~~-~~swatches~~ {

/* Original portrait ring colors preserved */

~~display~~: ~~grid~~;

.pb-pink { background: linear-gradient(135deg, #E8317A 0%, #fff 35%, #F5A8C8 55%, #fff 75%, #E8317A 100%); }

~~grid~~-~~template~~-~~columns~~: ~~repeat~~(8, ~~1fr~~);

.pb-red { background: linear-gradient(135deg, #5a0000 0%, #ff4444 22%, #cc0000 44%, #ff8888 66%, #8b0000 88%, #ff4444 100%); }

~~gap~~: ~~2px~~;

.pb-orange { background: linear-gradient(135deg, #5a1e00 0%, #ff8c00 22%, #e05a00 44%, #ffb347 66%, #7a3000 88%, #ff8c00 100%); }

}

.pb-gold { background: linear-gradient(135deg, #5a3e00 0%, #D4A017 18%, #F2D060 36%, #c8960c 54%, #ffe566 72%, #8a6000 90%, #D4A017 100%); }

.pb-yellow { background: linear-gradient(135deg, #666600 0%, #ffff44 25%, #eeee00 50%, #ffffaa 75%, #888800 100%); }

.pb-green { background: linear-gradient(135deg, #004422 0%, #5BAF8A 22%, #00882a 44%, #A8D8C0 66%, #004410 88%, #5BAF8A 100%); }

.pb-cyan { background: linear-gradient(135deg, #003344 0%, #00B5AD 22%, #007A75 44%, #7FDBD7 66%, #002233 88%, #00B5AD 100%); }

.pb-blue { background: linear-gradient(135deg, #000066 0%, #4488ff 22%, #1133cc 44%, #99bbff 66%, #000088 88%, #4488ff 100%); }

.pb-purple { background: linear-gradient(135deg, #1a0033 0%, #9933ff 22%, #6600bb 44%, #cc99ff 66%, #2a0055 88%, #9933ff 100%); }

.pb-pink-metal { background: linear-gradient(135deg, #550033 0%, #E8317A 22%, #cc0066 44%, #F5A8C8 66%, #7a0044 88%, #E8317A 100%); }

.pb-brown { background: linear-gradient(135deg, #1a0800 0%, #8b5e3c 22%, #5a2e10 44%, #c4956a 66%, #2a1000 88%, #8b5e3c 100%); }

.pb-bronze { background: linear-gradient(135deg, #2a1200 0%, #cd7f32 18%, #8b4513 36%, #eaaa6a 54%, #cd7f32 72%, #3a1800 90%, #cd7f32 100%); }

.pb-silver { background: linear-gradient(135deg, #444 0%, #ddd 18%, #999 36%, #fff 54%, #bbb 72%, #eee 88%, #555 100%); }

.pb-gray { background: linear-gradient(135deg, #111 0%, #777 25%, #444 50%, #aaa 75%, #222 100%); }

.pb-black { background: linear-gradient(135deg, #000 0%, #333 22%, #000 44%, #555 66%, #111 88%, #444 100%); }

.pb-white { background: linear-gradient(135deg, #bbb 0%, #fff 25%, #ddd 50%, #fff 75%, #ccc 100%); }

.wc-~~swatch~~ {

/* Webcore neon portrait rings */

~~width~~: ~~100%~~;

.pb-webcore-cyan { background: conic-gradient(#00e5ff, #0d0d2b, #00e5ff); animation: pb-neon-spin 3s linear infinite; }

~~aspect~~-~~ratio: 1~~;

.pb-webcore-magenta { background: conic-gradient(#ff00cc, #0a0a1a, #ff00cc); animation: pb-neon-spin 4s linear infinite; }

~~border~~-~~top~~: ~~1px solid rgba~~(~~255~~,~~255~~,~~255,0.6~~);

.pb-webcore-void { background: conic-gradient(#8b00ff, #00e5ff, #ff00cc, #39ff14, #8b00ff); animation: pb-neon-spin 5s linear infinite; }

~~border~~-~~left~~: ~~1px solid rgba~~(~~255~~,~~255~~,~~255~~,~~0.6~~);

.pb-rainbow { background: conic-gradient(#ff0000, #ff8800, #ffff00, #00cc44, #0088ff, #8800ff, #ff00cc, #ff0000); animation: pb-neon-spin 3s linear infinite; }

~~border~~-~~right~~: ~~1px solid rgba~~(0,0,0,~~0.4);~~

.pb-rainbow-ring { background: conic-gradient(#ff0000, #ff8800, #ffff00, #00cc44, #0088ff, #8800ff, #ff00cc, #ff0000) !important; animation: pb-neon-spin 3s linear infinite !important; }

~~border-bottom:1px solid rgba(0~~,0,0,~~0.4~~);

~~cursor~~: ~~crosshair;~~

~~transition: transform 0.05s~~;

}

.wc-~~swatch:hover~~ {

~~transform: scale(1.3);~~

~~z-index: 1;~~

~~position~~: ~~relative;~~

~~box~~-~~shadow: 0 0 8px rgba~~(0,~~229~~,~~255~~,~~0.6~~);

}

~~/* Hit counter */~~

@keyframes pb-neon-spin {

~~.wc~~-~~hit~~-~~counter~~ {

0% { filter: hue-rotate(0deg) brightness(1.2) saturate(1.5); }

~~padding~~: ~~6px;~~

100% { filter: hue-rotate(360deg) brightness(1.2) saturate(1.5); }

~~background: var~~(~~--paint-mid~~);

~~border~~-~~top: 1px solid var~~(~~--paint-light~~);

~~border-bottom: 1px solid var~~(~~--paint-dark~~);

}

~~.wc-hc-label {~~

/* ══════════════════════════════════════════════

~~font-family~~: ~~var(--wc~~-~~pixel);~~

SECTION 7: INFOBOXES — WEBCORE PAINT-PANEL STYLE

~~font-size~~: 5.~~5px;~~

Classic infobox: dark panel with neon border.

~~color~~: ~~var(~~-~~-paint-shadow);~~

Portable infobox: pixel-art header with neon accents.

~~letter-spacing: 0~~.~~08em;~~

Both styled like MS Paint tool panels floating in the void.

~~margin-bottom: 4px;~~

══════════════════════════════════════════════ */

~~text-transform: uppercase;~~

}

.wc-hc-~~digits {~~

.infobox {

~~display~~: ~~flex~~;

border: 2px solid var(--wc-cyan);

~~gap~~: ~~2px~~;

background-color: rgba(13, 13, 43, 0.92);

color: var(--wc-pixel-white);

padding: 0.2em;

box-shadow:

0 0 0 1px rgba(0, 229, 255, 0.15),

0 0 20px var(--wc-cyan-glow),

inset 0 0 30px rgba(0, 0, 0, 0.4);

}

@media all and (max-width: 500px) {

~~.wc-hc-digit {~~

.infobox { margin: 0 auto; clear: both; max-width: 100%; }

~~background: #111;~~

~~color: var~~(-~~-wc-lime);~~

~~font-family: var(--wc-pixel);~~

~~font-size: 12px;~~

width: ~~20px;~~

~~height: 24px;~~

~~display: flex;~~

~~align-items: center;~~

~~justify-content: center;~~

~~border: 1px solid #333;~~

~~border-top: 1px solid var(--paint-shadow~~);

~~border-left~~: ~~1px solid var(--paint-shadow)~~;

~~text-shadow~~: ~~0 0 6px var(--wc-lime)~~;

~~box~~-~~shadow~~: ~~inset 0 0 4px rgba(0,0,0,0.8)~~;

}

@media all and (min-width: 500px) {

~~/* 88x31 buttons */~~

.infobox { margin-left: 1em; margin-bottom: 0.5em; float: right; clear: right; }

.~~wc-btn88~~-~~row {~~

~~padding: 6px;~~

~~display~~: ~~flex~~;

~~flex~~-~~wrap~~: ~~wrap~~;

~~gap~~: ~~3px~~;

~~background~~: ~~var(--paint-mid);~~

~~border-top: 1px solid var(--paint-light)~~;

}

.infobox td, .infobox th { vertical-align: top; }

.infobox caption { font-size: larger; margin-left: inherit; }

.infobox.bordered { border-collapse: collapse; }

.infobox.bordered td, .infobox.bordered th { border: 1px solid var(--wc-cyan-dim); }

.infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

.~~wc-btn88~~ {

.infotable {

~~width: 88px;~~

float: right; padding: 5px; margin-left: 3px;

~~height~~: ~~31px~~;

background: var(--wc-panel);

~~display~~: ~~flex;~~

border-top: 2px solid var(--paint-light);

~~align-items: center~~;

border-left: 2px solid var(--paint-light);

~~justify~~-~~content~~: ~~center~~;

border-right: 2px solid var(--paint-shadow);

~~font-family~~: var(--wc-~~pixel~~);

border-bottom:2px solid var(--paint-shadow);

~~font~~-~~size~~: ~~5.5px;~~

width: 25%;

~~letter~~-~~spacing: 0.06em~~;

box-shadow: 0 0 12px var(--wc-cyan-glow);

border: 2px solid;

~~cursor~~: ~~pointer~~;

~~text~~-~~transform: uppercase;~~

~~background~~: var(--wc-~~void~~);

~~transition: all 0.1s;~~

}

~~.wc-btn88:hover {~~

~~background~~: ~~rgba(0,229,255,0.08)~~;

box-shadow: 0 0 ~~10px currentColor~~;

}

/* ~~══════════════════════════════════════════~~

/* ── Portable Infobox — webcore neon panel ── */

~~MAIN CONTENT AREA~~

.portable-infobox .wds-tabs__tab-label { position: relative; top: -4px; }

~~══════════════════════════════════════════~~ */

.wc-~~main~~ {

.portable-infobox .pi-secondary-background {

~~flex~~: 1;

background: linear-gradient(135deg, var(--wc-panel), var(--wc-void));

~~padding~~: 0;

border: 3px solid var(--wc-cyan);

~~overflow~~-~~y: auto;~~

box-shadow: 0 0 12px var(--wc-cyan-glow);

~~overflow~~-~~x: hidden;~~

~~background: transparent~~;

~~position: relative;~~

~~min~~-~~width~~: 0;

}

~~/* ══════════════════════════════════════════~~

.pi-border-color {

~~PREVIEW TAB~~

border-color: var(--wc-cyan);

~~══════════════════════════════════════════ */~~

border-width: 3px;

border-radius: 4px;

.wc-~~preview~~ {

box-shadow:

~~padding~~: ~~20px 24px~~;

0 0 0 1px var(--wc-void),

~~max~~-width: ~~100%~~;

0 0 20px var(--wc-cyan-glow),

0 0 40px rgba(0, 229, 255, 0.15);

}

.wc-~~page~~-~~title-bar~~ {

.portable-infobox .pi-image {

~~display~~: ~~flex;~~

background:

~~align~~-~~items: flex~~-~~start;~~

repeating-linear-gradient(

~~justify~~-~~content: space-between;~~

-45deg,

~~gap: 1rem;~~

rgba(0, 229, 255, 0.06) 0px,

~~margin-bottom: 1rem;~~

rgba(0, 229, 255, 0.06) 4px,

~~padding-bottom: 8px~~;

transparent 4px,

~~border~~-~~bottom~~: ~~2px solid~~ var(--~~paint~~-~~dark~~);

transparent 12px

);

background-color: var(--wc-void);

}

.wc-~~page~~-title {

/* Infobox title: MS Paint title bar — dark blue bar like Windows dialog */

~~font~~-~~family~~: ~~'LEMON MILK', 'Fredoka',~~ var(--wc-~~body~~);

.portable-infobox .pi-title {

font-size: ~~1.8rem~~;

border-radius: 2px 2px 0 0;

~~color~~: var(--wc-~~cyan~~);

border-width: 0 0 2px 0;

~~margin~~: 0;

border-style: solid;

text-shadow:

border-color: var(--wc-cyan);

0 0 ~~10px rgba~~(~~0,229,255,0.9~~),

/* Classic Windows title bar gradient */

0 0 ~~30px~~ rgba(0,229,255,0.4),

background: linear-gradient(90deg,

~~2px~~ 2px 0 var(--wc-~~purple~~);

#000080 0%,

~~letter-spacing:~~ 0.~~03em~~;

#1084d0 40%,

#000080 100%

) !important;

color: white;

font-size: 20px !important;

font-family: var(--wc-pixel) !important;

font-size: 9px !important;

letter-spacing: 0.06em;

text-shadow:

0 0 8px var(--wc-cyan),

0 0 20px rgba(0, 229, 255, 0.5);

padding: 8px 12px !important;

/* Neon glow override for the title */

box-shadow: 0 2px 0 var(--wc-cyan), 0 0 20px rgba(0,229,255,0.4);

}

.wc-~~page~~-~~actions {~~

.portable-infobox .pi-header {

~~display~~: ~~flex~~;

border-width: 2px 0 !important;

~~gap~~: ~~2px~~;

border-style: solid !important;

~~flex~~-~~shrink~~: 0;

border-color: var(--wc-magenta) !important;

/* Paint-panel inset bar */

background: linear-gradient(90deg,

rgba(255, 0, 204, 0.15),

rgba(255, 0, 204, 0.08)

) !important;

color: var(--wc-magenta) !important;

font-size: 7px !important;

font-family: var(--wc-pixel) !important;

letter-spacing: 0.08em;

text-shadow: 0 0 8px var(--wc-magenta), 0 0 20px rgba(255,0,204,0.5);

padding: 6px 10px !important;

text-transform: uppercase;

}

.wc-~~action~~-~~tab~~ {

.portable-infobox .pi-data { border-top-style: none; }

~~background: var(~~--~~paint-mid)~~;

.pi-horizontal-group-item:not(:first-child) { border-left-style: none; }

~~border~~-~~top~~: ~~2px solid var~~(-~~-paint-light~~);

.portable-infobox .pi-data-label {

border-left: ~~2px solid var(--paint-light)~~;

font-family: var(--wc-pixel) !important;

~~border~~-~~right: 2px solid var(~~--~~paint-shadow);~~

font-size: 6px !important;

~~border-bottom:2px solid transparent;~~

color: var(--wc-cyan-dim) !important;

~~padding: 4px 12px;~~

text-transform: uppercase;

font-family: var(--wc-pixel);

letter-spacing: 0.08em;

font-size: 6px;

color: var(--~~paint~~-~~text~~);

~~cursor~~: ~~pointer~~;

letter-spacing: 0.~~04em;~~

~~transition: all 0.05s~~;

}

.~~wc-action-tab:hover {~~

.portable-infobox .pi-data-value {

~~background: var(--paint-light);~~

color: var(--wc-pixel-white) !important;

~~box~~-~~shadow: 0 0 6px rgba(0,229,255,0~~.~~3);~~

font-family: var(--wc-body) !important;

}

~~.wc-action~~-~~tab:first~~-~~child~~ {

~~background: var(--paint-select);~~

color: ~~white;~~

~~border-top: 2px solid~~ var(--~~paint~~-~~shadow);~~

~~border~~-~~left: 2px solid var(--paint-shadow~~);

~~border~~-~~right~~: ~~2px solid~~ var(--~~paint~~-~~light~~);

}

.wc-~~page~~-~~content {~~

/* ── Classic infobox override: paint panel in the void ── */

~~max~~-~~width~~: ~~900px~~;

.infobox:not(.pi-border-color):not(.portable-infobox) {

background: linear-gradient(160deg,

rgba(13, 13, 43, 0.95) 0%,

rgba(10, 10, 26, 0.90) 100%

) !important;

border: 2px solid var(--wc-cyan) !important;

border-radius: 4px !important;

box-shadow:

0 0 0 1px rgba(0, 229, 255, 0.12),

0 0 24px var(--wc-cyan-glow),

inset 0 0 20px rgba(0, 0, 0, 0.5) !important;

overflow: hidden;

color: var(--wc-pixel-white) !important;

}

.infobox:not(.pi-border-color):not(.portable-infobox) caption {

.wc-~~lead~~ {

/* Windows-style title bar caption */

~~font~~-~~size~~: ~~1rem~~;

background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;

~~line-height~~: ~~1.7~~;

color: white !important;

~~color~~: var(--wc-pixel-~~white~~);

font-family: var(--wc-pixel) !important;

~~margin~~-bottom: ~~1rem~~;

font-size: 7px !important;

letter-spacing: 0.06em;

padding: 8px 12px !important;

text-align: center !important;

text-shadow: 0 0 6px rgba(0, 229, 255, 0.8);

font-weight: normal;

border-bottom: 2px solid var(--wc-cyan) !important;

}

.infobox:not(.pi-border-color):not(.portable-infobox) th {

~~a {~~

background: rgba(0, 229, 255, 0.08) !important;

color: var(--wc-cyan);

color: var(--wc-cyan) !important;

text-~~decoration~~-~~color~~: rgba(0,229,255,0.35);

font-family: var(--wc-pixel) !important;

~~transition~~: ~~color~~ 0~~.15s~~, ~~text-shadow~~ 0.~~15s~~;

font-size: 6px !important;

letter-spacing: 0.07em;

padding: 7px 10px !important;

text-transform: uppercase;

vertical-align: middle;

border-bottom: 1px solid rgba(0, 229, 255, 0.15) !important;

border-right: 1px solid rgba(0, 229, 255, 0.10) !important;

}

a:~~hover~~ {

.infobox:not(.pi-border-color):not(.portable-infobox) td {

color: var(--wc-~~cyan~~);

color: var(--wc-pixel-white) !important;

~~text~~-~~shadow~~: ~~var(~~--~~wc-glow-cyan~~);

padding: 7px 10px !important;

font-weight: 500;

vertical-align: middle;

border-bottom: 1px solid rgba(0, 229, 255, 0.08) !important;

background: transparent !important;

}

~~.wc-link-new { color: var(--wc-magenta); }~~

~~.wc-section { margin~~: ~~1.5rem 0; }~~

/* ══════════════════════════════════════════════

SECTION 8: TABLES — PAINT PANEL GRID ON VOID

══════════════════════════════════════════════ */

.~~wc-section h2~~ {

.wikitable, table.prettytable {

~~font-family~~: ~~'LEMON MILK'~~, ~~'Fredoka'~~, ~~var(--wc-body~~);

margin: 1em 1em 1em 0;

~~color~~: var(--wc-cyan);

background: rgba(13, 13, 43, 0.92) !important;

~~font~~-~~size~~: ~~1.35rem~~;

border: 2px solid var(--wc-cyan) !important;

~~margin~~-~~top~~: 0;

border-radius: 4px !important;

~~margin~~-~~bottom: 0.75rem;~~

box-shadow:

~~padding~~-~~bottom: 6px;~~

0 0 16px var(--wc-cyan-glow),

~~position: relative;~~

inset 0 0 20px rgba(0, 0, 0, 0.4) !important;

~~text-shadow:~~ 0 0 ~~10px~~ rgba(0~~,229,255~~,0~~.7)~~, 0 ~~0 30px rgba(0,229,255~~,0.25);

overflow: hidden;

~~letter~~-spacing: 0~~.03em~~;

border-collapse: separate !important;

border-spacing: 0 !important;

}

.wc-~~section h2::after~~ {

.wikitable th, .mw-datatable th, .mw_metadata th, table.prettytable th {

~~content~~: ~~'';~~

background: linear-gradient(90deg,

~~display: block;~~

rgba(0, 229, 255, 0.20),

~~position: absolute;~~

rgba(139, 0, 255, 0.15)

~~bottom: -1px; left:~~ 0~~; right:~~ 0;

) !important;

~~height: 2px~~;

color: var(--wc-cyan) !important;

~~background~~: ~~linear-gradient(90deg,~~ var(--wc-~~magenta~~), var(--wc-~~cyan~~)~~, var(~~--wc-~~lime),~~ var(--wc-~~purple)~~);

font-family: var(--wc-pixel) !important;

~~box~~-~~shadow~~: ~~0 0 8px~~ rgba(0,229,255,0.4);

font-size: 6px !important;

letter-spacing: 0.08em !important;

padding: 9px 12px !important;

border-bottom: 2px solid var(--wc-cyan) !important;

border-right: 1px solid rgba(0, 229, 255, 0.20) !important;

text-transform: uppercase;

text-align: center;

text-shadow: 0 0 8px var(--wc-cyan);

}

.wikitable td, .mw-datatable td, .mw_metadata td, table.prettytable td {

.wc-~~section h3~~ {

background: transparent !important;

~~color~~: ~~var(--wc-magenta)~~;

padding: 8px 12px !important;

~~font-size~~: ~~1.1rem~~;

border-bottom: 1px solid rgba(0, 229, 255, 0.10) !important;

~~margin~~-bottom: 0.~~5rem~~;

border-right: 1px solid rgba(0, 229, 255, 0.08) !important;

~~text~~-~~shadow~~: ~~0 0 8px~~ rgba(255,0~~,204,~~0.5);

font-size: 0.9em;

color: var(--wc-pixel-white) !important;

}

.wikitable th, .wikitable td,

.wc-~~section p {~~

.mw-datatable th, .mw-datatable td,

~~color: var(--wc-pixel~~-~~white);~~

.mw_metadata th, .mw_metadata td {

~~line-height: 1~~.7;

border-color: rgba(0, 229, 255, 0.15) !important;

~~margin~~-~~bottom~~: 0.~~8rem~~;

}

.wikitable tr:last-child td, table.prettytable tr:last-child td { border-bottom: none !important; }

.wc-~~list~~ {

.wikitable td:last-child, .wikitable th:last-child,

~~list~~-~~style~~: none;

table.prettytable td:last-child, table.prettytable th:last-child { border-right: none !important; }

~~padding~~: 0;

.wikitable tr:hover td, table.prettytable tr:hover td {

~~margin~~: 0.~~5rem 0 1rem~~;

background: rgba(0, 229, 255, 0.06) !important;

}

.~~wc-list li~~ {

table.wikitable caption, table.prettytable caption {

~~display: flex;~~

font-family: var(--wc-pixel);

~~align~~-~~items: center;~~

font-size: 7px;

~~gap: 8px;~~

color: var(--wc-cyan);

~~padding: 4px 0;~~

letter-spacing: 0.05em;

~~color~~: var(--wc-pixel~~-white~~);

text-shadow: 0 0 8px var(--wc-cyan);

}

padding: 6px;

~~.wc~~-~~list-bullet {~~

color: var(--wc-cyan);

text-shadow: 0 0 ~~6px~~ var(--wc-cyan);

~~flex-shrink~~: 0;

}

/* ~~Notice~~ box */

/* ══════════════════════════════════════════════

.~~wc-notice-box~~ {

SECTION 9: TABLE OF CONTENTS

~~display: flex;~~

Styled like an MS Paint "tool options" panel

~~align-items: center;~~

— raised bevel box, pixelated heading, neon accents

~~gap: 10px;~~

══════════════════════════════════════════════ */

~~padding: 10px 14px;~~

background: ~~rgba~~(~~255,140,0,0.08~~);

#toc, .toc {

border: 2px solid ~~#ff8c00~~;

/* Raised paint panel */

border-left: ~~4px~~ solid ~~#ff8c00~~;

background: var(--paint-mid) !important;

border-~~radius~~: ~~4px~~;

border-top: 2px solid var(--paint-light) !important;

~~color: #ffb347;~~

border-left: 2px solid var(--paint-light) !important;

~~font~~-~~family~~: var(--wc-~~pixel~~);

border-right: 2px solid var(--paint-shadow) !important;

~~font~~-~~size~~: ~~7px~~;

border-bottom:2px solid var(--paint-shadow) !important;

~~margin~~-~~bottom~~: ~~1rem;~~

border-radius: 0 !important;

~~box~~-shadow: 0 0 ~~12px~~ rgba(255,~~140~~,0,0.25);

box-shadow:

~~letter-spacing~~: 0~~.02em~~;

1px 1px 0 var(--paint-shadow),

~~line~~-~~height~~: ~~1.8~~;

/* Neon pop */

}

0 0 18px rgba(0, 229, 255, 0.30),

~~.wc~~-~~notice-icon {~~

0 0 40px rgba(0, 229, 255, 0.10) !important;

~~font-size~~: ~~16px~~;

padding: 0 !important;

~~flex-shrink~~: 0;

display: inline-block;

min-width: 200px;

margin-top: 1rem;

position: relative;

overflow: hidden;

}

/* ~~Quote block~~ */

/* Title bar of the TOC "window" */

.~~wc-quote-block~~ {

#toc .toctitle h2, .toc .toctitle h2 {

~~border~~-~~left~~: ~~4px solid~~ var(--wc-~~purple~~);

font-family: var(--wc-pixel) !important;

~~padding~~: ~~12px 18px 12px 20px~~;

font-size: 7px !important;

~~background~~: ~~rgba(139,0,255,~~0.~~06)~~;

letter-spacing: 0.05em;

~~border-radius~~: ~~0 4px 4px 0~~;

color: white !important;

~~font~~-~~style: italic~~;

/* Windows title bar */

~~color~~: ~~var(--wc-pixel-white)~~;

background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;

margin: ~~1rem~~ 0;

padding: 6px 10px !important;

~~position~~: ~~relative~~;

margin: 0 !important;

~~box~~-shadow: ~~0 0 14px var(--wc-purple-glow)~~;

border: none !important;

text-shadow: none;

}

.~~wc-quote-block::before~~ {

/* Body of the TOC panel */

~~content: '"';~~

#toc ul, .toc ul {

~~position: absolute;~~

list-style: none !important;

~~left: 6px; top: 2px;~~

padding: 8px 12px !important;

~~font~~-~~size~~: ~~2.5em~~;

margin: 0 !important;

~~color~~: ~~var(--wc-purple)~~;

background: var(--paint-mid);

~~opacity~~: 0~~.5;~~

~~line-height: 1~~;

~~font-family~~: ~~Georgia, serif;~~

~~text-shadow: 0 0 10px~~ var(--wc-~~purple~~);

}

.~~wc-quote-block footer~~ {

#toc li, .toc li { margin: 3px 0 !important; padding: 0 !important; }

margin~~-top~~: ~~6px~~;

#toc a, #toc a:visited, .toc a, .toc a:visited {

~~font-size~~: 0.~~8em;~~

color: var(--paint-text) !important;

color: var(--wc-~~pixel-gray~~);

font-size: 7px !important;

font-~~style~~: ~~normal~~;

font-family: var(--wc-pixel) !important;

font-family: var(--wc-pixel);

font-weight: normal !important;

font-~~size~~: ~~6px~~;

text-decoration: underline;

letter-spacing: 0.~~04em~~;

letter-spacing: 0.02em;

}

#toc a:hover, .toc a:hover {

~~/* Code block */~~

background: var(--paint-select);

.~~wc-code-block~~ {

color: var(--paint-select-txt) !important;

background: var(--wc-~~void~~);

text-shadow: none;

~~border~~: ~~2px solid~~ var(--wc-~~lime~~-~~dim~~);

display: inline-block;

~~border~~-~~radius~~: ~~4px~~;

padding: 0 2px;

~~margin~~: ~~1rem 0~~;

text-decoration: none;

~~overflow~~: ~~hidden~~;

~~box~~-~~shadow~~: ~~0 0 14px var(--wc-lime-glow)~~;

}

.~~wc-code-header~~ {

.tocnumber {

~~background: rgba(57,255,20,0.10);~~

font-family: var(--wc-pixel) !important;

~~border-bottom: 1px solid var(--wc-lime-dim);~~

font-size: 6px !important;

~~padding: 5px 12px;~~

color: var(--paint-shadow) !important;

~~display: flex;~~

margin-right: 5px;

~~justify-content: space-between;~~

~~align-items: center;~~

font-family: var(--wc-pixel);

font-size: 6px;

color: var(--wc-~~lime~~);

~~letter~~-~~spacing~~: ~~0.06em~~;

}

~~.wc-code-badge~~ {

#filetoc {

background: var(--wc-~~lime-dim~~);

background: var(--paint-mid) !important;

~~color~~: var(--wc-~~void~~);

border: 2px solid var(--paint-shadow) !important;

~~padding: 1px 6px;~~

border-radius: 0 !important;

~~font-size: 5px;~~

padding: 0.5em !important;

border-radius: ~~2px~~;

}

~~.wc-code-content {~~

padding~~: 14px 16px;~~

~~margin: 0;~~

~~font-family: var(--wc-mono);~~

~~font-size~~: 0.~~8rem;~~

~~color: var(--wc-lime);~~

~~line-height: 1.6;~~

~~overflow-x: auto;~~

~~background: transparent;~~

~~border: none;~~

~~text-shadow: 0 0 4px rgba(57,255,20,0.3)~~;

}

/* ~~Tags */~~

/* ══════════════════════════════════════════════

~~.wc-tag {~~

SECTION 10: CATEGORIES — NEON PILL TAGS

~~display: inline-block;~~

══════════════════════════════════════════════ */

~~padding: 3px 10px;~~

~~border-radius: 999px;~~

~~font-family: var(--wc-pixel);~~

~~font-size: 6px;~~

~~letter-spacing: 0.06em;~~

~~text-transform: uppercase;~~

~~border: 1.5px solid currentColor;~~

~~margin: 2px 3px;~~

}

~~.wc-tag-cyan { color: var(--wc-cyan);~~ ~~background: rgba(0,229,255,0.12); box-shadow: 0 0 8px rgba(0,229,255,0.25); }~~

~~.wc-tag-magenta { color: var(--wc-magenta); background: rgba(255,0,204,0.12); box-shadow: 0 0 8px rgba(255,0,204,0.22); }~~

~~.wc-tag-lime { color: var(--wc-lime); background: rgba(57,255,20,0.~~10~~); box-shadow~~: ~~0 0 8px rgba(57,255,20,0.22); }~~

~~.wc-tag-purple { color: var(--wc-purple); background: rgba(139,0,255,0.12); box-shadow: 0 0 8px rgba(139,0,255,0.22); }~~

~~.wc-tag-pink { color: #ff69b4; background: rgba(255,105,180,0.12); box-shadow: 0 0 8px rgba(255,105,180,0.20); }~~

~~.wc-tag-white { color: var(--wc-pixel-white); background: rgba(232,232,240,0.10); }~~

~~/* Category links */~~

#catlinks {

~~.wc-~~catlinks {

background: rgba(13, 13, 43, 0.90) !important;

~~margin-top: 2rem;~~

border: 2px solid var(--wc-purple) !important;

~~padding: 10px 14px;~~

border-radius: 4px !important;

background: rgba(13,13,43,0.90);

box-shadow: 0 0 14px var(--wc-purple-glow) !important;

border: 2px solid var(--wc-purple);

padding: 8px 12px !important;

border-radius: 4px;

font-size: 0.82em !important;

box-shadow: 0 0 14px var(--wc-purple-glow);

~~display~~: ~~flex~~;

~~flex~~-~~wrap~~: ~~wrap;~~

~~align-items: center;~~

~~gap: 4px~~;

}

.wc-~~cat-label {~~

#catlinks a {

font-family: var(--wc-pixel);

display: inline-block;

font-size: 6px;

padding: 3px 10px;

color: var(--wc-pixel-~~gray~~);

margin: 2px 3px;

~~letter-spacing~~: 0.~~06em~~;

border-radius: var(--wc-radius-pill) !important;

~~margin~~-~~right~~: ~~4px~~;

background: rgba(139, 0, 255, 0.15) !important;

text-transform: uppercase;

border: 1.5px solid var(--wc-purple) !important;

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

color: var(--wc-pixel-white) !important;

transition: all 0.2s;

text-decoration: none;

letter-spacing: 0.04em;

text-transform: uppercase;

}

~~.wc-cat-link~~ {

#catlinks a:hover {

~~display: inline-block;~~

background: rgba(0, 229, 255, 0.20) !important;

~~padding: 3px 10px;~~

border-color: var(--wc-cyan) !important;

~~border-radius: 999px;~~

color: var(--wc-cyan) !important;

background: rgba(~~139~~,0,255,0.15);

transform: translateY(-1px);

border: ~~1.5px solid~~ var(--wc-~~purple~~);

box-shadow: 0 0 10px var(--wc-cyan-glow) !important;

~~font-family~~: var(--wc-~~pixel~~);

text-shadow: 0 0 6px var(--wc-cyan);

~~font~~-~~size: 6px~~;

~~color~~: var(--wc-~~pixel~~-~~white~~);

text-~~decoration~~: ~~none;~~

~~letter~~-~~spacing: 0.04em;~~

~~text~~-~~transform: uppercase;~~

~~transition: all 0.15s~~;

}

.wc-~~cat~~-~~link:hover~~ {

.mw-normal-catlinks {

background: rgba(0~~,229~~,255,0.20);

background: rgba(139, 0, 255, 0.08);

border-~~color~~: ~~var(--wc-cyan)~~;

border-radius: 4px;

~~color~~: ~~var(~~-~~-wc-cyan)~~;

padding: 8px;

box-shadow: 0 0 10px ~~var~~(~~--wc-cyan-glow);~~

margin-bottom: 10px;

~~text-shadow:~~ 0 0 ~~6px var(--wc-cyan);~~

box-shadow: 0 0 10px rgba(139, 0, 255, 0.20);

~~transform: translateY(-1px~~);

}

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~TABLE OF CONTENTS~~ — ~~Paint Window~~

SECTION 11: PRE & CODE — TERMINAL ON VOID

~~══════════════════════════════════════════~~ */

══════════════════════════════════════════════ */

~~#toc~~, ~~.toc~~ {

pre, code {

background: var(--~~paint~~-~~mid~~) ~~!important~~;

background-color: var(--wc-void);

border~~-top~~: ~~2px~~ solid var(--~~paint~~-~~light~~) ~~!important~~;

border: 1px solid var(--wc-cyan-dim);

~~border-left~~: ~~2px solid~~ var(--~~paint~~-~~light~~) ~~!important~~;

color: var(--wc-lime);

~~border~~-~~right~~: ~~2px solid~~ var(--~~paint~~-shadow) ~~!important~~;

font-family: var(--wc-mono), monospace;

~~border~~-~~bottom~~:~~2px solid~~ var(--~~paint~~-~~shadow~~) !important;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);

~~padding~~: ~~0 !important~~;

}

~~display~~: ~~inline~~-~~block;~~

.mw-highlight {

~~min~~-~~width: 200px;~~

background: var(--wc-void) !important;

~~margin: 1rem 0~~;

color: var(--wc-lime);

box-shadow: ~~1px 1px~~ 0 var(--~~paint~~-~~shadow~~)~~, 0 0 18px rgba(0,229,255,0.28) !important~~;

border: 2px solid var(--wc-cyan-dim);

box-shadow: 0 0 10px var(--wc-lime-glow);

}

.mw-highlight pre { margin: 0; background: transparent; border: none; box-shadow: none !important; }

.mw-highlight pre, .mw-highlight .o { color: var(--wc-lime); }

.mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm,

.mw-highlight .c a, .mw-highlight .c1 a, .mw-highlight .cm a { color: var(--wc-pixel-gray); }

.mw-highlight .cp { color: var(--wc-magenta); }

.mw-highlight .k, .mw-highlight .o { color: var(--wc-cyan); }

.mw-highlight .kc, .mw-highlight .kr, .mw-highlight .kd, .mw-highlight .nf { color: var(--wc-magenta); }

.mw-highlight .kt { color: var(--wc-purple); }

.mw-highlight .mf, .mw-highlight .mi { color: #ff8c00; }

.mw-highlight .nb, .mw-highlight .sx { color: var(--wc-cyan); }

.mw-highlight .nc, .mw-highlight .nn, .mw-highlight .nv { color: white; }

.mw-highlight .nd, .mw-highlight .ow { color: var(--wc-lime); }

.mw-highlight .nt { color: var(--wc-magenta); }

.mw-highlight .s1, .mw-highlight .s2, .mw-highlight .sr { color: #ff8c00; }

.~~toctitle~~ {

#editform, .mw-highlight {

background: ~~linear~~-~~gradient~~(~~90deg, #000080 0%, #1084d0 50%, #000080 100%~~);

background-color: var(--wc-void);

~~padding~~: 0;

border: 6px solid var(--paint-mid);

~~margin~~: 0;

border-top: 2px solid var(--paint-light);

border-bottom: ~~2px~~ solid var(--wc-~~cyan~~);

border-left: 2px solid var(--paint-light);

box-shadow: 0 ~~2px 8px rgba~~(~~0,229,255,0.3~~);

border-right: 4px solid var(--paint-shadow);

border-bottom:4px solid var(--paint-shadow);

padding: 4px 8px 4px 4px !important;

box-shadow: 0 0 20px var(--wc-lime-glow);

}

#editform .editOptions, #editform .limitreport,

.~~toctitle h2~~ {

#editform .hiddencats, #editform .templatesUsed { color: var(--wc-lime); }

color: ~~white !important~~;

#editform .limitreport, #editform .templatesUsed { padding: 0 1em; }

font-family: var(--wc-pixel) ~~!important~~;

#editform .editOptions a, #editform .editOptions a:visited,

font-size: 7px ~~!important~~;

#editform .templatesUsed a, #editform .templatesUsed a:visited { color: var(--wc-cyan); }

~~letter~~-~~spacing~~: ~~0.04em !important~~;

#editform .editOptions { background: transparent; border: none; border-radius: 0; color: var(--wc-lime); padding: 1em; }

~~padding~~: ~~5px 8px !important~~;

#editform .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {

~~margin~~: ~~0 !important~~;

background-color: var(--paint-mid);

border: ~~none !important~~;

border-top: 2px solid var(--paint-light);

~~text~~-~~shadow~~: ~~none !important~~;

border-left: 2px solid var(--paint-light);

border-right: 2px solid var(--paint-shadow);

border-bottom:2px solid var(--paint-shadow);

border-radius: 0;

color: var(--paint-text);

font-family: var(--wc-pixel);

font-size: 7px;

}

#editform .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {

background-color: var(--paint-light);

text-decoration: underline;

}

#editform .oo-ui-textInputWidget .oo-ui-inputWidget-input {

background-color: white;

border: 2px inset var(--paint-shadow);

border-radius: 0;

color: var(--paint-text);

}

~~.toctitle h2::after { display: none !important; }~~

#editform .oo-ui-checkboxInputWidget [type="checkbox"] + span {

background-color: white;

#~~toc ul,~~ .~~toc ul~~ {

border: 2px solid var(--paint-shadow);

~~list~~-~~style~~: ~~none !important~~;

border-radius: 0;

~~padding~~: ~~6px 10px !important~~;

transition: none;

~~margin~~: 0 ~~!important~~;

}

#~~toc li,~~ .~~toc li { margin~~: ~~3px 0 !important; }~~

#editform .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span,

#editform .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span {

#~~toc a,~~ .~~toc a {~~

background-color: var(--paint-mid);

~~color: var(~~--~~paint~~-~~text) !important;~~

~~font~~-~~family~~: var(--wc-~~pixel~~) ~~!important;~~

~~font-size: 6.5px !important;~~

~~text-decoration: underline;~~

~~letter-spacing: 0.02em;~~

~~font-weight: normal !important~~;

}

#~~toc a:hover~~, ~~.toc a~~:~~hover~~ {

#editform table, #editform table td { border: 1px solid var(--paint-dark) !important; }

background: var(--paint-~~select~~) !important;

#editform table th { background-color: var(--paint-mid) !important; border: 1px solid var(--paint-dark) !important; color: var(--paint-text); }

color: white !important;

#editform table td { background-color: white !important; }

text-~~shadow~~: ~~none !important~~;

#editform .charinsert-container { background-color: transparent; border: none; text-align: center; }

display: ~~inline~~-~~block~~;

#editform .charinsert-container a, #editform .charinsert-container a:hover { color: var(--wc-cyan); }

padding: ~~0 2px~~;

#editform .mw-charinsert-buttons { display: flex; justify-content: center; flex-flow: row wrap; gap: 3px; }

~~text~~-~~decoration~~: ~~none~~;

#editform .mw-charinsert-buttons a {

~~box~~-~~shadow~~: ~~none !important~~;

background-color: var(--paint-mid);

border-top: 1px solid var(--paint-light);

border-left: 1px solid var(--paint-light);

border-right: 1px solid var(--paint-shadow);

border-bottom:1px solid var(--paint-shadow);

color: var(--paint-text);

padding: 3px 5px;

font-family: var(--wc-pixel);

font-size: 6px;

}

#editform .mw-charinsert-buttons a:hover {

.~~tocnumber~~ {

background-color: var(--paint-light);

~~font~~-~~family~~: var(--wc-~~pixel~~) ~~!important~~;

border-top: 1px solid var(--paint-shadow);

~~font~~-~~size: 5.5px !important~~;

border-left: 1px solid var(--paint-shadow);

~~color~~: var(--paint-shadow) ~~!important~~;

border-right: 1px solid var(--paint-light);

~~margin~~-right: ~~5px~~;

border-bottom:1px solid var(--paint-light);

}

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~WIKITABLE~~

SECTION 12: MESSAGE BOXES & NOTIFICATIONS

~~══════════════════════════════════════════~~ */

══════════════════════════════════════════════ */

.~~wikitable~~ {

.mw-message-box-warning {

background: rgba(13,13,43,0.92) !important;

border: 2px solid #ff8c00;

~~border~~: ~~2px solid var(~~-~~-wc-cyan) !important~~;

background: rgba(255, 140, 0, 0.08);

border-radius: 4px ~~!important~~;

padding: 1.5em !important;

~~border~~-~~collapse~~: ~~separate !important~~;

width: fit-content;

border-~~spacing: 0 !important~~;

border-radius: 4px;

~~overflow~~: ~~hidden~~;

color: #ffb347;

box-shadow: 0 0 ~~16px~~ var(--wc-cyan-glow) ~~!important~~;

box-shadow: 0 0 12px rgba(255, 140, 0, 0.3);

~~margin~~: ~~1rem 0;~~

}

~~width: 100%~~;

.mw-notification {

border: 2px solid var(--wc-cyan);

background: rgba(13, 13, 43, 0.95);

box-shadow: 0 0 20px var(--wc-cyan-glow);

border-radius: 4px;

}

.~~wikitable caption~~ {

.mw-notification, .mw-notification a { color: var(--wc-pixel-white) !important; }

~~font-family~~: var(--wc-pixel);

.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) { color: var(--wc-lime) !important; }

~~font~~-~~size~~: ~~7px;~~

.mw-dismissable-notice-body {

color: var(--wc-~~cyan~~);

width: 90%; text-align: center; padding: 10px 15px 20px;

text-~~shadow~~: ~~0 0 8px~~ var(--wc-cyan);

border: 2px solid var(--wc-cyan);

~~padding: 6px;~~

background: rgba(13, 13, 43, 0.85);

background: rgba(0,~~229~~,~~255~~,0.06);

color: var(--wc-pixel-white);

~~border-bottom~~: ~~1px solid rgba~~(~~0,229,255,0.2~~);

border-radius: 4px;

~~letter~~-~~spacing~~: ~~0.06em~~;

box-shadow: 0 0 16px var(--wc-cyan-glow);

~~text~~-~~transform~~: ~~uppercase~~;

}

.~~wikitable th~~ {

.mw-dismissable-notice-body #localNotice { margin-bottom: 0; }

~~background: linear~~-~~gradient(90deg, rgba(0,229,255,0~~.~~18), rgba(139,0,255,~~0~~.12)) !important~~;

.sitedir-ltr .mw-dismissable-notice-body { margin: 0 auto 10px; }

~~color: var(~~--wc-~~cyan) !important~~;

.mw-dismissable-notice-close { margin: 1em 6% 0 100%; font-size: 90%; color: var(--wc-pixel-white); }

font-~~family~~: var(--wc-pixel) ~~!important~~;

.sitenotice { width: 90%; margin: auto; font-size: 95%; line-height: 1.3; }

font-size: ~~6px !important~~;

.successbox, div.successbox {

~~padding~~: ~~9px 12px~~ !important;

background: rgba(57, 255, 20, 0.08) !important;

border~~-bottom~~: ~~2px~~ solid var(--wc-~~cyan~~) !important;

border: 1.5px solid var(--wc-lime) !important;

border-~~right~~: ~~1px solid rgba(0,229,255,0.15)~~ !important;

border-radius: 4px !important;

~~text~~-~~transform: uppercase;~~

color: var(--wc-lime) !important;

~~letter~~-~~spacing: 0.08em~~ !important;

box-shadow: 0 0 10px var(--wc-lime-glow) !important;

~~text~~-shadow: 0 0 ~~8px~~ var(--wc-~~cyan~~);

}

.~~wikitable td~~ {

.errorbox, div.errorbox {

~~color~~: var(--wc-~~pixel-white~~) !important;

background: rgba(255, 0, 204, 0.08) !important;

~~padding~~: ~~8px 12px~~ !important;

border: 1.5px solid var(--wc-magenta) !important;

~~border-bottom~~: ~~1px solid rgba~~(~~0,229,255,0.08~~) !important;

border-radius: 4px !important;

~~border~~-~~right~~: ~~1px solid rgba(~~0~~,229,255,~~0~~.06~~) ~~!important;~~

color: var(--wc-magenta) !important;

~~font-size: 0.9em;~~

box-shadow: 0 0 10px var(--wc-magenta-glow) !important;

~~background: transparent~~ !important;

}

.~~wikitable tr:hover td~~ {

.warningbox, div.warningbox {

background: rgba(0,~~229~~,~~255~~,0.04) !important;

background: rgba(255, 140, 0, 0.08) !important;

border: 1.5px solid #ff8c00 !important;

border-radius: 4px !important;

color: #ffb347 !important;

box-shadow: 0 0 10px rgba(255,140,0,0.3) !important;

}

.wc-~~plusminus~~-~~pos {~~

color: var(--wc-~~lime~~);

/* ══════════════════════════════════════════════

~~text~~-shadow: 0 0 ~~6px~~ var(--wc-~~lime~~);

SECTION 13: GALLERIES & IMAGES

══════════════════════════════════════════════ */

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] { width: min-content; }

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], .thumbinner, .gallerybox .thumb {

border: 2px solid var(--wc-cyan) !important;

background-color: var(--wc-void) !important;

background-clip: content-box;

border-radius: 4px;

box-shadow: 0 0 12px var(--wc-cyan-glow);

}

~~.wc-plusminus-neg~~ {

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Thumb"] figcaption,

color: ~~var(--wc-magenta)~~;

figure[typeof~="mw:File/Frame"], figure[typeof~="mw:File/Frame"] figcaption { display: block !important; }

~~text~~-~~shadow~~: 0 ~~0 6px~~ var(--wc-~~magenta~~);

figure[typeof~="mw:File/Thumb"] figcaption, figure[typeof~="mw:File/Frame"] figcaption {

background-color: inherit !important;

border: none !important;

padding: 0.3em 0.5em !important;

font-size: 0.85em;

color: var(--wc-cyan-dim);

}

.wc-~~plusminus-null~~ {

figure[typeof~="mw:File/Thumb"] a:active, figure[typeof~="mw:File/Frame"] a:active,

~~color~~: var(--wc-~~pixel~~-~~gray~~);

.thumbinner a:active, .gallerybox a:active { color: var(--wc-magenta); }

~~opacity~~: 0.7;

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], .thumbinner { padding: 8px 10px 6px 6px !important; }

figure[typeof~="mw:File/Thumb"] img, figure[typeof~="mw:File/Frame"] img,

figure[typeof~="mw:File/Thumb"] video, figure[typeof~="mw:File/Frame"] video,

.thumbinner .thumbimage { border: 1px solid var(--wc-cyan-dim) !important; }

.gallery.mw-gallery-traditional, ul.gallery {

display: flex !important;

gap: 0 15px;

align-content: flex-start;

align-items: flex-start;

justify-content: flex-start;

flex-flow: row wrap;

}

.gallery.mw-gallery-traditional .gallerybox { margin: 0 !important; }

.gallerybox .thumb { padding: 4px 6px 2px 2px; margin: 0 !important; }

@media screen and (max-width: 500px) { ul.gallery.gallery.gallery { margin: 0; } }

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~INFOBOX (Portable, preview)~~

SECTION 14: TABBER — PAINT TABS

~~══════════════════════════════════════════~~ */

══════════════════════════════════════════════ */

.~~wc-infobox~~ {

.tabber__header {

~~float~~: ~~right~~;

box-shadow: none;

~~margin~~-~~left~~: ~~1rem~~;

border-bottom: 2px solid var(--wc-cyan);

margin-bottom: ~~1rem~~;

margin-bottom: 5px;

~~width~~: ~~220px~~;

background: var(--paint-mid);

}

.tabber__tab[aria-selected="true"],

.pi-~~border-color {~~

.tabber__tab[aria-selected="true"]:visited,

~~border~~: ~~3px solid var(--wc-cyan);~~

.tabber__tab:hover {

~~border-radius~~: ~~4px~~;

color: white !important;

~~overflow~~: ~~hidden~~;

cursor: default;

background~~: rgba(13,13,43,0.95);~~

background-color: var(--paint-select) !important;

~~box~~-~~shadow~~:

border-radius: 0;

~~0 0 0 1px~~ var(--wc-~~void~~),

~~0 0 20px var(~~-~~-wc-cyan-glow),~~

~~0 0 40px rgba(0,229,255,~~0~~.12)~~;

}

.tabber__indicator {

.~~wc-infobox-title.pi-title~~ {

background-color: var(--wc-cyan) !important;

background~~: linear~~-~~gradient(90deg, #000080 0%, #1084d0 40%, #000080 100%);~~

height: 2px;

color~~: white;~~

box-shadow: 0 0 8px var(--wc-cyan);

~~font-family~~: var(--wc-~~pixel~~);

~~font-size: 7px;~~

~~padding: 8px 10px;~~

~~letter-spacing: 0.05em;~~

~~text-transform: uppercase;~~

~~border-bottom~~: 2px ~~solid var(--wc-cyan)~~;

box-shadow: 0 ~~2px~~ 0 var(--wc-cyan~~), 0 0 20px rgba(0,229,255,0.4~~);

}

.tabber__tab[aria-selected="false"] {

~~.wc-infobox-image~~.pi-~~image~~ {

background-color: var(--paint-mid);

background:

color: var(--paint-text);

~~repeating~~-~~linear~~-~~gradient(~~

border-top: 2px solid var(--paint-light);

-~~45deg,~~

border-left: 2px solid var(--paint-light);

~~rgba(0,229,255,0.06~~) ~~0px,~~

border-right:2px solid var(--paint-shadow);

~~rgba~~(~~0,229,255,0.06~~) ~~4px,~~

font-family: var(--wc-pixel);

~~transparent 4px,~~

font-size: 7px;

~~transparent 12px~~

);

~~background~~-~~color~~: var(--wc-~~void~~);

~~display~~: ~~flex~~;

~~align~~-~~items~~: ~~center;~~

~~justify~~-~~content: center~~;

~~height: 80px;~~

~~border~~-~~bottom~~: ~~1px solid rgba(0,229,255,0.2)~~;

}

~~.wc-infobox-img-placeholder {~~

/* ══════════════════════════════════════════════

~~font-size~~: ~~36px;~~

SECTION 15: SIDEBAR CHUNKS

~~opacity: 0.7;~~

══════════════════════════════════════════════ */

~~text-align: center;~~

}

.wc-~~infobox~~-~~section~~.pi-~~header~~ {

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {

background: ~~linear-gradient(90deg, rgba(255,0,204,0.12), rgba(255,0,204,0.06))~~;

background-color: transparent;

~~border-top~~: ~~2px solid~~ var(--wc-~~magenta~~);

color: var(--paint-text);

~~border-bottom~~: ~~2px solid var(--wc-magenta)~~;

padding: 0.3em;

~~color~~: ~~var(--wc-magenta)~~;

border: none;

font-family: var(--wc-pixel);

font-family: var(--wc-pixel), sans-serif;

font-size: ~~6px;~~

font-size: 7px;

~~padding: 5px 8px;~~

~~text-transform: uppercase;~~

~~letter-spacing: 0.09em;~~

~~text-shadow: 0 0 8px var(--wc-magenta)~~;

}

#mw-site-navigation .sidebar-chunk a, #mw-related-navigation .sidebar-chunk a {

.wc-~~infobox~~-~~table~~ {

color: var(--paint-text);

~~width~~: ~~100%~~;

text-decoration: underline;

~~border~~-~~collapse~~: ~~collapse~~;

}

.~~wc-infobox~~-~~table th {~~

#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {

~~background: rgba(0~~,~~229,255,0.06);~~

font-family: var(--wc-pixel), sans-serif;

~~color: var(~~--wc-~~cyan);~~

font-weight: bold;

font-family: var(--wc-pixel);

text-transform: uppercase;

font-~~size~~: ~~6px~~;

border: 0;

~~padding: 6px 8px;~~

border-bottom: var(--wc-cyan) solid 1px;

text-~~align~~: ~~left~~;

font-size: 7px;

~~letter-spacing~~: 0~~.06em;~~

color: var(--paint-text);

~~text-transform: uppercase~~;

padding-bottom: 3px;

border-bottom: ~~1px solid rgba~~(~~0,229,255,0.10~~);

~~border~~-~~right~~: ~~1px solid rgba~~(~~0,229,255,0.10~~);

~~width~~: ~~42%~~;

}

~~.wc~~-~~infobox~~-~~table td {~~

~~color: var(~~--wc-~~pixel~~-~~white)~~;

/* Portlet containers inside sidebars */

~~padding~~: ~~6px 8px~~;

#p-navigation, #p-Explore, #p-managewiki-sidebar-header, #p-STAFF, #p-boggio,

~~font~~-~~size~~: 0~~.85em~~;

#p-tb, #p-cactions, #p-pagemisc, #p-userpagetools, #p-birthday, #p-event,

~~border~~-bottom: ~~1px solid rgba(~~0~~,229,255,0.06)~~;

#p-content, #p-more_categories, #p-wiki_tools {

~~font~~-~~family~~: ~~var(--wc-body)~~;

background: transparent !important;

border: none !important;

border-radius: 0 !important;

padding: 0 !important;

margin-bottom: 0 !important;

box-shadow: none !important;

}

#mw-site-navigation .sidebar-chunk { margin-top: 0; }

#p-pagemisc, #p-tb { display: none; }

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~INFOBOX TAB — showcase~~

SECTION 16: RECENT CHANGES, DIFF, DISCUSSION

~~══════════════════════════════════════════~~ */

══════════════════════════════════════════════ */

.wc-~~infobox~~-~~showcase~~ {

.client-js .mw-changeslist ul,

~~display~~: ~~flex~~;

.client-js .mw-changeslist table.mw-enhanced-rc { margin-left: 0; }

~~gap~~: ~~2rem~~;

.mw-changeslist h4 {

~~flex~~-~~wrap: wrap~~;

font-family: var(--wc-pixel);

~~align~~-~~items~~: ~~flex~~-~~start~~;

font-size: 7px;

color: var(--wc-cyan);

text-shadow: 0 0 6px var(--wc-cyan);

}

.mw-plusminus-pos { color: var(--wc-lime); font-weight: bold; text-shadow: 0 0 6px var(--wc-lime); }

.mw-plusminus-null { color: var(--wc-pixel-gray) !important; opacity: 0.6 !important; }

.mw-plusminus-neg { color: var(--wc-magenta); font-weight: bold; text-shadow: 0 0 6px var(--wc-magenta); }

#pt-notifications-notice { display: none !important; }

.ext-discussiontools-init-pageframe-latestcomment,

.ext-discussiontools-visualenhancements-enabled .ext-discussiontools-init-section-metaitem,

.mw-plusminus-null, .autocomment, .autocomment a, .autocomment a:visited {

color: var(--wc-pixel-gray);

opacity: 0.8;

}

.oo-ui-panelLayout-framed { border-color: var(--wc-cyan-dim); }

table.diff td.diff-addedline { background: rgba(57, 255, 20, 0.08) !important; }

table.diff td.diff-deletedline { background: rgba(255, 0, 204, 0.08) !important; }

table.diff td.diff-context { background: rgba(255, 255, 255, 0.02) !important; }

~~.wc-classic-infobox-demo {~~

/* ══════════════════════════════════════════════

~~min-width~~: ~~200px;~~

SECTION 17: MANAGEWIKI — PAINT PANEL STYLE

}

══════════════════════════════════════════════ */

.wc-~~classic~~-~~infobox~~ {

#managewiki .oo-ui-menuLayout-content, #managewiki .managewiki-submit-formfields {

border: 2px solid var(--wc-~~cyan~~) ~~!important~~;

background-color: var(--paint-mid);

~~background~~: ~~rgba~~(~~13,13,43,0.92~~) ~~!important~~;

border-top: 2px solid var(--paint-light);

border-~~radius~~: ~~4px !important~~;

border-left: 2px solid var(--paint-light);

~~overflow~~: ~~hidden~~;

border-right: 2px solid var(--paint-shadow);

box-shadow: 0 0 ~~20px~~ var(--wc-cyan-glow) ~~!important;~~

border-bottom:2px solid var(--paint-shadow);

~~border-collapse: separate !important;~~

border-radius: 0;

~~border-spacing: 0 !important;~~

box-shadow: 0 0 16px var(--wc-cyan-glow);

~~min-width: 200px~~;

}

.wc-~~classic~~-~~infobox caption {~~

#managewiki .managewiki-submit-formfields,

~~background: linear~~-~~gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%);~~

#managewiki .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected),

~~color: white !important;~~

.oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(.oo-ui-optionWidget-selected):hover {

~~font~~-~~family~~: ~~var~~(--wc-~~pixel~~) ~~!important;~~

background-color: var(--paint-mid);

~~font~~-~~size: 7px !important;~~

~~padding: 7px 10px !important;~~

~~letter~~-~~spacing: 0~~.~~06em;~~

~~border~~-~~bottom~~: ~~2px solid var~~(--wc-~~cyan~~);

~~text~~-~~shadow~~: ~~0 0 6px rgba~~(~~0,229,255,0.8);~~

~~display: table~~-~~caption;~~

~~text~~-~~align: center~~;

}

.wc-~~classic~~-~~infobox th~~ {

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {

~~background~~: ~~rgba(~~0~~,229,255,0.08) !important~~;

border-radius: 0;

~~color~~: ~~var(~~-~~-wc-cyan) !important~~;

padding: 4px 8px;

font-family: var(--wc-pixel) ~~!important~~;

box-shadow: none;

font-size~~: 6px !important;~~

font-family: var(--wc-pixel);

~~padding~~: 7px ~~10px !important;~~

font-size: 7px;

~~text-transform: uppercase;~~

~~letter-spacing: 0.07em;~~

~~border-bottom: 1px solid rgba(0,229,255,0.15) !important;~~

~~border-right: 1px solid rgba(0,229,255,0.10) !important;~~

~~text-align: left~~;

}

.wc-~~classic~~-~~infobox td~~ {

#managewiki .oo-ui-menuLayout-content a { color: var(--paint-text) !important; }

color: var(--~~wc-pixel~~-~~white~~) !important;

#managewiki .managewiki-tabs-wrapper.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-framed { border: none; margin-bottom: 1em; }

~~padding~~: ~~7px 10px !important~~;

#managewiki .oo-ui-tabSelectWidget-framed { background-color: transparent; border: none; margin-bottom: -5px; overflow: hidden; }

border-bottom: ~~1px solid rgba(0~~,~~229,255,0~~.08) ~~!important~~;

#managewiki .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,

~~font~~-~~size~~: 0.~~85em~~;

.oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { background-color: var(--paint-light); }

~~font~~-~~family~~: var(--wc-~~body~~);

#managewiki .oo-ui-labelElement-label { border: none; }

#managewiki .oo-ui-checkboxInputWidget [type="checkbox"] + span {

background-clip: content-box;

background-color: white;

border: 2px inset var(--paint-shadow);

border-radius: 0;

}

.~~wc-ib-img-cell {~~

#managewiki .oo-ui-checkboxInputWidget [type="checkbox"]:checked + span {

~~text~~-~~align: center;~~

background-color: var(--wc-cyan) !important;

~~border~~-~~bottom~~: ~~1px solid rgba(0,229,255,0.15) !important;~~

}

~~.wc-ib-img-placeholder~~ {

~~font~~-~~size: 36px;~~

~~padding: 14px;~~

~~background~~: var(--wc-~~void~~);

~~display: block~~;

}

#managewiki .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label,

#managewiki .oo-ui-labelWidget.oo-ui-inline-help { color: var(--wc-pixel-gray); }

#managewiki .oo-ui-tabOptionWidget > .oo-ui-labelElement-label,

#managewiki .oo-ui-tabOptionWidget > .oo-ui-labelElement-label:hover { color: var(--paint-text); }

/* ~~Portrait rings */~~

/* ══════════════════════════════════════════════

~~.wc-ring-showcase {~~

SECTION 18: MISC

~~display~~: ~~flex;~~

══════════════════════════════════════════════ */

~~flex-wrap: wrap;~~

~~gap: 1.5rem;~~

~~margin: 1rem 0;~~

}

.wc-~~ring~~-~~item~~ {

#ca-ve-edit, .mw-editsection-visualeditor, .mw-editsection-divider { display: none !important; }

~~display~~: ~~flex~~;

.collaspibleSidebarHeader { position: relative; }

~~flex~~-~~direction~~: ~~column~~;

.collaspibleSidebarHeader > h3 { padding-left: 1.2em !important; cursor: pointer; }

~~align~~-~~items~~: ~~center~~;

.soundcloud-player { border: none; }

~~gap~~: ~~6px~~;

#test { background-color: var(--wc-cyan); }

.emoji-confetti {

position: fixed; top: -50px; z-index: 9999;

user-select: none; pointer-events: none;

animation: fall linear forwards;

}

@keyframes fall { to { transform: translateY(100vh) rotate(360deg); opacity: 0; } }

~~.portrait-ring {~~

/* ══════════════════════════════════════════════

~~padding~~: ~~4px;~~

SECTION 19: HLIST (standard MediaWiki, preserved)

~~display: inline-flex;~~

══════════════════════════════════════════════ */

~~align-items: center;~~

~~justify-content: center;~~

~~border-radius: 50%;~~

}

.wc-~~ring~~-~~img-placeholder~~ {

.hlist dl, .hlist ol, .hlist ul { margin: 0; padding: 0; }

~~width~~: ~~60px~~;

.hlist dd, .hlist dt, .hlist li { margin: 0; display: inline; }

~~height~~: ~~60px~~;

.hlist.inline, .hlist.inline dl, .hlist.inline ol, .hlist.inline ul,

~~border~~-~~radius~~: ~~50%~~;

.hlist dl dl, .hlist dl ol, .hlist dl ul,

~~background~~: ~~var~~(--wc-~~void~~);

.hlist ol dl, .hlist ol ol, .hlist ol ul,

~~display~~: ~~flex~~;

.hlist ul dl, .hlist ul ol, .hlist ul ul { display: inline; }

~~align~~-~~items~~: ~~center~~;

.hlist .mw-empty-li { display: none; }

~~justify~~-content: ~~center~~;

.hlist dt::after { content: ": "; }

~~font~~-~~size~~: ~~28px~~;

.hlist dd::after, .hlist li::after { content: " · "; font-weight: bold; }

~~border~~: ~~2px solid rgba(~~0,~~229,255,~~0~~.2)~~;

.hlist dd:last-child::after, .hlist dt:last-child::after, .hlist li:last-child::after { content: none; }

}

.hlist dd dd:first-child::before, .hlist dd dt:first-child::before, .hlist dd li:first-child::before,

.hlist dt dd:first-child::before, .hlist dt dt:first-child::before, .hlist dt li:first-child::before,

.hlist li dd:first-child::before, .hlist li dt:first-child::before, .hlist li li:first-child::before { content: " ("; font-weight: normal; }

.hlist dd dd:last-child::after, .hlist dd dt:last-child::after, .hlist dd li:last-child::after,

.hlist dt dd:last-child::after, .hlist dt dt:last-child::after, .hlist dt li:last-child::after,

.hlist li dd:last-child::after, .hlist li dt:last-child::after, .hlist li li:last-child::after { content: ")"; font-weight: normal; }

.hlist ol { counter-reset: listitem; }

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

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

.hlist dd ol > li:first-child::before, .hlist dt ol > li:first-child::before,

.hlist li ol > li:first-child::before { content: " (" counter(listitem) "\a0"; }

.plainlist ol, .plainlist ul { line-height: inherit; list-style: none none; margin: 0; }

.plainlist ol li, .plainlist ul li { margin-bottom: 0; }

~~.wc-ring-label {~~

/* ══════════════════════════════════════════════

~~font-family: var(--wc-pixel);~~

SECTION 20: WEBCORE UTILITY CLASSES

~~font-size: 5px;~~

Wikitext-usable utility classes for editors.

~~color: var(--wc-pixel-gray);~~

All "wc-" prefixed — no legacy theme remnants.

~~letter-spacing: 0.06em;~~

══════════════════════════════════════════════ */

~~text-transform: uppercase;~~

~~text-align: center;~~

}

/* ~~Portrait ring classes */~~

~~.pb-webcore-cyan~~ ~~{ background~~: ~~conic-gradient(#00e5ff, #0d0d2b, #00e5ff); animation: pb-neon-spin 3s linear infinite; }~~

~~.pb-webcore-magenta { background: conic-gradient(#ff00cc, #0a0a1a, #ff00cc); animation: pb-neon-spin 4s linear infinite; }~~

~~.pb-webcore-void~~ ~~{ background: conic~~-~~gradient(#8b00ff, #00e5ff, #ff00cc, #39ff14, #8b00ff); animation: pb-neon-spin 5s linear infinite; }~~

.~~pb-rainbow { background: conic-gradient(#ff0000, #ff8800, #ffff00, #00cc44, #0088ff, #8800ff, #ff00cc, #ff0000); animation: pb-neon-spin 3s linear infinite; }~~

~~.pb-purple { background: linear-gradient(135deg, #1a0033 0%, #9933ff 22%, #6600bb 44%, #cc99ff 66%, #2a0055 88%, #9933ff 100%); }~~

~~.pb-cyan { background: linear-gradient(135deg, #003344 0%, #00B5AD 22%, #007A75 44%, #7FDBD7 66%, #002233 88%, #00B5AD 100%); }~~

~~.pb-blue { background: linear-gradient(135deg, #000066 0%, #4488ff 22%, #1133cc 44%, #99bbff 66%, #000088 88%, #4488ff 100%); }~~

~~.pb-green { background: linear-gradient(135deg, #004422 0%, #5BAF8A 22%, #00882a 44%, #A8D8C0 66%, #004410 88%, #5BAF8A 100%); }~~

~~@keyframes pb~~-~~neon-spin {~~

~~0% { filter: hue-rotate(0deg) brightness(1~~.~~3) saturate(1.6); }~~

~~100% { filter: hue-rotate(360deg) brightness(1.3) saturate(1.6); }~~

}

~~/* ══════════════════════════════════════════~~

~~UTILITIES TAB~~

~~══════════════════════════════════════════~~ */

/* Glass panel: dark void with neon border */

.wc-glass-box {

background: rgba(13,13,43,0.88);

background: rgba(13, 13, 43, 0.88);

border: 2px solid var(--wc-cyan);

border-radius: ~~12px~~;

border-radius: var(--wc-radius);

box-shadow: 0 0 20px var(--wc-cyan-glow), inset 0 0 30px rgba(0,0,0,0.4);

box-shadow:

padding: 16px 20px;

0 0 20px var(--wc-cyan-glow),

margin: ~~8px~~ 0;

inset 0 0 30px rgba(0, 0, 0, 0.4);

color: var(--wc-pixel-white);

padding: 16px 20px;

margin: 12px 0;

position: relative;

overflow: hidden;

color: var(--wc-pixel-white);

}

/* MS Paint raised box */

.wc-paint-box {

background: var(--paint-mid);

border-top: 3px solid var(--paint-light);

border-left: 3px solid var(--paint-light);

border-right: 3px solid var(--paint-shadow);

border-bottom:3px solid var(--paint-shadow);

padding: 14px 18px;

border-radius: 0;

margin: ~~8px~~ 0;

padding: 14px 18px;

color: var(--paint-text);

margin: 10px 0;

box-shadow: 1px 1px 0 var(--paint-shadow), 0 0 20px rgba(0,229,255,0.15);

color: var(--paint-text);

position: relative;

box-shadow:

1px 1px 0 var(--paint-shadow),

0 0 20px rgba(0, 229, 255, 0.20);

position: relative;

}

/* Paint box title bar */

.wc-paint-box::before {

content: attr(data-title);

display: block;

background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%);

color: white;

font-family: var(--wc-pixel);

font-size: 7px;

padding: 4px 8px;

margin: -14px -18px 10px -18px;

letter-spacing: 0.04em;

}

/* Neon cyan panel */

.wc-cyber-box {

background: rgba(0,13,26,0.92);

background: rgba(0, 13, 26, 0.92);

border: 2px solid var(--wc-cyan);

border-radius: 4px;

padding: 14px 18px;

margin: ~~8px~~ 0;

margin: 10px 0;

box-shadow: 0 0 8px var(--wc-cyan), 0 0 30px var(--wc-cyan-glow);

box-shadow:

color: var(--wc-pixel-white);

0 0 8px var(--wc-cyan),

position: relative;

0 0 30px var(--wc-cyan-glow),

~~overflow: hidden~~;

inset 0 0 20px rgba(0, 229, 255, 0.04);

color: var(--wc-pixel-white);

position: relative;

}

.wc-cyber-box::before {

content: '';

position: absolute;

top: 0; left: 0; right: 0;

height: 2px;

background: linear-gradient(90deg, transparent, var(--wc-cyan), transparent);

animation: wc-scan-line 3s linear infinite;

}

@keyframes wc-scan-line {

0% { top: 0; opacity: 1; }

100% { top: 100%; opacity: 0; }

}

/* Magenta alert box */

.wc-magenta-box {

background: rgba(26,0,20,0.90);

background: rgba(26, 0, 20, 0.90);

border: 2px solid var(--wc-magenta);

border-radius: 4px;

padding: 14px 18px;

margin: ~~8px~~ 0;

margin: 10px 0;

box-shadow: 0 0 20px var(--wc-magenta-glow);

color: var(--wc-pixel-white);

}

/* Lime data box */

.wc-data-box {

background: rgba(0,10,0,0.90);

background: rgba(0, 10, 0, 0.90);

border: 2px solid var(--wc-lime);

border-radius: 4px;

padding: 14px 18px;

margin: ~~8px~~ 0;

margin: 10px 0;

box-shadow: 0 0 16px var(--wc-lime-glow);

color: var(--wc-lime);

font-family: var(--wc-mono);

font-family: var(--wc-mono), monospace;

}

.wc-~~construction~~ {

/* ── Neon Tags / pills ── */

display: ~~flex;~~

.wc-tag {

~~align~~-~~items: center~~;

display: inline-block;

~~gap~~: 10px;

padding: 3px 10px;

~~padding: 8px 12px;~~

border-radius: var(--wc-radius-pill);

~~background: repeating-linear-gradient(~~

font-family: var(--wc-pixel);

~~-45deg,~~

font-size: 6px;

~~rgba(255,140,0,0.10),~~

letter-spacing: 0.06em;

~~rgba(255,140,0,0.10) 8px,~~

text-transform: uppercase;

~~rgba(0,0,0,0.04) 8px,~~

border: 1.5px solid currentColor;

~~rgba(0,0,0,0.04) 16px~~

margin: 2px 3px;

);

~~border: 2px dashed #ff8c00;~~

~~border-left: 4px solid #ff8c00;~~

border-radius~~: 4px;~~

~~font-family~~: var(--wc-~~pixel);~~

~~font-size: 7px;~~

~~color: #ffb347;~~

~~margin: 8px 0;~~

~~box~~-~~shadow: 0 0 10px rgba(255,140,0,0.20~~);

}

~~.wc-quote {~~

~~border-left: 4px solid var(--wc-purple);~~

~~padding: 12px 18px 12px 20px;~~

~~background: rgba(139,0,255,0.06);~~

~~border-radius: 0 4px 4px 0;~~

font-~~style: italic;~~

~~color~~: var(--wc-pixel~~-white~~);

~~margin: 8px 0;~~

~~position: relative;~~

~~box-shadow: 0 0 12px var(--wc-purple-glow);~~

}

~~.wc-quote::before {~~

~~content: '"';~~

~~position: absolute;~~

~~left: 6px; top: 2px;~~

font-size: ~~2.5em~~;

~~color: var(~~-~~-wc-purple);~~

~~opacity~~: 0.5;

~~line~~-~~height~~: 1;

~~font-family~~: ~~Georgia, serif~~;

~~text-shadow~~: ~~0 0 10px var(--wc-purple)~~;

}

.wc-tag-cyan { color: var(--wc-cyan); background: rgba(0,229,255,0.12); box-shadow: 0 0 8px var(--wc-cyan-glow); }

.wc-tag-magenta { color: var(--wc-magenta); background: rgba(255,0,204,0.12); box-shadow: 0 0 8px var(--wc-magenta-glow); }

.wc-tag-lime { color: var(--wc-lime); background: rgba(57,255,20,0.10); box-shadow: 0 0 8px var(--wc-lime-glow); }

.wc-tag-purple { color: var(--wc-purple); background: rgba(139,0,255,0.12); box-shadow: 0 0 8px var(--wc-purple-glow); }

.wc-tag-pink { color: #ff69b4; background: rgba(255,105,180,0.12); box-shadow: 0 0 8px rgba(255,105,180,0.3); }

.wc-tag-white { color: var(--wc-pixel-white); background: rgba(232,232,240,0.10); }

/* ── Info tiles ── */

.wc-info-tile {

display: inline-block;

padding: 8px 12px;

background: white;

border-radius: 0;

border-top: 2px solid var(--paint-shadow);

/* Inset paint panel */

border-left: 2px solid var(--paint-shadow);

background: white;

border-right: 2px solid var(--paint-light);

border-top: 2px solid var(--paint-shadow);

border-bottom:2px solid var(--paint-light);

border-left: 2px solid var(--paint-shadow);

margin: 4px;

border-right: 2px solid var(--paint-light);

vertical-align: top;

border-bottom:2px solid var(--paint-light);

box-shadow: 0 0 12px rgba(0,229,255,0.15);

margin: 4px;

vertical-align: top;

box-shadow: 0 0 12px rgba(0, 229, 255, 0.20);

}

.wc-info-label {

font-family: var(--wc-pixel);

font-family: var(--wc-pixel) !important;

font-size: 5px;

font-size: 5px !important;

color: var(--paint-shadow);

text-transform: uppercase;

letter-spacing: 0.08em;

display: block;

margin-bottom: 4px;

}

.wc-info-value {

font-weight: 700;

font-size: 0.95em;

color: var(--paint-text);

display: block;

font-family: var(--wc-body);

}

/* ── Pixel label text ── */

.wc-pixel-label {

font-family: var(--wc-pixel);

font-family: var(--wc-pixel) !important;

font-size: 6px;

font-size: 6px !important;

color: var(--wc-cyan);

letter-spacing: 0.08em;

text-transform: uppercase;

line-height: 2.2;

text-shadow: 0 0 6px var(--wc-cyan);

}

.wc-~~scroll~~-~~demo {~~

/* ── Construction notice ── */

background: rgba(13,13,43,0.90);

.wc-construction {

border: 2px solid var(--wc-~~cyan~~);

display: flex;

~~border~~-~~radius~~: ~~4px~~;

align-items: center;

~~padding~~: ~~14px 18px~~;

gap: 10px;

~~max-height~~: ~~160px;~~

padding: 8px 12px;

~~overflow-y: scroll~~;

background: repeating-linear-gradient(

box-shadow: 0 0 ~~14px var~~(~~--wc-cyan-glow~~);

-45deg,

rgba(255, 140, 0, 0.10),

rgba(255, 140, 0, 0.10) 8px,

rgba(0, 0, 0, 0.04) 8px,

rgba(0, 0, 0, 0.04) 16px

);

border: 2px dashed #ff8c00;

border-left: 4px solid #ff8c00;

border-radius: 4px;

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

color: #ffb347;

margin: 10px 0;

box-shadow: 0 0 10px rgba(255, 140, 0, 0.25);

}

~~.wc-scroll-demo p { margin: 0.3rem 0; }~~

/* ~~Scrollbars~~ */

/* ── Quote block ── */

.wc-quote {

border-left: 4px solid var(--wc-purple);

padding: 12px 18px 12px 20px;

background: rgba(139, 0, 255, 0.06);

border-radius: 0 4px 4px 0;

font-style: italic;

color: var(--wc-pixel-white);

margin: 12px 0;

position: relative;

box-shadow: 0 0 12px var(--wc-purple-glow);

}

.wc-quote::before {

content: '"';

position: absolute;

left: 6px;

top: 2px;

font-size: 2.5em;

color: var(--wc-purple);

opacity: 0.5;

line-height: 1;

font-family: Georgia, serif;

text-shadow: 0 0 10px var(--wc-purple);

}

/* ── Legacy aliases (fa- prefix) for backward compat ── */

.fa-glass-box { background: rgba(13,13,43,0.88); border: 2px solid var(--wc-cyan); border-radius: var(--wc-radius); padding: 16px 20px; margin: 12px 0; box-shadow: 0 0 20px var(--wc-cyan-glow); }

.fa-tag { display: inline-block; padding: 3px 10px; border-radius: var(--wc-radius-pill); font-family: var(--wc-pixel); font-size: 6px; border: 1px solid currentColor; margin: 2px 3px; text-transform: uppercase; letter-spacing: 0.05em; }

.fa-tag-blue { color: var(--wc-cyan); background: rgba(0,229,255,0.12); box-shadow: 0 0 6px var(--wc-cyan-glow); }

.fa-tag-green { color: var(--wc-lime); background: rgba(57,255,20,0.10); box-shadow: 0 0 6px var(--wc-lime-glow); }

.fa-tag-pink { color: var(--wc-magenta); background: rgba(255,0,204,0.12); box-shadow: 0 0 6px var(--wc-magenta-glow); }

.fa-tag-purple { color: var(--wc-purple); background: rgba(139,0,255,0.12); box-shadow: 0 0 6px var(--wc-purple-glow); }

.fa-info-tile { display: inline-block; padding: 8px 12px; border-top: 2px solid var(--paint-shadow); border-left: 2px solid var(--paint-shadow); border-right: 2px solid var(--paint-light); border-bottom: 2px solid var(--paint-light); background: white; margin: 4px; vertical-align: top; }

.fa-info-label { font-family: var(--wc-pixel) !important; font-size: 5px !important; color: var(--paint-shadow); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 4px; }

.fa-info-value { font-weight: 700; font-size: 0.92em; color: var(--paint-text); display: block; }

.fa-pixel-label { font-family: var(--wc-pixel) !important; font-size: 6px !important; color: var(--wc-cyan); letter-spacing: 0.08em; text-transform: uppercase; line-height: 2.2; text-shadow: 0 0 6px var(--wc-cyan); }

.fa-construction { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: repeating-linear-gradient(-45deg, rgba(255,140,0,0.10), rgba(255,140,0,0.10) 8px, transparent 8px, transparent 16px); border: 2px dashed #ff8c00; border-radius: 4px; font-family: var(--wc-pixel) !important; font-size: 6px !important; color: #ffb347; margin: 10px 0; }

/* ══════════════════════════════════════════════

SECTION 21: SCROLLBAR — NEON ON VOID

══════════════════════════════════════════════ */

.searchmatch {

background: rgba(0, 229, 255, 0.25) !important;

border-radius: 2px;

padding: 0 2px;

color: var(--wc-cyan);

text-shadow: 0 0 6px var(--wc-cyan);

}

::selection {

background: rgba(0, 229, 255, 0.30) !important;

color: white !important;

}

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track {

background: var(--wc-void);

border-left: 1px solid rgba(0,229,255,0.08);

border-left: 1px solid rgba(0, 229, 255, 0.10);

}

::-webkit-scrollbar-thumb {

background: linear-gradient(180deg, var(--wc-cyan), var(--wc-purple));

border: 1px solid var(--wc-void);

border-radius: 0;

box-shadow: 0 0 6px var(--wc-cyan-glow);

border: 1px solid var(--wc-void);

box-shadow: 0 0 6px var(--wc-cyan-glow);

}

::-webkit-scrollbar-thumb:hover {

background: linear-gradient(180deg, var(--wc-magenta), var(--wc-cyan));

box-shadow: 0 0 10px var(--wc-magenta-glow);

}

/* ══════════════════════════════════════════════

SECTION 22: MEDIAWIKI SIDEBAR — MS PAINT PANEL

The primary sidebar is styled as an MS Paint tool

panel: raised gray bevel exterior, Windows-style

section headers (blue title bars), tool button

rows for nav links, inset search field.

Neon glows pop against the gray for webcore contrast.

══════════════════════════════════════════════ */

#mw-site-navigation,

#mw-related-navigation {

/* MS Paint raised panel — the classic gray sidebar */

background: var(--paint-mid) !important;

border-top: 3px solid var(--paint-light) !important;

border-left: 3px solid var(--paint-light) !important;

border-right: 3px solid var(--paint-shadow) !important;

border-bottom:3px solid var(--paint-shadow) !important;

border-radius: 0 !important;

box-shadow:

2px 2px 0 var(--paint-shadow),

/* Neon glow escaping the panel edges */

0 0 0 1px var(--wc-void),

0 0 20px rgba(0, 229, 255, 0.35),

0 0 50px rgba(0, 229, 255, 0.10) !important;

padding: 4px !important;

display: flex;

flex-direction: column;

gap: 4px;

overflow: hidden;

position: relative;

backdrop-filter: none !important;

-webkit-backdrop-filter: none !important;

}

/* ── Windows title bar strip at sidebar top ── */

#mw-site-navigation::before,

#mw-related-navigation::before {

content: '■ WEBCORE WIKI ─ ◻ ✕';

position: absolute;

top: 0; left: 0; right: 0;

height: 20px;

line-height: 20px;

background: linear-gradient(90deg, #000080 0%, #1084d0 60%, #000080 100%);

color: white;

font-family: 'Press Start 2P', monospace;

font-size: 5px;

letter-spacing: 0.04em;

padding: 0 6px;

pointer-events: none;

z-index: 2;

/* Neon glow on the title bar */

box-shadow: 0 2px 0 var(--wc-cyan), 0 0 14px rgba(0,229,255,0.4);

}

/* ── Scan-line animation across sidebar ── */

#mw-site-navigation::after,

#mw-related-navigation::after {

content: '';

position: absolute;

top: 0; left: 0; right: 0;

height: 2px;

background: linear-gradient(90deg,

transparent 0%,

rgba(0, 229, 255, 0.6) 40%,

rgba(0, 229, 255, 0.6) 60%,

transparent 100%

);

animation: wc-sidebar-scan 4s linear infinite;

pointer-events: none;

z-index: 3;

}

@keyframes wc-sidebar-scan {

0% { top: 20px; opacity: 0.8; }

80% { opacity: 0.4; }

100% { top: 100%; opacity: 0; }

}

/* ── Portlet containers — Paint inset panels ── */

#p-navigation, #p-Explore, #p-managewiki-sidebar-header, #p-STAFF, #p-boggio,

#p-tb, #p-cactions, #p-pagemisc, #p-userpagetools, #p-birthday, #p-event,

#p-content, #p-more_categories, #p-wiki_tools {

background: transparent !important;

border: none !important;

border-radius: 0 !important;

padding: 0 !important;

margin-bottom: 0 !important;

box-shadow: none !important;

}

/* ~~══════════════════════════════════════════~~

/* ── Sidebar portlet headings — Windows dialog group box style ── */

~~CSS OUTPUT TAB~~

#mw-site-navigation h3,

~~══════════════════════════════════════════~~ */

#mw-related-navigation h3,

.sidebar-chunk h3,

#p-navigation h3,

#p-Explore h3,

#p-content h3,

#p-tb h3,

#p-cactions h3 {

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

color: white !important;

text-transform: uppercase !important;

letter-spacing: 0.08em !important;

/* Windows blue title bar */

background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;

padding: 4px 8px !important;

margin: 8px 0 4px 0 !important;

border: none !important;

/* Neon underline */

box-shadow: 0 2px 0 var(--wc-cyan), 0 0 12px rgba(0,229,255,0.35) !important;

text-shadow: none;

position: relative;

z-index: 1;

margin-top: 24px !important;

}

.wc-~~css~~-~~display~~ {

/* ── Nav link buttons — Paint raised buttons with neon hover ── */

display: flex;

#mw-site-navigation .sidebar-chunk ul li a,

~~flex~~-~~direction~~: ~~column~~;

#mw-related-navigation .sidebar-chunk ul li a,

~~height~~: ~~calc~~(~~100vh~~ - ~~130px~~);

#p-navigation ul li a,

#p-Explore ul li a,

#p-content ul li a,

#p-tb ul li a,

#mw-site-navigation ul li a,

#mw-related-navigation ul li a {

display: flex !important;

align-items: center !important;

gap: 6px !important;

padding: 4px 8px !important;

border-radius: 0 !important;

/* Raised paint button */

background: var(--paint-mid) !important;

border-top: 2px solid var(--paint-light) !important;

border-left: 2px solid var(--paint-light) !important;

border-right: 2px solid var(--paint-shadow) !important;

border-bottom:2px solid var(--paint-shadow) !important;

color: var(--paint-text) !important;

font-family: var(--wc-pixel) !important;

font-weight: normal !important;

font-size: 7px !important;

text-decoration: none !important;

transition: all 0.05s ease !important;

position: relative !important;

overflow: hidden !important;

margin: 2px 0 !important;

box-shadow: none !important;

letter-spacing: 0.02em !important;

z-index: 1;

}

~~.wc~~-~~css~~-~~header {~~

/* Hover: inset (pressed) look + neon glow escapes */

~~display~~: ~~flex;~~

#mw-site-navigation ul li a:hover,

~~align~~-~~items~~: ~~center;~~

#mw-related-navigation ul li a:hover,

~~justify~~-content: ~~space~~-~~between;~~

#p-navigation ul li a:hover,

~~padding~~: ~~6px 12px;~~

#p-Explore ul li a:hover,

background: ~~linear~~-~~gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%~~);

#p-content ul li a:hover,

~~color: white~~;

#p-tb ul li a:hover {

~~font~~-~~family~~: var(--wc-~~pixel~~);

background: var(--paint-light) !important;

~~font~~-~~size~~: ~~6.5px;~~

border-top: 2px solid var(--paint-shadow) !important;

~~letter~~-~~spacing: 0.04em~~;

border-left: 2px solid var(--paint-shadow) !important;

border-bottom: 2px solid var(--wc-~~cyan~~);

border-right: 2px solid var(--paint-light) !important;

box-shadow: 0 ~~2px 10px~~ rgba(0,229,255,0.3);

border-bottom:2px solid var(--paint-light) !important;

color: var(--paint-text) !important;

transform: none !important;

/* Neon glow leaks from edges */

box-shadow: 0 0 8px rgba(0,229,255,0.50), inset 0 0 4px rgba(0,229,255,0.10) !important;

}

.wc-~~copy~~-~~btn~~ {

/* Active page — selected (dark blue) */

background: var(--paint-~~mid~~);

#mw-site-navigation ul li.active a,

border-top: 2px solid var(--paint-~~light~~);

#mw-site-navigation ul li a.active,

border-left: 2px solid var(--paint-~~light~~);

#p-navigation ul li.active a {

border-right: 2px solid var(--paint-~~shadow~~);

background: var(--paint-select) !important;

border-bottom:2px solid var(--paint-~~shadow~~);

border-top: 2px solid var(--paint-shadow) !important;

~~font-family: var(--wc-pixel);~~

border-left: 2px solid var(--paint-shadow) !important;

~~font-size: 5.5px;~~

border-right: 2px solid var(--paint-light) !important;

color: var(--paint-~~text~~);

border-bottom:2px solid var(--paint-light) !important;

~~padding: 3px 8px;~~

color: var(--paint-select-txt) !important;

~~cursor: pointer;~~

box-shadow: 0 0 12px rgba(0,229,255,0.6) !important;

~~letter~~-~~spacing~~: 0~~.04em;~~

~~transition: all~~ 0.~~05s~~;

}

~~.wc~~-~~copy~~-~~btn:hover {~~

~~background: var(~~--~~paint~~-~~light)~~;

/* Strip list styles */

~~box-shadow~~: 0 0 ~~8px rgba(0,229,255,0.4)~~;

#mw-site-navigation ul,

#mw-related-navigation ul,

#p-navigation ul,

#p-Explore ul,

#p-content ul,

#p-tb ul {

list-style: none !important;

padding: 0 !important;

margin: 0 !important;

}

~~.wc~~-~~copy~~-~~btn:active {~~

#mw-site-navigation ul li,

~~border~~-~~top: 2px solid var(~~--~~paint-shadow);~~

#mw-related-navigation ul li,

~~border~~-~~left: 2px solid var(--paint-shadow);~~

#p-navigation ul li,

~~border-right~~: ~~2px solid var(--paint-light)~~;

#p-Explore ul li {

~~border-bottom~~:~~2px solid var(--paint-light)~~;

margin: 0 !important;

padding: 0 !important;

}

~~.wc~~-~~css-pre~~ {

/* ── Personal tools — inset paint panel ── */

~~flex~~: 1;

#p-personal {

~~margin: 0~~;

background: var(--paint-mid) !important;

~~padding~~: ~~16px 20px~~;

border-top: 2px solid var(--paint-shadow) !important;

~~background~~: var(--wc-~~void~~);

border-left: 2px solid var(--paint-shadow) !important;

~~color~~: var(--wc-~~lime~~);

border-right: 2px solid var(--paint-light) !important;

font-family: var(--wc-~~mono~~);

border-bottom:2px solid var(--paint-light) !important;

font-size: 0~~.72rem~~;

border-radius: 0 !important;

~~line-height~~: 1.6;

padding: 4px 6px !important;

~~overflow~~: ~~auto~~;

box-shadow: 0 0 10px rgba(0,229,255,0.25) !important;

border: none;

}

~~white~~-~~space~~: ~~pre~~;

#p-personal ul li a {

~~box~~-~~shadow~~: ~~inset~~ 0 ~~0 20px rgba~~(~~0,0,0,0.6~~);

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

font-weight: normal !important;

color: var(--paint-text) !important;

padding: 2px 4px !important;

border-radius: 0 !important;

transition: background 0.05s !important;

background: transparent !important;

border: none !important;

box-shadow: none !important;

margin: 1px 0 !important;

text-decoration: underline !important;

letter-spacing: 0.02em !important;

}

#p-personal ul li a:hover {

background: var(--paint-select) !important;

color: white !important;

transform: none !important;

text-decoration: none !important;

text-shadow: none !important;

}

.wc-~~css~~-~~pre code~~ {

/* ── Search — inset paint field ── */

font-family: ~~inherit~~;

#p-search {

color: ~~inherit~~;

background: transparent !important;

background: ~~transparent~~;

border: none !important;

border: ~~none~~;

box-shadow: none !important;

font-size: ~~inherit~~;

padding: 2px 0 !important;

box-shadow: none;

margin-bottom: 2px !important;

~~display~~: ~~block~~;

position: relative;

z-index: 1;

}

#p-search h3 {

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

color: white !important;

text-transform: uppercase !important;

letter-spacing: 0.08em !important;

background: linear-gradient(90deg, #000080 0%, #1084d0 50%, #000080 100%) !important;

padding: 4px 8px !important;

margin: 0 0 4px 0 !important;

box-shadow: 0 2px 0 var(--wc-cyan) !important;

text-shadow: none !important;

}

#searchInput, .mw-searchInput {

background: white !important;

/* Inset field */

border-top: 2px solid var(--paint-shadow) !important;

border-left: 2px solid var(--paint-shadow) !important;

border-right: 2px solid var(--paint-light) !important;

border-bottom:2px solid var(--paint-light) !important;

border-radius: 0 !important;

color: var(--paint-text) !important;

font-family: var(--wc-pixel) !important;

font-size: 7px !important;

padding: 4px 6px !important;

box-shadow: none !important;

transition: box-shadow 0.2s !important;

width: 100% !important;

box-sizing: border-box !important;

}

#searchInput:focus, .mw-searchInput:focus {

background: white !important;

border-color: var(--paint-shadow) !important;

box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.50) !important;

outline: none !important;

}

#mw-searchButton, #searchButton {

background: var(--paint-mid) !important;

border-top: 2px solid var(--paint-light) !important;

border-left: 2px solid var(--paint-light) !important;

border-right: 2px solid var(--paint-shadow) !important;

border-bottom:2px solid var(--paint-shadow) !important;

border-radius: 0 !important;

color: var(--paint-text) !important;

font-family: var(--wc-pixel) !important;

font-size: 6px !important;

padding: 5px 10px !important;

cursor: pointer !important;

box-shadow: none !important;

transition: all 0.05s !important;

margin-top: 3px !important;

letter-spacing: 0.04em;

text-transform: uppercase;

}

#mw-searchButton:hover, #searchButton:hover {

background: var(--paint-light) !important;

border-top: 2px solid var(--paint-shadow) !important;

border-left: 2px solid var(--paint-shadow) !important;

border-right: 2px solid var(--paint-light) !important;

border-bottom:2px solid var(--paint-light) !important;

transform: none !important;

box-shadow: 0 0 10px rgba(0,229,255,0.40) !important;

}

/* ~~══════════════════════════════════════════~~

/* ── Sidebar stat/btn88 items stay above bg ── */

~~BOTTOM BAR~~

.wc-hit-digit, .fa-hit-digit,

~~══════════════════════════════════════════ */~~

.wc-hit-counter, .fa-hit-counter,

.wc-sidebar-stats, .fa-sidebar-stats,

.wc-btn88-row, .fa-btn88-row,

.wc-btn88, .fa-btn88 { position: relative; z-index: 1; }

~~.wc-bottombar {~~

/* Sidebar chunk text */

~~display: flex;~~

#mw-site-navigation .sidebar-chunk,

~~align-items: center;~~

#mw-related-navigation .sidebar-chunk {

~~gap: 0;~~

position: relative;

~~padding: 2px 6px;~~

z-index: 1;

~~background: var(~~--~~paint~~-~~mid);~~

~~border-top: 2px solid var(--paint-shadow);~~

~~font-family: var(--wc-pixel);~~

~~font-size: 5.5px;~~

~~color: var(--paint~~-~~text);~~

~~letter~~-~~spacing: 0~~.~~04em;~~

~~user~~-~~select: none;~~

position: ~~sticky;~~

~~bottom: 0~~;

z-index: ~~99;~~

~~box-shadow: 0 -2px 10px rgba(0,229,255,0.15)~~;

}

.wc-~~bottombar span~~ {

~~padding: 2px 8px;~~

/* ══════════════════════════════════════════════

~~border~~-~~top~~: ~~1px solid~~ var(--~~paint~~-~~shadow~~);

SECTION 23: HEADING SECTION DIVIDERS

~~border-left~~: ~~1px solid~~ var(--~~paint~~-~~shadow~~);

══════════════════════════════════════════════ */

~~border~~-~~right~~: ~~1px solid var(~~--~~paint-light)~~;

border-~~bottom~~:~~1px solid~~ var(--~~paint~~-~~light~~);

.mw-heading h2,

.mw-parser-output h2 {

font-family: 'LEMON MILK', 'Fredoka', var(--wc-body);

color: var(--wc-cyan);

font-size: 1.5em;

margin-top: 24px;

padding-bottom: 6px;

border: none;

position: relative;

text-shadow: 0 0 10px var(--wc-cyan), 0 0 30px rgba(0,229,255,0.3);

}

/* ~~══════════════════════════════════════════~~

.mw-heading h2::after,

~~ANIMATION CLASSES (utility demos)~~

.mw-parser-output h2::after {

~~══════════════════════════════════════════~~ */

content: '';

display: block;

position: absolute;

bottom: -2px; left: 0; right: 0;

height: 2px;

background: linear-gradient(90deg,

var(--wc-magenta) 0%,

var(--wc-cyan) 40%,

var(--wc-lime) 70%,

var(--wc-purple) 100%

);

box-shadow: 0 0 8px rgba(0,229,255,0.5);

}

/* ══════════════════════════════════════════════

SECTION 24: WEBCORE ANIMATIONS

Pure CSS animations for visual flair.

══════════════════════════════════════════════ */

/* Neon flicker effect for headings/titles */

@keyframes wc-neon-flicker {

0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

text-shadow: 0 0 5px var(--wc-cyan), 0 0 15px var(--wc-cyan), 0 0 40px rgba(0,229,255,0.5);

text-shadow:

~~box-shadow: 0 0 5px rgba(0,229,255,0.4);~~

0 0 5px var(--wc-cyan),

}

0 0 15px var(--wc-cyan),

20%, 24%, 55% {

0 0 40px rgba(0,229,255,0.5);

text-shadow: none;

}

~~box~~-~~shadow~~: ~~none~~;

20%, 24%, 55% {

}

text-shadow: none;

}

/* CRT scanline animation */

@keyframes wc-crt-scan {

0% { background-position: 0 0; }

100% { background-position: 0 100px; }

}

/* Pixel blink — for status indicators */

@keyframes wc-pixel-blink {

0%, 49% { opacity: 1; }

50%, 100% { opacity: 0; }

}

/* Neon pulse glow on borders */

@keyframes wc-border-pulse {

0%, 100% { box-shadow: 0 0 6px ~~rgba~~(~~0,229,255,0.28~~); }

0%, 100% { box-shadow: 0 0 6px var(--wc-cyan-glow); }

50% { box-shadow: 0 0 20px ~~rgba~~(~~0,229,255,0.28~~), 0 0 40px rgba(0,229,255,0.15); }

50% { box-shadow: 0 0 20px var(--wc-cyan-glow), 0 0 40px rgba(0,229,255,0.2); }

}

/* Use these in wikitext with inline style or wc-animate-* classes: */

.wc-animate-flicker { animation: wc-neon-flicker 5s infinite; }

.wc-animate-blink { animation: wc-pixel-blink 1s step-end infinite; }

.wc-animate-pulse { animation: wc-border-pulse 2s ease-in-out infinite; }

/* ~~══════════════════════════════════════════~~

/* ══════════════════════════════════════════════

~~SELECTION~~

END — Webcore "Static Dream" MediaWiki Skin

~~══════════════════════════════════════════ */~~

Colors: Void Black × Cyber Cyan × Hot Magenta

Lime Signal × Purple Glow × Paint Gray

:~~:selection {~~

Style: MS Paint Sidebar × Y2K Dark Net × Neon

~~background~~: ~~rgba(0,229,255,0.30) !important;~~

"404: aesthetic not found — or is it?"

~~color: white !important;~~

══════════════════════════════════════════════ */

}