/* ========================================
   SCP FOUNDATION — ARCHIVE SITE STYLES
   ======================================== */

:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #141414;
    --bg-card-hover: #1a1a1a;
    --bg-modal: #0d0d0d;
    --text-primary: #c8c8c8;
    --text-secondary: #888888;
    --text-dim: #555555;
    --accent-red: #8b0000;
    --accent-red-bright: #cc0000;
    --accent-amber: #b8860b;
    --accent-amber-bright: #daa520;
    --accent-green: #1a5e1a;
    --accent-blue: #1a3a5e;
    --accent-conscience: #4a7c59;
    --accent-conscience-bright: #5fa070;
    --border-color: #2a2a2a;
    --border-accent: #333333;
    --font-mono: 'Share Tech Mono', monospace;
    --font-body: 'Source Sans Pro', 'Segoe UI', sans-serif;
    --font-display: 'Special Elite', cursive;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

a {
    color: var(--accent-amber-bright);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: var(--accent-amber);
}

/* ========================================
   TOP BAR
   ======================================== */

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid var(--accent-red);
    backdrop-filter: blur(10px);
}

.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.6rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scp-logo {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-primary);
    letter-spacing: 0.15em;
    font-weight: 700;
}

.classification-banner {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-red-bright);
    letter-spacing: 0.2em;
    animation: pulse-text 3s ease-in-out infinite;
}

.top-bar-right {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
}

.blink-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent-red-bright);
    border-radius: 50%;
    margin-right: 8px;
    animation: blink 2s ease-in-out infinite;
}

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

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   HERO
   ======================================== */

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 6rem 2rem 4rem;
    background: 
        radial-gradient(ellipse at 50% 50%, rgba(139, 0, 0, 0.08) 0%, transparent 70%),
        var(--bg-primary);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.01) 2px,
        rgba(255,255,255,0.01) 4px
    );
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(180deg, rgba(10,10,10,0.8) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.9) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
}

.hero-warning {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-red-bright);
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid rgba(139, 0, 0, 0.4);
    display: inline-block;
    animation: pulse-text 4s ease-in-out infinite;
}

.hero-title {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #e0e0e0;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.hero-quote {
    max-width: 700px;
    margin: 0 auto 3rem;
    padding: 1.5rem 2rem;
    border-left: 3px solid var(--accent-red);
    background: rgba(139, 0, 0, 0.05);
    text-align: left;
}

.hero-quote blockquote {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.hero-quote cite {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    font-style: normal;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    padding: 0.8rem 2rem;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    background: transparent;
    text-transform: uppercase;
}

.btn-primary {
    color: var(--text-primary);
    border-color: var(--border-accent);
}
.btn-primary:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--text-secondary);
    color: #fff;
}

.btn-accent {
    color: var(--accent-red-bright);
    border-color: var(--accent-red);
}
.btn-accent:hover {
    background: rgba(139, 0, 0, 0.15);
    border-color: var(--accent-red-bright);
}

.btn-secondary {
    color: var(--accent-amber-bright);
    border-color: var(--accent-amber);
    width: 100%;
    margin-top: 1rem;
}
.btn-secondary:hover {
    background: rgba(184, 134, 11, 0.1);
    border-color: var(--accent-amber-bright);
}

.btn-foundation {
    color: #c8c8c8;
    border-color: var(--accent-red);
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
}
.btn-foundation:hover {
    background: rgba(139, 0, 0, 0.2);
    border-color: var(--accent-red-bright);
    color: #fff;
}

.btn-conscience {
    color: var(--accent-conscience-bright);
    border-color: var(--accent-conscience);
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
}
.btn-conscience:hover {
    background: rgba(74, 124, 89, 0.2);
    border-color: var(--accent-conscience-bright);
    color: #fff;
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header, .redacted-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    padding-top: 2rem;
}

.section-header h2, .redacted-header h2 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--text-secondary);
    letter-spacing: 0.2em;
    white-space: nowrap;
}

.section-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.section-line.red {
    background: var(--accent-red);
}

/* ========================================
   CASE CARDS
   ======================================== */

.cases {
    padding: 6rem 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.case-card, .ethics-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color 0.3s, transform 0.2s;
    overflow: hidden;
}

.case-card:hover, .ethics-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0,0,0,0.3);
}

.object-class {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    padding: 0.25rem 0.8rem;
    border: 1px solid;
}

