:root {
    --red: #e21b23;
    --red-bright: #ff3038;
    --red-dark: #6d090d;

    --background: #030303;
    --panel: #090909;
    --panel-2: #0d0d0d;

    --border: #222;
    --border-light: #303030;

    --white: #f2f2f2;
    --gray: #888;
    --dark-gray: #4c4c4c;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at 70% 20%,
            #160607 0%,
            transparent 30%
        ),
        var(--background);

    color: var(--white);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}


/* =========================================================
   SCREEN EFFECTS
========================================================= */

.screen-noise,
.scanlines,
.vignette {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 90;
}

.screen-noise {
    opacity: .035;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    animation: noise .12s infinite;
}

.scanlines {
    opacity: .025;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            white 4px
        );
}

.vignette {
    background:
        radial-gradient(
            circle,
            transparent 40%,
            rgba(0,0,0,.85) 100%
        );
}

@keyframes noise {

    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(2%, -1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    75% {
        transform: translate(1%, 1%);
    }

    100% {
        transform: translate(0);
    }

}


/* =========================================================
   BOOT
========================================================= */

#boot {
    position: fixed;
    inset: 0;

    display: grid;
    place-items: center;

    background: #010101;

    z-index: 500;

    transition: opacity .8s;
}

.boot-inner {
    width: 320px;

    text-align: center;

    font-family: "JetBrains Mono", monospace;
}

.boot-p {
    color: var(--red);

    font-size: 90px;

    font-weight: 900;

    text-shadow:
        0 0 20px var(--red),
        0 0 80px var(--red);

    animation:
        bootPulse 1s infinite;
}

.boot-title {
    letter-spacing: 7px;

    font-weight: 800;
}

.boot-sub,
#boot-status {
    margin-top: 10px;

    color: #555;

    font-size: 8px;

    letter-spacing: 2px;
}

.boot-bar {
    height: 2px;

    margin: 25px 0;

    background: #1b1b1b;
}

.boot-bar span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--red);

    box-shadow:
        0 0 15px var(--red);

    animation:
        bootLoad 2s forwards;
}

@keyframes bootLoad {

    to {
        width: 100%;
    }

}

@keyframes bootPulse {

    50% {
        opacity: .45;
    }

}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    height: 68px;

    display: flex;
    align-items: center;

    padding: 0 4vw;

    background:
        rgba(3,3,3,.82);

    backdrop-filter: blur(20px);

    border-bottom: 1px solid #181818;

    z-index: 100;
}

.brand {
    border: 0;

    background: none;

    cursor: pointer;

    color: white;

    font-size: 16px;

    font-weight: 900;

    letter-spacing: 4px;

    margin-right: 35px;
}

.brand span {
    color: var(--red);

    margin-right: 5px;

    text-shadow:
        0 0 10px var(--red);
}

nav {
    display: flex;

    height: 100%;

    overflow-x: auto;
}

.nav-btn {
    position: relative;

    border: 0;

    background: none;

    color: #555;

    padding: 0 11px;

    white-space: nowrap;

    font:
        8px "JetBrains Mono";

    cursor: pointer;

    transition: .2s;
}

.nav-btn:hover,
.nav-btn.active {
    color: white;
}

.nav-btn.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 0;

    height: 2px;

    background: var(--red);

    box-shadow:
        0 0 12px var(--red);
}

.system-status {
    margin-left: auto;

    color: #555;

    font:
        8px "JetBrains Mono";

    white-space: nowrap;
}

.system-status i {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 7px;

    border-radius: 50%;

    background: #35ff88;

    box-shadow:
        0 0 12px #35ff88;
}


/* =========================================================
   PAGES
========================================================= */

.page {
    display: none;

    min-height: 100vh;

    padding:
        120px 7vw 80px;
}

.page.active {
    display: block;

    animation:
        pageIn .55s ease;
}

@keyframes pageIn {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 75vh;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    position: relative;
}

