/* Classic Windows 95/98 Aesthetic */

/* Classic Windows Scrollbar Styling */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background-color: #eee;
    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                      linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--win-gray);
    border: 1px solid;
    border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
    box-shadow: inset 1px 1px 0px var(--win-white);
}

::-webkit-scrollbar-thumb:active {
    border-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray);
}

::-webkit-scrollbar-button {
    background-color: var(--win-gray);
    border: 1px solid;
    border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
    width: 16px;
    height: 16px;
}

* {
    box-sizing: border-box;
}

:root {
    --win-gray: #c0c0c0;
    --win-white: #ffffff;
    --win-dark-gray: #808080;
    --win-black: #000000;
    --win-blue: #000080;
    --win-blue-light: #1084d0;
    --win-text: #000000;
    
    /* Win2000/XP cursors (local .cur assets from RW-Designer classic-1 set) */
    --cursor-win2k-arrow: url("cursors/win2k/Cursor_1.cur");
    --cursor-win2k-hand: url("cursors/win2k/Cursor_15.cur");

    /* Outset border (classic button/window feel) */
    --border-outset: 2px solid;
    --border-outset-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
    
    /* Inset border (classic input/content feel) */
    --border-inset: 2px solid;
    --border-inset-color: var(--win-dark-gray) var(--win-white) var(--win-white) var(--win-dark-gray);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "MS Sans Serif", Arial, sans-serif;
    color: var(--win-text);
    background-color: #008080; /* Classic Teal Desktop */
    height: 100vh;
    overflow: hidden; /* Prevent body scroll, use window scroll */
    padding: 0;
}

/* Wallpaper background removed for classic teal */
.aero-bg { display: none; }
.aero-bubbles { display: none; }

/* Cursor Management */
body.is-loading, body.is-loading * {
    cursor: wait !important; /* Windows Hourglass/Spinner */
}

body.is-loaded {
    cursor: var(--cursor-win2k-arrow), default;
}

/* Ensure interactive elements show the hand cursor when loaded */
body.is-loaded a, 
body.is-loaded button, 
body.is-loaded .toolbar-btn,
body.is-loaded .menu-item,
body.is-loaded .nav-link,
body.is-loaded .sidebar-nav-link,
body.is-loaded .content-link,
body.is-loaded .read-more,
body.is-loaded .mister-mime-link {
    cursor: var(--cursor-win2k-hand), pointer !important;
}

/* Reading mode: maximize space for long writeups */
body.reading-mode .header {
    display: none !important;
}

body.reading-mode .footer {
    display: none !important;
}

/* Mini Windows 2000-style window (home page) */
.mini-win2k {
    width: 100%;
    max-width: 100%;
    background: var(--win-gray);
    border: var(--border-outset);
    border-color: var(--border-outset-color);
}

.mini-win2k--home {
    margin: 0;
}

.mini-win2k-titlebar {
    background: linear-gradient(90deg, var(--win-blue), var(--win-blue-light));
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
    overflow: hidden;
    min-width: 0;
}

.mini-win2k-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mini-win2k-body {
    padding: 10px;
}

.mini-win2k-terminal {
    background: #000000;
    color: #cfcfcf; /* closer to classic console light gray */
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    padding: 12px 12px 14px 12px;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.6;
}

.mini-hl {
    color: #ffffff; /* no neon highlight */
    font-weight: 700;
}

.mini-dim {
    color: #9a9a9a;
}

.mini-cursor {
    display: inline-block;
    animation: miniBlink 0.95s steps(1) infinite;
}

@keyframes miniBlink {
    50% { opacity: 0; }
}

/* Home: use more horizontal space */
body.home-mode .main-content {
    padding: 8px;
}

/* Home: make the WHOAMI window fill available height */
body.home-mode .main-content {
    display: flex;
    flex-direction: column;
}

body.home-mode .main-content .post-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.home-mode .main-content .post-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.home-mode .mini-win2k--home {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.home-mode .mini-win2k-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

body.home-mode .mini-win2k-terminal {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Writeup top Back bar */
.vuln-writeup .writeup-topbar {
    background: var(--win-white);
    padding: 10px 0 12px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 14px;
}

.mister-mime-img {
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 2px solid var(--win-blue); 
    filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
    transition: transform 0.05s;
    transform-origin: 50% 90%;
}

/* "Dancing" Mister Mime (CSS animation, PNG-friendly) */
body.is-loaded .mister-mime-link {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: mimeWiggle 2200ms ease-in-out infinite;
}

body.is-loaded .mister-mime-img {
    display: inline-block;
    animation: mimeBounce 1400ms ease-in-out infinite;
}

body.is-loaded .mister-mime-link:active,
body.is-loaded .mister-mime-link:active .mister-mime-img {
    animation-play-state: paused;
}

.mister-mime-link:active .mister-mime-img {
    transform: translate(2px, 2px);
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

@keyframes mimeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.02, 0.98); }
}