.object-class.keter {
    color: var(--accent-red-bright);
    border-color: var(--accent-red);
}
.object-class.euclid {
    color: var(--accent-amber-bright);
    border-color: var(--accent-amber);
}
.object-class.thaumiel {
    color: #6a9bd1;
    border-color: var(--accent-blue);
}

.case-id {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}

.case-card-body {
    padding: 1.5rem;
}

.case-name {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: #e0e0e0;
    margin-bottom: 0.5rem;
}

.case-meta {
    display: flex;
    gap: 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.case-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.case-quote {
    padding: 1rem 1.2rem;
    border-left: 2px solid var(--accent-amber);
    background: rgba(184, 134, 11, 0.04);
    margin-bottom: 0.5rem;
}

.case-quote em {
    display: block;
    font-family: var(--font-display);
    color: var(--text-primary);
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

.case-quote span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
}

.case-card-footer {
    padding: 0.8rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.2);
}

.status-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
}

.status-neutralized { color: var(--accent-red-bright); }
.status-reclassified { color: var(--accent-amber-bright); }

/* ========================================
   THE QUESTION / CHOICE SECTION
   ======================================== */

.the-question {
    padding: 6rem 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--accent-red);
}

.question-text {
    max-width: 800px;
    margin: 0 auto 4rem;
}

.lead-text {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 2.5rem;
    letter-spacing: 0.05em;
}

.parallels p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 2;
    font-size: 1.05rem;
}

.question-core {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
    border: 1px solid var(--accent-red);
    background: rgba(139, 0, 0, 0.05);
}

.question-core h3 {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.the-real-question {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: #e0e0e0;
    line-height: 1.8;
}

/* Choice cards */
.choice-section {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    margin: 4rem 0;
}

.choice-card {
    flex: 1;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: all 0.3s;
}

.choice-card:hover {
    transform: translateY(-3px);
}

.foundation-choice:hover {
    border-color: var(--accent-red);
    box-shadow: 0 0 30px rgba(139, 0, 0, 0.1);
}

.conscience-choice:hover {
    border-color: var(--accent-conscience);
    box-shadow: 0 0 30px rgba(74, 124, 89, 0.1);
}

.choice-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.foundation-choice .choice-icon { color: var(--accent-red-bright); }
.conscience-choice .choice-icon { color: var(--accent-conscience-bright); }

.choice-card h3 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}
.foundation-choice h3 { color: var(--accent-red-bright); }
.conscience-choice h3 { color: var(--accent-conscience-bright); }

.choice-divider {
    width: 40px;
    height: 1px;
    margin-bottom: 1.5rem;
}
.foundation-choice .choice-divider { background: var(--accent-red); }
.conscience-choice .choice-divider { background: var(--accent-conscience); }

