:root[data-theme="light"] {
			color-scheme: light;
			--bg: #f6f7fb;
			--surface: rgba(255, 255, 255, 0.9);
			--surfaceSolid: #ffffff;
			--ink: #242436;
			--muted: #575a6d;
			--line: #d5d8e5;
			--panel: rgba(255, 255, 255, 0.88);
			--accent: #5d4ea8;
			--accentSoft: rgba(93, 78, 168, 0.12);
			--cyan: #24f0ea;
			--cyanSoft: rgba(36, 240, 234, 0.12);
			--good: #178b82;
			--red: #e85d6a;
			--primaryBg: #5d4ea8;
			--primaryHoverBg: #514598;
			--primaryText: #ffffff;
			--primaryBorder: #5d4ea8;
			--controlBg: #ffffff;
			--controlText: #242436;
			--controlBorder: #cfd3e3;
			--controlHoverBg: rgba(93, 78, 168, 0.10);
			--rotationBg: rgba(93, 78, 168, 0.12);
			--rotationText: #45388e;
			--chipBg: #5d4ea8;
			--chipText: #ffffff;
			--logBg: rgba(93, 78, 168, 0.09);
			--dropBg: rgba(93, 78, 168, 0.10);
			--dropText: #4d3f96;
			--pageBg: radial-gradient(circle at 16% 8%, rgba(93, 78, 168, 0.16), transparent 34%), radial-gradient(circle at 86% 12%, rgba(36, 240, 234, 0.10), transparent 30%), linear-gradient(135deg, #fafaff, #f4f6fb 58%, #ffffff);
			--stageBg: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.98), transparent 60%), linear-gradient(145deg, rgba(36, 240, 234, 0.07), transparent 46%), linear-gradient(320deg, rgba(93, 78, 168, 0.11), transparent 52%), #ffffff;
			--shadow: 0 18px 50px rgba(36, 36, 54, 0.12);
		}

		:root {
			color-scheme: dark;
			--bg: #0f0f16;
			--surface: rgba(27, 27, 38, 0.94);
			--surfaceSolid: #1c1c28;
			--ink: #f4f4fb;
			--muted: #c0c2d0;
			--line: #414157;
			--panel: rgba(27, 27, 38, 0.92);
			--accent: #5d4ea8;
			--accentSoft: rgba(93, 78, 168, 0.26);
			--cyan: #24f0ea;
			--cyanSoft: rgba(36, 240, 234, 0.08);
			--good: #24f0ea;
			--red: #e85d6a;
			--primaryBg: #6b5dc2;
			--primaryHoverBg: #786bd0;
			--primaryText: #ffffff;
			--primaryBorder: #8174d6;
			--controlBg: #252536;
			--controlText: #f6f7ff;
			--controlBorder: #595c72;
			--controlHoverBg: #303046;
			--rotationBg: #32304a;
			--rotationText: #ffffff;
			--chipBg: #eceeff;
			--chipText: #161621;
			--logBg: rgba(255, 255, 255, 0.07);
			--dropBg: #242437;
			--dropText: #f6f7ff;
			--pageBg: radial-gradient(circle at 18% 10%, rgba(93, 78, 168, 0.34), transparent 34%), radial-gradient(circle at 88% 0%, rgba(93, 78, 168, 0.16), transparent 32%), linear-gradient(180deg, #161620, #0d0d14);
			--stageBg: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.07), transparent 58%), linear-gradient(150deg, rgba(93, 78, 168, 0.16), transparent 50%), linear-gradient(180deg, #1c1c29, #13131d);
			--shadow: 0 18px 58px rgba(0, 0, 0, 0.32);
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			height: 100%;
			margin: 0;
		}

		body {
			background: var(--pageBg);
			color: var(--ink);
			font: 15px/1.45 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
			overflow: hidden;
			transition: background 0.22s ease, color 0.22s ease;
		}

		button,
		input {
			font: inherit;
		}

		.appShell {
			position: relative;
			display: grid;
			grid-template-columns: minmax(0, 1fr) 340px;
			grid-template-rows: 1fr;
			gap: 18px;
			height: calc(100dvh - var(--site-nav-height));
			padding: 12px 18px 18px;
			min-height: 0;
		}

		.cubeArea {
			position: relative;
			min-width: 0;
			min-height: 420px;
			height: 100%;
		}

		#cubeStage {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5%;
			cursor: grab;
			touch-action: none;
			-webkit-user-select: none;
			user-select: none;
			width: 100%;
			height: 100%;
		}

		#cubeStage.isDragging {
			cursor: grabbing;
		}

		#cubeStage > div {
			width: 100%;
			height: 100%;
		}

		#cubeStage canvas {
			display: block;
			margin: auto;
		}

	.practiceSolvedCheck {
		position: absolute;
		left: 5%;
		bottom: 5%;
		width: clamp(48px, 12vw, 120px);
		height: clamp(48px, 12vw, 120px);
		border-radius: 50%;
		background: #5d4ea8;
		box-shadow: 0 0 18px rgba(36, 240, 234, 0.5), 0 6px 18px rgba(0, 0, 0, 0.18);
		pointer-events: none;
		opacity: 0;
		transform: scale(0.85);
		transition: opacity 0.22s ease, transform 0.22s ease;
		z-index: 5;
		/* 贯穿透明对勾：实心圆挖空对勾，透出后面的魔�? */
		-webkit-mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 52 L44 67 L74 33' fill='none' stroke='%23fff' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		-webkit-mask-composite: source-out;
		mask:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat,
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 52 L44 67 L74 33' fill='none' stroke='%23fff' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
		mask-composite: subtract;
	}

	:root[data-theme="dark"] .practiceSolvedCheck {
		background: #24f0ea;
	}

	.practiceSolvedCheck.isVisible {
		opacity: 1;
		transform: scale(1);
	}

		.touchcube {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			border-collapse: collapse;
			color: transparent;
			opacity: 0;
			pointer-events: none;
		}

		.topBar {
			position: absolute;
			top: 18px;
			left: 18px;
			right: 18px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			z-index: 2;
			pointer-events: none;
		}

		.brand {
			position: relative;
			display: block;
			width: 188px;
			min-width: 188px;
			padding: 0;
			border: 1px solid rgba(93, 78, 168, 0.45);
			border-radius: 8px;
			background: var(--panel);
			color: var(--ink);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			pointer-events: auto;
			cursor: pointer;
			box-shadow: 0 10px 30px rgba(93, 78, 168, 0.12);
			transition: transform 0.16s ease, border-color 0.16s ease, background 0.22s ease, box-shadow 0.16s ease;
		}

		.brand:hover,
		.brand.isOpen {
			border-color: rgba(93, 78, 168, 0.45);
			background: var(--surfaceSolid);
		}

		.brand.isOpen {
			border-bottom-color: transparent;
			border-radius: 8px 8px 0 0;
		}

		.logo,
		.modeIcon {
			width: 30px;
			height: 30px;
			position: relative;
			display: block;
			padding: 0;
			border-radius: 6px;
			background: linear-gradient(135deg, var(--accent), var(--cyan));
			flex: 0 0 auto;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
			overflow: hidden;
		}

		.trainIcon,
		.formulaModeIcon,
		.libraryIcon,
		.memoryIcon {
			background: var(--controlBg);
			box-shadow: inset 0 0 0 1px var(--controlBorder);
		}

		.logo::before,
		.logo::after {
			content: "";
			position: absolute;
		}

		.logo::before,
		.logo::after {
			background: rgba(255, 255, 255, 0.64);
		}

		.logo::before {
			left: 9px;
			top: 3px;
			width: 2px;
			height: 24px;
			box-shadow: 9px 0 0 rgba(255, 255, 255, 0.64);
		}

		.logo::after {
			left: 3px;
			top: 9px;
			width: 24px;
			height: 2px;
			box-shadow: 0 9px 0 rgba(255, 255, 255, 0.64);
		}

		.logo span,
		.modeIcon span {
			display: none;
		}


		.trainIcon {
			background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='32' r='20' stroke='%235d4ea8' stroke-width='4'/%3E%3Ccircle cx='32' cy='32' r='10' stroke='%235d4ea8' stroke-width='4'/%3E%3Ccircle cx='32' cy='32' r='3' fill='%235d4ea8'/%3E%3Cpath d='M14 50L32 32' stroke='%2324f0ea' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 32L29 42' stroke='%2324f0ea' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M32 32L22 35' stroke='%2324f0ea' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.formulaModeIcon {
			background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 37L36 18L43 11Q48 6 53 11Q58 16 53 21L46 28L27 47L17 37Z' fill='%235d4ea8'/%3E%3Cpath d='M13 51L17 37L27 47L13 51Z' fill='%2324f0ea'/%3E%3Cpath d='M15 39L25 49' stroke='%235d4ea8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.libraryIcon {
			background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='cardMask'%3E%3Crect width='64' height='64' fill='white'/%3E%3Crect x='12' y='22' width='32' height='32' rx='6' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect x='20' y='14' width='32' height='32' rx='6' stroke='%2324f0ea' stroke-width='4' mask='url(%23cardMask)'/%3E%3Crect x='12' y='22' width='32' height='32' rx='6' stroke='%235d4ea8' stroke-width='4'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.memoryIcon {
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M572 835.3c17.7 0 32 14.3 32 32s-14.3 32-32 32H452c-17.7 0-32-14.3-32-32s14.3-32 32-32h120zM510 124c164.6 0 298 133.4 298 298 0 111.6-61.4 208.9-152.1 259.9v29.3c0 39.8-32.2 72-72 72H436c-39.8 0-72-32.2-72-72v-29.4c-90.7-51.1-152-148.3-152-259.9C212 257.4 345.4 124 510 124zm0 64c-129.3 0-234 104.8-234 234 0 92.6 53.8 172.7 132 210.7 6.3 3 11.8 7.9 16 14.3 4.2 6.4 6.4 13.9 6.4 21.7v47.3c0 4.4 3.6 8 8 8h148c4.4 0 8-3.6 8-8v-48c0-10.3 4.8-19.4 12.3-25.2a32 32 0 0 1 7.8-5.3c78.2-38 132-118.1 132-210.7 0-129.2-104.8-234-234-234z' fill='%235d4ea8'/%3E%3Cpath d='M469 321.6c13.2-40 69.4-40.3 83.3-0.9l0.3 0.9 18.5 56.2 56.2 18.5c40.3 13.3 40.3 70.3 0 83.6l-56.2 18.5-18.5 56.2c-13.3 40.3-70.3 40.3-83.6 0l-18.5-56.2-56.2-18.5c-40.3-13.3-40.3-70.3 0-83.6l56.2-18.5 18.5-56.2zm39.1 85.8a44 44 0 0 1-28 28l-8.1 2.7 8.1 2.7a44 44 0 0 1 28 28l2.7 8.1 2.7-8.1 0.2-0.6a44 44 0 0 1 27.8-27.4l8.1-2.7-8.1-2.7a44 44 0 0 1-28-28l-2.7-8.1-2.7 8.1z' fill='%2324f0ea'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.modeOption {
			width: 100%;
			min-height: 50px;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 12px;
			border: 0;
			border-radius: 7px;
			background: transparent;
			color: var(--ink);
			text-align: left;
			text-decoration: none;
			cursor: pointer;
			font: inherit;
			font-weight: 700;
			transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
		}

		.modeOption:hover,
		.modeOption:focus-visible {
			background: var(--controlHoverBg);
			color: var(--controlText);
			box-shadow: inset 2px 0 0 var(--cyan);
		}

		.modeCurrent {
			border-radius: 7px;
		}

		.brand.isOpen .modeCurrent {
			border-radius: 7px 7px 0 0;
		}

		.modeText {
			white-space: nowrap;
			font-size: 15px;
			letter-spacing: 0;
		}

		.modeChevron {
			width: 8px;
			height: 8px;
			margin-left: auto;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: rotate(45deg) translateY(-2px);
			transition: transform 0.14s ease;
		}

		.brand.isOpen .modeChevron {
			transform: rotate(-135deg) translateY(-1px);
		}

		.modeMenu {
			position: absolute;
			top: calc(100% - 1px);
			left: -1px;
			right: -1px;
			width: auto;
			display: grid;
			gap: 0;
			padding: 0;
			border: 1px solid rgba(93, 78, 168, 0.45);
			border-top: 0;
			border-radius: 0 0 8px 8px;
			background: var(--surfaceSolid);
			box-shadow: 0 18px 34px rgba(36, 36, 54, 0.16);
			opacity: 0;
			visibility: hidden;
			transform: translateY(-5px);
			pointer-events: none;
			transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
		}

		.brand.isOpen .modeMenu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			pointer-events: auto;
		}

		.modeMenu .modeOption {
			min-height: 50px;
			border-top: 1px solid rgba(93, 78, 168, 0.45);
			border-radius: 0;
		}

		.modeMenu .modeOption:last-child {
			border-radius: 0 0 7px 7px;
		}

		.practiceIcon,
		.formulaIcon {
			width: 30px;
			height: 30px;
			position: relative;
			flex: 0 0 auto;
			border-radius: 6px;
			background: var(--controlBg);
			box-shadow: inset 0 0 0 1px var(--controlBorder);
		}

		.practiceIcon::before,
		.practiceIcon::after,
		.formulaIcon::before,
		.formulaIcon::after {
			content: "";
			position: absolute;
		}

		.practiceIcon::before {
			left: 7px;
			top: 8px;
			width: 16px;
			height: 10px;
			border: 2px solid var(--cyan);
			border-radius: 999px;
		}

		.practiceIcon::after {
			left: 13px;
			top: 14px;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: var(--accent);
			box-shadow: -7px 0 0 var(--accent), 7px 0 0 var(--accent);
		}

		.formulaIcon::before {
			left: 7px;
			top: 8px;
			width: 16px;
			height: 14px;
			border-left: 2px solid var(--accent);
			border-right: 2px solid var(--accent);
		}

		.formulaIcon::after {
			left: 8px;
			top: 9px;
			width: 14px;
			height: 12px;
			background:
				linear-gradient(var(--cyan), var(--cyan)) 0 0 / 14px 2px no-repeat,
				linear-gradient(var(--cyan), var(--cyan)) 0 5px / 10px 2px no-repeat,
				linear-gradient(var(--cyan), var(--cyan)) 0 10px / 14px 2px no-repeat;
		}

		.topActions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
			min-width: 0;
			pointer-events: auto;
		}

		.statusPill {
			max-width: 42vw;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding: 9px 12px;
			border: 1px solid var(--line);
			border-radius: 999px;
			background: var(--panel);
			color: var(--muted);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
		}

		.statusPill[data-state="connected"] {
			color: var(--good);
			border-color: rgba(36, 240, 234, 0.46);
			box-shadow: inset 0 0 0 1px rgba(36, 240, 234, 0.10);
		}

		.statusPill[data-state="error"] {
			color: var(--red);
			border-color: rgba(232, 93, 106, 0.28);
		}

		:root[data-theme="dark"] .modeMenu a:hover {
			background: var(--controlHoverBg);
			color: var(--controlText);
		}

		:root[data-theme="dark"] .viewHead h1,
		:root[data-theme="dark"] .historyTitle span:first-child,
		:root[data-theme="dark"] .metric span {
			color: var(--cyan);
		}

		button:focus-visible,
		.brand:focus-visible,
		.modeMenu a:focus-visible,
		.stateTextarea:focus-visible {
			outline: 2px solid var(--cyan);
			outline-offset: 2px;
		}

		.modeView {
			display: flex;
			flex-direction: column;
			min-height: 0;
			max-height: calc(100dvh - 36px);
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surface);
			box-shadow: var(--shadow);
			overflow-x: hidden;
			overflow-y: scroll;
			transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
		}

		.viewHead,
		.viewSec {
			flex: 0 0 auto;
			padding: 16px;
			border-bottom: 1px solid var(--line);
		}

		.viewHead {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.viewHeadContent {
			min-width: 0;
			flex: 1;
		}

		.viewHead h1 {
			margin: 0;
			font-size: 20px;
			line-height: 1.15;
			letter-spacing: 0;
		}

		.viewHead p {
			margin: 8px 0 0;
			color: var(--muted);
			font-size: 13px;
		}

		.viewHead .seamlessToggle {
			min-height: 32px;
			padding: 0 12px;
			gap: 0;
			border: 1px solid var(--line);
			border-radius: 999px;
			background: var(--panel);
			color: var(--ink);
			font-weight: 700;
			font-size: 13px;
			cursor: pointer;
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			transition: border-color 0.16s ease, color 0.16s ease, background 0.22s ease, transform 0.16s ease;
		}

		.viewHead .seamlessToggle:hover {
			border-color: rgba(36, 240, 234, 0.58);
			color: var(--accent);
			transform: translateY(-1px);
			background: var(--panel);
			box-shadow: none;
		}

		.viewHead .seamlessToggle.isActive {
			border-color: rgba(36, 240, 234, 0.58);
			background: var(--panel);
			color: var(--cyan);
		}

		.viewHead .seamlessToggle.isActive:hover {
			color: var(--controlText);
		}

		.viewHead .seamlessToggle .toggleSwitch,
		.viewHead .seamlessToggle .toggleLabel {
			display: none;
		}

		.viewHead .seamlessToggle::after {
			content: "无缝";
		}

		:root[data-theme="dark"] .viewHead .seamlessToggle:hover {
			color: var(--controlText);
		}

		.macHelp {
			display: none;
			background: #20211e;
			color: #fff;
		}

		.macHelp.isVisible {
			display: block;
		}

		.macHelp strong {
			display: block;
			margin-bottom: 8px;
			font-size: 14px;
		}

		.macHelp p {
			margin: 0;
			color: #f2f3ea;
			font-size: 13px;
		}

		.macHelp code {
			color: #ffffff;
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 12px;
		}

		.macHelpReason {
			margin-top: 9px;
			color: #e6b84a;
			font-size: 13px;
		}

		.controls {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
		}

		.practiceView {
			gap: 0;
		}

		.practiceControls {
			grid-template-columns: minmax(0, 1fr) 144px;
			align-items: stretch;
		}

		.practiceModeSelect {
			position: relative;
			width: 144px;
			min-height: 50px;
			padding: 0;
			border: 0;
			border-radius: 8px;
			background: transparent;
			cursor: pointer;
			transition: transform 0.16s ease, border-color 0.16s ease, background 0.22s ease, box-shadow 0.16s ease;
		}

		.practiceModeSelect:hover,
		.practiceModeSelect.isOpen {
			border-color: rgba(93, 78, 168, 0.45);
			background: var(--surfaceSolid);
		}

		.practiceModeSelect.isOpen {
			border-bottom-color: transparent;
			border-radius: 8px 8px 0 0;
		}

		.practiceModeCurrent {
			width: 100%;
			min-height: 50px;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 12px;
			border: 1px solid rgba(93, 78, 168, 0.45);
			border-radius: 8px;
			background: var(--panel);
			color: var(--ink);
			font: inherit;
			font-weight: 700;
			text-align: left;
			cursor: pointer;
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			box-shadow: 0 10px 30px rgba(93, 78, 168, 0.12);
			transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
		}

		.practiceModeCurrent:hover,
		.practiceModeCurrent:focus-visible {
			background: var(--controlHoverBg);
			color: var(--controlText);
			box-shadow: inset 2px 0 0 var(--cyan);
			outline: none;
		}

		.practiceModeSelect.isOpen .practiceModeCurrent {
			border-bottom-color: transparent;
			border-radius: 8px 8px 0 0;
			background: var(--surfaceSolid);
		}

		.practiceModeCurrentText {
			white-space: nowrap;
			font-size: 15px;
			letter-spacing: 0;
		}

		.practiceModeChevron {
			width: 8px;
			height: 8px;
			margin-left: auto;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: rotate(45deg) translateY(-2px);
			transition: transform 0.14s ease;
		}

		.practiceModeSelect.isOpen .practiceModeChevron {
			transform: rotate(-135deg) translateY(-1px);
		}

		.practiceModeMenu {
			position: absolute;
			top: calc(100% - 1px);
			left: 0;
			right: 0;
			display: grid;
			gap: 0;
			padding: 0;
			border: 1px solid rgba(93, 78, 168, 0.45);
			border-top: 0;
			border-radius: 0 0 8px 8px;
			background: var(--surfaceSolid);
			box-shadow: 0 18px 34px rgba(36, 36, 54, 0.16);
			opacity: 0;
			visibility: hidden;
			transform: translateY(-5px);
			pointer-events: none;
			transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
			z-index: 5;
		}

		.practiceModeSelect.isOpen .practiceModeMenu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			pointer-events: auto;
		}

		.practiceModeOption {
			width: 100%;
			min-height: 50px;
			display: flex;
			align-items: center;
			padding: 10px 12px;
			border: 0;
			border-top: 1px solid rgba(93, 78, 168, 0.45);
			border-radius: 0;
			background: transparent;
			color: var(--ink);
			font: inherit;
			font-weight: 700;
			text-align: left;
			cursor: pointer;
			transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
		}

		.practiceModeOption:last-child {
			border-radius: 0 0 7px 7px;
		}

		.practiceModeOption:hover,
		.practiceModeOption:focus-visible {
			background: var(--controlHoverBg);
			color: var(--controlText);
			box-shadow: inset 2px 0 0 var(--cyan);
			outline: none;
		}

		.importButtons {
			grid-template-columns: 1fr 1fr;
		}

		.button {
			min-height: 42px;
			border: 1px solid var(--primaryBorder);
			border-radius: 8px;
			background: var(--primaryBg);
			color: var(--primaryText);
			cursor: pointer;
			transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
			font-weight: 700;
		}

		.button:disabled {
			cursor: progress;
			opacity: 0.68;
			transform: none;
		}

		.button.secondary {
			background: var(--controlBg);
			color: var(--controlText);
			border-color: var(--controlBorder);
		}

		.button.small {
			min-height: 34px;
			padding: 0 10px;
			font-size: 13px;
		}

		.seamlessToggle {
			display: flex;
			align-items: center;
			gap: 10px;
			min-height: 42px;
			padding: 0 4px;
			border: 1px solid var(--controlBorder);
			border-radius: 8px;
			background: var(--controlBg);
			color: var(--controlText);
			cursor: pointer;
			font-weight: 700;
			transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
			-webkit-user-select: none;
			user-select: none;
		}

		.seamlessToggle:hover {
			border-color: var(--cyan);
			background: var(--controlHoverBg);
			transform: translateY(-1px);
			box-shadow: 0 0 0 3px rgba(36, 240, 234, 0.10);
		}

		.seamlessToggle.isActive {
			border-color: var(--primaryBorder);
			background: var(--primaryBg);
			color: var(--primaryText);
		}

		.seamlessToggle.isActive:hover {
			background: var(--primaryHoverBg);
			border-color: var(--cyan);
		}

		.seamlessToggle .toggleLabel {
			flex: 1;
			text-align: left;
			white-space: nowrap;
		}

		.seamlessToggle .toggleSwitch {
			width: 42px;
			height: 24px;
			border-radius: 12px;
			background: var(--controlBorder);
			position: relative;
			transition: background 0.18s ease;
			flex-shrink: 0;
		}

		.seamlessToggle .toggleSwitch::after {
			content: "";
			position: absolute;
			top: 3px;
			left: 3px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: #ffffff;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
			transition: transform 0.18s ease;
		}

		.seamlessToggle.isActive .toggleSwitch {
			background: var(--cyan);
		}

		.seamlessToggle.isActive .toggleSwitch::after {
			transform: translateX(18px);
		}

		.hiddenFileInput {
			display: none;
		}

		.importDropZone {
			min-height: 58px;
			display: grid;
			place-items: center;
			margin-bottom: 10px;
			padding: 12px;
			border: 1px dashed var(--controlBorder);
			border-radius: 8px;
			background: var(--dropBg);
			color: var(--dropText);
			text-align: center;
			font-weight: 700;
		}

		.importDropZone.isDragging {
			border-color: var(--cyan);
			background: var(--cyanSoft);
		}

		.textImport {
			display: none;
			margin-top: 10px;
		}

		.textImport.isVisible {
			display: grid;
			gap: 8px;
		}

		.textImportWrap {
			position: relative;
		}
		.textImportActions {
			position: absolute;
			top: 6px;
			right: 22px;
			display: flex;
			gap: 3px;
			z-index: 2;
		}
		.textImportActionBtn {
			width: 26px;
			height: 26px;
			border: 1px solid var(--controlBorder);
			background: var(--controlBg);
			border-radius: 6px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--controlText);
			padding: 0;
			transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
			-webkit-user-select: none;
			user-select: none;
		}
		.textImportActionBtn svg {
			display: block;
			transition: transform 0.2s ease;
		}
		.textImportActionBtn:hover {
			border-color: var(--cyan);
			background: var(--controlHoverBg);
			color: var(--cyan);
		}
		.textImportActionBtn:hover svg {
			transform: scale(1.08);
		}
		.toastNotify {
			position: fixed;
			bottom: 80px;
			left: 50%;
			transform: translateX(-50%) translateY(20px);
			background: var(--panel, #333);
			color: var(--text, #fff);
			padding: 10px 20px;
			border-radius: 8px;
			box-shadow: 0 4px 16px rgba(0,0,0,0.3);
			font-size: 14px;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.25s, transform 0.25s;
			z-index: 9999;
		}
		.toastNotify.isVisible {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		.stateTextarea {
			width: 100%;
			min-height: 92px;
			resize: vertical;
			border: 1px solid var(--line);
			border-radius: 8px;
			padding: 10px;
			padding-right: 70px;
			background: var(--controlBg);
			color: var(--controlText);
			font: 13px/1.45 "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
		}

		.stateOptions {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 12px;
			color: var(--muted);
			font-size: 13px;
		}

		.stateOptionRow {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px 14px;
			margin-top: 12px;
		}

		.stateOptionRow .stateOptions {
			margin-top: 0;
		}

		.practiceFormulaToggle {
			display: inline-flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 6px;
			width: 100%;
			margin-top: 8px;
			color: var(--muted);
			font-size: 13px;
		}

		.practiceFormulaCount {
			white-space: nowrap;
		}

		.practiceFormulaName {
			color: var(--ink);
			font-weight: 700;
			overflow-wrap: anywhere;
		}

		.practiceFormulaToggle.isFormula {
			align-items: flex-start;
		}

		.practiceFormulaToggle.isFormula #practiceFormulaText {
			color: var(--ink);
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-weight: 700;
			overflow-wrap: anywhere;
		}

	.practiceAoTimes {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
		margin-top: 8px;
	}

	.practiceAoTime {
			padding: 6px 3px;
			border: 1px solid var(--line);
			border-radius: 6px;
			text-align: center;
		}

		.practiceAoTime span,
		.practiceAoTime strong {
			display: block;
		}

		.practiceAoTime span {
			color: var(--muted);
			font-size: 10px;
		}

		.practiceAoTime strong {
			font-size: 13px;
		}

		.smartCheck {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			min-width: 18px;
			min-height: 18px;
			color: var(--muted);
			cursor: pointer;
			-webkit-user-select: none;
			user-select: none;
		}

		.smartCheck input {
			position: absolute;
			width: 1px;
			height: 1px;
			opacity: 0;
			pointer-events: none;
		}

		.checkVisual {
			position: relative;
			display: block;
			width: 18px;
			height: 18px;
			flex: 0 0 auto;
			border: 1px solid var(--controlBorder);
			border-radius: 5px;
			background: var(--controlBg);
			transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
		}

		.smartCheck:hover .checkVisual,
		.smartCheck input:focus-visible + .checkVisual {
			border-color: var(--cyan);
			box-shadow: 0 0 0 3px rgba(36, 240, 234, 0.10);
		}

		.smartCheck input:checked + .checkVisual,
		.smartCheck input:indeterminate + .checkVisual {
			border-color: var(--accent);
			background: var(--accent);
		}

		.smartCheck input[type="radio"] + .checkVisual {
			border-radius: 50%;
		}

		.smartCheck input[type="radio"]:checked + .checkVisual {
			border-color: var(--accent);
			background: var(--controlBg);
		}

		.smartCheck input:checked + .checkVisual::after {
			content: "";
			position: absolute;
			left: 5px;
			top: 2px;
			width: 5px;
			height: 10px;
			border: solid #fff;
			border-width: 0 2px 2px 0;
			transform: rotate(45deg);
		}

		.smartCheck input[type="radio"]:checked + .checkVisual::after {
			content: "";
			position: absolute;
			left: 4px;
			top: 4px;
			width: 8px;
			height: 8px;
			border: 0;
			border-radius: 50%;
			background: var(--accent);
			transform: none;
		}

		.smartCheck input:indeterminate + .checkVisual::after {
			content: "";
			position: absolute;
			left: 4px;
			right: 4px;
			top: 8px;
			height: 2px;
			border-radius: 999px;
			background: #fff;
		}

		.importStatus {
			margin-top: 10px;
			color: var(--muted);
			font-size: 13px;
		}

		.practiceGrid {
			display: grid;
			gap: 8px;
			margin-top: 12px;
		}

		.stateCard {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 10px;
			align-items: center;
			padding: 10px;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--controlBg);
		}

		.stateCard strong {
			display: block;
			overflow-wrap: anywhere;
			font-size: 14px;
		}

		.stateCard small {
			display: block;
			margin-top: 4px;
			color: var(--muted);
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 11px;
			overflow-wrap: anywhere;
		}

		.statePreview {
			grid-column: 1 / -1;
			width: 100%;
			height: 116px;
			border-top: 1px solid var(--line);
			padding-top: 8px;
			cursor: grab;
			touch-action: none;
			-webkit-user-select: none;
			user-select: none;
		}

		.statePreview.isDragging {
			cursor: grabbing;
		}

		.statePreview > div {
			width: 108px;
			height: 108px;
			margin: 0 auto;
		}

		/* ѵ��ģʽ��Ƭ������ JS �����������Ƶ����ռ����������Ƭ��������ͼ�����ֶ��� */
		.practiceView .practiceGrid {
			grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
			gap: 10px;
		}

		.practiceView .stateCard {
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
			grid-auto-rows: auto;
			gap: 8px;
			justify-items: center;
			align-content: start;
			min-height: 0;
			text-align: center;
			cursor: pointer;
			transition: transform 0.14s ease, border-color 0.14s ease, background 0.22s ease, box-shadow 0.14s ease;
		}

		.practiceView .stateCard:hover,
		.practiceView .stateCard:focus-visible {
			border-color: rgba(36, 240, 234, 0.68);
			background: var(--controlHoverBg);
			box-shadow: inset 0 0 0 1px rgba(36, 240, 234, 0.08);
			outline: none;
			transform: translateY(-1px);
		}

		.practiceView .stateCard.isActive {
			border-color: rgba(93, 78, 168, 0.68);
			box-shadow: inset 0 0 0 1px rgba(93, 78, 168, 0.20), 0 0 0 3px var(--accentSoft);
		}

		.practiceView .statePreview {
			width: 100%;
			height: auto;
			max-width: 100%;
			border-top: 0;
			padding-top: 0;
		}

		.practiceView .statePreview > div {
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 1;
		}

		.stateName {
			width: 100%;
			color: var(--ink);
			overflow-wrap: anywhere;
		}

		.practiceDiagnostics {
			display: none;
		}

		.makerView .moves {
			margin-top: 0;
		}

		.draftList {
			display: grid;
			gap: 10px;
		}

		.draftListActions {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.formulaOrganizeButton {
			position: relative;
			width: 42px;
			min-width: 42px;
			padding: 0;
		}

		.formulaRow {
			display: grid;
			grid-template-columns: 76px minmax(0, 1fr);
			gap: 10px;
			align-items: stretch;
			position: relative;
		}

		.formulaRow.isOrganizing {
			grid-template-columns: 34px 76px minmax(0, 1fr) 34px;
		}

		.formulaRow.isDragging {
			opacity: 0.48;
		}

		.formulaRow.dropBefore::before,
		.formulaRow.dropAfter::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			height: 2px;
			border-radius: 999px;
			background: var(--cyan);
			box-shadow: 0 0 10px rgba(36, 240, 234, 0.36);
		}

		.formulaRow.dropBefore::before {
			top: -6px;
		}

		.formulaRow.dropAfter::after {
			bottom: -6px;
		}

		.formulaNameInput,
		.formulaTrack,
		.formulaAlgInput {
			min-height: 42px;
			border: 1px solid var(--controlBorder);
			border-radius: 8px;
			background: var(--controlBg);
			color: var(--controlText);
		}

		.formulaNameInput,
		.formulaAlgInput {
			width: 100%;
			padding: 0 10px;
			font: inherit;
			font-weight: 700;
		}

		.formulaNameInput:focus-visible,
		.formulaAlgInput:focus-visible {
			outline: 2px solid var(--cyan);
			outline-offset: 2px;
		}

		.formulaTrack {
			display: grid;
			grid-template-columns: 42px minmax(0, 1fr);
			align-items: center;
			overflow: hidden;
		}

		.formulaTrackText {
			padding: 0 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--muted);
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 13px;
		}

		.formulaTrackText.hasMoves {
			color: var(--ink);
			font-weight: 700;
		}

		.formulaIconButton,
		.formulaAddButton,
		.formulaDragHandle,
		.formulaDeleteButton {
			width: 42px;
			min-height: 42px;
			border: 1px solid var(--controlBorder);
			border-radius: 8px;
			background: var(--controlBg);
			color: var(--controlText);
			cursor: pointer;
			position: relative;
			transition: border-color 0.14s ease, background 0.16s ease, transform 0.12s ease, box-shadow 0.14s ease;
		}

		.formulaIconButton {
			border-width: 0 1px 0 0;
			border-radius: 8px 0 0 8px;
		background: transparent;
	}

		.formulaIconButton:disabled {
			cursor: default;
			opacity: 0.45;
			transform: none;
		}

		.formulaAddButton:disabled,
		.formulaOrganizeButton:disabled {
			cursor: default;
			opacity: 0.45;
			transform: none;
			box-shadow: none;
		}

		.formulaOrganizeButton::before {
			content: "";
			position: absolute;
			left: 12px;
			top: 13px;
			width: 16px;
			height: 2px;
			border-radius: 999px;
			background: var(--accent);
			box-shadow: 0 7px 0 var(--accent), 0 14px 0 var(--accent);
		}

		.formulaOrganizeButton.isActive {
			border-color: var(--cyan);
			box-shadow: inset 0 0 0 1px rgba(36, 240, 234, 0.12), 0 0 0 3px rgba(36, 240, 234, 0.08);
		}

		.formulaOrganizeButton.isActive::before {
			background: var(--cyan);
			box-shadow: 0 7px 0 var(--cyan), 0 14px 0 var(--cyan);
		}

		.formulaDragHandle,
		.formulaDeleteButton {
			width: 34px;
			padding: 0;
		}

		.formulaDragHandle {
			cursor: grab;
		}

		.formulaDragHandle:active {
			cursor: grabbing;
		}

		.formulaDragHandle::before,
		.formulaDragHandle::after {
			content: "";
			position: absolute;
			top: 12px;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			background: var(--muted);
			box-shadow: 0 8px 0 var(--muted), 0 16px 0 var(--muted);
		}

		.formulaDragHandle::before {
			left: 11px;
		}

		.formulaDragHandle::after {
			left: 19px;
		}

		.formulaDeleteButton::before,
		.formulaDeleteButton::after {
			content: "";
			position: absolute;
			left: 9px;
			top: 20px;
			width: 16px;
			height: 2px;
			border-radius: 999px;
			background: var(--red);
		}

		.formulaDeleteButton::before {
			transform: rotate(45deg);
		}

		.formulaDeleteButton::after {
			transform: rotate(-45deg);
		}

		.formulaAddButton::before,
		.formulaAddButton::after {
			content: "";
			position: absolute;
			left: 13px;
			top: 20px;
			width: 16px;
			height: 2px;
			background: var(--accent);
			border-radius: 999px;
		}

		.formulaAddButton::after {
			transform: rotate(90deg);
		}

		.libraryControls {
			grid-template-columns: 1fr 1fr;
		}

		.libraryList {
			display: grid;
			gap: 8px;
			margin-top: 10px;
		}

		.libraryItem {
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--controlBg);
			overflow: hidden;
		}

		.libraryHeader {
			display: grid;
			grid-template-columns: 28px minmax(0, 1fr) 28px;
			align-items: center;
			gap: 8px;
			min-height: 46px;
			padding: 8px 10px;
			cursor: pointer;
		}

		.libraryHeader .smartCheck {
			justify-self: end;
		}

		.libraryHeader:hover {
			background: var(--controlHoverBg);
		}

		.libraryToggle {
			position: relative;
			width: 22px;
			height: 22px;
			border-radius: 6px;
			color: var(--muted);
		}

		.libraryToggle::before {
			content: "";
			position: absolute;
			left: 7px;
			top: 5px;
			width: 7px;
			height: 7px;
			border-right: 2px solid currentColor;
			border-bottom: 2px solid currentColor;
			transform: rotate(-45deg);
			transition: transform 0.14s ease, top 0.14s ease;
		}

		.libraryItem.isExpanded .libraryToggle::before {
			top: 4px;
			transform: rotate(45deg);
		}

		.libraryTitle {
			min-width: 0;
		}

		.libraryTitle strong,
		.libraryFormulaName {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--ink);
			font-weight: 800;
		}

		.libraryTitle small,
		.libraryFormulaAlg {
			display: block;
			margin-top: 2px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: var(--muted);
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 11px;
		}

		.libraryFormulas {
			display: none;
			border-top: 1px solid var(--line);
			background: color-mix(in srgb, var(--controlBg) 88%, var(--accentSoft));
		}

		.libraryItem.isExpanded .libraryFormulas {
			display: grid;
		}

		.libraryFormulaRow {
			display: grid;
			grid-template-columns: minmax(0, 1fr) 28px;
			align-items: center;
			gap: 8px;
			min-height: 42px;
			padding: 8px 10px 8px 46px;
			border-top: 1px solid var(--line);
			cursor: pointer;
		}

		.libraryFormulaRow .smartCheck {
			justify-self: end;
		}

		.libraryFormulaRow:first-child {
			border-top: 0;
		}

		.libraryFormulaRow:hover {
			background: var(--controlHoverBg);
		}

		.libraryEmpty {
			margin-top: 10px;
			color: var(--muted);
			font-size: 13px;
		}

		.formulaIconButton[data-formula-action="record"]::before {
			content: "";
			position: absolute;
			left: 15px;
			top: 12px;
			border-left: 14px solid var(--accent);
			border-top: 9px solid transparent;
			border-bottom: 9px solid transparent;
		}

		.formulaIconButton[data-formula-action="stop"]::before {
			content: "";
			position: absolute;
			left: 14px;
			top: 14px;
			width: 14px;
			height: 14px;
			border-radius: 2px;
			background: var(--accent);
		}

		.formulaIconButton[data-formula-action="edit"] {
			background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 37L36 18L43 11Q48 6 53 11Q58 16 53 21L46 28L27 47L17 37Z' fill='%235d4ea8'/%3E%3Cpath d='M13 51L17 37L27 47L13 51Z' fill='%2324f0ea'/%3E%3Cpath d='M15 39L25 49' stroke='%235d4ea8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.sharedGroupBar {
			margin-bottom: 8px;
		}
		.groupPicker {
			position: fixed;
			inset: 0;
			z-index: 50;
			background: rgba(0,0,0,0.5);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.groupPickerBox {
			background: var(--bg-primary, #1a1a2e);
			border: 1px solid rgba(255,255,255,0.15);
			border-radius: 12px;
			padding: 20px;
			max-width: 360px;
			width: calc(100% - 32px);
		}
		.groupPickerTitle {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 6px;
		}
		.groupPickerDesc {
			font-size: 13px;
			opacity: 0.7;
			margin-bottom: 14px;
		}
		.groupPickerActions {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}
		.groupPickerActions .button {
			width: 100%;
			justify-content: center;
		}
		.formulaAddOtherList {
			display: none;
			flex-direction: column;
			gap: 4px;
			margin-top: 4px;
		}

		.formulaExportOverlay {
			position: fixed;
			inset: 0;
			z-index: 20;
			display: grid;
			place-items: center;
			padding: 18px;
			background: rgba(10, 10, 18, 0.42);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
			opacity: 0;
			transition: opacity 0.22s ease;
		}

		.formulaExportOverlay.isOpen {
			opacity: 1;
		}

		.stateBox .button {
			width: 100%;
		}

		.customStateOverlay {
			position: fixed;
			inset: 0;
			z-index: 30;
			display: grid;
			place-items: center;
			padding: 18px;
			background: rgba(10, 10, 18, 0.48);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
			opacity: 0;
			transition: opacity 0.2s ease;
		}

		.customStateOverlay.isOpen {
			opacity: 1;
		}

		.customStateDialog {
			width: min(620px, 100%);
			max-height: calc(100dvh - 36px);
			display: grid;
			grid-template-rows: auto minmax(320px, 58vh) auto auto;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surfaceSolid);
			box-shadow: var(--shadow);
			overflow: hidden;
			transform: scale(0.96) translateY(10px);
			transition: transform 0.2s ease;
		}

		.customStateOverlay.isOpen .customStateDialog {
			transform: scale(1) translateY(0);
		}

		.customStateHeader,
		.customStateActions {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			padding: 14px;
		}

		.customStateHeader {
			border-bottom: 1px solid var(--line);
		}

		.customStateActions {
			border-top: 1px solid var(--line);
		}

		.customStateActionRight {
			display: flex;
			gap: 8px;
		}

		.customCubeStage {
			position: relative;
			min-height: 320px;
			background: var(--stageBg);
			cursor: grab;
			touch-action: none;
			-webkit-user-select: none;
			user-select: none;
			overflow: hidden;
		}

		.customCubeStage.isDragging {
			cursor: grabbing;
		}

		.customCubeStage > div {
			width: 100%;
			height: 100%;
		}

		.customStateHint {
			margin: 0;
			padding: 10px 14px;
			border-top: 1px solid var(--line);
			color: var(--muted);
			font-size: 12px;
			text-align: center;
		}

		.formulaExportDialog {
			width: min(720px, 100%);
			max-height: min(680px, calc(100dvh - 36px));
			display: grid;
			grid-template-rows: auto minmax(220px, 1fr) auto;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--surfaceSolid);
			box-shadow: var(--shadow);
			overflow: hidden;
			opacity: 0;
			transform: scale(0.94) translateY(12px);
			transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
		}

		.formulaExportOverlay.isOpen .formulaExportDialog {
			opacity: 1;
			transform: scale(1) translateY(0);
		}

		.formulaExportHeader,
		.formulaExportActions {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			padding: 14px;
			border-bottom: 1px solid var(--line);
		}

		.formulaExportActions {
			justify-content: space-between;
			border-top: 1px solid var(--line);
			border-bottom: 0;
		}

		.formulaExportActionsRight {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 10px;
		}

		.formulaExportHeader strong {
			font-size: 16px;
		}

		.formulaExportText {
			width: 100%;
			height: 100%;
			min-height: 260px;
			resize: vertical;
			border: 0;
			padding: 14px;
			background: var(--controlBg);
			color: var(--controlText);
			font: 13px/1.55 "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
		}

		@media (max-width: 520px) {
			.formulaRow {
				grid-template-columns: 76px minmax(0, 1fr);
			}

			.formulaRow.isOrganizing {
				grid-template-columns: 34px 76px minmax(0, 1fr) 34px;
			}

			.formulaRow.isOrganizing .formulaTrack {
				grid-column: auto;
			}
		}

		.metrics {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
		}

		.metric {
			min-height: 68px;
			padding: 10px;
			border: 1px solid var(--line);
			border-radius: 8px;
			background: var(--controlBg);
			transition: background 0.22s ease, border-color 0.22s ease;
		}

		.metric span {
			display: block;
			color: var(--muted);
			font-size: 12px;
		}

		.metric strong {
			display: block;
			margin-top: 6px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 18px;
			letter-spacing: 0;
		}

		.moves {
			display: grid;
			grid-template-columns: repeat(6, minmax(0, 1fr));
			gap: 7px;
		}

		.moveButton {
			aspect-ratio: 1;
			min-height: 40px;
			border: 1px solid var(--controlBorder);
			border-radius: 8px;
			background: var(--controlBg);
			color: var(--controlText);
			cursor: pointer;
			font-weight: 700;
			transition: transform 0.12s ease, border-color 0.14s ease, color 0.14s ease, background 0.22s ease;
		}

		.moveButton:hover {
			border-color: rgba(36, 240, 234, 0.7);
			color: var(--controlText);
			background: var(--controlHoverBg);
			transform: translateY(-1px);
			box-shadow: inset 0 0 0 1px rgba(36, 240, 234, 0.08);
		}

		.moveButton.rotation {
			background: var(--rotationBg);
			color: var(--rotationText);
			border-color: rgba(93, 78, 168, 0.42);
		}

		.history {
			flex: 0 0 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
		}

		.historyTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 16px;
			border-bottom: 1px solid var(--line);
			color: var(--muted);
			font-size: 13px;
		}

		.moveList {
			min-height: 68px;
			padding: 14px 16px 10px;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			gap: 8px;
		}

		.moveChip {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 34px;
			height: 30px;
			padding: 0 9px;
			border-radius: 8px;
			background: var(--chipBg);
			color: var(--chipText);
			font-weight: 700;
		}

		.log {
			min-height: 130px;
			max-height: 230px;
			overflow: auto;
			padding: 12px 16px 16px;
			border-top: 1px solid var(--line);
			background: var(--logBg);
			color: var(--ink);
			font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
			font-size: 12px;
			white-space: pre-wrap;
		}

	@media (max-width: 900px) {
		body {
			overflow: auto;
			background: transparent;
		}

		/* 移动端背景固定并占满一屏：�? fixed 全屏层承载渐变，避免随内容滚动�? */
		body::before {
			content: "";
			position: fixed;
			inset: 0;
			z-index: -1;
			background: var(--pageBg);
			transition: background 0.22s ease;
		}

		.appShell {
			grid-template-columns: 1fr;
			height: auto;
			min-height: 100%;
		}

		.cubeArea {
			min-height: 62vh;
		}

		.modeView {
			min-height: 460px;
			max-height: none;
		}

		/* 移动端训练模式控�? 1/2 平分，并在过窄时自动换行（与其它模式按钮换行逻辑一致）�? */
		.practiceView .practiceControls {
			display: flex;
			flex-wrap: wrap;
		}

		.practiceView .practiceControls > * {
			flex: 1 1 50%;
			min-width: 140px;
		}

		.practiceView .practiceModeSelect {
			width: auto;
		}
	}

		@media (max-width: 520px) {
			.appShell {
				padding: 10px 10px 10px;
				gap: 10px;
			}

			.topBar {
				top: 10px;
				left: 10px;
				right: 10px;
				align-items: stretch;
				flex-direction: column;
			}

			.statusPill {
				max-width: none;
				border-radius: 8px;
			}

			.controls,
			.metrics {
				grid-template-columns: 1fr;
			}
		}

		/* Mobile-only shell: stable cube/navigation, independently scrolling cards. */
		:root { --mobile-nav-size: 70px; --mobile-gap: 10px; }
		html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
		body { overflow: hidden !important; }
		.appShell {
			height: calc(100dvh - var(--site-nav-height, 0px));
			min-height: 0;
			padding: var(--mobile-gap);
			gap: var(--mobile-gap);
			overflow: hidden;
		}
		.topBar { display: none; }
		.modeNav {
			z-index: 20;
			display: grid;
			background: var(--surface);
			border: 1px solid var(--line);
			box-shadow: var(--shadow);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
		}
		.modeNavBtn {
			min-width: 0; min-height: 48px; padding: 7px 5px; border: 0;
			background: transparent; color: var(--muted); font-size: 11px;
			font-weight: 700; cursor: pointer; display: flex; align-items: center;
			justify-content: center; flex-direction: column; gap: 3px;
			transition: color .16s ease, background .16s ease;
		}
		.modeNavBtn .modeIcon { width: 27px; height: 27px; }
		.modeNavBtn.isActive {
			color: var(--accent); background: var(--accentSoft);
			box-shadow: inset 0 3px 0 var(--cyan);
		}
		.navUtilityIcon {
			width: 25px; height: 25px; display: grid; place-items: center;
			border: 1px solid var(--controlBorder); border-radius: 7px;
			background: var(--controlBg); font-size: 16px; line-height: 1;
		}
		.cubeArea {
			min-width: 0; min-height: 0; width: var(--cube-size); height: var(--cube-size);
			aspect-ratio: 1; justify-self: center;
		}
		.modeView {
			min-width: 0; min-height: 0; max-height: none; height: 100%;
			overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
		}
		.viewHead { position: sticky; top: 0; z-index: 3; background: var(--surfaceSolid); }
		.history, .practiceDiagnostics { display: none !important; }
		.panelOverlay {
			position: fixed; inset: var(--site-nav-height, 0px) 0 0; z-index: 1000;
			display: flex; background: rgba(12, 12, 20, .46); opacity: 0;
			visibility: hidden; pointer-events: none;
			transition: opacity .2s ease, visibility .2s ease;
		}
		.panelOverlay.isOpen { opacity: 1; visibility: visible; pointer-events: auto; }
		.panelDrawer {
			display: flex; flex-direction: column; min-height: 0;
			background: var(--surfaceSolid); border: 1px solid var(--line);
			box-shadow: var(--shadow); transition: transform .24s cubic-bezier(.16, 1, .3, 1);
		}
		.panelHead {
			display: flex; align-items: center; gap: 10px; padding: 12px 14px;
		}
		/* ͷ�����޷찴ť�̶����������������ֿ�ѹ������ʡ�Ժ���β��������ѹ�޷졢������ */
		.panelHead .seamlessToggle { flex: 0 0 auto; }
		.panelHead .connectPill { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
		.panelHead .connectPill .connectLabel { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.panelHead strong { font-size: 17px; }
		.panelHead .statusPill {
			margin-left: auto; max-width: 42%; padding: 6px 9px; font-size: 12px;
		}
		.modeOpsBody {
			min-height: 0; overflow-y: auto; overscroll-behavior: contain;
			padding-bottom: max(12px, env(safe-area-inset-bottom));
		}
		.modeOpsBody > .viewSec,
		.modeOpsBody > .seamlessToggle,
		.modeOpsBody > [data-action-block] { width: auto; margin: 12px 14px 0; }
		.modeOpsBody > .viewSec,
		.modeOpsBody > .seamlessToggle { display: block; }
		.modeOpsBody > .viewSec {
			padding: 12px;
		}
		.modeOpsBody > .seamlessToggle { width: calc(100% - 28px); min-height: 44px; }
		.modeOpsBody .macHelp.isVisible { display: block; }
		@media (orientation: portrait) {
			.appShell {
				--cube-size: min(calc(100vw - 2 * var(--mobile-gap)), 46dvh);
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: var(--cube-size) minmax(0, 1fr) auto;
			}
			.cubeArea { grid-row: 1; }
			.modeView { grid-row: 2; }
			.modeNav {
				grid-row: 3; grid-template-columns: repeat(6, minmax(0, 1fr));
				border-radius: 10px; padding-bottom: env(safe-area-inset-bottom);
			}
			.panelOverlay { align-items: flex-end; }
			.panelDrawer {
				width: 100%; max-height: min(78dvh, 720px); border-radius: 14px 14px 0 0;
				transform: translateY(100%);
			}
			.panelOverlay.isOpen .panelDrawer { transform: translateY(0); }
		}
		@media (orientation: landscape) {
			.appShell {
				--cube-size: min(calc(100dvh - var(--site-nav-height, 0px) - 2 * var(--mobile-gap)), 44vw);
				grid-template-columns: var(--mobile-nav-size) var(--cube-size) minmax(0, 1fr);
				grid-template-rows: minmax(0, 1fr);
			}
			.modeNav {
				grid-column: 1; grid-template-rows: repeat(6, minmax(0, 1fr));
				border-radius: 10px; overflow: hidden;
			}
			.modeNavBtn.isActive { box-shadow: inset 3px 0 0 var(--cyan); }
			.cubeArea { grid-column: 2; align-self: center; }
			.modeView { grid-column: 3; }
			.panelOverlay { justify-content: flex-end; }
			.panelDrawer { width: min(430px, 72vw); height: 100%; transform: translateX(100%); }
			.panelOverlay.isOpen .panelDrawer { transform: translateX(0); }
		}
		/* Product polish: clearer hierarchy, safer touch targets and calmer surfaces. */
		.appShell {
			padding-top: var(--mobile-gap);
			padding-right: max(var(--mobile-gap), env(safe-area-inset-right));
			padding-bottom: max(var(--mobile-gap), env(safe-area-inset-bottom));
			padding-left: max(var(--mobile-gap), env(safe-area-inset-left));
		}
		.cubeArea { border-radius: 14px; }
		.modeView {
			gap: 10px;
			padding: 0 2px 12px;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			scrollbar-gutter: stable;
		}
		.viewHead,
		.modeView > .viewSec,
		.modeView > .reviewArea {
			border: 1px solid var(--line);
			border-radius: 12px;
			background: var(--surface);
			box-shadow: 0 8px 24px rgba(36, 36, 54, .07);
		}
		.viewHead {
			margin: 0 2px;
			padding: 14px 16px;
			border-bottom: 1px solid var(--line);
			-webkit-backdrop-filter: blur(16px);
			backdrop-filter: blur(16px);
		}
		.viewHead h1 { font-size: 19px; }
		.panelContext {
			margin: 5px 0 0;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.4;
		}
		.modeView > .viewSec,
		.modeView > .reviewArea {
			margin: 0 2px;
			padding: 14px;
			border-bottom: 1px solid var(--line);
		}
		.modeNav { overflow: hidden; }
		.modeNavBtn { position: relative; isolation: isolate; }
		.modeNavBtn::after {
			content: "";
			position: absolute;
			top: 8px;
			right: calc(50% - 18px);
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: transparent;
			box-shadow: none;
		}
		#actionPanelToggle[data-state="connected"]::after {
			background: var(--cyan);
			box-shadow: 0 0 0 3px var(--cyanSoft);
		}
		#actionPanelToggle[data-state="error"]::after { background: var(--red); }
		.panelDrawer { border-color: color-mix(in srgb, var(--line) 82%, transparent); }
		.panelHead { min-height: 62px; }
		.modeOpsBody { padding: 4px 0 max(18px, env(safe-area-inset-bottom)); }
		.opGroup {
			margin: 12px 14px 0;
			overflow: visible;
		}
		.opGroupTitle {
			display: none;
		}
		.opGroupBody { padding: 0 12px 12px; }
		.opGroupBody > * { margin-top: 10px; }
		.opGroupBody > :first-child { margin-top: 0; }
		.actionSubTitle { margin: 0 0 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
		.opGroupBody > .viewSec {
			padding: 0;
			border: 0;
			background: transparent;
		}
		.opGroupBody > .seamlessToggle { width: 100%; min-height: 46px; }
		.opGroupBody > .seamlessToggle::after { content: "无缝模式"; }
		.opGroupBody .button,
		.opGroupBody .practiceModeCurrent { min-height: 46px; }
		.opGroupBody .macHelp {
			margin: 0;
			padding: 12px;
			border-radius: 9px;
		}
		.modeOpsBody:empty::after {
			content: "当前模式没有额外操作";
			display: block;
			padding: 36px 20px;
			color: var(--muted);
			text-align: center;
		}
		@media (orientation: portrait) {
			.panelDrawer::before {
				content: "";
				width: 38px;
				height: 4px;
				margin: 8px auto 0;
				border-radius: 999px;
				background: var(--line);
				flex: 0 0 auto;
			}
			.panelHead { padding-top: 8px; }
		}
		@media (orientation: landscape) and (max-height: 430px) {
			.modeNavBtn { min-height: 0; padding: 4px 3px; font-size: 10px; }
			.modeNavBtn .modeIcon { width: 24px; height: 24px; }
			.navUtilityIcon { width: 23px; height: 23px; }
			.viewHead { padding: 11px 14px; }
			.modeView > .viewSec,
			.modeView > .reviewArea { padding: 12px; }
		}
		.modeNavBtn:active { transform: scale(.96); }
		@media (prefers-reduced-motion: reduce) {
			*, *::before, *::after {
				scroll-behavior: auto !important;
				transition-duration: .01ms !important;
				animation-duration: .01ms !important;
				animation-iteration-count: 1 !important;
			}
		}
		/* Final mobile navigation shell. */
		.siteHeaderMenuBtn,
		.siteHeaderFullscreenBtn { width: 30px; padding: 0; }
		.siteHeaderMenuBtn { gap: 3px; flex-direction: column; }
		.siteHeaderMenuBtn span {
			display: block; width: 15px; height: 1.5px; border-radius: 999px;
			background: currentColor; transition: transform .18s ease, opacity .18s ease;
		}
		.siteHeaderMenuBtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
		.siteHeaderMenuBtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
		.siteHeaderMenuBtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
		.siteHeaderFullscreenBtn { font-size: 16px; line-height: 1; }
		.viewHead { display: none; }
		.practiceView .practiceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.practiceView .stateCard { min-width: 0; }
		.practiceView .statePreview > div { width: min(116px, 100%); height: min(116px, 100%); }
		.bottomNav { display: none; }
		.sideNav {
			min-width: 0; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr));
			background: var(--surface); border: 1px solid var(--line); overflow: hidden;
			-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
			transition: width .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
		}
		.modeNavBtn {
			position: relative; min-width: 0; min-height: 48px; padding: 8px 10px;
			border: 0; background: transparent; color: var(--muted); cursor: pointer;
			display: flex; align-items: center; justify-content: center; gap: 10px;
			font-size: 12px; font-weight: 800; transition: color .16s ease, background .16s ease;
		}
		.modeNavBtn.isActive { color: var(--accent); background: var(--accentSoft); box-shadow: inset -3px 0 0 var(--cyan); }
		.modeNavBtn .modeIcon { width: 28px; height: 28px; flex: 0 0 auto; }
		/* 侧边栏横向排布：图标在左、文字在右，垂直居中对齐 */
		.sideNav .modeNavBtn { flex-direction: row; }
		.sideNav .navLabel { overflow: hidden; white-space: nowrap; }
		.operationChevron {
			display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
			border-radius: 8px; background: var(--accentSoft); color: var(--accent);
			font: 800 23px/1 system-ui, sans-serif; letter-spacing: -8px; padding-right: 8px;
		}
		.sideNavScrim {
			position: fixed; inset: var(--site-nav-height, 0px) 0 0; z-index: 940;
			background: rgba(12, 12, 20, .42); opacity: 0; visibility: hidden;
			pointer-events: none; transition: opacity .18s ease, visibility .18s ease;
		}
		[data-action-panel-toggle][data-state="connected"]::after {
			content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px;
			border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px var(--cyanSoft);
		}
		[data-action-panel-toggle][data-state="error"]::after {
			content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px;
			border-radius: 50%; background: var(--red);
		}
		@media (orientation: portrait) {
			.appShell {
				--cube-size: min(calc(100vw - 20px), 46dvh);
				grid-template-columns: minmax(0, 1fr);
				grid-template-rows: var(--cube-size) minmax(0, 1fr) auto;
				gap: 10px; padding: 10px 0 0;
			}
			.cubeArea { grid-row: 1; margin-inline: 10px; }
			.modeView { grid-row: 2; margin-inline: 8px; width: auto; }
			.bottomNav {
				grid-row: 3; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
				width: 100%; min-height: 58px; padding: 0 4px env(safe-area-inset-bottom);
				border: 0; border-top: 1px solid var(--line); border-radius: 0;
				background: var(--surfaceSolid); box-shadow: none; backdrop-filter: none;
			}
			.bottomNav .modeNavBtn { min-height: 58px; padding: 6px 2px; }
			.bottomNav .modeNavBtn.isActive { box-shadow: inset 0 3px 0 var(--cyan); }
			.bottomNav .operationNavButton .navLabel { display: none; }
			.bottomNav .operationChevron { transform: rotate(90deg); }
			.sideNav {
				position: fixed; z-index: 950; top: var(--site-nav-height, 0px); right: 0; bottom: 0;
				width: min(168px, 48vw); border-width: 0 0 0 1px; border-radius: 0;
				transform: translateX(100%); box-shadow: -16px 0 42px rgba(0, 0, 0, .18);
			}
			.modeNavBtn { justify-content: flex-start; padding-inline: 16px; }
			.sideNav .navLabel { width: auto; opacity: 1; }
			body.railOpen .sideNav { transform: translateX(0); }
			body.railOpen .sideNavScrim { opacity: 1; visibility: visible; pointer-events: auto; }
		}
		@media (orientation: landscape) {
			.appShell {
				--rail-width: 64px;
				--cube-size: min(calc(100dvh - var(--site-nav-height, 0px) - 20px), 42vw);
				grid-template-columns: var(--cube-size) minmax(0, 1fr) var(--rail-width);
				grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 10px 0 10px 10px;
				transition: grid-template-columns .2s ease;
			}
			body.railExpanded .appShell { --rail-width: 152px; }
			.bottomNav { display: none; }
			.cubeArea { grid-column: 1; grid-row: 1; align-self: center; }
			.modeView { grid-column: 2; grid-row: 1; }
			.sideNav {
				grid-column: 3; grid-row: 1; width: var(--rail-width); height: 100%;
				border-width: 1px 0 1px 1px; border-radius: 12px 0 0 12px;
			}
			.modeNavBtn { justify-content: center; }
			.sideNav .navLabel { width: 0; opacity: 0; transition: width .18s ease, opacity .14s ease; }
			body.railExpanded .modeNavBtn { justify-content: flex-start; }
			body.railExpanded .sideNav .navLabel { width: auto; opacity: 1; }
		}
		.bottomNav .operationNavButton[aria-expanded="true"] .operationChevron { transform: rotate(-90deg); }
		.sideNav .operationNavButton[aria-expanded="true"] .operationChevron { transform: rotate(180deg); }
		@media (orientation: landscape) {
			body { --active-rail-width: 64px; }
			body.railExpanded { --active-rail-width: 152px; }
			.panelOverlay { right: var(--active-rail-width); transition: right .2s ease, opacity .2s ease, visibility .2s ease; }
		}
		@media (max-width: 420px) {
			.siteHeader { padding-inline: 8px; }
			.siteHeaderLeft, .siteHeaderRight { gap: 6px; }
			.siteHeaderName { display: none; }
		}
		/* Refined product shell: quiet chrome, left rail, clear actions. */
		.siteHeaderMenuBtn,
		.siteHeaderFullscreenBtn,
		.siteHeaderBtnTheme {
			border-color: transparent;
			background: transparent;
			box-shadow: none;
		}
		.siteHeaderMenuBtn:hover,
		.siteHeaderFullscreenBtn:hover,
		.siteHeaderBtnTheme:hover { background: var(--controlHoverBg); }
		.modeView { scrollbar-width: none; }
		.modeView::-webkit-scrollbar,
		.modeOpsBody::-webkit-scrollbar { display: none; }
		.modeView > .viewSec,
		.modeView > .reviewArea {
			border-color: color-mix(in srgb, var(--line) 72%, transparent);
			border-radius: 14px;
			box-shadow: 0 8px 22px rgba(20, 20, 36, .06);
		}
		.practiceView #formulaImport { padding: 14px; }
		.practiceView .practiceGrid { gap: 12px; }
		.practiceView .stateCard {
			border-radius: 12px;
			box-shadow: 0 6px 16px rgba(20, 20, 36, .08);
		}
		.bottomNav .modeNavBtn {
			background: transparent;
			box-shadow: none;
			color: var(--muted);
		}
		.bottomNav .modeNavBtn.isActive {
			background: transparent;
			box-shadow: none;
			color: var(--accent);
		}
		.bottomNav .modeNavBtn.isActive::before {
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: 26px;
			height: 3px;
			border-radius: 0 0 999px 999px;
			background: linear-gradient(90deg, var(--accent), var(--cyan));
			transform: translateX(-50%);
		}
		.bottomNav .modeNavBtn.isActive .modeIcon {
			box-shadow: 0 0 0 1px rgba(36, 240, 234, .35), 0 6px 16px rgba(93, 78, 168, .18);
		}
		.operationChevron {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba(255,255,255,.22);
		border-radius: 50%;
		background: linear-gradient(145deg, #7163c7, #514598);
		box-shadow: 0 8px 18px rgba(50, 40, 112, .28);
		font-size: 0;
		letter-spacing: 0;
		transition: transform .18s ease, box-shadow .18s ease;
	}
	.operationChevron::before,
	.operationChevron::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
	}
	.operationChevron::before { transform: translate(-50%, calc(-50% - 4px)) rotate(-135deg); }
	.operationChevron::after { transform: translate(-50%, calc(-50% + 4px)) rotate(-135deg); }
		.operationNavButton[aria-expanded="true"] .operationChevron {
			box-shadow: 0 0 0 4px var(--accentSoft), 0 8px 18px rgba(50, 40, 112, .28);
		}
		.panelDrawer { overflow: hidden; }
		.panelContent {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			min-height: 0;
		}
		.actionGlobalControls {
			flex: 0 0 auto;
			padding: 14px;
			background: linear-gradient(145deg, var(--accentSoft), transparent 62%), var(--surfaceSolid);
		}
		.globalOps {
			flex: 0 0 auto;
			display: flex;
			flex-direction: column;
			gap: 20px;
			padding: 16px 16px max(24px, env(safe-area-inset-bottom));
			background: transparent;
		}
		.modeOps {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			min-height: 0;
			background: var(--bg);
		}
		.actionSectionHeading {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 11px;
		}
		.actionSectionHeading strong { color: var(--ink); font-size: 14px; }
		.actionSectionHeading span { color: var(--muted); font-size: 11px; }
		.modeOps > .actionSectionHeading { margin: 0; padding: 13px 16px 8px; }
		.globalOpsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
		.globalOpsGrid > .button,
		.globalOpsGrid > .seamlessToggle { min-height: 44px; margin: 0; width: 100%; }
		.globalOpsGrid .globalPrimary { box-shadow: 0 7px 16px rgba(93, 78, 168, .18); }
		.globalOpsGrid > .seamlessToggle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-inline: 12px;
		}
		.globalOpsGrid > .seamlessToggle::after { content: none; }
		.modeOpsBody {
			flex: 1 1 auto;
			min-height: 0;
			overflow-y: auto;
			padding: 0 0 max(16px, env(safe-area-inset-bottom));
			scrollbar-width: none;
		}
		.opGroup {
			margin: 10px 12px 0;
			border-radius: 12px;
			box-shadow: 0 5px 16px rgba(20, 20, 36, .06);
		}
		.sideNav {
			background: color-mix(in srgb, var(--surfaceSolid) 94%, transparent);
			box-shadow: 8px 0 28px rgba(20, 20, 36, .12);
		}
		.modeNavBtn { color: var(--muted); }
		.modeNavBtn.isActive {
			background: linear-gradient(90deg, var(--accentSoft), transparent);
			box-shadow: inset 3px 0 0 var(--cyan);
			color: var(--accent);
		}
		.sideNav .operationChevron { width: 40px; height: 40px; }
		.sideNav .operationChevron::before,
		.sideNav .operationChevron::after {
			left: 13px;
			top: 15px;
			transform: rotate(-45deg);
		}
		.sideNav .operationChevron::after { left: 19px; }
		@media (orientation: portrait) {
			.appShell { --cube-size: min(calc(100vw - 20px), 44dvh); }
			.bottomNav {
				min-height: 64px;
				padding-inline: max(6px, env(safe-area-inset-left));
				border-top-color: color-mix(in srgb, var(--line) 78%, transparent);
			}
			.bottomNav .modeNavBtn { min-height: 64px; gap: 4px; }
			.bottomNav .modeNavBtn .modeIcon { width: 29px; height: 29px; border-radius: 9px; }
			.bottomNav .navLabel { font-size: 11px; }
			.bottomNav .operationChevron { transform: none; }
			.bottomNav .operationNavButton[aria-expanded="true"] .operationChevron { transform: rotate(180deg); }
			.sideNav {
				left: 0;
				right: auto;
				border-width: 0 1px 0 0;
				transform: translateX(-100%);
				box-shadow: 16px 0 42px rgba(0, 0, 0, .18);
			}
			body.railOpen .sideNav { transform: translateX(0); }
			/* 侧边栏抽屉里的圆形双箭头垂直居中 */
			.sideNav .operationChevron::before,
			.sideNav .operationChevron::after { top: 50%; }
			.sideNav .operationChevron::before { left: 50%; transform: translate(-50%, -100%) rotate(-135deg); }
			.sideNav .operationChevron::after { left: 50%; transform: translate(-50%, 0) rotate(-135deg); }
			.panelDrawer { max-height: min(86dvh, 760px); }
		}
		@media (orientation: landscape) {
			body { --rail-visual-width: 64px; }
			body.railExpanded { --rail-visual-width: 156px; }
			.appShell {
				--cube-size: min(calc(100dvh - var(--site-nav-height, 0px) - 20px), 42vw);
				grid-template-columns: 64px var(--cube-size) minmax(0, 1fr);
				grid-template-rows: minmax(0, 1fr);
				padding: 10px 10px 10px 0;
			}
			.sideNav {
				grid-column: 1;
				grid-row: 1;
				position: relative;
				z-index: 30;
				width: 64px;
				height: 100%;
				border-width: 1px 1px 1px 0;
				border-radius: 0 12px 12px 0;
				transition: width .2s ease;
			}
			body.railExpanded .sideNav { width: 156px; }
			.cubeArea { grid-column: 2; grid-row: 1; }
			.modeView { grid-column: 3; grid-row: 1; }
			body.railExpanded .appShell { --rail-width: 64px; }
			.sideNav .navLabel { width: 0; opacity: 0; }
			body.railExpanded .sideNav .navLabel { width: auto; opacity: 1; }
			.panelOverlay {
				left: var(--rail-visual-width);
				right: 0;
				justify-content: flex-start;
				transition: left .2s ease, opacity .2s ease, visibility .2s ease;
			}
			.panelDrawer {
				width: min(430px, 72vw);
				transform: translateX(-100%);
			}
			.panelOverlay.isOpen .panelDrawer { transform: translateX(0); }
		}
		/* Final mobile ergonomics: centered practice cards and one continuous drawer. */
		.practiceView .practiceGrid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
		.practiceView .stateCard { display:flex; min-height:142px; align-items:center; justify-content:center; flex-direction:column; gap:7px; padding:12px 8px; text-align:center; }
		.practiceView .statePreview { display:grid; width:100%; height:88px; place-items:center; padding:0; }
		.practiceView .statePreview > div { width:84px; height:84px; margin:0 auto; }
		.practiceView .stateCard strong,.practiceView .stateCard .stateName { width:100%; text-align:center; }
		.operationChevron { display:grid; place-items:center; }
		.operationChevron::before,.operationChevron::after { left:50%; top:50%; width:8px; height:8px; }
		.operationChevron::before { transform:translate(-50%, calc(-50% - 4px)) rotate(-135deg); }
	.operationChevron::after { transform:translate(-50%, calc(-50% + 4px)) rotate(-135deg); }
		.sideNav .operationChevron::before,.sideNav .operationChevron::after { top:50%; }
		.sideNav .operationChevron::before { left:50%; transform:translate(-82%,-50%) rotate(-45deg); }
		.sideNav .operationChevron::after { left:50%; transform:translate(-8%,-50%) rotate(-45deg); }
		.panelDrawer::before { content:none !important; }
		.panelMain {
			position: relative;
			isolation: isolate;
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			min-width: 0;
			min-height: 0;
			width: 100%;
			overflow: hidden;
		}
		.panelHandle {
			--drawer-handle-width: 100%;
			--drawer-handle-height: 26px;
			--drawer-grip-width: 44px;
			--drawer-grip-height: 5px;
			--drawer-grip-hover-width: 54px;
			--drawer-grip-hover-height: 5px;
			display: grid;
			flex: 0 0 auto;
			width: var(--drawer-handle-width);
			height: var(--drawer-handle-height);
			place-items: center;
			border: 0;
			background: var(--surfaceSolid);
			cursor: grab;
			touch-action: none;
		}
		.panelHandle:active { cursor:grabbing; }
		.panelHandle::before {
			content: "";
			width: var(--drawer-grip-width);
			height: var(--drawer-grip-height);
			border-radius: 999px;
			background: color-mix(in srgb,var(--muted) 42%,transparent);
			transition: width .18s ease, height .18s ease, background .18s ease;
		}
		.panelHandle:hover::before,.panelHandle:focus-visible::before {
			width: var(--drawer-grip-hover-width);
			height: var(--drawer-grip-hover-height);
			background: var(--accent);
		}
		.panelContent { display:block; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
		.panelContent::-webkit-scrollbar { display:none; }
		.actionGlobalControls,.modeOps { display:block; min-height:auto; }
		.modeOpsBody { display:block; overflow:visible; min-height:auto; }
		@media (orientation:portrait) { .panelHead { padding-top:0; } }
		@media (orientation:landscape) {
			.panelOverlay { left:0; }
			.panelDrawer { width:min(440px,78vw); }
		}
		/* Fixed content shells and compact drawer toolbar. */
		.cubeArea { border:0; border-radius:0; background:transparent; box-shadow:none; }
		.modeView { overflow:hidden; scrollbar-gutter:auto; }
		.modeView:not(.practiceView):not(.memoryView) > :last-child { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
		.practiceView { overflow:hidden; }
		.practiceView #formulaImport {
			display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden;
		}
		.practiceView .practiceFormulaToggle,
		.practiceView .practiceAoTimes,
		.practiceView #formulaImport > .sharedGroupBar,
		.practiceView #formulaImport > .importDropZone,
		.practiceView #formulaImport > .controls,
		.practiceView #formulaImport > .textImport,
		.practiceView #formulaImport > .stateOptionRow { flex:0 0 auto; }
		.practiceView .practiceGrid { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start; }
		.memoryView { overflow:hidden; }
		.memoryView > .reviewArea {
			display:grid; flex:1 1 auto; min-height:0; overflow:hidden;
			grid-template-rows: minmax(0, 1fr) minmax(72px, 24%);
		}
		.memoryView .memoryCurrent { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
		.memoryView .reviewHistory { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
		.operationChevron::before { transform:translate(-50%,-100%) rotate(-135deg); }
		.operationChevron::after { transform:translate(-50%,0) rotate(-135deg); }
		.sideNav .operationChevron::before { left:50%; transform:translate(-100%,-50%) rotate(-45deg); }
		.sideNav .operationChevron::after { left:50%; transform:translate(0,-50%) rotate(-45deg); }
		.panelHead { justify-content:space-between; gap:12px; }
		.panelHead .seamlessToggle {
			min-height: 34px;
			padding: 0 14px;
			gap: 0;
			border: 1px solid var(--line);
			border-radius: 999px;
			background: var(--panel);
			color: var(--ink);
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.02em;
			cursor: pointer;
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
			transition: border-color 0.16s ease, color 0.16s ease, background 0.22s ease, transform 0.16s ease, box-shadow 0.16s ease;
		}
		.panelHead .seamlessToggle.isActive {
			border-color: var(--accent);
			background: var(--accent);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(93, 78, 168, 0.40);
		}
		.panelHead .seamlessToggle .toggleSwitch,
		.panelHead .seamlessToggle .toggleLabel {
			display: none;
		}
		.panelHead .seamlessToggle::after {
			content: "无缝";
		}
		.panelHead .gyroToggle::after {
			content: "陀螺仪";
		}
		.visuallyHidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
		.panelHead .connectPill {
			min-height: 34px;
			padding: 0 14px;
			gap: 0;
			border: 1px solid var(--accent);
			border-radius: 999px;
			background: transparent;
			color: var(--accent);
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.02em;
			white-space: nowrap;
			cursor: pointer;
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
			transition: border-color 0.16s ease, color 0.16s ease, background 0.22s ease, transform 0.16s ease, box-shadow 0.16s ease;
		}
		.panelHead .connectPill.isActive {
			border-color: var(--cyan);
			background: transparent;
			color: var(--cyan);
			box-shadow: 0 2px 8px rgba(36, 240, 234, 0.28);
		}
		.panelHead .connectPill[data-state="error"] {
			border-color: var(--red);
			background: transparent;
			color: var(--red);
			box-shadow: 0 2px 8px rgba(232, 93, 106, 0.28);
		}
		.panelDrawer .actionSectionHeading,
		.panelDrawer .opGroupTitle,
		.panelDrawer .actionSubTitle,
		.panelDrawer .viewSec > h2,
		.panelDrawer .viewSec > h3,
		.panelDrawer .viewSec > p { display:none !important; }
		.actionGlobalControls { padding:12px; }
		.modeOps > .actionSectionHeading { display:none; }
		.opGroup { margin-top:8px; }

		/* ===== Mobile layout polish: mature product feel for 320px+ screens ===== */
		@media (orientation: portrait) {
			.appShell {
				--cube-size: min(calc(100vw - 16px), 30dvh);
				--mobile-gap: 6px;
				gap: 6px;
				padding: 6px 0 0;
			}
			.cubeArea {
				margin-inline: 6px;
				border-radius: 16px;
			}
			#cubeStage { padding: 3%; }
			.bottomNav {
				min-height: 56px;
				padding: 0 max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom));
				border-top-width: 1px;
				background: var(--surfaceSolid);
			}
			.bottomNav .modeNavBtn {
				min-height: 52px;
				gap: 3px;
				padding: 4px 2px;
			}
			.bottomNav .modeNavBtn .modeIcon {
				width: 26px;
				height: 26px;
				border-radius: 8px;
			}
			.bottomNav .navLabel { font-size: 11px; }
			.bottomNav .operationChevron {
				width: 40px;
				height: 40px;
			}
			.bottomNav .operationChevron::before,
			.bottomNav .operationChevron::after {
				left: 50%;
				top: 50%;
				width: 7px;
				height: 7px;
			}
			.bottomNav .operationChevron::before {
				transform: translate(-50%, -100%) rotate(-135deg);
			}
			.bottomNav .operationChevron::after {
				transform: translate(-50%, 0) rotate(-135deg);
			}
			.modeView {
				margin-inline: 6px;
				gap: 8px;
				padding: 0 0 max(8px, env(safe-area-inset-bottom));
				min-height: 0;
			}
			.modeView > .viewSec,
			.modeView > .reviewArea {
				margin: 0;
				padding: 12px;
				border-radius: 14px;
				box-shadow: 0 2px 12px rgba(20,20,36,.04);
			}
			/* Compact utility sections: merge mode select + orientation into tight rows */
			.practiceView .viewSec:first-of-type,
			.practiceView .viewSec:nth-of-type(2) {
				padding: 8px 12px;
			}
			.practiceView .viewSec:first-of-type .practiceControls {
				gap: 0;
			}
			.practiceView .viewSec:first-of-type .practiceControls > * {
				flex: 1 1 0 !important;
				min-width: 0 !important;
			}
			.practiceView .practiceModeCurrent {
				min-height: 40px;
				padding: 8px 12px;
				border-radius: 10px;
				box-shadow: none;
				font-size: 14px;
			}
			.practiceView .practiceModeOption {
				min-height: 42px;
				padding: 8px 12px;
			}
			/* Orientation moves: denser grid */
			.viewSec .moves {
				grid-template-columns: repeat(6, minmax(0, 1fr));
				gap: 6px;
			}
			.viewSec .moveButton {
				min-height: 36px;
				border-radius: 8px;
				font-size: 14px;
			}
			.viewSec .moveButton.rotation {
				font-size: 13px;
			}
			/* Main content section: fill remaining space, scroll internally */
			.practiceView #formulaImport,
			.libraryView .viewSec:last-of-type,
			.makerView .viewSec:last-of-type,
			.memoryView > .reviewArea {
				flex: 1 1 auto;
				min-height: 0;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				padding: 12px;
			}
			.practiceView #formulaImport {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
			.practiceView #formulaImport > .sharedGroupBar,
			.practiceView #formulaImport > .importDropZone,
			.practiceView #formulaImport > .controls,
			.practiceView #formulaImport > .textImport,
			.practiceView #formulaImport > .stateOptionRow,
			.practiceView #formulaImport > .practiceFormulaToggle,
			.practiceView #formulaImport > .practiceAoTimes {
				flex: 0 0 auto;
			}
			.practiceView .importDropZone {
				min-height: 44px;
				padding: 10px;
				border-radius: 10px;
				margin-bottom: 0;
				font-size: 13px;
			}
			.practiceView .controls {
				gap: 8px;
			}
			.practiceView .controls .button,
			.practiceView .controls .button.secondary {
				min-height: 40px;
				border-radius: 10px;
				font-size: 14px;
			}
			.practiceView .stateTextarea {
				min-height: 80px;
				padding: 10px;
				border-radius: 10px;
				font-size: 13px;
			}
			.practiceView .practiceAoTimes {
				grid-template-columns: repeat(4, minmax(0, 1fr));
				gap: 6px;
				margin-top: 0;
			}
			.practiceView .practiceAoTime {
				padding: 6px 4px;
				border-radius: 8px;
			}
			.practiceView .practiceAoTime span { font-size: 10px; }
			.practiceView .practiceAoTime strong { font-size: 14px; }
			.practiceView .practiceGrid {
				min-height: 0;
				flex: 1 1 auto;
				overflow-y: auto;
				overscroll-behavior: contain;
				align-content: start;
				gap: 10px;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				padding-bottom: 4px;
			}
			.practiceView .practiceGrid::-webkit-scrollbar { display: none; }
			.practiceView .stateCard {
				min-height: 130px;
				padding: 10px 8px;
				border-radius: 12px;
				gap: 6px;
			}
			.practiceView .statePreview {
				height: 80px;
			}
			.practiceView .statePreview > div {
				width: 76px;
				height: 76px;
			}
			.practiceView .stateCard strong,
			.practiceView .stateCard .stateName {
				font-size: 13px;
				line-height: 1.3;
			}
			/* Shared group bar */
			.sharedGroupBar {
				gap: 6px;
				margin-bottom: 0;
			}
			.memoryLibrarySelector,
			.memoryLibraryCurrent {
				min-height: 38px;
				border-radius: 10px;
			}
			.memoryLibraryIconBtn {
				width: 34px;
				height: 34px;
				border-radius: 8px;
			}
			/* Library panel */
			.libraryView .libraryList {
				min-height: 0;
				flex: 1 1 auto;
				overflow-y: auto;
				overscroll-behavior: contain;
				margin-top: 8px;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
			}
			.libraryView .libraryList::-webkit-scrollbar { display: none; }
			.libraryView .libraryItem { border-radius: 12px; }
			.libraryView .libraryHeader { min-height: 44px; padding: 10px 12px; }
			/* Formula panel */
		.makerView .draftList {
			min-height: 0;
			flex: 1 1 auto;
			overflow-y: auto;
			overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			align-content: start;
		}
			.makerView .draftList::-webkit-scrollbar { display: none; }
			.makerView .formulaRow { gap: 8px; }
			.makerView .formulaNameInput,
			.makerView .formulaAlgInput,
			.makerView .formulaTrack { min-height: 40px; border-radius: 10px; font-size: 14px; }
			.makerView .formulaIconButton,
			.makerView .formulaAddButton { min-height: 40px; border-radius: 10px; }
			/* Memory panel */
			.memoryView > .reviewArea {
				display: grid;
				grid-template-rows: minmax(0, 1fr) minmax(90px, 22%);
				gap: 8px;
				padding: 0;
				border: none;
				background: transparent;
				box-shadow: none;
			}
			.memoryView .memoryCurrent { padding: 20px 12px 12px; gap: 10px; }
			.memoryView .memoryPrompt { min-height: 100px; font-size: 16px; padding: 16px; border-radius: 12px; }
			.memoryView .memoryAnswerName { font-size: 16px; }
			.memoryView .memoryAnswerFormula { font-size: 20px; }
			.memoryView .memoryOptions { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
			.memoryView .memoryOption { min-height: 44px; border-radius: 10px; font-size: 12px; }
			.memoryView .reviewHistory { padding: 10px; border-radius: 0 0 14px 14px; }
			.memoryLibraryBar { margin: 0; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); box-shadow: 0 2px 12px rgba(20,20,36,.04); }
		}

		@media (orientation: landscape) {
			.appShell {
				--cube-size: min(calc(100dvh - var(--site-nav-height,0px) - 20px), 40vw);
				gap: 8px;
				padding: 8px 8px 8px 0;
			}
			.cubeArea {
				border-radius: 16px;
			}
			.sideNav {
				border-radius: 0 14px 14px 0;
				width: 58px;
			}
			body.railExpanded .sideNav { width: 148px; }
			.modeNavBtn { padding: 6px 8px; }
			.modeNavBtn .modeIcon { width: 26px; height: 26px; border-radius: 8px; }
			.sideNav .operationChevron { width: 36px; height: 36px; }
			.modeView {
				gap: 8px;
				padding: 0 4px 8px;
				min-height: 0;
			}
			.modeView > .viewSec,
			.modeView > .reviewArea {
				margin: 0;
				padding: 12px;
				border-radius: 14px;
			}
			.practiceView .viewSec:first-of-type,
			.practiceView .viewSec:nth-of-type(2) {
				padding: 8px 12px;
			}
			.viewSec .moves { gap: 6px; }
			.viewSec .moveButton { min-height: 34px; font-size: 13px; }
			.practiceView #formulaImport,
			.libraryView .viewSec:last-of-type,
			.makerView .viewSec:last-of-type {
				flex: 1 1 auto;
				min-height: 0;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}
			.practiceView #formulaImport {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
			.practiceView .practiceGrid {
				flex: 1 1 auto;
				min-height: 0;
				overflow-y: auto;
				overscroll-behavior: contain;
				align-content: start;
				grid-template-columns: repeat(3, minmax(0,1fr));
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
			}
			.practiceView .practiceGrid::-webkit-scrollbar { display: none; }
		}

		/* Small screen extra tightening (very narrow/short phones) */
		@media (orientation: portrait) and (max-height: 680px) {
			.appShell { --cube-size: min(calc(100vw - 12px), calc((100dvh - var(--site-nav-height, 0px) - 56px) * 0.43)); --mobile-gap: 5px; gap: 5px; padding: 5px 0 0; }
			.bottomNav { min-height: 50px; }
			.bottomNav .modeNavBtn { min-height: 46px; }
			.practiceView .statePreview { height: 68px; }
			.practiceView .statePreview > div { width: 64px; height: 64px; }
			.practiceView .stateCard { min-height: 108px; padding: 8px 6px; gap: 4px; }
			.modeView > .viewSec,
			.modeView > .reviewArea { padding: 10px; }
			.practiceView #formulaImport { padding: 10px; gap: 6px; }
			.practiceView .importDropZone { min-height: 38px; padding: 8px; font-size: 12px; }
			.practiceView .controls .button,
			.practiceView .controls .button.secondary { min-height: 36px; font-size: 13px; }
			.practiceView .stateTextarea { min-height: 60px; padding: 8px; font-size: 12px; }
			.practiceView .practiceAoTimes { gap: 4px; }
			.practiceView .practiceAoTime { padding: 4px 2px; }
			.practiceView .practiceAoTime strong { font-size: 13px; }
		}
	
		/* Consolidated mobile layout: one responsive system for panels, cards and drawers. */
		.modeView > .viewSec { border-bottom: 0; }
		.libraryView > .viewSec:has(.libraryList),
		.makerView > .viewSec:has(.draftList) {
			display: flex;
			flex: 1 1 auto;
			min-height: 0;
			flex-direction: column;
			overflow: hidden;
		}
		.libraryView .libraryList,
		.makerView .draftList {
			flex: 1 1 auto;
			min-height: 0;
			overflow-x: hidden;
			overflow-y: auto;
			overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
		}
		.libraryView .libraryList { display: block; }
		.libraryView .libraryItem + .libraryItem { margin-top: 8px; }

		/* Drawer sections are spacing groups, not cards around cards. */
		.panelDrawer .opGroup {
			margin: 16px 16px 0;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
			overflow: visible;
		}
		.panelDrawer .opGroup:first-child { margin-top: 12px; }
		.panelDrawer .opGroupBody { padding: 0; }
		.panelDrawer .opGroupBody > .viewSec {
			padding: 0;
			border: 0;
			background: transparent;
		}
		.opGroupBody .button,
		.opGroupBody input,
		.opGroupBody .memoryLibraryCurrent,
		.opGroupBody .memoryLibraryIconBtn { min-height: 44px; }
		.strictDetectionControls {
			display: flex;
			grid-template-columns: none;
			margin-top: 10px;
		}
		.strictDetectionToggle {
			width: 100%;
			min-height: 44px;
			justify-content: flex-start;
			padding: 0 2px;
			font-weight: 700;
		}

		/* Cards keep equal gutters and choose their own column count. */
		.practiceView .practiceGrid {
			grid-template-columns: repeat(auto-fit, minmax(132px, 168px));
			grid-auto-rows: max-content;
			justify-content: center;
			align-content: start;
			gap: 12px;
			margin-top: 2px;
		}
		.practiceView .stateCard {
			display: grid;
			grid-template-rows: 82px auto;
			min-width: 0;
			min-height: 130px;
			height: auto;
			padding: 10px;
			gap: 6px;
			border-radius: 14px;
			box-shadow: none;
		}
		.practiceView .statePreview {
			display: grid;
			width: 100%;
			height: 82px;
			min-height: 82px;
			place-items: center;
			aspect-ratio: auto;
		}
		.practiceView .statePreview > div {
			width: 78px;
			height: 78px;
			margin: 0 auto;
		}

		@media (orientation: portrait) {
			.appShell {
				--cube-size: min(calc(100vw - 20px), calc((100dvh - var(--site-nav-height, 0px) - 64px) * .43));
				grid-template-rows: var(--cube-size) minmax(0, 1fr) auto;
				gap: 8px;
				padding-top: 8px;
			}
			.cubeArea { margin-inline: 10px; border-radius: 16px; }
			.modeView { margin-inline: 6px; gap: 10px; padding-bottom: 10px; }
			.modeView > .viewSec,
			.modeView > .reviewArea,
			.memoryLibraryBar {
				border-radius: 16px;
				box-shadow: 0 4px 16px rgba(20, 20, 36, .055);
			}
			.practiceView #formulaImport,
			.libraryView > .viewSec:has(.libraryList),
			.makerView > .viewSec:has(.draftList) { padding: 14px; }
			.practiceView .practiceGrid,
			.libraryView .libraryList,
			.makerView .draftList { min-height: 128px; }
			.practiceView .practiceFormulaToggle {
				min-height: 30px;
				justify-content: center;
			}
			.practiceView .practiceAoTime {
				border-color: color-mix(in srgb, var(--line) 66%, transparent);
				background: color-mix(in srgb, var(--controlBg) 88%, var(--accentSoft));
			}
			.libraryView .libraryList,
			.makerView .draftList { align-content: start; padding-bottom: 4px; }
			.libraryView .libraryList { margin-top: 10px; }
			.libraryView .libraryItem { border-radius: 14px; }
			.libraryView .libraryHeader,
			.libraryView .libraryFormulaRow { min-height: 48px; }
			.makerView .draftList { gap: 10px; }
			.makerView .formulaRow:not(.isOrganizing) {
				grid-template-columns: minmax(0, 1fr);
				gap: 8px;
				padding: 10px;
				border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
				border-radius: 14px;
				background: var(--controlBg);
			}
			.makerView .formulaRow:not(.isOrganizing) .formulaTrack { grid-column: 1; }
			.makerView .formulaNameInput,
			.makerView .formulaAlgInput,
			.makerView .formulaTrack,
			.makerView .formulaIconButton,
			.makerView .formulaAddButton,
			.makerView .formulaOrganizeButton { min-height: 44px; }
			.memoryView > .reviewArea {
				gap: 10px;
				border: 0;
				background: transparent;
				box-shadow: none;
			}
			.memoryView .memoryCurrent,
			.memoryView .reviewHistory {
				border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
				border-radius: 16px;
				background: var(--surface);
				box-shadow: 0 4px 16px rgba(20, 20, 36, .055);
			}
			.memoryView .reviewHistory { padding: 10px 12px; }
			.bottomNav {
				min-height: 60px;
				padding-bottom: max(4px, env(safe-area-inset-bottom));
			}
			.bottomNav .modeNavBtn { min-height: 56px; }

			/* Bottom sheet: flush to the viewport, rounded only on the leading edge. */
			.panelOverlay { align-items: flex-end; padding: 0; }
			.panelDrawer {
				position: relative;
				display: flex;
				width: 100%;
				height: auto;
				max-height: min(86dvh, 760px);
				border-radius: 20px 20px 0 0;
				overflow: hidden;
			}
			.panelHead {
				min-height: 58px;
				padding: 0 16px 10px;
			}
			.actionGlobalControls {
				padding: 12px 14px;
			}
		}

		@media (orientation: landscape) {
			.appShell {
				grid-template-columns: 58px var(--cube-size) minmax(0, 1fr);
				padding-left: 0;
			}
			.sideNav {
				width: 58px;
				height: calc(100dvh - var(--site-nav-height, 0px));
				margin-block: -8px;
				border-width: 0 1px 0 0;
				border-radius: 0;
			}
			body.railExpanded .sideNav { width: 148px; }
			.libraryView > .viewSec:has(.libraryList),
			.makerView > .viewSec:has(.draftList),
			.practiceView #formulaImport { height: 100%; padding: 14px; }
			.libraryView .libraryList,
			.makerView .draftList,
			.practiceView .practiceGrid { min-height: 120px; }
			.practiceView .practiceGrid {
				grid-template-columns: repeat(auto-fit, minmax(116px, 144px));
				justify-content: center;
				gap: 10px;
			}
			.practiceView .stateCard {
				grid-template-rows: 68px auto;
				min-height: 108px;
				padding: 8px;
			}
			.practiceView .statePreview { height: 68px; min-height: 68px; }
			.practiceView .statePreview > div { width: 64px; height: 64px; }

			/* Side drawer: full height, flush left, rounded only on its exposed side. */
			.panelOverlay {
				left: 0;
				right: 0;
				align-items: stretch;
				padding: 0;
			}
		.panelDrawer {
			position: relative;
			display: flex;
			flex-direction: row-reverse;
			width: min(440px, 78vw);
			height: 100%;
		max-height: none;
		padding-right: 26px; /* �� handle ռλ�������� content ���� ::before �ṩ */
		background: var(--bg);
		padding-right: 0;
		border-radius: 0 18px 18px 0;
		overflow: hidden;
		transform: translateX(-100%);
		}
		/* �Ҳ�ײ㽥�����handle ��� 62px(surfaceSolid��bg) + handle �� bg��
		   �� content �Ҳ�͸��������Ȼ͸�������������� */
		/* Right-side gradient band: sits LEFT of the 26px handle (right:26px), width 62px (= header height).
		   z-index:-1 keeps it below content (drawer transform forms a stacking context, so the negative
		   layer paints above the drawer bg but under content); revealed through the body's right 62px
		   transparent cut. content:""!important overrides the content:none!important inside the 900px block. */
		.panelMain::before {
			content: "" !important;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;
			width: 62px;
			background: linear-gradient(to left, var(--surfaceSolid), var(--bg));
			pointer-events: none;
		}
		.panelMain { width: auto; }
		.panelOverlay.isOpen .panelDrawer { transform: translateX(0); }
		.panelHead { width: 100%; }
		.panelContent {
			flex: 1 1 auto;
			min-width: 0;
			min-height: 0;
			width: 100%;
			background: linear-gradient(to right, var(--bg) 0, var(--bg) calc(100% - 62px), transparent calc(100% - 62px));
		}

		.panelHandle {
			--drawer-handle-width: 26px;
			--drawer-handle-height: 100%;
			--drawer-grip-width: 5px;
			--drawer-grip-height: 44px;
			--drawer-grip-hover-width: 5px;
			--drawer-grip-hover-height: 54px;
			/* Normal-flow flex item;
			   no overlay or reserved track.
			*/
		}
		}

		@media (orientation: portrait) and (max-height: 680px) {
			.practiceView #formulaImport {
				display: grid;
				grid-template-columns: minmax(0, 1fr) auto;
				grid-template-rows: auto auto minmax(96px, 1fr);
				gap: 4px 8px;
			}
			.practiceView .practiceFormulaToggle {
				grid-column: 1 / -1;
				grid-row: 1;
				min-height: 20px;
				justify-content: flex-start;
			}
			.practiceView .practiceAoTimes { grid-column: 1 / -1; grid-row: 2; }
			.practiceView .practiceGrid {
				grid-column: 1 / -1;
				grid-row: 3;
				grid-template-columns: repeat(auto-fit, minmax(124px, 142px));
				min-height: 96px;
				justify-content: center;
				gap: 10px;
			}
			.practiceView .stateCard {
				grid-template-rows: 52px auto;
				min-height: 90px;
				height: 90px;
				padding: 6px;
			}
			.practiceView .statePreview,
			.practiceView .statePreview > div {
				width: 52px;
				height: 52px;
				min-height: 52px;
			}
		}

