:root{
    --bg:#000;
    --text:#cfcfcf;
    --muted:#9a9a9a;
}
html,body{height:100%}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: "MS Sans Serif", Tahoma, Verdana, sans-serif;
    overflow:hidden;
}

/* Fullscreen stage */
.stage{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Scanlines */
.scanlines{
    pointer-events:none;
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.0) 4px
    );
    mix-blend-mode: overlay;
    opacity:.35;
    animation: drift 6s linear infinite;
}
@keyframes drift{
    from{ transform: translateY(0px); }
    to{ transform: translateY(16px); }
}

/* Vignette */
.vignette{
    pointer-events:none;
    position:absolute;
    inset:-20%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%);
}

/* Boot panel */
.boot{
    width:min(720px, 92vw);
    text-align:center;
    position:relative;
    transform: translateY(-10px);
}

/* "Windows 95" logo made as SVG */
.logo{
    width:min(520px, 86vw);
    height:auto;
    display:block;
    margin: 0 auto 22px;
    image-rendering: pixelated;
}

.status{
    font-size: 14px;
    letter-spacing:.2px;
    color: var(--text);
    margin-top: 6px;
}

/* Progress bar (Win95-ish) */
.bar-wrap{
    margin: 18px auto 0;
    width: min(420px, 80vw);
    height: 14px;
    border: 1px solid #6b6b6b;
    background:#111;
    position:relative;
}
.bar{
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #bfbfbf, #e6e6e6);
    animation: load 5.5s ease-in-out forwards;
}
@keyframes load{
    0%{ width: 0%; }
    18%{ width: 20%; }
    45%{ width: 48%; }
    70%{ width: 76%; }
    100%{ width: 100%; }
}

.hint{
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}

/* Phase transitions */
.phase{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition: opacity 600ms ease;
}
.phase.on{ opacity:1; }

/* Early "memory check" text */
.bios{
    position:fixed;
    left: 22px;
    top: 18px;
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 13px;
    color:#cfcfcf;
    opacity:.95;
    white-space:pre;
    line-height:1.25;
}

/* Subtle flicker */
.flicker{
    animation: flicker 2.8s infinite;
}
@keyframes flicker{
    0%, 100%{ opacity: 1; }
    52%{ opacity: .93; }
    53%{ opacity: .86; }
    54%{ opacity: .98; }
    72%{ opacity: .94; }
}