@property --key-color{syntax:"";inherits:true;initial-value:#dcdce2}:root{--bg:#fff;--text-primary:#1d1d1f;--text-secondary:#6e6e73;--glass-bg:#ffffffb8;--glass-border:#0000000f;--glass-shadow:0 2px 8px #0000000a, 0 12px 40px #00000012;--accent:#007aff;--ease:cubic-bezier(.22, .9, .32, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--tilt-ease:cubic-bezier(.22, 1, .3, 1);--dur-hero:2.06s;--dur-chrome:.936s;--dur-fade:.655s;--dur-stage:1.03s;--dur-return-delay:1.7s;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,PingFang SC,Segoe UI,sans-serif}*{box-sizing:border-box}html{scrollbar-gutter:stable}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:inherit}.app-shell{min-height:100vh;transition:padding var(--dur-stage) var(--tilt-ease);flex-direction:column;justify-content:center;align-items:center;padding:32px 24px 64px;display:flex}.app-shell--preview{padding:0}.app-header{width:100%;max-width:1100px;max-height:60px;transition:max-height var(--dur-chrome) var(--tilt-ease) var(--dur-return-delay), margin-bottom var(--dur-chrome) var(--tilt-ease) var(--dur-return-delay);margin-bottom:28px;padding:4px;overflow:hidden}.app-shell--preview .app-header{pointer-events:none;max-height:0;margin-bottom:0;transition-delay:0s}.app-header__inner{opacity:1;transition:opacity var(--dur-fade) var(--ease) var(--dur-return-delay);justify-content:space-between;align-items:center;display:flex}.app-shell--preview .app-header__inner{opacity:0;transition-delay:0s}.app-header__brand{letter-spacing:-.01em;align-items:center;gap:10px;font-size:18px;font-weight:600;display:flex}.app-header__logo{font-size:22px}.app-header__badge{letter-spacing:.08em;color:var(--text-secondary);border:1px solid #78788040;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600}.app-main{flex-direction:column;align-items:center;width:100%;max-width:1100px;display:flex}.keyboard-stage{width:100%;transition:transform var(--dur-hero) var(--tilt-ease), padding var(--dur-stage) var(--tilt-ease);background:radial-gradient(85% 65% at 50% 40%,#00000006,#0000 75%);justify-content:center;padding:56px 24px 72px;display:flex}.app-shell--preview .keyboard-stage{padding:24px 24px 40px}.control-stack{width:100%;max-height:420px;transition:max-height var(--dur-chrome) var(--tilt-ease) var(--dur-return-delay), margin-top var(--dur-chrome) var(--tilt-ease) var(--dur-return-delay);flex-direction:column;justify-content:flex-end;margin-top:28px;display:flex;overflow:hidden}.app-shell--preview .control-stack{pointer-events:none;max-height:0;margin-top:0;transition-delay:0s}.control-stack__inner{opacity:1;width:100%;transition:opacity var(--dur-fade) var(--ease) var(--dur-return-delay);flex-direction:column;align-items:center;gap:18px;display:flex}.app-shell--preview .control-stack__inner{opacity:0;transition-delay:0s}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(24px)saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:18px}.mode-bar{gap:4px;padding:5px;display:flex}.mode-bar__btn{color:var(--text-secondary);transition:color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .24s var(--ease);background:0 0;border:none;border-radius:13px;padding:10px 24px;font-size:14px;font-weight:500}.mode-bar__btn:hover:not(.mode-bar__btn--active){color:var(--text-primary);background:#78788014}.mode-bar__btn:active{transform:scale(.97)}.mode-bar__btn--active{background:var(--text-primary);color:#fff;box-shadow:0 3px 10px #00000038}.selection-hint{color:var(--text-secondary);min-height:18px;transition:color .22s var(--ease);font-size:13px}.selection-hint--active{color:var(--accent);font-weight:500}.color-panel{transition:border-color .26s var(--ease);grid-template-columns:repeat(9,48px);gap:12px;padding:20px;display:grid}.color-panel--active{border-color:#007aff59;animation:2.6s ease-in-out infinite armed-breathe}@keyframes armed-breathe{0%,to{box-shadow:var(--glass-shadow), 0 0 0 3px #007aff17}50%{box-shadow:var(--glass-shadow), 0 0 0 7px #007aff29}}.color-swatch{width:48px;height:48px;transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), opacity .2s var(--ease);border:none;border-radius:13px;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 0 0 1px #00000012,inset 0 1px #ffffff52,0 2px 5px #0000001a}.color-swatch:disabled{opacity:.4;cursor:not-allowed}.color-swatch:not(:disabled):hover{transform:translateY(-4px)scale(1.1);box-shadow:inset 0 0 0 1px #00000012,inset 0 1px #fff6,0 10px 20px -4px #0000004d}.color-swatch:not(:disabled):active{transform:translateY(-1px)scale(1.02)}.color-swatch--current{box-shadow:inset 0 0 0 1px #00000012, 0 0 0 2px #fff, 0 0 0 4px var(--accent), 0 4px 12px #007aff4d}.color-swatch__check{color:#fff;text-shadow:0 1px 3px #0000008c;font-size:16px;font-weight:700}.toolbar{gap:10px;padding:10px;display:flex}.toolbar__btn{color:var(--text-primary);transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);background:#7878801a;border:none;border-radius:12px;padding:10px 20px;font-size:14px;font-weight:500}.toolbar__btn:hover:not(:disabled){background:#7878802e;transform:translateY(-1px)}.toolbar__btn:active:not(:disabled){transform:translateY(1px)}.toolbar__btn:disabled{opacity:.35;cursor:not-allowed}.toolbar__btn--primary{background:var(--accent);color:#fff;box-shadow:0 3px 10px #007aff4d}.toolbar__btn--primary:hover:not(:disabled){background:#0a84ff;box-shadow:0 7px 18px #007aff6b}.keyboard-fit{justify-content:center;width:100%;display:flex}.keyboard-box{transition:width var(--dur-hero) var(--tilt-ease), height var(--dur-hero) var(--tilt-ease);position:relative}.keyboard-tilt{transform-origin:50%;transition:transform var(--dur-hero) var(--tilt-ease);transform-style:preserve-3d;position:absolute;top:50%;left:50%}.keyboard-case{width:100%;height:100%;transform-style:preserve-3d;background:linear-gradient(158deg,#35353a 0%,#1f1f23 45%,#141416 100%);border-radius:20px;transition:transform .3s;box-shadow:inset 0 1.5px #ffffff21,inset 0 -1px #0009,0 6px #17171a,0 11px #0d0d0f,0 15px #08080a,0 22px 28px -10px #00000080}.is-floating .keyboard-case{will-change:transform;animation:board-bob 5s ease-in-out var(--dur-hero) infinite;box-shadow:inset 0 1.5px #ffffff29,inset 0 -1px #0009,0 11px #1c1c20,0 21px #131316,0 31px #08080a,0 46px 52px -18px #00000094}@keyframes board-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.keyboard-shadow{filter:blur(9px);opacity:0;width:58%;height:12%;transition:opacity var(--dur-hero) var(--tilt-ease), transform var(--dur-hero) var(--tilt-ease);background:radial-gradient(#00000057 0%,#00000029 45%,#0000 72%);border-radius:50%;position:absolute;bottom:-8%;left:52%;transform:translate(-50%)scale(.65)}.is-floating .keyboard-shadow{opacity:1;animation:shadow-bob 5s ease-in-out var(--dur-hero) infinite;transform:translate(-50%)scale(1)}@keyframes shadow-bob{0%,to{opacity:1;transform:translate(-50%)scale(1)}50%{opacity:.82;transform:translate(-50%)scale(.93)}}.keyboard-surface{-webkit-user-select:none;user-select:none;transform-style:preserve-3d;position:relative}.is-floating .keyboard-surface{pointer-events:none}.is-floating .keycap{--pop:3.5px;transform:translateZ(10px)}.keycap{--pop:1.1px;transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), opacity .3s var(--ease), filter .3s var(--ease), --key-color .38s var(--ease);animation:keycap-enter .42s var(--ease-out) backwards;animation-delay:var(--enter-delay,0s);background:0 0;border:none;padding:0;position:absolute;box-shadow:0 6px 4px -3px #0006,0 12px 18px -8px #0000007a}@keyframes keycap-enter{0%{opacity:0;transform:translateY(10px)scale(.97)}to{opacity:1;transform:none}}.keycap__wall{background:linear-gradient(180deg, color-mix(in srgb, var(--key-color) 70%, #000 30%), color-mix(in srgb, var(--key-color) 42%, #000 58%));transition:--key-color .38s var(--ease);border-radius:10px;position:absolute;inset:0;box-shadow:inset 0 -2px 3px #00000059}.keycap__rim{background:linear-gradient(180deg, color-mix(in srgb, var(--key-color) 84%, #000 16%), color-mix(in srgb, var(--key-color) 60%, #000 40%));transform:translate(var(--pop), calc(var(--pop) * -1));transition:transform .26s var(--ease-out), --key-color .38s var(--ease);border-radius:9px;position:absolute;inset:1.5px}.keycap__face{background:linear-gradient(168deg, color-mix(in srgb, var(--key-color) 72%, #fff 28%) 0%, var(--key-color) 48%, color-mix(in srgb, var(--key-color) 88%, #000 12%) 100%), radial-gradient(120% 80% at 30% 0%, #ffffff38, #fff0 60%);transform:translate(calc(var(--pop) * 2), calc(var(--pop) * -2));transition:transform .26s var(--ease-out), background .38s var(--ease);border-radius:8px;justify-content:flex-start;align-items:flex-start;padding:5px 0 0 7px;display:flex;position:absolute;inset:3px;overflow:hidden;box-shadow:inset 0 1.5px #ffffff80,inset 0 -1.5px 2px #00000029,inset 1px 0 #ffffff1f}.keycap__face:after{content:"";pointer-events:none;background:linear-gradient(90deg,#fff0 0%,#ffffff8c 50%,#fff0 100%);width:45%;height:220%;position:absolute;top:-60%;left:0;transform:translate(-220%)skew(-22deg)}.keycap:hover .keycap__face:after{transition:transform .7s var(--ease-out);transform:translate(360%)skew(-22deg)}.keycap:hover{z-index:2;transform:translateY(3px)}.keycap:hover .keycap__wall{box-shadow:inset 0 -1px 2px #0000004d}.keycap:active{transition-duration:70ms;transform:translateY(4px)}.keycap--selected,.keycap--selected:hover{box-shadow:0 11px 16px -7px #0000006b, 0 0 0 2px #fff, 0 0 0 4px var(--accent), 0 0 20px 2px #007aff66;z-index:3}.keycap--selected:hover{transform:translateY(3px)}.keycap--group-selected{z-index:2;box-shadow:0 11px 16px -7px #0000006b,0 0 0 1.5px #ffffffd9,0 0 0 3px #0000004d}.keycap--group-selected:hover{transform:translateY(3px)}.keycap--empty .keycap__wall{background:linear-gradient(#d6d6db,#b7b7bf)}.keycap--empty .keycap__rim{background:linear-gradient(#eeeef1,#d2d2d8)}.keycap--empty .keycap__face{background:linear-gradient(168deg,#fbfbfd 0%,#f0f0f3 55%,#e6e6ea 100%);box-shadow:inset 0 1px #ffffffe6,inset 0 0 0 1px #0000000a}.keycap__label{color:var(--legend,#fffffff0);text-shadow:var(--legend-shadow,0 1px 2px #00000059);pointer-events:none;z-index:1;transition:color .38s var(--ease);font-size:12px;font-weight:500;line-height:1;position:relative}.keycap--empty .keycap__label{color:#8e8e93;text-shadow:none}.drag-select-box{border:1.5px solid var(--accent);pointer-events:none;z-index:4;background:#007aff1a;border-radius:6px;position:absolute;box-shadow:0 0 0 1px #ffffff80,0 4px 16px #007aff33}.preview-exit-btn{opacity:0;pointer-events:none;border:1px solid var(--glass-border);background:var(--glass-bg);-webkit-backdrop-filter:blur(24px)saturate(180%);color:var(--text-primary);box-shadow:var(--glass-shadow);transition:transform var(--dur-fade) var(--tilt-ease), opacity var(--dur-fade) ease, box-shadow .26s var(--ease-out);border-radius:999px;padding:13px 30px;font-size:14px;font-weight:500;position:fixed;bottom:36px;left:50%;transform:translate(-50%)translateY(14px)}.preview-exit-btn--visible{opacity:1;pointer-events:auto;transition-delay:.32s;transform:translate(-50%)translateY(0)}.preview-exit-btn--visible:hover{transform:translate(-50%)translateY(-2px)scale(1.03);box-shadow:0 12px 30px #00000024}.dialog-overlay{-webkit-backdrop-filter:blur(6px);z-index:50;animation:fade-in .22s var(--ease-out);background:#0003;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.dialog-card{width:340px;animation:dialog-in .32s var(--ease-out);flex-direction:column;gap:12px;padding:24px;display:flex}@keyframes dialog-in{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:none}}.dialog-card__title{margin:0;font-size:17px;font-weight:600}.dialog-card__message{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.55}.dialog-card__actions{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}@media (width<=900px){.color-panel{grid-template-columns:repeat(6,44px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}