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

body{
    background:#030712;
    overflow:hidden;
    color:#dff7ff;
}

    #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);
    }


/* 左侧控制台 */

.panel{
    position:fixed;
    right:0;
    top:0;

    width:340px;
    height:100vh;

    overflow-y:auto;

    padding:24px;

    background:
        linear-gradient(
            180deg,
            rgba(8,12,28,0.97),
            rgba(3,6,18,0.98)
        );

    border-right:1px solid rgba(120,180,255,0.18);

    box-shadow:
        0 0 40px rgba(0,180,255,0.12);

    z-index:20;
}

.panel::before{
    content:"";
    position:absolute;
    right:0;
    top:0;

    width:1px;
    height:100%;

    background:linear-gradient(
        to bottom,
        transparent,
        rgba(0,220,255,0.9),
        transparent
    );

    box-shadow:0 0 20px rgba(0,220,255,0.8);
}

.title{
    font-size:24px;
    font-weight:700;
    color:#7fe7ff;
    margin-bottom:20px;

    text-shadow:0 0 15px rgba(0,220,255,0.5);
}

.badge{
    display:inline-block;
    padding:5px 12px;
    border-radius:999px;

    background:rgba(0,180,255,0.1);
    border:1px solid rgba(0,180,255,0.25);

    margin-bottom:16px;
    font-size:12px;
}

.group{
    margin-bottom:18px;
}

label{
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    font-size:13px;
    color:#a9e7ff;
}

input[type=range]{
    width:100%;
    accent-color:#55d8ff;
}

select{
    width:100%;
    padding:10px;
    border-radius:12px;

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

    background:#081222;
    color:#dff7ff;
}

.hint{
    margin-top:18px;
    color:#7d9bb8;
    line-height:1.6;
    font-size:12px;
}

/* 演示区域 */

canvas{
    position:absolute;
    right:340px;
    top:0;
}