:root{--touch-tester-bg:#0f172a;--touch-tester-bg-secondary:#1e293b;--touch-tester-color-1:#3b82f6;--touch-tester-color-2:#10b981;--touch-tester-color-3:#f59e0b;--touch-tester-color-4:#ef4444;--touch-tester-color-5:#8b5cf6;--touch-tester-color-6:#ec4899;--touch-tester-color-7:#06b6d4;--touch-tester-color-8:#84cc16;--touch-tester-color-9:#f97316;--touch-tester-color-10:#14b8a6;--touch-tester-text:#ffffffe6;--touch-tester-text-muted:#ffffff80;--touch-tester-border:#ffffff1a;--touch-tester-control-bg:#1e293be6;--touch-tester-control-hover:#334155e6;--touch-tester-grid-untouched:#ffffff0d;--touch-tester-grid-touched:#22c55e;--touch-tester-grid-border:#ffffff14;--touch-tester-point-size:60px;--touch-tester-trail-width:4px;--touch-tester-control-radius:12px}._touch-tester-wrapper{width:100%;max-width:900px;min-height:400px;position:relative}._touch-tester-start{min-height:400px;padding:var(--main-space-6);background:var(--touch-tester-bg);border-radius:var(--main-radius-lg);justify-content:center;align-items:center;display:flex}._touch-tester-start-inner{align-items:center;gap:var(--main-space-6);text-align:center;flex-direction:column;max-width:400px;display:flex}._touch-tester-start-header{align-items:center;gap:var(--main-space-3);flex-direction:column;display:flex}._touch-tester-start-icon{width:80px;height:80px;color:var(--touch-tester-color-1);background:#3b82f626;border-radius:50%;justify-content:center;align-items:center;display:flex}._touch-tester-start-icon svg{width:40px;height:40px}._touch-tester-start-title{color:var(--touch-tester-text);margin:0;font-size:1.5rem;font-weight:700}._touch-tester-start-desc{font-size:var(--main-text-sm);color:var(--touch-tester-text-muted);margin:0;line-height:1.5}._touch-tester-start-features{gap:var(--main-space-3);flex-direction:column;width:100%;display:flex}._touch-tester-feature{align-items:center;gap:var(--main-space-3);padding:var(--main-space-3)var(--main-space-4);background:var(--touch-tester-bg-secondary);border-radius:var(--main-radius-md);text-align:left;display:flex}._touch-tester-feature-icon{color:var(--touch-tester-color-1);flex-shrink:0;justify-content:center;align-items:center;display:flex}._touch-tester-feature-icon svg{width:20px;height:20px}._touch-tester-feature-text{font-size:var(--main-text-sm);color:var(--touch-tester-text)}._touch-tester-start-btn{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-3)var(--main-space-6);background:var(--touch-tester-color-1);border-radius:var(--main-radius-md);color:#fff;font-size:var(--main-text-base);cursor:pointer;border:none;font-weight:600;transition:opacity .2s;display:inline-flex}._touch-tester-start-btn:hover{opacity:.9}._touch-tester-start-btn svg{width:18px;height:18px}._touch-tester-start-hint{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-xs);color:var(--touch-tester-text-muted);display:flex}._touch-tester-start-hint svg{width:14px;height:14px}._touch-tester-container{background:var(--touch-tester-bg);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:9999;width:100%;height:100%;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}._touch-tester-header{z-index:10;padding:var(--main-space-3)var(--main-space-4);pointer-events:none;background:linear-gradient(#0f172ae6,#0000);transition:opacity .3s;position:absolute;top:0;left:0;right:0}._touch-tester-header.hidden{opacity:0}._touch-tester-stats{justify-content:center;gap:var(--main-space-6);display:flex}._touch-tester-stat{flex-direction:column;align-items:center;gap:.125rem;display:flex}._touch-tester-stat-value{color:var(--touch-tester-text);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}._touch-tester-stat-label{font-size:var(--main-text-xs);color:var(--touch-tester-text-muted);text-transform:uppercase;letter-spacing:.05em}._touch-tester-stat--highlight ._touch-tester-stat-value{color:var(--touch-tester-color-1)}._touch-tester-stat--progress{display:none}._touch-tester-container.grid-mode ._touch-tester-stat--progress{display:flex}._touch-tester-stat--progress ._touch-tester-stat-value{color:var(--touch-tester-grid-touched)}._touch-tester-canvas-area{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}._touch-tester-active-counter{opacity:0;pointer-events:none;z-index:5;flex-direction:column;align-items:center;gap:.25rem;transition:opacity .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._touch-tester-active-counter.visible{opacity:1}._touch-tester-active-count{color:var(--touch-tester-text);text-shadow:0 0 40px #3b82f680;font-size:5rem;font-weight:800;line-height:1}._touch-tester-active-label{font-size:var(--main-text-sm);color:var(--touch-tester-text-muted);text-transform:uppercase;letter-spacing:.1em}@media (max-width:768px){._touch-tester-wrapper{padding-left:1rem;padding-right:1rem}._touch-tester-start{padding:var(--main-space-4)}._touch-tester-start-icon{width:64px;height:64px}._touch-tester-start-icon svg{width:32px;height:32px}._touch-tester-start-title{font-size:1.25rem}._touch-tester-stats{gap:var(--main-space-4)}._touch-tester-stat-value{font-size:1.25rem}._touch-tester-active-count{font-size:4rem}}._touch-tester-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}._touch-tester-points-layer{pointer-events:none;z-index:2;position:absolute;top:0;bottom:0;left:0;right:0}._touch-tester-point{width:var(--touch-tester-point-size);height:var(--touch-tester-point-size);pointer-events:none;border-radius:50%;transition:opacity .15s;position:absolute;transform:translate(-50%,-50%)}._touch-tester-point:before{content:"";background:radial-gradient(circle,var(--point-color)0%,transparent 70%);opacity:.6;border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}._touch-tester-point:after{content:"";background:var(--point-color);box-shadow:0 0 20px var(--point-color),0 0 40px var(--point-color);border-radius:50%;position:absolute;top:15%;bottom:15%;left:15%;right:15%}._touch-tester-point .ripple{border-style:solid;border-width:2px;border-color:var(--point-color);border-radius:50%;animation:.6s ease-out forwards touchRipple;position:absolute;top:-50%;bottom:-50%;left:-50%;right:-50%}@keyframes touchRipple{0%{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.5)}}._touch-tester-point[data-finger="0"]{--point-color:var(--touch-tester-color-1)}._touch-tester-point[data-finger="1"]{--point-color:var(--touch-tester-color-2)}._touch-tester-point[data-finger="2"]{--point-color:var(--touch-tester-color-3)}._touch-tester-point[data-finger="3"]{--point-color:var(--touch-tester-color-4)}._touch-tester-point[data-finger="4"]{--point-color:var(--touch-tester-color-5)}._touch-tester-point[data-finger="5"]{--point-color:var(--touch-tester-color-6)}._touch-tester-point[data-finger="6"]{--point-color:var(--touch-tester-color-7)}._touch-tester-point[data-finger="7"]{--point-color:var(--touch-tester-color-8)}._touch-tester-point[data-finger="8"]{--point-color:var(--touch-tester-color-9)}._touch-tester-point[data-finger="9"]{--point-color:var(--touch-tester-color-10)}._touch-tester-hint{align-items:center;gap:var(--main-space-4);pointer-events:none;z-index:3;flex-direction:column;animation:2s ease-in-out infinite hintPulse;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}._touch-tester-hint.hidden{display:none}@keyframes hintPulse{0%,to{opacity:.7}50%{opacity:1}}._touch-tester-hint-icon{color:var(--touch-tester-text-muted)}._touch-tester-hint-icon svg{width:48px;height:48px}._touch-tester-hint-text{text-align:center;flex-direction:column;align-items:center;gap:.5rem;display:flex}._touch-tester-hint-main{font-size:var(--main-text-lg);color:var(--touch-tester-text);font-weight:500}._touch-tester-hint-sub{font-size:var(--main-text-sm);color:var(--touch-tester-text-muted)}@media (max-width:768px){._touch-tester-hint-icon svg{width:36px;height:36px}._touch-tester-hint-main{font-size:var(--main-text-base)}._touch-tester-hint-sub{font-size:var(--main-text-xs);padding:0 var(--main-space-4)}}._touch-tester-controls{bottom:var(--main-space-6);z-index:20;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .3s;position:absolute;left:50%;transform:translate(-50%)}._touch-tester-controls.hidden{opacity:0;pointer-events:none}._touch-tester-controls-inner{align-items:center;gap:var(--main-space-3);padding:var(--main-space-2);background:var(--touch-tester-control-bg);-webkit-backdrop-filter:blur(12px);border-radius:var(--touch-tester-control-radius);border-style:solid;border-width:1px;border-color:var(--touch-tester-border);display:flex;box-shadow:0 8px 32px #0000004d}._touch-tester-mode-toggle{background:#0003;border-radius:8px;padding:3px;display:flex}._touch-tester-mode-btn{color:var(--touch-tester-text-muted);font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;align-items:center;gap:.375rem;padding:.5rem .875rem;font-weight:500;transition:all .2s;display:inline-flex}._touch-tester-mode-btn:hover{color:var(--touch-tester-text)}._touch-tester-mode-btn--active{background:var(--touch-tester-color-1);color:#fff}._touch-tester-mode-btn--active:hover{color:#fff;opacity:.9}._touch-tester-mode-btn svg{width:16px;height:16px}._touch-tester-cell-size{align-items:center;gap:.25rem;padding:0 .5rem;display:none}._touch-tester-container.grid-mode ._touch-tester-cell-size{display:flex}._touch-tester-size-btn{width:28px;height:28px;color:var(--touch-tester-text-muted);cursor:pointer;background:#0003;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;transition:all .2s;display:inline-flex}._touch-tester-size-btn:hover{background:var(--touch-tester-control-hover);color:var(--touch-tester-text)}._touch-tester-size-btn svg{width:14px;height:14px}._touch-tester-size-value{text-align:center;min-width:40px;font-size:var(--main-text-xs);color:var(--touch-tester-text);font-variant-numeric:tabular-nums;font-weight:600}._touch-tester-cell-size:before{content:"";background:var(--touch-tester-border);width:1px;height:24px;margin-right:.25rem}._touch-tester-actions{gap:.25rem;display:flex}._touch-tester-action-btn{width:40px;height:40px;color:var(--touch-tester-text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:all .2s;display:inline-flex}._touch-tester-action-btn:hover{background:var(--touch-tester-control-hover);color:var(--touch-tester-text)}._touch-tester-action-btn svg{width:18px;height:18px}._touch-tester-actions:before{content:"";background:var(--touch-tester-border);width:1px;height:24px;margin-right:.5rem}@media (max-width:768px){._touch-tester-controls{bottom:var(--main-space-4);left:var(--main-space-3);right:var(--main-space-3);transform:none}._touch-tester-controls-inner{justify-content:center;width:100%}._touch-tester-mode-btn span{display:none}._touch-tester-mode-btn{padding:.5rem .75rem}._touch-tester-size-value{min-width:36px;font-size:.65rem}._touch-tester-size-btn{width:24px;height:24px}}._touch-tester-grid-overlay{pointer-events:none;z-index:1;display:none;position:absolute;top:0;bottom:0;left:0;right:0}._touch-tester-container.grid-mode ._touch-tester-grid-overlay{grid-template-columns:repeat(var(--grid-cols,8),1fr);grid-template-rows:repeat(var(--grid-rows,12),1fr);display:grid}._touch-tester-grid-cell{background:var(--touch-tester-grid-untouched);border-style:solid;border-width:1px;border-color:var(--touch-tester-grid-border);transition:background-color .2s}._touch-tester-grid-cell.touched{background:var(--touch-tester-grid-touched);border-color:var(--touch-tester-grid-touched)}._touch-tester-grid-cell.touched:after{content:"";background:var(--touch-tester-grid-touched);width:100%;height:100%;animation:.3s ease-out cellPulse;display:block}@keyframes cellPulse{0%{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1)}}._touch-tester-container.grid-mode ._touch-tester-hint{display:none}._touch-tester-container.grid-mode ._touch-tester-header:after{content:"";width:var(--grid-progress,0%);background:var(--touch-tester-grid-touched);height:3px;transition:width .2s;position:absolute;bottom:0;left:0}._touch-tester-container.grid-complete ._touch-tester-grid-overlay{animation:.5s gridComplete}@keyframes gridComplete{0%,to{opacity:1}50%{opacity:.7}}