*{box-sizing:border-box}body{margin:0;font-family:Arial;background:#f4f6f9;color:#172033}header{height:68px;background:white;display:flex;align-items:center;gap:25px;padding:0 5%;position:sticky;top:0;z-index:5;border-bottom:1px solid #ddd}.logo{font-size:25px;font-weight:900}.logo span,footer span{color:#e11d48}.logo small{font-size:10px;color:#777}nav{display:flex;gap:5px;flex:1}button{border:0;background:transparent;padding:9px;cursor:pointer;font-weight:bold}button:hover{color:#e11d48}.live{background:#111827;color:white;padding:10px 5%}.live button{float:right;background:#e11d48;color:white;border-radius:7px;padding:7px 12px}main{width:90%;max-width:1200px;margin:30px auto}.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px}.hero>div,.hero aside{background:white;border-radius:15px;padding:20px;box-shadow:0 3px 15px #0001}.heroimg{height:260px;background:linear-gradient(135deg,#071a45,#1646a0);border-radius:10px;color:white;display:flex;align-items:center;justify-content:center;font-size:55px;font-weight:900;margin-bottom:18px}.hero h1{font-size:30px}.hero aside b{color:#e11d48}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:white;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 3px 15px #0001}.pic{height:150px;background:#263449;color:white;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:bold}.info{padding:15px}.info b{font-size:11px;color:#e11d48}.info p{color:#687386;font-size:13px}.search{display:none;padding:12px 5%;background:white}.search.on{display:block}.search input,.setting{width:100%;padding:13px;border:1px solid #ccc;border-radius:8px;font-size:16px}.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:20}.hidden{display:none}.box{background:white;border-radius:14px;padding:25px;width:90%;max-width:750px;position:relative}.x{position:absolute;right:10px;top:5px;font-size:28px}.video{background:#0b0f18;min-height:300px;border-radius:10px;margin:15px 0;display:flex;align-items:center;justify-content:center;color:white;text-align:center}.video video{width:100%;max-height:500px;display:none}.video.ready video{display:block}.video.ready div{display:none}.save{background:#e11d48;color:white;border-radius:8px;padding:11px 18px;margin-top:12px}footer{margin-top:50px;background:#111827;color:white;text-align:center;padding:35px;font-size:24px;font-weight:bold}footer small{font-size:12px;color:#aaa}@media(max-width:750px){header{padding:0 12px;gap:8px}nav{display:none}.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.heroimg{height:210px}.hero h1{font-size:25px}}body.dark{background:#0b1120;color:#fff}body.dark header,body.dark .hero>div,body.dark .hero aside,body.dark .card,body.dark .search,body.dark .box{background:#111827;color:#fff}body.dark .search input,body.dark .setting{background:#1f2937;color:white}
.pic{overflow:hidden}.pic img{width:100%;height:100%;object-fit:cover}.info a{color:#e11d48;text-decoration:none;font-weight:bold;font-size:13px}.mapframe{width:100%;height:380px;border:0;border-radius:10px;margin-top:15px}.tutorial ol{padding-left:22px;line-height:1.8;margin:15px 0}.tutorial p{margin-top:10px}