:root{--kb-bg: #1d1d1f;--kb-bg-lighter: #2d2d2f;--kb-surface: #232325;--kb-key-bg: #3a3a3c;--kb-key-bg-hover: #48484a;--kb-key-bg-active: #2c2c2e;--kb-text: #f5f5f7;--kb-text-muted: #86868b;--kb-text-dim: #6e6e73;--kb-key-border: #4a4a4c;--kb-key-shadow: rgba(0, 0, 0, .5);--kb-key-highlight: rgba(255, 255, 255, .08);--kb-key-inner-shadow: rgba(0, 0, 0, .4);--kb-backlight: rgba(255, 255, 255, .9);--kb-backlight-glow: rgba(255, 255, 255, .15);--kb-backlight-blue: rgba(10, 132, 255, .8);--kb-backlight-green: rgba(48, 209, 88, .8);--kb-backlight-orange: rgba(255, 159, 10, .8);--kb-backlight-red: rgba(255, 69, 58, .8);--kb-backlight-purple: rgba(191, 90, 242, .8);--kb-key-radius: 6px;--kb-key-padding: .75rem 1rem;--kb-key-gap: 6px;--kb-transition: all .1s ease;--kb-transition-slow: all .2s ease;--kb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;--kb-font-mono: "SF Mono", "Menlo", "Monaco", monospace}[data-theme=light]{--kb-bg: #e8e8ed;--kb-bg-lighter: #f5f5f7;--kb-surface: #dcdce0;--kb-key-bg: #fafafa;--kb-key-bg-hover: #ffffff;--kb-key-bg-active: #e8e8ed;--kb-text: #1d1d1f;--kb-text-muted: #6e6e73;--kb-text-dim: #86868b;--kb-key-border: #c7c7cc;--kb-key-shadow: rgba(0, 0, 0, .15);--kb-key-highlight: rgba(255, 255, 255, .9);--kb-key-inner-shadow: rgba(0, 0, 0, .08);--kb-backlight: rgba(0, 0, 0, .85);--kb-backlight-glow: transparent}*{box-sizing:border-box;margin:0;padding:0}body.keyboard-ui{font-family:var(--kb-font);background:var(--kb-bg);color:var(--kb-text);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--kb-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease,visibility .3s ease;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-content{text-align:center;animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-spinner{width:60px;height:60px;border:4px solid var(--kb-text);border-top-color:var(--kb-text-dim);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:1.125rem;font-weight:500;color:var(--kb-text);margin-bottom:.5rem;animation:pulse 2s ease-in-out infinite}.loading-subtext{font-size:.875rem;color:var(--kb-text-muted);animation:pulse 2s ease-in-out infinite;animation-delay:.2s}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.kb-key{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--kb-key-padding);font-family:var(--kb-font);font-size:.9375rem;font-weight:500;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),linear-gradient(180deg,var(--kb-key-bg) 0%,color-mix(in srgb,var(--kb-key-bg),black 8%) 100%);border:1px solid var(--kb-key-border);border-radius:var(--kb-key-radius);cursor:pointer;transition:var(--kb-transition);box-shadow:0 1px 0 0 var(--kb-key-border),0 4px 8px -2px var(--kb-key-shadow),inset 0 -2px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 10px var(--kb-backlight-glow);position:relative;-webkit-user-select:none;user-select:none}.kb-key:hover{background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),linear-gradient(180deg,var(--kb-key-bg-hover) 0%,var(--kb-key-bg) 100%)}.kb-key:active,.kb-key.active{background:linear-gradient(180deg,transparent 0%,var(--kb-key-inner-shadow) 100%),var(--kb-key-bg-active);box-shadow:0 1px 0 0 var(--kb-key-border),0 1px 2px -1px var(--kb-key-shadow),inset 0 2px 4px 0 var(--kb-key-inner-shadow);transform:translateY(1px)}.kb-key-sm{min-width:36px;min-height:36px;padding:.5rem .75rem;font-size:.8125rem}.kb-key-lg{min-width:56px;min-height:56px;padding:1rem 1.5rem;font-size:1rem}.kb-key-xl{min-width:72px;min-height:72px;padding:1.25rem 2rem;font-size:1.125rem}.kb-key-wide{min-width:80px}.kb-key-wider{min-width:120px}.kb-key-widest{min-width:200px}.kb-key-backlit{color:var(--kb-backlight);text-shadow:0 0 8px var(--kb-backlight-glow),0 0 20px var(--kb-backlight-glow)}.kb-key-backlit-blue{color:var(--kb-backlight-blue);text-shadow:0 0 8px var(--kb-backlight-blue),0 0 20px rgba(10,132,255,.4)}.kb-key-backlit-green{color:var(--kb-backlight-green);text-shadow:0 0 8px var(--kb-backlight-green),0 0 20px rgba(48,209,88,.4)}.kb-key-backlit-orange{color:var(--kb-backlight-orange);text-shadow:0 0 8px var(--kb-backlight-orange),0 0 20px rgba(255,159,10,.4)}.kb-key-backlit-red{color:var(--kb-backlight-red);text-shadow:0 0 8px var(--kb-backlight-red),0 0 20px rgba(255,69,58,.4)}.kb-key-backlit-purple{color:var(--kb-backlight-purple);text-shadow:0 0 8px var(--kb-backlight-purple),0 0 20px rgba(191,90,242,.4)}.kb-key-fn{flex-direction:column;gap:2px;padding:.5rem .75rem;font-size:.6875rem}.kb-key-fn .kb-key-icon{font-size:1rem}.kb-key-fn .kb-key-label{font-size:.5625rem;color:var(--kb-text-muted)}.kb-key-symbol{font-family:var(--kb-font);font-weight:400}.kb-key-command:before{content:""}.kb-key-option:before{content:""}.kb-key-control:before{content:""}.kb-key-shift:before{content:""}.kb-key-capslock:before{content:""}.kb-key-tab:before{content:""}.kb-key-return:before{content:""}.kb-key-delete:before{content:""}.kb-key-escape:before{content:"esc"}.kb-keyboard{display:inline-flex;flex-direction:column;gap:8px;padding:1.5rem;background:linear-gradient(180deg,var(--kb-surface) 0%,var(--kb-bg) 100%);border-radius:12px;box-shadow:0 10px 40px -10px #00000080,inset 0 1px #ffffff0d}.kb-keyboard-row{display:flex;gap:var(--kb-key-gap);justify-content:center;margin-bottom:4px}.kb-keyboard-row:last-child{margin-bottom:0}.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:var(--kb-font);font-size:.9375rem;font-weight:500;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),linear-gradient(180deg,var(--kb-key-bg) 0%,color-mix(in srgb,var(--kb-key-bg),black 8%) 100%);border:1px solid var(--kb-key-border);border-radius:var(--kb-key-radius);cursor:pointer;transition:var(--kb-transition);box-shadow:0 1px 0 0 var(--kb-key-border),0 4px 8px -2px var(--kb-key-shadow),inset 0 -2px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 10px var(--kb-backlight-glow)}.kb-btn:hover{background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),linear-gradient(180deg,var(--kb-key-bg-hover) 0%,var(--kb-key-bg) 100%)}.kb-btn:active{background:linear-gradient(180deg,transparent 0%,var(--kb-key-inner-shadow) 100%),var(--kb-key-bg-active);box-shadow:0 1px 0 0 var(--kb-key-border),0 1px 2px -1px var(--kb-key-shadow),inset 0 2px 4px 0 var(--kb-key-inner-shadow);transform:translateY(1px)}.kb-btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#0a84ff,#0077ed);border-color:#0a84ff;color:#fff;text-shadow:0 0 10px rgba(10,132,255,.5);box-shadow:0 1px #0a84ff,0 4px 12px -2px #0a84ff66,inset 0 -2px #0003}.kb-btn-primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#2196f3,#0a84ff)}.kb-btn-success{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#34c759,#30d158);border-color:#30d158;color:#fff;text-shadow:0 0 10px rgba(48,209,88,.5)}.kb-btn-danger{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#ff453a,#ff3b30);border-color:#ff3b30;color:#fff;text-shadow:0 0 10px rgba(255,69,58,.5)}.kb-btn-warning{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#ff9f0a,#ff9500);border-color:#ff9500;color:#fff;text-shadow:0 0 10px rgba(255,159,10,.5)}.kb-btn-sm{padding:.5rem 1rem;font-size:.8125rem}.kb-btn-lg{padding:1rem 2rem;font-size:1.0625rem}.kb-card{background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 20%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px -2px var(--kb-key-shadow),inset 0 1px 0 0 var(--kb-key-highlight)}.kb-card a:not(.kb-nav-item){word-break:break-all;overflow-wrap:anywhere}.kb-card-header{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--kb-key-border)}.kb-card-title{font-size:1.0625rem;font-weight:600;color:var(--kb-text)}.kb-card-subtitle{font-size:.8125rem;color:var(--kb-text-muted);margin-top:.25rem}.kb-card-elevated{box-shadow:0 8px 24px -4px var(--kb-key-shadow),0 2px 8px -2px #0000004d,inset 0 1px 0 0 var(--kb-key-highlight)}.kb-input{width:100%;padding:.75rem 1rem;font-family:var(--kb-font);font-size:.9375rem;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-inner-shadow) 0%,transparent 30%),var(--kb-key-bg-active);border:1px solid var(--kb-key-border);border-radius:var(--kb-key-radius);outline:none;transition:var(--kb-transition);box-shadow:inset 0 2px 4px 0 var(--kb-key-inner-shadow)}.kb-input:focus{border-color:#0a84ff;box-shadow:inset 0 2px 4px 0 var(--kb-key-inner-shadow),0 0 0 3px #0a84ff4d}.kb-input::placeholder{color:var(--kb-text-dim)}.kb-textarea{min-height:100px;resize:vertical}.kb-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.5rem;cursor:pointer}.kb-form-group{margin-bottom:1.25rem}.kb-label{display:block;margin-bottom:.5rem;font-size:.8125rem;font-weight:500;color:var(--kb-text-muted)}.kb-checkbox-wrapper,.kb-radio-wrapper{display:flex;align-items:center;gap:.75rem;cursor:pointer;font-size:.9375rem}.kb-checkbox,.kb-radio{appearance:none;width:22px;height:22px;background:linear-gradient(180deg,var(--kb-key-inner-shadow) 0%,transparent 40%),var(--kb-key-bg-active);border:1px solid var(--kb-key-border);border-radius:var(--kb-key-radius);cursor:pointer;transition:var(--kb-transition);box-shadow:inset 0 2px 4px 0 var(--kb-key-inner-shadow);position:relative}.kb-radio{border-radius:50%}.kb-checkbox:checked,.kb-radio:checked{background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.2) 100%),linear-gradient(180deg,#0a84ff,#0077ed);border-color:#0a84ff;box-shadow:0 0 8px #0a84ff66,inset 0 -2px #0003}.kb-checkbox:checked:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.kb-radio:checked:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.kb-toggle{position:relative;width:51px;height:31px;background:linear-gradient(180deg,var(--kb-key-inner-shadow) 0%,transparent 40%),var(--kb-key-bg-active);border:1px solid var(--kb-key-border);border-radius:16px;cursor:pointer;transition:var(--kb-transition-slow);box-shadow:inset 0 2px 4px 0 var(--kb-key-inner-shadow)}.kb-toggle input{display:none}.kb-toggle-knob{position:absolute;top:2px;left:2px;width:25px;height:25px;background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 50%),linear-gradient(180deg,#fff,#f0f0f0);border-radius:50%;transition:var(--kb-transition-slow);box-shadow:0 2px 4px #0003,0 1px 2px #0000001a}.kb-toggle input:checked+.kb-toggle-knob{left:22px}.kb-toggle.active,.kb-toggle:has(input:checked){background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 40%,rgba(0,0,0,.1) 100%),#34c759;border-color:#30d158;box-shadow:0 0 8px #30d1584d,inset 0 1px 2px #0000001a}.kb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:.25rem .625rem;font-size:.6875rem;font-weight:600;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 50%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:4px;box-shadow:0 1px 2px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 8px var(--kb-backlight-glow)}.kb-badge-primary{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%),#0a84ff;border-color:#0a84ff;color:#fff}.kb-badge-success{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%),#30d158;border-color:#30d158;color:#fff}.kb-badge-warning{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%),#ff9f0a;border-color:#ff9f0a;color:#fff}.kb-badge-danger{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 50%),#ff453a;border-color:#ff453a;color:#fff}.kb-shortcut{display:inline-flex;align-items:center;gap:4px}.kb-shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 .5rem;font-family:var(--kb-font);font-size:.75rem;font-weight:500;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:5px;box-shadow:0 1px 0 0 var(--kb-key-border),0 2px 4px -1px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 8px var(--kb-backlight-glow)}.kb-shortcut-plus{color:var(--kb-text-dim);font-size:.75rem}.kb-tabs{display:flex;gap:2px;padding:4px;background:linear-gradient(180deg,var(--kb-key-inner-shadow) 0%,transparent 50%),var(--kb-key-bg-active);border:1px solid var(--kb-key-border);border-radius:8px;box-shadow:inset 0 2px 4px 0 var(--kb-key-inner-shadow)}.kb-tab{flex:1;padding:.625rem 1rem;font-family:var(--kb-font);font-size:.875rem;font-weight:500;color:var(--kb-text-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:var(--kb-transition)}.kb-tab:hover{color:var(--kb-text)}.kb-tab.active{color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 40%,transparent 60%,var(--kb-key-inner-shadow) 100%),var(--kb-key-bg);box-shadow:0 1px 2px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 10px var(--kb-backlight-glow)}.kb-nav{display:flex;gap:4px;padding:.75rem;background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 30%),var(--kb-surface);border:1px solid var(--kb-key-border);border-radius:10px;box-shadow:0 4px 12px -2px var(--kb-key-shadow),inset 0 1px 0 0 var(--kb-key-highlight)}.kb-nav-item{padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:var(--kb-text-muted);text-decoration:none;border-radius:var(--kb-key-radius);transition:var(--kb-transition)}.kb-nav-item:hover{color:var(--kb-text);background:var(--kb-key-bg-active)}.kb-nav-item.active{color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 50%),var(--kb-key-bg);box-shadow:0 1px 2px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow);text-shadow:0 0 10px var(--kb-backlight-glow)}.kb-progress{width:100%;height:8px;background:linear-gradient(180deg,var(--kb-key-inner-shadow) 0%,transparent 50%),var(--kb-key-bg-active);border:1px solid var(--kb-key-border);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px var(--kb-key-inner-shadow)}.kb-progress-bar{height:100%;background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%,rgba(0,0,0,.1) 100%),linear-gradient(90deg,#0a84ff,#5ac8fa);border-radius:3px;transition:width .3s ease;box-shadow:0 0 8px #0a84ff66}.kb-progress-bar-success{background:linear-gradient(180deg,rgba(255,255,255,.3) 0%,transparent 50%,rgba(0,0,0,.1) 100%),linear-gradient(90deg,#30d158,#34c759);box-shadow:0 0 8px #30d15866}.kb-alert{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 30%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:8px;box-shadow:0 2px 8px -2px var(--kb-key-shadow),inset 0 1px 0 0 var(--kb-key-highlight)}.kb-alert-icon{flex-shrink:0;width:20px;height:20px;margin-top:2px}.kb-alert-content{flex:1}.kb-alert-title{font-weight:600;font-size:.9375rem;margin-bottom:.25rem}.kb-alert-message{font-size:.875rem;color:var(--kb-text-muted)}.kb-alert-info{border-color:#0a84ff;box-shadow:0 2px 8px -2px #0a84ff4d,0 0 0 1px #0a84ff1a,inset 0 1px 0 0 var(--kb-key-highlight)}.kb-alert-info .kb-alert-icon{color:#0a84ff}.kb-alert-success{border-color:#30d158;box-shadow:0 2px 8px -2px #30d1584d,0 0 0 1px #30d1581a,inset 0 1px 0 0 var(--kb-key-highlight)}.kb-alert-success .kb-alert-icon{color:#30d158}.kb-alert-warning{border-color:#ff9f0a;box-shadow:0 2px 8px -2px #ff9f0a4d,0 0 0 1px #ff9f0a1a,inset 0 1px 0 0 var(--kb-key-highlight)}.kb-alert-warning .kb-alert-icon{color:#ff9f0a}.kb-alert-danger{border-color:#ff453a;box-shadow:0 2px 8px -2px #ff453a4d,0 0 0 1px #ff453a1a,inset 0 1px 0 0 var(--kb-key-highlight)}.kb-alert-danger .kb-alert-icon{color:#ff453a}.kb-tooltip{position:relative;display:inline-block}.kb-tooltip-content{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);padding:.5rem .875rem;font-size:.8125rem;color:var(--kb-text);background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 30%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:var(--kb-key-radius);white-space:nowrap;opacity:0;visibility:hidden;transition:var(--kb-transition);box-shadow:0 4px 12px -2px var(--kb-key-shadow),inset 0 1px 0 0 var(--kb-key-highlight);z-index:100}.kb-tooltip:hover .kb-tooltip-content{opacity:1;visibility:visible}.kb-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 30%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:10px;overflow:hidden;box-shadow:0 2px 6px -1px var(--kb-key-shadow),inset 0 1px 0 0 var(--kb-key-highlight)}.kb-avatar img{width:100%;height:100%;object-fit:cover}.kb-avatar-sm{width:32px;height:32px;border-radius:8px}.kb-avatar-lg{width:56px;height:56px;border-radius:12px}.kb-avatar-xl{width:80px;height:80px;border-radius:16px}.kb-avatar-initials{font-size:.875rem;font-weight:600;color:var(--kb-text);text-shadow:0 0 8px var(--kb-backlight-glow)}.kb-divider{height:1px;background:linear-gradient(90deg,transparent,var(--kb-key-border),transparent);border:none;margin:1.5rem 0}.kb-loader{display:flex;gap:6px}.kb-loader-key{width:12px;height:16px;background:linear-gradient(180deg,var(--kb-key-highlight) 0%,transparent 50%),var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:3px;box-shadow:0 1px 2px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow);animation:kb-loader-bounce .6s ease-in-out infinite}.kb-loader-key:nth-child(1){animation-delay:0s}.kb-loader-key:nth-child(2){animation-delay:.1s}.kb-loader-key:nth-child(3){animation-delay:.2s}@keyframes kb-loader-bounce{0%,to{transform:translateY(0);box-shadow:0 1px 2px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow)}50%{transform:translateY(-8px);box-shadow:0 8px 12px -4px var(--kb-key-shadow),inset 0 -1px 0 0 var(--kb-key-inner-shadow),0 0 12px #ffffff1a}}.kb-touchbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(180deg,#2c2c2e,#1c1c1e);border-radius:8px;box-shadow:0 4px 16px -4px #0009,inset 0 1px #ffffff0d}.kb-touchbar-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;font-size:.8125rem;font-weight:500;color:var(--kb-text);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:var(--kb-transition)}.kb-touchbar-btn:hover{background:#ffffff1a}.kb-touchbar-btn:active{background:#ffffff0d}.kb-touchbar-btn.active{background:#0a84ff4d;color:#5ac8fa}.kb-touchbar-divider{width:1px;height:24px;background:#ffffff1a}.kb-text-muted{color:var(--kb-text-muted)}.kb-text-dim{color:var(--kb-text-dim)}.kb-glow{text-shadow:0 0 10px var(--kb-backlight-glow)}.kb-glow-blue{text-shadow:0 0 10px rgba(10,132,255,.6)}.kb-glow-green{text-shadow:0 0 10px rgba(48,209,88,.6)}.kb-glow-orange{text-shadow:0 0 10px rgba(255,159,10,.6)}.kb-glow-red{text-shadow:0 0 10px rgba(255,69,58,.6)}.app-container{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh}.nav-card{margin-bottom:2rem}.page-container{position:relative;perspective:1500px}.page-content{position:absolute;top:0;left:0;right:0;opacity:0;visibility:hidden;transform:scale(.95) translateZ(-100px);transform-origin:center;transition:all .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.page-content.active{position:relative;opacity:1;visibility:visible;transform:scale(1) translateZ(0);pointer-events:auto}.page-content.sucking-in{animation:suckIn .5s cubic-bezier(.68,-.55,.265,1.55) forwards}.page-content.pushing-out{animation:pushOut .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes suckIn{0%{opacity:1;transform:scale(1) translateZ(0) rotateX(0)}50%{opacity:.5;transform:scale(.8) translateZ(-200px) rotateX(10deg)}to{opacity:0;visibility:hidden;transform:scale(.6) translateZ(-400px) rotateX(20deg);pointer-events:none}}@keyframes pushOut{0%{opacity:0;transform:scale(.6) translateZ(-400px) rotateX(-20deg)}50%{opacity:.5;transform:scale(.8) translateZ(-200px) rotateX(-10deg)}to{opacity:1;visibility:visible;transform:scale(1) translateZ(0) rotateX(0);pointer-events:auto}}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.feature-item{padding:1.5rem;background:var(--kb-surface);border:1px solid var(--kb-key-border);transition:var(--kb-transition-slow)}.feature-item:hover{background:var(--kb-key-bg);transform:translateY(-2px);box-shadow:0 8px 20px -4px var(--kb-key-shadow)}.feature-item h3{font-size:1rem;margin-bottom:.5rem;color:var(--kb-text)}.feature-item p{font-size:.875rem;color:var(--kb-text-muted);line-height:1.6}.feature-item a{word-break:break-all;overflow-wrap:anywhere}.mobile-view-toggle{display:none;gap:.5rem;margin-bottom:1rem;justify-content:center}.view-toggle-btn{padding:.5rem 1.5rem;font-size:.875rem;font-family:var(--kb-font);background:var(--kb-key-bg);color:var(--kb-text);border:1px solid var(--kb-key-border);border-radius:8px;cursor:pointer;transition:var(--kb-transition)}.view-toggle-btn:hover{background:var(--kb-key-bg-hover)}.view-toggle-btn.active{background:var(--kb-backlight-blue);color:var(--kb-text);border-color:var(--kb-backlight-blue)}.terminal-layout{display:grid;grid-template-columns:1fr 400px;gap:1.5rem;align-items:start}@media(max-width:1024px){.terminal-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto}.terminal-card{order:2}.history-card{order:1;position:relative;max-height:400px}.keyboard-card{order:3}}@media(max-width:768px){.mobile-view-toggle{display:flex}.terminal-card,.history-card{display:none!important}.terminal-card.active,.history-card.active{display:block!important}.terminal-layout{grid-template-rows:auto auto}.history-card{order:2;max-height:60vh}.keyboard-card{order:3}}.terminal-card{margin-bottom:0;overflow:visible}.terminal-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kb-surface);border-bottom:1px solid var(--kb-key-border);margin:-1.5rem -1.5rem 1rem;border-top-left-radius:inherit;border-top-right-radius:inherit}.terminal-actions{display:flex;gap:.5rem}.save-dropdown{position:relative;display:inline-block}.save-dropdown #save-workbook{white-space:nowrap}.save-dropdown-menu{display:none;position:absolute;top:calc(100% + .25rem);right:0;background:#1c1c1ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(134,134,139,.3);border-radius:.5rem;overflow:hidden;box-shadow:0 4px 12px #00000080;z-index:1000;min-width:180px}.save-dropdown.active .save-dropdown-menu{display:block}.save-option{display:block;width:100%;padding:.625rem .875rem;text-align:left;background:transparent;border:none;color:#f5f5f7;font-size:.8125rem;cursor:pointer;transition:all .2s ease;font-family:SF Mono,Menlo,Monaco,monospace;white-space:nowrap}.save-option:hover{background:#8b8cfb26;color:#8b8cfb}.save-option:active{background:#8b8cfb40;transform:scale(.98)}.terminal-title{font-size:.8125rem;font-weight:600;color:var(--kb-text-muted);font-family:var(--kb-font-mono)}.terminal-output{font-family:var(--kb-font-mono);font-size:.875rem;line-height:1.6;color:var(--kb-text);background:var(--kb-bg);padding:1rem;min-height:300px;max-height:400px;overflow-y:auto;margin-bottom:1rem;border:1px solid var(--kb-key-border);scrollbar-width:thin;scrollbar-color:var(--kb-key-border) var(--kb-bg)}.terminal-output::-webkit-scrollbar{width:8px}.terminal-output::-webkit-scrollbar-track{background:var(--kb-bg)}.terminal-output::-webkit-scrollbar-thumb{background:var(--kb-key-border)}.terminal-line{margin-bottom:.25rem;white-space:pre-wrap;word-break:break-word}.terminal-prompt{color:var(--kb-backlight-green);font-weight:600}.terminal-error{color:var(--kb-backlight-red)}.terminal-result{color:var(--kb-backlight-blue)}.terminal-input-container{background:var(--kb-bg);border:1px solid var(--kb-key-border);transition:var(--kb-transition-slow)}.terminal-input-container.expanded{border-color:var(--kb-backlight-blue);box-shadow:0 0 0 2px #0a84ff33}.terminal-input-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--kb-surface);border-bottom:1px solid var(--kb-key-border)}.terminal-header-actions{display:flex;align-items:center;gap:.5rem}.keyboard-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.keyboard-toggle input[type=checkbox]{display:none}.toggle-slider{position:relative;width:36px;height:20px;background:var(--kb-key-bg);border:1px solid var(--kb-key-border);border-radius:10px;transition:var(--kb-transition)}.toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:1px;background:var(--kb-text-muted);border-radius:50%;transition:var(--kb-transition)}.keyboard-toggle input:checked+.toggle-slider{background:var(--kb-backlight-blue);border-color:var(--kb-backlight-blue)}.keyboard-toggle input:checked+.toggle-slider:before{transform:translate(16px);background:#fff}.toggle-label{font-size:.75rem;color:var(--kb-text-muted);white-space:nowrap}.terminal-mode-btn{background:transparent;border:none;color:var(--kb-text-muted);cursor:pointer;padding:.25rem .5rem;font-size:.875rem;font-family:var(--kb-font-mono);transition:var(--kb-transition);display:flex;align-items:center}.terminal-mode-btn:hover{color:var(--kb-text);background:var(--kb-key-bg)}.terminal-mode-btn.active{color:var(--kb-backlight-blue)}.terminal-expand-btn{background:transparent;border:none;color:var(--kb-text-muted);cursor:pointer;padding:.25rem .5rem;font-size:.875rem;transition:var(--kb-transition);display:flex;align-items:center;gap:.5rem}.terminal-expand-btn:hover{color:var(--kb-text);background:var(--kb-key-bg)}.expand-icon{display:inline-block;transition:transform .3s ease}.terminal-input-container.expanded .expand-icon{transform:rotate(180deg)}.terminal-input-wrapper{max-height:2.5rem;overflow:hidden;transition:max-height .3s ease;position:relative}.terminal-input-container.expanded .terminal-input-wrapper{max-height:400px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kb-key-border) transparent}.terminal-input-container.editor-mode .terminal-input-wrapper{max-height:600px}.terminal-input{width:100%;background:transparent;border:none;outline:none;color:var(--kb-text);font-family:var(--kb-font-mono);font-size:.875rem;line-height:1.6;padding:.75rem 1rem;resize:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kb-key-border) transparent}.terminal-input.hidden{display:none}.cm-editor{height:auto;min-height:2.5rem;max-height:600px;font-family:var(--kb-font-mono);font-size:.875rem;line-height:1.6;background:transparent;color:var(--kb-text)}.cm-editor.cm-focused{outline:none}.terminal-input-container.expanded .cm-editor{min-height:200px}.terminal-input-container.editor-mode .cm-editor{min-height:400px}.cm-scroller{overflow:auto;font-family:var(--kb-font-mono)}.cm-content{padding:.25rem 0 .25rem .5rem;position:relative}.terminal-input-container.editor-mode .cm-content{padding-left:0}.cm-gutters{background:var(--kb-surface);border-right:1px solid var(--kb-key-border);display:none}.terminal-input-container.editor-mode .cm-gutters{display:flex}.cm-lineNumbers .cm-gutterElement{color:var(--kb-text-muted);font-size:.75rem;padding:0 8px;min-width:32px}.cm-activeLineGutter{background:#ffffff05}.cm-foldGutter{display:none}.terminal-input-container.editor-mode .cm-foldGutter{display:flex}.cm-foldGutter .cm-gutterElement{padding:0 4px;color:var(--kb-text-muted);cursor:pointer}.cm-foldGutter .cm-gutterElement:hover{color:var(--kb-text)}.history-item-code-wrapper .cm-editor{max-height:none;min-height:auto}.history-item-code-wrapper .cm-gutters{display:flex;background-color:transparent;border-right:1px solid rgba(134,134,139,.2);padding-right:.5rem}.history-item-code-wrapper .cm-foldGutter{display:flex}.history-item-code-wrapper .cm-content{padding-left:.5rem}.terminal-input::-webkit-scrollbar{width:6px}.terminal-input::-webkit-scrollbar-track{background:transparent}.terminal-input::-webkit-scrollbar-thumb{background:var(--kb-key-border)}.terminal-input::placeholder{color:var(--kb-text-dim)}.terminal-input-actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--kb-surface);border-top:1px solid var(--kb-key-border);opacity:0;max-height:0;overflow:hidden;transition:all .3s ease}.terminal-input-container.expanded .terminal-input-actions{opacity:1;max-height:50px}.terminal-hint{font-size:.6875rem;color:var(--kb-text-dim);font-family:var(--kb-font-mono)}.terminal-input-line{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--kb-bg);border:1px solid var(--kb-key-border)}.terminal-input-line .terminal-prompt{font-family:var(--kb-font-mono);font-size:.875rem}.keyboard-card{margin-top:1.5rem}.keyboard-card .kb-keyboard{width:100%;box-sizing:border-box}.keyboard-card .kb-keyboard-row{width:100%}.keyboard-card .kb-key{flex:1;min-width:40px}.keyboard-mode-toggle{display:none;justify-content:center;gap:.5rem;margin-bottom:1rem}.keyboard-mode-btn{padding:.5rem 1rem;font-size:.8125rem;font-family:var(--kb-font);background:var(--kb-key-bg);color:var(--kb-text);border:1px solid var(--kb-key-border);cursor:pointer;transition:var(--kb-transition)}.keyboard-mode-btn:hover{background:var(--kb-key-bg-hover)}.keyboard-mode-btn.active{background:var(--kb-backlight-blue);color:var(--kb-text);border-color:var(--kb-backlight-blue)}.keyboard-layer{display:none}.keyboard-layer.active,.full-keyboard{display:block}.mobile-keyboard{display:none}@media(max-width:768px){.full-keyboard{display:none}.mobile-keyboard{display:block}.keyboard-mode-toggle{display:flex}.keyboard-card .kb-key{min-width:30px;min-height:36px;padding:.5rem;font-size:.8125rem}.keyboard-card .kb-key-sm{min-width:28px;min-height:32px;padding:.4rem;font-size:.75rem}.keyboard-card .kb-keyboard{padding:1rem}.keyboard-card .kb-keyboard-row{gap:3px}}@media(max-width:480px){.app-container{padding:.5rem}.nav-card{margin-bottom:.5rem;padding:1rem}.kb-card{padding:1rem;border-radius:8px}.terminal-layout{gap:.5rem}.terminal-card,.history-card{padding:.75rem;overflow:hidden}.history-card{overflow-y:auto}.terminal-header{padding:.5rem .75rem;margin:-.75rem -.75rem .75rem!important}.history-header{padding:.5rem .75rem;margin:-.75rem -.75rem 0!important}.mobile-view-toggle{margin-bottom:.5rem}.mobile-keyboard .kb-keyboard{width:100%;padding:.5rem}.mobile-keyboard .kb-keyboard-row{display:flex;width:100%;gap:3px;margin-bottom:4px;justify-content:center}.mobile-keyboard .kb-key,.mobile-keyboard .kb-key-sm{flex:1;min-width:0;min-height:44px;padding:.5rem .25rem;font-size:.875rem;font-weight:500;max-width:50px}.mobile-keyboard .kb-key-widest{flex:3;min-width:0;max-width:none}.keyboard-card{padding:.75rem}.keyboard-mode-toggle{margin-bottom:.75rem}}.history-card{position:sticky;top:1rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;overflow:visible}.history-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--kb-surface);border-bottom:1px solid var(--kb-key-border);margin:-1.5rem -1.5rem 0;border-top-left-radius:inherit;border-top-right-radius:inherit}.history-title{font-size:.8125rem;font-weight:600;color:var(--kb-text-muted);text-transform:uppercase;letter-spacing:.05em}.history-actions{display:flex;gap:.5rem}.history-list{flex:1;overflow-y:auto;margin-top:1rem;scrollbar-width:thin;scrollbar-color:var(--kb-key-border) transparent}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb{background:var(--kb-key-border)}.history-empty{text-align:center;padding:2rem 1rem;color:var(--kb-text-dim);font-size:.875rem}.history-item:hover{background:var(--kb-surface);border-color:var(--kb-key-bg-hover)}.history-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.history-item-number{font-size:.6875rem;color:var(--kb-text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.history-item-actions{display:flex;gap:.25rem;opacity:0;transition:var(--kb-transition)}.history-item:hover .history-item-actions{opacity:1}.history-item-btn{padding:.25rem .5rem;font-size:.6875rem;background:transparent;border:1px solid var(--kb-key-border);color:var(--kb-text-muted);cursor:pointer;transition:var(--kb-transition);font-family:var(--kb-font)}.history-item-btn:hover{background:var(--kb-key-bg);color:var(--kb-text);border-color:var(--kb-key-bg-hover)}.history-item-btn.danger:hover{background:#ff453a33;color:var(--kb-backlight-red);border-color:var(--kb-backlight-red)}.history-item-btn.primary:hover{background:#0a84ff33;color:var(--kb-backlight-blue);border-color:var(--kb-backlight-blue)}.history-item-code{font-family:var(--kb-font-mono);font-size:.8125rem;color:var(--kb-text);background:transparent;border:none;outline:none;width:100%;resize:vertical;min-height:1.5rem;line-height:1.5;padding:.5rem;margin-bottom:.5rem}.history-item-code:focus{background:var(--kb-surface)}.history-item-code[readonly]{cursor:default}.history-item-code-wrapper{margin-bottom:.5rem}.history-item-code-wrapper .CodeMirror{height:auto;min-height:2rem;max-height:300px;font-size:.8125rem;background:transparent;border:1px solid transparent;transition:var(--kb-transition-slow)}.history-item-code-wrapper .CodeMirror:focus-within{background:var(--kb-surface);border-color:var(--kb-backlight-blue)}.history-item-code-wrapper .CodeMirror-scroll{min-height:2rem}.history-item-code-wrapper .CodeMirror-gutters{display:none}.history-item-code-wrapper .CodeMirror-line{padding-left:.5rem}.history-item{position:relative;margin-bottom:.75rem;padding:.75rem;background:var(--kb-bg);border:1px solid var(--kb-key-border);transition:var(--kb-transition-slow)}.history-item.editing .history-item-actions{opacity:1}.history-item-result{margin-top:.5rem;padding:.5rem;font-family:var(--kb-font-mono);font-size:.75rem;background:var(--kb-bg-lighter);border-left:2px solid var(--kb-backlight-blue);color:var(--kb-text-muted);white-space:pre-wrap;word-break:break-word}.history-item-result.error{border-left-color:var(--kb-backlight-red);color:var(--kb-backlight-red)}.help-section{margin-bottom:1rem;background:var(--kb-bg);border-radius:8px;overflow:hidden;box-shadow:6px 6px 12px #0000004d,-6px -6px 12px #ffffff05}.help-section-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;cursor:pointer;background:var(--kb-surface);transition:var(--kb-transition);-webkit-user-select:none;user-select:none}.help-section-header:hover{background:var(--kb-bg-light)}.help-section-header:active{box-shadow:inset 3px 3px 6px #0000004d,inset -3px -3px 6px #ffffff05}.help-section-title{font-size:1rem;font-weight:600;color:var(--kb-text)}.help-expand-icon{font-size:1.5rem;color:var(--kb-backlight-blue);transition:transform .3s ease;font-weight:300}.help-section.expanded .help-expand-icon{transform:rotate(45deg)}.help-section-content{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1);background:var(--kb-bg)}.help-section.expanded .help-section-content{max-height:2000px}.help-item{padding:1rem 1.25rem;border-top:1px solid var(--kb-border);animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.help-code-wrapper{position:relative;margin-bottom:.5rem}.help-code{font-family:var(--kb-font-mono);font-size:.875rem;color:var(--kb-backlight-blue);background:var(--kb-bg-lighter);padding:.75rem 3rem .75rem .75rem;border-radius:6px;word-break:break-all;box-shadow:inset 2px 2px 4px #0000004d,inset -2px -2px 4px #ffffff05}.help-copy-btn{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:var(--kb-key-bg);border:1px solid var(--kb-key-border);color:var(--kb-text-muted);padding:.375rem .5rem;border-radius:4px;cursor:pointer;font-size:1rem;transition:var(--kb-transition);box-shadow:2px 2px 4px #0003,-1px -1px 2px #ffffff05}.help-copy-btn:hover{background:var(--kb-key-bg-hover);color:var(--kb-text)}.help-copy-btn:active{box-shadow:inset 2px 2px 4px #0000004d,inset -1px -1px 2px #ffffff05}.help-copy-btn.copied{color:var(--kb-backlight-green);border-color:var(--kb-backlight-green)}.help-desc{font-size:.875rem;color:var(--kb-text-muted);padding-left:.5rem}