.hero-left {
    position: relative;

    z-index: 10;
}

.eyebrow {
    color: #666;

    font:
        9px "JetBrains Mono";

    letter-spacing: 3px;
}

.eyebrow span {
    display: inline-block;

    width: 25px;
    height: 1px;

    background: var(--red);

    margin-right: 10px;

    vertical-align: middle;
}


/* =========================================================
   PULSAR
========================================================= */

.pulsar-container {
    position: relative;

    display: inline-block;
}

#pulsar {
    position: relative;

    margin:
        35px 0 15px;

    font-size:
        clamp(75px, 12vw, 175px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -10px;

    cursor: crosshair;

    user-select: none;

    transition:
        color .15s,
        text-shadow .15s;
}

#pulsar.blood-active {
    color: var(--red-bright);

    text-shadow:
        0 0 10px var(--red),
        0 0 30px var(--red),
        0 0 80px var(--red-dark);

    animation:
        violentShake .065s infinite;
}

@keyframes violentShake {

    0% {
        transform:
            translate(0,0)
            rotate(0);
    }

    25% {
        transform:
            translate(2px,-2px)
            rotate(-.3deg);
    }

    50% {
        transform:
            translate(-3px,2px)
            rotate(.4deg);
    }

    75% {
        transform:
            translate(2px,1px)
            rotate(-.2deg);
    }

    100% {
        transform:
            translate(0,0);
    }

}


/* =========================================================
   BLOOD PARTICLES
========================================================= */

.blood-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--red-bright);

    box-shadow:
        0 0 10px var(--red);

    pointer-events: none;

    animation:
        bloodFly .8s forwards;
}

@keyframes bloodFly {

    from {
        transform:
            translate(0,0)
            scale(.2);

        opacity: 1;
    }

    to {
        transform:
            translate(var(--x), var(--y))
            scale(1.3);

        opacity: 0;
    }

}

.blood-meter {
    width: min(530px,90%);

    height: 2px;

    background: #191919;
}

.blood-meter-fill {
    width: 0;

    height: 100%;

    background: var(--red);

    box-shadow:
        0 0 15px var(--red);

    transition: width .08s;
}

.proximity {
    margin-top: 8px;

    color: #444;

    font:
        8px "JetBrains Mono";
}

.proximity strong {
    color: var(--red);
}

.hero-text {
    max-width: 600px;

    color: #888;

    font-size: 14px;

    line-height: 1.8;
}

.hero-actions {
    display: flex;

    gap: 10px;

    margin-top: 30px;
}

.action {
    border: 1px solid #292929;

    background: #080808;

    padding: 14px 20px;

    color: #aaa;

    font:
        9px "JetBrains Mono";

    cursor: pointer;

    transition: .25s;
}

.action:hover {
    color: white;

    border-color: var(--red);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 40px #000;
}

.action.primary {
    color: white;

    background: var(--red);

    border-color: var(--red);
}

.action span {
    margin-left: 15px;
}

.identity-strip {
    display: flex;

    gap: 30px;

    margin-top: 45px;
}

.identity-strip div {
    padding-left: 12px;

    border-left: 1px solid #292929;
}

.identity-strip small {
    display: block;

    color: #4c4c4c;

    font:
        8px "JetBrains Mono";
}

.identity-strip strong {
    display: block;

    margin-top: 7px;

    font:
        9px "JetBrains Mono";
}

.red {
    color: var(--red);
}


/* =========================================================
   COSMIC AREA
========================================================= */

.cosmic-space {
    height: 600px;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;
}

.stars {
    position: absolute;

    inset: -20%;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    opacity: .25;

    animation:
        starTravel 35s linear infinite;
}

.stars-b {
    background-size: 127px 127px;

    opacity: .17;

    animation-duration: 50s;

    animation-direction: reverse;
}

.stars-c {
    background-size: 211px 211px;

    opacity: .1;

    animation-duration: 70s;
}

@keyframes starTravel {

    to {
        transform:
            translate(300px,180px);
    }

}


