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

			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
				background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 100vh;
				padding: 20px;
				position: relative;
				overflow: hidden;
			}

			.content {
				position: relative;
				z-index: 2;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				max-width: 500px;
				margin: 0 auto;
			}

			.header {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-bottom: 30px;
			}

			.header .logo {
				width: 328px;
				height: 98px;
				max-width: 80%;
				background-image: url('../images/logo.png');
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
			}

			.download-btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				padding: 18px 0;
				width: 80%;
				max-width: 300px;
				background: linear-gradient(135deg, #32c0cd 0%, #2a9fb0 100%);
				color: #fff;
				border-radius: 50px;
				font-size: 18px;
				text-align: center;
				transition: all 0.3s ease;
				text-decoration: none;
				z-index: 2;
				margin-bottom: 20px;
				border: none;
				font-weight: 600;
				cursor: pointer;
			}

			.download-btn .icon {
				display: inline-block;
				width: 26px;
				height: 26px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			.download-btn .ios-icon {
				background-image: url('../images/apple.webp');
			}

			.download-btn .android-icon {
				background-image: url('../images/android.webp');
			}

			.popup-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.6);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1000;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
			}

			.popup-overlay.active {
				opacity: 1;
				visibility: visible;
			}

			.popup-content {
				background-color: white;
				padding: 30px;
				border-radius: 16px;
				width: 80%;
				max-width: 400px;
				position: relative;
				transform: scale(0.7);
				transition: transform 0.3s ease;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			}

			@keyframes popIn {
				0% {
					transform: scale(0.7);
					opacity: 0;
				}

				100% {
					transform: scale(1);
					opacity: 1;
				}
			}

			.popup-overlay.active .popup-content {
				transform: scale(1);
			}

			.popup-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 15px;
				border-bottom: 1px solid #eee;
				margin-bottom: 15px;
				flex-shrink: 0;
			}

			.popup-close {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 24px;
				height: 24px;
				background: url('../images/popup/close.png') no-repeat center;
				background-size: contain;
				border: none;
				background-color: transparent;
				border-radius: 50%;
				transition: background-color 0.2s;
				cursor: pointer;
			}

			.popup-message {
				font-size: 18px;
				text-align: center;
				margin-top: 20px;
			}

			.download-option {
				display: flex;
				justify-content: center;
				width: 100%;
				padding: 10px 0;
			}

			.tip-text-popup {
				color: #32c0cd;
				font-weight: bold;
				margin-bottom: 10px;
				text-align: center;
				padding: 12px;
				background-color: #e8f8f8;
				border-radius: 8px;
				border-left: 4px solid #32c0cd;
			}

			.tip-text-popup p {
				font-size: 14px;
				margin: 0;
			}

			.install-tip-popup {
				color: #666;
				font-weight: bold;
				margin-top: 10px;
				text-align: center;
				font-size: 14px;
			}

			.install-tip-popup a {
				color: #32c0cd;
				font-size: 14px;
				text-decoration: none;
				font-weight: 600;
			}

			.download-btn-popup {
				display: block;
				width: 100%;
				padding: 18px 0;
				background: linear-gradient(135deg, #32c0cd 0%, #2a9fb0 100%);
				color: white;
				border-radius: 50px;
				text-decoration: none;
				font-size: 18px;
				text-align: center;
				margin: 15px auto;
				border: none;
				font-weight: 600;
				transition: all 0.3s ease;
				cursor: pointer;
			}

			.coming-soon {
				text-align: center;
				padding: 20px;
			}

			.coming-soon h3 {
				color: #333;
				margin-bottom: 10px;
				font-size: 20px;
			}

			.coming-soon p {
				color: #666;
				font-size: 16px;
			}

			/* 弹幕样式 */
			.danmu-container {
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				overflow: hidden;
				z-index: -1;
				pointer-events: none;
				transform: translateZ(0);
				backface-visibility: hidden;
				perspective: 1000;
			}

			.danmu-item {
				position: absolute;
				white-space: nowrap;
				text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
				will-change: transform;
				left: 100%;
				animation-name: danmuMove;
				animation-timing-function: linear;
				animation-fill-mode: forwards;
				opacity: 0.85;
				font-weight: 600;
				filter: blur(0.4px);
				transform: translateZ(0);
				backface-visibility: hidden;
				line-height: 1.2;
				contain: layout style paint;
			}

			@keyframes danmuMove {
				from {
					transform: translateX(0);
				}

				to {
					transform: translateX(calc(-100vw - 100%));
				}
			}

			@media (max-width: 768px) {
				.danmu-item {
					text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
					filter: blur(0.3px);
					opacity: 0.9;
				}
			}

			@media (max-width: 480px) {
				.danmu-item {
					font-weight: 500;
					filter: blur(0.2px);
				}
			}

			/* 安卓弹窗样式 */
			.dialog-box {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9999;
				display: none;
			}

			.c-mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.6);
			}

			.tutorial {
				position: absolute;
				bottom: -90vh;
				left: 0;
				width: 100%;
				background-color: #fff;
				border-radius: 16px 16px 0 0;
				transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				padding: 20px;
				height: 90vh;
				display: flex;
				flex-direction: column;
				box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
			}

			.tutorial.show {
				bottom: 0;
			}

			.t-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 15px;
				border-bottom: 1px solid #eee;
				margin-bottom: 15px;
				flex-shrink: 0;
			}

			.t-title h3 {
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}

			.t-title img {
				width: 24px;
				height: 24px;
			}

			.flex-r-s-s {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				margin-bottom: 15px;
				flex-shrink: 0;
			}

			.tab {
				padding: 8px 10px;
				margin-right: 5px;
				margin-bottom: 8px;
				border-radius: 20px;
				background-color: #f0f0f0;
				color: #666;
				font-size: 12px;
				transition: all 0.3s ease;
				cursor: pointer;
			}

			.tab-active {
				background-color: #32c0cd;
				color: #FFFFFF;
				box-shadow: 0 4px 10px rgba(50, 192, 205, 0.3);
			}

			.t-main {
				flex: 1;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				padding-right: 5px;
			}

			.t-main::-webkit-scrollbar {
				width: 6px;
			}

			.t-main::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 10px;
			}

			.t-main::-webkit-scrollbar-thumb {
				background: #ccc;
				border-radius: 10px;
			}

			.t-main::-webkit-scrollbar-thumb:hover {
				background: #aaa;
			}

			.guide-container {
				display: none;
				margin-bottom: 20px;
			}

			.guide-container h4 {
				font-size: 16px;
				margin: 15px 0 10px;
				font-weight: bold;
				color: #333;
				padding: 8px 0;
				border-bottom: 1px solid #eee;
			}

			.guide-container p {
				font-size: 14px;
				margin-bottom: 10px;
				line-height: 1.6;
				color: #555;
			}

			.warning-text {
				color: #e74c3c;
				font-weight: bold;
				margin-bottom: 15px;
				text-align: center;
				padding: 12px;
				background-color: #fdeded;
				border-radius: 8px;
				border-left: 4px solid #e74c3c;
			}

			.warning-text p {
				font-size: 15px;
				margin: 0;
			}

			.highlight {
				margin: 0 5px;
				color: #e74c3c;
				font-weight: bold;
			}

			.grid-col-2 {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 12px;
				margin: 10px 0;
			}

			.step-img-box img {
				width: 100%;
				border-radius: 8px;
				border: 1px solid #eee;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;
			}

			.overflow-h {
				overflow: hidden;
			}

			.banana {
				padding: 14px 20px;
				background: linear-gradient(135deg, #32c0cd 0%, #2a9fb0 100%);
				color: #fff;
				text-align: center;
				border-radius: 50px;
				font-weight: bold;
				margin: 20px auto;
				width: 80%;
				max-width: 300px;
				box-shadow: 0 4px 15px rgba(50, 192, 205, 0.3);
				transition: all 0.3s ease;
				border: none;
				font-size: 16px;
			}

			.banana:hover {
				transform: translateY(-3px);
				box-shadow: 0 6px 20px rgba(50, 192, 205, 0.4);
			}

			@media (max-width: 480px) {
				.header .logo {
					height: 120px;
				}

				.download-btn {
					padding: 16px 0;
					font-size: 16px;
				}

				.download-btn .icon {
					width: 22px;
					height: 22px;
				}

				.popup-title {
					font-size: 16px;
				}

				.popup-content {
					width: 90%;
					padding: 20px;
				}

				.popup-message {
					font-size: 16px;
				}

				.download-btn-popup {
					padding: 16px 0;
					font-size: 16px;
				}

				.tutorial {
					padding: 15px;
				}

				.grid-col-2 {
					gap: 8px;
				}
			}

			body.unsupported-device {
				display: none;
			}