:root{--bg: #1a1a1e;--fg: #d4d2cc;--accent: #8b8bb5;--error: #c17a7a;--success: #7aaa7a;--muted: #6a6a64;--dim: #3a3a3e;--mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,-apple-system,sans-serif}#app{max-width:640px;margin:0 auto;padding:3rem 2rem 6rem}.connect{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;gap:.5rem}.connect h1{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}.connect p{color:var(--muted);font-size:.85rem}.connect .status{color:var(--muted);font-size:.8rem;margin-top:.5rem}.connect button.primary{margin-top:1.5rem;background:none;border:1px solid var(--dim);color:var(--fg);padding:.6rem 2rem;border-radius:4px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:border-color .15s}.connect button.primary:hover{border-color:var(--accent)}.connect button.primary:disabled{opacity:.4;cursor:not-allowed}.connect .browse{background:none;border:none;color:var(--muted);font-size:.75rem;cursor:pointer;font-family:inherit;margin-top:1rem;letter-spacing:.03em}.connect .browse:hover{color:var(--accent)}.header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3rem;padding-bottom:1rem;border-bottom:1px solid var(--dim)}.header h1{font-size:.9rem;font-weight:400;color:var(--fg)}.header .meta{font-size:.75rem;color:var(--muted);font-family:var(--mono)}.demo-tag{color:var(--error);font-size:.65rem;letter-spacing:.08em;margin-left:.5rem}.section{margin-bottom:2rem}.section-label{font-size:.65rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}.device-image{display:flex;justify-content:center;margin-bottom:2rem;position:relative}.device-image-inner{position:relative;display:inline-block}.device-image img{max-height:320px;width:auto;user-select:none;pointer-events:none;opacity:.85}.hotspot{position:absolute;width:18px;height:18px;border-radius:50%;background:none;border:1.5px solid var(--accent);cursor:pointer;transform:translate(-50%,-50%);transition:all .15s;padding:0;opacity:.6}.hotspot:hover{opacity:1;background:#8b8bb526;transform:translate(-50%,-50%) scale(1.3)}.hotspot.active{opacity:1;background:var(--accent);border-color:var(--accent)}.dpi-value{font-size:3rem;font-weight:300;font-family:var(--mono);text-align:center;line-height:1;margin-bottom:1.5rem;color:var(--fg)}.dpi-controls{display:flex;align-items:center;gap:.75rem}.dpi-controls input[type=range]{flex:1;accent-color:var(--accent);height:2px}.dpi-controls input[type=number]{background:transparent;border:none;border-bottom:1px solid var(--dim);color:var(--fg);font-family:var(--mono);font-size:.85rem;width:4rem;text-align:center;padding:.3rem 0;outline:none}.dpi-controls input[type=number]:focus{border-color:var(--accent)}.dpi-presets{display:flex;justify-content:center;gap:.25rem;margin-top:1rem}.dpi-presets button{background:none;border:none;color:var(--muted);font-size:.7rem;font-family:var(--mono);cursor:pointer;padding:.3rem .6rem;letter-spacing:.02em}.dpi-presets button:hover{color:var(--fg)}.dpi-presets button.active{color:var(--accent)}.row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.row-label{color:var(--muted);font-size:.8rem}.row-value{font-family:var(--mono);font-size:.8rem}.toggle{display:inline-flex;gap:0}.toggle button{background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;padding:.3rem .8rem;font-family:inherit;transition:color .15s}.toggle button:hover{color:var(--fg);background:none}.toggle button.active{color:var(--accent);background:none}.toggle button:disabled{opacity:.3;cursor:not-allowed;background:none}.btn-sm,button.btn-sm{background:none;border:none;color:var(--muted);font-size:.7rem;cursor:pointer;font-family:inherit;padding:.2rem .6rem;transition:color .15s}.btn-sm:hover{color:var(--fg);background:none}.btn-sm.active{color:var(--accent)}.button-item{display:flex;align-items:center;gap:.75rem;padding:.35rem 0;font-size:.8rem}.button-item .remap-select{margin-left:auto}.button-item .cid{font-family:var(--mono);color:var(--dim);font-size:.7rem;width:3.5rem}.button-item .name{color:var(--fg)}.button-item .tag{color:var(--muted);font-size:.65rem;letter-spacing:.03em;margin-left:auto}.button-item .tag.active{color:var(--accent)}.more-toggle,button.more-toggle{background:none!important;border:none!important;color:var(--muted);font-size:.65rem;cursor:pointer;font-family:var(--mono);padding:.15rem .4rem;letter-spacing:.03em}.more-toggle:hover,button.more-toggle:hover{color:var(--fg);background:none!important}.remap-select{background:var(--bg);border:1px solid var(--dim);color:var(--fg);font-family:inherit;font-size:.75rem;padding:.2rem .4rem;border-radius:3px;margin-left:auto;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none}.remap-select:focus{border-color:var(--accent)}.remap-select option{background:var(--bg);color:var(--fg)}.fw-item{display:flex;gap:.5rem;padding:.2rem 0;font-size:.75rem;font-family:var(--mono)}.fw-item .fw-name{color:var(--accent);width:2.5rem}.fw-item .fw-type{color:var(--muted);width:5rem}.feature-item{display:inline-block;font-size:.65rem;font-family:var(--mono);color:var(--muted);padding:.15rem 0;margin-right:1rem}.feature-item .fid{color:var(--dim)}.actions{display:flex;gap:1rem;padding-top:.5rem}.actions button{background:none;border:none;color:var(--muted);font-size:.75rem;cursor:pointer;font-family:inherit;letter-spacing:.03em;padding:0}.actions button:hover{color:var(--accent)}.demo-picker{padding:2rem 0}.demo-picker h2{font-size:1rem;font-weight:400;margin-bottom:1.5rem}.demo-group-label{font-size:.6rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin:1.5rem 0 .5rem}.demo-grid{display:flex;flex-wrap:wrap;gap:.25rem}.demo-grid button{background:none;border:none;color:var(--muted);font-size:.75rem;cursor:pointer;font-family:inherit;padding:.3rem .6rem}.demo-grid button:hover{color:var(--fg)}#debug-log{position:fixed;bottom:0;left:0;right:0;max-height:120px;overflow-y:auto;background:#111114;border-top:1px solid var(--dim);font-family:var(--mono);font-size:.6rem;padding:.4rem .8rem;color:var(--dim);z-index:9999}.config-hint{color:var(--muted);font-size:.7rem;margin-bottom:1rem}.config-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0}.config-label{font-size:.8rem;color:var(--fg);min-width:7rem}.config-input{background:transparent;border:none;border-bottom:1px solid var(--dim);color:var(--fg);font-family:var(--mono);font-size:.75rem;padding:.25rem .3rem;outline:none;flex:1;min-width:6rem}.config-input:focus{border-color:var(--accent)}.config-input::placeholder{color:var(--dim)}.config-gesture{padding-left:7.5rem;margin-bottom:.5rem}.config-gesture-row{display:flex;align-items:center;gap:.5rem;padding:.15rem 0}.config-dir{font-size:.65rem;color:var(--muted);font-family:var(--mono);width:3rem;text-align:right}@media(max-width:480px){#app{padding:2rem 1rem 5rem}.dpi-value{font-size:2rem}.device-image img{max-height:240px}}