*{user-select:none;-webkit-user-select:none;margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;background:#000;color:#e2e8f0;font-family:Inter,-apple-system,sans-serif;height:100%;width:100%}body>#app{height:100vh}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}header{padding:8px 16px 4px;text-align:center;flex-shrink:0}.header-top h1{font-family:Orbitron,monospace;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#f97316,#8b5cf6,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px}.subtitle{font-size:.65rem;color:#4b5563;margin-top:1px}.stats-bar{display:flex;justify-content:center;gap:12px;margin-top:6px}.stat-card{display:flex;align-items:center;gap:6px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:5px 12px}.stat-dot{width:8px;height:8px;border-radius:50%}.js-dot{background:#f97316;box-shadow:0 0 6px #f9731680}.wasm-dot{background:#06b6d4;box-shadow:0 0 6px #06b6d480}.stat-label{font-size:.7rem;color:#6b7280;font-weight:600}.stat-fps{font-family:Orbitron,monospace;font-size:.85rem;font-weight:700;color:#22c55e}.stat-fps small{font-size:.55rem;color:#6b7280;font-weight:400}.stat-ms{font-family:Orbitron,monospace;font-size:.65rem;color:#94a3b8}.tab-bar{display:flex;justify-content:center;gap:4px;padding:6px 16px;flex-shrink:0}.tab-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);color:#6b7280;padding:6px 18px;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.tab-btn:hover{background:#ffffff14;color:#94a3b8}.tab-btn.active{background:#ffffff1a;border-color:#ffffff26;color:#e2e8f0}.tab-btn.compare-btn.active{background:linear-gradient(135deg,#f9731626,#06b6d426);border-color:#8b5cf64d;color:#c4b5fd}.tab-icon{font-size:.75rem}.canvas-area{flex:1;position:relative;overflow:hidden;min-height:200px}.view-single{width:100%;height:100%}.view-single canvas{width:100%;height:100%}canvas{width:100%;height:100%;display:block;cursor:crosshair}.view-compare{display:flex;height:100%}.view-compare.hidden,.view-single.hidden{display:none}.compare-panel{flex:1;position:relative;overflow:hidden}.compare-label{position:absolute;top:8px;left:50%;transform:translate(-50%);font-family:Orbitron,monospace;font-size:.65rem;font-weight:600;color:#ffffff80;z-index:2;pointer-events:none;background:#0006;padding:2px 10px;border-radius:4px;backdrop-filter:blur(4px)}.compare-divider{width:2px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.6),transparent);flex-shrink:0}.hint-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.9rem;color:#ffffff4d;pointer-events:none;z-index:3;transition:opacity 1s;text-align:center}.hint-overlay.fade{opacity:0}.controls{flex-shrink:0;padding:8px 16px;background:#00000080;border-top:1px solid rgba(255,255,255,.04)}.control-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.control-item{display:flex;align-items:center;gap:8px}.control-item label{font-size:.75rem;color:#6b7280}.control-item input[type=range]{width:100px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px;outline:none}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#8b5cf6;border-radius:50%;cursor:pointer}.val{font-family:Orbitron,monospace;font-size:.75rem;color:#8b5cf6;min-width:28px;text-align:right}.action-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#94a3b8;padding:5px 14px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:all .2s;font-family:inherit;white-space:nowrap}.action-btn:hover{background:#ffffff1a;color:#e2e8f0}.action-btn.small{padding:3px 10px;font-size:.7rem}.benchmark-section{margin-top:8px;padding:10px 0;border-top:1px solid rgba(255,255,255,.04)}.benchmark-section.hidden{display:none}.benchmark-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.benchmark-header h3{font-family:Orbitron,monospace;font-size:.6rem;color:#6b7280;letter-spacing:2px}.benchmark-section canvas{width:100%;max-width:600px;margin:0 auto;display:block;cursor:default}.benchmark-legend{display:flex;justify-content:center;gap:16px;margin-top:6px;font-size:.75rem;color:#94a3b8}.legend-js,.legend-wasm{display:flex;align-items:center;gap:5px}.legend-js .dot{width:8px;height:8px;border-radius:50%;background:#f97316}.legend-wasm .dot{width:8px;height:8px;border-radius:50%;background:#06b6d4}@media (max-width: 640px){.header-top h1{font-size:.85rem}.stats-bar{gap:6px}.stat-card{padding:4px 8px;gap:4px}.stat-label{font-size:.6rem}.stat-fps{font-size:.75rem}.tab-btn{padding:5px 12px;font-size:.7rem}.control-item input[type=range]{width:80px}}