/*! TITAN CSS v1.3.0 | Built 2026-01-12 | (c) Luminkey */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');:root{--bg-app:#050505;--bg-sidebar:rgba(20,20,20,0.6);--bg-panel:rgba(30,30,30,0.5);--bg-panel-solid:#161616;--bg-input:#111111;--bg-input-hover:#1a1a1a;--bg-surface:#181818;--bg-surface-alt:#222222;--bg-elevated:#2a2a2a;--border-subtle:rgba(255,255,255,0.08);--border-medium:#444444;--border-focus:#0A84FF;--text-primary:#E0E0E0;--text-bright:#FFFFFF;--text-secondary:#959595;--text-tertiary:#555555;--text-value:#3B9BFF;--text-link:#5eb3ff;--keyboard-content-gap:32px;--accent-blue:#0A84FF;--accent-blue-hover:#0070d4;--accent-red:#FF453A;--accent-red-hover:#D93830;--accent-warning:#f0ad4e;--accent-success:#34C759;--slider-thumb:#B0B0B0;--active-state:inset 0 1px 0 0 rgba(255,255,255,0.1),0 0 0 1px var(--accent-blue),inset 0 0 12px rgba(10,132,255,0.1);--stage-width:1080px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:9999px;--ease-ios:cubic-bezier(0.25,1,0.5,1);--ease-squish:cubic-bezier(0.175,0.885,0.32,1.275);--duration:0.2s;--duration-fast:0.15s;--kbd-scale:1}
*{box-sizing:border-box;margin:0;padding:0;user-select:none}
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:1px}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(10,132,255,0.4)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:var(--radius-pill);border:2px solid var(--bg-app)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
body{font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:400;color:var(--text-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
h1,h2,h3,button,input,textarea{font-family:'Inter',-apple-system,sans-serif}
button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
h3{color:var(--text-primary);letter-spacing:-0.01em;font-weight:400}
body{background-color:var(--bg-app);background-image:radial-gradient(circle at 50% 0%,#151515 0%,var(--bg-app) 80%);height:100vh;width:100vw;overflow:hidden;display:flex}
.app-container{display:flex;width:100%;height:100%;opacity:0;animation:fade-in 0.6s var(--ease-ios) forwards}
.main-area{flex-grow:1;display:flex;flex-direction:column;height:100vh;position:relative}
.content-wrapper{padding:40px 0;overflow-y:auto;scrollbar-gutter:stable;flex-grow:1;display:flex;flex-direction:column;align-items:center}
.top-nav-bar,.keyboard-and-toolbar,.settings-stage,.controls-toolbar{width:var(--stage-width);max-width:var(--stage-width)}
@keyframes fade-in{from{opacity:0}
to{opacity:1}
}
@keyframes fade-in-tab{from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in-scale{from{opacity:0;transform:scale(0.95)}
to{opacity:1;transform:scale(1)}
}
@keyframes pulse-glow{0%,100%{opacity:1;box-shadow:0 0 8px rgba(10,132,255,0.4)}
50%{opacity:0.7;box-shadow:0 0 12px rgba(10,132,255,0.6)}
}
@keyframes edit-pulse{0%,100%{box-shadow:0 0 0 3px rgba(10,132,255,0.15),inset 0 1px 2px rgba(0,0,0,0.3)}
50%{box-shadow:0 0 0 4px rgba(10,132,255,0.25),inset 0 1px 2px rgba(0,0,0,0.3)}
}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-4px)}
75%{transform:translateX(4px)}
}
@keyframes spin{from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@media (max-width:1200px){:root{--stage-width:100%}
}
@media (max-width:600px){.content-wrapper{padding:16px}
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');:root{--bg-app:#050505;--bg-sidebar:rgba(20,20,20,0.6);--bg-panel:rgba(30,30,30,0.5);--bg-panel-solid:#161616;--bg-input:#111111;--bg-input-hover:#1a1a1a;--border-subtle:rgba(255,255,255,0.08);--border-focus:#0A84FF;--text-primary:#E0E0E0;--text-bright:#FFFFFF;--text-secondary:#959595;--text-tertiary:#555555;--text-value:#3B9BFF;--keyboard-content-gap:32px;--accent-blue:#0A84FF;--accent-blue-hover:#0060C0;--accent-blue-soft:#a5b4fc;--accent-red:#FF453A;--accent-red-hover:#D93830;--accent-warning:#f0ad4e;--accent-success:#34C759;--chamfer-edge:inset 0 1px 0 0 rgba(255,255,255,0.08);--active-state:inset 0 1px 0 0 rgba(255,255,255,0.1),0 0 0 1px var(--accent-blue),inset 0 0 12px rgba(10,132,255,0.1);--stage-width:1080px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:9999px;--ease-ios:cubic-bezier(0.25,1,0.5,1);--ease-squish:cubic-bezier(0.175,0.885,0.32,1.275);--duration:0.2s;--duration-fast:0.15s;--kbd-scale:1}
*{box-sizing:border-box;margin:0;padding:0;user-select:none}
*:focus{outline:none}
*:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:1px}
input[type="range"]:focus-visible{outline:none}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(10,132,255,0.4)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:var(--radius-pill);border:2px solid var(--bg-app)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
body{font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:400;color:var(--text-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
h1,h2,h3,button,input,textarea{font-family:'Inter',-apple-system,sans-serif}
button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
h3{color:var(--text-primary);letter-spacing:-0.01em;font-weight:400}
body{background-color:var(--bg-app);background-image:radial-gradient(circle at 50% 0%,#151515 0%,var(--bg-app) 80%);height:100vh;width:100vw;overflow:hidden;display:flex}
.app-container{display:flex;width:100%;height:100%;opacity:0;animation:fade-in 0.6s var(--ease-ios) forwards}
.main-area{flex-grow:1;display:flex;flex-direction:column;height:100vh;position:relative}
.content-wrapper{padding:40px 0;overflow-y:auto;scrollbar-gutter:stable;flex-grow:1;display:flex;flex-direction:column;align-items:center}
.top-nav-bar,.keyboard-and-toolbar,.settings-stage,.controls-toolbar{width:var(--stage-width);max-width:var(--stage-width)}
.sidebar-left{width:260px;flex-shrink:0;background-color:var(--bg-sidebar);padding:32px 0;display:flex;flex-direction:column;z-index:10}
.logo{display:block;padding:0 24px 48px}
.logo svg{display:block;width:120px;height:auto}
.logo svg .cls-1{fill:var(--text-primary)}
.sidebar-group{display:flex;flex-direction:column;margin-bottom:32px}
.sidebar-group + .sidebar-group{padding-top:24px;border-top:1px solid rgba(255,255,255,0.06)}
.sidebar-group h3{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.08em;padding:0 24px}
.sidebar-group .device-list{list-style:none;padding:0}
.sidebar-group .device-list li{display:flex;align-items:center;font-size:13px;color:var(--text-primary);font-weight:400;padding:8px 24px;border-radius:var(--radius-pill);cursor:default;position:relative}
.sidebar-group .device-list li::before{content:'';position:absolute;left:10px;width:6px;height:6px;border-radius:50%;background-color:var(--accent-blue);box-shadow:0 0 8px rgba(10,132,255,0.5);animation:pulse-glow 2s ease-in-out infinite;will-change:transform,opacity}
.profile-buttons-wrapper{display:flex;flex-direction:column;gap:6px;padding:0 16px 8px}
.profile-item{display:flex;align-items:center;gap:4px;position:relative}
.btn-profile{flex-grow:1;background:transparent;border:1px solid transparent;color:var(--text-secondary);height:36px;padding:0 16px 0 14px;border-radius:var(--radius-pill);text-align:left;font-size:13px;font-weight:400;cursor:pointer;transition:all var(--duration) ease;display:flex;align-items:center}
.btn-profile:hover{background-color:rgba(255,255,255,0.04);color:var(--text-primary)}
.btn-profile.active{background-color:rgba(255,255,255,0.06);color:var(--text-primary)}
.btn-profile.editing{background-color:var(--bg-input);border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(10,132,255,0.15),inset 0 1px 2px rgba(0,0,0,0.3);color:var(--text-bright);cursor:text;animation:edit-pulse 0.3s var(--ease-ios)}
.profile-item:has(.btn-profile.editing) .btn-profile-menu{opacity:0 !important;pointer-events:none}
.profile-buttons-wrapper.switching .btn-profile:not(.active){opacity:0.5;pointer-events:none;cursor:wait}
.profile-buttons-wrapper.switching .btn-profile-menu{pointer-events:none}
.btn-profile-menu{background:transparent;border:none;color:var(--text-tertiary);width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-pill);opacity:0;transition:all var(--duration);cursor:pointer}
.btn-profile-menu:active{transform:scale(0.92);background-color:rgba(255,255,255,0.05)}
.btn-profile-menu svg{width:16px;height:16px;fill:currentColor;display:block;transform:translateX(-1px)}
.profile-item:hover .btn-profile-menu,.btn-profile-menu.active-menu{opacity:1}
.btn-profile-menu:hover{background-color:rgba(255,255,255,0.1);color:var(--text-primary)}
.btn-import-profile{margin:16px 16px 0;width:calc(100% - 32px);background:transparent;border:1px dashed rgba(255,255,255,0.15);color:var(--text-secondary);height:36px;padding:0 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--duration);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-import-profile svg{opacity:0.7;transition:opacity var(--duration)}
.btn-import-profile:hover{border-color:var(--text-secondary);color:var(--text-primary);background-color:rgba(255,255,255,0.04)}
.btn-import-profile:hover svg{opacity:1}
.btn-import-profile:active{transform:scale(0.98);background-color:rgba(255,255,255,0.06)}
.tab-content{width:100%;max-width:var(--stage-width)}
#functions-tab-content{position:relative}
.tab-content.active-tab-content{}
.top-nav-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding-bottom:0;position:relative}
.main-tabs{display:flex;gap:32px;position:relative}
.btn-tab{background:transparent;border:none;color:var(--text-secondary);padding:10px 0;font-size:14px;font-weight:500;cursor:pointer;transition:color var(--duration);position:relative}
.btn-tab:hover{color:var(--text-bright)}
.btn-tab.active{color:var(--text-primary)}
.active-tab-underline{position:absolute;bottom:-2px;left:0;height:2px;background-color:var(--accent-blue);width:0;transition:left 0.3s var(--ease-ios),width 0.3s var(--ease-ios);box-shadow:0 -4px 10px rgba(10,132,255,0.4)}
.top-nav-actions{display:flex;gap:12px;align-items:center}
.top-nav-actions.inactive-tab{opacity:0.25;pointer-events:none}
.btn-history{display:none;width:32px;height:32px;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-primary);align-items:center;justify-content:center;cursor:pointer;transition:all var(--duration);position:relative;overflow:hidden}
.btn-history::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent-blue);opacity:0;transition:opacity 0.1s ease}
.btn-history.holding::after{opacity:1;animation:hold-spin 0.35s linear forwards}
@keyframes hold-spin{0%{transform:rotate(0deg);border-top-color:var(--accent-blue);border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
25%{border-right-color:var(--accent-blue)}
50%{border-bottom-color:var(--accent-blue)}
75%{border-left-color:var(--accent-blue)}
100%{transform:rotate(360deg);border-color:var(--accent-blue)}
}
.btn-history.hold-complete{animation:hold-pulse 0.3s var(--ease-squish)}
@keyframes hold-pulse{0%{transform:scale(1)}
50%{transform:scale(1.15);box-shadow:0 0 12px rgba(10,132,255,0.5)}
100%{transform:scale(1)}
}
.kb-press{animation:kb-press-pop 0.15s var(--ease-squish)}
@keyframes kb-press-pop{0%{transform:scale(1)}
40%{transform:scale(0.88)}
100%{transform:scale(1)}
}
.btn-history.visible{display:flex}
.btn-history:hover:not(:disabled){border-color:var(--text-tertiary);background-color:rgba(255,255,255,0.05)}
.btn-history:active:not(:disabled){transform:scale(0.92);background-color:rgba(0,0,0,0.2)}
.btn-history:disabled{opacity:0.3;cursor:default}
.btn-history svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5}
.btn-save-profile{display:none;align-items:center;justify-content:center;gap:8px;background:var(--accent-blue);border:1px solid rgba(255,255,255,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);color:#FFFFFF;padding:0 20px;height:36px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;letter-spacing:0.02em;cursor:pointer;transition:all var(--duration);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 0 1px rgba(255,255,255,0.5)}
.btn-save-profile.visible{display:flex}
.btn-save-profile:hover{background-color:var(--accent-blue-hover);border-color:rgba(255,255,255,0.3)}
.btn-save-profile:active{transform:scale(0.96)}
.keyboard-and-toolbar{display:flex;flex-direction:column;align-items:center;gap:var(--keyboard-content-gap);z-index:5;margin-bottom:var(--keyboard-content-gap)}
.keyboard-scale-wrapper{position:relative;width:100%;display:grid;place-items:start center}
.keyboard-scale-target{transform-origin:top center;transform-style:preserve-3d;will-change:transform}
.keyboard-diagram{width:calc(862px * var(--kbd-scale));min-width:calc(862px * var(--kbd-scale));flex-shrink:0;display:flex;flex-direction:column;gap:calc(5px * var(--kbd-scale));background-color:#555;background-image:linear-gradient(180deg,#888888 0%,#555555 100%);border-radius:var(--radius-xs);padding:calc(14px * var(--kbd-scale));cursor:default;box-shadow:0 20px 40px -10px rgba(0,0,0,0.6),0 0 0 1px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.15)}
.keyboard-row{display:grid;grid-template-columns:repeat(64,minmax(0,1fr));column-gap:calc(5px * var(--kbd-scale));margin-bottom:calc(5px * var(--kbd-scale))}
.key{background-color:#151515;background-image:linear-gradient(180deg,#222 0%,#151515 100%);border-radius:calc(4px * var(--kbd-scale));font-size:calc(10px * var(--kbd-scale));padding:calc(4px * var(--kbd-scale));color:#EAEAEA;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform 0.1s var(--ease-squish),background-color 0.1s,box-shadow 0.15s ease,filter 0.15s ease,border-color 0.15s ease;height:calc(48px * var(--kbd-scale));min-width:0;overflow:hidden;position:relative;box-shadow:0 1px 2px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);border:1px solid #000}
.key.dragging{transform:none !important}
.key.wasd-anticipate{animation:wasd-pulse 0.4s ease-in-out infinite;border-color:rgba(10,132,255,0.4) !important}
@keyframes wasd-pulse{0%,100%{box-shadow:0 0 0 0 rgba(10,132,255,0);background:#1a1a1a}
50%{box-shadow:0 0 8px 2px rgba(10,132,255,0.3);background:rgba(10,132,255,0.08)}
}
.wasd-tooltip{position:fixed;background:rgba(20,20,20,0.95);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;transform:translate(-50%,-100%);opacity:0;transition:opacity 0.2s ease;pointer-events:none;z-index:1000;white-space:nowrap}
.wasd-tooltip.visible{opacity:1}
.hold-hint{position:fixed;background:rgba(20,20,20,0.95);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:500;transform:translateX(-50%);opacity:0;transition:opacity 0.2s ease;pointer-events:none;z-index:1000;white-space:nowrap}
.hold-hint.visible{opacity:1}
.key:hover:not(.selected){background:#2a2a2a;color:var(--text-bright);border-color:#444}
.key.selected{border:1px solid var(--accent-blue);background:#181818;box-shadow:var(--active-state);color:var(--text-bright)}
.key.selected:hover{border-color:var(--accent-blue-hover);filter:brightness(1.2)}
.key .top,.key .bottom{align-self:center;font-weight:500;opacity:1;transition:opacity 0.03s ease-out}
#keyboard-diagram .key:hover .top,#keyboard-diagram .key:hover .bottom,#keyboard-diagram .key:hover .key-label-center,#keyboard-diagram .key.selected .top,#keyboard-diagram .key.selected .bottom,#keyboard-diagram .key.selected .key-label-center{opacity:0}
.k-tilde .top,.k-lbr .top,.k-rbr .top,.k-bsl .top,.k-semi .top,.k-apo .top,.k-com .top,.k-per .top,.k-fsl .top{padding-top:calc(2px * var(--kbd-scale))}
.k-tilde .bottom,.k-lbr .bottom,.k-rbr .bottom,.k-bsl .bottom,.k-semi .bottom,.k-apo .bottom,.k-com .bottom,.k-per .bottom,.k-fsl .bottom{padding-bottom:calc(2px * var(--kbd-scale))}
.k-1 .top,.k-2 .top,.k-3 .top,.k-4 .top,.k-5 .top,.k-6 .top,.k-7 .top,.k-8 .top,.k-9 .top,.k-0 .top,.k-minus .top,.k-eq .top{font-size:calc(12px * var(--kbd-scale));align-self:flex-end;padding-right:calc(2px * var(--kbd-scale))}
.k-1 .bottom,.k-2 .bottom,.k-3 .bottom,.k-4 .bottom,.k-5 .bottom,.k-6 .bottom,.k-7 .bottom,.k-8 .bottom,.k-9 .bottom,.k-0 .bottom,.k-minus .bottom,.k-eq .bottom{font-size:calc(12px * var(--kbd-scale));align-self:flex-start;padding-left:calc(2px * var(--kbd-scale))}
.key.text-center{align-items:center;justify-content:center;font-size:calc(11px * var(--kbd-scale))}
.key{--electric-fill:0%;--actuation-percent:50%}
.key.electric-active::before{content:'';position:absolute;top:0;left:0;right:0;height:var(--electric-fill);background:rgba(10,132,255,0.08);border-radius:calc(4px * var(--kbd-scale));pointer-events:none;z-index:1;transition:height 0.05s ease-out}
.key.electric-active::after{content:'';position:absolute;top:var(--electric-fill);left:0;right:0;height:18px;background:linear-gradient( to top,rgba(10,132,255,0.6) 0%,transparent 100% );pointer-events:none;z-index:2;transition:top 0.05s ease-out;filter:blur(6px);transform:translateY(-50%)}
.key.electric-active .electric-bloom{position:absolute;top:var(--electric-fill);left:0;right:0;height:10px;background:linear-gradient( to top,rgba(59,155,255,0.75) 0%,transparent 100% );pointer-events:none;z-index:3;filter:blur(3px);transform:translateY(-50%);transition:top 0.05s ease-out}
.key.electric-active .electric-core{position:absolute;top:var(--electric-fill);left:6%;right:6%;height:3px;background:#FFFFFF;box-shadow:0 0 4px #3B9BFF,0 0 8px rgba(10,132,255,0.6);border-radius:1.5px;pointer-events:none;z-index:4;transform:translateY(-50%);transition:top 0.05s ease-out}
.key.electric-active .actuation-indicator{position:absolute;top:var(--actuation-percent);left:0;right:0;height:1px;background:rgba(255,255,255,0.4);pointer-events:none;z-index:5;transform:translateY(-50%)}
.key.electric-active{box-shadow:0 0 8px rgba(10,132,255,0.4),0 0 16px rgba(10,132,255,0.15),0 1px 2px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);transition:box-shadow 0.05s ease-out}
.key.selected.electric-active{border-color:var(--accent-blue);box-shadow:0 0 10px rgba(10,132,255,0.5),0 0 20px rgba(10,132,255,0.2),0 0 0 1px var(--accent-blue)}
.key .top,.key .bottom{position:relative;z-index:4}
.key:not(.electric-active)::before,.key:not(.electric-active)::after,.key:not(.electric-active) .actuation-indicator,.key:not(.electric-active) .electric-bloom,.key:not(.electric-active) .electric-core{transition:opacity 0.3s ease-out,height 0.15s ease-out,top 0.15s ease-out;opacity:0}
.key-1u{grid-column:span 4}
.key-1-25u{grid-column:span 5}
.key-1-5u{grid-column:span 6}
.key-1-75u{grid-column:span 7}
.key-2u{grid-column:span 8}
.key-2-25u{grid-column:span 9}
.key-5-5u{grid-column:span 22}
.key-6-75u{grid-column:span 25}
.k-esc{grid-column:1 / span 4 !important}
.k-f1{grid-column:6 / span 4 !important}
.k-f5{grid-column:23 / span 4 !important}
.k-f9{grid-column:40 / span 4 !important}
.k-prt{grid-column:57 / span 4 !important}
.k-del,.k-pgup,.k-pgdn{grid-column:-5 / span 4}
.k-up{grid-column:-9 / span 4 !important}
.k-left{grid-column:-13 / span 4 !important}
.k-down{grid-column:-9 / span 4 !important}
.k-right{grid-column:-5 / span 4 !important}
.light-bars-container{grid-column:-5 / span 4;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(5px * var(--kbd-scale));height:100%;padding-bottom:calc(4px * var(--kbd-scale));padding-left:calc(2px * var(--kbd-scale))}
.light-bar{background-color:#222;height:calc(4px * var(--kbd-scale));border-radius:2px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.8),0 1px 0 rgba(255,255,255,0.5)}
.light-bar:nth-child(1){width:60%}
.light-bar:nth-child(2){width:80%}
#light-bar-1{width:60%}
#light-bar-2{width:80%}
.controls-toolbar{display:flex;justify-content:center;margin-bottom:0}
.btn-toolbar{background:var(--bg-panel);border:1px solid var(--border-subtle);color:var(--text-secondary);height:36px;padding:0 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:500;cursor:pointer;margin:0 6px;transition:background-color var(--duration),border-color var(--duration),color var(--duration);display:inline-flex;align-items:center;justify-content:center}
.btn-toolbar:hover:not(:disabled){background:rgba(255,255,255,0.08);color:var(--text-primary);border-color:var(--border-subtle)}
.btn-toolbar:active:not(:disabled){transform:scale(0.96);background:rgba(0,0,0,0.2)}
.btn-toolbar:disabled{opacity:0.3;cursor:default}
.settings-stage{position:relative;margin-top:0;min-height:250px;width:100%}
#select-keys-instruction{position:absolute;top:100px;left:50%;transform:translate(-50%,0);text-align:center;color:var(--text-tertiary);font-size:15px;font-weight:500;z-index:10;pointer-events:none;opacity:0;transition:opacity 0.4s ease-out}
#select-keys-instruction.active{opacity:1}
#select-keys-instruction.dismissed{opacity:0 !important;display:none}
#select-keys-instruction.warning{color:var(--accent-red);animation:shake 0.4s ease}
.dks-configured-panel{display:none;width:100%;max-width:480px;margin:0 auto}
.dks-configured-panel.visible{display:block}
.dks-configured-content{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 32px;background:linear-gradient(145deg,rgba(40,40,40,0.7) 0%,rgba(20,20,20,0.5) 100%);backdrop-filter:blur(16px);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.08),0 10px 30px -10px rgba(0,0,0,0.5);text-align:center}
.dks-configured-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 20px;background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3);border-radius:var(--radius-pill);color:#A855F7;font-size:13px;font-weight:600;letter-spacing:1px}
.dks-configured-text h3{font-size:15px;font-weight:500;color:var(--text-primary);margin-bottom:4px}
.dks-configured-text p{font-size:13px;color:var(--text-secondary)}
.dks-configured-link{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--duration)}
.dks-configured-link:hover{color:var(--text-primary);border-color:var(--text-tertiary);background:rgba(255,255,255,0.04)}
.dks-configured-link svg{width:14px;height:14px}
#keyboard-diagram .key.has-dks::after{content:'DKS';position:absolute;bottom:2px;right:2px;font-size:7px;font-weight:700;color:#A855F7;background:rgba(168,85,247,0.2);padding:1px 3px;border-radius:3px;line-height:1;letter-spacing:0.3px;z-index:10;pointer-events:none;opacity:1 !important}
#keyboard-diagram .key.has-dks .key-values-display,#keyboard-diagram .key.has-dks:hover .key-values-display,#keyboard-diagram .key.has-dks.selected .key-values-display{display:none !important;visibility:hidden !important}
#keyboard-diagram .key.has-dks:hover .kv-act,#keyboard-diagram .key.has-dks .kv-act{display:none !important}
#keyboard-diagram .key.has-dks:hover .kv-rt-badge,#keyboard-diagram .key.has-dks .kv-rt-badge,#keyboard-diagram .key.has-dks:hover .kv-rt-dot,#keyboard-diagram .key.has-dks .kv-rt-dot{display:none !important}
#mapping-keyboard .key.has-dks::after{content:'DKS';position:absolute;bottom:2px;right:2px;font-size:7px;font-weight:700;color:#A855F7;background:rgba(168,85,247,0.2);padding:1px 3px;border-radius:3px;line-height:1;letter-spacing:0.3px;z-index:10;pointer-events:none;opacity:1 !important}
.mapping-dks-panel{margin-top:8px}
.settings-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%;transition:opacity var(--duration) var(--ease-ios)}
.settings-panels.blur-state{opacity:0.15;filter:blur(4px) grayscale(100%);pointer-events:none}
.settings-layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}
.settings-layout-grid .panel{background-color:var(--bg-panel-solid);border-color:rgba(255,255,255,0.06);backdrop-filter:none;-webkit-backdrop-filter:none;padding:24px;overflow:visible}
.settings-layout-grid .tooltip-content{z-index:2000}
.settings-layout-grid .custom-select{width:calc(100% + 6px);margin-left:-3px;margin-right:-3px;padding:0;display:block}
.settings-layout-grid .custom-select .select-trigger{width:100%;margin:0;display:flex;height:36px;font-size:13px;padding:0 16px 0 14px;align-items:center}
.settings-layout-grid .btn-toolbar{width:100%;margin:0;height:36px;font-size:13px;padding:0 18px;display:flex;align-items:center;justify-content:center}
.settings-layout-grid .label-with-tooltip,.settings-layout-grid .system-control-item .label-with-tooltip{width:100%}
.settings-layout-grid .settings-buttons-stack{gap:12px}
.settings-layout-grid .panel-description{font-size:13px;color:var(--text-secondary);line-height:1.5;margin:0}
#settings-firmware-version{font-weight:600;color:var(--text-bright);margin-left:1px}
#functions-keyboard .key .key-values-display,#functions-keyboard .key .kv-act,#functions-keyboard .key .kv-rt-dot,#functions-keyboard .key .kv-rtv{display:none !important}
#functions-keyboard .key:hover .top,#functions-keyboard .key:hover .bottom,#functions-keyboard .key:hover .key-label-center{opacity:1}
#functions-keyboard .key.selected-secondary{border-color:var(--accent-success);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.1),0 0 0 1px var(--accent-success),inset 0 0 12px rgba(52,199,89,0.15)}
#functions-keyboard .key .fn-indicator{position:absolute;top:2px;left:2px;font-size:8px;font-weight:700;padding:2px 4px;border-radius:3px;line-height:1;letter-spacing:0.2px;z-index:10;text-shadow:0 1px 1px rgba(0,0,0,0.3)}
#functions-keyboard .key .fn-indicator.fn-rs{background:rgba(255,204,0,0.9);color:#1a1a1a}
#functions-keyboard .key .fn-indicator.fn-socd{background:rgba(48,165,85,0.85);color:white}
#functions-keyboard .key .fn-indicator.fn-mt{background:rgba(230,134,0,0.85);color:white}
#functions-instruction{text-align:center;color:var(--text-tertiary);font-size:14px;font-weight:500;margin-bottom:0;padding-bottom:16px;opacity:0;transition:opacity 0.3s ease-out}
#functions-instruction.active{opacity:1}
#functions-settings-panels{display:flex;flex-direction:column;align-items:center;gap:16px}
.fn-panel{padding:24px !important;gap:18px !important;width:400px;max-width:400px}
.fn-panel .panel-header{margin-bottom:0;min-height:0;padding-bottom:4px}
.fn-panel .panel-header h3{display:flex;align-items:center;gap:8px;flex:1}
.fn-panel-actions{padding-top:8px;margin-top:auto !important;gap:10px !important}
.fn-key-chip-sm{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;padding:0 10px;background:#1c1c1c;border-radius:var(--radius-pill);font-size:11px;font-weight:600;color:var(--text-bright)}
.fn-key-chip-sm.fn-key-chip-primary{border:1px solid var(--accent-blue);box-shadow:0 0 6px rgba(10,132,255,0.2)}
.fn-key-chip-sm.fn-key-chip-secondary{border:1px solid var(--accent-success);box-shadow:0 0 6px rgba(52,199,89,0.2)}
.fn-key-pair-inline{display:flex;align-items:center;gap:6px;margin-left:auto}
.fn-pair-plus{font-size:12px;font-weight:600;color:var(--text-tertiary)}
.fn-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fn-action-col{display:flex;flex-direction:column;gap:6px}
.fn-action-col label{font-size:12px;color:var(--text-secondary);font-weight:500}
.fn-key-picker{display:flex;align-items:center;justify-content:center;width:calc(100% + 6px);margin-left:-3px;margin-right:-3px;padding:0 14px;background:var(--bg-input);border-radius:var(--radius-pill);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--duration);height:36px;font-size:13px;position:relative}
.fn-key-picker:hover{border-color:var(--text-tertiary);background:var(--bg-input-hover)}
.fn-key-picker:active{transform:scale(0.98)}
.fn-key-picker:focus,.fn-key-picker.listening{border-color:var(--accent-blue);box-shadow:0 0 0 2px rgba(10,132,255,0.2);outline:none}
.fn-picker-value{font-size:12px;font-weight:600;color:var(--text-bright)}
.fn-picker-prompt{display:none;font-size:10px;color:var(--accent-blue)}
.fn-key-picker.listening .fn-picker-value{display:none}
.fn-key-picker.listening .fn-picker-prompt{display:block}
.fn-threshold-row{display:flex;align-items:center;gap:12px}
.fn-threshold-row label{font-size:12px;color:var(--text-secondary);font-weight:500;white-space:nowrap}
.fn-threshold-row .slider-group{flex:1}
.fn-warning-sm{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;font-size:11px;color:var(--accent-warning);background:rgba(240,173,78,0.1);border:1px solid rgba(240,173,78,0.3);border-radius:var(--radius-sm)}
.fn-warning-sm::before{content:'';width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ad4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0}
.btn-danger{height:36px;padding:0 14px;background:transparent;border:1px solid rgba(255,69,58,0.4);border-radius:var(--radius-pill);font-size:13px;font-weight:500;color:var(--accent-red);cursor:pointer;transition:all var(--duration);display:inline-flex;align-items:center;justify-content:center}
.btn-danger:hover{background:rgba(255,69,58,0.15);border-color:var(--accent-red-hover);color:var(--accent-red-hover)}
.btn-danger:active{transform:scale(0.97);background:rgba(255,69,58,0.25)}
.fn-priority-options{display:flex;flex-direction:column;gap:6px}
.fn-radio-option{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration)}
.fn-radio-option:hover{background:var(--bg-input-hover);border-color:var(--text-tertiary)}
.fn-radio-option.selected{background:rgba(10,132,255,0.08);border-color:var(--accent-blue)}
.fn-radio-option input[type="radio"]{display:none}
.fn-radio-check{width:16px;height:16px;border:2px solid var(--text-tertiary);border-radius:50%;flex-shrink:0;position:relative;transition:all var(--duration)}
.fn-radio-option.selected .fn-radio-check{border-color:var(--accent-blue)}
.fn-radio-option.selected .fn-radio-check::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background:var(--accent-blue);border-radius:50%}
.fn-radio-content{display:flex;flex-direction:column;gap:1px}
.fn-radio-title{font-size:12px;font-weight:500;color:var(--text-bright)}
.fn-radio-desc{font-size:10px;color:var(--text-secondary)}
.panel-actions{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px}
.btn-secondary{flex:1;height:36px;padding:0 14px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all var(--duration);display:inline-flex;align-items:center;justify-content:center}
.btn-secondary:hover{background:var(--bg-input);border-color:var(--text-tertiary)}
.btn-secondary:active{transform:scale(0.97);background:var(--bg-input-hover)}
.btn-primary{flex:1;height:36px;padding:0 16px;background:var(--accent-blue);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-pill);font-size:13px;font-weight:600;letter-spacing:0.02em;color:white;cursor:pointer;transition:all var(--duration);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 0 1px rgba(255,255,255,0.5);display:inline-flex;align-items:center;justify-content:center}
.btn-primary:hover{background:var(--accent-blue-hover)}
.btn-primary:active:not(:disabled){transform:scale(0.97);background:#0070d4}
.btn-primary:disabled,.btn-primary.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}
.panel{background:linear-gradient(145deg,rgba(40,40,40,0.7) 0%,rgba(20,20,20,0.5) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:none;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.08),0 0 0 1px rgba(255,255,255,0),0 10px 30px -10px rgba(0,0,0,0.5);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:20px;transition:box-shadow 0.2s ease}
.panel:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.18),0 0 0 1px rgba(255,255,255,0.10),0 12px 32px -2px rgba(0,0,0,0.5)}
.panel.disabled{opacity:0.4;pointer-events:none}
#actuation-panel{display:flex;flex-direction:column}
.system-controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;align-self:stretch;margin:0;padding:0}
.system-control-item{display:grid;grid-template-columns:1fr;gap:8px;position:relative;overflow:visible;width:100%;min-width:0;margin:0;padding:0;justify-self:stretch;align-self:stretch}
.system-control-item > *{width:100%;min-width:0;justify-self:stretch;margin:0}
.system-control-item .custom-select{position:relative;z-index:10;width:100%;min-width:0;justify-self:stretch;display:block}
.system-control-item .custom-select .select-trigger{width:100%}
.system-control-item .custom-select.open{z-index:100}
.system-control-item .label-with-tooltip{padding-left:0;margin-left:0;justify-self:stretch;width:100%}
.system-control-item .label-with-tooltip label{font-size:12px}
.custom-select.compact{min-width:0}
.custom-select.compact .select-trigger{padding:0 16px 0 14px;font-size:13px}
.custom-select.compact .options-list{min-width:100%}
.custom-select.compact .option{min-height:36px;padding:8px 16px 8px 14px;font-size:13px}
.system-deadzone-row{margin-top:auto}
.system-deadzone-row .btn-secondary{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background-color:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:0 14px;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all 0.2s;height:36px}
.system-deadzone-row .btn-secondary:hover{background-color:var(--bg-input-hover);border-color:var(--text-tertiary)}
.system-deadzone-row .btn-secondary:hover .deadzone-values-badge{color:var(--text-secondary)}
.system-deadzone-row .btn-secondary:active{transform:scale(0.98)}
.deadzone-values-badge{font-size:12px;color:var(--text-tertiary);font-weight:400;font-feature-settings:"tnum";transition:color 0.2s}
.panel-header{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.panel-header h3{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;margin:0}
.panel-row-column{display:flex;flex-direction:column;gap:8px;width:100%}
.label-row{min-height:20px;display:flex;align-items:center}
.label-with-tooltip{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--text-secondary)}
.slider-group{display:flex;align-items:center;gap:12px;width:100%}
.slider-value-input{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);height:36px;padding:0;border-radius:var(--radius-pill);color:var(--text-value);font-weight:600;width:68px;text-align:center;font-size:13px;transition:border-color var(--duration),background-color var(--duration)}
.slider-value-input:hover:not(:disabled):not(:focus){background-color:rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.12)}
.slider-value-input:focus{background:rgba(0,0,0,0.4);border-color:rgba(255,255,255,0.25)}
.slider-value-input:focus:hover{border-color:var(--accent-blue)}
.slider-value-input:focus-visible{outline:none}
.unit-label{font-size:12px;color:var(--text-tertiary);margin-left:-6px}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{width:100%;height:4px;background:linear-gradient( to right,var(--accent-blue) 0%,var(--accent-blue) var(--slider-fill,0%),rgba(255,255,255,0.1) var(--slider-fill,0%),rgba(255,255,255,0.1) 100% );border-radius:2px;transition:background var(--duration)}
input[type="range"]:hover::-webkit-slider-runnable-track{background:linear-gradient( to right,var(--accent-blue) 0%,var(--accent-blue) var(--slider-fill,0%),rgba(255,255,255,0.2) var(--slider-fill,0%),rgba(255,255,255,0.2) 100% )}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;background:var(--text-bright);box-shadow:0 2px 8px rgba(0,0,0,0.5);margin-top:-7px;transition:transform 0.2s var(--ease-squish),box-shadow 0.2s}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.3);background:var(--accent-blue);box-shadow:0 0 0 4px rgba(10,132,255,0.2)}
input[type="range"]::-moz-range-track{width:100%;height:4px;background:linear-gradient( to right,var(--accent-blue) 0%,var(--accent-blue) var(--slider-fill,0%),rgba(255,255,255,0.1) var(--slider-fill,0%),rgba(255,255,255,0.1) 100% );border-radius:2px}
input[type="range"]::-moz-range-progress{background:var(--accent-blue);height:4px;border-radius:2px}
input[type="range"]::-moz-range-thumb{border:none;height:18px;width:18px;border-radius:50%;background:var(--text-bright);box-shadow:0 2px 5px rgba(0,0,0,0.3);transition:transform 0.2s ease}
input[type="range"]::-moz-range-thumb:hover{transform:scale(1.15)}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;transition:width 0.15s ease}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.1);border-radius:22px;transition:background 0.15s ease,background-color 0.15s ease}
.toggle-switch:hover .toggle-slider{background-color:rgba(255,255,255,0.2)}
.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background-color:var(--slider-thumb);border-radius:50%;transition:transform 0.2s ease,background-color 0.2s ease,width 0.2s ease}
input:checked + .toggle-slider{background-color:var(--accent-blue)}
.toggle-switch:hover input:checked + .toggle-slider{background-color:var(--accent-blue-hover)}
input:checked + .toggle-slider:before{transform:translateX(18px);background-color:var(--text-bright)}
.toggle-switch:has(input:indeterminate){width:52px}
.toggle-switch.transitioning-from-mixed{width:52px}
.toggle-switch.transitioning-from-mixed .toggle-slider::after{opacity:0}
.toggle-switch.transitioning-from-mixed .toggle-slider:before{transform:translateX(var(--knob-freeze,15px));transition:none}
input:indeterminate + .toggle-slider{background-color:rgba(255,255,255,0.12);cursor:pointer;transition:background 0.15s ease,background-color 0.15s ease,width 0.15s ease}
input:indeterminate + .toggle-slider:before{transform:translateX(15px);width:18px;background-color:var(--text-secondary);transition:transform 0.15s ease,background-color 0.15s ease,width 0.15s ease}
input:indeterminate + .toggle-slider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:12px;background:rgba(255,255,255,0.5);border-radius:1px;transition:opacity 0.15s ease;z-index:1}
input:indeterminate + .toggle-slider:hover:before{background-color:var(--text-bright)}
input:indeterminate + .toggle-slider.hover-off{background:linear-gradient(to right,rgba(255,255,255,0.18) 0%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.08) 100%)}
input:indeterminate + .toggle-slider.hover-off:before{transform:translateX(2px);background-color:var(--text-primary)}
input:indeterminate + .toggle-slider.hover-off::after{opacity:0}
input:indeterminate + .toggle-slider.hover-on{background:linear-gradient(to right,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.08) 50%,rgba(10,132,255,0.65) 50%,rgba(10,132,255,0.65) 100%)}
input:indeterminate + .toggle-slider.hover-on:before{transform:translateX(30px);background-color:var(--text-bright)}
input:indeterminate + .toggle-slider.hover-on::after{opacity:0}
.toggle-switch.toggle-small{width:36px;height:20px}
.toggle-switch.toggle-small .toggle-slider:before{width:14px;height:14px;left:3px;bottom:3px}
.toggle-switch.toggle-small input:checked + .toggle-slider:before{transform:translateX(16px)}
.crt-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:-8px;padding:8px 0 14px;transition:opacity 0.2s ease}
.crt-toggle-row.disabled{opacity:0.35}
.crt-toggle-row.disabled .toggle-switch{pointer-events:none}
@keyframes crt-shake{0%,100%{transform:translateX(0)}
20%,60%{transform:translateX(-3px)}
40%,80%{transform:translateX(3px)}
}
.crt-toggle-row.shake{animation:crt-shake 0.3s ease}
.crt-toggle-row.flash .toggle-slider{background-color:rgba(255,59,48,0.3) !important;transition:background-color 0.1s ease}
.crt-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.crt-label .tooltip-trigger{margin-top:0}
.toggle-switch.toggle-small:has(input:indeterminate){width:46px}
.toggle-switch.toggle-small.transitioning-from-mixed{width:46px}
.toggle-switch.toggle-small.transitioning-from-mixed .toggle-slider:before{transform:translateX(var(--knob-freeze,13px));transition:none}
.toggle-switch.toggle-small input:indeterminate + .toggle-slider:before{transform:translateX(13px);width:14px}
.toggle-switch.toggle-small input:indeterminate + .toggle-slider::after{height:10px}
.toggle-switch.toggle-small input:indeterminate + .toggle-slider.hover-off:before{transform:translateX(2px)}
.toggle-switch.toggle-small input:indeterminate + .toggle-slider.hover-on:before{transform:translateX(26px)}
.custom-select{position:relative;width:100%;font-family:'Inter',sans-serif}
.select-trigger{width:100%;background-color:var(--bg-input);border:1px solid var(--border-subtle);color:var(--text-primary);padding:0 16px 0 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all 0.2s}
.select-trigger:after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #999}
.select-trigger:hover{background-color:var(--bg-input-hover);border-color:var(--text-tertiary)}
.select-trigger:active{transform:scale(0.98)}
.custom-select.open .select-trigger{border-color:var(--accent-blue);box-shadow:var(--active-state)}
.profile-menu-dropdown,.options-list{position:absolute;background-color:var(--bg-input-hover);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);padding:8px 4px 8px 6px;box-shadow:0 8px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.2);min-width:140px;z-index:200;list-style:none;transform-origin:top;opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.98);transition:all var(--duration-fast) var(--ease-ios)}
.profile-menu-dropdown{top:calc(100% + 4px);right:0;transform-origin:top right}
.options-list{top:calc(100% + 4px);left:0;right:0;scroll-padding-top:8px;scroll-padding-bottom:8px}
.options-list,.modal-body,.modal textarea{scrollbar-width:thin;scrollbar-color:transparent transparent}
.options-list:hover,.modal-body:hover,.modal textarea:hover,.modal textarea:focus{scrollbar-color:rgba(255,255,255,0.2) transparent}
.options-list::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.modal textarea::-webkit-scrollbar{width:6px}
.options-list::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,.modal textarea::-webkit-scrollbar-track{background:transparent}
.options-list::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.modal textarea::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;transition:background 0.2s ease}
.options-list:hover::-webkit-scrollbar-thumb,.modal-body:hover::-webkit-scrollbar-thumb,.modal textarea:hover::-webkit-scrollbar-thumb,.modal textarea:focus::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2)}
.options-list::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover,.modal textarea::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.35)}
.profile-menu-dropdown.show,.custom-select.open .options-list{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.profile-menu-dropdown li,.options-list .option{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;font-family:'Inter',-apple-system,sans-serif;font-size:13px;font-weight:400;color:var(--text-primary);border-radius:var(--radius-sm);min-height:36px;padding:8px 14px;margin-bottom:4px;cursor:pointer;transition:background-color 0.1s,color 0.1s}
.profile-menu-dropdown li:last-child,.options-list .option:last-child{margin-bottom:0}
.profile-menu-dropdown li:hover,.options-list .option:hover{background-color:rgba(255,255,255,0.08);color:var(--text-bright)}
.profile-menu-dropdown li:active,.options-list .option:active{transform:scale(0.98);background-color:rgba(255,255,255,0.12)}
.profile-menu-dropdown li.delete:active{background-color:rgba(255,69,58,0.2)}
.options-list .option.selected{color:var(--accent-blue);font-weight:500;background-color:rgba(10,132,255,0.08)}
.options-list .option.selected:hover{background-color:rgba(10,132,255,0.12)}
.options-list .option.disabled{color:var(--text-tertiary);cursor:default;pointer-events:none;display:flex;justify-content:space-between;align-items:center}
.options-list .option.disabled:hover{background-color:transparent;color:var(--text-tertiary)}
.coming-soon{font-size:10px;font-weight:500;color:var(--text-tertiary);background:rgba(255,255,255,0.06);padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px}
.profile-menu-dropdown li.delete:hover{background-color:rgba(255,69,58,0.12);color:var(--accent-red)}
#rt-controls-wrapper{display:flex;flex-direction:column;gap:20px;transition:opacity var(--duration)}
#rt-controls-wrapper.disabled{opacity:0.3;pointer-events:none}
#rt-controls-wrapper.mixed-rt-state{opacity:0.3;pointer-events:none}
.btn-text-link{font-size:12px;font-weight:500;color:var(--text-tertiary);cursor:pointer;padding:4px 0;background:transparent;border:none;text-align:left;transition:color var(--duration);margin-top:12px;display:inline-block}
.btn-text-link:hover{color:var(--text-secondary)}
.btn-text-link.disclosure{display:inline-flex;align-items:center;gap:6px}
.btn-text-link.disclosure .disclosure-arrow{transition:transform var(--duration) var(--ease-ios);flex-shrink:0}
.btn-text-link.disclosure.expanded .disclosure-arrow{transform:rotate(180deg)}
#advanced-rt-sliders{display:flex;flex-direction:column;gap:20px;max-height:0;opacity:0;overflow:hidden;margin-top:-10px;transition:all var(--duration) var(--ease-ios)}
#advanced-rt-sliders.visible{max-height:120px;opacity:1;margin-top:0}
.modal-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,0.75);z-index:999;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity var(--duration)}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);background-color:var(--bg-input-hover);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:24px;width:90%;max-width:480px;z-index:1000;box-shadow:0 20px 50px rgba(0,0,0,0.5);display:none;flex-direction:column;gap:16px;opacity:0;transition:all var(--duration) var(--ease-ios)}
.modal.show{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal-header{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.modal-header h2{font-size:18px;font-weight:600;color:var(--text-bright);margin:0}
.modal-close-btn{background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:all var(--duration);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;margin:-4px -4px -4px 0;flex-shrink:0}
.modal-close-btn svg{width:18px;height:18px;stroke-width:2}
.modal-close-btn:hover{color:var(--text-bright);background-color:rgba(255,255,255,0.1)}
.modal-close-btn:active{transform:scale(0.9);background-color:rgba(255,255,255,0.05)}
.modal-body{overflow-y:auto;max-height:60vh;padding:4px 0;scroll-padding-top:8px;scroll-padding-bottom:8px}
.modal .description-text{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0 0 16px}
.modal .description-text:last-child{margin-bottom:0}
.modal textarea{width:100%;background:#111;border:1px solid var(--border-subtle);color:var(--text-primary);padding:12px;border-radius:var(--radius-sm);font-family:'Inter',-apple-system,sans-serif;font-size:12px;resize:none}
.modal textarea:focus{border-color:var(--accent-blue);box-shadow:var(--active-state);outline:none}
.modal textarea.share-code-preview{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);background:var(--bg-app);border:1px solid var(--border-subtle);cursor:default;user-select:all;line-height:1.5}
.modal textarea.share-code-preview:focus{border-color:var(--border-subtle);box-shadow:none}
.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:8px}
.btn-modal{height:36px;padding:0 16px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;letter-spacing:0.02em;cursor:pointer;border:none;transition:background-color 0.2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-flex;align-items:center;justify-content:center}
.btn-modal:active{transform:scale(0.96)}
.btn-modal.secondary{background:rgba(255,255,255,0.1);color:var(--text-primary);font-weight:500}
.btn-modal.secondary:hover{background:rgba(255,255,255,0.15)}
.btn-modal.primary{background:var(--accent-blue);color:var(--text-bright);text-shadow:0 0 1px rgba(255,255,255,0.5)}
.btn-modal.primary:hover{background:var(--accent-blue-hover)}
.btn-modal.primary.loading{opacity:0.7;cursor:wait}
.btn-modal.primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-modal.danger{background:var(--accent-red);color:var(--text-bright);text-shadow:0 0 1px rgba(255,255,255,0.5)}
.btn-modal.danger:hover{background:var(--accent-red-hover)}
.import-slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.import-slot-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) ease}
.import-slot-btn:hover{background:var(--bg-input-hover);border-color:var(--accent-blue)}
.import-slot-btn:active{transform:scale(0.97);background:var(--bg-panel-solid)}
.import-slot-btn .slot-name{font-size:14px;font-weight:500;color:var(--text-primary)}
.import-slot-btn .slot-number{font-size:11px;color:var(--text-secondary);margin-top:2px}
.import-slot-btn.empty{border-style:dashed;opacity:0.7}
.import-slot-btn.empty:hover{opacity:1}
.import-slot-btn.empty .slot-name{color:var(--text-secondary)}
.import-slot-btn.selected{background:var(--bg-surface);border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue),0 0 12px rgba(10,132,255,0.2)}
.import-slot-btn.selected .slot-name{color:var(--text-bright)}
.profile-item.empty-slot .btn-empty-slot{flex-grow:1;display:flex;align-items:center;gap:6px;height:36px;padding:0 16px 0 14px;background:transparent;border:1px dashed var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all var(--duration-fast) ease;opacity:0.6}
.profile-item.empty-slot .btn-empty-slot:hover{opacity:1;border-color:var(--accent-blue);color:var(--text-primary)}
.profile-item.empty-slot .btn-empty-slot:active{transform:scale(0.98);background:rgba(10,132,255,0.1)}
.profile-item.empty-slot .empty-slot-icon{font-size:14px;font-weight:300}
.profile-item.empty-slot .empty-slot-text{font-size:12px}
.profile-item.demo-locked-slot .btn-demo-locked{flex-grow:1;background:transparent;border:1px dashed var(--border-subtle);color:var(--text-tertiary);height:36px;padding:0 16px 0 14px;border-radius:var(--radius-pill);text-align:left;font-size:13px;font-weight:400;cursor:not-allowed;opacity:0.5;display:flex;align-items:center}
.btn-import-profile.demo-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.btn-profile-menu-placeholder{width:28px;height:28px;flex-shrink:0}
.btn-small{padding:6px 10px;font-size:11px}
.deadzone-warning{display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 14px;font-size:11px;color:var(--accent-warning);background:rgba(240,173,78,0.1);border:1px solid rgba(240,173,78,0.3);border-radius:var(--radius-sm)}
.deadzone-warning svg{flex-shrink:0;stroke:var(--accent-warning)}
.tooltip-container{position:relative;display:inline-flex}
.tooltip-trigger{color:var(--text-tertiary);cursor:help;transition:color 0.2s;display:flex;align-items:center;height:100%;margin-top:2px}
.tooltip-trigger:hover{color:var(--text-primary)}
.tooltip-trigger svg{width:14px;height:14px;stroke-width:2}
.tooltip-content{display:none;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#252525;border:1px solid var(--border-subtle);color:#ddd;font-size:12px;padding:8px 12px;border-radius:var(--radius-sm);width:220px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,0.5);line-height:1.4}
.tooltip-trigger:hover + .tooltip-content{display:block;animation:fade-in 0.2s}
.global-tooltip{position:fixed;background:#252525;border:1px solid var(--border-subtle);color:var(--text-bright);padding:6px 10px;border-radius:var(--radius-sm);font-size:12px;pointer-events:none;z-index:2000;opacity:0;transform:translateY(5px);transition:all var(--duration-fast)}
.global-tooltip.show{opacity:1;transform:translateY(0)}
.global-tooltip kbd{background:#111;border:1px solid #444;border-radius:3px;padding:1px 4px;margin:0 2px;font-family:sans-serif;font-size:10px;color:#aaa}
.global-tooltip .tooltip-primary{display:block}
.global-tooltip .tooltip-secondary{display:block;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,0.1);color:var(--text-secondary);font-size:11px}
.key-label-center{transition:opacity 0.03s ease-out;opacity:1}
body.mode-actuation .key .key-label-center,body.mode-actuation .key .top,body.mode-actuation .key .bottom,body.mode-rt .key.has-rt .key-label-center,body.mode-rt .key.has-rt .top,body.mode-rt .key.has-rt .bottom{opacity:0}
.key-values-display{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;z-index:6}
.kv-act{color:var(--text-bright);font-weight:600;font-size:calc(11px * var(--kbd-scale));font-family:'Inter',-apple-system,sans-serif;font-feature-settings:"tnum";line-height:1;display:none}
.kv-rt-dot{width:calc(4px * var(--kbd-scale));height:calc(4px * var(--kbd-scale));border-radius:50%;background:var(--accent-blue);margin-top:calc(3px * var(--kbd-scale));display:none}
.kv-rt-badge{position:absolute;top:2px;left:2px;font-size:8px;font-weight:700;padding:2px 4px;border-radius:3px;line-height:1;letter-spacing:0.2px;background:rgba(10,132,255,0.85);color:white;text-shadow:0 1px 1px rgba(0,0,0,0.3);z-index:10;display:none;pointer-events:none}
.kv-rtv{display:none;flex-direction:column;align-items:center;justify-content:center;gap:calc(1px * var(--kbd-scale));margin-top:calc(4px * var(--kbd-scale))}
.key.selected.has-rt.rt-split .key-values-display{padding-top:calc(2px * var(--kbd-scale))}
.key.selected.has-rt.rt-split .kv-rtv{margin-left:calc(-2px * var(--kbd-scale))}
.key:hover:not(.selected):not(.dragging) .kv-act{display:block;opacity:0.6}
.key.has-rt:hover:not(.selected):not(.dragging) .kv-rt-badge{display:block;opacity:0.8}
.key.has-rt:hover:not(.selected):not(.dragging) .kv-rt-dot{display:none}
.key.selected .kv-act{display:block;opacity:1}
.key.selected.has-rt .kv-rtv{display:flex;opacity:1}
.key.selected.has-rt .kv-rt-badge{display:none}
.key.selected.has-rt.rt-unified .kv-rtv{margin-top:calc(3px * var(--kbd-scale))}
.key.selected.has-rt.rt-unified .rt-row.single{font-size:calc(11px * var(--kbd-scale))}
.key.selected.has-rt .kv-rt-dot{display:none}
body.mode-actuation .key:hover:not(.selected) .kv-act,body.mode-rt .key:hover:not(.selected) .kv-act{display:none}
body.mode-actuation .key:hover:not(.selected) .kv-rt-dot,body.mode-rt .key:hover:not(.selected) .kv-rt-dot,body.mode-actuation .key:hover:not(.selected) .kv-rt-badge,body.mode-rt .key:hover:not(.selected) .kv-rt-badge{display:none}
body.mode-actuation .key .kv-act{display:block;opacity:0.7}
body.mode-actuation .key.selected .kv-act{opacity:1}
body.mode-actuation .key .kv-rt-dot{display:none !important}
body.mode-actuation .key.selected.has-rt.rt-unified .kv-rtv{margin-top:calc(3px * var(--kbd-scale))}
body.mode-actuation .key.selected.has-rt.rt-unified .rt-row.single{font-size:calc(11px * var(--kbd-scale))}
body.mode-rt .key{filter:brightness(0.3);transition:filter var(--duration-fast) ease}
body.mode-rt .key.selected:not(.has-rt){filter:brightness(0.5);border-color:var(--accent-blue);border-width:1.5px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.1),0 0 0 1px var(--accent-blue),0 0 10px rgba(10,132,255,0.5)}
body.mode-rt .key.has-rt{filter:brightness(1)}
body.mode-rt .key.has-rt .kv-rtv{display:flex;opacity:1}
body.mode-rt .key.has-rt:not(.selected) .kv-rtv{margin-top:0}
body.mode-rt .key.has-rt.rt-unified .rt-row.single{font-size:calc(11px * var(--kbd-scale))}
body.mode-rt .key .kv-rt-dot{display:none !important}
body.mode-rt .key.has-rt .kv-rt-badge{display:none !important}
body.mode-actuation .key .kv-rt-badge{display:none !important}
.rt-row{display:flex;align-items:center;justify-content:center;gap:2px;font-family:'Inter',-apple-system,sans-serif;font-feature-settings:"tnum";font-weight:600;font-size:calc(10px * var(--kbd-scale));line-height:1}
.rt-row .arrow{font-size:calc(8px * var(--kbd-scale));opacity:0.6;display:flex;align-items:center}
.rt-row.down{color:var(--text-value)}
.rt-row.up{color:var(--text-value)}
.rt-row.single{color:var(--text-value)}
.key.rt-unified .rt-row.single{font-size:calc(11px * var(--kbd-scale))}
.key.rt-split .kv-rtv{gap:0}
.key.rt-split .rt-row{font-size:calc(9px * var(--kbd-scale))}
.key.rt-split .rt-row .arrow{font-size:calc(7px * var(--kbd-scale))}
#too-small-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.9);z-index:5000;opacity:0;pointer-events:none;transition:opacity 0.3s}
#too-small-overlay.show{opacity:1;pointer-events:auto}
.ts-card{background:#222;border:1px solid #444;padding:20px;border-radius:var(--radius-md);text-align:center}
#device-reset-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,5,5,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:4000;opacity:0;pointer-events:none;transition:opacity 0.15s ease}
#device-reset-overlay.visible{opacity:1;pointer-events:auto}
.reset-overlay-content{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--text-primary);font-size:15px;font-weight:500}
.reset-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,0.1);border-top-color:var(--accent-blue);border-radius:50%;animation:reset-spin 0.8s linear infinite}
@keyframes reset-spin{to{transform:rotate(360deg)}
}
@keyframes fade-in{to{opacity:1}
}
@keyframes fade-in-tab{from{opacity:0.8;transform:translateY(3px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes fade-in-scale{from{opacity:0;transform:scale(0.9)}
to{opacity:1;transform:scale(1)}
}
@keyframes pulse-glow{0%,100%{opacity:0.7;transform:scale(1)}
50%{opacity:1;transform:scale(1.15)}
}
@keyframes edit-pulse{0%{transform:scale(1)}
50%{transform:scale(1.02)}
100%{transform:scale(1)}
}
@keyframes shake{0%,100%{transform:translate(-50%,0) translateX(0)}
25%{transform:translate(-50%,0) translateX(-5px)}
75%{transform:translate(-50%,0) translateX(5px)}
}
.lighting-theater{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:calc(100vh - 180px);padding:0 20px 40px;position:relative;overflow:visible}
.lighting-glow{display:none}
.lighting-stage{position:relative;z-index:1;margin-bottom:var(--keyboard-content-gap)}
.lighting-keyboard-wrapper{pointer-events:auto;user-select:none}
.lighting-keyboard-wrapper .key{cursor:default;pointer-events:auto;isolation:isolate;overflow:visible !important;background:linear-gradient(145deg,#2a2a2a 0%,#1a1a1a 100%) !important}
.lighting-keyboard-wrapper .key:hover,.lighting-keyboard-wrapper .key:active{transform:none !important;filter:none !important;background:linear-gradient(145deg,#2a2a2a 0%,#1a1a1a 100%) !important;border-color:rgba(255,255,255,0.05)}
.lighting-keyboard-wrapper[data-effect="ripples"] .key,.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key,.lighting-keyboard-wrapper[data-effect="single-order"] .key,.lighting-keyboard-wrapper[data-effect="palace"] .key,.lighting-keyboard-wrapper[data-effect="piano"] .key{cursor:pointer}
.lighting-keyboard-wrapper .key:hover .top,.lighting-keyboard-wrapper .key:hover .bottom,.lighting-keyboard-wrapper .key:hover .key-label-center{opacity:1}
.lighting-keyboard-wrapper .key .top,.lighting-keyboard-wrapper .key .bottom,.lighting-keyboard-wrapper .key .key-label-center{color:rgba(255,255,255,0.55) !important;text-shadow:none !important}
.lighting-keyboard-wrapper .key::after{content:'';position:absolute;inset:0;background:transparent;border-radius:inherit;pointer-events:none;box-shadow:0 0 5px 1px color-mix(in srgb,var(--lit-color,#0A84FF) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--lit-color,#0A84FF) 60%,transparent);opacity:var(--lit-opacity,0);transition:opacity 0.2s ease,box-shadow 0.3s ease}
.lighting-keyboard-wrapper .key::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;border-bottom:1px solid color-mix(in srgb,var(--lit-color,#0A84FF) calc(var(--lit-opacity, 0) * 20%),transparent);opacity:var(--lit-opacity,0);transition:opacity 0.2s ease}
.lighting-keyboard-wrapper .light-bar{transition:background-color 0.3s ease,box-shadow 0.3s ease}
.lighting-keyboard-wrapper.animations-paused .key::after,.lighting-bars.animations-paused .light-bar{animation-play-state:paused !important}
.lighting-bars{--bar-color:rgb(255,255,255);--bar-brightness:0.7;--bar-speed:3s}
@keyframes lightbar-breathe{0%,100%{opacity:var(--bar-brightness,0.7)}
50%{opacity:calc(var(--bar-brightness, 0.7) * 0.3)}
}
@keyframes lightbar-color-cycle{0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}
.lighting-bars[data-effect="off"] .light-bar{background-color:#222 !important;box-shadow:none !important;opacity:0.3 !important;animation:none !important;filter:none !important}
.lighting-bars[data-effect="color-cycle"] .light-bar{animation:lightbar-color-cycle calc(var(--bar-speed, 5s) * 4) linear infinite}
.lighting-bars[data-effect="static"] .light-bar{animation:none;filter:none}
.lighting-bars[data-effect="breathing"] .light-bar{animation:lightbar-breathe var(--bar-speed,3s) ease-in-out infinite !important}
.lighting-controls{display:flex;align-items:center;gap:24px;padding:16px 32px;min-height:68px;box-sizing:border-box;background:rgba(30,30,30,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,0.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 0 0 0px rgba(255,255,255,0),0 8px 32px rgba(0,0,0,0.4);position:relative;z-index:2;overflow:visible;transition:box-shadow 0.2s ease,border-color 0.2s ease}
.lighting-controls:hover{border-color:rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 0 0 0px rgba(255,255,255,0),0 12px 36px rgba(0,0,0,0.45)}
.lighting-control-group{display:flex;align-items:center;gap:12px;overflow:visible}
.lighting-slider-group{gap:8px}
.lighting-label{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px}
.lighting-label svg{width:18px;height:18px;opacity:0.6}
.lighting-divider{width:1px;height:32px;background:rgba(255,255,255,0.1)}
.lighting-color-palette{position:relative;width:32px;height:32px;cursor:pointer;z-index:100;overflow:visible}
.lighting-color-palette::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(20,20,22,0.95) 0%,rgba(20,20,22,0.85) 70%,transparent 100%);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.25s cubic-bezier(0.34,1.2,0.64,1),height 0.25s cubic-bezier(0.34,1.2,0.64,1);pointer-events:none;z-index:-1}
.lighting-color-palette.palette-expanded::before{width:160px;height:160px}
.lighting-color-palette.palette-expanded{width:32px;height:32px;z-index:200}
.color-swatch{position:absolute;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);cursor:pointer;padding:0;outline:none;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;will-change:transform,opacity;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s ease,border-color 0.15s ease,box-shadow 0.2s ease}
.color-swatch.active-trigger{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto;border-color:rgba(255,255,255,0.3);box-shadow:0 0 12px currentColor;z-index:20}
.color-swatch.active-trigger:hover{transform:translate(-50%,-50%) scale(1.1);border-color:rgba(255,255,255,0.5)}
.lighting-color-palette.palette-expanded .color-swatch{opacity:1;pointer-events:auto}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(1){transform:translate(-50%,-50%) translate(0px,-52px) scale(1);transition-delay:0.00s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(2){transform:translate(-50%,-50%) translate(36px,-36px) scale(1);transition-delay:0.02s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(3){transform:translate(-50%,-50%) translate(52px,0px) scale(1);transition-delay:0.04s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(4){transform:translate(-50%,-50%) translate(36px,36px) scale(1);transition-delay:0.06s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(5){transform:translate(-50%,-50%) translate(0px,52px) scale(1);transition-delay:0.08s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(6){transform:translate(-50%,-50%) translate(-36px,36px) scale(1);transition-delay:0.10s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(7){transform:translate(-50%,-50%) translate(-52px,0px) scale(1);transition-delay:0.12s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(8){transform:translate(-50%,-50%) translate(-36px,-36px) scale(1);transition-delay:0.14s}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(9){transform:translate(-50%,-50%) translate(0px,0px) scale(1);transition-delay:0.16s}
.lighting-color-palette.palette-expanded .color-swatch.active-trigger{box-shadow:none;border-color:rgba(255,255,255,0.15)}
.lighting-color-palette.palette-expanded .color-swatch:hover{transform:translate(-50%,-50%) scale(1.15);border-color:rgba(255,255,255,0.5);z-index:10}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(1):hover{transform:translate(-50%,-50%) translate(0px,-52px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(2):hover{transform:translate(-50%,-50%) translate(36px,-36px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(3):hover{transform:translate(-50%,-50%) translate(52px,0px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(4):hover{transform:translate(-50%,-50%) translate(36px,36px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(5):hover{transform:translate(-50%,-50%) translate(0px,52px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(6):hover{transform:translate(-50%,-50%) translate(-36px,36px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(7):hover{transform:translate(-50%,-50%) translate(-52px,0px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(8):hover{transform:translate(-50%,-50%) translate(-36px,-36px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch:nth-child(9):hover{transform:translate(-50%,-50%) translate(0px,0px) scale(1.15)}
.lighting-color-palette.palette-expanded .color-swatch.active{border-color:#fff;box-shadow:0 0 14px 2px currentColor;z-index:15}
.lighting-slider{-webkit-appearance:none;appearance:none;width:100px;height:6px;background:rgba(255,255,255,0.1);border-radius:3px;outline:none;cursor:pointer}
.lighting-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--text-bright);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:transform 0.15s ease}
.lighting-slider::-moz-range-thumb{width:18px;height:18px;background:var(--text-bright);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.lighting-value{font-size:12px;font-weight:600;color:var(--text-value);min-width:32px;text-align:right;font-family:'JetBrains Mono',monospace}
.lighting-zone-switcher{display:flex;background:rgba(0,0,0,0.4);border-radius:var(--radius-sm);padding:4px;gap:4px}
.zone-btn{padding:7px 16px;background:transparent;border:none;border-radius:6px;font-size:12px;font-weight:500;color:var(--text-tertiary);cursor:pointer;transition:all var(--duration-fast) ease}
.zone-btn:hover{color:var(--text-secondary)}
.zone-btn.active{background:rgba(255,255,255,0.12);color:var(--text-primary)}
.lighting-zone{display:flex;align-items:center;gap:24px;min-height:36px}
.lighting-control-group.muted{opacity:0.25;pointer-events:none;user-select:none;transition:opacity 0.2s ease}
.lighting-control-group{transition:opacity 0.2s ease}
.lighting-control-group.muted *{cursor:default !important;pointer-events:none !important}
.lighting-control-group.muted .lighting-color-palette{pointer-events:none !important}
.lighting-divider.muted{opacity:0.15;transition:opacity 0.2s ease}
.lighting-divider{transition:opacity 0.2s ease}
.lighting-custom-select{width:auto;min-width:160px}
.lighting-custom-select .select-trigger{height:36px;padding:0 16px 0 14px;font-size:13px;display:flex;align-items:center}
.lighting-custom-select .options-list{min-width:160px;max-height:280px;overflow-y:auto;padding:8px 6px}
.lighting-keyboard-wrapper[data-effect="off"] .key::after{opacity:0 !important;animation:none !important}
.lighting-keyboard-wrapper[data-effect="off"] .key::before{opacity:0 !important}
.lighting-keyboard-wrapper[data-effect="static"] .key::after{opacity:var(--lit-opacity,0.15)}
.lighting-keyboard-wrapper[data-effect="static"] .key::before{opacity:var(--lit-opacity,0.15)}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .key::after{opacity:var(--lit-opacity,0.15)}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .key::before{opacity:var(--lit-opacity,0.15)}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .key{--gradient-mix:0}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(1)::after{--key-glow:var(--lit-color);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(2)::after{--key-glow:color-mix(in srgb,var(--lit-color) 97%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(3)::after{--key-glow:color-mix(in srgb,var(--lit-color) 94%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(4)::after{--key-glow:color-mix(in srgb,var(--lit-color) 90%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(5)::after{--key-glow:color-mix(in srgb,var(--lit-color) 85%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(6)::after{--key-glow:color-mix(in srgb,var(--lit-color) 78%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(7)::after{--key-glow:color-mix(in srgb,var(--lit-color) 70%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(8)::after{--key-glow:color-mix(in srgb,var(--lit-color) 60%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(9)::after{--key-glow:color-mix(in srgb,var(--lit-color) 48%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(10)::after{--key-glow:color-mix(in srgb,var(--lit-color) 35%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(11)::after{--key-glow:color-mix(in srgb,var(--lit-color) 22%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(12)::after{--key-glow:color-mix(in srgb,var(--lit-color) 12%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(13)::after{--key-glow:color-mix(in srgb,var(--lit-color) 5%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(14)::after{--key-glow:color-mix(in srgb,var(--lit-color) 2%,#94d3f7);box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
.lighting-keyboard-wrapper[data-effect="static-gradient"] .keyboard-row .key:nth-child(n+15)::after{--key-glow:#94d3f7;box-shadow:0 0 5px 1px color-mix(in srgb,var(--key-glow) 90%,transparent),0 0 10px 2px color-mix(in srgb,var(--key-glow) 60%,transparent) !important}
@keyframes lighting-breathe{0%,100%{opacity:0.05}
50%{opacity:var(--lit-max-opacity,0.25)}
}
.lighting-keyboard-wrapper[data-effect="breathing"] .key::after{animation:lighting-breathe var(--lit-speed,3s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="breathing"] .key::before{animation:lighting-breathe var(--lit-speed,3s) ease-in-out infinite}
@keyframes lighting-color-cycle{0%{filter:hue-rotate(0deg)}
100%{filter:hue-rotate(360deg)}
}
.lighting-keyboard-wrapper[data-effect="color-cycle"] .key::after{opacity:var(--lit-opacity,0.2);animation:lighting-color-cycle calc(var(--lit-speed, 5s) * 4) linear infinite}
.lighting-keyboard-wrapper[data-effect="color-cycle"] .key::before{opacity:var(--lit-opacity,0.2);animation:lighting-color-cycle calc(var(--lit-speed, 5s) * 4) linear infinite}
@keyframes lighting-flowers{0%,100%{filter:hue-rotate(0deg);opacity:var(--lit-opacity,0.2)}
25%{filter:hue-rotate(90deg);opacity:var(--lit-max-opacity,0.25)}
50%{filter:hue-rotate(180deg);opacity:var(--lit-opacity,0.2)}
75%{filter:hue-rotate(270deg);opacity:var(--lit-max-opacity,0.25)}
}
.lighting-keyboard-wrapper[data-effect="flowers"] .key::after{animation:lighting-flowers var(--lit-speed,4s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="flowers"] .key::before{animation:lighting-flowers var(--lit-speed,4s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(1)::after{animation-delay:-0.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(2)::after{animation-delay:-2.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(3)::after{animation-delay:-1.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(4)::after{animation-delay:-3.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(5)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(6)::after{animation-delay:-2.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(7)::after{animation-delay:-1.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(8)::after{animation-delay:-3.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(9)::after{animation-delay:-0.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(10)::after{animation-delay:-2.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(11)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(12)::after{animation-delay:-3.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(13)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(14)::after{animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(1) .key:nth-child(n+15)::after{animation-delay:-1.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(1)::after{animation-delay:-1.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(2)::after{animation-delay:-3.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(3)::after{animation-delay:-0.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(4)::after{animation-delay:-2.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(5)::after{animation-delay:-1.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(6)::after{animation-delay:-0.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(7)::after{animation-delay:-3.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(8)::after{animation-delay:-0.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(9)::after{animation-delay:-2.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(10)::after{animation-delay:-1.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(11)::after{animation-delay:-3.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(12)::after{animation-delay:-0.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(13)::after{animation-delay:-2.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(2) .key:nth-child(n+14)::after{animation-delay:-1.0s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(1)::after{animation-delay:-2.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(2)::after{animation-delay:-0.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(3)::after{animation-delay:-1.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(4)::after{animation-delay:-3.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(5)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(6)::after{animation-delay:-2.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(7)::after{animation-delay:-1.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(8)::after{animation-delay:-3.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(9)::after{animation-delay:-0.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(10)::after{animation-delay:-2.0s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(11)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(12)::after{animation-delay:-3.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(3) .key:nth-child(n+13)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(1)::after{animation-delay:-3.0s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(2)::after{animation-delay:-1.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(3)::after{animation-delay:-2.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(4)::after{animation-delay:-0.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(5)::after{animation-delay:-1.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:-3.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(7)::after{animation-delay:-0.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(8)::after{animation-delay:-2.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(9)::after{animation-delay:-1.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(10)::after{animation-delay:-3.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(11)::after{animation-delay:-0.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(4) .key:nth-child(n+12)::after{animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(1)::after{animation-delay:-1.6s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(2)::after{animation-delay:-3.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(3)::after{animation-delay:-0.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(4)::after{animation-delay:-2.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(5)::after{animation-delay:-1.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(6)::after{animation-delay:-3.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(7)::after{animation-delay:-0.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(8)::after{animation-delay:-2.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(9)::after{animation-delay:-1.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(10)::after{animation-delay:-3.1s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(5) .key:nth-child(n+11)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(1)::after{animation-delay:-2.2s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(2)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(3)::after{animation-delay:-3.5s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(4)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(5)::after{animation-delay:-2.8s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(6)::after{animation-delay:-0.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation-delay:-1.7s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(8)::after{animation-delay:-3.3s}
.lighting-keyboard-wrapper[data-effect="flowers"] .keyboard-row:nth-child(6) .key:nth-child(n+9)::after{animation-delay:-2.0s}
@keyframes lighting-wave-horizontal{0%,100%{opacity:0.05}
50%{opacity:var(--lit-max-opacity,0.25)}
}
.lighting-keyboard-wrapper[data-effect="wave"] .key::after{animation:lighting-wave-horizontal var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="wave"] .key::before{animation:lighting-wave-horizontal var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(1)::after{animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(2)::after{animation-delay:0.08s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(3)::after{animation-delay:0.16s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(4)::after{animation-delay:0.24s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(5)::after{animation-delay:0.32s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(6)::after{animation-delay:0.40s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(7)::after{animation-delay:0.48s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(8)::after{animation-delay:0.56s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(9)::after{animation-delay:0.64s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(10)::after{animation-delay:0.72s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(11)::after{animation-delay:0.80s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(12)::after{animation-delay:0.88s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(13)::after{animation-delay:0.96s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(14)::after{animation-delay:1.04s}
.lighting-keyboard-wrapper[data-effect="wave"] .key:nth-child(n+15)::after{animation-delay:1.12s}
@keyframes lighting-wave-vertical{0%,100%{opacity:0.05}
50%{opacity:var(--lit-max-opacity,0.25)}
}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .key::after{animation:lighting-wave-vertical var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .key::before{animation:lighting-wave-vertical var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(1) .key::after{animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(2) .key::after{animation-delay:0.15s}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(3) .key::after{animation-delay:0.30s}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(4) .key::after{animation-delay:0.45s}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(5) .key::after{animation-delay:0.60s}
.lighting-keyboard-wrapper[data-effect="wave-updown"] .keyboard-row:nth-child(6) .key::after{animation-delay:0.75s}
.lighting-keyboard-wrapper[data-effect="tide"] .key::after{animation:lighting-breathe var(--lit-speed,3s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(6) .key::after{animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(5) .key::after{animation-delay:0.25s}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(4) .key::after{animation-delay:0.50s}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(3) .key::after{animation-delay:0.75s}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(2) .key::after{animation-delay:1.00s}
.lighting-keyboard-wrapper[data-effect="tide"] .keyboard-row:nth-child(1) .key::after{animation-delay:1.25s}
@keyframes lighting-swing-col5{0%{opacity:var(--lit-max-opacity,0.2)}
4%{opacity:var(--lit-max-opacity,0.2)}
8%{opacity:0.03}
44%{opacity:0.03}
48%{opacity:var(--lit-max-opacity,0.2)}
53%{opacity:var(--lit-max-opacity,0.2)}
55%{opacity:0.03}
100%{opacity:0.03}
}
@keyframes lighting-swing-col4{0%{opacity:0.10}
2%{opacity:var(--lit-max-opacity,0.2)}
6%{opacity:var(--lit-max-opacity,0.2)}
10%{opacity:0.03}
42%{opacity:0.03}
46%{opacity:var(--lit-max-opacity,0.2)}
50%{opacity:var(--lit-max-opacity,0.2)}
53%{opacity:0.03}
100%{opacity:0.03}
}
@keyframes lighting-swing-col3{0%{opacity:0.03}
4%{opacity:0.10}
8%{opacity:var(--lit-max-opacity,0.2)}
13%{opacity:var(--lit-max-opacity,0.2)}
17%{opacity:0.03}
35%{opacity:0.03}
39%{opacity:var(--lit-max-opacity,0.2)}
44%{opacity:var(--lit-max-opacity,0.2)}
48%{opacity:0.03}
100%{opacity:0.03}
}
@keyframes lighting-swing-col2{0%{opacity:0.03}
8%{opacity:0.03}
13%{opacity:var(--lit-max-opacity,0.2)}
17%{opacity:var(--lit-max-opacity,0.2)}
21%{opacity:0.03}
31%{opacity:0.03}
35%{opacity:var(--lit-max-opacity,0.2)}
39%{opacity:var(--lit-max-opacity,0.2)}
44%{opacity:0.03}
100%{opacity:0.03}
}
@keyframes lighting-swing-col1{0%{opacity:0.03}
13%{opacity:0.03}
17%{opacity:var(--lit-max-opacity,0.2)}
22%{opacity:var(--lit-max-opacity,0.2)}
28%{opacity:var(--lit-max-opacity,0.2)}
33%{opacity:var(--lit-max-opacity,0.2)}
38%{opacity:0.03}
100%{opacity:0.03}
}
.lighting-keyboard-wrapper[data-effect="swing"] .key::after{animation:lighting-swing-col3 var(--lit-speed,4s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(n+13)::after{animation-name:lighting-swing-col5}
.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(10)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(11)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(12)::after{animation-name:lighting-swing-col4}
.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(9)::after{animation-name:lighting-swing-col3}
.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(6)::after{animation-name:lighting-swing-col2}
.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="swing"] .key:nth-child(3)::after{animation-name:lighting-swing-col1}
@keyframes lighting-stream{0%,100%{opacity:0.03}
50%{opacity:var(--lit-max-opacity,0.2)}
}
.lighting-keyboard-wrapper[data-effect="stream"] .key::after{animation:lighting-stream var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(1)::after{animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(2)::after{animation-delay:0.06s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(3)::after{animation-delay:0.12s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(4)::after{animation-delay:0.18s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(5)::after{animation-delay:0.24s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(6)::after{animation-delay:0.30s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(7)::after{animation-delay:0.36s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(8)::after{animation-delay:0.42s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(9)::after{animation-delay:0.48s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(10)::after{animation-delay:0.54s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(11)::after{animation-delay:0.60s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(12)::after{animation-delay:0.66s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(13)::after{animation-delay:0.72s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(14)::after{animation-delay:0.78s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(1) .key:nth-child(n+15)::after{animation-delay:0.84s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(1)::after{animation-delay:0.10s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(2)::after{animation-delay:0.16s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(3)::after{animation-delay:0.22s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(4)::after{animation-delay:0.28s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(5)::after{animation-delay:0.34s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(6)::after{animation-delay:0.40s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(7)::after{animation-delay:0.46s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(8)::after{animation-delay:0.52s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(9)::after{animation-delay:0.58s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(10)::after{animation-delay:0.64s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(11)::after{animation-delay:0.70s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(12)::after{animation-delay:0.76s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(13)::after{animation-delay:0.82s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(2) .key:nth-child(n+14)::after{animation-delay:0.88s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(1)::after{animation-delay:0.20s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(2)::after{animation-delay:0.26s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(3)::after{animation-delay:0.32s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(4)::after{animation-delay:0.38s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(5)::after{animation-delay:0.44s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(6)::after{animation-delay:0.50s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(7)::after{animation-delay:0.56s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(8)::after{animation-delay:0.62s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(9)::after{animation-delay:0.68s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(10)::after{animation-delay:0.74s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(11)::after{animation-delay:0.80s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(12)::after{animation-delay:0.86s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(3) .key:nth-child(n+13)::after{animation-delay:0.92s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(1)::after{animation-delay:0.30s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(2)::after{animation-delay:0.36s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(3)::after{animation-delay:0.42s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(4)::after{animation-delay:0.48s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(5)::after{animation-delay:0.54s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:0.60s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(7)::after{animation-delay:0.66s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(8)::after{animation-delay:0.72s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(9)::after{animation-delay:0.78s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(10)::after{animation-delay:0.84s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(11)::after{animation-delay:0.90s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(4) .key:nth-child(n+12)::after{animation-delay:0.96s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(1)::after{animation-delay:0.40s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(2)::after{animation-delay:0.46s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(3)::after{animation-delay:0.52s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(4)::after{animation-delay:0.58s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(5)::after{animation-delay:0.64s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(6)::after{animation-delay:0.70s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(7)::after{animation-delay:0.76s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(8)::after{animation-delay:0.82s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(9)::after{animation-delay:0.88s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(10)::after{animation-delay:0.94s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(5) .key:nth-child(n+11)::after{animation-delay:1.00s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(1)::after{animation-delay:0.50s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(2)::after{animation-delay:0.56s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(3)::after{animation-delay:0.62s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(4)::after{animation-delay:0.68s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(5)::after{animation-delay:0.74s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(6)::after{animation-delay:0.80s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation-delay:0.86s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(8)::after{animation-delay:0.92s}
.lighting-keyboard-wrapper[data-effect="stream"] .keyboard-row:nth-child(6) .key:nth-child(n+9)::after{animation-delay:0.98s}
@keyframes lighting-rain-drop{0%,15%,100%{opacity:0.03}
5%,10%{opacity:var(--lit-max-opacity,0.2)}
}
.lighting-keyboard-wrapper[data-effect="rain"] .key::after{animation:lighting-rain-drop var(--lit-speed,2s) ease-out infinite}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(1)::after{animation-delay:-0.3s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(2)::after{animation-delay:-1.7s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(3)::after{animation-delay:-0.1s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(4)::after{animation-delay:-1.2s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(5)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(6)::after{animation-delay:-1.9s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(7)::after{animation-delay:-0.5s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(8)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(9)::after{animation-delay:-0.2s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(10)::after{animation-delay:-1.6s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(11)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(12)::after{animation-delay:-0.4s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(13)::after{animation-delay:-1.1s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(14)::after{animation-delay:-0.6s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(1) .key:nth-child(n+15)::after{animation-delay:-1.8s}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(1)::after{animation-delay:calc(-0.3s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(2)::after{animation-delay:calc(-1.7s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(3)::after{animation-delay:calc(-0.1s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(4)::after{animation-delay:calc(-1.2s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(5)::after{animation-delay:calc(-0.8s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(6)::after{animation-delay:calc(-1.9s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(7)::after{animation-delay:calc(-0.5s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(8)::after{animation-delay:calc(-1.4s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(9)::after{animation-delay:calc(-0.2s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(10)::after{animation-delay:calc(-1.6s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(11)::after{animation-delay:calc(-0.9s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(12)::after{animation-delay:calc(-0.4s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(13)::after{animation-delay:calc(-1.1s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(2) .key:nth-child(n+14)::after{animation-delay:calc(-0.6s + 0.08s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(1)::after{animation-delay:calc(-0.3s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(2)::after{animation-delay:calc(-1.7s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(3)::after{animation-delay:calc(-0.1s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(4)::after{animation-delay:calc(-1.2s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(5)::after{animation-delay:calc(-0.8s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(6)::after{animation-delay:calc(-1.9s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(7)::after{animation-delay:calc(-0.5s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(8)::after{animation-delay:calc(-1.4s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(9)::after{animation-delay:calc(-0.2s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(10)::after{animation-delay:calc(-1.6s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(11)::after{animation-delay:calc(-0.9s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(12)::after{animation-delay:calc(-0.4s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(3) .key:nth-child(n+13)::after{animation-delay:calc(-1.1s + 0.16s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(1)::after{animation-delay:calc(-0.3s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(2)::after{animation-delay:calc(-1.7s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(3)::after{animation-delay:calc(-0.1s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(4)::after{animation-delay:calc(-1.2s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(5)::after{animation-delay:calc(-0.8s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:calc(-1.9s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(7)::after{animation-delay:calc(-0.5s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(8)::after{animation-delay:calc(-1.4s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(9)::after{animation-delay:calc(-0.2s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(10)::after{animation-delay:calc(-1.6s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(11)::after{animation-delay:calc(-0.9s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(4) .key:nth-child(n+12)::after{animation-delay:calc(-0.4s + 0.24s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(1)::after{animation-delay:calc(-0.3s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(2)::after{animation-delay:calc(-1.7s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(3)::after{animation-delay:calc(-0.1s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(4)::after{animation-delay:calc(-1.2s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(5)::after{animation-delay:calc(-0.8s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(6)::after{animation-delay:calc(-1.9s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(7)::after{animation-delay:calc(-0.5s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(8)::after{animation-delay:calc(-1.4s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(9)::after{animation-delay:calc(-0.2s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(10)::after{animation-delay:calc(-1.6s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(5) .key:nth-child(n+11)::after{animation-delay:calc(-0.9s + 0.32s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(1)::after{animation-delay:calc(-0.3s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(2)::after{animation-delay:calc(-1.7s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(3)::after{animation-delay:calc(-0.1s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(4)::after{animation-delay:calc(-1.2s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(5)::after{animation-delay:calc(-0.8s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(6)::after{animation-delay:calc(-1.9s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation-delay:calc(-0.5s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(8)::after{animation-delay:calc(-1.4s + 0.40s)}
.lighting-keyboard-wrapper[data-effect="rain"] .keyboard-row:nth-child(6) .key:nth-child(n+9)::after{animation-delay:calc(-0.2s + 0.40s)}
@keyframes lighting-starlight{0%,100%{opacity:0}
50%{opacity:var(--star-intensity,0.15)}
}
.lighting-keyboard-wrapper[data-effect="starlight"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(1) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(1) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(2) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(2) .key:nth-child(12)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(3) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(3) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(4) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(4) .key:nth-child(11)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(5) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation:lighting-starlight var(--lit-speed,2s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(1) .key:nth-child(3)::after{animation-delay:0s;--star-intensity:var(--lit-max-opacity,0.2)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(1) .key:nth-child(9)::after{animation-delay:-1.3s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.7)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(2) .key:nth-child(5)::after{animation-delay:-0.4s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.85)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(2) .key:nth-child(12)::after{animation-delay:-1.7s;--star-intensity:var(--lit-max-opacity,0.2)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(3) .key:nth-child(2)::after{animation-delay:-0.9s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.6)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(3) .key:nth-child(8)::after{animation-delay:-0.2s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.9)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:-1.1s;--star-intensity:var(--lit-max-opacity,0.2)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(4) .key:nth-child(11)::after{animation-delay:-0.6s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.75)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(5) .key:nth-child(4)::after{animation-delay:-1.5s;--star-intensity:calc(var(--lit-max-opacity, 0.2) * 0.8)}
.lighting-keyboard-wrapper[data-effect="starlight"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation-delay:-0.8s;--star-intensity:var(--lit-max-opacity,0.2)}
@keyframes lighting-firework-burst{0%,100%{opacity:0;transform:scale(0.8)}
15%{opacity:var(--lit-max-opacity,0.25);transform:scale(1.05)}
40%{opacity:calc(var(--lit-max-opacity, 0.25) * 0.6);transform:scale(1)}
60%{opacity:calc(var(--lit-max-opacity, 0.25) * 0.2);transform:scale(0.95)}
80%{opacity:0;transform:scale(0.9)}
}
.lighting-keyboard-wrapper[data-effect="fireworks"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(1) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(1) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(2) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(2) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(2) .key:nth-child(4)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(1) .key:nth-child(10)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(1) .key:nth-child(11)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(2) .key:nth-child(10)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(2) .key:nth-child(11)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:-1.7s}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(3) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(3) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(4) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(4) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(4) .key:nth-child(7)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:-2.9s}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(5) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(5) .key:nth-child(10)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(6) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(6) .key:nth-child(9)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(5) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(5) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(6) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(6) .key:nth-child(4)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(3) .key:nth-child(11)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(3) .key:nth-child(12)::after,.lighting-keyboard-wrapper[data-effect="fireworks"] .keyboard-row:nth-child(4) .key:nth-child(10)::after{animation:lighting-firework-burst var(--lit-speed,4s) ease-out infinite;animation-delay:-3.3s}
@keyframes lighting-wave-zone{0%,100%{opacity:0.03}
50%{opacity:var(--lit-max-opacity,0.2)}
}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .key::after{animation:lighting-wave-zone var(--lit-speed,2.5s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:0s}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(6)::after{animation-delay:0.12s}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(6)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(7)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(6)::after{animation-delay:0.24s}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(5)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(10)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(8)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(7)::after{animation-delay:0.36s}
.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(4)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(9)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(1) .key:nth-child(n+10)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(2) .key:nth-child(n+10)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(3) .key:nth-child(n+11)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(4) .key:nth-child(n+10)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(5) .key:nth-child(n+9)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(1)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(2)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(3)::after,.lighting-keyboard-wrapper[data-effect="wave-zone"] .keyboard-row:nth-child(6) .key:nth-child(n+8)::after{animation-delay:0.48s}
@keyframes lighting-galaxy-pulse{0%,100%{opacity:var(--lit-opacity,0.15)}
50%{opacity:calc(var(--lit-opacity, 0.15) * 0.5)}
}
.lighting-keyboard-wrapper[data-effect="galaxy"] .key::after{animation:lighting-galaxy-pulse var(--lit-speed,3s) ease-in-out infinite}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(1)::after{animation-delay:-0.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(2)::after{animation-delay:-2.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(3)::after{animation-delay:-1.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(4)::after{animation-delay:-3.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(5)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(6)::after{animation-delay:-2.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(7)::after{animation-delay:-1.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(8)::after{animation-delay:-3.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(9)::after{animation-delay:-0.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(10)::after{animation-delay:-2.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(11)::after{animation-delay:-1.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(12)::after{animation-delay:-3.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(13)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(14)::after{animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(1) .key:nth-child(15)::after{animation-delay:-1.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(1)::after{animation-delay:-3.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(2)::after{animation-delay:-0.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(3)::after{animation-delay:-2.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(4)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(5)::after{animation-delay:-3.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(6)::after{animation-delay:-0.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(7)::after{animation-delay:-2.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(8)::after{animation-delay:-1.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(9)::after{animation-delay:-3.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(10)::after{animation-delay:-0.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(11)::after{animation-delay:-2.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(12)::after{animation-delay:-1.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(13)::after{animation-delay:-3.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(14)::after{animation-delay:-0.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(2) .key:nth-child(15)::after{animation-delay:-2.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(1)::after{animation-delay:-1.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(2)::after{animation-delay:-3.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(3)::after{animation-delay:-0.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(4)::after{animation-delay:-2.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(5)::after{animation-delay:-1.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(6)::after{animation-delay:-3.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(7)::after{animation-delay:-0.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(8)::after{animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(9)::after{animation-delay:-1.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(10)::after{animation-delay:-3.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(11)::after{animation-delay:-0.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(12)::after{animation-delay:-2.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(13)::after{animation-delay:-1.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(3) .key:nth-child(14)::after{animation-delay:-3.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(1)::after{animation-delay:-0.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(2)::after{animation-delay:-2.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(3)::after{animation-delay:-1.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(4)::after{animation-delay:-3.4s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(5)::after{animation-delay:-0.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(6)::after{animation-delay:-2.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(7)::after{animation-delay:-1.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(8)::after{animation-delay:-3.7s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(9)::after{animation-delay:-0.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(10)::after{animation-delay:-2.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(11)::after{animation-delay:-1.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(12)::after{animation-delay:-3.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(4) .key:nth-child(13)::after{animation-delay:-0.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(1)::after{animation-delay:-2.8s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(2)::after{animation-delay:-1.5s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(3)::after{animation-delay:-3.6s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(4)::after{animation-delay:-0.3s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(5)::after{animation-delay:-2.1s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(6)::after{animation-delay:-1.9s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(7)::after{animation-delay:-3.2s}
.lighting-keyboard-wrapper[data-effect="galaxy"] .keyboard-row:nth-child(5) .key:nth-child(8)::after{animation-delay:-0.4s}
@keyframes reactive-ripple{0%{opacity:var(--lit-max-opacity,0.3);transform:scale(1)}
100%{opacity:0;transform:scale(1)}
}
@keyframes reactive-steady-ripple{0%{opacity:1;transform:scale(1.05)}
30%{opacity:0.9;transform:scale(1.02)}
100%{opacity:var(--lit-opacity,0.2);transform:scale(1)}
}
@keyframes reactive-steady-ripple-center{0%{opacity:1;transform:scale(1.1);filter:brightness(1.5)}
25%{opacity:1;transform:scale(1.05);filter:brightness(1.3)}
100%{opacity:var(--lit-opacity,0.2);transform:scale(1);filter:brightness(1)}
}
@keyframes reactive-single{0%{opacity:var(--lit-max-opacity,0.35)}
100%{opacity:0}
}
@keyframes reactive-palace{0%{opacity:0}
20%{opacity:var(--lit-max-opacity,0.35)}
50%{opacity:var(--lit-max-opacity,0.35)}
100%{opacity:0}
}
@keyframes reactive-piano{0%{opacity:0}
15%{opacity:var(--lit-max-opacity,0.35)}
45%{opacity:var(--lit-max-opacity,0.35)}
100%{opacity:0}
}
.lighting-keyboard-wrapper[data-effect="ripples"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-triggered::after{animation:reactive-ripple calc(0.54s * var(--lit-reactive-mult, 1)) ease-out forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-1::after{animation:reactive-ripple calc(0.50s * var(--lit-reactive-mult, 1)) ease-out calc(0.054s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-2::after{animation:reactive-ripple calc(0.45s * var(--lit-reactive-mult, 1)) ease-out calc(0.108s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-3::after{animation:reactive-ripple calc(0.40s * var(--lit-reactive-mult, 1)) ease-out calc(0.162s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-4::after{animation:reactive-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.216s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-5::after{animation:reactive-ripple calc(0.32s * var(--lit-reactive-mult, 1)) ease-out calc(0.270s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-6::after{animation:reactive-ripple calc(0.27s * var(--lit-reactive-mult, 1)) ease-out calc(0.324s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-7::after{animation:reactive-ripple calc(0.24s * var(--lit-reactive-mult, 1)) ease-out calc(0.378s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-8::after{animation:reactive-ripple calc(0.21s * var(--lit-reactive-mult, 1)) ease-out calc(0.432s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-9::after{animation:reactive-ripple calc(0.18s * var(--lit-reactive-mult, 1)) ease-out calc(0.486s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="ripples"] .key.reactive-neighbor-10::after{animation:reactive-ripple calc(0.15s * var(--lit-reactive-mult, 1)) ease-out calc(0.540s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key::after{opacity:var(--lit-opacity,0.2);animation:none}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key::before{opacity:var(--lit-opacity,0.2)}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-triggered::after{animation:reactive-steady-ripple-center calc(0.5s * var(--lit-reactive-mult, 1)) ease-out forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-1::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.045s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-2::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.09s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-3::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.135s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-4::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.18s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-5::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.225s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-6::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.27s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-7::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.315s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-8::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.36s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-9::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.405s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="steady-ripple"] .key.reactive-neighbor-10::after{animation:reactive-steady-ripple calc(0.36s * var(--lit-reactive-mult, 1)) ease-out calc(0.45s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="single-order"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="single-order"] .key.reactive-triggered::after{animation:reactive-single calc(0.27s * var(--lit-reactive-mult, 1)) ease-out forwards}
.lighting-keyboard-wrapper[data-effect="palace"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="palace"] .key.reactive-triggered::after{animation:reactive-palace calc(0.72s * var(--lit-reactive-mult, 1)) ease-in-out forwards}
.lighting-keyboard-wrapper[data-effect="palace"] .key.reactive-neighbor-1::after{animation:reactive-palace calc(0.675s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.045s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key::after{opacity:0;animation:none}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-triggered::after{animation:reactive-piano calc(0.63s * var(--lit-reactive-mult, 1)) ease-in-out forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-1::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.036s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-2::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.072s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-3::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.108s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-4::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.144s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-5::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.18s * var(--lit-reactive-mult, 1)) forwards}
.lighting-keyboard-wrapper[data-effect="piano"] .key.reactive-column-6::after{animation:reactive-piano calc(0.585s * var(--lit-reactive-mult, 1)) ease-in-out calc(0.216s * var(--lit-reactive-mult, 1)) forwards}
.lighting-reactive-hint{text-align:center;font-size:13px;font-weight:500;color:rgba(255,255,255,0.45);letter-spacing:0.5px;padding:0;margin-bottom:16px;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.lighting-reactive-hint.visible{opacity:1}
@media (max-width:1200px){.settings-panels{grid-template-columns:1fr}
.settings-layout-grid{grid-template-columns:1fr}
.settings-stage{width:100%;max-width:500px}
}
@media (max-width:600px){.sidebar-left{display:none}
.content-wrapper{padding:16px}
}
.device-state{display:flex;flex-direction:column;gap:8px;padding:0 16px}
.btn-connect{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:36px;padding:0 16px;font-size:13px;font-weight:600;color:var(--text-bright);background:linear-gradient(180deg,#1a1a1a 0%,#0d0d0d 100%);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration) var(--ease-ios)}
.btn-connect:hover{background:linear-gradient(180deg,#252525 0%,#151515 100%);border-color:var(--accent-blue);box-shadow:0 0 20px rgba(10,132,255,0.2)}
.btn-connect:active{transform:scale(0.98)}
.btn-connect svg,.btn-connect span{position:relative;z-index:2}
.btn-connect svg{stroke:var(--accent-blue);stroke-width:1.5;opacity:0.6;transition:opacity 0.2s ease,filter 0.2s ease}
.btn-connect:hover svg{opacity:1;filter:drop-shadow(0 0 4px rgba(10,132,255,0.6))}
.device-hint{font-size:11px;color:var(--text-tertiary);text-align:center}
.btn-tour{background:transparent;border:none;color:var(--text-tertiary);font-size:13px;font-weight:400;cursor:pointer;padding:4px 0 0;transition:color 0.2s ease;text-decoration:none}
.btn-tour:hover{color:var(--accent-blue)}
.first-visit .btn-tour{color:var(--text-secondary);animation:subtle-pulse 2s ease-in-out infinite}
@keyframes subtle-pulse{0%,100%{opacity:0.7}
50%{opacity:1}
}
.demo-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;margin:8px 16px 0;background:rgba(10,132,255,0.08);border:1px solid rgba(10,132,255,0.2);border-radius:var(--radius-sm)}
.demo-badge{font-size:11px;font-weight:600;color:var(--accent-blue);text-transform:uppercase;letter-spacing:0.05em}
.btn-exit-demo{background:transparent;border:1px solid rgba(255,255,255,0.15);color:var(--text-secondary);font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--radius-pill);cursor:pointer;transition:all 0.15s ease}
.btn-exit-demo:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.25);color:var(--text-primary)}
.sidebar-footer{margin-top:auto;padding:16px 16px 8px;border-top:1px solid rgba(255,255,255,0.04);display:none}
.sidebar-footer.connected{display:none}
.sidebar-footer.demo-active{display:block;padding-top:20px}
.demo-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:linear-gradient(135deg,rgba(10,132,255,0.15) 0%,rgba(10,132,255,0.05) 100%);border:1px solid rgba(10,132,255,0.25);border-radius:var(--radius-md);color:var(--accent-blue);font-size:12px;font-weight:600;text-decoration:none;transition:all 0.2s ease}
.demo-cta:hover{background:linear-gradient(135deg,rgba(10,132,255,0.25) 0%,rgba(10,132,255,0.1) 100%);border-color:rgba(10,132,255,0.4);transform:translateY(-1px);box-shadow:0 4px 12px rgba(10,132,255,0.2)}
.demo-cta svg{transition:transform 0.2s ease}
.demo-cta:hover svg{transform:translateX(3px)}
.demo-tip{position:fixed;background:rgba(15,15,15,0.98);border:1px solid rgba(10,132,255,0.3);border-radius:var(--radius-md);padding:12px 16px;max-width:280px;z-index:10000;opacity:0;transform:translateY(8px);transition:opacity 0.3s ease,transform 0.3s ease;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.demo-tip.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.demo-tip-content{display:flex;flex-direction:column;gap:8px}
.demo-tip-title{font-size:12px;font-weight:600;color:var(--text-bright)}
.demo-tip-text{font-size:11px;color:var(--text-secondary);line-height:1.5}
.demo-tip-dismiss{background:transparent;border:none;color:var(--text-tertiary);font-size:10px;cursor:pointer;padding:4px 0 0;text-align:left;transition:color 0.15s ease}
.demo-tip-dismiss:hover{color:var(--text-secondary)}
.demo-tip::before{content:'';position:absolute;width:10px;height:10px;background:rgba(15,15,15,0.98);border:1px solid rgba(10,132,255,0.3);border-right:none;border-bottom:none;transform:rotate(45deg)}
.demo-tip.tip-top::before{bottom:-6px;left:50%;margin-left:-5px;transform:rotate(-135deg)}
.demo-tip.tip-bottom::before{top:-6px;left:50%;margin-left:-5px;transform:rotate(45deg)}
.demo-tip.tip-left::before{right:-6px;top:50%;margin-top:-5px;transform:rotate(135deg)}
.demo-tip.tip-right::before{left:-6px;top:50%;margin-top:-5px;transform:rotate(-45deg)}
.demo-welcome{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:10001;opacity:0;transition:opacity 0.4s ease;backdrop-filter:blur(8px)}
.demo-welcome.visible{opacity:1}
.demo-welcome-card{background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:32px 40px;max-width:320px;text-align:center;transform:scale(0.95);transition:transform 0.4s var(--ease-squish)}
.demo-welcome.visible .demo-welcome-card{transform:scale(1)}
.demo-welcome-title{font-size:20px;font-weight:500;color:var(--text-bright);margin-bottom:8px;letter-spacing:-0.01em}
.demo-welcome-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:28px;line-height:1.5}
.demo-welcome-start{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--accent-blue);border:none;border-radius:var(--radius-pill);color:white;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.demo-welcome-start:hover{background:var(--accent-blue-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(10,132,255,0.3)}
.demo-welcome-skip{display:block;width:100%;margin-top:16px;background:transparent;border:none;color:var(--text-tertiary);font-size:12px;cursor:pointer;transition:color 0.15s ease;text-align:center}
.demo-welcome-skip:hover{color:var(--text-secondary)}
body.showroom-mode .top-nav-bar{opacity:0;pointer-events:none}
body.showroom-mode .controls-toolbar{opacity:0;pointer-events:none}
body.showroom-mode .keyboard-diagram{pointer-events:none}
body.showroom-mode .keyboard-diagram .key{cursor:default}
body.showroom-mode .keyboard-diagram .key:hover{background:linear-gradient(180deg,#222 0%,#151515 100%);border-color:#000;color:#EAEAEA}
body.showroom-mode .settings-stage{filter:blur(3px);opacity:0.5;pointer-events:none}
@keyframes showroom-breathe{0%,100%{box-shadow:0 0 20px rgba(10,132,255,0.1),0 0 40px rgba(10,132,255,0.05)}
50%{box-shadow:0 0 30px rgba(10,132,255,0.25),0 0 60px rgba(10,132,255,0.1)}
}
body.showroom-mode .keyboard-diagram{animation:showroom-breathe 4s ease-in-out infinite;border-radius:8px}
.explore-prompt{position:fixed;z-index:1000;opacity:0;pointer-events:none;transition:opacity 0.3s ease,transform 0.3s var(--ease-squish);transform:translateY(8px)}
.explore-prompt.visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.explore-prompt-card{position:relative;background:rgba(20,20,20,0.95);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:20px 24px 24px;text-align:center;backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,0.4);min-width:180px}
.explore-prompt-dismiss{position:absolute;top:8px;right:8px;width:20px;height:20px;background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color 0.15s ease,background 0.15s ease;padding:0}
.explore-prompt-dismiss:hover{color:var(--text-secondary);background:rgba(255,255,255,0.08)}
.explore-prompt-dismiss svg{width:10px;height:10px}
.explore-prompt-title{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:14px;margin-top:4px}
.explore-prompt-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease}
.explore-prompt-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue)}
.explore-prompt-btn svg{transition:transform 0.2s ease}
.explore-prompt-btn:hover svg{transform:translateX(3px)}
body.demo-mode #polling-rate-select,body.demo-mode #key-stability-select,body.demo-mode #btn-deadzone{opacity:0.4;pointer-events:none;cursor:not-allowed}
body.demo-mode .settings-row:has(#polling-rate-select),body.demo-mode .settings-row:has(#key-stability-select),body.demo-mode .settings-row:has(#btn-deadzone){position:relative}
body.demo-mode .settings-row:has(#polling-rate-select)::after,body.demo-mode .settings-row:has(#key-stability-select)::after,body.demo-mode .settings-row:has(#btn-deadzone)::after{content:'Requires connected device';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:10px;color:var(--text-tertiary);opacity:0;transition:opacity 0.15s ease;pointer-events:none}
body.demo-mode .settings-row:has(#polling-rate-select):hover::after,body.demo-mode .settings-row:has(#key-stability-select):hover::after,body.demo-mode .settings-row:has(#btn-deadzone):hover::after{opacity:1}
.device-list{list-style:none;padding:0;margin:0}
.device-list li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-primary);font-weight:400;padding:8px 12px;border-radius:var(--radius-pill);cursor:default}
.device-list li::before{content:'';width:6px;height:6px;border-radius:50%;background-color:var(--accent-blue);box-shadow:0 0 8px rgba(10,132,255,0.5);animation:pulse-glow 2s ease-in-out infinite;will-change:transform,opacity}
.device-list li.syncing::before{background-color:var(--text-bright);box-shadow:0 0 8px rgba(255,255,255,0.6);animation:pulse-white 0.5s ease-in-out infinite}
@keyframes pulse-white{0%,100%{opacity:0.8;transform:scale(1)}
50%{opacity:1;transform:scale(1.2)}
}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(30,30,30,0.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);box-shadow:0 8px 32px rgba(0,0,0,0.4);font-size:13px;font-weight:500;color:var(--text-bright);pointer-events:auto;transform:translateX(120%);opacity:0;transition:all 0.3s var(--ease-squish)}
.toast.show{transform:translateX(0);opacity:1}
.toast.toast-success{border-left:3px solid var(--accent-blue)}
.toast.toast-error{border-left:3px solid var(--accent-red)}
.toast.toast-info{border-left:3px solid var(--accent-blue)}
.toast.toast-warning{border-left:3px solid var(--accent-warning)}
.toast.toast-loading{border-left:3px solid var(--text-secondary)}
.toast-icon{width:18px;height:18px;flex-shrink:0}
.toast-success .toast-icon{color:var(--accent-blue)}
.toast-error .toast-icon{color:var(--accent-red)}
.toast-info .toast-icon{color:var(--accent-blue)}
.toast-warning .toast-icon{color:var(--accent-warning)}
.toast-loading .toast-icon{color:var(--text-secondary)}
.toast-spinner{animation:toast-spin 1s linear infinite}
@keyframes toast-spin{from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
.toast-message{flex:1}
.toast-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color var(--duration)}
.toast-close:hover{color:var(--text-bright)}
.toast.toast-urgent{animation:toast-urgent-pulse 2s ease-in-out infinite;box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(255,69,58,0.3)}
.toast.toast-urgent.show{animation:toast-urgent-enter 0.4s var(--ease-squish),toast-urgent-pulse 2s ease-in-out 0.4s infinite}
@keyframes toast-urgent-enter{0%{transform:translateX(120%);opacity:0}
50%{transform:translateX(-3%);opacity:1}
70%{transform:translateX(2%)}
100%{transform:translateX(0);opacity:1}
}
@keyframes toast-urgent-pulse{0%,100%{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 1px rgba(255,69,58,0.2)}
50%{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 0 2px rgba(255,69,58,0.4),0 0 20px rgba(255,69,58,0.15)}
}
.btn-save-profile.syncing{pointer-events:none;opacity:0.8}
.btn-save-profile.syncing::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}
}
.app-container.offline .btn-save-profile{opacity:0.35;cursor:pointer}
.app-container.offline .btn-save-profile:hover{opacity:0.5;filter:none}
.app-container.offline #polling-rate-select{opacity:0.4;pointer-events:none}
#polling-rate-select.disabled{opacity:0.4;pointer-events:none}
.app-container.offline #key-stability-select,#key-stability-select.disabled{opacity:0.4;pointer-events:none}
.app-container.offline #btn-dead-zone,#btn-dead-zone.disabled{opacity:0.4;pointer-events:none}
.app-container.offline #btn-modtap-apply,.app-container.offline #btn-modtap-clear,.app-container.offline #btn-priority-apply,.app-container.offline #btn-priority-clear{opacity:0.4;pointer-events:none}
.app-container.offline #btn-check-update,.app-container.offline #btn-restore-factory{opacity:0.4;pointer-events:none}
.keyboard-diagram.loading{position:relative;pointer-events:none}
.keyboard-diagram.loading::before{content:'';position:absolute;inset:0;background:rgba(5,5,5,0.7);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:var(--radius-sm);z-index:100}
.keyboard-diagram.loading::after{content:'Loading configuration...';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-secondary);font-size:14px;font-weight:500;z-index:101;display:flex;align-items:center;gap:12px}
.keyboard-diagram.loading .loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:102;display:flex;flex-direction:column;align-items:center;gap:12px}
.keyboard-diagram.loading .loading-spinner::before{content:'';width:32px;height:32px;border:3px solid rgba(255,255,255,0.1);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 0.8s linear infinite}
.keyboard-diagram.loading .loading-spinner::after{content:'Loading configuration...';color:var(--text-secondary);font-size:13px;font-weight:500}
.keyboard-diagram.loading .key{animation:key-shimmer 1.5s ease-in-out infinite}
@keyframes key-shimmer{0%,100%{opacity:0.3}
50%{opacity:0.5}
}
.keyboard-diagram.loading .keyboard-row:nth-child(2) .key{animation-delay:0.1s}
.keyboard-diagram.loading .keyboard-row:nth-child(3) .key{animation-delay:0.2s}
.keyboard-diagram.loading .keyboard-row:nth-child(4) .key{animation-delay:0.3s}
.keyboard-diagram.loading .keyboard-row:nth-child(5) .key{animation-delay:0.4s}
.keyboard-diagram.loading .keyboard-row:nth-child(6) .key{animation-delay:0.5s}
.modal.modal-compact{max-width:380px}
.modal.modal-compact .description-text{text-align:center}
#dead-zone-modal .description-text{text-align:left;font-size:13px;line-height:1.6}
.deadzone-sliders-container{display:flex;flex-direction:column;gap:20px}
.deadzone-sliders-container .label-row{display:flex;align-items:center;gap:8px}
.deadzone-sliders-container .label-row label{font-size:12px;font-weight:500;color:var(--text-secondary)}
.deadzone-sliders-container .tooltip-container{display:inline-flex}
.deadzone-sliders-container .tooltip-trigger{margin-top:0}
#dead-zone-modal .deadzone-warning{margin-top:16px;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:11px;color:var(--accent-warning);background:rgba(240,173,78,0.1);border:1px solid rgba(240,173,78,0.3);border-radius:var(--radius-sm);opacity:0;max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;margin-top:0;transition:opacity 0.2s ease,max-height 0.2s ease,margin-top 0.2s ease,padding 0.2s ease}
#dead-zone-modal .deadzone-warning.show{opacity:1;max-height:50px;padding:10px 14px;margin-top:16px}
#dead-zone-modal .deadzone-warning svg{flex-shrink:0;stroke:var(--accent-warning)}
#dead-zone-modal .slider-group{display:flex;align-items:center;gap:12px}
#dead-zone-modal input[type="range"]{flex:1}
#dead-zone-modal .slider-value-input{width:65px}
#dead-zone-modal .unit-label{width:28px;flex-shrink:0}
.firmware-version-row{display:flex;align-items:center;gap:12px}
.update-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:linear-gradient(135deg,rgba(255,170,0,0.15) 0%,rgba(255,136,0,0.1) 100%);border:1px solid rgba(255,170,0,0.4);border-radius:var(--radius-md);font-size:11px;font-weight:600;color:var(--accent-warning);text-transform:uppercase;letter-spacing:0.3px;animation:update-badge-pulse 2s ease-in-out infinite}
.update-badge svg{stroke:var(--accent-warning)}
@keyframes update-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,170,0,0.3)}
50%{box-shadow:0 0 8px 2px rgba(255,170,0,0.2)}
}
.btn-backup,.btn-restore{display:flex;align-items:center;justify-content:center;gap:8px}
.btn-backup svg,.btn-restore svg{flex-shrink:0}
.panel-about{grid-column:span 2}
.about-content{display:flex;flex-direction:column;gap:6px}
.about-version{font-size:13px;color:var(--text-secondary);font-weight:500}
.about-version .version-number{color:var(--text-tertiary);font-weight:400}
.about-credits{font-size:12px;color:var(--text-tertiary)}
.about-credits strong{color:var(--text-secondary);font-weight:600}
.app-container.offline #btn-backup-settings,.app-container.offline #btn-restore-settings{opacity:0.4;pointer-events:none}
.restore-progress{display:flex;flex-direction:column;gap:16px;padding:8px 0}
.restore-progress-bar{width:100%;height:6px;background:var(--surface-tertiary);border-radius:3px;overflow:hidden}
.restore-progress-fill{height:100%;background:linear-gradient(90deg,var(--titan-blue),var(--titan-blue-bright));border-radius:3px;transition:width 0.3s ease;width:0%}
.restore-progress-status{font-size:13px;color:var(--text-secondary);text-align:center}
.restore-progress-status.complete{color:var(--accent-success);font-weight:500}
.restore-progress-status.error{color:var(--accent-red)}
#auto-restore-modal .restore-preview{display:flex;flex-direction:column;gap:10px;margin-top:16px;padding:14px;background:var(--surface-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
#auto-restore-modal .restore-preview-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}
#auto-restore-modal .restore-preview-item svg{flex-shrink:0;stroke:var(--titan-blue)}
#auto-restore-modal .modal-body .description-text{color:var(--text-primary);line-height:1.6}
#auto-restore-modal .modal-body .description-text strong{color:var(--text-bright)}
.mapping-stage{display:flex;flex-direction:column;gap:var(--keyboard-content-gap);width:100%;max-width:var(--stage-width);align-items:center}
.mapping-keyboard-row{position:relative;display:flex;justify-content:center;width:100%}
.layer-selector-vertical{position:absolute;left:calc(50% + 560px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.layer-more-container{display:flex;flex-direction:column;gap:6px;max-height:0;overflow:hidden;opacity:0;transition:max-height 0.25s ease,opacity 0.2s ease,margin 0.25s ease;margin:0}
.layer-more-container.expanded{max-height:100px;opacity:1;margin-top:0}
.layer-toggle-more{padding:4px 12px;background:transparent;border:none;color:var(--text-tertiary);font-size:11px;font-weight:500;cursor:pointer;transition:color var(--duration-fast) ease;margin-top:2px}
.layer-toggle-more:hover{color:var(--text-secondary)}
.layer-seg{padding:8px 16px;background:transparent;border:1px solid transparent;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;border-radius:var(--radius-pill);transition:all var(--duration-fast) ease;white-space:nowrap}
.layer-seg:hover{color:var(--text-primary);background:rgba(255,255,255,0.04)}
.layer-seg.active{color:var(--text-bright);background:rgba(10,132,255,0.12);border-color:rgba(10,132,255,0.3)}
.mapping-action-area{position:relative;display:flex;justify-content:center;align-items:center;height:52px;width:100%}
#mapping-instruction{position:absolute;text-align:center;color:var(--text-tertiary);font-size:14px;font-weight:500;opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}
#mapping-instruction.active{opacity:1}
.mapping-action-bar{display:flex;gap:8px;padding:8px 12px;background:rgba(30,30,30,0.95);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:0 4px 20px rgba(0,0,0,0.3);opacity:0;transform:translateY(-8px);transition:opacity 0.2s ease,transform 0.2s ease;pointer-events:none}
.mapping-action-bar.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.action-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--duration-fast) ease}
.action-btn:hover{background:rgba(255,255,255,0.05);border-color:var(--text-tertiary);color:var(--text-primary)}
.action-btn:active{transform:scale(0.97);background:rgba(255,255,255,0.08)}
.action-btn svg{width:14px;height:14px}
#mapping-keyboard .key{cursor:pointer;position:relative}
#mapping-keyboard .key .remap-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--kbd-scale, 1)) !important;font-weight:500;color:rgba(255,255,255,0.95) !important;background:transparent;z-index:5;pointer-events:none;line-height:1;text-align:center;padding:2px}
#mapping-keyboard .key .remap-label.remap-label-long{font-size:calc(9px * var(--kbd-scale, 1)) !important}
#mapping-keyboard .key.remapped{font-size:0 !important;color:transparent !important;box-shadow:inset 0 0 0 2px rgba(10,132,255,0.4)}
#mapping-keyboard .key.remapped .top,#mapping-keyboard .key.remapped .bottom,#mapping-keyboard .key.remapped .key-label-center,#mapping-keyboard .key.remapped > span:not(.remap-label){display:none !important}
#mapping-keyboard .key.remapped::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;background:var(--accent-blue);border-radius:50%;box-shadow:0 0 6px var(--accent-blue)}
#mapping-keyboard .key.remapped.selected{box-shadow:var(--active-state),inset 0 0 0 2px rgba(10,132,255,0.35)}
@keyframes remap-flash{0%{box-shadow:var(--active-state),0 0 0 0 rgba(10,132,255,0.6)}
50%{box-shadow:var(--active-state),0 0 24px 4px rgba(10,132,255,0.3)}
100%{box-shadow:var(--active-state),0 0 0 0 rgba(10,132,255,0)}
}
#mapping-keyboard .key.remap-success{animation:remap-flash 0.35s ease-out}
#mapping-keyboard .key:hover:not(.selected){background:#2a2a2a;color:var(--text-bright);border-color:#444}
#mapping-keyboard .key.selected{border:1px solid var(--accent-blue);background:#181818;box-shadow:var(--active-state);color:var(--text-bright)}
#mapping-keyboard .key:hover .top,#mapping-keyboard .key:hover .bottom,#mapping-keyboard .key:hover .key-label-center,#mapping-keyboard .key.selected .top,#mapping-keyboard .key.selected .bottom,#mapping-keyboard .key.selected .key-label-center{opacity:1}
.key-palette{background:linear-gradient(145deg,rgba(40,40,40,0.6) 0%,rgba(20,20,20,0.4) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.08),0 0 0 1px rgba(255,255,255,0),0 10px 30px -10px rgba(0,0,0,0.5);padding:20px 24px;display:flex;flex-direction:column;gap:12px;width:720px;max-width:100%;margin:0 auto;transition:box-shadow 0.2s ease}
.key-palette:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.18),0 0 0 1px rgba(255,255,255,0.10),0 12px 32px -2px rgba(0,0,0,0.5)}
.key-palette.no-selection{opacity:0.5;pointer-events:none}
.key-palette.hidden-for-dks{display:none}
.key-palette.no-selection .p-key{opacity:0.4}
.palette-primary,.palette-secondary{display:flex;flex-direction:column;gap:6px}
.palette-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.palette-divider{height:1px;background:var(--border-subtle);margin:6px 0}
.p-key{min-width:36px;height:32px;padding:0 10px;background:rgba(25,25,25,0.8);border:1px solid rgba(255,255,255,0.06);border-radius:6px;color:var(--text-primary);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.12s ease;display:flex;align-items:center;justify-content:center}
.p-key:hover{background:rgba(50,50,50,0.9);border-color:rgba(255,255,255,0.15);color:var(--text-bright);transform:translateY(-1px)}
.p-key:active{transform:translateY(0) scale(0.97)}
.p-key.current{border-color:var(--accent-blue);background:rgba(10,132,255,0.12);color:#5eb3ff}
.p-key-w{min-width:56px}
.palette-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;background:transparent;border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-tertiary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--duration-fast) ease;margin-top:4px}
.palette-more-btn:hover{border-color:var(--text-tertiary);color:var(--text-secondary);background:rgba(255,255,255,0.02)}
.palette-more-btn.expanded svg{transform:rotate(180deg)}
.palette-more-btn svg{transition:transform 0.2s ease}
.palette-secondary{display:none;padding-top:12px;border-top:1px solid var(--border-subtle);margin-top:8px}
.palette-secondary.visible{display:flex}
@media (max-width:900px){.mapping-keyboard-row{flex-direction:column;align-items:center}
.layer-selector-vertical{position:static;transform:none;flex-direction:row;order:-1}
.layer-seg{padding:8px 14px;font-size:11px}
.key-palette{padding:16px}
.p-key{min-width:32px;height:28px;font-size:10px}
.p-key-w{min-width:48px}
}
.fn-mode-toggle{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);margin-bottom:16px;width:fit-content;margin-left:auto;margin-right:auto}
.fn-mode-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--duration) var(--ease-ios)}
.fn-mode-btn:hover:not(.active){color:var(--text-primary);background:rgba(255,255,255,0.04)}
.fn-mode-btn.active{background:rgba(10,132,255,0.15);color:var(--text-bright)}
.fn-mode-btn svg{width:14px;height:14px;opacity:0.7}
.fn-mode-btn.active svg{opacity:1}
.fn-keyboard-row,.gamepad-keyboard-row{position:relative;display:flex;justify-content:center;width:100%}
.fn-mode-toggle-vertical{position:absolute;left:calc(50% + 560px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:4px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-shrink:0}
.fn-mode-seg{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-size:10px;font-weight:500;cursor:pointer;transition:all var(--duration);min-width:70px}
.fn-mode-seg:hover:not(.active){color:var(--text-primary);background:rgba(255,255,255,0.04)}
.fn-mode-seg.active{background:rgba(10,132,255,0.15);color:var(--text-bright)}
.fn-mode-seg svg{width:18px;height:18px;opacity:0.7}
.fn-mode-seg.active svg{opacity:1}
.fn-keyboard-hint{width:100%;max-width:var(--stage-width);padding:8px 32px 0;text-align:center;color:var(--text-tertiary);font-size:13px;transition:opacity 0.2s ease}
.fn-keyboard-hint.hidden{opacity:0;pointer-events:none;height:0;padding:0;margin:0}
.fn-presets-stage{width:100%;max-width:var(--stage-width);padding:0 32px;margin-top:16px}
.fn-presets-header{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:var(--text-secondary);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
.fn-presets-header svg{width:14px;height:14px;color:var(--accent-blue)}
.fn-presets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1080px;width:100%}
.fn-preset-card{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;background:linear-gradient(145deg,rgba(40,40,40,0.7) 0%,rgba(20,20,20,0.5) 100%);backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all 0.2s var(--ease-ios);text-align:left;min-height:100px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.06),0 4px 12px -4px rgba(0,0,0,0.4)}
.fn-preset-card:hover{border-color:rgba(255,255,255,0.15);transform:translateY(-2px);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.12),0 0 0 1px rgba(255,255,255,0.08),0 8px 20px -4px rgba(0,0,0,0.5)}
.fn-preset-card:active{transform:translateY(0)}
.fn-preset-card.active{border-color:var(--accent-blue);box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.12),0 0 0 1px var(--accent-blue),0 0 20px -4px rgba(10,132,255,0.3)}
.fn-preset-badge{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,rgba(10,132,255,0.2) 0%,rgba(10,132,255,0.1) 100%);border:1px solid rgba(10,132,255,0.3);border-radius:var(--radius-sm);color:var(--accent-blue);font-size:13px;font-weight:700;letter-spacing:0.02em;flex-shrink:0}
.fn-preset-badge-stack{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.fn-preset-badge-stack .fn-preset-badge{width:44px;height:26px;font-size:10px}
.fn-preset-badge.badge-alt{background:linear-gradient(135deg,rgba(52,199,89,0.2) 0%,rgba(52,199,89,0.1) 100%);border-color:rgba(52,199,89,0.3);color:var(--accent-success)}
.fn-preset-badge.badge-dks{background:linear-gradient(135deg,rgba(168,85,247,0.2) 0%,rgba(168,85,247,0.1) 100%);border-color:rgba(168,85,247,0.3);color:#A855F7}
.fn-preset-badge.badge-inactive{opacity:0.35;filter:grayscale(0.5)}
.fn-preset-card.preset-configured{border-color:rgba(10,132,255,0.4);background:linear-gradient(180deg,rgba(10,132,255,0.08) 0%,rgba(10,132,255,0.02) 100%)}
.fn-preset-card.preset-configured .fn-preset-keys{color:var(--accent-blue);font-weight:600}
.fn-preset-content{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.fn-preset-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.fn-preset-desc{font-size:11px;color:var(--text-secondary);line-height:1.4}
.fn-preset-keys{font-size:11px;color:var(--text-tertiary);font-weight:500;font-family:'JetBrains Mono',monospace;margin-top:2px}
.fn-preset-card.fn-preset-custom{border-style:dashed;background:rgba(30,30,30,0.3)}
.fn-preset-card.fn-preset-custom:hover{background:rgba(40,40,40,0.5);border-color:rgba(255,255,255,0.2)}
.fn-preset-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);flex-shrink:0}
.fn-preset-icon svg{width:18px;height:18px;color:var(--text-secondary)}
.fn-preset-card.fn-preset-custom:hover .fn-preset-icon svg{color:var(--text-primary)}
.modal-footer-spacer{flex:1}
.btn-modal.danger-outline{background:transparent;border:1px solid rgba(255,69,58,0.5);color:rgba(255,69,58,0.9)}
.btn-modal.danger-outline:hover{background:rgba(255,69,58,0.1);border-color:rgba(255,69,58,0.7);color:rgba(255,69,58,1)}
.fn-preset-modal{max-width:400px}
.fn-preset-modal .description-text{margin-bottom:20px}
.fn-preset-config{display:flex;flex-direction:column;gap:16px}
.fn-preset-row{display:flex;align-items:center;gap:16px}
.fn-preset-row label{font-size:12px;font-weight:500;color:var(--text-secondary);min-width:70px}
.fn-preset-key-select{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--text-primary);cursor:pointer;transition:all 0.15s;position:relative}
.fn-preset-key-select:hover{border-color:rgba(255,255,255,0.2);background:var(--bg-input-hover)}
.fn-preset-key-select:focus,.fn-preset-key-select.listening{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgba(10,132,255,0.15);outline:none}
.fn-preset-key-value{font-family:'JetBrains Mono',monospace}
.fn-preset-key-prompt{position:absolute;color:var(--text-secondary);font-size:12px;font-weight:400;opacity:0;pointer-events:none}
.fn-preset-key-select.listening .fn-preset-key-value{opacity:0}
.fn-preset-key-select.listening .fn-preset-key-prompt{opacity:1}
.fn-preset-modifier-row{margin-top:12px}
.fn-preset-modifier-select{display:flex;gap:8px;flex:1}
.fn-modifier-btn{flex:1;padding:10px 16px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
.fn-modifier-btn:hover{background:var(--bg-input-hover);border-color:rgba(255,255,255,0.2);color:var(--text-primary)}
.fn-modifier-btn.active{background:rgba(10,132,255,0.15);border-color:var(--accent-blue);color:var(--accent-blue)}
.fn-preset-pair-config{gap:12px}
.fn-preset-pair-row{display:flex;align-items:center;gap:16px}
.fn-preset-pair-col{flex:1;display:flex;flex-direction:column;gap:6px}
.fn-preset-pair-col label{font-size:11px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em;text-align:center}
.fn-preset-pair-col .fn-preset-key-select{width:100%}
.fn-preset-pair-connector{display:flex;align-items:center;justify-content:center;padding:0 4px;margin-top:20px}
.fn-preset-pair-connector svg{width:32px;height:20px;color:var(--text-tertiary)}
.fn-preset-mode-toggle{display:flex;gap:12px;margin-bottom:20px}
.fn-preset-mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s var(--ease-ios)}
.fn-preset-mode-btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15)}
.fn-preset-mode-btn.active{background:rgba(10,132,255,0.15);border-color:rgba(10,132,255,0.4)}
.fn-preset-mode-btn.active[data-mode="socd"]{background:rgba(52,199,89,0.15);border-color:rgba(52,199,89,0.4)}
.fn-preset-mode-label{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:0.02em}
.fn-preset-mode-btn.active .fn-preset-mode-label{color:var(--accent-blue)}
.fn-preset-mode-btn.active[data-mode="socd"] .fn-preset-mode-label{color:var(--accent-success)}
.fn-preset-mode-desc{font-size:11px;color:var(--text-secondary)}
.fn-preset-instant-stop-hint{margin-top:12px;padding:12px 14px;background:rgba(255,149,0,0.08);border:1px solid rgba(255,149,0,0.2);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);text-align:center}
#instant-stop-hint-text{font-family:'JetBrains Mono',monospace;color:#FF9500}
.fn-key-badge{position:absolute;top:3px;right:3px;padding:2px 4px;background:rgba(10,132,255,0.9);border-radius:3px;font-size:8px;font-weight:700;color:white;letter-spacing:0.03em;z-index:2;pointer-events:none}
.fn-key-badge.badge-sp,.fn-key-badge.badge-rs{background:rgba(10,132,255,0.9)}
.fn-key-badge.badge-li,.fn-key-badge.badge-socd{background:rgba(52,199,89,0.9)}
.fn-key-badge.badge-fl,.fn-key-badge.badge-cs,.fn-key-badge.badge-as,.fn-key-badge.badge-sw,.fn-key-badge.badge-dks{background:rgba(255,149,0,0.9)}
.fn-key-badge.badge-mt{background:rgba(175,82,222,0.9)}
.fn-key-badge.badge-gp{background:rgba(255,69,58,0.9)}
.fn-manual-stage{margin-top:24px}
.fn-manual-stage .settings-panels{animation:fade-in-tab 0.25s var(--ease-ios)}
#fn-panel-dks{width:480px;max-width:480px}
.dks-travel-diagram{position:relative;height:80px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-bottom:8px;margin-top:24px;overflow:visible}
.dks-deadzone{position:absolute;top:0;bottom:0;background:repeating-linear-gradient( -45deg,transparent,transparent 2px,rgba(255,255,255,0.03) 2px,rgba(255,255,255,0.03) 4px );pointer-events:none}
.dks-deadzone-top{left:0;border-right:1px dashed rgba(255,255,255,0.15)}
.dks-deadzone-bottom{right:0;border-left:1px dashed rgba(255,255,255,0.15)}
.dks-scale{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:space-between;padding:0 8px;font-size:9px;color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;pointer-events:none}
.dks-trigger-marker{position:absolute;top:8px;bottom:24px;width:2px;transform:translateX(-50%);cursor:ew-resize;transition:background 0.1s ease}
.dks-trigger-marker::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.dks-trigger-marker.press::before{border-top:6px solid var(--accent-blue)}
.dks-trigger-marker.release::before{border-bottom:6px solid var(--accent-success)}
.dks-trigger-marker.press{background:var(--accent-blue)}
.dks-trigger-marker.release{background:var(--accent-success)}
.dks-trigger-marker:hover{filter:brightness(1.2)}
.dks-trigger-marker.dragging{filter:brightness(1.3)}
.dks-trigger-label{position:absolute;top:-2px;left:50%;transform:translateX(-50%) translateY(-100%);font-size:9px;font-weight:600;color:var(--text-bright);background:rgba(0,0,0,0.7);padding:2px 4px;border-radius:3px;white-space:nowrap;pointer-events:none}
.dks-phases{display:flex;flex-direction:column;gap:6px}
.dks-phase-row{display:grid;grid-template-columns:80px 70px 1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:all var(--duration)}
.dks-phase-row:hover{background:var(--bg-input-hover);border-color:var(--text-tertiary)}
.dks-phase-row.disabled{opacity:0.4}
.dks-phase-row.in-deadzone{border-color:var(--accent-warning);background:rgba(240,173,78,0.05)}
.dks-phase-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--text-secondary)}
.dks-phase-label svg{width:12px;height:12px}
.dks-phase-label.press svg{color:var(--accent-blue)}
.dks-phase-label.release svg{color:var(--accent-success)}
.dks-depth-input{display:flex;align-items:center;gap:4px}
.dks-depth-input input{width:48px;height:28px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-xs);color:var(--text-value);font-size:12px;font-weight:600;text-align:center;font-family:'JetBrains Mono',monospace}
.dks-depth-input input:focus{border-color:var(--accent-blue);outline:none}
.dks-depth-input .unit{font-size:10px;color:var(--text-tertiary)}
.dks-key-picker{display:flex;align-items:center;justify-content:center;height:32px;padding:0 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration);min-width:80px}
.dks-key-picker:hover{border-color:var(--text-tertiary);background:var(--bg-input-hover)}
.dks-key-picker:focus,.dks-key-picker.listening{border-color:var(--accent-blue);box-shadow:0 0 0 2px rgba(10,132,255,0.2);outline:none}
.dks-key-picker-value{font-size:11px;font-weight:600;color:var(--text-bright)}
.dks-key-picker.listening .dks-key-picker-value{display:none}
.dks-key-picker-prompt{display:none;font-size:10px;color:var(--accent-blue);animation:pulse-glow 1.5s ease-in-out infinite}
.dks-key-picker.listening .dks-key-picker-prompt{display:block}
.dks-phase-toggle{display:flex;align-items:center;gap:8px}
.dks-phase-toggle label{font-size:10px;color:var(--text-tertiary)}
.dks-warning{display:none;align-items:center;gap:6px;padding:8px 12px;font-size:11px;color:var(--accent-warning);background:rgba(240,173,78,0.08);border:1px solid rgba(240,173,78,0.2);border-radius:var(--radius-sm);margin-top:8px}
.dks-warning.visible{display:flex}
.dks-warning svg{width:14px;height:14px;flex-shrink:0}
#functions-keyboard .key .fn-indicator.fn-dks{background:rgba(138,43,226,0.85);color:white}
.gamepad-mode-container{display:flex;flex-direction:column;gap:var(--keyboard-content-gap);animation:fade-in-tab 0.25s var(--ease-ios);position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none}
.gamepad-mode-container.active{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.keyboard-mode-container{display:flex;flex-direction:column;position:relative;opacity:1;visibility:visible;transition:opacity 0.15s var(--ease-ios)}
.keyboard-mode-container.hidden{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;pointer-events:none}
.gamepad-protocol-row{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:8px}
.gamepad-protocol-row label{font-size:12px;color:var(--text-secondary);font-weight:500}
.gamepad-protocol-toggle{display:flex;gap:2px;padding:3px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-pill)}
.gamepad-protocol-btn{padding:6px 14px;background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--duration)}
.gamepad-protocol-btn:hover:not(.active){color:var(--text-primary)}
.gamepad-protocol-btn.active{background:rgba(10,132,255,0.15);color:var(--text-bright)}
#gamepad-keyboard .key.gamepad-left-stick{box-shadow:inset 0 0 0 2px rgba(10,132,255,0.5)}
#gamepad-keyboard .key.gamepad-right-stick{box-shadow:inset 0 0 0 2px rgba(52,199,89,0.5)}
#gamepad-keyboard .key.gamepad-analog{box-shadow:inset 0 0 0 2px rgba(255,149,0,0.5)}
#functions-keyboard .key .gamepad-axis-icon{position:absolute;top:2px;right:2px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;background:rgba(10,132,255,0.9);border-radius:3px;z-index:10}
#functions-keyboard .key .gamepad-axis-icon svg{width:10px;height:10px;color:white}
.gamepad-controls-stage{display:flex;flex-direction:column;gap:16px;align-items:center}
.gamepad-groups-row{display:flex;gap:16px;justify-content:center}
.gamepad-group{background:linear-gradient(145deg,rgba(40,40,40,0.7) 0%,rgba(20,20,20,0.5) 100%);backdrop-filter:blur(16px);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.08),0 10px 30px -10px rgba(0,0,0,0.5);transition:box-shadow 0.2s ease;min-width:210px}
.gamepad-group:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.18),0 0 0 1px rgba(255,255,255,0.10),0 12px 32px -2px rgba(0,0,0,0.5)}
.gamepad-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.gamepad-group-header h4{font-size:12px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.gamepad-group-header h4 .group-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:rgba(10,132,255,0.15);border-radius:4px}
.gamepad-group-header h4 .group-icon svg{width:10px;height:10px;color:var(--accent-blue)}
.gamepad-group.right-stick .group-icon{background:rgba(52,199,89,0.15)}
.gamepad-group.right-stick .group-icon svg{color:var(--accent-success)}
.gamepad-group.triggers .group-icon{background:rgba(255,149,0,0.15)}
.gamepad-group.triggers .group-icon svg{color:#FF9500}
.gamepad-group-clear{padding:5px 10px;background:transparent;border:1px solid rgba(255,69,58,0.3);border-radius:var(--radius-pill);color:var(--accent-red);font-size:11px;font-weight:500;cursor:pointer;opacity:0.7;transition:all var(--duration)}
.gamepad-group-clear:hover{opacity:1;background:rgba(255,69,58,0.1)}
.gamepad-axes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.gamepad-axis-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.gamepad-axis-label{font-size:11px;font-weight:500;color:var(--text-secondary);min-width:45px}
.gamepad-key-select{flex:1;display:flex;align-items:center;justify-content:center;height:28px;padding:0 10px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--duration)}
.gamepad-key-select:hover{border-color:var(--text-tertiary);background:rgba(0,0,0,0.3)}
.gamepad-key-select:focus,.gamepad-key-select.listening{border-color:var(--accent-blue);box-shadow:0 0 0 2px rgba(10,132,255,0.2);outline:none}
.gamepad-key-select-value{font-size:11px;font-weight:600;color:var(--text-bright)}
.gamepad-key-select.empty .gamepad-key-select-value{color:var(--text-tertiary)}
.gamepad-key-select.listening .gamepad-key-select-value{display:none}
.gamepad-key-select-prompt{display:none;font-size:10px;color:var(--accent-blue)}
.gamepad-key-select.listening .gamepad-key-select-prompt{display:block}
.gamepad-more-axes{width:100%;max-width:640px}
.gamepad-more-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:transparent;border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-tertiary);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--duration)}
.gamepad-more-btn:hover{border-color:var(--text-tertiary);color:var(--text-secondary);background:rgba(255,255,255,0.02)}
.gamepad-more-btn svg{width:12px;height:12px;transition:transform 0.2s ease}
.gamepad-more-btn.expanded svg{transform:rotate(180deg)}
.gamepad-advanced-axes{display:none;flex-direction:column;gap:8px;margin-top:12px}
.gamepad-advanced-axes.visible{display:flex}
.gamepad-advanced-axis-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.gamepad-advanced-axis-row .axis-name{font-size:11px;font-weight:500;color:var(--text-secondary);min-width:80px}
.gamepad-hint{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;font-size:11px;color:var(--text-tertiary);text-align:center}
.gamepad-hint a{color:var(--accent-blue);text-decoration:none;cursor:pointer}
.gamepad-hint a:hover{text-decoration:underline}
.fn-panel-type-selector{display:flex;gap:2px;padding:3px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);width:fit-content}
.fn-panel-type-btn{padding:6px 16px;background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;transition:all var(--duration)}
.fn-panel-type-btn:hover:not(.active){color:var(--text-primary);background:rgba(255,255,255,0.04)}
.fn-panel-type-btn.active{background:rgba(10,132,255,0.15);color:var(--text-bright)}
@keyframes dks-marker-pulse{0%,100%{filter:brightness(1)}
50%{filter:brightness(1.3)}
}
.dks-trigger-marker.active{animation:dks-marker-pulse 1s ease-in-out infinite}
.rt-precision-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle);transition:opacity 0.2s ease}
.rt-precision-row.disabled{opacity:0.35;pointer-events:none}
.rt-precision-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.rt-precision-label .tooltip-trigger{margin-top:0}
.rt-precision-selector{display:flex;gap:2px;padding:2px;background:var(--bg-input);border-radius:var(--radius-pill);border:1px solid var(--border-subtle)}
.rt-precision-btn{padding:4px 10px;background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-tertiary);font-size:10px;font-weight:500;cursor:pointer;transition:all var(--duration-fast);text-transform:uppercase;letter-spacing:0.3px}
.rt-precision-btn:hover:not(.active){color:var(--text-secondary);background:rgba(255,255,255,0.04)}
.rt-precision-btn.active{background:var(--accent-blue);color:white}
.key.rt-highprecision .rt-row{font-size:calc(8px * var(--kbd-scale))}
.key.rt-highprecision.rt-unified .rt-row.single{font-size:calc(9px * var(--kbd-scale))}
.key.rt-highprecision.rt-split .rt-row{font-size:calc(7px * var(--kbd-scale))}
.fn-panel-dks-editor{min-height:400px}
.dks-editor-body{position:relative;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;margin-top:16px;gap:0}
.dks-depth-track{display:flex;gap:0;width:100%;max-width:320px;height:280px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}
.dks-depth-scale{width:36px;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;background:rgba(0,0,0,0.2);border-right:1px solid var(--border-subtle);flex-shrink:0}
.dks-depth-mark{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;position:relative}
.dks-depth-mark span{font-size:10px;font-family:'JetBrains Mono',monospace;color:var(--text-tertiary)}
.dks-depth-mark.dks-depth-threshold span{color:var(--text-secondary);font-weight:500}
.dks-depth-mark.dks-depth-bottom span{color:var(--accent-warning)}
.dks-depth-canvas{flex:1;position:relative;cursor:crosshair;background:var(--bg-input)}
.dks-deadzone{position:absolute;left:0;right:0;background:repeating-linear-gradient( -45deg,rgba(255,255,255,0.02),rgba(255,255,255,0.02) 4px,rgba(0,0,0,0.15) 4px,rgba(0,0,0,0.15) 8px );pointer-events:none;z-index:1}
.dks-deadzone::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(255,59,48,0.4)}
.dks-deadzone-top{top:0;border-bottom:1px dashed rgba(255,59,48,0.3)}
.dks-deadzone-top::after{bottom:0}
.dks-deadzone-bottom{bottom:0;border-top:1px dashed rgba(255,59,48,0.3)}
.dks-deadzone-bottom::after{top:0}
.dks-usable-zone{position:absolute;left:0;right:0;background:linear-gradient(180deg,rgba(10,132,255,0.03) 0%,transparent 20%,transparent 80%,rgba(255,149,0,0.05) 100% );pointer-events:none;z-index:0}
.dks-column-line{position:absolute;left:0;right:0;height:1px;background:var(--border-subtle);pointer-events:none;z-index:2}
.dks-column-line.dks-col-1{background:linear-gradient(90deg,transparent 0%,rgba(10,132,255,0.3) 20%,rgba(10,132,255,0.3) 80%,transparent 100%)}
.dks-column-line.dks-col-bottom{height:2px;background:linear-gradient(90deg,transparent 0%,rgba(255,149,0,0.4) 20%,rgba(255,149,0,0.4) 80%,transparent 100%)}
.dks-finger-shadow{position:absolute;left:0;right:0;height:24px;background:linear-gradient(180deg,rgba(10,132,255,0.15) 0%,rgba(10,132,255,0.08) 50%,rgba(10,132,255,0.15) 100% );border-top:1px solid rgba(10,132,255,0.3);border-bottom:1px solid rgba(10,132,255,0.3);pointer-events:none;opacity:0;transition:opacity 0.15s ease;transform:translateY(-50%);z-index:3}
.dks-depth-canvas:hover .dks-finger-shadow{opacity:1}
.dks-items-container{position:absolute;inset:0;pointer-events:none;z-index:10}
.dks-drag-preview{position:absolute;left:12px;right:12px;background:rgba(10,132,255,0.2);border:2px dashed var(--accent-blue);border-radius:var(--radius-xs);pointer-events:none;opacity:0;transition:opacity 0.1s ease;z-index:5}
.dks-drag-preview.visible{opacity:1}
.dks-item-tap{position:absolute;transform:translate(-50%,-50%);min-width:40px;height:28px;padding:0 8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0A84FF 0%,#0066cc 100%);border:2px solid rgba(255,255,255,0.3);border-radius:var(--radius-pill);color:white;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:grab;pointer-events:auto;box-shadow:0 2px 8px rgba(10,132,255,0.4),inset 0 1px 0 rgba(255,255,255,0.2);transition:all 0.15s var(--ease-ios);z-index:10}
.dks-item-tap.dks-lane-2{background:linear-gradient(135deg,#A855F7 0%,#7c3aed 100%);box-shadow:0 2px 8px rgba(168,85,247,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}
.dks-item-tap.dks-lane-3{background:linear-gradient(135deg,#06B6D4 0%,#0891b2 100%);box-shadow:0 2px 8px rgba(6,182,212,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}
.dks-item-tap.dks-lane-4{background:linear-gradient(135deg,#F97316 0%,#ea580c 100%);box-shadow:0 2px 8px rgba(249,115,22,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}
.dks-item-tap:hover{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.1)}
.dks-item-tap:active{cursor:grabbing}
.dks-item-tap.selected{border-color:white;box-shadow:0 0 0 3px rgba(255,255,255,0.3),0 4px 12px rgba(10,132,255,0.5)}
.dks-item-tap .dks-item-label{pointer-events:none;white-space:nowrap}
.dks-item-hold{position:absolute;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(10,132,255,0.2) 0%,rgba(10,132,255,0.35) 50%,rgba(10,132,255,0.2) 100%);border:2px solid #0A84FF;border-radius:var(--radius-sm);color:white;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:grab;pointer-events:auto;min-height:28px;box-shadow:0 2px 8px rgba(10,132,255,0.3),inset 0 0 20px rgba(10,132,255,0.1);transition:all 0.15s var(--ease-ios);z-index:5}
.dks-item-hold.dks-lane-2{background:linear-gradient(90deg,rgba(168,85,247,0.2) 0%,rgba(168,85,247,0.35) 50%,rgba(168,85,247,0.2) 100%);border-color:#A855F7;box-shadow:0 2px 8px rgba(168,85,247,0.3),inset 0 0 20px rgba(168,85,247,0.1)}
.dks-item-hold.dks-lane-3{background:linear-gradient(90deg,rgba(6,182,212,0.2) 0%,rgba(6,182,212,0.35) 50%,rgba(6,182,212,0.2) 100%);border-color:#06B6D4;box-shadow:0 2px 8px rgba(6,182,212,0.3),inset 0 0 20px rgba(6,182,212,0.1)}
.dks-item-hold.dks-lane-4{background:linear-gradient(90deg,rgba(249,115,22,0.2) 0%,rgba(249,115,22,0.35) 50%,rgba(249,115,22,0.2) 100%);border-color:#F97316;box-shadow:0 2px 8px rgba(249,115,22,0.3),inset 0 0 20px rgba(249,115,22,0.1)}
.dks-item-hold:hover{filter:brightness(1.1)}
.dks-item-hold:active{cursor:grabbing}
.dks-item-hold.selected{border-color:white;box-shadow:0 0 0 3px rgba(10,132,255,0.4),0 4px 12px rgba(10,132,255,0.4)}
.dks-item-hold .dks-item-label{pointer-events:none;background:rgba(0,0,0,0.5);padding:2px 6px;border-radius:var(--radius-xs);white-space:nowrap}
.dks-hold-edge{position:absolute;left:0;right:0;height:12px;cursor:ns-resize;z-index:10}
.dks-hold-edge-top{top:-4px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.dks-hold-edge-bottom{bottom:-4px;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.dks-hold-edge::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:20px;height:3px;background:rgba(255,255,255,0.4);border-radius:2px;opacity:0;transition:opacity 0.15s ease}
.dks-hold-edge-top::after{top:4px}
.dks-hold-edge-bottom::after{bottom:4px}
.dks-item-hold:hover .dks-hold-edge::after,.dks-item-hold.selected .dks-hold-edge::after{opacity:1}
@keyframes dks-morph{0%{transform:scale(1)}
50%{transform:scale(1.08,0.92)}
100%{transform:scale(1)}
}
.dks-item-tap.morphing,.dks-item-hold.morphing{animation:dks-morph 0.15s var(--ease-squish)}
.dks-item-info{display:none;flex-direction:column;gap:12px;width:160px;padding:16px;background:var(--bg-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,0.3);margin-left:20px;flex-shrink:0}
.dks-item-info.visible{display:flex}
.dks-item-info-row{display:flex;flex-direction:column;gap:4px}
.dks-item-info-label{font-size:10px;font-weight:500;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.05em}
.dks-item-info-key{font-size:18px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--accent-blue);padding:8px 12px;background:rgba(10,132,255,0.12);border:1px solid rgba(10,132,255,0.25);border-radius:var(--radius-sm);text-align:center}
.dks-item-info-key.dks-info-lane-1{color:#0A84FF;background:rgba(10,132,255,0.12);border-color:rgba(10,132,255,0.25)}
.dks-item-info-key.dks-info-lane-2{color:#A855F7;background:rgba(168,85,247,0.12);border-color:rgba(168,85,247,0.25)}
.dks-item-info-key.dks-info-lane-3{color:#06B6D4;background:rgba(6,182,212,0.12);border-color:rgba(6,182,212,0.25)}
.dks-item-info-key.dks-info-lane-4{color:#F97316;background:rgba(249,115,22,0.12);border-color:rgba(249,115,22,0.25)}
.dks-item-info-value{font-size:14px;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text-primary)}
.dks-item-info-delete{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;margin-top:4px;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all var(--duration-fast) ease}
.dks-item-info-delete svg{width:16px;height:16px}
.dks-item-info-delete:hover{background:rgba(255,59,48,0.1);border-color:var(--accent-danger);color:var(--accent-danger)}
.dks-track-hint{margin-top:12px;text-align:center;font-size:12px;color:var(--text-tertiary);transition:color 0.2s ease}
.dks-track-hint.listening{color:var(--accent-blue)}
.dks-status-bar{margin-top:8px;text-align:center}
.dks-slots-count{font-size:11px;color:var(--text-tertiary)}
.dks-slots-count span{font-weight:600;color:var(--text-secondary)}
.dks-warning{display:none;align-items:center;gap:8px;padding:10px 14px;margin-top:12px;background:rgba(255,149,0,0.1);border:1px solid rgba(255,149,0,0.3);border-radius:var(--radius-sm);color:var(--accent-warning);font-size:12px}
.dks-warning.visible{display:flex}
.dks-warning svg{width:16px;height:16px;flex-shrink:0}
.fn-panel-type-btn{position:relative}
.fn-panel-type-btn.has-config::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--accent-blue);border-radius:50%}
.fn-panel-type-btn.active.has-config{box-shadow:0 0 8px rgba(10,132,255,0.25)}
@keyframes dks-item-place{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
50%{transform:translate(-50%,-50%) scale(1.1)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes dks-item-place-hold{0%{opacity:0;transform:scaleY(0.5)}
50%{transform:scaleY(1.05)}
100%{opacity:1;transform:scaleY(1)}
}
.dks-item-tap.placing{animation:dks-item-place 0.25s var(--ease-squish) forwards}
.dks-item-hold.placing{animation:dks-item-place-hold 0.25s var(--ease-squish) forwards}
@keyframes dks-item-pulse{0%,100%{filter:brightness(1)}
50%{filter:brightness(1.3)}
}
.dks-item-tap.highlight,.dks-item-hold.highlight{animation:dks-item-pulse 0.3s ease}
.sidebar-update-badge{display:none;align-items:center;padding:2px 8px;background:var(--accent-blue);color:white;font-size:10px;font-weight:600;border-radius:var(--radius-pill);cursor:pointer;transition:all var(--duration);margin-left:8px;border:none}
.sidebar-update-badge:hover{background:var(--accent-blue-hover);transform:scale(1.05)}
.firmware-version-display{display:flex;align-items:center;gap:12px}
.btn-update-firmware{background:var(--accent-blue) !important;color:white !important}
.btn-update-firmware:hover{background:var(--accent-blue-hover) !important}
.firmware-warning-box{background:rgba(240,173,78,0.08);border:1px solid rgba(240,173,78,0.2);border-radius:var(--radius-sm);padding:16px}
.firmware-warning-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.firmware-warning-list{list-style:none;padding:0;margin:0}
.firmware-warning-list li{position:relative;padding-left:16px;margin-bottom:6px;color:var(--text-secondary);font-size:13px}
.firmware-warning-list li:last-child{margin-bottom:0}
.firmware-warning-list li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;background:var(--accent-warning);border-radius:50%}
.firmware-confirm-modal{max-width:440px}
.firmware-recovery-box{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px}
.firmware-recovery-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.firmware-recovery-steps{margin:0;padding-left:20px}
.firmware-recovery-steps li{color:var(--text-secondary);font-size:13px;margin-bottom:6px}
.firmware-recovery-steps li:last-child{margin-bottom:0}
#firmware-progress-modal{max-width:380px}
.firmware-progress-bar-container{width:100%;height:8px;background:var(--bg-input);border-radius:var(--radius-pill);overflow:hidden;margin-bottom:16px}
.firmware-progress-bar{height:100%;background:var(--accent-blue);border-radius:var(--radius-pill);transition:width 0.3s ease}
.firmware-progress-percent{color:var(--text-bright);font-size:28px;font-weight:600;font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.firmware-progress-status{color:var(--text-secondary);font-size:13px;margin:0}
.setup-prompt{position:fixed;bottom:24px;right:24px;z-index:9999;background:var(--bg-panel-solid);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 32px rgba(0,0,0,0.4);transform:translateY(120%);opacity:0;transition:transform 0.4s var(--ease-squish),opacity 0.3s ease}
.setup-prompt.visible{transform:translateY(0);opacity:1}
.setup-prompt-text{display:flex;flex-direction:column;gap:2px}
.setup-prompt-title{font-size:14px;font-weight:500;color:var(--text-bright)}
.setup-prompt-subtitle{font-size:12px;color:var(--text-secondary)}
.setup-prompt-actions{display:flex;gap:8px}
.setup-prompt-btn{padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s ease;border:none}
.setup-prompt-btn.primary{background:var(--accent-blue);color:white}
.setup-prompt-btn.primary:hover{background:var(--accent-blue-hover)}
.setup-prompt-btn.dismiss{background:transparent;color:var(--text-tertiary);padding:8px}
.setup-prompt-btn.dismiss:hover{color:var(--text-secondary)}
.setup-wizard-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10002;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.setup-wizard-overlay.visible{opacity:1;pointer-events:auto}
.setup-wizard{background:var(--bg-panel-solid);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;max-width:480px;transform:scale(0.95) translateY(10px);transition:transform 0.4s var(--ease-squish);overflow:hidden}
.setup-wizard-overlay.visible .setup-wizard{transform:scale(1) translateY(0)}
.setup-wizard-header{padding:24px 28px 0;text-align:center}
.setup-wizard-title{font-size:20px;font-weight:600;color:var(--text-bright);margin-bottom:6px}
.setup-wizard-subtitle{font-size:13px;color:var(--text-secondary);line-height:1.5}
.setup-wizard-body{padding:24px 28px}
.setup-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.setup-option{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:16px;cursor:pointer;transition:all 0.2s ease;text-align:center}
.setup-option:hover{background:var(--bg-input-hover);border-color:var(--border-medium)}
.setup-option.selected{background:rgba(10,132,255,0.1);border-color:var(--accent-blue)}
.setup-option-icon{font-size:24px;margin-bottom:8px;display:block}
.setup-option-title{font-size:14px;font-weight:500;color:var(--text-bright);margin-bottom:4px}
.setup-option-desc{font-size:11px;color:var(--text-secondary);line-height:1.4}
.setup-confirm{text-align:center}
.setup-confirm-title{font-size:16px;font-weight:500;color:var(--text-bright);margin-bottom:20px}
.setup-confirm-settings{background:var(--bg-input);border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:8px}
.setup-confirm-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.setup-confirm-row:not(:last-child){border-bottom:1px solid var(--border-subtle)}
.setup-confirm-label{font-size:13px;color:var(--text-secondary)}
.setup-confirm-value{font-size:13px;font-weight:500;color:var(--text-bright)}
.setup-confirm-value.enabled{color:var(--accent-blue)}
.setup-confirm-value.disabled{color:var(--text-tertiary)}
.setup-wizard-footer{padding:16px 28px 24px;display:flex;justify-content:center;gap:12px}
.setup-wizard-btn{padding:12px 28px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s ease;border:none}
.setup-wizard-btn.primary{background:var(--accent-blue);color:white}
.setup-wizard-btn.primary:hover{background:var(--accent-blue-hover)}
.setup-wizard-btn.primary:disabled{background:var(--bg-elevated);color:var(--text-tertiary);cursor:not-allowed}
.setup-wizard-btn.secondary{background:transparent;color:var(--text-secondary)}
.setup-wizard-btn.secondary:hover{color:var(--text-primary)}
.setup-wizard-body.loading{opacity:0.5;pointer-events:none}
.setup-wizard-footer.loading .setup-wizard-btn.secondary{opacity:0.4;pointer-events:none}
.setup-wizard-btn .setup-spinner{animation:setup-spin 1s linear infinite;margin-right:6px;vertical-align:middle}
@keyframes setup-spin{from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
:root{--kbd-shine-angle:0deg;--kbd-shine-intensity:0.6;--indicator-x:50%;--indicator-shine:0.2;--sidebar-shine:0.05}
.keyboard-diagram{position:relative}
.keyboard-diagram:not(.loading){box-shadow:0 0 20px rgba(180,200,255,0.06)}
.keyboard-diagram:not(.loading)::before{content:'';position:absolute;inset:-3px;border-radius:calc(var(--radius-xs) + 3px);padding:3px;background:linear-gradient( 135deg,rgba(255,255,255,0.12) 0%,rgba(200,220,255,0.06) 30%,transparent 50%,rgba(200,220,255,0.04) 70%,rgba(255,255,255,0.08) 100% );-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.7;pointer-events:none;z-index:10}
.keyboard-diagram:not(.loading)::after{content:'';position:absolute;inset:0;border-radius:var(--radius-xs);background:repeating-linear-gradient( 90deg,transparent 0px,rgba(255,255,255,0.008) 1px,transparent 2px );pointer-events:none;z-index:1}
.sidebar-left{position:relative}
.sidebar-left::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient( 180deg,transparent 0%,rgba(255,255,255,calc(var(--sidebar-shine, 0.05))) 30%,rgba(255,255,255,calc(var(--sidebar-shine, 0.05) * 1.5)) 50%,rgba(255,255,255,calc(var(--sidebar-shine, 0.05))) 70%,transparent 100% );pointer-events:none;z-index:20}
.btn-tab{color:color-mix(in srgb,var(--text-secondary),var(--text-bright) calc(var(--text-proximity-bright, 0) * 100%));transition:color 0.1s ease;text-shadow:calc(var(--text-light-x, 0) * 1px) calc(var(--text-light-y, 0) * 0.5px) 0px rgba(255,255,255,var(--text-light-intensity,0)),calc(var(--text-light-x, 0) * -0.5px) calc(var(--text-light-y, 0) * -0.3px) 1px rgba(0,0,0,calc(var(--text-light-intensity, 0) * 0.4))}
.btn-tab:hover{color:var(--text-bright)}
.btn-tab.active{color:var(--text-primary)}
.active-tab-underline::before{content:'';position:absolute;inset:-1px 0;background:radial-gradient( ellipse 25% 100% at var(--indicator-x,50%) 50%,rgba(255,255,255,0.85) 0%,rgba(180,210,255,0.4) 30%,transparent 65% );border-radius:4px;opacity:var(--indicator-shine,0.35);pointer-events:none}
.btn-history::before{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient( 180deg,rgba(220,235,255,calc(var(--btn-shine, 0) * 0.14)) 0%,rgba(200,220,255,calc(var(--btn-shine, 0) * 0.06)) 40%,transparent 80% );pointer-events:none;z-index:1}
.btn-history:hover:not(:disabled){border-color:var(--text-secondary);background:rgba(255,255,255,0.03)}
.btn-history svg{position:relative;z-index:2}
.btn-save-profile{position:relative;overflow:hidden;font-weight:500;letter-spacing:normal;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;text-shadow:none}
.btn-save-profile::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient( 180deg,rgba(255,255,255,calc(var(--btn-shine, 0) * 0.18)) 0%,rgba(220,240,255,calc(var(--btn-shine, 0) * 0.08)) 40%,transparent 85% );pointer-events:none;z-index:1}
.btn-save-profile:hover{border-color:rgba(255,255,255,0.35)}
.btn-save-profile span,.btn-save-profile svg{position:relative;z-index:2}
.btn-connect::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:linear-gradient( 180deg,rgba(255,255,255,calc(var(--btn-shine, 0) * 0.22)) 0%,rgba(220,240,255,calc(var(--btn-shine, 0) * 0.10)) 40%,transparent 85% );pointer-events:none;z-index:1}
.btn-toolbar{position:relative;overflow:hidden}
.btn-toolbar::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:linear-gradient( 180deg,rgba(200,220,255,calc(var(--btn-shine, 0) * 0.14)) 0%,rgba(180,210,255,calc(var(--btn-shine, 0) * 0.05)) 45%,transparent 90% );pointer-events:none;z-index:1}
.btn-toolbar:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary);background:rgba(255,255,255,0.03)}
.btn-toolbar span{position:relative;z-index:2}
.action-btn{position:relative;overflow:hidden}
.action-btn::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:linear-gradient( 180deg,rgba(200,220,255,calc(var(--btn-shine, 0) * 0.12)) 0%,rgba(180,210,255,calc(var(--btn-shine, 0) * 0.04)) 45%,transparent 90% );pointer-events:none;z-index:1}
.action-btn svg,.action-btn span{position:relative;z-index:2}
.btn-modal{position:relative;overflow:hidden;font-weight:500;letter-spacing:normal;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;text-shadow:none}
.btn-modal::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:linear-gradient( 180deg,rgba(255,255,255,calc(var(--btn-shine, 0) * 0.14)) 0%,rgba(220,240,255,calc(var(--btn-shine, 0) * 0.05)) 45%,transparent 90% );pointer-events:none;z-index:1}
.btn-modal.secondary{border:1px solid rgba(255,255,255,0.08)}
.btn-modal.secondary:hover:not(:disabled){border-color:rgba(255,255,255,0.15)}
.btn-modal.primary{border:1px solid rgba(255,255,255,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
.btn-modal.primary:hover:not(:disabled){border-color:rgba(255,255,255,0.4)}
.btn-modal.danger{border:1px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
.btn-modal.danger::before{background:linear-gradient( 180deg,rgba(255,220,210,calc(var(--btn-shine, 0) * 0.2)) 0%,rgba(255,180,170,calc(var(--btn-shine, 0) * 0.08)) 45%,transparent 90% )}
.btn-modal.danger:hover:not(:disabled){border-color:rgba(255,255,255,0.35)}
.btn-modal span{position:relative;z-index:2}
.toggle-slider:before{background-image:linear-gradient( 180deg,rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.08) 40%,transparent 60% );box-shadow:0 2px 4px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2)}
input:checked + .toggle-slider:before{background-image:linear-gradient( 180deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.15) 40%,transparent 60% );box-shadow:0 2px 6px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.05),inset 0 1px 0 rgba(255,255,255,0.35)}
.toggle-switch:hover .toggle-slider:before{box-shadow:0 2px 6px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.3)}
input[type="range"]::-webkit-slider-thumb{background-image:linear-gradient( 180deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.15) 35%,transparent 55% );box-shadow:0 2px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.25)}
input[type="range"]::-webkit-slider-thumb:hover{box-shadow:0 3px 8px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.35)}
input[type="range"]::-moz-range-thumb{background-image:linear-gradient( 180deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.15) 35%,transparent 55% );box-shadow:0 2px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.25)}
input[type="range"]::-moz-range-thumb:hover{box-shadow:0 3px 8px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.35)}
.panel{box-shadow:inset 0 1px 0 0 rgba(255,255,255,calc(0.08 + var(--panel-edge-intensity, 0) * 0.18)),0 0 0 1px rgba(255,255,255,calc(var(--panel-edge-intensity, 0) * 0.06)),0 10px 30px -10px rgba(0,0,0,0.5);transition:box-shadow 0.15s ease}
.panel:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,calc(0.18 + var(--panel-edge-intensity, 0) * 0.14)),0 0 0 1px rgba(255,255,255,calc(0.08 + var(--panel-edge-intensity, 0) * 0.05)),0 12px 32px -2px rgba(0,0,0,0.5)}
.key-palette{box-shadow:inset 0 1px 0 0 rgba(255,255,255,calc(0.08 + var(--palette-edge-intensity, 0) * 0.15)),0 0 0 1px rgba(255,255,255,calc(var(--palette-edge-intensity, 0) * 0.06)),0 10px 30px -10px rgba(0,0,0,0.5);transition:box-shadow 0.15s ease}
.select-trigger{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.06),inset 0 2px 4px -2px rgba(0,0,0,0.3)}
.select-trigger:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.1),inset 0 2px 4px -2px rgba(0,0,0,0.25)}
.select-trigger:after{transition:border-top-color 0.15s ease}
.select-trigger:hover:after{border-top-color:var(--text-secondary)}
.options-list,.profile-menu-dropdown{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.1),0 0 0 1px rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.2)}
.options-list .option,.profile-menu-dropdown li{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0);transition:background-color 0.1s,color 0.1s,box-shadow 0.15s ease}
.options-list .option:hover,.profile-menu-dropdown li:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.04)}
.options-list .option.selected{box-shadow:inset 0 1px 0 0 rgba(10,132,255,0.15)}
.lighting-zone-switcher{box-shadow:inset 0 1px 3px rgba(0,0,0,0.4),inset 0 0 0 1px rgba(0,0,0,0.2)}
.zone-btn{box-shadow:none;transition:all var(--duration-fast) ease,box-shadow 0.15s ease}
.zone-btn:hover:not(.active){background:rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
.zone-btn.active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.25)}
.color-swatch{box-shadow:0 2px 4px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.1)}
.color-swatch.active-trigger{box-shadow:0 0 12px currentColor,0 2px 4px rgba(0,0,0,0.3)}
.lighting-color-palette.palette-expanded .color-swatch{box-shadow:0 3px 6px rgba(0,0,0,0.35),0 0 0 1px rgba(0,0,0,0.15)}
.lighting-color-palette.palette-expanded .color-swatch:hover{box-shadow:0 4px 10px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.15)}
.lighting-color-palette.palette-expanded .color-swatch.selected{box-shadow:0 3px 6px rgba(0,0,0,0.35),0 0 0 2px rgba(255,255,255,0.5)}
.layer-seg{transition:all var(--duration-fast) ease,box-shadow 0.15s ease}
.layer-seg:hover:not(.active){box-shadow:inset 0 1px 0 rgba(255,255,255,0.03)}
.layer-seg.active{box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 0 0 1px rgba(10,132,255,0.15)}
.btn-danger{position:relative;overflow:hidden}
.btn-danger::before{content:'';position:absolute;inset:0;border-radius:var(--radius-pill);background:radial-gradient( ellipse 80% 80% at 50% 100%,rgba(255,69,58,0) 0%,rgba(255,69,58,0) 100% );pointer-events:none;transition:background 0.2s ease}
.btn-danger:hover::before{background:radial-gradient( ellipse 80% 80% at 50% 100%,rgba(255,69,58,0.08) 0%,transparent 70% )}
.fn-key-picker{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.05),inset 0 2px 4px -2px rgba(0,0,0,0.3)}
.fn-key-picker:hover{box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.08),inset 0 2px 4px -2px rgba(0,0,0,0.25)}
.fn-key-picker:focus,.fn-key-picker.listening{box-shadow:inset 0 1px 0 0 rgba(10,132,255,0.1),inset 0 2px 4px -2px rgba(0,0,0,0.2)}
.btn-secondary{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.btn-secondary:hover{border-color:rgba(255,255,255,0.15)}
.btn-primary{position:relative;overflow:hidden;font-weight:500;letter-spacing:normal;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;text-shadow:none;border:1px solid rgba(255,255,255,0.2);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
.btn-primary:hover{border-color:rgba(255,255,255,0.4)}
.btn-primary::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient( 180deg,rgba(255,255,255,calc(var(--btn-shine, 0) * 0.18)) 0%,rgba(220,240,255,calc(var(--btn-shine, 0) * 0.08)) 40%,transparent 85% );pointer-events:none;z-index:1}
.btn-primary span{position:relative;z-index:2}
:root.tab-hidden .keyboard-diagram:not(.loading){animation:none;box-shadow:0 0 20px rgba(180,200,255,0.04)}
:root.tab-hidden *,:root.tab-hidden *::before,:root.tab-hidden *::after{animation-play-state:paused !important;transition:none !important}
:root.tab-hidden{--kbd-shine-intensity:0.5;--sidebar-shine:0.02;--indicator-shine:0.2}
:root.tab-hidden .keyboard-diagram .key,:root.tab-hidden .lighting-bars .light-bar{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){.keyboard-diagram::before,.panel,.key-palette{transition:none !important}
.keyboard-diagram:not(.loading){animation:none !important;box-shadow:0 0 26px rgba(180,200,255,0.08)}
:root{--kbd-shine-intensity:0.4 !important;--sidebar-shine:0.03 !important}
*,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important}
.keyboard-diagram .key,.lighting-bars .light-bar{animation:none !important;filter:none !important}
}