:root{--bg-color:#f1f5f9;--board-bg:#ffffff;--key-bg:#f8fafc;--key-text:#334155;--key-sub:#94a3b8;--key-shadow:#cbd5e1;--active-bg:#2563eb;--active-text:#ffffff;--screen-bg:#ffffff;--screen-text:#1e293b;--screen-desc:#64748b;--border-color:#e2e8f0;--category-title:#0f172a}*{box-sizing:border-box;user-select:none;font-family:"Segoe UI","Microsoft YaHei",sans-serif}body{background-color:var(--bg-color);color:var(--key-text);display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:20px;transition:background .4s ease,color .4s ease}.top-bar{background:var(--board-bg);padding:12px 25px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.03);display:flex;gap:25px;align-items:center;margin-bottom:25px;border:1px solid var(--border-color);flex-wrap:wrap;justify-content:center}.control-group{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}select{padding:6px 12px;border-radius:8px;border:1px solid var(--key-shadow);background-color:var(--bg-color);color:var(--key-text);outline:0;cursor:pointer;font-size:14px}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--key-shadow);border-radius:34px;transition:.3s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}input:checked+.slider{background-color:var(--active-bg)}input:checked+.slider:before{transform:translateX(20px)}button.btn-reset{background:#ef4444;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .1s}button.btn-reset:active{transform:scale(.95)}.screen{width:100%;max-width:1040px;height:130px;background:var(--screen-bg);border-radius:16px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.05);border:1px solid var(--border-color);position:relative;overflow:hidden;text-align:center;padding:0 20px}.screen::before{content:'';position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--active-bg),#a855f7)}.screen-main{font-size:42px;font-weight:800;color:var(--active-bg);line-height:1.2;margin-top:8px;margin-bottom:8px;text-shadow:0 2px 10px rgba(0,0,0,.05);min-height:50px}.screen-desc{font-size:18px;color:var(--screen-desc);font-weight:500;min-height:24px}.keyboard-frame{background-color:var(--board-bg);padding:25px;border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.06);display:flex;gap:20px;margin-bottom:40px;transform:perspective(1200px) rotateX(3deg);border:1px solid var(--border-color);transition:background-color .4s}.col{display:flex;flex-direction:column;gap:8px}.row{display:flex;gap:8px;justify-content:center}.key{width:52px;height:52px;background:var(--key-bg);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;cursor:pointer;box-shadow:0 4px 0 var(--key-shadow);transition:all 50ms cubic-bezier(.4,0,.2,1);color:var(--key-text);font-size:14px;font-weight:700;border:1px solid rgba(255,255,255,.2)}.key.active,.key:active{transform:translateY(4px);box-shadow:0 0 0 var(--key-shadow);background:var(--active-bg);color:var(--active-text);border-color:transparent}.key .sub{font-size:10px;font-weight:400;color:var(--key-sub);margin-top:2px}.key .sym{position:absolute;top:4px;left:5px;font-size:10px;color:var(--key-sub);font-family:Consolas,monospace}.key.active .sub,.key.active .sym{color:rgba(255,255,255,.8)}.key.caps-on{background:var(--active-bg);color:#fff;transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.2)}.key.caps-on::after{content:'•';position:absolute;top:4px;right:6px;color:#4ade80;font-size:20px;line-height:10px}.w-1-5{width:78px}.w-1-75{width:92px}.w-2{width:108px}.w-2-25{width:122px}.w-2-75{width:148px}.w-space{width:328px}.h-2{height:112px}.empty{width:52px;visibility:hidden}.key[data-code=ControlLeft]{order:1}.key[data-code=MetaLeft]{order:2}.key[data-code=AltLeft]{order:3}body.mac-mode .key[data-code=AltLeft]{order:2}body.mac-mode .key[data-code=MetaLeft]{order:3}.key[data-code=AltRight]{order:1}.key[data-code=MetaRight]{order:2}.key[data-code=ControlRight]{order:3}body.mac-mode .key[data-code=MetaRight]{order:1}body.mac-mode .key[data-code=AltRight]{order:2}.cheat-sheet-wrapper{width:100%;max-width:1060px;display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:20px}.category-card{background:var(--board-bg);border-radius:16px;padding:20px;box-shadow:0 5px 20px rgba(0,0,0,.03);border:1px solid var(--border-color)}.category-header{font-size:16px;font-weight:700;margin-bottom:15px;color:var(--category-title);display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:2px solid var(--bg-color)}.category-header::before{content:'';width:6px;height:18px;background:var(--active-bg);border-radius:4px}.shortcut-list{display:flex;flex-direction:column;gap:10px}.shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;background:var(--bg-color);transition:.2s}.shortcut-item:hover{transform:translateX(5px);border-left:2px solid var(--active-bg)}.sc-keys{background:var(--board-bg);color:var(--active-bg);padding:4px 8px;border-radius:6px;font-size:12px;font-weight:700;font-family:Consolas,monospace;border:1px solid var(--border-color);box-shadow:0 2px 0 var(--key-shadow)}.sc-desc{font-size:13px;color:var(--key-text);font-weight:500}