:root{--touchpad-primary:#6366f1;--touchpad-primary-rgb:99,102,241;--touchpad-success:#10b981;--touchpad-warning:#f59e0b;--touchpad-error:#ef4444;--touchpad-text:#1f2937;--touchpad-text-muted:#6b7280;--touchpad-text-light:#9ca3af;--touchpad-bg:#fff;--touchpad-bg-secondary:#f9fafb;--touchpad-bg-hover:#f3f4f6;--touchpad-border:#e5e7eb;--touchpad-border-light:#f3f4f6;--touchpad-canvas-bg:#fafafa;--touchpad-canvas-grid:#e5e7eb;--touchpad-touch-color:#6366f1;--touchpad-trail-color:#6366f14d;--touchpad-gap:var(--main-space-4);--touchpad-radius:var(--main-radius);--touchpad-radius-lg:var(--main-radius-lg)}._touchpad-container{gap:var(--touchpad-gap);flex-direction:column;max-width:1200px;margin:0 auto;display:flex}._touchpad-header{justify-content:space-between;align-items:center;gap:var(--main-space-4);padding:var(--main-space-3)var(--main-space-4);background:var(--touchpad-bg);border-radius:var(--touchpad-radius-lg);box-shadow:var(--main-shadow-sm);display:flex}._touchpad-stats{gap:var(--main-space-6);display:flex}._touchpad-stat{flex-direction:column;gap:.125rem;display:flex}._touchpad-stat-label{font-size:var(--main-text-xs);color:var(--touchpad-text-muted);text-transform:uppercase;letter-spacing:.025em}._touchpad-stat-value{font-size:var(--main-text-lg);color:var(--touchpad-text);font-weight:600}._touchpad-stat-value small{font-size:var(--main-text-xs);color:var(--touchpad-text-muted);margin-left:.125rem;font-weight:400}._touchpad-header-actions{gap:var(--main-space-2);display:flex}._touchpad-btn-reset,._touchpad-btn-calibrate{border-style:solid;border-width:1px;border-color:var(--touchpad-border);border-radius:var(--touchpad-radius);font-size:var(--main-text-sm);color:var(--touchpad-text-muted);cursor:pointer;background:0 0;align-items:center;gap:.375rem;padding:.5rem 1rem;font-weight:500;transition:all .15s;display:inline-flex}._touchpad-btn-reset:hover,._touchpad-btn-calibrate:hover{background:var(--touchpad-bg-hover);color:var(--touchpad-text);border-color:var(--touchpad-text-muted)}._touchpad-btn-calibrate{background:rgba(var(--touchpad-primary-rgb),.08);border-color:rgba(var(--touchpad-primary-rgb),.3);color:var(--touchpad-primary)}._touchpad-btn-calibrate:hover{background:rgba(var(--touchpad-primary-rgb),.15);border-color:var(--touchpad-primary)}._touchpad-btn-calibrate.calibrated{color:#10b981;background:#10b98114;border-color:#10b9814d}._touchpad-btn-reset svg,._touchpad-btn-calibrate svg{width:14px;height:14px}._touchpad-stat--size{padding-left:var(--main-space-4);border-left-style:solid;border-left-width:1px;border-left-color:var(--touchpad-border)}._touchpad-grid{gap:var(--touchpad-gap);grid-template-rows:auto auto 1fr;grid-template-columns:1fr 240px;display:grid}._touchpad-zone{background:var(--touchpad-bg);border-radius:var(--touchpad-radius-lg);box-shadow:var(--main-shadow-sm);overflow:hidden}._touchpad-zone--canvas{grid-row:span 3}._touchpad-zone-header{padding:var(--main-space-3)var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--touchpad-border-light);justify-content:space-between;align-items:center;display:flex}._touchpad-zone-title{font-size:var(--main-text-sm);color:var(--touchpad-text);font-weight:600}._touchpad-zone-content{padding:var(--main-space-4)}@media (max-width:900px){._touchpad-grid{grid-template-rows:auto auto auto;grid-template-columns:1fr}._touchpad-zone--canvas{grid-row:span 1;min-height:300px}}@media (max-width:768px){._touchpad-container{padding-left:1rem;padding-right:1rem}._touchpad-header{gap:var(--main-space-3);flex-direction:column}._touchpad-stats{justify-content:space-between;width:100%}._touchpad-btn-reset{justify-content:center;width:100%}}@media (max-width:480px){._touchpad-stats{gap:var(--main-space-2)}._touchpad-stat-value{font-size:var(--main-text-base)}}._touchpad-zone--canvas ._touchpad-zone-header{align-items:center;gap:var(--main-space-2);display:flex}._touchpad-zone--canvas ._touchpad-zone-title{flex:1}._touchpad-zone--canvas ._touchpad-zone-content{padding:var(--main-space-3);flex-direction:column;align-items:center;min-height:350px;display:flex;position:relative}._touchpad-expand-btn{border-style:solid;border-width:1px;border-color:var(--touchpad-border);border-radius:var(--touchpad-radius);width:28px;height:28px;color:var(--touchpad-text-muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}._touchpad-expand-btn:hover{background:var(--touchpad-bg-hover);color:var(--touchpad-text);border-color:var(--touchpad-text-muted)}._touchpad-expand-btn svg{width:16px;height:16px}._touchpad-container.fullscreen{z-index:9999;background:var(--touchpad-bg);width:100%;max-width:100%;height:100%;padding:var(--main-space-3);box-sizing:border-box;position:fixed;top:0;bottom:0;left:0;right:0;overflow:auto}._touchpad-container.fullscreen ._touchpad-grid{height:100%;display:block}._touchpad-container.fullscreen ._touchpad-zone:not(._touchpad-zone--canvas),._touchpad-container.fullscreen ._touchpad-header,._touchpad-container.fullscreen ._touchpad-calibration{display:none!important}._touchpad-container.fullscreen ._touchpad-zone--canvas{flex-direction:column;height:100%;display:flex}._touchpad-container.fullscreen ._touchpad-zone--canvas ._touchpad-zone-content{min-height:unset;flex-direction:column;flex:1;display:flex}._touchpad-container.fullscreen ._touchpad-canvas-wrapper{min-height:unset;flex:1}._touchpad-canvas-wrapper{border-style:dashed;border-width:3px;border-color:var(--touchpad-border);border-radius:var(--touchpad-radius);flex:1;width:100%;max-width:100%;min-height:280px;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}._touchpad-canvas-wrapper:before{content:"";border-radius:inherit;pointer-events:none;z-index:1;border:20px solid #0000;transition:border-color .2s;position:absolute;top:0;bottom:0;left:0;right:0}._touchpad-canvas-wrapper.edge-warning{border-color:#f59e0b;box-shadow:inset 0 0 0 2px #f59e0b33}._touchpad-canvas-wrapper.edge-warning:before{border-color:#f59e0b1a}._touchpad-canvas{background:var(--touchpad-canvas-bg);background-image:linear-gradient(var(--touchpad-canvas-grid)1px,transparent 1px),linear-gradient(90deg,var(--touchpad-canvas-grid)1px,transparent 1px);cursor:crosshair;touch-action:none;background-size:20px 20px;width:100%;height:100%;min-height:320px;display:block}._touchpad-canvas-hint{align-items:center;gap:var(--main-space-4);color:var(--touchpad-text-light);pointer-events:none;flex-direction:column;transition:opacity .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._touchpad-canvas-hint.hidden{opacity:0}._touchpad-hint-animation{width:120px;height:80px;position:relative}._touchpad-hint-cursor{background:var(--touchpad-primary);width:16px;height:16px;box-shadow:0 0 0 4px rgba(var(--touchpad-primary-rgb),.2);border-radius:50%;animation:4s ease-in-out infinite cursorMove;position:absolute}._touchpad-hint-trail{border-style:dashed;border-width:2px;border-color:rgba(var(--touchpad-primary-rgb),.3);border-radius:8px;width:100px;height:60px;animation:4s ease-in-out infinite trailPulse;position:absolute;top:8px;left:8px}@keyframes cursorMove{0%,to{top:0;left:0}10%{box-shadow:0 0 0 8px rgba(var(--touchpad-primary-rgb),.3);top:0;left:0}15%{box-shadow:0 0 0 4px rgba(var(--touchpad-primary-rgb),.2);top:0;left:0}20%{box-shadow:0 0 0 8px rgba(var(--touchpad-primary-rgb),.3);top:0;left:0}25%{top:0;left:50px}35%{top:30px;left:100px}50%{top:60px;left:50px}65%{top:30px;left:0}80%{top:0;left:50px}95%{top:0;left:0}}@keyframes trailPulse{0%,20%{opacity:0}25%,95%{opacity:1}to{opacity:0}}._touchpad-hint-text{text-align:center;flex-direction:column;align-items:center;gap:.5rem;display:flex}._touchpad-hint-main{font-size:var(--main-text-sm);color:var(--touchpad-text-muted);font-weight:500}._touchpad-hint-tip{font-size:var(--main-text-xs);color:var(--touchpad-text-light);background:rgba(var(--touchpad-primary-rgb),.08);border-radius:var(--main-radius-full);padding:.375rem .75rem}._touchpad-gesture-badge{background:rgba(var(--touchpad-primary-rgb),.1);color:var(--touchpad-primary);border-radius:var(--main-radius-full);font-size:var(--main-text-xs);text-transform:uppercase;letter-spacing:.025em;opacity:0;align-items:center;padding:.25rem .75rem;font-weight:600;transition:opacity .2s;display:inline-flex}._touchpad-gesture-badge.active{opacity:1}._touchpad-gesture-badge.tap{color:#059669;background:#10b9811a}._touchpad-gesture-badge.double-tap{color:#4f46e5;background:#6366f11a}._touchpad-gesture-badge.long-press{color:#d97706;background:#f59e0b1a}._touchpad-gesture-badge.scroll{color:#2563eb;background:#3b82f61a}._touchpad-gesture-badge.pinch{color:#7c3aed;background:#a855f71a}._touchpad-gesture-badge.swipe{color:#db2777;background:#ec48991a}@media (max-width:900px){._touchpad-zone--canvas ._touchpad-zone-content,._touchpad-canvas{min-height:280px}}._touchpad-zone--virtual{grid-area:1/2}._touchpad-zone--virtual ._touchpad-zone-content{padding:var(--main-space-4);justify-content:center;display:flex}._touchpad-virtual{flex-direction:column;gap:0;width:180px;display:flex}._touchpad-virtual-surface{background:linear-gradient(145deg,#e8eaed 0%,#d1d5db 100%);border:2px solid #c9cdd3;border-bottom:none;border-radius:12px 12px 0 0;height:120px;transition:all .15s;position:relative;overflow:hidden}._touchpad-virtual-surface:before{content:"";pointer-events:none;background:radial-gradient(circle,#6366f100 0% 100%);transition:background .2s;position:absolute;top:0;bottom:0;left:0;right:0}._touchpad-virtual-surface.active{background:linear-gradient(145deg,#dbeafe 0%,#bfdbfe 100%);border-color:#93c5fd}._touchpad-virtual-surface.active:before{background:radial-gradient(circle at var(--pointer-x,50%)var(--pointer-y,50%),#6366f126 0%,#6366f100 70%)}._touchpad-virtual-pointer{background:var(--touchpad-primary);opacity:0;pointer-events:none;border-radius:50%;width:12px;height:12px;transition:opacity .15s;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #6366f133}._touchpad-virtual-surface.active ._touchpad-virtual-pointer{opacity:1}._touchpad-virtual-buttons{grid-template-columns:1fr 1fr;gap:2px;display:grid}._touchpad-virtual-btn{padding:var(--main-space-2)var(--main-space-3);font-size:var(--main-text-xs);color:var(--touchpad-text-muted);background:linear-gradient(#f3f4f6 0%,#e5e7eb 100%);border:2px solid #c9cdd3;border-top:none;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;transition:all .1s;display:flex}._touchpad-virtual-btn--left{border-right-width:1px;border-radius:0 0 0 12px}._touchpad-virtual-btn--right{border-left-width:1px;border-radius:0 0 12px}._touchpad-virtual-btn.active{color:var(--touchpad-primary);background:linear-gradient(#dbeafe 0%,#bfdbfe 100%);border-color:#93c5fd}._touchpad-virtual-btn--left.active{color:#059669;background:linear-gradient(#d1fae5 0%,#a7f3d0 100%);border-color:#6ee7b7}._touchpad-virtual-btn--right.active{color:#d97706;background:linear-gradient(#fef3c7 0%,#fde68a 100%);border-color:#fcd34d}._touchpad-virtual-btn-count{font-size:var(--main-text-base);color:var(--touchpad-text);font-weight:700}body.dark-mode ._touchpad-virtual-surface{background:linear-gradient(145deg,#374151 0%,#1f2937 100%);border-color:#4b5563}body.dark-mode ._touchpad-virtual-surface.active{background:linear-gradient(145deg,#312e81 0%,#1e1b4b 100%);border-color:#6366f1}body.dark-mode ._touchpad-virtual-btn{background:linear-gradient(#374151 0%,#1f2937 100%);border-color:#4b5563}body.dark-mode ._touchpad-virtual-btn.active{background:linear-gradient(#312e81 0%,#1e1b4b 100%);border-color:#6366f1}body.dark-mode ._touchpad-virtual-btn--left.active{background:linear-gradient(#064e3b 0%,#022c22 100%);border-color:#10b981}body.dark-mode ._touchpad-virtual-btn--right.active{background:linear-gradient(#78350f 0%,#451a03 100%);border-color:#f59e0b}@media (max-width:900px){._touchpad-zone--virtual{grid-area:auto/1}._touchpad-virtual{width:200px}}._touchpad-gesture-grid{gap:var(--main-space-2);grid-template-columns:repeat(2,1fr);display:grid}._touchpad-gesture-item{padding:var(--main-space-3);background:var(--touchpad-bg-secondary);border-radius:var(--touchpad-radius);border:2px solid #0000;flex-direction:column;align-items:center;gap:.375rem;transition:all .2s;display:flex}._touchpad-gesture-item.active{background:rgba(var(--touchpad-primary-rgb),.08);border-color:var(--touchpad-primary)}._touchpad-gesture-item[data-gesture=tap].active{background:#10b98114;border-color:#10b981}._touchpad-gesture-item[data-gesture=double-tap].active{background:#6366f114;border-color:#6366f1}._touchpad-gesture-item[data-gesture=long-press].active{background:#f59e0b14;border-color:#f59e0b}._touchpad-gesture-item[data-gesture=scroll].active{background:#3b82f614;border-color:#3b82f6}._touchpad-gesture-item[data-gesture=pinch].active{background:#a855f714;border-color:#a855f7}._touchpad-gesture-item[data-gesture=swipe].active{background:#ec489914;border-color:#ec4899}._touchpad-gesture-icon{background:var(--touchpad-bg);width:36px;height:36px;color:var(--touchpad-text-muted);border-radius:50%;justify-content:center;align-items:center;transition:color .2s;display:flex}._touchpad-gesture-item.active ._touchpad-gesture-icon{color:var(--touchpad-primary)}._touchpad-gesture-item[data-gesture=tap].active ._touchpad-gesture-icon{color:#10b981}._touchpad-gesture-item[data-gesture=double-tap].active ._touchpad-gesture-icon{color:#6366f1}._touchpad-gesture-item[data-gesture=long-press].active ._touchpad-gesture-icon{color:#f59e0b}._touchpad-gesture-item[data-gesture=scroll].active ._touchpad-gesture-icon{color:#3b82f6}._touchpad-gesture-item[data-gesture=pinch].active ._touchpad-gesture-icon{color:#a855f7}._touchpad-gesture-item[data-gesture=swipe].active ._touchpad-gesture-icon{color:#ec4899}._touchpad-gesture-icon svg{width:20px;height:20px}._touchpad-gesture-name{font-size:var(--main-text-xs);color:var(--touchpad-text-muted);text-align:center;font-weight:500}._touchpad-gesture-count{font-size:var(--main-text-lg);color:var(--touchpad-text);font-weight:700;line-height:1}@media (max-width:900px){._touchpad-gesture-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:480px){._touchpad-gesture-grid{grid-template-columns:repeat(2,1fr)}._touchpad-gesture-item{padding:var(--main-space-2)}._touchpad-gesture-icon{width:30px;height:30px}._touchpad-gesture-icon svg{width:16px;height:16px}}._touchpad-zone--log ._touchpad-zone-content{padding:0}._touchpad-btn-clear{border-radius:var(--touchpad-radius);font-size:var(--main-text-xs);color:var(--touchpad-text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:.25rem;padding:.25rem .5rem;font-weight:500;transition:all .15s;display:inline-flex}._touchpad-btn-clear:hover{background:var(--touchpad-bg-hover);color:var(--touchpad-error)}._touchpad-btn-clear svg{width:12px;height:12px}._touchpad-log{height:200px;font-family:var(--main-font-mono);font-size:var(--main-text-xs);overflow-y:auto}._touchpad-log-empty{justify-content:center;align-items:center;gap:var(--main-space-2);height:100%;color:var(--touchpad-text-light);flex-direction:column;display:flex}._touchpad-log-empty svg{opacity:.4;width:24px;height:24px}._touchpad-log-empty span{font-size:var(--main-text-sm);font-family:var(--main-font)}._touchpad-log-entry{align-items:flex-start;gap:var(--main-space-2);padding:.375rem var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--touchpad-border-light);animation:.2s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}._touchpad-log-entry:last-child{border-bottom:none}._touchpad-log-time{color:var(--touchpad-text-light);flex-shrink:0}._touchpad-log-type{flex-shrink:0;min-width:70px;font-weight:600}._touchpad-log-type.tap{color:#10b981}._touchpad-log-type.double-tap{color:#6366f1}._touchpad-log-type.long-press{color:#f59e0b}._touchpad-log-type.scroll{color:#3b82f6}._touchpad-log-type.pinch{color:#a855f7}._touchpad-log-type.swipe{color:#ec4899}._touchpad-log-type.move{color:#6b7280}._touchpad-log-type.touch{color:#14b8a6}._touchpad-log-type.left-click{color:#10b981}._touchpad-log-type.right-click{color:#f59e0b}._touchpad-log-detail{color:var(--touchpad-text-muted);word-break:break-word}@media (max-width:900px){._touchpad-log{height:150px}}._touchpad-calibration{gap:var(--main-space-4);padding:var(--main-space-4);margin-bottom:var(--main-space-3);background:var(--touchpad-bg);border-style:solid;border-width:1px;border-color:var(--touchpad-border);border-radius:var(--touchpad-radius);flex-direction:column;display:none}._touchpad-calibration.active{display:flex}._touchpad-calibration-header{align-items:center;gap:var(--main-space-4);flex-wrap:wrap;display:flex}._touchpad-calibration-step-info{align-items:center;gap:var(--main-space-2);display:flex}._touchpad-calibration-step-num{background:rgba(var(--touchpad-primary-rgb),.1);width:36px;height:36px;color:var(--touchpad-primary);font-size:var(--main-text-xs);border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:inline-flex}._touchpad-calibration-title{font-size:var(--main-text-base);color:var(--touchpad-text);margin:0;font-weight:600}._touchpad-calibration-desc{font-size:var(--main-text-sm);color:var(--touchpad-text-muted);flex:1;margin:0}._touchpad-calibration-stats{align-items:center;gap:var(--main-space-3);display:flex}._touchpad-calibration-value{font-size:var(--main-text-xl);color:var(--touchpad-primary);font-weight:700;font-family:var(--main-font-mono);text-align:right;min-width:80px}._touchpad-calibration-cancel,._touchpad-calibration-default{border-style:solid;border-width:1px;border-color:var(--touchpad-border);border-radius:var(--touchpad-radius);color:var(--touchpad-text-muted);font-size:var(--main-text-xs);cursor:pointer;background:0 0;padding:.375rem .75rem;transition:all .15s}._touchpad-calibration-cancel:hover,._touchpad-calibration-default:hover{background:var(--touchpad-bg-hover);border-color:var(--touchpad-text-muted);color:var(--touchpad-text)}._touchpad-calibration-track{background:var(--touchpad-canvas-bg);border-radius:var(--touchpad-radius);touch-action:none;cursor:not-allowed;position:relative;overflow:hidden}._touchpad-calibration-safe-zone{padding:60px 80px}._touchpad-calibration-line{background:rgba(var(--touchpad-primary-rgb),.05);border-style:dashed;border-width:2px;border-color:rgba(var(--touchpad-primary-rgb),.2);border-radius:var(--touchpad-radius);align-items:center;height:60px;display:flex;position:relative}._touchpad-calibration.vertical ._touchpad-calibration-safe-zone{padding:80px 60px}._touchpad-calibration.vertical ._touchpad-calibration-line{flex-direction:column;width:60px;height:350px;margin:0 auto}._touchpad-calibration-point{z-index:2;flex-direction:column;align-items:center;gap:.25rem;display:flex;position:absolute}._touchpad-calibration-point:before{content:"";border-style:solid;border-width:3px;border-radius:50%;width:20px;height:20px;transition:all .2s}._touchpad-calibration-point span{text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;font-size:9px;font-weight:700}._touchpad-calibration-point--start{top:50%;left:-10px;transform:translateY(-50%)}._touchpad-calibration-point--start:before{background:#10b981;border-color:#10b981;box-shadow:0 0 0 4px #10b98133}._touchpad-calibration-point--start span{color:#10b981}._touchpad-calibration-point--start.waiting{cursor:grab}._touchpad-calibration-point--start.waiting:hover:before{transform:scale(1.2);box-shadow:0 0 0 8px #10b9814d}._touchpad-calibration-point--end{top:50%;right:-10px;transform:translateY(-50%)}._touchpad-calibration-point--end:before{border-color:var(--touchpad-text-muted);background:0 0}._touchpad-calibration-point--end span{color:var(--touchpad-text-muted)}._touchpad-calibration.vertical ._touchpad-calibration-point--start{top:-10px;left:50%;transform:translate(-50%)}._touchpad-calibration.vertical ._touchpad-calibration-point--end{top:auto;bottom:-10px;left:50%;transform:translate(-50%)}._touchpad-calibration-progress-line{border-radius:inherit;background:linear-gradient(90deg,#10b9814d,#6366f14d);width:0;height:100%;transition:width 50ms;position:absolute;top:0;left:0}._touchpad-calibration.vertical ._touchpad-calibration-progress-line{background:linear-gradient(#10b9814d,#6366f14d);width:100%;height:0}._touchpad-calibration-cursor{background:var(--touchpad-primary);width:16px;height:16px;box-shadow:0 0 0 4px rgba(var(--touchpad-primary-rgb),.3);opacity:0;z-index:3;border-radius:50%;transition:opacity .15s;position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}._touchpad-calibration.dragging ._touchpad-calibration-cursor{opacity:1}._touchpad-calibration.dragging ._touchpad-calibration-track{cursor:grabbing}._touchpad-calibration.vertical ._touchpad-calibration-cursor{top:0;left:50%;transform:translate(-50%,-50%)}._touchpad-calibration-point--start.waiting:before{animation:1s ease-in-out infinite pulseStart}@keyframes pulseStart{0%,to{box-shadow:0 0 0 4px #10b98133}50%{box-shadow:0 0 0 8px #10b9814d}}._touchpad-calibration.dragging ._touchpad-calibration-point--start:before{animation:none;box-shadow:0 0 0 4px #10b98133}._touchpad-calibration.completed ._touchpad-calibration-point--end:before{background:var(--touchpad-primary);border-color:var(--touchpad-primary);box-shadow:0 0 0 4px rgba(var(--touchpad-primary-rgb),.2)}._touchpad-calibration.completed ._touchpad-calibration-point--end span{color:var(--touchpad-primary)}@media (max-width:600px){._touchpad-calibration-header{flex-direction:column;align-items:flex-start}._touchpad-calibration-safe-zone{padding:40px 50px}}