/* Unified action information architecture. */
.modeOpsBody {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px max(20px, env(safe-area-inset-bottom));
}
.panelDrawer .opGroup {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.panelDrawer .opGroupBody {
	display: grid;
	gap: 10px;
	padding: 0;
}
.panelDrawer .opGroupBody > * { margin: 0; }
.panelDrawer .opGroupBody > .viewSec {
	padding: 0;
	border: 0;
	background: transparent;
}
.panelDrawer .strictDetectionControls { margin-top: 10px; }
.panelDrawer .strictDetectionToggle {
	min-height: 44px;
	padding: 0 2px;
	font-weight: 700;
}
.panelDrawer .macHelp.isVisible {
	padding: 12px 0;
	border: 0;
	background: transparent;
}

/* One overlay lifecycle, two dialog families: quick sheets and work sheets. */
.mobileOverlayHost,
.formulaExportOverlay,
.customStateOverlay,
.groupPicker,
.memoryOverlay {
	z-index: 1200;
	background: rgba(8, 8, 15, .58);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.formulaExportDialog,
.customStateDialog,
.groupPickerBox,
.memoryDialog {
	border-color: color-mix(in srgb, var(--line) 78%, transparent);
	background: var(--surfaceSolid);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .30);
}
.formulaExportDialog,
.customStateDialog,
.groupPickerBox,
.memoryDialog {
	position: relative;
}
.formulaExportHeader,
.customStateHeader,
.memoryDialogHeader {
	flex: 0 0 auto;
	min-height: 58px;
	padding: 14px 16px;
	border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.formulaExportHeader strong,
.customStateHeader strong,
.memoryDialogHeader strong { font-size: 17px; }
.formulaExportActions,
.customStateActions,
.memoryDialogActions {
	flex: 0 0 auto;
	gap: 10px;
	padding: 12px 16px max(12px, env(safe-area-inset-bottom));
	border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
	background: var(--surfaceSolid);
}
.formulaExportActions .button,
.customStateActions .button,
.memoryDialogActions .button { min-height: 44px; }
.formulaExportText {
	min-height: 0;
	padding: 16px;
	resize: none;
	font-size: 14px;
	line-height: 1.6;
}
.groupPickerActions { gap: 10px; }
.groupPickerActions .button { min-height: 46px; }
.memoryDialog {
	overflow: hidden;
}
.memoryDialog > p {
	padding: 0 16px;
	line-height: 1.6;
}
.memoryPlanDialog .memoryFormulaListWrap {
	min-height: 0;
	border-radius: 12px;
}
.memoryDialogBottom {
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid var(--line);
	border-bottom: 0;
}

@media (orientation: portrait) {
	.formulaExportOverlay,
	.customStateOverlay,
	.groupPicker,
	.memoryOverlay {
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}
	.formulaExportDialog,
	.customStateDialog,
	.groupPickerBox,
	.memoryDialog {
		width: 100%;
		max-width: none;
		max-height: calc(100dvh - var(--site-nav-height, 0px) - 12px);
		margin: 0;
		border-width: 1px 0 0;
		border-radius: 22px 22px 0 0;
		transform: translateY(26px);
	}
	.formulaExportOverlay.isOpen .formulaExportDialog,
	.customStateOverlay.isOpen .customStateDialog,
	.groupPicker.isOpen .groupPickerBox,
	.memoryOverlay.isOpen .memoryDialog { transform: translateY(0); }
	.formulaExportDialog::before,
	.customStateDialog::before,
	.groupPickerBox::before,
	.memoryDialog::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		z-index: 2;
		width: 42px;
		height: 5px;
		border-radius: 999px;
		background: color-mix(in srgb, var(--muted) 38%, transparent);
		transform: translateX(-50%);
	}
	.formulaExportHeader,
	.customStateHeader,
	.memoryDialogHeader { padding-top: 24px; }
	.groupPickerBox { padding: 30px 18px max(18px, env(safe-area-inset-bottom)); }
	.formulaExportDialog {
		height: min(86dvh, 760px);
		grid-template-rows: auto minmax(0, 1fr) auto;
	}
	.customStateDialog {
		height: min(90dvh, 780px);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
	}
	.customCubeStage { min-height: 0; }
	.memoryPlanDialog {
		height: min(92dvh, 820px);
		padding: 24px 16px max(16px, env(safe-area-inset-bottom));
	}
	.memoryPlanDialog::before { top: 8px; }
	.memoryPlanDialog .memoryDialogHeader,
	.memoryPlanDialog .memoryDialogActions { margin-inline: -16px; padding-inline: 16px; }
	.memoryDialog:not(.memoryPlanDialog) {
		padding: 24px 16px max(16px, env(safe-area-inset-bottom));
	}
	.memoryDialog:not(.memoryPlanDialog) .memoryDialogHeader,
	.memoryDialog:not(.memoryPlanDialog) .memoryDialogActions {
		margin-inline: -16px;
		padding-inline: 16px;
	}
	.formulaExportActions,
	.customStateActions { flex-wrap: wrap; }
	.formulaExportActionsRight,
	.customStateActionRight { flex: 1 1 auto; }
}

@media (orientation: landscape) {
	.keyDrawer { --keyboard-key-size: min(60px, calc((100dvh - 55px) / 6)); }
	.formulaExportOverlay,
	.customStateOverlay,
	.groupPicker,
	.memoryOverlay {
		align-items: center;
		justify-content: center;
		padding: 16px;
	}
	.formulaExportDialog,
	.customStateDialog,
	.memoryPlanDialog {
		width: min(760px, 92vw);
		height: calc(100dvh - var(--site-nav-height, 0px) - 32px);
		max-height: 680px;
		border-radius: 18px;
	}
	.groupPickerBox,
	.memoryDialog:not(.memoryPlanDialog) {
		width: min(440px, 92vw);
		max-height: calc(100dvh - var(--site-nav-height, 0px) - 32px);
		border-radius: 18px;
	}
	.customStateDialog { grid-template-rows: auto minmax(0, 1fr) auto auto; }
	.customCubeStage { min-height: 0; }
}

@media (max-width: 420px) {
	.formulaExportActions,
	.customStateActions,
	.memoryDialogActions { align-items: stretch; }
	.formulaExportActionsRight,
	.customStateActionRight {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}
}

@media (orientation: portrait) {
	.formulaExportOverlay,
	.customStateOverlay,
	.groupPicker,
	.memoryOverlay { display: flex; }
	.formulaExportDialog,
	.customStateDialog,
	.groupPickerBox,
	.memoryDialog {
		min-width: 100%;
		justify-self: stretch;
	}
	.formulaExportActions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.formulaExportActionsRight { display: contents; }
	.customStateActions {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
	.customStateActionRight {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.memoryDialogActions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.panelDrawer .importDropZone { display: none; }
.opGroup-help:not(:has(.macHelp.isVisible)) { display: none; }

/* ѵ��ģʽ��Ƭ���֣�Ȩ��"���ղþ�"��Դ��λ��ȫ�� @media ֮�󣩣�
   �ռ������(JS)����Ƭ����ħ������=��Ƭ���ݿ���������������(��������)
   ����Ƭ��=ħ����+���ָ�(�����ݳſ�����������)��
   ǰ��� @media �ϵ���д���� padding / height / min-height / statePreview
   �ߴ�ͳһ�ڴ��տڣ������ļ��ڲ�����ì�ܡ������ !important����ѹ��
   JS ��������ʽ������ħ���ߴ�ʧЧ���� */
.practiceView .practiceGrid {
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.practiceView .stateCard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 14px;
	gap: 8px;
	height: auto;
	min-height: 0;
}
.practiceView .statePreview {
	display: grid;
	width: 100%;
	height: auto;
	place-items: center;
	padding: 0;
	border-top: 0;
}
.practiceView .statePreview > div {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
}

/* ������壨Ȩ��"���ղþ�"��Դ��λ��ȫ�� @media ֮�󣩣�
   ����ڲ������κηָ��ߡ�����ʾ Group ���⡢Group �ޱ߿򣨽��������飬�����򣩡�
   �� !important ����ǰ��� @media �ϵ�������� border / background / ���⡣
   ��ť��connectPill / seamlessToggle / .button �ȣ�һ�ɲ����� */
.panelDrawer .opGroup {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.panelDrawer .opGroupTitle { display: none !important; }
.modeOpsBody > .viewSec,
.panelDrawer .opGroupBody > .viewSec {
	border: 0 !important;
	background: transparent !important;
}

/* ����ڱ߿�������Ȩ��"���ղþ�"��λ��ȫ�� @media ֮�󣩣�
   ������嶥��ȫ�ֿ�������actionGlobalControls��ȥ�������ɫ�����������
   ��ƽ���һ�£���ʽ��������������memoryLibraryBar / sharedGroupBar��ȥ���߿�
   ����Ӱ��sharedGroupBar ���� memoryLibraryBar �࣬��һ���տڡ���ťһ�ɲ����� */
.panelDrawer .actionGlobalControls {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.memoryLibraryBar,
.sharedGroupBar {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ������屳��ͳһ��Ȩ��"���ղþ�"��λ��ȫ�� @media ֮�󣩣�
   globalOps �� modeOpsBody ����ɫͳһΪ --bg��
   panelHead�����������½���(�϶� --surfaceSolid �� �¶� --bg)��
   ������ƽ(�� --bg����Ҫ����)�� */
.panelDrawer .globalOps,
.panelDrawer .modeOpsBody {
	background: var(--bg) !important;
}
/* �����������������Ҳ� 62px ͸������͸������ײ㽥��� */
@media (orientation: landscape) {
	.panelDrawer .globalOps,
	.panelDrawer .modeOps,
	.panelDrawer .modeOpsBody {
		background: linear-gradient(to right, var(--bg) 0, var(--bg) calc(100% - 62px), transparent calc(100% - 62px)) !important;
	}
}
/* ������header ���� */
@media (orientation: portrait) {
	.panelDrawer .panelHead {
		background: linear-gradient(to bottom, var(--surfaceSolid), var(--bg)) !important;
	}
}
/* ������header ��ƽ�����ý��� */
@media (orientation: landscape) {
	.panelDrawer .panelHead {
		background: linear-gradient(to right, var(--bg) 0, var(--bg) calc(100% - 62px), transparent calc(100% - 62px)) !important;
	}
}

/* Inline control-panel tools and unified prompts. */
.inlineBox {
	width: 100%;
	max-height: 0;
	margin-top: 0;
	overflow: clip;
	opacity: 0;
	transform: translateY(-10px);
	transition: max-height .34s cubic-bezier(.2,.8,.2,1), margin-top .28s ease, opacity .22s ease, transform .28s ease;
}
.inlineBox.isOpen {
	max-height: 2400px;
	margin-top: 12px;
	opacity: 1;
	transform: translateY(0);
}
.inlineCard,
.memoryPlanEditCard,
.appPromptCard,
.appNoticeCard {
	border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
	border-radius: 16px;
	background: color-mix(in srgb, var(--surfaceSolid) 96%, var(--accent) 4%);
	box-shadow: 0 14px 38px rgba(0, 0, 0, .16);
	overflow: hidden;
}
.globalOps > .inlineBox,
.panelDrawer .viewSec > .inlineBox { grid-column: 1 / -1; }
.customStateInline .customCubeStage { min-height: 300px; height: 42dvh; max-height: 420px; }
.formulaExportInline .inlineCard { display: grid; grid-template-rows: auto minmax(210px, 1fr) auto; }
.formulaExportInline .formulaExportText { min-height: 220px; max-height: 42dvh; resize: vertical; }
.formulaExportInline .formulaExportActions { flex-wrap: wrap; }
.planBox,
.memoryPlanEditHost { width: 100%; }
.memoryPlanInline .memoryDialog {
	width: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 16px;
	border-radius: 16px;
	transform: none;
}
.memoryPlanInline .memoryDialogHeader,
.memoryPlanInline .memoryDialogActions { margin-inline: 0; padding-inline: 0; }
.memoryPlanInline .memoryFormulaListWrap { flex: none; height: min(42dvh, 420px); }
.memoryPlanEditExpansion.isOpen { max-height: 720px; }
.memoryPlanEditCard { margin-top: 2px; padding: 14px; }
.memoryPlanEditCard .memoryDialogHeader,
.memoryPlanEditCard .memoryDialogActions { padding: 0; border: 0; }
.memoryPlanEditCard > p { margin: 12px 0; color: var(--muted); line-height: 1.55; }
.memoryPlanEditCard .memoryPlanTextarea { min-height: 240px; max-height: 40dvh; }

.appNoticeOverlay,
.groupPicker {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: grid;
	place-items: center;
	padding: 18px;
	background: rgba(8, 8, 15, .42);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	opacity: 0;
	transition: opacity .18s ease;
}
.appNoticeOverlay.isOpen,
.groupPicker.isOpen { opacity: 1; }
.appNoticeCard,
.groupPickerBox {
	width: min(430px, 100%);
	padding: 18px;
	opacity: 0;
	transform: translateY(10px) scale(.97);
	transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.appNoticeOverlay.isOpen .appNoticeCard,
.groupPicker.isOpen .groupPickerBox {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.appNoticeCard { display: flex; align-items: flex-start; gap: 13px; }
.appNoticeIcon,
.groupPickerIcon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	position: relative;
}
.appNoticeIcon::after,
.groupPickerIcon::after {
	content: "i";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--accent);
	font-weight: 900;
}
.appNoticeCard.isWarning { border-color: color-mix(in srgb, var(--orange, #e6b84a) 55%, var(--line)); }
.appNoticeCard.isWarning .appNoticeIcon { background: color-mix(in srgb, var(--orange, #e6b84a) 20%, transparent); }
.appNoticeCard.isWarning .appNoticeIcon::after { content: "!"; color: var(--orange, #e6b84a); }
.appNoticeContent { flex: 1 1 auto; min-width: 0; }
.appNoticeTitle { display: block; padding-top: 3px; font-size: 16px; }
.appNoticeMessage { margin: 9px 0 16px; color: var(--muted); line-height: 1.55; white-space: pre-line; }
.appNoticeActions { display: flex; justify-content: flex-end; gap: 8px; }
.appNoticeCard.isWarning .appNoticeConfirm { background: var(--orange, #e6b84a); border-color: var(--orange, #e6b84a); color: #17130a; }

.groupPickerBox { max-width: 430px; }
.groupPickerLead { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.groupPickerTitle { margin: 2px 0 5px; font-size: 17px; font-weight: 750; }
.groupPickerDesc { margin: 0; color: var(--muted); font-size: 13px; opacity: 1; }
.groupPickerActions { gap: 9px; }
.formulaAddCurrent { display: flex; align-items: center; justify-content: space-between !important; gap: 12px; padding-inline: 14px; }
.formulaAddCurrent strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formulaAddOtherList {
	display: grid;
	gap: 6px;
	max-height: 0;
	margin: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .26s ease, margin .22s ease, opacity .2s ease;
}
.formulaAddOtherList.isOpen { max-height: 260px; margin: 2px 0; overflow-y: auto; opacity: 1; }
.formulaAddCancel { border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; }

@media (max-width: 520px) {
	.appNoticeOverlay,
	.groupPicker { align-items: end; padding: 12px; }
	.appNoticeCard,
	.groupPickerBox { width: 100%; border-radius: 18px; }
	.appNoticeActions { display: grid; grid-template-columns: 1fr 1fr; }
	.customStateInline .customCubeStage { height: 340px; min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
	.inlineBox,
	.appNoticeOverlay,
	.appNoticeCard,
	.groupPicker,
	.groupPickerBox { transition-duration: .01ms !important; }
}

/* Manual keyboard: fixed corner trigger plus responsive drawer. */
.keyToggle {
	position: absolute;
	z-index: 32;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--controlBorder) 88%, transparent);
	border-radius: 50%;
	background: var(--surfaceSolid);
	color: var(--controlText);
	box-shadow: 0 8px 24px rgba(20, 20, 36, .14);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background .18s ease, transform .22s ease;
}
.keyToggle:hover,
.keyToggle[aria-expanded="true"] {
	border-color: color-mix(in srgb, var(--accent) 72%, var(--controlBorder));
	background: var(--controlHoverBg);
	color: var(--accent);
}
.keyToggle:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.keyToggle svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.keyboardControlRow {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
	justify-content: center;
}
.keyBackspace,
.keyShiftIcon {
	width: var(--keyboard-key-size);
	height: var(--keyboard-key-size);
	min-width: var(--keyboard-key-size);
	min-height: var(--keyboard-key-size);
	padding: 0;
	border: 1px solid var(--controlBorder);
	border-radius: 8px;
	background: var(--controlBg);
	color: var(--controlText);
	cursor: pointer;
	transition: transform 0.12s ease, border-color 0.14s ease, color 0.14s ease, background 0.22s ease;
}
.keyBackspace:hover,
.keyBackspace:focus-visible,
.keyShiftIcon:hover,
.keyShiftIcon:focus-visible {
	border-color: rgba(36, 240, 234, 0.7);
	background: var(--controlHoverBg);
	transform: translateY(-1px);
}
.keyShiftIcon.isActive {
	border-color: color-mix(in srgb, var(--accent) 72%, var(--controlBorder));
	background: var(--controlHoverBg);
	color: var(--accent);
}
.keyBackspace svg,
.keyShiftIcon svg {
	width: 22px;
	height: 22px;
	color: currentColor;
	pointer-events: none;
}

.keyDrawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1100;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	min-height: 0;
	border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
	border-radius: 18px 18px 0 0;
	background: var(--surfaceSolid);
	box-shadow: 0 18px 44px rgba(20, 20, 36, .18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(100%);
	transition: width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, visibility .18s ease;
}
.keyDrawer.isOpen {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.keyDrawer.isDragging { transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, visibility .18s ease; }

.keyHandle {
	--drawer-handle-width: 100%;
	--drawer-handle-height: 26px;
	--drawer-grip-width: 44px;
	--drawer-grip-height: 5px;
	--drawer-grip-hover-width: 54px;
	--drawer-grip-hover-height: 5px;
	position: relative;
	display: grid;
	flex: 0 0 auto;
	width: var(--drawer-handle-width);
	height: var(--drawer-handle-height);
	place-items: center;
	padding: 0;
	border: 0;
	background: var(--surfaceSolid);
	cursor: grab;
	touch-action: none;
}
.keyHandle:active { cursor: grabbing; }
.keyHandle::before {
	content: "";
	width: var(--drawer-grip-width);
	height: var(--drawer-grip-height);
	border-radius: 999px;
	background: color-mix(in srgb, var(--muted) 45%, transparent);
	transition: width .18s ease, height .18s ease, background .18s ease;
}
.keyHandle:hover::before,
.keyHandle:focus-visible::before {
	width: var(--drawer-grip-hover-width);
	height: var(--drawer-grip-hover-height);
	background: var(--accent);
}

.keyBody {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	overscroll-behavior: contain;
	scrollbar-width: none;
}
.keyBody::-webkit-scrollbar { display: none; }
.keyBody > .viewSec { flex: 0 0 auto; margin: 0; padding: 8px 10px 10px; border: 0; background: transparent; box-shadow: none; }
.keyDrawer .moves { display: flex; width: min(100%, 720px); margin: 0 auto; flex-direction: column; gap: 7px; }
.keyboardExtraMoves,
.keyboardRotationMoves,
.keyboardControlRow { display: grid; gap: 7px; }
.keyDrawer:not(.isLarge) .keyboardExtraMoves { display: none; }
.keyDrawer.isPreviewLarge .keyboardExtraMoves { display: grid; }
.keyboardExtraMoves,
.keyboardRotationMoves,
.keyboardControlRow { align-items: stretch; }
.keyboardExtraMoves { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.keyboardRotationMoves { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.keyboardControlRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.keyDrawer .moveButton {
	width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	aspect-ratio: 1;
	box-sizing: border-box;
}
.keyDrawer .keyboardControlRow .moveButton {
	aspect-ratio: auto;
}
.keyDrawer .moveButton.rotation {
	background: var(--rotationBg);
	color: var(--rotationText);
	border-color: rgba(93, 78, 168, 0.42);
}

@media (orientation: portrait) {
	.keyToggle { grid-column: 1; grid-row: 2; top: 0; right: auto; bottom: auto; left: 6px; margin: 0; transform: translateY(calc(-100% - 10px)); }
	.keyToggle:hover,
	.keyToggle:focus-visible,
	.keyToggle[aria-expanded="true"] { transform: translateY(calc(-100% - 10px)) scale(1.04); }
	.keyHandle { --drawer-handle-height: 32px; }
	.keyDrawer { height: auto; }
	.keyBody { flex: 0 0 auto; }
	.keyDrawer.isDragging .keyBody { flex: 1 1 auto; }
}

@media (orientation: landscape) {
	.keyToggle { grid-column: 3; grid-row: 1; top: auto; right: auto; bottom: 16px; left: 0; margin: 0; transform: translateX(calc(-100% - 10px)); }
	.keyToggle:hover,
	.keyToggle:focus-visible,
	.keyToggle[aria-expanded="true"] { transform: translateX(calc(-100% - 10px)) scale(1.04); }
	.keyDrawer {
		left: auto;
		right: 0;
		top: 0;
		bottom: 0;
		width: max-content;
		height: 100%;
		flex-direction: row;
		border-radius: 18px 0 0 18px;
		transform: translateX(100%);
	}
	.keyDrawer.isOpen { transform: translateX(0); }
	.keyHandle {
		--drawer-handle-width: 32px;
		--drawer-handle-height: 100%;
		--drawer-grip-width: 5px;
		--drawer-grip-height: 44px;
		--drawer-grip-hover-width: 5px;
		--drawer-grip-hover-height: 54px;
	}
	.keyBody { flex-direction: row; align-items: stretch; }
	.keyBody > .viewSec { display: flex; width: 100%; padding: 10px; justify-content: flex-end; }
	.keyDrawer .moves { width: max-content; min-width: max-content; height: 100%; margin: 0; flex-direction: row; align-items: stretch; }
	.keyboardExtraMoves,
	.keyboardRotationMoves { grid-template-rows: repeat(6, var(--keyboard-key-size)); grid-auto-flow: column; grid-auto-rows: var(--keyboard-key-size); }
	.keyboardExtraMoves {
		width: calc(3 * var(--keyboard-key-size) + 14px);
		grid-template-columns: repeat(3, var(--keyboard-key-size));
		grid-auto-columns: var(--keyboard-key-size);
		flex: 0 0 calc(3 * var(--keyboard-key-size) + 14px);
	}
	.keyboardRotationMoves { width: var(--keyboard-key-size); flex: 0 0 var(--keyboard-key-size); }
	.keyboardRotationMoves .moveButton.rotation {
		width: var(--keyboard-key-size);
		height: var(--keyboard-key-size);
		min-width: var(--keyboard-key-size);
		min-height: var(--keyboard-key-size);
		border-radius: 8px;
		font-size: 14px;
	}
	.keyboardControlRow {
		grid-template-rows: repeat(2, var(--keyboard-key-size));
		grid-template-columns: var(--keyboard-key-size);
		justify-content: flex-end;
		width: var(--keyboard-key-size);
		flex: 0 0 var(--keyboard-key-size);
		gap: 7px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.keyDrawer,
	.keyToggle { transition-duration: .01ms !important; }
}

body.isFullscreen .bottomNav,
body.isFullscreen .sideNav {
	display: none !important;
}

@media (orientation: portrait) {
	body.isFullscreen .appShell {
		grid-template-rows: var(--cube-size) minmax(0, 1fr);
	}
}

@media (orientation: landscape) {
	body.isFullscreen .appShell {
		grid-template-columns: var(--cube-size) minmax(0, 1fr);
	}
	body.isFullscreen .cubeArea { grid-column: 1; }
	body.isFullscreen .modeView { grid-column: 2; }
}