/* =========================================================
   BLACK HOLE
========================================================= */

.black-hole {
    position: relative;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    animation:
        blackHoleFloat 5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 0 30px #e21b2344
        );
}

@keyframes blackHoleFloat {

    50% {
        transform:
            translateY(-12px)
            scale(1.03);
    }

}


/* Large orbiting paths */

.orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid #e21b2366;

    border-radius: 50%;

    transform:
        translate(-50%,-50%);

    box-shadow:
        0 0 12px #e21b2318;

    animation:
        orbitRotate linear infinite;
}

.orbit-1 {
    width: 92%;
    height: 36%;

    animation-duration: 7s;
}

.orbit-2 {
    width: 85%;
    height: 45%;

    transform:
        translate(-50%,-50%)
        rotate(20deg);

    animation-duration: 9s;
}

.orbit-3 {
    width: 78%;
    height: 54%;

    transform:
        translate(-50%,-50%)
        rotate(-20deg);

    animation-duration: 6s;

    animation-direction: reverse;
}

.orbit-4 {
    width: 72%;
    height: 65%;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

    animation-duration: 12s;
}

.orbit-5 {
    width: 65%;
    height: 78%;

    transform:
        translate(-50%,-50%)
        rotate(-40deg);

    animation-duration: 10s;

    opacity: .55;
}

.orbit-6 {
    width: 100%;
    height: 28%;

    transform:
        translate(-50%,-50%)
        rotate(65deg);

    animation-duration: 5s;

    opacity: .4;
}

@keyframes orbitRotate {

    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


/* =========================================================
   ORBIT PARTICLES
========================================================= */

.orbit-particle {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    margin-left: -3px;
    margin-top: -3px;

    border-radius: 50%;

    background: var(--red-bright);

    box-shadow:
        0 0 10px var(--red),
        0 0 25px var(--red);

    transform-origin:
        3px 3px;
}

.particle-1 {
    animation:
        particleOrbit1 3s linear infinite;
}

.particle-2 {
    animation:
        particleOrbit2 4.5s linear infinite;
}

.particle-3 {
    animation:
        particleOrbit3 6s linear infinite;
}

.particle-4 {
    animation:
        particleOrbit4 7s linear infinite;
}

.particle-5 {
    animation:
        particleOrbit5 8s linear infinite;
}

@keyframes particleOrbit1 {

    from {
        transform:
            rotate(0)
            translateX(180px);
    }

    to {
        transform:
            rotate(360deg)
            translateX(180px);
    }

}

@keyframes particleOrbit2 {

    from {
        transform:
            rotate(360deg)
            translateX(150px)
            scale(.7);
    }

    to {
        transform:
            rotate(0)
            translateX(150px)
            scale(.7);
    }

}

@keyframes particleOrbit3 {

    from {
        transform:
            rotate(0)
            translateX(130px)
            scale(.5);
    }

    to {
        transform:
            rotate(360deg)
            translateX(130px)
            scale(.5);
    }

}

@keyframes particleOrbit4 {

    from {
        transform:
            rotate(120deg)
            translateX(200px)
            scale(.45);
    }

    to {
        transform:
            rotate(480deg)
            translateX(200px)
            scale(.45);
    }

}

@keyframes particleOrbit5 {

    from {
        transform:
            rotate(270deg)
            translateX(110px)
            scale(.35);
    }

    to {
        transform:
            rotate(-90deg)
            translateX(110px)
            scale(.35);
    }

}


/* =========================================================
   ACCRETION LINES
========================================================= */

.accretion-line {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 340px;
    height: 2px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff2028,
            #ff7777,
            transparent
        );

    filter:
        blur(1px);

    opacity: .7;
}

.line-1 {
    transform:
        rotate(7deg);

    animation:
        linePulse 1.2s infinite;
}

.line-2 {
    transform:
        rotate(28deg)
        scale(.85);

    animation:
        linePulse 1.6s infinite .2s;
}

