/* CSS Variables for Light/Dark Theme */
:root {
    /* Light theme colors (matching sysinit.at) */
    --bg-primary: rgb(248, 250, 252);
    --bg-secondary: rgb(255, 255, 255);
    --bg-footer: rgb(255, 255, 255);
    --text-primary: rgb(51, 65, 85);
    --text-secondary: rgb(100, 116, 139);
    --text-tertiary: rgb(148, 163, 184);
    --accent-primary: rgb(200, 40, 41);
    --accent-hover: rgb(180, 35, 36);
    --border-color: rgb(226, 232, 240);
    --code-bg: rgba(0, 0, 0, 0.05);

    /* Typography - Sans-serif (default) */
    --font-body: -apple-system, 'system-ui', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-headings: -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
}

[data-font="serif"] {
    --font-body: 'Georgia', 'Times New Roman', 'Baskerville', 'Palatino', serif;
    --font-headings: 'Georgia', 'Times New Roman', serif;
}

[data-theme="dark"] {
    --bg-primary: rgb(15, 23, 42);
    --bg-secondary: rgb(30, 41, 59);
    --bg-footer: rgb(15, 23, 42);
    --text-primary: rgb(226, 232, 240);
    --text-secondary: rgb(148, 163, 184);
    --text-tertiary: rgb(100, 116, 139);
    --accent-primary: rgb(239, 68, 68);
    --accent-hover: rgb(220, 60, 60);
    --border-color: rgb(51, 65, 85);
    --code-bg: rgba(255, 255, 255, 0.05);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.75;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-width: 0;
    overflow-x: hidden;
}

/* Typography - Optimized for reading */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.75em;
    color: var(--text-primary);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

h1:first-child, h2:first-child, h3:first-child {
    margin-top: 0;
}

p {
    margin-bottom: 1.25em;
    max-width: 75ch;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Header - Human in the Loop Banner */
#banner {
    background: #000 !important;
    border-bottom: none;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 255, 0, 0.2);
    transition: opacity 0.3s ease;
}

/* HITL Banner Styles */
.hitl-banner {
    --hitl-bg-color: #000;
    --hitl-text-color: #0f0;
    --hitl-glow-color: rgba(0, 255, 0, 0.5);
    --hitl-border-color: #0f0;
    --hitl-font-family: 'IBM Plex Mono', 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
    --hitl-banner-font-size: clamp(5px, 0.9vw, 12px);
    --hitl-transition-duration: 2.4s;

    position: relative;
    width: 100%;
    background: var(--hitl-bg-color);
    font-family: var(--hitl-font-family);
    overflow: hidden;
    /* Fix sub-pixel rendering in Chrome */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.hitl-banner * {
    box-sizing: border-box;
}

.hitl-content-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Transparent: the ambient (blurred game) canvas behind must shine
       through; .hitl-banner supplies the black base. */
    background: transparent;
    /* Add top padding to clear the fixed nav buttons */
    padding-top: 60px;
    /* Extend background slightly to cover sub-pixel gaps in Chrome */
    margin-bottom: -1px;
    padding-bottom: 1px;
}

/* CRT overlay: scanlines + vignette + phosphor flicker (header only,
   never over article content) */
.hitl-crt-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.18) 3px
        ),
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 60%,
            rgba(0, 0, 0, 0.35) 100%
        );
    animation: hitl-flicker 4s infinite;
}

@keyframes hitl-flicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.82; }
    6% { opacity: 1; }
    54% { opacity: 0.94; }
    56% { opacity: 1; }
}

/* CRT power-on: quick collapse-to-line expansion on page load */
.hitl-banner {
    animation: hitl-power-on 0.5s cubic-bezier(0.23, 1, 0.32, 1) 1;
    transform-origin: center center;
}

@keyframes hitl-power-on {
    0% {
        transform: scaleY(0.005) scaleX(0.7) translateZ(0);
        filter: brightness(6);
    }
    55% {
        transform: scaleY(1.01) scaleX(1) translateZ(0);
        filter: brightness(1.6);
    }
    100% {
        transform: scaleY(1) scaleX(1) translateZ(0);
        filter: brightness(1);
    }
}

