/* 页面基础 */
        body{
            margin:0;
            font-family:"Inter","Segoe UI",sans-serif;
            min-height:100vh;
            color:#fff;
        
            background:
                linear-gradient(
                    rgba(2,8,23,.72),
                    rgba(2,8,23,.72)
                ),
                url("bg.jpg");
        
            background-size:cover;
            background-position:center;
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
        #app{text-align:center;padding:20px;}



        /* 测速圆环 */
        .ring-box{
        position:relative;
        width:420px;
        height:420px;
        margin:20px auto;
        transition:.4s;
        }
        .ring{width:100%;height:100%;transform:rotate(90deg);}
        .ring-bg{fill:none;stroke:#16345f;stroke-width:18;}
        .ring-progress{
        fill:none;
        stroke:#39b8ff;
        stroke-width:18;
        stroke-linecap:round;
        stroke-dasharray:1005;
        stroke-dashoffset:1005;
        transition:.25s;
        }

		/* 速度显示区域 */
        .speed-center{
        position:absolute;inset:0;
        display:flex;flex-direction:column;
        justify-content:center;align-items:center;
        }
        .speed-value{
        font-size:70px;
        font-weight:800;
        line-height:1;
        /* text-shadow:0 0 25px rgba(0,212,255,.7); */
        }
        .speed-unit{
        font-size:18px;
        letter-spacing:4px;
        font-weight: 600;
        color:#c6d8ff;
        margin-top:10px;
        }

        /* 测试结果 */
        .info-box{
        display:flex;
        justify-content:center;
        gap:24px;
        flex-wrap:wrap;
        margin-top:20px;
        }
        .info-box>div{
        min-width:180px;
        padding:20px;
        border-radius:20px;
        background:rgba(2·5,255,255,.05);
        backdrop-filter:blur(16px);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:0 8px 30px rgba(0,0,0,.3);
        }
        .label{color:#91a3c6;font-size:14px;}
        .value{font-size:28px;font-weight:bold;margin-top:10px;}

		/* 测速进度条 */
		.test-progress-wrap{
		    width: 300px;   /* 手机默认 */
		    height: 6px;
		    margin: 20px auto 25px;
		    background: rgba(255,255,255,.15);
		    border-radius: 999px;
		    overflow: hidden;
		}

		.test-progress-bar{
		    width: 0%;
		    height: 100%;
		    background: #fff;
		    border-radius: 999px;
		    transition: width .15s linear;
		}

		/* 平板 */
		@media (min-width: 768px){
		    .test-progress-wrap{
		        width: 350px;
		    }
		}

		/* 电脑 */
		@media (min-width: 1024px){
		    .test-progress-wrap{
		        width: 380px;
		    }
		}

        /* 开始测速按钮 */
        .start-btn{
        margin-top:10px;
        width:220px;
        height:70px;
        border:none;
        border-radius:999px;
        background:linear-gradient(135deg,#00d4ff,#4f46e5);
        color:#fff;
        font-size:24px;
        font-weight:700;
        cursor:pointer;
        transition:.3s;
        }
        .start-btn:hover{
        transform:translateY(-4px);
        box-shadow:0 10px 30px rgba(0,212,255,.4);
        }

		/* 节点切换按钮 */
		.node-switch{
		    display:flex;
		    justify-content:center;
		    gap:12px;
		    margin:20px 0;
		    flex-wrap:wrap;
		}

		.node-btn{
		    min-width:100px;
		    height:42px;

		    display:flex;
		    align-items:center;
		    justify-content:center;
		    gap:10px;

		    border:1px solid rgba(255,255,255,.12);
		    border-radius:16px;

		    background:linear-gradient(
		        135deg,
		        rgba(255,255,255,.08),
		        rgba(255,255,255,.03)
		    );

		    color:#fff;
		    font-size:15px;
		    font-weight:600;

		    cursor:pointer;

		    backdrop-filter:blur(20px);
		    -webkit-backdrop-filter:blur(20px);

		    box-shadow:
		        0 8px 30px rgba(0,0,0,.25),
		        inset 0 1px 0 rgba(255,255,255,.08);

		    transition:.25s;
		}

		/* 单选圆点 */
		.node-dot{
		    width:14px;
		    height:14px;

		    border-radius:50%;
		    border:2px solid rgba(255,255,255,.8);

		    display:flex;
		    align-items:center;
		    justify-content:center;

		    transition:.25s;
		}

		/* 内部白点 */
		.node-dot::after{
		    content:"";
		    width:8px;
		    height:8px;
		    border-radius:50%;

		    background:#fff;

		    transform:scale(0);
		    transition:.25s;
		}

		/* 选中状态 */
		.node-btn.active .node-dot::after{
		    transform:scale(1);
		}


        /* preloader加载动画 */
        .ctn-preloader {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          cursor: default;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 100%;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          z-index: 9000;
        }
        
        .ctn-preloader .animation-preloader {
          z-index: 1000;
        }
        
        .ctn-preloader .animation-preloader .spinner {
          -webkit-animation: spinner 1s infinite linear;
          animation: spinner 1s infinite linear;
          border-radius: 50%;
          border: 3px solid rgba(0, 0, 0, 0.2);
          border-top-color: #25cdc9;
          height: 150px;
          margin: 0 auto 3.5em auto;
          width: 150px;
        }
        
        .ctn-preloader .animation-preloader .txt-loading {
          font: bold 5em "Poppins", sans-serif;
          text-align: center;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading {
          color: rgba(0, 0, 0, 0.2);
          position: relative;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:before {
          -webkit-animation: letters-loading 4s infinite;
          animation: letters-loading 4s infinite;
          color: #000000;
          content: attr(data-text-preloader);
          left: 0;
          opacity: 0;
          font-family: "Poppins", sans-serif;
          position: absolute;
          top: -3px;
          -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
          -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
          -webkit-animation-delay: 1s;
          animation-delay: 1s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
          -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
        }
        
        .ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
          -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
        }

        .ctn-preloader p {
          font-size: 14px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 8px;
          color: #3b3b3b;
        }
        
        .ctn-preloader .loader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          font-size: 0;
          z-index: 1;
          pointer-events: none;
        }
        
        .ctn-preloader .loader .row {
          height: 100%;
        }
        
        .ctn-preloader .loader .loader-section {
          padding: 0px;
        }
        
        .ctn-preloader .loader .loader-section .bg {
          background-color: #ffffff;
          height: 100%;
          left: 0;
          width: 100%;
          -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
          -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
          transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
        }
        
        .ctn-preloader.loaded .animation-preloader {
          opacity: 0;
          -webkit-transition: 0.3s ease-out;
          -o-transition: 0.3s ease-out;
          transition: 0.3s ease-out;
        }
        
        .ctn-preloader.loaded .loader-section .bg {
          width: 0;
          -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
          -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
          transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
        }
        
        @-webkit-keyframes spinner {
          to {
            -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
          }
        }

        @keyframes spinner {
          to {
            -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
          }
        }
        
        @-webkit-keyframes letters-loading {
          0%,
          75%,
          100% {
            opacity: 0;
            -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
          }
          25%,
          50% {
            opacity: 1;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
          }
        }
        
        @keyframes letters-loading {
          0%,
          75%,
          100% {
            opacity: 0;
            -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
          }
          25%,
          50% {
            opacity: 1;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
          }
        }
        
        @media screen and (max-width: 767px) {
          .ctn-preloader .animation-preloader .spinner {
            height: 8em;
            width: 8em;
          }
          .ctn-preloader .animation-preloader .txt-loading {
            font: bold 3.5em "Poppins", sans-serif;
          }
        }
        
        @media screen and (max-width: 500px) {
          .ctn-preloader .animation-preloader .spinner {
            height: 7em;
            width: 7em;
          }
          .ctn-preloader .animation-preloader .txt-loading {
            font: bold 2em "Poppins", sans-serif;
          }
        }
        /* 加载动画 */


        /* 移动端适配 */
		/* 平板 */
		@media (max-width:1280px){

		    .ring-box{
		        width:380px;
		        height:380px;
		    }

		    .speed-value{
		        font-size:60px;
		    }

		    .info-box>div{
		        min-width:160px;
		    }
		}


		/* 手机横屏/大屏手机 */
		@media (max-width:768px){

		    body{
		        overflow-x:hidden;
		        overflow-y:auto;
		        background-attachment:scroll;
		    }

		    #app{
		        padding:15px;
		    }

		    .ring-box{
		        width:85vw;
		        height:85vw;
		        max-width:340px;
		        max-height:340px;
		    }

		    .speed-value{
		        font-size:52px;
		    }

		    .speed-unit{
		        font-size:16px;
		        letter-spacing:2px;
		    }

		    .info-box{
		        gap:10px;
		        margin-top:30px;
		    }

		    .info-box>div{
		        flex:1;
		        min-width:140px;
		        padding:10px;
		    }

		    .value{
		        font-size:22px;
		    }

		    .start-btn{
		        width:80%;
		        max-width:260px;
		        height:58px;
		        font-size:20px;
		        margin-top:5px;
		    }
		}


		/* 小屏手机 */
		@media (max-width:480px){

		    #app{
		        padding:10px;
		    }

		    .ring-box{
		        width:90vw;
		        height:90vw;
		        max-width:300px;
		        max-height:300px;
		    }

		    .speed-value{
		        font-size:42px;
		    }

		    .speed-unit{
		        font-size:14px;
		    }

		    .info-box{
		        flex-direction:row;
		        justify-content:center;
		        align-items:stretch;
		        gap:10px;
		    }

		    .info-box>div{
		        flex:1;
		        max-width:170px;
		        min-width:120px;
		        width:auto;
		    }

		    .value{
		        font-size:20px;
		    }

		    .start-btn{
		        width:100%;
		        max-width:200px;
		        height:55px;
		        font-size:18px;
		    }
		}