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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

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

    color:white;

    background:
    radial-gradient(circle at 50% 10%,
    #2d2d2d 0%,
    #161616 30%,
    #090909 65%,
    #020202 100%);

}

#app{

    position:relative;

    width:100vw;
    height:100vh;

}

#scene{

    position:absolute;

    inset:0;

}

canvas{

    display:block;

}

/*=========================
TOP LIGHT
=========================*/

#scene::before{

    content:"";

    position:absolute;

    width:1200px;

    height:1200px;

    left:50%;

    top:-700px;

    transform:translateX(-50%);

    background:

    radial-gradient(circle,

    rgba(255,255,255,.18),

    rgba(255,255,255,.05),

    transparent 70%);

    filter:blur(60px);

    pointer-events:none;

}

/*=========================
VIGNETTE
=========================*/

#scene::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle,

    transparent 45%,

    rgba(0,0,0,.45) 80%,

    rgba(0,0,0,.8));

}

/*=========================
UI
=========================*/

#ui{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:20;

}

.logo{

    position:absolute;

    top:42px;

    left:46px;

    letter-spacing:10px;

    font-size:18px;

    font-weight:700;

}

/*=========================
HEADLINE
=========================*/

.headline{

    position:absolute;

    left:46px;

    bottom:70px;

    width:520px;

}

.headline h1{

    font-size:78px;

    line-height:.92;

    letter-spacing:-4px;

    margin-bottom:20px;

}

.headline p{

    font-size:20px;

    color:#c9c9c9;

    line-height:1.7;

}

/*=========================
CONTROLS
=========================*/

#controls{

    position:absolute;

    top:90px;

    left:46px;

    width:330px;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:100;

}

.control{

    background:rgba(30,40,30,.45);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:18px;

    box-shadow:

    0 12px 35px rgba(0,0,0,.25);

}

.control label{

    display:block;

    margin-bottom:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:12px;

    font-weight:600;

    color:#f1f1f1;

}

.control input{

    width:100%;

}

/*=========================
SLIDER
=========================*/

input[type=range]{

    width:100%;

    accent-color:white;

    cursor:pointer;

}

/*=========================
BOTTOM FADE
=========================*/

#app::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:220px;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.75)

    );

    pointer-events:none;

}