@keyframes mimeWiggle {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(1px) rotate(-3deg); }
    50% { transform: translateX(-1px) rotate(3deg); }
    75% { transform: translateX(1px) rotate(-2deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.is-loaded .mister-mime-link,
    body.is-loaded .mister-mime-img {
        animation: none !important;
    }
}

.content-link {
    color: blue;
    text-decoration: underline;
}

.sidebar-nav-link {
    cursor: pointer;
}

/* Desktop Icons */
.desktop-icons {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1;
    flex-direction: column;
    gap: 10px;
}

.desktop-icons.loaded {
    opacity: 1;
}

/* Minimize to "XP-ish" desktop */
body.window-minimized #main-window {
    display: none !important;
}

body.window-minimized {
    /* Prefer the real XP "Bliss" wallpaper if present locally:
       put it at: images/bliss.jpg (or change the filename below).
       If it’s missing, the CSS gradients below still render. */
    background-color: #67b7ff;
    background-image:
        url("images/bliss.jpg"),
        radial-gradient(1200px 700px at 55% 125%, #1f7d17 0%, #2fa31f 55%, transparent 56%),
        radial-gradient(1000px 560px at 20% 130%, #2a8f1d 0%, #3dbb2c 52%, transparent 53%),
        radial-gradient(260px 140px at 20% 18%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.0) 70%),
        radial-gradient(320px 170px at 45% 12%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.0) 72%),
        radial-gradient(280px 150px at 70% 20%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.0) 72%),
        linear-gradient(#67b7ff 0%, #bfe9ff 55%, #e9fbff 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.window-minimized .desktop-icons {
    display: flex;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75px;
    text-align: center;
    padding: 5px;
    border: 1px solid transparent;
}

.desktop-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px dotted rgba(255, 255, 255, 0.5);
}

.desktop-icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.desktop-icon span {
    color: white;
    font-size: 11px;
    text-shadow: 1px 1px 1px black;
    word-wrap: break-word;
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: var(--win-gray);
    border-top: var(--border-outset);
    border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
    display: none; /* Hidden for loading */
    align-items: center;
    padding: 2px;
    z-index: 999;
}

.taskbar.loaded {
    display: flex;
}

.start-button {
    height: 22px;
    background-color: var(--win-gray);
    border: var(--border-outset);
    border-color: var(--border-outset-color);
    padding: 0 6px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 11px;
    margin-right: 5px;
}

.start-button:active {
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    padding: 1px 5px 0px 7px;
}

.taskbar-divider {
    width: 2px;
    height: 20px;
    border-left: 1px solid var(--win-dark-gray);
    border-right: 1px solid var(--win-white);
    margin: 0 5px;
}

.task-tabs {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 22px;
}

.task-tab {
    max-width: 160px;
    flex: 1;
    background-color: var(--win-gray);
    border: var(--border-outset);
    border-color: var(--border-outset-color);
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
}

.task-tab.active {
    background-color: #e0e0e0;
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    font-weight: bold;
}

.system-tray {
    background-color: var(--win-gray);
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    height: 22px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    font-size: 11px;
    margin-left: 5px;
}

#clock {
    min-width: 60px;
    text-align: right;
}

.win-2k-wifi {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 12px;
    margin-right: 8px;
    padding-bottom: 2px;
}

.win-2k-wifi div {
    width: 2px;
    background-color: #000080; /* Classic Win2k Blue for "active" */
    border: 1px solid;
    border-color: var(--win-white) var(--win-dark-gray) var(--win-dark-gray) var(--win-white);
    box-shadow: 1px 1px 0px var(--win-black);
}

.win-2k-wifi .bar1 { height: 3px; }
.win-2k-wifi .bar2 { height: 6px; }
.win-2k-wifi .bar3 { height: 9px; }
.win-2k-wifi .bar4 { height: 12px; }

/* Battery Icon */
.win-2k-battery {
    display: flex;
    align-items: center;
    margin-right: 8px;
    height: 12px;
}

.battery-body {
    width: 16px;
    height: 9px;
    border: 1px solid var(--win-black);
    background-color: var(--win-white);
    padding: 1px;
    position: relative;
}

