#vkb{padding:18px;background:#f1f3f5;border:1px solid #dce1e6;border-radius:16px}.mac-keyboard-title{font-size:11px;letter-spacing:.06em;font-weight:700;color:#66756f;margin:0 0 14px}.mac-keyboard-title span{color:#0d5b45}.mac-keyboard-scroll{overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}.mac-keyboard{min-width:620px;display:grid;gap:6px;direction:ltr}.mac-key-row{display:flex;gap:5px}#vkb .mac-key{position:relative;min-width:0;max-width:none;flex:1;height:57px;border:1px solid #cbd2d9;border-bottom-width:3px;border-radius:7px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#25352e;box-shadow:0 1px 2px #00000008}.mac-key-label{font-size:10px;line-height:1;text-transform:lowercase;color:#78838b}.mac-glyph{font-size:22px;line-height:1.15}.mac-shift-glyph{position:absolute;right:4px;top:3px;font-size:12px;color:#71877b}.mac-system-key .mac-key-label{font-size:9px;color:#52645a;white-space:nowrap}.mac-function-row .mac-key{height:30px!important}.mac-arrow-stack{display:flex;flex-direction:column;gap:3px;min-width:0}.mac-arrow-stack .mac-key{height:27px!important;font-size:12px}.mac-keyboard-note{font-size:11px;line-height:1.6;color:#66756f;margin:6px 0 0}#vkb .vkey-active{background:#0d5b45;border-color:#0d5b45;color:white}#vkb .vkey-active span{color:white}#vkb .mac-key-pressed{background:#e2f0e9;transform:translateY(1px);border-color:#7da793}#vkb .mac-key-pressed.vkey-active{background:#174f40}.mac-shift-held .mac-shift-glyph{color:#0d5b45;font-weight:bold}@media(max-width:640px){#vkb{padding:12px}.mac-keyboard-note:after{content:' Swipe sideways to see the full keyboard.'}}

/* Softer keycaps, with red reserved for Hanifi shift and typing hints. */
#vkb{background:linear-gradient(145deg,#f7f8fa,#e9edf1);border-color:#d8dee5;box-shadow:inset 0 1px 0 #fff,0 8px 24px #25352e08;padding:20px}
.mac-keyboard{gap:7px}.mac-key-row{gap:6px}
#vkb .mac-key{background:linear-gradient(180deg,#fff,#f9fafb);border-color:#d0d6dc;border-bottom-color:#b9c2cb;border-radius:9px;box-shadow:0 2px 3px #25352e0b,inset 0 1px 0 #fff;transition:background .12s,box-shadow .12s,transform .12s}
#vkb .mac-shift-glyph{color:#c62838;font-weight:600;right:5px;top:4px;font-size:14px}
#vkb .vkey-active{background:linear-gradient(180deg,#fff8f8,#ffecef);border-color:#e8abb3;border-bottom-color:#ce7985;box-shadow:0 0 0 2px #c6283812,0 3px 8px #c6283810;color:#25352e}
#vkb .vkey-active .mac-glyph,#vkb .vkey-active .mac-shift-glyph{color:#c62838}
/* Preserve the English legends, including on highlighted keys. */
#vkb .vkey-active .mac-key-label{color:#78838b}
#vkb .mac-system-key .mac-key-label{color:#52645a}
#vkb .mac-key-pressed{background:linear-gradient(180deg,#edf2f5,#e3eaf0);border-color:#9cabb8;box-shadow:inset 0 1px 3px #25352e10;transform:translateY(2px)}
#vkb .mac-key-pressed.vkey-active{background:linear-gradient(180deg,#fff0f2,#fbdce1);border-color:#ce7985}
#vkb.mac-shift-held .mac-shift-glyph{color:#b51f30;text-shadow:0 0 8px #c6283822}
@media(max-width:640px){#vkb{padding:12px}}