.kb-box{container-type:inline-size}.kb{--px:calc(100cqw / 1216);--P:calc(24 * var(--px));--g:calc(4 * var(--px));--wall:calc(8 * var(--px));--cr:calc(16 * var(--px));--U:calc((100cqw - 2 * var(--P) + var(--g)) / 23);--fl:calc(4 * var(--px));--fr:calc(4 * var(--px));--ft:calc(2 * var(--px));--fb:calc(6 * var(--px));--kr:calc(6 * var(--px));--fr-r:calc(5 * var(--px));--sink:calc(2 * var(--px));--ha:var(--amber-tint);--hb:var(--hatch);padding:var(--P) var(--P) calc(var(--P) + calc(8 * var(--px)));border-radius:var(--cr);position:relative}.kbw{--px:calc(100cqw / 1216);--P:calc(24 * var(--px));--g:calc(4 * var(--px));--U:calc((100cqw - 2 * var(--P) + var(--g)) / 23);min-height:calc(6.5 * var(--U) - var(--g) + 2 * var(--P) + calc(8 * var(--px)));justify-content:center;align-items:center;display:flex}.kb{--rows:6.5}.kb[data-ly=full]{width:100%}.kb[data-ly=tkl]{width:calc(18.5 * var(--U) - var(--g) + 2 * var(--P))}.kb[data-ly=c75]{--rows:6.25;width:calc(16 * var(--U) - var(--g) + 2 * var(--P))}.kb[data-ly=c65]{--rows:5;width:calc(16 * var(--U) - var(--g) + 2 * var(--P))}.kb[data-ly=c60]{--rows:5;width:calc(15 * var(--U) - var(--g) + 2 * var(--P))}.kb[data-ly^=c]{padding-top:calc(var(--P) + calc(12 * var(--px)))}.kb:after{content:"";height:var(--wall);border-radius:0 0 var(--cr) var(--cr);position:absolute;bottom:0;left:0;right:0}.keys{--u:var(--U);height:calc(var(--rows) * var(--u) - var(--g));position:relative}.keys:before{content:"";inset:calc(-6 * var(--px));border-radius:calc(8 * var(--px));position:absolute}.keys{display:none}.kb:is([data-ly=full],[data-ly=tkl]) .keys[data-set=full],.kb[data-ly=c75] .keys[data-set=c75],.kb[data-ly=c65] .keys[data-set=c65],.kb[data-ly=c60] .keys[data-set=c60]{display:block}.kb[data-ly=tkl] .kk[data-z=num],.kb:not([data-ly=full]) .ledm{display:none}.kb .kk.nf{opacity:.5}.kk.sv{--x:var(--x-ansi);--y:var(--y-ansi);--w:var(--w-ansi);--h:var(--h-ansi)}.kb[data-std=iso] .kk.sv{--x:var(--x-iso,var(--x-ansi));--y:var(--y-iso,var(--y-ansi));--w:var(--w-iso,var(--w-ansi));--h:var(--h-iso,var(--h-ansi))}.kb[data-std=jis] .kk.sv{--x:var(--x-jis,var(--x-ansi));--y:var(--y-jis,var(--y-ansi));--w:var(--w-jis,var(--w-ansi));--h:var(--h-jis,var(--h-ansi))}.kb[data-std=ansi] .kk[data-in]:not([data-in~=ansi]),.kb[data-std=iso] .kk[data-in]:not([data-in~=iso]),.kb[data-std=jis] .kk[data-in]:not([data-in~=jis]),.kb[data-std=ks] .kk[data-in]:not([data-in~=ks]),.kb[data-std=iso] .lg[data-not~=iso],.kb[data-std=jis] .lg[data-not~=jis],.kb[data-std=ks] .lg[data-not~=ks],.kb:not([data-std=iso]) .lg[data-for=iso],.kb:not([data-std=jis]) .lg[data-for=jis],.kb:not([data-std=ks]) .lg[data-for=ks]{display:none}.kb:is([data-std=iso],[data-std=jis]) .kk[data-c=Enter]{--nx:calc(.25 * var(--u));--ny:calc(var(--u) - var(--g));clip-path:polygon(0 0, 100% 0, 100% 100%, var(--nx) 100%, var(--nx) var(--ny), 0 var(--ny))}.kb:is([data-std=iso],[data-std=jis]) .kk[data-c=Enter]:before{clip-path:polygon(0 0, 100% 0, 100% 100%, var(--nx) 100%, var(--nx) calc(var(--ny) - var(--ft) - var(--fb)), 0 calc(var(--ny) - var(--ft) - var(--fb)))}.kk{left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u) - var(--g));height:calc(var(--h) * var(--u) - var(--g));border-radius:var(--kr);isolation:isolate;-webkit-user-select:none;user-select:none;background:linear-gradient(180deg, var(--sk1), var(--sk2));box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed);transition:transform .12s var(--ease), box-shadow .12s var(--ease);position:absolute}.kk:before{content:"";z-index:1;left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);border-radius:var(--fr-r);background:linear-gradient(180deg, var(--f1), var(--f2));box-shadow:inset 0 calc(1 * var(--px)) 0 var(--hi), 0 calc(1 * var(--px)) 0 #1418200f;transition:bottom .12s var(--ease);position:absolute}.kk.d{transform:translateY(var(--sink));transition:none}.kk.d:before{bottom:calc(var(--fb) - var(--sink));transition:none}.lg{z-index:2;white-space:nowrap;pointer-events:none;color:var(--lc);transition:color .5s var(--ease);position:absolute}.kk.d .lg{transition:none}.kb[data-lg=tl] .lg{left:calc(var(--fl) + calc(6 * var(--px)));top:calc(var(--ft) + calc(4 * var(--px)));font:500 calc(12 * var(--px))/calc(16 * var(--px)) var(--sans)}.kb[data-lg=tl] .k1 .lg{font-size:calc(14 * var(--px))}.kb[data-lg=center] .lg{left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);font:500 calc(12 * var(--px))/calc(16 * var(--px)) var(--lgf,var(--sans));justify-content:center;align-items:center;display:flex}.kb[data-lg=center] .kk.d .lg{bottom:calc(var(--fb) - var(--sink))}.kb[data-lg=center] .k1 .lg{font-size:var(--lgk1,calc(18 * var(--px)))}.kb .kk.ln .lg{left:var(--fl);right:var(--fr);text-align:center;letter-spacing:-.03em;font-family:var(--sans);font-weight:500}.kb[data-lg] .kk .lg.cj{left:var(--fl);right:var(--fr);text-align:center;letter-spacing:-.04em;font-size:calc(12 * var(--px))}@container (width<=480px){.kb .kk .lg{display:none}}.kb[data-cap=sa]{--fl:calc(4 * var(--px));--fr:calc(4 * var(--px));--ft:calc(1 * var(--px));--fb:calc(8 * var(--px));--kr:calc(10 * var(--px));--fr-r:calc(8 * var(--px));--sink:calc(3 * var(--px))}.kb[data-cap=sa] .kk{background:linear-gradient(90deg, #281e0a14, transparent 14%, transparent 86%, #281e0a14), linear-gradient(180deg, var(--sk1), var(--sk2))}.kb[data-cap=sa] .kk:before{background:linear-gradient(180deg, #281e0a1a, transparent 45%), radial-gradient(ellipse 82% 72% at 50% 74%, var(--f1) 0 30%, var(--f2) 100%);box-shadow:inset 0 calc(3 * var(--px)) calc(3 * var(--px)) calc(-2 * var(--px)) #281e0a38, inset 0 calc(-1 * var(--px)) 0 var(--hi)}.ledm{z-index:2;left:calc(19 * var(--u));width:calc(4 * var(--u) - var(--g));height:calc(var(--u) - var(--g));border-radius:calc(6 * var(--px));justify-content:center;align-items:center;display:flex;position:absolute;top:0}.plq{z-index:2;left:calc(15.5 * var(--u));top:calc(3.5 * var(--u));width:calc(3 * var(--u) - var(--g));height:calc(var(--u) - var(--g));border-radius:calc(6 * var(--px));justify-content:center;align-items:center;display:flex;position:absolute}.pin{align-items:center;gap:calc(8 * var(--px));display:flex}.pin b{font:600 calc(12 * var(--px))/calc(16 * var(--px)) var(--sans);white-space:nowrap}.pin .chip,.pin .deb{flex:none;display:none}.leds{gap:calc(24 * var(--px));display:flex}.led{align-items:center;gap:calc(4 * var(--px));flex-direction:column;display:flex}.led svg,.led em{display:none}.led em{font:500 calc(12 * var(--px))/calc(16 * var(--px)) var(--sans);letter-spacing:.04em;white-space:nowrap;font-style:normal}.led i{width:calc(12 * var(--px));height:calc(4 * var(--px));border-radius:calc(2 * var(--px));background:var(--led-off);transition:background-color .2s,box-shadow .2s}.led.on i{background:var(--led-on)}.bz{z-index:2;top:calc((var(--P) - calc(16 * var(--px))) / 2);left:calc(var(--P) + 15.5 * var(--U));width:calc(3 * var(--U) - var(--g));height:calc(16 * var(--px));display:flex;position:absolute}.bz .led{justify-content:center;gap:calc(4 * var(--px));flex-direction:row;flex:1}.kb .bz .led svg{display:block}.kb[data-kb] .bz .led em,.kb:not([data-ly=tkl]) .bz,.hw{display:none}.kb .kk.w:before{background:repeating-linear-gradient(-45deg, var(--h-ansi) 0 calc(3 * var(--px)), var(--hb) calc(3 * var(--px)) calc(4 * var(--px)))}.kb .kk.w .lg{font-weight:600}.kb[data-kb=mist]{--cs1:#f1f3fc;--cs2:#dce1f5;--cs-hi:#fff;--cs-ed:#2b3ba629;--cut:#ffffff8c;--cut-lo:#1f2a781f;--w1:#c3cbee;--w2:#afb9e6;--w-hi:#ffffffb3;--gw:var(--gw-l);--gd:var(--gd-l);--plate-in:#1f2a7847;--pl1:#b6c0e9;--pl2:#a7b2e2;--gmaj:#1f2a7826;--gmin:#1f2a7812;--pq1:#a3aedf;--pq2:#adb7e4;--pq-in:#1f2a7838;--pq-ed:#1f2a781a;--pq-hi:#ffffff73;--pq-ink:#1f2a788c;--led-ic:#1f2a7873;--led-off:#1f2a7829;--led-on:var(--green);background:var(--gw) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), var(--gd) 0 0 / calc(220 * var(--px)) calc(220 * var(--px)), linear-gradient(180deg, var(--cs1), var(--cs2));box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--cs-ed), inset 0 calc(2 * var(--px)) 0 var(--cs-hi), inset 0 0 0 calc(3 * var(--px)) var(--cut), inset 0 calc(-3 * var(--px)) 0 var(--cut-lo)}[data-theme=dark] .kb[data-kb=mist]{--cs1:#242949;--cs2:#1a1e37;--cs-hi:#ffffff14;--cs-ed:#7c8eff2e;--cut:#ffffff0d;--cut-lo:#00000059;--w1:#14172c;--w2:#0e1122;--w-hi:#ffffff0f;--gw:var(--gw-dk);--gd:var(--gd-dk);--plate-in:#0009;--pl1:#121630;--pl2:#0c0f22;--gmaj:#96a5ff33;--gmin:#96a5ff14;--pq1:#0e1128;--pq2:#13172f;--pq-in:#00000080;--pq-ed:#0000004d;--pq-hi:#ffffff0f;--pq-ink:#b9c4ff8c;--led-ic:#c8d0ff66;--led-off:#00000073}.kb[data-kb=mist]:after{background:linear-gradient(180deg, var(--w1), var(--w2));box-shadow:inset 0 calc(1 * var(--px)) 0 var(--w-hi), inset 0 0 0 calc(1 * var(--px)) var(--cs-ed)}.kb[data-kb=mist] .keys:before{--go:calc(calc(6 * var(--px)) - var(--g) / 2);box-shadow:inset 0 calc(1 * var(--px)) calc(2 * var(--px)) var(--plate-in);background:linear-gradient(90deg, var(--gmaj) calc(1 * var(--px)), transparent calc(1 * var(--px))) var(--go) var(--go) / var(--u) var(--u), linear-gradient(var(--gmaj) calc(1 * var(--px)), transparent calc(1 * var(--px))) var(--go) var(--go) / var(--u) var(--u), linear-gradient(90deg, var(--gmin) calc(1 * var(--px)), transparent calc(1 * var(--px))) var(--go) var(--go) / calc(var(--u) / 4) calc(var(--u) / 4), linear-gradient(var(--gmin) calc(1 * var(--px)), transparent calc(1 * var(--px))) var(--go) var(--go) / calc(var(--u) / 4) calc(var(--u) / 4), linear-gradient(180deg, var(--pl1), var(--pl2))}.kb[data-kb=mist] .kk{--sk1:#edeef1;--sk2:#d6d9df;--ed:#14182029;--f1:#fff;--f2:#f2f3f5;--hi:#fff;--lc:#34353a}.kb[data-kb=mist] .kk.m{--sk1:#d8dbe1;--sk2:#c2c6ce;--f1:#e8eaee;--f2:#dcdfe4;--lc:#4b4d55}.kb[data-kb=mist] .kk.h{--sk1:#b4dec6;--sk2:#89cba7;--ed:#005a3947;--f1:#eaf6ef;--f2:#d1ecdc;--hi:#f8f9ff;--lc:#005a39}.kb[data-kb=mist] .kk.w{--sk1:#f3dcb0;--sk2:#e4bf79;--ed:#b4530959;--lc:var(--amber)}.kb[data-kb=mist] .kk.d{--sk1:#f0561e;--sk2:#cf3f0c;--ed:#6e1c0059;--f1:#ff7c47;--f2:#ff5a1f;--hi:#ffffff59;--lc:#fff}[data-theme=dark] .kb[data-kb=mist] .kk{--sk1:#2c2f35;--sk2:#1f2226;--ed:#0000008c;--f1:#3c3f46;--f2:#32353b;--hi:#ffffff17;--lc:#d8dbe0}[data-theme=dark] .kb[data-kb=mist] .kk.m{--sk1:#23262b;--sk2:#191b1f;--f1:#2e3137;--f2:#272a2f;--lc:#a9aeb7}[data-theme=dark] .kb[data-kb=mist] .kk.h{--sk1:#00492d;--sk2:#003821;--ed:#00000080;--f1:#00633f;--f2:#005435;--hi:#ffffff1f;--lc:#d3eede}[data-theme=dark] .kb[data-kb=mist] .kk.w{--sk1:#4a3812;--sk2:#33270c;--ed:#00000080;--lc:var(--amber)}[data-theme=dark] .kb[data-kb=mist] .kk.d{--sk1:#d9471a;--sk2:#a9330d;--ed:#0006;--f1:#ff7a45;--f2:#ff5e24;--hi:#ffffff4d;--lc:#fff}.kb[data-kb=mist] .ledm{background:var(--gw) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), var(--gd) 0 0 / calc(220 * var(--px)) calc(220 * var(--px)), linear-gradient(180deg, var(--cs1), var(--cs2));box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--cs-ed), inset 0 calc(2 * var(--px)) 0 var(--cs-hi), inset 0 0 0 calc(3 * var(--px)) var(--cut), inset 0 calc(-3 * var(--px)) 0 var(--cut-lo)}.led svg{width:calc(12 * var(--px));height:calc(12 * var(--px));fill:none;stroke:var(--led-ic);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}.kb[data-kb=mist] .led svg{display:block}.kb[data-kb=mist] .led.on svg{stroke:var(--led-on)}.kb[data-kb=mist] .led i{box-shadow:inset 0 calc(1 * var(--px)) calc(1 * var(--px)) #0000002e}.kb[data-kb=mist] .led.on i{box-shadow:inset 0 calc(1 * var(--px)) 0 #ffffff73}.kb[data-kb=mist] .plq{background:linear-gradient(180deg, var(--pq1), var(--pq2));box-shadow:inset 0 calc(1 * var(--px)) 0 var(--pq-in), inset 0 0 0 calc(1 * var(--px)) var(--pq-ed), inset 0 calc(-1 * var(--px)) 0 var(--pq-hi)}.kb[data-kb=mist] .pin b{letter-spacing:.02em;color:var(--pq-ink);text-shadow:0 calc(1 * var(--px)) 0 var(--pq-hi)}.kb[data-kb=mist] .pin .deb{display:block}.deb{width:calc(20 * var(--px));height:calc(20 * var(--px));fill:none;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.deb .lo{stroke:var(--pq-hi);transform:translateY(calc(.8 * var(--px)))}.deb .hi{stroke:var(--pq-ink)}.kb[data-kb=retro]{--cr:calc(20 * var(--px));--wall:calc(12 * var(--px));--lgf:"Helvetica Neue", Helvetica, Arial, var(--sans);--ha:#fbebcb;--hb:#c86e066b;--led-ic:#3c362cb3;--led-off:#6f6a5e;--led-on:#86de5f;--led-glow:#86de5f99;background:var(--gw-p) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), var(--gd-p) 0 0 / calc(220 * var(--px)) calc(220 * var(--px)), linear-gradient(180deg, #e6dfcf, #d6cdb8);box-shadow:inset 0 0 0 calc(1 * var(--px)) #5a462838, inset 0 calc(2 * var(--px)) 0 #ffffffbf, inset 0 0 0 calc(3 * var(--px)) #ffffff38, 0 calc(2 * var(--px)) calc(3 * var(--px)) #3c2d1429, 0 calc(22 * var(--px)) calc(30 * var(--px)) calc(-16 * var(--px)) #3c2d1480}.kb[data-kb=retro]:after{box-shadow:inset 0 calc(1 * var(--px)) 0 #ffffff8c, inset 0 0 0 calc(1 * var(--px)) #5a462838;background:linear-gradient(#ccc2ab,#b1a68d)}.kb[data-kb=retro] .keys:before{box-shadow:inset 0 calc(3 * var(--px)) calc(5 * var(--px)) #1e160880, inset 0 0 0 calc(1 * var(--px)) #1e160866, 0 calc(1 * var(--px)) 0 #fff9;background:linear-gradient(#5c564a,#6b6458)}.kb[data-kb=retro] .kk{--sk1:#d7ceb8;--sk2:#c1b79f;--ed:#46371c4d;--f1:#f3ecde;--f2:#e2d9c5;--hi:#fffc;--lc:#35322c;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(2 * var(--px)) calc(1 * var(--px)) #1e160847, 0 calc(5 * var(--px)) calc(8 * var(--px)) calc(-2 * var(--px)) #1e160861}.kb[data-kb=retro] .kk.m{--sk1:#a49e91;--sk2:#8b8579;--f1:#bdb7aa;--f2:#aaa497;--lc:#2a2824}.kb[data-kb=retro] .kk.x{--sk1:#a33a31;--sk2:#842a22;--ed:#3c0c066b;--f1:#c0473b;--f2:#a9392e;--hi:#ffd2c366;--lc:#fbf4e8}.kb[data-kb=retro] .kk.h{--sk1:#86b49b;--sk2:#689c80;--ed:#003b2457;--f1:#b7d5c3;--f2:#98c1aa;--hi:#ffffffb3;--lc:#003620}.kb[data-kb=retro] .kk.w{--sk1:#e2c07a;--sk2:#cba159;--ed:#965a0a6b;--lc:#874704}.kb[data-kb=retro] .kk.d{--sk1:#ee5b21;--sk2:#c8430f;--ed:#6e1c006b;--f1:#ff8552;--f2:#ff5e24;--hi:#fff6;--lc:#fff;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(1 * var(--px)) calc(1 * var(--px)) #1e160852}.kb[data-kb=retro] .ledm,.kb[data-kb=retro] .plq{background:var(--gw-p) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), linear-gradient(180deg, #e6dfcf, #d8cfbb);box-shadow:inset 0 calc(1 * var(--px)) 0 #fffc, inset 0 0 0 calc(1 * var(--px)) #5a462833, 0 calc(2 * var(--px)) calc(1 * var(--px)) #1e160842, 0 calc(5 * var(--px)) calc(8 * var(--px)) calc(-3 * var(--px)) #1e16085c}.kb[data-kb=retro] .led em{color:#4a463d;order:-1;display:block}.kb[data-kb=retro] .led i{width:calc(12 * var(--px));height:calc(5 * var(--px));border-radius:calc(1 * var(--px));box-shadow:inset 0 calc(1 * var(--px)) calc(1 * var(--px)) #00000059}.kb[data-kb=retro] .led.on i{box-shadow:inset 0 calc(1 * var(--px)) 0 #ffffff8c, 0 0 calc(6 * var(--px)) var(--led-glow)}.kb[data-kb=retro] .pin{padding:calc(4 * var(--px)) calc(12 * var(--px));border-radius:calc(3 * var(--px));box-shadow:inset 0 0 0 calc(1 * var(--px)) #ffffff24, inset 0 calc(1 * var(--px)) 0 #ffffff2e, 0 calc(1 * var(--px)) 0 #ffffffb3;background:linear-gradient(#403b33,#2b2823)}.kb[data-kb=retro] .pin b{color:#eae1cd;font-style:italic;font-weight:700}.kb[data-kb=clear]{--cr:calc(18 * var(--px));--wall:calc(12 * var(--px));--ha:#fdf3e1;--hb:#d9770673;--led-ic:#39414ebf;--led-off:#2b303b;--led-on:#00bb7b;--led-glow:#00bb7bcc;box-shadow:inset 0 0 0 calc(1 * var(--px)) #fffffff2, inset 0 0 0 calc(2 * var(--px)) #6e8cb94d, inset 0 calc(3 * var(--px)) 0 #ffffff73, 0 0 0 calc(1 * var(--px)) #6482af52, 0 calc(18 * var(--px)) calc(26 * var(--px)) calc(-16 * var(--px)) #283c6452;background:linear-gradient(112deg,#0000 5%,#ffffffb3 10%,#0000 16% 60%,#ffffff73 66%,#0000 72%),#dee9f76b}.kb[data-kb=clear]:before{content:"";left:calc(var(--P) - calc(14 * var(--px)));right:calc(var(--P) - calc(14 * var(--px)));top:calc(var(--P) - calc(14 * var(--px)));bottom:calc(var(--P) - calc(6 * var(--px)));border-radius:calc(10 * var(--px));box-shadow:0 0 0 calc(1 * var(--px)) #fffffff2, 0 0 0 calc(2 * var(--px)) #6e87af52, inset 0 0 0 calc(1 * var(--px)) #6e87af40;position:absolute}.kb[data-kb=clear]:after{background:repeating-linear-gradient(180deg, #ffffff4d 0 calc(3 * var(--px)), #6e8cb961 calc(3 * var(--px)) calc(4 * var(--px))), #d2e1f399;box-shadow:inset 0 calc(1 * var(--px)) 0 #fffffff2, inset 0 0 0 calc(1 * var(--px)) #6482af59}.kb[data-kb=clear] .keys:before{inset:calc(-10 * var(--px));border-radius:calc(6 * var(--px));background:var(--trace) 0 0 / calc(96 * var(--px)) calc(96 * var(--px)), linear-gradient(180deg, #1c2029, #14171e);box-shadow:0 0 0 calc(1 * var(--px)) #ffffff29, 0 0 0 calc(2 * var(--px)) #0a0e1673}.kb[data-mat=trans] .kk{--sk1:#dee6f299;--sk2:#becade80;--ed:#fff9;--f1:#f6f9fdc2;--f2:#e5ebf5b3;--hi:#fffffff2;--lc:#1b2232;--stem:#6e7a92cc;--hs:#181e2a8c;--lit:transparent;--tint:transparent;--spill:transparent;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), inset 0 calc(1 * var(--px)) 0 #ffffffbf, 0 0 calc(14 * var(--px)) 0 var(--spill), 0 calc(2 * var(--px)) calc(3 * var(--px)) #0006}.kb[data-mat=trans] .kk:before{background:radial-gradient(circle calc(var(--u) * .5) at 50% calc(50% - calc(2 * var(--px))), var(--lit), transparent), linear-gradient(var(--tint), var(--tint)), linear-gradient(158deg, #ffffff73, transparent 40%), linear-gradient(180deg, var(--f1), var(--f2));box-shadow:inset 0 calc(1 * var(--px)) 0 var(--hi), inset 0 0 0 calc(1 * var(--px)) #ffffff80}.kb[data-mat=trans] .lg{font-weight:600}.kb[data-mat=trans] .kk:after{content:"";z-index:0;--sw:calc(var(--u) * .58);left:calc(50% - var(--sw) / 2);top:calc(50% - var(--sw) / 2 - calc(1 * var(--px)));width:var(--sw);height:var(--sw);border-radius:calc(4 * var(--px));filter:blur(calc(1.5 * var(--px)));background:linear-gradient(var(--stem), var(--stem)) 50% 50% / 32% 10% no-repeat, linear-gradient(var(--stem), var(--stem)) 50% 50% / 10% 32% no-repeat, var(--hs);position:absolute}.kb[data-mat=trans] .kk.m{--f1:#d8dfebc2;--f2:#c6cfdfb3;--sk1:#c4cdde99;--sk2:#a6b2c880}.kb[data-mat=trans] .kk.h{--sk1:#7bd0a4a8;--sk2:#0eb87a8f;--ed:#a9dfc1d9;--lit:#00bb7bb8;--tint:#00bb7b33;--stem:#00b779;--hs:#00825461;--spill:#00a96f80;--lc:#004128}.kb[data-mat=trans] .kk.w{--stem:#f0a93a;--hs:#be6e0a59;--spill:#f5a52466;--lc:#874704}.kb[data-mat=trans] .kk.d{--sk1:#ffa882bd;--sk2:#ff7e4c9e;--ed:#ffc4aae6;--lit:#ff6a2ed1;--tint:#ff6a2e38;--stem:#ff5a1f;--hs:#be3c0a66;--spill:#ff6a2e9e;--lc:#5a1600;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), inset 0 calc(1 * var(--px)) 0 #ffffffb3, 0 0 calc(18 * var(--px)) calc(2 * var(--px)) var(--spill), 0 calc(1 * var(--px)) calc(1 * var(--px)) #0006}.kb[data-kb=clear] .ledm,.kb[data-kb=clear] .plq{border-radius:calc(4 * var(--px));box-shadow:inset 0 0 0 calc(1 * var(--px)) #ffffff38}.kb[data-kb=clear] .led em{font-family:var(--mono);color:#ffffffd1;display:block}.kb[data-kb=clear] .led i{width:calc(10 * var(--px));height:calc(5 * var(--px));border-radius:calc(1 * var(--px));box-shadow:0 0 0 calc(1 * var(--px)) #ffffff52}.kb[data-kb=clear] .led.on i{box-shadow:0 0 0 calc(1 * var(--px)) #9fdcbbe6, 0 0 calc(10 * var(--px)) var(--led-glow)}.kb[data-kb=clear] .bz .led i{box-shadow:0 0 0 calc(1 * var(--px)) #6e87af8c;background:#e3e8ef}.kb[data-kb=clear] .bz .led.on i{background:var(--led-on);box-shadow:0 0 0 calc(1 * var(--px)) #008a59cc, 0 0 calc(8 * var(--px)) var(--led-glow)}.kb[data-kb=clear] .pin b{color:#ffffffdb;letter-spacing:.02em}.kb[data-kb=clear] .pin .chip{display:block}.chip{width:calc(20 * var(--px));height:calc(20 * var(--px));margin:calc(3 * var(--px));border-radius:calc(2 * var(--px));background:radial-gradient(circle at 26% 26%, #6e7684 0 calc(1.5 * var(--px)), transparent calc(2 * var(--px))), linear-gradient(180deg, #2a2e36, #0e1014);outline:calc(1 * var(--px)) solid #ffffff4d;outline-offset:calc(5 * var(--px));position:relative}.chip:before{content:"";inset:calc(-3 * var(--px));z-index:-1;background:repeating-linear-gradient(90deg, #aeb6c2 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(4 * var(--px))) 50% 0 / calc(16 * var(--px)) calc(3 * var(--px)) no-repeat, repeating-linear-gradient(90deg, #aeb6c2 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(4 * var(--px))) 50% 100% / calc(16 * var(--px)) calc(3 * var(--px)) no-repeat, repeating-linear-gradient(180deg, #aeb6c2 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(4 * var(--px))) 0 50% / calc(3 * var(--px)) calc(16 * var(--px)) no-repeat, repeating-linear-gradient(180deg, #aeb6c2 0 calc(2 * var(--px)), transparent calc(2 * var(--px)) calc(4 * var(--px))) 100% 50% / calc(3 * var(--px)) calc(16 * var(--px)) no-repeat;position:absolute}.kb[data-case=acrylic] .hw{pointer-events:none;display:block;position:absolute;inset:0}.scw{width:calc(8 * var(--px));height:calc(8 * var(--px));margin:calc(-4 * var(--px)) 0 0 calc(-4 * var(--px));box-shadow:0 0 0 calc(1 * var(--px)) #505f7873, 0 calc(1 * var(--px)) calc(1 * var(--px)) #141e3240;background:radial-gradient(circle at 35% 30%,#fff,#cbd3de 50%,#8e9aab);border-radius:50%;position:absolute}.scw:after{content:"";left:calc(2 * var(--px));top:calc(2 * var(--px));width:calc(4 * var(--px));height:calc(4 * var(--px));clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#566175;position:absolute}.usb{top:calc(5 * var(--px));left:calc(var(--P) + 7.5 * var(--U) - calc(14 * var(--px)));width:calc(28 * var(--px));height:calc(10 * var(--px));border-radius:calc(4 * var(--px));box-shadow:0 0 0 calc(1 * var(--px)) #505f7880, inset 0 calc(-1 * var(--px)) 0 #fff9;background:linear-gradient(#fbfcfd,#aeb8c6);position:absolute}.usb:after{content:"";left:calc(4 * var(--px));right:calc(4 * var(--px));height:calc(1 * var(--px));background:#505f7859;position:absolute;top:50%}.kb[data-kb=walnut]{--cr:calc(14 * var(--px));--wall:calc(12 * var(--px));--lgk1:calc(14 * var(--px));--ha:#fbebcb;--hb:#c86e066b;--led-ic:#f3ebddb8;--led-off:#3a2c22;--led-on:#fff0cc;--led-glow:#ffe096cc;--pq-ink:#4a3520d9;--pq-hi:#fff0c88c;background:linear-gradient(180deg, #ffe4c41f, transparent 28%, #00000024), var(--wood) 50% 50% / cover;box-shadow:inset 0 0 0 calc(1 * var(--px)) #140a0499, inset 0 calc(1 * var(--px)) 0 #ffe2bc61, inset 0 0 0 calc(2 * var(--px)) #ffe2bc12, 0 calc(2 * var(--px)) calc(3 * var(--px)) #1e120838, 0 calc(22 * var(--px)) calc(30 * var(--px)) calc(-16 * var(--px)) #1e12088c}.kb[data-kb=walnut]:after{background:linear-gradient(180deg, #00000038, #0000006b), var(--wood) 30% 90% / calc(1400 * var(--px)) calc(480 * var(--px));box-shadow:inset 0 calc(1 * var(--px)) 0 #ffe2bc52, inset 0 0 0 calc(1 * var(--px)) #140a0499}.kb[data-kb=walnut] .keys:before{box-shadow:inset 0 calc(3 * var(--px)) calc(5 * var(--px)) #0000008c, inset 0 0 0 calc(1 * var(--px)) #00000080, 0 calc(1 * var(--px)) 0 #ffe2bc33;background:linear-gradient(#1c1511,#241b16)}.kb[data-kb=walnut] .kk{--sk1:#e4d9c6;--sk2:#cdbfa6;--ed:#462d144d;--f1:#f8f2e7;--f2:#eee5d5;--hi:#fffdf8;--lc:#5b4636;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(2 * var(--px)) calc(1 * var(--px)) #00000059, 0 calc(4 * var(--px)) calc(7 * var(--px)) calc(-2 * var(--px)) #00000073}.kb[data-kb=walnut] .kk:not(.w):before{background:var(--pbt) 0 0 / calc(160 * var(--px)) calc(160 * var(--px)), linear-gradient(180deg, var(--f1), var(--f2))}.kb[data-kb=walnut] .kk.m{--sk1:#cdba9b;--sk2:#b6a07e;--f1:#e4d4ba;--f2:#d8c6a8;--lc:#4a3829}.kb[data-kb=walnut] .kk.x{--sk1:#6b5040;--sk2:#533c2f;--ed:#140a0473;--f1:#8a6a55;--f2:#785a46;--hi:#ffe1c84d;--lc:#f6eee2}.kb[data-kb=walnut] .kk.h{--sk1:#9abca8;--sk2:#7da68f;--ed:#003b2452;--f1:#c5dbce;--f2:#b2cfbe;--hi:#ffffffb3;--lc:#09472e}.kb[data-kb=walnut] .kk.w{--sk1:#e2c07a;--sk2:#cba159;--ed:#965a0a6b;--lc:#874704}.kb[data-kb=walnut] .kk.d{--sk1:#ee5b21;--sk2:#c8430f;--ed:#6e1c006b;--f1:#ff8552;--f2:#ff5e24;--hi:#fff6;--lc:#fff;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(1 * var(--px)) calc(1 * var(--px)) #0006}.kb[data-kb=walnut] .led em{color:#f3ebddb8;order:-1;display:block}.kb[data-kb=walnut] .led i{width:calc(8 * var(--px));height:calc(8 * var(--px));box-shadow:0 0 0 calc(2 * var(--px)) #b8955a, 0 0 0 calc(3 * var(--px)) #00000080, inset 0 calc(1 * var(--px)) calc(1 * var(--px)) #0000008c;border-radius:50%}.kb[data-kb=walnut] .led.on i{box-shadow:0 0 0 calc(2 * var(--px)) #cdae72, 0 0 0 calc(3 * var(--px)) #00000080, 0 0 calc(8 * var(--px)) calc(1 * var(--px)) var(--led-glow)}.kb[data-kb=walnut] .pin{padding:calc(4 * var(--px)) calc(16 * var(--px));border-radius:calc(3 * var(--px));box-shadow:inset 0 calc(1 * var(--px)) 0 #fffae6b3, inset 0 calc(-1 * var(--px)) 0 #5a3c1466, 0 0 0 calc(1 * var(--px)) #3c280f99, 0 calc(2 * var(--px)) calc(3 * var(--px)) #00000073;background:linear-gradient(#edd6a4,#cba768 55%,#b38d51);position:relative}.kb[data-kb=walnut] .pin b{color:#4a3520;letter-spacing:.04em;text-shadow:0 calc(1 * var(--px)) 0 #fff0c88c}.kb[data-kb=walnut] .pin:before,.kb[data-kb=walnut] .pin:after{content:"";top:calc(50% - calc(2 * var(--px)));width:calc(4 * var(--px));height:calc(4 * var(--px));box-shadow:0 0 0 calc(.5 * var(--px)) #3c280fb3;background:radial-gradient(circle at 35% 35%,#f7e6bd,#8c6a36);border-radius:50%;position:absolute}.kb[data-kb=walnut] .pin:before{left:calc(5 * var(--px))}.kb[data-kb=walnut] .pin:after{right:calc(5 * var(--px))}.kb[data-cap=low]{--fl:calc(2 * var(--px));--fr:calc(2 * var(--px));--ft:calc(1 * var(--px));--fb:calc(3 * var(--px));--kr:calc(5 * var(--px));--fr-r:calc(4 * var(--px));--sink:calc(1 * var(--px))}.kb[data-kb=night]{--cr:calc(12 * var(--px));--wall:calc(8 * var(--px));--ha:#1b1d22;--hb:#f5a52480;--led-ic:#c4cad680;--led-off:#2a2d34;--led-on:#00bb7b;--led-glow:#00bb7bd9;--pq-ink:#c4cad680;--pq-hi:transparent;background:var(--gw-n) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), linear-gradient(180deg, #1c1e23, #131418);box-shadow:inset 0 0 0 calc(1 * var(--px)) #ffffff42, inset 0 calc(1 * var(--px)) 0 #ffffff6b, inset 0 0 0 calc(2 * var(--px)) #0009, 0 calc(2 * var(--px)) calc(3 * var(--px)) #00000040, 0 calc(22 * var(--px)) calc(30 * var(--px)) calc(-16 * var(--px)) #0009}.kb[data-kb=night]:after{box-shadow:inset 0 calc(1 * var(--px)) 0 #ffffff4d, inset 0 0 0 calc(1 * var(--px)) #ffffff1f;background:linear-gradient(#121317,#0b0c0e)}.kb[data-kb=night] .keys:before{background:var(--gw-n) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), linear-gradient(180deg, #131418, #101114);box-shadow:inset 0 calc(1 * var(--px)) calc(2 * var(--px)) #000000b3, 0 calc(1 * var(--px)) 0 #ffffff14}.kb[data-kb=night] .kk{--sk1:#121317;--sk2:#0a0b0d;--ed:#ffffff1a;--f1:#23262c;--f2:#191b20;--hi:#ffffff24;--lc:#8e95a1;--rim:transparent;--halo:transparent;--glow:transparent;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 0 0 calc(1 * var(--px)) var(--rim), 0 0 calc(12 * var(--px)) calc(1 * var(--px)) var(--halo), 0 calc(1 * var(--px)) calc(1 * var(--px)) #0009;transition:transform .12s var(--ease), box-shadow .6s var(--ease)}.kb[data-kb=night] .kk:not(.w):before{background:linear-gradient(180deg, #ffffff12, #ffffff05 46%, transparent 47%), linear-gradient(180deg, var(--f1), var(--f2))}.kb[data-kb=night] .lg{text-shadow:0 0 calc(6 * var(--px)) var(--glow), 0 0 calc(2 * var(--px)) var(--glow);transition:color .6s var(--ease), text-shadow .6s var(--ease);font-weight:600}.kb[data-kb=night] .kk.m{--f1:#2b2f36;--f2:#22252b;--sk1:#17191d;--sk2:#0e0f12}.kb[data-kb=night] .kk.h{--lc:#e8f6ed;--glow:#00bb7b;--rim:#57c691bf;--halo:#00a96f99;--flood:#00a96f80;--lit:.8}.kb[data-kb=night] .kk.w{--lc:#ffd38e;--glow:#f5a524e6;--rim:#f5a52459;--halo:#f5a52466}.kb[data-kb=night] .kk.d{--flood:#ff6a2e99;--lit:1;--lc:#fff3ec;--glow:#ff6a2e;--rim:#ff8c5ae6;--halo:#ff6a2ed9;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 0 0 calc(1 * var(--px)) var(--rim), 0 0 calc(16 * var(--px)) calc(2 * var(--px)) var(--halo), 0 calc(1 * var(--px)) calc(1 * var(--px)) #0009;transition:none}.kb[data-kb=night] .kk:after{content:"";z-index:1;left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);border-radius:var(--fr-r);pointer-events:none;background:radial-gradient(ellipse 95% 85% at 50% 100%, var(--flood,transparent), transparent 78%);opacity:var(--lit,0);transition:opacity .6s var(--ease);position:absolute}.kb[data-kb=night] .kk.d:after{bottom:calc(var(--fb) - var(--sink));transition:none}.kb[data-kb=night] .kk.d .lg{transition:none}.kb[data-kb=night] .led svg{display:block}.kb[data-kb=night] .led i{width:calc(12 * var(--px));height:calc(3 * var(--px));border-radius:calc(2 * var(--px));box-shadow:inset 0 calc(1 * var(--px)) 0 #00000080}.kb[data-kb=night] .led.on i{box-shadow:0 0 calc(8 * var(--px)) calc(1 * var(--px)) var(--led-glow), inset 0 calc(1 * var(--px)) 0 #fff6}.kb[data-kb=night] .led.on svg{stroke:#c9d1ff}.kb[data-kb=night] .pin .deb{display:block}.kb[data-kb=night] .pin b{color:#c4cad68c;letter-spacing:.04em}.kb[data-cap=xda]{--fl:calc(3 * var(--px));--fr:calc(3 * var(--px));--ft:calc(2 * var(--px));--fb:calc(6 * var(--px));--kr:calc(9 * var(--px));--fr-r:calc(8 * var(--px));--sink:calc(2 * var(--px))}.kb[data-cap=xda] .kk{background:linear-gradient(90deg, #783c500f, transparent 12%, transparent 88%, #783c500f), linear-gradient(180deg, var(--sk1), var(--sk2))}.kb[data-cap=xda] .kk:not(.w):before{background:linear-gradient(180deg, #783c500d, transparent 40%), radial-gradient(ellipse 85% 80% at 50% 70%, var(--f1) 0 40%, var(--f2) 100%);box-shadow:inset 0 calc(2 * var(--px)) calc(2 * var(--px)) calc(-1 * var(--px)) #783c501f, inset 0 calc(-1 * var(--px)) 0 var(--hi)}.kb[data-kb=macaron]{--cr:calc(18 * var(--px));--wall:calc(10 * var(--px));--lgk1:calc(16 * var(--px));--lgf:"Arial Rounded MT Bold", "SF Pro Rounded", ui-rounded, var(--sans);--ha:#fff4de;--hb:#d977066b;--led-ic:#b04a6e99;--led-off:#f6dce5;--led-on:#ff6f9c;--led-glow:#ff6f9cb3;background:var(--gw-m) 0 0 / calc(180 * var(--px)) calc(180 * var(--px)), linear-gradient(180deg, #f8d3df, #f0c0d0);box-shadow:inset 0 0 0 calc(1 * var(--px)) #be5a7d40, inset 0 calc(2 * var(--px)) 0 #ffffffbf, inset 0 0 0 calc(3 * var(--px)) #ffffff4d, 0 calc(2 * var(--px)) calc(3 * var(--px)) #963c5f24, 0 calc(22 * var(--px)) calc(30 * var(--px)) calc(-16 * var(--px)) #963c5f66}.kb[data-kb=macaron]:after{box-shadow:inset 0 calc(1 * var(--px)) 0 #fff9, inset 0 0 0 calc(1 * var(--px)) #be5a7d40;background:linear-gradient(#eab3c5,#dfa0b5)}.kb[data-kb=macaron] .keys:before{box-shadow:inset 0 calc(2 * var(--px)) calc(3 * var(--px)) #aa507338, inset 0 0 0 calc(1 * var(--px)) #be5a7d2e, 0 calc(1 * var(--px)) 0 #ffffffb3;background:linear-gradient(#fbe7ee,#f6dae4)}.kb[data-kb=macaron] .kk{--sk1:#f1e6da;--sk2:#e2d2c1;--ed:#965a4638;--f1:#fffbf5;--f2:#fbf1e5;--hi:#fff;--lc:#8a5a6e;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(2 * var(--px)) calc(1 * var(--px)) #963c5f29, 0 calc(4 * var(--px)) calc(8 * var(--px)) calc(-2 * var(--px)) #963c5f3d}.kb[data-kb=macaron] .kk:is([data-g=mod],[data-g=numop],[data-g=nav],[data-g=sys],[data-g=f2]){--sk1:#a9dcc7;--sk2:#92ccb5;--ed:#286e5540;--f1:#d5f2e6;--f2:#c2e9d9;--lc:#2f7a62}.kb[data-kb=macaron] .kk:is([data-g=f1],[data-g=f3],[data-g=space]){--sk1:#f6de8e;--sk2:#ebcd70;--ed:#966e1440;--f1:#fff5cc;--f2:#fcecb2;--lc:#8c6a12}.kb[data-kb=macaron] .kk:is([data-g=esc],[data-g=enter],[data-g=arrow]){--sk1:#f2afc4;--sk2:#e798b0;--ed:#aa3c6447;--f1:#fdd5e1;--f2:#f9c3d4;--lc:#a9406a}.kb[data-kb=macaron] .kk.h{--sk1:#4fa97b;--sk2:#3b9568;--ed:#00503257;--f1:#93d5b1;--f2:#7fcaa1;--hi:#e6f6ec;--lc:#0b4a30}.kb[data-kb=macaron] .kk.w{--sk1:#f0cf8c;--sk2:#e2ba6a;--ed:#965a0a66;--lc:#874704}.kb[data-kb=macaron] .kk.d{--sk1:#f2602a;--sk2:#d14a15;--ed:#6e1c0066;--f1:#ff8a57;--f2:#ff6428;--hi:#fff6;--lc:#fff;box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--ed), 0 calc(1 * var(--px)) calc(1 * var(--px)) #963c5f40}.kb[data-kb=macaron] .lg{font-weight:600}.kb[data-kb=macaron] .kk:not(.k1) .lg{text-transform:lowercase}.kb[data-kb=macaron] .kk.ln .lg{font-family:var(--lgf);font-weight:600}.kb[data-kb=macaron] .ledm,.kb[data-kb=macaron] .pin{border-radius:calc(999 * var(--px));box-shadow:inset 0 0 0 calc(1 * var(--px)) #be5a7d33, 0 calc(2 * var(--px)) calc(1 * var(--px)) #963c5f24, 0 calc(4 * var(--px)) calc(8 * var(--px)) calc(-2 * var(--px)) #963c5f38;background:linear-gradient(#fff,#fff4f8)}.kb[data-kb=macaron] .led em{font-family:var(--lgf);text-transform:lowercase;letter-spacing:.02em;color:#b0607f;order:-1;font-weight:600;display:block}.kb[data-kb=macaron] .led i{width:calc(8 * var(--px));height:calc(8 * var(--px));box-shadow:inset 0 calc(1 * var(--px)) calc(1 * var(--px)) #963c5f40;border-radius:50%}.kb[data-kb=macaron] .led.on i{box-shadow:0 0 calc(8 * var(--px)) calc(1 * var(--px)) var(--led-glow), inset 0 calc(1 * var(--px)) 0 #fff9}.kb[data-kb=macaron] .pin{padding:calc(4 * var(--px)) calc(10 * var(--px))}.kb[data-kb=macaron] .pin b{font-family:var(--lgf);color:#c2557f}.kb[data-kb=macaron] .pin b:before{content:"♥";margin-right:calc(4 * var(--px));color:#ff7fa8}.cl{z-index:3;right:calc(var(--fr) + calc(6 * var(--px)));top:calc(var(--ft) + calc(6 * var(--px)));width:calc(5 * var(--px));height:calc(5 * var(--px));background:var(--led-off);border-radius:50%;transition:background-color .2s,box-shadow .2s;display:none;position:absolute}.kb[data-ly^=c] .cl{display:block}.cl.on{background:var(--led-on);box-shadow:0 0 calc(6 * var(--px)) var(--led-glow,transparent)}.kb[data-ly^=c] .plq{left:50%;top:calc((var(--P) + calc(18 * var(--px))) / -2 - calc(8 * var(--px)));width:auto;height:calc(16 * var(--px));padding:0 calc(10 * var(--px));transform:translate(-50%)}.kb[data-ly^=c] .pin{padding-top:0;padding-bottom:0}.kb[data-ly^=c] .deb{width:calc(16 * var(--px));height:calc(16 * var(--px))}.knob{z-index:2;left:calc(15 * var(--u));width:calc(var(--u) - var(--g));height:calc(var(--u) - var(--g));display:none;position:absolute;top:0}.kb[data-ly=c75] .knob{display:block}.knob:before{content:"";background:repeating-conic-gradient(var(--kn1) 0 5deg, var(--kn2) 5deg 10deg);box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--kn-ed), 0 calc(2 * var(--px)) calc(1 * var(--px)) #00000038, 0 calc(5 * var(--px)) calc(8 * var(--px)) calc(-2 * var(--px)) #00000059;border-radius:50%;position:absolute;inset:6%}.knob i{background:radial-gradient(circle at 38% 32%, var(--kn-hi), var(--kn-top) 60%, var(--kn-lo));box-shadow:0 0 0 calc(1 * var(--px)) var(--kn-ed), inset 0 calc(1 * var(--px)) 0 #ffffff59;border-radius:50%;position:absolute;inset:20%}.knob:after{content:"";left:calc(50% - calc(1.5 * var(--px)));width:calc(3 * var(--px));border-radius:calc(2 * var(--px));background:var(--kn-dot);height:14%;box-shadow:var(--kn-glow,none);position:absolute;top:26%}.kb[data-kb=mist]{--kn1:#cbd2f1;--kn2:#e9edfb;--kn-ed:#2b3ba640;--kn-hi:#fff;--kn-top:#e6eaf8;--kn-lo:#c9d0ee;--kn-dot:var(--acc)}[data-theme=dark] .kb[data-kb=mist]{--kn1:#2a3058;--kn2:#3a4170;--kn-ed:#7c8eff40;--kn-hi:#4a5280;--kn-top:#2e3460;--kn-lo:#1e2240}.kb[data-kb=mist] .knob:before{box-shadow:inset 0 0 0 calc(1 * var(--px)) var(--kn-ed)}.kb[data-kb=retro]{--kn1:#cfc6b1;--kn2:#e4ddcc;--kn-ed:#5a46284d;--kn-hi:#fffbf2;--kn-top:#e8e1d0;--kn-lo:#c9bfa8;--kn-dot:#a33a31}.kb[data-kb=clear]{--kn1:#ffffff8c;--kn2:#c8d7eb4d;--kn-ed:#96afd799;--kn-hi:#fffc;--kn-top:#e6eef873;--kn-lo:#becde466;--kn-dot:#8193ff;--kn-glow:0 0 calc(6 * var(--px)) #8193ffe6}.kb[data-kb=walnut]{--kn1:#a88448;--kn2:#e2c68e;--kn-ed:#3c280f99;--kn-hi:#fff2d0;--kn-top:#d9b97a;--kn-lo:#a9864a;--kn-dot:#4a3520}.kb[data-kb=night]{--kn1:#24272d;--kn2:#383c44;--kn-ed:#ffffff38;--kn-hi:#4a4e57;--kn-top:#2a2d33;--kn-lo:#16181c;--kn-dot:#8193ff;--kn-glow:0 0 calc(6 * var(--px)) #8193ffe6}.kb[data-kb=macaron]{--kn1:#f4b6c9;--kn2:#fdd8e3;--kn-ed:#aa3c644d;--kn-hi:#fff;--kn-top:#fff2f6;--kn-lo:#f7d3de;--kn-dot:#ff7fa8}.kb[data-kb=walnut] .cl{box-shadow:0 0 0 calc(1.5 * var(--px)) #b8955a}.kb[data-kb=walnut] .cl.on{box-shadow:0 0 0 calc(1.5 * var(--px)) #cdae72, 0 0 calc(6 * var(--px)) calc(1 * var(--px)) #ffbe5ae6;background:#ffe8a8}.kb[data-kb=clear][data-ly^=c]:before{top:calc(var(--P) - calc(2 * var(--px)))}.kb[data-kb=clear][data-ly^=c] .plq{box-shadow:none}.kb[data-kb=clear][data-ly^=c] .pin .chip{display:none}.kb[data-kb=clear][data-ly^=c] .pin b{color:#283e648c}.kb[data-ly^=c] .usb{left:calc(var(--P) + 2.5 * var(--U) - calc(14 * var(--px)))}.kb[data-ly^=c] .scw:nth-child(2){display:none}.kb.ni,.kb.ni *,.kb.ni :before,.kb.ni :after{transition:none!important}@media (prefers-reduced-motion:reduce){.kb *,.kb :before,.kb :after{transition:none!important}}@container (width<=480px){.kb[data-kb] .pin b,.kb[data-kb] .led em{display:none}}