.battery-level {
    width: 100%;
    height: 100%;
    background-color: #00ff00; /* Bright Green */
}

.battery-tip {
    width: 2px;
    height: 4px;
    background-color: var(--win-black);
}

/* Security Shield Icon */
.win-2k-shield {
    width: 12px;
    height: 13px;
    background-color: #ffd700; /* Gold/Yellow */
    border: 1px solid var(--win-black);
    border-radius: 0 0 6px 6px;
    margin-right: 8px;
    position: relative;
    overflow: hidden;
}

.shield-bolt {
    position: absolute;
    top: 2px;
    left: 4px;
    width: 2px;
    height: 6px;
    background-color: #000;
    transform: skewX(-15deg);
}

/* Speaker Icon */
.win-2k-speaker {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    position: relative;
    display: flex;
    align-items: center;
}

.speaker-body {
    width: 4px;
    height: 4px;
    background-color: var(--win-black);
    position: relative;
}

.speaker-body::after {
    content: "";
    position: absolute;
    left: 2px;
    top: -3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--win-black);
}

.speaker-waves {
    width: 4px;
    height: 8px;
    border-right: 2px solid var(--win-black);
    border-radius: 0 50% 50% 0;
    margin-left: 6px;
}

/* Classic Window Frame */
.window-frame {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: calc(100vh - 28px);
    background-color: var(--win-gray);
    border: none;
    box-shadow: none;
    padding: 2px;
    display: none; /* Hidden by default for animation */
    flex-direction: column;
    overflow: hidden;
}

/* Hidden parts for staggered loading */
.titlebar, .menubar, .toolbar, .header, .nav, .sidebar, .main-content, .footer {
    opacity: 0;
}

.main-content {
    background-color: var(--win-white);
    padding: 18px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.1s;
    height: 100%;
    min-height: 0;
}

.titlebar.loaded, .menubar.loaded, .toolbar.loaded, .header.loaded, .nav.loaded, .sidebar.loaded, .main-content.loaded, .footer.loaded {
    opacity: 1;
}

/* Boot Screen Animation */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #ffffff; /* Changed to white */
    font-family: "Courier New", Courier, monospace;
    padding: 20px;
    z-index: 9999;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.4;
}

.boot-line {
    margin-bottom: 5px;
    opacity: 0;
}

.boot-line.visible {
    opacity: 1;
}

.cursor {
    display: inline-block;
    width: 8px;
    height: 15px;
    background-color: #ffffff; /* Changed to white */
    animation: blink 0.8s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

#boot-screen.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
    pointer-events: none;
}

.titlebar {
    background: linear-gradient(90deg, var(--win-blue), var(--win-blue-light));
    padding: 3px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
}

.window-buttons {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.window-buttons span {
    width: 16px;
    height: 14px;
    background-color: var(--win-gray);
    border: 1px solid;
    border-color: var(--win-white) var(--win-black) var(--win-black) var(--win-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
}

/* Minimize Icon */
.btn-min::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 3px;
    width: 8px;
    height: 2px;
    background: black;
}

/* Maximize/Restore Icon (Two overlapping boxes for full-screen mode) */
.btn-max::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border: 1px solid black;
    border-top: 2px solid black;
    box-sizing: border-box;
}

.btn-max::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 7px;
    height: 7px;
    border: 1px solid black;
    border-top: 2px solid black;
    background: var(--win-gray);
    box-sizing: border-box;
    z-index: 1;
}

/* Close Icon (X) */
.btn-close::before, .btn-close::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 2px;
    background: black;
}

.btn-close::before {
    transform: rotate(45deg);
}

.btn-close::after {
    transform: rotate(-45deg);
}

.menubar {
    background-color: var(--win-gray);
    padding: 2px 5px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--win-dark-gray);
}

.menu-item {
    background: transparent;
    border: none;
    font-size: 11px;
    color: #000;
    cursor: pointer;
    padding: 2px 5px;
}

.menu-item:hover {
    background-color: var(--win-blue);
    color: white;
}

.toolbar {
    background-color: var(--win-gray);
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--win-dark-gray);
}

.toolbar-btn {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--win-gray);
    border: 1px solid transparent;
    font-size: 11px;
    padding: 2px 5px;
}

.toolbar-btn:hover {
    border: var(--border-outset);
    border-color: var(--border-outset-color);
}

.address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.address-input {
    flex: 1;
    background: #fff;
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    padding: 2px 5px;
    font-size: 11px;
}

