@font-face {
    font-family: "Pixelated MS Sans Serif";
    src: url("https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff2") format("woff2"),
         url("https://unpkg.com/98.css@0.1.16/dist/ms_sans_serif.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: '04b_30';
    /* Tells the browser to look in the exact same folder for this file */
    src: url('04b_30.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pixel NES';
    src: url('Pixel_NES.otf') format('opentype'); /* Change to .ttf and 'truetype' if your file is a TTF */
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg: #000000;          
    --bg2: #050505;         
    --bg3: #0a0a0a;         
    --border: #222222;      
    --border-hi: #444444;   
    --dim: #777777;         
    --mid: #aaaaaa;         
    --body: #ffffff;        /* CHANGED: White text */
    --bright: #ffffff;      
    --accent: #28887a;      /* CHANGED: Headings color */
    --accent2: #3a8a7e;     
    --link: #28887a;        /* Update links to match if desired */
    --link-h: #4fb8a9;      
    --green: #00ff00;       
    --red: #ff0044;         
}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--accent);color:#000}

body {
    background: var(--bg);
    color: var(--body);
    font-family: 'Pixelated MS Sans Serif', sans-serif;
    font-size: 18px; 
    line-height: 1.4;
    overflow-x: hidden;
    text-shadow: none; /* Keep standard text completely flat */
    -webkit-font-smoothing: none;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
    /* Subtle baseline air */
    text-shadow: 0 0 8px rgba(79, 184, 169, 0.3); 
}

a:hover {
    color: var(--link-h);
    /* Brighter air on hover */
    text-shadow: 0 0 8px var(--link-h), 0 0 15px var(--link-h); 
}

/* --- Typography Fog Utilities --- */

/* STYLE 1: Green text with ambient fog */
.fog-green { 
    color: var(--accent); 
    text-shadow: 
        0 0 5px rgba(79, 184, 169, 0.4),
        0 0 15px rgba(79, 184, 169, 0.6), 
        0 0 30px rgba(79, 184, 169, 0.4); 
    font-family: '04b_30', sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: none;
}

.fog-white { 
    color: var(--bright); 
    text-shadow: 
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(255, 255, 255, 0.5), 
        0 0 30px rgba(255, 255, 255, 0.3); 
    font-family: '04b_30', sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: none;
}

.flat-green { 
    color: var(--accent); 
    text-shadow: none; 
}

.flat-white { 
    color: var(--body); 
    text-shadow: none; 
}

#stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.star{position:absolute;border-radius:50%;animation:tw ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.08}50%{opacity:.6}}

#rainCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Changed from 9998 to 1 */
}

#scanlines{position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(transparent,transparent 2px,rgba(0,0,0,0.1) 2px,rgba(0,0,0,0.1) 4px);pointer-events:none;z-index:10000;display:none}

.hdr {
    position: relative;
    z-index: 10;
    padding: 40px 0 0px 0;
    text-align: center;
    margin-bottom: 0px;
    background: transparent;
}