/* HITL Arcade: music-driven mini-games are the header's resident view */

/* Ambient backdrop: the game buffer, blurred wide, so the game's palette
   bleeds across the whole banner instead of leaving black voids on big
   screens (TV-ambilight style; nearly free — one 48x32 blit per frame). */
.hitl-arcade-ambient {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    filter: blur(32px) saturate(1.8) brightness(1.1);
    opacity: 0.8;
    pointer-events: none;
}

.hitl-arcade-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0 10px;
}

.hitl-arcade-canvas {
    display: block;
    background: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: 0 0 24px rgba(0, 255, 0, 0.25);
    touch-action: none;
}

.hitl-arcade-hint {
    color: #0f0;
    opacity: 0.65;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* Site Title Bar - permanent readable header */
.site-title-bar {
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border-color);
    padding: 1.5rem 4rem;
}

.site-title-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-title-link:hover {
    text-decoration: none;
}

.site-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.site-title::before {
    content: "~$";
    margin-right: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
}

.site-title-link:hover .site-title {
    color: var(--accent-primary);
}

/* Blinking terminal cursor after the subtitle */
.site-cursor {
    display: inline-block;
    margin-left: 0.3rem;
    color: rgb(0, 170, 0);
    animation: site-cursor-blink 1.1s steps(2, start) infinite;
}

[data-theme="dark"] .site-cursor {
    color: #0f0;
}

@keyframes site-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Navigation links styled like play button - positioned on right */
.hitl-nav-links {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 1000;
}

.hitl-nav-btn,
.hitl-music-btn {
    background: #000;
    color: #0f0;
    border: 2px solid #0f0;
    padding: 10px 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    cursor: pointer;
    text-shadow: 0 0 5px #0f0;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    transition: all 0.3s;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
}

.hitl-nav-btn:hover,
.hitl-music-btn:hover {
    background: #0f0;
    color: #000;
    text-shadow: none;
    text-decoration: none;
}

/* Mini player container */
.hitl-player {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #000;
    border: 2px solid #0f0;
    padding: 5px 10px;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* Mini oscilloscope showing the live synth mix */
.hitl-scope {
    display: block;
    width: 56px;
    height: 22px;
    background: #000;
    border-right: 1px solid #0f0;
    padding-right: 6px;
    margin-right: 3px;
}

/* Retro volume slider */
.hitl-volume {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 4px;
    margin-left: 6px;
    background: linear-gradient(to right, #0f0, #050);
    outline: none;
    cursor: pointer;
}

.hitl-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 12px;
    background: #0f0;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
    cursor: pointer;
}

.hitl-volume::-moz-range-thumb {
    width: 10px;
    height: 12px;
    background: #0f0;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
    cursor: pointer;
}

.hitl-song-name {
    color: #0f0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    text-shadow: 0 0 5px #0f0;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
    border-right: 1px solid #0f0;
    margin-right: 3px;
}

.hitl-player-btn {
    background: transparent;
    color: #0f0;
    border: none;
    padding: 5px 8px;
    font-size: 14px;
    cursor: pointer;
    text-shadow: 0 0 5px #0f0;
    transition: all 0.2s;
    line-height: 1;
}

.hitl-player-btn:hover {
    color: #fff;
    text-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
    transform: scale(1.2);
}

.hitl-player-btn.hitl-play-btn {
    font-size: 16px;
    padding: 5px 10px;
}

.hitl-player-btn.hitl-playing {
    color: #0f0;
    animation: hitl-pulse 1s ease-in-out infinite;
}

@keyframes hitl-pulse {
    0%, 100% { text-shadow: 0 0 5px #0f0; }
    50% { text-shadow: 0 0 15px #0f0, 0 0 25px #0f0; }
}

/* Header content - hidden since we're using banner */
.header-content {
    display: none;
}

.header-links {
    display: none;
}

.header-link {
    display: none;
}

.logo-container {
    display: none;
}

.site-logo {
    display: none;
}

#banner h1 {
    display: none;
}

/* Navigation - Category links (hidden, using banner only) */
#banner nav {
    display: none;
}

/* Main Content */
#content {
    max-width: none;
    margin: 3rem 0;
    padding: 0 4rem;
}

