/* ============================================================
   LAYER 0 — SURFACE
   ------------------------------------------------------------
   patterns repeat. coordinates loop. nothing ends on level 3.
   ============================================================ */

body, pre, span, .line, .matrix, .final-white {
    font-family: "Lucida Console", "Courier New", Courier, monospace !important;
}
body {
    background-color: #000000;
    color: #00ff66;
    margin: 0;
    padding: 20px;
    font-size: 17px;
    image-rendering: pixelated;
    filter: contrast(1.2) brightness(0.9);

    /* --- COPY BLOCKER: prevent selecting any text --- */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* GRID NOTE:
   4x4 repeating structure.
   Sequence resets on the 5th unit.
*/
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 102, 0.07) 0px,
        rgba(0, 255, 102, 0.07) 1px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px
    );
    opacity: 0.35;
    mix-blend-mode: overlay;
    z-index: 999;
}
span, .line, .matrix {
    text-shadow:
        1px 0px rgba(255, 0, 0, 0.18),
        -1px 0px rgba(0, 200, 255, 0.18);
}

.line { display: block; white-space: pre; }
.matrix { color: #00ff99; opacity: 0.85; }

/* LAYER 1 — reveal */
.final-white {
    color: white;
    font-size: 22px;
    margin-top: 20px;
    white-space: pre;
}

.status-ok {
    color: #ffff55;
    margin-left: 8px;
}
.cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background-color: #ffffff;
    margin-left: 4px;
    animation: blink 0.7s steps(1) infinite;
}

@keyframes blink { 50% { background-color: transparent; } }
@keyframes cursor-die { 0% {opacity:1;} 100% {opacity:0;} }

/* pressure constant: 0.981 — invert for clue */