/* Page content within window */
.container {
    padding: 0;
    background-color: var(--win-gray);
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.header {
    background-color: var(--win-white);
    border-bottom: var(--border-inset);
    border-color: var(--win-dark-gray);
    padding: 20px;
    margin-bottom: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header-content {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .sparkle-canvas { display: none !important; }
}

/* Mouse sparkle trail */
.sparkle-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
    animation: sparkleFade 0.7s ease-out forwards;
    will-change: transform, opacity;
    user-select: none;
}

@keyframes sparkleFade {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--sx, 8px), var(--sy, -18px)) scale(0.2) rotate(120deg);
        opacity: 0;
    }
}


.title {
    font-size: 32px;
    font-weight: bold;
    color: var(--win-blue);
    margin-bottom: 5px;
}

/* Floating hacker WordArt clichés */
.wordart-float-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.wordart-float {
    position: absolute;
    white-space: nowrap;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    animation: wordartPop 4s ease-in-out forwards;
    will-change: opacity, transform;
}

@keyframes wordartPop {
    0%   { opacity: 0; transform: scale(0.5) rotate(var(--wa-rot, 0deg)); }
    15%  { opacity: var(--wa-opacity, 0.35); transform: scale(1) rotate(var(--wa-rot, 0deg)); }
    75%  { opacity: var(--wa-opacity, 0.35); transform: scale(1) rotate(var(--wa-rot, 0deg)) translateY(-8px); }
    100% { opacity: 0; transform: scale(0.9) rotate(var(--wa-rot, 0deg)) translateY(-18px); }
}

/* Style variants */
.wordart-float.wa-jazz {
    font-family: Impact, "Arial Black", sans-serif;
    font-style: italic;
    color: #9b30ff;
    text-shadow: 2px 2px 0 #4a0080, 3px 3px 0 #2a004a;
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
}

.wordart-float.wa-neon {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    color: #39ff14;
    text-shadow: 0 0 7px #39ff14, 0 0 14px #00ff41, 0 0 2px #fff;
}

.wordart-float.wa-chrome {
    font-family: Impact, "Arial Black", sans-serif;
    background: linear-gradient(180deg, #fff 0%, #a8c8ff 30%, #3366cc 60%, #1a3366 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 2px 0 rgba(0,0,50,0.5));
}

.wordart-float.wa-fire {
    font-family: Impact, "Arial Black", sans-serif;
    background: linear-gradient(180deg, #fff200 0%, #ff6600 50%, #cc0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 2px 0 rgba(80,0,0,0.6));
}

.wordart-float.wa-matrix {
    font-family: "Courier New", monospace;
    font-weight: 700;
    color: #00ff41;
    text-shadow: 0 0 5px #00ff41, 1px 1px 0 #003300;
    letter-spacing: 2px;
}

.wordart-float.wa-pink {
    font-family: "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
    font-style: italic;
    background: linear-gradient(180deg, #ffb6de 0%, #ff69b4 50%, #ff1493 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 1px 0 rgba(100,0,60,0.5));
}

.wordart-float.wa-gold {
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    background: linear-gradient(180deg, #fff8a0 0%, #ffd700 40%, #b8860b 80%, #8b6508 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 2px 0 rgba(60,30,0,0.6));
}

.wordart-float.wa-glitch {
    font-family: Impact, "Arial Black", sans-serif;
    color: #fff;
    text-shadow: -2px 0 #ff0000, 2px 0 #00ffff;
    letter-spacing: 3px;
}

/* WordArt-ish header title
   Technique: main element = outline + 3D extrusion (solid color so text-shadow works).
              ::before   = gradient fill overlaid on top (background-clip: text). */
.wordart-title {
    line-height: 1.1;
    margin-bottom: 14px;
}

.wordart-text {
    position: relative;
    display: inline-block;
    font-family: Impact, "Arial Black", "Trebuchet MS", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: clamp(36px, 5.5vw, 52px);
    transform-origin: 50% 70%;
    font-style: italic;
    transform: perspective(700px) rotateX(6deg) rotateZ(-4deg) skewX(-10deg);

    /* Base color (visible through outline + extrusion) */
    color: #e890b8;
    -webkit-text-fill-color: #e890b8;
    -webkit-text-stroke: 1.5px rgba(10, 20, 60, 0.85);
    paint-order: stroke fill;

    /* 3D extrusion shadow (renders correctly because color is solid) */
    text-shadow:
        1px 1px 0 #1a3a7a,
        2px 2px 0 #15306a,
        3px 3px 0 #10265a,
        4px 4px 0 #0c1e4e,
        5px 5px 0 #081640;
    filter: drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.22));
}

/* Gradient overlay (sits on top, hides the solid base color) */
.wordart-text::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        #ffffff 0%,
        #ffe4f2 20%,
        #ff8fd6 50%,
        #6bc7ff 78%,
        #3388ff 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: none;
}

/* Fallback */
@supports not (-webkit-background-clip: text) {
    .wordart-text::before { display: none; }
}

.subtitle {
    font-size: 14px;
    color: var(--win-dark-gray);
}

.header-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.retro-link {
    display: inline-block;
    margin-top: 15px;
    background-color: var(--win-gray);
    padding: 5px 20px;
    color: #000;
    text-decoration: none;
    border: var(--border-outset);
    border-color: var(--border-outset-color);
    font-size: 12px;
}

.header-links .retro-link {
    margin-top: 0;
}

.retro-link.main-link {
    font-size: 14px;
    padding: 10px 30px;
    font-weight: bold;
}

.retro-link.sub-link {
    font-size: 11px;
    padding: 4px 12px;
}

.retro-link:active {
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    padding: 6px 19px 4px 21px;
}

.retro-link.main-link:active {
    padding: 11px 29px 9px 31px;
}

.retro-link.sub-link:active {
    padding: 5px 11px 3px 13px;
}

.nav {
    display: flex;
    background-color: var(--win-gray);
    padding: 2px;
    margin-bottom: 0;
    border: var(--border-inset);
    border-color: var(--border-inset-color);
}

.nav-link {
    color: black;
    text-decoration: none;
    padding: 5px 15px;
    font-size: 12px;
    border: 1px solid transparent;
}

.nav-link.active, .nav-link:hover {
    background-color: var(--win-white);
    border: var(--border-inset);
    border-color: var(--border-inset-color);
}

.content-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.content-wrapper.no-sidebar {
    grid-template-columns: 1fr;
}

.content-wrapper.no-sidebar .sidebar {
    display: none;
}

.sidebar {
    background-color: var(--win-gray);
    border-right: var(--border-inset);
    border-color: var(--win-dark-gray);
    padding: 10px;
    overflow-y: auto;
    height: 100%;
}

.sidebar-box {
    background-color: var(--win-white);
    border: var(--border-inset);
    border-color: var(--border-inset-color);
    padding: 15px;
    margin-bottom: 10px;
}

.sidebar-title {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--win-blue);
    margin-bottom: 10px;
    font-weight: bold;
    border-bottom: 1px solid var(--win-gray);
}

