*{box-sizing:border-box}body{margin:0;background:#f3f6f9;color:#162333;font-family:Inter,Microsoft YaHei,sans-serif}.app{min-height:100vh}header{height:68px;background:#0c2036;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100% - 1160px)/2))}header b{font-size:22px;margin-right:10px}header span{font-size:9px;letter-spacing:2px;color:#58c5ff}header button{border:1px solid #38516a;background:transparent;color:#fff;border-radius:7px;padding:7px 11px}main{max-width:1160px;margin:auto;padding:30px 22px}.hello h1{margin:0;font-size:27px}.hello p{color:#728093;margin:7px 0 22px}.tabs{border-bottom:1px solid #dce4ec}.tabs button{border:0;background:none;padding:12px 24px;color:#69798c}.tabs button.on{color:#087ec1;border-bottom:2px solid #087ec1}section{display:grid;grid-template-columns:1fr 310px;gap:18px;margin-top:20px}.preview,section aside{background:#fff;border:1px solid #e1e8ef;border-radius:12px;padding:16px}.screen{aspect-ratio:16/9;background:#0b1520;border-radius:9px;color:#91a0ad;display:flex;align-items:center;justify-content:center;flex-direction:column}.play{width:52px;height:52px;border-radius:50%;background:#1e3346;display:grid;place-items:center;color:#5dcaff;padding-left:4px}.notice{margin-top:13px;background:#eef8fe;color:#29729c;border-radius:7px;padding:11px;font-size:13px}.search{background:#f3f6f9;color:#8b97a5;padding:11px;border-radius:7px}.empty{text-align:center;color:#a0aab5;padding:90px 10px}.empty b{display:block;color:#607084;margin:12px}.empty p{font-size:13px}footer{text-align:center;color:#93a0ae;padding:20px}@media (max-width:760px){header{padding:0 18px}main{padding:22px 14px}section{grid-template-columns:1fr}.hello p{font-size:13px}.preview{padding:10px}section aside{min-height:220px}.empty{padding:45px 10px}}