/* ============================================================
           CSS Variables & Workbench Theme Mapping 
           ============================================================ */
        :root {
            --bg-color: #f4f4f2;       
            --text-color: #2b2b2b;     
            --dim-color: #444444;      
            --link-color: #1a5c9e;     
            --border-color: #d0d0ce;   
            --border-dark: #a3a3a0;

            --mono-font: 'Courier New', Courier, monospace;

           --vis-domain-1: #2B5B88; /* Deep Navy (Boats) - Lightened */
            --vis-domain-2: #3683C9; /* Cerulean Blue (Code) - Lightened */
            --vis-domain-3: #238F7D; /* Teal (Arts) - Lightened */
            --vis-domain-4: #926E15; /* Ochre Gold (Words) - Lightened */
            --vis-domain-5: #825375; /* Plum (Nonsense) - Lightened */
            
            --vis-subtag:  #444444; 
            --vis-label:   #2b2b2b; 
            --vis-link:    #a3a3a0; 
            
            --matrix-line: rgba(43, 91, 132, 0.12);
            --graph-paper-bg: #fafafa;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #1a1a1a;       
                --text-color: #e6e6e6;     
                --dim-color: #cccccc;      
                --link-color: #92C0E8;     
                --border-color: #333333;   
                --border-dark: #555555;

                --vis-domain-1: #4A88C6; /* Strong Muted Steel (Boats) - Deepened for separation */
                --vis-domain-2: #9EE0FF; /* Bright Electric Ice (Code) - Lightened for separation */
                --vis-domain-3: #4DB6AC; 
                --vis-domain-4: #DAB059; 
                --vis-domain-5: #CFAED2; 

                --vis-label:   #e6e6e6; 
                --vis-subtag:  #cccccc;
                --vis-link:    #aaaaaa; 
                
                --matrix-line: rgba(107, 154, 196, 0.1); 
                --graph-paper-bg: #222222;
            }
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--mono-font);
            font-weight: 500; 
            line-height: 1.5; 
            margin: 0;
            padding: 40px 20px; 
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        ::selection { background: var(--text-color); color: var(--bg-color); }
        *:focus-visible { outline: 2px dashed var(--text-color); outline-offset: 2px; }

        .container { max-width: 1100px; margin: 0 auto; }
        header { margin-bottom: 40px; border-bottom: 1px solid var(--border-dark); padding-bottom: 15px; } 
        
        h1 { font-size: 2.2rem; margin: 0 0 15px 0; letter-spacing: -0.02em; font-weight: bold; }
        h2 { font-size: 1.3rem; margin-top: 30px; margin-bottom: 15px; font-weight: bold; border-bottom: 1px dashed var(--border-dark); padding-bottom: 8px; }
        
        p, li { font-size: 1.05rem; }
        ul { padding-left: 0; }

        a { color: var(--link-color); text-decoration: underline; text-decoration-color: var(--border-dark); text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
        a:hover { color: var(--text-color); text-decoration-color: var(--text-color); }

        .system-boot-layout { margin-bottom: 2rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); } 
        .system-boot-text { flex: 1; min-width: 300px; }
        .system-boot-text .intro-paragraph { margin: 0; }
        .system-boot-text .intro-paragraph a { font-weight: 600; }

        .stick-figure { font-size: 1.8rem; line-height: 1.1; white-space: pre; font-weight: bold; }
        .wave { display: inline-block; animation: wave-animation 2.5s infinite; transform-origin: bottom left; }
        @keyframes wave-animation { 0%, 60%, 100% { transform: rotate(0.0deg); } 10%, 30% { transform: rotate(15.0deg); } 20% { transform: rotate(-10.0deg); } 40% { transform: rotate(-5.0deg); } 50% { transform: rotate(10.0deg); } }

        /* ============================================================
           Workbench Filters
           ============================================================ */
        .tag-btn { 
            background: transparent; 
            border: 1px solid transparent; 
            color: var(--dim-color); 
            padding: 0 5px; 
            height: 26px;   
            display: inline-flex;
            align-items: center;
            gap: 4px;       
            font-size: 0.9rem; 
            font-weight: 500;
            -webkit-text-stroke: 0.2px currentColor; 
            font-family: inherit;
            border-radius: 0; 
            cursor: pointer; 
            white-space: nowrap; 
            flex-shrink: 0;      
            transition: all 0.2s ease;
        }
        .tag-btn:focus-visible { outline-offset: 4px; }
        .tag-btn:hover { color: var(--text-color); }
        
        .tag-btn.active, .inline-tag.active { 
            color: var(--bg-color) !important; 
            background-color: var(--text-color) !important; 
            border-color: transparent !important; 
        }

        [data-filter="boats"] { --domain-color: var(--vis-domain-1); }
        [data-filter="code"] { --domain-color: var(--vis-domain-2); }
        [data-filter="arts"] { --domain-color: var(--vis-domain-3); }
        [data-filter="words"] { --domain-color: var(--vis-domain-4); }
        [data-filter="nonsense"] { --domain-color: var(--vis-domain-5); }

        .tag-btn[data-category="domain"]:not([data-filter="any"]),
        .inline-tag[data-category="domain"] {
            color: var(--domain-color); 
        }
        .tag-btn[data-category="domain"]:not([data-filter="any"]):hover,
        .inline-tag[data-category="domain"]:hover { 
            background-color: var(--matrix-line); 
        }
        .tag-btn[data-category="domain"].active:not([data-filter="any"]),
        .inline-tag[data-category="domain"].active { 
            background-color: var(--domain-color) !important; 
            border-color: transparent !important;
            color: var(--bg-color) !important; 
        }

        .filter-row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; column-gap: 8px; row-gap: 4px; } 
        .filter-header { display: flex; align-items: center; gap: 8px; }
        .filter-label { color: var(--dim-color); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: bold; user-select: none; white-space: nowrap; }
        .filter-btn-group { display: flex; flex-wrap: wrap; gap: 3px; flex-grow: 1; flex-basis: max-content; min-width: 0; }

 		.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
 		.gallery-item img {width: 100%; height: 240px;  object-fit: cover; display: block; }
		
		.inline-image { max-width: 100%; margin: 3rem 0; }
		.inline-image img {width: 100%; height: auto; display: block; }

