*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px}#root{display:flex;flex-direction:column;align-items:center}h1{margin-bottom:10px;font-size:1.5rem}.controls{display:flex;gap:20px;margin-bottom:20px;align-items:center}label{display:flex;align-items:center;gap:8px}input[type=range]{width:150px}button{padding:8px 16px;border:none;border-radius:4px;background:#4a4a6a;color:#eee;cursor:pointer}button:hover{background:#5a5a7a}.canvas-container{position:relative;border:2px solid #333;border-radius:8px;overflow:hidden}canvas{display:block;background:#16213e;touch-action:none}.legend{display:flex;gap:20px;margin-top:10px;font-size:.9rem}.legend-item{display:flex;align-items:center;gap:6px}.legend-color{width:20px;height:3px;border-radius:2px}.filter-controls{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.filter-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#2a2a4a;border-radius:4px}.filter-item label{display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-user-select:none;user-select:none;min-width:80px}.filter-item input[type=checkbox]{width:16px;height:16px}.filter-item input[type=range]{width:80px}.filter-item span{min-width:24px;text-align:right;font-size:.85rem;color:#aaa}