:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#4a90d9,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#ffffff73;font-size:.95rem;margin-top:.25rem}.main-content{display:flex;gap:2rem;max-width:1200px;width:100%;align-items:flex-start}@media(max-width:900px){.main-content{flex-direction:column;align-items:center}}.keyboard-area{flex:1;display:flex;flex-direction:column;align-items:center;overflow-x:auto;padding-bottom:1rem}.keyboard-case{border-radius:14px;padding:16px;box-shadow:0 8px 32px #0009,inset 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.06)}.keyboard-plate{display:flex;flex-direction:column;gap:4px}.key-row{display:flex;gap:4px}.key{height:44px;border-radius:6px;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 2px #0006,inset 0 1px #ffffff14;position:relative;flex-shrink:0}.key:hover{transform:translateY(-1px);box-shadow:0 3px #0006,inset 0 1px #ffffff1f}.key:active{transform:translateY(1px);box-shadow:0 1px #0006,inset 0 1px #ffffff0f}.key-paintable{cursor:crosshair}.key-paintable:hover{outline:2px solid rgba(74,144,217,.7);outline-offset:-2px}.key-label{font-size:.7rem;font-weight:500;letter-spacing:.02em;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px 2px rgba(0,0,0,.5)}.switch-indicator{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.5rem 1rem;background:#ffffff0a;border-radius:8px;font-size:.85rem;color:#fff9}.switch-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.switch-info-name{font-weight:500;color:#ffffffd9}.switch-type{color:#fff6;font-size:.75rem}.controls{width:320px;flex-shrink:0;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden}.tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.08)}.tab{flex:1;padding:.75rem;background:none;border:none;color:#ffffff73;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent}.tab:hover{color:#ffffffb3;background:#ffffff08}.tab-active{color:#4a90d9;border-bottom-color:#4a90d9}.panel{padding:1rem;max-height:70vh;overflow-y:auto}.panel h3{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#ffffff73;margin-bottom:.75rem;margin-top:1.25rem}.panel h3:first-child{margin-top:0}.presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.preset-btn{background:none;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.5rem;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:.35rem}.preset-btn:hover{border-color:#fff3;background:#ffffff0a}.preset-preview{width:100%;aspect-ratio:1.4;border-radius:4px;overflow:hidden}.preset-case{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:3px;padding:4px}.preset-key,.preset-accent{width:14px;height:14px;border-radius:3px}.preset-name{font-size:.65rem;color:#ffffff8c}.color-controls{display:flex;flex-direction:column;gap:.5rem}.color-row{display:flex;align-items:center;gap:.75rem;padding:.4rem .6rem;border-radius:6px;cursor:pointer;transition:background .15s}.color-row:hover{background:#ffffff0a}.color-row span:first-child{flex:1;font-size:.85rem;color:#ffffffb3}.color-row input[type=color]{width:32px;height:32px;border:2px solid rgba(255,255,255,.12);border-radius:6px;cursor:pointer;background:none;padding:2px}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}.color-hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:#ffffff59;width:64px}.hint{font-size:.8rem;color:#fff6;margin-bottom:.75rem;line-height:1.5}.paint-actions{display:flex;gap:.5rem}.btn{flex:1;padding:.6rem 1rem;border-radius:6px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#fffc;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.btn:hover{background:#ffffff1a;border-color:#fff3}.btn-active{background:#4a90d933;border-color:#4a90d9;color:#4a90d9}.btn-active:hover{background:#4a90d94d}.btn-secondary{background:#ffffff08;color:#ffffff80}.layout-options{display:flex;flex-direction:column;gap:.5rem}.layout-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:#ffffffb3;font-size:.85rem;cursor:pointer;transition:all .15s}.layout-btn:hover{border-color:#ffffff26;background:#ffffff0f}.layout-active{border-color:#4a90d9;background:#4a90d91a;color:#4a90d9}.layout-icon{width:60px;height:20px;background:#ffffff0f;border-radius:3px;display:flex;align-items:center;justify-content:center;padding:3px}.layout-block{height:100%;background:#fff3;border-radius:2px}.switch-list{display:flex;flex-direction:column;gap:.35rem}.switch-btn{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#ffffff05;cursor:pointer;transition:all .15s;text-align:left}.switch-btn:hover{border-color:#ffffff1f;background:#ffffff0d}.switch-active{border-color:#4a90d9;background:#4a90d914}.switch-color{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}.switch-name{font-size:.85rem;color:#fffc;font-weight:500}.switch-type-label{font-size:.7rem;color:#ffffff59}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.panel::-webkit-scrollbar-thumb:hover{background:#fff3}