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

		:root {
			--bg-light: #f5f0e8;
			--bg-parchment: linear-gradient(180deg, #c9b896 0%, #b8a782 30%, #a69570 100%);
			--plate-bottom: #fdfcf8;
			--plate-top: #ffffff;
			--center-fill: #5a7a5a;
			--divider: #5c3d2e;
			--text-vermilion: #c41e3a;
			--text-gromwell: #7b3f8c;
			--text-ink: #3c2415;
			--line-subtle: rgba(92, 61, 46, 0.25);
			--highlight: rgba(196, 30, 58, 0.12);
			--gap-fill: rgba(245, 240, 232, 0.6);
		}

		.app-header {
			text-align: center;
			padding: 20px 16px 8px;
		}
		.app-header h1 {
			font-size: 22px;
			font-weight: 700;
			color: var(--text-ink);
			letter-spacing: 0.08em;
			margin-bottom: 0;
			text-shadow: none;
		}
		.app-header .subtitle {
			font-size: 13px;
			color: var(--text-vermilion);
			margin-top: 4px;
			letter-spacing: 0.05em;
		}

		body {
			min-height: 100vh;
			background: linear-gradient(180deg, #c9b896 0%, #b8a782 30%, #a69570 100%);
			font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			padding: 0;
			overflow-x: hidden;
		}

		body::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			/* background:
				repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 115, 85, .03)2px, rgba(139, 115, 85, .03)4px),
				repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(139, 115, 85, .05)80px, rgba(139, 115, 85, .05)82px);
			pointer-events: none; */
			z-index: -1;
		}

		.compass-container {
			position: relative;
			width: min(92vw, 780px);
			height: min(92vw, 780px);
			transform-origin: center center;
			transition: transform 0.15s ease-out;
			will-change: transform;
		}
		.compass-container.pinching {
			transition: none;
		}

		/* ===== 底盘（大圆盘） ===== */
		.base-disk {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .92) 0%, transparent 55%),
				linear-gradient(145deg, #fdfcf8 0%, #f5f2ea 45%, #ebe6da 100%);
			box-shadow: 0 10px 40px rgba(60, 45, 25, .42), 0 3px 12px rgba(60, 45, 25, .22),
				inset 0 1px 4px rgba(255, 255, 255, .9), inset 0 -2px 6px rgba(180, 165, 140, .18);
			transition: transform .06s ease-out;
			cursor: grab;
			border: 1px solid rgba(200, 185, 160, .35);
		}

		.base-disk:active {
			cursor: grabbing;
		}

		.base-disk svg {
			width: 100%;
			height: 100%;
		}

		/* ===== 上盘（小圆盘 + 扇形缺口） ===== */
		.top-disk-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
			height: 100%;
			z-index: 10;
		}

		.top-disk {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			cursor: grab;
			transition: transform .06s ease-out;
		}

		.top-disk:active {
			cursor: grabbing;
		}

		.top-disk svg {
			width: 100%;
			height: 100%;
		}

		/* ===== 中心区域 ===== */
		.center-area {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 17.5%;
			height: 17.5%;
			border-radius: 50%;
			background: linear-gradient(150deg, #368550 0%, #276b3f 55%, #1e5832 100%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 25;
			box-shadow: inset 0 4px 14px rgba(0, 0, 0, .45), 0 3px 10px rgba(0, 0, 0, .3);
		}

		.center-arrow {
			width: 0;
			height: 0;
			border-left: 11px solid transparent;
			border-right: 11px solid transparent;
			border-bottom: 20px solid #fff;
			margin-bottom: 3px;
			filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
		}

		.center-text {
			color: #fff;
			font-size: 12px;
			font-weight: bold;
			/* writing-mode: vertical-rl; */
			writing-mode: vertical;
			text-align: center;
			letter-spacing: 3px;
			text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		}

		.center-knob {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 10%;
			height: 10%;
			border-radius: 50%;
			background: linear-gradient(145deg, #fff 0%, eee 100%);
			box-shadow: 0 3px 10px rgba(0, 0, 0, .35), inset 0 1px 3px rgba(255, 255, 255, 1), inset 0 -1px 3px rgba(0, 0, 0, .08);
			z-index: 30;
		}

		/* ===== 指示器 ===== */
		.indicator {
			position: absolute;
			top: -12px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 15px solid transparent;
			border-right: 15px solid transparent;
			border-top: 26px solid #c41e3a;
			z-index: 35;
			filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4));
		}

		/* ===== 信息面板 ===== */
		.info-panel {
			margin-top: 16px;
			padding: 14px 20px;
			background: linear-gradient(145deg, rgba(255, 253, 248, .98) 0%, rgba(250, 245, 235, .98) 100%);
			border: 2px solid #c41e3a;
			border-radius: 10px;
			box-shadow: 0 5px 18px rgba(196, 30, 58, .18);
			max-width: min(92vw, 780px);
			width: 100%;
		}

		.info-title {
			text-align: center;
			font-size: 13px;
			font-weight: bold;
			color: #c41e3a;
			margin-bottom: 8px;
			letter-spacing: 4px;
		}

		.info-content {
			font-size: 12px;
			line-height: 1.75;
			color: #333;
		}
			.info-row {
				padding: 3px 0;
				border-bottom: 1px dotted rgba(92,61,46,.15);
			}
			.info-row:last-child { border-bottom: none; }

		.il {
			margin-bottom: 4px;
		}

		.lb {
			color: #888;
			font-size: 11px;
		}

		.tv {
			color: #8b4513;
		}

		.bv {
			color: #1a5a7a;
		}

		.ar {
			color: #c41e3a;
			margin: 0 3px;
		}

		.sep {
			height: 1px;
			background: linear-gradient(to right, transparent, rgba(196, 30, 58, .18), transparent);
			margin: 6px 0;
		}

		.reset-hl {
			color: #c41e3a;
			font-weight: bold;
			font-size: 14px;
			text-align: center;
			padding: 8px 0;
			letter-spacing: 4px;
		}

		/* ===== 控制按钮 ===== */
		.controls {
			margin-top: 14px;
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			justify-content: center;
		}

		.btn {
			padding: 10px 24px;
			font-size: 14px;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			font-weight: bold;
			transition: all .15s ease;
			box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
			letter-spacing: 1px;
		}

		.btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 5px 14px rgba(0, 0, 0, .25);
		}

		.btn:active {
			transform: translateY(0);
		}

		.btn-top {
			background: linear-gradient(145deg, #d4942e, #b87d1f);
			color: #fff;
		}

		.btn-base {
			background: linear-gradient(145deg, #4a8ab0, #3a7090);
			color: #fff;
		}

		.btn-reset {
			background: linear-gradient(145deg, #777, #555);
			color: #fff;
		}

		.legend {
			margin-top: 12px;
			display: flex;
			gap: 20px;
			justify-content: center;
			font-size: 12px;
			color: #4a3d30;
		}

		.status {
			margin-top: 8px;
			padding: 6px 14px;
			background: rgba(61, 52, 40, .07);
			border-radius: 6px;
			font-size: 11px;
			color: #666;
		}

		.ld {
			display: inline-block;
			width: 12px;
			height: 12px;
			border: 2px solid #ddd;
			border-top: 2px solid #d4942e;
			border-radius: 50%;
			animation: spin .8s linear infinite;
			margin-right: 5px;
			vertical-align: middle;
		}

		@keyframes spin {
			to {
				transform: rotate(360deg)
			}
		}

		@media(max-width:600px) {
			.app-header h1 {
				font-size: 18px;
				letter-spacing: 3px;
			}

			.compass-container {
				width: 96vw;
				height: 96vw;
			}

			.info-panel {
				padding: 10px 12px;
			}

			.info-content {
				font-size: 10.5px;
			}

			.btn {
				padding: 8px 16px;
				font-size: 12px;
			}
		}

		/* ===== AB 面切换 ===== */
		.face-tabs {
			display: flex;
			align-items: center;
			gap: 0;
			height: 40px;
			background: #f5f0e8;
			border-bottom: 1px solid rgba(92,61,46,0.18);
			padding: 0 8px;
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100%;
		}
		.face-back {
			padding: 0 10px;
			font-size: 12px;
			letter-spacing: 1px;
			color: #5c3d2e;
			background: transparent;
			border: none;
			border-right: 1px solid rgba(92,61,46,0.18);
			font-family: 'Microsoft YaHei', 'SimSun', serif;
			cursor: pointer;
			white-space: nowrap;
			height: 100%;
			margin-right: 4px;
		}
		.face-back:active {
			color: #c41e3a;
		}
		.face-tab {
			padding: 0 18px;
			font-size: 13px;
			letter-spacing: 1px;
			color: #5c3d2e;
			background: transparent;
			border: none;
			border-bottom: 2px solid transparent;
			font-family: 'Microsoft YaHei', 'SimSun', serif;
			cursor: pointer;
			white-space: nowrap;
			transition: color 0.2s, border-color 0.2s;
		}
		.face-tab.active {
			color: #c41e3a;
			border-bottom-color: #c41e3a;
			font-weight: 700;
		}
		.face-panel {
			display: none;
		}
		.face-panel.active {
			display: block;
		}
		#face-b {
			position: fixed;
			top: 40px;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(180deg, #c9b896 0%, #b8a782 30%, #a69570 100%);
		}
		.face-iframe {
			width: 100%;
			height: 100%;
			border: none;
		}