/* Ensure content section has proper padding */
#content.body {
    padding-left: 4rem;
    padding-right: 4rem;
}

/* Constrain article width for readability */
#content article,
#content h1,
#content > * {
    max-width: 800px;
}

/* Articles */
article {
    margin-bottom: 4rem;
    padding: 0 4rem;
}

article.hentry {
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}

article.hentry:last-child { border-bottom: none; }

/* Article detail page */
article.article-detail {
    max-width: none;
    padding: 3rem 4rem;
}

article.article-detail .entry-content,
article.article-detail header {
    max-width: 800px;
}

.entry-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.entry-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.entry-title a:hover { color: var(--accent-primary); }

.entry-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.entry-meta time { font-weight: 500; }
.entry-meta .category, .entry-meta .author { display: inline-block; }
.entry-meta a { color: var(--text-secondary); }
.entry-meta a:hover { color: var(--accent-primary); }

/* Tags */
.tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.tag {
    background: var(--code-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.2s ease;
}

.tag:hover {
    background: var(--border-color);
    color: var(--accent-primary);
    text-decoration: none;
}

/* Article Content */
.entry-content {
    font-size: 1.125rem;
    line-height: 1.75;
}

.article-detail .entry-content {
    font-size: 1.125rem;
    line-height: 1.8;
}

.readmore {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 500;
    color: var(--accent-primary);
}

.readmore:hover { color: var(--accent-hover); }

/* Lists */
ul, ol {
    margin: 1.25em 0;
    padding-left: 2em;
}

li { margin-bottom: 0.5em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* Code */
code {
    background: var(--code-bg);
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}

pre {
    background: var(--code-bg);
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    line-height: 1.5;
}

pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid var(--accent-primary);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

th {
    font-weight: 600;
    background: var(--code-bg);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2rem 0;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.pagination a {
    padding: 0.75rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pagination a:hover {
    background: var(--accent-primary);
    color: white;
    text-decoration: none;
    border-color: var(--accent-primary);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
    transition: opacity 0.3s ease;
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: block;
}

/* Font Toggle Button */
.font-toggle {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
}

.font-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.font-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* Font Size Buttons */
.font-size-btn {
    position: fixed;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
}

.font-increase {
    bottom: 10rem;
}

.font-decrease {
    bottom: 14rem;
}

.font-size-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.font-size-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* TOC Toggle Button */
.toc-toggle {
    position: fixed;
    bottom: 18rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 1000;
}

.toc-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toc-toggle.toc-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toc-toggle.toc-active .toc-icon {
    color: white;
}

.toc-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-primary);
}

/* TOC Panel */
.toc-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.toc-panel.toc-open {
    right: 0;
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.toc-title {
    font-family: var(--font-headings);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.toc-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.toc-close:hover {
    color: var(--accent-primary);
}

.toc-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-item {
    margin: 0;
}

.toc-link {
    display: block;
    padding: 0.5rem 1.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.toc-link:hover {
    color: var(--accent-primary);
    background: var(--code-bg);
    text-decoration: none;
}

.toc-link.toc-active {
    color: var(--accent-primary);
    border-left-color: var(--accent-primary);
    background: var(--code-bg);
}

/* Indentation for heading levels */
.toc-h1 .toc-link {
    font-weight: 600;
    padding-left: 1.5rem;
}

.toc-h2 .toc-link {
    padding-left: 2.25rem;
    font-size: 0.9rem;
}

.toc-h3 .toc-link {
    padding-left: 3rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.toc-h3 .toc-link:hover,
.toc-h3 .toc-link.toc-active {
    color: var(--accent-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    html { font-size: 14px; }
    body { font-size: 1rem; }

    /* HITL Banner responsive */
    .hitl-banner {
        --hitl-banner-font-size: clamp(3px, 1.8vw, 8px);
    }

    .hitl-content-wrapper {
        /* More padding on mobile to clear nav buttons */
        padding-top: 50px;
    }

    /* Canvas banner handles its own sizing */

    .site-title-bar {
        padding: 1rem 1rem;
    }

    .site-title {
        font-size: 1.25rem;
    }

    .hitl-nav-links {
        top: 8px;
        right: 8px;
        gap: 5px;
    }

    .hitl-nav-btn,
    .hitl-music-btn {
        padding: 5px 10px;
        font-size: 10px;
    }

    .hitl-player {
        padding: 3px 6px;
        gap: 3px;
    }

    .hitl-song-name {
        font-size: 9px;
        max-width: 130px;
        padding-right: 5px;
    }

    .hitl-player-btn {
        padding: 3px 5px;
        font-size: 11px;
    }

    .hitl-player-btn.hitl-play-btn {
        font-size: 12px;
        padding: 3px 6px;
    }

    /* Keep the mobile player compact: no scope, no slider */
    .hitl-scope,
    .hitl-volume {
        display: none;
    }

    #content,
    #content.body {
        padding-left: 1rem;
        padding-right: 1rem;
        margin: 2rem auto;
    }

    article,
    article.article-detail {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .theme-toggle {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .font-toggle {
        bottom: 4.5rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .font-increase {
        bottom: 8rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .font-decrease {
        bottom: 11.5rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .toc-toggle {
        bottom: 15rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .theme-icon,
    .font-icon,
    .font-size-icon,
    .toc-icon {
        width: 1rem;
        height: 1rem;
    }

    .toc-panel {
        width: 280px;
        right: -280px;
    }
}

/* Article Footer Actions */
.article-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.article-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.action-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.action-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
}

@media (max-width: 768px) {
    .article-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Email subscribe box */
.subscribe-box {
    margin-top: 3rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.article-detail .subscribe-box {
    margin-top: 2rem;
}

.subscribe-heading {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
}

.subscribe-form {
    margin: 0;
}

.subscribe-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.subscribe-input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subscribe-input::placeholder {
    color: var(--text-tertiary);
}

.subscribe-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(200, 40, 41, 0.15);
}

.subscribe-btn {
    padding: 0.7rem 1.25rem;
    background: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 0.5rem;
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.subscribe-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.subscribe-note {
    margin: 0.85rem 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.subscribe-note a {
    color: var(--accent-primary);
    text-decoration: none;
}

.subscribe-note a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .subscribe-btn {
        flex: 1 1 100%;
    }
}

/* Footer */
#contentinfo {
    margin-top: 4rem;
    padding: 2rem 4rem;
    background: var(--bg-footer);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

#contentinfo p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

#contentinfo a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

#contentinfo a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 768px) {
    #contentinfo {
        padding: 1.5rem 1rem;
    }
}

/* Reduced motion: no CRT flicker/power-on, no blinking cursor, no pulsing */
@media (prefers-reduced-motion: reduce) {
    .hitl-banner,
    .hitl-crt-overlay,
    .site-cursor,
    .hitl-player-btn.hitl-playing {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Print Styles */
@media print {
    .theme-toggle, .font-toggle, .font-size-btn, .toc-toggle, .toc-panel, #banner nav, .article-footer, .subscribe-box { display: none; }
    body {
        background: white;
        color: black;
    }
    a {
        color: black;
        text-decoration: underline;
    }
}

/* Syntax highlighting */
.highlight {
    background: var(--code-bg);
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

/* Custom Link Tooltips */
.custom-link-tooltip {
    display: none;
    position: absolute;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 600px;
    word-break: break-all;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    z-index: 10000;
    pointer-events: none;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
}