.line-3 {
    transform:
        rotate(52deg)
        scale(.75);

    animation:
        linePulse 1.3s infinite .4s;
}

.line-4 {
    transform:
        rotate(78deg)
        scale(.9);

    animation:
        linePulse 1.8s infinite .1s;
}

.line-5 {
    transform:
        rotate(110deg)
        scale(.72);

    animation:
        linePulse 1.5s infinite .3s;
}

.line-6 {
    transform:
        rotate(145deg)
        scale(.88);

    animation:
        linePulse 1.4s infinite .5s;
}

.line-7 {
    transform:
        rotate(188deg)
        scale(.65);

    animation:
        linePulse 1.7s infinite .2s;
}

.line-8 {
    transform:
        rotate(225deg)
        scale(.8);

    animation:
        linePulse 1.1s infinite .6s;
}

@keyframes linePulse {

    0% {
        opacity: .15;

        filter:
            blur(3px);
    }

    50% {
        opacity: .9;

        filter:
            blur(.5px);
    }

    100% {
        opacity: .15;

        filter:
            blur(3px);
    }

}


/* =========================================================
   ACCRETION DISK
========================================================= */

.accretion {
    position: absolute;

    inset: 15%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            #7d070b,
            #ff272e,
            #ff9b9b,
            #76050a,
            transparent,
            #f51c25,
            transparent
        );

    filter:
        blur(10px);

    mask-image:
        radial-gradient(
            circle,
            transparent 0 28%,
            black 40% 65%,
            transparent 78%
        );

    animation:
        diskSpin 2.7s linear infinite;
}

@keyframes diskSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   EVENT HORIZON
========================================================= */

.photon-ring {
    position: absolute;

    inset: 22%;

    border:
        5px solid #ff3338;

    border-radius: 50%;

    filter:
        blur(5px);

    box-shadow:
        0 0 30px #ff2020,
        0 0 70px #9b080d;

    animation:
        photonPulse 1.4s infinite;
}

.event-horizon {
    position: absolute;

    inset: 30%;

    border-radius: 50%;

    background:
        #000;

    z-index: 10;

    box-shadow:
        0 0 35px 15px #000,
        0 0 70px 30px #6d090d55;
}

.singularity {
    position: absolute;

    inset: 41%;

    border-radius: 50%;

    background: #000;

    z-index: 11;

    box-shadow:
        0 0 30px #000;
}

@keyframes photonPulse {

    50% {
        opacity: .55;

        transform:
            scale(1.06);
    }

}


/* =========================================================
   DATA
========================================================= */

.data-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    border-top: 1px solid #202020;
    border-bottom: 1px solid #202020;
}

.data-cell {
    padding: 24px;

    border-right: 1px solid #202020;
}

.data-cell small {
    color: #4c4c4c;

    font:
        8px "JetBrains Mono";
}

.data-cell strong {
    display: inline-block;

    margin-top: 10px;

    font:
        700 23px "JetBrains Mono";
}

