*{
    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{
    min-width:1200px;
    min-height:700px;
    overflow:auto;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;

    font-family:
        "Segoe UI",
        "Microsoft YaHei",
        sans-serif;

    background:
        radial-gradient(circle at top,
        #17355a 0%,
        #07111f 45%,
        #02050a 100%);

    color:#e8fbff;
}

::-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;
}

.container{
    width:1300px;
    max-width:96vw;
}

.title{
    text-align:center;
    font-size:22px;
    font-weight:800;
    letter-spacing:5px;
    margin-bottom:10px;
    margin-top:10px;

    color:#89ecff;

    text-shadow:
        0 0 12px #00d9ff,
        0 0 28px #00d9ff;
}

.panel{
    position:relative;

    padding:10px 35px 55px;

    border-radius:28px;

    background:
        rgba(5,15,28,.84);

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

    overflow:hidden;

    box-shadow:
        inset 0 0 55px rgba(0,255,255,.05),
        0 0 35px rgba(0,255,255,.08);
}

.panel::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,255,255,.04),
            transparent
        );

    animation:scan 5s linear infinite;
}

/*
@keyframes scan{
    from{transform:translateX(-100%);}
    to{transform:translateX(100%);}
}
*/

/* 数字显示 */

.display{
    width:500px;

    margin:0 auto 30px;

    padding:18px;

    border-radius:18px;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            #071c2d,
            #02111d
        );

    border:1px solid #1fe8ff;

    box-shadow:
        0 0 18px rgba(0,255,255,.25),
        inset 0 0 18px rgba(0,255,255,.08);
}

.valueTitle{
    font-size:18px;
    color:#92ebff;
    letter-spacing:2px;
    margin-bottom:10px;
}

.value{
    font-size:28px;
    font-weight:500;

    color:#8dffff;

    text-shadow:
        0 0 8px #00ffff,
        0 0 24px #00d9ff;
}

/* 场景 */

.scene{
    position:relative;
    height:370px;
}

/* 尺架 */

.frame{
    position:absolute;

    left:50px;
    top:30px;

    width:180px;
    height:180px;

    border:28px solid #b9c7d1;
/*    border-right:none;*/

    border-radius:0 0 120px 120px;

    background:
        linear-gradient(
            145deg,
            #6e7d88,
            #dce5ea
        );

    box-shadow:
        inset -8px -8px 18px rgba(0,0,0,.35),
        inset 4px 4px 10px rgba(255,255,255,.2);
}

/* 测砧 */

.anvil{
    position:absolute;

    left:165px;
    top:60px;

    width:48px;
    height:18px;

    border-radius:4px;

    background:
        linear-gradient(
            180deg,
            #f1f6fa,
            #7d8994
        );
}

/* 测杆 */

.spindle{
    position:absolute;

    left:212px;
    top:60px;

    width:0;
    height:18px;

    border-radius:4px;

    background:
        linear-gradient(
            180deg,
            #dce5ec,
            #7f8d98
        );

    box-shadow:
        0 0 8px rgba(255,255,255,.3);
}

/* 主尺 */

.sleeve{

    position:absolute;

    left:210px;
    top:26px;

    width:520px;
    height:86px;

    border-radius:2px;

    overflow:hidden;

    cursor:pointer;

    background:
        linear-gradient(
            180deg,
            #f5f9fc,
            #c9d6df 45%,
            #98a4ad
        );

    box-shadow:
        inset 0 -5px 12px rgba(0,0,0,.25),
        inset 0 4px 8px rgba(255,255,255,.45);
}

.datum{
    position:absolute;

    left:0;
    top:42px;

    width:100%;
    height:2px;

    background:#111;
}

.main-scale{
    position:absolute;
    inset:0;
}

.tick{
    position:absolute;
    width:2px;
    background:#111;
}

.tick.long{
    bottom:26px;
    height:18px;
}

.tick.short{
    bottom:42px;
    height:14px;
}

.label{
    position:absolute;

    top:58px;

    transform:translateX(-50%);

    font-size:14px;
    font-weight:700;

    color:#111;
}

/* 副尺 */

.thimble{

    position:absolute;

    top:16px;

    width:118px;
    height:106px;

    border-radius:16px;

    overflow:hidden;

    cursor:ew-resize;

    background:
        linear-gradient(
            180deg,
            #dce6ed,
            #9aa9b6 45%,
            #6c7b88
        );

    box-shadow:
        inset -8px -8px 14px rgba(0,0,0,.3),
        inset 4px 4px 10px rgba(255,255,255,.35),
        0 0 18px rgba(0,255,255,.08);
}

/* 圆柱刻度带 */

.cylinder{

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:100%;
}

/* 刻度项 */

.mark{

    position:absolute;

    width:100%;
    height:16px;
}

/* 刻度线 */

.line{
    position:absolute;

    left:0px;
    top:0px;

    height:2px;

    background:#111;
}

.line.long{
    width:34px;
}

.line.short{
    width:18px;
}

/* 数字 */

.num{
    position:absolute;

    left:56px;
    top:-1px;

    font-size:13px;
    font-weight:700;

    color:#08121b;
}

/* 基准线

.ref-line{

    position:absolute;

    left:0;
    top:52px;

    width:100%;
    height:2px;

    background:#00eaff;

    box-shadow:
        0 0 10px #00eaff;
}*/

.hint{

    margin-top:-224px;

    text-align:center;

    color:#7fcfe0;

    font-size:16px;

    letter-spacing:1px;
}