/* Gemini keyboard palette: colors only; no component/layout/event replacement. */
html:not([data-learning-style="classic_custom"])[data-learning-style="warm_paper"] {
  --kb-container-bg: linear-gradient(180deg, #FAF8F2 0%, #F3EFE4 100%);
  --kb-container-border: #E6E0D2;
  --kb-container-shadow: 0 12px 32px -8px rgba(90, 80, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F8F6F0 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #D8D1C2;
  --kb-key-bottom-shadow: #C4BCAB;
  --kb-key-text-color: #2D3748;
  --kb-key-func-bg: linear-gradient(180deg, #F0ECE0 0%, #E8E2D2 100%);
  --kb-key-func-border: #D2C9B7;
  --kb-key-func-text: #023627;
  --kb-key-active-bg: #10B981;
  --kb-key-active-text: #080808;
  --kb-key-active-border: #059669;
  --kb-key-active-glow: 0 0 16px rgba(16, 185, 129, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(16, 185, 129, 0.55);
  --kb-hand-fill: rgba(16, 185, 129, 0.05);
  --kb-hand-wrist-gradient-start: rgba(16, 185, 129, 0.12);
  --kb-hand-wrist-gradient-end: rgba(16, 185, 129, 0.01);
  --kb-hand-fingernail-stroke: rgba(16, 185, 129, 0.7);
  --kb-hand-finger-guide-glow: #10B981;
  --kb-hand-active-finger-pulse: rgba(16, 185, 129, 0.35);
  --kb-prompt-text-color: #0a4c47;
  --kb-slot-bg: #F5F2EB;
  --kb-slot-border: #DCD5C6;
  --kb-slot-filled-bg: #ECFDF5;
  --kb-slot-filled-border: #10B981;
  --kb-slot-filled-text: #047857;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#warm_paper");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="midnight_pro"] {
  --kb-container-bg: linear-gradient(180deg, #111A2C 0%, #0C1322 100%);
  --kb-container-border: #1E293B;
  --kb-container-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --kb-key-bg: linear-gradient(180deg, #1E293B 0%, #152033 100%);
  --kb-key-bg-hover: #28364D;
  --kb-key-border: #293950;
  --kb-key-bottom-shadow: #0D1422;
  --kb-key-text-color: #e8ecf3;
  --kb-key-func-bg: linear-gradient(180deg, #182338 0%, #111A2C 100%);
  --kb-key-func-border: #23324B;
  --kb-key-func-text: #88d7fb;
  --kb-key-active-bg: #14B8A6;
  --kb-key-active-text: #04060c;
  --kb-key-active-border: #2DD4BF;
  --kb-key-active-glow: 0 0 20px rgba(20, 184, 166, 0.55);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(56, 189, 248, 0.55);
  --kb-hand-fill: rgba(56, 189, 248, 0.06);
  --kb-hand-wrist-gradient-start: rgba(56, 189, 248, 0.12);
  --kb-hand-wrist-gradient-end: rgba(56, 189, 248, 0.01);
  --kb-hand-fingernail-stroke: rgba(56, 189, 248, 0.75);
  --kb-hand-finger-guide-glow: #38BDF8;
  --kb-hand-active-finger-pulse: rgba(56, 189, 248, 0.4);
  --kb-prompt-text-color: #38BDF8;
  --kb-slot-bg: #141E30;
  --kb-slot-border: #23324C;
  --kb-slot-filled-bg: rgba(20, 184, 166, 0.15);
  --kb-slot-filled-border: #14B8A6;
  --kb-slot-filled-text: #2DD4BF;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#midnight_pro");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="vibrant_sky"] {
  --kb-container-bg: linear-gradient(180deg, #F4F9FF 0%, #E8F2FD 100%);
  --kb-container-border: #C9DEFA;
  --kb-container-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #BDD6F7;
  --kb-key-bottom-shadow: #A8C7F0;
  --kb-key-text-color: #1E3A8A;
  --kb-key-func-bg: linear-gradient(180deg, #E6F0FC 0%, #D8E8FA 100%);
  --kb-key-func-border: #B8D4F5;
  --kb-key-func-text: #143681;
  --kb-key-active-bg: #1a45a3;
  --kb-key-active-text: #ffffff;
  --kb-key-active-border: #1D4ED8;
  --kb-key-active-glow: 0 0 16px rgba(37, 99, 235, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(37, 99, 235, 0.5);
  --kb-hand-fill: rgba(37, 99, 235, 0.05);
  --kb-hand-wrist-gradient-start: rgba(37, 99, 235, 0.1);
  --kb-hand-wrist-gradient-end: rgba(37, 99, 235, 0.01);
  --kb-hand-fingernail-stroke: rgba(37, 99, 235, 0.7);
  --kb-hand-finger-guide-glow: #2563EB;
  --kb-hand-active-finger-pulse: rgba(37, 99, 235, 0.35);
  --kb-prompt-text-color: #163ca7;
  --kb-slot-bg: #EFF6FF;
  --kb-slot-border: #BFDBFE;
  --kb-slot-filled-bg: #DBEAFE;
  --kb-slot-filled-border: #2563EB;
  --kb-slot-filled-text: #1E40AF;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#vibrant_sky");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="forest_mint"] {
  --kb-container-bg: linear-gradient(180deg, #F2FAF5 0%, #E6F5EC 100%);
  --kb-container-border: #BCE5CF;
  --kb-container-shadow: 0 12px 32px -8px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F5FBF7 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #B2E0C7;
  --kb-key-bottom-shadow: #96D0B0;
  --kb-key-text-color: #064E3B;
  --kb-key-func-bg: linear-gradient(180deg, #E2F5EA 0%, #D4EEDF 100%);
  --kb-key-func-border: #A5DBC0;
  --kb-key-func-text: #02422e;
  --kb-key-active-bg: #35aa86;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #047857;
  --kb-key-active-glow: 0 0 16px rgba(5, 150, 105, 0.45);
  --kb-key-success-bg: #047857;
  --kb-key-success-text: #FFFFFF;
  --kb-hand-stroke: rgba(5, 150, 105, 0.55);
  --kb-hand-fill: rgba(5, 150, 105, 0.06);
  --kb-hand-wrist-gradient-start: rgba(5, 150, 105, 0.12);
  --kb-hand-wrist-gradient-end: rgba(5, 150, 105, 0.01);
  --kb-hand-fingernail-stroke: rgba(5, 150, 105, 0.75);
  --kb-hand-finger-guide-glow: #059669;
  --kb-hand-active-finger-pulse: rgba(5, 150, 105, 0.35);
  --kb-prompt-text-color: #034e39;
  --kb-slot-bg: #ECFDF5;
  --kb-slot-border: #A7F3D0;
  --kb-slot-filled-bg: #D1FAE5;
  --kb-slot-filled-border: #059669;
  --kb-slot-filled-text: #064E3B;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#forest_mint");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="sakura_blossom"] {
  --kb-container-bg: linear-gradient(180deg, #FFF5F7 0%, #FDEBF0 100%);
  --kb-container-border: #FBCFD8;
  --kb-container-shadow: 0 12px 32px -8px rgba(244, 63, 94, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF8FA 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #FAC5D0;
  --kb-key-bottom-shadow: #F1AAB8;
  --kb-key-text-color: #7f1233;
  --kb-key-func-bg: linear-gradient(180deg, #FDE6EC 0%, #FCD8E2 100%);
  --kb-key-func-border: #F9B7C7;
  --kb-key-func-text: #640d20;
  --kb-key-active-bg: #f66881;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #E11D48;
  --kb-key-active-glow: 0 0 16px rgba(244, 63, 94, 0.45);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(244, 63, 94, 0.5);
  --kb-hand-fill: rgba(244, 63, 94, 0.05);
  --kb-hand-wrist-gradient-start: rgba(244, 63, 94, 0.1);
  --kb-hand-wrist-gradient-end: rgba(244, 63, 94, 0.01);
  --kb-hand-fingernail-stroke: rgba(244, 63, 94, 0.7);
  --kb-hand-finger-guide-glow: #F43F5E;
  --kb-hand-active-finger-pulse: rgba(244, 63, 94, 0.35);
  --kb-prompt-text-color: #a30f34;
  --kb-slot-bg: #FFF1F2;
  --kb-slot-border: #FECDD3;
  --kb-slot-filled-bg: #FFE4E6;
  --kb-slot-filled-border: #F43F5E;
  --kb-slot-filled-text: #9F1239;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#sakura_blossom");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="matcha_tea"] {
  --kb-container-bg: linear-gradient(180deg, #F7F9F0 0%, #EDF2E1 100%);
  --kb-container-border: #D8E2C4;
  --kb-container-shadow: 0 12px 32px -8px rgba(101, 163, 13, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F9FAF5 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #CAD8B0;
  --kb-key-bottom-shadow: #B2C494;
  --kb-key-text-color: #304a12;
  --kb-key-func-bg: linear-gradient(180deg, #E9EFCF 0%, #DCE5BD 100%);
  --kb-key-func-border: #BDCD9D;
  --kb-key-func-text: #233907;
  --kb-key-active-bg: #6ea91c;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #4D7C0F;
  --kb-key-active-glow: 0 0 16px rgba(101, 163, 13, 0.45);
  --kb-key-success-bg: #4D7C0F;
  --kb-key-success-text: #FFFFFF;
  --kb-hand-stroke: rgba(101, 163, 13, 0.55);
  --kb-hand-fill: rgba(101, 163, 13, 0.06);
  --kb-hand-wrist-gradient-start: rgba(101, 163, 13, 0.12);
  --kb-hand-wrist-gradient-end: rgba(101, 163, 13, 0.01);
  --kb-hand-fingernail-stroke: rgba(101, 163, 13, 0.75);
  --kb-hand-finger-guide-glow: #65A30D;
  --kb-hand-active-finger-pulse: rgba(101, 163, 13, 0.35);
  --kb-prompt-text-color: #2f4b09;
  --kb-slot-bg: #F7FEE7;
  --kb-slot-border: #D9F99D;
  --kb-slot-filled-bg: #ECFCCB;
  --kb-slot-filled-border: #65A30D;
  --kb-slot-filled-text: #365314;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#matcha_tea");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="sunset_amber"] {
  --kb-container-bg: linear-gradient(180deg, #FFF8F0 0%, #FEEFDE 100%);
  --kb-container-border: #FCD7B6;
  --kb-container-shadow: 0 12px 32px -8px rgba(249, 115, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #FFF9F4 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #F8CEAA;
  --kb-key-bottom-shadow: #EEB789;
  --kb-key-text-color: #712910;
  --kb-key-func-bg: linear-gradient(180deg, #FDE8D4 0%, #FBDDC1 100%);
  --kb-key-func-border: #F5BE91;
  --kb-key-func-text: #572104;
  --kb-key-active-bg: #F97316;
  --kb-key-active-text: #010101;
  --kb-key-active-border: #EA580C;
  --kb-key-active-glow: 0 0 16px rgba(249, 115, 22, 0.45);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(249, 115, 22, 0.5);
  --kb-hand-fill: rgba(249, 115, 22, 0.06);
  --kb-hand-wrist-gradient-start: rgba(249, 115, 22, 0.12);
  --kb-hand-wrist-gradient-end: rgba(249, 115, 22, 0.01);
  --kb-hand-fingernail-stroke: rgba(249, 115, 22, 0.75);
  --kb-hand-finger-guide-glow: #F97316;
  --kb-hand-active-finger-pulse: rgba(249, 115, 22, 0.35);
  --kb-prompt-text-color: #842c08;
  --kb-slot-bg: #FFF7ED;
  --kb-slot-border: #FED7AA;
  --kb-slot-filled-bg: #FFEDD5;
  --kb-slot-filled-border: #F97316;
  --kb-slot-filled-text: #9A3412;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#sunset_amber");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="lavender_dream"] {
  --kb-container-bg: linear-gradient(180deg, #FAF7FD 0%, #F1EAFA 100%);
  --kb-container-border: #E5D5F7;
  --kb-container-shadow: 0 12px 32px -8px rgba(139, 92, 246, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #DAC9F0;
  --kb-key-bottom-shadow: #C4ADE3;
  --kb-key-text-color: #581C87;
  --kb-key-func-bg: linear-gradient(180deg, #EDE2F8 0%, #E2D2F4 100%);
  --kb-key-func-border: #CEBAE9;
  --kb-key-func-text: #3d1c74;
  --kb-key-active-bg: #a784f8;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #7C3AED;
  --kb-key-active-glow: 0 0 16px rgba(139, 92, 246, 0.45);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(139, 92, 246, 0.5);
  --kb-hand-fill: rgba(139, 92, 246, 0.06);
  --kb-hand-wrist-gradient-start: rgba(139, 92, 246, 0.12);
  --kb-hand-wrist-gradient-end: rgba(139, 92, 246, 0.01);
  --kb-hand-fingernail-stroke: rgba(139, 92, 246, 0.75);
  --kb-hand-finger-guide-glow: #8B5CF6;
  --kb-hand-active-finger-pulse: rgba(139, 92, 246, 0.35);
  --kb-prompt-text-color: #5d22b8;
  --kb-slot-bg: #FAF5FF;
  --kb-slot-border: #E9D5FF;
  --kb-slot-filled-bg: #F3E8FF;
  --kb-slot-filled-border: #8B5CF6;
  --kb-slot-filled-text: #6B21A8;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#lavender_dream");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="nordic_frost"] {
  --kb-container-bg: linear-gradient(180deg, #F6F9FC 0%, #EBF1F7 100%);
  --kb-container-border: #D2DFEC;
  --kb-container-shadow: 0 12px 32px -8px rgba(14, 165, 233, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #C6D6E5;
  --kb-key-bottom-shadow: #AEC2D4;
  --kb-key-text-color: #0F172A;
  --kb-key-func-bg: linear-gradient(180deg, #E6EFF7 0%, #D8E6F2 100%);
  --kb-key-func-border: #BCCFE0;
  --kb-key-func-text: #013551;
  --kb-key-active-bg: #0EA5E9;
  --kb-key-active-text: #010101;
  --kb-key-active-border: #0284C7;
  --kb-key-active-glow: 0 0 16px rgba(14, 165, 233, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(14, 165, 233, 0.5);
  --kb-hand-fill: rgba(14, 165, 233, 0.05);
  --kb-hand-wrist-gradient-start: rgba(14, 165, 233, 0.1);
  --kb-hand-wrist-gradient-end: rgba(14, 165, 233, 0.01);
  --kb-hand-fingernail-stroke: rgba(14, 165, 233, 0.7);
  --kb-hand-finger-guide-glow: #0EA5E9;
  --kb-hand-active-finger-pulse: rgba(14, 165, 233, 0.35);
  --kb-prompt-text-color: #02486f;
  --kb-slot-bg: #F0F9FF;
  --kb-slot-border: #BAE6FD;
  --kb-slot-filled-bg: #E0F2FE;
  --kb-slot-filled-border: #0EA5E9;
  --kb-slot-filled-text: #0272ac;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#nordic_frost");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="desert_dune"] {
  --kb-container-bg: linear-gradient(180deg, #FBF6EE 0%, #F3E9D9 100%);
  --kb-container-border: #E3D3BD;
  --kb-container-shadow: 0 12px 32px -8px rgba(180, 83, 9, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --kb-key-bg: linear-gradient(180deg, #FFFDF9 0%, #F8F1E5 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #D8C5AA;
  --kb-key-bottom-shadow: #C4AE90;
  --kb-key-text-color: #451A03;
  --kb-key-func-bg: linear-gradient(180deg, #EFE3D0 0%, #E5D5BF 100%);
  --kb-key-func-border: #CEBAA0;
  --kb-key-func-text: #492204;
  --kb-key-active-bg: #dc831b;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #B45309;
  --kb-key-active-glow: 0 0 16px rgba(217, 119, 6, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(217, 119, 6, 0.55);
  --kb-hand-fill: rgba(217, 119, 6, 0.06);
  --kb-hand-wrist-gradient-start: rgba(217, 119, 6, 0.12);
  --kb-hand-wrist-gradient-end: rgba(217, 119, 6, 0.01);
  --kb-hand-fingernail-stroke: rgba(217, 119, 6, 0.75);
  --kb-hand-finger-guide-glow: #D97706;
  --kb-hand-active-finger-pulse: rgba(217, 119, 6, 0.35);
  --kb-prompt-text-color: #71320b;
  --kb-slot-bg: #FFFBEB;
  --kb-slot-border: #FDE68A;
  --kb-slot-filled-bg: #FEF3C7;
  --kb-slot-filled-border: #D97706;
  --kb-slot-filled-text: #78350F;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#desert_dune");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="cyber_neon_clean"] {
  --kb-container-bg: linear-gradient(180deg, #111827 0%, #0B0F19 100%);
  --kb-container-border: #1F2937;
  --kb-container-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --kb-key-bg: linear-gradient(180deg, #1F2937 0%, #151D2A 100%);
  --kb-key-bg-hover: #2A3649;
  --kb-key-border: #2B384E;
  --kb-key-bottom-shadow: #0E131F;
  --kb-key-text-color: #E0E7FF;
  --kb-key-func-bg: linear-gradient(180deg, #182234 0%, #101724 100%);
  --kb-key-func-border: #26344B;
  --kb-key-func-text: #bcc2fb;
  --kb-key-active-bg: #8c8ff5;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #4F46E5;
  --kb-key-active-glow: 0 0 20px rgba(99, 102, 241, 0.6);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(129, 140, 248, 0.55);
  --kb-hand-fill: rgba(99, 102, 241, 0.07);
  --kb-hand-wrist-gradient-start: rgba(99, 102, 241, 0.14);
  --kb-hand-wrist-gradient-end: rgba(99, 102, 241, 0.01);
  --kb-hand-fingernail-stroke: rgba(129, 140, 248, 0.8);
  --kb-hand-finger-guide-glow: #818CF8;
  --kb-hand-active-finger-pulse: rgba(99, 102, 241, 0.4);
  --kb-prompt-text-color: #969ff9;
  --kb-slot-bg: #161F30;
  --kb-slot-border: #28354A;
  --kb-slot-filled-bg: rgba(99, 102, 241, 0.15);
  --kb-slot-filled-border: #6366F1;
  --kb-slot-filled-text: #A5B4FC;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#cyber_neon_clean");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="deep_ocean"] {
  --kb-container-bg: linear-gradient(180deg, #0A1C2E 0%, #05101C 100%);
  --kb-container-border: #12314D;
  --kb-container-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --kb-key-bg: linear-gradient(180deg, #0F2D48 0%, #0A1E31 100%);
  --kb-key-bg-hover: #163B5D;
  --kb-key-border: #18476F;
  --kb-key-bottom-shadow: #05121F;
  --kb-key-text-color: #f0f9ff;
  --kb-key-func-bg: linear-gradient(180deg, #0D263D 0%, #07192A 100%);
  --kb-key-func-border: #133D62;
  --kb-key-func-text: #73e3f4;
  --kb-key-active-bg: #06B6D4;
  --kb-key-active-text: #02070c;
  --kb-key-active-border: #22D3EE;
  --kb-key-active-glow: 0 0 20px rgba(6, 182, 212, 0.65);
  --kb-key-success-bg: #10B981;
  --kb-key-success-text: #383838;
  --kb-hand-stroke: rgba(34, 211, 238, 0.55);
  --kb-hand-fill: rgba(6, 182, 212, 0.07);
  --kb-hand-wrist-gradient-start: rgba(6, 182, 212, 0.15);
  --kb-hand-wrist-gradient-end: rgba(6, 182, 212, 0.01);
  --kb-hand-fingernail-stroke: rgba(34, 211, 238, 0.8);
  --kb-hand-finger-guide-glow: #22D3EE;
  --kb-hand-active-finger-pulse: rgba(6, 182, 212, 0.4);
  --kb-prompt-text-color: #22D3EE;
  --kb-slot-bg: #092135;
  --kb-slot-border: #164368;
  --kb-slot-filled-bg: rgba(6, 182, 212, 0.15);
  --kb-slot-filled-border: #06B6D4;
  --kb-slot-filled-text: #67E8F9;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#deep_ocean");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="vintage_sepia"] {
  --kb-container-bg: linear-gradient(180deg, #EFE8DA 0%, #E3DAC6 100%);
  --kb-container-border: #D1C4AC;
  --kb-container-shadow: 0 12px 32px -8px rgba(60, 50, 40, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --kb-key-bg: linear-gradient(180deg, #FDFCF9 0%, #F5F0E4 100%);
  --kb-key-bg-hover: #FFFFFF;
  --kb-key-border: #C9BBA0;
  --kb-key-bottom-shadow: #B5A586;
  --kb-key-text-color: #1C1917;
  --kb-key-func-bg: linear-gradient(180deg, #E4D9C4 0%, #D8CBB3 100%);
  --kb-key-func-border: #BFAFA0;
  --kb-key-func-text: #5f1111;
  --kb-key-active-bg: #a41c1c;
  --kb-key-active-text: #ffffff;
  --kb-key-active-border: #B91C1C;
  --kb-key-active-glow: 0 0 16px rgba(220, 38, 38, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(120, 53, 15, 0.55);
  --kb-hand-fill: rgba(120, 53, 15, 0.05);
  --kb-hand-wrist-gradient-start: rgba(120, 53, 15, 0.12);
  --kb-hand-wrist-gradient-end: rgba(120, 53, 15, 0.01);
  --kb-hand-fingernail-stroke: rgba(120, 53, 15, 0.75);
  --kb-hand-finger-guide-glow: #DC2626;
  --kb-hand-active-finger-pulse: rgba(220, 38, 38, 0.35);
  --kb-prompt-text-color: #642c0d;
  --kb-slot-bg: #EFE8DA;
  --kb-slot-border: #D1C4AC;
  --kb-slot-filled-bg: #F7E7CE;
  --kb-slot-filled-border: #B45309;
  --kb-slot-filled-text: #78350F;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#vintage_sepia");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="high_contrast_yellow"] {
  --kb-container-bg: #050505;
  --kb-container-border: #FACC15;
  --kb-container-shadow: 0 0 0 2px #FACC15, 0 16px 36px rgba(0, 0, 0, 0.9);
  --kb-key-bg: #141416;
  --kb-key-bg-hover: #222226;
  --kb-key-border: #52525B;
  --kb-key-bottom-shadow: #000000;
  --kb-key-text-color: #FFFFFF;
  --kb-key-func-bg: #1C1C20;
  --kb-key-func-border: #FACC15;
  --kb-key-func-text: #FACC15;
  --kb-key-active-bg: #FACC15;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #FDE047;
  --kb-key-active-glow: 0 0 24px #FACC15;
  --kb-key-success-bg: #22C55E;
  --kb-key-success-text: #000000;
  --kb-hand-stroke: #FACC15;
  --kb-hand-fill: rgba(250, 204, 21, 0.12);
  --kb-hand-wrist-gradient-start: rgba(250, 204, 21, 0.25);
  --kb-hand-wrist-gradient-end: rgba(250, 204, 21, 0.02);
  --kb-hand-fingernail-stroke: #FFFFFF;
  --kb-hand-finger-guide-glow: #FACC15;
  --kb-hand-active-finger-pulse: rgba(250, 204, 21, 0.6);
  --kb-prompt-text-color: #FACC15;
  --kb-slot-bg: #141416;
  --kb-slot-border: #52525B;
  --kb-slot-filled-bg: #27272A;
  --kb-slot-filled-border: #FACC15;
  --kb-slot-filled-text: #FACC15;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#high_contrast_yellow");
}
html:not([data-learning-style="classic_custom"])[data-learning-style="original_dark"] {
  --kb-container-bg: transparent;
  --kb-container-border: transparent;
  --kb-container-shadow: none;
  --kb-key-bg: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
  --kb-key-bg-hover: #28374E;
  --kb-key-border: #334155;
  --kb-key-bottom-shadow: #020617;
  --kb-key-text-color: #b6f9ec;
  --kb-key-func-bg: linear-gradient(180deg, #1A2838 0%, #0D1624 100%);
  --kb-key-func-border: #293C52;
  --kb-key-func-text: #5EEAD4;
  --kb-key-active-bg: #42aca2;
  --kb-key-active-text: #000000;
  --kb-key-active-border: #14B8A6;
  --kb-key-active-glow: 0 0 16px rgba(45, 212, 191, 0.45);
  --kb-key-success-bg: #059669;
  --kb-key-success-text: #1a1a1a;
  --kb-hand-stroke: rgba(56, 189, 248, 0.65);
  --kb-hand-fill: rgba(56, 189, 248, 0.06);
  --kb-hand-wrist-gradient-start: rgba(56, 189, 248, 0.14);
  --kb-hand-wrist-gradient-end: rgba(56, 189, 248, 0.01);
  --kb-hand-fingernail-stroke: rgba(56, 189, 248, 0.85);
  --kb-hand-finger-guide-glow: #38BDF8;
  --kb-hand-active-finger-pulse: rgba(56, 189, 248, 0.4);
  --kb-prompt-text-color: #7ab3af;
  --kb-slot-bg: #E2F0EA;
  --kb-slot-border: #BBDCD3;
  --kb-slot-filled-bg: #D1FAE5;
  --kb-slot-filled-border: #10B981;
  --kb-slot-filled-text: #53917f;
  --kb-hand-tint: url("/assets/student-theme-20260924-final/keyboard-tints.svg#original_dark");
}

/* IDs isolate the keyboard from broad utility-color rules elsewhere in the app. */
/* The keyboard plate stays transparent: intentionally omit Gemini's
   containerBg/containerBorder/containerShadow and all layout properties. */
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) button {
  background: var(--kb-key-bg) !important;
  color: var(--kb-key-text-color) !important;
  border-color: var(--kb-key-border) !important;
  --tw-shadow-color: var(--kb-key-bottom-shadow);
}
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) button.uppercase:hover {
  background: var(--kb-key-bg-hover) !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) :is(button:not(.uppercase),button.rounded-2xl) {
  background: var(--kb-key-func-bg) !important;
  color: var(--kb-key-func-text) !important;
  border-color: var(--kb-key-func-border) !important;
}
/* Both pressed and hinted states already exist; preserve their timing/transforms. */
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) button:is(.from-cyan-300,.animate-float-glow) {
  background: var(--kb-key-active-bg) !important;
  color: var(--kb-key-active-text) !important;
  border-color: var(--kb-key-active-border) !important;
  --tw-ring-color: var(--kb-key-active-border);
  --tw-shadow-color: var(--kb-key-active-bg);
}
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) button :is(span,svg) {
  color: inherit !important;
}
/* Tint the current canvas, rather than importing Gemini's different SVG hands. */
html:not([data-learning-style="classic_custom"])[data-learning-style] :is(#typing-virtual-keyboard, #typing-fingering-demo-keyboard) canvas[data-hand-style] {
  filter: var(--kb-hand-tint);
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [data-spelling-translation] {
}
/* Keep the existing transparent answer slots, text, size and reveal behaviour. */
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice :is([data-spelling-letter],[data-sentence-letter],[data-spelling-correct-answer], [data-spelling-correct-answer] strong):is(.text-emerald-300,.text-emerald-400),
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [data-spelling-correct-answer] strong {
}
/* Existing completion badges and retry button: paired foreground/background only. */
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [class~="bg-emerald-950/50"] {
  background: var(--kb-key-success-bg) !important;
  color: var(--kb-key-success-text) !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [class~="bg-emerald-950/50"] :is(span,svg) {
  color: var(--kb-key-success-text) !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [class~="bg-rose-950/50"] {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice [class~="bg-rose-950/50"] span {
  color: #b91c1c !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice button[class~="bg-[#0C1731]/40"] {
  background: var(--kb-key-func-bg) !important;
  color: var(--kb-key-func-text) !important;
  border-color: var(--kb-key-func-border) !important;
}
html:not([data-learning-style="classic_custom"])[data-learning-style] #spelling-practice button[class~="bg-[#0C1731]/40"] :is(span,svg) {
  color: var(--kb-key-func-text) !important;
}