.data-cell span {
    margin-left: 8px;

    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.ticker {
    padding: 15px 0;

    color: #555;

    font:
        8px "JetBrains Mono";
}

.ticker span {
    color: var(--red);

    margin-right: 10px;
}


/* =========================================================
   HEADINGS
========================================================= */

.section-heading {
    margin-bottom: 60px;
}

.section-heading > span {
    color: #666;

    font:
        9px "JetBrains Mono";

    letter-spacing: 3px;
}

.section-heading h2 {
    margin:
        20px 0;

    font-size:
        clamp(45px,7vw,90px);

    line-height: .9;

    letter-spacing: -5px;
}

.section-heading h2 em {
    color: var(--red);

    font-style: normal;
}

.section-heading p {
    color: #555;
}


/* =========================================================
   IDENTITY
========================================================= */

.identity-layout {
    display: grid;

    grid-template-columns:
        1.6fr .8fr;

    gap: 20px;
}

.main-biography {
    padding: 40px;

    background:
        linear-gradient(
            135deg,
            #0d0d0d,
            #070707
        );

    border: 1px solid var(--border);
}

.main-biography label {
    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.main-biography h3 {
    font-size: 32px;
}

.main-biography p {
    color: #888;

    line-height: 1.9;
}

.main-biography blockquote {
    margin-top: 40px;

    padding-left: 18px;

    border-left: 2px solid var(--red);

    color: #ccc;

    font-style: italic;
}

.identity-cards {
    display: grid;

    gap: 12px;
}

.redacted-card {
    padding: 23px;

    background: #090909;

    border: 1px solid #222;
}

.redacted-card small {
    display: block;

    color: #555;

    font:
        8px "JetBrains Mono";
}

.redacted-card strong {
    display: block;

    margin: 12px 0;

    font:
        13px "JetBrains Mono";
}

.redacted-card span {
    color: var(--red);

    font:
        7px "JetBrains Mono";
}

.quote-banner {
    margin-top: 20px;

    padding: 30px;

    border:
        1px solid #202020;

    background:
        linear-gradient(
            90deg,
            #110304,
            transparent
        );
}

.quote-banner span {
    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.quote-banner p {
    font-size: 20px;

    color: #bbb;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    margin-left: 30px;

    border-left: 1px solid #292929;
}

.timeline-entry {
    position: relative;

    padding:
        0
        0
        65px
        45px;
}

.timeline-marker {
    position: absolute;

    left: -17px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid var(--red);

    background: #050505;

    color: var(--red);

    font:
        9px "JetBrains Mono";
}

.timeline-content > span {
    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.timeline-content h3 {
    font-size: 26px;
}

.timeline-content p {
    max-width: 750px;

    color: #777;

    line-height: 1.8;
}


/* =========================================================
   PSYCHE
========================================================= */

.mind-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;
}

.radar {
    position: relative;

    height: 480px;

    overflow: hidden;

    border: 1px solid #222;

    background:
        radial-gradient(
            circle,
            #131313,
            #030303 70%
        );
}

.radar-circle {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid #292929;

    border-radius: 50%;

    transform:
        translate(-50%,-50%);
}

.r1 {
    width: 80%;
    height: 80%;
}

.r2 {
    width: 55%;
    height: 55%;
}

.r3 {
    width: 30%;
    height: 30%;
}

.radar-cross {
    position: absolute;

    background: #252525;
}

.radar-cross.horizontal {
    left: 5%;
    right: 5%;
    top: 50%;

    height: 1px;
}

.radar-cross.vertical {
    top: 5%;
    bottom: 5%;
    left: 50%;

    width: 1px;
}

.radar-sweep {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 45%;
    height: 2px;

    transform-origin: left;

    background:
        linear-gradient(
            90deg,
            var(--red),
            transparent
        );

    box-shadow:
        0 0 15px var(--red);

    animation:
        radarSweep 3s linear infinite;
}

@keyframes radarSweep {

    to {
        transform:
            rotate(360deg);
    }

}

.radar-center {
    position: absolute;

    width: 16px;
    height: 16px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    background: var(--red);

    border-radius: 50%;

    box-shadow:
        0 0 25px var(--red);
}

.radar-point {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 10px var(--red);

    animation:
        pointPulse 1s infinite;
}

.point-a {
    top: 28%;
    left: 32%;
}

.point-b {
    top: 38%;
    right: 25%;
}

.point-c {
    bottom: 27%;
    left: 28%;
}

.point-d {
    bottom: 22%;
    right: 32%;
}

@keyframes pointPulse {

    50% {
        transform:
            scale(2);

        opacity: .4;
    }

}

.radar-text {
    position: absolute;

    color: #555;

    font:
        7px "JetBrains Mono";
}

.text-a {
    top: 18%;
    left: 15%;
}

.text-b {
    bottom: 18%;
    left: 12%;
}

.text-c {
    top: 15%;
    right: 12%;
}

.text-d {
    bottom: 15%;
    right: 12%;
}

.traits {
    display: grid;

    gap: 30px;
}

.trait-header {
    display: flex;

    justify-content: space-between;

    color: var(--red);

    font:
        9px "JetBrains Mono";
}

.trait-bar {
    height: 3px;

    margin-top: 10px;

    background: #191919;
}

.trait-bar i {
    display: block;

    height: 100%;

    background: var(--red);

    box-shadow:
        0 0 10px var(--red);
}

.traits p {
    color: #777;

    line-height: 1.7;

    font-size: 13px;
}


/* =========================================================
   DISCIPLINES
========================================================= */

.discipline-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 14px;
}

.discipline-grid article {
    position: relative;

    min-height: 280px;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #0c0c0c,
            #060606
        );

    border: 1px solid #202020;

    transition:
        .3s;
}

.discipline-grid article:hover {
    transform:
        translateY(-7px);

    border-color:
        var(--red);

    box-shadow:
        0 20px 50px #000;
}

.discipline-number {
    color: var(--red);

    font:
        9px "JetBrains Mono";
}

.discipline-grid h3 {
    font-size: 18px;

    margin-top: 35px;
}

.discipline-grid p {
    color: #777;

    line-height: 1.7;

    font-size: 13px;
}

.discipline-tags {
    position: absolute;

    left: 30px;
    bottom: 25px;

    display: flex;

    gap: 5px;
}

.discipline-tags span {
    padding: 5px 7px;

    border: 1px solid #292929;

    color: #555;

    font:
        6px "JetBrains Mono";
}


/* =========================================================
   PRINCIPLES
========================================================= */

.principles {
    max-width: 900px;
}

.principle {
    display: grid;

    grid-template-columns: 80px 1fr;

    padding:
        35px 0;

    border-bottom: 1px solid #202020;
}

.principle > span {
    color: var(--red);

    font:
        10px "JetBrains Mono";
}

.principle h3 {
    margin: 0;

    font-size: 18px;
}

.principle p {
    color: #777;

    line-height: 1.7;
}


/* =========================================================
   ARCHIVE
========================================================= */

.archive-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 12px;
}

