:root{
    --red:#ff0000;
    --yellow:#ffea00;
    --black:#000;
    --bg-alpha: #000000dd;
    --accent: #ff2a2a;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:'Share Tech Mono', monospace;
    background:var(--black);
    color:var(--yellow);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* GLITCH BACKGROUND GRID */
.glitch-bg{
    position:fixed; inset:0;
    background:
        linear-gradient(90deg, rgba(255,0,0,0.12) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(rgba(255,0,0,0.06) 1px, transparent 1px) 0 0 / 36px 36px;
    animation:bgMove 12s linear infinite;
    z-index:-2;
}
@keyframes bgMove{0%{background-position:0 0}100%{background-position:400px 400px}}

/* INTRO / OVERLAY - MAX AGGRESSION */
.intro-overlay{
    position:fixed; inset:0;
    background: linear-gradient(180deg, rgba(255,0,0,0.95), rgba(0,0,0,0.6));
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    overflow:hidden;
}
.intro-inner{ text-align:center; color:var(--yellow); transform:scale(1); }
.intro-text{ color:var(--yellow); letter-spacing:3px; text-shadow:0 0 12px rgba(255,234,0,0.6);}
.intro-text.small{ font-size:1rem; opacity:0.95; margin-bottom:8px; }
.intro-text.med{ font-size:1.1rem; margin-top:8px; opacity:0.95; }
.intro-text.large{ font-size:3.2rem; font-weight:700; color:var(--red); text-shadow:0 0 18px var(--red); margin-top:6px; }
.intro-inner .flash{
    position:absolute; inset:0; background:rgba(255,0,0,0.05);
    animation:flashPulse 250ms ease-in-out 0s 4;
    pointer-events:none;
}
@keyframes flashPulse{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* glitch effect */
.glitch::before, .glitch::after{
    content: attr(data-text);
    position: absolute;
    left:0; right:0;
    top:0;
}
.glitch::before{ clip-path: inset(0 0 67% 0); transform:translate(-2px,-2px); color:var(--yellow); opacity:0.9;}
.glitch::after{ clip-path: inset(67% 0 0 0); transform:translate(2px,2px); color:var(--yellow); opacity:0.9;}
/* shake/glitch animations */
.intro-inner{ animation: introShake 1.6s ease-in-out; }
@keyframes introShake{
    0%{transform:translateY(0) scale(1)}
    10%{transform:translateY(-6px) scale(1.02)}
    20%{transform:translateY(4px) scale(0.99)}
    30%{transform:translateX(-6px) rotate(-0.5deg)}
    40%{transform:translateX(4px) rotate(0.5deg)}
    50%{transform:translateY(0) scale(1)}
    60%{transform:translateX(-3px)}
    70%{transform:translateX(3px)}
    100%{transform:translateY(0) scale(1)}
}

/* header + topbar */
header{ padding:18px 16px; text-align:center; position:relative; z-index:2;}
.topbar{ display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;  }
h1{ margin:0; font-size:4.2rem; color:var(--red); text-shadow:0 0 10px var(--red); }
.subtitle{ color:var(--yellow); margin-top:20px; letter-spacing:2px; font-size: 22px}
/* footer */
footer { padding:20px 20px; text-align:center; position:relative; z-index:2; color:red;  text-shadow:0 0 14px rgba(255,234,0,0.6); font-size: 16px; 
 }

/* lang switch */
.lang-switch{ display:flex; gap:8px; margin-left:12px;}
.lang{ background:transparent; border:2px solid var(--red); color:var(--yellow); padding:6px 10px; cursor:pointer; font-weight:700; }
.lang.active{ background:var(--red); color:#000; box-shadow:0 0 12px var(--red); }

/* modules */
main{ padding:10px 12px 60px; max-width:1000px; margin:0 auto; z-index:1; position:relative;}
.module{ border:2px solid var(--red); padding:18px; margin:18px auto; background:linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0.6)); box-shadow:0 0 20px rgba(255,0,0,0.08); border-radius:6px;}
.description{ color:var(--yellow); margin:8px 0 12px; font-size:20px; }

/* buttons/inputs */
button{ padding:10px 16px; margin:6px 6px 6px 0; background:var(--red); border:none; color:#000; font-weight:700; cursor:pointer; box-shadow:0 0 10px rgba(255,0,0,0.35);}
button:hover{ background:var(--yellow); box-shadow:0 0 12px rgba(255,234,0,0.5);}
input{ padding:10px; margin:6px 6px 6px 0; width:260px; background:#111; border:1px solid var(--yellow); color:var(--yellow); }

/* bit demo */
.bit-line{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.bit{ width:44px; height:44px; border:2px solid var(--yellow); display:flex; align-items:center; justify-content:center; color:var(--yellow); font-size:1.1rem; transition:0.25s;}
.bit.on{ background:var(--red); color:#000; border-color:var(--accent); box-shadow:0 0 12px rgba(255,0,0,0.6); transform:scale(1.04); }

/* outputs */
.output{ margin-top:12px; padding:12px; background:#0b0b0b; border:1px solid var(--red); color:var(--yellow); min-height:36px; }

/* challenge */
.challenge{ margin:10px 0; padding:10px; border:2px dashed var(--yellow); color:var(--yellow); }

/* responsive */
@media(max-width:640px){
    h1{ font-size:1.6rem;}
    .intro-text.large{ font-size:2rem;}
    input{ width:100%; }
    .converter{ display:flex; flex-direction:column; gap:8px; }
}