.keyboard-layout[data-v-09a4aef0]{font-family:system-ui,-apple-system,sans-serif;margin:0 auto;max-width:880px;padding:16px;width:95%}.layout-caption[data-v-09a4aef0]{color:#666;font-size:.9rem;font-weight:500;margin-bottom:8px;margin-top:0;text-align:center}.keyboard[data-v-09a4aef0]{margin-top:-30px;position:relative}.key-row[data-v-09a4aef0]{justify-content:center;width:-moz-fit-content;width:fit-content}.key[data-v-09a4aef0]{align-items:center;background:#fff;background:var(--bg-primary);background:#fffffff2;border:2px solid #58ba43;border:2px solid var(--border-color);border-radius:6px;box-shadow:0 2px 4px #0000000d;display:flex;flex:0 0 44px;flex-direction:column;font-size:.8rem;height:44px;justify-content:space-between;min-width:44px;outline:1px solid #58ba43;padding:5px 3px;position:relative;transition:all .2s ease;width:44px}.key-wide-1[data-v-09a4aef0]{flex:0 0 64px;width:64px}.key-wide-2[data-v-09a4aef0]{flex:0 0 80px;width:80px}.key-wide-3[data-v-09a4aef0]{flex:0 0 88px;width:88px}.key-wide-4[data-v-09a4aef0]{flex:0 0 100px;width:100px}.key-space[data-v-09a4aef0]{flex:0 0 280px;width:280px}.key-ctrl-alt[data-v-09a4aef0]{flex:0 0 52px;width:52px}.key[data-v-09a4aef0]:hover{border-color:#58ba43;border-color:var(--accent-border);box-shadow:0 4px 8px #0000001a;transform:translateY(-2px);z-index:2}.key:hover .key-mapping[data-v-09a4aef0]{opacity:1;transform:translateY(0);visibility:visible}.key[data-v-09a4aef0]:hover:before{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff;background:var(--bg-primary);background:#fffffff2;border:1px solid #58ba43;border:1px solid var(--accent-border);border-radius:6px;box-shadow:0 4px 12px #00000026;color:#2c3e50;color:var(--accent-text);content:attr(data-mapping);font-size:14px;font-weight:500;padding:8px 14px;top:-45px;transform:translate(-50%);white-space:nowrap;z-index:3}.key[data-v-09a4aef0]:hover:after,.key[data-v-09a4aef0]:hover:before{left:50%;outline:1px solid #58ba43;position:absolute}.key[data-v-09a4aef0]:hover:after{background:#fff;background:var(--bg-primary);border-bottom:1px solid #58ba43;border-bottom:1px solid var(--accent-border);border-right:1px solid #58ba43;border-right:1px solid var(--accent-border);content:"";height:10px;top:-15px;transform:translate(-50%) rotate(45deg);width:10px;z-index:2}.key.mapped[data-v-09a4aef0]{background:#edf7ed;background:var(--accent-light);border-color:#58ba43;border-color:var(--accent-border)}[data-v-09a4aef0]:root{--bg-secondary:#f8f9fa;--bg-popup:#fff;--text-secondary:#666;--border-color:#dee2e6;--accent-light:#edf7ed;--accent-border:#58ba43;--accent-text:#2c3e50;--modifier-bg:#332978;--modifier-border:#4a3d99;--modifier-text:#fff;--modifier-bg-hover:#3f3291;--modifier-border-hover:#5849b3}:root.dark[data-v-09a4aef0]{--bg-primary:#2d2d2d;--bg-secondary:#1a1a1a;--bg-popup:#3d3d3d;--text-primary:#e1e1e1;--text-secondary:#b0b0b0;--border-color:#404040;--accent-light:#2a3f2a;--accent-border:#59f2a2;--accent-text:#79f2c2;--modifier-bg:#56becf;--modifier-border:#6cc0fc;--modifier-text:#1a1a1a;--modifier-bg-hover:#2695b7;--modifier-border-hover:#56becf}:root.dark .key[data-v-09a4aef0]{box-shadow:0 2px 4px #0003}:root.dark .key[data-v-09a4aef0]:hover{box-shadow:0 4px 8px #0000004d}:root.dark .key-mapping[data-v-09a4aef0],:root.dark .key-mapping[data-v-09a4aef0]:after{background:#fff;background:var(--bg-popup);border-color:#58ba43;border-color:var(--accent-border)}.shortcut-description[data-v-09a4aef0]{align-items:center;background:#f5f5f5;background:var(--bg-secondary);border-radius:8px;display:flex;justify-content:center;margin-top:20px;min-height:100px;padding:20px;transition:all .3s ease}.description-content[data-v-09a4aef0]{max-width:600px;text-align:center}.shortcut-key[data-v-09a4aef0]{background:#edf7ed;background:var(--accent-light);border:1px solid #58ba43;border:1px solid var(--accent-border);border-radius:4px;color:#2c3e50;color:var(--accent-text);display:inline-block;font-weight:600;margin-bottom:10px;padding:4px 12px}.shortcut-key .modifier[data-v-09a4aef0]{background:#332978;background:var(--modifier-bg);border-radius:3px;color:#fff;color:var(--modifier-text);margin:0;padding:2px 6px}.description-text[data-v-09a4aef0]{color:#2c3e50;color:var(--text-primary);font-size:16px;line-height:1.5;margin:0}.has-content[data-v-09a4aef0]{background:#fff;background:var(--bg-primary);box-shadow:0 2px 8px #0000001a}:root.dark .shortcut-description[data-v-09a4aef0]{background:#f5f5f5;background:var(--bg-secondary)}:root.dark .has-content[data-v-09a4aef0]{background:#fff;background:var(--bg-popup)}:root.dark .shortcut-key[data-v-09a4aef0]{background:#edf7ed;background:var(--accent-light);border-color:#58ba43;border-color:var(--accent-border);color:#2c3e50;color:var(--accent-text)}.key[data-key=Caps][data-v-09a4aef0]{background:#332978;background:var(--modifier-bg);border-color:#4a3d99;border-color:var(--modifier-border)}.key[data-key=Caps] .key-label[data-v-09a4aef0]{color:#fff;color:var(--modifier-text)}.key[data-key=Caps][data-v-09a4aef0]:hover{background:#3f3291;background:var(--modifier-bg-hover);border-color:#5849b3;border-color:var(--modifier-border-hover)}.separator[data-v-09a4aef0]{color:#666;color:var(--text-secondary);margin:0 8px}.cappy[data-v-09a4aef0]{background:#b3e6ff!important;color:#3f8148!important}.cappy[data-v-09a4aef0]:hover:after,.cappy[data-v-09a4aef0]:hover:before{display:none!important}:root.dark .cappy[data-v-09a4aef0]{background:#304050!important;color:#7eff8f!important}:root.dark .key[data-v-09a4aef0]:hover:before{background:#2d2d2df2;outline:1px solid #59f2a2}:root.dark .key[data-v-09a4aef0],:root.dark .key[data-v-09a4aef0]:hover:after{outline:1px solid #59f2a2}:root.dark .key[data-v-09a4aef0]{background:#2d2d2df2}.layout-selector[data-v-09a4aef0]{background:#f8f9fa;border:1px solid #e9ecef;border-bottom:none;border-radius:12px 12px 0 0;box-shadow:0 2px 12px #00000014;margin-bottom:0;margin-top:-45px;overflow:visible;padding:15px 15px 5px;position:relative}.selector-container[data-v-09a4aef0]{background:#fff;border-radius:8px;box-shadow:inset 0 1px 3px #0000000d;display:flex;gap:15px;justify-content:center;margin:0 auto;max-width:700px;padding:8px;position:relative}.selector-container button[data-v-09a4aef0]{background:transparent;border:2px solid transparent;border-radius:6px;color:#495057;cursor:pointer;font-size:1.1rem;font-weight:600;letter-spacing:1.5px;padding:12px 24px;position:relative;text-transform:uppercase;transition:all .2s ease;z-index:1}.selector-container button.active[data-v-09a4aef0]{background:#58ba430d;border-color:#58ba43;color:#58ba43}.selector-container button[data-v-09a4aef0]:hover:not(.active){background:#58ba4305;color:#58ba43}:root.dark .layout-caption[data-v-09a4aef0]{color:#adb5bd}:root.dark .keyboard[data-v-09a4aef0],:root.dark .layout-selector[data-v-09a4aef0]{background:#2d2d2d;border-color:#404040}:root.dark .selector-container[data-v-09a4aef0]{background:#222;box-shadow:inset 0 1px 3px #0003}:root.dark .selector-container button[data-v-09a4aef0]{color:#e9ecef}:root.dark .selector-container button.active[data-v-09a4aef0]{background:#59f2a20d;border-color:#59f2a2;color:#59f2a2}:root.dark .selector-container button[data-v-09a4aef0]:hover:not(.active){background:#59f2a205;color:#59f2a2}[data-v-09a4aef0]:root{--bg-primary:#fff;--bg-secondary:#f5f5f5;--bg-accent:rgba(88,186,67,.1);--text-primary:#2c3e50;--text-accent:#58ba43;--border-color:#58ba43}.key-row[data-v-09a4aef0]:nth-child(2){padding-right:0}.key-row[data-v-09a4aef0]:nth-child(3),.key-row[data-v-09a4aef0]:nth-child(4),.key-row[data-v-09a4aef0]:nth-child(5){padding-left:0}.key-row[data-v-09a4aef0]:last-child{gap:4px;justify-content:flex-start;margin-left:20px;padding-left:10px}.key-row:last-child .key[data-v-09a4aef0]{margin-right:2px}.key-space[data-v-09a4aef0]{margin:0 4px}@media (max-width:1024px){.keyboard-layout[data-v-09a4aef0]{max-width:950px;padding:10px}.key[data-v-09a4aef0]{flex:0 0 50px;height:50px;min-width:50px;width:50px}.key-space[data-v-09a4aef0]{flex:0 0 300px;width:300px}}@media (max-width:768px){.keyboard-layout[data-v-09a4aef0]{max-width:100%;padding:5px;width:100%}.key[data-v-09a4aef0]{flex:0 0 45px;font-size:.9rem;height:45px;min-width:45px;width:45px}.key-space[data-v-09a4aef0]{flex:0 0 250px;width:250px}.key-wide-1[data-v-09a4aef0]{flex:0 0 70px;width:70px}.key-wide-2[data-v-09a4aef0]{flex:0 0 90px;width:90px}.key-wide-3[data-v-09a4aef0]{flex:0 0 100px;width:100px}.key-wide-4[data-v-09a4aef0]{flex:0 0 110px;width:110px}.key-wide-5[data-v-09a4aef0]{flex:0 0 105px;width:105px}.key-ctrl-alt[data-v-09a4aef0]{flex:0 0 60px;width:60px}}.keyboard[data-v-09a4aef0]{background:#f8f9fa;border:1px solid #e9ecef;border-radius:0 0 8px 8px;border-top:none;box-shadow:0 2px 8px #0000001a;margin-top:0;overflow-x:auto;padding:15px;-webkit-overflow-scrolling:touch}.key-row[data-v-09a4aef0]{display:flex;gap:4px;justify-content:flex-start;margin-bottom:4px;min-width:900px;padding:0 10px;width:-moz-max-content;width:max-content}.key-wide-5[data-v-09a4aef0]{flex:0 0 88px;width:88px}@media (max-width:1024px){.keyboard[data-v-09a4aef0]{border-radius:0;margin:0 -10px}.key-wide-5[data-v-09a4aef0]{flex:0 0 82px;width:82px}}@media (max-width:768px){.keyboard[data-v-09a4aef0]{margin:0 -5px}.key-wide-5[data-v-09a4aef0]{flex:0 0 76px;width:76px}.keyboard[data-v-09a4aef0]:after,.keyboard[data-v-09a4aef0]:before{bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:20px;z-index:1}.keyboard[data-v-09a4aef0]:before{background:linear-gradient(90deg,rgba(248,249,250,.9),transparent);left:0}.keyboard[data-v-09a4aef0]:after{background:linear-gradient(270deg,rgba(248,249,250,.9),transparent);right:0}:root.dark .keyboard[data-v-09a4aef0]:before{background:linear-gradient(90deg,rgba(45,45,45,.9),transparent)}:root.dark .keyboard[data-v-09a4aef0]:after{background:linear-gradient(270deg,rgba(45,45,45,.9),transparent)}}.keyboard[data-v-09a4aef0]::-webkit-scrollbar{background:transparent;height:0;width:0}@media (min-width:1440px){.keyboard-layout[data-v-09a4aef0]{max-width:1100px;padding:20px}.layout-caption[data-v-09a4aef0]{font-size:1.1rem;margin-bottom:10px}.key[data-v-09a4aef0]{flex:0 0 55px;font-size:.95rem;height:55px;min-width:55px;padding:6px 4px;width:55px}.key-wide-1[data-v-09a4aef0]{flex:0 0 80px;width:80px}.key-wide-2[data-v-09a4aef0]{flex:0 0 100px;width:100px}.key-wide-3[data-v-09a4aef0]{flex:0 0 110px;width:110px}.key-wide-4[data-v-09a4aef0],.key-wide-5[data-v-09a4aef0]{flex:0 0 125px;width:125px}.key-space[data-v-09a4aef0]{flex:0 0 350px;width:350px}.key-ctrl-alt[data-v-09a4aef0]{flex:0 0 65px;width:65px}}.key-label[data-v-09a4aef0]{color:#2c3e50;color:var(--text-primary);font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:2px}.key-mapping[data-v-09a4aef0]{color:#666;color:var(--text-secondary);font-size:8px;line-height:1.1;max-width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1024px){.key-label[data-v-09a4aef0]{font-size:14px}.key-mapping[data-v-09a4aef0]{font-size:7px}.key-wide-5[data-v-09a4aef0]{flex:0 0 82px;width:82px}}@media (max-width:768px){.key-label[data-v-09a4aef0]{font-size:12px}.key-mapping[data-v-09a4aef0]{font-size:6px}.key-wide-5[data-v-09a4aef0]{flex:0 0 76px;width:76px}}@media (min-width:1440px){.key-label[data-v-09a4aef0]{font-size:18px}.key-mapping[data-v-09a4aef0]{font-size:9px}.key-wide-5[data-v-09a4aef0]{flex:0 0 94px;width:94px}}@media (min-width:1024px){.keyboard[data-v-09a4aef0]{padding:20px}.key-row[data-v-09a4aef0]{min-width:unset;width:auto}}.key-row:nth-child(2) .key[data-v-09a4aef0]:hover:before{bottom:-45px;top:auto}.key-row:nth-child(2) .key[data-v-09a4aef0]:hover:after{bottom:-15px;top:auto;transform:translate(-50%) rotate(225deg)}.key-row:first-child .key[data-v-09a4aef0]:hover:before{bottom:-45px;top:auto}.key-row:first-child .key[data-v-09a4aef0]:hover:after{bottom:-15px;top:auto;transform:translate(-50%) rotate(225deg)}