:root{--color-primary: #3b82f6;--color-blue: #4f81ff;--color-shadow: #000000;--color-shadow-10: color-mix(in srgb, var(--color-shadow), transparent 90%);--color-shadow-20: color-mix(in srgb, var(--color-shadow), transparent 80%);--color-shadow-25: color-mix(in srgb, var(--color-shadow), transparent 75%);--color-shadow-40: color-mix(in srgb, var(--color-shadow), transparent 60%);--color-shadow-50: color-mix(in srgb, var(--color-shadow), transparent 50%);--color-overlay: rgba(221, 223, 228, .5);--color-primary-10: color-mix(in srgb, var(--color-primary), transparent 90%);--color-primary-15: color-mix(in srgb, var(--color-primary), transparent 85%);--color-primary-20: color-mix(in srgb, var(--color-primary), transparent 80%);--color-primary-40: color-mix(in srgb, var(--color-primary), transparent 60%);--color-primary-50: color-mix(in srgb, var(--color-primary), transparent 50%);--color-primary-00: color-mix( in srgb, var(--color-primary), transparent 100% );--trans-key: box-shadow .2s ease;--fade-function: cubic-bezier(.23, 1, .32, 1);--anim-fade-in: fade-in .3s var(--fade-function) forwards;--anim-fade-out: fade-out .3s var(--fade-function) forwards;--anim-fade-in-down: fade-in-down .3s var(--fade-function) forwards;--anim-fade-out-up: fade-out-up .3s var(--fade-function) forwards;--anim-fade-in-zoom: fade-in-zoom .3s var(--fade-function) forwards;--anim-fade-out-zoom: fade-out-zoom .3s var(--fade-function) forwards;--anim-page-slide-in: page-slide-in .4s cubic-bezier(.4, 0, .2, 1) backwards;--anim-page-enter: page-enter .35s cubic-bezier(.4, 0, .2, 1) forwards}html{--font: "HarmonyOS Sans SC", system-ui, -apple-system, sans-serif;--radius-default: 24px;--radius-button: 16px;--font-xs: 12px;--font-sm: 14px;--font-base: 16px;--font-lg: 18px;--font-xl: 20px;--font-2xl: 24px;--font-3xl: 28px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--font-menu-1: var(--font-weight-bold) var(--font-base) var(--font);--font-menu-2: var(--font-weight-bold) var(--font-xl) var(--font);--font-1: var(--font-weight-regular) var(--font-xl) var(--font);--font-2: var(--font-weight-regular) var(--font-base) var(--font);--font-3: var(--font-weight-regular) var(--font-xs) var(--font);--font-normal: var(--font-weight-regular) var(--font-base) var(--font);--font-title: var(--font-weight-medium) var(--font-lg) var(--font);--font-tips: var(--font-weight-regular) var(--font-base) var(--font);--color-text: #64748b;--color-text-secondary: #91a1b8;--color-border-default: #64748b;--color-border-secondary: #91a1b8;--color-title: rgb(120, 137, 161);--color-tips: var(--color-text-secondary);--color-body: var(--color-text);--color-home-bg: #ffffff;--color-hid-title: #000000;--color-hid: var(--color-text);--color-conifgure-bg: #f3f3f3;--color-side-bg: #f4f4f4;--color-subside-bg: #ffffff;--color-danger: #ed1f23;--color-primary-t: #ffffff;--color-cfg-bg: rgb(243, 243, 243);--color-side-bg: #ffffff;--color-keyboard-bg: #fafafa;--color-keyboard-border: rgba(255, 255, 255, 1);--color-lightbar-bg: #f2f1f1;--color-lightbar-default: #ffffff;--color-keycap: var(--color-text);--color-keycap-act: var(--color-primary);--color-keycap-ap-1: #0087f9;--color-keycap-ap-2: #7531f2;--color-keycap-ap-3: #aa5e67;--color-keycap-ap-4: #1e00ff;--color-keycap-axis-1: #ffc828;--color-keycap-axis-2: #ff881e;--color-keycap-axis-3: #e18590;--color-keycap-shadow: 0px 2px 4px var(--color-primary-15);--color-keycap-face: #ffffff;--color-keycap-a-face: #ffffff;--color-keycap-h-face: #ffffff;--color-keycap-side: #d5dae0;--color-keycap-a-side: var(--color-primary);--color-keycap-h-side: #d5dae0;--color-keycap-selected-riser-bg: var(--color-keycap-a-side);--color-keycap-selection-ring: 0 0 0 2px var(--color-keycap-a-side);--keycap-selected-focus-outline: none;--keycap-selected-focus-outline-offset: 0;--color-keycap-common-border: #d9d9d9;--color-keycap-common-border-a: var(--color-primary);--color-keycap-common-border-hover: #ffffff;--color-keycap-common: var(--color-text);--color-keycap-common-a: var(--color-primary-t);--color-keycap-cmmmon-bg: none;--color-keycap-cmmmon-bg-a: var(--color-primary);--color-keycap-common-bg-hover: #ffffff;--color-menu-icon-a-bg: var(--color-primary);--color-menu: var(--color-title);--color-menu-a: var(--color-primary-t);--color-menu-bg: none;--color-menu-bg-a: var(--color-primary);--color-dialog-bg: #ffffff;--color-dialog-border: var(--color-border-default);--color-btn-bg-default: #ebebeb;--color-btn-bg: var(--color-primary);--color-btn: var(--color-primary-t);--color-btn-disable: var(--color-text);--color-btn-default: var(--color-text);--color-scrollbar: #d9d9d9;--color-badge-title: var(--color-title);--color-badge-indicator: #43cf7c;--color-badge-new: var(--color-primary-t);--color-badge-device-border: var(--color-border-secondary);--color-badge-device-a-bg: #e2e8f0;--color-profile: var(--color-text);--color-profile-border: var(--color-border-default);--color-profile-edit-bg: #ffffff;--color-layer: var(--color-text);--color-layer-bg: #fafafa;--color-test-key: var(--color-text-secondary);--color-test-key-bg: #ffffff;--color-test-border: var(--color-text);--color-test-press: #d97365;--color-test-release: var(--color-primary);--color-acttest-rail-scale-l: var(--color-text);--color-acttest-rail-scale-s: var(--color-text-secondary);--color-acttest-rail-bg: #bfbdc7;--color-acttest-rail-most: #e2e1e5;--color-acttest-rail-active: var(--color-primary);--color-slider-rail-bg: #e2e1e5;--color-slider-handler-bg: var(--color-primary);--color-slider-handler-border: var(--color-primary-t);--color-slider-track-bg: var(--color-primary);--color-slider-border: transparent;--color-slider-poplabel-bg: var(--color-primary);--color-slider-poplabel: var(--color-primary-t);--color-slider-disabled-handler-bg: #b5bbc4;--color-slider-disabled-handler-border: #e8e9ec;--color-slider-disabled-track-bg: #b5bbc4;--color-slider-disabled-poplabel-bg: #b5bbc4;--color-slider-disabled-poplabel: #ffffff;--color-slider-value-text: #64748b;--color-slider-value-muted: #9faec2;--color-switch-border: var(--color-border-default);--color-switch-action-border: var(--color-primary);--color-switch-action-bg: var(--color-primary-t);--color-switch-bg: #e8e9eb;--color-switch-checked-bg: var(--color-primary);--color-switch-disabled-bg: #e5e5e5;--color-switch-disabled-checked-bg: #b5bbc4;--color-switch-disabled-action-bg: #f3f4f6;--color-switch-disabled-action-border: #c4c9d1;--color-act-tips: var(--color-tips);--color-ap-title: var(--color-text);--color-rt-title: var(--color-primary);--color-dz-bg: #f7f7f8;--color-dz-border: #ffffff;--color-remap-menu-item: var(--color-text);--color-remap-any: var(--color-text);--color-macro-panel-border: var(--color-border-secondary);--color-macro-divider: var(--color-border-secondary);--color-macro: var(--color-text);--color-macro-delay-btn-bg: #d9d9d9;--color-macro-delay-bg: #d9d9d9;--color-rgb-effect: var(--color-text);--color-rgb-divider: var(--color-border-secondary);--color-pop-border: var(--color-border-secondary);--color-pop-bg: #ffffff;--color-select: var(--color-text);--color-select-hover: rgba(59, 130, 246, .15);--color-rgb-picker-border: var(--color-border-default);--color-rgb-picker: var(--color-text);--color-rgb-picker-input: var(--color-text);--color-ak: var(--color-text);--color-ak-border: var(--color-border-secondary);--color-ak-cfg-left-bg: rgba(255, 255, 255, .5);--color-ak-code: var(--color-text);--color-icon-mouse: var(--color-primary);--color-dks-color1: #17186a;--color-dks-color2: #860e0e;--color-dks-color3: #bbbe0a;--color-dks-color4: #dcde7e;--color-dks-guide: #475569;--color-dks-action: #475569;--color-dks-action-panel-border: var(--color-border-secondary);--color-dks-aciton-panel-bg: #ffffff;--color-dks-act-label: #79b2ff;--color-cali-press: #97cbf1;--color-cali-state1: #96f788;--color-cali-state2: #eeb8b8;--color-cali-light-primary: #bed7ff;--color-cali-step-content: var(--color-text);--color-cali-btn-disabled-bg: var(--color-text-secondary);--color-axis-bg: #f7f7f8;--color-axis: var(--color-text);--color-firmware: var(--color-text);--color-firmware-light-primary: #bed7ff;--color-progresss-bg: #d9d9d9;--color-progress: var(--color-text);--color-system: var(--color-text);--color-system-item-border: var(--color-border-secondary);--color-theme-button: var(--color-text);--color-side-deco-base: #F0F3F9;--color-side-deco-1: #F7F8FC;--color-side-deco-2: #F2F3F9;--color-side-deco-3: #F7F7F7;--color-help: var(--color-text);--color-version: var(--color-text)}html[data-theme=dark]{--color-primary: #f32301;--color-primary-t: #e8ebed;--color-text: #e8ebed;--color-text-secondary: #b0b5b9;--color-body: #e8ebed;--color-title: #e8ebed;--color-tips: #b0b5b9;--color-menu: #e8ebed;--color-hid-title: #e8ebed;--color-hid: #e8ebed;--color-t1: #e8ebed;--color-t2: #b0b5b9;--color-disable: #6b7280;--color-pbg: #222426;--color-border-default: transparent;--color-border-secondary: transparent;--color-home-bg: #171717;--color-conifgure-bg: #171717;--color-cfg-bg: #222426;--color-side-bg: #222426;--color-subside-bg: #222426;--color-keyboard-bg: #222426;--color-keyboard-border: transparent;--color-lightbar-bg: #171717;--color-lightbar-default: #000000;--color-dialog-bg: #222426;--color-dialog-border: transparent;--color-pop-bg: #2f3133;--color-pop-border: transparent;--color-btn-bg-default: #222426;--color-btn-default: #e8ebed;--color-btn-disable: #8a9096;--color-theme-button: #e8ebed;--color-side-deco-base: #000000;--color-side-deco-1: #080808;--color-side-deco-2: #080808;--color-side-deco-3: #0D0D0D;--color-keycap-shadow: none;--color-keycap-face: #222426;--color-keycap-h-face: #2a2b2c;--color-keycap-a-face: #222426;--color-keycap-side: #3d4044;--color-keycap-h-side: #4d5054;--color-keycap-a-side: var(--color-primary);--color-keycap-selected-riser-bg: var(--color-keycap-side);--color-keycap-selection-ring: 0 0 0 2px var(--color-keycap-a-side);--keycap-selected-focus-outline: 2px solid var(--color-keycap-a-side);--keycap-selected-focus-outline-offset: 0px;--color-keycap: var(--color-text);--color-keycap-act: var(--color-primary);--color-keycap-ap-1: #ff5a4a;--color-keycap-ap-2: #f32301;--color-keycap-ap-3: #ff7a45;--color-keycap-ap-4: #c41a1a;--color-keycap-axis-1: #ffb020;--color-keycap-axis-2: #f32301;--color-keycap-axis-3: #ff6b4a;--color-keycap-common-border: #3d4044;--color-keycap-common-border-hover: var(--color-primary);--color-keycap-common-bg-hover: var(--color-primary);--color-test-key-bg: #222426;--color-test-border: transparent;--color-layer-bg: #222426;--color-profile-edit-bg: var(--color-pop-bg);--color-profile-border: transparent;--color-profile: #e8ebed;--color-badge-device-border: transparent;--color-badge-device-a-bg: #222426;--color-badge-title: #e8ebed;--color-acttest-rail-scale-l: #e8ebed;--color-acttest-rail-scale-s: #b0b5b9;--color-acttest-rail-bg: #171717;--color-acttest-rail-most: #171717;--color-slider-rail-bg: #171717;--color-slider-handler-bg: var(--color-primary);--color-slider-handler-border: #ffffff;--color-slider-track-bg: var(--color-primary);--color-slider-border: rgba(255, 255, 255, .22);--color-slider-value-text: #e8ebed;--color-slider-value-muted: #b0b5b9;--color-slider-disabled-handler-border: rgba(255, 255, 255, .35);--color-switch-border: transparent;--color-switch-action-border: transparent;--color-switch-bg: #171717;--color-switch-disabled-bg: #171717;--color-switch-disabled-action-border: transparent;--color-dz-bg: #222426;--color-dz-border: transparent;--color-macro-panel-border: transparent;--color-macro-divider: transparent;--color-macro-delay-btn-bg: #222426;--color-macro-delay-bg: #222426;--color-macro: #e8ebed;--color-rgb-divider: transparent;--color-rgb-picker-border: transparent;--color-rgb-effect: #e8ebed;--color-ak-border: transparent;--color-ak-cfg-left-bg: #222426;--color-ak: #e8ebed;--color-dks-action-panel-border: transparent;--color-dks-aciton-panel-bg: #222426;--color-axis-bg: #222426;--color-axis: #e8ebed;--color-cali-step-content: #e8ebed;--color-progresss-bg: #171717;--color-progress: #e8ebed;--color-system: #e8ebed;--color-system-item-border: transparent;--color-help: #e8ebed;--color-version: #e8ebed;--color-select: #e8ebed;--color-select-hover: rgba(232, 235, 237, .2);--color-remap-menu-item: #e8ebed;--color-remap-any: #e8ebed;--color-ap-title: #e8ebed;--color-act-tips: #b0b5b9;--color-firmware: #e8ebed;--color-overlay: rgba(0, 0, 0, .55);--color-scrollbar: #3a3d42;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}html[data-theme=dark] body{background-color:var(--color-home-bg);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}html[data-theme=dark]::-webkit-scrollbar,html[data-theme=dark] body::-webkit-scrollbar{width:4px;height:4px}html[data-theme=dark]::-webkit-scrollbar-track,html[data-theme=dark] body::-webkit-scrollbar-track{background:transparent}html[data-theme=dark]::-webkit-scrollbar-thumb,html[data-theme=dark] body::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:99px;border:1px solid transparent;background-clip:padding-box}html[data-theme=dark]::-webkit-scrollbar-thumb:hover,html[data-theme=dark] body::-webkit-scrollbar-thumb:hover{background:#ffffff42;background-clip:padding-box}html[data-theme=dark] #keyboard{filter:none!important}@keyframes rotate{0%{rotate:0deg}to{rotate:360deg}}@keyframes hueRotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes keycap-led-split-inner{0%{transform:translate(var(--sdx),var(--sdy)) scale(.93)}to{transform:translate(0) scale(1)}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:scaleY(.8)}70%{opacity:1}to{opacity:1;transform:scaleY(1)}}@keyframes fade-out-up{0%{opacity:1;transform:scaleY(1)}70%{opacity:0}to{opacity:0;transform:scaleY(.8)}}@keyframes fade-in-zoom{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes fade-out-zoom{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes page-slide-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes page-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@font-face{font-family:HarmonyOS Sans SC;src:url(/fonts/HarmonyOS_Sans_SC_Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS Sans SC;src:url(/fonts/HarmonyOS_Sans_SC_Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS Sans SC;src:url(/fonts/HarmonyOS_Sans_SC_Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS Sans SC;src:url(/fonts/HarmonyOS_Sans_SC_Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:HarmonyOS Sans SC;src:url(/fonts/HarmonyOS_Sans_SC_Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}html,body{height:100%;min-height:100%}body{position:relative;font-family:var(--font);font-weight:400;font-size:16px;margin:0;padding:0;-webkit-user-select:none;user-select:none;color:var(--color-body)}button{font-weight:700}li{list-style:none}svg{display:block}*:focus{outline:none}#root{height:100%;width:100%;position:relative;overflow:hidden}:where(*){border-width:0px;border-style:solid;box-sizing:border-box;overflow-wrap:break-word}*::-webkit-scrollbar-button{display:none;width:0;height:0}.custom-scrollbar{scrollbar-gutter:stable}.custom-scrollbar::-webkit-scrollbar{width:5px;height:5px}.custom-scrollbar::-webkit-scrollbar-track{width:5px;height:5px;border-radius:5px;-webkit-box-shadow:none}.custom-scrollbar::-webkit-scrollbar-thumb{cursor:pointer;border-radius:5px;background:var(--color-scrollbar)}.custom-scrollbar::-webkit-scrollbar-corner{background:transparent}.custom-scrollbar.both{scrollbar-gutter:stable both-edges}html[data-theme=dark] .custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}html[data-theme=dark] .custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}html[data-theme=dark] .custom-scrollbar::-webkit-scrollbar-track{background:transparent}html[data-theme=dark] .custom-scrollbar::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:99px;border:1px solid transparent;background-clip:padding-box}html[data-theme=dark] .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#ffffff42;background-clip:padding-box}img{pointer-events:none}.spin{transform-origin:center;animation:spin 1s infinite linear;will-change:transform}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drag-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:transparent;cursor:grabbing}.drag-overlay.can-drop{cursor:copy}.drag-overlay.not-allowed{cursor:not-allowed}