:root{
    --void:#08090a;
    --panel:#1c1a22;
    --cream:#d8d0ae;
    --green:#8fd145;
    --green-hi:#b5f36a;
    --purple:#7540a8;
    --purple-hi:#a167db;
    --muted:#7e7a69;
    --display:"Bebas Neue","Arial Narrow",Arial,sans-serif;
    --mono:"Courier New",Courier,monospace
}

*{
    box-sizing:border-box
}

html,
body{
    margin:0;
    min-height:100%;
    background:var(--void);
    color:var(--cream)
}

/* Beamer page: the composition always remains a 16:9 canvas. */
.splash-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#000
}

.splash{
    position:relative;
    width:min(100vw,177.7778vh);
    aspect-ratio:16/9;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%,rgba(117,64,168,.22),transparent 42%),
        linear-gradient(rgba(117,64,168,.09) 1px,transparent 1px),
        linear-gradient(90deg,rgba(117,64,168,.09) 1px,transparent 1px),
        var(--void);
    background-size:auto,1.6667% 2.963%,1.6667% 2.963%,auto;
    font-family:var(--mono)
}

.screen-noise{
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.32;
    background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.3) 3px,rgba(0,0,0,.3) 5px)
}

.system-line{
    position:absolute;
    top:4.5%;
    left:4%;
    margin:0;
    color:var(--green);
    font-size:clamp(.55rem,1vw,1.2rem);
    font-weight:700;
    letter-spacing:.12em
}

.system-line::before{
    content:"■";
    margin-right:.65em;
    color:var(--green-hi)
}

.splash-copy{
    position:relative;
    z-index:1;
    width:82%;
    text-align:center
}

.welcome{
    margin:0 0 3.5%;
    color:var(--green-hi);
    font-size:clamp(1rem,2.2vw,2.6rem);
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase
}

.splash h1{
    margin:0;
    color:var(--purple-hi);
    font-family:var(--display);
    font-size:clamp(5rem,16vw,19rem);
    font-weight:400;
    letter-spacing:-.025em;
    line-height:.68;
    text-shadow:.035em .035em 0 rgba(143,209,69,.18)
}

.splash h1 > span{
    color:var(--cream)
}

.splash h1 small{
    display:block;
    margin-top:4.5%;
    color:var(--cream);
    font-size:.31em;
    letter-spacing:.06em
}

.splash-date{
    margin:4% 0 0;
    color:var(--green);
    font-family:var(--display);
    font-size:clamp(1.5rem,3.5vw,4.2rem);
    letter-spacing:.08em
}

.loading{
    position:absolute;
    right:4%;
    bottom:4.5%;
    display:flex;
    align-items:center;
    gap:.4vw;
    color:var(--green);
    font-size:clamp(.5rem,.9vw,1rem);
    font-weight:700
}

.loading span{
    margin-right:.6vw
}

.loading i{
    width:1vw;
    min-width:7px;
    aspect-ratio:1;
    background:var(--green)
}

.corner{
    position:absolute;
    width:5%;
    aspect-ratio:1;
    border-color:var(--purple-hi)
}

.corner-top-left{top:3%;left:2.5%;border-top:2px solid;border-left:2px solid}
.corner-top-right{top:3%;right:2.5%;border-top:2px solid;border-right:2px solid}
.corner-bottom-left{bottom:3%;left:2.5%;border-bottom:2px solid;border-left:2px solid}
.corner-bottom-right{right:2.5%;bottom:3%;border-right:2px solid;border-bottom:2px solid}

@media(prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important
    }
}

/* Foreground menu: fixed positioning leaves the splash composition untouched. */
.splash-menu{
    position:fixed;
    z-index:10;
    top:calc(50% + 150px);
    left:0;
    transform:translate(calc(-100% + 12px),-50%);
    display:flex;
    flex-direction:column;
    gap:4px;
    width:clamp(160px,17vw,240px);
    max-width:calc(100vw - 44px);
    padding:8px;
    border:1px solid var(--purple);
    border-left:0;
    background:var(--void);
    transition:transform .22s ease;
    box-shadow:5px 5px 0 var(--panel)
}

.splash-menu-entry{
    position:relative;
    display:flex;
    align-items:center;
    gap:.8em;
    width:100%;
    min-height:44px;
    padding:12px 10px;
    border:1px solid var(--purple);
    border-left:3px solid var(--purple-hi);
    border-radius:0;
    background:var(--panel);
    color:var(--cream);
    opacity:1;
    font:700 clamp(10px,.85vw,13px)/1.4 var(--mono);
    letter-spacing:.06em;
    text-align:left;
    text-decoration:none;
    text-transform:uppercase;
    transition:transform .16s ease,color .16s ease,border-color .16s ease
}

.splash-menu-number{
    color:var(--purple-hi);
    font-size:.8em;
    transition:color .16s ease
}

.splash-menu-entry:hover,
.splash-menu-entry:focus-visible{
    transform:translateX(5px);
    color:var(--green-hi);
    border-left-color:var(--green)
}

.splash-menu-entry:disabled{cursor:default}
.splash-menu-items{
    display:flex;
    flex-direction:column;
    gap:4px
}

.splash-menu:hover,
.splash-menu:focus-within{
    transform:translate(0,-50%)
}

.splash-menu:focus-visible{
    outline:2px solid var(--green);
    outline-offset:2px
}