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

    #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 left,#1b4b7a55,transparent 25%),
        radial-gradient(circle at bottom right,#00d9ff22,transparent 30%),
        #07111c;
    font-family:"Microsoft YaHei",sans-serif;
    height:100vh;
    overflow:auto;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    color:#e5fbff;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#07111f;
}

::-webkit-scrollbar-thumb{
    background:#00d9ff;
    border-radius:10px;
    box-shadow:0 0 10px #00d9ff;
}

.panel{
    width:max-content;
    padding:24px;
    border-radius:26px;
    background:rgba(8,18,32,.94);
    border:1px solid rgba(0,255,255,.15);
    box-shadow:
        0 0 40px rgba(0,255,255,.08),
        inset 0 0 25px rgba(0,255,255,.04);
}

.top{

    display:grid;

    grid-template-columns:
        1fr auto auto;

    align-items:center;
}

.title{
    justify-self: end;
    font-size:18px;
    letter-spacing:2px;
    color:#7deeff;
    text-shadow:0 0 12px rgba(0,255,255,.5);
}

.controls{
    justify-self: center;
    display:flex;
    gap:12px;
}

button{
    background:#112337;
    border:1px solid rgba(0,255,255,.25);
    color:#9cefff;
    padding:10px 18px;
    border-radius:12px;
    cursor:pointer;
    transition:.25s;
    font-size:15px;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 0 16px rgba(0,255,255,.25);
}

button.active{
    background:#00dcff;
    color:#02131d;
    font-weight:bold;
    box-shadow:0 0 18px rgba(0,255,255,.55);
}

.readout{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
    margin-top:20px;
}

.valueBox{
    display:flex;

    justify-content:center;

    align-items:baseline;

    gap:12px;
    min-width:320px;
    padding:10px;
    border-radius:18px;
    text-align:center;
    background:#091521;
    border:1px solid rgba(0,255,255,.15);
    box-shadow: inset 0 0 18px rgba(0,255,255,.05);
}

.valueTitle{
    color:#8be8ff;
    margin-bottom:8px;
    font-size:16px;
}

.value{
    font-size:28px;
    font-family:Consolas;
    color:#00f0ff;
    text-shadow:0 0 18px rgba(0,255,255,.75);
}

.stage{
    position:relative;
    min-width:1300px;
    min-height:280px;
    border-radius:24px;
    overflow:hidden;
    background:
        linear-gradient(180deg,#07111d,#0c1727);
    border:1px solid rgba(0,255,255,.1);
}

.grid{
    position:absolute;
    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;
}

.caliper{
    position:absolute;
    left:90px;
    top:-25px;
    width:1250px;
    height:320px;
}

/* 固定卡爪 */

.fixed-jaw{
    position:absolute;
    left:-36px;
    top:50px;
    width:36px;
    height:200px;
    border-radius:12px 0 0 12px;
    background:
        linear-gradient(180deg,#dce9f3,#9cb0bf);
    box-shadow:0 8px 15px rgba(0,0,0,.35);
}

.fixed-jaw::after{
    content:"";
    position:absolute;
    bottom:-12px;
    right:0;
    width:90px;
    height:18px;
    background:#9cb0bf;
    border-radius:0 0 10px 10px;
}

/* 主尺主体 */

.main-body{
    position:absolute;
    left:0;
    top:80px;
    width:1250px;
    height:120px;
    border-radius:12px;
    background:
        linear-gradient(180deg,#d9e6ef,#a6bac8);
    box-shadow:
        0 10px 20px rgba(0,0,0,.45),
        inset 0 2px 3px rgba(255,255,255,.85);
}

.main-tail{
    position:absolute;
    right:-40px;
    top:80px;
    width:40px;
    height:120px;
    background:#a6bac8;
    border-radius:0 12px 12px 0;
}

/* 主尺刻线区域 */

.mainScale{
    position:absolute;
    left:31px;
    top:88px;
    width:1210px;
    height:100px;
    z-index:5;
}

/* 上下基准线 */

.topLine{
    position:absolute;
    top:0;
    width:100%;
    height:1px;
    background:#243646;
}

.bottomLine{
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    background:#243646;
}

/* 上刻线 */

.tickTop{
    position:absolute;
    top:0;
    width:1px;
    background:#223646;
}

/* 下刻线 */

.tickBottom{
    position:absolute;
    bottom:0;
    width:1px;
    background:#223646;
}

.small{
    height:14px;
}

.mid{
    height:28px;
}

.big{
    height:38px;
}

/* 数字 */

.label{
    position:absolute;
    top:42px;
    transform:translateX(-50%);
    font-size:14px;
    font-weight:bold;
    color:#132534;
}

/* 游标尺 */

.slider{
    position:absolute;
    top:185px; /* 进一步下移 */
    height:140px;
    cursor:grab;
    z-index:2;
}

.slider:active{
    cursor:grabbing;
}

.slider-body{
    position:absolute;
    left:0;
    top:0;
    height:105px;
    border-radius:8px;
    background:
        linear-gradient(180deg,#17314b,#0e2033);
    border:1px solid rgba(90,240,255,.45);
    box-shadow:
        0 0 20px rgba(0,255,255,.18),
        inset 0 0 16px rgba(255,255,255,.05);
}

/* 活动卡爪 */

.movable-jaw{
    position:absolute;
    left:0;
    top:-120px;
    width:36px;
    height:17px;
    border-radius:12px;
    background:
        linear-gradient(180deg,#183654,#102235);
    border:1px solid rgba(100,240,255,.3);
}

.movable-jaw::after{
    content:"";
    position:absolute;
    bottom:-10px;
    left:0;
    width:90px;
    height:18px;
    background:#102235;
    border-radius:0 0 10px 10px;
}

/* 游标尺刻线 */

.vernierScale{
    position:absolute;
    left:30px;
    top:0px;
    height:42px;
}

.vernierLine{
    position:absolute;
    top:0;
    width:100%;
    height:2px;
    background:#8ff6ff;
}

.vTick{
    position:absolute;
    top:0;
    width:1px;
    background:#9af6ff;
}

.vLabel{
    position:absolute;
    top:29px;
    transform:translateX(-50%);
    font-size:12px;
    color:#b8fbff;
}

.hint{
    margin-top:20px;
    text-align:center;
    color:#8aeaffaa;
    letter-spacing:1px;
}