.choice-card > p {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.choice-beliefs {
    list-style: none;
    margin-bottom: 1.5rem;
}

.choice-beliefs li {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.choice-beliefs li::before {
    content: '▸ ';
}

.foundation-choice .choice-beliefs li::before { color: var(--accent-red); }
.conscience-choice .choice-beliefs li::before { color: var(--accent-conscience); }

.choice-quote {
    padding: 1rem;
    border-left: 2px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.choice-quote em {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
}

.foundation-choice .choice-quote { border-left-color: var(--accent-red); }
.conscience-choice .choice-quote { border-left-color: var(--accent-conscience); }

.choice-vs {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
}

/* Choice result */
.choice-result {
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    text-align: center;
}

.choice-result h3 {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.choice-result p {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.choice-result.chose-foundation {
    border-color: var(--accent-red);
}
.choice-result.chose-foundation h3 {
    color: var(--accent-red-bright);
}

.choice-result.chose-conscience {
    border-color: var(--accent-conscience);
}
.choice-result.chose-conscience h3 {
    color: var(--accent-conscience-bright);
}

/* Final thought */
.final-thought {
    max-width: 700px;
    margin: 4rem auto 0;
    text-align: center;
}

.separator {
    font-size: 1.5rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
    letter-spacing: 1em;
}

.final-thought p {
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.final-line {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

/* ========================================
   MODAL / DOSSIER VIEWER
   ======================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem;
    overflow-y: auto;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 1000px;
    background: var(--bg-modal);
    border: 1px solid var(--border-color);
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--accent-red);
    background: rgba(139, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.1em;
}

.modal-close {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    transition: all 0.2s;
    font-family: var(--font-mono);
}
.modal-close:hover {
    border-color: var(--accent-red);
    color: var(--accent-red-bright);
}

.modal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0,0,0,0.4);
    max-height: 300px;
    overflow-y: auto;
}

.modal-nav-btn {
    background: none;
    border: none;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    white-space: nowrap;
}

.modal-nav-btn:hover {
    background: rgba(255,255,255,0.03);
    color: var(--text-secondary);
}

.modal-nav-btn.active {
    background: rgba(139, 0, 0, 0.1);
    color: var(--accent-amber-bright);
    border-bottom-color: var(--accent-amber);
}

.modal-body {
    padding: 2rem 2.5rem;
    min-height: 400px;
}

/* Markdown content styling */
.md-content {
    color: var(--text-primary);
    line-height: 1.9;
}

.md-content h1 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: #e0e0e0;
    letter-spacing: 0.05em;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.md-content h2 {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin: 2rem 0 0.8rem;
}

.md-content h3 {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.5rem;
}

.md-content h4, .md-content h5, .md-content h6 {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    margin: 1rem 0 0.5rem;
}

.md-content p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.md-content strong {
    color: var(--text-primary);
}

.md-content em {
    color: var(--text-secondary);
}

.md-content blockquote {
    border-left: 3px solid var(--accent-amber);
    padding: 0.8rem 1.5rem;
    margin: 1.5rem 0;
    background: rgba(184, 134, 11, 0.04);
}

.md-content blockquote p {
    color: var(--text-primary);
    font-family: var(--font-display);
    line-height: 2;
}

.md-content ul, .md-content ol {
    margin: 1rem 0 1rem 1.5rem;
    color: var(--text-secondary);
}

.md-content li {
    margin-bottom: 0.4rem;
}

.md-content code {
    font-family: var(--font-mono);
    background: rgba(255,255,255,0.05);
    padding: 0.15rem 0.4rem;
    font-size: 0.9em;
    color: var(--accent-amber-bright);
}

.md-content pre {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border-color);
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.md-content pre code {
    background: none;
    padding: 0;
}

.md-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

.md-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.md-content th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-align: left;
    padding: 0.8rem 1rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    text-transform: uppercase;
}

.md-content td {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
}

.md-content tr:hover td {
    background: rgba(255,255,255,0.02);
}

.md-content img {
    max-width: 100%;
    height: auto;
}

/* Mermaid diagrams */
.mermaid-container {
    margin: 2rem 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    position: relative;
}

.mermaid-viewport {
    overflow: hidden;
    cursor: grab;
    min-height: 200px;
    padding: 1.5rem;
    position: relative;
}

.mermaid-viewport:active {
    cursor: grabbing;
}

.mermaid-inner {
    transform-origin: 0 0;
    display: inline-block;
    min-width: 100%;
}

.mermaid-inner .mermaid {
    display: flex;
    justify-content: center;
}

.mermaid-container .mermaid svg {
    height: auto;
}

/* Force mermaid SVG text/elements to be visible on dark background */
.mermaid svg text,
.mermaid svg .taskText,
.mermaid svg .titleText,
.mermaid svg .sectionTitle,
.mermaid svg .taskTextOutsideRight,
.mermaid svg .taskTextOutsideLeft,
.mermaid svg tspan,
.mermaid svg .legend text,
.mermaid svg .label text,
.mermaid svg .label span,
.mermaid svg .edgeLabel text,
.mermaid svg .cluster-label text,
.mermaid svg .nodeLabel,
.mermaid svg .node text,
.mermaid svg .timeline-text,
.mermaid svg .row-lines text,
.mermaid svg foreignObject div,
.mermaid svg foreignObject span,
.mermaid svg foreignObject p {
    color: #e0e0e0 !important;
    fill: #e0e0e0 !important;
}

.mermaid svg .titleText,
.mermaid svg text.titleText {
    fill: #ffffff !important;
    font-size: 16px !important;
}

/* Timeline section titles */
.mermaid svg .section-title,
.mermaid svg .section-title text,
.mermaid svg g.section-title text {
    fill: #daa520 !important;
}

/* Node backgrounds - keep them dark but visible */
.mermaid svg .task,
.mermaid svg rect.task {
    fill: #2a1a1a !important;
    stroke: #8b0000 !important;
}

.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node polygon {
    fill: #2a1a1a !important;
    stroke: #555 !important;
}

/* Timeline period backgrounds */
.mermaid svg rect.period-section,
.mermaid svg rect.section-bg {
    fill-opacity: 0.3 !important;
}

/* Lines and arrows */
.mermaid svg .grid .tick line,
.mermaid svg line {
    stroke: #444 !important;
}

.mermaid svg path.path,
.mermaid svg .flowchart-link {
    stroke: #888 !important;
}

/* Mermaid timeline-specific: override the auto-generated inline fill styles */
.mermaid svg g text[style],
.mermaid svg g tspan[style] {
    fill: #e0e0e0 !important;
}

/* Override all rect fills that are pure black or very dark */
.mermaid svg rect[fill="#000"],
.mermaid svg rect[fill="#000000"],
.mermaid svg rect[fill="black"],
.mermaid svg rect[fill="#0a0a0a"],
.mermaid svg rect[fill="#0d0d0d"],
.mermaid svg rect[fill="#111"],
.mermaid svg rect[fill="#111111"] {
    fill: #1e1e1e !important;
}

/* Timeline specific overrides */
.mermaid svg .timeline-section-column rect {
    fill-opacity: 0.6 !important;
}

.mermaid svg .timeline-section-column text {
    fill: #e0e0e0 !important;
}

.mermaid-container.mermaid-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    margin: 0;
    border: none;
    border-radius: 0;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
}

.mermaid-container.mermaid-fullscreen .mermaid-viewport {
    flex: 1;
    min-height: 0;
}

.mermaid-container.mermaid-fullscreen .mermaid-toolbar {
    border-radius: 0;
}

.mermaid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.5);
}

.mermaid-fullscreen-btn {
    margin-left: auto;
}

.mermaid-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.mermaid-btn:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber-bright);
    background: rgba(184, 134, 11, 0.1);
}

.mermaid-zoom-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-left: 0.5rem;
    min-width: 3.5em;
}