/* ============================================================
   Pure Vanilla CSS/JS Lightbox
   ============================================================ */
#lightbox {
    display: none; 
    position: fixed; /* This is what pulls it off the bottom and makes it float */
    inset: 0; /* Shorthand for top:0; right:0; bottom:0; left:0; */
    background: rgba(0, 0, 0, 0.95); /* Dark semi-transparent background */
    z-index: 9999; /* Ensures it sits above absolutely everything else */
    align-items: center; 
    justify-content: center; 
    cursor: zoom-out;
    padding: 20px;
}

#lightbox.active { 
    display: flex; /* Makes it visible when clicked */
}

#lightbox img {
    max-width: 100%; 
    max-height: 90vh; 
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #333;
}

.lightbox-loader { 
    position: absolute; 
    color: white; 
    font-weight: bold; 
    z-index: -1; 
}

        /* --- FEED STYLING --- */
        .feed-item { 
            transition: opacity 0.3s ease, filter 0.3s ease, background-color 0.3s ease, border-left-color 0.3s ease; 
            padding: 10px 12px; 
            margin-bottom: 12px; 
            margin-left: -16px; 
            border-radius: 0; 
            border-left: 4px solid transparent;
            opacity: 1; 
        }

        .feed-item[data-tier="1"] { 
            opacity: 1; 
            background-color: var(--matrix-line); 
            border-left-color: var(--item-accent, var(--text-color)); 
        }
        
        .filters-active .feed-item[data-tier="2"] { 
            opacity: 0.8; 
            background-color: transparent;
            border-left-color: transparent;
        }
        
        .feed-item[data-tier="3"] { 
            opacity: 0.4; 
            filter: grayscale(80%); 
            background-color: transparent;
            border-left-color: transparent;
        }
        
        .feed-item[data-tier="2"]:hover, .feed-item[data-tier="3"]:hover { opacity: 1; filter: grayscale(0%); }

        .meta-text { font-size: 0.85rem; color: var(--dim-color); font-weight: bold; }
        .feed-list { list-style: none; padding-left: 0; }
        
        .system-glyph {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.6rem; 
            width: 1.8rem; 
            height: 1.8rem;
            transform: translateY(2px); 
        }

        .feed-item strong { font-size: 1.15rem; color: var(--text-color); }
        .feed-item a { color: var(--text-color); text-decoration: underline; text-decoration-color: var(--border-dark); text-underline-offset: 3px; border-bottom: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
        .feed-item a:hover { color: var(--link-color); text-decoration-color: var(--link-color); border-bottom: none; }
        .feed-item a[target="_blank"]::after { content: " ↗"; font-size: 0.8em; color: var(--dim-color); text-decoration: none; display: inline-block; }

        .item-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; } 
        .inline-tag { 
            cursor: pointer; 
            font-size: 0.8rem; 
            font-weight: 500;
            -webkit-text-stroke: 0.2px currentColor; 
            color: var(--dim-color);
            background: transparent;
            padding: 0 4px; 
            height: 22px; 
            display: inline-flex;
            align-items: center;
            gap: 4px; 
            border-radius: 0; 
            border: 1px solid transparent; 
            transition: all 0.2s ease;
        }
        .inline-tag:hover { color: var(--text-color); }

        details > summary { list-style: none; cursor: pointer; user-select: none; }
        details > summary::-webkit-details-marker { display: none; }
        details > summary::before { content: "+"; color: var(--dim-color); display: inline-block; width: 1.2em; font-weight: bold; }
        details[open] > summary::before { content: "-"; }

        .expanded-content {
            padding-left: 20px;
            margin-top: 8px; 
            color: var(--dim-color);
            border-left: 1px dashed var(--border-color);
            margin-left: 4px;
        }

        @keyframes flash-overview {
            0%, 100% { background-color: transparent; transform: translateX(0); box-shadow: none; }
            50%      { background-color: var(--matrix-line); transform: translateX(12px); box-shadow: -8px 0 0 var(--matrix-line); }
        }
        .highlight-pulse { animation: flash-overview 0.6s ease-in-out 3; }

        @keyframes feed-update-fade {
            0%   { opacity: 0.4; transform: translateY(4px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .feed-updating { animation: feed-update-fade 0.3s ease-out; }

        #workbench-arena { display: flex; flex-direction: column; gap: 1rem; width: 100%; } 
        .arena-top-panel { display: flex; flex-direction: column; gap: 1rem; }
        
        .arena-module-viz { 
            min-height: 280px; 
            background-color: var(--graph-paper-bg);
            background-image: 
                linear-gradient(var(--matrix-line) 1px, transparent 1px), 
                linear-gradient(90deg, var(--matrix-line) 1px, transparent 1px);
            background-size: 20px 20px; 
            background-position: center center;
            border-radius: 0; 
            border: 1px solid var(--border-color);
            position: relative; 
            overflow: hidden;
        }

        @media (min-width: 800px) {
            .arena-top-panel {
                display: grid;
                grid-template-columns: 1.4fr 1fr; 
                gap: 2rem;
                align-items: start;
            }
            .arena-module-viz { height: 380px; } 
            .arena-module-feed { padding-top: 0.5rem; margin-top: 0; }
        }

        #d3-workbench-interface svg { display: block; background: transparent !important; }

        #dynamic-subtag-index { margin-top: 0; padding-top: 0; }
        #dynamic-subtag-index summary { font-size: 0.85rem; color: var(--dim-color); font-weight: bold; }
        #dynamic-subtag-index summary:hover { color: var(--text-color); }
        .subtag-drawer { margin-top: 6px; padding-left: 16px; display: flex; flex-wrap: wrap; gap: 3px; }