.post-box {
    background-color: var(--win-white);
    padding: 0;
}

.post-title {
    font-size: 20px;
    color: var(--win-black);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--win-gray);
}

/* =========================
   CVE Writeups typography
   ========================= */
.vuln-writeup {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.vuln-writeup h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: var(--win-blue);
    line-height: 1.2;
}

.vuln-writeup .writeup-meta {
    font-size: 14px;
    margin-bottom: 14px;
}

.vuln-writeup .writeup-body {
    font-size: 16px;
    line-height: 1.75;
}

.vuln-writeup .writeup-body p {
    margin: 10px 0;
}

.vuln-writeup .writeup-body h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    color: var(--win-blue);
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    font-size: 18px !important;
    font-weight: bold;
    line-height: 1.25;
}

.vuln-writeup .writeup-body ul {
    margin: 8px 0 12px 24px;
}

.vuln-writeup .writeup-body li {
    margin: 4px 0;
}

.vuln-writeup pre.code-block {
    font-size: 12px !important; /* override legacy inline font-size */
    line-height: 1.45 !important;
    background: var(--win-white) !important;
    color: var(--win-black) !important;
    border: var(--border-inset) !important;
    border-color: var(--border-inset-color) !important;
    padding: 10px !important;
    margin: 12px 0 !important;
    overflow-x: auto !important;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

.vuln-writeup code {
    font-size: 0.95em;
}

.cve-card {
    background-color: var(--win-gray);
    border: var(--border-outset);
    border-color: var(--border-outset-color);
    padding: 15px;
    margin-bottom: 15px;
}

.cve-badge {
    background-color: var(--win-blue);
    padding: 2px 8px;
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.read-more {
    display: inline-block;
    background-color: var(--win-gray);
    color: #000;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 11px;
    border: var(--border-outset);
    border-color: var(--border-outset-color);
    margin-top: 10px;
}

.read-more:active {
    border: var(--border-inset);
    border-color: var(--border-inset-color);
}

.footer {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    border-top: 1px solid var(--win-dark-gray);
    font-size: 11px;
    color: #000;
}

@media (max-width: 800px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }

    .content-wrapper .sidebar {
        display: none;
    }
}