*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI","PingFang SC",sans-serif;
}

    #menuBtn{

        position: fixed;

        top: 20px;
        left: 20px;

        z-index: 20;

        width: auto;
        padding: 12px 18px;

        border: none;
        border-radius: 14px;

        background: rgba(20,40,80,0.85);

        color: #d8ecff;

        font-size: 15px;

        cursor: pointer;

        backdrop-filter: blur(10px);

        border: 1px solid rgba(120,180,255,0.25);

        box-shadow:
            0 0 18px rgba(0,140,255,0.25);

        transition: 0.25s;
    }

    #menuBtn:hover{

        transform: translateY(-2px);

        background: rgba(40,80,140,0.95);

        box-shadow:
            0 0 24px rgba(80,180,255,0.45);
    }


body{
    background:
        radial-gradient(circle at top,#102030 0%,#04070d 45%,#010203 100%);
    overflow:hidden;
    color:#8ffcff;
    height:100vh;
}

.bg-grid{
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(0,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,.04) 1px, transparent 1px);
    background-size:40px 40px;
    pointer-events:none;
}

.container{
    display:flex;
    height:100vh;
    gap:20px;
    padding:20px;
    flex-direction: row-reverse;
}

.panel{
    width:320px;
    min-width:320px;
    height: 100vh;
    overflow-y: auto;

    background:rgba(10,20,35,.78);
    border:1px solid rgba(0,255,255,.22);

    border-radius:22px;

    padding:22px;

    backdrop-filter:blur(14px);

    box-shadow:
        0 0 30px rgba(0,255,255,.10),
        inset 0 0 40px rgba(0,255,255,.05);
}

.panel h1{
    color:#aefcff;
    margin-bottom:8px;
    font-size:25px;
    text-shadow:0 0 14px #00f0ff;
}

.sub{
    font-size:13px;
    color:#7dcfd3;
    margin-bottom:25px;
}

.group{
    margin-bottom:22px;
}

label{
    display:block;
    margin-bottom:8px;
    color:#91ffff;
    font-size:14px;
}

select,
input[type=range]{
    width:100%;
}

select{
    background:#07131d;
    border:1px solid rgba(0,255,255,.22);
    color:#9effff;
    border-radius:12px;
    padding:10px;
    outline:none;
}

input[type=range]{
    appearance:none;
    height:6px;
    background:#102433;
    border-radius:10px;
}

input[type=range]::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#00f7ff;
    box-shadow:0 0 15px #00ffff;
    cursor:pointer;
}

.value{
    margin-top:6px;
    font-size:12px;
    color:#75cfd1;
}

.display-zone{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.screen-wrapper{

    position:relative;

    aspect-ratio:1 / 1;

    width:min(
        calc(100vh - 40px),
        calc(100vw - 400px)
    );

    max-width:100%;
    max-height:100%;

    border-radius:28px;

    overflow:hidden;

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

    box-shadow:
        0 0 60px rgba(0,255,255,.18),
        inset 0 0 80px rgba(0,255,255,.06);
}

canvas{
    width:100%;
    height:100%;
    display:block;

    background:
        radial-gradient(circle at center,
        rgba(0,35,50,1) 0%,
        rgba(0,10,20,1) 60%,
        rgba(0,0,0,1) 100%);
}

.hud{
    position:absolute;
    top:18px;
    left:20px;
    line-height:1.7;
    font-size:13px;
    color:#73ffff;
    text-shadow:0 0 8px #00ffff;
    opacity:.85;
    pointer-events:none;
}

.corner{
    position:absolute;
    width:120px;
    height:120px;
    border:1px solid rgba(0,255,255,.12);
    pointer-events:none;
}

.corner.tl{
    top:10px;
    left:10px;
    border-right:none;
    border-bottom:none;
}

.corner.br{
    right:10px;
    bottom:10px;
    border-left:none;
    border-top:none;
}