.archive-file {
    display: grid;

    grid-template-columns:
        70px 1fr auto;

    gap: 10px;

    text-align: left;

    padding: 25px;

    border: 1px solid #222;

    background: #080808;

    cursor: pointer;

    transition: .25s;
}

.archive-file:hover {
    border-color: var(--red);

    transform:
        translateY(-3px);
}

.archive-file span {
    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.archive-file strong {
    font:
        11px "JetBrains Mono";
}

.archive-file small {
    grid-column: 2;

    color: #555;
}

.archive-file i {
    color: #555;

    font:
        7px "JetBrains Mono";
}

.archive-reader {
    margin-top: 15px;

    min-height: 180px;

    padding: 25px;

    border: 1px solid #222;

    background:
        #070707;

    font:
        11px "JetBrains Mono";

    line-height: 1.8;
}

.reader-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 20px;

    color: #555;

    font-size: 8px;
}

#reader-status {
    color: var(--red);
}


/* =========================================================
   TERMINAL
========================================================= */

.terminal-window {
    border: 1px solid #242424;

    background: #050505;

    box-shadow:
        0 20px 70px #000;
}

.terminal-header {
    display: flex;

    justify-content: space-between;

    padding: 13px 18px;

    border-bottom: 1px solid #222;

    color: #555;

    font:
        8px "JetBrains Mono";
}

.terminal-header i {
    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 5px;

    border-radius: 50%;

    background: #35ff88;

    box-shadow:
        0 0 10px #35ff88;
}

#terminal-output {
    height: 400px;

    overflow: hidden;

    padding: 20px;

    color: #777;

    font:
        10px "JetBrains Mono";
}

.terminal-line {
    margin:
        0 0 9px;
}

.terminal-line b {
    color: var(--red);
}

