/* ── THEMES ───────────────────────────────────────────────── */
        :root, [data-theme="green"] {
            --bg:         #000000;
            --bg2:        #050905;
            --fg:         #00ff41;
            --accent:     #7CFC00;
            --hotkey:     #ffffff;
            --nav-bg:     #050905;
            --nav-fg:     #00ff41;
            --nav-active-bg: #00ff41;
            --nav-active-fg: #000000;
            --border:     rgba(0,255,65,0.3);
            --box-title-bg: #00ff41;
            --box-title-fg: #000000;
            --box-bg:     #030703;
            --status-bg:  #050905;
            --status-fg:  #00ff41;
            --link:       #7CFC00;
            --scanline:   rgba(0,0,0,0.18);
            --featured-border: #7CFC00;
        }
        [data-theme="amber"] {
            --bg:         #0c0800;
            --bg2:        #110d00;
            --fg:         #FFB000;
            --accent:     #FFD050;
            --hotkey:     #ffffff;
            --nav-bg:     #110d00;
            --nav-fg:     #FFB000;
            --nav-active-bg: #FFB000;
            --nav-active-fg: #000000;
            --border:     rgba(255,176,0,0.3);
            --box-title-bg: #FFB000;
            --box-title-fg: #000000;
            --box-bg:     #0a0600;
            --status-bg:  #110d00;
            --status-fg:  #FFB000;
            --link:       #FFD050;
            --scanline:   rgba(0,0,0,0.18);
            --featured-border: #FFD050;
        }
        [data-theme="bios"] {
            --bg:         #0000AA;
            --bg2:        #000088;
            --fg:         #AAAAAA;
            --accent:     #FFFFFF;
            --hotkey:     #FFFF54;
            --nav-bg:     #AAAAAA;
            --nav-fg:     #000000;
            --nav-active-bg: #000088;
            --nav-active-fg: #FFFFFF;
            --border:     #4444AA;
            --box-title-bg: #AAAAAA;
            --box-title-fg: #000000;
            --box-bg:     #000088;
            --status-bg:  #AAAAAA;
            --status-fg:  #000000;
            --link:       #55FFFF;
            --scanline:   rgba(0,0,0,0.0);
            --featured-border: #FFFFFF;
        }
        [data-theme="dark"] {
            --bg:         #0e0e12;
            --bg2:        #141418;
            --fg:         #b0b0c8;
            --accent:     #9b7fff;
            --hotkey:     #ffffff;
            --nav-bg:     #141418;
            --nav-fg:     #b0b0c8;
            --nav-active-bg: #9b7fff;
            --nav-active-fg: #0e0e12;
            --border:     rgba(155,127,255,0.25);
            --box-title-bg: #9b7fff;
            --box-title-fg: #0e0e12;
            --box-bg:     #0e0e12;
            --status-bg:  #141418;
            --status-fg:  #b0b0c8;
            --link:       #9b7fff;
            --scanline:   rgba(0,0,0,0.12);
            --featured-border: #9b7fff;
        }

        /* ── BASE ─────────────────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html, body {
            height: 100%;
            font-family: 'Roboto Mono', monospace;
            font-size: 18.7px; /* +10% again; rem-based sizing scales with this */
            background: var(--bg);
            color: var(--fg);
        }
        body::after {
            content: '';
            position: fixed; inset: 0;
            background: repeating-linear-gradient(
                0deg, var(--scanline) 0, var(--scanline) 1px, transparent 1px, transparent 2px);
            pointer-events: none;
            z-index: 9999;
        }
        a { color: var(--link); text-decoration: none; }
        a:hover { color: var(--accent); }
        button { cursor: pointer; }

        /* ── APP SHELL ────────────────────────────────────────────── */
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
        }

        /* ── NAVBAR ───────────────────────────────────────────────── */
        #navbar {
            background: var(--nav-bg);
            color: var(--nav-fg);
            border-bottom: 1px solid var(--border);
            padding: 0 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 2.4rem;
            flex-shrink: 0;
            position: relative;
        }
        #nav-brand {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            flex-shrink: 0;
        }
        #nav-logo {
            height: 1.5rem;
            width: 1.5rem;
        }
        #nav-title {
            font-family: 'VT323', monospace;
            font-size: 1.45rem;
            letter-spacing: 0.12em;
            color: var(--nav-fg);
            line-height: 1;
        }
        #nav-menu {
            display: flex;
            gap: 0;
            list-style: none;
        }
        .nav-btn {
            background: none;
            border: none;
            color: var(--nav-fg);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.82rem;
            padding: 0 1rem;
            height: 2.4rem;
            letter-spacing: 0.05em;
            transition: background 0.1s, color 0.1s;
            white-space: nowrap;
        }
        .nav-btn:hover, .nav-btn.active {
            background: var(--nav-active-bg);
            color: var(--nav-active-fg);
        }
        .nav-btn .hk {
            text-decoration: underline;
            color: var(--hotkey);
        }
        .nav-btn:hover .hk, .nav-btn.active .hk {
            color: var(--nav-active-fg);
        }
        #nav-toggle {
            display: none;
            background: none;
            border: 1px solid var(--border);
            color: var(--nav-fg);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
        }

        /* ── CONTENT ──────────────────────────────────────────────── */
        #content {
            flex: 1;
            overflow-y: auto;
            padding: 1rem 1.25rem;
            background: var(--bg);
        }

        /* ── DOS BOX ──────────────────────────────────────────────── */
        .dos-box {
            border: 1px solid var(--border);
            background: var(--box-bg);
            margin-bottom: 1rem;
        }
        .dos-box-title {
            background: var(--box-title-bg);
            color: var(--box-title-fg);
            font-family: 'VT323', monospace;
            font-size: 1rem;
            padding: 0.05rem 0.75rem;
            letter-spacing: 0.1em;
        }
        .dos-box-body { padding: 0.75rem 1rem; }

        /* ── HOME ─────────────────────────────────────────────────── */
        .home-featured {
            border: 1px solid var(--featured-border);
            background: var(--box-bg);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1rem;
        }
        .home-featured-label {
            font-size: 0.62rem;
            letter-spacing: 0.2em;
            opacity: 0.45;
            margin-bottom: 0.6rem;
            text-transform: uppercase;
        }
        .home-featured h1 {
            font-family: 'VT323', monospace;
            font-size: 2.2rem;
            color: var(--accent);
            letter-spacing: 0.06em;
            line-height: 1.1;
            margin-bottom: 0.75rem;
        }
        .home-featured p {
            font-size: 0.78rem;
            opacity: 0.7;
            line-height: 1.7;
        }
        .home-cols {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        /* ── POST LIST ────────────────────────────────────────────── */
        .post-list { list-style: none; }
        .post-list li + li { border-top: 1px solid var(--border); }
        .post-list-btn {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            color: var(--fg);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.76rem;
            padding: 0.4rem 0.5rem;
            display: flex;
            gap: 0.75rem;
            align-items: baseline;
            line-height: 1.4;
            transition: background 0.1s, color 0.1s;
        }
        .post-list-btn:hover {
            background: var(--fg);
            color: var(--bg);
        }
        .post-date { opacity: 0.4; white-space: nowrap; font-size: 0.68rem; flex-shrink: 0; }
        .post-list-btn:hover .post-date { opacity: 0.85; }
        .post-title { flex: 1; }

        /* ── ESOTERIC ─────────────────────────────────────────────── */
        #view-esoteric {
            display: none;
            grid-template-columns: 230px 1fr;
            gap: 1rem;
            height: 100%;
        }
        #esoteric-sidebar { overflow-y: auto; }
        #esoteric-content { overflow-y: auto; }

        /* ── POST CONTENT ─────────────────────────────────────────── */
        .post-filename {
            font-size: 0.62rem;
            opacity: 0.3;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 0.25rem;
        }
        .post-heading {
            font-family: 'VT323', monospace;
            font-size: 2.4rem;
            color: var(--accent);
            letter-spacing: 0.05em;
            line-height: 1;
            margin-bottom: 0.25rem;
        }
        .post-datelabel {
            font-size: 0.68rem;
            opacity: 0.3;
            letter-spacing: 0.1em;
            margin-bottom: 1.25rem;
        }
        .post-body { font-size: 0.8rem; line-height: 1.85; opacity: 0.85; }
        .post-body p { margin-bottom: 1em; }

        /* ── XMIT ─────────────────────────────────────────────────── */
        .xmit-entry {
            border: 1px solid var(--border);
            background: var(--box-bg);
            padding: 0.75rem 1rem;
            margin-bottom: 0.75rem;
        }
        .xmit-meta {
            font-size: 0.62rem;
            opacity: 0.38;
            letter-spacing: 0.1em;
            margin-bottom: 0.4rem;
            text-transform: uppercase;
        }
        .xmit-body { font-size: 0.8rem; line-height: 1.6; opacity: 0.85; }
        .xmit-body p { margin: 0 0 0.6rem; }
        .xmit-body img { display: block; max-width: 100%; max-height: 32rem; width: auto; height: auto; margin: 0.6rem 0; }
        .xmit-source { display: inline-block; margin-top: 0.25rem; }
        .xmit-tag {
            display: inline-block;
            border: 1px solid var(--border);
            font-size: 0.58rem;
            padding: 0.05rem 0.35rem;
            margin: 0.4rem 0.2rem 0 0;
            opacity: 0.5;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        /* ── STATUS BAR ───────────────────────────────────────────── */
        #statusbar {
            background: var(--status-bg);
            color: var(--status-fg);
            border-top: 1px solid var(--border);
            padding: 0 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            font-size: 0.68rem;
            min-height: 1.75rem;
        }
        .status-left { opacity: 0.5; letter-spacing: 0.07em; }
        #theme-select {
            background: var(--bg);
            color: var(--fg);
            border: 1px solid var(--border);
            font-family: 'Roboto Mono', monospace;
            font-size: 0.62rem;
            padding: 0.1rem 0.3rem;
            letter-spacing: 0.04em;
        }
        [data-theme="bios"] #theme-select { background: #000088; color: #AAAAAA; }
        [data-theme="bios"] .status-left { opacity: 0.8; }

        /* ── BOOT ─────────────────────────────────────────────────── */
        #boot-screen {
            position: fixed; inset: 0;
            background: #000;
            z-index: 8888;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #boot-screen.fade-out { animation: bootFade 0.5s ease forwards; }
        @keyframes bootFade { to { opacity: 0; pointer-events: none; } }
        #boot-text {
            font-family: 'Roboto Mono', monospace;
            font-size: 0.78rem;
            color: #00ff41;
            line-height: 1.75;
            padding: 2rem;
            max-width: 560px;
            width: 100%;
        }

        /* ── CURSOR ───────────────────────────────────────────────── */
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
        .cursor {
            display: inline-block;
            width: 0.5rem; height: 0.9em;
            background: var(--fg);
            vertical-align: middle;
            animation: blink 1s step-end infinite;
        }

        /* ── SCROLLBAR ────────────────────────────────────────────── */
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--border); }
        ::-webkit-scrollbar-thumb:hover { background: var(--fg); }

        /* ── LAUNCHER ─────────────────────────────────────────────── */
        .launcher {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 0.6rem;
        }
        .app-tile {
            border: 1px solid var(--border);
            background: var(--bg);
            padding: 0.7rem 0.85rem;
            text-align: left;
            color: var(--fg);
            font-family: 'Roboto Mono', monospace;
            cursor: pointer;
            transition: background 0.1s, color 0.1s;
        }
        .app-tile:hover { background: var(--fg); color: var(--bg); }
        .app-tile-name {
            font-family: 'VT323', monospace;
            font-size: 1.05rem;
            letter-spacing: 0.08em;
            color: var(--accent);
        }
        .app-tile:hover .app-tile-name { color: var(--bg); }
        .app-tile-desc { font-size: 0.66rem; opacity: 0.6; margin-top: 0.15rem; }

        /* ── ORACLE VIEW ──────────────────────────────────────────── */
        #view-oracle { flex-direction: column; height: 100%; overflow: hidden; }
        .oracle-bar {
            display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
            border: 1px solid var(--border); background: var(--box-bg);
            padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; flex-shrink: 0;
        }
        .oracle-title { font-family: 'VT323', monospace; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--accent); margin-right: auto; }
        .oracle-bar button {
            background: var(--bg); color: var(--fg); border: 1px solid var(--border);
            font-family: 'Roboto Mono', monospace; font-size: 0.72rem; padding: 0.3rem 0.7rem; letter-spacing: 0.06em; cursor: pointer;
        }
        .oracle-bar button:hover { background: var(--fg); color: var(--bg); }
        [data-theme="bios"] .oracle-bar button { background: var(--box-bg); }

        #oracle-out {
            flex: 1; overflow-y: auto; border: 1px solid var(--border); background: var(--box-bg);
            padding: 0.85rem 1.1rem; font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap;
        }
        #oracle-out .sys { opacity: 0.5; }
        #oracle-out hr { border: 0; border-top: 1px solid var(--border); margin: 0.7rem 0; }
        #oracle-out .hexglyph { font-size: 3.2rem; line-height: 1; color: var(--accent); }
        #oracle-out .name { color: var(--accent); font-family: 'VT323', monospace; font-size: 1.5rem; letter-spacing: 0.06em; }
        #oracle-out .lines { font-size: 1rem; letter-spacing: 0.18em; line-height: 1.35; }
        #oracle-out .chg { color: var(--accent); }
        #oracle-out .src { opacity: 0.4; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; }
        #oracle-out .spread { display: flex; gap: 0.6rem; flex-wrap: wrap; white-space: normal; }
        #oracle-out .card { border: 1px solid var(--border); padding: 0.6rem 0.75rem; flex: 1; min-width: 150px; }
        #oracle-out .card-pos { font-size: 0.6rem; letter-spacing: 0.18em; color: var(--accent); opacity: 0.7; margin-bottom: 0.35rem; }
        #oracle-out .card-suit { font-size: 0.6rem; letter-spacing: 0.14em; opacity: 0.4; text-transform: uppercase; }
        #oracle-out .card-name { font-family: 'VT323', monospace; font-size: 1.5rem; color: var(--accent); letter-spacing: 0.05em; line-height: 1.1; margin: 0.1rem 0; }
        #oracle-out .card-or { font-size: 0.62rem; letter-spacing: 0.12em; opacity: 0.55; text-transform: uppercase; margin-bottom: 0.4rem; }
        #oracle-out .card-mean { font-size: 0.78rem; line-height: 1.5; opacity: 0.88; }
        .oracle-prompt { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-top: none; padding: 0.45rem 0.75rem; flex-shrink: 0; }
        .oracle-prompt span { color: var(--accent); }
        #oracle-cmd { flex: 1; background: transparent; border: none; color: var(--fg); font-family: 'Roboto Mono', monospace; font-size: 0.8rem; outline: none; }

        /* ── TAO VIEW ─────────────────────────────────────────────── */
        #view-tao { flex-direction: column; height: 100%; overflow: hidden; }
        .tao-bar {
            display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
            border: 1px solid var(--border); background: var(--box-bg);
            padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; flex-shrink: 0;
        }
        .tao-title { font-family: 'VT323', monospace; font-size: 1.2rem; letter-spacing: 0.1em; color: var(--accent); margin-right: auto; }
        .tao-controls { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
        .tao-controls select, .tao-controls button {
            background: var(--bg); color: var(--fg); border: 1px solid var(--border);
            font-family: 'Roboto Mono', monospace; font-size: 0.66rem; padding: 0.2rem 0.45rem; letter-spacing: 0.04em; cursor: pointer;
        }
        .tao-controls button:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
        .tao-controls button:disabled { opacity: 0.3; cursor: default; }
        #tao-orig[aria-pressed="false"] { opacity: 0.45; }
        [data-theme="bios"] .tao-controls select, [data-theme="bios"] .tao-controls button { background: var(--box-bg); color: var(--fg); }

        .tao-main { flex: 1; display: grid; grid-template-columns: 180px 1fr; gap: 0.75rem; overflow: hidden; }
        .tao-index { overflow-y: auto; border: 1px solid var(--border); background: var(--box-bg); }
        .tao-read { overflow-y: auto; padding: 0.5rem 1.25rem 1.5rem; }
        .tao-active { background: var(--fg) !important; color: var(--bg) !important; }

        .tao-chno { font-family: 'VT323', monospace; font-size: 2.6rem; color: var(--accent); line-height: 1; }
        .tao-chlabel { font-size: 0.6rem; letter-spacing: 0.2em; opacity: 0.4; text-transform: uppercase; margin-bottom: 1.2rem; }
        .tao-cols.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
        .tao-original { font-family: 'Songti SC','Noto Serif SC','Source Han Serif SC','SimSun',serif; font-size: 1.3rem; line-height: 2; letter-spacing: 0.05em; color: var(--accent); }
        .tao-translation { font-size: 0.82rem; line-height: 1.95; opacity: 0.9; }
        .tao-translation p { margin-bottom: 1em; }
        .tao-empty { opacity: 0.4; font-style: italic; }
        .tao-src { margin-top: 1.2rem; font-size: 0.6rem; letter-spacing: 0.12em; opacity: 0.35; text-transform: uppercase; }

        /* ── RESPONSIVE ───────────────────────────────────────────── */
        @media (max-width: 640px) {
            #content { padding: 0.75rem; }

            #nav-toggle { display: block; }
            #nav-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%; left: 0; right: 0;
                z-index: 200;
                background: var(--nav-bg);
                border-bottom: 1px solid var(--border);
            }
            #nav-menu.open { display: flex; }
            .nav-btn { height: auto; padding: 0.7rem 1.25rem; border-top: 1px solid var(--border); width: 100%; text-align: left; }

            .home-cols { grid-template-columns: 1fr; }
            #view-esoteric { grid-template-columns: 1fr; height: auto; }
            #esoteric-sidebar, #esoteric-content { overflow: visible; }

            #statusbar { font-size: 0.58rem; min-height: 1.55rem; }
            .status-online { display: none; }
        }

        @media (min-width: 641px) and (max-width: 860px) {
            .home-cols { grid-template-columns: 1fr; }
            #view-esoteric { grid-template-columns: 190px 1fr; }
        }
        @media (max-width: 640px) {
            #view-tao { height: auto; overflow: visible; }
            .tao-title { width: 100%; margin-right: 0; margin-bottom: 0.3rem; }
            .tao-main { grid-template-columns: 1fr; overflow: visible; }
            .tao-index { display: none; }
            .tao-read { overflow: visible; padding: 0.25rem 0 1.5rem; }
            .tao-cols.two { grid-template-columns: 1fr; gap: 1rem; }

            #view-oracle { height: auto; overflow: visible; }
            #oracle-out { overflow: visible; }
            .oracle-title { width: 100%; margin-right: 0; margin-bottom: 0.3rem; }
            .oracle-prompt { display: none; }
        }
.post-taxonomy { font-size: 0.72rem; opacity: 0.66; margin: 0.3rem 0 1rem; }
.post-body img { display: block; max-width: 100%; height: auto; margin: 1rem 0; }
.post-featured { display: block; max-width: 100%; height: auto; margin: 1rem 0; }
.post-body h3, .post-body h4, .post-body h5 { margin: 1.2rem 0 0.5rem; }
.post-body code { overflow-wrap: anywhere; }