@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-gradient-start: #e8ecf1;--bg-gradient-end: #dce1e8;--text-primary: #1a1a1a;--text-secondary: #6b7280;--frame-bg: #2a2a2e;--frame-border: #3a3a40;--key-alpha-bg: #f0f0f2;--key-alpha-text: #2a2a2e;--key-alpha-front: #d4d4d8;--key-alpha-hover: #f8f8fa;--key-mod-bg: #4a4a52;--key-mod-text: #c8c8d0;--key-mod-front: #35353b;--key-mod-hover: #56565e;--key-fn-bg: #e0e0e4;--key-fn-text: #3a3a42;--key-fn-front: #c8c8cc;--key-fn-hover: #eaeaee;--key-accent-bg: #ff7832;--key-accent-text: #fff;--key-accent-front: #d9621e;--key-accent-hover: #ff8f52;--key-space-bg: #e8e8ec;--key-space-front: #ccccd0;--key-space-hover: #f2f2f6;--controls-bg: rgba(255, 255, 255, .65);--controls-border: rgba(0, 0, 0, .1);--switch-btn-bg: rgba(0, 0, 0, .04);--switch-btn-hover: rgba(0, 0, 0, .08);--slider-track: rgba(0, 0, 0, .12);--glow-rgb: 255, 120, 50}[data-theme=dark]{--bg-gradient-start: #0f0f13;--bg-gradient-end: #1a1a22;--text-primary: #e8e8ec;--text-secondary: #8888a0;--frame-bg: #18181c;--frame-border: #2a2a32;--key-alpha-bg: #3a3a42;--key-alpha-text: #e8e8f0;--key-alpha-front: #28282e;--key-alpha-hover: #44444c;--key-mod-bg: #252528;--key-mod-text: #a0a0b0;--key-mod-front: #1a1a1e;--key-mod-hover: #30303a;--key-fn-bg: #32323a;--key-fn-text: #c0c0d0;--key-fn-front: #24242a;--key-fn-hover: #3c3c44;--key-accent-bg: #ff6b20;--key-accent-text: #fff;--key-accent-front: #cc5010;--key-accent-hover: #ff8548;--key-space-bg: #32323a;--key-space-front: #24242a;--key-space-hover: #3c3c44;--controls-bg: rgba(30, 30, 40, .75);--controls-border: rgba(255, 255, 255, .08);--switch-btn-bg: rgba(255, 255, 255, .06);--switch-btn-hover: rgba(255, 255, 255, .12);--slider-track: rgba(255, 255, 255, .15);--glow-rgb: 255, 107, 32}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(160deg,var(--bg-gradient-start),var(--bg-gradient-end));color:var(--text-primary);min-height:100vh;overflow:hidden;transition:background .5s ease}#root{min-height:100vh;display:flex;flex-direction:column}.key{--unit: 3.2rem;--key-gap: 3px;--front-height: 5px;--press-depth: 3px;position:relative;width:calc(var(--key-width) * var(--unit) + (var(--key-width) - 1) * var(--key-gap));height:var(--unit);border:none;outline:none;cursor:pointer;background:transparent;padding:0;font-family:Inter,-apple-system,sans-serif;transition:transform .06s ease-out;transform:translateY(0);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.key:active,.key--pressed{transform:translateY(var(--press-depth))}.key__top{position:absolute;left:0;right:0;top:0;bottom:var(--front-height);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:3px 5px;box-sizing:border-box;transition:background .15s,box-shadow .06s;z-index:2}.key__front{position:absolute;left:0;right:0;bottom:0;height:var(--front-height);border-radius:0 0 6px 6px;z-index:1;transition:background .15s}.key--pressed .key__front,.key:active .key__front{height:calc(var(--front-height) - var(--press-depth))}.key__label{font-size:.72rem;font-weight:500;letter-spacing:.02em;text-transform:lowercase;line-height:1}.key__label-main{font-size:.65rem;font-weight:400;line-height:1;opacity:.85}.key__label-sub{font-size:.78rem;font-weight:600;line-height:1.1}.key--alpha .key__top{background:var(--key-alpha-bg);color:var(--key-alpha-text);box-shadow:0 1px 2px #00000026,inset 0 1px #ffffff80}.key--alpha .key__front{background:var(--key-alpha-front)}.key--alpha:hover .key__top{background:var(--key-alpha-hover);box-shadow:0 1px 4px #0003,inset 0 1px #ffffff80}.key--modifier .key__top{background:var(--key-mod-bg);color:var(--key-mod-text);box-shadow:0 1px 2px #00000040,inset 0 1px #ffffff14}.key--modifier .key__front{background:var(--key-mod-front)}.key--modifier:hover .key__top{background:var(--key-mod-hover)}.key--function .key__top{background:var(--key-fn-bg);color:var(--key-fn-text);box-shadow:0 1px 2px #00000026,inset 0 1px #ffffff4d}.key--function .key__front{background:var(--key-fn-front)}.key--function:hover .key__top{background:var(--key-fn-hover)}.key--accent .key__top{background:var(--key-accent-bg);color:var(--key-accent-text);box-shadow:0 1px 3px #ff783259,inset 0 1px #ffffff40}.key--accent .key__front{background:var(--key-accent-front)}.key--accent:hover .key__top{background:var(--key-accent-hover);box-shadow:0 2px 8px #ff783280,inset 0 1px #ffffff40}.key--space .key__top{background:var(--key-space-bg);color:var(--key-alpha-text);box-shadow:0 1px 3px #00000026,inset 0 1px #fff6}.key--space .key__front{background:var(--key-space-front)}.key--space:hover .key__top{background:var(--key-space-hover)}.key--pressed .key__top,.key:active .key__top{box-shadow:0 0 8px rgba(var(--glow-rgb),.5),inset 0 1px #ffffff1a!important}.keyboard{display:flex;justify-content:center;align-items:center;perspective:800px}.keyboard__frame{background:var(--frame-bg);border:2px solid var(--frame-border);border-radius:16px;padding:16px 14px;display:flex;flex-direction:column;gap:3px;box-shadow:0 20px 60px #00000059,0 4px 15px #0003,inset 0 1px #ffffff0f;position:relative;transition:background .4s,border-color .4s}.keyboard__frame:before{content:"";position:absolute;inset:2px;border-radius:14px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 30%);z-index:0}.keyboard__row{display:flex;gap:3px;position:relative;z-index:1}.controls{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;padding:16px 28px;border-radius:16px;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--controls-border);box-shadow:0 4px 20px #0000001a;max-width:600px;margin:0 auto;transition:background .4s,border-color .4s}.controls__group{display:flex;flex-direction:column;gap:8px;align-items:center}.controls__label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);transition:color .4s}.controls__switches{display:flex;gap:6px}.controls__switch-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid var(--controls-border);background:var(--switch-btn-bg);color:var(--text-primary);font-size:.72rem;font-weight:500;font-family:Inter,sans-serif;cursor:pointer;transition:all .2s}.controls__switch-btn:hover{background:var(--switch-btn-hover);border-color:var(--key-accent-bg)}.controls__switch-btn--active{background:var(--key-accent-bg);color:#fff;border-color:var(--key-accent-bg);box-shadow:0 2px 8px #ff783266}.controls__switch-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}.controls__switch-btn--active .controls__switch-dot{opacity:1;box-shadow:0 0 4px currentColor}.controls__slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--slider-track);outline:none;transition:background .3s}.controls__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--key-accent-bg);cursor:pointer;box-shadow:0 1px 4px #0000004d;transition:transform .15s}.controls__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.controls__theme-toggle{display:flex;gap:4px;background:var(--switch-btn-bg);border-radius:8px;padding:2px}.controls__theme-btn{padding:5px 10px;border:none;border-radius:6px;background:transparent;font-size:1rem;cursor:pointer;transition:all .2s}.controls__theme-btn--active{background:var(--controls-bg);box-shadow:0 1px 4px #00000026}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px;gap:32px;position:relative}.app__header{text-align:center;animation:fadeInDown .6s ease-out}.app__title{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);transition:color .4s}.app__subtitle{font-size:.75rem;color:var(--text-secondary);margin-top:4px;font-weight:400;letter-spacing:.04em;transition:color .4s}.app__keyboard-wrapper{animation:floatIn .8s ease-out}.app__footer{font-size:.72rem;color:var(--text-secondary);text-align:center;transition:color .4s}.app__footer a{color:var(--key-accent-bg);text-decoration:none;font-weight:500;transition:color .3s}.app__footer a:hover{text-decoration:underline}.app__hint{font-size:.68rem;color:var(--text-secondary);opacity:.6;text-align:center;animation:pulse 2s ease-in-out infinite}.app__bg-glow{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(var(--glow-rgb),.08) 0%,transparent 70%);pointer-events:none;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);transition:background .5s}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{0%{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:.7}}@media(max-width:950px){.app__keyboard-wrapper{transform:scale(.85);transform-origin:center}}@media(max-width:750px){.app__keyboard-wrapper{transform:scale(.65);transform-origin:center}.app{gap:16px}}@media(max-width:500px){.app__keyboard-wrapper{transform:scale(.45);transform-origin:center}}