.hdr-name {
    font-family: 'Pixel NES', sans-serif; /* Using your new font */
    font-size: 60px; 
    font-weight: normal;
    letter-spacing: 6px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;

    /* SAFARI FIX: Only the glows stay on the parent */
    filter: 
        drop-shadow(2px 0px 0px #5ebaa8)
        drop-shadow(-2px 0px 0px #5ebaa8)
        drop-shadow(0px 2px 0px #5ebaa8)
        drop-shadow(0px -2px 0px #5ebaa8)
        drop-shadow(6px 6px 0px #08111a)
        drop-shadow(0px 0px 15px rgba(79, 184, 169, 0.6))
        drop-shadow(0px 0px 35px rgba(79, 184, 169, 0.4));
        
    animation: voltage-buzz 0.05s infinite linear;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

/* SAFARI FIX: The text gradients move to the child spans */
.hdr-name span {
    display: inline-block;
    background: repeating-linear-gradient(
        to bottom,
        #4c9388 0px,
        #4c9388 4px,
        #3c786e 4px,
        #3c786e 8px
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0;
}

.hdr-name span.bulb-dead {
    /* Optional: This kills the glow and outline when the bulb dies, making it look truly unlit */
    filter: none; 
}

.hdr-sub {
    font-size: 16px;
    color: var(--dim);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 10px;
}

.wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 195px;
    gap: 8px;
    /* ADD THESE TWO LINES: */
    position: relative; 
    z-index: 10;
}

.b {
    background: var(--bg);
    border: 1px solid var(--border-hi); /* Slightly brighter border for crispness */
    border-radius: 5px; 
    margin-bottom: 12px;
    /* Optional: If you want depth, use a solid pixelated shadow, not a blur */
    box-shadow: 4px 4px 0px rgba(0,0,0,1); 
}

.bh {
    background: transparent;
    border-bottom: 1px dashed var(--border); 
    padding: 8px 10px;
    font-family: 'DotGothic16', sans-serif;
    font-size: 16px; /* DotGothic16 looks incredibly sharp at 16px */ 
    font-weight: normal; 
    color: var(--accent); /* This now pulls #28887a automatically */
    
    /* THE GLOWING AIR: Crisp center, distinct wide fog */
    text-shadow: 
        0 0 15px rgba(79, 184, 169, 0.8), /* Strong mid fog */
        0 0 30px rgba(79, 184, 169, 0.5); /* Wide ambient air */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

.bh::before {
    content: '☾ '; /* Adds the little moon icon dimden uses */
    color: var(--accent);
    margin-right: 5px;
}
.bh .t{font-size:13px;color:var(--dim)}
.bb {
    padding: 10px;
    
    /* The proportional pixel font for readability */
    font-family: 'Pixelated MS Sans Serif', sans-serif;
    font-size: 13px; 
    
    -webkit-font-smoothing: none;
    font-smooth: never;
}

.bb p {
    margin-bottom: 8px; 
}

.facts{list-style:none}
.facts li{padding:1px 0}
.facts li::before{content:'• ';color:var(--accent2)}
.em{color:var(--accent)}

.be{padding:4px 0;border-bottom:1px solid var(--border)}
.be:last-child{border-bottom:none}
.be a{color:var(--bright)}
.be a:hover{color:var(--accent)}
.bd{color:var(--dim);font-size:14px;margin-left:4px}

.pr{padding:5px 0;border-bottom:1px solid var(--border)}
.pr:last-child{border-bottom:none}
.pn{color:var(--link)}
.pn:hover{color:var(--accent)}
.pd{color:var(--mid);font-size:14px;margin-top:1px}
.px{padding:5px 0;color:var(--dim);font-size:14px;line-height:1.5}
.px a{color:var(--mid)}

.sg{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.sl{font-size:15px;padding:1px 0;color:var(--mid)}
.sl .ok{color:var(--green)}
.sl .off{color:var(--red)}

.sp{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ws{aspect-ratio:1;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--border-hi);font-size:14px;transition:border-color .2s,color .2s}
.ws:hover{border-color:var(--mid);color:var(--mid)}

.side{display:flex;flex-direction:column;gap:0}
.nl{list-style:none}
.nl li{padding:2px 0}
.nl a{color:var(--link);font-size:15px;transition:color .15s}
.nl a:hover{color:var(--accent);text-decoration:none}
.ns{color:var(--accent);margin-right:3px}

.nr{padding:3px 0;border-bottom:1px solid var(--border)}
.nr:last-child{border-bottom:none}
.nrl{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.nrv{color:var(--body);font-size:15px}

.sb{font-size:14px;color:var(--mid);line-height:1.5}
.sh{color:var(--bright);font-size:15px}
.st{color:var(--dim);font-size:13px}

.qt{font-family:'Lora',serif;font-style:italic;font-size:15px;color:var(--dim);line-height:1.5;border-left:2px solid var(--border-hi);padding-left:8px}
.qa{color:var(--dim);font-size:13px;margin-top:3px;font-family:'VT323',monospace}

.b88{display:inline-block;width:88px;height:31px;border:1px solid var(--accent2);background:linear-gradient(180deg,var(--bg3),var(--bg));color:var(--accent);font-family:'VT323',monospace;font-size:12px;line-height:31px;text-align:center;letter-spacing:1px}
.hn{font-size:13px;color:var(--dim);margin-top:3px}

.vc{font-size:13px;color:var(--dim);text-align:center}
.vm{font-family:'Lora',serif;font-style:italic;font-size:14px;color:var(--dim);text-align:center;margin-top:3px}

.set label{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:14px;color:var(--mid);cursor:pointer}
.set input[type=checkbox]{accent-color:var(--accent2);cursor:pointer}

.ft {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    color: var(--dim);
    border-top: 1px solid var(--border);
    /* ADD THESE TWO LINES: */
    position: relative;
    z-index: 10;
}

.rb{position:fixed;bottom:10px;right:10px;z-index:10001;background:var(--bg2);border:1px solid var(--border);padding:4px 10px;cursor:pointer;font-family:'VT323',monospace;font-size:14px;color:var(--dim);display:flex;align-items:center;gap:5px}
.rb:hover{border-color:var(--border-hi);color:var(--mid)}
.rb.on{color:var(--accent);border-color:var(--accent2)}
.rd{width:5px;height:5px;border-radius:50%;background:var(--dim)}
.rb.on .rd{background:var(--accent);animation:pu 2s infinite}
@keyframes pu{0%,100%{opacity:.5}50%{opacity:1}}

::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-hi)}
::-webkit-scrollbar-thumb:hover{background:var(--mid)}

@media(max-width:680px){
    .wrap{grid-template-columns:1fr}
    .sp{grid-template-columns:1fr}
    .hdr-name{font-size:40px}
}

/* Assign different timings so they naturally fall out of sync */
.bulb-1 { animation: flick-minor 4s infinite; }
.bulb-2 { animation: flick-minor 5.5s infinite; animation-delay: 1s; }
.bulb-3 { animation: flick-minor 7s infinite; animation-delay: 2.5s; }

/* The letters that completely die, just like the 'D' in the video */
.bulb-dead { animation: flick-dead 6s infinite; }

/* Subtle power surges for the regular letters */
@keyframes flick-minor {
    0%, 89%, 92%, 95%, 100% { opacity: 1; transform: none; }
    90%, 94% { opacity: 0.3; } /* Deeper dip into darkness */
    /* Complete blackout and a larger 2px violent jolt */
    91% { opacity: 0; transform: translate(-2px, 2px); } 
}

/* The aggressive, complete blackout for the dying bulbs */
@keyframes flick-dead {
    0%, 40%, 43%, 46%, 70%, 75%, 100% { opacity: 1; transform: none; }
    /* Harsher stutters with physical shaking */
    41%, 45% { opacity: 0.2; transform: translate(-2px, 1px); }
    42% { opacity: 0; transform: translate(2px, -2px); } 
    /* The deep blackout */
    71%, 74% { opacity: 0; } 
    /* A sudden, bright flash of struggling power in the dark */
    72% { opacity: 0.8; transform: translate(-1px, 0px); } 
}

/* Constant base AC voltage hum */
@keyframes voltage-buzz {
    0%, 100% { opacity: 1; }
    33% { opacity: 0.65; } /* A much deeper global power dip */
    66% { opacity: 0.95; }
}

/* --- The Power Switch & Cable Assembly --- */
.power-system {
    position: absolute;
    /* This drops the container down so the Y=16 line rests 2px above the card border */
    top: -50px; 
    /* Pushes the assembly far enough right that it hangs exactly beside the card */
    right: 250px; 
    width: 350px;
    height: 100px;
    pointer-events: none; 
    z-index: 10;
}

.power-switch {
    position: absolute;
    top: 100px; /* Meets the bottom of the wire */
    left: 593px; /* Shifted slightly to center under the new X=335/336/337 drop */
    width: 20px;
    height: 20px;
    background: #000000;
    border: 1px solid var(--border-hi);
    pointer-events: auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffe100;
    font-size: 11px; 
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.power-cord {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Ultra-thin, 1px aliased threads */
.cord-r { stroke: #cc0000; stroke-width: 1px; fill: none; shape-rendering: crispEdges; }
.cord-g { stroke: #00cc00; stroke-width: 1px; fill: none; shape-rendering: crispEdges; }
.cord-b { stroke: #0066cc; stroke-width: 1px; fill: none; shape-rendering: crispEdges; }

.power-switch:hover {
    background: #111111;
    color: #ffffff;
}
.power-switch:active {
    transform: translateY(2px); /* Physical click feel */
}

/* --- Power Off States --- */

/* 1. Kill the title glow and dim the letters */
/* 1. Kill the title glow and dim the letters */
.hdr-name.power-off {
    animation: none !important; 
    
    /* Deep, dark fill for the unlit glass tubes */
    background: repeating-linear-gradient(
        to bottom,
        #111e1b 0px,
        #111e1b 4px,
        #0a1210 4px,
        #0a1210 8px
    ) !important;
    -webkit-background-clip: text !important;
    
    /* Restores the outline shape, but uses a dim, dead teal.
      Keeps the dark 3D block shadow behind it.
    */
    filter: 
        drop-shadow(2px 0px 0px #1a3b34)
        drop-shadow(-2px 0px 0px #1a3b34)
        drop-shadow(0px 2px 0px #1a3b34)
        drop-shadow(0px -2px 0px #1a3b34)
        drop-shadow(6px 6px 0px #050a10) !important; 
}

/* 2. Stop the individual letters from flickering */
.hdr-name.power-off span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 3. Dim the switch itself so it looks "off" */
.power-switch.is-off {
    color: #444444; /* Darken the lightning bolt */
    border-color: #333333;
    background: #050505;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8); /* Makes it look pushed in */
}

.power-switch.is-off:hover {
    color: #777777;
    background: #111111;
}

/* --- Ghost Cursor Layer --- */
#cursor-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999; /* Above content, below scanlines */
    overflow: hidden;
}

.ghost-cursor {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: transform 0.08s linear; /* Smooth interpolation between position updates */
    opacity: 1;
    will-change: transform;
    z-index: 9999;
}

.ghost-cursor svg {
    display: block;
}

/* --- Online Pulse Indicator --- */
.online-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 4px;
    vertical-align: middle;
    animation: online-breathe 2s ease-in-out infinite;
    box-shadow: 0 0 4px var(--green), 0 0 8px var(--green);
}

@keyframes online-breathe {
    0%, 100% { opacity: 0.5; box-shadow: 0 0 4px var(--green); }
    50% { opacity: 1; box-shadow: 0 0 6px var(--green), 0 0 12px var(--green); }
}