.terminal-input {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 15px 20px;

    border-top: 1px solid #202020;

    color: var(--red);

    font-family:
        "JetBrains Mono";
}

#terminal-input {
    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: white;

    font:
        10px "JetBrains Mono";
}

.terminal-info {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    margin-top: 12px;
}

.terminal-info div {
    padding: 20px;

    border: 1px solid #222;

    background: #080808;
}

.terminal-info small {
    display: block;

    color: #555;

    font:
        7px "JetBrains Mono";
}

.terminal-info strong {
    display: block;

    margin-top: 8px;

    font:
        10px "JetBrains Mono";
}


/* =========================================================
   FRAGMENTS
========================================================= */

.fragment-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 12px;
}

.fragment-grid article {
    min-height: 200px;

    padding: 28px;

    border: 1px solid #202020;

    background: #080808;

    transition: .3s;
}

.fragment-grid article:hover {
    border-color: var(--red);

    transform:
        translateY(-5px);
}

.fragment-grid span {
    color: var(--red);

    font:
        8px "JetBrains Mono";
}

.fragment-grid h3 {
    margin-top: 30px;

    font-size: 17px;
}

.fragment-grid p {
    color: #777;

    line-height: 1.7;
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.final-message {
    margin-top: 100px;

    padding:
        70px 30px;

    text-align: center;

    border-top: 1px solid #222;
}

.final-message > span {
    color: #555;

    font:
        8px "JetBrains Mono";
}

.final-message h2 {
    max-width: 850px;

    margin:
        25px auto 40px;

    font-size:
        clamp(35px,6vw,75px);

    line-height: .95;

    letter-spacing: -4px;
}

.final-message h2 em {
    color: var(--red);

    font-style: normal;
}


/* =========================================================
   CURSOR
========================================================= */

.cursor-dot,
.cursor-ring {
    position: fixed;

    z-index: 300;

    pointer-events: none;

    transform:
        translate(-50%,-50%);

    border-radius: 50%;
}

.cursor-dot {
    width: 5px;
    height: 5px;

    background: var(--red);

    box-shadow:
        0 0 10px var(--red);
}

.cursor-ring {
    width: 28px;
    height: 28px;

    border: 1px solid #e21b2377;

    transition:
        width .2s,
        height .2s;
}

.cursor-ring.hot {
    width: 55px;
    height: 55px;

    border-color: var(--red);

    box-shadow:
        0 0 25px #e21b2355;
}


/* =========================================================
   TOAST
========================================================= */

#toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 400;

    padding: 15px 20px;

    background: #0b0b0b;

    border: 1px solid var(--red);

    color: #ddd;

    font:
        8px "JetBrains Mono";

    opacity: 0;

    transform:
        translateY(10px);

    transition: .3s;
}

#toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    display: flex;

    justify-content: space-between;

    padding:
        25px 7vw;

    border-top: 1px solid #191919;

    color: #3e3e3e;

    font:
        7px "JetBrains Mono";
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:1000px) {

    nav {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .cosmic-space {
        position: absolute;

        inset:
            100px 0 0;

        opacity: .25;

        pointer-events: none;
    }

    .data-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .identity-layout,
    .mind-layout {
        grid-template-columns: 1fr;
    }

    .discipline-grid,
    .fragment-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:650px) {

    .page {
        padding:
            100px 5vw 60px;
    }

    .discipline-grid,
    .fragment-grid,
    .archive-grid {
        grid-template-columns: 1fr;
    }

    .identity-strip {
        flex-wrap: wrap;
    }

    .identity-strip div {
        min-width: 100px;
    }

    .data-grid {
        grid-template-columns: 1fr;
    }

    .data-cell {
        border-bottom: 1px solid #202020;
    }

    .terminal-info {
        grid-template-columns: 1fr;
    }

    footer {
        flex-direction: column;

        gap: 10px;
    }

    .cursor-dot,
    .cursor-ring {
        display: none;
    }

}