* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #1a1a1a;
    color: #e8e8e8;
    font-family: 'Special Elite', 'Courier New', Courier, monospace;
    font-size: 18px;
    line-height: 1.6;
    overflow: hidden;
    cursor: text;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(32, 16, 22, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(32, 22, 18, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(28, 18, 32, 0.4) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 2;
}

#page {
    width: 100vw;
    height: 100vh;
    padding: 3rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    position: relative;
    z-index: 3;
}

#page:focus {
    outline: none;
}

.char {
    position: relative;
    display: inline-block;
}

.char .overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.cursor-indicator {
    position: relative;
}

.cursor-indicator::after {
    content: '↑';
    position: absolute;
    bottom: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    color: #e8e8e8;
    opacity: 0.6;
    font-size: 0.9em;
    pointer-events: none;
}

.cursor-indicator.shake::after {
    animation: boundaryShake 1s steps(8, end);
}

.cursor-indicator.fade-out::after {
    animation: fadeOut 0.3s ease-out forwards;
    animation-delay: 1s;
}

.cursor-indicator.shake.fade-out::after {
    animation: boundaryShake 1s steps(8, end), fadeOut 0.3s ease-out forwards 1s;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

@keyframes boundaryShake {
    0%,
    100% {
        transform: translateX(-50%);
    }
    20% {
        transform: translateX(calc(-50% - 2px));
    }
    40% {
        transform: translateX(calc(-50% + 2px));
    }
    60% {
        transform: translateX(calc(-50% - 1px));
    }
    80% {
        transform: translateX(calc(-50% + 1px));
    }
}