/* Loading */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 4rem 0;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--accent-red);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-spinner p {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.2em;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    padding: 3rem 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.footer-content {
    text-align: center;
}

.footer-logo {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.footer-disclaimer {
    font-size: 0.8rem;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto 1rem;
    line-height: 1.8;
}

.footer-note {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* ========================================
   GLITCH EFFECT
   ======================================== */

.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.glitch::before {
    color: var(--accent-red-bright);
    z-index: -1;
    animation: glitch-1 4s infinite linear alternate-reverse;
}

.glitch::after {
    color: var(--accent-blue);
    z-index: -2;
    animation: glitch-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0%, 95% { clip-path: inset(0 0 100% 0); }
    96% { clip-path: inset(20% 0 60% 0); transform: translateX(-2px); }
    97% { clip-path: inset(50% 0 30% 0); transform: translateX(2px); }
    98% { clip-path: inset(70% 0 10% 0); transform: translateX(-1px); }
    99% { clip-path: inset(40% 0 40% 0); transform: translateX(1px); }
    100% { clip-path: inset(0 0 100% 0); }
}

@keyframes glitch-2 {
    0%, 93% { clip-path: inset(0 0 100% 0); }
    94% { clip-path: inset(30% 0 50% 0); transform: translateX(2px); }
    95% { clip-path: inset(10% 0 70% 0); transform: translateX(-2px); }
    96% { clip-path: inset(60% 0 20% 0); transform: translateX(1px); }
    97% { clip-path: inset(80% 0 5% 0); transform: translateX(-1px); }
    100% { clip-path: inset(0 0 100% 0); }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 900px) {
    .case-grid {
        grid-template-columns: 1fr;
    }
    
    .choice-section {
        flex-direction: column;
    }
    
    .choice-vs {
        justify-content: center;
        padding: 1rem 0;
    }

    .top-bar-inner {
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.4rem 1rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .modal {
        margin-top: 0;
    }

    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-nav {
        max-height: 200px;
    }
}

@media (max-width: 480px) {
    .hero-quote {
        padding: 1rem;
    }

    .case-card-body {
        padding: 1rem;
    }

    .choice-card {
        padding: 1.5rem;
    }

    .md-content table {
        font-size: 0.75rem;
    }

    .md-content th, .md-content td {
        padding: 0.4rem 0.5rem;
    }
}